/* Shared daytime interface. The scientific color scales and sky canvases keep
   their original colors; the surrounding navigation and controls use this palette. */
:root{--sidebar-width:228px}
html{color-scheme:light;scroll-padding-top:80px}
body{background:var(--bg);color:var(--ink);font-family:Pretendard,"Apple SD Gothic Neo","Noto Sans KR",sans-serif}
button,input,select,textarea{font:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.sidebar{width:var(--sidebar-width);padding:28px 16px 0;background:var(--panel);color:var(--muted);border-right:1px solid var(--line);z-index:50;transform:none;box-shadow:none}
.sidebar .wordmark{margin:0 12px;color:var(--ink);gap:10px;flex-shrink:0}
.wordmark>span{font-size:23px;letter-spacing:2px}
.wordmark svg{width:32px;height:32px;stroke:var(--cyan)}
.wordmark small{font-size:7px;letter-spacing:.7px;color:var(--muted)}
.nav-caption{margin:30px 12px 12px;color:#8290a5;font-size:9px;letter-spacing:1.5px;flex-shrink:0}
.sidebar nav{display:block;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#d4ddeb transparent;padding:0 0 12px;flex:1}
.sidebar nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;margin:3px 0;color:var(--muted);font-size:12px;font-weight:500;border:0;border-radius:9px;min-height:38px;line-height:1.5;transition:background .15s,color .15s}
.sidebar nav a.active{background:var(--accent-soft);color:var(--cyan);font-weight:700;border:0;box-shadow:inset 3px 0 var(--cyan)}
.sidebar nav a:hover{background:var(--panel-soft);color:var(--ink)}
.sidebar nav a.active:hover{background:var(--accent-soft);color:var(--cyan)}
.sidebar nav a[data-page=observations],.sidebar nav a[data-page=events],.sidebar nav a[data-page=sky]{margin-top:14px}
.nav-icon{width:18px;flex:0 0 18px;color:inherit;font-size:16px;text-align:center;opacity:.85}
.nav-no{color:#8c9bb0;margin-left:auto;font-size:9px}
.sidebar-note{display:none}
.side-bottom{position:static;margin-top:auto;padding:10px 8px 0;border-top:1px solid var(--line);flex-shrink:0;background:var(--panel)}
.side-bottom>a{display:flex;align-items:center;min-height:34px;margin:2px -4px;padding:6px 8px;border-radius:7px;font-size:11px;color:var(--muted)}
.side-bottom>a.active{color:var(--cyan);background:var(--accent-soft);font-weight:650}
.side-bottom>a:hover{color:var(--ink);background:var(--panel-soft)}
.account{border-top:1px solid var(--line);margin-top:10px;padding:16px 0;gap:10px}
.account b{color:var(--ink);font-size:12px}
.account small{color:var(--muted);font-size:7px;letter-spacing:.5px}
.avatar{background:var(--accent-soft);color:var(--cyan);border:0;border-radius:12px;width:32px;height:32px}
#logout{color:var(--muted);border-radius:6px;min-width:32px;min-height:32px}
#logout:hover{background:var(--panel-soft);color:var(--cyan)}
.workspace{margin-left:var(--sidebar-width);width:calc(100% - var(--sidebar-width));min-width:0}
.topbar{height:64px;padding:0 30px;background:var(--panel);border-bottom:1px solid var(--line);gap:12px}
.breadcrumb{color:var(--muted);font-size:10px;letter-spacing:.7px}
.breadcrumb b{color:var(--ink);font-weight:650}
.breadcrumb span{color:#aab5c5}
.top-meta{color:var(--muted);font-size:10px}
.status-dot{background:#32af89;box-shadow:none}
main#main{padding:30px;max-width:1700px;margin:0 auto}
.workspace>footer{border-color:var(--line);color:var(--muted);background:transparent;padding:20px 30px;font-size:9px}
.page-title h1{color:var(--ink);font-size:28px;font-weight:700;letter-spacing:-.8px}
.page-title p{color:var(--muted);line-height:1.8}
.page-kicker,.eyebrow,.tiny-label,.page-index{color:var(--muted)}
.primary{background:var(--cyan);color:#fff;border:1px solid var(--cyan);border-radius:8px}
.primary:hover{background:#325bd0;color:#fff}
.outline-button,.secondary{border-color:var(--line);background:var(--panel);color:var(--ink);border-radius:8px}
.outline-button:hover,.secondary:hover{background:var(--accent-soft);border-color:#c7d5fa;color:var(--cyan)}
.segmented{background:var(--panel-deep);padding:4px;border-radius:9px}
.segmented button{border-radius:6px;color:var(--muted)}
.segmented button.active{background:var(--panel);color:var(--cyan);box-shadow:0 1px 4px #26334d0a}
.segmented button:hover{background:var(--panel);color:var(--ink)}
.text-link:hover{color:#254fbf}
input:not([type=range]):not([type=checkbox]),select,textarea,#llm-question{background:var(--panel);color:var(--ink);border-color:#dbe3ee;border-radius:8px}
input::placeholder,textarea::placeholder{color:#7c8ba0}
input[type=range],input[type=checkbox]{accent-color:var(--cyan)}
option{background:var(--panel);color:var(--ink)}
.data-table th{background:var(--panel-soft);color:var(--muted)}
.data-table td{color:var(--ink);border-color:var(--line)}
.data-table tr.selected td{background:var(--accent-soft);color:var(--ink)}
.data-table tbody tr[data-location]:hover{background:var(--panel-soft)}
.atlas-panel,.detail-panel,.observation-record,.observation-reading article,.research-comparison>section,.collection-summary>div,.admin-training,.admin-nowcast,.extended-weather,.admin-extended-weather,.archive-source,.atlas-explore-card,.atlas-inspector,.map-panel,.earth-atlas-map,.solar-layout>section:last-child{border-color:var(--line);border-radius:12px;background:var(--panel)}
.atlas-map-top,.map-head,.national-map-legend{background:var(--panel-soft)}
.badge{background:var(--success-soft);color:var(--success);border-color:#d1eddf;border-radius:6px}
.badge.pending{background:var(--amber-soft);color:var(--amber);border-color:#f2dfb8}
.badge.neutral{background:var(--panel-deep);color:var(--muted);border-color:var(--line)}
.chunk.failed,.training-error,.form-error{background:var(--danger-soft);color:var(--red);border-color:#f2d4d8}
.positive{color:#cc5b40!important}.negative{color:#3578cf!important}
.chart-axis{fill:var(--muted)}
.chart-grid,.chart-baseline{stroke:var(--line)}
.chart-line{stroke:var(--cyan)}
.chart-area{fill:var(--accent-soft);fill-opacity:.8}
.chart-selected{fill:var(--amber);stroke:var(--panel)}
.series-primary:before,.chart-series-labels .series-primary:before{background:var(--cyan)}
.series-compare:before,.chart-series-labels .series-compare:before{background:var(--amber)}
.region-options{background:var(--panel);color:var(--ink);border-color:var(--line);box-shadow:0 12px 36px #2435531c;border-radius:10px}
.region-options [role=option]:hover,.region-options [aria-selected=true]{background:var(--accent-soft);color:var(--cyan)}
#toast{background:var(--ink);color:#fff;border:0;border-radius:10px;box-shadow:0 6px 24px #17243b22}
/* Keep the weather view inside the same navigation shell as every other page. */
body[data-page=dashboard]{background:var(--bg);color:var(--ink)}
body[data-page=dashboard] .sidebar{display:flex}
body[data-page=dashboard] .topbar{display:flex}
body[data-page=dashboard] .workspace{margin-left:var(--sidebar-width);width:calc(100% - var(--sidebar-width))}
body[data-page=dashboard] #main{max-width:1500px;padding:24px 28px}
body[data-page=dashboard] .wx-brand-row{display:none}
body[data-page=dashboard] .wx-nav{margin-top:0}
body[data-page=dashboard] .workspace>footer{padding:20px 28px;margin:0;max-width:none}
/* Access and account pages use the same daytime palette. */
.login-body{background:var(--bg)}
.login-art{background:radial-gradient(ellipse at 50% 38%,#e0ebff,#edf2fb 55%,#f5f7fc);border-color:var(--line)}
.login-art .wordmark{color:var(--ink)}
.login-panel{background:var(--panel);color:var(--ink)}
.login-form h2,.login-art-caption h1,.login-complete,.login-complete h1{color:var(--ink)}
.login-art-caption p,.login-art-footer,.login-art-footer span,.orbital-label{color:var(--muted)}
.orbital-art .orbit{border-color:#89a5d34a}
.login-submit{border-radius:9px}
.login-divider:before,.login-divider:after{background:var(--line)}
.solar-inspector{background:#fffffff2;box-shadow:0 10px 30px #0b172326;border-color:var(--line)}
.solar-cosmos{box-shadow:0 8px 30px #17243b0a;border-color:var(--line)}
.solar-scene-toolbar,.solar-body-rail,.solar-scene-credit,.solar-3d-timeline{background:var(--panel);border-color:var(--line)}
.solar-view-switch button.active,.solar-body-rail button.active{background:var(--accent-soft);color:var(--cyan)}
.solar-body-rail button.active:before{background:var(--cyan)}
.solar-body-rail button:hover{background:var(--panel-soft)}
.solar-body-rail button.active small,.solar-body-rail button.active em{color:var(--cyan)}
.sidebar-close,.nav-backdrop{display:none}
.mobile-menu{display:none;background:var(--panel-soft);color:var(--ink);width:36px;height:36px;margin:0;border-radius:9px;font-size:19px;flex-shrink:0}
@media(min-width:1001px){.sidebar{transform:none!important}.sidebar.open:after{display:none}}
@media(max-width:1300px) and (min-width:1001px){
 body[data-page=dashboard] .wx-columns{grid-template-columns:minmax(0,1fr) 290px;gap:16px}
 body[data-page=dashboard] .wx-nav{flex-wrap:wrap;gap:8px;padding:10px 18px}
 body[data-page=dashboard] .wx-search{margin-left:auto}
}
@media(max-width:1000px){
 .sidebar{width:var(--sidebar-width);transform:translateX(-100%);padding-top:26px;transition:transform .2s;box-shadow:none}
 .sidebar.open{transform:translateX(0);box-shadow:12px 0 40px #15253b1f}
 .sidebar.open:after{display:none}
 .workspace,body[data-page=dashboard] .workspace{margin-left:0;width:100%}
 .mobile-menu{display:grid;place-items:center}
 .sidebar-close{display:grid;place-items:center;position:absolute;right:10px;top:8px;width:28px;height:28px;background:transparent;color:var(--muted);border-radius:6px;font-size:21px}
 .sidebar-close:hover{background:var(--panel-soft)}
 .nav-backdrop:not([hidden]){display:block;position:fixed;inset:0;z-index:45;background:#17243b4d;backdrop-filter:blur(2px)}
 body.menu-open{overflow:hidden}
 .topbar{padding:0 20px;height:60px}
 .top-meta{margin-left:auto}
 main#main{padding:26px 20px}
}
@media(max-width:600px){
 .topbar{padding:0 14px;gap:10px;height:56px}
 .top-meta{font-size:9px;gap:8px}.top-meta>span:not(.status-dot):first-of-type{display:none}
 .breadcrumb{font-size:8px;letter-spacing:.3px}
 main#main,body[data-page=dashboard] #main{padding:18px 12px}
 .page-title h1{font-size:24px}
 .workspace>footer,body[data-page=dashboard] .workspace>footer{padding:18px 14px;gap:8px;flex-wrap:wrap}
 .solar-inspector{background:var(--panel);box-shadow:none}
}
@media(prefers-reduced-motion:reduce){.sidebar,.sidebar nav a{transition:none}}

/* Secondary weather information remains legible at small text sizes. */
.wx-current-stats span,.wx-observation-source,.wx-hourly-table th small,.wx-hourly-table .wx-lead td,.wx-hourly-table .wx-lead th,.wx-credit,.wx-section-caption,.wx-condition-grid article>strong small,.wx-condition-grid article>p,.wx-condition-grid details,.wx-condition-grid details summary,.wx-history-grid small,.wx-small,.wx-score-panel>p:not(.wx-small),.wx-score-stats>div,.wx-health-row,.wx-health-row b,.wx-space-mini>p:not(.wx-small),.wx-learning-count span,.wx-learning-mini>p,.wx-learning-mini details,.wx-page-note,.wx-waiting,.wx-panel-head h1 small{color:var(--muted)}
.wx-credit>span,.wx-learning-mini summary{color:var(--cyan)}

.breadcrumb b{font-size:11px;letter-spacing:0}
.complete-body{background:var(--bg);color:var(--ink)}
.complete-panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:40px}
.complete-panel h1{color:var(--ink)}.complete-panel p{color:var(--muted)}

/* Geographic reference stays legible above continuous weather fields. */
.google-layer-controls{position:absolute;z-index:4;bottom:56px;left:12px;background:#fffffff5;border:1px solid var(--line);border-radius:8px;padding:8px 11px;box-shadow:0 2px 8px #2435531a}
.google-layer-controls[hidden]{display:none}
.google-layer-controls label{display:flex;align-items:center;gap:9px;font-size:11px;color:var(--ink);white-space:nowrap}
.google-layer-controls input[type=range]{width:100px;min-height:20px;accent-color:var(--cyan)}
.google-layer-controls output{min-width:28px;text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.field-preview-city{fill:#243a52;stroke:#fff;stroke-width:3px}
@media(max-width:600px){.google-layer-controls{left:9px;bottom:54px;padding:6px 9px}.google-layer-controls input[type=range]{width:85px}}

/* Helper/status text is a separate row throughout shared form toolbars. */
.has-control-feedback{min-width:0}
.toolbar.has-control-feedback,.wx-nav.has-control-feedback,.dash-controls.has-control-feedback{flex-wrap:wrap;row-gap:10px}
.toolbar.has-control-feedback{align-items:center}
.toolbar.has-control-feedback>label{display:flex;align-items:center;gap:8px;min-width:0;max-width:100%;min-height:42px}
.toolbar.has-control-feedback>label select,.toolbar.has-control-feedback>label .region-combobox{min-height:42px}
.toolbar.has-control-feedback>.location-tools{width:auto;max-width:none;flex:0 0 auto;align-self:center;gap:0}
.location-tools .location-button{margin:0;white-space:nowrap}
.has-control-feedback>.control-feedback,.toolbar>.source-meta,.schedule-form>.source-meta{order:99;grid-column:1/-1;flex:1 1 100%;width:100%;min-width:0;max-width:100%;margin:0}
.control-feedback{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px}
.control-feedback .location-note{position:static;flex:1 1 200px;min-width:0;max-width:100%;margin:0;padding:0;background:none;white-space:normal;overflow-wrap:anywhere;word-break:normal;font-size:11px;line-height:1.7;color:var(--muted)}
.control-feedback .text-button{padding:0;min-height:28px;white-space:nowrap;font-size:11px}
.control-feedback [hidden]{display:none}
.toolbar>.source-meta,.schedule-form>.source-meta{overflow-wrap:anywhere;word-break:normal;line-height:1.7}
.wx-nav.has-control-feedback{row-gap:0;padding-bottom:10px}
.wx-nav>.control-feedback{justify-content:flex-end;text-align:right}
.wx-nav>.control-feedback .location-note{flex:0 1 auto}
.wx-search.dash-place-block{min-width:0}
@media(max-width:600px){
 .toolbar.has-control-feedback>label{flex-wrap:wrap}
 .observation-toolbar.has-control-feedback{align-items:end}
 .observation-toolbar.has-control-feedback>label{display:flex;flex-direction:column;align-items:stretch;gap:5px}
 .observation-toolbar.has-control-feedback>.location-tools{align-self:end;width:100%}
 .toolbar.has-control-feedback .location-tools .location-button{width:auto;max-width:100%}
 .observation-toolbar.has-control-feedback .location-tools .location-button{width:100%}
 .toolbar.has-control-feedback>.control-feedback{grid-column:1/-1}
 .wx-nav>.control-feedback{padding:0 0 3px;text-align:left;justify-content:flex-start}
 .control-feedback .location-note{font-size:10px}
}