/* ReyCal kitchen display — the "Poster × Night" modernist system from the apps:
   one red, zero radius, no shadows, visible rules, Archivo, monogram squares.
   Everything is sized to be read from across a room, so type scales with the
   viewport rather than sitting at fixed pixel sizes. */

:root {
  --ground:  #191817;
  --ink:     #f0efee;
  --sub:     #a5a3a0;
  --faint:   #8a8a8a;
  --hairline:#4a4846;
  --accent:  #ec3013;
  --accent-soft: #f4735a;

  /* Sized off whichever axis is tighter, so a 1280×800 counter tablet and a 4K
     wall panel both stay legible from across the room rather than shrinking to
     phone type on the short side. */
  --screen: clamp(18px, 2.4vw, 44px);
  --kicker: clamp(11px, min(1.05vw, 1.7vh), 19px);
  --body:   clamp(18px, min(1.9vw, 3vh), 36px);
  --row:    clamp(20px, min(2.1vw, 3.4vh), 42px);

  --tracking: 0.14em;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--ground);
  color: var(--ink);
  font-family: Archivo, "Helvetica Neue", Arial, system-ui, sans-serif;
  font-weight: 600;
  /* A wall display is never scrolled and never text-selected by hand. */
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

[hidden] { display: none !important; }
.spacer { flex: 1 1 auto; }

/* ── shared type ─────────────────────────────────────────────── */

.kicker {
  font-size: var(--kicker);
  font-weight: 800;
  letter-spacing: var(--tracking);
  text-transform: uppercase;
  color: var(--sub);
  margin: 0 0 .55em;
}
.kicker--accent { color: var(--accent); }

/* ── sign in ─────────────────────────────────────────────────── */

.signin {
  height: 100%;
  display: grid;
  place-items: center;
  padding: var(--screen);
}
.signin__card {
  width: min(460px, 100%);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.wordmark {
  font-size: clamp(38px, 5vw, 64px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
.wordmark span { color: var(--accent); }
.signin__hint {
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--faint);
  margin: 0 0 4px;
}
.field { display: flex; flex-direction: column; gap: 7px; }
.field__label {
  font-size: 11px; font-weight: 800;
  letter-spacing: var(--tracking); color: var(--sub);
}
.field input {
  font: inherit;
  font-size: 16px;              /* 16px keeps iOS from zooming the field on focus */
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 0;
  padding: 13px 14px;
  width: 100%;
}
.field input:focus { outline: 2px solid var(--accent); outline-offset: -2px; border-color: transparent; }

.btn {
  font: inherit; font-weight: 800;
  letter-spacing: var(--tracking); text-transform: uppercase;
  font-size: 13px;
  border: 0; border-radius: 0;
  padding: 16px 18px;
  text-align: left;
  cursor: pointer;
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:active { background: #c9280f; }
.btn[disabled] { opacity: .55; cursor: default; }
.signin__error {
  font-size: 13px; font-weight: 600; color: var(--accent-soft); margin: 0;
}

/* ── wall layout ─────────────────────────────────────────────── */

.wall {
  height: 100%;
  display: flex;
  gap: clamp(20px, 2.4vw, 46px);
  padding: var(--screen);
  position: relative;
}
.col { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.col--left  { flex: 0 0 36%; }
.col--right { flex: 1 1 auto; overflow: hidden; }

/* Portrait / narrow screens stack instead. */
@media (max-aspect-ratio: 1/1) {
  .wall { flex-direction: column; gap: clamp(14px, 2vh, 28px); }
  .col--left { flex: 0 0 auto; }
}

.block { margin-bottom: clamp(16px, 2vh, 32px); min-height: 0; }

/* ── clock ───────────────────────────────────────────────────── */

.clock {
  font-size: clamp(64px, min(9vw, 15vh), 190px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: .95;
  font-variant-numeric: tabular-nums;
  margin-bottom: .1em;
}
.dateline {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  font-size: clamp(16px, 1.5vw, 30px);
  color: var(--sub);
  margin-bottom: clamp(18px, 2.4vh, 40px);
}
.weather { display: inline-flex; align-items: baseline; gap: 7px; color: var(--accent); font-weight: 800; }
.weather__icon { font-size: .95em; }

/* ── rows ────────────────────────────────────────────────────── */

.rule { border-top: 2px solid var(--ink); }

.row {
  display: flex; align-items: center; gap: clamp(10px, 1.1vw, 20px);
  padding: clamp(9px, 1.15vh, 17px) 0;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--row);
}
.row:last-child { border-bottom: 0; }

.row__time {
  flex: 0 0 auto;
  min-width: 4.6em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.row__bar { flex: 0 0 auto; width: 4px; align-self: stretch; background: var(--accent); }
.row__title { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__meta { flex: 0 0 auto; color: var(--faint); font-size: .8em; font-weight: 700;
             letter-spacing: var(--tracking); text-transform: uppercase; }

.row--past { opacity: .4; }
.row--past .row__title { text-decoration: line-through; }
.row--past .row__bar { background: var(--faint); }

.empty {
  font-size: var(--body); font-weight: 600; color: var(--faint);
  padding: clamp(14px, 2vh, 26px) 0;
}

/* ── duty ────────────────────────────────────────────────────── */

.duty {
  display: flex; align-items: center; gap: 14px;
  padding: clamp(8px, 1vh, 14px) 0;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--row);
}
.duty:last-child { border-bottom: 0; }
.duty__label {
  flex: 0 0 auto; min-width: 5.4em;
  color: var(--sub); font-size: .74em; font-weight: 800;
  letter-spacing: var(--tracking); text-transform: uppercase;
}
.duty__name { font-weight: 700; }

/* Monogram squares carry member identity — filled for parents, outlined for kids. */
.mono {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 1.5em; height: 1.5em;
  font-size: .82em; font-weight: 800;
  letter-spacing: 0;
  background: var(--ink); color: var(--ground);
}
.mono--child { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.mono--sm { width: 1.35em; height: 1.35em; font-size: .68em; }

/* ── tappable checks ─────────────────────────────────────────── */

.check {
  display: flex; align-items: center; gap: clamp(10px, 1.1vw, 18px);
  padding: clamp(9px, 1.15vh, 17px) 0;
  border-bottom: 1px solid var(--hairline);
  font-size: var(--row);
  width: 100%;
  background: none; border-left: 0; border-right: 0; border-top: 0;
  color: inherit; font-family: inherit; font-weight: inherit;
  text-align: left; cursor: pointer;
}
.check:last-child { border-bottom: 0; }
.check__box {
  flex: 0 0 auto;
  width: 1.05em; height: 1.05em;
  box-shadow: inset 0 0 0 2px var(--faint);
  display: grid; place-items: center;
  font-size: .9em; line-height: 1;
}
.check__label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.check:active .check__box { box-shadow: inset 0 0 0 2px var(--accent); }

.check--done { opacity: .42; }
.check--done .check__box { background: var(--accent); box-shadow: none; color: #fff; }
.check--done .check__label { text-decoration: line-through; }

.group__head {
  font-size: calc(var(--kicker) * .95);
  font-weight: 800; letter-spacing: var(--tracking); text-transform: uppercase;
  color: var(--faint);
  padding-top: clamp(8px, 1.2vh, 16px);
}

/* ── chrome ──────────────────────────────────────────────────── */

/* Pinned to the screen rather than to the end of a column, so it sits in the same
   corner whether the layout is side-by-side or stacked. */
.stamp {
  position: absolute; left: var(--screen); bottom: calc(var(--screen) / 2);
  font-size: 11px; font-weight: 700; letter-spacing: var(--tracking);
  text-transform: uppercase; color: var(--hairline); margin: 0;
}
.exit {
  position: absolute; top: 8px; right: 8px;
  width: 46px; height: 46px;
  background: transparent; border: 0; border-radius: 0;
  color: transparent;                 /* invisible until touched — it's a wall display */
  font-size: 22px; line-height: 1; cursor: pointer;
}
.exit:hover, .exit:focus-visible { color: var(--faint); outline: none; }

.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  background: var(--accent); color: #fff;
  font-size: 13px; font-weight: 800;
  letter-spacing: var(--tracking); text-transform: uppercase;
  padding: 12px 18px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}