/* Calm communication workspace: needs dominate; utility controls stay secondary. */
:root { --bg:#f6f4ee; --card:#fffefa; --ink:#243c39; --muted:#536560; --blue:#235c58; --blue-bg:#dfede7; --green:#18623c; --green-bg:#e0efdf; --red:#96342b; --red-bg:#f9e5df; --amber-bg:#fff0cc; --radius:16px; --shadow:none; }
html,body { min-height:100%;height:auto; }
body { display:block;user-select:text;overscroll-behavior:auto;line-height:1.5; }
button,input,textarea,select,summary { touch-action:manipulation; }
button { min-height:48px; }
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible { outline:3px solid #b94b13;outline-offset:4px; }
button:disabled { cursor:default;opacity:.48; }
button:not(:disabled):hover { filter:brightness(.96); }
button:active { transform:none; }
::selection { background:#d2e7df;color:#173e35; }
#app-shell { max-width:1120px;margin:auto;padding:0 24px 28px; }
.app-header { display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 0 16px;border-bottom:1px solid #cdd6cf; }
h1 { font-size:25px;line-height:1.2;letter-spacing:-.025em;margin:0; }
h1 span { display:block;font-size:14px;font-weight:400;letter-spacing:0;margin-top:5px;color:var(--muted); }
#gear { position:static;width:auto;height:auto;opacity:1;border-radius:10px;font-size:16px;font-weight:650;padding:10px 16px;background:var(--card);color:var(--ink);border:1px solid #b7c6bd; }
#topbar { display:grid;grid-template-columns:2fr 2fr 1fr 1fr;gap:12px;padding:20px 0 0;max-width:none; }
#topbar button { min-height:88px;border-radius:14px;font-size:18px; }
#topbar #btn-yes,#topbar #btn-no { font-size:34px;letter-spacing:.015em; }
#btn-home { color:var(--ink); }
#screen { overflow:visible;padding:0;outline:none; }
.board-heading { padding:22px 0 16px; }
.board-heading h2 { font-size:23px;line-height:1.3;margin:0 0 4px;letter-spacing:-.02em; }
.board-heading p { margin:0;color:var(--muted);font-size:16px; }
.essential-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px; }
.essential-grid .tile { min-height:168px;border:1px solid #cdd6cf;padding:16px;gap:6px; }
.essential-grid .tile img.pic { width:82px;height:82px; }
.essential-grid .tile .lbl { font-size:24px;font-weight:700; }
.essential-grid .tile .em { font-size:65px; }
.board-actions { display:flex;gap:12px;margin:20px 0; }
.nav-action { flex:1;text-align:left;padding:16px 18px;border-radius:10px;font-size:19px;font-weight:650;background:var(--blue-bg);color:var(--blue); }
.recent-section h3 { font-size:15px;color:var(--muted);margin:0 0 8px; }
.chip { border:1px solid #b7c6bd;border-radius:10px;font-size:18px; }
.screen-title { margin:22px 0 18px;font-size:24px;color:var(--ink);flex-wrap:wrap; }
.grid,.grid.big { grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--tilemin,160px)),1fr)); }
.grid .tile { border:1px solid #cdd6cf; }
.tile { overflow-wrap:anywhere;min-width:0; }
.tile .em { pointer-events:none; }
.set-row { border-radius:0;background:transparent;box-shadow:none;border-bottom:1px solid #cdd6cf;padding:24px 0;margin:0; }
.set-row h2,.set-row h3 { font-size:23px;line-height:1.3;margin:0 0 10px; }
.set-row p,.set-row label { font-size:17px;color:var(--muted);line-height:1.6; }
.set-row label { display:block; }
/* Keep the native range target and its 7px focus ring clear of viewport edges. */
.set-row input[type=range] { min-height:44px;scroll-margin-block:12px; }
.toggle-btn { border-radius:10px;border:1px solid #b7c6bd;padding:12px 16px;min-height:48px; }
.toggle-btn.on { background:var(--blue);color:var(--card); }
.choice-input,select,textarea { width:100%;max-width:100%;font:inherit;min-height:48px;border:1px solid #7a8a83;border-radius:10px;padding:12px;background:var(--card);color:var(--ink); }
input::placeholder,textarea::placeholder { color:var(--muted);opacity:1; }
input[type=file] { max-width:100%; }
.person-row { flex-wrap:wrap;gap:10px; }
.person-row .nm { overflow-wrap:anywhere;min-width:100px; }
#talk-out { width:100%;font-size:25px;min-height:130px;border:1px solid #7a8a83;user-select:text; }
.keyboard-options { margin-top:24px; }
summary { cursor:pointer;font-size:18px;padding:12px 0;min-height:48px; }
.kb { margin-top:12px; }
.key { min-width:0; }
#big { overflow:auto;padding:24px 24px 110px;gap:20px;justify-content:safe center; }
#big .txt { font-size:clamp(36px,8vw,96px);overflow-wrap:anywhere;max-width:100%; }
#big .em { font-size:90px; }
#big img.pic { width:150px;height:150px; }
#big .row { gap:12px; }
#big button { min-height:60px;font-size:22px;padding:14px 20px; }
#big-note { font-size:18px; }
#speech-status { position:fixed;bottom:0;left:0;right:0;z-index:60;margin:0;background:#173e35;color:#fff;padding:10px 20px calc(10px + env(safe-area-inset-bottom));text-align:center;font-size:15px;pointer-events:none; }
#speech-status:empty { display:none; }
body:has(#speech-status:not(:empty)) #app-shell { padding-bottom:100px; }
#storage-status { background:var(--amber-bg);color:var(--ink);padding:14px;border-radius:10px; }
html.one-col .essential-grid { grid-template-columns:minmax(0,440px); }
html.one-col #topbar { display:grid;grid-template-columns:1fr 1fr;max-width:440px; }
@media(max-width:600px) {
 #app-shell { padding:0 16px 24px; }
 .app-header { padding:16px 0 12px; }
 #topbar { grid-template-columns:1fr 1fr;gap:8px;padding-top:14px; }
 #topbar #btn-yes,#topbar #btn-no { min-height:80px;font-size:32px; }
 #topbar #btn-home,#topbar #btn-again { min-height:48px;font-size:16px; }
 .board-heading { padding:18px 0 12px; }
 .board-heading h2 { font-size:21px; }
 .essential-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
 .essential-grid .tile { min-height:134px;padding:10px; }
 .essential-grid .tile img.pic { width:64px;height:64px; }
 .essential-grid .tile .lbl { font-size:21px; }
 .board-actions { flex-direction:column;gap:8px;margin:16px 0; }
 .nav-action { padding:12px 16px;font-size:18px; }
 .kb { overflow-x:auto; }
 .kb-row { flex-wrap:wrap; }
 .kb .kb-row { min-width:600px;flex-wrap:nowrap; }
 .key { font-size:20px;min-height:54px; }
 .screen-title .backbtn { padding:10px 16px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important;transition:none!important;scroll-behavior:auto!important; } }
@media(prefers-color-scheme:dark) { html:not(.force-light) { --bg:#17231f;--card:#23362e;--ink:#f0f3ed;--muted:#bdcbbf;--blue:#d0ece1;--blue-bg:#314d41;--green:#d3efc9;--green-bg:#244c32;--red:#ffe1db;--red-bg:#59352d;--amber-bg:#594925; } }
html.force-dark { --bg:#17231f;--card:#23362e;--ink:#f0f3ed;--muted:#bdcbbf;--blue:#d0ece1;--blue-bg:#314d41;--green:#d3efc9;--green-bg:#244c32;--red:#ffe1db;--red-bg:#59352d;--amber-bg:#594925; }
.essential-grid .tile { min-height:var(--home-min,134px); }
.essential-grid .tile img.pic { width:var(--home-icon,64px);height:var(--home-icon,64px); }
.set-row summary { font-size:22px;font-weight:650;padding:8px 0; }
.set-row[open] summary { margin-bottom:12px; }
.guidance { max-width:680px;margin:auto;font-size:20px;line-height:1.65; }
.guidance h2 { font-size:28px;line-height:1.3; }
.guidance h3 { margin-bottom:0;font-size:22px; }
.guidance h3+p { margin-top:8px; }
a { color:var(--blue);text-underline-offset:.2em; }
.credits { font-size:15px;color:var(--muted); }

.guidance details{border-top:1px solid var(--line,#c4d1c6);padding:12px 0}.guidance summary{min-height:44px;padding:10px 0;font-weight:600;cursor:pointer}.help-actions{display:flex;flex-wrap:wrap;gap:12px;max-width:680px;margin:24px auto}.help-actions button{min-height:48px}

/* Phrase actions keep their whole labels at narrow widths and larger text sizes. */
.phrase-actions { display:flex;flex-wrap:wrap;gap:8px; }
.phrase-actions .key { flex:1 1 7rem;max-width:none;min-width:0;padding:12px;font-size:20px;overflow-wrap:anywhere; }
.choice-label { display:block;font-size:18px;font-weight:600;margin-block:16px; }
.choice-label .choice-input { display:block;margin-top:6px; }
#choice-error { color:var(--red);padding-block:12px; }

/* Long saved phrases remain readable and tappable without widening the board. */
.chip { max-width:100%;min-width:0;white-space:normal;overflow-wrap:anywhere; }


/* Tap-code reminders reflow at browser zoom without obscuring Done or feedback. */
.tap-code { position:fixed;inset:0;z-index:40;background:var(--bg);display:flex;flex-direction:column;padding:10px;gap:8px;overflow-y:auto; }
.tap-code > * { flex-shrink:0; }
.tap-code .backbtn { min-width:44px;min-height:48px; }
.tap-code .tap-code-legend { flex:1 0 auto;grid-template-columns:repeat(2,minmax(0,1fr));pointer-events:none; }
.tap-code .tile { min-height:0; }
.tap-code-count { font-size:clamp(20px,3.5vh,30px);font-weight:800;color:var(--blue); }
.tap-code .tile img.pic { width:clamp(48px,12vh,144px);height:clamp(48px,12vh,144px); }
.tap-code .tile .em { font-size:clamp(48px,12vh,104px); }
.tap-code-feedback { display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;font-size:clamp(24px,6vh,40px);font-weight:800; }
.tap-code .local-call-notice { margin:0;font-size:16px;line-height:1.4; }
.tap-code-feedback:empty,.tap-code .local-call-notice:empty { display:none; }
@media (max-height:600px) {
  .tap-code .tile { display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto auto;column-gap:8px;row-gap:2px;padding:8px;min-height:76px; }
  .tap-code-count { grid-column:2;font-size:20px; }
  .tap-code .tile .em,.tap-code .tile img.pic { grid-column:1;grid-row:1 / 3;width:48px;height:48px;font-size:44px; }
  .tap-code .tile .lbl { grid-column:2;font-size:18px; }
}

/* Stable communication layout; new identity does not move YES / NO or needs. */
@font-face{font-family:TalkboardDisplay;src:url('brand/Chivo.ttf') format('truetype');font-weight:100 900;font-display:swap}
:root{--bg:#faf7ef;--ink:#222a36;--muted:#505b71;--blue:#263ca0;--blue-bg:#e5e9fa}
.app-header h1{font-family:TalkboardDisplay,system-ui,sans-serif;position:relative;padding-left:44px}.app-header .brand-mark{position:absolute;left:0;top:2px;width:34px;height:34px}.app-header h1 span{font-family:system-ui,sans-serif}
html{scrollbar-color:var(--blue) var(--bg)}input,textarea{caret-color:var(--blue)}
html.force-dark .brand-mark{background:#faf7ef;border-radius:6px}
@media(prefers-color-scheme:dark){html:not(.force-light) .brand-mark{background:#faf7ef;border-radius:6px}}

/* Candidate symbol change is visible without blocking essential communication. */
.symbol-notice { margin: 16px 6px; max-width: 65ch; font-size: 16px; line-height: 1.5; }
.symbol-notice a { color: inherit; text-decoration: underline; text-underline-offset: .16em; }

/* Image-led essentials: stable positions and supporting labels retained. */
.essential-grid .tile .pic{width:clamp(82px,12vw,118px);height:clamp(82px,12vw,118px);object-fit:contain}.essential-grid .tile .lbl{font-size:clamp(18px,2.3vw,24px)}

/* Pictures remain visible on compact phrase and navigation controls. */
.picture-chip,.nav-action{display:inline-flex;align-items:center;gap:10px;}
.picture-chip img.pic,.nav-action img.pic{width:36px;height:36px;object-fit:contain;flex-shrink:0;border-radius:6px;}
.picture-chip .picture-fallback,.nav-action .picture-fallback{font-size:30px;}
img.emoji-picture{object-fit:contain;}