/* ═══════════════════════════════════════════
   PLATFORM · SLAP — the unit's panel

   Owner direction 2026-08-27: the RRJJBB Drop-001 board (REST UNIT)
   is the reference. The page is a device panel — ink ground, one night
   display, instruments named in tiny mono caps, nothing decorative.
   The unit tokens are the panel's own inks (context.md §6 family:
   Ink ground, screen-only night slate, bone); accents come from the site's
   own pair so the unit never argues with its host. No radius anywhere.
   These literals are the panel's single deliberate exception to
   color.css's no-hex rule; every rule below reads the tokens.
   ═══════════════════════════════════════════ */

.slap-page {
    --unit-ink: #0B0C0A;
    /* The night glass (owner reference SM01 · SLEEP MACHINE,
       2026-08-28): slate-charcoal ground with a subtle blue cast,
       bone pixels. The sage-LCD era retires; this is the modern
       tone the garment mock set. */
    --unit-screen: #252A38;
    --unit-pixel: #E6DFCF;
    --unit-bone: #E6DFCF;
    --unit-label: #55584E;
    --unit-steel: #2A2B30;
    --unit-knob: #101110;

    background: var(--unit-ink);
    color: var(--unit-bone);
    margin: 0;
    min-height: 100svh;
    font-family: var(--font-mono);
}

/* The unit in a lit room: the panel follows the visitor's theme; the
   LCD does not — night glass and bone pixels are the device’s material
   in any light, the way a dial face keeps its color at noon. */
.slap-page[data-theme="light"] {
    --unit-ink: #EDEAE1;
    --unit-bone: #23241F;
    --unit-label: #6E7268;
    --unit-steel: #C8C4B7;
    --unit-knob: #E2DFD4;
}

/* ── The way back — a panel label, top-left ── */
.slap-back {
    position: fixed;
    inset-block-start: var(--space-md);
    margin-block-start: -0.4rem;
    inset-inline-start: var(--space-md);
    z-index: var(--layer-sticky);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--unit-label);
    padding: 0.4rem 0;
}
.slap-back:hover { color: var(--unit-bone); }
.slap-back:focus-visible { outline: 1px solid var(--accent, #E9803A); outline-offset: 3px; }

/* ── The panel ──────────────────────────── */
.slap-main {
    max-inline-size: 680px;
    margin-inline: auto;
    padding: clamp(4rem, 11vh, 7rem) var(--safe-inline) var(--space-3xl);
}

.slap-head { margin-block-end: var(--space-lg); }
.slap-title {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--unit-bone);
}
.slap-sub {
    margin: 0.45rem 0 0;
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--unit-label);
}

/* The device signature, bottom of the panel. */
.slap-foot {
    margin-block-start: var(--space-2xl);
    padding-block-start: var(--space-lg);
}
.slap-foot .sig {
    margin: 0;
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--unit-label);
}
.slap-foot .fine {
    margin: 0.7rem 0 0;
    max-inline-size: 52ch;
    font-size: 0.625rem;
    letter-spacing: 0.06em;
    line-height: 1.7;
    color: var(--unit-label);
}

/* The sense chip wears the panel: a label that answers. */
.slap-page .sense-toggle {
    position: fixed;
    inset-block-end: var(--space-md);
    inset-inline-start: var(--space-md);
    z-index: var(--layer-sticky);
    font-family: var(--font-mono);
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--unit-label);
    background: var(--unit-ink);
    border: 1px solid var(--unit-steel);
    border-radius: 0;
    padding: 0.5rem 0.9rem;
    cursor: pointer;
}
.slap-page .sense-toggle:hover { color: var(--unit-bone); }
.slap-page .sense-toggle:focus-visible { outline: 1px solid var(--accent, #E9803A); outline-offset: 3px; }
.slap-page .sense-toggle[aria-pressed="true"] { color: var(--accent, #E9803A); border-color: var(--accent, #E9803A); }

/* ═══ The held fascia (mobile-step ruling, 2026-08-28): below the
   desk seam the page chrome dies — the component IS the viewport,
   five strata top to bottom. S0 is the seam: the way back at the
   left, the engraving at the right; the foot and the book wait in
   normal flow below the bottom seam. ═══ */
.slap-id {
    display: none;
    position: fixed;
    inset-block-start: var(--space-md);
    inset-inline-end: var(--space-md);
    z-index: var(--layer-sticky);
    margin: 0;
    font-size: 0.5625rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--unit-label);
}
@media (max-width: 1023px) {
    .slap-main { max-inline-size: none; padding: 0; }
    .slap-head { display: none; }
    .slap-id { display: block; }
    .slap-foot { margin-block-start: var(--space-md); padding: 0 16px var(--space-lg); }
    /* The chip leaves the fascia's territory: it rides the shelf
       below the seam, not the letter rack's corner. */
    .slap-page .sense-toggle { position: static; margin: 0 16px var(--space-lg); }
}

/* ═══ The sat-at fascia (MK II, amended §4): on a desk the unit is
   installed — the page dies, the viewport becomes the machine, and
   the component's own grid takes the room. Nothing scrolls. ═══ */
@media (min-width: 1024px) and (min-height: 420px) {
    .slap-page { overflow: hidden; }
    html.no-js .slap-page { overflow: auto; }
    .slap-main { max-inline-size: none; padding: 0 clamp(16px, 2vw, 40px); }
    .slap-head { display: none; }
    .slap-id { display: block; }
    /* The engraving at the seam carries the identity; the foot would
       ride the letter rack. */
    .slap-foot { display: none; }
    .slap-page .sense-toggle {
        inset-inline-start: auto;
        inset-inline-end: var(--space-md);
        /* Chip center meets the bay's 858 datum: 18px grid pad +
           24px half-bar, minus half the 28px chip. */
        inset-block-end: calc(42px - 14px);
        block-size: 28px;
        padding-block: 0;
        display: inline-flex;
        align-items: center;
    }
}

/* No-JS: the unit never powers on — say so honestly, in real text. */
.slap-nojs { display: none; }
html.no-js .slap-nojs {
    display: block;
    border: 1px solid var(--unit-steel);
    padding: var(--space-lg);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    color: var(--unit-label);
}
html.no-js rr-slap { display: none; }