/* Daylight Window - extends /style.css (same tokens). Signature: a 24-hour "day strip" and a sun-arc over the horizon. */
.dl-main { max-width: 860px; margin: 0 auto; padding: 0 16px 20px; }
.dl-crumbs { padding: 14px 0 0; font-size: .85rem; color: var(--faint); }
.dl-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; }
.dl-crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--faint); }
.dl-crumbs a { color: var(--muted); }
.dl-hero { position: relative; padding: 20px 0 6px; overflow: hidden; }
.dl-hero h1 { font-size: clamp(2.6rem, 10vw, 4.4rem); text-transform: uppercase; max-width: 15ch; position: relative; }
.dl-lead { margin: 12px 0 0; max-width: 56ch; color: var(--muted); font-size: 1.05rem; position: relative; }
.dl-lead2 { margin: 8px 0 0; color: var(--muted); max-width: 60ch; }
.dl-art { position: absolute; right: -10px; top: 6px; width: min(46vw, 230px); height: auto; opacity: .9; pointer-events: none; }
.dl-art .a-arc { fill: none; stroke: var(--line); stroke-width: 2; stroke-dasharray: 3 5; }
.dl-art .a-hor { stroke: var(--street); stroke-width: 2; }
.dl-art .a-ticks path { stroke: var(--lamp); stroke-width: 2; stroke-linecap: round; fill: none; opacity: .6; }
.dl-art .a-glow { fill: var(--lamp); opacity: .22; }
.dl-art .a-sun { fill: var(--lamp-bg); }
@media (max-width: 520px) { .dl-art { opacity: .35; } .dl-hero h1 { max-width: 11ch; } }

.dl-sec { padding: 26px 0 0; }
.dl-sec h2 { font-size: clamp(1.8rem, 7vw, 2.5rem); text-transform: uppercase; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.dl-date { font: 600 .95rem/1.2 var(--sans); text-transform: none; letter-spacing: 0; color: var(--faint); }
.dl-h3 { margin: 22px 0 6px; font-size: 1.35rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.dl-static { margin: 8px 0 0; font-size: .85rem; color: var(--faint); border-left: 3px solid var(--line); padding-left: 10px; }
.dl-polar { margin: 12px 0 0; font-weight: 600; }

.dl-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
@media (min-width: 640px) { .dl-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dl-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dl-card .k { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: var(--faint); }
.dl-card b { font: 800 clamp(1.9rem, 7.5vw, 2.5rem)/1 var(--display); letter-spacing: .01em; }
.dl-card small { color: var(--muted); font-size: .8rem; line-height: 1.25; margin-top: 2px; }

.dl-strip { width: 100%; height: auto; margin-top: 4px; }
.dl-strip .st-night { fill: var(--card2); stroke: var(--line); }
.dl-strip .st-day { fill: var(--lamp-bg); }
.dl-strip .st-dusk { fill: var(--lamp); opacity: .35; }
.dl-strip .st-mark { stroke: var(--text); stroke-width: 1.6; stroke-dasharray: 2 2; }
.dl-strip text { fill: var(--muted); font: 600 11px var(--sans); }
.dl-strip .st-t { fill: var(--text); font-size: 12px; }
.dl-strip .st-h { fill: var(--text); }
.dl-strip .st-h.dim { fill: var(--faint); font-weight: 400; }

.dl-lefts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.dl-left { border-radius: 14px; padding: 12px 14px; background: var(--lamp-bg); color: var(--on-lamp); display: flex; flex-direction: column; gap: 2px; }
.dl-left .k { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; opacity: .8; }
.dl-left b { font: 800 clamp(1.9rem, 8vw, 2.6rem)/1 var(--display); }
.dl-left.dark { background: var(--card2); color: var(--text); border: 1px solid var(--line); }
.dl-left.dark b { font-size: clamp(1.5rem, 6vw, 2rem); }
.dl-note { margin: 10px 0 0; font-size: .85rem; color: var(--faint); }
.dl-now { margin: 12px 0 0; font-weight: 600; color: var(--lamp-ink); min-height: 1.4em; }

.dl-banner { margin: 12px 0 0; padding: 14px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.dl-banner.soon { border-color: var(--lamp); box-shadow: 0 0 0 1px var(--lamp) inset; }
.dl-banner.none { color: var(--muted); }
.dl-badge { display: inline-block; font-size: .78rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--lamp-bg); color: var(--on-lamp); white-space: nowrap; }
.dl-clock p { margin: 10px 0 0; }
.dl-next { color: var(--muted); }
.dl-sol { margin-top: 12px; color: var(--muted); }

.dl-fig { margin: 12px 0 0; }
.dl-chart { width: 100%; height: auto; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
.dl-chart text { fill: var(--muted); font: 500 11px var(--sans); }
.dl-chart .ch-grid { stroke: var(--line); stroke-width: 1; }
.dl-chart .ch-tick { stroke: var(--faint); }
.dl-chart .ch-area { fill: var(--lamp); opacity: .16; }
.dl-chart .ch-line { fill: none; stroke: var(--lamp); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.dl-chart .ch-clock { stroke: var(--text); stroke-width: 1.4; stroke-dasharray: 3 3; opacity: .7; }
.dl-chart .ch-dot { stroke: var(--bg); stroke-width: 2; }
.dl-chart .ch-dot.sol { fill: var(--free); }
.dl-chart .ch-dot.now { fill: var(--text); }
.dl-chart .ch-lab { fill: var(--text); font-weight: 600; }
.dl-cap { margin: 8px 0 0; font-size: .85rem; color: var(--faint); }

.dl-tw { margin-top: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.dl-table { width: 100%; border-collapse: collapse; font-size: .92rem; font-variant-numeric: tabular-nums; }
.dl-table th, .dl-table td { padding: 9px 8px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
.dl-table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); font-weight: 600; white-space: normal; vertical-align: bottom; }
.dl-table tbody th { text-align: left; font-weight: 600; padding-left: 12px; }
.dl-table thead th:first-child { text-align: left; padding-left: 12px; }
.dl-table tbody th small { display: block; font-weight: 400; color: var(--faint); font-size: .75rem; white-space: normal; }
.dl-table tbody tr:last-child th, .dl-table tbody tr:last-child td { border-bottom: 0; }
.dl-table tr.now th, .dl-table tr.now td { background: var(--free-bg); }
@media (max-width: 480px) { .dl-table { font-size: .82rem; } .dl-table th, .dl-table td { padding: 8px 5px; } }

.dl-plans { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.dl-plan { display: flex; flex-direction: column; gap: 4px; height: 100%; text-decoration: none; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; min-height: 64px; }
.dl-plan:hover { border-color: var(--lamp); }
.dl-plan b { font: 800 1.45rem/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.dl-plan b::after { content: " →"; color: var(--lamp-ink); }
.dl-plan span { color: var(--muted); font-size: .9rem; }
.dl-fine { font-size: .9rem; color: var(--muted); }
.dl-fine p { margin: 8px 0 0; max-width: 64ch; }
.dl-fine a { font-weight: 600; }

.dl-near { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.dl-near a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--text); text-decoration: none; }
.dl-near a:hover { border-color: var(--lamp); }
.dl-near b { font-weight: 600; }

.dl-search { display: block; margin-top: 12px; }
.dl-search input { width: 100%; height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); padding: 0 14px; font-size: 1rem; }
.dl-group { margin-top: 18px; }
.dl-group[hidden], .dl-cl li[hidden] { display: none; }
.dl-group h3 { font-size: 1.5rem; text-transform: uppercase; letter-spacing: .03em; }
.dl-group h3 small { font: 500 .9rem var(--sans); color: var(--faint); letter-spacing: 0; margin-left: 6px; }
.dl-cl { list-style: none; margin: 8px 0 0; padding: 0; columns: 2 150px; column-gap: 16px; }
.dl-cl li { break-inside: avoid; }
.dl-cl a { display: block; padding: 8px 0; min-height: 40px; color: var(--text); text-decoration-color: var(--line); }
.dl-cl a:hover { text-decoration-color: var(--lamp); }
.dl-main .how, .dl-main .faq { padding-left: 0; padding-right: 0; max-width: none; }
.dl-main .cta { padding-left: 0; padding-right: 0; }