/* ==========================================================================
   FAMILY Clock: the Masthead look on screen.

   The rules come from /opt/fmly-templates/fmly/brand.py and the fmly-house-style
   reference (brand.md): a grey page edge to edge, a black band with the title in
   white capitals and the Family script logo at the right, Ink text, white only
   where somebody writes, Tint where the app calculated, black totals with white
   figures. No other colour, no boxes, no gradients, no shadows, no rounded corner
   over 2 px, no icons drawn by a font.

   Why some choices look strict:
   - Crew read this at arm's length in sunlight at 06:30, so the body is 18 px on
     crew screens and every tap target is at least 48 px; the one button that
     matters is 96 px tall.
   - White text on the grey is never under 14 px (contrast is only 3:1); small
     text on grey is always Ink.
   - Mid (#5D5E60) is only used inside white bars (prompts, hints); on the grey it
     would not pass contrast, so status lines on the page are Ink.
   Production and office pages (dense, English only) add class "fc-dense" on
   <body>: smaller type, tighter rows, the same palette.
   ========================================================================== */

:root {
  --fc-grey: #929396;
  --fc-black: #111111;
  --fc-ink: #1C1C1E;
  --fc-white: #FFFFFF;
  --fc-tint: #EFEFF0;
  --fc-line: #C6C7C9;
  --fc-mid: #5D5E60;
  --fc-soft: #B9BABC;
  --fc-print-tint: #F4F4F5;

  --fc-font: -apple-system, "Avenir Next", "Segoe UI", Roboto, Arial, sans-serif;
  --fc-body: 18px;
  --fc-small: 15px;
  --fc-label: 13px;
  --fc-tap: 48px;
  --fc-button: 96px;
  --fc-gutter: 16px;
  --fc-gap: 2px;            /* the grey gap between white cells and rows */
  --fc-radius: 2px;         /* the only rounding allowed */
  --fc-band-h: 72px;
  --fc-page-max: 720px;
  --fc-track: 0.15em;       /* band title letter-spacing */
  --fc-track-label: 0.08em; /* labels and section titles */
}

/* ---- reset, kept minimal on purpose --------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--fc-grey);
  color: var(--fc-ink);
  font-family: var(--fc-font);
  font-size: var(--fc-body);
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 3px solid var(--fc-ink); outline-offset: 2px; }
.band :focus-visible, .btn-primary:focus-visible, .total:focus-visible { outline-color: var(--fc-white); }

/* ---- the band -------------------------------------------------------- */
/* Full width, touching the edges, like the 42 mm masthead on paper. The title is
   white capitals, letter-spaced; the logo sits right and centred. On an iPhone
   with the app on the Home Screen the band also covers the status bar. */
.band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fc-gutter);
  min-height: var(--fc-band-h);
  padding: calc(12px + env(safe-area-inset-top, 0px)) var(--fc-gutter) 12px;
  background: var(--fc-black);
  color: var(--fc-white);
}
.band-text { min-width: 0; flex: 1 1 auto; }
.band-title {
  font-weight: 700;
  font-size: clamp(16px, 4.6vw, 21px);
  letter-spacing: var(--fc-track);
  text-transform: uppercase;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.band-sub {
  margin-top: 4px;
  font-size: 14px;       /* never under 14 px in a light colour */
  font-weight: 700;
  letter-spacing: var(--fc-track-label);
  text-transform: uppercase;
  color: var(--fc-soft);
}
.band-logo {
  flex: 0 0 auto;
  height: 36px;
  width: auto;
}
.band-logo img, .band-logo svg { height: 100%; width: auto; }
.band-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.band-actions .btn-secondary { min-height: var(--fc-tap); }

/* ---- the page -------------------------------------------------------- */
.page {
  max-width: var(--fc-page-max);
  margin: 0 auto;
  padding: 20px var(--fc-gutter) calc(32px + env(safe-area-inset-bottom, 0px));
  counter-reset: section;
}
.page-wide { max-width: none; }

/* ---- sections: 01, 02 with a 1 pt Ink rule under -------------------- */
.section { margin: 28px 0 0; }
.section:first-child { margin-top: 0; }
.section-title, .section > h2 {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--fc-ink);
  margin-bottom: 14px;
  font-size: var(--fc-label);
  font-weight: 700;
  letter-spacing: var(--fc-track-label);
  text-transform: uppercase;
  color: var(--fc-ink);
}
.section-title::before, .section > h2::before {
  counter-increment: section;
  content: counter(section, decimal-leading-zero);
  color: var(--fc-white);
  font-size: 15px;
  letter-spacing: 0.04em;
}
.section-title[data-num]::before, .section > h2[data-num]::before { content: attr(data-num); }

/* ---- running text on the grey --------------------------------------- */
.lead { font-size: 22px; font-weight: 700; line-height: 1.3; }
.text { margin: 0 0 12px; }
.muted { color: var(--fc-ink); opacity: 0.8; }       /* never Mid on the grey */
.small { font-size: var(--fc-small); }
.big { font-size: 48px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; }
.status { margin-top: 10px; font-size: var(--fc-small); color: var(--fc-ink); }
.inline-list { display: flex; flex-wrap: wrap; gap: 8px 16px; }

/* ---- fields: label on the grey, white bar to write in --------------- */
.field { margin: 0 0 14px; }
.field-label, .label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fc-label);
  font-weight: 700;
  letter-spacing: var(--fc-track-label);
  text-transform: uppercase;
  color: var(--fc-ink);
}
.field-hint { margin-top: 6px; font-size: var(--fc-small); }
.input, .field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea {
  display: block;
  width: 100%;
  min-height: var(--fc-tap);
  padding: 10px 14px;
  background: var(--fc-white);
  color: var(--fc-ink);
  border: 0;
  border-radius: var(--fc-radius);
  font-size: var(--fc-body);
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { min-height: 96px; resize: vertical; }
/* The chevron is a two-line SVG in Ink, not a glyph from an icon font. */
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231C1C1E' stroke-width='2'/%3E%3C/svg%3E");
  background-position: right 14px center;
  background-size: 14px 9px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.input::placeholder, .field input::placeholder, .field textarea::placeholder { color: var(--fc-mid); opacity: 1; }
.input:disabled, .field input:disabled { background: var(--fc-tint); }
.input[readonly] { background: var(--fc-tint); }
.field-row { display: flex; gap: var(--fc-gap); }
.field-row > .field { flex: 1 1 0; min-width: 0; }

/* A choice the crew makes with a tap: white bar, Ink text, black when chosen. */
.choice { display: flex; flex-direction: column; gap: var(--fc-gap); }
.choice-row { flex-direction: row; }
.choice-row > .choice-item { flex: 1 1 0; }
.choice-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 14px;
  background: var(--fc-white);
  color: var(--fc-ink);
  border: 0;
  border-radius: var(--fc-radius);
  text-align: left;
  width: 100%;
}
.choice-item[aria-pressed="true"], .choice-item.is-on { background: var(--fc-black); color: var(--fc-white); }
.choice-item input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice-item .mark {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border: 2px solid var(--fc-ink);
  border-radius: var(--fc-radius);
}
.choice-item[aria-pressed="true"] .mark, .choice-item.is-on .mark { background: var(--fc-white); border-color: var(--fc-white); }

/* A line that the app calculated: Tint, never typed in. */
.calc {
  background: var(--fc-tint);
  color: var(--fc-ink);
  border-radius: var(--fc-radius);
}
.calc-bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  min-height: var(--fc-tap);
  padding: 10px 14px;
}
.calc-bar + .calc-bar { margin-top: var(--fc-gap); }
.calc-bar .value { font-weight: 700; white-space: nowrap; }

/* A total: black with white bold figures. */
.total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  min-height: var(--fc-tap);
  padding: 12px 14px;
  background: var(--fc-black);
  color: var(--fc-white);
  font-weight: 700;
  border-radius: var(--fc-radius);
}
.total .value { font-size: 22px; white-space: nowrap; }

/* ---- buttons --------------------------------------------------------- */
.btn, .btn-primary, .btn-secondary, .btn-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--fc-tap);
  padding: 10px 18px;
  border: 0;
  border-radius: var(--fc-radius);
  font-weight: 700;
  letter-spacing: var(--fc-track-label);
  text-transform: uppercase;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
/* The one button that matters on a crew screen: full width, 96 px, white on black. */
.btn-primary {
  width: 100%;
  min-height: var(--fc-button);
  background: var(--fc-black);
  color: var(--fc-white);
  font-size: 22px;
  letter-spacing: 0.12em;
}
.btn-primary:active { background: var(--fc-ink); }
.btn-primary:disabled, .btn-primary[aria-busy="true"] { background: var(--fc-mid); color: var(--fc-white); cursor: default; }
/* Secondary: a white bar with Ink capitals. The optional LUNCH button, Looks right, Yes / Change. */
.btn-secondary {
  width: 100%;
  min-height: 56px;
  background: var(--fc-white);
  color: var(--fc-ink);
  font-size: var(--fc-body);
}
.btn-secondary:active { background: var(--fc-tint); }
.btn-secondary:disabled { color: var(--fc-mid); cursor: default; }
.btn-secondary.is-on { background: var(--fc-black); color: var(--fc-white); }
/* Link-like action in Ink, underlined, still a 48 px target. */
.btn-link {
  background: transparent;
  color: var(--fc-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding-left: 4px;
  padding-right: 4px;
}
.btn-inline { width: auto; }
.btn-row { display: flex; gap: var(--fc-gap); }
.btn-row > * { flex: 1 1 0; }
.btn-stack { display: flex; flex-direction: column; gap: var(--fc-gap); }
.actions { margin-top: 20px; }
.actions > * + * { margin-top: var(--fc-gap); }

/* The band's small switch (EN / ES): black ground, white when chosen. */
.seg { display: inline-flex; gap: 2px; }
.seg button {
  min-width: var(--fc-tap);
  min-height: var(--fc-tap);
  padding: 0 10px;
  background: transparent;
  color: var(--fc-white);
  border: 1px solid var(--fc-soft);
  border-radius: var(--fc-radius);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: var(--fc-track-label);
}
.seg button[aria-pressed="true"] { background: var(--fc-white); color: var(--fc-black); border-color: var(--fc-white); }

/* ---- the CHECK chip: black, white capitals, tap to see why ----------- */
.chip, .chip-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 10px;
  border: 0;
  border-radius: var(--fc-radius);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: var(--fc-track-label);
  text-transform: uppercase;
  white-space: nowrap;
}
.chip { background: var(--fc-tint); color: var(--fc-ink); }
.chip-check { background: var(--fc-black); color: var(--fc-white); }
/* A chip sits in dense grids, so it stays 32 px tall but its hit area is 48 px. */
button.chip-check::after, button.chip::after { content: ""; position: absolute; inset: -8px; }
.chip-check::before { content: "CHECK"; }
.chip-check[data-label]::before { content: attr(data-label); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---- lists: white rows with grey gaps, like rows on paper ------------ */
.list { display: flex; flex-direction: column; gap: var(--fc-gap); margin: 0; padding: 0; list-style: none; }
.list-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 14px;
  background: var(--fc-white);
  color: var(--fc-ink);
  border-radius: var(--fc-radius);
  text-decoration: none;
}
.list-row.calc { background: var(--fc-tint); }
.list-row.total { font-weight: 700; }
.list-row > .grow { flex: 1 1 auto; min-width: 0; }
.list-row .meta { display: block; font-size: var(--fc-small); color: var(--fc-mid); }
.list-row .time { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.list-row .right { margin-left: auto; text-align: right; white-space: nowrap; }
a.list-row:active, button.list-row:active { background: var(--fc-tint); }
button.list-row { width: 100%; border: 0; text-align: left; }
.list-head {
  display: flex; gap: 12px; padding: 0 14px 6px;
  font-size: var(--fc-label); font-weight: 700; letter-spacing: var(--fc-track-label); text-transform: uppercase;
}

/* ---- grids: the dense production tables ----------------------------- */
/* Column heads sit on the grey in small bold capitals; cells are white; a
   calculated cell is Tint; a total row is black. The grey shows through the
   2 px border-spacing, which gives the rows their gaps without any border. */
.grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 calc(-1 * var(--fc-gutter)); padding: 0 var(--fc-gutter); }
table.grid {
  width: 100%;
  border-collapse: separate;
  border-spacing: var(--fc-gap);
  margin: 0 calc(-1 * var(--fc-gap));
  font-size: var(--fc-small);
  font-variant-numeric: tabular-nums;
}
.grid th {
  padding: 4px 8px 6px;
  text-align: left;
  vertical-align: bottom;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: var(--fc-track-label);
  text-transform: uppercase;
  color: var(--fc-ink);
  white-space: nowrap;
}
.grid thead th { position: sticky; top: 0; background: var(--fc-grey); z-index: 1; }
.grid td {
  padding: 8px;
  background: var(--fc-white);
  color: var(--fc-ink);
  vertical-align: middle;
  min-height: 40px;
}
.grid td.calc, .grid tr.calc td { background: var(--fc-tint); }
.grid tr.total td, .grid td.total { background: var(--fc-black); color: var(--fc-white); font-weight: 700; }
.grid td.num, .grid th.num { text-align: right; white-space: nowrap; }
.grid td.input { padding: 0; }
.grid td.input input, .grid td.input select {
  width: 100%; min-height: 40px; padding: 6px 8px; border: 0; background: var(--fc-white); font-size: inherit;
}
.grid td.input input:focus { outline-offset: -3px; }
.grid tr.is-selected td { background: var(--fc-tint); }
.grid td.empty { background: transparent; }
.grid caption { caption-side: top; text-align: left; padding: 0 0 8px; font-weight: 700; }
.grid-note { margin-top: 8px; font-size: var(--fc-small); }

/* ---- toast and dialog ------------------------------------------------ */
.toast {
  position: fixed;
  left: var(--fc-gutter);
  right: var(--fc-gutter);
  bottom: calc(var(--fc-gutter) + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  max-width: calc(var(--fc-page-max) - 2 * var(--fc-gutter));
  margin: 0 auto;
  padding: 14px 16px;
  background: var(--fc-black);
  color: var(--fc-white);
  font-size: var(--fc-body);
  border-radius: var(--fc-radius);
  pointer-events: none;
}
.toast[hidden] { display: none; }
dialog.dialog {
  width: min(100% - 2 * var(--fc-gutter), 480px);
  padding: 0;
  border: 0;
  border-radius: var(--fc-radius);
  background: var(--fc-grey);
  color: var(--fc-ink);
  font-size: var(--fc-body);
}
dialog.dialog::backdrop { background: rgba(17, 17, 17, 0.6); }
.dialog-band { padding: 14px var(--fc-gutter); background: var(--fc-black); color: var(--fc-white); font-weight: 700; letter-spacing: var(--fc-track-label); text-transform: uppercase; font-size: 15px; }
.dialog-body { padding: var(--fc-gutter); }
.dialog-actions { display: flex; gap: var(--fc-gap); padding: 0 var(--fc-gutter) var(--fc-gutter); }
.dialog-actions > * { flex: 1 1 0; }

/* ---- stepper (S1), timeline (S3) ------------------------------------ */
.steps { display: flex; gap: 4px; margin-bottom: 20px; }
.steps > span { flex: 1 1 0; height: 4px; background: var(--fc-soft); }
.steps > span.is-done, .steps > span.is-on { background: var(--fc-black); }
.timeline { display: flex; flex-direction: column; gap: var(--fc-gap); }
.timeline .list-row .source { font-size: 12px; font-weight: 700; letter-spacing: var(--fc-track-label); text-transform: uppercase; color: var(--fc-mid); }

/* ---- the clock card on S2 ------------------------------------------- */
.card-state { margin: 20px 0; }
.card-state .big { font-variant-numeric: tabular-nums; }
.server-time { margin-top: 10px; font-size: var(--fc-small); font-variant-numeric: tabular-nums; }

/* ---- utilities ------------------------------------------------------- */
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; }
.nowrap { white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }
.right { text-align: right; }
.center { text-align: center; }
.row { display: flex; align-items: center; gap: 12px; }
.row > .grow { flex: 1 1 auto; min-width: 0; }
.visually-busy { opacity: 0.6; pointer-events: none; }
.offline-bar {
  padding: 8px var(--fc-gutter);
  background: var(--fc-black);
  color: var(--fc-white);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: var(--fc-track-label);
  text-transform: uppercase;
  text-align: center;
}

/* ---- dense variant: production and office screens ------------------- */
body.fc-dense { --fc-body: 15px; --fc-small: 13px; --fc-label: 12px; --fc-page-max: none; }
body.fc-dense .band { min-height: 56px; padding-top: 10px; padding-bottom: 10px; }
body.fc-dense .band-logo { height: 28px; }
body.fc-dense .band-title { font-size: 16px; }
body.fc-dense .page { padding-top: 14px; }
body.fc-dense .section { margin-top: 20px; }
body.fc-dense .list-row { min-height: 44px; padding: 6px 12px; }
body.fc-dense .btn-primary { min-height: 56px; font-size: 16px; }
body.fc-dense .btn-secondary { min-height: var(--fc-tap); }
body.fc-dense .field { margin-bottom: 10px; }
body.fc-dense .big { font-size: 32px; }
body.fc-dense .grid td { padding: 5px 8px; }
body.fc-dense .grid { font-size: 13px; }

/* ---- small phones (360 px) and large screens ------------------------ */
@media (max-width: 400px) {
  :root { --fc-gutter: 12px; --fc-body: 17px; }
  .band-logo { height: 30px; }
  .big { font-size: 42px; }
  .btn-primary { font-size: 20px; }
}
@media (min-width: 900px) {
  .band { padding-left: 24px; padding-right: 24px; }
  body:not(.fc-dense) .band-text { max-width: var(--fc-page-max); margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---- print: the PRINT variant, white page, grey logo, pale panels ---- */
@media print {
  :root { --fc-body: 11pt; --fc-small: 9.5pt; --fc-label: 8pt; }
  html, body { background: var(--fc-white) !important; color: var(--fc-ink); }
  .band { background: var(--fc-black) !important; color: var(--fc-white) !important; min-height: 0; padding: 10pt 14mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .band-logo { height: 28pt; }
  .page { max-width: none; padding: 9mm 14mm; }
  .section-title, .section > h2 { border-bottom-color: var(--fc-ink); break-after: avoid; }
  .section-title::before, .section > h2::before { color: var(--fc-ink); }
  .input, .field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea, .list-row, .grid td, .choice-item { background: var(--fc-white); border: 0.5pt solid var(--fc-line); }
  .calc, .calc-bar, .grid td.calc, .grid tr.calc td, .list-row.calc { background: var(--fc-print-tint) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .total, .grid tr.total td, .grid td.total, .chip-check { background: var(--fc-black) !important; color: var(--fc-white) !important; border-color: var(--fc-black); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .grid thead th { position: static; background: transparent; }
  .grid tr, .list-row { break-inside: avoid; }
  .btn-primary, .btn-secondary, .btn-link, .seg, .toast, .offline-bar, .band-actions, .no-print, dialog { display: none !important; }
  a { text-decoration: none; }
  @page { margin: 0; }
}