/* HODO brand tokens — per Quick-Use Cheat Sheet */
:root {
  --brand-blue: #0078BF;
  --brand-pink: #E44C9A;
  --brand-amber: #D97706;
  --brand-red: #B42318;
  --brand-green: #059669;
  --text-primary: #111827;
  --text-secondary: #6B7280;
  --bg-app: #F7F9FC;
  --bg-card: #FFFFFF;
  --border: #E5E7EB;
  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
}
@media (prefers-color-scheme: dark) {
  :root {
    --text-primary: #E5E7EB;
    --text-secondary: #9CA3AF;
    --bg-app: #0B1220;
    --bg-card: #111A2C;
    --border: #1F2937;
  }
}

* { box-sizing: border-box; }
body { font-family: Raleway, system-ui, -apple-system, Segoe UI, sans-serif;
       margin: 0; color: var(--text-primary); background: var(--bg-app); }
a { color: var(--brand-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-weight: 600; color: var(--text-primary); }

/* Landing / login */
body.landing { display: grid; place-items: center; min-height: 100vh; padding: 20px; }
.login-card { max-width: 420px; background: var(--bg-card); padding: 40px;
              border-radius: 12px; box-shadow: var(--shadow); text-align: center; }
.login-card h1 { margin: 0 0 8px; font-size: 22px; }
.login-card .tagline { color: var(--text-secondary); margin: 0 0 24px; }
.login-card .signin-hint { font-size: 14px; margin: 24px 0 12px; }
.btn { display: inline-block; padding: 12px 24px; border-radius: 8px;
       border: 1px solid var(--border); background: var(--bg-card);
       color: var(--text-primary); cursor: pointer; font-family: inherit;
       font-size: 14px; text-decoration: none; }
.btn-primary { background: var(--brand-blue); color: white; border-color: var(--brand-blue); }
.btn-primary:hover { background: #005a90; color: white; }
.btn-ghost { background: transparent; }
.login-card .access-note { font-size: 12px; color: var(--text-secondary);
                            margin-top: 20px; line-height: 1.5; }
.login-card footer { margin-top: 30px; font-size: 11px; color: var(--text-secondary); }

/* Dashboard */
body.dashboard { padding: 0; }
.topbar { display: flex; align-items: center; gap: 32px;
          background: var(--bg-card); padding: 12px 24px;
          border-bottom: 1px solid var(--border); box-shadow: var(--shadow); }
.brand { font-weight: 700; color: var(--brand-blue); font-size: 18px; }
.tabs { display: flex; gap: 24px; margin-left: 24px; flex: 1; }
.tabs a { color: var(--text-secondary); padding: 6px 0;
          border-bottom: 2px solid transparent; }
.tabs a.active, .tabs a:hover { color: var(--brand-blue); border-color: var(--brand-blue); }
.userchip { font-size: 13px; color: var(--text-secondary); }

.filter-bar { display: flex; gap: 16px; padding: 12px 24px; align-items: center;
              flex-wrap: wrap; background: var(--bg-card);
              border-bottom: 1px solid var(--border); }
.filter-bar label { font-size: 12px; color: var(--text-secondary); display: flex;
                    flex-direction: column; gap: 4px; }
.filter-bar select { padding: 6px 10px; border: 1px solid var(--border);
                     border-radius: 6px; background: var(--bg-card);
                     color: var(--text-primary); font-family: inherit; font-size: 13px; }
.filter-bar label.overlay { flex-direction: row; align-items: center;
                             margin-top: 16px; font-size: 13px; color: var(--text-primary); }

.chart-grid { display: grid; grid-template-columns: repeat(2, 1fr);
              gap: 20px; padding: 20px; max-width: 1600px; margin: 0 auto; }
.chart-card { background: var(--bg-card); padding: 16px; border-radius: 10px;
              box-shadow: var(--shadow); border: 1px solid var(--border); }
.chart-card h2 { margin: 0 0 8px; font-size: 14px; color: var(--text-primary); }
.chart-card h2 .chart-sub {
  display: inline-block;
  margin-left: 8px;
  font-size: 11px;
  font-weight: 400;
  color: var(--text-secondary, #6b7280);
  letter-spacing: 0.01em;
}
.chart { width: 100%; }
@media (max-width: 900px) {
  .chart-grid { grid-template-columns: 1fr; padding: 12px; }
  .chart { height: 280px !important; }
  .filter-bar { padding: 12px; gap: 10px; }
}

.dashboard-footer { padding: 20px; text-align: center; font-size: 11px;
                     color: var(--text-secondary); }

/* ---- Header user chip cluster (userchip + signin/signout buttons) ---- */
.userchip-wrap { display: flex; align-items: center; gap: 10px; }
.btn-signin, .btn-signout { padding: 6px 14px; font-size: 13px; font-weight: 600; }

/* ---- Explore-mode banner ---- */
.explore-banner {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(90deg, rgba(228,76,154,0.10), rgba(0,120,191,0.06));
  border-bottom: 1px solid var(--border);
  padding: 10px 24px; font-size: 13px; color: var(--text-primary);
}
.explore-dot { width: 8px; height: 8px; border-radius: 50%;
               background: var(--brand-pink); box-shadow: 0 0 0 4px rgba(228,76,154,0.18);
               animation: pulse 2s infinite ease-in-out; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(228,76,154,0.18); }
  50%      { box-shadow: 0 0 0 8px rgba(228,76,154,0.08); }
}
.explore-text { flex: 1; color: var(--text-secondary); }
.explore-text strong { color: var(--text-primary); }
.explore-text em { font-style: normal; color: var(--brand-pink); font-weight: 600; }
.btn-sm { padding: 5px 12px; font-size: 12px; }
@media (max-width: 700px) {
  .explore-banner { flex-wrap: wrap; padding: 10px 12px; font-size: 12px; }
  .explore-text { flex: 1 1 100%; }
}

/* ---- Sample-data badge on chart cards ---- */
.chart-card { position: relative; }
.sample-badge {
  position: absolute; top: 12px; right: 16px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--brand-pink);
  background: rgba(228, 76, 154, 0.10);
  border: 1px solid rgba(228, 76, 154, 0.35);
  border-radius: 999px; padding: 3px 10px;
  pointer-events: none;
}

/* ---- Sign-in modal ---- */
.signin-modal { position: fixed; inset: 0; z-index: 1000;
                display: grid; place-items: center; padding: 20px; }
.signin-modal-backdrop { position: absolute; inset: 0;
                         background: rgba(11, 18, 32, 0.55);
                         backdrop-filter: blur(4px);
                         animation: fadein 0.25s ease; }
.signin-modal-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 420px;
  background: var(--bg-card); color: var(--text-primary);
  padding: 32px 32px 24px; border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35), 0 4px 10px rgba(0,0,0,0.15);
  text-align: center;
  animation: pop 0.28s cubic-bezier(.2,.9,.35,1.2);
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop    { from { opacity: 0; transform: translateY(12px) scale(0.96); }
                    to   { opacity: 1; transform: translateY(0)    scale(1); } }
.signin-modal-close {
  position: absolute; top: 10px; right: 14px;
  background: transparent; border: 0; font-size: 24px; line-height: 1;
  color: var(--text-secondary); cursor: pointer; padding: 4px 10px;
  border-radius: 6px;
}
.signin-modal-close:hover { background: rgba(0,0,0,0.05); color: var(--text-primary); }
.signin-modal-card h2 { margin: 4px 0 8px; font-size: 20px; color: var(--brand-blue); }
.signin-modal-sub { font-size: 14px; color: var(--text-secondary);
                     margin: 0 0 20px; line-height: 1.5; }
.signin-modal-note { font-size: 12px; color: var(--text-secondary); margin-top: 18px; }

/* Modal form (mirrors landing form) */
.signin-modal-card .login-form { display: flex; flex-direction: column; gap: 10px; }
.signin-modal-card .login-form input[type="email"] {
  width: 100%; padding: 12px 14px; font-size: 15px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-card); color: var(--text-primary);
  font-family: inherit; box-sizing: border-box;
}
.signin-modal-card .login-form input[type="email"]:focus {
  outline: none; border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(0, 120, 191, 0.15);
}
.signin-modal-card .login-msg { font-size: 13px; margin: 8px 0 0; min-height: 18px; }
.signin-modal-card .login-msg.err { color: var(--brand-red); }
.signin-modal-card .login-msg.ok  { color: var(--brand-green); }

.btn-link {
  background: transparent; border: 0; padding: 0;
  color: var(--brand-blue); cursor: pointer; font-family: inherit;
  font-size: 12px; text-decoration: underline;
}
.btn-link:hover { color: #005a90; }

body.modal-open { overflow: hidden; }

/* ═══════════════════════════════════════════════════════════════════════════
   TIER 0 · ATTENTION BAND
   A horizontal strip of P1 alert pills above the filter bar.
   Triggered alerts (red/amber) pulse and expand. Clear alerts are subtle.
════════════════════════════════════════════════════════════════════════════ */
.attention-band {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 24px; overflow-x: auto;
  background: var(--bg-card);
  border-bottom: 2px solid var(--brand-pink);
  flex-wrap: nowrap; -webkit-overflow-scrolling: touch;
}
.attention-band-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-secondary);
  white-space: nowrap; flex-shrink: 0; margin-right: 6px;
}
.attention-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  border: 1.5px solid transparent; cursor: default;
  transition: transform 0.15s;
  flex-shrink: 0;
}
.attention-pill:hover { transform: translateY(-1px); }

/* Clear (not triggered) — always styled green regardless of "level" */
.attention-pill.clear {
  background: rgba(5,150,105,0.07);
  border-color: rgba(5,150,105,0.25);
  color: var(--brand-green);
}

/* Triggered RED */
.attention-pill.triggered.red {
  background: rgba(180,35,24,0.10);
  border-color: rgba(180,35,24,0.45);
  color: #B42318;
  animation: attention-pulse-red 2.2s ease infinite;
}
@keyframes attention-pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(180,35,24,0); }
  50%       { box-shadow: 0 0 0 5px rgba(180,35,24,0.12); }
}

/* Triggered AMBER */
.attention-pill.triggered.amber {
  background: rgba(217,119,6,0.10);
  border-color: rgba(217,119,6,0.40);
  color: var(--brand-amber);
}

/* Triggered GREEN (new complaint — always show count, even if 0) */
.attention-pill.triggered.green {
  background: rgba(5,150,105,0.10);
  border-color: rgba(5,150,105,0.40);
  color: var(--brand-green);
}

.attention-pill .pill-icon { font-size: 11px; }
.attention-pill .pill-value {
  font-weight: 700; color: inherit;
  border-left: 1px solid currentColor; margin-left: 2px;
  padding-left: 6px; opacity: 0.85;
}

/* Refresh indicator — spinning dot top-right of the band */
.attention-refresh {
  margin-left: auto; flex-shrink: 0;
  font-size: 11px; color: var(--text-secondary);
  display: flex; align-items: center; gap: 5px;
}
.attention-refresh-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand-green);
}
.attention-refresh-dot.spinning {
  animation: attention-spin 1s linear infinite;
  background: var(--brand-amber);
}
@keyframes attention-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 700px) {
  .attention-band { padding: 8px 12px; gap: 6px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIER 1 · SCORECARD TILES (overview.html)
   Compact KPI cards: big number + delta chip + sparkline stub
════════════════════════════════════════════════════════════════════════════ */
.scorecard-grid {
  display: grid;
  /* Honour --cols override from inline style (pnl.html uses --cols:4) */
  grid-template-columns: repeat(var(--cols, auto-fill), minmax(240px, 1fr));
  gap: 16px; padding: 20px; max-width: 1600px; margin: 0 auto;
}
/* Alert-state left-border tint on tiles */
.scorecard-tile.warn   { border-left: 4px solid var(--brand-amber); }
.scorecard-tile.danger { border-left: 4px solid var(--brand-red);   }
.scorecard-tile {
  background: var(--bg-card); border-radius: 10px;
  border: 1px solid var(--border); box-shadow: var(--shadow);
  padding: 18px 20px; display: flex; flex-direction: column; gap: 6px;
  position: relative;
}
.scorecard-tile .tile-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-secondary);
}
.scorecard-tile .tile-value {
  font-size: 28px; font-weight: 800; color: var(--text-primary);
  line-height: 1.1; letter-spacing: -0.01em;
}
.scorecard-tile .tile-sub {
  font-size: 12px; color: var(--text-secondary); line-height: 1.4;
}
.tile-delta {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 12px; font-weight: 600; padding: 2px 8px;
  border-radius: 999px; width: fit-content;
}
.tile-delta.up   { background: rgba(5,150,105,0.10); color: var(--brand-green); }
.tile-delta.down { background: rgba(180,35,24,0.10); color: var(--brand-red);  }
.tile-delta.flat { background: rgba(107,114,128,0.10); color: var(--text-secondary); }

/* Per-branch mini breakdown inside each tile */
.tile-branches {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 4px 10px; margin-top: 6px;
  padding-top: 8px; border-top: 1px solid var(--border);
}
.tile-branch-row {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; color: var(--text-secondary);
}
.tile-branch-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.tile-branch-dot.aurora  { background: #0078BF; }
.tile-branch-dot.beacon { background: #E44C9A; }
.tile-branch-dot.cedar   { background: #D97706; }
.tile-branch-dot.delta    { background: #059669; }
.tile-branch-val { font-weight: 600; color: var(--text-primary); margin-left: auto; }

/* Tile state tints (warn / danger) */
.tile-state-warn   { border-left: 3px solid var(--brand-amber); }
.tile-state-danger { border-left: 3px solid var(--brand-red);   }

/* Section divider inside overview grid */
.overview-section-label {
  grid-column: 1 / -1;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--text-secondary);
  padding: 4px 0 0; border-top: 1px solid var(--border);
}
.overview-section-label:first-child { border-top: none; padding-top: 0; }

.section-header {
  padding: 20px 20px 4px; max-width: 1600px; margin: 0 auto;
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-secondary);
  border-bottom: 1px solid var(--border);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIER 1 · COMPARATIVE BRANCH SCORECARD (comparative.html)
   Full-width table. 4 branch columns. Colour-coded cells.
════════════════════════════════════════════════════════════════════════════ */
.comparative-wrap {
  padding: 20px; max-width: 1400px; margin: 0 auto;
}
.comparative-intro {
  font-size: 13px; color: var(--text-secondary); margin: 0 0 16px;
}
.branch-scorecard {
  width: 100%; border-collapse: separate; border-spacing: 0;
  border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
  background: var(--bg-card); box-shadow: var(--shadow);
}
.branch-scorecard th, .branch-scorecard td {
  padding: 12px 16px; text-align: right; font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.branch-scorecard th { font-weight: 700; font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-secondary); background: var(--bg-app);
  text-align: center; }
.branch-scorecard td:first-child, .branch-scorecard th:first-child {
  text-align: left; font-weight: 600; color: var(--text-primary); min-width: 200px; }
.branch-scorecard tr:last-child td { border-bottom: 0; }
.branch-scorecard tbody tr:hover td { background: rgba(0,120,191,0.03); }

/* Branch header colours */
.branch-scorecard .col-aurora  { color: #0078BF; }
.branch-scorecard .col-beacon { color: #E44C9A; }
.branch-scorecard .col-cedar   { color: #D97706; }
.branch-scorecard .col-delta    { color: #059669; }

/* Cell colour states */
.cell-green  { color: var(--brand-green);  font-weight: 700; }
.cell-amber  { color: var(--brand-amber);  font-weight: 600; }
.cell-red    { color: var(--brand-red);    font-weight: 700; }
.cell-neutral{ color: var(--text-primary); }

/* Best-in-class badge */
.best-badge {
  display: inline-flex; align-items: center;
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(5,150,105,0.12); color: var(--brand-green);
  border: 1px solid rgba(5,150,105,0.35); border-radius: 999px;
  padding: 1px 6px; margin-left: 5px; vertical-align: middle;
}
/* Laggard flag */
.laggard-flag {
  display: inline-flex; align-items: center;
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(180,35,24,0.10); color: var(--brand-red);
  border: 1px solid rgba(180,35,24,0.35); border-radius: 999px;
  padding: 1px 6px; margin-left: 5px; vertical-align: middle;
}
/* N/A cell */
.cell-na { color: var(--text-secondary); }

.comparative-refresh {
  font-size: 11px; color: var(--text-secondary);
  margin-top: 8px; text-align: right;
}

/* Section header row (used on comparative + overview pages) */
.comparative-wrap .section-header {
  display: flex; align-items: baseline; gap: 12px;
  padding: 0 0 14px; border-bottom: none; max-width: none;
}
.comparative-wrap .section-header h1 {
  font-size: 20px; font-weight: 700; color: var(--text-primary);
  letter-spacing: normal; text-transform: none; margin: 0;
}
.section-asof {
  font-size: 11px; color: var(--text-secondary); font-weight: 400;
}

/* Scrollable wrapper for the table on small screens */
.scorecard-table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}

/* Branch header column colours */
.branch-scorecard th.aurora  { color: #0078BF; }
.branch-scorecard th.beacon { color: #E44C9A; }
.branch-scorecard th.cedar   { color: #D97706; }
.branch-scorecard th.delta    { color: #059669; }

/* Legend below the table */
.scorecard-legend {
  display: flex; flex-wrap: wrap; gap: 16px;
  margin-top: 12px; font-size: 11px; color: var(--text-secondary);
}
.legend-item { display: flex; align-items: center; gap: 5px; }
.legend-swatch {
  width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0;
}
.swatch-green { background: var(--brand-green); }
.swatch-amber { background: var(--brand-amber); }
.swatch-red   { background: var(--brand-red);   }
.swatch-na    { background: var(--border); }

@media (max-width: 800px) {
  .branch-scorecard th, .branch-scorecard td { padding: 10px 10px; font-size: 12px; }
  .branch-scorecard td:first-child, .branch-scorecard th:first-child { min-width: 140px; }
  .comparative-wrap { padding: 12px; }
}

/* ---- Fix: [hidden] attribute must always win over author display rules.
       Without this, `.signin-modal { display: grid }` and
       `.explore-banner { display: flex }` override the UA `[hidden]{display:none}`
       and the elements stay visible after `el.hidden = true`. ---- */
[hidden] { display: none !important; }