/* aac.transaction.science — AAC communication app styles.
 *
 * Design principles:
 * 1. Large touch targets (minimum 48px, eye gaze needs 80px+)
 * 2. High contrast by default
 * 3. No decorative elements that waste space
 * 4. Every pixel serves communication
 * 5. Adapts to phone/tablet/desktop
 */

/* ─── Reset ──────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    width: 100%;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: manipulation;
}

/* Page zoom stays available (browser and OS zoom, and pinching outside the
   board), but a pinch that starts on the board is ignored: an accidental pinch
   must not move the words a person relies on finding in the same place. */
.board-area {
    touch-action: pan-x pan-y;
}

/* ─── Shell ──────────────────────────────────────────── */
.aac-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    background: #f5f5f5;
    color: #1a1a1a;
}

.aac-shell.fullscreen {
    position: fixed;
    inset: 0;
    z-index: 9999;
}

/* ─── Color modes ────────────────────────────────────── */
.aac-shell.high-contrast {
    background: #000;
    color: #fff;
}

.aac-shell.dark {
    background: #1a1a1a;
    color: #e0e0e0;
}

.aac-shell.yellow-on-black {
    background: #000;
    color: #FFD700;
}

/* ─── Output strip ───────────────────────────────────── */
.output-strip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #fff;
    border-bottom: 2px solid #ddd;
    min-height: 64px;
    flex-shrink: 0;
}

.high-contrast .output-strip {
    background: #111;
    border-bottom-color: #444;
}

.output-buffer {
    flex: 1;
    font-size: 1.5em;
    font-weight: 600;
    padding: 8px 12px;
    min-height: 48px;
    display: flex;
    align-items: center;
    color: #333;
    overflow-x: auto;
    white-space: nowrap;
}

.high-contrast .output-buffer { color: #fff; }
.yellow-on-black .output-buffer { color: #FFD700; }

.output-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.output-btn {
    min-width: 48px;
    min-height: 48px;
    border: 2px solid #ccc;
    border-radius: 8px;
    background: #fff;
    font-size: 1.4em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s;
}

.output-btn:active { background: #e0e0e0; }
.output-btn:disabled { opacity: 0.3; cursor: default; }

.speak-btn {
    min-width: 80px;
    background: #2196F3;
    color: #fff;
    border-color: #1976D2;
    font-size: 1.6em;
}

.speak-btn:active { background: #1976D2; }

/* ─── Prediction bar ─────────────────────────────────── */
/* One height whether empty or full: suggestions appearing must never move
   or resize a cell below it (SPEC §3). */
.prediction-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    background: #e8e8e8;
    overflow-x: auto;
    overflow-y: hidden;
    flex-shrink: 0;
    box-sizing: border-box;
    height: 3.25em;
    min-height: 44px;
}

.high-contrast .prediction-bar { background: #222; }

.prediction-cell {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: 2.4em;
    padding: 0 16px;
    border: 1px solid #bbb;
    border-radius: 20px;
    background: #fff;
    font-size: 1em;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.prediction-cell:active { background: #d0d0d0; }
.high-contrast .prediction-cell { background: #333; color: #fff; border-color: #666; }

/* ─── Board area ─────────────────────────────────────── */
.board-area {
    flex: 1;
    position: relative;
    overflow: hidden;
    padding: 4px;
}

.grid-board {
    width: 100%;
    height: 100%;
}

/* The grid fills the board area, whatever its cells hold: without a height on
   the wrapper the grid was sized by its content (cells ~34px tall on any
   screen), and any content change — a symbol, a longer word — moved every
   cell. The word-finding bar, when shown, takes its own height first. */
.grid-board-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.grid-board-wrapper > .grid-board {
    flex: 1 1 0;
    min-height: 0;
    height: auto;
}

/* ─── Grid cell ──────────────────────────────────────── */
.grid-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 2px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    padding: 4px;
    overflow: hidden;
    transition: transform 0.05s;
    min-width: 0;
    min-height: 0;
}

.grid-cell:active { transform: scale(0.95); }
.grid-cell.empty { border-color: transparent; cursor: default; }
.grid-cell.cell-has-border { border-width: 3px; }

.reduced-motion .grid-cell { transition: none; }

/* The symbol fills the height the label leaves, inside the cell box, so
   symbols on, off or in another set never move or resize a cell (the grid's
   1fr tracks and the cell's min-size 0 fix the box). The sprite's own colours
   are kept, even in forced-colours mode. */
.cell-symbol {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    pointer-events: none;
    forced-color-adjust: none;
}
.cell-symbol + .cell-label { flex-shrink: 0; }
/* Arrows point the way the board reads (grid_cell.rs marks which). */
[dir="rtl"] .cell-symbol-mirror-rtl { transform: scaleX(-1); }
/* Blissymbols are black lines: drawn light on a dark cell. */
.cell-symbol-lines-on-dark { filter: invert(1); }
@media (forced-colors: active) {
    /* Cell colours are replaced by the system's; a light plate keeps every
       set's black lines visible whatever that colour is. */
    .cell-symbol { background: #fff; border-radius: 6px; }
    .cell-symbol-lines-on-dark { filter: none; }
}

.cell-label {
    font-size: 0.85em;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ─── Scan overlay ───────────────────────────────────── */
.scan-overlay {
    position: absolute;
    inset: 4px;
    pointer-events: none;
    z-index: 10;
}

/* The highlight is drawn by the scanned cells themselves (grid_cell.rs):
   a thick outline in the scan colour plus a halo, visible on any cell colour. */
.grid-cell.scan-highlighted {
    outline: 6px solid #ffb300;
    outline-offset: 2px;
    box-shadow: 0 0 0 10px rgba(255, 179, 0, 0.35);
    position: relative;
    z-index: 2;
}
.high-contrast .grid-cell.scan-highlighted { outline-color: #ffff00; box-shadow: 0 0 0 10px rgba(255, 255, 0, 0.45); }

/* Large highlight (Settings → switch scanning): at least 8 px, or 3 % of the
   cell's shorter side, and everything else on the board dimmed while the
   scan is on it. Nothing moves or changes size (SPEC §3, §5.5). */
.scan-large .grid-cell.scan-highlighted {
    outline-width: max(8px, 3vmin);
    outline-offset: 3px;
    box-shadow: 0 0 0 max(14px, 4vmin) rgba(255, 179, 0, 0.45);
}
.scan-large .grid-board:has(.grid-cell.scan-highlighted) .grid-cell:not(.scan-highlighted) { opacity: 0.4; }
.scan-large .output-actions button.scan-highlighted,
.scan-large .navigation-bar .scan-highlighted { outline-width: 8px; }

/* A sequence (sequences.rs): the line just said, and "2 of 4". */
.cell-sequence {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 0.8em;
    line-height: 1.2;
    max-width: 100%;
    flex-shrink: 0;
}
.cell-sequence-line { font-style: italic; overflow-wrap: anywhere; }
.cell-sequence-step { opacity: 0.8; font-variant-numeric: tabular-nums; }
.output-btn.sequence-undo { outline: 2px dashed currentColor; outline-offset: -4px; }

/* Undo, in Clear's place just after a Clear (or a suggestion in place of the
   words): the message bar's Clear, a board's Clear cell, text mode's Clear.
   Amber, so it is plain that pressing it now brings words back. */
.output-btn.undo-clear, .text-btn.undo-clear {
    background: #fff3c4;
    border-color: #b07d00;
    color: #5a3e00;
}
.grid-cell.undo-clear { box-shadow: inset 0 0 0 4px #b07d00; }
.dark .output-btn.undo-clear, .dark .text-btn.undo-clear,
.high-contrast .output-btn.undo-clear, .high-contrast .text-btn.undo-clear,
.yellow-on-black .output-btn.undo-clear, .yellow-on-black .text-btn.undo-clear {
    background: #4a3800;
    border-color: #ffd600;
    color: #fff;
}
.high-contrast .grid-cell.undo-clear, .yellow-on-black .grid-cell.undo-clear { box-shadow: inset 0 0 0 4px #ffd600; }

/* Text mode's Clear and the Undo in its place are one width, so the change
   moves nothing beside it. */
.text-btn.clear-btn { width: 3.5em; padding-left: 0; padding-right: 0; text-align: center; }

/* Read by screen readers only (the shell's live region). */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* The message bar in switch scanning (output_strip.rs): the bar as one
   group, then each of its buttons, outlined where they are, so nothing
   moves. */
.output-actions.scan-highlighted {
    outline: 6px solid #ffb300;
    outline-offset: 4px;
    box-shadow: 0 0 0 14px rgba(255, 179, 0, 0.35);
    border-radius: 8px;
}
.output-actions button.scan-highlighted {
    outline: 6px solid #ffb300;
    outline-offset: 2px;
    box-shadow: 0 0 0 10px rgba(255, 179, 0, 0.35);
    position: relative;
    z-index: 2;
}
.high-contrast .output-actions.scan-highlighted, .high-contrast .output-actions button.scan-highlighted,
.yellow-on-black .output-actions.scan-highlighted, .yellow-on-black .output-actions button.scan-highlighted {
    outline-color: #ffff00;
    box-shadow: 0 0 0 10px rgba(255, 255, 0, 0.45);
}

.scan-row-highlight,
.scan-cell-highlight {
    position: absolute;
    border-radius: 8px;
    animation: scan-pulse 0.5s ease-in-out infinite alternate;
}

@keyframes scan-pulse {
    from { opacity: 0.7; }
    to { opacity: 1.0; }
}

.reduced-motion .scan-row-highlight,
.reduced-motion .scan-cell-highlight {
    animation: none;
    opacity: 1.0;
}

/* ─── Dwell overlay ──────────────────────────────────── */
.dwell-overlay {
    position: absolute;
    inset: 4px;
    pointer-events: none;
    z-index: 10;
}

.dwell-ring {
    position: absolute;
    width: 48px;
    height: 48px;
}

/* ─── Navigation bar ─────────────────────────────────── */
.navigation-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    background: #fff;
    border-top: 2px solid #ddd;
    min-height: 52px;
    flex-shrink: 0;
}

.high-contrast .navigation-bar { background: #111; border-top-color: #444; }

.nav-left, .nav-center, .nav-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

.nav-btn {
    min-width: 44px;
    min-height: 44px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #fff;
    font-size: 1.2em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-btn:active { background: #e0e0e0; }
.nav-btn:disabled { opacity: 0.3; }
.high-contrast .nav-btn { background: #222; color: #fff; border-color: #555; }

/* More (⋯, navigation_bar.rs): under 640 px the tools used less often are
   in its menu, so the bar is never wider than the screen. Its items are
   large (48 px), with their names. */
.nav-more { position: relative; display: none; }
.nav-more-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px;
    min-width: 220px;
    max-width: calc(100vw - 16px);
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
.nav-more-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background: #fff;
    color: inherit;
    font-size: 1em;
    text-align: left;
    cursor: pointer;
}
.nav-more-item span { font-size: 1.2em; }
.nav-more-item:active { background: #e0e0e0; }
.high-contrast .nav-more-menu, .high-contrast .nav-more-item { background: #222; color: #fff; border-color: #fff; }
.dark .nav-more-menu, .dark .nav-more-item { background: #2b2b2b; color: #eee; border-color: #666; }
.yellow-on-black .nav-more-menu, .yellow-on-black .nav-more-item { background: #000; color: #FFD700; border-color: #FFD700; }
.nav-more-item:focus-visible { outline: 3px solid #0d47a1; outline-offset: 2px; }
.dark .nav-more-item:focus-visible, .high-contrast .nav-more-item:focus-visible,
.yellow-on-black .nav-more-item:focus-visible { outline-color: #ffd600; }
@media (max-width: 639px) {
    .nav-tool { display: none; }
    .nav-more { display: flex; }
    /* The partner modes' ⋯ is in More's menu, as a large named button. */
    .partner-menu-btn { display: none; }
}
/* Back, Home and Help, the partner button, text mode, More and Settings:
   closer together on a phone, and a little narrower (still 44 px high) on
   the narrowest, so all of them fit at 320 px. */
@media (max-width: 399px) {
    .navigation-bar { padding: 4px; }
    .nav-left, .nav-center, .nav-right { gap: 2px; }
}
@media (max-width: 339px) {
    .navigation-bar .nav-btn { min-width: 42px; }
}

.nav-energy {
    font-size: 0.75em;
    color: #595959; /* 7:1 on the white bar */
    padding: 0 8px;
}
.high-contrast .nav-energy { color: #ddd; }

/* ─── Panels ─────────────────────────────────────────── */
.panel-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    justify-content: flex-end;
}

.panel-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
}

.panel-content {
    position: relative;
    width: min(400px, 85vw);
    height: 100%;
    background: #fff;
    overflow-y: auto;
    box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
}

.high-contrast .panel-content { background: #111; }

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid #ddd;
    position: sticky;
    top: 0;
    background: inherit;
    z-index: 1;
}

.panel-title {
    font-size: 1.2em;
    font-weight: 700;
}

.panel-close {
    width: 36px;
    height: 36px;
    border: none;
    background: none;
    font-size: 1.2em;
    cursor: pointer;
    border-radius: 50%;
}

.panel-close:active { background: #e0e0e0; }

.panel-body {
    padding: 16px;
}

/* ─── Settings ───────────────────────────────────────── */
.settings-section {
    margin-bottom: 24px;
}

.settings-section h3 {
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #666;
    margin-bottom: 8px;
}

.settings-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.settings-btn {
    padding: 10px 16px;
    border: 2px solid #ddd;
    border-radius: 8px;
    background: #fff;
    font-size: 0.9em;
    cursor: pointer;
}

.settings-btn.active {
    background: #1976D2; /* white on it: 4.6:1 */
    color: #fff;
    border-color: #0D47A1;
}

.settings-sliders {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.settings-sliders input[type="range"] {
    width: 100%;
}

/* ─── Analytics ──────────────────────────────────────── */
.metric-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.metric {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    background: #f0f0f0;
    border-radius: 8px;
}

.metric-value { font-size: 1.5em; font-weight: 700; }
.metric-label { font-size: 0.75em; color: #666; }

.top-words {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.top-word {
    padding: 4px 10px;
    background: #e8e8e8;
    border-radius: 12px;
    font-size: 0.85em;
}

.analytics-hint {
    font-size: 0.8em;
    color: #666;
    margin-bottom: 8px;
}

.unused-words {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.unused-word {
    padding: 4px 10px;
    background: #FFF3E0;
    border: 1px solid #FFB74D;
    border-radius: 12px;
    font-size: 0.85em;
    color: #9A3700; /* on #FFF3E0: 6.6:1 */
}

.analytics-export-btn {
    padding: 12px 24px;
    background: #1976D2;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
}

.analytics-export-btn:hover {
    background: #1565C0;
}

.analytics-export-btn:active {
    background: #0D47A1;
}

/* ─── Voice banking ──────────────────────────────────── */
.vb-progress-bar {
    height: 12px;
    background: #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
}

.vb-progress-fill {
    height: 100%;
    background: #4CAF50;
    transition: width 0.3s;
}

.vb-phrase-card {
    padding: 16px;
    background: #f9f9f9;
    border: 2px solid #ddd;
    border-radius: 8px;
    text-align: center;
}

.vb-phrase-text { font-size: 1.2em; margin-bottom: 12px; }
.vb-record-btn {
    padding: 12px 24px;
    background: #f44336;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 1em;
    cursor: pointer;
}

/* ─── Responsive ─────────────────────────────────────── */

/* Phone */
@media (max-width: 767px) {
    .output-buffer { font-size: 1.2em; }
    .output-btn { min-width: 40px; min-height: 40px; }
    .prediction-cell { padding: 0 12px; font-size: 0.9em; }
}

/* Desktop */
@media (min-width: 1025px) {
    .output-buffer { font-size: 1.8em; }
    .grid-cell { border-radius: 10px; }
    .panel-content { width: min(500px, 40vw); }
}

/* ─── Text Mode (literate users) ────────────────────── */
.text-mode {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    padding: 8px;
    overflow-y: auto;
}

.text-input-area {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.text-input {
    width: 100%;
    min-height: 80px;
    padding: 12px;
    font-size: 1.4em;
    border: 2px solid #ccc;
    border-radius: 8px;
    resize: vertical;
    font-family: inherit;
}

.text-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.text-btn {
    padding: 10px 16px;
    border: 2px solid #ccc;
    border-radius: 8px;
    font-size: 1em;
    cursor: pointer;
    background: #f0f0f0;
    min-height: 44px;
}

.text-btn.speak-btn {
    background: #1976D2;
    color: #fff;
    border-color: #1565C0;
    flex: 1;
    font-size: 1.2em;
    min-height: 56px;
}

.text-btn:disabled { opacity: 0.4; cursor: default; }

.text-predictions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    min-height: 40px;
}

.prediction-pill {
    padding: 8px 14px;
    background: #e3f2fd;
    border: 1px solid #90CAF9;
    border-radius: 16px;
    cursor: pointer;
    font-size: 0.95em;
}

.prediction-pill:hover { background: #BBDEFB; }

.text-toggle-row {
    display: flex;
    justify-content: center;
}

.text-toggle {
    padding: 6px 16px;
    background: none;
    color: inherit;
    border: 1px solid #999;
    border-radius: 16px;
    cursor: pointer;
    font-size: 0.85em;
}

.text-toggle.active { background: #e0e0e0; }
.dark .text-toggle, .high-contrast .text-toggle { border-color: #aaa; }
.dark .text-toggle.active, .high-contrast .text-toggle.active { background: #3d3d3d; border-color: #fff; }
.yellow-on-black .text-toggle { border-color: #ffd700; }
.yellow-on-black .text-toggle.active { background: #3a3200; }

/* Quick phrases */
.quick-phrases {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.phrase-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.phrase-tab {
    padding: 8px 12px;
    background: #f0f0f0;
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.2em;
    min-width: 44px;
    min-height: 44px;
}

.phrase-tab.active {
    border-color: #1976D2;
    background: #e3f2fd;
}

.phrase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 6px;
}

.phrase-btn {
    padding: 10px;
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95em;
    text-align: center;
    min-height: 44px;
}

.phrase-btn:hover { border-color: #1976D2; background: #f5f5f5; }

.recent-messages h4 {
    font-size: 0.85em;
    color: #666;
    margin-bottom: 4px;
}

.recent-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.recent-msg-btn {
    padding: 8px 12px;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    text-align: left;
    cursor: pointer;
    font-size: 0.9em;
}

/* ─── Visual scenes (scene_board.rs) ──────────────────── */
/* The picture whole, scaled to the room the board area leaves (a size
   container), its shape from the scene (--scene-aspect, width over height):
   a hotspot's box is a share of it, so it is where it was on every screen.
   The row of words goes under it, or beside it at the end the language
   reads towards (the board area's dir). Once the board is measured
   (scene_board.rs), its sizes are set in pixels too (--scene-words-px, the
   picture's width and height): where container queries are not supported
   (Safari 15), that is what sizes it.
   Layers over the picture, bottom to top: the hotspots (a smaller one over
   a larger, z-index 1–199 from scene_board.rs), the large highlight's dim
   (200), the words of every hotspot (300), the words just chosen (400), the
   outlines (500: the scan's is never under words), a partner's marking
   (600). */
.grid-board.scene-board {
    display: flex;
    flex-direction: column;
    gap: 6px;
    container-type: size;
}
.grid-board.scene-board.scene-beside { flex-direction: row; }
.scene-stage {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    container-type: size;
    display: flex;
    align-items: center;
    justify-content: center;
}
.scene-picture {
    position: relative;
    /* Its layers (z-index 1–600) stack inside the picture only: never over a
       panel (Settings, the cell editor), a menu or a message. */
    isolation: isolate;
    width: min(100cqw, calc(100cqh * var(--scene-aspect, 1.333)));
    height: min(100cqh, calc(100cqw / var(--scene-aspect, 1.333)));
    border-radius: 6px;
    overflow: hidden;
    background: #eceff1;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
.scene-editing .scene-picture { touch-action: none; cursor: crosshair; }
.scene-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }
.scene-image-waiting { background: repeating-linear-gradient(45deg, #eceff1 0 12px, #e0e4e7 12px 24px); }
/* A hotspot: a button over the picture, at its share of it. Nothing is
   drawn on the photo outside Edit mode but the access method's highlight
   and the words the person chose to see. */
.scene-board .scene-picture .scene-hotspot {
    position: absolute;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: inherit;
    min-width: 0;
    min-height: 0;
    transform: none;
    z-index: 1;
}
.scene-board .scene-picture .scene-hotspot:active { background: rgba(255, 255, 255, 0.18); transform: none; }
/* The scan's and the dwell's outlines are drawn on the hotspot's own shape
   (below); the dwell's ring stays on the button. */
.scene-board .scene-picture .scene-hotspot.scan-highlighted,
.scan-large .scene-board .scene-picture .scene-hotspot.scan-highlighted,
.scene-board .scene-picture .scene-hotspot.dwell-target,
.scene-board .scene-picture .scene-hotspot.dwell-pointed { outline: none; box-shadow: none; }
.scene-board .scene-picture .scene-hotspot:focus-visible { outline: 4px solid #1976d2; outline-offset: 0; }
.scene-editing .scene-picture .scene-hotspot { background: rgba(255, 255, 255, 0.12); }
.scene-editing .scene-picture .scene-hotspot.cell-hidden { background: rgba(0, 0, 0, 0.35); }
.scene-badges { position: absolute; top: 2px; inset-inline-end: 2px; font-size: 1.1em; }
/* Outlines: drawn over the picture on the hotspot's own shape, a dark line
   under a light one, so they show on light and dark photos alike. */
.scene-outlines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 500; overflow: visible; }
.scene-outline polygon { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-width: 0; }
.scene-outline-scanned .scene-outline-under { stroke: #000; stroke-width: 11px; }
.scene-outline-scanned .scene-outline-over { stroke: #ffd400; stroke-width: 5px; }
.scene-outline-large .scene-outline-under { stroke-width: 17px; }
.scene-outline-large .scene-outline-over { stroke-width: 9px; }
.scene-outline-dwell:not(.scene-outline-scanned) .scene-outline-under { stroke: #000; stroke-width: 8px; }
.scene-outline-dwell:not(.scene-outline-scanned) .scene-outline-over { stroke: #ffb300; stroke-width: 4px; }
.scene-outline-edit:not(.scene-outline-scanned) .scene-outline-under { stroke: #000; stroke-width: 4px; }
.scene-outline-edit:not(.scene-outline-scanned) .scene-outline-over { stroke: #fff; stroke-width: 2px; stroke-dasharray: 8 6; }
.scene-outline-hidden { opacity: 0.55; }
/* The way's next press on a hotspot (finder.rs): its own shape, the way's
   dashed line on its halo — the grid's way's colours and pulse, not the
   scan's — under the scan's outline. On a large hotspot it is wider than
   the scan's outline, so both show; on a small one it narrows with the
   hotspot (scene_board.rs way_stroke sets the widths), so the picture
   under it still shows. The hotspot's button draws no box of its own (it
   has no .way-ring), so its ::after is the dwell's ring alone. */
.scene-path polygon { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.scene-path-under { stroke: var(--way-halo); stroke-width: var(--path-halo, 21px); }
.scene-path-over {
    stroke: var(--way-line);
    stroke-width: var(--path-w, 15px);
    stroke-dasharray: var(--path-dash, 14px 8px);
    animation: scene-path-pulse 1.4s ease-in-out infinite;
}
@keyframes scene-path-pulse { 50% { stroke: var(--way-faint); } }
/* Lit by the scan (scene_board.rs): the way's dashes alone, with no halo,
   drawn straight on the scan outline's yellow band (5 px on its 11 px dark
   line; 9 px on 17 px with the large highlight). They are narrower than the
   band and their gaps as long as they are, so the yellow (the scan's "lit")
   shows beside them and between them, and the band's dark edges show
   outside it. The band is the same yellow (#ffd400) in every theme, and so
   are the dashes' colours: both ends of their pulse keep 3:1 or more
   against it (#6a1b9a about 6.6:1, #8e24aa about 4.9:1), in every theme. */
.scene-path.scene-path-lit { --way-line: #6a1b9a; --way-faint: #8e24aa; }
.scene-path.scene-path-lit .scene-path-over { stroke-width: 3px; stroke-dasharray: 6px 6px; }
.scene-path.scene-path-lit.scene-path-large .scene-path-over { stroke-width: 5px; stroke-dasharray: 9px 9px; }
/* Lit by the dwell instead (scene_board.rs: a pointer or the eyes resting
   on it, not scanned, outside Edit mode): the same dashes on the dwell
   outline's amber band (4 px on its 8 px dark line), 2 px wide with gaps as
   long, so amber shows beside and between them and the dark edges outside
   it. The amber is #ffb300 in every theme: the dashes keep 5.2:1 (#6a1b9a)
   and 3.9:1 (#8e24aa) against it. */
.scene-path.scene-path-lit.scene-path-dwell .scene-path-over { stroke-width: 2px; stroke-dasharray: 5px 5px; }
.reduced-motion .scene-path-over { animation: none; }
@media (prefers-reduced-motion: reduce) { .scene-path-over { animation: none; } }
.scene-outline-always:not(.scene-outline-scanned):not(.scene-outline-dwell) .scene-outline-under { stroke: rgba(0, 0, 0, 0.7); stroke-width: 5px; }
.scene-outline-always:not(.scene-outline-scanned):not(.scene-outline-dwell) .scene-outline-over { stroke: #fff; stroke-width: 2.5px; }
/* The large highlight dims the rest of the picture (Settings → Switch
   scanning), as it dims the rest of a grid: the hotspots it lights are cut
   out of the dim by their own shapes (an SVG mask). */
.scene-dim-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 200; }
.scene-dim { fill: rgba(0, 0, 0, 0.32); }
/* The words of every hotspot (Settings → Scenes), and in Edit mode. */
.scene-label {
    position: absolute;
    transform: translateX(-50%);
    z-index: 300;
    max-width: 40%;
    padding: 2px 8px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    color: #111;
    border: 2px solid #111;
    font-weight: 700;
    font-size: 16px;
    font-size: clamp(13px, 2.4cqmin, 22px);
    line-height: 1.2;
    text-align: center;
    /* Its own width wherever it is on the picture (an absolute box near the
       picture's edge would otherwise be squeezed, and break a word). */
    width: max-content;
    max-width: 45%;
    overflow-wrap: anywhere;
    pointer-events: none;
}
/* The words of the hotspot just chosen: large on it, then fading. They
   take no press: a touch, a look or a scan goes on under them. */
.scene-said {
    position: absolute;
    transform: translate(-50%, -50%);
    z-index: 400;
    max-width: 90%;
    padding: 0.15em 0.5em;
    border-radius: 0.35em;
    background: rgba(255, 255, 255, 0.94);
    color: #000;
    border: 3px solid #000;
    font-weight: 800;
    font-size: 32px;
    font-size: clamp(28px, 8cqmin, 80px);
    line-height: 1.1;
    text-align: center;
    width: max-content;
    overflow-wrap: anywhere;
    pointer-events: none;
    animation: scene-said var(--scene-said-ms, 3s) ease-in forwards;
}
@keyframes scene-said {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
    8% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    70% { opacity: 1; }
    100% { opacity: 0; }
}
.reduced-motion .scene-said { animation: scene-said-still var(--scene-said-ms, 3s) linear forwards; }
@keyframes scene-said-still { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
/* A partner's drag (Edit mode). */
.scene-drawing {
    position: absolute;
    z-index: 600;
    border: 3px dashed #1976d2;
    background: rgba(25, 118, 210, 0.18);
    pointer-events: none;
}
.scene-drawing-redraw { border-color: #e65100; background: rgba(230, 81, 0, 0.18); }
/* Drawing round a thing (Outline in the edit bar): the path as it is drawn. */
.scene-drawing-path { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 600; pointer-events: none; overflow: visible; }
/* The first corner of a box marked by two taps. */
.scene-corner {
    position: absolute;
    z-index: 600;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    box-sizing: border-box;
    border: 3px solid #1976d2;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 0 0 2px #fff;
    pointer-events: none;
}
.scene-drawing-path polyline { fill: rgba(25, 118, 210, 0.18); stroke: #1976d2; stroke-width: 3px; stroke-dasharray: 8 5; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.scene-drawing-path.scene-drawing-redraw polyline { stroke: #e65100; fill: rgba(230, 81, 0, 0.18); }
/* The row of words: one slot per column of the board's first row, in
   order. Under the picture it takes a fifth of the board, or what the
   picture leaves when it is narrower than the board is tall (a phone
   upright), up to two fifths: larger words, and no empty band between them
   and the picture. Beside it, a column, or more columns on a short board
   (each word at least 44 px tall; scenes.rs scene_layout). */
.scene-words {
    flex: 0 0 auto;
    display: grid;
    gap: 6px;
    height: var(--scene-words-px, clamp(72px, max(19cqh, calc(100cqh - 100cqw / var(--scene-aspect, 1.333) - 6px)), 40cqh));
    grid-template-columns: repeat(var(--scene-words, 5), minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
}
.scene-beside .scene-words {
    height: auto;
    width: var(--scene-words-px, clamp(88px, 17%, 170px));
    grid-template-columns: repeat(var(--scene-words-cols, 1), minmax(0, 1fr));
    grid-template-rows: repeat(var(--scene-words-rows, var(--scene-words, 5)), minmax(0, 1fr));
}
.high-contrast .scene-picture, .yellow-on-black .scene-picture { outline: 2px solid #fff; }
/* A hotspot's place in the cell editor (hotspot_place.rs): the picture
   small, the hotspot's outline on it, and buttons to move it and size it. */
.hotspot-place-picture {
    position: relative;
    width: min(100%, 320px);
    border-radius: 6px;
    overflow: hidden;
    background: #eceff1;
    margin: 4px 0;
}
.hotspot-place-picture:focus-visible { outline: 4px solid #1976d2; outline-offset: 2px; }
.hotspot-place-picture svg { display: block; width: 100%; height: 100%; }
.hotspot-place-picture polygon { vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.hotspot-place-under { fill: none; stroke: #000; stroke-width: 6px; }
.hotspot-place-over { fill: rgba(255, 212, 0, 0.2); stroke: #ffd400; stroke-width: 3px; }
.hotspot-place-moves { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.hotspot-place-btn { min-width: 44px; min-height: 44px; font-size: 1.1em; color: inherit; }

/* ─── Environmental Control ─────────────────────────── */
.environmental-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.env-emergency {
    display: flex;
    gap: 8px;
}

.emergency-btn {
    flex: 1;
    padding: 20px;
    background: #D32F2F;
    color: #fff;
    border: 3px solid #B71C1C;
    border-radius: 12px;
    font-size: 1.3em;
    font-weight: 700;
    cursor: pointer;
    min-height: 80px;
}

.nurse-btn {
    flex: 1;
    padding: 20px;
    background: #FF9800;
    color: #fff;
    border: 3px solid #E65100;
    border-radius: 12px;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    min-height: 80px;
}

.env-note { margin: 0; font-size: 0.95em; }

/* The message just said, large, for people nearby to read. */
.env-shown {
    margin: 0;
    padding: 16px;
    border: 3px solid #B71C1C;
    border-radius: 12px;
    font-size: 2em;
    font-weight: 700;
    text-align: center;
}

/* No voice here can say it: the screen must be shown. */
.env-unspoken { margin: 0; font-size: 1.1em; font-weight: 600; text-align: center; }

/* ─── Aphasia Mode ──────────────────────────────────── */
.aphasia-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.aphasia-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
}

.aphasia-tab {
    padding: 10px 16px;
    background: #f0f0f0;
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
    min-height: 44px;
}

.aphasia-tab.active {
    border-color: #1976D2;
    background: #e3f2fd;
}

.aphasia-content { min-height: 200px; }

.aphasia-yesno {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.aphasia-big-btn {
    padding: 24px;
    font-size: 1.5em;
    font-weight: 700;
    border: 3px solid #ccc;
    border-radius: 12px;
    cursor: pointer;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.yes-btn { background: #C8E6C9; border-color: #4CAF50; }
.no-btn { background: #FFCDD2; border-color: #F44336; }
.maybe-btn { background: #FFF9C4; border-color: #FFC107; }
.idk-btn { background: #E1BEE7; border-color: #9C27B0; }

.pain-scale {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
}

.pain-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px;
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 10px;
    cursor: pointer;
    min-width: 70px;
    min-height: 80px;
}

.pain-face { font-size: 2em; }
.pain-score { font-size: 1.2em; font-weight: 700; }
.pain-label { font-size: 0.7em; color: #666; }

.aphasia-feelings,
.aphasia-needs,
.aphasia-people {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 8px;
}

.aphasia-feeling-btn,
.aphasia-need-btn,
.aphasia-person-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 8px;
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 10px;
    cursor: pointer;
    min-height: 80px;
}

.aphasia-feeling-btn:hover,
.aphasia-need-btn:hover,
.aphasia-person-btn:hover { border-color: #1976D2; }

.feeling-emoji,
.need-emoji,
.person-emoji { font-size: 2em; }

.feeling-label,
.need-label,
.person-label { font-size: 0.75em; text-align: center; }

/* ─── Multi-Profile ─────────────────────────────────── */
.profiles-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.profiles-help { font-size: 0.85em; color: #666; }

.profile-current {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: #e3f2fd;
    border: 2px solid #1976D2;
    border-radius: 8px;
}

.profile-badge { font-size: 1.5em; }
.profile-badge.active { color: #1976D2; }
.profile-tag {
    margin-left: auto;
    padding: 2px 8px;
    background: #1976D2;
    color: #fff;
    border-radius: 4px;
    font-size: 0.75em;
}

.profile-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profile-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    background: #fafafa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.profile-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.profile-name { font-weight: 600; }
.profile-access { font-size: 0.75em; color: #888; }

.profile-switch-btn {
    padding: 6px 14px;
    background: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85em;
}

.profile-create-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 8px;
}

.profile-name-input,
.profile-select {
    padding: 8px;
    border: 2px solid #ccc;
    border-radius: 6px;
    font-size: 1em;
    width: 100%;
}

.profile-form-actions {
    display: flex;
    gap: 8px;
}

.profile-create-btn {
    padding: 8px 16px;
    background: #1976D2;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.profile-cancel-btn {
    padding: 8px 16px;
    background: #e0e0e0;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

.profile-add-btn {
    padding: 10px;
    background: none;
    border: 2px dashed #bbb;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95em;
    color: #666;
    width: 100%;
}

/* ─── AAC Coach ─────────────────────────────────────── */
.coach-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.coach-subtitle { font-size: 0.85em; color: #666; }

.coach-card {
    padding: 16px;
    background: #f9f9f9;
    border: 2px solid #E0E0E0;
    border-radius: 10px;
}

.coach-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.coach-card h4 { font-size: 1.1em; }
.coach-progress { font-size: 0.8em; color: #999; }
.coach-body { font-size: 0.95em; line-height: 1.5; margin-bottom: 12px; }

.coach-action {
    padding: 10px;
    background: #e3f2fd;
    border-radius: 6px;
    font-size: 0.9em;
    margin-bottom: 12px;
}

.coach-nav {
    display: flex;
    justify-content: space-between;
}

.coach-nav-btn {
    padding: 6px 14px;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85em;
}

.coach-nav-btn:disabled { opacity: 0.4; cursor: default; }

.coach-strategies {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.coach-strategy {
    padding: 10px;
    background: #FFF8E1;
    border-left: 3px solid #FFC107;
    border-radius: 4px;
}

.coach-strategy strong { display: block; margin-bottom: 4px; }
.coach-strategy p { font-size: 0.85em; color: #555; }

/* ─── Nav bar — new buttons ─────────────────────────── */
.nav-btn.active {
    background: #1976D2;
    color: #fff;
}

.text-mode-btn.active {
    background: #1976D2;
    color: #fff;
}

/* ─── Setup Wizard ─────────────────────────────────── */
.setup-wizard {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #FAFAFA;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.setup-wizard-inner {
    max-width: 600px;
    width: 100%;
}

.wizard-step {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wizard-title {
    font-size: 2em;
    font-weight: 700;
    color: #212121;
    text-align: center;
}

.wizard-subtitle {
    font-size: 1.2em;
    color: #0D47A1;
    text-align: center;
    font-weight: 500;
}

.wizard-body {
    font-size: 1.1em;
    color: #616161;
    text-align: center;
    line-height: 1.5;
}

.wizard-input {
    font-size: 1.4em;
    padding: 16px 20px;
    border: 2px solid #BDBDBD;
    border-radius: 12px;
    text-align: center;
    outline: none;
    transition: border-color 0.2s;
}

.wizard-input:focus {
    border-color: #1976D2;
}

.wizard-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 50vh;
    overflow-y: auto;
}

.wizard-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 16px 20px;
    border: 2px solid #E0E0E0;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s, background-color 0.2s;
    min-height: 56px;
    font-family: inherit;
}

.wizard-option:hover {
    border-color: #90CAF9;
    background: #E3F2FD;
}

.wizard-option.selected {
    border-color: #1976D2;
    background: #E3F2FD;
}

.wizard-option-label {
    font-size: 1.1em;
    font-weight: 600;
    color: #212121;
}

.wizard-option-desc {
    font-size: 0.9em;
    color: #757575;
}

.wizard-nav {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 8px;
}

.wizard-back-btn {
    padding: 14px 32px;
    font-size: 1.1em;
    border: 2px solid #BDBDBD;
    border-radius: 12px;
    background: #fff;
    color: #616161;
    cursor: pointer;
    min-height: 48px;
    font-family: inherit;
}

.wizard-next-btn {
    padding: 14px 40px;
    font-size: 1.2em;
    font-weight: 600;
    border: none;
    border-radius: 12px;
    background: #1976D2;
    color: #fff;
    cursor: pointer;
    min-height: 56px;
    font-family: inherit;
    transition: background-color 0.2s;
}

.wizard-next-btn:hover {
    background: #1565C0;
}

/* High contrast wizard */
.high-contrast .setup-wizard {
    background: #000;
}
.high-contrast .wizard-title {
    color: #FFD600;
}
.high-contrast .wizard-body,
.high-contrast .wizard-subtitle {
    color: #fff;
}
.high-contrast .wizard-option {
    border-color: #FFD600;
    background: #111;
    color: #fff;
}
.high-contrast .wizard-option.selected {
    background: #333;
}
.high-contrast .wizard-option-label {
    color: #FFD600;
}
.high-contrast .wizard-option-desc {
    color: #BDBDBD;
}
.high-contrast .wizard-input {
    background: #111;
    color: #FFD600;
    border-color: #FFD600;
}

/* ─── Toast Notifications ──────────────────────────── */
.toast-container {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 8000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 400px;
    width: 90%;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    color: #fff;
    font-size: 0.95em;
    /* Text only: a tap on a toast reaches the board under it. */
    pointer-events: none;
    animation: toast-in 0.3s ease-out;
}

@keyframes toast-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.toast-info { background: #1976D2; }
.toast-success { background: #2E7D32; }
.toast-warning { background: #E65100; }
.toast-error { background: #C62828; }

.toast-message { flex: 1; }

/* ─── Board Editor ─────────────────────────────────── */
.editor-input {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #BDBDBD;
    border-radius: 8px;
    font-size: 1em;
    margin-top: 4px;
    font-family: inherit;
}

.editor-input:focus {
    border-color: #1976D2;
    outline: none;
}

.editor-color {
    width: 48px;
    height: 36px;
    border: 2px solid #BDBDBD;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 4px;
}

.editor-number {
    width: 60px;
    padding: 6px 8px;
    border: 2px solid #BDBDBD;
    border-radius: 6px;
    font-size: 1em;
    text-align: center;
    font-family: inherit;
}

.editor-grid-size {
    display: flex;
    gap: 16px;
    margin: 8px 0;
}

.editor-cell-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.editor-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 0.95em;
    cursor: pointer;
    min-height: 44px;
    font-family: inherit;
}

.editor-btn.save { background: #1976D2; color: #fff; }
.editor-btn.delete { background: #C62828; color: #fff; }
.editor-btn.cancel { background: #616161; color: #fff; }
.editor-btn.create { background: #2E7D32; color: #fff; width: 100%; }

.board-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 8px 0;
}

.board-list-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #F5F5F5;
    border-radius: 8px;
}

.board-list-name { flex: 1; font-weight: 500; }
.board-list-count { color: #757575; font-size: 0.85em; }

.board-list-btn {
    background: transparent;
    border: 1px solid #BDBDBD;
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
    min-width: 32px;
    min-height: 32px;
    font-family: inherit;
}

.board-list-btn.danger {
    border-color: #EF9A9A;
    color: #C62828;
}

.cell-editor label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 0.9em;
    color: #616161;
}

.editor-create-form {
    margin-top: 12px;
    padding: 12px;
    background: #F5F5F5;
    border-radius: 8px;
}

/* ─── Voice Banking ────────────────────────────────── */
.vb-btn-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.vb-play-btn,
.vb-record-btn {
    flex: 1;
    padding: 12px 16px;
    border: none;
    border-radius: 8px;
    font-size: 1em;
    cursor: pointer;
    min-height: 48px;
    font-family: inherit;
}

.vb-play-btn {
    background: #E3F2FD;
    color: #1565C0;
}

.vb-record-btn {
    background: #FFCDD2;
    color: #C62828;
}

.vb-record-btn.recording {
    background: #C62828;
    color: #fff;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ─── Message banking (panels/voice_banking.rs) ─────── */
.vb-section { margin-bottom: 20px; }
.vb-section h3 {
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #555;
    margin-bottom: 8px;
}
.vb-info { margin-bottom: 8px; line-height: 1.4; }
.vb-elapsed { align-self: center; font-weight: 600; color: #C62828; }
.vb-record-btn { color: #8E1717; }
.vb-error { color: #B71C1C; font-weight: 600; margin: 8px 0; }
.vb-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.vb-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    padding: 10px 12px;
    background: #F5F5F5;
    border-radius: 8px;
}
.vb-item-name { flex: 1 1 60%; font-weight: 600; overflow-wrap: anywhere; }
.vb-item-meta { color: #595959; font-size: 0.85em; }
.vb-item-actions { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.vb-item-actions .board-list-btn, .board-list-item .board-list-btn { min-height: 40px; padding: 6px 10px; }

/* ─── Editing (editing.rs, edit_bar.rs, cell_editor.rs, lock.rs) ─── */
/* The edit bar takes the word suggestions' place at their height, so
   turning Edit mode on or off moves no cell (SPEC §3). */
.edit-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    background: #FFF3C4;
    border-bottom: 2px solid #b07d00;
    flex-shrink: 0;
    box-sizing: border-box;
    height: 3.25em;
    min-height: 44px;
    overflow: hidden;
}
.edit-bar-title { flex: 1; min-width: 0; font-weight: 700; color: #5a3e00; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* In the title's place where a tap is the person's switch: small, within
   the bar's height (scrolled there on a narrow screen), never over the board. */
.edit-bar-note { flex: 1; min-width: 0; max-height: 100%; margin: 0; overflow-y: auto; font-size: 0.8em; line-height: 1.2; font-weight: 600; color: #5a3e00; }
.dark .edit-bar-note, .high-contrast .edit-bar-note, .yellow-on-black .edit-bar-note { color: #ffd600; }
.edit-bar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 44px;
    height: 2.5em;
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid #b07d00;
    border-radius: 8px;
    background: #fff;
    color: #1a1a1a;
    font: inherit;
    cursor: pointer;
    flex-shrink: 0;
}
.edit-bar-btn:disabled { opacity: 0.4; cursor: default; }
/* In switch scanning the edit bar is part of the message bar's group
   (output_strip.rs), outlined where it is. */
.edit-bar.scan-highlighted { outline: 6px solid #ffb300; outline-offset: -6px; }
.edit-bar .edit-bar-btn.scan-highlighted {
    outline: 6px solid #ffb300;
    outline-offset: 2px;
    box-shadow: 0 0 0 10px rgba(255, 179, 0, 0.35);
    position: relative;
    z-index: 2;
}
.edit-bar-btn.active { background: #b07d00; color: #fff; }
.edit-bar-btn.done { background: #1976D2; border-color: #1976D2; color: #fff; font-weight: 700; }
.dark .edit-bar, .high-contrast .edit-bar, .yellow-on-black .edit-bar { background: #3a2c00; border-bottom-color: #ffd600; }
.dark .edit-bar-title, .high-contrast .edit-bar-title, .yellow-on-black .edit-bar-title { color: #ffd600; }
@media (max-width: 639px) {
    .edit-bar-hint, .edit-bar-text { display: none; }
}

/* In Edit mode every cell is something to change: a dashed outline. */
.grid-cell.editing { outline: 2px dashed #b07d00; outline-offset: -4px; position: relative; }
/* A hidden word, shown while editing or while hidden words are shown for
   now: in its place, its picture faded and the cell hatched; its words keep
   their contrast, so they can still be read. */
.grid-cell.cell-hidden {
    border-style: dashed;
    background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.1) 0 6px, transparent 6px 14px);
}
.grid-cell.cell-hidden .cell-symbol, .grid-cell.cell-hidden .cell-photo { opacity: 0.35; }
/* In Edit mode, a word with no word in the person's language yet: dashed
   like a hidden word, saying so, with its English key small beneath it
   (a partner can give it words of their own). Outside Edit mode it is
   hidden in place (translate.rs). */
.grid-cell.cell-missing { border-style: dashed; }
.grid-cell.cell-missing .cell-symbol { opacity: 0.35; }
.cell-missing-note { font-style: italic; font-size: 0.8em; }
.cell-label-source { font-size: 0.7em; opacity: 0.8; }
/* Outside Edit mode a hidden word looks like an empty place. */
.grid-cell.hidden-word { border-color: transparent; cursor: default; }
/* An empty place in Edit mode: a new word can go here. */
.grid-cell.edit-empty {
    border: 2px dashed #b07d00;
    background: rgba(255, 243, 196, 0.5);
    color: #5a3e00;
    cursor: pointer;
}
.edit-empty-plus { font-size: 1.6em; font-weight: 700; line-height: 1; }
.cell-badges {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 0.8em;
    line-height: 1;
    pointer-events: none;
}
/* The person's photo fills the space the symbol would. */
.cell-photo {
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    object-fit: contain;
    pointer-events: none;
    border-radius: 4px;
}
.cell-photo + .cell-label { flex-shrink: 0; }

/* The cell editor */
.cell-form { display: flex; flex-direction: column; gap: 4px; }
.cell-form h3 { font-size: 1.1em; margin-bottom: 8px; overflow-wrap: anywhere; }
.editor-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; font-weight: 500; }
/* Settings → Editing lock → Lock again after: one choice a line, the words
   wrapping as they need (a closed <select> showed only the start of the
   longest choice at 320 px, and cut it mid-letter in WebKit). */
.lock-relock { border: none; padding: 0; margin: 4px 0 10px; display: flex; flex-direction: column; min-width: 0; }
.lock-relock legend { font-weight: 500; margin-bottom: 4px; padding: 0; }
.lock-relock-choice { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; overflow-wrap: anywhere; }
.lock-relock-choice input { flex: none; width: 22px; height: 22px; margin: 0; }
.editor-field.timing-auto { flex-direction: row; font-weight: 400; }
.editor-group { border: 1px solid #ddd; border-radius: 8px; padding: 8px 12px 12px; margin-bottom: 10px; }
.editor-group legend { font-weight: 700; padding: 0 4px; }
.editor-picture { display: flex; align-items: center; gap: 12px; }
.editor-preview {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}
.editor-preview-photo { width: 100%; height: 100%; object-fit: contain; }
.editor-preview-symbol { width: 64px; height: 64px; }
.editor-preview-none { font-size: 0.75em; color: #595959; text-align: center; }
.editor-choices { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.editor-choices .settings-btn { min-height: 44px; color: inherit; }
.editor-cell-actions { flex-wrap: wrap; }
.editor-btn { background: #ECEFF1; color: #1a1a1a; }
.settings-btn.record-btn.recording { background: #C62828; border-color: #C62828; color: #fff; }
.editor-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    min-height: 44px;
    padding: 4px 8px;
    border: 2px solid #9E9E9E;
    border-radius: 8px;
    font: inherit;
    font-size: 0.8em;
    cursor: pointer;
}
.swatch.active { outline: 3px solid #0d47a1; outline-offset: 2px; }
.swatch.other { flex-direction: row; gap: 6px; background: #fff; color: #1a1a1a; }
.swatch.other input { width: 32px; height: 28px; border: none; padding: 0; background: none; }

/* The symbol picker */
.symbol-picker { margin-top: 8px; }
.symbol-picker-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(76px, 100%), 1fr));
    gap: 6px;
    margin-top: 8px;
    max-height: 320px;
    overflow-y: auto;
}
.picker-symbol {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-height: 76px;
    padding: 4px;
    border: 2px solid #ddd;
    border-radius: 8px;
    background: #fff;
    color: #1a1a1a;
    font: inherit;
    font-size: 0.75em;
    cursor: pointer;
}
.picker-symbol.active { border-color: #1976D2; background: #E3F2FD; }
/* A long word wraps inside its tile: the tiles never push past the panel. */
.picker-symbol { min-width: 0; overflow: hidden; }
.editor-group { min-inline-size: 0; }
.picker-symbol .symbol-preview { width: 48px; height: 48px; }
.picker-symbol-name { overflow-wrap: anywhere; text-align: center; }

/* Boards panel */
.board-list { list-style: none; }
.board-list-home {
    padding: 2px 8px;
    border-radius: 10px;
    background: #E3F2FD;
    color: #0D47A1;
    font-size: 0.8em;
    font-weight: 600;
}
.board-list-btn:disabled { opacity: 0.4; cursor: default; }
.editor-section { margin-bottom: 20px; }
.editor-section h3 { font-size: 1em; margin-bottom: 8px; }

/* Settings → Words and boards */
.settings-subtitle { font-size: 0.95em; margin: 16px 0 6px; }
.edit-boards-btn { min-height: 48px; font-weight: 600; margin-bottom: 8px; }
.page-sets { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.page-set { padding: 10px 12px; border: 1px solid #ddd; border-radius: 8px; }
.page-set .settings-grid { margin-bottom: 8px; }
.page-set-name { display: block; }
.wizard-sizes { margin-top: 8px; }
/* Setup's steps can be taller than a small phone's screen (the words to
   start with, large text): the wizard scrolls, and is centred while it fits. */
.setup-wizard { overflow-y: auto; align-items: flex-start; }
.setup-wizard-inner { margin-block: auto; }
/* On a short screen (a phone on its side) Back and Next stay at the foot of
   the screen while the step scrolls under them: never out of reach. */
@media (max-height: 520px) {
    .setup-wizard { padding: 8px 16px 0; }
    .wizard-step { gap: 10px; }
    .wizard-title { font-size: 1.5em; }
    .wizard-nav {
        position: sticky;
        bottom: 0;
        z-index: 1;
        margin-top: 0;
        padding: 8px 0;
        background: #FAFAFA;
    }
    .high-contrast .wizard-nav { background: #000; }
    .wizard-voice { max-height: none; overflow: visible; }
}

/* The lock */
.unlock-prompt { display: flex; flex-direction: column; gap: 10px; }
.unlock-title { font-weight: 700; font-size: 1.05em; }
.unlock-pin { display: flex; flex-direction: column; gap: 4px; font-weight: 500; }
.lock-pin-form { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.lock-pin-form label { display: flex; flex-direction: column; gap: 4px; }
.link-btn {
    align-self: flex-start;
    min-height: 44px;
    padding: 0 4px;
    border: none;
    background: none;
    color: #0d47a1;
    text-decoration: underline;
    font: inherit;
    cursor: pointer;
}
/* Hold to unlock: it fills while held, and only a pointer can hold it. */
.hold-btn {
    position: relative;
    overflow: hidden;
    min-height: 64px;
    padding: 0 20px;
    border: 2px solid #1976D2;
    border-radius: 12px;
    background: #E3F2FD;
    color: #0D47A1;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}
.hold-fill {
    position: absolute;
    inset: 0;
    width: 0;
    background: rgba(25, 118, 210, 0.35);
}
.hold-btn.holding .hold-fill { width: 100%; transition: width var(--hold-ms, 3000ms) linear; }
.reduced-motion .hold-btn.holding .hold-fill { transition: none; width: 100%; }
.hold-label { position: relative; }

.vb-error {
    color: #C62828;
    font-size: 0.85em;
    margin-top: 8px;
}

/* ─── Starting screen ──────────────────────────────────────
   Covers the board for the moment between the page appearing and the
   person's saved boards being restored (see shell.rs initial_state). */
.app-starting {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    background: #f5f7fa;
}
/* The colours chosen, from the first paint (app.rs sets data-color-mode
   before the page is drawn): no flash of light on a dark setting. */
html[data-color-mode="Dark"], html[data-color-mode="Dark"] body,
html[data-color-mode="Dark"] .app-starting { background: #1a1a1a; }
html[data-color-mode="HighContrast"], html[data-color-mode="HighContrast"] body,
html[data-color-mode="HighContrast"] .app-starting,
html[data-color-mode="YellowOnBlack"], html[data-color-mode="YellowOnBlack"] body,
html[data-color-mode="YellowOnBlack"] .app-starting { background: #000; }
html[data-color-mode="Dark"] .app-starting-mark,
html[data-color-mode="HighContrast"] .app-starting-mark,
html[data-color-mode="YellowOnBlack"] .app-starting-mark { border-color: #444; border-top-color: #ffd600; }
.app-starting-mark {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 6px solid #cfd8dc;
    border-top-color: #0d47a1;
    animation: app-starting-spin 0.9s linear infinite;
}
@keyframes app-starting-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .app-starting-mark { animation: none; border-top-color: #cfd8dc; }
}

/* ─── Settings → Timing ─────────────────────────────────── */
.settings-hint { font-size: 0.95em; color: #37474f; margin: 4px 0 12px; }
.timing-heading { font-size: 1em; margin: 16px 0 8px; }
.timing-subheading { font-weight: 600; margin: 16px 0 0; }
.timing-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.timing-value { min-width: 4.5em; text-align: center; font-weight: 700; font-size: 1.1em; }
.timing-caption { color: #37474f; }
.timing-suggestion {
    margin-top: 10px;
    padding: 10px 12px;
    border-left: 4px solid #0d47a1;
    border-radius: 8px;
    background: #e3f2fd;
    color: #0b2a4a;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.timing-suggestion p { flex: 1 1 100%; margin: 0; }
.timing-auto { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 8px; cursor: pointer; }
.timing-auto input { width: 22px; height: 22px; }
.high-contrast .settings-hint, .high-contrast .timing-caption { color: #fff; }
.high-contrast .timing-suggestion { background: #111; color: #fff; border-left-color: #ffd600; }

/* ─── Settings → This device ────────────────────────────── */
.device-facts { margin: 0; }
.device-facts dt { font-weight: 700; margin-top: 10px; }
.device-facts dd { margin: 2px 0 0; color: #37474f; }
.high-contrast .device-facts dd { color: #fff; }

/* ─── Settings → Symbols ────────────────────────────────── */
.symbol-choice { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 104px; }
.symbol-choice-preview { display: flex; gap: 4px; height: 32px; align-items: center; }
.symbol-preview { width: 32px; height: 32px; forced-color-adjust: none; }
.symbol-choice-words { font-weight: 700; font-size: 1.2em; line-height: 32px; }
/* Blissymbols on the chosen (blue) button and in dark panels: a light plate. */
.symbol-preview[data-set="bliss"] { background: #fff; border-radius: 4px; }
.symbol-licence { margin-top: 12px; }
.symbol-licence h4 { font-size: 1em; margin-bottom: 4px; }
.symbol-licence p { font-size: 0.9em; line-height: 1.4; margin: 2px 0; color: #37474f; }
.symbol-licence a, .symbol-licences-more a { color: #0d47a1; }
.high-contrast .symbol-licence p { color: #fff; }
.high-contrast .symbol-licence a, .high-contrast .symbol-licences-more a { color: #ffd600; }

/* Skin tone of the people in symbols (Settings → Symbols → People in pictures). */
.skin-choice { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 88px; }
.skin-choice-preview { display: flex; align-items: center; gap: 6px; height: 32px; }
.skin-choice-swatch { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.35); }
.wizard-skin-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.wizard-skin-choice {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    min-width: 76px; min-height: 64px; padding: 8px 6px;
    border: 2px solid #BDBDBD; border-radius: 12px; background: #fff; color: #212121;
    font-size: 0.9em; cursor: pointer;
}
.wizard-skin-choice.active { border-color: #1976D2; background: #E3F2FD; }
.wizard-skin-choice:focus-visible { outline: 3px solid #1976D2; outline-offset: 2px; }

/* Settings → Word suggestions: what suggestions rest on, one sentence a line. */
.prediction-status { margin: 0; padding-left: 1.2em; }
.prediction-status li + li { margin-top: 4px; }

/* Settings → Better voices: one card per voice, its rating first. */
.voice-pack { margin-top: 12px; padding: 12px 14px; border: 1px solid #cfd8dc; border-radius: 10px; background: #fafafa; }
.voice-pack-title { margin: 0 0 6px; }
.voice-pack-rating { margin: 0 0 2px; font-weight: 600; }
.voice-pack-rating[data-rating="experimental"] { color: #8a4b00; }
.voice-pack .settings-hint { margin: 2px 0 8px; }
.voice-pack .settings-grid { margin-top: 8px; }
.voice-pack .timing-auto { margin-top: 0; }
.voice-pack-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.voice-pack-progress progress { flex: 1 1 12em; height: 12px; }
.voice-pack-credits, .voice-pack-languages, .voice-pack-why { margin-top: 10px; }
/* Every control here is a 44px target, as elsewhere in Settings. */
.voice-pack-credits summary, .voice-pack-languages summary, .voice-pack-why summary {
    cursor: pointer; min-height: 44px; padding: 10px 0; box-sizing: border-box;
}
.voice-pack-licence { display: inline-block; min-height: 44px; min-width: 44px; padding: 12px 4px; box-sizing: border-box; }
/* A sample to hear before downloading, with what it says. */
.voice-pack-sample { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 6px 0 8px; }
.voice-pack-sample-text { font-style: italic; color: #37474f; }
.high-contrast .voice-pack-sample-text { color: #fff; }
/* Remove sits apart from Try it, and asks first. */
.voice-pack-remove { margin-top: 16px; }
/* The section's one live region: in the page even when empty (so what is
   written to it is announced), but taking no room then. */
.voice-pack-notice:empty { margin: 0; }
.voice-pack-why p { margin: 0; font-size: 0.9em; line-height: 1.4; color: #37474f; }
.high-contrast .voice-pack-why p { color: #fff; }
.voice-pack-credits ul, .voice-pack-languages ul { margin: 0; padding-left: 1.2em; font-size: 0.9em; line-height: 1.4; }
.voice-pack-credits li + li, .voice-pack-languages li + li { margin-top: 6px; }
.voice-pack-credits a { color: #0d47a1; }
.high-contrast .voice-pack { background: #111; border-color: #fff; }
.high-contrast .voice-pack-rating[data-rating="experimental"] { color: #ffd600; }
.high-contrast .voice-pack-credits a { color: #ffd600; }

/* ─── Sentence helper (sentence_helper.rs, ai_helper_settings.rs; and the
   listener's 🎤 and Settings section, listen_settings.rs) ─── */
/* In the word suggestions' place and at their height, so opening, closing or
   filling it never moves a cell (SPEC §3). One line; it scrolls sideways. */
.helper-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 4px 0 12px;
    background: #fff4d6;
    overflow-x: auto;
    overflow-y: hidden;
    flex-shrink: 0;
    box-sizing: border-box;
    height: 3.25em;
    min-height: 44px;
}
.dark .helper-row { background: #2b2410; }
.high-contrast .helper-row, .yellow-on-black .helper-row { background: #1c1700; }

.helper-btn.active { background: #ffe9a8; border-color: #c79200; }
.dark .helper-btn.active, .high-contrast .helper-btn.active, .yellow-on-black .helper-btn.active {
    background: #5a4500;
    border-color: #ffd600;
}

.helper-partner-input {
    flex: 0 0 9em;
    height: 2.4em;
    min-height: 44px;
    box-sizing: border-box;
    padding: 0 14px;
    border: 1px solid #c9b77a;
    border-radius: 22px;
    background: #fff;
    color: #222;
    font-size: 1em;
    transition: flex-basis 0.15s;
}
.helper-partner-input:focus, .helper-partner-input.filled { flex-basis: 16em; }
.reduced-motion .helper-partner-input { transition: none; }
.high-contrast .helper-partner-input, .yellow-on-black .helper-partner-input { background: #000; color: #fff; border-color: #ffd600; }

.helper-partner-clear, .helper-close, .helper-listen {
    flex-shrink: 0;
    min-width: 44px;
    min-height: 44px;
    border: none;
    border-radius: 22px;
    background: transparent;
    color: inherit;
    font-size: 1.1em;
    cursor: pointer;
}
.helper-close { margin-left: auto; }

/* Switch scanning in the open row (sentence_helper.rs HelperScan): the
   highlight on the control itself, inside the row's line (it scrolls
   sideways, and an outline outside would be cut off); the board as a whole
   when it is the next step. */
.helper-row button.scan-highlighted {
    outline: 5px solid #ffb300;
    outline-offset: -5px;
    box-shadow: inset 0 0 0 8px rgba(255, 179, 0, 0.35);
}
.grid-board.scan-highlighted { outline: 6px solid #ffb300; outline-offset: -6px; }
.high-contrast .helper-row button.scan-highlighted, .high-contrast .grid-board.scan-highlighted,
.yellow-on-black .helper-row button.scan-highlighted, .yellow-on-black .grid-board.scan-highlighted { outline-color: #ffff00; }

/* 🎤 beside "They said" (listen.rs): while it listens it is a stop button,
   and the box shows the words as they are heard. */
.helper-listen { border: 1px solid #c9b77a; background: #fff; }
.helper-listen.active { background: #c62828; border-color: #c62828; color: #fff; }
.helper-partner-input.listening { border-color: #c62828; border-width: 2px; }
.dark .helper-listen, .high-contrast .helper-listen { background: #333; color: #fff; border-color: #ffd600; }
.yellow-on-black .helper-listen { background: #000; color: #FFD700; border-color: #FFD700; }
.high-contrast .helper-listen.active, .yellow-on-black .helper-listen.active { background: #ffd600; color: #000; }
.high-contrast .helper-partner-input.listening, .yellow-on-black .helper-partner-input.listening { border-color: #ffd600; }

.helper-status {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #5d4a00;
    font-size: 0.95em;
}
.helper-status:empty { display: none; }
.dark .helper-status, .high-contrast .helper-status { color: #ffe082; }
.yellow-on-black .helper-status { color: #FFD700; }

.helper-suggestions { display: flex; gap: 6px; flex-shrink: 0; }
.helper-suggestion {
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    height: 2.4em;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid #c79200;
    border-radius: 22px;
    background: #fff;
    color: #222;
    font-size: 1em;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
}
.helper-suggestion:active { background: #ffe9a8; }
.high-contrast .helper-suggestion, .dark .helper-suggestion { background: #333; color: #fff; border-color: #ffd600; }
.yellow-on-black .helper-suggestion { background: #000; color: #FFD700; border-color: #FFD700; }

.text-predictions.hidden { display: none; }

/* ─── First letters (first_letters.rs, abbrev_settings.rs) ─── */
/* In text mode, the word suggestions, the sentence helper's row and first
   letters' row take turns in one place, one line high, so turning either on
   or off, or filling it, never moves what is below (SPEC §3); a line longer
   than the screen scrolls sideways. */
.text-mode .text-predictions {
    flex-wrap: nowrap;
    align-items: center;
    overflow-x: auto;
    overflow-y: hidden;
    box-sizing: border-box;
    height: 3.25em;
    min-height: 44px;
}
.text-mode .text-predictions .prediction-pill { flex-shrink: 0; white-space: nowrap; }
.letters-row { background: #e6f0fb; }
.dark .letters-row { background: #102236; }
.high-contrast .letters-row, .yellow-on-black .letters-row { background: #001a33; }
.letters-row .helper-partner-input, .letters-row .helper-suggestion { border-color: #6a9fd6; }
.letters-row .helper-suggestion:active { background: #cfe2f7; }
.letters-row .helper-status { color: #0d3c6e; }
.dark .letters-row .helper-status, .high-contrast .letters-row .helper-status { color: #9cc7f2; }
.yellow-on-black .letters-row .helper-status { color: #FFD700; }
.high-contrast .letters-row .helper-suggestion, .dark .letters-row .helper-suggestion,
.high-contrast .letters-row .helper-partner-input, .yellow-on-black .letters-row .helper-partner-input { border-color: #ffd600; }
.letters-btn.active { background: #cfe2f7; border-color: #1565C0; }
.dark .letters-btn.active, .high-contrast .letters-btn.active, .yellow-on-black .letters-btn.active {
    background: #0d3c6e;
    border-color: #ffd600;
    color: #fff;
}
/* ✨ and 🔤 in text mode keep their place while they cannot be used yet. */
.text-btn.reserved { visibility: hidden; }
/* On a phone, 🔤 alone (its name is its label for screen readers). */
@media (max-width: 599px) {
    .letters-btn .letters-label { display: none; }
}
.abbrev-near-keys { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 8px; cursor: pointer; font-weight: 600; }
.abbrev-settings [data-abbrev-privacy] { font-weight: 600; }

.ai-helper-progress { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ai-helper-progress progress { flex: 1 1 12em; height: 12px; }
.ai-helper .settings-btn, .listen-settings .settings-btn, .abbrev-settings .settings-btn { min-height: 44px; margin: 4px 8px 4px 0; }
.ai-helper-confirm { margin-top: 8px; }
.ai-helper-speakers { border: none; padding: 0; margin: 12px 0 2px; display: flex; flex-wrap: wrap; gap: 0 16px; }
.ai-helper-speakers legend { font-weight: 600; margin-bottom: 2px; padding: 0; }
.ai-helper-speaker { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; }
.ai-helper-credits { margin-top: 10px; }
.ai-helper .settings-notice, .listen-settings .settings-notice, .abbrev-settings .settings-notice { margin: 8px 0 0; font-weight: 600; }
.ai-helper .settings-notice:empty, .listen-settings .settings-notice:empty, .abbrev-settings .settings-notice:empty { margin: 0; }
.listen-settings [data-listen-privacy] { font-weight: 600; }

@media (max-width: 767px) {
    .helper-partner-input { flex-basis: 7em; }
    .helper-partner-input:focus, .helper-partner-input.filled { flex-basis: 12em; }
    .helper-suggestion { padding: 0 12px; font-size: 0.9em; }
}

/* ─── The access stack (scan.rs, dialog_scan.rs, pointing.rs) ─────────── */

/* Back and Home in switch scanning (navigation_bar.rs): the two as one
   group, then each, outlined where they are, so nothing moves. */
.navigation-bar .nav-left.scan-highlighted {
    outline: 6px solid #ffb300;
    outline-offset: 4px;
    box-shadow: 0 0 0 14px rgba(255, 179, 0, 0.35);
    border-radius: 8px;
}
.navigation-bar .nav-left button.scan-highlighted,
.panel-content .scan-highlighted,
#nav-more-menu .scan-highlighted {
    outline: 6px solid #ffb300;
    outline-offset: 2px;
    box-shadow: 0 0 0 10px rgba(255, 179, 0, 0.35);
    position: relative;
    z-index: 2;
}
/* A panel's group (a section of Settings) is outlined inside its edges, so
   the panel never needs to scroll sideways to show it. */
.panel-content section.scan-highlighted,
.panel-content [role=group].scan-highlighted,
.panel-content fieldset.scan-highlighted {
    outline-offset: -6px;
    box-shadow: none;
    border-radius: 8px;
}
.high-contrast .navigation-bar .nav-left.scan-highlighted, .high-contrast .navigation-bar .nav-left button.scan-highlighted,
.high-contrast .panel-content .scan-highlighted, .high-contrast #nav-more-menu .scan-highlighted,
.yellow-on-black .navigation-bar .nav-left.scan-highlighted, .yellow-on-black .navigation-bar .nav-left button.scan-highlighted,
.yellow-on-black .panel-content .scan-highlighted, .yellow-on-black #nav-more-menu .scan-highlighted {
    outline-color: #ffff00;
}

/* Dwell (pointing.rs): what the eyes or pointer rest on is outlined, and a
   ring on it fills as the dwell time passes (--dwell-progress, 0 to 1). A
   checkbox cannot draw the ring: its outline shows the dwell. Hold to
   select draws the same ring. */
.dwell-target, .dwell-pointed {
    outline: 4px solid rgba(255, 179, 0, 0.75);
    outline-offset: 2px;
}
.dwell-target:not(input) { position: relative; }
.dwell-target::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(48px, 70%);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 3;
    background: conic-gradient(#ffb300 calc(var(--dwell-progress, 0) * 360deg), rgba(0, 0, 0, 0.15) 0);
    -webkit-mask: radial-gradient(farthest-side, transparent 62%, #000 64%);
    mask: radial-gradient(farthest-side, transparent 62%, #000 64%);
}
.high-contrast .dwell-target::after, .yellow-on-black .dwell-target::after {
    background: conic-gradient(#ffff00 calc(var(--dwell-progress, 0) * 360deg), rgba(255, 255, 255, 0.25) 0);
}

/* Touch (pointing.rs): the button under a finger that will select when it
   lifts or has held long enough; and auditory touch's button, named by a
   first touch and waiting for a second. */
.touch-pending { outline: 4px solid #1976d2; outline-offset: 2px; }
.touch-armed { outline: 4px dashed #1976d2; outline-offset: 2px; }
.dark .touch-pending, .high-contrast .touch-pending, .yellow-on-black .touch-pending,
.dark .touch-armed, .high-contrast .touch-armed, .yellow-on-black .touch-armed { outline-color: #ffd600; }
/* Select when held or when the finger lifts: nothing pans under the finger
   (the board, the message bar, Back, Home and Help), so the browser never
   takes the touch away. */
.aac-shell.touch-no-pan .board-area, .aac-shell.touch-no-pan .grid-board,
.aac-shell.touch-no-pan .grid-cell, .aac-shell.touch-no-pan .output-actions button,
.aac-shell.touch-no-pan .nav-left button {
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* The message bar's place (shell.rs): Help's message (help.rs), and the bar
   that asks to keep a change (provisional.rs), are shown over the message
   bar, in its box — never over the board, and nothing moves. Where their
   words need more room (a phone), they grow over the word suggestions
   below it, never further. */
.message-slot { position: relative; flex-shrink: 0; }
.message-under { display: contents; }
.help-banner, .provisional-bar.in-message-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    min-height: 100%;
    max-height: calc(100% + 3.25em);
    z-index: 5;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 12px;
    background: #fff;
    color: #111;
    overflow-y: auto;
}
.help-banner { border: 3px solid #b71c1c; }
/* In Edit mode the word suggestions' place below is the edit bar: Help's
   message keeps to the message bar's box (scrolling within it), so the edit
   bar's Done is never covered. */
.aac-shell.editing .help-banner { max-height: 100%; }
.help-banner-words { flex: 1; min-width: 0; }
.help-banner-text { margin: 0; font-size: clamp(1.1em, 4.6vw, 2em); font-weight: 700; line-height: 1.1; overflow-wrap: anywhere; }
.help-banner-unspoken { margin: 2px 0 0; font-size: 0.85em; font-weight: 600; line-height: 1.2; }
.help-banner-done { min-height: 44px; flex-shrink: 0; }
.dark .help-banner, .high-contrast .help-banner, .yellow-on-black .help-banner { background: #000; color: #fff; border-color: #ffd600; }

/* The bar that asks to keep a change made by scanning or dwell
   (provisional.rs): in the message bar's place, or at the foot of the open
   panel, so it is seen and reached first and never covers the board. */
.provisional-bar { box-sizing: border-box; background: #fff; color: #111; border: 3px solid #1976d2; }
.provisional-bar p { margin: 0; font-weight: 600; line-height: 1.2; }
.provisional-actions { display: flex; gap: 8px; flex-shrink: 0; }
.provisional-actions .settings-btn { min-height: 44px; }
.provisional-bar.in-message-bar p { flex: 1; min-width: 0; font-size: 0.95em; }
.provisional-bar.in-panel {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 150;
    width: min(400px, 85vw);
    padding: 12px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.2);
}
.provisional-bar.in-panel p { margin-bottom: 10px; }
.provisional-bar.in-panel .provisional-actions { flex-wrap: wrap; }
/* The panel's last controls can scroll out from under it. */
.aac-shell:has(.provisional-bar.in-panel) .panel-content { padding-bottom: 150px; }
@media (min-width: 1025px) { .provisional-bar.in-panel { width: min(500px, 40vw); } }
@media (max-width: 479px) {
    .provisional-bar.in-message-bar p { font-size: 0.85em; }
    .provisional-bar.in-message-bar .provisional-actions { gap: 4px; }
    .provisional-bar.in-message-bar .settings-btn { padding: 0 8px; }
}
.dark .provisional-bar, .high-contrast .provisional-bar, .yellow-on-black .provisional-bar { background: #000; color: #fff; border-color: #ffd600; }
#provisional .scan-highlighted { outline: 6px solid #ffb300; outline-offset: 2px; }
/* Help's Done, scanned as the message bar while Help's message is there. */
.help-banner.scan-highlighted { outline: 6px solid #ffb300; outline-offset: -6px; }
.help-banner button.scan-highlighted { outline: 6px solid #ffb300; outline-offset: 2px; }
.dark .help-banner.scan-highlighted, .high-contrast .help-banner.scan-highlighted, .yellow-on-black .help-banner.scan-highlighted,
.dark .help-banner button.scan-highlighted, .high-contrast .help-banner button.scan-highlighted,
.yellow-on-black .help-banner button.scan-highlighted { outline-color: #ffff00; }

/* Settings → Switches (access_settings.rs). */
.switch-list { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.switch-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.switch-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 12em; }
.switch-name .settings-hint { margin: 0; }
.switch-inputs { font-size: 0.9em; overflow-wrap: anywhere; }
.switch-actions { display: flex; gap: 8px; }
.switch-actions .settings-btn, .switch-learning .settings-btn { min-height: 44px; }
.switch-learning {
    margin: 8px 0;
    padding: 12px;
    border: 2px solid #1976d2;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.switch-learning p { margin: 0; flex: 1 1 100%; }

/* ─── Voices: the natural voice offered first, and the device's voices
   (voice_offer.rs) ─── */
/* The natural voice offered first: in setup and after a change of language. */
.voice-offer { margin-top: 8px; padding: 12px 14px; border: 2px solid #1976D2; border-radius: 10px; background: #f5f9ff; text-align: left; }
.voice-offer .voice-pack-title { margin: 0 0 6px; }
.voice-offer-get { min-height: 48px; font-weight: 600; background: #1976D2; color: #fff; border-color: #1565C0; }
.voice-offer-get:disabled { background: #e0e0e0; color: #616161; border-color: #bdbdbd; }
.natural-offer .settings-hint { margin: 4px 0 8px; }
.natural-offer .voice-pack-notice:empty { margin: 0; }
.natural-offer .voice-pack-confirm .settings-btn { min-height: 44px; }
.language-voice-offer { margin-top: 12px; }
/* The device's voices, best first, each with its kind and "Hear it". */
.device-voice { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 4px 0; }
.device-voice .timing-auto { margin: 0; min-height: 44px; display: inline-flex; align-items: center; }
.device-voice .settings-btn { min-height: 44px; }
.device-voices-more summary { cursor: pointer; min-height: 44px; padding: 10px 0; box-sizing: border-box; }
.voice-guidance { border-left: 4px solid #1976D2; padding-left: 10px; }
.voice-pack-new { font-weight: 600; }
/* Setup's voice step can be taller than the screen: it scrolls in itself. */
.wizard-voice { max-height: calc(100dvh - 48px); overflow-y: auto; padding: 4px; }
.wizard-voice .natural-offer, .wizard-device-voices { text-align: left; }
.wizard-voice .natural-offer-loading { min-height: 14em; margin: 8px 0 0; }
.wizard-voice-note { font-weight: 600; }
.wizard-option-toggle {
    padding: 14px 20px;
    font-size: 1.05em;
    border: 2px solid #BDBDBD;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    min-height: 48px;
    font-family: inherit;
}
.wizard-option-toggle[aria-expanded="true"] { border-color: #1976D2; background: #E3F2FD; }
.high-contrast .voice-offer { background: #111; border-color: #fff; }
/* ─── On-screen keyboard (keyboard.rs) and the alphabet by ear
   (alphabet_by_ear.rs) ─── */
/* The keys fill what text mode leaves below the box; each row shares the
   width among its keys (a key may be wider than another, never wider than
   the screen), so nothing scrolls sideways at any width. */
.text-mode.osk-on { overflow: hidden; }
.text-mode.osk-on .text-input { min-height: 0; height: 3.4em; resize: none; font-size: 1.25em; padding: 8px 12px; }
.osk-wrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 4px; }
/* What the keyboard cannot do: one line, opened for the rest. */
.osk-note { flex-shrink: 0; margin: 0; padding: 3px 10px; border-radius: 6px; background: #fff8e1; color: #5d4a00; font-size: 0.85em; }
.osk-note > summary { cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.osk-note[open] > summary { white-space: normal; }
.osk-note > p { margin: 4px 0 0; }
.dark .osk-note, .high-contrast .osk-note, .yellow-on-black .osk-note { background: #2b2410; color: #ffe082; }
/* A row never shrinks below what a finger, a look or a switch user can
   reach: when the keys do not fit (a phone on its side), the keyboard
   scrolls, and the scan's highlight is kept in view (keyboard.rs). */
.osk { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 4px; touch-action: manipulation; overflow-y: auto; overscroll-behavior: contain; }
.osk-row { flex: 1 1 0; min-height: 36px; display: flex; gap: 4px; }
/* The sentence helper's or first letters' row, in the suggestions' place
   and at its height: opening it moves no key. */
.osk-row-open > .helper-row { flex: 1 1 auto; min-width: 0; height: 100%; min-height: 0; }
.osk-key {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    border: 2px solid #c8c8c8;
    border-radius: 8px;
    background: #fff;
    color: #1a1a1a;
    font: inherit;
    font-size: 1.35em;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    position: relative;
}
.osk-key:active { background: #e3f2fd; }
.osk-control { background: #eceff1; font-size: 1.1em; white-space: normal; text-align: center; }
.osk-prediction { background: #e3f2fd; border-color: #90caf9; font-size: 1em; font-weight: 600; }
.osk-prediction:disabled { cursor: default; }
.osk-blank { border-color: transparent; background: transparent; cursor: default; }
/* ✨ and 🔤 keep their place while they cannot be used. */
.osk-key.reserved { background: transparent; border-style: dashed; border-color: #ddd; cursor: default; }
.osk-key.active { background: #cfe2f7; border-color: #1565c0; }
.osk-key.undo-clear { background: #fff3c4; border-color: #b07d00; color: #5a3e00; }
/* Switch scanning: the keys draw the highlight themselves, where they are. */
.osk-key.scan-highlighted {
    outline: 6px solid #ffb300;
    outline-offset: -3px;
    box-shadow: 0 0 0 4px rgba(255, 179, 0, 0.35);
    z-index: 2;
}
.osk.scan-highlighted { outline: 6px solid #ffb300; outline-offset: 2px; border-radius: 8px; }
.dark .osk-key, .high-contrast .osk-key { background: #2b2b2b; color: #fff; border-color: #666; }
.yellow-on-black .osk-key { background: #000; color: #ffd700; border-color: #ffd700; }
.dark .osk-control, .high-contrast .osk-control { background: #383838; }
.dark .osk-prediction, .high-contrast .osk-prediction { background: #10263d; border-color: #4a90d9; }
.dark .osk-blank, .high-contrast .osk-blank, .yellow-on-black .osk-blank { background: transparent; border-color: transparent; }
.high-contrast .osk-key.scan-highlighted, .yellow-on-black .osk-key.scan-highlighted,
.high-contrast .osk.scan-highlighted, .yellow-on-black .osk.scan-highlighted { outline-color: #ffff00; }
@media (max-width: 599px) {
    .osk, .osk-row { gap: 3px; }
    .osk-key { font-size: 1.1em; border-width: 1px; border-radius: 6px; }
    .osk-control { font-size: 0.95em; }
    .osk-prediction { font-size: 0.85em; }
}
/* Narrow phones: the controls' words fit their keys. */
@media (max-width: 420px) {
    .osk-control { font-size: 0.78em; line-height: 1; padding: 0 1px; overflow-wrap: anywhere; }
}
/* The smallest phones: twelve keys a row (InScript, Kedmanee) stay 24 px
   wide. */
@media (max-width: 360px) {
    .text-mode.osk-on { padding: 4px 3px; }
    .osk, .osk-row { gap: 2px; }
    .osk-key { padding: 0; }
    /* Space and Speak drawn no wider than the others, so no key in their row
       is squeezed below 24 px. */
    .osk-key { flex-grow: 1 !important; }
}
/* A phone on its side: the text box beside the keys, the keyboard's own
   toggles under the box, and every row at its least height or more. */
@media (orientation: landscape) and (max-height: 520px) {
    .text-mode.osk-on {
        display: grid;
        grid-template-columns: minmax(140px, 28%) 1fr;
        grid-template-rows: 1fr auto;
        gap: 6px;
        padding: 4px 6px;
    }
    .text-mode.osk-on > .text-input-area { grid-column: 1; grid-row: 1; min-height: 0; }
    .text-mode.osk-on .text-input { height: 100%; font-size: 1.1em; }
    .text-mode.osk-on > .osk-wrap, .text-mode.osk-on > .by-ear { grid-column: 2; grid-row: 1 / span 2; min-height: 0; }
    .text-mode.osk-on > .keyboard-toggles { grid-column: 1; grid-row: 2; flex-direction: column; align-items: stretch; gap: 4px; }
    .text-mode.osk-on .text-toggle { padding: 4px 8px; }
    .by-ear { gap: 4px; }
    .by-ear-cue { font-size: 1.6em; }
    .by-ear-yes { min-height: 64px; }
}

/* The colour frame: eight places round the text, each with its colour and
   its mark (Okabe–Ito colours, told apart without colour by the mark). */
.osk-frame, .osk-frame .osk-row { gap: 10px; }
.osk-frame .osk-key { font-size: 2.4em; border-width: 6px; border-radius: 16px; }
.osk-frame .osk-frame-text {
    font-size: 1.3em;
    white-space: normal;
    overflow-wrap: anywhere;
    border: 2px dashed #bbb;
    background: transparent;
    cursor: default;
    /* Its end stays in view: a long message loses its start, never the
       words just typed. */
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
}
.osk-frame-words { display: block; text-align: center; }
.ring-0 { --ring: #e69f00; --ring-ink: #000; --ring-mark: "\25CF"; }
.ring-1 { --ring: #56b4e9; --ring-ink: #000; --ring-mark: "\25B2"; }
.ring-2 { --ring: #009e73; --ring-ink: #000; --ring-mark: "\25A0"; }
.ring-3 { --ring: #f0e442; --ring-ink: #000; --ring-mark: "\25C6"; }
.ring-4 { --ring: #0072b2; --ring-ink: #fff; --ring-mark: "\2605"; }
.ring-5 { --ring: #d55e00; --ring-ink: #000; --ring-mark: "\271A"; }
.ring-6 { --ring: #cc79a7; --ring-ink: #000; --ring-mark: "\2B1F"; }
.ring-7 { --ring: #6b6b6b; --ring-ink: #fff; --ring-mark: "\2665"; }
/* Each place's border has at least 3:1 against the key, in every colour
   mode: the colour itself where it has, else a darker shade of it (light
   mode) or a lighter one (dark modes). */
.ring-0 { --ring-edge: #a57200; }
.ring-1 { --ring-edge: #3e83aa; }
.ring-2 { --ring-edge: #008c66; }
.ring-3 { --ring-edge: #837d24; }
.ring-5 { --ring-edge: #cc5a00; }
.ring-6 { --ring-edge: #ab658c; }
.dark [class*="ring-"], .high-contrast [class*="ring-"], .yellow-on-black [class*="ring-"] { --ring-edge: var(--ring); }
.dark .ring-4, .high-contrast .ring-4 { --ring-edge: #338ec1; }
.dark .ring-5, .high-contrast .ring-5 { --ring-edge: #d7660c; }
.dark .ring-7, .high-contrast .ring-7 { --ring-edge: #878787; }
.osk-frame .osk-key[class*="ring-"] { border-color: var(--ring-edge, var(--ring)); }
/* The place's mark, on a badge of its colour: the mark's ink has at least
   4.5:1 against it, so the shape is told without the colour. */
.osk-frame .osk-key[class*="ring-"]::after {
    content: var(--ring-mark);
    position: absolute;
    top: 4px;
    inset-inline-start: 6px;
    color: var(--ring-ink);
    background: var(--ring);
    border-radius: 999px;
    padding: 0.15em 0.3em;
    font-size: 0.4em;
    line-height: 1;
}
.osk-holds {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 3px;
    width: 100%;
    height: 100%;
    padding: 1.1em 6px 6px;
    box-sizing: border-box;
}
.osk-held {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--ring);
    color: var(--ring-ink);
    font-size: 0.45em;
    font-weight: 700;
    min-width: 0;
    overflow: hidden;
}

/* The alphabet by ear: what is said, a large Yes, the text so far. */
.by-ear { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.by-ear-cue { margin: 0; min-height: 1.4em; font-size: 2.2em; font-weight: 700; text-align: center; overflow-wrap: anywhere; }
.by-ear-yes {
    flex: 1 1 auto;
    min-height: 96px;
    border: none;
    border-radius: 16px;
    background: #2e7d32;
    color: #fff;
    font: inherit;
    font-size: 3em;
    font-weight: 800;
    cursor: pointer;
}
.by-ear-text { margin: 0; min-height: 1.3em; font-size: 1.6em; text-align: center; overflow-wrap: anywhere; }
.by-ear-help { margin: 0; font-size: 0.9em; color: #555; }
.by-ear-relayed { margin: 0; font-size: 0.85em; text-align: center; }
.dark .by-ear-help, .high-contrast .by-ear-help { color: #ccc; }
.yellow-on-black .by-ear-help { color: #ffd700; }
.keyboard-toggles { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }

/* A list's choices, or a slider's Less and More, for scanning and dwell
   (dialog_scan.rs): over everything but the bar that asks to keep a change. */
/* The picker for a list or a slider (dialog_scan.rs): over its panel, in
   the panel's column, inside the panel's overlay (so it goes with it and
   takes the colours). */
.scan-picker {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    z-index: 150;
    width: calc(min(400px, 85vw) - 16px);
    max-height: 80vh;
    overflow-y: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
    background: #fff;
    color: #111;
    border: 3px solid #1976d2;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}
@media (min-width: 1025px) { .scan-picker { width: calc(min(500px, 40vw) - 16px); } }
.scan-picker-title { margin: 0 0 4px; font-weight: 700; }
.scan-picker .settings-btn { min-height: 44px; text-align: left; }
.scan-picker .settings-btn[aria-pressed="true"] { border-color: #1976d2; font-weight: 700; }
.scan-picker .scan-highlighted { outline: 6px solid #ffb300; outline-offset: 2px; }
.dark .scan-picker, .high-contrast .scan-picker, .yellow-on-black .scan-picker { background: #000; color: #fff; border-color: #ffd600; }

/* A page's note to the people around the person (board_note.rs): one line
   above the board, the rest behind More; never over the board. */
.board-note {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 4px 12px;
    font-size: 0.9rem;
    line-height: 1.35;
    color: #37474f;
    background: #fffde7;
    border-bottom: 1px solid #e0d98c;
    flex: 0 0 auto;
}
.board-note-text {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.board-note.open .board-note-text {
    white-space: pre-line;
}
.board-note-more {
    flex: 0 0 auto;
    font: inherit;
    font-weight: 600;
    padding: 2px 10px;
    min-height: 32px;
    border: 1px solid #b0a64f;
    border-radius: 6px;
    background: #fff;
    color: #37474f;
    cursor: pointer;
}

/* ─── Finding words, and the way to them (finder.rs, word_finder.rs) ─────
   The place to press next is marked on itself — a cell, a hidden word's
   empty-looking place, Home or Back — by a dashed ring drawn inside it (an
   element of its own, .way-ring), so it never moves or resizes anything and
   never hides switch scanning's outline or a dwell ring. Its colour is not
   the scan's. */
/* The way's colours: its line, the faint end of its pulse (3:1 or more
   against its halo, the cell's white, and the strong end far more), and its
   halo — in every theme; the pulse runs in every theme, never with
   reduced motion. */
:root { --way-line: #6a1b9a; --way-faint: #ba68c8; --way-halo: #fff; }
.dark, .high-contrast, .yellow-on-black { --way-line: #ea80fc; --way-faint: #ab47bc; --way-halo: #000; }
.grid-cell.path-next, .nav-btn.path-next { position: relative; }
/* The ring is an element of its own in the cell or button (grid_cell.rs,
   navigation_bar.rs), over its padding box: the place's own ::after is the
   dwell's ring (.dwell-target, above), so where a pointer rests on the place
   to press both rings are drawn whole. */
.way-ring { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
/* Its halo: under the dashes and a little wider on both sides, so both
   ends of the pulse keep 3:1 or more against what is next to them on any
   cell's colour (brown, red, pink…), in every theme. */
.way-ring::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 9px solid var(--way-halo);
    border-radius: inherit;
}
.nav-btn .way-ring::before { inset: -2px; border-width: 8px; }
.way-ring::after {
    content: "";
    position: absolute;
    inset: 2px;
    border: 5px dashed var(--way-line);
    border-radius: inherit;
    animation: path-next-pulse 1.4s ease-in-out infinite;
}
.nav-btn .way-ring::after { inset: 0; border-width: 4px; }
@keyframes path-next-pulse { 50% { border-color: var(--way-faint); } }
.reduced-motion .way-ring::after { animation: none; }
@media (prefers-reduced-motion: reduce) {
    .way-ring::after { animation: none; }
}

/* How often the person chose a word, and partners modelled it (usage.rs):
   only when a partner turned them on, in a strip of their own at the top
   of the cell, never over its words (the picture below takes what is left,
   as it does beside the label). At most "99+"; where a cell is too narrow
   for both side by side (a phone), the second goes under the first, whole. */
.cell-counts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    flex-shrink: 0;
    align-self: stretch;
    gap: 1px 3px;
    font-size: 0.65em;
    line-height: 1.25;
    pointer-events: none;
}
.cell-count { white-space: nowrap; }
.cell-count { background: rgba(0, 0, 0, 0.72); color: #fff; border-radius: 8px; padding: 0 5px; font-variant-numeric: tabular-nums; }
.cell-count-modelled { background: #6a1b9a; }

/* The message bar's buttons are never smaller than 44 px (48 beside a
   wide screen's bar), nor than the smallest target the person can press
   (--min-target: MotorProfile::min_target_mm, set on the shell; 10 mm unless
   set). Where they and the message (112 px at least) do not fit side by
   side — a phone 400 px wide or less, or with ✨ — the buttons take a row of
   their own under the message, at its end: nothing shrinks, and the bar is
   the same whatever it holds, so nothing moves. */
.output-strip { flex-wrap: wrap; row-gap: 4px; }
.output-strip .output-buffer { flex: 1 1 112px; min-width: 0; }
.output-strip .output-actions { margin-inline-start: auto; }
.output-strip .output-btn { min-width: max(48px, var(--min-target, 10mm)); min-height: max(48px, var(--min-target, 10mm)); }
.output-strip .speak-btn { min-width: max(80px, var(--min-target, 10mm)); }
@media (max-width: 767px) {
    .output-strip .output-btn { min-width: max(44px, var(--min-target, 10mm)); min-height: max(44px, var(--min-target, 10mm)); }
    .output-strip .speak-btn { min-width: max(64px, var(--min-target, 10mm)); }
}

/* Back, Home and Help (with the record's dot while a record is kept:
   usage.rs), the partner button, text mode, More and Settings are 44 px
   wherever they fit. Where the bar would be wider than the screen (the
   narrowest phones, with the dot) they narrow together, never below the
   smallest target the person can press (--min-target, 10 mm unless set:
   shell.rs); where even that is too wide, the bar takes a second row. */
.navigation-bar { flex-wrap: wrap; row-gap: 4px; }
.navigation-bar > .nav-left, .navigation-bar > .nav-center, .navigation-bar > .nav-right {
    flex: 1 1 auto;
    width: min-content;
    min-width: min-content;
}
.navigation-bar > .nav-center { justify-content: center; }
.navigation-bar > .nav-right { justify-content: flex-end; }
/* Room is shared by how many buttons each group has, so they all reach
   44 px together: Back, Home and Help (and the dot); the partner button;
   text mode, More and Settings (on a wide screen, the tools and Fullscreen
   too). */
.navigation-bar > .nav-left { flex-grow: 3; }
.navigation-bar.recording > .nav-left { flex-grow: 4; }
.navigation-bar > .nav-center { flex-grow: 1; }
.navigation-bar > .nav-right { flex-grow: 3; }
@media (min-width: 640px) {
    .navigation-bar > .nav-center { flex-grow: 2; }
    .navigation-bar > .nav-right { flex-grow: 9; }
}
.navigation-bar .nav-btn {
    flex: 0 1 44px;
    min-width: max(var(--min-target, 10mm), 24px);
    min-height: max(44px, var(--min-target, 10mm));
}
@media (max-width: 339px) {
    .navigation-bar .nav-left, .navigation-bar .nav-center, .navigation-bar .nav-right { gap: 1px; }
}
.recording-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: #c62828; box-shadow: 0 0 0 2px #fff; }
.high-contrast .recording-dot, .dark .recording-dot, .yellow-on-black .recording-dot { background: #ff5252; box-shadow: 0 0 0 2px #000; }

/* The way, in the message bar's place, as Help's message is. */
.guide-banner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    min-height: 100%;
    max-height: calc(100% + 3.25em);
    z-index: 5;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 12px;
    background: #fff;
    color: #111;
    border: 3px solid #6a1b9a;
    overflow-y: auto;
}
.aac-shell.editing .guide-banner { max-height: 100%; }
/* While the way is shown, the word suggestions under it (or the sentence
   helper's row) are hidden in their place: the way's words may grow over
   them, and half a button is no target. Nothing moves. */
.aac-shell:has(.guide-banner) .prediction-bar,
.aac-shell:has(.guide-banner) .helper-row { visibility: hidden; }
.guide-words { flex: 1; min-width: 0; }
.guide-title { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-size: 1.2em; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.guide-count { font-size: 0.7em; font-weight: 600; }
.guide-message-word + .guide-message-word { margin-inline-start: 0.3em; }
.guide-message-word { font-weight: 500; }
.guide-message-word.guide-now { font-weight: 800; text-decoration: underline 3px; text-underline-offset: 3px; }
.guide-way { margin: 2px 0 0; font-size: 0.95em; line-height: 1.25; overflow-wrap: anywhere; }
.guide-step + .guide-step::before { content: " \203A  "; }
.guide-step-next { font-weight: 700; }
.guide-note { display: block; font-size: 0.85em; font-weight: 600; }
.guide-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; flex-shrink: 0; }
.guide-actions .settings-btn { min-height: 44px; }
.guide-actions .guide-scan[aria-pressed="true"] { background: #1976d2; color: #fff; border-color: #0d47a1; }
.dark .guide-banner, .high-contrast .guide-banner, .yellow-on-black .guide-banner { background: #000; color: #fff; border-color: #ea80fc; }
.guide-banner.scan-highlighted { outline: 6px solid #ffb300; outline-offset: -6px; }
.guide-banner button.scan-highlighted { outline: 6px solid #ffb300; outline-offset: 2px; }
.high-contrast .guide-banner.scan-highlighted, .high-contrast .guide-banner button.scan-highlighted,
.yellow-on-black .guide-banner.scan-highlighted, .yellow-on-black .guide-banner button.scan-highlighted { outline-color: #ffff00; }
/* On a phone the way's words take the full width, and its buttons a row
   of their own below them that never scrolls away: the words scroll, if
   they must. */
@media (max-width: 600px) {
    .guide-banner { flex-direction: column; align-items: stretch; gap: 4px; overflow: hidden; }
    .guide-words { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
    .guide-actions { flex-shrink: 0; justify-content: flex-start; gap: 4px; }
    .guide-actions .settings-btn { padding: 0 10px; }
}
@media (max-width: 479px) {
    .guide-title { font-size: 1em; }
    .guide-way { font-size: 0.85em; }
}

/* Find a word (the panel). */
.finder-panel { display: flex; flex-direction: column; gap: 10px; }
.finder-label { font-weight: 700; }
.finder-input { font-size: 1.2em; min-height: 44px; padding: 6px 10px; border: 2px solid #757575; border-radius: 8px; }
.finder-hint, .finder-summary { margin: 0; font-size: 0.9em; }
.finder-listen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.finder-listen-btn { min-height: 44px; }
.finder-listen-btn.active { background: #b71c1c; color: #fff; border-color: #7f0000; }
.finder-listen-status { font-size: 0.9em; font-weight: 600; }
.finder-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.finder-place { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; padding: 8px; border: 1px solid #bbb; border-radius: 8px; }
.finder-words { grid-column: 1; font-size: 1.1em; font-weight: 700; overflow-wrap: anywhere; }
.finder-board, .finder-way, .finder-note { grid-column: 1; font-size: 0.9em; overflow-wrap: anywhere; }
.finder-note { font-weight: 600; color: #6a1b9a; }
.finder-show { grid-column: 2; grid-row: 1 / span 5; min-height: 44px; }
.finder-none, .finder-message, .finder-results { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.finder-message h3 { margin: 8px 0 0; }
.high-contrast .finder-note, .dark .finder-note { color: #ea80fc; }

/* Analytics: chosen and modelled, the counts on the words, the record. */
.usage-table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.usage-table th, .usage-table td { text-align: start; padding: 4px; border-bottom: 1px solid #ddd; overflow-wrap: anywhere; }
.usage-choices, .usage-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.usage-choice[aria-pressed="true"], .usage-toggle[aria-pressed="true"] { background: #1976d2; color: #fff; border-color: #0d47a1; }
.usage-status { font-weight: 600; margin: 6px 0; }
.usage-confirm { margin-top: 8px; padding: 8px; border: 2px solid #b71c1c; border-radius: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.usage-confirm p { flex-basis: 100%; margin: 0; font-weight: 600; }
.ie-include-usage { display: block; margin: 6px 0 10px; }

/* Deleting a profile (panels/profiles.rs): its button in each row, and the
   question, with a backup first, in a box of its own. */
.profile-delete-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 0 14px;
    background: #fff;
    color: #b71c1c;
    border: 2px solid #b71c1c;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85em;
}
.profile-current .profile-delete-btn { margin-inline-start: auto; }
.profile-delete-confirm { margin: 8px 0; padding: 8px; border: 2px solid #b71c1c; border-radius: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.profile-delete-confirm p { flex-basis: 100%; margin: 0; font-weight: 600; }
.profile-delete-confirm .profile-delete-record { flex-basis: 100%; display: flex; gap: 8px; align-items: center; min-height: 44px; }
.profile-delete-confirm .settings-btn { min-height: 44px; }
.profile-delete-confirm .profile-delete-yes { background: #b71c1c; color: #fff; border-color: #7f0000; }
/* The partner button and More keep their own boxes (their menus open
   from them): 44 px, or the person's smallest target, narrowing with the
   rest. */
.navigation-bar .partner-mode-group, .navigation-bar .nav-more { flex: 0 1 max(44px, var(--min-target, 10mm)); min-width: min-content; }
/* The partner modes' ⋯ beside it (on a wide screen) is as large as any. */
.navigation-bar .partner-menu-btn { flex: 0 0 auto; width: max(44px, var(--min-target, 10mm)); }
@media (min-width: 640px) {
    .navigation-bar .partner-mode-group { flex-basis: calc(max(44px, var(--min-target, 10mm)) * 2 + 2px); }
}