/* Keep the existing live cards and detail actions; give the radar the first screen. */
#desk :is(#observatory-signals, #advanced-outlook, #activity-planner) { display:none!important; }
#desk.outlook-view #observatory-left { grid-row:2!important; }
#desk #observatory-grid { align-items:start; }
#desk #observatory-forecast { padding:20px; background:linear-gradient(145deg,var(--panel2),var(--panel) 65%); border-radius:16px; }
#desk .forecast-columns { display:none; }
#desk .forecast-heading h2 { font-size:20px; font-weight:500; letter-spacing:-.5px; }
#desk #forecast-coverage { margin:8px 0 18px; }
#desk #daycards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
#desk #daycards > .daycard, #desk #daycards > .daycard:first-child {
  position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; align-items:stretch; gap:7px; min-height:160px;
  padding:14px; border:1px solid color-mix(in srgb,var(--line),#fff 10%); border-radius:12px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--panel2),#fff 4%),var(--panel));
  box-shadow:inset 0 1px #ffffff0a,0 6px 18px #0002; transition:transform .25s,border-color .25s;
}
#desk #daycards > .daycard:hover { transform:translateY(-3px); border-color:#9cbac1; }
#desk #daycards > .daycard::before { content:''; position:absolute; inset:0; z-index:-1; background:radial-gradient(ellipse at 80% 5%,#c5e7f014,transparent 65%); }
#desk #daycards .dc-head { display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:4px; }
#desk #daycards .dc-name { font-size:13px; font-weight:600; }
#desk #daycards .dc-head .dc-date { font-size:10px; }
#desk #daycards :is(.dc-body,.dc-mid) { display:contents; }
#desk #daycards .dc-icon { width:58px; height:48px; margin:0 auto; }
#desk #daycards .dc-icon :is(img,svg) { width:58px; height:58px; }
#desk #daycards .dc-temp { display:flex; justify-content:center; align-items:baseline; gap:10px; }
#desk #daycards .dc-temp b { font-size:27px; font-weight:400; }
#desk #daycards .dc-temp span { font-size:19px; }
#desk #daycards .dc-mid .dc-cond { display:block; color:var(--muted); font-size:10px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#desk #daycards .dc-pop { text-align:center; font-size:10px; color:#a6cbd7; margin-top:auto; }
#desk #daycards .dc-pop::before { content:'Rain '; color:var(--muted); }
#desk #daycards .dc-agreement { display:none; }
html #desk #daycards > .daycard:first-child { grid-column:1/-1!important; display:grid; grid-template-columns:1fr 130px; min-height:185px; padding:22px; background:radial-gradient(ellipse at 80% 30%,#d6b76e25,transparent 65%),linear-gradient(120deg,var(--panel2),var(--panel)); }
#desk #daycards > .daycard:first-child .dc-head { grid-column:1; justify-content:flex-start; gap:12px; }
#desk #daycards > .daycard:first-child .dc-icon { grid-column:2; grid-row:1/span 4; align-self:center; width:130px; height:130px; margin:0; filter:drop-shadow(0 12px 22px #e4c78525); }
#desk #daycards > .daycard:first-child .dc-icon :is(img,svg) { width:130px; height:130px; }
#desk #daycards > .daycard:first-child .dc-temp { grid-column:1; justify-content:flex-start; }
#desk #daycards > .daycard:first-child .dc-temp b { font-size:56px; }
#desk #daycards > .daycard:first-child .dc-temp span { font-size:29px; }
#desk #daycards > .daycard:first-child :is(.dc-cond,.dc-pop) { grid-column:1; text-align:left; font-size:12px; }
#desk #outlook-astronomy { padding:22px; border-radius:16px; background:linear-gradient(150deg,var(--panel2),var(--panel) 55%); overflow:hidden; }
.sky-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sky-eyebrow { color:var(--muted); font-size:9px; letter-spacing:2px; }
#desk .sky-heading h2 { text-transform:none; font-size:20px; letter-spacing:-.4px; color:var(--text); font-weight:500; margin:5px 0; }
.sky-live { font-size:10px; border:1px solid var(--line); border-radius:20px; padding:5px 10px; color:var(--muted); }
.solar-scene { position:relative; margin:16px -6px 0; padding-top:40%; overflow:hidden; }
.solar-haze { position:absolute; inset:0; background:radial-gradient(ellipse at 50% 80%,#e9ba5533,transparent 65%); }
.solar-orbit { position:absolute; inset:0; width:100%; height:100%; fill:none; overflow:visible; }
.solar-track { stroke:#d8ba7340; stroke-width:1; }
.solar-trace { stroke:#ebce8c; stroke-width:1.5; stroke-dasharray:3 10; }
.solar-horizon { stroke:#e4cc8c30; stroke-width:1; }
.solar-star { fill:#ffdf9d; stroke:#ffdf9d; stroke-width:8; stroke-opacity:.12; }
.solar-rays { stroke:#edcd83; stroke-width:1; transform-origin:240px 25px; }
.solar-duration { position:absolute; left:0; right:0; top:40%; text-align:center; }
.solar-duration > span { display:block; font-size:9px; letter-spacing:3px; color:#d6ba7e; }
.solar-duration > strong { display:block; font:38px/1.3 var(--num); letter-spacing:-1px; margin:4px 0; }
.solar-duration small { font-size:10px; color:var(--muted); }
.sun-events { position:relative; display:flex; justify-content:space-between; padding:6px 14px 17px; gap:10px; }
.sun-events > div:last-child { text-align:right; }
.sun-events span, .moon-events span { display:block; font-size:9px; letter-spacing:1.4px; color:var(--muted); }
.sun-events strong { display:block; font:24px/1.5 var(--num); font-weight:400; color:#edcf95; }
.lunar-scene { position:relative; display:flex; align-items:center; gap:28px; padding:25px 20px; margin:4px 0 0; min-height:160px; border:1px solid var(--line); border-radius:14px; overflow:hidden; background:radial-gradient(ellipse at 20% 60%,#8cabb328,transparent 65%),#101519; }
.lunar-stars { position:absolute; inset:0; opacity:.5; background-image:radial-gradient(circle,#b2c6d6 1px,transparent 1.5px),radial-gradient(circle,#dbe3e8 1px,transparent 1.5px); background-size:73px 61px,113px 83px; background-position:13px 15px,46px 30px; }
#outlook-moon-orb { position:relative; width:100px; height:100px; flex:none; border-radius:50%; box-shadow:0 0 35px #c9e5f51c,0 0 0 12px #c9e5f504,0 0 0 24px #c9e5f503; }
#outlook-moon-orb::after { content:''; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 30% 25%,#25323a30 0 6%,transparent 7%),radial-gradient(circle at 36% 55%,#25323a30 0 12%,transparent 14%),radial-gradient(circle at 60% 73%,#25323a20 0 7%,transparent 9%); }
.lunar-copy { position:relative; color:#e0e7eb; }
.lunar-copy h3 { font-size:22px; font-weight:400; margin:8px 0; }
.lunar-copy > p { font-size:12px; color:#b2bec4; margin:5px 0; }
#desk #outlook-moon-next { font-size:10px; color:#b2bec4; }
.moon-events { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:20px 0; border-bottom:1px solid var(--line); }
.moon-events strong { display:block; margin-top:7px; font:17px var(--num); }
.twilight-heading { display:flex; align-items:baseline; justify-content:space-between; padding:18px 0 12px; }
.twilight-heading h3 { font-size:14px; font-weight:500; margin:0; }
.twilight-heading span { font-size:10px; color:var(--muted); }
.twilight-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.twilight-card { position:relative; overflow:hidden; padding:16px 12px; border:1px solid var(--line); border-radius:10px; background:linear-gradient(180deg,#d9ad6c19,var(--panel)); }
.twilight-1 { background:linear-gradient(180deg,#87b6ce1c,var(--panel)); }
.twilight-2 { background:linear-gradient(180deg,#748dba19,var(--panel)); }
.twilight-card i { display:block; height:22px; width:44px; border-top:1px solid #dbbd8a; border-radius:50% 50% 0 0; margin-bottom:10px; }
.twilight-1 i { border-color:#83bacf; }
.twilight-2 i { border-color:#a7b8d7; }
.twilight-card i::after { content:''; display:block; width:5px; height:5px; border-radius:50%; background:#dfc18c; margin: -3px auto; box-shadow:0 0 10px currentColor; }
.twilight-card > span { display:block; font-size:10px; color:var(--muted); }
.twilight-card strong { display:block; font:18px var(--num); margin-top:9px; }
.twilight-card small { display:block; font:14px var(--num); margin-top:5px; color:var(--muted); }
.sky-details { margin-top:20px; border-top:1px solid var(--line); }
.sky-details summary { cursor:pointer; color:var(--muted); font-size:11px; padding:14px 0; }
.sky-footnote { font-size:9px; color:var(--muted); line-height:1.7; margin:6px 0 0; }
@keyframes forecast-float { 50% { transform:translateY(-5px); } }
@keyframes solar-breathe { 50% { opacity:.45; transform:scale(1.08); } }
@keyframes solar-drift { to { stroke-dashoffset:-104; } }
@keyframes solar-spin { to { transform:rotate(360deg); } }
@keyframes star-shimmer { 50% { opacity:.22; } }
@media(prefers-reduced-motion:no-preference) {
  html[data-motion="full"] #daycards .dc-icon { animation:forecast-float 5s ease-in-out infinite; }
  html[data-motion="full"] #daycards > :nth-child(3n) .dc-icon { animation-delay:-2s; }
  html[data-motion="full"] .solar-haze { animation:solar-breathe 6s ease-in-out infinite; }
  html[data-motion="full"] .solar-trace { animation:solar-drift 18s linear infinite; }
  html[data-motion="full"] .solar-rays { animation:solar-spin 35s linear infinite; }
  html[data-motion="full"] #outlook-moon-orb { animation:forecast-float 7s ease-in-out infinite; }
  html[data-motion="full"] .lunar-stars { animation:star-shimmer 5s ease-in-out infinite; }
  html[data-motion="full"] .twilight-card i::after { animation:forecast-float 4s ease-in-out infinite; }
}
html[data-gauges-paused] :is(#daycards .dc-icon,.solar-haze,.solar-trace,.solar-rays,#outlook-moon-orb,.lunar-stars,.twilight-card i::after) { animation-play-state:paused!important; }
@media(max-width:700px) {
  #desk.outlook-view #observatory-left { grid-row:auto!important; }
  #desk #observatory-forecast, #desk #outlook-astronomy { padding:16px; }
  #desk #daycards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  #desk #daycards > .daycard:first-child { grid-template-columns:1fr 100px; padding:16px; }
  #desk #daycards > .daycard:first-child .dc-icon, #desk #daycards > .daycard:first-child .dc-icon :is(img,svg) { width:100px; height:100px; }
  .solar-duration > strong { font-size:28px; }
  .solar-duration { top:32%; }
  .lunar-scene { gap:18px; padding:22px 14px; }
  .lunar-copy h3 { font-size:18px; }
  .twilight-cards { gap:6px; }
  .twilight-card { padding:12px 8px; }
  .twilight-card > span { font-size:9px; }
  .twilight-card strong { font-size:15px; }
}

.weather-view { display:flex; gap:3px; padding:3px; border:1px solid var(--line); border-radius:9px; background:var(--panel); order:4; }
.weather-view button { min-height:36px; padding:6px 12px; border:1px solid transparent; border-radius:6px; background:none; color:var(--muted); font:inherit; font-size:12px; cursor:pointer; white-space:nowrap; }
.weather-view button[aria-pressed="true"] { color:var(--text); background:var(--panel2); border-color:var(--line); }
#desk.outlook-view #observatory-radar { height:auto; min-height:0; }
#desk.outlook-view #observatory-left { grid-row:2 / span 2; }
#desk #outlook-astronomy { grid-column:2; grid-row:2; padding:20px; }
#desk #outlook-astronomy[hidden] { display:none; }
#outlook-sky-times > div { display:flex; justify-content:space-between; gap:16px; padding:5px 0; border-bottom:1px solid var(--line); font-size:12px; }
#outlook-sky-times > div > :last-child { text-align:right; font-variant-numeric:tabular-nums; }
#outlook-moon-next { font-size:12px; color:var(--muted); line-height:1.6; margin-bottom:0; }
@media(max-width:700px) {
  #desk.outlook-view #observatory-left, #desk #outlook-astronomy { grid-column:1; grid-row:auto; }
  .weather-view { margin-left:auto; }
}

html body > header { min-height:54px; padding:8px 16px; gap:12px; }
html header #brand { width:32px; height:32px; }
html header h1 { font-size:23px; }
#desk.active { padding:8px; }
#desk #observatory-heading { min-height:36px; margin:0 4px 8px; gap:16px; }
#desk #hero-place { font-size:13px; text-transform:none; letter-spacing:0; margin:0 0 2px; }
#desk #clock-date { font-size:10px; }
#desk .observatory-clock { margin-left:auto; padding-left:12px; }
#desk .observatory-clock > span { display:none; }
#desk #clock-time { font-size:19px; }
#desk #hero-alerts { min-height:32px; padding:6px 10px; }
#desk #observatory-grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:12px; }
#desk #observatory-radar { grid-column:1/-1; grid-row:1; display:flex; flex-direction:column; min-height:460px; height:calc(100dvh - 126px); background:var(--panel); }
#desk #radar-shelf { position:relative; z-index:1; display:flex; align-items:stretch; flex:none; border-bottom:1px solid var(--line); background:var(--panel); }
#desk #gauges { flex:1; min-width:0; order:0; gap:0; padding:8px 0; margin:0; border:0; border-radius:0; background:none; overflow-x:auto; grid-template-columns:repeat(8,minmax(110px,1fr)); }
#desk #gauges > .gauge { position:relative; padding:0 7px 0 44px; min-height:42px; min-width:0; border:0; border-right:1px solid var(--line); border-radius:0; background:none; grid-column:auto!important; }
#desk #gauges h3 { margin:0 0 3px; font-size:10px; white-space:nowrap; }
#desk #gauges .gwrap { position:static; }
#desk #gauges .wx-icon svg { width:100%; height:100%; margin:0; }
#desk #gauges .ginner { justify-content:flex-start; text-align:left; }
#desk #gauges > .gauge:last-child { border:0; }
#desk #gauges .gwrap > span[aria-hidden] { display:block; position:absolute; left:7px; top:5px; }
#desk #gauges .wx-icon { width:28px; height:28px; box-sizing:border-box; }
#desk #gauges .wx-orbit, #desk #gauges .wx-chrome { padding:5px; }
#desk #gauges .ginner b { font-size:20px; }
#desk #gauges .ginner small { font-size:9px; }
#desk #gauges .ginner > span { display:none; }
#desk #gauges .gauge:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.gauge-style-control { padding:6px 9px; display:flex; flex-direction:column; justify-content:center; gap:3px; border-left:1px solid var(--line); }
.gauge-style-control label { font-size:10px; color:var(--muted); }
.gauge-style-control select { width:155px; min-height:30px; font-size:11px; padding:4px; }
#desk #desk-radar { position:relative; inset:auto; flex:1; width:100%; height:auto!important; min-height:0; }
#desk #desk-radar-frame, #desk #desk-radar-still { position:absolute; inset:0; }
#desk #desk-radar-caption { bottom:0; pointer-events:none; background:var(--panel); padding:4px 8px; font-size:10px; }
#desk #observatory-left { grid-column:1; }
#desk #observatory-signals { grid-column:2; display:block; }
@media(max-width:1100px) {
  #desk #radar-shelf { flex-direction:column; }
  .gauge-style-control { flex-direction:row; align-items:center; justify-content:flex-end; padding:2px 8px; border:0; }
  .gauge-style-control select { min-height:28px; }
  #desk #hero-alerts { flex-basis:auto; }
}
@media(max-width:700px) {
  html body > header { padding:6px 8px; gap:6px; }
  #desk #observatory-grid { display:grid; grid-template-columns:minmax(0,1fr); }
  #desk #observatory-radar { height:calc(100dvh - 140px); min-height:430px; }
  #desk #observatory-left, #desk #observatory-signals { grid-column:1; }
  #desk #observatory-heading { gap:8px; }
  #desk #gauges { grid-template-columns:repeat(8,118px); padding:8px 0; }
  #desk #gauges > .gauge { border-right:1px solid var(--line); }
  #desk #hero-alerts { flex-basis:100%; }
}

html body > header .tab { padding:8px 12px; min-height:34px; }
#desk #observatory-heading #hero { flex:none; padding:0 12px; border:0; border-left:1px solid var(--line); border-radius:0; background:none; gap:0; }
#desk #observatory-heading #hero :is(.observatory-current-label,#hero-feels,#hero-hilo,#hero-fx) { display:none; }
#desk #observatory-heading #hero-temp { font-size:28px; }
#desk #observatory-heading #hero-icon, #desk #observatory-heading #hero-icon :is(img,svg) { width:30px; height:30px; }
#desk #observatory-heading .hero-now > div:last-child { min-width:0; }
#desk #observatory-heading #hero-cond { font-size:11px; }
#desk #observatory-heading .observatory-clock { order:2; }
#desk #observatory-heading #hero-alerts { order:3; }
@media(max-width:700px) {
  #desk #observatory-heading #hero { padding:0 8px; }
  #desk #observatory-heading .observatory-clock { display:none; }
}
