/* Haven design language (DESIGN.md) as tokens. Every Haven page includes this first.
   Themes, label mode, motion and target size are set on <html> by shell.js from the person's
   effective settings: data-theme, data-labels, data-motion, --h-target. */

@font-face { font-family: 'Haven Sans'; src: local('Atkinson Hyperlegible'), local('AtkinsonHyperlegible-Regular'); }

:root, :root[data-theme="calm-light"] {
  --h-bg: #F4EFE6; --h-surface: #FFFFFF; --h-surface-2: #EBE4D8; --h-text: #2B2620; --h-muted: #6B6258;
  --h-accent: #3F6E9E; --h-on-accent: #FFFFFF; --h-border: #DDD3C3; --h-focus: #3F6E9E;
  --h-cat-1: #E4D3B4; --h-cat-2: #B9CBD9; --h-cat-3: #C9D7BF; --h-cat-4: #D9C2C6;
  --h-cat-5: #CFC6DA; --h-cat-6: #D8D2C4; --h-cat-7: #C5D6D3; --h-cat-8: #E1CDB9;
}
:root[data-theme="calm-dark"] {
  --h-bg: #1D1B19; --h-surface: #2A2724; --h-surface-2: #34302C; --h-text: #F1EBE2; --h-muted: #B3A897;
  --h-accent: #7FA6CF; --h-on-accent: #1D1B19; --h-border: #45403A; --h-focus: #7FA6CF;
  --h-cat-1: #5A4E3B; --h-cat-2: #3E4E5C; --h-cat-3: #45523F; --h-cat-4: #5A4448;
  --h-cat-5: #4B4458; --h-cat-6: #4A463E; --h-cat-7: #3F504D; --h-cat-8: #574738;
}
:root[data-theme="low-stim"] {
  --h-bg: #E6E4E0; --h-surface: #EFEEEB; --h-surface-2: #DEDCD8; --h-text: #3A3936; --h-muted: #6E6C67;
  --h-accent: #6F7F8C; --h-on-accent: #FFFFFF; --h-border: #D2D0CB; --h-focus: #4F5F6C;
  --h-cat-1: #D6D1C8; --h-cat-2: #C9CED2; --h-cat-3: #CCD0C8; --h-cat-4: #D3CBCC;
  --h-cat-5: #CFCBD3; --h-cat-6: #D3D0CA; --h-cat-7: #C9D0CE; --h-cat-8: #D4CDC5;
}
:root[data-theme="high-contrast"] {
  --h-bg: #000000; --h-surface: #111111; --h-surface-2: #1E1E1E; --h-text: #FFFFFF; --h-muted: #E0E0E0;
  --h-accent: #FFD400; --h-on-accent: #000000; --h-border: #FFFFFF; --h-focus: #FFD400;
  --h-cat-1: #111111; --h-cat-2: #111111; --h-cat-3: #111111; --h-cat-4: #111111;
  --h-cat-5: #111111; --h-cat-6: #111111; --h-cat-7: #111111; --h-cat-8: #111111;
}

:root { --h-target: 96px; --h-radius: 22px; --h-bar: calc(var(--h-target) + 32px); --h-strip: 88px; }
/* An app window on a desktop: no Haven bar (pages/shell.js). */
body.h-app { --h-bar: 0px; }
body.h-side { --h-bar: 0px; } /* the bar is in its own strip (lib/strip.js) */
body.h-side .h-bar { display: none; }

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--h-bg); color: var(--h-text);
  font: 20px/1.35 'Haven Sans', 'Atkinson Hyperlegible', system-ui, sans-serif; }
body.haven { padding: calc(var(--h-strip) + 24px) 32px 40px calc(var(--h-bar) + 16px); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 4px solid var(--h-focus); outline-offset: 3px; }
[hidden] { display: none !important; }

/* Motion is off unless the person's settings allow it (DESIGN 4). */
:root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Labels: none (Pictures), with pictures (Simple), text (Calm Desktop). */
:root[data-labels="none"] .h-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- The Haven bar: always the left edge, same order everywhere ---------- */
.h-bar { position: fixed; z-index: 50; left: 0; top: 0; bottom: 0; width: var(--h-bar);
  display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 24px 0;
  background: var(--h-surface-2); border-right: 2px solid var(--h-border); }
.h-bar-btn { width: var(--h-target); height: var(--h-target); border-radius: 50%; border: 3px solid var(--h-border);
  background: var(--h-surface); display: grid; place-items: center; cursor: pointer; padding: 0; position: relative; }
.h-bar-btn svg { width: 52%; height: 52%; }
.h-bar-btn.primary { background: var(--h-accent); border-color: var(--h-accent); color: var(--h-on-accent); }
.h-bar-btn .h-label { position: absolute; top: 100%; font-size: 15px; margin-top: 2px; white-space: nowrap; color: var(--h-text); }
:root[data-labels="text"] .h-bar-btn, :root[data-labels="with-pictures"] .h-bar-btn { margin-bottom: 18px; }
.h-bar .h-spacer { flex: 1; }
.h-hold { position: absolute; inset: -6px; border-radius: 50%; border: 6px solid transparent; pointer-events: none; }
.h-hold.on { border-color: var(--h-accent); }

/* ---------- What's next strip: always the top ---------- */
.h-strip { position: fixed; z-index: 40; top: 0; left: var(--h-bar); right: 0; height: var(--h-strip);
  display: flex; align-items: center; gap: 20px; padding: 0 24px; background: var(--h-surface);
  border-bottom: 2px solid var(--h-border); }
.h-strip .h-now, .h-strip .h-next { display: flex; align-items: center; gap: 12px; }
.h-strip .h-pic { width: 60px; height: 60px; border-radius: 14px; display: grid; place-items: center; }
.h-strip .h-pic svg { width: 64%; height: 64%; }
.h-strip .h-arrow svg { width: 34px; height: 34px; opacity: .7; }
.h-strip .h-ring { width: 64px; height: 64px; margin-left: auto; }
.h-strip .h-changed { width: 56px; height: 56px; border-radius: 50%; border: 3px solid var(--h-accent);
  background: var(--h-surface); display: grid; place-items: center; cursor: pointer; padding: 0; }
.h-strip .h-changed svg { width: 55%; height: 55%; }
/* Ask Haven: a picture and the word, so it reads as "help" for everyone. */
.h-strip .h-ask { width: auto; border-radius: 28px; padding: 0 18px 0 10px; display: inline-flex; align-items: center; gap: 8px; font-size: 19px; }
.h-strip .h-ask svg { width: 34px; height: 34px; }
:root[data-labels="none"] .h-strip .h-ask .h-label { position: static; width: auto; height: auto; clip: auto; }
.h-strip.warning { background: var(--h-surface-2); }
.h-strip .h-review { width: auto; padding: 0 16px; border-radius: 28px; gap: 8px; display: flex; align-items: center; }
.h-strip .h-review svg { width: 30px; height: 30px; }
:root[data-labels="none"] .h-strip .h-review .h-label { position: static; width: auto; height: auto; clip: auto; }

/* Remote help on: a pill in the accent colour so it's noticed, always with words. */
.h-strip .h-remote { height: 56px; padding: 0 18px; border-radius: 28px; gap: 8px; display: flex; align-items: center;
  border: 3px solid var(--h-accent); background: var(--h-accent); color: var(--h-on-accent); cursor: pointer; }
.h-strip .h-remote svg { width: 30px; height: 30px; }
.h-strip .h-remote .h-label { position: static; width: auto; height: auto; clip: auto; color: var(--h-on-accent); }

/* Talking status (lib/kit.js): words always shown, for the people nearby. */
.h-strip .h-talkstatus { height: 56px; padding: 0 18px; border-radius: 28px; display: flex; align-items: center; gap: 10px;
  border: 3px solid var(--h-border); background: var(--h-surface); cursor: pointer; font-size: 19px; }
.h-strip .h-talkstatus .dot { width: 20px; height: 20px; border-radius: 50%; }
.h-strip .h-talkstatus.amber .dot { background: #c9902e; } .h-strip .h-talkstatus.red .dot { background: #b5473f; }
.h-strip .h-talkstatus .h-label { position: static; width: auto; height: auto; clip: auto; }

/* Evening wind-down: a warm dim layer over everything. Opacity is set by shell.js. */
.h-dim { position: fixed; inset: 0; z-index: 100; pointer-events: none; background: #2a1a08; opacity: 0; }

/* ---------- Tiles ---------- */
.h-tiles { display: grid; gap: 28px; grid-template-columns: repeat(auto-fill, minmax(calc(var(--h-target) * 2.6), 1fr)); }
.h-tile { position: relative; aspect-ratio: 4 / 3; border-radius: var(--h-radius); border: 3px solid var(--h-border);
  background: var(--h-cat, var(--h-surface)); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; cursor: pointer; padding: 14px; }
/* The picture and its word are one group, so the word never runs into the picture on small tiles. */
.h-tile svg { width: 40%; max-height: 55%; aspect-ratio: 1; flex: none; }
.h-tile .h-label { position: static; text-align: center; line-height: 1.15; font-size: clamp(19px, calc(var(--h-target) * 0.27), 24px); }
.h-tile:hover { border-color: var(--h-accent); }

/* ---------- Generic big button ---------- */
.h-btn { min-height: var(--h-target); min-width: var(--h-target); border-radius: var(--h-radius);
  border: 3px solid var(--h-border); background: var(--h-surface); cursor: pointer; padding: 12px 22px;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; }
.h-btn svg { width: 44px; height: 44px; }
.h-btn.primary { background: var(--h-accent); color: var(--h-on-accent); border-color: var(--h-accent); }

/* High contrast: outlines carry structure instead of fills. */
:root[data-theme="high-contrast"] .h-tile, :root[data-theme="high-contrast"] .h-bar-btn { border-width: 4px; }

/* The person's warm screen (settings.display.warm): a soft amber layer instead of grey. */
.h-dim.warm { background: #6b3a00; }
.h-strip .h-battery { font-size: 19px; padding: 8px 14px; border-radius: 20px; border: 3px solid var(--h-border); background: var(--h-surface); }

/* Turning off (Home): a quiet button, and a calm card. */
.h-power-btn { position: fixed; right: 22px; bottom: 22px; min-height: 0; padding: 12px 18px; gap: 10px; font-size: 18px; }
.h-power-btn svg { width: 30px; height: 30px; }
:root[data-labels="none"] .h-power-btn .h-label { position: static; width: auto; height: auto; clip: auto; }
.h-power-back { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .4); display: grid; place-items: center; }
.h-power { width: min(720px, 92vw); display: flex; flex-direction: column; gap: 16px; padding: 26px; border-radius: var(--h-radius);
  background: var(--h-bg); color: var(--h-text); border: 3px solid var(--h-border); font-size: 21px; }
.h-power h2 { margin: 0; font-size: 28px; }
.h-power-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* Who is using Haven (several people on one computer). */
.h-strip .h-who { width: auto; border-radius: 28px; padding: 0 16px 0 6px; display: inline-flex; align-items: center; gap: 8px; font-size: 18px; }
.h-strip .h-who svg { width: 32px; height: 32px; }
.h-who-pic { width: 42px; height: 42px; border-radius: 50%; background: center / cover no-repeat; }
:root[data-labels="none"] .h-strip .h-who .h-label { position: static; width: auto; height: auto; clip: auto; }


/* A reminder that is due: one calm card under the strip, until Done or "In 10 minutes". */
.h-reminder { position: fixed; z-index: 70; top: calc(var(--h-strip) + 16px); left: 50%; translate: -50% 0; width: min(760px, 92vw);
  display: grid; grid-template-columns: 72px 1fr; gap: 14px 20px; align-items: center; padding: 22px 24px; border-radius: var(--h-radius);
  background: var(--h-surface); color: var(--h-text); border: 4px solid var(--h-accent); box-shadow: 0 8px 30px rgba(0,0,0,.18); }
.h-reminder > svg { width: 72px; height: 72px; color: var(--h-accent); }
.h-reminder-text { margin: 0; font-size: 28px; font-weight: 700; }
.h-reminder-row { grid-column: 1 / -1; display: flex; gap: 12px; flex-wrap: wrap; }

/* Screen time: what is left (in the strip), and a calm end card over the page (not the Haven bar). */
.h-strip .h-time-left { font-size: 19px; padding: 8px 14px; border-radius: 20px; border: 3px solid var(--h-accent); background: var(--h-surface); }
.h-finished { position: fixed; z-index: 60; inset: var(--h-strip) 0 0 var(--h-bar, 120px); background: var(--h-bg); display: grid; place-items: center; }
.h-finished-box { max-width: 760px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding: 30px; }
.h-finished-box > svg { width: 110px; height: 110px; color: var(--h-accent); }
.h-finished-box h2 { margin: 0; font-size: 32px; }
.h-finished-box p { margin: 0; font-size: 22px; }
.h-finished-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* "Send it to someone?" (lib/share.js): trusted contacts as big picture buttons. */
.h-send { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.h-send h2 { margin: 0; font-size: 24px; }
.h-send-people { display: flex; gap: 10px; flex-wrap: wrap; }
.h-send-person { display: flex; align-items: center; gap: 12px; min-height: var(--h-target); padding: 8px 18px 8px 8px; border-radius: 16px;
  border: 3px solid var(--h-border); background: var(--h-surface); color: var(--h-text); font: inherit; font-size: 20px; cursor: pointer; }
.h-send-person .avatar { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 700;
  background: var(--h-accent) center / cover no-repeat; }

/* Chosen is unmistakable everywhere, never colour alone (DESIGN 1): a tick, a thick edge, bold.
   Choice cards (setup and elsewhere) carry a round mark: empty when not chosen, ticked when chosen. */
:root .choice[aria-pressed="true"], :root .fav-chip[aria-pressed="true"] {
  border-color: var(--h-accent); border-width: 4px; font-weight: 700;
  background: color-mix(in srgb, var(--h-accent) 14%, var(--h-surface)); }
:root .choice[aria-pressed="true"]::before, :root .fav-chip[aria-pressed="true"]::before {
  content: "✓"; margin-right: 8px; font-weight: 700; color: var(--h-accent); }
:root .card[aria-pressed] { position: relative; padding-right: 72px; }
:root .card[aria-pressed]::after {
  content: ""; position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border-radius: 50%;
  border: 3px solid var(--h-border); background: var(--h-surface); display: grid; place-items: center;
  font-size: 26px; font-weight: 700; line-height: 1; }
:root .card[aria-pressed="true"] {
  border-color: var(--h-accent); border-width: 4px;
  background: color-mix(in srgb, var(--h-accent) 12%, var(--h-surface)); }
:root .card[aria-pressed="true"]::after { content: "✓"; background: var(--h-accent); border-color: var(--h-accent); color: var(--h-on-accent); }

/* Haven's question cards (lib/dialog.js), instead of the browser's pop-ups. */
.h-dialog-back { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, .45); display: grid; place-items: center; }
.h-dialog { width: min(820px, calc(100vw - 48px)); max-height: 90vh; overflow: auto; display: flex; flex-direction: column; gap: 18px;
  padding: 28px; border-radius: 24px; border: 3px solid var(--h-border); background: var(--h-surface); color: var(--h-text); }
.h-dialog-text { margin: 0; font-size: 26px; line-height: 1.4; white-space: pre-line; }
.h-dialog-row { display: flex; gap: 14px; flex-wrap: wrap; }
.h-dialog-input { font: inherit; font-size: 26px; padding: 14px 18px; border-radius: 16px; border: 3px solid var(--h-border); background: var(--h-bg); color: var(--h-text); }
.h-dialog-input:focus { border-color: var(--h-accent); outline: none; }
.h-osk { display: grid; gap: 8px; }
.h-osk > div { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.h-osk .h-btn { min-width: 60px; min-height: 60px; padding: 0 12px; justify-content: center; }

/* Read along (lib/readalong.js): the sentence being read is highlighted. */
.h-readalong h2 { margin: 0; font-size: 26px; }
.h-readalong-text { font-size: 28px; line-height: 1.6; max-height: 60vh; overflow: auto; }
.h-readalong-text .now { background: color-mix(in srgb, var(--h-accent) 25%, transparent); border-radius: 6px; box-decoration-break: clone; }
/* Reading ruler (settings.display.ruler): a clear band follows the pointer; the rest is dimmed. */
.h-ruler { position: fixed; left: 0; right: 0; z-index: 150; pointer-events: none; background: rgba(0, 0, 0, .35); }