/* =========================================================================
   Flowland Seed Co.
   -------------------------------------------------------------------------
   Modern editorial. Three distinct surfaces — a dark ink header, a white
   content plane, a toned footer — so the page has structure you can see
   rather than one flat wash of cream. Botanical color survives as accent,
   not as the ground.

   The Tutorial Assets panel (panel.css) is deliberately a different world
   again: graphite and monospace. The shop is the fiction; the panel is the
   teaching layer, and a learner should never be in doubt which they are
   looking at.
   ========================================================================= */

:root {
  /* Surfaces, light to dark */
  --paper:        #ffffff;
  --paper-warm:   #faf8f4;
  --paper-deep:   #f2efe8;
  --kraft:        #ece7dc;

  /* Ink */
  --ink:          #14261c;
  --ink-mid:      #3f5648;
  --ink-soft:     #5c7266;
  --ink-faint:    #8b9a90;
  --hairline:     #e4e0d7;

  /* Accents */
  --green:        #1f6b43;
  --green-bright: #2f9160;
  --terracotta:   #c2542f;
  --gold:         #b08320;
  --sage:         #7f9a86;

  /* Type */
  --display: 'Fraunces', 'Hoefler Text', Georgia, serif;
  --body:    'Karla', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;

  /* Rhythm */
  --gutter:  clamp(1.25rem, 5vw, 4rem);
  --measure: 62ch;
  --radius:  10px;

  --shadow-sm: 0 1px 2px rgba(20, 38, 28, .06), 0 2px 8px -4px rgba(20, 38, 28, .1);
  --shadow-md: 0 2px 4px rgba(20, 38, 28, .05), 0 12px 28px -12px rgba(20, 38, 28, .22);
  --shadow-lg: 0 4px 8px rgba(20, 38, 28, .05), 0 24px 48px -20px rgba(20, 38, 28, .3);
}

*, *::before, *::after { box-sizing: border-box; }

/* The user agent's `[hidden] { display: none }` is a plain element selector, so
   any explicit `display` in our own stylesheets beats it — and nearly every
   component here sets one. Scripts across the site hide things with `.hidden =
   true` and reasonably expect them to go away; opting each element back in by
   hand has been a bug four times over (the cart drawer, its footer, the
   abandon countdown, the console's sequence controls). State it once instead.

   `!important` is doing real work here: it is restoring the behavior authors
   already believe they have, not overriding an intentional rule. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'kern' 1, 'liga' 1;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* --- typography -------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
  line-height: 1.08;
  letter-spacing: -.022em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
h3 { font-size: clamp(1.15rem, 1.8vw, 1.4rem); }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--green); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--terracotta); }

.lede { font-size: clamp(1.05rem, 1.6vw, 1.28rem); line-height: 1.55; color: var(--ink-mid); }

.species { font-style: italic; color: var(--ink-faint); font-family: var(--display); }
.mono { font-family: var(--mono); font-size: .84rem; }

.eyebrow {
  font-family: var(--mono);
  font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 .5rem;
}

/* --- layout ------------------------------------------------------------ */

.wrap { width: min(100% - var(--gutter) * 2, 1240px); margin-inline: auto; }
.wrap--narrow { width: min(100% - var(--gutter) * 2, 860px); margin-inline: auto; }

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: #fff; padding: .7rem 1.1rem; z-index: 10000; border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; top: 0; }

/* The rhythm between a page's major bands.
   
   Scoped to direct children of <main>, because as a bare `section + section` it
   reached everything: checkout's cards, the back-office consoles, and every
   section of the Tutorial Assets panel on every page — 88px of air between
   Watch, Read and Try in the map's detail card, where the rule was supposed to
   be 24. Components space themselves; this is only for the top-level bands. */
main > section + section { margin-top: clamp(3rem, 7vw, 5.5rem); }

/* --- header ------------------------------------------------------------ */

.site-head {
  background: var(--ink);
  color: #f4f1e9;
  position: sticky; top: 0; z-index: 500;
}

.site-head__bar {
  display: flex; align-items: center; gap: 1rem;
  padding-block: .85rem;
}

.brand {
  font-family: var(--display);
  font-size: 1.28rem; font-weight: 600; letter-spacing: -.02em;
  color: #fff; text-decoration: none;
  display: inline-flex; align-items: baseline; gap: .55rem;
  white-space: nowrap;
}
.brand__mark { width: 1.05em; height: 1.05em; align-self: center; }
.brand small {
  font-family: var(--mono); font-size: .58rem; letter-spacing: .18em;
  text-transform: uppercase; color: #93ab9c; font-weight: 400;
}

/* No wrapping: when the Tutorial Assets drawer opens it narrows the page, and
   a nav that reflows to two rows makes the sticky header jump height.
   `overflow: visible` because the Forms menu hangs below the bar and a scroll
   container would clip it; the narrow screens that need to scroll get it back
   in the media query below, where the menu is flattened to plain links. */
.site-nav {
  margin-left: auto; display: flex; gap: .1rem; align-items: center;
  flex-wrap: nowrap; overflow: visible;
  max-width: 100%;
}
.site-nav a {
  color: #cfdcd4; text-decoration: none;
  font-size: .7rem; font-weight: 700; white-space: nowrap;
  letter-spacing: .09em; text-transform: uppercase;
  padding: .5rem .62rem; border-radius: 6px;
  transition: background .15s, color .15s;
}
.site-nav a:hover { background: rgba(255,255,255,.09); color: #fff; }
.site-nav a[aria-current='page'] { background: rgba(255,255,255,.14); color: #fff; }
.site-nav a[data-soon] { color: #6f8579; cursor: default; }
.site-nav a[data-soon]::after {
  content: 'soon'; margin-left: .45rem;
  font-family: var(--mono); font-size: .55rem; letter-spacing: .12em;
  text-transform: uppercase; opacity: .75; font-weight: 400;
}
.site-nav a[data-soon]:hover { background: none; color: #6f8579; }

/* --- the Forms menu ------------------------------------------------------

   Two pages are forms a learner submits at their flow, and a third is coming, so
   they are grouped rather than each taking a slot in a nav that already scrolls
   on a laptop. The menu opens on hover and on focus through CSS alone, so it
   works before `nav.js` runs and on a page whose JavaScript never arrives;
   the script adds click-to-toggle, Escape and the arrow keys.

   Closed, it is genuinely closed: `visibility: hidden` takes its links out of
   the tab order, which `opacity: 0` alone would not. */
.site-nav__group { position: relative; display: flex; align-items: center; }

.site-nav__top {
  font: inherit; background: none; border: 0; cursor: pointer;
  color: #cfdcd4;
  font-size: .7rem; font-weight: 700; white-space: nowrap;
  letter-spacing: .09em; text-transform: uppercase;
  padding: .5rem .62rem; border-radius: 6px;
  display: inline-flex; align-items: center; gap: .3rem;
  transition: background .15s, color .15s;
}
.site-nav__top::after {
  content: ''; width: .3rem; height: .3rem;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-.1em) rotate(45deg);
  transition: transform .15s;
}
.site-nav__top:hover { background: rgba(255,255,255,.09); color: #fff; }
.site-nav__top[data-current='true'] { background: rgba(255,255,255,.14); color: #fff; }
.site-nav__group[data-open='true'] .site-nav__top::after { transform: translateY(.12em) rotate(225deg); }

.site-nav__menu {
  /* The bar has .85rem of padding under the nav, so `100% + .35rem` from the
     group landed the menu inside the header rather than under it. This clears
     the bar's bottom edge and leaves a hair of gap. */
  position: absolute; top: calc(100% + .95rem); right: 0; z-index: 600;
  min-width: 13.5rem;
  display: flex; flex-direction: column; gap: .1rem;
  padding: .3rem;
  background: var(--ink);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(0,0,0,.34);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-.25rem);
  /* Opens at once, closes after a beat. Without the delay, clipping the corner
     of the label on the way to a link shut the menu under the cursor. */
  transition: opacity .13s .22s, transform .13s .22s, visibility .13s .22s;
}
.site-nav__group:hover .site-nav__menu,
.site-nav__group:focus-within .site-nav__menu,
.site-nav__group[data-open='true'] .site-nav__menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition-delay: 0s;
}

/* The gap between the label and the menu is real space, and crossing it left
   the group - so the menu closed exactly as the pointer set off toward it, and
   the only way to reach a link was to click the label first. This is an
   invisible bridge across that gap, inside the menu, so the hover never breaks.
   It cannot be hovered while the menu is shut, because the menu is
   `pointer-events: none` then. */
.site-nav__menu::before {
  content: ''; position: absolute;
  left: 0; right: 0; top: -1.1rem; height: 1.1rem;
}

/* Menu rows read as rows, not as the bar's cramped chips. */
.site-nav__menu a {
  padding: .5rem .6rem; border-radius: 5px;
  letter-spacing: .06em;
}
.site-nav__menu a[aria-current='page']::before {
  content: '\2713\00a0'; color: var(--gold, #d9a441);
}

/* Narrow: no dropdown at all. The two links sit in the bar, and the bar goes
   back to scrolling sideways, which is what it did before the menu existed. */
@media (max-width: 760px) {
  .site-nav { overflow-x: auto; scrollbar-width: none; }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav__group { display: contents; }
  .site-nav__top { display: none; }
  .site-nav__menu {
    display: contents;
    opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  }
  .site-nav__menu a[aria-current='page'] { background: rgba(255,255,255,.14); color: #fff; }
  .site-nav__menu a[aria-current='page']::before { content: none; }
  .site-nav__menu::before { content: none; }
}

/* A permanent, quiet reminder that none of this is a real shop. */
.site-banner {
  background: var(--green);
  color: #eaf5ee;
  font-family: var(--mono); font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase;
  padding-block: .4rem;
}
.site-banner .wrap { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.site-banner a { color: #fff; }

/* --- footer ------------------------------------------------------------ */

.site-foot {
  margin-top: clamp(4rem, 9vw, 7rem);
  background: var(--paper-deep);
  border-top: 1px solid var(--hairline);
  padding-block: clamp(2rem, 4vw, 3rem) clamp(3rem, 6vw, 4rem);
  color: var(--ink-soft);
  font-size: .9rem;
}
.site-foot__grid {
  display: grid; gap: 1.75rem 3rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.site-foot h4 {
  font-family: var(--mono); font-size: .66rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 400; margin-bottom: .6rem;
}
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.site-foot a { color: var(--ink-mid); text-decoration: none; }
.site-foot a:hover { color: var(--terracotta); text-decoration: underline; }
.site-foot__fine {
  margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--hairline);
  font-size: .8rem; color: var(--ink-faint);
}

/* --- buttons ----------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--body); font-size: .95rem; font-weight: 700;
  background: var(--ink); color: #fff;
  border: 1px solid var(--ink); border-radius: 8px;
  padding: .7rem 1.3rem; cursor: pointer; text-decoration: none;
  transition: transform .14s, box-shadow .14s, background .14s;
  box-shadow: var(--shadow-sm);
}
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--shadow-md); color: #fff; background: #1c3326; }
.btn:active:not(:disabled) { transform: none; }
.btn:disabled { opacity: .5; cursor: progress; }
.btn:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }

.btn--ghost { background: transparent; color: var(--ink); box-shadow: none; border-color: var(--hairline); }
.btn--ghost:hover:not(:disabled) { background: var(--paper-warm); color: var(--ink); border-color: var(--ink-faint); }

.btn--accent { background: var(--terracotta); border-color: var(--terracotta); }
.btn--accent:hover:not(:disabled) { background: #ad4826; }

/* --- cards ------------------------------------------------------------- */

.card {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 1.35rem;
  box-shadow: var(--shadow-sm);
}

/* --- product grid ------------------------------------------------------ */

.section-head {
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  margin-bottom: 1.5rem;
  padding-bottom: .85rem; border-bottom: 1px solid var(--hairline);
}
.section-head p { margin: 0; color: var(--ink-faint); font-size: .9rem; }

.plates {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(1rem, 2vw, 1.6rem);
  list-style: none; padding: 0; margin: 0;
}

.packet {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none; color: inherit;
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s, border-color .2s;
}
.packet:hover, .packet:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: #d4cec0;
  outline: none;
}
.packet:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }

.packet__plate {
  aspect-ratio: 4 / 3;
  background: var(--paper-warm);
  border-bottom: 1px solid var(--hairline);
  display: grid; place-items: center; overflow: hidden;
}
.packet__plate img { width: 100%; height: 100%; object-fit: cover; display: block; }
.packet__plate img[src$='placeholder.svg'] { object-fit: contain; padding: 14%; }

.packet__body { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .15rem; flex: 1; }
.packet__title { font-size: 1.08rem; line-height: 1.2; }
.packet__species { font-size: .84rem; margin: 0; }

.packet__foot {
  margin-top: auto; padding-top: .9rem;
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
}
.packet__price { font-family: var(--display); font-size: 1.22rem; font-weight: 600; color: var(--ink); }
.packet__stats {
  font-family: var(--mono); font-size: .68rem; color: var(--ink-faint);
  margin: 0; text-align: right;
}

.tag-out {
  position: absolute; top: .7rem; left: .7rem;
  background: rgba(20,38,28,.85); color: #fff;
  font-family: var(--mono); font-size: .6rem; letter-spacing: .1em;
  text-transform: uppercase; padding: .2rem .5rem; border-radius: 4px;
  backdrop-filter: blur(4px);
}

/* --- product detail ---------------------------------------------------- */

.detail {
  display: grid; gap: clamp(1.5rem, 4vw, 3.5rem);
  grid-template-columns: minmax(0, 1fr);
  margin-block: clamp(1.5rem, 4vw, 2.5rem);
}
@media (min-width: 860px) { .detail { grid-template-columns: 5fr 6fr; align-items: start; } }

.detail__plate {
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--paper-warm);
  aspect-ratio: 1; display: grid; place-items: center; overflow: hidden;
}
.detail__plate img { width: 100%; height: 100%; object-fit: cover; }
.detail__plate img[src$='placeholder.svg'] { object-fit: contain; padding: 12%; }

.detail__price {
  font-family: var(--display); font-size: 2.2rem; font-weight: 600;
  margin: .6rem 0 1.4rem;
}

.spec { width: 100%; border-collapse: collapse; font-size: .95rem; }
.spec th, .spec td { text-align: left; padding: .7rem 0; border-bottom: 1px solid var(--hairline); }
.spec th {
  color: var(--ink-faint); font-weight: 400; width: 45%;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
}

/* --- misc -------------------------------------------------------------- */

.empty, .loading {
  padding: 3rem 1rem; text-align: center; color: var(--ink-faint);
  font-family: var(--mono); font-size: .82rem;
  grid-column: 1 / -1;
}

.chip {
  font-family: var(--mono); font-size: .74rem;
  background: var(--paper-warm); color: var(--ink-mid);
  border: 1px solid var(--hairline); border-radius: 999px;
  padding: .42rem .9rem; margin: 0 .35rem .35rem 0;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.chip:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
  .settle { animation: settle .45s cubic-bezier(.2,.7,.3,1) backwards; }
  .plates > li { animation: settle .4s cubic-bezier(.2,.7,.3,1) backwards; }
  .plates > li:nth-child(1) { animation-delay: .02s }
  .plates > li:nth-child(2) { animation-delay: .05s }
  .plates > li:nth-child(3) { animation-delay: .08s }
  .plates > li:nth-child(4) { animation-delay: .11s }
  .plates > li:nth-child(n+5) { animation-delay: .14s }
}
@keyframes settle { from { opacity: 0; transform: translateY(10px) } to { opacity: 1; transform: none } }

/* Photograph credit under the product plate. Commons images are CC BY / CC BY-SA
   and the attribution has to travel with the picture. */
.detail__credit {
  margin: .5rem 0 0; font-size: .78rem; line-height: 1.45; color: var(--ink-soft);
}
.detail__credit a { color: inherit; }

/* --- tooltips -------------------------------------------------------------
   See public/js/tip.js. Fixed and appended to <body> so a scrolling pane
   cannot clip one — the back office is full of those.
   ---------------------------------------------------------------------- */

/* Paper on ink, not ink on paper. The tip was the page's ink color, which read
   on the shop's light pages and vanished over the Tutorial Assets panel — the
   one place lesson codes are hovered most. Light with a hairline holds up on
   both grounds. */
.tip {
  position: fixed; z-index: 10000; pointer-events: none;
  max-width: 26rem; display: grid; gap: .2rem;
  padding: .6rem .75rem; border-radius: 8px;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--hairline);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
  font-family: var(--body); font-size: .8rem; line-height: 1.45;
  animation: tip-in .12s ease-out;
}
.tip strong { color: var(--ink); font-size: .82rem; }
.tip span { color: var(--ink-mid); }

.tip::after {
  content: ''; position: absolute; left: 50%; margin-left: -5px;
  border: 5px solid transparent;
}
.tip[data-side='above']::after { top: 100%; border-top-color: var(--paper); }
.tip[data-side='below']::after { bottom: 100%; border-bottom-color: var(--paper); }

@keyframes tip-in { from { opacity: 0; transform: translateY(2px) } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .tip { animation: none } }

/* A lesson code is a tracking number until it is a link. See public/js/lessons.js. */
.lesson-ref {
  font-family: var(--mono); font-size: .92em;
  color: inherit; text-decoration: none;
  border-bottom: 1px dotted currentColor; opacity: .85;
}
.lesson-ref:hover { opacity: 1; color: var(--terracotta); border-bottom-style: solid; }
.lesson-ref:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 2px; }