/* ---------- Daily net-log share image (hidden #pngReportRoot/#pngReportCard
   template captured via html2canvas) — split out from index.html's main
   <style> block for easier editing, the same way the Top Monthly Performers
   poster's CSS lives in monthly-poster.css. Deliberately its own
   .pngrep-* namespace rather than sharing the poster's .posterep-*: same
   brand language (gradient corner blobs, tower icon, footer), but kept
   independent so edits to one card don't reflow the other. Landscape (not
   portrait like the poster) since it's a wide table-style report, not a
   social-share graphic.

   Theme variables: same discipline as monthly-poster.css — only colors
   that are reused more than once, or are the dominant brand-identity
   accents (border, corner blobs, the two gradients), are pulled into
   :root custom properties. index.html sets a data-theme attribute on
   #pngReportCard (via reportThemes.daily, Settings → Report Themes)
   before html2canvas captures it; add a new theme with a block like
   [data-theme="example"]{ --report-primary:#0a7d3a; ... }. */
:root{
  --report-border:#20b8cf;
  --report-blob-a1:#18c4ce; --report-blob-a2:#7de1df;
  --report-blob-b1:#ffca46; --report-blob-b2:#f7a623;
  --report-heading:#102448;
  --report-primary:#147ed5;
  --report-freq-gradient: linear-gradient(90deg,#0f96a1,#1067c4,#5c34b8);
  --report-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. */
.pngrep-report[data-theme="onam"]{
  --report-border:#d69e2e;
  --report-blob-a1:#2f9e5c; --report-blob-a2:#94e3b0;
  --report-blob-b1:#ffcf5c; --report-blob-b2:#e8a325;
  --report-heading:#3b2408;
  --report-primary:#0f7a3d;
  --report-freq-gradient: linear-gradient(90deg,#0f7a3d,#d69e2e,#8a3b12);
  --report-bottom-gradient: linear-gradient(90deg,#e8a325,#0f7a3d,#8a3b12,#ffcf5c);
}
/* Christmas theme — holly red + pine green + a gold accent. */
.pngrep-report[data-theme="christmas"]{
  --report-border:#b91c2c;
  --report-blob-a1:#0f5c38; --report-blob-a2:#6fcf97;
  --report-blob-b1:#e0483e; --report-blob-b2:#a4211b;
  --report-heading:#0c2e1c;
  --report-primary:#c0392b;
  --report-freq-gradient: linear-gradient(90deg,#0f5c38,#c0392b,#b8860b);
  --report-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 monthly-poster.css's
   Night Sky theme. Unlike Onam/Christmas, this theme also swaps the tower
   icon itself (see .pngrep-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. */
.pngrep-report[data-theme="nightsky"]{
  --report-border:#0284c7;
  --report-blob-a1:#00f0ff; --report-blob-a2:#7dfbff;
  --report-blob-b1:#fbbf24; --report-blob-b2:#f59e0b;
  --report-heading:#0b2540;
  --report-primary:#0284c7;
  --report-freq-gradient: linear-gradient(90deg,#0284c7,#38bdf8,#fbbf24);
  --report-bottom-gradient: linear-gradient(90deg,#0284c7,#00f0ff,#fbbf24,#38bdf8);
}
/* Coastal theme — a full illustrated corner-artwork background (towers,
   signal rings, a Kerala lighthouse/sunrise scene) sitting behind the same
   content as every other theme. Daily-report-only: the artwork is painted
   at this card's 1200-wide landscape ratio, so stretching it onto the
   monthly poster's portrait canvas would distort it (see
   dailyReportThemeSelect/monthlyPosterThemeSelect in index.html — this
   theme is only listed on the daily selector). Both default corner blobs
   (:before top-left, :after bottom-right) are dropped, and so are the
   header's own tower icons — the artwork already carries towers in the top
   corners and its own scene bottom-right, so the template's versions of
   the same things would just duplicate/clash with it.

   Split into two images (top/bottom halves of the original 1200x960
   artwork) rather than one stretched to 100% 100% — the card's height is
   `min-height:960px` but grows with the check-in list, and stretching one
   image to fill would distort the towers/coastline on a long roster.
   Each half is pinned to its own edge at background-size:100% auto (width
   locked to the card's fixed 1200px, height keeping native aspect — no
   vertical stretch either way), the same way the default theme's own
   :before/:after corner blobs are fixed-size and edge-pinned rather than
   stretched. A tall card just shows more plain white between the two
   halves, which is fine since the center is meant to stay clear anyway.
   The image's own painted border doesn't need to reach all the way around
   for this to look right — .pngrep-report already has a real, non-image
   `border:5px solid var(--report-border)` on every theme. At native size
   the artwork's own painted border-line sits just inside that real border,
   reading as a double border — fixed by pre-scaling each PNG up ~14% and
   trimming 26px off its bordered edge (the crop math lives in the Python
   script used to generate these files, not here), so the shipped image
   already has that border pushed out. Deliberately NOT done with
   background-position/-size math (e.g. `calc(100% + 26px)`) — this report
   is captured by html2canvas, not just viewed in a browser, and
   html2canvas's support for calc() in background-position is unreliable;
   plain edge keywords + 100% width are the safest thing to feed it. */
.pngrep-report[data-theme="coastal"]{
  background-image: url("report-bg-coastal-top.png"), url("report-bg-coastal-bottom.png");
  background-repeat: no-repeat, no-repeat;
  background-position: top left, bottom left;
  background-size: 100% auto, 100% auto;
}
.pngrep-report[data-theme="coastal"]:before,
.pngrep-report[data-theme="coastal"]:after{ content:none; }
/* visibility:hidden, not display:none — the header is a 3-column grid
   (120px title 120px) and these icons are auto-placed by DOM order with no
   explicit grid-column; display:none would remove them from the grid
   entirely, so the title block would auto-place into the first 120px
   column instead of the center one. visibility:hidden keeps the column
   reserved and empty without shifting anything. */
.pngrep-report[data-theme="coastal"] .pngrep-tower{ visibility:hidden; }
/* .pngrep-table-wrap's solid #fff would otherwise fully hide the artwork
   wherever the table happens to overlap it — tinted here so it shows
   through. The zebra-striped rows (tbody tr:nth-child(even), normally
   solid #f5f8fa) get the same alpha, keeping the same gray hue, so both
   row types let an equal amount of artwork through instead of odd rows
   showing a tint and even rows staying fully opaque. */
.pngrep-report[data-theme="coastal"] .pngrep-table-wrap{ background:rgba(255,255,255,0.50); }
.pngrep-report[data-theme="coastal"] .pngrep-table tbody tr:nth-child(even){ background:rgba(245,248,250,0.50); }
#pngReportRoot{ position:fixed; left:-9999px; top:0; }
.pngrep-report{
  width:1200px; min-height:960px; position:relative; overflow:hidden;
  background:#fff; border:5px solid var(--report-border); border-radius:22px;
  display:flex; flex-direction:column;
}
.pngrep-report:before, .pngrep-report:after{ content:''; position:absolute; z-index:0; pointer-events:none; }
.pngrep-report:before{ width:420px;height:420px;left:-180px;top:-180px;border-radius:50%; background:radial-gradient(circle at 70% 70%,var(--report-blob-a1) 0,var(--report-blob-a2) 45%,transparent 72%); opacity:.7; }
.pngrep-report:after{ width:430px;height:430px;right:-190px;bottom:-210px;border-radius:50%; background:radial-gradient(circle at 30% 30%,var(--report-blob-b1) 0,var(--report-blob-b2) 45%,transparent 72%); opacity:.72; }
.pngrep-content{ position:relative; z-index:2; flex:1 1 auto; display:flex; flex-direction:column; width:100%; padding:28px 30px 22px; font-family:Arial,Helvetica,sans-serif; color:var(--report-heading); }
.pngrep-header{ display:grid; grid-template-columns:120px 1fr 120px; align-items:center; gap:14px; text-align:center; }
.pngrep-tower{ width:105px; height:105px; margin:auto; color:#078ac8; }
.pngrep-tower-nightsky{ display:none; margin:auto; }
.pngrep-report[data-theme="nightsky"] .pngrep-tower{ display:none; }
.pngrep-report[data-theme="nightsky"] .pngrep-tower-nightsky{ display:block; }
.pngrep-title{ margin:0; font-size:42px; line-height:1.05; font-weight:900; letter-spacing:.5px; color:var(--report-heading); }
.pngrep-freq{ display:flex; align-items:center; justify-content:center; width:fit-content; max-width:100%; margin:16px auto 0; height:42px; padding:0 16px; border-radius:24px; color:#fff; background:var(--report-freq-gradient); font-size:18px; font-weight:800; line-height:1.2; text-shadow: 0 1px 2px rgba(0,0,0,0.55); }
.pngrep-freq span{ display:flex; align-items:center; justify-content:center; padding:0 12px; border-right:1px solid rgba(255,255,255,.28); white-space:nowrap; }
.pngrep-freq span:last-child{ border-right:none; }
.pngrep-freq i{ margin-right:6px; font-size:15px; color:#ffd873; text-shadow: 0 1px 2px rgba(0,0,0,0.55); }
.pngrep-info-grid{ display:grid; grid-template-columns:1fr 250px 250px; gap:22px; margin-top:22px; }
.pngrep-info-card, .pngrep-total-card, .pngrep-q5-card{ border:1px solid #dce7ed; border-radius:18px; background:linear-gradient(135deg,#fff,#f8fcfd); }
.pngrep-info-card{ padding:20px 24px; }
.pngrep-info-row{ display:grid; grid-template-columns:48px 1fr; gap:10px; align-items:center; margin:8px 0 14px; }
.pngrep-info-icon{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:21px; font-weight:900; }
.pngrep-i-purple{ background:#7755d8; } .pngrep-i-pink{ background:#ef4c78; } .pngrep-i-blue{ background:#1d87e8; } .pngrep-i-green{ background:#20ad62; }
.pngrep-label{ font-size:14px; font-weight:900; letter-spacing:1px; margin-bottom:3px; }
.pngrep-label.purple{ color:#7453d0; } .pngrep-label.pink{ color:#df4770; } .pngrep-label.blue{ color:#187bd5; } .pngrep-label.green{ color:#159c55; }
.pngrep-value{ font-size:18px; font-weight:800; color:var(--report-heading); overflow-wrap:break-word; }
.pngrep-total-card, .pngrep-q5-card{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:18px; text-align:center; }
.pngrep-total-card{ background:linear-gradient(135deg,#fbfffb,#f3fbf5); }
.pngrep-total-title{ font-size:15px; font-weight:900; color:#12903e; letter-spacing:.4px; }
.pngrep-total-number{ font-size:52px; line-height:1; color:#13a046; font-weight:900; margin:8px 0 4px; }
.pngrep-total-sub{ color:#119441; font-size:14px; font-weight:900; letter-spacing:.5px; }
.pngrep-people{ margin-top:8px; width:150px; height:auto; color:#bfe6c4; }
.pngrep-q5-card{ background:linear-gradient(135deg,#fffdf7,#fff6e6); }
.pngrep-q5-title{ font-size:15px; font-weight:900; color:#b9770e; letter-spacing:.4px; white-space:nowrap; }
.pngrep-q5-number{ font-size:52px; line-height:1; color:#e08a00; font-weight:900; margin:8px 0 4px; }
.pngrep-q5-number .sep{ color:#e8b978; font-size:34px; margin:0 2px; }
.pngrep-q5-sub{ color:#c98a13; font-size:14px; font-weight:900; letter-spacing:.4px; white-space:nowrap; }
.pngrep-q5-icon{ margin-top:8px; width:110px; height:auto; color:#f3d9a8; }
.pngrep-table-wrap{ margin-top:22px; margin-bottom:18px; border:1px solid #dbe7ed; border-radius:16px; overflow:hidden; background:#fff; }
.pngrep-table{ width:100%; border-collapse:collapse; table-layout:fixed; }
/* text-align:center is explicit, not left to the browser's default <th>
   styling — html2canvas doesn't reliably apply that default the way a
   normal browser view does, which is why this centered fine in a live
   preview but rendered left-aligned in the actual captured report. */
.pngrep-table thead th{ color:#fff; padding:12px 10px; font-size:14px; font-weight:900; letter-spacing:.5px; text-align:center; }
.pngrep-table th:nth-child(1){ background:#7653d4; width:7%; }
.pngrep-table th:nth-child(2){ background:#167fdc; width:15%; }
.pngrep-table th:nth-child(3){ background:#13afa3; width:29%; }
.pngrep-table th:nth-child(4){ background:#f5a326; width:28%; }
.pngrep-table th:nth-child(5){ background:#59b847; width:10.5%; }
.pngrep-table th:nth-child(6){ background:#2187df; width:10.5%; }
/* font-family and vertical-align are set explicitly here, not left to
   inherit from .pngrep-content's Arial — index.html has an unscoped, global
   `tbody td{ font-family:'JetBrains Mono', monospace; vertical-align:top; }`
   rule (meant only for the app's own .log-table, but written without that
   scope) that otherwise silently wins over inheritance for every <td> in
   the document, this report's included. */
.pngrep-table tbody td{ padding:9px 10px; font-size:15px; border-bottom:1px solid #e4edf2; color:#182b4b; font-family:Arial,Helvetica,sans-serif; vertical-align:middle; }
.pngrep-table tbody tr:nth-child(even){ background:#f5f8fa; }
.pngrep-table tbody td:first-child, .pngrep-table tbody td:nth-child(2), .pngrep-table tbody td:nth-child(5), .pngrep-table tbody td:nth-child(6){ text-align:center; }
.pngrep-table tbody td:nth-child(2){ font-weight:900; color:#1476c8; }
/* font-weight:900, not 800 — Arial only has Regular/Bold faces, and on
   this report's actual rendering path (html2canvas's canvas-based text
   draw, not normal DOM layout) 900 reliably matches the Bold face while
   800 was silently rendering as regular weight (confirmed via a real
   generated report — the callsign column at 900 came out bold, this
   column at 800 didn't, both on the same device/browser). */
.pngrep-table tbody td:nth-child(3){ font-weight:900; }
.pngrep-table tbody td.pngrep-rst-good{ font-weight:900; color:#15984a; }
.pngrep-table tbody td.pngrep-rst-warn{ font-weight:900; color:#f0a020; }
.pngrep-table tbody td.pngrep-rst-bad{ font-weight:900; color:#e0453f; }
.pngrep-footer{ margin-top:auto; display:grid; grid-template-columns:1fr 1.15fr; gap:18px; align-items:center; padding:16px 20px; border-top:1px solid #dce7ed; }
.pngrep-thanks{ text-align:center; color:var(--report-primary); }
.pngrep-thanks-main{ font-size:26px; font-weight:900; font-style:italic; }
.pngrep-thanks-sub{ margin-top:6px; font-size:16px; font-weight:700; color:#263c5e; }
.pngrep-next{ margin-top:8px; }
.pngrep-next-label{ font-size:12px; font-weight:800; letter-spacing:.2px; color:#8a94a6; margin-right:4px; }
.pngrep-next-value{ font-size:15px; font-weight:900; color:#7552cf; }
.pngrep-brand{ text-align:center; border-left:1px solid #dce7ed; padding-left:20px; }
.pngrep-brand-name{ font-size:25px; font-weight:900; color:var(--report-heading); }
.pngrep-brand-line{ font-size:17px; font-weight:800; margin-top:5px; }
.pngrep-brand-line.one{ color:#1589c9; } .pngrep-brand-line.two{ color:#7552d3; font-style:italic; }
.pngrep-bottom-accent{ height:8px; margin:0 18px 12px; border-radius:10px; background:var(--report-bottom-gradient); }