/* One look for every page, plus the comfort settings (dist/comfort.js sets the data- attributes on
   <html>). Loaded after each page's own stylesheet so these tokens win. Atkinson Hyperlegible is
   designed for legibility (Braille Institute, SIL Open Font License, dist/fonts/). */
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('fonts/atkinson-hyperlegible-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('fonts/atkinson-hyperlegible-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root:root {
  --ink: #1b2421;
  --green: #145c5f;
  --muted: #4f5b56;
  --line: #d9ded8;
  --lime: #e2eeed;
  --cream: #f3f4f0;
  --paper: #f3f4f0;
  --soft: #eef2ee;
  --orange: #8a4a0e;
  --amber-soft: #faeedf;
  --ui-font: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-family: var(--ui-font);
  background: #fff;
}
html body {
  font-family: var(--ui-font);
  background: var(--cream);
  color: var(--ink);
}
html body :is(button, input, select, textarea) {
  font-family: inherit;
}
html body :is(h1, h2, h3, .brand) {
  font-family: var(--ui-font);
  letter-spacing: -0.01em;
}

/* Text size. zoom scales px-based layouts as well as text. */
html[data-text='s'] body {
  zoom: 0.92;
}
html[data-text='l'] body {
  zoom: 1.12;
}
html[data-text='xl'] body {
  zoom: 1.25;
}

/* Calm and dark colours. Each stylesheet has a generated <name>.themes.css (scripts/build-themes.cjs)
   that re-colours its rules; these are the shared tokens for each theme. */
:root:root[data-theme='calm'] {
  --ink: #2c3431;
  --green: #4a6e6c;
  --muted: #5b6662;
  --line: #dcdfdb;
  --lime: #e6ecea;
  --cream: #eeefeb;
  --paper: #eeefeb;
  --soft: #eaedea;
  --orange: #85664a;
  --amber-soft: #f4ede4;
}
:root:root[data-theme='dark'] {
  --ink: #e4ebe8;
  --green: #7cc3be;
  --muted: #a7b3ae;
  --line: #34403c;
  --lime: #1e3a39;
  --cream: #111715;
  --paper: #111715;
  --soft: #1a2320;
  --orange: #eda766;
  --amber-soft: #382a1b;
  background: #0d1210;
  color-scheme: dark;
}
:root:root[data-theme='dark'] :is(img, video, picture) {
  filter: brightness(0.9);
}

/* Reduce motion: no animated transitions or smooth scrolling anywhere. Step-by-step animations
   still advance when Next is pressed. */
html[data-motion='reduce'] *,
html[data-motion='reduce'] *::before,
html[data-motion='reduce'] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

/* Header: the comfort settings link sits beside the menu on every page. */
.comfort-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
  white-space: nowrap;
}
.comfort-link:hover {
  border-color: var(--green);
}
.comfort-link[aria-current='page'] {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

/* One-thing-at-a-time: during a session the menu and side panels step back. */
html[data-session][data-focus='on'] .site-nav,
html[data-session][data-focus='on'] .comfort-link,
html[data-session][data-focus='on'] .focus-hide {
  display: none !important;
}

/* The session bar (dist/session.js). */
.session-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 10px max(16px, calc((100vw - 1240px) / 2));
  background: #fff;
  border-bottom: 2px solid var(--green);
  font-size: 0.95rem;
}
.session-bar strong {
  margin-right: auto;
}
.session-steps {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.session-steps li {
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.85rem;
}
.session-steps li.done {
  background: var(--lime);
  border-color: var(--lime);
  color: var(--green);
  font-weight: 700;
}
.session-steps li[aria-current='step'] {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  font-weight: 700;
}
.session-bar button,
.session-bar a.session-action {
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.session-bar .session-next {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}
.session-time {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.session-nudge {
  flex-basis: 100%;
  margin: 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--amber-soft);
}
.session-nudge[hidden] {
  display: none;
}

/* Between parts: what comes next, before it changes. */
.session-gate {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(27, 36, 33, 0.45);
}
.session-gate > div {
  max-width: 520px;
  padding: 28px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
.session-gate h2 {
  margin: 0 0 8px;
}
.session-gate .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

/* "Talk it through" stays in the same corner on every page that has it. */
.talk-fab {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 20px;
  border: 0;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font: inherit;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(20, 92, 95, 0.3);
  cursor: pointer;
}
.talk-fab[hidden] {
  display: none;
}
body.has-math-keys .talk-fab {
  bottom: max(96px, calc(env(safe-area-inset-bottom) + 96px));
}

/* "More" menus that hold the less-used actions. */
.more-menu {
  position: relative;
  display: inline-block;
}
.more-menu > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.more-menu > summary::-webkit-details-marker {
  display: none;
}
.more-menu[open] > div {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}
.more-menu[open] > div > * {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
}

/* Tabs shared by My notes and the trouble sheet. */
.notes-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--line);
}
.notes-tabs a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 0 16px;
  border-bottom: 3px solid transparent;
  font-weight: 700;
  text-decoration: none;
  color: var(--muted);
}
.notes-tabs a[aria-current='page'] {
  color: var(--green);
  border-bottom-color: var(--green);
}

@media print {
  .session-bar,
  .talk-fab,
  .comfort-link,
  .session-gate {
    display: none !important;
  }
}