/* Lazy Susan board. Every size is a token from board/tokens.css (generated from
 * design/tokens.json): the design's own pixels on a 1920x1080 stage, which
 * app.js scales to the window. Text sizes are the --fs- variants, which
 * follow the household's text size the way the TV app's sp() does.
 *
 * Chromium 68 rules: no flexbox gap (margins instead), no clamp(), no
 * aspect-ratio, no inset, no :focus-visible. tests/board_lint.py checks.
 */

/* ----------------------------------------------------------------- stage */
/* Line heights are the TV's: Android sets a line by the font's own height,
   which is about 1.31 of the size for Familjen Grotesk and 1.17 for Karla. */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg); }
body {
  font-family: var(--font-body); color: var(--ink-ground);
  -webkit-font-smoothing: antialiased; -webkit-user-select: none; user-select: none;
  cursor: default;
}
#stage {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px;
  transform-origin: 0 0; background: var(--bg); overflow: hidden;
}
.page {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px;
  padding: var(--board-padding); display: flex; flex-direction: column;
}
.board-host { position: relative; flex: 1 1 auto; min-height: 0; margin-top: var(--month-header-gap); }
.page.on-home .small-brand, .page.on-home .header-host { display: none; }
.page.on-home .board-host { margin-top: 0; }
.page.in-cook .header-host { display: none; }

.one-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.two-lines {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.done { text-decoration: line-through; }
.icon { display: block; }

/* -------------------------------------------------------------- focus ring */
/* The design's ring sits outside the element: Android draws it beyond the
   view's bounds (FocusRingLayout). Chromium 68's outline ignores rounded
   corners, so the ring is a bordered box outside the element instead. */
.f { position: relative; transition: transform 120ms ease-out; cursor: pointer; }
.f::after {
  content: ""; position: absolute; pointer-events: none; display: none;
  border: var(--focus-outline) solid var(--accent);
}
/* A focused element lifts (Android elevation 8) as well as taking its ring. */
.f.is-focused { z-index: 5; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); }
.f.is-focused::after { display: block; }

.f-card::after, .f-todo::after {
  top: calc(-1 * (var(--focus-offset-todo) + var(--focus-outline)));
  left: calc(-1 * (var(--focus-offset-todo) + var(--focus-outline)));
  right: calc(-1 * (var(--focus-offset-todo) + var(--focus-outline)));
  bottom: calc(-1 * (var(--focus-offset-todo) + var(--focus-outline)));
}
.f-switch::after, .f-chip::after, .f-button::after {
  top: calc(-1 * (var(--focus-offset-switch) + var(--focus-outline)));
  left: calc(-1 * (var(--focus-offset-switch) + var(--focus-outline)));
  right: calc(-1 * (var(--focus-offset-switch) + var(--focus-outline)));
  bottom: calc(-1 * (var(--focus-offset-switch) + var(--focus-outline)));
}
.f-cell::after {
  top: calc(-1 * (var(--focus-offset-cell) + var(--focus-outline)));
  left: calc(-1 * (var(--focus-offset-cell) + var(--focus-outline)));
  right: calc(-1 * (var(--focus-offset-cell) + var(--focus-outline)));
  bottom: calc(-1 * (var(--focus-offset-cell) + var(--focus-outline)));
}
.f-card.is-focused { transform: scale(1.02); }
.f-todo.is-focused { transform: scale(var(--focus-scale-todo)); }
.f-switch.is-focused, .f-chip.is-focused { transform: scale(1.03); }
.f-button.is-focused { transform: scale(1.02); }
.f-cell.is-focused { transform: scale(var(--focus-scale-cell)); }

/* ----------------------------------------------------------------- brand */
.brand { display: flex; align-items: center; }
.brand .disc {
  border-radius: 50%; background: var(--disc); border-style: solid; border-color: var(--disc-edge);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.brand .disc .mark { width: 76%; height: 76%; display: block; }
.brand .wordmark { font-family: var(--font-brand); font-weight: 600; color: var(--brand-ink); white-space: nowrap; }

.small-brand { margin-bottom: var(--brand-margin-bottom); align-self: flex-start; }
.small-brand .disc { width: var(--brand-disc); height: var(--brand-disc); border-width: var(--brand-disc-border); }
.small-brand .wordmark { font-size: var(--fs-brand-wordmark-text); margin-left: var(--brand-gap); }

/* ----------------------------------------------------------------- setup */
.setup {
  position: absolute; left: 0; top: 0; width: 1920px; height: 1080px;
  padding: var(--board-padding); display: flex; flex-direction: column;
}
.setup-brand .disc { width: var(--setup-disc); height: var(--setup-disc); border-width: var(--setup-disc-border); }
.setup-brand .wordmark { font-size: var(--fs-setup-wordmark); margin-left: var(--setup-disc-gap); }
.setup-body {
  flex: 1 1 auto; display: flex; align-items: center; margin-top: var(--setup-header-gap); min-height: 0;
}
.setup-left { flex: 1 1 0; min-width: 0; }
.setup-right {
  width: var(--setup-qr-col); margin-left: var(--setup-col-gap); flex: 0 0 auto;
  display: flex; justify-content: center;
}
.setup-left > * + * { margin-top: var(--setup-left-gap); }
.setup-left.with-notice > * + * { margin-top: var(--setup-left-gap-notice); }
.setup-title, .setup-connected {
  font-family: var(--font-brand); font-weight: 600; color: var(--ink-ground); line-height: 1.02;
}
.setup-title { font-size: var(--fs-setup-title); }
.setup-connected { font-size: var(--fs-setup-connected); }
.setup-connected-sub { font-size: var(--fs-setup-connected-sub); color: var(--ink-soft-ground); }
.setup-left .setup-connected-sub { margin-top: var(--setup-connected-gap); }
.setup-notice {
  background: var(--surface2); border-radius: var(--setup-button-radius);
  padding: var(--setup-notice-pad-v) var(--setup-notice-pad-h);
}
.setup-notice .title { font-size: var(--fs-setup-notice-title); font-weight: 700; color: var(--ink-card); }
.setup-notice .sub { font-size: var(--fs-setup-notice-sub); color: var(--ink-soft-card); margin-top: var(--setup-notice-gap); }
.setup-steps { list-style: none; }
.setup-steps li { display: flex; align-items: flex-end; }
.setup-steps li + li { margin-top: var(--setup-steps-gap); }
.setup-steps .num {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-setup-step-num);
  color: var(--accent-ink-ground); width: var(--setup-step-num-w); margin-right: var(--setup-step-num-gap);
  line-height: 1;
}
.setup-steps .text { font-size: var(--fs-setup-step-text); color: var(--ink-ground); line-height: 1.15; }
.setup-code .groups {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-setup-code);
  color: var(--ink-ground); letter-spacing: 0.04em; line-height: 1; white-space: nowrap;
}
.setup-code .groups span + span { margin-left: var(--setup-code-group-gap); }
.setup-code .hint, .setup-hint { font-size: var(--fs-setup-code-hint); color: var(--ink-soft-ground); }
.setup-code .hint { margin-top: var(--setup-code-hint-gap); }
.setup-expired .title {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-setup-expired);
  color: var(--ink-ground); line-height: 1.05;
}
.setup-button {
  display: inline-block; margin-top: var(--setup-expired-gap);
  background: var(--accent); color: var(--on-accent); border-radius: var(--setup-button-radius);
  padding: var(--setup-button-pad-v) var(--setup-button-pad-h);
  font-size: var(--fs-setup-button-text); font-weight: 700;
}
.setup-button::after { border-radius: calc(var(--setup-button-radius) + var(--focus-offset-chip) + var(--focus-outline)); }
.setup-qr {
  background: var(--qr-tile-bg); border-radius: var(--qr-tile-radius);
  padding: var(--setup-qr-pad) var(--setup-qr-pad) var(--setup-qr-pad-bottom);
  display: flex; flex-direction: column; align-items: center;
}
.setup-qr .qr { width: var(--setup-qr); height: var(--setup-qr); display: block; image-rendering: pixelated; }
.setup-qr.dimmed .qr { opacity: 0.12; }
.setup-qr-caption {
  margin-top: var(--setup-qr-gap); font-size: var(--fs-setup-qr-caption); font-weight: 700;
  color: var(--qr-caption-ink); text-align: center;
}
.setup-big-disc {
  width: var(--setup-connected-disc); height: var(--setup-connected-disc); border-radius: 50%;
  background: var(--disc); border: var(--setup-connected-disc-border) solid var(--disc-edge);
  display: flex; align-items: center; justify-content: center;
}
.setup-big-disc .mark { width: 76%; height: 76%; }

/* --------------------------------------------------------------- offline */
.offline {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
}
.offline p { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-setup-expired); color: var(--ink-ground); }

/* ------------------------------------------------------------------ home */
.home { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; }
.home-head { display: flex; align-items: center; margin-bottom: var(--home-header-row-gap); }
.home-head .spacer { flex: 1 1 auto; }
.home-brand .disc { width: var(--home-disc); height: var(--home-disc); border-width: var(--home-disc-border); }
.home-brand .wordmark { font-size: var(--fs-home-wordmark-text); margin-left: var(--home-disc-gap); letter-spacing: -0.01em; }
.home-date { display: flex; align-items: flex-end; color: var(--ink-ground); line-height: 1; }
.home-date .words { font-size: var(--fs-home-date-text); font-weight: 700; }
.home-date .num {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-home-date-num-text);
  margin-left: var(--home-date-gap);
}
.home-body { flex: 1 1 auto; display: flex; align-items: stretch; min-height: 0; }
.home-rail { width: var(--home-rail-w); flex: 0 0 auto; }
.rail-item {
  display: flex; align-items: center; border-radius: var(--home-menu-radius);
  padding: var(--home-menu-pad-v) var(--home-menu-pad-h); color: var(--ink-ground);
}
.rail-item + .rail-item { margin-top: var(--home-rail-gap); }
.rail-item .rail-icon { width: var(--home-rail-icon); height: var(--home-rail-icon); margin-right: var(--home-rail-item-gap); }
.rail-item .label { font-size: var(--fs-home-menu-text); font-weight: 400; }
.rail-item.selected { background: var(--selected); color: var(--on-selected); }
.rail-item.selected .label, .rail-item.is-focused .label { font-weight: 700; }
.rail-item.is-focused { background: var(--accent); color: var(--on-accent); }
.rail-item::after { border-radius: calc(var(--home-menu-radius) + var(--focus-offset-switch) + var(--focus-outline)); }

.home-grid { flex: 1 1 0; min-width: 0; margin-left: var(--home-body-gap); display: flex; flex-direction: column; }
.home-row { display: flex; align-items: stretch; min-height: 0; }
.home-row.top { flex: 1.15 1 0; }
.home-row.bottom { flex: 1 1 0; margin-top: var(--home-card-gap); }
/* Android shares a row out by weight over the whole width, padding and all
   (1.55 : 1); flexbox would share only what is left after padding. */
.home-row > .home-card:first-child { flex: 0 0 calc((100% - var(--home-card-gap)) * 0.607843); }
.home-row > .home-card + .home-card { flex: 1 1 0; margin-left: var(--home-card-gap); }

.home-card {
  min-width: 0; background: var(--surface); border-radius: var(--home-card-radius);
  padding: var(--home-card-pad-v) var(--home-card-pad-h); display: flex; flex-direction: column;
  color: var(--ink-card);
}
/* On the TV a focused Home card scales and lifts, but shows no ring: the card
   clips to its own rounded outline, ring included. The web board does the same. */
.home-card::after { display: none !important; }

.card-title {
  font-family: var(--font-brand); font-weight: 600; font-size: var(--fs-home-card-title);
  color: var(--heading); line-height: 1.1;
}
.card-empty { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.card-empty .title { font-weight: 700; color: var(--ink-card); }
.card-empty .sub { color: var(--ink-soft-card); margin-top: var(--month-grid-gap); }
.plate-empty .title { font-size: var(--fs-home-plate-empty-title); }
.plate-empty .sub { font-size: var(--fs-home-plate-empty-sub); }
.menu-empty .title { font-size: var(--fs-home-meal-empty-title); }
.menu-empty .sub { font-size: var(--fs-home-meal-empty-sub); }

.bar { display: block; flex: 0 0 auto; border-radius: var(--month-bar-radius); }
.c-activity { background: var(--c-act); }
.c-food { background: var(--c-food); }
.c-todo { background: var(--c-todo); }

.plate-list { margin-top: var(--home-card-inner-gap); flex: 1 1 0; min-height: 0; overflow: hidden; }
.plate-row {
  display: flex; align-items: center; height: var(--home-plate-item-min-h);
  margin-bottom: var(--home-plate-item-gap);
}
.plate-bar { width: var(--home-bar-w); height: var(--home-plate-bar-h); margin-right: var(--home-plate-item-row-gap); }
.plate-time {
  width: var(--home-plate-time-w); flex: 0 0 auto; font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-home-plate-time-text); color: var(--ink-soft-card);
}
.plate-todo-slot { width: var(--home-plate-todo-w); flex: 0 0 auto; display: flex; }
.plate-box {
  width: var(--home-plate-todo-box); height: var(--home-plate-todo-box);
  border-radius: var(--home-plate-todo-radius); border: var(--home-plate-todo-border) solid var(--ink-soft-card);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 29px; line-height: 1;
}
.plate-box.checked { border: 0; background: var(--c-todo); color: var(--check-ink); }
.plate-title {
  flex: 1 1 0; min-width: 0; margin-left: var(--home-plate-item-row-gap);
  font-size: var(--fs-home-plate-item-text); color: var(--ink-card);
}
.plate-title.done { color: var(--ink-soft-card); }

.home-card.card-photo { padding: 0; }
.home-card.card-photo .photo-clip { background: var(--photo); }
.home-card.card-photo .photo-img { position: absolute; left: 0; top: 0; display: block; max-width: none; }
.home-card.card-photo .photo-img:not(.loaded) { visibility: hidden; }
.photo-clip { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; border-radius: var(--home-card-radius); }
.photo-empty {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
  padding: var(--home-photo-empty-pad); text-align: center;
}
.photo-empty p { font-size: var(--fs-home-photo-empty-text); font-weight: 700; color: var(--ink-card); }

.week-grid {
  margin-top: var(--home-card-inner-gap); display: grid;
  grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; grid-auto-flow: column;
}
.week-row { display: flex; align-items: center; min-width: 0; margin-bottom: var(--home-week-row-gap); }
.week-row.second { margin-left: var(--home-week-col-gap); }
.week-bar { width: var(--home-bar-w); height: var(--home-week-bar-h); margin-right: var(--home-plate-item-row-gap); }
.week-day {
  width: var(--home-week-day-w); flex: 0 0 auto; font-size: var(--fs-home-week-day-text);
  font-weight: 700; color: var(--ink-soft-card);
}
.week-title { flex: 1 1 0; min-width: 0; font-size: var(--fs-home-week-item-text); color: var(--ink-card); }
.week-title.done { color: var(--ink-soft-card); }

.menu-photo {
  flex: 1 1 0; min-height: 0; margin: var(--home-card-inner-gap) 0; border-radius: var(--todo-row-radius);
  overflow: hidden; background: var(--photo);
}
.menu-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.menu-text.no-photo { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.menu-title { font-size: var(--fs-home-meal-title-full); font-weight: 700; color: var(--ink-card); line-height: 1.15; }
.menu-title.big { font-size: var(--fs-home-meal-title-nophoto); }
.menu-sub { font-size: var(--fs-home-meal-sub); color: var(--ink-soft-card); margin-top: var(--home-meal-gap); }

/* ---------------------------------------------------------------- header */
.header { display: flex; align-items: flex-end; }
.header-title { flex: 1 1 0; min-width: 0; }
.headline {
  font-family: var(--font-display); font-weight: 600; color: var(--ink-ground); white-space: nowrap;
}
.headline-month { font-size: var(--fs-month-title); letter-spacing: -0.03em; line-height: 0.86; }
.headline-week { font-size: var(--fs-week-title); letter-spacing: -0.02em; line-height: 0.88; }
.header-title .strap { font-size: var(--fs-month-subtitle); color: var(--ink-soft-ground); margin-top: var(--month-cell-pad-v); }
.day-title { display: flex; align-items: flex-end; }
.day-title .numeral {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-day-numeral);
  color: var(--accent-ink-ground); letter-spacing: -0.04em; line-height: 0.8;
  margin-right: var(--day-card-inner-gap);
}
.day-title .words { padding-bottom: var(--month-cell-pad-v); }
.day-title .weekday { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-day-weekday); color: var(--ink-ground); line-height: 1.31; }
.day-title .strap { font-size: var(--fs-day-subtitle); }

.header-controls { display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 auto; }
.switcher {
  display: flex; background: var(--surface); border-radius: var(--switcher-radius); padding: var(--switcher-pad);
}
.switch {
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-switch-item-text);
  color: var(--ink-soft-card); padding: var(--switch-item-pad-v) var(--switch-item-pad-h);
  border-radius: var(--switch-item-radius); line-height: 1.31; white-space: nowrap;
}
.switch + .switch { margin-left: var(--switcher-gap); }
.switch.selected { background: var(--selected-card); color: var(--on-selected-card); font-weight: 600; }
.switch.is-focused { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.switch::after { border-radius: calc(var(--switch-item-radius) + var(--focus-offset-switch) + var(--focus-outline)); }

.filters { display: flex; margin-top: var(--month-header-gap); }
.chip {
  display: flex; align-items: center; background: var(--surface); border-radius: var(--filter-radius);
  padding: var(--filter-pad-v) var(--filter-pad-h-plain); color: var(--ink-card);
}
.chip.with-dot { padding-left: var(--filter-pad-h-dot); padding-right: var(--filter-pad-h-dot); }
.chip + .chip { margin-left: var(--filter-gap); }
.chip .dot { width: var(--filter-dot); height: var(--filter-dot); border-radius: 50%; margin-right: var(--filter-dot-gap); }
.chip .label { font-size: var(--fs-filter-text); font-weight: 400; line-height: 1.15; white-space: nowrap; }
.chip.selected { background: var(--selected-card); color: var(--on-selected-card); }
.chip.selected .label { font-weight: 700; }
.chip.is-focused { background: var(--accent); color: var(--on-accent); }
.chip.is-focused .label { font-weight: 700; font-size: var(--fs-filter-text-focus); }
.chip::after {
  top: calc(-1 * (var(--focus-offset-chip) + var(--focus-outline)));
  left: calc(-1 * (var(--focus-offset-chip) + var(--focus-outline)));
  right: calc(-1 * (var(--focus-offset-chip) + var(--focus-outline)));
  bottom: calc(-1 * (var(--focus-offset-chip) + var(--focus-outline)));
  border-radius: calc(var(--filter-radius) + var(--focus-offset-chip) + var(--focus-outline));
}

/* ----------------------------------------------------------------- month */
.month-board { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; }
.month-dow { display: flex; margin-bottom: var(--month-grid-gap); }
.month-dow span {
  flex: 1 1 0; padding-left: var(--month-cell-pad-v); font-size: var(--fs-month-dow-text);
  font-weight: 700; color: var(--ink-soft-ground); line-height: 1.15;
}
.month-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(7, 1fr); }
.month-grid.weeks-5 { grid-template-rows: repeat(5, 1fr); }
.month-grid.weeks-6 { grid-template-rows: repeat(6, 1fr); }
.month-cell, .week-col, .day-panel, .home-card, .check-row { position: relative; }
.month-cell {
  margin: calc(var(--month-grid-gap) / 2); border-radius: var(--month-cell-radius); min-height: 0; min-width: 0;
  background: var(--surface); border: var(--today-border) solid transparent;
}
.month-cell.today { background: var(--today-bg); border-color: var(--accent-ink-card); }
.month-cell.outside { background: none; opacity: 0.35; }
.month-cell::after { border-radius: calc(var(--month-cell-radius) + var(--focus-offset-cell) + var(--focus-outline)); }
.month-cell-content {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0;
  padding: calc(var(--month-cell-pad-v) - var(--today-border)) calc(var(--month-cell-pad-h) - var(--today-border));
  display: flex; flex-direction: column;
}
.month-top { display: flex; align-items: flex-start; }
.month-num {
  flex: 1 1 0; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-month-num);
  color: var(--ink-card); line-height: 1; height: var(--fs-month-num);
}
.month-cell.today .month-num { font-weight: 700; font-size: var(--fs-month-num-today); color: var(--accent-ink-card); height: var(--fs-month-num-today); }
.month-more { font-size: var(--fs-month-more-text); font-weight: 700; color: var(--ink-soft-card); line-height: 1.15; }
.month-list { flex: 1 1 0; min-height: 0; margin-top: var(--month-cell-gap); }
.month-item { display: flex; align-items: center; height: var(--month-item-row-h); margin-bottom: var(--month-cell-gap); }
.month-item.last { margin-bottom: 0; }
.month-bar { width: var(--month-bar-w); height: var(--month-bar-h); margin-right: var(--month-item-gap); }
.month-item-title { flex: 1 1 0; min-width: 0; font-size: var(--fs-month-item-text); font-weight: 600; color: var(--ink-card); }

/* ------------------------------------------------------------------ week */
.week-board { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; }
.week-col {
  flex: 1 1 0; min-width: 0; border-radius: var(--week-col-radius); background: var(--surface);
}
.week-col + .week-col { margin-left: var(--week-col-gap); }
.week-col.today { background: var(--today-bg); border: var(--today-border) solid var(--accent-ink-card); }
.week-col::after { border-radius: calc(var(--week-col-radius) + var(--focus-offset-cell) + var(--focus-outline)); }
.week-col.is-focused { transform: scale(1.03); }
.week-col-content { padding: var(--week-col-pad-v) var(--week-col-pad-h); overflow: hidden; }
.week-col.today .week-col-content {
  padding: calc(var(--week-col-pad-v) - var(--today-border)) calc(var(--week-col-pad-h) - var(--today-border));
}
.week-dow { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-week-dow); color: var(--ink-soft-card); line-height: 1.31; }
.week-col.today .week-dow { font-weight: 700; color: var(--accent-ink-card); }
.week-num {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-week-daynum); color: var(--ink-card);
  line-height: 1.31; margin-bottom: var(--week-col-inner-gap);
}
.week-col.today .week-num { font-weight: 700; }
.week-item { display: flex; align-items: stretch; margin-bottom: var(--week-col-inner-gap); }
.week-item-bar { width: var(--week-item-bar); flex: 0 0 auto; }
.week-item-text { flex: 1 1 0; min-width: 0; padding-left: var(--week-item-pad-l); }
.week-item-time { font-size: var(--fs-week-item-time); color: var(--ink-soft-card); line-height: 1.17; }
.week-item-title { font-size: var(--fs-week-item-title); font-weight: 600; color: var(--ink-card); line-height: 1.2; word-wrap: break-word; }

/* ------------------------------------------------------------------- day */
.day-board { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; }
.day-events { flex: 1.35 1 0; min-width: 0; }
.day-panel { flex: 1 1 0; min-width: 0; margin-left: var(--day-col-gap); background: var(--surface); border-radius: var(--day-card-radius); }
.day-panel::after { border-radius: calc(var(--day-card-radius) + var(--focus-offset-cell) + var(--focus-outline)); }
.day-panel.is-focused { transform: scale(1.02); }
.day-panel-inner {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column;
  padding: var(--todo-panel-pad-v) var(--todo-panel-pad-h);
}
.day-panel-heading, .section-heading { display: flex; align-items: center; margin-bottom: var(--todo-panel-gap); }
.day-panel-heading .dot, .section-heading .dot {
  width: var(--todo-header-dot); height: var(--todo-header-dot); border-radius: 50%;
  margin-right: calc(var(--todo-row-gap) / 2); flex: 0 0 auto;
}
.day-panel-heading .title, .section-heading .title {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-todo-header-text); color: var(--ink-card); line-height: 1.31;
}
.section-heading .title { flex: 1 1 0; min-width: 0; }
.section-heading .count {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-todo-header-text); color: var(--ink-soft-card); line-height: 1.31;
}
.day-panel-inner .spacer { flex: 1 1 auto; }
.day-hint { font-size: var(--fs-todo-hint); color: var(--ink-soft-card); }

.day-event {
  display: flex; align-items: stretch; background: var(--surface); border-radius: var(--day-card-radius);
  margin-bottom: var(--day-card-gap);
}
.day-event-holder { margin-bottom: var(--day-card-gap); border-radius: var(--day-card-radius); }
.day-event-holder .day-event { margin-bottom: 0; }
.day-event-holder::after { border-radius: calc(var(--day-card-radius) + var(--focus-offset-todo) + var(--focus-outline)); }
.day-event-holder.is-focused .day-event { background: var(--accent); }
.day-event-holder.is-focused .day-event-time, .day-event-holder.is-focused .day-event-title,
.day-event-holder.is-focused .day-event-note { color: var(--on-accent); }
.day-event-bar { width: var(--day-card-bar); flex: 0 0 auto; }
.day-event-inner { flex: 1 1 0; min-width: 0; display: flex; align-items: flex-start; padding: var(--day-card-pad-v) var(--day-card-pad-h); }
.day-event-time {
  width: var(--day-time-w); flex: 0 0 auto; font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-day-time); color: var(--ink-soft-card); line-height: 1.31;
}
.day-event-text { flex: 1 1 0; min-width: 0; }
.day-event-title { font-size: var(--fs-day-title); font-weight: 700; color: var(--ink-card); line-height: 1.1; }
.day-event-note { font-size: var(--fs-day-notes); color: var(--ink-soft-card); line-height: 1.35; margin-top: var(--month-grid-gap); }
.day-event-note.strong { font-weight: 700; line-height: 1.17; }

/* -------------------------------------------------------------- check rows */
.check-row { background: var(--surface2); border-radius: var(--todo-row-radius); margin-bottom: var(--todo-panel-gap); }
.check-row::after { border-radius: calc(var(--todo-row-radius) + var(--focus-offset-todo) + var(--focus-outline)); }
.check-content { display: flex; align-items: center; padding: var(--todo-row-pad-v) var(--todo-row-pad-h); }
.check-box {
  width: var(--todo-box); height: var(--todo-box); flex: 0 0 auto; margin-right: var(--todo-row-gap);
  border-radius: var(--todo-box-radius); border: var(--todo-box-border) solid var(--ink-soft-card);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-todo-check-text); line-height: 1;
}
.check-row.checked .check-box { border: 0; background: var(--c-todo); color: var(--check-ink); }
.check-row.checked .check-box.food { background: var(--c-food); color: var(--on-food); }
.check-text { flex: 1 1 0; min-width: 0; }
.check-label { font-size: var(--fs-todo-label); font-weight: 600; color: var(--ink-card); line-height: 1.17; }
.check-label.done { font-weight: 400; color: var(--ink-soft-card); }
.check-meta { font-size: var(--fs-week-item-time); color: var(--ink-soft-card); line-height: 1.17; }
.check-row.is-focused { background: var(--accent); }
.check-row.is-focused .check-content { padding: var(--todo-row-pad-v-focus) var(--todo-row-pad-h-focus); }
.check-row.is-focused .check-label { color: var(--on-accent); font-size: var(--fs-todo-label-focus); font-weight: 700; }
.check-row.is-focused .check-meta { color: var(--on-accent); }
.check-row.is-focused:not(.checked) .check-box { border-color: var(--on-accent); }

/* ---------------------------------------------------------------- lists */
.todo-board, .shop-board, .recipe-board { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; }
.recipe-board { flex-direction: column; }
.list-panel {
  position: relative; min-width: 0; background: var(--surface); border-radius: var(--day-card-radius);
  padding: var(--todo-panel-pad-v) var(--todo-panel-pad-h); display: flex; flex-direction: column;
}
.todo-board .list-panel + .list-panel, .shop-board .list-panel + .list-panel { margin-left: var(--day-col-gap); }
/* Weights 1.3 / 0.85 / 1.15 / 0.85 over the whole width, padding included,
   as Android shares them. */
.todo-board .list-panel { flex: 0 0 calc((100% - 3 * var(--day-col-gap)) * var(--w)); }
.todo-board .w130 { --w: 0.31325; }
.todo-board .w85 { --w: 0.20482; }
.todo-board .w115 { --w: 0.27711; }
.list-hint { font-size: var(--fs-todo-hint); color: var(--ink-soft-card); line-height: 1.3; margin-bottom: var(--todo-panel-gap); }
.list-scroll { flex: 1 1 0; min-height: 0; overflow: hidden; padding: 12px; margin: -12px; }
.list-empty { font-size: var(--fs-todo-label); color: var(--ink-soft-card); }
.list-panel.lone { flex: 1 1 auto; align-self: flex-start; }
.lone-text { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-todo-header-text); color: var(--ink-soft-card); line-height: 1.31; }
.shop-board .list-panel.store { flex: 1 1 0; padding: 0; }
.store-inner {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column;
  padding: var(--todo-panel-pad-v) var(--todo-panel-pad-h); overflow: hidden;
}
.list-panel.store::after { border-radius: calc(var(--day-card-radius) + var(--focus-offset-cell) + var(--focus-outline)); }
.list-panel.store.is-focused { transform: scale(1.02); }

/* -------------------------------------------------------------- recipes */
.recipe-cats { display: flex; margin-bottom: var(--lib-category-gap); flex: 0 0 auto; }
.lib-chip {
  font-size: var(--fs-lib-chip-text); color: var(--ink-card); background: var(--surface);
  border: var(--lib-chip-border) solid transparent; border-radius: var(--lib-chip-radius);
  padding: calc(var(--lib-chip-pad-v) - var(--lib-chip-border)) calc(var(--lib-chip-pad-h) - var(--lib-chip-border));
  white-space: nowrap; line-height: 1.17;
}
.lib-chip + .lib-chip { margin-left: var(--lib-chip-gap); }
.lib-chip.selected { background: var(--selected-card); color: var(--on-selected-card); font-weight: 700; border-color: var(--selected-card); }
.lib-chip.is-focused { background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: var(--fs-lib-chip-text-focus); border-color: var(--accent); }
.lib-chip::after { border-radius: calc(var(--lib-chip-radius) + var(--focus-offset-chip) + var(--focus-outline)); }
.recipe-scroll { flex: 1 1 0; min-height: 0; overflow: hidden; padding: 14px; margin: -14px; }
.recipe-row { display: flex; align-items: flex-start; margin-bottom: var(--day-card-gap); }
.recipe-card, .recipe-spacer { flex: 1 1 0; min-width: 0; }
.recipe-row > * + * { margin-left: var(--day-card-gap); }
.recipe-card { position: relative; background: var(--surface); border-radius: var(--cook-card-radius); }
/* Clipped to its rounded outline on the TV, ring included, like Home's cards. */
.recipe-card::after { display: none !important; }
.recipe-card.is-focused { background: var(--accent); }
.recipe-card.is-focused .recipe-title { color: var(--on-accent); }
.recipe-photo-box { height: var(--lib-card-photo-h); background: var(--photo); overflow: hidden; border-radius: var(--cook-card-radius) var(--cook-card-radius) 0 0; }
.recipe-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.recipe-content { padding: var(--day-card-pad-v) var(--day-card-pad-h); }
.recipe-head { display: flex; align-items: flex-start; }
.recipe-head .dot {
  width: var(--cook-section-dot); height: var(--cook-section-dot); border-radius: 50%; flex: 0 0 auto;
  margin-right: var(--cook-meta-gap); margin-top: var(--month-grid-gap);
}
.recipe-title {
  flex: 1 1 0; min-width: 0; font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-day-title); color: var(--ink-card); line-height: 1.36;
}
.recipe-star { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-cook-meta-text); color: var(--accent-ink-card); line-height: 1.31; }
.recipe-facts { font-size: var(--fs-day-notes); color: var(--ink-soft-card); margin-top: var(--month-grid-gap); line-height: 1.17; }
.recipe-card.is-focused .recipe-star { color: var(--accent-ink-card); }

/* ------------------------------------------------------------ cook mode */
.cook-board { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
.cook-overview, .cook-step, .cook-check, .cook-unreadable {
  position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column;
}
.cook-title {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-cook-title);
  color: var(--ink-ground); letter-spacing: -0.025em; line-height: 1.1; margin-bottom: var(--cook-meta-gap);
}
.cook-from { font-size: var(--fs-cook-meta-text); color: var(--ink-soft-ground); margin-bottom: var(--cook-meta-gap); line-height: 1.17; }
.cook-bar { display: flex; align-items: center; margin-bottom: var(--cook-gap); }
.cook-meta { flex: 1 1 0; min-width: 0; display: flex; align-items: center; }
.cook-meta .fact { font-size: var(--fs-cook-meta-text); font-weight: 700; color: var(--ink-ground); margin-right: var(--cook-meta-item-gap); }
.cook-buttons { display: flex; align-items: center; }
.cook-button {
  background: var(--surface); border-radius: var(--cook-row-radius); color: var(--ink-card);
  padding: var(--cook-button-pad-v) var(--cook-button-pad-h); font-size: var(--fs-cook-button-text);
  font-weight: 400; white-space: nowrap; line-height: 1.17;
}
.cook-button.emphasised { font-size: var(--fs-cook-button-text-focus); font-weight: 700; }
.cook-buttons .cook-button + .cook-button { margin-left: var(--cook-button-gap); }
.cook-button.is-focused { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.cook-button::after { border-radius: calc(var(--cook-row-radius) + var(--focus-offset-chip) + var(--focus-outline)); }
.cook-body { flex: 1 1 0; min-height: 0; display: flex; align-items: stretch; }
.cook-ingredients { flex: 0.75 1 0; min-width: 0; margin-right: var(--cook-body-gap); display: flex; flex-direction: column; }
.cook-method { flex: 1.35 1 0; min-width: 0; display: flex; flex-direction: column; }
.cook-section-head { display: flex; align-items: center; margin-bottom: var(--cook-meta-gap); }
.cook-section-head .dot { width: var(--cook-section-dot); height: var(--cook-section-dot); border-radius: 50%; margin-right: var(--cook-meta-gap); }
.cook-section-head h2 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-cook-section-head); color: var(--ink-ground); line-height: 1.31; }
.cook-ing-list, .cook-steps { flex: 1 1 0; min-height: 0; overflow: hidden; }
.cook-steps.is-focused { box-shadow: none; }
.cook-steps::after { display: none !important; }
.cook-ing-row { display: flex; align-items: flex-start; margin-bottom: var(--cook-ing-row-gap); }
.cook-ing-qty { font-size: var(--fs-cook-ing-qty); font-weight: 700; color: var(--ink-ground); white-space: nowrap; flex: 0 0 auto; line-height: 1.17; }
.cook-ing-item { flex: 1 1 0; min-width: 0; font-size: var(--fs-cook-ing-text); color: var(--ink-ground); line-height: 1.17; }
.cook-step-section { font-size: var(--fs-cook-step-text); font-weight: 700; color: var(--ink-soft-ground); margin: var(--cook-step-row-gap) 0; }
.cook-step-row { display: flex; align-items: flex-start; margin-bottom: var(--cook-step-row-gap); }
.cook-step-row .num { width: var(--cook-step-num-w); flex: 0 0 auto; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-cook-step-num); color: var(--accent-ink-ground); line-height: 1.31; }
.cook-step-row .text { flex: 1 1 0; min-width: 0; font-size: var(--fs-cook-step-text); color: var(--ink-ground); line-height: 1.3; }

.step-head { display: flex; align-items: flex-end; margin-bottom: var(--step-gap); }
.step-head-title { flex: 1 1 0; min-width: 0; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-step-head-title); color: var(--ink-soft-ground); line-height: 1.31; }
.step-head-count { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-step-head-count); color: var(--ink-ground); line-height: 1.31; white-space: nowrap; }
.step-progress { display: flex; height: var(--step-progress-h); margin-bottom: var(--step-gap); }
.step-progress .segment { flex: 1 1 0; border-radius: var(--step-progress-radius); }
.step-progress .segment + .segment { margin-left: var(--step-progress-gap); }
.segment.done { background: var(--ink-soft-ground); }
.segment.here { background: var(--accent); }
.segment.ahead { background: var(--surface2); }
.step-main { flex: 1 1 0; min-height: 0; display: flex; align-items: center; }
.step-numeral { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-step-numeral); color: var(--accent-ink-ground); line-height: 1.1; margin-right: var(--step-main-gap); }
.step-text { flex: 1 1 0; min-width: 0; font-size: var(--fs-step-text); font-weight: 600; color: var(--ink-ground); line-height: 1.31; }
.step-strip { display: flex; align-items: flex-start; margin-top: var(--step-gap); }
.step-strip-label { display: flex; align-items: center; height: var(--step-ing-label-h); margin-right: var(--step-ing-gap); flex: 0 0 auto; }
.step-strip-label .dot { width: var(--cook-section-dot); height: var(--cook-section-dot); border-radius: 50%; margin-right: var(--step-ing-label-gap); }
.step-strip-label span:last-child { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-step-ing-label-text); color: var(--ink-ground); }
.step-flow { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: wrap; margin-right: calc(-1 * var(--step-ing-col-gap)); margin-bottom: calc(-1 * var(--step-ing-row-gap)); }
.step-ing { display: flex; align-items: center; font-size: var(--fs-step-ing-text); color: var(--ink-ground); white-space: nowrap; margin-right: var(--step-ing-col-gap); margin-bottom: var(--step-ing-row-gap); line-height: 1.17; }
.step-ing b { font-weight: 700; margin-right: var(--step-ing-item-gap); }
.step-ing.more { font-weight: 700; color: var(--ink-soft-ground); }
.step-bottom { display: flex; align-items: center; margin-top: var(--step-gap); }
.step-bottom .cook-button { margin-left: var(--step-bottom-gap); }
.step-next {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; background: var(--surface);
  border-radius: var(--cook-card-radius); padding: var(--step-next-pad-v) var(--step-next-pad-h);
}
.step-next .label { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-step-next-label); color: var(--accent-ink-card); margin-right: var(--step-bottom-gap); line-height: 1.31; }
.step-next .text { flex: 1 1 0; min-width: 0; font-size: var(--fs-step-next-text); color: var(--ink-card); line-height: 1.17; }

.check-head { display: flex; align-items: flex-end; margin-bottom: var(--cook-gap); }
.check-head-left { flex: 1 1 0; min-width: 0; }
.check-title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-check-title); color: var(--ink-ground); line-height: 1.31; }
.check-sub { font-size: var(--fs-check-sub); color: var(--ink-soft-ground); line-height: 1.17; }
.check-head-right { display: flex; flex-direction: column; align-items: flex-end; }
.check-count { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-check-count); color: var(--ink-ground); line-height: 1.31; }
.check-head-right .cook-button { margin-top: var(--cook-meta-gap); }
.check-scroll { flex: 1 1 0; min-height: 0; overflow: hidden; padding: 14px; margin: -14px; }
.check-grid { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; }
.ing-row { position: relative; background: var(--surface); border-radius: var(--cook-row-radius); margin-bottom: var(--check-row-gap); min-width: 0; }
.ing-row.second { margin-left: var(--check-col-gap); }
.ing-row::after { border-radius: calc(var(--cook-row-radius) + var(--focus-offset-todo) + var(--focus-outline)); }
.ing-content { display: flex; align-items: center; padding: var(--check-row-pad-v) var(--check-row-pad-h); }
.ing-box {
  width: var(--todo-box); height: var(--todo-box); flex: 0 0 auto; margin-right: var(--check-row-inner-gap);
  border-radius: var(--todo-box-radius); border: var(--todo-box-border) solid var(--ink-soft-card);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-todo-check-text); line-height: 1;
}
.ing-row.checked .ing-box { border: 0; background: var(--c-food); color: var(--on-food); }
.check-qty { font-size: var(--fs-check-qty); font-weight: 700; color: var(--ink-card); white-space: nowrap; flex: 0 0 auto; line-height: 1.17; }
.check-item { flex: 1 1 0; min-width: 0; font-size: var(--fs-check-item); font-weight: 500; color: var(--ink-card); line-height: 1.17; }
.check-qty.done, .check-item.done { color: var(--ink-soft-card); }
.ing-row.is-focused { background: var(--accent); }
.ing-row.is-focused .check-qty, .ing-row.is-focused .check-item { color: var(--on-accent); font-size: var(--fs-check-item-focus); }
.ing-row.is-focused .check-item { font-weight: 700; }
.ing-row.is-focused:not(.checked) .ing-box { border-color: var(--on-accent); }

.unread-kicker { font-size: var(--fs-unread-kicker); color: var(--ink-soft-ground); }
.unread-name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-unread-name); color: var(--ink-ground); line-height: 1.31; }
.unread-middle { flex: 1 1 0; min-height: 0; display: flex; align-items: center; }
.unread-left { flex: 1 1 0; min-width: 0; margin-right: var(--unread-row-gap); }
.unread-head { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-unread-head); color: var(--ink-ground); line-height: 0.95; margin-bottom: var(--cook-gap); }
.unread-body { font-size: var(--fs-unread-body); color: var(--ink-soft-ground); line-height: 1.35; margin-bottom: var(--cook-gap); }
.unread-url { font-size: var(--fs-unread-url); color: var(--ink-soft-ground); }
.qr-tile {
  background: var(--qr-tile-bg); border-radius: var(--qr-tile-radius); display: flex; flex-direction: column; align-items: center;
  padding: var(--qr-tile-pad) var(--qr-tile-pad) var(--qr-tile-pad-bottom);
}
.qr-tile .qr { width: var(--qr-size); height: var(--qr-size); display: block; image-rendering: pixelated; }
.qr-caption { margin-top: var(--cook-meta-gap); font-size: var(--fs-qr-caption); font-weight: 700; color: var(--qr-caption-ink); text-align: center; }
.f-plain::after { display: none !important; }
.f-plain.is-focused { box-shadow: none; }