/* ---------- Top Monthly Performers poster (hidden template captured via
   html2canvas) — split out from index.html's main <style> block for easier
   editing, and so future theming doesn't mean scrolling through unrelated
   app CSS. Deliberately a standalone .posterep-* namespace rather than
   reusing .pngrep-* (the daily net-log share image): same brand language
   (gradient corner blobs, tower icon, footer), but kept independent so
   edits to one card don't reflow the other. Portrait (not landscape like
   .pngrep-report) since it's meant for WhatsApp/Instagram-style sharing.
   Height is intentionally NOT fixed — only min-height — because the
   "everyone else" list below the podium can be any length depending on how
   many distinct operators checked in that month.

   Theme variables: only colors that are either reused more than once, or
   are the poster's dominant brand-identity accents (border, corner blobs,
   the three gradients), are pulled into :root custom properties below —
   single-use secondary colors (medal metal tones, stat-card green/purple,
   muted text grays) stay literal, since turning every color into a
   variable for a theme system that doesn't exist yet would just be
   indirection with no payoff. index.html sets a data-theme attribute on
   #posterReportCard (via reportThemes.monthly, Settings → Report Themes)
   before html2canvas captures it; add a new theme with a block like:
     .posterep-poster[data-theme="example"]{ --poster-primary:#0a7d3a; ... } */
:root{
  --poster-border:#20b8cf;
  --poster-blob-a1:#18c4ce; --poster-blob-a2:#7de1df;
  --poster-blob-b1:#ffca46; --poster-blob-b2:#f7a623;
  --poster-gold:#f2b544;
  --poster-heading:#102448;
  --poster-primary:#147ed5;
  --poster-blue:#187bd5;
  --poster-month-gradient: linear-gradient(90deg,#0f96a1,#1067c4,#5c34b8);
  --poster-list-head-gradient: linear-gradient(90deg,#7653d4,#167fdc);
  --poster-bottom-gradient: linear-gradient(90deg,#18b9c8,#1887e4,#7a55d8,#f5a623);
}
/* Onam theme — marigold gold + banana-leaf green + a maroon accent,
   standing in for the default teal/blue/purple brand palette. Same
   palette as daily-report.css's Onam theme, so a shared festival look is
   available across both report types even though each is selected
   independently. */
.posterep-poster[data-theme="onam"]{
  --poster-border:#d69e2e;
  --poster-blob-a1:#2f9e5c; --poster-blob-a2:#94e3b0;
  --poster-blob-b1:#ffcf5c; --poster-blob-b2:#e8a325;
  --poster-heading:#3b2408;
  --poster-primary:#0f7a3d;
  --poster-blue:#9a3412;
  --poster-month-gradient: linear-gradient(90deg,#0f7a3d,#d69e2e,#8a3b12);
  --poster-list-head-gradient: linear-gradient(90deg,#0f7a3d,#d69e2e);
  --poster-bottom-gradient: linear-gradient(90deg,#e8a325,#0f7a3d,#8a3b12,#ffcf5c);
}
/* Christmas theme — holly red + pine green + a gold accent. Same palette
   as daily-report.css's Christmas theme, so a shared festival look is
   available across both report types even though each is selected
   independently. */
.posterep-poster[data-theme="christmas"]{
  --poster-border:#b91c2c;
  --poster-blob-a1:#0f5c38; --poster-blob-a2:#6fcf97;
  --poster-blob-b1:#e0483e; --poster-blob-b2:#a4211b;
  --poster-heading:#0c2e1c;
  --poster-primary:#c0392b;
  --poster-blue:#b8860b;
  --poster-month-gradient: linear-gradient(90deg,#0f5c38,#c0392b,#b8860b);
  --poster-list-head-gradient: linear-gradient(90deg,#c0392b,#0f5c38);
  --poster-bottom-gradient: linear-gradient(90deg,#c0392b,#0f5c38,#b8860b,#e0483e);
}
/* Night Sky theme — cyan/sky-blue glow + an amber beacon accent, taken
   from the antenna icon's own palette. Same palette as daily-report.css's
   Night Sky theme. Unlike Onam/Christmas, this theme also swaps the tower
   icon itself (see .posterep-tower-nightsky below) — the antenna graphic
   doesn't just recolor via currentColor like the default icon, it has its
   own baked-in colors, so both icons stay in the template and CSS toggles
   which one is visible. */
.posterep-poster[data-theme="nightsky"]{
  --poster-border:#0284c7;
  --poster-blob-a1:#00f0ff; --poster-blob-a2:#7dfbff;
  --poster-blob-b1:#fbbf24; --poster-blob-b2:#f59e0b;
  --poster-heading:#0b2540;
  --poster-primary:#0284c7;
  --poster-blue:#d97706;
  --poster-month-gradient: linear-gradient(90deg,#0284c7,#38bdf8,#fbbf24);
  --poster-list-head-gradient: linear-gradient(90deg,#0284c7,#00f0ff);
  --poster-bottom-gradient: linear-gradient(90deg,#0284c7,#00f0ff,#fbbf24,#38bdf8);
}
.posterep-poster{
  width:540px; position:relative; overflow:hidden;
  background:#fff; border:5px solid var(--poster-border); border-radius:22px;
  display:flex; flex-direction:column;
}
.posterep-poster:before, .posterep-poster:after{ content:''; position:absolute; z-index:0; pointer-events:none; }
.posterep-poster:before{ width:460px;height:460px;left:-200px;top:-200px;border-radius:50%; background:radial-gradient(circle at 70% 70%,var(--poster-blob-a1) 0,var(--poster-blob-a2) 45%,transparent 72%); opacity:.7; }
.posterep-poster:after{ width:470px;height:470px;right:-210px;bottom:-230px;border-radius:50%; background:radial-gradient(circle at 30% 30%,var(--poster-blob-b1) 0,var(--poster-blob-b2) 45%,transparent 72%); opacity:.72; }
.posterep-content{ position:relative; z-index:2; flex:1 1 auto; display:flex; flex-direction:column; width:100%; padding:26px 36px 20px; font-family:Arial,Helvetica,sans-serif; color:var(--poster-heading); }
/* Faint concentric signal-wave rings behind the header, echoing the tower
   icon's radio theme — low opacity so it stays a watermark, not a
   distraction from the title text sitting on top of it. Built from plain
   bordered circles rather than a repeating-radial-gradient: html2canvas
   doesn't reliably render CSS repeating gradients, but a border+border-
   radius circle is one of its most solidly-supported primitives. */
.posterep-header{ position:relative; overflow:hidden; text-align:center; padding-bottom:8px; }
.posterep-header-rings{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.posterep-ring{ position:absolute; left:50%; top:0; border:2px solid rgba(7,138,200,0.09); border-radius:50%; transform:translate(-50%,-50%); }
.posterep-ring.r1{ width:160px; height:160px; }
.posterep-ring.r2{ width:260px; height:260px; }
.posterep-ring.r3{ width:360px; height:360px; }
.posterep-ring.r4{ width:460px; height:460px; }
.posterep-header-stars{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:6px; padding-top:4px; color:var(--poster-gold); }
.posterep-header-stars svg{ width:15px; height:15px; flex:none; }
.posterep-title-row{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:14px; margin-top:6px; }
.posterep-tower{ width:64px; height:64px; flex:none; color:#078ac8; }
.posterep-tower-nightsky{ display:none; flex:none; }
.posterep-poster[data-theme="nightsky"] .posterep-tower{ display:none; }
.posterep-poster[data-theme="nightsky"] .posterep-tower-nightsky{ display:block; }
.posterep-nettitle{ margin:0; font-size:38px; line-height:1.15; font-weight:900; letter-spacing:.5px; color:var(--poster-heading); }
.posterep-nettitle-accent{ color:#0a5478; }
.posterep-title{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:8px; margin:6px 0 0; font-size:17px; line-height:1.3; font-weight:900; letter-spacing:2px; color:var(--poster-primary); }
.posterep-title-star{ width:14px; height:14px; flex:none; color:var(--poster-gold); }
.posterep-month-row{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:10px; margin-top:10px; }
.posterep-dash{ width:26px; height:2px; flex:none; background:#9fb3c8; border-radius:2px; }
.posterep-month{ display:flex; align-items:center; justify-content:center; width:fit-content; max-width:100%; height:40px; padding:0 20px; border-radius:22px; color:#fff; background:var(--poster-month-gradient); font-size:17px; font-weight:800; letter-spacing:.5px; text-shadow:0 1px 2px rgba(0,0,0,0.55); }
/* Unequal column widths (not heights, to stay html2canvas-safe — no
   vertical-alignment tricks needed) give gold a bit more room than silver/
   bronze, reinforced by the size overrides below. margin-top gives the
   rank badges (positioned absolute, crossing the top border below) room
   to poke above the podium without colliding with the month pill above. */
.posterep-podium{ display:grid; grid-template-columns:0.86fr 1.18fr 0.86fr; align-items:center; gap:14px; margin-top:44px; }
.posterep-medal-card{ position:relative; border-radius:18px; padding:32px 10px 18px; text-align:center; border:1px solid #dce7ed; background:linear-gradient(135deg,#fff,#f8fcfd); }
/* Classic podium reading order — silver, gold, bronze left to right — via
   grid `order` rather than reordering the DOM, so each card's rank number/
   badge still matches the actual leaderboard data regardless of position. */
.posterep-medal-card.gold{ order:2; padding:44px 14px 22px; background:linear-gradient(135deg,#fffbea,#fff2c2); border-color:#f0d27a; box-shadow:0 10px 24px rgba(232,169,22,0.35); }
.posterep-medal-card.silver{ order:1; background:linear-gradient(135deg,#f4f7f9,#dde3e9); border-color:#a8b4bf; }
.posterep-medal-card.bronze{ order:3; background:linear-gradient(135deg,#fff6ef,#f3dcc6); border-color:#e0b98d; }
/* Absolutely positioned so it crosses/overlaps the card's top border
   (award-badge look) instead of sitting fully inside — that's what frees
   up the vertical room used to grow the check-in count below. */
.posterep-medal-badge{ position:absolute; top:-23px; left:50%; transform:translateX(-50%); width:46px; height:46px; margin:0; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:21px; font-weight:900; color:#fff; }
.posterep-medal-card.gold .posterep-medal-badge{ top:-34px; width:68px; height:68px; font-size:30px; background:linear-gradient(135deg,#ffd75e,#e8a916); }
.posterep-medal-card.silver .posterep-medal-badge{ background:linear-gradient(135deg,#e8edf2,#6b7785); }
.posterep-medal-card.bronze .posterep-medal-badge{ background:linear-gradient(135deg,#e2a06a,#b06a34); }
.posterep-medal-cs{ font-size:20px; font-weight:900; color:var(--poster-heading); overflow-wrap:break-word; }
.posterep-medal-card.gold .posterep-medal-cs{ font-size:28px; }
.posterep-medal-count{ margin-top:2px; text-align:center; }
.posterep-medal-count-num{ display:block; font-size:32px; line-height:1.1; font-weight:900; color:var(--poster-primary); }
.posterep-medal-count-label{ display:block; font-size:10px; font-weight:900; letter-spacing:.5px; color:var(--poster-primary); }
.posterep-medal-card.gold .posterep-medal-count{ margin-top:3px; }
.posterep-medal-card.gold .posterep-medal-count-num{ font-size:40px; }
.posterep-medal-card.gold .posterep-medal-count-label{ font-size:12px; }
.posterep-stats-strip{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; margin-top:16px; }
.posterep-stat-card{ border-radius:16px; padding:7px 6px; text-align:center; border:1px solid #dce7ed; background:linear-gradient(135deg,#fbfffb,#f3fbf5); }
.posterep-stat-card.blue{ background:linear-gradient(135deg,#f7fbff,#eaf3fd); }
.posterep-stat-card.purple{ background:linear-gradient(135deg,#faf7ff,#f1eafc); }
/* Icon + number as one visual unit (same color, same rough size) with the
   caption underneath — icon and number share color via currentColor so
   each card only needs its accent color set in one place. */
.posterep-stat-top{ display:flex; align-items:center; justify-content:center; gap:6px; color:#13a046; }
.posterep-stat-card.blue .posterep-stat-top{ color:var(--poster-blue); }
.posterep-stat-card.purple .posterep-stat-top{ color:#7a4fd1; }
.posterep-stat-icon{ display:block; width:30px; height:30px; flex:none; }
.posterep-stat-number{ font-size:30px; font-weight:900; color:currentColor; }
.posterep-stat-title{ margin-top:6px; font-size:10.5px; font-weight:900; letter-spacing:.4px; color:#12903e; }
.posterep-stat-card.blue .posterep-stat-title{ color:var(--poster-blue); }
.posterep-stat-card.purple .posterep-stat-title{ color:#7a4fd1; }
.posterep-list-wrap{ margin-top:16px; border:1px solid #dbe7ed; border-radius:16px; overflow:hidden; background:#fff; }
.posterep-list-head{ display:flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; text-align:center; font-size:13px; font-weight:900; letter-spacing:.5px; color:#fff; background:var(--poster-list-head-gradient); }
.posterep-list-star{ width:13px; height:13px; flex:none; color:#fff; }
/* Two side-by-side columns rather than one long list, since "everyone who
   checked in" can run long — halves the poster's vertical growth. */
.posterep-list-columns{ display:flex; }
.posterep-list-col{ flex:1 1 0; min-width:0; }
.posterep-list-col + .posterep-list-col{ border-left:1px solid #dbe7ed; }
/* Fixed-width # and NETS columns (not auto) — each .posterep-list-row is
   its own independent grid, so an auto-sized column resizes per row based
   on that row's own digit count, meaning nothing lines up to a shared
   edge across rows. Fixed widths keep # and NETS aligned consistently,
   both row-to-row and against the header. */
.posterep-list-colhead{
  display:grid; grid-template-columns:42px 1fr 46px; gap:8px;
  padding:7px 14px; font-size:10.5px; font-weight:900; letter-spacing:.5px; color:#5c7186; background:#eef2f5;
  border-bottom:1px solid #e4edf2;
}
.posterep-list-colhead span{ display:inline-flex; align-items:center; justify-content:center; gap:3px; }
.posterep-col-icon{ width:11px; height:11px; flex:none; }
.posterep-list-row{ display:grid; grid-template-columns:42px 1fr 46px; gap:8px; align-items:center; padding:8px 14px; border-bottom:1px solid #e4edf2; }
.posterep-list-row:last-child{ border-bottom:none; }
.posterep-list-rows .posterep-list-row:nth-child(even){ background:#f5f8fa; }
.posterep-list-rank{ font-size:12px; font-weight:900; color:#5c7186; text-align:center; }
.posterep-list-cs{ font-size:14px; font-weight:900; color:#1476c8; overflow-wrap:break-word; text-align:center; }
.posterep-list-count{ font-size:14px; font-weight:900; color:var(--poster-heading); white-space:nowrap; text-align:center; }
/* Whoever logged a day's check-ins this month, credited as that day's
   Net Control station — same convention Past Logs already uses. Same
   bordered-box + header-bar structure as .posterep-list-wrap/-head above,
   just a light tint instead of that section's bold gradient, so NCS reads
   as a secondary section rather than competing with the main rankings. */
.posterep-ncs-wrap{ margin-top:16px; border:1px solid #cfe0ee; border-radius:16px; overflow:hidden; background:#fff; }
.posterep-ncs-title{ display:flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; font-size:13px; font-weight:900; letter-spacing:1px; color:var(--poster-blue); background:linear-gradient(90deg,#eaf3fd,#f7fbff); border-bottom:1px solid #cfe0ee; }
.posterep-ncs-icon{ width:16px; height:16px; flex:none; }
.posterep-ncs-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; padding:12px; }
.posterep-ncs-chip{ padding:6px 14px; border-radius:20px; font-size:13px; font-weight:800; color:var(--poster-heading); background:#fff; border:1px solid #cfe0ee; }
.posterep-footer{ margin-top:auto; padding-top:18px; text-align:center; }
.posterep-thanks-main{ font-size:22px; font-weight:900; font-style:italic; color:var(--poster-primary); }
.posterep-thanks-sub{ margin-top:6px; font-size:15px; font-weight:700; color:#263c5e; }
.posterep-brand{ margin-top:12px; padding-top:12px; border-top:1px solid #dce7ed; }
.posterep-brand-name{ font-size:22px; font-weight:900; color:var(--poster-heading); }
.posterep-brand-line{ font-size:15px; font-weight:800; margin-top:4px; }
.posterep-brand-line.one{ color:#1589c9; } .posterep-brand-line.two{ color:#7552d3; }
.posterep-bottom-accent{ height:8px; margin:18px 0 0; border-radius:10px; background:var(--poster-bottom-gradient); }