/* VIXART v02 · Apple-style UI layer (Drop 05) — capsules, squircles, island nav, spring motion.
   Pure #000/#FFF only: depth comes from inversion, never from blur, glass, shadow or colour. */
:root{--spring:cubic-bezier(.32,.72,0,1);--r-card:28px;--r-panel:40px}

/* ---------- island nav ---------- */
.nav{background:transparent;border-bottom:0;padding:12px 12px 0;pointer-events:none}
.nav .in{pointer-events:auto;max-width:1240px;margin:0 auto;height:60px;padding:0 8px 0 24px;background:var(--k);color:var(--w);border:1px solid var(--w);border-radius:999px;
  transition:max-width 600ms var(--spring),padding 600ms var(--spring),background var(--fast),color var(--fast)}
.nav ul{transition:opacity 300ms var(--spring),max-width 600ms var(--spring);max-width:800px;overflow:hidden;white-space:nowrap}
.nav ul a::after{background:var(--w)}
.nav .sw{border-color:var(--w);border-radius:999px;padding:2px}
.nav .sw button{border-radius:999px;padding:5px 10px;transition:background 300ms var(--spring),color 300ms var(--spring)}
.nav .sw button[aria-pressed="true"]{background:var(--w);color:var(--k)}
.nav .cta{background:var(--w);color:var(--k);border-color:var(--w);border-radius:999px;padding:11px 18px}
.nav .cta:hover{background:var(--k);color:var(--w)}
.nav .burger{color:var(--w)}
.nav.compact .in{max-width:640px}
.nav.compact ul{opacity:0;max-width:0}
.nav.compact .in:hover{max-width:1240px}
.nav.compact .in:hover ul{opacity:1;max-width:800px}
/* nav overlaps the page: pull first section up under it */
main{margin-top:-72px}
.hero{padding-top:72px;min-height:100vh;min-height:100svh}
.phero{padding-top:72px}
.hero .in{padding-top:88px}

/* menu as a rounded sheet under the island */
.menu{inset:80px 12px auto 12px;max-height:calc(100vh - 92px);background:var(--k);color:var(--w);border-radius:var(--r-card);overflow:auto;padding:8px 0;transform:scale(.96) translateY(-8px);transform-origin:50% 0;opacity:0;transition:transform 500ms var(--spring),opacity 250ms linear,visibility 0s linear 500ms}
.menu.open{transform:none;opacity:1;transition:transform 500ms var(--spring),opacity 200ms linear}
.menu a.it{border-color:var(--w)}
.menu .sw{border-color:var(--w);border-radius:999px;padding:2px}
.menu .sw button{border-radius:999px;padding:6px 12px}
.menu .sw button[aria-pressed="true"]{background:var(--w);color:var(--k)}
.menu .cta{background:var(--w);color:var(--k);border-color:var(--w)}

/* ---------- capsules ---------- */
.cta{border-radius:999px;padding:16px 26px;transition:background 400ms var(--spring),color 400ms var(--spring),transform 400ms var(--spring)}
.cta:active{transform:scale(.97)}
.chips span{border-radius:999px;padding:5px 10px}
.sw{border-radius:999px}
.sw button{border-radius:999px}
.link{border-bottom:0;padding:10px 16px;margin-left:-16px;border-radius:999px;transition:background 400ms var(--spring),color 400ms var(--spring)}
.link:hover{background:var(--k);color:var(--w)}
.inv .link:hover{background:var(--w);color:var(--k)}
.pre .skip2{border-radius:999px}

/* index rows: hover fills a capsule instead of a full-width bar */
.idx .row::before{inset:6px calc(var(--g) - 18px);border-radius:999px;transition:transform 500ms var(--spring)}
.idx .row{border-color:var(--k)}

/* ---------- squircle cards ---------- */
.work .fig,.figwipe .frame,.audit .score,.book .side,.strip figure,.pt,.ptl,.sys .bigpat{border-radius:var(--r-card);overflow:hidden}
.strip{gap:12px;padding:12px;border-bottom:0}
.strip figure{border:1px solid var(--k)}
.strip figure:nth-child(n){border-right:1px solid var(--k)}
.idx .pt{border-radius:14px}.ptl{border-radius:16px}
.dg button,.fmt button{border-radius:18px;transition:background 400ms var(--spring),color 400ms var(--spring),transform 400ms var(--spring)}
.dg button:active,.fmt button:active{transform:scale(.96)}
.fld input,.fld textarea{border:1px solid var(--k);border-radius:16px;padding:12px 16px}
.fld input:focus,.fld textarea:focus{border-width:2px;padding:11px 15px}
.rail{border:0;gap:12px;display:grid}
.rail li{border:1px solid;border-radius:var(--r-card)}
.roster{border:0;gap:12px}
.person{border:1px solid var(--k);border-radius:var(--r-card)}
.finding summary{border-radius:0;transition:background 400ms var(--spring),color 400ms var(--spring)}
.audit .scale span.on{border-radius:999px}

/* ---------- inset panels (inverted sections become rounded panels) ---------- */
.sec.inv{margin:12px;border-radius:var(--r-panel);border-bottom:0}
.sec.inv + .sec,.sec + .sec.inv{border-top:0}
.band{margin:12px;border-radius:var(--r-panel)}

/* ---------- live activity pill (Dynamic Island) ---------- */
.island{position:fixed;left:50%;bottom:18px;z-index:40;transform:translate(-50%,140%);display:flex;align-items:center;gap:12px;background:var(--k);color:var(--w);border:1px solid var(--w);border-radius:999px;padding:8px 8px 8px 18px;height:52px;max-width:calc(100vw - 24px);
  transition:transform 600ms var(--spring),padding 500ms var(--spring),height 500ms var(--spring)}
.island.show{transform:translate(-50%,0)}
.island .dot{width:10px;height:10px;border-radius:50%;background:var(--w);flex:none}
.island .t{font-weight:700;font-size:15px;white-space:nowrap}
.island .m{font-family:Mono,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;max-width:0;overflow:hidden;opacity:0;transition:max-width 600ms var(--spring),opacity 300ms linear}
.island:hover .m,.island:focus-visible .m{max-width:340px;opacity:1}
.island .go{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--w);color:var(--k);font-weight:700;flex:none}

@media (max-width:900px){
  .nav{padding:8px 8px 0}
  .nav .in{height:56px;padding:0 6px 0 18px}
  .menu{inset:72px 8px auto 8px}
  main{margin-top:-64px}
  .sec.inv,.band{margin:8px;border-radius:var(--r-card)}
  .strip{gap:8px;padding:8px}
  .idx .row::before{inset:4px 6px;border-radius:22px}
  .island .m{display:none}
  .island .t{font-size:14px}
}
@media (prefers-reduced-motion:reduce){.nav .in,.island,.menu{transition:none}}

/* VIXART icon cursor (assets/cursor.js) */
html.vx-has-cursor,html.vx-has-cursor *{cursor:none!important}
html.vx-has-cursor input,html.vx-has-cursor textarea,html.vx-has-cursor select,html.vx-has-cursor [contenteditable]{cursor:text!important}
.vx-cursor{position:fixed;left:0;top:0;width:30px;height:24px;z-index:300;pointer-events:none;mix-blend-mode:difference;opacity:0;transition:opacity 200ms linear}
.vx-cursor svg{display:block;width:100%;height:100%;transition:transform 180ms cubic-bezier(.32,.72,0,1)}
.vx-cursor.on{opacity:1}
.vx-cursor.hide{opacity:0}
.vx-cursor.down svg{transform:scale(.8)}
.vf b{display:none}