/* Slice 043 — Sampling Workspace Visual Design (Unit 1: shared UI foundation).
   The single, locally served stylesheet for the whole app. Linked once by layout() and delivered by
   @fastify/static at /assets/app.css. No dependency, framework, bundler, CDN, or webfont.

   The design vocabulary (neutral/gold palette, system-font stack, spacing, borders, radii, restrained
   shadow) is reused from the approved visual reference sampling-tracker-ui-v6-admin-analytics.html — as a
   vocabulary, not a DOM contract. This unit establishes shared primitives ONLY (tokens, base typography,
   chrome, forms, tables, notices, focus, motion). Purpose-specific page layouts arrive in Units 2–3.
   No colour-only meaning is encoded here; status/attention treatments come from existing rendered
   text/attributes in later units. */

:root {
  --bg: #f5f4f1;
  --panel: #fff;
  --panel-soft: #faf9f7;
  --ink: #24231f;
  --muted: #615e56; /* darkened from the prototype's #737067 for a comfortable WCAG-AA margin on --bg/panel */
  --line: #e6e2da; /* decorative dividers / panel edges */
  --line-strong: #d7d1c6; /* stronger decorative edge (panels, table rules) */
  --control-border: #767676; /* form-control borders — ≥3:1 non-text contrast (WCAG 1.4.11), CX-3 */
  --gold-soft: #fbf4e5;
  --blue: #3b5ccc;
  --shadow: 0 12px 34px rgba(43, 37, 25, 0.055);
  --radius: 14px;
  --radius-sm: 8px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---- Base / typography ---------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 var(--font-sans);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: var(--blue);
}

a:hover {
  color: var(--ink);
}

h1,
h2,
h3 {
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h1 {
  font-size: 1.6rem;
  margin: 0 0 0.5rem;
}

code,
.mono {
  font-family: var(--font-mono);
}

/* Keep a form on the same line as adjacent inline chrome (e.g. the header "Log out" form). Migrated from
   an inline style attribute so the Content-Security-Policy can use `style-src 'self'` with no unsafe-inline. */
.inline-form {
  display: inline;
}

/* ---- Page shell / chrome -------------------------------------------------- */
main {
  width: min(1540px, 100%);
  margin: 0 auto;
  padding: 1.25rem 1.5rem 1.75rem;
}

nav[data-testid="main-nav"] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0 1.5rem;
  min-height: 64px;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--line);
}

nav[data-testid="main-nav"] a {
  color: var(--muted);
  text-decoration: none;
  padding: 0.5rem 0.6rem;
  border-radius: 9px;
  font-weight: 650;
}

nav[data-testid="main-nav"] a:hover {
  color: var(--ink);
  background: #f4f2ee;
}

/* Slice 036 (D6): modest branding — fixed height, width auto so the wordmark keeps its aspect ratio
   (never stretched or cropped); vertically aligned with the nav text. */
.brand-logo {
  height: 40px;
  width: auto;
  vertical-align: middle;
}

/* ---- Buttons -------------------------------------------------------------- */
button,
input[type="submit"],
.btn {
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink);
  border-radius: 10px;
  padding: 0.55rem 0.75rem;
  font-weight: 650;
}

button:hover,
input[type="submit"]:hover,
.btn:hover {
  border-color: #bdb5a7;
}

/* ---- Forms ---------------------------------------------------------------- */
label {
  color: var(--muted);
}

input,
select,
textarea {
  border: 1px solid var(--control-border);
  background: #fff;
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.55rem;
}

/* ---- Tables --------------------------------------------------------------- */
table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 0.65rem 0.85rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

th {
  font-size: 0.75rem;
  color: var(--muted);
  background: var(--panel-soft);
}

/* Tables must remain fully readable on narrow screens: keep horizontal access rather than hiding
   columns/values (D4/D6). Renderers opt in with a .table-scroll wrapper in later units. */
.table-scroll {
  overflow-x: auto;
}

/* ---- Panels / notices ----------------------------------------------------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.muted {
  color: var(--muted);
}

/* ---- Accessibility: visible focus and non-colour-only current-state cue ---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
.table-scroll:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

[aria-current="true"] {
  font-weight: 700;
  text-decoration: underline;
}

/* ---- Slice 036 (D8): the Sampling Plans master/detail workspace -----------
   Two independently scrolling columns on desktop; a single readable column on narrow screens.
   Layout only — no business meaning is encoded. (Migrated verbatim from the former inline block;
   Unit 2 refines the workspace presentation.) */
.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

.workspace-queue,
.workspace-detail {
  overflow: auto;
  max-height: 80vh;
}

@media (max-width: 800px) {
  .workspace {
    grid-template-columns: 1fr;
  }
  .workspace-queue,
  .workspace-detail {
    max-height: none;
  }
}

/* ---- Slice 043 Unit 2: Sampling Plans workspace -------------------------------
   Presentation only. Every hook below is driven by data already rendered by the page/queue/table
   renderers; no status rule is inferred in CSS, and no information is hidden at any width (D4/D5/D6). */

/* Filter bar: wrap controls on narrow screens rather than clipping (D6). */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem;
  margin: 0 0 1rem;
  padding: 0.85rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.filter-bar label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8rem;
}

/* Portfolio summary as a row of compact cards; reflows to fewer columns on narrow screens. */
.summary-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin: 0 0 1rem;
}

.summary-cards > div {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
}

.summary-cards dt {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  color: var(--muted);
}

.summary-cards dd {
  margin: 0.2rem 0 0;
  font-size: 1.4rem;
  font-weight: 750;
}

@media (max-width: 800px) {
  .summary-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Slice 058: dashboard quick-link cards — a responsive grid of card-style links to the reports/queues. */
.link-cards {
  list-style: none;
  padding: 0;
  margin: 0.25rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.75rem;
}

.link-cards a {
  display: block;
  background: var(--panel);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

.link-cards a:hover,
.link-cards a:focus-visible {
  border-color: var(--blue);
  color: var(--blue);
}

/* Give the dashboard sections breathing room between the stat grids and the links. */
[data-testid="dashboard-portfolio"],
[data-testid="dashboard-reference"],
[data-testid="dashboard-links"] {
  margin-bottom: 1.5rem;
}

/* Pagination controls. */
.pagination {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.75rem;
  color: var(--muted);
}

/* Milestone stage disclosures. */
.stage {
  margin-bottom: 0.75rem;
  padding: 0.25rem 0.5rem 0.5rem;
}

.stage > summary {
  cursor: pointer;
  padding: 0.5rem 0.25rem;
  font-weight: 650;
}

.view-toggle {
  display: flex;
  gap: 0.75rem;
  margin: 0.75rem 0;
}

/* Detail panels stack with breathing room. */
.workspace-detail .panel {
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
}

/* ---- Slice 043 Unit 3: analytics + remaining pages ----------------------------
   Presentation only, over existing server-rendered facts. Performance/Bottleneck stay truthful tables
   (A6 — no chart or calculated value added). Wide tables scroll horizontally rather than clip (D6).
   Selectors reuse data-testids already emitted by the renderers. */

/* Performance analytics: each report section reads as a card; the filter form as a bar. */
[data-testid^="performance-"] {
  margin: 0 0 1.25rem;
}

/* The Performance filter form reuses `.filter-bar` (PT-2) — no duplicate rules here. */

/* Grid, not multi-column (Slice 051): the flat dl is a run of dt/dd siblings, so multi-column flow could
   break a column *between* a label and its value (the earlier `break-*: avoid` hints are unreliable in
   column layout, which detached "Median cycle"/"Average delay" from their numbers). `grid-auto-flow: column`
   over two fixed rows pins each dt to row 1 and its dd to row 2 of the SAME implicit column, so a pair can
   never fragment. On desktop the five metrics sit in one shrink-to-fit row. */
[data-testid="performance-headline"] dl {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(140px, 1fr);
  grid-template-rows: auto auto;
  column-gap: 1.5rem;
  margin: 0;
}

/* Below the width that fits five 140px columns + gaps + the 48px page padding (~844px), stack: the dl reverts
   to normal block flow so each dt sits above its dd (grid-* props go inert under `display: block`, so no
   per-property reset is needed — PT-1). Breakpoint set above the 844px grid requirement so the desktop row
   never overflows the tablet band (CX-1). */
@media (max-width: 860px) {
  [data-testid="performance-headline"] dl {
    display: block;
  }
}

[data-testid="performance-headline"] dt {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  color: var(--muted);
}

[data-testid="performance-headline"] dd {
  margin: 0.2rem 0 0.9rem;
  font-size: 1.3rem;
  font-weight: 750;
}

/* Insufficient-sample cells: a subtle, non-colour-only emphasis. The cell already carries the explicit
   "Insufficient sample" text, so this styling is redundant reinforcement, never the sole signal (D5/A5). */
[data-insufficient="true"] {
  font-style: italic;
  color: var(--muted);
}

/* Sign-in page: a centred card. Reuses the existing login section marker; no markup change. */
[data-testid="login"] {
  max-width: 26rem;
  margin: 3rem auto;
  padding: 1.5rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  text-align: center;
}

/* ---- Slice 044 Unit 1: milestone detail as per-milestone disclosures ----------
   Replaces the 21-column horizontal-scrolling table. Each milestone is a native <details>: a compact
   summary row (key columns) expanding to all remaining fields + the existing mutation forms. No scroll. */
.milestone-list {
  display: flex;
  flex-direction: column;
}

.milestone {
  border-top: 1px solid var(--line);
}

.milestone:first-child {
  border-top: 0;
}

/* Compact summary row; a custom chevron replaces the native marker so the row can align as columns.
   Wraps rather than overflowing on narrow screens (CX-2). */
.milestone > summary {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.75rem;
  cursor: pointer;
  padding: 0.5rem 0.6rem;
}

.milestone > summary::-webkit-details-marker {
  display: none;
}

.milestone > summary::before {
  content: "\25b8"; /* ▸ */
  color: var(--muted);
}

.milestone[open] > summary::before {
  content: "\25be"; /* ▾ */
}

.milestone-summary .ms-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 620;
}

.milestone-summary .ms-col {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.85rem;
}

/* Expanded milestone detail (Slice 052): a vertical flow of three groups — curated key facts, a collapsed
   "More details" info group, then the four mutation-action cards. Only the actions are carded; the read-only
   info stays plain and compact so the panel is scannable, not a wall of boxes. */
.milestone-detail {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 0.3rem 0.6rem 0.8rem 1.6rem;
}

/* Read-only facts (curated + inside "More details"): compact plain label/value pairs, no cards.
   `min(180px, 100%)` keeps a track from ever exceeding the container → no horizontal overflow (043 CX-2). */
.ms-keyfacts,
.ms-more-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
  gap: 0.45rem 0.9rem;
}

.ms-field {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.ms-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.ms-value {
  min-width: 0;
}

/* "More details": a small muted ▸/▾ toggle that hides the 13 secondary read-only facts by default. */
.ms-more > summary.ms-more-summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--muted);
  padding: 0.1rem 0;
}
.ms-more > summary.ms-more-summary::-webkit-details-marker {
  display: none;
}
.ms-more > summary.ms-more-summary::before {
  content: "\25b8  "; /* ▸ */
}
.ms-more[open] > summary.ms-more-summary::before {
  content: "\25be  "; /* ▾ */
}
.ms-more[open] > summary.ms-more-summary {
  margin-bottom: 0.5rem;
}

/* Action controls (Owner / ACD / Override / Approval): the ONLY carded group. Each is a self-contained card
   whose form stacks its labelled controls vertically with the submit on its own line — so a wide control/button
   (e.g. "Record request sent", the "Buyer approved" select) can never spill past its cell into the neighbour.
   Scoped under `.ms-actions` so the read-only info fields above stay plain. */
.ms-actions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
  gap: 0.7rem 0.9rem;
  align-items: start;
}

.ms-actions .ms-field {
  gap: 0.4rem;
  padding: 0.6rem 0.7rem;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.ms-actions .ms-value form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
}

.ms-actions .ms-value form label {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.2rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.ms-actions .ms-value form input,
.ms-actions .ms-value form select {
  width: 100%;
}

/* Slice 059: once an owner/override is set, the value shows statically (like a recorded ACD) and the
   set/replace form is tucked behind this small "Change owner"/"Edit override" disclosure. The form inside
   still gets the `.ms-actions .ms-value form` layout above; only the summary needs a link-like affordance. */
.ms-edit {
  margin-top: 0.35rem;
}
.ms-edit > summary {
  list-style: none;
  cursor: pointer;
  font-size: 0.78rem;
  color: var(--blue);
}
.ms-edit > summary::-webkit-details-marker {
  display: none;
}
.ms-edit > summary::before {
  content: "\270e  "; /* ✎ */
}
.ms-edit[open] > summary {
  margin-bottom: 0.45rem;
}

.ms-actions .ms-value form button {
  align-self: flex-start;
}

/* ---- Slice 044 Unit 2: the plan queue as semantic cards ----------------------
   Replaces the 13-column queue table. One card per plan; no horizontal scroll (D3/D6). The selected card
   keeps aria-current (non-colour cue); the attention badge carries its text (never colour alone). */
.plan-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.plan-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.7rem 0.85rem;
}

.plan-card[aria-current="true"] {
  border-color: #ead8ad;
  background: var(--gold-soft);
}

.plan-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}

.plan-smpl {
  margin: 0;
  font-size: 1rem;
}

.attention-badge {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: #f1f1ef;
  color: #55534d;
}

.plan-style {
  margin: 0.2rem 0 0.5rem;
  color: var(--muted);
}

.plan-facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr));
  gap: 0.3rem 0.8rem;
}

.plan-facts > div {
  min-width: 0;
}

.plan-facts dt {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.plan-facts dd {
  margin: 0;
}

.plan-card-actions {
  margin-top: 0.55rem;
}

/* ---- Motion (D7): reduced-motion users get no decorative transitions ------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Submitting state (Slice 050): visual feedback while a native form is in flight -------- */
form[aria-busy="true"] {
  opacity: 0.7;
}
button[disabled] {
  cursor: progress;
}