/* ============================================================
   Strata mobile layer (Wave 1) -- ADDITIVE, phone-only.
   Every rule lives inside @media (max-width: 640px). This file is loaded
   AFTER platform/styles.css so it layers on top without editing any base
   desktop selector. Colors are tokens only (var(--*)); geometry is literal.
   Z-index band used here (slots into the platform scale -- popovers 4000,
   command 6000, dock 7000, tool 8000, modal 9000, toast 9999):
     mobile header / tab bar : 120 / 130   (below popovers; chrome covers it)
     sheet scrim / sheet      : 8800 / 8801 (above tool overlay, below modal)
   ============================================================ */

/* Base (all widths): the phone chrome is in the DOM always but hidden outside
   the phone breakpoint; the @media block below reveals + styles it. */
.strata-mobile-header,
.strata-mobile-tabs { display: none; }

@media (max-width: 640px) {

  /* ---------- Bottom-sheet primitive (F2) ---------- */

  .strata-bs-scrim {
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    z-index: 8800;
    opacity: 0;
    transition: opacity 0.2s linear;
  }
  .strata-bs-scrim.is-open { opacity: 1; }

  .strata-bs-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 8801;
    display: flex;
    flex-direction: column;
    max-height: 76dvh;
    background: var(--panel);
    border-radius: 20px 20px 0 0;
    box-shadow: var(--shadow-lg);
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
  }
  .strata-bs-sheet.is-open { transform: translateY(0); }
  /* Faster, sharper curve on the way out. */
  .strata-bs-sheet:not(.is-open) {
    transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
    transition-duration: 0.28s;
  }
  /* No transition while the finger is dragging the sheet. */
  .strata-bs-sheet.is-dragging { transition: none; }

  /* tier 'modal': lift sheet + scrim to the modal z-layer (above the normal
     8800/8801 sheet tier, below toast 9999) for sheet-styled dialogs (F3). */
  .strata-bs-scrim.strata-bs-modal { z-index: 9000; }
  .strata-bs-sheet.strata-bs-modal { z-index: 9001; }

  /* fullScreen: fill the viewport for a landscape PDF (F5 dock). */
  .strata-bs-sheet.strata-bs-full {
    max-height: none;
    height: calc(100dvh - env(safe-area-inset-top, 0px) - 12px);
  }

  /* Modal-as-sheet body (F3): content + stacked full-width actions, inside the
     scroll body so they lift above the keyboard. */
  .strata-modal-sheet-body { padding: 4px 16px 8px; }
  .strata-modal-sheet-body .strata-modal-body {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 16px;
  }
  .strata-modal-sheet-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding-bottom: 8px;
  }
  .strata-modal-sheet-actions > button { width: 100%; min-height: 48px; }
  /* Neutralize the real .strata-overlay/.strata-modal chrome when modal() reuses
     it INSIDE the sheet (so caller hooks resolve without the desktop fixed-center
     backdrop + card). The .strata-modal-sheet-body padding still applies. */
  .strata-bs-sheet .strata-overlay {
    position: static;
    inset: auto;
    display: block;
    background: none;
    z-index: auto;
    animation: none;
  }
  .strata-bs-sheet .strata-modal {
    background: none;
    box-shadow: none;
    border: none;
    border-radius: 0;
    max-width: none;
    width: auto;
    max-height: none;
    margin: 0;
    padding: 0;
    animation: none;
  }

  /* ---------- Dock-view as a bottom sheet (F5) ---------- */
  /* Re-skin the right-edge dock panel as a bottom sheet on phone: slide up,
     full-width, rounded top, safe-area aware; the 6px resize handle is dropped
     (un-grabbable on touch). The dock keeps its own lifecycle + close button.
     (Full-screen PDF + backdrop/swipe-dismiss are follow-ups.) */
  .strata-dock-panel {
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100% !important; /* beats dock.js's inline width:480px (line 347) */
    min-width: 0;
    max-height: 85dvh;
    border-left: none;
    border-top: 1px solid var(--border-strong);
    border-radius: 20px 20px 0 0;
    box-shadow: var(--shadow-lg);
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
  }
  .strata-dock-panel::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--border-strong);
    z-index: 2;
  }
  .strata-dock-panel-open { transform: translateY(0); }
  .strata-dock-panel-closing { transform: translateY(100%); }
  /* Lateral safe-area padding on the header AND the content. The retired Help
     modal carried four-sided safe-area padding on its own panel; the dock
     budgeted only the BOTTOM inset, so on a device with non-zero left/right
     insets -- an iPhone in landscape most obviously -- the header's close button
     and the body text could sit under the cutout: obscured, or hard to tap.
     max() keeps the existing 16px gutter when the inset is zero. Applies to every
     dock view on phone, not only Help. */
  .strata-dock-header {
    padding-top: 18px;
    border-radius: 20px 20px 0 0;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .strata-dock-resize { display: none; }
  .strata-dock-content {
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
  }

  /* ---------- Findings on touch (F6) ---------- */
  /* A >=44px hit area over a flagged cell's right edge; the finding opens as a
     bottom sheet (severity + explanation; suggested value + actions only when
     the finding carries them). */
  .strata-finding-hit {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 44px;
    min-height: 44px;
    z-index: 3;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .strata-finding-sheet { padding: 4px 16px 8px; }
  .strata-finding-sheet-desc { color: var(--text-secondary); font-size: 14px; line-height: 1.5; }
  .strata-finding-sheet-suggested {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    padding: 12px 14px;
    background: var(--accent-soft);
    border: 1px solid var(--accent-line);
    border-radius: var(--button-radius);
  }
  .strata-finding-sheet-sug-lbl {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent);
  }
  .strata-finding-sheet-sug-val { font-family: var(--font-mono); font-size: 14px; color: var(--text-primary); }
  .strata-finding-sheet-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
  }
  .strata-finding-sheet-actions > button { width: 100%; min-height: 44px; }

  .strata-bs-handle {
    width: 36px;
    height: 4px;
    margin: 12px auto 6px;
    border-radius: 2px;
    background: var(--border-strong);
    flex-shrink: 0;
    /* Bigger invisible grab area for the swipe-to-dismiss gesture. */
    position: relative;
    touch-action: none;
  }
  .strata-bs-handle::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 28px;
  }

  .strata-bs-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 4px 16px 10px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    transition: box-shadow 0.15s;
  }
  .strata-bs-sheet.is-scrolled .strata-bs-title { box-shadow: 0 1px 0 var(--border); }
  .strata-bs-title-text { flex: 1; min-width: 0; }
  .strata-bs-title h3 {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--text-primary);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .strata-bs-title small {
    display: block;
    margin-top: 1px;
    font-size: 11px;
    color: var(--text-tertiary);
  }
  .strata-bs-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    padding: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--border);
    color: var(--text-secondary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .strata-bs-close:active { background: var(--border-strong); }

  .strata-bs-search {
    position: relative;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .strata-bs-search-icon {
    position: absolute;
    left: 26px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    pointer-events: none;
    display: flex;
  }
  .strata-bs-search-input {
    width: 100%;
    height: 44px;
    padding: 0 14px 0 40px;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--button-radius);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 16px; /* prevents iOS focus-zoom */
    outline: none;
    transition: border-color 0.15s;
  }
  .strata-bs-search-input:focus { border-color: var(--accent); }
  .strata-bs-search-input::placeholder { color: var(--text-secondary); }

  .strata-bs-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .strata-bs-label {
    padding: 10px 16px 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
  }

  /* Combobox result rows */
  .strata-bs-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 8px 16px;
    border: none;
    border-bottom: 1px solid var(--border);
    background: transparent;
    color: var(--text-primary);
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .strata-bs-row:active { background: var(--row-hover); }
  .strata-bs-row.is-selected { background: var(--accent-soft); }
  .strata-bs-row-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
  .strata-bs-row-text { flex: 1; min-width: 0; }
  .strata-bs-row-label {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
  }
  .strata-bs-row-sub {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--text-tertiary);
    flex-shrink: 0;
  }
  .strata-bs-row-check { color: var(--accent); flex-shrink: 0; display: flex; }
  .strata-bs-row-create .strata-bs-row-label { color: var(--accent); font-weight: 600; }
  .strata-bs-mark { background: none; color: var(--accent); font-weight: 700; }

  /* Action-menu rows (kebab actions; reused by the nav Capture/More sheets) */
  .strata-bs-action {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 56px;
    padding: 8px 16px;
    border: none;
    border-bottom: 1px solid var(--border);
    background: transparent;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .strata-bs-action:active { background: var(--row-hover); }
  .strata-bs-action-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--input-bg);
    border: 1px solid var(--border);
    color: var(--text-secondary);
  }
  .strata-bs-action-text { flex: 1; min-width: 0; }
  .strata-bs-action-label {
    display: block;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
  }
  .strata-bs-action-sub { font-size: 12px; color: var(--text-tertiary); }
  .strata-bs-action-arrow { color: var(--text-tertiary); flex-shrink: 0; display: flex; }
  .strata-bs-action.is-destructive .strata-bs-action-icon {
    background: var(--error-soft);
    border-color: color-mix(in srgb, var(--error) 25%, transparent);
    color: var(--error);
  }
  .strata-bs-action.is-destructive .strata-bs-action-label { color: var(--error); }

  .strata-bs-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 24px;
    text-align: center;
  }
  .strata-bs-empty-icon { color: var(--text-secondary); opacity: 0.3; }
  .strata-bs-empty-title { font-size: 14px; font-weight: 500; color: var(--text-secondary); }
  .strata-bs-empty-hint { font-size: 12px; color: var(--text-tertiary); line-height: 1.5; }

  .strata-bs-safe { height: max(env(safe-area-inset-bottom, 0px), 12px); flex-shrink: 0; }

  /* ---------- Phone app shell (F1, Concept A) ---------- */

  html,
  body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
  }

  .strata-app {
    position: fixed;
    inset: 0;
    width: 100%;
    height: auto;
    min-height: 0;
    margin-top: 0;
  }

  .strata-has-dev-banner .strata-app {
    top: 28px;
    height: auto;
    margin-top: 0;
  }

  .strata-has-elevation-banner .strata-app {
    top: 32px;
    height: auto;
    margin-top: 0;
  }

  .strata-has-dev-banner.strata-has-elevation-banner .strata-app {
    top: 60px;
    height: auto;
    margin-top: 0;
  }

  /* Hide desktop chrome at phone width -- replaced by the mobile header + tabs. */
  .strata-topbar { display: none; }
  .strata-hamburger { display: none; }
  .strata-sidebar { display: none; }
  .strata-sidebar-backdrop { display: none; }

  /* Reserve the fixed header (top) + tab bar (bottom) space on .strata-main --
     the flex column that wraps .strata-content -- NOT on .strata-content itself.
     Modules that zero .strata-content padding win on specificity (full-bleed
     modules via body.strata-module-fullbleed, and home via
     `.strata-content:has(.strata-module-container[data-module="home"])`), so a
     clearance living on .strata-content gets erased and the module's content
     slides under the fixed header + tab bar. .strata-main is never touched by
     module CSS, so the reserved band survives; .strata-content flex-fills it and
     its height:100% children (home-root, full-bleed containers) resolve against
     the already-clamped middle band. */
  .strata-main {
    min-height: 0;
    padding-top: calc(44px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(49px + env(safe-area-inset-bottom, 0px));
  }
  /* Plain phone gutter; the header/tab clearance now lives on .strata-main.
     A flat 12px (no inset) avoids double-counting the safe-area inset that
     .strata-main already budgets. Modules that need edge-to-edge still win via
     their own higher-specificity padding:0 override. */
  .strata-content {
    min-height: 0;
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Header */
  .strata-mobile-header {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 120;
    align-items: center;
    gap: 10px;
    height: calc(44px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 12px 0;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
  }
  .strata-has-dev-banner .strata-mobile-header { top: 28px; }
  /* Clear the elevation/admin banner (pushes .strata-app down 32px) and the
     dev+elevation combo (60px) so the fixed phone header isn't covered. */
  .strata-has-elevation-banner .strata-mobile-header { top: 32px; }
  .strata-has-dev-banner.strata-has-elevation-banner .strata-mobile-header { top: 60px; }
  .strata-mh-project {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .strata-mh-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--project-color); flex-shrink: 0; }
  .strata-mh-project.is-all .strata-mh-dot { background: var(--text-tertiary); }
  .strata-mh-name {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .strata-mh-project.is-all .strata-mh-name { color: var(--text-secondary); }
  .strata-mh-chev { color: var(--text-tertiary); display: flex; flex-shrink: 0; }
  .strata-mh-right { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
  .strata-mh-findings {
    position: relative;
    width: 40px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .strata-mh-badge {
    position: absolute;
    top: 9px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--error);
    border: 1.5px solid var(--panel);
    display: none;
  }
  .strata-mh-findings.has-findings .strata-mh-badge { display: block; }
  .strata-mh-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--project-color);
    color: var(--studio-ink);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  /* Bottom tab bar */
  .strata-mobile-tabs {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 130;
    align-items: flex-start;
    height: calc(49px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--panel);
    border-top: 1px solid var(--border);
  }
  .strata-mt {
    flex: 1;
    height: 49px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: none;
    border: none;
    color: var(--text-tertiary);
    font-family: inherit;
    font-size: 10px;
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .strata-mt svg { width: 22px; height: 22px; }
  .strata-mt span { font-size: 10px; line-height: 1; }
  .strata-mt.active { color: var(--accent); }
  .strata-mt:active { opacity: 0.6; }
  .strata-mt-cap-chip {
    width: 36px;
    height: 27px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: var(--studio-ink);
  }
  .strata-mt-cap-chip svg { width: 18px; height: 18px; }

  /* Nav-list rows inside the More / project sheets */
  .strata-nav-sheet-icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--input-bg);
    border: 1px solid var(--border);
    color: var(--text-secondary);
  }
  .strata-nav-sheet-icon svg { width: 16px; height: 16px; }
  .strata-bs-row.is-selected .strata-nav-sheet-icon { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
  .strata-bs-row.is-selected .strata-bs-row-label { color: var(--accent); font-weight: 600; }

  /* Slice 7: Recent-projects rows in the project sheet. A muted second line
     shows the resumable module. The row is a NON-interactive container holding
     two SIBLING buttons: a full-width select button + a trailing Resume button
     (no nested interactive controls). The container is a flex row so the two
     siblings still read as a single row; the bottom hairline lives on the
     container so the inner select button can drop its own. */
  .strata-bs-row-recent {
    display: flex;
    align-items: stretch;
    width: 100%;
    border-bottom: 1px solid var(--border);
  }
  .strata-bs-row-recent.is-selected { background: var(--accent-soft); }
  /* The select button fills the row; it reuses .strata-bs-row but sheds the
     container-owned hairline and meets the 44px phone touch minimum. */
  .strata-bs-row-recent .strata-bs-row-recent-select {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    border-bottom: none;
    background: transparent;
  }
  .strata-bs-row-recent.is-selected .strata-bs-row-label { color: var(--accent); font-weight: 600; }
  .strata-bs-row-recent-sub {
    display: block;
    margin-top: 1px;
    font-size: 12px;
    color: var(--text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .strata-bs-resume {
    flex-shrink: 0;
    align-self: center;
    min-height: 44px;
    min-width: 44px;
    margin-right: 16px;
    padding: 0 16px;
    border: 1px solid var(--border-strong);
    border-radius: var(--button-radius);
    background: transparent;
    color: var(--accent);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .strata-bs-resume:active { background: var(--accent-soft); }

  /* ---------- Toast (F4): clear the tab bar + touch-sized controls ---------- */
  /* Overrides the earlier styles.css phone/safe-area toast rules (later source
     wins) so the toast floats ABOVE the F1 fixed tab bar (49px) + home indicator. */
  .strata-toast-container {
    bottom: calc(49px + env(safe-area-inset-bottom, 0px) + 12px);
    left: max(12px, env(safe-area-inset-left, 0px));
    right: max(12px, env(safe-area-inset-right, 0px));
    width: auto;
    max-width: none;
  }
  .strata-toast-action {
    min-height: 44px;
    padding: 0 16px;
    font-size: 13px;
    border-radius: var(--button-radius);
  }
  .strata-toast-dismiss {
    width: 44px;
    min-height: 44px;
  }

  /* ---------- Touch form controls (F7) ---------- */
  /* Kill the grey tap-flash + give a consistent pressed feedback so taps read
     app-like (the existing <=640 rules already force 16px inputs to stop iOS zoom). */
  a, button, [role="button"], input, select, textarea, label,
  .strata-bs-row, .strata-bs-action, .strata-mt, .strata-nav-sheet-row {
    -webkit-tap-highlight-color: transparent;
  }

  /* Text inputs + textareas: 44px tall, clear focus ring, error + helper. */
  .input-field,
  .strata-input {
    min-height: 44px;
    padding: 0 14px;
    border-width: 1px;
  }
  textarea.input-field,
  textarea.strata-input { padding: 12px 14px; }
  .input-field:focus,
  .strata-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .input-field.is-error,
  .strata-input.is-error { border-color: var(--error); }
  .input-field.is-error:focus,
  .strata-input.is-error:focus { box-shadow: 0 0 0 3px var(--error-soft); }
  .input-helper { font-size: 12px; color: var(--text-tertiary); margin-top: 6px; }
  .input-helper.is-error {
    color: var(--error);
    display: flex;
    align-items: center;
    gap: 6px;
  }

  /* Toggle: enlarge for touch (track 52x30, thumb 26, 22px travel). */
  .strata-toggle { width: 52px; height: 30px; }
  .strata-toggle-slider { border-radius: 15px; }
  .strata-toggle-slider::before { width: 26px; height: 26px; left: 2px; bottom: 2px; }
  .strata-toggle input:checked + .strata-toggle-slider::before { transform: translateX(22px); }

  /* Buttons: >=44px + pressed feedback. */
  .btn-primary, .btn-secondary, .btn-danger, .btn-ghost {
    min-height: 44px;
    touch-action: manipulation;
  }
  .btn-primary:active, .btn-secondary:active, .btn-danger:active, .btn-ghost:active { opacity: 0.7; }
  .btn-ghost {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary);
    border-radius: var(--button-radius);
    padding: 0 14px;
    font: inherit;
    cursor: pointer;
  }
  .btn-ghost:active { background: var(--row-hover); }

  /* Segmented control (new primitive). */
  .seg-ctrl {
    display: flex;
    padding: 3px;
    gap: 3px;
    background: var(--input-bg);
    border: 1px solid var(--border);
    border-radius: var(--button-radius);
  }
  .seg-opt {
    flex: 1;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    touch-action: manipulation;
  }
  .seg-opt.is-active {
    background: var(--panel);
    color: var(--text-primary);
    box-shadow: var(--shadow-sm);
  }

  /* ---------- Help panel (Help & Learning L0) -- RETIRED ---------- */
  /* Help is no longer a modal: it renders in the platform:help DOCK VIEW, so
     the phone full-bleed overrides for .strata-help-overlay / .strata-help-panel
     (100dvh, safe-area padding, overscroll containment) are gone. The dock's own
     phone treatment above -- bottom sheet, 85dvh, safe-area padding on
     .strata-dock-content, overscroll handled by the dock scroller -- now covers
     Help along with every other dock view. */

  /* Reduced motion: fade, no slide. */
  @media (prefers-reduced-motion: reduce) {
    .strata-bs-sheet { transform: none; opacity: 0; transition: opacity 0.2s linear; }
    .strata-bs-sheet.is-open { transform: none; opacity: 1; }
    .strata-dock-panel { transition: none; }
  }

}
/* end @media (max-width: 640px) */