/*
 * The phone layer (docs/plans/mobile-layout.md).
 *
 * Every page loads this last, after its other stylesheets. All of its rules sit inside the one
 * media block below, so desktop and tablet are untouched, except the menu button's default
 * (hidden), which has to live outside it.
 *
 * "A phone" (Bart, 2026-11-07): 600px wide or narrower, OR a short touch screen -- a phone
 * turned sideways -- which has to be just as playable ("we need an equally playable UI").
 * Keep the two halves of the query together everywhere this file is extended.
 *
 * P1 (this file today): the shell -- real visible height, notch and home-bar clearance, the
 * header's controls behind one menu button, the Seed box at 16px so iOS does not zoom,
 * 44px note buttons, story text at reading size. P2-P4 extend it; see the plan's section 3.
 * Checked by tests/validate-phone-layout.mjs.
 */

.phone-menu-btn {
    display: none;
}

@media (max-width: 600px), (max-height: 500px) and (pointer: coarse) {
    :root {
        --phone-gutter: 16px;
        --phone-header: 48px;
        --tap: 44px;
    }

    /* ---- Shell: the height the player can actually see, not the tallest the browser might be */
    .app-container {
        height: 100vh;
        height: 100dvh;
    }

    /* ---- Header: one 48px row (logo, then the menu button), clear of the notch */
    .app-header {
        position: relative;
        height: calc(var(--phone-header) + env(safe-area-inset-top, 0px));
        padding: env(safe-area-inset-top, 0px) max(var(--phone-gutter), env(safe-area-inset-right, 0px)) 0 max(var(--phone-gutter), env(safe-area-inset-left, 0px));
        gap: 8px;
    }
    .app-header .tagline {
        display: none;
    }

    .home-header {
        position: relative;
        flex-wrap: nowrap;
        box-sizing: border-box;
        height: calc(var(--phone-header) + env(safe-area-inset-top, 0px));
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: 0;
        padding-left: max(var(--phone-gutter), env(safe-area-inset-left, 0px));
        padding-right: max(var(--phone-gutter), env(safe-area-inset-right, 0px));
    }
    .home-header .home-tagline {
        display: none;
    }
    .home-header .home-logo {
        height: 28px;
    }
    /* A flex child of the page; without this it keeps its content's width and pokes past the edge */
    .home-container {
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
    }
    .home-header-top {
        position: static;
        margin-left: auto;
    }

    .phone-menu-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: var(--tap);
        height: var(--tap);
        margin-left: auto;
        padding: 0;
        background: none;
        border: 1px solid var(--border);
        border-radius: 8px;
        color: var(--text-primary);
        font-size: 1.1rem;
        cursor: pointer;
    }
    .phone-menu-btn[aria-expanded="true"] {
        border-color: var(--accent);
        color: var(--accent);
    }

    /* Closed: the controls are folded away. "Stop narration" stays in the bar while it shows,
       so stopping the voice never means opening a menu. */
    .header-actions:not(.phone-open) > :not(#narration-stop) {
        display: none !important;
    }
    .app-header .header-actions:not(.phone-open) {
        margin-left: auto;
    }
    .header-actions:not(.phone-open) #narration-stop span {
        display: none;
    }
    .app-header .header-actions:not(.phone-open) + .phone-menu-btn {
        margin-left: 0;
    }

    /* Open: a full-width list under the header, every item a full row with its label */
    .header-actions.phone-open {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 1100;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: 6px max(var(--phone-gutter), env(safe-area-inset-right, 0px)) 10px max(var(--phone-gutter), env(safe-area-inset-left, 0px));
        max-height: calc(100dvh - var(--phone-header) - env(safe-area-inset-top, 0px));
        overflow-y: auto;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border);
        box-shadow: 0 10px 24px var(--shadow);
    }
    .header-actions.phone-open .user-info {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: 0;
        border: 0;
    }
    .header-actions.phone-open .header-btn,
    .header-actions.phone-open .dropdown-item {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        width: 100%;
        min-height: var(--tap);
        margin: 0;
        padding: 0 4px;
        font-size: 1rem;
        background: none;
        border: 0;
        border-radius: 0;
        border-bottom: 1px solid var(--border);
    }
    .header-actions.phone-open .header-btn span,
    .header-actions.phone-open .header-btn .btn-label {
        display: inline !important;
    }
    .header-actions.phone-open .header-btn.hidden {
        display: none !important;
    }
    .header-actions.phone-open .user-dropdown,
    .header-actions.phone-open .user-dropdown-menu {
        position: static;
        width: 100%;
    }
    .header-actions.phone-open .user-dropdown-trigger {
        display: none !important;
    }
    .header-actions.phone-open .user-dropdown-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        min-width: 0;
        margin: 0;
        background: none;
        box-shadow: none;
    }
    .header-actions.phone-open .dropdown-header {
        padding: 10px 4px 4px;
    }
    .header-actions.phone-open .dropdown-divider {
        display: none;
    }
    /* The desktop hover tooltips have nothing to hover on a phone */
    .header-actions.phone-open [data-tooltip]::after,
    .header-actions.phone-open [data-tooltip]::before {
        display: none !important;
    }

    /* ---- Story text at reading size (long-form prose wants 17-18px on a phone) */
    .app-container .story-beat {
        font-size: 1.0625rem;
        line-height: 1.6;
    }
    .story-container {
        padding-left: max(var(--phone-gutter), env(safe-area-inset-left, 0px));
        padding-right: max(var(--phone-gutter), env(safe-area-inset-right, 0px));
    }

    /* ---- Input: 16px or iOS zooms the page when the Seed box is tapped (the older fix in
       style.css loses to a more specific rule) */
    .input-form .textarea-wrapper .user-input,
    .input-area textarea,
    .input-area input[type="text"] {
        font-size: 16px;
    }
    /* Clear the home bar. (The sides keep style.css's padding: overriding it narrows the notes,
       which then wrap taller and take room from the story.) */
    .input-area {
        padding-bottom: calc(var(--spacing-sm) + env(safe-area-inset-bottom, 0px));
        margin-bottom: 0;
    }
    /* The play page's thin site footer: phones under 768px already drop it (style.css); a phone
       turned sideways is wider than that and needs the room as much */
    .app-container ~ .site-footer,
    body:has(.app-container) .site-footer {
        display: none;
    }

    /* ---- Notes: the pager and dismiss buttons get a 44px touch area. It is an invisible
       pseudo-element, not a bigger box: in today's one-line note row a wider button narrows the
       note's text, which wraps taller and takes room from the story (the squeeze P2 removes by
       restacking the note into a card). */
    .notice-step,
    .notice-lane .hint-dismiss {
        position: relative;
    }
    .notice-step::after,
    .notice-lane .hint-dismiss::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: var(--tap);
        height: var(--tap);
        transform: translate(-50%, -50%);
    }
}


/*
 * P2: reading first on the play page (public/js/phone-play.js sets the body classes).
 *   reading            the story fills the screen; the Seed is one line, beside a Panels button
 *   .phone-composing   the full input, with a "Your move / Close" bar
 *   .phone-panels-open the story rail as a sheet from the bottom
 */
@media (max-width: 600px), (max-height: 500px) and (pointer: coarse) {
    /* A long scene title wraps instead of pushing its edit button past the edge (the heading's
       look is otherwise unchanged; A6, Matthew's) */
    .scene-title-wrapper {
        max-width: 100%;
        min-width: 0;
    }
    .scene-title-wrapper .scene-title {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .app-header .title-link {
        display: inline-flex;
        align-items: center;
        min-height: var(--tap);
    }

    /* ---- Reading: one line at the bottom */
    body:not(.phone-composing) .input-area .input-left-controls,
    body:not(.phone-composing) .input-area .seed-label,
    body:not(.phone-composing) .input-area .char-counter,
    body:not(.phone-composing) .input-area .voice-seed-btn,
    body:not(.phone-composing) .input-area .input-status,
    body:not(.phone-composing) .input-area #whisper-line,
    body:not(.phone-composing) .input-area #submit-btn,
    body:not(.phone-composing) .input-area #close-scene-btn:disabled,
    body:not(.phone-composing) .input-area #interrupt-btn:not(.active):not(.pending) {
        display: none !important;
    }
    body:not(.phone-composing) .input-form {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 8px;
    }
    body:not(.phone-composing) .input-form .textarea-wrapper {
        flex: 1;
        min-width: 0;
        margin: 0;
    }
    body:not(.phone-composing) .input-form .textarea-wrapper .user-input {
        height: var(--tap);
        min-height: var(--tap);
        padding: 10px 12px;
        resize: none;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    body:not(.phone-composing) .input-actions,
    body:not(.phone-composing) .input-buttons {
        display: contents;
    }
    /* Interrupt while a passage is coming, Close Scene once it unlocks: icons in the bar */
    body:not(.phone-composing) .input-buttons > button {
        flex: none;
        width: var(--tap);
        min-width: var(--tap);
        height: var(--tap);
        min-height: var(--tap);
        padding: 0;
        justify-content: center;
    }
    body:not(.phone-composing) .input-buttons > button span {
        display: none;
    }
    body:not(.phone-composing) .phone-panels-btn {
        display: inline-flex;
    }

    .phone-panels-btn {
        align-items: center;
        justify-content: center;
        flex: none;
        width: var(--tap);
        height: var(--tap);
        padding: 0;
        background: var(--bg-tertiary, var(--bg-secondary));
        border: 1px solid var(--border);
        border-radius: 8px;
        color: var(--text-primary);
        font-size: 1.1rem;
        cursor: pointer;
    }
    .phone-panels-btn[aria-expanded="true"] {
        border-color: var(--accent);
        color: var(--accent);
    }
    /* A first-story hint pointing into the sheet lights the button that opens it */
    body:has(.story-rail .paced-hint-target) .phone-panels-btn {
        border-color: var(--accent);
        box-shadow: 0 0 0 2px var(--accent);
    }

    /* ---- Composing: the full input, its own title bar, Continue with its word back */
    body.phone-composing .phone-composer-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 4px;
    }
    .phone-composer-title {
        font-family: var(--font-ui);
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--accent);
    }
    .phone-done-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-width: var(--tap);
        min-height: var(--tap);
        padding: 0 12px;
        background: none;
        border: 0;
        color: var(--accent);
        font: 600 0.95rem var(--font-ui);
        cursor: pointer;
    }
    body.phone-composing .submit-btn .btn-text {
        display: inline;
    }
    body.phone-composing .submit-btn i {
        margin-right: 6px;
    }
    body.phone-composing .voice-seed-btn {
        min-width: var(--tap);
        min-height: var(--tap);
        top: 0;
        right: 0;
    }
    /* The story column keeps the last lines in view above the open input */
    body.phone-composing .story-column {
        min-height: 72px;
    }

    /* ---- The note: one full-width card -- label, pager and dismiss on top, the words below,
       two lines until tapped (Bart, 2026-11-07: "stop squeezing it") */
    .notice-lane.has-notes {
        display: block;
        position: relative;
    }
    .notice-lane > .mirror-moment,
    .notice-lane > .craft-hint,
    .notice-lane > .tweak-tip {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas: "label voice dismiss" "text text text";
        align-items: center;
        column-gap: 0;
        row-gap: 0;
    }
    .notice-lane > .lane-waiting {
        display: none;
    }
    .notice-lane .mirror-label,
    .notice-lane .craft-hint-label,
    .notice-lane .paced-hint-label {
        grid-area: label;
        min-height: var(--tap);
        display: flex;
        align-items: center;
    }
    .notice-lane .mirror-question,
    .notice-lane .craft-hint-text,
    .notice-lane .tweak-tip-text {
        grid-area: text;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
        cursor: pointer;
    }
    .notice-lane .phone-expanded .mirror-question,
    .notice-lane .phone-expanded .craft-hint-text,
    .notice-lane .phone-expanded .tweak-tip-text {
        display: block;
        -webkit-line-clamp: unset;
        line-clamp: none;
        max-height: 40dvh;
        overflow-y: auto;
    }
    .notice-lane .paced-hint-voice {
        grid-area: voice;
    }
    .notice-lane .hint-dismiss,
    .notice-lane .tweak-tip-dismiss {
        grid-area: dismiss;
        width: var(--tap);
        height: var(--tap);
        min-width: var(--tap);
        min-height: var(--tap);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .notice-lane .tweak-tip-voice {
        min-width: var(--tap);
        min-height: var(--tap);
    }
    .notice-lane .hint-dismiss::after {
        content: none;
    }
    /* "1 of 2" sits in the label row, left of the dismiss (and of the voice button, if any) */
    .notice-lane-steps {
        position: absolute;
        top: 0;
        right: var(--tap);
        height: var(--tap);
        margin: 0;
    }
    .notice-lane:has(> .tweak-tip:not(.lane-waiting) .tweak-tip-voice:not(.hidden)) .notice-lane-steps {
        right: calc(var(--tap) * 2);
    }
    .notice-step {
        width: var(--tap);
        height: var(--tap);
        min-width: var(--tap);
        min-height: var(--tap);
    }
    .notice-step::after {
        content: none;
    }

    /* ---- The rail: a sheet from the bottom, opened by the Panels button. Badge order is the
       rail's own (A1, kept), Inner Knowledge first and full width. */
    .story-rail.sidebar-column {
        display: none;
    }
    body.phone-panels-open .story-rail.sidebar-column {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 990;
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-content: start;
        gap: 8px;
        width: auto;
        max-height: 75dvh;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 24px max(var(--phone-gutter), env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(var(--phone-gutter), env(safe-area-inset-left, 0px));
        background: var(--bg-secondary);
        border: 0;
        border-top: 1px solid var(--border);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -12px 32px var(--shadow);
    }
    body.phone-panels-open .story-rail.sidebar-column::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        width: 40px;
        height: 4px;
        margin-left: -20px;
        border-radius: 2px;
        background: var(--border);
    }
    body.phone-panels-open .story-rail .rail-btn {
        flex-direction: row;
        justify-content: flex-start;
        gap: 10px;
        width: auto;
        min-height: 52px;
        padding: 8px 12px;
        border: 1px solid var(--border);
        border-radius: 10px;
        white-space: normal;
        text-align: left;
    }
    body.phone-panels-open .story-rail .rail-btn.hidden {
        display: none;
    }
    body.phone-panels-open .story-rail .rail-btn i {
        display: inline-block;
    }
    body.phone-panels-open .story-rail .rail-btn .rail-badge {
        margin-left: auto;
    }
    body.phone-panels-open .story-rail #inquiry-trigger {
        grid-column: 1 / -1;
        border-color: var(--accent);
    }
    body.phone-panels-open .story-rail .rail-tools {
        grid-column: 1 / -1;
        display: flex;
        justify-content: space-around;
        margin-top: 4px;
    }
    body.phone-panels-open .story-rail .copy-url-btn {
        width: var(--tap);
        height: var(--tap);
        font-size: 1rem;
    }
    body.phone-panels-open .phone-panels-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 980;
        background: rgba(0, 0, 0, 0.5);
    }
}

/* A phone turned sideways: plenty of width, little height. The note is one row (label, words,
   pager, dismiss) and the sheet has four columns, so the story keeps the screen. */
@media (max-height: 500px) and (pointer: coarse) {
    .notice-lane > .mirror-moment,
    .notice-lane > .craft-hint,
    .notice-lane > .tweak-tip {
        grid-template-columns: auto minmax(0, 1fr) auto auto;
        grid-template-areas: "label text voice dismiss";
        column-gap: 12px;
    }
    .notice-lane .mirror-question,
    .notice-lane .craft-hint-text,
    .notice-lane .tweak-tip-text {
        -webkit-line-clamp: 1;
        line-clamp: 1;
    }
    .notice-lane:has(> .notice-lane-steps:not(.hidden)) .mirror-question,
    .notice-lane:has(> .notice-lane-steps:not(.hidden)) .craft-hint-text,
    .notice-lane:has(> .notice-lane-steps:not(.hidden)) .tweak-tip-text {
        margin-right: 140px;
    }
    body.phone-panels-open .story-rail.sidebar-column {
        grid-template-columns: repeat(4, 1fr);
        max-height: 85dvh;
    }
    body.phone-panels-open .story-rail #inquiry-trigger {
        grid-column: span 2;
    }
}


/*
 * P3: the keyboard and the audio strip (the heading's tools on touch are in the touch block below)
 * (public/js/phone-play.js sets --kb-inset and the phone-keyboard / phone-audio-on classes).
 */
@media (max-width: 600px), (max-height: 500px) and (pointer: coarse) {
    /* ---- The keyboard. On iOS it covers the page without resizing it: the page is shortened
       by the keyboard's height so the Seed and Continue sit just above it. (Android resizes the
       page itself, and --kb-inset stays 0.) */
    .app-container {
        height: calc(100dvh - var(--kb-inset, 0px));
    }
    /* Typing: the story keeps what room there is. The notes wait until the keyboard goes down,
       the home-bar clearance is under the keyboard anyway, and Continue keeps its place. */
    body.phone-keyboard .input-area #notice-lane {
        display: none;
    }
    body.phone-keyboard .input-area {
        padding-bottom: var(--spacing-sm);
    }

    /* ---- The audio strip: one slim row above the bar while narration plays. It carries Stop,
       so the header's Stop is not needed beside it. */
    .phone-audio-strip:not([hidden]) {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 4px;
        padding-left: 4px;
        color: var(--accent);
        font: 600 0.8rem var(--font-ui);
        letter-spacing: 0.02em;
    }
    .phone-audio-strip .phone-audio-label {
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .phone-audio-btn {
        flex: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-width: var(--tap);
        min-height: var(--tap);
        padding: 0 12px;
        background: none;
        border: 1px solid var(--border);
        border-radius: 8px;
        color: var(--text-primary);
        font: 600 0.85rem var(--font-ui);
        cursor: pointer;
    }
    .phone-audio-btn[hidden] {
        display: none;
    }
    body.phone-audio-on .header-actions:not(.phone-open) > #narration-stop {
        display: none !important;
    }
}

/* Typing with little left above the keyboard (a phone turned sideways: about 190px). Only the
   Seed and Continue stay, side by side, and the story keeps the rest. The header, the composer's
   title bar, Intent and Suggest, the Whisper and the status line come back with the keyboard down. */
@media (max-width: 600px), (max-height: 500px) and (pointer: coarse) {
    body.phone-keyboard .app-header {
        display: none !important;
    }
    body.phone-keyboard-tight .phone-composer-bar,
    body.phone-keyboard-tight .input-area .input-left-controls,
    body.phone-keyboard-tight .input-area #whisper-line,
    body.phone-keyboard-tight .input-area .seed-label,
    body.phone-keyboard-tight .input-area .char-counter,
    body.phone-keyboard-tight .input-area .input-status,
    body.phone-keyboard-tight .input-area #close-scene-btn,
    body.phone-keyboard-tight .input-area #interrupt-btn:not(.active):not(.pending) {
        display: none !important;
    }
    body.phone-keyboard-tight .input-form {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 8px;
    }
    body.phone-keyboard-tight .input-form .textarea-wrapper {
        flex: 1;
        min-width: 0;
        margin: 0;
    }
    body.phone-keyboard-tight .input-form .textarea-wrapper .user-input {
        height: 64px;
        min-height: 64px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    body.phone-keyboard-tight .input-actions,
    body.phone-keyboard-tight .input-buttons {
        display: flex;
        margin: 0;
    }
    body.phone-keyboard-tight .input-area #submit-btn {
        min-height: var(--tap);
        height: 100%;
    }
}

/* A phone turned sideways: the audio strip sits in the header's free middle, where the header's
   Stop was, so it costs the story no height */
@media (max-height: 500px) and (pointer: coarse) {
    .phone-audio-strip:not([hidden]) {
        position: fixed;
        z-index: 1050;
        top: env(safe-area-inset-top, 0px);
        right: calc(max(var(--phone-gutter), env(safe-area-inset-right, 0px)) + var(--tap) + 12px);
        height: var(--phone-header);
        margin: 0;
    }
}


/*
 * P4: the other pages on a phone -- My Library, the story view, watch, Browse, Settings.
 * (No page scrolls sideways any more since P1; these are what is still cut off or cramped.)
 */
@media (max-width: 600px), (max-height: 500px) and (pointer: coarse) {
    /* ---- A story's title wraps instead of being cut off ("THE SHRINE'S L..."): My Library's
       cards and the story view's heading, where the letter-spaced capitals ran out at 360px */
    .story-card .story-title,
    .story-view-page .story-title.story-title-page {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
    }
    .story-card .story-title .multiplayer-badge {
        white-space: nowrap;
    }

    /* ---- The story view: the prose gets the phone's width, not a card inside a page. One 16px
       gutter (the story container's), not the column's padding on top of it. */
    .story-view-page .story-view-column {
        padding-left: 0;
        padding-right: 0;
    }
    .story-view-page .scene-accordion {
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }
    .story-view-page .scene-accordion-header {
        padding: 0.75rem 0.5rem;
        min-height: 44px;
    }
    .story-view-page .scene-accordion-title {
        flex-wrap: wrap;
        row-gap: 0.25rem;
        min-width: 0;
    }
    .story-view-page .scene-accordion.open .scene-accordion-content {
        padding: 1rem 0 0.75rem;
    }
    .story-view-page .beat-divider {
        flex-wrap: wrap;
        gap: 8px;
    }
    .story-view-page .beat-actions,
    .story-view-page .story-view-actions {
        flex-wrap: wrap;
    }
    .story-view-page .story-view-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }


    /* ---- Browse: the search and a Filters button on one row; the rest folds behind the button,
       so the scenarios show on the first screen */
    .filters-toggle {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex: none;
        min-height: 44px;
        padding: 0 14px;
        background: var(--bg-tertiary);
        border: 1px solid var(--border);
        border-radius: 6px;
        color: var(--text-primary);
        font: inherit;
        cursor: pointer;
    }
    .filters-toggle[aria-expanded="true"] {
        border-color: var(--accent);
        color: var(--accent);
    }
    .scenarios-filter-bar {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
    }
    .scenarios-filter-bar .filter-search {
        flex: 1;
        min-width: 0;
    }
    .scenarios-filter-bar:not(.filters-open) > .filter-group,
    .scenarios-filter-bar:not(.filters-open) > .filter-reset {
        display: none;
    }
    .scenarios-filter-bar.filters-open > .filter-group,
    .scenarios-filter-bar.filters-open > .filter-reset {
        flex: 0 0 100%;
    }
}

/*
 * Touch screens: phones and tablets (Bart, 2026-11-08: "We need it to work well on a phone,
 * tablet, or desktop/laptop. However, desktop/laptop is the primary use case.")
 *
 * A tablet keeps the desktop layout; this block only makes it touch-ready: the page stays above
 * the on-screen keyboard, every control takes a 44px tap, and nothing waits for a hover that
 * never comes. A mouse or trackpad (pointer: fine) never matches, so desktops and laptops,
 * touch-screen laptops included, are untouched. Phones match it too, under the phone rules above.
 */
@media (pointer: coarse) and (hover: none) {
    /* ---- The keyboard: iPad Safari, like iPhone, covers the page without resizing it */
    .app-container {
        height: calc(100dvh - var(--kb-inset, 0px));
    }
    /* Typing: the notes and the status line wait until the keyboard goes down */
    body.touch-keyboard .input-area #notice-lane,
    body.touch-keyboard .input-area .input-status {
        display: none !important;
    }
    /* Under 520px left (a tablet turned sideways): the header and the Whisper wait too */
    body.touch-keyboard-short .app-header,
    body.touch-keyboard-short .input-area #whisper-line {
        display: none !important;
    }

    /* ---- 44px taps */
    .header-btn,
    .home-header .header-btn,
    .btn--sm {
        min-height: 44px;
    }
    .app-header .title-link,
    .home-logo-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    .upgrade-nudge-close {
        min-width: 44px;
        min-height: 44px;
    }
    .story-rail .rail-btn {
        min-height: 44px;
    }
    .story-rail .copy-url-btn {
        min-width: 44px;
        min-height: 44px;
    }
    .notice-step,
    .notice-lane .hint-dismiss {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .input-area #intent-toggle,
    .input-area .suggest-btn,
    .input-area .submit-btn,
    .input-area .interrupt-btn,
    .input-area .close-scene-btn {
        min-height: 44px;
    }
    /* ---- Every form field at 16px: under that, iOS and iPadOS zoom the page when it is tapped
       (Browse's search and selects were 13.6-14.4px, every Settings field 14.4px). And a
       44px tap. */
    input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]):not([type=hidden]),
    select,
    select.form-select,
    select.filter-select,
    textarea {
        font-size: 16px;
    }
    input:is([type=text], [type=email], [type=password], [type=search], [type=tel], [type=url], [type=number], :not([type])),
    select {
        min-height: 44px;
    }
    .filter-search {
        padding-top: 0;
        padding-bottom: 0;
    }
    .story-action-btn,
    .filter-reset,
    .usage-manage-btn {
        min-width: 44px;
        min-height: 44px;
    }
    .site-footer a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
    /* Watch: "Play narration as it arrives" -- the whole row is the tap, the box a visible size */
    .watch-bar label {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-height: 44px;
    }
    .watch-bar input[type=checkbox] {
        width: 20px;
        height: 20px;
        flex: none;
    }
    .whisper-line {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    .voice-seed-btn {
        width: 44px;
        height: 44px;
        top: 0;
        right: 0;
    }

    /* ---- The play page on a tablet (Ms. Kimura's tablet audit, 2026-11-08) */
    /* The Seed box and the Inner Knowledge question: style.css's own rules (0.95rem) beat the
       16px rule above, and iPadOS zooms on anything smaller (her H1) */
    .input-form .textarea-wrapper .user-input,
    textarea.inquiry-input {
        font-size: 16px;
    }
    /* The play page's thin site footer goes, as phones' already does: sideways, it was part of
       why a story opened with no prose on screen (H2) */
    body:has(.app-container) .site-footer {
        display: none;
    }
    /* The header on one row: the tagline goes below 1280px, labels never wrap (L1) */
    .header-btn {
        white-space: nowrap;
    }
    @media (max-width: 1279px) {
        .app-header .tagline {
            display: none;
        }
    }
    /* The desktop rail (a tablet sideways): its three story tools in one column, and the rail
       scrolls if it runs out of height (M2) */
    .story-rail.sidebar-column {
        overflow-y: auto;
    }
    .story-rail .rail-tools {
        grid-template-columns: 44px;
    }
    /* The rail as a row (a tablet upright): a fade at the end that hides more buttons, so the
       row reads as one that scrolls (M1; phone-play.js sets the classes) */
    .story-rail.rail-more-right {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
        mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
    }
    .story-rail.rail-more-left.rail-more-right {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
        mask-image: linear-gradient(to right, transparent, #000 48px, #000 calc(100% - 48px), transparent);
    }
    .story-rail.rail-more-left:not(.rail-more-right) {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 48px);
        mask-image: linear-gradient(to right, transparent, #000 48px);
    }
    /* Interrupt and Close Scene: the cost goes under the label instead of spilling out (M3) */
    .input-area #interrupt-btn:has(.touch-cost),
    .input-area #close-scene-btn:has(.touch-cost) {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 0;
        white-space: normal;
    }
    .input-area #interrupt-btn .touch-cost,
    .input-area #close-scene-btn .touch-cost {
        flex-basis: 100%;
        text-align: center;
        margin-left: 0 !important;
    }
    /* The controls the first pass missed (M5) */
    .tweak-tip-voice,
    .tweak-tip-dismiss,
    .scene-nav-btn,
    .inquiry-close,
    .modal-close,
    .tour-btn,
    .turn-actions .media-btn {
        min-width: 44px;
        min-height: 44px;
    }
    .tweak-tip-voice,
    .tweak-tip-dismiss,
    .modal-close,
    .inquiry-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* ---- The heading's tools: there is no hover to find them by, so they show, and each takes
       a 44px tap. A visible change to the book-style heading (A6): the pens and the
       narrate/illustrate buttons are larger and always shown. */
    .scene-opening .story-title-edit-btn,
    .scene-opening .scene-title-edit-btn {
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        opacity: 1;
        transition: none;
    }
    .scene-opening .story-title-edit-btn {
        font-size: 0.8rem;
        color: var(--text-muted);
    }
    .scene-opening .media-btn {
        transition: none;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
    }
    .scene-opening .opening-controls {
        flex-wrap: wrap;
        row-gap: 6px;
    }
}