/* Corner radii follow droneweather.html, the sibling tool: 8px on cards and
   tiles, 6px on controls. The stage is the one large surface on the page, so
   it takes the 10px the flight checklist panel already uses. */
.sun-page{--r-control:6px;--r-tile:8px;--r-stage:10px}

.sun-page .pg-hero{padding-block:clamp(44px,6vw,var(--s-8)) clamp(28px,3.5vw,var(--s-6));border-bottom:1px solid var(--line)}
.sun-page .pg-hero h1{font-family:var(--f-display);font-size:var(--t-3xl);font-weight:400;line-height:.94;letter-spacing:-.03em;margin:0;max-width:15ch}
.sun-page .pg-hero h1 em,.sun-page h2 em{font-style:italic;color:var(--accent)}
.sun-hero-copy{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.75fr);column-gap:clamp(36px,6vw,88px);row-gap:var(--s-5);align-items:start;margin-top:var(--s-6)}
.hero-date{justify-self:end;text-align:right;white-space:nowrap;font:clamp(34px,4vw,54px)/.95 var(--f-display);letter-spacing:-.025em;color:var(--ink)}
.sun-page .pg-hero .lede{color:var(--dim);font-size:var(--t-lg);line-height:1.75;max-width:62ch;margin:0}
.sun-rule{display:grid;grid-template-columns:auto minmax(30px,1fr) auto;align-items:center;gap:var(--s-3)}
.sun-rule i{height:1px;background:var(--line)}
.sun-rule .mono:last-child{text-align:right;color:var(--faint)}

.planner-shell{padding-block:clamp(24px,3vw,var(--s-5)) clamp(24px,3vw,var(--s-5))}
.planner-toolbar{display:grid;grid-template-columns:minmax(210px,1fr) auto;gap:var(--s-4);align-items:end;margin-bottom:var(--s-5)}
.planner-date{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.planner-date input{min-height:42px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--paper-2);color:var(--ink);font:12px var(--f-mono);letter-spacing:.06em;padding:0 12px;color-scheme:dark}
[data-theme]:not([data-theme="dark"]) .planner-date input{color-scheme:light}
.planner-date button,.planner-location button,.copy-plan{min-height:42px;border:1px solid var(--line);border-radius:var(--r-control);background:transparent;color:var(--dim);font:9px var(--f-mono);letter-spacing:.13em;text-transform:uppercase;padding:0 14px;cursor:pointer;transition:color var(--fast),border-color var(--fast),background var(--fast)}
.planner-date button:hover,.planner-location button:hover,.copy-plan:hover{color:var(--ink);border-color:var(--accent);background:var(--accent-bg)}
.date-step{width:42px;padding:0!important;font-size:15px!important}
.planner-location{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.planner-location button[data-primary]{border-color:var(--accent-dim);color:var(--accent)}

.sun-stage{--sky-top:#10141b;--sky-mid:#273546;--sky-low:#d8794d;position:relative;border:1px solid var(--line);border-radius:var(--r-stage);background:var(--paper-2);overflow:hidden;isolation:isolate;transition:background 500ms var(--ease)}
.sun-sky{position:relative;min-height:clamp(230px,20vw,280px);overflow:hidden;background:
  radial-gradient(circle at 50% 105%,color-mix(in srgb,var(--sky-low) 72%,transparent),transparent 35%),
  linear-gradient(180deg,var(--sky-top),var(--sky-mid) 60%,var(--sky-low));transition:background 650ms var(--ease)}
.sun-sky::before{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;opacity:var(--cloud-opacity,0);background:
  radial-gradient(ellipse 48% 20% at 18% 24%,rgba(205,216,221,.42),transparent 72%),
  radial-gradient(ellipse 56% 24% at 77% 34%,rgba(171,188,198,.38),transparent 74%),
  linear-gradient(180deg,rgb(76,98,116),rgb(119,137,146) 62%,rgb(148,155,157));
  mix-blend-mode:normal;transition:opacity 650ms var(--ease)}
.sun-sky::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.28;background-image:radial-gradient(circle at 12% 18%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 78% 25%,#fff 0 1px,transparent 1.5px),radial-gradient(circle at 42% 12%,#fff 0 1px,transparent 1.5px);background-size:190px 150px,240px 180px,280px 210px;transition:opacity 500ms var(--ease)}
.sun-stage[data-phase="night"]{--sky-top:#080b12;--sky-mid:#11182a;--sky-low:#28334a}
.sun-stage[data-phase="blue-dawn"],.sun-stage[data-phase="blue-dusk"]{--sky-top:#151c32;--sky-mid:#3f5975;--sky-low:#bf7c72}
.sun-stage[data-phase="golden-morning"],.sun-stage[data-phase="golden-evening"]{--sky-top:#718da3;--sky-mid:#d6956f;--sky-low:#e66f3c}
.sun-stage[data-phase="daylight"]{--sky-top:#8eb7cc;--sky-mid:#c6d6d6;--sky-low:#e6c4a6}
.sun-stage[data-phase="daylight"] .sun-sky::after,.sun-stage[data-phase^="golden"] .sun-sky::after{opacity:0}
.sun-nature{position:absolute;z-index:2;inset:0;width:100%;height:100%;pointer-events:none;image-rendering:pixelated}
.arc-svg{position:absolute;z-index:1;inset:8% 2% 11%;width:96%;height:81%;overflow:visible}
.sun-arc-path{fill:none;stroke:rgba(255,255,255,.28);stroke-dasharray:3 8;stroke-width:1.3;vector-effect:non-scaling-stroke}
.sun-orb,.moon-orb{position:absolute;z-index:1;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);transition:left 180ms linear,top 180ms linear,opacity 350ms var(--ease)}
.sun-orb{width:clamp(26px,4vw,46px);opacity:var(--sun-opacity,1);background:#f5be72;box-shadow:0 0 0 8px rgba(250,190,105,.09),0 0 46px 12px rgba(250,168,76,.45)}
.sun-stage[data-sun="hidden"] .sun-orb{opacity:0}
.moon-orb{width:clamp(24px,3.2vw,38px);opacity:0;overflow:hidden;background:rgba(45,57,78,.7);box-shadow:0 0 0 5px rgba(184,197,218,.05),0 0 24px rgba(184,197,218,.2)}
.moon-face{display:block;width:100%;height:100%;border-radius:50%;image-rendering:pixelated}
.sun-stage[data-moon="visible"] .moon-orb{opacity:var(--moon-opacity,1)}
.sun-horizon{position:absolute;left:0;right:0;bottom:11%;height:1px;background:rgba(255,255,255,.3)}
.sun-horizon::before{content:"Horizon";position:absolute;right:18px;bottom:10px;font:8px var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.sky-time{position:absolute;z-index:4;top:16px;right:20px;text-align:right;color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.35)}
.sky-time strong{display:block;font:clamp(28px,3vw,39px) var(--f-display);font-weight:400;line-height:1}
.sky-time span{display:block;margin-top:6px;font:9px/1.35 var(--f-mono);letter-spacing:.13em;text-transform:uppercase;opacity:.86}
.sky-time #sunWind{margin-top:5px;opacity:.76}
.sky-time .moon-phase-label{margin-top:5px;color:#d6e0ef;opacity:.9}
.sky-time .moon-phase-label[hidden]{display:none}
.sun-advice-box{position:absolute;z-index:5;left:clamp(18px,3vw,36px);bottom:clamp(62px,6vw,78px);max-width:min(860px,78%);color:#fff;text-shadow:0 2px 22px rgba(0,0,0,.62),0 1px 2px rgba(0,0,0,.2)}
.sun-advice-box::before{content:"";position:absolute;z-index:-1;inset:-64px -38vw -62px -90px;pointer-events:none;filter:blur(10px);background:radial-gradient(ellipse 68% 56% at 24% 50%,rgba(11,11,12,.3) 0%,rgba(11,11,12,.18) 38%,rgba(11,11,12,.07) 61%,transparent 84%)}
.advice-k{display:block;font:8px var(--f-mono);letter-spacing:.18em;text-transform:uppercase;opacity:.7;margin-bottom:7px}
.advice-phrase{font-family:var(--f-display);font-size:clamp(28px,3.2vw,44px);font-weight:400;line-height:1.01;letter-spacing:-.025em;margin:0}
.advice-roll{position:relative;display:inline;transition:color var(--fast) var(--ease)}
.advice-accent{color:var(--accent);font-style:italic}
.advice-roll::after{content:"";position:absolute;left:.02em;right:.08em;bottom:-.08em;height:1px;background:rgba(255,255,255,.55);opacity:0;transition:opacity var(--fast) var(--ease)}
.advice-roll.spin{color:rgba(255,255,255,.58)}
.advice-roll.spin::after{opacity:1}
.advice-best{margin-top:10px;font:8.5px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;opacity:.72}

.sun-controls{padding:clamp(14px,1.8vw,20px);background:var(--paper-2);border-top:1px solid var(--line)}
.slider-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-4);align-items:center}
.time-slider{width:100%;height:8px;accent-color:var(--accent);cursor:pointer}
.time-val{font:var(--t-lg) var(--f-mono);color:var(--ink);min-width:96px;text-align:right}
.metrics-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-tile);overflow:hidden;margin-top:14px}
.metric-card{background:var(--paper);padding:12px 14px}
.metric-card .k{font:8px var(--f-mono);letter-spacing:.15em;text-transform:uppercase;color:var(--faint);margin-bottom:7px}
.metric-card .v{font:clamp(20px,2.2vw,28px) var(--f-display);color:var(--ink);line-height:1}
.metric-card .v small{font:9px var(--f-mono);letter-spacing:.08em;color:var(--faint);margin-left:5px;text-transform:uppercase}

.phase-section{padding-block:clamp(28px,4vw,var(--s-6)) clamp(42px,6vw,var(--s-8));border-bottom:1px solid var(--line)}
.phase-head{display:grid;grid-template-columns:1fr auto;gap:var(--s-5);align-items:end;margin-bottom:var(--s-5)}
.phase-head h2{font-family:var(--f-display);font-size:var(--t-2xl);font-weight:400;line-height:1}
.phase-head p{color:var(--dim);font-size:var(--t-sm);line-height:1.65;max-width:50ch;margin-top:12px}
.copy-plan{align-self:end}
.phase-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-tile);overflow:hidden}
.phase-card{position:relative;min-height:160px;text-align:left;border:0;background:var(--paper);color:var(--ink);padding:var(--s-5) var(--s-4);cursor:pointer;transition:background var(--fast),color var(--fast)}
.phase-card::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--phase-color)}
.phase-card:hover,.phase-card.is-near{background:var(--paper-2)}
/* The grid clips to its radius now, and the global focus ring sits 3px outside
   the button, so on the corner cards it would be sliced off. Draw it inside. */
.phase-card:focus-visible{outline-offset:-3px}
.phase-card .phase-n{display:block;font:8px var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin-bottom:20px}
.phase-card strong{display:block;font:22px var(--f-display);font-weight:400;line-height:1.05;margin-bottom:10px}
/* The window's hours are the thing you actually came to read. They spent too
   long as 10px mono : ember on paper at that size is a squint. Same ember,
   the display serif the facts row below already uses, at a size you can read
   across a room : the heading above stays the larger of the two. */
.phase-card .phase-time{display:block;font:clamp(16px,1.55vw,19px)/1.35 var(--f-display);color:var(--accent);
  letter-spacing:.01em;text-wrap:balance}
.phase-card small{display:block;color:var(--dim);font-size:11px;line-height:1.55;margin-top:12px}
.phase-blue{--phase-color:var(--sky)}.phase-gold{--phase-color:var(--accent)}

.facts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-tile);overflow:hidden;margin-top:var(--s-5)}
.fact{padding:var(--s-4);background:var(--paper-2)}
.fact dt{font:8px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.fact dd{font:22px var(--f-display);color:var(--ink)}
.planner-status{min-height:1.5em;margin-top:var(--s-4);font:9px var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}

@media(max-width:760px){
  .sun-hero-copy{grid-template-columns:1fr;row-gap:var(--s-4)}.hero-date{justify-self:start;text-align:left;white-space:normal;font-size:clamp(30px,8vw,44px)}
  .planner-toolbar{grid-template-columns:1fr;align-items:start}.planner-location{justify-content:flex-start}
  .metrics-grid{grid-template-columns:1fr 1fr}.phase-grid{grid-template-columns:1fr 1fr}.facts{grid-template-columns:repeat(3,1fr)}
  .sun-sky{min-height:380px}.sun-advice-box{bottom:96px;max-width:82%}.advice-phrase{font-size:clamp(30px,6vw,42px)}.phase-head{grid-template-columns:1fr}.copy-plan{justify-self:start}
}
@media(max-width:520px){
  .sun-rule{grid-template-columns:auto 1fr}.sun-rule .mono:last-child{grid-column:1/-1;text-align:left}
  .planner-date input{width:100%;order:-1}.planner-date{display:grid;grid-template-columns:42px 42px 1fr;width:100%}.planner-date input{grid-column:1/-1}
  .planner-date #todayBtn{width:auto}.sun-sky{min-height:460px}.sky-time{top:18px;right:18px}.sun-advice-box{left:18px;right:18px;max-width:none;bottom:88px}
  .slider-row{grid-template-columns:1fr}.time-val{text-align:left}.metrics-grid{grid-template-columns:1fr 1fr}
  .phase-grid{grid-template-columns:1fr}.phase-card{min-height:132px}.facts{grid-template-columns:1fr 1fr}.fact:last-child{grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){.sun-stage,.sun-sky,.sun-orb,.moon-orb,.advice-roll{transition:none!important}.advice-roll::after{display:none}}