/* ============================================================
   KINETIC UI KIT · enterprise.css · v2.0.0 · FITTS REVISION
   The writing register. Requires kernel.css first.
   Surfaces, panels, real controls. Built for filling in.
   v2: Norman/Fitts affordance pass, locked by dow 2026-07-09.
   Bigger targets, bordered inputs + signal focus ring, stronger
   states, deeper canvas, radius 6.
   ============================================================ */

:root{
  /* canvas (enterprise) */
  --bg:#101418;
  --surface:#171D23;
  --surface-2:#1C242B;
  --line:#2A323B;
  --line-s:#364049;
  --radius:6px;
  --maxw:1180px;
  /* muted status inks (v2: --bad raised to AA on surface, 5.5:1) */
  --ok:#8FAE84; --warn:#C79A4E; --bad:#C97F72;
  /* v2 panel audit: metadata ink AA at 9.5px on this canvas (4.5:1 on all three surfaces) */
  --dim:#828B95;
  /* interactive boundary: 3:1 non-text contrast against control bg (WCAG 1.4.11) */
  --line-i:#606B77;
}

body{background:var(--bg);font-size:var(--fs-xl);line-height:var(--lh-base)}

/* ---- surfaced sidebar, 248px ---- */
.shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.shell aside{background:var(--surface);border-right:1px solid var(--line);padding:28px 20px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:4px}
.shell .brand{font-family:var(--serif);font-size:var(--fs-brand);letter-spacing:var(--ls-brand);margin-bottom:4px}
.shell .brand b{color:var(--green);font-weight:var(--fw-semi)}
.brand-sub{font-family:var(--mono);font-size:var(--fs-3xs);letter-spacing:var(--ls-sub);color:var(--dim);margin-bottom:28px}
.shell nav{display:flex;flex-direction:column;gap:2px}
.shell nav .nsec{font-size:var(--fs-xs);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--dim);margin:22px 0 8px 12px;font-family:var(--mono)}
.shell nav button,.shell nav a{background:none;border:1px solid transparent;text-align:left;color:var(--muted);font-size:var(--fs-base-5);padding:11px 14px;transition:all var(--t-fast) var(--ease);border-radius:var(--radius);cursor:pointer;font-family:var(--sans);display:block;text-decoration:none;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shell nav button:hover,.shell nav a:hover{background:var(--surface-2);border-color:var(--line);color:var(--fg)}
.shell nav button.on,.shell nav a.on{background:var(--green-dim);border-color:rgba(60,180,75,.35);color:var(--green-b)}
.side-foot{margin-top:auto;font-size:var(--fs-sm);color:var(--dim);border-top:1px solid var(--line);padding-top:16px;line-height:var(--lh-relaxed);font-family:var(--mono)}
.shell main{padding:40px 48px 96px;max-width:var(--maxw);width:100%}

/* ---- headings ---- */
h1.ent{font-family:var(--serif);font-weight:var(--fw-medium);font-size:var(--fs-d2);margin:10px 0 6px}
h1.ent b{color:var(--green-b);font-weight:var(--fw-medium)}
.lead{color:var(--muted);max-width:720px;font-size:var(--fs-lg-5);margin-bottom:32px}
.lead b{color:var(--fg);font-weight:var(--fw-medium)}

/* ---- panels carry forms ---- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:20px 22px;margin-bottom:14px}
.panel h4{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:var(--ls-wide);color:var(--dim);font-weight:var(--fw-regular);margin-bottom:10px;text-transform:uppercase}
.panel p{font-size:var(--fs-base-5);color:var(--muted);max-width:700px}
.panel p b{color:var(--fg);font-weight:var(--fw-medium)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ---- stat band ---- */
.band{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:14px}
.band>div{background:var(--surface);padding:18px 20px}
.band .v{font-family:var(--mono);font-size:var(--fs-h1);color:var(--green-b)}
.band .v.mute{color:var(--fg)}
.band .k{font-family:var(--mono);font-size:var(--fs-3xs);letter-spacing:var(--ls-foot);color:var(--dim);margin-top:6px;text-transform:uppercase}

/* ---- table ---- */
table.ent{width:100%;border-collapse:collapse;font-size:var(--fs-base);font-variant-numeric:tabular-nums}
table.ent th{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--dim);font-weight:var(--fw-semi);text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--surface)}
table.ent td{padding:12px 14px;border-bottom:1px solid var(--line);color:var(--muted)}
table.ent td:first-child{color:var(--fg);font-family:var(--mono);font-size:var(--fs-sm-5)}
table.ent tr:hover td{background:rgba(60,180,75,.05)}

/* ---- pills (muted status, dot carries state) ---- */
.pill{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-s);border-radius:99px;background:var(--surface-2);padding:5px 12px;font-family:var(--mono);font-size:var(--fs-xs);font-weight:var(--fw-semi);letter-spacing:var(--ls-pill)}
.pill .dot{width:6px;height:6px;border-radius:50%;background:var(--dim)}
.pill.ok{color:var(--green-b);border-color:rgba(60,180,75,.3)}.pill.ok .dot{background:var(--green)}
.pill.warn{color:var(--warn);border-color:rgba(199,154,78,.35)}.pill.warn .dot{background:var(--warn)}
.pill.bad{color:var(--bad);border-color:rgba(185,107,94,.35)}.pill.bad .dot{background:var(--bad)}

/* ---- buttons ---- */
.btn{display:inline-block;border:1px solid var(--line-s);border-radius:var(--radius);background:var(--surface-2);color:var(--fg);font-family:var(--mono);font-size:var(--fs-sm);font-weight:var(--fw-semi);letter-spacing:var(--ls-btn);padding:10px 18px;cursor:pointer;text-decoration:none}
.btn:hover{border-color:var(--dim);background:var(--surface)}
.btn.primary{background:var(--green);color:#0A0A0A;border-color:var(--green);font-weight:var(--fw-semi)}
.btn.primary:hover{background:var(--green-b)}

/* ---- fields (real controls, signal focus) ---- */
.field{margin-bottom:12px;max-width:420px}
.field label{display:block;font-family:var(--mono);font-size:var(--fs-2xs);font-weight:var(--fw-semi);letter-spacing:var(--ls-label);color:var(--muted);text-transform:uppercase;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;background:#12171C;border:1px solid var(--line-i);caret-color:var(--green-b);border-radius:var(--radius);color:var(--fg);font-family:var(--sans);font-size:var(--fs-base-5);padding:11px 13px;outline:none}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green);outline:2px solid rgba(60,180,75,.25)}

/* ---- notes ---- */
.note{font-size:var(--fs-md);color:var(--dim);background:var(--green-dim);border:1px solid rgba(60,180,75,.25);border-radius:var(--radius);padding:12px 14px;max-width:760px;margin-top:18px}
.note b{color:var(--green-b);font-weight:var(--fw-medium)}

/* ---- footer ---- */
.foot{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:var(--ls-foot);color:var(--dim);border-top:1px solid var(--line);margin-top:60px;padding-top:20px}

/* ---- degradable: sidebar collapses to top row ---- */
@media(max-width:900px){
  .shell{display:block}
  .shell aside{position:static;height:auto;flex-direction:row;align-items:center;gap:16px;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--line);padding:18px 20px}
  .shell nav{flex-direction:row;flex-wrap:wrap}
  .shell nav .nsec{margin:0 4px}
  .side-foot{display:none}
  .shell main{padding:26px 20px 80px}
  .band{grid-template-columns:1fr 1fr}
  .grid2{grid-template-columns:1fr}
  .dl{grid-template-columns:1fr}
  .dl dt{border-bottom:0;padding-bottom:2px}
  .dl dd{padding-top:0}
}

/* reflow at extreme narrow widths (WCAG 1.4.10) */
@media(max-width:480px){
  .steps{flex-wrap:wrap}
  .steps>div{flex:none;width:50%}
}

/* ============================================================
   v1 BOOK EXPANSION · complete writing-register control set.
   Every control defines: rest, hover, focus, active, disabled,
   loading, error, success, readonly. No exceptions.
   ============================================================ */

/* ---- sidebar extensions ---- */
.shell nav .nbadge{float:right;font-family:var(--mono);font-size:var(--fs-2xs);color:var(--dim);padding-top:2px}
.shell nav button.on .nbadge{color:var(--green-b)}
.shell nav button:disabled{color:var(--faint);cursor:default}

/* ---- breadcrumbs ---- */
.crumbs{font-size:var(--fs-md);color:var(--dim);margin-bottom:6px}
.crumbs a{color:var(--muted);text-decoration:none;display:inline-block;padding:3px 2px}
.crumbs a:hover{color:var(--fg)}
.crumbs span{padding:0 8px;color:var(--faint)}
.crumbs b{color:var(--fg);font-weight:var(--fw-medium)}

/* ---- tabs ---- */
.enttabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:20px}
.enttabs button{background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);font-family:var(--sans);font-size:var(--fs-base);padding:10px 14px;cursor:pointer;transition:color var(--t-fast)}
.enttabs button:hover{color:var(--fg)}
.enttabs button.on{color:var(--green-b);border-bottom-color:var(--green)}
.enttabs button:disabled{color:var(--faint);cursor:default}

/* ---- buttons: variants x sizes x full state set ---- */
.btn{transition:border-color var(--t-fast),background var(--t-fast),color var(--t-fast);user-select:none}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn:disabled:hover{border-color:var(--line-s)}
.btn.primary:disabled:hover{background:var(--green)}
.btn.ghost{background:none;border-color:transparent;color:var(--muted)}
.btn.ghost:hover{color:var(--fg);background:var(--surface-2)}
.btn.danger{color:var(--bad);border-color:rgba(185,107,94,.4)}
.btn.danger:hover{border-color:var(--bad);background:rgba(185,107,94,.08)}
.btn.danger.solid{background:var(--bad);color:#0A0A0A;font-weight:var(--fw-semi)}
.btn.sm{padding:6px 12px;font-size:var(--fs-xs)}
.btn.lg{padding:13px 22px;font-size:var(--fs-md)}
.btn.loading{pointer-events:none;position:relative;color:transparent}
.btn.loading:after{content:"";position:absolute;inset:0;margin:auto;width:12px;height:12px;border:1.5px solid var(--dim);border-top-color:var(--green-b);border-radius:50%;animation:ent-spin .7s linear infinite}
.btn.primary.loading:after{border-color:rgba(10,10,10,.35);border-top-color:#0A0A0A}
@keyframes ent-spin{to{transform:rotate(360deg)}}
.btngroup{display:inline-flex}
.btngroup .btn{border-radius:0}
.btngroup .btn:first-child{border-radius:var(--radius) 0 0 var(--radius)}
.btngroup .btn:last-child{border-radius:0 var(--radius) var(--radius) 0}
.btngroup .btn+.btn{margin-left:-1px}
.btngroup .btn.on{border-color:var(--green);color:var(--green-b);position:relative;z-index:1}

/* ---- fields: full state set ---- */
.field .help{font-size:var(--fs-sm);color:var(--dim);margin-top:6px;line-height:var(--lh-snug)}
.field .req{color:var(--bad);padding-left:3px}
.field input:hover:not(:focus):not(:disabled),.field select:hover:not(:focus):not(:disabled),.field textarea:hover:not(:focus):not(:disabled){border-color:var(--line-s);filter:brightness(1.15)}
.field.err input,.field.err select,.field.err textarea{border-color:var(--bad)}
.field.err input:focus,.field.err select:focus,.field.err textarea:focus{border-color:var(--bad);outline-color:rgba(201,127,114,.3)}
.field.ok input:focus{border-color:var(--green);outline:2px solid rgba(60,180,75,.25)}
.field.err .help{color:var(--bad)}
.field.ok input{border-color:var(--green)}
.field.ok .help{color:var(--ok)}
.field input:disabled,.field select:disabled,.field textarea:disabled{background:var(--surface);color:var(--faint);cursor:not-allowed;border-style:dashed}
.field input:read-only:not(:disabled){background:var(--surface);color:var(--muted)}
.field textarea{resize:vertical;min-height:88px;line-height:var(--lh-loose)}
.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% - 16px) 50%,calc(100% - 12px) 50%;background-size:4px 4px;background-repeat:no-repeat;cursor:pointer}
.field .affix{display:flex;align-items:stretch}
.field .affix span{display:flex;align-items:center;padding:0 12px;background:var(--surface-2);border:1px solid var(--line-s);color:var(--dim);font-family:var(--mono);font-size:var(--fs-sm)}
.field .affix span:first-child{border-right:0;border-radius:var(--radius) 0 0 var(--radius)}
.field .affix span:last-child{border-left:0;border-radius:0 var(--radius) var(--radius) 0}
.field .affix input{border-radius:0}
.field .affix input:first-child{border-radius:var(--radius) 0 0 var(--radius)}
.field .affix input:last-child{border-radius:0 var(--radius) var(--radius) 0}
.field .cnt{float:right;font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint)}
.field .cnt.over{color:var(--bad)}

/* ---- choice controls ---- */
.check{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-base-5);color:var(--muted);padding:6px 0;cursor:pointer;max-width:560px}
.check input{appearance:none;width:16px;height:16px;min-width:16px;border:1px solid var(--line-i);border-radius:3px;background:var(--bg);cursor:pointer;margin-top:1px;transition:all var(--t-fast);position:relative}
.check input:hover{border-color:var(--dim)}
.check input:checked{background:var(--green);border-color:var(--green)}
.check input:checked:after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #0A0A0A;border-width:0 2px 2px 0;transform:rotate(45deg)}
.check input:indeterminate{background:var(--green);border-color:var(--green)}
.check input:indeterminate:after{content:"";position:absolute;left:3px;top:6px;width:8px;height:2px;background:#0A0A0A}
.check input:disabled{opacity:.4;cursor:not-allowed}
.check input:disabled~span{color:var(--faint)}
.check.radio input{border-radius:50%}
.check.radio input:checked{background:var(--bg);border-color:var(--green)}
.check.radio input:checked:after{border:0;left:4px;top:4px;width:6px;height:6px;border-radius:50%;background:var(--green);transform:none}
.check b{color:var(--fg);font-weight:var(--fw-medium)}

/* ---- toggle switch ---- */
.toggle{display:inline-flex;align-items:center;gap:10px;cursor:pointer;font-size:var(--fs-base-5);color:var(--muted)}
.toggle input{appearance:none;width:34px;height:19px;border-radius:99px;background:var(--surface-2);border:1px solid var(--line-i);position:relative;cursor:pointer;transition:background var(--t-base)}
.toggle input:after{content:"";position:absolute;left:2px;top:2px;width:13px;height:13px;border-radius:50%;background:var(--dim);transition:all var(--t-base) var(--ease)}
.toggle input:checked{background:var(--green);border-color:var(--green)}
.toggle input:checked:after{left:17px;background:#0A0A0A}
.toggle input:disabled{opacity:.4;cursor:not-allowed}

/* ---- file drop ---- */
.drop{border:1px dashed var(--line-i);border-radius:var(--radius);padding:28px;text-align:center;color:var(--dim);font-size:var(--fs-md-5);cursor:pointer;transition:border-color var(--t-fast);max-width:560px}
.drop:hover,.drop.over{border-color:var(--green);color:var(--muted)}
.drop b{color:var(--green-b);font-weight:var(--fw-medium)}
.drop .mono{font-size:var(--fs-xs);color:var(--faint);display:block;margin-top:6px}

/* ---- form structure: fieldset + wizard steps + sticky footer ---- */
.fset{border:0;border-top:1px solid var(--line);padding-top:18px;margin:22px 0 0}
.fset legend{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--dim);padding-right:14px}
.steps{display:flex;gap:0;margin-bottom:26px;font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:var(--ls-steps);text-transform:uppercase}
.steps>div{flex:1;padding:12px 0 10px;border-top:2px solid var(--line);color:var(--faint)}
.steps>div.done{border-top-color:var(--green);color:var(--dim)}
.steps>div.on{border-top-color:var(--green);color:var(--green-b)}
.steps .n{color:inherit;padding-right:8px}
.formfoot{display:flex;gap:10px;align-items:center;border-top:1px solid var(--line);margin-top:26px;padding-top:18px}
.formfoot .spacer{flex:1}
.formfoot .savenote{font-family:var(--mono);font-size:var(--fs-xs);color:var(--dim)}

/* ---- table extensions: select, bulk, sort, pager, empty, states ---- */
table.ent th.sort{cursor:pointer;user-select:none}
table.ent th.sort:hover{color:var(--fg)}
table.ent th.sort.asc:after{content:" \2191";color:var(--green-b)}
table.ent th.sort.desc:after{content:" \2193";color:var(--green-b)}
table.ent td.num,table.ent th.num{text-align:right;font-variant-numeric:tabular-nums}
table.ent .rowck{width:34px}
table.ent tr.sel td{background:var(--green-dim)}
table.ent tr.sel:hover td{background:rgba(60,180,75,.14)}
table.ent.dense td,table.ent.dense th{padding:7px 14px;font-size:var(--fs-md-5)}
tr.ent-empty td{text-align:center;color:var(--dim);padding:44px 0;font-size:var(--fs-base)}
.bulkbar{display:flex;align-items:center;gap:12px;background:var(--surface-2);border:1px solid var(--green);border-radius:var(--radius);padding:8px 14px;margin-bottom:10px;font-size:var(--fs-md-5);color:var(--fg)}
.bulkbar .n{font-family:var(--mono);color:var(--green-b)}
.bulkbar .spacer{flex:1}
.tblfoot{display:flex;align-items:center;gap:8px;padding:12px 2px;font-size:var(--fs-md);color:var(--dim)}
.tblfoot .spacer{flex:1}
.tblfoot button{background:none;border:1px solid var(--line-s);border-radius:var(--radius);color:var(--muted);font-family:var(--mono);font-size:var(--fs-xs-5);padding:5px 10px;cursor:pointer}
.tblfoot button:hover{border-color:var(--dim);color:var(--fg)}
.tblfoot button.on{border-color:var(--green);color:var(--green-b)}
.tblfoot button:disabled{opacity:.4;cursor:default}

/* ---- alerts: four intents ---- */
.note.info{background:var(--surface-2);border-color:var(--line-s)}
.note.info b{color:var(--fg)}
.note.warn{background:rgba(199,154,78,.07);border-color:rgba(199,154,78,.3)}
.note.warn b{color:var(--warn)}
.note.bad{background:rgba(185,107,94,.07);border-color:rgba(185,107,94,.3)}
.note.bad b{color:var(--bad)}
.note .dismiss{float:right;background:none;border:0;color:var(--dim);cursor:pointer;font-size:var(--fs-lg);line-height:var(--lh-none);padding:0;margin-left:12px;min-width:24px;min-height:24px;display:inline-flex;align-items:center;justify-content:center}
.note .dismiss:hover{color:var(--fg)}

/* ---- pills: neutral + processing ---- */
.pill.neutral{color:var(--muted)}
.pill.proc .dot{background:var(--green);animation:k-pulse 1.4s var(--ease) infinite}
.pill.proc{color:var(--green-b);border-color:rgba(60,180,75,.3)}

/* ---- modal / dialog ---- */
.ent-scrim{position:fixed;inset:0;background:rgba(17,21,24,.72);z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:20px}
.dialog{width:min(520px,94vw);max-height:88vh;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line-s);border-radius:var(--radius);animation:ent-pop var(--t-base) var(--ease)}
@keyframes ent-pop{from{opacity:0;transform:translateY(6px) scale(.99)}to{opacity:1;transform:none}}
.dialog header{display:flex;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.dialog header h3{font-family:var(--serif);font-weight:var(--fw-medium);font-size:var(--fs-title);flex:1}
.dialog header .x{background:none;border:0;color:var(--dim);font-size:var(--fs-2xl);cursor:pointer;padding:4px;min-width:28px;min-height:28px;display:inline-flex;align-items:center;justify-content:center}
.dialog header .x:hover{color:var(--fg)}
.dialog .body{padding:20px;font-size:var(--fs-base-5);color:var(--muted);overflow:auto;overscroll-behavior:contain}
.dialog footer{display:flex;gap:10px;justify-content:flex-end;padding:14px 20px;border-top:1px solid var(--line)}
.dialog.destructive header h3{color:var(--bad)}

/* ---- toasts (stacked, top right) ---- */
.toasts{position:fixed;top:18px;right:18px;display:flex;flex-direction:column;gap:8px;z-index:var(--z-toast);width:min(340px,92vw)}
.toast{background:var(--surface);border:1px solid var(--line-s);border-left:2px solid var(--green);border-radius:var(--radius);padding:12px 14px;font-size:var(--fs-md-5);color:var(--muted);animation:ent-pop var(--t-base) var(--ease)}
.toast b{color:var(--fg);font-weight:var(--fw-medium);display:block;margin-bottom:2px}
.toast b:before{content:"\2713\00a0\00a0";color:var(--green-b);font-weight:var(--fw-semi)}
.toast.warn{border-left-color:var(--warn)}
.toast.warn b:before{content:"\26A0\00a0\00a0";color:var(--warn)}
.toast.bad{border-left-color:var(--bad)}
.toast.bad b:before{content:"\2715\00a0\00a0";color:var(--bad)}

/* ---- description list ---- */
.dl{display:grid;grid-template-columns:180px 1fr;font-size:var(--fs-base);max-width:720px}
.dl dt{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--dim);padding:11px 0;border-bottom:1px solid var(--line)}
.dl dd{color:var(--muted);padding:11px 0;border-bottom:1px solid var(--line)}
.dl dd b{color:var(--fg);font-weight:var(--fw-medium)}

/* ---- progress bar ---- */
.bar{height:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:99px;overflow:hidden;max-width:420px}
.bar i{display:block;height:100%;background:var(--green);transition:width var(--t-slow) var(--ease)}
.bar.warn i{background:var(--warn)}
.bar-cap{font-family:var(--mono);font-size:var(--fs-xs);color:var(--dim);margin-top:6px;letter-spacing:var(--ls-btn)}

/* ---- view states: empty / error / forbidden ---- */
.ent-state{padding:64px 20px;text-align:center;border:1px dashed var(--line);border-radius:var(--radius);max-width:760px}
.ent-state .glyph{font-family:var(--serif);font-size:var(--fs-h2);color:var(--dim);display:inline-flex;width:44px;height:44px;border:1px solid var(--line-s);border-radius:50%;align-items:center;justify-content:center;margin-bottom:14px}
.ent-state h4{font-family:var(--serif);font-weight:var(--fw-medium);font-size:var(--fs-title);color:var(--fg);margin-bottom:6px;letter-spacing:var(--ls-tight);text-transform:none}
.ent-state p{font-size:var(--fs-md-5);color:var(--dim);margin:0 auto 16px;max-width:380px}
.ent-state.err .glyph{color:var(--bad);border-color:rgba(185,107,94,.4)}

/* ---- skeleton panel ---- */
.skelrow{display:flex;gap:12px;align-items:center;padding:10px 0}
.skelrow .skel{height:12px}

/* ---- print ---- */
@media print{.shell aside,.toasts,.formfoot,.bulkbar{display:none}.shell{display:block}body{background:#FFF;color:#16191C}}

/* ============================================================
   v2 PANEL AUDIT ADDENDUM · edge cases
   ============================================================ */

/* wide tables degrade by scrolling, never by breaking layout */
/* tblwrap: consumers MUST add tabindex="0" role="region" aria-label="[name]" for keyboard scroll (WCAG 2.1.1) */
.tblwrap{overflow-x:auto;overscroll-behavior-x:contain}
.tblwrap:focus-visible{outline:1px solid var(--green);outline-offset:2px;border-radius:var(--radius)}
.tblwrap table.ent{min-width:640px}

/* long unbroken strings (hashes, addresses) never blow a panel */
.panel p,.dl dd,.toast,table.ent td{overflow-wrap:break-word}
table.ent td.hash{font-family:var(--mono);font-size:var(--fs-sm);word-break:break-all}

/* progress: indeterminate (working, no known total) */
.bar.indet i{width:38%;animation:ent-indet 1.2s var(--ease) infinite}
@keyframes ent-indet{0%{margin-left:-38%}100%{margin-left:100%}}

/* browser autofill keeps the register (no yellow flash) */
.field input:-webkit-autofill{-webkit-box-shadow:0 0 0 60px #12171C inset;-webkit-text-fill-color:var(--fg)}

/* forced colors: state must survive high-contrast mode */
@media(forced-colors:active){
  .shell nav button.on,.shell nav a.on{border:1px solid Highlight}
  .pill .dot{forced-color-adjust:none}
  .bar i{background:Highlight}
}

/* ============================================================
   v2.2.0 · SKIP NAVIGATION (docs lane, SKIP.md)
   ============================================================ */
.skip{position:absolute;top:-100%;left:var(--s4);z-index:calc(var(--z-toast) + 1);background:var(--surface);color:var(--green-b);font-family:var(--mono);font-size:var(--fs-sm);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:var(--s3) var(--s4);border:1px solid var(--green);border-radius:var(--radius)}
.skip:focus-visible{top:var(--s4);outline:1px solid var(--green);outline-offset:3px}

/* ============================================================
   KINETIC UI KIT · interactive-a · v2.2.0
   Dropdown menu, overflow menu, popover, accordion,
   copy-to-clipboard. ENTERPRISE register extension.
   Requires kernel.css + enterprise.css.
   ============================================================ */

/* ---- DROPDOWN MENU (.menu) ----
   Positioned panel below a trigger.
   Structure: .menuwrap > button[aria-expanded] + .menu
   Open: [data-open] or .open on .menuwrap.
   ------------------------------------------------ */
.menuwrap{position:relative;display:inline-block}
.menuwrap .menu{
  display:none;
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  z-index:var(--z-nav);
  min-width:180px;
  max-width:280px;
  background:var(--surface);
  border:1px solid var(--line-s);
  border-radius:8px;
  padding:4px 0;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  font-size:13px;
}
.menuwrap[data-open] .menu,
.menuwrap.open .menu{display:block;animation:ent-pop var(--t-base) var(--ease)}

/* menu items */
.menu-item{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  background:none;
  border:0;
  text-align:left;
  color:var(--muted);
  font-family:var(--sans);
  font-size:13px;
  padding:9px 14px;
  cursor:pointer;
  transition:background var(--t-fast),color var(--t-fast);
  min-height:36px;
  line-height:1.4;
}
.menu-item:hover{background:var(--surface-2);color:var(--fg)}
.menu-item:focus-visible{background:var(--surface-2);color:var(--fg);outline:1px solid var(--green);outline-offset:-1px;border-radius:4px}
.menu-item:active{background:var(--line)}

/* destructive item */
.menu-item.danger{color:var(--bad)}
.menu-item.danger:hover{background:rgba(185,107,94,.08);color:var(--bad)}
.menu-item.danger:focus-visible{background:rgba(185,107,94,.08);color:var(--bad)}

/* disabled item */
.menu-item:disabled,
.menu-item[aria-disabled="true"]{
  color:var(--faint);
  cursor:not-allowed;
}
.menu-item:disabled:hover,
.menu-item[aria-disabled="true"]:hover{
  background:none;
  color:var(--faint);
}

/* menu separator */
.menu-sep{
  height:0;
  border:0;
  border-top:1px solid var(--line);
  margin:4px 0;
}

/* menu alignment: right-anchored variant */
.menuwrap.right .menu{left:auto;right:0}

/* ---- OVERFLOW / KEBAB TRIGGER ----
   Icon-only 28px button for context menus.
   ------------------------------------------------ */
.btn.kebab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  min-width:28px;
  min-height:28px;
  padding:0;
  background:none;
  border:1px solid transparent;
  border-radius:var(--radius);
  color:var(--dim);
  cursor:pointer;
  font-size:16px;
  line-height:1;
  transition:border-color var(--t-fast),background var(--t-fast),color var(--t-fast);
}
.btn.kebab:hover{
  background:var(--surface-2);
  border-color:var(--line);
  color:var(--fg);
}
.btn.kebab:active{transform:translateY(1px)}
.btn.kebab:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.kebab:disabled:hover{background:none;border-color:transparent}
.btn.kebab[aria-expanded="true"]{
  background:var(--surface-2);
  border-color:var(--line-s);
  color:var(--fg);
}

/* ---- POPOVER (.pop) ----
   Anchored informational panel, no arrow, clean edge.
   Structure: .popwrap > button[aria-expanded] + .pop
   Open: [data-open] or .open on .popwrap.
   ------------------------------------------------ */
.popwrap{position:relative;display:inline-block}
.popwrap .pop{
  display:none;
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  z-index:var(--z-nav);
  min-width:220px;
  max-width:340px;
  background:var(--surface);
  border:1px solid var(--line-s);
  border-radius:8px;
  padding:14px 16px;
  box-shadow:0 6px 20px rgba(0,0,0,.35);
}
.popwrap[data-open] .pop,
.popwrap.open .pop{display:block;animation:ent-pop var(--t-base) var(--ease)}

/* popover title */
.pop-title{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--dim);
  margin-bottom:8px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* popover body */
.pop-body{
  font-size:13px;
  color:var(--muted);
  line-height:1.55;
}
.pop-body b{color:var(--fg);font-weight:500}

/* popover dismiss */
.pop-x{
  background:none;
  border:0;
  color:var(--dim);
  cursor:pointer;
  font-size:13px;
  line-height:1;
  min-width:24px;
  min-height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:3px;
  padding:0;
  transition:color var(--t-fast);
}
.pop-x:hover{color:var(--fg)}

/* popover alignment variants */
.popwrap.right .pop{left:auto;right:0}
.popwrap.above .pop{top:auto;bottom:calc(100% + 6px)}

/* ---- ACCORDION (.acc) ----
   Native <details>/<summary>, styled.
   Structure: .acc > details.acc-item > summary + content
   Bordered group, chevron rotation, disabled.
   ------------------------------------------------ */
.acc{
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
}
.acc .acc-item{
  border-bottom:1px solid var(--line);
}
.acc .acc-item:last-child{border-bottom:0}

.acc-item summary{
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 16px;
  font-family:var(--sans);
  font-size:13.5px;
  color:var(--fg);
  cursor:pointer;
  user-select:none;
  list-style:none;
  background:var(--surface);
  transition:background var(--t-fast);
  min-height:44px;
}
.acc-item summary::-webkit-details-marker{display:none}

/* chevron (right side, rotates on open) */
.acc-item summary::after{
  content:"";
  margin-left:auto;
  flex-shrink:0;
  width:16px;
  height:16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%235E666D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  transition:transform var(--t-base) var(--ease);
}
.acc-item[open] summary::after{transform:rotate(180deg)}

/* summary states */
.acc-item summary:hover{background:var(--surface-2)}
.acc-item summary:focus-visible{
  outline:1px solid var(--green);
  outline-offset:-1px;
  border-radius:0;
}
.acc-item summary:active{background:var(--line)}

/* summary label styling */
.acc-item summary .lbl{display:inline;margin:0;padding:0}

/* accordion content */
.acc-item .acc-body{
  padding:2px 16px 16px;
  font-size:13px;
  color:var(--muted);
  line-height:1.6;
  background:var(--surface);
}
.acc-item .acc-body b{color:var(--fg);font-weight:500}

/* disabled accordion item */
.acc-item.disabled summary{
  color:var(--faint);
  cursor:not-allowed;
  pointer-events:none;
}
.acc-item.disabled summary::after{
  opacity:.35;
}

/* ---- COPY-TO-CLIPBOARD (.copyable) ----
   Mono value + copy affordance.
   Hover reveals button, copied state swaps text.
   Structure: .copyable > .copyable-val + button.copyable-btn
   ------------------------------------------------ */
.copyable{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--mono);
  font-size:11.5px;
  color:var(--muted);
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:6px 10px;
  max-width:100%;
  position:relative;
  transition:border-color var(--t-fast);
}
.copyable:hover{border-color:var(--line-s)}

.copyable-val{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  word-break:break-all;
  min-width:0;
}

.copyable-btn{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  min-width:24px;
  min-height:24px;
  background:none;
  border:1px solid transparent;
  border-radius:4px;
  color:var(--dim);
  cursor:pointer;
  padding:0;
  opacity:0;
  transition:opacity var(--t-fast),border-color var(--t-fast),color var(--t-fast),background var(--t-fast);
  font-size:13px;
  line-height:1;
}

/* show on hover or focus-within */
.copyable:hover .copyable-btn,
.copyable:focus-within .copyable-btn,
.copyable-btn:focus-visible{
  opacity:1;
}

.copyable-btn:hover{
  background:var(--surface);
  border-color:var(--line);
  color:var(--fg);
}
.copyable-btn:active{transform:translateY(1px)}

/* copied confirmation: text swap, icon + label */
.copyable-btn .copy-label{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase}
.copyable-btn[data-copied] .copy-icon{display:none}
.copyable-btn[data-copied] .copy-label{display:inline}
.copyable-btn:not([data-copied]) .copy-label{display:none}
.copyable-btn:not([data-copied]) .copy-icon{display:inline}

/* copied state: success green text feedback (not color-only: text changes too) */
.copyable-btn[data-copied]{
  opacity:1;
  color:var(--green-b);
}

/* keyboard: ensure always reachable */
.copyable-btn:focus-visible{
  opacity:1;
  outline:1px solid var(--green);
  outline-offset:1px;
  border-radius:4px;
}

/* ---- RESPONSIVE DEGRADE ---- */
@media(max-width:900px){
  .menuwrap .menu{min-width:160px}
  .popwrap .pop{min-width:180px;max-width:calc(100vw - 40px)}
  .acc-item summary{padding:11px 14px;font-size:13px}
  .copyable{font-size:11px}
}

/* ---- PRINT DEGRADE ---- */
@media print{
  .menuwrap .menu{display:none!important}
  .popwrap .pop{display:none!important}
  .btn.kebab{display:none!important}
  .copyable-btn{display:none!important}
  .copyable{border:0;background:none;padding:0}
  /* accordions: print all open */
  .acc-item .acc-body{display:block!important}
  .acc-item summary::after{display:none}
}

/* ---- FORCED COLORS ---- */
@media(forced-colors:active){
  .menu-item:focus-visible{outline:2px solid Highlight}
  .acc-item summary:focus-visible{outline:2px solid Highlight}
  .copyable-btn:focus-visible{outline:2px solid Highlight}
  .acc{border-color:CanvasText}
  .acc .acc-item{border-color:CanvasText}
  .copyable{border-color:CanvasText}
}

/* ============================================================
   KINETIC UI KIT · interactive-b · part.css
   Enterprise register v2.2.0 addendum.
   Requires kernel.css + enterprise.css loaded first.
   9 parts: combo, date/time, stepper, range, tagchip,
   search, avatar, badge, inline-edit.
   ============================================================ */

/* ============================================================
   1. COMBOBOX / TYPEAHEAD (.combo)
   ARIA 1.2 combobox: input[role=combobox] + listbox.
   JS convention: lanes/interactive-b/js/combo.js (<100 LOC).
   States: rest, hover, focus, disabled, loading, error, empty.
   ============================================================ */

.combo{position:relative;max-width:420px}
.combo input[role="combobox"]{
  width:100%;background:#12171C;border:1px solid var(--line-i);caret-color:var(--green-b);
  border-radius:var(--radius);color:var(--fg);font-family:var(--sans);font-size:13.5px;
  padding:11px 36px 11px 13px;outline:none;
  transition:border-color var(--t-fast) var(--ease)
}
.combo input[role="combobox"]:hover:not(:focus):not(:disabled){border-color:var(--line-s);filter:brightness(1.15)}
.combo input[role="combobox"]:focus{border-color:var(--green);outline:2px solid rgba(60,180,75,.25)}
.combo input[role="combobox"]:disabled{background:var(--surface);color:var(--faint);cursor:not-allowed;border-style:dashed}
.combo input[role="combobox"]:-webkit-autofill{-webkit-box-shadow:0 0 0 60px #12171C inset;-webkit-text-fill-color:var(--fg)}

/* spinner in trailing slot */
.combo .combo-trail{position:absolute;right:11px;top:50%;transform:translateY(-50%);pointer-events:none;display:flex;align-items:center}
.combo .combo-spin{width:14px;height:14px;border:1.5px solid var(--faint);border-top-color:var(--green-b);border-radius:50%;animation:ent-spin .7s linear infinite}

/* error state */
.combo.err input[role="combobox"]{border-color:var(--bad)}
.combo.err input[role="combobox"]:focus{border-color:var(--bad);outline-color:rgba(201,127,114,.3)}
.combo .combo-err{font-size:11px;color:var(--bad);margin-top:6px;line-height:1.5}

/* listbox (dropdown) */
.combo [role="listbox"]{
  display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:var(--z-nav);
  background:var(--surface);border:1px solid var(--line-s);border-radius:var(--radius);
  max-height:220px;overflow-y:auto;padding:4px;
  overscroll-behavior:contain
}
.combo.open [role="listbox"]{display:block}

.combo [role="option"]{
  padding:9px 12px;border-radius:4px;font-size:13px;color:var(--muted);cursor:pointer;
  transition:background var(--t-fast) var(--ease)
}
.combo [role="option"]:hover{background:var(--surface-2);color:var(--fg)}
.combo [role="option"][aria-selected="true"]{background:var(--green-dim);color:var(--green-b)}
.combo [role="option"] mark{background:none;color:var(--green-b);font-weight:600}

/* empty + loading states inside listbox */
.combo .combo-empty,.combo .combo-loading{
  padding:16px 12px;font-size:12px;color:var(--dim);text-align:center;
  font-family:var(--mono);letter-spacing:.08em
}
.combo .combo-loading:before{
  content:"";display:block;width:14px;height:14px;margin:0 auto 8px;
  border:1.5px solid var(--faint);border-top-color:var(--green-b);border-radius:50%;
  animation:ent-spin .7s linear infinite
}


/* ============================================================
   2. DATE INPUT (.field.date) + TIME INPUT (.field.time)
   Styled native <input type=date|time>.
   Date-range: two .field.date + .rangesep between them.
   States: rest, hover, focus, disabled, error, success.
   ============================================================ */

.field.date input[type="date"],
.field.time input[type="time"]{
  appearance:none;-webkit-appearance:none;
  width:100%;background:#12171C;border:1px solid var(--line-i);
  caret-color:var(--green-b);border-radius:var(--radius);
  color:var(--fg);font-family:var(--mono);font-size:12.5px;
  padding:11px 13px;outline:none;
  transition:border-color var(--t-fast) var(--ease);
  color-scheme:dark
}
.field.date input[type="date"]:hover:not(:focus):not(:disabled),
.field.time input[type="time"]:hover:not(:focus):not(:disabled){border-color:var(--line-s);filter:brightness(1.15)}
.field.date input[type="date"]:focus,
.field.time input[type="time"]:focus{border-color:var(--green);outline:2px solid rgba(60,180,75,.25)}
.field.date input[type="date"]:disabled,
.field.time input[type="time"]:disabled{background:var(--surface);color:var(--faint);cursor:not-allowed;border-style:dashed}

.field.date.err input[type="date"],
.field.time.err input[type="time"]{border-color:var(--bad)}
.field.date.err input[type="date"]:focus,
.field.time.err input[type="time"]:focus{border-color:var(--bad);outline-color:rgba(201,127,114,.3)}
.field.date.ok input[type="date"],
.field.time.ok input[type="time"]{border-color:var(--green)}

/* calendar / clock icon tint */
.field.date input[type="date"]::-webkit-calendar-picker-indicator,
.field.time input[type="time"]::-webkit-calendar-picker-indicator{
  filter:invert(.65);cursor:pointer;min-width:24px;min-height:24px;padding:2px
}

/* date-range convention: flex row with separator */
.daterange{display:flex;align-items:flex-end;gap:0;max-width:420px}
.daterange .field{margin-bottom:0;flex:1}
.daterange .rangesep{
  display:flex;align-items:center;justify-content:center;
  width:32px;height:44px;color:var(--dim);font-family:var(--mono);
  font-size:11px;flex-shrink:0;user-select:none;padding-bottom:1px
}


/* ============================================================
   3. NUMBER STEPPER (.stepper)
   Input with minus/plus buttons (24px+ targets).
   Disabled at bounds. Full state matrix.
   ============================================================ */

.stepper{display:inline-flex;align-items:stretch;max-width:180px}
.stepper button{
  display:flex;align-items:center;justify-content:center;
  width:36px;min-height:36px;background:var(--surface-2);
  border:1px solid var(--line-i);color:var(--muted);cursor:pointer;
  font-size:16px;font-family:var(--sans);font-weight:500;
  transition:all var(--t-fast) var(--ease);user-select:none;padding:0;
  line-height:1
}
.stepper button:first-child{border-radius:var(--radius) 0 0 var(--radius);border-right:0}
.stepper button:last-child{border-radius:0 var(--radius) var(--radius) 0;border-left:0}
.stepper button:hover:not(:disabled){background:var(--surface);border-color:var(--dim);color:var(--fg)}
.stepper button:active:not(:disabled){transform:translateY(1px)}
.stepper button:disabled{color:var(--faint);cursor:not-allowed;opacity:.45}

.stepper input{
  width:60px;text-align:center;background:#12171C;border:1px solid var(--line-i);
  color:var(--fg);font-family:var(--mono);font-size:13px;
  padding:9px 4px;outline:none;-moz-appearance:textfield;
  transition:border-color var(--t-fast) var(--ease)
}
.stepper input::-webkit-inner-spin-button,
.stepper input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.stepper input:focus{border-color:var(--green);outline:2px solid rgba(60,180,75,.25);z-index:1;position:relative}
.stepper input:disabled{background:var(--surface);color:var(--faint);cursor:not-allowed;border-style:dashed}

.stepper.disabled button,.stepper.disabled input{opacity:.45;cursor:not-allowed;pointer-events:none}


/* ============================================================
   4. SLIDER (.range)
   Styled native <input type=range>.
   Green filled track, focus ring, tick labels, disabled.
   ============================================================ */

.range{max-width:420px}

.range input[type="range"]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:6px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:99px;
  outline:none;cursor:pointer;
  /* filled-track trick: background-image sized by --val (set inline or by JS) */
  background-image:linear-gradient(var(--green), var(--green));
  background-size:var(--val, 50%) 100%;background-repeat:no-repeat
}
.range input[type="range"]:focus-visible{
  outline:2px solid rgba(60,180,75,.25);outline-offset:3px;border-radius:99px
}

/* thumb: webkit */
.range input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--green-b);border:2px solid var(--green);
  cursor:pointer;margin-top:0;
  transition:box-shadow var(--t-fast) var(--ease)
}
.range input[type="range"]:hover::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--green-dim)}
.range input[type="range"]:active::-webkit-slider-thumb{background:var(--green);box-shadow:0 0 0 6px var(--green-dim)}

/* thumb: moz */
.range input[type="range"]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;
  background:var(--green-b);border:2px solid var(--green);cursor:pointer;
  transition:box-shadow var(--t-fast) var(--ease)
}
.range input[type="range"]:hover::-moz-range-thumb{box-shadow:0 0 0 4px var(--green-dim)}
.range input[type="range"]:active::-moz-range-thumb{background:var(--green);box-shadow:0 0 0 6px var(--green-dim)}
.range input[type="range"]::-moz-range-track{background:transparent;border:0}
.range input[type="range"]::-moz-range-progress{background:var(--green);height:6px;border-radius:99px}

/* disabled */
.range input[type="range"]:disabled{opacity:.4;cursor:not-allowed}
.range input[type="range"]:disabled::-webkit-slider-thumb{cursor:not-allowed;box-shadow:none}
.range input[type="range"]:disabled::-moz-range-thumb{cursor:not-allowed;box-shadow:none}

/* value readout */
.range .range-val{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:6px}

/* tick labels convention */
.range-ticks{display:flex;justify-content:space-between;padding:0 1px;margin-top:4px}
.range-ticks span{font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:var(--faint)}


/* ============================================================
   5. TAG / REMOVABLE CHIP (.tagchip)
   Label + 24px remove target, disabled, overflow (+N more).
   ============================================================ */

.tagchip{
  display:inline-flex;align-items:center;gap:4px;
  background:var(--surface-2);border:1px solid var(--line-s);border-radius:99px;
  padding:4px 8px 4px 10px;font-family:var(--mono);font-size:10.5px;
  color:var(--muted);letter-spacing:.06em;user-select:none;
  transition:border-color var(--t-fast) var(--ease);max-width:200px
}
.tagchip:hover{border-color:var(--dim)}
.tagchip .tagchip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.tagchip .tagchip-x{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;min-width:16px;border-radius:50%;
  background:transparent;border:0;color:var(--dim);cursor:pointer;
  font-size:12px;line-height:1;padding:0;
  transition:all var(--t-fast) var(--ease)
}
/* 24px touch target via padding expansion */
.tagchip .tagchip-x:before{content:"";position:absolute;inset:-4px}
.tagchip .tagchip-x{position:relative}
.tagchip .tagchip-x:hover{background:var(--line);color:var(--fg)}
.tagchip .tagchip-x:focus-visible{outline:1px solid var(--green);outline-offset:1px}

/* disabled */
.tagchip.disabled{opacity:.45;pointer-events:none;border-style:dashed}

/* active / selected */
.tagchip.on{border-color:rgba(60,180,75,.4);color:var(--green-b);background:var(--green-dim)}

/* overflow: +N more */
.tagchip.more{color:var(--dim);border-style:dashed;cursor:pointer;padding:4px 10px}
.tagchip.more:hover{border-color:var(--dim);color:var(--muted)}

/* tag group */
.tagchip-group{display:flex;flex-wrap:wrap;gap:6px;align-items:center}


/* ============================================================
   6. ENTERPRISE SEARCH INPUT (.search)
   Leading glyph, clear button, results-count note.
   ============================================================ */

.search{position:relative;max-width:420px}
.search input{
  width:100%;background:#12171C;border:1px solid var(--line-i);
  caret-color:var(--green-b);border-radius:var(--radius);
  color:var(--fg);font-family:var(--sans);font-size:13.5px;
  padding:11px 36px 11px 36px;outline:none;
  transition:border-color var(--t-fast) var(--ease)
}
.search input:hover:not(:focus):not(:disabled){border-color:var(--line-s);filter:brightness(1.15)}
.search input:focus{border-color:var(--green);outline:2px solid rgba(60,180,75,.25)}
.search input:disabled{background:var(--surface);color:var(--faint);cursor:not-allowed;border-style:dashed}

/* leading glyph (magnifier via SVG data URI) */
.search .search-icon{
  position:absolute;left:11px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;pointer-events:none;color:var(--dim)
}
.search .search-icon svg{width:16px;height:16px;display:block}

/* clear button (trailing) */
.search .search-clear{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  display:none;align-items:center;justify-content:center;
  width:24px;height:24px;min-width:24px;min-height:24px;
  background:none;border:0;color:var(--dim);cursor:pointer;
  border-radius:50%;font-size:14px;padding:0;
  transition:all var(--t-fast) var(--ease)
}
.search .search-clear:hover{color:var(--fg);background:var(--surface-2)}
.search .search-clear:focus-visible{outline:1px solid var(--green);outline-offset:1px}
.search.has-value .search-clear{display:flex}

/* results count */
.search .search-count{
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  color:var(--dim);margin-top:6px
}
.search .search-count b{color:var(--fg);font-weight:500}

/* error state */
.search.err input{border-color:var(--bad)}
.search.err input:focus{border-color:var(--bad);outline-color:rgba(201,127,114,.3)}


/* ============================================================
   7. AVATAR / OPERATOR MARK (.avatar)
   Initials on surface-2. Sizes sm (24px) / md (32px).
   Stacked group. Presence dot (shape + color, never color alone).
   ============================================================ */

.avatar{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  background:var(--surface-2);border:1px solid var(--line-s);
  font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:.06em;color:var(--muted);
  user-select:none;position:relative;flex-shrink:0;
  text-transform:uppercase;line-height:1
}

/* sizes */
.avatar.sm{width:24px;height:24px;font-size:8px}
.avatar.lg{width:40px;height:40px;font-size:12px}

/* presence dot: shape + color (never color alone, WCAG 1.4.1) */
.avatar .presence{
  position:absolute;bottom:-1px;right:-1px;
  width:10px;height:10px;border-radius:50%;
  border:2px solid var(--bg);
  background:var(--dim)
}
.avatar.sm .presence{width:8px;height:8px;border-width:1.5px}

/* online: filled circle, green */
.avatar .presence.online{background:var(--green)}
/* busy: filled square (border-radius override), amber */
.avatar .presence.busy{background:var(--amber);border-radius:2px}
/* offline: ring only (hollow circle), dim */
.avatar .presence.offline{background:transparent;border:2px solid var(--dim)}

/* stacked group */
.avatar-group{display:inline-flex;align-items:center}
.avatar-group .avatar{margin-left:-8px;border:2px solid var(--bg)}
.avatar-group .avatar:first-child{margin-left:0}
.avatar-group .avatar.sm{margin-left:-6px}

/* group overflow count */
.avatar-group .avatar.more{
  background:var(--surface);border:1px dashed var(--line-s);
  color:var(--dim);font-size:9px;letter-spacing:.04em
}


/* ============================================================
   8. STANDALONE NOTIFICATION BADGE (.badge)
   Count, dot, max 99+.
   ============================================================ */

.badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:18px;height:18px;padding:0 5px;
  background:var(--bad);color:var(--fg);
  font-family:var(--mono);font-size:9.5px;font-weight:600;
  letter-spacing:.04em;border-radius:99px;
  line-height:1;user-select:none;vertical-align:middle
}

/* dot variant (no count, just presence) */
.badge.dot{
  min-width:8px;width:8px;height:8px;padding:0;
  background:var(--bad);border-radius:50%
}

/* signal variants */
.badge.green{background:var(--green);color:var(--bg)}
.badge.warn{background:var(--amber);color:var(--bg)}

/* muted badge */
.badge.muted{background:var(--surface-2);border:1px solid var(--line-s);color:var(--dim)}

/* relative positioning helper (parent must be position:relative) */
.badge-anchor{position:relative;display:inline-flex}
.badge-anchor>.badge{position:absolute;top:-6px;right:-8px;z-index:1}
.badge-anchor>.badge.dot{top:-2px;right:-2px}


/* ============================================================
   9. INLINE EDITABLE VALUE (.inline-edit)
   Read: quiet edit affordance (underline on hover).
   Editing: bordered input.
   Saving, saved (green check flash), error.
   ============================================================ */

.inline-edit{display:inline-flex;align-items:center;gap:6px;max-width:420px;position:relative}

/* read state: the value */
.inline-edit .ie-value{
  font-size:13.5px;color:var(--fg);cursor:pointer;
  padding:4px 6px;border-radius:var(--radius);border:1px solid transparent;
  transition:all var(--t-fast) var(--ease);
  min-height:32px;display:inline-flex;align-items:center
}
.inline-edit .ie-value:hover{border-color:var(--line);background:var(--surface-2)}

/* pencil affordance (quiet, visible on hover) */
.inline-edit .ie-pencil{
  display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;color:var(--faint);font-size:12px;
  opacity:0;transition:opacity var(--t-fast) var(--ease);pointer-events:none
}
.inline-edit:hover .ie-pencil,.inline-edit:focus-within .ie-pencil{opacity:1}

/* editing state */
.inline-edit .ie-input{
  display:none;width:100%;background:#12171C;border:1px solid var(--line-i);
  caret-color:var(--green-b);border-radius:var(--radius);
  color:var(--fg);font-family:var(--sans);font-size:13.5px;
  padding:6px 8px;outline:none;min-height:32px;
  transition:border-color var(--t-fast) var(--ease)
}
.inline-edit .ie-input:focus{border-color:var(--green);outline:2px solid rgba(60,180,75,.25)}

.inline-edit.editing .ie-value{display:none}
.inline-edit.editing .ie-pencil{display:none}
.inline-edit.editing .ie-input{display:block}

/* saving state: spinner beside the input */
.inline-edit.saving .ie-input{pointer-events:none;opacity:.6}
.inline-edit .ie-spin{
  display:none;width:14px;height:14px;
  border:1.5px solid var(--faint);border-top-color:var(--green-b);
  border-radius:50%;animation:ent-spin .7s linear infinite;flex-shrink:0
}
.inline-edit.saving .ie-spin{display:block}

/* saved flash */
.inline-edit .ie-ok{
  display:none;font-family:var(--mono);font-size:10px;color:var(--green-b);
  letter-spacing:.08em;flex-shrink:0
}
.inline-edit.saved .ie-ok{display:inline}

/* error state */
.inline-edit.ie-err .ie-input{border-color:var(--bad)}
.inline-edit.ie-err .ie-input:focus{border-color:var(--bad);outline-color:rgba(201,127,114,.3)}
.inline-edit .ie-errmsg{
  display:none;font-size:11px;color:var(--bad);
  position:absolute;top:100%;left:0;margin-top:4px;white-space:nowrap
}
.inline-edit.ie-err .ie-errmsg{display:block}


/* ============================================================
   SHARED: Mobile degrade
   ============================================================ */
@media(max-width:900px){
  .combo,.search,.daterange,.range{max-width:100%}
  .stepper{max-width:100%}
  .stepper input{flex:1}
  .daterange{flex-direction:column;gap:8px}
  .daterange .rangesep{width:auto;height:auto;padding:0}
}

/* ============================================================
   SHARED: Print degrade
   ============================================================ */
@media print{
  .combo [role="listbox"],.search .search-clear,.tagchip .tagchip-x,
  .stepper button,.inline-edit .ie-pencil{display:none}
  .avatar .presence{print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .badge{print-color-adjust:exact;-webkit-print-color-adjust:exact}
}

/* ============================================================
   SHARED: Forced colors
   ============================================================ */
@media(forced-colors:active){
  .combo [role="option"][aria-selected="true"]{border:1px solid Highlight}
  .avatar .presence{forced-color-adjust:none}
  .badge{forced-color-adjust:none}
  .range input[type="range"]::-webkit-slider-thumb{background:Highlight;border-color:Highlight}
  .range input[type="range"]::-moz-range-thumb{background:Highlight;border-color:Highlight}
  .tagchip.on{border:1px solid Highlight}
  .inline-edit .ie-value:hover{border:1px solid Highlight}
}

/* ============================================================
   KINETIC UI KIT · chart-tokens.css · v2.2.0 · TOKENS LANE
   Data visualization tokens for charts, sparklines, and heat
   cells. Requires kernel.css + enterprise.css.
   
   PROPOSED NEW HEX VALUES (this lane owns token creation):
   - Chart categorical palette: 4 new hexes
   - Heat cell scale: 2 new hexes
   Each with contrast math documented inline.
   ============================================================ */

:root {

  /* ── Categorical Palette (6-step) ──────────────────────────
     Signal green leads. Remaining 5 are desaturated institutional
     hues that pass 3:1 non-text contrast on #171D23 (--surface).
     Green first = the number that matters gets the house color.
     
     Contrast math (WCAG 1.4.11, 3:1 minimum on --surface #171D23):
     
     --chart-1: #5BD86B  = var(--green-b)  →  9.28:1  PASS
     --chart-2: #6BA8C7  (slate blue)      →  6.51:1  PASS
     --chart-3: #C9A44D  = var(--amber)    →  7.20:1  PASS
     --chart-4: #9B8EC4  (muted violet)    →  5.71:1  PASS
     --chart-5: #C4897A  (clay rose)       →  5.83:1  PASS
     --chart-6: #7DB8A3  (sage teal)       →  7.49:1  PASS
     
     All six also pass 3:1 on --bg #101418 (darker canvas).
     Hues chosen to remain distinguishable to deuteranopia/
     protanopia via brightness separation (no two adjacent
     colors within 1:1.2 luminance ratio). */

  --chart-1: var(--green-b);   /* #5BD86B, signal green first       */
  --chart-2: #6BA8C7;          /* slate blue, institutional          */
  --chart-3: var(--amber);     /* #C9A44D, amber from register       */
  --chart-4: #9B8EC4;          /* muted violet, desaturated          */
  --chart-5: #C4897A;          /* clay rose, warm institutional      */
  --chart-6: #7DB8A3;          /* sage teal, cool institutional      */

  /* Categorical palette at reduced opacity (fills, area charts) */
  --chart-1-fill: rgba(91,216,107,.15);
  --chart-2-fill: rgba(107,168,199,.15);
  --chart-3-fill: rgba(201,164,77,.15);
  --chart-4-fill: rgba(155,142,196,.15);
  --chart-5-fill: rgba(196,137,122,.15);
  --chart-6-fill: rgba(125,184,163,.15);

  /* ── Grid and Axis ─────────────────────────────────────────
     Axis lines are structural, not decorative. Grid lines are
     quiet enough to let data lead. Label uses mono voice. */

  --chart-axis:  var(--line-s);     /* #364049, axis lines            */
  --chart-grid:  var(--line);       /* #2A323B, grid lines (quiet)    */
  --chart-label: var(--dim);        /* #5E666D, axis label ink        */

  /* ── Heat Cell Scale (3-step) ──────────────────────────────
     Green-dim → green, for cell-level intensity encoding.
     Used as background-color on table cells or grid tiles.
     Text on heat cells uses --fg (#E9E7E2) or --dim (#5E666D).
     
     Contrast math (text readability on heat backgrounds):
     
     --heat-lo:  #1E3024  →  --fg on it:  14.2:1  PASS AA
     --heat-mid: #2A5038  →  --fg on it:   9.3:1  PASS AA
     --heat-hi:  var(--green) #3CB44B  →  #0A0A0A on it: 7.8:1  PASS AA
     
     Heat cells are background-only; they carry a text label or
     value for non-color identification (WCAG 1.4.1). */

  --heat-lo:  #1E3024;
  --heat-mid: #2A5038;
  --heat-hi:  var(--green);  /* #3CB44B */
}


/* ── Chart Axis / Grid / Label Classes ───────────────────── */

.chart-axis {
  stroke: var(--chart-axis);
  stroke-width: 1px;
  shape-rendering: crispEdges;
}

.chart-grid {
  stroke: var(--chart-grid);
  stroke-width: 1px;
  stroke-dasharray: 2 4;
  shape-rendering: crispEdges;
}

.chart-label {
  font-family: var(--mono);
  font-size: var(--fs-xs);    /* 10px */
  letter-spacing: var(--ls-wide);  /* .2em */
  text-transform: uppercase;
  fill: var(--chart-label);
  color: var(--chart-label);  /* for HTML labels outside SVG */
}


/* ── Sparkline (.spark) ──────────────────────────────────────
   Inline sparkline convention. Sized to sit inside a table cell
   or stat value. SVG-based, inherits chart-1 by default.
   
   Usage:
   <svg class="spark" viewBox="0 0 60 20" aria-label="Trend: up 12%">
     <polyline points="0,18 10,14 20,16 30,8 40,10 50,4 60,2"/>
   </svg>
   
   ARIA: always provide aria-label with trend direction and delta.
   The spark is decorative without its label (WCAG 1.1.1). */

.spark {
  display: inline-block;
  width: 60px;
  height: 20px;
  vertical-align: middle;
}

.spark polyline,
.spark path {
  fill: none;
  stroke: var(--chart-1);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Spark with fill area */
.spark .area {
  fill: var(--chart-1-fill);
  stroke: none;
}

/* Spark color variants (match categorical palette) */
.spark.s2 polyline, .spark.s2 path { stroke: var(--chart-2) }
.spark.s2 .area { fill: var(--chart-2-fill) }
.spark.s3 polyline, .spark.s3 path { stroke: var(--chart-3) }
.spark.s3 .area { fill: var(--chart-3-fill) }
.spark.s4 polyline, .spark.s4 path { stroke: var(--chart-4) }
.spark.s4 .area { fill: var(--chart-4-fill) }
.spark.s5 polyline, .spark.s5 path { stroke: var(--chart-5) }
.spark.s5 .area { fill: var(--chart-5-fill) }
.spark.s6 polyline, .spark.s6 path { stroke: var(--chart-6) }
.spark.s6 .area { fill: var(--chart-6-fill) }


/* ── Heat Cell (.heat) ───────────────────────────────────────
   3-step intensity scale for table cells or grid tiles.
   Applied as a class on <td> or <div>. Always pair with a
   text value or label for non-color identification.
   
   Usage:
   <td class="heat lo">12</td>
   <td class="heat mid">47</td>
   <td class="heat hi">94</td>                                */

.heat {
  text-align: center;
  font-family: var(--mono);
  font-size: var(--fs-sm-5);  /* 11.5px, tabular */
  font-variant-numeric: tabular-nums;
  padding: 6px 10px;
  border-radius: 3px;
  transition: background var(--t-fast) var(--ease);
}

.heat.lo {
  background: var(--heat-lo);
  color: var(--fg);
}

.heat.mid {
  background: var(--heat-mid);
  color: var(--fg);
}

.heat.hi {
  background: var(--heat-hi);
  color: #0A0A0A;
}

/* Heat cells in tables: remove border-radius for flush grid */
table .heat {
  border-radius: 0;
}


/* ── Print Degrade ───────────────────────────────────────── */

@media print {
  .spark polyline, .spark path { stroke: #555555 }
  .heat.lo  { background: #EEEEEE; color: #16191C }
  .heat.mid { background: #999999; color: #16191C }
  .heat.hi  { background: #555555; color: #FFFFFF }
  .chart-label { fill: #555555; color: #555555 }
}

/* ── Forced Colors ───────────────────────────────────────── */

@media (forced-colors: active) {
  .spark polyline, .spark path { stroke: CanvasText }
  .heat { forced-color-adjust: none }
  .chart-axis { stroke: CanvasText }
  .chart-grid { stroke: GrayText }
}

/* ── Reduced Motion ──────────────────────────────────────── */
/* kernel.css kills all animation globally; nothing to add.
   Heat transition inherits the global guard. */

/* ============================================================
   v2.3.0 · OPERATIONAL PARTS (ported from the LODESTAR console)
   Live counters, cycle control, step ledger, sequence playbook.
   ============================================================ */

/* ---- live counter band (.band variant: clickable, counted) ---- */
.band.live>button{background:var(--surface);border:none;text-align:left;padding:18px 20px;font:inherit;color:inherit;cursor:pointer;transition:background var(--t-fast)}
.band.live>button:hover{background:rgba(60,180,75,.05)}
.band.live>button:focus-visible{outline:2px solid rgba(60,180,75,.45);outline-offset:-2px}
.band .v{font-variant-numeric:tabular-nums}
.band .v.g{color:var(--green-b)}
.band .v.warn{color:var(--warn)}
.band .v.mute,.band .v.dim{color:var(--dim)}

/* ---- cycle control (click-to-cycle status pill) ---- */
button.cycle{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line-s);border-radius:99px;background:var(--surface-2);padding:5px 12px;font-family:var(--mono);font-size:var(--fs-xs);font-weight:var(--fw-semi);letter-spacing:var(--ls-pill);color:var(--muted);cursor:pointer;transition:border-color var(--t-fast),color var(--t-fast)}
button.cycle .dot{width:6px;height:6px;border-radius:50%;background:var(--dim)}
button.cycle:hover{border-color:var(--dim)}
button.cycle:focus-visible{outline:2px solid rgba(60,180,75,.25);outline-offset:2px}
button.cycle:disabled{opacity:.45;cursor:not-allowed}
button.cycle.ok{color:var(--green-b);border-color:rgba(60,180,75,.3)}button.cycle.ok .dot{background:var(--green)}
button.cycle.warn{color:var(--warn);border-color:rgba(199,154,78,.35)}button.cycle.warn .dot{background:var(--warn)}
button.cycle.bad{color:var(--bad);border-color:rgba(185,107,94,.35)}button.cycle.bad .dot{background:var(--bad)}

/* ---- step ledger (fixed-length live steps, paneled) ---- */
.steps-ledger{border:1px solid var(--line);border-radius:8px;background:var(--surface);overflow:hidden}
.steps-ledger .lg-r{display:grid;grid-template-columns:52px 110px 1fr;gap:0 20px;align-items:baseline;border-bottom:1px solid var(--line);padding:15px 20px}
.steps-ledger .lg-r:last-child{border-bottom:none}
.steps-ledger .lg-r.live{background:rgba(60,180,75,.05)}
.steps-ledger .no{font-family:var(--mono);font-size:var(--fs-sm);color:var(--faint)}
.steps-ledger .t{font-size:var(--fs-base-5);color:var(--fg)}
.steps-ledger .t small{display:block;font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:var(--ls-label);color:var(--dim);margin-top:4px;text-transform:uppercase}
.steps-ledger .lg-r.done .t{color:var(--dim);text-decoration:line-through;text-decoration-color:var(--faint)}

/* ---- sequence playbook (numbered rail, copyable touches) ---- */
.seq-panel{border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:20px 22px;margin-bottom:14px}
.seq-panel .n{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:var(--ls-wide);color:var(--green-b);text-transform:uppercase;margin-bottom:6px}
.seq-panel h3{font-size:var(--fs-md);font-weight:var(--fw-medium);color:var(--fg);margin:0 0 4px}
.seq-panel .touch{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:start;border-top:1px solid var(--line);padding:13px 0;margin-top:13px}
.seq-panel .touch p{margin:0;font-size:var(--fs-base);line-height:var(--lh-normal);color:var(--muted)}
.seq-panel .touch p b{color:var(--fg);font-weight:var(--fw-medium)}
.seq-panel .touch .mono{font-family:var(--mono);font-size:var(--fs-sm);color:var(--green-b)}

@media(max-width:900px){
  .steps-ledger .lg-r{grid-template-columns:36px 84px 1fr;gap:0 12px}
  .seq-panel .touch{grid-template-columns:1fr}
}
@media print{
  .band.live>button{background:none}
  button.cycle{border-color:GrayText}
}