/* ============================================================================
   PCL PIXEL ARCADE THEME — "PRAPER CONTENT LEAGUE: SUBMISSION TERMINAL"
   ----------------------------------------------------------------------------
   Direction (per user): no cover image, no soft/kiddish look. A full PIXEL
   design system around the PCL brand DNA:
     · Orange  #ed3b00  (leaderboard bars)        → primary / glow
     · Deep royal-blue family (logo blue banner,
       leaderboard background)                    → backgrounds
     · Pixel fonts: Press Start 2P (arcade display),
       Silkscreen (titles/labels), Pixelify Sans (body)
     · Pixelated inputs, buttons, chips, icons
       (square corners, hard offset shadows, stepped glyphs)
     · Dark mode  = "MIDNIGHT ARCADE"  (royal-blue night + neon orange glow)
     · Light mode = "SUNSET CABINET"   (warm cream + royal navy, no bland white)
   Theme switch: <html data-pcl-theme="light|dark"> (see js/app.js).

   The form UI is PCL-custom (no form framework): panels, retro-well inputs,
   link chips, post rows (EDIT/VIEW), screenshot lightbox. Error model per
   spec: missing field → red border + shadow + small "Required" below, back
   to navy the moment data is entered. Link errors → red chips with the
   reason on hover (amber `.is-status` reserved for the future link-liveness
   check).
   ========================================================================== */

/* ---- Pixel fonts (vendored) ------------------------------------------------ */
@font-face {
  font-family: "Press Start 2P";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/press-start-2p-400.woff2") format("woff2");
}
@font-face {
  font-family: "Pixelify Sans";
  font-style: normal;
  font-weight: 400 700; /* variable font */
  font-display: swap;
  src: url("../fonts/pixelify-sans-var.woff2") format("woff2");
}
@font-face {
  font-family: "Silkscreen";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/silkscreen-400.woff2") format("woff2");
}
@font-face {
  font-family: "Silkscreen";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/silkscreen-700.woff2") format("woff2");
}
@font-face {
  font-family: "VT323";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/VT323-Regular.ttf") format("truetype");
}

/* ---- Brand tokens: LIGHT — "SUNSET CABINET" -------------------------------- */
:root,
html[data-pcl-theme="light"] {
  --pcl-font-display: var(--pcl-font-sans);
  --pcl-font-title: var(--pcl-font-sans);
  --pcl-font-body: var(--pcl-font-sans);

  --pcl-bg-1: #fff3dc;
  --pcl-bg-2: #ffe7bd;
  --pcl-dot: rgba(20, 35, 95, 0.13);
  --pcl-orb-1: rgba(237, 59, 0, 0.13);
  --pcl-orb-2: rgba(36, 64, 200, 0.10);

  /* header band: deep royal indigo — same family as the panel borders and
     hard shadows (#14235f), so it complements the cream body + orange bars
     instead of cutting them with a pure black stripe */
  --pcl-marquee-bg: #1a1b20;
  --pcl-marquee-bg-2: #121317;
  --pcl-marquee-deep: #0c0d11;
  --pcl-marquee-text: #c9cdd8;
  --pcl-marquee-accent: #ff8a5c;

  --pcl-surface: #fffaf0;
  --pcl-surface-2: #fff2da;
  --pcl-surface-3: #ffe6bd;
  --pcl-input-bg: #fffdf6;

  --pcl-text: #14235f;          /* leaderboard royal navy */
  --pcl-muted: #4a5590;         /* readable grey-navy on cream */
  --pcl-primary: #ed3b00;       /* PCL orange (user spec) */
  --pcl-primary-hi: #ff5a1f;
  --pcl-primary-deep: #b52c00;
  --pcl-secondary: #2440c8;     /* royal blue */
  --pcl-cyan: #0d9dd6;
  --pcl-gold: #e8a200;
  --pcl-on-primary: #ffffff;

  --pcl-input-border: #1b2a7a;  /* hard navy borders, light mode */
  --pcl-panel-border: #14235f;
  --pcl-line: rgba(20, 35, 95, 0.35);
  --pcl-line-soft: rgba(20, 35, 95, 0.16);

  --pcl-hard: #14235f;          /* hard offset shadow color */
  --pcl-glow: rgba(237, 59, 0, 0.35);
  --pcl-glow-soft: rgba(237, 59, 0, 0.18);
  --pcl-focus-ring: rgba(237, 59, 0, 0.30);
  --pcl-inset: rgba(20, 35, 95, 0.10);
  --pcl-error: #d81b4e;
  --pcl-error-soft: rgba(216, 27, 78, 0.40);
  --pcl-status: #b97900;        /* reserved: link-liveness warnings */
  --pcl-scan: transparent;      /* no scanlines in light mode */

  color-scheme: light;
}

/* ---- Brand tokens: DARK — "MIDNIGHT ARCADE" -------------------------------- */
html[data-pcl-theme="dark"] {
  --pcl-bg-1: #04052e;
  --pcl-bg-2: #0a0f56;
  --pcl-bg-3: #130b45;
  --pcl-dot: rgba(96, 116, 255, 0.16);
  --pcl-orb-1: rgba(237, 59, 0, 0.17);
  --pcl-orb-2: rgba(59, 110, 255, 0.20);

  --pcl-marquee-bg: #131418;
  --pcl-marquee-bg-2: #0b0c0f;
  --pcl-marquee-deep: #060709;
  --pcl-marquee-text: #c9cdd8;
  --pcl-marquee-accent: #ff8a5c;

  --pcl-surface: #0e1348;
  --pcl-surface-2: #131a5e;
  --pcl-surface-3: #182170;
  --pcl-input-bg: #0a0f3e;

  --pcl-text: #eef0ff;
  --pcl-muted: #c9cfff;         /* bright periwinkle — readable at night */
  --pcl-primary: #ed3b00;
  --pcl-primary-hi: #ff5a1f;
  --pcl-primary-deep: #8f2400;
  --pcl-secondary: #4d74ff;
  --pcl-cyan: #35d6ff;
  --pcl-gold: #ffd21e;
  --pcl-on-primary: #ffffff;

  --pcl-input-border: #33409f;
  --pcl-panel-border: #2a35a8;
  --pcl-line: rgba(140, 155, 255, 0.38);
  --pcl-line-soft: rgba(140, 155, 255, 0.18);

  --pcl-hard: #02020d;
  --pcl-glow: rgba(237, 59, 0, 0.50);
  --pcl-glow-soft: rgba(237, 59, 0, 0.26);
  --pcl-focus-ring: rgba(237, 59, 0, 0.38);
  --pcl-inset: rgba(0, 0, 0, 0.32);
  --pcl-error: #ff4d6f;
  --pcl-error-soft: rgba(255, 77, 111, 0.42);
  --pcl-status: #ffd21e;
  --pcl-scan: transparent;      /* no scanlines: banded lines read as
                                   background seams/repeats on dark gradients */

  color-scheme: dark;
}

/* ---- Reading-font toggle (html[data-pcl-font]) ----------------------------
   "sf" = SF Pro everywhere — the DEFAULT on all three portals (form,
          leaderboard, Control Room), titles and headers included. SF Pro is
          Apple-licensed, so the stack hands off gracefully: real SF Pro on
          Apple devices, Segoe UI / Roboto (its visual siblings) elsewhere.
          Zero download, always crisp.
   "og" = the OG arcade faces — Press Start 2P (display) + Silkscreen
          (titles/labels), ONE Aa tap away on every portal. Numbers, body
          copy and other hard-to-read metrics keep the simple basic sans
          (per spec: pixel identity on the skeleton, readability on data).
   Set BEFORE first paint by the inline head script (localStorage
   "pcl_font"; legacy "vt"/"px" values map onto "og"). */
:root {
  --pcl-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text",
    "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
:root,
html[data-pcl-font="sf"] {
  --pcl-font-display: var(--pcl-font-sans);
  --pcl-font-title: var(--pcl-font-sans);
  --pcl-font-body: var(--pcl-font-sans);
}
html[data-pcl-font="og"] {
  --pcl-font-display: "Press Start 2P", "Silkscreen", monospace;
  --pcl-font-title: "Silkscreen", "Press Start 2P", monospace;
  --pcl-font-body: var(--pcl-font-sans);
}
/* SF Pro reading mode: a step THICKER than the pixel faces needed — weight
   500 on copy + a small SOLID drop shadow so the crisp sans sits inside the
   pixel design (the og faces keep their own ink and shadows). */
:root { --pcl-sf-shadow: rgba(20, 35, 95, 0.16); }
html[data-pcl-theme="dark"] { --pcl-sf-shadow: rgba(2, 4, 20, 0.55); }
body {
  font-weight: 500;
  text-shadow: 1px 1px 0 var(--pcl-sf-shadow);
}
.pcl-input,
.pcl-chipinput { font-weight: 500; }
.pcl-input::placeholder,
.pcl-chipinput::placeholder { font-weight: 400; }

/* ---- Page shell ------------------------------------------------------------- */
* { box-sizing: border-box; }

/* author display values must never resurrect [hidden] elements
   (e.g. .pcl-viewtoggle is display:flex but starts hidden) */
[hidden] { display: none !important; }

/* NOTE: html must NOT get a fixed height (e.g. height:100%). The body's
   background propagates to the document canvas and positions against the
   HTML box — a 100%-tall html made every gradient layer TILE once per
   viewport height, showing seam lines + repeated glow orbs (visible in
   dark mode, invisible in light). Auto height → one seamless painting. */
html { height: auto; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--pcl-font-body);
  font-size: 17px;
  color: var(--pcl-text);
  background-color: var(--pcl-bg-3);   /* seamless continuation past gradient */
  background:
    radial-gradient(1000px 480px at 12% -6%, var(--pcl-orb-1), transparent 62%),
    radial-gradient(900px 520px at 96% 30%, var(--pcl-orb-2), transparent 60%),
    linear-gradient(180deg, var(--pcl-bg-1) 0%, var(--pcl-bg-2) 58%, var(--pcl-bg-3) 100%);
  background-repeat: no-repeat;
  transition: background 0.25s steps(4), color 0.25s steps(4);
}

/* pixel-dot grid + CRT scanlines, fixed layer */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, var(--pcl-dot) 1.6px, transparent 1.8px),
    repeating-linear-gradient(0deg, var(--pcl-scan) 0 1px, transparent 1px 4px);
  background-size: 22px 22px, auto;
}

::selection { background: var(--pcl-primary); color: #fff; }

/* pixel scrollbar (WebKit) */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--pcl-surface-3); }
::-webkit-scrollbar-thumb {
  background: var(--pcl-primary);
  border: 3px solid var(--pcl-surface-3);
}
::-webkit-scrollbar-thumb:hover { background: var(--pcl-primary-hi); }

.pcl-marquee,
.pcl-header,
.pcl-main,
.pcl-footer { position: relative; z-index: 1; }

/* ---- Arcade marquee header (neutral graphite band on BOTH themes) --------
   The user rejected the royal-indigo band (and pure black was only "a little
   better"): this is a near-black graphite with an orange edge — the logo's
   native band stays intact and the orange border carries the brand. */
.pcl-marquee {
  background: linear-gradient(180deg, var(--pcl-marquee-bg), var(--pcl-marquee-bg-2));
  border-bottom: 3px solid var(--pcl-primary);
  box-shadow:
    0 3px 0 rgba(255, 255, 255, 0.04) inset,
    0 6px 26px rgba(0, 0, 0, 0.35);
}

.pcl-header {
  max-width: 820px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
}

/* the brand is a LINK on every portal: click the logo → back to the form */
.pcl-header-brand {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-decoration: none;
}

.pcl-logo {
  display: block;
  width: 172px;
  height: auto;
  image-rendering: auto; /* grunge brand art — keep smooth, it sits in the marquee */
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.55));
  flex: 0 0 auto;
}

/* SEASON 2 — a tiny stylish tag RIGHT BELOW the logo (user spec: 7–8px,
   a face that fits the pixel logo). Silkscreen is the logo's own family. */
.pcl-season {
  font-family: "Silkscreen", "Press Start 2P", monospace;
  font-size: 7.5px;
  letter-spacing: 3px;
  text-indent: 3px;           /* optically re-centres the letter-spaced caps */
  color: #ff8a5c;
  text-shadow: 1px 1px 0 #000, 0 0 10px rgba(237, 59, 0, 0.55);
  margin: 0;
  white-space: nowrap;
  transition: color 0.12s steps(2);
}
.pcl-header-brand:hover .pcl-season { color: #fff; }

.pcl-marquee-divider {
  width: 3px;
  align-self: stretch;
  background: var(--pcl-primary);
  box-shadow: 3px 0 0 rgba(255, 90, 31, 0.35);
  flex: 0 0 auto;
}

.pcl-header-text { flex: 1; min-width: 0; }

/* SEASON 2 tag is styled above (under the logo). The old kicker/insert
   rows are gone from the header — the marquee is deliberately minimal. */
.pcl-header-text .pcl-kicker,
.pcl-header-text .pcl-insert,
.pcl-header-text { font-size: inherit; }
.pcl-header-text { flex: 1; min-width: 0; }

/* pixel "insert" play glyph — points RIGHT (▶), towards the entry drop */
.pcl-px-play {
  position: relative;
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}
.pcl-px-play::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 4px;
  width: 4px;
  height: 4px;
  background: var(--pcl-primary-hi);
  box-shadow:
    -8px -8px 0 var(--pcl-primary-hi),
    -8px -4px 0 var(--pcl-primary-hi),
    -8px 0 0 var(--pcl-primary-hi),
    -8px 4px 0 var(--pcl-primary-hi),
    -8px 8px 0 var(--pcl-primary-hi),
    -4px -4px 0 var(--pcl-primary-hi),
    -4px 0 0 var(--pcl-primary-hi),
    -4px 4px 0 var(--pcl-primary-hi),
    0 0 0 var(--pcl-primary-hi);
}

/* blinking "continue" cursor */
.pcl-blink {
  color: var(--pcl-primary-hi);
  animation: pclBlink 1.1s steps(1) infinite;
}
@keyframes pclBlink {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0; }
}

/* pixel theme toggle — kept a step inside the header edge so the right
   side doesn't read as congested against the marquee border */
.pcl-toggle {
  flex: 0 0 auto;
  margin-right: 10px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  cursor: pointer;
  border: 3px solid var(--pcl-primary);
  background: var(--pcl-marquee-deep);
  color: var(--pcl-gold);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.45);
  transition: transform 0.06s steps(2), box-shadow 0.06s steps(2);
}
.pcl-toggle:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.65), 0 0 14px var(--pcl-glow);
}
.pcl-toggle:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.65);
}
.pcl-toggle:focus-visible {
  outline: 2px solid var(--pcl-cyan);
  outline-offset: 2px;
}

.pcl-px-icon { position: relative; width: 20px; height: 20px; }
.pcl-px-icon::before {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  background: currentColor;
}

/* pixel sun: 3x3 core + rays */
.pcl-px-sun::before {
  left: 8px; top: 8px;
  box-shadow:
    -4px 0 0 currentColor, 4px 0 0 currentColor, 0 -4px 0 currentColor,
    0 4px 0 currentColor,
    -8px -8px 0 currentColor, 8px -8px 0 currentColor,
    -8px 8px 0 currentColor, 8px 8px 0 currentColor,
    0 -8px 0 currentColor, 0 8px 0 currentColor,
    -8px 0 0 currentColor, 8px 0 0 currentColor;
}

/* pixel moon: FULL round disc with craters */
.pcl-px-moon::before {
  left: 8px; top: 8px;
  box-shadow:
    -4px -8px 0 currentColor, 0 -8px 0 currentColor, 4px -8px 0 currentColor,
    -8px -4px 0 currentColor, -4px -4px 0 currentColor, 0 -4px 0 currentColor,
    4px -4px 0 currentColor, 8px -4px 0 currentColor,
    -8px 0 0 currentColor, -4px 0 0 currentColor, 4px 0 0 currentColor,
    8px 0 0 currentColor,
    -8px 4px 0 currentColor, -4px 4px 0 currentColor, 0 4px 0 currentColor,
    4px 4px 0 currentColor, 8px 4px 0 currentColor,
    -4px 8px 0 currentColor, 0 8px 0 currentColor, 4px 8px 0 currentColor;
}
.pcl-px-moon::after {
  content: "";
  position: absolute;
  left: 4px; top: 0;
  width: 4px;
  height: 4px;
  background: rgba(16, 16, 36, 0.5);
  box-shadow:
    8px 8px 0 rgba(16, 16, 36, 0.5),
    0 12px 0 rgba(16, 16, 36, 0.35);
}

.pcl-toggle .pcl-px-sun { display: none; }
.pcl-toggle .pcl-px-moon { display: block; }
html[data-pcl-theme="dark"] .pcl-toggle .pcl-px-sun { display: block; }
html[data-pcl-theme="dark"] .pcl-toggle .pcl-px-moon { display: none; }

/* ---- Main stage -------------------------------------------------------------- */
.pcl-main {
  flex: 1;
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding: 22px 20px 34px;
}

/* ---- Footer ------------------------------------------------------------------- */
.pcl-footer {
  max-width: 820px;
  width: 100%;
  margin: 0 auto;
  padding: 16px 20px 28px;
  font-family: var(--pcl-font-title);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 1.6px;
  line-height: 1.9;
  color: var(--pcl-muted);
  text-align: center;
  text-transform: uppercase;
  border-top: 3px dashed var(--pcl-line);
}

/* ============================================================================
   FORM — panels, fields, inputs
   ========================================================================== */
.pcl-form-note {
  font-family: var(--pcl-font-body);
  font-size: 16px;
  color: var(--pcl-muted);
  margin: 0 0 16px;
}

.pcl-panel {
  background: var(--pcl-surface);
  border: 3px solid var(--pcl-panel-border);
  box-shadow: 6px 6px 0 var(--pcl-hard);
  padding: 16px 18px 18px;
  margin: 0 0 26px;
}

/* panel title as an ORANGE BAR (leaderboard DNA) */
.pcl-panel-title {
  display: inline-block;
  background: linear-gradient(90deg, var(--pcl-primary) 0%, var(--pcl-primary-hi) 100%);
  color: #fff;
  font-family: var(--pcl-font-title);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.6;
  padding: 6px 13px 5px;
  box-shadow: 3px 3px 0 var(--pcl-hard);
  margin: 0 0 14px;
}

.pcl-opt {
  display: inline-block;
  vertical-align: 2px;
  margin-left: 8px;
  font-family: var(--pcl-font-title);
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 1.2px;
  color: var(--pcl-muted);
  background: var(--pcl-surface-2);
  border: 2px solid var(--pcl-line-soft);
  padding: 3px 6px 2px;
}

.pcl-hint {
  font-size: 16px;
  line-height: 1.55;
  color: var(--pcl-muted);
  margin: -4px 2px 12px;
}

.pcl-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ---- Fields ---------------------------------------------------------------- */
.pcl-field { min-width: 0; }

.pcl-label {
  display: block;
  font-family: var(--pcl-font-title);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--pcl-text);
  margin: 0 0 6px;
}

/* retro well — navy border, inset shade, orange focus glow */
.pcl-input {
  display: block;
  width: 100%;
  background: var(--pcl-input-bg);
  border: 3px solid var(--pcl-input-border);
  border-radius: 0;
  box-shadow: inset 3px 3px 0 var(--pcl-inset);
  color: var(--pcl-text);
  font-family: var(--pcl-font-body);
  font-size: 17px;
  padding: 10px 12px 9px;
  caret-color: var(--pcl-primary);
  transition: border-color 0.1s steps(2), box-shadow 0.1s steps(2);
}
.pcl-input::placeholder {
  color: var(--pcl-muted);
  opacity: 0.8;
}
.pcl-input:hover { border-color: var(--pcl-primary); }
.pcl-input:focus {
  outline: none;
  border-color: var(--pcl-primary);
  box-shadow:
    inset 3px 3px 0 var(--pcl-inset),
    0 0 0 2px var(--pcl-focus-ring),
    0 0 14px var(--pcl-glow);
}
.pcl-textarea { min-height: 64px; resize: vertical; line-height: 1.5; }

/* select keeps the pixel well + a stepped chevron */
.pcl-selectwrap { position: relative; }
.pcl-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
}
.pcl-chevron {
  position: absolute;
  right: 13px;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translateY(-4px);
  pointer-events: none;
}
.pcl-chevron::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 4px;
  background: var(--pcl-primary-hi);
  box-shadow:
    4px 0 0 var(--pcl-primary-hi), 8px 0 0 var(--pcl-primary-hi),
    2px 4px 0 var(--pcl-primary-hi), 6px 4px 0 var(--pcl-primary-hi),
    4px 8px 0 var(--pcl-primary-hi);
}

/* ---- Error model ------------------------------------------------------------
   Missing required input → red border + red shadow + small "Required" under
   the field; the moment data is entered the navy well returns. */
.pcl-err {
  display: none;
  font-family: var(--pcl-font-title);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.8px;
  color: var(--pcl-error);
  margin: 5px 2px 0;
}
.pcl-field.is-error .pcl-err,
.pcl-cell.is-error .pcl-err { display: block; }

/* ---- Auto-count tags (OCR / YouTube) ----------------------------------------
   The form reads the number itself: YouTube via the official Data API key,
   screenshots via client-side Tesseract. Tags are machine → human, so they
   always stay in the readable sans stack (never the OG arcade font). */
.pcl-sug {
  display: block;
  min-height: 0;
  margin: 4px 2px 0;
  font-family: var(--pcl-font-sans);
}
.pcl-sug:empty { display: none; }
.pcl-sugtag,
.pcl-sugchip {
  display: inline-block;
  font-family: var(--pcl-font-sans);
  font-weight: 700;
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.7px;
  padding: 4px 7px;
  border-radius: 4px;
}
.pcl-sugtag.is-auto {              /* solid read auto-filled the field */
  color: #ffffff;
  background: #1d9e57;             /* the same green as the verified ticks */
  box-shadow: 2px 2px 0 rgba(20, 35, 95, 0.25);
}
.pcl-sugtag.is-ok {                /* typed value agrees with the machine */
  color: #12633a;
  background: rgba(29, 158, 87, 0.14);
  border: 1px solid rgba(29, 158, 87, 0.55);
}
.pcl-sugtag.is-work {              /* Tesseract is on it */
  color: var(--pcl-muted);
  border: 1px dashed var(--pcl-line);
  animation: pcl-sug-pulse 1.1s ease-in-out infinite;
}
.pcl-sugtag.is-warn {              /* OCR lib blocked / crashed — type it */
  color: var(--pcl-status);
  border: 1px dashed var(--pcl-status);
}
@keyframes pcl-sug-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
.pcl-sugchip {                     /* tap to adopt the machine-read number */
  cursor: pointer;
  color: #ffffff;
  background: var(--pcl-primary);
  border: 2px solid var(--pcl-primary-deep);
  box-shadow: 3px 3px 0 rgba(20, 35, 95, 0.3);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.pcl-sugchip:hover { background: var(--pcl-primary-hi); }
.pcl-sugchip:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 rgba(20, 35, 95, 0.3);
}
html[data-pcl-theme="dark"] .pcl-sugtag.is-ok { color: #4ade9b; }
html[data-pcl-theme="dark"] .pcl-sugtag.is-warn { color: #ffbf47; }
html[data-pcl-theme="dark"] .pcl-sugchip { box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.45); }
.pcl-field.is-error .pcl-input {
  border-color: var(--pcl-error);
  box-shadow: 4px 4px 0 var(--pcl-error-soft), 0 0 12px var(--pcl-error-soft);
}
.pcl-field.is-error .pcl-input:focus {
  box-shadow: 4px 4px 0 var(--pcl-error-soft), 0 0 14px var(--pcl-error-soft);
}

/* ============================================================================
   POST LINKS — chip box
   ========================================================================== */
.pcl-chipbox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  min-height: 56px;
  background: var(--pcl-input-bg);
  border: 3px solid var(--pcl-input-border);
  border-radius: 0;
  box-shadow: inset 3px 3px 0 var(--pcl-inset);
  transition: border-color 0.1s steps(2), box-shadow 0.1s steps(2);
  cursor: text;
}
.pcl-chipbox:hover { border-color: var(--pcl-primary); }
.pcl-chipbox:focus-within {
  border-color: var(--pcl-primary);
  box-shadow:
    inset 3px 3px 0 var(--pcl-inset),
    0 0 0 2px var(--pcl-focus-ring),
    0 0 14px var(--pcl-glow);
}
.pcl-field.is-error .pcl-chipbox {
  border-color: var(--pcl-error);
  box-shadow: 4px 4px 0 var(--pcl-error-soft), 0 0 12px var(--pcl-error-soft);
}

.pcl-chips {
  display: contents;   /* chips participate in the box's own wrap flow */
}

.pcl-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  font-family: var(--pcl-font-title);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--pcl-text);
  background: var(--pcl-surface-3);
  border: 2px solid var(--pcl-input-border);
  box-shadow: 2px 2px 0 var(--pcl-hard);
  padding: 5px 6px 4px 9px;
}
.pcl-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}
.pcl-chip-x {
  width: 14px;
  height: 14px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  opacity: 0.45;
  flex: 0 0 auto;
}
.pcl-chip-x::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  width: 4px;
  height: 4px;
  background: currentColor;
  box-shadow:
    -3px -3px 0 currentColor, 3px 3px 0 currentColor,
    -3px 3px 0 currentColor, 3px -3px 0 currentColor;
}
.pcl-chip-x:hover { opacity: 1; color: var(--pcl-error); }
/* cross reveals on hover (desktop); always faintly visible on touch */
@media (hover: hover) {
  .pcl-chip .pcl-chip-x { opacity: 0; }
  .pcl-chip:hover .pcl-chip-x,
  .pcl-chip-x:focus-visible { opacity: 1; }
}

/* link error chip — red, reason on hover.
   `.is-status` (amber) is reserved for the future link-liveness check. */
.pcl-chip.is-error {
  color: var(--pcl-error);
  border-color: var(--pcl-error);
  background: var(--pcl-surface);
  box-shadow: 2px 2px 0 var(--pcl-error-soft);
  cursor: pointer;      /* click the chip to jump into the broken part */
}
.pcl-chip.is-status {
  color: var(--pcl-status);
  border-color: var(--pcl-status);
}
/* the broken SEGMENT of the link, lit up inside the chip — clicking the chip
   drops the link back into the input with exactly that part selected */
.pcl-chip-bad {
  background: var(--pcl-error);
  color: #fff;
  padding: 1px 3px 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.pcl-chip.is-dup {
  color: var(--pcl-status);
  border-color: var(--pcl-status);
  background: var(--pcl-surface);
  box-shadow: 2px 2px 0 rgba(185, 121, 0, 0.35);
  overflow: hidden;
}
.pcl-chip.is-dup .pcl-dupbar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--pcl-status);
  animation: pclDupShrink 3s linear forwards;
}
@keyframes pclDupShrink { from { width: 100%; } to { width: 0%; } }
.pcl-chip.is-dup.is-leaving {
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.18s steps(3), transform 0.18s steps(3);
}
.pcl-chip.is-error::after {
  content: attr(data-reason);
  position: absolute;
  left: 0;
  bottom: calc(100% + 9px);
  z-index: 40;
  width: max-content;
  max-width: 260px;
  background: #0b0b14;
  color: #fff;
  font-family: var(--pcl-font-body);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.2px;
  text-align: left;
  padding: 7px 10px 6px;
  border: 2px solid var(--pcl-error);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(2px);
  pointer-events: none;
  transition: opacity 0.12s steps(2), transform 0.12s steps(2);
}
.pcl-chip.is-error:hover::after,
.pcl-chip.is-error:focus-within::after {
  opacity: 1;
  transform: translateY(0);
}

.pcl-chipinput {
  flex: 1 1 200px;
  min-width: 160px;
  background: transparent;
  border: none;
  color: var(--pcl-text);
  font-family: var(--pcl-font-body);
  font-size: 17px;
  padding: 6px 2px;
  caret-color: var(--pcl-primary);
}
.pcl-chipinput:focus { outline: none; }
.pcl-chipinput::placeholder { color: var(--pcl-muted); opacity: 0.8; }

/* manager autocomplete — pixel listbox hanging off the reporting-manager well */
.pcl-acwrap { position: relative; min-width: 0; }
.pcl-ac {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  right: 0;
  z-index: 70;
  background: var(--pcl-surface);
  border: 3px solid var(--pcl-input-border);
  box-shadow: 4px 4px 0 var(--pcl-hard), 0 0 14px var(--pcl-glow-soft);
  max-height: 238px;
  overflow-y: auto;
}
.pcl-ac-opt {
  display: block;
  width: 100%;
  text-align: left;
  font-family: var(--pcl-font-body);
  font-size: 16px;
  color: var(--pcl-text);
  background: none;
  border: none;
  border-bottom: 2px solid var(--pcl-line-soft);
  padding: 9px 12px 8px;
  cursor: pointer;
}
.pcl-ac-opt:last-child { border-bottom: none; }
.pcl-ac-opt:hover,
.pcl-ac-opt.is-sel { background: var(--pcl-surface-3); }
.pcl-ac-opt b { color: var(--pcl-primary); }
.pcl-ac-opt:focus-visible { outline: 2px solid var(--pcl-cyan); outline-offset: -2px; }
.pcl-ac-none {
  font-size: 14px;
  color: var(--pcl-muted);
  padding: 9px 12px;
}

/* small "+ ADD" committer */
.pcl-addbtn {
  flex: 0 0 auto;
  font-family: var(--pcl-font-display);
  font-size: 9px;
  letter-spacing: 0.5px;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
  background: linear-gradient(180deg, var(--pcl-primary-hi), var(--pcl-primary));
  border: 2px solid var(--pcl-primary-deep);
  box-shadow: 3px 3px 0 var(--pcl-hard);
  padding: 9px 10px 8px;
  cursor: pointer;
  transition: transform 0.06s steps(2), box-shadow 0.06s steps(2);
}
.pcl-addbtn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--pcl-hard), 0 0 12px var(--pcl-glow);
}
.pcl-addbtn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--pcl-hard);
}
.pcl-addbtn:focus-visible { outline: 2px solid var(--pcl-cyan); outline-offset: 2px; }

/* ============================================================================
   POST DETAILS — header (count + EDIT/VIEW), rows in both modes
   ========================================================================== */
.pcl-details-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.pcl-details-head .pcl-panel-title { margin-bottom: 0; }

.pcl-count {
  font-family: var(--pcl-font-title);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.2px;
  color: var(--pcl-muted);
  border: 2px dashed var(--pcl-line);
  padding: 6px 9px 5px;
}

.pcl-viewtoggle { margin-left: auto; display: flex; gap: 6px; }
.pcl-vbtn {
  font-family: var(--pcl-font-title);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--pcl-muted);
  background: var(--pcl-surface-2);
  border: 2px solid var(--pcl-input-border);
  box-shadow: 2px 2px 0 var(--pcl-hard);
  padding: 7px 10px 6px;
  cursor: pointer;
  transition: background 0.1s steps(2), color 0.1s steps(2);
}
.pcl-vbtn:hover { background: var(--pcl-surface-3); color: var(--pcl-text); }
.pcl-vbtn.is-active {
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
  background: linear-gradient(180deg, var(--pcl-primary-hi), var(--pcl-primary));
  border-color: var(--pcl-primary-deep);
  box-shadow: 2px 2px 0 var(--pcl-hard), 0 0 10px var(--pcl-glow-soft);
}
.pcl-vbtn:focus-visible { outline: 2px solid var(--pcl-cyan); outline-offset: 2px; }

.pcl-empty {
  font-size: 16.5px;
  color: var(--pcl-muted);
  margin: 12px 2px 2px;
}

/* format badge — auto-detected from the link, multiplier included */
.pcl-fmt {
  flex: 0 0 auto;
  font-family: var(--pcl-font-title);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.6px;
  color: var(--pcl-text);
  background: var(--pcl-surface-3);
  border: 2px solid var(--pcl-line-soft);
  padding: 4px 7px 3px;
  white-space: nowrap;
}
.pcl-fmt b { color: var(--pcl-primary-hi); font-weight: 700; }

/* ---- EDIT mode: everything on ONE row ---------------------------------------
   grid: # | link + badge | views | screenshot square | collab circle         */
.pcl-post {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 176px 44px 44px;
  gap: 8px 10px;
  align-items: center;
  padding: 10px 0 12px;
  border-bottom: 2px dashed var(--pcl-line-soft);
}
.pcl-post:last-child { border-bottom: none; padding-bottom: 6px; }

.pcl-post-num {
  font-family: var(--pcl-font-display);
  font-size: 11px;
  color: var(--pcl-primary-hi);
  text-shadow: 0 0 8px var(--pcl-glow-soft);
}

.pcl-post-main {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
.pcl-post-link {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  font-size: 15.5px;
  color: var(--pcl-secondary);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.pcl-post-link:hover { color: var(--pcl-primary); }

.pcl-views { font-size: 15px; padding: 9px 10px 8px; }

/* screenshot button — a compact SQUARE well that fits the row (no wide
   rectangle): dashed + open-folder glyph when empty, solid orange + a
   thumbnail filling the square once attached. Mobile expands it to a
   full-width well with a text label (see the media queries below). */
.pcl-shotbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: var(--pcl-muted);
  background: var(--pcl-surface-2);
  border: 3px dashed var(--pcl-line);
  cursor: pointer;
  transition: border-color 0.1s steps(2), box-shadow 0.1s steps(2),
              color 0.1s steps(2);
}
.pcl-shotbtn-label { display: none; }   /* desktop keeps the pure square */
.pcl-shotbtn:hover { border-color: var(--pcl-primary); color: var(--pcl-text); }
.pcl-shotbtn.is-set {
  border-style: solid;
  border-color: var(--pcl-primary);
  color: var(--pcl-text);
  background: var(--pcl-surface-3);
  box-shadow: 3px 3px 0 var(--pcl-hard), 0 0 10px var(--pcl-glow-soft);
}
.pcl-shotbtn:focus-visible,
.pcl-vshot:focus-visible { outline: 2px solid var(--pcl-cyan); outline-offset: 2px; }

.pcl-shotbtn .pcl-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  flex: 0 0 auto;
}

/* pixel photo icon (camera frame + dot) */
.pcl-px-photo {
  position: relative;
  width: 13px;
  height: 11px;
  border: 2px solid currentColor;
  flex: 0 0 auto;
}
.pcl-px-photo::before {
  content: "";
  position: absolute;
  left: -5px;
  top: -4px;
  width: 4px;
  height: 2px;
  background: currentColor;
  box-shadow: 13px 0 0 currentColor;
}
.pcl-px-photo::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 2px;
  width: 3px;
  height: 3px;
  background: currentColor;
}

/* missing-screenshot error state (red well + "Required") */
.pcl-cell.is-error .pcl-shotbtn {
  border-color: var(--pcl-error);
  color: var(--pcl-error);
  box-shadow: 3px 3px 0 var(--pcl-error-soft);
}

/* ---- VIEW mode: compact confirmation rows ------------------------------------ */
.pcl-vrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 11px 2px 12px;
  border-bottom: 2px dashed var(--pcl-line-soft);
}
.pcl-vrow:last-child { border-bottom: none; padding-bottom: 4px; }
.pcl-vnum {
  font-family: var(--pcl-font-display);
  font-size: 10px;
  color: var(--pcl-primary-hi);
  text-shadow: 0 0 8px var(--pcl-glow-soft);
  min-width: 22px;
}
.pcl-vlink {
  flex: 1 1 200px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15.5px;
  color: var(--pcl-secondary);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.pcl-vlink:hover { color: var(--pcl-primary); }
.pcl-vshot {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--pcl-font-title);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.8px;
  color: var(--pcl-muted);
  background: var(--pcl-surface-2);
  border: 2px dashed var(--pcl-line);
  padding: 8px 10px 7px;
  cursor: pointer;
}
.pcl-vshot:hover { border-color: var(--pcl-primary); color: var(--pcl-text); }
.pcl-vshot.is-set {
  border-style: solid;
  border-color: var(--pcl-primary);
  color: var(--pcl-text);
  background: var(--pcl-surface-3);
  box-shadow: 2px 2px 0 var(--pcl-hard), 0 0 10px var(--pcl-glow-soft);
}
.pcl-vshot.is-missing { color: var(--pcl-error); border-color: var(--pcl-error); }

/* ============================================================================
   SUBMIT BAR
   ========================================================================== */
.pcl-submitbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 28px 0 8px;
}
.pcl-btn--primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--pcl-font-display);
  font-size: 12px;
  letter-spacing: 1px;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
  background: linear-gradient(180deg, var(--pcl-primary-hi), var(--pcl-primary));
  border: 3px solid var(--pcl-primary-deep);
  box-shadow: 5px 5px 0 var(--pcl-hard), 0 0 16px var(--pcl-glow-soft);
  padding: 14px 22px 13px;
  cursor: pointer;
  transition: transform 0.06s steps(2), box-shadow 0.06s steps(2);
}
.pcl-btn--primary:hover {
  transform: translate(-1px, -1px);
  box-shadow: 6px 6px 0 var(--pcl-hard), 0 0 18px var(--pcl-glow);
}
.pcl-btn--primary:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--pcl-hard);
}
.pcl-btn--primary:focus-visible { outline: 2px solid var(--pcl-cyan); outline-offset: 3px; }
.pcl-btn--primary[disabled] { opacity: 0.6; cursor: wait; transform: none; }

.pcl-savestate {
  font-family: var(--pcl-font-title);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--pcl-muted);
}
.pcl-savestate.is-fail { color: var(--pcl-error); }

/* ============================================================================
   SCREENSHOT LIGHTBOX — floating window, centered; details line below the
   image; thumbnail strip beside/below; PREV / NEXT arrows with text.
   ========================================================================== */
.pcl-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.pcl-lightbox[hidden] { display: none; }
.pcl-lb-back {
  position: absolute;
  inset: 0;
  background: rgba(3, 4, 24, 0.86);
}
.pcl-lb-card {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin: 0;
  max-width: min(960px, 96vw);
  max-height: 90vh;
  background: var(--pcl-surface);
  border: 3px solid var(--pcl-panel-border);
  box-shadow: 8px 8px 0 var(--pcl-hard), 0 0 34px rgba(237, 59, 0, 0.25);
  padding: 16px;
}
.pcl-lb-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  min-width: 0;
  overflow: auto;
}
.pcl-lb-img {
  display: block;
  max-width: 100%;
  max-height: 56vh;
  object-fit: contain;
  background: var(--pcl-input-bg);
  border: 3px solid var(--pcl-input-border);
  box-shadow: 4px 4px 0 var(--pcl-hard);
}
.pcl-lb-line {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--pcl-text);
  text-align: center;
}
.pcl-lb-line a {
  color: var(--pcl-secondary);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.pcl-lb-line b { color: var(--pcl-primary-hi); }
.pcl-lb-strip {
  display: flex;
  gap: 8px;
  max-width: 100%;
  overflow-x: auto;
  padding: 3px 2px;
}
.pcl-lb-thumb {
  width: 68px;
  height: 48px;
  overflow: hidden;
  object-fit: cover;
  border: 2px solid var(--pcl-line-soft);
  opacity: 0.72;
  cursor: pointer;
  padding: 0;
  background: var(--pcl-input-bg);
}
.pcl-lb-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pcl-lb-thumb:hover { opacity: 1; }
.pcl-lb-thumb.is-active {
  border-color: var(--pcl-primary);
  box-shadow: 0 0 10px var(--pcl-glow-soft);
  opacity: 1;
}

.pcl-lb-nav {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--pcl-font-title);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--pcl-text);
  background: var(--pcl-surface-2);
  border: 2px solid var(--pcl-input-border);
  box-shadow: 3px 3px 0 var(--pcl-hard);
  padding: 12px 12px 11px;
  cursor: pointer;
  flex: 0 0 auto;
}
.pcl-lb-nav:hover {
  background: var(--pcl-surface-3);
  box-shadow: 3px 3px 0 var(--pcl-hard), 0 0 12px var(--pcl-glow-soft);
}
.pcl-lb-nav:focus-visible { outline: 2px solid var(--pcl-cyan); outline-offset: 2px; }

/* pixel arrows: right-pointing by default; PREV mirrors */
.pcl-px-arr {
  position: relative;
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
}
.pcl-px-arr::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 4px;
  width: 4px;
  height: 4px;
  background: var(--pcl-primary-hi);
  box-shadow:
    -8px -8px 0 var(--pcl-primary-hi), -8px -4px 0 var(--pcl-primary-hi),
    -8px 0 0 var(--pcl-primary-hi), -8px 4px 0 var(--pcl-primary-hi),
    -8px 8px 0 var(--pcl-primary-hi), -4px -4px 0 var(--pcl-primary-hi),
    -4px 0 0 var(--pcl-primary-hi), -4px 4px 0 var(--pcl-primary-hi),
    0 0 0 var(--pcl-primary-hi);
}
.pcl-px-arr--left { transform: scaleX(-1); }

.pcl-lb-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(180deg, var(--pcl-primary-hi), var(--pcl-primary));
  border: 3px solid var(--pcl-primary-deep);
  box-shadow: 3px 3px 0 var(--pcl-hard);
  cursor: pointer;
}
.pcl-lb-close:hover { box-shadow: 3px 3px 0 var(--pcl-hard), 0 0 14px var(--pcl-glow); }
.pcl-lb-close:focus-visible { outline: 2px solid var(--pcl-cyan); outline-offset: 2px; }

.pcl-px-x {
  position: relative;
  width: 14px;
  height: 14px;
}
.pcl-px-x::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  width: 4px;
  height: 4px;
  background: currentColor;
  box-shadow:
    -4px -4px 0 currentColor, 4px 4px 0 currentColor,
    -4px 4px 0 currentColor, 4px -4px 0 currentColor;
}

/* ============================================================================
   Completed screen: LEVEL CLEARED
   ============================================================================ */
.pcl-done {
  text-align: center;
  padding: 30px 8px 12px;
  font-family: var(--pcl-font-body);
}
.pcl-done[hidden] { display: none; }
.pcl-done-stars {
  font-family: var(--pcl-font-display);
  font-size: 30px;
  letter-spacing: 8px;
  color: var(--pcl-gold);
  text-shadow: 0 0 14px var(--pcl-glow), 3px 3px 0 var(--pcl-hard);
  margin-bottom: 18px;
  animation: pclPop 0.4s steps(3);
}
.pcl-done h3 {
  font-family: var(--pcl-font-display);
  font-size: 22px;
  line-height: 1.9;
  letter-spacing: 1px;
  color: var(--pcl-primary-hi);
  text-shadow: 3px 3px 0 var(--pcl-hard), 0 0 18px var(--pcl-glow);
  margin: 0 0 10px;
}
.pcl-done-sub {
  font-family: var(--pcl-font-title);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--pcl-text);
  margin: 0 0 14px;
}
.pcl-done-xp {
  display: inline-block;
  font-family: var(--pcl-font-display);
  font-size: 12.5px;
  color: #fff;
  background: linear-gradient(180deg, var(--pcl-primary-hi), var(--pcl-primary));
  border: 3px solid var(--pcl-primary-deep);
  box-shadow: 4px 4px 0 var(--pcl-hard), 0 0 16px var(--pcl-glow);
  padding: 8px 14px 7px;
  margin: 0 0 18px;
}
.pcl-done p.pcl-done-note {
  color: var(--pcl-muted);
  font-size: 16.5px;
  margin: 0;
}
@keyframes pclPop {
  0% { transform: scale(0.4); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ---- Required-star ----------------------------------------------------------- */
.pcl-req-star {
  color: var(--pcl-primary-hi);
  font-weight: 700;
  text-shadow: 0 0 8px var(--pcl-glow-soft);
}

/* dark-mode halo on muted copy (pixel fonts get jaggy on gradients) */
html[data-pcl-theme="dark"] .pcl-form-note,
html[data-pcl-theme="dark"] .pcl-hint,
html[data-pcl-theme="dark"] .pcl-empty,
html[data-pcl-theme="dark"] .pcl-footer,
html[data-pcl-theme="dark"] .pcl-done-note,
html[data-pcl-theme="dark"] .pcl-chipinput::placeholder,
html[data-pcl-theme="dark"] .pcl-input::placeholder {
  text-shadow: 0 0 9px rgba(160, 172, 255, 0.35);
}

/* ---- Mobile ---------------------------------------------------------------------- */
@media (max-width: 620px) {
  .pcl-header { gap: 12px; padding: 12px 14px; }
  .pcl-logo { width: 118px; }
  .pcl-season { font-size: 7px; letter-spacing: 2.4px; text-indent: 2.4px; }
  .pcl-marquee-divider { display: none; }
  .pcl-toggle { margin-right: 4px; width: 42px; height: 42px; }
  .pcl-board-links { gap: 6px; }
  .pcl-main { padding: 16px 14px 28px; }

  .pcl-panel { padding: 14px 12px 16px; }
  .pcl-panel-title { font-size: 12.5px; }
  .pcl-grid2 { grid-template-columns: 1fr; }

  .pcl-post {
    grid-template-columns: 24px minmax(0, 1fr) 48px;
    grid-template-areas:
      "num  main  collab"
      "views views views"
      "shot  shot  shot";
    gap: 10px 8px;
    padding: 14px 0 16px;
  }
  .pcl-post-num { grid-area: num; align-self: start; padding-top: 3px; }
  .pcl-post-main { grid-area: main; }
  .pcl-cell--views { grid-area: views; }
  .pcl-cell--shot { grid-area: shot; }
  .pcl-collabrow { grid-area: collab; }

  /* Post Details on the phone: the row becomes a CARD — line 1 identity
     (# + link + badge + collab circle), line 2 a full-width views input,
     line 3 a full-width screenshot well with a real label + touch target */
  .pcl-views { font-size: 16px; padding: 12px 12px 11px; }  /* 16px = iOS won't zoom */
  .pcl-shotbtn {
    width: 100%;
    height: 54px;
    display: flex;
    flex-direction: row;
    gap: 12px;
  }
  .pcl-shotbtn .pcl-folder-ico { width: 26px; height: 21px; }
  .pcl-shotbtn-label {
    display: inline;
    font-family: var(--pcl-font-title);
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
  }
  .pcl-shotbtn.is-set { height: 110px; }
  .pcl-post .pcl-err { margin-top: 6px; }

  .pcl-btn--primary { width: 100%; justify-content: center; }

  .pcl-lb-card {
    flex-wrap: wrap;
    padding: 12px;
    max-height: 92vh;
    overflow-y: auto;
  }
  .pcl-lb-stage { order: -1; flex: 1 1 100%; }
  .pcl-lb-nav { flex: 1 1 auto; justify-content: center; }
  .pcl-lb-close { top: -12px; right: -8px; }
  .pcl-footer { font-size: 10.5px; letter-spacing: 1.2px; }
}

/* ---- Reduced motion ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pcl-blink { animation: none; }
}

/* ---- Leaderboard link (marquee band on every portal) ----------------------- */
/* Lives in the graphite marquee band, so its colors are theme-independent. */
.pcl-board-link {
  display: inline-block;
  margin-top: 9px;
  font-family: "Silkscreen", "Press Start 2P", monospace;
  font-size: 10px;
  letter-spacing: 1px;
  text-decoration: none;
  color: var(--pcl-primary-hi, #ff5a1f);
  border-bottom: 2px solid transparent;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6);
}
.pcl-board-link:hover {
  color: #ffffff;
  border-bottom-color: var(--pcl-primary-hi, #ff5a1f);
}

/* the portal links (LEADERBOARD / RULEBOOK) — a right-aligned stack between
   the brand and the toggles: the marquee reads logo → links → controls */
.pcl-board-links {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
  min-width: 0;
}
.pcl-board-links .pcl-board-link { margin-top: 0; }
button.pcl-board-link {
  font: inherit;
  letter-spacing: inherit;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0 0 1px;
  cursor: pointer;
}

/* ---- Reading-font toggle button (sits beside the theme toggle) -------------- */
.pcl-toggle--font { margin-right: 0; }
.pcl-header .pcl-toggle--font { margin-left: -6px; }
.pcl-font-glyph {
  font-family: "Silkscreen", monospace;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--pcl-gold);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.55);
  line-height: 1;
  transform: translateY(-1px);
}
.pcl-toggle--font[aria-pressed="true"] .pcl-font-glyph {
  color: var(--pcl-marquee-accent, #35d6ff);
}

/* ---- Player photo — a CIRCULAR avatar inline with the name fields ----------
   One row like the admin feed rows: circle + FULL NAME + REPORTING MANAGER.
   Dashed circle + open-folder glyph when empty; the photo fills the circle
   (circular boundary, solid orange ring) once set. READY / alt text share
   one small caption line under the row. */
.pcl-playergrid {
  display: grid;
  grid-template-columns: 84px 1fr 1fr;
  grid-template-areas:
    "photo desig name"
    "photo manager manager"
    "cap   cap     cap";
  gap: 10px 16px;
  align-items: start;
}
.pcl-photofield { grid-area: photo; margin: 0; position: relative; }
.pcl-playergrid .pcl-field[data-field="fullName"] { grid-area: name; }
.pcl-playergrid .pcl-field[data-field="playerDesig"] { grid-area: desig; }
.pcl-playergrid .pcl-field[data-field="reportingManager"] { grid-area: manager; }
.pcl-desig-hint { font-size: 12.5px; margin: 5px 2px 0; }
.pcl-photo-tile {
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--pcl-input-bg);
  border: 3px dashed var(--pcl-line);
  border-radius: 50%;
  overflow: hidden;
  color: var(--pcl-muted);
  cursor: pointer;
  transition: border-color 0.1s steps(2), box-shadow 0.1s steps(2),
              color 0.1s steps(2);
}
.pcl-photo-tile .pcl-folder-ico { width: 26px; height: 21px; }
.pcl-photo-tile:hover {
  border-color: var(--pcl-primary);
  color: var(--pcl-text);
  box-shadow: 0 0 12px var(--pcl-glow-soft);
}
.pcl-photo-tile:focus-visible { outline: 2px solid var(--pcl-cyan); outline-offset: 2px; }
.pcl-photo-tile.is-set {
  border-style: solid;
  border-color: var(--pcl-primary);
  box-shadow: 3px 3px 0 var(--pcl-hard), 0 0 10px var(--pcl-glow-soft);
}
.pcl-field.is-error .pcl-photo-tile {
  border-color: var(--pcl-error);
  color: var(--pcl-error);
  box-shadow: 3px 3px 0 var(--pcl-error-soft);
}
.pcl-photothumb {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 50%;
  background: var(--pcl-input-bg);
  flex: 0 0 auto;
}
.pcl-photothumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pcl-photo-caption {
  grid-area: cap;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0;
}
.pcl-photo-alt {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--pcl-muted);
  margin: 0;
}
.pcl-photostate {
  font-family: var(--pcl-font-title);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--pcl-cyan);
}
html[data-pcl-theme="light"] .pcl-photostate { color: #0b7fa8; }

/* ---- Admin-verified tick + identity fades ----------------------------------
   The tick is an inline SVG (orange disc, white hand-drawn-style tick) that
   the form, the Control Room and the leaderboard all share. ONLY verified
   players get it — unverified means NOTHING shows. The fade classes are
   applied by the identity gate when a borrowed browser's fields stop
   matching who the photo/designation belong to. */
.pcl-vbadge-slot {
  position: absolute;
  right: -5px;
  bottom: -3px;
  display: block;
  line-height: 0;
  z-index: 2;
}
.pcl-vbadge-slot[hidden] { display: none; }
.pcl-vbadge-slot .pcl-vbadge {
  position: static;
  width: 30px;
  height: 30px;
  display: block;
  filter: drop-shadow(2px 2px 0 var(--pcl-hard));
}
.pcl-vbadge--sm {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: -3px;
  filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.3));
}
.pcl-photo-tile.is-fading,
.pcl-input.is-fading {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.24s steps(4), transform 0.24s steps(4);
}

/* Windows-open-folder glyph — the shared upload icon (photo tile + SHOT wells) */
.pcl-px-folder { display: block; line-height: 0; flex: 0 0 auto; }
.pcl-folder-ico { width: 34px; height: 28px; display: block; }
.pcl-shotbtn .pcl-folder-ico,
.pcl-vshot .pcl-folder-ico { width: 22px; height: 18px; }

/* ---- Photo cropper — square stage, drag/zoom, JPEG out ---------------------- */
.pcl-crop-card {
  position: relative;
  width: min(92vw, 400px);
  max-height: 92vh;
  overflow: auto;
  background: var(--pcl-surface);
  border: 3px solid var(--pcl-panel-border);
  box-shadow: 8px 8px 0 var(--pcl-hard);
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pcl-crop-stage {
  width: min(78vw, 328px);
  height: min(78vw, 328px);
  margin: 0 auto;
  border: 3px solid var(--pcl-input-border);
  box-shadow: inset 0 0 0 2px var(--pcl-surface), 4px 4px 0 var(--pcl-hard);
  background: repeating-conic-gradient(
    var(--pcl-surface-2) 0% 25%, var(--pcl-surface-3) 0% 50%) 0 0 / 24px 24px;
  overflow: hidden;
  touch-action: none;      /* pointer events own every gesture */
  cursor: grab;
}
.pcl-crop-stage.is-dragging { cursor: grabbing; }
.pcl-crop-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.pcl-crop-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}
.pcl-crop-zoom {
  flex: 1 1 auto;
  height: 22px;
  accent-color: var(--pcl-primary);
  cursor: pointer;
}
.pcl-crop-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ---- Collab: circular group button + inline popover ------------------------
   The old COLLAB pill became a small round people icon (community-style);
   it sits IN the post row, right of the screenshot square. Tapping it opens
   the partner field as a popover anchored to the circle, opening leftward. */
.pcl-collabrow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px 10px;
}
.pcl-collab-btn {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pcl-muted);
  background: var(--pcl-surface-2);
  border: 2px dashed var(--pcl-line);
  cursor: pointer;
  flex: 0 0 auto;
  transition: transform 0.06s steps(2), border-color 0.1s steps(2),
              color 0.1s steps(2);
}
.pcl-collab-btn svg { width: 22px; height: 22px; display: block; }
.pcl-collab-btn:hover {
  transform: translate(-1px, -1px);
  border-color: var(--pcl-secondary);
  color: var(--pcl-secondary);
}
.pcl-collab-btn.is-on {
  color: #fff;
  background: linear-gradient(180deg, var(--pcl-secondary), #1a2f9e);
  border: 2px solid #14235f;
  box-shadow: 2px 2px 0 var(--pcl-hard), 0 0 10px rgba(77, 116, 255, 0.4);
}
.pcl-collab-btn:focus-visible { outline: 2px solid var(--pcl-cyan); outline-offset: 2px; }
.pcl-collab-half {
  position: absolute;
  right: -5px;
  top: -5px;
  font-family: var(--pcl-font-title);
  font-weight: 700;
  font-size: 8px;
  line-height: 1;
  color: #14235f;
  background: var(--pcl-gold);
  border: 2px solid #14235f;
  padding: 2px 3px 1px;
}
html[data-pcl-theme="dark"] .pcl-collab-half { color: #02020d; border-color: #02020d; }
.pcl-collabpop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 65;
  width: min(320px, 86vw);
  background: var(--pcl-surface);
  border: 3px solid var(--pcl-input-border);
  box-shadow: 4px 4px 0 var(--pcl-hard), 0 0 16px var(--pcl-glow-soft);
  padding: 11px 13px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pcl-collab-title {
  font-family: var(--pcl-font-title);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--pcl-secondary);
}
.pcl-collabpop .pcl-collab-input { max-width: none; width: 100%; }
.pcl-collab-hint {
  flex: 1 0 100%;
  font-size: 12px;
  line-height: 1.5;
  color: var(--pcl-muted);
  margin: 0;
}
.pcl-collabrow .pcl-err { margin: 0; }
/* the ✓ SET tick once a partner name sits in the field (Enter = confirm) */
.pcl-collab-set {
  color: #1d9e57;
  margin-left: 8px;
  letter-spacing: 0.6px;
}
/* ---- link-ownership banners (checklink verdicts) --------------------------
   A full-width lane inside the post row: red when the link is already
   uploaded by another player, green when it was collabed with you and
   waits for the one-tap confirm. */
.pcl-owned {
  grid-column: 1 / -1;              /* spans the 5-col edit grid */
  flex-basis: 100%;                 /* wraps the flex view row */
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 11px;
  margin-top: 2px;
  border: 2px solid var(--pcl-line);
  background: var(--pcl-surface-3, var(--pcl-surface));
}
.pcl-owned.is-taken {
  border-color: var(--pcl-error);
  background: var(--pcl-error-soft, rgba(216, 27, 78, 0.08));
}
.pcl-owned.is-collab {
  border-color: #1d9e57;
  background: rgba(29, 158, 87, 0.09);
}
.pcl-owned-txt {
  flex: 1 1 220px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--pcl-text);
}
.pcl-owned.is-taken .pcl-owned-txt { color: var(--pcl-error); }
.pcl-owned-btn {
  font-family: var(--pcl-font-title);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  color: #fff;
  background: #1d9e57;
  border: 2px solid transparent;
  padding: 7px 14px 6px;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--pcl-hard);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.pcl-owned-btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--pcl-hard); }
.pcl-owned-btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--pcl-hard); }
/* view-mode collab tag (kept from the pill, now just a label) */
.pcl-collab-toggle {
  font-family: var(--pcl-font-title);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.8px;
  color: var(--pcl-text);
  background: var(--pcl-surface-3);
  border: 2px solid var(--pcl-line);
  padding: 4px 9px 3px;
}

/* ---- Weekly challenge row: select + info button ------------------------------ */
.pcl-weekrow {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.pcl-weekrow .pcl-selectwrap { flex: 1 1 auto; min-width: 0; }
.pcl-infobtn {
  flex: 0 0 auto;
  width: 44px;
  font-family: var(--pcl-font-display);
  font-size: 13px;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
  background: linear-gradient(180deg, var(--pcl-secondary), #1a2f9e);
  border: 3px solid #14235f;
  box-shadow: 3px 3px 0 var(--pcl-hard);
  cursor: pointer;
  transition: transform 0.06s steps(2), box-shadow 0.06s steps(2);
}
html[data-pcl-theme="dark"] .pcl-infobtn {
  border-color: #33409f;
}
.pcl-infobtn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--pcl-hard), 0 0 12px rgba(77, 116, 255, 0.45);
}
.pcl-infobtn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--pcl-hard);
}
.pcl-infobtn:focus-visible { outline: 2px solid var(--pcl-cyan); outline-offset: 2px; }

/* ---- Platform brand badges: logo + word as one readable item -----------------
   The word takes the platform's brand colour (IG gradient / YT red / LI blue). */
.pcl-fmtbrand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  font-family: var(--pcl-font-title);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.6px;
  white-space: nowrap;
  padding: 3px 7px 2px;
  border: 2px solid var(--pcl-line-soft);
  background: var(--pcl-surface-2);
}
.pcl-fmtbrand b { color: var(--pcl-primary-hi); font-weight: 700; }
.pcl-fmtlogo {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  display: block;
}
[data-fmt="ig_reel"] .pcl-fmtword,
[data-fmt="ig_post"] .pcl-fmtword {
  color: #d62976;
}
[data-fmt="yt_shorts"] .pcl-fmtword,
[data-fmt="yt_long"] .pcl-fmtword {
  color: #e60000;
}
[data-fmt="li_post"] .pcl-fmtword {
  color: #0a66c2;
}
html[data-pcl-theme="dark"] [data-fmt="ig_reel"] .pcl-fmtword,
html[data-pcl-theme="dark"] [data-fmt="ig_post"] .pcl-fmtword { color: #ff5c9d; }
html[data-pcl-theme="dark"] [data-fmt="yt_shorts"] .pcl-fmtword,
html[data-pcl-theme="dark"] [data-fmt="yt_long"] .pcl-fmtword { color: #ff4d4d; }
html[data-pcl-theme="dark"] [data-fmt="li_post"] .pcl-fmtword { color: #4a9fe8; }
/* IG word rides the actual Instagram gradient where background-clip works */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  [data-fmt="ig_reel"] .pcl-fmtword,
  [data-fmt="ig_post"] .pcl-fmtword {
    background: linear-gradient(45deg, #fa7e1e, #d62976, #962fbf);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #d62976; /* fallback if clipping fails silently */
  }
  html[data-pcl-theme="dark"] [data-fmt="ig_reel"] .pcl-fmtword,
  html[data-pcl-theme="dark"] [data-fmt="ig_post"] .pcl-fmtword {
    background: linear-gradient(45deg, #ffd08a, #ff5c9d, #b18cff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #ff5c9d;
  }
}
/* chip variant: logo + word inside the navy link chip */
.pcl-chip-brand {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pcl-chip-brand .pcl-fmtlogo { width: 12px; height: 12px; }
.pcl-chip-brand .pcl-fmtword {
  font-size: 10.5px;
}

/* ---- Generic themed modal (weekly challenge info + rulebook) ------------------ */
.pcl-modal {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.pcl-modal[hidden] { display: none; }
.pcl-modal-card {
  position: relative;
  width: min(760px, 96vw);
  max-height: 88vh;
  background: var(--pcl-surface);
  border: 3px solid var(--pcl-panel-border);
  box-shadow: 8px 8px 0 var(--pcl-hard), 0 0 34px rgba(237, 59, 0, 0.25);
  padding: 20px 22px;
  overflow-y: auto;
}
.pcl-modal-body { min-width: 0; }
.pcl-modal-title {
  font-family: var(--pcl-font-display);
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 1px;
  color: var(--pcl-primary-hi);
  text-shadow: 2px 2px 0 var(--pcl-hard), 0 0 14px var(--pcl-glow);
  margin: 0 0 4px;
}
.pcl-modal-sub {
  font-family: var(--pcl-font-title);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--pcl-muted);
  margin: 0 0 14px;
}
.pcl-rb-h {
  display: inline-block;
  font-family: var(--pcl-font-title);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(90deg, var(--pcl-primary), var(--pcl-primary-hi));
  box-shadow: 3px 3px 0 var(--pcl-hard);
  padding: 5px 11px 4px;
  margin: 20px 0 10px;
}
.pcl-rb-p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--pcl-text);
  margin: 0 0 10px;
}
.pcl-rb-ul {
  margin: 0 0 10px;
  padding-left: 22px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--pcl-text);
}
.pcl-rb-ul li { margin-bottom: 6px; }
.pcl-rb-note {
  font-size: 16.5px;
  color: var(--pcl-muted);
  border-left: 4px solid var(--pcl-primary);
  padding: 4px 0 4px 12px;
  margin: 0 0 12px;
}
.pcl-rb-table {
  width: 100%;
  border-collapse: collapse;
  margin: 4px 0 14px;
  font-size: 15.5px;
}
.pcl-rb-table th {
  font-family: var(--pcl-font-title);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  background: var(--pcl-secondary);
  padding: 8px 10px;
  text-align: left;
  border: 2px solid var(--pcl-panel-border);
}
.pcl-rb-table td {
  border: 2px solid var(--pcl-line);
  padding: 8px 10px;
  vertical-align: top;
  color: var(--pcl-text);
  background: var(--pcl-surface-2);
}
.pcl-rb-table tr:nth-child(even) td { background: var(--pcl-surface-3); }
.pcl-rb-table .num { text-align: right; white-space: nowrap; }
.pcl-rb-formula {
  font-family: var(--pcl-font-title);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.6px;
  color: var(--pcl-primary-hi);
  background: var(--pcl-surface-3);
  border: 2px dashed var(--pcl-line);
  padding: 9px 12px;
  margin: 0 0 12px;
  text-align: center;
}
/* week cards inside the info modal — extra breathing room between the bars */
.pcl-wkcard {
  border: 2px solid var(--pcl-line);
  background: var(--pcl-surface-2);
  box-shadow: 3px 3px 0 var(--pcl-inset);
  padding: 12px 14px;
  margin: 0 0 18px;
}
.pcl-wkcard.is-live {
  border-color: var(--pcl-primary);
  box-shadow: 3px 3px 0 var(--pcl-hard), 0 0 14px var(--pcl-glow-soft);
  background: var(--pcl-surface-3);
}
.pcl-wk-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin: 0 0 6px;
}
.pcl-wk-name {
  font-family: var(--pcl-font-title);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.6px;
  color: var(--pcl-text);
}
.pcl-wk-tag {
  font-family: var(--pcl-font-title);
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1.2px;
  color: #fff;
  background: var(--pcl-primary);
  padding: 3px 7px 2px;
  animation: pclBlink 1.4s steps(1) infinite;
}
.pcl-wk-tag--past { background: var(--pcl-muted); animation: none; }
.pcl-wk-date {
  font-family: var(--pcl-font-title);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--pcl-muted);
  margin-left: auto;
  white-space: nowrap;
}
.pcl-wk-crit { font-size: 16.5px; line-height: 1.55; color: var(--pcl-text); margin: 0 0 6px; }
.pcl-wk-pts {
  font-family: var(--pcl-font-title);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.8px;
  color: var(--pcl-gold);
  text-transform: uppercase;
  margin: 0;
}
html[data-pcl-theme="light"] .pcl-wk-pts { color: #a06e00; }

/* ---- Mobile additions ---------------------------------------------------------- */
@media (max-width: 620px) {
  .pcl-toggle--font { width: 42px; height: 42px; }
  .pcl-font-glyph { font-size: 11px; }
  .pcl-board-links { gap: 3px 12px; }
  .pcl-board-link { font-size: 9.5px; }
  .pcl-weekrow { gap: 8px; }
  .pcl-infobtn { width: 42px; }
  .pcl-photo-tile { width: 96px; height: 96px; }
  .pcl-photo-tile .pcl-folder-ico { width: 30px; height: 25px; }
  .pcl-vbadge-slot { right: -2px; bottom: -2px; }
  .pcl-vbadge-slot .pcl-vbadge { width: 32px; height: 32px; }

  /* photo avatar moves ABOVE the name fields, centred horizontally; the
     READY/alt caption line centres too (placed late in the file so it wins
     over the base .pcl-playergrid) */
  .pcl-playergrid {
    grid-template-columns: 1fr;
    justify-items: center;
    grid-template-areas:
      "photo"
      "desig"
      "name"
      "manager"
      "cap";
  }
  .pcl-photofield { justify-self: center; }
  .pcl-photo-caption { justify-content: center; text-align: center; }
  .pcl-playergrid .pcl-field[data-field="fullName"],
  .pcl-playergrid .pcl-field[data-field="playerDesig"],
  .pcl-playergrid .pcl-field[data-field="reportingManager"] { justify-self: stretch; }
  .pcl-collabpop { left: auto; right: 0; }

  .pcl-modal-card { padding: 16px 14px; }
  .pcl-rb-table { font-size: 14px; }
  .pcl-rb-table th { font-size: 9.5px; padding: 6px 7px; }
  .pcl-rb-table td { padding: 6px 7px; }
  .pcl-wk-date { margin-left: 0; flex-basis: 100%; }
}

/* very narrow cabinets: the brand takes the first row, toggles sit beside
   it, the link stack drops to its own full-width row below */
@media (max-width: 520px) {
  .pcl-header { flex-wrap: wrap; row-gap: 10px; }
  .pcl-header-brand { flex: 1 1 auto; align-items: flex-start; }
  .pcl-board-links { order: 3; flex: 1 1 100%; flex-direction: row;
                     justify-content: center; gap: 18px; }
  .pcl-board-link { font-size: 9.5px; }
}

/* ============================================================================
   SF PRO READABILITY PASS (default mode only)
   ----------------------------------------------------------------------------
   The pixel faces were designed at 7.5-13px with wide letter-spacing; the
   sans needs slightly larger sizes and near-normal tracking to carry the
   same hierarchy without turning into grey dust. Every rule here is
   guarded with html:not([data-pcl-font="og"]) so flipping the Aa toggle to
   the OG arcade faces restores the original pixel-tuned values from the
   base rules above — one switch, two complete looks, zero duplication.
   ========================================================================== */
html:not([data-pcl-font="og"]) .pcl-season { font-size: 12px; letter-spacing: 1px; }
html:not([data-pcl-font="og"]) .pcl-header-text .pcl-kicker { font-size: 13px; letter-spacing: 1.1px; }
html:not([data-pcl-font="og"]) .pcl-header-text .pcl-insert { font-size: 13.5px; letter-spacing: 0.3px; }
html:not([data-pcl-font="og"]) .pcl-board-link { font-size: 12.5px; letter-spacing: 0.4px; }
html:not([data-pcl-font="og"]) .pcl-footer { font-size: 13px; letter-spacing: 0.5px; }

html:not([data-pcl-font="og"]) .pcl-panel-title { font-size: 15px; letter-spacing: 0.4px; }
html:not([data-pcl-font="og"]) .pcl-opt { font-size: 11px; letter-spacing: 0.5px; }
html:not([data-pcl-font="og"]) .pcl-label { font-size: 13.5px; letter-spacing: 0.3px; }
html:not([data-pcl-font="og"]) .pcl-err { font-size: 12.5px; letter-spacing: 0.2px; }
html:not([data-pcl-font="og"]) .pcl-hint { letter-spacing: 0; }

html:not([data-pcl-font="og"]) .pcl-chip { font-size: 13px; letter-spacing: 0.2px; }
html:not([data-pcl-font="og"]) .pcl-count { font-size: 12.5px; letter-spacing: 0.4px; }
html:not([data-pcl-font="og"]) .pcl-vbtn { font-size: 12px; letter-spacing: 0.4px; }
html:not([data-pcl-font="og"]) .pcl-fmt,
html:not([data-pcl-font="og"]) .pcl-fmtbrand { font-size: 12px; letter-spacing: 0.2px; }
html:not([data-pcl-font="og"]) .pcl-addbtn { font-size: 12px; letter-spacing: 0.4px; }
html:not([data-pcl-font="og"]) .pcl-post-num { font-size: 13.5px; }
html:not([data-pcl-font="og"]) .pcl-vnum { font-size: 12.5px; }
html:not([data-pcl-font="og"]) .pcl-vshot { font-size: 12px; letter-spacing: 0.3px; }
html:not([data-pcl-font="og"]) .pcl-collab-title { font-size: 12px; letter-spacing: 0.3px; }
html:not([data-pcl-font="og"]) .pcl-collab-half { font-size: 10.5px; }
html:not([data-pcl-font="og"]) .pcl-collab-toggle { font-size: 12px; letter-spacing: 0.3px; }
html:not([data-pcl-font="og"]) .pcl-photostate { font-size: 12px; letter-spacing: 0.4px; }
html:not([data-pcl-font="og"]) .pcl-savestate { font-size: 12.5px; letter-spacing: 0.3px; }

html:not([data-pcl-font="og"]) .pcl-btn--primary { font-size: 14.5px; letter-spacing: 0.5px; }
html:not([data-pcl-font="og"]) .pcl-lb-nav { font-size: 12px; letter-spacing: 0.3px; }
html:not([data-pcl-font="og"]) .pcl-done h3 { font-size: 24px; letter-spacing: 0.5px; }
html:not([data-pcl-font="og"]) .pcl-done-sub { font-size: 15px; letter-spacing: 1px; }
html:not([data-pcl-font="og"]) .pcl-done-xp { font-size: 14.5px; }
html:not([data-pcl-font="og"]) .pcl-modal-title { font-size: 17px; letter-spacing: 0.3px; }
html:not([data-pcl-font="og"]) .pcl-modal-sub { font-size: 13px; letter-spacing: 0.6px; }
html:not([data-pcl-font="og"]) .pcl-rb-h { font-size: 13.5px; letter-spacing: 0.4px; }
html:not([data-pcl-font="og"]) .pcl-rb-table th { font-size: 12px; letter-spacing: 0.3px; }
html:not([data-pcl-font="og"]) .pcl-rb-formula { font-size: 13.5px; letter-spacing: 0.2px; }
html:not([data-pcl-font="og"]) .pcl-wk-name { font-size: 14px; letter-spacing: 0.2px; }
html:not([data-pcl-font="og"]) .pcl-wk-tag { font-size: 11px; letter-spacing: 0.5px; }
html:not([data-pcl-font="og"]) .pcl-wk-date { font-size: 12px; letter-spacing: 0.3px; }
html:not([data-pcl-font="og"]) .pcl-wk-pts { font-size: 12px; letter-spacing: 0.3px; }

@media (max-width: 620px) {
  html:not([data-pcl-font="og"]) .pcl-season { font-size: 11px; letter-spacing: 0.8px; }
  html:not([data-pcl-font="og"]) .pcl-header-text .pcl-kicker { font-size: 12px; letter-spacing: 0.7px; }
  html:not([data-pcl-font="og"]) .pcl-header-text .pcl-insert { font-size: 12.5px; }
  html:not([data-pcl-font="og"]) .pcl-panel-title { font-size: 14px; }
  html:not([data-pcl-font="og"]) .pcl-footer { font-size: 12px; letter-spacing: 0.4px; }
  html:not([data-pcl-font="og"]) .pcl-board-link { font-size: 11.5px; }
}

/* ============================================================================
   PICTURE EXPAND CHIP + SINGLE LIGHTBOX MODE (Season 2 round 3)
   Every picture is expandable: the shot square keeps replace-on-click, the
   corner magnifier zooms. Same chip works on the round pfp tile.
   ========================================================================== */
.pcl-cell--shot { position: relative; }
.pcl-expand {
  position: absolute; right: -7px; top: -7px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  padding: 0; cursor: zoom-in; z-index: 3;
  color: var(--pcl-text); background: var(--pcl-surface);
  border: 2px solid var(--pcl-line);
  box-shadow: 2px 2px 0 var(--pcl-hard);
  transition: border-color .12s steps(2), color .12s steps(2),
              box-shadow .12s steps(2);
}
.pcl-expand:hover {
  border-color: var(--pcl-primary); color: var(--pcl-primary);
  box-shadow: 2px 2px 0 var(--pcl-hard), 0 0 10px var(--pcl-glow-soft);
}
.pcl-expand:focus-visible { outline: 2px solid var(--pcl-cyan); outline-offset: 2px; }
.pcl-expand svg { width: 13px; height: 13px; display: block; }
.pcl-expand[hidden] { display: none; }
/* the pfp tile sits in a 84-96px field — pull the chip onto the circle edge */
.pcl-photofield .pcl-expand { right: 2px; top: -2px; }
/* single-image mode: hide strip + arrows, nothing to step through.
   Single mode IS the pfp zoom — the pfp stays round at every size. */
.pcl-lightbox.is-single .pcl-lb-strip,
.pcl-lightbox.is-single .pcl-lb-nav { display: none; }
.pcl-lightbox.is-single .pcl-lb-stage { align-items: center; }
.pcl-lightbox.is-single .pcl-lb-img {
  width: min(420px, 78vw);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 50%;
}

/* ============================================================================
   ROUND 21 ADDITIONS — name capsule, 50:50 content-type toggle
   ============================================================================ */

/* ---- Desg. capsule inside the Full name field ----------------------------
   .pcl-namewrap looks exactly like a .pcl-input; inside, the designation
   renders as a smart-shortened capsule (Jr. VE, Exec. GFX…) BEFORE the
   borderless real input. Hovering the capsule shows the full title. */
.pcl-namewrap {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 44px;
  padding: 4px 8px;
  background: var(--pcl-input-bg, var(--pcl-surface));
  border: 3px solid var(--pcl-line-soft);
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.06);
  cursor: text;
}
.pcl-namewrap.has-capsule { border-color: var(--pcl-primary); }
.pcl-namewrap .pcl-nameinput {
  flex: 1;
  min-width: 0;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 4px 2px;
  height: auto;
}
.pcl-namewrap .pcl-nameinput:focus { outline: none; }
.pcl-desig-capsule {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  max-width: 46%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--pcl-font-title);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.4px;
  line-height: 1;
  color: #fff;
  background: linear-gradient(180deg, var(--pcl-primary-hi), var(--pcl-primary));
  border: 2px solid var(--pcl-primary-deep);
  box-shadow: 2px 2px 0 var(--pcl-hard);
  padding: 4px 7px 3px;
  cursor: help;
}
.pcl-field.is-error .pcl-namewrap { border-color: var(--pcl-error, #d81b4e); }
html[data-pcl-font="og"] .pcl-desig-capsule { font-size: 8px; }

/* ---- PRAPER / PERSONAL toggle (rulebook §6 — 50:50 balance) -------------- */
.pcl-cttoggle {
  display: inline-flex;
  align-items: stretch;
  flex: 0 0 auto;
  border: 2px solid var(--pcl-line-soft);
  background: var(--pcl-surface-3);
}
.pcl-ct {
  font-family: var(--pcl-font-title);
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: 0.7px;
  color: var(--pcl-muted);
  background: transparent;
  border: none;
  padding: 4px 7px 3px;
  cursor: pointer;
  line-height: 1;
}
.pcl-ct + .pcl-ct { border-left: 2px solid var(--pcl-line-soft); }
.pcl-ct:hover { color: var(--pcl-text); }
.pcl-ct.is-on { color: #fff; }
.pcl-ct--praper.is-on { background: var(--pcl-primary); text-shadow: 1px 1px 0 rgba(0,0,0,0.4); }
.pcl-ct--personal.is-on { background: #33409f; text-shadow: 1px 1px 0 rgba(0,0,0,0.4); }
.pcl-cttag {
  display: inline-block;
  font-family: var(--pcl-font-title);
  font-weight: 700;
  font-size: 8.5px;
  letter-spacing: 0.7px;
  line-height: 1;
  color: #fff;
  background: var(--pcl-primary);
  padding: 3px 6px 2px;
  border: 2px solid var(--pcl-primary-deep);
  flex: 0 0 auto;
}
.pcl-cttag.is-personal { background: #33409f; border-color: #232c6e; }
html[data-pcl-font="og"] .pcl-ct,
html[data-pcl-font="og"] .pcl-cttag { font-size: 7px; }

/* SF readability for the new pieces */
html:not([data-pcl-font="og"]) .pcl-desig-capsule { font-weight: 600; letter-spacing: 0.2px; }
html:not([data-pcl-font="og"]) .pcl-ct { font-weight: 600; }

/* ---------- identity guard hint (form) + sanity lamp (post rows) ---------- */
.pcl-namehint {
  font-size: 14px; line-height: 1.5; color: #8a5200;
  background: #fff4e0; border: 2px dashed #e0a23c; border-radius: 10px;
  padding: 9px 12px; margin: -2px 0 12px;
}
.pcl-namehint b { color: var(--pcl-primary, #1a1b20); }
.pcl-namehint-btn {
  margin-left: 8px; padding: 5px 10px; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 700;
  border: 2px solid var(--pcl-primary, #1a1b20); border-radius: 7px;
  background: var(--pcl-primary, #1a1b20); color: #fffdf6;
  box-shadow: 2px 2px 0 rgba(26,27,32,.25);
}
.pcl-namehint-btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 rgba(26,27,32,.25); }
.pcl-highnote {
  display: block; margin-top: 4px;
  font-size: 12px; font-weight: 700; letter-spacing: .2px; color: #8a5200;
}
html[data-pcl-theme="dark"] .pcl-namehint {
  color: #ffd9a0; background: #2a2115; border-color: #b57f2e;
}
html[data-pcl-theme="dark"] .pcl-highnote { color: #ffd9a0; }

/* ============================================================================
   EMPLOYEE SIGN-IN (Google) — section 0 card on the form. Invisible until a
   Google OAuth Client ID is configured in js/gas-endpoint.js.
   ========================================================================== */
.pcl-grow {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.pcl-gbtnwrap { min-height: 44px; }
.pcl-gstate {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--pcl-surface-2);
  border: 2px solid var(--pcl-line);
  box-shadow: 3px 3px 0 var(--pcl-inset);
  padding: 8px 12px;
  max-width: 100%;
}
.pcl-gcheck {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: #1d9e57;
  color: #fff;
  font-size: 12px; font-weight: 700;
}
.pcl-gid {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pcl-text);
  overflow-wrap: anywhere;
}
.pcl-gout {
  flex: 0 0 auto;
  font-family: var(--pcl-font-title);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--pcl-text);
  background: var(--pcl-input-bg);
  border: 2px solid var(--pcl-hard);
  box-shadow: 2px 2px 0 var(--pcl-hard);
  padding: 5px 9px;
  cursor: pointer;
}
.pcl-gout:active { transform: translate(2px, 2px); box-shadow: none; }
.pcl-gerr { color: var(--pcl-error); font-size: 12.5px; min-height: 1em; margin: 0; }