/* Quarterly Report common styles (inspired by visualize/embed/embed-common.css, trimmed) */

:root{
  --bg:#ffffff;
  --text:#1f2937;
  --muted:#6b7280;
  --border:rgba(0,0,0,.08);
  --shadow:0 6px 24px rgba(0,0,0,.06);
  --shadow-hover:0 10px 32px rgba(0,0,0,.10);
  --primary:#1e3a5f;
  --accent-1:#4facfe; /* blues */
  --accent-2:#667eea;
  --accent-3:#764ba2;
  --success:#2ecc71;
  --warning:#f39c12;
  --danger:#e74c3c;
  --series-notifications:#e74c3c; /* stronger red */
  --series-unique:#3498db;        /* stronger blue */
}

html,body{height:100%;}
body{
  margin:0; padding:20px; background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Roboto',sans-serif;
  color:var(--text); line-height:1.5;
}

.page{max-width:1200px; margin:0 auto;}
.sheet{margin:0 auto;}
.sheet.a4{max-width:1024px;} /* good on-screen width; print uses @page */
.sheet.legal{max-width:1152px;}
.header{display:flex; flex-wrap:wrap; gap:12px; align-items:baseline; margin-bottom:16px;}
.title{font-weight:800; font-size:1.6rem; color:var(--primary);}
.subtitle{color:var(--muted); font-size:.95rem;}
.meta{color:var(--muted); font-size:.85rem;}
.chip{padding:4px 8px; border:1px solid var(--border); border-radius:999px; color:var(--muted);}

.grid{display:grid; gap:20px;}
.grid.hero{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
@media (min-width:1024px){ .grid.hero{ grid-template-columns:repeat(3,1fr); } }
.grid.two{grid-template-columns:repeat(auto-fit,minmax(400px,1fr));}
.grid.gauges{grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); align-items:stretch;}

.card{
  background:#fff; border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow); padding:20px; transition:transform .18s ease, box-shadow .18s ease;
  position:relative;
}
.card:hover{transform:translateY(-2px); box-shadow:var(--shadow-hover);} 

.stat-number{
  font-weight:800; font-size:2.2rem; letter-spacing:.2px; margin:6px 0 2px;
  background:linear-gradient(135deg,#653682 0%,#5071C7 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.stat-number.primary{background:linear-gradient(135deg,#CB4520 0%,#EF8770 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
.stat-number.secondary{background:linear-gradient(135deg,#5071C7 0%,#653682 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent;}
.stat-label{font-size:.8rem; text-transform:uppercase; letter-spacing:.5px; color:var(--muted);}
.delta{font-size:.8rem; margin-left:8px;}
.delta{display:inline-block; padding:2px 6px; border-radius:999px; background:rgba(0,0,0,.05); color:var(--muted);} 
.delta.up{background:rgba(46,204,113,.12); color:#1f7a4d;} 
.delta.down{background:rgba(231,76,60,.12); color:#7a2b25;} 
.delta.flat{background:rgba(0,0,0,.05); color:var(--muted);} 

.chart-container{height:360px;}
@media (max-width:768px){ .chart-container{height:300px;} }
.grid.two .chart-container{height:320px;}

.spotlight-list{list-style:none; padding:0; margin:0;}
.spotlight-item{display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid var(--border);} 
.spotlight-item:last-child{border-bottom:none;}
.spotlight-item > div:first-child{flex:1; min-width:0;}
.spotlight-item > div:last-child{flex:0 0 auto;}
.spotlight-item .meta{white-space:normal;}
.pill{font-size:.75rem; padding:2px 8px; border-radius:999px; background:rgba(0,0,0,.04); border:1px solid var(--border); color:var(--muted);} 

.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;}

.loading-overlay{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; gap:10px; background:rgba(255,255,255,.6); backdrop-filter:saturate(180%) blur(4px);}
.loading-spinner{width:18px; height:18px; border:2px solid #ddd; border-top-color:var(--accent-2); border-radius:50%; animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}

/* Print styles for export */
@media print{
  @page { size: A4 portrait; margin: 10mm; }
  body{ background:#fff; }
  .header .pill, .toggle, #shareMount{ display:none !important; }
  .chart-container{ height: 280px !important; }
}

/* Export mode tweaks (disable gradient text, shadows) */
.export-mode .stat-number{ background:none !important; -webkit-text-fill-color:unset !important; color:var(--primary) !important; }
.export-mode .card{ box-shadow:none !important; }
.export-mode .insight-card,
.export-mode .sensitive-tile,
.export-mode .source-card{ box-shadow:none !important; }
.badges{ position:absolute; top:10px; right:10px; display:flex; gap:10px; }
.badge-wrapper{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.badge-tag{ font-size:.6rem; color:var(--muted); line-height:1; }
.badge-circle{ width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; box-shadow:0 2px 6px rgba(0,0,0,.12); }
.badge-yoy{ background:rgba(231,76,60,.12); color:#7a2b25; border:1px solid rgba(231,76,60,.35); }
.badge-5y{ background:rgba(52,152,219,.12); color:#1e3a5f; border:1px solid rgba(52,152,219,.35); }
.badge-down{ background:rgba(231,76,60,.12); color:#7a2b25; border-color:rgba(231,76,60,.35); }

/* --- Comparison stickers — unified YoY / 5y visual language --- */
:root{
  --yoy-bg: #e8efff;
  --yoy-fg: #5071c8;
  --yoy-brd: #5071c8;
  --five-bg: #ffeee8;
  --five-fg: #cb461f;
  --five-brd: #cb461f;
}

/* Corner “app badge” stickers */
.sticker-stack{
  position:absolute; top:10px; right:10px;
  display:flex; flex-direction:column; gap:6px; align-items:flex-end;
  pointer-events:none;
}
.sticker{
  display:inline-flex; align-items:center; gap:6px;
  background:#fff; border:1px solid var(--border);
  border-radius:12px; padding:4px 8px; line-height:1;
  font-size:.78rem; font-weight:700; color:var(--primary);
  box-shadow:0 6px 16px rgba(0,0,0,.08);
  pointer-events:auto;
}
.sticker .tag{
  font-size:.62rem; font-weight:700; letter-spacing:.35px;
  text-transform:uppercase; padding:2px 6px;
  border-radius:999px; border:1px solid transparent;
  line-height:1;
}
.sticker.yoy .tag{ background:var(--yoy-bg); color:var(--yoy-fg); border-color:var(--yoy-brd); }
.sticker.five .tag{ background:var(--five-bg); color:var(--five-fg); border-color:var(--five-brd); }
.sticker.up   strong{ color:#cb461f; }
.sticker.down strong{ color:#5071c8; }
.sticker.flat strong{ color:var(--muted); }
.sticker .note{ margin-left:6px; font-weight:600; font-size:.72rem; color:var(--muted); }
.sticker-row{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }

/* Inline chips for legends/labels */
.inline-chip{
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 6px; font-size:.72rem; line-height:1;
  background:#fff; border:1px solid var(--border); border-radius:999px;
}
.inline-chip .tag{
  font-size:.62rem; padding:1px 4px; border-radius:999px;
  border:1px solid transparent; line-height:1;
}
.inline-chip .tag.yoy { background:var(--yoy-bg);  color:var(--yoy-fg);  border-color:var(--yoy-brd); }
.inline-chip .tag.five{ background:var(--five-bg); color:var(--five-fg); border-color:var(--five-brd); }
.inline-chip .dot{ width:8px; height:8px; border-radius:50%; }
.series-chips{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* export/print tidy */
.export-mode .sticker, .export-mode .inline-chip{ box-shadow:none; }
.sheet.a4 .chart-container{ height:220px; }
.sheet.legal .chart-container{ height:260px; }
.sheet.a4 .card, .sheet.legal .card{ padding:14px; }
.sheet.a4 .grid, .sheet.legal .grid{ gap:12px; }
.bubbles{ display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; justify-content:flex-start; }
.bubbles.chart-container{ height:auto !important; min-height:220px; }
.bubble{ border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; position:relative; box-shadow:var(--shadow); }
.bubble{ margin:6px; }
.bubble .icon{ width:60%; height:60%; color:#ffffff; opacity:.95; }
.bubble .label{ position:absolute; bottom:-22px; left:50%; transform:translateX(-50%); color:var(--muted); font-size:.85rem; text-align:center; width:160px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bubble .count-badge{ position:absolute; bottom:-10px; right:-10px; background:#fff; color:var(--text); border:1px solid var(--border); border-radius:999px; padding:2px 8px; font-size:.75rem; box-shadow:var(--shadow); }

/* Legend table under charts */
.legend-table{ margin-top:10px; border-top:1px solid var(--border); padding-top:8px; }
.legend-row{ display:grid; grid-template-columns:minmax(140px,1fr) 96px 68px 68px; align-items:center; gap:8px; padding:4px 0; font-size:.88rem; }
.legend-row .name{ display:flex; align-items:center; gap:8px; min-width:0; }
.legend-row .name > span:last-child{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.legend-row .dot{ width:10px; height:10px; border-radius:50%; flex:0 0 auto; }
.legend-row .count{ text-align:right; color:var(--text); font-variant-numeric:tabular-nums; }
.legend-row .delta{ text-align:right; }
.legend-row .delta .inline-chip{ border:none; padding:0; }
.legend-row .delta .inline-chip strong{ font-weight:700; }
.legend-row .delta .inline-chip .tag{ margin-left:4px; }

/* Compact toggle buttons */
.toggle.compact button{ padding:4px 8px; font-size:.78rem; }

/* Spotlight polish */
.spotlight-item .subtitle{ color:var(--muted); font-size:.8rem; }
.spotlight-item .excerpt{ margin-top:6px; color:var(--muted); font-size:.75rem; font-style:italic !important; max-height:5.4em; overflow-y:auto; line-height:1.35; }
.spotlight-item .right{ display:flex; gap:8px; align-items:center; }
.spotlight-item .pill.source{ background:#fff; }

/* Optional extra polish */
.sticker{ backdrop-filter:saturate(140%) blur(4px); }
/* Movers (badge chips under charts) */
.movers{ margin-top:8px; display:flex; flex-direction:column; gap:6px; }
.movers-row{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.movers .label{ font-size:.75rem; color:var(--muted); margin-right:2px; }
.delta-chip{
  display:inline-flex; align-items:center; gap:6px;
  background:#fff; border:1px solid var(--border);
  border-radius:12px; padding:4px 8px; line-height:1;
  font-size:.78rem; box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.delta-chip .tag{
  font-size:.62rem; font-weight:700; letter-spacing:.35px;
  text-transform:uppercase; padding:2px 6px; border-radius:999px;
  border:1px solid transparent;
}
.delta-chip .tag.yoy  { background:var(--yoy-bg);  color:var(--yoy-fg);  border-color:var(--yoy-brd); }
.delta-chip .tag.five { background:var(--five-bg); color:var(--five-fg); border-color:var(--five-brd); }
.delta-chip.up   strong{ color:#1f7a4d; }
.delta-chip.down strong{ color:#7a2b25; }
.delta-chip .name{ max-width:180px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }


.baseline-chip{display:inline-flex; align-items:center; gap:6px; padding:4px 8px; border-radius:999px; border:1px solid transparent; font-size:.72rem; background:#fff;}
.baseline-chip__label{text-transform:uppercase; font-size:.62rem; letter-spacing:.35px; font-weight:600;}
.baseline-chip__value{font-weight:700; color:var(--text);}
.baseline-chip__delta{font-weight:700;}
.baseline-chip.yoy{background:var(--yoy-bg); border-color:var(--yoy-brd); color:var(--yoy-fg);}
.baseline-chip.five{background:var(--five-bg); border-color:var(--five-brd); color:var(--five-fg);}
.baseline-chip.yoy .baseline-chip__value{color:var(--yoy-fg);}
.baseline-chip.five .baseline-chip__value{color:var(--five-fg);}
.baseline-chip.up .baseline-chip__delta{color:#1f7a4d;}
.baseline-chip.down .baseline-chip__delta{color:#7a2b25;}
.baseline-chip.flat .baseline-chip__delta{color:var(--muted);}


.insight-grid{display:flex; flex-direction:column; gap:12px; margin-top:6px;}
.insight-grid__summary{font-size:.85rem; color:var(--primary); background:rgba(102,126,234,.08); border-radius:10px; padding:10px 12px; border:1px solid rgba(102,126,234,.24);}
.insight-grid__label{display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.35px; color:var(--muted); margin-bottom:4px;}
.insight-grid__cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px;}
.insight-card{display:flex; flex-direction:column; gap:8px; padding:12px; border-radius:12px; border:1px solid var(--border); background:#fff; box-shadow:0 4px 14px rgba(15,23,42,.05);}
.insight-card__heading{display:flex; align-items:center; gap:8px; font-weight:600; color:var(--text); min-height:24px;}
.insight-card__dot{width:10px; height:10px; border-radius:50%; flex-shrink:0;}
.insight-card__title{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.9rem;}
.insight-card__value{font-size:1.4rem; font-weight:700; color:var(--primary);}
.insight-card__bar{position:relative; height:6px; background:rgba(148,163,184,.2); border-radius:999px; overflow:hidden;}
.insight-card__bar span{position:absolute; inset:0; border-radius:999px;}
.insight-card__meta{font-size:.75rem; color:var(--muted);}
.insight-card__chips{display:flex; flex-wrap:wrap; gap:6px;}
.insight-grid__remainder{font-size:.78rem; color:var(--muted);}

.viz-split{display:flex; flex-wrap:wrap; gap:18px; align-items:flex-start; margin-top:10px;}
.viz-split .viz-primary{flex:1 1 300px; min-width:260px;}
.viz-split .viz-secondary{flex:1 1 240px; min-width:220px;}
@media (max-width:900px){ .viz-split{flex-direction:column;} }

.sensitive-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px;}
.sensitive-tile{display:flex; flex-direction:column; gap:8px; padding:14px; border-radius:14px; border:1px solid var(--border); background:#fff; box-shadow:0 6px 18px rgba(15,23,42,.05);}
.sensitive-tile__icon{width:44px; height:44px; border-radius:12px; background:rgba(102,126,234,.12); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.sensitive-tile__icon img{width:100%; height:100%; object-fit:contain;}
.sensitive-tile__icon span{font-weight:700; color:var(--accent-color, var(--primary));}
.sensitive-tile__title{font-size:.86rem; font-weight:600; color:var(--text); min-height:36px;}
.sensitive-tile__value{font-size:1.4rem; font-weight:700; color:var(--accent-color, var(--primary));}
.sensitive-tile__baseline{display:flex; flex-wrap:wrap; gap:6px; font-size:.74rem; color:var(--muted);}
.sensitive-tile__baseline span{background:rgba(148,163,184,.12); border-radius:999px; padding:3px 8px;}
.sensitive-tile__baseline strong{color:var(--text); font-weight:600; margin-left:4px;}
.sensitive-tile__chips{display:flex; flex-wrap:wrap; gap:6px;}

/* Source cards - ensure proper grid layout */
.source-card-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:12px;
  margin-top:16px;
}
@media (min-width:900px){
  .source-card-grid{ grid-template-columns:repeat(4,1fr); }
}
@media (min-width:1200px){
  .source-card-grid{ grid-template-columns:repeat(5,1fr); }
}
@media (min-width:1400px){
  .source-card-grid{ grid-template-columns:repeat(7,1fr); }
}
/* Redesigned source cards */
.source-card{
  display:flex;
  flex-direction:column;
  padding:14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
  box-shadow:0 2px 8px rgba(15,23,42,.04);
  transition:all .15s ease;
  height:100%;
}
.source-card:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(15,23,42,.12);
}
.source-card__header{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.source-card__icon-wrap{
  width:36px;
  height:36px;
  border-radius:8px;
  background:linear-gradient(135deg, rgba(79,172,254,.1), rgba(102,126,234,.1));
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.source-card__icon{
  width:24px;
  height:24px;
  object-fit:contain;
}
.source-card__state-badge{
  width:36px;
  height:36px;
  border-radius:8px;
  background:linear-gradient(135deg, var(--accent-1), var(--accent-2));
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:.75rem;
  color:#fff;
}
.source-card__title{
  flex:1;
  font-weight:600;
  color:var(--text);
  font-size:.85rem;
  line-height:1.2;
}
.source-card__metrics{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.source-card__primary{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
}
.source-card__value{
  font-size:2rem;
  font-weight:800;
  color:var(--primary);
  line-height:1;
}
.source-card__unique{
  font-size:.75rem;
  color:var(--muted);
  text-align:right;
}
.source-card__unique-value{
  font-weight:600;
  color:var(--text);
}
.source-card__comparison{
  display:flex;
  gap:6px;
  margin-top:auto;
  padding-top:8px;
  border-top:1px solid var(--border);
}
.source-card__comp-item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:4px;
  border-radius:6px;
  background:rgba(148,163,184,.06);
}
.source-card__comp-label{
  font-size:.6rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.3px;
}
.source-card__comp-value{
  font-size:.85rem;
  font-weight:600;
  margin-top:2px;
}
.source-card__comp-value.up{ color:#1f7a4d; }
.source-card__comp-value.down{ color:#7a2b25; }
.source-card__comp-value.flat{ color:var(--muted); }

/* Notable incidents typography */
.spotlight-item strong{ font-size:.95rem; }
.spotlight-item .subtitle{ color:var(--muted); font-size:.78rem; }
.spotlight-item .excerpt{
  margin-top:6px; color:var(--muted);
  font-size:.78rem; font-style:italic !important; line-height:1.35;
  max-height:5.4em; overflow-y:auto;
}

/* Redesigned sensitive info visualization */
.sensitive-info-container{
  display:flex;
  flex-direction:column;
  gap:20px;
  margin-top:16px;
}
.sensitive-chart-wrapper{
  height:240px;
  margin-bottom:16px;
}
.sensitive-cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:12px;
}
@media (min-width:1200px){
  .sensitive-cards-grid{ grid-template-columns:repeat(6,1fr); }
}
.sensitive-card{
  display:flex;
  flex-direction:column;
  padding:14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
  transition:all .15s ease;
  position:relative;
  overflow:hidden;
}
.sensitive-card:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(15,23,42,.1);
}
.sensitive-card__icon{
  width:48px;
  height:48px;
  margin-bottom:8px;
  padding:10px;
  border-radius:10px;
  background:linear-gradient(135deg, rgba(var(--card-rgb), .1), rgba(var(--card-rgb), .2));
}
.sensitive-card__icon svg{
  width:100%;
  height:100%;
  fill:rgb(var(--card-rgb));
}
.sensitive-card__name{
  font-weight:600;
  font-size:.85rem;
  color:var(--text);
  margin-bottom:8px;
}
.sensitive-card__value{
  font-size:1.8rem;
  font-weight:700;
  color:rgb(var(--card-rgb));
  line-height:1;
  margin-bottom:4px;
}
.sensitive-card__label{
  font-size:.65rem;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.3px;
  margin-bottom:12px;
}
.sensitive-card__sparkline{
  height:40px;
  margin:8px -14px -14px;
  background:linear-gradient(to top, rgba(var(--card-rgb), .05), transparent);
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:space-around;
  padding:0 14px;
}
.sensitive-card__bar{
  width:20%;
  background:rgba(var(--card-rgb), .3);
  border-radius:2px 2px 0 0;
  transition:all .2s ease;
}
.sensitive-card__bar:hover{
  background:rgba(var(--card-rgb), .5);
}
.sensitive-card__bar-label{
  position:absolute;
  bottom:-14px;
  font-size:.55rem;
  color:var(--muted);
  width:100%;
  text-align:center;
}
.sensitive-card__trend{
  position:absolute;
  top:12px;
  right:12px;
  display:flex;
  align-items:center;
  gap:4px;
  padding:3px 8px;
  border-radius:12px;
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(4px);
  font-size:.65rem;
  font-weight:600;
}
.sensitive-card__trend.up{
  color:#1f7a4d;
  background:rgba(46,204,113,.12);
}
.sensitive-card__trend.down{
  color:#7a2b25;
  background:rgba(231,76,60,.12);
}
.sensitive-card__trend.flat{
  color:var(--muted);
  background:rgba(0,0,0,.05);
}