/* Copium Counter colour schemes. Orange/red only for attention. Theme and light/dark are set by theme.js. */
:root {
  --paper: #F5F3F8;
  --card: #FFFFFF;
  --ink: #241F2E;
  --muted: #6A6375;
  --accent: #6B4FA0;
  --accent-soft: #ECE6F5;
  --line: #DDD7E6;
  --attention: #B4531F;
  --danger: #A23B2A;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode]) {
    --paper: #17141D;
    --card: #211C29;
    --ink: #ECE8F2;
    --muted: #A8A0B4;
    --accent: #B9A2E8;
    --accent-soft: #2E2640;
    --line: #362F42;
    --attention: #E39A6B;
    --danger: #E3876F;
    color-scheme: dark;
  }
}
:root[data-theme="haze"] {
  --paper: #F5F3F8;
  --card: #FFFFFF;
  --ink: #241F2E;
  --muted: #6A6375;
  --accent: #6B4FA0;
  --accent-soft: #ECE6F5;
  --line: #DDD7E6;
  --attention: #B4531F;
  --danger: #A23B2A;
  color-scheme: light;
}
:root[data-theme="haze"][data-dark] {
  --paper: #17141D;
  --card: #211C29;
  --ink: #ECE8F2;
  --muted: #A8A0B4;
  --accent: #B9A2E8;
  --accent-soft: #2E2640;
  --line: #362F42;
  --attention: #E39A6B;
  --danger: #E3876F;
  color-scheme: dark;
}
:root[data-theme="ember"] {
  --paper: #FAF5F0;
  --card: #FFFFFF;
  --ink: #2B211A;
  --muted: #76675C;
  --accent: #A4532B;
  --accent-soft: #F6E6DA;
  --line: #E6DACF;
  --attention: #B03A48;
  --danger: #A12A38;
  color-scheme: light;
}
:root[data-theme="ember"][data-dark] {
  --paper: #1A1512;
  --card: #241D18;
  --ink: #F1E9E2;
  --muted: #B3A397;
  --accent: #E8956A;
  --accent-soft: #3A2A20;
  --line: #3B2F27;
  --attention: #F08A96;
  --danger: #F08A96;
  color-scheme: dark;
}
:root[data-theme="ocean"] {
  --paper: #F2F6F8;
  --card: #FFFFFF;
  --ink: #18262E;
  --muted: #5C6E78;
  --accent: #1F6F8B;
  --accent-soft: #DDEDF3;
  --line: #D3DFE5;
  --attention: #B4531F;
  --danger: #A23B2A;
  color-scheme: light;
}
:root[data-theme="ocean"][data-dark] {
  --paper: #10181C;
  --card: #172227;
  --ink: #E4EEF2;
  --muted: #9AB0BA;
  --accent: #6CC3DE;
  --accent-soft: #1D3540;
  --line: #27363D;
  --attention: #E39A6B;
  --danger: #E3876F;
  color-scheme: dark;
}
:root[data-theme="leaf"] {
  --paper: #F2F5EF;
  --card: #FFFFFF;
  --ink: #1C2618;
  --muted: #5D6A56;
  --accent: #3F6B35;
  --accent-soft: #E0EBD9;
  --line: #D2DCCB;
  --attention: #B4531F;
  --danger: #A23B2A;
  color-scheme: light;
}
:root[data-theme="leaf"][data-dark] {
  --paper: #121711;
  --card: #1A2118;
  --ink: #E5EEE1;
  --muted: #A2B19B;
  --accent: #8FC27A;
  --accent-soft: #233220;
  --line: #2E3A2A;
  --attention: #E39A6B;
  --danger: #E3876F;
  color-scheme: dark;
}
:root[data-theme="paper"] {
  /* Paper: the Care style (Ruimte style guide): warm paper, forest green, terracotta only for attention. */
  --paper: #F7F7F0;
  --card: #FFFFFF;
  --ink: #233A32;
  --muted: #66746D;
  --accent: #355E4D;
  --accent-soft: #EEF2E9;
  --line: #DFE4DB;
  --attention: #A54829;
  --danger: #813B29;
  color-scheme: light;
}
:root[data-theme="paper"][data-dark] {
  --paper: #17201B;
  --card: #1F2A24;
  --ink: #E8ECE4;
  --muted: #A3B0A8;
  --accent: #9CC3AE;
  --accent-soft: #26352D;
  --line: #33433A;
  --attention: #E39A6B;
  --danger: #E3876F;
  color-scheme: dark;
}
:root[data-theme="mono"] {
  --paper: #FFFFFF;
  --card: #FFFFFF;
  --ink: #000000;
  --muted: #444444;
  --accent: #000000;
  --accent-soft: #E6E6E6;
  --line: #8A8A8A;
  --attention: #B4531F;
  --danger: #A0001A;
  color-scheme: light;
}
:root[data-theme="mono"][data-dark] {
  --paper: #000000;
  --card: #111111;
  --ink: #FFFFFF;
  --muted: #CCCCCC;
  --accent: #FFFFFF;
  --accent-soft: #333333;
  --line: #777777;
  --attention: #FFB27A;
  --danger: #FF8A8A;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
/* Height of the bottom menu (4.1.1 icons + word). Everything that floats above it uses this. */
:root { --tabs-h: 64px; }
html { background: var(--paper); }
body {
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.5 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  padding-bottom: calc(var(--tabs-h) + 12px + env(safe-area-inset-bottom));
}
h1, h2, h3, legend { font-family: Georgia, "Times New Roman", serif; font-weight: normal; }
h1 { font-size: 1.3rem; margin: 0; color: var(--accent); }
h2 { font-size: 1.4rem; margin: 0.5rem 0; }
h3 { font-size: 1.1rem; margin: 1.5rem 0 0.5rem; }
a { color: var(--accent); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.muted { color: var(--muted); font-size: 0.92rem; }
.top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.private { margin: 0; font-size: 0.85rem; color: var(--muted); }
main { max-width: 560px; margin: 0 auto; padding: 16px; }

button, .button {
  font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 14px; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
}
button:focus-visible, .button:focus-within, textarea:focus-visible, input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--paper); }
button.danger { color: var(--danger); border-color: var(--danger); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.link { background: none; border: none; color: var(--accent); text-decoration: underline; padding: 4px 8px; min-height: 0; }

.tap {
  display: flex; flex-direction: column; width: min(70vw, 240px); aspect-ratio: 1; margin: 16px auto 8px;
  border-radius: 50%; background: var(--accent); color: var(--paper); border: none;
  box-shadow: 0 6px 0 rgba(0,0,0,0.15); transition: transform 0.08s;
}
.tap:active { transform: translateY(3px); box-shadow: 0 3px 0 rgba(0,0,0,0.15); }
.tap-plus { font-family: Georgia, serif; font-size: 3.4rem; line-height: 1; letter-spacing: 0.06em; }
.tap-label { font-size: 1.1rem; letter-spacing: 0.05em; }
.counts { text-align: center; color: var(--muted); margin: 0 0 16px; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin: 12px 0; }
.card.attention { border-color: var(--attention); }
/* SH-0: support is offered calmly, never in the attention colour (agentZero). */
.card.support { border-color: var(--line); }
.find-support { font-weight: 600; white-space: nowrap; }
.card h3 { margin-top: 0; }
.detail-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.saved { margin: 0; color: var(--accent); }
fieldset { border: none; padding: 0; margin: 12px 0; }
legend { font-size: 1rem; margin-bottom: 6px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border-radius: 999px; padding: 6px 12px; min-height: 40px; font-size: 0.95rem; }
.chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); font-weight: 600; }
.scale .chip { min-width: 48px; }
.note { display: block; margin: 12px 0; }
.note small { color: var(--muted); }
textarea, input[type="text"] {
  width: 100%; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-top: 4px;
}
.warn { color: var(--attention); }

.recent { list-style: none; padding: 0; margin: 0; }
.recent li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.recent time { color: var(--muted); font-size: 0.9rem; white-space: nowrap; }

.bars { list-style: none; padding: 0; margin: 0; }
.bars li { display: grid; grid-template-columns: minmax(0, 11rem) 1fr 2.5rem; gap: 10px; align-items: center; padding: 4px 0; }
.bar { height: 12px; background: var(--accent-soft); border-radius: 6px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--accent); }
.n { text-align: right; font-variant-numeric: tabular-nums; }

details { border-bottom: 1px solid var(--line); padding: 8px 0; }
summary { cursor: pointer; min-height: 32px; }
.plain { padding-left: 1.1rem; margin: 0; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.row input[type="text"] { flex: 1 1 10rem; width: auto; margin-top: 0; }
.preview { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 8px; overflow-x: auto; font-size: 0.8rem; }

.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: var(--card); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
}
.tabs button { border: none; border-radius: 0; background: none; min-height: 56px; font-size: 0.9rem; color: var(--muted); }
.tabs button[aria-current="page"] { color: var(--accent); font-weight: 600; box-shadow: inset 0 3px 0 var(--accent); }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--tabs-h) + 16px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity 0.2s; max-width: calc(100% - 32px);
}
.toast.show { opacity: 1; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.chips.spaced { margin-top: 8px; }
.lockscreen { max-width: 420px; margin: 18vh auto 0; padding: 16px; text-align: center; }
.lockscreen details { text-align: left; margin-top: 2rem; }
.tabs[hidden], main[hidden] { display: none; }
.tabs button[hidden] { display: none; }
.help-inline { border-left: 3px solid var(--attention); padding-left: 10px; }
.onboarding { max-width: 560px; margin: 0 auto; padding: 16px; }
.options { display: grid; gap: 8px; }
.option { display: block; text-align: left; width: 100%; padding: 12px 14px; }
.option[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.option strong { display: block; font-weight: 600; }
.option small { color: var(--muted); }
.wide { width: 100%; margin-top: 20px; }
.pops { font-size: 1.4rem; font-family: Georgia, serif; margin: 8px 0; }
.pops small { font-family: "Segoe UI", system-ui, sans-serif; font-size: 0.9rem; color: var(--muted); }
.pad { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; max-width: 360px; margin: 12px auto; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.bubble { aspect-ratio: 1; border-radius: 50%; padding: 0; min-height: 0; background: radial-gradient(circle at 35% 30%, var(--card), var(--accent-soft) 70%); border: 1px solid var(--line); }
.bubble.popped { background: var(--paper); border-style: dashed; transform: scale(0.9); }
.shop { list-style: none; padding: 0; margin: 0; }
.shop li { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.shop small { color: var(--muted); display: block; }
.swatch { display: inline-block; width: 14px; height: 14px; border-radius: 50%; margin-right: 6px; vertical-align: -2px; border: 1px solid var(--line); }
.goal { margin: 10px 0; }
.goal strong { display: block; margin-bottom: 4px; font-weight: 600; }
.goal input[type="number"] { width: 5.5rem; font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; margin-left: 6px; }
.goal-lines { list-style: none; padding: 0; margin: -6px 0 16px; text-align: center; color: var(--muted); font-size: 0.95rem; }
.goal-lines li { padding: 2px 0; }
#safety fieldset { margin: 18px 0 8px; }
#safety legend { font-family: inherit; font-weight: 600; }
.goal label { display: block; margin-top: 8px; }
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.day { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; min-height: 64px; border-radius: 10px; font-size: 0.85rem; }
.day[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.day .n { font-size: 1.15rem; font-family: Georgia, serif; text-align: center; }
.day .clear { color: var(--accent); font-size: 0.75rem; }
.day-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.day-row:last-child { border-bottom: none; }
select, input[type="time"] { font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; min-height: 44px; }

/* What's new guide */
.guide {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabs-h) + 4px + env(safe-area-inset-bottom));
  width: min(420px, calc(100% - 32px)); background: var(--card); border: 2px solid var(--accent); border-radius: 14px;
  padding: 12px 16px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); z-index: 10;
}
.guide[hidden] { display: none; }
.guide h3 { margin: 4px 0; }
.guide p { margin: 4px 0; }
.guide .row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.guide .row .link { margin-left: auto; }
.guide-focus { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
body.guiding main { padding-bottom: 260px; }

/* My reasons */
.reason { display: flex; gap: 12px; align-items: center; background: var(--accent-soft); border-radius: 12px; padding: 10px 12px; margin: 0 0 16px; }
.reason[hidden] { display: none; }
.reason img, .reasons-list img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; flex: none; }
.reason small { display: block; color: var(--muted); }
#detail .reason { margin: 8px 0; }
.reasons-list { list-style: none; padding: 0; margin: 8px 0; }
.reasons-list li { display: flex; gap: 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.reasons-list li span { flex: 1; }
.goal-limit input[type="number"] { margin-left: 0; }
.goal .muted { margin: 6px 0 0; font-size: 0.9rem; }

/* Sliders (weed details) */
.slider { margin: 10px 0; }
.slider label { display: flex; justify-content: space-between; gap: 8px; font-size: 0.95rem; }
.slider output { color: var(--muted); }
.slider input[type="range"] { width: 100%; accent-color: var(--accent); min-height: 32px; }
.slider.unset input[type="range"] { opacity: 0.45; }
.slider .ends { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--muted); }
#presets { margin-bottom: 8px; }
.slider .ends button[hidden] { visibility: hidden; }

/* Work */
label.inline { display: flex; flex-direction: column; gap: 4px; font-size: 0.9rem; flex: 1 1 8rem; }
label.inline input, #min-wage { font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; min-height: 44px; width: 100%; box-sizing: border-box; }
#min-wage { max-width: 10rem; }
#work-notice p { margin: 4px 0; }

/* Weed amounts (2.6.1): - value + */
.stepper { margin: 10px 0; }
.stepper .step-head { display: flex; justify-content: space-between; gap: 8px; font-size: 0.95rem; }
.stepper output { color: var(--muted); }
.stepper .step-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.stepper .step-row input { width: 6.5em; min-height: 40px; text-align: center; }
.stepper.unset .step-row input { opacity: 0.6; }
.stepper button.step { min-width: 44px; min-height: 40px; font-size: 1.2rem; padding: 0 10px; }
.stepper .step-head button[hidden] { display: none; }
label.product { display: block; margin: 10px 0; font-size: 0.95rem; }
label.product input { display: block; width: 100%; margin-top: 4px; }
.joint-item { border-top: 1px solid var(--line); padding: 10px 0; }
.joint-item > input[type="text"] { width: 100%; }
p.small { font-size: 0.85rem; margin: 4px 0; }
.rv-wrap.rv-empty { opacity: 0.45; }

/* Urge timer (2.8): a circle that grows on the in-breath, rests, and shrinks on the out-breath. */
.urge-open-wrap { text-align: center; margin: 4px 0 8px; }
.breath-wrap { display: flex; justify-content: center; align-items: center; height: 180px; }
.breath { width: 160px; height: 160px; border-radius: 50%; background: var(--accent-soft); border: 3px solid var(--accent);
  transform: scale(0.55); transition: transform 4s ease-in-out; }
.breath.in { transform: scale(1); transition-duration: 4s; }
.breath.hold { transform: scale(1); }
.breath.out { transform: scale(0.55); transition-duration: 6s; }
.breath-text { text-align: center; font-size: 1.3rem; margin: 4px 0; }
.urge-left { text-align: center; }
@media (prefers-reduced-motion: reduce) { .breath, .breath.in, .breath.out { transition: none; transform: scale(0.8); } }

/* Plan cards (2.9) */
.plans-row { justify-content: center; margin-bottom: 8px; }
.plan-card dl { margin: 0; }
.plan-card dt { font-size: 0.85rem; color: var(--muted); margin-top: 6px; }
.plan-card dd { margin: 0; }
.plans-list li { margin: 6px 0; }
textarea { width: 100%; font: inherit; }

/* Trends (2.10) */
.trend-bars li { grid-template-columns: minmax(0, 8.5rem) 1fr 3rem; }

/* Seeds (3.0) */
.actions-wrap { text-align: center; margin: 4px 0 10px; }
.actions-wrap .chips { justify-content: center; }
.seed-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 8px 0; text-align: center; font-size: 0.8rem; color: var(--muted); }
.seed-days .dots { display: flex; justify-content: center; gap: 3px; margin-bottom: 2px; }
.seed-days .dot { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--accent); }
.seed-days .dot.on { background: var(--accent); }

/* Soft close hint (3.1) */
.close-hint { position: fixed; left: 16px; right: 16px; bottom: 84px; max-width: 520px; margin: 0 auto; background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; box-shadow: 0 6px 24px rgba(0,0,0,.18); z-index: 30; display: flex; gap: 12px; align-items: center; }
.close-hint[hidden] { display: none; }
.close-hint p { margin: 0; flex: 1; font-size: 0.95rem; }

/* People I can reach out to (3.1.1) */
.person { margin: 8px 0; }
.person .ways { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.person .ways a { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--accent); text-decoration: none; color: var(--accent); background: var(--accent-soft); font-size: 0.9rem; }
.person .avail { font-size: 0.85rem; color: var(--muted); }
.channel-row { display: flex; gap: 6px; margin: 6px 0; align-items: center; }
.channel-row input { flex: 1; min-width: 0; }
/* 2.11 Encrypt my data + neutral look */
label.check { display: flex; align-items: center; gap: 10px; min-height: 44px; }
label.check input { width: 22px; height: 22px; accent-color: var(--accent); }

/* The valley (4.0): calm colours per theme, no animation. */
.valley-wrap svg { width: 100%; height: auto; display: block; border-radius: 12px; }
.valley-art { --v-sky: var(--accent-soft); --v-far: #B9C9A8; --v-hill: #8FAE78; --v-path: #D9CBA8; --v-stem: #4F7A3A; --v-leaf: #5F8F45; --v-crown: #4E7F3C; --v-trunk: #7A5A3C; --v-bloom: #E8D9F2; --v-heart: #E3B34F; --v-berry: #8E4B6B; }
:root[data-dark] .valley-art { --v-far: #2E3D2A; --v-hill: #3B5233; --v-path: #5A5240; --v-stem: #8DBF73; --v-leaf: #79AE5F; --v-crown: #6E9F55; --v-trunk: #9C7A58; --v-bloom: #CDB8E6; --v-heart: #E8C26A; --v-berry: #C98FA8; }
@media (prefers-color-scheme: dark) { :root:not([data-mode]) .valley-art { --v-far: #2E3D2A; --v-hill: #3B5233; --v-path: #5A5240; --v-stem: #8DBF73; --v-leaf: #79AE5F; --v-crown: #6E9F55; --v-trunk: #9C7A58; } }
:root[data-theme="mono"] .valley-art { --v-sky: #FFFFFF; --v-far: #DDDDDD; --v-hill: #BBBBBB; --v-path: #FFFFFF; --v-stem: #000000; --v-leaf: #555555; --v-crown: #333333; --v-trunk: #000000; --v-bloom: #FFFFFF; --v-heart: #000000; --v-berry: #000000; }
.v-sky { fill: var(--v-sky); }
.v-hill-far { fill: var(--v-far); }
.v-hill { fill: var(--v-hill); }
.v-path { fill: none; stroke: var(--v-path); stroke-width: 6; stroke-linecap: round; }
.v-stem, .v-sprout { fill: none; stroke: var(--v-stem); stroke-width: 1.2; stroke-linecap: round; }
.v-leaf { fill: var(--v-leaf); }
.v-crown { fill: var(--v-crown); }
.v-trunk { fill: none; stroke: var(--v-trunk); stroke-width: 1.6; }
.v-bloom { fill: var(--v-bloom); stroke: var(--v-stem); stroke-width: 0.4; }
.v-heart { fill: var(--v-heart); }
.v-berry { fill: var(--v-berry); }

/* 2.5.1 Strain list */
.strain-hint { display: block; margin-top: 4px; }
/* Buildings (4.1) */
.valley-art { --b-wall: #EFE6D6; --b-roof: #9C5B4A; --b-wood: #7A5A3C; --b-stone: #A9A39A; --b-door: #6B4A33; --b-window: #F2D98A; --b-soil: #7B5E43; --b-crop: #5F8F45; --b-barn: #B0634F; --b-light: #F2D98A; }
:root[data-dark] .valley-art { --b-wall: #CFC5B3; --b-roof: #7E4A3D; --b-wood: #A88762; --b-stone: #8A857E; --b-window: #F2D98A; --b-barn: #8E5040; }
:root[data-theme="mono"] .valley-art { --b-wall: #FFFFFF; --b-roof: #000000; --b-wood: #000000; --b-stone: #888888; --b-door: #000000; --b-window: #FFFFFF; --b-soil: #555555; --b-crop: #000000; --b-barn: #777777; --b-light: #FFFFFF; }
.b-wall { fill: var(--b-wall); stroke: var(--b-wood); stroke-width: 0.5; }
.b-roof { fill: var(--b-roof); }
.b-wood { fill: none; stroke: var(--b-wood); stroke-width: 1.2; stroke-linecap: round; }
.b-stone { fill: var(--b-stone); }
.b-door { fill: var(--b-door); }
.b-window { fill: var(--b-window); }
.b-soil { fill: var(--b-soil); }
.b-crop { fill: none; stroke: var(--b-crop); stroke-width: 1.2; stroke-linecap: round; }
.b-barn { fill: var(--b-barn); }
.b-light { fill: var(--b-light); }
/* Calmer menus (4.1.1): Settings groups and a menu with pictures. Rules: docs/ux.md */
.icon { flex: none; }
.lead { color: var(--muted); font-size: 0.92rem; display: flex; gap: 8px; align-items: baseline; }
.lead .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; transform: translateY(-1px); }
details.group { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 0; margin: 10px 0; }
details.group > summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 16px; min-height: 56px; color: var(--ink); }
details.group > summary::-webkit-details-marker { display: none; }
details.group > summary::after { content: ""; width: 8px; height: 8px; margin-left: auto; flex: none; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform 0.15s; }
details.group[open] > summary::after { transform: rotate(-135deg); }
details.group > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 14px; }
details.group > summary .icon { color: var(--accent); }
.group-label { display: flex; flex-direction: column; }
.group-title { font-family: Georgia, "Times New Roman", serif; font-size: 1.1rem; }
.group-label small { color: var(--muted); font-size: 0.85rem; }
details.group > .card { border: none; border-top: 1px solid var(--line); border-radius: 0; margin: 0; background: none; }
details.group-erase > summary .icon { color: var(--danger); }
.tabs button { flex-direction: column; gap: 2px; font-size: 0.8rem; padding: 6px 2px; }
.tabs button .icon { width: 22px; height: 22px; }


/* 2.12 Healthy copings */
#work-pay-wrap[hidden] { display: none; }
/* Overview sub-tabs and folded help (4.1.2): plain text tabs with a thin underline, no boxes. */
.subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 8px 0 12px; overflow-x: auto; }
.subtabs [role="tab"] { background: none; border: none; border-radius: 0; color: var(--muted); padding: 10px 12px; min-height: 44px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subtabs [role="tab"][aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.subtabs [role="tab"][hidden] { display: none; }
.pane > h3:first-child { margin-top: 0.5rem; }
details.fold > summary { font-family: Georgia, "Times New Roman", serif; font-size: 1.1rem; min-height: 44px; display: flex; align-items: center; }

/* Demo (4.2) */
.demo-bar { position: sticky; top: 0; z-index: 40; background: var(--ink); color: var(--paper); padding: 8px 16px; display: flex; gap: 10px; align-items: center; justify-content: space-between; font-size: 0.9rem; }
.demo-bar[hidden] { display: none; }
.demo-bar button { min-height: 36px; }

.strain-pick { display: block; width: 100%; margin-top: 6px; }

/* 2.14 Dev options */
.dev-badge { font-size: 0.75rem; font-weight: 600; border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; margin-left: 8px; color: var(--muted); }
.dev-badge[hidden], #dev-panel[hidden] { display: none; }
#dev-part { flex: 1 1 8rem; }

/* Keepers and the Seed Garden (5.0) */
.valley-art { --k-dark: #6B5A48; --k-light: #EFE6D6; --k-eye: #1F1A14; --k-green: #6E9F55; --k-brown: #9A7552; --k-grey: #A9B3B8; --k-hive: #E3B34F; --k-bee: #3A3226; --k-fox: #C7743F; --k-shell: #7E8F55; }
:root[data-dark] .valley-art { --k-dark: #A08B74; --k-light: #D9D0C0; --k-eye: #0E0C0A; --k-fox: #D98A55; }
:root[data-theme="mono"] .valley-art { --k-dark: #333333; --k-light: #FFFFFF; --k-eye: #000000; --k-green: #777777; --k-brown: #555555; --k-grey: #AAAAAA; --k-hive: #DDDDDD; --k-bee: #000000; --k-fox: #666666; --k-shell: #888888; }
.k-dark { fill: var(--k-dark); }
.k-light { fill: var(--k-light); stroke: var(--k-dark); stroke-width: 0.3; }
.k-eye { fill: var(--k-eye); }
.k-green { fill: var(--k-green); }
.k-brown { fill: var(--k-brown); }
.k-grey { fill: var(--k-grey); }
.k-hive { fill: var(--k-hive); }
.k-bee { fill: var(--k-bee); }
.k-fox { fill: var(--k-fox); }
.k-shell { fill: var(--k-shell); }
.k-line, .k-ear { fill: none; stroke: var(--k-dark); stroke-width: 0.7; stroke-linecap: round; }
.keeper-picks { display: grid; gap: 8px; }
.keeper-pick { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 2px; min-height: 56px; }
.keeper-pick span { color: var(--muted); font-size: 0.9rem; }

/* 6.0 Accessibility: every tap target at least 44 x 44 px; a clear focus ring on chips and tabs. */
.chip { min-height: 44px; }
button.link { min-height: 44px; min-width: 44px; padding: 10px 8px; }
summary { min-height: 44px; padding-block: 10px; box-sizing: border-box; }
textarea, input[type="text"], input[type="number"], input[type="time"], input[type="date"], input[type="tel"], select { min-height: 44px; box-sizing: border-box; }
input[type="checkbox"] { min-width: 24px; min-height: 24px; }
label.check { min-height: 44px; }
.chip:focus-visible, [role="tab"]:focus-visible, summary:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.stepper .step-row input, .stepper button.step { min-height: 44px; }
.chip { min-width: 44px; }

/* 5.1 Season overview */
.season h4 { margin: 8px 0 4px; }
#seasons[hidden], #season-earlier-box[hidden] { display: none; }

/* The gentle ending (5.2) */
.valley-end { border-left: 3px solid var(--accent); padding-left: 12px; margin: 12px 0; }
.valley-end[hidden] { display: none; }
/* 7.0 Beta page in Help */
.beta-preview { white-space: pre-wrap; word-break: break-word; font-size: 0.85rem; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 10px; margin: 0; }
#beta-share[hidden] { display: none; }

/* Bottom menu fix (6.1.1, agentZero: the bar was not stuck to the bottom, buttons scrolled behind the system bar,
   and the bar colour did not follow the scheme). The menu has the page colour, so it and the phone's own bar
   (theme-color, set per scheme and light/dark in theme.js) read as one calm strip. */
.tabs { z-index: 20; min-height: calc(var(--tabs-h) + env(safe-area-inset-bottom)); background: var(--paper); box-shadow: 0 40px 0 var(--paper); }
.tabs button { min-height: var(--tabs-h); }

/* Pictures and voice (6.2) */
.pict { display: none; line-height: 0; }
:root[data-easy] { font-size: 112%; }
:root[data-easy] .chip { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; min-width: 76px; min-height: 76px; padding: 8px 10px; border-radius: 14px; }
:root[data-easy] .chip .pict { display: block; }
:root[data-easy] .muted { font-size: 0.95rem; }
.easy-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.easy-bar button { min-height: 48px; }
.easy-bar .pict, .hear-float .pict { display: block; }
.easy-btn, .hear-btn { display: inline-flex; align-items: center; gap: 8px; }
.easy-btn[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.hear-float { position: fixed; right: 12px; top: calc(8px + env(safe-area-inset-top)); z-index: 30; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent); color: var(--paper); border: none; box-shadow: 0 2px 8px rgba(0,0,0,0.25); }
.hear-float[hidden], .hear-btn[hidden] { display: none; }
/* 6.5 Inspect mode: the magnifier sits under the speaker; while on, everything tapped gets a ring. */
:root[data-easy] .demo-bar { padding-right: 80px; }
.hear-float { z-index: 45; }
.inspect-float { top: calc(72px + env(safe-area-inset-top)); background: var(--paper); color: var(--accent); border: 2px solid var(--accent); }
.inspect-float .pict { display: block; }
:root[data-inspect] .inspect-float { background: var(--accent); color: var(--paper); }
:root[data-inspect] body { cursor: help; }
.inspect-target { outline: 4px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
:root[data-easy] .top { padding-right: 80px; min-height: 72px; align-items: center; }
.storage-warn { margin: 8px 16px; }
.storage-warn[hidden] { display: none; }

/* No reading needed (6.3): silent animations that show an action. Base styles are the end state,
   so with reduced motion (or before playing) the picture still says what it means. */
.anim-wrap { display: flex; justify-content: center; margin: 4px 0 8px; }
.anim { width: 100%; max-width: 280px; height: auto; color: var(--ink); }
.anim * { transform-box: fill-box; transform-origin: center; }
.a-button { fill: var(--accent); stroke: none; }
.a-on-accent { stroke: var(--paper); stroke-width: 3; }
.a-skin { fill: var(--paper); stroke: var(--ink); }
.a-plus { stroke: var(--accent); }
.a-pick { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2.4; }
.a-bar { fill: var(--accent-soft); stroke: var(--accent); }
.a-leaf, .a-heart { fill: var(--accent-soft); stroke: var(--accent); }
.a-breath { fill: var(--accent-soft); stroke: var(--accent); }
.a-ground { stroke: var(--line); }
.anim-wrap .anim * { animation-duration: 2s; animation-iteration-count: 3; animation-fill-mode: both; animation-timing-function: ease-in-out; }
.a-finger { animation-name: a-tap; }
.a-press { animation-name: a-press; }
.a-plus { animation-name: a-appear; }
.a-pick { animation-name: a-pick; }
.a-walker { animation-name: a-walk; animation-duration: 4s !important; animation-timing-function: linear !important; }
.a-bar { transform-origin: bottom !important; animation-name: a-rise; animation-iteration-count: 1 !important; }
.a-b2 { animation-delay: 0.15s; } .a-b3 { animation-delay: 0.3s; } .a-b4 { animation-delay: 0.45s; } .a-b5 { animation-delay: 0.6s; }
.a-grow { transform-origin: bottom !important; animation-name: a-rise; animation-duration: 3s !important; animation-iteration-count: 1 !important; }
.a-breath { animation-name: a-breathe; animation-duration: 14s !important; animation-iteration-count: 2 !important; }
.a-ring { animation-name: a-ring; }
.a-waves { animation-name: a-appear; }
.a-heart { animation-name: a-beat; }
.a-shackle { animation-name: a-close; animation-iteration-count: 1 !important; }
@keyframes a-tap { 0%, 100% { transform: translate(8px, 14px); } 35%, 55% { transform: translate(0, 0); } }
@keyframes a-press { 0%, 35%, 70%, 100% { transform: scale(1); } 45%, 55% { transform: scale(0.92); } }
@keyframes a-appear { 0%, 45% { opacity: 0; } 60%, 100% { opacity: 1; } }
@keyframes a-pick { 0%, 40% { fill: transparent; stroke-width: 1.8; } 55%, 100% { fill: var(--accent-soft); stroke-width: 2.4; } }
@keyframes a-walk { from { transform: translateX(10px); } to { transform: translateX(100px); } }
@keyframes a-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes a-breathe { 0% { transform: scale(1); } 29% { transform: scale(2); } 57% { transform: scale(2); } 100% { transform: scale(1); } }
@keyframes a-ring { 0%, 50%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(-12deg); } 20%, 40% { transform: rotate(12deg); } }
@keyframes a-beat { 0%, 60%, 100% { transform: scale(1); } 70% { transform: scale(1.12); } 80% { transform: scale(1); } }
@keyframes a-close { from { transform: translateY(-5px); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .anim-wrap .anim * { animation: none !important; } }
/* The walker ends where it stops; give it a calm resting place without motion. */
@media (prefers-reduced-motion: reduce) { .a-walker { transform: translateX(55px); } }
/* In easy mode the tour shows the animation; the words stay for screen readers and are spoken. */
#guide-anim { display: none; }
:root[data-easy] #guide-anim { display: block; }
:root[data-easy] #guide-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:root[data-easy] #guide-part, :root[data-easy] .guide .muted { display: none; }
:root[data-easy] .guide .row button { min-height: 56px; min-width: 64px; display: inline-flex; align-items: center; gap: 6px; }
[data-icon] .pict { display: none; }
:root[data-easy] [data-icon] .pict { display: inline-block; vertical-align: middle; }
:root[data-easy] .tap .pict svg { width: 40px; height: 40px; }
.a-walker { transform: translateX(100px); }
.guide .anim { max-width: 200px; }

/* 7.2.1 Count fits on one phone screen without scrolling (agentZero). Rule in docs/ux.md. */
.tap { width: min(46vw, 176px); margin: 8px auto 4px; }
.tap-plus { font-size: 2.6rem; }
.tap-label { font-size: 0.95rem; }
.counts { margin: 0 0 4px; }
.urge-open-wrap { margin: 0 0 6px; text-align: center; }
.actions-wrap { margin: 0 0 8px; }
.actions-wrap > .muted { margin: 0 0 4px; font-size: 0.85rem; }
.actions-wrap .chips { gap: 4px; }
.actions-wrap .chip { min-height: 36px; padding: 4px 8px; font-size: 0.9rem; }
.goal-lines { margin: 0 0 8px; font-size: 0.9rem; }
.compact-h { margin: 8px 0 6px; }
#recent-fold { margin-top: 10px; }
@media (max-height: 760px) {
  .tap { width: min(40vw, 140px); margin-top: 4px; }
  .compact-h { margin: 4px 0; }
  .tap-plus { font-size: 2.2rem; }
  .top { padding-top: 8px; padding-bottom: 8px; }
}
#urge-emoji:not(:empty) { margin-right: 0.3em; }
@media (max-height: 760px) { .tap-label { font-size: 0.78rem; } }
:root[data-demo="product"] #guide-anim { display: block; }
:root[data-demo="product"]:not([data-easy]) .guide .anim { max-width: 120px; }
/* 7.2.3: the demo is visible in the title too, not only in the bar (agentZero mistook demo data for their own). */
:root[data-demo] header.top h1::after { content: " · demo"; color: var(--muted); font-size: 0.8em; }

/* Product demo stories (4.4) */
.story-picks { display: grid; gap: 8px; margin: 8px 0 12px; }
.story-pick { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 2px; min-height: 56px; }
.story-pick span { color: var(--muted); font-size: 0.9rem; }

/* 6.4 Pictures and voice, rework: one picture language, numbers big, long text out of the way.
   Research basis in the artist brief, section 12 (text-free UIs: Medhi et al.; mobile money for
   non-literate users): consistent semi-abstract pictures, voice on every control, numbers are
   understood, few levels, no mixed symbol sets. */
:root[data-easy] .easy-goal { display: flex; align-items: center; gap: 10px; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
:root[data-easy] .easy-goal .pict, :root[data-easy] #recent .pict, :root[data-easy] .day-row .pict, :root[data-easy] .days .pict { display: inline-block; vertical-align: middle; }
:root[data-easy] #recent .pict svg { width: 26px; height: 26px; }
:root[data-easy] #view-count p.muted:not([role="status"]), :root[data-easy] #view-count button.link:not([data-icon]):not(#urge-open) { display: none; }
:root[data-easy] #urge-emoji { display: none; }
:root[data-easy] .sep { display: none; }

/* 7.2.4: goal tiles when more than 3 poisons are counted (Count stays one screen). */
.goal-lines.goal-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
.goal-lines.goal-tiles li { cursor: pointer; padding: 2px 4px; border-radius: 8px; font-variant-numeric: tabular-nums; }
.goal-lines.goal-tiles li:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
/* 7.2.10: "More" under a blunt yes/no question (agentZero: question, Yes/No, more...). */
details.more { margin-top: 6px; color: var(--muted); }
details.more > summary { display: inline-block; text-decoration: underline; }
details.more p { margin: 6px 0 0; }

/* 7.2.9 question pattern: one short question, Yes / No side by side, More folded underneath. */
.yesno { display: flex; gap: 0.6rem; margin: 0.8rem 0 0.4rem; }
.yesno button { flex: 1; min-height: 48px; }

/* Right to left (Arabic, 6.9): phone numbers and web addresses keep their own order ("0800-0113", "113.nl"). */
[dir="rtl"] a[href^="tel:"], [dir="rtl"] a[href^="sms:"], [dir="rtl"] a[href^="http"] { unicode-bidi: isolate; direction: ltr; }
/* 7.2.11 search in Settings */
.search-wrap { margin: 0 0 12px; }
.search-wrap input { width: 100%; box-sizing: border-box; min-height: 44px; padding: 8px 12px; font: inherit; border: 1px solid var(--line, currentColor); border-radius: 10px; background: var(--card, transparent); color: inherit; }
.search-wrap p { margin: 8px 0 0; }
.search-hidden { display: none !important; }

/* Bubble wrap G1: today's sheet, this week, stamps. Calm colours, nothing red, nothing that pulses. */
.g-sheet progress { width: 100%; height: 12px; accent-color: var(--accent); }
.g-sheet p { margin-top: 4px; }
.g-stop { padding: 10px 12px; border-radius: 10px; background: var(--accent-soft); }
.g-stop[hidden] { display: none; }
.g-days, .g-stamps { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.g-days li { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; }
.g-days li.on { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.g-stamps li { width: 28px; height: 28px; border-radius: 50%; background: var(--accent-soft); border: 2px solid var(--accent); }
.g-stamps.resting::after { content: "☾"; font-size: 1.2rem; line-height: 28px; color: var(--muted, var(--ink)); }