/* Latah Weather — full-screen mode. One screen, no scrolling, readable across a room.
   Everything is sized in rem, and 1rem is 1/100 of a 16:9 screen's width (19.2px on a 1080p TV),
   so the layout scales from a laptop to a 4K TV; other shapes keep the type size the height allows. */
html:has(body.display) { font-size: min(1vw, 1.7778vh); }
body.display { margin: 0; padding: 0; height: 100vh; height: 100dvh; overflow: hidden; background: #0B1713; color: #fff;
  font: 400 1rem/1.35 var(--f-ui); cursor: default; }
body.display.idle, body.display.idle * { cursor: none !important; }

/* the photo and live sky, filling the screen (the same scene as the app) */
.display .hero.tv-hero { position: fixed; inset: 0; height: auto; --a: var(--ad); --r: var(--rd); --t: 43cqh; }
.display .hero.tv-hero::after { height: 62%; background: linear-gradient(180deg, rgba(4, 14, 10, 0), rgba(4, 14, 10, .35) 40%, rgba(4, 14, 10, .7)); }
.display .hero.tv-hero::before { height: 22%; opacity: .8; }
@media (max-width: 899px) { .display .hero.tv-hero { --a: var(--am); --r: var(--rm); } }

/* the information layer; nudged a few pixels now and then so nothing burns into a TV */
.tv-ui { position: fixed; inset: 0; z-index: 2; transition: transform 2s ease-in-out; text-shadow: 0 .1rem .9rem rgba(0, 10, 6, .4); }
.tv-live { display: contents; }

/* top: brand and clock */
.tv-top { position: absolute; top: 2.2rem; left: 3rem; right: 3rem; display: flex; justify-content: space-between; align-items: flex-start; gap: 2rem; }
.tv-brand { display: flex; align-items: center; gap: .55rem; margin: 0; font-family: var(--f-display); font-size: 2.3rem; line-height: 1; }
.tv-brand .mark { width: 3.1rem; height: 2.3rem; margin-right: .3rem; }
.tv-brand .mark .m-sun { fill: var(--canola); } .tv-brand .mark .m-h1 { fill: rgba(255, 255, 255, .7); } .tv-brand .mark .m-h2 { fill: #fff; }
.tv-brand .b1 { font-weight: 700; font-variation-settings: "SOFT" 60; } .tv-brand .b2 { font-weight: 350; font-variation-settings: "SOFT" 100; }
.tv-place { font: 600 1.3rem/1 var(--f-ui); opacity: .88; margin-left: 1rem; padding-left: 1rem; border-left: .1rem solid rgba(255, 255, 255, .4); }
.tv-clock { margin: 0; text-align: right; display: grid; justify-items: end; }
.tv-time { font-family: var(--f-display); font-weight: 300; font-size: 4.6rem; line-height: .9; letter-spacing: -.02em; font-variation-settings: "SOFT" 100, "opsz" 144; font-variant-numeric: lining-nums; }
.tv-time b { font-weight: 300; } .tv-time i { font-style: normal; font-size: .36em; font-weight: 500; letter-spacing: .04em; margin-left: .3em; font-family: var(--f-ui); }
.tv-date { font-size: 1.45rem; font-weight: 600; opacity: .92; margin-top: .45rem; }

/* an NWS alert, if there is one */
.tv-alert { position: absolute; top: 9.4rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: .9rem; max-width: 60rem; padding: .8rem 1.6rem; border-radius: 99rem;
  font-size: 1.55rem; text-shadow: none; background: #A4850B; color: #fff; box-shadow: 0 .6rem 2rem rgba(0, 0, 0, .35); white-space: nowrap; }
.tv-alert.lv-warning { background: #B5352A; } .tv-alert.lv-watch { background: #C4661B; } .tv-alert.lv-statement { background: #2F68AE; }
.tv-alert svg { width: 2rem; height: 2rem; --ic-alert: #fff; --ic-alert-edge: rgba(0, 0, 0, .25); }
.tv-alert span { font-weight: 500; opacity: .92; } .tv-alert .more { opacity: .75; }

/* the big number */
.tv-now { position: absolute; left: 3rem; bottom: 26.5rem; display: flex; align-items: flex-end; gap: 2rem; max-width: 58rem; }
.tv-temp { margin: 0; font-family: var(--f-display); font-weight: 300; font-size: 15rem; line-height: .8; letter-spacing: -.05em; font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 144; display: flex; align-items: flex-start; }
.tv-temp .deg { font-size: .42em; color: var(--canola); margin: .03em 0 0 .02em; }
.tv-temp.waiting { opacity: .6; }
.tv-side { padding-bottom: .6rem; min-width: 0; }
.tv-cond { display: flex; align-items: center; gap: .8rem; margin: 0; font-family: var(--f-display); font-weight: 500; font-size: 3.3rem; line-height: 1.05; font-variation-settings: "SOFT" 80; }
.tv-ic { display: inline-flex; filter: drop-shadow(0 .2rem .6rem rgba(0, 10, 20, .3)); }
.tv-ic svg { width: 4.2rem; height: 4.2rem; }
.tv-hilo { display: flex; gap: .4rem 1.6rem; flex-wrap: wrap; margin: .9rem 0 0; font-size: 1.7rem; font-weight: 500; }
.tv-hilo b { font-weight: 800; }
.tv-story { margin: .7rem 0 0; font-size: 1.45rem; font-weight: 500; opacity: .92; max-width: 34rem; }

/* today's details: a quiet row of figures under the big number */
.tv-details { position: absolute; left: 3rem; bottom: 17.6rem; display: flex; gap: 0; }
.tv-details > div { display: grid; padding: 0 1.7rem; border-left: .1rem solid rgba(255, 255, 255, .28); }
.tv-details > div:first-child { padding-left: 0; border-left: 0; }
.tv-details small { font-size: 1rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .78; }
.tv-details b { font-size: 1.85rem; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.tv-details b i { font-style: normal; font-weight: 600; font-size: .75em; opacity: .9; }
.tv-details span { font-size: 1.15rem; font-weight: 500; opacity: .85; white-space: nowrap; }

/* bottom: next 12 hours and the 5-day, on dark glass (no backdrop blur: it would cost the TV a redraw every frame) */
.tv-bottom { position: absolute; left: 3rem; right: 3rem; bottom: 2.4rem; display: grid; grid-template-columns: 12fr 6.2fr; gap: 1.4rem; }
.tv-panel { display: flex; flex-direction: column; background: rgba(8, 20, 26, .62); border: .1rem solid rgba(255, 255, 255, .1); border-radius: 1.4rem; padding: 1rem 1.2rem 1rem; text-shadow: none; }
.tv-panel ol { flex: 1; align-content: center; }
.tv-panel h2 { margin: 0 0 .5rem .2rem; font: 700 1rem/1.2 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.tv-panel ol { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.tv-panel li { display: flex; flex-direction: column; align-items: center; gap: .2rem; text-align: center; }
.tv-panel li .t { font-size: 1.2rem; font-weight: 700; opacity: .9; white-space: nowrap; }
.tv-panel li svg { width: 3.1rem; height: 3.1rem; }
.tv-panel li b { font-family: var(--f-display); font-weight: 500; font-size: 2.1rem; line-height: 1; white-space: nowrap; }
.tv-panel li .lo { font-family: var(--f-display); font-size: 1.5rem; line-height: 1; opacity: .72; }
.tv-panel li .p { font-size: 1.05rem; font-weight: 700; color: #8CC0F3; min-height: 1.3rem; }
.tv-hours li:first-child .t { color: var(--canola); }
.tv-days li + li { border-left: .1rem solid rgba(255, 255, 255, .08); }

/* radar: a window on the right */
.tv-radar { position: absolute; right: 3rem; bottom: 17.6rem; width: 33rem; height: 25.5rem; display: flex; flex-direction: column; border-radius: 1.4rem; overflow: hidden;
  background: rgba(8, 20, 26, .62); border: .1rem solid rgba(255, 255, 255, .12); box-shadow: 0 1rem 3rem rgba(0, 0, 0, .3); text-shadow: none; }
.tv-radar h2 { margin: 0; padding: .7rem 1.1rem .6rem; font: 700 1rem/1.2 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; display: flex; justify-content: space-between; }
.tv-radar h2 span { letter-spacing: .02em; text-transform: none; font-weight: 600; opacity: .8; font-size: 1.1rem; }
.tv-map { flex: 1; min-height: 0; }
.tv-map .maplibregl-canvas { outline: none; }
.tv-credit { margin: 0; padding: .35rem 1.1rem .45rem; font-size: .78rem; opacity: .6; }

/* quiet status in the corner */
.tv-status { position: absolute; right: 3rem; top: 9.6rem; margin: 0; font-size: 1rem; font-weight: 600; opacity: .55; }
.tv-status.stale { opacity: 1; color: #FFD28A; }
.tv-ui.offline .tv-status::after { content: " · reconnecting…"; }

/* controls appear when the mouse moves, and hide again */
.tv-controls { position: fixed; z-index: 5; left: 50%; top: 1.4rem; transform: translate(-50%, -150%); display: flex; align-items: center; gap: 1.2rem; padding: .6rem .7rem .6rem 1.2rem; border-radius: 99rem;
  background: rgba(8, 20, 26, .86); border: .1rem solid rgba(255, 255, 255, .14); font-size: 1rem; transition: transform .3s; }
body.display:not(.idle) .tv-controls.show { transform: translate(-50%, 0); }
.tv-controls button, .tv-controls a { font: 700 1rem/1 var(--f-ui); color: #12283A; background: var(--canola); border: 0; border-radius: 99rem; padding: .55rem 1rem; text-decoration: none; cursor: pointer; }
.tv-controls a { background: rgba(255, 255, 255, .14); color: #fff; }
.tv-controls [data-wake] { opacity: .8; }
.tv-hint { position: fixed; z-index: 4; left: 50%; bottom: 46%; transform: translateX(-50%); margin: 0; padding: .9rem 1.6rem; border-radius: 99rem; background: rgba(8, 20, 26, .8);
  font-size: 1.4rem; font-weight: 700; transition: opacity .6s; pointer-events: none; }
.tv-hint.gone { opacity: 0; }

/* portrait screens (a TV on its side): the same pieces, stacked */
@media (orientation: portrait) {
  html:has(body.display) { font-size: min(1.75vw, 1vh); }
  .display .hero.tv-hero { --t: 24cqh; }
  .tv-ui { display: flex; flex-direction: column; gap: 1.8rem; padding: 2.4rem 3rem; }
  .tv-ui > *, .tv-live > * { position: static; }
  .tv-top { order: 0; }
  .tv-alert { order: 1; position: static; transform: none; align-self: center; }
  .tv-status { order: 2; align-self: flex-end; margin-top: -1rem; }
  .tv-now { order: 3; margin-top: auto; flex-wrap: wrap; max-width: none; }
  .tv-details { order: 4; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; row-gap: 1.2rem; }
  .tv-details > div:nth-child(3n+1) { border-left: 0; padding-left: 0; }
  .tv-radar { order: 5; width: auto; height: auto; flex: 1 1 0; min-height: 12rem; }
  .tv-bottom { order: 6; grid-template-columns: 1fr; }
  .tv-hours ol li:nth-child(n+9) { display: none; }
}

@media (prefers-reduced-motion: reduce) { .tv-ui { transition: none; } }