/* ==========================================================================
   Ask Atiku Abubakar — citizen interface
   --------------------------------------------------------------------------
   Design thesis: the annotated document.

   The subject of this product is a 74-page manifesto with page numbers and
   section headings, and the whole claim is "every answer comes from a page of
   it". So the citation is treated as the hero object rather than as footnote
   furniture, and the type system encodes a real distinction:

       serif      the manifesto's own words
       grotesque  the platform's voice
       mono       page numbers, scores, the index register

   A reader can tell at a glance what he wrote from what the system said.

   Palette is sampled from the supplied logo artwork with contrast computed,
   not eyeballed. The bright brand green measures 4.29:1 on white and fails the
   4.5:1 normal-text threshold, so fills and text carry different tokens.

   No external fonts, no external anything: a strict CSP blocks them, and the
   audience is largely on mobile connections where a webfont is a tax.
   ========================================================================== */

/* --- theme -------------------------------------------------------------- */

:root {
    color-scheme: light dark;

    /* Brand, measured */
    --deep:        #053a1c;   /* 12.90:1 on paper */
    --green:       #068d40;   /* fills, rules, large type only */
    --green-ink:   #05883e;   /* 4.57:1 — green carrying body text */
    --amber:       #f7941d;   /* fills only, 2.28:1 */
    --amber-ink:   #8a5200;   /* amber carrying text */

    /* Surfaces. Paper is green-tinted rather than neutral grey: this is a
       document, and the whole interface is its margin. */
    --paper:       #f6f8f4;
    --sheet:       #ffffff;
    --sunk:        #eef2ec;
    --ink:         #101610;
    --ink-2:       #4a5850;
    --ink-3:       #76837b;
    --rule:        #dbe3da;
    --rule-2:      #c2cec1;
    --field:       #f1f5f0;
    --hero-foot:   #eef4ee;

    --shadow-sm:   0 1px 2px rgba(5, 58, 28, .06);
    --shadow:      0 2px 4px rgba(5, 58, 28, .05), 0 12px 28px -12px rgba(5, 58, 28, .18);

    /* Type */
    --ui:   ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
    --doc:  "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
            ui-serif, serif;
    --num:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
            "Liberation Mono", monospace;

    /* Scale */
    --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
    --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px;

    --r-sm: 6px;
    --r:    12px;
    --r-lg: 18px;

    --measure: 64ch;
}

:root[data-theme="dark"],
:root:not([data-theme="light"]) {
    /* placeholder so the cascade order below reads clearly */
}

/* Device preference is the default. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --green-ink: #1aa456;
        --amber-ink: #e0a24a;

        --paper:  #0e1512;
        --sheet:  #151e19;
        --sunk:   #111a15;
        --ink:    #e8efe9;
        --ink-2:  #a3b1a7;
        --ink-3:  #7d8b82;
        --rule:   #253029;
        --rule-2: #35443a;

        --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
        --shadow:    0 2px 4px rgba(0,0,0,.3), 0 12px 28px -12px rgba(0,0,0,.6);
    }
}

/* An explicit choice always wins over the device. */
:root[data-theme="dark"] {
    --green-ink: #1aa456;
    --amber-ink: #e0a24a;

    --paper:  #0e1512;
    --sheet:  #151e19;
    --sunk:   #111a15;
    --ink:    #e8efe9;
    --ink-2:  #a3b1a7;
    --ink-3:  #7d8b82;
    --rule:   #253029;
    --rule-2: #35443a;
    --field:  #0a1210;
    --hero-foot: #131c17;

    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow:    0 2px 4px rgba(0,0,0,.3), 0 12px 28px -12px rgba(0,0,0,.6);
}

:root[data-theme="light"] {
    --green-ink: #05883e;
    --amber-ink: #8a5200;

    --paper:  #f6f8f4;
    --sheet:  #ffffff;
    --sunk:   #eef2ec;
    --ink:    #101610;
    --ink-2:  #4a5850;
    --ink-3:  #76837b;
    --rule:   #dbe3da;
    --rule-2: #c2cec1;
}

/* --- base --------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--ui);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

:where(a) { color: var(--green-ink); text-underline-offset: 3px; }

:where(button, a, input, textarea, select, summary):focus-visible {
    outline: 2.5px solid var(--green);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

.shell {
    width: 100%;
    max-width: 860px;
    margin-inline: auto;
    padding-inline: var(--s4);
}

@media (min-width: 700px) { .shell { padding-inline: var(--s5); } }

.visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --- disclosure --------------------------------------------------------- */

/* Persistent for the session, not dismissible. Answers concern a real, named
   candidate; this notice is load-bearing. */
.disclosure {
    background: var(--deep);
    color: #d7ecdf;
    font-size: 12.5px;
    line-height: 1.45;
    padding-block: var(--s2);
    border-bottom: 1px solid rgba(255,255,255,.09);
}
/* In dark mode the deep brand green sits too close to the page behind it and
   the bar stops reading as a distinct band. Lift it rather than recolour it,
   so the brand stays intact. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .disclosure { background: #0a2c16; }
}
:root[data-theme="dark"] .disclosure { background: #0a2c16; }
.disclosure b { color: #fff; font-weight: 600; }

/* --- portal shell ------------------------------------------------------- */
/* The reference presents the whole product as one rounded panel floating on a
   pale field, rather than as a page with a header and a footer. Keeping that
   containment is most of what makes it read as the supplied design. */

.portal-page { background: var(--field); }

.portal-wrap {
    width: 100%;
    max-width: 1220px;
    margin-inline: auto;
    padding: var(--s4) var(--s3) var(--s6);
}
@media (min-width: 760px) { .portal-wrap { padding: var(--s5) var(--s5) var(--s7); } }

.portal {
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: 20px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

/* --- hero --------------------------------------------------------------- */

.hero {
    position: relative;
    background:
        radial-gradient(120% 90% at 88% 10%, color-mix(in srgb, var(--green) 7%, transparent), transparent 60%),
        radial-gradient(80% 70% at 96% 78%, color-mix(in srgb, var(--green) 9%, transparent), transparent 62%),
        linear-gradient(180deg, var(--sheet) 0%, var(--hero-foot) 100%);
    min-height: 168px;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    padding: var(--s5) var(--s4) var(--s6);
}
@media (max-width: 859px) {
    .hero { min-height: 200px; padding-block: var(--s5) var(--s6); }
    .hero-brand img { max-width: 250px; }
    /* The figure sits behind the centred lockup and is dimmed slightly so the
       brand stays the first thing read at this size. */
    .hero-figure { width: 130px; height: 176px; opacity: .95; }
}
@media (max-width: 460px) {
    .hero { min-height: 178px; }
    .hero-brand img { max-width: 200px; }
    .hero-figure { width: 104px; height: 142px; }
}


/* Candidate photograph: static header imagery, not the answering identity. */
.hero-figure {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 118px;
    height: 132px;
    overflow: hidden;
    pointer-events: none;
}
.hero-figure picture { display: block; height: 100%; }
.hero-figure img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    object-position: left bottom;
    display: block;
    -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent);
    mask-image: linear-gradient(to bottom, #000 90%, transparent);
}
@media (min-width: 420px) { .hero-figure { width: 140px; height: 156px; } }

.hero-brand {
    text-align: center;
    position: relative;
    z-index: 1;
}

/* The supplied logo is drawn in dark ink for light backgrounds, so on a dark
   page its wordmark and strapline disappear. It gets a light plate rather than
   a filter: inverting or brightening would shift the brand greens and the ADC
   mark, and those are not ours to alter. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .hero-brand img {
        background: #eef3ec;
        border-radius: 10px;
        padding: 6px 10px;
    }
}
:root[data-theme="dark"] .hero-brand img {
    background: #eef3ec;
    border-radius: 10px;
    padding: 6px 10px;
}
.hero-brand img {
    width: 100%;
    max-width: 300px;
    height: auto;
}

.hero-tools {
    position: absolute;
    top: var(--s3);
    right: var(--s3);
    display: flex;
    align-items: center;
    gap: var(--s2);
    z-index: 2;
}

.lang-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12.5px;
    font-weight: 620;
    color: var(--ink-2);
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 6px 10px;
    cursor: not-allowed;
    user-select: none;
    box-shadow: var(--shadow-sm);
}

@media (min-width: 860px) {
    .hero {
        grid-template-columns: 320px 1fr;
        min-height: 320px;
        padding: 0 var(--s5) 0 0;
        align-items: end;
    }
    .hero-figure {
        position: static;
        display: block;
        width: auto;
        align-self: end;
        /* Taller than the hero on purpose: the figure runs off the bottom and
           is cropped by the container, as in the reference, rather than
           stopping on a visible horizontal edge. */
        height: 360px;
        margin-bottom: -40px;
        overflow: hidden;
    }
    .hero-figure img {
        height: 100%;
        width: 100%;
        object-fit: contain;
        object-position: left bottom;
        display: block;
        /* Soften the right edge so the figure sits in the hero instead of
           ending on a visible boundary. */
        -webkit-mask-image: linear-gradient(to bottom, #000 90%, transparent);
        mask-image: linear-gradient(to bottom, #000 90%, transparent);
    }
    .hero-brand {
        grid-column: 1 / -1;
        grid-row: 1;
        padding-block: var(--s6) var(--s7);
        pointer-events: none;
    }
    .hero-brand img { max-width: 420px; pointer-events: auto; }
    .hero-figure { grid-column: 1; grid-row: 1; }
    .hero-tools { top: var(--s4); right: var(--s4); }
}

/* --- ask card ----------------------------------------------------------- */
/* Overlaps the hero, as in the reference: the card is the product, and the
   hero is the frame it sits in. */

.ask-card {
    position: relative;
    z-index: 3;
    margin: calc(var(--s5) * -1) var(--s3) 0;
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: var(--s4);
}
@media (min-width: 760px) {
    .ask-card { margin: -46px var(--s6) 0; padding: var(--s5) var(--s5) var(--s5); }
}

.ask-card h1 {
    margin: 0 0 var(--s3);
    font-size: clamp(17px, 2.4vw, 21px);
    line-height: 1.3;
    letter-spacing: -.015em;
    font-weight: 700;
    color: var(--ink);
}

.field { position: relative; }

#question {
    width: 100%;
    min-height: 118px;
    padding: var(--s3) var(--s3) var(--s5);
    font: inherit;
    font-size: 16px;                /* below 16px iOS zooms on focus */
    line-height: 1.5;
    color: var(--ink);
    background: var(--sheet);
    border: 1.5px solid var(--rule-2);
    border-radius: 12px;
    resize: vertical;
}
#question::placeholder { color: var(--ink-3); }
#question:focus { border-color: var(--green); background: var(--sunk); }

.counter {
    position: absolute;
    right: var(--s3);
    bottom: var(--s2);
    font-family: var(--num);
    font-size: 11.5px;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}
.counter.limit { color: var(--amber-ink); font-weight: 600; }

.ask-actions {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--s2);
    margin-top: var(--s3);
}
@media (min-width: 620px) {
    .ask-actions { flex-direction: row; align-items: center; justify-content: space-between; }
}

.btn {
    appearance: none;
    font: inherit;
    font-size: 15px;
    font-weight: 650;
    line-height: 1;
    border-radius: 999px;
    padding: 14px 26px;
    border: 1.5px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    transition: background-color .15s ease, border-color .15s ease, transform .06s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--deep); color: #fff; width: 100%; }
@media (min-width: 620px) { .btn-primary { width: auto; } }
.btn-primary:hover:not(:disabled) { background: #0a5730; }
.btn:disabled { opacity: .6; cursor: progress; }

/* Production-scope capability: shown, honestly inactive. Deleting it
   understates the planned product; leaving it live reads as a fault. */
.voice-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--green-ink);
    background: var(--sheet);
    border: 1.5px solid color-mix(in srgb, var(--green) 42%, transparent);
    border-radius: 999px;
    padding: 13px 20px;
    cursor: not-allowed;
    user-select: none;
}
.voice-btn .tag {
    font-family: var(--num);
    font-size: 9px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-3);
    background: var(--sunk);
    border-radius: 3px;
    padding: 2px 5px;
}

.notice {
    margin-top: var(--s3);
    padding: var(--s3);
    border-radius: 12px;
    font-size: 14px;
    border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent);
    background: color-mix(in srgb, var(--amber) 9%, transparent);
    color: var(--amber-ink);
}

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

.panels {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s3);
    padding: var(--s4) var(--s3);
}
@media (min-width: 760px) { .panels { padding: var(--s5) var(--s6); } }
@media (min-width: 1000px) {
    .panels { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr) minmax(0, .85fr); }
}

.panel {
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: 14px;
    padding: var(--s4);
    min-width: 0;
}
.panel h2 { font-size: 14.5px; font-weight: 700; margin: 0 0 2px; letter-spacing: -.01em; }
.panel-hint { font-size: 12.5px; color: var(--ink-3); margin: 0 0 var(--s3); }

/* Topic tiles. Tints are decorative, so each carries its own text label and
   none of the meaning rests on colour alone. */
.topic-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s2);
}
@media (min-width: 480px) { .topic-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .topic-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; } }

/* --- tablet ------------------------------------------------------------- */
/* Between a phone and a desktop the panels have room for two columns but not
   three: forcing three makes the topic tiles too narrow to label, and leaving
   one wastes half the width. Search and Track pair naturally, since both are
   short lookups. */
@media (min-width: 700px) and (max-width: 999px) {
    .panels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .panel-topics { grid-column: 1 / -1; }
    .topic-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
    .topic-label { max-width: 10ch; }
}

.topic {
    appearance: none;
    background: none;
    border: 0;
    padding: var(--s1) 2px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
    border-radius: 10px;
}
.topic-tile {
    width: 46px; height: 46px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    transition: transform .14s ease;
}
.topic:hover .topic-tile { transform: translateY(-2px); }
.topic-label {
    font-size: 10.5px;
    line-height: 1.2;
    color: var(--ink-2);
    text-align: center;
    /* Break between words only. "Infrastruct/ure" reads as a rendering fault. */
    overflow-wrap: normal;
    word-break: keep-all;
    hyphens: none;
    max-width: 9ch;
}
@media (min-width: 1000px) { .topic-label { max-width: 11ch; font-size: 10px; } }

.tone-violet { background: #f2ecff; color: #7c3aed; }
.tone-amber  { background: #fff2e2; color: #c2660a; }
.tone-plum   { background: #fbecff; color: #a92fb8; }
.tone-sky    { background: #e8f2ff; color: #2f7fd4; }
.tone-blue   { background: #e9f0ff; color: #3060d8; }
.tone-leaf   { background: #e9f8ec; color: #21a04a; }
.tone-mint   { background: #e6f7ef; color: #128a5a; }
.tone-steel  { background: #eaf0f7; color: #3a6ea8; }

/* Search */
.search-row { display: flex; align-items: stretch; gap: 0; }
.search-row input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px var(--s3);
    font: inherit;
    font-size: 16px;
    color: var(--ink);
    background: var(--sheet);
    border: 1.5px solid var(--rule-2);
    border-right: 0;
    border-radius: 10px 0 0 10px;
}
@media (min-width: 760px) { .search-row input { font-size: 14px; } }
.search-row input:focus { border-color: var(--green); }
.search-go {
    appearance: none;
    border: 1.5px solid var(--rule-2);
    border-left: 0;
    background: var(--sheet);
    color: var(--ink-2);
    border-radius: 0 10px 10px 0;
    padding: 0 var(--s3);
    cursor: pointer;
}
.search-go:hover { color: var(--green-ink); border-color: var(--green); }

/* Track */
.track-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    width: 100%;
    font-size: 14.5px;
    font-weight: 620;
    color: var(--green-ink);
    text-decoration: none;
    background: var(--sheet);
    border: 1.5px solid color-mix(in srgb, var(--green) 42%, transparent);
    border-radius: 10px;
    padding: 12px var(--s3);
}
.track-btn:hover { background: color-mix(in srgb, var(--green) 7%, transparent); }

/* --- channel bar -------------------------------------------------------- */

.channel-bar {
    background: var(--deep);
    color: #cfe6d8;
    padding: var(--s3) var(--s4);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s2) var(--s4);
    font-size: 12.5px;
}
@media (min-width: 760px) { .channel-bar { padding: var(--s3) var(--s6); justify-content: center; } }

.channel-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.channel-label { color: #9fc3ae; }
.channel-sep { display: none; width: 1px; height: 18px; background: rgba(255,255,255,.2); }
@media (min-width: 1060px) { .channel-sep { display: block; } }

.chan, .lang { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.chan.on, .lang.on { color: #fff; font-weight: 600; }
.chan.off, .lang.off { opacity: .45; }

/* --- theme control ------------------------------------------------------ */

.theme {
    display: inline-flex;
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 2px;
    gap: 1px;
    box-shadow: var(--shadow-sm);
}
.theme button {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--ink-3);
    font: inherit;
    font-size: 11px;
    padding: 5px 9px;
    border-radius: 999px;
    cursor: pointer;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.theme button[aria-pressed="true"] {
    background: var(--sunk);
    color: var(--ink);
    font-weight: 600;
}
.theme svg { width: 12px; height: 12px; display: block; }
.theme .label { display: none; }
@media (min-width: 1040px) { .theme .label { display: inline; } }

/* --- icons -------------------------------------------------------------- */

.icon { width: 20px; height: 20px; flex: none; }
.icon-sm { width: 15px; height: 15px; flex: none; }
.topic-tile .icon { width: 22px; height: 22px; }

/* --- answer ------------------------------------------------------------- */

.result { margin-bottom: var(--s6); scroll-margin-top: var(--s5); }

.answer {
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.answer-head {
    display: flex;
    align-items: center;
    gap: var(--s2);
    padding: var(--s3) var(--s4);
    border-bottom: 1px solid var(--rule);
    background: var(--sunk);
    font-family: var(--num);
    font-size: 10.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.answer-head .dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--green);
    flex: none;
}
.answer.is-refused .answer-head .dot { background: var(--amber); }
.answer-head .spacer { margin-left: auto; }

.answer-body {
    padding: var(--s4);
    font-size: 17px;
    line-height: 1.62;
    max-width: var(--measure);
}
@media (min-width: 700px) { .answer-body { padding: var(--s5); } }
.answer-body p { margin: 0 0 .85em; }
.answer-body p:last-child { margin-bottom: 0; }

/* --- source slips ------------------------------------------------------- */
/* The signature. Citations are the product, so they are built as objects with
   a page tab rather than hidden in an accordion. The spine rule makes the
   link from answer to page literal. */

.sources { padding: 0 var(--s4) var(--s4); }
@media (min-width: 700px) { .sources { padding: 0 var(--s5) var(--s5); } }

.sources > h2 {
    font-family: var(--num);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-3);
    font-weight: 600;
    margin: 0 0 var(--s3);
    padding-top: var(--s4);
    border-top: 1px solid var(--rule);
}

.slips { display: grid; gap: var(--s2); }

.slip {
    border: 1px solid var(--rule);
    border-left: 3px solid var(--green);
    border-radius: var(--r-sm);
    background: var(--sunk);
    overflow: hidden;
}
.slip > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s2) var(--s3);
    font-size: 13px;
}
.slip > summary::-webkit-details-marker { display: none; }

.slip .page {
    font-family: var(--num);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--green-ink);
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 3px 7px;
    flex: none;
}
.slip .section {
    color: var(--ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.slip .chevron {
    margin-left: auto;
    color: var(--ink-3);
    font-size: 11px;
    flex: none;
    transition: transform .15s ease;
}
.slip[open] .chevron { transform: rotate(90deg); }

/* The manifesto's own words, in the document voice. */
/* The fade signals "there is more here, scroll" — a hard cut mid-sentence
   reads as text that failed to load rather than as a viewport. */
.slip .passage {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
    font-family: var(--doc);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-2);
    padding: 0 var(--s3) var(--s3) calc(var(--s3) + 2px);
    white-space: pre-wrap;
    max-height: 260px;
    overflow-y: auto;
    border-top: 1px solid var(--rule);
    margin-top: 2px;
    padding-top: var(--s3);
}

/* The refusal. Given the most distinctive treatment in the interface, because
   declining honestly is the behaviour this platform exists to demonstrate —
   it should not look like an error state. */
.slip-empty {
    border: 1.5px dashed var(--rule-2);
    border-radius: var(--r-sm);
    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0 22px,
            var(--rule) 22px 23px
        );
    padding: var(--s4) var(--s3);
    text-align: center;
}
.slip-empty .mark {
    font-family: var(--num);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-3);
    background: var(--sheet);
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid var(--rule);
    display: inline-block;
}

.meta {
    display: flex;
    gap: var(--s3);
    flex-wrap: wrap;
    align-items: center;
    padding: var(--s3) var(--s4);
    border-top: 1px solid var(--rule);
    font-family: var(--num);
    font-size: 11px;
    color: var(--ink-3);
}
@media (min-width: 700px) { .meta { padding-inline: var(--s5); } }
.meta .warn { color: var(--amber-ink); font-weight: 600; }

/* --- footer ------------------------------------------------------------- */

.channels {
    margin-top: auto;
    background: var(--deep);
    color: #b7d4c3;
    padding-block: var(--s4);
    font-size: 12.5px;
}
.channels-grid { display: grid; gap: var(--s3); }
@media (min-width: 700px) {
    .channels-grid { grid-template-columns: 1fr 1fr; gap: var(--s5); }
}
.channels h2 {
    font-family: var(--num);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #7fae91;
    font-weight: 600;
    margin: 0 0 var(--s2);
}
.channel-list { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); }
.channel { display: inline-flex; align-items: center; gap: 5px; }
.channel.on { color: #fff; font-weight: 600; }
.channel.off { opacity: .42; }
.channel.off::after {
    content: "";
    width: 4px; height: 4px;
    border-radius: 50%;
    border: 1px solid currentColor;
}

/* --- spinner ------------------------------------------------------------ */

.spinner {
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
    flex: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Answers arrive after a wait; a short reveal makes the arrival legible
   without becoming an effect. */
.result > * { animation: rise .32s cubic-bezier(.2,.7,.3,1) both; }
@keyframes rise {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* --- gate --------------------------------------------------------------- */

.gate-wrap {
    flex: 1 1 auto;
    display: grid;
    place-items: center;
    padding-block: var(--s7);
}
.gate {
    width: 100%;
    max-width: 420px;
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    padding: var(--s5);
}
.gate .mark {
    font-family: var(--num);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: var(--s3);
}
.gate h1 {
    font-size: 21px;
    letter-spacing: -.02em;
    margin: 0 0 var(--s2);
}
.gate p { color: var(--ink-2); font-size: 14.5px; margin: 0 0 var(--s4); }

.gate input[type="password"] {
    width: 100%;
    padding: 13px var(--s3);
    font: inherit;
    font-size: 16px;
    color: var(--ink);
    background: var(--sunk);
    border: 1.5px solid var(--rule-2);
    border-radius: var(--r);
    margin-bottom: var(--s3);
}
.gate input:focus { border-color: var(--green); background: var(--sheet); }
.gate .btn { width: 100%; }

.alert {
    padding: var(--s3);
    border-radius: var(--r);
    font-size: 14px;
    margin-bottom: var(--s3);
    border: 1px solid color-mix(in srgb, #c0392b 40%, transparent);
    background: color-mix(in srgb, #c0392b 8%, transparent);
    color: #a5342a;
}
:root[data-theme="dark"] .alert,
:root:not([data-theme="light"]) .alert { color: #f0a99f; }

/* --- faq ---------------------------------------------------------------- */

.faq-item {
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: var(--r);
    margin-bottom: var(--s2);
    overflow: hidden;
}
.faq-item > summary {
    cursor: pointer;
    list-style: none;
    padding: var(--s3) var(--s4);
    font-weight: 600;
    font-size: 15.5px;
    display: flex;
    gap: var(--s3);
    align-items: flex-start;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::before {
    content: "+";
    font-family: var(--num);
    color: var(--green-ink);
    flex: none;
    line-height: 1.5;
}
.faq-item[open] > summary::before { content: "−"; }
.faq-answer {
    padding: 0 var(--s4) var(--s4) calc(var(--s4) + 16px);
    color: var(--ink-2);
    max-width: var(--measure);
}

/* --- escalation --------------------------------------------------------- */
/* Where the platform's promise lands. A question the manifesto cannot answer
   goes to him, so this is not an apology for a missing answer — it is an
   invitation, and it gets the warmest treatment on the page. */

.escalate {
    margin: 0 var(--s4) var(--s4);
    padding: var(--s4);
    border: 1.5px solid color-mix(in srgb, var(--green) 40%, transparent);
    border-radius: var(--r);
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--green) 7%, transparent),
            transparent 70%);
}
@media (min-width: 700px) { .escalate { margin: 0 var(--s5) var(--s5); padding: var(--s5); } }

.escalate-lead {
    margin: 0 0 var(--s1);
    font-size: 17px;
    font-weight: 680;
    letter-spacing: -.015em;
}
.escalate-sub {
    margin: 0 0 var(--s3);
    font-size: 14.5px;
    color: var(--ink-2);
    max-width: 54ch;
}

.escalate-row { display: flex; gap: var(--s2); flex-wrap: wrap; }
.escalate-contact {
    flex: 1 1 200px;
    min-width: 0;
    padding: 12px var(--s3);
    font: inherit;
    font-size: 16px;
    color: var(--ink);
    background: var(--sheet);
    border: 1.5px solid var(--rule-2);
    border-radius: var(--r);
}
.escalate-contact:focus { border-color: var(--green); }
.escalate-row .btn { flex: 0 0 auto; }

.escalate-note {
    margin: var(--s2) 0 0;
    font-size: 12.5px;
    color: var(--ink-3);
    max-width: 56ch;
}

.escalate-status {
    margin-top: var(--s3);
    padding: var(--s3);
    border-radius: var(--r);
    font-size: 14.5px;
    line-height: 1.55;
}
.escalate-status.good {
    background: color-mix(in srgb, var(--green) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--green) 40%, transparent);
    color: var(--ink);
}
.escalate-status.bad {
    background: color-mix(in srgb, #c0392b 8%, transparent);
    border: 1px solid color-mix(in srgb, #c0392b 35%, transparent);
    color: var(--ink);
}

/* The reference is the thing people screenshot. Make it unmistakable. */
.escalate-status .ref,
.ref-input {
    font-family: var(--num);
    font-weight: 600;
    letter-spacing: .1em;
}
.escalate-status .ref {
    background: var(--sheet);
    border: 1px solid color-mix(in srgb, var(--green) 45%, transparent);
    border-radius: var(--r-sm);
    padding: 2px 8px;
    white-space: nowrap;
    font-size: 14px;
}

/* --- track -------------------------------------------------------------- */

.ref-input {
    width: 100%;
    padding: 13px var(--s3);
    font-size: 18px;
    text-transform: uppercase;
    color: var(--ink);
    background: var(--sunk);
    border: 1.5px solid var(--rule-2);
    border-radius: var(--r);
}
.ref-input:focus { border-color: var(--green); background: var(--sheet); }

.asked-label {
    font-family: var(--num);
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 var(--s1);
}
.asked {
    font-family: var(--doc);
    font-size: 17px;
    color: var(--ink);
    margin: 0 0 var(--s4);
}

.track-link {
    margin: calc(var(--s5) * -1 + var(--s3)) 0 var(--s6);
    font-size: 14px;
}

/* --- faq page ----------------------------------------------------------- */

.faq-list { margin-bottom: var(--s6); }

.faq-source {
    display: flex;
    align-items: center;
    gap: var(--s2);
    margin: var(--s3) 0 0;
    padding-top: var(--s3);
    border-top: 1px solid var(--rule);
    font-size: 12.5px;
    color: var(--ink-3);
}
.faq-source .page {
    font-family: var(--num);
    font-size: 11px;
    font-weight: 600;
    color: var(--green-ink);
    background: var(--sunk);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 2px 7px;
}

.empty-faq { margin: 0; color: var(--ink-2); }

/* --- source document ---------------------------------------------------- */
/* The offer to go and check for yourself. Placed where someone who distrusts
   the platform will see it, rather than in a footer. */

.source-doc {
    display: flex;
    align-items: center;
    gap: var(--s3);
    padding: var(--s3) var(--s4);
    margin-bottom: var(--s4);
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: var(--r);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease;
}
.source-doc:hover { border-color: var(--green); }
.source-doc-icon {
    font-family: var(--num);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    color: #fff;
    background: var(--deep);
    border-radius: var(--r-sm);
    padding: 7px 8px;
    flex: none;
}
.source-doc-text { display: flex; flex-direction: column; min-width: 0; }
.source-doc-text strong { font-size: 14.5px; font-weight: 620; }
.source-doc-text span { font-size: 12.5px; color: var(--ink-3); }

/* --- search ------------------------------------------------------------- */

.search-input {
    width: 100%;
    padding: 13px var(--s3);
    font: inherit;
    font-size: 16px;
    color: var(--ink);
    background: var(--sunk);
    border: 1.5px solid var(--rule-2);
    border-radius: var(--r);
}
.search-input:focus { border-color: var(--green); background: var(--sheet); }

.btn-quiet {
    background: transparent;
    border-color: var(--rule-2);
    color: var(--ink-2);
    text-decoration: none;
}
.btn-quiet:hover { border-color: var(--green); color: var(--green-ink); }

.result-count {
    font-family: var(--num);
    font-size: 11px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin: 0 0 var(--s3);
}

/* An answer a person wrote is marked as such wherever it appears. */
.pill-human {
    font-family: var(--num);
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--amber-ink);
    border: 1px solid color-mix(in srgb, var(--amber) 50%, transparent);
    border-radius: 4px;
    padding: 2px 6px;
    margin-left: var(--s2);
}

/* --- coming soon -------------------------------------------------------- */
/* The public face before launch. Same tokens as the portal so the two read as
   one product, but laid out as a holding page rather than a tool: the figure
   carries the left, the proposition carries the right, and the access code is
   tucked away because most visitors will not have one. */

.soon-page { background: var(--field); }

.soon-wrap {
    width: 100%;
    max-width: 1120px;
    margin-inline: auto;
    padding: var(--s4) var(--s3) var(--s5);
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media (min-width: 760px) { .soon-wrap { padding: var(--s6) var(--s5); } }

.soon {
    position: relative;
    background:
        radial-gradient(120% 90% at 92% 8%, color-mix(in srgb, var(--green) 8%, transparent), transparent 62%),
        radial-gradient(70% 60% at 4% 100%, color-mix(in srgb, var(--green) 10%, transparent), transparent 60%),
        var(--sheet);
    border: 1px solid var(--rule);
    border-radius: 20px;
    box-shadow: var(--shadow);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
}

.soon-tools { position: absolute; top: var(--s3); right: var(--s3); z-index: 3; }

.soon-figure { display: none; }

.soon-body { padding: var(--s5) var(--s4) var(--s4); }
@media (min-width: 760px) { .soon-body { padding: var(--s7) var(--s6) var(--s6); } }

.soon-logo { display: block; width: 100%; max-width: 250px; height: auto; margin: 0 0 var(--s5); }
@media (min-width: 760px) { .soon-logo { max-width: 320px; } }

/* Dark mode: the artwork is dark ink for light backgrounds. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .soon-logo {
        background: #eef3ec; border-radius: 10px; padding: 8px 12px;
    }
}
:root[data-theme="dark"] .soon-logo {
    background: #eef3ec; border-radius: 10px; padding: 8px 12px;
}

.soon-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--num);
    font-size: clamp(12px, 1.5vw, 14px);
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: #fff;
    background: var(--deep);
    border-radius: 999px;
    padding: 9px 18px 9px 15px;
    margin: 0 0 var(--s4);
    box-shadow: 0 2px 10px -2px color-mix(in srgb, var(--deep) 45%, transparent);
}

/* A live dot, because "coming soon" with no sign of life reads as abandoned.
   Held still for anyone who has asked for reduced motion. */
.soon-eyebrow::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, .7);
    animation: soon-pulse 2.4s ease-out infinite;
}
@keyframes soon-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, .65); }
    70%  { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); }
    100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .soon-eyebrow::before { animation: none; }
}

.soon h1 {
    margin: 0 0 var(--s3);
    font-size: clamp(25px, 5vw, 38px);
    line-height: 1.12;
    letter-spacing: -.03em;
    font-weight: 700;
    max-width: 17ch;
}

.soon-lead {
    margin: 0 0 var(--s5);
    font-size: clamp(15px, 2.2vw, 17px);
    line-height: 1.6;
    color: var(--ink-2);
    max-width: 46ch;
}

.soon-points { list-style: none; margin: 0 0 var(--s5); padding: 0; display: grid; gap: var(--s3); max-width: 52ch; }
.soon-points li { display: flex; gap: var(--s3); align-items: flex-start; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.soon-points strong { color: var(--ink); font-weight: 620; }
.soon-points .icon { color: var(--green-ink); margin-top: 2px; }

/* Access, deliberately quiet. */
.soon-access {
    border-top: 1px solid var(--rule);
    padding-top: var(--s4);
    max-width: 46ch;
}
.soon-access > summary {
    cursor: pointer;
    list-style: none;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--green-ink);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.soon-access > summary::-webkit-details-marker { display: none; }
.soon-access > summary::before { content: "+"; font-family: var(--num); }
.soon-access[open] > summary::before { content: "−"; }

.soon-form { display: flex; gap: var(--s2); margin-top: var(--s3); flex-wrap: wrap; }
.soon-form input {
    flex: 1 1 190px;
    min-width: 0;
    padding: 12px var(--s3);
    font: inherit;
    font-size: 16px;
    color: var(--ink);
    background: var(--sunk);
    border: 1.5px solid var(--rule-2);
    border-radius: var(--r);
}
.soon-form input:focus { border-color: var(--green); background: var(--sheet); }
.soon-form .btn { flex: 0 0 auto; padding: 12px 22px; }

.soon-note { font-size: 12.5px; color: var(--ink-3); margin: var(--s3) 0 0; }

.soon-foot {
    grid-column: 1 / -1;
    background: var(--deep);
    color: #9fc3ae;
    padding: var(--s3) var(--s4);
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2) var(--s3);
    font-size: 12px;
    align-items: center;
}
@media (min-width: 760px) { .soon-foot { padding-inline: var(--s6); } }
.soon-foot span:not(.off):not(.soon-foot-sep) { color: #fff; font-weight: 600; }
.soon-foot .off { opacity: .4; }
.soon-foot-sep { width: 1px; height: 14px; background: rgba(255,255,255,.2); }

/*
 * The operator line. Quiet, but rendered — not concealed.
 *
 * It sits a step below the disclosure above it in both size and contrast, so
 * it reads as a colophon rather than as content. Deliberately not hidden:
 * concealed ownership text is cloaking, and this line exists to answer a
 * reputation engine that already suspects this domain of pretending to be
 * something it is not.
 */
.soon-owner {
    margin: var(--s2) 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--ink-3);
    opacity: 0.72;
    text-align: center;
}

.soon-owner a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

.soon-owner a:hover,
.soon-owner a:focus-visible {
    color: var(--ink-1);
    opacity: 1;
}

.soon-disclosure {
    margin: var(--s4) 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ink-3);
    text-align: center;
    max-width: 60ch;
    margin-inline: auto;
}

@media (min-width: 860px) {
    .soon { grid-template-columns: 320px 1fr; align-items: end; }
    .soon-figure {
        display: flex;
        align-items: flex-end;
        align-self: stretch;
        overflow: hidden;
    }
    .soon-figure picture { display: block; width: 100%; }
    .soon-figure img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 100%;
        object-fit: contain;
        object-position: left bottom;
        -webkit-mask-image: linear-gradient(to right, #000 76%, transparent);
        mask-image: linear-gradient(to right, #000 76%, transparent);
    }
    .soon-body { padding-left: var(--s5); }
}