/* Painted plates with code on top: the wiki's drawings (rules: experiments/design-lab/wiki-plates/rules.html).
   A drawing is one or more paintings of its subject (plates), with the explanation drawn over each in
   code: notes, arrows, moving dots and highlights, in an svg of the plate's own shape. Its story comes in
   steps (assets/js/plates.js). On a phone the plates stack, so each is full width and its notes stay
   readable. tools/wiki.py loads this, and plates.js, only on pages that have plates.

   The paintings multiply onto the paper (as the openers and specimens do), so nothing that wraps a
   painting may fade, transform, filter, isolate or contain: that's why the columns come from the
   viewport, not a container query. */

.plates { margin: clamp(1.8rem, 4vw, 2.6rem) 0; }
.plates__grid { display: grid; gap: clamp(1.2rem, 3vw, 1.6rem); grid-template-columns: minmax(0, 30rem); justify-content: center; list-style: none; margin: 0; padding: 0; }
/* side by side only where each plate gets 215 px or more, so its 21-unit notes stay 15 px or more (the
   rules): wide screens beside the index, and tablets from 820 px once the index has moved below the page.
   Narrower, three plates stack, as on a phone (at 700 px three across were 185 px each, notes 13 px) */
@media (min-width: 1180px), (min-width: 820px) and (max-width: 900px) {
  .plates--3 .plates__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1000px), (min-width: 560px) and (max-width: 900px) {
  .plates--2 .plates__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* one plate, when the idea happens in one subject at one moment: never wider than a phone's column */
.plates--1 .plates__grid { grid-template-columns: minmax(0, 30rem); }

/* the key to the marks, above the plates */
.plates__key { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.25rem 0.45rem; margin: 0 0 1.1rem; font-family: var(--f-hand); font-weight: 600; font-size: 1.2rem; line-height: 1.2; color: var(--earth); text-align: center; }
/* one item of a key, its symbol and its words kept together when the key wraps: <span><svg …/> Water.</span> */
.plates__key > span { display: inline-flex; align-items: center; gap: 0.45rem; }
.plates__ring { width: 1.15rem; height: 1.15rem; }
/* a key's marks keep their size where its words wrap on a phone, so a ring's letters stay readable */
.plates__key > span > svg { flex: none; }
.plates__line { width: 1.8rem; height: 1rem; }
.plate { margin: 0; display: grid; align-content: start; }
.plate__art { position: relative; aspect-ratio: 1; }
/* a wide plate, for a subject wider than it's tall (a leaf cut through): 3 by 2, its overlay 300 by 200 */
.plate__art--wide { aspect-ratio: 3 / 2; }
.plate__art .specimen { position: absolute; inset: 0; aspect-ratio: auto; }
.plate__paint { position: absolute; inset: 0; mix-blend-mode: multiply; }
/* a plate of two paintings, one giving way to the other, multiplies onto the paper as one */
.plate__paint picture { position: absolute; inset: 0; }
.plate__paint img, .plate__art .specimen img { display: block; width: 100%; height: 100%; }
.plate__over { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

/* the notes on a plate: the openers' hand, a little smaller, with the paper behind each letter */
.plate__over .art__hand { font-size: 21px; paint-order: stroke; stroke: var(--card); stroke-width: 5px; stroke-linejoin: round; }
.plate__over .art__ink { stroke-width: 2.4; }
.plate__name { margin: 0.7rem 0 0.05rem; font: 700 0.74rem/1.3 var(--f-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); text-align: center; }
.plate__kinds { margin: 0 0 0.2rem; font: 600 0.84rem/1.3 var(--f-body); color: var(--ink-3); text-align: center; }
.plate__note { margin: 0; font-family: var(--f-hand); font-weight: 600; font-size: 1.28rem; line-height: 1.15; color: var(--earth); text-align: center; text-wrap: balance; }

/* what the code draws over the paintings */
.pl__iron { fill: var(--min-fe); stroke: var(--ink); stroke-width: 1.2; }
/* on red soil a fleck keeps a little paper round it, so it stands out of the paint */
.plate__over .pl__iron { filter: drop-shadow(0 0 1.3px rgba(251, 247, 238, 0.95)); }
.pl__acid { stroke: #b5533c; stroke-width: 1.8; stroke-dasharray: 6 4; }
.pl__free { fill: var(--card); stroke: var(--min-fe); stroke-width: 2.4; }
.pl__ca { fill: var(--min-ca); stroke: var(--ink); stroke-width: 1.3; }
/* water in a plant: the site's flowing water (learn.css), lighter over a painting */
.plate__over .dg__flow { stroke: #3f6f99; stroke-width: 4.4; opacity: 0.9; }
.plate__over .pl__flow--leaf { stroke-width: 3.4; }
/* a trickle: fine dots, slow (a period of 6 keeps the flow's loop of 24 seamless) */
.plate__over .pl__trickle { stroke-width: 2.2; stroke-dasharray: 0.5 5.5; animation-duration: 3.2s; }
/* inside a fruit, the same water a little bolder, so it can be followed as it thins out */
.plate__over .pl__inside { stroke-width: 3; stroke-dasharray: 1 5; animation-duration: 2.6s; }
/* water that thins out as it goes: its stroke is the drawing's own gradient, named in its style
   (style="stroke: url(#tomato-fade)"), so two drawings on one page can't clash */
.plate__over .pl__fade { opacity: 1; }
.plate__over .dg__vapour, .plates__key .dg__flow { stroke: #3f6f99; opacity: 0.85; }
.pl__ray { fill: none; stroke: #e0a526; stroke-width: 2.4; stroke-linecap: round; }
.pl__water { fill: #cfe3f0; stroke: #4f7491; stroke-width: 1.2; }
.pl__lime { fill: #fff; stroke: var(--ink); stroke-width: 1.3; stroke-linejoin: round; }
.pl__lens { fill: none; stroke: var(--ink-2); stroke-width: 1.6; stroke-dasharray: 4 3.5; }
.pl__claw { fill: none; stroke: var(--ink); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.pl__ring { fill: none; stroke: var(--wattle); stroke-width: 3; stroke-dasharray: 2 6; stroke-linecap: round; }
/* sugar, made in the leaves: an amber dot, and amber where it flows (on a dg__flow path) */
.pl__sugar { fill: #eaa93a; stroke: var(--ink); stroke-width: 1.2; }
.plate__over .pl__flow--sugar, .plates__key .pl__flow--sugar { stroke: #c4861c; }
/* glass in a cell wall (silicon): a solid pale blue band that draws itself along the wall and down into the
   walls between cells, with a bright edge along its top */
.plate__over .pl__glass, .plates__key .pl__glass { stroke: #8cc0e4; stroke-width: 5.4; stroke-linecap: butt; }
.plate__over .pl__glass--wall { stroke-width: 3.4; }
.pl__glint { fill: none; stroke: #fff; stroke-width: 1; stroke-linecap: round; opacity: 0.95; }
/* minerals by name, in the site's one deep colour for each (components.css): a dot where a drawing
   must tell two apart (nitrogen and phosphorus), and where several meet (the root's doors) a disc with
   the mineral's symbol inside, smaller than a note (the disc is its paper); any mineral, where it
   needn't say which, slate */
:is(.pl__n, .pl__p, .pl__k, .pl__mg, .pl__s, .pl__fe, .pl__mn, .pl__zn, .pl__cu, .pl__b, .pl__mo, .pl__si, .pl__co, .pl__se, .pl__i, .pl__ni, .pl__cl, .pl__na, .pl__min) { stroke: var(--ink); stroke-width: 1.2; }
.pl__n { fill: var(--min-n); } .pl__p { fill: var(--min-p); } .pl__k { fill: var(--min-k); } .pl__mg { fill: var(--min-mg); }
.pl__min { fill: #7d8d9a; }
.pl__s { fill: var(--min-s); } .pl__fe { fill: var(--min-fe); } .pl__mn { fill: var(--min-mn); } .pl__zn { fill: var(--min-zn); }
.pl__cu { fill: var(--min-cu); } .pl__b { fill: var(--min-b); } .pl__mo { fill: var(--min-mo); } .pl__si { fill: var(--min-si); }
.pl__co { fill: var(--min-co); } .pl__se { fill: var(--min-se); } .pl__i { fill: var(--min-i); } .pl__ni { fill: var(--min-ni); }
.pl__cl { fill: var(--min-cl); } .pl__na { fill: var(--min-na); }
.plate__over .art__hand.pl__el { font-size: 14px; font-weight: 700; fill: var(--ink); stroke-width: 0; }
/* a fungus's fine threads in the soil: pale, with a dark edge so they read on any soil */
.pl__hypha { fill: none; stroke: #f7eed6; stroke-width: 2.8; stroke-linecap: round; filter: drop-shadow(0 0 1px rgba(43, 33, 22, 0.95)) drop-shadow(0 0 0.4px rgba(43, 33, 22, 0.9)); }
/* the root zone, the thin layer of soil round a root where its life lives: a soft gold glow */
.pl__zone { fill: #f2c35a; opacity: 0.42; filter: blur(2.5px); }
/* oxygen let go by a leaf: small open bubbles */
.pl__o2 { fill: rgba(251, 247, 238, 0.7); stroke: #3f6f99; stroke-width: 1.4; }
/* water put on: drops, and the wet soil they leave; a spray's fine mist */
.pl__drop { fill: #3f6f99; opacity: 0.88; }
.pl__wet { fill: #3f6f99; opacity: 0.16; }
.pl__mist { fill: #3f6f99; opacity: 0.55; }
/* fertiliser granules, on the soil or banded in it */
.pl__granule { fill: #ece6d6; stroke: var(--ink); stroke-width: 1.1; }
/* magnified: a paper disc with a grey ring, joined by a fine line to the spot it shows; cells inside it */
.pl__loupe { fill: var(--card); stroke: var(--ink-2); stroke-width: 1.8; }
.pl__cell { fill: #fbf1d8; stroke: #8b6a43; stroke-width: 1.1; stroke-linejoin: round; }
/* a cell filled with what the plant stores (sugar, starch): a straw wash, clear of potassium's apricot and
   sugar's amber. A ring of new cells: small, flat, some mid-division */
.pl__cell--full { fill: #f1d99c; }
.pl__cell--new { fill: #fff8e6; stroke-width: 0.9; }
.pl__band { margin: 1rem auto 0; max-width: 30rem; padding: 0.6rem 1rem; border: 2px dashed var(--wattle-3); border-radius: 0.8rem; background: rgba(242, 182, 50, 0.16); text-align: center; }
.pl__band b { display: block; font: 700 0.74rem/1.3 var(--f-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.pl__band span { font-family: var(--f-hand); font-weight: 600; font-size: 1.22rem; color: var(--earth); }

/* Steps. Before plates.js starts a figure (no script, or less motion asked for), every step shows:
   the drawing is complete and still. Once it starts (.is-live), each mark waits for its step. */
.plates.is-live [data-step] { opacity: 0; transition: opacity 0.7s ease; }
.plates.is-live [data-step].is-on { opacity: 1; }
.plates.is-live [data-step] .art__ink:not([fill]) { stroke-dasharray: 1 1.05; stroke-dashoffset: 1.02; transition: stroke-dashoffset 1.3s var(--ease-grow); }
.plates.is-live [data-step].is-on .art__ink:not([fill]) { stroke-dashoffset: 0; }
/* a painting that gives way to another at a step (a fruit before its rot): gone in the finished
   drawing, there until its step while it plays */
.plates [data-until] { opacity: 0; }
.plates.is-live [data-until] { opacity: 1; }
.plates.is-live [data-until].is-off { opacity: 0; transition: opacity 1.4s ease; }
/* a mark that comes in at one step and goes at a later one waits for its first */
.plates.is-live [data-step][data-until]:not(.is-on) { opacity: 0; }
/* moving parts only while it plays; the finished, still drawing shows them at rest */
.plates .pl__still { display: none; }
.plates:not(.is-live) .pl__moving { display: none; }
.plates:not(.is-live) .pl__still { display: inline; }

.plates__foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 1rem; margin-top: 0.9rem; }
.plates__foot figcaption { flex: 1 1 22rem; margin: 0; font-size: 0.9rem; color: var(--ink-3); }
.plates__again { display: none; }
.plates.is-live .plates__again { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.8rem; border: 1.5px solid var(--ink-3); border-radius: 999px; background: var(--card); font: 600 0.82rem/1 var(--f-body); color: var(--ink-2); cursor: pointer; }
.plates__again:hover { border-color: var(--ink); color: var(--ink); }
.plates__again:focus-visible { outline: 3px solid var(--wattle-3); outline-offset: 2px; }
.plates__again svg { width: 1rem; height: 1rem; }

/* on a phone a page's plates run out to the card's edges, as its drawings do, so they're as big as
   they can be; their words keep the card's margin */
@media (max-width: 560px) {
  .wiki__article .plates { margin-inline: calc(0.4rem - clamp(1.4rem, 3.5vw, 2.8rem)); }
  .wiki__article .plates :is(.plates__key, .plate__name, .plate__note, .plates__foot) { padding-inline: calc(clamp(1.4rem, 3.5vw, 2.8rem) - 0.4rem); }
  .wiki__article .plates .pl__band { margin-inline: calc(clamp(1.4rem, 3.5vw, 2.8rem) - 0.4rem); }
}

@media print {
  .plates [data-step] { opacity: 1 !important; }
  .plates [data-until] { opacity: 0 !important; }
  .plates .pl__moving, .plates__again { display: none !important; }
  .plates .pl__still { display: inline !important; }
}