@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/assets/fonts/fraunces/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Fraunces';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/assets/fonts/fraunces/fraunces-latin.woff2') format('woff2');
  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;
}

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/lora/lora-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/lora/lora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/lora/lora-latin.woff2') format('woff2');
  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;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/inter/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/inter/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, 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: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/inter/inter-latin.woff2') format('woff2');
  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;
}

/* ==========================================================================
   Neuro Design Tokens
   Warm · Gentle · Sensory-friendly
   Source of truth for Tailwind utilities and Ionic theme overrides.
   ========================================================================== */

:root {
  /* See the note in index.html: no dark palette exists yet. */
  color-scheme: light;

  /* ---- COLOR · Sage (primary ramp) ---- */
  --sage-50:  oklch(97% 0.012 155);
  --sage-100: oklch(94% 0.020 155);
  --sage-200: oklch(88% 0.035 155);
  --sage-300: oklch(80% 0.050 155);
  --sage-400: oklch(72% 0.058 155);
  --sage-500: oklch(62% 0.062 155); /* primary */
  --sage-600: oklch(54% 0.058 155);
  --sage-700: oklch(45% 0.050 155);
  --sage-800: oklch(36% 0.040 155);
  --sage-900: oklch(28% 0.030 155);

  /* ---- COLOR · Clay (secondary ramp) ---- */
  --clay-50:  oklch(97% 0.015 55);
  --clay-100: oklch(94% 0.028 55);
  --clay-200: oklch(88% 0.050 55);
  --clay-300: oklch(80% 0.075 55);
  --clay-400: oklch(74% 0.090 55);
  --clay-500: oklch(68% 0.100 55); /* secondary */
  --clay-600: oklch(60% 0.095 55);
  --clay-700: oklch(50% 0.082 55);
  --clay-800: oklch(40% 0.065 55);
  --clay-900: oklch(30% 0.045 55);

  /* ---- COLOR · Warm neutrals ---- */
  --neutral-0:   oklch(100% 0 0);
  --neutral-50:  oklch(98.5% 0.003 120);
  --neutral-100: oklch(96.5% 0.004 120);
  --neutral-200: oklch(93% 0.006 120);
  --neutral-300: oklch(88% 0.007 120);
  --neutral-400: oklch(78% 0.008 120);
  --neutral-500: oklch(62% 0.008 120);
  --neutral-600: oklch(48% 0.008 120);
  --neutral-700: oklch(36% 0.007 120);
  --neutral-800: oklch(25% 0.006 120);
  --neutral-900: oklch(17% 0.005 120);

  /* ---- COLOR · Semantic surfaces ---- */
  --bg-canvas:  var(--neutral-50);
  --bg-surface: var(--neutral-0);
  --bg-sunken:  var(--neutral-100);
  --bg-raised:  var(--neutral-0);
  --bg-overlay: color-mix(in oklch, var(--neutral-900) 40%, transparent);
  /* Launch / loading screen. Deliberately dark while the light app is still
     deciding what to show, so nothing flashes a half-built UI at the user. */
  --bg-brand:   var(--neutral-900);
  --brand-mark: var(--sage-300);
  --brand-halo: color-mix(in oklch, var(--sage-500) 26%, transparent);

  /* ---- COLOR · Semantic ink ---- */
  --ink-strong:   var(--neutral-900);
  --ink-base:     var(--neutral-800);
  --ink-muted:    var(--neutral-600);
  --ink-subtle:   var(--neutral-500);
  --ink-faint:    var(--neutral-400);
  --ink-oninvert: var(--neutral-0);

  /* ---- COLOR · Borders ---- */
  --border-subtle: var(--neutral-200);
  --border-base:   var(--neutral-300);
  --border-strong: var(--neutral-400);
  --border-focus:  var(--sage-500);
  /* The only visible edge of a control, such as an unticked checkbox: 3:1 or more against
     the canvas and a surface (WCAG 1.4.11), which none of the three above reach. */
  --border-control: var(--neutral-500);

  /* ---- COLOR · Primary semantic ---- */
  --primary:         var(--sage-500);
  --primary-hover:   var(--sage-600);
  --primary-pressed: var(--sage-700);
  --primary-subtle:  var(--sage-100);
  --primary-soft:    var(--sage-50);
  --primary-onfill:  var(--neutral-0);

  /* ---- COLOR · Mood (5-point scale) ---- */
  --mood-tough:     oklch(62% 0.11 25);
  --mood-uneasy:    oklch(72% 0.10 55);
  --mood-okay:      oklch(78% 0.08 85);
  --mood-good:      oklch(72% 0.07 140);
  --mood-great:     oklch(68% 0.09 165);
  --mood-tough-bg:  oklch(96% 0.020 25);
  --mood-uneasy-bg: oklch(96% 0.022 55);
  --mood-okay-bg:   oklch(97% 0.020 85);
  --mood-good-bg:   oklch(96% 0.018 140);
  --mood-great-bg:  oklch(95% 0.022 165);

  /* ---- COLOR · Severity (1 calm → 5 intense) ----
     Base = fills and indicators only. It runs 60–78% lightness, so as text on
     its own tint it lands near 1.6:1 — well under the 4.5:1 AA floor.
     Any numeral or label uses the -ink variant instead. */
  --severity-1: oklch(78% 0.06 165);
  --severity-2: oklch(76% 0.08 110);
  --severity-3: oklch(76% 0.10 75);
  --severity-4: oklch(70% 0.11 45);
  --severity-5: oklch(60% 0.13 25);

  --severity-1-bg: oklch(96% 0.018 165);
  --severity-2-bg: oklch(96% 0.020 110);
  --severity-3-bg: oklch(97% 0.020 75);
  --severity-4-bg: oklch(96% 0.022 45);
  --severity-5-bg: oklch(96% 0.025 25); /* same value as --error-bg; kept separate — severity 5 is not an error */

  --severity-1-ink: oklch(45% 0.07 165);
  --severity-2-ink: oklch(45% 0.08 110);
  --severity-3-ink: oklch(45% 0.09 75);
  --severity-4-ink: oklch(45% 0.10 45);
  --severity-5-ink: oklch(45% 0.12 25);

  /* ---- COLOR · Status ---- */
  --success:    oklch(62% 0.10 155);
  --success-bg: oklch(96% 0.025 155);
  --warning:    oklch(70% 0.12 75);
  --warning-bg: oklch(96% 0.030 75);
  --error:      oklch(60% 0.14 25);
  --error-bg:   oklch(96% 0.025 25);
  --info:       oklch(62% 0.08 230);
  --info-bg:    oklch(96% 0.020 230);

  /* ---- TYPE · Families ---- */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino', Georgia, serif;
  --font-ui:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- TYPE · Scale (size + line-height ratio) ---- */
  --text-display-xl: 52px;  --lh-display-xl: 1;
  --text-display-lg: 40px;  --lh-display-lg: 1.05;
  --text-display:    32px;  --lh-display:    1.1;
  --text-h1:         28px;  --lh-h1:         1.15;
  --text-h2:         22px;  --lh-h2:         1.2;
  --text-h3:         18px;  --lh-h3:         1.3;
  --text-body-xl:    20px;  --lh-body-xl:    1.5;
  --text-body-lg:    16px;  --lh-body-lg:    1.55;
  --text-body:       15px;  --lh-body:       1.5;
  --text-body-sm:    14px;  --lh-body-sm:    1.5;
  --text-body-xs:    13px;  --lh-body-xs:    1.45;
  --text-caption:    12px;  --lh-caption:    1.4;
  --text-label:      12px;  --lh-label:      1.35;
  --text-micro:      11px;  --lh-micro:      1.45;

  /* ---- TYPE · Weights ---- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---- TYPE · Tracking ---- */
  --tracking-default: 0;
  --tracking-wide:    0.04em;
  --tracking-label:   0.08em;

  /* ---- SPACE · 4px grid ---- */
  --space-0:  0px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;
  --space-8:  40px;
  --space-9:  48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;

  /* ---- RADIUS ---- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 999px;

  /* ---- SHADOW ---- */
  --shadow-soft:   0 1px 2px rgba(20, 25, 23, 0.04), 0 2px 8px rgba(20, 25, 23, 0.04);
  --shadow-lifted: 0 2px 4px rgba(20, 25, 23, 0.04), 0 8px 24px rgba(20, 25, 23, 0.08);
  --shadow-float:  0 8px 40px rgba(20, 25, 23, 0.12);
  --shadow-inset:  inset 0 1px 2px rgba(20, 25, 23, 0.04);
  --shadow-glow:   0 0 0 4px color-mix(in oklch, var(--sage-500) 18%, transparent);

  /* ---- MOTION ---- */
  --ease-gentle: cubic-bezier(0.32, 0.72, 0.35, 1);
  --ease-exit:   cubic-bezier(0.4, 0, 0.6, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    150ms;
  --dur-base:    220ms;
  --dur-slow:    320ms;
  --dur-slower:  480ms;
  /* The iOS keyboard's own slide, so whatever rides on the keyboard moves with it. Measured
     frame by frame on iOS 26.5: a critically damped spring with a 0.25 s response, settled by
     about 380 ms. A cubic-bezier cannot draw that curve; linear() samples it. */
  --ease-keyboard: linear(
    0, 0.027 2.5%, 0.091 5%, 0.175 7.5%, 0.266 10%, 0.358 12.5%, 0.445 15%, 0.597 20%, 0.715 25%,
    0.803 30%, 0.866 35%, 0.910 40%, 0.960 50%, 0.983 60%, 0.993 70%, 0.998 85%, 1
  );
  --dur-keyboard: 400ms;
  --press-scale:  0.95;
  --select-scale: 1.15;

  /* ---- APP-SPECIFIC (tap targets, icon sizes, layout) ---- */
  --tap-target-min: 48px;
  --tap-target-fab: 56px;
  --icon-sm:        20px;
  --icon-md:        24px;
  --icon-lg:        32px;
  --mobile-width:   393px;
  --content-max:    1200px;

  /* ==================================================================
     IONIC OVERRIDES — map Neuro tokens onto Ionic CSS custom properties.
     ================================================================== */
  --ion-color-primary:          var(--primary);
  --ion-color-primary-rgb:      104, 139, 123;
  --ion-color-primary-contrast: var(--primary-onfill);
  --ion-color-primary-shade:    var(--primary-hover);
  --ion-color-primary-tint:     var(--sage-400);

  --ion-color-success: var(--success);
  --ion-color-warning: var(--warning);
  --ion-color-danger:  var(--error);

  --ion-background-color: var(--bg-canvas);
  --ion-item-background:  var(--bg-surface);
  --ion-card-background:  var(--bg-surface);

  --ion-text-color:           var(--ink-strong);
  --ion-text-color-secondary: var(--ink-muted);

  --ion-font-family:        var(--font-ui);
  --ion-toolbar-background: var(--bg-surface);
  --ion-tab-bar-background: var(--bg-surface);
}

/* ---- TYPE · Ukrainian display face ----
   Fraunces has no Cyrillic glyphs, so Ukrainian titles would fall back to a system serif
   letter by letter. Lora is the Cyrillic stand-in: soft, brushed curves close to Fraunces'
   warmth, the same weights the app uses (400–700) plus italic, and slightly narrower,
   which helps the longer Ukrainian titles fit one line. `lang` on <html> is set by
   LocaleService, so the whole title switches face, Latin letters included. */
:root:lang(uk) {
  --font-display: 'Lora', 'Iowan Old Style', 'Palatino', Georgia, serif;
}


/* Respect user motion preference. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* neurochildren.com, after the app's tokens.css and the @font-face rules that website/build.mjs
   puts in front of this file. Every colour, size and space is an app token, so the site and the
   app change together. Light only, like the app. */

:root {
  /* A comfortable line length for reading the policy, about 70 characters. */
  --site-measure: 42rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg-canvas);
  color: var(--ink-base);
  font-family: var(--font-ui);
  font-size: var(--text-body-lg);
  line-height: var(--lh-body-lg);
  overflow-wrap: break-word;
}

a {
  color: var(--sage-700);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--sage-800);
}

a:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

strong {
  color: var(--ink-strong);
  font-weight: var(--weight-semibold);
}

/* ---- Header and footer ---- */

.site-header,
.policy,
.site-footer {
  max-width: var(--site-measure);
  margin: 0 auto;
  padding-inline: var(--space-5);
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--tap-target-min);
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.brand-mark,
.home-mark {
  display: block;
  background: var(--primary);
  -webkit-mask: url('/assets/logo-mark.png') center / contain no-repeat;
  mask: url('/assets/logo-mark.png') center / contain no-repeat;
}

.brand-mark {
  width: var(--icon-lg);
  height: var(--icon-lg);
}

.language {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target-min);
  padding-inline: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  background: var(--bg-surface);
  font-size: var(--text-body-sm);
  text-decoration: none;
}

.site-footer {
  padding-block: var(--space-6) var(--space-9);
  color: var(--ink-muted);
  font-size: var(--text-body-sm);
}

.site-footer::before {
  content: '';
  display: block;
  margin-bottom: var(--space-6);
  border-top: 1px solid var(--border-subtle);
}

/* ---- The policy ---- */

.policy {
  padding-block: var(--space-6) var(--space-7);
}

.policy h1,
.policy h2,
.home h1 {
  color: var(--ink-strong);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
}

.policy h1 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-display);
  line-height: var(--lh-display);
}

.policy .version {
  margin: 0 0 var(--space-7);
  color: var(--ink-muted);
  font-size: var(--text-body-sm);
}

.policy h2 {
  margin: var(--space-9) 0 var(--space-4);
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
}

.policy h3 {
  margin: var(--space-6) 0 var(--space-2);
  color: var(--ink-strong);
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  line-height: var(--lh-h3);
}

.policy p,
.policy ul {
  margin: 0 0 var(--space-4);
}

.policy ul {
  padding-left: var(--space-5);
}

.policy li + li {
  margin-top: var(--space-2);
}

.policy li::marker {
  color: var(--primary);
}

/* The short version: the first section, set on a card so it reads as the summary it is. */
.policy h2:first-of-type + ul {
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-8);
  border-radius: var(--radius-lg);
  background: var(--primary-soft);
}

/* ---- Tables: a grid on wide screens, one card per row on a phone ---- */

.table {
  margin: 0 0 var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  overflow: hidden;
}

.table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body);
  line-height: var(--lh-body);
}

.table th {
  padding: var(--space-3) var(--space-4);
  background: var(--bg-sunken);
  color: var(--ink-muted);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-align: left;
  text-transform: uppercase;
}

.table td {
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-subtle);
  vertical-align: top;
}

.table td:first-child {
  color: var(--ink-strong);
  font-weight: var(--weight-semibold);
}

@media (max-width: 40rem) {
  .table table,
  .table tbody,
  .table tr,
  .table td {
    display: block;
  }

  .table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .table tr {
    padding: var(--space-4);
  }

  .table tr + tr {
    border-top: 1px solid var(--border-subtle);
  }

  .table td {
    padding: 0;
    border: 0;
  }

  .table td + td {
    margin-top: var(--space-3);
  }

  .table td:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--space-1);
    color: var(--ink-muted);
    font-size: var(--text-label);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }
}

/* ---- Home ---- */

.home {
  max-width: var(--site-measure);
  margin: 0 auto;
  padding: var(--space-11) var(--space-5) var(--space-9);
  text-align: center;
}

.home-mark {
  width: var(--space-10);
  height: var(--space-10);
  margin: 0 auto var(--space-5);
}

.home h1 {
  margin: 0 0 var(--space-7);
  font-size: var(--text-display-lg);
  line-height: var(--lh-display-lg);
}

.home section + section {
  margin-top: var(--space-7);
  padding-top: var(--space-7);
  border-top: 1px solid var(--border-subtle);
}

.home p {
  margin: 0 0 var(--space-3);
}

.home + .site-footer {
  text-align: center;
}