/* CHIKARA Studio ecosystem shell. Style 1 Gold (Standards 1.2a): vellum canvas, gold structure, teal state, obsidian dark.
   Colour comes from variables only. Motion follows Origami OS tokens (120/200/320/480/700 ms; paper-settle easing).
   Graphics levels: html[data-gfx=lite|standard|rich]. Reduced motion forces lite and removes all travel. */
:root {
  --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'Plus Jakarta Sans', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --ease: cubic-bezier(.2,.7,.3,1); --ease-emph: cubic-bezier(.2,.9,.08,1); --ease-settle: cubic-bezier(.22,1.14,.36,1); --ease-out: cubic-bezier(.05,.72,.12,1);
  --d1: 120ms; --d2: 200ms; --d3: 320ms; --d4: 480ms; --d5: 700ms; --stagger: 52ms;
  --bg: #F7F1E5; --bg-alt: #EFE7D6; --surface: #FCF8EE; --ink: #1A140C; --muted: #675F54; --primary: #C9973A; --primary-ink: #7A5A1E; --on-primary: #1A140C;
  --accent: #2A7A6E; --accent-ink: #1A524A; --line: rgba(122,90,30,.2); --line-strong: rgba(122,90,30,.38); --danger: #9C2B2B;
  --shadow-1: 0 1px 2px rgba(60,40,10,.08), 0 6px 18px rgba(60,40,10,.07); --shadow-2: 0 2px 4px rgba(60,40,10,.1), 0 18px 40px rgba(60,40,10,.14);
  --island-bg: #1A1208; --island-ink: #FBF5EA; --island-ok: #4ADE80; --island-warn: #FBBF24; --island-off: #F87171;
  --top-h: 56px; --stat-h: 30px; --nav-w: 232px; --insp-w: 284px;
}
html[data-mode="dark"] { --bg: #0F1010; --bg-alt: #171919; --surface: #171919; --ink: #F2EEE4; --muted: #A7A299; --primary: #C9973A; --primary-ink: #F0CF78; --on-primary: #14100A;
  --accent: #5FC4B3; --accent-ink: #5FC4B3; --line: rgba(255,255,255,.14); --line-strong: rgba(240,207,120,.4); --shadow-1: 0 1px 2px rgba(0,0,0,.5), 0 6px 18px rgba(0,0,0,.35); --shadow-2: 0 2px 4px rgba(0,0,0,.6), 0 18px 40px rgba(0,0,0,.5); }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
button, [role="button"], a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--primary-ink); outline-offset: 2px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.mono { font-family: var(--font-mono); } .muted { color: var(--muted); }
.eyebrow { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-ink); }

/* ---------------- frame ---------------- */
.eco { position: fixed; inset: 0; display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr) var(--insp-w); grid-template-rows: var(--top-h) minmax(0, 1fr) var(--stat-h);
  grid-template-areas: "top top top" "nav stage insp" "status status status"; background: var(--bg); overflow: hidden; isolation: isolate; }
.eco-grain { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .28; mix-blend-mode: multiply; background-size: 320px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .3 0 0 0 0 .1 0 0 0 .35 0'/%3E%3C/filter%3E%3Crect width='320' height='320' filter='url(%23n)'/%3E%3C/svg%3E"); }
html[data-mode="dark"] .eco-grain { opacity: .1; mix-blend-mode: screen; }
html[data-gfx="lite"] .eco-grain { display: none; }

.top { grid-area: top; position: relative; z-index: 30; display: flex; align-items: center; gap: .5rem; padding: 0 .75rem; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 92%, transparent); }
.brand { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: 0 .5rem 0 .25rem; border-radius: 10px; text-align: left; }
.brand img { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; }
.brand b { display: block; font-family: var(--font-display); font-size: 1.2rem; letter-spacing: .08em; line-height: 1; color: var(--primary-ink); }
.brand small { display: block; font-family: var(--font-mono); font-size: .56rem; letter-spacing: .2em; color: var(--muted); margin-top: 3px; }
.crumb { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: .4rem; } .crumb b { color: var(--ink); font-weight: 600; } .crumb span { margin: 0 .35rem; opacity: .5; }
.spacer { flex: 1; }
.chipbtn { display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: 0 .85rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: .78rem; font-weight: 600;
  transition: transform var(--d1) var(--ease), border-color var(--d2); }
.chipbtn:hover { border-color: var(--line-strong); } .chipbtn:active { transform: scale(.97); }
.chipbtn .dotv { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); } .chipbtn.set .dotv { background: var(--accent); }
.chipbtn kbd { font-family: var(--font-mono); font-size: .62rem; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 0 .3rem; }
.icbtn { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; transition: background var(--d2), transform var(--d1) var(--ease); } .icbtn:hover { background: var(--bg-alt); } .icbtn:active { transform: scale(.97); }

/* Island (Standards 16): overlays the centre of the top bar here, so nothing below it ever shifts. Logged as a deviation. */
.island { position: absolute; z-index: 90; top: 8px; left: 50%; transform: translateX(-50%); width: max-content; max-width: min(420px, calc(100% - 520px)); min-height: 40px; background: var(--island-bg); color: var(--island-ink);
  border-radius: 999px; box-shadow: 0 6px 24px rgba(0,0,0,.28); overflow: hidden; transition: border-radius var(--d2); }
.island[hidden] { display: none; } .island.expanded { border-radius: 22px; }
.island-toggle { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 38px; padding: 8px 18px; color: inherit; font-size: 13px; font-weight: 600; text-align: left; }
.island-toggle[aria-disabled="true"] { cursor: default; } .island-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .island.expanded .island-text { white-space: normal; }
.island-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.island-dot[data-state="ok"] { background: var(--island-ok); box-shadow: 0 0 0 3px rgba(74,222,128,.25); } .island-dot[data-state="warn"] { background: var(--island-warn); box-shadow: 0 0 0 3px rgba(251,191,36,.25); } .island-dot[data-state="off"] { background: var(--island-off); box-shadow: 0 0 0 3px rgba(248,113,113,.25); }
.island-detail { padding: 0 18px 12px 37px; font-size: 12px; font-weight: 500; color: #C3BCB2; }

/* ---------------- explorer ---------------- */
.nav { grid-area: nav; position: relative; z-index: 20; overflow: auto; padding: .9rem .6rem 1rem; border-right: 1px solid var(--line); background: var(--bg-alt); }
.nav .grp { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); padding: .9rem .7rem .35rem; }
.nav .it { display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 44px; padding: 0 .7rem; border-radius: 10px; text-align: left; font-weight: 600; font-size: .86rem; position: relative; transition: background var(--d2), transform var(--d1) var(--ease); }
.nav .it:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); } .nav .it:active { transform: scale(.98); }
.nav .it[aria-current="page"] { background: var(--surface); box-shadow: inset 3px 0 0 var(--primary), var(--shadow-1); }
.nav .it small { display: block; font-weight: 500; color: var(--muted); font-size: .68rem; margin-top: -2px; }
.nav .sub { padding: .1rem 0 .35rem 2.1rem; display: grid; gap: 1px; }
.nav .sub button { min-height: 36px; padding: 0 .7rem; border-radius: 8px; text-align: left; font-size: .8rem; color: var(--muted); } .nav .sub button:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--ink); }
.nav .sub button[aria-current="true"] { color: var(--primary-ink); font-weight: 700; }
.nav .jstep { display: flex; gap: .6rem; align-items: flex-start; padding: .35rem .7rem; font-size: .78rem; color: var(--muted); width: 100%; text-align: left; border-radius: 8px; min-height: 36px; } .nav .jstep:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); }
.nav .jstep i { font-style: normal; font-family: var(--font-mono); font-size: .66rem; width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-strong); margin-top: 1px; }
.nav .jstep.on { color: var(--ink); font-weight: 600; } .nav .jstep.on i { background: var(--primary); color: var(--on-primary); border-color: transparent; } .nav .jstep.done i { background: var(--accent); color: #fff; border-color: transparent; }

/* ---------------- stage ---------------- */
.stage { grid-area: stage; position: relative; z-index: 10; min-width: 0; min-height: 0; perspective: 1500px; overflow: hidden; display: flex; flex-direction: column; }
.jbar { position: relative; z-index: 12; flex: none; display: none; align-items: center; gap: .75rem; padding: .5rem .9rem; border-bottom: 1px solid var(--line); background: var(--surface); overflow-x: auto; }
.jbar.on { display: flex; }
.jbar .jt { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--primary-ink); white-space: nowrap; }
.jbar .steps { display: flex; gap: .35rem; align-items: center; }
.jbar .st { display: inline-flex; align-items: center; gap: .4rem; min-height: 36px; padding: 0 .7rem; border-radius: 999px; border: 1px solid var(--line); font-size: .74rem; font-weight: 600; white-space: nowrap; color: var(--muted); }
.jbar .st i { font-style: normal; font-family: var(--font-mono); font-size: .62rem; }
.jbar .st.on { background: var(--primary); color: var(--on-primary); border-color: transparent; } .jbar .st.done { color: var(--accent-ink); border-color: var(--accent); }
.jbar .nx { margin-left: auto; flex: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: 0 1.1rem; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--surface); font-weight: 700; font-size: .84rem;
  transition: transform var(--d1) var(--ease), box-shadow var(--d2), border-color var(--d2), filter var(--d2); }
.btn:hover { border-color: var(--primary-ink); } .btn:active { transform: scale(.97); } .btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn.primary { background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 82%, #fff), var(--primary)); color: var(--on-primary); border-color: transparent; box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, var(--shadow-1); }
.btn.primary:hover { filter: brightness(1.04); }
.btn.ghost { background: transparent; }
.planes { position: relative; flex: 1; min-height: 0; }
.plane { position: absolute; inset: 0; overflow: auto; background: var(--bg); visibility: hidden; opacity: 0; transform: translateX(28px); pointer-events: none;
  transition: opacity var(--d3) var(--ease), transform var(--d4) var(--ease-settle), visibility 0s linear var(--d4); }
.plane.on { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; z-index: 2; }
.plane.leaving { z-index: 1; }
.plane iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--bg); }
.plane .loading { position: absolute; inset: 0; display: grid; place-items: center; background: var(--bg); color: var(--muted); font-family: var(--font-mono); font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; transition: opacity var(--d3); pointer-events: none; }
.plane .loading.gone { opacity: 0; }
/* Rich (3.5D): the incoming plane hinges in from its left edge, the outgoing one folds back. Faces rigid, hinge soft. */
html[data-gfx="rich"] .plane { transform-origin: 0 50%; transform: rotateY(-7deg) translateX(46px); }
html[data-gfx="rich"] .plane.on { transform: none; }
html[data-gfx="lite"] .plane { transform: none; transition: opacity var(--d2) linear, visibility 0s linear var(--d2); }
@media (prefers-reduced-motion: reduce) { .plane, .plane.on { transform: none !important; transition: none !important; } }

/* ---------------- home ---------------- */
.home { max-width: 1040px; margin: 0 auto; padding: clamp(1.4rem, 4vw, 3rem) clamp(1rem, 4vw, 2.2rem) 5rem; position: relative; z-index: 1; }
.home h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.3rem, 6.2vw, 4.1rem); line-height: 1.02; margin: .4rem 0 .5rem; color: var(--primary-ink); letter-spacing: -.01em; }
.home h1 em { font-style: italic; color: var(--ink); }
.home .lede { max-width: 56ch; color: var(--muted); margin: 0 0 1.4rem; }
.intent { position: relative; display: flex; gap: .6rem; align-items: stretch; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 14px; padding: .5rem; box-shadow: var(--shadow-1); }
.intent::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: linear-gradient(90deg, transparent, var(--primary), transparent); transform-origin: 0 50%; transform: scaleX(0); animation: crease var(--d4) var(--ease-emph) .2s forwards; }
@keyframes crease { to { transform: scaleX(1); } }
.intent input { flex: 1; min-width: 0; min-height: 52px; border: 0; background: transparent; color: var(--ink); font-family: var(--font-display); font-size: clamp(1.15rem, 2.8vw, 1.5rem); padding: 0 .8rem; outline: none; }
.intent input::placeholder { color: var(--muted); opacity: .75; }
.intent:focus-within { border-color: var(--primary-ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent), var(--shadow-1); }
.honest { font-size: .72rem; color: var(--muted); margin: .55rem .2rem 0; } .honest b { color: var(--accent-ink); }
.egs { display: flex; flex-wrap: wrap; gap: .45rem; margin: .8rem 0 0; }
.egs button { min-height: 36px; padding: 0 .85rem; border: 1px solid var(--line); border-radius: 999px; font-size: .76rem; background: transparent; color: var(--muted); transition: all var(--d2); } .egs button:hover { color: var(--ink); border-color: var(--line-strong); background: var(--surface); }
.sec { margin-top: 2.4rem; }
.sec > h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.7rem; margin: 0 0 .15rem; color: var(--primary-ink); } .sec > p { margin: 0 0 1rem; color: var(--muted); font-size: .84rem; }
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }

/* folio card: a sheet with a folded corner (crease first, then fold). Depth depends on graphics level. */
.folio { position: relative; text-align: left; display: flex; flex-direction: column; gap: .5rem; padding: 1.15rem 1.15rem 1.05rem; background: var(--surface); border: 1px solid var(--line); border-radius: 6px 14px 14px 14px;
  box-shadow: var(--shadow-1); transform-style: preserve-3d; transition: transform var(--d3) var(--ease), box-shadow var(--d3), border-color var(--d2); min-height: 150px; }
.folio::before { content: ''; position: absolute; top: -1px; right: -1px; width: 30px; height: 30px; border-radius: 0 14px 0 8px; background: linear-gradient(225deg, var(--bg) 50%, color-mix(in srgb, var(--primary) 38%, var(--surface)) 50%); border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.folio h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.45rem; line-height: 1.1; margin: 0; color: var(--ink); padding-right: 1.6rem; }
.folio p { margin: 0; font-size: .82rem; color: var(--muted); } .folio .meta { margin-top: auto; padding-top: .5rem; display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.tag { display: inline-flex; align-items: center; gap: .3rem; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; padding: .16rem .5rem; border-radius: 999px; border: 1px solid var(--line); color: var(--accent-ink); }
.folio:hover { border-color: var(--line-strong); }
.folio:active { transform: scale(.97); transition-duration: var(--d1); }
html[data-gfx="standard"] .folio:hover, html[data-gfx="rich"] .folio:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
html[data-gfx="rich"] .folio { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); will-change: transform; }
html[data-gfx="rich"] .folio:hover { transform: perspective(900px) translateY(-3px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
html[data-gfx="rich"] .folio .sheen { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity var(--d3); background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--primary) 22%, transparent), transparent 60%); }
html[data-gfx="rich"] .folio:hover .sheen { opacity: 1; }
html[data-gfx="lite"] .folio { transition: border-color var(--d2); } html[data-gfx="lite"] .folio:hover { box-shadow: none; transform: none; }
.rise { animation: rise var(--d4) var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * var(--stagger)); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }   /* no end state: after it plays, hover and tilt transforms apply normally */
html[data-gfx="lite"] .rise { animation-duration: var(--d1); }
@media (prefers-reduced-motion: reduce) { .rise { animation: none; } .intent::after { animation: none; transform: scaleX(1); } }
.why { font-size: .72rem; color: var(--accent-ink); }
.empty { padding: 1.2rem; border: 1px dashed var(--line-strong); border-radius: 12px; color: var(--muted); font-size: .86rem; }
.resume { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 1rem 1.2rem; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); margin-bottom: 1.4rem; }
.resume b { font-family: var(--font-display); font-size: 1.25rem; color: var(--primary-ink); font-weight: 600; }

/* vault folio: opens around a hinge */
.vault { border: 1px solid var(--line-strong); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-1); overflow: hidden; }
.vault-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; flex-wrap: wrap; }
.vault-head h3 { margin: 0; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--ink); } .vault-head p { margin: 0; font-size: .8rem; color: var(--muted); }
.vault-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--d4) var(--ease-emph); } .vault.open .vault-body { grid-template-rows: 1fr; }
.vault-body > div { overflow: hidden; min-height: 0; }
.vault form { padding: 0 1.2rem 1.2rem; display: grid; gap: .8rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vault label { display: grid; gap: .25rem; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.vault .full { grid-column: 1 / -1; }
.vault input, .vault select, .vault textarea { width: 100%; min-height: 44px; padding: .55rem .75rem; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--bg); color: var(--ink); font: inherit; font-size: .9rem; text-transform: none; letter-spacing: 0; }
.vault textarea { min-height: 78px; resize: vertical; }
.vault .acts { grid-column: 1 / -1; display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.vault .hint { font-size: .72rem; color: var(--muted); text-transform: none; letter-spacing: 0; font-family: var(--font-body); }
@media (max-width: 620px) { .vault form { grid-template-columns: 1fr; } }

/* ---------------- inspector ---------------- */
.insp { grid-area: insp; position: relative; z-index: 20; overflow: auto; padding: 1rem; border-left: 1px solid var(--line); background: var(--bg-alt); }
.insp h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; margin: 0 0 .4rem; color: var(--primary-ink); }
.insp .blk { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line); } .insp .blk:last-child { border-bottom: 0; }
.insp dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .25rem .8rem; font-size: .8rem; } .insp dt { color: var(--muted); } .insp dd { margin: 0; overflow-wrap: anywhere; }
.insp .acts { display: grid; gap: .35rem; } .insp .acts button { min-height: 40px; padding: 0 .75rem; border: 1px solid var(--line); border-radius: 9px; text-align: left; font-size: .8rem; font-weight: 600; background: var(--surface); transition: border-color var(--d2), transform var(--d1) var(--ease); } .insp .acts button:hover { border-color: var(--line-strong); } .insp .acts button:active { transform: scale(.98); }

/* ---------------- status bar ---------------- */
.status { grid-area: status; z-index: 30; display: flex; align-items: center; gap: 1rem; padding: 0 .9rem; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--bg-alt); white-space: nowrap; overflow: hidden; }
.chipbtn.pilot { min-height: 28px; padding: 0 .6rem; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; color: var(--primary-ink); border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--surface)); }
.chipbtn.pilot { position: relative; } .chipbtn.pilot::after { content: ''; position: absolute; inset: -8px -4px; }
.chipbtn.pilot[hidden] { display: none; }
/* Narrow screens: the top bar has no room for a pill, so the brand's second line says PILOT and the Display menu explains it. */
@media (max-width: 759px) { .chipbtn.pilot { display: none; } html[data-pilot] .brand small { display: block; font-size: 0; } html[data-pilot] .brand small::after { content: 'PILOT'; font-size: .56rem; letter-spacing: .2em; color: var(--primary-ink); } } .status .pilot-note { color: var(--primary-ink); }
.status .sp { flex: 1; } .status .ok { color: var(--accent-ink); } .status .off { color: var(--danger); }

/* ---------------- dock (phones) ---------------- */
.dock { display: none; }

/* ---------------- overlays ---------------- */
.scrim { position: absolute; inset: 0; z-index: 80; background: rgba(15,12,6,.45); opacity: 0; pointer-events: none; transition: opacity var(--d3); } .scrim.on { opacity: 1; pointer-events: auto; }
.drawer { position: absolute; z-index: 84; top: 0; right: 0; bottom: 0; width: min(400px, 94%); background: var(--surface); border-left: 1px solid var(--line-strong); box-shadow: -20px 0 60px rgba(0,0,0,.28); transform: translateX(105%); transition: transform var(--d4) var(--ease-emph); padding: 1.1rem 1.2rem 1.4rem; overflow: auto; visibility: hidden; }
.drawer.on { transform: none; visibility: visible; }
.drawer h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.9rem; margin: 0 0 .6rem; color: var(--primary-ink); }
.drawer .row { padding: .8rem 0; border-top: 1px solid var(--line); } .drawer .row:first-of-type { border-top: 0; }
.drawer .row > b { display: block; margin-bottom: .35rem; font-size: .84rem; } .drawer .row > p { margin: 0 0 .5rem; font-size: .78rem; color: var(--muted); }
.seg { display: flex; flex-wrap: wrap; gap: .4rem; } .seg button { min-height: 44px; padding: 0 .9rem; border: 1px solid var(--line-strong); border-radius: 10px; font-weight: 600; font-size: .8rem; background: var(--bg); transition: all var(--d2); }
.seg button[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); border-color: transparent; }
.cmdk { position: absolute; z-index: 88; left: 50%; top: 72px; transform: translateX(-50%); width: min(580px, calc(100% - 1.5rem)); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: 0 30px 80px rgba(0,0,0,.4); display: none; overflow: hidden; } .cmdk.on { display: block; }
.cmdk input { width: 100%; min-height: 56px; padding: 0 1.1rem; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font-family: var(--font-display); font-size: 1.3rem; outline: none; }
.cmdk ul { list-style: none; margin: 0; padding: .35rem; max-height: min(52vh, 380px); overflow: auto; }
.cmdk li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; padding: 0 .8rem; border-radius: 9px; cursor: pointer; font-size: .86rem; } .cmdk li[aria-selected="true"] { background: color-mix(in srgb, var(--primary) 18%, transparent); }
.cmdk li small { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.toast { position: absolute; z-index: 95; left: 50%; bottom: calc(var(--stat-h) + 18px); transform: translateX(-50%) translateY(8px); background: var(--island-bg); color: var(--island-ink); border-radius: 10px; padding: .6rem 1rem; font-size: .82rem; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity var(--d2), transform var(--d3) var(--ease-out); max-width: calc(100% - 2rem); }
.toast.on { opacity: 1; transform: translateX(-50%); }

/* ---------------- breakpoints ---------------- */
@media (max-width: 1099px) { .eco { grid-template-columns: var(--nav-w) minmax(0, 1fr); grid-template-areas: "top top" "nav stage" "status status"; } .insp { display: none; } .island { max-width: min(380px, calc(100% - 430px)); } .crumb { display: none; } }
@media (max-width: 759px) {
  :root { --top-h: 54px; --stat-h: 26px; }
  .eco { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--top-h) minmax(0, 1fr) auto var(--stat-h); grid-template-areas: "top" "stage" "dock" "status"; }
  .nav { display: none; }
  .dock { grid-area: dock; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; z-index: 40; padding: .3rem .4rem calc(.3rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); }
  .dock button { display: grid; place-items: center; gap: 1px; min-height: 52px; border-radius: 12px; font-size: .64rem; font-weight: 700; color: var(--muted); transition: background var(--d2), transform var(--d1) var(--ease); } .dock button:active { transform: scale(.96); }
  .dock button[aria-current="page"] { color: var(--primary-ink); background: color-mix(in srgb, var(--primary) 16%, transparent); }
  .brand small, .chipbtn kbd, .chipbtn.search span { display: none; } .brand { padding-right: .25rem; } .brand b { font-size: 1.05rem; }
  .chipbtn.vaultchip span.t { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .island { max-width: calc(100% - 270px); top: 7px; } .island-toggle { padding: 8px 14px; font-size: 12px; }
  .status .hide-s { display: none; } .toast { bottom: calc(var(--stat-h) + 70px); }
  .jbar { padding: .4rem .6rem; } .jbar .jt { display: none; }
}
.only-narrow { display: none; } @media (max-width: 1099px) { .only-narrow { display: block; } }
@media (max-width: 759px) { #stView { display: none; } .status { justify-content: flex-end; } }

/* ---- plans, data, organisations (v0.2.0) ---- */
.drawer.wide { width: min(620px, 96%); overflow-y: auto; }
.dr-head { display: flex; justify-content: space-between; align-items: center; }
.drawer .note { padding: .7rem .85rem; border: 1px solid var(--line-strong); border-radius: 10px; font-size: .8rem; margin: .5rem 0; background: var(--bg); }
.drawer .note.warn { border-color: var(--primary); } .drawer .note.ok { border-color: var(--teal, #2A7A6E); }
.drawer .plan-now { margin: .4rem 0 .8rem; font-size: .9rem; } .drawer .muted { color: var(--muted); }
.tiers { display: grid; gap: .7rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tier { border: 1px solid var(--line-strong); border-radius: 14px; padding: .9rem; background: var(--bg); display: flex; flex-direction: column; gap: .35rem; }
.tier.on { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 35%, transparent); }
.tier.pro { background: color-mix(in srgb, var(--primary) 8%, var(--bg)); }
.tier h3 { margin: 0; font-family: var(--font-display); font-size: 1.3rem; } .tier .price { font-size: 1.15rem; font-weight: 700; } .tier .price small { font-weight: 500; color: var(--muted); font-size: .7rem; }
.tier p { margin: 0; font-size: .74rem; } .tier ul { margin: .2rem 0; padding-left: 1.05rem; font-size: .74rem; display: grid; gap: .25rem; flex: 1; }
.tier .cta { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; } .tier .cta .btn { min-height: 44px; font-size: .78rem; padding: 0 .7rem; }
.drawer .fine { font-size: .74rem; color: var(--muted); margin: .8rem 0; }
.drawer textarea, .drawer input[type=password], .drawer input[type=file] { width: 100%; padding: .55rem .7rem; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--bg); color: var(--ink); font: inherit; font-size: .85rem; }
.drawer textarea { font-family: var(--font-mono); min-height: 80px; } .drawer .fld { display: grid; gap: .25rem; font-size: .72rem; color: var(--muted); margin-bottom: .5rem; }
.drawer .acts, .drawer .acts2 { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .4rem; }
.drawer details.how { margin-top: .8rem; font-size: .78rem; } .drawer details.how summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; }
.vault-orgs { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .8rem 1.2rem 0; }
.orgpill { min-height: 44px; padding: 0 .9rem; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--ink); font-size: .8rem; font-weight: 600; cursor: pointer; }
.orgpill[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); border-color: transparent; } .orgpill.add { border-style: dashed; }
.vault-orgs .hint { font-size: .72rem; color: var(--muted); }
@media (max-width: 759px) { .tiers { grid-template-columns: 1fr; } }
a.btn { text-decoration: none; } .tier .zig { font-size: .72rem; color: var(--muted); margin-top: -.2rem; } .tier .cta a.btn:not(.primary) { color: var(--ink); }
.dr-head .icbtn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; line-height: 1; }