/* ════════════════════════════════════════════════════════════════════
   L8 ARCADE · the house skin  ·  ANIME × COMIC × '95 CLASSROOM × GAMER
   ──────────────────────────────────────────────────────────────────
   7SLF STUDIOS / OMNISOFT

   THIS SHEET DOES NOT INVENT A PALETTE. freecoding.school already
   settled this look properly across 1,200 pages — GINTAMA ink and
   screentone crossed with Rick-and-Morty portal green, then dressed as
   a 1995 classroom. The tokens below are ITS tokens, lifted from
   Apps/freecoding.school/assets/comic.css and classroom.css so the
   whole ecosystem speaks one language instead of two dialects.

   Two decisions inherited from there, on purpose:
     · NO SECOND DISPLAY FACE for prose. That site tried Bangers and
       removed it — display type separates itself by weight and
       tracking. Special Elite (ditto typewriter) and Caveat (chalk
       handwriting) appear only where a machine or a hand would have
       made the mark.
     · INK IS WARM (#2a2620), not black. Cold black on warm paper is
       the tell that a comic skin was applied by someone who had not
       looked at a comic.

   The GAMER leg is the one thing freecoding does not have, so it is the
   one thing added: HUD numerals, segmented energy bars, and the live
   instruments in l8-gauges.js.

   LOAD ORDER — last wins:
     l8-modern.css  →  l8-cinema.css  →  l8-arcade.css
   then l8-cinema.js (circadian) and l8-gauges.js (instruments).
   ════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=Special+Elite&family=Inter:wght@400;500;600;700;800;900&family=Press+Start+2P&display=swap');

:root{
  /* ── chalkboard ─────────────────────────────────────────────── */
  --board:#2f4a3d; --board-2:#263d33; --board-edge:#1b2b24; --board-3:#1f342b;
  --chalk:#f2f0e4; --chalk-dim:#c8d2c4;
  --chalk-yellow:#f5e6a8; --chalk-pink:#f2c4cc; --chalk-blue:#bcd4e6;

  /* ── paper & pulp ───────────────────────────────────────────── */
  --paper:#fdfbf2; --paper-2:#f5f0df; --card:#fffdf6;
  --rule:#a9c3dd; --margin-red:#e39aa0;
  --ditto:#e8e2f2; --ditto-ink:#5b4a8a;

  /* ── wood, cork, metal ──────────────────────────────────────── */
  --oak:#b07d4a; --oak-2:#8d6038; --oak-3:#6d4726;
  --cork:#c9a271; --cork-2:#ab8455;
  --metal:#b9bcc4; --metal-2:#8d9199;

  /* ── the pencil box ─────────────────────────────────────────── */
  --pencil:#f2c014; --eraser:#f2a3a3; --ferrule:#c3c6cd; --lead:#4a4a52;
  --crayon-red:#c8483d; --crayon-blue:#3f6ea8; --crayon-green:#5a8f4a;
  --crayon-orange:#e08a3c; --crayon-purple:#8a6bb0; --crayon-teal:#4aa39a;

  /* ── gintama × rick and morty ───────────────────────────────── */
  --gin-red:#d1483f; --gin-silver:#cdd9e2; --gin-blue:#4a6b8a;
  --portal:#a8bf8f; --portal-2:#c2d4a5; --slime:#8fbf6f;
  --rm-cyan:#8fb8d4; --rm-yellow:#f2c14e; --rm-pink:#e08a9a;

  /* ── ink ────────────────────────────────────────────────────── */
  --ink:#2a2620; --ink-2:#4d4639; --ink-soft:rgba(42,38,32,.55);
  --hairline:#ddd3ba;

  /* semantic, mapped onto the crayons so nothing new is introduced */
  --ok:var(--crayon-green); --warn:var(--pencil); --bad:var(--crayon-red);
  --info:var(--crayon-blue); --special:var(--crayon-purple);

  --txt:var(--chalk); --dim:var(--chalk-dim); --dimmer:#93a693;

  /* ── type ───────────────────────────────────────────────────── */
  --f-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --f-display:var(--f-body);          /* weight + tracking, not a second face */
  --f-hand:'Caveat',cursive;          /* a hand wrote this                    */
  --f-ditto:'Special Elite','Courier New',monospace;  /* a machine printed it */
  --f-hud:'Press Start 2P','Courier New',monospace;   /* the arcade cabinet   */
  --f-mono:ui-monospace,'Cascadia Code',Consolas,Menlo,monospace;

  /* ── comic geometry ─────────────────────────────────────────── */
  --ink-w:3px;
  --pop:5px 5px 0 var(--ink);
  --pop-sm:3px 3px 0 var(--ink);
  --pop-lg:8px 8px 0 var(--ink);
  --r:12px; --r-sm:8px; --frame:14px;

  /* ── gauge engine tokens ────────────────────────────────────── */
  --g-ink:var(--ink); --g-face:#24382e; --g-track:rgba(27,43,36,.75);
  --g-tick:rgba(242,240,228,.62); --g-label:var(--chalk); --g-live:var(--portal);
  --g-halftone:#f2f0e4; --g-rim:rgba(242,240,228,.18);
  --g-display:var(--f-body); --g-mono:var(--f-mono);
}

/* ════════════════════════════════════════════════════════════════
   THE ROOM
   ════════════════════════════════════════════════════════════════ */
html{ background:var(--board-edge)!important; }
body{
  color:var(--txt)!important;
  font-family:var(--f-body)!important;
  /* ONE background-image stack. A separate background-image declaration
     after a `background` shorthand replaces the shorthand's layers
     rather than adding to it — which silently erased the chalkboard and
     left only the screentone. Screentone first (it sits on top), board
     gradient last. */
  background-color:var(--board)!important;
  background-image:
    radial-gradient(rgba(242,240,228,.05) 1.1px,transparent 1.1px),
    radial-gradient(1100px 620px at 14% -10%, rgba(168,191,143,.13), transparent 60%),
    radial-gradient(900px 560px at 88% 0%, rgba(143,184,212,.10), transparent 62%),
    linear-gradient(172deg,var(--board),var(--board-2) 46%,var(--board-3))!important;
  background-size:7px 7px, auto, auto, auto!important;
  background-repeat:repeat, no-repeat, no-repeat, no-repeat!important;
  background-attachment:fixed!important;
}
/* the wooden board frame — a real chalkboard has one */
body::before{
  content:'';position:fixed;inset:0;z-index:90;pointer-events:none;
  border:var(--frame) solid var(--oak-2);
  box-shadow:inset 0 0 0 3px var(--oak-3), inset 0 0 0 5px var(--board-edge),
             inset 0 0 90px rgba(0,0,0,.30);
}
/* CRT scanline + vignette — the gamer leg, kept faint */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:91;opacity:.35;
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px),
    radial-gradient(120% 90% at 50% 50%,transparent 60%,rgba(0,0,0,.38));
  mix-blend-mode:multiply;
}

/* ════════════════════════════════════════════════════════════════
   TYPE · weight and tracking do the display work
   ════════════════════════════════════════════════════════════════ */
h1,h2,h3,h4,h5,h6,.bname,.title,.shead,.section-h,.lc-name,.rail .rn{
  font-family:var(--f-body)!important;
  font-weight:900!important; letter-spacing:-.02em!important;
  color:var(--chalk)!important;
  text-shadow:2px 2px 0 var(--ink);
}
.ph h3,.stat .k,.metric .mk,th,.field label{
  font-family:var(--f-ditto)!important; font-weight:400!important;
  letter-spacing:.08em!important; text-transform:uppercase;
}
p,li,.muted,.s,.rd,label,.note,td,.tiny,.gsub{ font-family:var(--f-body)!important; }
.mono,.addr,.hash,.amt,.num,code,pre,.console,input,select,td{ font-family:var(--f-mono)!important; }
.hud,.stat .v,.metric .mv,nav button .n,.g-val{ font-family:var(--f-hud)!important; letter-spacing:0!important; }
.hand,.chalknote{ font-family:var(--f-hand)!important; font-size:1.22em; color:var(--chalk-yellow)!important;
                  text-shadow:1px 1px 0 rgba(0,0,0,.35) }

/* ════════════════════════════════════════════════════════════════
   PANELS · printed cels pinned to the board
   ════════════════════════════════════════════════════════════════ */
.panel,.lcard,.stat,.metric,.rail,.console,.note,.gcard,.card,.box,.section,.sec{
  border-radius:var(--r)!important;
  border:var(--ink-w) solid var(--ink)!important;
  box-shadow:var(--pop)!important;
}
.panel,.gcard,.card,.section,.sec{
  background:linear-gradient(168deg,#33513f,#2a4235)!important;
  position:relative;
}
/* screentone in the corner — the printed-page tell */
.panel::before,.gcard::before{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.13;border-radius:inherit;
  background-image:radial-gradient(var(--chalk) 1px,transparent 1.2px);
  background-size:6px 6px;
  mask-image:linear-gradient(215deg,#000 0 24%,transparent 56%);
}
.panel::after{ display:none!important }
.stat{ background:linear-gradient(168deg,#35543f,#2b4335)!important; box-shadow:var(--pop-sm)!important }
.lcard{ background:linear-gradient(170deg,#33513f,#284034)!important }
.lcard:hover{ transform:translate(-2px,-2px)!important; box-shadow:var(--pop-lg)!important }

/* the notebook-paper variant, for anything that is prose */
.panel.ruled,.paper{
  background:var(--paper)!important; color:var(--ink)!important;
  background-image:
    repeating-linear-gradient(180deg,transparent 0 27px,var(--rule) 27px 28px),
    linear-gradient(90deg,transparent 0 46px,var(--margin-red) 46px 47px,transparent 47px)!important;
}
.panel.ruled *,.paper *{ color:var(--ink)!important; text-shadow:none!important }

/* section heads sit under a chalk underline */
.ph{ position:relative }
.ph h3{ font-size:13px!important; color:var(--chalk-yellow)!important; text-shadow:1.5px 1.5px 0 var(--ink) }
.ph::after{
  content:'';position:absolute;left:0;right:0;bottom:-6px;height:3px;
  background:repeating-linear-gradient(90deg,var(--chalk-dim) 0 14px,transparent 14px 20px);
  opacity:.45;
}

/* ════════════════════════════════════════════════════════════════
   STICKERS · gold-star grading, applied crooked
   ════════════════════════════════════════════════════════════════ */
.tag,.chip,.badge,.pill,.htag{
  font-family:var(--f-body)!important; font-weight:800!important;
  border:2.5px solid var(--ink)!important; border-radius:999px!important;
  box-shadow:2.5px 2.5px 0 var(--ink)!important; letter-spacing:.04em!important;
  text-transform:uppercase; padding:4px 11px!important; font-size:10px!important;
}
.tag{ transform:rotate(-1.5deg) } .tag:nth-of-type(2n){ transform:rotate(1.3deg) }
.t-ok  { background:var(--crayon-green)!important;  color:var(--paper)!important }
.t-warn{ background:var(--pencil)!important;        color:var(--ink)!important }
.t-bad { background:var(--crayon-red)!important;    color:var(--paper)!important }
.t-cy  { background:var(--rm-cyan)!important;       color:var(--ink)!important }
.t-vi  { background:var(--crayon-purple)!important; color:var(--paper)!important }
.t-mut { background:var(--paper-2)!important;       color:var(--ink)!important }
.chip{ background:var(--paper-2)!important; color:var(--ink)!important }
.chip b{ color:var(--ditto-ink)!important; font-family:var(--f-hud)!important; font-size:8.5px }

/* ════════════════════════════════════════════════════════════════
   BUTTONS · arcade cabinet keys
   ════════════════════════════════════════════════════════════════ */
.btn,button.btn,nav button,.cta{
  font-family:var(--f-body)!important; font-weight:800!important;
  text-transform:uppercase; letter-spacing:.05em!important;
  border:3px solid var(--ink)!important; border-radius:999px!important;
  box-shadow:var(--pop-sm)!important;
  transition:transform .1s cubic-bezier(.2,1.4,.4,1),box-shadow .1s linear!important;
}
.btn:hover,nav button:hover,.cta:hover{ transform:translate(-2px,-2px)!important;
  box-shadow:5px 5px 0 var(--ink)!important }
.btn:active,nav button:active,.cta:active{ transform:translate(3px,3px)!important;
  box-shadow:0 0 0 var(--ink)!important }
.btn{ background:var(--paper-2)!important; color:var(--ink)!important }
.btn.primary,.cta{ background:var(--portal)!important; color:var(--ink)!important }
.btn.vi{ background:var(--crayon-purple)!important; color:var(--paper)!important }
.btn.cy{ background:var(--rm-cyan)!important; color:var(--ink)!important }
.btn.ghost{ background:var(--card)!important; color:var(--ink)!important }
.btn:disabled{ background:#7f8a7f!important; color:#e8e8e0!important;
               box-shadow:2px 2px 0 var(--ink)!important }

nav{ background:var(--oak)!important; border:3px solid var(--ink)!important;
     border-radius:var(--r)!important; box-shadow:var(--pop)!important; padding:7px!important }
nav button{ background:var(--paper-2)!important; color:var(--ink)!important; font-size:11.5px!important }
nav button.on{ background:var(--pencil)!important; color:var(--ink)!important }
nav button .n{ color:inherit!important; opacity:.8; font-size:8px!important }

/* ════════════════════════════════════════════════════════════════
   BRAND
   ════════════════════════════════════════════════════════════════ */
.mark{ border:3px solid var(--ink)!important; border-radius:10px!important;
       box-shadow:var(--pop-sm)!important; transform:rotate(-3deg);
       background:linear-gradient(145deg,var(--gin-red),var(--crayon-orange))!important }
.bname{ font-size:27px!important; color:var(--chalk-yellow)!important; font-weight:900!important;
        text-shadow:2.5px 2.5px 0 var(--ink) }
.bsub{ font-family:var(--f-ditto)!important; font-size:9px!important; color:var(--rm-cyan)!important;
       letter-spacing:.14em!important; text-shadow:1px 1px 0 var(--ink) }

/* ════════════════════════════════════════════════════════════════
   NUMBERS
   ════════════════════════════════════════════════════════════════ */
.stat .k,.metric .mk{ color:var(--chalk-dim)!important; font-size:9px!important }
.stat .v{ font-size:19px!important; text-shadow:2px 2px 0 var(--ink) }
.metric .mv{ font-size:11.5px!important; text-shadow:1.5px 1.5px 0 var(--ink) }
.v-mint,.v-cy{ color:var(--portal-2)!important } .v-coral{ color:var(--eraser)!important }
.v-vi{ color:#c9b6e8!important } .v-am{ color:var(--chalk-yellow)!important }
.v-txt{ color:var(--chalk)!important }

/* a gold foil star behind the headline number — 1995 grading */
.stat.hero{ overflow:visible }
.stat.hero::after{
  content:'★';position:absolute;right:-8px;top:-14px;font-size:38px;color:var(--pencil);
  text-shadow:2px 2px 0 var(--ink);transform:rotate(12deg);animation:twinkle 3.4s ease-in-out infinite;
}
@keyframes twinkle{0%,100%{transform:rotate(12deg) scale(1);opacity:.9}
                   50%{transform:rotate(16deg) scale(1.09);opacity:1}}

/* ════════════════════════════════════════════════════════════════
   GAUGES
   ════════════════════════════════════════════════════════════════ */
.gcard{ padding:11px 11px 7px!important;display:flex;flex-direction:column;align-items:center;gap:4px }
.gcard .gsub{ font-size:10.5px;color:var(--chalk-dim);text-align:center;line-height:1.45;padding:0 4px 4px }
[data-gauge]{ width:100% }
[data-gauge] svg{ width:100%;height:auto;display:block;overflow:visible }
.g-val{ paint-order:stroke fill;stroke:var(--ink);stroke-width:4px;stroke-linejoin:round;font-size:19px!important }
.g-lab{ paint-order:stroke fill;stroke:var(--ink);stroke-width:3px;stroke-linejoin:round;
        font-family:var(--f-ditto)!important }
.g-blank{ filter:grayscale(.8) brightness(.82) }
.g-blank .g-val{ opacity:.55 }

.g-bars{ display:flex;gap:3px;width:100%;height:15px;padding:3px;border:3px solid var(--ink);
         border-radius:5px;background:var(--board-edge);box-shadow:var(--pop-sm) }
.g-bars i{ flex:1;border-radius:2px;background:var(--g-track);transition:opacity .12s linear }
/* the segmented bar's label. It is an HTML span, not SVG text, so the
   paint-order/stroke half of .g-lab does not apply to it and it needs
   its own line. */
.g-bars-lab{ display:block;width:100%;margin-top:6px;text-align:center;
             font-size:9.5px!important;letter-spacing:.09em!important;
             color:var(--chalk-dim)!important;stroke:none!important }

/* ════════════════════════════════════════════════════════════════
   NOTES · marker on the board, or a purple ditto
   ════════════════════════════════════════════════════════════════ */
.note{ box-shadow:var(--pop-sm)!important;font-weight:500!important;line-height:1.55!important;
       border-width:2.5px!important }
.note .hd{ font-family:var(--f-ditto)!important;font-size:10px!important;letter-spacing:.1em!important }
.note.bad { background:#f6dcd9!important; color:#5e211b!important }
.note.warn{ background:#fbeecb!important; color:#5c4408!important }
.note.info{ background:var(--ditto)!important; color:var(--ditto-ink)!important }
.note.mut { background:var(--paper-2)!important; color:var(--ink-2)!important }
.note b{ color:inherit!important;font-weight:800 }

/* ════════════════════════════════════════════════════════════════
   TABLES · the class register
   ════════════════════════════════════════════════════════════════ */
table{ border:3px solid var(--ink)!important;border-radius:var(--r-sm);overflow:hidden;
       background:var(--paper)!important }
th{ background:var(--ink)!important;color:var(--chalk-yellow)!important;font-size:9.5px!important;
    border:none!important }
td{ border-bottom:2px solid rgba(42,38,32,.14)!important;color:var(--ink)!important }
tr:hover td{ background:var(--tint-warm,#fdf1d8)!important }

/* ════════════════════════════════════════════════════════════════
   INPUTS · worksheet fields
   ════════════════════════════════════════════════════════════════ */
input,select,textarea{
  border:3px solid var(--ink)!important;border-radius:var(--r-sm)!important;
  background:var(--paper)!important;color:var(--ink)!important;
  box-shadow:inset 2px 2px 0 rgba(42,38,32,.12)!important;font-weight:700!important;
}
input:focus,select:focus,textarea:focus{
  box-shadow:inset 2px 2px 0 rgba(42,38,32,.12),0 0 0 3px var(--rm-cyan)!important;outline:none!important }
.field label{ color:var(--chalk-blue)!important;font-size:9.5px!important }

/* ════════════════════════════════════════════════════════════════
   CONSOLE · the lab terminal
   ════════════════════════════════════════════════════════════════ */
.console{ background:#1b2b24!important;color:var(--portal-2)!important;
          box-shadow:inset 3px 3px 0 rgba(0,0,0,.35),var(--pop-sm)!important;font-size:10.5px!important }
.console .sys{ color:var(--rm-cyan)!important } .console .err{ color:var(--eraser)!important }

/* ════════════════════════════════════════════════════════════════
   RAILS + LISTING CARDS
   ════════════════════════════════════════════════════════════════ */
.rail{ background:var(--paper-2)!important;box-shadow:var(--pop-sm)!important }
.rail:hover{ transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)!important }
.rail .ri{ border:2.5px solid var(--ink)!important;border-radius:7px!important }
.rail .rn{ font-size:12px!important;color:var(--ink)!important;text-shadow:none!important }
.rail .rd{ color:var(--ink-2)!important }
.rail .rp .amt{ font-family:var(--f-hud)!important;font-size:11px!important;color:var(--ink)!important;
                text-shadow:none!important }
.r-lease .ri{ background:var(--rm-cyan)!important;color:var(--ink)!important }
.r-lto .ri{ background:var(--crayon-purple)!important;color:var(--paper)!important }
.r-buy .ri{ background:var(--portal)!important;color:var(--ink)!important }

.lc-top{ border-bottom:3px solid var(--ink)!important;background:#2b4536!important }
.lc-top::before{ width:6px!important }
.lc-name{ font-size:18px!important }
.lc-meta{ color:var(--chalk-dim)!important;font-size:9.5px!important }
.lc-foot{ border-top:3px solid var(--ink)!important;background:rgba(27,43,36,.42)!important }
.lcard.quar .lc-top{ background:#4a2b2b!important }
.lcard.notes .lc-top{ background:#4a4128!important }

.bar{ border:2.5px solid var(--ink)!important;border-radius:5px!important;height:12px!important;
      background:var(--board-edge)!important;box-shadow:var(--pop-sm)!important;padding:0 }
.bar i{ border-radius:2px!important }

/* ════════════════════════════════════════════════════════════════
   THE CLOCK · a hall pass
   ════════════════════════════════════════════════════════════════ */
.cine-clock{
  border:3px solid var(--ink)!important;box-shadow:var(--pop-sm)!important;
  background:var(--pencil)!important;color:var(--ink)!important;
  font-family:var(--f-ditto)!important;transform:rotate(1.5deg);
}
.cine-clock .ph{ font-size:8px!important;opacity:.85 }
.cine-clock .tm{ font-family:var(--f-hud)!important;font-size:8.5px!important;color:var(--ink)!important }

/* ════════════════════════════════════════════════════════════════
   MOTION
   ════════════════════════════════════════════════════════════════ */
@keyframes slam{
  0%  {opacity:0;transform:translate3d(0,-22px,0) scale(1.05) rotate(-1.2deg)}
  62% {opacity:1;transform:translate3d(0,3px,0) scale(.99) rotate(.4deg)}
  100%{opacity:1;transform:none}
}
.reveal.in{ animation:slam .44s cubic-bezier(.2,1.1,.3,1) forwards!important }
@keyframes pop{0%{transform:scale(0) rotate(-16deg)}70%{transform:scale(1.12) rotate(3deg)}
               100%{transform:scale(1) rotate(-1.5deg)}}
.reveal.in .tag{ animation:pop .38s cubic-bezier(.2,1.3,.4,1) both;animation-delay:.15s }

/* focus lines sweep across a card — the manga tell */
.cine-glow::before{
  background:repeating-linear-gradient(102deg,
    rgba(242,240,228,.14) 0 2px, transparent 2px 9px)!important;
}
.cine-sheen::after{ background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent)!important }
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.2}}
.live-dot{ animation:blink 1s steps(1,end) infinite }

@media (prefers-reduced-motion:reduce){
  .stat.hero::after,.live-dot{ animation:none!important }
  .reveal.in{ animation:none!important;opacity:1!important }
}

/* ════════════════════════════════════════════════════════════════
   THE SEAM · where paper meets chalkboard
   ────────────────────────────────────────────────────────────────
   The one edge this skin kept getting wrong. A sheet of bright paper
   dropped straight onto a dark board gives you a black-and-white
   cliff, and that cliff is then the highest-contrast line on the
   page — landing somewhere nobody is meant to be looking. It reads
   as a screenshot pasted into a design rather than as a thing lying
   on a board.

   Three treatments, cheapest first, and no images in any of them:

     1 · CHALK DUST  a board-coloured haze around every bright
                     surface, so the two materials meet through air
                     instead of edge-to-edge. Automatic. It is one
                     extra shadow and about eighty percent of the fix.
     2 · DECKLE      the paper objects get a real torn edge, cut with
                     a mask. Masking eats box-shadow, so the ink
                     outline and the pop shadow are rebuilt as
                     drop-shadows — which follow the tear instead of
                     squaring it back off, which was the whole point.
     3 · FIXINGS     tape, a push pin, binder holes, a dog ear. Every
                     one of them is OPT-IN by class, because tape on
                     everything is a scrapbook, not a design system.

   Removing this whole block returns the skin to hard edges. Nothing
   above depends on anything below.
   ════════════════════════════════════════════════════════════════ */
:root{
  /* the haze. Two stops: a tight rim of settled dust, then the throw. */
  --dust:    0 0 0 4px rgba(242,240,228,.055), 0 0 26px 7px rgba(242,240,228,.11);
  --dust-sm: 0 0 0 2px rgba(242,240,228,.05),  0 0 14px 4px rgba(242,240,228,.09);
  --tear:9px;                 /* how deep the deckle bites */
  --tape:rgba(240,226,168,.66);
}

/* ── 1 · chalk dust ──────────────────────────────────────────────── */
.panel,.lcard,.gcard,.card,.section,.sec,table{ box-shadow:var(--pop),var(--dust)!important }
.stat,.metric,.rail,.note{ box-shadow:var(--pop-sm),var(--dust)!important }
.console{ box-shadow:inset 3px 3px 0 rgba(0,0,0,.35),var(--pop-sm),var(--dust)!important }
.lcard:hover,.rail:hover{ box-shadow:var(--pop-lg),var(--dust)!important }
.tag,.chip,.badge,.pill,.htag,.mark,.cine-clock{ box-shadow:2.5px 2.5px 0 var(--ink),var(--dust-sm)!important }
input,select,textarea{ box-shadow:inset 2px 2px 0 rgba(42,38,32,.12),var(--dust-sm)!important }
input:focus,select:focus,textarea:focus{
  box-shadow:inset 2px 2px 0 rgba(42,38,32,.12),0 0 0 3px var(--rm-cyan),var(--dust-sm)!important }

/* ── 2 · the deckle · a torn sheet, not a cut one ────────────────
   The mask scallops the top and bottom edges on an 18px pitch. It
   also throws away the element's border and box-shadow — a mask
   clips both — so the ink line is four drop-shadows and the pop is a
   fifth, all of which follow the tear. Vertical padding is forced up
   to clear the bite, because a tear through the first line of type
   is not a texture, it is a bug. */
.panel.ruled,.paper{
  --deckle:
    radial-gradient(11px 9px at 50% -2px, transparent 0 8.2px, #000 8.6px) top    left/18px var(--tear) repeat-x,
    radial-gradient(11px 9px at 50% calc(100% + 2px), transparent 0 8.2px, #000 8.6px) bottom left/18px var(--tear) repeat-x,
    linear-gradient(#000,#000) center/100% calc(100% - var(--tear) * 2) no-repeat;
  -webkit-mask:var(--deckle); mask:var(--deckle);
  border:0!important; border-radius:0!important; box-shadow:none!important;
  padding-top:max(20px,var(--tear));
  padding-bottom:max(20px,var(--tear));
  filter:
    drop-shadow(2px 0 0 var(--ink))  drop-shadow(-2px 0 0 var(--ink))
    drop-shadow(0 2px 0 var(--ink))  drop-shadow(0 -2px 0 var(--ink))
    drop-shadow(6px 7px 0 rgba(42,38,32,.9))
    drop-shadow(0 0 15px rgba(242,240,228,.20));
}
/* a mask makes the element its own paint root, so an absolutely
   positioned fixing inside it stays inside it. That is correct for a
   pin and wrong for tape — see .taped. */

/* THE ESCAPE HATCH. A mask clips at the border box, so a sheet that
   SCROLLS ITS OWN CONTENT would have that content scalloped at the top
   and bottom as it moves past the tear — and a torn edge is worth
   having right up until it starts eating the first line of somebody's
   document. `.flat` gives that sheet its cut edge back, whole:
     <div class="paper flat" contenteditable>…</div>
   Also the correct choice for anything that prints. */
.panel.ruled.flat,.paper.flat{
  -webkit-mask:none!important; mask:none!important;
  border:var(--ink-w) solid var(--ink)!important;
  border-radius:var(--r)!important;
  box-shadow:var(--pop),var(--dust)!important;
  filter:none!important;
}
@media print{
  .panel.ruled,.paper{ -webkit-mask:none!important; mask:none!important; filter:none!important }
}

/* ── 3 · fixings ─────────────────────────────────────────────────── */

/* ── WHERE A FIXING IS ALLOWED TO LIVE ──────────────────────────
   A .panel has already spent both of its pseudo-elements: ::before is
   the screentone corner, and ::after is explicitly switched off with
   display:none!important. A torn sheet has spent neither, but it is
   masked, and a mask clips its own pseudo-elements — so nothing on a
   torn sheet can hang outside it.

   That gives two honest slots, and the fixings are split between them
   rather than all fighting over one:

     OUTSIDE the sheet — tape, paper clip → go on a WRAPPER.
     ON the sheet      — pin, holes, dog ear, ring, smudge → go on the
                         sheet, and each says below which pseudo it
                         takes over, because a fixing that silently
                         deletes the screentone is a bug you find later.
   ──────────────────────────────────────────────────────────────── */

/* TAPE · straddles the seam. Wrapper:
     <div class="taped"><div class="panel ruled">…</div></div> */
.taped,.clipped{ display:block; position:relative }
.taped::before,.taped::after{
  content:'';position:absolute;z-index:4;width:78px;height:23px;pointer-events:none;
  display:block!important;
  background:linear-gradient(180deg,var(--tape),rgba(224,206,142,.58));
  border-left:1px dashed rgba(42,38,32,.22);border-right:1px dashed rgba(42,38,32,.22);
  box-shadow:0 2px 4px rgba(0,0,0,.28);
}
.taped::before{ left:-22px; top:-9px;  transform:rotate(-33deg) }
.taped::after { right:-22px; top:-9px;  transform:rotate(31deg) }
.taped.bottom::before{ left:-22px; top:auto; bottom:-9px; transform:rotate(31deg) }
.taped.bottom::after { right:-22px; top:auto; bottom:-9px; transform:rotate(-33deg) }

/* PUSH PIN · goes THROUGH the paper, so inside the bounds is right —
   which is why this one works on a torn sheet where tape does not.
   TAKES ::before. On a .panel that is the screentone corner, so a
   pinned panel loses its screentone. On a .panel.ruled it costs
   nothing visible, because the ruled variant's texture is its lines. */
.pinned{ position:relative }
.pinned::before{
  content:'';position:absolute;left:50%;top:6px;width:16px;height:16px;margin-left:-8px;z-index:5;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 34% 28%,#ffb0ac,var(--gin-red) 60%,#7e2620);
  box-shadow:0 3px 0 rgba(42,38,32,.5), inset 0 -2px 3px rgba(0,0,0,.32);
}
.pinned.cy::before{ background:radial-gradient(circle at 34% 28%,#d6ecfa,var(--rm-cyan) 58%,#4a7a95) }
.pinned.gr::before{ background:radial-gradient(circle at 34% 28%,#dcefc6,var(--portal) 58%,#5f7a4a) }

/* BINDER HOLES · three, evenly spaced, punched out to the board.
   TAKES ::before, same trade as the pin. */
.punched{ position:relative; padding-left:46px }
.punched::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:42px;pointer-events:none;
  background:radial-gradient(circle 6.5px at 21px 50%, var(--board-edge) 97%, transparent 100%)
             0 0/42px 33.34% repeat-y;
  filter:drop-shadow(0 1.5px 0 rgba(255,255,255,.28));
}

/* DOG EAR · the corner is genuinely GONE — clip-path, not a triangle
   pasted over it — so whatever is behind actually shows through. The
   flap underneath is the same clip working against itself.
   TAKES ::after, and has to force it back on because .panel::after is
   switched off. A clip-path also clips box-shadow, so the pop and the
   dust are rebuilt as drop-shadows, which follow the cut corner. */
.dogear{ position:relative;
  clip-path:polygon(0 0, calc(100% - 27px) 0, 100% 27px, 100% 100%, 0 100%);
  box-shadow:none!important;
  filter:drop-shadow(5px 5px 0 var(--ink)) drop-shadow(0 0 15px rgba(242,240,228,.18)) }
.dogear::after{
  content:'';position:absolute;top:0;right:0;width:27px;height:27px;pointer-events:none;
  display:block!important;
  background:linear-gradient(225deg,rgba(42,38,32,.30),rgba(42,38,32,.05));
  clip-path:polygon(0 0,100% 100%,0 100%);
}

/* PAPER CLIP · two loops of wire over the top edge. Wrapper, same as
   tape and for the same two reasons. */
.clipped::before{
  content:'';position:absolute;left:22px;top:-13px;width:17px;height:44px;z-index:4;
  display:block!important;
  border:2.5px solid var(--metal);border-bottom-color:transparent;
  border-radius:9px 9px 3px 3px;pointer-events:none;
  box-shadow:0 1px 2px rgba(0,0,0,.35);
  transform:rotate(-6deg);
}
.clipped::after{
  content:'';position:absolute;left:27px;top:-7px;width:7px;height:31px;z-index:4;
  display:block!important;
  border:2.5px solid var(--metal-2);border-bottom-color:transparent;
  border-radius:5px 5px 2px 2px;pointer-events:none;transform:rotate(-6deg);
}

/* ── the marks a room leaves on paper ───────────────────────────── */

/* RUBBER STAMP · graded, seen, refused. One wear streak, still legible. */
.stamp{
  display:inline-block;font-family:var(--f-ditto)!important;font-size:14px!important;
  letter-spacing:.15em;text-transform:uppercase;color:var(--gin-red);
  border:3px solid var(--gin-red);border-radius:5px;padding:5px 12px;
  transform:rotate(-9deg);opacity:.74;background:transparent;
  -webkit-mask:linear-gradient(96deg,#000 0 34%,rgba(0,0,0,.55) 36% 40%,#000 42% 100%);
          mask:linear-gradient(96deg,#000 0 34%,rgba(0,0,0,.55) 36% 40%,#000 42% 100%);
}
.stamp.ok{ color:var(--crayon-green);border-color:var(--crayon-green) }
.stamp.vi{ color:var(--crayon-purple);border-color:var(--crayon-purple) }

/* COFFEE RING · one of these per project, ever. The second one is a
   theme. TAKES ::after. */
.coffee{ position:relative }
.coffee::after{
  content:'';position:absolute;right:24px;bottom:18px;width:60px;height:60px;
  border-radius:50%;pointer-events:none;display:block!important;
  border:5px solid rgba(122,84,45,.19);
  box-shadow:inset 0 0 0 3px rgba(122,84,45,.06), 0 0 9px rgba(122,84,45,.10);
  transform:rotate(-12deg) scaleY(.86);
}

/* CHALK SCRAWL · a hand annotated the board next to the printed thing */
.scrawl{
  display:inline-block;font-family:var(--f-hand)!important;font-size:1.32em!important;
  color:var(--chalk-yellow)!important;transform:rotate(-2deg);line-height:1.25;
  text-shadow:0 0 9px rgba(245,230,168,.34),1px 1px 0 rgba(0,0,0,.42)!important;
}
.scrawl::after{ content:'↝';margin-left:.34em;opacity:.75 }
.scrawl.plain::after{ content:none }

/* SMUDGE · the opposite move — instead of softening the object, dust
   the BOARD behind it. TAKES ::after, on a negative z-index so it
   paints under the sheet. No isolation:isolate here on purpose: that
   would make the element its own stacking context and the smudge would
   paint on top of its own background instead of behind it. */
.smudge{ position:relative }
.smudge::after{
  content:'';position:absolute;inset:-16px -20px;z-index:-1;pointer-events:none;
  display:block!important;
  background:
    radial-gradient(58% 68% at 28% 38%,rgba(242,240,228,.11),transparent 70%),
    radial-gradient(48% 58% at 79% 66%,rgba(242,240,228,.075),transparent 72%);
  filter:blur(2px);
}

/* STICKY NOTE · its own object, with the curl the adhesive leaves */
.sticky{
  display:block;padding:15px 17px;color:var(--ink)!important;
  font-family:var(--f-hand)!important;font-size:1.16em!important;line-height:1.42;
  background:linear-gradient(168deg,#f8ea8d,#efdc60)!important;
  border:0!important;border-radius:2px!important;transform:rotate(-1.6deg);
  /* the curl is a clip-path, and a clip-path clips box-shadow too — so
     the cast shadow and the dust are drop-shadows, which follow the
     curl instead of drawing a rectangle behind a torn corner */
  box-shadow:none!important;
  filter:drop-shadow(6px 7px 0 rgba(42,38,32,.34)) drop-shadow(0 0 15px rgba(242,240,228,.16));
  clip-path:polygon(0 0,100% 0,100% calc(100% - 19px),calc(100% - 19px) 100%,0 100%);
  position:relative;
}
.sticky::after{
  content:'';position:absolute;right:0;bottom:0;width:19px;height:19px;
  background:linear-gradient(135deg,#d5c04a 0 52%,transparent 52%);
}
.sticky.cy{ background:linear-gradient(168deg,#bfe0f2,#9ecbe4)!important }
.sticky.cy::after{ background:linear-gradient(135deg,#7fadc6 0 52%,transparent 52%) }
.sticky.pk{ background:linear-gradient(168deg,#f7c9d2,#eeaab8)!important }
.sticky.pk::after{ background:linear-gradient(135deg,#d18b99 0 52%,transparent 52%) }

@media (prefers-reduced-motion:reduce){
  /* nothing in the seam moves, so there is nothing here to switch off.
     This block exists to say that on purpose rather than by omission. */
}

/* ════════════════════════════════════════════════════════════════
   BACK OF THE ROOM · it still has to be readable from there
   ════════════════════════════════════════════════════════════════ */
@media(max-width:820px){
  :root{ --pop:4px 4px 0 var(--ink); --pop-lg:6px 6px 0 var(--ink); --ink-w:2.5px; --frame:9px }
  .bname{ font-size:22px!important }
  .lc-name{ font-size:16px!important }
  body::before{ border-width:9px }
  /* a 9px tear is a third of a phone line-height. Shallower, and the
     dust throw comes in, because a big soft halo on a small screen
     eats the gaps between panels. */
  :root{ --tear:6px;
         --dust:    0 0 0 3px rgba(242,240,228,.05), 0 0 16px 4px rgba(242,240,228,.10);
         --dust-sm: 0 0 0 2px rgba(242,240,228,.045),0 0 10px 3px rgba(242,240,228,.08) }
  .taped::before,.taped::after{ width:58px;height:19px }
  .punched{ padding-left:38px }
  .punched::before{ width:34px;
    background:radial-gradient(circle 5.5px at 17px 50%, var(--board-edge) 97%, transparent 100%) 0 0/34px 33.34% repeat-y }
}