/* THE PLATE — 100 questions, on his own plate design.
   ===================================================================
   SCOPED ENTIRELY UNDER .plt, for the same reason /projects/meeting/ui.css
   is scoped under .mtz: glass.css already owns --bg, --fg, --line, --card,
   --mono, --ease and the names .wrap, .card and h1. Unscoped, the two
   stylesheets would each win somewhere and the page would be a coin toss.
   Never add an unscoped rule to this file.

   THIS IS A PORT, NOT A DESIGN. David, 2026-10-16, on the version I built
   from scratch: "I preferred the previous 3D (almost vector based) plate
   visual, this one is too technical, looks like it's trying to be
   hyperrealistic and is too flashy (hate the scanner line, that doesn't
   make any sense at all)... This one looks really bad even the design and
   the [How to use it] kind of approach and the color scheme is totally
   off." He is right, and the fix is not to tune mine — it is to use his.
   Every value below is lifted from One_Hundred_Ideas.html.

   WHAT MAKES IT READ AS VECTOR RATHER THAN HYPERREAL, and what I had
   missed: THE PLATE IS FLAT. It carries no resting rake at all. The only
   3D is a pointer parallax of at most 4.5 and 5.5 degrees that springs
   back to flat when the pointer leaves, plus a lattice floating 16px above
   the slab. There is no raked perspective, no engine-turned bitmap, no
   specular sweep and NO SCAN LINE — the whole of that is gone.

   GONE WITH IT: the canvas deck, the sheen layer, the coordinate rails
   that lit, the liquid meniscus, the measured fit(), and my palette.
   =================================================================== */

.plt {
  /* HIS DARK THEME, VERBATIM from the file's [data-theme="dark"] block.
     Dark rather than his light default only because davidts.ai is dark;
     the L dial carries his light values, which are the file's own. */
  --plate: #141414;
  --plate-2: #0b0b0b;
  --pcard: #0c0c0c;
  --pline: #2a2a2a;
  --pline-2: #1c1c1c;
  --pink: #ffffff;
  --pink-2: #c9c9c9;
  --pink-3: #909090;
  --pink-4: #707070;
  --well: #050505;
  --well-line: #3a3a3a;
  --well-hi: rgba(255, 255, 255, .14);
  --pshadow: 0 1px 0 rgba(255, 255, 255, .03), 0 18px 44px -30px rgba(0, 0, 0, 1);
  --skip-a: #333838;
  --skip-b: #232828;
  --pbg: #000000;

  position: relative;
  z-index: 2;
  background: var(--pbg);
  color: var(--pink-2);
}


/* ---- THE GROUND. David, 2026-10-19: "something really cool/gradient in the
   background that's inspiring and softly breathes or moves".
   IT IS THE PLATE'S OWN PALETTE. The blobs are his RAMP — the same five
   colours that tint a used well by its position in the hundred — so the
   page and the data are lit by one set of hues rather than two. Nothing
   here is a new colour.
   TRANSFORM AND OPACITY ONLY, NO BLEND MODES. glass.css records what a
   full-viewport fixed layer with a blend mode cost on the home page: the
   compositor re-reads the backdrop every frame, 12 points of frame rate,
   worst frame 83ms. These blobs animate transform alone, which the
   compositor handles without ever touching the backdrop. ---- */
.plt-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.plt-bg i {
  position: absolute;
  display: block;
  border-radius: 50%;
  /* A radial with a soft tail rather than a hard edge, so the blobs read as
     light in the room rather than as shapes on the page. */
  filter: blur(60px);
  will-change: transform;
}

/* Four, because three leaves a corner empty and five muddies to grey. */
.plt-bg .b1 { width: 62vw; height: 62vw; left: -14vw; top: -18vw;
  background: radial-gradient(circle, rgba(47,90,148,.38), rgba(47,90,148,0) 68%);
  animation: plt-d1 54s ease-in-out infinite alternate; }
.plt-bg .b2 { width: 54vw; height: 54vw; right: -12vw; top: -8vw;
  background: radial-gradient(circle, rgba(195,161,143,.42), rgba(195,161,143,0) 68%);
  animation: plt-d2 67s ease-in-out infinite alternate; }
.plt-bg .b3 { width: 58vw; height: 58vw; left: 8vw; bottom: -24vw;
  background: radial-gradient(circle, rgba(94,85,102,.33), rgba(94,85,102,0) 68%);
  animation: plt-d3 73s ease-in-out infinite alternate; }
.plt-bg .b4 { width: 46vw; height: 46vw; right: 4vw; bottom: -16vw;
  background: radial-gradient(circle, rgba(168,135,92,.35), rgba(168,135,92,0) 68%);
  animation: plt-d4 61s ease-in-out infinite alternate; }

@keyframes plt-d1 { from { transform: translate3d(0,0,0) scale(1); }
                    to   { transform: translate3d(9vw,7vh,0) scale(1.14); } }
@keyframes plt-d2 { from { transform: translate3d(0,0,0) scale(1.08); }
                    to   { transform: translate3d(-11vw,9vh,0) scale(.94); } }
@keyframes plt-d3 { from { transform: translate3d(0,0,0) scale(.96); }
                    to   { transform: translate3d(12vw,-8vh,0) scale(1.16); } }
@keyframes plt-d4 { from { transform: translate3d(0,0,0) scale(1.1); }
                    to   { transform: translate3d(-8vw,-10vh,0) scale(.98); } }

/* THE BREATH. One slow swell over the whole field, 19s, so the page is
   never quite still even when the blobs are at the slow part of their
   drift. It is opacity on a wrapper — still no blend mode, still no
   backdrop read. */
.plt-bg { animation: plt-breathe 19s ease-in-out infinite; }

@keyframes plt-breathe {
  0%, 100% { opacity: .78; }
  50% { opacity: 1; }
}

/* The page shows no title — a project page opens on the product now — but
   it still needs one h1 for the document outline and for anyone arriving
   with a screen reader. His words, off the screen rather than absent. */
.plt-h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- THE TITLE. A slim line above the plate, not a hero: a project page
   opens on the product, and he asked for context rather than for a title
   card back. ---- */
/* ONE LINE, NOT A STACK. Title and standfirst share a row, so the strip
   costs the plate about 120px instead of 180 — and the plate is sized from
   what is left, so every pixel here comes straight off the wells. */
.plt-top { padding: clamp(4.4rem, 8vh, 5.6rem) 0 clamp(.7rem, 1.4vh, 1.1rem); }
.plt-top .plt-in { display: flex; align-items: baseline; flex-wrap: wrap;
  gap: .3rem 1rem; }

.plt-t {
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--pink);
  margin: 0;
}

.plt-s {
  margin-top: 0;
  font-size: clamp(.95rem, 1.5vw, 1.1rem);
  font-weight: 300;
  color: var(--pink-3);
  text-wrap: pretty;
}

/* ---- THE EXPLAINER, under the object. Three blocks: why it exists, how to
   use it, how it works. ---- */
/* THE FOOT OF A LIGHT PAGE ON A DARK SITE. The global rail and footer below
   are near-black, so the explainer ends in a hard horizontal line against
   them — the same class of join as the one on /projects/, and just as
   visible. The tail fades the page into the site's own ink instead. */
.plt-ex::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(120px, 18vh, 220px);
  background: linear-gradient(180deg, transparent, var(--plt-foot, #060607));
  pointer-events: none;
}

.plt-ex {
  position: relative;
  padding: clamp(3rem, 7vh, 5.5rem) 0 clamp(4rem, 9vh, 7rem);
  border-top: 1px solid var(--pline);
  margin-top: clamp(2rem, 5vh, 4rem);
}

.plt-ex-g {
  display: grid;
  gap: clamp(1.6rem, 3vw, 2.6rem);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.plt-blk h2 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--pink-4);
  margin: 0 0 .8rem;
}

.plt-blk p {
  font-size: clamp(.95rem, 1.4vw, 1.05rem);
  font-weight: 300;
  line-height: 1.62;
  text-wrap: pretty;
  color: var(--pink-2);
  margin: 0;
}

/* ---- SCREEN ONE IS THE PLATE. David, 2026-10-16: "let's put plate up
   top, this will be the entire screen, for all Projects, I don't want
   anything up top, project pages get to be an exception and start as a
   full-page product site." So there is no 100svh title card above this and
   no section label — the object is the first thing on the page. ---- */
/* The title eats into screen one, so the plate's screen is what is left. */
.plt-one {
  min-height: calc(100svh - 150px);
  display: grid;
  align-content: center;
  padding: clamp(5rem, 10vh, 7rem) 0 clamp(2rem, 5vh, 4rem);
}

.plt-in {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(1.2rem, 4vw, 3.4rem);
}

/* His board-grid: the plate, and a 320px column beside it. */
.plt-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(2rem, 4vw, 56px);
  align-items: start;
  justify-content: space-between;
}

/* ---- THE PLATE. His .plate-stage / .plate-body / .plate-inner, with the
   600px cap lifted to 640 because this page gives it a whole screen. ---- */
.plt-stage {
  perspective: 1400px;
  max-width: 640px;
  width: 100%;
}

.plt-body {
  position: relative;
  background: linear-gradient(160deg, var(--plate), var(--plate-2));
  border: 1px solid var(--pline);
  padding: 20px 20px 34px;
  transform-style: preserve-3d;
  transition: transform .4s cubic-bezier(.2, .7, .3, 1);
  box-shadow: var(--pshadow);
}

/* THE A1 ORIENTATION NOTCH — a clipped triangle in the top-left corner,
   which is the one detail that says "plate" before anything else does. */
.plt-body::before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 24px;
  height: 24px;
  background: var(--pbg);
  border-right: 1px solid var(--pline);
  border-bottom: 1px solid var(--pline);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* The lattice floats 16px above the slab. This is the whole of the depth. */
.plt-inner {
  display: grid;
  grid-template-columns: 20px repeat(10, 1fr);
  gap: 4px;
  align-items: center;
  transform: translateZ(16px);
}

/* The row letter at the head of each row, in his 20px column. */
.plt-rl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: .08em;
  color: var(--pink-4);
  text-align: center;
}

/* THE BANDS ARE VISIBLE AT REST NOW. Each category is exactly two rows, and
   until this the plate read as one undifferentiated grid — you could not see
   that it was organised at all without filtering. A hairline every second row
   shows the structure without adding a colour or a word. */
.plt-inner .plt-rl:nth-of-type(odd) { position: relative; }
.plt-inner .plt-rl:nth-of-type(odd)::before {
  content: '';
  position: absolute;
  left: -6px;
  right: -2px;
  top: -2px;
  border-top: 1px solid var(--pline);
}
.plt-inner .plt-rl:first-of-type::before { border-top-color: transparent; }

.plt-w {
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--well);
  position: relative;
  padding: 0;
  border: 0;
  cursor: pointer;
  box-shadow:
    inset 0 0 0 1px var(--well-line),
    inset 0 3px 5px -3px rgba(0, 0, 0, .4);
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s;
}

/* THE SWIM. A soft highlight that breathes inside each well, staggered
   along the diagonal by --wd so the plate is alive without anything
   sweeping across it. */
.plt-w::before {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, var(--well-hi), transparent 62%);
  opacity: .25;
  animation: plt-swim 5.2s ease-in-out infinite;
  animation-delay: var(--wd, 0s);
}

@keyframes plt-swim {
  0%, 100% { opacity: .16; transform: scale(.86); }
  50% { opacity: .5; transform: scale(1.06); }
}

/* HOVER GROWS THE WELL. This is how a 30px well is read, and it moves
   nothing around it — a scale on a grid item reflows no neighbour. */
.plt-w:hover,
.plt-w:focus-visible {
  outline: 0;
  transform: scale(1.24);
  box-shadow: inset 0 0 0 1px var(--pink), 0 6px 14px -8px rgba(0, 0, 0, .6);
  z-index: 2;
}

/* SELECTED — a ring, not a fill, so it never reads as used. */
.plt-w[data-on="1"] {
  box-shadow: inset 0 0 0 1px var(--pink), 0 0 0 2px var(--pink-4);
  z-index: 2;
}

/* USED — filled from the ramp across the hundred, which is why the plate
   develops a gradient as it empties rather than a set of category colours. */
.plt-w[data-used="1"] {
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, .62), transparent 52%),
    linear-gradient(145deg, var(--wa), var(--wb));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .22), 0 0 10px -2px var(--wa);
}

.plt-w[data-used="1"]::before { animation: none; opacity: 0; }

/* FILTERED OUT — his skip treatment: greyed, not hidden, not a warning. */
.plt-w[data-off="1"] {
  background: radial-gradient(circle at 30% 26%, rgba(255, 255, 255, .4), transparent 52%),
              linear-gradient(145deg, var(--skip-a), var(--skip-b));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14);
  opacity: .45;
  pointer-events: none;
}

.plt-w[data-off="1"]::before { animation: none; opacity: 0; }

.plt-foot {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 11px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.plt-coord {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--pink-4);
}

/* ---- THE SIDE COLUMN. His .side: a dashed instruction box, the readout,
   the three counts, the randomizer. The instructions are a quiet note
   beside the object, NOT a row of numbered cards underneath it — that
   approach is the one he called bad. ---- */
.plt-side {
  display: grid;
  gap: 14px;
  align-content: start;
}

.plt-instr {
  border: 1px dashed var(--pline);
  padding: 13px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.plt-instr p {
  font-size: .9rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--pink-3);
  text-wrap: pretty;
  margin: 0;
}

.plt-read {
  border: 1px solid var(--pline);
  background: var(--pcard);
}

.plt-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--pline-2);
}

.plt-led {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pink-4);
  flex: none;
}

.plt-st { margin-left: auto; }

/* THE READING. Sized to the longest of the hundred before anything is
   clicked, by a hidden twin on the same grid cell, so swapping questions
   never moves the panel. */
.plt-rbody { padding: 14px 14px 16px; }

.plt-qbox { display: grid; }
.plt-qbox > .plt-q { grid-area: 1 / 1; }
.plt-q-ghost { visibility: hidden; pointer-events: none; }

.plt-q {
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: -.01em;
  color: var(--pink);
  text-wrap: pretty;
  margin: 0;
}

.plt-meta {
  display: flex;
  gap: 8px;
  margin-bottom: 9px;
}

.plt-meta .plt-coord:first-child { color: var(--pink-2); }

.plt-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 13px;
}

/* ---- CONTROLS. 44px, because on a phone they are the only thing that
   can be. ---- */
.plt-b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 44px;
  padding: 0 .95rem;
  border: 1px solid var(--pline);
  background: transparent;
  color: var(--pink-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}

.plt-b:hover { border-color: var(--pink-3); color: var(--pink); }
.plt-b.on { border-color: var(--pink); color: var(--pink); }
.plt-b-ic { min-width: 44px; padding: 0; font-size: 13px; letter-spacing: 0; }

.plt-deal {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--pink);
  background: var(--pink);
  color: var(--pbg);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity .2s ease;
}

.plt-deal:hover { opacity: .82; }

/* The three counts, his stat-row. */
.plt-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.plt-stat {
  border: 1px solid var(--pline);
  padding: 10px 11px;
  display: grid;
  gap: 3px;
}

.plt-stat b {
  font-size: 1.3rem;
  font-weight: 300;
  line-height: 1;
  color: var(--pink);
}

/* The band filter, under the plate rather than in the side column. */
/* THE DECK SWITCH. Two buttons, both always present, so picking one cannot
   change the row's width. It sits above the band filter because choosing a
   deck comes before narrowing it. */
.plt-decks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
  grid-column: 1 / -1;
}

.plt-bands {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
  grid-column: 1 / -1;
}

/* ---- PHONE. The side column drops under the plate; nothing else changes,
   because there is nothing else to change. ---- */
@media (max-width: 900px) {
  .plt-board { grid-template-columns: 1fr; gap: 1.6rem; }
  /* THE QUESTION COMES BEFORE THE INSTRUCTIONS on a phone. Reading order
     put the dashed note first, which pushed the readout 81px under the
     fold — so the one thing a reader needs after tapping a well was the one
     thing off the screen. */
  .plt-side { display: flex; flex-direction: column; }
  .plt-read { order: 1; }
  .plt-deal { order: 2; }
  .plt-stats { order: 3; }
  .plt-instr { order: 4; }
  .plt-side > [data-act="reset"] { order: 5; }
  .plt-stage { max-width: none; margin: 0 auto; }
  .plt-one { min-height: 0; padding: clamp(5rem, 10vh, 7rem) 0 3rem; }
  .plt-acts .plt-b { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .plt-w::before { animation: none; }
  .plt-body { transition: none; }
  .plt-bg, .plt-bg i { animation: none; }
}

/* ---- LIGHT, AND IT IS THE DEFAULT. His light values, verbatim from the
   :root block of One_Hundred_Ideas.html — the palette the plate was drawn
   in. The dark block above is his too, from the same file's dark theme; the
   page simply carries both now and lets the reader choose.
   data-l is written by plate.js on <html> from the stored choice, or from
   prefers-color-scheme on a first visit. ---- */
html[data-l="L1"] .plt {
  --plate: #f2f2f2;
  --plate-2: #e8e8e8;
  --pcard: #ffffff;
  --pline: #dcdcdc;
  --pline-2: #eaeaea;
  --pink: #000000;
  --pink-2: #4d4d4d;
  --pink-3: #707070;
  --pink-4: #909090;
  --well: #fafafa;
  --well-line: #cbcbcb;
  --well-hi: rgba(255, 255, 255, .9);
  --pshadow: 0 1px 0 rgba(0, 0, 0, .04), 0 18px 40px -32px rgba(0, 0, 0, .5);
  --skip-a: #d9dddd;
  --skip-b: #bec4c4;
  --pbg: #ffffff;
  --plt-foot: #060607;
}

/* ONE THING HAS TO GO ON A LIGHT PAGE, and it took four wrong guesses to
   find: `body::after`. glass.css paints a fixed, z-60 scrim there —
   rgba(6,6,7,.9) fading out — so the white fixed nav stays readable over
   whatever is under it. Invisible on a dark page; a black smear across the
   top 100px of a white one.
   The nav itself needs no help either way: .topnav carries
   mix-blend-mode: difference and inverts against the page. Forcing colours
   on it gives white-on-white and the nav disappears. */
html[data-l="L1"] body::after { background: none; }

/* THE GROUND IS BUILT FOR A LIGHT PAGE — four pale blooms on white. On dark
   they would glow like lamps, so they come down to a wash. */
html[data-l="L0"] .plt-bg { opacity: .55; }
html[data-l="L0"] .plt-bg i { filter: blur(80px); }

/* ---- THE THEME SWITCH. One control, 44px, no label that moves: the glyph
   swaps and the button holds its place and its size. ---- */
.plt-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: none;
  border: 1px solid var(--pline);
  background: transparent;
  color: var(--pink-2);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}

.plt-theme:hover { border-color: var(--pink-3); color: var(--pink); }

/* Only one glyph is ever shown, and both are in the DOM, so swapping themes
   cannot change the button's width. */
.plt-theme .ic-d { display: none; }
html[data-l="L0"] .plt-theme .ic-d { display: inline; }
html[data-l="L0"] .plt-theme .ic-l { display: none; }

.plt-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.plt-bar-row .plt-deal { flex: 1 1 auto; }