/* ==========================================================================
   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:12px;width:100%;text-align:left;
  background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:14px 16px;margin-top:12px;cursor:pointer}
.gd-teaser__art{flex:none;width:44px;height:44px;border-radius:12px;background:var(--green-050);
  display:grid;place-items:center;color:var(--green-700)}
.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:var(--green-700);font-size:18px;line-height:1}

/* 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;max-height:380px;object-fit:contain;background:#F1EEE4}
.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 > 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}