/* Agronom — design tokens */

/* Palettes (swappable via Tweaks). Each defines surface, ink, and an accent ramp. */
:root[data-palette="sage"] {
  --paper:       oklch(0.952 0.018 84);    /* washi cream */
  --paper-2:     oklch(0.975 0.012 84);    /* card surface, slightly lifted */
  --paper-deep:  oklch(0.915 0.022 82);    /* sunk wells, history rows */
  --rule:        oklch(0.86 0.018 80 / 0.7);
  --rule-soft:   oklch(0.86 0.018 80 / 0.45);

  --ink:         oklch(0.22 0.012 60);     /* sumi */
  --ink-2:       oklch(0.36 0.014 60);     /* secondary text */
  --ink-3:       oklch(0.52 0.012 65);     /* tertiary / muted */
  --ink-4:       oklch(0.66 0.010 70);     /* hint */

  --accent:      oklch(0.50 0.110 35);     /* terracotta */
  --accent-soft: oklch(0.50 0.110 35 / 0.10);
  --accent-ink:  oklch(0.36 0.090 35);

  /* care status — outlined chip palette */
  --st-overdue:    oklch(0.50 0.140 30);   /* terracotta red */
  --st-due:        oklch(0.55 0.110 75);   /* ochre */
  --st-ok:         oklch(0.50 0.070 145);  /* sage */
  --st-check:      oklch(0.48 0.070 240);  /* ink-blue */
  --st-blocked:    oklch(0.56 0.008 80);   /* stone */

  --task-fert:  var(--st-overdue);
  --task-prune: var(--st-ok);
  --task-repot: var(--st-check);
  --task-wire:  var(--st-due);
  --task-other: var(--ink-3);
}

:root[data-palette="terracotta"] {
  --paper:       oklch(0.945 0.020 60);
  --paper-2:     oklch(0.970 0.014 60);
  --paper-deep:  oklch(0.900 0.026 55);
  --rule:        oklch(0.85 0.024 55 / 0.7);
  --rule-soft:   oklch(0.85 0.024 55 / 0.45);

  --ink:         oklch(0.22 0.020 40);
  --ink-2:       oklch(0.36 0.020 40);
  --ink-3:       oklch(0.52 0.016 45);
  --ink-4:       oklch(0.66 0.012 50);

  --accent:      oklch(0.48 0.150 30);
  --accent-soft: oklch(0.48 0.150 30 / 0.10);
  --accent-ink:  oklch(0.32 0.110 30);

  --st-overdue:    oklch(0.48 0.150 30);
  --st-due:        oklch(0.56 0.115 70);
  --st-ok:         oklch(0.50 0.070 145);
  --st-check:      oklch(0.48 0.060 235);
  --st-blocked:    oklch(0.56 0.008 70);

  --task-fert:  var(--st-overdue);
  --task-prune: var(--st-ok);
  --task-repot: var(--st-check);
  --task-wire:  var(--st-due);
  --task-other: var(--ink-3);
}

:root[data-palette="clay"] {
  --paper:       oklch(0.940 0.022 70);
  --paper-2:     oklch(0.965 0.015 72);
  --paper-deep:  oklch(0.895 0.028 68);
  --rule:        oklch(0.84 0.028 65 / 0.7);
  --rule-soft:   oklch(0.84 0.028 65 / 0.45);

  --ink:         oklch(0.22 0.020 50);
  --ink-2:       oklch(0.36 0.020 50);
  --ink-3:       oklch(0.52 0.018 55);
  --ink-4:       oklch(0.66 0.014 60);

  --accent:      oklch(0.45 0.090 55);     /* copper */
  --accent-soft: oklch(0.45 0.090 55 / 0.10);
  --accent-ink:  oklch(0.32 0.075 50);

  --st-overdue:    oklch(0.50 0.135 35);
  --st-due:        oklch(0.55 0.105 75);
  --st-ok:         oklch(0.50 0.075 140);
  --st-check:      oklch(0.46 0.060 240);
  --st-blocked:    oklch(0.55 0.010 70);

  --task-fert:  var(--st-overdue);
  --task-prune: var(--st-ok);
  --task-repot: var(--st-check);
  --task-wire:  var(--st-due);
  --task-other: var(--ink-3);
}

/* density: cozy (default) / compact */
:root[data-density="cozy"] {
  --pad-screen: 18px;
  --pad-card:   16px;
  --gap-list:   10px;
  --gap-stack:  14px;
  --row-y:      12px;
  --t-body:     14px;
  --t-micro:    11.5px;
  --t-name:     20px;
  --t-hero:     28px;
}
:root[data-density="compact"] {
  --pad-screen: 14px;
  --pad-card:   12px;
  --gap-list:   6px;
  --gap-stack:  10px;
  --row-y:      8px;
  --t-body:     13px;
  --t-micro:    11px;
  --t-name:     17.5px;
  --t-hero:     24px;
}

/* base */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  background: oklch(0.88 0.014 78);
  color: var(--ink);
  font-family: "Inter Tight", "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 24px 16px 80px;
}

/* The "phone" viewport — no chrome, just a paper sheet */
.viewport {
  width: 100%;
  max-width: 420px;
  min-height: calc(100vh - 48px);
  background: var(--paper);
  color: var(--ink);
  border-radius: 22px;
  box-shadow:
    0 1px 0 oklch(1 0 0 / 0.6) inset,
    0 1px 2px oklch(0 0 0 / 0.05),
    0 18px 60px oklch(0 0 0 / 0.10),
    0 60px 120px oklch(0 0 0 / 0.06);
  overflow: hidden;
  position: relative;
  /* subtle washi grain */
  background-image:
    radial-gradient(oklch(0 0 0 / 0.025) 1px, transparent 1.4px),
    radial-gradient(oklch(0 0 0 / 0.015) 1px, transparent 1.4px);
  background-size: 24px 24px, 7px 7px;
  background-position: 0 0, 3px 5px;
}

/* —— navbar —— */
.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in oklch, var(--paper) 86%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 0.5px solid var(--rule);
}
.nav-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--pad-screen) 8px;
}
.brand {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-weight: 600;
  letter-spacing: 0.01em;
  font-size: 17px;
}
.brand-mark {
  display: inline-block;
  width: 22px; height: 22px;
  border-radius: 5px;
  align-self: center;
  flex-shrink: 0;
  vertical-align: middle;
}
.brand-num {
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  margin-left: 4px;
}
.nav-icon {
  width: 32px; height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  border: 0;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .12s ease;
}
.nav-icon:hover { background: oklch(0 0 0 / 0.05); }
.nav-icon:active { background: oklch(0 0 0 / 0.08); }

.tabs {
  display: flex;
  gap: 2px;
  padding: 0 var(--pad-screen) 0;
  margin-bottom: -0.5px;
}
.tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 10px 4px 11px;
  margin-right: 18px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0.01em;
  cursor: pointer;
  border-bottom: 1.5px solid transparent;
  position: relative;
  transition: color .15s ease;
  text-decoration: none;
}
.tab:last-child { margin-right: 0; }
.tab[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* —— screen container —— */
.screen {
  padding: var(--pad-screen) var(--pad-screen) 90px;
}
.screen.flat { padding-top: 4px; }

/* —— card —— */
.card {
  background: var(--paper-2);
  border-radius: 14px;
  border: 0.5px solid var(--rule);
  box-shadow:
    0 1px 0 oklch(1 0 0 / 0.5) inset,
    0 1px 2px oklch(0 0 0 / 0.03),
    0 1px 8px oklch(0 0 0 / 0.04);
}
.card-pad { padding: var(--pad-card); }
.status-token-meta {
  font-size: 0.72rem;
  color: var(--ink-3);
  text-align: right;
  margin-top: 10px;
}
.card-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px var(--pad-card) 9px;
  border-bottom: 0.5px solid var(--rule-soft);
}
.card-h h3 {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* —— plant row (list) —— */
.plant-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: var(--row-y) var(--pad-card);
  cursor: pointer;
  border-bottom: 0.5px solid var(--rule-soft);
  transition: background .12s ease;
  text-decoration: none;
  color: inherit;
}
.plant-row:last-child { border-bottom: 0; }
.plant-row:hover { background: oklch(0 0 0 / 0.018); }
.plant-row:active { background: oklch(0 0 0 / 0.04); }

.plant-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--paper-deep);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
  font-feature-settings: "ss01";
  letter-spacing: 0.01em;
  box-shadow: 0 0 0 0.5px var(--rule);
}
.plant-avatar.tone-a { background: oklch(0.86 0.040 145); color: oklch(0.34 0.060 145); }
.plant-avatar.tone-b { background: oklch(0.86 0.045 60);  color: oklch(0.34 0.080 50); }
.plant-avatar.tone-c { background: oklch(0.86 0.050 30);  color: oklch(0.34 0.110 30); }
.plant-avatar.tone-d { background: oklch(0.87 0.030 240); color: oklch(0.34 0.060 240); }
.plant-avatar.tone-e { background: oklch(0.88 0.035 110); color: oklch(0.34 0.060 110); }

/* photo-style square thumbnail used as the row avatar */
.plant-thumb {
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  border-radius: 9px;
  box-shadow:
    0 0 0 0.5px var(--rule),
    0 1px 2px oklch(0 0 0 / 0.05),
    inset 0 -10px 18px -10px oklch(0 0 0 / 0.20);
}
.plant-thumb--md { width: 52px; height: 52px; }
.plant-thumb--sm { width: 40px; height: 40px; border-radius: 7px; }
.plant-thumb--placeholder.tone-a { background: oklch(0.78 0.060 140); }
.plant-thumb--placeholder.tone-b { background: oklch(0.76 0.060 55);  }
.plant-thumb--placeholder.tone-c { background: oklch(0.74 0.080 30);  }
.plant-thumb--placeholder.tone-d { background: oklch(0.78 0.050 235); }
.plant-thumb--placeholder.tone-e { background: oklch(0.80 0.055 110); }
.plant-thumb--placeholder {
  background-image:
    repeating-linear-gradient(135deg,
      oklch(1 0 0 / 0.12) 0 6px,
      oklch(0 0 0 / 0.04) 6px 12px);
}
.plant-thumb-initials {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: oklch(1 0 0 / 0.78);
  text-shadow: 0 1px 2px oklch(0 0 0 / 0.25);
}
.plant-thumb.photo--leaf,
.plant-thumb.photo--bark,
.plant-thumb.photo--moss,
.plant-thumb.photo--soil { /* inherit photo--<kind> gradient from .photo selectors below */ }

.plant-meta { flex: 1; min-width: 0; }
.plant-name {
  font-size: var(--t-name);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--ink);
}
.species {
  font-style: italic;
  font-weight: 400;
  font-size: 12.5px;
  color: var(--ink-3);
  letter-spacing: 0.005em;
}
.fert-line {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  white-space: nowrap;
  max-width: 100%;
}
.fert-line > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.fert-line::before {
  content: "";
  display: inline-block;
  width: 4px; height: 4px;
  background: var(--ink-4);
  border-radius: 50%;
}
.row-badges {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 5px;
}
.all-good {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--st-ok);
  font-weight: 500;
  letter-spacing: 0.005em;
}
.all-good svg { width: 13px; height: 13px; }

/* —— status badges (outlined journal chips) —— */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px 3px;
  border-radius: 4px;
  border: 1px solid currentColor;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  background: color-mix(in oklch, currentColor 6%, transparent);
  white-space: nowrap;
}
.badge--overdue  { color: var(--st-overdue); }
.badge--due      { color: var(--st-due); }
.badge--ok       { color: var(--st-ok); }
.badge--check    { color: var(--st-check); }
.badge--blocked  { color: var(--st-blocked); border-style: dashed; }

.badge .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
}

/* —— FAB —— */
.fab {
  position: absolute;
  right: 18px;
  bottom: 22px;
  z-index: 30;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  font-size: 24px;
  font-weight: 300;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 0.5px oklch(0 0 0 / 0.2),
    0 2px 4px oklch(0 0 0 / 0.15),
    0 12px 28px oklch(0 0 0 / 0.20);
  transition: transform .15s cubic-bezier(.3,.7,.4,1), box-shadow .15s;
}
.fab:hover { transform: translateY(-1px); box-shadow: 0 0 0 0.5px oklch(0 0 0 / 0.2), 0 4px 8px oklch(0 0 0 / 0.18), 0 16px 36px oklch(0 0 0 / 0.22); }
.fab:active { transform: translateY(0) scale(.97); }

/* —— global HTMX loading indicator —— */
#global-loader {
  position: absolute;
  top: 14px;
  right: 18px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  z-index: 50;
  pointer-events: none;
}
#global-loader::after { content: "⟳"; }

/* —— detail page —— */
.detail-hd {
  padding: var(--pad-screen) var(--pad-screen) 10px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.detail-hd .name {
  font-size: var(--t-hero);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0 0 4px;
}
.detail-hd .species {
  font-size: 14px;
}
.detail-hd .substrate {
  margin-top: 8px;
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: 0.005em;
}
.detail-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  position: relative;
}

/* —— popover (More menu) —— */
.popover {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 50;
  min-width: 180px;
  background: var(--paper);
  border: 0.5px solid var(--rule);
  border-radius: 10px;
  box-shadow:
    0 1px 0 oklch(1 0 0 / 0.5) inset,
    0 1px 3px oklch(0 0 0 / 0.06),
    0 12px 28px oklch(0 0 0 / 0.18);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  animation: pop-in .14s cubic-bezier(.3,.7,.4,1) both;
}
@keyframes pop-in {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.popover button {
  appearance: none;
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  text-align: left;
  border-radius: 6px;
  cursor: pointer;
  transition: background .08s;
}
.popover button:hover { background: oklch(0 0 0 / 0.05); }
.popover button .g {
  width: 16px;
  display: inline-flex;
  justify-content: center;
  color: var(--ink-3);
  font-size: 13px;
}
.popover button.destructive { color: var(--st-overdue); }
.popover button.destructive .g { color: var(--st-overdue); }
.popover-rule {
  height: 0.5px;
  background: var(--rule-soft);
  margin: 4px 6px;
}

/* —— photo strip —— */
.photo-strip {
  display: flex;
  gap: 8px;
  margin: 0 calc(-1 * var(--pad-screen));
  padding: 4px var(--pad-screen) 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.photo-strip::-webkit-scrollbar { display: none; }
.photo {
  flex: 0 0 auto;
  width: 168px;
  height: 168px;
  border-radius: 10px;
  background: var(--paper-deep);
  scroll-snap-align: start;
  position: relative;
  overflow: hidden;
  border: 0.5px solid var(--rule);
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.04);
}
.photo--caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 8px 7px;
  background: linear-gradient(to bottom, transparent, oklch(0 0 0 / 0.55));
  border-radius: 0 0 10px 10px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: oklch(1 0 0 / 0.9);
}
.photo--caption-placeholder {
  color: oklch(1 0 0 / 0.45);
  font-style: italic;
}
.photo--caption-input {
  background: transparent;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  caret-color: #fff;
}
.photo--placeholder {
  background:
    repeating-linear-gradient(135deg,
      oklch(0.88 0.025 80) 0 7px,
      oklch(0.85 0.025 80) 7px 14px);
}
.photo--placeholder .photo--caption {
  color: var(--ink-2);
  text-shadow: none;
}
.photo--placeholder .photo--label {
  position: absolute;
  top: 8px;
  left: 8px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

.photo--leaf {
  background:
    radial-gradient(circle at 60% 40%, oklch(0.78 0.04 140), oklch(0.62 0.05 145) 70%);
}
.photo--bark {
  background:
    radial-gradient(circle at 35% 65%, oklch(0.55 0.05 50), oklch(0.32 0.04 50) 80%);
}
.photo--moss {
  background:
    radial-gradient(circle at 50% 50%, oklch(0.68 0.06 130), oklch(0.42 0.05 135) 75%);
}
.photo--soil {
  background:
    radial-gradient(circle at 30% 60%, oklch(0.50 0.04 60), oklch(0.28 0.03 50) 80%);
}

/* —— care status card —— */
.care-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.care-cell {
  padding: 10px 11px;
  border-radius: 10px;
  background: var(--paper-deep);
  border: 0.5px solid var(--rule-soft);
}
.care-cell .label { margin-bottom: 6px; }
.care-cell .state {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.care-cell .state .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
}
.care-cell[data-st="overdue"] .state { color: var(--st-overdue); }
.care-cell[data-st="overdue"] .dot { background: var(--st-overdue); }
.care-cell[data-st="due_soon"] .state { color: var(--st-due); }
.care-cell[data-st="due_soon"] .dot { background: var(--st-due); }
.care-cell[data-st="ok"] .state { color: var(--st-ok); }
.care-cell[data-st="ok"] .dot { background: var(--st-ok); }
.care-cell[data-st="check_needed"] .state { color: var(--st-check); }
.care-cell[data-st="check_needed"] .dot { background: var(--st-check); }
.care-cell[data-st="not_allowed"] .state { color: var(--st-blocked); }
.care-cell[data-st="not_allowed"] .dot {
  background: transparent;
  border: 1px dashed var(--st-blocked);
}
.care-cell[data-st="remove_urgent"] .state { color: var(--st-overdue); }
.care-cell[data-st="remove_urgent"] .dot { background: var(--st-overdue); }
.care-cell .when {
  margin-top: 3px;
  font-size: 10.5px;
  color: var(--ink-4);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.care-cell .reason {
  margin-top: 7px;
  padding-top: 6px;
  border-top: 0.5px solid var(--rule-soft);
  font-size: 11px;
  line-height: 1.4;
  color: var(--ink-3);
}

/* insight ribbon */
.insight-ribbon {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--paper-deep);
  border-radius: 10px;
  border: 0.5px solid var(--rule-soft);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2);
}
.insight-ribbon .insight-icon {
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 1;
}

/* fertilizer row in care card */
.fert-row {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 0.5px solid var(--rule-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.fert-row .label { margin-bottom: 2px; }
.fert-row .name {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
}

/* —— buttons —— */
.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 0.5px solid var(--rule);
  background: var(--paper-2);
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: background .12s, transform .08s, box-shadow .12s;
  white-space: nowrap;
}
.btn:hover { background: var(--paper); }
.btn:active { transform: translateY(0.5px); }
.btn--xs { padding: 4px 8px 5px; font-size: 11px; border-radius: 6px; }
.btn--sm { padding: 6px 10px; font-size: 12px; }
.btn--ink {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn--ink:hover { background: oklch(from var(--ink) calc(l + 0.05) c h); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--ink-2); }
.btn--ghost:hover { background: oklch(0 0 0 / 0.04); color: var(--ink); }
.btn--ok { color: var(--st-ok); border-color: var(--st-ok); background: color-mix(in oklch, var(--st-ok) 6%, transparent); }
.btn--check { color: var(--st-check); border-color: var(--st-check); background: color-mix(in oklch, var(--st-check) 6%, transparent); }
.btn--add { color: var(--st-overdue); border-color: var(--st-overdue); background: color-mix(in oklch, var(--st-overdue) 6%, transparent); }
.btn--queued { color: var(--ink-3); border-color: var(--rule); }
.btn[aria-busy="true"] { color: transparent; position: relative; }
.btn[aria-busy="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 13px; height: 13px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--ink-2);
  animation: spin .7s linear infinite;
}
.btn--ink[aria-busy="true"]::after { color: var(--paper); }

@keyframes spin { to { transform: rotate(360deg); } }

/* spinner inline */
.spinner {
  display: inline-block;
  width: 12px; height: 12px;
  border: 1.5px solid var(--ink-3);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  vertical-align: -2px;
}

/* —— add-log form —— */
.log-form .date-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 0.5px solid var(--rule-soft);
}
.date-input {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  padding: 4px 6px;
  border-radius: 6px;
}
.date-input:hover, .date-input:focus { background: var(--paper-deep); outline: none; }
.log-textarea {
  width: 100%;
  min-height: 70px;
  border: 0;
  background: transparent;
  resize: none;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  padding: 0;
}
.log-textarea::placeholder { color: var(--ink-4); font-style: italic; }
.log-textarea:focus { outline: none; }

.parse-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 10px 0 12px;
  min-height: 24px;
}
.parse-hint {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-4);
  text-transform: uppercase;
}
.parse-hint .ai-pulse {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 5px;
  vertical-align: 1px;
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 4px;
  border-radius: 5px;
  border: 1px solid;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  background: color-mix(in oklch, currentColor 8%, var(--paper-2));
  animation: chip-in .25s cubic-bezier(.3,.7,.4,1) both;
}
.chip .k {
  font-family: ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
}
.chip--action  { color: var(--accent); border-color: var(--accent); }
.chip--product { color: var(--st-check); border-color: var(--st-check); }
.chip--date    { color: var(--st-ok); border-color: var(--st-ok); }
.chip--amount  { color: var(--st-due); border-color: var(--st-due); }
.chip--target  { color: var(--ink-2); border-color: var(--ink-3); }

@keyframes chip-in {
  from { opacity: 0; transform: translateY(3px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)  scale(1); }
}

.log-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 0.5px solid var(--rule-soft);
  padding-top: 10px;
}
.log-actions .helper {
  font-size: 10.5px;
  color: var(--ink-4);
  letter-spacing: 0.005em;
}

/* —— history —— */
.history-empty {
  text-align: center;
  padding: 22px 16px 18px;
  font-size: 12.5px;
  color: var(--ink-3);
  font-style: italic;
  line-height: 1.5;
}
.history-empty .glyph {
  display: block;
  font-size: 22px;
  margin-bottom: 6px;
  color: var(--ink-4);
  font-style: normal;
}
.history-row {
  display: grid;
  grid-template-columns: 52px 68px 1fr auto;
  gap: 8px;
  align-items: baseline;
  padding: 10px var(--pad-card);
  border-bottom: 0.5px solid var(--rule-soft);
}
.history-row:last-child { border-bottom: 0; }
.history-date {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10.5px;
  color: var(--ink-4);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.history-action {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.history-desc {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2);
}

.action-fertilize { color: var(--accent); }
.action-prune     { color: var(--st-due); }
.action-repot     { color: var(--st-check); }
.action-wire      { color: var(--st-overdue); }
.action-water     { color: var(--st-ok); }
.action-observe   { color: var(--ink-3); }

/* —— inventory —— */
.inv-group {
  margin-bottom: 18px;
}
.inv-group h4 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.inv-group h4 .count {
  font-family: ui-monospace, monospace;
  color: var(--ink-4);
  letter-spacing: 0.04em;
  text-transform: none;
  font-weight: 400;
}
.inv-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px var(--pad-card);
  border-bottom: 0.5px solid var(--rule-soft);
}
.inv-row:last-child { border-bottom: 0; }
.inv-name {
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.inv-sub {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 2px;
  letter-spacing: 0.005em;
}
.inv-controls {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* stock segmented control */
.stock {
  display: inline-flex;
  border-radius: 6px;
  border: 0.5px solid var(--rule);
  overflow: hidden;
  background: var(--paper);
}
.stock button {
  appearance: none;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 8px 5px;
  color: var(--ink-4);
  cursor: pointer;
  border-right: 0.5px solid var(--rule);
}
.stock button:last-child { border-right: 0; }
.stock button[aria-pressed="true"][data-v="plenty"] {
  background: color-mix(in oklch, var(--st-ok) 10%, var(--paper-2));
  color: var(--st-ok);
}
.stock button[aria-pressed="true"][data-v="low"] {
  background: color-mix(in oklch, var(--st-due) 12%, var(--paper-2));
  color: var(--st-due);
}
.stock button[aria-pressed="true"][data-v="order"] {
  background: color-mix(in oklch, var(--st-overdue) 12%, var(--paper-2));
  color: var(--st-overdue);
}
.stock button:hover { color: var(--ink-2); }
.stock button[aria-pressed="true"]:hover { color: inherit; }

.icon-x {
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--ink-4);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.icon-x:hover { background: oklch(0 0 0 / 0.05); color: var(--ink-2); }

.inv-add {
  margin-top: 12px;
  padding: var(--pad-card);
  background: var(--paper-2);
  border: 0.5px dashed var(--rule);
  border-radius: 12px;
}
.inv-add input {
  width: 100%;
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  padding: 4px 0 8px;
  border-bottom: 0.5px solid var(--rule);
}
.inv-add input::placeholder { color: var(--ink-4); font-style: italic; }
.inv-add input:focus { outline: none; border-bottom-color: var(--ink-3); }
.inv-add-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}
.inv-add select {
  appearance: none;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-right: 14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'><path fill='%23867f73' d='M0 0h8L4 5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0 center;
}

/* —— add plant flow —— */
.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 14px;
}
.field label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.field input, .field select, .field textarea {
  appearance: none;
  width: 100%;
  background: var(--paper-2);
  border: 0.5px solid var(--rule);
  border-radius: 8px;
  padding: 9px 10px;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  transition: border-color .12s, background .12s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--paper);
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-4); }
.field .hint { font-size: 11px; color: var(--ink-4); font-style: italic; }
.field.italic input { font-style: italic; }

.swatch-row {
  display: flex;
  gap: 8px;
  margin-top: 2px;
}
.swatch-row button {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  cursor: pointer;
  background: transparent;
  position: relative;
}
.swatch-row button i {
  position: absolute;
  inset: 3px;
  border-radius: 50%;
}
.swatch-row button[aria-pressed="true"] { border-color: var(--ink); }

/* —— small screen utilities —— */
.row-between { display: flex; align-items: center; justify-content: space-between; }
.muted { color: var(--ink-3); }
.faint { color: var(--ink-4); }
.title-uc {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.page-title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 2px;
}
.page-sub {
  font-size: 12.5px;
  color: var(--ink-3);
  font-style: italic;
}

/* —— filter chips (By action) —— */
.filter-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 0 0 10px;
  margin: -2px -4px 4px;
  padding-left: 4px;
  padding-right: 4px;
  scrollbar-width: none;
}
.filter-row::-webkit-scrollbar { display: none; }
.filter-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 5px 10px 6px;
  border-radius: 999px;
  border: 0.5px solid var(--rule);
  background: var(--paper-2);
  color: var(--ink-2);
  font: inherit;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
  white-space: nowrap;
}
.filter-chip:hover { color: var(--ink); }
.filter-chip .n {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-4);
  background: var(--paper-deep);
  padding: 1px 5px;
  border-radius: 999px;
}
.filter-chip[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.filter-chip[aria-pressed="true"] .n {
  background: oklch(1 0 0 / 0.18);
  color: var(--paper);
}

/* —— transitions between screens —— */
.screen-enter {
  animation: screenIn .22s cubic-bezier(.3,.7,.4,1) both;
}
@keyframes screenIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* —— toast —— */
.toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--paper);
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  letter-spacing: 0.005em;
  z-index: 100;
  box-shadow: 0 8px 24px oklch(0 0 0 / 0.25);
  animation: toast-in .2s cubic-bezier(.3,.7,.4,1) both;
}
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}


/* ── AI suggestions ─────────────────────────── */
.sug-wrap {
  margin-bottom: 12px;
  padding: 8px 10px;
  background: var(--paper-2);
  border-radius: 8px;
  border: 0.5px dashed var(--rule);
}
.sug-label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 6px;
}
.sug-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
}
.sug-row + .sug-row {
  border-top: 0.5px solid var(--rule-soft);
}
.sug-date {
  flex: 0 0 auto;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 9.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ink-4);
  white-space: nowrap;
  min-width: 52px;
  text-align: right;
}
.sug-desc {
  flex: 1 1 0;
  min-width: 0;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.4;
}
.sug-btns {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

/* ── Tasks ───────────────────────────────────── */
.task-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.task-item .history-date {
  flex: 0 0 auto;
  white-space: nowrap;
  line-height: 1.3;
  text-align: right;
  min-width: 56px;
}
.task-item .history-desc {
  flex: 1 1 0;
  min-width: 0;
}
.task-item--overdue { border-left: 3px solid var(--st-overdue); padding-left: 6px; }

/* ── Timeline (Agenda) ──────────────────────── */

/* stat strip */
.tl-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.tl-stat {
  background: var(--paper-2);
  border: 0.5px solid var(--rule);
  border-radius: 10px;
  padding: 9px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  position: relative;
  overflow: hidden;
}
.tl-stat::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in oklch, currentColor 6%, transparent);
  pointer-events: none;
}
.tl-stat .n {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  position: relative;
}
.tl-stat .l {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  position: relative;
}
.tl-stat--overdue { color: var(--st-overdue); border-color: color-mix(in oklch, var(--st-overdue) 25%, var(--rule)); }
.tl-stat--due     { color: var(--st-due);     border-color: color-mix(in oklch, var(--st-due) 25%, var(--rule)); }
.tl-stat--ok      { color: var(--st-ok);      border-color: color-mix(in oklch, var(--st-ok) 25%, var(--rule)); }

/* sections */
.tl-section { overflow: hidden; }

.tl-legend {
  display: flex;
  gap: 8px;
}
.tl-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.tl-legend-item i {
  width: 6px; height: 6px;
  border-radius: 50%;
  display: inline-block;
}

/* —— overdue rows —— */
.tl-list {
  display: flex;
  flex-direction: column;
}
.tl-overdue-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  padding: 10px 14px 11px 11px;
  background: color-mix(in oklch, var(--st-overdue) 4%, var(--paper-2));
  border-bottom: 0.5px solid var(--rule-soft);
  cursor: pointer;
  position: relative;
}
.tl-overdue-row:last-child { border-bottom: 0; }
.tl-accent {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--st-overdue);
}
.tl-row-body {
  flex: 1;
  min-width: 0;
  padding-left: 4px;
}
.tl-row-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.tl-row-plant {
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-decoration: none;
}
.tl-overdue-pill {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--st-overdue);
  padding: 2px 8px;
  border-radius: 999px;
  background: color-mix(in oklch, var(--st-overdue) 10%, transparent);
}
.tl-row-task {
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--ink-2);
  flex-wrap: wrap;
}
.tl-row-type {
  font-weight: 500;
  color: var(--ink);
}
.tl-row-sep { color: var(--ink-4); }
.tl-row-desc { color: var(--ink-2); }
.tl-type-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* —— gantt —— */
.tl-gantt {
  position: relative;
  padding: 14px 14px 16px;
}
.tl-months {
  position: relative;
  height: 22px;
  margin-bottom: 8px;
  border-bottom: 0.5px solid var(--rule);
}
.tl-month {
  position: absolute;
  top: 0;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  border-left: 0.5px solid var(--rule-soft);
}
.tl-month:first-child { border-left: 0; }

.tl-cols {
  position: absolute;
  top: 36px;
  bottom: 16px;
  left: 14px;
  right: 14px;
  pointer-events: none;
}
.tl-col {
  position: absolute;
  top: 0; bottom: 0;
  border-left: 0.5px solid var(--rule-soft);
}
.tl-col:first-child { border-left: 0; }
.tl-col--alt {
  background: color-mix(in oklch, var(--ink) 2.5%, transparent);
}

.tl-group {
  position: relative;
  padding: 10px 0 10px;
  border-radius: 8px;
}
.tl-group + .tl-group { margin-top: 6px; }
.tl-group--alt {
  background: color-mix(in oklch, var(--ink) 1.8%, transparent);
}
.tl-group-head {
  appearance: none;
  background: transparent;
  border: 0;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 0 8px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  text-decoration: none;
  color: inherit;
}
.tl-group-meta { min-width: 0; flex: 1; }
.tl-group-name {
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.tl-group .species { font-size: 11px; }
.tl-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.tl-thumb--initials {
  background: var(--paper-deep);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
}

.tl-rows {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.tl-task {
  position: relative;
}
.tl-task--active::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  border-radius: 1px;
}
.tl-task-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--ink-2);
  margin-bottom: 3px;
  min-width: 0;
}
.tl-task-type {
  font-weight: 500;
  color: var(--ink);
}
.tl-task-sep { color: var(--ink-4); }
.tl-task-desc {
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.tl-task-label .tl-check { margin-left: auto; }

.tl-track {
  position: relative;
  height: 12px;
  background: color-mix(in oklch, var(--ink) 3%, transparent);
  border-radius: 3px;
  overflow: hidden;
}
.tl-bar {
  position: absolute;
  top: 1px;
  bottom: 1px;
  border-radius: 2px;
  border: 0.5px solid;
  display: flex;
  align-items: center;
  padding: 0 5px;
}
.tl-bar-date {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 8.5px;
  letter-spacing: 0.02em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  text-transform: uppercase;
  opacity: 0.85;
}

/* today ruler */
.tl-today {
  position: absolute;
  top: 14px;
  bottom: 16px;
  width: 0;
  border-left: 1.5px dashed color-mix(in oklch, var(--accent) 55%, transparent);
  pointer-events: none;
  z-index: 5;
}
.tl-today::before {
  content: "";
  position: absolute;
  left: -4px; top: 0;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.65;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 18%, transparent);
}
/* —— beyond —— */
.tl-beyond {
  margin-top: 22px;
}
.tl-beyond-rule {
  height: 0;
  border-top: 0.5px dashed color-mix(in oklch, var(--ink) 30%, transparent);
  margin: 0 -4px 8px;
}
.tl-beyond-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.tl-beyond-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px 11px 16px;
  border-bottom: 0.5px solid var(--rule-soft);
  cursor: pointer;
}
.tl-beyond-row:last-child { border-bottom: 0; }
.tl-month-pill {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--paper-deep);
  border: 0.5px solid var(--rule-soft);
  font-variant-numeric: tabular-nums;
}

/* Task-type pill picker (manual task form) */
.tl-type-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tl-type-picker input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.tl-type-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  cursor: pointer;
  border: 0.5px solid var(--pill-color, var(--ink-3));
  color: var(--ink-2);
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  user-select: none;
}
.tl-type-pill[data-type="fertilizing"] { --pill-color: var(--task-fert); }
.tl-type-pill[data-type="pruning"]     { --pill-color: var(--task-prune); }
.tl-type-pill[data-type="repotting"]   { --pill-color: var(--task-repot); }
.tl-type-pill[data-type="wiring"]      { --pill-color: var(--task-wire); }
.tl-type-pill[data-type="other"]       { --pill-color: var(--task-other); }
.tl-type-picker input[type="radio"]:checked + .tl-type-pill {
  background: color-mix(in oklch, var(--pill-color) 18%, var(--paper-2));
  border-color: var(--pill-color);
  color: var(--ink);
  font-weight: 600;
}

/* —— circle checkbox —— */
.tl-check {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  color: var(--ink-3);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .15s ease, background .15s ease;
}
.tl-check svg { width: 20px; height: 20px; }
.tl-check--sm { width: 18px; height: 18px; }
.tl-check--sm svg { width: 16px; height: 16px; }
.tl-check .tl-check-tick {
  opacity: 0;
  transform: scale(0.6);
  transform-origin: center;
  transition: opacity .15s ease, transform .15s cubic-bezier(.3,.7,.4,1);
}
.tl-check:hover {
  background: color-mix(in oklch, var(--st-ok) 15%, transparent);
  color: var(--st-ok);
}
.tl-check:hover .tl-check-tick {
  opacity: 1;
  transform: scale(1);
}
.tl-check--on {
  background: var(--st-ok);
  color: var(--paper);
}
.tl-check--on .tl-check-tick { opacity: 1; transform: scale(1); }

/* —— consensus badge —— */
.consensus-badge {
  background: transparent;
  border: none;
  padding: 2px 3px;
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-4);
}
.consensus-badge-active {
  color: var(--accent);
}

/* —— consensus panel —— */
.consensus-banner {
  font-size: 12px;
  color: var(--ink-2);
  margin-bottom: 8px;
}
.consensus-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.consensus-col {
  padding: 8px;
  background: var(--paper-deep);
  border-radius: 8px;
}
.consensus-col-hd {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.consensus-cell {
  display: flex;
  justify-content: space-between;
  font-size: 11.5px;
  padding: 2px 4px;
  border-radius: 4px;
  margin-bottom: 2px;
}
.consensus-cell-diff {
  background: var(--st-warn-bg, rgba(255, 200, 0, 0.18));
}
.consensus-cell-tokens {
  font-size: 0.78rem;
  color: var(--ink-3);
}
.consensus-reasons {
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--ink-3);
  border-top: 0.5px solid var(--rule-soft);
  padding-top: 4px;
}
.consensus-reason-row {
  margin-bottom: 2px;
}
.consensus-insight {
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--ink-2);
  font-style: italic;
}
.consensus-tasks {
  margin-top: 6px;
  font-size: 10.5px;
  color: var(--ink-3);
  border-top: 0.5px solid var(--rule-soft);
  padding-top: 4px;
}
.consensus-task {
  margin-bottom: 2px;
  padding-left: 8px;
}

/* —— refresh-status button —— */
.btn-refresh-status {
  background: transparent;
  border: none;
  padding: 4px 6px;
  font-size: 16px;
  line-height: 1;
  border-radius: 6px;
  cursor: pointer;
  color: var(--ink-3);
  display: flex;
  align-items: center;
}
.btn-refresh-status:hover { color: var(--ink-2); background: var(--rule-soft); }
.btn-refresh-status:disabled {
  opacity: 0.4;
  cursor: progress;
}

/* —— mobile defaults for desktop wrapper (outside any media query) —— */
.app-shell { display: contents; }
.sidebar { display: none; }
.nav--back {
  position: static;
  margin: 0 calc(-1 * var(--pad-screen));
}
.detail-hd { padding: 6px 0 10px; }
.plant-detail-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pd-col { display: flex; flex-direction: column; gap: 14px; container-type: inline-size; }
@container (min-width: 720px) {
  .care-grid { grid-template-columns: repeat(4, 1fr); }
}
.pd-col--left .photo-strip {
  margin-left: calc(-1 * var(--pad-screen));
  margin-right: calc(-1 * var(--pad-screen));
}

.action-group { margin-bottom: 14px; }

/* —— desktop layout: 768px breakpoint —— */
@media (min-width: 768px) {
  body {
    display: block;
    padding: 0;
    background: var(--paper);
  }
  .app-shell {
    display: grid;
    grid-template-columns: 220px 1fr;
    align-items: start;
    min-height: 100vh;
  }
  .viewport {
    position: relative;
    max-width: 1280px;
    width: auto;
    min-height: 100vh;
    border-radius: 0;
    box-shadow: none;
    background: var(--paper);
    background-image: none;
    overflow: visible;
  }
  .nav--tabs { display: none; }
  .fab { display: none; }
  #global-loader { position: fixed; }
  .screen { padding: 28px 32px 40px; }
  .screen.flat { padding-top: 28px; }
  .sidebar {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    background: var(--paper-deep);
    padding: var(--pad-screen);
    gap: 2px;
  }
  .sidebar-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--ink);
    padding: 6px 8px 20px;
  }
  .sidebar-brand .brand-mark {
    width: 28px;
    height: 28px;
    display: inline-block;
    border-radius: 6px;
    flex-shrink: 0;
  }
  .sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .sidebar-item {
    appearance: none;
    border: 0;
    background: transparent;
    text-decoration: none;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    border-radius: 10px;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--ink-2);
    text-align: left;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
  }
  .sidebar-item .ph {
    font-size: 18px;
    color: var(--ink-3);
    transition: color .12s ease;
    line-height: 1;
  }
  .sidebar-item:hover { background: var(--paper); color: var(--ink); }
  .sidebar-item:hover .ph { color: var(--ink-2); }
  .sidebar-item[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
  .sidebar-item[aria-selected="true"] .ph { color: var(--accent-ink); }
  .sidebar-add { margin-top: auto; color: var(--ink-3); }
  .sidebar-add .ph { color: var(--ink-4); }
  .sidebar-add:hover { color: var(--ink); }
  .sidebar-add:hover .ph { color: var(--ink-2); }
  .plant-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    padding: 0;
  }
  .plant-list .plant-row {
    border: 0.5px solid var(--rule);
    border-radius: 14px;
    background: var(--paper-2);
    box-shadow: 0 1px 2px oklch(0 0 0 / 0.03);
    align-items: flex-start;
    transition: border-color .12s ease, background .12s ease, transform .12s ease;
  }
  .plant-list .plant-row:hover {
    background: var(--paper-2);
    border-color: color-mix(in oklch, var(--accent) 35%, var(--rule));
    transform: translateY(-1px);
  }

  #action-groups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 14px 16px;
    align-items: start;
  }
  .action-group {
    margin-bottom: 0;
  }

  .inv-groups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px 16px;
    align-items: start;
  }
  .inv-group {
    margin-bottom: 0;
  }
  .inv-add {
    max-width: 620px;
  }

  /* —— plant detail: back-nav, heading, layout grid —— */
  .nav--back {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 0;
    margin-left: 0;
    margin-right: 0;
  }
  .nav--back .nav-top { padding: 26px 0 2px; }
  .detail-hd { padding: 6px 0 14px; }
  .pd-col--left .photo-strip { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }

  .add-form { max-width: 600px; }

  .tl-today { width: 0; background: none; border-left: 1.5px dashed var(--accent); }
  .tl-today::before { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 22%, transparent); }
}

/* —— photoswipe caption overlay —— */
.pswp-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px 16px 16px;
  background: oklch(0 0 0 / 0.5);
  color: #fff;
  font-family: monospace;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  pointer-events: none;
  z-index: 10;
}

/* —— desktop layout: 1024px breakpoint —— */
@media (min-width: 1024px) {
  .plant-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
  }
  .pd-col { gap: 16px; }
}