/* ==========================================================================
   Brand palette — swap these four and everything else follows.
   ========================================================================== */

:root {
  --forest: #1B4332;   /* deep forest green — primary surface / text */
  --lime:   #74C044;   /* lime green — Store domain */
  --amber:  #F0821E;   /* amber orange — Business domain */
  --red:    #D64545;   /* overdue / carryover only */

  /* Color encoding: hue = domain, intensity = priority. Nothing else is
     ever encoded in color. Overdue/carryover overrides both with --red. */
  --store-p1:    var(--lime);
  --store-p2:    color-mix(in srgb, var(--lime) 60%, transparent);
  --store-p3:    color-mix(in srgb, var(--lime) 25%, transparent);
  --business-p1: var(--amber);
  --business-p2: color-mix(in srgb, var(--amber) 60%, transparent);
  --business-p3: color-mix(in srgb, var(--amber) 25%, transparent);

  /* Type */
  --font-ui: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-head: 'Poppins', var(--font-ui);

  /* Metrics */
  --radius: 12px;
  --tap: 44px;               /* minimum touch target */
  --gutter: 16px;
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* Dark is the default. */
:root, :root[data-theme='dark'] {
  --bg:        #0D1F17;
  --surface:   #12291E;
  --surface-2: #173326;
  --line:      #244736;
  --text:      #E8F1EA;
  --text-dim:  #9DB3A6;
  --accent:    var(--lime);
  --on-accent: #0B1A12;
  --shadow:    0 6px 24px rgb(0 0 0 / 0.35);
}

:root[data-theme='light'] {
  --bg:        #F4F7F3;
  --surface:   #FFFFFF;
  --surface-2: #EDF2EA;
  --line:      #D5E0D3;
  --text:      var(--forest);
  --text-dim:  #5C7365;
  --accent:    var(--forest);
  --on-accent: #FFFFFF;
  --shadow:    0 6px 20px rgb(27 67 50 / 0.10);
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-head); font-weight: 600; margin: 0; }

[hidden] { display: none !important; }

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

:where(a, button, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Covers the page until app.js decides gate-vs-app, so neither flashes. */
.boot { position: fixed; inset: 0; background: var(--bg); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  min-height: var(--tap);
  padding: 0 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text);
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .12s ease, transform .06s ease;
}

.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .5; cursor: default; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

.btn-icon {
  min-width: var(--tap);
  padding: 0;
  display: inline-grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
}

/* ==========================================================================
   Passcode screen
   ========================================================================== */

.gate {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  padding-bottom: calc(var(--gutter) + var(--safe-b));
}

.gate-card {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
}

.gate-title { font-size: 30px; letter-spacing: -0.02em; }
.gate-sub { margin: -6px 0 6px; color: var(--text-dim); font-size: 15px; }

.gate-input {
  min-height: var(--tap);
  padding: 0 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  letter-spacing: .12em;
}

.gate-btn { width: 100%; }

.gate-error {
  margin: 0;
  min-height: 1.4em;
  color: var(--red);
  font-size: 14px;
}

/* ==========================================================================
   App shell
   ========================================================================== */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px var(--gutter);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.topbar-title { font-size: 20px; letter-spacing: -0.01em; }
.topbar-actions { display: flex; gap: 8px; }

.main {
  padding: var(--gutter);
  padding-bottom: calc(88px + var(--safe-b));
  max-width: 720px;
  margin-inline: auto;
}

.placeholder { color: var(--text-dim); }

@media (min-width: 760px) {
  .topbar { padding-inline: 24px; }
  .main { padding-inline: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ==========================================================================
   Filter chips
   ========================================================================== */

.filters {
  position: sticky;
  top: 57px;                    /* under the topbar */
  z-index: 9;
  display: flex;
  gap: 8px;
  padding: 10px var(--gutter);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}

.chip {
  flex: none;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.chip[aria-pressed='true'] { background: var(--surface-2); color: var(--text); border-color: var(--text-dim); }
.chip-store[aria-pressed='true']    { border-color: var(--lime);  color: var(--lime); }
.chip-business[aria-pressed='true'] { border-color: var(--amber); color: var(--amber); }

/* ==========================================================================
   Sections
   ========================================================================== */

.topbar-head { display: flex; align-items: baseline; gap: 10px; }
.topbar-date { margin: 0; color: var(--text-dim); font-size: 14px; }

.section { margin-bottom: 22px; }

.section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  list-style: none;
  cursor: default;
}

summary.section-head { cursor: pointer; -webkit-tap-highlight-color: transparent; }
summary.section-head::-webkit-details-marker { display: none; }

.section-title { font-size: 15px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-dim); }
.section-count { margin-right: auto; font-size: 13px; color: var(--text-dim); opacity: .8; }

.section-caret { color: var(--text-dim); font-size: 12px; transition: transform .15s ease; }
details[open] > .section-head .section-caret { transform: rotate(90deg); }

.btn-add {
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border-radius: 999px;
  font-size: 20px;
  line-height: 1;
  display: grid;
  place-items: center;
  color: var(--text-dim);
}

.list { display: flex; flex-direction: column; gap: 8px; }
.empty { margin: 4px 0 0; color: var(--text-dim); font-size: 14px; }

/* ==========================================================================
   Task cards — hue = domain, intensity = priority, red = overdue. Nothing
   else is ever encoded in colour.
   ========================================================================== */

.task {
  display: flex;
  align-items: stretch;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--bar, var(--line));
  border-radius: var(--radius);
  overflow: hidden;
}

.task[data-domain='store'][data-priority='1']    { --bar: var(--store-p1); }
.task[data-domain='store'][data-priority='2']    { --bar: var(--store-p2); }
.task[data-domain='store'][data-priority='3']    { --bar: var(--store-p3); }
.task[data-domain='business'][data-priority='1'] { --bar: var(--business-p1); }
.task[data-domain='business'][data-priority='2'] { --bar: var(--business-p2); }
.task[data-domain='business'][data-priority='3'] { --bar: var(--business-p3); }

/* Doubled class only to out-specify the rules above without !important. */
.task.task[data-overdue] { --bar: var(--red); }

.task-check {
  flex: none;
  width: var(--tap);
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.task-check::before {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  width: 20px;
  height: 20px;
  border: 2px solid var(--text-dim);
  border-radius: 6px;
}

.task-check[aria-pressed='true']::before {
  background: var(--accent);
  border-color: var(--accent);
}

.task-check[aria-pressed='true']::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -60% -70%;
  width: 10px;
  height: 5px;
  border: 2px solid var(--on-accent);
  border-top: 0;
  border-right: 0;
  rotate: -45deg;
}

.task-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 12px 11px 2px;
  min-height: var(--tap);
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.task-title { font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.task[data-done] .task-title { text-decoration: line-through; }
.task[data-done] { opacity: .5; }

.task-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--text-dim); }
.task-late { color: var(--red); font-weight: 600; }

/* ==========================================================================
   Quick-add
   ========================================================================== */

.quickadd {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding: 8px var(--gutter) calc(8px + var(--safe-b));
}

.qa-bar { display: flex; gap: 8px; max-width: 720px; margin-inline: auto; }

.qa-input {
  flex: 1;
  min-width: 0;
  min-height: var(--tap);
  padding: 0 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.qa-input::placeholder { color: var(--text-dim); opacity: .7; }
.qa-submit { flex: none; }

.qa-panel {
  max-width: 720px;
  margin: 0 auto 10px;
  padding-bottom: 6px;
  max-height: 52dvh;
  overflow-y: auto;
}

.qa-preview {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 0 12px;
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.qa-preview-title { font-size: 15px; overflow-wrap: anywhere; }
.qa-preview-tags { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.qa-preview-tags.dom-store { color: var(--lime); }
.qa-preview-tags.dom-business { color: var(--amber); }

.qa-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.qa-label {
  flex: none;
  width: 68px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding-top: 10px;          /* aligns with the first row of wrapping chips */
  font-size: 12px;
  color: var(--text-dim);
}

.qa-info {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}

.qa-hint {
  margin: -2px 0 10px;
  padding: 8px 10px;
  background: var(--surface-2);
  border-radius: 10px;
  font-size: 13px;
  color: var(--text-dim);
}

.seg { display: flex; gap: 6px; flex-wrap: wrap; }

.seg-btn {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font-size: 14px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.seg-btn[aria-pressed='true'] { background: var(--surface-2); color: var(--text); border-color: var(--text-dim); }
#pick-domain .seg-btn[data-value='store'][aria-pressed='true'],
#edit-domain .seg-btn[data-value='store'][aria-pressed='true'] { border-color: var(--lime); color: var(--lime); }
#pick-domain .seg-btn[data-value='business'][aria-pressed='true'],
#edit-domain .seg-btn[data-value='business'][aria-pressed='true'] { border-color: var(--amber); color: var(--amber); }

.tags { display: flex; gap: 6px; flex-wrap: wrap; }

.tag-btn {
  min-height: 32px;
  padding: 0 10px;
  border: 1px dashed var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tag-btn[aria-pressed='true'] { border-style: solid; border-color: var(--text-dim); color: var(--text); }

/* ==========================================================================
   Edit sheet
   ========================================================================== */

.sheet { position: fixed; inset: 0; z-index: 30; display: flex; align-items: flex-end; }
.sheet-backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / .45); }

.sheet-card {
  position: relative;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  max-height: 88dvh;
  overflow-y: auto;
  padding: 8px var(--gutter) calc(16px + var(--safe-b));
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 20px 20px 0 0;
  box-shadow: var(--shadow);
}

.sheet-grip { width: 40px; height: 4px; margin: 4px auto 14px; border-radius: 2px; background: var(--line); }

.sheet-title-input {
  width: 100%;
  min-height: var(--tap);
  margin-bottom: 16px;
  padding: 0 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 16px;
}

.sheet-actions { display: flex; gap: 8px; margin-top: 18px; }
.sheet-actions .btn { flex: 1; }
.btn-danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, transparent); background: transparent; }
.btn-danger[data-armed='yes'] { background: var(--red); color: #fff; border-color: var(--red); }

/* ==========================================================================
   Toasts
   ========================================================================== */

.toasts {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(72px + var(--safe-b));
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 var(--gutter);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 720px;
  width: 100%;
  margin-inline: auto;
  padding: 8px 8px 8px 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-size: 14px;
  pointer-events: auto;
}

.toast-msg { flex: 1; min-width: 0; overflow-wrap: anywhere; }

.toast-btn {
  flex: none;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
}

.toast-x {
  flex: none;
  width: 34px;
  min-height: 34px;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
}

/* The quick-add bar is fixed; keep the last card clear of it. */
.main { padding-bottom: calc(84px + var(--safe-b)); }

/* Meta chips are deliberately neutral — colour means domain, priority and
   overdue only. */
.task-prio, .task-tag, .task-horizon {
  padding: 1px 6px;
  background: var(--surface-2);
  border-radius: 6px;
}

/* ==========================================================================
   Weekly draw
   ========================================================================== */

.week-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 10px;
}

.week-id { flex: 1; font-size: 12px; color: var(--text-dim); }

.btn-small {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
}

.days { display: flex; flex-direction: column; gap: 8px; }

.day-row {
  display: grid;
  grid-template-columns: 46px 1fr;
  align-items: center;
  gap: 10px;
}

.day-label {
  font-size: 12px;
  color: var(--text-dim);
  text-align: right;
  line-height: 1.2;
}

.day-label b { display: block; font-weight: 600; color: var(--text); }
.day-row[data-past] .day-label b { color: var(--text-dim); }
.day-row[data-today] .day-label b { color: var(--accent); }

.day-empty {
  margin: 0;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--text-dim);
  font-size: 14px;
}

.day-row[data-past] .day-empty { opacity: .55; }

.pool { margin-top: 14px; }
.pool-head {
  margin: 0 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-dim);
}

/* The nudge shown in Today when the day's slot is empty. */
.prompt {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--text-dim);
  font-size: 14px;
}

.prompt span { flex: 1; min-width: 180px; }

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

.sheet-heading { font-size: 19px; margin-bottom: 6px; }
.sheet-note { margin: 0 0 14px; font-size: 13px; color: var(--text-dim); }

.wrow { display: flex; gap: 8px; margin-bottom: 8px; }

.wrow-input {
  flex: 1;
  min-width: 0;
  min-height: var(--tap);
  padding: 0 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.wrow-dom {
  flex: none;
  min-width: 82px;
  min-height: var(--tap);
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  font-size: 13px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.wrow-dom.dom-store    { color: var(--lime);  border-color: color-mix(in srgb, var(--lime) 45%, transparent); }
.wrow-dom.dom-business { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 45%, transparent); }

.btn-ghost {
  width: 100%;
  background: transparent;
  border-style: dashed;
  color: var(--text-dim);
  font-size: 14px;
}

/* Pull-to-Today. Sits on the trailing edge so the checkbox stays where the
   thumb expects it. */
.task-pull {
  flex: none;
  width: var(--tap);
  border: 0;
  border-left: 1px solid var(--line);
  background: transparent;
  color: var(--text-dim);
  font-size: 15px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   Daily review — blocks the app until answered or skipped
   ========================================================================== */

.review {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  background: rgb(0 0 0 / .6);
}

.review-card {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  max-height: 92dvh;
  overflow-y: auto;
  padding: 22px var(--gutter) calc(18px + var(--safe-b));
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 20px 20px 0 0;
  box-shadow: var(--shadow);
}

.review-title { font-size: 22px; letter-spacing: -0.01em; }
.review-date { margin: 4px 0 18px; color: var(--text-dim); font-size: 14px; }

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

.review-row {
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--bar, var(--line));
  border-radius: var(--radius);
}

.review-row[data-domain='store']    { --bar: var(--lime); }
.review-row[data-domain='business'] { --bar: var(--amber); }

.review-task { margin: 0 0 10px; font-size: 15px; overflow-wrap: anywhere; }
.review-outcome { margin-bottom: 0; }

.reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.reason-btn {
  min-height: 34px;
  padding: 0 12px;
  border: 1px dashed var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.reason-btn[aria-pressed='true'] { border-style: solid; border-color: var(--text-dim); color: var(--text); }

.review-save { width: 100%; margin-top: 20px; }

/* Deliberately plain — an escape hatch, not an invitation. */
.review-skip {
  display: block;
  margin: 12px auto 0;
  padding: 6px;
  border: 0;
  background: none;
  color: var(--text-dim);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}

/* ==========================================================================
   Statistics
   ========================================================================== */

.range {
  position: sticky;
  top: 57px;
  z-index: 9;
  display: flex;
  gap: 8px;
  padding: 10px var(--gutter);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.card {
  margin-bottom: 16px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
}

.card-title {
  margin-bottom: 14px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-dim);
}

.card-note { margin: 16px 0 10px; font-size: 12px; color: var(--text-dim); }
.muted { margin: 0; color: var(--text-dim); font-size: 14px; }

/* --- number tiles --- */

.tiles { display: flex; gap: 10px; }

.tile {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 10px;
  background: var(--surface-2);
  border-radius: var(--radius);
}

.tile-value { font-family: var(--font-head); font-size: 26px; line-height: 1.1; letter-spacing: -0.02em; }
.tile-label { font-size: 12px; color: var(--text-dim); }
.tile-sub { font-size: 11px; color: var(--text-dim); opacity: .75; }

/* --- horizontal bars --- */

.bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.bar-label { flex: none; width: 92px; font-size: 12px; color: var(--text-dim); }

.bar-track {
  flex: 1;
  height: 8px;
  min-width: 40px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}

.bar-fill { height: 100%; background: var(--text-dim); border-radius: 999px; }
.fill-store { background: var(--lime); }
.fill-business { background: var(--amber); }
.bar-value { flex: none; font-size: 11px; color: var(--text-dim); min-width: 72px; text-align: right; }

/* --- store / business volume split --- */

.split-wrap { display: flex; flex-direction: column; gap: 8px; }
.split { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--surface-2); }
.split-part { min-width: 0; }
.split-part.dom-store { background: var(--lime); }
.split-part.dom-business { background: var(--amber); }
.split-legend { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; }
.split-legend .dom-store { color: var(--lime); }
.split-legend .dom-business { color: var(--amber); }

/* --- column charts --- */

.cols { display: flex; align-items: flex-end; gap: 6px; }
.col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* The track is an empty container, not a bar. Filling it with a surface
   colour made every scoreless week read as a full-height bar. */
.col-track {
  position: relative;
  width: 100%;
  height: 72px;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line);
  border-radius: 6px;
  overflow: hidden;
}

.col-track[data-empty] { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line) 45%, transparent); }
.col-track[data-empty] + .col-value { opacity: .45; }

.col-drawn, .col-done {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 6px 6px 0 0;
}

.col-drawn { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.col-done  { background: var(--accent); }

.col-pair { display: flex; align-items: flex-end; gap: 3px; padding: 0 3px; }
.col-pair > div { position: static; flex: 1; border-radius: 4px 4px 0 0; min-height: 2px; }
.pair-created   { background: color-mix(in srgb, var(--text-dim) 45%, transparent); }
.pair-completed { background: var(--accent); }

.col-value { font-size: 10px; color: var(--text-dim); }
.col-label { font-size: 9px; color: var(--text-dim); opacity: .7; }

/* --- contribution heatmap --- */

.heat-wrap { display: flex; flex-direction: column; gap: 10px; }

.heat {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  grid-auto-flow: column;
  gap: 3px;
}

.heat-cell {
  aspect-ratio: 1;
  border-radius: 3px;
  background: var(--surface-2);
}

.heat-cell[data-level='none']   { background: var(--surface-2); }
.heat-cell[data-level='future'] { background: transparent; border: 1px dashed var(--line); }
.heat-cell[data-level='1'] { background: color-mix(in srgb, var(--accent) 25%, var(--surface-2)); }
.heat-cell[data-level='2'] { background: color-mix(in srgb, var(--accent) 50%, var(--surface-2)); }
.heat-cell[data-level='3'] { background: color-mix(in srgb, var(--accent) 75%, var(--surface-2)); }
.heat-cell[data-level='4'] { background: var(--accent); }

.heat-key { display: flex; align-items: center; gap: 4px; }
.heat-key .heat-cell { width: 11px; height: 11px; aspect-ratio: auto; }
.heat-key .muted { font-size: 11px; }

/* --- stale list --- */

.stale-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 10px;
  margin-bottom: 6px;
  background: var(--surface-2);
  border-left: 3px solid var(--line);
  border-radius: 8px;
}

.stale-row[data-domain='store']    { border-left-color: var(--lime); }
.stale-row[data-domain='business'] { border-left-color: var(--amber); }
.stale-title { font-size: 14px; overflow-wrap: anywhere; }
.stale-meta { flex: none; font-size: 11px; color: var(--text-dim); }

#stats-body { padding-top: var(--gutter); padding-bottom: calc(28px + var(--safe-b)); }

/* Had tasks, cleared none — distinct from a day with nothing on it. */
.heat-cell[data-level='zero'] {
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-dim) 55%, transparent);
}

/* ==========================================================================
   Notes, steps, repeats
   ========================================================================== */

.task-repeat, .task-steps, .task-notes {
  padding: 1px 6px;
  background: var(--surface-2);
  border-radius: 6px;
}

.sheet-notes {
  width: 100%;
  margin-bottom: 8px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 15px;
  line-height: 1.4;
  resize: vertical;
}

.steps { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.step-empty { font-size: 13px; }

.step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px 4px 4px;
  background: var(--surface-2);
  border-radius: 10px;
}

.step-check {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

.step-check::before {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  width: 16px;
  height: 16px;
  border: 2px solid var(--text-dim);
  border-radius: 5px;
}

.step-check[aria-pressed='true']::before { background: var(--accent); border-color: var(--accent); }

.step-check[aria-pressed='true']::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  translate: -60% -72%;
  width: 8px;
  height: 4px;
  border: 2px solid var(--on-accent);
  border-top: 0;
  border-right: 0;
  rotate: -45deg;
}

.step-title { flex: 1; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.step-done { text-decoration: line-through; color: var(--text-dim); }

.step-x {
  flex: none;
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--text-dim);
  font-size: 12px;
  cursor: pointer;
}

.step-add { display: flex; gap: 8px; margin-bottom: 4px; }

.step-input {
  flex: 1;
  min-width: 0;
  min-height: 38px;
  padding: 0 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 14px;
}

/* The monthly picker is 28 chips — keep it from swallowing the sheet. */
#edit-repeat-day { max-height: 108px; overflow-y: auto; }

/* ==========================================================================
   Backup, shortcuts, mobile polish
   ========================================================================== */

.backup-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 10px; }
.backup-actions .btn { flex: 1; min-width: 150px; }
.backup-status:empty { display: none; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.keys { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0 0 8px; }
.keys dt { margin: 0; }
.keys dd { margin: 0; font-size: 14px; color: var(--text-dim); }

kbd {
  display: inline-block;
  padding: 2px 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: 12px;
  white-space: nowrap;
}

/* --- mobile --- */

/* Kills the 300ms double-tap zoom delay without disabling pinch zoom. */
:where(button, .chip, .seg-btn, .tag-btn, .task, summary, label) { touch-action: manipulation; }

/* iOS zooms the page in when a focused field is under 16px. */
.step-input, .sheet-notes, .wrow-input, .qa-input, .gate-input, .sheet-title-input { font-size: 16px; }

/* A flick inside a scrollable panel shouldn't drag the page behind it. */
.qa-panel, .sheet-card, .review-card, #edit-repeat-day { overscroll-behavior: contain; }

/* Focus rings are for keyboard users; on touch they linger after a tap. */
@media (pointer: coarse) {
  :where(button):focus:not(:focus-visible) { outline: none; }
}

/* Definitions have no checkbox, so the body supplies its own left padding. */
.task[data-template] .task-body { padding-left: 12px; }