/* Family dashboard — designed for 1920x1080 at 2–3 m; scales to laptop, stacks on phone. */
@font-face {
  font-family: 'Manrope';
  src: url(fonts/manrope-latin.woff2) format('woff2');
  font-weight: 400 800;
  font-display: swap;
}

:root {
  --bg: #0d1014;
  --card: #161b22;
  --card-2: #1d232c;
  --line: #262e39;
  --ink: #f2f4f7;
  --ink-2: #b4bcc8;
  --ink-3: #7d8896;
  --warm: #ffc56b;
  --cold: #7cc4ff;
  --rain: #6aa8ff;
  --radius: 1.25rem;
  --gap: 1.5rem;

  /* family colours — chosen for contrast on dark */
  --c-emilia: #ff8fab;
  --c-theo: #5fd88f;
  --c-isabella: #ffd166;
  --c-rafael: #6fb8ff;
  --c-nicola: #c4a5ff;
  --c-gezin: #4fd1c5;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
ul, ol { list-style: none; }

/* 1rem = 16px at exactly 1920x1080; scales with the smaller axis on other landscape screens */
html { font-size: min(calc(100vw / 120), calc(100vh / 67.5)); }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Manrope', system-ui, sans-serif;
  font-feature-settings: 'tnum' 1;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
  cursor: none;
}

/* ---------- The one grid: 12 columns x 6 rows ---------- */
.dash {
  height: 100vh;
  padding: 2rem;
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(6, minmax(0, 1fr));
  transition: transform 2s ease;
}
.b-now     { grid-column: 1 / 4;  grid-row: 1 / 3; }
.b-weather { grid-column: 1 / 4;  grid-row: 3 / 6; }
.b-bday    { grid-column: 1 / 4;  grid-row: 6 / 7; }
.b-cal     { grid-column: 4 / 9;  grid-row: 1 / 7; }
.b-photo   { grid-column: 9 / 13; grid-row: 1 / 5; }
.b-list    { grid-column: 9 / 13; grid-row: 5 / 7; }

.block {
  background: var(--card);
  border-radius: var(--radius);
  padding: 1.75rem 2rem;
  min-height: 0;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.bh { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.25rem; flex: none; }
.bh h2 { font-size: 1.5rem; font-weight: 700; color: var(--ink-2); letter-spacing: .01em; }
.stale-tag { margin-left: auto; font-size: 1.1rem; color: var(--ink-3); white-space: nowrap; }
.stale-tag:empty { display: none; }

/* ---------- Clock ---------- */
.b-now { justify-content: center; padding: 1.5rem 2rem; background: transparent; }
.clock { font-size: 8.5rem; font-weight: 700; line-height: .95; letter-spacing: -.035em; }
.date { font-size: 2rem; font-weight: 600; color: var(--ink-2); margin-top: .9rem; }
.date::first-letter { text-transform: uppercase; }
.now-wx { display: flex; align-items: center; gap: .75rem; margin-top: 1.1rem; font-size: 2rem; font-weight: 700; }
.now-wx svg { width: 2.75rem; height: 2.75rem; }
.now-wx .lbl { color: var(--ink-2); font-weight: 600; font-size: 1.6rem; }

/* ---------- Weather ---------- */
.wx-hint {
  font-size: 1.75rem; font-weight: 700; line-height: 1.25;
  padding: 1rem 1.25rem; border-radius: 1rem; background: var(--card-2); margin-bottom: 1.25rem;
  display: flex; flex-direction: column; gap: .5rem; flex: none;
}
.wx-hint .rain { color: var(--rain); }
.wx-hint .cold { color: var(--cold); }
.wx-hint .warm { color: var(--warm); }
.hours { display: flex; flex-direction: column; gap: .2rem; min-height: 0; overflow: hidden; }
.hours li {
  display: grid; grid-template-columns: 4.2rem 2.6rem 4rem 1fr; align-items: center; gap: .9rem;
  font-size: 1.6rem; font-weight: 600; height: 3.1rem; flex: none;
}
.hours .h { color: var(--ink-2); }
.hours svg { width: 2.4rem; height: 2.4rem; }
.hours .t { text-align: right; font-weight: 700; }
.hours .p { display: flex; align-items: center; gap: .6rem; color: var(--rain); font-size: 1.3rem; }
.hours .bar { height: .55rem; border-radius: .3rem; background: var(--rain); min-width: .3rem; }
.hours .p.dry { color: var(--ink-3); }

/* ---------- Birthday ---------- */
.b-bday { justify-content: center; padding: 1.25rem 2rem; }
.bd-main { display: flex; align-items: center; gap: 1.25rem; }
.bd-days { font-size: 3.4rem; font-weight: 800; line-height: 1; color: var(--warm); min-width: 4.6rem; text-align: center; }
.bd-days small { display: block; font-size: 1.05rem; font-weight: 700; color: var(--ink-2); margin-top: .25rem; }
.bd-who { font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.bd-who span { display: block; font-size: 1.3rem; font-weight: 600; color: var(--ink-2); }
.bd-today .bd-days { font-size: 3rem; }

/* ---------- Calendar ---------- */
.legend { display: flex; flex-wrap: wrap; gap: .5rem 1.1rem; margin-left: auto; }
.legend li { display: flex; align-items: center; gap: .45rem; font-size: 1.2rem; font-weight: 600; color: var(--ink-2); }
.legend i { width: .9rem; height: .9rem; border-radius: 50%; background: var(--c); }
.b-cal .stale-tag { margin-left: 1rem; }

.days { display: flex; flex-direction: column; min-height: 0; overflow: hidden; flex: 1; }
/* Skylight-style rows: day label left, that day's events stacked right */
.day { flex: none; display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1.25rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.day:first-child { border-top: 0; padding-top: 0; }
.day-h { display: flex; flex-direction: column; padding-top: .55rem; }
.day-h .dn { font-size: 1.6rem; font-weight: 800; line-height: 1.1; color: var(--ink-2); }
.day-h .dd { font-size: 1.2rem; font-weight: 600; color: var(--ink-3); margin-top: .15rem; }
.day.today .day-h .dn { color: var(--ink); }
.day-evs { min-width: 0; }
.day.empty .day-h { padding-top: 0; }
.day.empty .none { font-size: 1.35rem; color: var(--ink-3); font-weight: 600; align-self: center; padding-left: 1.1rem; }

.ev {
  display: grid; grid-template-columns: 6.2rem minmax(0, 1fr) auto; align-items: center; gap: 1rem;
  height: 3.5rem; padding: 0 1.1rem; border-radius: .85rem; margin-bottom: .4rem;
  background: color-mix(in srgb, var(--c) 16%, var(--card));
}
.ev .tm { font-size: 1.6rem; font-weight: 800; color: var(--ink); }
.ev .tm.allday { font-size: 1.15rem; font-weight: 700; color: var(--ink-2); white-space: nowrap; }
.ev .ti { font-size: 1.75rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev .who { display: flex; gap: .35rem; }
.ev .who b {
  font-size: 1.15rem; font-weight: 800; color: #0d1014; background: var(--c);
  padding: .3rem .7rem; border-radius: 99rem; white-space: nowrap;
}
.ev:last-child { margin-bottom: 0; }
.day:not(.today) .ev { height: 3.1rem; }
.day:not(.today) .ev .ti { font-size: 1.6rem; }
.day:not(.today) .ev .tm { font-size: 1.45rem; }
.more { font-size: 1.3rem; font-weight: 700; color: var(--ink-3); padding: .2rem 0 0 1.1rem; }

/* ---------- Photo ---------- */
.b-photo { padding: 0; background: var(--card-2); }
.ph {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 2.5s ease;
}
.ph.on { opacity: 1; }
.ph-empty { margin: auto; font-size: 1.5rem; color: var(--ink-3); font-weight: 600; }
.b-photo.has .ph-empty { display: none; }

/* ---------- Shopping list ---------- */
.count { font-size: 1.3rem; font-weight: 700; color: var(--ink-3); }
.items { columns: 2; column-gap: 2rem; min-height: 0; overflow: hidden; }
.items li {
  display: flex; align-items: center; gap: .8rem; font-size: 1.6rem; font-weight: 600;
  height: 2.9rem; break-inside: avoid; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.items li::before { content: ''; flex: none; width: 1.05rem; height: 1.05rem; border: .18rem solid var(--ink-3); border-radius: 50%; }
.items li.more-items { color: var(--ink-3); font-size: 1.35rem; }
.items li.more-items::before { display: none; }
.items .empty { color: var(--ink-3); }
.items .empty::before { display: none; }

/* ---------- States ---------- */
.block.stale .stale-tag { color: var(--warm); }

/* ---------- Night mode: dim everything, drop the photo ---------- */
.night-veil { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 60s linear; }
body.night .night-veil { opacity: .72; }
body.night .ph { opacity: 0 !important; }
body.night .b-photo .ph-empty { display: none; }

.build { position: fixed; right: .6rem; bottom: .35rem; font-size: .7rem; color: #2c3440; }

/* ---------- Laptop / portrait tablet: keep grid, slightly denser ---------- */
@media (max-aspect-ratio: 4/3) and (min-width: 901px) {
  html { font-size: calc(100vw / 120); }
  body { overflow: auto; }
  .dash { height: auto; min-height: 100vh; grid-template-rows: auto; grid-auto-rows: minmax(16rem, auto); }
}

/* ---------- Phone: single column, natural scroll ---------- */
@media (max-width: 900px) {
  html { font-size: 11.5px; }
  body { overflow-x: hidden; overflow-y: auto; cursor: auto; }
  .dash {
    height: auto; padding: 1rem; gap: 1rem;
    grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: auto;
  }
  .dash > .block { grid-column: 1; grid-row: auto; }
  .b-now { padding: .5rem .5rem 0; }
  .clock { font-size: 6rem; }
  .b-photo { aspect-ratio: 4 / 3; }
  .days, .hours, .items { overflow: visible; }
  .items { columns: 1; }
  .bh { flex-wrap: wrap; }
  .legend { margin-left: 0; width: 100%; order: 3; }
  .block { padding: 1.5rem 1.4rem; }
  .day { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .day-h { flex-direction: row; align-items: baseline; gap: .6rem; padding-top: 0; }
  .day.empty { grid-template-columns: auto 1fr; }
  .ev { grid-template-columns: 6.4rem minmax(0, 1fr) auto; padding: 0 .9rem; gap: .7rem; }
  .b-cal { order: 2; } .b-weather { order: 3; } .b-list { order: 4; } .b-bday { order: 5; } .b-photo { order: 6; }
}