/* The planting calendar (/tools/planting-calendar). Started from the approved mockup rules (docs/design/grow-calendar/grow.css and grow2.css: the pc-* and
   gc-* classes), on top of the shipped tools.css, data.css and hub.css. What the mockup drew as links are real buttons here, so a few rules reset
   button chrome. Everything is under .gc-page or a gc-/pc- class, so no other page is touched. */

/* ── Mockup rules (grow.css) ── */
.pc-mode { display: inline-flex; border: 1px solid var(--border, #d9d6cf); border-radius: 999px; padding: 3px; background: #fff; }
.pc-mode button { padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--text-secondary, #43514a); background: none; border: 0; white-space: nowrap; display: inline-flex; gap: .4rem; align-items: center; cursor: pointer; }
.pc-mode button[aria-pressed="true"] { background: #16281d; color: #fff; }
.pc-mode button:focus-visible { outline: 2px solid #2f6b3a; outline-offset: 2px; }
.pc-frost { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0 .5rem; }
.pc-fig { background: #fff; border: 1px solid var(--border, #e6e4df); border-left: 4px solid var(--cc-green, #2f6b3a); border-radius: 10px; padding: .85rem 1rem; }
.pc-fig.fall { border-left-color: #eb6834; }
.pc-fig.zone { border-left-color: #7d8782; }
.pc-eb { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #56665e; }
.pc-big { font-size: 26px; font-weight: 700; color: #16281d; line-height: 1.15; margin: .2rem 0; white-space: nowrap; }
.pc-sub { font-size: 13px; color: #43514a; }
.pc-src { font-size: 13px; color: #56665e; margin: .25rem 0 1rem; }
.pc-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: 13px; color: #43514a; margin: .5rem 0 .75rem; }
.pc-legend span { display: inline-flex; align-items: center; gap: .4rem; }
.pc-sw { width: 22px; height: 10px; border-radius: 3px; display: inline-block; }
.s-in { background: #2a78d6; } .s-tr { background: #2f8f4e; } .s-ds { background: #c98a1a; } .s-any { background: repeating-linear-gradient(90deg,#2f8f4e 0 6px,#c98a1a 6px 12px); } .s-fa { background: #8a5cc2; } .s-hv { background: repeating-linear-gradient(45deg,#eb6834 0 4px,#f3a07c 4px 8px); }
.gc-sw-frost { border-left: 2px dashed #16281d; height: 14px; display: inline-block; opacity: .6; }
.gc-sw-today { background: #c98a1a; width: 3px; height: 14px; display: inline-block; }
.gc-sw-tick { background: #7a4f0a; width: 3px; height: 14px; display: inline-block; border-radius: 1px; }
.pc-cal { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid #e6e4df; border-radius: 10px; overflow: hidden; }
.pc-cal th { font-size: 12px; font-weight: 600; color: #56665e; text-align: left; padding: 8px 6px; border-bottom: 1px solid #e6e4df; background: #faf9f6; }
.pc-cal td { padding: 0; border-bottom: 1px solid #f0eee9; vertical-align: middle; }
.pc-cal tr.gc-last td { border-bottom: 0; }
.pc-cal th.gc-monthhead { padding: 0; }
.gc-monthhead > div { display: grid; grid-template-columns: repeat(12, 1fr); }
.gc-monthhead .pc-m { text-align: center; font-size: 12px; padding: 8px 0; }
.pc-track { position: relative; height: 46px; background: linear-gradient(90deg, transparent 0 calc(100% - 1px), #ebe8e1 calc(100% - 1px) 100%) 0 0/calc(100%/12) 100% repeat-x; }
.pc-bar { position: absolute; height: 10px; border-radius: 3px; }
.pc-bar.r1 { top: 9px; } .pc-bar.r2 { top: 22px; } .pc-bar.r3 { top: 35px; }
.pc-tick { position: absolute; top: 20px; width: 3px; height: 14px; background: #7a4f0a; border-radius: 1px; }
.pc-frostline { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed #16281d; opacity: .55; }
.pc-when { font-size: 13px; color: #43514a; padding: 9px 10px !important; width: 250px; }
.pc-when b { color: #16281d; }
.pc-pitch { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.25rem; background: #f4f8f2; border: 1px solid #d6e6d2; border-radius: 10px; padding: .9rem 1.1rem; margin: 1.25rem 0; }
.pc-pitch p { margin: 0; font-size: 15px; color: #16281d; max-width: 640px; }
.pc-pitch b { color: #16281d; }
.pc-ms { display: none; }

/* ── Mockup rules (grow2.css) ── */
.gc-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2rem; align-items: center; background: linear-gradient(135deg, #eef5ea 0%, #f7f3e8 100%); border-radius: 18px; padding: 2rem 2.25rem; margin: .5rem 0 1.25rem; overflow: hidden; }
.gc-hero h1 { font-size: 40px; line-height: 1.08; margin: .35rem 0 .6rem; color: #16281d; text-align: left; }
.gc-hero .tt-lede { text-align: left; margin: 0 0 1.1rem; max-width: 34rem; }
.gc-hero .tt-eyebrow { text-align: left; }
.gc-hero-fig { margin: 0; position: relative; }
.gc-hero-img { border-radius: 14px; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; box-shadow: 0 10px 30px rgba(22, 40, 29, .18); display: block; }
.gc-hero-fig figcaption { position: absolute; right: 8px; bottom: 6px; font-size: 10.5px; color: #fff; background: rgba(0,0,0,.45); padding: 1px 7px; border-radius: 6px; }
.gc-zip { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; background: #fff; border-radius: 14px; padding: .75rem; box-shadow: 0 4px 16px rgba(22, 40, 29, .08); }
.gc-zip input { max-width: 150px; font-size: 18px; font-weight: 600; letter-spacing: .04em; }
.gc-ribbon { position: relative; height: 40px; border-radius: 10px; margin: .25rem 0 .4rem; }
.gc-ribbon .lbl { position: absolute; top: 50%; transform: translate(-50%, -50%); font-size: 12px; font-weight: 700; color: #16281d; background: rgba(255,255,255,.85); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.gc-ribbon .mk { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #16281d; opacity: .6; }
.gc-ribbon .today { position: absolute; top: -6px; bottom: -6px; width: 3px; background: #c98a1a; border-radius: 2px; }
.gc-months { display: grid; grid-template-columns: repeat(12, 1fr); font-size: 11.5px; color: #56665e; text-align: center; margin-bottom: 1rem; }
.gc-next { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .9rem; align-items: center; background: #fff8ea; border: 1px solid #f0dcb0; border-left: 4px solid #c98a1a; border-radius: 12px; padding: .8rem 1rem; margin: 0 0 1.25rem; }
.gc-next[hidden] { display: none; }
.gc-next b { color: #16281d; }
.gc-bar { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; margin: .5rem 0 .6rem; }
.gc-bar h2 { margin: 0; font-size: 22px; color: #16281d; }
.gc-bar .gc-saved { font-size: 13px; color: #2f6b3a; font-weight: 600; display: inline-flex; gap: .35rem; align-items: center; }
.gc-bar .gc-saved.off { color: #8a5a12; }
.gc-bar .gc-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.gc-bar select { width: auto; font-size: 14px; }
.gc-cal td.gc-crop, .gc-cal th.gc-crop { width: 250px; padding: 8px 8px !important; }
.gc-cropcell { display: grid; grid-template-columns: 16px 44px minmax(0, 1fr); gap: .55rem; align-items: center; }
.gc-name { font-weight: 700; color: #16281d; display: block; }
.gc-cropcell .pc-kind { display: block; font-size: 12px; color: #56665e; }
.gc-grip { color: #a3aca7; cursor: grab; font-size: 16px; background: none; border: 0; padding: 0; width: 16px; line-height: 1; }
.gc-grip:hover, .gc-grip:focus-visible { color: #2f6b3a; }
.gc-thumb { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.gc-x { width: 44px; text-align: center; }
.gc-x button { color: #8a948f; font-size: 18px; background: none; border: 0; display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; }
.gc-x button:hover, .gc-x button:focus-visible { background: #f3e3dd; color: #b8451a; }
.gc-cal .pc-track { height: 54px; }
.gc-cal .pc-bar.r1 { top: 11px; } .gc-cal .pc-bar.r2 { top: 24px; } .gc-cal .pc-bar.r3 { top: 37px; }
.gc-cal .pc-tick { top: 21px; }
.gc-today { position: absolute; top: 0; bottom: 0; width: 2px; background: #c98a1a; }
.gc-undo { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #16281d; color: #fff; padding: .7rem 1rem; border-radius: 10px; font-size: 14px; display: flex; gap: 1rem; align-items: center; box-shadow: 0 8px 24px rgba(0,0,0,.25); z-index: 50; width: max-content; max-width: calc(100% - 32px); }
.gc-undo[hidden] { display: none; }
.gc-undo button { color: #f3c46b; font-weight: 700; background: none; border: 0; padding: 0; display: inline-flex; gap: .35rem; align-items: center; cursor: pointer; }

/* picker: a native <dialog>, so the browser traps focus, Esc closes it and the page behind is inert */
.gc-sheet { width: min(980px, calc(100% - 24px)); max-height: calc(100vh - 120px); border: 0; background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.3); padding: 1.1rem 1.25rem 0; margin-top: 100px; overflow: auto; }
.gc-sheet::backdrop { background: rgba(22, 40, 29, .45); }
.gc-sheet h2 { font-size: 22px; margin: 0 0 .75rem; color: #16281d; display: flex; justify-content: space-between; align-items: center; gap: .75rem; }
.gc-sheettools { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; }
.gc-sheettools .th-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.gc-sheettools .th-chip { cursor: pointer; }
.gc-sheettools .th-chip[aria-pressed="true"] { background: #16281d; color: #fff; border-color: #16281d; }
.gc-sheettools input { max-width: 240px; }
.gc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .8rem; margin: .9rem 0; }
.gc-card { position: relative; border: 1px solid #e6e4df; border-radius: 12px; overflow: hidden; background: #fff; padding: 0; text-align: left; cursor: pointer; display: block; width: 100%; }
.gc-card[hidden] { display: none; }
.gc-cardtext { display: block; padding: .5rem .6rem .6rem; }
.gc-card b { display: block; color: #16281d; font-size: 14.5px; }
.gc-card [data-sub] { font-size: 12px; color: #56665e; }
.gc-card[aria-pressed="true"] { border: 2px solid #2f6b3a; }
.gc-card:focus-visible { outline: 2px solid #2f6b3a; outline-offset: 2px; }
.gc-check { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.95); display: flex; align-items: center; justify-content: center; font-size: 15px; color: #8a948f; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.gc-card[aria-pressed="true"] .gc-check { background: #2f6b3a; color: #fff; }
.gc-card.in { opacity: .55; cursor: default; }
.gc-sheetfoot { position: sticky; bottom: 0; z-index: 3; background: #fff; border-top: 1px solid #e6e4df; display: flex; justify-content: space-between; align-items: center; padding: .8rem 0; gap: .75rem; flex-wrap: wrap; }

/* ── What the live page adds ── */
/* Crop pictures: the photo pipeline (phase G6) and the stage drawings (G4) are not merged yet, so each crop shows its initials on its type's colour. */
.gc-ini { display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; color: #fff; background: #2f6b3a; }
.gc-thumb.gc-ini { width: 44px; height: 44px; }
.gc-ini-lg { width: 52px; height: 52px; border-radius: 50%; font-size: 17px; }
.gc-tile { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4/3; font-size: 34px; font-weight: 700; color: rgba(255,255,255,.95); }
.g-vegetable { background: linear-gradient(135deg, #3f8f4a, #2f6b3a); }
.g-herb { background: linear-gradient(135deg, #4fa08a, #2c7563); }
.g-fruit { background: linear-gradient(135deg, #d0574a, #a83a32); }
.g-flower { background: linear-gradient(135deg, #e0864a, #c25a6e); }
.g-cover-crop { background: linear-gradient(135deg, #8a6cc2, #6a4ea0); }
.g-frost { background: linear-gradient(135deg, #e3a43a, #c98a1a); }
.gc-msg { background: #fff; border: 1px solid #e6e4df; border-left: 4px solid #b8451a; border-radius: 10px; padding: .8rem 1rem; color: #16281d; margin: 0 0 1rem; }
.gc-loading { border-left-color: #2f6b3a; }
.gc-far { font-size: 13px; color: #6b4a12; background: #fff8ea; border: 1px solid #f0dcb0; border-radius: 8px; padding: .45rem .65rem; margin: -.5rem 0 1rem; }
.gc-notice { grid-template-columns: auto minmax(0, 1fr); }
.gc-empty { background: #fff; border: 1px dashed #d9d6cf; border-radius: 10px; padding: 1rem; text-align: center; color: #43514a; }
.gc-cal tr.gc-dragging { opacity: .5; }
.gc-cal tr.gc-drop td { box-shadow: inset 0 2px 0 #2f6b3a; }
.gc-menu { position: absolute; z-index: 40; background: #fff; border: 1px solid #e6e4df; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: .3rem; display: grid; min-width: 170px; }
.gc-menu[hidden] { display: none; }
.gc-menu button { background: none; border: 0; text-align: left; padding: .45rem .65rem; border-radius: 6px; font-size: 14px; display: flex; gap: .5rem; align-items: center; color: #16281d; cursor: pointer; }
.gc-menu button:hover, .gc-menu button:focus-visible { background: #eef5ea; }
.gc-how { max-width: 760px; margin: 2rem auto 0; }
.gc-how h2 { font-size: 22px; color: #16281d; }
.gc-how p { color: #43514a; line-height: 1.6; }
.gc-how .gc-attrib { font-size: 12.5px; color: #6b766f; }
.gc-market-note { margin: .25rem 0 .5rem; }

@media (max-width: 760px) {
  .pc-frost { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-big { font-size: 21px; }
  .pc-when { display: none; }
  .pc-ml { display: none; } .pc-ms { display: inline; }
  .gc-hero { grid-template-columns: 1fr; padding: 1.25rem; } .gc-hero h1 { font-size: 30px; } .gc-hero-img { aspect-ratio: 16/9; }
  .gc-cal td.gc-crop, .gc-cal th.gc-crop { width: 128px; }
  .gc-cropcell { grid-template-columns: 14px 34px minmax(0,1fr); gap: .35rem; }
  .gc-thumb, .gc-thumb.gc-ini { width: 34px; height: 34px; font-size: 12px; }
  .gc-cropcell .pc-kind { display: none; }
  .gc-name { font-size: 14px; }
  .gc-next { grid-template-columns: auto minmax(0,1fr); }
  .gc-sheet { margin-top: 70px; max-height: calc(100vh - 90px); }
  .gc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gc-ribbon .lbl { font-size: 10.5px; padding: 1px 5px; }
  .gc-x { width: 34px; }
  .dx-ctabtn { justify-content: center; white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .gc-page *, .gc-sheet, .gc-undo { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Print: one page, the frost summary and the visitor's table. */
@media print {
  @page { size: letter landscape; margin: 10mm; }
  header, footer, nav, .hb-crumbs, .gc-hero, .pc-pitch, .gc-how, .gc-undo, .gc-actions, .gc-sheet, .gc-menu, .gc-next, .gc-grip, .gc-x, .gc-far, .gc-saved, .gc-msg, noscript { display: none !important; }
  body { background: #fff !important; }
  .tt-wrap { max-width: none; padding: 0; }
  .pc-frost { gap: .4rem; margin: 0 0 .3rem; } .pc-fig { padding: .35rem .5rem; } .pc-big { font-size: 18px; } .pc-sub { font-size: 10px; }
  .gc-ribbon { height: 22px; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .gc-ribbon .lbl { font-size: 9px; }
  .gc-months { margin-bottom: .3rem; font-size: 9px; } .pc-src { font-size: 9px; margin: 0 0 .3rem; }
  .gc-bar h2 { font-size: 15px; } .pc-legend { font-size: 9px; margin: .2rem 0; }
  .pc-cal, .pc-cal * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .gc-cal .pc-track { height: 30px; } .gc-cal .pc-bar { height: 6px; } .gc-cal .pc-bar.r1 { top: 5px; } .gc-cal .pc-bar.r2 { top: 12px; } .gc-cal .pc-bar.r3 { top: 19px; }
  .gc-cal .pc-tick { top: 10px; height: 10px; }
  .gc-cal td.gc-crop { padding: 2px 6px !important; } .gc-thumb, .gc-thumb.gc-ini { width: 22px; height: 22px; font-size: 9px; box-shadow: none; }
  .gc-cropcell { grid-template-columns: 22px minmax(0,1fr); } .gc-name { font-size: 11px; } .gc-cropcell .pc-kind { font-size: 9px; }
  .pc-when { display: table-cell !important; font-size: 10px; padding: 2px 6px !important; }
  .pc-cal tr { break-inside: avoid; }
}

/* ── PortalButton (the Portal's one button) on this page. Each is a stock .btn in a tooltip host; .gc-bare strips the stock look where the
   approved mockup draws a plain control (the mode switch, the grip, the ×, the picker cards, the chips, the menu, Undo). ── */
.gc-page .btn.gc-bare { background: none; border: 0; box-shadow: none; padding: 0; min-height: 0; color: inherit; font: inherit; line-height: 1.2; border-radius: 0; text-align: left; gap: .4rem; }
.gc-page .btn.gc-bare:focus-visible { outline: 2px solid #2f6b3a; outline-offset: 2px; }
.pc-mode .cc-tip-host { display: inline-flex; }
.pc-mode .btn.gc-modebtn { padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--text-secondary, #43514a); white-space: nowrap; }
.pc-mode .btn.gc-modebtn[aria-pressed="true"] { background: #16281d; color: #fff; }
.gc-page .btn.gc-grip { color: #a3aca7; cursor: grab; font-size: 16px; width: 16px; justify-content: center; }
.gc-page .btn.gc-grip:hover { color: #2f6b3a; }
.gc-page .btn.gc-xbtn { color: #8a948f; font-size: 18px; width: 30px; height: 30px; justify-content: center; border-radius: 50%; }
.gc-page .btn.gc-xbtn:hover, .gc-page .btn.gc-xbtn:focus-visible { background: #f3e3dd; color: #b8451a; }
.gc-page .btn.gc-undobtn { color: #f3c46b; font-weight: 700; }
.gc-menu .cc-tip-host { display: block; }
.gc-menu .btn.gc-bare { width: 100%; padding: .45rem .65rem; border-radius: 6px; font-size: 14px; color: #16281d; }
.gc-menu .btn.gc-bare:hover, .gc-menu .btn.gc-bare:focus-visible { background: #eef5ea; }
.gc-menu .cc-tip { display: none; }
.gc-sheettools .btn.gc-chip { border: 1px solid #d9d6cf; border-radius: 999px; padding: 8px 14px; font-weight: 600; font-size: 14.5px; background: #fff; color: #16281d; }
.gc-sheettools .btn.gc-chip i { display: none; }
.gc-sheettools .btn.gc-chip[aria-pressed="true"] { background: #16281d; border-color: #16281d; color: #fff; }
.gc-grid > .gc-cardcell { display: flex; }
.gc-grid > .gc-cardcell[hidden] { display: none; }
.gc-grid .cc-tip { display: none; }
.gc-page .btn.gc-card { position: relative; display: block; width: 100%; border: 1px solid #e6e4df; border-radius: 12px; overflow: hidden; background: #fff; }
.gc-page .btn.gc-card[aria-pressed="true"] { border: 2px solid #2f6b3a; }
.gc-page .btn.gc-card > i.bi { position: absolute; top: 8px; right: 8px; z-index: 1; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.95); display: flex; align-items: center; justify-content: center; font-size: 15px; color: #8a948f; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.gc-page .btn.gc-card[aria-pressed="true"] > i.bi { background: #2f6b3a; color: #fff; }
.gc-page .btn.gc-card.in { opacity: .55; cursor: default; }

/* Crop pictures: the photo when the crop has one (phase G6), else its family's stage-5 drawing (phase G4) on the family colour (grow.css cg-fam-*). */
.gc-thumb, .gc-nowimg { object-fit: cover; background: radial-gradient(circle at 50% 40%, #fff 0%, color-mix(in srgb, var(--cg-fam, #2f6b3a) 28%, #fff) 100%); }
img.gc-thumb { width: 44px; height: 44px; border-radius: 50%; }
.gc-nowimg { width: 52px; height: 52px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
.gc-tile { display: block; width: 100%; aspect-ratio: 4/3; background: radial-gradient(circle at 50% 45%, #fff 0%, color-mix(in srgb, var(--cg-fam, #2f6b3a) 30%, #fff) 100%); }
.gc-tile img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gc-x .cc-tip-host, .gc-cropcell .cc-tip-host { display: inline-flex; }
@media (max-width: 760px) { img.gc-thumb { width: 34px; height: 34px; } }
@media print { img.gc-thumb { width: 22px; height: 22px; } }

/* Breadcrumb links in the link colour, as the approved mockups draw them (the calendar and the crop guides). */
.gc-page .hb-crumbs a, .cg-page .hb-crumbs a { color: var(--accent-strong, #b8501f); text-decoration: none; }
.gc-page .hb-crumbs a:hover, .cg-page .hb-crumbs a:hover { text-decoration: underline; }

/* A crop guide's "Your dates" block. */
.gc-yourdates .gc-zip-small { box-shadow: none; padding: 0; margin: .5rem 0 .75rem; background: none; }
.gc-yourdates .gc-zip-small input { max-width: 140px; font-size: 16px; }
.gc-yourdates-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.gc-cropdates .gc-cd-when { font-size: 15px; color: #16281d; margin: .25rem 0; }
.gc-cropdates .gc-cd-now { font-size: 14px; color: #43514a; margin: .25rem 0 .5rem; }
.gc-cropdates .gc-cd-now .pc-eb { margin-right: .35rem; }
.gc-cropdates .gc-cd-note { font-size: 13px; color: #43514a; }
.gc-cd-track { background: #fff; border: 1px solid #e6e4df; border-radius: 10px; padding: 4px 8px 6px; margin: .5rem 0; }
.gc-cd-months { display: grid; grid-template-columns: repeat(12, 1fr); font-size: 11px; color: #56665e; text-align: center; }
.gc-cd-track .pc-track { height: 50px; }

/* How the dates are worked out: a heading with the tool pages' round info button (.tt-result-head), the section closed until #gc-how is the :target (.tt-sheet-sec). */
.gc-how-head { max-width: 760px; margin: 2rem auto 0; justify-content: flex-start; }
.gc-how-head h2 { font-size: 22px; color: #16281d; }
.gc-how.tt-sheet-sec { margin-top: .6rem; }
/* Share: one button, the tool pages' panel under it (closed until #share is the :target). */
.gc-sharerow { display: flex; justify-content: center; margin: 1.2rem 0 0; }
@media print { .gc-how-head, .gc-sharerow, .tt-sheet-slot { display: none !important; } }