/* The Daily check (usage plan Tasks 10 and 12): the page's own layout on top of the shell.
   Chrome is the shell's (platform.css roles, tokens.css values); every rule here is
   scoped under body[data-module="checks"] and uses tokens, never raw colours. */

/* The header, filters, counts and catch-up line run across both columns; the board and the aside share the row below. */
body[data-module="checks"] .checks-head { grid-column: 1 / -1; display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
body[data-module="checks"] .checks-head p { margin: 0; }
body[data-module="checks"] .checks-source-line { margin: 0 0 var(--space-3); }
body[data-module="checks"] .checks-filters select { min-width: 14rem; }
body[data-module="checks"] .checks-filters input[type=date] { min-width: 10rem; }
body[data-module="checks"] .checks-counts { margin: 0; }
/* On a phone the five count tiles sit three to a row, not one (browser render pass, 2026-10-31). */
@media (max-width: 640px) { body[data-module="checks"] .checks-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); } }
body[data-module="checks"] .checks-board { min-width: 0; }
body[data-module="checks"] .checks-group { margin: var(--space-6) 0 var(--space-3); }

/* A city's card: its name, product line, flag count and who checked it on one line. */
body[data-module="checks"] .checks-city { padding: var(--space-4); margin-bottom: var(--space-4); }
body[data-module="checks"] .checks-city.needs-look { border-left: 4px solid var(--warn-ink); }
body[data-module="checks"] .checks-city-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin-bottom: var(--space-3); }
body[data-module="checks"] .checks-city-head h3 { margin: 0; }
body[data-module="checks"] .checks-checked { margin-left: auto; }
body[data-module="checks"] .checks-why { margin: 0 0 var(--space-3); }
/* A card's sources (browser render pass, 2026-10-31): one <tbody> per source. With figures, its name spans two rows:
   the figures and AdCore's reading, then what the person records (Status, Note, Ticket) under them, so the card is
   never wider than itself. */
body[data-module="checks"] .checks-city { container: checks-city / inline-size; }
/* Fixed columns, so the visible table and the folded one of a card share their x positions (review, 2026-10-31): the
   source 8rem (a name of about 13 characters, "POS FRONTDESK2", before a word splits) and the five figures (each as wide
   as its eyebrow head; "Usual Wed" may wrap onto two lines), AdCore's reading the rest, at least 9.75rem in a card of
   45rem (its widest chip, "No usage data yet", is about 8.5rem); a narrower card stacks (below). A card without figures
   gives the source's name 14rem. */
body[data-module="checks"] table.checks-sources { table-layout: fixed; }
body[data-module="checks"] table.checks-sources col.cs-src { width: 8rem; }
body[data-module="checks"] table.checks-sources col.cs-name { width: 14rem; }
body[data-module="checks"] table.checks-sources col.cs-card,
body[data-module="checks"] table.checks-sources col.cs-cash { width: 4.25rem; }
body[data-module="checks"] table.checks-sources col.cs-check { width: 5rem; }
body[data-module="checks"] table.checks-sources col.cs-cancelled { width: 7.25rem; }
body[data-module="checks"] table.checks-sources col.cs-usual { width: 6.5rem; }
body[data-module="checks"] table.checks-sources td.checks-src { overflow-wrap: break-word; }
body[data-module="checks"] .checks-sources td.num { text-align: right; font-variant-numeric: tabular-nums; }
body[data-module="checks"] .checks-sources th.num { text-align: right; }
body[data-module="checks"] .checks-sources td.checks-src { font-weight: 600; color: var(--ink); }
body[data-module="checks"] .checks-sources tr.checks-fig td:not(.checks-src) { border-bottom: 0; padding-bottom: 0; }
body[data-module="checks"] .checks-sources tbody tr:hover { background: none; }
body[data-module="checks"] .checks-sources tbody.checks-source:hover { background: var(--hover-row); }
body[data-module="checks"] .checks-sources .chip { white-space: nowrap; }
body[data-module="checks"] .checks-fields { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--space-2) var(--space-4); }
body[data-module="checks"] .checks-field { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-1) var(--space-2); min-width: 0; }
body[data-module="checks"] .checks-field > .checks-label,
body[data-module="checks"] .checks-field label { font-size: 14px; line-height: 20px; color: var(--mute); }
body[data-module="checks"] .checks-field > .checks-label { display: block; }
body[data-module="checks"] .checks-fields:not(:has(label)) .checks-field { flex-direction: column; align-items: flex-start; }
/* Read-only, Status is as wide as the editable select's least, so Note starts at one x for every source (review, 2026-10-31). */
body[data-module="checks"] .checks-fields:not(:has(label)) .checks-field.checks-status { flex: 0 0 10rem; }
/* Note starts at 11rem, so Status, Note and Ticket share one line in every card that keeps the table (a 45rem card leaves
   them about 35.5rem; at 14rem Ticket wrapped under Status between 1180 and 1220 windows; review, 2026-10-31). */
body[data-module="checks"] .checks-field.checks-note { flex: 1 1 11rem; }
body[data-module="checks"] .checks-field.checks-note label { flex: 1 1 auto; }
/* The ticket's open issue ("open #4512 · OPEN · Vijay Rao · since Oct 27") wraps under its field, not beside it. */
body[data-module="checks"] .checks-field.checks-ticket-field { flex: 0 0 12rem; flex-direction: column; align-items: flex-start; max-width: 12rem; }
body[data-module="checks"] .checks-sources input[type=text] { min-width: 0; width: 100%; }
body[data-module="checks"] .checks-sources input.checks-ticket { width: calc(12ch + 2 * var(--space-3) + 2px); font-variant-numeric: tabular-nums; }
body[data-module="checks"] .checks-sources select { min-width: 10rem; }
body[data-module="checks"] .checks-reading { color: var(--ink); }
body[data-module="checks"] .checks-folded { margin-top: var(--space-2); }
body[data-module="checks"] .checks-folded summary,
body[data-module="checks"] .checks-steady > summary { cursor: pointer; font-weight: 600; color: var(--accent); }
body[data-module="checks"] .checks-steady > summary { margin-bottom: var(--space-3); }
body[data-module="checks"] .checks-save { margin: var(--space-3) 0 0; }
body[data-module="checks"] .checks-steady-action { margin: 0 0 var(--space-6); }

/* The aside: open issues and the week. */
body[data-module="checks"] .checks-issues { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-3); font-size: 14px; line-height: 20px; }

/* A narrow card (45rem of card or less: a phone, a tablet): each source stacks. The name; the five figures, each under its column's
   name in the eyebrow treatment of the table.data th it stands in for, three to a row; AdCore's reading; then Status,
   Note and Ticket one under another, full width. The column heads stay for screen readers; nothing scrolls sideways. */
@container checks-city (max-width: 45rem) {
  body[data-module="checks"] table.checks-sources,
  body[data-module="checks"] table.checks-sources tbody,
  body[data-module="checks"] table.checks-sources tr,
  body[data-module="checks"] table.checks-sources td { display: block; }
  body[data-module="checks"] table.checks-sources colgroup { display: none; }
  body[data-module="checks"] table.checks-sources thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  body[data-module="checks"] table.checks-sources tbody { padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
  body[data-module="checks"] table.checks-sources thead + tbody { border-top: 1px solid var(--line); }
  body[data-module="checks"] table.checks-sources td { padding: 0; border: 0; }
  body[data-module="checks"] table.checks-sources tr.checks-fig { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); }
  body[data-module="checks"] table.checks-sources tr.checks-fig td.checks-src,
  body[data-module="checks"] table.checks-sources tr.checks-fig td.checks-read { grid-column: 1 / -1; }
  body[data-module="checks"] table.checks-sources td.num { text-align: left; }
  body[data-module="checks"] table.checks-sources td[data-label]::before { content: attr(data-label); display: block; color: var(--mute); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
  body[data-module="checks"] table.checks-sources td.checks-record { margin-top: var(--space-3); }
  body[data-module="checks"] table.checks-sources td.checks-src + td.checks-record { margin-top: var(--space-2); }
  body[data-module="checks"] .checks-fields { display: grid; grid-template-columns: minmax(0, 1fr) 8.5rem; grid-template-areas: "status ticket" "issue issue" "note note"; gap: 0 var(--space-3); align-items: start; }
  body[data-module="checks"] .checks-field.checks-status { grid-area: status; }
  /* The ticket field's label sits beside Status; its open issue, if any, takes the full width under both. */
  body[data-module="checks"] .checks-fields:has(label) .checks-field.checks-ticket-field { display: contents; }
  body[data-module="checks"] .checks-fields:has(label) .checks-ticket-field > label { grid-area: ticket; }
  body[data-module="checks"] .checks-fields:has(label) .checks-ticket-field > .checks-after { grid-area: issue; margin-top: var(--space-1); }
  body[data-module="checks"] .checks-fields:not(:has(label)) .checks-field.checks-ticket-field { grid-area: ticket; max-width: 12rem; }
  body[data-module="checks"] .checks-field.checks-note { grid-area: note; margin-top: var(--space-3); }
  body[data-module="checks"] .checks-field label { flex: 1 1 auto; min-width: 0; }
  body[data-module="checks"] .checks-sources select { width: 100%; min-width: 0; }
}
/* A card of 20rem or less (a 360 phone, or a card inside the folded steady group on a 390 phone): Status and Ticket
   beside each other left the select too narrow for "Under performing" (126px at 390), so they go one under the other
   too, each full width; and the figures go two to a row, as three left "CANCELLED" (about 86px) running into the head
   beside it (review, 2026-10-31). */
@container checks-city (max-width: 20rem) {
  body[data-module="checks"] table.checks-sources tr.checks-fig { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-module="checks"] .checks-fields { grid-template-columns: minmax(0, 1fr); grid-template-areas: "status" "ticket" "issue" "note"; }
  body[data-module="checks"] .checks-fields:has(label) .checks-ticket-field > label,
  body[data-module="checks"] .checks-fields:not(:has(label)) .checks-field.checks-ticket-field { margin-top: var(--space-3); }
}

/* The week page's open issues: a narrow panel (a phone) stacks each issue (review, 2026-10-31): the city and since when
   on one line, the source under it, then the note, then the ticket. The column heads stay for screen readers. */
body[data-module="checks"] .checks-open-panel { container: checks-open / inline-size; }
@container checks-open (max-width: 40rem) {
  body[data-module="checks"] table.checks-open,
  body[data-module="checks"] table.checks-open tbody,
  body[data-module="checks"] table.checks-open td { display: block; }
  body[data-module="checks"] table.checks-open thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  body[data-module="checks"] table.checks-open tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "city since" "source source" "note note" "ticket ticket"; gap: var(--space-1) var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--line); }
  body[data-module="checks"] table.checks-open thead + tbody tr:first-child { border-top: 1px solid var(--line); }
  body[data-module="checks"] table.checks-open td { padding: 0; border: 0; overflow-wrap: break-word; }
  body[data-module="checks"] table.checks-open td.co-city { grid-area: city; font-weight: 600; }
  body[data-module="checks"] table.checks-open td.co-since { grid-area: since; color: var(--mute); }
  body[data-module="checks"] table.checks-open td.co-since::before { content: attr(data-label) " "; }
  body[data-module="checks"] table.checks-open td.co-source { grid-area: source; color: var(--ink); }
  body[data-module="checks"] table.checks-open td.co-note { grid-area: note; }
  body[data-module="checks"] table.checks-open td.co-note:empty { display: none; }
  body[data-module="checks"] table.checks-open td.co-ticket { grid-area: ticket; }
}