/* Extracted from state/_detail/index.html <style> block 4. Keep page-specific rules here until componentized. */
/* Analytics card wrappers — shown for their respective office tab only */
.analytics-card-wrap { display: none; }
.analytics-card-wrap.is-visible { display: block; }

/* ══ STATE ANALYTICS CARD ══════════════════════════════════════════════ */
.state-analytics-card{
  background:var(--bg-card);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);
  padding:1.2rem 1.4rem;
  box-shadow:var(--shadow-soft);
  min-width:0;
}
@media (max-width: 980px){
  .state-analytics-card{ padding: 1.05rem 1.05rem; }
}
.state-analytics-card .card-header{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:0.75rem; flex-wrap:wrap; margin-bottom:0.75rem;
}
.state-analytics-card .card-title{
  margin:0; font-size:1.25rem; font-weight:800;
  letter-spacing:-0.02em; color:var(--text-strong);
}
.state-analytics-card .badge{
  font-size:0.8rem; color:var(--text-muted); font-weight:600;
}
.state-analytics-card .card-help{
  margin-top: -0.35rem; margin-bottom: 0.9rem;
  font-size: 0.86rem; color: var(--text-muted); line-height: 1.35;
}

/* ══ ANALYTICS MAP CARD ═══════════════════════════════════════════════ */
.state-analytics-map{
  position:relative;
  width:100%;
  height: 420px; min-height: 340px;
  border-radius:18px;
  border:1px solid var(--border-subtle);
  overflow:hidden;
  box-shadow:var(--shadow-subtle);
  background:var(--bg-card-subtle);
  isolation:isolate;
  margin-top:0.6rem;
}
@media (max-width: 980px){ .state-analytics-map{ height: 380px; } }
@media (max-width: 520px){ .state-analytics-map{ height: 320px; min-height: 280px; } }

/* MapLibre canvas border-radius */
.state-analytics-map .maplibregl-canvas-container,
.state-analytics-map .maplibregl-canvas,
.state-analytics-map .maplibregl-canvas-container canvas,
.state-analytics-map .place-labels{ border-radius:18px; }
.state-analytics-map .maplibregl-canvas-container{ overflow:hidden; }
.state-analytics-map .maplibregl-control-container{ z-index:7; }

.analysis-legend{
  display:flex; align-items:center; gap:0.6rem;
  margin-top:0.75rem; font-size:0.78rem;
  font-weight:700; color:var(--text-muted);
}
.analysis-gradient{ flex:1; height:10px; border-radius:999px; }
.analysis-gradient.performance{ background: linear-gradient(90deg, #0076BA 0%, #ffffff 50%, #EE220C 100%); }
.analysis-gradient.remaining{   background: linear-gradient(90deg, rgba(253,224,71,0.45) 0%, rgb(194,65,12) 100%); }
.analysis-gradient.expected{    background: linear-gradient(90deg, #0076BA 0%, #ffffff 50%, #EE220C 100%); }

.kalawao-admin-note{
  display:none;
  margin-top:0.75rem;
  padding:0.78rem 0.92rem;
  border-radius:16px;
  border:1px dashed var(--border-subtle);
  background:var(--bg-card-subtle);
  color:var(--text-muted);
  font-size:0.86rem;
  font-weight:700;
  line-height:1.35;
}
.kalawao-admin-note.is-visible{ display:block; }

/* ══ ANALYSIS SUMMARY (statewide expected result) ══════════════════ */
.analysis-summary{
  display:none; align-items:center; justify-content:space-between;
  gap:0.8rem; flex-wrap:wrap; margin-top:0.75rem;
  padding:0.8rem 0.95rem; border-radius:16px;
  border:1px solid var(--border-subtle); background:var(--bg-card-subtle);
  box-shadow:var(--shadow-subtle);
}
.analysis-summary.is-visible{ display:flex; }
.analysis-summary-copy{ display:flex; flex-direction:column; gap:0.22rem; min-width:0; }
.analysis-summary-kicker{
  font-size:0.72rem; text-transform:uppercase; letter-spacing:0.12em;
  font-weight:800; color:var(--text-muted);
}
.analysis-summary-sub{ font-size:0.82rem; color:var(--text-muted); line-height:1.3; }
.analysis-summary-badge{
  display:inline-flex; align-items:center; gap:0.42rem; min-height:34px;
  padding:0.42rem 0.82rem; border-radius:999px; font-weight:950; font-size:0.92rem;
  line-height:1; letter-spacing:-0.01em; border:1px solid rgba(148,163,184,0.18);
  box-shadow:0 8px 22px rgba(15,23,42,0.10); white-space:nowrap;
}
.analysis-summary-badge.is-d{ background:rgba(59,130,246,0.14); color:var(--solid-d); border-color:rgba(59,130,246,0.28); }
.analysis-summary-badge.is-r{ background:rgba(239,68,68,0.14); color:var(--solid-r); border-color:rgba(239,68,68,0.28); }
.analysis-summary-badge.is-even{ background:rgba(148,163,184,0.14); color:var(--text-strong); border-color:rgba(148,163,184,0.22); }
.analysis-summary-dot{ width:10px; height:10px; border-radius:999px; flex:0 0 auto; background:currentColor; opacity:0.95; }
@media (prefers-color-scheme: dark){
  .analysis-summary-badge{ box-shadow:none; }
  .analysis-summary-badge.is-d{ background:rgba(59,130,246,0.18); border-color:rgba(96,165,250,0.34); }
  .analysis-summary-badge.is-r{ background:rgba(239,68,68,0.18); border-color:rgba(248,113,113,0.34); }
  .analysis-summary-badge.is-even{ background:rgba(148,163,184,0.18); border-color:rgba(148,163,184,0.26); }
}

/* Reset view button inside analytics map */
.state-analytics-map .reset-view-btn{
  position:absolute; left:14px; top:14px; z-index:5;
  border:1px solid var(--border-subtle); background:var(--bg-card);
  color:var(--text-strong); padding:0.45rem 0.7rem; border-radius:999px;
  font-weight:700; font-size:0.9rem; box-shadow:var(--shadow-soft);
  opacity:0; pointer-events:none; transform:translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
}
.state-analytics-map .reset-view-btn.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
.state-analytics-map .reset-view-btn:active{ transform:translateY(1px); }

/* ══ ANALYSIS FROST OVERLAY ═══════════════════════════════════════════ */
.analysis-frost-overlay{
  position:absolute; inset:0;
  display:none; align-items:center; justify-content:center;
  border-radius:18px;
  background: rgba(2,8,23,0.62);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index:6;
}
.analysis-frost-overlay.is-visible{ display:flex; }
.analysis-frost-card{
  background: rgba(15,23,42,0.88);
  border:1px solid rgba(148,163,184,0.22);
  border-radius:20px;
  padding:1.25rem 1.4rem;
  max-width: min(380px, calc(100% - 2.4rem));
  box-shadow: 0 24px 48px rgba(0,0,0,0.45);
}
body.dark .analysis-frost-card{ background: rgba(2,6,23,0.88); }
.analysis-frost-title{ font-size:1.14rem; font-weight:900; letter-spacing:-0.025em; color:#f8fafc; }
.analysis-frost-text{ margin-top:0.48rem; font-size:0.95rem; line-height:1.5; color:rgba(241,245,249,0.92); }
@media (max-width:520px){
  .analysis-frost-card{ padding:1rem 0.95rem; border-radius:18px; }
  .analysis-frost-title{ font-size:1rem; }
  .analysis-frost-text{ font-size:0.86rem; }
}

/* ══ JUMP LINK BUTTON ══════════════════════════════════════════════════ */
.jump-link-wrap{ display:flex; justify-content:center; margin-top:0.95rem; }
.jump-link-wrap.bottom{ margin-top:1rem; }
.jump-link-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:0.45rem; min-height:44px; padding:0.78rem 1.1rem;
  border-radius:999px; border:1px solid rgba(0,0,0,0.12);
  background:var(--bg-card-subtle); color:var(--text-strong); text-decoration:none;
  font-weight:800; letter-spacing:-0.01em; box-shadow:var(--shadow-subtle);
  transition:transform .16s ease, box-shadow .16s ease;
}
body.dark .jump-link-btn{ border-color:rgba(255,255,255,0.12); }
.jump-link-btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow-soft); }
.jump-link-btn:active{ transform:translateY(0); }

/* ══ COUNTY TOOLTIP ════════════════════════════════════════════════════ */
.county-tooltip{
  position:absolute; left:0; top:0; z-index:20;
  pointer-events:none; opacity:0;
  transform: translate(-50%, calc(-100% - 14px));
  transition: opacity 90ms ease, transform 120ms ease;
  padding:0.72rem 0.8rem; border-radius:16px;
  border:1px solid rgba(148,163,184,0.22);
  background: rgba(255,255,255,0.94); color:#111827;
  box-shadow: 0 18px 42px rgba(15,23,42,0.18);
  white-space:normal; width:min(340px, calc(100vw - 24px));
  max-width:min(340px, calc(100vw - 24px)); overflow:hidden;
  font-weight:850; letter-spacing:-0.01em; font-size:0.92rem; line-height:1.15;
}
.county-tooltip.show{
  opacity:1; pointer-events:auto;
  transform: translate(-50%, calc(-100% - 16px));
}
.county-tooltip::after{
  content:""; position:absolute; left:50%; bottom:-8px;
  transform: translateX(-50%); width:0; height:0;
  border-left:8px solid transparent; border-right:8px solid transparent;
  border-top:8px solid rgba(255,255,255,0.94);
  filter: drop-shadow(0 4px 10px rgba(15,23,42,0.12));
}
.county-tooltip.below{ transform: translate(-50%, 16px); }
.county-tooltip.edge-left,
.county-tooltip.edge-left.show{ transform: translate(0, calc(-100% - 16px)); }
.county-tooltip.edge-right,
.county-tooltip.edge-right.show{ transform: translate(-100%, calc(-100% - 16px)); }
.county-tooltip.below.edge-left,
.county-tooltip.below.edge-left.show{ transform: translate(0, 16px); }
.county-tooltip.below.edge-right,
.county-tooltip.below.edge-right.show{ transform: translate(-100%, 16px); }
.county-tooltip.mobile-popout,
.county-tooltip.mobile-popout.show{
  position:fixed; transform:none;
  width:min(320px, calc(100vw - 16px)); max-width:min(320px, calc(100vw - 16px));
}
.county-tooltip.mobile-popout::after{ display:none; }
.county-tooltip.edge-left::after{ left:24px; transform:none; }
.county-tooltip.edge-right::after{ left:auto; right:24px; transform:none; }
.county-tooltip.below::after{
  bottom:auto; top:-8px; border-top:0;
  border-bottom:8px solid rgba(255,255,255,0.94);
  filter: drop-shadow(0 6px 12px rgba(15,23,42,0.10));
}
@media (prefers-color-scheme: dark){
  .county-tooltip{
    background: rgba(2,6,23,0.92); color:#e5e7eb;
    border-color: rgba(148,163,184,0.18); box-shadow: 0 22px 46px rgba(0,0,0,0.42);
  }
  .county-tooltip::after{
    border-top-color: rgba(2,6,23,0.92);
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.55));
  }
  .county-tooltip.below::after{
    border-bottom-color: rgba(2,6,23,0.92);
    filter: drop-shadow(0 8px 14px rgba(0,0,0,0.55));
  }
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .county-tooltip{ -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}
@media (max-width: 640px){
  .county-tooltip{
    font-size:0.85rem; padding:0.72rem 0.78rem;
    width:min(340px, calc(100vw - 16px)); max-width:min(340px, calc(100vw - 16px));
    max-height:min(60vh, 360px); overflow:auto; -webkit-overflow-scrolling:touch;
    border-radius:15px;
  }
  .county-tooltip .ct-summary{ gap:0.34rem; }
  .county-tooltip .ct-chip{ min-height:26px; }
}
.county-tooltip .ct-head{
  font-weight:1000; font-size:0.98rem; letter-spacing:-0.01em; line-height:1.15;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.county-tooltip .ct-top{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:0.65rem; margin-bottom:0.48rem;
}
.county-tooltip .ct-summary{ display:flex; flex-wrap:wrap; gap:0.38rem; margin:0 0 0.55rem 0; }
.county-tooltip .ct-chip{
  display:inline-flex; align-items:center; gap:0.28rem; min-height:24px;
  padding:0.2rem 0.5rem; border-radius:999px;
  background: rgba(148,163,184,0.12); border:1px solid rgba(148,163,184,0.18);
  color: var(--text-muted); font-weight:900; font-size:0.74rem; line-height:1;
}
@media (prefers-color-scheme: dark){
  .county-tooltip .ct-chip{ background: rgba(148,163,184,0.14); border-color: rgba(148,163,184,0.16); }
}
.county-tooltip .ct-rows{ display:flex; flex-direction:column; gap:0.36rem; margin-bottom:0.52rem; }
.county-tooltip .ct-row{
  display:grid; grid-template-columns: minmax(0,1fr) auto;
  align-items:center; gap:0.7rem;
  font-weight:850; font-size:0.84rem; padding:0.38rem 0.06rem; border-radius:12px;
}
.county-tooltip .ct-row + .ct-row{ border-top:1px solid rgba(148,163,184,0.14); }
.county-tooltip .ct-left{ display:flex; align-items:center; gap:0.48rem; min-width:0; }
.county-tooltip .ct-dot{
  width:10px; height:10px; border-radius:999px; flex:0 0 auto;
  box-shadow: 0 0 0 1px rgba(17,24,39,0.12);
}
@media (prefers-color-scheme: dark){
  .county-tooltip .ct-dot{ box-shadow: 0 0 0 1px rgba(255,255,255,0.18); }
}
.county-tooltip .ct-name{ overflow:hidden; text-overflow:ellipsis; }
.county-tooltip .ct-party{
  margin-top:2px; font-size:0.72rem; font-weight:800; line-height:1.1; color: var(--text-muted);
}
.county-tooltip .ct-right{
  display:flex; flex-direction:column; align-items:flex-end;
  gap:0.08rem; text-align:right; flex:0 0 auto;
}
.county-tooltip .ct-pct{ font-size:0.84rem; font-weight:950; line-height:1.05; }
.county-tooltip .ct-pct.is-d{ color: #0076BA; }
.county-tooltip .ct-pct.is-r{ color: #EE220C; }
.county-tooltip .ct-votes{ font-size:0.72rem; font-weight:850; color: var(--text-muted); line-height:1.05; }
.county-tooltip .ct-note{ color: var(--text-muted); font-weight:800; font-size:0.8rem; line-height:1.2; }
.county-tooltip .ct-expected-wrap{
  display:flex; flex-direction:column; align-items:flex-start; gap:0.4rem;
}
.county-tooltip .ct-expected-badge{
  display:inline-flex; align-items:center; gap:0.38rem; min-height:30px;
  padding:0.34rem 0.72rem; border-radius:999px; font-weight:950; font-size:0.86rem;
  line-height:1; letter-spacing:-0.01em; border:1px solid rgba(148,163,184,0.18);
  box-shadow:0 8px 22px rgba(15,23,42,0.10);
}
.county-tooltip .ct-expected-badge.is-d{ background:rgba(59,130,246,0.14); color:var(--solid-d); border-color:rgba(59,130,246,0.28); }
.county-tooltip .ct-expected-badge.is-r{ background:rgba(239,68,68,0.14); color:var(--solid-r); border-color:rgba(239,68,68,0.28); }
.county-tooltip .ct-expected-badge.is-even{ background:rgba(148,163,184,0.14); color:var(--text-strong); border-color:rgba(148,163,184,0.22); }
.county-tooltip .ct-expected-dot{ width:9px; height:9px; border-radius:999px; flex:0 0 auto; background:currentColor; opacity:0.95; }
.county-tooltip .ct-expected-sub{ font-size:0.74rem; font-weight:850; color:var(--text-muted); line-height:1.15; }
@media (prefers-color-scheme: dark){
  .county-tooltip .ct-expected-badge{ box-shadow:none; }
  .county-tooltip .ct-expected-badge.is-d{ background:rgba(59,130,246,0.18); border-color:rgba(96,165,250,0.34); }
  .county-tooltip .ct-expected-badge.is-r{ background:rgba(239,68,68,0.18); border-color:rgba(248,113,113,0.34); }
  .county-tooltip .ct-expected-badge.is-even{ background:rgba(148,163,184,0.18); border-color:rgba(148,163,184,0.26); }
}
.county-tooltip .ct-badge{
  display:inline-flex; align-items:center; gap:6px; margin-left:8px; padding:3px 8px;
  border-radius:999px; font-size:0.72rem; font-weight:900; line-height:1;
  background: rgba(100,196,102,0.14); color: var(--projection-green);
  border: 1px solid rgba(100,196,102,0.28);
}
@media (max-width: 520px){
  .county-tooltip .ct-top{ flex-direction:column; align-items:flex-start; gap:0.36rem; }
  .county-tooltip .ct-head,
  .county-tooltip .ct-note,
  .county-tooltip .ct-name,
  .county-tooltip .ct-party,
  .county-tooltip .ct-votes{ white-space:normal; }
  .county-tooltip .ct-row{ gap:0.55rem; padding:0.34rem 0; }
  .county-tooltip .ct-pct{ font-size:0.8rem; }
  .county-tooltip .ct-votes{ font-size:0.7rem; }
}