/* ============================================================
   KINETIC UI KIT · hyperminimal.css · v1.0.0
   The reading register. Requires kernel.css first.
   One spine. Hairlines and whitespace. Nothing else earns pixels.
   ============================================================ */

:root{
  /* canvas (hyperminimal) */
  --bg:#0C1014;
  --hair:#1A2127;
  --line:#212930;
  /* legacy aliases */
  --void:var(--bg); --panel:var(--bg); --panel-2:var(--bg);
}

html,body{height:100%}
body{background:var(--bg)}
a{color:var(--green-b);text-decoration:none}

/* ---- the spine (law 1: constant, 216px, hairline right) ---- */
aside.spine{position:fixed;top:0;left:0;bottom:0;width:216px;border-right:1px solid var(--hair);padding:34px 28px 26px;display:flex;flex-direction:column;z-index:50;background:var(--bg)}
.spine .brand{font-family:var(--mono);font-size:10.5px;letter-spacing:.3em;white-space:nowrap;color:var(--muted);line-height:1.8}
.spine .brand b{color:var(--green);font-weight:500;display:block;font-size:13px}
.spine nav{display:flex;flex-direction:column;gap:2px;margin-top:44px;flex:1}
.spine nav button,.spine nav a{position:relative;background:none;border:none;text-align:left;color:var(--dim);font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;padding:11px 0 11px 16px;cursor:pointer;transition:color .15s;display:block}
.spine nav button:before,.spine nav a:before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;background:transparent;transition:background .15s}
.spine nav button:hover,.spine nav a:hover{color:var(--fg)}
.spine nav button.on,.spine nav a.on{color:var(--green-b)}
.spine nav button.on:before,.spine nav a.on:before{background:var(--green)}
.side-foot{font-family:var(--mono);font-size:9px;letter-spacing:.16em;color:var(--faint);line-height:2;border-top:1px solid var(--hair);padding-top:18px}
.side-foot b{color:var(--dim);font-weight:400}

/* ---- main column ---- */
.maincol{margin-left:216px}
.maincol main{max-width:1240px;margin:0 auto;padding:52px 44px 120px}
.tab{display:none;animation:hm-fade .3s ease}
.tab.on{display:block}
@keyframes hm-fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* ---- headlines (serif states) ---- */
.big{font-family:var(--serif);font-size:30px;font-weight:500;margin:12px 0 40px;line-height:1.2}
.big b{color:var(--green-b);font-weight:500}
.big i{color:var(--dim);font-weight:400}
.sec{border-top:1px solid var(--hair);padding:38px 0 34px}
.sec:first-of-type{border-top:none;padding-top:0}
.sec h3{font-family:var(--serif);font-weight:500;font-size:26px;margin:10px 0 14px}
.sec p{font-size:13.5px;color:var(--muted);max-width:740px;line-height:1.65}
.sec p b{color:var(--fg);font-weight:500}

/* ---- numbered rules ---- */
.rules{margin-top:18px}
.rule{display:flex;gap:16px;border-bottom:1px solid var(--hair);padding:12px 0;font-size:13px;color:var(--muted);max-width:740px}
.rule .n{font-family:var(--mono);font-size:10.5px;color:var(--green-b);padding-top:2px;white-space:nowrap}
.rule b{color:var(--fg);font-weight:500}

/* ---- toolbar (law 6: one hairline, bare text) ---- */
.toolbar{display:flex;gap:24px;align-items:center;border-bottom:1px solid var(--hair)}
.toolbar input{background:none;border:none;color:var(--fg);font-family:var(--mono);font-size:12px;letter-spacing:.04em;padding:14px 0;outline:none;width:220px}
.toolbar input::placeholder{color:var(--faint)}
.chip{background:none;border:none;color:var(--dim);font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;padding:14px 0;cursor:pointer;transition:color .15s}
.chip:hover{color:var(--fg)}
.chip.on{color:var(--green-b)}
.count{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--faint)}

/* ---- board numbers (law 5: 24px mono, green underline) ---- */
.bignum{font-family:var(--mono);font-size:24px;position:relative;display:inline-block;padding:8px 28px 14px 0;cursor:pointer}
.bignum i{position:absolute;left:0;bottom:6px;height:2px;background:var(--green);opacity:.6;width:70%}
.bignum small{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-top:5px}

/* ---- facts line (law 7: one mono line, faint dividers) ---- */
.facts{font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--muted);margin:14px 0;padding:14px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);max-width:740px}
.facts b{color:var(--green-b);font-weight:500}
.facts span{color:var(--faint);padding:0 10px}

/* ---- status: text color only, never pills ---- */
.st{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase}
.st-ok{color:var(--green-b)} .st-mid{color:var(--fg)} .st-warn{color:var(--amber)} .st-dim{color:var(--dim)} .st-dead{color:var(--dim);text-decoration:line-through}

/* ---- rec block (2px green left bar) ---- */
.rec{border-left:2px solid var(--green);padding:4px 0 4px 18px;margin:22px 0 6px;max-width:820px}
.rec .cap{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}

/* ---- tables (sticky mono th, hairline rows) ---- */
table.hm{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
table.hm th{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:400;color:var(--dim);text-align:left;padding:16px 14px 10px 0;border-bottom:1px solid var(--hair);position:sticky;top:0;background:var(--bg)}
table.hm td{padding:12px 14px 12px 0;border-bottom:1px solid var(--hair);color:var(--muted);vertical-align:middle}
table.hm td:first-child{color:var(--fg);font-family:var(--mono);font-size:11.5px}
table.hm tr:hover td{color:var(--fg)}
table.hm tr:hover td:first-child{color:var(--green-b)}

/* ---- bare fields (FT-5: hairline underline, no boxes) ---- */
.hm-field{margin-bottom:14px;max-width:420px}
.hm-field label{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--dim);text-transform:uppercase;margin-bottom:2px}
.hm-field input,.hm-field select,.hm-field textarea{width:100%;background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;color:var(--fg);font-family:var(--mono);font-size:13px;padding:10px 2px;outline:none}
.hm-field input:focus,.hm-field select:focus,.hm-field textarea:focus{border-bottom-color:var(--green)}
.hm-btn{background:none;border:0;border-top:1px solid var(--line);border-radius:0;color:var(--green-b);font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;padding:12px 0;cursor:pointer;transition:color .15s}
.hm-btn:hover{color:var(--fg)}
.hm-btn:disabled{opacity:.5}

/* ---- washed gate (FT: full-screen, serif seal) ---- */
.gate{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:60;padding:24px}
.gate .box{width:320px;text-align:center}
.gate h1{font-family:var(--serif);font-weight:500;font-size:26px;letter-spacing:.01em;margin:20px 0 6px;color:var(--fg)}
.gate p{color:var(--dim);font-size:12.5px;margin-bottom:26px}
.gate .seal{width:36px;height:36px;border:1px solid var(--line);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:17px;color:var(--green-b)}
.gate .gmsg{color:var(--red);font-family:var(--mono);font-size:11px;margin-top:12px;min-height:15px}

/* ---- page footer ---- */
.foot{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--faint);border-top:1px solid var(--hair);margin-top:70px;padding-top:22px}

/* ---- mobile fallback (FT-2: single column, spine becomes top strip) ---- */
@media(max-width:900px){
  aside.spine{position:static;width:auto;height:auto;border-right:0;border-bottom:1px solid var(--hair);padding:22px 20px 16px;flex-direction:row;align-items:center;gap:18px;flex-wrap:wrap}
  .spine nav{flex-direction:row;margin-top:0;gap:16px;flex-wrap:wrap}
  .spine nav button,.spine nav a{padding:6px 0 6px 10px}
  .side-foot{display:none}
  .maincol{margin-left:0}
  .maincol main{padding:28px 20px 90px}
}

/* ============================================================
   v1 BOOK EXPANSION · complete part set, every state defined.
   Panel doctrine: Apple (no control without focus/disabled),
   Active Theory (CSS-only motion), ORB (hairlines, optical craft).
   ============================================================ */

/* ---- spine nav: badge counts + nesting + disabled ---- */
.spine nav .nbadge{float:right;font-size:9px;color:var(--faint);letter-spacing:.08em;padding-top:1px}
.spine nav button.on .nbadge,.spine nav a.on .nbadge{color:var(--green-b)}
.spine nav button.warn .nbadge{color:var(--amber)}
.spine nav .sub{padding-left:30px;font-size:9.5px}
.spine nav button:disabled{color:var(--faint);cursor:default}
.spine nav .nsec{font-family:var(--mono);font-size:8.5px;letter-spacing:.26em;color:var(--faint);margin:20px 0 6px 16px;text-transform:uppercase}

/* ---- breadcrumb (mono path line) ---- */
.crumb{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:6px}
.crumb a{color:var(--dim)}
.crumb a:hover{color:var(--fg)}
.crumb b{color:var(--muted);font-weight:400}
.crumb span{padding:0 8px;color:var(--faint)}

/* ---- toolbar states ---- */
.toolbar input:focus{box-shadow:0 1px 0 var(--green)}
.toolbar input:disabled{color:var(--faint);cursor:not-allowed}
.chip:focus-visible{outline-offset:-2px}
.chip:disabled{color:var(--faint);cursor:default}
.chip .c{color:var(--faint);padding-left:6px;letter-spacing:.06em}
.chip.on .c{color:var(--green)}

/* ---- bignum states ---- */
.bignum:hover small{color:var(--dim)}
.bignum.on{color:var(--green-b)}
.bignum.warn{color:var(--amber)}
.bignum.warn i{background:var(--amber)}
.bignum.dim{color:var(--dim);cursor:default}
.bignum.dim i{background:var(--faint)}

/* ---- status dot (live feeds; text stays the primary carrier) ---- */
.dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--dim);vertical-align:1px;margin-right:7px}
.dot.ok{background:var(--green)}
.dot.live{background:var(--green);animation:k-pulse 2.2s var(--ease) infinite}
.dot.warn{background:var(--amber)}
.dot.bad{background:var(--red)}

/* ---- table extensions ---- */
table.hm td.num,table.hm th.num{text-align:right;padding-right:0;font-variant-numeric:tabular-nums}
table.hm th.sort{cursor:pointer;user-select:none}
table.hm th.sort:hover{color:var(--fg)}
table.hm th.sort.asc:after{content:" \2191";color:var(--green-b)}
table.hm th.sort.desc:after{content:" \2193";color:var(--green-b)}
table.hm tr.sel td{color:var(--fg);box-shadow:inset 2px 0 0 var(--green)}
table.hm tr.sel td:first-child{color:var(--green-b);padding-left:14px}
table.hm tr.mute td{color:var(--faint)}
table.hm td .trunc{display:inline-block;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
table.hm tfoot td{color:var(--fg);font-family:var(--mono);font-size:11px;border-bottom:0;border-top:1px solid var(--line);padding-top:14px}
tr.hm-empty td{text-align:center;color:var(--faint);font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;padding:44px 0;border-bottom:0}

/* ---- pager (mono, bare) ---- */
.pager{display:flex;gap:20px;align-items:baseline;font-family:var(--mono);font-size:10px;letter-spacing:.16em;padding:16px 0;color:var(--faint)}
.pager button{background:none;border:0;color:var(--dim);font:inherit;letter-spacing:inherit;cursor:pointer;text-transform:uppercase;padding:2px 0}
.pager button:hover{color:var(--fg)}
.pager button.on{color:var(--green-b)}
.pager button:disabled{color:var(--faint);cursor:default}

/* ---- key-value detail (reading a single record) ---- */
.kv{max-width:740px}
.kv>div{display:grid;grid-template-columns:170px 1fr;gap:18px;border-bottom:1px solid var(--hair);padding:12px 0;font-size:13px}
.kv dt,.kv .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);padding-top:2px}
.kv dd,.kv .v{color:var(--muted)}
.kv .v b{color:var(--fg);font-weight:500}
.kv .v.mono,.kv dd.mono{font-family:var(--mono);font-size:11.5px;color:var(--fg)}

/* ---- feed / timeline (mono log lines) ---- */
.feed{max-width:820px}
.feed>div{display:grid;grid-template-columns:120px 1fr;gap:18px;padding:10px 0;border-bottom:1px solid var(--hair);font-size:12.5px;color:var(--muted)}
.feed time{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--faint);padding-top:2px}
.feed b{color:var(--fg);font-weight:500}
.feed .sig{color:var(--green-b)}

/* ---- progress (hairline with signal fill) ---- */
.meter{position:relative;height:2px;background:var(--hair);max-width:420px;margin:14px 0}
.meter i{position:absolute;left:0;top:0;bottom:0;background:var(--green);transition:width var(--t-slow) var(--ease)}
.meter.warn i{background:var(--amber)}
.meter-cap{font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--faint);text-transform:uppercase}

/* ---- bare buttons: variants + full state set ---- */
.hm-btn.primary{color:var(--green-b);border-top-color:var(--green)}
.hm-btn.quiet{color:var(--dim)}
.hm-btn.quiet:hover{color:var(--fg)}
.hm-btn.danger{color:var(--red);border-top-color:var(--red)}
.hm-btn.danger:hover{color:var(--fg)}
.hm-btn:focus-visible{outline-offset:-2px}
.hm-btn:active{opacity:.7}
.hm-btn:disabled{color:var(--faint);border-top-color:var(--hair);cursor:not-allowed;opacity:1}
.hm-btn.loading{color:var(--dim);pointer-events:none}
.hm-btn.loading:after{content:"···";letter-spacing:.1em;padding-left:8px;color:var(--green-b);animation:k-pulse 1s var(--ease) infinite}

/* ---- bare fields: full state set ---- */
.hm-field .help{font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--faint);margin-top:6px}
.hm-field.err input,.hm-field.err select,.hm-field.err textarea{border-bottom-color:var(--red)}
.hm-field.err .help{color:var(--red)}
.hm-field.ok input{border-bottom-color:var(--green)}
.hm-field input:disabled,.hm-field select:disabled,.hm-field textarea:disabled{color:var(--faint);border-bottom-style:dashed;cursor:not-allowed}
.hm-field input:read-only:not(:disabled){color:var(--muted);border-bottom-color:var(--hair)}
.hm-field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);background-position:calc(100% - 12px) 50%,calc(100% - 8px) 50%;background-size:4px 4px;background-repeat:no-repeat;cursor:pointer}
.hm-field textarea{resize:vertical;min-height:64px;line-height:1.6}
.hm-row{display:flex;gap:28px}.hm-row .hm-field{flex:1}

/* ---- inline notice line (no boxes; a line that states) ---- */
.notice{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;padding:12px 0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);max-width:740px;color:var(--muted)}
.notice.ok{color:var(--green-b)}
.notice.warn{color:var(--amber)}
.notice.bad{color:var(--red)}

/* ---- toast (single mono line, bottom, self-dismissing) ---- */
.toastline{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);background:var(--bg);border:1px solid var(--line);padding:10px 22px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg);z-index:var(--z-toast);animation:hm-fade var(--t-slow) var(--ease)}
.toastline b{color:var(--green-b);font-weight:400}
.toastline.bad b{color:var(--red)}

/* ---- overlay sheet (detail pane, right, hairline edge) ---- */
.scrim{position:fixed;inset:0;background:rgba(12,16,20,.72);z-index:var(--z-modal)}
.sheet{position:fixed;top:0;right:0;bottom:0;width:min(560px,92vw);background:var(--bg);border-left:1px solid var(--line);z-index:calc(var(--z-modal) + 1);padding:44px 40px;overflow-y:auto;animation:hm-sheet var(--t-slow) var(--ease)}
@keyframes hm-sheet{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.sheet .x{position:absolute;top:20px;right:22px;background:none;border:0;color:var(--dim);font-family:var(--mono);font-size:11px;letter-spacing:.2em;cursor:pointer;padding:6px}
.sheet .x:hover{color:var(--fg)}

/* ---- confirm (centered, serif question, bare actions) ---- */
.confirm{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:calc(var(--z-modal) + 1)}
.confirm .box{width:min(420px,92vw);background:var(--bg);border:1px solid var(--line);padding:36px 36px 26px;text-align:center}
.confirm h2{font-family:var(--serif);font-weight:500;font-size:24px;margin-bottom:8px}
.confirm p{color:var(--dim);font-size:12.5px;margin-bottom:22px}
.confirm .acts{display:flex;gap:0;justify-content:center}
.confirm .acts .hm-btn{padding:12px 22px}

/* ---- view states: empty / error / loading (every view defines all three) ---- */
.state{padding:70px 0;text-align:center;max-width:740px}
.state .glyph{font-family:var(--serif);font-size:26px;color:var(--faint);display:inline-flex;width:44px;height:44px;border:1px solid var(--hair);border-radius:50%;align-items:center;justify-content:center;margin-bottom:18px}
.state h4{font-family:var(--serif);font-weight:500;font-size:21px;color:var(--muted);margin-bottom:6px}
.state p{font-size:12.5px;color:var(--dim)}
.state.err .glyph{color:var(--red);border-color:var(--red)}
.state .hm-btn{margin-top:10px}

/* ---- secondary tabs in content ---- */
.subtabs{display:flex;gap:26px;border-bottom:1px solid var(--hair);margin-bottom:22px}
.subtabs button{background:none;border:0;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);padding:12px 0;cursor:pointer;position:relative}
.subtabs button:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent;transition:background var(--t-fast)}
.subtabs button:hover{color:var(--fg)}
.subtabs button.on{color:var(--green-b)}
.subtabs button.on:after{background:var(--green)}
.subtabs button:disabled{color:var(--faint);cursor:default}

/* ---- tooltip (mono, hairline, above) ---- */
[data-tip]{position:relative}
[data-tip]:hover:after,[data-tip]:focus-visible:after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--bg);border:1px solid var(--line);color:var(--muted);font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;padding:6px 10px;white-space:nowrap;z-index:var(--z-toast)}

/* ---- gate states ---- */
.gate .box .hm-field{max-width:none;text-align:left}
.gate.checking .seal{animation:k-pulse 1.2s var(--ease) infinite}
.gate .gmsg.ok{color:var(--green-b)}

/* ---- long-content guards ---- */
.wrap-any{overflow-wrap:anywhere}
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---- print: reading surfaces degrade to paper quietly ---- */
@media print{aside.spine,.toolbar,.pager,.toastline{display:none}.maincol{margin:0}body{background:#FFF;color:#16191C}}

/* ============================================================
   PATTERNS · v1.1.0
   Page-level recipes proven on the Desk master proto.
   ============================================================ */

/* ---- THE ENTRY · master entry / arrival ----
   A desk is entered, not loaded. Sequence: line draws, seal settles,
   wordmark, serif address, posture whisper, then the command. */
.entry{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;align-items:center;justify-content:center;overflow:hidden;transition:opacity 1.1s var(--ease)}
.entry.away{opacity:0;pointer-events:none}
.entry-breath{position:absolute;inset:-20%;background:radial-gradient(ellipse 52% 44% at 50% 46%,rgba(60,180,75,.05),transparent 70%);animation:entry-breathe 14s ease-in-out infinite}
@keyframes entry-breathe{0%,100%{opacity:.45}50%{opacity:1}}
.entry-grain{position:absolute;inset:0;opacity:.05;pointer-events:none;background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="240" height="240"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2"/><feColorMatrix type="saturate" values="0"/></filter><rect width="240" height="240" filter="url(%23n)" opacity="0.5"/></svg>')}
.entry-in{position:relative;text-align:center;will-change:transform}
.entry.away .entry-in{transform:translateY(-16px)!important;transition:transform 1.1s var(--ease)}
.entry-step{opacity:0;animation:entry-in .9s var(--ease) forwards}
@keyframes entry-in{from{opacity:0;transform:translateY(10px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
.entry-seal{width:64px;height:64px;border:1px solid var(--line);border-radius:50%;margin:0 auto 26px;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:26px;color:var(--green-b)}
.entry-line{width:120px;height:1px;padding:0;background:var(--line);margin:0 auto 26px;transform:scaleX(0);opacity:0;animation:entry-rule .8s var(--ease) .35s forwards}
@keyframes entry-rule{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
.entry-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--dim);margin-bottom:22px}
.entry-h{font-family:var(--serif);font-weight:500;font-size:38px;letter-spacing:-.01em;color:var(--fg);margin-bottom:14px}
.entry-date{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;color:var(--faint);margin-bottom:9px;text-transform:uppercase}
.entry-whisper{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;color:var(--dim);margin-bottom:52px;text-transform:uppercase}
.entry-whisper b{color:var(--green-b);font-weight:400}
.entry.behind .entry-whisper b,.entry.strained .entry-whisper b{color:var(--red)} /* .strained deprecated alias, use .behind */
.entry-cta{background:none;border:none;border-bottom:1px solid var(--green);padding:0 2px 9px;color:var(--green-b);font-family:var(--mono);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;cursor:pointer;animation:entry-in .9s var(--ease) 1.9s forwards,entry-pulse 3.6s ease-in-out 3.2s infinite}
.entry-cta:hover{animation:entry-in .9s var(--ease) 1.9s forwards;opacity:1;color:var(--fg);border-color:var(--fg)}
@keyframes entry-pulse{0%,100%{opacity:1}50%{opacity:.55}}
.entry-kbd{margin-top:20px;font-family:var(--mono);font-size:8.5px;letter-spacing:.22em;color:var(--faint);text-transform:uppercase}

/* ---- THE TAKEOVER · wizard / setup / edit ----
   Full-screen module: head bar, step rail with counts and DONE marks,
   serif panes, signature note. Nothing on it files itself. */
.tk{position:fixed;inset:0;z-index:300;background:var(--bg);display:none;flex-direction:column}
.tk.on{display:flex}
.tk-head{display:flex;justify-content:space-between;align-items:center;padding:18px 36px;border-bottom:1px solid var(--hair);font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
.tk-head b{color:var(--green-b);font-weight:400}
.tk-head button{background:none;border:none;color:var(--dim);font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;cursor:pointer;text-transform:uppercase}
.tk-head button:hover{color:var(--fg)}
.tk-body{flex:1;display:grid;grid-template-columns:280px 1fr;min-height:0}
.tk-rail{border-right:1px solid var(--hair);padding:30px 0 26px;display:flex;flex-direction:column}
.tk-step{position:relative;display:flex;justify-content:space-between;align-items:center;padding:13px 28px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);cursor:pointer;border:none;background:none;text-align:left;transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.tk-step em{font-style:normal;margin-right:12px;color:var(--faint)}
.tk-step i{font-style:normal;font-size:9px;letter-spacing:.16em;color:var(--faint)}
.tk-step:hover{color:var(--fg)}
.tk-step.on{color:var(--green-b);background:var(--green-dim)}
.tk-step.on:before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;background:var(--green)}
.tk-step.done em,.tk-step.done i{color:var(--green)}
.tk-note{margin:auto 28px 0;padding-top:22px;border-top:1px solid var(--hair);font-family:var(--serif);font-style:italic;font-size:14.5px;line-height:1.65;color:var(--dim)}
.tk-main{overflow-y:auto;padding:54px 72px}
.tk-t{font-family:var(--serif);font-weight:500;font-size:34px;margin-bottom:8px}
.tk-s{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--muted);margin-bottom:38px}
.tk-opt{display:grid;grid-template-columns:76px 1fr auto;gap:24px;align-items:baseline;padding:19px 0;border-bottom:1px solid var(--hair);max-width:880px}
.tk-opt .oc{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;color:var(--dim)}
.tk-opt h3{font-family:var(--serif);font-weight:500;font-size:19px;margin-bottom:5px}
.tk-opt p{font-size:13px;color:var(--muted);line-height:1.55;max-width:62ch}
.tk-opt button{background:none;border:1px solid var(--line);padding:8px 18px;color:var(--dim);font-family:var(--mono);font-size:9px;letter-spacing:.2em;cursor:pointer;text-transform:uppercase;transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.tk-opt button:hover{color:var(--green-b);border-color:var(--green)}
.tk-opt.sel button{color:var(--green-b);border-color:var(--green);background:var(--green-dim)}
.tk-field{max-width:560px;margin-bottom:26px}
.tk-field label{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.22em;color:var(--dim);margin-bottom:9px;text-transform:uppercase}
.tk-field input,.tk-field textarea{width:100%;background:none;border:none;border-bottom:1px solid var(--line);padding:9px 0;color:var(--fg);font-family:var(--sans);font-size:14px;outline:none;transition:border-color var(--t-fast) var(--ease);resize:vertical}
.tk-field input:focus,.tk-field textarea:focus{border-color:var(--green)}
.tk-kv{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);line-height:2.4;margin-bottom:30px}
.tk-kv b{color:var(--fg);font-weight:400;margin-left:8px}
.tk-nav{display:flex;gap:26px;margin-top:44px;align-items:center}
.tk-nav .nx{background:none;border:1px solid var(--line);padding:12px 30px;color:var(--green-b);font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;cursor:pointer;transition:border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.tk-nav .nx:hover{border-color:var(--green);background:var(--green-dim)}
.tk-nav .bk{background:none;border:none;color:var(--dim);font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;cursor:pointer}
.tk-nav .bk:hover{color:var(--fg)}
.tk-foot{padding:15px 36px;border-top:1px solid var(--hair);font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;color:var(--faint);text-transform:uppercase}

@media(prefers-reduced-motion:reduce){
  .entry{transition:none}
  .entry-step,.entry-line,.entry-cta{animation:none;opacity:1;transform:none}
  .entry-breath{animation:none}
}

/* ============================================================
   v2.3.0 · operational parts (canon: Operation LODESTAR console)
   ============================================================ */

/* ---- counter strip (live board counters) ---- */
.counters{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.counters>button,.counters>div{background:none;border:none;text-align:left;padding:22px 18px 20px 0;font:inherit;color:inherit}
.counters>button{cursor:pointer;transition:background var(--t-fast,.15s)}
.counters>button:hover{background:rgba(60,180,75,.04)}
.counters>button:focus-visible{outline:2px solid rgba(60,180,75,.45);outline-offset:-2px}
.counters .v{font-family:var(--mono);font-size:24px;color:var(--fg);font-variant-numeric:tabular-nums}
.counters .v.g{color:var(--green-b)}
.counters .v.warn{color:var(--amber)}
.counters .v.dim{color:var(--faint)}
.counters .k{font-family:var(--mono);font-size:9px;letter-spacing:.18em;color:var(--dim);text-transform:uppercase;margin-top:8px;line-height:1.7}

/* ---- pane switch (view sub-navigation, boxed chips) ---- */
.paneswitch{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.paneswitch button{background:none;border:1px solid var(--hair);color:var(--dim);font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;padding:9px 16px;cursor:pointer;transition:color var(--t-fast,.15s),border-color var(--t-fast,.15s)}
.paneswitch button:hover{color:var(--fg)}
.paneswitch button.on{color:var(--green-b);border-color:rgba(60,180,75,.45);background:rgba(60,180,75,.06)}
.paneswitch button:disabled{color:var(--faint);cursor:not-allowed}
.paneswitch button:focus-visible{outline:2px solid rgba(60,180,75,.45);outline-offset:2px}
.pane{display:none}
.pane.on{display:block;animation:hm-fade .3s ease}

/* ---- cycle token (click-to-cycle status, text is the carrier) ---- */
.cyc{background:none;border:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;padding:0;color:var(--dim)}
.cyc:hover{text-decoration:underline;text-decoration-color:var(--faint);text-underline-offset:4px}
.cyc:focus-visible{outline:2px solid rgba(60,180,75,.45);outline-offset:4px}
.cyc:disabled{cursor:not-allowed;opacity:.5}

/* ---- step ledger (the live steps to done; fixed length is the law) ---- */
.ledger{border-top:1px solid var(--hair)}
.ledger .lg-r{display:grid;grid-template-columns:44px 110px 1fr;gap:0 26px;align-items:baseline;border-bottom:1px solid var(--hair);padding:17px 0}
.ledger .no{font-family:var(--mono);font-size:12px;color:var(--faint)}
.ledger .t{font-size:13.5px;color:var(--fg)}
.ledger .t small{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--faint);margin-top:4px}
.ledger .lg-r.done .t{color:var(--dim);text-decoration:line-through;text-decoration-color:var(--faint)}

/* ---- sequence (touch playbook: numbered rail, copyable touches) ---- */
.seq{border-top:1px solid var(--hair);padding:30px 0 8px;display:grid;grid-template-columns:150px 1fr;gap:0 34px}
.seq .n{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--green-b);text-transform:uppercase}
.seq h3{font-size:16px;font-weight:500;margin:0 0 6px;color:var(--fg)}
.seq .touch{display:grid;grid-template-columns:1fr 74px;gap:18px;align-items:start;border-bottom:1px solid var(--hair);padding:14px 0}
.seq .touch p{margin:0;font-size:13px;line-height:1.6;color:var(--muted)}
.seq .touch p b{color:var(--fg);font-weight:500}
.seq .touch .mono{font-family:var(--mono);font-size:11px;color:var(--green-b)}
.seq-copy{background:none;border:1px solid var(--line);border-radius:3px;color:var(--dim);font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;padding:6px 0;cursor:pointer;transition:color var(--t-fast,.15s),border-color var(--t-fast,.15s)}
.seq-copy:hover{color:var(--green-b);border-color:rgba(60,180,75,.45)}
.seq-copy[data-copied],.seq-copy.ok{color:var(--green-b);border-color:rgba(60,180,75,.45)}
.seq-copy:focus-visible{outline:2px solid rgba(60,180,75,.45);outline-offset:2px}

@media(max-width:900px){
  .counters{grid-template-columns:repeat(2,1fr)}
  .seq{grid-template-columns:1fr;gap:10px 0}
  .ledger .lg-r{grid-template-columns:34px 84px 1fr;gap:0 14px}
}
@media(prefers-reduced-motion:reduce){
  .pane.on{animation:none}
}