/* Coriolis Hive styles (launch draft, 24 Oct 2026). Loaded after crisp.css on every Hive page.
   1. A prelude that gives the Hive's own parts back their shape where crisp's site-wide rules share a name
      (eyebrow, legend, stack, note, headings, paragraphs). :where() keeps it at zero specificity, so each
      zone page's own inline styles still win.
   2. The scene styles carried over from the zone scenes: canvas, HUD, Hive panel, stage bar, popover.
   3. The glass pass: Delta's Hive look A (frosted panels, a light lip, a deep soft shadow, the pointer sheen
      and a slight lean toward the pointer), the Hive bar, the lock card and the sourced or modelled tags.
   Lite (body.lite: reduced motion, ?lite, data saver or a weak device): no blur, no lean. */

/* ── 1. prelude ───────────────────────────────────────────────────────── */
:where(.glass-ui) p { max-width: none; }
:where(.glass-ui) .eyebrow { display: block; margin: 0; gap: normal; }
:where(.glass-ui) .legend { flex-wrap: nowrap; }
:where(.glass-ui) .stack > * + * { margin-top: 0; }
:where(.glass-ui) .note { max-width: none; }
:where(.glass-ui) h1, :where(.glass-ui) h2, :where(.glass-ui) h3, :where(.glass-ui) h4 { letter-spacing: -.005em; }

/* ── 2. scene ─────────────────────────────────────────────────────────── */
:root{
  --bg:#010308;--glass:rgba(8,12,20,.78);--glass-hi:rgba(14,20,32,.9);
  --line:rgba(255,255,255,.12);--line-hi:rgba(255,255,255,.24);
  --fg:#eef2f8;--muted:#a8b3c4;--dim:#7c8799;--faint:#5a6376;
  --cobalt:#2f7dff;--cobalt-hi:#8db8ff;--hold:#b49cff;--hold-hi:#dccfff;--ok:#10b981;
  --display:'Schibsted Grotesk',system-ui,sans-serif;--body:'IBM Plex Sans',system-ui,sans-serif;--mono:'IBM Plex Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden}
body{background:var(--bg);color:var(--fg);font:14px/1.5 var(--body);-webkit-font-smoothing:antialiased}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
.glass{background:var(--glass);border:1px solid var(--line);border-radius:14px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
button{font:inherit;color:inherit}
button:focus-visible,input:focus-visible{outline:2px solid var(--cobalt-hi);outline-offset:2px}

/* top bar */
.top{position:fixed;left:16px;right:16px;top:14px;display:flex;align-items:center;gap:14px;pointer-events:none;flex-wrap:wrap}
.top > *{pointer-events:auto}
.brand{font:700 13px/1 var(--display);letter-spacing:.2em;text-transform:uppercase;display:flex;align-items:center;gap:10px}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--cobalt);box-shadow:0 0 12px var(--cobalt)}
.crumb{color:var(--dim);font-size:13px;padding:7px 12px}
.crumb b{color:var(--fg);font-weight:500}
.sp{flex:1}
.mode{display:flex;padding:3px;border-radius:999px}
.mode button{background:none;border:0;color:var(--muted);font-size:12px;font-weight:500;padding:6px 12px;border-radius:999px;cursor:pointer}
.mode button[aria-pressed=true]{background:var(--fg);color:#000}

/* hud */
.hud{position:fixed;left:16px;top:66px;padding:14px 16px;display:grid;grid-template-columns:repeat(2,auto);gap:10px 26px;opacity:0;transition:opacity .8s}
.hud.on{opacity:1}
.stat .k{font:500 10px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.stat .v{font:650 24px/1.1 var(--display);font-variant-numeric:tabular-nums}
.stat .v small{font:400 12px var(--mono);color:var(--dim);margin-left:3px}
.stat.h .v{color:var(--hold)}
.scen{grid-column:1/-1;font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:8px;display:flex;justify-content:space-between;gap:10px;align-items:center}
.scen b{color:var(--fg);font-weight:500}
.scen button{background:none;border:1px solid var(--line-hi);border-radius:999px;padding:2px 10px;font-size:11px;cursor:pointer;color:var(--muted)}

/* hive panel */
.hive{position:fixed;right:16px;top:66px;bottom:96px;width:380px;display:flex;flex-direction:column;opacity:0;transform:translateX(20px);transition:opacity .8s,transform .8s}
.hive,.time,.hud{pointer-events:none}
.hive.on{opacity:1;transform:none;pointer-events:auto}
.time.on,.hud.on{pointer-events:auto}
.hive header{padding:14px 16px 10px;border-bottom:1px solid var(--line)}
.hive h2{margin:0;font:650 16px var(--display);display:flex;align-items:center;gap:8px}
.orb{width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#cfe0ff,var(--cobalt) 55%,#0b2a66);box-shadow:0 0 14px rgba(47,125,255,.8);animation:breathe 3.2s ease-in-out infinite}
.orb.think{animation:breathe .7s ease-in-out infinite}
@keyframes breathe{50%{box-shadow:0 0 26px rgba(47,125,255,1);transform:scale(1.12)}}
.hive header p{margin:4px 0 0;color:var(--dim);font-size:12px}
.log{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth}
.msg.me{align-self:flex-end;background:var(--cobalt);color:#fff;border-radius:12px 12px 2px 12px;padding:8px 12px;max-width:85%}
.msg.hv{display:flex;flex-direction:column;gap:8px}
.steps{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--dim)}
.step{display:flex;gap:8px;align-items:center;opacity:0;transform:translateY(4px);transition:all .3s}
.step.on{opacity:1;transform:none}
.step .ck{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--faint);flex:none;display:grid;place-items:center;font-size:9px}
.step.done .ck{border-color:var(--ok);color:var(--ok)}
.step.done .ck::after{content:'\2713'}
.step.run .ck{border-color:var(--cobalt);border-top-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.card{background:var(--glass-hi);border:1px solid var(--line);border-radius:12px;padding:12px;opacity:0;transform:translateY(6px);transition:all .4s}
.card.on{opacity:1;transform:none}
.card h3{margin:0 0 6px;font:650 15px/1.3 var(--display);text-wrap:balance}
.card p{margin:6px 0;color:var(--muted);font-size:13px}
.card .big{display:flex;gap:16px;margin:8px 0}
.card .big div{font:650 22px/1 var(--display);font-variant-numeric:tabular-nums}
.card .big small{display:block;font:500 10px var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-top:4px}
.cmp{display:flex;flex-direction:column;gap:7px;margin:10px 0 4px}
.cmp .r{display:grid;grid-template-columns:92px 1fr 64px;gap:8px;align-items:center;font-size:12px}
.cmp .r span:last-child{font:500 12px var(--mono);text-align:right;font-variant-numeric:tabular-nums}
.cmp .bars{display:flex;flex-direction:column;gap:2px}
.cmp .bars i{height:5px;border-radius:3px;display:block;transition:width .8s cubic-bezier(.2,.8,.2,1);width:0}
.cmp .bars i.a{background:rgba(141,184,255,.35)}
.cmp .bars i.b{background:var(--cobalt)}
.cmp .key{font-size:11px;color:var(--dim);display:flex;gap:12px}
.cmp .key i{display:inline-block;width:10px;height:5px;border-radius:2px;margin-right:5px;vertical-align:middle}
.assume{font-size:11px;color:var(--dim);border-top:1px solid var(--line);padding-top:6px;margin-top:8px}
.chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 10px}
.chip{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:999px;padding:6px 10px;font-size:12px;cursor:pointer;color:var(--muted);text-align:left}
.chip:hover{border-color:var(--cobalt);color:var(--fg)}
form{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}
form input{flex:1;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:10px;padding:10px 12px;color:var(--fg);font:inherit;min-width:0}
form button{background:var(--fg);color:#000;border:0;border-radius:10px;padding:0 14px;font-weight:600;cursor:pointer}
.lockcard{border:1px solid rgba(180,156,255,.4);background:rgba(180,156,255,.07);border-radius:12px;padding:12px;font-size:13px;color:var(--muted)}
.lockcard b{color:var(--fg);display:block;font:650 14px var(--display);margin-bottom:4px}
.lockcard button{margin-top:8px;background:var(--fg);color:#000;border:0;border-radius:999px;padding:7px 14px;font-weight:600;cursor:pointer}


/* tabs + negotiation */
.tabs{display:flex;gap:4px;margin-top:10px}
.tabs button{background:none;border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:5px 12px;font-size:12px;font-weight:500;cursor:pointer}
.tabs button[aria-selected=true]{background:var(--fg);color:#000;border-color:var(--fg)}
.pane{flex:1;min-height:0;display:flex;flex-direction:column}
.pane[hidden]{display:none}
.nlog{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.nhead{padding:10px 16px;border-bottom:1px solid var(--line);font-size:12px;color:var(--dim);display:flex;justify-content:space-between;gap:8px}
.nhead b{color:var(--fg);font-weight:500}
.ndiv{font:500 10px var(--body);letter-spacing:.16em;text-transform:uppercase;color:var(--cobalt-hi);display:flex;align-items:center;gap:8px}
.ndiv::after{content:'';flex:1;height:1px;background:var(--line)}
.nmsg{display:flex;flex-direction:column;gap:5px}
.nwho{display:flex;align-items:center;gap:7px;font-size:12px}
.nwho i{width:9px;height:9px;border-radius:50%;box-shadow:0 0 8px currentColor}
.nwho b{font:650 13px var(--display)}
.nwho span{color:var(--dim)}
.say{font-size:13px;color:var(--fg);line-height:1.5}
.typing{display:inline-flex;gap:3px}
.typing i{width:5px;height:5px;border-radius:50%;background:var(--dim);animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{50%{opacity:.2}}
.abar{display:flex;height:7px;border-radius:4px;overflow:hidden;background:rgba(255,255,255,.06);margin-top:7px}
.abar i{display:block;height:100%}
.anum{display:flex;flex-wrap:wrap;gap:4px 10px;font:400 11px var(--mono);color:var(--muted);margin-top:4px;font-variant-numeric:tabular-nums}
.anum i{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:4px;vertical-align:middle}
.terms{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.terms span{font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:2px 6px}
.ref{font-size:11px;margin-top:5px;color:var(--dim)}
.ref.ok::before{content:'\2713  ';color:var(--ok)}
.ref.bad{color:var(--hold)}
.acc{font-size:11px;color:var(--ok);margin-top:4px}
.nctl{border-top:1px solid var(--line);padding:10px 16px;display:flex;flex-direction:column;gap:8px}
.nctl form{padding:0;border:0}
.nrow{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:12px;color:var(--dim)}
.nbtn{background:var(--fg);color:#000;border:0;border-radius:999px;padding:8px 14px;font-weight:600;cursor:pointer}
.nbtn.ghost{background:none;color:var(--fg);border:1px solid var(--line-hi)}
.nstatus{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--dim)}
.deal h3{color:var(--fg)}
.dt{width:100%;border-collapse:collapse;font-size:12px;margin:8px 0}
.dt th{font:500 10px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--dim);text-align:right;padding:4px 0}
.dt th:first-child,.dt td:first-child{text-align:left}
.dt td{padding:4px 0;border-top:1px solid var(--line);text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.dt td:first-child{font-family:var(--body)}
.dt td:nth-child(2){color:var(--fg);font-weight:500}
.dt i{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:6px}

.poshud{grid-column:1/-1;font-size:12px;color:var(--cobalt-hi);border-top:1px solid var(--line);padding-top:8px}
.poshud b{color:var(--fg);font-weight:600}
.pform{display:flex;flex-direction:column;gap:10px}
.pform label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--dim)}
.pform select,.pform input{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:10px;padding:9px 10px;color:var(--fg);font:inherit;font-size:14px}
.pform select option{background:#0b0f16}
.card.you{border-color:rgba(47,125,255,.55);background:rgba(47,125,255,.08)}
.linkbtn{background:none;border:0;color:var(--cobalt-hi);cursor:pointer;font-size:12px;padding:0}
.cmp em{color:var(--cobalt-hi);font-style:normal;font-size:11px}
.cmp .r{grid-template-columns:120px 1fr 56px}
.bell{display:inline-grid;place-items:center;min-width:16px;height:16px;border-radius:8px;background:var(--hold);color:#0a0820;font:600 10px var(--body);margin-left:4px;padding:0 4px}
.bell[hidden]{display:none}
.alert{border-top:1px solid var(--line);padding:8px 0;font-size:12px;color:var(--fg);display:flex;flex-direction:column;gap:3px}
.alert .ah{display:flex;gap:8px;align-items:center;color:var(--dim);font-size:11px}
.alert a{color:var(--cobalt-hi);font-size:11px}
.alert .fy{color:var(--cobalt-hi)}
.pill{border:1px solid var(--line-hi);border-radius:4px;padding:0 5px;text-transform:uppercase;font:500 9px var(--mono);letter-spacing:.06em;color:var(--muted)}
.alert.high .pill{border-color:rgba(180,156,255,.6);color:var(--hold)}
.pill.rev{background:var(--hold);color:#0a0820;border-color:var(--hold)}
/* timeline */
.time{position:fixed;left:16px;right:412px;bottom:16px;padding:12px 16px;display:flex;align-items:center;gap:14px;opacity:0;transition:opacity .8s}
.time.on{opacity:1}
.time button{background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:999px;width:36px;height:36px;cursor:pointer;flex:none;display:grid;place-items:center}
.track{flex:1;display:flex;flex-direction:column;gap:4px}
.track input{width:100%;accent-color:var(--cobalt)}
.ticks{display:flex;justify-content:space-between;font:400 10px var(--mono);color:var(--faint)}
.when{font:500 14px var(--mono);min-width:76px;text-align:right;font-variant-numeric:tabular-nums}
.legend{display:flex;gap:12px;font-size:11px;color:var(--dim);white-space:nowrap}
.legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle}

/* intro */
.intro{position:fixed;left:50%;bottom:12vh;transform:translateX(-50%);text-align:center;transition:opacity .6s;width:min(780px,92vw)}
.intro .eyebrow{font:500 11px var(--body);letter-spacing:.24em;text-transform:uppercase;color:var(--cobalt-hi)}
.intro h1{font:750 clamp(28px,4.2vw,46px)/1.04 var(--display);margin:10px 0;letter-spacing:-.01em;text-wrap:balance}
h1,h2,h3{text-wrap:balance}h1 .ln,h2 .ln,h3 .ln{display:block}h1 .ph,h2 .ph,h3 .ph{display:inline-block}
.intro p{color:var(--muted);margin:0 auto 18px;font-size:15px;max-width:560px}
.intro button{background:var(--fg);color:#000;border:0;border-radius:999px;padding:12px 22px;font-weight:600;font-size:15px;cursor:pointer;box-shadow:0 0 30px rgba(47,125,255,.45)}
.intro.off{opacity:0;pointer-events:none}

/* popover + tooltip */
.pop{position:fixed;width:300px;padding:14px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:5}
.pop.on{opacity:1;pointer-events:auto}
.pop h4{margin:0;font:650 16px var(--display)}
.pop .sub{color:var(--dim);font-size:12px}
.pop dl{display:grid;grid-template-columns:1fr auto;gap:4px 12px;margin:10px 0;font-size:13px}
.pop dt{color:var(--muted)}
.pop dd{margin:0;font:500 13px var(--mono);text-align:right;font-variant-numeric:tabular-nums}
.pop .src{font-size:11px;color:var(--dim)}
.pop .x{position:absolute;right:8px;top:6px;background:none;border:0;color:var(--dim);cursor:pointer;font-size:16px}
.locked .pop .src,.locked .pop .lockable{filter:blur(4px);user-select:none}
.tip{position:fixed;pointer-events:none;padding:8px 10px;font-size:12px;opacity:0;transition:opacity .12s;max-width:240px;z-index:6}
.tip b{display:block;font:600 13px var(--display)}
.note{position:fixed;left:16px;bottom:84px;font-size:11px;color:var(--faint);opacity:0;transition:opacity .8s;max-width:calc(100vw - 470px)}
.note.on{opacity:1}

@media (max-width:900px){
  .hive{left:8px;right:8px;width:auto;top:auto;bottom:8px;height:46vh}
  .time{left:8px;right:8px;bottom:calc(46vh + 16px);padding:8px 12px}
  .legend,.crumb,.note{display:none}
  .hud{left:8px;top:58px;padding:10px 12px;gap:6px 16px}
  .stat .v{font-size:18px}
  .top{left:8px;right:8px;flex-wrap:nowrap;top:8px}
  .brand{font-size:11px;padding:7px 10px!important}
  .mode button{padding:5px 8px;font-size:11px}
  .hive header p{display:none}
  .hud{top:52px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── 3. glass pass (Delta Hive look A) ────────────────────────────────── */
@property --lean { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
body.glass-ui { background: var(--bg); }
/* reading surfaces sit a little denser than the floating chrome so text stays crisp over a busy map */
.glass-ui .hive.glass, .glass-ui .pop.glass { --g-body: rgba(7, 10, 15, .74); }
.glass-ui .tip.glass { --g-body: rgba(7, 10, 15, .86); border-radius: 10px; }
.glass-ui .hud.glass, .glass-ui .time.glass { --g-body: rgba(8, 11, 16, .6); }
.glass-ui .card { background: rgba(255, 255, 255, .035); border-color: rgba(255, 255, 255, .1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.glass-ui .lite .card, .glass-ui.lite .card { background: rgba(14, 18, 26, .92); }

/* the lean: panels tilt a degree or two toward the pointer, then settle flat (desktop, fine pointer only) */
@media (min-width: 901px) and (pointer: fine) {
  body.glass-ui:not(.lite) { perspective: 1600px; }
  body.glass-ui:not(.lite) .lean { rotate: var(--lean-axis, 0 1 0) var(--lean); will-change: rotate; }
}

/* buttons get the glass lip */
.glass-ui .tabs button:not([aria-selected=true]), .glass-ui .chip, .glass-ui .time button, .glass-ui .nbtn.ghost {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
}
.glass-ui .chip { background: rgba(255, 255, 255, .045); }
.glass-ui .chip:hover { background: rgba(255, 255, 255, .08); }
.glass-ui form input, .glass-ui .pform select, .glass-ui .pform input { background: rgba(0, 0, 0, .28); }
.glass-ui form input:focus-visible { outline: 1px solid var(--cobalt-hi); outline-offset: 1px; }

/* ── the Hive bar ─────────────────────────────────────────────────────── */
.hbar { z-index: 8; }
.hbar .brand { padding: 9px 14px; min-height: 36px; color: var(--fg); text-decoration: none; }
.hbar .brand .core { width: 9px; height: 9px; }
.hbar .brand:hover .core { box-shadow: 0 0 0 1px rgba(255, 255, 255, .5) inset, 0 0 18px var(--accent), 0 0 40px color-mix(in srgb, var(--accent) 55%, transparent); }
.hbar .crumb a { color: inherit; text-decoration: none; }
details.zones { position: relative; }
details.zones > summary { list-style: none; cursor: pointer; padding: 8px 12px; min-height: 36px; display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 500; color: var(--muted); border-radius: 999px; }
details.zones > summary::-webkit-details-marker { display: none; }
details.zones > summary::after { content: ''; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: 45deg; translate: 0 -2px; transition: rotate .2s; }
details.zones[open] > summary::after { rotate: 225deg; translate: 0 2px; }
details.zones > summary:hover, details.zones[open] > summary { color: var(--fg); }
.zmenu { position: absolute; top: calc(100% + 8px); left: 0; width: 290px; padding: 6px; display: grid; gap: 2px; z-index: 9; }
.glass-ui .zmenu.glass { --g-body: rgba(7, 10, 15, .9); }
.zmenu a { display: grid; grid-template-columns: 10px 1fr; gap: 2px 10px; align-items: center; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--fg); font-size: 13px; }
.zmenu a i { width: 7px; height: 7px; border-radius: 50%; background: var(--hue, var(--accent)); box-shadow: 0 0 8px var(--hue, var(--accent)); }
.zmenu a small { grid-column: 2; font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.zmenu a:hover, .zmenu a:focus-visible { background: rgba(255, 255, 255, .06); }
.zmenu a[aria-current=page] { background: rgba(255, 255, 255, .08); }
.zmenu .all { grid-template-columns: 1fr; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; margin-top: 4px; color: var(--muted); font-size: 12px; }
.draftpill { font: 600 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #cfe0ff; background: rgba(11, 29, 74, .8); border: 1px solid rgba(47, 125, 255, .6); border-radius: 999px; padding: 6px 10px; }
.acct { display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; }
.acct a { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--muted); text-decoration: none; white-space: nowrap; }
.acct a:hover { color: var(--fg); }
.acct a#hbAcct { background: var(--fg); color: #000; font-weight: 600; }
.acct a#hbPlan.held { color: var(--cobalt-hi); cursor: default; }

/* ── intro fine print and the reading guide ───────────────────────────── */
.intro .fine { margin: 14px auto 0; font-size: 12px; color: var(--dim); max-width: 46ch; }
details.disc { margin-top: 10px; font-size: 12px; color: var(--dim); }
details.disc > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; color: var(--muted); min-height: 24px; }
details.disc > summary::-webkit-details-marker { display: none; }
details.disc > summary::before { content: 'i'; display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--line-hi); font: 500 9px var(--mono); }
details.disc > summary:hover { color: var(--fg); }
details.disc ul { margin: 8px 0 2px; padding: 0; list-style: none; display: grid; gap: 6px; }
details.disc li { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: baseline; line-height: 1.45; }
details.disc li .kind { margin: 0; }

/* sourced, modelled and target tags on the stage buttons */
.kind { display: inline-block; margin-left: 6px; padding: 1px 5px; border-radius: 4px; border: 1px solid currentColor;
  font: 500 9px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; font-style: normal; vertical-align: 1px; white-space: nowrap; }
.kind.k-sourced { color: var(--muted); border-color: var(--line-hi); }
.kind.k-modelled { color: var(--hold); }
.kind.k-target { color: var(--cobalt-hi); }
.stages button .kind { margin: 4px 0 0; display: table; }

/* ── lock card ────────────────────────────────────────────────────────── */
.glass-ui .lockcard { border-color: rgba(141, 184, 255, .35); background: linear-gradient(180deg, rgba(47, 125, 255, .1), rgba(47, 125, 255, .04)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
.glass-ui .lockcard b { color: var(--fg); }
.lockacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.lockacts a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; border-radius: 999px; background: var(--fg); color: #000; font-weight: 600; font-size: 13px; text-decoration: none; }
.lockacts a.ghost { background: none; color: var(--fg); border: 1px solid var(--line-hi); }
.lockacts a:hover { background: #fff; }
.lockacts a.ghost:hover { background: rgba(255, 255, 255, .06); }

/* ── toast ────────────────────────────────────────────────────────────── */
.hvtoast { position: fixed; left: 50%; top: 66px; translate: -50% -8px; max-width: min(440px, calc(100vw - 32px)); padding: 10px 14px; font-size: 13px; color: var(--fg);
  opacity: 0; pointer-events: none; transition: opacity .25s, translate .25s; z-index: 12; }
.hvtoast.on { opacity: 1; translate: -50% 0; }
.glass-ui .hvtoast.glass { --g-body: rgba(7, 10, 15, .9); }

.skip:focus { z-index: 20; }

@media (max-width: 900px) {
  .acct .home, .acct #hbPlan { display: none; }
  .zmenu { left: auto; right: 0; position: fixed; top: 52px; left: 8px; right: 8px; width: auto; }
  .stages button .kind { font-size: 0; width: 6px; height: 6px; padding: 0; border-radius: 50%; background: currentColor; border: 0; margin: 0; display: inline-block; vertical-align: 2px; margin-left: 5px; }
  .stages button b { display: inline; }
  .hbar .brand { padding: 7px 10px; }
  details.zones > summary { padding: 6px 10px; min-height: 32px; }
  .acct a { padding: 0 10px; }
  details.disc { display: none; }
}
@media (max-width: 480px) {
  .draftpill { display: none; }
}
body.lite .orb { animation: none; }