/* Bagyo Serye v1.3.3A — shared visual language and corrective-release overrides */
:root {
  --bs-canvas: #05111e;
  --bs-surface: rgba(9, 28, 46, .9);
  --bs-surface-raised: rgba(14, 40, 62, .92);
  --bs-surface-soft: rgba(29, 70, 94, .32);
  --bs-border: rgba(143, 207, 235, .19);
  --bs-border-strong: rgba(124, 221, 255, .34);
  --bs-text: #eef9ff;
  --bs-muted: #9eb8c8;
  --bs-cyan: #52d9ff;
  --bs-blue: #5a8cff;
  --bs-violet: #a787ff;
  --bs-amber: #ffd260;
  --bs-red: #ff536d;
  --bs-green: #60e6aa;
  --bs-radius-sm: 10px;
  --bs-radius: 16px;
  --bs-radius-lg: 24px;
  --bs-shadow: 0 18px 55px rgba(0, 4, 12, .32), inset 0 1px rgba(255,255,255,.025);
  --bs-title: clamp(1.42rem, 1.06rem + 1.25vw, 2.25rem);
  --bs-section: clamp(1.05rem, .98rem + .35vw, 1.34rem);
  --bs-body: clamp(.9rem, .87rem + .12vw, .98rem);
}

html { background: var(--bs-canvas); color-scheme: dark; }
body { background: radial-gradient(circle at 18% -8%, rgba(31,107,151,.2), transparent 34%), var(--bs-canvas); color: var(--bs-text); }
.main { min-width: 0; }
.topbar { border-bottom: 1px solid var(--bs-border); background: rgba(5,17,30,.82); backdrop-filter: blur(20px); }
.topbar h1 { font-size: var(--bs-title); letter-spacing: -.025em; }
.eyebrow, .card-head small, .page-toolbar small { letter-spacing: .095em; color: #89b9cf; }
.glass, .weather-app-card, .source-catalog-grid > a {
  border: 1px solid var(--bs-border);
  background: linear-gradient(145deg, rgba(15,43,65,.92), rgba(7,23,39,.9));
  border-radius: var(--bs-radius);
  box-shadow: var(--bs-shadow);
}
.glass:hover, .weather-app-card:hover { border-color: var(--bs-border-strong); }
.card-head strong, .page-toolbar h2 { letter-spacing: -.012em; }
.badge, .live-pill, .trend, .status-dot { border-radius: 999px; font-weight: 750; letter-spacing: .055em; }
button, a, select, input, textarea { font: inherit; }
button, .button-link { min-height: 38px; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(82,217,255,.72);
  outline-offset: 3px;
}

.view { position: relative; isolation: isolate; min-width: 0; }
.view::before { content:""; position:absolute; z-index:-1; inset:-18px -18px auto; height:420px; border-radius:28px; pointer-events:none; opacity:.75; }
.view > * { position: relative; z-index: 1; }
#dashboard-view::before { background: radial-gradient(circle at 72% 32%, rgba(56,148,213,.22) 0 7%, transparent 8% 13%, rgba(56,148,213,.11) 14% 14.6%, transparent 15%), linear-gradient(135deg, rgba(28,105,153,.18), transparent 62%); }
#emergency-view::before { background: linear-gradient(110deg, rgba(112,24,46,.24), transparent 58%), repeating-linear-gradient(90deg, transparent 0 54px, rgba(255,83,109,.025) 55px 56px); }
#forecast-view::before { background: radial-gradient(ellipse at 18% 28%, rgba(126,177,214,.2), transparent 24%), repeating-linear-gradient(112deg, transparent 0 23px, rgba(82,217,255,.045) 24px 25px); }
#cyclones-view::before { background: conic-gradient(from 230deg at 72% 35%, transparent, rgba(112,103,232,.2), transparent 28%, rgba(82,217,255,.12), transparent 55%); }
#studio-view::before { background: radial-gradient(circle, rgba(93,205,255,.09) 1.5px, transparent 1.7px), linear-gradient(120deg, rgba(90,140,255,.16), transparent 55%); background-size:24px 24px,auto; }
#reports-view::before { background: linear-gradient(135deg, rgba(74,136,192,.18), transparent 60%), repeating-linear-gradient(0deg, transparent 0 31px, rgba(158,184,200,.035) 32px); }
#sources-view::before { background: linear-gradient(90deg, rgba(82,217,255,.035) 1px, transparent 1px), linear-gradient(rgba(82,217,255,.035) 1px, transparent 1px), radial-gradient(circle at 20% 15%, rgba(32,140,121,.18), transparent 35%); background-size:34px 34px,34px 34px,auto; }

/* Earthquake alert identity and strongest-event hierarchy */
.earthquake-panel { overflow: hidden; }
.earthquake-symbol { display:grid; place-items:center; width:40px; height:40px; border-radius:50%; color:#fff; background:radial-gradient(circle, rgba(255,83,109,.42), rgba(255,83,109,.09)); border:1px solid rgba(255,83,109,.45); box-shadow:0 0 26px rgba(255,83,109,.2); }
.earthquake-list { display:grid; gap:10px; }
.earthquake-alert-lead { display:grid; grid-template-columns:auto minmax(0,1fr); gap:16px; align-items:center; padding:18px; border:1px solid rgba(255,114,125,.38); border-radius:var(--bs-radius); background:linear-gradient(135deg, rgba(110,29,47,.58), rgba(16,36,55,.88)); box-shadow:0 18px 42px rgba(29,2,12,.24); }
.earthquake-alert-lead .magnitude { min-width:84px; text-align:center; }
.earthquake-alert-lead .magnitude small { display:block; color:#ffc4cc; letter-spacing:.12em; font-weight:800; }
.earthquake-alert-lead .magnitude strong { display:block; font-size:2.35rem; line-height:1; color:#fff; }
.earthquake-alert-lead h3 { margin:0 0 7px; font-size:1.1rem; }
.earthquake-alert-lead p { margin:4px 0; color:var(--bs-muted); }
.earthquake-alert-lead a, .earthquake-card a { color:#8ee7ff; font-weight:700; }
.earthquake-secondary-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.earthquake-card { min-width:0; border-left:3px solid var(--bs-amber); background:rgba(6,24,40,.78); }
.earthquake-card .event-rank { color:#ffcad0; font-size:.68rem; letter-spacing:.12em; font-weight:800; }
.earthquake-cache-note { display:inline-flex; margin-top:8px; border:1px solid rgba(255,210,96,.32); border-radius:999px; padding:3px 8px; color:#ffe6a3; font-size:.72rem; }

/* Emergency identity, grouping, and verified actions */
.emergency-hero-copy { display:flex; align-items:center; gap:18px; min-width:0; }
.emergency-hero-copy > img { width:76px; height:76px; object-fit:contain; filter:drop-shadow(0 8px 18px rgba(0,0,0,.28)); }
.emergency-contact-grid { display:block; }
.emergency-directory-section { margin:22px 0 0; }
.emergency-directory-section > h3 { margin:0 0 10px; color:#bdefff; font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; }
.emergency-directory-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.emergency-directory-section:first-child .emergency-directory-cards { grid-template-columns:minmax(0,1fr); }
.emergency-contact-card { min-width:0; display:flex; flex-direction:column; justify-content:space-between; border:1px solid var(--bs-border); border-radius:var(--bs-radius); background:linear-gradient(145deg,rgba(14,42,64,.92),rgba(7,23,38,.94)); box-shadow:var(--bs-shadow); padding:17px; }
.emergency-contact-card.dispatch { border-color:rgba(255,83,109,.5); background:linear-gradient(140deg,rgba(110,26,44,.55),rgba(9,27,44,.95)); }
.emergency-contact-card.office { border-color:var(--bs-border); background:linear-gradient(145deg,rgba(14,42,64,.92),rgba(7,23,38,.94)); }
.emergency-agency-head { display:flex; align-items:center; gap:13px; }
.emergency-agency-logo { width:58px; height:58px; flex:0 0 58px; border-radius:14px; padding:6px; object-fit:contain; background:rgba(255,255,255,.94); box-shadow:inset 0 0 0 1px rgba(255,255,255,.55),0 8px 24px rgba(0,0,0,.22); }
.emergency-agency-head h3 { font-size:1rem; line-height:1.2; margin:3px 0; }
.emergency-agency-head small { color:var(--bs-cyan); }
.emergency-parent { display:block; color:var(--bs-muted); font-size:.75rem; }
.emergency-contact-number { align-items:flex-end; gap:12px; margin:16px 0 10px; }
.emergency-contact-number strong { font-size:1.2rem; overflow-wrap:anywhere; }
.emergency-contact-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }
.emergency-contact-actions button, .emergency-contact-actions a { display:inline-flex; align-items:center; justify-content:center; min-height:36px; padding:7px 11px; border-radius:9px; border:1px solid var(--bs-border-strong); background:rgba(18,55,79,.8); color:#eafaff; text-decoration:none; font-weight:750; }
.emergency-contact-actions a.priority-call { background:var(--bs-red); border-color:#ff7b8d; color:#fff; box-shadow:0 8px 24px rgba(255,83,109,.22); }
.emergency-contact-actions a.office-call { color:#bdefff; }
.emergency-contact-meta { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
.emergency-contact-meta span { border-radius:9px; background:rgba(30,75,99,.31); color:#b9d0dc; overflow-wrap:anywhere; }
.emergency-contact-source { display:block !important; margin-top:12px; padding-top:10px; border-top:1px solid var(--bs-border); }
.emergency-contact-source a { display:inline-block; white-space:normal; }
.emergency-contact-source span { display:block; margin-top:6px; color:var(--bs-muted); font-size:.75rem; }

/* Real wind-flow visibility and lifecycle state */
.wind-control-bar { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:9px 0; padding:9px 11px; border:1px solid rgba(82,217,255,.3); border-radius:12px; background:rgba(4,18,32,.86); box-shadow:0 10px 30px rgba(0,0,0,.22); }
.wind-control-bar .wind-state { display:inline-flex; align-items:center; gap:7px; color:#c9f4ff; font-weight:750; }
.wind-control-bar .wind-state i { width:9px; height:9px; border-radius:50%; background:#748996; box-shadow:0 0 0 4px rgba(116,137,150,.12); }
.wind-control-bar.active .wind-state i { background:var(--bs-green); box-shadow:0 0 0 4px rgba(96,230,170,.13),0 0 18px rgba(96,230,170,.5); }
.wind-control-bar.cached .wind-state i { background:var(--bs-amber); }
.wind-control-bar.unavailable .wind-state i { background:var(--bs-red); }
.wind-control-bar button { min-height:32px; padding:5px 11px; border:1px solid rgba(82,217,255,.35); border-radius:8px; background:rgba(21,67,91,.76); color:#e8fbff; font-weight:750; }
.wind-control-bar small { flex:1 1 260px; color:var(--bs-muted); overflow-wrap:anywhere; }
.leaflet-pane > canvas { max-width:none; }
.leaflet-pane.leaflet-bagyoWind-pane { z-index:455; pointer-events:none; }
.wind-stream-canvas { mix-blend-mode:screen; filter:drop-shadow(0 0 2px rgba(82,217,255,.58)) saturate(1.18); }
.wind-inspector { color:#0c2234; }

/* Official app identity assets */
.weather-app-preview { grid-template-columns:auto minmax(0,1fr) auto; }
.weather-app-logo { width:52px; height:52px; object-fit:contain; border-radius:13px; padding:4px; background:#fff; box-shadow:0 8px 20px rgba(0,0,0,.24); }
.weather-app-logo.wide { width:82px; object-fit:contain; background:#07131e; }
.weather-app-live-preview::before { content:"BAGYO SERYE LOCATION CONTEXT"; display:block; margin-bottom:7px; color:#7fc8e7; font-size:.65rem; letter-spacing:.105em; font-weight:800; }

@media (max-width: 1180px) {
  .kpi-grid { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
}
@media (max-width: 960px) {
  .view::before { inset:-10px -10px auto; }
  .earthquake-secondary-list, .emergency-directory-cards { grid-template-columns:1fr; }
  .emergency-hero-copy > img { width:60px; height:60px; }
}
@media (max-width: 600px) {
  :root { --bs-radius:14px; --bs-radius-lg:18px; }
  .view::before { height:300px; }
  .earthquake-alert-lead { grid-template-columns:1fr; gap:10px; }
  .earthquake-alert-lead .magnitude { text-align:left; }
  .earthquake-alert-lead .magnitude strong { font-size:2rem; }
  .emergency-hero-copy { align-items:flex-start; }
  .emergency-hero-copy > img { width:48px; height:48px; }
  .emergency-contact-meta { grid-template-columns:1fr; }
  .emergency-contact-number { align-items:flex-start; flex-direction:column; }
  .emergency-contact-actions { justify-content:flex-start; }
  .wind-control-bar small { flex-basis:100%; }
  .weather-app-logo { width:46px; height:46px; }
  .topbar { display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; height:auto; min-height:112px; padding:10px; gap:8px 10px; }
  .topbar .mobile-menu { grid-column:1; grid-row:1; }
  .topbar > div:first-of-type { grid-column:2; grid-row:1; min-width:0; }
  .topbar > div:first-of-type h1 { white-space:normal; overflow-wrap:anywhere; }
  .topbar .top-actions { position:static !important; grid-column:1/-1; grid-row:2; width:100% !important; justify-content:flex-start; transform:none !important; }
}
@media (max-width: 360px) {
  .emergency-hero-copy > img { display:none; }
  .weather-app-preview { grid-template-columns:auto minmax(0,1fr); }
  .weather-app-preview .app-link-status { grid-column:1/-1; justify-self:start; }
}
@media (max-width: 400px) {
  .dashboard-grid, .dashboard-grid > *, .public-briefing-grid, .public-briefing-grid > *, .intelligence-report-grid, .intelligence-report-grid > * { min-width:0 !important; width:100% !important; max-width:100% !important; }
  .map-card.span-12, .card-head.map-card-head, .wind-control-bar, .map-attribution-note, .dashboard-briefing-strip, .dashboard-briefing-head, .dashboard-briefing-foot { min-width:0 !important; width:100% !important; max-width:100% !important; }
  .map-style-compact, .map-style-compact label, .layer-chips { min-width:0 !important; max-width:100% !important; }
  .dashboard-six-hour { min-width:0 !important; max-width:100% !important; }
  .briefing-tool, .briefing-output { overflow:hidden; overflow-wrap:anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}