/* Steve's grower day, 19 November (qag-3nko): the sap test workbook (sap-workbook.html), on screen as A4 sheets
   and printed a sheet a page, and the day's page (grower-day.html). The graph's own styles are shared
   (components.css, .sg). */

/* The controls: the crop, the test, print ------------------------------------------------------ */
.wb-controls { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(1.5rem, 3vw, 2rem); }
.wb-controls h1 { margin-top: 0.5rem; }
.wb-controls .lede { margin-top: 0.8rem; }
.wb-form { display: grid; gap: 1rem; margin-top: 1.5rem; max-width: 48rem; }
.wb-form fieldset { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin: 0; padding: 0; border: 0; }
.wb-form legend { width: 100%; margin-bottom: 0.4rem; font-weight: 700; }
.wb-form label { display: inline-flex; align-items: center; gap: 0.4rem; }
.wb-file { position: relative; cursor: pointer; }
.wb-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.wb-file:focus-within { outline: 2px solid var(--ink); outline-offset: 2px; }
.wb-pick { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; }
.wb-pick select, .wb-pick input { font: inherit; padding: 0.3rem 0.5rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--card); max-width: 100%; }
.wb-say:empty { display: none; }
.wb-say { color: var(--ink-2); }
.wb-note { font-size: 0.9rem; color: var(--ink-3); }
.wb-buttons { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* The first look: four steps on one sheet, two by two ------------------------------------------ */
.wb-one .wb-fields { margin-top: 0.6rem; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wb-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1rem; }
.wb-step { padding: 0.6rem 0.7rem; border: 1px solid var(--rule); border-radius: 8px; }
.wb-step > * + * { margin-top: 0.4rem; }
.wb-step h3 { font-size: 1.02rem; line-height: 1.2; }
.wb-step h3 b { color: var(--earth); }
.wb-step .wb-sub { font-size: 0.8rem; line-height: 1.3; }
.wb-table.wb-table--step tbody th { width: 28%; }
.wb-table.wb-table--step td { width: 14%; }
.wb-table.wb-table--step td:last-child { width: 12%; }
.wb-table.wb-table--step td.wb-target { width: 30%; }

/* the steps on the big screen */
.wb-talk { width: min(64rem, calc(100% - 2rem)); max-height: calc(100% - 2rem); padding: clamp(1.2rem, 4vw, 3rem); border: 0; border-radius: 12px; background: var(--card); color: var(--ink); }
.wb-talk::backdrop { background: rgba(30, 43, 34, 0.6); }
.wb-talk h2 { margin-top: 0.4rem; font-size: clamp(1.6rem, 4vw, 2.8rem); line-height: 1.1; }
.wb-talk__why { margin-top: 0.6rem; font-size: clamp(1.05rem, 2vw, 1.35rem); color: var(--ink-2); }
.wb-talk .wb-table { margin-top: 1.2rem; font-size: clamp(0.95rem, 1.8vw, 1.25rem); }
.wb-talk .wb-table thead th { font-size: 0.85em; }
.wb-talk .wb-table td.wb-target { font-size: 0.9em; }
.wb-talk__lines { margin: 1.2rem 0 0; padding-left: 1.3rem; font-size: clamp(1.05rem, 2vw, 1.35rem); }
.wb-talk__lines li + li { margin-top: 0.4rem; }
.wb-talk__room { margin-top: 1.4rem; padding: 0.8rem 1rem; border-left: 5px solid var(--earth); background: var(--paper); font-size: clamp(1.05rem, 2vw, 1.35rem); }
.wb-talk__nav { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.4rem; }

/* The sheets: A4 on screen, a sheet a page in print -------------------------------------------- */
.wb-sheets { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; justify-items: center; padding: 0 var(--gutter) clamp(3rem, 6vw, 5rem); }
.wb-page { width: min(100%, 210mm); min-height: 297mm; padding: 14mm 13mm; background: var(--card); box-shadow: 0 1px 3px rgba(30, 43, 34, 0.18); font-size: 0.92rem; line-height: 1.42; color: var(--ink); }
.wb-page > * + * { margin-top: 0.8rem; }
.wb-head { margin-top: 1.2rem; }
.wb-page > .wb-head:first-child { margin-top: 0; }
.wb-head h2 { font-size: 1.45rem; line-height: 1.15; }
.wb-kicker { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--earth); }
.wb-sub { color: var(--ink-2); }
.wb-what b, .wb-box > b { color: var(--ink); }
.wb-box { padding: 0.6rem 0.8rem; border: 1px solid var(--rule); border-radius: 8px; }
.wb-rule-box { padding: 0.5rem 0.8rem; border-left: 4px solid var(--earth); background: var(--paper); }

/* a line to write on, and words to circle */
.wb-line { display: flex; align-items: flex-end; gap: 0.5rem; min-height: 1.9rem; margin-top: 0.3rem; }
.wb-line span:first-child { flex: none; max-width: 70%; }
.wb-rule { flex: 1; min-width: 3rem; min-height: 1.3em; border-bottom: 1px solid var(--ink-3); font-weight: 700; }
.wb-table--plan tbody th, .wb-table--plan td { height: 2.6rem; }
.wb-circle { margin-top: 0.4rem; }
.wb-circle span { display: inline-block; padding: 0 0.3rem; font-weight: 700; }
.wb-fill { display: block; min-height: 1.4em; font-weight: 700; }
.wb-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.2rem; }

/* the tables: a row a check, with room to write */
.wb-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; line-height: 1.3; }
.wb-table th, .wb-table td { padding: 0.32rem 0.35rem; border: 1px solid var(--rule); text-align: left; vertical-align: top; }
.wb-table thead th { background: var(--paper-2); font-size: 0.75rem; font-weight: 700; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.wb-table tbody th { font-weight: 400; width: 36%; }
.wb-table tbody th small { display: block; margin-top: 0.15rem; font-size: 0.75rem; color: var(--ink-3); }
.wb-table td { width: 9%; }
.wb-table td.wb-target { width: 13%; font-size: 0.75rem; color: var(--ink-2); }
.wb-table td:last-child { width: 16%; }
.wb-table--stages td, .wb-table--hormones td, .wb-table--plan td, .wb-table--trend td, .wb-table--mob td { width: auto; }
.wb-table--stages tbody th, .wb-table--hormones tbody th { width: 24%; }
.wb-table--hormones tbody th { width: 14%; font-weight: 700; }
.wb-table--hormones td:last-child { width: 14%; }
.wb-table--trend tbody th { width: 30%; }
.wb-table--trend th, .wb-table--trend td { padding-block: 0.18rem; }
.wb-table tr.is-now { background: var(--paper); outline: 2px solid var(--earth); }
.wb-group td { background: var(--paper); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.wb-ticks { margin: 0.4rem 0 0; padding-left: 1.4rem; list-style: '☐  '; }
.wb-quick ol { margin: 0.4rem 0 0; padding-left: 1.3rem; }
.wb-quick li + li { margin-top: 0.25rem; }

/* the cover */
.wb-cover h1 { font-size: 2.2rem; line-height: 1.05; margin-top: 0.3rem; }
.wb-lede { font-size: 1.08rem; color: var(--ink-2); }
.wb-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem 1.2rem; margin: 1.2rem 0 0; }
.wb-fields div { display: flex; align-items: flex-end; gap: 0.5rem; border-bottom: 1px solid var(--ink-3); min-height: 2.2rem; }
.wb-fields dt { font-weight: 700; }
.wb-fields dd { margin: 0; flex: 1; }
.wb-levels { display: grid; justify-items: center; gap: 4px; margin: 1.4rem 0 0.4rem; }
.wb-levels p { width: var(--w); margin: 0; padding: 0.45rem 0.6rem; border-radius: 4px; background: var(--paper-2); text-align: center; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.wb-levels small { display: block; color: var(--ink-3); font-size: 0.76rem; }
.wb-keep { margin-top: 1.4rem; padding: 0.6rem 0.8rem; border: 1.5px dashed var(--earth); border-radius: 8px; font-weight: 700; }

/* the stage strip: the crop's stages to scale */
.wb-strip { display: flex; gap: 2px; margin-top: 0.8rem; }
.wb-strip span { min-width: 0; padding: 0.35rem 0.3rem 0.3rem; border-top: 6px solid var(--c); background: var(--paper); font-size: 0.75rem; line-height: 1.2; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.wb-strip span.is-now { background: var(--paper-2); outline: 2px solid var(--earth); }
.wb-strip small { display: block; font-size: 1em; color: var(--ink-3); }
.wb-strip--blank span { flex: 1; min-height: 2.6rem; border-top-color: var(--rule); }

/* the graph: the panels, three across */
.wb-panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.9rem 1rem; }
.wb-graph .sg-key { font-size: 0.78rem; }

/* The day's page (grower-day.html) ------------------------------------------------------------ */
.gd-open h1 { margin-top: 0.6rem; }
.gd-open .lede { margin-top: 1rem; }
.gd-bring { margin-top: 1.6rem; max-width: 40rem; }
.gd-bring h2 { font-size: var(--step-1); }
.gd-bring ul, .gd-rules { margin: 0.6rem 0 0; padding-left: 1.2rem; }
.gd-bring li + li, .gd-rules li + li { margin-top: 0.35rem; }
.gd-two { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.gd-two h2 { margin-top: 0.5rem; }
.gd-two p + p, .gd-two h2 + p { margin-top: 0.9rem; }
.gd-cta { margin-top: 1.3rem !important; }
.gd-small { font-size: 0.92rem; color: var(--ink-3); }
.gd-peek { margin: 0; }
.gd-levels { list-style: none; padding: 0; }
.gd-levels li { width: var(--w); padding: 0.55rem 0.7rem; border-radius: 4px; background: var(--paper-2); text-align: center; }
#gd-tests + .lede { margin-top: 0.8rem; }
.gd-files { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: 46rem; margin: 1.4rem 0; padding: 0; list-style: none; }
.gd-files li { display: grid; gap: 0.35rem; }
.gd-files span { color: var(--ink-2); }
.gd-rules { margin-top: 1rem; }
@media (max-width: 760px) { .gd-two, .gd-files { grid-template-columns: minmax(0, 1fr); } }

/* The cards (grower-day-cards.html): two consent cards to a sheet, and eight address cards ------- */
.cards-two { display: grid; grid-template-rows: 1fr 1fr; gap: 0; padding: 0; }
.consent { padding: 10mm 13mm; display: grid; align-content: start; gap: 0.45rem; }
.consent + .consent { border-top: 1px dashed var(--ink-3); }
.consent h2 { font-size: 1.4rem; }
.consent .wb-fields { margin: 0.3rem 0 0; }
.consent__q { margin-top: 0.3rem; }
.consent .wb-ticks { margin: 0; }
.wb-ticks--row { display: flex; flex-wrap: wrap; gap: 0 1.6rem; }
.consent__sign { grid-column: 1 / -1; }
.consent__small { font-size: 0.8rem; color: var(--ink-3); }
.cards-eight { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); padding: 0; }
.addr { display: flex; align-items: center; gap: 5mm; padding: 6mm 7mm; border: 0.5px dashed var(--rule); }
.addr img { flex: none; width: 30mm; height: 30mm; }
.addr__url { font-weight: 700; font-size: 0.86rem; margin: 0.2rem 0; white-space: nowrap; }
.addr p:last-child { font-size: 0.85rem; color: var(--ink-2); }

/* screen only: A4 prints at about 794 px, and two across its twelve graphs would run off the sheet (qag-2eowf) */
@media screen and (max-width: 900px) { .wb-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 640px) {
  .cards-two, .cards-eight { display: block; }
  .addr img { width: 24mm; height: 24mm; }
  /* the address whole, never split mid-word: beside the code where it fits, under it where it doesn't */
  .addr { flex-wrap: wrap; }
  .addr > div { flex: 1 1 12rem; min-width: min-content; }
  /* each stage its share of the strip, but never narrower than its name */
  .wb-strip span { min-width: min-content; }
  .wb-page { min-height: 0; padding: 1.1rem 0.8rem; font-size: 0.9rem; }
  .wb-sheets { padding-inline: 0; gap: 0.8rem; }
  .wb-grid2, .wb-fields, .wb-one .wb-fields, .wb-steps { grid-template-columns: minmax(0, 1fr); }
  .wb-panels { grid-template-columns: minmax(0, 1fr); }
  .wb-table { font-size: 0.8rem; }
  .wb-table th, .wb-table td { padding: 0.25rem 0.2rem; }
  .wb-strip small { display: none; }
  .wb-table--level th:last-child, .wb-table--level td:last-child { display: none; }
}
/* the hormones table's five columns on the narrowest phones: its long words hyphenated, as a book's would be,
   and a touch smaller at 320, where it needs 290 px of the 294 there */
@media (max-width: 400px) { .wb-table--hormones { -webkit-hyphens: auto; hyphens: auto; } }
@media (max-width: 340px) { .wb-table--hormones { font-size: 0.75rem; } }

@media print {
  @page { size: A4; margin: 0; }
  body.sap-wb { background: #fff; }
  .sap-wb .site-header, .sap-wb .site-footer, .sap-wb .skip, .wb-controls { display: none !important; }
  .wb-sheets { display: block; padding: 0; }
  .wb-page { width: 210mm; min-height: 0; height: 297mm; overflow: hidden; padding: 12mm 12mm 11mm; box-shadow: none; background: #fff; font-size: 10.5pt; break-after: page; }
  .wb-page:last-child { break-after: auto; }
  .wb-page.cards-two, .wb-page.cards-eight { padding: 0; }
  .wb-table { font-size: 8.6pt; }
  .wb-table thead th { font-size: 7.8pt; }
  .wb-table tbody th small, .wb-table td.wb-target, .wb-strip span, .wb-levels small { font-size: 7.6pt; }
  .wb-table--trend { font-size: 8pt; }
  .wb-talk { display: none; }
  .wb-one .wb-sub, .wb-one .wb-what { font-size: 8.4pt; }
  .wb-one { padding-block: 10mm; }
  .wb-one > * + *, .wb-step > * + * { margin-top: 0.3rem; }
  .wb-table--step th, .wb-table--step td { padding-block: 0.2rem; }
  .wb-one .wb-line { min-height: 1.6rem; }
  .wb-steps { gap: 0.6rem 0.8rem; }
}