/* Ported from the prototype. Edit here; the prototype is frozen. */

/* ===== figures: interface panels floating in a 3D scene =====
   Scoped under .fig throughout, because the site already owns .card, .chip,
   .btn, .quote, .foot and .tag. Panels are the page's own surface at low
   opacity, so whatever ground they sit on shows through them. */
:root{
  --g-glass:rgba(255,255,255,.66);--g-glass2:rgba(255,255,255,.42);
  --g-edge:rgba(35,31,32,.10);--g-hi:rgba(255,255,255,.9);
  --g-sage:#5E8468;--g-clay:#B3746C;--g-gold:#D4A31C;
  --g-lift:0 1px 1px rgba(35,31,32,.04),0 6px 14px -6px rgba(35,31,32,.14),0 22px 44px -18px rgba(35,31,32,.22);
  --g-lift-hi:0 1px 1px rgba(35,31,32,.05),0 12px 26px -10px rgba(35,31,32,.18),0 40px 70px -28px rgba(35,31,32,.30);
  --g-ground:radial-gradient(120% 90% at 50% 30%,rgba(80,80,68,.10),rgba(80,80,68,0) 70%);
  --g-scale:1
}
.fig{background:none;border-radius:0;overflow:visible;color:var(--u-text)}
[data-ground="ink"],:root[data-theme="dark"]{
  --g-glass:rgba(61,56,57,.62);--g-glass2:rgba(61,56,57,.40);
  --g-edge:rgba(245,245,239,.14);--g-hi:rgba(245,245,239,.16);
  --g-lift:0 1px 1px rgba(0,0,0,.3),0 8px 18px -8px rgba(0,0,0,.5),0 26px 50px -20px rgba(0,0,0,.6);
  --g-lift-hi:0 1px 1px rgba(0,0,0,.35),0 14px 30px -12px rgba(0,0,0,.55),0 44px 80px -30px rgba(0,0,0,.7);
  --g-ground:radial-gradient(120% 90% at 50% 30%,rgba(245,245,239,.07),rgba(245,245,239,0) 70%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --g-glass:rgba(61,56,57,.62);--g-glass2:rgba(61,56,57,.40);
  --g-edge:rgba(245,245,239,.14);--g-hi:rgba(245,245,239,.16);
  --g-lift:0 1px 1px rgba(0,0,0,.3),0 8px 18px -8px rgba(0,0,0,.5),0 26px 50px -20px rgba(0,0,0,.6);
  --g-lift-hi:0 1px 1px rgba(0,0,0,.35),0 14px 30px -12px rgba(0,0,0,.55),0 44px 80px -30px rgba(0,0,0,.7);
  --g-ground:radial-gradient(120% 90% at 50% 30%,rgba(245,245,239,.07),rgba(245,245,239,0) 70%)}}
/* ---------- the spatial system ---------- */.fig .scene{position:relative;height:470px;perspective:1400px;perspective-origin:52% 42%}
/* the stage is inset so no panel can reach the column edge */.fig .stage{position:absolute;top:0;bottom:0;left:0;right:2%;transform-style:preserve-3d;
  transform:rotateX(11deg) rotateZ(-2deg) translateZ(-20px) scale(var(--g-scale))}
.fig .plate{position:absolute;border-radius:26px;background:var(--g-ground);
  transform:translateZ(var(--z)) rotateX(58deg);filter:blur(2px)}
.fig .card{position:absolute;border-radius:15px;padding:13px 14px;
  background:var(--g-glass);border:1px solid var(--g-edge);
  -webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);
  box-shadow:var(--g-lift);transform:translateZ(var(--z)) rotate(var(--rot));
  transform-style:preserve-3d;display:grid;gap:7px;align-content:start}
.fig .card::before{content:"";position:absolute;inset:0;border-radius:15px;pointer-events:none;
  background:linear-gradient(160deg,var(--g-hi),transparent 42%);opacity:.55;mix-blend-mode:overlay}
.fig .card.lg{box-shadow:var(--g-lift-hi)}
.fig .card.sm{padding:10px 12px;gap:5px}
.fig .card.faded{opacity:.55;background:var(--g-glass2);box-shadow:0 6px 18px -10px rgba(35,31,32,.2)}
.fig .tag{position:absolute;top:-9px;left:13px;font-size:9px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--u-bg);background:var(--u-text);padding:2px 7px;border-radius:99px}
.fig .ch{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:1px}
.fig .ch b{font-size:11.5px;font-weight:600;letter-spacing:-.01em}
.fig .ch span{font-size:9.5px;font-weight:500;color:var(--u-text-2)}
.fig .ln{display:block;height:5px;border-radius:3px;background:var(--u-text-2);opacity:.24}
.fig .ln.h{height:6px;opacity:.5}
.fig .card .ln + .ln{margin-top:4px}
.fig .kv{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:10px;padding:3px 0;border-top:1px solid var(--g-edge)}
.fig .kv span{color:var(--u-text-2)}
.fig .kv b{font-weight:600}
.fig .kv.ok b{color:var(--g-sage)}
.fig .kv.warn b{color:var(--g-clay)}
.fig .chip{display:inline-block;font-size:9px;font-weight:600;padding:3px 8px;border-radius:99px;
  border:1px solid var(--g-edge);color:var(--u-text-2)}
.fig .chip.ok{color:var(--g-sage);border-color:color-mix(in srgb,var(--g-sage) 40%,transparent)}
.fig .sd{width:6px;height:6px;border-radius:50%;background:var(--g-sage);flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--g-sage) 18%,transparent)}
.fig .sd.warn{background:var(--g-gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--g-gold) 20%,transparent)}
.fig .sd.bad{background:var(--g-clay);box-shadow:0 0 0 3px color-mix(in srgb,var(--g-clay) 20%,transparent)}
.fig .mini{display:flex;align-items:center;gap:7px;font-size:10px;color:var(--u-text)}
.fig .mini.bad{color:var(--g-clay)}
.fig .stat b{display:block;font-family:var(--u-font-display);font-weight:900;font-size:21px;line-height:1.05;
  letter-spacing:-.01em}
.fig .stat span{font-size:9px;color:var(--u-text-2)}
.fig .two{display:flex;align-items:center;justify-content:space-between;gap:12px}
.fig .spark{width:100%;height:26px;overflow:visible}
.fig .spark polyline{fill:none;stroke:var(--u-text);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;
  vector-effect:non-scaling-stroke}
.fig .bars{display:flex;align-items:flex-end;gap:3px;height:34px}
.fig .bars i{width:6px;border-radius:2px;background:var(--u-text-2);opacity:.4}
.fig .bars i:last-child{opacity:1;background:var(--u-text)}
.fig .ring{position:relative;width:44px;height:44px;flex:none}
.fig .ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.fig .ring circle{fill:none;stroke-width:3}
.fig .ring .rb{stroke:var(--g-edge)}
.fig .ring .rf{stroke:var(--u-text);stroke-linecap:round}
.fig .ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:10px;font-weight:600}
.fig .thumb{border:1px solid var(--g-edge);border-radius:9px;padding:9px;display:grid;gap:4px;background:var(--g-glass2)}
.fig .thumb.tall{padding:11px 9px}
.fig .tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:3px}
.fig .tgrid i{height:17px;border-radius:4px;background:var(--u-text-2);opacity:.16}
.fig .btn{display:inline-block;font-size:9.5px;font-weight:600;padding:5px 10px;border-radius:6px;
  background:var(--u-text);color:var(--u-bg);justify-self:start;margin-top:2px}
.fig .tbl{display:grid;gap:4px}
.fig .tr{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fig .tr b{font-size:10px;font-weight:600;font-variant-numeric:tabular-nums}
.fig .tr .ln{flex:1}
.fig .pick{display:flex;align-items:center;gap:8px;font-size:9.5px;padding:3px 0;border-top:1px solid var(--g-edge)}
.fig .pick span{font-family:ui-monospace,monospace;color:var(--u-text-2);flex:none}
.fig .pick .ln{flex:1}
.fig .pick b{font-weight:600;flex:none}
.fig .flow{display:flex;align-items:center;gap:5px;margin:2px 0 4px}
.fig .fs{flex:1;display:grid;gap:4px;justify-items:center}
.fig .fs i{width:100%;height:3px;border-radius:2px;background:var(--u-text-2);opacity:.25}
.fig .fs span{font-size:8px;color:var(--u-text-2)}
.fig .fs.on i{opacity:1;background:var(--u-text)}
.fig .fs.now i{opacity:1;background:var(--g-gold)}
.fig .fs.on span,.fig .fs.now span{color:var(--u-text)}
.fig .cal{display:grid;gap:3px}
.fig .cs{display:flex;align-items:center;gap:8px;font-size:9.5px;padding:4px 7px;border-radius:6px;
  border:1px solid transparent}
.fig .cs span{font-family:ui-monospace,monospace;color:var(--u-text-2);flex:none}
.fig .cs.free{opacity:.4}
.fig .cs.buf{background:color-mix(in srgb,var(--u-text-2) 10%,transparent)}
.fig .cs.buf em{font-style:normal;font-size:8.5px;color:var(--u-text-2)}
.fig .cs.job{background:var(--u-text);color:var(--u-bg);border-color:var(--u-text)}
.fig .cs.job span{color:var(--u-bg);opacity:.7}
.fig .cs.job b{font-weight:600}
.fig .lk{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:10px;
  padding:4px 0;border-top:1px solid var(--g-edge)}
.fig .lk span{color:var(--u-text-2);font-size:9px}
.fig .swatch{display:flex;gap:5px}
.fig .swatch i{width:16px;height:16px;border-radius:5px;border:1px solid var(--g-edge)}
.fig .swatch i.a{background:#8C5A3C}
.fig .swatch i.b{background:#9BA69A}
.fig .swatch i.c{background:#C0704A}
.fig .swatch i.on{outline:1.5px solid var(--u-text);outline-offset:2px}
.fig .quote{font-size:10.5px;line-height:1.45;color:var(--u-text)}
.fig .foot{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:2px}
.fig .days{display:flex;justify-content:space-between;font-size:8px;color:var(--u-text-2);margin-top:1px}
.fig .ev{display:flex;align-items:center;gap:8px;font-size:9.5px;padding:3px 0;border-top:1px solid var(--g-edge)}
.fig .ev span{color:var(--u-text-2);flex:none;font-variant-numeric:tabular-nums}
.fig .ev .ln{flex:1}
.fig .ev b{font-weight:600;flex:none;font-size:9px}
.fig .sheet{display:grid;grid-template-columns:repeat(5,1fr);gap:3px}
.fig .sheet i{height:12px;border-radius:2px;background:var(--u-text-2);opacity:.18}
.fig .sheet i.bad{background:var(--g-clay);opacity:.75}
.fig .quote{border:0;padding:0;margin:0;font-weight:400;quotes:none}
.fig .foot{border:0;padding:0}
.fig .btn{border:0;white-space:nowrap;line-height:1.2}
.fig .chip{background:none}

/* the foundation: a slab, not a plate. Opaque, sharp, grained like every other
   ink surface, and tilted less than the plates so the etching stays readable.
   It takes the ground's text colour, so on an ink band it turns to paper. */
.fig .slab{position:absolute;border-radius:22px;color:var(--u-bg);
  /* grain and the top-edge light are background layers, not pseudo-elements:
     an overflow:hidden slab inside the 3D stage made the cards in front of it
     draw their backdrops at the wrong size */
  background:linear-gradient(to bottom,rgba(245,245,239,.12),transparent 40%),
    var(--u-grain) center/cover,var(--u-text);
  background-blend-mode:normal,overlay,normal;
  transform:translateZ(var(--z)) rotateX(44deg);
  /* the etching sits bottom-right: the cards resting on the slab land on its
     bottom-left, and a line of type half-covered reads as a mistake */
  display:grid;align-content:end;justify-items:end;padding:0 20px 13px;
  box-shadow:0 34px 60px -28px rgba(35,31,32,.55),inset 0 1px 0 rgba(245,245,239,.14)}
/* two short lines rather than one long one, so the cards resting on the slab's
   left have somewhere to land */
.fig .slab .et{position:relative;font-size:8px;font-weight:600;letter-spacing:.13em;line-height:1.6;
  text-transform:uppercase;opacity:.8;text-align:right;max-width:54%}
.fig .slab .et b{display:block;font-family:var(--u-font-display);font-weight:900;font-size:15px;
  letter-spacing:0;text-transform:none;opacity:1;margin-bottom:1px}
.fig .mods{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:2px}
.fig .mod{border:1px solid var(--g-edge);border-radius:8px;padding:6px 8px;display:grid;gap:1px;
  background:var(--g-glass2)}
.fig .mod span{font-size:8.5px;color:var(--u-text-2)}
.fig .mod b{font-size:10.5px;font-weight:600}
.fig .mod b.ok,.fig .ev b.ok{color:var(--g-sage)}

/* arrive once, then breathe */
@keyframes g-arrive{from{opacity:0;transform:translateZ(calc(var(--z) - 60px)) translateY(22px) rotate(var(--rot))}
  to{opacity:1;transform:translateZ(var(--z)) translateY(0) rotate(var(--rot))}}
@keyframes g-arrivef{from{opacity:0;transform:translateZ(calc(var(--z) - 60px)) translateY(22px) rotate(var(--rot))}
  to{opacity:.55;transform:translateZ(var(--z)) translateY(0) rotate(var(--rot))}}
@keyframes g-breathe{
  0%,100%{transform:translateZ(var(--z)) translateY(0) rotate(var(--rot))}
  30%{transform:translateZ(calc(var(--z) + 7px)) translateY(-6.5px) rotate(calc(var(--rot) - .2deg))}
  62%{transform:translateZ(calc(var(--z) - 3px)) translateY(2px) rotate(calc(var(--rot) + .15deg))}}
.fig .card{opacity:0;animation:g-arrive .9s cubic-bezier(.16,1,.3,1) var(--d) forwards,
  g-breathe 6.5s ease-in-out calc(var(--d) + .9s) infinite;will-change:transform,opacity}
.fig .card.faded{animation:g-arrivef .9s cubic-bezier(.16,1,.3,1) var(--d) forwards,
  g-breathe 8.5s ease-in-out calc(var(--d) + .9s) infinite}
.fig .plate{opacity:0;animation:g-arrive 1s cubic-bezier(.16,1,.3,1) var(--d) forwards}
/* the slab settles and then stays put: the one still thing under everything that moves */
@keyframes g-settle{from{opacity:0;transform:translateZ(calc(var(--z) - 90px)) translateY(34px) rotateX(44deg)}
  to{opacity:1;transform:translateZ(var(--z)) translateY(0) rotateX(44deg)}}
.fig .slab{opacity:0;animation:g-settle 1.2s cubic-bezier(.16,1,.3,1) var(--d) forwards}

/* the three-across problem columns take the same scene, smaller */
.prob .fig{--g-scale:.78}
.prob .fig .scene{height:330px}
.prob .fig .stage{left:-4%;right:4%}
.prob .fig .scene{height:290px}
.sh .fig{--g-scale:.95;max-width:none}
.sh .fig .scene{height:420px}
@media (max-width:1100px){.fig{--g-scale:.88}}
@media (max-width:820px){.fig{--g-scale:.8}.fig .scene{height:330px}}
@media (prefers-reduced-motion:reduce){
  .fig .card,.fig .plate{animation:none;opacity:1;transform:translateZ(var(--z)) rotate(var(--rot))}
  .fig .slab{animation:none;opacity:1;transform:translateZ(var(--z)) rotateX(44deg)}
  .fig .card.faded{opacity:.55}}

/* layout rules that used to live beside the flat figures */
.ph-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
@media (max-width:820px){.ph-grid{grid-template-columns:1fr}}
.prob .fig{margin-bottom:.25rem}