/* ─────────────────────────────────────────────────────────────────────────────
   The portal framework's stylesheet — one file, no framework, no build.

   Tokens live on :root and are redefined once for dark mode. Everything else
   reads them, so the whole product re-themes by editing the block below.
   ───────────────────────────────────────────────────────────────────────────── */

:root{
  /* surface */
  --bg:#f7f8fb;
  --bg-2:#eef1f6;
  --panel:#ffffff;
  --panel-2:#f8fafc;
  --line:#e6e9ef;
  --line-2:#d3d9e3;

  /* ink */
  --ink:#0d1220;
  --ink-2:#3d4658;
  --muted:#6b7488;
  --faint:#9aa3b5;

  /* accent */
  --brand:#5b5bd6;
  --brand-2:#7c5cf0;
  --brand-ink:#ffffff;
  --brand-soft:#eef0ff;
  --brand-line:#d3d6fb;

  /* status */
  --ok:#0e7c58; --ok-soft:#e8f7f0;
  --warn:#9a6212; --warn-soft:#fdf5e4;
  --bad:#b32036; --bad-soft:#fdeef0;

  /* form */
  --radius:12px;
  --radius-sm:9px;
  --radius-lg:16px;
  --ring:0 0 0 3px rgba(91,91,214,.18);
  --shadow-1:0 1px 2px rgba(13,18,32,.05), 0 1px 3px rgba(13,18,32,.04);
  --shadow-2:0 4px 12px rgba(13,18,32,.07), 0 12px 32px rgba(13,18,32,.06);
  --shadow-3:0 24px 64px rgba(13,18,32,.18);
  --ease:180ms cubic-bezier(.2,.7,.3,1);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0a0d16; --bg-2:#0e1220; --panel:#131828; --panel-2:#171d30;
    --line:#242b40; --line-2:#333c55;
    --ink:#eef1f8; --ink-2:#c3cadb; --muted:#8e98ae; --faint:#6b7590;
    --brand:#8b8bf5; --brand-2:#a78bfa; --brand-ink:#0a0d16;
    --brand-soft:#1c1f3d; --brand-line:#343879;
    --ok:#4ade9f; --ok-soft:#0c2a20;
    --warn:#f6c258; --warn-soft:#2c2209;
    --bad:#f98a9c; --bad-soft:#2e1017;
    --ring:0 0 0 3px rgba(139,139,245,.25);
    --shadow-1:0 1px 2px rgba(0,0,0,.4);
    --shadow-2:0 4px 12px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.35);
    --shadow-3:0 24px 64px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#0a0d16; --bg-2:#0e1220; --panel:#131828; --panel-2:#171d30;
  --line:#242b40; --line-2:#333c55;
  --ink:#eef1f8; --ink-2:#c3cadb; --muted:#8e98ae; --faint:#6b7590;
  --brand:#8b8bf5; --brand-2:#a78bfa; --brand-ink:#0a0d16;
  --brand-soft:#1c1f3d; --brand-line:#343879;
  --ok:#4ade9f; --ok-soft:#0c2a20;
  --warn:#f6c258; --warn-soft:#2c2209;
  --bad:#f98a9c; --bad-soft:#2e1017;
  --ring:0 0 0 3px rgba(139,139,245,.25);
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 4px 12px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.35);
  --shadow-3:0 24px 64px rgba(0,0,0,.6);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font:15px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.boot{padding:48px;color:var(--muted)}

h1,h2,h3{margin:0 0 8px;line-height:1.22;letter-spacing:-.015em;font-weight:680}
h1{font-size:25px;letter-spacing:-.022em}
h2{font-size:17px}
h3{font-size:14.5px}
p{margin:0 0 10px;color:var(--ink-2)}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
small,.small{font-size:12.5px;line-height:1.5}
.muted{color:var(--muted)}
b,strong{font-weight:640;color:var(--ink)}
hr{border:0;border-top:1px solid var(--line);margin:18px 0}

code,kbd{font-family:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;font-size:12.5px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:1.5px 5px;color:var(--ink-2)}
pre{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);padding:13px 15px;
  overflow:auto;font-size:12.5px;line-height:1.65;max-height:340px;color:var(--ink-2)}
pre code{background:none;border:0;padding:0}

.ico{flex:none;vertical-align:-.15em}

::selection{background:var(--brand-soft);color:var(--ink)}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px}

/* ── shell ───────────────────────────────────────────────────────────────── */
.shell{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh}

.side{
  background:var(--panel);border-right:1px solid var(--line);
  padding:18px 14px 14px;display:flex;flex-direction:column;gap:2px;
  position:sticky;top:0;height:100vh;
}
.brand{display:flex;gap:11px;align-items:center;padding:4px 8px 20px}
.brand .name{font-weight:700;font-size:15px;letter-spacing:-.02em;line-height:1.2}
.brand .name span{display:block;font-size:10.5px;font-weight:650;color:var(--faint);
  text-transform:uppercase;letter-spacing:.12em;margin-top:2px}

.nav{display:flex;flex-direction:column;gap:1px}
.nav a{
  display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:var(--radius-sm);
  color:var(--ink-2);font-weight:560;font-size:13.5px;position:relative;
  transition:background var(--ease),color var(--ease);
}
.nav a .ico{color:var(--faint);transition:color var(--ease)}
.nav a:hover{background:var(--panel-2);color:var(--ink);text-decoration:none}
.nav a:hover .ico{color:var(--muted)}
.nav a.on{background:var(--brand-soft);color:var(--brand);font-weight:640}
.nav a.on .ico{color:var(--brand)}
.nav .sep{margin:16px 10px 6px;font-size:10px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint)}

.side .foot{margin-top:auto;padding:12px 10px 2px;border-top:1px solid var(--line)}
.side .foot .who{font-size:12.5px;color:var(--ink-2);font-weight:560;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side .foot .role{font-size:10.5px;color:var(--faint);text-transform:uppercase;letter-spacing:.1em}

.main{padding:26px 30px 72px;min-width:0}
.main > h1{margin-bottom:4px}
.main > h1 + p{max-width:74ch;margin-bottom:20px}

.topbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  margin:-4px 0 22px}
.picker{display:flex;gap:8px;align-items:center;background:var(--panel);border:1px solid var(--line);
  border-radius:999px;padding:5px 6px 5px 13px;box-shadow:var(--shadow-1)}
.picker label{margin:0;font-size:10px;letter-spacing:.12em;color:var(--faint)}
.picker select{border:0;background:none;padding:3px 6px;font-weight:600;font-size:13.5px;width:auto;
  min-width:130px;box-shadow:none}
.picker select:focus{box-shadow:none;outline:none}

@media (max-width:900px){
  .shell{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;
    border-right:0;border-bottom:1px solid var(--line);padding:10px 12px;gap:6px}
  .side .brand{padding:2px 6px;flex:1 1 100%}
  .nav{flex-direction:row;flex-wrap:wrap;gap:4px;flex:1 1 100%}
  .nav a{padding:7px 11px;font-size:13px}
  .nav .sep{display:none}
  .side .foot{margin:2px 0 0;border:0;padding:4px 6px;display:flex;gap:10px;align-items:center;flex:1 1 100%}
  .main{padding:18px 16px 60px}
}

/* ── blocks ──────────────────────────────────────────────────────────────── */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:20px 22px;box-shadow:var(--shadow-1);margin:0 0 18px}
.card > h2{display:flex;align-items:center;gap:9px;margin-bottom:3px}
.card > h2 .ico{color:var(--faint)}
.card > h2 + p{margin-bottom:16px;max-width:76ch}
.card.flush{padding:0;overflow:hidden}

.head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  margin-bottom:14px}
.head h2{margin:0}

.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row.tight{gap:7px}
.row.end{justify-content:flex-end}
.row.between{justify-content:space-between}
.grid{display:grid;gap:14px}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
@media (max-width:960px){.split{grid-template-columns:1fr}}
.stack{display:flex;flex-direction:column;gap:12px}
.spacer{flex:1}

/* ── forms ───────────────────────────────────────────────────────────────── */
/* One line, always. A label that wraps in one column and not in the next pushes its control down
   by a line, and two fields side by side stop lining up — which is exactly how this looked wrong. */
label{display:block;font-size:11px;font-weight:700;letter-spacing:.075em;text-transform:uppercase;
  color:var(--muted);margin:0 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.field{min-width:0}
/* Stacked fields need breathing room; fields side by side in a grid do NOT — the grid's own gap
   handles that, and this margin was landing on the second COLUMN, pushing it 12px down the page. */
.field + .field{margin-top:12px}
.grid > .field + .field,.grid.two > .field + .field{margin-top:0}
.field .small{display:block;margin-top:5px;color:var(--muted)}

input,select,textarea{
  width:100%;background:var(--panel);color:var(--ink);
  border:1px solid var(--line-2);border-radius:var(--radius-sm);
  padding:9px 11px;font:inherit;font-size:14px;line-height:1.4;
  transition:border-color var(--ease),box-shadow var(--ease),background var(--ease);
  box-shadow:inset 0 1px 1px rgba(13,18,32,.02);
}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:hover,select:hover,textarea:hover{border-color:var(--muted)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}
input:disabled,select:disabled,textarea:disabled{background:var(--panel-2);color:var(--muted);cursor:not-allowed}
input[readonly]{background:var(--panel-2);color:var(--ink-2)}
textarea{min-height:82px;resize:vertical}
input[type=checkbox]{width:16px;height:16px;accent-color:var(--brand);cursor:pointer}
input[type=file]{padding:7px 9px;font-size:13px}
select{appearance:none;background-image:
  linear-gradient(45deg,transparent 50%,var(--muted) 50%),
  linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 16px) 51%,calc(100% - 11px) 51%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:32px}

.check{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--ink-2);
  text-transform:none;letter-spacing:0;font-weight:500;margin:0;cursor:pointer}
.check input{margin-top:2px}

/* ── buttons ─────────────────────────────────────────────────────────────── */
button{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  cursor:pointer;font:inherit;font-size:13.5px;font-weight:620;letter-spacing:-.005em;
  border-radius:var(--radius-sm);padding:8px 14px;min-height:36px;
  border:1px solid var(--line-2);background:var(--panel);color:var(--ink);
  transition:background var(--ease),border-color var(--ease),box-shadow var(--ease),transform var(--ease);
  box-shadow:var(--shadow-1);
}
button:hover{background:var(--panel-2);border-color:var(--muted)}
button:active{transform:translateY(.5px)}
button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
button:disabled:hover{background:var(--panel);border-color:var(--line-2)}

button.primary{background:linear-gradient(180deg,var(--brand-2),var(--brand));border-color:transparent;
  color:var(--brand-ink);box-shadow:0 1px 2px rgba(91,91,214,.35),0 4px 14px rgba(91,91,214,.22)}
button.primary:hover{filter:brightness(1.06)}
button.primary .ico{opacity:.92}
button.danger{color:var(--bad);border-color:var(--line-2)}
button.danger:hover{background:var(--bad-soft);border-color:var(--bad)}
button.ghost{border-color:transparent;background:transparent;box-shadow:none;color:var(--muted)}
button.ghost:hover{background:var(--panel-2);color:var(--ink)}
button.small{padding:5px 10px;min-height:29px;font-size:12.5px;gap:5px}
button.icon{padding:0;width:32px;min-height:32px}
button.link{border:0;background:none;box-shadow:none;padding:0;min-height:0;color:var(--brand);font-weight:600}
button.link:hover{background:none;text-decoration:underline}

/* ── tables ──────────────────────────────────────────────────────────────── */
table{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
thead th{position:sticky;top:0;z-index:1;background:var(--panel-2);
  font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700;
  border-bottom:1px solid var(--line)}
tbody tr{transition:background var(--ease)}
tbody tr:hover{background:var(--panel-2)}
tbody tr:last-child td{border-bottom:0}
tr.off td{opacity:.45}
td.a{white-space:nowrap;text-align:right}
td.a button + button{margin-left:6px}
table.fixed{table-layout:fixed}
table.fixed td,table.fixed th{overflow-wrap:anywhere}
.scroll{overflow:auto;max-height:62vh;border:1px solid var(--line);border-radius:var(--radius)}
.scroll::-webkit-scrollbar{width:10px;height:10px}
.scroll::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;border:3px solid var(--panel)}

/* ── tags, notes, meters ─────────────────────────────────────────────────── */
.tag{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:3px 8px;border-radius:999px;
  background:var(--panel-2);color:var(--muted);border:1px solid var(--line)}
.tag.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.tag.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.tag.bad{background:var(--bad-soft);color:var(--bad);border-color:transparent}
.tag.brand{background:var(--brand-soft);color:var(--brand);border-color:transparent}

.note{display:flex;gap:10px;align-items:flex-start;border-radius:var(--radius);
  padding:11px 14px;font-size:13.5px;margin:0 0 14px;border:1px solid transparent;line-height:1.55}
.note .ico{margin-top:2px}
.note.info{background:var(--brand-soft);color:var(--brand);border-color:var(--brand-line)}
.note.ok{background:var(--ok-soft);color:var(--ok)}
.note.warn{background:var(--warn-soft);color:var(--warn)}
.note.bad{background:var(--bad-soft);color:var(--bad)}
.note a{color:inherit;text-decoration:underline}

.bar{height:7px;border-radius:999px;background:var(--panel-2);overflow:hidden;border:1px solid var(--line)}
.bar > i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));transition:width .35s var(--ease)}

/* ── empty states ────────────────────────────────────────────────────────── */
.empty{text-align:center;padding:40px 24px;color:var(--muted)}
.empty svg{color:var(--line-2);margin-bottom:6px}
.empty h3{margin:6px 0 4px;color:var(--ink);font-size:15px}
.empty p{margin:0 auto 16px;max-width:46ch;font-size:13.5px}

/* ── first-run checklist ─────────────────────────────────────────────────── */
.steps{display:grid;gap:2px}
.step{display:flex;gap:12px;align-items:flex-start;padding:12px 4px;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:0}
.step .mark{flex:none;width:24px;height:24px;border-radius:999px;display:grid;place-items:center;
  border:1.5px solid var(--line-2);color:var(--faint);font-size:11.5px;font-weight:700}
.step.done .mark{background:var(--ok-soft);border-color:transparent;color:var(--ok)}
.step .body{flex:1;min-width:0}
.step .body b{display:block;font-size:13.5px;margin-bottom:1px}
.step .body span{font-size:12.5px;color:var(--muted)}
.step.done .body b{color:var(--muted);font-weight:560}

/* ── the way in ──────────────────────────────────────────────────────────── */
/* Two halves: what this portal is, and the form. Both fit ONE screen on a laptop - a landing page
   you have to scroll to see the point of has already lost. Each half scrolls on its own when the
   window is genuinely too short, so nothing is ever unreachable; on a phone they stack.
   Everything here is sized in clamp(), so the pitch shrinks to fit instead of being hidden. */
.gate{min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);
  background:var(--bg)}
.gate .pitch{padding:clamp(20px,3.4vh,44px) clamp(22px,3.4vw,48px);display:flex;flex-direction:column;
  justify-content:center;gap:clamp(9px,1.5vh,18px);min-height:0;overflow:auto;
  color:#fff;background:
    radial-gradient(900px 520px at 15% 0%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(150deg,var(--brand-2),var(--brand) 62%,#3f3fae)}
.gate .pitch > *{max-width:560px;width:100%}
.gate .pitch .mark{display:flex;align-items:center;gap:11px;font-weight:700;font-size:14.5px;
  letter-spacing:-.01em}
.gate .pitch h2{font-size:clamp(21px,2.5vw + .4vh,32px);line-height:1.14;letter-spacing:-.028em;
  margin:0;color:#fff}
.gate .pitch .sub{margin:0;font-size:clamp(12.5px,.95vw,14px);line-height:1.55;
  color:rgba(255,255,255,.86)}
/* The tour of the portal, playing inside the portal. Fixed 16:9 so the page never jumps when the
   poster loads, and capped by height as well as width so a short laptop screen still fits it all. */
.gate .tourbox{margin:0}
/* Sized by HEIGHT, not width: capping the height of a full-width box leaves the picture letterboxed
   inside black bars. Height first, 16:9 works out the width, and max-width keeps it in the column. */
.gate .tourbox video{display:block;height:min(42vh,296px);width:auto;max-width:100%;aspect-ratio:16/9;
  border-radius:13px;background:#000;
  border:1px solid rgba(255,255,255,.28);box-shadow:0 16px 38px rgba(8,10,40,.34)}
.gate .tourbox figcaption{display:flex;align-items:center;gap:7px;margin-top:7px;font-size:12px;
  color:rgba(255,255,255,.8)}
.gate .rail{width:100%;height:clamp(48px,7vh,70px);margin:0}
/* Three claims in as many columns as the window can hold - one tall list was the thing that pushed
   the fine print off a laptop screen. */
.gate .pitchsteps{list-style:none;margin:0;padding:0;display:grid;gap:clamp(8px,1.4vh,14px);
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.gate .pitchsteps li{display:flex;gap:11px;align-items:flex-start}
.gate .pitchsteps .i{flex:none;width:29px;height:29px;border-radius:9px;display:grid;place-items:center;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22)}
.gate .pitchsteps b{display:block;font-size:13.5px;color:#fff;font-weight:650}
.gate .pitchsteps span span{display:block;font-size:12px;line-height:1.5;color:rgba(255,255,255,.82)}
.gate .fine{display:flex;gap:8px;align-items:flex-start;font-size:11.5px;line-height:1.5;
  color:rgba(255,255,255,.76);margin:0}
.gate .gateform{display:grid;place-items:center;padding:clamp(18px,3vh,32px) 24px;
  min-height:0;overflow:auto}
.gate .card{width:min(420px,100%);padding:clamp(20px,3vh,30px) 30px clamp(18px,2.6vh,26px);
  box-shadow:var(--shadow-2);margin:0}
.gate h1{font-size:clamp(19px,1.6vw,22px);margin-bottom:6px}
.gate .lede{font-size:13px;color:var(--muted);margin-bottom:clamp(12px,2vh,20px)}
.gate .field + .field{margin-top:clamp(8px,1.4vh,12px)}
.gate button[type=submit]{width:100%;margin-top:clamp(12px,2vh,18px);min-height:42px;font-size:14.5px}
.gate .alt{margin-top:clamp(10px,1.8vh,16px);padding-top:clamp(9px,1.4vh,14px);
  border-top:1px solid var(--line);text-align:center;font-size:13px;color:var(--muted)}
/* A laptop at 1366x630 - the commonest screen this will ever be opened on - must show the video AND
   the three claims AND the form without scrolling. Everything shrinks a step rather than hiding. */
@media (min-width:881px) and (max-height:760px),
       (min-width:881px) and (max-width:1180px){
  .gate .pitch{gap:9px;padding:16px clamp(20px,3vw,40px)}
  .gate .pitch h2{font-size:clamp(20px,1.9vw,25px)}
  .gate .pitch .sub{font-size:12.5px;line-height:1.45}
  .gate .tourbox video{height:min(30vh,200px)}
  .gate .tourbox figcaption{margin-top:5px;font-size:11.5px}
  .gate .rail{height:46px}
  .gate .pitchsteps{gap:8px}
  .gate .pitchsteps span span{font-size:11.5px;line-height:1.4}
  .gate .fine{font-size:11px;line-height:1.45}
}
/* Shorter than that and there is no honest way to fit it: let the whole page scroll as one, rather
   than trapping the reader inside a column-sized scroller they cannot see the edge of. */
@media (min-width:881px) and (max-height:560px){
  .gate{min-height:0}
  .gate .pitch,.gate .gateform{overflow:visible}
  .gate .tourbox video{height:auto;width:100%}
}
@media (max-width:880px){
  .gate{grid-template-columns:1fr;min-height:0}
  .gate .pitch,.gate .gateform{overflow:visible}
  .gate .pitch{padding:22px 20px;gap:13px}
  .gate .pitch > *{max-width:none}
  .gate .tourbox video{height:auto;width:100%}
  /* Nothing is hidden on a phone any more - it stacks and the page scrolls, which is what a phone
     does anyway. Only the drawn rail goes when there is no width left to draw it in. */
  .gate .pitchsteps{grid-template-columns:1fr}
}
@media (max-width:520px){
  .gate .rail{display:none}
}
}

/* a two-way switch that reads as one control, not two buttons */
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;margin:0 0 18px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:999px}
.tabs button{border:0;background:none;box-shadow:none;border-radius:999px;min-height:32px;
  font-size:13px;color:var(--muted)}
.tabs button:hover{background:var(--panel);color:var(--ink)}
.tabs button.on{background:var(--brand);color:#fff}
.tabs button.on:hover{background:var(--brand)}

/* ── modal ───────────────────────────────────────────────────────────────── */
.backdrop{position:fixed;inset:0;background:rgba(9,12,22,.5);backdrop-filter:blur(3px);
  display:grid;place-items:center;padding:20px;z-index:60;animation:fade var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);
  width:min(880px,100%);max-height:88vh;display:flex;flex-direction:column;
  box-shadow:var(--shadow-3);animation:rise 220ms cubic-bezier(.2,.7,.3,1)}
.modal > header{display:flex;gap:12px;align-items:center;justify-content:space-between;
  padding:15px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--panel);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.modal > header h2{margin:0;font-size:16px}
.modal > .body{padding:18px 20px;overflow:auto}
/* The action bar never scrolls away. A dialog whose primary button is below the fold is a dialog
   people abandon. */
.modal > footer{display:flex;gap:10px;align-items:center;justify-content:flex-end;
  padding:13px 20px;border-top:1px solid var(--line);background:var(--panel);
  border-radius:0 0 var(--radius-lg) var(--radius-lg)}
.modal > footer .left{margin-right:auto;font-size:12.5px;color:var(--muted)}

/* file picker — a target you can drop onto, not a grey browser button */
.drop{position:relative;display:flex;gap:13px;align-items:center;justify-content:flex-start;width:100%;text-align:left;
  border:1.5px dashed var(--line-2);border-radius:var(--radius);background:var(--panel-2);
  padding:16px 18px;cursor:pointer;transition:border-color var(--ease),background var(--ease);
  box-shadow:none;min-height:0;font-weight:500}
.drop:hover,.drop.over{border-color:var(--brand);background:var(--brand-soft)}
.drop .ico{color:var(--brand)}
.drop .txt{min-width:0}
.drop .txt b{display:block;font-size:14px;font-weight:620;color:var(--ink);margin-bottom:1px}
.drop .txt span{display:block;font-size:12.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drop.filled{border-style:solid;border-color:var(--brand-line);background:var(--brand-soft)}
.drop input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
@media (prefers-reduced-motion:reduce){.backdrop,.modal{animation:none}}

/* ── master / detail ─────────────────────────────────────────────────────── */
.panes{display:grid;grid-template-columns:292px minmax(0,1fr);gap:16px;align-items:start}
.pane{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1);display:flex;flex-direction:column;height:74vh;min-height:420px;overflow:hidden;
  /* The detail pane's width has nothing to do with the window's: on a laptop it is 900px, in a split
     view 260px. Its contents reflow on ITS size, which is what a container query is for. */
  container-type:inline-size;container-name:pane}
.pane > .top{padding:12px 14px;border-bottom:1px solid var(--line);background:var(--panel)}
.pane > .scrollbody{overflow:auto;padding:8px;flex:1}
.pane > .scrollbody.pad{padding:20px 22px}
@media (max-width:900px){.panes{grid-template-columns:1fr}.pane{height:auto;max-height:62vh}}

.finder{display:flex;gap:8px;align-items:center;border:1px solid var(--line-2);border-radius:var(--radius-sm);
  padding:0 10px;background:var(--panel)}
.finder .ico{color:var(--faint)}
.finder input{border:0;box-shadow:none;padding:8px 0;font-size:13.5px;background:none}
.finder input:focus{box-shadow:none;outline:none}

.list{display:flex;flex-direction:column;gap:1px}
.list .grp{padding:12px 10px 4px;font-size:9.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--brand);opacity:.75}
.list button{width:100%;justify-content:flex-start;gap:9px;border:0;background:none;box-shadow:none;
  padding:8px 10px;border-radius:var(--radius-sm);text-align:left;font-weight:560;font-size:13px;
  color:var(--ink-2);min-height:0}
.list button:hover{background:var(--panel-2);color:var(--ink)}
.list button.on{background:var(--brand-soft);color:var(--brand);font-weight:650}
.list button .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list .none{padding:14px 10px;color:var(--muted);font-size:13px}

.badge{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:grid;place-items:center;
  font-size:10.5px;font-weight:800;background:var(--brand-soft);color:var(--brand)}
.badge.zero{background:var(--panel-2);color:var(--faint)}
.list button.on .badge{background:var(--brand);color:#fff}

/* link type colours — the same eye-grammar as the rest of the product */
.t-youtube{color:#e11d48}
.t-video{color:#7c3aed}
.t-instagram{color:#c026d3}
.t-doc{color:#0284c7}
.t-link{color:var(--faint)}

/* ── busy state ──────────────────────────────────────────────────────────── */
@keyframes spin{to{transform:rotate(360deg)}}
.spin{animation:spin .8s linear infinite}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2.4s}}

/* ── toasts ──────────────────────────────────────────────────────────────── */
.toasts{position:fixed;right:18px;top:18px;z-index:80;display:flex;flex-direction:column;gap:9px;
  max-width:min(390px,calc(100vw - 36px))}
.toast{display:flex;gap:10px;align-items:flex-start;background:var(--panel);color:var(--ink);
  border:1px solid var(--line);border-left:3px solid var(--brand);border-radius:var(--radius);
  padding:11px 14px;box-shadow:var(--shadow-2);font-size:13.5px;line-height:1.5;
  animation:toastin 220ms cubic-bezier(.2,.7,.3,1)}
.toast.ok{border-left-color:var(--ok)}.toast.ok .ico{color:var(--ok)}
.toast.bad{border-left-color:var(--bad)}.toast.bad .ico{color:var(--bad)}
.toast.warn{border-left-color:var(--warn)}.toast.warn .ico{color:var(--warn)}
.toast.info .ico{color:var(--brand)}
.toast .ico{margin-top:2px}
@keyframes toastin{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.toast{animation:none}}

/* ── link rows ───────────────────────────────────────────────────────────── */
/* A detail pane is narrow, and a six-column table inside one squeezes every field down to three
   characters. Each link is its own small card instead, and it reflows instead of shrinking. */
.linkrow{display:grid;grid-template-columns:auto minmax(0,1fr) 136px auto;gap:12px;align-items:center;
  padding:12px 13px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel-2)}
.linkrow + .linkrow{margin-top:9px}
.linkrow.off{opacity:.5}
.linkrow .stack2{display:grid;gap:7px;min-width:0}
.linkrow .kind{display:flex;gap:7px;align-items:center;min-width:0}
.linkrow .from{grid-column:1/-1;font-size:11.5px;color:var(--muted);margin:-3px 0 0}
@container pane (max-width:600px){
  .linkrow{grid-template-columns:auto minmax(0,1fr) auto}
  .linkrow .kind{grid-column:2/-1}
  .linkrow select{width:100%}
}
@container pane (max-width:360px){
  .linkrow{grid-template-columns:auto minmax(0,1fr)}
  .linkrow > button[data-drop]{grid-column:2;justify-self:end}
}
/* No container-query support: the four-column form still works, it just needs a wider pane. */
@supports not (container-type: inline-size){
  @media (max-width:1100px){
    .linkrow{grid-template-columns:auto minmax(0,1fr) auto}
    .linkrow .kind{grid-column:2/-1}
  }
}

/* ── a control with a button inside it ───────────────────────────────────── */
/* The Show button used to sit BESIDE the input, which made a secret field taller than a plain one —
   so in a two-column grid the columns stopped lining up. Inside the box, every field is one input
   tall and the grid stays honest. */
.withbtn{position:relative;display:block}
.withbtn input{width:100%;padding-right:72px}
.withbtn.wide input{padding-right:132px}
.withbtn.wide > [data-paste]{right:60px}
.withbtn > button{position:absolute;right:5px;top:5px;bottom:5px;min-height:0;padding:0 11px;
  border:0;background:transparent;box-shadow:none;color:var(--brand);font-size:12px;font-weight:650}
.withbtn > button:hover{background:var(--brand-soft)}

/* ── a running job ───────────────────────────────────────────────────────── */
/* Out of the document flow on purpose. Inserting a progress card into the page pushed everything
   below it down and then yanked it back when the job finished — the page appeared to resize itself
   under the reader. Fixed to a corner, nothing reflows, and progress follows you as you scroll. */
.jobpanel{position:fixed;right:18px;bottom:18px;z-index:70;
  width:min(430px,calc(100vw - 36px));box-shadow:var(--shadow-3)}
.jobpanel .card{margin:0;border-radius:var(--radius-lg)}
@media (max-width:640px){.jobpanel{left:14px;right:14px;bottom:14px;width:auto}}

/* ── page header ─────────────────────────────────────────────────────────── */
/* Every module opens the same way: what this screen is, one sentence on what it is for, and the
   one or two things you can do from it — on the right, where a hand looks for a button. */
.pagehead{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start;justify-content:space-between;
  margin:0 0 20px}
.pagehead .txt{min-width:0;flex:1 1 380px}
.pagehead h1{margin:0 0 5px}
.pagehead p{margin:0;max-width:78ch;color:var(--muted);font-size:13.5px}
.pagehead .acts{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.pagehead.editor{align-items:center;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:18px}
.pagehead.editor h1{font-size:22px;margin:6px 0 3px;border-radius:7px;padding:1px 4px;margin-left:-4px}
.pagehead.editor h1:focus{outline:none;box-shadow:var(--ring);background:var(--panel)}
.pagehead.editor h1:hover{background:var(--panel-2)}

.toolbar{display:flex;gap:12px;align-items:center;margin:0 0 14px;flex-wrap:wrap}
.toolbar .finder{flex:1 1 240px;max-width:360px}

/* ── top bar ─────────────────────────────────────────────────────────────── */
.topbar{gap:10px}
.only-narrow{display:none}
@media (max-width:900px){
  .only-narrow{display:inline-flex}
  .side{display:none}
  .side.open{display:flex}
}

.chipbtn{display:inline-flex;gap:6px;align-items:center;font-size:12.5px;font-weight:650;
  padding:6px 12px;border-radius:999px;background:var(--brand-soft);color:var(--brand);
  border:1px solid var(--brand-line)}
.chipbtn:hover{text-decoration:none;filter:brightness(.97)}

.side .foot .quiet{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--muted);
  font-weight:560}
.side .foot .quiet:hover{color:var(--brand);text-decoration:none}

.usermenu{position:relative}
.usermenu .who{gap:9px;padding:5px 9px 5px 5px;border-radius:999px;box-shadow:none;
  background:var(--panel);border-color:var(--line)}
.usermenu .av{width:26px;height:26px;border-radius:999px;display:grid;place-items:center;flex:none;
  background:linear-gradient(180deg,var(--brand-2),var(--brand));color:#fff;font-size:12px;font-weight:700}
.usermenu .nm{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:13px;font-weight:600}
.usermenu .pop{position:absolute;right:0;top:calc(100% + 8px);z-index:50;width:246px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-2);padding:6px;display:flex;flex-direction:column;gap:2px}
/* `display:flex` beats the browser's own rule for [hidden], so say it here or the menu never shuts. */
.usermenu .pop[hidden]{display:none}
.usermenu .pop .head{padding:10px 10px 12px;border-bottom:1px solid var(--line);margin-bottom:4px;
  display:grid;gap:3px;justify-items:start}
.usermenu .pop .head span{font-size:12px;color:var(--muted)}
.usermenu .pop a,.usermenu .pop button{display:flex;gap:9px;align-items:center;justify-content:flex-start;
  width:100%;padding:8px 10px;border:0;background:none;box-shadow:none;border-radius:var(--radius-sm);
  font-size:13px;font-weight:560;color:var(--ink-2);min-height:0;text-align:left}
.usermenu .pop a:hover,.usermenu .pop button:hover{background:var(--panel-2);color:var(--ink);text-decoration:none}
.usermenu .pop .ico{color:var(--faint)}
@media (max-width:640px){.usermenu .nm{display:none}}

/* ── framework screens: people & access, activity, visitors, memory ─────────── */
/* More than two tabs: the same pill, sized to its labels and allowed to wrap on a phone. */
.tabs.many{display:inline-flex;flex-wrap:wrap;max-width:100%}
.tabs.many button{padding:6px 14px;gap:6px}
.tabs.many .badge{background:var(--bad);color:#fff;min-width:18px;height:18px}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 18px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow-1)}
.stat b{display:block;font-size:22px;letter-spacing:-.02em;line-height:1.2;font-variant-numeric:tabular-nums}
.stat span{font-size:12px;color:var(--muted)}

.grid.three{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 18px}

.hbars{display:grid;gap:7px}
.hbar{display:grid;grid-template-columns:minmax(80px,38%) 1fr 44px;gap:10px;align-items:center;font-size:13px}
.hbar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.hbar i{display:block;height:9px;min-width:2px;border-radius:999px;background:linear-gradient(90deg,var(--brand),var(--brand-2))}
.hbar b{text-align:right;font-variant-numeric:tabular-nums;font-size:12.5px}

.chart{width:100%;height:auto;display:block;margin-top:8px;overflow:visible}
.chart rect{fill:var(--brand);opacity:.85}
.chart rect:hover{opacity:1}
.chart .line{fill:none;stroke:var(--brand);stroke-width:2;vector-effect:non-scaling-stroke}
.chart .area{fill:var(--brand-soft)}
.chart .limit{stroke:var(--bad);stroke-width:1.5;stroke-dasharray:6 5;vector-effect:non-scaling-stroke}
.chart text{fill:var(--muted);font-size:11px}

/* A screen a rule shut: still in the menu, so the person can ask for it. */
.nav a.locked{color:var(--faint)}
.nav a.locked .ico{color:var(--faint)}

.switch button.on.ok{background:var(--ok);color:#fff}
.switch button.on.bad{background:var(--bad);color:#fff}
table.rules td{padding:8px 10px}
table.rules tr.fn td:first-child{padding-left:28px;color:var(--ink-2);font-size:13px}
.checks{display:grid;gap:6px;max-height:260px;overflow:auto;padding:4px 2px}

.usermenu.howto .pop{width:280px}
.usermenu.howto .chipbtn{min-height:0;box-shadow:none;cursor:pointer}

/* storage: a meter under each account, and the clean-up timeline */
.list button.stack-row{align-items:flex-start}
.list button.stack-row .nm{display:grid;gap:2px;white-space:normal}
.list button.stack-row .nm b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:inherit}
.meter{display:block;height:4px;border-radius:999px;background:var(--panel-2);margin-top:3px;overflow:hidden}
.meter > i{display:block;height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-2))}
.timeline{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:0}
.timeline li{position:relative;padding:0 0 12px 26px;display:grid;font-size:13.5px}
.timeline li::before{content:"";position:absolute;left:5px;top:5px;width:10px;height:10px;border-radius:999px;
  border:2px solid var(--line-2);background:var(--panel)}
.timeline li::after{content:"";position:absolute;left:10px;top:17px;bottom:-2px;width:1.5px;background:var(--line)}
.timeline li:last-child::after{display:none}
.timeline li.done::before{background:var(--brand);border-color:var(--brand)}
.timeline li span{font-size:12.5px;color:var(--muted)}

/* ── refresh + tooltips ──────────────────────────────────────────────────── */
/* Refresh sits top right on every page. It turns while it works, settles with a green tick of
   colour when done, and never reloads the whole page. */
.refresher{border-radius:999px}
.refresher .ico{transition:transform .45s cubic-bezier(.3,.7,.2,1)}
.refresher:hover .ico{transform:rotate(90deg)}
.refresher.spinning{color:var(--brand)}
.refresher.spinning .ico{animation:spin .75s cubic-bezier(.5,.15,.5,.85) infinite}
.refresher.done{color:var(--ok);background:var(--ok-soft)}
@media (prefers-reduced-motion:reduce){.refresher:hover .ico{transform:none}.refresher.spinning .ico{animation-duration:2s}}

/* One tooltip for every icon-only control: `data-tip` on the button, text under it, never cut off. */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 9px);left:50%;
  transform:translate(-50%,-4px);background:var(--ink);color:var(--bg);font-size:11.5px;font-weight:600;
  letter-spacing:.01em;line-height:1;padding:6px 9px;border-radius:7px;white-space:nowrap;
  box-shadow:var(--shadow-2);opacity:0;pointer-events:none;z-index:70;
  transition:opacity .14s ease,transform .14s ease}
[data-tip]::before{content:"";position:absolute;top:calc(100% + 4px);left:50%;width:9px;height:9px;
  background:var(--ink);transform:translate(-50%,-4px) rotate(45deg);border-radius:2px;
  opacity:0;pointer-events:none;z-index:70;transition:opacity .14s ease,transform .14s ease}
[data-tip]:hover::after,[data-tip]:focus-visible::after{opacity:1;transform:translate(-50%,0)}
[data-tip]:hover::before,[data-tip]:focus-visible::before{opacity:1;transform:translate(-50%,0) rotate(45deg)}
@media (hover:none){[data-tip]::after,[data-tip]::before{display:none}}

/* ── confirm dialog ──────────────────────────────────────────────────────── */
/* Small, tinted by what it does, and unmistakable about the button that acts. */
.modal .ttl{min-width:0}
.modal.confirm{width:min(440px,100%);border-radius:22px;overflow:hidden;border:0}
.modal.confirm > header{align-items:flex-start;border-bottom:0;padding:22px 22px 4px;background:var(--tone-soft);border-radius:0}
.modal.confirm > header h2{font-size:19px;font-weight:760;letter-spacing:-.02em}
.modal.confirm > header [data-close]{margin:-6px -8px 0 0}
.modal.confirm > .body{background:var(--tone-soft);padding:2px 22px 22px}
.modal .eyebrow{display:block;font-size:10px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;
  color:var(--tone,var(--brand));margin:0 0 7px}
.modal.confirm .confirm-msg{margin:0;color:var(--ink-2);font-size:13.5px;font-weight:560;line-height:1.6}
.modal.confirm > footer{padding:16px 22px 18px;gap:12px;border-top:1px solid var(--line);border-radius:0}
.tone-danger{--tone:var(--bad);--tone-soft:var(--bad-soft);--tone-shadow:rgba(214,31,70,.32)}
.tone-warn{--tone:var(--warn);--tone-soft:var(--warn-soft);--tone-shadow:rgba(154,98,18,.28)}
.tone-brand{--tone:var(--brand);--tone-soft:var(--brand-soft);--tone-shadow:rgba(91,91,214,.3)}
button.pill{border-radius:999px;text-transform:uppercase;letter-spacing:.09em;font-size:11.5px;font-weight:780;
  padding:9px 20px;min-height:40px;gap:8px}
button.pill:not(.solid){background:var(--panel);color:var(--ink-2)}
button.pill.solid{background:var(--tone);color:#fff;border-color:transparent;box-shadow:0 8px 20px var(--tone-shadow)}
button.pill.solid:hover{filter:brightness(1.07);background:var(--tone)}
button.pill.solid .ico{opacity:.95}
:root[data-theme="dark"] button.pill.solid{color:#0a0d16}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) button.pill.solid{color:#0a0d16}}

/* ── the menu folds to icons: << and >> ──────────────────────────────────── */
.brand .fold{margin-left:auto;flex:none;border-radius:9px;color:var(--faint)}
.brand .fold:hover{color:var(--brand);background:var(--brand-soft)}
.shell{transition:grid-template-columns .22s cubic-bezier(.3,.7,.2,1)}
.shell.collapsed{grid-template-columns:76px minmax(0,1fr)}
.shell.collapsed .side{padding:16px 10px 12px;align-items:stretch}
.shell.collapsed .brand{flex-direction:column;gap:10px;padding:2px 0 16px}
.shell.collapsed .brand .name,.shell.collapsed .nav .lbl,.shell.collapsed .nav .sep{display:none}
.shell.collapsed .brand .fold{margin:0}
.shell.collapsed .nav{gap:4px}
.shell.collapsed .nav a{justify-content:center;padding:11px 0}
.shell.collapsed .nav .sep + a,.shell.collapsed .nav a + .sep{margin-top:0}
.shell.collapsed .side .foot{padding:10px 0 0;display:flex;justify-content:center}
.shell.collapsed .side .foot a{font-size:0;gap:0}
/* folded, the tooltip sits to the RIGHT of the icon, where the label used to be */
.shell.collapsed .nav a[data-tip]::after{top:50%;left:calc(100% + 12px);transform:translate(-4px,-50%)}
.shell.collapsed .nav a[data-tip]::before{top:50%;left:calc(100% + 7px);transform:translate(-4px,-50%) rotate(45deg)}
.shell.collapsed .nav a[data-tip]:hover::after,.shell.collapsed .nav a[data-tip]:focus-visible::after{transform:translate(0,-50%)}
.shell.collapsed .nav a[data-tip]:hover::before,.shell.collapsed .nav a[data-tip]:focus-visible::before{transform:translate(0,-50%) rotate(45deg)}
.side{overflow:visible}
@media (max-width:900px){.brand .fold{display:none}.shell.collapsed{grid-template-columns:1fr}
  .shell.collapsed .nav .lbl,.shell.collapsed .brand .name{display:initial}}
@media (prefers-reduced-motion:reduce){.shell{transition:none}}