/* NDT Humor: comic-book theme.
   Sky-blue comic page with halftone dots, ink outlines, offset shadows,
   red dye as the main color with sunny yellow, teal and blue for fun.
   Dark mode follows the visitor's device setting. */
:root {
  --bg: #d9eeff;
  --dot: rgba(58, 134, 255, 0.20);
  --surface: #ffffff;
  --surface-2: #eef7ff;
  --ink: #1e1b18;
  --outline: #1e1b18;
  --text: #1e1b18;
  --muted: #5f574f;
  --red: #e63946;
  --red-dark: #c1121f;
  --yellow: #ffd23f;
  --teal: #2ec4b6;
  --blue: #3a86ff;
  --pink: #ff8fa3;
  --accent: var(--red-dark);
  --on-accent: #ffffff;
  --accent-soft: #ffe3e6;
  --tint-1: #ffe3e6;
  --tint-2: #fff1c2;
  --tint-3: #d6f5f2;
  --tint-4: #f4f9ff;
  --header-bg: rgba(217, 238, 255, 0.94);
  --danger: #b00020;
  --radius: 18px;
  --wrap: 1100px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-fun: "Fredoka", ui-rounded, "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font-comic: "Bangers", "Fredoka", Impact, system-ui, sans-serif;
  color-scheme: light;
}

/* Dark: chosen in the View menu (data-view="dark"), or the device setting when JavaScript is off. */
@media (prefers-color-scheme: dark) {
  :root:not([data-view]) {
    --bg: #1a1424;
    --dot: rgba(255, 210, 63, 0.07);
    --surface: #251d33;
    --surface-2: #2f2540;
    --ink: #000000;
    --outline: #f3ecdf;
    --text: #f7f1e6;
    --muted: #c4b9cf;
    --accent: #ff6b7a;
    --on-accent: #1a1424;
    --accent-soft: rgba(255, 107, 122, 0.16);
    --tint-1: #3a2236;
    --tint-2: #3a3222;
    --tint-3: #1f3634;
    --tint-4: #23304a;
    --header-bg: rgba(26, 20, 36, 0.94);
    --danger: #ff6b81;
    color-scheme: dark;
  }
}
:root[data-view="dark"] {
  --bg: #1a1424;
  --dot: rgba(255, 210, 63, 0.07);
  --surface: #251d33;
  --surface-2: #2f2540;
  --ink: #000000;
  --outline: #f3ecdf;
  --text: #f7f1e6;
  --muted: #c4b9cf;
  --accent: #ff6b7a;
  --on-accent: #1a1424;
  --accent-soft: rgba(255, 107, 122, 0.16);
  --tint-1: #3a2236;
  --tint-2: #3a3222;
  --tint-3: #1f3634;
  --tint-4: #23304a;
  --header-bg: rgba(26, 20, 36, 0.94);
  --danger: #ff6b81;
  color-scheme: dark;
}

/* High Contrast (View menu): plain backgrounds, strongest text, underlined links, bold focus. */
:root[data-a11y~="hc"] {
  --bg: #ffffff; --dot: transparent; --surface: #ffffff; --surface-2: #ffffff;
  --ink: #000000; --outline: #000000; --text: #000000; --muted: #1e1b18;
  --accent: #9b0016; --accent-soft: #ffe3e6;
  --tint-1: #ffffff; --tint-2: #ffffff; --tint-3: #ffffff; --tint-4: #ffffff;
  --header-bg: #ffffff;
}
:root[data-view="dark"][data-a11y~="hc"] {
  --bg: #000000; --surface: #000000; --surface-2: #000000;
  --ink: #000000; --outline: #ffffff; --text: #ffffff; --muted: #f2f2f2;
  --accent: #ff9aa6; --on-accent: #000000; --accent-soft: #2a0a10;
  --tint-1: #000000; --tint-2: #000000; --tint-3: #000000; --tint-4: #000000;
  --header-bg: #000000;
}
:root[data-a11y~="hc"] a { text-decoration: underline; }
:root[data-a11y~="hc"] :focus-visible { outline: 4px solid var(--text); outline-offset: 3px; }
:root[data-a11y~="hc"] .chip, :root[data-a11y~="hc"] .badge { background: var(--surface); color: var(--text); }

/* Larger Text (View menu) */
:root[data-a11y~="lt"] body { zoom: 1.18; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--bg);
  background-image: radial-gradient(var(--dot) 1.4px, transparent 1.6px);
  background-size: 16px 16px;
  color: var(--text);
  font: 17px/1.6 var(--font);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; padding-top: 28px; padding-bottom: 64px; }
a { color: var(--accent); text-underline-offset: 3px; font-weight: 600; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--font-fun); font-weight: 700; line-height: 1.15; margin: 0 0 12px; }
h1 { font-size: clamp(30px, 4.4vw, 46px); letter-spacing: -0.01em; }
h2 { font-size: 26px; }
h3 { font-size: 19px; margin-top: 20px; }
p { margin: 0 0 14px; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--yellow); color: #1e1b18; padding: 8px 12px; z-index: 10; border: 3px solid #1e1b18; }
.skip:focus { left: 8px; top: 8px; }
.muted { color: var(--muted); }
.lede { color: var(--muted); font-size: 18px; max-width: 70ch; }
.center { justify-content: center; text-align: center; }

/* Comic burst label (Joke of the Day, 404, etc.) */
.eyebrow {
  display: inline-block;
  font-family: var(--font-comic);
  font-size: 22px;
  letter-spacing: 0.06em;
  color: #1e1b18;
  background: var(--yellow);
  border: 3px solid #1e1b18;
  border-radius: 10px;
  padding: 2px 14px;
  margin-bottom: 14px;
  transform: rotate(-2deg);
  box-shadow: 3px 3px 0 #1e1b18;
}

/* Header */
.site-header { border-bottom: 3px solid var(--outline); background: var(--header-bg); position: sticky; top: 0; z-index: 5; backdrop-filter: blur(6px); }
.header-row { display: flex; align-items: center; gap: 16px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 6px; color: var(--text); text-decoration: none; margin-right: auto; }
.brand:hover .logo-mark { transform: rotate(-6deg) scale(1.05); }
.logo-mark { width: 74px; height: 58px; flex: none; transition: transform 0.2s ease; }
.brand-word { font-family: var(--font-comic); font-size: 34px; letter-spacing: 0.04em; color: var(--text); line-height: 1; transform: rotate(-3deg); text-shadow: 2px 2px 0 var(--yellow); }
.brand-word .tm { font-family: var(--font-fun); font-size: 11px; font-weight: 600; text-shadow: none; vertical-align: super; margin-left: 2px; letter-spacing: 0; }
.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav a { font-family: var(--font-fun); color: var(--text); text-decoration: none; padding: 8px 12px; border-radius: 10px; font-weight: 600; font-size: 17px; }
.site-nav a:hover { background: var(--tint-2); }
.site-nav a[aria-current="page"] { background: var(--yellow); color: #1e1b18; box-shadow: inset 0 0 0 2px #1e1b18; }
.auth-slot { margin-left: 8px; display: inline-flex; gap: 6px; align-items: center; }
.nav-toggle { display: none; }

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; background: var(--yellow); color: #1e1b18; border: 3px solid #1e1b18; border-radius: 10px; padding: 6px 14px; font: 600 16px var(--font-fun); cursor: pointer; box-shadow: 3px 3px 0 #1e1b18; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 72px; background: var(--bg); border-bottom: 3px solid var(--outline); flex-direction: column; align-items: stretch; padding: 8px 16px 16px; }
  .site-nav.open { display: flex; }
  .site-nav a { padding: 12px; }
  .auth-slot { margin: 8px 0 0; }
  .logo-mark { width: 60px; height: 47px; }
  .brand-word { font-size: 28px; }
}

/* Buttons: chunky, outlined, with a press effect */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--red); color: #ffffff; border: 3px solid #1e1b18; border-radius: 14px; padding: 9px 20px; font: 600 17px var(--font-fun); text-decoration: none; cursor: pointer; box-shadow: 4px 4px 0 #1e1b18; transition: transform 0.08s ease, box-shadow 0.08s ease; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 #1e1b18; color: #ffffff; }
.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 #1e1b18; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--outline); }
.btn-ghost:hover { color: var(--text); background: var(--tint-2); }
.btn-small { padding: 5px 14px; font-size: 15px; box-shadow: 3px 3px 0 #1e1b18; }
.btn-danger { background: var(--surface); color: var(--danger); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0; }
#random-btn { background: var(--blue); }

/* Hero */
.hero { display: grid; grid-template-columns: 1.25fr 1fr; gap: 32px; align-items: start; margin-bottom: 36px; }
.hero-side h1 { font-size: clamp(30px, 3.8vw, 42px); }
.hl { background: linear-gradient(transparent 55%, var(--yellow) 55%); padding: 0 4px; color: inherit; }
:root[data-view="dark"] .hl { background: linear-gradient(transparent 55%, rgba(255, 210, 63, 0.45) 55%); }
@media (prefers-color-scheme: dark) { :root:not([data-view]) .hl { background: linear-gradient(transparent 55%, rgba(255, 210, 63, 0.45) 55%); } }
.hero-side p { color: var(--muted); }
.hero-side .break-note { margin-top: -4px; font: 600 15px var(--font-fun); color: var(--text); }
.hero-side .break-note::before { content: "\2615\FE0E  "; }
@media (max-width: 860px) { .hero { grid-template-columns: 1fr; } }

/* Joke cards: comic panels. The Joke of the Day is a speech bubble. */
.joke { position: relative; background: var(--surface); border: 3px solid var(--outline); border-radius: var(--radius); padding: 20px 22px; box-shadow: 6px 6px 0 var(--ink); }
.joke-list { display: grid; gap: 20px; }
.daily .joke { padding: 24px 26px; box-shadow: 8px 8px 0 var(--red); margin-bottom: 30px; }
.daily .joke::after { content: ""; position: absolute; left: 44px; bottom: -26px; width: 34px; height: 26px; background: var(--surface); border-left: 3px solid var(--outline); border-bottom: 3px solid var(--outline); transform: skewX(-35deg); }
.daily .joke .setup { font-size: clamp(23px, 2.7vw, 30px); }
.random-card { animation: pop 0.35s ease; }
.joke-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.joke .setup { font-family: var(--font-fun); font-size: 21px; font-weight: 600; line-height: 1.35; margin: 0 0 12px; }
.joke-solo .joke .setup { font-size: clamp(26px, 3.2vw, 34px); }
.user-text { white-space: pre-line; overflow-wrap: anywhere; }

.punch summary { cursor: pointer; font: 600 17px var(--font-fun); color: #1e1b18; list-style: none; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; background: var(--yellow); border: 3px solid #1e1b18; border-radius: 999px; box-shadow: 3px 3px 0 #1e1b18; }
.punch summary::-webkit-details-marker { display: none; }
.punch summary::before { content: "?"; font-family: var(--font-comic); font-size: 20px; line-height: 1; }
.punch summary:hover { transform: rotate(-2deg); }
.punch[open] summary { background: var(--teal); }
.punch[open] summary::before { content: "!"; }
.punch p { position: relative; font-family: var(--font-fun); font-size: 21px; font-weight: 600; margin: 14px 0 0; padding: 12px 16px; background: var(--tint-1); border: 3px solid var(--outline); border-radius: 14px; animation: pop 0.3s ease; color: var(--text); }
.punch[open]::after { content: attr(data-react); display: inline-block; margin-top: 10px; font-family: var(--font-comic); font-size: 22px; letter-spacing: 0.05em; color: var(--red); transform: rotate(-4deg); animation: pop 0.45s ease 0.1s; }
.punch:not([data-react])[open]::after { content: "Ba-dum-tss!"; }
.punch[data-tilt="1"][open]::after { transform: rotate(3deg); }
.punch[data-tilt="2"][open]::after { transform: rotate(-1.5deg); }
:root[data-view="dark"] .punch[open]::after { color: var(--yellow); }
@media (prefers-color-scheme: dark) { :root:not([data-view]) .punch[open]::after { color: var(--yellow); } }

.joke-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 16px; font-size: 15px; }
.joke-actions .perm { color: var(--muted); margin-right: auto; text-decoration: none; font-weight: 600; }
.joke-actions .perm:hover { color: var(--accent); }
.joke-actions button { background: var(--surface); border: 2px solid var(--outline); color: var(--text); border-radius: 999px; padding: 4px 12px; font: 600 15px var(--font-fun); cursor: pointer; }
.joke-actions button:hover { background: var(--tint-2); }
.vote-btn[aria-pressed="true"] { background: var(--yellow); color: #1e1b18; border-color: #1e1b18; }

/* Laugh Gauge */
.joke-actions .gauge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px 3px 8px; }
.gauge-dial { width: 34px; height: 21px; flex: none; overflow: visible; }
.gauge-dial path { fill: none; stroke-width: 5; stroke-linecap: butt; }
.gauge-dial .g1 { stroke: #c9c2b8; } .gauge-dial .g2 { stroke: #ffd23f; } .gauge-dial .g3 { stroke: #2ec4b6; }
.gauge-dial .g4 { stroke: #3a86ff; } .gauge-dial .g5 { stroke: #e63946; }
.gauge-needle { stroke: var(--text); stroke-width: 2.6; stroke-linecap: round; opacity: 0.25; transition: transform 0.5s cubic-bezier(.3, 1.6, .5, 1); }
.gauge-live .gauge-needle { opacity: 1; }
.gauge-hub { fill: var(--text); }
.joke-actions .gauge[aria-pressed="true"] { background: var(--yellow); color: #1e1b18; border-color: #1e1b18; }
.joke-actions .gauge[aria-pressed="true"] .gauge-needle, .joke-actions .gauge[aria-pressed="true"] .gauge-hub { stroke: #1e1b18; fill: #1e1b18; }
.rate-menu .menu-note { margin: 4px 8px 6px; font: 600 13px var(--font-fun); color: var(--muted); }
.rate-opt { display: flex !important; align-items: center; gap: 10px; }
.rate-opt[aria-checked="true"] { background: var(--yellow) !important; color: #1e1b18 !important; }
.rate-emoji { font-size: 20px; width: 26px; text-align: center; }
.rate-clear { color: var(--muted) !important; font-weight: 500 !important; }
.board-list { padding-left: 26px; display: grid; gap: 16px; }
.board-list > li::marker { font: 700 18px var(--font-fun); color: var(--red); }
.laugh-boards { align-items: start; }
.byline { color: var(--muted); font-size: 15px; }
.badge { display: inline-block; font: 600 12px var(--font-fun); text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 9px; border-radius: 999px; border: 2px solid var(--outline); background: var(--tint-3); color: var(--text); margin-left: 6px; }
.badge-wait { background: var(--tint-2); }

/* Sticker chips */
.chip { display: inline-block; font: 600 13px var(--font-fun); padding: 3px 11px; border-radius: 999px; background: var(--tint-1); color: var(--text); border: 2px solid var(--outline); text-decoration: none; transform: rotate(-1.5deg); }
.chip-alt { background: var(--tint-4); transform: rotate(1.5deg); }
.chip-lg { font-size: 16px; padding: 7px 16px; box-shadow: 3px 3px 0 var(--ink); }
.chip-row .chip:nth-child(4n+1) { background: var(--tint-1); }
.chip-row .chip:nth-child(4n+2) { background: var(--tint-2); transform: rotate(2deg); }
.chip-row .chip:nth-child(4n+3) { background: var(--tint-3); transform: rotate(-2deg); }
.chip-row .chip:nth-child(4n+4) { background: var(--tint-4); transform: rotate(1deg); }
.chip:hover { transform: rotate(0) scale(1.06); color: var(--text); }
.chip-row { display: flex; flex-wrap: wrap; gap: 12px; }
.section-title { margin-top: 48px; }
.section-title::after { content: ""; display: block; width: 90px; height: 6px; margin-top: 8px; background: var(--red); border: 2px solid var(--outline); border-radius: 6px; transform: rotate(-1deg); }

/* Topic tiles: colorful comic panels */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.tile { display: flex; flex-direction: column; gap: 6px; background: var(--tint-1); border: 3px solid var(--outline); border-radius: var(--radius); padding: 16px; color: var(--text); text-decoration: none; box-shadow: 5px 5px 0 var(--ink); transition: transform 0.12s ease, box-shadow 0.12s ease; }
.tiles .tile:nth-child(4n+2) { background: var(--tint-2); }
.tiles .tile:nth-child(4n+3) { background: var(--tint-3); }
.tiles .tile:nth-child(4n+4) { background: var(--tint-4); }
.tile:hover { transform: translate(-2px, -2px) rotate(-1deg); box-shadow: 8px 8px 0 var(--ink); color: var(--text); }
.tile b { font: 700 19px var(--font-fun); }
.tile span { color: var(--muted); font-size: 15px; line-height: 1.45; font-weight: 400; }
.tile em { font-style: normal; font: 600 14px var(--font-fun); margin-top: auto; align-self: flex-start; background: var(--surface); border: 2px solid var(--outline); border-radius: 999px; padding: 1px 10px; }

/* Panels and layout */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 44px; }
.panel { background: var(--surface); border: 3px solid var(--outline); border-radius: var(--radius); padding: 22px; margin-bottom: 20px; box-shadow: 6px 6px 0 var(--ink); }
.panel p { color: var(--muted); }
.split .panel:first-child { background: var(--tint-3); }
.split .panel:last-child { background: var(--tint-4); }
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 860px) { .split, .cols3 { grid-template-columns: 1fr; } }
.title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.crumbs { color: var(--muted); font-size: 15px; margin-bottom: 18px; }
.pager { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin: 26px 0; }
.link-list, .count-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.link-list li::before { content: "\2192  "; color: var(--red); font-weight: 700; }
.count-list li { display: flex; justify-content: space-between; border-bottom: 2px dashed var(--outline); padding: 6px 0; }
.mini-list { display: grid; gap: 10px; margin-top: 14px; }
.mini-list a.mini { display: block; background: var(--surface); border: 2px solid var(--outline); border-radius: 12px; padding: 10px 12px; color: var(--text); text-decoration: none; font-weight: 400; }
.mini-list a.mini:hover { transform: rotate(-0.6deg); box-shadow: 3px 3px 0 var(--ink); }
.mini small { display: block; color: var(--muted); }
.notice { background: var(--tint-2); border: 3px solid var(--outline); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 20px; box-shadow: 5px 5px 0 var(--ink); }
.center-block { text-align: center; padding: 60px 0; }
.week-band { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; margin-top: 8px; background: var(--tint-2); }
.week-band .joke { box-shadow: 4px 4px 0 var(--ink); }
@media (max-width: 860px) { .week-band { grid-template-columns: 1fr; } }
.trophy { font-family: var(--font-comic); font-size: 20px; letter-spacing: 0.05em; color: var(--red); }
.trophy::before { content: "\1F3C6  "; }

/* Forms */
.filters { display: grid; grid-template-columns: 2fr repeat(5, 1fr); gap: 10px; margin: 18px 0 8px; padding: 16px; background: var(--surface); border: 3px solid var(--outline); border-radius: var(--radius); box-shadow: 5px 5px 0 var(--ink); }
@media (max-width: 900px) { .filters { grid-template-columns: 1fr 1fr; } .filters label:first-child { grid-column: 1 / -1; } }
.form { display: grid; gap: 14px; margin: 16px 0; }
.form.narrow { max-width: 480px; background: var(--surface); border: 3px solid var(--outline); border-radius: var(--radius); padding: 22px; box-shadow: 6px 6px 0 var(--ink); }
.form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }
label { display: grid; gap: 6px; font: 600 15px var(--font-fun); }
label.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; font-family: var(--font); }
label.check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--red); }
input, select, textarea { width: 100%; background: var(--surface); color: var(--text); border: 2px solid var(--outline); border-radius: 12px; padding: 10px 12px; font: 400 16px var(--font); }
input:focus, select:focus, textarea:focus { outline: none; box-shadow: 3px 3px 0 var(--blue); }
textarea { resize: vertical; }
.hint { color: var(--muted); font: 400 14px var(--font); }
.form-msg:empty { display: none; }
.form-msg { border-radius: 12px; padding: 10px 12px; background: var(--tint-3); border: 2px solid var(--outline); }
.form-msg.error { background: var(--tint-1); color: var(--danger); }
.captcha:empty { display: none; }
.qr { background: #ffffff; padding: 12px; border-radius: 12px; border: 3px solid #1e1b18; width: 200px; height: 200px; }
.danger-zone { background: var(--tint-1); }

/* Tabs */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 20px; }
.tabs button { background: var(--surface); border: 2px solid var(--outline); border-radius: 999px; color: var(--text); font: 600 16px var(--font-fun); padding: 6px 16px; cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--yellow); color: #1e1b18; box-shadow: 3px 3px 0 var(--ink); }

/* Forum */
.cat-list, .thread-list, .post-list, .mod-list { display: grid; gap: 14px; }
.cat, .thread-row { display: flex; justify-content: space-between; gap: 16px; align-items: center; background: var(--surface); border: 3px solid var(--outline); border-radius: var(--radius); padding: 16px 18px; color: var(--text); text-decoration: none; box-shadow: 5px 5px 0 var(--ink); font-weight: 400; transition: transform 0.12s ease; }
.cat-list .cat:nth-child(4n+1) { background: var(--tint-1); }
.cat-list .cat:nth-child(4n+2) { background: var(--tint-2); }
.cat-list .cat:nth-child(4n+3) { background: var(--tint-3); }
.cat-list .cat:nth-child(4n+4) { background: var(--tint-4); }
.cat:hover, .thread-row:hover { transform: translate(-2px, -2px); color: var(--text); }
.cat b, .thread-row b { font: 700 19px var(--font-fun); display: block; }
.cat span, .thread-row span { color: var(--muted); font-size: 15px; }
.cat .count, .thread-row .count { text-align: right; white-space: nowrap; }
.post { background: var(--surface); border: 3px solid var(--outline); border-radius: var(--radius); padding: 16px 18px; box-shadow: 5px 5px 0 var(--ink); }
.post-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 14px; margin-bottom: 8px; }
.post-head b { color: var(--text); font-family: var(--font-fun); font-size: 16px; }
.post-tools { display: flex; gap: 12px; margin-top: 8px; }
.linkish { background: none; border: none; padding: 0; color: var(--muted); font: inherit; font-size: 14px; text-decoration: underline; cursor: pointer; }
.linkish:hover { color: var(--accent); }
.thread-first { background: var(--tint-2); }

/* Prose */
.prose { max-width: 760px; background: var(--surface); border: 3px solid var(--outline); border-radius: var(--radius); padding: 26px 28px; box-shadow: 6px 6px 0 var(--ink); }
.prose h2 { margin-top: 28px; }
.prose li { margin-bottom: 6px; }
.prose .sources { font-size: 14px; color: var(--muted); padding-left: 22px; }
.prose .sources a { overflow-wrap: anywhere; }

/* Footer */
.site-footer { border-top: 3px solid var(--outline); padding: 28px 0 36px; color: var(--muted); font-size: 15px; background: var(--surface-2); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 14px; }
.footer-nav a { font-family: var(--font-fun); color: var(--text); text-decoration: none; }
.footer-nav a:hover { color: var(--accent); }
.copyright { font-size: 14px; }
.credit a { color: var(--text); }

/* Scan for a Joke (A-scan screen) */
.scanner { margin: 6px 0 4px; max-width: 420px; }
.scanner-screen { background: #10201a; border: 3px solid var(--outline); border-radius: 14px; box-shadow: 4px 4px 0 var(--ink); padding: 8px; height: 104px; }
.scanner-screen svg { width: 100%; height: 100%; display: block; }
.scanner-grid line { stroke: rgba(160, 255, 200, 0.14); stroke-width: 1; vector-effect: non-scaling-stroke; }
.scanner-trace { fill: none; stroke: #7dffb0; stroke-width: 2.2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.scanner-gate { fill: var(--yellow); opacity: 0.85; }
.scanner.found .scanner-gate { fill: var(--red); opacity: 1; }
.scanner-label { display: inline-block; margin-top: 8px; font: 600 15px var(--font-fun); color: var(--muted); }
.scanner.found .scanner-label { font-family: var(--font-comic); font-size: 20px; letter-spacing: 0.05em; color: var(--red); transform: rotate(-2deg); }
:root[data-view="dark"] .scanner.found .scanner-label { color: var(--yellow); }

/* NDT Decoder terms and pop-ups */
button.term { all: unset; cursor: help; border-bottom: 2px dotted currentColor; text-decoration: none; }
button.term:hover { color: var(--accent); }
button.term:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 3px; }
.pop { position: absolute; z-index: 40; background: var(--surface); color: var(--text); border: 3px solid var(--outline); border-radius: 14px; box-shadow: 5px 5px 0 var(--ink); padding: 12px 14px; font-size: 15px; }
.term-pop b { font: 700 17px var(--font-fun); display: block; margin-bottom: 4px; }
.term-pop p { margin: 0 0 8px; line-height: 1.45; }
.pop-foot { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: 14px; }
.share-menu { display: grid; gap: 2px; padding: 6px; max-height: min(70vh, 560px); overflow-y: auto; }
.share-menu .menu-head { margin: 8px 10px 2px; font: 600 11px var(--font-fun); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.share-menu .menu-head:first-of-type { margin-top: 4px; }
.share-menu .menu-primary { background: var(--yellow) !important; color: #1e1b18 !important; border: 2px solid #1e1b18 !important; text-align: center !important; margin-bottom: 2px; }
.share-menu [role="menuitem"] { display: block; background: none; border: 0; border-radius: 8px; padding: 8px 10px; text-align: left; font: 600 15px var(--font-fun); color: var(--text); text-decoration: none; cursor: pointer; }
.share-menu [role="menuitem"]:hover, .share-menu [role="menuitem"]:focus-visible { background: var(--tint-2); }

/* Comedy Levels */
.lvl { display: inline-block; font: 600 11px var(--font-fun); text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 8px; border-radius: 999px; border: 2px solid var(--outline); margin-left: 4px; color: #1e1b18; }
.lvl-0 { background: #eceae6; }
.lvl-1 { background: #d6f5f2; }
.lvl-2 { background: #fff1c2; }
.lvl-3 { background: #ffd23f; box-shadow: 2px 2px 0 var(--ink); }
.leaderboard { padding-left: 28px; display: grid; gap: 8px; }
.leaderboard li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--surface); border: 2px solid var(--outline); border-radius: 12px; padding: 8px 12px; }
.levels-split .count-list li { align-items: center; }

/* Seasonal packs */
.chip-pack { background: var(--tint-3); }
.pack-tile { position: relative; }
.in-season-badge { position: absolute; top: -12px; right: 12px; background: var(--yellow); color: #1e1b18; box-shadow: 2px 2px 0 var(--ink); }
.pack-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.pack-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Toolbox Talk */
.toolbox-band { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; margin-top: 44px; background: var(--tint-4); }
@media (max-width: 860px) { .toolbox-band { grid-template-columns: 1fr; } }
.filters-3 { grid-template-columns: 1fr 1fr auto; align-items: end; }
.filters-3 .btn-row { margin: 0; }
@media (max-width: 720px) { .filters-3 { grid-template-columns: 1fr; } }
.toolbox-list { display: grid; gap: 14px; padding-left: 28px; }
.toolbox-list li { background: var(--surface); border: 3px solid var(--outline); border-radius: 14px; padding: 12px 16px; box-shadow: 4px 4px 0 var(--ink); }
.tb-setup { font: 600 18px var(--font-fun); margin: 0 0 6px; }
.tb-punch { margin: 0; padding-left: 12px; border-left: 4px solid var(--red); font-style: italic; }
.print-only { display: none; }
@media print {
  .site-header, .site-footer, .no-print, .skip, .nh-view, .partners-section { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  main { padding: 0; }
  .print-only { display: flex !important; }
  .print-head { align-items: center; gap: 14px; border-bottom: 3px solid #000; padding-bottom: 10px; margin-bottom: 14px; }
  .print-head b { display: block; font-size: 24px; }
  .print-head span { font-size: 13px; }
  .toolbox-list li { box-shadow: none; border: 2px solid #000; break-inside: avoid; }
}

/* Decoder glossary */
.letter-nav { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 8px 0 18px; font: 600 16px var(--font-fun); }
.glossary { display: grid; gap: 10px; margin: 0; }
.term-entry { background: var(--surface); border: 2px solid var(--outline); border-radius: 12px; padding: 10px 14px; scroll-margin-top: 90px; }
.term-entry:target { box-shadow: 4px 4px 0 var(--red); }
.glossary dt { font: 700 18px var(--font-fun); scroll-margin-top: 90px; }
.glossary dd { margin: 2px 0 0; color: var(--muted); }

/* Finish the Punchline */
.finish-prompt { background: var(--tint-2); border: 3px solid var(--outline); border-radius: var(--radius); padding: 18px 20px; box-shadow: 6px 6px 0 var(--ink); margin: 14px 0; }
.finish-setup { font: 700 clamp(22px, 2.6vw, 28px) var(--font-fun); margin: 0; }
.winner-punch { font: 600 19px var(--font-fun); padding: 10px 14px; background: var(--tint-1); border: 2px solid var(--outline); border-radius: 12px; }

/* Community Standards audit: the Audit Finding box */
.audit-finding { position: relative; background: #fffdf6; color: #1e1b18; border: 3px solid #1e1b18; border-left: 10px solid var(--red); border-radius: 12px; padding: 14px 16px 12px; box-shadow: 5px 5px 0 var(--ink);
  background-image: repeating-linear-gradient(transparent 0 27px, rgba(58, 134, 255, 0.12) 27px 28px); }
.audit-finding:focus { outline: 3px solid var(--blue); outline-offset: 3px; }
.audit-finding p { margin: 6px 0; color: #1e1b18; }
.af-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 4px; }
.af-stamp { font-family: var(--font-comic); font-size: 24px; letter-spacing: 0.06em; color: #b00020; border: 3px solid #b00020; border-radius: 8px; padding: 0 10px; transform: rotate(-4deg); }
.af-no { font: 600 12px var(--font-fun); text-transform: uppercase; letter-spacing: 0.1em; color: #5f574f; }
.af-std { font: 600 17px var(--font-fun); }
.af-foot { font-size: 14px; color: #5f574f !important; }
.af-foot a { color: #b00020; }

/* Community Standards page */
.standard { border-top: 2px dashed var(--outline); padding-top: 6px; scroll-margin-top: 90px; }
.standard:target { background: var(--tint-2); border-radius: 12px; padding: 6px 12px; }
.std-num { display: inline-block; font: 600 13px var(--font-fun); text-transform: uppercase; letter-spacing: 0.08em; background: var(--red); color: #fff; border: 2px solid #1e1b18; border-radius: 999px; padding: 1px 10px; margin-right: 6px; vertical-align: middle; }
.std-summary { font: 600 17px var(--font-fun); }
.std-ok li::marker { content: "\2713  "; color: var(--teal); }

/* Serious NDT Resources banners */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.partners-section { margin-top: 56px; }
.partners { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.partner { position: relative; display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 3px solid var(--outline); border-radius: var(--radius); padding: 18px; color: var(--text); text-decoration: none; font-weight: 400; box-shadow: 5px 5px 0 var(--ink); transition: transform 0.12s ease, box-shadow 0.12s ease; }
.partner:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); color: var(--text); }
.partner-head { display: flex; align-items: center; gap: 12px; }
.partner-head b { font: 700 19px var(--font-fun); line-height: 1.15; }
.partner-icon { width: 48px; height: 48px; flex: none; border-radius: 10px; }
.partner-logo { display: inline-flex; align-items: center; justify-content: center; flex: none; height: 48px; border-radius: 10px; border: 2px solid #1e1b18; overflow: hidden; }
.partner-logo-dark { width: 72px; background: #000000; }
.partner-logo-dark img { width: 66px; height: auto; display: block; }
.partner-logo-light { width: 112px; background: #ffffff; }
.partner-logo-light img { width: 100px; height: auto; display: block; }
.partner-desc { color: var(--muted); font-size: 15px; line-height: 1.5; }
.partner-cta { margin-top: auto; font: 600 16px var(--font-fun); color: var(--accent); }
.partner:hover .partner-cta { text-decoration: underline; text-decoration-thickness: 2px; }

/* Motion */
/* Transform only (no opacity), so text stays readable even if animation is paused. */
@keyframes pop { 0% { transform: scale(0.9); } 70% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
/* Reduce Motion (View menu): no animations, no hover tilts. */
:root[data-a11y~="rm"] *, :root[data-a11y~="rm"] *::before, :root[data-a11y~="rm"] *::after { animation: none !important; transition: none !important; }
:root[data-a11y~="rm"] *:hover, :root[data-a11y~="rm"] .brand:hover .logo-mark { transform: none !important; }

/* View control (ported from the Focaltek View Mode, comic styling) */
.nh-view { position: relative; order: 3; margin-left: 8px; }
.site-nav { order: 2; }
.nh-view-btn { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); color: var(--text); border: 2px solid var(--outline); border-radius: 12px; padding: 6px 12px; font: 600 16px var(--font-fun); cursor: pointer; }
.nh-view-btn:hover, .nh-view--open .nh-view-btn { background: var(--tint-2); }
.nh-view-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 20; width: min(340px, calc(100vw - 32px)); overflow-y: auto; background: var(--surface); color: var(--text); border: 3px solid var(--outline); border-radius: 16px; box-shadow: 6px 6px 0 var(--ink); padding: 10px; }
.nh-view-h { font: 600 12px var(--font-fun); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); padding: 6px 8px 4px; }
.nh-view-sep { height: 0; border-top: 2px dashed var(--outline); margin: 8px 4px; opacity: 0.5; }
.nh-view-i { display: flex; align-items: flex-start; gap: 10px; width: 100%; background: none; border: 0; border-radius: 10px; padding: 8px; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.nh-view-i:hover, .nh-view-i:focus-visible { background: var(--tint-2); }
.nh-view-i[aria-disabled="true"] { cursor: default; opacity: 0.75; }
.nh-view-tx { display: grid; gap: 1px; flex: 1; }
.nh-view-t { font: 600 16px var(--font-fun); }
.nh-view-d { font-size: 13.5px; color: var(--muted); line-height: 1.35; }
.nh-view-radio { flex: none; width: 20px; height: 20px; margin-top: 2px; border: 2px solid var(--outline); border-radius: 50%; display: grid; place-items: center; }
.nh-view-i[aria-checked="true"] .nh-view-radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.nh-view-sw { flex: none; position: relative; width: 38px; height: 22px; margin-top: 1px; border: 2px solid var(--outline); border-radius: 999px; background: var(--surface-2); }
.nh-view-knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--outline); transition: left 0.15s ease; }
.nh-view-i[aria-checked="true"] .nh-view-sw { background: var(--teal); }
.nh-view-i[aria-checked="true"] .nh-view-knob { left: 18px; background: #1e1b18; }
.nh-view-state { flex: none; font: 600 12px var(--font-fun); color: var(--muted); margin-top: 3px; min-width: 22px; text-align: right; }
.nh-view--float { position: fixed; right: 16px; bottom: 16px; z-index: 30; }
@media (max-width: 860px) {
  .nh-view { order: 0; margin-left: 0; }
  .nh-view-lbl { display: none; }
  .nh-view-btn { padding: 7px 9px; }
}