/* Kitchen dashboard. Laid out at 1920 x 1080; app.js scales it to fit the screen. */

@font-face { font-family: 'Fraunces'; font-weight: 300; font-display: swap; src: url(fonts/fraunces-latin-300-normal.woff2) format('woff2'); }
@font-face { font-family: 'Fraunces'; font-weight: 400; font-display: swap; src: url(fonts/fraunces-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 400; font-display: swap; src: url(fonts/figtree-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Figtree'; font-weight: 700; font-display: swap; src: url(fonts/figtree-latin-700-normal.woff2) format('woff2'); }

:root {
  --ink: #F5F0E8;
  --soft: #CFC7BA;
  --accent: #F0A64B;
  --line: rgba(245, 240, 232, 0.16);
  --panel: rgba(12, 14, 17, 0.6); /* app.js sets this from the link's panel= value */
}

[hidden] { display: none !important; }

html, body { margin: 0; height: 100%; overflow: hidden; background: #000; cursor: none; }

#stage {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px;
  transform-origin: 0 0; overflow: hidden;
  background: #0e1012; color: var(--ink);
  font-family: 'Figtree', system-ui, sans-serif;
}

/* Photo */
.photo { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; background: #0e1012; }
.photo img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 2s ease; }
.photo img.show { opacity: 1; }

/* Panel: the same three parts in every layout. The top (clock and date on the left, the weather now
   on the right, sharing baselines), the forecast, and the agenda. Spacing is in steps of 8px. */
.panel { position: absolute; box-sizing: border-box; display: flex; flex-direction: column; gap: 24px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }
.layout-a .panel { top: 0; right: 0; width: 600px; height: 1080px; padding: 56px 52px 48px; background: var(--panel); backdrop-filter: blur(20px); }
.layout-b .photo { width: 1240px; }
.layout-b .panel { top: 0; left: 1240px; width: 680px; height: 1080px; padding: 64px 60px 48px; background: #121417; }
.layout-a .forecast, .layout-b .forecast, .layout-a .agenda, .layout-b .agenda { border-top: 1px solid var(--line); padding-top: 24px; }

/* Top. Sizes are set so the widest time ("00:00") and a temperature like "-9°F" fit on one line;
   anything wider moves the weather under the clock instead of running off the panel. */
.top { display: flex; flex-direction: column; gap: 8px; }
.line { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; column-gap: 16px; }
.hm { font-family: 'Fraunces', Georgia, serif; font-weight: 300; font-size: 120px; line-height: 1; letter-spacing: -2px; white-space: nowrap; }
.layout-b .hm { font-size: 140px; letter-spacing: -3px; }
.date { font-size: 30px; line-height: 1.2; white-space: nowrap; }
.layout-b .date { font-size: 32px; }
.now { display: flex; align-items: baseline; gap: 10px; margin-left: auto; white-space: nowrap; }
.now .icon { align-self: center; }
.now .icon svg { display: block; width: 40px; height: 40px; }
.layout-b .now .icon svg, .layout-c .now .icon svg { width: 44px; height: 44px; }
.temp { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 52px; line-height: 1; }
.layout-b .temp, .layout-c .temp { font-size: 56px; }
.cond { display: flex; justify-content: flex-end; align-items: baseline; gap: 12px; min-width: 0; margin-left: auto; color: var(--soft); }
.cond .text { font-size: 22px; line-height: 1.2; text-align: right; }
.tempc { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 30px; line-height: 1.2; white-space: nowrap; }
.layout-b .tempc { font-size: 32px; }

/* Forecast: today and the next 3 days, spread across the full width */
.forecast { display: flex; justify-content: space-between; gap: 16px; }
.fday { display: flex; flex-direction: column; align-items: flex-start; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fday .name { font-size: 17px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--soft); }
.fday .icon svg { display: block; width: 32px; height: 32px; margin: 8px 0; }
.fday .f { font-size: 22px; line-height: 28px; }
.fday .c { font-size: 19px; line-height: 24px; color: var(--soft); }

/* Layout C: one band, in columns: clock and date, the weather now, the forecast, the agenda */
.layout-c .panel { left: 0; bottom: 0; width: 1920px; height: 330px; padding: 40px 60px; display: grid; grid-template-columns: auto auto auto minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 64px; row-gap: 8px; align-items: baseline; background: var(--panel); backdrop-filter: blur(18px); }
.layout-c .top, .layout-c .line { display: contents; }
.layout-c .hm { grid-area: 1 / 1; font-size: 124px; }
.layout-c .date { grid-area: 2 / 1; }
.layout-c .now { grid-area: 1 / 2; margin-left: 0; }
.layout-c .now .icon { order: 1; }
.layout-c .cond { grid-area: 2 / 2; justify-content: flex-start; margin-left: 0; }
.layout-c .cond .tempc { order: -1; }
.layout-c .forecast { grid-area: 1 / 3 / 4 / 4; align-self: start; gap: 40px; }

/* Agenda */
.agenda { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 18px; }
.group { display: flex; flex-direction: column; gap: 8px; }
.label { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--soft); }
.group.today .label, .layout-c .label { color: var(--accent); }
.row { display: flex; align-items: center; gap: 14px; font-size: 23px; line-height: 28px; white-space: nowrap; }
.row .d { width: 64px; flex-shrink: 0; color: var(--soft); }
.row .t { width: 84px; flex-shrink: 0; color: var(--soft); }
.row .dot { width: 10px; height: 10px; border-radius: 5px; flex-shrink: 0; }
.row .title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.layout-b .row { font-size: 24px; line-height: 30px; }
.layout-b .row .t { width: 88px; }
.layout-c .agenda { grid-area: 1 / 4 / 4 / 5; gap: 12px; align-self: stretch; }
.layout-c .row { line-height: 30px; }
.layout-c .row .t { width: 84px; }
.none { font-size: 22px; color: var(--soft); }

/* Version and data stamp */
.stamp { position: absolute; left: 28px; bottom: 24px; padding: 6px 12px; border-radius: 8px; background: rgba(12, 14, 17, 0.6); font-size: 15px; color: var(--soft); white-space: nowrap; }
.layout-c .stamp { top: 24px; bottom: auto; }