/* Patchwork AAC — communication chrome, menu and settings styling.
   Loaded after styles.css; these rules refine the header, side rail and
   panels into one calm, consistent surface on phones and tablets alike. */
body.theme-soft { --theme-bg:#f6f5fa; --bg:#f6f5fa; --fg:#26223b; --panel:#fff; --panel-fg:#26223b; --line:#dcd8e8; --accent:#5634ba; --accent-fg:#fff; --muted:#625e73; --radius:18px; }
#app { height:100dvh; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); background:var(--bg); color:var(--fg); }
/* A dark device background darkens the chrome with it, so a black board is
   black edge to edge rather than a black panel under a white toolbar. */
#app.dark-bg { --fg:#f4f2fa; --panel:#17161d; --panel-fg:#f4f2fa; --line:#35323f; --muted:#b9b5c8; --btn-bg:#26242f; --btn-fg:#fff; --btn-border:#403d4c; --accent:#8f6ef2; --accent-fg:#fff; --focus:#ffd400; }
#app.dark-bg .cell { box-shadow:0 1px 3px rgba(0,0,0,.5); }
#app.dark-bg #edit-banner { background:#9a3412; color:#fff7ed; }

/* ---- header: message bar and controls ---- */
#top-bar { min-height:56px; padding:4px 10px; gap:6px; border-bottom:1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); background:color-mix(in srgb, var(--accent) 7%, var(--panel)); color:var(--panel-fg); }
#top-bar #vocab-switch-btn { font-weight: 800; white-space: nowrap; }
@media (max-width: 760px) { #top-bar #vocab-switch-btn { padding: 6px; min-width: 40px; } #vocab-switch-btn span { display: none; } }
.vocab-switch-list { display: grid; gap: 8px; max-height: 55vh; overflow: auto; margin: 16px 0; }
.vocab-switch-item { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 12px 16px; border: 2px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--panel-fg); text-align: left; font: inherit; font-weight: 700; cursor: pointer; }
.vocab-switch-item small { margin-left: auto; font-size: .8rem; color: var(--muted); }
.vocab-switch-item input { width: 24px; height: 24px; accent-color: var(--accent); }
.patchy-brand { flex:none; display:flex; align-items:center; gap:7px; background:transparent; border:0; padding:0 6px 0 0; min-height:44px; border-radius:10px; }
.brand-wordmark { height:44px; width:auto; object-fit:contain; background:transparent; transform-origin:50% 80%; }
.brand-icon { display:none; width:44px; height:44px; object-fit:contain; transform-origin:50% 80%; }
/* The message field IS the Speak control: it holds the words, reads them
   aloud when tapped, and carries its own Clear. That removes two permanent
   keys and stops Delete / Undo / Clear reading as three identical greys. */
#message-field { display:flex; align-items:stretch; gap:4px; flex:1 1 auto; min-width:0; min-height:48px; padding:0 4px 0 0; border:2px solid color-mix(in srgb, var(--accent) 28%, var(--line)); border-radius:12px; background:color-mix(in srgb, var(--accent) 8%, var(--panel)); box-sizing:border-box; box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 2px 8px color-mix(in srgb, var(--accent) 12%, transparent); }
#message-field.has-words { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, var(--panel)); }
#message-field:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
#message-speak { flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:8px; background:transparent; border:0; border-radius:9px; padding:6px 8px; min-height:44px; text-align:left; font:inherit; font-size:17px; line-height:20px; font-weight:700; color:var(--fg); cursor:pointer; }
#message-speak:disabled { cursor:default; }
#message-speak:not(:disabled):hover { background:rgba(0,0,0,.05); }
.theme-hc-bw #message-speak:not(:disabled):hover, .theme-hc-yb #message-speak:not(:disabled):hover { background:rgba(255,255,255,.14); }
#message-text { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#message-text.empty::before { content:''; }
/* Says what the field does without costing a key of its own. */
#message-cue { flex:none; font-size:11px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--accent-fg); background:var(--accent); border-radius:8px; padding:5px 8px; white-space:nowrap; }
#message-cue[hidden] { display:none!important; }
#message-clear { flex:none; width:32px; height:32px; border:0; border-radius:50%; background:var(--line); color:var(--panel-fg); font-size:14px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:opacity .12s, background .12s; }
#message-clear img { width:18px; height:18px; }
#message-clear:hover { background:var(--muted); color:var(--bg); }
/* Nothing to clear means nothing to show. It disappears rather than sitting
   there greyed out, which is what made the old removal keys hard to tell apart. */
#message-clear:disabled { opacity:0; pointer-events:none; }
#top-bar .msg-btn { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:44px; min-width:44px; padding:8px 12px; font-size:14px; border:1px solid color-mix(in srgb, var(--accent) 18%, var(--line)); border-radius:12px; background:var(--panel); color:var(--panel-fg); box-shadow:0 1px 1px rgba(0,0,0,.04); }
#top-bar .msg-btn img { width:24px; height:24px; }
#top-bar .msg-btn.stop img { filter:invert(1); }
#top-bar .msg-btn:disabled { opacity:.45; cursor:default; }
/* Undo is a recovery action that appears only after something was erased, so
   it is marked out rather than blending into the permanent controls. */
#top-bar .msg-btn.undo { background:#fdf6e0; border-color:#c9a227; color:#6b5200; font-weight:800; }
.theme-hc-bw #top-bar .msg-btn.undo, .theme-hc-yb #top-bar .msg-btn.undo,
.theme-hc-wb #top-bar .msg-btn.undo, .theme-hc-by #top-bar .msg-btn.undo { background:var(--panel); color:var(--panel-fg); border-color:var(--line); }
#msg-undo[hidden] { display:none!important; }
#top-bar .msg-btn.stop { background:var(--danger); color:#fff; border-color:var(--danger); font-weight:800; }
.theme-hc-bw #top-bar .msg-btn.stop, .theme-hc-yb #top-bar .msg-btn.stop { background:#000; color:var(--danger); }
#top-bar .msg-btn.home { background:var(--accent); color:var(--accent-fg); border-color:var(--accent); }
#top-bar .msg-btn.page-lock { border-color:var(--accent); font-weight:750; }
#top-bar .msg-btn.page-lock[aria-pressed="true"] { background:var(--accent); color:var(--accent-fg); }
#top-bar #adult-btn { position:static; width:auto; height:auto; opacity:1; display:inline-flex; color:var(--panel-fg); font-size:16px; z-index:auto; }
#home-btn[hidden] { display:none!important; }
#page-title { max-width:120px; overflow:hidden; text-overflow:ellipsis; font-size:13px; color:var(--muted); }
#edit-banner { padding:8px 12px; font-size:14px; background:#e85d04; color:#fff; }
#edit-banner .btn { min-height:44px; }

/* ---- panels ---- */
.panel { padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.panel-head { border-bottom-width:1px; }
.panel-body { width:100%; max-width:920px; margin:0 auto; padding:24px; }
.panel-body fieldset { background:var(--panel); border-radius:16px; }
[hidden] { display:none!important; }
/* Category tabs wrap rather than scroll: a hidden fifth tab off the right
   edge is not discoverable on a phone, and a row of two is. Unselected tabs
   carry a chip outline so they read as choices, not as headings. */
.settings-categories { display:flex; flex:none; flex-wrap:wrap; gap:6px; padding:10px 16px; background:var(--panel); border-bottom:1px solid var(--line); }
.settings-categories button { flex:1 1 auto; min-height:44px; border:1px solid var(--line); border-radius:10px; padding:8px 16px; background:var(--bg); font-weight:650; }
.settings-categories button[aria-pressed="true"] { background:var(--accent); color:var(--accent-fg); border-color:var(--accent); }
#skin-preview { font-size:38px; padding:14px 0; }

/* Effects can stack: a row of toggles rather than a single pick. */
.effects { display:flex; flex-wrap:wrap; gap:8px; }
.effects label { display:inline-flex; align-items:center; gap:8px; padding:9px 12px; border:2px solid var(--line); border-radius:12px; background:var(--panel); font-weight:600; min-height:46px; cursor:pointer; }
.effects input { width:22px; height:22px; margin:0; accent-color:var(--accent); }
.effects label:has(input:checked) { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, var(--panel)); }
.swatch-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.swatch-row button { width:44px; height:44px; border-radius:12px; border:2px solid var(--line); padding:0; }
.swatch-row button[aria-pressed="true"] { outline:3px solid var(--accent); outline-offset:2px; }
.swatch-row input[type="color"] { width:44px; height:44px; border-radius:12px; border:2px solid var(--line); padding:2px; background:var(--panel); }
.pic-credit { display:block; font-size:12px; color:var(--muted); margin-top:6px; overflow-wrap:anywhere; }
.pic-grid button .cap { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:1.2; }
.pic-grid img.photo { object-fit:cover; border-radius:8px; }
.progress-note { font-weight:600; }

/* ---- dialogs ---- */
.pw-dialog { width:min(560px,calc(100% - 24px)); max-height:calc(100dvh - 32px); border:1px solid var(--line); border-radius:24px; padding:24px; background:var(--theme-bg, var(--bg)); color:var(--fg); overflow-y:auto; box-shadow:0 18px 75px #15102640; }
.pw-dialog::backdrop { background:#14102470; }
.pw-dialog header { display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.pw-dialog h2 { margin:2px 0; font-size:23px; letter-spacing:-.5px; flex:1; }
.pw-dialog header > div { flex:1; }
.pw-dialog .btn { min-height:44px; border-width:1px; border-radius:10px; }
.eyebrow { color:var(--muted); font-size:10px; letter-spacing:1.6px; font-weight:750; }
.menu-board-name:empty { display:none; }
.menu-grid-quick { margin-bottom:14px; padding:14px; border:1px solid var(--line); border-radius:16px; background:var(--panel); }
.menu-grid-quick-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.menu-grid-quick-head strong { font-size:16px; }
.menu-grid-current { color:var(--muted); font-size:14px; font-weight:750; }
.menu-grid-quick-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.menu-grid-quick-actions .btn { width:100%; min-height:48px; }
.menu-grid-custom { display:block; width:100%; min-height:44px; margin-top:6px; border:0; background:transparent; color:var(--accent); font:inherit; font-weight:750; text-decoration:underline; text-underline-offset:3px; }
.menu-grid-hint { display:block; margin-top:8px; color:var(--muted); font-size:12px; line-height:1.4; }
.menu-actions { background:var(--panel); border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.menu-actions > button { display:flex; align-items:center; gap:13px; width:100%; padding:13px 15px; text-align:left; background:transparent; border:0; border-bottom:1px solid var(--line); min-height:70px; }
.menu-actions > button:last-child { border-bottom:0; }
.menu-actions > button > span:nth-child(2) { flex:1; }
.menu-actions small,.menu-security small { display:block; font-size:12px; font-weight:400; color:var(--muted); margin-top:4px; }
.menu-icon { width:36px; height:36px; display:grid; place-items:center; border-radius:10px; font-size:23px; color:#fff; }
.violet{background:#6942c3}.blue{background:#177db0}.coral{background:#be4439}.green{background:#437c3d}.amber{background:#936216}.teal{background:#0f766e}
.menu-security { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:20px 0 0; }
.menu-security > div { flex:1; min-width:100px; font-size:14px; }
.menu-note { font-size:12px; line-height:1.5; color:var(--muted); margin-bottom:0; }
.pin-dialog { max-width:430px; }
.pin-dialog p { font-size:14px; line-height:1.5; }
.pin-dialog label { display:block; margin:12px 0 7px; }
.pin-dialog input { width:100%; font-size:24px; padding:12px; min-height:48px; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--fg); }
#pin-error { color:var(--danger); min-height:21px; }
#patchy-tour p { line-height:1.65; font-size:17px; }
#patchy-tour footer { display:flex; align-items:center; justify-content:space-between; }
#patchy-tour img { border-radius:12px; }
.tour-target { outline:3px solid var(--focus); outline-offset:2px; }
body.edit-mode .cell:not(.blank)::before { content:'✎'; position:absolute; top:5px; right:5px; font-size:16px; background:var(--panel); color:var(--panel-fg); border-radius:7px; padding:2px 5px; z-index:2; }

/* ---- responsive header ---- */
@media (max-width:1000px) { .brand-wordmark { display:none; } .brand-icon { display:block; } #page-title { display:none; } }
@media (max-width:650px) {
  /* One row. With Speak and Clear folded into the message field there are only
     three controls left beside it, so the bar no longer has to wrap — which is
     what used to push Stop onto a second row and cost 46px of board height. */
  #top-bar { flex-wrap:nowrap; gap:5px; padding:4px 8px; }
  .patchy-brand { padding:0; }
  /* Home sits beside Patchy as an icon, where a back control belongs. */
  #home-btn { padding:8px 0; min-width:44px; }
  .home-label { display:none; }
  .stitch-board #home-btn { min-width:70px; padding:8px 5px; font-size:11px; }
  .stitch-board .home-label { display:inline; }
  #page-lock-btn { padding:8px 0; min-width:44px; }
  .page-lock-label { display:none; }
  #message-field { flex:1 1 auto; min-width:0; }
  #message-speak { padding:6px 6px; min-height:44px; }
  .menu-label { display:none; }
  #top-bar .msg-btn { padding:8px 9px; }
  #msg-back { min-width:44px; padding:8px 0; }
  /* Stop keeps a 44px target; the word hides so the sentence strip can grow. */
  #top-bar .msg-btn.stop { padding:8px 0; min-width:44px; font-size:0; }
  #top-bar .msg-btn.stop [aria-hidden] { font-size:16px; }
  #message-cue { display:none; }
  .panel-body { padding:16px; }
  .pw-dialog { padding:18px; border-radius:20px; }
  .settings-categories { padding:8px; gap:4px; }
  .settings-categories button { padding:8px 9px; font-size:15px; }
  #edit-banner { flex-wrap:wrap; gap:6px; }
  #edit-banner > span:first-child { flex-basis:100%; }
}
@media (max-width:360px) {
  /* iPhone SE class: keep all five controls on one row. */
  #top-bar .msg-btn:not(.home) { padding:8px 7px; font-size:13px; }
  #msg-back, #msg-undo { min-width:40px; }
}
@media (prefers-reduced-motion:reduce) { .cell[class*="anim-"] { animation:none!important; } }

/* Visual echo never intercepts selections or covers the message controls. */
.picture-echo { position: fixed; z-index: 80; pointer-events: none; left: 50%; top: max(125px, 25%); transform: translateX(-50%); width: min(55vw, 360px); max-height: calc(100dvh - 150px); overflow: hidden; box-sizing: border-box; padding: 18px; background: #fff; color: #171324; border: 5px solid #6b39d5; border-radius: 28px; box-shadow: 0 10px 40px #0008; text-align: center; animation: picture-echo-in 180ms ease-out; }
.picture-echo-huge { width: min(85vw, 620px); top: max(125px, 17%); }
.picture-echo-symbol { font-size: clamp(70px, 18vw, 180px); line-height: 1.1; }
.picture-echo-huge .picture-echo-symbol { font-size: clamp(120px, 32vw, 300px); }
.picture-echo-symbol img { display: block; width: 100%; height: min(32dvh, 280px); object-fit: contain; }
.picture-echo-huge .picture-echo-symbol img { height: min(46dvh, 400px); }
.picture-echo-label { font-size: clamp(24px, 4vw, 42px); font-weight: 800; overflow-wrap: anywhere; }
@keyframes picture-echo-in { from { opacity: 0; transform: translateX(-50%) scale(.7); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@media (prefers-reduced-motion: reduce) { .picture-echo { animation: none; } }

/* ---- masked buttons ----
   A word that is on the board but not yet revealed. Out of use it is simply an
   empty square, so nothing the child has learned moves when it is turned on.
   In edit mode it stays in place, faded and marked, so an adult can see what is
   waiting and reveal it when the child is ready. */
.cell.blank.masked { background:transparent; border:none; box-shadow:none; }
body.edit-mode .cell.is-masked { opacity:.42; filter:saturate(.4); }
body.edit-mode .cell.is-masked::after {
  content:'hidden'; position:absolute; left:50%; bottom:4px; transform:translateX(-50%);
  font-size:10px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  background:var(--panel); color:var(--panel-fg); border-radius:6px; padding:1px 6px; z-index:3;
}

/* ---- inline guidance ----
   Clinical guidance an adult needs once and then not again, so it folds away
   rather than sitting between them and the thing they came to do. */
.guide { border:1px solid var(--line); border-radius:12px; background:var(--bg); margin:0 0 18px; }
.guide > summary { cursor:pointer; padding:12px 14px; font-weight:700; border-radius:12px; list-style:none; }
.guide > summary::-webkit-details-marker { display:none; }
.guide > summary::before { content:'▸ '; color:var(--accent); font-weight:800; }
.guide[open] > summary::before { content:'▾ '; }
.guide[open] > summary { border-bottom:1px solid var(--line); border-radius:12px 12px 0 0; }
.guide p { margin:0; padding:10px 14px; font-size:.92rem; line-height:1.55; color:var(--fg); }
.guide p + p { border-top:1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.guide em { font-style:normal; font-weight:600; color:var(--accent); }
.guide .guide-credit { font-size:.8rem; color:var(--muted); }

/* ---- stacked choice, for questions whose options need explaining ---- */
.seg.seg-stack { flex-direction:column; gap:8px; }
.seg.seg-stack label { flex:1 1 auto; display:block; text-align:left; padding:12px 14px; min-height:0; }
.seg.seg-stack label strong { display:block; font-size:1rem; }
.seg.seg-stack label small { display:block; margin-top:3px; font-weight:400; font-size:.86rem; line-height:1.45; opacity:.82; }
.seg.seg-stack input:checked + label small { opacity:.92; }

/* ---- the recommendation that follows from the two answers ---- */
#su-recommendation { margin-top:6px; }
.reco { border:2px solid var(--accent); border-radius:14px; padding:14px 16px; background:color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.reco .reco-eyebrow { display:block; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.reco h4 { margin:4px 0 6px; font-size:1.12rem; }
.reco p { margin:0 0 10px; font-size:.94rem; line-height:1.55; }
.reco ul { margin:0; padding-left:18px; font-size:.88rem; color:var(--muted); }
.reco li { margin-bottom:3px; }
.reco .reco-facts { margin:2px 0 0; font-size:.88rem; color:var(--muted); font-weight:600; }

/* The recommendation is a result, not a control — flat, no button affordance. */
.reco { border:2px solid var(--accent); border-radius:14px; padding:14px 16px; background:color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.reco .reco-eyebrow { display:block; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); }
.reco h4 { margin:4px 0 10px; font-size:1.1rem; }
.reco-preview { display:grid; gap:3px; margin:0 0 10px; }
.reco-preview .pcell { aspect-ratio:1; border-radius:3px; border:1px solid rgba(0,0,0,.18); }
.reco-preview .pcell.blank { background:transparent; border:1px dashed color-mix(in srgb, var(--accent) 35%, transparent); }
.reco .reco-facts { margin:0; font-size:.86rem; color:var(--muted); font-weight:600; }
/* Stacked options are read, not scanned — left aligned, not centered. */
.seg.seg-stack label { display:block!important; place-items:initial!important; text-align:left!important; }
.seg.seg-stack label strong { display:block; text-align:left; }
.seg.seg-stack label small { display:block; text-align:left; }
/* A thumbnail, not a mockup — it shows the shape and the coloring rule at a
   glance and then gets out of the way. */
.reco-preview { max-width:232px; gap:2px; }
.reco-preview .pcell { border-radius:2px; }


/* T336 layout engine — growth ladder preview + advanced warning */
.ladder-preview {
  position: relative;
  margin-top: 10px;
  height: 72px;
  border-radius: 10px;
  border: 1px dashed color-mix(in srgb, var(--panel-fg) 35%, transparent);
  background: color-mix(in srgb, var(--panel-fg) 6%, transparent);
  overflow: hidden;
}
.ladder-dot {
  position: absolute;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: #5b4fc9;
  box-shadow: 0 0 0 2px #fff;
}
.advanced-disclosure {
  margin-top: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--panel-fg) 5%, transparent);
}
.advanced-disclosure summary {
  cursor: pointer;
  font-weight: 600;
  padding: 4px 0;
}
.warn-hint { color: #8a4b00; }


/* T339 build stamp — always visible under Settings header */
.build-stamp {
  margin: 0;
  padding: 6px 16px 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}


/* ===== T340 Tobii-style edit UX ===== */
#edit-marquee {
  position: fixed; pointer-events: none; z-index: 9999;
  border: 2px dashed #6b4eff; background: rgba(107, 78, 255, 0.15);
  display: none;
}
#edit-marquee.active { display: block; }
body.edit-mode .cell.is-multiselected {
  outline: 3px solid #6b4eff; outline-offset: -3px;
  box-shadow: 0 0 0 3px rgba(107, 78, 255, 0.35);
}
body.edit-mode .cell.is-dragging { opacity: 0.45; }
.edit-drag-ghost {
  position: fixed; z-index: 10000; pointer-events: none; opacity: 0.9;
  box-shadow: 0 12px 28px rgba(0,0,0,0.28); border-radius: 12px;
}
body.marquee-mode #grid { cursor: crosshair; }
body.marquee-mode #edit-marquee-btn[aria-pressed="true"] {
  background: #6b4eff; color: #fff; border-color: #6b4eff;
}
#edit-banner .edit-sel-count { font-weight: 600; align-self: center; min-width: 5ch; }
#edit-banner { flex-wrap: wrap; gap: 6px; }

/* ===== T374 welcome / vocabulary picker ===== */
.welcome-body { max-width: 760px; }
.welcome-lede {
  margin: 0 0 8px;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.welcome-compat {
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.45;
}
.vocab-list { display: flex; flex-direction: column; gap: 12px; }
.vocab-card {
  display: grid;
  grid-template-columns: minmax(112px, 28%) 1fr;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 12px;
  border: 2px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  color: inherit;
  font: inherit;
  cursor: pointer;
}
button.vocab-card:hover,
button.vocab-card:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.vocab-card.not-ready {
  cursor: default;
  opacity: 0.78;
  background: color-mix(in srgb, var(--panel-fg) 4%, var(--panel));
}
.vocab-art {
  min-height: 72px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--panel-fg) 6%, var(--bg));
  padding: 8px;
  display: grid;
  place-items: center;
}
.vocab-art svg { display: block; }
.vocab-text h3 {
  margin: 0 0 4px;
  font-size: 1.12rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}
.vocab-text .soon {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
}
.vocab-tag { margin: 0; font-weight: 700; }
.vocab-who { margin: 4px 0 8px; color: var(--muted); font-size: 0.92rem; }
.vocab-body { margin: 0; font-size: 0.95rem; line-height: 1.4; }
.welcome-unsure { margin: 22px 0 8px; }
@media (max-width: 560px) {
  .vocab-card { grid-template-columns: 1fr; }
  .vocab-art { min-height: 64px; }
}
/* Google Fonts Roboto, locally cached for offline AAC use (assets/fonts/OFL.txt). */
@font-face { font-family:'Moments Roboto'; src:url('../assets/fonts/Roboto-variable.ttf') format('truetype'); font-style:normal; font-weight:100 900; font-display:swap; }
/* Patchwork Moments: a dark video-library layout, never an algorithmic feed. */
body.moments-board :is(#top-bar,#sidebar,#grid.moments-screen) { font-family:'Moments Roboto',Roboto,Arial,sans-serif; letter-spacing:0; }
body.moments-board .board-wrap { background: var(--moments-bg,#0f0f0f); padding: 0; }
body.moments-board #top-bar { background:var(--moments-bg,#0f0f0f); color:#f1f1f1; border-color:#303030; }
body.moments-board #top-bar .brand-wordmark { display:none; }
body.moments-board #top-bar .brand-icon { display:block; }
body.moments-board #message-field { background:#222; border-color:#484848; box-shadow:none; }
body.moments-board #message-clear img, body.moments-board #msg-back img { filter:invert(1); }
body.moments-board #message-speak, body.moments-board #page-title { color:#f1f1f1; }
body.moments-board #top-bar .msg-btn:not(.stop):not(.home) { background:#272727; color:#f1f1f1; border-color:#484848; }
body.moments-board #top-bar #adult-btn { color:#f1f1f1; }
body.moments-board #sidebar {
  width: clamp(120px, 17vw, 190px); background: var(--moments-bg,#0f0f0f); border-right: 1px solid #303030;
  box-shadow: none; gap: 3px; padding: 12px 7px;
}
body.moments-board #grid.moments-screen {
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  padding: 14px clamp(12px, 3vw, 32px) 32px; gap: 16px; color: #f1f1f1;
  background: var(--moments-bg,#0f0f0f); min-height: 0; min-width:0; align-content: normal;
}
body.moments-board #grid.moments-screen > * { flex: none; }
body.moments-board #grid.moments-screen button { font-family:inherit; }
.moments-rail-btn {
  display:flex; align-items:center; gap:13px; width:100%; min-height:50px; flex:none; border:0; border-radius:11px;
  background:transparent; color:#f1f1f1; text-align:left; font-weight:600;
  font-size:.91rem; padding:8px 11px; line-height:1.25;
}
.moments-rail-icon { display:grid; place-items:center; flex:none; width:30px; height:30px; border-radius:9px; background:#474747; }
.moments-rail-icon img { display:block; width:23px; height:23px; filter:invert(1); }
.moments-rail-icon.home { background:#c42c27; }
.moments-rail-icon.hungry { background:#a95d28; }
.moments-rail-icon.thirsty { background:#287b9b; }
.moments-rail-icon.body-parts { background:#ad495c; }
.moments-rail-icon.play { background:#3d8764; }
.moments-rail-icon.places { background:#596bb0; }
.moments-rail-icon.people { background:#34857c; }
.moments-rail-icon.favorites { background:#a2497e; }
.moments-rail-icon.archive { background:#626262; }
.moments-rail-btn.moments-add-folder { margin-top:8px; color:#e3e3e3; border:1px dashed #686868; }
.moments-rail-text { min-width:0; overflow-wrap:anywhere; }
.moments-rail-btn.current { background: #303030; }
.moments-rail-btn:hover { background: #252525; }
.moments-rail-btn:focus-visible { outline:3px solid #ffd400; outline-offset:2px; }
.moments-header { display:grid; grid-template-columns:auto minmax(190px,1fr) auto; align-items:center; gap:16px; width:100%; }
.moments-title { display:flex; align-items:center; gap:8px; min-width:0; white-space:nowrap; font-size:clamp(1.1rem,2.5vw,1.5rem); letter-spacing:-.035em; }
.moments-title strong { color:#fff; font-family:'Moments Roboto',Roboto,Arial,sans-serif; font-variation-settings:'wght' 800,'wdth' 75; line-height:1; }
.moments-logo { display:grid; place-items:center; flex:none; width:40px; height:28px; border-radius:8px; background:#ff0033; }
.moments-logo img { width:25px; height:25px; filter:invert(1); }
.moments-tools { display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
.moments-search-toggle { display:none; }
.moments-tool-icon { display:none; }
.moments-create-wrap { position:relative; }
.moments-tools .moments-create { background:#353535; border-color:#555; }
.moments-create-menu { position:absolute; right:0; top:calc(100% + 6px); z-index:12; width:215px; padding:6px; border:1px solid #484848; border-radius:12px; background:#282828; box-shadow:0 14px 35px #0009; }
.moments-create-menu[hidden] { display:none; }
.moments-create-menu button { display:block; width:100%; text-align:left; border:0; background:transparent; border-radius:7px; }
.moments-create-menu button:hover, .moments-create-menu button:focus-visible { background:#484848; }
.moments-tools button, .moments-add { border:1px solid #383838; border-radius:999px; background:#272727; color:#f1f1f1; padding:8px 13px; min-height:40px; font-weight:650; }
.moments-tools button.selected { background:#f1f1f1; color:#111; border-color:#f1f1f1; }
.moments-search { justify-self:center; width:min(560px,100%); min-height:48px; border:1.5px solid #484848; border-radius:999px; padding:8px 18px; background:#181818; color:#f1f1f1; font:inherit; font-size:1rem; }
.moments-search::placeholder { color:#aaa; }
.moments-suggestions { align-self:center; width:min(560px,100%); margin-top:-12px; padding:5px; border:1px solid #383838; border-radius:12px; background:#222; box-shadow:0 12px 28px #0008; }
.moments-suggestion { display:block; width:100%; min-height:44px; padding:9px 13px; border:0; border-radius:8px; background:transparent; color:#f1f1f1; text-align:left; font-size:.94rem; font-weight:500; }
.moments-suggestion:hover, .moments-suggestion:focus-visible { background:#383838; }
.moments-suggestion:focus-visible { outline:3px solid #ffd400; }
.moments-topic-wrap { display:flex; align-items:center; gap:5px; min-width:0; width:100%; }
.moments-topics { display:flex; align-items:center; gap:10px; min-width:0; flex:1; overflow-x:auto; overflow-y:hidden; white-space:nowrap; overscroll-behavior-x:contain; touch-action:pan-x; scrollbar-width:none; scroll-snap-type:x proximity; padding:2px 0; }
.moments-topics::-webkit-scrollbar { display:none; }
.moments-topic-chip { flex:none; min-height:44px; padding:8px 15px; border:0; border-radius:10px; background:#272727; color:#f1f1f1; font:inherit; font-size:.91rem; font-weight:700; scroll-snap-align:start; }
.moments-topic-chip.selected { background:#f1f1f1; color:#111; }
.moments-topic-arrow, .moments-carousel-arrow { flex:none; width:44px; height:44px; border:0; border-radius:50%; background:#303030; color:#fff; font-size:1.6rem; line-height:1; }
.moments-topic-arrow:disabled, .moments-carousel-arrow:disabled { opacity:.35; }
.moments-topic-chip:focus-visible, .moments-topic-arrow:focus-visible, .moments-carousel-arrow:focus-visible, .moments-touch:focus-visible { outline:3px solid #ffd400; outline-offset:2px; }
.moments-quick { display:flex; align-items:stretch; gap:7px; position:sticky; top:0; z-index:5; overflow-x:auto; scrollbar-width:none; background:var(--moments-bg,#0f0f0f); padding:5px 0; }
.moments-quick[hidden] { display:none; }
.moments-quick::-webkit-scrollbar { display:none; }
.moments-quick-btn { display:inline-flex; flex:1 0 90px; max-width:160px; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-width:0; min-height:92px; padding:3px; border:0; border-radius:0; background:transparent!important; color:#f1f1f1; font:inherit; font-weight:800; text-align:center; }
.moments-quick-btn:focus-visible { outline:3px solid #fff; outline-offset:2px; }
.moments-quick-icon { display:inline-grid; place-items:center; flex:none; width:66px; height:66px; border-radius:50%; border:1px solid #ffffff30; box-shadow:0 2px 5px #0005; }
.moments-quick-icon img { display:block; width:44px; height:44px; filter:invert(1); }
.moments-quick-icon.core-art { overflow:hidden; background:#fff!important; }
.moments-quick-icon.core-art img { width:100%; height:100%; object-fit:cover; filter:none!important; }
.moments-quick-text { min-width:0; line-height:1.1; }
.moments-quick-edit { flex:0 0 112px; min-height:60px; border:1px dashed #aaa; border-radius:12px; background:#252525; color:#fff; font:inherit; font-weight:700; }
.moments-quick-edit:focus-visible { outline:3px solid #ffd400; outline-offset:2px; }
.moments-quick-btn.quick-yes .moments-quick-icon { background:#387d51; }
.moments-quick-btn.quick-no .moments-quick-icon { background:#a63939; }
.moments-quick-btn.quick-more .moments-quick-icon { background:#79509a; }
.moments-quick-btn.quick-stop .moments-quick-icon { background:#f4c0ce; }
.moments-quick-btn.quick-stop .moments-quick-icon img { filter:none; }
.moments-quick-btn.quick-all-done .moments-quick-icon { background:#467d95; }
.moments-quick-btn.quick-help .moments-quick-icon { background:#a98431; }
.moments-quick-btn.quick-love .moments-quick-icon { background:#d34b88; }
.moments-quick-pick.quick-yes .moments-quick-icon { background:#387d51; }
.moments-quick-pick.quick-no .moments-quick-icon { background:#a63939; }
.moments-quick-pick.quick-more .moments-quick-icon { background:#79509a; }
.moments-quick-pick.quick-stop .moments-quick-icon { background:#f4c0ce; }
.moments-quick-pick.quick-stop .moments-quick-icon img { filter:none; }
.moments-quick-pick.quick-all-done .moments-quick-icon { background:#467d95; }
.moments-quick-pick.quick-help .moments-quick-icon { background:#a98431; }
.moments-quick-pick.quick-love .moments-quick-icon { background:#d34b88; }
.moments-quick-pick.quick-custom .moments-quick-icon, .moments-quick-btn.quick-custom .moments-quick-icon { background:#406681; }
.moments-quick-video { display:none; }
.moments-edit-tip { display:flex; gap:12px; align-items:center; justify-content:space-between; padding:10px 12px; background:#fff3d7; border-radius:10px; font-weight:650; }
.moments-manage-tabs { display:flex; gap:6px; overflow-x:auto; padding:2px 0; }
.moments-manage-tab { flex:none; min-height:40px; border:1px solid #484848; border-radius:999px; padding:6px 12px; background:#272727; color:#f1f1f1; font-weight:700; }
.moments-manage-tab.selected { color:#111; background:#f1f1f1; border-color:#f1f1f1; }
.moments-state { display:inline-block; margin-top:4px; padding:2px 6px; border-radius:4px; background:#e9e9e9; color:#333; text-transform:capitalize; font-size:.75rem; }
.moments-empty { color:#bbb; padding:16px; }
.moments-content { min-width:0; }
.moments-section { margin:0 0 28px; }
.moments-section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 12px; }
.moments-phrase-avatar { display:grid; place-items:center; flex:none; border-radius:50%; overflow:hidden; background:#f5f3ed; }
.moments-phrase-avatar img { display:block; width:88%; height:88%; object-fit:contain; }
.moments-section-heading h2 { margin:0; font-size:clamp(1.15rem,2.6vw,1.55rem); font-weight:700; }
.moments-row-order { display:flex; gap:6px; flex-wrap:wrap; }
.moments-row-order button { min-height:44px; border:1px solid #555; border-radius:8px; padding:6px 10px; background:#272727; color:#fff; font-weight:700; }
.moments-row-order button:disabled { opacity:.4; }
.moments-search-results { min-width:0; }
.moments-results-title { margin:0 0 20px; font-size:clamp(1.1rem,2.4vw,1.4rem); font-weight:700; }
.moments-results-list { display:grid; gap:24px; }
.moments-result-card .moments-touch { display:grid; grid-template-columns:minmax(0,42%) minmax(0,1fr); grid-template-rows:auto 1fr; column-gap:16px; }
.moments-result-card .moments-thumb { grid-column:1; grid-row:1 / span 3; }
.moments-result-card .moments-caption-row { grid-column:2; grid-row:1; padding:0 48px 0 0; }
.moments-result-source { grid-column:2; grid-row:2; padding-top:8px; color:#aaa; font-size:.86rem; }
.moments-result-card .moments-state { grid-column:2; grid-row:3; }
.moments-result-card .moments-card-more { top:0; bottom:auto; }
.moments-list { gap:18px 14px; }
.moments-list.grid { display:flex; flex-wrap:nowrap; min-width:0; width:100%; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; touch-action:pan-x; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:4px; }
.moments-list.grid::-webkit-scrollbar { display:none; }
.moments-list.grid .moments-card { flex:0 0 clamp(260px,32vw,420px); scroll-snap-align:start; }
.moments-carousel-tools { display:flex; align-items:center; justify-content:flex-end; gap:8px; color:#bbb; font-weight:700; }
.moments-carousel-tools span { margin-right:auto; }
.moments-list.scroll { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); min-width:0; width:100%; }
.moments-card { min-width:0; position:relative; }
.moments-card[hidden] { display:none; }
.moments-touch { display:block; width:100%; padding:0; border:0; background:transparent; color:#f1f1f1; text-align:left; }
.moments-touch:active .moments-thumb { filter:brightness(.88); }
.moments-thumb { position:relative; width:100%; aspect-ratio:16/9; border-radius:11px; overflow:hidden; background:linear-gradient(140deg,#234e48,#457d70); }
.moments-video, .moments-poster { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.moments-poster { z-index:1; }
.moments-thumb.playing .moments-poster, .moments-thumb.playing .moments-play, .moments-thumb.playing .moments-missing { display:none; }
.moments-play { position:absolute; z-index:2; left:50%; top:50%; transform:translate(-50%,-50%); display:grid; place-items:center; width:46px; height:34px; border-radius:9px; background:#c42c27; }
.moments-play img { display:block; width:24px; height:24px; filter:invert(1); }
.moments-missing { position:absolute; z-index:2; bottom:8px; right:8px; background:rgba(0,0,0,.73); color:#fff; font-size:.73rem; padding:4px 7px; border-radius:4px; }
.moments-thumb.awaiting-video { display:grid; place-items:center; background:#242424; border:1px solid #424242; }
.moments-thumb.awaiting-video .moments-missing { position:static; background:transparent; font-size:clamp(1rem,3vw,1.45rem); font-weight:800; letter-spacing:.04em; text-align:center; }
.moments-frequent { display:none; }
.moments-caption-row { display:flex; align-items:flex-start; gap:8px; min-width:0; padding:8px 48px 0 2px; }
.moments-phrase-avatar { width:34px; height:34px; }
.moments-caption { display:block; min-width:0; font-size:clamp(.98rem,2.2vw,1.15rem); line-height:1.32; font-weight:600; }
.moments-card-more { position:absolute; right:0; bottom:0; z-index:3; width:44px; height:44px; border:0; border-radius:50%; background:transparent; color:#f1f1f1; font:inherit; font-size:1.45rem; line-height:1; }
.moments-card-more:hover, .moments-card-more:focus-visible { background:#303030; }
.moments-card-more:focus-visible { outline:3px solid #ffd400; outline-offset:2px; }
.moments-dialog { width:min(610px,calc(100vw - 20px)); max-height:calc(100dvh - 20px); overflow:auto; padding:22px; border:1px solid #aaa; border-radius:16px; background:#fff; color:#171717; box-shadow:0 16px 50px #0005; }
.moments-dialog::backdrop { background:#0009; }
.moments-dialog h2 { margin:0 0 12px; }
.moments-dialog p, .moments-dialog li { line-height:1.45; }
.moments-dialog label:not(.moments-file-label) { display:block; font-weight:700; margin:13px 0 5px; }
.moments-dialog input[type=text], .moments-dialog input[type=search], .moments-dialog input:not([type]), .moments-dialog select { display:block; width:100%; min-height:44px; border:1px solid #999; border-radius:8px; padding:9px; font:inherit; }
.moments-quick-pick { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid #ddd; }
.moments-quick-pick.is-hidden { opacity:.62; }
.moments-quick-pick .moments-quick-icon { width:54px; height:54px; }
.moments-quick-fields { flex:1; min-width:0; }
.moments-quick-fields label { margin:0 0 6px!important; font-size:.88rem; }
.moments-quick-fields input, .moments-quick-fields select { margin-top:3px; }
.moments-quick-controls { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px; max-width:145px; }
.moments-quick-controls label { display:flex!important; align-items:center; gap:5px; width:100%; justify-content:flex-end; margin:0!important; }
.moments-quick-controls input { width:20px; height:20px; }
.moments-quick-controls button { min-width:44px; min-height:44px; padding:5px; }
#moments-quick-list { max-height:48dvh; overflow-y:auto; }
#moments-quick-add-core, #moments-quick-add-custom { margin-top:7px; }
.moments-frequent-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 12px 10px; }
.moments-frequent-heading h2 { margin:0; }
.moments-frequent-choose { min-width:78px; min-height:44px; border:1px solid #5b5b5b; border-radius:999px; background:#303030; color:#fff; font:inherit; font-weight:700; }
.moments-frequent-choose:focus-visible { outline:3px solid #ffd400; outline-offset:2px; }
.moments-frequent-pick { display:flex; align-items:center; gap:5px; min-height:48px; margin:5px 0; }
.moments-frequent-pick-label { flex:1; min-width:0; font-weight:700; }
.moments-frequent-pick button { flex:none; min-width:44px; }
#moments-frequent-selected { border-bottom:1px solid #ccc; padding-bottom:10px; }
#moments-frequent-available { max-height:32dvh; overflow:auto; margin-top:10px; }
.moments-frequent-option { display:block; width:100%; margin:4px 0; text-align:left; }
.moments-frequent-option.is-selected { border-color:#245f4b; background:#e8f6ee; }
.moments-frequent-option:disabled { opacity:.52; cursor:not-allowed; }
#moments-frequent-error { margin:6px 0; font-weight:700; color:#7a3412; }
.moments-frequent-option strong, .moments-frequent-option small { display:block; }
.moments-frequent-option small { color:#555; font-weight:400; }
.moments-recommend-mode { display:grid; gap:5px; margin:12px 0; }
.moments-recommend-mode label { display:flex!important; gap:8px; align-items:flex-start; margin:0!important; font-weight:500!important; }
.moments-recommend-mode input { margin-top:4px; }
.moments-dialog input[type=range] { width:100%; min-height:35px; }
.moments-dialog button, .moments-file-label { min-height:44px; border:1px solid #777; background:#f2f2f2; color:#111; border-radius:9px; padding:8px 13px; font:inherit; font-weight:650; }
.moments-file-label { display:inline-flex; align-items:center; cursor:pointer; }
#moments-file { position:absolute; width:1px; height:1px; opacity:0; }
.moments-record-actions, .moments-dialog-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.moments-dialog-actions { justify-content:flex-end; }
.moments-dialog-actions button:last-child { background:#245f4b; color:#fff; border-color:#245f4b; }
.moments-dialog-actions button:disabled { opacity:.55; }
.moments-action-list { display:grid; gap:7px; }
.moments-action-list button { width:100%; min-height:50px; text-align:left; background:#f7f7f7; }
.moments-action-list button:hover, .moments-action-list button:focus-visible { background:#e8e8e8; }
body.moments-board #message-field { border-radius:18px; }
body.moments-board #message-speak { font-weight:600; }
body.moments-board #top-bar .msg-btn:not(.stop):not(.home) { box-shadow:none; }
@media (max-width:650px) {
  body.moments-board #top-bar .msg-btn:not(.stop):not(.home) { background:transparent; border-color:#383838; }
  body.moments-board #top-bar .msg-btn.stop { border-radius:50%; }
}
.moments-dialog video, #moments-frame-preview { display:block; max-width:100%; max-height:32vh; margin:8px auto; border-radius:8px; background:#222; }
.moments-dialog iframe { display:block; width:100%; aspect-ratio:16/9; margin:8px auto; border:0; border-radius:8px; }
.moments-dialog iframe[hidden], #moments-trim[hidden] { display:none; }
.moments-dialog input[type=number], .moments-dialog input[type=url] { display:block; width:100%; min-height:44px; border:1px solid #999; border-radius:8px; padding:9px; font:inherit; }
.moments-folder-option { display:flex; align-items:center; gap:5px; margin:5px 0; }
.moments-folder-option label { display:flex!important; align-items:center; gap:10px; flex:1; min-height:44px; margin:0!important; }
.moments-folder-option input { width:20px; height:20px; }
.moments-folder-option button { min-width:44px; }
.moments-dialog video[hidden], #moments-frame-preview[hidden] { display:none; }
.moments-hint { color:#555; font-size:.88rem; }
.moments-error { color:#a51616; font-weight:700; }
@media (max-width:1200px) {
  .moments-header { grid-template-columns:minmax(0,1fr) auto; gap:9px 12px; }
  .moments-tools { grid-column:2; grid-row:1; }
  .moments-search { grid-column:1 / -1; grid-row:2; }
}
body.moments-board:is(.theme-hc-bw,.theme-hc-wb,.theme-hc-yb,.theme-hc-by) :is(.board-wrap,#sidebar,#grid.moments-screen,.moments-quick,#top-bar,#message-field) {
  background:var(--bg); color:var(--fg); border-color:var(--line);
}
body.moments-board:is(.theme-hc-bw,.theme-hc-wb,.theme-hc-yb,.theme-hc-by) :is(.moments-rail-btn,.moments-touch,.moments-card-more,.moments-search,.moments-tools button,.moments-frequent-choose,.moments-manage-tab,.moments-topic-chip,.moments-topic-arrow,.moments-carousel-arrow,.moments-quick-btn,#message-speak,#page-title) {
  background:var(--btn-bg); color:var(--btn-fg); border-color:var(--btn-border);
}
body.moments-board:is(.theme-hc-bw,.theme-hc-wb,.theme-hc-yb,.theme-hc-by) :is(.moments-rail-btn.current,.moments-tools button.selected,.moments-manage-tab.selected,.moments-topic-chip.selected) {
  background:var(--accent); color:var(--accent-fg);
}
body.moments-board:is(.theme-hc-bw,.theme-hc-wb,.theme-hc-yb,.theme-hc-by) :is(.moments-suggestions,.moments-suggestion) {
  background:var(--btn-bg); color:var(--btn-fg); border-color:var(--btn-border);
}
body.moments-board:is(.theme-hc-bw,.theme-hc-wb,.theme-hc-yb,.theme-hc-by) .moments-result-source { color:var(--fg); }
body.moments-board:is(.theme-hc-bw,.theme-hc-wb,.theme-hc-yb,.theme-hc-by) #top-bar .msg-btn:not(.stop):not(.home) {
  background:var(--btn-bg); color:var(--btn-fg); border-color:var(--btn-border);
}
body.moments-board:is(.theme-hc-bw,.theme-hc-wb,.theme-hc-yb,.theme-hc-by) #top-bar #adult-btn,
body.moments-board:is(.theme-hc-bw,.theme-hc-wb,.theme-hc-yb,.theme-hc-by) .moments-carousel-tools { color:var(--fg); }
body.moments-board #edit-create-btn, body.moments-board #edit-create-folder,
body.moments-board #edit-marquee-btn, body.moments-board #edit-bulk { display:none; }
@media (max-width:1150px) {
  .moments-quick-btn { flex-direction:column; gap:0; min-height:76px; padding:3px; }
  .moments-quick-icon { width:46px; height:46px; }
  .moments-quick-icon img { width:40px; height:40px; }
  .moments-quick-text { font-size:.78rem; }
}
@media (max-width:560px) {
  /* On phones, keep the full width for video, like a mobile video library.
     Fringe remains one swipeable navigation level at the bottom. */
  body.moments-board .board-area { flex-direction:column; }
  body.moments-board #sidebar {
    order:2; width:100%; height:auto; min-height:68px; flex-direction:row;
    overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain;
    scrollbar-width:none; scroll-snap-type:x proximity;
    border:0; border-top:1px solid #303030; padding:4px 5px calc(4px + env(safe-area-inset-bottom)); gap:2px;
  }
  body.moments-board #sidebar::-webkit-scrollbar { display:none; }
  body.moments-board .board-wrap { order:1; }
  .moments-rail-btn { flex:0 0 74px; flex-direction:column; justify-content:center; gap:2px; min-width:74px; min-height:60px; max-height:68px; font-size:.69rem; padding:5px 3px; text-align:center; scroll-snap-align:start; }
  .moments-rail-icon { width:31px; height:31px; border-radius:9px; }
  .moments-rail-icon img { width:23px; height:23px; }
  .moments-rail-text { width:100%; overflow-wrap:normal; line-height:1.1; }
  body.moments-board #grid.moments-screen { padding:8px 0 14px; gap:0; scrollbar-width:none; }
  body.moments-board #grid.moments-screen::-webkit-scrollbar { display:none; }
  .moments-header { grid-template-columns:minmax(0,1fr) auto; gap:7px; }
  .moments-header { order:1; padding:8px 12px 12px; }
  .moments-title { grid-column:1; grid-row:1; min-width:0; gap:6px; font-size:clamp(1.1rem,5.35vw,1.35rem); }
  .moments-title strong { overflow:hidden; text-overflow:ellipsis; }
  .moments-logo { width:37px; height:27px; }
  .moments-logo img { width:23px; height:23px; }
  .moments-search { display:none; grid-column:1 / -1; grid-row:2; min-height:44px; }
  .moments-search-open .moments-search { display:block; }
  .moments-tools { grid-column:2; grid-row:1; flex-wrap:nowrap; gap:3px; }
  .moments-tools button { font-size:.72rem; min-height:36px; padding:4px 6px; white-space:nowrap; }
  .moments-tools .moments-view { display:none; }
  .moments-tools .moments-search-toggle { display:inline-flex; align-items:center; justify-content:center; width:34px; min-width:34px; padding:0; border:0; background:transparent; }
  .moments-tools .moments-create { display:inline-flex; align-items:center; justify-content:center; min-width:34px; padding:0; border:0; background:transparent; font-size:0; }
  .moments-tools .moments-help { display:inline-flex; align-items:center; justify-content:center; width:34px; padding:0; border:0; background:transparent; font-size:0; }
  .moments-tools .moments-tool-icon { display:block; width:25px; height:25px; filter:invert(1); }
  .moments-suggestions { order:5; width:calc(100% - 24px); margin:0 12px; }
  .moments-topic-wrap { order:3; padding:3px 10px 8px; border-bottom:1px solid #303030; }
  .moments-frequent { display:block; order:4; min-width:0; padding:12px 0 10px; }
  .moments-frequent h2 { font-size:1.13rem; }
  .moments-frequent-list { display:flex; gap:12px; overflow-x:auto; overflow-y:hidden; padding:0 12px 8px; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; touch-action:pan-x; scrollbar-width:none; }
  .moments-frequent-list::-webkit-scrollbar { display:none; }
  .moments-frequent-list .moments-card { flex:0 0 min(70vw,270px); scroll-snap-align:start; }
  .moments-frequent-list .moments-caption { font-size:.88rem; }
  .moments-content { order:6; }
  .moments-search-results { order:7; padding:12px; }
  .moments-edit-tip { order:5; margin:8px 12px; }
  .moments-manage-tabs { order:5; padding:6px 12px; }
  .moments-topic-arrow { display:none; }
  .moments-section { margin:0; }
  .moments-section-heading { display:none; }
  body.edit-mode .moments-section-heading { display:flex; padding:8px 12px; }
  .moments-section-heading h2 { font-size:1.12rem; }
  .moments-carousel-arrow { width:32px; height:32px; font-size:1.25rem; }
  .moments-result-card .moments-touch { display:block; }
  .moments-result-card .moments-thumb { width:100%; }
  .moments-result-card .moments-caption-row { padding:8px 38px 0 2px; }
  .moments-result-card .moments-result-source { display:block; padding:4px 0 0 42px; }
  .moments-result-card .moments-card-more { top:auto; bottom:0; }
  .moments-list.grid { display:block; overflow:visible; }
  .moments-list.grid .moments-card { width:100%; }
  .moments-list.scroll { display:block; }
  .moments-list.scroll .moments-card { margin-bottom:18px; }
  .moments-list.scroll .moments-thumb { border-radius:0; }
  .moments-list.scroll .moments-caption-row { padding:8px 46px 0 12px; }
  .moments-list.scroll .moments-card-more { right:8px; }
  .moments-caption-row { gap:6px; padding-right:30px; }
  .moments-phrase-avatar { width:28px; height:28px; }
  .moments-caption { font-size:.97rem; }
  .moments-topic-wrap { gap:2px; }
  .moments-topics { gap:6px; }
  .moments-topic-chip { font-size:.82rem; padding:7px 11px; }
  .moments-quick { order:2; position:static; display:flex; overflow-x:auto; gap:4px; padding:6px 8px 9px; scroll-snap-type:x proximity; scrollbar-width:none; }
  .moments-quick::-webkit-scrollbar { display:none; }
  .moments-quick-btn { flex:0 0 50px; max-width:none; min-height:72px; flex-direction:column; gap:3px; padding:2px; border:0; border-radius:0; background:transparent!important; color:#f1f1f1; scroll-snap-align:start; }
  .moments-quick-edit { flex:0 0 92px; font-size:.72rem; }
  .moments-quick-icon { width:46px; height:46px; border-radius:50%; background:#252525; border:1px solid #ffffff30; box-shadow:0 2px 5px #0005; }
  .moments-quick-icon img { width:33px; height:33px; filter:invert(1); }
  .moments-quick-text { font-size:.66rem; overflow-wrap:anywhere; }
  .moments-quick-btn.quick-yes .moments-quick-icon { background:#387d51; }
  .moments-quick-btn.quick-no .moments-quick-icon { background:#a63939; }
  .moments-quick-btn.quick-more .moments-quick-icon { background:#79509a; }
  .moments-quick-btn.quick-stop .moments-quick-icon { background:#f4c0ce; }
  .moments-quick-btn.quick-stop .moments-quick-icon img { width:35px; height:35px; filter:none; }
  .moments-quick-btn.quick-all-done .moments-quick-icon { background:#467d95; }
  .moments-quick-btn.quick-help .moments-quick-icon { background:#a98431; }
  .moments-quick-btn.quick-love .moments-quick-icon { background:#d34b88; }
  .moments-quick-pick { flex-wrap:wrap; }
  .moments-quick-controls { max-width:none; width:100%; justify-content:flex-start; }
  .moments-quick-controls label { width:auto; margin-right:auto!important; }
  #moments-quick-list { max-height:none; overflow:visible; }
  /* One scrolling surface avoids nested-scroll jumps when the phone keyboard opens. */
  #moments-frequent-available { max-height:none; overflow:visible; }
}
@media (max-width:360px) {
  .moments-title { font-size:4.45vw; }
  .moments-logo { width:32px; height:24px; }
  .moments-tools .moments-search-toggle, .moments-tools .moments-create, .moments-tools .moments-help { width:31px; min-width:31px; }
  .moments-quick { overflow-x:auto; overscroll-behavior-x:contain; touch-action:pan-x; scrollbar-width:none; }
  .moments-quick::-webkit-scrollbar { display:none; }
}