* { box-sizing: border-box; }
/* Everything is sized in rem, so this scales the help screen to fit any display height. */
html { font-size: clamp(9px, 1.9vh, 22px); }
html, body {
    margin: 0; height: 100%; overflow: hidden; background: #000;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
#stage { position: relative; width: 100vw; height: 100vh; outline: none; }

/* Screens stay full-size and are hidden with visibility (not display:none) so
   Beekeeper's font sizing never measures a 0px window. */
.screen { position: absolute; inset: 0; visibility: hidden; }
.screen.active, .screen.animate__animated { visibility: visible; }
.board iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.traffic iframe { display: block; width: 100%; height: 100%; border: 0; background: #041E42; }
.shield { position: absolute; inset: 0; }

#screen-help { display: flex; align-items: center; justify-content: center; background: var(--ui-offwhite); color: var(--ui-black); }
.help { width: 90%; max-width: 1100px; }
.help h1 { margin: 0 0 .25em; font-size: 3rem; }
.sub { margin: 0 0 1.5em; color: #555; font-size: 1.3rem; }
#keys { width: 100%; border-collapse: collapse; font-size: 1.4rem; }
#keys td { padding: .6em .8em; border-bottom: 1px solid #e5e5e5; vertical-align: middle; }
#keys td:first-child { width: 30%; white-space: nowrap; }
kbd {
    display: inline-block; min-width: 2.2em; padding: .15em .5em; text-align: center;
    border: 1px solid #bbb; border-bottom-width: 3px; border-radius: 6px;
    background: #f7f7f7; font: inherit; font-weight: 700;
}
.now { color: #0b6e85; font-weight: 600; }
.muted { color: #777; font-size: .9em; }
.foot { margin-top: 1.5em; color: #777; }

#progress { position: absolute; left: 0; bottom: 0; z-index: 10; display: none; width: 0; height: 5px; background: var(--cariblue); }
body.rotating #progress { display: block; }

#toast {
    position: absolute; left: 50%; bottom: 2.5rem; z-index: 20; transform: translateX(-50%);
    padding: .9rem 1.6rem; border-radius: 12px; background: rgba(16, 24, 32, .88); color: var(--ui-offwhite);
    font-size: 1.6rem; white-space: nowrap; opacity: 0; transition: opacity .3s; pointer-events: none;
}
#toast.show { opacity: 1; }
.config-error { padding: 2rem; color: #f66; font-size: 1.4rem; }

/* ---- Weather side bar ------------------------------------------------------
   The board shrinks (left/right inset) while the bar slides in, so nothing is
   covered. Beekeeper re-fits its text on the resulting iframe resize. */
:root {
    /* Caribou brand palette (brand.cariboucoffee.com -> Our Colors). Caribrown is logo-only;
       avoid pure black/white for UI - use Black #101820 / Off-White #F0F0F0. */
    --cariblue: #72B0BD; --sky: #BBDDE6; --chennile: #2D8C9E; --teal: #00677F; --navy: #041E42;
    --cherry: #E4002B; --froth: #F2E9DB; --ui-black: #101820; --ui-offwhite: #F0F0F0;
    /* expanded-palette PMS 172 (orange) and PMS 136 (gold) for watch / advisory alerts */
    --pms172: #FA4616; --pms136: #FFBF3F;
    --wx-w: 26vw;
}
.screen.board { transition: left .8s ease, right .8s ease; }
/* per board, so a hidden board can be resized ahead of the switch (see syncWeather in app.js) */
.wx-right .screen.board.wx-narrow { right: var(--wx-w); }
.wx-left .screen.board.wx-narrow { left: var(--wx-w); }

.wx {
    position: absolute; top: 0; bottom: 0; z-index: 5; width: var(--wx-w);
    display: flex; flex-direction: column; gap: 1.8vh; padding: 3.4vh 2vw 1.8vh;
    background: linear-gradient(180deg, var(--teal) 0%, var(--navy) 100%); color: var(--ui-offwhite);
    font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    box-shadow: 0 0 3vh rgba(0, 0, 0, .55); overflow: hidden;
    transition: transform .8s ease; visibility: hidden;
}
/* Cariblue edge on the side that meets the board: brand rule, Cariblue in every touchpoint */
.wx-right .wx { right: 0; transform: translateX(100%); border-left: .8vh solid var(--cariblue); }
.wx-left .wx { left: 0; transform: translateX(-100%); border-right: .8vh solid var(--cariblue); }
body.weather-open .wx { transform: none; visibility: visible; }
/* keep it visible while it slides out */
.wx { transition: transform .8s ease, visibility 0s linear .8s; }
body.weather-open .wx { transition: transform .8s ease, visibility 0s; }

.wx-place { font-size: 3.4vh; font-weight: 600; letter-spacing: .02em; }
.wx-clock { margin-top: .4vh; font-size: 2.4vh; color: var(--sky); }
.wx-now { display: flex; flex-direction: column; align-items: center; }
/* Meteocons have ~20% built-in padding; negative margins reclaim it */
.wx-big { width: 46vh; height: 46vh; margin: -6vh 0 -7vh; }
.wx-nowrow { display: flex; align-items: center; justify-content: center; gap: 1.4vw; }
.wx-temp { font-size: 11vh; font-weight: 300; line-height: 1; font-variant-numeric: tabular-nums; }
.wx-temp span { font-size: 3.6vh; vertical-align: top; position: relative; top: 1.2vh; margin-left: .2vw; }
.wx-cond { font-size: 3.2vh; font-weight: 600; line-height: 1.15; }
.wx-hilo { margin-top: .6vh; font-size: 2.4vh; color: var(--sky); font-variant-numeric: tabular-nums; }
.wx-details { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6vw; text-align: center; }
.wx-details div { display: flex; flex-direction: column; align-items: center; padding: .6vh 0 .8vh;
    border-radius: 1.2vh; background: rgba(114, 176, 189, .16); box-shadow: inset 0 0 0 1px rgba(114, 176, 189, .35); }
.wx-details b { font-size: 2.6vh; font-weight: 600; white-space: nowrap; }
.wx-details small { font-size: 1.7vh; color: var(--sky); white-space: nowrap; }
.wx-mini { width: 5vh; height: 5vh; margin: -.6vh 0 -.4vh; }
.wx-hours-title { margin-top: auto; font-size: 1.9vh; letter-spacing: .12em; text-transform: uppercase; color: var(--cariblue); font-weight: 600; }
.wx-hours { display: grid; gap: .4vw; margin-top: -1vh; }
.wx-hour { display: flex; flex-direction: column; align-items: center; padding: 1vh 0 .8vh;
    border-radius: 1.2vh; background: rgba(114, 176, 189, .16); box-shadow: inset 0 0 0 1px rgba(114, 176, 189, .35); min-width: 0; }
.wx-ht { font-size: 1.9vh; color: var(--sky); font-weight: 600; white-space: nowrap; }
.wx-hi { width: 8vh; height: 8vh; margin: -.6vh 0 -.8vh; }
.wx-htemp { font-size: 3vh; font-weight: 600; font-variant-numeric: tabular-nums; }
.wx-pp { display: flex; align-items: center; height: 2.2vh; font-size: 1.8vh; color: var(--sky); white-space: nowrap; }
.wx-drop { width: 2.6vh; height: 2.6vh; margin: 0 -.2vh 0 -.6vh; }
/* NWS alert banner: dark panel with a level-coloured frame, so the coloured icon stays visible */
.wx-alert { --lvl: var(--pms136); display: flex; align-items: center; gap: .8vw; margin-top: -.4vh;
    padding: .9vh 1vw; border-radius: 1.2vh; background: rgba(16, 24, 32, .72);
    box-shadow: inset 0 0 0 .4vh var(--lvl); }
.wx-alert-warning { --lvl: var(--cherry); }
.wx-alert-watch { --lvl: var(--pms172); }
.wx-alert-icon { width: 8vh; height: 8vh; margin: -1vh -.6vw -1vh -.4vw; flex: none; }
.wx-alert-txt { display: flex; flex-direction: column; min-width: 0; }
.wx-alert-kind { font-size: 1.6vh; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--lvl); }
.wx-alert-warning .wx-alert-kind { color: #FF5C77; }   /* Cherry lifted for contrast on the dark panel */
.wx-alert-txt b { font-size: 2.6vh; line-height: 1.15; }
.wx-alert-txt small { font-size: 1.8vh; color: var(--sky); }
.wx-alert-more { margin-top: .2vh; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* make room for the banner */
.wx-has-alert .wx-big { width: 29vh; height: 29vh; margin: -3.8vh 0 -4.3vh; }
.wx-has-alert:has(.wx-alert-more) .wx-big { width: 25vh; height: 25vh; margin: -3.2vh 0 -3.7vh; }   /* 2+ alerts */

/* forecast: 'both' - shrink the hero so hourly + daily fit in one screen height */
.wx-both { gap: 1.1vh; }
/* The hero icon absorbs whatever height is left (fewer days, no alert -> bigger icon; an alert
   banner -> smaller icon), so there's never a blank band at the bottom and never an overflow. */
.wx-both .wx-now { flex: 1 1 0; min-height: 0; }
.wx-both .wx-big, .wx-both.wx-has-alert .wx-big, .wx-both.wx-has-alert:has(.wx-alert-more) .wx-big {
    flex: 1 1 0; min-height: 0; width: 100%; height: auto; max-height: 42vh; object-fit: contain; margin: -2.5vh 0 -3vh; }
/* detail tiles -> one compact row: icon + value + label side by side */
.wx-both .wx-details div { flex-direction: row; justify-content: center; gap: .3vw; padding: .3vh 0; }
.wx-both .wx-mini { width: 3.6vh; height: 3.6vh; margin: -.4vh -.2vw; }
.wx-both .wx-details b { font-size: 2.2vh; }
.wx-both .wx-details { min-width: 0; }
.wx-both .wx-details div { min-width: 0; }
.wx-both .wx-details small { display: none; }        /* icons carry the meaning... */
.wx-both .wx-details .wx-feels::before { content: 'Feels '; font-weight: 400; }  /* ...except feels-like vs. actual */
.wx-both .wx-temp { font-size: 9vh; }
.wx-both .wx-hours-title { margin-top: .4vh; }
.wx-both .wx-hi { width: 5.6vh; height: 5.6vh; }
.wx-both .wx-hour { padding: .7vh 0 .5vh; }
.wx-days-title { font-size: 1.9vh; letter-spacing: .12em; text-transform: uppercase; color: var(--cariblue); font-weight: 600; }
.wx-days { display: grid; gap: .6vh; margin-top: -.6vh; }
.wx-day { display: grid; grid-template-columns: 4.4vw 5.4vh 1fr auto; align-items: center; gap: .6vw;
    padding: .2vh .9vw; border-radius: 1.2vh; background: rgba(114, 176, 189, .16);
    box-shadow: inset 0 0 0 1px rgba(114, 176, 189, .35); font-size: 2.3vh; }
.wx-dn { font-weight: 700; color: var(--sky); }
.wx-di { width: 5.4vh; height: 5.4vh; margin: -.4vh 0; }
.wx-dpp { display: flex; align-items: center; justify-content: flex-end; font-size: 1.8vh; color: var(--sky); white-space: nowrap; }
.wx-dhl { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wx-lo { color: var(--sky); font-weight: 400; }
.wx-both .wx-foot { margin-top: 0; }
/* a bit more presence for the daily rows now there are only 3 */
.wx-both .wx-day { padding: .6vh .9vw; font-size: 2.6vh; }
.wx-both .wx-di { width: 6.4vh; height: 6.4vh; }

.wx-foot { font-size: 1.5vh; color: rgba(240, 240, 240, .5); text-align: right; }