/* Photocopied / worn document treatment shared by every page.
   Loaded AFTER each page's own styles so it overrides the clean "paper" look. */
:root{--paper:#effeff;--paper2:#e0f6f9;--ink:#07090c;--desk:#0e1116;
 --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 .03  0 0 0 0 .05  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
 --blotch:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='b'><feTurbulence type='fractalNoise' baseFrequency='.018' numOctaves='4' seed='7'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 .03  0 0 0 0 .05  0 0 0 .06 -.015'/></filter><rect width='100%' height='100%' filter='url(%23b)'/></svg>");
 --hand:"Reenie Beanie","Segoe Script","Bradley Hand",cursive}

/* film grain over everything, including the dark desk */
body::after{content:"";position:fixed;inset:0;z-index:50;pointer-events:none;background:var(--grain);opacity:.12;mix-blend-mode:multiply}

/* paper sheets: cool xerox grey, grain, blotches, no ruled lines */
.card,.memo,.doc,.sheet{
 background:var(--grain),var(--blotch),var(--blocks),linear-gradient(172deg,var(--paper),var(--paper2)) !important;
 background-blend-mode:multiply,multiply,normal,normal;
 color:var(--ink);filter:url(#xerox);
}
.card,.memo,.doc{position:relative}
.memo *,.doc *{text-shadow:0 0 .8px rgba(8,12,20,.7)}
.card h3,.card p.sum,.card .tags,.fileno{text-shadow:0 0 .8px rgba(8,12,20,.65)}

/* black binder edge down the left side with ragged inner border */
.card::before,.memo::after,.doc::after,.sheet::before{content:"";position:absolute;left:8px;top:0;bottom:0;width:var(--edge,18px);background:#080b10;pointer-events:none;
 clip-path:polygon(0 0,62% 0,100% 2%,58% 5%,92% 8%,46% 11%,84% 15%,52% 18%,96% 22%,40% 26%,88% 30%,56% 34%,100% 38%,48% 42%,90% 46%,60% 50%,94% 54%,44% 58%,86% 63%,54% 67%,100% 71%,50% 75%,92% 80%,58% 84%,88% 88%,46% 92%,96% 96%,60% 100%,0 100%);z-index:1}
.memo,.doc{--edge:30px;--bl:30px}
.sheet{--edge:26px;--bl:30px}
.card{--edge:16px;--bl:14px;padding-left:42px !important}
.memo,.doc{padding-left:58px !important}
.sheet{padding-left:58px !important}
.card .pin{z-index:4}
/* photocopier dirt along the bottom edge */
.memo::before{background:rgba(222,210,170,.55)} /* keep the tape on the memo */
.doc::before,.sheet::after{content:"";position:absolute;left:30px;right:0;bottom:0;height:9px;pointer-events:none;opacity:.55;
 background:repeating-linear-gradient(90deg,#07090c 0 5px,transparent 5px 9px,#07090c 9px 10px,transparent 10px 23px,#07090c 23px 31px,transparent 31px 40px);
 clip-path:polygon(0 60%,6% 20%,13% 70%,22% 10%,31% 55%,40% 0,50% 65%,58% 25%,69% 80%,80% 15%,90% 60%,100% 30%,100% 100%,0 100%)}

/* redaction bars: ragged like a marker pass on a photocopy */
.redact,.memo .blk,.memo .blkline{filter:url(#rough);background:#04060a !important}
.redact:hover{background:#1c1c1c !important}
.redact.open{background:rgba(22,21,19,.1) !important;color:var(--ink);box-shadow:inset 0 -2px 0 #07090c}

/* typed headings instead of serif */
.card h3{font-family:var(--type,"Special Elite","Courier New",monospace) !important;font-weight:400;letter-spacing:.01em;text-transform:uppercase;font-size:1.12rem}

/* status stamps keep their colour but look inked on */
.stamp{mix-blend-mode:multiply;filter:url(#rough);opacity:.82 !important}

/* handwritten margin notes and RECORDED / INDEXED stamp */
.hand{position:absolute;right:18px;bottom:12px;font-family:var(--hand);font-size:1.7rem;line-height:1;color:#1d2a52;transform:rotate(-6deg);opacity:.88;pointer-events:none;text-shadow:none !important;max-width:46%;text-align:right}
.rec{position:absolute;left:48px;bottom:12px;font-family:"Courier New",monospace;font-weight:700;font-size:.62rem;letter-spacing:.16em;line-height:1.35;color:#5a2d78;border:1.5px solid #5a2d78;padding:2px 6px;transform:rotate(-3deg);opacity:.7;mix-blend-mode:multiply;pointer-events:none;text-shadow:none !important}
.card{padding-bottom:50px !important}
.card .open-hint{color:#07090c !important;text-decoration:underline;text-underline-offset:3px}

/* scanned-page imperfections: slightly off-square sheets */
.memo{transform:rotate(-.35deg) !important}
.doc{transform:rotate(.15deg)}

/* detail pages */
.doc .verdict{background:rgba(255,255,255,.18) !important;border-color:#07090c !important}
.doc .rec{left:auto;right:30px;bottom:26px}
.doc .hand-verdict{position:static;display:block;transform:rotate(-2deg);text-align:left;max-width:none;margin:2px 0 0 8px;font-size:1.9rem}

@media (max-width:700px){
 .memo,.doc,.sheet{padding-left:34px !important;--edge:16px}
 .card{padding-left:24px !important}
}
@media (prefers-reduced-motion:reduce){body::after{display:none}}
.card h3{padding-right:96px}

.card,.memo,.doc,.sheet{--blocks:linear-gradient(transparent,transparent)}

/* Phones: compact two-column board; full dossier opens on tap */
@media (max-width:700px){
 .card{padding:22px 10px 10px 24px !important;min-height:0}
 .card .tags,.card .sum,.card .chips,.card .open-hint,.card .rec,.card .hand{display:none !important}
 .card .fileno{font-size:.62rem;padding-bottom:4px;margin-bottom:6px}
 .card h3{font-size:.8rem !important;padding-right:0 !important;line-height:1.25;margin:0 0 6px;overflow-wrap:anywhere}
 .card .stamp{position:static !important;display:inline-block;transform:rotate(-3deg);font-size:.62rem;padding:1px 6px;letter-spacing:.14em}
 .card::before{left:5px}
 .card .pin{left:50%;margin-left:-9px}
}
@media (max-width:700px){
 .memo .xs{display:none !important}
 .memo{padding-top:30px !important;padding-bottom:20px !important}
 .memo .sub{margin:10px 0}
 .memo .big-stamp{position:static;display:inline-block;margin:0 0 6px;font-size:.9rem}
 header.top{padding-top:14px}
}

/* Phones: yarn hidden by default (it covered the text); a toggle shows it on demand */
.thr-toggle{display:none}
@media (max-width:700px){
 .thr-toggle{display:inline-block}
 #threads{display:none}
 .board.show-threads #threads{display:block;opacity:.55}
 .board:not(.show-threads) .card .pin{opacity:1 !important}
 .board.show-threads .card .pin{opacity:0 !important}
}
.tap-hint{display:block;text-align:center;font-family:var(--type);font-size:.82rem;letter-spacing:.06em;line-height:1.5;color:#c9d2dc;border:1px dashed #4a5361;padding:9px 14px;margin:16px auto 0;max-width:640px}
.tap-hint b{color:#fff;letter-spacing:.14em;text-transform:uppercase}
.card .pin{cursor:pointer}
.card .pin::after{content:"";position:absolute;inset:-10px}
.card.sel{outline:2px solid #ff4b3a;outline-offset:3px;z-index:6;box-shadow:0 0 0 5px rgba(255,75,58,.18),0 14px 26px rgba(0,0,0,.6)}
.card.rel{outline:2px dashed rgba(255,110,90,.8);outline-offset:2px}
.board.show-threads .card:not(.sel):not(.rel){opacity:.45}
@media (max-width:700px){
 .tap-hint{display:block;text-align:center;font-family:var(--type);font-size:.74rem;letter-spacing:.12em;color:#9aa6b2;margin:10px 12px 0}
 .board.show-threads #threads{opacity:1}
 .card.sel{outline:2px solid #ff4b3a;outline-offset:3px;z-index:6;box-shadow:0 0 0 5px rgba(255,75,58,.18),0 10px 22px rgba(0,0,0,.6)}
 .card.rel{outline:2px dashed rgba(255,110,90,.8);outline-offset:2px}
 .board.show-threads .card:not(.sel):not(.rel){opacity:.45}
}
.pinicon{display:inline-block;width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff9d8a,#c1121f 60%,#4a0210);vertical-align:-1px;margin:0 1px}
@media (max-width:700px){
 .tap-hint{font-size:.78rem;line-height:1.5;color:#c9d2dc;border:1px dashed #4a5361;padding:8px 10px;margin:12px 10px 0}
 .tap-hint b{color:#fff;letter-spacing:.14em;text-transform:uppercase}
 .card .pin{width:22px;height:22px;margin-left:-11px;top:-12px}
 .card .pin::after{content:"";position:absolute;inset:-16px}
}