:root {
  --screen-w: 1872px;
  --screen-h: 1404px;
  --ink: #171717;
  --ink-2: #292929;
  --ink-3: #3d3d3d;
  --muted: #666666;
  --soft: #8b8b8b;
  --rule: #b7b7b7;
  --rule-soft: #d8d8d8;
  --wash: #eeeeee;
  --wash-2: #f5f5f5;
  --paper: #fbfbfb;
  --white: #ffffff;
  /* Physical TRMNLX guardrails: 4-bit grayscale e-ink, 16 gray levels.
     Future HTML edits should prefer these safe values over hairlines,
     tiny captions, or subtle adjacent grays that disappear on device. */
  --trmnlx-safe-black: #000000;
  --trmnlx-safe-text: #1a1a1a;
  --trmnlx-safe-secondary-text: #444444;
  --trmnlx-safe-muted-text: #666666;
  --trmnlx-safe-divider: #aaaaaa;
  --trmnlx-safe-border: #bdbdbd;
  --trmnlx-safe-panel: #eeeeee;
  --trmnlx-safe-white: #ffffff;
  --trmnlx-min-font-size: 18px;
  --trmnlx-min-meta-font-size: 18px;
  --trmnlx-min-body-font-size: 22px;
  --trmnlx-min-important-font-size: 26px;
  --trmnlx-min-stroke-width: 3px;
  --trmnlx-preferred-stroke-width: 4px;
  --outer-pad: 34px;
  --gap: 22px;
  --radius: 18px;
  --radius-small: 12px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  /* BBC secondary headline + shopping / reminders (literals avoid weak WebView var() bugs) */
  --list-line-title-size: 18px;
  --list-line-title-lh: 1.16;
  --list-line-title-weight: 700;
  --list-line-title-color: #292929;
  --list-line-support-size: 16px;
  --list-line-support-lh: 1.16;
  --list-line-support-weight: 600;
  --list-line-support-color: #666666;
  /* Big numerals: weather temp + calendar date (one look) */
  --hero-numeral-size: 108px;
  --hero-numeral-lh: 0.88;
  --hero-numeral-weight: 860;
  --hero-numeral-tracking: -6px;
  --hero-numeral-block-height: calc(var(--hero-numeral-size) * var(--hero-numeral-lh));
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; width: var(--screen-w); height: var(--screen-h); overflow: hidden;
  background: var(--paper); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision;
}
body { position: relative; }
.screen {
  width: var(--screen-w); height: var(--screen-h); padding: var(--outer-pad);
  background: radial-gradient(circle at 12% 8%, #ffffff 0, #ffffff 18%, transparent 42%), linear-gradient(180deg, #fbfbfb 0%, #f4f4f4 100%);
  display: grid; grid-template-columns: 0.95fr 1.18fr 1.05fr; gap: var(--gap);
}
.column { min-height: 0; display: flex; flex-direction: column; gap: var(--gap); }
.panel {
  min-height: 0; overflow: hidden; border: 2px solid var(--rule); border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.68); box-shadow: inset 0 0 0 1px #f7f7f7; display: flex; flex-direction: column;
}
.panel.hidden { display: none; }
.weather { flex: 1 1 66%; min-height: 440px; }
.shopping { flex: 0 1 auto; max-height: 56%; min-height: 245px; }
.calendar { flex: 1 1 70%; min-height: 510px; }
.reminders { flex: 0 1 auto; max-height: 46%; min-height: 230px; }
.subway { flex: 0 0 auto; min-height: 215px; }
.feature { flex: 1 1 auto; }
.pad { padding: 25px 27px; }
.small-heading {
  display: inline-flex; align-items: center; gap: 10px; min-height: 38px; padding: 7px 13px 8px 11px; margin-bottom: 18px;
  border: 1.7px solid var(--rule); border-radius: 999px; background: var(--wash-2); color: var(--ink-3);
  font-size: 20px; line-height: 1; font-weight: 780; letter-spacing: .15px;
}
.small-heading .icon { font-size: 22px; line-height: 1; transform: translateY(-1px); }

.weather .pad { height: 100%; display: flex; flex-direction: column; }
.weather-main { display: grid; grid-template-columns: 132px 1fr auto; gap: 20px; align-items: center; padding-bottom: 20px; border-bottom: 1.7px solid var(--rule-soft); }
.weather-icon { width: 132px; height: 132px; border-radius: 50%; background: var(--wash-2); border: 2px solid var(--rule-soft); display: flex; align-items: center; justify-content: center; }
.weather-icon svg { width: 94px; height: 94px; stroke: var(--ink-2); fill: none; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.weather-temp,
.date-num {
  font-size: var(--hero-numeral-size);
  line-height: var(--hero-numeral-lh);
  letter-spacing: var(--hero-numeral-tracking);
  font-weight: var(--hero-numeral-weight);
}
.date-num { color: var(--ink); align-self: start; }
.weather-condition { margin-top: 8px; font-size: 33px; line-height: 1.05; font-weight: 760; letter-spacing: -0.5px; color: var(--ink-3); }
.weather-meta { text-align: right; font-size: 24px; line-height: 1.35; font-weight: 680; color: var(--muted); white-space: nowrap; }
.umbrella-alert { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin: 18px 0 0; padding: 14px 17px; border: 1.7px solid var(--rule); border-radius: var(--radius-small); background: #ededed; }
.umbrella-alert .umbrella { font-size: 34px; line-height: 1; }
.umbrella-alert .text { font-size: 25px; line-height: 1.18; font-weight: 760; }
.hour-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 22px; }
.hour { text-align: center; padding: 11px 6px 10px; border-radius: 12px; background: var(--wash-2); border: 1.5px solid var(--rule-soft); min-width: 0; }
.hour .time { font-size: 16px; line-height: 1; font-weight: 760; color: var(--muted); margin-bottom: 8px; }
.hour .temp { font-size: 27px; line-height: .95; font-weight: 840; letter-spacing: -0.5px; }
.hour .rain { margin-top: 7px; font-size: 15px; line-height: 1; font-weight: 740; color: var(--soft); }
.day-stack { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; }
.forecast-list.day-stack { margin-top: 12px; padding-bottom: 0; }
.future-days.day-stack { padding-top: 16px; }
.weather-density-full .forecast-list .day-block { padding-top: 12px; padding-bottom: 13px; }
.weather-density-roomy .forecast-list .day-block { padding-top: 11px; padding-bottom: 12px; }
.weather-density-normal .forecast-list .day-block { padding-top: 10px; padding-bottom: 11px; }
.weather-density-compact .forecast-list.day-stack { justify-content: flex-start; gap: 6px; }
.weather-density-compact .forecast-list .day-block { padding-top: 8px; padding-bottom: 9px; }
.conditions-row {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  flex: 0 0 auto;
}
.condition-box {
  border: 1.5px solid var(--rule-soft);
  border-radius: 12px;
  background: var(--wash-2);
  padding: 10px 11px 9px;
  min-width: 0;
}
.condition-title {
  font-size: 14px;
  line-height: 1;
  font-weight: 760;
  letter-spacing: 0.8px;
  color: var(--muted);
  text-transform: uppercase;
}
.condition-main {
  margin-top: 6px;
  font-size: 22px;
  line-height: 1.02;
  font-weight: 820;
  color: var(--ink-2);
  white-space: nowrap;
}
.condition-detail {
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.08;
  font-weight: 660;
  color: var(--soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.shopping .pad, .reminders .pad { height: 100%; }
.shopping-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; margin: 0; padding: 0; list-style: none; }
.shopping-grid li { display: grid; grid-template-columns: 23px 1fr; gap: 10px; align-items: start; padding: 7px 0 8px; border-bottom: 1.2px solid var(--rule-soft); min-width: 0; }
.check { width: 17px; height: 17px; border: 1.8px solid var(--ink-3); border-radius: 4px; transform: translateY(2px); background: var(--white); }
.more { margin-top: 14px; padding-top: 12px; border-top: 1.7px solid var(--rule); }

.calendar .pad { height: 100%; display: flex; flex-direction: column; }
.calendar-date { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: stretch; padding-bottom: 19px; border-bottom: 1.7px solid var(--rule-soft); }
.date-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  min-height: var(--hero-numeral-block-height);
  min-width: 0;
}
.date-text .weekday { font-size: 45px; line-height: .98; font-weight: 780; letter-spacing: -1.7px; }
.date-text .month { margin-top: 0; font-size: 25px; line-height: 1; font-weight: 680; color: var(--muted); }
.today-events { flex: 0 0 auto; padding: 18px 0 13px; border-bottom: 1.7px solid var(--rule-soft); }
.calendar-no-events-today {
  font-size: 22px;
  line-height: 1.2;
  font-weight: 620;
  color: var(--muted);
  padding: 6px 0 2px;
}
.event.big { display: grid; grid-template-columns: 91px 1fr; gap: 18px; padding: 12px 0; }
.event.big .time { font-size: 26px; line-height: 1.05; font-weight: 800; color: var(--ink-2); white-space: nowrap; }
.event.big .title { font-size: 31px; line-height: 1.08; font-weight: 760; letter-spacing: -0.5px; }
.event.big .meta { margin-top: 5px; font-size: 20px; line-height: 1.1; font-weight: 620; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.day-block { display: grid; grid-template-columns: 94px 1fr; gap: 18px; padding: 12px 0 14px; border-bottom: 1.2px solid var(--rule-soft); }
.day-block:last-child { border-bottom: none; }
.day-label { font-size: 21px; line-height: 1.05; font-weight: 800; color: var(--ink-3); }
.day-label span { display: block; margin-top: 5px; font-size: 17px; font-weight: 650; color: var(--soft); }
.mini-event { display: grid; grid-template-columns: 70px 1fr; gap: 12px; padding: 3px 0 6px; font-size: 20px; line-height: 1.18; align-items: baseline; }
.mini-event .time { font-weight: 780; color: var(--ink-3); }
.mini-event-body { min-width: 0; }
.mini-event .title { color: var(--ink-2); font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-event--weather { grid-template-columns: 1fr; gap: 0; align-items: stretch; padding-top: 0; }
.mini-event--weather .title { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.22; }
.mini-meta { margin-top: 2px; font-size: 16px; line-height: 1.18; font-weight: 620; color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.reminder-list { display: flex; flex-direction: column; gap: 0; }
.reminder { display: grid; grid-template-columns: 8px 1fr; gap: 14px; padding: 10px 0 12px; border-bottom: 1.2px solid var(--rule-soft); }
.reminder:last-child { border-bottom: none; }
.reminder > div:last-child { min-width: 0; }
.pin { width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: var(--ink-3); }
.reminder-sub { margin-top: 4px; }

.subway .pad { padding-bottom: 20px; }
.subway-top { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; margin-bottom: 16px; }
.station { font-size: 37px; line-height: .95; font-weight: 760; letter-spacing: -1px; }
.route-pill { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--ink-2); display: inline-flex; justify-content: center; align-items: center; font-size: 34px; line-height: 1; font-weight: 820; background: var(--wash-2); flex-shrink: 0; }
.train-times { display: flex; gap: 11px; flex-wrap: wrap; align-items: center; }
.train-time { border: 1.6px solid var(--rule); border-radius: 999px; padding: 8px 14px 9px; background: var(--wash-2); font-size: 30px; line-height: 1; font-weight: 760; letter-spacing: -0.7px; white-space: nowrap; }
.service-alert {
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1.4px solid var(--rule-soft);
  font-size: var(--list-line-support-size);
  line-height: var(--list-line-support-lh);
  font-weight: var(--list-line-support-weight);
  color: var(--list-line-support-color);
  white-space: pre-line;
}

.feature .pad { height: 100%; padding: 25px 27px; display: flex; flex-direction: column; }
.feature-frame { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 0; background: transparent; border: none; border-radius: 0; }
.comic-card { width: 100%; min-height: 0; flex: 1; border: none; border-radius: 0; background: transparent; padding: 0; display: grid; grid-template-rows: 1fr auto; gap: 20px; }
.comic-art { border: none; border-radius: 0; background: transparent; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding: 0; min-height: 0; }
.bubble { align-self: start; border: 1.6px solid var(--ink-3); border-radius: 18px; background: var(--white); padding: 18px; font-family: var(--serif); font-size: 25px; line-height: 1.18; font-weight: 700; }
.comic-caption { font-family: var(--serif); font-size: 29px; line-height: 1.18; font-weight: 700; text-align: center; color: var(--ink-2); }

.feature-comic-layout { display: none; flex: 1; min-height: 0; width: 100%; flex-direction: column; align-items: stretch; gap: 18px; }
.feature.comic-mode .feature-comic-layout { display: flex; }
.comic-zone { flex: 1 1 58%; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.comic-image-wrap { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; align-items: flex-start; justify-content: center; }
.comic-image-wrap img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; object-position: top center; }
.comic-placeholder { font-size: 22px; font-weight: 640; color: var(--muted); text-align: center; padding: 20px 12px; }
.feature-secondary { flex: 0 1 auto; min-height: 0; width: 100%; border-top: 1.4px solid var(--rule-soft); padding-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.secondary-item { padding-bottom: 10px; border-bottom: 1px solid var(--rule-soft); }
.secondary-item:last-child { border-bottom: none; padding-bottom: 0; }
.secondary-title { font-size: 20px; line-height: 1.15; font-weight: 700; color: var(--ink-3); margin-bottom: 4px; }
.secondary-text { font-size: 19px; line-height: 1.22; font-weight: 620; color: var(--muted); }
.feature-news-secondary { gap: 8px; }
.secondary-heading { font-size: 17px; line-height: 1; font-weight: 760; letter-spacing: 0.6px; color: var(--soft); margin-bottom: 2px; text-transform: uppercase; }
.feature-news-secondary .secondary-item { padding-bottom: 8px; display: flex; flex-direction: column; gap: 4px; }
.secondary-headline-title,
.reminder-main,
.shopping-item-text,
.shopping-grid li > span.check + span {
  font-size: var(--list-line-title-size);
  line-height: var(--list-line-title-lh);
  font-weight: var(--list-line-title-weight);
  color: var(--list-line-title-color);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.secondary-headline-description,
.reminder-sub,
.more {
  font-size: var(--list-line-support-size);
  line-height: var(--list-line-support-lh);
  font-weight: var(--list-line-support-weight);
  color: var(--list-line-support-color);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.secondary-headline-description {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.reminder-sub,
.more {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.news-list, .poem-card, .message-card { display: none; width: 100%; flex: 1; min-height: 0; min-width: 0; overflow: hidden; }
.feature.news-mode .news-list,
.feature.poem-mode .poem-card,
.feature.message-mode .message-card { display: block; }
.feature.news-mode .comic-card,
.feature.poem-mode .comic-card,
.feature.message-mode .comic-card,
.feature.comic-mode .comic-card { display: none; }
.headline { padding: 18px 0 20px; border-bottom: 1.5px solid var(--rule-soft); }
.headline:first-child { padding-top: 0; }
.headline:last-child { border-bottom: none; }
.headline h2 { margin: 0; font-size: 35px; line-height: 1.06; letter-spacing: -1px; font-weight: 760; }
.headline p {
  margin: 8px 0 0;
  font-size: 22px;
  line-height: 1.22;
  color: var(--muted);
  font-weight: 620;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.poem-card, .message-card { border: none; border-radius: 0; background: transparent; padding: 0; }
.poem-title, .message-title { font-size: 34px; line-height: 1.05; margin: 0 0 16px; font-weight: 760; }
.poem-lines { font-family: var(--serif); font-size: 30px; line-height: 1.3; white-space: pre-line; }
.message-body { font-size: 30px; line-height: 1.28; font-weight: 650; }

@media screen and (max-width: 1871px) {
  body.preview-scale { transform-origin: top left; transform: scale(calc(100vw / 1872)); }
}

/* Builder-driven TRMNLX HTML route. The zone sizing keeps the original
   three-column composition while allowing service assignments to change. */
.trmnlx-builder {
  position: relative;
}

.trmnlx-builder.density-spacious {
  --gap: 26px;
  --outer-pad: 38px;
}

.trmnlx-builder.density-compact {
  --gap: 18px;
  --outer-pad: 30px;
}

.trmnlx-builder.density-spacious .pad {
  padding: 29px 31px;
}

.trmnlx-builder.density-compact .pad {
  padding: 21px 23px;
}

.trmnlx-builder .builder-zone {
  min-height: 0;
}

.trmnlx-builder .zone-left-top {
  flex: 1 1 66%;
  min-height: 440px;
}

.trmnlx-builder .zone-left-bottom {
  flex: 0 1 auto;
  max-height: 56%;
  min-height: 245px;
}

.trmnlx-builder .zone-middle-main {
  flex: 1 1 70%;
  min-height: 510px;
}

.trmnlx-builder .zone-middle-bottom {
  flex: 0 1 auto;
  max-height: 46%;
  min-height: 230px;
}

.trmnlx-builder .zone-right-top {
  flex: 0 0 auto;
  min-height: 215px;
}

.trmnlx-builder .zone-right-main {
  flex: 1 1 auto;
}

.trmnlx-builder .empty-panel .pad {
  height: 100%;
}

.empty-zone {
  width: 100%;
  height: 100%;
  min-height: 80px;
  border-radius: var(--radius-small);
  background: rgba(238, 238, 238, 0.34);
}

.quiet-empty {
  color: var(--muted);
  font-size: var(--trmnlx-min-body-font-size);
  line-height: 1.25;
  font-weight: 680;
}

.builder-warning-strip {
  position: absolute;
  z-index: 3;
  top: 8px;
  left: var(--outer-pad);
  right: var(--outer-pad);
  display: flex;
  gap: 12px;
  color: var(--muted);
  font-size: var(--trmnlx-min-meta-font-size);
  font-weight: 700;
  pointer-events: none;
}

.trmnlx-builder .shopping-grid li small {
  grid-column: 2;
  color: var(--muted);
  font-size: var(--list-line-support-size);
  font-weight: var(--list-line-support-weight);
  line-height: var(--list-line-support-lh);
}

.trmnlx-builder .image-card {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radius-small);
  background: var(--wash-2);
}

.trmnlx-builder .image-card img {
  width: 100%;
  height: 100%;
  display: block;
}

.trmnlx-builder .image-fit-contain img {
  object-fit: contain;
}

.trmnlx-builder .image-fit-cover img {
  object-fit: cover;
}