/* Sonoran Desert theme for the 1280x800, density 160 frame. Plain CSS for WebView 106: no
   nesting, no oklch/color-mix, no 4/8-digit hex, no animations. Fonts are served from here. */
@font-face { font-family: Inter; src: url(fonts/inter.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Newsreader; src: url(fonts/newsreader.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  --sand: #e3d3bc;
  --adobe: #e9dac3;
  --line: #d2bd9f;
  --ink: #2b2420;
  --dust: #6b5a4b;
  --terracotta: #b8562a;
  --terracotta-soft: rgba(184, 86, 42, 0.14);
  --saguaro: #5c7050;
  --saguaro-soft: rgba(92, 112, 80, 0.16);
  --monsoon: #3d6a85;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body {
  background: var(--sand);
  color: var(--ink);
  font-family: Inter, Roboto, Arial, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
}

#day { display: flex; height: 100vh; padding: 34px 36px 32px; gap: 28px; position: relative; }
#night { display: none; }
body.night #day { display: none; }
body.night #night { display: block; }

/* ---- left: clock and weather ---- */
.left { width: 520px; flex: none; display: flex; flex-direction: column; position: relative; z-index: 1; }
.clock { display: flex; align-items: flex-start; line-height: 1; margin: 26px 0 0 -4px; height: 150px; }
#time {
  font-family: Newsreader, Georgia, serif;
  font-size: 158px; font-weight: 500; letter-spacing: -3px;
  font-variation-settings: "opsz" 72;
}
#ampm { font-size: 22px; font-weight: 600; letter-spacing: 2px; color: var(--terracotta); margin: 40px 0 0 14px; }
.date {
  font-family: Newsreader, Georgia, serif; font-weight: 400;
  font-size: 34px; color: var(--dust); margin-top: 16px;
  font-variation-settings: "opsz" 36;
}

.card { background: var(--adobe); border-radius: 22px; box-shadow: 0 1px 0 rgba(43, 36, 32, 0.06); }
.dateline { display: flex; align-items: baseline; }
.sun { margin-left: auto; font-size: 14px; font-weight: 500; color: var(--dust); white-space: nowrap; }
.sun svg { width: 26px; height: 26px; vertical-align: -8px; margin: 0 1px 0 8px; color: var(--dust); }
.now-card { margin-top: 24px; }
.now { display: flex; align-items: center; padding: 22px 26px 6px; }
.now svg { width: 100px; height: 100px; margin: -12px -6px -12px -10px; flex: none; }
.now .temp {
  font-family: Newsreader, Georgia, serif; font-size: 84px; font-weight: 500; letter-spacing: -2px; margin-left: 14px; line-height: 1;
  font-variation-settings: "opsz" 72;
}
.now .temp sup { font-size: 34px; vertical-align: top; position: relative; top: 8px; margin-left: 3px; }
.now .desc { margin-left: 22px; font-size: 19px; line-height: 1.45; color: var(--dust); }
.now .desc small { display: block; font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dust); margin-bottom: 2px; }
.now .desc b { display: block; color: var(--ink); font-size: 21px; font-weight: 600; }

.hours { display: flex; justify-content: space-between; padding: 14px 22px 18px; border-bottom: 1px solid var(--line); }
.hour, .wday, .ev .t, #time, .night-clock { font-variant-numeric: tabular-nums; }
.hour { width: 66px; text-align: center; font-size: 18px; font-weight: 500; }
.hour .h { color: var(--dust); font-size: 13px; font-weight: 600; letter-spacing: 1px; }
.hour svg { width: 46px; height: 46px; margin: 0 0 -4px; }
.hour .pop { color: var(--monsoon); font-size: 12px; font-weight: 600; height: 15px; }

.days { padding: 6px 26px 14px; }
.wday { display: flex; align-items: center; height: 44px; font-size: 18px; }
.wday .n { width: 104px; font-weight: 600; }
.wday svg { width: 40px; height: 40px; flex: none; }
.wday .pop { width: 52px; color: var(--monsoon); font-size: 13px; font-weight: 600; text-align: right; }
.wday .hl { margin-left: auto; font-size: 20px; font-weight: 500; }
.up, .down { font-weight: 700; margin: 0 3px 0 16px; }
.up { color: var(--terracotta); }
.down { color: var(--monsoon); }
.now .desc .up { margin-left: 0; }

.ridge { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: 0; pointer-events: none; }

/* ---- right: agenda ---- */
.right { flex: 1; min-width: 0; padding: 26px 30px; display: flex; flex-direction: column; position: relative; z-index: 1; }
/* Agenda sizes scale with --s, which app.js picks so the events fill the card. */
.agenda { --s: 1; flex: 1; overflow: hidden; margin: 0 -14px; padding: 0 14px; }
/* Each day is a row: a small date block on the left, that day's events beside it. */
.group { display: flex; align-items: flex-start; padding: calc(var(--s) * 10px) 0; border-top: 1px solid var(--line); }
.group:first-child { border-top: 0; }
.dblk { flex: none; width: calc(var(--s) * 84px); margin-right: calc(var(--s) * 18px); text-align: center; color: var(--ink); line-height: 1; padding-top: calc(var(--s) * 4px); }
.dblk b { display: block; font-size: calc(var(--s) * 12px); font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
.dblk big { display: block; font-family: Newsreader, Georgia, serif; font-size: calc(var(--s) * 40px); font-weight: 500; margin: calc(var(--s) * 4px) 0 calc(var(--s) * 2px); font-variation-settings: "opsz" 48; }
.dblk small { display: block; font-size: calc(var(--s) * 11px); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dust); }
.group.today .dblk, .group.today .dblk small { color: var(--terracotta); }
.evs { flex: 1; min-width: 0; }
.ev { display: flex; align-items: center; padding: calc(var(--s) * 10px) 0; border-bottom: 1px solid var(--line); }
.ev:last-child { border-bottom: 0; }
.ev .t { width: calc(var(--s) * 118px); flex: none; font-size: calc(var(--s) * 18px); font-weight: 600; color: var(--dust); }
.ev .x { min-width: 0; flex: 1; }
.ev .title { font-size: calc(var(--s) * 24px); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev .loc { font-size: calc(var(--s) * 15px); color: var(--dust); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.ev.now-on { background: var(--terracotta-soft); margin: 4px -14px; padding: calc(var(--s) * 12px) 14px calc(var(--s) * 12px) 20px; border-radius: 14px; border-bottom: 0; box-shadow: inset 6px 0 0 var(--terracotta); }
.ev.now-on .t { color: var(--terracotta); font-weight: 700; }
.ev .title em { font-style: normal; font-size: 0.75em; color: var(--dust); margin-left: 10px; }
.ev.all .t span { display: inline-block; font-size: calc(var(--s) * 12px); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--saguaro); background: var(--saguaro-soft); padding: calc(var(--s) * 5px) calc(var(--s) * 9px); border-radius: 999px; }
.ev.school .t span { color: var(--monsoon); background: rgba(61, 106, 133, 0.14); }
.ev.holiday .t span { color: var(--terracotta); background: var(--terracotta-soft); }
.ev .cd { flex: none; margin-left: 16px; font-size: calc(var(--s) * 16px); font-weight: 500; color: var(--dust); white-space: nowrap; }
.ev.now-on .cd { color: var(--terracotta); }
.later .ev .cd { font-size: calc(var(--s) * 15px); }
.ev.past { opacity: 0.4; }
/* Days after tomorrow: one line per event so more of the month fits. */
.later .ev { padding: calc(var(--s) * 4px) 0; }
.later .dblk big { font-size: calc(var(--s) * 30px); }
.later .ev .t { font-size: calc(var(--s) * 16px); }
.later .ev .title { font-size: calc(var(--s) * 20px); }
.later .ev .loc { display: none; }
.empty { font-family: Newsreader, Georgia, serif; font-size: calc(var(--s) * 21px); color: var(--dust); padding: calc(var(--s) * 12px) 0 calc(var(--s) * 6px); }
.more { font-size: 15px; font-weight: 600; color: var(--dust); height: 20px; }
.more:empty { display: none; }

/* NWS alerts: only shown while one is active. */
.alerts:empty { display: none; }
.alerts { padding: 14px 14px 0; }
.alert { display: flex; align-items: center; margin-bottom: 6px; padding: 10px 14px; border-radius: 12px; background: rgba(217, 163, 91, 0.2); box-shadow: inset 6px 0 0 #d9a35b; }
.alert.severe { background: rgba(176, 58, 42, 0.12); box-shadow: inset 6px 0 0 #b03a2a; }
.alert b { font-size: 18px; font-weight: 700; color: var(--ink); }
.alert.severe b { color: #9c3122; }
.alert span { margin-left: auto; padding-left: 12px; font-size: 14px; color: var(--dust); white-space: nowrap; }
.alert i { font-style: normal; font-size: 22px; margin-right: 10px; }
/* Make room in the weather card while a warning shows. */
.has-alert .now { padding-top: 10px; }
.has-alert .wday:nth-child(4) { display: none; }
.night-alert { color: #b3734f; }

.status { position: fixed; right: 22px; bottom: 8px; font-size: 12px; color: var(--terracotta); z-index: 2; }

/* ---- weather icons: monochrome, drawn in the text colour ---- */
.now svg, .hour svg, .wday svg { color: var(--ink); }

/* ---- night ---- */
#night { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: #0f0c0a; color: #8a705c; }
.night-wrap { position: absolute; left: 0; right: 0; top: 170px; text-align: center; }
.night-clock {
  font-family: Newsreader, Georgia, serif; font-size: 230px; font-weight: 300; letter-spacing: -5px; line-height: 1; color: #a8876c;
  font-variation-settings: "opsz" 72;
}
.night-line { font-size: 28px; margin-top: 20px; }
#n-date { font-family: Newsreader, Georgia, serif; font-size: 32px; }
.night-line svg { width: 46px; height: 46px; vertical-align: -13px; margin-right: 8px; color: #8a705c; }