/* ============================================================
   Dungeon design system
   One stylesheet for every page. Load before any page CSS:
     <link rel="stylesheet" href="/dungeon.css"/>
   Page-specific rules go in a <style> block after this link.
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

:root{
  --bg:#050807;--surface:#0C120F;--raise:#141C19;
  --line:rgba(255,255,255,.07);--line2:rgba(255,255,255,.13);
  --accent:#34D399;--accent-hi:#4CE0A0;--accent-ink:#04150E;
  --text:#EAF1ED;--text2:#B9C8C2;--muted:#8A9A93;--faint:#6B7F77;
  --amber:#FBBF24;--red:#F87171;--blue:#60A5FA;--violet:#A78BFA;
  --sans:'Instrument Sans',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --pixel:'Press Start 2P',monospace;
  --wrap:560px;
}

html{background:var(--bg)}
body{background:var(--bg);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;line-height:1.5;min-height:100vh}
a{color:inherit;text-decoration:none}
a.link{color:var(--accent)}
a.link:hover{color:var(--accent-hi)}
img{max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Width. .wrap owns the INLINE axis only; block padding belongs to the
   element being padded, or the two shorthands fight and one silently wins. */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:22px;width:100%}
.wrap-md{--wrap:680px}
.wrap-lg{--wrap:860px}
.wrap-xl{--wrap:1100px}
.wrap-sm{--wrap:440px}

/* ── Top bar ─────────────────────────────────────────────── */
.topbar{border-bottom:1px solid var(--line)}
.topbar.sticky{position:sticky;top:0;z-index:40;background:rgba(5,8,7,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.topbar .row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:14px}
.brand{display:flex;align-items:center;gap:9px;flex:none}
.brand svg{width:15px;height:15px;fill:none;stroke:var(--accent);stroke-width:2;flex:none}
.brand span{font-family:var(--pixel);font-size:11px;font-weight:400;letter-spacing:.02em;line-height:1.4;white-space:nowrap}
.topnav{display:flex;align-items:center;gap:14px}
.topnav a,.topnav button{font-family:var(--sans);font-size:13.5px;font-weight:500;color:var(--muted);background:none;border:none;cursor:pointer;padding:4px 0;white-space:nowrap;transition:color .18s}
.topnav a:hover,.topnav button:hover{color:var(--text)}
.topnav a[aria-current]{color:var(--text)}
/* A nav link that carries a count. The badge is absolute, so the link
   has to establish the containing block itself - and reserve room, or
   the badge sits on the last letter of the word. */
.topnav .has-badge{position:relative;padding-right:15px}
.back{font-size:14px;font-weight:500;color:var(--muted);white-space:nowrap;transition:color .18s}
.back:hover{color:var(--text)}

.icon-btn{position:relative;display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;padding:0;border-radius:9px;border:1px solid transparent;background:transparent;-webkit-appearance:none;appearance:none;font:inherit;cursor:pointer;color:var(--muted);transition:color .18s,border-color .18s,background .18s}
.icon-btn:hover{color:var(--text);border-color:var(--line);background:var(--surface)}
.icon-btn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7}
.dot-badge{position:absolute;top:1px;right:1px;min-width:8px;height:8px;border-radius:9px;background:var(--accent);border:1.5px solid var(--bg);display:none}
.count-badge{position:absolute;top:-3px;right:-3px;min-width:16px;height:16px;padding:0 4px;border-radius:9px;background:var(--accent);color:var(--accent-ink);font-family:var(--mono);font-size:9.5px;font-weight:600;line-height:16px;text-align:center;border:1.5px solid var(--bg);display:none}

.avatar-btn{width:30px;height:30px;flex:none;padding:0;border-radius:50%;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;background:var(--raise);border:1px solid var(--line2);-webkit-appearance:none;appearance:none;font-family:inherit;font-size:11px;font-weight:600;color:var(--text);cursor:pointer;transition:border-color .18s}
.avatar-btn:hover{border-color:var(--accent)}
.avatar-btn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ── Page furniture ──────────────────────────────────────── */
.page{padding-block:28px 60px}
h1,.page-title{font-size:26px;font-weight:600;letter-spacing:-.024em;line-height:1.2;text-wrap:pretty}
h2{font-size:19px;font-weight:600;letter-spacing:-.016em;text-wrap:pretty}
.lede,.page-sub{font-size:14.5px;line-height:1.65;color:var(--muted);max-width:46ch;text-wrap:pretty}
.page-title+.page-sub{margin-top:8px}
.page-head{margin-bottom:26px}

.title-lg{font-size:clamp(28px,4.4vw,40px);line-height:1.08;font-weight:600;letter-spacing:-.03em;text-wrap:balance}
.title-lg+.page-sub,.title-lg+.lede{margin-top:12px;font-size:15.5px}

.label{display:block;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);padding-bottom:14px}
.label.tight{padding-bottom:6px}
.label-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.label-row a{font-family:var(--sans);font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted);transition:color .18s}
.label-row a:hover{color:var(--accent)}
.eyebrow{display:block;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.section-head{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin:32px 0 14px}
.section-head::after{content:'';order:1;flex:1;height:1px;background:var(--line)}
/* A link in a section head belongs on the far side of the rule, not
   crowded against the label. */
.section-head .section-more{order:2;font-family:var(--sans);font-size:12.5px;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--muted);transition:color .18s}
.section-head .section-more:hover{color:var(--accent)}
.rule{height:1px;background:var(--line);margin-block:20px}

/* Register rails: the guides a card gets printed against. Structure
   rather than atmosphere, and no accent colour, so it can never read as
   a wash sitting on top of the page. Anchored to the top of the host and
   faded at both ends, so it behaves the same whatever the host's height.
   Parent needs overflow-x:clip. */
.rails-host{position:relative;overflow-x:clip}
.rails{position:absolute;top:0;left:0;right:0;height:560px;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 92px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 52%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 52%,transparent 100%)}
.rails-host>.wrap,.rails-host>.inner{position:relative;z-index:1}

/* Bands: the horizontal rhythm of a long page. One hairline between
   sections, and on desktop the section label sits out in the margin so
   the content column stays a readable measure. */
.band{border-top:1px solid var(--line);padding-block:38px}
.band:first-child{border-top:none}
.band .label{padding-bottom:18px}

/* ── Long-form copy ──────────────────────────────────────── */
/* Legal pages, policies, anything that is mostly paragraphs. Sized for
   reading rather than scanning, so it runs looser than .lede. */
.prose{font-size:14.5px;line-height:1.8;color:var(--text2);max-width:68ch}
.prose>*+*{margin-top:14px}
.prose h2{font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--text);margin-top:34px}
.prose h3{font-size:14px;font-weight:600;color:var(--text);margin-top:22px}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose ul,.prose ol{padding-left:20px}
.prose li+li{margin-top:6px}
.prose a{color:var(--accent)}
.prose a:hover{color:var(--accent-hi)}
.prose strong,.prose b{color:var(--text);font-weight:600}
.prose code{font-family:var(--mono);font-size:.9em;color:var(--text);background:var(--raise);border-radius:5px;padding:2px 5px}
.prose hr{border:0;height:1px;background:var(--line);margin-block:28px}

/* ── Disclosure list ─────────────────────────────────────── */
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-block:16px;cursor:pointer;font-size:14.5px;font-weight:500;color:var(--text2);transition:color .18s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--text)}
.faq details:first-child summary{padding-top:0}
.faq summary .pm{font-family:var(--mono);font-size:14px;color:var(--faint);flex:none}
.faq summary .pm::before{content:'+'}
.faq details[open] summary{color:var(--text);font-weight:600;padding-bottom:7px}
.faq details[open] .pm{color:var(--accent)}
.faq details[open] .pm::before{content:'\2212'}
.faq p{font-size:13.5px;line-height:1.65;color:var(--muted);max-width:54ch;padding-bottom:18px}

/* ── Cards ───────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px}
.card+.card{margin-top:12px}
.card-sm{border-radius:14px;padding:16px}
.card-accent{border-color:rgba(52,211,153,.22)}
.card-title{display:flex;align-items:center;justify-content:space-between;gap:12px;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--faint);margin-bottom:16px}
/* .cards owns the spacing, so the .card+.card margin must not stack on
   top of the gap. */
.cards{display:flex;flex-direction:column;gap:10px}
.cards>.card+.card{margin-top:0}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:10px}

/* ── Buttons ─────────────────────────────────────────────── */
.btn{display:inline-block;text-align:center;font-family:var(--sans);font-size:14px;font-weight:600;padding:13px 20px;border-radius:10px;border:1px solid transparent;cursor:pointer;transition:transform .14s,background .18s,border-color .18s,color .18s;white-space:nowrap}
.btn:hover:not(:disabled){transform:translateY(-1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover:not(:disabled){background:var(--accent-hi)}
.btn-ghost{background:transparent;border-color:var(--line2);color:var(--text2);font-weight:500}
.btn-ghost:hover:not(:disabled){border-color:rgba(255,255,255,.24);color:var(--text)}
.btn-danger{background:transparent;border-color:rgba(248,113,113,.4);color:var(--red);font-weight:500}
.btn-danger:hover:not(:disabled){background:rgba(248,113,113,.08);border-color:var(--red)}
.btn-wide{display:block;width:100%}
.btn-sm{font-size:13px;padding:10px 16px;border-radius:9px}
.btn-row{display:flex;gap:10px;margin-top:26px}
.btn-row .btn{flex:1}
.btn-skip{display:block;width:100%;background:none;border:none;color:var(--muted);font-family:var(--sans);font-size:13.5px;padding:14px;margin-top:6px;cursor:pointer;transition:color .18s}
.btn-skip:hover{color:var(--text)}

/* ── Forms ───────────────────────────────────────────────── */
.field{margin-bottom:15px}
.field:last-child{margin-bottom:0}
.field label,.flabel{display:block;font-size:12.5px;font-weight:500;color:var(--text2);margin-bottom:7px}
.field label .opt,.flabel .opt{color:var(--faint);font-weight:400}
.field input,.field textarea,.field select,.input{width:100%;background:var(--raise);border:1px solid var(--line2);border-radius:10px;color:var(--text);font-family:var(--sans);font-size:15px;padding:12px 13px;outline:none;transition:border-color .18s,box-shadow .18s}
.field textarea{line-height:1.55;resize:vertical;min-height:88px}
.field input:focus,.field textarea:focus,.field select:focus,.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(52,211,153,.12)}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.field input:disabled{opacity:.55;cursor:not-allowed}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hint{font-family:var(--mono);font-size:11px;line-height:1.45;color:var(--faint);margin-top:6px}
.hint.ok{color:var(--accent)}
.hint.bad{color:var(--red)}
.check{display:flex;align-items:flex-start;gap:11px}
.check input{width:17px;height:17px;margin-top:2px;accent-color:var(--accent);cursor:pointer;flex:none}
.check label{font-size:13px;line-height:1.6;color:var(--muted);cursor:pointer}
.check label a{color:var(--accent)}

/* Mono field for keys, URLs, credentials */
.code-row{display:flex;gap:8px}
.code-row input,.code-field{flex:1;min-width:0;background:var(--raise);border:1px solid var(--line2);border-radius:9px;color:var(--text);font-family:var(--mono);font-size:12.5px;padding:11px 12px;outline:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.code-row input:focus{border-color:var(--accent)}
.copy-btn{font-family:var(--sans);font-size:12.5px;font-weight:600;padding:0 15px;background:var(--surface);border:1px solid var(--line2);border-radius:9px;color:var(--text2);cursor:pointer;white-space:nowrap;flex:none;transition:border-color .15s,color .15s}
.copy-btn:hover{color:var(--accent);border-color:rgba(52,211,153,.45)}

/* A labelled credential: name, value, and the buttons that act on it. */
.cred-row{display:flex;align-items:center;gap:10px}
.cred-row+.cred-row{margin-top:10px}
.cred-row .k{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);width:78px;flex:none}
.cred-row .code-field{display:block}
/* On a phone a 78px label column plus two buttons leaves the value
   itself down to a few characters - "https://du…" is not a credential.
   The label takes its own line so the value gets the width. */
@media(max-width:560px){
  .cred-row{flex-wrap:wrap;gap:7px 8px}
  .cred-row .k{flex:1 0 100%;width:auto}
  .cred-row .code-field{flex:1 1 120px;min-width:0}
}

/* ── Chips ───────────────────────────────────────────────── */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-family:var(--sans);font-size:13px;font-weight:500;padding:9px 14px;border-radius:9px;border:1px solid var(--line2);color:var(--text2);cursor:pointer;background:var(--surface);transition:border-color .15s,color .15s,background .15s;user-select:none}
.chip:hover{border-color:rgba(255,255,255,.24);color:var(--text)}
.chip.on{background:rgba(52,211,153,.1);border-color:rgba(52,211,153,.45);color:var(--accent)}
.chip-static{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:8px;padding:8px 11px;font-size:12.5px;color:var(--text2);cursor:default}
.chip-static i{display:block;width:5px;height:5px;border-radius:50%;background:var(--accent);font-style:normal}
.chip-static.off{color:var(--muted)}
.chip-static.off i{background:#3F4E48}

/* ── Status pills ────────────────────────────────────────── */
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:20px;padding:3px 10px;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.06em;white-space:nowrap}
.pill i{display:block;width:5px;height:5px;border-radius:50%;background:currentColor;font-style:normal}
.pill-ok{background:rgba(52,211,153,.1);border:1px solid rgba(52,211,153,.28);color:var(--accent)}
.pill-warn{background:rgba(251,191,36,.1);border:1px solid rgba(251,191,36,.3);color:var(--amber)}
.pill-bad{background:rgba(248,113,113,.08);border:1px solid rgba(248,113,113,.28);color:var(--red)}
.pill-info{background:rgba(96,165,250,.09);border:1px solid rgba(96,165,250,.28);color:var(--blue)}
.pill-mute{background:rgba(255,255,255,.05);border:1px solid var(--line2);color:var(--muted)}

/* ── Numbered steps ──────────────────────────────────────── */
.steps{display:flex;flex-direction:column}
.step-item{display:flex;gap:16px;align-items:flex-start;padding-block:17px;border-bottom:1px solid var(--line)}
.step-item:first-child{padding-top:0}
.step-item:last-child{border-bottom:none}
.step-n{font-family:var(--mono);font-size:12px;color:var(--accent);padding-top:2px;flex:none}
.step-circle{width:26px;height:26px;border-radius:50%;border:1px solid rgba(52,211,153,.35);color:var(--accent);font-family:var(--mono);font-size:11px;display:flex;align-items:center;justify-content:center;flex:none;margin-top:1px}
.step-item h3{font-size:15px;font-weight:600;margin-bottom:3px}
.step-item p{font-size:13.5px;line-height:1.6;color:var(--muted);text-wrap:pretty}

/* ── Notices & banners ───────────────────────────────────── */
.note{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:15px 16px}
.note b,.note strong{color:var(--text2);font-weight:600}
.note p{font-size:13px;line-height:1.7;color:var(--muted);text-wrap:pretty}
.note ol,.note ul{margin-top:9px;padding-left:18px;line-height:1.9;font-size:13px;color:var(--muted)}
.notice{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:13.5px;line-height:1.7;color:var(--muted)}
.notice strong{color:var(--text2);font-weight:600}
.banner{display:none;font-size:13px;line-height:1.5;border-radius:10px;padding:11px 13px;margin-bottom:16px}
.banner-err{color:var(--red);background:rgba(248,113,113,.07);border:1px solid rgba(248,113,113,.24)}
.banner-ok{color:var(--accent);background:rgba(52,211,153,.07);border:1px solid rgba(52,211,153,.24)}
.banner-warn{color:var(--amber);background:rgba(251,191,36,.07);border:1px solid rgba(251,191,36,.24)}

/* ── List rows ───────────────────────────────────────────── */
.rows{display:flex;flex-direction:column}
.row-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-block:15px;border-bottom:1px solid var(--line);transition:padding-left .16s}
.row-item:last-child{border-bottom:none}
a.row-item:hover{padding-left:4px}
.row-main{min-width:0;flex:1}
.row-main b{display:block;font-size:14.5px;font-weight:500;color:var(--text);margin-bottom:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row-main em{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--faint)}
.row-end{font-family:var(--mono);font-size:12px;color:var(--muted);flex:none;text-align:right}
.empty{font-size:13.5px;color:var(--muted);padding-block:24px;text-align:center}
.empty a{color:var(--accent)}

/* ── Big figures ─────────────────────────────────────────── */
.figure{display:flex;align-items:baseline;gap:8px}
.figure b{font-size:44px;font-weight:600;letter-spacing:-.04em;line-height:1}
.figure span{font-size:16px;font-weight:500;color:var(--muted)}
.figure-sub{font-family:var(--mono);font-size:11.5px;color:var(--faint);margin-top:4px}
.track{height:4px;border-radius:2px;background:rgba(255,255,255,.07);overflow:hidden}
.track i{display:block;height:100%;background:var(--accent);border-radius:2px}

/* ── Avatars ─────────────────────────────────────────────── */
.avatar{width:40px;height:40px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:var(--accent-ink);overflow:hidden;position:relative;background:var(--raise);border:1px solid var(--line2)}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.avatar-lg{width:96px;height:96px;font-size:32px}
.avatar-pick{width:96px;height:96px;border-radius:50%;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:600;color:var(--accent-ink);cursor:pointer;border:1px solid var(--line2);position:relative;overflow:hidden;padding:0;font-family:var(--sans);transition:border-color .18s}
.avatar-pick:hover{border-color:var(--accent)}
.avatar-pick img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.avatar-overlay{position:absolute;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;opacity:0;font-size:11px;font-weight:600;color:#fff;transition:opacity .18s}
.avatar-pick:hover .avatar-overlay{opacity:1}
.color-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.cdot{width:28px;height:28px;padding:0;border-radius:50%;cursor:pointer;border:2px solid transparent;box-shadow:0 0 0 1px var(--line2);transition:transform .15s,border-color .15s}
.cdot:hover{transform:scale(1.12)}
.cdot.on{border-color:var(--bg);box-shadow:0 0 0 2px var(--text)}

/* ── Tabs ────────────────────────────────────────────────── */
.tabs{display:flex;gap:8px}
.tab{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:7px;padding:14px 15px;border-radius:13px;border:1px solid var(--line2);background:var(--surface);cursor:pointer;font-family:var(--sans);text-align:left;transition:border-color .16s,background .16s}
.tab:hover{border-color:rgba(255,255,255,.24)}
.tab.on{border-color:rgba(52,211,153,.45);background:rgba(52,211,153,.07)}
.tab svg{width:19px;height:19px;fill:none;stroke:var(--text2);stroke-width:1.6;color:var(--text2)}
.tab.on svg{stroke:var(--accent);color:var(--accent)}
.tab b{font-size:14px;font-weight:600;color:var(--text)}
.tab span{font-size:12px;color:var(--muted);line-height:1.4}
.tabbar{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabbar::-webkit-scrollbar{display:none}
.tabbar button{font-family:var(--sans);font-size:13.5px;font-weight:500;color:var(--muted);background:none;border:none;border-bottom:2px solid transparent;padding:12px 14px;cursor:pointer;white-space:nowrap;transition:color .18s,border-color .18s}
.tabbar button:hover{color:var(--text)}
.tabbar button.on{color:var(--accent);border-bottom-color:var(--accent)}

/* ── Tiles ───────────────────────────────────────────────── */
.tile{background:var(--surface);border:1px solid var(--line);border-radius:13px;padding:16px 10px;display:flex;flex-direction:column;align-items:center;gap:9px;transition:border-color .18s,transform .14s}
.tile:hover{border-color:var(--line2);transform:translateY(-2px)}
/* Direct child only: a tile may carry someone else's mark, and that mark
   brings its own fill and stroke. */
.tile>svg{width:21px;height:21px;fill:none;stroke:var(--text2);stroke-width:1.5;color:var(--text2)}
.tile span{font-size:12px;font-weight:500;color:var(--text);text-align:center}

/* Link row with leading icon and trailing arrow */
.linkrow{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;transition:border-color .15s,transform .14s}
.linkrow:hover{border-color:var(--line2);transform:translateY(-1px)}
.linkrow>svg{width:19px;height:19px;flex:none;fill:none;stroke:var(--accent);stroke-width:1.6}
.linkrow .txt{min-width:0;flex:1}
.linkrow b{display:block;font-size:13.5px;font-weight:600;color:var(--text)}
.linkrow span{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}
.linkrow .arrow{margin-left:auto;color:var(--faint);font-size:15px;flex:none}

/* ── Tables ──────────────────────────────────────────────── */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.dt{width:100%;border-collapse:collapse;font-size:13.5px}
table.dt th{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
table.dt td{padding:13px 12px;border-bottom:1px solid var(--line);color:var(--text2);vertical-align:middle}
table.dt tr:last-child td{border-bottom:none}
table.dt tbody tr:hover td{background:rgba(255,255,255,.02)}
table.dt td.num{font-family:var(--mono);text-align:right;white-space:nowrap}

/* ── Sheets & modals ─────────────────────────────────────── */
.veil{position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:none;align-items:flex-end;justify-content:center;padding:0}
.veil.open{display:flex}
.sheet{background:#0A100D;border:1px solid var(--line2);border-radius:20px 20px 0 0;width:100%;max-width:480px;padding:18px 22px 30px;animation:sheet-up .22s ease;max-height:92vh;overflow-y:auto}
@keyframes sheet-up{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
.handle{width:38px;height:4px;background:var(--line2);border-radius:2px;margin:0 auto 16px}
.sheet h2{font-size:17px;font-weight:600;margin-bottom:5px}
.sheet .sub{font-size:13.5px;line-height:1.6;color:var(--muted);margin-bottom:18px}
.sheet-actions{display:flex;gap:8px;margin-top:18px}
.sheet-actions .btn{flex:1;padding:13px;font-size:14px}
@media(min-width:520px){
  .veil{align-items:center;padding:24px}
  .sheet{border-radius:20px}
}

/* Centred confirmation state */
.state{text-align:center;padding-block:8px 4px}
.state .mark{width:44px;height:44px;border-radius:50%;border:1px solid rgba(52,211,153,.35);background:rgba(52,211,153,.1);display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.state .mark svg{width:20px;height:20px;fill:none;stroke:var(--accent);stroke-width:2}
.state b{display:block;font-size:16px;font-weight:600;margin-bottom:6px}
.state p{font-size:13.5px;line-height:1.6;color:var(--muted);max-width:34ch;margin:0 auto}

/* ── Waiting ─────────────────────────────────────────────── */
.loading{display:flex;flex-direction:column;align-items:center;gap:13px;padding-block:40px;font-size:13.5px;color:var(--muted);text-align:center}
.spin{width:20px;height:20px;flex:none;border:2px solid var(--line2);border-top-color:var(--accent);border-radius:50%;animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* Placeholder blocks for content that has not arrived yet. */
.skel{background:linear-gradient(90deg,rgba(255,255,255,.04),rgba(255,255,255,.08),rgba(255,255,255,.04));background-size:200% 100%;border-radius:8px;animation:skel 1.4s ease-in-out infinite}
@keyframes skel{to{background-position:-200% 0}}

/* ── Toast ───────────────────────────────────────────────── */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(90px);background:#0A100D;border:1px solid var(--line2);border-radius:10px;padding:12px 20px;font-size:13.5px;color:var(--text);z-index:200;transition:transform .28s cubic-bezier(.4,0,.2,1);box-shadow:0 12px 30px rgba(0,0,0,.5);max-width:calc(100vw - 44px);text-align:center}
.toast.show{transform:translateX(-50%) translateY(0)}

/* ── Footer ──────────────────────────────────────────────── */
footer{border-top:1px solid var(--line);margin-top:36px}
.foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding-block:22px 40px;font-family:var(--mono);font-size:11px;color:var(--faint)}
.foot a{transition:color .18s}
.foot a:hover{color:var(--muted)}
.foot .spread{display:flex;align-items:center;justify-content:space-between;width:100%;gap:14px}
/* Staff get extra links appended here at runtime, so the row has to be
   able to wrap rather than run off the side of a phone. */
.foot nav{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:flex-end}

/* ── Utilities ───────────────────────────────────────────── */
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.accent{color:var(--accent)}
.center{text-align:center}
.nowrap{white-space:nowrap}
/* Page CSS loads after this file, so a page rule that sets display would
   otherwise win over .hidden and leave the element on screen. */
.hidden{display:none !important}
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:32px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:8px}.mb-2{margin-bottom:16px}.mb-3{margin-bottom:24px}.mb-4{margin-bottom:32px}
.stack{display:flex;flex-direction:column}
.stack-1{gap:8px}.stack-2{gap:12px}.stack-3{gap:18px}.stack-4{gap:26px}
.flex{display:flex;align-items:center}
.flex-between{display:flex;align-items:center;justify-content:space-between;gap:12px}
.flex-wrap{flex-wrap:wrap}
.gap-1{gap:8px}.gap-2{gap:12px}.gap-3{gap:18px}
.grow{flex:1;min-width:0}

@media(max-width:480px){
  .grid-2,.field-row{grid-template-columns:1fr}
}
/* The wordmark and a full nav do not both fit a 360px screen, and a nav
   that scrolls sideways is a nav whose last item nobody finds. Below
   480px the mark carries the brand on its own - it is still the link
   home - which buys back the ~90px the nav needs. */
/* The nav is two or three icon buttons now, so the wordmark stays put -
   it only ever came off to make room the nav no longer needs. */
@media(max-width:480px){
  .topbar .row{gap:12px}
  .topnav{gap:6px;min-width:0}
  .topnav a,.topnav button{font-size:13px}
}
/* Narrower still: the nav takes its own line. Scrolling it sideways
   would hide its last item and clip anything it drops down, like the
   notification panel. */
@media(max-width:340px){
  .topbar .row{flex-wrap:wrap;gap:6px 12px}
  .topnav{width:100%;justify-content:flex-end}
}

/* ── Desktop ─────────────────────────────────────────────────
   The site was laid out as a phone column and then shown on a
   1440px screen. From here up it gets a composition: a wider
   gutter, more air between sections, and section labels moved
   out into the margin beside the content they name. */
@media(min-width:880px){
  .wrap{padding-inline:32px}
  .page{padding-block:44px 80px}
  .page-head{margin-bottom:34px}
  .band{padding-block:54px}
  .band-split{display:grid;grid-template-columns:190px 1fr;gap:50px;align-items:start}
  .band-split .label{padding-bottom:0}
  .head-split{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .btn:hover,.tile:hover,.linkrow:hover{transform:none}
}