/* Snug's stylesheet. Started from docs/design/snug.css (front-end revision 2).

   Two palettes. The admin is Snug's own and borrows from the Negroni brand:
   Vermouth neutrals and text, Campari for action, Citrus and Campari for
   reading intensity, PCB for "all good". The viewer belongs to the founder,
   so it uses plain stone neutrals that any brand colour sits on.

   Light and dark come from light-dark() and color-scheme, so each token is
   written once. Every text pairing passes WCAG AA (checked by a test).
   No inline styles anywhere: the strict CSP forbids them. */

@font-face {
    font-family: 'Geist';
    src: url("../fonts/Geist-Variable.d1bac27c388f.woff2") format('woff2');
    font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Geist Mono';
    src: url("../fonts/GeistMono-Variable.3eaf074afc53.woff2") format('woff2');
    font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
    color-scheme: dark;

    /* Admin neutrals, from Vermouth. light-dark() resolves by color-scheme, set below. */
    --bg:            light-dark(#fdfbf9, #1A0B00);
    --surface:       light-dark(#ffffff, #241307);
    --tint:          light-dark(#f7efe8, #2e1b0d);
    --border:        light-dark(#ece3db, #3a2516);
    --border-strong: light-dark(#d8cabe, #553a26);
    --text:          light-dark(#1A0B00, #f6e8dc);
    --text-2:        light-dark(#6a5141, #d2b9a5);
    --text-3:        light-dark(#7a6253, #ad927e);

    /* Action and state */
    --link:      light-dark(#B24400, #FF8133);   /* Campari 500 / 200 */
    --action:    #FF6200;                        /* Campari 300, both themes */
    --on-action: #1A0B00;                        /* Vermouth 500: 6.4:1 */
    --focus:     light-dark(#B24400, #FF8133);
    --ok:        light-dark(#127D47, #1ABC6B);   /* PCB 400 / 200 */
    --ok-tint:   light-dark(rgba(18,125,71,0.07), rgba(26,188,107,0.12));  /* pale enough for --ok to pass 4.5:1 over --bg */
    --warn:      light-dark(#8a5a00, #FFAB1A);
    --warn-tint: light-dark(rgba(255,171,26,0.16), rgba(255,171,26,0.12));
    --danger:    light-dark(#a8322b, #f08a7e);
    --danger-tint: light-dark(rgba(168,50,43,0.08), rgba(240,138,126,0.12));

    /* Reading intensity: Citrus into Campari */
    --heat-0: light-dark(#f1e8e0, #2e1b0d);
    --heat-1: light-dark(#F9E1B8, #4d2c0e);
    --heat-2: light-dark(#FFAB1A, #8f4a08);
    --heat-3: light-dark(#FF6200, #d65a00);
    --heat-4: light-dark(#B24400, #FF8133);

    /* Brand chrome, from the Negroni document template */
    --chrome-1: #FF6200;  /* Campari 300 */
    --chrome-2: #FFAB1A;  /* Citrus 300 */
    --chrome-3: #169C59;  /* PCB 300 */

    /* One radius rule: 8px for everything rectangular, 4px for small inline
       labels, 2px for document pages, full round only for the theme toggle. */
    --r: 8px;
    --r-sm: 4px;

    --font: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
/* Dark is the default. Light and auto are explicit choices, saved by the toggle. */
:root:not([data-theme]), :root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="auto"]  { color-scheme: light dark; }

/* Viewer pages: neutral stone, so any founder colour sits well on them */
.v {
    --bg:            light-dark(#fafaf9, #1c1917);
    --surface:       light-dark(#ffffff, #262220);
    --tint:          light-dark(#f5f5f4, #2c2826);
    --border:        light-dark(#e7e5e4, #3a3532);
    --border-strong: light-dark(#d6d3d1, #57534e);
    --text:          light-dark(#1c1917, #f5f5f4);
    --text-2:        light-dark(#57534e, #d6d3d1);
    --text-3:        light-dark(#6b6661, #a8a29e);
    /* The founder's brand. In the product these come from /brand.css,
       chosen by the server so both pass 4.5:1. Here: a sample navy. */
    --brand:      light-dark(#1f5f8b, #4f9fd6);
    --brand-text: light-dark(#1f5f8b, #7fb8e0);
    --on-brand:   light-dark(#ffffff, #0b1a24);
    --focus:      var(--brand-text);
    /* Links on viewer pages are the founder's, not Snug's. */
    --link:       var(--brand-text);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font); font-size: 15px; line-height: 1.55; font-weight: 400;
    background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased;
    font-feature-settings: 'ss01';
}
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--mono); font-size: 0.82em; letter-spacing: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.icon { width: 1rem; height: 1rem; flex: none; }

/* ---------- Admin chrome ---------- */
.screen { min-height: 100dvh; background: var(--bg); color: var(--text); }
.chrome { height: 4px; background: var(--chrome-1); border-bottom: 2px solid var(--chrome-2); box-sizing: content-box; }
/* Investors' pages: the same band, in the founder's colour. */
.v-chrome { height: 4px; background: var(--brand); border-bottom: none; }
.admin-header { max-width: 1160px; margin: 0 auto; padding: 1.25rem 2rem 0; }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; }
.product { display: flex; align-items: center; gap: 0.6rem; font-size: 1.15rem; }
.product .name { font-weight: 600; letter-spacing: -0.01em; }
.product .company { color: var(--text-2); font-weight: 400; padding-left: 0.6rem; border-left: 1px solid var(--border-strong); }
.header-tools { display: flex; align-items: center; gap: 0.75rem; font-size: 0.85rem; color: var(--text-2); }
nav.tabs { display: flex; gap: 1.5rem; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
nav.tabs a {
    padding: 0.55rem 0; font-size: 0.9rem; color: var(--text-2); text-decoration: none; white-space: nowrap;
    border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.15s, border-color 0.15s;
}
nav.tabs a:hover { color: var(--text); }
nav.tabs a[aria-current="page"] { color: var(--text); border-bottom-color: var(--action); font-weight: 500; }

main.admin { max-width: 1160px; margin: 0 auto; padding: 1.75rem 2rem 3.5rem; }
.crumbs { font-size: 0.85rem; color: var(--text-3); margin-bottom: 0.4rem; }
.crumbs a { color: var(--text-2); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.title-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 2rem; }
h1.page-title { overflow-wrap: anywhere; font-size: 2.1rem; font-weight: 300; letter-spacing: -0.025em; line-height: 1.15; }
.page-meta { margin-top: 0.4rem; display: flex; gap: 1.25rem; flex-wrap: wrap; color: var(--text-2); font-size: 0.85rem; }
.actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; gap: 0.45rem; font: inherit; font-size: 0.875rem; font-weight: 500;
    padding: 0.5rem 0.95rem; border-radius: var(--r); cursor: pointer; text-decoration: none; white-space: nowrap;
    background: var(--surface); color: var(--text); border: 1px solid var(--border-strong);
    transition: background 0.15s, transform 0.08s;
}
.btn:hover { background: var(--tint); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--action); color: var(--on-action); border-color: var(--action); }
.btn-primary:hover { background: var(--action); filter: brightness(1.06); }
.btn-quiet { background: none; border-color: transparent; color: var(--text-2); padding-inline: 0.5rem; }
.btn-quiet:hover { background: var(--tint); color: var(--text); }
.btn-danger { color: var(--danger); }
.btn-brand { background: var(--brand); color: var(--on-brand); border-color: var(--brand); width: 100%; justify-content: center; padding: 0.7rem 1rem; font-size: 0.95rem; }
.btn-brand:hover { background: var(--brand); filter: brightness(1.08); }
.v-tools .btn-brand { width: auto; padding: 0.5rem 0.95rem; font-size: 0.875rem; }
.round-btn {
    width: 2.1rem; height: 2.1rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
    color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.round-btn:hover { background: var(--tint); color: var(--text); }

/* ---------- Stat strip: figures in plain layout, no boxes ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 2.75rem; }
.stat { padding: 1.1rem 1.25rem 1.2rem; }
.stat + .stat { border-left: 1px solid var(--border); }
.stat:first-child { padding-left: 0; }
.stat .value { font-size: 2.1rem; font-weight: 300; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat .value small { font-size: 0.55em; font-weight: 400; color: var(--text-2); letter-spacing: 0; margin-left: 0.15em; }
.stat .label { font-size: 0.85rem; color: var(--text-2); margin-top: 0.35rem; }

/* ---------- Sections ---------- */
.section { margin-bottom: 3rem; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.section-head h2 { font-size: 1.1rem; font-weight: 500; letter-spacing: -0.01em; }
.section-head p { font-size: 0.85rem; color: var(--text-2); }
/* Above a form there is no top rule for flush-right text to line up with,
   so the explanation sits under the heading, at the form's left edge. */
.section-head.stacked { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
/* A section's guide, on its own line under the heading. */
/* Flush right above a ruled list, the guide sits under the explanation, on the right too. */
.head-side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; text-align: right; }
.doc-link { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--link); }

/* ---------- Reading matrix: one aligned grid for the chart and every viewer ---------- */
.matrix { display: grid; grid-template-columns: minmax(13rem, 1.25fr) minmax(15rem, 2fr) 5rem 8rem 9rem; align-items: stretch; }
/* People: a Downloads column after Visits. A count above zero stands out. */
.matrix.with-downloads { grid-template-columns: minmax(13rem, 1.25fr) minmax(13rem, 2fr) 5rem 6.5rem 7rem 9rem; }
.matrix .downloaded { color: var(--link); font-weight: 500; }
.matrix > .row { display: contents; }
.matrix .cell { padding: 0.7rem 0; border-bottom: 1px solid var(--border); min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.matrix .cell + .cell { padding-left: 1.5rem; }
.matrix .cell.r { align-items: flex-end; }
.matrix .row:last-child .cell { border-bottom: none; }
.matrix .head .cell { font-size: 0.8rem; color: var(--text-3); padding-top: 0; padding-bottom: 0.5rem; }
.matrix .avg .cell { border-bottom-color: var(--border-strong); padding-bottom: 0.4rem; }
.matrix .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.matrix .avg .label { font-size: 0.85rem; color: var(--text-2); justify-content: flex-end; }
.matrix .head .pages-axis { display: block; }
.who .email { display: block; overflow-wrap: anywhere; }
.who .note { display: block; font-size: 0.82rem; color: var(--text-3); }
.new { font-size: 0.75rem; font-weight: 500; color: var(--link); margin-left: 0.4rem; }
/* Page numbers, drawn in the same columns as the strips (snug.analytics.charts). */
.axis { display: flex; font-family: var(--mono); font-size: 0.68rem; color: var(--text-3); }
.axis span { flex: 1 1 0; min-width: 0; text-align: center; }
.reading-empty { margin-bottom: 2.5rem; }
svg.strip, svg.bars { display: block; width: 100%; }
svg.strip { height: 16px; }
svg.bars { height: 64px; }
.h0 { fill: var(--heat-0); } .h1 { fill: var(--heat-1); } .h2 { fill: var(--heat-2); } .h3 { fill: var(--heat-3); } .h4 { fill: var(--heat-4); }
.legend { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--text-3); }
.legend svg { width: 90px; height: 10px; }
.matrix-note { font-size: 0.85rem; color: var(--text-2); margin-top: 0.9rem; }

/* ---------- Plain list rows (links) ---------- */
.rows { border-top: 1px solid var(--border); }
.rows .item { display: grid; grid-template-columns: minmax(13rem, 1.25fr) 6rem minmax(10rem, 1.2fr) 7.5rem 5.5rem; gap: 1.5rem; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid var(--border); }
.rows .r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rows .muted { color: var(--text-2); font-size: 0.875rem; }
.status { justify-self: start; font-size: 0.78rem; font-weight: 500; padding: 0.12rem 0.45rem; border-radius: var(--r-sm); }
.status-ok { color: var(--ok); background: var(--ok-tint); }
.status-warn { color: var(--warn); background: var(--warn-tint); }
.status-off { color: var(--text-2); background: var(--tint); }

/* ---------- Forms ---------- */
.form { display: grid; gap: 1.25rem; }
/* A button placed straight in a form is as wide as its label, not the form. */
.form > .btn { justify-self: start; }
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 1.5rem; }
.form.invite { max-width: 30rem; }
/* Settings forms share one width, wide enough for the NDA text at a
   comfortable line length. */
.form.settings-form { max-width: 40rem; }
.form.settings-form + .form.settings-form { margin-top: 1rem; }
.panel-title { font-size: 1rem; font-weight: 500; }
/* QR codes need dark modules on light, in either theme. */
.qr-tile { width: min(100%, 13rem); background: #fff; border-radius: var(--r); padding: 0.25rem; margin: 0.35rem 0 0.5rem; }
/* Sized by its viewBox, so it shrinks to fit a phone. */
.qr-tile svg { display: block; width: 100%; height: auto; }
.key { font-family: var(--mono); letter-spacing: 0.04em; color: var(--text); overflow-wrap: anywhere; }
/* One column when two would split a code across lines: a split code is easy to copy wrongly. */
.recovery-codes { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: 0.4rem 1rem; margin: 1.25rem 0 1.5rem; font-family: var(--mono); font-size: 0.95rem; }
.recovery-codes .code { white-space: nowrap; }
.field label, .field .label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.4rem; }
.field .hint { font-size: 0.82rem; color: var(--text-3); margin-top: 0.35rem; }
.field .error { display: flex; gap: 0.4rem; align-items: center; font-size: 0.85rem; color: var(--danger); margin-top: 0.45rem; }
input[type="text"], input[type="email"], input[type="password"], input[type="date"],
input[type="search"], input[type="url"], input[type="number"], select, textarea {
    width: 100%; font: inherit; font-size: 0.95rem; color: var(--text); background: var(--surface);
    border: 1px solid var(--border-strong); border-radius: var(--r); padding: 0.6rem 0.75rem;
}
/* Our own arrow: the browser's sits hard against the right edge and cannot be moved.
   Mid-grey, so it reads in both themes (Phosphor caret-down, MIT). */
select {
    appearance: none; padding-right: 2.4rem;
    background-image: url("../icons/caret-down.eb9b69da31de.svg"); background-repeat: no-repeat;
    background-position: right 0.85rem center; background-size: 0.85rem;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--focus); outline-offset: -1px; }
/* A password box with an eye at its right that shows or hides what is typed. */
.nda-first[hidden] { display: none; }
/* Settings: the accent colour's picker and its preview, in the viewer's palette. */
#accent-picker { width: 3rem; height: 2.4rem; padding: 0.2rem; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; }
#accent { max-width: 9rem; font-family: var(--mono); }
.brand-preview { display: grid; gap: 0.9rem; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: var(--r); background: var(--bg); color: var(--text); }
.brand-preview a { color: var(--brand-text); }
.brand-preview .btn-brand { justify-self: start; width: auto; pointer-events: none; }
/* The current logo in Settings, on the same light tile investors see in dark mode. */
.logo-current { width: fit-content; margin-bottom: 0.25rem; padding: 0.6rem 0.8rem; border: 1px solid var(--border); border-radius: var(--r); background: #fafaf9; }
.logo-current img { display: block; max-height: 3rem; max-width: 16rem; width: auto; height: auto; }
/* The tab icon investors see now, at the size a browser draws it, with what it is. */
.icon-current { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.25rem; color: var(--text-2); font-size: 0.875rem; }
.icon-current img { width: 32px; height: 32px; border-radius: 6px; }
/* Upload progress: shown by admin.js while a PDF is sent and checked. */
.upload-status { display: grid; gap: 0.4rem; font-size: 0.875rem; color: var(--text-2); }
.upload-status[hidden] { display: none; }
.upload-status progress { width: 100%; height: 0.5rem; accent-color: var(--action); }
.password-field { position: relative; }
.password-field input { padding-right: 2.9rem; }
.password-field .reveal { position: absolute; top: 50%; right: 0.4rem; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 2.3rem; height: 2.3rem; padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-2); cursor: pointer; }
.password-field .reveal[hidden] { display: none; }
.password-field .reveal:hover { color: var(--text); }
.password-field .reveal svg.icon { width: 1.15rem; height: 1.15rem; }
.password-field .when-shown, .password-field.shown .when-hidden { display: none; }
.password-field.shown .when-shown { display: block; }
input[aria-invalid="true"] { border-color: var(--danger); }
/* label.check, not .check: a tick box inside a .field must not take the
   field caption's block layout (.field label), which drops the gap. */
label.check { display: grid; grid-template-columns: 1.1rem 1fr; gap: 0.65rem; font-size: 0.92rem; font-weight: 400; margin-bottom: 0; cursor: pointer; }
.check input { margin-top: 0.22rem; accent-color: var(--action); width: 1rem; height: 1rem; }
.v .check input { accent-color: var(--brand); }
.check .hint { display: block; font-size: 0.82rem; color: var(--text-3); }
.choices { display: grid; gap: 0.85rem; }
.form-foot { display: flex; gap: 0.5rem; justify-content: flex-end; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 1.25rem; }
.split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.link-out {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; background: var(--tint); border-radius: var(--r);
    padding: 0.65rem 0.75rem 0.65rem 0.9rem; font-family: var(--mono); font-size: 0.8rem; overflow-wrap: anywhere;
}
/* The link keeps a readable width; on a narrow screen the button wraps below it. */
.link-out > span { flex: 1 1 14rem; min-width: 0; }
.link-out .btn { white-space: normal; text-align: left; }
.notice { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.9rem; padding: 0.75rem 0.9rem; border-radius: var(--r); }
.notice-ok { background: var(--ok-tint); color: var(--ok); }
.notice-warn { background: var(--warn-tint); color: var(--warn); }
/* Settings, Email: the fields for the chosen way of sending, by CSS alone. */
.provider-choice { border: 0; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.provider-fields { display: grid; gap: 1.25rem; }
/* The radios switch the fields, steps and titles for each provider, CSS alone. */
#email:has(#provider-smtp:checked) .provider-google,
#email:has(#provider-google:checked) .provider-smtp { display: none; }
/* Email set up as numbered steps, all on the page from the start, so the next
   thing to do is always in view. A hidden step is not counted, so SMTP's test
   is step 2 and Google's is step 3. */
.steps { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1rem; max-width: 40rem; counter-reset: step; }
.step { counter-increment: step; display: grid; gap: 1.25rem; scroll-margin-top: 1.5rem; }
.step-head { display: flex; align-items: center; gap: 0.75rem; }
.step-head .panel-title::before {
    content: counter(step); display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-right: 0.6rem;
    border-radius: 50%; background: var(--action); color: var(--on-action); font-size: 0.85rem; font-weight: 600;
}
/* A step waiting for the one before: its number and title step back. */
.step-waiting .panel-title,
#email:has(#provider-google:checked) .step-waiting-google .panel-title,
#email:has(#provider-smtp:checked) .step-waiting-smtp .panel-title { color: var(--text-2); }
.step-waiting .panel-title::before,
#email:has(#provider-google:checked) .step-waiting-google .panel-title::before,
#email:has(#provider-smtp:checked) .step-waiting-smtp .panel-title::before { background: var(--tint); color: var(--text-2); }
.step-action { justify-self: start; }
/* The way out of the email settings, under the choice of provider in the same panel. */
.email-clear { display: grid; gap: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
/* A saved secret shows as dots, never its value: legible enough to read as filled in. */
input[type="password"]::placeholder { color: var(--text-2); opacity: 1; letter-spacing: 0.12em; }
#email code { font-family: var(--mono); font-size: 0.85em; overflow-wrap: anywhere; }
#google-mailbox form { margin: 0; }
/* The Overview's status line: problems from the snug doctor checks, or a quiet all-clear. */
.system-status { margin-bottom: 1.5rem; }
.system-status > svg { flex: none; margin-top: 0.15rem; }
.system-problems { list-style: none; display: grid; gap: 0.35rem; margin-bottom: 0.5rem; }
.system-status code { font-family: var(--mono); font-size: 0.85em; }
.system-status-ok { display: flex; gap: 0.45rem; align-items: center; font-size: 0.875rem; color: var(--text-2); }
.system-status-ok > svg { color: var(--ok); }
.side-note { font-size: 0.9rem; color: var(--text-2); }
.side-note h2 { font-size: 1rem; font-weight: 500; color: var(--text); margin-bottom: 0.75rem; }

/* ---------- Admin footer ---------- */
footer.admin-foot { max-width: 1160px; margin: 0 auto; padding: 0 2rem 2rem; font-size: 0.8rem; color: var(--text-3); }
footer.admin-foot .rule { height: 2px; background: var(--chrome-3); margin-bottom: 0.9rem; width: 3rem; }
footer.admin-foot .row { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
footer.admin-foot a { color: var(--text-3); }
/* As in the mini apps: GitHub's mark beside owner/repo, quieter than the text. */
footer.admin-foot .source-link { display: inline-flex; align-items: center; gap: 0.4rem; text-decoration: none; }
footer.admin-foot .source-link:hover { color: var(--text-2); }
footer.admin-foot .github-mark { width: 0.95rem; height: 0.95rem; opacity: 0.6; }
footer.admin-foot .source-link:hover .github-mark { opacity: 0.9; }

/* ---------- Viewer ---------- */
.v-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 1080px; margin: 0 auto; padding: 1.25rem 1.5rem; }
.founder-logo { display: flex; align-items: center; gap: 0.6rem; min-width: 0; font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; }
.founder-logo svg { width: 1.7rem; height: 1.7rem; }
.founder-logo .mark { fill: var(--brand); }
.founder-name { overflow-wrap: anywhere; }
/* The founder's own logo. In dark mode it sits on a light tile, since most
   logos are drawn for a light page; the tile matches the page in light mode. */
.founder-logo-image { display: block; width: auto; height: auto; max-height: 3rem; max-width: min(16rem, 55vw); padding: 0.35rem 0.5rem; margin: -0.35rem 0.25rem -0.35rem -0.5rem; border-radius: var(--r-sm); background: light-dark(transparent, #fafaf9); }
.v-head .doc { font-size: 0.875rem; color: var(--text-2); }
.v-tools { display: flex; align-items: center; gap: 1rem; }
.v-main { max-width: 1080px; margin: 0 auto; padding: 0 1.5rem 3rem; }
.gate-grid { display: grid; grid-template-columns: minmax(0, 27rem) minmax(0, 22rem); justify-content: space-between; gap: 3rem; margin-top: 3rem; }
.gate h1 { text-wrap: balance; font-size: 1.65rem; font-weight: 400; letter-spacing: -0.02em; line-height: 1.25; margin-bottom: 0.6rem; }
.gate h1 strong { font-weight: 600; }
.gate .lede { color: var(--text-2); margin-bottom: 1.75rem; }
/* A spreadsheet's card, and its admin page: the sheets, then the download. */
.sheets-title { font-size: 0.85rem; font-weight: 500; color: var(--text-2); margin-bottom: 0.5rem; }
.sheet-list { list-style: none; padding: 0; margin: 0 0 1.75rem; display: grid; gap: 0.35rem; max-width: 27rem; }
.sheet-list li { padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: var(--r-sm); overflow-wrap: anywhere; }
.gate.workbook .hint { font-size: 0.82rem; color: var(--text-3); margin-top: 0.75rem; }
.gate.workbook .description { margin-bottom: 1.75rem; overflow-wrap: anywhere; }
#description .notice { margin-bottom: 0.75rem; }
.gate .small { font-size: 0.85rem; color: var(--text-3); margin-top: 1.1rem; }
.gate .small a { color: var(--brand-text); }
.gate + .gate { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--border); }
/* A form button that reads as a link, for "send a new code". */
.linkish { font: inherit; color: var(--brand-text); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 0.15em; }
.gate .resend .btn { width: auto; }
input.code { font-family: var(--mono); font-size: 1.5rem; letter-spacing: 0.45em; padding: 0.6rem 0.4rem 0.6rem 0.85rem; text-align: center; }
/* A code beside other fields: monospaced, but the same height as they are. */
input.code-field { font-family: var(--mono); letter-spacing: 0.15em; }
.about { border: 1px solid var(--border); border-radius: var(--r); padding: 1.25rem 1.35rem; font-size: 0.9rem; align-self: start; background: var(--surface); }
.about h2 { font-size: 0.95rem; font-weight: 500; margin-bottom: 0.9rem; }
.about .cover { margin-bottom: 1rem; padding-left: 0.85rem; border-left: 2px solid var(--border); color: var(--text); overflow-wrap: anywhere; }
.about dl { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1rem; }
.about dt { color: var(--text-3); }
.about dd { color: var(--text); }
.about .cover { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--border); color: var(--text); }
.about .cover .from { display: block; margin-top: 0.4rem; color: var(--text-3); font-size: 0.85rem; }
.about .privacy { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--border); color: var(--text-2); font-size: 0.85rem; }

.reader { display: grid; gap: 1.1rem; justify-items: center; }
/* A video, with the viewer's watermark drawn over it: a deterrent, like the
   page watermark, though the browser's tools could hide it. The frame, not
   the bare video, goes full screen, so the mark goes with it. */
.player { display: grid; gap: 1.1rem; justify-items: center; }
/* Below the page or the video, where it moves nothing the reader is looking at. */
.reader > .about, .player > .about { width: 100%; max-width: 32rem; margin-top: 1.5rem; }
.video-frame { position: relative; width: 100%; border-radius: 2px; overflow: hidden; border: 1px solid var(--border); background: #000000; }
.video-frame video { display: block; width: 100%; height: auto; max-height: 80vh; }
.video-frame:fullscreen video { max-height: none; height: 100%; }
.video-mark { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; overflow: hidden; }
.video-mark span { transform: rotate(-22deg); color: rgba(255, 255, 255, 0.28); font-size: clamp(0.9rem, 2.4vw, 1.6rem); font-weight: 500; white-space: nowrap; text-shadow: 0 0 2px rgba(0, 0, 0, 0.35); }
.video-fullscreen { position: absolute; top: 0.6rem; right: 0.6rem; }
.page-frame { width: 100%; border-radius: 2px; overflow: hidden; border: 1px solid var(--border); background: #ffffff;
    box-shadow: 0 1px 2px light-dark(rgba(28,25,23,0.05), rgba(0,0,0,0.3)), 0 12px 32px light-dark(rgba(28,25,23,0.07), rgba(0,0,0,0.35)); }
.page-frame svg { display: block; width: 100%; height: auto; }
.page-frame img { display: block; width: 100%; height: auto; }
.reader-controls .btn[aria-disabled="true"] { opacity: 0.45; cursor: default; }
/* Disabled controls look disabled, so a box that will not tick never looks broken.
   The hint beside it says why, and stays readable. */
.check:has(input:disabled) { cursor: not-allowed; }
.check:has(input:disabled) > span { color: var(--text-3); }
.check input:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.reader-controls .jump { display: flex; gap: 0.4rem; }
.nda-text { max-height: 22rem; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); padding: 1rem 1.15rem; margin-bottom: 1.5rem; font-size: 0.9rem; line-height: 1.6; }
.nda-text p + p { margin-top: 0.75rem; }
.gate .small { margin: 0.25rem 0 1.25rem; }
.room-index h2 { font-size: 0.95rem; font-weight: 500; margin: 1.75rem 0 0.5rem; color: var(--text-2); }
.room-documents { list-style: none; border-top: 1px solid var(--border); }
.room-documents li { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0.75rem 0; border-bottom: 1px solid var(--border); }
.room-documents a { color: var(--text); font-weight: 500; text-decoration: none; }
.room-documents a:hover { text-decoration: underline; }
.room-documents .meta { color: var(--text-3); font-size: 0.85rem; }
.reader-note { max-width: 40rem; text-align: center; font-size: 0.8rem; color: var(--text-3); }
.reader-controls { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; justify-content: center; color: var(--text-2); font-size: 0.9rem; }
.reader-controls .pos { min-width: 6.5rem; text-align: center; font-family: var(--mono); font-size: 0.85rem; }
.reader-controls select { width: auto; padding: 0.5rem 2.2rem 0.5rem 0.8rem; font-size: 0.875rem; background-position: right 0.75rem center; }
.v-foot { text-align: center; font-size: 0.8rem; color: var(--text-3); padding: 0 1.5rem 2rem; }

/* Stand-in slide artwork (in the product: a rendered PDF page image) */
.slide-bg { fill: #ffffff; }
.slide-kicker { fill: #1f5f8b; font: 600 20px var(--font); letter-spacing: 3px; }
.slide-title { fill: #10283a; font: 600 54px var(--font); letter-spacing: -1px; }
.slide-body { fill: #3d4a55; font: 400 26px var(--font); }
.slide-axis { fill: #6b7a86; font: 400 18px var(--font); }
.slide-bar { fill: #1f5f8b; } .slide-bar-2 { fill: #8fb3cc; }
.wm-text { fill: #1c1917; opacity: 0.07; font: 500 26px var(--font); }
.wm-foot-bg { fill: #f5f5f4; }
.wm-foot { fill: #57534e; font: 400 17px var(--mono); }

/* ---------- Motion: static by design, and respectful ---------- */
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .btn:active { transform: none; } }

/* ---------- Narrow screens: explicit collapse ---------- */
@media (max-width: 860px) {
    .split, .gate-grid { grid-template-columns: 1fr; }
    .matrix { grid-template-columns: auto 1fr; }
    .matrix .head { display: none; }
    .matrix .cell + .cell { padding-left: 0; }
    .matrix .row > .cell { border-bottom: none; padding: 0.15rem 0; }
    .matrix .row > .who { grid-column: 1 / -1; padding-top: 0.9rem; border-top: 1px solid var(--border); }
    .matrix .row > .strip-cell { grid-column: 1 / -1; padding: 0.4rem 0; }
    .matrix .row > .r { flex-direction: row; justify-content: flex-start; align-items: baseline; white-space: pre; padding-bottom: 0.9rem; font-size: 0.85rem; color: var(--text-2); }
    .matrix .row > .r.first { padding-right: 1rem; }
    .matrix .r.first .visually-hidden { position: static; width: auto; height: auto; clip: auto; overflow: visible; margin-left: 0.3em; }
    /* People: visits, downloads and time on one line, each count labelled. */
    .matrix.with-downloads { grid-template-columns: auto auto 1fr; }
    .matrix .row > .r.count { padding-right: 1rem; }
    .matrix .r.count .visually-hidden { position: static; width: auto; height: auto; clip: auto; overflow: visible; margin-left: 0.3em; }
    .matrix .row > .last { display: none; }
    .matrix .avg > .label { grid-column: 1 / -1; border-top: none; padding-top: 0; }
    .matrix .avg > .r { display: none; }
    .rows .item { grid-template-columns: 1fr auto; gap: 0.35rem 1rem; }
    .rows .item > .muted, .rows .item > .exp { display: none; }
}
@media (max-width: 640px) {
    .head-side { align-items: flex-start; text-align: left; }
    .admin-header, main.admin, footer.admin-foot { padding-left: 1rem; padding-right: 1rem; }
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat:nth-child(3) { border-left: none; padding-left: 0; }
    .stat:nth-child(n+3) { border-top: 1px solid var(--border); }
    .stat .value { font-size: 1.7rem; }
    h1.page-title { font-size: 1.75rem; }
    .header-tools .who-am-i { display: none; }
    .v-head, .v-main { padding-left: 1rem; padding-right: 1rem; }
    .v-head .doc { display: none; }
    /* Previous, the position and Next stay on one row; the picker goes below. */
    .reader-controls { gap: 0.5rem; }
    .reader-controls .jump { flex-basis: 100%; justify-content: center; }
    .gate-grid { margin-top: 1.5rem; }
}

/* ---------- Brand lockup: a square Campari tile, as the Negroni site does it ---------- */
.brand { display: inline-flex; align-items: center; gap: 0.65rem; color: var(--text); text-decoration: none; }
.brand-tile { width: 2.5rem; height: 2.5rem; display: block; flex: none; color: #FFE2CE; }
.brand-tile .tile { fill: #FF6200; }

/* ---------- Theme toggle: dark, light, auto ---------- */
.theme-toggle {
    display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0;
    border: 1px solid var(--border-strong); border-radius: 999px; background: none; color: var(--text-2);
    cursor: pointer; transition: color 0.15s, border-color 0.15s;
}
.theme-toggle:hover { color: var(--text); border-color: var(--text-3); }
.theme-toggle svg { width: 16px; height: 16px; display: none; }
:root:not([data-theme]) .theme-toggle .moon, :root[data-theme="dark"] .theme-toggle .moon,
:root[data-theme="light"] .theme-toggle .sun, :root[data-theme="auto"] .theme-toggle .auto { display: block; }

/* ---------- Sign-in pages ---------- */
.auth { min-height: 100dvh; display: grid; grid-template-rows: auto auto 1fr auto; }
.auth-head { display: flex; justify-content: space-between; align-items: center; max-width: 1160px; width: 100%; margin: 0 auto; padding: 1.25rem 2rem; }
.auth-main { display: grid; place-items: start center; padding: 3rem 1rem; }
.auth .admin-foot { width: 100%; }
.auth-card { width: 100%; max-width: 24rem; }
.auth-card h1 { font-size: 1.75rem; font-weight: 300; letter-spacing: -0.02em; margin-bottom: 0.4rem; text-wrap: balance; }
.auth-card .lede { color: var(--text-2); margin-bottom: 1.75rem; }
/* Sign-in: which company's Snug this is, under the heading. */
.auth-card .auth-company { font-size: 1.1rem; font-weight: 500; margin-bottom: 0.35rem; overflow-wrap: anywhere; }
.auth-card .btn-primary { width: 100%; justify-content: center; padding: 0.65rem 1rem; font-size: 0.95rem; }
.auth-card .alt { font-size: 0.875rem; color: var(--text-2); margin-top: 1.25rem; }
.notice-error { display: flex; gap: 0.5rem; align-items: flex-start; background: var(--danger-tint); color: var(--danger); }
.empty { border: 1px dashed var(--border-strong); border-radius: var(--r); padding: 2.5rem 1.5rem; text-align: center; color: var(--text-2); }
.empty h2 { color: var(--text); font-size: 1.1rem; font-weight: 500; margin-bottom: 0.35rem; }
form.inline { display: inline; }

/* ---------- Documents ---------- */
.doc-rows .item, .version-rows .item { grid-template-columns: minmax(14rem, 1.6fr) 7rem 7rem 8rem; }
/* One grid for the whole list, shared by every row through subgrid: a row
   without buttons (your own) keeps its status and date under the others. */
.admin-rows { display: grid; grid-template-columns: minmax(14rem, 1.6fr) 6rem 11rem minmax(12rem, auto); column-gap: 1.5rem; }
.admin-rows .item { grid-column: 1 / -1; grid-template-columns: subgrid; }
/* Inviting an admin: a row at the foot of the admins list, not a panel. The
   hint and any error sit on their own line, so the fields stay level. */
.admin-invite { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: 0.75rem 1rem; align-items: end; padding: 1.25rem 0; border-bottom: 1px solid var(--border); }
.admin-invite .invite-title { grid-column: 1 / -1; font-size: 0.95rem; font-weight: 500; }
.admin-invite .invite-wide { grid-column: 1 / -1; }
.admin-invite > .btn { min-height: 2.8rem; }  /* level with the inputs */
.admin-invite .field .hint, .admin-invite .field .error { margin-top: 0; }
.admin-invite-off { padding: 1.25rem 0; color: var(--text-2); border-bottom: 1px solid var(--border); }
.audit-rows .item { grid-template-columns: 10rem minmax(14rem, 1.4fr) minmax(10rem, 1.6fr) 8rem; }
.audit-rows .details { overflow-wrap: anywhere; font-size: 0.8rem; }
.filters { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.filters select, .filters input { width: auto; }
.pager { display: flex; gap: 1rem; align-items: center; justify-content: center; margin-top: 1.5rem; }
.activity-rows .item { grid-template-columns: minmax(14rem, 1.3fr) minmax(12rem, 1.5fr) 6.5rem 7rem; }
.what .note { display: block; font-size: 0.82rem; color: var(--text-3); }
/* One grid for the list, shared by every row (subgrid), so rows line up whatever they hold. */
.room-rows { display: grid; grid-template-columns: minmax(14rem, 1.6fr) minmax(12rem, 1fr) auto; column-gap: 1.5rem; }
.room-rows .item { grid-column: 1 / -1; grid-template-columns: subgrid; }
@media (max-width: 860px) {
    /* After the desktop columns above, which would otherwise win: who, then what. */
    .activity-rows .item { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
}
.inline-form { display: flex; gap: 0.4rem; align-items: center; }
.inline-form select { width: auto; }
.inline-form input[type="number"] { width: 6rem; }
/* A label, a box and the rest of the sentence on one line, wrapping on a phone. */
.inline-form.sentence { flex-wrap: wrap; column-gap: 0.6rem; }
.inline-form.sentence label { margin-bottom: 0; }
.inline-form.sentence span { font-size: 0.875rem; font-weight: 500; }
.form.retention { margin-top: 1rem; }
.folder { margin-top: 1.5rem; }
.folder h3 { font-size: 0.95rem; font-weight: 500; }
.version-rows { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(8rem, auto) 10rem; column-gap: 1.5rem; }
.version-rows .item { grid-column: 1 / -1; grid-template-columns: subgrid; }
.doc-rows a.email { color: var(--text); text-decoration: none; font-weight: 500; }
.doc-rows a.email:hover { text-decoration: underline; }
.empty .empty-action { margin-top: 1.25rem; }
.empty .empty-action .btn { width: auto; }
.narrow-form { max-width: 34rem; }
input[type="file"] {
    width: 100%; font: inherit; font-size: 0.9rem; color: var(--text-2); padding: 0.55rem;
    border: 1px dashed var(--border-strong); border-radius: var(--r); background: var(--tint);
}
input[type="file"]::file-selector-button {
    font: inherit; font-size: 0.85rem; font-weight: 500; margin-right: 0.75rem; padding: 0.4rem 0.8rem;
    border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--surface); color: var(--text); cursor: pointer;
}
.doc-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; }
/* The room page's four tools, two by two, so neither column runs on alone. */
.room-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
/* Both panels in a row share its height, with their buttons along the bottom. */
.room-tools > .section { display: flex; flex-direction: column; }
.room-tools > .section > .panel { flex: 1 1 auto; }
.room-tools .panel.form { display: flex; flex-direction: column; gap: 1.25rem; }
.room-tools .form-foot { margin-top: auto; }
.preview-frame { border: 1px solid var(--border); border-radius: 2px; overflow: hidden; background: #ffffff; }
.preview-frame img { display: block; width: 100%; height: auto; }
@media (max-width: 860px) {
    .doc-split, .room-tools { grid-template-columns: 1fr; }
    .version-rows { display: block; }
    .doc-rows .item, .version-rows .item { grid-template-columns: 1fr auto; }
    .admin-rows { display: block; }
    .admin-rows .item { grid-template-columns: 1fr auto; }
    .admin-invite { grid-template-columns: 1fr; align-items: stretch; }
    .admin-invite .btn { justify-self: start; }
    .admin-rows .item > .num { display: none; }
    .doc-rows .item > .muted:not(.r) { display: none; }
}

/* ---------- Links ---------- */
/* Shared columns: a revoked link, with no buttons, lines up with the rest. */
.link-rows { display: grid; grid-template-columns: minmax(12rem, 1.4fr) 5.5rem minmax(9rem, 1fr) 7rem auto; column-gap: 1.5rem; }
.link-rows .item { grid-column: 1 / -1; grid-template-columns: subgrid; }
.link-actions { display: flex; gap: 0.25rem; justify-content: flex-end; }
.empty-line { color: var(--text-2); font-size: 0.9rem; padding: 0.9rem 0; border-bottom: 1px solid var(--border); }
.form-foot.left { justify-content: flex-start; border-top: none; padding-top: 0; }
@media (max-width: 860px) {
    .link-rows { display: block; }
    .link-rows .item { grid-template-columns: 1fr auto; }
    .link-rows .item > .muted { display: none; }
    .link-actions { grid-column: 1 / -1; justify-content: flex-start; }
}