/* Extended range: the edge row, continuation rows, day dividers, daily cards, and the outlook map card. */

/* the edge: where the free twelve hours end */
.edge{display:grid;grid-template-columns:1fr auto;align-items:center;height:64px;border-radius:14px;overflow:hidden;background:linear-gradient(90deg,#f3e6d0,#dcd8f0);color:#3b405c;border:0;width:100%;text-align:left;padding:0 14px 0 16px;cursor:pointer;font:inherit;animation:rise .45s ease both}
.edge:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.edge .el{display:flex;flex-direction:column;gap:2px;min-width:0}
.edge .el b{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:20px;line-height:1.15}
.edge .el span{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.edge .circ{flex:none;width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center}
.edge .circ svg{transition:transform .25s ease}
.edge[aria-expanded="true"] .circ svg{transform:rotate(180deg)}
.edge.quiet{cursor:default;background:linear-gradient(90deg,#ece8e0,#e4e2ea)}
.edge.quiet .circ{display:none}
.rows.compact .edge{height:48px;border-radius:10px}
.rows.compact .edge .el b{font-size:16px}

/* day dividers: "Tomorrow · Tuesday" in the sunrise-row treatment */
.dayrow{display:flex;align-items:center;justify-content:space-between;gap:10px;height:40px;border-radius:12px;padding:0 14px;background:linear-gradient(90deg,#e8e4f3,#f0ece2);font-family:"IBM Plex Mono",monospace;color:#3b405c;animation:rise .45s ease both}
.dayrow b{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.dayrow span{font-size:12px;font-weight:600;color:var(--ink2)}
.rows.compact .dayrow{height:30px;border-radius:9px}
.rows.compact .dayrow b{font-size:11.5px}

/* rows past the animation budget: a still sky, no canvas */
.row .stage.still{background-image:radial-gradient(circle at 78% 40%, rgba(255,255,255,.55) 0 22%, transparent 24%),radial-gradient(circle at 30% 60%, rgba(255,255,255,.4) 0 18%, transparent 20%)}

/* outlook map card: reuses the radar card's look; its own ids so the radar code never touches it */
.outlook .map::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:450;box-shadow:inset 0 0 0 6px #4d9a88, inset 0 0 0 7px rgba(255,255,255,.6);border-radius:14px}
.outlook .map.expanded::after{border-radius:0}
.outlook .map .tag{background:#4d9a88;color:#fff}
.outlook .poprow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.outlook .poprow .tog{width:46px;height:26px}
.outlook .poprow .tog span{width:20px;height:20px}
.outlook .poprow .tog[aria-checked="true"] span{left:23px}
.outlook .legend .popk::before{background:linear-gradient(90deg,rgba(120,160,220,.15),rgba(120,160,220,.6))}
.outlook .hd .ttl small{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}

/* ---- three screens ---- */
.views{position:fixed;left:16px;right:16px;bottom:calc(14px + env(safe-area-inset-bottom,0px));max-width:398px;margin:0 auto;z-index:1500;display:flex;border:1.5px solid var(--ink);border-radius:999px;overflow:hidden;background:var(--paper);box-shadow:0 10px 30px -12px rgba(43,49,73,.45)}
body.map-open .views{display:none}
.views button{flex:1;border:0;background:transparent;color:var(--ink);font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:600;letter-spacing:.06em;padding:11px 0;cursor:pointer}
.views button+button{border-left:1.5px solid var(--ink)}
.views button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.views button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.view{margin-bottom:14px}
body[data-view="hours"] #view3d,body[data-view="hours"] #view7d,body[data-view="hours"] #outlook{display:none}
body[data-view="3d"] .gauge,body[data-view="3d"] section.radar:not(.outlook),body[data-view="3d"] #rows,body[data-view="3d"] #view7d{display:none}
body[data-view="7d"] .gauge,body[data-view="7d"] section.radar:not(.outlook),body[data-view="7d"] #rows,body[data-view="7d"] #view3d{display:none}
.daycard.tap{cursor:pointer}
.daycard.tap:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.daycard.open{box-shadow:inset 0 0 0 2px var(--ink)}
.rows.detail{margin:-2px 0 10px 0}
.edge .circ svg{transition:none}
body.still .row,body.still .sunrow,body.still .daycard,body.still .dayrow,body.still .edge{animation:none!important;opacity:1!important}

/* 7-day: a weekday label, then a compact row with the sky on the right */
.dayhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:14px 4px 6px}
.dayhead b{font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.dayhead span{font-size:14px;color:var(--ink2);text-align:right;min-width:0}
.rows.view .dayhead:first-child{margin-top:0}
.row.dayr{cursor:pointer}
.row.dayr .stage.split{display:flex}
.row.dayr .stage.split .seg{flex:1;position:relative;min-width:0;overflow:hidden}
.row.dayr .stage.split .seg+.seg{box-shadow:-10px 0 14px -8px rgba(59,64,92,.18)}
.row.dayr .stage.split .seg canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.row.dayr .stage.split .lab,.row.dayr .stage.split .p{z-index:1}
.row.dayr:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.row.dayr.open{box-shadow:inset 0 0 0 2px var(--ink)}
.row.dayr .temp .h b{font-size:12px;letter-spacing:.06em}

/* outlook loading */
.oload{display:grid;grid-template-columns:40% 60%;height:96px;border-radius:18px;overflow:hidden;background:var(--card);margin-bottom:14px}
.oload .sky{position:relative;background:#e1eef8;transition:background .8s ease}
.oload .sky canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.oload .msg{display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 16px;color:var(--ink)}
.oload .msg b{font-family:"Fraunces",Georgia,serif;font-weight:400;font-size:19px;line-height:1.15}
.oload .msg span{font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}

/* 7-day rows: high and low stacked on the left */
.rows.compact .row.dayr,.row.dayr{height:104px;grid-template-columns:34% 66%;border-radius:14px}
.rows.compact .row.dayr .temp.hilo{width:auto;padding:0}
.rows.compact .row.dayr .temp.hilo b{font-size:30px;font-weight:500}
.rows.compact .row.dayr .temp.hilo b sup{font-size:.45em;top:.3em}
.rows.compact .row.dayr .temp.hilo small{font-size:10px}
.rows.compact .row.dayr .temp,.row.dayr .temp.hilo{display:grid;grid-template-rows:1fr 1fr;grid-template-columns:100%;align-items:stretch;justify-items:stretch;padding:0;color:#3b405c;background:transparent;width:100%;height:100%}
.rows.compact .row.dayr .temp.hilo>div,.row.dayr .temp.hilo>div{display:flex;align-items:center;justify-content:space-between;padding:0 12px;line-height:1;width:100%;height:100%;min-width:0}
.row.dayr .temp.hilo b{font-family:"Fraunces",Georgia,serif;font-variation-settings:"opsz" 144;font-weight:500;font-size:30px;letter-spacing:-.03em}
.row.dayr .temp.hilo b sup{font-size:.45em;font-weight:600;vertical-align:top;position:relative;top:.3em}
.row.dayr .temp.hilo small{font-family:"IBM Plex Mono",monospace;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.rows.compact .row.dayr .stage .lab,.row.dayr .stage .lab{bottom:auto;top:12px;left:12px;transform:none;font-size:13px}
.rows.compact .row.dayr .stage .p,.row.dayr .stage .p{top:auto;bottom:12px;left:12px;right:auto;transform:none;font-size:13px;max-width:calc(100% - 24px)}
.rows.compact .row.dayr .stage .lab,.row.dayr .stage .lab{max-width:calc(100% - 24px)}
.rows.compact .row.dayr{height:104px}
.sunline{display:flex;justify-content:space-between;font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--ink2);padding:6px 6px 2px}

/* a breath between days on the 3-day screen; the banner clears the map credit */
.rows.view .dayrow{margin-top:14px}
.rows.view .dayrow:first-child{margin-top:0}
#mapWrap-o .banner{bottom:32px}
#mapWrap-o .credit{right:8px;bottom:6px}
body.nosun .sunline{display:none}
.dayhead.tap,.sunline.tap{cursor:pointer}
.rows.detail[hidden],.rows.view[hidden]{display:none!important}

.forecast-note{font-size:12px;line-height:1.4;color:var(--ink2);margin:0 4px 8px}