/* אני על זה - warm, homely, calm. No red anywhere, on purpose. */
:root {
  --cream: #F6F3E9;
  --card: #FFFFFF;
  --ink: #22304A;
  --muted: #5E6676;
  --line: #E6E1D2;
  --sage: #3E6650;        /* primary buttons, white text 6.5:1 */
  --sage-soft: #E4EEE4;
  --orange: #B8572B;      /* the + button, white text 4.7:1 */
  --green: #A9CBA9;
  --yellow: #F5D77E;
  --blue: #A9C9DF;
  --peach: #E9B5A7;
  --green-bg: #EAF2E8;
  --yellow-bg: #FBF1D3;
  --blue-bg: #E7F0F6;
  --peach-bg: #F8E7E1;
  --radius: 20px;
  --shadow: 0 1px 2px rgba(34, 48, 74, .06), 0 4px 14px rgba(34, 48, 74, .06);
  --font: 'Google Sans', 'Segoe UI', 'Arial Hebrew', system-ui, sans-serif;
  --nav-h: 76px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--cream); color: var(--ink); }
body { font-family: var(--font); font-size: 18px; line-height: 1.45; -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
strong, b { font-weight: 600; }
h1, h2, h3 { font-weight: 600; margin: 0; }
.boot { padding: 40vh 0; text-align: center; color: var(--muted); }
svg.i { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- layout ---------- */
.screen { max-width: 640px; margin: 0 auto; padding: 12px 16px calc(var(--nav-h) + 32px + env(safe-area-inset-bottom)); }
.top { display: flex; align-items: center; gap: 12px; padding: 8px 0 14px; }
.top h1 { font-size: 22px; flex: 1; }
.top .sub { display: block; font-size: 15px; color: var(--muted); font-weight: 400; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; margin: 22px 4px 10px; font-size: 18px; font-weight: 600; }
.section-title .more { font-size: 15px; color: var(--sage); background: none; border: 0; padding: 8px 4px; font-weight: 600; }
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
.stack { display: grid; gap: 10px; }
.muted { color: var(--muted); }
.small { font-size: 15px; }
.empty { text-align: center; color: var(--muted); padding: 22px 12px; font-size: 16px; }

/* ---------- avatars ---------- */
.av { --c: #888; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--c) 16%, white); color: var(--c); display: grid; place-items: center; flex: none; border: 2px solid color-mix(in srgb, var(--c) 35%, white); }
.av svg.i { width: 24px; height: 24px; }
.av.lg { width: 84px; height: 84px; }
.av.lg svg.i { width: 44px; height: 44px; }
.av.sm { width: 30px; height: 30px; border-width: 1.5px; }
.av.sm svg.i { width: 17px; height: 17px; }
.me-btn { border: 0; background: none; padding: 4px; border-radius: 50%; min-width: 56px; min-height: 56px; display: grid; place-items: center; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--c); flex: none; }

.who-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 18px; }
.who { border: 0; background: var(--card); box-shadow: var(--shadow); border-radius: var(--radius); padding: 22px 10px 16px; display: grid; justify-items: center; gap: 10px; font-size: 20px; font-weight: 600; min-height: 150px; }
.who .role { font-size: 14px; color: var(--muted); font-weight: 400; margin-top: -6px; }

/* ---------- plant ---------- */
.plant-card { display: flex; align-items: center; gap: 14px; background: linear-gradient(160deg, #FFFFFF 0%, var(--green-bg) 100%); }
.plant-card .txt { flex: 1; }
.plant-card .big { font-size: 20px; font-weight: 600; }
.plant { width: 112px; height: 124px; flex: none; }
.plant .part { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .7s cubic-bezier(.3, 1.4, .5, 1), opacity .5s; }
.plant .part.hide { transform: scale(0); opacity: 0; }
.plant.grow .stem { animation: sway 1.1s ease-out; transform-origin: 50% 100%; transform-box: fill-box; }
@keyframes sway { 0% { transform: rotate(0); } 30% { transform: rotate(-4deg); } 60% { transform: rotate(3deg); } 100% { transform: rotate(0); } }
.progress { height: 10px; background: #fff; border-radius: 99px; overflow: hidden; margin-top: 8px; border: 1px solid var(--line); }
.progress > i { display: block; height: 100%; background: var(--sage); border-radius: 99px; transition: width .6s; }
.week-line { display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-size: 17px; }
.week-line svg.i { color: var(--sage); }

/* ---------- task cards ---------- */
.task { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 12px 10px 10px; min-height: 72px; border: 0; width: 100%; text-align: right; }
.task .ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; flex: none; background: var(--bg, var(--sage-soft)); }
.task .ico svg.i { width: 28px; height: 28px; }
.task .body { flex: 1; min-width: 0; }
.task .title { font-weight: 600; font-size: 18px; }
.task .meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 15px; color: var(--muted); margin-top: 2px; }
.task .meta .p { display: inline-flex; align-items: center; gap: 5px; }
.task.done .title { color: var(--muted); }
.task.done .ico { background: var(--sage-soft); color: var(--sage); }
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; padding: 1px 9px; border-radius: 99px; background: var(--yellow-bg); color: var(--ink); }
.tag.soft { background: #F1EEE4; }
.tag.ok { background: var(--sage-soft); color: var(--sage); }
.tag svg.i { width: 15px; height: 15px; }

.act { border: 0; border-radius: 16px; min-height: 56px; min-width: 56px; padding: 0 16px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none; }
.act.do { background: var(--sage); color: #fff; }
.act.take { background: var(--yellow-bg); color: var(--ink); border: 1.5px solid #E9CF7D; }
.act.ghost { background: transparent; color: var(--sage); }
.act.done-ok { background: var(--sage-soft); color: var(--sage); }
.act.wide { width: 100%; }

/* kid mode: bigger, fewer words */
.kid .task { min-height: 92px; padding: 14px; }
.kid .task .ico { width: 64px; height: 64px; border-radius: 20px; }
.kid .task .ico svg.i { width: 34px; height: 34px; }
.kid .task .title { font-size: 20px; }
.kid .act.do { min-height: 64px; padding: 0 20px; font-size: 19px; border-radius: 18px; }
.free-row { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x mandatory; }
.free { flex: 0 0 150px; scroll-snap-align: start; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 12px; display: grid; gap: 8px; justify-items: center; text-align: center; border: 0; }
.free .ico { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--bg); }
.free .ico svg.i { width: 30px; height: 30px; }
.free .t { font-weight: 600; font-size: 16px; }

.note { display: flex; align-items: center; gap: 10px; background: var(--blue-bg); border-radius: 16px; padding: 10px 12px; }
.note .x { margin-inline-start: auto; border: 0; background: none; min-width: 48px; min-height: 48px; color: var(--muted); }

/* category colours: pastel backgrounds, never text */
.c-yellow { --bg: var(--yellow-bg); }
.c-blue { --bg: var(--blue-bg); }
.c-green { --bg: var(--green-bg); }
.c-peach { --bg: var(--peach-bg); }

/* ---------- chips, tabs ---------- */
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 1.5px solid var(--line); background: #fff; border-radius: 99px; min-height: 44px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; font-size: 16px; }
.chip.on { border-color: var(--sage); background: var(--sage-soft); color: var(--sage); font-weight: 600; }
.chip .n { font-size: 13px; background: var(--sage); color: #fff; border-radius: 99px; min-width: 22px; height: 22px; display: inline-grid; place-items: center; padding: 0 6px; }
.tabs { display: flex; background: #EDE8DA; border-radius: 16px; padding: 4px; gap: 4px; margin-bottom: 14px; }
.tabs button { flex: 1; border: 0; background: none; border-radius: 12px; min-height: 48px; font-size: 16px; color: var(--muted); }
.tabs button.on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }
.day-head { margin: 18px 4px 8px; font-weight: 600; color: var(--muted); font-size: 16px; }

/* ---------- family ---------- */
.person-card { display: grid; gap: 10px; }
.person-card .head { display: flex; align-items: center; gap: 12px; }
.person-card .name { font-weight: 600; font-size: 19px; flex: 1; }
.mini { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 16px; }
.mini:first-of-type { border-top: 0; }
.mini .ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--bg); flex: none; }
.mini .ico svg.i { width: 20px; height: 20px; }
.mini .t { flex: 1; }
.mini.done .t { color: var(--muted); }
.mini .ok { color: var(--sage); }

/* ---------- bottom nav ---------- */
.nav { position: fixed; inset: auto 0 0 0; height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: rgba(255, 255, 255, .96); border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr 88px 1fr 1fr; align-items: center; z-index: 10; backdrop-filter: blur(8px); }
.nav button { border: 0; background: none; display: grid; justify-items: center; gap: 2px; font-size: 13px; color: var(--muted); min-height: 60px; }
.nav button.on { color: var(--sage); font-weight: 600; }
.nav .plus { width: 64px; height: 64px; border-radius: 50%; background: var(--orange); color: #fff; box-shadow: 0 6px 16px rgba(184, 87, 43, .35); margin: -26px auto 0; display: grid; place-items: center; }
.nav .plus svg.i { width: 32px; height: 32px; stroke-width: 2.4; }
.fab { position: fixed; bottom: calc(22px + env(safe-area-inset-bottom)); inset-inline-start: 50%; transform: translateX(50%); width: 68px; height: 68px; border-radius: 50%; border: 0; background: var(--orange); color: #fff; box-shadow: 0 6px 16px rgba(184, 87, 43, .35); display: grid; place-items: center; z-index: 10; }
.fab svg.i { width: 34px; height: 34px; stroke-width: 2.4; }
.mode-switch { border: 1.5px solid var(--line); background: #fff; border-radius: 99px; min-height: 48px; padding: 0 14px; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }

/* ---------- sheets ---------- */
.veil { position: fixed; inset: 0; background: rgba(34, 48, 74, .32); z-index: 30; display: flex; align-items: flex-end; justify-content: center; animation: fade .2s; }
.sheet { background: var(--cream); width: 100%; max-width: 640px; max-height: 92vh; overflow-y: auto; border-radius: 26px 26px 0 0; padding: 10px 16px calc(24px + env(safe-area-inset-bottom)); animation: up .25s ease-out; }
.sheet .grab { width: 44px; height: 5px; border-radius: 9px; background: #D6D0BF; margin: 0 auto 10px; }
.sheet h2 { font-size: 21px; margin: 4px 0 14px; display: flex; align-items: center; gap: 10px; }
.sheet .close { margin-inline-start: auto; border: 0; background: none; min-width: 48px; min-height: 48px; color: var(--muted); display: grid; place-items: center; }
@keyframes up { from { transform: translateY(40px); opacity: .4; } }
@keyframes fade { from { opacity: 0; } }
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field > label, .field > .lbl { font-weight: 600; font-size: 16px; }
.field input[type=text], .field input[type=date], .field input[type=time], .field input[type=number], .field textarea, .field input[type=password], .field input[inputmode] { border: 1.5px solid var(--line); background: #fff; border-radius: 14px; min-height: 52px; padding: 10px 14px; width: 100%; }
.field textarea { min-height: 80px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--sage); outline-offset: 1px; }
.hint { font-size: 14px; color: var(--muted); }
.tpl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tpl { border: 0; background: #fff; border-radius: 18px; box-shadow: var(--shadow); padding: 14px 6px 10px; display: grid; justify-items: center; gap: 6px; font-size: 15px; min-height: 104px; }
.tpl .ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--bg); }
.tpl .ico svg.i { width: 28px; height: 28px; }
.icon-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.icon-pick button { width: 52px; height: 52px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; display: grid; place-items: center; }
.icon-pick button.on { border-color: var(--sage); background: var(--sage-soft); color: var(--sage); }
.actions { display: grid; gap: 10px; margin-top: 8px; }
.actions .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn { border: 0; border-radius: 16px; min-height: 56px; padding: 0 18px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #fff; color: var(--ink); box-shadow: var(--shadow); }
.btn.primary { background: var(--sage); color: #fff; }
.btn.quiet { background: transparent; box-shadow: none; color: var(--sage); }
.btn:disabled { opacity: .5; }
.detail-box { background: #fff; border-radius: 16px; padding: 12px 14px; margin-bottom: 14px; }
.return-note { background: var(--yellow-bg); border-radius: 14px; padding: 10px 12px; margin-bottom: 12px; display: flex; gap: 8px; align-items: center; }
.order-list { display: grid; gap: 6px; }
.order-list .o { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 14px; padding: 6px 10px; }
.order-list .o .num { width: 26px; height: 26px; border-radius: 50%; background: var(--sage); color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 600; }
.switch { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.switch .t { flex: 1; }
.toggle { width: 58px; height: 34px; border-radius: 99px; border: 0; background: #D6D0BF; position: relative; flex: none; }
.toggle::after { content: ''; position: absolute; top: 4px; inset-inline-start: 4px; width: 26px; height: 26px; border-radius: 50%; background: #fff; transition: inset-inline-start .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.toggle.on { background: var(--sage); }
.toggle.on::after { inset-inline-start: 28px; }
.pin-dots { display: flex; justify-content: center; gap: 12px; margin: 10px 0 18px; }
.pin-dots i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--sage); }
.pin-dots i.f { background: var(--sage); }
.pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 320px; margin: 0 auto; }
.pinpad button { min-height: 64px; border-radius: 18px; border: 0; background: #fff; box-shadow: var(--shadow); font-size: 24px; font-weight: 600; }
.err { color: #8A4A12; background: var(--yellow-bg); border-radius: 12px; padding: 8px 12px; margin-bottom: 12px; font-size: 16px; }

#toast { position: fixed; inset-inline: 16px; bottom: calc(var(--nav-h) + 22px + env(safe-area-inset-bottom)); margin: 0 auto; max-width: 440px; background: var(--ink); color: #fff; border-radius: 16px; padding: 12px 16px; display: flex; gap: 10px; align-items: center; z-index: 40; opacity: 0; pointer-events: none; transform: translateY(10px); transition: .25s; }
#toast.show { opacity: 1; pointer-events: auto; transform: none; }
#toast button { margin-inline-start: auto; border: 0; background: none; color: #F5D77E; font-weight: 600; min-height: 44px; }

.join { max-width: 420px; margin: 0 auto; padding: 14vh 20px 40px; text-align: center; }
.join .logo { width: 96px; height: 96px; margin: 0 auto 14px; }
.join h1 { font-size: 30px; margin-bottom: 6px; }
.join p { color: var(--muted); }
.join form { margin-top: 24px; text-align: right; }

@media (min-width: 700px) {
  .who-grid { grid-template-columns: repeat(4, 1fr); }
  .tpl-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.task.pending { flex-wrap: wrap; }
.task.pending .pend-acts { display: flex; gap: 8px; width: 100%; justify-content: flex-end; }

/* ---------- v2: kid home, plant friend, bigger cards ---------- */
.plant .eye { transform-box: fill-box; transform-origin: center; animation: blink 5s infinite; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.hello { padding: 6px 4px 14px; display: flex; align-items: center; gap: 12px; }
.hello h1 { font-size: 26px; flex: 1; }
.hello .sub { display: block; font-size: 16px; color: var(--muted); font-weight: 400; }
.friend { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 8px; padding: 14px 16px 14px 10px; background: linear-gradient(160deg, #FFFFFF 0%, var(--green-bg) 100%); }
.friend .plant { width: 150px; height: 166px; }
.friend .big { font-size: 21px; font-weight: 600; line-height: 1.3; }
.friend .sub { color: var(--muted); font-size: 16px; margin-top: 4px; }
.leaves { display: flex; gap: 4px; margin-top: 10px; flex-wrap: wrap; }
.leaves i { width: 16px; height: 16px; border-radius: 16px 0; background: #DDE8DA; transform: rotate(-45deg); }
.leaves i.on { background: #7DB27A; }

.ktask { background: var(--card); border-radius: 22px; box-shadow: var(--shadow); padding: 14px; display: grid; gap: 12px; }
.ktask .row1 { display: flex; align-items: center; gap: 14px; }
.ktask .ico { width: 72px; height: 72px; border-radius: 22px; display: grid; place-items: center; background: var(--bg); flex: none; border: 0; }
.ktask .ico svg.i { width: 40px; height: 40px; }
.ktask .title { font-size: 21px; font-weight: 600; }
.ktask .row2 { display: flex; gap: 10px; }
.ktask .row2 .act { flex: 1; min-height: 60px; font-size: 18px; }
.ktask.done { background: #FBFAF5; }
.ktask.done .title { color: var(--muted); }
.pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 99px; padding: 2px 12px; font-size: 15px; font-weight: 600; margin-top: 4px; }
.pill svg.i { width: 16px; height: 16px; }
.pill.new { background: var(--yellow-bg); color: #6B5310; }
.pill.work { background: var(--blue-bg); color: #24506F; }
.pill.fin { background: var(--sage-soft); color: var(--sage); }
.ktask .undo { border: 0; background: none; color: var(--muted); font-size: 15px; min-height: 44px; padding: 0 6px; margin-inline-start: auto; }

.help-card { background: #FFFDF6; border: 1.5px dashed #E3D9BC; border-radius: 22px; padding: 6px 14px; }
.help { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #EFE8D6; }
.help:first-child { border-top: 0; }
.help .ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--bg); flex: none; }
.help .ico svg.i { width: 28px; height: 28px; }
.help .t { flex: 1; font-size: 18px; font-weight: 600; }
.help .t small { display: block; font-weight: 400; font-size: 14px; color: var(--muted); }

.empty-art { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 18px 12px; }
.empty-art .plant { width: 84px; height: 94px; }

.fab.pill-fab { width: auto; height: 60px; border-radius: 99px; padding: 0 22px 0 18px; gap: 8px; display: inline-flex; align-items: center; font-weight: 600; font-size: 18px; transform: translateX(50%); }
.fab.pill-fab svg.i { width: 26px; height: 26px; }
.nav .plus-lbl { font-size: 13px; color: var(--orange); font-weight: 600; margin-top: 2px; }

/* avatar choosers */
.pick-people { display: flex; gap: 10px; flex-wrap: wrap; }
.pp { border: 2px solid transparent; background: #fff; border-radius: 18px; box-shadow: var(--shadow); padding: 10px 8px 8px; min-width: 84px; display: grid; justify-items: center; gap: 4px; font-size: 16px; }
.pp.on { border-color: var(--sage); background: var(--sage-soft); font-weight: 600; }
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cat { border: 2px solid transparent; border-radius: 16px; background: var(--bg); min-height: 76px; display: grid; justify-items: center; align-content: center; gap: 4px; font-size: 14px; }
.cat svg.i { width: 28px; height: 28px; }
.cat.on { border-color: var(--sage); font-weight: 600; }
.when { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.when button, .when label { border: 2px solid var(--line); background: #fff; border-radius: 16px; min-height: 60px; font-size: 18px; display: grid; place-items: center; }
.when .on { border-color: var(--sage); background: var(--sage-soft); font-weight: 600; }
.when input[type=date] { border: 0; background: transparent; width: 100%; min-height: 56px; text-align: center; font-size: 15px; }
.go { width: 100%; min-height: 64px; font-size: 20px; margin-top: 6px; }

/* little celebration when something is done */
.burst { position: fixed; pointer-events: none; z-index: 50; }
.burst i { position: absolute; width: 12px; height: 12px; border-radius: 12px 0; animation: fly .9s ease-out forwards; }
@keyframes fly { from { transform: translate(0, 0) rotate(0) scale(1); opacity: 1; } to { transform: translate(var(--x), var(--y)) rotate(200deg) scale(.4); opacity: 0; } }
.pop { animation: pop .45s ease-out; }
@keyframes pop { 40% { transform: scale(1.04); } }
.hello h1 { font-size: 23px; line-height: 1.25; }
.hello .av.lg { width: 64px; height: 64px; }
.hello .av.lg svg.i { width: 34px; height: 34px; }
.fab.pill-fab { white-space: nowrap; }
.note span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 16px; }

/* ---------- v3: second design review ---------- */
:root {
  --radius: 20px;
  --shadow: 0 1px 2px rgba(34, 48, 74, .05), 0 3px 10px rgba(34, 48, 74, .045);
  /* status colours, used everywhere the same way */
  --st-new-bg: #FBF1D3;  --st-new-ink: #6B5310;
  --st-work-bg: #E7F0F6; --st-work-ink: #24506F;
  --st-fin-bg: #E4EEE4;  --st-fin-ink: #3E6650;
  --st-wait-bg: #F1EEE4; --st-wait-ink: #5E6676;
}
.pill.new { background: var(--st-new-bg); color: var(--st-new-ink); }
.pill.work { background: var(--st-work-bg); color: var(--st-work-ink); }
.pill.fin { background: var(--st-fin-bg); color: var(--st-fin-ink); }
.tag { min-height: 28px; padding: 2px 11px; font-size: 15px; }
.tag.ok { background: var(--st-fin-bg); color: var(--st-fin-ink); }
.tag.soft { background: var(--st-wait-bg); color: var(--st-wait-ink); }
.pill { min-height: 30px; }
.ktask, .help-card, .free, .tpl, .who, .card, .task { border-radius: var(--radius); }

/* header: compact, avatar + name is the person switcher, a clear two-way switch */
.top { padding: 4px 0 8px; gap: 10px; justify-content: space-between; }
.who-switch { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--line); background: #fff; border-radius: 99px; padding: 4px 6px 4px 14px; min-height: 56px; font-size: 18px; font-weight: 600; }
.who-switch .av { width: 46px; height: 46px; }
.who-switch .sw { width: 18px; height: 18px; color: var(--muted); }
.seg { display: inline-flex; background: #EDE8DA; border-radius: 99px; padding: 4px; }
.seg button { border: 0; background: none; border-radius: 99px; min-height: 44px; min-width: 64px; padding: 0 14px; font-size: 16px; color: var(--muted); }
.seg button.on { background: #fff; color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }
.page-title { font-size: 24px; margin: 6px 4px 14px; }
.page-title .sub { display: block; font-size: 16px; color: var(--muted); font-weight: 400; }
.hello { padding: 4px 4px 12px; }

/* notes: one slim line, they go away by themselves */
.notes { display: grid; gap: 6px; margin-bottom: 10px; }
.note { padding: 4px 6px 4px 12px; border-radius: 14px; gap: 8px; font-size: 15px; min-height: 44px; transition: opacity .35s, transform .35s; }
.note > svg.i { width: 18px; height: 18px; color: var(--st-work-ink); }
.note span { -webkit-line-clamp: 1; font-size: 15px; }
.note .x { min-width: 44px; min-height: 44px; }
.note.gone { opacity: 0; transform: translateY(-6px); }

/* plant: bigger, clear numbers, thinner bar, a word about what's next */
.plant-card .plant { width: 128px; height: 142px; }
.friend { grid-template-columns: 160px 1fr; }
.friend .plant { width: 160px; height: 178px; }
.plant-count { margin-top: 10px; font-size: 16px; color: var(--muted); }
.plant-count b { font-size: 26px; color: var(--ink); font-weight: 600; }
.progress { height: 6px; margin-top: 6px; border: 0; background: #DDE8DA; }
.plant-hint { font-size: 14px; color: var(--muted); margin-top: 6px; }

/* task cards: whole card opens details, icon 15% bigger */
.task { cursor: pointer; }
.task .ico { width: 60px; height: 60px; }
.task .ico svg.i { width: 32px; height: 32px; }
.ktask { cursor: pointer; }
.ktask .ico { width: 82px; height: 82px; }
.ktask .ico svg.i { width: 46px; height: 46px; }
.kid .small, .kid .muted.small { font-size: 16px; }

/* + button: a touch smaller, softer shadow */
.nav .plus { width: 58px; height: 58px; box-shadow: 0 3px 10px rgba(184, 87, 43, .25); }
.fab { box-shadow: 0 3px 10px rgba(184, 87, 43, .25); }

/* forms: roomy groups, filled selection, sticky save */
.fgroup { display: grid; gap: 10px; margin-bottom: 24px; }
.fgroup > .lbl { font-weight: 600; font-size: 17px; }
.txt-in { border: 1.5px solid var(--line); background: #fff; border-radius: 14px; min-height: 54px; padding: 10px 14px; width: 100%; }
.txt-in:focus { outline: 2px solid var(--sage); outline-offset: 1px; }
.big-in { font-size: 20px; min-height: 60px; }
.icon-now { display: flex; align-items: center; gap: 10px; }
.big-ico { width: 72px; height: 72px; border-radius: 20px; background: var(--sage-soft); color: var(--sage); display: grid; place-items: center; }
.big-ico svg.i { width: 40px; height: 40px; }
.chip.on, .pp.on, .cat.on, .when .on, .icon-pick button.on { background: var(--sage-soft); }
.cat { min-height: 84px; font-size: 15px; }
.cat.on { box-shadow: inset 0 0 0 2px var(--sage); }
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.days button { min-height: 52px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; font-size: 18px; }
.days button.on { border-color: var(--sage); background: var(--sage-soft); color: var(--sage); font-weight: 600; }
.inline-num { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 17px; margin-top: 4px; }
.num-in { width: 84px; border: 1.5px solid var(--line); border-radius: 12px; min-height: 48px; padding: 0 10px; text-align: center; background: #fff; }
.date-pick { position: relative; overflow: hidden; cursor: pointer; }
.date-pick input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; }
.date-pick span { pointer-events: none; font-size: 17px; }
.sticky-save { position: sticky; bottom: calc(-24px - env(safe-area-inset-bottom)); margin: 8px -16px calc(-24px - env(safe-area-inset-bottom)); padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(to top, var(--cream) 75%, rgba(246, 243, 233, 0)); }
.sticky-save .go { margin: 0; }
.friend { grid-template-columns: 118px 1fr; gap: 10px; }
.friend .plant { width: 118px; height: 132px; }
.friend .big { font-size: 20px; }
.fab.pill-fab { inset-inline-start: auto; left: 16px; transform: none; }
.chips:empty { display: none; }

/* ---------- v4: design tokens (fixed by the design review) ---------- */
:root {
  --cream: #F5F2E8;
  --ink: #243650;
  --sage: #426B53;          /* white text on it: 6.4:1 */
  --card: #FFFFFF;
  --fill: #F1EEE3;          /* field and quiet-button background: fewer borders */
  --r-card: 18px;
  --r-btn: 12px;
  --h-field: 48px;
  --gap-section: 24px;
  --gap-field: 12px;
  --danger-ink: #9A4A22;    /* a warm brown, never red */
  --radius: var(--r-card);
}
body { font-size: 16px; }
.kid, .kid .task .title { font-size: 18px; }
.page-title { font-size: 22px; }
.card, .task, .ktask, .help-card, .panel, .free, .tpl { border-radius: var(--r-card); }
.btn, .act, .chip, .seg button, .tabs button { border-radius: var(--r-btn); }
.act, .btn { min-height: var(--h-field); }
.txt-in, .num-in { min-height: var(--h-field); border: 0; background: var(--fill); border-radius: var(--r-btn); }
.txt-in:focus, .num-in:focus { outline: 2px solid var(--sage); background: #fff; }
.big-in { min-height: 56px; font-size: 19px; }
.fgroup { gap: var(--gap-field); margin-bottom: var(--gap-section); }
.btn.primary, .act.do { background: var(--sage); }
.chip { border: 0; background: var(--fill); }
.chip.on { background: var(--sage-soft); color: var(--sage); box-shadow: inset 0 0 0 1.5px var(--sage); }

/* sheets: header and save button stay put while the middle scrolls */
.sheet { padding-top: 0; }
.sticky-head { position: sticky; top: 0; z-index: 2; background: var(--cream); margin: 0 -16px 8px; padding: 10px 16px 2px; }
.sticky-head h2 { margin: 0 0 6px; }

/* panels: sections separated by background, not borders */
.panel { background: var(--card); padding: 14px; margin-bottom: 14px; display: grid; gap: var(--gap-field); }
.panel h3 { font-size: 16px; margin: 0; color: var(--ink); }
.panel.list { padding: 6px 14px; gap: 0; }
.panel.list h3 { padding: 8px 0 2px; }
.list-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; border: 0; background: none; border-top: 1px solid #EFEBDF; font-size: 17px; color: var(--ink); text-align: right; padding: 0 2px; }
.panel.list h3 + .list-row, .panel.list .list-row:first-child { border-top: 0; }
.list-row svg.i { width: 20px; height: 20px; color: var(--muted); }
.list-row.soft { color: var(--muted); }
.list-row.danger, .list-row.danger svg.i, .row-btn.danger { color: var(--danger-ink); }
.row-btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; border: 0; background: var(--card); border-radius: var(--r-btn); padding: 0 14px; font-size: 16px; color: var(--ink); margin-bottom: 14px; text-align: right; }
.row-btn span { flex: 1; }
.row-btn svg.i { width: 20px; height: 20px; color: var(--muted); }
.panel .row-btn { background: var(--fill); margin: 0; }

/* task details: one clear main action */
.det-head { display: flex; align-items: center; gap: 12px; padding: 10px 0 14px; position: sticky; top: 0; background: var(--cream); z-index: 2; }
.det-head .ico { width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; background: var(--bg, var(--sage-soft)); flex: none; }
.det-head .ico svg.i { width: 32px; height: 32px; }
.det-head h2 { font-size: 21px; }
.main-act { width: 100%; min-height: 60px; font-size: 18px; margin-bottom: 14px; }
.main-row { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
.main-act.soft { background: var(--fill); box-shadow: none; }
.actions { display: block; margin-top: 0; }

/* form pieces */
.title-row { display: flex; gap: 10px; align-items: stretch; }
.title-row .txt-in { flex: 1; }
.icon-btn-big { width: 56px; min-height: 56px; border: 0; border-radius: var(--r-btn); background: var(--sage-soft); color: var(--sage); display: grid; place-items: center; flex: none; }
.icon-btn-big svg.i { width: 30px; height: 30px; }
.seg.wide { display: flex; width: 100%; border-radius: var(--r-btn); }
.seg.wide button { flex: 1; border-radius: 10px; min-height: 44px; font-size: 15px; }
.pick-people { gap: 8px; }
.pp { min-width: 76px; padding: 10px 6px 8px; border: 0; box-shadow: none; background: var(--fill); border-radius: var(--r-card); position: relative; font-size: 15px; }
.pp .av { width: 48px; height: 48px; }
.pp.on { background: var(--sage-soft); box-shadow: inset 0 0 0 2px var(--sage); }
.pp .turn { position: absolute; top: 4px; inset-inline-start: 4px; background: var(--sage); color: #fff; width: 22px; height: 22px; border-radius: 50%; font-size: 13px; font-weight: 600; display: grid; place-items: center; }
.when button, .when label { border: 0; background: var(--fill); border-radius: var(--r-btn); min-height: 52px; font-size: 17px; }
.when .on { background: var(--sage-soft); box-shadow: inset 0 0 0 2px var(--sage); color: var(--sage); font-weight: 600; }
.days { gap: 6px; }
.days button { min-height: 56px; border: 0; background: var(--fill); border-radius: var(--r-btn); font-size: 19px; }
.days button.on { background: var(--sage); color: #fff; }
.link-btn { border: 0; background: none; color: var(--sage); font-weight: 600; min-height: 44px; padding: 0 4px; justify-self: start; }
.cat { min-height: 70px; border: 0; }
.cat.on { box-shadow: inset 0 0 0 1.5px var(--sage); }

/* profile + family admin */
.profile-head { display: flex; align-items: center; gap: 14px; margin: 4px 0 16px; }
.pname { font-size: 19px; font-weight: 600; }
.agroup { display: grid; gap: 6px; margin-bottom: 8px; }
.avgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.avgrid button { aspect-ratio: 1; min-height: 48px; border: 0; border-radius: var(--r-btn); background: var(--fill); color: var(--muted); display: grid; place-items: center; }
.avgrid button svg.i { width: 26px; height: 26px; }
.avgrid button.on { background: color-mix(in srgb, var(--c) 16%, white); color: var(--c); box-shadow: inset 0 0 0 2px var(--c); }
.colors { display: flex; gap: 10px; flex-wrap: wrap; }
.colors button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--c); box-shadow: inset 0 0 0 3px #fff; outline: 2px solid transparent; }
.colors button.on { outline-color: var(--c); outline-offset: 2px; }
.fam-row { gap: 10px; }
.fam-head { display: flex; align-items: center; gap: 12px; }
.icon-btn { width: 48px; height: 48px; border: 0; border-radius: var(--r-btn); background: var(--fill); display: grid; place-items: center; color: var(--muted); }
.link-row { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; }
.switch .av.sm { margin-inline-end: 4px; }
.pick-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; }
.pp { min-width: 0; padding: 10px 4px 8px; }
.pp span:not(.av):not(.turn) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* ---------- lists ---------- */
.seg.wide button svg.i { width: 18px; height: 18px; vertical-align: -3px; }
.quick-add { display: flex; gap: 8px; margin-bottom: 14px; }
.quick-add .txt-in { flex: 1; background: var(--card); }
.quick-add .btn { width: 52px; padding: 0; }
.shop-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; border: 0; background: none; border-top: 1px solid #EFEBDF; font-size: 18px; color: var(--ink); text-align: right; padding: 0 2px; }
.panel.list.shop .shop-row:first-child { border-top: 0; }
.shop-row .t { flex: 1; }
.shop-row .tick { width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 0 0 0 2px #C9C2AE; display: grid; place-items: center; flex: none; color: #fff; }
.shop-row .tick svg.i { width: 18px; height: 18px; stroke-width: 3; }
.shop-row.got .tick { background: var(--sage); box-shadow: none; }
.shop-row.got .t { color: var(--muted); text-decoration: line-through; }
.section-title .muted.small { font-weight: 400; }
.fix-card .meta { gap: 8px; }
.fix-card .meta svg.i { width: 15px; height: 15px; vertical-align: -2px; }
.pill.st-todo { background: var(--st-new-bg); color: var(--st-new-ink); }
.pill.st-doing { background: var(--st-work-bg); color: var(--st-work-ink); }
.pill.st-idea { background: var(--st-wait-bg); color: var(--st-wait-ink); }
.pill.st-done { background: var(--st-fin-bg); color: var(--st-fin-ink); }
.fix-card .pill { margin-top: 0; min-height: 26px; font-size: 14px; }
.done-group summary { cursor: pointer; list-style: none; }
.done-group summary::-webkit-details-marker { display: none; }
.done-group summary::after { content: ' ›'; color: var(--muted); }

/* ---------- garden ---------- */
.garden-card { cursor: pointer; padding: 14px 14px 12px; }
.g-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.g-title { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.g-title svg.i { width: 20px; height: 20px; color: var(--sage); }
.g-head .more { font-size: 14px; color: var(--sage); font-weight: 600; display: inline-flex; align-items: center; gap: 2px; }
.g-head .more svg.i { width: 16px; height: 16px; }
.g-foot { font-size: 15px; color: var(--muted); margin-top: 8px; }
.g-foot b { color: var(--ink); }
.bed { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; align-items: end; background: linear-gradient(to top, #E8DCC6 0, #E8DCC6 22px, transparent 22px); border-radius: 14px; padding: 4px 4px 0; }
.plot { display: grid; justify-items: center; align-items: end; min-height: 58px; border-radius: 10px; position: relative; }
.plot .plant { width: 100%; max-width: 46px; height: auto; aspect-ratio: 112 / 124; }
.plot .plant .face, .plot .plant ellipse[cy="118"] { display: none; }
.plot .plant .eye { animation: none; }
.plot.today { background: rgba(66, 107, 83, .09); }
.plot .dname { font-size: 13px; color: #6E5F45; line-height: 22px; height: 22px; }
.plot.today .dname { color: var(--sage); font-weight: 600; }
.soil-dot { width: 10px; height: 10px; border-radius: 50%; background: #D7C7AA; margin-bottom: 8px; }
.bed.big .plot { min-height: 78px; }
.bed.big .plot .plant { max-width: 60px; }
.panel .bed { margin: 2px 0; }

/* ---------- projects ---------- */
.ptag { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--sage); }
.ptag svg.i { width: 15px; height: 15px; }
.proj-card .body { display: grid; gap: 4px; }
.proj-card .progress { margin-top: 2px; }
.proj-card .avs { display: inline-flex; gap: 3px; }
.progress.big { height: 8px; margin: 0 0 14px; }
.sub-row { display: flex; align-items: center; gap: 12px; min-height: 60px; border-top: 1px solid #EFEBDF; }
.panel.list h3 + .sub-row { border-top: 0; }
.sub-row .tick { width: 34px; height: 34px; border-radius: 50%; border: 0; background: none; box-shadow: inset 0 0 0 2px #C9C2AE; display: grid; place-items: center; flex: none; color: #fff; padding: 0; }
.sub-row button.tick { cursor: pointer; }
.sub-row .tick.on { background: var(--sage); box-shadow: none; }
.sub-row .tick.take { box-shadow: inset 0 0 0 2px #E9CF7D; background: var(--st-new-bg); color: var(--st-new-ink); }
.sub-row .tick svg.i { width: 18px; height: 18px; }
.sub-row .tick.on svg.i { stroke-width: 3; }
.sub-main { flex: 1; display: grid; text-align: right; border: 0; background: none; padding: 8px 0; color: var(--ink); font-size: 17px; }
.sub-row.done .sub-main .t { color: var(--muted); text-decoration: line-through; }

/* ---------- v5: growth card, garden meaning, finished tasks ---------- */
.friend .badge-done { display: inline-flex; align-items: center; gap: 5px; background: var(--sage); color: #fff; border-radius: 99px; padding: 3px 12px; font-size: 14px; font-weight: 600; }
.friend .badge-done svg.i { width: 16px; height: 16px; }
.friend.bloom { background: linear-gradient(160deg, #FFFDF3 0%, #FBF1D3 55%, #EAF2E8 100%); box-shadow: 0 0 0 2px #F5D77E inset, var(--shadow); }
.progress.full { height: 10px; background: #F5D77E; }
.progress.full i { background: linear-gradient(90deg, #426B53, #6E9E62); }
.friend .big { margin-top: 4px; }

.bed { gap: 4px; }
.plot { border: 0; background: none; padding: 4px 0 0; min-height: 66px; cursor: pointer; border-radius: 12px; font: inherit; }
.plot:active { background: rgba(66, 107, 83, .12); }
.plot .seed { width: 34px; height: 26px; margin-bottom: 2px; }
.plot.sprout .plant { max-width: 40px; }
.plot.flower .plant { max-width: 48px; }
.plot.empty .soil-dot { opacity: .7; }
.g-head .more { border: 0; background: none; min-height: 44px; padding: 0 4px; font: inherit; font-size: 14px; color: var(--sage); font-weight: 600; cursor: pointer; }
.g-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; color: var(--muted); margin-top: 8px; }
.g-legend span { display: inline-flex; align-items: center; gap: 4px; }
.g-legend .seed { width: 18px; height: 14px; }
.g-legend .plant { width: 16px; height: 18px; }
.g-legend .plant .face, .g-legend .plant ellipse[cy="118"] { display: none; }
.garden-card { cursor: default; }

.stack.tight { gap: 6px; }
.done-card { display: flex; align-items: center; gap: 10px; background: var(--st-fin-bg); border-radius: var(--r-card); padding: 6px 8px 6px 12px; min-height: 56px; }
.done-card .tick { width: 30px; height: 30px; border-radius: 50%; background: var(--sage); color: #fff; display: grid; place-items: center; flex: none; }
.done-card .tick svg.i { width: 18px; height: 18px; stroke-width: 3; }
.done-card .t { flex: 1; font-weight: 600; color: var(--ink); }
.done-card .pill { margin: 0; background: #fff; }
.more-btn { width: 44px; height: 44px; border: 0; background: none; border-radius: var(--r-btn); color: var(--muted); display: grid; place-items: center; flex: none; }
.help .t small { font-size: 14px; }
.empty-help { display: grid; gap: 10px; justify-items: start; padding: 14px; font-size: 16px; color: var(--muted); }

/* ---------- v6: compact garden strip ---------- */
.g-strip { display: grid; gap: 6px; width: 100%; border: 0; text-align: right; padding: 12px 14px 10px; font: inherit; color: var(--ink); cursor: pointer; }
.g-strip .g-head { margin: 0; }
.g-strip .g-title { font-size: 16px; }
.g-strip .more { font-size: 14px; color: var(--sage); font-weight: 600; display: inline-flex; align-items: center; }
.g-strip .more svg.i { width: 16px; height: 16px; }
.mini-bed { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; align-items: end; }
.mini-plot { display: grid; justify-items: center; align-items: end; border-radius: 10px; padding-top: 2px; }
.mini-plot .plant { width: 30px; height: 34px; }
.mini-plot.flower .plant { width: 34px; height: 38px; }
.mini-plot .plant .face, .mini-plot .plant ellipse[cy="118"] { display: none; }
.mini-plot .seed { width: 26px; height: 20px; opacity: .8; }
.mini-plot i { font-style: normal; font-size: 13px; color: var(--muted); }
.mini-plot.today { background: rgba(66, 107, 83, .09); }
.mini-plot.today i { color: var(--sage); font-weight: 600; }
.g-line { font-size: 14px; color: var(--muted); }
.plot.calm .plant { max-width: 34px; }
.plot.seed .seed { opacity: .8; }

/* progress screen */
.g-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.g-stats > div { background: var(--card); border-radius: var(--r-card); padding: 12px; display: grid; justify-items: center; text-align: center; }
.g-stats b { font-size: 28px; color: var(--sage); }
.g-stats span { font-size: 14px; color: var(--muted); }
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.badge { display: grid; gap: 2px; justify-items: start; background: var(--fill); border-radius: var(--r-btn); padding: 10px 12px; color: var(--muted); }
.badge svg.i { width: 24px; height: 24px; }
.badge b { font-size: 15px; }
.badge span { font-size: 14px; }
.badge.on { background: var(--st-new-bg); color: var(--ink); }
.badge.on svg.i { color: #9A6B0F; }

/* ---------- v7: UX pass ---------- */
/* shared task, my part done */
.my-part { display: inline-flex; align-items: center; gap: 4px; background: var(--st-fin-bg); color: var(--st-fin-ink); border-radius: var(--r-btn); padding: 0 12px; min-height: 44px; font-weight: 600; font-size: 15px; flex: none; }
.my-part svg.i { width: 18px; height: 18px; }
.wait-line { font-size: 14px; color: var(--st-fin-ink); margin-top: 2px; }
.wait-line.big { background: var(--st-fin-bg); border-radius: var(--r-btn); padding: 10px 12px; font-size: 16px; font-weight: 600; margin-top: 0; }
.ktask.part { background: #F6FAF5; }
.pill.soon { background: var(--st-work-bg); color: var(--st-work-ink); }
.my-tag { display: inline-block; margin-top: 8px; background: var(--st-fin-bg); color: var(--st-fin-ink); border-radius: 99px; padding: 4px 12px; font-size: 14px; font-weight: 600; }

/* finished row: a word, not a button */
.done-word { font-size: 14px; color: var(--st-fin-ink); }
.done-fold { margin-top: 2px; }
.done-fold summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 14px; background: var(--st-fin-bg); border-radius: var(--r-card); color: var(--st-fin-ink); font-weight: 600; font-size: 16px; }
.done-fold summary::-webkit-details-marker { display: none; }
.done-fold summary::after { content: '›'; margin-inline-start: auto; transform: rotate(90deg); }
.done-fold[open] summary::after { transform: rotate(-90deg); }
.done-fold summary svg.i { width: 20px; height: 20px; }
.done-fold .stack { margin-top: 6px; }

/* "מי שרוצה (פנויה לכולם)" gets a whole row, never cut */
.pick-people .pp[data-f="free"], .pick-people .pp[data-k="free"] { grid-column: 1 / -1; display: flex; flex-direction: row; justify-content: center; gap: 10px; padding: 8px 12px; }
.pick-people .pp[data-f="free"] span:not(.av), .pick-people .pp[data-k="free"] span:not(.av) { white-space: normal; overflow: visible; max-width: none; font-size: 16px; }
.pick-people .pp[data-f="free"] .av, .pick-people .pp[data-k="free"] .av { width: 36px; height: 36px; }

/* colour and icon row shows the current choice */
.row-btn .row-lbl { flex: 1; }
.cat-now { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: var(--bg); }
.cat-now svg.i { width: 18px; height: 18px; color: var(--ink); }
.cat-now.c-none { background: var(--fill); box-shadow: inset 0 0 0 1.5px #D6D0BF; }
.row-btn > span:not(.row-lbl):not(.cat-now) { flex: none; }
.row-btn .cat-name { font-size: 15px; }

/* switches: clear on/off, with the word beside them */
.toggle { background: #CFC8B6; }
.toggle.on { background: var(--sage); }
.switch { gap: 10px; }
.tstate { min-width: 40px; font-size: 14px; color: var(--muted); }
.tstate.on { color: var(--sage); font-weight: 600; }

/* garden: days ahead are small dots */
.mini-plot.ahead { align-items: end; }
.mini-plot.ahead .soil-dot, .plot.ahead .soil-dot { width: 8px; height: 8px; margin-bottom: 8px; background: #D7C7AA; }
.g-legend .soil-dot { width: 8px; height: 8px; margin: 0; display: inline-block; }

/* ---------- portraits ---------- */
.av.photo { padding: 0; overflow: hidden; background: color-mix(in srgb, var(--c) 18%, white); }
.av.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av.letter { font-weight: 600; font-size: 20px; }
.av.lg.letter { font-size: 36px; }
.av.sm.letter { font-size: 14px; }
.join .logo { border-radius: 22px; box-shadow: 0 6px 18px rgba(10, 74, 84, .25); display: block; }

/* ---------- install offer ---------- */
.install-x { position: absolute; top: 10px; inset-inline-end: 10px; }
.sheet { position: relative; }
.install-head { display: flex; gap: 14px; align-items: center; padding: 18px 0 14px; }
.install-head img { border-radius: 18px; box-shadow: 0 4px 12px rgba(10, 74, 84, .25); flex: none; }
.install-head h2 { font-size: 20px; margin: 0 0 4px; }
.install-head p { margin: 0; font-size: 15px; }
.ios-steps { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; counter-reset: st; }
.ios-steps li { display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: var(--r-btn); padding: 10px 12px; font-size: 16px; }
.ios-steps .st-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--st-work-bg); color: #2F6FA3; display: grid; place-items: center; flex: none; }