/* Written for the Portal's older Android WebView: no flex gap, aspect-ratio or inset. */
:root {
  --bg: #0d1117;
  --panel: #161b22;
  --line: #2b3240;
  --text: #f2f4f8;
  --muted: #9aa4b2;
  --accent: #7cc4ff;
  --today: #1f2a3a;
  --warm: #ffb86b;
  --cold: #8fd3ff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: Roboto, "Segoe UI", Helvetica, Arial, sans-serif;
  overflow: hidden;
  cursor: none;
  -webkit-user-select: none;
  user-select: none;
}

#stage { position: fixed; top: 0; right: 0; bottom: 0; left: 0; }

.view {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.2s ease, visibility 0s linear 1.2s;
}
.view.active { opacity: 1; visibility: visible; transition: opacity 1.2s ease, visibility 0s; }

/* ---------- Photos ---------- */
.photo-layer {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  opacity: 0;
  transition: opacity 1.5s ease;
  overflow: hidden;
  background: #000;
}
.photo-layer.show { opacity: 1; }
.photo-bg {
  position: absolute; top: -40px; right: -40px; bottom: -40px; left: -40px;
  background-size: cover;
  background-position: center;
  filter: blur(28px) brightness(0.55);
}
.photo-img {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: contain;
}

.photo-badge {
  position: absolute; right: 2.2vw; bottom: 2.4vw;
  padding: 0.9vw 1.6vw;
  border-radius: 1.2vw;
  background: rgba(0, 0, 0, 0.45);
  text-align: right;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.badge-time { font-size: 4.2vw; font-weight: 300; line-height: 1.05; }
.badge-weather { font-size: 1.9vw; color: #dfe6ef; margin-top: 0.3vw; }

/* ---------- Shared panel layout ---------- */
.panel { padding: 3vw 3.4vw 2.6vw; background: var(--bg); }
.panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1.2vw; margin-bottom: 1.6vw;
}
.panel-head h1 { font-size: 3.4vw; font-weight: 500; letter-spacing: -0.02em; }
.head-right { font-size: 1.8vw; color: var(--muted); }
.head-right span + span { margin-left: 1.4vw; }
.head-time { color: var(--text); font-weight: 500; }

/* ---------- Calendar ---------- */
.agenda {
  display: flex;
  height: calc(100% - 6.6vw);
}
.day {
  flex: 1 1 0;
  min-width: 0;
  margin-right: 0.9vw;
  padding: 1vw 0.9vw;
  border-radius: 1vw;
  background: var(--panel);
  overflow: hidden;
  position: relative;
}
.day:last-child { margin-right: 0; }
.day.today { background: var(--today); box-shadow: inset 0 0 0 2px var(--accent); }
.day-name { font-size: 1.7vw; font-weight: 600; }
.day.today .day-name { color: var(--accent); }
.day-date { font-size: 1.25vw; color: var(--muted); margin-bottom: 0.8vw; }
.event {
  padding: 0.5vw 0.6vw 0.55vw 0.8vw;
  margin-bottom: 0.55vw;
  border-left: 0.35vw solid var(--accent);
  border-radius: 0.4vw;
  background: rgba(255, 255, 255, 0.04);
}
.event-time { font-size: 1.15vw; color: var(--muted); }
.event-title { font-size: 1.45vw; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.event.all-day { background: rgba(124, 196, 255, 0.12); }
.event.past { opacity: 0.45; }
.day-empty { font-size: 1.3vw; color: var(--muted); }
.day-more { position: absolute; left: 0.9vw; right: 0.9vw; bottom: 0.6vw; font-size: 1.15vw; color: var(--muted); }

/* Roomy: three or four days across, so each event gets bigger type and more room. */
.agenda.roomy .day { padding: 1.4vw 1.4vw; margin-right: 1.4vw; }
.agenda.roomy .day:last-child { margin-right: 0; }
.agenda.roomy .day-name { font-size: 2.6vw; }
.agenda.roomy .day-date { font-size: 1.6vw; margin-bottom: 1.1vw; }
.agenda.roomy .event { padding: 0.7vw 0.9vw 0.8vw 1.1vw; margin-bottom: 0.8vw; border-left-width: 0.45vw; }
.agenda.roomy .event-time { font-size: 1.6vw; }
.agenda.roomy .event-title { font-size: 2.2vw; }
.agenda.roomy .day-empty { font-size: 1.9vw; }
.agenda.roomy .day { height: 100%; }
.agenda.roomy .day-more { position: static; font-size: 1.6vw; margin-top: 0.2vw; }

/* Portrait: stack the days instead. */
@media (orientation: portrait) {
  .agenda { display: block; overflow: hidden; }
  .day { margin: 0 0 1.4vw; }
  .day-name { font-size: 3vw; }
  .day-date { font-size: 2.2vw; }
  .event-time { font-size: 2.1vw; }
  .event-title { font-size: 2.7vw; }
  .day-more { position: static; font-size: 2.1vw; }
  .panel-head h1 { font-size: 5vw; }
  .head-right { font-size: 2.6vw; }
}

/* ---------- Weather ---------- */
.wx { display: flex; height: calc(100% - 6.6vw); }
.wx-now { flex: 0 0 34%; padding-right: 2.4vw; display: flex; flex-direction: column; justify-content: center; }
.wx-icon { font-size: 7vw; line-height: 1; }
.wx-temp { font-size: 11vw; font-weight: 200; line-height: 1; letter-spacing: -0.04em; margin-top: 0.6vw; }
.wx-cond { font-size: 2.3vw; margin-top: 0.4vw; }
.wx-feels { font-size: 1.7vw; color: var(--muted); margin-top: 0.4vw; }
.wx-hilo { font-size: 1.9vw; margin-top: 1vw; }
.wx-hilo .hi { color: var(--warm); }
.wx-hilo .lo { color: var(--cold); margin-left: 1.2vw; }
.wx-right { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.tiles { display: flex; flex-wrap: wrap; align-content: stretch; flex: 1 1 auto; margin: 0 -0.5vw 0.5vw; }
.tile {
  width: calc(33.333% - 1vw);
  margin: 0 0.5vw 1vw;
  padding: 1.6vw 1.4vw;
  border-radius: 1vw;
  background: var(--panel);
  display: flex; flex-direction: column; justify-content: center;
}
.tile-label { font-size: 1.3vw; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.tile-value { font-size: 3.4vw; font-weight: 500; margin-top: 0.3vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-sub { font-size: 1.45vw; color: var(--muted); margin-top: 0.2vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile.alert { box-shadow: inset 0 0 0 2px var(--warm); }
.arrow { display: inline-block; font-size: 2vw; margin-left: 0.5vw; }
.forecast { display: flex; margin: 0 -0.5vw; }
.fday {
  flex: 1 1 0;
  margin: 0 0.5vw;
  padding: 1vw 0.6vw;
  border-radius: 1vw;
  background: var(--panel);
  text-align: center;
}
.fday-name { font-size: 1.35vw; color: var(--muted); }
.fday-icon { font-size: 2.8vw; margin: 0.3vw 0; }
.fday-temps { font-size: 1.5vw; }
.fday-temps .lo { color: var(--muted); margin-left: 0.5vw; }
.fday-rain { font-size: 1.1vw; color: var(--cold); margin-top: 0.2vw; min-height: 1.3vw; }

@media (orientation: portrait) {
  .wx { display: block; }
  .wx-now { padding: 0 0 2vw; }
  .wx-icon { font-size: 11vw; }
  .wx-temp { font-size: 20vw; }
  .wx-cond { font-size: 4vw; }
  .wx-feels, .wx-hilo { font-size: 3vw; }
  .tile { width: calc(50% - 1vw); }
  .tile-label { font-size: 2vw; }
  .tile-value { font-size: 4.4vw; }
  .tile-sub { font-size: 2.1vw; }
  .forecast { margin-top: 1vw; }
  .fday-name, .fday-temps { font-size: 2.4vw; }
  .fday-icon { font-size: 4.5vw; }
  .fday-rain { font-size: 2vw; }
}

/* ---------- News ---------- */
.news { height: calc(100% - 6.6vw); overflow: hidden; }
.story { display: flex; align-items: flex-start; padding: 1vw 0; border-bottom: 1px solid var(--line); }
.story:last-child { border-bottom: 0; }
.story-text { flex: 1 1 auto; min-width: 0; }
.story-meta { font-size: 1.2vw; color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; }
.story-title { font-size: 2.1vw; line-height: 1.25; margin-top: 0.25vw; }
.story.lead .story-title { font-size: 2.9vw; font-weight: 500; }
.story-img {
  flex: 0 0 22vw;
  height: 12.4vw;
  margin-left: 2vw;
  border-radius: 0.8vw;
  background-size: cover;
  background-position: center;
  background-color: var(--panel);
}
@media (orientation: portrait) {
  .story-meta { font-size: 2.1vw; }
  .story-title { font-size: 3.4vw; }
  .story.lead .story-title { font-size: 4.4vw; }
  .story-img { flex-basis: 30vw; height: 17vw; }
}

/* ---------- Pharmacy news (NCPA) ----------
   A light screen: NCPA's logo has black lettering that vanishes on the dark theme.
   NCPA blue #0080C6 is sampled from the logo. */
#view-pharmacy { background: #ffffff; color: #1a2330; }
#view-pharmacy .panel-head { align-items: center; border-bottom: 0.35vw solid #0080c6; }
#view-pharmacy .panel-head h1 { color: #0080c6; }
.ncpa-logo { height: 6.4vw; width: auto; }
#view-pharmacy .story { border-bottom-color: #dfe5ec; }
#view-pharmacy .story-meta { color: #0080c6; font-weight: 600; }
#view-pharmacy .story-title { color: #1a2330; }
#view-pharmacy .story-img { background-color: #eef2f6; }
@media (orientation: portrait) {
  .ncpa-logo { height: 9vw; }
}

/* ---------- Birthday spotlight (pink and purple, like Evie's dress and Crocs) ---------- */
#view-birthday { background: #ffd6ec; background: linear-gradient(135deg, #ffd6ec 0%, #f3d4ff 55%, #d9d2ff 100%); color: #4b2479; overflow: hidden; }
.birthday { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; padding: 3vw 4vw; }
.bd-confetti { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }
.bd-confetti i {
  position: absolute; top: -3vw; width: 1.1vw; height: 1.8vw; opacity: 0.85;
  -webkit-animation-name: bd-fall; animation-name: bd-fall;
  -webkit-animation-timing-function: linear; animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite;
}
@-webkit-keyframes bd-fall { from { -webkit-transform: translateY(0) rotate(0deg); } to { -webkit-transform: translateY(62vw) rotate(540deg); } }
@keyframes bd-fall { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(62vw) rotate(540deg); } }
.bd-photo {
  position: relative; flex: 0 0 auto; height: 100%;
  padding: 0.8vw; background: #fff; border-radius: 2vw;
  box-shadow: 0 1vw 3vw rgba(75, 36, 121, 0.25);
  -webkit-transform: rotate(-3deg); transform: rotate(-3deg);
}
.bd-photo img { display: block; height: 100%; width: auto; border-radius: 1.4vw; }
.bd-text { position: relative; flex: 1 1 auto; text-align: center; padding-left: 3vw; }
.bd-age {
  display: inline-block; width: 15vw; height: 15vw; line-height: 15vw; border-radius: 50%;
  background: #ff5fa2; color: #fff; font-size: 11vw; font-weight: 700;
  box-shadow: inset -1.2vw -1.2vw 0 rgba(0, 0, 0, 0.12), 0 1vw 2vw rgba(255, 95, 162, 0.35);
}
.bd-title { font-size: 5.2vw; font-weight: 800; margin-top: 1.4vw; letter-spacing: -0.02em; }
.bd-count { font-size: 3.4vw; font-weight: 600; margin-top: 1vw; }
.bd-num { font-size: 7vw; font-weight: 800; color: #8e3cf0; }
.bd-sub { font-size: 2.6vw; margin-top: 1.2vw; }
@media (orientation: portrait) {
  .birthday { display: block; text-align: center; padding: 4vw; }
  .bd-photo { display: inline-block; height: 55%; }
  .bd-text { padding: 3vw 0 0; }
}

.cd-photo {
  width: 13vw; height: 13vw; margin: 0 auto; border-radius: 50%;
  background-size: cover; background-position: center 18%;
  box-shadow: 0 0 0 0.5vw #ff5fa2;
}

/* ---------- Family countdowns ---------- */
.countdowns { display: flex; height: calc(100% - 6.6vw); }
.cd {
  flex: 1 1 0;
  min-width: 0;
  margin-right: 1.4vw;
  padding: 2vw 1.4vw;
  border-radius: 1.6vw;
  background: var(--panel);
  text-align: center;
  display: flex; flex-direction: column; justify-content: center;
}
.cd:last-child { margin-right: 0; }
.cd:first-child { background: var(--today); box-shadow: inset 0 0 0 2px var(--accent); }
.cd-icon { font-size: 8vw; line-height: 1.1; }
.cd-num { font-size: 10vw; font-weight: 300; line-height: 1; margin-top: 1vw; color: var(--warm); letter-spacing: -0.03em; }
.cd-today .cd-num { font-size: 6.4vw; font-weight: 500; }
.cd-unit { font-size: 2.2vw; color: var(--muted); margin-top: 0.3vw; }
.cd-title { font-size: 2.4vw; font-weight: 500; line-height: 1.2; margin-top: 1.6vw; }
.cd-date { font-size: 1.6vw; color: var(--muted); margin-top: 0.4vw; }

@media (orientation: portrait) {
  .countdowns { display: block; }
  .cd { flex-direction: row; align-items: center; text-align: left; margin: 0 0 2vw; padding: 2vw 3vw; height: 30%; }
  .cd-icon { font-size: 10vw; margin-right: 3vw; }
  .cd-num { font-size: 10vw; margin: 0 1.4vw 0 0; }
  .cd-unit { font-size: 3vw; margin-right: 3vw; }
  .cd-title { font-size: 3.6vw; margin-top: 0; }
  .cd-date { display: none; }
}

/* ---------- Head Start East 2027 ---------- */
/* The screen takes the logo's own navy (#1B3F59), so the logo sits on it with no box. */
#view-hse { background: #1b3f59; }
#view-hse .panel-head { border-bottom-color: rgba(255, 255, 255, 0.18); }
#view-hse .head-right, #view-hse .tile-label, #view-hse .tile-sub, #view-hse .hse-when { color: #b9cad8; }
#view-hse .tile { background: rgba(255, 255, 255, 0.08); }
.hse { display: flex; height: calc(100% - 6.6vw); }
.hse-count { flex: 0 0 34%; padding-right: 2.4vw; display: flex; flex-direction: column; justify-content: center; }
.hse-logo { display: block; width: 100%; max-width: 30vw; height: auto; margin: 0 0 1.6vw -1vw; }
.hse-days { font-size: 11vw; font-weight: 200; line-height: 1; letter-spacing: -0.04em; color: #29b6e7; }
.hse-days-label { font-size: 2.6vw; margin-top: 0.4vw; }
.hse-when { font-size: 1.7vw; color: var(--muted); margin-top: 1vw; }
.hse-tiles { flex: 1 1 auto; margin-bottom: -1vw; }
.hse-tiles .tile { width: calc(50% - 1vw); }
.hse-tiles .tile-value { font-size: 5.6vw; font-weight: 400; }
.hse-tiles .tile-sub { font-size: 1.6vw; }
.tile.good .tile-value { color: #9be38f; }
.tile.alert .tile-value { color: var(--warm); }

@media (orientation: portrait) {
  .hse { display: block; }
  .hse-count { padding: 0 0 3vw; }
  .hse-logo { width: 60%; max-width: none; margin-left: 0; }
  .hse-days { font-size: 24vw; }
  .hse-days-label { font-size: 4.4vw; }
  .hse-when { font-size: 3vw; }
  .hse-tiles { margin-bottom: 0; }
  .hse-tiles .tile { height: 22vw; }
  .hse-tiles .tile-value { font-size: 8vw; }
  .hse-tiles .tile-sub { font-size: 2.4vw; }
}

/* ---------- Status ---------- */
.message {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; font-size: 2.4vw; color: var(--muted);
}
.message strong { color: var(--text); font-size: 3vw; font-weight: 500; margin-bottom: 1vw; }
.stale { color: var(--warm); }

#progress {
  position: fixed; left: 0; bottom: 0; height: 3px; width: 0;
  background: rgba(124, 196, 255, 0.55);
  z-index: 5;
}
/* ---------- Night clock ---------- */
#view-night { position: fixed; background: #000; z-index: 8; }
.night-clock { position: absolute; top: 50%; left: 50%; width: 80vw; margin: 0; text-align: center;
  -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #7c8796; }
.nc-time { font-size: 17vw; font-weight: 200; line-height: 1; letter-spacing: -0.03em; color: #9aa4b2; }
.nc-date { font-size: 2.6vw; margin-top: 1.4vw; }
.nc-weather { font-size: 2.4vw; margin-top: 1vw; }

/* ---------- Weather alert banner ---------- */
#alert-banner { display: none; position: fixed; left: 2vw; right: 2vw; top: 1.2vw; z-index: 20;
  padding: 1vw 1.8vw; border-radius: 1vw; font-size: 2.2vw; font-weight: 600;
  box-shadow: 0 0.6vw 2vw rgba(0, 0, 0, 0.35); }
#alert-banner.on { display: block; }
#alert-banner.warning { background: #d93025; color: #fff; }
#alert-banner.watch { background: #f29900; color: #1a1205; }
#alert-banner.advisory { background: #f6c026; color: #1a1205; }
.ab-icon { margin-right: 1vw; }
.ab-until { font-weight: 400; margin-left: 1.2vw; }
.ab-more { float: right; font-weight: 400; opacity: 0.85; }


/* ---------- Today (family feed) ---------- */
#view-today { background: #14122b; }
#view-today .panel-head { border-bottom-color: rgba(255, 255, 255, 0.14); }
.today { display: flex; flex-direction: column; height: calc(100% - 6.6vw); }
.daily { flex: 1 1 auto; display: flex; min-height: 0; }
.daily-card {
  flex: 1 1 0;
  margin-right: 1.4vw;
  padding: 2vw 2.4vw;
  border-radius: 1.2vw;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
}
.daily-card:last-child { margin-right: 0; }
.daily-title { font-size: 1.7vw; color: #c9b8ff; text-transform: uppercase; letter-spacing: 0.06em; }
.daily-body { font-size: 3vw; line-height: 1.3; margin-top: 1vw; }
.notes { padding: 1.4vw 0.4vw 0; }
.note { font-size: 2.2vw; margin-top: 0.5vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (orientation: portrait) {
  .daily { display: block; }
  .daily-card { margin: 0 0 1.6vw; padding: 3vw; }
  .daily-title { font-size: 2.6vw; }
  .daily-body { font-size: 4.6vw; }
  .note { font-size: 3.4vw; white-space: normal; }
}