/* ==========================================================================
           #T  Help, and the small print
           --------------------------------------------------------------------------
           Two rooms on one stylesheet, drawn by public/29g-help.js and 29h-legal.js,
           because they are the same sheet in the same hand and the reader walks straight
           from one to the other. Built 2026-09-08.

           It is the About sheet's grammar with its own prefix: a bar, bands, and rows
           that are allowed to be sentences. The one thing here that no other room in this
           family has is a place to write — Help takes a message back — and that brings
           the writing line's own grammar with it, the same one Settings, the Password
           form, Saved's search and the Tool kit's amount all use.
           ========================================================================== */
        #helpPage,
        #legalPage {
            background: var(--log-stock);
        }

        #helpPage.active,
        #legalPage.active {
            display: flex;
            flex-direction: column;
            height: 100vh;
            height: 100dvh;
            min-height: 0;
            /* A page with a text box on it: a hidden box scrolled by a focused field
               pushes the head off the screen. */
            overflow: clip;
        }

        /* ---- the head ------------------------------------------------------------ */

        /* The head, its title and Back are the room head (.room-bar, css/11-home.css, since
           2026-09-16). What is this room's own: the page is a column with its own scroller,
           so the head must not shrink into it. */
        #helpPage .hp-bar,
        #legalPage .hp-bar {
            flex: none;
        }

        /* ---- the sheet ----------------------------------------------------------- */

        #helpPage .hp-body,
        #legalPage .hp-body {
            flex: 1;
            min-height: 0;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding-bottom: calc(var(--sp-2xl) + env(safe-area-inset-bottom, 0px));
        }

        #helpPage .hp-band,
        #legalPage .hp-band {
            margin: 0;
            padding: var(--sp-xs) var(--sp-lg);
            background: var(--log-stock-band);
            border-top: 1px solid var(--log-rule-firm);
            border-bottom: 1px solid var(--log-rule-firm);
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--log-ink);
        }
        /* Nothing stands above the first band but the bar's own rule. */
        #helpPage .hp-band-first,
        #legalPage .hp-plate + .hp-band { border-top: none; }

        /* ---- a statement --------------------------------------------------------- */

        /* Stacked, not set across. These are answers, and the Register's one-line entry
           would put an answer into an ellipsis. */
        #helpPage .hp-line,
        #legalPage .hp-line {
            display: flex;
            flex-direction: column;
            gap: 2px;
            padding: var(--sp-sm) var(--sp-lg);
            border-bottom: 1px solid var(--log-rule);
        }

        #helpPage .hp-what,
        #legalPage .hp-what {
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--log-ink);
        }

        #helpPage .hp-said,
        #legalPage .hp-said {
            font-family: var(--log-write);
            font-size: var(--fs-small);
            line-height: 1.45;
            color: var(--log-ink-soft);
            max-width: 40em;
        }

        #helpPage .hp-para,
        #legalPage .hp-para {
            margin: 0;
            padding: var(--sp-sm) var(--sp-lg);
            font-family: var(--log-write);
            font-size: var(--fs-small);
            line-height: 1.5;
            color: var(--log-ink);
            max-width: 38em;
        }

        /* ---- a row that goes somewhere -------------------------------------------- */

        /* Built on the statement's own grid, and marked as an act the only way this world
           marks one: the word underlined, in print caps, in the one ink. No glyph, and no
           magenta — none of these changes the record. */
        #helpPage .hp-go,
        #legalPage .hp-go {
            width: 100%;
            text-align: left;
            background: none;
            border: none;
            border-bottom: 1px solid var(--log-rule);
            font: inherit;
            color: inherit;
            cursor: pointer;
        }
        #helpPage .hp-go-word,
        #legalPage .hp-go-word {
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--log-ink);
            text-decoration: underline;
            text-underline-offset: 0.25em;
            text-decoration-thickness: 1px;
        }
        /* The Ink-Not-Glow Rule: pressing thickens the row's own baseline. */
        #helpPage .hp-go:active,
        #legalPage .hp-go:active { box-shadow: inset 0 -2px 0 0 var(--log-ink); }
        #helpPage .hp-go:focus-visible,
        #legalPage .hp-go:focus-visible {
            outline: 2px solid var(--log-ink);
            outline-offset: -2px;
        }

        /* ---- writing something back ----------------------------------------------- */

        /* The writing line's grammar, as everywhere else: transparent on the stock, the
           write face, the ink caret; focused, the band ground and a two-pixel ink
           baseline. No box, because a box here would be the only one in the world. */
        #helpPage .hp-write {
            padding: var(--sp-sm) var(--sp-lg);
            border-bottom: 1px solid var(--log-rule);
        }
        #helpPage .hp-write:focus-within {
            background: var(--log-stock-lit, #DEE4E2);
            box-shadow: inset 0 -2px 0 0 var(--log-ink);
        }
        #helpPage .hp-in {
            display: block;
            width: 100%;
            box-sizing: border-box;
            min-height: 88px;
            padding: 0;
            border: none;
            background: transparent;
            font-family: var(--log-write);
            font-size: var(--fs-body);
            line-height: 1.5;
            color: var(--log-ink);
            caret-color: var(--log-ink);
            /* No resize handle. `resize: vertical` makes the browser draw its own grabber
               in the corner — a glyph this world did not draw and cannot style, on a page
               whose rule against glyphs is stated without exception. The box scrolls
               inside itself and grows on its own below, so nothing is owed to a control
               that was never designed. Found in a capture by the finish review,
               2026-09-08. */
            resize: none;
            -webkit-appearance: none;
            appearance: none;
        }
        #helpPage .hp-in::placeholder { color: var(--log-ink-soft); }
        #helpPage .hp-in:focus-visible { outline: none; }

        #helpPage .hp-foot {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--sp-sm);
            padding: 0 var(--sp-lg);
            border-bottom: 1px solid var(--log-rule);
        }

        #helpPage .hp-note-line {
            font-family: var(--log-write);
            font-size: var(--fs-small);
            color: var(--log-ink-soft);
        }

        /* Send carries the magenta: it puts something somewhere it cannot be taken back
           from, which is the whole of what the colour means here. Disabled takes the
           softer pressure of the one ink rather than a grey of its own. */
        #helpPage .hp-act {
            margin-left: auto;
            min-height: 44px;
            padding: 0;
            background: none;
            border: none;
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            text-decoration: underline;
            text-underline-offset: 0.25em;
            text-decoration-thickness: 1px;
            color: var(--log-ink);
            cursor: pointer;
        }
        #helpPage .hp-act.is-mark { color: var(--log-magenta); }
        #helpPage .hp-act:disabled {
            color: var(--log-ink-soft);
            cursor: default;
            text-decoration-color: var(--log-rule);
        }

        /* ---- the small print's own plate ------------------------------------------- */

        #legalPage .hp-plate {
            padding: var(--sp-lg);
            border-bottom: 1px solid var(--log-rule-firm);
        }

        /* When it was written, stamped rather than written, because it is a fact about the
           document and not part of it. */
        #legalPage .hp-stamped {
            margin: 0 0 var(--sp-xs);
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--log-ink-soft);
        }

        #legalPage .hp-lede {
            margin: 0;
            font-family: var(--log-write);
            font-size: var(--fs-body);
            line-height: 1.5;
            color: var(--log-ink);
            max-width: 34em;
        }

        /* The Ruled-To-The-Foot Rule: what is left of the sheet is ruled stock. */
        #helpPage .hp-rule-out,
        #legalPage .hp-rule-out {
            flex: 1;
            min-height: calc(var(--log-row) * 2);
            background-image: repeating-linear-gradient(to bottom,
                transparent 0,
                transparent calc(var(--log-row) - 1px),
                var(--log-rule) calc(var(--log-row) - 1px),
                var(--log-rule) var(--log-row));
        }

        /* ---- what the writer says back ---------------------------------------------- */

        /* The label. A placeholder is not one: it vanishes on the first keystroke and is
           not read as a name, which is WCAG 3.3.2 and 4.1.2. Drawn rather than hidden,
           because a field on a sheet of statements needs saying aloud anyway. */
        #helpPage .hp-label {
            display: block;
            margin-bottom: var(--sp-2xs);
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            color: var(--log-ink-soft);
        }

        /* A send that did not go, in the port ink this world keeps for a fault. It has its
           own slot: it shared one with the character counter, and the counter wiped it a
           tick later, so a failed send reported nothing at all. */
        #helpPage .hp-fault {
            flex: 1;
            min-width: 0;
            font-family: var(--log-write);
            font-size: var(--fs-small);
            line-height: 1.35;
            color: var(--log-port);
        }
        #helpPage .hp-fault:empty { display: none; }

        /* Held, not sent. The Stamped-State Rule, the same hairline box the small print's
           date takes: a fact about the state, in the softer ink, and content rather than a
           control. The row said SENT over a message that was only queued. */
        #helpPage .hp-line.is-held {
            flex-direction: row;
            flex-wrap: wrap;
            align-items: baseline;
            gap: var(--sp-xs);
        }
        #helpPage .hp-line.is-held .hp-said { flex-basis: 100%; }
        #helpPage .hp-stamp {
            flex: none;
            font-family: var(--log-print);
            font-size: var(--fs-micro);
            font-weight: 600;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--log-ink-soft);
            border: 1px solid var(--log-rule);
            padding: 2px var(--sp-xs);
        }

        /* The result takes focus after a send, so it must show that it has it. */
        #helpPage .hp-what:focus-visible {
            outline: 2px solid var(--log-ink);
            outline-offset: 2px;
        }