/* ==========================================================================
   Crop guide — built on the same tokens as the rest of CS AgriCalc.
   Nothing here introduces a new colour or a new radius.
   ========================================================================== */

/* entry point on Home */
.gd-teaser{display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  background:var(--white);border:1px solid var(--line);border-radius:15px;
  box-shadow:var(--shadow);padding:13px 15px;margin-top:9px;cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease}
.gd-teaser:hover{border-color:#CBD9CE}
.gd-teaser:active{transform:scale(.994);box-shadow:0 1px 2px rgba(24,38,29,.07)}

/* section labels on the "other things" page */
.msec{margin:22px 3px 2px;font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;
  font-weight:800;color:var(--green-700);opacity:.72}
.msec:first-of-type{margin-top:16px}
.gd-teaser__art{flex:none;width:46px;height:46px;border-radius:14px;background:var(--green-050);
  display:grid;place-items:center;color:var(--green-700);box-shadow:inset 0 0 0 1px rgba(24,38,29,.03)}
.gd-teaser--talk .gd-teaser__art{background:#E5F0E8;color:#1E6B45}
.gd-teaser--learn .gd-teaser__art{background:#FBF0D5;color:#8A6A16}
.gd-teaser--book .gd-teaser__art{background:#E7EEF7;color:#2A4F86}
.gd-teaser--app .gd-teaser__art{background:#F1ECF7;color:#5B4180}
.gd-teaser__body{flex:1;min-width:0}
.gd-teaser__body b{display:block;font-size:15px;line-height:1.3}
.gd-teaser__body span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.35}
.gd-teaser__go{flex:none;color:#A9B5AC;font-size:18px;line-height:1}
.gd-teaser__txt{flex:1;min-width:0;display:block}
.gd-teaser__txt b{display:block;font-size:15px;line-height:1.3}
.gd-teaser__txt span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;line-height:1.35}

/* segmented control */
.gd-seg{display:flex;gap:4px;background:var(--white);border:1px solid var(--line);
  border-radius:12px;padding:4px;margin-bottom:16px}
.gd-seg button{flex:1;appearance:none;border:0;background:transparent;color:var(--muted);
  font:600 13px/1 inherit;padding:10px 6px;border-radius:9px;cursor:pointer}
.gd-seg button.is-on{background:var(--green-050);color:var(--green-900)}

/* crop chips */
.gd-crops{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}
.gd-crops button{appearance:none;border:1px solid var(--line);background:var(--white);
  border-radius:12px;padding:10px 3px;cursor:pointer;color:var(--muted);
  font:600 12px/1.2 inherit;text-align:center}
.gd-crops button b{display:block;font-size:12.5px;color:inherit}
.gd-crops button span{display:block;font-size:10.5px;margin-top:2px;opacity:.8}
.gd-crops button.is-on{border-color:var(--green-700);background:var(--green-050);color:var(--green-900);
  box-shadow:inset 0 0 0 1px var(--green-700)}

/* note strip */
.gd-note{background:var(--amber-soft);border-radius:12px;padding:11px 13px;font-size:12.5px;
  line-height:1.5;color:#6b4a12;margin-bottom:14px}
.gd-note b{color:#4b3208}

/* stage card */
.gd-stage{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);margin-bottom:12px;overflow:hidden}
.gd-stage__head{display:flex;gap:11px;align-items:flex-start;padding:13px 14px;border-bottom:1px solid var(--line)}
.gd-code{flex:none;min-width:42px;text-align:center;background:var(--green-900);color:var(--cream);
  border-radius:9px;padding:7px 6px;font:700 12.5px/1 inherit;letter-spacing:.02em}
.gd-stage__head h3{margin:0;font-size:15px;line-height:1.3}
.gd-stage__head p{margin:1px 0 0;font-size:12.5px;color:var(--muted);line-height:1.35}
.gd-stage__body{padding:12px 14px 14px}
.gd-stage__body ul{margin:0 0 11px;padding-left:17px}
.gd-stage__body li{font-size:13.5px;line-height:1.45;color:#3a3a33;margin-bottom:4px}
.gd-stage__body li::marker{color:var(--green-700)}
.gd-job{background:var(--green-050);border-radius:10px;padding:9px 11px;font-size:13px;line-height:1.45;
  color:var(--green-900);margin-bottom:8px}
.gd-job b{font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;display:block;margin-bottom:2px;
  color:var(--green-700)}
.gd-why{font-size:12.5px;line-height:1.45;color:var(--muted);margin-bottom:12px}
.gd-why b{color:#8a3a2e;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;margin-right:6px}

/* photo slot */
.gd-shot{display:flex;gap:10px;align-items:center;border:1px dashed #D8D2C3;border-radius:10px;
  padding:9px;margin-bottom:11px;background:#FCFAF4}
.gd-shot__frame{flex:none;width:56px;height:56px;border-radius:8px;background:var(--green-050);
  display:grid;place-items:center;color:#9BA795}
.gd-shot p{margin:0;font-size:11px;line-height:1.4;color:var(--muted)}
.gd-shot p b{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:#5d6b5b;margin-bottom:1px}

/* season phases */
.gd-phase{display:grid;grid-template-columns:70px 1fr;gap:12px;padding:13px 14px;border-bottom:1px solid var(--line)}
.gd-phase:last-child{border-bottom:0}
.gd-phase__when{font-size:11.5px;font-weight:700;color:var(--muted);line-height:1.35;padding-top:2px}
.gd-phase h3{margin:0 0 3px;font-size:14.5px;line-height:1.3}
.gd-phase p{margin:0;font-size:13px;line-height:1.45;color:#3a3a33}
.gd-phase__log{font-size:11.5px;color:var(--muted);margin-top:4px;line-height:1.4}
.gd-now{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--amber-soft);color:#6b4a12;border-radius:20px;padding:2px 7px;margin-left:6px;vertical-align:2px}

/* stages recorded, shown inside the Book */
.gd-book{margin-bottom:14px}
.gd-book__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:7px}
.gd-book__head h2{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.gd-book__head button{appearance:none;border:0;background:transparent;color:var(--green-700);
  font:600 12px/1 inherit;cursor:pointer;padding:4px}
.gd-book__row{display:flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--line);
  border-radius:11px;padding:9px 11px;margin-bottom:6px}
.gd-book__code{flex:none;min-width:36px;text-align:center;background:var(--green-050);color:var(--green-900);
  border-radius:7px;padding:5px 4px;font:700 11px/1 inherit}
.gd-book__t{flex:1;min-width:0;font-size:13px;line-height:1.3}
.gd-book__t span{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
.gd-book__d{flex:none;font-size:11.5px;color:var(--muted)}

@media (max-width:359px){
  .gd-crops{grid-template-columns:repeat(2,1fr)}
  .gd-phase{grid-template-columns:58px 1fr}
}

/* real photograph (figure) */
.gd-photo{margin:0 0 11px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#F1EEE4}
.gd-photo img{display:block;width:100%;height:auto;background:#EFEBDE}
.gd-photo figcaption{padding:8px 10px;background:var(--white);font-size:11px;line-height:1.4;color:var(--muted)}
.gd-photo figcaption span{display:block;color:#3a3a33}
.gd-photo figcaption em{display:block;font-style:normal;font-size:10.5px;color:#8a8a80;margin-top:2px}

/* remove a wrongly written stage */
.gd-book__del{flex:none;appearance:none;border:0;background:transparent;color:#9a9a90;
  font:400 18px/1 inherit;padding:2px 6px;cursor:pointer;border-radius:6px}
.gd-book__del:hover,.gd-book__del:focus-visible{color:#8a3a2e;background:#F7E9E5}

/* keyboard focus, for anyone using a keyboard or switch */
.gd-seg button:focus-visible,.gd-crops button:focus-visible,.gd-teaser:focus-visible,
.gd-book__head button:focus-visible{outline:2px solid var(--green-700);outline-offset:2px}

/* ==========================================================================
   Print — A4 booklet. This is what CS Academic Press would produce.
   Hides the app chrome, keeps the cards whole across page breaks.
   ========================================================================== */
@media print {
  @page { size: A4; margin: 13mm 13mm 15mm; }

  html, body { background: #fff !important; color: #000 !important; }
  body { padding: 0 !important; font-size: 10.5pt; line-height: 1.42; }

  header.top, .tabs, nav.tabs, .gd-seg, .hint, footer,
  .gd-teaser, .toast, #bookStages, .gd-book, .gd-crops, .gd-shot,
  #view-guide .page-row .btn { display: none !important; }

  .wrap, main { max-width: none !important; margin: 0 !important; padding: 0 !important; }
  .view[hidden] { display: none !important; }
  #view-guide { display: block !important; }

  #view-guide .page-row { display: block !important; }
  #view-guide .page-row h1 { font-size: 19pt; margin: 0 0 2mm; }
  #view-guide .page-row .page__sub { font-size: 9.5pt; color: #444; margin: 0 0 5mm; }

  .gd-note { background: #f4f1e6 !important; border: 1px solid #ccc; color: #222 !important;
             padding: 3mm; font-size: 9pt; break-inside: avoid; }

  .gd-stage { border: 1px solid #b9b9b0 !important; box-shadow: none !important;
              border-radius: 3mm !important; margin: 0 0 5mm !important;
              break-inside: avoid; page-break-inside: avoid; }

  .gd-stage__head { border-bottom: 1px solid #ddd !important; padding: 3mm 4mm !important; }
  .gd-stage__head h3 { font-size: 11.5pt; }
  .gd-stage__head p { font-size: 9pt; color: #333 !important; }

  .gd-code { background: #1f3d2b !important; color: #fff !important; border-radius: 2mm !important;
             -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .gd-stage__body { padding: 3mm 4mm 4mm !important; }
  .gd-stage__body li { font-size: 9.5pt; color: #000 !important; margin-bottom: 1.2mm; }
  .gd-job { background: #eef2ec !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .gd-job, .gd-why { font-size: 9pt; }
  .gd-why { color: #333 !important; margin-bottom: 0 !important; }
  .gd-why b { color: #6b2b20 !important; }

  .gd-photo { border: 1px solid #ccc !important; border-radius: 2mm !important;
              break-inside: avoid; page-break-inside: avoid; }
  .gd-photo img { max-height: 68mm; width: auto; max-width: 100%; margin: 0 auto; }
  .gd-photo figcaption { font-size: 8pt; background: #fff !important; color: #333 !important; }
  .gd-photo figcaption em { color: #666 !important; }

  .gd-phase { break-inside: avoid; }
  .gd-phase h3 { font-size: 10.5pt; }
  .gd-phase p, .gd-phase__log { font-size: 9pt; }
  .gd-now { border: 1px solid #999; background: #fff !important; color: #000 !important; }
}

/* The app's statement printer hides everything except #report. When the guide
   is what is on screen, main#app has to come back — with higher specificity
   than `body > *:not(#report)`. */
@media print {
  html body:not(.print-doc) > main#app:not(#report) { display: block !important; }
  html body > main#app .card { box-shadow: none; }
}

/* long translations must not break the segmented control */
.gd-seg__b{font-size:12.5px;line-height:1.15;padding:11px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* provenance on every stage image: a photograph, or a drawing, never both at once */
.gd-photo{position:relative}
.gd-photo__tag{
  position:absolute;top:8px;left:8px;z-index:2;padding:3px 8px;border-radius:99px;
  background:rgba(11,61,46,.82);color:#F7F3E8;font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;font-weight:700
}
.gd-photo__tag--drawing{background:rgba(247,243,232,.92);color:#0B3D2E;border:1px solid rgba(11,61,46,.18)}
.gd-photo--drawing{background:#FBF8EE}
.gd-photo--drawing img{padding:6px}

/* ---------- photograph provenance ---------- */
.gd-photo__cap{display:block;color:#3a3a33}
.gd-photo__prov{display:flex;flex-wrap:wrap;align-items:center;gap:5px 8px;margin-top:7px;padding-top:7px;border-top:1px dashed #E6E1D2}
.gd-photo__seal{display:inline-flex;align-items:center;gap:4px;background:#EAF3EC;color:#1F5C43;border:1px solid #CFE3D5;border-radius:999px;padding:2px 7px;font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.gd-photo__seal svg{width:9px;height:9px;fill:none;stroke:#1F5C43;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.gd-photo__prov .gd-credit{font-size:10.5px;color:#4A5A50;text-decoration:underline;text-underline-offset:2px;text-decoration-color:#C9D6CC}
.gd-photo__meta{flex-basis:100%;font-size:9.8px;color:#9AA79E;letter-spacing:.01em}

/* ---------- the source register ---------- */
.gd-src .card{padding:12px 13px}
.gd-src__lead{margin:0 0 10px;font-size:11.5px;line-height:1.55;color:#3F4E45}
.gd-src__lead b{color:#0E3B2E}
.gd-check{margin:0 0 12px;padding:0 0 0 18px}
.gd-check li{font-size:11px;line-height:1.5;color:#5C6B62;margin-bottom:5px}
.gd-check b{display:block;font-size:11px;color:#20402F}
.gd-check span{display:block}
.gd-reg__head{margin:12px 0 2px;font-family:var(--serif);font-size:.82rem;color:var(--ink)}
.gd-reg{list-style:none;margin:4px 0 12px;padding:0;border-top:1px solid #EFEBDD}
.gd-reg li{display:grid;grid-template-columns:1fr auto;gap:1px 8px;padding:7px 0;border-bottom:1px solid #F3F0E5}
.gd-reg b{font-size:11px;color:#20402F}
.gd-reg a{font-size:10px;color:#2A5F8A;text-decoration:none;text-align:right}
.gd-reg a:hover{text-decoration:underline}
.gd-reg span{grid-column:1/-1;font-size:9.5px;color:#98A29A}
.gd-src__more .pos li{font-size:11px}

/* ---------- crop fact file: names a student is asked for, and what attacks it ---------- */
.gd-fact{
  display:grid;grid-template-columns:104px 1fr;gap:12px;align-items:start;
  background:#fff;border:1px solid var(--line,#E3DCC9);border-radius:16px;padding:10px;margin:0 0 12px;
  box-shadow:0 1px 2px rgba(11,61,46,.05)
}
@media (min-width:560px){.gd-fact{grid-template-columns:150px 1fr;gap:14px;padding:12px}}
.gd-fact__media img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:11px;display:block;background:#EFEADC}
.gd-fact__body{min-width:0}
.gd-fact__eyebrow{display:block;font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:#9A8654;font-weight:700}
.gd-fact h3{margin:1px 0 0;font-family:var(--serif,Georgia,serif);font-size:1.06rem;color:#0B3D2E}
.gd-fact__sci{margin:2px 0 8px;font-size:.74rem;color:#6E7B70}
.gd-fact__dl{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;margin:0}
.gd-fact__dl dt{font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;color:#9AA69B;font-weight:700;padding-top:2px;white-space:nowrap}
.gd-fact__dl dd{margin:0;font-size:.79rem;color:#3B4A40;line-height:1.4}
.gd-fact__pests{margin-top:8px;display:flex;flex-direction:column;gap:4px}
.gd-fact__pests b{font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;color:#9A8654}
.gd-fact__pests span{display:flex;flex-wrap:wrap;gap:4px}
.gd-fact__pests i{
  font-style:normal;font-size:.68rem;padding:3px 7px;border-radius:99px;background:#F4EFE0;color:#6B5A2E;
  border:1px solid #E6DCC2
}
.gd-fact__credit{margin:8px 0 0;font-size:.62rem;color:#8A968B}
.gd-fact__credit a{color:#8A968B}