/* SP32 panel: the Organic redesign, carrying the SP32DMA brand palette.
 *
 * Structure, spacing, radii, typography and components come from the design
 * handoff. The color tokens do
 * not: they are sampled from the product logo rather than taken from the design
 * system's cream-and-terracotta.
 *
 * The accent is #0082fb, read straight out of the product logo: the
 * electric blue of the SP32 mark, not an approximation of it. The ground is
 * pure black to match the logo's own, and the greys above it carry the same
 * 209° hue at very low saturation so the whole surface reads as one family
 * instead of blue sitting on neutral-warm gray.
 *
 * Deliberate departures from the handoff, both for legibility rather than taste:
 *
 *  1. Dark is the only theme. The handoff ships light-by-default with an opt-in
 *     [data-theme="dark"]; this panel has always been dark and a toggle would be
 *     a feature nobody asked for. The palette sits directly in :root.
 *
 *  2. Three status colors, not two. The handoff folds "danger" into the accent
 *     ("the system has two voices and adding a third would break it"). That is
 *     right for a marketing surface and wrong for a table where every row is a
 *     row in one of three states. The worst of those rendering in the
 *     same blue as the primary action loses the one distinction the table
 *     exists to make. So .pill-bad / .btn-danger keep this theme's red and
 *     .pill-warn keeps its amber.
 *
 *  3. One typeface, self-hosted. The handoff pairs Caprasimo with Figtree and
 *     @imports both from Google. Caprasimo is a 70s display serif and reads as
 *     a different brand next to the SP32DMA mark, so headings are just Figtree
 *     at 700. Self-hosting keeps every page view off a third
 *     party's logs, which is worth more than the convenience.
 */

@font-face {
    font-family: "Figtree";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("fonts/figtree-var.woff2") format("woff2");
}

:root {
    /* ground and ink: black like the logo's own, then cool greys on the
       accent's 209° hue so nothing on the page reads as a different family */
    --color-bg:      #000000;
    --color-surface: #0c0e10;
    --color-text:    #e6e7e7;
    --color-divider: #1d2328;

    /* primary accent ramp, built from the logo blue. On a dark ground the ramp
       runs light, so 600/700/800 are progressively lighter, not darker, and
       stay legible on tinted fills */
    --color-accent:     #0082fb;
    --color-accent-600: #339dff;
    --color-accent-700: #6bb8ff;
    --color-accent-800: #a3d3ff;
    --color-accent-100: #0b1e30;

    /* second accent, used for "good" states */
    --color-accent-2:     #3fb950;
    --color-accent-2-100: #0d2115;
    --color-accent-2-800: #86e39a;

    /* neutral ramp */
    --color-neutral-100: #121619;
    --color-neutral-800: #c4c9cf;

    /* status, kept distinct, see note 2 at the top */
    --color-warn:     #d29922;
    --color-warn-100: #241c0b;
    --color-warn-800: #e9c46a;
    --color-bad:      #f85149;
    --color-bad-100:  #2a1312;
    --color-bad-800:  #ff9d97;

    /* headings are the body face at its heavy weight; see the note up top */
    --font-heading: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

    --space-1: 4.4px;
    --space-2: 8.8px;
    --space-3: 13.2px;
    --space-4: 17.6px;
    --space-6: 26.4px;
    --space-8: 35.2px;

    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 28px;
    --radius-pill: 999px;

    /* a black shadow all but vanishes on a near-black ground, so elevation is
       carried by the surface step with only a faint shadow to seat it */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .55);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, .6);
    --shadow-lg: 0 14px 38px rgba(0, 0, 0, .65);

    --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Consolas, monospace;

    /* aliases: a few colors are set inline via style attributes */
    --bg: var(--color-bg);
    --surface: var(--color-surface);
    --surface-2: var(--color-neutral-100);
    --border: var(--color-divider);
    --border-hi: #2b3239;
    --text: var(--color-text);
    --muted: #8d959e;
    --faint: #5c6670;
    --accent: var(--color-accent);
    --radius: var(--radius-md);
    --gap: var(--space-4);
    --sans: var(--font-body);
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

body.sp32 {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font: 15px/1.55 var(--font-body);
    -webkit-font-smoothing: antialiased;
}

body.sp32 h1, body.sp32 h2, body.sp32 h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.12;
}

a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent-800); text-decoration: underline; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* ---- shell --------------------------------------------------------------
 * A left rail plus a page. .masthead and .mainnav are emitted as siblings,
 * so the body is the grid and they are placed into column one.
 */

body.sp32 {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    min-height: 100vh;
}

.masthead {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-3) var(--space-3);
    background: var(--color-surface);
    box-shadow: inset 0 -1px var(--color-divider);
}

.masthead .wordmark {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 0.02em;
    font-size: 18px;
    color: var(--color-text);
    padding-left: var(--space-2);
}
/* The product badge, not a drawn initial. It ships cut out, so it sits on the
   rail's surface color without a plate behind it. */
.masthead .wordmark::before {
    content: "";
    width: 30px;
    height: 30px;
    flex: none;
    background: url("brand-mark.webp?v=2") center / contain no-repeat;
}
.masthead .wordmark:hover { text-decoration: none; }

/* Identity sits under the wordmark, inside the 236px rail, so it stacks:
 * the account on one line, its three links on the next. Laid out as a flow
 * rather than one wrapping row, which breaks mid-phrase at this width. */
.masthead .who {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 13px;
    color: var(--muted);
    padding: 0 var(--space-2);
    max-width: 100%;
}
.masthead .who-id {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.masthead .who-id strong {
    color: var(--color-text);
    font-weight: 600;
    font-size: 13.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.masthead .who-app {
    font-size: 12px;
    color: var(--faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.masthead .who-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
}
.masthead .who-links a {
    margin: 0;
    font-size: 12px;
    color: var(--muted);
}
.masthead .who-links a:hover { color: var(--color-accent-700); }

.mainnav {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-2) var(--space-3) var(--space-6);
    background: var(--color-surface);
    align-content: start;
}

.mainnav a {
    padding: 8px 13px;
    border-radius: var(--radius-pill);
    font-size: 13.5px;
    color: color-mix(in srgb, var(--color-text) 72%, transparent);
    white-space: nowrap;
}
.mainnav a:hover {
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-text) 8%, transparent);
    text-decoration: none;
}
.mainnav a.on {
    color: var(--color-bg);
    background: var(--color-accent);
}
.mainnav a.on:hover { background: var(--color-accent-600); color: var(--color-bg); }

/* Count on a nav item, for a number of items waiting behind it. Sits inline so
   it follows the label on the narrow horizontal rail too. */
.mainnav .navcount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: 7px;
    padding: 0 5px;
    border-radius: var(--radius-pill);
    background: var(--color-bad);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
.mainnav a.on .navcount { background: var(--color-bg); color: var(--color-accent); }

/* Fills whatever the rail leaves, with no width cap. The old 1200px cap is a
 * measure for prose, and every page here is a wide table: it left empty ground
 * on the right while the grid overflowed into a scrollbar. Anything that wants
 * a measure sets its own (.page-sub, .signin-card). min-width: 0 stops a wide
 * table pushing the grid track past the viewport. */
.page {
    grid-column: 2;
    grid-row: 1 / -1;
    min-width: 0;
    margin: 0;
    padding: var(--space-8) var(--space-8) 80px;
}

/* ---- page header ------------------------------------------------------- */

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: 6px;
}
.page-head h1 { margin: 0; font-size: 34px; }
.page-head .count { font-size: 13px; color: var(--muted); }
.page-sub {
    margin: 0 0 var(--space-6);
    max-width: 58ch;
    font-size: 14px;
    color: color-mix(in srgb, var(--color-text) 70%, transparent);
    text-wrap: pretty;
}

/* ---- panels ------------------------------------------------------------ */

.panel {
    background: var(--color-surface);
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-4);
}
.panel > h2 {
    margin: 0;
    padding: var(--space-4) var(--space-6) var(--space-2);
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 700;
    color: var(--color-text);
    border: 0;
}
.panel-body { padding: var(--space-4) var(--space-6) var(--space-6); }

details.panel > summary {
    padding: var(--space-4) var(--space-6);
    font-family: var(--font-heading);
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    cursor: pointer;
    list-style: none;
    user-select: none;
    border-radius: var(--radius-lg);
}
details.panel > summary::-webkit-details-marker { display: none; }
details.panel > summary::before { content: "\25B8  "; color: var(--color-accent); }
details.panel[open] > summary::before { content: "\25BE  "; }
details.panel[open] > summary {
    border-bottom: 1px solid var(--color-divider);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
details.panel > summary:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }

/* ---- forms ------------------------------------------------------------- */

.fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: var(--space-3);
    align-items: end;
}
.field label,
.field > label {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
input[type=text], input[type=number], input[type=password], input[type=email],
input[type=url], input[type=date], input[type=datetime-local], select, textarea,
.input {
    width: 100%;
    min-height: 38px;
    padding: 7px 14px;
    background: var(--color-bg);
    color: var(--color-text);
    caret-color: var(--color-accent);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-pill);
    font: inherit;
    font-size: 14px;
}
textarea, textarea.input {
    border-radius: var(--radius-md);
    min-height: 90px;
    resize: vertical;
}
input:hover, select:hover, textarea:hover { border-color: var(--border-hi); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
    border-color: var(--color-accent);
    outline-offset: 0;
}
/* A file picker is a button plus a filename, so it gets no field of its own --
   the button half is dressed as a .btn and the name sits beside it. Left
   unstyled it renders as the browser's stock light-gray control, which is the
   one thing on the page that would not belong to this design. */
input[type=file] {
    font: inherit;
    font-size: 13px;
    color: var(--muted);
    max-width: 100%;
}
input[type=file]::file-selector-button {
    margin-right: 10px;
    padding: 9px 18px;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}
input[type=file]::file-selector-button:hover {
    border-color: var(--border-hi);
    background: color-mix(in srgb, var(--color-text) 8%, transparent);
}
input[type=file]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

input[type=checkbox] {
    accent-color: var(--color-accent);
    width: 17px;
    height: 17px;
    margin-right: 8px;
}
.check {
    display: inline-flex;
    align-items: center;
    font-size: 13.5px;
    color: color-mix(in srgb, var(--color-text) 75%, transparent);
    cursor: pointer;
}
input[readonly] { opacity: .65; }
:disabled { opacity: .45; cursor: not-allowed; }

/* ---- buttons ----------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 18px;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}
.btn:hover {
    background: color-mix(in srgb, var(--color-text) 8%, transparent);
    text-decoration: none;
}
.btn:active { background: color-mix(in srgb, var(--color-text) 15%, transparent); }

.btn-primary {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-bg);
}
.btn-primary:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); color: var(--color-bg); }
.btn-primary:active { background: var(--color-accent-700); border-color: var(--color-accent-700); }

/* the handoff's neutral second action; identical to .btn here but kept so the
   design's markup drops in unchanged */
.btn-secondary { background: transparent; }

.btn-danger {
    color: var(--color-bad-800);
    border-color: color-mix(in srgb, var(--color-bad) 45%, transparent);
}
.btn-danger:hover {
    background: var(--color-bad-100);
    color: var(--color-bad-800);
    border-color: var(--color-bad);
}

.btn-sm { padding: 5px 12px; font-size: 12px; }
.btn-block { width: 100%; }

.actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

/* ---- filter strip ------------------------------------------------------ */

.filters {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}
.filters .tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.filters .tabs a {
    padding: 7px 15px;
    font-size: 13px;
    color: color-mix(in srgb, var(--color-text) 72%, transparent);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-pill);
}
.filters .tabs a:hover {
    color: var(--color-text);
    background: color-mix(in srgb, var(--color-text) 8%, transparent);
    text-decoration: none;
}
.filters .tabs a.on {
    color: var(--color-accent-800);
    background: var(--color-accent-100);
    border-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
}
.filters form { display: flex; gap: var(--space-2); margin-left: auto; }
.filters input[type=text] { width: 236px; }

/* ---- table ------------------------------------------------------------- */

.grid-wrap {
    border: 0;
    border-radius: var(--radius-lg);
    overflow-x: auto;
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}
table.grid { width: 100%; border-collapse: collapse; font-size: 14px; }
table.grid th {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
    border-bottom: 1px solid var(--color-divider);
    white-space: nowrap;
}
table.grid td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-divider);
    vertical-align: middle;
}
table.grid tr:last-child td { border-bottom: none; }
table.grid tbody tr:hover { background: color-mix(in srgb, var(--color-text) 5%, transparent); }
table.grid td.mono, .mono { font-family: var(--mono); font-size: 12.5px; }
table.grid td.mono { white-space: nowrap; }
/* a date is one token; left to wrap, a tight column breaks it over four lines */
table.grid td.when { white-space: nowrap; }
table.grid td.row-actions { text-align: right; white-space: nowrap; padding-block: var(--space-2); }
table.grid td.row-actions form { display: inline; }
table.grid td.row-actions .btn-sm + .btn-sm,
table.grid td.row-actions form + form { margin-left: 6px; }

.empty { padding: var(--space-8) var(--space-4); text-align: center; color: var(--muted); }

/* ---- record detail ------------------------------------------------------
 * Label/value pairs for one record, where .grid would be a table of one row.
 * Labels reuse the grid's header treatment; values wrap rather than widen, so
 * a 2000-character HWID cannot blow out the column.
 */

.kv {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--space-4) var(--space-6);
    margin: 0;
}
.kv > div { min-width: 0; }
.kv dt {
    margin: 0 0 4px;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
}
.kv dd {
    margin: 0;
    font-size: 14px;
    overflow-wrap: anywhere;
}
.kv dd.mono { font-family: var(--mono); font-size: 12.5px; }
.kv dd.when { white-space: nowrap; }

/* ---- status ------------------------------------------------------------ */

.pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: calc(var(--radius-md) * 0.75);
    font-size: 11px;
    letter-spacing: .02em;
    border: 0;
    background: var(--color-neutral-100);
    color: var(--color-neutral-800);
}
.pill-ok   { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.pill-warn { background: var(--color-warn-100);     color: var(--color-warn-800); }
.pill-bad  { background: var(--color-bad-100);      color: var(--color-bad-800); }

/* ---- pagination -------------------------------------------------------- */

.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-3);
    padding: 0 var(--space-4);
    font-size: 13px;
    color: var(--muted);
}
.pager .links { display: flex; align-items: center; gap: 6px; }
.pager .links a {
    padding: 5px 12px;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-pill);
}
.pager .links span { padding: 5px 12px; opacity: .6; }

/* ---- misc -------------------------------------------------------------- */

.notice {
    padding: var(--space-4) var(--space-6);
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--color-accent-100);
    color: var(--color-accent-800);
    font-size: 13.5px;
    margin-bottom: var(--space-4);
}
.notice strong { font-weight: 600; }
.notice code, .keylist {
    font-family: var(--mono);
    font-size: 12.5px;
    color: var(--color-text);
}
.keylist {
    max-height: 220px;
    overflow: auto;
    margin-top: var(--space-2);
    padding: var(--space-3);
    background: var(--color-bg);
    border: 0;
    border-radius: var(--radius-md);
    white-space: pre-wrap;
    word-break: break-all;
}

.tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 11.5px;
    background: var(--color-neutral-100);
    color: var(--color-neutral-800);
}
.tag-accent   { background: var(--color-accent-100);   color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-outline  { background: transparent; border: 1px solid var(--color-divider); color: var(--muted); }

/* the dashed footer strip used for secondary actions */
.sp-bulk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-8);
    padding: var(--space-4) var(--space-6);
    border-radius: var(--radius-lg);
    border: 1px dashed var(--color-divider);
}
.sp-bulk > :first-child { flex: 1 1 280px; }
.sp-bulk h3 {
    margin: 0 0 2px;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
}
.sp-bulk p { margin: 0; font-size: 13px; color: var(--muted); }

/* stat tiles */
.sp-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-8);
}
.sp-stat {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
}
.sp-stat b {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 27px;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.sp-stat span {
    display: block;
    margin-top: 4px;
    font-size: 10.5px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
}
.sp-stat.is-empty b { color: var(--color-bad-800); }

/* analytics */
.an-range { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-6); }
.an-range a:hover { text-decoration: none; }
.an-section { margin: var(--space-8) 0 var(--space-3); font-size: 22px; }
.an-note { margin: 0 0 var(--space-3); font-size: 13px; color: var(--muted); }
.panel > h2 .count { margin-left: 6px; font-family: var(--font-body); font-size: 13px; font-weight: 500; color: var(--muted); }
.an-chart { display: block; width: 100%; height: auto; }
.an-chart .an-grid { stroke: var(--color-divider); stroke-width: 1; }
.an-chart .an-axis { fill: var(--muted); font: 11px var(--font-body); }
.an-chart .an-bar { fill: var(--color-accent); }
.an-chart .an-hit { fill: transparent; }
.an-chart .an-day:hover .an-hit { fill: color-mix(in srgb, var(--color-text) 7%, transparent); }
.an-table { margin-top: var(--space-3); font-size: 13px; }
.an-table summary { cursor: pointer; color: var(--muted); }
.an-table table { margin-top: var(--space-2); }
.an-step {
    display: grid;
    grid-template-columns: 150px 1fr minmax(180px, auto);
    align-items: center;
    gap: var(--space-3);
    padding: 6px 0;
    font-size: 14px;
}
.an-step-track { height: 10px; border-radius: 4px; background: var(--color-neutral-100); overflow: hidden; }
.an-step-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--color-accent); }
.an-step-value em { margin-left: 6px; font-style: normal; font-size: 12.5px; color: var(--muted); }
.an-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-4); }
.an-kv { margin-top: var(--space-4); }

/* ---- sign-in ------------------------------------------------------------
 * The sign-in pages load this sheet alone and emit .signin > .signin-card,
 * with no rail, so the body grid must not apply.
 */

body.sp32:has(.signin) { display: block; }

.signin {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-6);
}

/* The handoff put two large tinted circles in opposite corners here. Dropped:
   on a dark ground they read as blobs rather than as texture, and this is a
   sign-in gate, not a landing page. Plain background. */

.signin-card {
    width: 100%;
    max-width: 430px;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-8) var(--space-6);
}

.signin-card .field { margin-bottom: var(--space-3); }
.signin-card .field:last-of-type { margin-bottom: 0; }
.signin-card .field input { min-height: 42px; }
.signin-card .field input.mono { letter-spacing: .22em; padding-inline: 16px; }

.signin-mark {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 0.02em;
    margin-bottom: var(--space-6);
}
.signin-mark::before {
    content: "";
    width: 34px;
    height: 34px;
    flex: none;
    background: url("brand-mark.webp?v=2") center / contain no-repeat;
}

.signin-lead {
    margin: 0 0 var(--space-6);
    font-size: 15px;
    color: color-mix(in srgb, var(--color-text) 75%, transparent);
    text-wrap: pretty;
}

.opt { color: var(--faint); }

.signin-go { width: 100%; min-height: 44px; margin-top: var(--space-6); }

.signin-foot, .signin-legal { font-size: 12.5px; text-wrap: pretty; }
.signin-foot { margin: var(--space-4) 0 0; color: var(--muted); }
.signin-legal { margin: 0; color: var(--faint); }

/* The security-key prompt is one button; the key mark is drawn here so that
   page stays markup-free. Lucide "key" at the system's 2.75 stroke. */
.signin-card:not(:has(form)) .signin-lead {
    text-align: center;
    max-width: 30ch;
    margin-inline: auto;
}
.signin-card:not(:has(form)) .signin-lead::before {
    content: "";
    display: block;
    width: 96px;
    height: 96px;
    margin: 0 auto var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--color-accent-100)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 24 24' fill='none' stroke='%23a3d3ff' stroke-width='2.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15.5 7.5 2.3 2.3a1 1 0 0 0 1.4 0l2.1-2.1a1 1 0 0 0 0-1.4L19 4'/%3E%3Cpath d='m21 2-9.6 9.6'/%3E%3Ccircle cx='7.5' cy='15.5' r='5.5'/%3E%3C/svg%3E")
        center / 42px no-repeat;
}
.signin-card:not(:has(form)) .signin-go { margin-top: var(--space-4); }

/* ---- reseller guide ---------------------------------------------------- */

.guide { max-width: 900px; }
.guide section { scroll-margin-top: var(--space-6); }
.guide p, .guide li { font-size: 14px; line-height: 1.65; }
.guide p { margin: 0 0 var(--space-3); }
.guide ol, .guide ul { margin: 0 0 var(--space-3); padding-left: 22px; }
.guide li + li { margin-top: 4px; }
.guide h3 {
    margin: var(--space-6) 0 var(--space-2);
    font-family: var(--font-heading);
    font-size: 15.5px;
    font-weight: 700;
}
.guide h3:first-child { margin-top: 0; }
.guide .keylist { max-height: none; margin: 0 0 var(--space-3); }
.guide-toc ol { margin: 0; columns: 2; column-gap: var(--space-6); }
.guide-toc li { break-inside: avoid; }
.guide-note {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-accent-100);
    color: var(--color-accent-800);
    font-size: 13.5px !important;
}
.guide figure { margin: var(--space-3) 0 var(--space-4); }
.guide figure img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.guide figcaption { margin-top: var(--space-2); font-size: 12.5px; color: var(--muted); }

/* ---- narrow ------------------------------------------------------------ */

@media (max-width: 900px) {
    body.sp32 { display: block; }
    .masthead {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-3) var(--space-4);
    }
    .masthead .who { align-items: flex-end; text-align: right; }
    .masthead .who-id { align-items: flex-end; }
    .mainnav {
        flex-direction: row;
        overflow-x: auto;
        padding: var(--space-2) var(--space-4) var(--space-3);
    }
    .page { padding: var(--space-6) var(--space-4) 64px; }
    .filters form { margin-left: 0; width: 100%; }
    .filters input[type=text] { width: 100%; }
}