/* THE WORK FLOOR — site/floor/.
   The office is one Higgsfield picture (floor/workfloor-*.webp), and every kitten already sits
   at its own station in it. Nothing here draws a character, a prop or an icon. The CSS adds
   light on top of the art (screen flicker, scanlines, glow), moves two crops of Higgsfield art
   (the radar sweep cut from Popcat's screen, the falling tear from the tear sheet), tilts the
   floor a little towards the mouse, and draws ordinary UI: outlines, name tags, buttons and
   panels. With reduced motion nothing moves on its own. The floor stays night on the day
   shift; the panels and lists below it follow the theme. Loaded after home.css. */

/* ── the head ─────────────────────────────────────────────────────────── */
.floor-top{--fw:min(1400px,calc(100vw - 48px),calc((100vh - 196px) * 1.7684));position:relative;isolation:isolate;color:#f2edff;padding:16px 0 22px;border-bottom:3px solid var(--mint);
  background:radial-gradient(70% 90% at 50% 0%,rgba(153,69,255,.2),transparent 70%),radial-gradient(60% 60% at 50% 100%,rgba(20,241,149,.08),transparent 70%),#0b0716;
  --text:#f2edff;--text-soft:#d4cbef;--text-faint:#a79dca;--line-2:#5a4a86;--mint-text:#5ef0b4}
.floor-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:10px 40px;width:var(--fw);max-width:none;margin:0 auto 16px;padding:0}
/* The crumb sits over the title's glyph overflow (its line-height is under 1), so it is lifted
   above it: otherwise the lower half of the link clicks the heading instead. */
.crumb{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;font:400 9px/1 var(--pixel);text-transform:uppercase;color:#c0b5dc;text-decoration:none;padding:10px 0;margin:-4px 0}
.crumb:hover{color:var(--mint)}
.floor-top h1{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(40px,4.4vw,60px);line-height:.92;letter-spacing:.01em;margin:6px 0 0;color:#fff;text-shadow:4px 4px 0 #2a1650}
.floor-top h1 em{font-style:normal;color:var(--mint);text-shadow:4px 4px 0 #0a4a33}
.floor-lede{max-width:480px;display:grid;gap:10px}
.floor-lede p{margin:0;font-size:15.5px;line-height:1.55;color:#d4cbef}
.floor-lede .tally{justify-self:start}
.tally-n{display:inline-block;font:400 9px/1.4 var(--pixel);text-transform:uppercase;color:var(--mint-text);padding:7px 9px 6px;box-shadow:inset 0 0 0 2px rgba(94,240,180,.5)}

/* ── the frame: the floor fits the screen on a wide screen, and pans on a phone ── */
.floor-frame{width:var(--fw);margin:0 auto;position:relative;overflow:hidden;background:#0b0716;
  box-shadow:0 0 0 3px var(--mint),0 0 0 6px rgba(153,69,255,.5),12px 12px 0 6px rgba(0,0,0,.55)}
@supports (height:100svh){.floor-top{--fw:min(1400px,calc(100vw - 48px),calc((100svh - 196px) * 1.7684))}}
@media (min-width:701px){.floor-top{--fw:max(min(640px,calc(100vw - 48px)),min(1400px,calc(100vw - 48px),calc((100svh - 196px) * 1.7684)))}}
.floor{position:relative;width:100%;aspect-ratio:2688/1520;container-type:inline-size;transform-origin:50% 55%}
/* The tilt is on only while the mouse is over the floor; at rest the art is drawn flat, pixel for pixel. */
.floor.tilting{transform:perspective(1800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(var(--zoom,1));will-change:transform}
.floor-art{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated;user-select:none;-webkit-user-drag:none;max-width:none}
.fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}

/* Screen light: scanlines, a rolling bar and a soft tint in each monitor's own shape, added
   with the screen blend so the art underneath only ever gets lighter. */
.crt{position:absolute;left:var(--l);top:var(--t);width:var(--w);height:var(--h);clip-path:polygon(var(--p));mix-blend-mode:screen;opacity:.7;
  background:
    linear-gradient(180deg,transparent 0 44%,color-mix(in srgb,var(--glow) 34%,transparent) 50%,transparent 56%) 0 0/100% 300% no-repeat,
    repeating-linear-gradient(180deg,rgba(255,255,255,.07) 0 1px,transparent 1px 3px),
    radial-gradient(closest-side,color-mix(in srgb,var(--glow) 26%,transparent),color-mix(in srgb,var(--glow) 8%,transparent));
  animation:crt-flick 7s steps(1,end) infinite var(--d,0s),crt-roll 6s linear infinite var(--d,0s);transition:opacity .2s steps(2),filter .2s steps(2)}
/* The wall map's light stops at the Director's head and chair, which stand in front of it. */
.crt-map{--l:4%;--t:1%;--w:25%;--h:37.8%;--p:0 43.65%,100% 0,100% 62.17%,71.2% 73.07%,71.2% 62.17%,62% 54.5%,39.2% 59%,30% 66.14%,21.2% 70.1%,21.2% 92%,0 100%;--glow:#5ef0b4;--d:-1.1s}
.crt-cry{--l:48.5%;--t:25.6%;--w:5%;--h:11.6%;--p:0 0,100% 42.2%,100% 100%,0 65.5%;--glow:#ff6b5a;--d:-3.7s}
.crt-grr{--l:68.6%;--t:39.5%;--w:7.4%;--h:12.8%;--p:0 31.25%,100% 0,100% 72.7%,4% 100%;--glow:#5ef0b4;--d:-5.2s}
.crt-csh{--l:90.2%;--t:41.5%;--w:8.1%;--h:17%;--p:0 0,100% 35.3%,93.8% 100%,0 64.7%;--glow:#5ab8ff;--d:-2.4s}
.crt-snp{--l:68%;--t:67.1%;--w:7.8%;--h:17.2%;--p:2.6% 0,100% 35.5%,97.4% 100%,0 68%;--glow:#14f195;--d:-4.4s}
/* CoinMarketCat's two monitors in the front corner, each glass measured on the 2688 × 1520 art:
   the chart (508,1118)–(644,1320) and the checklist (672,1210)–(772,1368). */
.crt-cmc-a{--l:18.9%;--t:73.55%;--w:5.06%;--h:13.29%;--p:0 0,100% 34.65%,100% 100%,0 65.35%;--glow:#8b5cf6;--d:-3.1s}
.crt-cmc-b{--l:25%;--t:79.6%;--w:3.72%;--h:10.4%;--p:0 0,100% 31%,100% 100%,0 69.6%;--glow:#8b5cf6;--d:-5.8s}
.crt-pop{--l:34.2%;--t:66.5%;--w:6%;--h:10.6%;--p:50% 0,85% 15%,100% 50%,85% 85%,50% 100%,15% 85%,0 50%,15% 15%;--glow:#ff4fd8;--d:-.6s;border-radius:50%}
@keyframes crt-flick{0%{opacity:.7}9%{opacity:.95}10%{opacity:.45}11%{opacity:.8}46%{opacity:.62}47%{opacity:.9}48%{opacity:.66}78%{opacity:.74}79%{opacity:.5}80%{opacity:.78}}
@keyframes crt-roll{from{background-position:0 100%,0 0,0 0}to{background-position:0 -50%,0 0,0 0}}
/* A desk in the light: its screen brightens while its station is pointed at. */
.floor:has(.spot[data-cat="director"]:is(:hover,:focus-visible,.tour)) .crt-map,
.floor:has(.spot[data-cat="crying-cat"]:is(:hover,:focus-visible,.tour)) .crt-cry,
.floor:has(.spot[data-cat="grumpy-cat"]:is(:hover,:focus-visible,.tour)) .crt-grr,
.floor:has(.spot[data-cat="cashcat"]:is(:hover,:focus-visible,.tour)) .crt-csh,
.floor:has(.spot[data-cat="snipurr"]:is(:hover,:focus-visible,.tour)) .crt-snp,
.floor:has(.spot[data-cat="coinmarketcat"]:is(:hover,:focus-visible,.tour)) :is(.crt-cmc-a,.crt-cmc-b),
.floor:has(.spot[data-cat="popcat"]:is(:hover,:focus-visible,.tour)) .crt-pop{filter:brightness(1.7) saturate(1.2)}

/* Popcat's radar: the sweep is cut from its own screen (floor/radar-sweep-400.webp), masked to
   the beam, and turned over the radar in the art. */
.sweep{position:absolute;left:37.2%;top:71.8%;width:5.95%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;mix-blend-mode:screen;
  background:url(floor/radar-sweep-400.webp) center/100% 100% no-repeat;
  -webkit-mask-image:conic-gradient(from 0deg,transparent 0deg 2deg,#000 6deg 38deg,transparent 43deg);
  mask-image:conic-gradient(from 0deg,transparent 0deg 2deg,#000 6deg 38deg,transparent 43deg);
  animation:sweep 3.6s linear infinite;filter:brightness(1.25)}
@keyframes sweep{from{rotate:0deg}to{rotate:360deg}}

/* Crying Cat's tears: the four frames of the tear sheet (floor/tear-strip.png). Each tear
   swells at the cheek, falls to the desk and splashes. */
.tear{position:absolute;left:var(--x);top:var(--y);width:1.15cqw;aspect-ratio:56/54;translate:-50% -100%;transform-origin:50% 100%;opacity:0;image-rendering:pixelated;
  background:url(floor/tear-strip.png) 0 0/400% 100% no-repeat;
  animation:tear-fall 3.9s linear infinite var(--d),tear-frame 3.9s steps(1,end) infinite var(--d)}
@keyframes tear-fall{
  0%{transform:translateY(0) scale(.2);opacity:0}
  7%{transform:translateY(0) scale(.6);opacity:1}
  16%{transform:translateY(0) scale(1);opacity:1;animation-timing-function:cubic-bezier(.5,0,1,.6)}
  34%{transform:translateY(var(--fall)) scale(1);opacity:1}
  50%{transform:translateY(var(--fall)) scale(1);opacity:1}
  58%{transform:translateY(var(--fall)) scale(1);opacity:0}
  100%{transform:translateY(var(--fall)) scale(1);opacity:0}}
@keyframes tear-frame{0%{background-position:0 0}18%{background-position:33.333% 0}34%{background-position:66.667% 0}42%{background-position:100% 0}}

/* ── the stations on the floor ─────────────────────────────────────────── */
.spots{position:absolute;inset:0}
.spot{--accent:var(--mint);--accent-text:var(--accent);position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);min-width:44px;min-height:44px;
  margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none}
/* The glowing pixel outline: a 3 px line with square-notched corners, and its glow. */
.spot-ring{position:absolute;inset:0;opacity:0;transition:opacity .16s steps(2);
  filter:drop-shadow(0 0 3px var(--accent)) drop-shadow(0 0 10px color-mix(in srgb,var(--accent) 70%,transparent))}
.spot-ring::before{content:"";position:absolute;inset:0;clip-path:var(--corners);
  box-shadow:inset 0 0 0 3px var(--accent),inset 0 0 0 6px rgba(11,7,22,.55);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.spot:hover .spot-ring,.spot:focus-visible .spot-ring,.spot.tour .spot-ring{opacity:1}
.spot:hover .spot-ring,.spot:focus-visible .spot-ring{animation:ring 1.1s steps(1,end) infinite}
@keyframes ring{50%{filter:drop-shadow(0 0 5px var(--accent)) drop-shadow(0 0 18px color-mix(in srgb,var(--accent) 80%,transparent))}}
.spot:focus-visible .spot-ring::before{box-shadow:inset 0 0 0 3px var(--accent),inset 0 0 0 6px #0b0716,inset 0 0 0 8px #fff}
/* The name tag above each desk. */
.spot-tag{position:absolute;left:var(--tx,50%);bottom:calc(100% + 14px);display:grid;justify-items:center;gap:5px;padding:9px 11px 8px;background:#0b0716;
  white-space:nowrap;text-align:center;pointer-events:none;box-shadow:0 0 0 3px var(--accent),6px 6px 0 3px rgba(0,0,0,.55);
  opacity:0;transform:translate(-50%,6px);transition:opacity .16s steps(2),transform .16s steps(2)}
.spot-tag::after{content:"";position:absolute;left:50%;bottom:-11px;width:12px;height:8px;margin-left:-6px;background:var(--accent);
  clip-path:polygon(0 0,100% 0,100% 50%,66% 50%,66% 100%,34% 100%,34% 50%,0 50%)}
.spot:hover .spot-tag,.spot:focus-visible .spot-tag,.spot.tour .spot-tag{opacity:1;transform:translate(-50%,0)}
.tag-name{font:400 11px/1.2 var(--pixel);color:var(--accent-text);text-transform:uppercase;letter-spacing:.02em}
.tag-beat{font:400 8px/1.3 var(--pixel);color:#e6e0ff;text-transform:uppercase}
.tag-count{font:400 8px/1.3 var(--pixel);color:#a79dca;text-transform:uppercase}
.tag-count.has{color:#0b0716;background:var(--accent);padding:4px 5px 3px}
.floor-hint{margin:16px auto 0;text-align:center;font:400 9px/1.6 var(--pixel);text-transform:uppercase;color:#a79dca;padding:0 16px}
.floor-hint .touch{display:none}
@media (hover:none){.floor-hint .pc{display:none}.floor-hint .touch{display:inline}}

/* Off screen, or with a station open, the floor's lights hold still. */
.floor.asleep .crt,.floor.asleep .sweep,.floor.asleep .tear{animation-play-state:paused}

/* On a phone the floor keeps its height and pans sideways in its frame. The desks stay large
   enough to tap, and their names stay up, since nothing hovers on a touch screen. */
@media (max-width:700px){
  .floor-top{padding-top:12px}
  .floor-head{width:auto;margin:0 0 14px;padding:0 24px}
  .floor-frame{--fh:clamp(330px,60svh,500px);width:auto;margin:0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--mint) #0b0716;
    box-shadow:0 3px 0 0 var(--mint),0 -3px 0 0 var(--mint)}
  .floor-frame::-webkit-scrollbar{height:6px}
  .floor-frame::-webkit-scrollbar-thumb{background:var(--mint)}
  .floor-frame::-webkit-scrollbar-track{background:#0b0716}
  .floor{width:calc(var(--fh) * 1.7684);height:var(--fh);aspect-ratio:auto;transform:none}
  .floor-hint{margin-top:12px}
}
@media (max-width:520px){.floor-head{padding:0 16px}}
@media (hover:none){
  .spot .spot-tag{opacity:1;transform:translate(-50%,0);gap:3px;padding:6px 8px 5px}
  .spot .tag-beat,.spot .tag-count{display:none}
  .spot .tag-name{font-size:9px}
  .spot-ring::before{background:transparent}
}

/* ── the stations, listed ──────────────────────────────────────────────── */
.roster-sec{padding:64px 0 70px;background:linear-gradient(180deg,rgba(153,69,255,.09),transparent 340px),var(--bg)}
.sec-head{margin-bottom:26px}
.sec-head h2{margin-bottom:0}
.roster{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:repeat(7,minmax(0,1fr))}
.roster li{--accent:var(--mint);--accent-text:var(--accent);margin:3px;scroll-margin-top:90px}
.roster-btn{width:100%;height:100%;display:grid;grid-template-rows:auto auto auto 1fr;justify-items:center;align-content:start;gap:6px;padding:18px 4px 16px;
  font:inherit;color:var(--text);text-align:center;cursor:pointer;border:0;background:var(--card);
  box-shadow:0 0 0 3px var(--line-2),6px 6px 0 3px var(--shadow-ink);transition:transform .08s steps(2)}
.roster-btn:hover,.roster-btn:focus-visible{box-shadow:0 0 0 3px var(--accent),6px 6px 0 3px var(--shadow-ink);transform:translateY(-2px)}
.roster-btn:focus-visible{outline:3px solid var(--text);outline-offset:6px}
/* Each sprite at three quarters of its size: its 4 px art pixels become whole 3 px squares. */
.roster-btn img{max-width:100%;height:auto;image-rendering:pixelated;margin-bottom:6px}
.roster-btn:hover img{animation:hop .5s steps(1) infinite}
.r-no{font:400 8px/1.3 var(--pixel);text-transform:uppercase;color:var(--text-faint)}
.r-name{font-family:var(--display);font-size:21px;line-height:1;text-transform:uppercase;color:var(--text)}
.r-count{font:400 8px/1.4 var(--pixel);text-transform:uppercase;color:var(--accent-text);align-self:end;margin-top:4px}
:root[data-theme="light"] .r-count{color:var(--text-soft)}
.r-count.has{color:#0b0716;background:var(--accent);padding:4px 5px 3px}
/* Seven across on a wide screen, four and three below that, two by two on a phone. */
@media (max-width:1080px){.roster{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.roster-btn{padding:18px 8px 16px}}
@media (max-width:640px){.roster{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
@media (max-width:520px){.roster-sec{padding:48px 0 54px}}

/* ── the latest from the floor ─────────────────────────────────────────── */
.feed{padding:80px 0 84px;background:var(--bg-2);border-top:3px solid var(--line);border-bottom:3px solid var(--line)}
.feed-grid{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:48px;align-items:start}
.feed .sub{margin-bottom:28px}
.board{margin:0 8px 0 3px;transform:rotate(-1.5deg);box-shadow:0 0 0 3px #3a2616,0 0 0 7px #0b0716,12px 12px 0 7px var(--shadow-ink)}
.board img{display:block;width:100%;height:auto}
.feed-main{min-width:0;padding-top:6px}
.feed-state,.feed-fail{font:400 9px/1.6 var(--pixel);text-transform:uppercase;color:var(--text-faint);margin:0}
.feed-fail{color:var(--text-soft);font:600 15px/1.5 var(--sans);text-transform:none;padding:18px 20px;background:var(--card);box-shadow:0 0 0 2px var(--line-2)}
.feed-list{list-style:none;margin:0;padding:0;display:grid;gap:18px}
@media (max-width:980px){.feed-grid{grid-template-columns:minmax(0,1fr);gap:34px}.board{max-width:460px}}
@media (max-width:600px){.feed{padding:56px 0 60px}}

/* What a case carries: shown beside the empty board, and again under the feed once cases exist. */
.carries{margin:28px 3px 0;padding:22px 24px 8px;background:var(--card);box-shadow:0 0 0 2px var(--line-2)}
.carries-title{font:400 10px/1.4 var(--pixel);text-transform:uppercase;color:var(--mint-text);margin:0 0 16px}
.carries ol{list-style:none;margin:0;padding:0;counter-reset:c;display:grid;gap:14px}
.carries li{counter-increment:c;position:relative;min-height:44px;padding:4px 0 14px 46px;font-size:15px;line-height:1.55;color:var(--text-soft);border-bottom:2px dashed var(--line)}
.carries li:last-child{border-bottom:0}
.carries li::before{content:counter(c);position:absolute;left:0;top:2px;width:30px;height:30px;display:grid;place-content:center;font:400 11px/1 var(--pixel);color:#04160e;background:var(--mint);clip-path:var(--corners)}
@media (max-width:520px){.carries{padding:18px 16px 4px}}

/* The empty state, on the floor and at every desk. */
.empty{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 18px;align-items:start;padding:22px 22px 22px 18px;background:var(--card);
  box-shadow:0 0 0 3px var(--line-2),8px 8px 0 3px var(--shadow-ink);margin:3px}
.empty[hidden]{display:none}
.empty-icon{width:64px;height:64px;image-rendering:pixelated;filter:grayscale(.35) brightness(.9)}
.empty-title{font:400 12px/1.5 var(--pixel);text-transform:uppercase;color:var(--text);margin:4px 0 10px}
.empty p{font-size:15px}
.empty .cta{margin-top:6px}
.empty .btn{min-height:44px;padding:11px 14px;font-size:12px}
@media (max-width:520px){.empty{grid-template-columns:minmax(0,1fr)}.empty-icon{width:48px;height:48px}}

/* ── a case card ───────────────────────────────────────────────────────── */
.case{--accent:var(--mint);position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;padding:18px 20px 18px 16px;background:var(--card);
  box-shadow:0 0 0 2px var(--line-2),inset 5px 0 0 var(--accent);margin:2px}
.case.lit{box-shadow:0 0 0 3px var(--accent),inset 5px 0 0 var(--accent)}
.case-icon{grid-row:span 2;width:44px;height:44px;image-rendering:pixelated;margin-top:2px}
.case-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 6px;font:400 9px/1.4 var(--pixel);text-transform:uppercase;color:var(--text-faint)}
.case-id{color:var(--text)}
.case-who{display:flex;align-items:center;gap:8px;color:var(--accent-text,var(--text))}
:root[data-theme="light"] .case-who{color:var(--text)}
.case-who img{width:auto;height:26px;image-rendering:pixelated}
.verdict{--v:var(--text-faint);display:inline-block;font:400 9px/1 var(--pixel);text-transform:uppercase;letter-spacing:.02em;color:var(--v);padding:6px 7px 5px;
  box-shadow:inset 0 0 0 2px var(--v);transform:rotate(-2deg)}
.verdict.v-rugged,.verdict.v-honeypot{--v:#ff6b5a}
.verdict.v-not-impressed{--v:var(--orange-text)}
.verdict.v-copycat,.verdict.v-clone{--v:var(--pink-text)}
.verdict.v-whale-move{--v:var(--gold-text)}
.verdict.v-field-report{--v:var(--mint-text)}
.verdict.v-announcement{--v:var(--violet-text)}
.verdict.v-correction,.verdict.v-corrected{--v:var(--text);box-shadow:inset 0 0 0 2px var(--v);border:0;background:repeating-linear-gradient(135deg,transparent 0 5px,color-mix(in srgb,var(--text) 12%,transparent) 5px 7px)}
.verdict.v-no-red-flags-found{--v:var(--text-soft)}
:root[data-theme="light"] .verdict.v-rugged,:root[data-theme="light"] .verdict.v-honeypot{--v:#b8372a}
.case-title{font:800 18px/1.35 var(--sans);color:var(--text);margin:0 0 6px}
.case-sum{font-size:15px;margin:0 0 12px;overflow-wrap:anywhere}
.case-ev-title{font:400 8px/1.4 var(--pixel);text-transform:uppercase;color:var(--text-faint);margin:0 0 6px}
.case-ev{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px}
.case-ev li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;font-size:14.5px;padding-left:16px;position:relative}
.case-ev li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;background:var(--accent)}
.case-ev a{color:var(--text);font-weight:600;text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 70%,transparent);text-decoration-thickness:2px;text-underline-offset:3px;overflow-wrap:anywhere}
.case-ev a:hover{color:var(--accent-text,var(--mint-text))}
/* CashCat's launches and Popcat's callouts: their facts and checks as a two-column list, and the note each carries. */
.verdict.v-launch{--v:var(--gold-text)}
.case-facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:5px 14px;margin:0 0 12px;font-size:14.5px}
.case-facts dt{font:400 8px/1.9 var(--pixel);text-transform:uppercase;color:var(--text-faint)}
.case-facts dd{margin:0;color:var(--text);overflow-wrap:anywhere}
.case-note{font-size:13.5px;color:var(--text-soft);margin:0 0 12px}
.feed-more{font-size:14px;color:var(--text-soft);margin:16px 0 0}
/* Popcat: a spotted coin's red flags in plain words, and its pick with the draft to copy by hand. */
.verdict.v-red-flags{--v:var(--bad)}
:root[data-theme="light"] .verdict.v-red-flags{--v:#b8372a}
.verdict.v-pick{--v:var(--pink-text)}
.flags{margin:0 0 12px;padding:0;list-style:none;display:grid;gap:8px;font-size:14.5px}
.flags li{position:relative;padding-left:18px;overflow-wrap:anywhere}
.flags li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;background:var(--bad)}
.flags b{font-weight:700;color:var(--text)}
.flag-found{color:var(--text-soft)}
.case.pick{box-shadow:0 0 0 3px var(--accent),inset 5px 0 0 var(--accent),8px 8px 0 3px var(--shadow-ink)}
.pick-draft{margin:0 0 12px;padding:12px 14px;font:500 14px/1.55 var(--mono);color:var(--text);background:var(--bg-2);box-shadow:inset 0 0 0 2px var(--line-2);
  overflow-wrap:anywhere;-webkit-user-select:all;user-select:all;cursor:text}
.pick-disclosure{font-size:13px}
.st-pick{margin:0 0 24px}
.st-pick[hidden]{display:none}
@media (max-width:520px){.case-facts{grid-template-columns:minmax(0,1fr);gap:2px 0}.case-facts dd{margin:0 0 6px}}
.ev-where{font:400 12px/1.4 var(--mono);color:var(--text-faint);overflow-wrap:anywhere}
.case-foot{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.case-x,.case-open{display:inline-flex;align-items:center;gap:8px;min-height:40px;font:400 9px/1 var(--pixel);text-transform:uppercase;text-decoration:none;color:var(--text);
  padding:10px 12px 9px;box-shadow:inset 0 0 0 2px var(--accent);background:none;border:0;cursor:pointer}
.case-x:hover,.case-open:hover{background:var(--accent);color:#0b0716}
@media (max-width:520px){.case{grid-template-columns:minmax(0,1fr);padding:16px 14px}.case-icon{grid-row:auto;width:36px;height:36px}}

/* ── a station, open ───────────────────────────────────────────────────── */
.station{--accent:var(--mint);--accent-text:var(--accent);width:min(1080px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 40px);padding:0;border:0;
  background:var(--card);color:var(--text);overflow:hidden;box-shadow:0 0 0 3px var(--accent),12px 12px 0 3px rgba(0,0,0,.6)}
.station[open]{display:flex;flex-direction:column;animation:st-pop .22s steps(3)}
/* The panel slides in but never starts invisible, so a slow first frame still shows it. */
@keyframes st-pop{from{transform:translateY(14px) scale(.985)}}
.station::backdrop{background:rgba(6,3,14,.8);backdrop-filter:blur(3px)}
.st-slot{overflow:auto;overscroll-behavior:contain;max-height:calc(100dvh - 40px);scrollbar-width:thin}
.st-close{position:absolute;top:12px;right:12px;z-index:6;width:44px;height:44px;font:400 14px/1 var(--pixel);color:#fff;background:#0b0716;border:0;cursor:pointer;box-shadow:inset 0 0 0 3px var(--accent)}
.st-close:hover{background:var(--accent);color:#0b0716}
.st{display:grid;grid-template-columns:minmax(0,390px) minmax(0,1fr);grid-template-areas:"desk desk" "id files";grid-template-rows:auto 1fr}

/* The desk: the cat in front of its own monitor, on the pixel floor. */
.st-desk{grid-area:desk;position:relative;height:360px;overflow:hidden;color:#f2edff;display:flex;align-items:flex-end;justify-content:center;padding:0 24px 34px;
  background:radial-gradient(46% 78% at 55% 44%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 72%),#0b0716}
.st-desk::before{content:"";position:absolute;left:0;right:0;bottom:0;height:58px;z-index:0;border-top:3px solid var(--mint);
  background:url(floor-tile-256.png) 0 0/256px 256px repeat;image-rendering:pixelated;box-shadow:inset 0 14px 16px -8px rgba(0,0,0,.75)}
.st-monitor{--mw:336px;position:relative;z-index:1;flex:none;width:var(--mw);max-width:62%;aspect-ratio:4/3;margin-bottom:46px;background:#05030b;overflow:hidden;
  box-shadow:0 0 0 5px #1a1130,0 0 0 8px color-mix(in srgb,var(--accent) 70%,#1a1130),0 0 48px 8px color-mix(in srgb,var(--accent) 42%,transparent)}
.st-desk.wide .st-monitor{--mw:448px;aspect-ratio:16/9;margin-bottom:60px}
.st-screen{display:block;width:100%;height:100%;object-fit:cover}
.st-crt{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(180deg,transparent 0 44%,rgba(255,255,255,.12) 50%,transparent 56%) 0 0/100% 300% no-repeat,
    repeating-linear-gradient(180deg,rgba(255,255,255,.08) 0 1px,transparent 1px 3px);
  animation:crt-roll 5s linear infinite}
.st-monitor::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 110% at 50% 50%,transparent 58%,rgba(0,0,0,.55));animation:st-flick 6s steps(1,end) infinite}
@keyframes st-flick{0%{opacity:1}31%{opacity:.6}32%{opacity:1}74%{opacity:.8}75%{opacity:1}}
.st-sweep{position:absolute;left:50%;top:49.1%;width:71.1%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;mix-blend-mode:screen;
  background:url(floor/radar-sweep-400.webp) center/100% 100% no-repeat;
  -webkit-mask-image:conic-gradient(from 0deg,transparent 0deg 2deg,#000 6deg 38deg,transparent 43deg);
  mask-image:conic-gradient(from 0deg,transparent 0deg 2deg,#000 6deg 38deg,transparent 43deg);
  animation:sweep 3.6s linear infinite}
/* The sprite at one and a quarter times its size, so each 4 px art pixel stays a whole 5 px
   square. It stands a step in front of the monitor, overlapping its edge. */
.st-kitten{position:relative;z-index:2;order:-1;flex:none;width:calc(var(--w) * 1.25px);height:calc(var(--h) * 1.25px);max-width:none;margin-right:-40px;image-rendering:pixelated;
  filter:drop-shadow(0 0 14px rgba(0,0,0,.6))}
.st-id{grid-area:id;padding:24px 28px 30px;align-self:start}
@media (min-width:861px) and (min-height:760px){.st-id{position:sticky;top:0}}
.st-id .agent-no{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font:400 9px/1.4 var(--pixel);text-transform:uppercase;color:var(--text-faint);margin:0 0 10px}
.st-name{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:46px;line-height:1;letter-spacing:.01em;color:var(--text);margin:0 0 12px}
.st-id .agent-links{margin-top:14px}
.st-files{grid-area:files;padding:30px 30px 34px;border-left:3px solid var(--line);min-width:0}
.st-files-title{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font:400 12px/1.4 var(--pixel);text-transform:uppercase;color:var(--text);margin:0 64px 20px 0}
.st-count{font:400 9px/1 var(--pixel);color:#0b0716;background:var(--accent);padding:6px 7px 5px}
.st-count:empty{display:none}
.st-list{display:grid;gap:16px}
.st-list:empty{display:none}
.st-files .empty{margin-bottom:24px}
.st-tpl{position:relative;margin-top:6px;background:var(--bg-2);box-shadow:0 0 0 2px var(--line-2);padding:0 16px}
.st-tpl summary{cursor:pointer;list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;padding:14px 0;font:400 9px/1.5 var(--pixel);text-transform:uppercase;color:var(--text)}
.st-tpl summary::-webkit-details-marker{display:none}
.st-tpl summary::before{content:"";width:8px;height:8px;background:var(--accent);clip-path:polygon(0 0,50% 0,50% 25%,75% 25%,75% 50%,100% 50%,75% 50%,75% 75%,50% 75%,50% 100%,0 100%);transition:transform .15s steps(2)}
.st-tpl[open] summary::before{transform:rotate(90deg)}
.tpl-stamp{font:400 10px/1 var(--pixel);color:var(--bad);border:3px dashed var(--bad);padding:6px 8px 5px;transform:rotate(-5deg);margin-left:auto}
:root[data-theme="light"] .tpl-stamp{color:#b8372a;border-color:#b8372a}
.st-tpl .fine{margin:0 0 12px}
.st-tpl .post{margin-bottom:10px;background:var(--card)}
.st-tpl .post:last-child{margin-bottom:16px}

@media (max-width:860px){
  .st{grid-template-columns:minmax(0,1fr);grid-template-areas:"desk" "id" "files";grid-template-rows:auto}
  .st-files{border-left:0;border-top:3px solid var(--line);padding:24px 20px 28px}
  .st-files-title{margin-right:0}
}
/* On a phone the station rises from the bottom like a drawer. */
@media (max-width:640px){
  .station{width:100vw;max-height:calc(100dvh - 24px);margin:auto 0 0;box-shadow:0 -3px 0 0 var(--accent)}
  .station[open]{animation:rise .24s steps(4)}
  .st-slot{max-height:calc(100dvh - 24px)}
  .st-desk{height:268px;padding:0 12px 28px}
  .st-desk::before{height:48px}
  .st-monitor{--mw:62%;max-width:none;margin-bottom:40px}
  .st-desk.wide .st-monitor{--mw:66%;margin-bottom:52px}
  .st-kitten{width:calc(var(--w) * 1px);height:calc(var(--h) * 1px);margin-right:-30px}
  /* Popcat holds its radar out to the side, so it stands further into its monitor. */
  .st[data-cat="popcat"] .st-kitten{margin-right:-64px}
  .st[data-cat="popcat"] .st-monitor{--mw:58%}
  /* So does CoinMarketCat, waving its phone out to one side and its paw to the other. */
  .st[data-cat="coinmarketcat"] .st-kitten{margin-right:-48px}
  .st[data-cat="coinmarketcat"] .st-monitor{--mw:58%}
  .st-id{padding:20px 18px 24px}
  .st-name{font-size:38px}
  .st-files{padding:22px 16px 26px}
  .st-tpl{padding:0 12px}
}
@keyframes rise{from{transform:translateY(40px)}}

/* ── leaving the floor ─────────────────────────────────────────────────── */
.exit{padding:54px 0;background:var(--bg)}
.exit-inner{display:flex;flex-wrap:wrap;gap:18px 30px;align-items:center;justify-content:space-between}
.exit p{margin:0;font-size:17px;max-width:520px}

/* Reduced motion: home.css stops every animation and transition; the floor also stays flat. */
@media (prefers-reduced-motion:reduce){
  .floor{transform:none!important}
  .tear,.sweep{display:none}
  .crt{opacity:.72}
}

/* A station's link to its cat's agents at Agency HQ (only when HQ is online and runs one). */
.st-live{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin:14px 0 0;padding:10px 12px;background:var(--bg-2);box-shadow:inset 3px 0 0 var(--mint);font-size:14px;color:var(--text-soft)}
.st-live a{font-weight:800;color:var(--text)}
.st-live .st-agent{display:inline-flex;align-items:center;gap:6px}
.st-live .st-mode{font:400 7px/1 var(--pixel);text-transform:uppercase;color:var(--mint-text);box-shadow:inset 0 0 0 1.5px currentColor;padding:4px 5px 3px}