:root {
  /* Color tokens */
  --color-primary-900: #102f4f;
  --color-primary-700: #185887;
  --color-primary-500: #2879a8;
  --color-neutral-050: #f7f9fb;
  --color-neutral-100: #eef2f5;
  --color-neutral-200: #dbe3e8;
  --color-neutral-400: #9aabb6;
  --color-neutral-600: #5a6e7a;
  --color-neutral-800: #263b48;
  --color-white: #ffffff;
  --color-success: #207a56;
  --color-warning: #996b00;
  --color-danger: #b33636;
  --color-info: #216b91;
  --color-hold: #7b5312;
  --color-background: #eef2f5;
  --color-surface: var(--color-white);
  --color-border: var(--color-neutral-200);
  --color-text: var(--color-neutral-800);
  --color-text-muted: var(--color-neutral-600);
  --color-info-surface: #edf7fb;
  --color-warning-surface: #fff8e7;
  --color-danger-surface: #fff1f1;
  --color-focus-ring: #75b9d5;

  /* Type, spacing, shape and layout tokens */
  --font-family-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: clamp(1.75rem, 4vw, 2.5rem);
  --line-height-body: 1.5;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --shadow-panel: 0 0.25rem 1rem rgb(16 47 79 / 8%);
  --breakpoint-mobile: 37.5rem;
  --breakpoint-tablet-portrait: 48rem;
  --breakpoint-offcanvas: 899px;
  --breakpoint-compact: 900px;
  --breakpoint-desktop: 1200px;

  /* CR-UI-LAYOUT-01 PART 01 — shared presentation tokens */
  --page-gap: var(--space-6);
  --section-gap: var(--space-5);
  --card-gap: var(--space-4);
  --canvas-pad-x: var(--space-5);
  --canvas-pad-y: var(--space-5);
  --font-size-page-title: var(--font-size-xl);
  --font-size-section-title: clamp(1.125rem, 1.8vw, 1.375rem);
  --font-size-card-title: var(--font-size-md);
  --font-size-metric-value: var(--font-size-lg);
  --font-size-helper: var(--font-size-xs);
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-md);
  line-height: var(--line-height-body);
  background: var(--color-background);
  font-synthesis: none;
}

button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 2px; }

.app-shell { width: min(100% - 2rem, 78rem); margin: 0 auto; padding: var(--space-6) 0; }
.demo-header, .panel-heading, .demo-footer, .brand-lockup, .button-row, .status-row { display: flex; align-items: center; }
.demo-header, .panel-heading, .demo-footer { justify-content: space-between; gap: var(--space-4); }
.brand-lockup { gap: var(--space-3); }
.brand-frame { display: grid; width: 3rem; height: 3rem; place-items: center; background: var(--color-primary-900); border-radius: var(--radius-md); }
.brand-logo { display: none; max-width: 100%; max-height: 100%; }
.brand-logo.is-loaded { display: block; }
.brand-logo.is-loaded + .brand-fallback { display: none; }
.brand-fallback { color: var(--color-white); font-size: var(--font-size-xs); font-weight: 800; letter-spacing: 0.1em; }
.brand-name { margin: 0; color: var(--color-primary-900); font-size: var(--font-size-lg); font-weight: 750; }
.eyebrow, .section-kicker { margin: 0; color: var(--color-primary-700); font-size: var(--font-size-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.page-heading { max-width: 48rem; padding: var(--space-7) 0 var(--space-6); }
h1, h2 { margin: 0; color: var(--color-primary-900); line-height: 1.15; }
h1 { margin-top: var(--space-2); font-size: var(--font-size-xl); letter-spacing: -0.03em; }
h2 { margin-top: var(--space-1); font-size: var(--font-size-lg); }
.lead { max-width: 42rem; margin: var(--space-3) 0 0; color: var(--color-text-muted); font-size: 1.05rem; }
.showcase-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.panel { min-width: 0; padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-panel); }
.panel--wide { grid-column: span 2; }
.panel-heading { align-items: flex-start; margin-bottom: var(--space-5); }
.button-row, .status-row { flex-wrap: wrap; gap: var(--space-3); }
.button { min-height: 2.75rem; padding: 0.55rem 1rem; border: 1px solid transparent; border-radius: var(--radius-sm); font-weight: 700; }
.button--primary { color: var(--color-white); background: var(--color-primary-700); }
.button--primary:hover { background: var(--color-primary-900); }
.button--secondary { color: var(--color-primary-700); background: var(--color-white); border-color: var(--color-primary-500); }
.button--quiet { color: var(--color-primary-700); background: transparent; }
.icon-button { width: 2.75rem; height: 2.75rem; color: var(--color-primary-700); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 1.4rem; line-height: 1; }
.status-row { margin-top: var(--space-5); }
.status-badge { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 1.75rem; padding: 0.2rem 0.55rem; color: var(--color-neutral-800); font-size: var(--font-size-xs); font-weight: 750; border: 1px solid currentColor; border-radius: var(--radius-sm); white-space: nowrap; }
.status-marker { width: 0.45rem; height: 0.45rem; flex: 0 0 auto; background: currentColor; border-radius: 50%; }
.status-badge--normal { color: var(--color-neutral-600); }.status-badge--success, .status-badge--released { color: var(--color-success); }.status-badge--info { color: var(--color-info); }.status-badge--warning, .status-badge--pending { color: var(--color-warning); }.status-badge--hold { color: var(--color-hold); background: var(--color-warning-surface); }.status-badge--critical { color: var(--color-danger); background: var(--color-danger-surface); }
.kpi-value { color: var(--color-primary-900); font-size: 2.75rem; font-weight: 750; line-height: 1; }.kpi-unit { color: var(--color-text-muted); font-size: var(--font-size-md); font-weight: 500; }
.muted-text { margin: var(--space-3) 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }.kpi-trend { color: var(--color-success); font-size: var(--font-size-sm); font-weight: 650; }.kpi-trend .status-marker { display: inline-block; margin-right: var(--space-2); }
.form-stack { display: grid; gap: var(--space-2); }.field-label { color: var(--color-neutral-800); font-size: var(--font-size-sm); font-weight: 700; }.form-input { width: 100%; min-height: 2.75rem; padding: 0.55rem 0.75rem; color: var(--color-text); background: var(--color-white); border: 1px solid var(--color-neutral-400); border-radius: var(--radius-sm); }.form-input + .field-label { margin-top: var(--space-2); }
.table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); } th, td { padding: 0.8rem 0.75rem; text-align: left; border-bottom: 1px solid var(--color-border); } th { color: var(--color-text-muted); font-size: var(--font-size-xs); letter-spacing: 0.06em; text-transform: uppercase; } tbody tr:last-child td { border-bottom: 0; }
.alert { display: flex; gap: var(--space-3); align-items: baseline; padding: var(--space-3) var(--space-4); border-left: 4px solid; font-size: var(--font-size-sm); }.alert + .alert { margin-top: var(--space-3); }.alert--info { color: var(--color-info); background: var(--color-info-surface); border-color: var(--color-info); }.alert--warning { color: var(--color-hold); background: var(--color-warning-surface); border-color: var(--color-warning); }.alert strong { flex: 0 0 auto; }
.demo-footer { margin-top: var(--space-6); padding-top: var(--space-4); color: var(--color-text-muted); font-size: var(--font-size-xs); border-top: 1px solid var(--color-border); }
noscript { display: block; padding: var(--space-4); color: var(--color-danger); text-align: center; background: var(--color-danger-surface); }

@media (max-width: 63.99rem) { .app-shell { padding-top: var(--space-5); } }
@media (max-width: 47.99rem) { .showcase-grid { grid-template-columns: 1fr; }.panel--wide { grid-column: auto; }.demo-header, .demo-footer { align-items: flex-start; flex-direction: column; }.page-heading { padding: var(--space-6) 0 var(--space-5); }.panel { padding: var(--space-4); } }
:root {
  --shell-header-height: 4.5rem;
  --shell-sidebar-width: 16.5rem;
  --shell-sidebar-compact: 4.5rem;
}

/* Part 03 application shell */
body { background: var(--color-background); }
.app-shell { width: 100%; max-width: none; min-height: 100vh; margin: 0; padding: 0; }
.global-header { position: sticky; z-index: 10; top: 0; display: grid; grid-template-columns: var(--shell-sidebar-width) minmax(18rem, 1fr) auto; align-items: center; min-height: var(--shell-header-height); padding: 0 var(--space-5); color: var(--color-white); background: var(--color-primary-900); border-bottom: 1px solid #315571; }
.header-brand, .header-tools, .header-context, .profile-button, .header-search { display: flex; align-items: center; }
.header-brand { min-width: 0; gap: var(--space-3); }.header-brand-copy { display: grid; min-width: 0; overflow: hidden; }.header-brand .brand-frame { width: 2.5rem; height: 2.5rem; background: #315a72; }.header-brand .brand-name { overflow: hidden; color: var(--color-white); font-size: var(--font-size-md); text-overflow: ellipsis; white-space: nowrap; }.header-product, .context-label { color: #b9cfdb; font-size: var(--font-size-xs); }
.header-context { justify-content: center; gap: var(--space-2); min-width: 0; color: #e0edf2; font-size: var(--font-size-sm); }.header-context strong { color: var(--color-white); }.context-divider { color: #7895a4; }.header-tools { justify-content: flex-end; gap: var(--space-3); }.header-tools .icon-button, .sidebar-toggle { color: var(--color-white); background: transparent; border-color: #52738a; }.header-search { gap: var(--space-2); padding: 0 var(--space-3); color: #a8c2d0; border: 1px solid #52738a; border-radius: var(--radius-sm); }.header-search input { width: 6rem; min-height: 2.5rem; color: var(--color-white); background: transparent; border: 0; outline: 0; }.header-search input::placeholder { color: #b9cfdb; }.profile-button { gap: var(--space-2); padding: 0; color: var(--color-white); background: transparent; border: 0; }.avatar { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; color: var(--color-primary-900); font-size: var(--font-size-xs); font-weight: 800; background: #c6e0e5; border-radius: 50%; }.profile-name { font-size: var(--font-size-sm); white-space: nowrap; }
.app-body { display: grid; grid-template-columns: var(--shell-sidebar-width) minmax(0, 1fr); min-height: calc(100vh - var(--shell-header-height)); }.sidebar { display: flex; flex-direction: column; min-width: 0; padding: var(--space-4) var(--space-3); background: #f7f9fb; border-right: 1px solid var(--color-border); }.sidebar-nav { overflow-y: auto; }.nav-group { margin-bottom: var(--space-5); }.nav-group-label { margin: 0 0 var(--space-2) var(--space-3); color: var(--color-text-muted); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }.nav-group-items { display: grid; gap: 2px; }.nav-item { display: flex; align-items: center; gap: var(--space-3); min-height: 2.5rem; width: 100%; padding: 0 var(--space-3); color: var(--color-neutral-600); text-align: left; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); }.nav-item:hover { color: var(--color-primary-900); background: var(--color-neutral-100); }.nav-item.is-active { color: var(--color-primary-700); font-weight: 750; background: #e0edf2; border-color: #c5dce4; }.nav-icon { width: 1.25rem; color: currentColor; font-size: var(--font-size-md); text-align: center; }.sidebar-footer { display: flex; align-items: center; gap: var(--space-2); margin-top: auto; padding: var(--space-4) var(--space-3) 0; color: var(--color-text-muted); font-size: var(--font-size-xs); border-top: 1px solid var(--color-border); }.status-dot--online { display: inline-block; width: 0.5rem; height: 0.5rem; background: var(--color-success); border-radius: 50%; }
.workspace { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); min-width: 0; padding: var(--space-6); }.workspace-inner { min-width: 0; max-width: none; width: 100%; }.breadcrumbs { display: flex; flex-wrap: nowrap; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.breadcrumbs strong { color: var(--color-primary-700); }.breadcrumb-back { display: none; }.workspace-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-5); margin: var(--space-6) 0 var(--space-5); }.workspace-heading h1 { margin-top: var(--space-2); }.workspace-summary { margin: var(--space-3) 0 0; color: var(--color-text-muted); }.workspace-actions { display: flex; align-items: center; gap: var(--space-3); }.workspace-container { min-width: 0; min-height: 27rem; width: 100%; max-width: 100%; display: grid; place-items: center; padding: var(--space-6); background: transparent; border: 0; box-shadow: none; }.placeholder-state { max-width: 30rem; padding: var(--space-5); text-align: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-panel); }.placeholder-mark { display: grid; width: 3.25rem; height: 3.25rem; margin: 0 auto var(--space-4); place-items: center; color: var(--color-primary-700); font-size: 1.5rem; background: #e0edf2; border: 1px solid #c5dce4; border-radius: var(--radius-md); }.placeholder-state h2 { margin-top: var(--space-2); }.placeholder-state p:last-child { color: var(--color-text-muted); }.context-panel { display: none; min-width: 0; align-self: start; padding: var(--space-4); background: #f7f9fb; border: 1px solid var(--color-border); }.context-panel-heading { display: flex; justify-content: space-between; align-items: center; }.context-panel .icon-button { width: 2rem; height: 2rem; }.context-panel .muted-text { line-height: 1.6; }
.sidebar-backdrop { display: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Enterprise desktop only: optional collapse to a labeled-icon rail. Never below 1200px. */
@media (min-width: 1200px) {
  .sidebar-collapsed .global-header { grid-template-columns: var(--shell-sidebar-compact) minmax(18rem, 1fr) auto; }
  .sidebar-collapsed .app-body { grid-template-columns: var(--shell-sidebar-compact) minmax(0, 1fr); }
  .sidebar-collapsed .sidebar { padding-inline: var(--space-2); }
  .sidebar-collapsed .nav-group-label, .sidebar-collapsed .nav-label, .sidebar-collapsed .sidebar-footer .status-dot { display: none; }
  .sidebar-collapsed .nav-item { justify-content: center; padding-inline: 0; }
  .sidebar-collapsed .sidebar-footer { justify-content: center; padding-inline: 0; border-top: 0; }
}

@media (max-width: 63.99rem) {
  .global-header { padding-inline: var(--space-4); }
  .workspace { padding: var(--space-5); grid-template-columns: 1fr; }
  .workspace-inner { max-width: none; }
  .context-panel { display: none; }
}
@media (max-width: 47.99rem) {
  .global-header { grid-template-columns: auto 1fr auto; padding-inline: var(--space-3); min-height: 3.5rem; }
  .header-brand .brand-frame { width: 2rem; height: 2rem; }
  .header-brand .brand-name { font-size: var(--font-size-sm); }
  .header-product { display: none; }
  .header-context { display: none; }
  .header-tools { gap: var(--space-1); }
  .header-search { display: none; }
  .profile-name { display: none; }
  .header-tools .icon-button:not(.sidebar-toggle) { display: none; }
  .app-body { grid-template-columns: 1fr; }
  .workspace { padding: var(--space-3); grid-template-columns: 1fr; }
  .workspace-inner { max-width: none; }
  .workspace-heading { flex-direction: column; gap: var(--space-3); margin: var(--space-4) 0 var(--space-3); }
  .workspace-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .workspace-container { display: block; place-items: unset; min-height: 16rem; padding: var(--space-3); width: 100%; max-width: 100%; min-width: 0; }
  .breadcrumbs { font-size: var(--font-size-xs); gap: var(--space-1); }
}
/* Part 05 demo context controls */
.context-control select { min-height: 2.25rem; max-width: 10rem; padding: 0.35rem 1.8rem 0.35rem 0.55rem; color: var(--color-white); font-size: var(--font-size-xs); font-weight: 700; background: #173f5d; border: 1px solid #66889b; border-radius: var(--radius-sm); }
.context-control select:disabled { cursor: not-allowed; opacity: 0.75; }.context-code { color: #b9cfdb; font-size: var(--font-size-xs); white-space: nowrap; }.context-status { font-size: 0.65rem; }.profile-context { display: grid; gap: 2px; }.profile-context .context-control select { max-width: 9.5rem; }.profile-context .profile-button { min-height: 1.6rem; }.profile-context .avatar { width: 1.75rem; height: 1.75rem; }
@media (max-width: 63.99rem) { .header-context { gap: var(--space-1); }.header-context .context-code { display: none; }.context-status { padding-inline: 0.35rem; }.profile-context .context-control select { max-width: 8rem; } }
@media (max-width: 47.99rem) { .profile-context .context-control select { max-width: 7.5rem; }.header-tools .profile-context { display: grid; } }
/* Part 08 network and static-demo readiness. CR-UI-LAYOUT-01 PART 01: the previous
   `html, body { overflow-x: hidden; }` was removed — page-level overflow must be
   contained structurally, not hidden. Any remaining horizontal overflow should be
   fixed at the container/table level. */
.network-status { position: fixed; z-index: 20; right: var(--space-4); bottom: var(--space-4); display: inline-flex; align-items: center; gap: var(--space-2); max-width: min(25rem, calc(100vw - 2rem)); padding: 0.45rem 0.7rem; color: var(--color-success); font-size: var(--font-size-xs); font-weight: 750; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-panel); }.network-status.is-offline { color: var(--color-hold); background: var(--color-warning-surface); border-color: #e3c776; }.network-status .network-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-loading { display: grid; min-height: 100vh; margin: 0; place-items: center; color: var(--color-text-muted); font-size: var(--font-size-sm); }
@media (max-width: 47.99rem) { .network-status { right: var(--space-3); bottom: var(--space-3); max-width: calc(100vw - 1.5rem); } }

/* D01 PART 02 — Command Center (Meal & Production overview). Restrained enterprise operations UI:
   no decorative KPI cards, no gradients. Reuses D00 tokens, status badges and section kickers. */
.cc-view { display: block; min-height: 0; }
.cc { display: block; }
.cc-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.cc-header-name { color: var(--color-primary-900); font-weight: 750; }
.cc-header-div { color: var(--color-neutral-400); }
.cc-header-date { font-variant-numeric: tabular-nums; }
.cc-demo-tag { margin-left: var(--space-2); padding: 0.15rem 0.5rem; border: 1px solid var(--color-info); color: var(--color-info); border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: 750; letter-spacing: 0.08em; }
.cc-loading { padding: var(--space-5) 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.cc-section { padding: var(--space-5) 0; border-top: 1px solid var(--color-border); }
.cc-section:first-of-type { border-top: 0; }
.cc-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }

/* Executive operating status */
.cc-status { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border); border-left: 4px solid var(--color-neutral-400); border-radius: var(--radius-md); background: var(--color-surface); }
.cc-status-marker { width: 0.85rem; height: 0.85rem; flex: 0 0 auto; border-radius: 50%; background: var(--color-neutral-400); }
.cc-status-label { display: block; font-size: var(--font-size-lg); font-weight: 800; letter-spacing: 0.02em; color: var(--color-primary-900); }
.cc-status-note { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.cc-status--normal { border-left-color: var(--color-success); } .cc-status--normal .cc-status-marker { background: var(--color-success); }
.cc-status--attention { border-left-color: var(--color-warning); } .cc-status--attention .cc-status-marker { background: var(--color-warning); }
.cc-status--atrisk { border-left-color: var(--color-danger); } .cc-status--atrisk .cc-status-marker { background: var(--color-danger); }
.cc-status--critical { border-left-color: var(--color-danger); background: var(--color-danger-surface); } .cc-status--critical .cc-status-marker { background: var(--color-danger); }

/* Today's meal flow */
.cc-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.cc-flow-stage { display: flex; flex-direction: column; gap: var(--space-1); min-width: 7rem; padding: var(--space-3) var(--space-4); background: var(--color-neutral-050); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.cc-flow-value { font-size: var(--font-size-lg); font-weight: 800; color: var(--color-primary-900); font-variant-numeric: tabular-nums; line-height: 1.1; }
.cc-flow-label { font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.cc-flow-arrow { align-self: center; color: var(--color-neutral-400); font-size: var(--font-size-md); }
.cc-flow-arrow::before { content: "\2192"; }
.cc-variance { display: flex; flex-wrap: wrap; gap: var(--space-5); margin-top: var(--space-4); }
.cc-variance-item { display: flex; flex-direction: column; gap: var(--space-1); }
.cc-variance-value { font-size: var(--font-size-md); font-weight: 800; color: var(--color-primary-900); font-variant-numeric: tabular-nums; }
.cc-variance-label { font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* Production overview */
.cc-prod-summary { margin: 0 0 var(--space-3); font-size: var(--font-size-md); color: var(--color-text); }
.cc-progress { height: 0.6rem; background: var(--color-neutral-100); border: 1px solid var(--color-border); border-radius: 999px; overflow: hidden; }
.cc-progress-fill { display: block; height: 100%; background: var(--color-primary-700); }
.cc-prod-meta { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-3); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.cc-prod-meta strong { color: var(--color-primary-900); font-weight: 800; }

/* Error state */
.cc-error { padding: var(--space-5) 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }

@media (max-width: 47.99rem) {
  .cc-flow { gap: var(--space-2); }
  .cc-flow-stage { width: 100%; flex-direction: row; align-items: baseline; justify-content: space-between; }
  .cc-flow-arrow { width: 100%; text-align: center; padding: var(--space-1) 0; }
  .cc-flow-arrow::before { content: "\2193"; }
}

/* D01 PART 03 — Food Safety & Critical Control. Restrained critical hierarchy: only the food-safety
   status block + non-zero concerning metrics + the attention item carry the critical accent, never
   the whole page. Reuses D00 tokens and status vocabulary. */
.cc-fs-status { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border); border-left: 4px solid var(--color-neutral-400); border-radius: var(--radius-md); background: var(--color-surface); }
.cc-fs-status-marker { width: 0.85rem; height: 0.85rem; flex: 0 0 auto; border-radius: 50%; background: var(--color-neutral-400); }
.cc-fs-status-label { display: block; font-size: var(--font-size-lg); font-weight: 800; letter-spacing: 0.02em; color: var(--color-primary-900); }
.cc-fs-status-note { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.cc-fs-status--pass { border-left-color: var(--color-success); } .cc-fs-status--pass .cc-fs-status-marker { background: var(--color-success); }
.cc-fs-status--attention { border-left-color: var(--color-warning); } .cc-fs-status--attention .cc-fs-status-marker { background: var(--color-warning); }
.cc-fs-status--hold .cc-fs-status-marker, .cc-fs-status--fail .cc-fs-status-marker, .cc-fs-status--critical .cc-fs-status-marker { background: var(--color-danger); }
.cc-fs-status--hold, .cc-fs-status--fail, .cc-fs-status--critical { border-left-color: var(--color-danger); }

.cc-fs-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-3); margin: var(--space-4) 0 0; }
.cc-fs-metric { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4); background: var(--color-neutral-050); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.cc-fs-metric dt { font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.cc-fs-metric dd { margin: 0; font-size: var(--font-size-lg); font-weight: 800; color: var(--color-primary-900); font-variant-numeric: tabular-nums; }
.cc-fs-metric.is-flag dd { color: var(--color-danger); }

.cc-fs-attention { margin-top: var(--space-5); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.cc-fs-attention-kicker { margin: 0 0 var(--space-3); color: var(--color-primary-700); font-size: var(--font-size-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.cc-fs-attn-item { padding: var(--space-3) 0; border-top: 1px solid var(--color-border); }
.cc-fs-attn-item:first-of-type { border-top: 0; padding-top: 0; }
.cc-fs-attn-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cc-fs-attn-sev { font-size: var(--font-size-xs); font-weight: 800; letter-spacing: 0.06em; padding: 0.1rem 0.45rem; border-radius: var(--radius-sm); border: 1px solid currentColor; }
.cc-fs-attn--major .cc-fs-attn-sev, .cc-fs-attn--critical .cc-fs-attn-sev { color: var(--color-danger); }
.cc-fs-attn--warning .cc-fs-attn-sev { color: var(--color-warning); }
.cc-fs-attn--info .cc-fs-attn-sev { color: var(--color-info); }
.cc-fs-attn-title { font-weight: 750; color: var(--color-primary-900); font-size: var(--font-size-sm); }
.cc-fs-attn-desc { margin: var(--space-2) 0; color: var(--color-text); font-size: var(--font-size-sm); }
.cc-fs-attn-meta { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-xs); font-variant-numeric: tabular-nums; }
.cc-fs-action-row { margin-top: var(--space-3); }
.cc-fs-action { min-height: 2.5rem; padding: 0.5rem 0.9rem; border: 1px solid var(--color-primary-500); border-radius: var(--radius-sm); background: var(--color-white); color: var(--color-primary-700); font-weight: 700; cursor: pointer; }
.cc-fs-action:hover { background: var(--color-primary-700); color: var(--color-white); }
.cc-fs-action-neutral { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-text-muted); }
@media (max-width: 47.99rem) { .cc-fs-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* D01 PART 04 — Material & Supply Readiness. Reuses the PART 02 progress bar; compact operational
   metrics with restrained warning emphasis (expiring lots are a watch, not flagged). */
.cc-sup-readiness { margin-bottom: var(--space-4); }
.cc-sup-readiness-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.cc-sup-readiness-value { font-size: var(--font-size-lg); font-weight: 800; color: var(--color-primary-900); font-variant-numeric: tabular-nums; }
.cc-sup-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--space-3); margin: var(--space-3) 0 0; }
.cc-sup-metric { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4); background: var(--color-neutral-050); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.cc-sup-metric dt { font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.cc-sup-metric dd { margin: 0; font-size: var(--font-size-lg); font-weight: 800; color: var(--color-primary-900); font-variant-numeric: tabular-nums; }
.cc-sup-metric.is-flag dd { color: var(--color-danger); }
.cc-supply-unavailable { padding: var(--space-4); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.cc-sup-attention { margin-top: var(--space-4); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.cc-sup-attention-kicker { margin: 0 0 var(--space-3); color: var(--color-primary-700); font-size: var(--font-size-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.cc-sup-attn-item { padding: var(--space-3) 0; border-top: 1px solid var(--color-border); }
.cc-sup-attn-item:first-of-type { border-top: 0; padding-top: 0; }
.cc-sup-attn-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cc-sup-attn-sev { font-size: var(--font-size-xs); font-weight: 800; letter-spacing: 0.06em; padding: 0.1rem 0.45rem; border-radius: var(--radius-sm); border: 1px solid currentColor; }
.cc-sup-attn--major .cc-sup-attn-sev, .cc-sup-attn--critical .cc-sup-attn-sev { color: var(--color-danger); }
.cc-sup-attn--warning .cc-sup-attn-sev { color: var(--color-warning); }
.cc-sup-attn--info .cc-sup-attn-sev { color: var(--color-info); }
.cc-sup-attn-title { font-weight: 750; color: var(--color-primary-900); font-size: var(--font-size-sm); }
.cc-sup-attn-desc { margin: var(--space-2) 0; color: var(--color-text); font-size: var(--font-size-sm); }
.cc-sup-attn-meta { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-xs); font-variant-numeric: tabular-nums; }
.cc-sup-action-row { margin-top: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cc-sup-action { min-height: 2.5rem; padding: 0.5rem 0.9rem; border: 1px solid var(--color-primary-500); border-radius: var(--radius-sm); background: var(--color-white); color: var(--color-primary-700); font-weight: 700; cursor: pointer; }
.cc-sup-action:hover { background: var(--color-primary-700); color: var(--color-white); }
.cc-sup-action-neutral { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-text-muted); }
@media (max-width: 47.99rem) { .cc-sup-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* D01 PART 05 — Portion, Packing & Delivery Readiness. Reuses PART 02 progress bar and PART 04
   action/neutral styles (cc-sup-action). Restrained warning accents; no map/GPS/vehicle visuals. */
.cc-pack-readiness { margin-bottom: var(--space-3); }
.cc-pack-readiness-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.cc-pack-readiness-value { font-size: var(--font-size-lg); font-weight: 800; color: var(--color-primary-900); font-variant-numeric: tabular-nums; }
.cc-pack-portions { margin: var(--space-2) 0 0; font-size: var(--font-size-sm); color: var(--color-text); }
.cc-pack-portions strong { color: var(--color-primary-900); font-variant-numeric: tabular-nums; }
.cc-pack-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: var(--space-3); margin: var(--space-3) 0 0; }
.cc-pack-metric { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4); background: var(--color-neutral-050); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.cc-pack-metric dt { font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.cc-pack-metric dd { margin: 0; font-size: var(--font-size-lg); font-weight: 800; color: var(--color-primary-900); font-variant-numeric: tabular-nums; }
.cc-pack-metric.is-flag dd { color: var(--color-danger); }

.cc-deliv-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--space-3); margin: var(--space-3) 0 0; }
.cc-deliv-metric { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4); background: var(--color-neutral-050); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.cc-deliv-metric dt { font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.cc-deliv-metric dd { margin: 0; font-size: var(--font-size-lg); font-weight: 800; color: var(--color-primary-900); font-variant-numeric: tabular-nums; }
.cc-deliv-metric.is-flag dd { color: var(--color-danger); }
.cc-deliv-disc { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--color-neutral-050); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.cc-deliv-disc-label { font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.cc-deliv-disc-value { font-size: var(--font-size-lg); font-weight: 800; color: var(--color-primary-900); font-variant-numeric: tabular-nums; }
.cc-deliv-disc.is-flag { border-color: var(--color-danger); } .cc-deliv-disc.is-flag .cc-deliv-disc-value { color: var(--color-danger); }

.cc-deliv-attention { margin-top: var(--space-4); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.cc-deliv-attention-kicker { margin: 0 0 var(--space-3); color: var(--color-primary-700); font-size: var(--font-size-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.cc-deliv-attn-item { padding: var(--space-3) 0; border-top: 1px solid var(--color-border); }
.cc-deliv-attn-item:first-of-type { border-top: 0; padding-top: 0; }
.cc-deliv-attn-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cc-deliv-attn-sev { font-size: var(--font-size-xs); font-weight: 800; letter-spacing: 0.06em; padding: 0.1rem 0.45rem; border-radius: var(--radius-sm); border: 1px solid currentColor; }
.cc-deliv-attn--major .cc-deliv-attn-sev, .cc-deliv-attn--critical .cc-deliv-attn-sev { color: var(--color-danger); }
.cc-deliv-attn--warning .cc-deliv-attn-sev { color: var(--color-warning); }
.cc-deliv-attn--info .cc-deliv-attn-sev { color: var(--color-info); }
.cc-deliv-attn-title { font-weight: 750; color: var(--color-primary-900); font-size: var(--font-size-sm); }
.cc-deliv-attn-desc { margin: var(--space-2) 0; color: var(--color-text); font-size: var(--font-size-sm); }
.cc-deliv-attn-meta { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-xs); font-variant-numeric: tabular-nums; }
.cc-deliv-action-row { margin-top: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2); }
@media (max-width: 47.99rem) { .cc-pack-metrics, .cc-deliv-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* D01 PART 06 — Sanitation, Tray & Facility Readiness. Reuses PART 02/04 tokens and action styles.
   Tray reconciliation strip; compact sanitation + facility/compliance metrics; restrained flag emphasis. */
.cc-tray-flow { display: flex; align-items: stretch; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.cc-tray-stage { display: flex; flex-direction: column; gap: var(--space-1); min-width: 7rem; padding: var(--space-3) var(--space-4); background: var(--color-neutral-050); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.cc-tray-value { font-size: var(--font-size-lg); font-weight: 800; color: var(--color-primary-900); font-variant-numeric: tabular-nums; line-height: 1.1; }
.cc-tray-label { font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.cc-tray-stage.is-flag .cc-tray-value { color: var(--color-danger); }
.cc-tray-arrow { align-self: center; color: var(--color-neutral-400); font-size: var(--font-size-md); }
.cc-tray-arrow::before { content: "\2192"; }

.cc-san-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-4); }
.cc-san-metric { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4); background: var(--color-neutral-050); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.cc-san-metric dt { font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.cc-san-metric dd { margin: 0; font-size: var(--font-size-lg); font-weight: 800; color: var(--color-primary-900); font-variant-numeric: tabular-nums; }
.cc-san-metric.is-flag dd { color: var(--color-danger); }

.cc-facility { padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.cc-facility-kicker { margin: 0 0 var(--space-3); color: var(--color-primary-700); font-size: var(--font-size-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.cc-fac-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-3); margin: 0; }
.cc-fac-metric { display: flex; flex-direction: column; gap: var(--space-1); }
.cc-fac-metric dt { font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.cc-fac-metric dd { margin: 0; font-size: var(--font-size-md); font-weight: 800; color: var(--color-primary-900); font-variant-numeric: tabular-nums; }
.cc-fac-metric.is-flag dd { color: var(--color-danger); }

.cc-san-attention { margin-top: var(--space-4); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.cc-san-attention-kicker { margin: 0 0 var(--space-3); color: var(--color-primary-700); font-size: var(--font-size-xs); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.cc-san-attn-item { padding: var(--space-3) 0; border-top: 1px solid var(--color-border); }
.cc-san-attn-item:first-of-type { border-top: 0; padding-top: 0; }
.cc-san-attn-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.cc-san-attn-sev { font-size: var(--font-size-xs); font-weight: 800; letter-spacing: 0.06em; padding: 0.1rem 0.45rem; border-radius: var(--radius-sm); border: 1px solid currentColor; }
.cc-san-attn--major .cc-san-attn-sev, .cc-san-attn--critical .cc-san-attn-sev { color: var(--color-danger); }
.cc-san-attn--warning .cc-san-attn-sev { color: var(--color-warning); }
.cc-san-attn--info .cc-san-attn-sev { color: var(--color-info); }
.cc-san-attn-title { font-weight: 750; color: var(--color-primary-900); font-size: var(--font-size-sm); }
.cc-san-attn-desc { margin: var(--space-2) 0; color: var(--color-text); font-size: var(--font-size-sm); }
.cc-san-attn-meta { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-xs); font-variant-numeric: tabular-nums; }
.cc-san-action-row { margin-top: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2); }
@media (max-width: 47.99rem) {
  .cc-tray-flow { gap: var(--space-2); }
  .cc-tray-stage { width: 100%; flex-direction: row; align-items: baseline; justify-content: space-between; }
  .cc-tray-arrow { width: 100%; text-align: center; padding: var(--space-1) 0; }
  .cc-tray-arrow::before { content: "\2193"; }
  .cc-san-metrics, .cc-fac-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* D01 PART 07 — Operational Exception & Attention Queue. Consolidated, severity-ordered exception
   list rendered in the main workspace column (never the tablet-hidden context panel, G-06).
   Restrained hierarchy: only the severity chip and the item's left accent carry severity color;
   status reuses the D00 status-badge vocabulary; actions reuse the PART 04 cc-sup-action styles. */
.cc-q-count { color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.cc-queue-empty { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.cc-q-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.cc-q-item { padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-left: 4px solid var(--color-neutral-400); border-radius: var(--radius-md); }
.cc-q-item--critical, .cc-q-item--major { border-left-color: var(--color-danger); }
.cc-q-item--warning { border-left-color: var(--color-warning); }
.cc-q-item--info { border-left-color: var(--color-info); }
.cc-q-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.cc-q-sev { font-size: var(--font-size-xs); font-weight: 800; letter-spacing: 0.06em; padding: 0.1rem 0.45rem; border-radius: var(--radius-sm); border: 1px solid currentColor; }
.cc-q-item--critical .cc-q-sev, .cc-q-item--major .cc-q-sev { color: var(--color-danger); }
.cc-q-item--warning .cc-q-sev { color: var(--color-warning); }
.cc-q-item--info .cc-q-sev { color: var(--color-info); }
.cc-q-domain { color: var(--color-primary-700); font-size: var(--font-size-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.cc-q-status { margin-left: auto; }
.cc-q-title { margin: var(--space-2) 0 0; color: var(--color-primary-900); font-size: var(--font-size-md); font-weight: 750; }
.cc-q-desc { margin: var(--space-2) 0 0; color: var(--color-text); font-size: var(--font-size-sm); }
.cc-q-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--space-3); margin: var(--space-3) 0 0; }
.cc-q-field dt { font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.cc-q-field dd { margin: var(--space-1) 0 0; font-size: var(--font-size-sm); font-weight: 700; color: var(--color-primary-900); font-variant-numeric: tabular-nums; }
.cc-q-field--action dd { font-weight: 400; }
@media (max-width: 47.99rem) {
  .cc-q-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cc-q-status { margin-left: 0; width: 100%; }
}

/* D02 PART 02 — Beneficiary & School/Point Overview. Additive planning styles (.pl-*).
   Reuses D00 tokens, tables, and status badges. Operational layout overrides the centered
   placeholder container (G-D02-05). No decorative KPI cards. */
.workspace-container.pl-view { display: block; place-items: unset; min-height: 0; padding: var(--space-5); }
.pl-view { display: block; min-height: 0; }
.pl { display: block; }
.pl-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-4); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.pl-header-name { color: var(--color-primary-900); font-weight: 750; }
.pl-header-div { color: var(--color-neutral-400); }
.pl-header-date { font-variant-numeric: tabular-nums; }
.pl-demo-tag { margin-left: var(--space-2); padding: 0.15rem 0.5rem; border: 1px solid var(--color-info); color: var(--color-info); border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: 750; letter-spacing: 0.08em; }
.pl-loading, .pl-error, .pl-unavailable { padding: var(--space-5) 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.pl-section { padding: var(--space-5) 0; border-top: 1px solid var(--color-border); }
.pl-section:first-of-type { border-top: 0; }
.pl-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: wrap; }
.pl-count { color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.pl-note { margin: 0 0 var(--space-4); color: var(--color-text-muted); font-size: var(--font-size-sm); max-width: 48rem; }
.pl-note strong { color: var(--color-primary-900); }
.pl-subhead { margin: var(--space-4) 0 var(--space-3); color: var(--color-primary-900); font-size: var(--font-size-sm); font-weight: 750; }
.pl-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-3); margin: 0; }
.pl-metric { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4); background: var(--color-neutral-050); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.pl-metric dt { font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.pl-metric dd { margin: 0; font-size: var(--font-size-lg); font-weight: 800; color: var(--color-primary-900); font-variant-numeric: tabular-nums; }
.pl-muted { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.pl-row-flag td { background: var(--color-warning-surface); }
.pl-action { min-height: 2.5rem; padding: 0.5rem 0.9rem; border: 1px solid var(--color-primary-500); border-radius: var(--radius-sm); background: var(--color-white); color: var(--color-primary-700); font-weight: 700; }
.pl-action-neutral { font-size: var(--font-size-sm); font-weight: 700; color: var(--color-text-muted); }
@media (max-width: 47.99rem) {
  .pl-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workspace-container.pl-view { padding: var(--space-4); }
}

/* D02 PART 03 — Service Calendar & Meal Demand. Additive calendar + reconciliation styles. */
.pl-cal th, .pl-cal td { text-align: center; white-space: nowrap; }
.pl-cal th:first-child, .pl-cal td:first-child, .pl-cal th[scope="row"] { text-align: left; }
.pl-cal-date { display: block; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--color-text-muted); }
.pl-cal-today { background: var(--color-info-surface); }
.pl-metric-text { font-size: var(--font-size-sm) !important; font-weight: 700 !important; }
.pl tfoot th, .pl tfoot td { font-weight: 800; color: var(--color-primary-900); font-variant-numeric: tabular-nums; }

/* D02 PART 04 — Menu Planning. Highlight the demo operating date in the weekly cycle. */
.pl-row-today td, .pl-row-today th { background: var(--color-info-surface); }

/* D02 PART 05 — Recipe / BOM / Yield specification blocks. */
.pl-recipe { margin: 0 0 var(--space-5); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border); }
.pl-recipe:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.pl-recipe .pl-subhead { margin-top: 0; }

/* D02 PART 07 — Portion application & material-requirement lineage. */
.pl-lineage { display: block; margin-top: 0.15rem; color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 500; letter-spacing: 0; text-transform: none; }

/* D02 PART 08 — Cross-flow chain, visual emphasis, tablet stacking. Additive only. */
.pl-honesty, .pl-chain-facts { margin: 0 0 var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-xs); max-width: 48rem; }
.pl-chain { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); }
.pl-chain-step { display: inline-flex; align-items: center; }
.pl-chain-arrow { color: var(--color-neutral-400); }
.pl-chain-current { font-size: var(--font-size-sm); font-weight: 800; color: var(--color-primary-900); }
.pl-chain .pl-action { min-height: 2.25rem; padding: 0.35rem 0.7rem; font-size: var(--font-size-sm); }
.pl-action-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.pl-focus-note { border-left: 4px solid var(--color-primary-500); padding-left: var(--space-3); }
.pl-focus, tr.pl-focus td, tr.pl-focus th, article.pl-focus { background: var(--color-info-surface); box-shadow: inset 4px 0 0 var(--color-primary-700); }
.pl-action:hover { background: var(--color-primary-700); color: var(--color-white); }
@media (max-width: 63.99rem) {
  .pl-chain { gap: var(--space-1) var(--space-2); }
}
@media (max-width: 47.99rem) {
  .pl-chain { flex-direction: column; align-items: flex-start; }
  .pl-chain-arrow { display: none; }
  .pl-action-row { width: 100%; }
  .pl-action { width: 100%; }
  .pl-cal { font-size: var(--font-size-xs); }
}


/* D03 PART 02 — Supplier Master, Qualification & Governance. Structured main-column
   register and governance sections; no sourcing/PO workflow controls. */
.workspace-container.sp-view { display: block; place-items: unset; min-height: 0; padding: var(--space-5); }
.sp-view { display: block; min-height: 0; }
.sp { display: block; }
.sp-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.sp-header-name { color: var(--color-primary-900); font-weight: 750; }
.sp-header-div { color: var(--color-neutral-400); }
.sp-demo-tag { margin-left: var(--space-2); padding: 0.15rem 0.5rem; border: 1px solid var(--color-info); color: var(--color-info); border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: 750; letter-spacing: 0.08em; }
.sp-honesty { margin: 0 0 var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-xs); max-width: 52rem; }
.sp-loading, .sp-error, .sp-unavailable { padding: var(--space-5) 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.sp-section { padding: var(--space-5) 0; border-top: 1px solid var(--color-border); }
.sp-section:first-of-type { border-top: 0; }
.sp-section-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-3); }
.sp-title { margin: var(--space-1) 0 0; color: var(--color-primary-900); font-size: var(--font-size-xl); line-height: 1.2; }
.sp-note { max-width: 52rem; margin: 0 0 var(--space-4); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.sp-count { color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.sp-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-3); margin: 0; }
.sp-metric { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4); background: var(--color-neutral-050); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.sp-metric.is-review { border-left: 4px solid var(--color-warning); background: var(--color-warning-surface); }
.sp-metric dt, .sp-policy dt { color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.sp-metric dd { margin: 0; color: var(--color-primary-900); font-size: var(--font-size-lg); font-weight: 800; font-variant-numeric: tabular-nums; }
.sp-table th, .sp-table td { vertical-align: top; }
.sp-table strong { color: var(--color-primary-900); }
.sp-subline { display: block; margin-top: 0.2rem; color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 500; white-space: normal; }
.sp-row-review td { background: var(--color-warning-surface); }
.sp-capability-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--space-3); }
.sp-capability { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.sp-capability-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.sp-capability-head h3 { margin: 0; color: var(--color-primary-900); font-size: var(--font-size-md); }
.sp-capability-head p { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.sp-indicators { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-3) 0 0; }
.sp-indicator { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-2); align-items: baseline; }
.sp-indicator dt { color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 700; }
.sp-indicator dd { margin: 0; color: var(--color-primary-900); font-size: var(--font-size-sm); font-weight: 800; font-variant-numeric: tabular-nums; }
.sp-bar { grid-column: 1 / -1; display: block; height: 0.3rem; overflow: hidden; border-radius: var(--radius-sm); background: var(--color-neutral-200); }
.sp-bar span { display: block; height: 100%; background: var(--color-primary-500); }
.sp-disclosure-note { max-width: 52rem; margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-left: 4px solid var(--color-info); background: var(--color-info-surface); color: var(--color-text); font-size: var(--font-size-sm); }
.sp-policy { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-3); }
.sp-policy > div { padding: var(--space-3); border: 1px solid var(--color-border); background: var(--color-neutral-050); }
.sp-policy > div.is-review { border-left: 4px solid var(--color-warning); background: var(--color-warning-surface); }
.sp-policy dd { margin: var(--space-1) 0 0; color: var(--color-primary-900); font-size: var(--font-size-md); font-weight: 800; font-variant-numeric: tabular-nums; }
.sp-concentration { margin: 0 0 var(--space-4); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.sp-concentration.is-review { padding: var(--space-3) var(--space-4); border-left: 4px solid var(--color-warning); background: var(--color-warning-surface); color: var(--color-primary-900); }
@media (max-width: 63.99rem) {
  .sp-capability-list { grid-template-columns: 1fr; }
}
@media (max-width: 47.99rem) {
  .workspace-container.sp-view { padding: var(--space-4); }
  .sp-metrics, .sp-policy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-indicators { grid-template-columns: 1fr; }
  .sp-section-head { align-items: flex-start; }
  .sp-demo-tag { margin-left: 0; }
}


/* D03 PART 03 — Versioned material specification, AQL/acceptance, and supplier-source map.
   Read-only controls; no inspection sampling, receiving result, RFQ, or PO action. */
.sp-material-list { display: flex; flex-direction: column; gap: var(--space-5); }
.sp-material-control { padding: var(--space-5); border: 1px solid var(--color-border); border-left: 4px solid var(--color-primary-500); border-radius: var(--radius-md); background: var(--color-surface); }
.sp-material-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.sp-material-head h3 { margin: var(--space-1) 0 0; color: var(--color-primary-900); font-size: var(--font-size-lg); }
.sp-material-head p:not(.section-kicker) { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.sp-material-status { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 800; }
.sp-control-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--space-3); margin: var(--space-4) 0; }
.sp-control-meta > div { min-width: 0; }
.sp-control-meta dt, .sp-aql-metrics dt { color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.sp-control-meta dd, .sp-aql-metrics dd { margin: var(--space-1) 0 0; overflow-wrap: anywhere; color: var(--color-primary-900); font-size: var(--font-size-sm); font-weight: 750; font-variant-numeric: tabular-nums; }
.sp-quality-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-4); }
.sp-quality-grid > div { padding: var(--space-3); border: 1px solid var(--color-border); background: var(--color-neutral-050); }
.sp-quality-grid h4, .sp-aql h4, .sp-source-title { margin: 0 0 var(--space-2); color: var(--color-primary-900); font-size: var(--font-size-sm); }
.sp-quality-grid p, .sp-aql p { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-xs); line-height: 1.55; }
.sp-aql { margin: 0 0 var(--space-4); padding: var(--space-4); border: 1px solid var(--color-info); border-radius: var(--radius-md); background: var(--color-info-surface); }
.sp-aql-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); }
.sp-aql-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-3); margin: var(--space-3) 0; }
.sp-aql p + p { margin-top: var(--space-2); }
.sp-forward-trace { margin-top: var(--space-3) !important; padding-top: var(--space-3); border-top: 1px solid var(--color-info); color: var(--color-primary-900) !important; }
.sp-source-title { margin-top: 0; }
.sp-source-map td:last-child { min-width: 14rem; white-space: normal; }
@media (max-width: 63.99rem) {
  .sp-quality-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 47.99rem) {
  .sp-material-control { padding: var(--space-4); }
  .sp-control-meta, .sp-quality-grid, .sp-aql-metrics { grid-template-columns: 1fr; }
  .sp-material-status { width: 100%; }
}


/* D03 PART 04 — Read-only procurement sourcing chain. Main-column intake, PR, RFQ,
   quotations, mandatory gates, multi-factor comparison, and reference variance. */
.workspace-container.pc-view { display: block; place-items: unset; min-height: 0; padding: var(--space-5); }
.pc-view { display: block; min-height: 0; }
.pc { display: block; }
.pc-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.pc-header-name { color: var(--color-primary-900); font-weight: 750; }
.pc-header-div { color: var(--color-neutral-400); }
.pc-demo-tag { margin-left: var(--space-2); padding: 0.15rem 0.5rem; border: 1px solid var(--color-info); color: var(--color-info); border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: 750; letter-spacing: 0.08em; }
.pc-honesty { max-width: 54rem; margin: 0 0 var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-xs); }
.pc-loading, .pc-error, .pc-unavailable { padding: var(--space-5) 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.pc-section { padding: var(--space-5) 0; border-top: 1px solid var(--color-border); }
.pc-section:first-of-type { border-top: 0; }
.pc-section-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-3); }
.pc-title { margin: var(--space-1) 0 0; color: var(--color-primary-900); font-size: var(--font-size-lg); line-height: 1.2; }
.pc-note { max-width: 54rem; margin: 0 0 var(--space-4); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.pc-count { color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.pc-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-4); }
.pc-metrics > div { min-width: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-neutral-050); }
.pc-metrics > div.is-review { border-left: 4px solid var(--color-warning); background: var(--color-warning-surface); }
.pc-metrics dt, .pc-quote-meta dt { color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.pc-metrics dd, .pc-quote-meta dd { margin: var(--space-1) 0 0; color: var(--color-primary-900); font-size: var(--font-size-lg); font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pc-metric-text { font-size: var(--font-size-sm) !important; }
.pc-table th, .pc-table td { vertical-align: top; }
.pc-table strong { color: var(--color-primary-900); }
.pc-subline { display: block; margin-top: 0.2rem; color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 500; white-space: normal; }
.pc-row-review td { background: var(--color-warning-surface); }
.pc-row-ineligible td { background: var(--color-danger-surface); }
.pc-row-recommended td { background: var(--color-info-surface); }
.pc-quote-list { display: flex; flex-direction: column; gap: var(--space-4); }
.pc-quote { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.pc-quote-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.pc-quote-head h3 { margin: 0; color: var(--color-primary-900); font-size: var(--font-size-md); }
.pc-quote-head p { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.pc-quote-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-3); margin: var(--space-3) 0; }
.pc-quote-meta dd { font-size: var(--font-size-sm); }
.pc-recommendation { max-width: 54rem; margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-left: 4px solid var(--color-info); background: var(--color-info-surface); color: var(--color-text); font-size: var(--font-size-sm); }
.pc-score { color: var(--color-primary-900); font-weight: 800; font-variant-numeric: tabular-nums; }
.pc-gates { display: grid; grid-template-columns: repeat(2, minmax(8rem, 1fr)); gap: var(--space-2); min-width: 20rem; }
.pc-gate { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: var(--font-size-xs); }
.pc-comparison th { min-width: 7rem; }
.pc-comparison th:first-child { min-width: 14rem; }
.pc-comparison th:last-child { min-width: 22rem; }
@media (max-width: 63.99rem) {
  .pc-quote { padding: var(--space-3); }
  .pc-gates { grid-template-columns: 1fr; min-width: 12rem; }
  .pc-comparison th:last-child { min-width: 14rem; }
}
@media (max-width: 47.99rem) {
  .workspace-container.pc-view { padding: var(--space-4); }
  .pc-metrics, .pc-quote-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pc-section-head, .pc-quote-head { align-items: flex-start; }
  .pc-demo-tag { margin-left: 0; }
  .pc-recommendation { padding: var(--space-3); }
}


/* D03 PART 05 — Price authority, award decision, and procurement approval visibility.
   Read-only governance evidence; no PO commitment or downstream execution. */
.pc-authority { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-3); }
.pc-authority > div { padding: var(--space-3); border: 1px solid var(--color-border); background: var(--color-neutral-050); }
.pc-authority dt, .pc-override-meta dt, .pc-approval dt, .pc-disclosure dt { color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.pc-authority dd { margin: var(--space-1) 0 0; color: var(--color-primary-900); font-size: var(--font-size-md); font-weight: 800; font-variant-numeric: tabular-nums; }
.pc-policy-note { max-width: 54rem; margin: 0 0 var(--space-4); color: var(--color-text-muted); font-size: var(--font-size-xs); }
.pc-override { margin-top: var(--space-4); padding: var(--space-4); border: 1px solid var(--color-warning); border-left: 4px solid var(--color-warning); border-radius: var(--radius-md); background: var(--color-warning-surface); }
.pc-override-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }
.pc-override-head h3 { margin: var(--space-1) 0 0; color: var(--color-primary-900); font-size: var(--font-size-md); }
.pc-override > p { margin: var(--space-3) 0 0; color: var(--color-text); font-size: var(--font-size-sm); }
.pc-override-meta, .pc-approval { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-3); margin: var(--space-4) 0 0; }
.pc-override-meta dd, .pc-approval dd, .pc-disclosure dd { margin: var(--space-1) 0 0; color: var(--color-primary-900); font-size: var(--font-size-sm); font-weight: 700; overflow-wrap: anywhere; }
.pc-override-meta dd span, .pc-approval dd span { display: block; margin-top: 0.15rem; color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 500; }
.pc-residual { padding-top: var(--space-3); border-top: 1px solid var(--color-warning); }
.pc-no-override { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border-left: 4px solid var(--color-success); background: var(--color-neutral-050); color: var(--color-primary-900); font-size: var(--font-size-sm); }
.pc-award-decision { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-4); padding: var(--space-4); border: 1px solid var(--color-info); border-left: 4px solid var(--color-info); border-radius: var(--radius-md); background: var(--color-info-surface); }
.pc-award-decision.is-blocked { border-color: var(--color-danger); background: var(--color-danger-surface); }
.pc-award-decision > div { min-width: 0; }
.pc-award-decision span { display: block; color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.pc-award-decision strong { display: block; margin-top: var(--space-1); color: var(--color-primary-900); font-size: var(--font-size-md); overflow-wrap: anywhere; }
.pc-award-decision small { display: block; margin-top: var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-xs); }
.pc-award-rationale { max-width: 54rem; margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-left: 4px solid var(--color-primary-500); background: var(--color-neutral-050); color: var(--color-text); font-size: var(--font-size-sm); }
.pc-approval { margin-bottom: var(--space-4); }
.pc-approval > div { min-width: 0; padding: var(--space-3); border: 1px solid var(--color-border); background: var(--color-neutral-050); }
.pc-disclosure { margin: 0 0 var(--space-4); padding: var(--space-4); border: 1px solid var(--color-info); border-left: 4px solid var(--color-info); border-radius: var(--radius-md); background: var(--color-info-surface); }
.pc-disclosure.is-review { border-color: var(--color-warning); background: var(--color-warning-surface); }
.pc-disclosure > div:first-child { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); }
.pc-disclosure > p { margin: var(--space-3) 0; color: var(--color-text); font-size: var(--font-size-sm); }
.pc-disclosure dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--space-3); margin: 0; }
.pc-disclosure-rule { padding-top: var(--space-3); border-top: 1px solid var(--color-info); color: var(--color-primary-900) !important; font-weight: 700; }
@media (max-width: 63.99rem) {
  .pc-award-decision { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 47.99rem) {
  .pc-authority, .pc-override-meta, .pc-approval, .pc-disclosure dl, .pc-award-decision { grid-template-columns: 1fr; }
  .pc-override, .pc-disclosure { padding: var(--space-3); }
}


/* D03 PART 06 — Purchase Order commercial commitment and future D04 handoff contract.
   Read-only lineage; no receiving, QC, lot, stock, invoice, or payment execution. */
.pc-po-header { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-4); }
.pc-po-header > div { min-width: 0; padding: var(--space-3); border: 1px solid var(--color-border); background: var(--color-neutral-050); }
.pc-po-header dt, .pc-handoff-fields dt { color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.pc-po-header dd { margin: var(--space-1) 0 0; color: var(--color-primary-900); font-size: var(--font-size-sm); font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pc-po-header dd span { display: block; margin-top: 0.15rem; color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 500; }
.pc-delivery { display: grid; grid-template-columns: minmax(0, 2fr) minmax(13rem, 1fr); gap: var(--space-4); align-items: start; margin: 0 0 var(--space-4); padding: var(--space-4); border: 1px solid var(--color-info); border-left: 4px solid var(--color-info); border-radius: var(--radius-md); background: var(--color-info-surface); }
.pc-delivery h3 { margin: var(--space-1) 0 0; color: var(--color-primary-900); font-size: var(--font-size-md); }
.pc-delivery p { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.pc-handoff-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-4); }
.pc-handoff-fields > div { min-width: 0; padding: var(--space-3); border: 1px solid var(--color-border); background: var(--color-neutral-050); }
.pc-handoff-fields dd { margin: var(--space-1) 0 0; color: var(--color-primary-900); font-size: var(--font-size-xs); font-weight: 700; overflow-wrap: anywhere; }
.pc-boundary { max-width: 58rem; margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-left: 4px solid var(--color-primary-500); background: var(--color-neutral-050); color: var(--color-text); font-size: var(--font-size-sm); }
.pc-po-table th { min-width: 9rem; }
.pc-po-table th:nth-child(7), .pc-po-table th:nth-child(9) { min-width: 17rem; }
@media (max-width: 63.99rem) {
  .pc-delivery { grid-template-columns: 1fr; }
}
@media (max-width: 47.99rem) {
  .pc-po-header, .pc-handoff-fields { grid-template-columns: 1fr; }
  .pc-delivery { padding: var(--space-3); }
}


/* D03 PART 07 — Controlled emergency procurement, recorded supplier performance,
   and claim foundation. Read-only; no D04 or financial execution. */
.pc-emergency-list, .sp-claim-list { display: flex; flex-direction: column; gap: var(--space-4); }
.pc-emergency { padding: var(--space-4); border: 1px solid var(--color-warning); border-left: 4px solid var(--color-warning); border-radius: var(--radius-md); background: var(--color-warning-surface); }
.pc-emergency-head, .sp-claim-head, .sp-disposition > div:first-child { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); }
.pc-emergency-head h3, .sp-claim-head h3 { margin: var(--space-1) 0 0; color: var(--color-primary-900); font-size: var(--font-size-md); }
.pc-emergency-reason, .sp-claim-reason { margin: var(--space-3) 0; color: var(--color-text); font-size: var(--font-size-sm); }
.pc-emergency-meta, .sp-claim-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-4); }
.pc-emergency-meta dt, .pc-post-review dt, .sp-claim-meta dt { color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.pc-emergency-meta dd, .pc-post-review dd, .sp-claim-meta dd { margin: var(--space-1) 0 0; color: var(--color-primary-900); font-size: var(--font-size-sm); font-weight: 700; overflow-wrap: anywhere; }
.pc-emergency-meta dd span, .sp-claim-meta dd span { display: block; margin-top: 0.15rem; color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 500; }
.pc-control-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-3); }
.pc-control-lists > div { padding: var(--space-3); border: 1px solid var(--color-border); background: var(--color-surface); }
.pc-control-lists h4 { margin: 0 0 var(--space-2); color: var(--color-primary-900); font-size: var(--font-size-sm); }
.pc-control-lists ul { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.pc-control-lists li { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text); font-size: var(--font-size-xs); }
.pc-post-review { margin-top: var(--space-4); padding: var(--space-3); border: 1px solid var(--color-warning); background: var(--color-surface); }
.pc-post-review > div:first-child { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); }
.pc-post-review dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-3); margin: var(--space-3) 0 0; }
.sp-claim { padding: var(--space-4); border: 1px solid var(--color-border); border-left: 4px solid var(--color-info); border-radius: var(--radius-md); background: var(--color-surface); }
.sp-claim-meta { margin-bottom: var(--space-3); }
.sp-disposition { padding: var(--space-3); border: 1px solid var(--color-info); background: var(--color-info-surface); }
.sp-disposition p { margin: var(--space-2) 0 0; color: var(--color-text); font-size: var(--font-size-sm); }
.sp-claim-boundary { padding-top: var(--space-3); border-top: 1px solid var(--color-info); color: var(--color-primary-900) !important; }
@media (max-width: 63.99rem) {
  .pc-control-lists { grid-template-columns: 1fr; }
}
@media (max-width: 47.99rem) {
  .pc-emergency, .sp-claim { padding: var(--space-3); }
  .pc-emergency-meta, .pc-post-review dl, .sp-claim-meta { grid-template-columns: 1fr; }
}


/* D03 PART 08 — guarded Supply cross-flow navigation and role-context presentation. */
.sx-integration { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-left: 4px solid var(--color-primary-500); border-radius: var(--radius-md); background: var(--color-neutral-050); }
.sx-nav { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.sx-nav-action { min-height: 2.25rem; padding: 0.35rem 0.7rem; border: 1px solid var(--color-primary-500); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-primary-700); font-size: var(--font-size-sm); font-weight: 750; cursor: pointer; }
.sx-nav-action:hover, .sx-nav-action:focus-visible { background: var(--color-primary-700); color: var(--color-white); }
.sx-nav-current { color: var(--color-primary-900); font-size: var(--font-size-sm); font-weight: 800; }
.sx-nav-neutral { color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 700; }
.sx-arrow { color: var(--color-neutral-400); }
.sx-facts, .sx-role { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.sx-role strong { color: var(--color-primary-900); }
@media (max-width: 63.99rem) {
  .sx-integration { padding: var(--space-3); }
}
@media (max-width: 47.99rem) {
  .sx-nav { align-items: stretch; flex-direction: column; }
  .sx-arrow { display: none; }
  .sx-nav-action { width: 100%; }
}

/* D04 PART 02 — Inbound appointment and PO receiving. Read-only quantity
   reconciliation; no QC execution, lot posting, put-away, or issue. */
.workspace-container.rv-view { display: block; place-items: unset; min-height: 0; padding: var(--space-5); }
.rv-view { display: block; min-height: 0; }
.rv { display: block; }
.rv-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.rv-header-name { color: var(--color-primary-900); font-weight: 750; }
.rv-header-div { color: var(--color-neutral-400); }
.rv-demo-tag { margin-left: var(--space-2); padding: 0.15rem 0.5rem; border: 1px solid var(--color-info); color: var(--color-info); border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: 750; letter-spacing: 0.08em; }
.rv-honesty, .rv-boundary { max-width: 54rem; margin: 0 0 var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-xs); }
.rv-boundary { padding: var(--space-3) var(--space-4); border-left: 4px solid var(--color-primary-500); background: var(--color-neutral-050); color: var(--color-text); font-size: var(--font-size-sm); }
.rv-loading, .rv-error, .rv-unavailable { padding: var(--space-5) 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.rv-section { padding: var(--space-5) 0; border-top: 1px solid var(--color-border); }
.rv-section:first-of-type { border-top: 0; }
.rv-section-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-3); }
.rv-title { margin: var(--space-1) 0 0; color: var(--color-primary-900); font-size: var(--font-size-lg); line-height: 1.2; }
.rv-note { max-width: 54rem; margin: 0 0 var(--space-4); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.rv-count { color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.rv-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-4); }
.rv-metrics > div { min-width: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-neutral-050); }
.rv-metrics > div.is-review { border-left: 4px solid var(--color-warning); background: var(--color-warning-surface); }
.rv-metrics dt { color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.rv-metrics dd { margin: var(--space-1) 0 0; color: var(--color-primary-900); font-size: var(--font-size-lg); font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rv-metric-text { font-size: var(--font-size-sm) !important; }
.rv-table th, .rv-table td { vertical-align: top; }
.rv-subline { display: block; margin-top: 0.2rem; color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 500; white-space: normal; }
.rv-row-review td { background: var(--color-warning-surface); }
.rv-receipt-list, .rv-exception-list { display: flex; flex-direction: column; gap: var(--space-4); }
.rv-receipt { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.rv-receipt-head, .rv-exception-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-3); }
.rv-receipt-head h3, .rv-exception-head h3 { margin: var(--space-1) 0 0; color: var(--color-primary-900); font-size: var(--font-size-md); }
.rv-receipt-head p { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.rv-exception { padding: var(--space-4); border: 1px solid var(--color-warning); border-left: 4px solid var(--color-warning); border-radius: var(--radius-md); background: var(--color-warning-surface); }
.rv-exception p { margin: var(--space-3) 0; color: var(--color-text); font-size: var(--font-size-sm); }
.rv-exception dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-3); margin: 0; }
.rv-exception dt { color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.rv-exception dd { margin: var(--space-1) 0 0; color: var(--color-primary-900); font-size: var(--font-size-sm); font-weight: 700; }
.rv-forward { max-width: 54rem; margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4); border-left: 4px solid var(--color-info); background: var(--color-info-surface); color: var(--color-text); font-size: var(--font-size-sm); }
@media (max-width: 63.99rem) {
  .workspace-container.rv-view { padding: var(--space-4); }
}
@media (max-width: 47.99rem) {
  .workspace-container.rv-view { padding: var(--space-3); }
  .rv-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rv-exception dl { grid-template-columns: 1fr; }
  .rv-demo-tag { margin-left: 0; }
}

/* CR-UI-RESP-06 — Mobile/tablet UI polish & density.
   Presentation only. Does not change business facts, routes, or services.
   Desktop (≥64rem / 1440) keeps the enterprise shell; compact rules target
   360–430 phones and 768/1024 tablets. */

.workspace-container.cc-view {
  display: block;
  place-items: unset;
  min-height: 0;
}

.status-badge {
  vertical-align: middle;
  line-height: 1.2;
  gap: 0.35rem;
}

.cc-demo-tag,
.pl-demo-tag,
.sp-demo-tag,
.pc-demo-tag {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  white-space: nowrap;
}

.table-wrap {
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}

.context-control select {
  min-width: 0;
  text-overflow: ellipsis;
}

@media (min-width: 80rem) {
  .context-control select { max-width: 12rem; }
  .profile-context .context-control select { max-width: 15rem; }
}

@media (min-width: 1200px) {
  .workspace { padding-bottom: calc(var(--space-6) + 3.25rem); }
  .network-status { padding: 0.35rem 0.6rem; }
}

@media (min-width: 1200px) and (max-width: 89.99rem) {
  .cc-flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
  }
  .cc-flow-arrow { display: none; }
  .cc-flow-stage { min-width: 0; }
}

/* Tablet portrait + landscape below the desktop breakpoint */
@media (max-width: 1199px) {
  .profile-name { display: none; }
  .header-search { display: none; }
  .header-tools .icon-button:not(.sidebar-toggle) { display: none; }

  .header-context { gap: var(--space-2); }
  .context-control select { max-width: 12.5rem; }
  .profile-context .context-control select { max-width: 14rem; }

  .network-status {
    position: static;
    z-index: auto;
    right: auto;
    bottom: auto;
    flex: 0 0 auto;
    max-width: 7.5rem;
    padding: 0.2rem 0.45rem;
    color: #b7e0c8;
    background: transparent;
    border-color: #52738a;
    box-shadow: none;
  }
  .network-status.is-offline {
    color: #f0d48a;
    background: transparent;
    border-color: #8a7340;
  }

  .workspace { padding: var(--space-4); }
  .workspace-heading {
    gap: var(--space-3);
    margin: var(--space-4) 0 var(--space-3);
  }
  .workspace-heading h1 {
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    margin-top: var(--space-1);
  }
  .workspace-summary {
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
  }

  .cc-header,
  .pl-header,
  .sp-header,
  .pc-header {
    align-items: center;
    column-gap: 0.45rem;
    row-gap: 0.35rem;
    margin-bottom: var(--space-3);
  }
  .cc-header .status-badge,
  .pl-header .status-badge,
  .sp-header .status-badge,
  .pc-header .status-badge,
  .cc-demo-tag,
  .pl-demo-tag,
  .sp-demo-tag,
  .pc-demo-tag {
    margin-left: 0;
  }

  .cc-section,
  .pl-section,
  .sp-section,
  .pc-section { padding-block: var(--space-4); }
  .cc-section-head { margin-bottom: var(--space-3); }

  .cc-flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
  }
  .cc-flow-arrow { display: none; }
  .cc-flow-stage {
    min-width: 0;
    width: auto;
    padding: var(--space-2) var(--space-3);
  }

  .cc-tray-flow { gap: var(--space-2); }
  .cc-tray-stage { min-width: 0; padding: var(--space-2) var(--space-3); }

  .workspace-container.pl-view,
  .workspace-container.sp-view,
  .workspace-container.pc-view,
  .workspace-container.cc-view { padding: var(--space-4); }

  .sp-title { font-size: clamp(1.25rem, 2.4vw, 1.75rem); }
}

/* Phones: compact two-row header, denser cards, natural metadata wrap */
@media (max-width: 47.99rem) {
  :root { --shell-header-height: 5.5rem; }

  .global-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    column-gap: var(--space-2);
    row-gap: 0.3rem;
    min-height: var(--shell-header-height);
    height: auto;
    padding: 0.35rem 0.7rem;
  }

  .header-brand {
    flex: 1 1 auto;
    min-width: 0;
    gap: var(--space-2);
  }
  .header-brand .brand-frame { width: 1.75rem; height: 1.75rem; }
  .header-brand .brand-name { font-size: var(--font-size-sm); }
  .sidebar-toggle {
    width: 2.15rem;
    height: 2.15rem;
    font-size: 1.15rem;
  }

  .header-tools { display: contents; }
  .header-tools .profile-context { display: contents; }

  .network-status {
    order: 2;
    flex: 0 0 auto;
    max-width: 5.75rem;
    padding: 0.15rem 0.4rem;
  }

  .header-context {
    display: flex;
    order: 3;
    flex: 1 1 38%;
    justify-content: stretch;
    min-width: 0;
    gap: 0;
  }
  .context-label,
  .header-context .context-code,
  .header-context .context-status { display: none; }
  .header-context .context-control {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .header-context .context-control select,
  .profile-context .context-control select {
    width: 100%;
    max-width: none;
    min-height: 2.05rem;
    padding: 0.3rem 1.5rem 0.3rem 0.45rem;
  }

  .profile-context .context-control {
    display: block;
    order: 4;
    flex: 1 1 58%;
    min-width: 0;
  }
  .profile-button { display: none; }

  .breadcrumbs {
    flex-wrap: wrap;
    white-space: normal;
    overflow: visible;
    line-height: 1.35;
    row-gap: 0.1rem;
  }

  .workspace { padding: var(--space-3); }
  .workspace-heading {
    flex-direction: column;
    gap: var(--space-2);
    margin: var(--space-2) 0;
  }
  .workspace-heading .eyebrow { display: none; }
  .workspace-heading h1,
  h1 {
    margin-top: 0;
    font-size: 1.3rem;
    letter-spacing: -0.02em;
  }
  .workspace-summary {
    margin-top: var(--space-1);
    font-size: var(--font-size-sm);
  }
  .workspace-actions { width: auto; }

  .cc-header,
  .pl-header,
  .sp-header,
  .pc-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.55rem;
    margin-bottom: var(--space-2);
    font-size: var(--font-size-xs);
    line-height: 1.45;
  }
  .cc-header-div,
  .pl-header-div,
  .sp-header-div,
  .pc-header-div { display: none; }
  .cc-header .status-badge,
  .pl-header .status-badge,
  .sp-header .status-badge,
  .pc-header .status-badge,
  .cc-demo-tag,
  .pl-demo-tag,
  .sp-demo-tag,
  .pc-demo-tag {
    margin: 0;
  }

  .cc-section,
  .pl-section,
  .sp-section,
  .pc-section { padding-block: var(--space-3); }
  .cc-section-head,
  .pl-section-head,
  .sp-section-head,
  .pc-section-head { margin-bottom: var(--space-2); gap: var(--space-2); }

  .cc-status,
  .cc-fs-status {
    gap: var(--space-2);
    padding: var(--space-3);
  }
  .cc-status-label,
  .cc-fs-status-label { font-size: var(--font-size-md); }

  .cc-flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }
  .cc-flow-stage {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0.45rem 0.6rem;
    gap: 0.1rem;
  }
  .cc-flow-value { font-size: var(--font-size-md); }
  .cc-variance {
    gap: var(--space-3);
    margin-top: var(--space-3);
  }

  .cc-tray-flow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
  }
  .cc-tray-arrow { display: none; }
  .cc-tray-stage {
    width: auto;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0.45rem 0.6rem;
  }
  .cc-tray-value { font-size: var(--font-size-md); }

  .cc-fs-metric,
  .cc-sup-metric,
  .cc-pack-metric,
  .cc-deliv-metric,
  .cc-san-metric,
  .pl-metric,
  .sp-metric,
  .pc-metrics > div,
  .sp-policy > div,
  .pc-authority > div {
    padding: var(--space-2) var(--space-3);
  }
  .cc-fs-metric dd,
  .cc-sup-metric dd,
  .cc-pack-metric dd,
  .cc-deliv-metric dd,
  .cc-san-metric dd,
  .pl-metric dd,
  .sp-metric dd,
  .pc-metrics dd { font-size: var(--font-size-md); }

  .cc-q-item,
  .cc-fs-attention,
  .cc-sup-attention,
  .cc-deliv-attention,
  .cc-san-attention,
  .cc-facility,
  .sp-capability,
  .sp-material-control,
  .pc-quote,
  .pc-emergency,
  .sp-claim {
    padding: var(--space-3);
  }
  .cc-q-status { margin-left: 0; width: auto; }
  .cc-q-title { font-size: var(--font-size-sm); }

  .workspace-container,
  .workspace-container.pl-view,
  .workspace-container.sp-view,
  .workspace-container.pc-view,
  .workspace-container.cc-view {
    padding: var(--space-3);
    min-height: 0;
  }

  .pl-note,
  .sp-note,
  .pc-note { margin-bottom: var(--space-2); }
  .sp-title { font-size: 1.2rem; }
  .pc-title { font-size: var(--font-size-md); }

  th, td { padding: 0.5rem 0.55rem; }

  .pc-gates { min-width: 0; }
}

/* CR-UI-AUTH-01 — Demo login gate and session logout control.
   Additive presentation only. Does not change D01–D03 facts or role/SPPG data. */

.app-shell.is-login {
  min-height: 100svh;
  background: var(--color-background);
}

.login-boot {
  margin: 0;
  padding: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.login-screen {
  display: block;
  min-height: 100svh;
  min-width: 0;
  padding: var(--space-4);
  overflow: auto;
}

.login-brand-panel { display: none; }

.login-form-panel {
  width: 100%;
  max-width: 26.5rem;
  margin: 0 auto;
}

.login-card {
  display: grid;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel);
}

.login-identity {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.login-logo-plate {
  display: grid;
  width: 3.25rem;
  height: 3.25rem;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  background: #0b1220;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.login-logo-plate .brand-logo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.login-card h1 {
  margin-top: 0.15rem;
  font-size: 1.45rem;
}

.login-subtitle,
.login-honesty,
.login-hint {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.login-demo-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  width: fit-content;
  margin: 0;
  padding: 0.2rem 0.55rem;
  color: var(--color-info);
  font-size: var(--font-size-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  border: 1px solid var(--color-info);
  border-radius: var(--radius-sm);
}

.login-demo-tag .status-marker { background: currentColor; }

.login-error {
  margin: 0;
}

.login-error[hidden] { display: none; }

.login-password-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-2);
}

.login-password-toggle {
  min-height: 2.75rem;
  padding: 0 0.85rem;
  color: var(--color-primary-700);
  font-size: var(--font-size-sm);
  font-weight: 750;
  background: var(--color-white);
  border: 1px solid var(--color-primary-500);
  border-radius: var(--radius-sm);
}

.login-password-toggle:hover {
  color: var(--color-white);
  background: var(--color-primary-700);
}

.login-submit { width: 100%; }

.login-hint strong { color: var(--color-primary-900); }

.logout-button {
  min-height: 2rem;
  padding: 0.25rem 0.55rem;
  color: var(--color-white);
  font-size: var(--font-size-xs);
  font-weight: 750;
  background: transparent;
  border: 1px solid #52738a;
  border-radius: var(--radius-sm);
}

.logout-button:hover { background: #173f5d; }

.profile-context {
  grid-template-columns: auto auto;
  align-items: center;
}
.profile-context .context-control { grid-column: 1; grid-row: 1; }
.profile-context .profile-button { grid-column: 1; grid-row: 2; }
.profile-context .logout-button {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}

@media (min-width: 64rem) {
  .login-screen {
    display: grid;
    grid-template-columns: minmax(18rem, 1fr) minmax(26rem, 34rem);
    place-items: stretch;
    min-height: 100vh;
    padding: 0;
    overflow: hidden;
  }
  .login-brand-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-7);
    color: #d7e6ee;
    background: var(--color-primary-900);
  }
  .login-brand-panel .eyebrow { color: #9ec3d4; }
  .login-brand-panel h2 {
    max-width: 16rem;
    color: var(--color-white);
    font-size: clamp(1.8rem, 3vw, 2.4rem);
  }
  .login-brand-panel p { max-width: 22rem; margin: 0; }
  .login-brand-note { color: #9aabb6; font-size: var(--font-size-sm); }
  .login-form-panel {
    display: grid;
    width: auto;
    place-items: center;
    padding: var(--space-6);
    background: var(--color-background);
  }
  .login-card { padding: var(--space-6); }
}

@media (max-width: 47.99rem) {
  .login-screen { padding: var(--space-3); }
  .login-form-panel { max-width: none; }
  .login-card { padding: var(--space-4); gap: var(--space-3); }
  .login-card h1 { font-size: 1.25rem; }
  .login-logo-plate { width: 2.75rem; height: 2.75rem; }
  .logout-button {
    order: 2;
    flex: 0 0 auto;
  }
}

/* CR-UI-RESP-07 — Tablet shell breakpoint contract.
   Presentation only. Does not change auth, routes, or D01–D03 facts.
   ≤899px: off-canvas drawer, no reserved sidebar column, no icon rail.
   900–1199px: compact labeled sidebar; collapse hides it entirely.
   ≥1200px: full enterprise desktop shell. */

@media (max-width: 1199px) {
  .workspace { grid-template-columns: 1fr; }
  .workspace-inner { max-width: none; width: 100%; }
  .context-panel { display: none; }
  .nav-group-label,
  .nav-label { display: block; }
  .nav-item { justify-content: flex-start; padding-inline: var(--space-3); }
  .sidebar { padding-inline: var(--space-3); }
  .sidebar-footer {
    justify-content: flex-start;
    padding-inline: var(--space-3);
  }
  .sidebar-footer .nav-label { display: inline; }
}

@media (min-width: 900px) and (max-width: 1199px) {
  :root { --shell-sidebar-width: 14.75rem; }
  .global-header {
    grid-template-columns: var(--shell-sidebar-width) minmax(0, 1fr) auto;
    padding-inline: var(--space-4);
  }
  .app-body { grid-template-columns: var(--shell-sidebar-width) minmax(0, 1fr); }
  .sidebar-collapsed .global-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .sidebar-collapsed .app-body { grid-template-columns: minmax(0, 1fr); }
  .sidebar-collapsed .sidebar { display: none; }
}

@media (max-width: 899px) {
  .global-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding-inline: var(--space-3);
  }
  .header-product { display: none; }
  .header-context .context-label,
  .header-context .context-code { display: none; }
  .app-body { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed;
    z-index: 9;
    top: var(--shell-header-height);
    bottom: 0;
    left: 0;
    display: flex;
    width: var(--shell-sidebar-width);
    padding-inline: var(--space-3);
    transform: translateX(-100%);
    transition: transform 120ms ease-out;
    box-shadow: 2px 0 8px rgb(0 0 0 / 12%);
  }
  .sidebar-collapsed .sidebar,
  .sidebar-open .sidebar {
    display: flex;
    transform: translateX(0);
  }
  .sidebar-backdrop { display: none; }
  .sidebar-open .sidebar-backdrop,
  .sidebar-collapsed .sidebar-backdrop {
    display: block;
    position: fixed;
    z-index: 8;
    inset: 0;
    top: var(--shell-header-height);
    background: rgb(0 0 0 / 30%);
  }
  .sidebar-collapsed .app-body { grid-template-columns: 1fr; }
  .sidebar-collapsed .sidebar .nav-group-label,
  .sidebar-collapsed .sidebar .nav-label { display: block; }
  .sidebar-collapsed .sidebar .nav-item {
    justify-content: flex-start;
    padding-inline: var(--space-3);
  }
  .workspace {
    width: 100%;
    padding: var(--space-4);
    grid-template-columns: 1fr;
  }
  .workspace-inner,
  .workspace-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .breadcrumbs {
    flex-wrap: wrap;
    white-space: normal;
    overflow: visible;
  }
}

/* D04 PART 05 — Storage, put-away, cold chain, FEFO recommendation. */
.workspace-container.iv-view { display: block; place-items: unset; min-height: 0; padding: var(--space-5); }
.iv-view, .iv { display: block; min-height: 0; }
.iv-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.iv-header-name { color: var(--color-primary-900); font-weight: 750; }
.iv-header-div { color: var(--color-neutral-400); }
.iv-demo-tag { margin-left: var(--space-2); padding: 0.15rem 0.5rem; border: 1px solid var(--color-info); color: var(--color-info); border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: 750; letter-spacing: 0.08em; }
.iv-honesty, .iv-boundary { max-width: 54rem; margin: 0 0 var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-xs); }
.iv-boundary { padding: var(--space-3) var(--space-4); border-left: 4px solid var(--color-primary-500); background: var(--color-neutral-050); color: var(--color-text); font-size: var(--font-size-sm); }
.iv-loading, .iv-error, .iv-unavailable { padding: var(--space-5) 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.iv-section { padding: var(--space-5) 0; border-top: 1px solid var(--color-border); }
.iv-section-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-3); }
.iv-title { margin: var(--space-1) 0 0; color: var(--color-primary-900); font-size: var(--font-size-lg); line-height: 1.2; }
.iv-note { max-width: 54rem; margin: 0 0 var(--space-4); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.iv-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-4); }
.iv-metrics > div { min-width: 0; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-neutral-050); }
.iv-metrics > div.is-review { border-left: 4px solid var(--color-warning); background: var(--color-warning-surface); }
.iv-metrics dt { color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.iv-metrics dd { margin: var(--space-1) 0 0; color: var(--color-primary-900); font-size: var(--font-size-lg); font-weight: 800; font-variant-numeric: tabular-nums; }
.iv-metric-text { font-size: var(--font-size-sm) !important; }
.iv-table th, .iv-table td { vertical-align: top; }
.iv-subline { display: block; margin-top: 0.2rem; color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 500; }
.iv-row-review td { background: var(--color-warning-surface); }
.iv-row-next td { background: var(--color-info-surface); }
.iv-exception-list { display: flex; flex-direction: column; gap: var(--space-3); }
.iv-exception { padding: var(--space-4); border: 1px solid var(--color-warning); border-left: 4px solid var(--color-warning); border-radius: var(--radius-md); background: var(--color-warning-surface); }
.iv-exception-head { display: flex; justify-content: space-between; gap: var(--space-2); }
.iv-exception p { margin: var(--space-2) 0 0; font-size: var(--font-size-sm); }
@media (max-width: 63.99rem) { .workspace-container.iv-view { padding: var(--space-4); } }
@media (max-width: 47.99rem) {
  .workspace-container.iv-view { padding: var(--space-3); }
  .iv-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .iv-demo-tag { margin-left: 0; }
}
@media (max-width: 29.99rem) {
  .workspace-container.rv-view,
  .workspace-container.iv-view { padding: var(--space-2); }
  .rv-metrics,
  .iv-metrics { grid-template-columns: 1fr; }
  .rv-header,
  .iv-header { font-size: var(--font-size-xs); }
}

.sx-nav-action:focus-visible { outline: 2px solid var(--color-primary-700); outline-offset: 2px; }

/* D05 PART 02 — Production Requirement & Planning view. Additive `.pd-` namespace.
   Read-only planning surface for the one shared production engine. No forms or
   write controls. Reuses shared `.table-wrap`, `.status-badge`, `.section-kicker`,
   `.muted-text`, `.sr-only`. Responsive tiers match the D00 shell (63.99rem / 47.99rem). */
.pd { display: block; }
.pd-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.pd-header-name { color: var(--color-primary-900); font-weight: 750; }
.pd-header-div { color: var(--color-neutral-400); }
.pd-demo-tag { margin-left: var(--space-2); padding: 0.15rem 0.5rem; border: 1px solid var(--color-info); color: var(--color-info); border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: 750; letter-spacing: 0.08em; }
.pd-honesty { margin: 0 0 var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-xs); max-width: 52rem; }
.pd-boundary-note { max-width: 52rem; margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-left: 4px solid var(--color-warning); background: var(--color-warning-surface); color: var(--color-text); font-size: var(--font-size-sm); }
.pd-loading, .pd-error, .pd-unavailable { padding: var(--space-5) 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.pd-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-2); }
.pd-metrics > div { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4); background: var(--color-neutral-050); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.pd-metrics dt { color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.pd-metrics dd { margin: 0; color: var(--color-primary-900); font-size: var(--font-size-lg); font-weight: 800; font-variant-numeric: tabular-nums; }
.pd-section { padding: var(--space-5) 0; border-top: 1px solid var(--color-border); }
.pd-section:first-of-type { border-top: 0; }
.pd-section-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-3); }
.pd-title { margin: var(--space-1) 0 0; color: var(--color-primary-900); font-size: var(--font-size-xl); line-height: 1.2; }
.pd-note { max-width: 52rem; margin: 0 0 var(--space-4); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.pd-table th, .pd-table td { vertical-align: top; }
.pd-table strong { color: var(--color-primary-900); }
.pd-subline { display: block; margin-top: 0.2rem; color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 500; white-space: normal; }
.pd-row-catering td { background: var(--color-info-surface); }
.pd-row-attention td { background: var(--color-warning-surface); }
.pd-row-review td { background: var(--color-warning-surface); }
/* Cross-flow planning chain (mirrors the D04 `.sx-` integration strip). */
.pd-integration { padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); background: var(--color-neutral-050); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.pd-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.pd-nav-current { color: var(--color-primary-900); font-weight: 800; font-size: var(--font-size-xs); }
.pd-nav-neutral { color: var(--color-text-muted); font-size: var(--font-size-xs); font-style: italic; }
.pd-arrow { color: var(--color-neutral-400); font-size: var(--font-size-xs); }
.pd-nav-action { min-height: 2.25rem; padding: 0 var(--space-3); color: var(--color-primary-700); font-size: var(--font-size-xs); font-weight: 700; background: var(--color-surface); border: 1px solid var(--color-primary-300); border-radius: var(--radius-sm); cursor: pointer; }
.pd-nav-action:hover { background: #e0edf2; }
.pd-nav-action:focus-visible { outline: 2px solid var(--color-primary-700); outline-offset: 2px; }
.pd-facts { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.pd-chain-note { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--font-size-xs); max-width: 52rem; }
.pd-role { margin: 0 0 var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-xs); }
.pd-profile-focus { margin: 0 0 var(--space-4); color: var(--color-primary-900); font-size: var(--font-size-xs); max-width: 52rem; }
.pd-view { padding: 0; }
@media (max-width: 63.99rem) {
  .pd-metrics { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }
}
@media (max-width: 47.99rem) {
  .workspace-container.pd-view { padding: var(--space-4); }
  .pd-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-section-head { align-items: flex-start; }
  .pd-demo-tag { margin-left: 0; }
  .pd-header { font-size: var(--font-size-xs); }
}

/* D06 PART 02 — Food Safety / HACCP-CCP review view. Additive `.fs-` namespace.
   Read-only food-safety surface for the one shared food-safety engine. No forms or
   write controls. Reuses shared `.table-wrap`, `.status-badge`, `.section-kicker`.
   Mirrors the D05 `.pd-` layout; responsive tiers match the D00 shell. */
.fs { display: block; }
.fs-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.fs-header-name { color: var(--color-primary-900); font-weight: 750; }
.fs-header-div { color: var(--color-neutral-400); }
.fs-demo-tag { margin-left: var(--space-2); padding: 0.15rem 0.5rem; border: 1px solid var(--color-info); color: var(--color-info); border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: 750; letter-spacing: 0.08em; }
.fs-honesty { margin: 0 0 var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-xs); max-width: 52rem; }
.fs-boundary-note { max-width: 52rem; margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-left: 4px solid var(--color-warning); background: var(--color-warning-surface); color: var(--color-text); font-size: var(--font-size-sm); }
.fs-loading, .fs-error { padding: var(--space-5) 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.fs-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-2); }
.fs-metrics > div { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4); background: var(--color-neutral-050); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.fs-metrics dt { color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.fs-metrics dd { margin: 0; color: var(--color-primary-900); font-size: var(--font-size-lg); font-weight: 800; font-variant-numeric: tabular-nums; }
.fs-metrics .is-review dd { color: var(--color-warning); }
.fs-section { padding: var(--space-5) 0; border-top: 1px solid var(--color-border); }
.fs-section:first-of-type { border-top: 0; }
.fs-section-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-3); }
.fs-title { margin: var(--space-1) 0 0; color: var(--color-primary-900); font-size: var(--font-size-xl); line-height: 1.2; }
.fs-note { max-width: 52rem; margin: 0 0 var(--space-4); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.fs-table th, .fs-table td { vertical-align: top; }
.fs-table strong { color: var(--color-primary-900); }
.fs-table code { font-size: var(--font-size-xs); color: var(--color-primary-700); background: var(--color-neutral-050); padding: 0.05rem 0.3rem; border-radius: var(--radius-sm); }
.fs-subline { display: block; margin-top: 0.2rem; color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 500; white-space: normal; }
.fs-row-catering td { background: var(--color-info-surface); }
.fs-row-attention td { background: var(--color-warning-surface); }
.fs-row-review td { background: var(--color-danger-surface); }
.fs-integration { padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); background: var(--color-neutral-050); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.fs-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.fs-nav-neutral { color: var(--color-text-muted); font-size: var(--font-size-xs); font-style: italic; }
.fs-arrow { color: var(--color-neutral-400); font-size: var(--font-size-xs); }
.fs-nav-action { min-height: 2.25rem; padding: 0 var(--space-3); color: var(--color-primary-700); font-size: var(--font-size-xs); font-weight: 700; background: var(--color-surface); border: 1px solid var(--color-primary-300); border-radius: var(--radius-sm); cursor: pointer; }
.fs-nav-action:hover { background: #e0edf2; }
.fs-nav-action:focus-visible { outline: 2px solid var(--color-primary-700); outline-offset: 2px; }
.fs-facts { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.fs-chain-note { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--font-size-xs); max-width: 52rem; }
.fs-role { margin: 0 0 var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-xs); }
.fs-profile-focus { margin: 0 0 var(--space-4); color: var(--color-primary-900); font-size: var(--font-size-xs); max-width: 52rem; }
.fs-view { padding: 0; }
@media (max-width: 63.99rem) {
  .fs-metrics { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }
}
@media (max-width: 47.99rem) {
  .workspace-container.fs-view { padding: var(--space-4); }
  .fs-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fs-section-head { align-items: flex-start; }
  .fs-demo-tag { margin-left: 0; }
  .fs-header { font-size: var(--font-size-xs); }
}

/* D07 PART 02 — Packing Requirement & Portion Planning view. Additive `.pk-` namespace.
   Read-only planning surface over the D07 PART 01 packing foundation. No packing,
   segregation, label, seal, meal-lot, staging, or dispatch execution. */
.pk { display: block; }
.pk-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.pk-header-name { color: var(--color-primary-900); font-weight: 750; }
.pk-header-div { color: var(--color-neutral-400); }
.pk-demo-tag { margin-left: var(--space-2); padding: 0.15rem 0.5rem; border: 1px solid var(--color-info); color: var(--color-info); border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: 750; letter-spacing: 0.08em; }
.pk-loading, .pk-error { padding: var(--space-5) 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.pk-boundary-note { max-width: 52rem; margin: var(--space-2) 0 0; padding: var(--space-3) var(--space-4); border-left: 4px solid var(--color-warning); background: var(--color-warning-surface); color: var(--color-text); font-size: var(--font-size-sm); }
.pk-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-2); }
.pk-metrics > div, .pk-validation-grid > div { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4); background: var(--color-neutral-050); border: 1px solid var(--color-border); border-radius: var(--radius-md); min-width: 0; }
.pk-metrics dt, .pk-validation-grid dt { color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.pk-metrics dd, .pk-validation-grid dd { margin: 0; color: var(--color-primary-900); font-size: var(--font-size-lg); font-weight: 800; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pk-validation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-2); }
.pk-section { padding: var(--space-5) 0; border-top: 1px solid var(--color-border); }
.pk-section:first-of-type { border-top: 0; }
.pk-section-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-3); }
.pk-title { margin: var(--space-1) 0 0; color: var(--color-primary-900); font-size: var(--font-size-xl); line-height: 1.2; }
.pk-note { max-width: 52rem; margin: 0 0 var(--space-4); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.pk-table th, .pk-table td { vertical-align: top; }
.pk-table strong { color: var(--color-primary-900); }
.pk-subline { display: block; margin-top: 0.2rem; color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 500; white-space: normal; overflow-wrap: anywhere; }
.pk-chip { display: inline-flex; align-items: center; margin: 0 0.35rem 0.35rem 0; padding: 0.15rem 0.45rem; background: var(--color-neutral-050); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-primary-900); font-size: var(--font-size-xs); font-weight: 700; overflow-wrap: anywhere; }
.pk-integration { padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); background: var(--color-neutral-050); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.pk-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.pk-nav-neutral { color: var(--color-text-muted); font-size: var(--font-size-xs); font-style: italic; }
.pk-arrow { color: var(--color-neutral-400); font-size: var(--font-size-xs); }
.pk-nav-action { min-height: 2.25rem; padding: 0 var(--space-3); color: var(--color-primary-700); font-size: var(--font-size-xs); font-weight: 700; background: var(--color-surface); border: 1px solid var(--color-primary-300); border-radius: var(--radius-sm); cursor: pointer; }
.pk-nav-action:hover { background: #e0edf2; }
.pk-nav-action:focus-visible { outline: 2px solid var(--color-primary-700); outline-offset: 2px; }
.pk-facts { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.pk-chain-note { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--font-size-xs); max-width: 52rem; }
.pk-role { margin: 0 0 var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-xs); }
.pk-profile-focus { margin: 0 0 var(--space-4); color: var(--color-primary-900); font-size: var(--font-size-xs); max-width: 52rem; }
.pk-view { padding: 0; }
@media (max-width: 63.99rem) {
  .pk-metrics { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }
}
@media (max-width: 47.99rem) {
  .workspace-container.pk-view { padding: var(--space-4); }
  .pk-metrics, .pk-validation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pk-section-head { align-items: flex-start; }
  .pk-demo-tag { margin-left: 0; }
  .pk-header { font-size: var(--font-size-xs); }
}

/* D08 PART 02 — Dispatch Requirement, Manifest & Allocation read-only view.
   Additive `.dp-` namespace; no physical execution controls. */
.dp { display: block; }
.dp-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.dp-header-name { color: var(--color-primary-900); font-weight: 750; }
.dp-header-div { color: var(--color-neutral-400); }
.dp-demo-tag { margin-left: var(--space-2); padding: 0.15rem 0.5rem; border: 1px solid var(--color-info); color: var(--color-info); border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: 750; letter-spacing: 0.08em; }
.dp-honesty { margin: 0 0 var(--space-3); max-width: 55rem; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.dp-loading, .dp-error { padding: var(--space-5) 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.dp-section { padding: var(--space-5) 0; border-top: 1px solid var(--color-border); }
.dp-section:first-of-type { border-top: 0; }
.dp-section-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-3); }
.dp-title { margin: var(--space-1) 0 0; color: var(--color-primary-900); font-size: var(--font-size-xl); line-height: 1.2; }
.dp-subtitle { margin: var(--space-4) 0 var(--space-2); color: var(--color-primary-900); font-size: var(--font-size-md); }
.dp-note { max-width: 55rem; margin: 0 0 var(--space-4); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.dp-boundary-note { max-width: 55rem; margin: var(--space-3) 0 0; padding: var(--space-3) var(--space-4); border-left: 4px solid var(--color-warning); background: var(--color-warning-surface); color: var(--color-text); font-size: var(--font-size-sm); }
.dp-boundary-note code { font-size: var(--font-size-xs); overflow-wrap: anywhere; }
.dp-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-3); margin: 0; }
.dp-metrics > div, .dp-validation-grid > div { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; padding: var(--space-3) var(--space-4); background: var(--color-neutral-050); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.dp-metrics > div.is-blocked { border-left: 4px solid var(--color-danger); background: var(--color-danger-surface); }
.dp-metrics dt, .dp-validation-grid dt { color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.dp-metrics dd, .dp-validation-grid dd { margin: 0; overflow-wrap: anywhere; color: var(--color-primary-900); font-size: var(--font-size-lg); font-weight: 800; font-variant-numeric: tabular-nums; }
.dp-validation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-3); }
.dp-table th, .dp-table td { vertical-align: top; }
.dp-table strong { color: var(--color-primary-900); }
.dp-table caption.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.dp-subline { display: block; margin-top: 0.2rem; max-width: 30rem; overflow-wrap: anywhere; white-space: normal; color: var(--color-text-muted); font-size: var(--font-size-xs); font-weight: 500; }
.dp-chip { display: inline-flex; align-items: center; max-width: 100%; margin: 0 0.3rem 0.3rem 0; padding: 0.15rem 0.45rem; overflow-wrap: anywhere; background: var(--color-neutral-050); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-primary-900); font-size: var(--font-size-xs); font-weight: 700; }
.dp-integration { padding: var(--space-3) var(--space-4); margin: 0 0 var(--space-4); background: var(--color-neutral-050); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.dp-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.dp-nav-neutral { color: var(--color-text-muted); font-size: var(--font-size-xs); font-style: italic; }
.dp-arrow { color: var(--color-neutral-400); font-size: var(--font-size-xs); }
.dp-nav-action { min-height: 2.25rem; padding: 0 var(--space-3); color: var(--color-primary-700); font-size: var(--font-size-xs); font-weight: 700; background: var(--color-surface); border: 1px solid var(--color-primary-500); border-radius: var(--radius-sm); cursor: pointer; }
.dp-nav-action:hover { background: #e0edf2; }
.dp-nav-action:focus-visible { outline: 2px solid var(--color-primary-700); outline-offset: 2px; }
.dp-facts { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.dp-chain-note { max-width: 55rem; margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--font-size-xs); }
.dp-role { margin: 0 0 var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-xs); }
.dp-profile-focus { max-width: 55rem; margin: 0 0 var(--space-4); color: var(--color-primary-900); font-size: var(--font-size-xs); }
.dp-view { padding: 0; }
@media (max-width: 63.99rem) {
  .dp-metrics { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); }
}
@media (max-width: 47.99rem) {
  .workspace-container.dp-view { padding: var(--space-4); }
  .dp-metrics, .dp-validation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dp-section-head { align-items: flex-start; }
  .dp-demo-tag { margin-left: 0; }
  .dp-header { font-size: var(--font-size-xs); }
  .dp-integration { padding: var(--space-3); }
}


/* D10 PART 08 — additive read-only return/sanitation integration view. */
.d10 { display: block; min-width: 0; }
.d10-header { display:flex; flex-wrap:wrap; gap:var(--space-2); align-items:center; margin-bottom:var(--space-3); color:var(--color-text-muted); font-size:var(--font-size-sm); }
.d10-header strong { color:var(--color-primary-900); }
.d10-demo { padding:.15rem .5rem; border:1px solid var(--color-info); border-radius:var(--radius-sm); color:var(--color-info); font-size:var(--font-size-xs); font-weight:750; letter-spacing:.08em; }
.d10-profile,.d10-note { max-width:58rem; color:var(--color-text-muted); font-size:var(--font-size-sm); overflow-wrap:anywhere; }
.d10-alert { max-width:58rem; padding:var(--space-3) var(--space-4); border-left:4px solid var(--color-danger); background:var(--color-danger-surface); overflow-wrap:anywhere; }
.d10-lifecycle { display:flex; flex-wrap:wrap; gap:var(--space-2); margin:var(--space-4) 0; }
.d10-lifecycle span { padding:.25rem .5rem; border:1px solid var(--color-border); border-radius:var(--radius-sm); color:var(--color-primary-900); font-size:var(--font-size-xs); font-weight:700; }
.d10-section { min-width:0; padding:var(--space-5) 0; border-top:1px solid var(--color-border); }
.d10-section-head { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-3); }
.d10-title { margin:var(--space-1) 0 0; color:var(--color-primary-900); font-size:var(--font-size-xl); line-height:1.2; overflow-wrap:anywhere; }
.d10-metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:var(--space-3); margin:0; }
.d10-metrics>div { min-width:0; padding:var(--space-3); border:1px solid var(--color-border); border-radius:var(--radius-md); background:var(--color-neutral-050); }
.d10-metrics dt { color:var(--color-text-muted); font-size:var(--font-size-xs); font-weight:700; text-transform:uppercase; }
.d10-metrics dd { margin:.25rem 0 0; color:var(--color-primary-900); font-size:var(--font-size-lg); font-weight:800; overflow-wrap:anywhere; }
.d10-table th,.d10-table td { vertical-align:top; overflow-wrap:anywhere; word-break:break-word; }
.d10-subline { display:block; margin-top:.2rem; color:var(--color-text-muted); font-size:var(--font-size-xs); overflow-wrap:anywhere; }
.d10-loading,.d10-error { padding:var(--space-5); color:var(--color-text-muted); }
.d10-view { min-width:0; }
@media(max-width:47.99rem){.workspace-container.d10-view{padding:var(--space-4)}.d10-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.d10-title{font-size:var(--font-size-lg)}}
@media(max-width:24rem){.d10-metrics{grid-template-columns:1fr}}

/* ============================================================
   CR-UI-LAYOUT-01 PART 01 — Shared Enterprise Layout Primitives
   Presentation only. No backend, service, data, route, or
   permission semantics are changed.
   ============================================================ */

/* ---- 1. Page canvas: the route container is a canvas, not a giant card ---- */
.app-page-canvas,
.workspace-container {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: var(--page-gap);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.app-body,
.workspace,
.workspace-inner {
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

/* The placeholder "planned module" state keeps a real card of its own. */
.placeholder-state {
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel);
}

/* Completed route wrappers must never become unshrinkable grid items. */
.cc,
.pl,
.sp,
.pc,
.rv,
.iv,
.pd,
.fs,
.pk,
.dp,
.d10,
.cc-view,
.pl-view,
.sp-view,
.pc-view,
.rv-view,
.iv-view,
.pd-view,
.fs-view,
.pk-view,
.dp-view,
.d10-view {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Consistent canvas padding across all completed routes. */
.workspace-container.cc-view,
.workspace-container.pl-view,
.workspace-container.sp-view,
.workspace-container.pc-view,
.workspace-container.rv-view,
.workspace-container.iv-view,
.workspace-container.pd-view,
.workspace-container.fs-view,
.workspace-container.pk-view,
.workspace-container.dp-view,
.workspace-container.d10-view {
  padding: var(--page-gap);
}

@media (max-width: 63.99rem) {
  .workspace,
  .workspace-container,
  .workspace-container.cc-view,
  .workspace-container.pl-view,
  .workspace-container.sp-view,
  .workspace-container.pc-view,
  .workspace-container.rv-view,
  .workspace-container.iv-view,
  .workspace-container.pd-view,
  .workspace-container.fs-view,
  .workspace-container.pk-view,
  .workspace-container.dp-view,
  .workspace-container.d10-view {
    padding: var(--space-5);
  }
}

@media (max-width: 47.99rem) {
  .workspace,
  .workspace-container,
  .workspace-container.cc-view,
  .workspace-container.pl-view,
  .workspace-container.sp-view,
  .workspace-container.pc-view,
  .workspace-container.rv-view,
  .workspace-container.iv-view,
  .workspace-container.pd-view,
  .workspace-container.fs-view,
  .workspace-container.pk-view,
  .workspace-container.dp-view,
  .workspace-container.d10-view {
    padding: var(--space-3);
  }
}

/* ---- 2. Shared section primitive ---- */
.app-section {
  min-width: 0;
  padding-block: var(--section-gap);
  border-top: 1px solid var(--color-border);
}

.app-section:first-of-type {
  border-top: 0;
}

.app-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.app-section-title {
  margin: 0;
  color: var(--color-primary-900);
  font-size: var(--font-size-section-title);
  line-height: 1.25;
}

.app-section-subtitle,
.app-section-note {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

/* Migrate the existing section namespaces to the shared rhythm without
   removing the namespace classes (safe additive override). */
.pd-section,
.fs-section,
.pk-section,
.dp-section,
.d10-section,
.pl-section,
.sp-section,
.pc-section,
.rv-section,
.iv-section,
.cc-section {
  min-width: 0;
  padding-block: var(--section-gap);
  border-top: 1px solid var(--color-border);
}

.pd-section:first-of-type,
.fs-section:first-of-type,
.pk-section:first-of-type,
.dp-section:first-of-type,
.d10-section:first-of-type,
.pl-section:first-of-type,
.sp-section:first-of-type,
.pc-section:first-of-type,
.rv-section:first-of-type,
.iv-section:first-of-type,
.cc-section:first-of-type {
  border-top: 0;
}

.pd-section-head,
.fs-section-head,
.pk-section-head,
.dp-section-head,
.d10-section-head,
.pl-section-head,
.sp-section-head,
.pc-section-head,
.rv-section-head,
.iv-section-head,
.cc-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

@media (max-width: 47.99rem) {
  .pd-section,
  .fs-section,
  .pk-section,
  .dp-section,
  .d10-section,
  .pl-section,
  .sp-section,
  .pc-section,
  .rv-section,
  .iv-section,
  .cc-section {
    padding-block: var(--space-3);
  }
  .pd-section-head,
  .fs-section-head,
  .pk-section-head,
  .dp-section-head,
  .d10-section-head,
  .pl-section-head,
  .sp-section-head,
  .pc-section-head,
  .rv-section-head,
  .iv-section-head,
  .cc-section-head {
    margin-bottom: var(--space-2);
  }
}

/* ---- 3. Shared typography hierarchy ---- */
.workspace-heading .workspace-heading-title,
.workspace-heading h1 {
  font-size: var(--font-size-page-title);
}

@media (max-width: 47.99rem) {
  .workspace-heading h1 {
    font-size: 1.3rem;
  }
}

/* Section titles are clearly smaller than page titles. */
.pd .pd-title,
.fs .fs-title,
.pk .pk-title,
.dp .dp-title,
.d10 .d10-title,
.sp .sp-title,
.pc .pc-title,
.rv .rv-title,
.iv .iv-title,
.app-section-title {
  font-size: var(--font-size-section-title);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* ---- 4. Shared metric grid / metric card ---- */
.app-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--space-3);
}

.app-metric-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-neutral-050);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.app-metric-card dt,
.app-metric-label {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.app-metric-card dd,
.app-metric-value {
  margin: 0;
  color: var(--color-primary-900);
  font-size: var(--font-size-metric-value);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  min-width: 0;
}

.pd-metrics,
.fs-metrics,
.pk-metrics,
.pk-validation-grid,
.dp-metrics,
.dp-validation-grid,
.d10-metrics,
.pl-metrics,
.sp-metrics,
.pc-metrics,
.rv-metrics,
.iv-metrics,
.cc-fs-metrics,
.cc-sup-metrics,
.cc-pack-metrics,
.cc-deliv-metrics,
.cc-san-metrics,
.cc-fac-metrics {
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--space-3);
}

.pd-metrics > div,
.fs-metrics > div,
.pk-metrics > div,
.pk-validation-grid > div,
.dp-metrics > div,
.dp-validation-grid > div,
.d10-metrics > div,
.pl-metric,
.sp-metric,
.pc-metrics > div,
.rv-metrics > div,
.iv-metrics > div,
.cc-fs-metric,
.cc-sup-metric,
.cc-pack-metric,
.cc-deliv-metric,
.cc-san-metric {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  padding: var(--space-3) var(--space-4);
  background: var(--color-neutral-050);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.pd-metrics dd,
.fs-metrics dd,
.pk-metrics dd,
.pk-validation-grid dd,
.dp-metrics dd,
.dp-validation-grid dd,
.d10-metrics dd,
.pl-metric dd,
.sp-metric dd,
.pc-metrics dd,
.rv-metrics dd,
.iv-metrics dd,
.cc-fs-metric dd,
.cc-sup-metric dd,
.cc-pack-metric dd,
.cc-deliv-metric dd,
.cc-san-metric dd {
  margin: 0;
  font-size: var(--font-size-metric-value);
  overflow-wrap: anywhere;
  min-width: 0;
}

/* Tablet: stable 3-column metric behaviour so cards are not crushed nor billboard-sized. */
@media (min-width: 48rem) and (max-width: 74.99rem) {
  .app-metric-grid,
  .pd-metrics,
  .fs-metrics,
  .pk-metrics,
  .pk-validation-grid,
  .dp-metrics,
  .dp-validation-grid,
  .d10-metrics,
  .pl-metrics,
  .sp-metrics,
  .pc-metrics,
  .rv-metrics,
  .iv-metrics,
  .cc-fs-metrics,
  .cc-sup-metrics,
  .cc-pack-metrics,
  .cc-deliv-metrics,
  .cc-san-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 47.99rem) {
  .app-metric-card,
  .pd-metrics > div,
  .fs-metrics > div,
  .pk-metrics > div,
  .pk-validation-grid > div,
  .dp-metrics > div,
  .dp-validation-grid > div,
  .d10-metrics > div,
  .pl-metric,
  .sp-metric,
  .pc-metrics > div,
  .rv-metrics > div,
  .iv-metrics > div,
  .cc-fs-metric,
  .cc-sup-metric,
  .cc-pack-metric,
  .cc-deliv-metric,
  .cc-san-metric {
    padding: var(--space-2) var(--space-3);
  }
  .app-metric-card dd,
  .pd-metrics dd,
  .fs-metrics dd,
  .pk-metrics dd,
  .pk-validation-grid dd,
  .dp-metrics dd,
  .dp-validation-grid dd,
  .d10-metrics dd,
  .pl-metric dd,
  .sp-metric dd,
  .pc-metrics dd,
  .rv-metrics dd,
  .iv-metrics dd,
  .cc-fs-metric dd,
  .cc-sup-metric dd,
  .cc-pack-metric dd,
  .cc-deliv-metric dd,
  .cc-san-metric dd {
    font-size: var(--font-size-md);
  }
}

/* ---- 5. Shared table containment + long-identifier safety ---- */
.table-wrap {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

#workspace-view table {
  table-layout: auto;
  min-width: 0;
}

.pd-table th,
.pd-table td,
.fs-table th,
.fs-table td,
.pk-table th,
.pk-table td,
.dp-table th,
.dp-table td,
.d10-table th,
.d10-table td,
.sp-table th,
.sp-table td,
.pc-table th,
.pc-table td,
.rv-table th,
.rv-table td,
.iv-table th,
.iv-table td {
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}

.pd-subline,
.fs-subline,
.pk-subline,
.dp-subline,
.d10-subline,
.sp-subline,
.pc-subline,
.rv-subline,
.iv-subline,
.app-wrap-id,
.app-reference {
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
  max-width: 100%;
}

/* Chips and codes must never stretch a page; full value stays in the DOM. */
.pk-chip,
.dp-chip,
.fs-table code,
.dp-boundary-note code,
.pd-boundary-note code {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---- 6. Shared card / surface system ---- */
.app-card,
.app-surface {
  min-width: 0;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel);
}

.app-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.app-card-title {
  margin: 0;
  color: var(--color-primary-900);
  font-size: var(--font-size-card-title);
}

/* ---- 7. Shared note / boundary / honesty presentation ---- */
.app-note,
.app-boundary-note,
.app-honesty-note {
  max-width: 58rem;
  min-width: 0;
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.app-boundary-note {
  border-left: 4px solid var(--color-primary-500);
  background: var(--color-neutral-050);
  color: var(--color-text);
}

.app-honesty-note {
  border-left: 4px solid var(--color-info);
  background: var(--color-info-surface);
  color: var(--color-text);
}

/* Shared type/spacing for existing namespace descriptions and boundary notes.
   Semantic colors/statuses are intentionally left on the namespace classes. */
.pd-note,
.fs-note,
.pk-note,
.dp-note,
.d10-note,
.pl-note,
.sp-note,
.pc-note,
.rv-note,
.iv-note,
.pd-honesty,
.fs-honesty,
.dp-honesty,
.pl-honesty,
.pc-honesty,
.sp-honesty,
.rv-honesty,
.iv-honesty,
.pd-boundary-note,
.fs-boundary-note,
.pk-boundary-note,
.dp-boundary-note,
.pc-boundary,
.rv-boundary,
.iv-boundary {
  max-width: 58rem;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---- 8. Status badges: readable, compact, text-meaning first ---- */
.status-badge {
  min-height: 1.5rem;
  padding: 0.15rem 0.5rem;
  font-size: 0.72rem;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
  max-width: 100%;
}

/* ---- Shared focus treatment for shell navigation ---- */
.nav-item:focus-visible,
.sidebar-toggle:focus-visible,
.logout-button:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Generic containment for every table rendered inside the workspace,
   including plain `<table>` tables used by menu / beneficiaries / demand. */
#workspace-view table th,
#workspace-view table td {
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
  vertical-align: top;
}

/* Keep the visual calendar a contained horizontal scroll surface. */
#workspace-view table.pl-cal th,
#workspace-view table.pl-cal td {
  white-space: nowrap;
}

/* ============================================================
   CR-UI-LAYOUT-01 PART 02 — Information hierarchy & page composition
   Presentation-only composition helpers. No facts change.
   ============================================================ */

/* Long-page section index (in-page anchors, no second router). */
.pk-section-index,
.d10-section-index {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
}
.pk-section-index button,
.pk-section-index .pk-section-link,
.d10-section-index button,
.d10-section-index .d10-section-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0.2rem 0.6rem;
  color: var(--color-primary-700);
  font-size: var(--font-size-xs);
  font-weight: 700;
  text-decoration: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.pk-section-index button:hover,
.pk-section-index .pk-section-link:focus-visible,
.d10-section-index button:hover,
.d10-section-index .d10-section-link:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
  background: var(--color-neutral-100);
}

/* Grouped lifecycle/detail containers reuse the shared app-section
   rhythm and add a group heading. */
.pk-group,
.d10-group {
  min-width: 0;
  scroll-margin-top: calc(var(--shell-header-height) + 0.75rem);
}
.pk-group-title,
.d10-group-title {
  margin: 0;
  color: var(--color-primary-900);
  font-size: var(--font-size-section-title);
}

/* Compact attention list near the top of a page. */
.pk-attention-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: 1.25rem;
  color: var(--color-text);
  font-size: var(--font-size-sm);
}
.pk-attention-list li {
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Anchor targets clear the sticky application header. */
#workspace-view [id] {
  scroll-margin-top: calc(var(--shell-header-height) + 0.75rem);
}

/* Grouped sections: the first inner section inside a group should not
   re-draw its own top border immediately below the group heading. */
.pk-group .pk-section:first-of-type,
.d10-group .d10-section:first-of-type {
  border-top: 0;
}

/* Keep the page composition stack below the primary boundary on mobile. */
@media (max-width: 47.99rem) {
  .pk-section-index,
  .d10-section-index {
    gap: var(--space-1);
    margin-bottom: var(--space-3);
  }
  .pk-section-index button,
  .pk-section-index .pk-section-link,
  .d10-section-index button,
  .d10-section-index .d10-section-link {
    min-height: 1.8rem;
    padding: 0.2rem 0.5rem;
  }
}

/* ============================================================
   CR-UI-LAYOUT-01 PART 03 — Operational tables, density & data readability
   Presentation-only shared table primitives. No facts change.
   ============================================================ */

/* ---- Shared enterprise table density ---- */
#workspace-view table {
  font-size: var(--font-size-sm);
  line-height: 1.35;
  border-collapse: collapse;
}

#workspace-view table th,
#workspace-view table td {
  padding: 0.55rem 0.65rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--color-border);
  line-height: 1.4;
}

#workspace-view table thead th {
  padding-block: 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 750;
  color: var(--color-text-muted);
  background: var(--color-neutral-050);
  border-bottom: 1px solid var(--color-neutral-200);
  vertical-align: bottom;
  white-space: normal;
}

#workspace-view table tbody tr:last-child td {
  border-bottom: 0;
}

/* Table cell hierarchy: primary values are stronger, secondary/reference text
   is compact and muted. Keep full values in the DOM (no invisible truncation). */
.table-cell,
.app-table-primary,
#workspace-view table td strong {
  color: var(--color-primary-900);
  font-weight: 700;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.app-table-secondary,
.app-table-ref,
.app-table-muted,
.app-helper {
  display: block;
  margin-top: 0.18rem;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

.app-table-muted {
  color: var(--color-neutral-600);
}

.app-table-ref {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}

.app-table-nowrap {
  white-space: nowrap;
}

.app-table-wrap {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---- Shared numeric alignment ---- */
.app-table-number,
td.app-table-number,
th.app-table-number,
table .num-right,
table td[data-align="right"],
table th[data-align="right"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Status cells and badge containers stay compact and vertically aligned. */
.app-table-status,
#workspace-view table td .status-badge {
  vertical-align: middle;
}

/* Long reference/code cells: compact, never stretch the page. */
.app-table-ref,
#workspace-view table td.app-table-ref {
  min-width: 0;
  max-width: 100%;
}

/* First identifier column gets a readable floor without forcing width. */
#workspace-view table td:first-child,
#workspace-view table th:first-child {
  min-width: 0;
}

/* Keep description/context columns from being crushed. */
#workspace-view table td.has-context,
#workspace-view table td [class*="context"] {
  min-width: 12rem;
}

/* Timestamps and reference lines: compact secondary treatment. */
#workspace-view table td [class*="At"],
#workspace-view table td [class*="time"],
#workspace-view table td .timestamp {
  font-variant-numeric: tabular-nums;
}

/* Row emphasis for blocked/fail should stay scan-friendly without adding
   excessive vertical padding. */
#workspace-view table tr.pk-row-review td,
#workspace-view table tr.pd-row-review td,
#workspace-view table tr.fs-row-review td,
#workspace-view table tr.dp-row-review td,
#workspace-view table tr.rv-row-review td,
#workspace-view table tr.iv-row-review td,
#workspace-view table tr.pc-row-review td,
#workspace-view table tr.pc-row-ineligible td,
#workspace-view table tr.sp-row-review td,
#workspace-view table tr.pl-row-flag td {
  padding-block: 0.55rem;
}

/* Horizontal-scroll usability: keep focus visible inside the scroll wrapper. */
.table-wrap:focus-within {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.table-wrap::-webkit-scrollbar {
  height: 0.65rem;
}

.table-wrap::-webkit-scrollbar-thumb {
  background: var(--color-neutral-400);
  border-radius: 999px;
}

/* Tablet: slightly relaxed density while preserving readability. */
@media (max-width: 63.99rem) and (min-width: 48rem) {
  #workspace-view table th,
  #workspace-view table td {
    padding: 0.65rem 0.75rem;
  }
}

/* Mobile: preserve touch/readability, do not over-compress. */
@media (max-width: 47.99rem) {
  #workspace-view table {
    font-size: 0.8rem;
  }
  #workspace-view table th,
  #workspace-view table td {
    padding: 0.5rem 0.55rem;
  }
  #workspace-view table thead th {
    font-size: 0.7rem;
    letter-spacing: 0.04em;
  }
}

/* Reduce stacking of repeated full-width equal-weight lines inside a cell;
   the shared secondary/helper treatment groups them visually. */
#workspace-view table td br + .app-secondary,
#workspace-view table td .app-table-secondary {
  margin-top: 0.18rem;
}

/* PART 03 — map existing namespace sub-lines onto the shared secondary/helper
   treatment so every operational table gets one consistent cell hierarchy
   without page-by-page markup churn. */
.app-table-secondary,
.pd-subline,
.fs-subline,
.pk-subline,
.dp-subline,
.d10-subline,
.sp-subline,
.pc-subline,
.rv-subline,
.iv-subline {
  display: block;
  margin-top: 0.18rem;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
}

/* ============================================================
   CR-UI-LAYOUT-01 PART 04 — Navigation, header & context controls
   Presentation/interaction ergonomics only. No route, permission,
   context, service or data semantics change.
   ============================================================ */

/* Shell density tokens: compact enterprise header + proportionate sidebar. */
:root {
  --shell-header-height: 4rem;
  --shell-sidebar-width: 15.5rem;
}

/* ---- Global header: compact, coherent hierarchy ---- */
.global-header {
  grid-template-columns: var(--shell-sidebar-width) minmax(0, 1fr) auto;
  column-gap: var(--space-4);
  padding-inline: var(--space-4);
  min-height: var(--shell-header-height);
}

.header-brand {
  gap: var(--space-2);
}
.header-brand .brand-frame {
  width: 2.25rem;
  height: 2.25rem;
}
.header-brand .brand-name {
  font-size: 0.95rem;
}

.header-context {
  justify-content: flex-start;
  gap: var(--space-2) var(--space-3);
  min-width: 0;
}
.header-context .context-label {
  color: #9ec3d4;
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* The SPPG selector and its native title keep the full context value
   accessible, so the tiny code chip can be omitted for header density. */
.header-context .context-code {
  display: none;
}

/* Context controls read as one coherent control group: label + select. */
.context-control {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}
.context-control-label {
  color: #b9cfdb;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.context-control select {
  min-height: 2rem;
  max-width: 10rem;
  min-width: 0;
  padding: 0.3rem 1.7rem 0.3rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  background: #173f5d;
  border: 1px solid #66889b;
  border-radius: var(--radius-sm);
  color: var(--color-white);
  text-overflow: ellipsis;
}

/* Under 1500px the "DEMO CONTEXT" group heading is omitted so the main
   SPPG / Profile controls keep the available horizontal space. */
@media (max-width: 1499px) {
  .header-context .context-label {
    display: none;
  }
}

.header-tools {
  gap: var(--space-3);
}

/* User/profile area: compact inline, not a tall two-row block. */
.profile-context {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.profile-context .context-control {
  flex: 0 1 auto;
}
.profile-context .context-control select {
  max-width: 11rem;
}
.profile-context .profile-button {
  flex: 0 0 auto;
  min-height: 2rem;
  gap: var(--space-2);
  padding: 0;
}
.profile-context .avatar {
  width: 1.75rem;
  height: 1.75rem;
  font-size: 0.65rem;
}
.logout-button {
  flex: 0 0 auto;
}

/* ---- Sidebar: enterprise density, clear groups, strong active state ---- */
.sidebar {
  padding: var(--space-3) var(--space-2);
  background: #f7f9fb;
  border-right: 1px solid var(--color-border);
}
.sidebar-nav {
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.nav-group {
  margin-bottom: var(--space-4);
}
.nav-group-label {
  margin: 0 0 var(--space-1) var(--space-2);
  color: var(--color-text-muted);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.nav-group-items {
  gap: 2px;
}
.nav-item {
  min-height: 2.25rem;
  gap: 0.65rem;
  padding: 0 var(--space-2);
  font-size: 0.85rem;
  border-radius: var(--radius-sm);
}
.nav-icon {
  width: 1rem;
  font-size: 0.9rem;
  flex: 0 0 auto;
}
.nav-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Active route: background + inset indicator + weight, never color-only. */
.nav-item.is-active {
  color: var(--color-primary-700);
  font-weight: 750;
  background: #e0edf2;
  border-color: #c5dce4;
  box-shadow: inset 3px 0 0 var(--color-primary-700);
}
.nav-item.is-active .nav-icon {
  color: var(--color-primary-900);
}
.nav-item:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
  position: relative;
  z-index: 1;
}

.sidebar-footer {
  padding: var(--space-3) var(--space-2) 0;
  font-size: 0.65rem;
}

/* ---- Tablet shell (900–1199 and general sub-desktop) ---- */
@media (max-width: 1199px) {
  :root { --shell-header-height: 4.25rem; }
  .global-header {
    column-gap: var(--space-2);
    padding-inline: var(--space-3);
  }
  .header-context {
    gap: var(--space-1) var(--space-2);
  }
  .header-context .context-label,
  .header-context .context-code,
  .header-context .context-status {
    display: none;
  }
  .context-control select {
    max-width: 9.5rem;
  }
  .profile-context .context-control select {
    max-width: 9rem;
  }
  .header-tools .logout-button {
    padding-inline: 0.5rem;
  }
}

@media (min-width: 900px) and (max-width: 1199px) {
  :root { --shell-sidebar-width: 14.75rem; }
  .sidebar {
    padding-inline: var(--space-2);
  }
}

/* ---- Mobile shell: off-canvas remains authoritative; two-row dense header ---- */
@media (max-width: 47.99rem) {
  :root { --shell-header-height: 5rem; }

  .global-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    align-content: center;
    column-gap: var(--space-2);
    row-gap: 0.35rem;
    min-height: var(--shell-header-height);
    height: auto;
    padding: 0.5rem 0.65rem;
  }

  .header-brand {
    grid-column: 1;
    grid-row: 1;
    flex: 1 1 auto;
    min-width: 0;
    gap: var(--space-2);
  }
  .header-brand .brand-frame {
    width: 1.75rem;
    height: 1.75rem;
  }
  .header-brand .brand-name {
    font-size: 0.85rem;
  }
  .header-product {
    display: none;
  }
  .sidebar-toggle {
    width: 2.1rem;
    height: 2.1rem;
    font-size: 1.1rem;
  }

  .header-tools {
    display: contents;
  }
  .network-status {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    order: 2;
    max-width: 6rem;
    padding: 0.15rem 0.4rem;
  }

  .header-context {
    grid-column: 1 / -1;
    grid-row: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.35rem;
    order: 3;
  }
  .header-context .context-control {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
  }
  .header-context .context-control-label,
  .profile-context .context-control-label {
    font-size: 0.62rem;
  }
  .header-context .context-control select {
    width: 100%;
    max-width: none;
    min-height: 2rem;
  }

  .global-header .header-tools .profile-context {
    grid-column: 1 / -1;
    grid-row: 3;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.35rem;
    order: 4;
  }
  .profile-context .context-control {
    display: grid;
    gap: 0.12rem;
    min-width: 0;
  }
  .profile-context .context-control select {
    width: 100%;
    max-width: none;
    min-height: 2rem;
  }
  .profile-button {
    display: none;
  }
  .logout-button {
    align-self: center;
    min-height: 2rem;
  }

  .app-body {
    grid-template-columns: 1fr;
  }
}

/* Off-canvas drawer: never reserve permanent width; use a safe drawer fraction. */
@media (max-width: 899px) {
  .sidebar {
    width: min(var(--shell-sidebar-width), 84vw);
    box-shadow: 2px 0 10px rgb(0 0 0 / 16%);
  }
  /* Off-canvas route targets stay comfortable to tap. */
  .sidebar .nav-item {
    min-height: 2.5rem;
    padding-inline: var(--space-2);
  }
}

/* Collapse/compact desktop rail stays consistent with the new density. */
@media (min-width: 1200px) {
  .sidebar-collapsed .global-header {
    grid-template-columns: var(--shell-sidebar-compact) minmax(0, 1fr) auto;
  }
  .sidebar-collapsed .app-body {
    grid-template-columns: var(--shell-sidebar-compact) minmax(0, 1fr);
  }
}

/* ============================================================
   CR-UI-LAYOUT-01 PART 05 — Cards, KPI & operational visual polish
   Presentation only. No service/data/status/route/access change.
   ============================================================ */

/* ---- Shared card polish ---- */
.app-card,
.app-surface,
.cc-status,
.cc-fs-status,
.cc-fs-attention,
.cc-sup-attention,
.cc-deliv-attention,
.cc-san-attention,
.cc-facility,
.sp-capability,
.sp-material-control,
.pc-quote,
.pc-emergency,
.sp-claim,
.rv-receipt,
.rv-exception,
.iv-exception,
.cc-q-item {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-panel);
}

/* Surface cards keep a single subtle elevation; no nested double borders. */
.app-card > .app-card,
.app-surface > .app-surface,
.cc-facility > .cc-facility {
  box-shadow: none;
}

/* Card title rhythm: consistent, not oversized. */
.cc-fs-attention-kicker,
.cc-sup-attention-kicker,
.cc-deliv-attention-kicker,
.cc-san-attention-kicker,
.cc-facility-kicker {
  font-size: 0.7rem;
  letter-spacing: 0.09em;
}

/* ---- KPI / metric card polish ---- */
.app-metric-card,
.pd-metrics > div,
.fs-metrics > div,
.pk-metrics > div,
.pk-validation-grid > div,
.dp-metrics > div,
.dp-validation-grid > div,
.d10-metrics > div,
.pl-metric,
.sp-metric,
.pc-metrics > div,
.rv-metrics > div,
.iv-metrics > div,
.cc-fs-metric,
.cc-sup-metric,
.cc-pack-metric,
.cc-deliv-metric,
.cc-san-metric {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-neutral-050);
  box-shadow: none;
  min-width: 0;
}

/* KPI value hierarchy: primary operational numbers stay compact. */
.app-metric-card dd,
.pd-metrics dd,
.fs-metrics dd,
.pk-metrics dd,
.pk-validation-grid dd,
.dp-metrics dd,
.dp-validation-grid dd,
.d10-metrics dd,
.pl-metric dd,
.sp-metric dd,
.pc-metrics dd,
.rv-metrics dd,
.iv-metrics dd,
.cc-fs-metric dd,
.cc-sup-metric dd,
.cc-pack-metric dd,
.cc-deliv-metric dd,
.cc-san-metric dd {
  font-weight: 800;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Reference counts / explanatory metric values get quieter treatment
   without changing the underlying semantic state. */
.app-metric--reference dd,
.cc-fac-metric dd,
.cc-variance-value {
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--color-primary-700);
}

/* ---- Status emphasis: critical/warning surfaces, restrained success ---- */
.cc-status--critical,
.cc-fs-status--critical,
.cc-fs-status--fail,
.cc-fs-status--hold,
.cc-san-attn--major,
.cc-san-attn--critical,
.cc-fs-attn--major,
.cc-fs-attn--critical,
.cc-sup-attn--major,
.cc-sup-attn--critical,
.cc-deliv-attn--major,
.cc-deliv-attn--critical,
.cc-q-item--critical,
.cc-q-item--major,
.pk-row-review {
  border-left: 4px solid var(--color-danger);
}

.cc-status--normal,
.cc-fs-status--pass {
  border-left: 4px solid var(--color-success);
}

/* Restrained PASS/READY: use a subtle left accent, not large green fills. */
.cc-status--normal,
.cc-fs-status--pass {
  background: var(--color-surface);
}
.cc-progress-fill {
  background: var(--color-primary-500);
}

/* Critical alert text stays readable; do not let it become a full page. */
.d10-alert,
.pk-boundary-note,
.dp-boundary-note,
.fs-boundary-note,
.pd-boundary-note,
.app-boundary-note {
  border-radius: var(--radius-md);
}

/* Reference-only / demo-honesty surfaces are distinctly secondary. */
.app-honesty-note,
.pk-integration,
.fs-integration,
.dp-integration,
.pd-integration,
.sp-disclosure-note,
.pc-disclosure,
.pc-recommendation,
.rv-forward,
.pc-boundary,
.rv-boundary,
.iv-boundary {
  box-shadow: none;
  border-left-color: var(--color-info);
  background: var(--color-info-surface);
}

/* ---- Whitespace / rhythm: one disciplined spacing system ---- */
.app-card,
.cc-fs-attention,
.cc-sup-attention,
.cc-deliv-attention,
.cc-san-attention,
.cc-facility,
.sp-capability,
.sp-material-control,
.pc-quote,
.pc-emergency,
.sp-claim,
.rv-receipt,
.rv-exception,
.iv-exception,
.cc-q-item {
  padding: var(--space-4);
}

.cc-status,
.cc-fs-status {
  padding: var(--space-3) var(--space-4);
}

@media (max-width: 47.99rem) {
  .app-card,
  .cc-fs-attention,
  .cc-sup-attention,
  .cc-deliv-attention,
  .cc-san-attention,
  .cc-facility,
  .sp-capability,
  .sp-material-control,
  .pc-quote,
  .pc-emergency,
  .sp-claim,
  .rv-receipt,
  .rv-exception,
  .iv-exception,
  .cc-q-item,
  .cc-status,
  .cc-fs-status {
    padding: var(--space-3);
  }
}

/* Section whitespace: closer, uniform rhythm after summaries/attention. */
.cc-section,
.pd-section,
.fs-section,
.pk-section,
.dp-section,
.d10-section,
.pl-section,
.sp-section,
.pc-section,
.rv-section,
.iv-section {
  padding-block: var(--section-gap);
}
.cc-section:first-of-type,
.pd-section:first-of-type,
.fs-section:first-of-type,
.pk-section:first-of-type,
.dp-section:first-of-type,
.d10-section:first-of-type,
.pl-section:first-of-type,
.sp-section:first-of-type,
.pc-section:first-of-type,
.rv-section:first-of-type,
.iv-section:first-of-type {
  padding-top: 0;
}

/* Page heading rhythm: compact, no oversized gaps. */
.workspace-heading {
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
  gap: var(--space-3);
}
.workspace-heading h1 {
  font-size: var(--font-size-page-title);
}

/* Command-center section headers stay modest. */
.cc-section-head {
  margin-bottom: var(--space-3);
}

/* ---- Dashboard status summary: no billboard KPI text ---- */
.cc-flow-value,
.cc-tray-value {
  font-size: var(--font-size-lg);
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* Keep warning/attention emphasis concise and scannable. */
.cc-q-item {
  padding: var(--space-3) var(--space-4);
}
.cc-q-desc {
  font-size: var(--font-size-sm);
  line-height: 1.45;
}

/* ============================================================
   CR-UI-LAYOUT-01 FINAL REVIEW — presentation conflict fixes.
   Presentation-only. No service/data/route/permission change.
   ============================================================ */

/* FINAL-01: header tool area must always be allowed to shrink so
   long context values can never force page-level horizontal overflow. */
.header-tools {
  min-width: 0;
}
.profile-context {
  min-width: 0;
}
.header-tools .profile-context .context-control {
  flex: 1 1 auto;
}

/* FINAL-01: keep the utility/search controls compact and shrinkable. */
.header-tools .icon-button,
.header-tools .logout-button {
  flex: 0 0 auto;
}