/* STREAMING_CHUNK:Configuring CSS variables and color palette... /
/ =========================================================================
TrafficSafetyMonitor — stylesheet
Palette is drawn from the product's own on-screen overlays: the deep
highway-sign green of vehicle/person boxes, the reflective-paint amber
of tripwires, and the alert red used for crash/fall states.
========================================================================= */

:root {
/* base surfaces */
--bg: #f2f4ef;
--bg-alt: #e9ece3;
--surface: #fbfbf8;
--surface-raised: #ffffff;

/* ink */
--ink: #1b211d;
--ink-soft: #4c564d;
--ink-faint: #7c857b;
--line: #d6dbcf;
--line-strong: #b9c1b0;

/* accents, lifted from the detection overlays */
--green: #2f6f5e;
--green-dark: #21503f;
--green-rgb: 47, 111, 94;
--amber: #c98a2b;
--amber-soft: #f0d9ac;
--amber-rgb: 201, 138, 43;
--red: #b2402a;
--red-rgb: 178, 64, 42;

/* extended card accent palette — 20 additional options on top of the
three core states above, for modules that don't map to a
green/amber/red severity reading */
--blue: #2f5f8f;
--blue-rgb: 47, 95, 143;
--teal: #1f7a72;
--teal-rgb: 31, 122, 114;
--purple: #6a4c93;
--purple-rgb: 106, 76, 147;
--pink: #b5537a;
--pink-rgb: 181, 83, 122;
--orange: #c1652f;
--orange-rgb: 193, 101, 47;
--yellow: #b89b2e;
--yellow-rgb: 184, 155, 46;
--cyan: #2f8fa0;
--cyan-rgb: 47, 143, 160;
--indigo: #4a4e9e;
--indigo-rgb: 74, 78, 158;
--lime: #7a9a3d;
--lime-rgb: 122, 154, 61;
--brown: #7a5230;
--brown-rgb: 122, 82, 48;
--slate: #52606d;
--slate-rgb: 82, 96, 109;
--rose: #b23a5c;
--rose-rgb: 178, 58, 92;
--violet: #7d5ba6;
--violet-rgb: 125, 91, 166;
--sky: #3f7fae;
--sky-rgb: 63, 127, 174;
--emerald: #237a5b;
--emerald-rgb: 35, 122, 91;
--fuchsia: #9b3f8f;
--fuchsia-rgb: 155, 63, 143;
--coral: #c15a4a;
--coral-rgb: 193, 90, 74;
--gold: #ab8323;
--gold-rgb: 171, 131, 35;
--plum: #6e3f63;
--plum-rgb: 110, 63, 99;
--navy: #2c3e63;
--navy-rgb: 44, 62, 99;

/* type — Bricolage brings some real character to the headlines instead
of a safe neutral grotesk; Jakarta keeps body copy warm and readable */
--font-display: "Bricolage Grotesque", "Plus Jakarta Sans", sans-serif;
--font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: "JetBrains Mono", "SFMono-Regular", Menlo, monospace;

--content-width: 1160px;
--radius: 3px;
}

/* STREAMING_CHUNK:Setting up base resets and fixing the global hidden attribute... */

{ box-sizing: border-box; }

/* FIX: Ensure standard HTML [hidden] works even if display:flex is applied later */
[hidden] { display: none !important; }

html {
scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}

body {
margin: 0;
font-family: var(--font-body);
color: var(--ink);
background: var(--bg);
-webkit-font-smoothing: antialiased;
position: relative;
overflow-x: hidden;
}

/* -------------------------------------------------------------------------
Ambient background: slow-drifting lane markings, the only continuous
motion on the page. Kept low-contrast so it reads as texture, not noise.
------------------------------------------------------------------------- */
body::before {
content: "";
position: fixed;
inset: -20%;
z-index: 0;
pointer-events: none;
filter: blur(90px);
background:
radial-gradient(circle at 20% 25%, rgba(47, 111, 94, 0.42) 0%, transparent 55%),
radial-gradient(circle at 80% 20%, rgba(201, 138, 43, 0.4) 0%, transparent 52%),
radial-gradient(circle at 55% 85%, rgba(178, 64, 42, 0.28) 0%, transparent 50%),
radial-gradient(circle at 15% 80%, rgba(47, 111, 94, 0.3) 0%, transparent 48%);
background-repeat: no-repeat;
mix-blend-mode: multiply;
animation: blob-drift 22s ease-in-out infinite alternate;
}

@keyframes blob-drift {
0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
33%  { transform: translate(4%, 6%) scale(1.12) rotate(6deg); }
66%  { transform: translate(-5%, 3%) scale(0.96) rotate(-5deg); }
100% { transform: translate(3%, -5%) scale(1.08) rotate(4deg); }
}

/* STREAMING_CHUNK:Styling background textures and layout wrappers... /
/ Fine lane-line texture riding on top of the color wash for grounding */
body::after {
content: "";
position: fixed;
inset: -10%;
z-index: 0;
pointer-events: none;
background-image:
repeating-linear-gradient(
115deg,
transparent 0 68px,
rgba(27, 33, 29, 0.05) 68px 70px,
transparent 70px 138px
);
animation: lane-drift 24s linear infinite;
}

@keyframes lane-drift {
from { background-position: 0 0; }
to   { background-position: -276px 160px; }
}

.wrap {
position: relative;
z-index: 1;
max-width: var(--content-width);
margin: 0 auto;
padding: 0 32px;
}

a { color: inherit; }

/* -------------------------------------------------------------------------
Header
------------------------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 40;
background: rgba(242, 244, 239, 0.86);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--line);
}

.site-header .wrap {
display: flex;
align-items: center;
justify-content: space-between;
height: 68px;
}

.brand {
display: flex;
align-items: baseline;
gap: 8px;
font-family: var(--font-display);
font-weight: 600;
font-size: 17px;
letter-spacing: -0.01em;
text-decoration: none;
color: var(--ink);
}

.brand-mark {
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--green);
box-shadow: 0 0 0 3px rgba(47, 111, 94, 0.18);
}

.site-nav {
display: flex;
align-items: center;
gap: 28px;
font-size: 14px;
color: var(--ink-soft);
}

.site-nav a {
text-decoration: none;
transition: color 0.15s ease;
}
.site-nav a:hover { color: var(--green); }

/* STREAMING_CHUNK:Styling the Hero section and primary buttons... /
/ -------------------------------------------------------------------------
Hero
------------------------------------------------------------------------- */
.hero {
padding: 88px 0 76px;
}

.hero .wrap {
display: grid;
grid-template-columns: 1.05fr 0.85fr;
gap: 56px;
align-items: center;
}

.hero-status {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-mono);
font-size: 12px;
letter-spacing: 0.02em;
color: var(--green-dark);
background: rgba(47, 111, 94, 0.08);
border: 1px solid rgba(47, 111, 94, 0.22);
padding: 5px 10px;
border-radius: 2px;
margin-bottom: 22px;
}

.hero-status .dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--green);
animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}

.hero h1 {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(34px, 4.2vw, 52px);
line-height: 1.08;
letter-spacing: -0.015em;
margin: 0 0 20px;
max-width: 15ch;
}

.hero p.lede {
font-size: 17px;
line-height: 1.6;
color: var(--ink-soft);
max-width: 46ch;
margin: 0 0 32px;
}

.hero-actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
}

.btn {
font-family: var(--font-body);
font-size: 14.5px;
font-weight: 600;
padding: 12px 20px;
border-radius: var(--radius);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 8px;
transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
background: var(--ink);
color: var(--surface);
}
.btn-primary:hover { background: var(--green-dark); }

.btn-ghost {
background: transparent;
border-color: var(--line-strong);
color: var(--ink);
}
.btn-ghost:hover { border-color: var(--green); color: var(--green-dark); }

/* STREAMING_CHUNK:Rendering the interactive hero graphic... /
/ Hero graphic: a top-down road with drifting lane dashes and two
tracking reticles, echoing the bounding-box overlays in the demos. */
.hero-graphic {
position: relative;
aspect-ratio: 4 / 5;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
box-shadow: 0 24px 48px -28px rgba(27, 33, 29, 0.35);
}

.hero-graphic svg { width: 100%; height: 100%; display: block; }

.road-dash {
animation: dash-move 1.8s linear infinite;
}
@keyframes dash-move {
to { stroke-dashoffset: -64; }
}

/* Tracking reticles "drive" down the road toward the viewer — each one
spawns near the vanishing point, grows as it approaches, and fades out
at the bottom of frame, looping continuously and staggered so they never
line up. Positions/scale are hand-tuned to the road polygon above. */
.cv-car {
opacity: 0;
transform-origin: 0 0;
}

.cv-car-a { animation: car-a-drive 6.4s linear infinite; }
.cv-car-b { animation: car-b-drive 5.4s linear infinite; animation-delay: -2.6s; }
.cv-car-c { animation: car-c-drive 7.2s linear infinite; animation-delay: -4.6s; }

@keyframes car-a-drive {
0%   { transform: translate(198px, 46px) scale(0.5); opacity: 0; }
8%   { opacity: 1; }
88%  { opacity: 1; }
100% { transform: translate(222px, 462px) scale(1.2); opacity: 0; }
}

@keyframes car-b-drive {
0%   { transform: translate(154px, 26px) scale(0.42); opacity: 0; }
8%   { opacity: 1; }
88%  { opacity: 1; }
100% { transform: translate(132px, 432px) scale(1.1); opacity: 0; }
}

@keyframes car-c-drive {
0%   { transform: translate(204px, 6px) scale(0.36); opacity: 0; }
8%   { opacity: 1; }
88%  { opacity: 1; }
100% { transform: translate(224px, 380px) scale(0.94); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
.road-dash, .cv-car-a, .cv-car-b, .cv-car-c { animation: none; }
.cv-car { opacity: 1; }
.cv-car-a { transform: translate(210px, 260px) scale(0.95); }
.cv-car-b { transform: translate(142px, 340px) scale(1.02); }
.cv-car-c { transform: translate(224px, 150px) scale(0.7); }
}

.hero-graphic .readout {
position: absolute;
top: 14px;
left: 14px;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.01em;
color: var(--green-dark);
background: rgba(251, 251, 248, 0.9);
border: 1px solid var(--line);
padding: 4px 8px;
border-radius: 2px;
}

.hero-graphic .weather-chip {
position: absolute;
bottom: 14px;
left: 14px;
display: inline-flex;
align-items: center;
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: 0.01em;
color: var(--green-dark);
background: rgba(251, 251, 248, 0.9);
border: 1px solid var(--line);
padding: 4px 8px;
border-radius: 2px;
max-width: calc(100% - 28px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hero-graphic .weather-chip.is-muted {
color: var(--ink-faint);
}

/* STREAMING_CHUNK:Styling module grid sections and card containers... /
/ -------------------------------------------------------------------------
Section scaffolding
------------------------------------------------------------------------- */
.section { padding: 64px 0; }
.section-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 24px;
margin-bottom: 40px;
border-bottom: 1px solid var(--line);
padding-bottom: 22px;
}

.section-head h2 {
font-family: var(--font-display);
font-weight: 600;
font-size: 26px;
letter-spacing: -0.01em;
margin: 0 0 8px;
}

.section-head p {
margin: 0;
color: var(--ink-soft);
font-size: 15px;
max-width: 52ch;
}

.section-count {
font-family: var(--font-mono);
font-size: 12.5px;
color: var(--ink-faint);
white-space: nowrap;
padding-bottom: 3px;
}

/* -------------------------------------------------------------------------
Module cards — rounded, color-coded per detection category, with a
playful tilt-and-glow hover so the grid has some real energy to it.
------------------------------------------------------------------------- */
.module-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}

.module-card {
--accent: var(--green);
--accent-rgb: var(--green-rgb);
background: var(--surface);
border: 1px solid var(--line);
border-radius: 20px;
overflow: hidden;
cursor: pointer;
transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
box-shadow 0.35s ease, border-color 0.25s ease;
position: relative;
display: flex;
flex-direction: column;
}

.module-card[data-accent="amber"] { --accent: var(--amber); --accent-rgb: var(--amber-rgb); }
.module-card[data-accent="red"]   { --accent: var(--red);   --accent-rgb: var(--red-rgb); }

/* 20 additional accent options — same pattern as above, so any module
can opt into a colour that isn't tied to a green/amber/red reading. */
.module-card[data-accent="blue"]    { --accent: var(--blue);    --accent-rgb: var(--blue-rgb); }
.module-card[data-accent="teal"]    { --accent: var(--teal);    --accent-rgb: var(--teal-rgb); }
.module-card[data-accent="purple"]  { --accent: var(--purple);  --accent-rgb: var(--purple-rgb); }
.module-card[data-accent="pink"]    { --accent: var(--pink);    --accent-rgb: var(--pink-rgb); }
.module-card[data-accent="orange"]  { --accent: var(--orange);  --accent-rgb: var(--orange-rgb); }
.module-card[data-accent="yellow"]  { --accent: var(--yellow);  --accent-rgb: var(--yellow-rgb); }
.module-card[data-accent="cyan"]    { --accent: var(--cyan);    --accent-rgb: var(--cyan-rgb); }
.module-card[data-accent="indigo"]  { --accent: var(--indigo);  --accent-rgb: var(--indigo-rgb); }
.module-card[data-accent="lime"]    { --accent: var(--lime);    --accent-rgb: var(--lime-rgb); }
.module-card[data-accent="brown"]   { --accent: var(--brown);   --accent-rgb: var(--brown-rgb); }
.module-card[data-accent="slate"]   { --accent: var(--slate);   --accent-rgb: var(--slate-rgb); }
.module-card[data-accent="rose"]    { --accent: var(--rose);    --accent-rgb: var(--rose-rgb); }
.module-card[data-accent="violet"]  { --accent: var(--violet);  --accent-rgb: var(--violet-rgb); }
.module-card[data-accent="sky"]     { --accent: var(--sky);     --accent-rgb: var(--sky-rgb); }
.module-card[data-accent="emerald"] { --accent: var(--emerald); --accent-rgb: var(--emerald-rgb); }
.module-card[data-accent="fuchsia"] { --accent: var(--fuchsia); --accent-rgb: var(--fuchsia-rgb); }
.module-card[data-accent="coral"]   { --accent: var(--coral);   --accent-rgb: var(--coral-rgb); }
.module-card[data-accent="gold"]    { --accent: var(--gold);    --accent-rgb: var(--gold-rgb); }
.module-card[data-accent="plum"]    { --accent: var(--plum);    --accent-rgb: var(--plum-rgb); }
.module-card[data-accent="navy"]    { --accent: var(--navy);    --accent-rgb: var(--navy-rgb); }

/* STREAMING_CHUNK:Adding animation to card hover states... */
.module-card::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 5px;
background: var(--accent);
z-index: 2;
}

.module-card:nth-child(3n+2):hover { transform: translateY(-7px) rotate(0.6deg) scale(1.015); }
.module-card:nth-child(3n+1):hover,
.module-card:nth-child(3n):hover { transform: translateY(-7px) rotate(-0.6deg) scale(1.015); }

.module-card:hover,
.module-card:focus-visible {
border-color: var(--accent);
box-shadow:
0 26px 44px -22px rgba(var(--accent-rgb), 0.5),
0 10px 18px -12px rgba(27, 33, 29, 0.28);
}

.module-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.module-thumb {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--ink);
}

.module-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.module-card:hover .module-thumb img { transform: scale(1.08) rotate(-0.4deg); }

.live-dot {
position: absolute;
top: 12px;
right: 12px;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.35);
animation: pulse 2.2s ease-in-out infinite;
}

.play-badge {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: scale(0.85);
transition: opacity 0.25s ease, transform 0.25s ease;
background: rgba(27, 33, 29, 0.22);
}
.module-card:hover .play-badge { opacity: 1; transform: scale(1); }

.play-badge span {
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(251, 251, 248, 0.95);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 18px -6px rgba(0, 0, 0, 0.4);
}

.module-hud {
font-family: var(--font-mono);
font-weight: 600;
font-size: 10.5px;
letter-spacing: 0.02em;
color: #fbfbf8;
background: var(--accent);
padding: 7px 12px;
}

.module-body {
padding: 20px 20px 22px;
flex: 1;
display: flex;
flex-direction: column;
}

.module-tag {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
color: var(--accent);
margin-bottom: 8px;
}

.module-body h3 {
font-family: var(--font-display);
font-size: 19px;
font-weight: 700;
margin: 0 0 8px;
letter-spacing: -0.005em;
}

.module-body p {
margin: 0;
font-size: 14px;
line-height: 1.55;
color: var(--ink-soft);
flex: 1;
}

.module-cta {
margin-top: 14px;
font-size: 13.5px;
font-weight: 700;
color: var(--accent);
display: inline-flex;
align-items: center;
gap: 6px;
transition: gap 0.2s ease;
}
.module-card:hover .module-cta { gap: 10px; }

/* STREAMING_CHUNK:Styling weather specific cards and modal containers... /
/ -------------------------------------------------------------------------
Weather module card — same card shell as the detection modules, but
the thumbnail is a live mini readout instead of a video still, and
the click target opens the weather dashboard modal.
------------------------------------------------------------------------- */
.module-thumb-weather {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(155deg, var(--green-dark), var(--ink) 82%);
}

.wx-mini {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
color: var(--surface);
text-align: center;
padding: 0 20px;
}

.wx-mini-icon { color: var(--surface); opacity: 0.92; }

.wx-mini-temp {
font-family: var(--font-display);
font-size: 34px;
font-weight: 700;
line-height: 1;
}

.wx-mini-place {
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.02em;
color: rgba(251, 251, 248, 0.72);
max-width: 240px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

/* -------------------------------------------------------------------------
Weather dashboard modal — light surface (matches the rest of the
site) rather than the dark video-modal shell, wider, and scrollable
since it holds a full dashboard instead of a single video.
------------------------------------------------------------------------- */
.modal-backdrop.modal-backdrop-weather {
padding: 16px;
background: rgba(17, 26, 20, 0.38);
backdrop-filter: blur(26px);
-webkit-backdrop-filter: blur(26px);
}

.modal.modal-weather {
background: linear-gradient(155deg, rgba(33, 80, 63, 0.4), rgba(27, 33, 29, 0.4) 82%);
width: min(980px, 100%);
max-height: 94vh;
display: flex;
flex-direction: column;
}

.modal-head.modal-head-weather {
color: var(--ink);
background: rgba(251, 251, 248, 0.25);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(251, 251, 248, 0.14);
flex: none;
padding: 12px 20px;
}

.modal-head-weather .tag { color: var(--green-dark); }

.modal-head-weather .modal-close {
border-color: var(--line-strong);
color: var(--ink-soft);
}
.modal-head-weather .modal-close:hover {
background: var(--bg-alt);
border-color: var(--ink-faint);
color: var(--ink);
}

.modal-weather-body {
padding: 16px 20px 4px;
overflow: hidden;
background: rgba(251, 251, 248, 0.5);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}

.modal-foot.modal-foot-weather {
flex: none;
color: rgba(251, 251, 248, 0.75);
background: rgba(251, 251, 248, 0.25);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
padding: 9px 20px 12px;
font-size: 12px;
}

/* Compact card sizing inside the modal so the whole dashboard fits
without an internal scrollbar on typical screen heights. */
.modal-weather-body .wx-top-grid { gap: 12px; margin-bottom: 12px; }
.modal-weather-body .wx-card { padding: 14px 16px 15px; border-radius: 12px; }
.modal-weather-body .wx-card-title { margin-bottom: 8px; font-size: 10.5px; }

.modal-weather-body .wx-current-icon { width: 42px; height: 42px; border-radius: 11px; }
.modal-weather-body .wx-current-temp { font-size: 38px; }
.modal-weather-body .wx-current-temp .wx-deg { font-size: 17px; }
.modal-weather-body .wx-current-label { font-size: 14.5px; margin-top: 8px; }
.modal-weather-body .wx-current-sub { font-size: 12px; margin-top: 2px; }
.modal-weather-body .wx-substats { margin-top: 12px; padding-top: 10px; gap: 7px; }
.modal-weather-body .wx-substat-row { margin-bottom: 3px; font-size: 12px; }
.modal-weather-body .wx-substat-bar { height: 4px; }

.modal-weather-body .wx-sun-arc { height: 52px; margin: 2px 0 4px; }
.modal-weather-body .wx-sun-times strong { font-size: 13.5px; }

.modal-weather-body .wx-compass { height: 78px; }
.modal-weather-body .wx-wind-read { margin-top: 4px; }
.modal-weather-body .wx-wind-read strong { font-size: 20px; }
.modal-weather-body .wx-wind-desc { font-size: 11.5px; }

.modal-weather-body .wx-aqi-gauge { width: 128px; }
.modal-weather-body .wx-aqi-gauge svg { height: 50px; }
.modal-weather-body .wx-aqi-value { font-size: 20px; }
.modal-weather-body .wx-aqi-label { font-size: 12px; margin-top: 2px; }

.modal-weather-body .wx-search-results { max-height: none; overflow-y: visible; }

.modal-weather-body .wx-lower-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.modal-weather-body .wx-panel { padding: 14px 16px 15px; margin-bottom: 0; border-radius: 12px; }
.modal-weather-body .wx-panel-head { margin-bottom: 10px; }
.modal-weather-body .wx-panel-head h2 { font-size: 14px; }
.modal-weather-body .wx-panel-head .section-count { font-size: 11.5px; }

.modal-weather-body .wx-hourly-scroll {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 6px;
overflow: visible;
padding-bottom: 0;
}
.modal-weather-body .wx-hour { width: auto; min-width: 0; padding: 8px 3px; border-radius: 10px; }
.modal-weather-body .wx-hour-time { font-size: 9.5px; margin-bottom: 4px; }
.modal-weather-body .wx-hour-icon svg { width: 16px; height: 16px; }
.modal-weather-body .wx-hour-icon { margin-bottom: 3px; }
.modal-weather-body .wx-hour-temp { font-size: 12px; }
.modal-weather-body .wx-hour-pop { font-size: 9px; margin-top: 2px; }

.modal-weather-body .wx-chart svg { height: 126px; }

@media (max-width: 680px) {
.modal-weather-body .wx-lower-grid { grid-template-columns: 1fr; }
}

/* STREAMING_CHUNK:Styling video modal and general dashboard containers... /
/ -------------------------------------------------------------------------
"More modules" placeholder card — keeps the grid honest about being
a growing set rather than a finished list.
------------------------------------------------------------------------- */
.module-card.is-placeholder {
cursor: default;
align-items: center;
justify-content: center;
text-align: center;
border-style: dashed;
color: var(--ink-faint);
padding: 36px 20px;
}
.module-card.is-placeholder::before { display: none; }
.module-card.is-placeholder:hover {
transform: none;
box-shadow: none;
border-color: var(--line-strong);
}
.module-card.is-placeholder .plus {
width: 30px;
height: 30px;
border-radius: 50%;
border: 1px solid var(--line-strong);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 12px;
font-size: 16px;
}
.module-card.is-placeholder h3 {
font-family: var(--font-body);
font-size: 14px;
font-weight: 600;
color: var(--ink-faint);
margin: 0;
}

/* -------------------------------------------------------------------------
Modal
------------------------------------------------------------------------- */
.modal-backdrop {
position: fixed;
inset: 0;
background: rgba(17, 26, 20, 0.38);
backdrop-filter: blur(26px);
-webkit-backdrop-filter: blur(26px);
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
opacity: 0;
visibility: hidden;
transition: opacity 0.22s ease;
}

.modal-backdrop.is-open {
opacity: 1;
visibility: visible;
}

.modal {
background: rgba(27, 33, 29, 0.42);
border-radius: var(--radius);
width: min(920px, 100%);
overflow: hidden;
transform: translateY(14px) scale(0.98);
opacity: 0;
transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.24s ease;
box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.55);
}

.modal-backdrop.is-open .modal {
transform: translateY(0) scale(1);
opacity: 1;
}

.modal-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 18px;
color: var(--surface);
background: rgba(251, 251, 248, 0.25);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(251, 251, 248, 0.14);
}

.modal-head-title {
display: flex;
flex-direction: column;
gap: 2px;
}

.modal-head-title .tag {
font-family: var(--font-mono);
font-size: 11px;
color: var(--amber);
}

.modal-head-title h3 {
margin: 0;
font-family: var(--font-display);
font-size: 16px;
font-weight: 600;
}

.modal-close {
background: transparent;
border: 1px solid rgba(251, 251, 248, 0.28);
color: var(--surface);
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease;
}
.modal-close:hover { background: rgba(251, 251, 248, 0.12); border-color: var(--surface); }

.modal video {
width: 100%;
display: block;
max-height: 68vh;
background: #000;
}

.modal-foot {
padding: 12px 18px 16px;
color: rgba(251, 251, 248, 0.75);
background: rgba(251, 251, 248, 0.25);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
font-size: 13px;
line-height: 1.5;
}

/* -------------------------------------------------------------------------
Footer
------------------------------------------------------------------------- */
.site-footer {
border-top: 1px solid var(--line);
padding: 34px 0 46px;
}

.site-footer .wrap {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
flex-wrap: wrap;
}

.site-footer p {
margin: 0;
font-size: 13px;
color: var(--ink-faint);
}

.site-footer .foot-brand {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--font-display);
font-weight: 600;
font-size: 14px;
color: var(--ink-soft);
}

/* STREAMING_CHUNK:Establishing general responsive break points... /
/ -------------------------------------------------------------------------
Responsive
------------------------------------------------------------------------- */
@media (max-width: 900px) {
.hero .wrap { grid-template-columns: 1fr; gap: 40px; }
.hero-graphic { max-width: 380px; margin: 0 auto; }
.module-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
.wrap { padding: 0 20px; }
.site-nav { display: none; }
.hero { padding: 56px 0 48px; }
.module-grid { grid-template-columns: 1fr; }
.section-head { flex-direction: column; align-items: flex-start; }
.modal video { max-height: 50vh; }
}

/* =========================================================================
Weather Dashboard
Same tokens as the rest of the site: mono readouts, hairline borders,
the green/amber/red trio lifted from the detection overlays. Nothing
here reaches for a chart library — the line chart and gauges are hand
-built SVG so the visual language stays consistent with the hero.
========================================================================= */

.site-nav a.is-active {
color: var(--green-dark);
font-weight: 600;
}

.wx-hero {
padding: 64px 0 40px;
border-bottom: 1px solid var(--line);
}

.wx-hero .hero-status { margin-bottom: 18px; }
.wx-hero .hero-status.is-muted {
color: var(--ink-faint);
background: rgba(124, 133, 123, 0.08);
border-color: var(--line);
}
.wx-hero .hero-status.is-muted .dot { background: var(--ink-faint); animation: none; }

.wx-hero h1 {
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(28px, 3.4vw, 40px);
letter-spacing: -0.015em;
margin: 0 0 14px;
}

.wx-hero .lede {
font-size: 16px;
line-height: 1.6;
color: var(--ink-soft);
max-width: 60ch;
margin: 0 0 18px;
}

/* STREAMING_CHUNK:Updating the backgroundless location and search controls... */
.wx-location-control {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: auto;
padding-top: 20px;
}

.wx-location {
display: inline-flex;
align-items: center;
gap: 7px;
font-family: var(--font-mono);
font-size: 12.5px;
color: var(--ink-soft);
min-height: 20px;
}
.wx-location svg { flex: none; color: var(--green); }

/* FIX: Remove background from location string to blend nicely with card */
.wx-location-current {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
padding: 4px 0;
font-family: var(--font-mono);
font-size: 12.5px;
color: var(--ink);
}
.wx-location-current svg { flex: none; color: var(--green); }
.wx-location-current span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.wx-location-search {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}

/* FIX: Remove background container from search toggles */
.wx-location-actions {
display: flex;
align-items: center;
gap: 6px;
flex: none;
padding: 0;
}

.wx-search-wrap {
position: relative;
display: flex;
align-items: center;
}

/* FIX: Adjusted buttons to have proper borders and dark text to float freely on light cards */
.wx-icon-btn {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
flex: none;
background: transparent;
border: 1px solid var(--line-strong);
border-radius: 50%;
color: var(--ink-soft);
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.wx-icon-btn:hover,
.wx-icon-btn:focus-visible {
background: var(--bg-alt);
border-color: var(--ink-faint);
color: var(--ink);
}
.wx-icon-btn[aria-expanded="true"] {
background: var(--ink);
border-color: var(--ink);
color: var(--surface);
}

.wx-search-box {
position: absolute;
bottom: calc(100% + 10px);
top: auto;
right: 0;
display: flex;
align-items: center;
background: var(--surface-raised);
border: 1px solid var(--line-strong);
border-radius: var(--radius);
padding: 8px 12px;
gap: 8px;
width: 260px;
z-index: 25;
box-shadow: 0 18px 32px -18px rgba(27, 33, 29, 0.35);
transition: border-color 0.15s ease;
}
.wx-search-box:focus-within { border-color: var(--green); }
.wx-search-box svg { flex: none; color: var(--ink-faint); }

.wx-search-box input {
border: none;
outline: none;
background: transparent;
font-family: var(--font-body);
font-size: 13.5px;
color: var(--ink);
width: 100%;
}
.wx-search-box input::placeholder { color: var(--ink-faint); }

.wx-search-results {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
background: var(--surface-raised);
border: 1px solid var(--line);
border-radius: 10px;
box-shadow: 0 18px 32px -18px rgba(27, 33, 29, 0.35);
overflow: hidden;
z-index: 30;
max-height: 260px;
overflow-y: auto;
}

.wx-search-item {
display: flex;
align-items: center;
gap: 9px;
width: 100%;
text-align: left;
background: transparent;
border: none;
border-bottom: 1px solid var(--line);
padding: 10px 12px;
font-family: var(--font-body);
font-size: 13px;
color: var(--ink);
cursor: pointer;
}
.wx-search-item:last-child { border-bottom: none; }
.wx-search-item:hover, .wx-search-item:focus-visible { background: var(--bg-alt); }
.wx-search-item svg { flex: none; color: var(--green); }

.wx-search-empty {
padding: 12px;
font-size: 12.5px;
color: var(--ink-faint);
}

.btn-sm {
padding: 8px 14px;
font-size: 13px;
}

/* STREAMING_CHUNK:Styling modal internal layout and inner components... */
.wx-message {
text-align: center;
padding: 60px 20px;
color: var(--ink-soft);
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
}

/* -------------------------------------------------------------------------
Top grid: current conditions (tall, left) + sun / wind / air quality
------------------------------------------------------------------------- */
.wx-top-grid {
display: grid;
grid-template-columns: 1.3fr 1fr 1fr;
grid-template-rows: auto auto;
gap: 20px;
margin-bottom: 36px;
}

.wx-card {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px 22px 24px;
position: relative;
}

.wx-card-title {
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--ink-faint);
margin: 0 0 14px;
}

.wx-card-current {
grid-column: 1;
grid-row: 1 / 3;
display: flex;
flex-direction: column;
}

.wx-current-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
}

.wx-current-icon {
--accent: var(--green);
color: var(--accent);
width: 56px;
height: 56px;
border-radius: 14px;
background: rgba(var(--green-rgb), 0.09);
display: flex;
align-items: center;
justify-content: center;
}
.wx-current-icon[data-accent="amber"] { --accent: var(--amber); background: rgba(var(--amber-rgb), 0.12); }
.wx-current-icon[data-accent="red"] { --accent: var(--red); background: rgba(var(--red-rgb), 0.1); }

.wx-current-temp {
font-family: var(--font-display);
font-weight: 700;
font-size: 58px;
line-height: 1;
letter-spacing: -0.02em;
color: var(--ink);
}
.wx-current-temp .wx-deg {
font-size: 24px;
font-weight: 600;
color: var(--ink-faint);
vertical-align: super;
}

.wx-current-label {
font-family: var(--font-display);
font-size: 18px;
font-weight: 600;
margin-top: 14px;
}

.wx-current-sub {
font-size: 13.5px;
color: var(--ink-soft);
margin-top: 4px;
}

.wx-substats {
margin-top: 26px;
padding-top: 20px;
border-top: 1px solid var(--line);
display: flex;
flex-direction: column;
gap: 14px;
}

.wx-substat-row {
display: flex;
justify-content: space-between;
font-size: 13px;
color: var(--ink-soft);
margin-bottom: 6px;
}
.wx-substat-row strong { color: var(--ink); font-weight: 600; }

.wx-substat-bar {
height: 5px;
border-radius: 3px;
background: var(--bg-alt);
overflow: hidden;
}
.wx-substat-bar span {
display: block;
height: 100%;
background: var(--green);
border-radius: 3px;
transition: width 0.4s ease;
}

/* STREAMING_CHUNK:Configuring small gauge cards like Sun, Wind, and AQI... /
/ Sun card */
.wx-card-sun { grid-column: 2; grid-row: 1; }

.wx-sun-arc { display: block; margin: 4px 0 6px; overflow: visible; }
.wx-sun-times {
display: flex;
justify-content: space-between;
gap: 12px;
}
.wx-sun-times > div { display: flex; flex-direction: column; gap: 2px; }
.wx-sun-label {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--ink-faint);
text-transform: uppercase;
letter-spacing: 0.02em;
}
.wx-sun-times strong { font-size: 15px; font-weight: 600; }

/* Wind card */
.wx-card-wind { grid-column: 3; grid-row: 1; text-align: center; }
.wx-compass { display: block; margin: 0 auto; }
.wx-compass-n {
font-family: var(--font-mono);
font-size: 8.5px;
fill: var(--ink-faint);
}
.wx-wind-read {
margin-top: 8px;
display: flex;
align-items: baseline;
justify-content: center;
gap: 5px;
}
.wx-wind-read strong { font-family: var(--font-display); font-size: 24px; font-weight: 700; }
.wx-wind-read span { font-size: 12px; color: var(--ink-faint); }
.wx-wind-desc { font-size: 12.5px; color: var(--ink-soft); margin-top: 4px; }

/* Air quality card */
.wx-card-aqi { grid-column: 2 / 4; grid-row: 2; text-align: center; }
.wx-aqi-gauge { position: relative; width: 180px; margin: 0 auto; color: var(--green); }
.wx-aqi-gauge[data-tone="amber"] { color: var(--amber); }
.wx-aqi-gauge[data-tone="red"] { color: var(--red); }
.wx-aqi-gauge[data-tone="faint"] { color: var(--ink-faint); }
.wx-aqi-value {
position: absolute;
left: 50%;
bottom: 2px;
transform: translateX(-50%);
font-family: var(--font-display);
font-size: 26px;
font-weight: 700;
color: var(--ink);
}
.wx-aqi-label {
font-size: 13px;
font-weight: 600;
margin-top: 4px;
color: var(--green-dark);
}
.wx-aqi-label[data-tone="amber"] { color: #96690f; }
.wx-aqi-label[data-tone="red"] { color: var(--red); }
.wx-aqi-label[data-tone="faint"] { color: var(--ink-faint); }

/* -------------------------------------------------------------------------
Hourly strip
------------------------------------------------------------------------- */
.wx-panel {
background: var(--surface);
border: 1px solid var(--line);
border-radius: 16px;
padding: 22px 22px 26px;
margin-bottom: 24px;
}

.wx-panel-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 18px;
}
.wx-panel-head h2 {
font-family: var(--font-display);
font-size: 17px;
font-weight: 700;
margin: 0;
letter-spacing: -0.005em;
}

.wx-hourly-scroll {
display: flex;
gap: 10px;
overflow-x: auto;
padding-bottom: 4px;
scrollbar-width: thin;
}

.wx-hour {
flex: 0 0 auto;
width: 76px;
text-align: center;
padding: 14px 8px;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--bg);
}

.wx-hour-time {
font-family: var(--font-mono);
font-size: 11px;
color: var(--ink-faint);
margin-bottom: 8px;
}
.wx-hour-icon {
--accent: var(--green);
color: var(--accent);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 6px;
}
.wx-hour-icon[data-accent="amber"] { --accent: var(--amber); }
.wx-hour-icon[data-accent="red"] { --accent: var(--red); }
.wx-hour-temp { font-weight: 700; font-size: 14.5px; }
.wx-hour-pop {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--green-dark);
margin-top: 4px;
}

/* STREAMING_CHUNK:Finalizing styles for bottom chart and weather media queries... /
/ -------------------------------------------------------------------------
Chart
------------------------------------------------------------------------- */
.wx-chart { width: 100%; }
.wx-chart svg { display: block; width: 100%; height: auto; }
.wx-chart-axis {
font-family: var(--font-mono);
font-size: 9.5px;
fill: var(--ink-faint);
}
.wx-chart-empty { color: var(--ink-faint); font-size: 13.5px; text-align: center; padding: 20px; }

/* -------------------------------------------------------------------------
Responsive
------------------------------------------------------------------------- */
@media (max-width: 900px) {
.wx-top-grid {
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto;
}
.wx-card-current { grid-column: 1 / 3; grid-row: 1; }
.wx-card-sun { grid-column: 1; grid-row: 2; }
.wx-card-wind { grid-column: 2; grid-row: 2; }
.wx-card-aqi { grid-column: 1 / 3; grid-row: 3; }
}

@media (max-width: 620px) {
.wx-location-current { flex: 1; min-width: 0; }
.wx-search-box { width: 220px; }
.wx-top-grid { grid-template-columns: 1fr; }
.wx-card-current, .wx-card-sun, .wx-card-wind, .wx-card-aqi {
grid-column: 1;
}
.wx-card-sun { grid-row: 2; }
.wx-card-wind { grid-row: 3; }
.wx-card-aqi { grid-row: 4; }
.wx-current-temp { font-size: 46px; }
}