/* "Living figure" plate shared by the game labs: a printed figure page on the dark photo.
   Editorial, square, hairline — the look of a journal figure, not an app. */
.plate{
  --paper:#0b1626b3;--paper-2:#ffffff14;--ink:#fff8ee;--ink-2:#e8dfd2;--ink-3:#c9bfb0;--hair:#ffffff33;--hair-2:#ffffff17;
  --red:#ff7a6b;--blue:#6fb3f0;--orange:#ffa552;--green:#86d38c;--purple:#b79cf0;--accent:#ffdbb8;--glass:#0d1a2ecc;
  --grey:#bdb3a4;--field:#0b1626;--stator:#ffdbb8;
  --serif:'Source Serif 4','Iowan Old Style','Palatino Linotype',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:transparent;color:var(--ink);font:400 15px/1.45 var(--serif);
  display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  height:var(--plate-h,auto);min-height:380px;padding:4px 0 6px;text-shadow:0 1px 10px #0007;
}
.plate *,.plate *::before,.plate *::after{box-sizing:border-box}
.plate [hidden]{display:none!important}
.plate :is(h2,h3,h4,p,ul,ol,figure,figcaption){margin:0;padding:0}
.plate a{color:var(--accent);text-underline-offset:2px}
.plate b{font-weight:650}

/* masthead */
.plate-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:6px 24px;padding-bottom:8px}
.plate-ref{display:none}
.plate-title{font:600 clamp(30px,3vw,var(--type-title,46px))/1.08 var(--serif);letter-spacing:-.03em}
.plate-title em{font-style:italic;font-weight:600}
.plate-lede{font:400 18px/1.5 var(--serif);color:var(--ink);margin-top:6px!important;max-width:58ch}
.plate-nav{display:flex;gap:0;align-self:end;list-style:none;font:500 12px/1 var(--sans)}
.plate-nav button{appearance:none;background:none;border:0;border-bottom:2px solid transparent;color:var(--ink-2);text-shadow:inherit;padding:8px 10px 7px;cursor:pointer;font:inherit;letter-spacing:.04em;white-space:nowrap}
.plate-nav button .n{font-family:var(--serif);font-style:italic;margin-right:5px}
.plate-nav button[aria-current="step"]{color:var(--accent);border-bottom-color:var(--accent)}
.plate-nav button.is-done{color:var(--ink-2)}
.plate-nav button.is-done::after{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--green);margin-left:6px;vertical-align:2px}
.plate-nav button:disabled{opacity:.35;cursor:not-allowed}

/* body */
.plate-body{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.9fr);gap:0 22px;min-height:0;padding-top:12px}
.plate-main{position:relative;min-height:0;display:flex;flex-direction:column;border-radius:8px;padding:10px 10px 6px;
  /* the stage: dark ivory, drawn in ink */
  background:#e5ddcc;box-shadow:0 14px 40px -24px #000a;text-shadow:none;color:var(--ink);
  --ink:#1f1d1a;--ink-2:#453f37;--ink-3:#6e665a;--hair:#1f1d1a33;--hair-2:#1f1d1a17;
  --red:#c0392b;--blue:#2c6fa8;--orange:#e07b1f;--green:#2e8a4f;--purple:#8460be;--grey:#968d80;
  --field:#efe9dc;--stator:#2b2925;--paper:#e5ddcc}
.plate-side{display:flex;flex-direction:column;min-height:0;gap:10px;overflow:hidden}
.panel{position:relative}
.panel-label{position:absolute;top:8px;left:10px;font:italic 600 14px/1 var(--serif);color:var(--ink);z-index:2}
.plate .panel-title{font:600 11px/1.2 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px!important;padding-left:24px}
.fig{flex:1;min-height:0;width:100%;height:100%;display:block}

/* caption = instructions */
.caption{padding-top:9px;flex:1 1 auto;min-height:0;overflow:auto}
.caption-head{font:400 18px/1.4 var(--serif);color:var(--accent)}
.caption-head .run{font:600 11px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-right:8px}
.caption-text{margin-top:4px;font:400 17px/1.5 var(--serif);color:var(--ink)}
.caption-text p+p,.caption-text p+ul,.caption-text ul+p{margin-top:6px!important}
.caption-text ul{padding-left:18px!important}
.caption-text .quiet{color:var(--ink-3);font-size:13.5px}
.actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.btn{appearance:none;font:500 14px/1.3 var(--sans);letter-spacing:0;text-transform:none;color:var(--ink);background:transparent;border:1px solid #fff8ee66;border-radius:3px;padding:8px 14px;min-height:40px;text-shadow:none;cursor:pointer;touch-action:manipulation}
.btn:hover:not(:disabled){background:#ffdbb824;border-color:var(--accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#1b2433;text-shadow:none}
.btn.primary:hover:not(:disabled){background:#ffe9d2}
.btn.small{padding:7px 9px;min-height:30px;font-size:10.5px}
.btn:disabled{opacity:.35;cursor:default}
.btn[aria-pressed="true"]{background:var(--accent);color:#1b2433}
.plate :is(button,a,summary,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.readout{font:500 13px/1.35 var(--sans);color:var(--ink-2);font-variant-numeric:tabular-nums}
.readout b{color:var(--ink);font-weight:650}
.good{color:var(--green)!important}.bad{color:var(--red)!important}

/* foot: credit + about */
.plate-foot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:10px;padding-top:7px;font:12px/1.35 var(--sans);color:var(--ink-3)}
.plate-foot details{position:relative}
.plate-foot summary{cursor:pointer;color:var(--ink-2);list-style:none;white-space:nowrap}
.plate-foot summary::-webkit-details-marker{display:none}
.plate-foot summary::after{content:" ▴";font-size:9px}
.plate-about{position:absolute;right:0;bottom:calc(100% + 10px);width:min(560px,86vw);max-height:min(62vh,520px);overflow:auto;background:#0d1a2ef2;border:1px solid var(--hair);text-shadow:none;padding:14px 16px;box-shadow:0 18px 50px -20px #0008;font:14px/1.5 var(--serif);color:var(--ink);z-index:20}
.plate-about h4{font:600 11px/1.2 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin:10px 0 3px!important}
.plate-about h4:first-child{margin-top:0!important}
.plate-about p{margin-top:5px!important}

/* svg text */
.plate svg text{font-family:var(--sans)}
.svg-label{fill:var(--ink-2);font-size:11px}
.svg-axis{stroke:var(--ink-2);stroke-width:1;fill:none}
.svg-grid{stroke:var(--hair-2);stroke-width:1}
.svg-tick{fill:var(--ink-3);font-size:10px}

@media (max-width:620px){
  .plate{height:auto;min-height:0;padding:4px 0 10px}
  .plate-head{grid-template-columns:1fr}
  .plate-nav{overflow-x:auto;justify-self:start;max-width:100%}
  .plate-body{grid-template-columns:1fr;gap:12px}
  .plate-main{min-height:min(92vw,520px)}
  .plate-side{overflow:visible}
  .caption{overflow:visible}
}
@media (prefers-reduced-motion:reduce){.plate *{animation:none!important;transition:none!important}}
/* the site styles lab headings; the plate keeps its own type */
body .plate .panel-title{font-family:var(--sans)!important;color:var(--ink-2)!important}

/* side column: instructions and buttons always visible; the last chart panel absorbs the leftover height */
.plate-side>.caption{flex:0 0 auto;overflow:visible}
.plate-side>.panel:last-child{flex:1 1 0;min-height:70px;display:flex;flex-direction:column}
.plate-side>.panel:last-child>svg,.plate-side>.panel:last-child>div{flex:1 1 auto;min-height:0}
.plate-side>.panel:last-child svg{width:100%;height:100%;max-height:none}
@media (max-width:620px){.plate-side>.panel:last-child{flex:none}.plate-side>.panel:last-child svg{height:auto}}
@media (max-width:620px){.plate-ref{flex-direction:column;gap:2px}}
body .plate .plate-about h4{font-family:var(--sans)!important}

/* medium widths: keep two columns */
@media (max-width:900px) and (min-width:621px){
  .plate-head{grid-template-columns:1fr}
  .plate-nav{justify-self:start;overflow-x:auto;max-width:100%}
  .plate-body{grid-template-columns:minmax(0,1.1fr) minmax(250px,.9fr);gap:0 14px}
  .plate-lede{display:none}
}
/* short plates: tighter type so everything stays on screen */
.plate.is-compact{padding:2px 0 4px;font-size:13.5px}
.plate.is-compact .plate-title{font-size:28px}
.plate.is-compact .plate-lede{font-size:13.5px;margin-top:1px!important}
.plate.is-compact .plate-head{padding-bottom:6px}
.plate.is-compact .plate-body{padding-top:8px}
.plate.is-compact .caption-text{font-size:15px;line-height:1.4}
.plate.is-compact .caption-head{font-size:14.5px}
.plate.is-compact .actions{margin-top:6px}
.plate.is-compact .btn{min-height:34px;padding:6px 11px;font-size:13px}
.plate.is-compact .plate-foot{margin-top:6px;padding-top:4px}
.plate.is-compact .plate-side{gap:6px}
.plate.is-compact .plg-goal-text,.plate.is-compact .eg-b-body .quiet,.plate.is-compact .eg-checks .quiet{display:none}
.plate.is-compact .plate-side{overflow-y:auto;scrollbar-width:thin}
.plate .panel-label{display:none}.plate .panel-title{padding-left:0!important}.plate .plg-goal-text,.plate .plg-meter-read,.eg-b-body .readout,.eg-race,.eg-strip{padding-left:0!important;margin-left:0!important}.plg-legend,.eg-key,.ad-key{padding-left:2px!important}