/* ═══════════════════════════════════════════════════════════
   Weekly Field Checklist — stylesheet (screen + print)
   ═══════════════════════════════════════════════════════════ */

:root {
  --bg:        #faf6ee;
  --bg-2:      #f3ecdd;
  --surface:   #fffdf8;
  --border:    #e6dcc8;
  --border-2:  #d4c5a5;
  --text:      #35301f;
  --muted:     #83795f;
  --leaf:      #2f6b3a;
  --leaf-2:    #4d9152;
  --leaf-soft: #e3efe0;
  --leaf-band: #35723e;
  --rhizome:   #d9a441;
  --rhizome-2: #b97f2e;
  --accent:    #b45d16;
  --danger:    #a33d2f;
  --focus:     #1c4f2a;
  --radius:    12px;
  --serif: Georgia, 'Times New Roman', serif;
  /* Defined here too: the figures use var(--sans), and a font shorthand with an
     undefined variable is dropped whole — the text would silently fall back to
     the 16px SVG default and overflow its canvas. */
  --sans:  system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --danger-bd: var(--danger);
  --warn-bd:   #c9882f;
  --warn-bg:   #fbf0d9;
}

[data-theme="dark"] {
  --bg:        #171512;
  --bg-2:      #1e1b16;
  --surface:   #211e18;
  --border:    #3a3427;
  --border-2:  #524935;
  --text:      #ece4d2;
  --muted:     #a89a7c;
  --leaf:      #7cba82;
  --leaf-2:    #a4d3a6;
  --leaf-soft: #24301f;
  --leaf-band: #2c5c33;
  --rhizome:   #e2b45a;
  --rhizome-2: #c58f3a;
  --accent:    #e8935a;
  --danger:    #d97a6a;
  --focus:     #ffc46b;
}

* { box-sizing: border-box; }

/* ═══════════════════════════════════════════
   Figures — the season strip and its data table.
   Mirrors the same block in styles.css; this page loads its own stylesheet, so
   the palette has to be repeated here. check_figures.py verifies that every
   class and variable a figure uses is defined in the stylesheet its page loads.
   ═══════════════════════════════════════════ */

.figure { margin: 22px 0; }
.figure__frame {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 14px 10px;
}
.figure__frame > svg { display: block; width: 100%; height: auto; }
.figure figcaption {
  margin-top: 8px; font-size: .78rem; line-height: 1.5; color: var(--muted);
}

.figure__data {
  margin: 8px 0 0;
  border-top: 1px dashed var(--border);
  font-size: .78rem;
}
.figure__data > summary {
  cursor: pointer; padding: 8px 0 3px;
  font-size: .7rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
}
.figure__data > summary:hover { color: var(--text); }
.figure__data table {
  border-collapse: collapse; width: 100%; margin: 8px 0 4px;
  font-size: .78rem;
}
.figure__data caption {
  text-align: left; padding: 6px 10px; color: var(--muted);
  font-weight: 700; font-size: .74rem;
  border-bottom: 1px solid var(--border);
}
.figure__data th {
  text-align: left; padding: 6px 10px;
  background: var(--leaf-soft); color: var(--text);
  border-bottom: 2px solid var(--leaf);
}
.figure__data td {
  padding: 6px 10px; vertical-align: top;
  border-bottom: 1px solid var(--border);
}

/* SVG palette — class-based, so it follows the theme */
.fig-band      { fill: var(--leaf-soft); }
.fig-band-2    { fill: var(--bg-2); }
.fig-leaf      { fill: var(--leaf); }
.fig-leaf-2    { fill: var(--leaf-2); }
.fig-leaf-band { fill: var(--leaf-band); }
.fig-rhizome   { fill: var(--rhizome); }
.fig-rhizome-2 { fill: var(--rhizome-2); }
.fig-accent    { fill: var(--accent); }
.fig-surface   { fill: var(--surface); }
.fig-warn      { fill: var(--warn-bd); }
.fig-danger    { fill: var(--danger-bd); }
.fig-soil      { fill: var(--bg-2); }
.fig-solid     { fill: var(--leaf-soft); stroke: var(--border-2); stroke-width: 1.5; }
.fig-earth     { fill: var(--bg-2);      stroke: var(--border-2); stroke-width: 1.5; }
.fig-plant     { fill: var(--leaf);      stroke: var(--border-2); stroke-width: 1.5; }
.fig-plant-2   { fill: var(--leaf-2);    stroke: var(--border-2); stroke-width: 1.5; }
.fig-store     { fill: var(--rhizome);   stroke: var(--border-2); stroke-width: 1.5; }
.fig-seed      { fill: var(--accent);    stroke: var(--border-2); stroke-width: 1.5; }
.fig-danger-s  { fill: var(--danger-bd); stroke: var(--border-2); stroke-width: 1.5; }
.fig-root      { fill: none; stroke: var(--leaf-band); stroke-width: 1.6; }
.fig-dim       { stroke: var(--muted); stroke-width: 1; }
.fig-arrow-head { fill: var(--accent); }
.fig-dot       { fill: var(--accent); }
.fig-bud       { fill: var(--leaf-band); stroke: none; }
.fig-danger-stroke, .fig-cross {
  stroke: var(--danger-bd); stroke-width: 3; fill: none; stroke-linecap: round;
}

.fig-text   { fill: var(--text);    font: 400 12px var(--sans); }
.fig-text-b { fill: var(--text);    font: 700 12px var(--sans); }
.fig-text-s { fill: var(--muted);   font: 400 10.5px var(--sans); }
.fig-text-m { fill: var(--muted);   font: 500 11.5px var(--sans); }
.fig-num    { fill: var(--text);    font: 700 11.5px var(--sans); }
.fig-cap    {
  fill: var(--muted); font: 700 10.5px var(--sans);
  letter-spacing: .08em; text-transform: uppercase;
}
.fig-grid  { stroke: var(--border);   stroke-width: 1; }
.fig-axis  { stroke: var(--border-2); stroke-width: 1.5; }
.fig-rule  { stroke: var(--border-2); stroke-width: 1; stroke-dasharray: 4 3; }
.fig-line  { fill: none; stroke: var(--leaf-band); stroke-width: 2.5; stroke-linejoin: round; }
.fig-outline { fill: none; stroke: var(--border-2); stroke-width: 2; }
.fig-arrow { stroke: var(--accent); stroke-width: 2; fill: none; }

@media print {
  .figure { break-inside: avoid; }
  .figure__frame { border-color: #bbb; background: #fff; }
  .fig-band, .fig-soil, .fig-band-2,
  .fig-solid, .fig-earth { fill: #f2f2f2 !important; }
  .figure__data > summary { display: none; }
  .figure__data::details-content { content-visibility: visible; height: auto; }
}

/* ── Keyboard focus ──
   One visible ring for every control, including the tick boxes. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.planting-row__date input:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
}

/* ── Top bar ── */
.topbar {
  display: flex; align-items: center; gap: 18px;
  padding: 14px clamp(16px, 3vw, 40px);
  background: var(--bg-2);
  border-bottom: 3px solid var(--leaf);
  flex-wrap: wrap;
}
.topbar__back {
  color: var(--leaf); text-decoration: none; font-weight: 700; font-size: .9rem;
  white-space: nowrap;
}
.topbar__back:hover { text-decoration: underline; }
.topbar__title h1 {
  font-family: var(--serif); font-size: 1.35rem; margin: 0; letter-spacing: -0.01em;
}
.topbar__title p { margin: 0; font-size: .78rem; color: var(--muted); }
.topbar__actions { margin-left: auto; display: flex; gap: 8px; }
.btn {
  font: inherit; font-size: .85rem; font-weight: 700;
  background: var(--leaf-band); color: #fff;
  border: none; border-radius: 8px; padding: 8px 16px; cursor: pointer;
}
.btn:hover { filter: brightness(1.08); }
.btn--danger {
  background: transparent; color: var(--danger);
  border: 1px solid currentColor;
}
.btn--danger:hover { background: var(--danger); color: #fff; }

/* ── Sheet ── */
.sheet {
  max-width: 880px;
  margin: 0 auto;
  padding: 24px clamp(14px, 3vw, 40px) 60px;
}

/* ── Planting-date / progress row ── */
.planting-row {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border-2);
  border-top: 3px solid var(--rhizome);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 14px;
}
.planting-row__date label {
  display: block; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--leaf);
  margin-bottom: 4px;
}
.planting-row__date input {
  font: inherit; font-weight: 600; color: var(--text);
  background: var(--bg); border: 1px solid var(--border-2);
  border-radius: 8px; padding: 7px 10px; outline: none;
}
.planting-row__date input:focus { border-color: var(--leaf); box-shadow: 0 0 0 3px var(--leaf-soft); }
.planting-row__now { display: flex; flex-direction: column; gap: 2px; }
.planting-row__week { font-weight: 800; font-size: 1.05rem; color: var(--accent); }
.planting-row__dap { font-size: .8rem; color: var(--muted); }

.progressbig {
  flex: 1; min-width: 160px; height: 12px;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: 999px; overflow: hidden;
}
.progressbig__bar {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--leaf-2), var(--rhizome));
  transition: width .25s ease;
}
.progressbig__label { font-size: .8rem; color: var(--muted); white-space: nowrap; }

/* ── How-to ── */
.howto { font-size: .85rem; color: var(--muted); margin: 0 0 22px; }
.howto a { color: var(--accent); }

/* ── Phases ── */
.phase {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 18px;
  overflow: hidden;
}
.phase__head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 14px 18px 10px;
  background: var(--leaf-soft);
  border-bottom: 1px solid var(--border);
}
.phase__head h2 {
  font-family: var(--serif); font-size: 1.15rem; margin: 0; display: inline;
}
.phase__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--leaf); color: #fff;
  font-family: system-ui, sans-serif; font-size: .85rem; font-weight: 800;
  vertical-align: middle; margin-right: 6px;
}
.phase__span {
  font-size: .74rem; color: var(--muted); font-weight: 600;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
.phase__count { margin-left: auto; font-size: .75rem; color: var(--muted); font-weight: 700; }

.phase.is-current { border-color: var(--rhizome); box-shadow: 0 0 0 2px var(--rhizome); }
.phase.is-past .phase__head { background: transparent; }
.phase.is-past h2 { color: var(--muted); }

/* ── Operations ── */
.ops { list-style: none; margin: 0; padding: 6px 0; }
.ops li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 9px 18px;
  border-bottom: 1px dashed var(--border);
}
.ops li:last-child { border-bottom: none; }

.tick {
  flex-shrink: 0;
  width: 20px; height: 20px; margin-top: 3px;
  border: 2px solid var(--border-2);
  border-radius: 5px;
  background: var(--bg);
  cursor: pointer;
  position: relative;
  transition: background .12s, border-color .12s;
}
.tick:hover { border-color: var(--leaf); }
.ops li.done .tick {
  background: var(--leaf); border-color: var(--leaf);
}
.ops li.done .tick::after {
  content: '';
  position: absolute; left: 5px; top: 1px;
  width: 6px; height: 11px;
  border: solid #fff; border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.ops li.done > div { color: var(--muted); }
.ops li.done > div strong { text-decoration: line-through; text-decoration-color: var(--border-2); }

.ops strong { font-weight: 700; }
.ops li > div { font-size: .92rem; }
.ops li > div .w {
  font-style: normal; font-size: .72rem; font-weight: 700;
  color: var(--rhizome-2);
  background: color-mix(in srgb, var(--rhizome) 18%, transparent);
  border-radius: 4px; padding: 1px 6px;
  margin-left: 6px; white-space: nowrap;
}

/* ── Standing habits ── */
.habits {
  background: var(--leaf-soft);
  border: 1px solid var(--border);
  border-left: 4px solid var(--leaf);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 22px 0;
}
.habits h2 { font-family: var(--serif); font-size: 1.05rem; margin: 0 0 8px; }
.habits ul { margin: 0; padding-left: 20px; font-size: .9rem; }
.habits li { margin-bottom: 5px; }

/* ── Footer ── */
.sheet-foot { font-size: .8rem; color: var(--muted); }
.sheet-foot a { color: var(--accent); }

/* ── Print ── */
@media print {
  @page { size: A4; margin: 14mm 12mm; }

  html { scroll-behavior: auto; }
  body { background: #fff; color: #111; font-size: 11.5pt; line-height: 1.45; }

  .topbar { display: none; }
  .topbar__actions, .btn { display: none !important; }

  .sheet { max-width: none; padding: 0; }

  .planting-row {
    border: 1px solid #999; box-shadow: none;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    break-inside: avoid; margin-bottom: 8mm;
  }
  .howto { display: none; }

  .phase {
    border: 1px solid #999; border-radius: 6px;
    break-inside: avoid;
    margin-bottom: 6mm;
    box-shadow: none;
  }
  .phase.is-current { border-color: #333; border-width: 2px; box-shadow: none; }
  .phase__head {
    background: #eee !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
    border-bottom: 1px solid #999;
    padding: 8px 12px 6px;
  }
  .phase__num { background: #333 !important; color: #fff !important; }

  .ops li {
    break-inside: avoid;
    padding: 6px 12px;
    border-bottom: 1px dotted #bbb;
  }
  .tick {
    border-color: #555 !important; background: #fff !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .ops li.done .tick { background: #555 !important; }

  .habits { break-inside: avoid; border-color: #999; background: #f4f4f4 !important; }
  .sheet-foot { margin-top: 8mm; }

  a { color: #111; text-decoration: none; }
}