/* =====================================================================
   app-cards.css — Oxford Social team app: the card system for the
   EXISTING panels (toolbars, tables, figures, notices, pills, chips,
   content cards, feature boxes, native dialogs, inputs, buttons, modals).

   Spec: DESIGN-STAFF-APP.md §4 (built 2026-09-19). Loaded after app.css.
   Every rule is scoped `body.team-app.is-authed …` and OVERRIDES ONLY:
   no class is renamed, no node is wrapped, nothing here sets `display`
   on anything that can carry [hidden], nothing here touches .panel
   itself, .shell*, .rail*, .tabsheet*, .app-*, .hc* or .home__*.

   Tokens: consumes the --app-* custom properties app.css declares on
   body.team-app. Each use carries the spec value as a fallback so this
   file still renders correctly if app.css has not loaded; nothing is
   redefined. Radius 0 everywhere; nothing under 13px.
   ===================================================================== */


/* ---------------------------------------------------------------------
   §4.2 Toolbars — one recipe, never sticky
   --------------------------------------------------------------------- */
body.team-app.is-authed :is(.panel__bar, .rg-bar, .ts-bar, .rp-grainbar, .dy-head) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin: 0 0 var(--app-gap, 16px);
  padding: 12px 16px;
  min-height: 64px;
  background: var(--panel-c);
  border: 1px solid var(--line-c);
  border-radius: 0;
}
body.team-app.is-authed :is(.rg-bar__title, .ts-range__title, .dy-weeknav__title) {
  margin: 0;
  font: 400 22px/1 var(--font-display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-c);
}
body.team-app.is-authed :is(.rg-bar__range, .ts-range__sub, .dy-weeknav__range, .panel__status) {
  margin: 0;
  font: var(--app-t-small, 400 13px/1.4 var(--font-body));
  color: var(--text-c);
}
body.team-app.is-authed :is(.rg-bar__range, .ts-range__sub, .dy-weeknav__range) { margin: 4px 0 0; }
body.team-app.is-authed :is(.panel__actions, .rg-bar__tools, .ts-actions, .rp-actions) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
/* The timesheet's action row sits under its range bar rather than inside it. */
body.team-app.is-authed .ts-actions { justify-content: flex-end; margin: 0 0 var(--app-gap, 16px); }
/* Every control in a toolbar is a 44px target. Checkboxes and radios are
   left at their natural size — stretching them would only distort them. */
body.team-app.is-authed :is(.rg-arrow, .ts-arrow, .dy-weeknav__arrow, .dy-weeknav__today, .rg-select, .rg-date,
  .ts-select, .daynav__date, .rp-grain__btn, .panel__bar .btn, .panel__bar select,
  .panel__bar input:not([type="checkbox"]):not([type="radio"])) { min-height: 44px; }
/* My shifts is a two-column grid from 900px (staff.css 4181): the bar and
   the error keep spanning both columns and hand their spacing to the grid gap. */
@media (min-width: 900px) {
  body.team-app.is-authed .ms-panel > :is(.panel__bar, .panel__error) { grid-column: 1 / -1; margin-bottom: 0; }
}
/* The diary head stacks on a phone (staff.css 3556); the recipe's
   align-items must not re-centre its two halves. */
@media (max-width: 759px) {
  body.team-app.is-authed .dy-head { flex-direction: column; align-items: stretch; }
}
/* Narrow phones: the week/range steppers become a 3-column grid — arrow,
   title, arrow — with every other control on its own full-width row, so the
   arrows never strand on separate lines around a wrapped title. */
@media (max-width: 559px) {
  body.team-app.is-authed :is(.ts-nav, .rg-bar__nav, .dy-weeknav) {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    align-items: center;
    gap: 10px;
    width: 100%;
  }
  body.team-app.is-authed :is(.ts-nav, .rg-bar__nav, .dy-weeknav) > :nth-child(n + 4):not(.sr-only) { grid-column: 1 / -1; }
  body.team-app.is-authed :is(.ts-range, .rg-bar__week, .dy-weeknav__label) { min-width: 0; }
  body.team-app.is-authed :is(.rg-bar__title, .ts-range__title, .dy-weeknav__title) { font-size: 20px; overflow-wrap: anywhere; }
  body.team-app.is-authed .ts-custom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body.team-app.is-authed .ts-custom .inline-field { display: grid; gap: 4px; }
  body.team-app.is-authed :is(.rg-bar__tools, .ts-totals, .dy-totals) { width: 100%; }
  body.team-app.is-authed .rg-bar__tools > :is(.rg-select, .rg-btn) { flex: 1 1 140px; }
}

/* The Documents heading: eyebrow, then an Anton title. */
body.team-app.is-authed .docs-heading { margin: 0 0 var(--app-gap, 16px); }
body.team-app.is-authed :is(.docs-heading__eyebrow, .docs-person__eyebrow) {
  margin: 0 0 6px;
  font: var(--app-t-eyebrow, 700 13px/1.3 var(--font-body));
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-c);
}
body.team-app.is-authed .docs-heading h2 {
  margin: 0;
  font: 400 24px/1 var(--font-display);
  text-transform: uppercase;
  color: var(--ink-c);
}
body.team-app.is-authed .docs-heading p:last-child { margin: 8px 0 0; font-size: 15px; line-height: 1.5; color: var(--text-c); }

/* The restricted-screen band (Pay, Payslips, Reports): still amber-filled,
   now the head of a card, with the lede as the card's one box under it. */
body.team-app.is-authed .rp-band {
  min-height: 48px;
  margin: 0;
  padding: 8px 16px;
  gap: 10px 14px;
  border: 1px solid var(--accent-c);
  border-radius: 0;
}
body.team-app.is-authed .rp-band__tag { font: 400 17px/1 var(--font-display); letter-spacing: 0.06em; text-transform: uppercase; }
body.team-app.is-authed .rp-band__what { font-size: 15px; }
body.team-app.is-authed .rp-band__who { font-size: 13px; padding: 5px 9px; }
body.team-app.is-authed .rp-lede {
  max-width: none;
  margin: 0 0 var(--app-gap, 16px);
  padding: 12px 16px;
  background: var(--panel-c);
  border: 1px solid var(--line-c);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-c);
}
body.team-app.is-authed .rp-band + .rp-lede { border-top: 0; }


/* ---------------------------------------------------------------------
   §4.3 Tables
   --------------------------------------------------------------------- */
body.team-app.is-authed :is(.tbl-wrap, .rp-scroll, .ts-scroll, .rg-scroll, .ts-band__scroll, .wf-scroll, .rc-table-wrap) {
  background: var(--panel-c);
  border-radius: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--line-2-c) var(--bg-alt-c);
}
body.team-app.is-authed :is(.tbl-wrap, .rp-scroll, .ts-scroll, .wf-scroll, .rc-table-wrap) { border: 1px solid var(--line-c); }
/* Scrollers that already sit inside a bordered box keep the box's border
   (a second one would double it): the rota block, the cost band, the PAYE
   estimate and the per-person detail row. */
body.team-app.is-authed :is(.rg-scroll, .ts-band__scroll, .rp-estimate .rp-scroll) { border: 0; }
body.team-app.is-authed .rp-detail .rp-scroll { border: 1px solid var(--line-c); }
body.team-app.is-authed .wf-scroll table { min-width: 880px; }

/* .tbl — the generic hairline table (bookings, mailing, team, leave,
   events, the rate band). Amber 13px heads on the darker strip, 15px
   rows of at least 52px, no zebra, a wash on hover. */
body.team-app.is-authed .tbl { font-size: 15px; }
body.team-app.is-authed .tbl th {
  padding: 12px 16px;
  background: var(--bg-alt-c);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-c);
  border-bottom: 1px solid var(--line-2-c);
}
body.team-app.is-authed .tbl td {
  padding: 14px 16px;
  font-size: 15px;
  color: var(--text-c);
  border-bottom: 1px solid var(--line-c);
}
body.team-app.is-authed .tbl tr:hover td { background: var(--app-wash, rgba(245, 241, 232, 0.04)); }
/* Re-assert the cell rules the generic recipe would otherwise flatten. */
body.team-app.is-authed .rp-tbl tr.is-peak td,
body.team-app.is-authed .rp-tbl tr.rp-detail td,
body.team-app.is-authed .rp-tbl tr.rp-detail:hover td { background: var(--panel-c); }
body.team-app.is-authed .rp-tbl tfoot td,
body.team-app.is-authed .rp-tbl tfoot tr:hover td { background: var(--bg-alt-c); border-top: 1px solid var(--line-2-c); border-bottom: 0; }
body.team-app.is-authed .rp-warnrow td { padding-top: 0; }
body.team-app.is-authed .rp-detail .tbl td { padding: 8px 12px; font-size: 14px; }
body.team-app.is-authed .rate-band .tbl td:nth-child(2) { color: var(--ink-c); font-weight: 700; }
body.team-app.is-authed .tbl--team tr.is-archived td { color: var(--muted-c); }
/* The team table keeps its five actions on one line and scrolls sideways
   instead: five 44px links wrapping into three rows made every row 170px. */
body.team-app.is-authed .tbl--team { min-width: 960px; }
body.team-app.is-authed .tbl--team .cell-actions { flex-wrap: nowrap; gap: 0 14px; }
body.team-app.is-authed .tbl .cell-contact,
body.team-app.is-authed .tbl .cell-notes,
body.team-app.is-authed .cell-person__mail,
body.team-app.is-authed .state__sub { font-size: 13px; }

/* The timesheet sheet: only the inline padding is normalised; its Anton
   figures, the expand rows and the caret cell are untouched. */
body.team-app.is-authed .ts-sheet th { padding: 12px 16px; }
body.team-app.is-authed .ts-sheet td { padding-inline: 16px; }
body.team-app.is-authed .ts-sheet .ts-caretcell { padding: 8px 6px; }
body.team-app.is-authed .ts-sheet tbody tr.ts-row:hover td { background: var(--app-wash, rgba(245, 241, 232, 0.04)); }
body.team-app.is-authed .ts-sheet tbody tr.ts-row.is-open td { background: var(--panel-c); }

/* The report catalogue and the till-CSV preview never had a table recipe. */
body.team-app.is-authed :is(.rc-table, .sales-import__table) th {
  position: sticky;
  top: 0;
  padding: 12px 16px;
  background: var(--bg-alt-c);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-c);
  border-bottom: 1px solid var(--line-2-c);
}
body.team-app.is-authed .sales-import__table th { position: static; }
body.team-app.is-authed :is(.rc-table, .sales-import__table) td {
  padding: 14px 16px;
  font-size: 15px;
  color: var(--text-c);
  border-bottom: 1px solid var(--line-c);
}
body.team-app.is-authed :is(.rc-table, .sales-import__table) tr:hover td { background: var(--app-wash, rgba(245, 241, 232, 0.04)); }

body.team-app.is-authed :is(.rp-num, .ts-num, .cell-date, .rp-when, .ts-time, .ts-worked) { font-variant-numeric: tabular-nums; }

/* The rota grid: the block is a card, the day cells stay on the page
   colour so the person and total columns read as its margins. */
body.team-app.is-authed .rg-block { background: var(--panel-c); border: 1px solid var(--line-c); border-radius: 0; }
body.team-app.is-authed .rg-block__head { min-height: 48px; background: transparent; border-bottom: 1px solid var(--line-c); }
body.team-app.is-authed .rg-th { min-height: 48px; }
body.team-app.is-authed .rg-cell:not(.is-away) { background: var(--bg-c); }


/* ---------------------------------------------------------------------
   §4.4 Figures — Anton, tabular, ink; amber 13px labels
   --------------------------------------------------------------------- */
body.team-app.is-authed :is(.stat__value, .rp-card__value, .rg-bar__big, .ts-total__value, .dy-total__value, .ms-hours__big, .ms-card__count) {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;            /* every Anton string is uppercase: "NOT SET", "MONTHLY" */
  color: var(--ink-c);
  font-variant-numeric: tabular-nums;
}
body.team-app.is-authed .stat__value { font-size: 28px; }          /* was Playfair 1.7rem */
body.team-app.is-authed .rp-card__value { font-size: 44px; }
body.team-app.is-authed :is(.rg-bar__big, .ts-total__value) { font-size: 26px; }
body.team-app.is-authed .dy-total__value { font-size: 34px; }
body.team-app.is-authed .ms-hours__big { font-size: 52px; line-height: 0.96; }
body.team-app.is-authed .ms-card__count { font-size: 20px; }
body.team-app.is-authed .rp-card--key .rp-card__value { color: var(--accent-c); }
@media (max-width: 759px) {
  body.team-app.is-authed .rp-card__value { font-size: 36px; }
  body.team-app.is-authed .ts-total__value { font-size: 22px; }
}
@media (max-width: 559px) {
  body.team-app.is-authed .ms-hours__big { font-size: 34px; line-height: 1; }
}
body.team-app.is-authed :is(.stat__label, .rp-card__label, .rg-bar__label, .ts-total__label, .dy-total__label, .ms-hours__label) {
  font: var(--app-t-label, 700 13px/1.3 var(--font-body));
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-c);
}
body.team-app.is-authed .stat__sub { font-size: 13px; color: var(--text-c); }
body.team-app.is-authed .stats {
  gap: 1px;
  background: var(--line-c);
  border: 1px solid var(--line-c);
  border-radius: 0;
}
body.team-app.is-authed .stat { padding: 16px 18px; background: var(--panel-c); }
/* Playfair retired everywhere it was left: big numerals and day names are Anton. */
body.team-app.is-authed :is(.day__hh, .bk-card__party, .shift-card__day, .clock__label) { font-family: var(--font-display); font-weight: 400; }


/* ---------------------------------------------------------------------
   §4.5 Notices, empties, pills, chips, cards
   --------------------------------------------------------------------- */
/* A notice is a two-column grid: the glyph square, then everything the
   notice already contains stacked in the second column. No markup changes;
   a plain notice (no variant) keeps a single column and no glyph. */
body.team-app.is-authed .notice {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  padding: 16px 18px;
  background: var(--panel-c);
  border: 1px solid var(--line-c);
  border-left-width: 3px;
  border-radius: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-c);
}
body.team-app.is-authed .notice:empty { display: none; }
body.team-app.is-authed .notice > * { grid-column: 1; min-width: 0; }
body.team-app.is-authed .notice::before {
  content: none;
  grid-column: 1;
  grid-row: 1;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  font: 400 15px/20px var(--font-display);
  text-align: center;
  color: var(--on-accent-c);
}
body.team-app.is-authed :is(.notice--bad, .notice--warn, .notice--good, .notice--ok) { grid-template-columns: 20px minmax(0, 1fr); }
body.team-app.is-authed :is(.notice--bad, .notice--warn, .notice--good, .notice--ok) > * { grid-column: 2; }
body.team-app.is-authed .notice--bad { border-left-color: var(--bad); }
body.team-app.is-authed .notice--bad::before { content: "!"; background: var(--bad); }
body.team-app.is-authed .notice--warn { border-left-color: var(--accent-c); }
body.team-app.is-authed .notice--warn::before { content: "!"; background: var(--accent-c); }
body.team-app.is-authed :is(.notice--good, .notice--ok) { border-left-color: var(--ok); }
body.team-app.is-authed :is(.notice--good, .notice--ok)::before { content: "\2713"; background: var(--ok); }
body.team-app.is-authed .notice--plain { border-left-width: 1px; }
body.team-app.is-authed .notice p + p { margin-top: 8px; }
body.team-app.is-authed .notice .todo { margin: 8px 0 0; padding-left: 18px; font-size: 15px; color: var(--text-c); }
body.team-app.is-authed .notice__sub,
body.team-app.is-authed .notice .muted { font-size: 13px; color: var(--text-c); }
/* The panel error keeps its 44px Retry on the right of the message. */
body.team-app.is-authed .panel__error { margin: 0 0 var(--app-gap, 16px); }
body.team-app.is-authed .panel__error .notice { grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; }
body.team-app.is-authed .panel__error .notice > .btn { grid-column: 3; grid-row: 1; margin: 0; }
@media (max-width: 559px) {
  body.team-app.is-authed .panel__error .notice { grid-template-columns: 20px minmax(0, 1fr); align-items: start; }
  body.team-app.is-authed .panel__error .notice > .btn { grid-column: 2; grid-row: auto; justify-self: start; margin-top: 12px; }
}

/* Empties: a filled card, never a dashed hairline or a lone grey line. */
body.team-app.is-authed :is(.panel__empty, .rp-loading) {
  margin: 0;
  padding: 40px 16px;
  background: var(--panel-c);
  border: 1px solid var(--line-c);
  text-align: center;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-c);
}
body.team-app.is-authed .panel__empty + .panel__empty,
body.team-app.is-authed .tbl-wrap + .panel__empty { margin-top: var(--app-gap, 16px); }
/* Inside a card the empty sits on the page colour, so it never reads as a card in a card. */
body.team-app.is-authed :is(.lv-card, .ms-card, .rp-estimate, .folder, .clist, .evt, .won) .panel__empty { padding: 24px 16px; background: var(--bg-c); }
body.team-app.is-authed .rp-estimate .panel__empty { border: 0; }
/* The timesheet's empty week is one card: the line, the note and the button. */
body.team-app.is-authed .ts-empty {
  margin: 0 0 var(--app-gap, 16px);
  padding: 24px 16px 28px;
  background: var(--panel-c);
  border: 1px solid var(--line-c);
  text-align: center;
}
body.team-app.is-authed .ts-empty .panel__empty { padding: 12px 0 8px; background: transparent; border: 0; }
body.team-app.is-authed .ts-empty .ts-note { margin: 0 auto; max-width: 60ch; font-size: 14px; color: var(--text-c); }
body.team-app.is-authed .rg-empty { padding: 48px 24px; background: var(--panel-c); border: 1px solid var(--line-c); }
body.team-app.is-authed .rg-empty__title { font-size: 30px; line-height: 1; text-transform: uppercase; }
body.team-app.is-authed .ms-empty__title { font-size: 26px; line-height: 1; text-transform: uppercase; }
body.team-app.is-authed :is(.dy-col__empty, .evt__empty, .docs-people__empty, .docs-person__empty, .cd-empty, .ms-empty__foot) { color: var(--text-c); }
body.team-app.is-authed .docs-person__empty { border-style: solid; }

/* Pills and chips: 13px words, square corners, 44px where they are pressed. */
body.team-app.is-authed .pill {
  padding: 3px 8px;
  border-radius: 0;
  font-size: 13px;
  letter-spacing: 0.12em;
}
body.team-app.is-authed .ms-chip { min-height: 44px; }
body.team-app.is-authed .filter-chip { min-height: 44px; padding: 0 14px; font-size: 14px; }
body.team-app.is-authed .filter-chip.is-on { background: var(--ink-c); border-color: var(--ink-c); color: var(--bg-c); }
body.team-app.is-authed :is(.won-chip, .rg-drafts, .ts-chip, .docs-person__sections span, .docs-person__flags span, .cd-item__access, .bk-card__table) { font-size: 13px; border-radius: 0; }

/* Existing content cards → the one card recipe. */
body.team-app.is-authed :is(.ms-card, .ms-next, .lv-card, .logday, .clist, .doc, .evt, .won-row, .ts-card, .bk-card, .folder,
  .rate-band, .team-chase, .rg-across, .rp-estimate, .rp-card, .rg-weekly, .ts-look, .dy-band, .lv, .shift-card, .payslip, .chart, .clock) {
  background: var(--panel-c);
  border: 1px solid var(--line-c);
  border-radius: 0;
  box-shadow: none;
}
body.team-app.is-authed :is(.doc, .won-row, .clist, .team-chase, .lv, .logday) { padding: 16px 18px; }
body.team-app.is-authed .bk-card { padding: 16px; }
body.team-app.is-authed .won-row { min-height: 48px; }
/* …and the marks each card carried on top of the recipe, kept. */
body.team-app.is-authed .ms-next { border-color: var(--accent-c); }
body.team-app.is-authed .rp-estimate { border-color: var(--bad); }
body.team-app.is-authed .rp-card--key { border-color: var(--accent-c); }
body.team-app.is-authed .rate-band { border-top: 3px solid var(--accent-c); }
body.team-app.is-authed .team-chase { border-left: 3px solid var(--bad); }
body.team-app.is-authed .ts-look { border-left: 4px solid var(--accent-c); }
body.team-app.is-authed .rg-weekly { border-left: 4px solid var(--accent-c); }
body.team-app.is-authed .rg-weekly.is-off { border-left-style: dashed; border-left-color: var(--muted-c); }
body.team-app.is-authed .won-row { border-left-width: 3px; }
body.team-app.is-authed .won-row.is-public { border-left-color: var(--accent-c); }
body.team-app.is-authed .lv-card--pending { border-left: 3px solid var(--app-ink-line, rgba(245, 241, 232, 0.34)); }
body.team-app.is-authed .folder.is-incomplete { border-left: 3px solid var(--bad); }
body.team-app.is-authed .bk-card--seated { border-color: var(--ink-c); }
body.team-app.is-authed .ts-card--wait { border-color: var(--accent-c); }
body.team-app.is-authed .dy-band--stale { border-color: var(--bad); }
body.team-app.is-authed .shift-card.is-today { border-color: var(--ink-c); border-left-width: 3px; }
body.team-app.is-authed .clock { border-left: 3px solid var(--muted-c); }
body.team-app.is-authed .clock.is-on { border-left-color: var(--ok); }

/* Feature boxes (workforce, daily tasks, handover, report catalogue,
   company documents, attachments, scheduling, labour graphs, till import,
   attendance, shift offers): squared, hairlined, on the card colour. */
body.team-app.is-authed :is(.wf-card, .dtl-section, .dtl-card, .eod-section, .rc-report-catalogue, .cd-root, .ops-attachments,
  .ops-attachments__item, .schedule-library, .schedule-insights, .lhg, .lag, .sales-import, .attendance-status,
  .ms-offers, .rg-offers, .shift-offer-card, .rc-fieldset, .dtl-weekdays, .cd-form, .cd-item, .sales-import__summary) {
  background: var(--panel-c);
  border: 1px solid var(--line-c);
  border-radius: 0;
  box-shadow: none;
}
body.team-app.is-authed .attendance-status { color: var(--ink-c); font-size: 15px; }
body.team-app.is-authed .attendance-status--warn { border-color: var(--accent-c); background: var(--app-tint, rgba(232, 163, 61, 0.08)); }
body.team-app.is-authed .attendance-break { color: var(--accent-c); }
body.team-app.is-authed :is(.dtl-badge, .eod-badge, .lhg-position, .schedule-state, .chip__tasks, .schedule-template) { border-radius: 0; font-size: 13px; }
body.team-app.is-authed :is(.lhg-dot, .lhg-track, .lhg-stack, .lhg-target, .lag-day__bars, .lag-bar, .lag-key::before, .schedule-hour i, .schedule-meter) { border-radius: 0; }
body.team-app.is-authed .wf-nav button[aria-pressed="true"] { background: var(--accent-c); border-color: var(--accent-c); color: var(--on-accent-c); }
body.team-app.is-authed .wf-warning { color: var(--accent-c); }
body.team-app.is-authed :is(.dtl-status.is-error, .eod-status--bad, .rc-status.is-error, .cd-status.is-error, .cd-danger, .sales-import__status.is-error) { color: var(--bad); }
body.team-app.is-authed .eod-badge--complete { color: var(--ok); }
body.team-app.is-authed .docs-person__flags .is-warn { color: var(--accent-c); }
body.team-app.is-authed :is(.dtl-muted, .dtl-meta, .eod-help, .eod-meta) { opacity: 1; color: var(--text-c); }
body.team-app.is-authed :is(.schedule-library p, .schedule-help, .schedule-auto, .schedule-metrics span, .schedule-day, .schedule-total-label,
  .schedule-preview-note, .schedule-recipient small, .lhg-help, .lhg-label span, .lhg-comparison, .lag-help, .lag-day__note, .lag-legend,
  .rp-trends__period, .rp-trends__detail, .rp-trends__gap) { font-size: 13px; color: var(--text-c); }
body.team-app.is-authed .schedule-hour { font-size: 13px; }
body.team-app.is-authed .schedule-template.is-selected { outline-color: var(--accent-c); }
body.team-app.is-authed .schedule-state.is-changed { color: var(--accent-c); }
body.team-app.is-authed .docs-groups__tab { min-height: 44px; border-radius: 0; }
body.team-app.is-authed .docs-search input { border-radius: 0; }
body.team-app.is-authed .schedule-metrics strong { font: 400 28px/1 var(--font-display); color: var(--ink-c); font-variant-numeric: tabular-nums; }
body.team-app.is-authed .wf-form label.field {
  gap: 8px;
  font: var(--app-t-label, 700 13px/1.3 var(--font-body));
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-c);
}
body.team-app.is-authed .wf-form input[type="color"] { min-height: 44px; padding: 4px; background: var(--bg-c); border: 1px solid var(--line-2-c); border-radius: 0; }
body.team-app.is-authed .wf-form input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent-c); }

/* Headings inside the panels and their feature boxes: Anton stays, every
   string goes uppercase, and the sizes come down from the public headline
   scale to a dashboard's. */
body.team-app.is-authed .panel :is(h2, h3, h4) { text-transform: uppercase; color: var(--ink-c); }
body.team-app.is-authed :is(.wf-tools h2, #workforceBody > h2, .eod-section h2, .mailing__intro h2, .mailing__campaigns h2, .won__intro h2) {
  margin: 0 0 8px;
  font-size: 30px;
  line-height: 0.98;
  letter-spacing: 0.01em;
}
body.team-app.is-authed .wf-tools h2 { margin: 0; }
body.team-app.is-authed :is(.dtl-section h3, .eod-section h3, .rc-report-catalogue h3, .cd-library h3, .ops-attachments h3, .schedule-library h3,
  .schedule-insights h3, .ms-offers h3, .rg-offers h3, .evt__head h2, .chart__head h3, .payslip__head h3, .docs-person__head h3, .lv-card h3:not(.lv-card__title)) {
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.01em;
}
body.team-app.is-authed :is(.wf-card h3, .dtl-card h4, .cd-root h4, .clist__head h3, .won-row__title, .mailing__campaigns h3, .ms-offers h4, .docs-people__head h3, .docs-person__section-head h4) {
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.01em;
}
body.team-app.is-authed :is(.dtl-section, .eod-section, .rc-report-catalogue, .ops-attachments) :is(h2, h3) { margin-bottom: 10px; }
body.team-app.is-authed .mailing__transport:empty { display: none; }
body.team-app.is-authed .mailing__intro { margin-bottom: var(--app-gap, 16px); }
body.team-app.is-authed :is(.mailing__intro p, .mailing__campaigns p, .won__lead, .cd-intro, .rc-intro, .eod-help, .schedule-help) { font-size: 15px; line-height: 1.5; color: var(--text-c); }
/* Folder rows: the name sits by the disclosure arrow, the pills at the far end. */
body.team-app.is-authed .folder__summary { justify-content: flex-start; gap: 8px 14px; min-height: 64px; }
body.team-app.is-authed .folder__pills { margin-left: auto; }
body.team-app.is-authed .folder__name { font-size: 16px; }

/* Native dialogs: the rota tools and the workforce record editor. */
body.team-app.is-authed #scheduleToolsDialog,
body.team-app.is-authed #workforceDialog {
  /* Centred in the viewport (a stylesheet elsewhere zeroes the margin, which
     pins the open dialog to the top-left corner over the sidebar). */
  margin: auto;
  max-height: calc(100dvh - 32px);
  overflow: auto;
  background: var(--panel-c);
  color: var(--ink-c);
  border: 1px solid var(--line-2-c);
  border-radius: 0;
  box-shadow: none;
}
body.team-app.is-authed #scheduleToolsDialog::backdrop,
body.team-app.is-authed #workforceDialog::backdrop { background: var(--app-scrim, rgba(0, 0, 0, 0.72)); }
body.team-app.is-authed .wf-form .wf-tools { background: var(--panel-c); }
body.team-app.is-authed :is(#scheduleToolsDialog, #workforceDialog) h2 {
  margin: 0 0 18px;
  font: 400 30px/1 var(--font-display);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink-c);
}


/* ---------------------------------------------------------------------
   §4.6 Forms and buttons
   --------------------------------------------------------------------- */
body.team-app.is-authed :is(
  .field input, .field select, .field textarea,
  .rg-date, .rg-select, .ts-select, .daynav__date,
  .inline-field select, .inline-field input,
  .attendance-pin-action select,
  .wf-form :is(input, select, textarea),
  #workforceBody > input,
  .dtl-field :is(input, select, textarea), .dtl-unlock textarea, .dtl-comment-form textarea,
  .eod-field :is(input, select, textarea), .eod-unlock textarea,
  .cd-form input, .rc-controls select, .rc-dates input,
  .ops-attachments__controls select,
  .sales-import__fields :is(input, select),
  .mailing__form :is(input, textarea),
  .docs-search input, .rp-trends__select,
  .docs__add select, .logday__add :is(select, textarea), .logday__sales input, .tasks__add input, .tasks__apply select,
  .hrs-cell input, .hrs-date input
):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="hidden"]) {
  min-height: 48px;
  padding: 0 14px;
  background: var(--bg-c);
  border: 1px solid var(--line-2-c);
  border-radius: 0;
  color: var(--ink-c);
  font: inherit;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  color-scheme: dark;
  transition: border-color var(--app-dur-1, 120ms) ease;
}
body.team-app.is-authed :is(
  .field textarea, .wf-form textarea, .dtl-field textarea, .dtl-unlock textarea, .dtl-comment-form textarea,
  .eod-field textarea, .eod-unlock textarea, .mailing__form textarea, .logday__add textarea
) { min-height: 96px; padding: 12px 14px; line-height: 1.5; resize: vertical; }
body.team-app.is-authed .logday__add textarea { min-height: 64px; }
body.team-app.is-authed :is(.hrs-cell input, .hrs-date input) { min-height: 44px; padding: 0 10px; }
body.team-app.is-authed :is(
  .field input, .field select, .field textarea, .rg-date, .rg-select, .ts-select, .daynav__date,
  .inline-field select, .inline-field input, .wf-form :is(input, select, textarea), #workforceBody > input,
  .dtl-field :is(input, select, textarea), .eod-field :is(input, select, textarea), .cd-form input,
  .rc-controls select, .rc-dates input, .ops-attachments__controls select, .sales-import__fields :is(input, select),
  .mailing__form :is(input, textarea), .docs-search input, .rp-trends__select
):focus { border-color: var(--accent-c); outline: none; }
body.team-app.is-authed :is(
  .field input, .field select, .field textarea, .rg-date, .rg-select, .ts-select, .daynav__date,
  .inline-field select, .inline-field input, .wf-form :is(input, select, textarea), #workforceBody > input,
  .dtl-field :is(input, select, textarea), .eod-field :is(input, select, textarea), .cd-form input,
  .rc-controls select, .rc-dates input, .ops-attachments__controls select, .sales-import__fields :is(input, select),
  .mailing__form :is(input, textarea), .docs-search input, .rp-trends__select
):focus-visible { border-color: var(--accent-c); outline: 2px solid var(--accent-c); outline-offset: 2px; }
/* The shift editor's 52px fields (staff.css .rg-form) stay as designed. */
body.team-app.is-authed .rg-form .field :is(input, select) { min-height: 52px; padding: 0 13px; font-size: 16px; }
body.team-app.is-authed .rg-form .field textarea { min-height: 96px; padding: 12px 13px; font-size: 16px; }
/* Phones: 16px is the floor that stops iOS zooming the page on focus (pwa.css). */
@media (max-width: 760px) {
  body.team-app.is-authed :is(input, select, textarea) { font-size: max(16px, 1em); }
}
body.team-app.is-authed .field select option { background: var(--panel-c); color: var(--ink-c); }

/* Labels: the 13px amber label everywhere a field has one. */
body.team-app.is-authed :is(.field label, .inline-field, .field__label, .mailing__form label, .rc-controls label, .rc-dates label,
  .sales-import__fields label, .dtl-field > span, .eod-field > span, .attendance-pin-action label) {
  font: var(--app-t-label, 700 13px/1.3 var(--font-body));
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-c);
}
/* Section titles inside the existing cards take the same label: amber 13px,
   never grey — they head content, they are not meta. */
body.team-app.is-authed :is(.lv-card__title, .docs__title, .checks__title, .tasks__title, .folder__subhead, .day__closedtitle,
  .upcoming__summary, .payslip__hours summary) {
  font: var(--app-t-label, 700 13px/1.3 var(--font-body));
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-c);
}
body.team-app.is-authed .lv-card__title { margin-bottom: 14px; }
body.team-app.is-authed .field__optional { text-transform: none; letter-spacing: 0.02em; font-weight: 400; color: var(--muted-c); }
body.team-app.is-authed .field__hint { font-size: 13px; color: var(--text-c); }
body.team-app.is-authed .inline-field { gap: 8px; }
body.team-app.is-authed .inline-field input[type="checkbox"] { width: 20px; height: 20px; margin: 0; accent-color: var(--accent-c); }

/* Buttons. .btn is unchanged; the small variant becomes a real 44px target. */
body.team-app.is-authed .btn--sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  font-size: 13px;
  letter-spacing: 0.12em;
}
body.team-app.is-authed .linkish { display: inline-flex; align-items: center; min-height: 44px; }
/* A link inside running text stays inline; its target grows through padding
   the line box does not see. */
body.team-app.is-authed :is(p, .rp-card__note, .lognote, .task__tools, .rg-publish__sub, .ts-band__foot, .rp-estimate__csvnote) .linkish:not(.ms-quiet) {
  display: inline;
  min-height: 0;
  padding-block: 15px;
  margin-block: -15px;
}
body.team-app.is-authed :is(.task__tools .linkish, .lognote .linkish, .cell-actions .linkish, .cell-tools .linkish) { font-size: 14px; }
body.team-app.is-authed .modal__close { width: 44px; height: 44px; border-radius: 0; }
body.team-app.is-authed .tbl .cell-actions .btn + .btn { margin-left: 0; }
body.team-app.is-authed .tbl .cell-actions { gap: 6px; }


/* ---------------------------------------------------------------------
   §4.7 Modals
   --------------------------------------------------------------------- */
@keyframes app-modal-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
body.team-app.is-authed .modal { padding: 16px; background: var(--app-scrim, rgba(0, 0, 0, 0.72)); }
body.team-app.is-authed .modal__panel {
  padding: 28px 24px;
  background: var(--panel-c);
  border: 1px solid var(--line-2-c);
  border-radius: 0;
  box-shadow: none;
}
body.team-app.is-authed .modal:not([hidden]) .modal__panel { animation: app-modal-in var(--app-dur-2, 200ms) var(--app-ease, cubic-bezier(0.2, 0.7, 0.2, 1)) both; }
/* Dialog titles: Anton, uppercase, sized for a dialog rather than a landing
   page (styles.css h2 is the 40–64px public headline). The shift editor and
   the PIN dialog size their own. */
body.team-app.is-authed .modal__panel > .eyebrow { margin: 0 52px 8px 0; }
body.team-app.is-authed .modal__panel h2:not(.rg-modal__title):not(#pinModalTitle) {
  margin: 0 0 20px;
  padding-right: 52px;
  font: 400 clamp(26px, 4vw, 36px)/1 var(--font-display);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  color: var(--ink-c);
}
body.team-app.is-authed .modal__panel .form-grid { gap: 18px 20px; }
/* The two panels that manage their own padding (staff.css 2026-09-15 Save
   row fix and the shift editor) keep it. */
body.team-app.is-authed .modal__panel.rg-modal { padding: 0; }
body.team-app.is-authed .modal__panel:has(.form-foot) { padding-bottom: 0; }
body.team-app.is-authed .form-foot { background: var(--panel-c); }
@media (max-width: 760px) {
  body.team-app.is-authed .modal { padding: var(--app-safe-t, env(safe-area-inset-top, 0px)) 0 var(--app-safe-b, env(safe-area-inset-bottom, 0px)); align-items: stretch; }
  body.team-app.is-authed .modal__panel { max-width: none; max-height: none; height: 100%; padding: 24px 20px; border: 0; }
  body.team-app.is-authed .modal__panel.rg-modal { padding: 0; }
  body.team-app.is-authed .modal__panel:has(.form-foot) { padding-bottom: 0; }
  body.team-app.is-authed .modal__close { top: 12px; right: 12px; }
}


/* ---------------------------------------------------------------------
   §4.8 Panel notes
   --------------------------------------------------------------------- */
/* Bookings */
body.team-app.is-authed .dy-band { min-height: 48px; margin: 0 0 var(--app-gap, 16px); padding: 10px 16px; gap: 10px 20px; }
body.team-app.is-authed .dy-band__title { font-size: 20px; }
body.team-app.is-authed .dy-col__head { min-height: 56px; }
body.team-app.is-authed .dy-item { min-height: 44px; background: var(--bg-alt-c); }
body.team-app.is-authed .dy-item__kicker { font-size: 13px; letter-spacing: 0.1em; }
body.team-app.is-authed :is(.dy-item__note, .dy-col__gone, .dy-item__clash, .bk-card__clash) { font-size: 13px; }
body.team-app.is-authed .dy-legend { margin-top: 12px; }
body.team-app.is-authed .upcoming { margin-top: var(--app-gap, 16px); padding-top: var(--app-gap, 16px); }
body.team-app.is-authed .upcoming__summary { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 8px; font-size: 13px; color: var(--text-c); }
body.team-app.is-authed .daynav__date { font-family: var(--font-body); }
/* Rota */
body.team-app.is-authed .rg-chip__tasks { font-size: 13px; }
/* The workspace is a size container, so the Popular Shifts column shares
   the row with the week grid only when both fit. The grid's rows are
   196px + 7 x 120px + 92px = 1128px before they scroll (staff.css .rg-row);
   with the block's two 1px borders, the 16px gap and the 200px column the
   pair needs 1346px. Below that the library stacks above the grid as one
   toolbar row (title, templates, help, actions), so Mon-Sun and Total stay
   on one screen at 1440 with the sidebar open (1136px), on the narrow rail
   (1312px) and across the tablet range. <=1000px keeps scheduling.css's own
   stacked layout: this only changes 1001px and up. */
body.team-app.is-authed .schedule-workspace {
  gap: var(--app-gap, 16px);
  container: rota-workspace / inline-size;
}
/* The grid takes the whole row whenever the library is hidden (canEdit false). */
body.team-app.is-authed .schedule-library[hidden] + .rg { grid-column: 1 / -1; }
@media (min-width: 1001px) {
  @container rota-workspace (max-width: 1349px) {
    body.team-app.is-authed .schedule-workspace > :is(.schedule-library, .rg) { grid-column: 1 / -1; }
    body.team-app.is-authed .schedule-library {
      position: static;
      min-height: 64px;
      padding: 12px 16px;
    }
    /* Only a visible library becomes a flex row: the global [hidden]{display:none} keeps winning. */
    body.team-app.is-authed .schedule-library:not([hidden]) {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 12px 16px;
    }
    body.team-app.is-authed .schedule-library > :is(h3, p, .schedule-tools) { margin: 0; }
    body.team-app.is-authed .schedule-library > p { flex: 1 1 240px; min-width: 0; }
    body.team-app.is-authed .schedule-library > .schedule-tools { flex: 0 0 auto; margin-left: auto; }
    body.team-app.is-authed .schedule-template-list {
      display: flex;
      flex: 3 1 320px;
      min-width: 0;
      gap: 8px;
      overflow-x: auto;
      scrollbar-width: thin;
      scrollbar-color: var(--line-2-c) var(--bg-alt-c);
    }
    body.team-app.is-authed .schedule-template-list:empty { display: none; }
    body.team-app.is-authed .schedule-template { flex: 0 0 auto; width: auto; min-width: 155px; margin: 0; }
  }
}
/* Workforce */
body.team-app.is-authed .wf-layout { grid-template-columns: 200px minmax(0, 1fr); gap: var(--app-gap, 16px); padding: 0; }
body.team-app.is-authed .wf-nav { top: calc(var(--app-top, 64px) + 16px); }
body.team-app.is-authed .wf-card { padding: 20px; }
body.team-app.is-authed .wf-card dl { font-size: 14px; }
body.team-app.is-authed .wf-card dt { color: var(--text-c); }
body.team-app.is-authed #workforceBody > input { width: 100%; margin: 0 0 var(--app-gap, 16px); }
@media (max-width: 760px) {
  body.team-app.is-authed .wf-layout { grid-template-columns: minmax(0, 1fr); }
  body.team-app.is-authed .wf-nav { position: static; }
}
/* Team */
body.team-app.is-authed .team-filters { margin: 0 0 var(--app-gap, 16px); }
body.team-app.is-authed .team-chase { margin: 0 0 var(--app-gap, 16px); }
/* Documents / Log / Events / Mailing */
body.team-app.is-authed .logday { margin-bottom: var(--app-gap, 16px); }
body.team-app.is-authed .logday__date { font-family: var(--font-display); font-size: 20px; text-transform: uppercase; }
body.team-app.is-authed .mailing__form label { display: block; }
body.team-app.is-authed .mailing__transport { padding: 12px 16px; background: var(--panel-c); border: 1px solid var(--line-c); font-size: 15px; }
body.team-app.is-authed .mailing__preview { border-radius: 0; }
body.team-app.is-authed .won-switch,
body.team-app.is-authed .won-switch__track,
body.team-app.is-authed .won-switch__track::after { border-radius: 0; }
body.team-app.is-authed .won-switch { min-height: 44px; }
body.team-app.is-authed .docs-metric { border-radius: 0; }
body.team-app.is-authed .docs-workspace { border-radius: 0; }


/* ---------------------------------------------------------------------
   Housekeeping: the radius-0 rule and the 13px floor, applied to the
   leftovers the recipes above do not reach.
   --------------------------------------------------------------------- */
body.team-app.is-authed :is(.tbl-wrap, .shot, .shots__item, .rota-wrap, .rota__add, .chip, .rota__leave, .chart__bar,
  .docs-groups__tab, .docs-search input, .skel-block, .payslip, .lv, .evt, .folder, .clist, .logday, .bk-card,
  .lv-card, .shift-card, .clock, .chart, .won-row, .won-chip, .bk-card__table, .pill, .daynav__date, .stats) { border-radius: 0; }

body.team-app.is-authed :is(
  .daybar__tick, .day__covers, .day__closedtitle, .bk-card__ref, .bk-card__dwell, .bk-card__contact,
  .mailing__exceptions, .evt__when, .won__count, .won-row__date, .won-row__meta, .won-row__by, .won-switch__sub,
  .shift-card__hours, .shift-card__break, .checks__title, .checks__count, .check__when, .clock__note, .clock__actions .btn,
  .docs-metric span, .docs-search, .docs-people__head span, .docs-person-link__meta, .docs-person__email,
  .docs-person__missing, .docs-person__section-head span, .docs-person__photos p, .docs-privacy p,
  .folder__email, .folder__subhead, .shots__date, .shots__time, .docs__title, .doc__kind, .doc__meta, .filerows dt,
  .chip__role, .chip__time, .tasks__title, .task__source, .task__done, .payslip__rate, .payrows__note, .payslip__hours summary,
  .chart__figure, .chart__key, .ts-flag, .lv-card__title, .lv__note, .lv-basis, .logday__figures, .logday__hint, .lognote__who,
  .rp-over, .rp-detail__label, .hrs-toggle__state, .hrs-cell__label, .rg-chip__tasks, .cd-item__meta, .signin-state,
  .schedule-template small
) { font-size: 13px; }


/* ---------------------------------------------------------------------
   §4.1 Canvas — phone: tables bleed to the screen edge
   --------------------------------------------------------------------- */
@media (max-width: 760px) {
  /* Only a scroller that sits directly on the canvas bleeds; one nested in
     a card (an event, the estimate, a payslip, a folder) keeps the card's
     edges. The rota block and the cost band bleed as whole boxes so their
     own scrollers go with them. */
  body.team-app.is-authed :is(.tbl-wrap, .rp-scroll, .ts-scroll, .wf-scroll):not(:is(.evt, .rp-estimate, .rp-detail, .payslip,
    .folder, .lv-card, .rate-band, .ts-band, .rg-block, .wf-card, .modal, .docs-workspace, .ms-card) *) {
    margin-inline: calc(-1 * var(--app-pad, 16px));
    border-left: 0;
    border-right: 0;
  }
  body.team-app.is-authed :is(.rg-block, .ts-band) {
    margin-inline: calc(-1 * var(--app-pad, 16px));
    border-left: 0;
    border-right: 0;
  }
  body.team-app.is-authed .rp-estimate { margin-inline: calc(-1 * var(--app-pad, 16px)); border-left: 0; border-right: 0; }
  body.team-app.is-authed .tbl-wrap .tbl { min-width: 640px; }
  body.team-app.is-authed .team-filters { margin-inline: calc(-1 * var(--app-pad, 16px)); padding-inline: var(--app-pad, 16px); }
  body.team-app.is-authed .team-filters__group { scroll-padding-inline: var(--app-pad, 16px); }
}

/* The file pickers (document upload rows, the till CSV import): the input
   recipe skips [type=file] on purpose, but the picker should still sit level
   with the select and the button beside it, in the same box. */
body.team-app.is-authed :is(.panel, .modal) input[type="file"] {
  min-height: 48px;
  padding: 11px 14px;
  background: var(--bg-c);
  border: 1px solid var(--line-2-c);
  color: var(--text-c);
  font: 400 15px/1.4 var(--font-body);
  border-radius: 0;
}
body.team-app.is-authed :is(.panel, .modal) input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--ink-c);
  color: var(--ink-c);
  font: 400 13px/1.2 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 0;
  cursor: pointer;
}
body.team-app.is-authed :is(.panel, .modal) input[type="file"]:focus-visible { outline: 2px solid var(--accent-c); outline-offset: 2px; }

/* The week grid needs 1128px plus the block borders; with the wide sidebar
   and 28px gutters a 1440px screen with a page scrollbar is 9px short, so
   the Rota panel takes tighter gutters on desktops up to 1500px. */
@media (min-width: 1200px) and (max-width: 1500px) {
  body.team-app.is-authed:not([data-side="narrow"]) #panel-rota { padding-inline: 16px; }
}