/* vantage · public/css/daily.css · Fix 1 · v1
   v1 (37.4 — Pete, 2026-10-24: "I also want to make a 'daily' page, where it is very similar to Westin's tab from the V3
   spreadsheet, but it does not have to be so detailed"): DAILY (daily.js). Westin's Tab's own look, on its own white paper
   in either mode: black head rows with white bold words, white and #F7F8FA lines, a line that did not move that day in its
   grey, Complete in its green and In Progress in its gold (the colours set on .daily by daily.js LOOK, as OKLCH — read off
   the tab). Every measure rem, %, or the type scale — never a fixed width. On a narrow page each line is two or three lines
   of its own, every figure under its own small label; the page never goes sideways. */

.daily { max-width: 72rem; container: daily / inline-size; }
.daily__head { gap: calc(var(--pad) / 2); }
.daily__bar { display: flex; align-items: center; gap: calc(var(--pad) / 2); flex-wrap: wrap; }
.daily__bar > .btn { width: auto; flex: 0 0 auto; }
.daily__step { min-width: 2.75rem; font-size: var(--t-body); }
.daily__date { font: inherit; font-size: var(--t-body); font-weight: 700; padding: calc(var(--pad) * 0.5) calc(var(--pad) * 0.75); background: var(--dy-day); color: var(--dy-ink); border: var(--border); border-radius: var(--radius-cap); color-scheme: light; }
.daily__date:focus-visible { outline: var(--selected-border); outline-offset: calc(var(--pad) / 4); }
.daily__said { margin: 0; color: var(--text2); min-height: calc(1em * var(--lh) * 2); }

/* the paper — Westin's own, white in either mode */
.daily__paper { display: flex; flex-direction: column; gap: calc(var(--gap) * 1.5); width: 100%; padding: var(--pad); background: var(--dy-paper); color: var(--dy-ink); border: var(--border); border-radius: var(--radius-cap); font-family: Roboto, sans-serif; }
.daily__part { display: flex; flex-direction: column; gap: calc(var(--pad) / 2); min-width: 0; }
.daily__title { margin: 0; font-size: var(--t-card); font-weight: 700; color: var(--dy-ink); }

.daily__grid { display: flex; flex-direction: column; width: 100%; font-size: var(--t-small); line-height: 1.3; }
.daily__line { display: grid; gap: 0 var(--pad); align-items: center; padding: calc(var(--pad) / 3) calc(var(--pad) / 2); background: var(--dy-paper); color: var(--dy-ink); }
.daily__line.is-zebra { background: var(--dy-zebra); }
.daily__line--head { background: var(--dy-head); color: var(--dy-headink); font-weight: 700; }
.daily__line > span { min-width: 0; overflow-wrap: anywhere; }
.daily__line.is-still > :not(.daily__name), .daily__line.is-still .daily__task { color: var(--dy-quiet); }
.daily__num { font-variant-numeric: tabular-nums; }
.daily__today { font-weight: 700; }
.daily__where { color: var(--dy-note); }
.daily__task { font-weight: 400; }
.daily__crew { display: inline-block; max-width: 100%; padding: 0.1rem calc(var(--pad) / 2); border-radius: var(--radius-cap); background: var(--dy-crew); color: var(--dy-crewink); font-weight: 700; }
.daily__status { font-weight: 700; color: var(--dy-quiet); }
.daily__status--done { color: var(--dy-complete); }
.daily__status--going { color: var(--dy-progress); }
.daily__line--band { grid-template-columns: auto minmax(0, 1fr) !important; grid-template-areas: none !important; padding-top: calc(var(--pad) * 0.75); background: var(--dy-paper); }
.daily__bandsaid { color: var(--dy-note); font-weight: 700; }

/* the columns, on a page with room */
.daily__grid--site .daily__line { grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.7fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.9fr); }
.daily__grid--crews .daily__line { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); }
.daily__grid--tasks .daily__line { grid-template-columns: minmax(0, 2fr) minmax(0, 0.8fr) minmax(0, 2fr) minmax(0, 1.2fr); }

/* a narrow page: each line in two or three lines of its own, each figure under its label — never sideways */
@container daily (max-width: 40rem) {
  .daily__line--head { display: none; }
  .daily__line > [data-label]::before { content: attr(data-label); display: block; font-size: 0.85em; font-weight: 400; color: var(--dy-note); }
  .daily__line { gap: calc(var(--pad) / 3) calc(var(--pad) / 2); padding-block: calc(var(--pad) / 2); }
  .daily__grid--site .daily__line { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: 'a a e' 'b c d'; }
  .daily__grid--site .daily__line > :nth-child(1) { grid-area: a; } .daily__grid--site .daily__line > :nth-child(2) { grid-area: b; }
  .daily__grid--site .daily__line > :nth-child(3) { grid-area: c; } .daily__grid--site .daily__line > :nth-child(4) { grid-area: d; }
  .daily__grid--site .daily__line > :nth-child(5) { grid-area: e; justify-self: end; }
  .daily__grid--crews .daily__line { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: 'a a b' 'c d d' 'e e e'; }
  .daily__grid--crews .daily__line > :nth-child(1) { grid-area: a; } .daily__grid--crews .daily__line > :nth-child(2) { grid-area: b; justify-self: end; }
  .daily__grid--crews .daily__line > :nth-child(3) { grid-area: c; } .daily__grid--crews .daily__line > :nth-child(4) { grid-area: d; }
  .daily__grid--crews .daily__line > :nth-child(5) { grid-area: e; }
  /* the tasks: compact — the name and the day's rows on one line, where and to date small under them; the head row says which */
  .daily__grid--tasks .daily__line--head { display: grid; font-size: 0.85em; }
  .daily__grid--tasks .daily__line > [data-label]::before { content: none; }
  .daily__grid--tasks .daily__line { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: 'a b' 'c d'; gap: 0 calc(var(--pad) / 2); padding-block: calc(var(--pad) / 3); }
  .daily__grid--tasks .daily__line:not(.daily__line--head) > :nth-child(3), .daily__grid--tasks .daily__line:not(.daily__line--head) > :nth-child(4) { font-size: 0.85em; }
  .daily__grid--tasks .daily__line > :nth-child(1) { grid-area: a; } .daily__grid--tasks .daily__line > :nth-child(2) { grid-area: b; justify-self: end; text-align: right; }
  .daily__grid--tasks .daily__line > :nth-child(3) { grid-area: c; } .daily__grid--tasks .daily__line > :nth-child(4) { grid-area: d; justify-self: end; text-align: right; }
  .daily__line--band > * { grid-area: auto !important; justify-self: start !important; text-align: left !important; }
}
@media print { .daily__head .daily__bar { display: none; } .daily__paper { border: 0; padding: 0; } }