/* Calm pastel, generous space, no hard edges.
   Written with logical properties so Hebrew RTL needs no second stylesheet. */

:root {
  --bg: #faf7f2;
  --row-label: 124px;
  --surface: #ffffff;
  --surface-soft: #f4f1ec;
  --ink: #2e2a26;
  --ink-soft: #6d665e;
  --muted: #9a938a;
  --line: rgba(46, 42, 38, 0.08);
  --line-strong: rgba(46, 42, 38, 0.14);
  --font: 'Aptos', 'Aptos Display', 'Segoe UI Variable', -apple-system, BlinkMacSystemFont,
    'Segoe UI', 'Assistant', 'Rubik', Helvetica, Arial, sans-serif;
  /* Three type roles, and no fourth: a title, the thing you read, the aside. */
  --fs-title: 20px;
  --fs-body: 15px;
  --fs-meta: 13px;
  --fs-display: 30px;
  --fw-strong: 650;
  --fw-mid: 550;

  /* One spacing scale, used everywhere. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;

  /* Every control is the same height; width is whatever its content needs. */
  --control-h: 38px;

  --radius-lg: 24px;
  --radius: 20px;
  --radius-sm: 14px;
  --shadow: 0 1px 2px rgba(46, 42, 38, 0.04), 0 8px 24px rgba(46, 42, 38, 0.05);
  --shadow-sm: 0 1px 2px rgba(46, 42, 38, 0.05);
  --warn: #a4623f;
  --danger: #9c4a45;

  --tint-sage: #e7efe4;
  --tint-sage-ink: #4c6b52;
  --tint-powder: #e2ecf5;
  --tint-powder-ink: #3f5d7a;
  --tint-lavender: #e9e4f4;
  --tint-lavender-ink: #5c4f86;
  --tint-rose: #f8e5e4;
  --tint-rose-ink: #8b5560;
  --tint-sand: #f4ebd9;
  --tint-sand-ink: #7a6435;
  --tint-sleep: #eae7e3;
  --tint-sleep-ink: #6b6660;

  /* Slightly deeper versions, for marks small enough that pastel disappears. */
  --mark-sage: #a8c4a8;
  --mark-powder: #a3c1de;
  --mark-lavender: #b5a8d8;
  --mark-rose: #e0aeaf;
  --mark-sand: #d9c290;
  --mark-sleep: #cbc6c0;
  --mark-clay: #e0b394;
  --mark-mint: #9fc9b8;
  --on-ink: #fdfbf8;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  /* Nothing in the app is wider than the screen: sideways scrolling only ever
     happens because the reader zoomed in. */
  max-width: 100%;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }

#app {
  max-width: min(560px, 100%);
  overflow-x: clip;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---- header & nav ---- */

.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px 10px;
  background: linear-gradient(var(--bg) 72%, rgba(250, 247, 242, 0));
}

.brand { display: flex; align-items: center; gap: 8px; }
.brand-mark { color: var(--tint-lavender-ink); font-size: var(--fs-meta); }
.brand-name { font-weight: 600; letter-spacing: 0.01em; }

.avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  cursor: pointer;
  font-weight: 600;
  color: var(--ink-soft);
}

.app-main {
  flex: 1;
  padding: 0 16px 108px;
}

.app-nav {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  gap: 6px;
  justify-content: center;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(250, 247, 242, 0.92);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}

.nav-btn {
  flex: 1;
  max-width: 168px;
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 10px 8px;
  color: var(--muted);
  font-weight: 500;
  cursor: pointer;
}
.nav-btn.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

.screen { display: flex; flex-direction: column; gap: 16px; }

/* ---- primitives ---- */

.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--sp-4);
  box-shadow: var(--shadow);
}

.section-title {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--ink);
}

.empty, .hint { color: var(--muted); font-size: var(--fs-body); margin: var(--sp-2) 0 0; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-h);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  border-radius: 999px;
  padding: 0 var(--sp-4);
  font-size: var(--fs-body);
  font-weight: var(--fw-mid);
  cursor: pointer;
  transition: transform 0.08s ease, background 0.15s ease;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--ink); color: var(--on-ink); border-color: transparent; }
.btn-danger { color: var(--danger); border-color: rgba(156, 74, 69, 0.3); }
.btn:disabled { opacity: 0.45; cursor: default; }

.link {
  border: 0; background: none; padding: 0;
  color: var(--ink-soft); text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer; font-size: var(--fs-body);
}

.segmented {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface-soft);
  border-radius: 999px;
}
.segment {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: calc(var(--control-h) - 8px);
  border: 0;
  background: transparent;
  border-radius: 999px;
  padding: 0 var(--sp-2);
  color: var(--ink-soft);
  cursor: pointer;
  font-size: var(--fs-body);
}
.segment.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); font-weight: 500; }
.segmented-sm .segment { font-size: var(--fs-meta); }

.chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-h);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  border-radius: 999px;
  padding: 0 var(--sp-3);
  font-size: var(--fs-body);
  color: var(--ink-soft);
  cursor: pointer;
}
.chip.is-active { background: var(--ink); color: var(--on-ink); border-color: transparent; }

.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-inline-end: 8px; }
.tag {
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 1px 8px;
  margin-inline-start: 8px;
}
.tag-soft { color: var(--tint-lavender-ink); border-color: var(--tint-lavender); }
.tag-warn { color: var(--warn); border-color: rgba(164, 98, 63, 0.3); }

.stack-bar {
  display: flex;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-soft);
  margin: var(--sp-3) 0 var(--sp-3);
}
.stack-seg { display: block; }

.meter { height: 6px; border-radius: 999px; background: var(--surface-soft); overflow: hidden; margin: var(--sp-3) 0; }
.meter-fill { display: block; height: 100%; border-radius: 999px; }

.legend { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: var(--sp-3); }
.legend-item { font-size: var(--fs-meta); color: var(--ink-soft); display: inline-flex; align-items: center; }

/* pillar tints */
.tint-sage { background: var(--tint-sage); }
.tint-powder { background: var(--tint-powder); }
.tint-lavender { background: var(--tint-lavender); }
.tint-rose { background: var(--tint-rose); }
.tint-sand { background: var(--tint-sand); }
.tint-sleep { background: var(--tint-sleep); }

.dot.tint-sage, .stack-seg.tint-sage, .meter-fill.tint-sage { background: var(--mark-sage); }
.dot.tint-powder, .stack-seg.tint-powder, .meter-fill.tint-powder { background: var(--mark-powder); }
.dot.tint-lavender, .stack-seg.tint-lavender, .meter-fill.tint-lavender { background: var(--mark-lavender); }
.dot.tint-rose, .stack-seg.tint-rose, .meter-fill.tint-rose { background: var(--mark-rose); }
.dot.tint-sand, .stack-seg.tint-sand, .meter-fill.tint-sand { background: var(--mark-sand); }
.dot.tint-sleep, .stack-seg.tint-sleep, .meter-fill.tint-sleep { background: var(--mark-sleep); }
.stack-seg + .stack-seg { border-inline-start: 1px solid rgba(255, 255, 255, 0.65); }

/* ---- NOW ---- */

.now { padding: 20px; border-radius: var(--radius-lg); }
.audience-row { display: flex; align-items: center; gap: var(--sp-2); }
.audience-sep { width: 1px; height: 18px; background: var(--line-strong); }
.requests .row.is-urgent { background: var(--tint-rose); border-radius: var(--radius-sm); }
.note-thread {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  font-size: var(--fs-meta);
}
.note { margin: 0; }
.note-by { color: var(--ink-soft); font-weight: var(--fw-mid); }
/* Only the ask is red: it sits as its own panel at the top of NOW, and the
   card underneath keeps saying what you were doing. */
.now-urgent-strip {
  margin-bottom: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--mark-rose);
  border-radius: var(--radius-sm);
  background: var(--tint-rose);
}
.now-urgent-strip .now-kicker { color: var(--tint-rose-ink); }
.now-urgent-title { margin: var(--sp-1) 0 var(--sp-2); font-size: var(--fs-title); font-weight: var(--fw-strong); }
.now.tint-sage { background: var(--tint-sage); }
.now.tint-powder { background: var(--tint-powder); }
.now.tint-lavender { background: var(--tint-lavender); }
.now.tint-rose { background: var(--tint-rose); }
.now.tint-sand { background: var(--tint-sand); }
.now-free { background: var(--surface); }

.now-kicker {
  font-size: var(--fs-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.now-title { margin: var(--sp-3) 0 var(--sp-1); font-size: var(--fs-display); font-weight: 600; line-height: 1.2; }
.now-meta { margin: 0; font-size: var(--fs-body); color: var(--ink); }
.now-sub { margin: 2px 0 0; font-size: var(--fs-meta); color: var(--ink-soft); }
.now-note { margin: var(--sp-3) 0 0; font-size: var(--fs-meta); color: var(--ink-soft); }
.now-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-4); }
.now-suggest { margin-top: var(--sp-3); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.now-suggest-label { font-size: var(--fs-meta); color: var(--muted); }
.suggest-pill {
  border: 1px dashed var(--line-strong);
  background: transparent;
  border-radius: 999px;
  padding: 7px 14px;
  font-size: var(--fs-meta);
  cursor: pointer;
  color: var(--ink-soft);
}

/* ---- score ---- */

.score-row { padding: 0 4px; }
.score-value { font-size: var(--fs-title); font-weight: 600; }
.score-hint { margin: 2px 0 0; font-size: var(--fs-meta); color: var(--muted); }

/* ---- week strip ---- */

.week-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  scrollbar-width: none;
}
.week-strip::-webkit-scrollbar { display: none; }
.day-cell {
  flex: 0 0 auto;
  width: 64px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 10px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  cursor: pointer;
}
.day-cell.is-selected { border-color: var(--ink); }
.day-cell.is-today .day-num { color: var(--tint-lavender-ink); font-weight: 600; }
.day-name { font-size: var(--fs-meta); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.day-num { font-size: var(--fs-body); }
.day-score { font-size: var(--fs-meta); color: var(--ink-soft); }
.day-score.is-final { font-weight: 600; color: var(--ink); }

/* ---- timeline ---- */

.timeline { display: flex; flex-direction: column; }
.timeline-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: var(--sp-2); }
.audience {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: var(--fs-meta);
  color: var(--ink-soft);
  cursor: pointer;
}

.row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: start;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 12px 4px;
  cursor: pointer;
}
.row:last-child { border-bottom: 0; }
.row-time { flex: 0 0 46px; font-size: var(--fs-meta); color: var(--muted); padding-top: 2px; font-variant-numeric: tabular-nums; }
.row-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.row-title { display: flex; align-items: center; font-weight: 500; }
.row-meta { font-size: var(--fs-meta); color: var(--muted); }
.row-mark { color: var(--muted); font-size: var(--fs-body); padding-top: 2px; }
.row.is-done .row-title { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.row.is-done .row-mark { color: var(--tint-sage-ink); }
.row.is-skipped { opacity: 0.5; }
.row.is-boundary .row-title { font-weight: 400; color: var(--ink-soft); }
.row.is-protected { background: linear-gradient(90deg, rgba(233, 228, 244, 0.4), transparent); border-radius: var(--radius-sm); }
.row.is-paused { opacity: 0.55; }
.row.is-current { background: var(--surface-soft); border-radius: var(--radius-sm); }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: var(--sp-2); }
.row-actions .btn { padding: 7px 13px; font-size: var(--fs-meta); }
.row-flex { border-bottom: 1px solid var(--line); }

.flex-card .section-title { margin-bottom: var(--sp-1); }

/* ---- requests ---- */

.request-row { padding: 10px 0; border-bottom: 1px solid var(--line); }
.request-row:last-child { border-bottom: 0; }
.request-text { margin: 0; font-size: var(--fs-body); }

/* ---- overview ---- */

.balance-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.balance-head .segmented { flex: 0 0 auto; }
.balance-note { margin: 0; font-size: var(--fs-meta); color: var(--muted); }

.pillar-list { display: flex; flex-direction: column; gap: 12px; }
.pillar-card { padding: 16px 18px; background: var(--surface); }
.pillar-card.tint-sage { border-inline-start: 4px solid var(--tint-sage); }
.pillar-card.tint-powder { border-inline-start: 4px solid var(--tint-powder); }
.pillar-card.tint-lavender { border-inline-start: 4px solid var(--tint-lavender); }
.pillar-card.tint-rose { border-inline-start: 4px solid var(--tint-rose); }
.pillar-card.tint-sand { border-inline-start: 4px solid var(--tint-sand); }

.pillar-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: start;
  cursor: pointer;
}
.pillar-name { flex: 1; font-weight: 600; font-size: var(--fs-body); }
.pillar-actual { font-variant-numeric: tabular-nums; }
.pillar-count { color: var(--muted); font-size: var(--fs-meta); }
.pillar-caret { color: var(--muted); width: 14px; text-align: center; }

.pillar-stats { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.stat { display: flex; flex-direction: column; }
.stat-label { font-size: var(--fs-meta); color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.stat-value { font-size: var(--fs-body); font-variant-numeric: tabular-nums; }
.stat.is-warn .stat-value { color: var(--warn); }

.cat-list { margin-top: var(--sp-3); border-top: 1px solid var(--line); padding-top: 10px; }
.cat-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: var(--fs-body); }
.cat-name { color: var(--ink-soft); }
.cat-value { font-variant-numeric: tabular-nums; text-align: end; }
.cat-sub { color: var(--muted); font-size: var(--fs-meta); }
.cat-total { border-top: 1px solid var(--line); margin-top: var(--sp-2); padding-top: 8px; font-weight: 600; }
.cat-head { margin: var(--sp-3) 0 2px; font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); font-weight: 600; }

.insight { padding: 14px 0; border-bottom: 1px solid var(--line); }
.insight:last-child { border-bottom: 0; }
.insight-tag {
  font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted);
}
.insight-text { margin: var(--sp-2) 0 0; font-size: var(--fs-body); }
.insight-tradeoff { margin: var(--sp-2) 0 0; font-size: var(--fs-meta); color: var(--muted); }
.loop-adequacy .insight-tag { color: var(--tint-rose-ink); }
.loop-capacity .insight-tag { color: var(--tint-lavender-ink); }
.loop-schedule .insight-tag { color: var(--tint-powder-ink); }

.capacity-line { margin: var(--sp-2) 0 0; font-size: var(--fs-body); color: var(--ink-soft); }
.warn-card { background: var(--tint-sand); }

.prog-row { padding: 12px 0; border-bottom: 1px solid var(--line); }
.prog-row:last-child { border-bottom: 0; }
.prog-head { display: flex; justify-content: space-between; gap: 10px; }
.prog-name { font-weight: 500; }
.prog-adherence { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.prog-levels { display: flex; flex-direction: column; gap: 2px; margin-top: var(--sp-1); font-size: var(--fs-meta); color: var(--ink-soft); }
.prog-next { color: var(--tint-lavender-ink); }
.prog-eta { margin: var(--sp-2) 0 0; font-size: var(--fs-meta); color: var(--muted); }

.review-prompt { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: var(--tint-powder); }
.review-text { margin: 0; font-size: var(--fs-body); }

/* ---- setup ---- */

.toolbar { display: flex; gap: 8px; align-items: center; }
.search {
  flex: 1;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  border-radius: 999px;
  padding: 10px 16px;
}
.setup-pillar { padding: 16px 18px; }
.loc-group-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.constraint-row { padding: 12px; border-radius: var(--radius-sm); margin-bottom: var(--sp-3); }
.constraint-name { font-weight: 500; display: block; margin-bottom: var(--sp-2); }
.mini-field { display: flex; flex-direction: column; gap: 2px; }
.mini-label { font-size: var(--fs-meta); color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }

/* ---- forms ---- */

.field { display: flex; flex-direction: column; gap: 6px; }
.field-label { font-size: var(--fs-meta); color: var(--ink-soft); font-weight: 500; }
.field-hint { font-size: var(--fs-meta); color: var(--muted); }
.input {
  width: 100%;
  min-height: var(--control-h);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 0 var(--sp-3);
  font-size: var(--fs-body);
}
/* A select is only as wide as the longest thing in it. */
/* A select is as wide as what it holds: no arrow gutter beyond what Chrome
   needs, and no invented minimum. */
select.input {
  width: auto;
  min-width: 0;
  padding-inline: var(--sp-2) var(--sp-1);
  text-align: center;
  text-align-last: center;
}
/* Chrome puts the caret on the leading side in RTL: leave it room. */
[dir="rtl"] select.input { padding-inline: var(--sp-1) var(--sp-3); }
[dir="rtl"] select.input-clock { padding-inline: 0 var(--sp-1); }
input.input { padding-block: 0; }
.input:focus { outline: 2px solid var(--tint-lavender); outline-offset: 1px; }
.input-num { width: 58px; text-align: center; }
.input-budget { width: 72px; }
/* The week and the day, side by side and the same size. */
.sum-row {
  display: grid;
  grid-template-columns: 1fr 88px 88px;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-body);
}
.sum-row:last-child { border-bottom: none; }
.sum-name { color: var(--ink-soft); }
.sum-value { text-align: end; font-weight: 450; font-variant-numeric: tabular-nums; }
.sum-head { padding: 0 0 6px; border-bottom: 1px solid var(--line-strong); font-size: var(--fs-meta); color: var(--muted); }
.sum-head .sum-value { font-weight: 500; }
.sum-total .sum-value { font-weight: var(--fw-mid); }
.sum-total .sum-name, .sum-total .sum-value { color: var(--ink); }
.sum-row .legend-item { font-size: var(--fs-body); }

/* Setup shows the questionnaire itself; the section header already names it,
   so the step's own head line is dropped there. */
.answers .step-head, .answers > .ob-title, .answers .ob-step-body > .ob-title { display: none; }
.answers-body > .ob-step-body { gap: 14px; }
.answers-body .ob-body:first-child { margin-top: 0; }
.answers-actions {
  position: sticky;
  bottom: 8px;
  display: flex;
  justify-content: center;
  padding-top: 8px;
}
.answers-actions .btn { box-shadow: 0 6px 18px rgba(46, 42, 38, 0.18); }

/* Meals are the landmarks of the day; each stretch between them is a card of
   its own, so the eye can take the day a piece at a time. */
.day-block {
  margin: var(--sp-2) 0 var(--sp-3);
  padding: 4px 12px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.block-head {
  margin: 0;
  padding: 10px 2px 6px;
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.day-block .row:last-child { border-bottom: none; }

.meal-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: var(--sp-3) 0 var(--sp-2);
  padding: 8px 14px;
  border: none;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 600;
  cursor: pointer;
}
.meal-divider-mark { font-size: var(--fs-body); }
.meal-divider-name { flex: 1; text-align: start; }
.meal-divider-time { color: var(--muted); font-weight: 500; }
.meal-divider.is-done { opacity: 0.55; }
.input-time { width: 128px; }
.inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* Inline controls size to their content — a two-digit hour is two digits wide. */
.inline .input { width: auto; min-width: 0; }
.inline select.input { flex: 0 1 auto; }
.inline-label { color: var(--muted); }
.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.form { gap: 16px; }

/* A phone zooms into any field smaller than 16px, and the zoom is what pushes
   a sheet off the side of the screen. */
@media (pointer: coarse) {
  .input, select.input, textarea.input, .search { font-size: 16px; }
}
.sheet .input, .sheet select.input, .sheet textarea { max-width: 100%; }
.sheet, .sheet-stack { max-width: 100%; overflow-x: hidden; }

/* ---- sheet ---- */

/* The resting state is the visible one: if the entrance animation never runs
   (a throttled background tab, reduced motion), the sheet is still readable. */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(46, 42, 38, 0.28);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: sheet-fade 0.18s ease;
}
@keyframes sheet-fade { from { opacity: 0; } }
@keyframes sheet-rise { from { transform: translateY(16px); } }
.sheet {
  width: 100%;
  max-width: 560px;
  max-height: 86vh;
  overflow-y: auto;
  background: var(--bg);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 10px 18px calc(28px + env(safe-area-inset-bottom));
  animation: sheet-rise 0.2s ease;
}
.sheet-grip { width: 40px; height: 4px; border-radius: 999px; background: var(--line-strong); margin: var(--sp-1) auto var(--sp-3); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sheet-title { margin: 0; font-size: var(--fs-title); font-weight: 600; }
.sheet-close { border: 0; background: transparent; font-size: var(--fs-display); color: var(--muted); cursor: pointer; line-height: 1; }
/* Nothing to head, so the row shrinks to the close button and the content
   underneath comes up to meet it. */
.sheet-head.is-bare { justify-content: flex-end; margin-block-end: calc(var(--sp-2) * -1); }
.sheet-head.is-bare + .sheet-body .sheet-stack { padding-top: 0; }
.sheet-stack { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; }
.sheet-meta { margin: 0; font-size: var(--fs-meta); color: var(--muted); }
.sheet-desc { margin: 0; font-size: var(--fs-body); color: var(--ink-soft); }
.sheet-sub { margin: var(--sp-2) 0 0; font-size: var(--fs-meta); color: var(--ink-soft); font-weight: 600; }
.sheet-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: var(--sp-1); }
.move-block { border-top: 1px solid var(--line); padding-top: 12px; }
.move-days, .move-times { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--sp-3); }

.review-q { border-top: 1px solid var(--line); padding-top: 12px; }
.review-label { margin: 0; font-size: var(--fs-body); font-weight: 500; }

/* ---- toast ---- */

.toast {
  position: fixed;
  inset-inline: 0;
  bottom: 88px;
  margin: 0 auto;
  width: fit-content;
  max-width: 80%;
  background: var(--ink);
  color: var(--on-ink);
  border-radius: 999px;
  padding: 10px 18px;
  font-size: var(--fs-body);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  z-index: 80;
}
.toast.is-visible { opacity: 1; transform: translateY(0); }

/* ---- onboarding ---- */

.is-onboarding .app-main { padding-bottom: 40px; }
.onboarding { padding-top: 12px; }
.ob-step { margin: 0; font-size: var(--fs-meta); color: var(--muted); }
.ob-progress { height: 4px; background: var(--surface-soft); border-radius: 999px; overflow: hidden; }
.ob-progress span { display: block; height: 100%; background: var(--tint-lavender-ink); opacity: 0.6; }
.ob-title { margin: var(--sp-1) 0 0; font-size: var(--fs-display); font-weight: 600; line-height: 1.25; }
.ob-body { margin: 0; color: var(--ink-soft); font-size: var(--fs-body); }
.ob-card { display: flex; flex-direction: column; gap: 10px; }
.ob-welcome { gap: 16px; align-items: flex-start; }
.ob-nav { display: flex; gap: 10px; margin-top: var(--sp-2); }
.ob-nav .btn { flex: 1; }
.pillar-cards { display: flex; flex-direction: column; gap: 12px; margin-top: var(--sp-4); }
.pillar-intro { display: flex; align-items: center; gap: 14px; padding: 14px 18px; }
.pillar-intro-icon {
  flex: 0 0 auto;
  width: 38px;
  display: grid;
  place-items: center;
  font-size: var(--fs-display);
  line-height: 1;
}
.pillar-intro h3 { margin: 0; font-size: var(--fs-title); }
.level-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-body); }
.level-label {
  min-width: 78px;
  margin-inline-end: 4px;
  color: var(--ink-soft);
  font-size: var(--fs-meta);
}
.ob-ready { gap: 12px; }

@media (min-width: 720px) {
  .app-main { padding-inline: 24px; }
  /* Five cards in two columns leave one dangling: the fifth keeps a column's
     width and sits centred beneath the pair above it. */
  .pillar-cards { display: grid; grid-template-columns: 1fr 1fr; }
  .pillar-cards > :last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 10px) / 2);
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---- activity hierarchy ---- */

.stack { display: flex; flex-direction: column; gap: 14px; }

.crumbs { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.crumb-back {
  border: 1px solid var(--line-strong);
  background: var(--surface);
  border-radius: 999px;
  width: 30px; height: 30px;
  cursor: pointer;
  color: var(--ink-soft);
  line-height: 1;
}
[dir='rtl'] .crumb-back { transform: scaleX(-1); }
.crumb {
  border: 0; background: none; padding: 4px 2px;
  color: var(--muted); font-size: var(--fs-meta); cursor: pointer;
}
.crumb + .crumb::before { content: '/'; margin: 0 var(--sp-2); color: var(--line-strong); }
.crumb.is-current { color: var(--ink); font-weight: 600; }
.crumb-hint { margin: 0; font-size: var(--fs-meta); color: var(--muted); }

.tile-grid { display: grid; gap: 10px; }
.tile {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: start;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  cursor: pointer;
  transition: transform 0.08s ease;
}
.tile:active { transform: scale(0.995); }
.tile-icon {
  flex: 0 0 auto;
  width: 40px;
  display: grid;
  place-items: center;
  font-size: var(--fs-display);
  line-height: 1;
}
.tile-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tile-title { font-weight: 600; font-size: var(--fs-body); }
.tile-sub { font-size: var(--fs-meta); color: var(--muted); }
.tile-count {
  flex: 0 0 auto;
  min-width: 26px;
  text-align: center;
  font-size: var(--fs-meta);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.branch { padding: 6px 16px; }
.add-row {
  width: 100%;
  border: 1px dashed var(--line-strong);
  background: transparent;
  border-radius: var(--radius);
  padding: 12px;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: var(--fs-body);
}

/* ---- free-text entry ---- */

.parse-preview { min-height: 60px; }
.parse-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}
.parse-editing { margin: 0 0 var(--sp-2); font-size: var(--fs-meta); color: var(--tint-rose-ink); }
.parse-name { margin: 0; font-size: var(--fs-title); }
.parse-path { margin: 2px 0 var(--sp-3); font-size: var(--fs-meta); color: var(--ink-soft); }
.parse-facts { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.parse-fact { display: flex; flex-direction: column; }
.parse-fact-label { font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.parse-fact-value { font-size: var(--fs-body); }
.parse-fact.is-guess .parse-fact-value { color: var(--muted); }
.parse-note { margin: var(--sp-3) 0 0; font-size: var(--fs-meta); color: var(--muted); }

/* ---- compact form rows ---- */

.form-top { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.frow {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 10px;
  align-items: start;
}
/* Level with the control on the first line. Centring against the whole block
   left the label floating between a selector and the note underneath it. */
.frow-label {
  font-size: var(--fs-meta);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  min-height: var(--control-h);
}
.frow-control { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.frow textarea.input { min-height: 54px; }
.form-divider { height: 1px; background: var(--line); margin: var(--sp-2) 0 2px; }
.form-section {
  margin: 0;
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.optional-toggle {
  border: 0; background: none; padding: 4px 0;
  color: var(--ink-soft); font-size: var(--fs-meta); font-weight: 600;
  cursor: pointer; text-align: start;
}
.optional { display: flex; flex-direction: column; gap: 12px; }
.form-goal:empty, .form-dynamic:empty { display: none; }
.form-goal, .form-dynamic { display: flex; flex-direction: column; gap: 12px; }

/* ---- auth ---- */

.auth { padding-top: 24px; gap: 18px; }
.auth-brand { text-align: center; }
.auth-title { margin: var(--sp-2) 0 2px; font-size: var(--fs-display); font-weight: 600; }
.auth-tagline { margin: 0; color: var(--ink-soft); font-size: var(--fs-body); }
.auth-lang { justify-content: center; }
.auth-card { display: flex; flex-direction: column; gap: 12px; }
.auth-switch { margin-bottom: var(--sp-1); }
.auth-field { display: flex; flex-direction: column; gap: 4px; }
.auth-label { font-size: var(--fs-meta); color: var(--ink-soft); }
.auth-error { margin: 0; font-size: var(--fs-meta); color: var(--danger); }
.auth-submit { width: 100%; }
.auth-note { margin: 0; font-size: var(--fs-meta); color: var(--muted); text-align: center; }
.auth-guest { display: block; margin: 0 auto; }

@media (min-width: 560px) {
  .tile-grid { grid-template-columns: 1fr 1fr; }
}

/* ---- onboarding: the generated activity review ---- */

.gen-card {
  padding: 0;
  overflow: hidden;
  border-inline-start: 4px solid var(--line);
}
.gen-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
}
.gen-icon {
  flex: 0 0 auto;
  width: 44px;
  display: grid;
  place-items: center;
  font-size: var(--fs-display);
  line-height: 1;
}
.gen-head-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.gen-title { margin: 0; font-size: var(--fs-title); font-weight: 600; }
.gen-count { font-size: var(--fs-meta); color: var(--muted); }

.gen-row {
  display: flex;
  align-items: stretch;
  gap: 4px;
  border-top: 1px solid var(--line);
  padding-inline-end: 8px;
}
.gen-row-main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  text-align: start;
  padding: 12px 18px;
  cursor: pointer;
  min-width: 0;
}
.gen-edit {
  flex: 0 0 auto;
  font-size: var(--fs-meta);
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gen-toggle {
  flex: 0 0 auto;
  align-self: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: 1;
  cursor: pointer;
}
.gen-row.is-removed .row-title { text-decoration: line-through; color: var(--muted); }
.gen-row.is-removed { opacity: 0.55; }


/* ---- step 5: groups and merge choices ---- */

/* A firm rule under an open category title, in that category's own accent,
   so the header reads as a heading and not as another row in the list. */
.gen-card.is-open .gen-head { border-bottom: 2px solid var(--line-strong); }
.gen-head {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: start;
  cursor: pointer;
}
.caret {
  margin-inline-start: auto;
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: var(--fs-body);
  line-height: 1;
}
.caret.is-open {
  background: var(--ink);
  color: var(--on-ink);
  font-size: var(--fs-meta);
  padding-bottom: 1px;
}

.grp-block { border-bottom: 1px solid var(--line); padding: 14px 18px; }
.grp-block:last-child { border-bottom: 0; }
.grp-head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  text-align: start;
  padding: 2px 0;
  cursor: pointer;
}
.grp-head-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.grp-count { font-size: var(--fs-meta); color: var(--muted); }
.grp-body { padding-top: 6px; }
.grp-icon {
  flex: 0 0 auto;
  width: 34px;
  display: grid;
  place-items: center;
  font-size: var(--fs-display);
  line-height: 1;
}
.grp-title { margin: 0; font-size: var(--fs-body); font-weight: 600; }
.grp-desc { font-size: var(--fs-meta); color: var(--muted); }
.grp-mode { display: flex; align-items: center; gap: 10px; margin-top: var(--sp-3); flex-wrap: wrap; }
.grp-mode .segmented { flex: 0 0 auto; min-width: 190px; }
.grp-mode-hint { font-size: var(--fs-meta); color: var(--muted); }
.unit-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-3); }
.unit-chips .chip { padding: 5px 11px; font-size: var(--fs-meta); }
.grp-block .gen-row { border-top: 1px solid var(--line); margin-top: var(--sp-3); padding-inline-end: 0; }
.grp-block .gen-row:first-of-type { margin-top: var(--sp-3); }
.grp-block .gen-row-main { padding-inline: 0; }
.row-covers { font-size: var(--fs-meta); color: var(--muted); }

.days-picker { display: flex; flex-direction: column; gap: 6px; }
.days-picker .chip-row { margin-top: 0; }
.day-chips .chip { padding: 6px 0; min-width: 38px; text-align: center; font-size: var(--fs-meta); }

.ob-resumed { margin: 0 0 2px; font-size: var(--fs-meta); color: var(--muted); }
.ob-restart { display: block; margin: var(--sp-1) auto 0; font-size: var(--fs-meta); color: var(--muted); }

/* ---- onboarding: tappable choices ---- */

.ob-step-body { display: flex; flex-direction: column; gap: 14px; }
.ob-subtitle { margin: var(--sp-1) 0 0; font-size: var(--fs-body); font-weight: 600; }

.choice-grid { display: grid; gap: 10px; }
.choice-3 { grid-template-columns: repeat(3, 1fr); }
.choice-2 { grid-template-columns: repeat(2, 1fr); }
.choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 104px;
  padding: 14px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 0.08s ease, border-color 0.15s ease;
}
.choice:active { transform: scale(0.98); }
.choice.is-active { border-color: var(--ink); box-shadow: var(--shadow); }
.choice-icon { font-size: var(--fs-display); line-height: 1; }
.choice-label { font-size: var(--fs-meta); text-align: center; color: var(--ink-soft); }
.choice.is-active .choice-label { color: var(--ink); font-weight: 600; }

.people { display: flex; flex-direction: column; gap: 8px; }
.person { display: flex; align-items: center; gap: 10px; }
.person-avatar {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-soft);
  color: var(--ink-soft);
  font-weight: 600;
  font-size: var(--fs-body);
}
.person-input { flex: 1; }
.person-remove {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
}

.glyph { width: 48px; height: 36px; display: block; }
.choice-icon { display: grid; place-items: center; min-height: 32px; }

/* ---- describe your home: places you can move between indoors and out ---- */

.entry-card { display: flex; flex-direction: column; gap: 10px; }
.entry-row { display: flex; gap: 8px; align-items: center; }
.entry-row .input { flex: 1; }
.entry-foot { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.entry-hint { margin: 0; font-size: var(--fs-meta); color: var(--muted); }
.entry-swap { font-size: var(--fs-meta); }

.zone { transition: background 0.15s ease, border-color 0.15s ease; border: 1px solid transparent; }
.zone.is-over { border-color: var(--ink); background: var(--surface-soft); }
.zone .empty { margin: var(--sp-2) 0 0; }

.place {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  font-size: var(--fs-body);
  cursor: grab;
}
[dir='rtl'] .place { padding: 6px 14px 6px 8px; }
.place.is-dragging { opacity: 0.4; }
.place-name {
  user-select: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
.chip-divider {
  height: 1px;
  background: var(--line);
  margin: var(--sp-3) 0 2px;
}
.place-remove {
  width: 22px; height: 22px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
  font-size: var(--fs-meta);
  padding: 0;
}
.place-remove:hover { color: var(--ink); }

.place { position: relative; }
.place-count {
  position: absolute;
  top: -7px;
  inset-inline-start: -6px;
  min-width: 18px;
  height: 18px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--on-ink);
  font-size: var(--fs-meta);
  line-height: 18px;
  text-align: center;
  padding: 0 4px;
  z-index: 1;
}

/* ---- step 5: jobs you can split and rearrange ---- */

.generated { gap: 18px; }

.jobs-head { display: flex; align-items: center; gap: 8px; margin: var(--sp-3) 0 var(--sp-2); }
.jobs-label { font-size: var(--fs-meta); color: var(--ink-soft); }
.stepper { display: inline-flex; align-items: center; gap: 4px; }
.stepper-btn {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  line-height: 1;
}
.stepper-btn:disabled { opacity: 0.35; cursor: default; }
.stepper-value { min-width: 20px; text-align: center; font-variant-numeric: tabular-nums; }

.jobs { display: flex; flex-direction: column; gap: 10px; }
.job {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  background: var(--surface);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.job.is-over { border-color: var(--ink); background: var(--surface-soft); }
.job-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.job-name { font-weight: 600; font-size: var(--fs-body); }
.job-meta { font-size: var(--fs-meta); color: var(--muted); white-space: nowrap; }
.job-units { margin-top: var(--sp-2); }
.job-edit { margin-top: var(--sp-2); font-size: var(--fs-meta); }

.unit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 7px 5px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  font-size: var(--fs-meta);
  cursor: grab;
}
[dir='rtl'] .unit { padding: 5px 12px 5px 7px; }
.unit.is-dragging { opacity: 0.4; }
.unit-pick {
  border: 0;
  background: none;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.unit.is-picked {
  background: var(--ink);
  border-color: transparent;
  color: var(--on-ink);
}
.unit.is-picked .unit-remove { color: var(--on-ink); border-color: rgba(255,255,255,0.4); }
.unit-remove {
  width: 20px; height: 20px;
  border: 0; border-radius: 50%;
  background: var(--surface-soft);
  color: var(--muted);
  cursor: pointer;
  font-size: var(--fs-meta);
  line-height: 1;
  padding: 0;
}

.excluded { margin-top: var(--sp-3); padding-top: 10px; border-top: 1px dashed var(--line-strong); }
.excluded-label { font-size: var(--fs-meta); color: var(--muted); }
.excluded .chip { opacity: 0.6; }

/* ---- step 5: sessions, custom categories, and what is open ---- */

/* The group you are working in is shaded, so it is obvious where you are. */
/* Groups are a plain white list. The one that is open is the one with a
   filled panel of content under it — the fill marks the contents, not the
   header, so there is nothing to mistake for a disabled row. */
.gen-body { background: transparent; padding: 0 0 14px; }
.grp-block { margin: 0; }
.grp-block.is-open .grp-title { font-weight: 700; }
.grp-block.is-open .grp-caret { color: var(--ink); }
.grp-body {
  background: var(--surface-soft);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin: var(--sp-2) 0;
}
.grp-block.is-open .job { background: var(--surface); border-color: var(--line); }
.gen-body > .add-row { margin: var(--sp-3) var(--sp-4) 0; width: calc(100% - 36px); }

.job.is-empty { border-style: dashed; }
.job-hint { margin: var(--sp-2) 0 0; font-size: var(--fs-meta); color: var(--muted); }
.job-remove {
  position: absolute;
  top: -10px;
  inset-inline-end: -10px;
  width: 24px; height: 24px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  z-index: 1;
  cursor: pointer;
  font-size: var(--fs-meta);
  line-height: 1;
  padding: 0;
}
.job-head { align-items: center; }
.task-card { border-style: solid; }
.task-card .job-head { align-items: baseline; }

.task-drop { border-radius: var(--radius-sm); transition: background 0.15s ease, box-shadow 0.15s ease; }
.task-drop.is-over { background: var(--surface); box-shadow: inset 0 0 0 1px var(--ink); }
.task-drop:empty { min-height: 0; }
.grp-body .task-drop:empty { min-height: 8px; }
.gen-row.is-dragging { opacity: 0.4; }
.gen-row[draggable='true'] .gen-row-main { cursor: grab; }
.grp-remove { display: block; margin-top: var(--sp-3); font-size: var(--fs-meta); color: var(--muted); }

.gen-head.is-over, .grp-head.is-over { box-shadow: inset 0 0 0 1px var(--ink); border-radius: var(--radius-sm); }

/* A firmer line between one sub-category and the next. */
.grp-block + .grp-block { border-top: 1px solid var(--line-strong); }
.grp-block { border-bottom: 0; }
.gen-body > .grp-block:first-child { border-top: 0; }

/* ---- daily routine: the same cards, without the folding ---- */

.routine-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.routine-row { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
.routine-label { font-size: var(--fs-meta); color: var(--ink-soft); font-weight: 500; }
.routine-row .chip-row { margin-top: 2px; }
.routine-note { margin: 0; font-size: var(--fs-meta); color: var(--muted); }

/* A dial: turn it up and the plan gives the work more time. */
.dial {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  margin: var(--sp-3) 0 var(--sp-2);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pal-2, var(--line-strong)), var(--pal-5, var(--ink-soft)));
  cursor: pointer;
}
.dial::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--pal-edge, var(--ink));
  box-shadow: var(--shadow-sm);
}
.dial::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 2px solid var(--pal-edge, var(--ink));
  border-radius: 50%;
  background: var(--surface);
}
.dial-scale {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: var(--fs-meta);
  color: var(--muted);
}
.dial-tick { flex: 1; text-align: center; }
.dial-tick:first-child { text-align: start; }
.dial-tick:last-child { text-align: end; }
.dial-tick.is-on { color: var(--ink); font-weight: var(--fw-mid); }
.meal {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.meal-title { margin: 0; font-size: var(--fs-body); font-weight: 600; }

.practice, .trip {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.practice-head { display: flex; align-items: center; gap: 8px; }
.practice-name { flex: 1; font-weight: 600; }
.practice-pick { flex: 0 1 auto; width: auto; font-weight: var(--fw-mid); }
.level-row .segmented { flex: 0 0 auto; }
.gen-head-action { margin-inline-start: auto; }

/* The top bar's own controls: add a task, then who you are. */
.header-actions { display: flex; align-items: center; gap: var(--sp-2); }
.header-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
}
.header-btn:active { transform: scale(0.96); }

/* A red ring until a section has been set, a green tick once it has. It sits
   beside the open/close control, the same size, on the same line. */
.done-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  margin-inline-start: auto;
  border: 2px solid rgba(156, 74, 69, 0.5);
  border-radius: 50%;
  color: transparent;
}
.done-mark.is-done {
  border-color: var(--tint-sage-ink);
  background: var(--tint-sage);
  color: var(--tint-sage-ink);
}
/* Once the mark has taken the free space, the caret sits next to it. */
.done-mark + .caret { margin-inline-start: var(--sp-2); }

/* The step's own line: pillar mark, title, and its progress — the mark lands
   in the same column as the marks on the cards below (a caret's width in). */
.step-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  /* caret + gap + the card's own padding, so the marks share a column */
  padding-inline-end: 66px;
}
.step-head .ob-title { margin: 0; flex: 1; }
.step-head .gen-icon { width: 36px; height: 36px; flex: 0 0 36px; }
/* The step's title is written in its pillar's colour. */
.ob-title.is-pillar { color: var(--pal-ink, var(--ink)); }

/* Drawn icons sit in a tinted badge, so a card is recognisable before it is
   read — the pastel is the pillar's own. */
.icon { display: block; }
.gen-icon, .tile-icon, .grp-icon, .pillar-intro-icon, .goal-icon, .meal-divider-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
}
.gen-icon, .tile-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}
.grp-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}
/* One hue per pillar, and shades of it for what sits inside — a card never
   borrows another pillar's colour. */
.pal-sage {
  --pal-edge: var(--mark-sage); --pal-ink: var(--tint-sage-ink);
  --pal-1: #f1f6ef; --pal-2: #e7efe4; --pal-3: #dbe8d7; --pal-4: #cee0c9; --pal-5: #c1d7bb;
}
.pal-powder {
  --pal-edge: var(--mark-powder); --pal-ink: var(--tint-powder-ink);
  --pal-1: #eef4fa; --pal-2: #e2ecf5; --pal-3: #d5e4f1; --pal-4: #c6d9ea; --pal-5: #b8cfe4;
}
.pal-lavender {
  --pal-edge: var(--mark-lavender); --pal-ink: var(--tint-lavender-ink);
  --pal-1: #f2eefa; --pal-2: #e9e4f4; --pal-3: #ded6ef; --pal-4: #cfc5e7; --pal-5: #c2b6e0;
}
.pal-rose {
  --pal-edge: var(--mark-rose); --pal-ink: var(--tint-rose-ink);
  --pal-1: #fdf2f1; --pal-2: #f8e5e4; --pal-3: #f3d8d7; --pal-4: #ecc7c6; --pal-5: #e4b7b6;
}
/* Kept for a step that needs no pillar colour of its own. Nothing uses it now
   that a nested card draws its own frame: the clash it was answering was the
   welded edges, not the colours. */
.pal-ink {
  --pal-edge: var(--ink); --pal-ink: var(--ink);
  --pal-1: #f4f2ef; --pal-2: #ebe8e4; --pal-3: #e0dcd7; --pal-4: #d3cec8; --pal-5: #c5bfb8;
}
.pal-sand {
  --pal-edge: var(--mark-sand); --pal-ink: var(--tint-sand-ink);
  --pal-1: #faf4e8; --pal-2: #f4ebd9; --pal-3: #eee0c6; --pal-4: #e5d3ae; --pal-5: #dbc596;
}

/* The card's icon takes its shade; anything nested takes the next one down. */
.gen-icon, .tile-icon, .grp-icon { color: var(--pal-ink, var(--ink-soft)); }
.gen-icon, .tile-icon { background: var(--pal-2, var(--surface-soft)); }
.shade-1 > .gen-head .gen-icon { background: var(--pal-1); }
.shade-2 > .gen-head .gen-icon { background: var(--pal-2); }
.shade-3 > .gen-head .gen-icon { background: var(--pal-3); }
.shade-4 > .gen-head .gen-icon { background: var(--pal-4); }
.shade-5 > .gen-head .gen-icon { background: var(--pal-5); }
.grp-icon { background: var(--pal-3, var(--surface-soft)); }
.grp-block.is-open .grp-body { background: var(--pal-1, var(--surface-soft)); }

/* The edge is the pillar itself, the same on every card inside it. */
.card.pal-sage, .card.pal-powder, .card.pal-lavender, .card.pal-rose,
.card.pal-sand, .card.pal-ink {
  border-inline-start: 4px solid var(--pal-edge);
}

/* A card inside a card keeps its stripe off its parent's. Welded together the
   two read as one thick edge belonging to neither, and the nesting — which is
   the only thing the stripe is there to show — disappears. Any depth: the
   cards inside a step sit in the step's own wrapper, not directly in the body,
   so a child-only rule reached none of the ones that actually touch. */
.gen-card .gen-card,
.grp-body > .card,
.jobs > .card {
  margin-inline: var(--sp-3);
}

/* A card inside a card is drawn rather than floated: the coloured edge that
   says which pillar it belongs to, and one thin line the whole way round. The
   shadow was doing the same job as the line and doing it more loudly, so the
   line keeps it and the shadow goes. */
.gen-card .gen-card {
  border: 1px solid var(--line);
  border-inline-start-width: 4px;
  box-shadow: none;
}
.pal-sage.is-open > .gen-head, .pal-powder.is-open > .gen-head,
.pal-lavender.is-open > .gen-head, .pal-rose.is-open > .gen-head,
.pal-sand.is-open > .gen-head, .pal-ink.is-open > .gen-head {
  border-bottom: 2px solid var(--pal-edge);
}
.pillar-intro-icon { color: var(--ink); }
.goal-icon { color: var(--tint-sand-ink); }
.meal-divider-mark { color: var(--tint-sand-ink); }

/* A goal is a decision, so it gets a frame of its own rather than one more row. */
.goal-box {
  margin-top: var(--sp-1);
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.goal-head { display: flex; align-items: center; gap: 8px; }
.goal-head h5 { margin: 0; font-size: var(--fs-body); font-weight: 700; }
.goal-icon { font-size: var(--fs-title); }
.goal-drop { margin-inline-start: auto; }
.goal-box .level-row { gap: 8px; }
.goal-add { align-self: flex-start; }
.check-row { gap: 8px; cursor: pointer; }
.check-row input { width: 18px; height: 18px; accent-color: var(--ink); }
/* A clock reads left to right in every language: 07:30, never 30:07, and each
   half is only as wide as two digits need. */
.clock-pair { display: inline-flex; align-items: center; gap: 3px; direction: ltr; }
select.input-clock { width: 50px; padding-inline: var(--sp-1) 0; text-align: center; }
select.input-minutes { max-width: 96px; }

[dir="rtl"] .input-time, [dir="rtl"] .input-clock { direction: ltr; text-align: center; }
[dir="rtl"] .row-time, [dir="rtl"] .meal-divider-time { direction: ltr; }


.practice-remove {
  width: 26px; height: 26px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
}
.input-minutes { width: auto; }
.trip .chip-row { margin-top: 0; }

.inline-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inline-row-label { min-width: var(--row-label); font-size: var(--fs-meta); color: var(--ink-soft); }
.meal { flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; }
/* One label column for every row in the routine, so the controls line up. */
.meal-title {
  margin: 0;
  font-size: var(--fs-body);
  font-weight: 700;
  flex: 0 0 var(--row-label);
  width: var(--row-label);
  overflow-wrap: anywhere;
}
.meal-title-input { flex: 0 0 var(--row-label); width: var(--row-label); font-weight: 600; }
.meal-title .place-remove { margin-inline-start: 6px; vertical-align: middle; }
.meal-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; }
.meal { align-items: flex-start; }
.meal-lines { flex-direction: column; align-items: stretch; gap: 8px; }
/* Rows here carry several controls: keep each one only as wide as it needs. */

.routine-pair { display: flex; gap: 24px; flex-wrap: wrap; }
.routine-pair > .routine-row { flex: 0 1 auto; }

.trip.meal { align-items: flex-start; }
.trip-controls { flex-direction: column; align-items: stretch; gap: 8px; }
.trip-days { margin-top: 0; gap: 6px; }
.trip-days .chip { padding: 0 var(--sp-2); font-size: var(--fs-meta); text-align: center; }
.trip .segmented { flex: 0 0 auto; }
.pet-row { display: flex; align-items: center; gap: 8px; }
.pet-row .input { flex: 1; min-width: 0; }
.day-row { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
.day-row .chip { width: 46px; flex: 0 0 46px; padding: 0; text-align: center; }
/* Every leg label is the same width, so the clocks line up down the sheet —
   the colon inside a clock keeps its own size. */
.day-row .inline:not(.clock-pair) > .inline-label { min-width: 52px; }
/* Seven of these stack up: every control here is trimmed to fit one line. */
.day-row .inline-label { font-size: var(--fs-meta); white-space: nowrap; }
.sheet { padding-inline: var(--sp-3); }
.day-row select.input-clock { width: 46px; padding-inline: 0; }
.day-row .clock-pair { gap: 2px; }
.day-row select.input-minutes { width: 76px; padding-inline: 2px; }
.day-row .inline { flex-wrap: nowrap; gap: var(--sp-1); }
/* On a phone each leg of the trip takes its own line rather than running off. */
@media (max-width: 520px) {
  .day-row { align-items: center; row-gap: var(--sp-2); }
  .day-row > .inline { flex: 0 1 auto; }
  .day-row > .input-minutes { margin-inline-start: 0; }
}
/* The driver takes the end of the line, and its own line when space runs out. */
.day-row > .input-minutes { margin-inline-start: auto; }

/* The invitation code is read down the phone, so it is spaced to be read. */
.share-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--fs-display);
  letter-spacing: .18em;
  margin: 0;
  color: var(--ink);
}

/* Who owes a shared job. Set apart from the pillar line beside it, because it
   answers a different question: not what this is, but whose it is. */
.row-who {
  display: inline-block;
  margin-inline-start: var(--sp-2);
  padding-inline: var(--sp-2);
  border-inline-start: 1px solid var(--line);
  color: var(--ink-soft);
  white-space: nowrap;
}

/* What the thing is, on an activity that already exists: read, not answered. */
.form-identity {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-2);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-title);
}
.form-identity-where {
  font-size: var(--fs-meta);
  color: var(--ink-soft);
}

/* A row that appears or disappears with the answer above it. It holds a place
   in the form without becoming a layer of its own. */
.form-slot { display: contents; }

/* What was set aside sits apart from what you can still add, so the two are
   not read as one list. */
.excluded { margin-block-end: var(--sp-4); }
.unit.is-excluded {
  border-style: dashed;
  color: var(--muted);
  background: transparent;
}
.confirm-question { margin: 0; font-size: var(--fs-title); font-weight: 600; }

/* The first thing inside a category should not start against its name. */
.gen-card.is-open > .gen-body > :first-child,
.gen-card.is-open > .gen-body > .generated > :first-child {
  margin-block-start: var(--sp-3);
}

/* Who does this one, on the job itself. Sits at the end of the job's own line,
   so the split control above keeps its own row. */
.assign-row { display: flex; gap: 6px; margin-inline-start: auto; flex-wrap: wrap; }
.assign-btn {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font: inherit;
  font-size: var(--fs-meta);
  padding: 3px 10px;
  cursor: pointer;
}
.assign-btn.is-on { background: var(--ink); border-color: transparent; color: var(--on-ink); }
.job-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* A room, and what it is waiting for. */
.place-card .gen-head { padding: var(--sp-3) var(--sp-4); }
.place-jobs { display: flex; flex-direction: column; }
.place-row { cursor: default; }

/* An open stretch between two things. Quiet enough not to compete with the
   rows, present enough to be counted as part of the day. */
.gap-row {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) 0;
}
.gap-line { flex: 1; height: 1px; background: var(--line); }
.gap-text {
  font-size: var(--fs-meta);
  color: var(--muted);
  white-space: nowrap;
}

/* The room a run of jobs belongs to. */
.place-head {
  margin: var(--sp-3) 0 var(--sp-1);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.place-jobs > .place-head:first-child { margin-block-start: 0; }