/*
 * Showcase Guest Styles
 * Polite Platform :: Gallery
 * Path: /gallery/static/showcase.css
 * Description: Accessible collection navigation and lightbox for the shared Showcase presentation.
 * Context: UI
 * Author: Polite Platform Team
 * Date: 2026-09-24T21:12:50Z
 * Generated by: GPT-6 Codex
 */
:root { font-family:system-ui,sans-serif; color-scheme:light; --gallery-background:#fff; --gallery-surface:#f1f3f4; --gallery-text:#1d2939; --gallery-muted-text:#536171; --gallery-primary-action:#234d46; --gallery-action-text:#fff; --gallery-border:#c7cecb; --gallery-focus:#136dbe; }
*,*::before,*::after { box-sizing:border-box; }
body { margin:0; background:var(--gallery-background); color:var(--gallery-text); }
[hidden] { display:none!important; }
button,input,select { font:inherit; }
button { cursor:pointer; }
button:disabled { cursor:default; opacity:.6; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid var(--gallery-focus); outline-offset:3px; }
.showcase-app { width:min(100%,1280px); min-height:100vh; margin-inline:auto; padding:0 16px; }
.showcase-status { max-width:720px; margin:0 auto; padding:20px 16px; text-align:center; }
.showcase-status:empty { display:none; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:12px 22px; border:1px solid transparent; border-radius:12px; text-decoration:none; font-weight:600; }
.button-primary { background:var(--gallery-primary-action); color:var(--gallery-action-text); }
.button-secondary { background:var(--gallery-surface); color:var(--gallery-text); border-color:var(--gallery-border); }
.showcase-unlock { width:min(100%,420px); margin:8vh auto; padding:24px; }
.showcase-unlock h1 { font-size:1.6rem; }
.showcase-unlock form { display:grid; gap:12px; }
.showcase-unlock input,.showcase-filter-control { width:100%; min-height:48px; border:1px solid var(--gallery-border); border-radius:8px; padding:10px 12px; color:var(--gallery-text); background:var(--gallery-background); }
.showcase-unlock p,.showcase-filter-help { font-size:.875rem; color:var(--gallery-muted-text); margin:0; }
#showcase-retry { display:flex; margin:12px auto; }
.showcase-filters { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0; }
.showcase-filters > select { width:auto; }
.showcase-date { display:flex; align-items:center; gap:8px; }
.showcase-date label { font-size:.875rem; color:var(--gallery-muted-text); }
.showcase-date input { width:160px; }
.showcase-views { display:flex; gap:8px; margin:18px 0; }
.showcase-views [aria-pressed="true"] { border-color:var(--gallery-text); box-shadow:inset 0 -3px var(--gallery-text); }
/* Report layout follows the client recap's paper surface, serif totals and grouped KPIs. */
.campaign-analytics {
  --report-ink:#162f3c; --report-muted:#536571; --report-line:#d8dfe0;
  color-scheme:light; color:var(--report-ink); background:#f8f9f7;
  padding:32px; margin-bottom:32px; border-radius:14px;
  border-top:5px solid #a58b49; box-shadow:0 16px 44px rgb(0 0 0 / 14%);
}
.campaign-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:28px; }
.campaign-eyebrow { margin:0 0 10px; color:var(--report-muted); font-size:.68rem; font-weight:750; letter-spacing:.16em; text-transform:uppercase; }
.campaign-heading h2 { margin:0; font:400 clamp(1.9rem,4vw,2.7rem)/1.08 Georgia,serif; letter-spacing:-.035em; }
.campaign-subtitle { margin:8px 0 0; color:var(--report-muted); font-size:.95rem; }
.campaign-mode { flex:none; padding:7px 12px; border-radius:20px; color:#215546; background:#e4ede6; font-size:.75rem; font-weight:700; }
.campaign-mode.is-test { color:#70501d; background:#f1e8d4; }
.campaign-controls { display:flex; flex-wrap:wrap; align-items:end; gap:12px; padding:18px; border:1px solid var(--report-line); border-radius:10px; background:#fff; }
.campaign-controls > div { display:flex; flex:1 1 130px; min-width:0; flex-direction:column; gap:6px; }
.campaign-controls > div:nth-child(2) { flex-basis:180px; }
.campaign-controls label { color:var(--report-muted); font-size:.7rem; font-weight:700; letter-spacing:.04em; }
.campaign-controls select,.campaign-controls input { width:100%; min-height:44px; padding:8px 10px; color:var(--report-ink); background:#fff; border:1px solid #b9c7cb; border-radius:6px; font-size:.875rem; }
.campaign-controls .campaign-filter-actions { flex:0 1 auto; flex-direction:row; }
.campaign-controls .button { min-height:44px; border-radius:6px; padding:8px 16px; font-size:.8rem; }
.campaign-refresh { color:#fff; background:var(--report-ink); }
.campaign-clear { color:var(--report-ink); background:#edf1ef; border-color:var(--report-line); }
.campaign-help { color:var(--report-muted); font-size:.75rem; line-height:1.5; }
.campaign-test-note,.campaign-coverage { padding:12px 14px; border-radius:6px; font-size:.8rem; line-height:1.5; }
.campaign-test-note { color:#70501d; background:#f1e8d4; }
.campaign-coverage { color:var(--report-muted); background:#eaf0f0; border-left:3px solid #859d9f; }
.campaign-status { font-size:.875rem; padding:10px 0; }
.campaign-status:empty { display:none; }
.campaign-period { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; margin:26px 0 18px; color:var(--report-muted); font-size:.75rem; }
.campaign-period strong { color:var(--report-ink); font-weight:600; }
.campaign-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0 0 24px; padding:24px 0; border-top:1px solid var(--report-line); border-bottom:1px solid var(--report-line); }
.campaign-metric { display:flex; flex-direction:column; min-width:0; padding:0 22px; border-left:1px solid var(--report-line); }
.campaign-metric:first-child { padding-left:0; border-left:0; }
.campaign-metric dt { order:1; color:var(--report-ink); font-size:.68rem; font-weight:750; letter-spacing:.055em; text-transform:uppercase; }
.campaign-metric dd { order:0; margin:0 0 12px; font:400 clamp(2.4rem,5vw,3.8rem)/1 Georgia,serif; font-variant-numeric:tabular-nums; letter-spacing:-.04em; }
.campaign-metric p { order:2; margin:7px 0 0; color:var(--report-muted); font-size:.72rem; line-height:1.45; }
.campaign-unique-metrics { display:flex; flex-wrap:wrap; align-items:center; gap:18px 32px; margin:0 0 20px; padding:16px 20px; border:1px solid var(--report-line); border-radius:8px; background:#fff; }
.campaign-unique-metrics > div { display:flex; align-items:baseline; gap:12px; }
.campaign-unique-metrics dt { color:var(--report-muted); font-size:.75rem; }
.campaign-unique-metrics dd { margin:0; color:var(--report-ink); font:400 1.8rem/1 Georgia,serif; font-variant-numeric:tabular-nums; }
.campaign-unique-metrics p { flex:1 1 180px; margin:0; text-align:right; }
.campaign-store-section { margin-top:30px; }
.campaign-section-heading { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
.campaign-section-heading h3 { margin:0; font-size:1rem; font-weight:650; }
.campaign-section-heading span { color:var(--report-muted); font-size:.75rem; }
.campaign-table-scroll { overflow-x:auto; border:1px solid var(--report-line); border-radius:8px; background:#fff; }
.campaign-table { width:100%; min-width:690px; border-collapse:separate; border-spacing:0; font-variant-numeric:tabular-nums; }
.campaign-table th,.campaign-table td { padding:14px 16px; border-bottom:1px solid #e8eded; text-align:right; font-size:.875rem; }
.campaign-table th:first-child { position:sticky; left:0; text-align:left; background:#fff; min-width:145px; }
.campaign-table thead th { color:var(--report-muted); background:#edf2f1; font-size:.68rem; font-weight:700; vertical-align:bottom; line-height:1.4; }
.campaign-table thead th:first-child { background:#edf2f1; }
.campaign-table tbody th { font-weight:550; }
.campaign-table tbody tr:hover > * { background:#f4f7f5; }
.campaign-table tfoot { font-weight:750; }
.campaign-table tfoot > tr > * { border-bottom:0; border-top:1px solid #c3d0d2; background:#edf2f1; }
.campaign-methodology { margin-top:24px; padding-top:16px; border-top:1px solid var(--report-line); }
.campaign-methodology summary { color:var(--report-muted); font-size:.8rem; font-weight:600; cursor:pointer; }
.campaign-definitions { color:var(--report-muted); font-size:.8rem; line-height:1.7; padding-left:20px; }
/* Activity and processing allowance share the private report's visual language. */
.campaign-chart-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(250px,1fr); align-items:start; gap:20px; margin-top:24px; }
.campaign-chart-card { min-width:0; border:1px solid var(--report-line); border-radius:10px; padding:20px; background:#fff; }
.campaign-chart-card h3 { margin:0; font-size:1rem; font-weight:650; }
.campaign-chart-heading p,.campaign-allowance > p { margin-top:7px; }
.campaign-chart-controls { display:flex; flex-wrap:wrap; gap:10px; margin:16px 0; }
.campaign-chart-controls label { display:flex; flex-direction:column; gap:5px; flex:1 1 110px; min-width:0; color:var(--report-muted); font-size:.7rem; font-weight:650; }
.campaign-chart-controls select { width:100%; min-height:40px; padding:7px 8px; color:var(--report-ink); background:#fff; border:1px solid #b9c7cb; border-radius:5px; font:inherit; font-size:.8rem; }
/* Native macOS select styling can ignore min-height; size every report control explicitly. */
.campaign-controls select,.campaign-controls input,.campaign-controls .button,.campaign-chart-controls select {
  box-sizing:border-box; height:44px; min-height:44px; line-height:1.25;
}
.campaign-controls select,.campaign-chart-controls select {
  -webkit-appearance:none; appearance:none; padding-inline-end:32px;
  background-image:linear-gradient(45deg,transparent 50%,var(--report-muted) 50%),linear-gradient(135deg,var(--report-muted) 50%,transparent 50%);
  background-position:right 17px center,right 12px center;
  background-size:5px 5px; background-repeat:no-repeat;
}
@media(forced-colors:active) {
  .campaign-controls select,.campaign-chart-controls select { -webkit-appearance:auto; appearance:auto; background-image:none; }
}
.campaign-chart-legend { display:flex; flex-wrap:wrap; gap:8px 14px; margin-bottom:16px; }
.campaign-chart-legend > span { display:flex; align-items:center; gap:6px; color:var(--report-muted); font-size:.68rem; }
.campaign-chart-legend i { display:block; width:9px; height:9px; border-radius:2px; }
.campaign-plot { overflow-x:auto; }
.campaign-plot svg { display:block; width:100%; min-width:440px; }
.campaign-plot text { fill:var(--report-muted); font-size:13px; font-family:system-ui,sans-serif; }
.campaign-grid-line { stroke:#e4ebe9; stroke-width:1; }
.campaign-chart-data { margin-top:14px; }
.campaign-chart-data summary,.campaign-budget-stores > summary { cursor:pointer; color:var(--report-muted); font-size:.8rem; font-weight:600; }
.campaign-chart-data .campaign-table-scroll { margin-top:12px; }
.campaign-allowance > svg { display:block; width:min(100%,220px); margin:8px auto 0; }
.campaign-ring-count { fill:var(--report-ink); font:400 32px Georgia,serif; }
.campaign-ring-label { fill:var(--report-muted); font:9px system-ui,sans-serif; }
.campaign-allowance .campaign-allowance-percent { margin:0; text-align:center; font-size:.875rem; font-weight:650; }
.campaign-allowance .campaign-allowance-balance { margin:7px 0; text-align:center; font-size:.8rem; color:var(--report-muted); }
.campaign-allowance-percent + p + .campaign-help { text-align:center; }
.campaign-usage-breakdown { margin:20px 0 16px; padding-top:12px; border-top:1px solid var(--report-line); }
.campaign-usage-breakdown > div { display:flex; justify-content:space-between; gap:12px; margin:8px 0; font-size:.75rem; }
.campaign-usage-breakdown dt { color:var(--report-muted); }
.campaign-usage-breakdown dd { margin:0; font-weight:650; font-variant-numeric:tabular-nums; }
.campaign-budget-stores { margin:18px 0 28px; padding:16px 20px; border:1px solid var(--report-line); border-radius:8px; background:#fff; }
.campaign-budget-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 28px; margin-top:20px; }
.campaign-budget-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; align-items:center; font-size:.75rem; }
.campaign-budget-row strong { font-weight:550; }
.campaign-budget-row progress { width:100%; height:8px; grid-row:2; grid-column:1 / -1; accent-color:#278178; }
.campaign-budget-row span { grid-row:1; grid-column:2; color:var(--report-muted); font-variant-numeric:tabular-nums; }
.campaign-budget-row.is-over progress { accent-color:#b65642; }
@media(max-width:1000px) { .campaign-chart-grid { grid-template-columns:minmax(0,1fr); } .campaign-allowance > svg { width:180px; } }
@media(max-width:600px) { .campaign-plot text { font-size:18px; } .campaign-chart-card { padding:16px 12px; } .campaign-budget-list { grid-template-columns:minmax(0,1fr); } }
@media(max-width:800px) {
  .campaign-analytics { padding:24px; }
  .campaign-metric { padding-inline:14px; }
}
@media(max-width:600px) {
  .campaign-analytics { padding:22px 16px; border-radius:10px; }
  .campaign-heading { align-items:flex-start; gap:12px; }
  .campaign-mode { font-size:.65rem; padding:6px 9px; }
  .campaign-controls { padding:12px; gap:12px; }
  .campaign-controls > div,.campaign-controls > div:nth-child(2) { flex:1 1 calc(50% - 12px); }
  .campaign-controls .campaign-filter-actions { flex:1 1 100%; }
  .campaign-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:24px; }
  .campaign-metric:nth-child(3) { padding-left:0; border-left:0; }
  .campaign-metric dd { font-size:2.6rem; }
  .campaign-unique-metrics { padding:14px; gap:14px; }
  .campaign-unique-metrics > div { flex:1 1 100%; justify-content:space-between; }
  .campaign-unique-metrics p { text-align:left; }
}
.showcase-refresh { padding:8px; width:48px; font-size:1.4rem; }
.showcase-collection-status { color:var(--gallery-muted-text); margin:0 0 16px; font-size:.9rem; }
.showcase-pagination { display:flex; justify-content:center; padding:24px 0 8px; }
.showcase-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.showcase-tile { cursor:pointer; }
.showcase-tile:focus-visible { outline:3px solid var(--gallery-focus); outline-offset:3px; }
.showcase-tile .showcase-sample { padding:12px; }
.showcase-export-status { margin:0 0 16px; font-size:.875rem; color:var(--gallery-muted-text); }
.showcase-export-status:empty { display:none; }
.showcase-downloads .button { width:auto; min-width:0; }
.showcase-viewer { width:min(100% - 24px,1100px); max-height:calc(100dvh - 24px); padding:16px; border:0; color:var(--gallery-text); background:var(--gallery-background); }
.showcase-viewer::backdrop { background:rgb(0 0 0 / 80%); }
.showcase-viewer-toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.showcase-viewer-toolbar h2 { margin:0; font-size:1rem; font-weight:500; }
.icon-button { display:grid; place-items:center; width:48px; height:48px; flex:none; border:1px solid var(--gallery-border); border-radius:50%; background:var(--gallery-surface); color:var(--gallery-text); font-size:2rem; line-height:1; }
.showcase-viewer-frame { margin:12px 0; min-height:100px; display:grid; place-items:center; background:var(--gallery-surface); }
.showcase-viewer-frame img,.showcase-viewer-frame video { display:block; max-width:100%; width:auto; height:auto; max-height:calc(100dvh - 230px); object-fit:contain; }
.showcase-viewer-actions { display:flex; align-items:center; justify-content:center; gap:16px; }
.showcase-viewer [role=status]:empty { display:none; }
.skip-link { position:fixed; top:8px; left:8px; z-index:10; transform:translateY(-200%); padding:12px 20px; background:var(--gallery-background); color:var(--gallery-text); }
.skip-link:focus { transform:translateY(0); }
.visually-hidden { position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; }
@media(min-width:1400px) { .showcase-app { padding-inline:24px; } }
@media(max-width:800px) { .showcase-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } }
@media(max-width:520px) { .showcase-app { padding-inline:0; } .showcase-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .showcase-filters { gap:12px; } .showcase-viewer { padding:12px; } .showcase-viewer-actions { gap:8px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }