/* viewport.css — short viewports, coarse pointers and safe areas. These
   override rules in the files linked before this one, so it must keep its
   place in the <link> order. */

/* ---- Short viewports (landscape phone, split-screen tablet) ----
   Everything above the feed is chrome, and at 390px of height the chrome
   was winning. These trim the shell — not the feed — so #action-log keeps
   the space its flex: 1 is asking for and the dock stays on screen. */
@media (max-height: 600px) {
    header.cmd-header { padding-top: var(--space-snug); padding-bottom: var(--space-snug); }
    .input-area { padding: var(--space-snug) var(--space-base); gap: var(--space-snug); }
    #action-log { padding: var(--space-base); gap: var(--space-snug); }
    .turn-stages:not(.is-sealed) .ts-top { top: calc(-1 * var(--space-base)); }   /* follows #action-log's padding */
    .view-panel { padding: var(--space-micro); gap: var(--space-micro); }
    .class-strip .seal, .class-strip .items { padding-top: var(--space-hair); padding-bottom: var(--space-hair); }
    .comms-head { padding: var(--space-tight) var(--space-base); }

    /* Touch sizing and a 390px viewport pull in opposite directions. The
       dock keeps its 44px targets — those are the primary interactions —
       and the chrome above concedes instead: still well past the 24px
       WCAG 2.2 target-size floor, just not the iOS 44px ideal. */
    .tab-btn, .theater-trigger, .utils-toggle, .strip-more { min-height: 40px; }

    /* Three stacked rows became one. The toggle, the order field and both
       dock buttons sit on a single line, which is ~106px back to the feed;
       the tray drops below them at full width when it is opened. */
    .input-area { flex-direction: row; flex-wrap: wrap; align-items: center; }
    #radio-transcript-box { order: 0; flex: 0 0 100%; }
    /* The order field keeps a full row — packed onto one line with the
       buttons it came out at ~180px, and that is the control you type
       the demo into. The toggle and both dock buttons share the row
       below it, which is still one row fewer than the stack was. */
    #player-action { order: 1; flex: 1 1 100%; min-width: 0; }
    .suggest-toggle { order: 2; flex: 0 0 auto; }
    .dock-actions { order: 3; flex: 1 1 auto; }
    #suggested-prompts.is-open { order: 4; flex: 0 0 100%; }
}

#suggested-prompts { display: flex; flex-direction: column; gap: var(--space-snug); }

/* The tray is a convenience; the feed is the product. It used to collapse
   only below 600px of height, on the theory that above that both fit. They
   did not (phase 13, measured): at 1440x900 the dock held 304px under a
   364px feed, and at 1024x768 it was taller than the feed it serves, so a
   sealed order showed its radio block and nothing else. The tray is open on
   a fresh console, where it teaches what to type, and folds itself when an
   order runs (ui/actions.js foldSuggestions); the toggle says what it opens. */
.suggest-toggle {
    display: inline-flex; align-items: center; gap: var(--space-snug); align-self: flex-start;
    background: transparent; border: 1px solid var(--control-border); color: var(--text-primary);
    font-family: var(--font-display); font-size: var(--type-caption); font-weight: 500;
    letter-spacing: var(--track-control); text-transform: uppercase;
    padding: var(--space-tight) var(--space-snug); border-radius: var(--radius); cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.suggest-toggle:hover { border-color: var(--surface-border-strong); background: var(--tint-objective); }
.suggest-toggle:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; }
.suggest-toggle .ico { transition: transform var(--dur-fast) var(--ease-out); }
.suggest-toggle[aria-expanded="true"] .ico { transform: rotate(90deg); }
#suggested-prompts { display: none; }
#suggested-prompts.is-open { display: flex; }

/* ---- Touch input ----
   Screen width does not tell you input method: a 1024px tablet and a
   1024px laptop matched the same media queries and got the same 34px
   tab bar. These size by pointer instead, so the console's desktop
   density is untouched and only touch devices pay for the bigger
   targets. Measured before this: 27-30 controls under 44x44 on every
   touch viewport, including the suggestion chips at 28px — the most
   tapped element on a phone. */
@media (pointer: coarse) {
    .tab-btn, .action-tab, .action-chip, .rail-toggle, .suggest-toggle,
    .theater-trigger, .utils-toggle, .strip-more, .sheet-close, .field-head,
    .btn-ghost, .btn-danger, .btn-inline, .es-action,
    #retry-engine-btn, #submit-btn, #force-drop-btn,
    select, input[type="text"] { min-height: 44px; }

    /* Icon-only controls need the width too, or they stay 38px wide.
       The tab bar joins them below 640px, where it swaps to the short
       labels and "KB" collapses to a 36px-wide target. */
    .theater-trigger, .utils-toggle, .strip-more, .sheet-close,
    .tab-btn { min-width: 44px; }

    /* A 44px chip in a 34px row would clip; the rail grows with them. */
    .action-featured { --chip-row: 46px; }

    /* Space between adjacent targets, so the wrong one is harder to hit. */
    .action-tabs { gap: var(--space-snug); }
    .action-featured { gap: var(--space-base); }
    .dock-actions { gap: var(--space-shell); }
}

/* ---- Safe areas ----
   viewport-fit=cover lets the shell paint edge to edge, which is what
   this console wants — but it also puts the order field and Transmit
   Order under an iPhone home indicator, and the drawer under a landscape
   notch. Backgrounds still bleed; only the padding grows, and max()
   means a device reporting zero insets renders exactly as before. */
header.cmd-header {
    padding-left:  max(var(--gutter-shell), env(safe-area-inset-left));
    padding-right: max(var(--gutter-shell), env(safe-area-inset-right));
}
.class-strip .seal  { padding-left:  max(var(--space-shell), env(safe-area-inset-left)); }
.class-strip .items { padding-right: max(var(--space-shell), env(safe-area-inset-right)); }
.view-panel {
    padding-left:  max(var(--space-base), env(safe-area-inset-left));
    padding-right: max(var(--space-base), env(safe-area-inset-right));
}
.input-area { padding-bottom: max(var(--space-shell), env(safe-area-inset-bottom)); }
@media (max-width: 1000px) {
    .command-rail {
        padding-left:   max(var(--space-shell), env(safe-area-inset-left));
        padding-bottom: max(var(--space-shell), env(safe-area-inset-bottom));
    }
}

/* Short viewports still want the tighter dock; they just want it to clear
   the home indicator too. Last word, so neither rule cancels the other. */
@media (max-height: 600px) {
    .input-area { padding-bottom: max(var(--space-snug), env(safe-area-inset-bottom)); }
}