/*
 * Allotment Companion visual system ("1c blend"), from the Claude Design handoff.
 *
 * A field instrument, held in one muddy hand: large tap targets, nothing behind
 * a hover or a gesture. The type system is three families with clear jobs
 * (Barlow Semi Condensed for display, Barlow for body, IBM Plex Mono for data),
 * all self-hosted so the offline promise survives with no signal.
 *
 * The four state colours are kept visually distinct and never collapsed: clear
 * is a solid green fill, alert a solid orange-red fill, uncertain a dashed
 * purple outline that is NEVER filled, and not-checked a 45-degree hatch that is
 * NEVER green or red. That distinction is the product, not decoration.
 */

/* --- Self-hosted fonts (precached, so type survives offline) --------------- */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/barlow-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/barlow-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/barlow-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/barlow-semi-condensed-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/barlow-semi-condensed-700.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/ibm-plex-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/ibm-plex-mono-600.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/ibm-plex-mono-700.woff2') format('woff2'); }

/* --- Tokens --------------------------------------------------------------- */
:root {
  /* Four states, light. */
  --state-clear: #2a6d3c;
  --state-clear-ink: #f4f8f2;
  --state-alert: #b8431c;
  --state-alert-ink: #fdf3ee;
  --state-uncertain: #6a52a4;
  --state-uncertain-ink: #4c3a7e;
  --state-stale: #b6ae99;
  /* 7/14 stripe bands per the redesign handoff token sheet. */
  --state-stale-fill: repeating-linear-gradient(-45deg, #eee9dc 0 7px, #f5f1e7 7px 14px);
  --clear-tint: #eaf2ec;
  --alert-tint: #fdf3ee;
  --alert-ink-deep: #8a2d14;

  /* Surfaces and ink. */
  --bg: #faf7f0;
  --card: #ffffff;
  --sunk: #f1ecdf;
  --ink: #16150f;
  --ink-2: #54503f;      /* secondary ink: chip text, form labels, values (112 uses in the design) */
  --ink-muted: #77705e;
  --label: #928a72;      /* faint mono labels, hints, the plug chip (105 uses in the design) */
  --ink-faint: #b6ae99;
  --border: #e2dccb;
  --divider: #efe9db;    /* lighter inner row dividers, inside detail lists */
  --border-strong: #16150f;

  /* Fonts. */
  --display: 'Barlow Semi Condensed', system-ui, sans-serif;
  --body: 'Barlow', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --tap: 3.5rem;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --state-clear: #6cb681;
    --state-clear-ink: #0f1a12;
    --state-alert: #e06a41;
    --state-alert-ink: #1a0f0a;
    --state-uncertain: #a48fd6;
    --state-uncertain-ink: #cabfe6;
    --state-stale: #55503c;
    --state-stale-fill: repeating-linear-gradient(-45deg, #211f16 0 7px, #292617 7px 14px);
    --bg: #14130e;
    --card: #1e1c15;
    --sunk: #262319;
    --ink: #f2eee1;
    --ink-2: #c9c0a8;
    --ink-muted: #a59c85;
    --label: #8f876f;
    --ink-faint: #55503c;
    --border: #35311f;
    --divider: #2a2619;
    --border-strong: #f2eee1;
  }
}
/* The viewer's explicit toggle wins in both directions. */
:root[data-theme='light'] { color-scheme: light; }
:root[data-theme='dark'] {
  --state-clear: #6cb681; --state-clear-ink: #0f1a12;
  --state-alert: #e06a41; --state-alert-ink: #1a0f0a;
  --state-uncertain: #a48fd6; --state-uncertain-ink: #cabfe6;
  --state-stale: #55503c; --state-stale-fill: repeating-linear-gradient(-45deg, #211f16 0 7px, #292617 7px 14px);
  --bg: #14130e; --card: #1e1c15; --sunk: #262319;
  --ink: #f2eee1; --ink-2: #c9c0a8; --ink-muted: #a59c85; --label: #8f876f; --ink-faint: #55503c;
  --border: #35311f; --divider: #2a2619; --border-strong: #f2eee1;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 400 15px/1.5 var(--body);
  color: var(--ink);
  background: var(--bg);
  /* Fill the dynamic viewport, so a short page (notifications with one card)
     cannot leave iOS Safari's collapsing toolbar detaching the fixed bar. */
  min-height: 100dvh;
  /* Clears the notch / dynamic island now the persistent top bar is gone, so the
     screen header no longer sits under the status bar. */
  padding-top: env(safe-area-inset-top);
  /* Clears the fixed tab bar plus a comfortable margin. */
  padding-bottom: calc(5.5rem + env(safe-area-inset-bottom));
  -webkit-text-size-adjust: 100%;
}

/* --- Top bar -------------------------------------------------------------- */
.topbar {
  background: var(--ink);
  color: var(--bg);
  padding: 0.85rem 1.25rem;
  padding-top: max(0.85rem, env(safe-area-inset-top));
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.topbar h1 { margin: 0; font: 700 22px/1 var(--display); letter-spacing: -0.01em; }
.topbar .back { color: var(--bg); font-size: 0.9rem; text-decoration: none; font-weight: 600; }
.topbar-links { display: flex; align-items: center; gap: 1.1rem; }
.linkish {
  background: none; border: none; color: var(--bg); font: 600 0.9rem var(--body);
  min-height: auto; padding: 0; text-decoration: underline; cursor: pointer;
}

.main, .banner { padding: 1.25rem 1.25rem 0; }
.banner:empty { padding: 0; }
.banner:empty { padding: 0; }
.muted { color: var(--ink-muted); }

/* --- Notices (four-state vocabulary) -------------------------------------- */
.notice { border-radius: 12px; padding: 0.9rem 1rem; margin: 0 0 0.9rem; border: 1px solid var(--border); background: var(--card); }
.notice p { margin: 0 0 0.5rem; }
.notice p:last-child { margin-bottom: 0; }
.notice-alert { background: var(--state-alert); border: none; color: var(--state-alert-ink); }
.notice-alert strong { color: var(--state-alert-ink); }
.notice-warning { background: var(--card); border: 2px dashed var(--state-uncertain); color: var(--state-uncertain-ink); }
.notice-uncertain { background: var(--card); border: 2px dashed var(--state-uncertain); color: var(--state-uncertain-ink); }
.notice-pending { background: var(--sunk); border: 1px solid var(--border); color: var(--ink); }
.notice-failed { background: var(--state-alert); border: none; color: var(--state-alert-ink); }
.notice-failed button { margin-top: 0.5rem; }
.notice-offline {
  background: var(--card); color: var(--ink-muted);
  border: 1.5px solid var(--ink-faint);
}
/* Offline is unmistakable: a hatched header band, never a calm colour. */
.offline-notice { background: var(--state-stale-fill); border: 1.5px solid var(--ink-faint); color: var(--ink-muted); }
.offline-notice p:last-child { font-size: 0.9rem; }
/* The heartbeat sits above everything and changes what the rest means. */
.liveness-notice { border-width: 2px; }

/* --- The four-check status grid ------------------------------------------- */
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 1.1rem; }
.check-tile {
  border-radius: 12px; padding: 14px; min-height: 96px;
  display: flex; flex-direction: column; justify-content: space-between;
  border: 1px solid var(--border); background: var(--card); color: var(--ink);
}
.check-tile .glyph { font: 800 22px/1 var(--body); }
.check-tile .label { font: 600 17px/1.15 var(--display); }
.check-tile .detail { font-size: 12px; margin-top: 2px; color: var(--ink-muted); }
/* clear: solid green fill + tick. */
.check-tile.state-clear { background: var(--state-clear); border: none; color: var(--state-clear-ink); }
.check-tile.state-clear .detail { color: var(--state-clear-ink); opacity: 0.85; }
/* alert: solid orange-red fill + bang. */
.check-tile.state-alert { background: var(--state-alert); border: none; color: var(--state-alert-ink); }
.check-tile.state-alert .detail { color: var(--state-alert-ink); opacity: 0.85; }
/* uncertain: dashed purple outline + question mark, never filled. */
.check-tile.state-undetermined { background: var(--card); border: 2px dashed var(--state-uncertain); color: var(--state-uncertain-ink); }
.check-tile.state-undetermined .glyph { color: var(--state-uncertain); }
/* not-checked: 45-degree hatch + dash, never green or red. */
.check-tile.state-not_run { background: var(--state-stale-fill); border: 1.5px solid var(--ink-faint); color: var(--ink-muted); }
.check-legend {
  display: flex; flex-wrap: wrap; gap: 12px; margin: -0.4rem 0 1rem;
  font: 400 10.5px var(--mono); color: var(--ink-muted);
}
.check-legend span { display: inline-flex; align-items: center; gap: 5px; }
.check-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.lg-clear { background: var(--state-clear); }
.lg-alert { background: var(--state-alert); }
.lg-uncertain { border: 2px dashed var(--state-uncertain); }
.lg-stale { background: var(--state-stale-fill); border: 1px solid var(--ink-faint); }

/* --- Section rules -------------------------------------------------------- */
.section-rule {
  display: flex; justify-content: space-between; align-items: center;
  margin: 1.2rem 0 0.4rem; min-height: 1.5rem;
  font: 600 11px var(--mono); letter-spacing: 0.14em; color: var(--label);
}

/* --- Bed card ------------------------------------------------------------- */
.bed { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 1rem; margin-bottom: 0.9rem; }
.bed.bed-alert { border: 2px solid var(--state-alert); }
.bed header { display: flex; justify-content: space-between; align-items: center; }
.bed h2 { margin: 0; font: 700 22px/1 var(--display); }
.bed-status { font-size: 12.5px; color: var(--ink-muted); display: inline-flex; align-items: center; gap: 5px; }
.bed-status.is-alert { color: var(--state-alert); font-weight: 700; }
.bed-status.is-uncertain { color: var(--state-uncertain-ink); font-weight: 600; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.status-dot.dot-clear { background: var(--state-clear); }
.status-dot.dot-alert { background: var(--state-alert); }
.status-dot.dot-uncertain { border: 2px dashed var(--state-uncertain); }
.status-dot.dot-stale { background: var(--state-stale-fill); border: 1px solid var(--ink-faint); }

/* Four axes, four chips, never one combined label. */
.axes { margin: 0.5rem 0 0.75rem; display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font: 500 12px var(--body); background: var(--sunk); color: var(--ink-2);
  border-radius: 999px; padding: 5px 10px;
}
.chip-plug {
  display: inline-block; font: 500 11px var(--body);
  padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--label);
  vertical-align: 2px;
}

/* --- Plantings ------------------------------------------------------------ */
/* On the bed page the plantings sit in the same white card as the attribute
   sections (1c), so the list reads as content, not as loose rows on paper. */
.plantings {
  list-style: none; margin: 0.75rem 0; display: flex; flex-direction: column; gap: 8px;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 0.75rem;
}
.plantings li { position: relative; }
.plantings li.empty { color: var(--ink-muted); font-size: 0.9rem; padding: 0.5rem 0; }
.planting {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem;
  width: 100%; text-align: left; min-height: 58px;
  background: var(--bg); border: none; border-radius: 10px; padding: 13px 14px;
}
.planting .crop { font: 600 17px var(--body); }
.planting .crop em { font-weight: 400; }
.planting .status, .planting .when { font-size: 13px; color: var(--ink-muted); }
/* Honesty marks. */
.when { border-bottom: none; }
.when strong, .est { border-bottom: 2px dotted var(--ink-faint); font-weight: inherit; }
.unverified {
  background: var(--sunk); border: 1.5px dashed var(--ink-faint); border-radius: 5px;
  padding: 1px 6px; font: 400 11.5px var(--mono);
}
.edit-planting {
  position: absolute; top: 0.4rem; right: 0.4rem; z-index: 1;
  min-height: 2.6rem; min-width: 2.8rem; padding: 0 0.6rem;
  border: none; background: transparent; color: var(--ink-muted); font-size: 1.3rem; line-height: 1;
}

/* --- Buttons -------------------------------------------------------------- */
button {
  font: 600 17px var(--display); min-height: var(--tap);
  border-radius: 12px; border: 2px solid var(--border-strong);
  background: var(--card); color: var(--ink); padding: 0.5rem 1rem; cursor: pointer;
}
button.primary { background: var(--ink); border-color: var(--ink); color: var(--bg); }
button.secondary { background: var(--card); border: 2px solid var(--border); color: var(--ink); }
button.danger { border: 2px solid var(--border); color: var(--state-alert); background: var(--card); }
.bed-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 0.9rem; }
.bed-actions button { flex: 1 1 auto; }
.add-bed { width: 100%; margin-top: 0.9rem; }
button.dashed { border: 2px dashed var(--ink-faint); background: transparent; color: var(--ink-muted); }
.dashboard-foot { display: flex; gap: 10px; margin: 1rem 0 0; }
.dashboard-foot button { flex: 1; }

/* --- Sheets --------------------------------------------------------------- */
.sheet {
  position: fixed; inset: auto 0 0 0; background: var(--card);
  border-radius: 24px 24px 0 0; box-shadow: 0 -8px 30px rgba(22, 21, 15, 0.2);
  transform: translateY(100%); transition: transform 0.18s ease-out;
  max-height: 86vh; overflow-y: auto; z-index: 10;
}
.sheet.open { transform: translateY(0); }
.sheet-inner { padding: 1.25rem 1.25rem calc(2rem + env(safe-area-inset-bottom)); }
.sheet-inner::before {
  content: ''; display: block; width: 40px; height: 4px; border-radius: 2px;
  background: var(--border); margin: 0 auto 1rem;
}
.sheet h3 { margin: 0 0 0.9rem; font: 700 24px/1 var(--display); }
.sheet h4 { font: 700 16px var(--display); }

.event-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 0.9rem; }
.event { min-height: 64px; font: 600 18px var(--display); }

.prompt { padding: 1rem calc(1rem + env(safe-area-inset-bottom)); }
.prompt-question { margin: 0 0 0.9rem; font-size: 16px; line-height: 1.45; }
.prompt-actions { display: flex; flex-direction: column; gap: 0.6rem; }

.failed-item { border-top: 1px solid var(--border); padding: 0.9rem 0; }
.failed-item p { margin: 0 0 0.35rem; }

/* --- Forms ---------------------------------------------------------------- */
.field { display: block; margin-bottom: 1rem; }
.field-label { display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 14px; color: var(--ink-2); }
.field input, .field select {
  font: 400 17px var(--body); width: 100%; min-height: var(--tap);
  padding: 0.5rem 0.9rem; border: 2px solid var(--border); border-radius: 12px;
  background: var(--card); color: var(--ink);
}
.field input[type='date'], .field input[type='number'] { font-family: var(--mono); }
.field-hint { display: block; margin-top: 0.3rem; font-size: 13px; color: var(--ink-muted); }
.more { margin: 0 0 1rem; }
.more summary { min-height: var(--tap); display: flex; align-items: center; color: var(--ink-muted); cursor: pointer; font-size: 13px; }

/* The start-type control: both options visible, default legibly selected. */
.segmented { border: none; padding: 0; margin: 0 0 1rem; display: flex; gap: 8px; }
.segmented .field-label { padding: 0; width: 100%; }
.segment {
  position: relative; flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 52px; padding: 0 0.9rem; border: 2px solid var(--border);
  border-radius: 12px; font: 600 15px var(--body); background: var(--card);
}
/* Full-size and interactable (so it stays checkable and accessible), invisible
   over the styled pill. The pill itself is coloured from :has(:checked). */
.segment input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.segment:has(input:checked) { border-color: var(--ink); background: var(--ink); color: var(--bg); }

/* --- Event history / archive rows ----------------------------------------- */
.events-heading { margin: 1.1rem 0 0.4rem; font: 700 16px var(--display); }
.event-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.event-list li { border-top: 1px solid var(--divider); padding: 0.7rem 0; display: flex; flex-direction: column; gap: 0.4rem; }
.event-actions { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.event-actions input {
  flex: 1 1 8rem; min-height: 2.8rem; padding: 0.3rem 0.6rem; font: 400 15px var(--mono);
  border: 2px solid var(--border); border-radius: 8px; background: var(--card); color: var(--ink);
}

/* --- Toast + undo --------------------------------------------------------- */
.toast {
  position: fixed; left: 1rem; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom));
  background: var(--ink); color: var(--bg); padding: 0.9rem 1rem; border-radius: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  opacity: 0; pointer-events: none; transition: opacity 0.2s; z-index: 20;
}
.toast.visible { opacity: 1; pointer-events: auto; }
.toast-undo {
  background: none; border: 1px solid #c9c0a8; color: #c9c0a8;
  min-height: 2.6rem; padding: 0.2rem 0.9rem; border-radius: 8px; flex: 0 0 auto;
  font: 700 0.85rem var(--body);
}

.empty { text-align: center; color: var(--ink-muted); padding: 2rem 1rem; }
.empty button { margin-top: 1rem; }

/* Data everywhere reads in the mono, tabular. */
.mono, .when strong, time { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* --- Per-screen header (replaces the persistent topbar) ------------------- */
/* The honesty philosophy at the top of the screen: what it is looking at, and
   when it last checked. A generic bar says nothing; this says the state as of
   now. */
.screen-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin: 0 0 1.1rem; }
.screen-head .date { font: 700 38px/1 var(--display); letter-spacing: -0.01em; }
.screen-head .coverage { font-size: 14px; color: var(--ink-muted); margin-top: 4px; }
.screen-head.is-offline .date { color: var(--ink-2); }
.screen-head .live { text-align: right; white-space: nowrap; }
.screen-head .live .dot-live { font: 600 12px var(--mono); color: var(--state-clear); }
.screen-head .live .snapshot { font: 600 12px var(--mono); color: var(--label); }
.screen-head .live time { display: block; font: 400 12px var(--mono); color: var(--ink-muted); font-variant-numeric: tabular-nums; }

/* --- Dashboard foot: add-a-bed, season report, recently deleted ----------- */
.dashboard-foot { display: flex; gap: 10px; margin: 1.1rem 0 0; }
.dashboard-foot > * { flex: 1; }
.btn-link {
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  min-height: var(--tap); border-radius: 12px; font: 600 16px var(--display);
  border: 2px solid var(--border); background: var(--card); color: var(--ink);
}
.foot-link { display: flex; justify-content: center; margin: 0.75rem 0 0; }
.linkish-muted {
  background: none; border: none; color: var(--label); font: 600 14px var(--body);
  min-height: 44px; padding: 0 0.5rem; cursor: pointer;
}

/* --- Sow-date prompt glyph ------------------------------------------------- */
.prompt-head { display: flex; align-items: center; gap: 10px; margin: 0 0 0.75rem; }
.prompt-glyph {
  flex: none; width: 32px; height: 32px; border-radius: 9px;
  border: 2px dashed var(--state-uncertain); color: var(--state-uncertain-ink);
  display: grid; place-items: center; font: 800 17px var(--body);
}
.prompt-title { font: 700 22px var(--display); margin: 0; }

/* --- Phase 0 chrome: splash, leaf mark, tab bar, More sheet ---------------- */

/* Splash (handoff 3a). Static markup in index.html so it paints before any
   script; app.js removes it on the first real render. The photograph is a
   bundled, precached asset and the scrim guarantees text contrast over it. */
#splash {
  position: fixed; inset: 0; z-index: 30;
  display: flex; align-items: flex-end;
  background: var(--ink);
}
.splash-photo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 38% center;
}
.splash-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22, 21, 15, 0.25), rgba(22, 21, 15, 0.45) 45%, rgba(22, 21, 15, 0.88));
}
.splash-content {
  position: relative; width: 100%;
  padding: 0 1.5rem calc(3rem + env(safe-area-inset-bottom));
  color: #f2eee1;
}
.splash-wordmark { margin: 0.9rem 0 0.2rem; font: 700 38px/1.05 var(--display); letter-spacing: -0.01em; }
.splash-slogan { margin: 0; font: 500 15px/1.4 var(--body); color: rgba(242, 238, 225, 0.85); }
.splash-status { margin: 1.4rem 0 0; font: 400 12px/1.4 var(--mono); color: rgba(242, 238, 225, 0.65); }

/* The leaf mark (handoff 3e, option A): a stemless natural leaf, pure CSS.
   Paper-cream leaf on a ground-green rounded square; the asymmetric
   border-radius gives the pointed tip and rounded base. */
.leaf-badge {
  display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 26%;
  background: #2a6d3c;
}
.leaf-badge .leaf {
  width: 55%; height: 55%;
  background: #f2eee1;
  border-radius: 4% 100% 20% 100%;
  transform: rotate(8deg);
}

/* Bottom tab bar (handoff 1s). Fixed, thumb-reach, safe-area aware. The bar
   never carries status; sheets (z-index 10 is below, so the sheet and toast
   layers are raised) overlay it. */
#tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  background: var(--card);
  border-top: 1px solid var(--border);
  padding-bottom: max(env(safe-area-inset-bottom), 0px);
}
/* On the welcome and auth screens the tab bar is emptied. The container still
   carries a background and a safe-area pad, which painted a cream band across
   the bottom of the full-bleed welcome photo. Hide it entirely when it has no
   tabs, so the photo reaches the very bottom edge. */
#tabbar:empty { display: none; }
.tabbar { display: flex; justify-content: space-around; padding: 6px 8px; }
.tab {
  flex: 1; min-height: 44px; max-width: 120px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: none; border: none; border-radius: 999px; padding: 6px 0;
  color: var(--ink-muted); text-decoration: none; cursor: pointer;
}
.tab-active { background: var(--sunk); color: var(--ink); }
.tab-label { font: 600 11px/1 var(--body); letter-spacing: 0.02em; }
/* Drawn glyphs, no icon font: a sun disc, a bed pair, a three-dot row. */
.tab-glyph { display: block; width: 18px; height: 18px; position: relative; }
.tab-glyph-today::before {
  content: ''; position: absolute; inset: 3px;
  border-radius: 50%; border: 2px solid currentColor;
}
.tab-glyph-today::after {
  content: ''; position: absolute; left: 7px; right: 7px; top: 7px; bottom: 7px;
  border-radius: 50%; background: currentColor;
}
.tab-glyph-beds::before {
  content: ''; position: absolute; left: 1px; right: 1px; top: 3px; height: 5px;
  border: 2px solid currentColor; border-radius: 2px;
}
.tab-glyph-beds::after {
  content: ''; position: absolute; left: 1px; right: 1px; bottom: 2px; height: 5px;
  border: 2px solid currentColor; border-radius: 2px;
}
.tab-glyph-more::before {
  content: ''; position: absolute; top: 7px; left: 0; width: 4px; height: 4px;
  border-radius: 50%; background: currentColor;
  box-shadow: 7px 0 0 currentColor, 14px 0 0 currentColor;
}

/* The More sheet rows. */
.more-sheet h3 { margin-top: 0; }
.more-row {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; min-height: var(--tap);
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 0 1rem; margin: 0 0 0.6rem;
  font: 600 16px var(--body); color: var(--ink); text-decoration: none; cursor: pointer;
}
.more-chevron { color: var(--ink-faint); font-size: 1.3rem; }
.more-sync { font: 400 12px/1.5 var(--mono); color: var(--ink-muted); margin: 0.9rem 0 1.1rem; }

/* --- Honesty marks (handoff token sheet), shared by later phases ----------- */
/* Low-confidence estimate: dotted underline, e.g. "~9 Sep". */
.mark-estimate { border-bottom: 2px dotted var(--ink-faint); }
/* Placeholder / assumed / unverified value: the dashed box. */
.mark-assumed {
  background: var(--sunk); border: 1.5px dashed var(--ink-faint); border-radius: 5px;
  font: 500 11px/1.2 var(--mono); padding: 1px 6px;
}
/* User-confirmed figure. */
.mark-verified { color: var(--state-clear); font-weight: 600; }
/* Genuinely unknown, fixable: uncertain language, invites, never blocks. */
.mark-unknown {
  border: 2px dashed var(--state-uncertain); color: var(--state-uncertain-ink);
  border-radius: 999px; padding: 1px 8px; font: 600 11px/1.4 var(--body);
}

/* --- Phase 1: weather strip, collapsed bed rows, bed detail --------------- */
.weather-strip {
  display: flex; align-items: center; gap: 0.9rem;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 0.8rem 1rem; margin: 0 0 0.9rem;
}
.weather-strip.weather-empty { border: 1.5px dashed var(--ink-faint); background: none; color: var(--ink-muted); }
.weather-temp { font: 700 26px/1 var(--display); }
.weather-line { display: block; font: 500 14px/1.4 var(--body); }
.weather-stamp { display: block; font: 400 11px/1.4 var(--mono); color: var(--label); }

.first-run-panel {
  background: var(--state-stale-fill);
  border: 1.5px solid var(--state-stale);
  color: var(--ink-2);
}

.bed-row {
  display: flex; align-items: center; gap: 0.75rem;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 0.9rem 1rem; margin: 0 0 0.7rem; cursor: pointer;
}
.bed-row.bed-alert { border: 2px solid var(--state-alert); }
.bed-row-main { flex: 1; min-width: 0; }
.bed-row-main h2 { margin: 0 0 0.15rem; font: 700 20px/1.15 var(--display); }
.bed-row-summary { margin: 0 0 0.4rem; font: 400 13.5px/1.4 var(--body); color: var(--ink-2); }
.bed-row-summary .mark-estimate { font-family: var(--mono); font-size: 12.5px; }
.bed-row .axes { margin: 0; }
.bed-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.45rem; }
.bed-row-side .chevron { color: var(--ink-faint); font-size: 1.5rem; line-height: 1; }
.bed-row-water { min-height: 44px; padding: 0 1rem; }

.page-head { padding: 0.4rem 0 0.9rem; }
.page-head .back {
  display: inline-block; min-height: 44px; line-height: 44px;
  color: var(--ink-muted); text-decoration: none; font: 600 15px var(--body);
}
.page-title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.page-title h1 { margin: 0; font: 700 30px/1.1 var(--display); }

.bed-attributes {
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 0.3rem 1rem; margin: 0 0 1rem;
}
.attr {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 44px; border-bottom: 1px solid var(--divider);
  font: 500 15px var(--body);
}
.attr:last-child { border-bottom: none; }
.attr-label { font: 600 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--label); }
.attr .mono { font-family: var(--mono); font-size: 14px; }

.watering-log {
  list-style: none; margin: 0 0 1rem;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 0.3rem 1rem;
}
.watering-log li {
  display: flex; gap: 0.8rem; align-items: center; min-height: 40px;
  border-bottom: 1px solid var(--divider); font: 400 14px var(--body); color: var(--ink-2);
}
.watering-log li:last-child { border-bottom: none; }
.watering-log .mono { font-family: var(--mono); font-size: 13px; }

.size-pair { display: flex; gap: 0.6rem; }
.size-pair input { flex: 1; }

/* --- Bed log and notes ----------------------------------------------------- */
.section-rule { display: flex; align-items: center; justify-content: space-between; }
.rule-action {
  background: none; border: 1px solid var(--border); border-radius: 999px;
  min-height: 34px; padding: 0 0.9rem; font: 600 12px var(--body);
  color: var(--ink-2); cursor: pointer;
}
.notes-list {
  list-style: none; margin: 0 0 1rem;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 0.3rem 1rem;
}
.notes-list li {
  padding: 0.6rem 0; border-bottom: 1px solid var(--divider);
  font: 400 14px/1.5 var(--body); color: var(--ink-2);
}
.notes-list li:last-child { border-bottom: none; }
.notes-list .mono { font-family: var(--mono); font-size: 12px; color: var(--label); margin-right: 0.4rem; }
textarea {
  width: 100%; border: 1px solid var(--border); border-radius: 12px;
  background: var(--card); color: var(--ink); font: 400 15px/1.5 var(--body);
  padding: 0.75rem;
}

/* --- Plantings tab: toggle, filters, timeline ------------------------------ */
.view-toggle { display: flex; gap: 0.5rem; margin: 0 0 0.8rem; }
.filter-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0 0 1rem; }
.filter-chip, .view-toggle .chip { cursor: pointer; border: 1px solid var(--border); background: var(--card); min-height: 38px; }
.chip-active { background: var(--sunk); border-color: var(--border-strong); color: var(--ink); }
/* The active toggle/filter pill must win against the two-class background rule
 * above; without this it renders white text on the white .view-toggle .chip
 * background (specificity 0,2,0) and disappears. Filled dark, clearly chosen. */
.view-toggle .chip-active,
.filter-chip.chip-active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Fixed label column beside a scrollable calendar; rows share fixed heights
   so the two columns stay aligned. */
.tl-wrap { display: flex; }
.tl-labels { flex: 0 0 96px; }
.tl-head-spacer { height: 26px; border-bottom: 2px solid var(--ink); }
.tl-label-row {
  height: 52px; display: flex; flex-direction: column; justify-content: center;
  font: 600 13px/1.2 var(--body); border-bottom: 1px solid var(--divider);
  padding-right: 8px; cursor: pointer;
}
.tl-scroll { flex: 1; min-width: 0; overflow-x: auto; }
.tl-canvas { min-width: 980px; }
.tl-months {
  display: grid; grid-template-columns: repeat(12, 1fr); height: 26px;
  font: 600 11px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--label); border-bottom: 2px solid var(--ink); align-items: start;
}
.tl-body { position: relative; }
.tl-now {
  position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink);
  transform: translateX(-1px); z-index: 2;
}
.tl-now span {
  position: absolute; top: -2px; left: 4px;
  font: 600 10px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink);
}
.tl-row { display: flex; align-items: center; height: 52px; border-bottom: 1px solid var(--divider); cursor: pointer; }
.tl-bed { display: block; font: 400 10.5px/1.3 var(--mono); color: var(--label); }
.tl-track { position: relative; flex: 1; height: 28px; }
.tl-dot {
  position: absolute; top: 50%; width: 9px; height: 9px; transform: translate(-4px, -50%);
  background: var(--ink); z-index: 1;
}
.tl-dot-seed { border-radius: 50%; }
.tl-dot-plug { border-radius: 2px; }
.tl-grow { position: absolute; top: 50%; height: 6px; transform: translateY(-50%); background: var(--sunk); border-radius: 3px; }
.tl-band { position: absolute; top: 50%; height: 16px; transform: translateY(-50%); border-radius: 4px; display: flex; align-items: center; }
.tl-band span { font: 500 10px/1 var(--mono); padding: 0 6px; white-space: nowrap; }
.tl-band-single { background: var(--state-clear); color: var(--state-clear-ink); border: 1px dashed var(--state-clear-ink); }
.tl-band-continuous { background: linear-gradient(90deg, var(--state-clear), transparent); color: var(--state-clear-ink); }
.tl-band-unknown { right: 0; border: 2px dashed var(--state-uncertain); color: var(--state-uncertain-ink); background: none; }
.tl-band-asneeded { background: var(--clear-tint); color: var(--ink-2); }
.tl-band-companion { background: var(--state-stale-fill); color: var(--ink-2); border: 1px solid var(--border); }
.tl-note { font-size: 12px; }
.tl-legend { margin-top: 0.8rem; }
.tl-legend .lg-dot-seed { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); display: inline-block; }
.tl-legend .lg-dot-plug { width: 9px; height: 9px; border-radius: 2px; background: var(--ink); display: inline-block; }
.tl-legend .lg-single { width: 14px; height: 10px; border-radius: 3px; background: var(--state-clear); display: inline-block; }
.tl-legend .lg-continuous { width: 14px; height: 10px; border-radius: 3px; background: linear-gradient(90deg, var(--state-clear), transparent); display: inline-block; }
.tl-legend .lg-asneeded { width: 14px; height: 10px; border-radius: 3px; background: var(--clear-tint); display: inline-block; }
.resolve-chip { cursor: pointer; margin-top: 2px; }

/* The Plantings tab glyph: two leaves, the brand mark's leaf shape (the same
 * border-radius as the logo in render-brand-assets.mjs), in ink rather than
 * cream, meeting at the base as a pair. */
.tab-glyph-plantings::before {
  content: ''; position: absolute; bottom: 1px; left: 3px;
  width: 8px; height: 12px; background: currentColor;
  border-radius: 4% 100% 20% 100%; transform: rotate(-14deg);
  transform-origin: bottom right;
}
.tab-glyph-plantings::after {
  content: ''; position: absolute; bottom: 1px; right: 3px;
  width: 8px; height: 12px; background: currentColor;
  border-radius: 100% 4% 100% 20%; transform: rotate(14deg);
  transform-origin: bottom left;
}
.page-sub { margin: 0.2rem 0 0; font-size: 13px; }

/* --- Notification centre --------------------------------------------------- */
.head-side { display: flex; align-items: center; gap: 0.9rem; }
.bell { position: relative; display: grid; place-items: center; width: 44px; height: 44px; text-decoration: none; }
.bell-glyph {
  width: 16px; height: 14px; border: 2px solid var(--ink);
  border-bottom: none; border-radius: 8px 8px 0 0; position: relative;
}
.bell-glyph::before {
  content: ''; position: absolute; left: -4px; right: -4px; bottom: -2px;
  height: 2px; background: var(--ink);
}
.bell-glyph::after {
  content: ''; position: absolute; left: 50%; bottom: -6px; width: 4px; height: 4px;
  margin-left: -2px; border-radius: 50%; background: var(--ink);
}
.bell-badge {
  position: absolute; top: 2px; right: 2px; min-width: 17px; height: 17px;
  border-radius: 999px; background: var(--state-alert); color: var(--state-alert-ink);
  font: 700 10.5px/17px var(--mono); text-align: center; padding: 0 3px;
}
/* 1v card grammar: a white card with a state-coloured BORDER, a filled glyph
   badge, a bold title with a muted meta line, actions side by side. */
.notif-card { background: var(--card); color: var(--ink); }
.notice-alert.notif-card { border: 2px solid var(--state-alert); }
.notif-head { display: flex; gap: 0.7rem; align-items: flex-start; }
.notif-badge {
  flex: none; width: 26px; height: 26px; border-radius: 7px;
  display: grid; place-items: center; font: 800 14px var(--body);
}
.notif-badge-alert { background: var(--state-alert); color: var(--state-alert-ink); }
.notif-badge-uncertain {
  background: none; border: 2px dashed var(--state-uncertain); color: var(--state-uncertain-ink);
}
.notif-title { margin: 0; font: 700 16px/1.35 var(--body); }
.notif-meta { margin: 0.15rem 0 0; font: 400 13px/1.4 var(--body); color: var(--ink-muted); }
.notif-actions { display: flex; gap: 0.6rem; margin-top: 0.8rem; align-items: stretch; }
.notif-actions > * { flex: 1; }
/* Every control in the row shares one height, whatever element it is. */
.notif-actions .primary,
.notif-actions .primary-alert,
.notif-actions .notif-btn-secondary,
.notif-actions .notif-which summary { min-height: 52px; height: 100%; }
.primary-alert {
  background: var(--state-alert); color: var(--state-alert-ink);
  border: none; border-radius: 12px; font: 600 15px var(--body); cursor: pointer;
}
.notif-btn-secondary {
  display: grid; place-items: center;
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  color: var(--ink); font: 600 15px var(--body); text-decoration: none;
}
.notif-which { flex: 1; }
.notif-which summary {
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--border); border-radius: 12px; font: 600 15px var(--body); list-style: none;
}
.notif-which summary::-webkit-details-marker { display: none; }
.notif-which ul { margin: 0.4rem 0 0 1.1rem; padding: 0; }
.notif-footnote { margin: 0.6rem 0 0; font: 400 12.5px/1.5 var(--body); color: var(--ink-muted); }
.notif-which summary { cursor: pointer; font-weight: 600; min-height: 34px; display: flex; align-items: center; }
.notif-which ul { margin: 0.3rem 0 0.5rem 1.1rem; padding: 0; }
.notif-history {
  list-style: none; margin: 0;
  background: var(--card); border: 1px solid var(--border); border-radius: 14px;
  padding: 0.3rem 1rem;
}
.notif-history li {
  display: flex; gap: 0.7rem; align-items: flex-start;
  padding: 0.75rem 0; border-bottom: 1px solid var(--divider);
}
.notif-history li:last-child { border-bottom: none; }
.hist-box {
  flex: none; width: 22px; height: 22px; border-radius: 6px; margin-top: 1px;
  display: grid; place-items: center; font: 700 13px var(--body);
}
.hist-done { background: var(--state-clear); color: var(--state-clear-ink); }
.hist-reviewed { background: none; border: 1.5px solid var(--state-clear); color: var(--state-clear); }
.hist-expired { background: var(--sunk); color: var(--ink-muted); }
.hist-title { margin: 0; font: 600 14px/1.4 var(--body); color: var(--ink-2); }
.hist-meta { margin: 0.1rem 0 0; font: 400 12.5px/1.4 var(--body); color: var(--ink-muted); }

/* --- Almanac (1q) ---------------------------------------------------------- */
.almanac-search {
  width: 100%; box-sizing: border-box; margin: 0;
  padding: 0.7rem 0.9rem; font: 400 16px/1.4 var(--body);
  border: 1.5px solid var(--divider); border-radius: 12px;
  background: #fff; color: var(--ink);
}
.almanac-search:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.almanac-carousel {
  display: flex; gap: 0.7rem; overflow-x: auto; padding: 0.2rem 0 0.9rem;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.almanac-card {
  flex: 0 0 132px; scroll-snap-align: start; text-decoration: none;
  background: #fff; border: 1px solid var(--divider); border-radius: 14px;
  padding: 0.7rem; display: flex; flex-direction: column; gap: 0.4rem;
  color: var(--ink);
}
.card-name { font: 600 14px/1.3 var(--body); }
.card-urgency { font: 500 11.5px/1.3 var(--mono); color: var(--state-clear); }
.card-urgency.urgent { color: var(--state-alert); font-weight: 700; }
.source-almanac {
  align-self: flex-start; font: 500 10.5px/1 var(--mono); color: var(--ink-muted);
  border: 1.5px dashed var(--ink-muted); border-radius: 6px; padding: 3px 6px;
}
.almanac-chips { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0.6rem 0 0.9rem; }
.chip {
  font: 600 13px/1 var(--body); padding: 0.55rem 0.95rem; border-radius: 999px;
  border: 1.5px solid var(--divider); background: #fff; color: var(--ink); cursor: pointer;
}
.chip-active { background: var(--ink); color: #fff; border-color: var(--ink); }
.almanac-list { list-style: none; margin: 0; padding: 0; }
.almanac-list li + li { margin-top: 0.55rem; }
.almanac-row {
  display: flex; align-items: center; gap: 0.8rem; text-decoration: none;
  background: #fff; border: 1px solid var(--divider); border-radius: 14px;
  padding: 0.65rem 0.8rem; color: var(--ink);
}
.row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.row-name { font: 600 15px/1.35 var(--body); }
.row-variety { font-weight: 400; color: var(--ink-muted); }
.row-status { font: 400 12.5px/1.4 var(--mono); color: var(--ink-muted); }
.status-open { color: var(--state-clear); font-weight: 600; }
.status-open.status-urgent { color: var(--state-alert); }
.status-closed, .status-none { color: var(--ink-muted); }
.status-growing { color: var(--state-clear); }
.image-slot {
  display: grid; place-items: center; flex: none;
  border: 1.5px dashed var(--divider); border-radius: 10px;
  background: rgba(0, 0, 0, 0.03); color: var(--ink-muted);
  font: 600 18px/1 var(--body);
}
.image-slot-thumb { width: 44px; height: 44px; }
.image-slot-card { width: 100%; height: 68px; font-size: 24px; }
.image-slot-hero { width: 100%; height: 150px; font-size: 40px; border-radius: 16px; }

/* --- Crop guide (1o/1af/1ag) ----------------------------------------------- */
.guide-hero { margin: 0.3rem 0 1rem; }
.facts-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem; margin: 0 0 0.55rem;
}
.facts-strip.facts-pair { grid-template-columns: repeat(2, 1fr); }
.fact {
  background: #fff; border: 1px solid var(--divider); border-radius: 12px;
  padding: 0.6rem 0.65rem; min-width: 0;
}
.fact dt {
  font: 600 10.5px/1.3 var(--mono); text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-muted); margin: 0 0 0.25rem;
}
.fact dd { margin: 0; font: 500 13.5px/1.45 var(--body); color: var(--ink); overflow-wrap: break-word; }
.fact-unknown { border: 1.5px dashed var(--state-uncertain); background: transparent; }
.fact-unknown dd { color: var(--state-uncertain-ink); font-style: italic; font-size: 12.5px; }
.fact-design dd { color: var(--ink-muted); }
.mark-unverified {
  font: 500 10px/1 var(--mono); color: var(--ink-muted);
  border: 1.5px dashed var(--ink-muted); border-radius: 5px; padding: 2px 5px;
  vertical-align: 2px; margin-left: 3px; white-space: nowrap;
}
.grown-in-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.55rem; }
.grown-in-tile {
  display: flex; align-items: center; gap: 0.6rem;
  background: #fff; border: 1px solid var(--divider); border-radius: 12px;
  padding: 0.65rem 0.7rem; font: 500 13px/1.35 var(--body); color: var(--ink);
}
.gi-glyph { flex: none; width: 26px; height: 26px; position: relative; }
.gi-pot::before {
  content: ""; position: absolute; left: 4px; right: 4px; top: 8px; bottom: 2px;
  background: var(--ink); clip-path: polygon(0 0, 100% 0, 82% 100%, 18% 100%);
}
.gi-bag::before {
  content: ""; position: absolute; left: 5px; right: 5px; top: 6px; bottom: 2px;
  border: 2px solid var(--ink); border-radius: 4px;
}
.gi-bag::after {
  content: ""; position: absolute; left: 50%; top: 0; width: 2px; height: 8px;
  background: var(--state-clear); transform: translateX(-50%);
}
.gi-bed::before {
  content: ""; position: absolute; left: 2px; right: 2px; top: 12px; bottom: 4px;
  border: 2px solid var(--ink); border-radius: 2px;
}
.gi-bed::after {
  content: ""; position: absolute; left: 8px; top: 3px; width: 2px; height: 9px;
  background: var(--state-clear); box-shadow: 8px 0 0 var(--state-clear);
}
.gi-tunnel::before {
  content: ""; position: absolute; left: 3px; right: 3px; top: 5px; bottom: 4px;
  border: 2px solid var(--ink); border-bottom: none; border-radius: 12px 12px 0 0;
}
.gi-tunnel::after {
  content: ""; position: absolute; left: 1px; right: 1px; bottom: 4px; height: 2px;
  background: var(--ink);
}
.companion-row {
  display: flex; gap: 0.7rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--divider); border-radius: 12px;
  padding: 0.7rem 0.8rem;
}
.companion-leaf {
  flex: none; width: 22px; height: 22px; margin-top: 2px;
  background: var(--state-clear); border-radius: 0 60% 0 60%;
}
.companion-phrase { margin: 0 0 0.2rem; font: 600 14.5px/1.4 var(--body); }
.companion-note { margin: 0; font-size: 12.5px; }
.guide-prose { font: 400 14.5px/1.6 var(--body); margin: 0 0 0.4rem; }
.guide-prose .muted { display: block; font-size: 12px; margin-top: 0.3rem; }
.worth-knowing { list-style: none; margin: 0; padding: 0; }
.worth-knowing li {
  display: flex; gap: 0.6rem; align-items: flex-start;
  font: 400 13.5px/1.55 var(--body); color: var(--ink);
  padding: 0.5rem 0; border-bottom: 1px solid var(--divider);
}
.worth-knowing li:last-child { border-bottom: none; }
.wk-glyph { flex: none; font: 700 13px/1.4 var(--mono); width: 1.1em; text-align: center; }
.wk-risk .wk-glyph { color: var(--state-alert); }
.wk-tick .wk-glyph { color: var(--state-clear); }
.wk-conflict .wk-glyph { color: var(--state-uncertain); }
.guide-actions { margin: 1.2rem 0 0.6rem; }
.guide-actions .primary { width: 100%; }

/* --- Pick a bed (1p) ------------------------------------------------------- */
.pick-bed-list { list-style: none; margin: 0.6rem 0 0.9rem; padding: 0; }
.pick-bed-list li + li { margin-top: 0.5rem; }
.pick-bed-row {
  display: flex; width: 100%; align-items: center; gap: 0.7rem; text-align: left;
  background: #fff; border: 1.5px solid var(--divider); border-radius: 12px;
  padding: 0.7rem 0.8rem; cursor: pointer; font: inherit; color: var(--ink);
}
.pick-bed-row.selected { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.pb-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pb-name { font: 600 14.5px/1.35 var(--body); }
.pb-suitability { font: 400 11.5px/1.45 var(--body); color: var(--ink-muted); }
.pb-unknown { font-style: italic; }
.verdict { flex: none; font: 600 12px/1.3 var(--mono); white-space: nowrap; }
.verdict-ok { color: var(--state-clear); }
.verdict-snug { color: var(--state-alert); }
.verdict-unknown {
  color: var(--state-uncertain-ink); border: 1.5px dashed var(--state-uncertain);
  border-radius: 6px; padding: 3px 6px; font-style: italic; font-weight: 500;
}
.sheet-actions { display: flex; gap: 0.6rem; }
.sheet-actions .primary { flex: 1; }
.sheet-actions button[disabled] { opacity: 0.45; cursor: not-allowed; }

/* The Almanac tab glyph: an open book, same flat idiom as the other four. */
.tab-glyph-almanac::before {
  content: ""; position: absolute; left: 1px; right: 1px; top: 3px; bottom: 4px;
  border: 2px solid currentColor; border-radius: 3px 3px 5px 5px;
}
.tab-glyph-almanac::after {
  content: ""; position: absolute; left: 8px; top: 3px; bottom: 4px; width: 2px;
  background: currentColor;
}

/* The edit sheet's pointer to where crop-level knowledge lives now. */
.guide-link-row { margin: 0.2rem 0 0.6rem; }
.guide-link { font: 600 13.5px/1.4 var(--body); color: var(--ink); }

/* Researched guide sections: the source line under each. */
.guide-sources { font: 400 11.5px/1.5 var(--mono); color: var(--ink-muted); margin: 0 0 0.8rem; }
.guide-source { color: var(--ink-muted); }

/* Best-known varieties list. */
.variety-list { list-style: none; margin: 0 0 0.4rem; padding: 0; }
.variety-list li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem;
  padding: 0.45rem 0; border-bottom: 1px solid var(--divider);
  font: 400 14px/1.5 var(--body);
}
.variety-list li:last-child { border-bottom: none; }
.variety-name { font-weight: 600; }
.variety-note { font: 400 12px/1.4 var(--mono); color: var(--ink-muted); text-align: right; }
.fact-note { display: block; font: 400 11px/1.4 var(--mono); color: var(--ink-muted); margin-top: 2px; }
.wk-tip .wk-glyph { color: var(--ink-muted); font-style: italic; font-family: var(--mono); }
.wk-source { display: block; font: 400 11px/1.5 var(--mono); color: var(--ink-muted); margin-top: 2px; }
.wk-source .guide-source { color: var(--ink-muted); }

/* Depth and spacing fact glyphs (design 1o). Flat CSS marks beside the label. */
.fact dt { display: flex; align-items: center; gap: 0.4rem; }
.fact-glyph { position: relative; flex: none; width: 15px; height: 13px; }
/* Depth: a soil-surface bar with a downward arrow into the ground. */
.fact-glyph-depth::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: currentColor;
}
.fact-glyph-depth::after {
  content: ""; position: absolute; left: 50%; top: 3px; width: 2px; height: 7px;
  margin-left: -1px; background: currentColor;
  box-shadow: -3px -3px 0 -1px currentColor, 3px -3px 0 -1px currentColor;
  clip-path: polygon(-40% 0, 140% 0, 50% 130%);
}
/* Spacing: two plant stems under a spanning rule with end ticks. */
.fact-glyph-spacing::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
}
.fact-glyph-spacing::after {
  content: ""; position: absolute; left: 2px; bottom: 0; width: 2px; height: 8px;
  background: currentColor; box-shadow: 9px 0 0 currentColor;
}

/* Bundled crop photos filling the image slots. */
img.image-slot.has-photo { object-fit: cover; border: none; background: none; }
.photo-credit { margin: 0.3rem 0 0; font: 400 10.5px/1.4 var(--mono); }
.photo-credit a { color: var(--ink-muted); }
/* The hidden attribute must beat any element's own display rule. */
[hidden] { display: none !important; }

/* Clear (x) button inside the almanac search box. */
.almanac-search-wrap { position: relative; margin: 0.4rem 0 1rem; }
.almanac-search-wrap .almanac-search { padding-right: 2.6rem; }
/* Suppress the native search clear so there is only one, reliable on mobile. */
.almanac-search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.almanac-clear {
  position: absolute; top: 50%; right: 0.5rem; transform: translateY(-50%);
  width: 30px; height: 30px; min-width: 0; min-height: 0; border-radius: 50%;
  border: none; cursor: pointer; background: var(--sunk); color: var(--ink-muted);
  font: 400 20px/1 var(--body); display: grid; place-items: center; padding: 0;
}

/* --- Register / sign-in (3b/3c) -------------------------------------------- */
.auth-screen { max-width: 22rem; margin: 0 auto; padding: 2.5rem 0.25rem; }
.auth-head { text-align: center; margin-bottom: 1.5rem; }
.auth-head h1 { margin: 0.6rem 0 0.2rem; font: 700 26px/1.1 var(--display); }
.auth-leaf {
  display: inline-block; width: 34px; height: 34px; background: var(--state-clear);
  border-radius: 4% 100% 20% 100%; transform: rotate(8deg);
}
.auth-form { display: flex; flex-direction: column; gap: 1rem; margin: 1.2rem 0 1rem; }
.auth-form .field { display: flex; flex-direction: column; gap: 0.35rem; }
.auth-form input {
  box-sizing: border-box; width: 100%; padding: 0.7rem 0.8rem; font: 400 16px/1.4 var(--body);
  border: 1.5px solid var(--divider); border-radius: 12px; background: #fff; color: var(--ink);
}
.auth-form input:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.auth-form .primary { width: 100%; margin-top: 0.3rem; }
.field-hint { font: 400 12px/1.4 var(--mono); color: var(--ink-muted); }
.auth-error {
  background: var(--state-alert); color: var(--state-alert-ink);
  border-radius: 10px; padding: 0.6rem 0.8rem; margin: 0 0 0.4rem; font-size: 14px;
}
.auth-alt { text-align: center; font-size: 14px; margin: 0.4rem 0; }
.auth-contract { text-align: center; font-size: 12.5px; line-height: 1.5; margin-top: 1.4rem; }

/* --- Account page (3d) ----------------------------------------------------- */
.account-section { margin: 0 0 1.6rem; }
.account-heading {
  font: 600 11px/1.3 var(--mono); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-muted); margin: 0 0 0.6rem;
}
.account-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: #fff; border: 1px solid var(--divider); border-radius: 12px;
  padding: 0.75rem 0.9rem; margin-bottom: 0.5rem;
}
.account-label { display: block; font: 600 11px/1.3 var(--mono); color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.account-value { display: block; font: 400 15px/1.4 var(--body); margin-top: 2px; }
.account-set { color: var(--state-clear); font-weight: 600; }
.account-unset { color: var(--ink-muted); font-style: italic; }
.account-note { font-size: 12.5px; line-height: 1.5; margin: 0.4rem 0.2rem 0; }
.account-actions { display: flex; flex-direction: column; gap: 0.5rem; }
.account-actions button { width: 100%; }
.account-signout { margin: 2rem 0 1rem; text-align: center; }
.account-signout .secondary { width: 100%; }

/* Inline text button (e.g. "Resend it" in the account note). */
.linklike {
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  color: var(--ink); font: inherit; text-decoration: underline; min-height: auto;
}

/* --- Home-screen nudges (install / enable notifications) ------------------- */
.nudge-card {
  display: flex; align-items: flex-start; gap: 0.8rem; justify-content: space-between;
  background: var(--state-clear); color: var(--state-clear-ink);
  border-radius: 12px; padding: 0.85rem 1rem; margin: 0 0 0.9rem;
}
.nudge-title { margin: 0 0 0.25rem; font: 600 14.5px/1.35 var(--body); }
.nudge-text { margin: 0; font: 400 13px/1.5 var(--body); opacity: 0.95; }
.nudge-text strong { font-weight: 700; }
.nudge-actions { display: flex; align-items: center; gap: 0.4rem; flex: none; }
.nudge-actions .primary {
  background: var(--state-clear-ink); color: var(--state-clear);
  min-height: auto; padding: 0.5rem 0.9rem; font-size: 14px; white-space: nowrap;
}
.nudge-dismiss {
  background: none; border: none; color: var(--state-clear-ink); cursor: pointer;
  font: 400 22px/1 var(--body); min-height: auto; min-width: auto; padding: 0 0.2rem; opacity: 0.85;
}
/* The iOS Share glyph: a box with an up-arrow, drawn inline in the sentence. */
.nudge-share {
  display: inline-block; position: relative; width: 12px; height: 15px;
  border: 1.5px solid currentColor; border-top: none; border-radius: 0 0 3px 3px;
  vertical-align: -3px; margin: 0 1px;
}
.nudge-share::before {
  content: ''; position: absolute; left: 50%; top: -6px; width: 1.5px; height: 8px;
  background: currentColor; transform: translateX(-50%);
}
.nudge-share::after {
  content: ''; position: absolute; left: 50%; top: -6px; width: 6px; height: 6px;
  margin-left: -3px; border-top: 1.5px solid currentColor; border-left: 1.5px solid currentColor;
  transform: rotate(45deg);
}

/* --- Welcome (3f): the no-session entry, full-bleed like the splash -------- */
.welcome-screen {
  position: fixed; inset: 0; z-index: 20; overflow-y: auto;
  display: flex; align-items: flex-end; background: var(--ink);
}
/* Deeper bottom scrim than the splash, so the cream buttons read cleanly. */
.welcome-scrim {
  background: linear-gradient(180deg, rgba(22, 21, 15, 0.2), rgba(22, 21, 15, 0.55) 40%, rgba(22, 21, 15, 0.92));
}
.welcome-content {
  position: relative; width: 100%; color: #f2eee1;
  padding: 3rem 1.5rem calc(2.5rem + env(safe-area-inset-bottom));
}
.welcome-value {
  margin: 1.2rem 0 1.8rem; max-width: 30rem;
  font: 400 15.5px/1.6 var(--body); color: rgba(242, 238, 225, 0.9);
}
.welcome-primary, .welcome-secondary {
  display: block; text-align: center; text-decoration: none;
  padding: 1.05rem 1rem; border-radius: 14px; font: 700 16px/1 var(--body);
  margin-bottom: 0.7rem;
}
.welcome-primary { background: #f2eee1; color: var(--ink); }
.welcome-secondary {
  background: transparent; color: #f2eee1; border: 1.5px solid rgba(242, 238, 225, 0.65);
}
.welcome-footnote {
  margin: 1.2rem 0 0; text-align: center;
  font: 400 12px/1.5 var(--mono); color: rgba(242, 238, 225, 0.6);
}

/* The plot greeting (Good morning, <name>) sits above the screen head, live
   only. Warm and quiet: it is a hello, not a status. */
.greeting {
  margin: 0.2rem 0 0.6rem;
  font: 600 22px/1.15 var(--display);
  color: var(--ink);
  letter-spacing: -0.01em;
}