/* ==========================================================================
   The gatehouse.

   One stylesheet, served as a file so the CSP can stay `style-src 'self'`
   with no inline exception. There is no build step and no preprocessor: the
   charter forbids both, and at this size they would buy nothing.

   Mobile-first throughout, because the founder's inspection scripts are
   walked on a phone. Every tappable thing is at least 44px tall — that is
   Apple's published minimum and roughly the width of an adult fingertip, and
   below it people miss and blame themselves.
   ========================================================================== */

:root {
    /* Dark by default. This is a page people open at night to check a
       balance, and a white screen at 2am is a small cruelty. */
    --ink: #e8e4dc;
    --ink-quiet: #8c867c;
    --ground: #14130f;
    --raised: #1e1c17;
    --line: #2e2b24;
    --alarm: #d4643c;
    --tap: 44px;
}

@media (prefers-color-scheme: light) {
    :root {
        --ink: #1a1813;
        --ink-quiet: #6b655a;
        --ground: #f4f1ea;
        --raised: #fffdf8;
        --line: #ddd7ca;
    }
}

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

body {
    margin: 0;
    padding: 1.5rem 1.25rem 4rem;
    background: var(--ground);
    color: var(--ink);
    font: 400 17px/1.55 ui-serif, Georgia, "Times New Roman", serif;
    -webkit-text-size-adjust: 100%;   /* stop iOS inflating text on rotate */
}

main { max-width: 34rem; margin: 0 auto; }

/* The liturgy: lowercase, ending in a full stop. Set larger than a heading
   usually is, because on these pages the heading IS the page. */
h1 {
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: -0.01em;
    margin: 0 0 0.25rem;
}

h2 {
    font-size: 1.15rem;
    font-weight: 400;
    color: var(--ink-quiet);
    margin: 2.5rem 0 0.5rem;
}

p { margin: 0 0 1rem; }

.greeting { font-size: 1.4rem; margin-bottom: 2rem; }
.dark { color: var(--ink-quiet); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }

/* --------------------------------------------------------------------------
   Doors
   -------------------------------------------------------------------------- */

.doors { display: flex; flex-direction: column; gap: 1rem; margin: 2rem 0; }

.door {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--raised);
    border: 1px solid var(--line);
    border-radius: 4px;
}

label {
    font: 500 0.75rem/1 ui-sans-serif, system-ui, sans-serif;
    letter-spacing: 0.12em;
    color: var(--ink-quiet);
}

input {
    min-height: var(--tap);
    padding: 0 0.75rem;
    background: var(--ground);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: 3px;
    font: inherit;
    /* 17px minimum on the input itself: below 16px, iOS Safari zooms the
       whole page on focus and does not zoom back out. */
    font-size: 17px;
}

input:focus-visible, button:focus-visible, a:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

#code {
    letter-spacing: 0.5em;
    text-align: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

button {
    min-height: var(--tap);
    padding: 0 1.25rem;
    background: var(--ink);
    color: var(--ground);
    border: 0;
    border-radius: 3px;
    font: 500 0.8rem/1 ui-sans-serif, system-ui, sans-serif;
    letter-spacing: 0.12em;
    cursor: pointer;
}

button:disabled { opacity: 0.45; cursor: default; }

/* The quiet ones are sentences, not commands: `leave.` `remove.` `throw out.`
   They keep the 44px target while looking like prose. */
button.quiet, a.quiet {
    background: none;
    color: var(--ink-quiet);
    border: 0;
    padding: 0 0.4rem;
    font: inherit;
    font-size: 0.95rem;
    letter-spacing: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
    min-height: var(--tap);
    display: inline-flex;
    align-items: center;
}

button.quiet:hover, a.quiet:hover { color: var(--ink); }

/* --------------------------------------------------------------------------
   Lists: doors, and devices
   -------------------------------------------------------------------------- */

ul { list-style: none; margin: 0; padding: 0; }

li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--line);
}

li b {
    font-weight: 500;
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-quiet);
    min-width: 5.5rem;
}

li em { font-style: normal; color: var(--ink); }

/* --------------------------------------------------------------------------
   Refusals

   Announced to screen readers via role="alert" in the markup. Given real
   contrast rather than a whisper: a refusal the user does not notice is a
   user who taps the same button again and concludes the thing is broken.
   -------------------------------------------------------------------------- */

.refusal {
    margin-top: 1.5rem;
    padding: 0.75rem 1rem;
    background: var(--raised);
    border-left: 3px solid var(--alarm);
    color: var(--ink);
}

[hidden] { display: none !important; }

@media (prefers-reduced-motion: no-preference) {
    .refusal { animation: settle 180ms ease-out; }
    @keyframes settle {
        from { opacity: 0; transform: translateY(-3px); }
        to   { opacity: 1; transform: none; }
    }
}