/* WolfSign — "Signal" design system.
   A calm night instrument panel. Each part of the app has its own signal colour (always paired with an icon and a
   word, never colour alone), so people always know where they are. Readable first: one legible Arabic/Latin face,
   large targets (≥ 56 px), strong focus rings, three colour themes, four text sizes, reduced motion. */

@font-face { font-family: 'Readex Pro'; font-style: normal; font-display: swap; font-weight: 160 700;
  src: url('../fonts/readex-pro-arabic-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: 'Readex Pro'; font-style: normal; font-display: swap; font-weight: 160 700;
  src: url('../fonts/readex-pro-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Readex Pro'; font-style: normal; font-display: swap; font-weight: 160 700;
  src: url('../fonts/readex-pro-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- tokens ---------- */
:root {
  /* night (default) */
  --bg: #0d1626; --deck: #152238; --raised: #1d2e4a; --line: #2e4366; --line-strong: #4f6890;
  --ink: #eef4ff; --mute: #b4c3dc; --on-ch: #08111f;
  --ok: #46e3b7; --warn: #ffc145; --bad: #ff7a7a; --sos: #c81e36; --on-sos: #fff;
  --focus: #ffe14d;
  /* signal colours, one per part of the app */
  --c-home: #dbe6f7; --c-talk: #46e3b7; --c-sign: #ffc145; --c-learn: #b994ff; --c-speak: #ff8db4; --c-see: #b8f25c; --c-care: #ff9c6b; --c-clinic: #9fb3cc;
  --c-day: #4fdcec; --c-hear: #6fa8ff; --c-touch: #f5f8ff; --c-wolf: #8be9ff;
  --ch: var(--c-home);
  /* type: Major Third scale on a generous 17 px base; text-size setting multiplies it */
  --fs: 1;
  --t-xs: .8rem; --t-s: .9rem; --t-m: 1rem; --t-l: 1.25rem; --t-xl: 1.56rem; --t-xxl: 1.95rem; --t-hero: 2.44rem;
  --font: 'Readex Pro', system-ui, -apple-system, 'Segoe UI', 'Noto Sans Arabic', Tahoma, sans-serif;
  /* shape: radius hierarchy — tiles > panels > controls > chips */
  --r-tile: 24px; --r: 18px; --r-ctl: 14px; --r-pill: 999px;
  --pad: clamp(14px, 3.6vw, 22px); --gap: 12px;
  --tap: 56px; --appbar-h: 64px; --nav-h: 72px;
  /* legacy names used across the app */
  --cyan: var(--ch); --violet: var(--ch); --lime: var(--ok); --amber: var(--warn); --red: var(--bad);
  --panel: var(--deck); --glass: var(--deck); --glass-hi: transparent;
  color-scheme: dark;
}
html[data-theme="light"] {
  --bg: #f2f5fa; --deck: #ffffff; --raised: #e8eef7; --line: #c6d2e3; --line-strong: #7f91ad;
  --ink: #0d1626; --mute: #3f4d64; --on-ch: #ffffff;
  --ok: #00785c; --warn: #8a5a00; --bad: #b3261e; --focus: #0d1626;
  --c-home: #1f2d44; --c-talk: #00785c; --c-sign: #8a5a00; --c-learn: #6a3fc8; --c-speak: #b0245a; --c-see: #4a6a00; --c-care: #a8430f; --c-clinic: #46566e;
  --c-day: #00717e; --c-hear: #1f5fd1; --c-touch: #0d1626; --c-wolf: #006a80;
  color-scheme: light;
}
/* sunlight: for bright rooms and outdoors — pure white, pure black text, heavier strokes, no tinted surfaces */
html[data-theme="sun"] {
  --bg: #ffffff; --deck: #ffffff; --raised: #f1f1f1; --line: #000000; --line-strong: #000000;
  --ink: #000000; --mute: #1a1a1a; --on-ch: #ffffff; --ok: #005c45; --warn: #6b4500; --bad: #9e0000; --focus: #0047ff;
  --c-home: #000; --c-talk: #005c45; --c-sign: #6b4500; --c-learn: #4b1fb0; --c-speak: #8f0f45; --c-see: #355000; --c-care: #8a3000; --c-clinic: #2b3a52;
  --c-day: #005662; --c-hear: #0040b0; --c-touch: #000; --c-wolf: #00566a;
  color-scheme: light;
}
html[data-theme="sun"] body { font-weight: 500; }
html[data-theme="sun"] .tile, html[data-theme="sun"] .panel, html[data-theme="sun"] .qa { border-width: 3px; }
/* soft: sensory-friendly — low saturation, warm grey, no pure white, nothing bright */
html[data-theme="soft"] {
  --bg: #1f2024; --deck: #27292e; --raised: #30333a; --line: #3d4048; --line-strong: #5a5e68;
  --ink: #e8e3da; --mute: #bdb6aa; --on-ch: #1f2024; --ok: #9ccfb6; --warn: #e2c88f; --bad: #e0a39b; --focus: #e8d48a; --sos: #a8443f;
  --c-home: #d6d0c4; --c-talk: #9ccfb6; --c-sign: #e2c88f; --c-learn: #c3b3e6; --c-speak: #e3b1c3; --c-see: #c4d9a0; --c-care: #e3b79d; --c-clinic: #b3bccb;
  --c-day: #9fd2d8; --c-hear: #a9c1e6; --c-touch: #e8e3da; --c-wolf: #b6dbe3;
}
html[data-theme="contrast"] {
  --bg: #000; --deck: #000; --raised: #000; --line: #fff; --line-strong: #fff;
  --ink: #fff; --mute: #fff; --on-ch: #000; --ok: #ffe600; --warn: #ffe600; --bad: #ffe600; --focus: #00e5ff;
  --c-home: #ffe600; --c-talk: #ffe600; --c-sign: #ffe600; --c-learn: #ffe600; --c-speak: #ffe600; --c-see: #ffe600; --c-care: #ffe600; --c-clinic: #ffe600;
  --c-day: #ffe600; --c-hear: #ffe600; --c-touch: #ffe600; --c-wolf: #ffe600;
}
html[data-text="large"] { --fs: 1.15; } html[data-text="xl"] { --fs: 1.32; } html[data-text="xxl"] { --fs: 1.55; }
html[data-spacing="wide"] body { letter-spacing: .04em; word-spacing: .12em; line-height: 1.75; }
html[data-channel="talk"] { --ch: var(--c-talk); } html[data-channel="sign"] { --ch: var(--c-sign); } html[data-channel="learn"] { --ch: var(--c-learn); }
html[data-channel="speak"] { --ch: var(--c-speak); } html[data-channel="see"] { --ch: var(--c-see); } html[data-channel="care"] { --ch: var(--c-care); }
html[data-channel="clinic"] { --ch: var(--c-clinic); } html[data-channel="day"] { --ch: var(--c-day); } html[data-channel="assist"] { --ch: var(--c-wolf); } html[data-channel="hear"] { --ch: var(--c-hear); }

/* ---------- base ---------- */
html { font-size: calc(17px * var(--fs)); -webkit-text-size-adjust: 100%; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font); line-height: 1.55; -webkit-font-smoothing: antialiased; }
body { overflow: hidden; font-weight: 400; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; text-wrap: balance; line-height: 1.25; }
h2 { font-size: var(--t-l); font-weight: 600; display: flex; align-items: center; gap: 8px; }
h3 { font-size: var(--t-m); font-weight: 600; }
p { text-wrap: pretty; }
svg { flex: none; }
h2 svg, .btn svg, .chip-btn svg, .qa svg { width: 1.25em; height: 1.25em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.aurora, .grain { display: none; }
/* focus: a bright ring with a dark halo, visible on every background */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; box-shadow: 0 0 0 6px color-mix(in oklab, var(--bg) 85%, transparent); }
.cell:focus-visible, .side-btn:focus-visible, .predict-chip:focus-visible, [data-sel]:focus-visible { outline: 4px solid var(--focus); outline-offset: 2px; }

/* ---------- screens ---------- */
.screen { position: relative; z-index: 1; height: 100dvh; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
body.signed-in .screen:not(#screen-auth) { padding-block-start: calc(var(--appbar-h) + env(safe-area-inset-top)); padding-block-end: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom)); }
.glass { background: var(--deck); border: 1px solid var(--line); border-radius: var(--r); }
/* the per-screen header now holds only that screen's tools: the app bar carries name, language and settings */
.topbar { display: flex; align-items: center; gap: 10px; padding: 8px 2px 0; min-height: 0; }
.topbar .brand.mini { display: none; }
.topbar > h2[data-i18n^="mode"] { display: none; }
.topbar:not(:has(> :not([hidden]):not(.brand):not(h2[data-i18n^="mode"]))) { display: none; }
.grow { flex: 1; }
/* screens made of a header and one panel: the panel scrolls inside the screen (the page itself never scrolls) */
.screen.speak, .screen.see, .screen.care, .screen.clinic { display: flex; flex-direction: column; gap: 8px; padding-inline: 8px; }
.screen.speak > .panel, .screen.see > .panel, .screen.care > .panel, .screen.clinic > .panel, .learn > .panel { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.screen > .panel { max-width: 1100px; width: 100%; margin-inline: auto; }

/* ---------- app bar ---------- */
.appbar { position: fixed; z-index: 8; inset-block-start: 0; inset-inline: 0; height: calc(var(--appbar-h) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  display: flex; align-items: center; gap: 10px; background: color-mix(in oklab, var(--bg) 92%, transparent); border-block-end: 1px solid var(--line);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.ab-title { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.ab-title h1 { font-size: var(--t-l); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ab-glyph { width: 12px; height: 28px; border-radius: 6px; background: var(--ch); box-shadow: 0 0 18px color-mix(in oklab, var(--ch) 55%, transparent); flex: none; }
html[data-theme="contrast"] .ab-glyph, html[data-theme="light"] .ab-glyph { box-shadow: none; }
.ab-lang { min-height: 48px; padding: 0 16px; border-radius: var(--r-pill); border: 2px solid var(--line-strong); background: var(--deck); cursor: pointer; font-weight: 600; }
html[lang="ar"] .ab-lang [lang="ar"], html[lang="en"] .ab-lang [lang="en"] { display: none; }
.icon-btn { width: 52px; height: 52px; border-radius: var(--r-ctl); border: 1px solid var(--line); background: var(--deck); display: grid; place-items: center; cursor: pointer; color: var(--ink); flex: none; }
.icon-btn svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:hover { border-color: var(--line-strong); }
.ab-access { border-color: color-mix(in oklab, var(--ch) 60%, var(--line)); }

/* ---------- bottom navigation ---------- */
.modebar { position: fixed; z-index: 8; inset-inline: 0; inset-block-end: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  padding: 6px max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
  background: color-mix(in oklab, var(--bg) 94%, transparent); border-block-start: 1px solid var(--line); border-radius: 0; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.modebar button { position: relative; display: grid; place-items: center; align-content: center; gap: 3px; border: 0; background: none; color: var(--mute); border-radius: var(--r-ctl);
  padding: 6px 2px; font-size: var(--t-xs); font-weight: 500; cursor: pointer; min-height: 60px; min-width: 0; }
.modebar button span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modebar svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.modebar button[aria-current="true"] { color: var(--ink); font-weight: 700; background: color-mix(in oklab, var(--ch) 16%, transparent); }
.modebar button[aria-current="true"]::before { content: ''; position: absolute; inset-block-start: 0; inset-inline: 22%; height: 4px; border-radius: 0 0 4px 4px; background: var(--ch); }
.modebar button:disabled { opacity: .4; cursor: default; }
@media (min-width: 900px) { .modebar { grid-auto-columns: minmax(0, 128px); justify-content: center; } }
.modebar .rail-only { display: none; }
@media (max-width: 380px) { .modebar button { font-size: .7rem; } .modebar svg { width: 22px; height: 22px; } }

/* ---------- buttons and controls ---------- */
.btn, .chip-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn { min-height: var(--tap); border: 1px solid var(--line-strong); background: var(--raised); padding: .6em 1.15em; border-radius: var(--r-ctl); cursor: pointer;
  font-weight: 600; transition: background .15s, border-color .15s, transform .1s; text-align: center; }
.btn:hover { border-color: var(--ch); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { border-color: transparent; color: var(--on-ch); background: var(--ch); }
.btn.primary:hover { background: color-mix(in oklab, var(--ch) 88%, var(--ink)); }
.btn.danger { color: var(--bad); border-color: color-mix(in oklab, var(--bad) 55%, transparent); background: transparent; }
.btn.big { font-size: var(--t-l); min-height: 64px; padding: .6em 1.6em; border-radius: var(--r); }
.btn.glow::before { display: none; }
.btn.file { display: inline-flex; position: relative; }
.btn.file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.link { background: none; border: 0; color: var(--ch); cursor: pointer; padding: .4em; min-height: 44px; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.chip-btn { border: 1px solid var(--line-strong); background: var(--raised); border-radius: var(--r-pill); padding: .4em 1em; min-height: 48px; font-size: var(--t-s); cursor: pointer; font-weight: 500; }
.chip-btn:hover { border-color: var(--ch); }
.chip-btn.picked, .chip-btn[aria-pressed="true"] { border-color: var(--ch); background: color-mix(in oklab, var(--ch) 22%, transparent); }
label { display: grid; gap: 6px; font-size: var(--t-s); color: var(--mute); font-weight: 500; }
input, select, textarea { width: 100%; min-height: var(--tap); padding: .7em 1em; border-radius: var(--r-ctl); border: 2px solid var(--line); background: var(--bg); color: var(--ink); }
textarea { line-height: 1.5; resize: vertical; font-family: var(--font); }
input::placeholder, textarea::placeholder { color: color-mix(in oklab, var(--mute) 80%, transparent); font-family: var(--font); }
input:focus, select:focus, textarea:focus { border-color: var(--ch); outline: none; box-shadow: 0 0 0 3px color-mix(in oklab, var(--ch) 30%, transparent); }
input[type="checkbox"], input[type="radio"] { width: 26px; height: 26px; min-height: 0; padding: 0; accent-color: var(--ch); flex: none; }
input[type="range"] { padding: 0; accent-color: var(--ch); }
progress { width: 100%; height: 12px; accent-color: var(--ch); }
.note { margin: -4px 0 4px; color: var(--mute); font-size: var(--t-s); }
.msg { min-height: 1.3em; margin: 0; color: var(--warn); font-size: var(--t-s); font-weight: 600; }
.hint { color: var(--mute); max-width: 60ch; margin: 0; font-size: var(--t-s); }
.hint.small { font-size: var(--t-s); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: .3em .85em; border-radius: var(--r-pill); border: 1px solid var(--line-strong); font-size: var(--t-xs); background: var(--deck); font-weight: 600; min-height: 34px; }
.pill:empty { display: none; }
.pill .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); }
.pill.ok { border-color: var(--ok); } .pill.warn { border-color: var(--warn); color: var(--ink); }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-ctl); padding: 4px; gap: 4px; }
.seg button { border: 0; background: none; min-height: 48px; padding: .4em .8em; border-radius: 10px; cursor: pointer; color: var(--mute); font-weight: 600; }
.seg button[aria-selected="true"], .seg button[aria-checked="true"] { background: var(--ch); color: var(--on-ch); }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: end; }
.row > label, .row > input { flex: 1 1 140px; }
.stack { display: grid; gap: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-content: flex-start; }
.switch { display: flex; align-items: center; gap: 14px; color: var(--ink); font-size: var(--t-m); min-height: var(--tap); cursor: pointer; }
.switch input { appearance: none; -webkit-appearance: none; width: 56px; height: 32px; border-radius: 999px; background: var(--raised); border: 2px solid var(--line-strong); position: relative; flex: none; cursor: pointer; transition: background .15s; }
.switch input::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--mute); transition: inset-inline-start .15s; }
.switch input:checked { background: var(--ch); border-color: var(--ch); }
.switch input:checked::after { inset-inline-start: 27px; background: var(--on-ch); }
.switch input:checked + span::after { content: ' ✓'; color: var(--ch); font-weight: 700; }
.switch-row { display: flex; align-items: center; gap: 12px; min-height: var(--tap); color: var(--ink); }
.switch-row input[type=number] { width: 5em; }
.link-row { display: flex; gap: 10px; flex-wrap: wrap; }
.toast { inset: auto; inset-block-end: calc(var(--nav-h) + 24px); margin-inline: auto; padding: .8em 1.3em; border-radius: var(--r-ctl); border: 2px solid var(--ch); background: var(--deck); color: var(--ink); font-weight: 600; max-width: min(92vw, 520px); }
.lang-toggle { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; min-height: 44px; background: var(--deck); border: 2px solid var(--line-strong); border-radius: var(--r-pill); padding: 0 14px; cursor: pointer; color: var(--ink); font-weight: 600; }

/* ---------- illustrated pictograms (js/icons.js) ---------- */
:root { --ill-dev: #08101e; --ill-scr: #22375a; --ill-skin: #f1c39f; --ill-wh: #eef4ff; --ill-dim: #3a4f72; }
html[data-theme="light"], html[data-theme="sun"] { --ill-dev: #1b2840; --ill-scr: #dfe8f5; --ill-skin: #e9b48d; --ill-wh: #ffffff; --ill-dim: #c9d4e4; }
html[data-theme="soft"] { --ill-dev: #17181b; --ill-scr: #3b3f47; --ill-skin: #d9b59a; --ill-wh: #e8e3da; --ill-dim: #4a4e57; }
html[data-theme="contrast"] { --ill-dev: #000; --ill-scr: #000; --ill-skin: #fff; --ill-wh: #000; --ill-dim: #000; }
.ill { width: 100%; height: 100%; display: block; overflow: visible; }
.ill .bg { fill: color-mix(in oklab, var(--tc, var(--ch)) 16%, transparent); }
.ill .p, .ill .star { fill: var(--tc, var(--ch)); }
.ill .p2 { fill: color-mix(in oklab, var(--tc, var(--ch)) 45%, var(--ill-scr)); }
.ill .dev { fill: var(--ill-dev); } .ill .scr { fill: var(--ill-scr); } .ill .skin { fill: var(--ill-skin); stroke: color-mix(in oklab, var(--ill-skin) 60%, #000); stroke-width: 1.2; }
.ill .wh, .ill .bub { fill: var(--ill-wh); } .ill .dim { fill: var(--ill-dim); }
.ill .lc, .ill .ln2, .ill .ray, .ill .pulse, .ill .ok, .ill .ok2, .ill .smile, .ill .arrow2, .ill .wh-s { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.ill .lc { stroke: var(--tc, var(--ch)); } .ill .ln2 { stroke: var(--mute); } .ill .ray { stroke: var(--tc, var(--ch)); stroke-width: 3.4; }
.ill .pulse { stroke: var(--ill-wh); stroke-width: 3.6; } .ill .ok { stroke: var(--on-ch); stroke-width: 3.6; } .ill .ok2 { stroke: var(--ok); stroke-width: 3.6; }
.ill .smile { stroke: var(--ill-dev); } .ill .arrow2 { stroke: var(--tc, var(--ch)); stroke-width: 3.6; } .ill .wh-s { stroke: var(--ill-wh); stroke-width: 6; }
.ill .arrow { fill: var(--tc, var(--ch)); } .ill .ripple { fill: none; stroke: var(--tc, var(--ch)); stroke-width: 2.5; stroke-dasharray: 3 4; }
html[data-theme="contrast"] .ill .wh, html[data-theme="contrast"] .ill .scr, html[data-theme="contrast"] .ill .dim, html[data-theme="contrast"] .ill .dev { stroke: #fff; stroke-width: 2; }
html[data-theme="contrast"] .ill .bg { fill: none; }

/* ---------- home hub ---------- */
.home { overflow-y: auto; }
.hub { max-width: 980px; margin: 0 auto; padding: 18px var(--pad) 8px; display: grid; gap: 18px; }
.hub-hello { display: grid; gap: 4px; padding: 6px 2px; }
.hub-who { margin: 0; color: var(--mute); font-size: var(--t-m); }
.hub-q { font-size: var(--t-xxl); font-weight: 700; letter-spacing: -.01em; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.tile { --tc: var(--c-home); position: relative; display: grid; grid-template-columns: 84px 1fr; align-items: center; gap: 14px; text-align: start; padding: 18px 18px 18px 16px;
  min-height: 104px; border-radius: var(--r-tile); border: 2px solid var(--line); background: var(--deck); color: var(--ink); cursor: pointer; overflow: hidden; }
.tile::before { content: ''; position: absolute; inset-block: 14px; inset-inline-start: 0; width: 6px; border-radius: 0 6px 6px 0; background: var(--tc); }
html[dir="rtl"] .tile::before { border-radius: 6px 0 0 6px; }
.tile:hover { border-color: var(--tc); }
.tile-ico { width: 84px; height: 84px; display: grid; place-items: center; color: var(--tc); }
.tile-ico .ill, .seg-ico .ill, .need-ico .ill { width: 100%; height: 100%; }
.tile-text { display: grid; gap: 2px; min-width: 0; }
.tile-text b { font-size: var(--t-l); font-weight: 700; }
.tile-text span { color: var(--mute); font-size: var(--t-s); line-height: 1.45; }
.tile[data-ch="talk"] { --tc: var(--c-talk); } .tile[data-ch="sign"] { --tc: var(--c-sign); } .tile[data-ch="learn"] { --tc: var(--c-learn); }
.tile[data-ch="speak"] { --tc: var(--c-speak); } .tile[data-ch="see"] { --tc: var(--c-see); } .tile[data-ch="care"] { --tc: var(--c-care); } .tile[data-ch="clinic"] { --tc: var(--c-clinic); }
html[data-theme="contrast"] .tile-ico { border: 2px solid var(--tc); border-radius: 50%; }
.tile[data-ch="day"] { --tc: var(--c-day); } .tile[data-ch="hear"] { --tc: var(--c-hear); } .tile[data-ch="touch"] { --tc: var(--c-touch); }
.tile .tile-badge { position: absolute; inset-block-start: 10px; inset-inline-end: 12px; font-size: var(--t-xs); font-weight: 600; padding: 2px 10px; border-radius: var(--r-pill);
  background: color-mix(in oklab, var(--tc) 22%, transparent); color: var(--ink); border: 1px solid color-mix(in oklab, var(--tc) 60%, transparent); }
/* needs-aware order: the parts a person needs most come first */
html[data-need-blind="1"] .tile[data-go="see"], html[data-need-blind="1"] .tile[data-go="touch"] { order: -3; }
html[data-need-deaf="1"] .tile[data-go="sign"], html[data-need-deaf="1"] .tile[data-go="hear"] { order: -2; }
html[data-need-autism="1"] .tile[data-go="day"], html[data-need-learning="1"] .tile[data-go="day"] { order: -2; }
html[data-need-speech="1"] .tile[data-go="talk"], html[data-need-speech="1"] .tile[data-go="speak"] { order: -1; }
/* simple mode: fewer choices on screen */
html[data-simple="1"] .tile-text span, html[data-simple="1"] .tile-wide, html[data-simple="1"] .hub-status { display: none; }
html[data-simple="1"] .hub-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
/* status strip: what the app is doing automatically */
.hub-status { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hub-status li { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 14px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--deck); font-size: var(--t-s); color: var(--mute); }
.hub-status li b { color: var(--ink); font-weight: 600; }
.hub-status li i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.hub-status li.on i { background: var(--ok); box-shadow: 0 0 0 4px color-mix(in oklab, var(--ok) 25%, transparent); }
.hub-status button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; }
.hub-status button:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 8px; }
.hub-status li { padding: 0 14px; }
@media (min-width: 700px) {
  .hub { max-width: 1180px; }
  .hub-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
  .tile:not(.tile-wide) { grid-template-columns: 1fr; grid-template-rows: auto 1fr; justify-items: start; align-items: start; min-height: 230px; padding: 22px; gap: 12px; }
  .tile:not(.tile-wide) .tile-ico { width: 112px; height: 112px; }
}
.tile-wide { min-height: 88px; }
.hub-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.qa { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 18px; border-radius: var(--r); border: 2px solid var(--line); background: var(--raised); color: var(--ink); font-weight: 600; font-size: var(--t-m); cursor: pointer; text-align: start; }
.qa:hover { border-color: var(--ch); }
.qa.sos { background: var(--sos); border-color: var(--sos); color: var(--on-sos); }
html[data-theme="contrast"] .qa.sos { background: #000; border: 4px solid #ff3b3b; color: #fff; }

/* ---------- panels (shared by every screen) ---------- */
.panel { padding: var(--pad); display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; position: relative; }
.panel > * { flex-shrink: 0; }
.panel-h { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.panel-h h2 { white-space: nowrap; font-size: var(--t-m); color: var(--mute); }
.panel-h .tools, .panel-h > .chip-btn { margin-inline-start: auto; }
.panel-h .tools { display: flex; gap: 6px; }
.screen.care .panel h3, .screen.clinic .panel h3 { margin: 10px 0 0; font-size: var(--t-l); font-weight: 700; }
.panel > section.card, .card { border: 1px solid var(--line); border-radius: var(--r); padding: var(--pad); background: var(--bg); display: grid; gap: 12px; }

/* ---------- auth ---------- */
#screen-auth { display: grid; place-items: center; padding: 20px; overflow: auto; }
.auth-card { width: min(460px, 100%); padding: 30px 28px; display: grid; gap: 18px; position: relative; border-top: 6px solid var(--c-talk); }
.brand { display: flex; align-items: center; gap: 14px; }
.brand h1 { font-size: var(--t-xxl); font-weight: 700; letter-spacing: -.01em; color: var(--ink); }
.brand p { margin: 2px 0 0; color: var(--mute); }
.mark { width: 56px; height: 56px; color: var(--c-talk); }

/* ---------- sign conversation (live) ---------- */
.live { display: grid; grid-template-rows: auto minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, .8fr); gap: 10px; padding-inline: 10px; container-type: size; }
.orb { width: 34px; height: 34px; border-radius: 50%; position: relative; background: radial-gradient(circle at 35% 30%, #fff, var(--ch) 35%, color-mix(in oklab, var(--ch) 40%, #000) 72%, transparent 74%); }
.orb span { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--ch); opacity: 0; }
.orb.thinking span { opacity: 1; animation: spin-r .8s linear infinite; }
.orb.off { filter: grayscale(1) brightness(.6); }
@keyframes spin-r { to { transform: rotate(360deg); } }
.menu { padding: 8px; min-width: 240px; border-radius: var(--r); inset: auto; margin: 0; position: fixed; inset-block-start: calc(var(--appbar-h) + 64px); inset-inline-end: 12px; background: var(--deck); border: 1px solid var(--line-strong); box-shadow: 0 18px 40px rgb(0 0 0 / .4); }
.menu button { display: block; width: 100%; text-align: start; border: 0; background: none; padding: .8em 1em; min-height: 52px; border-radius: 12px; cursor: pointer; font-weight: 500; }
.menu button:hover { background: var(--raised); }
[popover] { color: var(--ink); }
.stage, .teach-stage { position: relative; border-radius: var(--r); overflow: hidden; background: #000; border: 1px solid var(--line); min-height: 0; }
.stage video, .stage canvas, .teach-stage video, .teach-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.hud { position: absolute; inset: 12px; pointer-events: none; }
.hud i { position: absolute; width: 26px; height: 26px; border: 3px solid var(--ch); opacity: .9; }
.hud i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 10px 0 0 0; }
.hud i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 10px 0 0; }
.hud i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 10px; }
.hud i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 10px 0; }
.stage.tracking .hud i { border-color: var(--ok); }
.scan { position: absolute; inset-inline: 0; height: 2px; top: 0; background: linear-gradient(90deg, transparent, var(--ch), transparent); opacity: 0; }
.stage.live-on .scan { opacity: .5; animation: scan 3.2s ease-in-out infinite; }
@keyframes scan { 50% { top: 100%; } }
.stage-cta { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; text-align: center; padding: 16px; background: radial-gradient(circle, rgb(8 12 22 / .35), rgb(8 12 22 / .85)); color: #fff; }
.stage-cta .hint { color: #dbe6ff; max-width: 34ch; }
.stage-help { justify-content: center; }
.stage-cta .btn:not(.primary) { color: var(--ink); }
.stage .coach { position: absolute; inset-block-start: 12px; inset-inline: 0; margin-inline: auto; width: fit-content; max-width: 90%; padding: .45em 1em; border-radius: var(--r-pill); background: rgb(0 0 0 / .78); color: #ffd166; font-size: var(--t-s); font-weight: 600; border: 1px solid #ffd166; }
.fps { position: absolute; inset-block-end: 10px; inset-inline-start: 14px; font-size: .7rem; color: #cfe0ff; opacity: .8; }
.flash { position: fixed; inset-inline: 12px; inset-block-start: calc(var(--appbar-h) + 12px); z-index: 20; display: flex; align-items: center; gap: 14px; font-size: var(--t-xl); font-weight: 700;
  padding: 18px 20px; border-radius: var(--r); color: #111; background: var(--c-sign); box-shadow: 0 0 0 6px rgb(255 193 69 / .35); }
.flash::before { content: ''; width: 34px; height: 34px; flex: none; border-radius: 50%; border: 4px solid #111; background: radial-gradient(circle, #111 0 5px, transparent 6px); }
.chip { --conf: .8; position: relative; padding: .45em .9em; border-radius: var(--r-pill); font-weight: 600; cursor: pointer; color: var(--ink);
  background: linear-gradient(var(--bg), var(--bg)) padding-box, conic-gradient(var(--ch) calc(var(--conf) * 360deg), var(--line) 0) border-box;
  border: 3px solid transparent; font-size: var(--t-l); }
.chip.low { background: var(--bg); border: 3px dashed var(--warn); }
.chip.low::after { content: ' ?'; color: var(--warn); font-weight: 800; }
.chip small { color: var(--mute); font-weight: 500; margin-inline-start: 4px; }
.chip-menu { position: absolute; z-index: 5; display: grid; gap: 4px; padding: 6px; border-radius: var(--r-ctl); min-width: 180px; }
.chip-menu button { border: 0; background: var(--raised); border-radius: 10px; padding: .6em .9em; min-height: 48px; text-align: start; cursor: pointer; }
.sentence { margin: 0; font-size: max(1.5rem, calc(1.5rem * var(--fs))); font-weight: 700; line-height: 1.4; min-height: 1.4em; }
.sentence.thinking { opacity: .55; }
.confirm { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--warn); }
.wave { position: absolute; inset-inline: 0; inset-block-end: 0; width: 100%; height: 46px; pointer-events: none; opacity: .9; }
.caption { margin: 0; font-size: max(1.6rem, calc(1.6rem * var(--fs))); font-weight: 700; line-height: 1.4; overflow-y: auto; background: var(--bg); border-radius: var(--r-ctl); padding: .35em .6em; max-height: 4.4em; }
.caption:empty { background: none; }
.caption .interim { color: var(--mute); }
.speaking-now { display: none; align-items: center; gap: 6px; color: var(--ch); font-weight: 700; font-size: var(--t-s); }
.speaking-now::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.panel.active .speaking-now { display: inline-flex; }
.panel.active { outline: 3px solid var(--ch); outline-offset: -3px; }
.interp { position: fixed; z-index: 15; inset-inline: 10px; inset-block-end: calc(var(--nav-h) + 16px + env(safe-area-inset-bottom)); padding: 16px 18px 18px;
  border-radius: var(--r-tile); background: var(--deck); color: var(--ink); border: 3px solid var(--ch); box-shadow: 0 20px 60px rgb(0 0 0 / .5); max-height: 45dvh; overflow-y: auto; }
.interp-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.interp-who { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ch); }
.interp-who svg { width: 1.4em; height: 1.4em; stroke: currentColor; fill: none; stroke-width: 2; }
.interp-text { margin: 0; font-size: max(1.8rem, calc(1.8rem * var(--fs))); font-weight: 700; line-height: 1.4; }
.interp-text .interim { color: var(--mute); font-weight: 600; }
.interp-simple { margin: 10px 0 0; padding-top: 10px; border-top: 1px dashed var(--line); font-size: max(1.3rem, calc(1.3rem * var(--fs))); }
.interp-simple b { color: var(--ch); margin-inline-end: 6px; }
.interp.pinned { border-style: double; border-width: 5px; }
.avatar-wrap { position: relative; display: grid; gap: 6px; margin-bottom: 10px; }
.avatar-wrap canvas { width: 100%; height: min(34dvh, 300px); border-radius: var(--r); background: linear-gradient(180deg, #1a2a48, #0f1a2e); }
.avatar-wrap.big canvas { height: min(62dvh, 560px); }
.avatar-tools { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; display: flex; gap: 6px; }
.avatar-gloss { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--t-m); }
.avatar-gloss span { padding: .15em .6em; border-radius: var(--r-pill); border: 2px solid var(--line); color: var(--mute); }
.avatar-gloss span.spell { border-style: dashed; }
.avatar-gloss span.now { color: var(--ink); border-color: var(--ch); background: color-mix(in oklab, var(--ch) 18%, transparent); }
.preview-canvas { width: 100%; height: 56dvh; border-radius: var(--r); background: linear-gradient(180deg, #1a2a48, #0f1a2e); }
.table-mirror { position: fixed; inset-inline: 10px; inset-block-start: calc(var(--appbar-h) + 8px); z-index: 4; padding: 12px; border-radius: var(--r); background: rgb(0 0 0 / .8); color: #fff; transform: rotate(180deg); text-align: center; }
.table-mirror p { margin: 0; font-size: var(--t-xl); font-weight: 700; }
html[data-text="large"] .live, html[data-text="xl"] .live, html[data-text="xxl"] .live { grid-template-rows: auto minmax(0, .8fr) minmax(0, 1.1fr) minmax(0, 1fr); }
@media (min-aspect-ratio: 1/1) and (min-width: 760px) {
  .live { grid-template-columns: 1.3fr 1fr; grid-template-rows: auto 1fr 1fr; }
  .live .topbar { grid-column: 1 / -1; }
  .live .stage { grid-row: 2 / 4; }
}

/* ---------- teach signs ---------- */
.teach { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 10px; padding-inline: 10px; }
.teach-controls { padding: var(--pad); display: grid; gap: 12px; max-height: 60dvh; overflow: auto; }
.words { display: flex; flex-wrap: wrap; gap: 8px; max-height: 26dvh; min-height: 110px; overflow: auto; align-content: flex-start; }
.word { padding: .5em .9em; min-height: 48px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--raised); cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.word b { font-size: .75rem; padding: .1em .5em; border-radius: 999px; background: var(--bg); color: var(--mute); }
.word.done b { background: color-mix(in oklab, var(--ok) 30%, transparent); color: var(--ink); }
.word[aria-pressed="true"] { border-color: var(--ch); box-shadow: 0 0 0 2px color-mix(in oklab, var(--ch) 40%, transparent); }
.selected { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.selected b { font-size: var(--t-xl); }
.dots { display: inline-flex; gap: 4px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
.dots i.on { background: var(--ok); }
.countdown { position: absolute; inset: 0; display: grid; place-items: center; font-size: 6rem; font-weight: 700; color: #fff; text-shadow: 0 0 24px rgb(0 0 0 / .8); pointer-events: none; }
.rec-ring { position: absolute; inset: 10px; border-radius: 18px; border: 4px solid #ff4d4d; pointer-events: none; }

/* ---------- dialogs / sheets ---------- */
dialog.sheet { width: min(600px, 94vw); max-height: 88dvh; overflow: auto; padding: 22px; color: var(--ink); background: var(--deck); border: 1px solid var(--line-strong); border-radius: var(--r-tile); box-shadow: 0 30px 80px rgb(0 0 0 / .45); }
dialog::backdrop { background: rgb(5 9 18 / .7); }
dialog[open] { animation: rise .22s cubic-bezier(.2, 1, .4, 1); }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
dialog h2 { margin-bottom: 14px; }
.sheet-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.sheet-h h2 { margin: 0; font-size: var(--t-xl); }
.sheet form, form.sheet-body { display: grid; gap: 16px; }
fieldset { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px 14px; margin: 0; display: grid; gap: 8px; }
legend { color: var(--ink); font-weight: 700; padding-inline: 6px; font-size: var(--t-m); }
.choice-set { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.pick { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; padding: 10px 14px; border-radius: var(--r-ctl); border: 2px solid var(--line); background: var(--bg); color: var(--ink); font-size: var(--t-m); font-weight: 600; cursor: pointer; text-align: center; }
.pick input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pick:has(input:checked) { border-color: var(--ch); background: color-mix(in oklab, var(--ch) 16%, var(--bg)); }
.pick:has(input:checked)::after { content: '✓'; position: absolute; inset-block-start: 6px; inset-inline-end: 10px; color: var(--ch); font-weight: 800; }
.pick:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.sizes .pick { display: grid; justify-items: center; gap: 0; min-height: 84px; }
.aa { font-weight: 700; line-height: 1; } .aa.s1 { font-size: 1.1rem; } .aa.s2 { font-size: 1.35rem; } .aa.s3 { font-size: 1.65rem; } .aa.s4 { font-size: 2rem; }
.sizes small { color: var(--mute); font-size: var(--t-xs); margin-top: 4px; }
.themes .pick { justify-content: flex-start; }
.swatch { width: 34px; height: 34px; border-radius: 10px; border: 2px solid var(--line-strong); flex: none; }
.sw-dark { background: linear-gradient(135deg, #0d1626 50%, #46e3b7 50%); }
.sw-light { background: linear-gradient(135deg, #f2f5fa 50%, #00785c 50%); }
.sw-contrast { background: linear-gradient(135deg, #000 50%, #ffe600 50%); border-color: #fff; }
.sw-auto { background: conic-gradient(#0d1626 0 25%, #f2f5fa 0 50%, #0d1626 0 75%, #f2f5fa 0); }
.sw-sun { background: linear-gradient(135deg, #fff 50%, #000 50%); border-color: #000; }
.sw-soft { background: linear-gradient(135deg, #27292e 50%, #9ccfb6 50%); }
.needs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.needs legend, .needs .hint { grid-column: 1 / -1; }
.pick.need { display: grid; grid-template-columns: 48px 1fr; align-items: center; gap: 8px; }
.need-ico { width: 48px; height: 48px; }
.switches { display: grid; gap: 4px; }
.acc-more .btn { flex: 1 1 200px; }
.access .btn.primary.big { width: 100%; }
.wizard fieldset { gap: 6px; }
.opt { display: flex; align-items: center; gap: 12px; padding: 10px 12px; min-height: var(--tap); border-radius: 12px; border: 2px solid transparent; font-size: var(--t-m); cursor: pointer; color: var(--ink); }
.opt:hover { background: var(--raised); }
.opt:has(input:checked) { border-color: var(--ch); background: color-mix(in oklab, var(--ch) 14%, transparent); }
.quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-bottom: 14px; }
.quick { padding: 16px; border-radius: var(--r); border: 2px solid var(--line); background: var(--bg); cursor: pointer; font-weight: 600; font-size: var(--t-m); text-align: start; min-height: 96px; display: grid; align-content: start; color: var(--ink); }
.quick:hover { border-color: var(--ch); }
.quick:first-child { grid-column: 1 / -1; border-color: var(--ch); }
.quick.sos { border-color: var(--sos); background: color-mix(in oklab, var(--sos) 22%, var(--bg)); }
.list, .plain, .plain-list { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.list li, .plain li, .plain-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: var(--r-ctl); background: var(--bg); border: 1px solid var(--line); min-height: var(--tap); }
.plain li > span { flex: 1; }
.phrase-list li button.say-phrase { flex: 1; text-align: start; border: 0; background: none; font-size: var(--t-l); padding: 6px; cursor: pointer; color: var(--ink); min-height: 48px; }
.transcript { padding-inline-start: 1.2em; display: grid; gap: 8px; }
.transcript .me { color: var(--ch); }
.transcript time { color: var(--mute); font-size: .8rem; margin-inline-end: 6px; }
#kb-text { width: 100%; font-size: var(--t-xl); padding: 12px; min-height: 120px; }

/* ---------- TALK: symbol boards ---------- */
.talk { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr); gap: 8px; padding-inline: 8px; width: 100vw; min-width: 0; overflow: hidden; }
.talk .topbar { padding-top: 6px; }
.profile-pill { cursor: pointer; max-width: 46vw; min-height: 44px; font-size: var(--t-s); }
.profile-pill svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; }
.profile-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-name { flex: 1; text-align: center; color: var(--mute); font-size: var(--t-s); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.talk .topbar .icon-btn { width: 48px; height: 48px; }
.strip-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px; border-radius: var(--r); min-height: 84px; border: 2px solid color-mix(in oklab, var(--ch) 40%, var(--line)); }
.strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 4px; min-height: 64px; align-items: center; }
.strip:empty::before { content: attr(data-empty); color: var(--mute); font-size: var(--t-s); padding-inline: 6px; }
.strip .tok { display: inline-grid; justify-items: center; gap: 2px; padding: 4px 10px; border-radius: 12px; background: var(--raised); border: 1px solid var(--line); min-width: 56px; flex: none; }
.strip .tok img { width: 40px; height: 40px; object-fit: contain; background: #fff; border-radius: 8px; }
.strip .tok b { font-size: var(--t-s); white-space: nowrap; }
.strip-tools { display: flex; gap: 6px; }
.strip-tools .btn { min-width: 56px; min-height: 56px; padding: .4em .8em; }
.strip-tools .say { font-size: var(--t-m); }
.predict { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; min-height: 50px; padding: 2px 4px; }
.predict:empty { min-height: 0; }
.predict-chip { flex: none; font-size: var(--t-m); border-style: dashed; border-color: var(--ch); background: color-mix(in oklab, var(--ch) 12%, transparent); }
.board-wrap { display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 8px; min-height: 0; min-width: 0; }
/* on short screens (phones, the app inside another window) the side buttons and the board scroll instead of being cut off */
.side { display: grid; grid-auto-rows: minmax(56px, 1fr); gap: 6px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.side-btn { display: grid; place-items: center; align-content: center; gap: 3px; border-radius: var(--r-ctl); border: 1px solid var(--line-strong); background: var(--raised); cursor: pointer; font-size: .72rem; font-weight: 600; padding: 4px 2px; color: var(--ink); }
.side-btn svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.side-btn:disabled { opacity: .35; }
.side-btn.sos { background: var(--sos); border-color: var(--sos); color: var(--on-sos); font-weight: 700; }
.board { display: grid; min-width: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; grid-template-rows: repeat(var(--rows, 6), minmax(var(--cell-min, 64px), 1fr)); grid-template-columns: repeat(var(--cols, 6), minmax(0, 1fr)); gap: 6px; min-height: 0; --cell-fs: .95rem; --cell-pad: 4px; }
.board[data-size="s"] { --cell-fs: .8rem; --cell-min: 52px; } .board[data-size="l"] { --cell-fs: 1.15rem; } .board[data-size="xl"] { --cell-fs: 1.35rem; gap: 8px; --cell-min: 84px; } .board[data-size="xxl"] { --cell-fs: 1.6rem; gap: 10px; --cell-min: 100px; }
/* Fitzgerald key colours as tints; text keeps ≥ 7:1 contrast on every tint */
.cell { --tint: #e9edf5; display: grid; grid-template-rows: minmax(0, 1fr) auto; align-items: center; justify-items: center; gap: 1px; min-width: 0; min-height: 0;
  border-radius: 14px; border: 2px solid color-mix(in oklab, var(--tint) 65%, #000 35%); background: var(--tint); color: #0b1020; cursor: pointer; padding: var(--cell-pad); font-size: var(--cell-fs); line-height: 1.15; overflow: hidden; touch-action: manipulation; container-type: inline-size; }
.cell:has(small) { grid-template-rows: minmax(0, 1fr) auto auto; }
.cell img { width: 100%; height: 100%; object-fit: contain; min-height: 0; min-width: 0; pointer-events: none; }
.cell .lab { font-weight: 700; text-align: center; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: keep-all; }
.cell small { font-size: .74em; color: #2b3348; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@container (max-width: 72px) { .cell .lab { font-size: .8em; } .cell small { font-size: .62em; } }
@container (max-width: 52px) { .cell .lab { font-size: .68em; } .cell small { display: none; } }
.cell.pronoun { --tint: #fff1a8; } .cell.verb { --tint: #bdf0c2; } .cell.adjective { --tint: #bfe0ff; } .cell.noun { --tint: #ffd6a5; }
.cell.preposition { --tint: #ffc9de; } .cell.social { --tint: #ffc9de; } .cell.question { --tint: #dcc9ff; } .cell.adverb { --tint: #e3cbb5; }
.cell.determiner { --tint: #dfe3ea; } .cell.negation { --tint: #ffb3b3; } .cell.emergency { --tint: #ff9a9a; }
.cell.act-folder { border-style: double; border-width: 4px; }
.cell.hit { animation: hit .3s ease-out; }
@keyframes hit { 0% { transform: scale(.94); box-shadow: 0 0 0 4px var(--ch); } 100% { transform: none; } }
.scan { outline: 6px solid var(--focus) !important; outline-offset: 2px; box-shadow: 0 0 0 4px #000 !important; }
html[data-theme="contrast"] .cell { --tint: #000 !important; color: #fff; border-color: #fff; }
html[data-theme="contrast"] .cell small { color: #fff; }
html[data-theme="contrast"] .cell img { background: #fff; border-radius: 8px; }
@media (max-width: 480px) { .board-wrap { grid-template-columns: 58px minmax(0, 1fr); } .side-btn span { font-size: .62rem; } }
.partner { position: fixed; inset: 0; z-index: 20; display: grid; grid-template-rows: 1fr auto; padding: 24px; border-radius: 0; background: var(--bg); }
.partner p { margin: 0; display: grid; place-items: center; font-size: clamp(2rem, 8vw, 5rem); font-weight: 700; text-align: center; line-height: 1.25; }
.partner.flipped p { transform: rotate(180deg); }
.partner-tools { display: flex; gap: 8px; justify-content: center; }

/* hands-free access */
.gaze-cursor { position: fixed; inset-inline-start: 0; inset-block-start: 0; z-index: 50; width: 40px; height: 40px; margin: -20px 0 0 -20px; pointer-events: none; }
html[dir="rtl"] .gaze-cursor { inset-inline-start: auto; left: 0; }
.gaze-cursor i { display: block; width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--focus); background: conic-gradient(var(--ch) calc(var(--p, 0) * 360deg), transparent 0); box-shadow: 0 0 0 2px #000; }
.gaze-hover { outline: 5px solid var(--focus) !important; outline-offset: 2px; }
.calib { position: fixed; inset: 0; z-index: 60; background: var(--bg); }
.calib .dot { position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: radial-gradient(circle, #fff 0 30%, var(--focus) 32% 100%); transition: left .35s, top .35s; }
.calib p { position: absolute; inset-block-end: 80px; inset-inline: 0; text-align: center; font-size: var(--t-l); color: var(--mute); }
.calib button { position: absolute; inset-block-end: 24px; inset-inline-start: 50%; transform: translateX(-50%); }
.access-bar { position: fixed; inset-inline: 8px; inset-block-end: calc(var(--nav-h) + 12px + env(safe-area-inset-bottom)); z-index: 6; display: flex; gap: 6px; padding: 6px; border-radius: var(--r); overflow-x: auto; scrollbar-width: none; background: var(--deck); border: 1px solid var(--line-strong); }
.access-bar[data-method="switch"] [data-acc="recentre"], .access-bar[data-method="switch"] [data-acc="recal"], .access-bar[data-method="gaze"] [data-acc="recentre"], .access-bar[data-method="head"] [data-acc="recal"] { display: none; }
body.hands-free .talk { padding-block-end: calc(var(--nav-h) + 90px + env(safe-area-inset-bottom)); }

/* ---------- LEARN ---------- */
.learn { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 8px; padding-inline: 8px; }
.learn-lang { max-width: 420px; }
.prog-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 10px; }
.prog { display: grid; gap: 6px; justify-items: center; align-content: center; text-align: center; padding: 16px 10px; border-radius: var(--r); border: 2px solid var(--line); background: var(--bg); cursor: pointer; min-height: 124px; position: relative; color: var(--ink); }
.prog:hover { border-color: var(--ch); }
.prog .ico { font-size: 2rem; line-height: 1; } .prog b { font-size: var(--t-m); } .prog small { color: var(--mute); font-size: var(--t-xs); }
.prog em { position: absolute; inset-block-start: 8px; inset-inline-end: 8px; font-style: normal; font-size: .72rem; padding: 2px 8px; border-radius: 999px; background: var(--warn); color: #1a1200; font-weight: 700; }
html[data-theme="light"] .prog em, html[data-theme="sun"] .prog em { color: #fff; }
.prog.assigned { border-color: var(--warn); }
.session { gap: 14px; }
.ls-prompt { margin: 0; font-size: var(--t-l); color: var(--mute); text-align: center; }
.ls-card { display: grid; justify-items: center; gap: 8px; }
.ls-card img { width: min(42vw, 220px); height: min(42vw, 220px); object-fit: contain; background: #fff; border-radius: 20px; padding: 8px; }
.ls-word { margin: 0; font-size: clamp(2rem, 9vw, 3.4rem); font-weight: 700; text-align: center; line-height: 1.2; }
.choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; }
.choice { display: grid; gap: 4px; justify-items: center; padding: 8px; border-radius: var(--r); border: 3px solid var(--line); background: #fff; color: #000; cursor: pointer; min-height: 110px; font-weight: 700; }
.choice img { width: 100%; max-width: 120px; aspect-ratio: 1; object-fit: contain; }
.choice.right { border-color: #0a8a5f; box-shadow: 0 0 0 4px #0a8a5f; } .choice.wrong { border-color: #c0392b; opacity: .55; }
.choice.right::after { content: '✓'; font-size: 1.4rem; color: #0a8a5f; } .choice.wrong::after { content: '✕'; font-size: 1.4rem; color: #c0392b; }
.ls-feedback { display: grid; grid-template-columns: 1fr 18px; gap: 8px; align-items: stretch; }
#ls-wave { width: 100%; height: 80px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); }
.level { border-radius: 9px; background: var(--bg); border: 1px solid var(--line); position: relative; overflow: hidden; }
.level i { position: absolute; inset-inline: 0; inset-block-end: 0; height: calc(var(--lvl, 0) * 100%); background: var(--mute); transition: height .08s; }
.level.voiced i { background: var(--ch); }
.level .target { position: absolute; inset-inline: 0; bottom: 40%; height: 3px; background: var(--warn); }
.ls-tools { flex-wrap: wrap; justify-content: center; align-items: center; }
#ls-record.rec { background: #e11d48; color: #fff; border-color: #e11d48; }
.daf-ms { display: none; align-items: center; gap: 6px; font-size: var(--t-s); color: var(--mute); }
#ls-daf[aria-pressed="true"] + .daf-ms { display: inline-flex; }
.ls-result { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; }
.ring { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--ch) calc(var(--v, 0) * 1%), var(--line) 0); }
.ring b { width: 74px; height: 74px; border-radius: 50%; background: var(--deck); display: grid; place-items: center; font-size: var(--t-l); }
.stars { margin: 0; font-size: 1.8rem; color: var(--warn); letter-spacing: 4px; }
.ls-result .msg { margin: 0; font-size: var(--t-l); font-weight: 700; }
.ls-result .words { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 6px; min-height: 0; }
.ls-result .words span { padding: 2px 8px; border-radius: 8px; background: var(--raised); }
.words .ok { color: var(--ok); } .words .mid { color: var(--warn); } .words .bad { color: var(--bad); }
.coach.learn-coach, .weekly { margin: 0; padding: 14px 16px; border-radius: var(--r); background: color-mix(in oklab, var(--ch) 10%, var(--bg)); border: 1px solid color-mix(in oklab, var(--ch) 45%, transparent); font-size: var(--t-m); line-height: 1.65; }
.brave-feel { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.brave-feel .picked { border-color: var(--ch); background: color-mix(in oklab, var(--ch) 20%, transparent); }
#ls-reps { justify-self: center; font-size: var(--t-l); }

/* ---------- MY VOICE ---------- */
.sp-list li { flex-wrap: wrap; }
.sp-list li b { flex: 1 1 100%; font-size: var(--t-l); }
.level-wrap { display: grid; gap: 4px; }
.level-wrap .level { height: 20px; border-radius: 10px; border: 2px solid var(--line); overflow: hidden; }
.level-wrap .level i { position: static; display: block; height: 100%; width: var(--p, 0%); background: var(--line); transition: width .08s linear; }
.level-wrap .level.ok i { background: var(--ok); } .level-wrap .level.loud i { background: var(--warn); } .level-wrap .level.soft i { background: var(--mute); }
#sp-listen.live { outline: 3px solid var(--ch); }

/* ---------- CARE ---------- */
.wb { margin: 4px 0; padding: 12px 14px; border-radius: var(--r-ctl); border: 2px solid var(--line); font-weight: 600; }
.wb.ok { border-color: var(--ok); } .wb.note { border-color: var(--line); } .wb.warn { border-color: var(--warn); } .wb.alert { border-color: var(--bad); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stats div { display: grid; justify-items: center; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--bg); text-align: center; }
.stats b { font-size: var(--t-xl); font-variant-numeric: tabular-nums; }
.stats.two { grid-template-columns: repeat(2, 1fr); }
.bars { display: flex; align-items: flex-end; gap: 2px; height: 80px; padding: 6px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--bg); }
.bars i { flex: 1; min-width: 3px; height: var(--h, 2%); background: var(--ch); border-radius: 3px 3px 0 0; }
.invite-code { margin: 0; padding: 14px; border: 2px dashed var(--ch); border-radius: var(--r-ctl); text-align: center; }
.invite-code b { font-size: var(--t-xl); letter-spacing: .12em; direction: ltr; unicode-bidi: isolate; }
.clinic-entry { flex-wrap: wrap; }

/* ---------- LENS ---------- */
.see-panel { gap: 12px; }
.see-stage { position: relative; border-radius: var(--r); overflow: hidden; background: #000; aspect-ratio: 4 / 3; touch-action: manipulation; border: 2px solid color-mix(in oklab, var(--ch) 45%, var(--line)); }
.see-stage video { width: 100%; height: 100%; object-fit: cover; display: block; }
.see-ring { position: absolute; left: var(--x, 50%); top: var(--y, 50%); width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; border: 4px solid rgb(255 255 255 / .7); background: conic-gradient(var(--ch) calc(var(--p, 0) * 360deg), transparent 0); mask: radial-gradient(circle, transparent 55%, #000 56%); -webkit-mask: radial-gradient(circle, transparent 55%, #000 56%); }
.lens-modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.lens-modes button { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 76px; border-radius: var(--r); border: 2px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; cursor: pointer; }
.lens-modes button span { font-size: 1.5rem; line-height: 1; } .lens-modes button b { font-size: var(--t-s); }
.lens-modes button[aria-checked="true"] { border-color: var(--ch); background: color-mix(in oklab, var(--ch) 18%, var(--bg)); }
.lens-badge { position: absolute; inset-block-start: 10px; inset-inline-start: 10px; padding: 4px 12px; border-radius: 999px; background: rgb(0 0 0 / .78); color: #ffd166; font-weight: 700; font-size: var(--t-s); }
.live-dot { padding: 3px 10px; border-radius: 999px; background: #e11d48; color: #fff; font-weight: 700; font-size: .8rem; }
.lens-pane .btn.big { flex: 1 1 220px; }
.lens-always .btn { flex: 1 1 100px; }
#lens-mic[aria-pressed="true"], #lens-live[aria-pressed="true"], #lens-quick[aria-pressed="true"] { background: #e11d48; border-color: #e11d48; color: #fff; }
.lens-settings { border: 1px solid var(--line); border-radius: var(--r); padding: 6px 14px; }
.lens-settings summary { cursor: pointer; font-weight: 700; min-height: var(--tap); display: flex; align-items: center; }
.lens-settings label { display: grid; gap: 4px; margin: 10px 0; } .lens-settings label.check { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.see-result { display: grid; gap: 10px; padding: 14px; border: 2px solid var(--line); border-radius: var(--r); background: var(--bg); }
.see-text { margin: 0; font-size: var(--t-l); line-height: 1.6; white-space: pre-wrap; }
.pill-select { min-height: 48px; border-radius: 999px; padding: 0 12px; }

/* ---------- CLINIC (therapist workspace) ---------- */
.patient-list { display: grid; gap: 10px; }
.patient-card { display: grid; gap: 4px; text-align: start; padding: 16px; border-radius: var(--r); border: 2px solid var(--line); background: var(--bg); color: inherit; font: inherit; cursor: pointer; }
.patient-card:hover { border-color: var(--ch); }
.patient-card b { font-size: var(--t-l); }
.patient-card em { justify-self: start; font-style: normal; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.tabs button { flex: 1 1 auto; min-height: 48px; padding: 0 16px; border-radius: var(--r-pill); border: 2px solid var(--line); background: var(--bg); color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.tabs button[aria-selected="true"] { border-color: var(--ch); background: var(--ch); color: var(--on-ch); }
.chart-wrap svg { width: 100%; height: auto; }
.trend .grid { stroke: var(--line); } .trend .axis { fill: var(--mute); font-size: 12px; }
.legend { display: flex; flex-wrap: wrap; gap: 10px; }
.legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-s); unicode-bidi: isolate; }
.legend-item .sw { width: 14px; height: 14px; border-radius: 4px; background: var(--c); flex: none; }
.table-wrap { overflow-x: auto; }
.measures { width: 100%; border-collapse: collapse; font-size: var(--t-s); }
.measures th { white-space: nowrap; font-size: var(--t-xs); color: var(--mute); }
.measures th, .measures td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.recs .rec-row { display: grid; gap: 8px; }
.recs .rec-row.unrated { border-color: var(--warn); }
.rec-head { display: grid; }
.intel { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.goal.met span { text-decoration: line-through; opacity: .7; }
.note-text { margin: 4px 0 0; white-space: pre-wrap; }
#screen-clinic textarea { min-height: 76px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
html[data-calm="1"] *, html[data-calm="1"] *::before, html[data-calm="1"] *::after { animation: none !important; transition: none !important; }

/* ---------- print report and demo-independent tail (kept from the report design) ---------- */
.clinic-report { display: none; }
@page { size: A4; margin: 14mm 13mm 16mm; @bottom-center { content: counter(page) " / " counter(pages); font-size: 8pt; color: #5b6776; direction: ltr; unicode-bidi: isolate; } }
@media print {
  html:has(body.printing-report) { background: #fff !important; }
  body.printing-report > *:not(.clinic-report) { display: none !important; }
  body.printing-report { background: #fff !important; color: #1b2430 !important; height: auto; }
  body.printing-report .clinic-report { display: block; }
}
/* ---------- clinical progress report (print) ---------- */
.rp { --navy: #12304f; --teal: #0b7a75; --ink: #1b2430; --muted: #5b6776; --rule: #d9e0e8; --soft: #f3f6f9; --good: #0a7d43; --warn: #b4540a; --bad: #b42318;
  color: var(--ink); font-size: 9.6pt; line-height: 1.45; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.rp h1, .rp h2 { color: var(--navy); margin: 0; letter-spacing: -0.01em; }
.rp h2 { font-size: 11pt; margin: 14pt 0 6pt; padding-bottom: 3pt; border-bottom: 1.5pt solid var(--teal); break-after: avoid; }
.rp-head { display: grid; grid-template-columns: auto 1fr auto; gap: 14pt; align-items: center; background: var(--navy); color: #fff; padding: 12pt 14pt; border-radius: 6pt; }
.rp-brand { display: grid; line-height: 1.1; padding-inline-end: 14pt; border-inline-end: 1pt solid rgba(255,255,255,.35); }
.rp-mark { font-size: 15pt; letter-spacing: .02em; } .rp-brand span { font-size: 7.5pt; opacity: .75; text-transform: uppercase; letter-spacing: .12em; }
.rp-titles h1 { color: #fff; font-size: 15.5pt; } .rp-titles p { margin: 2pt 0 0; font-size: 8.5pt; opacity: .85; }
.rp-meta { display: grid; gap: 4pt; justify-items: end; font-size: 7.8pt; text-align: end; }
.rp-conf { background: #fff; color: var(--navy); font-weight: 700; padding: 2pt 7pt; border-radius: 99pt; }
.rp-ident { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 10pt 0 0; border: 1pt solid var(--rule); border-radius: 5pt; overflow: hidden; }
.rp-field { padding: 5pt 8pt; border-inline-end: 1pt solid var(--rule); border-bottom: 1pt solid var(--rule); }
.rp-span2 { grid-column: span 2; }
.rp-field dt { font-size: 7pt; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .rp-field dd { margin: 1pt 0 0; font-weight: 600; }
.rp-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7pt; break-inside: avoid; }
.rp-kpi { display: flex; gap: 6pt; align-items: center; background: var(--soft); border: 1pt solid var(--rule); border-radius: 6pt; padding: 8pt; break-inside: avoid; }
.rp-kpi > div { display: grid; } .rp-kpi-big { font-size: 17pt; color: var(--navy); line-height: 1.05; font-variant-numeric: tabular-nums; } .rp-kpi-label { font-size: 7.4pt; color: var(--muted); }
.rp-ring { width: 34pt; height: 34pt; flex: none; } .rp-ring-bg { fill: none; stroke: #dde4ec; stroke-width: 6; } .rp-ring-fg { fill: none; stroke: var(--teal); stroke-width: 6; stroke-linecap: round; }
.rp-delta { font-size: 7.6pt; font-weight: 700; white-space: nowrap; } .rp-delta.rp-up { color: var(--good); } .rp-delta.rp-down { color: var(--bad); } .rp-delta.rp-flat { color: var(--muted); font-weight: 500; }
.rp-find ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4pt; }
.rp-find li { padding: 5pt 9pt; border-inline-start: 3pt solid var(--teal); background: var(--soft); border-radius: 3pt; }
.rp-find li[data-tone="good"] { border-color: var(--good); } .rp-find li[data-tone="warn"] { border-color: var(--warn); background: #fdf5ec; }
.rp-table { width: 100%; border-collapse: collapse; font-size: 8.6pt; break-inside: avoid; }
.rp-table th { background: var(--navy); color: #fff; font-weight: 600; font-size: 7.6pt; text-align: start; padding: 5pt 6pt; }
.rp-table td { padding: 4pt 6pt; border-bottom: 1pt solid var(--rule); vertical-align: middle; } .rp-table tbody tr:nth-child(even) td { background: #f8fafc; }
.rp-table tr { break-inside: avoid; } .rp-table thead { display: table-header-group; }
.rp-table .rp-num { text-align: center; font-variant-numeric: tabular-nums; } .rp-table .rp-strong { font-weight: 700; color: var(--navy); }
.rp-table .rp-prog { font-weight: 600; } .rp-dot { display: inline-block; width: 7pt; height: 7pt; border-radius: 50%; margin-inline-end: 5pt; vertical-align: middle; }
.rp-spark { width: 80pt; height: 20pt; display: block; } .rp-spark-mid { stroke: #e3e8ee; stroke-dasharray: 2 2; }
.rp-visuals { display: grid; grid-template-columns: 1.15fr 1fr; gap: 10pt; margin-top: 12pt; break-inside: avoid; }
.rp-fig { margin: 0; border: 1pt solid var(--rule); border-radius: 6pt; padding: 8pt; break-inside: avoid; } .rp-fig.rp-wide { grid-column: 1 / -1; }
.rp-fig figcaption { font-weight: 700; color: var(--navy); font-size: 9pt; margin-bottom: 4pt; }
.rp-trend { width: 100%; height: auto; display: block; } .rp-trend .rp-grid { stroke: #e6ebf0; } .rp-trend .rp-base { stroke: #9aa5b1; } .rp-trend .rp-zone { fill: #e7f4f2; }
.rp-trend .rp-axis { fill: var(--muted); font-size: 10px; } .rp-trend .rp-endlab { font-size: 10.5px; font-weight: 700; }
.rp-cal { display: grid; gap: 6pt; } .rp-cal-grid { display: flex; gap: 5pt; direction: ltr; } .rp-cal-col { display: grid; gap: 3pt; justify-items: center; }
.rp-cal-wk { font-size: 6.4pt; color: var(--muted); white-space: nowrap; height: 9pt; }
.rp-cal-cell { display: block; width: 15pt; height: 15pt; border-radius: 2.5pt; background: #edf1f5; }
.rp-cal-cell[data-lvl="1"] { background: #b7e1dc; } .rp-cal-cell[data-lvl="2"] { background: #6cc0b7; } .rp-cal-cell[data-lvl="3"] { background: #1f9a90; } .rp-cal-cell[data-lvl="4"] { background: #0b6b66; }
.rp-cal-cell[data-future] { background: transparent; outline: 1pt dashed #dde3ea; }
.rp-cal-key { display: flex; gap: 3pt; align-items: center; font-size: 7pt; color: var(--muted); } .rp-cal-key .rp-cal-cell { width: 9pt; height: 9pt; }
.rp-cuebar-track { display: flex; height: 20pt; border-radius: 4pt; overflow: hidden; }
.rp-cue-seg { display: grid; place-items: center; color: #fff; font-size: 7.6pt; font-weight: 700; min-width: 18pt; }
[data-cue="0"].rp-cue-seg, .rp-cue-key [data-cue="0"] i { background: #0a7d43; } [data-cue="1"].rp-cue-seg, .rp-cue-key [data-cue="1"] i { background: #4b9fd5; }
[data-cue="2"].rp-cue-seg, .rp-cue-key [data-cue="2"] i { background: #e69f00; } [data-cue="3"].rp-cue-seg, .rp-cue-key [data-cue="3"] i { background: #c2410c; }
.rp-cue-key { display: flex; flex-wrap: wrap; gap: 4pt 10pt; margin-top: 6pt; font-size: 7.4pt; color: var(--muted); } .rp-cue-key i { display: inline-block; width: 8pt; height: 8pt; border-radius: 2pt; margin-inline-end: 3pt; vertical-align: middle; }
.rp-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14pt; break-inside: avoid; }
.rp-goal { padding: 5pt 0; border-bottom: 1pt solid var(--rule); break-inside: avoid; } .rp-goal-top { display: flex; justify-content: space-between; gap: 8pt; align-items: baseline; }
.rp-badge { font-size: 7pt; font-weight: 700; padding: 1pt 6pt; border-radius: 99pt; background: #e6eef7; color: var(--navy); white-space: nowrap; }
.rp-badge[data-status="met"] { background: #dcf3e6; color: var(--good); } .rp-badge[data-status="paused"] { background: #f1f1f1; color: var(--muted); }
.rp-goal-bar { position: relative; height: 6pt; background: #e6ebf0; border-radius: 99pt; margin: 5pt 0 3pt; } .rp-goal-fill { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--teal); border-radius: 99pt; }
.rp-goal-target { position: absolute; top: -3pt; bottom: -3pt; width: 1.5pt; background: var(--navy); }
.rp-goal-nums { font-size: 7.6pt; color: var(--muted); }
.rp-hw { display: grid; grid-template-columns: 1fr auto; gap: 1pt 8pt; padding: 5pt 0; border-bottom: 1pt solid var(--rule); align-items: center; break-inside: avoid; }
.rp-hw > span:nth-child(2) { font-size: 7.6pt; color: var(--muted); grid-column: 1; } .rp-hw .rp-dots { grid-row: 1 / span 2; grid-column: 2; display: flex; gap: 2.5pt; } .rp-hw .rp-num { grid-column: 2; font-size: 7.6pt; text-align: center; color: var(--muted); }
.rp-dots i { width: 8pt; height: 8pt; border-radius: 50%; border: 1pt solid #b8c3cf; } .rp-dots i[data-on] { background: var(--teal); border-color: var(--teal); }
.rp-note { margin: 0 0 6pt; padding: 6pt 10pt; background: var(--soft); border-inline-start: 3pt solid var(--navy); border-radius: 3pt; break-inside: avoid; }
.rp-note cite { font-style: normal; font-size: 7.4pt; color: var(--muted); font-weight: 600; } .rp-note p { margin: 2pt 0 0; white-space: pre-wrap; }
.rp-methods ol { margin: 0; padding-inline-start: 14pt; font-size: 7.8pt; color: var(--muted); display: grid; gap: 2pt; }
.rp-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 20pt; margin-top: 22pt; break-inside: avoid; }
.rp-sign > div { display: grid; grid-template-columns: 1fr 60pt; gap: 2pt 10pt; font-size: 7.6pt; color: var(--muted); }
.rp-sign .rp-line { border-bottom: 1pt solid var(--ink); height: 22pt; grid-row: 1; grid-column: 1; } .rp-sign .rp-line.rp-short { grid-column: 2; }
.rp-sign > div > span:nth-child(2) { grid-row: 2; grid-column: 1; } .rp-sign > div > span:nth-child(4) { grid-row: 2; grid-column: 2; }
.rp-foot { margin-top: 14pt; padding-top: 5pt; border-top: 1pt solid var(--rule); font-size: 7pt; color: var(--muted); text-align: center; }
.rp .rp-empty { color: var(--muted); font-style: italic; }

/* ---------- keyboard-safe: the visible area shrinks to what the on-screen keyboard leaves ---------- */
html[data-kb="1"] .modebar { display: none; }
html[data-kb="1"] body.signed-in .screen:not(#screen-auth) { height: var(--vvh, 100dvh); padding-block-end: 8px; }
html[data-kb="1"] #screen-auth { height: var(--vvh, 100dvh); overflow-y: auto; }
html[data-kb="1"] dialog[open] { max-height: calc(var(--vvh, 100dvh) - 16px); margin-block: 8px auto; }
html[data-kb="1"] .sheet[open] { inset-block-end: auto; inset-block-start: 0; }
dialog { scroll-padding-block: 80px; }
.panel { scroll-padding-block: 24px; }
/* reserve the prediction row so the board never jumps when suggestions appear */
#predict { min-height: 52px; }
@media (max-height: 760px) { #predict:empty { min-height: 0; } } /* short screens: every pixel goes to the board */

/* ---------- My Day ---------- */
.screen.day, .screen.hear { display: flex; flex-direction: column; gap: 8px; padding-inline: 8px; }
.screen.day > .panel, .screen.hear > .panel { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.day-tabs { max-width: 1100px; width: 100%; margin-inline: auto; flex: none; }
.day-tabs button { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-height: 76px; --tc: var(--c-day); }
.seg-ico { width: 40px; height: 40px; }
.day-tabs button[aria-selected="true"] .ill .bg { fill: color-mix(in oklab, var(--on-ch) 25%, transparent); }
.pic { display: grid; justify-items: center; gap: 4px; text-align: center; }
.pic img { width: 72px; height: 72px; object-fit: contain; border-radius: 12px; background: #fff; padding: 4px; }
.pic b { font-weight: 600; font-size: var(--t-m); line-height: 1.25; }
.first-then { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.ft-card { display: grid; justify-items: center; gap: 8px; padding: 16px 12px; border-radius: var(--r-tile); border: 3px solid var(--line); background: var(--raised); text-align: center; min-height: 210px; align-content: center; }
.ft-card.now { border-color: var(--c-day); background: color-mix(in oklab, var(--c-day) 14%, var(--deck)); }
.ft-card img { width: min(130px, 30vw); height: min(130px, 30vw); object-fit: contain; background: #fff; border-radius: 16px; padding: 6px; }
.ft-card b { font-size: var(--t-xl); font-weight: 700; }
.ft-tag { font-size: var(--t-s); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: 2px 12px; border-radius: var(--r-pill); background: var(--c-day); color: var(--on-ch); }
.ft-card.next .ft-tag { background: var(--line-strong); color: var(--ink); }
.ft-arrow { width: 44px; height: 44px; stroke: var(--c-day); fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
html[dir="rtl"] .ft-arrow { transform: scaleX(-1); }
.day-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.day-list li { position: relative; display: grid; justify-items: center; gap: 4px; padding: 10px 6px; border-radius: var(--r); border: 2px solid var(--line); background: var(--raised); }
.day-list li.now { border: 3px solid var(--c-day); }
.day-list li.done { opacity: .55; }
.day-list li.done .pic img { filter: grayscale(1); }
.day-list li.done::after { content: ''; position: absolute; inset-block-start: 6px; inset-inline-end: 6px; width: 26px; height: 26px; border-radius: 50%; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308111f' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/18px no-repeat; }
.day-state { font-size: var(--t-xs); font-weight: 700; color: var(--mute); min-height: 1.2em; }
.day-list li.now .day-state { color: var(--c-day); }
.day-x { display: none; position: absolute; inset-block-start: 4px; inset-inline-start: 4px; width: 40px; height: 40px; min-height: 40px; }
.screen.day:has(.day-edit[open]) .day-x { display: inline-grid; place-items: center; }
.day-edit summary { cursor: pointer; font-weight: 600; min-height: 48px; display: flex; align-items: center; }
.day-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.pick-pic { border: 2px solid var(--line); background: var(--raised); border-radius: var(--r); padding: 8px 4px; cursor: pointer; color: var(--ink); }
.pick-pic[aria-pressed="true"] { border-color: var(--c-day); }
.pick-pic .pic img { width: 56px; height: 56px; }
.feel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.feel { border: 3px solid var(--line); background: var(--raised); border-radius: var(--r-tile); padding: 12px 6px; cursor: pointer; color: var(--ink); }
.feel[aria-pressed="true"] { border-color: var(--c-day); background: color-mix(in oklab, var(--c-day) 14%, var(--deck)); }
.feel .pic img { width: 84px; height: 84px; }
.feel-help { border-radius: var(--r); border: 2px solid var(--c-day); padding: 14px; display: grid; gap: 10px; }
.feel-help p { margin: 0; font-size: var(--t-l); font-weight: 600; }
.breathe { position: relative; width: min(64vw, 280px); aspect-ratio: 1; margin: 6px auto; display: grid; place-items: center; }
.breathe-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px dashed color-mix(in oklab, var(--c-day) 60%, transparent); }
.breathe-core { width: 40%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, color-mix(in oklab, var(--c-day) 70%, #fff), var(--c-day)); transition: width var(--dur, 4s) cubic-bezier(.45, 0, .55, 1); }
.breathe[data-phase="in"] .breathe-core, .breathe[data-phase="hold"] .breathe-core { width: 96%; }
.breathe[data-phase="out"] .breathe-core { width: 40%; }
/* calm mode keeps the guide but without movement: the words and voice carry the rhythm */
html[data-calm="1"] .breathe-core { transition: none !important; }
.breathe-say { text-align: center; font-size: var(--t-xl); font-weight: 700; margin: 0; min-height: 1.6em; }
.row.center, .chips.center { justify-content: center; align-items: center; }
.switch-row.inline { display: inline-flex; align-items: center; gap: 10px; }
.calm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.calm-card { min-height: 72px; border-radius: var(--r); border: 2px solid var(--c-day); background: var(--raised); color: var(--ink); font-weight: 600; font-size: var(--t-m); cursor: pointer; padding: 8px; }
.ground { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ground button { width: 100%; text-align: start; min-height: 56px; padding: 8px 14px; border-radius: var(--r-ctl); border: 2px solid var(--line); background: var(--raised); color: var(--ink); cursor: pointer; font-size: var(--t-m); }
.ground li.done button { border-color: var(--ok); text-decoration: line-through; color: var(--mute); }
.vtimer { position: relative; width: min(70vw, 320px); aspect-ratio: 1; margin: 6px auto; display: grid; place-items: center; }
.vtimer svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vt-bg { fill: var(--raised); stroke: var(--line-strong); stroke-width: 3; }
.vt-left { fill: var(--c-day); } .vt-hub { fill: var(--ink); }
.vtimer b { position: relative; margin-top: 62%; font-size: var(--t-xl); font-weight: 700; background: var(--deck); padding: 2px 14px; border-radius: var(--r-pill); font-variant-numeric: tabular-nums; }
.chip-btn[aria-pressed="true"] { background: var(--ch); color: var(--on-ch); border-color: var(--ch); }

/* ---------- Hear for me ---------- */
.hear-hero { display: grid; justify-items: center; gap: 10px; padding: 8px 0; }
.hear-orb { --lv: 0; position: relative; width: min(62vw, 240px); aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--c-hear); background: radial-gradient(circle, color-mix(in oklab, var(--c-hear) 18%, var(--deck)), var(--deck) 70%); color: var(--ink); cursor: pointer; display: grid; place-items: center; align-content: center; gap: 6px; --tc: var(--c-hear); }
.hear-orb .tile-ico { width: 46%; height: 46%; }
.hear-orb b { font-size: var(--t-l); }
.hear-orb[aria-pressed="true"] { background: radial-gradient(circle, color-mix(in oklab, var(--c-hear) 38%, var(--deck)), var(--deck) 72%); }
.ho-ring { position: absolute; inset: -10px; border-radius: 50%; border: 6px solid color-mix(in oklab, var(--c-hear) calc(var(--lv) * 100%), transparent); pointer-events: none; }
.hear-meter { width: min(80vw, 360px); height: 12px; border-radius: 6px; background: var(--raised); overflow: hidden; border: 1px solid var(--line); }
.hear-meter i { display: block; height: 100%; width: var(--p, 0%); background: var(--c-hear); }
.hear-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.hk, .hk-mine, .hear-log li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-ctl); border: 2px solid color-mix(in oklab, var(--k, var(--c-hear)) 70%, transparent); background: var(--raised); }
.hk svg, .hk-mine svg, .hear-log svg { width: 30px; height: 30px; stroke: var(--k, var(--c-hear)); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hk-mine b { flex: 1; }
.hear-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.hear-log li b { flex: 1; } .hear-log li span { color: var(--mute); font-size: var(--t-s); }
.hear-teach { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; align-items: end; }
.hear-teach .hint { grid-column: 1 / -1; margin: 0; }
.sound-alert { --k: #ff4d4d; position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; align-content: center; gap: 14px; padding: 24px; text-align: center;
  background: var(--k); color: #08111f; }
.sound-alert[data-urgent="1"] { animation: sa-pulse 1.2s ease-in-out 3; }
@keyframes sa-pulse { 50% { background: color-mix(in oklab, var(--k) 55%, #000); } }
html[data-calm="1"] .sound-alert { animation: none !important; }
.sa-ico svg { width: min(40vw, 180px); height: min(40vw, 180px); stroke: #08111f; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sound-alert b { font-size: clamp(2rem, 9vw, 4rem); font-weight: 700; }
.sound-alert span { font-size: var(--t-l); max-width: 30ch; }
.sound-alert .btn { background: #08111f; color: #fff; border-color: #08111f; min-width: 220px; }

/* ---------- Touchpad mode ---------- */
.touchpad { position: fixed; inset: 0; z-index: 70; touch-action: none; user-select: none; -webkit-user-select: none;
  background: color-mix(in oklab, #000 55%, transparent); display: grid; align-items: end; justify-items: center; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); }
.tp-focus { position: fixed; border: 5px solid var(--focus); border-radius: 16px; box-shadow: 0 0 0 9999px color-mix(in oklab, #000 35%, transparent), 0 0 24px var(--focus); pointer-events: none; }
.tp-card { --tc: var(--c-touch); width: min(100%, 640px); display: grid; grid-template-columns: 72px 1fr; gap: 6px 14px; align-items: center; padding: 16px; border-radius: var(--r-tile);
  background: #0b1220; color: #fff; border: 2px solid #ffe14d; }
.tp-card .tile-ico { width: 72px; height: 72px; grid-row: span 2; }
.tp-card b { font-size: clamp(1.4rem, 5vw, 2.2rem); line-height: 1.2; }
.tp-card > span { color: #c9d6ee; }
.tp-legend { grid-column: 1 / -1; list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; font-size: var(--t-s); color: #c9d6ee; }
.tp-legend li { display: flex; gap: 8px; align-items: center; }
.tp-legend kbd { font: inherit; min-width: 40px; text-align: center; padding: 2px 6px; border-radius: 8px; background: #1d2e4a; color: #fff; }
.tp-card .btn { grid-column: 1 / -1; background: #1d2e4a; color: #fff; border-color: #4f6890; }

/* ---------- tablets and iPads: a side rail, two-column screens, bigger targets ---------- */
@media (min-width: 900px) and (min-height: 560px) {
  :root { --rail-w: 112px; }
  body.signed-in .modebar { inset-block: calc(var(--appbar-h) + env(safe-area-inset-top)) 0; inset-inline-start: 0; inset-inline-end: auto; width: var(--rail-w);
    grid-auto-flow: row; grid-auto-columns: 1fr; grid-auto-rows: minmax(78px, auto); align-content: start; justify-content: stretch; gap: 4px; padding: 10px 8px;
    border-block-start: 0; border-inline-end: 1px solid var(--line); overflow-y: auto; }
  body.signed-in .modebar button { font-size: var(--t-s); }
  body.signed-in .modebar button span { white-space: normal; text-align: center; line-height: 1.2; }
  body.signed-in .modebar button[aria-current="true"]::before { inset-block: 18%; inset-inline: 0 auto; width: 4px; height: auto; border-radius: 0 4px 4px 0; }
  html[dir="rtl"] body.signed-in .modebar button[aria-current="true"]::before { border-radius: 4px 0 0 4px; }
  .modebar .rail-only { display: grid !important; }
  body.signed-in .screen:not(#screen-auth) { padding-inline-start: calc(var(--rail-w) + 8px); padding-block-end: 12px; }
  .first-then { gap: 18px; }
  .ft-card { min-height: 260px; }
  #dp-plan, #dp-feel, #dp-calm, #dp-timer { padding: 24px; }
  .screen.hear > .panel { display: grid; grid-template-columns: minmax(300px, 1fr) 1.2fr; align-content: start; gap: 14px 28px; }
  .screen.hear > .panel > .hear-hero { grid-row: span 8; position: sticky; top: 0; align-self: start; }
  .screen.hear > .panel > :not(.hear-hero) { grid-column: 2; }
}

/* ---------- shake for help ---------- */
.sos-screen { position: fixed; inset: 0; z-index: 80; overflow-y: auto; display: grid; align-content: start; justify-items: center; gap: 14px;
  padding: calc(20px + env(safe-area-inset-top)) 18px calc(20px + env(safe-area-inset-bottom)); background: #7a0d1c; color: #fff; text-align: center; }
.sos-screen h2 { font-size: clamp(1.6rem, 6vw, 2.4rem); justify-content: center; }
.sos-screen p { margin: 0; font-size: var(--t-l); }
.sos-count { font-size: clamp(6rem, 36vw, 12rem); line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.sos-screen[data-state="countdown"] { background: #c81e36; align-content: center; min-height: 100dvh; cursor: pointer; }
.sos-screen[data-state="countdown"] .sos-call, .sos-screen[data-state="countdown"] .sos-status, .sos-screen[data-state="countdown"] .sos-card,
.sos-screen[data-state="countdown"] .sos-safe, .sos-screen[data-state="sent"] .sos-count { display: none; }
.sos-call { display: flex; align-items: center; justify-content: center; gap: 14px; width: min(100%, 560px); min-height: 120px; border-radius: 28px; background: #fff; color: #9e0000;
  font-size: clamp(1.8rem, 8vw, 2.6rem); font-weight: 700; text-decoration: none; box-shadow: 0 0 0 6px rgba(255, 255, 255, .35); }
.sos-call svg { width: 48px; height: 48px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linejoin: round; }
.sos-call:focus-visible { outline: 5px solid var(--focus); outline-offset: 4px; }
.sos-status { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--t-m); }
.sos-card { width: min(100%, 560px); background: #fff; color: #0d1626; border-radius: 22px; padding: 16px 18px; display: grid; gap: 8px; text-align: start; }
.sos-card p { font-size: var(--t-l); font-weight: 600; }
.sos-card .sos-card-other { font-size: var(--t-m); font-weight: 500; color: #3f4d64; }
.sos-card .sos-card-loc { font-size: var(--t-s); font-weight: 500; color: #3f4d64; }
.sos-card a { color: #005fa3; font-weight: 700; }
.sos-safe { position: relative; overflow: hidden; width: min(100%, 560px); min-height: 72px; border-radius: 20px; border: 3px solid #fff; background: transparent; color: #fff; font: inherit; font-size: var(--t-l); font-weight: 700; cursor: pointer; }
.sos-safe::before { content: ''; position: absolute; inset: 0; background: rgba(70, 227, 183, .55); transform: scaleX(0); transform-origin: left; }
html[dir="rtl"] .sos-safe::before { transform-origin: right; }
.sos-safe.holding::before { transform: scaleX(1); transition: transform 1.5s linear; }
.sos-safe span { position: relative; }
.sos-send-btn { width: 100%; background: var(--sos); color: var(--on-sos); border-color: var(--sos); margin-block-end: 10px; }
.contact-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.contact-row > span { flex: 1 1 200px; }
.phone-form { flex: 1 1 100%; }

/* ---------- calm toolkit ---------- */
.scale { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 4px; }
.scale-n { --n: 0; min-height: 52px; border-radius: 12px; border: 2px solid transparent; font-weight: 700; font-size: var(--t-m); cursor: pointer; color: #0b1020;
  background: color-mix(in oklab, #46e3b7 calc(100% - var(--n) * 10%), #ff9c6b); }
.scale-n[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 0 0 3px var(--focus); }
html[data-theme="contrast"] .scale-n { background: #000; color: #fff; border-color: #fff; }
.scale-ends { display: flex; justify-content: space-between; color: var(--mute); font-size: var(--t-s); margin-top: -6px; }
.calm-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; }
.calm-tool { --tc: var(--c-day); display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; text-align: start; padding: 12px 14px; min-height: 84px;
  border-radius: var(--r); border: 2px solid var(--line); background: var(--raised); color: var(--ink); cursor: pointer; }
.calm-tool:hover { border-color: var(--tc); }
.calm-tool.ct-panic { --tc: #ff9c6b; border-color: color-mix(in oklab, #ff9c6b 60%, var(--line)); }
.ct-ico { width: 56px; height: 56px; }
.ct-text { display: grid; gap: 2px; } .ct-text b { font-size: var(--t-m); } .ct-text span { color: var(--mute); font-size: var(--t-s); line-height: 1.4; } .ct-text small { color: var(--mute); font-weight: 600; }
.calm-stage { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 6px 0 12px; }
.calm-shape { --s: .35; --dur: 4000ms; position: relative; width: min(72vw, 300px); aspect-ratio: 1; border-radius: 50%; border: 3px dashed color-mix(in oklab, var(--c-day) 55%, transparent);
  background: none; cursor: pointer; display: grid; place-items: center; padding: 0; }
.calm-shape .core { width: calc(var(--s) * 100%); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, color-mix(in oklab, var(--c-day) 65%, #fff), var(--c-day));
  transition: width var(--dur) cubic-bezier(.45, 0, .55, 1); }
.calm-shape .dot { position: absolute; top: 50%; width: 22%; aspect-ratio: 1; margin-top: -11%; border-radius: 50%; background: var(--c-day); opacity: .15; }
.calm-shape .dot.l { inset-inline-start: -6%; } .calm-shape .dot.r { inset-inline-end: -6%; }
html[dir="rtl"] .calm-shape .dot.l { inset-inline-start: auto; inset-inline-end: -6%; } html[dir="rtl"] .calm-shape .dot.r { inset-inline-end: auto; inset-inline-start: -6%; }
.calm-stage[data-side="l"] .dot.l, .calm-stage[data-side="r"] .dot.r { opacity: 1; }
.calm-stage[data-tool="tap"] .core { width: 20%; }
html[data-calm="1"] .calm-shape .core { transition: none !important; }
.calm-say { font-size: clamp(1.5rem, 6vw, 2.2rem); font-weight: 700; margin: 0; min-height: 1.4em; max-width: 26ch; }
.calm-progress { color: var(--mute); margin: 0; font-size: var(--t-m); font-variant-numeric: tabular-nums; min-height: 1.4em; }
.calm-after { display: grid; gap: 12px; }
.calm-after-msg { font-size: var(--t-l); font-weight: 600; margin: 0; min-height: 1.5em; }
.calm-quiet { position: fixed; inset: 0; z-index: 75; background: #000; display: grid; place-items: center; align-content: center; gap: 30px; color: #6d7a8c; cursor: pointer; }
.calm-quiet .qdot { width: 18px; height: 18px; border-radius: 50%; background: #2f4a5a; animation: qbreathe 10s ease-in-out infinite; }
@keyframes qbreathe { 50% { transform: scale(2.6); background: #3c6070; } }
.calm-quiet p { font-size: var(--t-s); margin: 0; }

/* ---------- seizure helper (steady colours only: nothing flashes) ---------- */
.seizure { position: fixed; inset: 0; z-index: 76; overflow-y: auto; display: grid; align-content: start; justify-items: center; gap: 12px; text-align: center;
  padding: calc(16px + env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom)); background: #10233a; color: #eef4ff; }
.seizure[data-state="long"] { background: #5c1220; }
.sz-top { width: min(100%, 640px); display: flex; justify-content: space-between; align-items: center; }
.sz-top .icon-btn { color: #fff; border-color: rgba(255, 255, 255, .4); }
.sz-time { font-size: clamp(4rem, 22vw, 7rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.sz-msg { font-size: var(--t-l); font-weight: 600; margin: 0; max-width: 34ch; }
.sz-alerted { margin: 0; min-height: 1.2em; }
.sz-start { width: min(100%, 520px); min-height: 96px; font-size: var(--t-xl); background: #46e3b7; color: #08111f; border-color: #46e3b7; }
.sz-end { width: min(100%, 520px); min-height: 72px; background: #fff; color: #10233a; border-color: #fff; }
.sz-call { display: none; align-items: center; justify-content: center; gap: 12px; width: min(100%, 520px); min-height: 96px; border-radius: 24px; background: #fff; color: #9e0000;
  font-size: var(--t-xl); font-weight: 700; text-decoration: none; }
.sz-call svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.seizure[data-state="ready"] .sz-end, .seizure[data-state="after"] .sz-end, .seizure:not([data-state="ready"]) .sz-start { display: none; }
.seizure[data-state="long"] .sz-call { display: flex; }
.sz-steps { list-style: none; margin: 0; padding: 0; width: min(100%, 640px); display: grid; gap: 8px; text-align: start; }
.sz-steps li { display: grid; gap: 2px; padding: 10px 14px; border-radius: 16px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); }
.sz-steps b { font-size: var(--t-l); } .sz-steps span { font-size: var(--t-m); color: #c9d6ee; }
.sz-call-when { width: min(100%, 640px); margin: 0; font-size: var(--t-s); color: #c9d6ee; text-align: start; }
.sz-auto { width: min(100%, 640px); text-align: start; }
.sz-after { width: min(100%, 640px); display: grid; gap: 10px; text-align: start; }
.sz-after textarea { width: 100%; }
.seizure .hint { color: #c9d6ee; max-width: 640px; }

/* ---------- Wolf, the assistant ---------- */
.tile[data-ch="wolf"] { --tc: var(--c-wolf); }
.tile-hero { grid-template-columns: 96px 1fr auto; min-height: 120px; border-width: 2px; border-color: color-mix(in oklab, var(--c-wolf) 55%, var(--line));
  background: linear-gradient(120deg, color-mix(in oklab, var(--c-wolf) 16%, var(--deck)), var(--deck) 70%); }
.tile-hero .tile-ico { width: 96px; height: 96px; }
.tile-hero .tile-text b { font-size: var(--t-l); }
@media (min-width: 700px) { .tile-hero { min-height: 150px; } .tile-hero .tile-text b { font-size: var(--t-xl); } }
.hero-mic { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--c-wolf); color: var(--on-ch); }
.hero-mic svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

/* brand mark: the official AlphaWolf files when installed (scripts/brand.sh); the drawn pictogram otherwise */
.aw-mark { display: block; width: 100%; height: 100%; object-fit: contain; }
.aw-mark.missing { display: none !important; }
.aw-mark:not(.missing) + .tile-ico, .aw-mark:not(.missing) + .mark { display: none; }
.brand-mark { width: 64px; height: 64px; flex: none; }
.hero-mark { display: grid; place-items: center; width: 72px; height: 72px; flex: none; } .hero-mark > * { grid-area: 1 / 1; } .hero-mark .tile-ico { width: 100%; height: 100%; }
.mini-mark { width: 26px; height: 26px; flex: none; } .aw-mark:not(.missing) + .logo-dot { display: none; }
.by-aw { margin: 2px 0 0; font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.ab-brand { width: 40px; height: 40px; flex: none; }
.appbar:has(#ab-home:not([hidden])) .ab-brand { display: none; }

/* chat shell */
.screen.assist { display: flex; flex-direction: column; padding-inline: 8px; }
.chat-shell { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; max-width: 920px; width: 100%; margin-inline: auto; overflow: hidden;
  border-radius: var(--r-tile); background: linear-gradient(180deg, color-mix(in oklab, var(--c-wolf) 7%, var(--deck)), var(--deck) 220px); }
.chat-shell.drop { outline: 3px dashed var(--c-wolf); outline-offset: -8px; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.wolf-avatar { --tc: var(--c-wolf); position: relative; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; flex: none;
  background: radial-gradient(circle at 35% 30%, color-mix(in oklab, var(--c-wolf) 35%, var(--deck)), var(--bg)); border: 2px solid color-mix(in oklab, var(--c-wolf) 60%, transparent); }
.wolf-avatar .aw-mark { width: 78%; height: 78%; } .wolf-avatar .tile-ico { width: 100%; height: 100%; }
.chat-who { flex: 1; display: grid; min-width: 0; } .chat-who b { font-size: var(--t-m); }
.chat-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-s); color: var(--mute); }
.chat-status i { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); }
.chat-status[data-state="listening"] i { background: var(--sos); } .chat-status[data-state="thinking"] i { background: var(--warn); } .chat-status[data-state="speaking"] i { background: var(--c-wolf); }
.chat-menu { inset: auto; margin: 0; position-anchor: --chatmenu; min-width: 280px; padding: 12px; gap: 6px; }
.chat-menu:popover-open { display: grid; }
#assist-menu-btn { anchor-name: --chatmenu; }
@supports (position-area: bottom) { .chat-menu { position: fixed; position-area: bottom span-left; margin-top: 6px; } }
@supports not (position-area: bottom) { .chat-menu { position: fixed; inset-block-start: calc(var(--appbar-h) + 64px); inset-inline-end: 16px; } }
.chat-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 12px 8px; scroll-padding-bottom: 20px; }
.chat-empty { display: grid; justify-items: center; gap: 14px; padding: 12px 0 8px; text-align: center; }
.chat-hello { font-size: var(--t-xl); max-width: 26ch; justify-content: center; }
.suggest-grid { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 8px; }
.suggest { --tc: var(--c-wolf); display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 8px 12px; border-radius: var(--r); border: 1px solid var(--line); background: var(--raised);
  color: var(--ink); font-size: var(--t-m); text-align: start; cursor: pointer; }
.suggest:hover { border-color: var(--c-wolf); } .suggest .tile-ico { width: 40px; height: 40px; flex: none; }
.suggest:nth-child(1) { --tc: var(--c-day); } .suggest:nth-child(2) { --tc: var(--c-day); } .suggest:nth-child(3) { --tc: var(--c-see); }
.suggest:nth-child(4) { --tc: var(--c-talk); } .suggest:nth-child(5) { --tc: var(--c-learn); } .suggest:nth-child(6) { --tc: var(--c-learn); }
.chat { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.chat .msg { display: grid; gap: 6px; max-width: min(88%, 640px); color: var(--ink); font-weight: 400; font-size: var(--t-m); min-height: 0; margin: 0; }
.chat .msg.me { justify-self: end; justify-items: end; } .chat .msg.wolf { justify-self: start; }
.msg-body { display: grid; gap: 6px; padding: 12px 15px 8px; border-radius: 22px; }
.msg.wolf .msg-body { background: var(--raised); border: 1px solid var(--line); border-end-start-radius: 6px; }
.msg.me .msg-body { background: linear-gradient(135deg, color-mix(in oklab, var(--c-wolf) 30%, var(--deck)), color-mix(in oklab, var(--c-wolf) 16%, var(--deck))); border: 1px solid color-mix(in oklab, var(--c-wolf) 45%, transparent); border-end-end-radius: 6px; }
.msg-body p { margin: 0; font-size: var(--t-l); line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg-body img { max-width: 260px; width: 100%; border-radius: 14px; }
.msg-body time { justify-self: end; font-size: var(--t-xs); color: var(--mute); }
@media (prefers-reduced-motion: no-preference) { html:not([data-calm="1"]) .chat .msg { transition: opacity .25s, translate .25s; @starting-style { opacity: 0; translate: 0 8px; } } }
.msg-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.act-card { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 14px; border-radius: 16px; border: 1.5px solid var(--c-wolf); cursor: pointer;
  background: color-mix(in oklab, var(--c-wolf) 12%, var(--deck)); color: var(--ink); font-weight: 600; font-size: var(--t-s); max-width: 100%; }
.act-card svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--c-wolf); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.act-card span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-tools { display: flex; gap: 4px; }
.tool { width: 44px; height: 44px; border-radius: 12px; border: 0; background: none; color: var(--mute); display: grid; place-items: center; cursor: pointer; }
.tool:hover, .tool:focus-visible { background: var(--raised); color: var(--ink); }
.tool svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.msg.typing .msg-body, .msg.typing { padding: 0; }
.msg.typing .dots { display: inline-flex; gap: 6px; padding: 16px 18px; border-radius: 22px; border-end-start-radius: 6px; background: var(--raised); border: 1px solid var(--line); }
.msg.typing i { width: 9px; height: 9px; border-radius: 50%; background: var(--c-wolf); animation: tdot 1.4s ease-in-out infinite; }
.msg.typing i:nth-child(2) { animation-delay: .2s; } .msg.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes tdot { 50% { opacity: .25; translate: 0 -3px; } }
.crisis-card { display: grid; gap: 8px; padding: 12px; border-radius: 16px; background: color-mix(in oklab, var(--sos) 18%, var(--deck)); border: 2px solid var(--sos); }
.crisis-card p { font-size: var(--t-m); margin: 0; }
.crisis-call { background: var(--sos); color: var(--on-sos); border-color: var(--sos); text-decoration: none; }
.to-latest { position: absolute; inset-inline-end: 16px; inset-block-end: 96px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--raised); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.to-latest svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.assist-sign { display: grid; justify-items: center; gap: 4px; padding: 6px; border-bottom: 1px solid var(--line); }
.assist-sign canvas { width: min(64vw, 260px); height: auto; aspect-ratio: 6 / 5; border-radius: var(--r); background: var(--raised); }
/* composer */
.composer { flex: none; padding: 8px 10px calc(10px); display: grid; gap: 6px; border-top: 1px solid var(--line); }
.composer-pill { display: flex; align-items: flex-end; gap: 6px; padding: 6px; border-radius: 30px; border: 1.5px solid var(--line-strong); background: var(--bg); }
.composer-pill:focus-within { border-color: var(--c-wolf); box-shadow: 0 0 0 4px color-mix(in oklab, var(--c-wolf) 18%, transparent); }
.composer-pill textarea { flex: 1; min-width: 0; resize: none; border: 0; background: none; outline: none; box-shadow: none; padding: 12px 6px; min-height: 48px; max-height: 160px;
  font-size: var(--t-m); line-height: 1.4; field-sizing: content; }
.composer-pill textarea:focus-visible { outline: none; }
.icon-btn.ghost { border: 0; background: none; width: 48px; height: 48px; }
.mic-btn, .send-btn { flex: none; width: 52px; height: 52px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; }
.mic-btn { background: color-mix(in oklab, var(--c-wolf) 20%, var(--raised)); color: var(--ink); }
.send-btn { background: var(--c-wolf); color: var(--on-ch); }
.send-btn.stop { background: var(--ink); color: var(--bg); }
.mic-btn svg, .send-btn svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.send-btn.stop svg { fill: currentColor; stroke: none; }
.mic-btn.on { background: var(--sos); color: var(--on-sos); box-shadow: 0 0 0 6px color-mix(in oklab, var(--sos) 28%, transparent); }
.assist-photo-box { display: flex; align-items: center; gap: 8px; } .assist-photo-box img { height: 72px; border-radius: 12px; }
.assist-listening { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 600; color: var(--sos); }
.eq { display: inline-flex; gap: 3px; align-items: center; height: 18px; } .eq i { width: 4px; height: 100%; border-radius: 2px; background: var(--sos); animation: eq 1.1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: .15s; } .eq i:nth-child(3) { animation-delay: .3s; } .eq i:nth-child(4) { animation-delay: .45s; }
@keyframes eq { 50% { transform: scaleY(.35); } }
html[data-kb="1"] .chat-empty .suggest-grid, html[data-kb="1"] .chat-empty .wolf-orb { display: none; }

/* the Wolf orb (empty chat, voice mode): a slow glow — no flashing, still in calm mode */
.wolf-orb { --tc: var(--c-wolf); position: relative; display: grid; place-items: center; border-radius: 50%; border: 0; padding: 0; background: none; cursor: pointer; }
.wolf-orb.big { width: 116px; height: 116px; } .wolf-orb.huge { width: min(62vw, 280px); height: min(62vw, 280px); }
.orb-core { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 50% 46%, #0b2a63 0 50%, #0a5cff 78%, #00d4ff 100%); box-shadow: 0 0 60px color-mix(in oklab, var(--c-wolf) 55%, transparent); }
.orb-ring { position: absolute; inset: -14px; border-radius: 50%; border: 3px solid color-mix(in oklab, var(--c-wolf) 50%, transparent); }
.wolf-orb .aw-mark { position: relative; width: 55%; height: 55%; }
@media (prefers-reduced-motion: no-preference) {
  html:not([data-calm="1"]) .orb-core { animation: orb 4s ease-in-out infinite; }
  html:not([data-calm="1"]) .voice-mode[data-state="listening"] .orb-ring { animation: ring 1.6s ease-out infinite; }
  html:not([data-calm="1"]) .voice-mode[data-state="speaking"] .orb-core { animation-duration: 1.2s; }
  html:not([data-calm="1"]) .voice-mode[data-state="thinking"] .orb-core { animation: orbspin 2.4s linear infinite; }
}
@keyframes orb { 50% { transform: scale(1.06); } }
@keyframes ring { from { transform: scale(.92); opacity: .9; } to { transform: scale(1.18); opacity: 0; } }
@keyframes orbspin { to { transform: rotate(360deg); } }

/* voice mode */
.voice-mode { position: fixed; inset: 0; z-index: 72; display: grid; align-content: start; justify-items: center; gap: 16px; text-align: center; overflow-y: auto;
  padding: calc(14px + env(safe-area-inset-top)) 20px calc(20px + env(safe-area-inset-bottom));
  background: radial-gradient(circle at 50% 30%, #0f2d52, #061a40 55%, #030b1c); color: #eaf6ff; }
.vm-top { width: min(100%, 640px); display: flex; justify-content: space-between; align-items: center; }
.vm-top .icon-btn { color: #fff; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.06); }
.voice-mode .wolf-orb { margin-top: 4vh; }
.vm-state { margin: 0; font-size: var(--t-l); font-weight: 700; color: #8be9ff; min-height: 1.5em; }
.vm-you { margin: 0; font-size: var(--t-m); color: #b8cbe4; max-width: 36ch; min-height: 1.4em; }
.vm-wolf { margin: 0; font-size: clamp(1.2rem, 4.6vw, 1.6rem); font-weight: 600; max-width: 32ch; line-height: 1.5; }
#vm-avatar { width: min(60vw, 240px); height: auto; border-radius: 18px; background: rgba(255,255,255,.06); }
.vm-controls { display: flex; gap: 14px; margin-top: auto; padding-top: 10px; }
.vm-btn { display: grid; justify-items: center; gap: 6px; min-width: 88px; padding: 12px 10px; border-radius: 22px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; font: inherit; font-size: var(--t-s); cursor: pointer; }
.vm-btn svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vm-btn[aria-pressed="true"] { background: #fff; color: #061a40; }
.vm-btn.end { background: #c81e36; border-color: #c81e36; }

/* the floating Wolf button: on every screen, thumb-reachable; drag it anywhere along the side */
.wolf-fab { --tc: var(--c-wolf); position: fixed; z-index: 25; inset-inline-end: 14px; inset-block-end: calc(var(--nav-h) + 22px + env(safe-area-inset-bottom)); width: 64px; height: 64px; border-radius: 50%;
  border: 2px solid color-mix(in oklab, var(--c-wolf) 70%, #fff); padding: 8px; cursor: pointer; touch-action: none; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #13406e, #061a40); box-shadow: 0 8px 28px rgba(0,0,0,.4), 0 0 0 4px color-mix(in oklab, var(--c-wolf) 18%, transparent); }
.wolf-fab.dragging { transition: none; opacity: .9; }
.wolf-fab .aw-mark { width: 100%; height: 100%; } .wolf-fab .fab-fallback { width: 120%; height: 120%; }
.fab-ring { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid color-mix(in oklab, var(--c-wolf) 45%, transparent); pointer-events: none; }
.wolf-fab.holding .fab-ring { border-color: var(--sos); }
.wolf-fab:focus-visible { outline: 4px solid var(--focus); outline-offset: 4px; }
html[data-kb="1"] .wolf-fab, html[data-touchpad="1"] .wolf-fab { display: none; }
@media (min-width: 900px) and (min-height: 560px) { .wolf-fab { inset-block-end: 22px; } }
/* scrolling screens end with room for the button, so it never hides the last item */
body.signed-in .panel, .chat-scroll { padding-block-end: 88px; }
.chat-scroll { padding-block-end: 16px; }

/* ---------- caption bar: everything the app says out loud is also shown (deaf and hard-of-hearing users) ---------- */
.say-caption { position: fixed; z-index: 30; inset-inline: 12px; inset-block-end: calc(var(--nav-h) + 18px + env(safe-area-inset-bottom)); max-width: 720px; margin-inline: auto;
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 16px; background: #08111f; color: #fff; border: 2px solid var(--c-wolf); font-size: var(--t-m); line-height: 1.45; pointer-events: none; }
.say-caption svg { width: 22px; height: 22px; flex: none; margin-top: 2px; fill: none; stroke: var(--c-wolf); stroke-width: 2; stroke-linecap: round; }
@media (min-width: 900px) and (min-height: 560px) { .say-caption { inset-block-end: 16px; inset-inline-start: calc(var(--rail-w, 0px) + 16px); } }
.auth-quick { display: grid; gap: 8px; }
.auth-pk { width: 100%; background: var(--c-wolf); color: var(--on-ch); border-color: var(--c-wolf); }
.auth-voice { width: 100%; }
.auth-pk svg, .auth-voice svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.auth-or { text-align: center; margin: 0; }
.pk-set .plain-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
html[data-need-epilepsy="1"] .qa[data-hub="seizure"], html[data-need-anxiety="1"] .qa[data-hub="calm"] { order: -1; border-color: var(--ch); }
.hub-quick .qa { order: 0; }
.hub-quick .qa.sos { order: -2; }

/* ---------- picture library (opens in place of the board; the sentence bar and side buttons stay put) ---------- */
.library { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 8px; min-height: 0; min-width: 0; }
.library[hidden] { display: none; }
.lib-head { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.lib-head h2 { margin: 0; font-size: var(--t-l); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lib-count { color: var(--mute); font-size: var(--t-s); white-space: nowrap; }
.lib-edit[aria-pressed="true"] { background: var(--ch, var(--c-talk)); color: var(--on-ch); border-color: transparent; }
.lib-search { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 14px; border-radius: var(--r-pill); border: 2px solid var(--line-strong); background: var(--raised); }
.lib-search:focus-within { border-color: var(--focus); }
.lib-search > svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--mute); stroke-width: 2.2; stroke-linecap: round; }
.lib-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: var(--t-m); min-height: 44px; outline: none; }
.lib-ai { min-height: 40px; padding: 0 12px; border-radius: var(--r-pill); display: inline-flex; gap: 6px; align-items: center; font-size: var(--t-s); }
.lib-ai svg, .btn.fix svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.lib-grid { display: grid; gap: 8px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; align-content: start; padding: 2px 2px 12px; }
.lib-grid.cats { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.lib-grid.syms { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.lib-grid.syms.big { grid-template-columns: repeat(auto-fill, minmax(min(150px, 44%), 1fr)); gap: 12px; }
.lib-cat { position: relative; display: grid; grid-template-rows: 56px auto; justify-items: center; align-content: center; gap: 6px; padding: 10px 6px; min-height: 120px;
  border-radius: 18px; border: 2px solid var(--line-strong); background: var(--raised); color: var(--ink); cursor: pointer; font: inherit; }
.lib-cat img { width: 56px; height: 56px; object-fit: contain; background: #fff; border-radius: 14px; padding: 4px; }
.lib-cat b { font-size: var(--t-s); line-height: 1.2; text-align: center; }
.lib-cat small { position: absolute; inset-block-start: 6px; inset-inline-end: 8px; font-size: .7rem; color: var(--mute); font-weight: 600; }
.lib-cat.guide { border-color: var(--c-wolf); background: color-mix(in oklab, var(--c-wolf) 18%, var(--raised)); }
.lib-cat.mine { border-color: var(--c-day); background: color-mix(in oklab, var(--c-day) 16%, var(--raised)); }
.lib-tile { display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; gap: 2px; aspect-ratio: 1 / 1.1; padding: 6px 4px 4px; min-width: 0;
  border-radius: 14px; border: 2px solid #c9d2e3; background: #fff; color: #0b1f3a; cursor: pointer; font: inherit; }
.lib-tile img { width: 100%; height: 100%; min-height: 0; object-fit: contain; pointer-events: none; }
.lib-tile .lab { font-weight: 700; font-size: .92rem; line-height: 1.15; text-align: center; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lib-tile.big { border-width: 3px; border-radius: 20px; }
.lib-tile.big .lab { font-size: 1.15rem; }
.guide .guide-tile { border-color: var(--c-wolf); }
.lib-tile.hit { animation: libhit .35s ease-out; }
@keyframes libhit { 40% { transform: scale(.94); border-color: var(--c-talk); } }
.library.editing .lib-tile { border-style: dashed; border-color: var(--c-day); }
.lib-more { grid-column: 1 / -1; justify-self: center; }
.side-btn[aria-pressed="true"] { background: color-mix(in oklab, var(--c-talk) 30%, var(--raised)); border-color: var(--c-talk); }
.side-btn.wolf img { width: 30px; height: 30px; }
.side-btn.sos { position: sticky; inset-block-end: 0; }
/* picture predictions: a picture + word, big enough to tap */
.predict-chip.pic { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 4px; border-style: solid; }
.predict-chip.pic img { width: 40px; height: 40px; object-fit: contain; background: #fff; border-radius: 10px; }
.predict { min-height: 54px; }
.strip .fixed { margin: 0; padding: 8px 14px; border-radius: 14px; background: color-mix(in oklab, var(--c-wolf) 20%, var(--raised)); border: 1px solid var(--c-wolf); font-weight: 700; font-size: var(--t-m); flex: none; white-space: nowrap; }
.btn.fix.busy { opacity: .6; pointer-events: none; }
.symopt .pic-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin: 8px 0 14px; }
.pic-opt { aspect-ratio: 1; padding: 6px; border-radius: 14px; border: 3px solid #c9d2e3; background: #fff; cursor: pointer; }
.pic-opt img { width: 100%; height: 100%; object-fit: contain; }
.pic-opt[aria-pressed="true"] { border-color: var(--c-talk); box-shadow: 0 0 0 3px color-mix(in oklab, var(--c-talk) 40%, transparent); }
@media (prefers-reduced-motion: reduce) { .lib-tile.hit { animation: none; } }
html[data-calm="1"] .lib-tile.hit { animation: none; }
#lib-title:focus:not(:focus-visible) { outline: none; }

.lib-credit { margin: 0; font-size: .72rem; color: var(--mute); text-align: center; }
.lib-credit a { color: inherit; }
.library:not([data-view="cats"]) .lib-credit { display: none; }
@media (max-width: 520px) { .lib-ai span { display: none; } .lib-ai { padding: 0 10px; } }

/* AlphaWolf ID sign-in and the subscribe screen */
.auth-wolfid { display: grid; gap: 10px; }
.auth-wolfid .btn { text-decoration: none; justify-content: center; }
.wid-mark { width: 26px; height: 26px; }
#screen-auth.wolfid .auth-or { display: none; }
.subscribe { display: grid; place-items: center; min-height: 100dvh; padding: 20px; }
.sub-card { display: grid; gap: 12px; justify-items: center; text-align: center; max-width: 440px; }
.sub-card .brand-mark { width: 72px; height: 72px; }
.sub-card .btn { width: 100%; justify-content: center; text-decoration: none; }
.sub-price { font-weight: 700; font-size: var(--t-l); margin: 0; }
.plan-note { margin: 4px 0 0; font-size: var(--t-s); color: var(--mute); }