:root{
  --bg0:#070b14;
  --bg1:#0a1122;
  --panel: rgba(255,255,255,.06);
  --panel2: rgba(255,255,255,.08);
  --stroke: rgba(255,255,255,.08);
  --text: rgba(255,255,255,.92);
  --muted: rgba(255,255,255,.65);
  --muted2: rgba(255,255,255,.45);

  --r12:12px;
  --r16:16px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);

  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 25% 10%, rgba(37,99,235,.18), transparent 55%),
    radial-gradient(900px 500px at 85% 18%, rgba(16,185,129,.10), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg0));
}

.app{min-height:100%; display:flex; flex-direction:column;}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:26px 28px 18px;
}

.left .title{
  font-size:54px;
  line-height:1;
  letter-spacing:-.02em;
  font-weight:800;
}
.left .sub{
  margin-top:6px;
  font-size:14px;
  color:var(--muted);
}

.controls{
  display:flex;
  align-items:center;
  gap:10px;
  padding-top:6px;
}

.btn{
  height:34px;
  min-width:34px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.05);
  color:var(--text);
  cursor:pointer;
}
.btn:hover{background:rgba(255,255,255,.08)}

.seg{
  display:flex;
  border:1px solid var(--stroke);
  border-radius:999px;
  overflow: visible;
  background:rgba(255,255,255,.04);
  padding: 2px;
}
.segbtn{
  font-weight: 700;
  padding: 14px 26px;
  font-size: 18px;
  color:var(--muted);
  background:transparent;
  border:0;
  cursor:pointer;
  border-radius: 999px;
  line-height: 1;
}
.segbtn.active{
  color:var(--text);
  background:rgba(255,255,255,.08);
}

.right{display:flex; align-items:center; gap:12px;}
.pill{
  font-size:12px;
  color:var(--muted);
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.04);
}

.chips{display:flex; gap:8px; flex-wrap:wrap;}
.chip{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.04);
  color:var(--text);
  cursor:pointer;
}
.chip.off{opacity:.45}
.dot{width:10px;height:10px;border-radius:999px; display:inline-block;}

.content{
  padding: 8px 26px 26px;
  flex:1;
}

.board{
  display:grid;
  gap:14px;
}

.board.week{
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.board.day{
  grid-template-columns: minmax(0, 1fr);
}

.col{
  border:1px solid var(--stroke);
  background:rgba(255,255,255,.03);
  border-radius:var(--r16);
  overflow:hidden;
  box-shadow: var(--shadow);
  min-height: 560px;
}

.col.single{min-height: 720px;}

.dayhdr{
  padding:14px 14px 12px;
  border-bottom:1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
}
.dayhdr .dayname{
  font-size:16px;
  font-weight:700;
  color:rgba(255,255,255,.88);
}

.dayhdr.big .dayname{font-size:22px}

.allday{
  padding:12px 12px 8px;
  border-bottom:1px solid rgba(255,255,255,.06);
  min-height: 56px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.allday-empty{height:24px}

.timed{
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ev{
  display:flex;
  gap:10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(12,18,32,.65);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  overflow:hidden;
}

.evbar{
  width:6px;
  flex:0 0 6px;
}

.evbody{
  padding:10px 12px 10px;
  width:100%;
}

.evtop{
  display:grid;
  grid-template-columns: 92px 1fr;
  gap:10px;
  align-items:baseline;
}

.evtime{
  font-size:12px;
  color:rgba(255,255,255,.80);
  font-weight:700;
  letter-spacing:.02em;
  white-space:nowrap;
}

.evtitle{
  font-size:14px;
  font-weight:750;
  color:rgba(255,255,255,.95);

  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.evmeta{
  margin-top:6px;
  font-size:11px;
  color:var(--muted2);

  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.allday-ev .evtop{
  grid-template-columns: 92px 1fr;
}
.allday-ev .evtime{color:rgba(255,255,255,.70)}
.more{
  font-size:12px;
  color:var(--muted);
  padding:6px 2px;
}

.agenda{
  border:1px solid var(--stroke);
  border-radius:var(--r16);
  background:rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.agendaday{
  padding:14px 16px;
  font-weight:800;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.03);
}

.agendarow{
  display:grid;
  grid-template-columns: 140px 1fr 120px;
  gap:12px;
  padding:12px 16px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.agendatime{
  color:var(--muted);
  font-weight:700;
  display:flex;
  align-items:center;
  gap:10px;
}
.agendatitle{
  font-weight:750;
}
.agendacat{
  color:var(--muted2);
  text-align:right;
}

.empty{
  margin-top:18px;
  color:var(--muted);
}

@media (max-width: 1200px){
  .board.week{grid-template-columns: repeat(2, minmax(0, 1fr));}
  .topbar{flex-wrap:wrap}
}


/* week cap toggle */
.morebtn{
  background: transparent;
  border: 0;
  padding: 6px 8px;
  cursor: pointer;
  color: inherit;
  font: inherit;
}
.morebtn:focus{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}


/* week cap toggle - affordance */
/* Make "+N more" in Week view read like a control, not muted text */
.more.morebtn{
  display:block;
  width:100%;
  text-align:center;
  padding:10px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.78);
  letter-spacing: .2px;
}

.more.morebtn:hover{
  background: rgba(255,255,255,.06);
}

.more.morebtn:active{
  transform: translateY(1px);
}


/* Gotham Weather (Phase 2) */
/* Clock + Weather row (keeps header compact and Gotham) */
.headrow{
  display:flex;
  align-items: baseline;
  gap: 14px;
}

.wx{
  display:flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  padding-top: 2px;
}

.wx-temp{
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .2px;
  color: rgba(255,255,255,.90);
  font-variant-numeric: tabular-nums;
}

.wx-desc{
  font-size: 12px;
  color: rgba(255,255,255,.68);
}


/* Gotham Forecast (Phase 3) */
.forecast{
  padding: 18px 16px;
}

.fx-row{
  display:flex;
  gap: 14px;
  align-items: stretch;
}

.fx-card{
  flex: 1 1 0;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  border-radius: var(--r16);
  box-shadow: var(--shadow);
  overflow:hidden;
  padding: 14px 14px 12px;
  min-height: 140px;
}

.fx-dow{
  font-weight: 800;
  color: rgba(255,255,255,.92);
  margin-bottom: 6px;
}

.fx-date{
  font-size: 12px;
  color: rgba(255,255,255,.55);
  margin-bottom: 10px;
}

.fx-icon{
  font-size: 22px;
  line-height: 1;
  margin-bottom: 10px;
  color: rgba(255,255,255,.88);
}

.fx-desc{
  font-size: 12px;
  color: rgba(255,255,255,.68);
  margin-bottom: 12px;
  min-height: 16px;
}

.fx-temps{
  display:flex;
  justify-content: space-between;
  align-items: baseline;
  font-variant-numeric: tabular-nums;
}

.fx-hi{
  font-size: 16px;
  font-weight: 900;
  color: rgba(255,255,255,.92);
}

.fx-lo{
  font-size: 13px;
  color: rgba(255,255,255,.60);
}

/* ================================
   Gotham Agenda — Forecast Premium Overrides
   (safe: appended overrides only)
   ================================ */

.forecast{
  padding-top: 28px;
}

/* Make the row breathe and center nicely */
.forecast .fx-row{
  display: flex;
  gap: 18px;
  align-items: stretch;
  justify-content: flex-start;
  padding: 14px 18px;
}

/* Bigger, more legible cards */
.forecast .fx-card{
  min-width: 240px;
  height: 120px;
  padding: 16px 18px;
  border-radius: 16px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Typography scale */
.forecast .fx-day{
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .4px;
}

.forecast .fx-date{
  font-size: 13px;
  opacity: .75;
  margin-top: 2px;
}

.forecast .fx-temps{
  margin-top: 10px;
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.forecast .fx-hi{
  font-size: 28px;
  font-weight: 800;
}

.forecast .fx-lo{
  font-size: 18px;
  opacity: .75;
  font-weight: 700;
}

.forecast .fx-desc{
  margin-top: 8px;
  font-size: 14px;
  opacity: .9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Subtle hover polish (desktop) */
@media (hover:hover){
  .forecast .fx-card{
    transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
  }
  .forecast .fx-card:hover{
    transform: translateY(-2px);
  }
}


/* =========================
   A1 — Premium Forecast Layout (append-only)
   Scope: Forecast tab UI only (no JS changes)
   ========================= */

/* Safer box sizing for layout tweaks */
#gotham-agenda, #gotham-agenda * { box-sizing: border-box; }

/* Forecast grid: responsive, premium spacing */
.forecast-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px !important;
  align-items: stretch;
}

/* 3-up and 2-up fallbacks for narrower widths */
@media (max-width: 1200px) {
  .forecast-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .forecast-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .forecast-grid { grid-template-columns: 1fr; }
}

/* Forecast card polish (keeps baseline stable) */
.forecast-card {
  border-radius: 16px !important;
  padding: 14px 14px 12px !important;
  overflow: hidden;
  position: relative;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transform: translateZ(0);
}

/* Subtle premium “veil” without changing your theme colors */
.forecast-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.08));
  pointer-events: none;
}

/* Keep content above veil */
.forecast-card > * { position: relative; }

/* Day header hierarchy */
.forecast-card .day,
.forecast-card .forecast-day,
.forecast-card .date {
  font-weight: 700 !important;
  letter-spacing: 0.3px;
}

/* Icon sizing alignment (non-breaking: supports common classnames) */
.forecast-card img,
.forecast-card .wx-icon,
.forecast-card .icon {
  width: 52px !important;
  height: 52px !important;
  object-fit: contain;
  display: block;
  margin: 8px auto 10px;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35));
}

/* Temperature row: bigger, cleaner */
.forecast-card .temps,
.forecast-card .temp,
.forecast-card .temperature {
  display: flex;
  justify-content: center;
  gap: 10px;
  align-items: baseline;
  font-weight: 700;
}

/* High / low emphasis without relying on specific markup */
.forecast-card .high,
.forecast-card .temp-high {
  font-size: 1.25rem;
}
.forecast-card .low,
.forecast-card .temp-low {
  font-size: 1.05rem;
  opacity: 0.85;
}

/* Condition text clamp: prevents tall cards */
.forecast-card .condition,
.forecast-card .desc,
.forecast-card .label {
  text-align: center;
  line-height: 1.25;
  margin-top: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Micro-hover: only on devices with hover */
@media (hover: hover) and (pointer: fine) {
  .forecast-card:hover {
    transform: translateY(-2px);
    transition: transform 160ms ease;
  }
}

/* =========================
   A2 — Forecast: Expand + Scale (append-only)
   Goal:
     - Use more horizontal space
     - Reduce "thin cards" feel
     - Slightly larger temps / clearer hierarchy
   ========================= */

/* Let the forecast area breathe (works even if wrapped in a generic content container) */
#tab-forecast,
.tab-forecast,
.forecast-tab,
.forecast-wrap,
.forecast-container {
  max-width: 1600px;
  width: min(1600px, calc(100% - 64px));
  margin-left: auto !important;
  margin-right: auto !important;
}

/* If your app uses a generic main/container, keep it non-destructive */
.main,
.container,
.content,
.page {
  /* only affects layouts that already center; doesn’t force full-width */
  max-width: 1600px;
}

/* Forecast grid: slightly wider columns + tighter vertical footprint */
.forecast-grid {
  grid-template-columns: repeat(5, minmax(220px, 1fr)) !important;
  gap: 16px !important;
  margin-top: 14px !important;
}

/* Cards: more presence */
.forecast-card {
  min-height: 110px;
  padding: 16px 18px 14px !important;
  border-radius: 18px !important;
}

/* Stronger type scale for temps without changing markup */
.forecast-card .temps,
.forecast-card .temp,
.forecast-card .temperature {
  gap: 14px;
}

.forecast-card .high,
.forecast-card .temp-high {
  font-size: 1.45rem !important;
  letter-spacing: 0.2px;
}

.forecast-card .low,
.forecast-card .temp-low {
  font-size: 1.10rem !important;
  opacity: 0.82;
}

/* Bring condition text up a notch */
.forecast-card .condition,
.forecast-card .desc,
.forecast-card .label {
  margin-top: 8px !important;
  font-size: 0.98rem;
  opacity: 0.92;
}

/* Make the day/date line more readable */
.forecast-card .day,
.forecast-card .forecast-day,
.forecast-card .date {
  font-size: 1.02rem;
  opacity: 0.98;
}

/* Reduce the “stuck to the top” feeling if forecast tab has a section wrapper */
#tab-forecast .forecast-grid,
.tab-forecast .forecast-grid,
.forecast-tab .forecast-grid {
  padding-bottom: 10px;
}

/* Responsive: keep premium density but avoid cramping */
@media (max-width: 1200px) {
  .forecast-grid { grid-template-columns: repeat(3, minmax(240px, 1fr)) !important; }
}
@media (max-width: 820px) {
  .forecast-grid { grid-template-columns: repeat(2, minmax(240px, 1fr)) !important; }
}
@media (max-width: 520px) {
  .forecast-grid { grid-template-columns: 1fr !important; }
  #tab-forecast,
  .tab-forecast,
  .forecast-tab,
  .forecast-wrap,
  .forecast-container { width: calc(100% - 26px); }
}

/* =========================
   A3 — Forecast Vertical Presence (append-only)
   Goal:
     - Vertically balance layout
     - Reduce top-heavy feel
     - Elevate forecast row visually
   ========================= */

/* Make forecast tab a flex column */
#tab-forecast,
.tab-forecast,
.forecast-tab,
.forecast-wrap {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 60vh;
}

/* Add intentional vertical spacing */
.forecast-grid {
  margin-top: 32px !important;
  margin-bottom: 32px !important;
}

/* Slight scale-up for card prominence */
.forecast-card {
  transform: scale(1.02);
  transition: transform 200ms ease;
}

/* Subtle lift shadow to separate from background */
.forecast-card {
  box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}


/* =========================
   A4 — Forecast: True Vertical Centering (append-only)
   Goal:
     - Center forecast cards within the tab area
     - Keep header/tabs untouched
   ========================= */

/* Give forecast tab more usable height */
#tab-forecast,
.tab-forecast,
.forecast-tab,
.forecast-wrap {
  min-height: 72vh !important;
}

/* Center the grid vertically inside the forecast area */
#tab-forecast,
.tab-forecast,
.forecast-tab,
.forecast-wrap {
  justify-content: center !important;
}

/* Keep a reasonable top margin so it never jams into tabs */
.forecast-grid {
  margin-top: 18px !important;
  margin-bottom: 18px !important;
}


/* ===== Gotham Forecast: Taller cards (UI-only override) ===== */
.forecast .fx-row { align-items: stretch; }

.forecast .fx-card,
.forecast-card {
  min-height: 190px;
}

/* ===== Gotham Forecast: Center + Kiosk Exaggeration (fx-row/fx-card) ===== */
#forecast.forecast{
  /* Don’t fight the internal row; just give it room */
  padding-top: 40px !important;
}

/* Center the actual row that holds the cards */
.forecast .fx-row{
  display: flex !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 26px !important;

  width: 100% !important;
  margin: 0 auto !important;
  padding: 18px 14px !important;

  /* If screen is smaller, allow horizontal scroll instead of shrinking cards */
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* Make cards big, fixed-size (no “tiny” shrink) */
.forecast .fx-card{
  flex: 0 0 auto !important;
  min-width: 280px !important;
  min-height: 240px !important;
  padding: 18px 18px !important;
  border-radius: 18px !important;
}

/* Global bump inside card */
.forecast .fx-card *{
  font-size: 1.05em;
}

/* Exaggerate the key elements (temps + metrics) */
.forecast .fx-day{  font-size: 22px !important; font-weight: 800 !important; }
.forecast .fx-date{ font-size: 14px !important; opacity: .8 !important; }

.forecast .fx-hi{ font-size: 46px !important; font-weight: 900 !important; line-height: 1 !important; }
.forecast .fx-lo{ font-size: 22px !important; opacity: .85 !important; }

.forecast .fx-desc{
  font-size: 18px !important;
  margin-top: 6px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* “Precip … / Wind …” lines (covers your current markup) */
.forecast .fx-card .metric,
.forecast .fx-card .meta,
.forecast .fx-card .wx-meta,
.forecast .fx-card .fx-meta,
.forecast .fx-card p{
  font-size: 16px !important;
  line-height: 1.25 !important;
}


/* Let forecast escape left bias of main.content */
main.content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Make forecast span full screen width */
#forecast.forecast {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important; /* break out of container */
  display: flex !important;
  justify-content: center !important;
}

/* Center the row perfectly */
#forecast .fx-row {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 32px !important;
  width: auto !important;
  margin: 0 auto !important;
}



/* ===== Forecast Centering v2 (safe, kiosk-friendly) ===== */

/* Keep main content normal (do NOT center the whole app) */
main.content{
  width: 100%;
}

/* Forecast section should behave like a normal centered section */
#forecast.forecast{
  width: 100%;
  display: flex;
  justify-content: center;
}

/* Center cards across the whole screen; wrap instead of off-screen overflow */
#forecast .fx-row{
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;          /* key: prevents left push-off */
  gap: 32px;
  width: 100%;
  max-width: 1800px;        /* kiosk-friendly cap; adjust later if you want */
  margin: 0 auto;
  padding: 0 60px;          /* keeps edges clean */
}


/* ===== Forecast Centering v3 (hard override) ===== */
/* Goal: centered on screen, no left push-off, no forced horizontal scroll */

main.content{
  min-height: calc(100vh - 120px); /* topbar space */
}

/* Forecast section fills the content area and centers its child */
#forecast{
  width: 100% !important;
  min-height: calc(100vh - 120px) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* The row that holds the cards */
#forecast .fx-row,
#forecast #fxRow{
  width: min(1800px, 100%) !important;
  display: flex !important;
  justify-content: center !important;
  align-items: stretch !important;

  flex-wrap: wrap !important;          /* KEY */
  overflow-x: visible !important;      /* stop the scroller behavior */
  overflow-y: visible !important;

  gap: 32px !important;
  padding: 24px 48px !important;
  margin: 0 auto !important;
}

/* ===== Gotham Forecast: FULL-BLEED + TRUE CENTER (final override) ===== */
/* Force forecast area to ignore parent container width/left bias */
#forecast,
#forecast.forecast{
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;  /* breaks out of centered/narrow parents */
  margin-right: calc(50% - 50vw) !important;
  padding-left: 48px !important;
  padding-right: 48px !important;
  box-sizing: border-box !important;
}

/* Center the cards within the full-bleed forecast area */
#forecast .fx-row,
#forecast #fxRow{
  width: fit-content !important;             /* shrink to cards */
  max-width: 100% !important;
  margin: 0 auto !important;                 /* center the row block */
  justify-content: center !important;         /* center cards inside row */
  align-items: center !important;
  gap: 28px !important;
  flex-wrap: wrap !important;                /* allow 2nd row if needed */
}

/* Keep kiosk exaggeration (card size) */
#forecast .fx-card{
  width: 300px !important;
  min-height: 190px !important;
}

/* ===== Gotham Forecast: TRUE CENTER (override + undo the 100vw hack) ===== */
#forecast,
#forecast.forecast{
  /* UNDO the full-bleed breakout */
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;

  /* Make the whole forecast area a centering container */
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;

  /* Give it breathing room for kiosk */
  padding: 90px 70px !important;
  box-sizing: border-box !important;
}

/* The row itself becomes a bounded centered “stage” */
#forecast #fxRow,
#forecast .fx-row{
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;   /* centers EACH wrapped line */
  align-items: stretch !important;
  align-content: center !important;     /* centers the wrapped block vertically */
  gap: 28px !important;

  width: min(1700px, 100%) !important; /* keeps it centered, not spanning full width */
  margin: 0 auto !important;
}

/* Keep cards big/exaggerated */
#forecast .fx-card{
  flex: 0 0 320px !important;           /* fixed kiosk-friendly width */
  width: 320px !important;
  min-height: 210px !important;
}

/* ===== Gotham Forecast: intentional right nudge ===== */
#forecast,
#forecast.forecast{
  transform: translateX(120px) !important;
}

/* === Gotham Now Header Enhancements === */

#nowTime {
  font-size: 64px;
  font-weight: 800;
  letter-spacing: 2px;
}

#nowWxMain {
  font-size: 28px;
  font-weight: 500;
  opacity: 0.9;
  vertical-align: middle;
}

@media (min-width: 1600px) {
  #nowTime {
    font-size: 72px;
  }
  #nowWxMain {
    font-size: 32px;
  }
}


/* === Gotham Board Center + Scale Enhancements === */

.board {
  max-width: 1600px;
  margin: 0 auto;
}

.day {
  min-width: 220px;
}

.event {
  padding: 14px 16px;
  font-size: 16px;
}

.event .time {
  font-size: 15px;
  font-weight: 600;
}

.event .title {
  font-size: 17px;
  font-weight: 600;
}

.event .meta {
  font-size: 14px;
  opacity: 0.8;
}

@media (min-width: 1600px) {
  .day {
    min-width: 240px;
  }
  .event {
    font-size: 17px;
  }
}


/* === Gotham Board Kiosk Scale (v2 - correct selectors) === */

/* Center the board on wide screens without changing behavior */
.board{
  max-width: 1560px;          /* tighter than full width -> visually centered */
  margin: 0 auto;
}

/* Make columns feel bigger without breaking the grid */
.col{
  min-height: 620px;          /* a touch taller for kiosk readability */
}

/* Make event cards more readable */
.ev{
  border-radius: 16px;
}

.evbody{
  padding: 12px 14px 12px;
}

.evtime{
  font-size: 14px;
  font-weight: 800;
}

.evtitle{
  font-size: 16px;
  font-weight: 800;
}

.evmeta{
  font-size: 12px;
}

/* Slight bump for large displays */
@media (min-width: 1600px){
  .board{ max-width: 1680px; }
  .evtime{ font-size: 15px; }
  .evtitle{ font-size: 17px; }
  .evmeta{ font-size: 13px; }
}


/* === Gotham Board Center + More Event Text (v3) === */

/* True centering: make week columns fixed-ish width and center the grid */
.board.week{
  grid-template-columns: repeat(7, 220px);
  justify-content: center;
}

/* Day view also centered */
.board.day{
  justify-content: center;
}

/* Give titles more room by shrinking the time column */
.evtop{
  grid-template-columns: 78px 1fr;
}

/* Show more title + meta lines */
.evtitle{
  -webkit-line-clamp: 3;
  line-height: 1.15;
}

.evmeta{
  -webkit-line-clamp: 2;
  line-height: 1.15;
}

/* Slightly reduce vertical padding so more text fits per card */
.evbody{
  padding: 10px 12px 10px;
}

@media (min-width: 1600px){
  .board.week{
    grid-template-columns: repeat(7, 240px);
  }
  .evtop{
    grid-template-columns: 86px 1fr;
  }
}


/* === Gotham Board Visual Center Nudge (v4) === */

.board.week{
  transform: translateX(70px);
}

.board.day{
  transform: translateX(70px);
}

@media (min-width: 1600px){
  .board.week,
  .board.day{
    transform: translateX(90px);
  }
}


/* ===== V5: Lower calendar board ===== */
.board,
.week-board,
.days-grid {
  margin-top: 80px !important;
}


/* ===== V5: Larger top nav buttons ===== */
.view-toggle button,
.nav-controls button,
.segmented button {
  font-size: 16px !important;
  padding: 12px 22px !important;
  border-radius: 18px !important;
}

.view-toggle,
.segmented {
  height: 52px !important;
}


/* ===== V6: Force enlarge top nav buttons ===== */
.nav-bar button,
.top-nav button,
button[role="tab"],
button[class*="view"] {
  font-size: 18px !important;
  padding: 14px 26px !important;
  min-height: 56px !important;
  border-radius: 22px !important;
}

/* === Gotham NAV + Layout Tuning (nav buttons + push board down) === */

/* 1) Push the content/cards DOWN a bit more (week/day/agenda/forecast containers) */
#board, #agenda, #forecast {
  margin-top: 26px !important;  /* bump this up/down if needed */
}

/* 2) Make top navigation buttons clearly larger */
#prevBtn, #nextBtn, #todayBtn {
  font-size: 20px !important;
  padding: 12px 16px !important;
  min-height: 48px !important;
  border-radius: 18px !important;
}

/* 3) Make view tabs (Week/Day/Agenda/Forecast) larger + easier to tap */
#viewWeek, #viewDay, #viewAgenda, #viewForecast {
  font-size: 18px !important;
  padding: 12px 18px !important;
  min-height: 48px !important;
  border-radius: 18px !important;
}

/* Optional: increase spacing between nav controls slightly */
#prevBtn { margin-right: 8px !important; }
#nextBtn { margin-left: 8px !important; }

/* === End Gotham NAV + Layout Tuning === */


/* --- Month view --- */
.m-grid{ display:flex; flex-direction:column; gap:10px; }
.m-dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:10px; }
.m-dowcell{ font-weight:700; letter-spacing:.04em; opacity:.85; padding:6px 10px; }
.m-cells{ display:grid; grid-template-columns:repeat(7,1fr); gap:10px; }
.m-cell{ border:1px solid rgba(255,255,255,.10); border-radius:14px; padding:10px; min-height:140px; background:rgba(0,0,0,.22); }
.m-cell.out{ opacity:.45; }
.m-cell.today{ outline:2px solid rgba(255,215,0,.35); }
.m-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.m-num{ font-size:22px; font-weight:800; }
.m-mon{ font-size:12px; opacity:.7; }
.m-list{ display:flex; flex-direction:column; gap:6px; }
.m-ev{ display:grid; grid-template-columns:10px auto 1fr; gap:8px; align-items:center; font-size:13px; line-height:1.15; }
.m-dot{ width:8px; height:8px; border-radius:99px; display:inline-block; }
.m-time{ opacity:.85; white-space:nowrap; }
.m-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-more{ font-size:12px; opacity:.75; padding-left:18px; }

/* --- Gotham Agenda safety: forecast must NOT appear outside Forecast tab --- */
#forecast[hidden] { display: none !important; }


/* --- Month view centering --- */
/* Center Month by giving it a max-width smaller than the screen */
.board.month{
  display:block;            /* override grid */
  max-width: 1560px;        /* tweak this number if you want more/less shift */
  margin: 0 auto;           /* centers within main.content */
}

/* Month grid fills the centered board */
.board.month .m-grid{
  width: 100%;
  margin: 0;
}

/* --- Month force-center (override) --- */
/* Center the month grid regardless of what classes #board has */
.m-grid{
  max-width: 1560px !important;   /* adjust if you want */
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

/* ---

/* =========================================================
   FINAL OVERRIDES (Month align + kill band + fix other tabs)
   ========================================================= */

/* 1) STOP global centering of the entire app content
      (this was breaking Week/Day/Agenda by forcing flex + align-items:center) */
main.content{
  display: block !important;
  align-items: stretch !important;
}

/* 2) Match the existing Week/Day right-nudge so Month lines up */
.board.month{
  transform: translateX(70px) !important;
}
@media (min-width: 1600px){
  .board.month{
    transform: translateX(90px) !important;
  }
}

/* 3) Kill the dark "band" from out-of-month dimming */
#board.board.month .m-cell.out,
.board.month .m-cell.out{
  opacity: 1 !important;
  filter: none !important;
}

/* Keep out-of-month readable (no inherited dimming) */
#board.board.month .m-cell.out *,
.board.month .m-cell.out *{
  opacity: 1 !important;
  filter: none !important;
}