/* GENERATED by scripts/build-web.mjs from design/tokens.css, design/components.css and design/web.css. */
/* GENERATED by design/build.mjs from design/tokens.json. Do not edit: edit tokens.json and re-run. */

:root {
  --color-paper: #f5f7f6;
  --color-surface: #fcfdfc;
  --color-surface-sunken: #e9eeec;
  --color-ink: #13201d;
  --color-ink-muted: #53625d;
  --color-line: #d3dbd8;
  --color-line-strong: #7d8c87;
  --color-tt: #0a6b66;
  --color-on-tt: #f6fbfa;
  --color-tt-soft: #d3ebe8;
  --color-office: #c9d2cf;
  --color-office-mark: #7d8c87;
  --color-mission: #9a4d08;
  --color-mission-soft: #fcebd2;
  --color-limit: #f2c230;
  --color-on-limit: #13201d;
  --color-warn-fg: #8a5800;
  --color-warn-bg: #fdf0c4;
  --color-over-fg: #b3261e;
  --color-over-bg: #fbe4e1;
  --font-sans: system-ui, -apple-system, "SF Pro Text", Roboto, "Segoe UI", sans-serif;
  --font-rounded: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, Roboto, sans-serif;
  --tap-min: 44px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-full: 9999px;
  --type-count-xl: 700 56px/60px var(--font-rounded);
  --type-count-l: 700 34px/40px var(--font-rounded);
  --type-count-m: 600 22px/28px var(--font-rounded);
  --type-large-title: 700 34px/41px var(--font-sans);
  --type-title: 700 22px/28px var(--font-sans);
  --type-headline: 600 17px/22px var(--font-sans);
  --type-body: 400 17px/22px var(--font-sans);
  --type-callout: 400 15px/20px var(--font-sans);
  --type-footnote: 400 13px/18px var(--font-sans);
  --type-label: 600 13px/18px var(--font-sans);
  --type-caption: 600 11px/13px var(--font-sans);
  --type-web-h1: 700 40px/46px var(--font-sans);
  --type-web-h2: 700 24px/30px var(--font-sans);
  --type-web-body: 400 17px/27px var(--font-sans);
  --type-web-small: 400 14px/20px var(--font-sans);
  --dur-press: 100ms;
  --dur-release: 160ms;
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-move: 280ms;
  --dur-sheet: 400ms;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --shadow-card: 0 1px 2px rgba(19, 32, 29, 0.06), 0 2px 8px rgba(19, 32, 29, 0.05);
  --shadow-sheet: 0 -4px 24px rgba(19, 32, 29, 0.12);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-paper: #0e1513;
    --color-surface: #162020;
    --color-surface-sunken: #1e2a28;
    --color-ink: #e8efec;
    --color-ink-muted: #a0b0ab;
    --color-line: #2a3735;
    --color-line-strong: #6f817c;
    --color-tt: #4cc3b7;
    --color-on-tt: #052421;
    --color-tt-soft: #12403c;
    --color-office: #3b4a46;
    --color-office-mark: #8a9b96;
    --color-mission: #f0b25c;
    --color-mission-soft: #3a2a12;
    --color-limit: #f2c230;
    --color-on-limit: #13201d;
    --color-warn-fg: #f2c94c;
    --color-warn-bg: #33290b;
    --color-over-fg: #ff8f86;
    --color-over-bg: #3d1614;
    --shadow-card: none;
    --shadow-sheet: 0 -4px 24px rgba(0, 0, 0, 0.5);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --color-paper: #0e1513;
  --color-surface: #162020;
  --color-surface-sunken: #1e2a28;
  --color-ink: #e8efec;
  --color-ink-muted: #a0b0ab;
  --color-line: #2a3735;
  --color-line-strong: #6f817c;
  --color-tt: #4cc3b7;
  --color-on-tt: #052421;
  --color-tt-soft: #12403c;
  --color-office: #3b4a46;
  --color-office-mark: #8a9b96;
  --color-mission: #f0b25c;
  --color-mission-soft: #3a2a12;
  --color-limit: #f2c230;
  --color-on-limit: #13201d;
  --color-warn-fg: #f2c94c;
  --color-warn-bg: #33290b;
  --color-over-fg: #ff8f86;
  --color-over-bg: #3d1614;
  --shadow-card: none;
  --shadow-sheet: 0 -4px 24px rgba(0, 0, 0, 0.5);
  color-scheme: dark;
}

/* Frontalier web — the design system's component styles (artifact v2.2) that the page uses. Colours come from tokens.css. */
/* Press feedback: iOS and web scale, Android ripple (drawn by the system, never scaled). */
.f-kind, .f-btn, .f-w__btn, .f-store, .f-day, .f-row, .f-chip, .f-choice { touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.f-kind, .f-btn, .f-w__btn, .f-store, .f-choice { transition: transform var(--dur-release) var(--ease-out), background-color var(--dur-fast) ease, color var(--dur-fast) ease, border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; }
.f-kind:active, .f-btn:active, .f-w__btn:active, .f-store:active, .f-choice:active { transform: scale(.97); transition-duration: var(--dur-press); }
.f-android .f-kind:active, .f-android .f-btn:active, .f-android .f-choice:active { transform: none; background-image: radial-gradient(circle at var(--rx, 50%) var(--ry, 50%), color-mix(in srgb, currentColor 12%, transparent) 0 60%, transparent 61%); }
.f-day { transition: opacity var(--dur-press) var(--ease-out), background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.f-day:active { opacity: .7; }
:where(.f-btn, .f-kind, .f-seg button, .f-choice, .f-day, .f-link, .f-input, .f-store):focus-visible { outline: 3px solid var(--color-tt); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .f-link:hover { text-decoration-thickness: 2px; } .f-row:hover { background: var(--color-surface-sunken); } }

/* Icons: SF Symbols / Material Symbols in the apps; these lucide shapes stand in for them in previews and serve the web. */
.f-ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.f-ico--s { width: 16px; height: 16px; }
.f-ico--xs { width: 14px; height: 14px; }
.f-ico--l { width: 28px; height: 28px; }
.f-num { font-family: var(--font-rounded); font-variant-numeric: tabular-nums; }

/* The border line: the dash-dot of national borders on survey maps. The system's one motif. */
.f-border-v { width: 2px; background: repeating-linear-gradient(to bottom, var(--bl, var(--color-ink)) 0 8px, transparent 8px 11px, var(--bl, var(--color-ink)) 11px 13px, transparent 13px 16px); }
.f-border-h { height: 2px; background: repeating-linear-gradient(to right, var(--bl, var(--color-ink)) 0 8px, transparent 8px 11px, var(--bl, var(--color-ink)) 11px 13px, transparent 13px 16px); }

/* AppStatusPill: sentence case, never colour alone. */
.f-pill { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-full); font: 600 13px/18px var(--font-sans); white-space: nowrap; flex: none; transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease; }
.f-pill--ok { background: var(--color-tt-soft); color: var(--color-tt); }
.f-pill--warn { background: var(--color-warn-bg); color: var(--color-warn-fg); }
.f-pill--over { background: var(--color-over-bg); color: var(--color-over-fg); }
.f-pill--info { background: var(--color-surface-sunken); color: var(--color-ink); }

/* AppQuotaGauge: the remaining days first. */
.f-gauge__label { margin: 0; font: 600 15px/20px var(--font-sans); }
.f-gauge__sub { margin: 0; font: 400 13px/18px var(--font-sans); color: var(--color-ink-muted); }
.f-gauge__count { display: flex; align-items: baseline; gap: var(--space-2); margin: 0; }
.f-gauge__count b { font: 700 56px/60px var(--font-rounded); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.f-gauge__count > span { font: 400 17px/22px var(--font-sans); color: var(--color-ink-muted); }
.f-gauge__count--over b { color: var(--color-over-fg); }
.f-gauge__meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2); margin-top: calc(-1 * var(--space-2)); font: 400 15px/20px var(--font-sans); color: var(--color-ink-muted); }
.f-gauge__meta b { color: var(--color-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.f-meter { position: relative; padding-block: 6px; flex: none; }
.f-track { position: relative; height: 14px; border-radius: var(--radius-full); background: var(--color-surface-sunken); overflow: hidden; container-type: inline-size; }
.f-track__zone { position: absolute; top: 0; bottom: 0; left: 72%; width: 8%; background: var(--color-limit) repeating-linear-gradient(135deg, color-mix(in srgb, var(--color-on-limit) 40%, transparent) 0 2px, transparent 2px 6px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-ink) 55%, transparent); }
.f-track__fill { position: absolute; inset: 0; border-radius: var(--radius-full); background: var(--color-tt); transform: translateX(calc((var(--p, 0) - 100) * 1cqw)); transition: transform var(--dur-move) var(--ease-in-out), background-color var(--dur-fast) ease; }
.f-track__fill--over { background: var(--color-over-fg); }
.f-track__proj { position: absolute; top: 0; bottom: 0; left: calc(var(--p, 0) * 1%); width: calc((var(--q, 0) - var(--p, 0)) * 1%); border: 2px dashed var(--color-tt); border-left: 0; border-radius: 0 var(--radius-full) var(--radius-full) 0; box-sizing: border-box; transition: left var(--dur-move) var(--ease-in-out), width var(--dur-move) var(--ease-in-out); }
.f-meter__tick { position: absolute; top: 0; bottom: 0; left: var(--t, 80%); width: 2px; margin-left: -1px; background: var(--color-ink); border-radius: 1px; box-shadow: 0 0 0 1px var(--color-surface); }
.f-scale { position: relative; height: 18px; font: 400 13px/18px var(--font-sans); color: var(--color-ink-muted); font-variant-numeric: tabular-nums; }
.f-scale span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.f-scale span:first-child { transform: none; }
.f-gauge__foot { margin: 0; font: 400 13px/18px var(--font-sans); color: var(--color-ink-muted); }
.f-gauge__foot b { color: var(--color-ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* AppThresholdRow */
.f-thr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); padding-block: var(--space-3); border-top: 1px solid var(--color-line); align-items: center; }
.f-thr:first-child { border-top: 0; }
.f-thr__name { margin: 0; font: 600 15px/20px var(--font-sans); }
.f-thr__rule { margin: 0; font: 400 13px/18px var(--font-sans); color: var(--color-ink-muted); }
.f-thr__val { font: 600 22px/28px var(--font-rounded); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.f-thr .f-meter { grid-column: 1; padding-block: 4px; align-self: center; }
.f-thr__rule { grid-column: 1 / -1; }
.f-thr .f-track { height: 8px; }
.f-thr .f-pill { justify-self: end; }

/* AppDayPicker: each kind keeps its own colour when chosen. */
.f-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.f-kind { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); min-height: 76px; padding: var(--space-3) 28px var(--space-3) var(--space-3); box-sizing: border-box; border-radius: var(--radius-md); border: 1px solid var(--color-line-strong); background: var(--color-surface); color: var(--color-ink); font: 600 15px/20px var(--font-sans); text-align: left; cursor: pointer; }
.f-kind small { display: block; font: 400 13px/18px var(--font-sans); color: var(--color-ink-muted); }
.f-kind--wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: var(--space-2); min-height: 56px; }
.f-kind--mission .f-ico { color: var(--color-mission); }
.f-kind__check { position: absolute; top: 6px; right: 6px; width: 18px; height: 18px; border-radius: var(--radius-full); display: none; place-items: center; background: var(--color-ink); color: var(--color-surface); }
.f-kind__check .f-ico { width: 12px; height: 12px; stroke-width: 3; color: inherit; }
.f-kind[aria-checked="true"] .f-kind__check, .f-kind:has(input:checked) .f-kind__check { display: grid; }
.f-kind--tt[aria-checked="true"], .f-kind--tt:has(input:checked) { background: var(--color-tt); border-color: var(--color-tt); color: var(--color-on-tt); }
.f-kind--tt[aria-checked="true"] small, .f-kind--tt:has(input:checked) small { color: var(--color-on-tt); }
.f-kind--tt .f-kind__check { background: var(--color-on-tt); color: var(--color-tt); }
.f-kind--office[aria-checked="true"], .f-kind--office:has(input:checked) { border: 2px solid var(--color-ink); box-shadow: inset 0 -4px 0 var(--color-office-mark); padding: 11px 27px 11px 11px; }
.f-kind--mission[aria-checked="true"], .f-kind--mission:has(input:checked) { background: var(--color-mission-soft); border: 2px solid var(--color-mission); padding: 11px 27px 11px 11px; }
.f-kind--mission .f-kind__check { background: var(--color-mission); color: var(--color-mission-soft); }
.f-kind--absent[aria-checked="true"], .f-kind--absent:has(input:checked) { background: var(--color-surface-sunken); border: 2px solid var(--color-ink); padding: 11px 27px 11px 11px; }
.f-kind--night[aria-checked="true"], .f-kind--night:has(input:checked) { background: repeating-linear-gradient(135deg, var(--color-surface-sunken) 0 5px, var(--color-surface) 5px 10px); border: 2px solid var(--color-ink); padding: 11px 27px 11px 11px; }
.f-kind input { position: absolute; opacity: 0; pointer-events: none; }
.f-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 2px; border-radius: var(--radius-md); background: var(--color-surface-sunken); }
.f-seg button { min-height: 36px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-ink); font: 500 13px/18px var(--font-sans); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); transition: background-color var(--dur-fast) ease; }
.f-seg button[aria-pressed="true"] { background: var(--color-surface); box-shadow: var(--shadow-card); font-weight: 600; }
.f-seg .f-seg__check { display: none; }
.f-seg--android { gap: 0; padding: 0; background: transparent; border: 1px solid var(--color-line-strong); border-radius: var(--radius-full); overflow: hidden; }
.f-seg--android button { border-radius: 0; min-height: 40px; border-left: 1px solid var(--color-line-strong); }
.f-seg--android button:first-child { border-left: 0; }
.f-seg--android button[aria-pressed="true"] { background: var(--color-tt-soft); color: var(--color-ink); box-shadow: none; }
.f-seg--android button[aria-pressed="true"] .f-seg__check { display: block; }
.f-half { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: var(--space-2); align-items: center; font: 600 15px/20px var(--font-sans); }
.f-chips { display: flex; gap: var(--space-1); }
.f-chip { flex: 1; min-height: 44px; display: grid; place-items: center; border-radius: var(--radius-sm); border: 1px solid var(--color-line-strong); background: var(--color-surface); color: var(--color-ink); }
.f-chip[aria-checked="true"] { background: var(--color-tt); border-color: var(--color-tt); color: var(--color-on-tt); }
.f-chip--office[aria-checked="true"] { background: var(--color-surface); border: 2px solid var(--color-ink); box-shadow: inset 0 -4px 0 var(--color-office-mark); color: var(--color-ink); }

/* AppUndo: iOS inline row, Android Snackbar. */
.f-undo { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-1) 0 var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-sunken); font: 400 15px/20px var(--font-sans); }
.f-undo .f-ico { color: var(--color-tt); }
.f-undo .f-btn { min-height: 44px; padding: 0 var(--space-3); font-size: 15px; }
.f-snack { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 48px; padding: 0 var(--space-2) 0 var(--space-4); border-radius: var(--radius-xs); background: var(--color-ink); color: var(--color-paper); font: 400 14px/20px var(--font-sans); box-shadow: var(--shadow-sheet); }
.f-snack button { min-height: 40px; padding: 0 var(--space-3); border: 0; background: transparent; color: var(--color-tt-soft); font: 600 14px/20px var(--font-sans); border-radius: var(--radius-full); }

/* AppCalendarMonth */
.f-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--space-1); }
.f-cal__dow { text-align: center; font: 600 11px/13px var(--font-sans); color: var(--color-ink-muted); padding-bottom: var(--space-1); }
.f-cal--android { grid-auto-rows: 44px; }
.f-cal--android .f-day { aspect-ratio: auto; border-radius: var(--radius-md); }
/* Selection mode: ring plus weight, never colour alone. */
button.f-day { border: 0; padding: 0; margin: 0; font: inherit; cursor: pointer; }
.f-day[aria-selected="true"] { background: var(--color-surface-sunken); box-shadow: inset 0 0 0 2px var(--color-tt); color: var(--color-ink); font-weight: 700; }
.f-selbar { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-sheet); }
.f-selbar > span { flex: 1; white-space: nowrap; padding-left: var(--space-2); font: 600 15px/20px var(--font-sans); }
.f-selbar .f-btn { min-height: 44px; padding-inline: var(--space-4); }
.f-calhead { display: flex; align-items: center; gap: var(--space-1); }
.f-calhead .title { margin: 0; flex: 1; }
.f-iconbtn { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--color-tt); }
.f-day { position: relative; aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--radius-full); background: transparent; color: var(--color-ink); font: 500 15px/20px var(--font-rounded); font-variant-numeric: tabular-nums; }
.f-day--empty, .f-day--office { background: transparent; }
.f-day--off, .f-day--future { color: var(--color-ink-muted); }
.f-day--off { opacity: .6; }
.f-day--tt { background: var(--color-tt); color: var(--color-on-tt); font-weight: 700; }
/* Half day: soft fill plus a tt ring, so shape and not only hue tells it from a full day. */
.f-day--half { background: var(--color-tt-soft); color: var(--color-ink); font-weight: 700; box-shadow: inset 0 0 0 2px var(--color-tt); }
.f-day--absent { color: var(--color-ink-muted); text-decoration: line-through; }
.f-day--mission::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 6px; height: 6px; margin-left: -3px; border-radius: var(--radius-full); box-sizing: border-box; }
.f-day--mission::after { background: var(--color-mission); }
/* To complete: a dashed ring around the whole cell, so shape (not hue) tells it from the mission dot. */
.f-day--todo { outline: 2px dashed var(--color-warn-fg); outline-offset: -3px; }
.f-day--todo[aria-selected="true"] { outline-offset: -7px; }
.f-day--today { box-shadow: inset 0 0 0 2px var(--color-ink); }
.f-day--tt.f-day--today { box-shadow: inset 0 0 0 2px var(--color-tt), inset 0 0 0 4px var(--color-surface); }
.f-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font: 400 13px/18px var(--font-sans); color: var(--color-ink-muted); }
.f-legend span { display: inline-flex; align-items: center; gap: var(--space-2); }
.f-legend i { width: 12px; height: 12px; border-radius: var(--radius-full); display: inline-block; box-sizing: border-box; }
.f-legend__tt { background: var(--color-tt); }
.f-legend__half { background: var(--color-tt-soft); box-shadow: inset 0 0 0 1.5px var(--color-tt); }
.f-legend__mission { width: 6px !important; height: 6px !important; background: var(--color-mission); }
.f-legend__todo { border: 1.5px dashed var(--color-warn-fg); }

/* AppRuleCard: the reference leads. */
.f-rule { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); border: 1px solid var(--color-line); }
.f-rule__ref { display: flex; align-items: center; gap: var(--space-2); margin: 0; font: 400 13px/18px var(--font-sans); color: var(--color-ink-muted); }
.f-rule__ref > span { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.f-rule__title { margin: 0; font: 600 17px/22px var(--font-sans); }
.f-rule__plain { margin: 0; font: 400 15px/20px var(--font-sans); }
.f-rule__quote { margin: 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-sunken); font: italic 400 15px/21px var(--font-sans); }
.f-link { color: var(--color-tt); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; display: inline-flex; align-items: center; gap: var(--space-1); min-height: 44px; }
.f-tag { display: inline-block; font: 600 13px/18px var(--font-sans); color: var(--color-ink); border: 1px solid var(--color-line-strong); border-radius: var(--radius-xs); padding: 0 var(--space-1); white-space: nowrap; flex: none; }
.f-doc { width: 22px; height: 28px; flex: none; }
.f-order { display: flex; flex-direction: column; gap: var(--space-2); }
.f-order__bar { display: flex; height: 22px; border-radius: var(--radius-xs); overflow: hidden; background: var(--color-surface-sunken); position: relative; }
.f-order__bar > i { display: block; height: 100%; }
.f-order__steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-1); font: 400 13px/18px var(--font-sans); }
.f-order__steps li { display: grid; grid-template-columns: 22px 14px minmax(0, 1fr) auto; gap: var(--space-2); align-items: center; }
.f-order__steps b { font: 600 13px/18px var(--font-rounded); color: var(--color-ink-muted); }
.f-order__steps em { font-style: normal; font-variant-numeric: tabular-nums; font-weight: 600; }

/* AppNotice */
.f-notice { display: flex; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); font: 400 15px/20px var(--font-sans); }
.f-notice p { margin: 0; }
.f-notice b { font-weight: 600; }
.f-notice .f-link { min-height: 0; }
.f-notice--info { background: var(--color-surface-sunken); color: var(--color-ink); }
.f-notice--warn { background: var(--color-warn-bg); color: var(--color-ink); }
.f-notice--warn > .f-ico { color: var(--color-warn-fg); }
.f-notice--over { background: var(--color-over-bg); color: var(--color-ink); }
.f-notice--over > .f-ico { color: var(--color-over-fg); }
.f-notice { transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
@starting-style { .f-notice--enter { opacity: 0; transform: translateY(-8px); } }

/* AppButton: capsules on both platforms (iOS 26 .controlSize(.large), Material 3). */
.f-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 50px; padding: 0 var(--space-5); border-radius: var(--radius-full); border: 0; font: 600 17px/22px var(--font-sans); white-space: nowrap; cursor: pointer; }
.f-btn--block { width: 100%; }
.f-btn--primary { background: var(--color-tt); color: var(--color-on-tt); }
.f-btn--primary:active { background: color-mix(in srgb, var(--color-tt) 92%, var(--color-ink)); }
.f-btn--secondary { background: var(--color-tt-soft); color: var(--color-tt); }
.f-btn--plain { background: transparent; color: var(--color-tt); }
.f-btn--danger { background: transparent; color: var(--color-over-fg); }
.f-btn[disabled] { opacity: .55; cursor: default; }
.f-btn--android { min-height: 48px; font-size: 15px; }
.f-btn--android[disabled] { opacity: 1; background: color-mix(in srgb, var(--color-ink) 12%, transparent); color: color-mix(in srgb, var(--color-ink) 38%, transparent); }
.f-btn--s { min-height: 36px; padding: 0 var(--space-3); font-size: 15px; }

/* A value longer than half the row goes under the label (Break-UI). */
.f-row--stack { flex-wrap: wrap; row-gap: 2px; }
.f-row--stack .f-row__main { flex-basis: 100%; }
.f-row--stack .f-row__val { max-width: none; text-align: left; color: var(--color-ink); }
.f-row .f-ico { color: var(--color-ink-muted); }
.f-row.is-sel { background: var(--color-tt-soft); }
.f-row.is-sel .f-ico { color: var(--color-tt); }
.f-section { margin: 0; padding: 0 var(--space-4); font: 600 13px/18px var(--font-sans); color: var(--color-ink-muted); }
.f-switch { width: 51px; height: 31px; border-radius: var(--radius-full); background: var(--color-tt); position: relative; flex: none; transition: background-color var(--dur-fast) ease; }
.f-switch::after { content: ""; position: absolute; top: 2px; right: 2px; width: 27px; height: 27px; border-radius: var(--radius-full); background: var(--color-surface); transition: transform var(--dur-base) var(--ease-out); }
.f-switch--off { background: var(--color-surface-sunken); box-shadow: inset 0 0 0 1px var(--color-line-strong); }
.f-switch--off::after { right: auto; left: 2px; }
.f-switch--android { width: 52px; height: 32px; }
.f-switch--android::after { top: 4px; right: 4px; width: 24px; height: 24px; background: var(--color-on-tt); }
.f-switch--android.f-switch--off { box-shadow: inset 0 0 0 2px var(--color-line-strong); }
.f-switch--android.f-switch--off::after { top: 8px; left: 8px; width: 16px; height: 16px; background: var(--color-line-strong); }

/* AppReport: the A4 statement and the year strip. */
.f-paper { width: 100%; aspect-ratio: 210 / 297; box-sizing: border-box; background: #fcfdfc; color: #13201d; border-radius: var(--radius-xs); box-shadow: 0 1px 3px rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.08); padding: 7% 7%; display: flex; flex-direction: column; gap: 3.5%; font-family: var(--font-sans); overflow: hidden; }
.f-paper--thumb { width: 84px; flex: none; padding: 8px 7px; gap: 4px; }
.f-paper__h { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.f-paper__t { margin: 0; font: 700 15px/19px var(--font-rounded); }
.f-paper__m { margin: 0; font: 400 9px/12px var(--font-sans); color: #53625d; }
.f-paper table { width: 100%; border-collapse: collapse; font: 400 8.5px/12px var(--font-sans); font-variant-numeric: tabular-nums; }
.f-paper th { text-align: left; font-weight: 600; color: #53625d; border-bottom: 1px solid #7d8c87; padding: 2px 0; }
.f-paper td { border-bottom: 1px solid #d3dbd8; padding: 2px 0; }
.f-paper td + td, .f-paper th + th { text-align: right; }
.f-paper__tot { display: flex; gap: 6px; white-space: nowrap; justify-content: space-between; font: 600 10px/14px var(--font-sans); padding: 4px 6px; background: #d3ebe8; border-radius: 3px; }
.f-paper__fine { margin: 0; font: 400 7.5px/10px var(--font-sans); color: #53625d; margin-top: auto; }
.f-paper__ln { height: 3px; border-radius: 2px; background: #d3dbd8; }
.f-paper__ln--tt { background: #0a6b66; }
.f-year { display: grid; grid-template-columns: repeat(53, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(7, auto); gap: 1px; }
.f-year i { aspect-ratio: 1; border-radius: 1px; background: var(--color-surface-sunken); }
.f-year .y-tt { background: var(--color-tt); }
.f-year .y-half { background: var(--color-tt-soft); }
.f-year .y-office { background: var(--color-office-mark); }
.f-year .y-mission { background: var(--color-mission); }
.f-year .y-off { background: transparent; }
.f-year .y-fut { background: transparent; box-shadow: inset 0 0 0 1px var(--color-line); }
.f-paper .f-year i { background: #e9eeec; }
.f-paper .f-year .y-tt { background: #0a6b66; } .f-paper .f-year .y-half { background: #d3ebe8; } .f-paper .f-year .y-office { background: #7d8c87; } .f-paper .f-year .y-mission { background: #9a4d08; } .f-paper .f-year .y-off { background: transparent; } .f-paper .f-year .y-fut { background: transparent; box-shadow: inset 0 0 0 .5px #d3dbd8; }
.f-months { display: grid; grid-template-columns: repeat(12, 1fr); font: 400 11px/13px var(--font-sans); color: var(--color-ink-muted); }

/* Illustrations: line art at the icons' stroke, three colours, aria-hidden. */
.f-ill { display: block; width: 100%; height: auto; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.f-ill .s-ink { stroke: var(--color-ink-muted); stroke-width: 2; }
.f-ill .s-tt { stroke: var(--color-tt); stroke-width: 2; }
.f-ill .s-mi { stroke: var(--color-mission); stroke-width: 2; }
.f-ill .s-bd { stroke: var(--color-ink); stroke-width: 2; stroke-dasharray: 8 3 2 3; }
.f-ill .f-soft { fill: var(--color-tt-soft); stroke: none; }
.f-ill .f-sunk { fill: var(--color-surface-sunken); stroke: none; }
.f-ill .f-tt { fill: var(--color-tt); stroke: none; }
.f-ill text { font: 600 11px/13px var(--font-sans); fill: var(--color-ink-muted); stroke: none; }

/* Web */
.f-web { background: var(--color-paper); color: var(--color-ink); font-family: var(--font-sans); border: 1px solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; }
.f-whead { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-6) calc(var(--space-3) + 2px); }
.f-whead .f-border-h { position: absolute; left: 0; right: 0; bottom: 0; --bl: var(--color-line-strong); }
.f-wordmark { display: inline-flex; align-items: center; gap: var(--space-2); font: 700 18px/24px var(--font-rounded); letter-spacing: -.01em; color: var(--color-ink); text-decoration: none; }
.f-wordmark svg { width: 24px; height: 24px; flex: none; }
.f-lang { display: flex; gap: var(--space-1); font: 600 13px/18px var(--font-sans); color: var(--color-ink-muted); }
.f-lang a { color: inherit; text-decoration: none; min-width: 32px; min-height: 32px; display: grid; place-items: center; border-radius: var(--radius-full); }
.f-lang a[aria-current="true"] { color: var(--color-ink); background: var(--color-surface-sunken); }
.f-hero { padding: var(--space-6) var(--space-6) 0; display: flex; flex-direction: column; gap: var(--space-2); }
.f-hero .web-h1 { margin: 0; max-width: 22ch; text-wrap: balance; }
.f-hero__links { margin: 0; font: 400 15px/20px var(--font-sans); color: var(--color-ink-muted); }
.f-hero__links a { color: var(--color-tt); font-weight: 600; }
.f-calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); padding: var(--space-6); }
.f-field { display: flex; flex-direction: column; gap: var(--space-1); }
.f-field label { font: 600 14px/20px var(--font-sans); }
.f-field small { font: 400 13px/18px var(--font-sans); color: var(--color-ink-muted); }
.f-field--err small { color: var(--color-over-fg); }
.f-inwrap { position: relative; display: flex; align-items: center; }
.f-input { width: 100%; box-sizing: border-box; min-height: 44px; padding: 0 64px 0 var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--color-line-strong); background: var(--color-surface); color: var(--color-ink); font: 400 17px/22px var(--font-sans); font-variant-numeric: tabular-nums; -webkit-appearance: none; appearance: none; transition: border-color var(--dur-fast) ease; }
.f-field--err .f-input { border: 2px solid var(--color-over-fg); }
.f-inwrap span { position: absolute; right: var(--space-3); color: var(--color-ink-muted); font: 400 15px/20px var(--font-sans); pointer-events: none; }
select.f-input { padding-right: var(--space-8); }
.f-form { display: flex; flex-direction: column; gap: var(--space-4); }
.f-result { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); box-shadow: var(--shadow-card); }
.f-result .f-track__fill { transition-duration: var(--dur-fast); transition-timing-function: var(--ease-out); }
.f-stores { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.f-store { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-md); background: var(--color-ink); color: var(--color-paper); font: 600 14px/18px var(--font-sans); text-decoration: none; }

/* Reduced motion: no movement, no scale; a 150 ms fade stays. */
@media (prefers-reduced-motion: reduce) {
  .f-kind:active, .f-btn:active, .f-w__btn:active, .f-store:active, .f-choice:active { transform: none; }
  .f-track__fill, .f-track__proj { transition: background-color var(--dur-fast) ease; }
  .f-demo .f-roll > * { transform: none !important; transition: opacity var(--dur-fast) ease; }
  .f-demo .f-undo { transform: none; transition: opacity var(--dur-fast) ease; }
  .f-notice { transition: opacity var(--dur-fast) ease; }
  @starting-style { .f-notice--enter { transform: none; } }
  .f-sheet { transition: opacity 200ms ease; }
  .f-menu { animation: none; }
  .f-skel { animation: none; }
  .f-curve .c-dot { animation: none; offset-distance: 100%; }
}


/* Web MVP components (Frontalier DS v2.2) */
.w-body [hidden], .w-body[hidden] { display: none !important; }
.w-body *, .w-body *::before, .w-body *::after { box-sizing: border-box; }
/* Web MVP (single page): WebPage, WebHero, WebPanorama, WebFlow, WebResult, WebToday, WebMonth, WebReport, WebRules, WebFoot.
   Values come from tokens.css; nothing here declares a colour. Mobile first, one breakpoint at 960 px. */

/* WebPage: the document itself. Browser surfaces carry the palette too. */
.w-body { margin: 0; background: var(--color-paper); color: var(--color-ink); font: 400 17px/24px var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.w-body ::selection { background: var(--color-tt-soft); color: var(--color-ink); }
.w-body :focus-visible { outline: 2px solid var(--color-tt); outline-offset: 2px; border-radius: var(--radius-sm); }
.w-body a { color: var(--color-tt); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.w-body { accent-color: var(--color-tt); caret-color: var(--color-tt); scrollbar-color: var(--color-line-strong) transparent; }
.w-skip { position: absolute; left: var(--space-4); top: -60px; z-index: 20; padding: var(--space-2) var(--space-4); border-radius: var(--radius-full); background: var(--color-ink); color: var(--color-paper) !important; font: 600 15px/20px var(--font-sans); text-decoration: none; }
.w-skip:focus { top: var(--space-2); }
.w-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--space-4); box-sizing: border-box; }
.w-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* WebHead: name, the remaining days once known, language. The bottom edge is the border line. */
.w-head { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--color-paper) 92%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); }
.w-head__in { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; }
.w-head .f-border-h { --bl: var(--color-line-strong); opacity: .7; }
.w-head__count { margin-left: auto; display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 12px; border-radius: var(--radius-full); background: var(--color-surface); box-shadow: var(--shadow-card); color: var(--color-ink); text-decoration: none !important; font: 400 13px/18px var(--font-sans); white-space: nowrap; opacity: 0; transform: translateY(-4px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); pointer-events: none; }
.w-head__count b { font: 700 17px/20px var(--font-rounded); font-variant-numeric: tabular-nums; }
.w-head__count.is-on { opacity: 1; transform: none; pointer-events: auto; }
.w-head .f-lang { margin-left: var(--space-1); }
.w-head__count:not(.is-on) + .f-lang { margin-left: auto; }

/* WebHero: one question as the headline, a lead, and the panorama. */
.w-hero { display: grid; gap: var(--space-5); padding-top: var(--space-8); }
.w-h1 { margin: 0; font: 700 clamp(34px, 6.4vw, 60px)/1.04 var(--font-rounded); letter-spacing: -0.03em; text-wrap: balance; max-width: 15ch; }
.w-lead { margin: 0; max-width: 34ch; font: 400 19px/27px var(--font-sans); color: var(--color-ink-muted); text-wrap: pretty; }
.w-lead b { color: var(--color-ink); font-weight: 600; }
.w-trust { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; font: 500 14px/20px var(--font-sans); color: var(--color-ink-muted); }
.w-trust li { display: inline-flex; align-items: center; gap: 6px; }
.w-trust .f-ico { width: 16px; height: 16px; color: var(--color-tt); }

/* WebPanorama: the drawn scene. Line art, three colours, the border line crosses it. One authored moment: the road draws itself once. */
.w-pano { position: relative; margin: 0 calc(-1 * var(--space-4)); overflow: hidden; }
.w-pano svg { display: block; width: 100%; height: auto; overflow: visible; }
.w-pano .s-ink { stroke: var(--color-ink-muted); }
.w-pano .s-faint { stroke: var(--color-line-strong); stroke-width: 1.5; fill: none; }
.w-pano .s-road { stroke: var(--color-mission); stroke-width: 2.5; fill: none; stroke-dasharray: 1; stroke-dashoffset: 0; }
.w-pano .s-rail { stroke: var(--color-ink-muted); stroke-width: 1.5; fill: none; stroke-dasharray: 2 5; }
.w-pano .w-pano__lit { fill: var(--color-limit); stroke: none; }
.w-pano .w-pano__water { fill: var(--color-tt-soft); stroke: none; }
.w-pano .w-pano__ground { fill: var(--color-surface-sunken); stroke: none; }
.w-pano .w-pano__label { font: 600 12px/14px var(--font-sans); letter-spacing: .02em; fill: var(--color-ink-muted); stroke: none; }
.w-pano .w-pano__dot { fill: var(--color-mission); stroke: var(--color-paper); stroke-width: 2; offset-path: var(--road); offset-rotate: 0deg; offset-distance: 100%; }
.w-pano .w-pano__scene { transition: opacity var(--dur-sheet) var(--ease-out); }
.w-pano .w-pano__scene[hidden] { display: block; opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .w-pano.is-drawing .s-road { stroke-dashoffset: 1; animation: w-draw 1100ms var(--ease-in-out) 250ms forwards; }
  .w-pano.is-drawing .w-pano__lit { opacity: 0; animation: w-fade 300ms var(--ease-out) 1250ms forwards; }
  .w-pano.is-drawing .w-pano__dot { opacity: 0; offset-path: var(--road); offset-rotate: 0deg; animation: w-commute 1100ms var(--ease-in-out) 250ms forwards; }
}
@keyframes w-draw { to { stroke-dashoffset: 0; } }
@keyframes w-fade { to { opacity: 1; } }
@keyframes w-commute { 0% { offset-distance: 0%; opacity: 1; } 92% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }

/* WebFlow: the onboarding as a short conversation in the page. One open question; answered ones fold into a line you can reopen. */
.w-flow { display: flex; flex-direction: column; gap: var(--space-3); }
.w-step { background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.w-step[hidden] { display: none; }
.w-step.is-enter { animation: w-rise var(--dur-sheet) var(--ease-out); }
@keyframes w-rise { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .w-step.is-enter { animation: w-fade-in var(--dur-fast) linear; } @keyframes w-fade-in { from { opacity: 0; } } }
.w-step__n { margin: 0; font: 600 13px/18px var(--font-sans); color: var(--color-ink-muted); font-variant-numeric: tabular-nums; }
.w-q { margin: -8px 0 0; font: 700 24px/30px var(--font-rounded); letter-spacing: -0.01em; text-wrap: balance; }
.w-hint { margin: -8px 0 0; font: 400 15px/21px var(--font-sans); color: var(--color-ink-muted); text-wrap: pretty; }

/* Answered step: a single line. The value is the button that reopens it. */
.w-done { display: flex; align-items: center; gap: var(--space-3); min-height: 52px; padding: 0 var(--space-2) 0 var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface-sunken); }
.w-done[hidden] { display: none; }
.w-done .f-ico { color: var(--color-tt); }
.w-done__q { font: 400 15px/20px var(--font-sans); color: var(--color-ink-muted); }
.w-done__a { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-full); background: transparent; color: var(--color-ink); font: 600 15px/20px var(--font-sans); cursor: pointer; text-align: right; }
.w-done__a::after { content: ""; width: 16px; height: 16px; flex: none; background: var(--color-tt); -webkit-mask: var(--w-pen) center / contain no-repeat; mask: var(--w-pen) center / contain no-repeat; }
:root { --w-pen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.4 3.6a2.1 2.1 0 1 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E"); }

/* Country cards: the two drawn crossings. One tap answers and moves on. */
.w-countries { display: grid; gap: var(--space-3); }
.w-country { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding: var(--space-3) var(--space-3) var(--space-4); border-radius: var(--radius-lg); border: 1px solid var(--color-line); background: var(--color-paper); color: var(--color-ink); text-align: left; font: inherit; cursor: pointer; }
.w-country .f-ill { max-height: 104px; }
.w-country b { display: block; padding-inline: var(--space-1); font: 700 19px/24px var(--font-rounded); }
.w-country small { display: block; padding-inline: var(--space-1); font: 400 14px/20px var(--font-sans); color: var(--color-ink-muted); }
.w-country[aria-checked="true"] { border: 2px solid var(--color-tt); padding: 11px 11px 15px; background: color-mix(in srgb, var(--color-tt-soft) 45%, var(--color-paper)); }

/* Options: large chips. Cantons, activity rate, days per week. */
.w-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.w-opts--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.w-opt { position: relative; min-height: 52px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--color-line-strong); background: var(--color-paper); color: var(--color-ink); font: 600 16px/20px var(--font-sans); text-align: left; display: flex; flex-direction: column; justify-content: center; gap: 2px; cursor: pointer; }
.w-opts--5 .w-opt { align-items: center; text-align: center; padding-inline: var(--space-1); font: 700 19px/22px var(--font-rounded); font-variant-numeric: tabular-nums; }
.w-opt small { font: 400 13px/17px var(--font-sans); color: var(--color-ink-muted); }
.w-opt[aria-checked="true"] { background: var(--color-tt); border-color: var(--color-tt); color: var(--color-on-tt); }
.w-opt[aria-checked="true"] small { color: var(--color-on-tt); }
.w-opt--more { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; border-style: dashed; color: var(--color-ink); font-weight: 500; }
.w-select { width: 100%; min-height: 52px; padding: 0 var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--color-line-strong); background: var(--color-paper); color: var(--color-ink); font: 400 17px/22px var(--font-sans); }
.w-opt, .w-country, .w-done__a, .w-btn { transition: transform var(--dur-release) var(--ease-out), background-color var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease; touch-action: manipulation; }
.w-opt:active, .w-country:active, .w-btn:active { transform: scale(.97); transition-duration: var(--dur-press); }
@media (hover: hover) and (pointer: fine) {
  .w-opt:hover, .w-country:hover { border-color: var(--color-ink); }
  .w-opt[aria-checked="true"]:hover { border-color: var(--color-tt); }
}

/* Regime sentence: what the canton implies, said once, in plain words. */
.w-regime { display: flex; gap: var(--space-3); margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-sunken); font: 400 15px/21px var(--font-sans); }
.w-regime b { font-weight: 600; }
.w-regime .f-ico { color: var(--color-tt); margin-top: 1px; }

/* WebWeek: five day squares that fill with the answer. The data is the drawing. */
.w-week { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.w-week i { height: 34px; border-radius: var(--radius-sm); background: var(--color-surface-sunken); display: grid; place-items: end center; padding-bottom: 4px; font: 600 11px/13px var(--font-sans); font-style: normal; color: var(--color-ink-muted); transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.w-week i.is-tt { background: var(--color-tt); color: var(--color-on-tt); }
.w-week i.is-office { background: var(--color-office); color: var(--color-ink); }

/* Estimate: the number we deduce, editable in place. */
.w-est { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface-sunken); }
.w-est p { margin: 0; font: 400 14px/19px var(--font-sans); color: var(--color-ink-muted); }
.w-est b { display: block; font: 700 30px/36px var(--font-rounded); color: var(--color-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.w-est .f-stepper__ctl { background: var(--color-surface); }
.w-est .f-stepper__ctl button { width: 48px; height: 44px; cursor: pointer; }
.w-disclose { align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0; border: 0; background: none; color: var(--color-tt); font: 600 15px/20px var(--font-sans); cursor: pointer; }
.w-disclose .f-ico { transition: transform var(--dur-base) var(--ease-out); }
.w-disclose[aria-expanded="true"] .f-ico { transform: rotate(90deg); }
.w-missions { display: grid; gap: var(--space-2); }
.w-missions[hidden] { display: none; }
.w-mrow { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 52px; padding-left: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--color-line); }
.w-mrow b { font: 700 20px/24px var(--font-rounded); font-variant-numeric: tabular-nums; margin-right: var(--space-3); }
.w-mrow span { flex: 1; font: 400 15px/20px var(--font-sans); }

/* Buttons for the web (pill, 52 px). */
.w-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 52px; padding: 0 var(--space-6); border-radius: var(--radius-full); border: 0; font: 600 17px/22px var(--font-sans); cursor: pointer; text-decoration: none !important; white-space: nowrap; }
.w-btn--primary { background: var(--color-tt); color: var(--color-on-tt) !important; }
.w-btn--quiet { background: var(--color-surface-sunken); color: var(--color-ink) !important; }
.w-btn--block { width: 100%; box-sizing: border-box; }
.w-btn .f-ico { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) { .w-btn--primary:hover { background: color-mix(in srgb, var(--color-tt) 88%, var(--color-ink)); } .w-btn--quiet:hover { background: color-mix(in srgb, var(--color-surface-sunken) 80%, var(--color-line-strong)); } }

/* WebResult: the answer. Remaining days first, the rule beside it. */
.w-result { background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); padding: var(--space-6) var(--space-5) var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.w-result__count { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-3); }
.w-result__count b { font: 700 clamp(64px, 14vw, 96px)/0.95 var(--font-rounded); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.w-result__count span { font: 500 19px/24px var(--font-sans); color: var(--color-ink-muted); }
.w-result__count--over b { color: var(--color-over-fg); }
.w-result .f-track { height: 18px; }
.w-result__scale { display: flex; justify-content: space-between; margin-top: -10px; font: 500 12px/16px var(--font-sans); color: var(--color-ink-muted); font-variant-numeric: tabular-nums; }
.w-result__line { margin: 0; font: 400 16px/23px var(--font-sans); text-wrap: pretty; }
.w-result__line b { font-weight: 600; font-variant-numeric: tabular-nums; }
.w-result__src { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding-top: var(--space-3); border-top: 1px solid var(--color-line); font: 400 13px/18px var(--font-sans); color: var(--color-ink-muted); }
.w-result__src a { margin-left: auto; font-weight: 600; white-space: nowrap; }
.w-num { display: inline-block; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.w-num.is-tick { opacity: 0; transform: translateY(-6px); transition-duration: 0ms; }
@media (prefers-reduced-motion: reduce) { .w-num.is-tick { transform: none; } }

/* Next actions after the answer: keep counting, get the report. */
.w-next { display: grid; gap: var(--space-2); }

/* WebToday: the daily gesture. Same pieces as the app (AppDayPicker). */
.w-card { background: var(--color-surface); border-radius: var(--radius-xl); box-shadow: var(--shadow-card); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.w-card__h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin: 0;  flex-wrap: wrap; row-gap: 2px; }
.w-card__h h2, .w-h2 { margin: 0; font: 700 22px/28px var(--font-rounded); letter-spacing: -0.01em; }
.w-card__h span { font: 400 15px/20px var(--font-sans); color: var(--color-ink-muted); white-space: nowrap; }
.w-today .f-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.w-today .f-kind { cursor: pointer; font: 600 16px/20px var(--font-sans); text-align: left; }
.w-today .f-undo { animation: w-rise var(--dur-base) var(--ease-out); }

/* WebMonth: the month to look back and correct. Day popover on desktop, bottom sheet on a phone. */
.w-month .f-calhead .f-iconbtn { width: 44px; height: 44px; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--color-ink); display: grid; place-items: center; cursor: pointer; }
.w-month .f-day { border: 0; cursor: pointer; font-size: 16px; }
.w-month .f-cal { gap: 6px; }
.w-sum { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; font: 400 14px/20px var(--font-sans); color: var(--color-ink-muted); }
.w-sum b { color: var(--color-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.w-pop { position: fixed; inset: auto 0 0 0; z-index: 30; background: var(--color-surface); border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-sheet); padding: var(--space-3) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: var(--space-3); animation: w-sheet var(--dur-sheet) var(--ease-drawer); }
.w-pop[hidden] { display: none; }
.w-pop__grab { width: 36px; height: 5px; border-radius: var(--radius-full); background: var(--color-line-strong); align-self: center; opacity: .6; }
.w-pop__h { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.w-pop__h h3 { margin: 0; font: 700 19px/24px var(--font-rounded); }
.w-scrim { position: fixed; inset: 0; z-index: 29; background: color-mix(in srgb, var(--color-ink) 28%, transparent); animation: w-fade-in-scrim var(--dur-sheet) var(--ease-out); }
.w-scrim[hidden] { display: none; }
@keyframes w-sheet { from { transform: translateY(100%); } }
@keyframes w-fade-in-scrim { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .w-pop, .w-scrim { animation-name: w-fade-in-scrim; animation-duration: var(--dur-fast); } }

/* WebThresholds: the three rules side by side (AppThresholdRow). */
.w-thr .f-thr { padding-block: var(--space-4); }

/* WebReport: the reason to come back. A real preview of the PDF, then three actions. */
.w-report { display: grid; gap: var(--space-5); align-items: center; padding: var(--space-6) var(--space-5); border-radius: var(--radius-xl); background: color-mix(in srgb, var(--color-tt-soft) 55%, var(--color-paper)); }
.w-report__paper { justify-self: center; width: min(260px, 72%); transform: rotate(-2deg); transform-origin: 50% 80%; }
.w-report__paper .f-paper { box-shadow: var(--shadow-card), var(--shadow-sheet); }
.w-report__body { display: flex; flex-direction: column; gap: var(--space-4); }
.w-report__body p { margin: 0; font: 400 16px/23px var(--font-sans); color: var(--color-ink); max-width: 46ch; text-wrap: pretty; }
.w-acts { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.w-act { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); min-height: 64px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); background: var(--color-surface); }
.w-act__i { width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--color-tt-soft); color: var(--color-tt); display: grid; place-items: center; }
.w-act b { display: block; font: 600 16px/21px var(--font-sans); }
.w-act small { display: block; font: 400 13px/18px var(--font-sans); color: var(--color-ink-muted); }
.w-act .w-btn { min-height: 44px; padding: 0 var(--space-4); font-size: 15px; }
.w-act__ok { display: inline-flex; align-items: center; gap: 6px; font: 600 14px/18px var(--font-sans); color: var(--color-tt); }

/* WebRules: each rule, its quote and its source. Native disclosure, nothing hidden from find-in-page once open. */
.w-rules { display: grid; gap: var(--space-2); }
.w-rule { border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--color-line); }
.w-rule summary { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--space-3); align-items: center; padding: var(--space-4); cursor: pointer; border-radius: var(--radius-lg); }
.w-rule summary::-webkit-details-marker { display: none; }
.w-rule summary b { font: 600 17px/22px var(--font-sans); }
.w-rule summary small { grid-column: 1; font: 400 13px/18px var(--font-sans); color: var(--color-ink-muted); }
.w-rule summary .f-ico { grid-column: 2; grid-row: 1 / span 2; color: var(--color-ink-muted); transition: transform var(--dur-base) var(--ease-out); }
.w-rule[open] summary .f-ico { transform: rotate(180deg); }
.w-rule__b { padding: 0 var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.w-rule__b p { margin: 0; font: 400 15px/22px var(--font-sans); max-width: 68ch; }
.w-rule__b blockquote { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-sunken); font: italic 400 15px/22px var(--font-sans); }
.w-rule__b blockquote[lang="it"] { font-style: italic; }
.w-unsettled { display: flex; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-warn-bg); font: 400 15px/21px var(--font-sans); }
.w-unsettled .f-ico { color: var(--color-warn-fg); margin-top: 1px; }
.w-unsettled b { font-weight: 600; }

/* Sections: generous separation, headings that carry their own weight. */
.w-sec { display: flex; flex-direction: column; gap: var(--space-4); padding-top: 56px; }
.w-sec__h { display: flex; flex-direction: column; gap: var(--space-1); }
.w-sec__h p { margin: 0; font: 400 16px/23px var(--font-sans); color: var(--color-ink-muted); max-width: 52ch; }

/* WebFoot: the disclaimer word for word, the data controls, the maker. */
.w-foot { margin-top: 72px; padding: var(--space-6) 0 calc(var(--space-8) + env(safe-area-inset-bottom)); position: relative; }
.w-foot .f-border-h { position: absolute; left: 0; right: 0; top: 0; --bl: var(--color-line-strong); opacity: .7; }
.w-foot__in { display: grid; gap: var(--space-5); font: 400 14px/20px var(--font-sans); color: var(--color-ink-muted); }
.w-foot__disc { margin: 0; color: var(--color-ink); font: 500 15px/22px var(--font-sans); max-width: 60ch; }
.w-foot__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; }
.w-foot__links a, .w-foot__links button { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--color-tt); font: 600 14px/20px var(--font-sans); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.w-foot__links .is-danger { color: var(--color-over-fg); }

/* Layout: one column on a phone; two from 960 px (the conversation on the left, the live answer on the right). */
.w-main { display: grid; gap: var(--space-4); padding-top: var(--space-5); }
.w-aside { display: flex; flex-direction: column; gap: var(--space-4); }
.w-track { display: grid; gap: var(--space-4); }
@media (min-width: 960px) {
  .w-wrap { padding: 0 var(--space-8); }
  .w-hero { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; gap: var(--space-8); padding-top: 56px; }
  .w-hero__text { display: flex; flex-direction: column; gap: var(--space-5); padding-bottom: var(--space-6); }
  .w-pano { margin: 0 calc(-1 * var(--space-8)) 0 0; }
  .w-main { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); align-items: start; padding-top: var(--space-8); }
  .w-aside { position: sticky; top: 80px; }
  .w-track { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); align-items: start; }
  .w-report { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); padding: var(--space-8) 48px; gap: 48px; }
  .w-report__paper { width: 100%; max-width: 300px; }
  .w-pop { position: absolute; inset: auto; width: 340px; border-radius: var(--radius-xl); box-shadow: var(--shadow-card), var(--shadow-sheet); border: 1px solid var(--color-line); padding-bottom: var(--space-5); animation: w-pop var(--dur-base) var(--ease-out); transform-origin: top center; }
  .w-pop__grab { display: none; }
  .w-scrim { background: transparent; animation: none; }
  .w-foot__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
}
@keyframes w-pop { from { opacity: 0; transform: scale(.96) translateY(-4px); } }

/* Month: day cells stay thumb-sized on wide cards. */
.w-month .f-cal { justify-items: center; }
.w-month .f-day { width: 100%; max-width: 48px; }
/* Phone: actions stack the button under the text; the header pill drops its unit. */
@media (max-width: 559px) {
  .w-act { grid-template-columns: 40px minmax(0, 1fr); }
  .w-act > .w-btn, .w-act > .w-act__ok { grid-column: 2; justify-self: start; }
  .w-head__count span { display: none; }
  .w-head__count b::after { content: " j"; font-weight: 600; font-size: 14px; }
  .w-hero__text { display: flex; flex-direction: column; gap: var(--space-4); }
}
@media (min-width: 960px) {
  .w-h1 { font-size: clamp(40px, 4.2vw, 56px); max-width: 16ch; }
}

.w-act--err { box-shadow: inset 0 0 0 2px var(--color-over-fg); }
.w-act--err .w-act__i { background: var(--color-over-bg); color: var(--color-over-fg); }

/* Break-UI: long answers wrap instead of overflowing. */
.w-done__a { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 359px) {
  .w-head .f-wordmark { font-size: 0; gap: 0; }
}

/* Reading pages (/privacy, /support): one column, the page's type scale. */
.w-doc { max-width: 68ch; padding: var(--space-8) 0 0; font: 400 17px/26px var(--font-sans); }
.w-doc .w-h1 { font-size: clamp(32px, 5vw, 48px); max-width: none; }
.w-doc .w-lead { margin-top: var(--space-4); max-width: 52ch; }
.w-doc section { margin-top: var(--space-8); }
.w-doc h2 { margin: 0 0 var(--space-3); font: 700 21px/28px var(--font-rounded); letter-spacing: -0.01em; text-wrap: balance; }
.w-doc p { margin: 0 0 var(--space-3); text-wrap: pretty; }
.w-doc code { font: 500 0.92em/1 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--color-surface-sunken); padding: 1px 5px; border-radius: var(--radius-xs); }
.w-doc__date { margin-top: var(--space-8) !important; color: var(--color-ink-muted); font-size: 14px; }
/* Headings the script focuses after a step (tabindex -1) take the focus without a ring; controls keep theirs. */
[tabindex="-1"]:focus { outline: none; }
.w-head__in > .f-wordmark + .f-lang { margin-left: auto; }