/* ============================================================
   HERB · design system
   Carried over from the Harvestory house style:
   cream ground, deep forest greens, orange accents,
   Fraunces (serif display) and Poppins (body).
   Phone first. One file, commented.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,400&family=Poppins:wght@400;500;600&display=swap');

:root {
  --cream: #FBF7EF;
  --green-deep: #2D5016;
  --green-mid: #4A7C25;
  --green-soft: #EAF0E2;
  --sage: #DCE5D0;
  --orange: #D9722B;
  --orange-soft: #F6E3D3;
  --ink: #22301A;
  --ink-soft: #5C6653;
  --white: #FFFFFF;
  --danger: #A03123;
  --radius: 14px;
  --shadow: 0 2px 10px rgba(45, 80, 22, 0.08);
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Poppins', -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}

/* ---------- boot splash ---------- */
.boot { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; }
.boot-mark { font-family: var(--font-display); font-size: 44px; font-weight: 600; color: var(--green-deep); }
.boot-mark::after { content: '.'; color: var(--orange); }
.boot-sub { color: var(--ink-soft); font-size: 14px; }

/* ---------- layout ---------- */
.shell { min-height: 100dvh; display: flex; flex-direction: column; }
.topbar {
  background: var(--green-deep);
  color: var(--cream);
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 18px 12px;
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 4px solid var(--orange);
}
.topbar .brand { font-family: var(--font-display); font-size: 24px; font-weight: 600; letter-spacing: 0.2px; }
.topbar .brand em { font-style: italic; color: #CFE0BC; }
.topbar .who { font-size: 12px; opacity: 0.85; text-align: right; }
.topbar .who a { color: var(--cream); text-decoration: underline; cursor: pointer; }

.main { flex: 1; padding: 18px 16px 110px; max-width: 720px; width: 100%; margin: 0 auto; }

/* ---------- bottom navigation ---------- */
.nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--white);
  border-top: 1px solid var(--sage);
  display: flex; justify-content: space-around; align-items: stretch;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 40;
}
.nav button {
  flex: 1; background: none; border: none; cursor: pointer;
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  color: var(--ink-soft); padding: 9px 2px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-align: center; line-height: 1.15; min-width: 0;
}
.nav button .ico { font-size: 20px; line-height: 1; }

/* Five tabs including Herb, and one long label. Shrink rather than clip. */
@media (max-width: 430px) {
  .nav button { font-size: 9.5px; padding: 8px 1px 7px; }
  .nav button .ico { font-size: 18px; }
}
.nav button.active { color: var(--green-deep); }
.nav button.active .ico { transform: scale(1.08); }

/* Herb floating button: champions only */
/* The floating Herb button was replaced by a Herb tab in the nav bar. */

/* ---------- headings and text ---------- */
h1.page {
  font-family: var(--font-display); font-weight: 600; font-size: 26px;
  color: var(--green-deep); margin: 4px 0 2px;
}
h1.page em { font-style: italic; color: var(--green-mid); }
.page-sub { color: var(--ink-soft); font-size: 13px; margin: 0 0 16px; }
.eyebrow {
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px;
  font-weight: 600; color: var(--orange); margin: 18px 0 6px;
}
.underline-accent { width: 26mm; max-width: 90px; height: 3px; background: var(--green-mid); border-radius: 2px; margin: 6px 0 14px; }

/* ---------- cards ---------- */
.card {
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px 16px; margin-bottom: 12px;
}
.card.sage { background: var(--green-soft); box-shadow: none; }
.card.deep { background: var(--green-deep); color: var(--cream); }
.card.deep .muted { color: #CFE0BC; }
.card h3 { margin: 0 0 4px; font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--green-deep); }
.card.deep h3 { color: var(--cream); }
.muted { color: var(--ink-soft); font-size: 13px; }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 10px; }

/* ---------- task rows ---------- */
.task {
  display: flex; align-items: center; gap: 12px;
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 12px 14px; margin-bottom: 10px;
}
.task.done { opacity: 0.55; }
.task .tick {
  width: 34px; height: 34px; min-width: 34px; border-radius: 50%;
  border: 2px solid var(--green-mid); background: var(--white);
  cursor: pointer; font-size: 16px; color: var(--green-deep);
}
.task.done .tick { background: var(--green-mid); color: var(--white); }
.task .t-title { font-weight: 500; }
.task .t-meta { font-size: 12px; color: var(--ink-soft); }
.task .chip { margin-left: auto; }

.chip {
  display: inline-block; font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.chip.orange { background: var(--orange-soft); color: var(--orange); }
.chip.green { background: var(--green-soft); color: var(--green-mid); }
.chip.plain { background: var(--sage); color: var(--ink-soft); }
.chip.red { background: #F5DEDA; color: var(--danger); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; border: none; cursor: pointer; text-align: center;
  font-family: var(--font-body); font-weight: 600; font-size: 14px;
  border-radius: 999px; padding: 11px 22px;
}
.btn.primary { background: var(--green-deep); color: var(--cream); }
.btn.orange { background: var(--orange); color: var(--white); }
.btn.ghost { background: none; color: var(--green-deep); border: 1.5px solid var(--green-mid); }
.btn.small { padding: 7px 14px; font-size: 12px; }
.btn.block { display: block; width: 100%; }
.btn:disabled { opacity: 0.5; cursor: default; }

/* ---------- forms ---------- */
input[type=email], input[type=password], input[type=text], input[type=number],
input[type=date], select, textarea {
  width: 100%; padding: 11px 12px; border-radius: 10px;
  border: 1.5px solid var(--sage); background: var(--white);
  font-family: var(--font-body); font-size: 16px; color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--green-mid); border-color: var(--green-mid); }
label.f { display: block; font-size: 12px; font-weight: 600; color: var(--ink-soft); margin: 12px 0 4px; }

/* ---------- login ---------- */
.login-wrap { min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login {
  background: var(--white); border-radius: 18px; box-shadow: var(--shadow);
  padding: 34px 26px; width: 100%; max-width: 380px; text-align: center;
  border-top: 6px solid var(--green-deep);
}
.login .mark { font-family: var(--font-display); font-size: 40px; font-weight: 600; color: var(--green-deep); }
.login .mark::after { content: '.'; color: var(--orange); }
.login p { color: var(--ink-soft); font-size: 14px; }

/* ---------- grow: systems and slots ---------- */
.system-head { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 8px; }
.slot-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; }
.slot {
  aspect-ratio: 1; border-radius: 7px; border: 1.5px solid var(--sage);
  background: var(--white); cursor: pointer; position: relative;
  font-size: 9px; color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center;
}
.slot.germinating { background: #F3EDD9; border-color: #D8CB9A; }
.slot.blackout   { background: #E7EFD9; border-color: #BFD3A0; }
.slot.propagation{ background: #D8E7C4; border-color: #A4C57E; }
.slot.growing    { background: #B7D398; border-color: var(--green-mid); }
.slot.ready      { background: var(--green-mid); border-color: var(--green-deep); color: var(--white); font-weight: 600; }
.slot.replant    { background: var(--orange-soft); border-color: var(--orange); }
.legend { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 4px; font-size: 11px; color: var(--ink-soft); }
.legend .sw { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; margin-right: 4px; border: 1px solid rgba(0,0,0,0.08); }

/* ---------- grow: layers and trays (GrowStation) ---------- */
.layer { margin-bottom: 14px; }
.layer-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 6px; gap: 10px;
}
.layer-name { font-weight: 600; font-size: 13px; color: var(--green-deep); }
.tray-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--ink-soft); }
.tray-opt {
  min-width: 26px; padding: 3px 7px; border-radius: 7px;
  border: 1.5px solid var(--sage); background: var(--white);
  color: var(--ink-soft); font-size: 12px; font-weight: 600; cursor: pointer;
}
.tray-opt.on { background: var(--green-mid); border-color: var(--green-deep); color: var(--white); }

.tray-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.tray {
  display: flex; flex-direction: column; justify-content: center; gap: 2px;
  min-height: 74px; padding: 10px 8px; text-align: left;
  border-radius: var(--radius); border: 1.5px solid var(--sage);
  background: var(--white); cursor: pointer; font-family: var(--font-body);
}
.tray-crop { font-weight: 600; font-size: 13px; color: var(--ink); line-height: 1.25; }
.tray-meta { font-size: 11px; color: var(--ink-soft); }
.tray-ref { font-size: 10px; color: var(--ink-soft); opacity: 0.7; margin-top: 2px; }
.tray.empty { border-style: dashed; background: transparent; }
.tray.empty .tray-crop { color: var(--ink-soft); font-weight: 500; }
.tray.germinating { background: #F3EDD9; border-color: #D8CB9A; }
.tray.blackout    { background: #E7EFD9; border-color: #BFD3A0; }
.tray.propagation { background: #D8E7C4; border-color: #A4C57E; }
.tray.growing     { background: #B7D398; border-color: var(--green-mid); }
.tray.ready       { background: var(--green-mid); border-color: var(--green-deep); }
.tray.ready .tray-crop, .tray.ready .tray-meta, .tray.ready .tray-ref { color: var(--white); }
.tray.replant     { background: var(--orange-soft); border-color: var(--orange); }

/* ---------- grow: slot systems (Herb Station, NFT) ---------- */
.slot-row {
  display: grid; gap: 5px;
  grid-template-columns: repeat(auto-fill, minmax(32px, 1fr));
}
.layer.seedling {
  border: 1.5px dashed var(--sage); border-radius: var(--radius);
  padding: 10px 12px; background: var(--green-soft);
}
.layer.seedling .layer-name { color: var(--ink-soft); }

/* ---------- locations ---------- */
.loc-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 12px 0 6px; padding-bottom: 4px;
  border-bottom: 1.5px solid var(--sage);
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  color: var(--green-deep);
}
.loc-head .muted { font-family: var(--font-body); font-size: 12px; }
.card.orange-soft { background: var(--orange-soft); border-color: var(--orange); }

/* ---------- reports ---------- */
.report { background: var(--white); border: 1px solid var(--sage); border-radius: var(--radius); padding: 20px; margin-bottom: 16px; }
.report-title { font-family: var(--font-display); color: var(--green-deep); margin: 0 0 2px; font-size: 24px; }
.report h3 { font-family: var(--font-display); color: var(--green-deep); margin: 22px 0 6px; font-size: 18px; }
.report h4 { margin: 16px 0 4px; font-size: 14px; }

.report-table { width: 100%; border-collapse: collapse; margin: 8px 0 4px; font-size: 13px; }
.report-table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--ink-soft); border-bottom: 1.5px solid var(--sage); padding: 6px 8px 6px 0;
}
.report-table td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--green-soft); }
.report-table .bad, .report .bad { color: var(--danger); font-weight: 600; }

.trend { width: 100%; height: auto; display: block; }
.trend-pair { display: grid; gap: 12px; }
@media (min-width: 620px) { .trend-pair { grid-template-columns: 1fr 1fr; } }

/* Print, which is also how a PDF gets made: just the report, on paper. */
@media print {
  .nav, .topbar, .no-print, .herb-fab, .chat-wrap, .modal-scrim { display: none !important; }
  body { background: var(--white); }
  .main { padding: 0 !important; }
  .report { border: none; padding: 0; }
  .report-table { page-break-inside: avoid; }
  .report h3 { page-break-after: avoid; }
  a[href]:after { content: ""; }
}

/* ---------- kitchen and harvest ---------- */
.harvest-thumb {
  width: 74px; height: 74px; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--sage); flex: none;
}

/* ---------- learn: skills ---------- */
.skill-row { margin-bottom: 12px; }
.skill-row .spread { margin-bottom: 4px; }
.skill-name { font-weight: 600; font-size: 13px; }
.skill-level { font-family: var(--font-display); color: var(--green-deep); font-weight: 600; }
.xpbar { height: 8px; background: var(--sage); border-radius: 999px; overflow: hidden; }
.xpbar .fill { height: 100%; background: linear-gradient(90deg, var(--green-mid), var(--green-deep)); border-radius: 999px; }
.total-level {
  text-align: center; padding: 18px; margin-bottom: 14px;
}
.total-level .n { font-family: var(--font-display); font-size: 44px; font-weight: 600; color: var(--cream); line-height: 1; }
.total-level .l { font-size: 12px; color: #CFE0BC; text-transform: uppercase; letter-spacing: 0.1em; }

.lesson-body { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.lesson-body h2 { font-family: var(--font-display); color: var(--green-deep); font-size: 20px; margin: 18px 0 8px; }
.lesson-body h2:first-child { margin-top: 0; }
.lesson-body li { margin-bottom: 6px; }
.lesson-body strong { color: var(--green-deep); }

/* ---------- herb chat ---------- */
.chat-wrap {
  position: fixed; inset: 0; z-index: 60; background: var(--cream);
  display: flex; flex-direction: column;
}
.chat-top {
  background: var(--green-deep); color: var(--cream);
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 10px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 4px solid var(--orange);
}
.chat-top .t { font-family: var(--font-display); font-size: 20px; font-weight: 600; }
.chat-top button { background: none; border: none; color: var(--cream); font-size: 22px; cursor: pointer; }
.chat-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.bubble { max-width: 84%; padding: 10px 14px; border-radius: 16px; font-size: 14px; white-space: pre-wrap; }
.bubble.user { align-self: flex-end; background: var(--green-mid); color: var(--white); border-bottom-right-radius: 4px; }
.bubble.herb { align-self: flex-start; background: var(--white); box-shadow: var(--shadow); border-bottom-left-radius: 4px; }
.bubble.herb.thinking { color: var(--ink-soft); font-style: italic; }
.bubble img { max-width: 100%; border-radius: 10px; display: block; margin-bottom: 6px; }
.chat-input {
  display: flex; gap: 8px; padding: 10px 12px calc(env(safe-area-inset-bottom, 0px) + 10px);
  background: var(--white); border-top: 1px solid var(--sage); align-items: flex-end;
}
.chat-input textarea { flex: 1; resize: none; max-height: 110px; }
.chat-input .iconbtn {
  background: var(--green-soft); border: none; border-radius: 10px;
  width: 44px; height: 44px; font-size: 20px; cursor: pointer; color: var(--green-deep);
}
.chat-input .send { background: var(--orange); color: var(--white); }

/* ---------- tables (master / client) ---------- */
table.data { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--white); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
table.data th { background: var(--green-soft); color: var(--green-deep); text-align: left; padding: 9px 10px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
table.data td { padding: 9px 10px; border-top: 1px solid var(--cream); }

.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 14px; }
.stat { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; text-align: center; }
.stat .n { font-family: var(--font-display); font-size: 30px; font-weight: 600; color: var(--green-deep); line-height: 1.1; }
.stat .l { font-size: 11px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px; }

/* ---------- modal ---------- */
.modal-scrim { position: fixed; inset: 0; background: rgba(34, 48, 26, 0.45); z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.modal {
  background: var(--cream); width: 100%; max-width: 560px;
  border-radius: 18px 18px 0 0; padding: 20px 18px calc(env(safe-area-inset-bottom, 0px) + 20px);
  max-height: 86dvh; overflow-y: auto;
}
.modal h3 { font-family: var(--font-display); color: var(--green-deep); margin: 0 0 10px; font-size: 20px; }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 140px; z-index: 70;
  background: var(--green-deep); color: var(--cream);
  padding: 10px 20px; border-radius: 999px; font-size: 13px; font-weight: 500;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25); opacity: 0; transition: opacity 0.25s;
  pointer-events: none; max-width: 88vw; text-align: center;
}
.toast.show { opacity: 1; }
.toast.xp { background: var(--orange); }

@media (min-width: 700px) {
  .slot-grid { grid-template-columns: repeat(20, 1fr); }
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- grow cycle ---------- */
.card.cycle { border-left: 4px solid var(--green-mid); }
.card.cycle.due { border-left-color: var(--green-deep); background: var(--green-soft); }
.card.cycle.overdue { border-left-color: var(--danger); background: var(--orange-soft); }
.cycle-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 5px 0; border-bottom: 1px solid var(--sage); font-size: 13px;
}
.cycle-row:last-of-type { border-bottom: 0; }
.cycle-note { font-size: 12px; margin-top: 6px; }

/* A tray whose window is open, or has closed, says so from across the room. */
.tray.flag-due { outline: 2px solid var(--green-deep); outline-offset: -2px; }
.tray.flag-overdue { outline: 2px solid var(--danger); outline-offset: -2px; }

/* ---------- procedures ---------- */
ul.kit { margin: 6px 0 0; padding-left: 20px; font-size: 13px; }
ul.kit li { padding: 1px 0; }
ol.steps { margin: 12px 0; padding-left: 22px; }
ol.steps .step { margin-bottom: 12px; font-size: 14px; }
ol.steps .step.ticked > .step-tick span { opacity: 0.55; text-decoration: line-through; }
.step-tick { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.step-tick input { margin-top: 4px; flex: none; }

/* ---------- the tray's journey ---------- */
.next-action {
  margin: 6px 0 10px; padding: 8px 12px; border-radius: 10px;
  background: var(--green-soft); color: var(--green-deep);
  font-weight: 600; font-size: 13px;
}
ul.journey { list-style: none; margin: 0 0 10px; padding: 0; font-size: 13px; }
ul.journey li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 5px 0; border-bottom: 1px solid var(--green-soft);
}
ul.journey li:last-child { border-bottom: 0; }

/* ---------- correcting and removing ---------- */
.btn.ghost.danger { color: var(--danger); border-color: var(--danger); }
.row-remove {
  background: none; border: none; cursor: pointer; flex: none;
  color: var(--ink-soft); font-size: 18px; line-height: 1;
  padding: 0 2px; margin-left: 6px; opacity: 0.5;
}
.row-remove:hover { opacity: 1; color: var(--danger); }
ul.journey li .row-remove { margin-left: 0; }

/* ---------- tasks: today beside what is coming ---------- */
.tasks-split { display: block; }

.pane-toggle {
  display: flex; gap: 6px; margin: 4px 0 14px;
  background: var(--sage); border-radius: 999px; padding: 3px;
}
.pane-toggle button {
  flex: 1; border: none; cursor: pointer; border-radius: 999px;
  padding: 8px 10px; background: none; color: var(--ink-soft);
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
}
.pane-toggle button.on { background: var(--white); color: var(--green-deep); box-shadow: var(--shadow); }
.pane-toggle .count {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px;
  border-radius: 999px; background: var(--green-soft); color: var(--green-mid);
  font-size: 11px;
}

/* Narrow: one pane at a time, today first. Two full columns would crush both. */
@media (max-width: 759px) {
  .tasks-split.show-today .pane-upcoming { display: none; }
  .tasks-split.show-upcoming .pane-today { display: none; }
}

/* Wide enough to carry both: 60 for the day, 40 for the schedule ahead. */
@media (min-width: 760px) {
  .pane-toggle { display: none; }
  .tasks-split {
    display: grid; grid-template-columns: 6fr 4fr;
    gap: 20px; align-items: start;
  }
  .tasks-split .pane { display: block; min-width: 0; }
  /* The schedule scrolls without taking the day with it. */
  .pane-upcoming {
    position: sticky; top: 12px;
    max-height: calc(100dvh - 150px); overflow-y: auto;
    padding-right: 4px;
  }
}

.date-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 14px 0 6px; padding-bottom: 4px;
  border-bottom: 2px solid var(--orange-soft);
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  color: var(--green-deep);
}
.date-head .muted { font-family: var(--font-body); font-size: 12px; }

/* ---------- the nursery ---------- */
.layer.na { opacity: 0.55; }
.layer.na .layer-name { color: var(--ink-soft); }
.gravel {
  border: 1px solid var(--sage); border-radius: 10px;
  padding: 8px 10px 10px; margin-bottom: 8px; background: var(--white);
}
.gravel-head {
  font-size: 12px; font-weight: 600; color: var(--ink-soft);
  margin-bottom: 6px; display: flex; align-items: center; gap: 8px;
}
.gravel .tray-row { grid-auto-flow: column; grid-auto-columns: 1fr; display: grid; gap: 8px; }
.gravel .tray { min-height: 64px; }
/* The two gravel trays sit side by side on the shelf, so they read that way
   here too, down to the narrowest phone. The trays inside them are small at
   that width, which is honest: that is how much room they have. */
.gravel-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: start; }
.gravel-row .gravel { margin-bottom: 0; min-width: 0; }
.gravel-head { flex-wrap: wrap; }
.gravel-head .chip { margin-left: auto; }
.gravel-head .tray-opt { margin-left: 4px; }
@media (max-width: 420px) {
  .gravel-row { gap: 6px; }
  .gravel-row .gravel { padding: 6px 6px 8px; }
  .gravel-row .tray-row { gap: 5px; }
  .gravel-row .tray { padding: 6px 5px; min-height: 58px; }
  .gravel-row .tray-crop { font-size: 12px; }
  .gravel-row .tray-meta, .gravel-row .tray-ref { font-size: 10px; }
}

/* Two mediums, two buttons. Big enough to hit with a thumb in a glasshouse. */
.medium-choice { display: grid; gap: 10px; margin-top: 8px; }
.medium-choice .btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  text-align: left; padding: 14px 16px; min-height: 60px; font-size: 15px;
}
.medium-choice .btn .muted { font-size: 12px; font-weight: 400; }

/* A quiet word about the allowance, not a message from Herb. Deliberately
   unlike a bubble: it is the app talking, not him. */
.bubble.note {
  align-self: center; background: none; box-shadow: none;
  color: var(--ink-soft); font-size: 12px; font-style: italic;
  padding: 2px 10px; max-width: 100%; text-align: center;
}

/* ---------- read only ---------- */
/* A client sees the whole app and changes none of it. A control they cannot
   use should look like part of the furniture, not like a broken button, so
   it loses its invitation rather than gaining a warning. */
.is-readonly { pointer-events: none; cursor: default; }
button.is-readonly, .btn.is-readonly { opacity: 0.45; }
.tray.empty.is-readonly, .slot.is-readonly {
  opacity: 1; border-style: solid; border-color: var(--sage);
  background: var(--green-soft); cursor: default;
}
.tick.is-readonly { opacity: 0.35; }
input.is-readonly, select.is-readonly, textarea.is-readonly {
  background: var(--green-soft); color: var(--ink-soft);
}
.read-only-note { border-left: 4px solid var(--green-mid); }
.read-only-note strong { color: var(--green-deep); }

/* ---------- inventory ---------- */
/* Kit on site that is not growing anything. Deliberately quieter than a
   system that is running, but not so quiet it gets forgotten. */
.card.inventory { background: var(--green-soft); box-shadow: none; border: 1.5px dashed var(--sage); }
.card.inventory strong { font-family: var(--font-display); font-size: 16px; color: var(--green-deep); }
.card.inventory .muted { font-size: 13px; margin: 6px 0 2px; }
.card.inventory .cycle-row { border-bottom-color: var(--sage); align-items: baseline; }
.card.inventory .cycle-row strong { font-family: var(--font-body); font-size: 13px; text-align: right; }

/* ---------- Herb and Help ---------- */
/* The chat lives in a pane here, not over the whole app. */
.chat-wrap.inline {
  position: static; inset: auto; z-index: auto;
  border: 1px solid var(--sage); border-radius: var(--radius);
  overflow: hidden; min-height: 60vh; background: var(--white);
}
.chat-wrap.inline .chat-log { min-height: 40vh; }


.herb-split { display: block; }
@media (max-width: 759px) {
  .herb-split.show-herb .pane-help { display: none; }
  .herb-split.show-help .pane-chat { display: none; }
}
/* Wide enough for two: the chat keeps the left, and whichever of the notebook
   and the help was asked for sits beside it. */
@media (min-width: 760px) {
  .herb-split {
    display: grid; grid-template-columns: 6fr 4fr;
    gap: 20px; align-items: start;
  }
  .herb-split .pane { display: block; min-width: 0; }
  .pane-help {
    position: sticky; top: 12px;
    max-height: calc(100dvh - 150px); overflow-y: auto; padding-right: 4px;
  }
}

/* A row of buttons under something: a record, a report, a planting. */
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ---------- people and passwords ---------- */
.person { padding: 10px 0; border-bottom: 1px solid var(--cream); }
.person:last-child { border-bottom: 0; }
.person strong { font-size: 14px; color: var(--green-deep); }
/* Read down a phone line, written on the back of a delivery note. Big, spaced,
   and in a face where a 5 cannot be mistaken for an S. */
.temp-pw {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 22px; font-weight: 600; letter-spacing: 0.08em;
  text-align: center; padding: 16px 10px; margin: 10px 0;
  background: var(--green-soft); border: 1.5px dashed var(--green-mid);
  border-radius: var(--radius); color: var(--green-deep);
  user-select: all; word-break: break-all;
}

/* ---------- the site notebook ---------- */
/* There is no notebook screen. Notes are made by telling Herb, and read back
   in Master and in the monthly report. This is only how one looks in a list. */
.card.note { border-left: 3px solid var(--sage); padding: 12px 14px; }
.card.note.pinned { border-left-color: var(--green-mid); background: var(--green-soft); box-shadow: none; }
.card.note.resolved { opacity: 0.65; }
.note-kind { font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.note-body { margin: 6px 0 4px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
.note-meta { font-size: 11px; color: var(--ink-soft); }
.note-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* Herb offering to write one down. Attached to what he just said, so it
   reads as part of the answer rather than as an advert. */
.note-offer {
  align-self: flex-start; max-width: 84%; margin-top: -4px;
  background: var(--green-soft); border: 1.5px dashed var(--green-mid);
  border-radius: 12px; padding: 10px 12px;
}
.note-offer .q { font-size: 12px; color: var(--ink-soft); margin-bottom: 6px; }
.note-offer .t { font-size: 13px; font-weight: 600; color: var(--green-deep); margin-bottom: 8px; }

/* ---------- contacts ---------- */
/* The number is the link. A thumb goes for the number, not a button beside it. */
.contact-link {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px; padding: 9px 12px;
  border: 1.5px solid var(--sage); border-radius: 10px;
  background: var(--white); color: var(--green-deep);
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.contact-link .ico { font-size: 15px; line-height: 1; }
.contact-link:active { background: var(--green-soft); }
.card.contact .muted { font-size: 12.5px; }

/* ---------- tables on a phone ---------- */
/* Reports are read on a phone like everything else. A wide table scrolls
   inside its own box: the page itself never moves sideways. */
@media (max-width: 700px) {
  .report-table, table.data {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .report-table th, table.data th { white-space: nowrap; }
  .report-table td, table.data td { white-space: nowrap; }
  .report-table td.wrap, table.data td.wrap { white-space: normal; min-width: 12em; }
}