/* LearnPlants - mobile first, calm and visual. */

:root {
  --bg: #f7f6f2;
  --surface: #ffffff;
  --ink: #1d2420;
  --muted: #5d6b62;
  --line: #e2e4dd;
  --accent: #2f6b46;
  --accent-soft: #e8f1ea;
  --warn: #8a5a1b;
  --warn-soft: #fbf1df;
  --radius: 14px;
  --gap: 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121714;
    --surface: #1a211d;
    --ink: #e8ece9;
    --muted: #9aa8a0;
    --line: #2b342e;
    --accent: #7cc79b;
    --accent-soft: #1f2c25;
    --warn: #e0b072;
    --warn-soft: #2c2419;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }

/* ---------- chrome ---------- */

header.bar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: 12px 16px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.bar h1 { font-size: 1.05rem; margin: 0; font-weight: 600; letter-spacing: -0.01em; }
.bar .spacer { flex: 1; }

nav.tabs { display: flex; gap: 4px; }

nav.tabs a {
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--muted);
}

nav.tabs a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

main { padding: 16px; max-width: 720px; margin: 0 auto; }

/* ---------- browse ---------- */

.videos-link { display: inline-block; margin: 0 0 12px; color: var(--accent); font-weight: 600; font-size: 0.95rem; }

.search {
  width: 100%;
  padding: 11px 14px;
  font-size: 1rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 14px;
}
.search:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap);
}
@media (min-width: 560px) { .grid { grid-template-columns: repeat(3, 1fr); } }

.card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.card img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  background: var(--accent-soft);
}

.nophoto {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 3 / 4; background: var(--accent-soft);
  color: var(--muted); font-size: 0.75rem; letter-spacing: 0.04em;
}

.card .meta { padding: 8px 10px 10px; }
.card .la { font-style: italic; font-weight: 600; font-size: 0.92rem; line-height: 1.25; }
.card .en { color: var(--muted); font-size: 0.78rem; margin-top: 2px; }

.empty { color: var(--muted); text-align: center; padding: 40px 0; }

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

/* A frame of one fixed size, so the page never moves when the photo changes.
   Letting the element take each photo's own proportions meant a tap on a tile
   shifted everything below it by up to 182px on a phone, pushing the second row
   of tiles off the bottom of the screen.

   1.2 is measured, not chosen by eye: across all 2335 photos it fills 82% of the
   frame on average and leaves 44% of them filling nine tenths of it or more -
   the best of every ratio from 1.0 to 1.33. At an iPhone 14's content width that
   is 358x298, which leaves room for the names and both rows of tiles.

   Deliberately no max-height. A max-height on a box that has an aspect-ratio
   does not cap it, it overrides it - the same trap as .qphoto further down - and
   the frame would start resizing per photo again. */
.hero {
  display: block;
  width: 100%;
  max-width: 32rem;
  aspect-ratio: 1.2;
  margin-inline: auto;
  border-radius: var(--radius);
  object-fit: contain;
  background: var(--accent-soft);
}

/* A photo whose shape is within a tenth of the frame's fills it edge to edge,
   losing a sliver off one side. Anything further off sits inside the frame and
   loses nothing. Either way the full photo is one tap away, full screen. */
.hero.fill { object-fit: cover; }

/* The frame holds the photo and the button that opens it full screen. */
.frame { position: relative; width: 100%; max-width: 32rem; margin-inline: auto; }
.expand {
  position: absolute; right: 8px; bottom: 8px;
  width: 34px; height: 34px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px;
  background: rgba(0,0,0,.55); color: #fff;
  font-size: 1rem; line-height: 1; cursor: pointer;
}
.expand:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- the whole photo, full screen ---------- */

.viewer {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: #000;
  padding: 8px;
}
.viewer[hidden] { display: none; }
body.viewer-open { overflow: hidden; }          /* the page behind must not scroll */

/* Contained, never cropped - this is the whole point of the screen. The bar at
   the foot is 88px, so the photo stops short of it. */
/* The photo gets the whole width: the arrows float on top of it rather than
   taking columns beside it, which cost it 80px on a phone. */
.v-img {
  max-width: 100%; max-height: calc(100dvh - 104px); max-height: calc(100vh - 104px);
  object-fit: contain; border-radius: 6px;
}
.v-prev, .v-next { position: absolute; top: 50%; transform: translateY(-50%); }
.v-prev { left: 8px; }
.v-next { right: 8px; }
/* These sit on top of the photograph, which may be bright sky or dark bark, so
   they need their own contrast rather than borrowing the backdrop's. */
.v-prev, .v-next, .v-close {
  border: 0; background: rgba(0,0,0,.55); color: #fff;
  cursor: pointer; border-radius: 999px; line-height: 1;
  backdrop-filter: blur(2px);
}
.v-prev:hover, .v-next:hover, .v-close:hover { background: rgba(0,0,0,.75); }
.v-prev, .v-next { width: 40px; height: 64px; font-size: 1.6rem; }
.v-close { position: absolute; right: 10px; top: 10px; width: 40px; height: 40px; font-size: 1.4rem; z-index: 1; }
.v-prev:focus-visible, .v-next:focus-visible, .v-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.v-prev[hidden], .v-next[hidden] { visibility: hidden; display: block; }  /* keep the columns */

.v-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  color: #cfd8d2; font-size: 0.74rem; line-height: 1.35;
  background: linear-gradient(transparent, rgba(0,0,0,.75) 40%);
}
.v-pos { display: block; font-weight: 600; color: #fff; margin-bottom: 2px; }
.v-cap .photo-credit { margin: 0; color: #cfd8d2; }
.v-cap a { color: #9fd9b6; }

.names { margin: 12px 0 4px; }
.names h2 { margin: 0; font-size: 1.4rem; font-style: italic; letter-spacing: -0.02em; line-height: 1.25; }
/* English and Dutch share one line, English left and Dutch right, so the names
   cost two lines instead of three and the photo frame gets the difference. They
   wrap to their own lines only if they genuinely cannot fit side by side. */
.names .alt {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: 4px 12px; margin-top: 2px; line-height: 1.35;
}
.names .alt .nl { color: var(--muted); font-size: 0.9rem; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.chip {
  font-size: 0.75rem; padding: 4px 10px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-weight: 600;
}
.chip.warn { background: var(--warn-soft); color: var(--warn); }

.features { padding-left: 1.1rem; margin: 14px 0; }
.features li { margin-bottom: 7px; }

section.block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  margin-top: 14px;
}
section.block h3 {
  margin: 0 0 8px; font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted);
}

dl.facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; }
dl.facts dt { color: var(--muted); font-size: 0.88rem; }
dl.facts dd { margin: 0; font-size: 0.92rem; }

.lookalike { padding: 8px 0; border-bottom: 1px solid var(--line); }
.lookalike:last-child { border-bottom: 0; padding-bottom: 0; }
.lookalike b { font-size: 0.92rem; }
.lookalike p { margin: 3px 0 0; font-size: 0.88rem; color: var(--muted); }

p.note { margin: 0; font-size: 0.92rem; }

.aid { background: var(--accent-soft); border-radius: var(--radius); padding: 12px 14px; margin-top: 14px; }
.aid p { margin: 0; font-size: 0.92rem; }

.sources { font-size: 0.8rem; color: var(--muted); margin-top: 16px; }
.sources a { text-decoration: underline; }

.banner {
  background: var(--warn-soft); color: var(--warn);
  border-radius: var(--radius); padding: 11px 14px;
  font-size: 0.88rem; margin-bottom: 14px;
}

/* ---------- flashcards ---------- */

.deck { text-align: center; }

.deck .count { color: var(--muted); font-size: 0.82rem; margin-bottom: 10px; }
.deck .q { font-size: 1.15rem; font-weight: 600; margin: 16px 0; }

.answer { text-align: left; }
.answer h2 { margin: 0 0 2px; font-size: 1.4rem; font-style: italic; }
.answer .en { color: var(--muted); font-size: 0.9rem; margin-bottom: 10px; }

.btn {
  display: block; width: 100%; padding: 14px;
  font-size: 1rem; font-family: inherit; font-weight: 600;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); cursor: pointer;
  margin-top: 10px;
}
.btn.primary { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.btn:active { transform: scale(0.99); }

.row { display: flex; gap: 10px; }
.row .btn { margin-top: 0; }

.state { font-size: 0.78rem; color: var(--muted); margin-top: 14px; text-align: center; }

/* ---------- v2: photo framing ----------

   These were 'cover' in a 4/3 frame, on the assumption that Dryades photos are
   landscape. 37% of them are portrait, and so are 40% of the featured whole-plant
   photos, so that frame cut the top and bottom off a tall tree - half the
   photograph on the worst of them, with no way to pan or zoom it back.

   Every study surface now uses 'contain': the whole photograph is always visible
   and the frame never changes size, so nothing shifts as photos change. A square
   frame wastes less margin than the old 4/3 did (81% of the box filled on average
   against 79%) while cropping nothing. */

.card img { aspect-ratio: 1 / 1; object-fit: contain; }

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
@media (min-width: 560px) { .gallery { grid-template-columns: repeat(4, 1fr); } }

.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  border-radius: 8px;
  border: 2px solid transparent;
  background: var(--accent-soft);
  cursor: pointer;
}
.gallery img[aria-current="true"] { border-color: var(--accent); }

.photo-credit { margin-top: 6px; line-height: 1.4; }

/* The width/height attributes on <img> set a fixed CSS height, which beats
   aspect-ratio once width is 100%. Let the ratio decide the height. */
.card img, .hero, .gallery img { height: auto; }

/* ---------- stars, plant card, gallery filters ---------- */

.stars { color: #c89b2a; font-size: 0.8rem; letter-spacing: 1px; margin-top: 2px; }

.plantkaart { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.pk { padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface); cursor: pointer; font: inherit; color: var(--ink); }
.pk img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; background: var(--accent-soft); }
.pk .pk-label { display: block; font-size: 0.75rem; font-weight: 600; padding: 5px 4px; }

/* A tile is a window on its category, not a link to one photo: tapping it steps
   to the next photo of the same kind. The counter says how far along you are. */
.pk { position: relative; }
.pk:disabled { cursor: default; }        /* only one photo of that kind */
.pk:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The tile whose photo is in the big frame, marked the same way the gallery
   marks the thumbnail it is showing. */
.pk[aria-current="true"] { border-color: var(--accent); }
.pk[aria-current="true"] .pk-label { color: var(--accent); }

.tile-n {
  position: absolute; right: 4px; top: 4px;
  padding: 2px 6px; border-radius: 999px;
  background: rgba(0,0,0,.6); color: #fff;
  font-size: 0.68rem; font-weight: 600; line-height: 1.3;
  pointer-events: none;                  /* never swallow the tap */
}

/* Attribution for every photo on screen, collapsed at the foot of the page. The
   photos are CC BY-SA and similar, so crediting them is a licence condition -
   but it does not have to sit between the photograph and the plant card, where
   it was costing about a fifth of a phone screen. */
.credits { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 8px; }
.credits summary {
  cursor: pointer; font-size: 0.78rem; color: var(--muted);
  padding: 4px 0; list-style-position: inside;
}
.credits summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.credits .photo-credit { margin-top: 6px; }

/* The same cycling tile in practice and flashcards, where the markup is a
   figure with its caption underneath rather than a button with a label inside. */
.pc-tiles .tile, .fc-tiles .tile {
  display: block; width: 100%; padding: 0; border: 0;
  background: none; font: inherit; color: inherit; cursor: pointer;
  position: relative;
}
.pc-tiles .tile:disabled, .fc-tiles .tile:disabled { cursor: default; }
.pc-tiles .tile:focus-visible, .fc-tiles .tile:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

.filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.filter { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: inherit; font-size: 0.8rem; cursor: pointer; }
.filter[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--bg); }

/* ---------- practice ---------- */

.home, .summary { text-align: center; }
.ring { width: 150px; height: 150px; display: block; margin: 8px auto 0; }
.ring-bg { fill: none; stroke: var(--accent-soft); stroke-width: 12; }
.ring-fg { fill: none; stroke: var(--accent); stroke-width: 12; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 60px 60px; transition: stroke-dashoffset .6s ease; }
.ring-num { font-size: 30px; font-weight: 700; text-anchor: middle; fill: var(--ink); }
.ring-sub { font-size: 12px; text-anchor: middle; fill: var(--muted); }
.home-title { margin: 4px 0 14px; color: var(--muted); }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0; }
.stat-row div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 4px; }
.stat-row b { display: block; font-size: 1.15rem; }
.stat-row span { font-size: 0.75rem; color: var(--muted); }
.legend, .hint { font-size: 0.82rem; color: var(--muted); }
.center { text-align: center; }
.en.center { color: var(--muted); margin: 2px 0 10px; }
.btn.big { padding: 16px; font-size: 1.05rem; }
.btn:disabled { opacity: .45; cursor: default; }

.qbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.qprogress { flex: 1; height: 8px; border-radius: 999px; background: var(--accent-soft); overflow: hidden; }
.qprogress span { display: block; height: 100%; background: var(--accent); transition: width .3s ease; }
.qcount { font-size: 0.8rem; color: var(--muted); }
.combo { font-size: 0.85rem; font-weight: 700; color: #c2571a; }
.qlabel { font-size: 0.75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 6px 0; }
.q { font-size: 1.1rem; font-weight: 600; margin: 14px 0 4px; text-align: center; }

/* The question photo's frame is .qphoto, not the image inside it. The role tag
   is positioned against .qphoto, so if the frame stayed full width while the
   photo shrank to fit, the tag would float on the page background beside it.

   Capping the WIDTH is also what keeps the frame square. max-height on a box
   with an aspect-ratio does not preserve the ratio, it quietly overrides it -
   that is what used to stretch this frame to 1.9:1 on a laptop. For a square,
   capping the width caps the height to the same number. */
.qphoto {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  border-radius: var(--radius);
  overflow: hidden;
}
.qphoto .hero {
  max-width: 100%;
  max-height: 42vh;
  max-height: 42svh;   /* a tall photo must still leave the four answers on screen */
  border-radius: 0;
}
.role-tag { position: absolute; left: 8px; top: 8px; background: rgba(0,0,0,.55); color: #fff; font-size: 0.72rem; padding: 3px 8px; border-radius: 999px; }

.options { display: grid; gap: 8px; margin-top: 10px; }
.opt { text-align: left; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.opt b { display: block; }
.opt span { font-size: 0.8rem; font-style: italic; color: var(--muted); }

.photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.duel { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.popt { position: relative; padding: 0; border: 3px solid transparent; border-radius: 12px; overflow: hidden; background: var(--surface); cursor: pointer; font: inherit; }
.popt img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; background: var(--accent-soft); }
.popt-name { display: block; font-size: 0.78rem; font-weight: 600; padding: 4px; color: var(--ink); }

.opt.correct, .popt.correct { border-color: #2f8a4c; background: #e3f4e8; }
.opt.wrong, .popt.wrong { border-color: #c0453a; background: #fbe6e3; }
@media (prefers-color-scheme: dark) {
  .opt.correct, .popt.correct { background: #173524; }
  .opt.wrong, .popt.wrong { background: #3a1d1a; }
}
.opt:disabled, .popt:disabled { cursor: default; }

.fb { margin: 14px 0 10px; padding: 12px 14px; border-radius: var(--radius); font-size: 0.95rem; }
.fb.ok { background: #e3f4e8; color: #1f5e33; }
.fb.bad { background: #fbe6e3; color: #8a2a21; }
@media (prefers-color-scheme: dark) { .fb.ok { background: #173524; color: #9fe0b3; } .fb.bad { background: #3a1d1a; color: #f0a79f; } }

.pcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; text-align: left; }
.pc-name b { display: block; font-size: 1.15rem; font-style: italic; }
.pc-name .en { color: var(--muted); font-size: 0.85rem; }
.pc-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0 8px; }
.pc-tiles figure { margin: 0; }
.pc-tiles img, .pc-one { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; background: var(--accent-soft); border-radius: 8px; }
.pc-tiles figcaption { font-size: 0.7rem; color: var(--muted); text-align: center; margin-top: 2px; }
.pcard.compact { padding: 8px; }
.pcard.compact .pc-name b { font-size: 0.9rem; }
.pcard.compact .pc-tiles { grid-template-columns: repeat(2, 1fr); gap: 4px; }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }

.summary h2 { margin: 8px 0 4px; }
.score { font-size: 1.1rem; }
.summary .block { text-align: left; }
.celebrate { font-size: 2.6rem; animation: pop .7s ease; }
@keyframes pop { 0% { transform: scale(.3); opacity: 0; } 70% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }

/* ---------- header with four tabs ---------- */

.bar h1 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
nav.tabs { flex-shrink: 0; }
nav.tabs a { padding: 6px 8px; }
@media (max-width: 400px) { .bar h1 { font-size: 1rem; } nav.tabs { gap: 0; } nav.tabs a { padding: 6px 7px; font-size: 0.85rem; } }

/* ---------- flashcards ---------- */

.fc-home { text-align: center; }
.fc-count { font-size: 1.05rem; margin: 6px 0 8px; }
.fc-count b { font-size: 1.6rem; }
.fc-label { margin: 18px 0 8px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.fc-home .filters { justify-content: center; }
.fc-home .btn.big { margin-top: 20px; }
.btn.link { background: none; border: 0; color: var(--muted); font-weight: 400; font-size: 0.85rem; text-decoration: underline; }

.fc-namecard { margin: 30px 0 10px; padding: 36px 16px; text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.fc-namecard b { display: block; font-size: 1.6rem; font-style: italic; letter-spacing: -0.01em; }
.fc-namecard .en { display: block; margin-top: 6px; color: var(--muted); }

.fc-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0 14px; }
.fc-tiles figure { margin: 0; }
.fc-tiles img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; background: var(--accent-soft); border-radius: 8px; }
.fc-tiles figcaption { font-size: 0.72rem; color: var(--muted); text-align: center; margin-top: 2px; }

/* ---------- previous / next plant ---------- */

.bar.with-nav { flex-wrap: wrap; row-gap: 8px; }
.plant-nav { display: flex; align-items: center; gap: 8px; flex-basis: 100%; }
.plant-nav a {
  flex: 1; min-width: 0; padding: 7px 12px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.plant-nav a[rel="next"] { text-align: right; }
.plant-nav .pn-count { flex-shrink: 0; font-size: 0.75rem; color: var(--muted); }

/* ---------- practice: write the name ---------- */

.write { margin-top: 8px; }
/* 16px or more, or iOS zooms the page when the field gets focus. */
.la-input {
  display: block; width: 100%; padding: 14px;
  font-family: inherit; font-size: 1.15rem; font-style: italic;
  color: var(--ink); background: var(--surface);
  border: 2px solid var(--line); border-radius: var(--radius);
}
.la-input:focus { outline: none; border-color: var(--accent); }
.la-input:disabled { opacity: .7; }
.hint-line { min-height: 1.4em; margin: 6px 2px 0; font-style: italic; color: var(--warn); }
.write-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
.write-actions .btn { margin-top: 6px; }
.write-actions.solo { grid-template-columns: 1fr; }

.fb.near { background: var(--warn-soft); color: var(--warn); }

.diff {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: baseline;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 14px; margin-bottom: 8px; text-align: left;
}
.diff-k { font-size: 0.72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.diff .la { font-size: 1.15rem; font-style: italic; letter-spacing: .02em; word-break: break-word; }
.diff mark { border-radius: 3px; padding: 0 1px; color: inherit; }
.diff mark.bad { background: #f6c9c3; text-decoration: line-through; }
.diff mark.miss { background: #bfe6cb; }
.diff mark.case { background: var(--warn-soft); box-shadow: inset 0 -2px 0 var(--warn); }
@media (prefers-color-scheme: dark) {
  .diff mark.bad { background: #5a2a24; }
  .diff mark.miss { background: #1f4a2e; }
}
.full-name { margin: 4px 0 6px; text-align: left; }
.full-name .la { font-style: italic; }
.full-name .muted { color: var(--muted); font-size: 0.85rem; }
.notes { margin: 0 0 10px; padding-left: 20px; text-align: left; font-size: 0.88rem; color: var(--muted); }

/* ---------- question photos: one to three, the first larger ---------- */

.qphotos { display: grid; gap: 6px; margin: 0 auto; max-width: 520px; }
.qphotos.n2 { grid-template-columns: 1fr 1fr; }
.qphotos.n3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.qphotos.n3 .qp:first-child { grid-row: span 2; }
.qp {
  position: relative; display: block; padding: 0; border: 0; cursor: zoom-in;
  border-radius: 12px; overflow: hidden; background: var(--accent-soft);
}
.qp img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qphotos.n1 .qp img { height: auto; max-height: 42vh; max-height: 42svh; object-fit: contain; }
.qphotos.n2 .qp, .qphotos.n3 .qp:not(:first-child) { aspect-ratio: 1 / 1; }
.qp:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- learn ---------- */

.learn-prefs { display: grid; gap: 2px; margin: 4px 0 12px; }
.learn-prefs .filters { align-items: center; margin-bottom: 4px; }
.pref-k { font-size: 0.75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); min-width: 84px; }
.center-row { justify-content: center; }

.lessons { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lesson {
  display: block; width: 100%; text-align: left; cursor: pointer; font: inherit; color: var(--ink);
  padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface);
}
.lesson.next { border: 2px solid var(--accent); }
.lesson.complete { background: var(--accent-soft); }
.l-head { display: flex; justify-content: space-between; gap: 8px; }
.l-state { font-size: 0.8rem; color: var(--muted); }
.lesson.complete .l-state { color: var(--accent); font-weight: 600; }
.l-names { display: block; margin-top: 2px; font-size: 0.85rem; font-style: italic; color: var(--muted); }

.study-name .la { font-size: 1.45rem; font-style: italic; }
.study-name .auth { color: var(--muted); }
.study-name .full { font-size: 0.8rem; }
.study-name .en { color: var(--muted); font-size: 0.9rem; margin-top: 2px; }
.pcard.study .features { margin: 10px 0 0; font-size: 0.9rem; }
.muted { color: var(--muted); }
.empty-note { color: var(--muted); margin: 24px 0 8px; }

.card .learned { display: inline-block; margin-top: 3px; font-size: 0.7rem; font-weight: 600; color: var(--accent); }

/* ---------- settings ---------- */

.gear, .home-btn {
  flex-shrink: 0; display: grid; place-items: center; width: 32px; height: 32px;
  border-radius: 999px; color: var(--muted); font-size: 1.15rem; text-decoration: none;
}
.gear[aria-current="page"], .home-btn[aria-current="page"] { background: var(--accent-soft); color: var(--accent); }
/* Four tabs and the gear leave no room for the page title on a phone; the
   highlighted tab already says where you are. The plant page keeps its title
   (the plant's name) - its header wraps onto two rows. */
@media (max-width: 400px) {
  .bar:not(.with-nav) h1 { display: none; }
  .bar:not(.with-nav) .spacer { display: none; }
  .bar:not(.with-nav) nav.tabs { flex: 1; justify-content: space-between; }
  header.bar { gap: 4px; }
  .bar.with-nav .gear { display: none; }   /* plant page: name first; settings is one tap away elsewhere */
}

.set { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin-bottom: 12px; }
.set h2 { font-size: 1.05rem; margin: 0 0 6px; }
.set .hint { margin: 6px 0; }
.set-status { margin: 6px 0; }
.set label.btn { text-align: center; }
.set-text {
  display: block; width: 100%; margin-top: 10px; padding: 10px;
  font: 0.8rem/1.3 ui-monospace, monospace; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 10px; resize: vertical;
}
.set-text[hidden] { display: none; }
.btn.danger { color: #b3362b; border-color: #e3b1ab; }
@media (prefers-color-scheme: dark) { .btn.danger { color: #f0a79f; border-color: #5a2a24; } }
.backup-nudge { font-size: 0.85rem; background: var(--warn-soft); color: var(--warn); border-radius: var(--radius); padding: 8px 12px; }
.backup-nudge a { color: inherit; font-weight: 600; }

/* ---------- overview: which photo the cards show ---------- */

.views { margin: -4px 0 12px; }
.card-photo { position: relative; display: block; }
.card-tag {
  position: absolute; left: 6px; top: 6px; padding: 2px 7px; border-radius: 999px;
  background: rgba(0,0,0,.55); color: #fff; font-size: 0.68rem;
}
.card .nophoto { aspect-ratio: 1 / 1; font-size: 0.8rem; }

/* ---------- pronunciation ---------- */

.say {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9em; height: 1.9em; margin: -0.45em 0 -0.45em 0;
  vertical-align: middle; border-radius: 50%;
  color: var(--accent); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.say svg { width: 1.2em; height: 1.2em; }
.say:hover, .say:focus-visible { background: var(--accent-soft); outline: none; }
.say:active { transform: scale(.9); }
.say[hidden] { display: none; }