/* Dash — a board meant to be read from across a kitchen, and left on all day.

   Two quite different screens share this file:

     .board    the wall display. Dark, large type, no chrome, never scrolls as
               a page — each panel scrolls itself so the layout can never be
               knocked out of shape by a long list.
     .console  the setup views, on a phone. Ordinary app styling.

   Dark rather than the house bone paper on purpose: this is the only Dfive
   surface that is lit in a dark room at night. The brass keeps it family. */

:root {
  --ink: #eceae6;
  --ink-dim: #9a968e;
  --ink-faint: #6b6760;
  --paper: #14161a;
  --panel: #1c1f24;
  --panel-2: #23272d;
  --line: #2f343b;
  --brass: #a9854f;
  --brass-soft: #c5a66f;
  --good: #6fae7c;
  --warn: #c98b52;
  --radius: 18px;
  --gap: 14px;
  --serif: "Cormorant", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

/* The wall display is a kiosk: nothing about it should feel like a web page.
   No selection, no callouts, no rubber-banding, no pull-to-refresh. */
body.kiosk {
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}

/* ───────────────────────────────────────────────────────────── the board ── */
/* Two independent columns rather than one shared row grid.
   Shared rows tie the two sides together: the tiles strip is one row of
   icons, but a shared row makes it as tall as the clock beside it, and the
   pictures cannot then start any higher. Nesting a grid per column lets each
   side size its own rows — tiles take what they need, pictures take the rest. */
.board {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--gap);
  height: 100vh;
  height: 100dvh;
  padding: var(--gap);
}

.board > * { min-width: 0; min-height: 0; }

.col { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--gap); min-height: 0; }
.col > * { min-height: 0; min-width: 0; }

.head { display: grid; grid-template-columns: auto 1fr; gap: var(--gap); }

/* One pane per kid, side by side — but when the section is not wired up it is
   a single pane, and flex lets that one fill the width instead of leaving a
   hole where the second would be. */
.chores, .homework { display: flex; gap: var(--gap); }
.chores > *, .homework > * { flex: 1 1 0; min-width: 0; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  flex: none;
}

.panel-title {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--brass-soft);
}

.panel-note { font-size: 0.72rem; color: var(--ink-faint); }

/* Each panel's body is the only thing that scrolls, and it hides its own
   scrollbar — a scrollbar on a wall is just a grey line nobody can use. */
.panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.panel-body::-webkit-scrollbar { display: none; }

/* An honest empty state. A panel that is merely empty and a panel that is not
   wired up yet must not look the same, or somebody spends an evening
   debugging a calendar that simply has nothing in it today. */
.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 48px;
  text-align: center;
  color: var(--ink-faint);
  font-size: 0.82rem;
  line-height: 1.5;
  padding: 8px;
}
.empty b { display: block; color: var(--ink-dim); font-weight: 600; margin-bottom: 2px; }

/* ── clock ──────────────────────────────────────────────────────────────── */
.clock { justify-content: center; align-items: flex-start; padding: 16px 22px; }
.clock-time {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 6.2vw, 4.6rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.clock-time small { font-size: 0.34em; color: var(--ink-dim); margin-left: 0.25em; letter-spacing: 0.06em; }
.clock-day { font-size: clamp(0.9rem, 1.5vw, 1.15rem); color: var(--brass-soft); margin-top: 6px; }
.clock-date { font-size: clamp(0.78rem, 1.2vw, 0.95rem); color: var(--ink-dim); }

/* ── lists ──────────────────────────────────────────────────────────────── */
/* Wraps rather than scrolls. A horizontal scroller hides lists behind a
   gesture nobody makes at a wall display — if there are five lists, the strip
   should become two rows and show all five. */
.lists-strip { display: flex; flex-wrap: wrap; gap: 6px; flex: none; margin-bottom: 8px; }
.list-tab {
  flex: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-dim);
  border-radius: 999px;
  padding: 4px 12px;
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}
.list-tab[aria-selected="true"] { background: var(--panel-2); color: var(--ink); border-color: var(--brass); }
.list-tab .count { color: var(--ink-faint); margin-left: 6px; font-size: 0.75em; }

.line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
  padding: 9px 2px;
  cursor: pointer;
}
.line:last-child { border-bottom: 0; }
.line .box {
  flex: none;
  width: 19px; height: 19px;
  margin-top: 1px;
  border: 1.5px solid var(--ink-faint);
  border-radius: 5px;
  display: grid;
  place-items: center;
  font-size: 12px;
  color: transparent;
}
.line[aria-checked="true"] .box { border-color: var(--good); color: var(--good); }
.line[aria-checked="true"] .label { color: var(--ink-faint); text-decoration: line-through; }
.line .label { flex: 1 1 auto; }
.line .via { font-size: 0.65rem; color: var(--ink-faint); flex: none; }

/* ── calendar ───────────────────────────────────────────────────────────── */
.cal-day { display: flex; gap: 12px; padding: 7px 2px; border-bottom: 1px solid var(--line); }
.cal-day:last-child { border-bottom: 0; }
.cal-when { flex: none; width: 92px; color: var(--brass-soft); font-size: 0.8rem; padding-top: 2px; }
.cal-when .rel { display: block; color: var(--ink-faint); font-size: 0.72rem; }
.cal-events { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; }
.cal-event { display: flex; gap: 8px; font-size: 0.9rem; }
.cal-event .t { flex: none; color: var(--ink-dim); font-variant-numeric: tabular-nums; min-width: 68px; }
.cal-event .n { flex: 1 1 auto; }

/* A cached read that is older than it should be. Quiet — the events under it
   are still the best information on the wall — but never invisible. */
.stale {
  font-size: 0.7rem;
  color: var(--warn);
  padding: 0 0 6px;
  letter-spacing: 0.04em;
}

/* ── chores & homework, the per-kid panes ───────────────────────────────── */
.kid-name { display: flex; align-items: center; gap: 7px; }
.kid-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.progress { height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; margin-top: 8px; flex: none; }
.progress > i { display: block; height: 100%; background: var(--brass); border-radius: 2px; }

/* ── pictures ───────────────────────────────────────────────────────────── */
.pictures { padding: 0; position: relative; }
.slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.6s ease-in-out;
  border-radius: var(--radius);
}
.slide.on { opacity: 1; }
.slide-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 18px 14px;
  font-size: 0.9rem;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.65), transparent);
  border-radius: 0 0 var(--radius) var(--radius);
  pointer-events: none;
}

/* ── the app tiles ──────────────────────────────────────────────────────── */
.tiles { padding: 10px 12px; }
.tile-row { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.tile-row::-webkit-scrollbar { display: none; }
.tile {
  flex: none;
  width: 68px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  border-radius: 14px;
  padding: 9px 4px 7px;
  color: var(--ink-dim);
  font: inherit;
  font-size: 0.64rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  display: block;
}
.tile:active { border-color: var(--brass); }
.tile .glyph { display: block; font-size: 1.5rem; line-height: 1.1; margin-bottom: 3px; color: var(--ink); }
.tile .name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── the whole-week homework sheet ──────────────────────────────────────── */
.sheet-back {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(8, 9, 11, 0.72);
  display: grid; place-items: center; padding: 24px;
}
.sheet {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  width: min(760px, 100%);
  max-height: 84vh;
  display: flex; flex-direction: column;
  padding: 18px 20px;
}
.sheet h2 { font-family: var(--serif); font-weight: 500; margin: 0 0 4px; }
.sheet-body { overflow-y: auto; min-height: 0; margin-top: 10px; }
.sheet-day { margin-bottom: 14px; }
.sheet-day h3 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--brass-soft); margin: 0 0 4px; }

/* A word after a tap that did not do what it looked like it did. */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 60;
  max-width: min(520px, calc(100vw - 32px));
  background: var(--panel-2);
  border: 1px solid var(--brass);
  border-radius: 12px;
  padding: 11px 18px;
  font-size: 0.9rem;
  color: var(--ink);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  text-align: center;
}

/* ── the pairing screen ─────────────────────────────────────────────────── */
.pair { display: grid; place-items: center; height: 100vh; height: 100dvh; padding: 24px; }
.pair-card { width: min(440px, 100%); text-align: center; }
.pair h1 { font-family: var(--serif); font-weight: 500; font-size: 1.7rem; margin: 0 0 6px; }
.pair p { color: var(--ink-dim); margin: 0 0 20px; line-height: 1.5; }
.pair input {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.7rem;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
}
.pair .msg { min-height: 1.4em; margin-top: 12px; font-size: 0.88rem; color: var(--warn); }

/* ───────────────────────────────────────────────────────── setup, mobile ── */
.console { max-width: 720px; margin: 0 auto; padding: 22px 16px 64px; }
.console h1 { font-family: var(--serif); font-weight: 500; font-size: 1.7rem; margin: 0 0 2px; }
.console .who { color: var(--ink-faint); font-size: 0.82rem; margin-bottom: 22px; }
.console section { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 22px; }
.console h2 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--brass-soft); margin: 0 0 10px; }
.console .hint { color: var(--ink-faint); font-size: 0.8rem; line-height: 1.5; margin: 0 0 12px; }

.btn {
  font: inherit;
  padding: 9px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--ink);
  cursor: pointer;
}
.btn-primary { background: var(--brass); border-color: var(--brass); color: #14161a; font-weight: 600; }
.btn-quiet { background: none; color: var(--ink-dim); }
.btn:disabled { opacity: 0.5; cursor: default; }

.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row + .row { margin-top: 8px; }
.field {
  flex: 1 1 140px;
  font: inherit;
  padding: 9px 11px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
}

.item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.item:last-child { border-bottom: 0; }
.item .grow { flex: 1 1 auto; min-width: 0; }
.item .sub { display: block; font-size: 0.74rem; color: var(--ink-faint); }

.code-shout {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 2rem;
  letter-spacing: 0.14em;
  text-align: center;
  padding: 16px;
  border: 1px dashed var(--brass);
  border-radius: 12px;
  margin: 10px 0;
  color: var(--brass-soft);
}

/* The Siri recipe, meant to be read on a phone and copied into Shortcuts. */
.recipe {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--ink-dim);
  white-space: pre-wrap;
  /* `anywhere` rather than `break-all`: the token is one unbroken 140-character
     string and has to wrap somewhere, but break-all also hyphenates ordinary
     words mid-letter, which made the instructions read as gibberish. */
  overflow-wrap: anywhere;
  word-break: normal;
  margin: 8px 0;
}

.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.thumb { position: relative; aspect-ratio: 1; border-radius: 10px; background-size: cover; background-position: center; border: 1px solid var(--line); }
.thumb button {
  position: absolute; top: 4px; right: 4px;
  width: 24px; height: 24px; border-radius: 50%;
  border: 0; background: rgba(0,0,0,0.6); color: #fff; cursor: pointer; font-size: 13px; line-height: 1;
}

/* The sign-in card is the platform's and is light by design; keep this app's
   dark page from showing around it. */
body.signing-in { background: #f5f2ec; }

/* Phones and small tablets: the board stacks rather than shrinking to
   nothing. A wall display will never hit this, but a parent opening the
   board on a phone to check it should get something readable. */
@media (max-width: 860px) {
  .board {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100dvh;
  }
  .col { grid-template-rows: none; }
  .head { grid-template-columns: 1fr; }
  .chores, .homework { flex-wrap: wrap; }
  .chores > *, .homework > * { flex: 1 1 240px; }
  body.kiosk { overflow: auto; }
  .pictures { aspect-ratio: 4 / 3; }
  .panel-body { overflow: visible; }
}