/* TP roster pages only (pages/roster-join.html, pages/roster-offer.html, the Roster and My profile tabs on
   pages/company-dashboard.html?as=tp, pages/admin/roster.html; 19 Sep 2026). Kept out of components.css
   like board.css, plans.css and engagement.css. Everything scopes to main.roster (join and settings),
   main.roster-offer (one assignment offer), main.cdash (the company dashboard's tab views) or main.adm-roster
   (admin). Tokens, .card, .pill, .kv, .facts, .notice, .pipe, .table, .stat, .tabs, .check, .dialog and .btn
   come from styles.css and components.css; .money is the engagement pages' row, repeated here so the offer
   page does not load engagement.css.

   STATES BY QUERY (app.js block 35): <main> carries data-state / data-tab / data-profile in its markup, so
   the default state renders with no script; the script only overwrites them from the query string. Each
   view block carries the matching data-*-view attribute (space-separated when it shows in several states).
   Sean renders one state per route from the record and deletes every view block but the live one. */

/* ---------- Query-driven views ---------- */
/* Every view block hides; the one matching <main data-state> (or data-profile) shows with its own display,
   read from --vd, which the type rules under it set (block when unset). */
main.roster [data-state-view], main.roster-offer [data-state-view], main.cdash [data-profile-view] { display: none; }
main.roster[data-state="ineligible"]  [data-state-view~="ineligible"],
main.roster[data-state="eligible"]    [data-state-view~="eligible"],
main.roster[data-state="pending"]     [data-state-view~="pending"],
main.roster[data-state="active"]      [data-state-view~="active"],
main.roster[data-state="paused"]      [data-state-view~="paused"],
main.roster[data-state="timeouts"]    [data-state-view~="timeouts"],
main.roster[data-state="auto-paused"] [data-state-view~="auto-paused"],
main.roster[data-state="suspended"]   [data-state-view~="suspended"],
main.roster-offer[data-state="offered"]     [data-state-view~="offered"],
main.roster-offer[data-state="accepted"]    [data-state-view~="accepted"],
main.roster-offer[data-state="declined"]    [data-state-view~="declined"],
main.roster-offer[data-state="expired"]     [data-state-view~="expired"],
main.roster-offer[data-state="expired-second"] [data-state-view~="expired-second"],   /* 12 Oct, #91(6): the second unanswered offer in a row, offers now paused */
main.roster-offer[data-state="last-resort"] [data-state-view~="last-resort"],
main.cdash[data-profile="new"]  [data-profile-view="new"],
main.cdash[data-profile="data"] [data-profile-view="data"] { display: var(--vd, block); }
span[data-state-view], span[data-profile-view] { --vd: inline; }
.pill[data-state-view], .offer-clock[data-state-view] { --vd: inline-flex; }
.check[data-state-view], .signed[data-state-view], .notice[data-state-view], .form-actions[data-state-view], .list-row[data-state-view] { --vd: flex; }
.grid-3[data-profile-view], .grid-4[data-profile-view], .kv[data-state-view] { --vd: grid; }

/* ---------- The third viewer on the company dashboard (?as=tp: app.js 34 adds as-tp on <html>) ---------- */
[data-tp-only] { display: none !important; }
.as-tp [data-tp-only] { display: revert !important; }
/* Sweep #98 m3 1.12 (15 Oct 2026): the company's wording of a shared Overview line, hidden for the provider. */
.as-tp [data-company-only] { display: none !important; }
html:not(.as-tp) [data-tp-card] { display: none !important; } /* #98 C7: roster-provider card; the mock has no plain-company view */
/* The two roster tabs replace the Overview blocks when ?tab= names them (app.js 35 writes data-tab). */
main.cdash [data-tab-view]:not([data-tab-view="overview"]) { display: none; }
main.cdash[data-tab="roster"]  [data-tab-view="roster"],
main.cdash[data-tab="profile"] [data-tab-view="profile"] { display: block; }
main.cdash[data-tab="roster"]  [data-tab-view="overview"],
main.cdash[data-tab="profile"] [data-tab-view="overview"] { display: none; }

/* ---------- Shared: head row, money rows ---------- */
.roster, .roster-offer { padding-bottom: 6rem; }
.roster-head       { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem 1.5rem; flex-wrap: wrap; margin-top: 1rem; }
.roster-head h1    { margin: 0; }
.roster-head__meta { margin-top: 0.375rem; font-size: var(--text-body-sm); color: var(--muted-foreground); max-width: 44rem; }
.roster-head__meta .mono { color: var(--foreground); }
.roster-head__side { display: flex; align-items: center; gap: 0.75rem 1rem; flex-wrap: wrap; flex-shrink: 0; margin-top: 0.5rem; }
.money             { list-style: none; margin: 0.875rem 0 0; padding: 0; font-size: var(--text-body-sm); }
.money li          { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.5rem 0; border-top: 1px solid var(--grey-100); }
.money li:first-child { border-top: 0; padding-top: 0; }
.money li span:last-child { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.money li.money--total { border-top: 1px solid var(--grey-200); margin-top: 0.25rem; padding-top: 0.75rem; font-weight: 600; }
.money li.money--total span:last-child { font-size: var(--text-subheading); color: var(--primary); }

/* ---------- Join and settings page: section cards left, the record in a rail from 1024px ---------- */
.roster-layout     { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 1.5rem; }
@media (min-width: 1024px) { .roster-layout { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; } }
.roster-layout > * { min-width: 0; }
.roster-main > .card + .card { margin-top: 1.25rem; }
.roster-card       { padding: 1.25rem 1.5rem; }
.roster-card h2    { margin: 0; font-family: var(--font-sans); font-size: var(--text-subheading); font-weight: 600; letter-spacing: 0; }
.roster-card__hint { margin-top: 0.25rem; font-size: var(--text-body-sm); color: var(--muted-foreground); }
.roster-card__hint a { color: var(--primary); }
.roster-card .field { margin-top: 1rem; }
.roster-card .field .input { max-width: 10rem; }
.roster-card .check { margin-top: 0.75rem; }
.roster-card .check + .check { margin-top: 0.5rem; }
.roster-card .notice { margin-top: 1rem; }
.roster-card .form-actions { margin-top: 1.25rem; }
/* Eligibility rows: the profile-edit credentials list (.list-row) with the state pill on the right. */
.elig              { margin-top: 0.5rem; }
.elig .list-row    { padding: 0.875rem 0; align-items: center; }
.elig .list-row__title { font-size: var(--text-body); }
.elig .list-row__meta { font-size: var(--text-caption); }
.elig .list-row__meta a { color: var(--primary); }
/* Signed line: the confirm page's row (tick + text). */
.signed            { display: flex; align-items: center; gap: 0.75rem; margin-top: 1rem; font-size: var(--text-body-sm); }
.signed .tick      { flex-shrink: 0; }
/* Pause toggle: the briefs page's "Accepting briefs" switch (.check--inline) with its one line under it. */
.roster-pause      { margin-top: 1rem; }
.roster-pause .check--inline strong { font-weight: 600; }
.roster-pause__line { margin: 0.375rem 0 0 1.75rem; font-size: var(--text-body-sm); color: var(--muted-foreground); }
/* Missed deadlines page (roster-missed.html, 12 Oct, #91): one card per record, the state pill beside the heading. */
.roster-miss__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; flex-wrap: wrap; }
.roster-miss__head .pill { flex-shrink: 0; }
.roster-miss .kv   { margin-top: 1rem; font-size: var(--text-body-sm); gap: 0.5rem 1.25rem; }
.roster-miss .kv a { color: var(--primary); }
.roster-miss .roster-card__hint { margin-top: 1rem; }
.roster-rail .side-card + .side-card { margin-top: 1.25rem; }
.roster-rail .kv   { margin-top: 0.75rem; font-size: var(--text-body-sm); gap: 0.375rem 1rem; }
.roster-rail .checklist { gap: 0.375rem; }
.roster-rail .checklist a { color: var(--primary); }

/* ---------- Offer page ---------- */
.offer-layout      { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 1.5rem; }
@media (min-width: 1024px) { .offer-layout { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; } }
.offer-layout > *  { min-width: 0; }
.offer-card        { padding: 1.25rem 1.5rem; }
.offer-card + .offer-card { margin-top: 1.25rem; }
.offer-card h2     { margin: 0; font-family: var(--font-sans); font-size: var(--text-subheading); font-weight: 600; letter-spacing: 0; }
.offer-card .kv    { margin-top: 1rem; font-size: var(--text-body-sm); gap: 0.5rem 1.25rem; }
.offer-card .kv a  { color: var(--primary); }
.offer-card .kv .pill { vertical-align: middle; }
.offer-card .money { margin-top: 1rem; }
.offer-card .notice { margin-top: 1rem; }
.offer-card .form-actions { margin-top: 1.25rem; }
.offer-card__foot  { margin-top: 0.75rem; font-size: var(--text-caption); color: var(--muted-foreground); }
.offer-card__foot a { color: var(--primary); }
/* The 24 h clock: one figure, tabular, beside the state pill. */
.offer-clock       { display: inline-flex; align-items: baseline; gap: 0.375rem; font-size: var(--text-body-sm); color: var(--muted-foreground); font-variant-numeric: tabular-nums; white-space: nowrap; }
.offer-clock strong { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1; letter-spacing: -0.3px; color: var(--primary); }
.offer-line        { margin-top: 0.5rem; font-size: var(--text-body-sm); color: var(--muted-foreground); }
.offer-line strong { color: var(--foreground); font-weight: 500; }
.offer-rail .side-card + .side-card { margin-top: 1.25rem; }
.offer-rail .checklist { gap: 0.375rem; }
.offer-rail .checklist a { color: var(--primary); }
.offer-rail .trainer-bar { margin-top: 0.75rem; }
.offer-rail .trainer-bar .list-row__meta { margin-top: 0.125rem; }
.offer-rail .trainer-bar a { color: var(--primary); font-size: var(--text-body-sm); }

/* ---------- Roster tab on the company dashboard ---------- */
.rtab              { padding-top: 2rem; padding-bottom: 6rem; }
.rtab__line        { margin-top: 0.75rem; font-size: var(--text-body-sm); color: var(--muted-foreground); }
.rtab__line a      { color: var(--primary); }
.rtab .attention   { margin-top: 1.25rem; }
/* Working list: the dashboard's pipeline table (.pipe) with a clock column. Stage words are the frozen kanban names. */
.rtab .pipe td     { vertical-align: middle; }
.rtab .pipe__clock { color: var(--muted-foreground); }
.rtab .pipe__clock .pill { margin-right: 0.375rem; vertical-align: middle; }
.rtab .pipe__clock strong { color: var(--foreground); font-weight: 500; }
.rtab .pipe__act   { text-align: right; white-space: nowrap; }
.rtab .pipe__act .btn-link { font-size: var(--text-body-sm); }
.rtab table.pipe   { min-width: 60rem; } /* five columns; from 640px the wrap scrolls as the pipeline does */
/* Phones: the working list stacks (the Programmes table pattern, dashboard.css): title block, trainer and stage
   on one line, the clock on its own line, the action last. The clock and the action must never sit off-screen. */
@media (max-width: 639px) {
  .rtab .card > .table-wrap { overflow: visible; mask-image: none; }
  .rtab table.pipe, .rtab .pipe tbody { display: block; min-width: 0; }
  .rtab .pipe thead { display: none; }
  .rtab .pipe tr { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.875rem 1rem; border-top: 1px solid var(--border); }
  .rtab .pipe tr:first-child { border-top: 0; }
  .rtab .pipe td { display: block; padding: 0; border: 0; }
  .rtab .pipe td:first-child, .rtab .pipe__clock { flex: 0 0 100%; }
  .rtab .pipe__act { flex: 0 0 100%; text-align: left; white-space: normal; }
}

/* ---------- My profile tab: the provider's own record (OPEN-DECISIONS #26) ---------- */
.rprof             { padding-top: 2rem; padding-bottom: 6rem; }
.rprof__who        { margin-top: 0.75rem; font-size: var(--text-body-sm); color: var(--muted-foreground); max-width: 44rem; }
.rprof .grid-4     { margin-top: 1.25rem; }
.rprof .stat__avg strong { color: var(--foreground); font-weight: 500; }
/* Two axes inside one stat: label and figure per axis, the figure tabular. */
.axes              { display: grid; grid-template-columns: max-content auto; gap: 0.25rem 0.75rem; margin-top: 0.5rem; font-size: var(--text-body-sm); }
.axes dt           { color: var(--muted-foreground); }
.axes dd           { margin: 0; font-family: var(--font-display); font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; }

/* ---------- Admin ---------- */
.adm-roster .table td { vertical-align: middle; }
.adm-roster .table td .caption { display: block; margin-top: 0.125rem; color: var(--muted-foreground); }
.adm-roster .table td.act { text-align: right; white-space: nowrap; }
.adm-roster .table td.act .btn + .btn { margin-left: 0.375rem; }
/* 9 Oct 2026 distill: five columns or fewer per table, headers on one line, no scroll from 1024px up. */
.adm-roster .table th { white-space: nowrap; }
.adm-roster .table-wrap table { min-width: 54rem; }
/* The name and trail columns keep a readable width; the wrap scrolls before they squeeze. */
.adm-roster .table th:first-child, .adm-roster .table td:first-child { min-width: 14rem; }
.adm-roster .table td .caption .mono, .adm-roster .table td .caption a { color: var(--primary); }
.adm-roster .table td:nth-child(2) { min-width: 11rem; }
.adm-roster .attention__title { flex-wrap: wrap; }
.adm-roster .trail { min-width: 18rem; }
.adm-roster .trail { list-style: none; margin: 0; padding: 0; font-size: var(--text-caption); color: var(--muted-foreground); }
.adm-roster .trail li + li { margin-top: 0.125rem; }
.adm-roster .trail strong { color: var(--foreground); font-weight: 500; }

/* Selection colour and the caret follow the palette on these pages. */
.roster ::selection, .roster-offer ::selection, .adm-roster ::selection { background: var(--navy-100); color: var(--navy-900); }
.roster input, .adm-roster input { caret-color: var(--primary); }