/* AI Dumbed Down, P1 shell. Colors match approved mockups v1 (2026-11-06 6:11 PM). */
:root {
  --brand: #0B5D56;
  --brand-dark: #08423D;
  --brand-soft: #EAF4F3;
  --brand-ink: #FFFFFF;
  --brand-sub: #CFE9E6;
  --amber: #B45309;
  --amber-soft: #FFF3E6;
  --amber-ink: #8A4B08;
  --bg: #F4F6F8;
  --surface: #FFFFFF;
  --text: #0E1116;
  --text-2: #2B313B;
  --muted: #4A515C;
  --line: #D5DAE0;
  --line-2: #E8EBEE;
  --track: #E2E6EA;
  --dash: #8A929C;
  --dot: #B6BDC6;
  --danger: #B42318;
  --focus: #2563EB;
  --gmail: #2563EB;
  --outlook: #15803D;
  --kinno: #B42318;
  --gcal: #7C3AED;
  --claude: #B45309;
  --bw: 1px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --brand: #3BB3A6;
  --brand-dark: #6FD1C6;
  --brand-soft: #12302D;
  --brand-ink: #04211E;
  --brand-sub: #0B3D38;
  --amber: #F59E0B;
  --amber-soft: #33240F;
  --amber-ink: #FBBF6A;
  --bg: #0E1116;
  --surface: #181C23;
  --text: #F2F4F7;
  --text-2: #D0D5DD;
  --muted: #A9B0BA;
  --line: #333A45;
  --line-2: #262C35;
  --track: #2B313B;
  --dash: #6B7380;
  --dot: #4A515C;
  --danger: #F97066;
  --focus: #7AA7FF;
  color-scheme: dark;
}
/* High contrast: stronger lines and pure text colors */
:root[data-contrast="high"] { --text-2: var(--text); --muted: var(--text); --line: #0E1116; --line-2: #0E1116; --bw: 2px; }
:root[data-theme="dark"][data-contrast="high"] { --line: #F2F4F7; --line-2: #F2F4F7; --bg: #000; --surface: #0B0D10; }

/* 5 font sizes, standard and up only (Q10) */
html { font-size: 16px; }
html[data-font="2"] { font-size: 18px; }
html[data-font="3"] { font-size: 20px; }
html[data-font="4"] { font-size: 23px; }
html[data-font="5"] { font-size: 26px; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1, h2, h3, .display { font-family: "Space Grotesk", Inter, system-ui, sans-serif; }

#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: max(1.5rem, env(safe-area-inset-top)) 1rem max(1.25rem, env(safe-area-inset-bottom));
}

/* ---------- Buttons ---------- */
.btn {
  min-height: 3rem;
  border-radius: 0.875rem;
  border: var(--bw) solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0 1rem;
}
.btn-primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); font-weight: 700; }
.btn-outline { border-color: var(--brand); color: var(--brand); }
.btn-danger { border-color: var(--danger); color: var(--danger); }
.btn-big { min-height: 4.25rem; border-radius: 1rem; font-size: 1.375rem; font-weight: 700; width: 100%; }
.btn-big.btn-plain { border: 3px solid var(--text); background: var(--surface); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.625rem; }
/* Side by side at normal sizes; each takes the full width once the text is big */
.btn-row > .btn { flex: 1 1 7rem; min-width: 0; }
.btn { line-height: 1.2; padding-top: 0.25rem; padding-bottom: 0.25rem; overflow-wrap: break-word; }
.icon-btn {
  width: 3rem; height: 3rem; flex: none;
  border-radius: 0.875rem;
  border: var(--bw) solid var(--line);
  background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn svg { width: 1.375rem; height: 1.375rem; stroke: var(--text); }
.linkish { background: none; border: none; padding: 0; color: var(--brand); font-weight: 600; font-size: 0.8125rem; text-align: left; min-height: 2.75rem; }

/* ---------- Top bars ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 3rem; }
.topbar h1 { margin: 0; font-size: 1.375rem; text-align: center; flex: 1; }
.dash-title { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.dash-title .count { font-size: 0.8125rem; color: var(--muted); font-weight: 500; }
.dash-title .name { font-family: "Space Grotesk", sans-serif; font-size: 1.5rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Welcome (first open) ---------- */
.welcome { background: var(--surface); padding: max(3.5rem, env(safe-area-inset-top)) 1.75rem max(2.25rem, env(safe-area-inset-bottom)); gap: 1.75rem; }
.brandmark { display: flex; align-items: center; gap: 0.625rem; }
.brandmark .logo { width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; background: var(--brand); color: var(--brand-ink); display: flex; align-items: center; justify-content: center; font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1.125rem; }
.brandmark .word { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1.25rem; }
/* The welcome screen always shows the big high-contrast style, whatever the setting */
.welcome h1 { margin: 1.5rem 0 0; font-size: 34px; line-height: 1.2; }
.welcome .lead { margin: 0; font-size: 24px; line-height: 1.4; font-weight: 500; }
.welcome .note { margin: 0; font-size: 18px; line-height: 1.45; color: var(--text); }
.welcome .foot { margin: 0; font-size: 16px; line-height: 1.45; text-align: center; color: var(--text); }
.welcome .btn-big { font-size: 22px; min-height: 68px; }
.spacer { flex: 1; }
.stack { display: flex; flex-direction: column; gap: 0.875rem; }

/* ---------- Dashboard grid: 3 wide x 5 tall (Q8) ---------- */
/* Fits one phone screen. min-height is in rem, so at the biggest text sizes the page grows and scrolls instead of clipping. */
.screen.dash { height: 100vh; height: 100dvh; min-height: 38rem; }
.grid-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; touch-action: pan-y; }
.grid {
  flex: 1 1 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
  gap: 0.625rem;
  min-height: 21rem;
}
.tile {
  position: relative;
  background: var(--surface);
  border: var(--bw) solid var(--line);
  border-radius: 1.125rem;
  padding: 0.625rem 0.75rem;
  color: var(--text);
  text-align: left;
  display: flex; flex-direction: column; justify-content: space-between; gap: 0.25rem;
  overflow: hidden;
  min-width: 0;
}
.tile .t-icon svg { width: 1.625rem; height: 1.625rem; stroke: var(--brand); }
.tile .t-icon.amber svg { stroke: var(--amber); }
.tile .t-label { font-size: 0.875rem; font-weight: 700; line-height: 1.2; overflow-wrap: break-word; hyphens: auto; }
.tile .t-sub { font-size: 0.75rem; color: var(--muted); line-height: 1.25; }
.tile.feature { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.tile.feature .t-kicker { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-sub); }
:root[data-theme="dark"] .tile.feature .t-kicker, :root[data-theme="dark"] .tile.feature .t-cta { color: var(--brand-ink); opacity: 0.8; }
.tile.feature .t-body { font-size: 1rem; font-weight: 600; line-height: 1.25; }
.tile.feature { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.tile.feature .t-cta { font-size: 0.8125rem; font-weight: 600; color: var(--brand-sub); }
.tile .t-head { display: flex; align-items: center; justify-content: space-between; gap: 0.25rem; }
.tile .t-list { display: flex; flex-direction: column; gap: 0.375rem; flex: 1; justify-content: flex-start; }
.tile .chip { background: var(--brand-soft); border-radius: 0.625rem; padding: 0.4rem 0.6rem; font-size: 0.8125rem; font-weight: 600; }
.tile .chip small { display: block; color: var(--brand); font-size: 0.75rem; }
.tile .chip.warm { background: var(--amber-soft); }
.tile .chip.warm small { color: var(--amber-ink); }
.tile .check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--muted); }
.tile .check i { width: 1rem; height: 1rem; border: 2px solid var(--brand); border-radius: 0.3rem; flex: none; }
/* Two biggest text sizes: give the grid more height, drop the small second line, keep labels whole */
html[data-font="2"] .screen.dash { min-height: 46rem; }
html[data-font="3"] .screen.dash { min-height: 50rem; }
html[data-font="4"] .screen.dash { min-height: 50rem; }
html[data-font="5"] .screen.dash { min-height: 54rem; }
/* Larger (the size the welcome "Yes" picks) gets the same compact tiles */
html[data-font="2"] .tile .t-sub, html[data-font="2"] .tile.feature .t-cta,
html[data-font="3"] .tile .t-sub, html[data-font="3"] .tile.feature .t-cta { display: none; }
html[data-font="2"] .tile .t-label, html[data-font="3"] .tile .t-label { font-size: 0.8rem; }
html[data-font="2"] .tile.feature .t-body, html[data-font="3"] .tile.feature .t-body { font-size: 0.875rem; }
html[data-font="2"] .tile .chip, html[data-font="2"] .tile .check,
html[data-font="3"] .tile .chip, html[data-font="3"] .tile .check { font-size: 0.75rem; }
/* Interview card at the two biggest sizes: the question only */
html[data-font="4"] .tile.feature .t-kicker, html[data-font="5"] .tile.feature .t-kicker { display: none; }
html[data-font="4"] .tile .chip, html[data-font="5"] .tile .chip, html[data-font="4"] .tile .check, html[data-font="5"] .tile .check { font-size: 0.6875rem; }
/* Reorganize mode: keep the grid full size and let the page scroll to the controls */
.screen.dash.editing { height: auto; }
.editing .grid { flex: none; height: 34rem; }
html[data-font="4"] .tile .t-sub, html[data-font="5"] .tile .t-sub { display: none; }
html[data-font="4"] .tile, html[data-font="5"] .tile { padding: 0.5rem; }
html[data-font="4"] .tile .t-icon svg, html[data-font="5"] .tile .t-icon svg { width: 1.125rem; height: 1.125rem; }
html[data-font="4"] .tile .t-label, html[data-font="5"] .tile .t-label { font-size: 0.75rem; hyphens: auto; }
html[data-font="4"] .tile.feature .t-body, html[data-font="5"] .tile.feature .t-body { font-size: 0.8125rem; }
html[data-font="4"] .tile.feature .t-cta, html[data-font="5"] .tile.feature .t-cta { display: none; }
.empty-cell { border: 2px dashed var(--line); border-radius: 1.125rem; background: transparent; }
.editing .empty-cell { border-color: var(--dash); }
.editing .tile { border-style: dashed; border-width: 2px; }
.tile.selected { outline: 4px solid var(--focus); outline-offset: 1px; }
.tile .size-tag { position: absolute; top: 0.375rem; right: 0.375rem; font-size: 0.6875rem; font-weight: 700; background: var(--text); color: var(--bg); border-radius: 0.5rem; padding: 0.125rem 0.375rem; }

.want-btn {
  margin-top: 0.625rem;
  width: 100%;
  background: transparent;
  border: 2px dashed var(--dash);
  border-radius: 1.125rem;
  padding: 0.75rem 0.875rem;
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.8125rem; font-weight: 600; line-height: 1.3; text-align: left;
  min-height: 3.25rem;
}
.want-btn svg { width: 1.75rem; height: 1.75rem; stroke: var(--text); flex: none; }

.dots { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; min-height: 2.75rem; }
.dots button { border: none; background: none; padding: 0; width: 2.75rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; }
.dots button span { width: 0.5rem; height: 0.5rem; border-radius: 0.25rem; background: var(--dot); display: block; }
.dots button[aria-current="true"] span { width: 1.375rem; background: var(--brand); }

/* Edit (reorganize manually) controls */
.editbar { background: var(--surface); border: var(--bw) solid var(--line); border-radius: 1rem; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.editbar .hint { font-size: 0.875rem; color: var(--text-2); margin: 0; }
.editbar .row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.375rem; }
.editbar .row .btn { padding: 0 0.25rem; font-size: 0.8125rem; min-height: 2.75rem; }
.editbar .label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }

/* ---------- Menu panel (top right) ---------- */
.scrim { position: fixed; inset: 0; background: rgba(14, 17, 22, 0.45); z-index: 20; display: flex; justify-content: flex-end; align-items: flex-start; }
.menu-panel {
  margin: max(1rem, env(safe-area-inset-top)) max(0.75rem, calc((100vw - 480px) / 2 + 0.75rem)) 0 0;
  width: min(20rem, calc(100vw - 1.5rem));
  background: var(--surface);
  border: var(--bw) solid var(--line);
  border-radius: 1.125rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  padding: 0.5rem;
  max-height: calc(100dvh - 2rem);
  overflow: auto;
}
.menu-panel .menu-head { display: flex; justify-content: space-between; align-items: center; padding: 0.25rem 0.25rem 0.5rem 0.75rem; }
.menu-panel .menu-head strong { font-family: "Space Grotesk", sans-serif; font-size: 1.125rem; }
.menu-item { width: 100%; min-height: 3.25rem; display: flex; align-items: center; gap: 0.75rem; padding: 0 0.75rem; border: none; background: none; border-radius: 0.75rem; font-size: 1rem; font-weight: 600; text-align: left; }
.menu-item:hover { background: var(--brand-soft); }
.menu-item svg { width: 1.375rem; height: 1.375rem; stroke: var(--brand); flex: none; }

/* ---------- Cards, lists, settings ---------- */
.card { background: var(--surface); border: var(--bw) solid var(--line); border-radius: 1.125rem; padding: 0.75rem 1rem; }
.section-title { display: flex; justify-content: space-between; align-items: baseline; margin-top: 0.375rem; }
.section-title h2 { margin: 0; font-family: Inter, sans-serif; font-size: 1rem; font-weight: 700; }
.section-title span { font-size: 0.75rem; color: var(--muted); }
.small-note { font-size: 0.75rem; line-height: 1.4; color: var(--muted); text-align: center; margin: -0.25rem 0 0; }
.p { margin: 0; font-size: 0.9375rem; line-height: 1.45; color: var(--text-2); }

.gauge-card { display: flex; align-items: center; gap: 0.875rem; }
.gauge-card svg.gauge { width: 8.75rem; height: 5rem; flex: none; }
.gauge-card .g-info { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.kicker { font-size: 0.75rem; font-weight: 600; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.g-value { font-family: "Space Grotesk", sans-serif; font-size: 1.75rem; font-weight: 700; }
.g-value span { font-size: 0.9375rem; color: var(--muted); font-weight: 600; }
.g-desc { font-size: 0.8125rem; line-height: 1.35; color: var(--text-2); }
.gauge-edit { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.75rem; border-top: var(--bw) solid var(--line-2); margin-top: 0.75rem; }
.stepper { display: flex; align-items: center; gap: 0.5rem; }
.stepper input[type="range"] { flex: 1; accent-color: var(--brand); min-height: 2.75rem; }
.stepper .icon-btn { font-size: 1.5rem; font-weight: 700; }
.level-text { font-size: 0.875rem; line-height: 1.4; color: var(--text-2); margin: 0; }

.list { background: var(--surface); border: var(--bw) solid var(--line); border-radius: 1rem; display: flex; flex-direction: column; overflow: hidden; }
.list-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.75rem; border-bottom: var(--bw) solid var(--line-2); min-height: 3.5rem; }
.list-row:last-child { border-bottom: none; }
.list-row .swatch { width: 0.625rem; height: 2.25rem; border-radius: 0.3rem; flex: none; }
.list-row .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.list-row .title { font-size: 0.875rem; font-weight: 600; overflow-wrap: anywhere; }
.list-row .sub { font-size: 0.75rem; color: var(--muted); }
.list-row .status { font-size: 0.75rem; color: var(--muted); font-weight: 600; text-align: right; }
.list-row .btn { min-height: 2.75rem; font-size: 0.8125rem; padding: 0 0.75rem; }
.list-row.current { background: var(--brand-soft); }

details.advanced { background: var(--surface); border: var(--bw) solid var(--line); border-radius: 1rem; }
details.advanced summary { min-height: 3rem; display: flex; align-items: center; padding: 0 1rem; font-weight: 700; cursor: pointer; list-style: none; }
details.advanced summary::-webkit-details-marker { display: none; }
details.advanced summary::after { content: "▾"; margin-left: auto; font-size: 1rem; }
details.advanced[open] summary::after { content: "▴"; }
details.advanced .adv-body { padding: 0 1rem 1rem; display: flex; flex-direction: column; gap: 0.625rem; }

.choice-group { display: flex; flex-direction: column; gap: 0.5rem; }
.choice {
  display: flex; align-items: center; gap: 0.75rem;
  min-height: 3.25rem; padding: 0.5rem 0.875rem;
  border: var(--bw) solid var(--line); border-radius: 0.875rem; background: var(--surface);
  text-align: left; width: 100%;
}
.choice[aria-checked="true"] { border: 3px solid var(--brand); background: var(--brand-soft); }
.choice .radio { width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 2px solid var(--muted); flex: none; }
.choice[aria-checked="true"] .radio { border: 6px solid var(--brand); }
.choice .c-text { display: flex; flex-direction: column; }
.choice .c-sample { font-weight: 600; }
.choice .c-sub { font-size: 0.75rem; color: var(--muted); }

.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.25rem; }
.switch { position: relative; width: 3.5rem; height: 2rem; border-radius: 1rem; border: var(--bw) solid var(--line); background: var(--track); flex: none; padding: 0; }
.switch::after { content: ""; position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.switch[aria-checked="true"] { background: var(--brand); border-color: var(--brand); }
.switch[aria-checked="true"]::after { left: auto; right: 0.1875rem; }

.gate { display: flex; flex-direction: column; gap: 0.875rem; }
.gate ul { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.375rem; font-size: 0.9375rem; line-height: 1.4; color: var(--text-2); }
.checkline { display: flex; align-items: center; gap: 0.75rem; min-height: 3rem; font-weight: 700; font-size: 1rem; }
.checkline input { width: 1.5rem; height: 1.5rem; accent-color: var(--brand); }

.text-input { min-height: 3rem; border-radius: 0.75rem; border: var(--bw) solid var(--line); background: var(--surface); padding: 0 0.75rem; width: 100%; font-size: 1rem; }
.lib-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.lib-item { min-height: 4.5rem; border: var(--bw) solid var(--line); background: var(--surface); border-radius: 0.875rem; padding: 0.625rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; text-align: left; }
.lib-item svg { width: 1.375rem; height: 1.375rem; stroke: var(--brand); }
.lib-item .title { font-weight: 700; font-size: 0.875rem; }
.lib-item .sub { font-size: 0.6875rem; color: var(--muted); }
.lib-item:disabled { opacity: 0.45; }

.placeholder { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; padding: 2rem 1rem; }
.placeholder svg { width: 3rem; height: 3rem; stroke: var(--brand); }
.placeholder h2 { margin: 0; font-size: 1.5rem; }

#toast {
  pointer-events: none;
  position: fixed; left: 50%; bottom: max(1.5rem, env(safe-area-inset-bottom)); transform: translateX(-50%);
  max-width: min(26rem, calc(100vw - 2rem));
  background: var(--text); color: var(--bg);
  padding: 0.875rem 1.125rem; border-radius: 0.875rem;
  font-size: 0.9375rem; font-weight: 600; line-height: 1.35; text-align: center;
  z-index: 50; box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- P2 screens: To-do, Brain dump, Calendar ---------- */
textarea { font: inherit; color: inherit; }
.card-h { margin: 0; font-size: 1.125rem; }
.field-label { font-weight: 600; font-size: 0.875rem; }
.empty { margin: 0; padding: 1rem; font-size: 0.9375rem; line-height: 1.45; text-align: center; color: var(--text-2); background: var(--surface); border: 2px dashed var(--line); border-radius: 1rem; }
.note-box { padding: 0.75rem; min-height: 7rem; line-height: 1.4; resize: vertical; }
.note-text { white-space: pre-wrap; }
.talk-btn { display: flex; align-items: center; justify-content: center; gap: 0.625rem; min-height: 4rem; border: 2px solid var(--brand); color: var(--brand); font-size: 1.0625rem; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.talk-btn svg { width: 1.5rem; height: 1.5rem; stroke: currentColor; flex: none; }
.talk-btn.listening { background: var(--brand); color: var(--brand-ink); }
.list-row .btn.mini, .btn.mini { min-height: 2.75rem; min-width: 2.75rem; padding: 0 0.625rem; font-size: 0.8125rem; }
.todo-row { flex-wrap: wrap; }
.todo-row .grow { flex: 1 1 8rem; }
.row-tools { display: flex; gap: 0.375rem; margin-left: auto; }
.todo-check { position: relative; width: 2.75rem; height: 2.75rem; flex: none; border: 3px solid var(--brand); border-radius: 0.625rem; background: var(--surface); padding: 0; }
.todo-check[aria-checked="true"] { background: var(--brand); }
.todo-check[aria-checked="true"]::after { content: ""; position: absolute; left: 32%; top: 12%; width: 28%; height: 55%; border: solid var(--brand-ink); border-width: 0 0.2rem 0.2rem 0; transform: rotate(45deg); }
.is-done .title { text-decoration: line-through; color: var(--muted); }
.event-row { display: flex; align-items: center; gap: 0.75rem; width: 100%; min-height: 4rem; padding: 0.625rem 0.75rem; border: none; border-bottom: var(--bw) solid var(--line-2); background: none; text-align: left; flex-wrap: wrap; }
.event-row:last-child { border-bottom: none; }
.ev-when { flex: 0 0 auto; font-size: 0.75rem; line-height: 1.35; font-weight: 700; color: var(--brand); }
.ev-what { flex: 1 1 8rem; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.ev-what .title { font-size: 0.9375rem; font-weight: 600; overflow-wrap: anywhere; }
.ev-what .sub { font-size: 0.75rem; color: var(--muted); }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip-btn { flex: 1 1 auto; }
.chip-btn[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.custom-rem { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 0.5rem; }
.fu-value { flex: 1; text-align: center; font-family: "Space Grotesk", sans-serif; font-size: 1.75rem; }
.icon-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.tile .check .clip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* A12: at the biggest text, rows wrap instead of running off a 390 wide phone. */
.list-row { flex-wrap: wrap; }
.list-row .grow { flex: 1 1 8rem; min-width: min(8rem, 100%); }
.gauge-card { flex-wrap: wrap; }
.gauge-card .g-info { flex: 1 1 8rem; }
.gauge-card > .btn, .gauge-card .btn { flex: none; white-space: nowrap; }
.topbar h1 { min-width: 0; overflow-wrap: anywhere; }
html[data-font="4"] .topbar h1 { font-size: 1.125rem; }
html[data-font="5"] .topbar h1 { font-size: 1rem; }
html[data-font="4"] .topbar .icon-btn, html[data-font="5"] .topbar .icon-btn { width: 2.5rem; height: 2.5rem; }
html[data-font="4"] .editbar .row, html[data-font="5"] .editbar .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* A15: 44px tap area for the switch, no ring on headings that take focus after a screen change */
.switch::before { content: ""; position: absolute; inset: -0.4rem; }
h1[tabindex="-1"]:focus { outline: none; }

/* A17 */
.text-input::placeholder { color: var(--muted); opacity: 1; }
html[data-font="4"] .tile .t-label, html[data-font="5"] .tile .t-label { hyphens: manual; }
html[data-font="4"] .tile.feature:has(.size-tag) .t-body, html[data-font="5"] .tile.feature:has(.size-tag) .t-body { margin-top: 1.5rem; }