/* ==========================================================================
   MSE portals — shared design tokens + components (Bucket 2.37 Part 1,
   §6 Decision 33, Sep 10 2026). ONE file for BOTH portals.

   MASTER: portals/shared/mse-tokens.css
   SERVED COPIES: portals/vhv-operations/mse-tokens.css
                  portals/vhv-clinic/mse-tokens.css
   Each Amplify app serves only its own appRoot (like auth.js and assets/),
   so the master is copied into each portal folder. lambdas/tests/
   test_shared_css_parity.py asserts the three files are byte-identical.
   EDIT THE MASTER, THEN COPY — never edit a served copy on its own.

   Source of truth for values: docs/mockups/2026-09-10/ (all four mockups
   carry one identical style block; GATE A approved Sep 10 2026). Token
   names keep the --mse-* prefix from Rebrand Part A (Aug 19 2026) because
   ~400 inline styles and JS colour strings already reference them —
   redefining the same names moves every one of them at once.

   Mockup name → this file        Mockup name → this file
   --bg          --mse-bg          --violet       --mse-violet
   --surface     --mse-surface     --violet-deep  --mse-violet-deep
   --surface-2   --mse-surface-2   --violet-tint  --mse-violet-tint
   --border      --mse-border      --teal(-*)     --mse-teal(-*)
   --border-in   --mse-border-in   --amber-*      --mse-amber-*
   --ink         --mse-text        --warn(-*)     --mse-warn(-*)
   --ink-body    --mse-text-body   --sp-*, --r-*, --sh-overlay, --ring: same
   --ink-muted   --mse-text-dim
   --ink-subtle  --mse-text-faint
   --ink-off     --mse-disabled
   --off-bg      --mse-disabled-bg

   Per-portal index.html keeps: the Bucket 2.31 auth gate rule (inline, by
   test), the header/sidebar/layout shell, the watermark, and portal-only
   components (calendar cells, DBQ form, schema panel, typeahead, modals).
   ========================================================================== */

:root {
  /* ---- Surfaces and neutrals ---- */
  --mse-bg:            #F6F7FB;
  --mse-surface:       #FFFFFF;
  --mse-surface-2:     #FAFBFD;   /* hover fill, wells */
  --mse-border:        #DDE1EC;
  --mse-border-in:     #EAECF3;

  /* ---- Ink. Contrast on #FFFFFF, computed 2026-09-10 ---- */
  --mse-text:          #16204A;   /* 14.7:1 */
  --mse-text-body:     #222C55;   /* 12.5:1 */
  --mse-text-dim:      #5A6485;   /* 5.84:1  was #7A85A8 (3.65:1) */
  --mse-text-faint:    #667193;   /* 4.83:1  was #8B94B0 (3.02:1) */
  --mse-disabled:      #8A93AE;   /* 3.06:1  was #B3BACE (1.94:1). DISABLED /
                                     INACTIVE TEXT ONLY (WCAG 1.4.3 exemption) —
                                     never for readable copy. Rico accepted 2026-09-10. */
  --mse-disabled-bg:   #EEF0F6;

  /* ---- Semantic, unchanged from the shipped palette ---- */
  --mse-violet:        #7B4FA6;
  --mse-violet-deep:   #5D3A85;
  --mse-violet-tint:   #F3EFF9;
  --mse-teal:          #2E8B7A;
  --mse-teal-text:     #17705C;
  --mse-teal-tint:     #EAF6F2;
  --mse-teal-border:   #9ED4C6;
  --mse-amber-text:    #8A5514;
  --mse-amber-bg:      #FBF3E7;
  --mse-amber-border:  #E8C9A8;
  --mse-warn:          #B4531F;
  --mse-warn-tint:     #F9EDE6;
  --mse-warn-border:   #E5BEA9;

  /* Legacy (Aug 19), unreferenced — kept so nothing that might read them breaks. */
  --mse-stripe-a:      #EEF0F6;
  --mse-stripe-b:      #E4E7F0;

  /* ---- Spacing, 4px base ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* ---- Radius, three steps ---- */
  --r-sm: 4px; --r-md: 6px; --r-lg: 8px;

  /* ---- Elevation: one shadow, one ring ---- */
  --sh-overlay: 0 8px 24px rgba(22,32,74,0.12), 0 2px 6px rgba(22,32,74,0.06);
  --ring: 0 0 0 2px #FFF, 0 0 0 4px var(--mse-violet);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--mse-bg);
  color: var(--mse-text-body);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
}
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { list-style: none; padding: 0; }

/* Numerals lock into columns, and a slashed zero so a Case ID read aloud
   over the phone is never ambiguous between 0 and O. */
.num { font-variant-numeric: tabular-nums slashed-zero; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- Page head ---------------------------------------------------- */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4);
}
.page-title { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--mse-text); }
.page-sub { font-size: 13px; color: var(--mse-text-dim); margin-top: 2px; }
.page-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }

/* ---------- Buttons: one component, four variants ---------------------- */
.btn {
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.btn-primary   { background: var(--mse-violet); border-color: var(--mse-violet); color: #FFF; }
.btn-primary:hover   { background: var(--mse-violet-deep); border-color: var(--mse-violet-deep); }
.btn-secondary { background: var(--mse-violet-tint); border-color: var(--mse-violet); color: var(--mse-violet-deep); }
.btn-secondary:hover { background: #EAE2F4; }
.btn-quiet     { background: var(--mse-surface); border-color: var(--mse-border); color: var(--mse-text-body); }
.btn-quiet:hover     { background: var(--mse-surface-2); border-color: var(--mse-disabled); }
.btn-danger    { background: var(--mse-surface); border-color: var(--mse-warn); color: var(--mse-warn); }
.btn-danger:hover    { background: var(--mse-warn-tint); }
.btn:disabled {
  background: var(--mse-disabled-bg); border-color: var(--mse-border);
  color: var(--mse-disabled); cursor: not-allowed;
}

/* ---------- Search / inputs ------------------------------------------- */
.searchbar {
  background: var(--mse-surface);
  border: 1px solid var(--mse-border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.searchbar label { font-size: 13px; font-weight: 600; color: var(--mse-text-body); white-space: nowrap; }
.input {
  font: inherit; font-size: 14px;
  color: var(--mse-text-body);
  background: var(--mse-surface);
  border: 1px solid var(--mse-border);
  border-radius: var(--r-sm);
  padding: 7px 10px;
  width: 100%;
}
.input::placeholder { color: var(--mse-text-faint); }
.input:hover { border-color: var(--mse-disabled); }
.input:focus-visible { border-color: var(--mse-violet); }
.searchbar .input { flex: 1 1 260px; }
.search-hint { font-size: 12px; color: var(--mse-text-faint); }
.select {
  font: inherit; font-size: 13px; font-weight: 500;
  color: var(--mse-text-body); background: var(--mse-surface);
  border: 1px solid var(--mse-border); border-radius: var(--r-md);
  padding: 7px 10px; cursor: pointer;
}
.select:hover { border-color: var(--mse-disabled); }

/* ---------- Banners --------------------------------------------------- */
.banner {
  border: 1px solid;
  border-left-width: 3px;
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  font-size: 13px;
  display: flex; gap: var(--sp-4); align-items: baseline;
  justify-content: space-between; flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.banner-title { font-weight: 600; }
.banner p { margin-top: 2px; }
.banner-warn   { background: var(--mse-amber-bg);  border-color: var(--mse-amber-border); color: var(--mse-amber-text); }
.banner-warn .banner-title { color: var(--mse-amber-text); }
.banner-danger { background: var(--mse-warn-tint); border-color: var(--mse-warn-border);  color: var(--mse-warn); }
.banner-info   { background: var(--mse-violet-tint); border-color: #D9CCE9; color: var(--mse-violet-deep); }

/* ---------- Metric tiles ---------------------------------------------- */
.tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.tiles.tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tile {
  background: var(--mse-surface);
  border: 1px solid var(--mse-border);
  border-left: 3px solid var(--mse-violet);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
}
.tile-label { font-size: 12px; font-weight: 500; color: var(--mse-text-dim); }
.tile-value {
  font-size: 28px; line-height: 32px; font-weight: 600;
  color: var(--mse-text); margin-top: var(--sp-1);
}
.tile-sub { font-size: 12px; color: var(--mse-text-faint); margin-top: 2px; }
.tile.is-teal  { border-left-color: var(--mse-teal-text); }
.tile.is-teal  .tile-value { color: var(--mse-teal-text); }
.tile.is-amber { border-left-color: var(--mse-amber-text); }
.tile.is-amber .tile-value { color: var(--mse-amber-text); }
.tile.is-warn  { border-left-color: var(--mse-warn); }
.tile.is-warn  .tile-value { color: var(--mse-warn); }

/* ---------- Card ------------------------------------------------------ */
.card {
  background: var(--mse-surface);
  border: 1px solid var(--mse-border);
  border-radius: var(--r-md);
  overflow: hidden;
  margin-bottom: var(--sp-4);
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--mse-border-in);
}
.card-title { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--mse-text); }
.card-tools { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.card-body { padding: var(--sp-3) var(--sp-4) var(--sp-4); }

/* ---------- Table ----------------------------------------------------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  /* Sentence case, not tracked-out caps: at 12px it reads faster. */
  font-size: 12px; font-weight: 600; text-align: left;
  color: var(--mse-text-dim);
  background: var(--mse-surface-2);
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--mse-border);
  white-space: nowrap;
}
tbody td { padding: var(--sp-2) var(--sp-3); vertical-align: middle; }
tbody tr { border-bottom: 1px solid var(--mse-border-in); }
tbody tr:last-child { border-bottom: 0; }
tbody tr:hover { background: var(--mse-surface-2); }
.col-num { text-align: right; }
th.col-num { text-align: right; }
.case-id { font-weight: 600; color: var(--mse-violet-deep); white-space: nowrap; }
.vet-name { color: var(--mse-text); font-weight: 500; }
.vet-leader { font-size: 12px; color: var(--mse-text-faint); }

/* --- The one place boldness is spent -----------------------------------
   Cap utilisation is the fact this business runs on: a veteran has a fixed
   service cap, services eat into it, and at cap the clinic is blocked from
   entering more. The meter carries a tick at the near-cap point ($200 left
   on a $2,000 cap) so a user sees which cases crossed it without reading.
------------------------------------------------------------------------ */
.cap { min-width: 148px; }
.cap-figure { display: block; font-weight: 600; color: var(--mse-text); }
.cap-of { font-weight: 400; color: var(--mse-text-faint); }
.meter {
  position: relative;
  height: 6px;
  margin-top: 5px;
  background: var(--mse-disabled-bg);
  border-radius: 999px;
  overflow: hidden;
}
.meter-fill { display: block; height: 100%; background: var(--mse-violet); border-radius: 999px; }
.meter.is-near .meter-fill { background: var(--mse-amber-text); }
.meter.is-over .meter-fill { background: var(--mse-warn); }
/* The near-cap threshold, drawn once on every meter. */
.meter::after {
  content: "";
  position: absolute;
  top: -2px; bottom: -2px;
  left: 90%;
  width: 1px;
  background: var(--mse-disabled);
}
.meter-text { font-size: 11px; color: var(--mse-text-faint); margin-top: 3px; display: block; }
.meter-text.is-near { color: var(--mse-amber-text); }
.meter-text.is-over { color: var(--mse-warn); font-weight: 600; }

/* ---------- Status pills ---------------------------------------------- */
.pill {
  display: inline-block;
  font-size: 11px; line-height: 14px; font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--r-sm);
  border: 1px solid;
  white-space: nowrap;
}
.pill-neutral { background: var(--mse-disabled-bg); border-color: var(--mse-border);       color: var(--mse-text-dim); }
.pill-success { background: var(--mse-teal-tint);   border-color: var(--mse-teal-border);  color: var(--mse-teal-text); }
.pill-warning { background: var(--mse-amber-bg);    border-color: var(--mse-amber-border); color: var(--mse-amber-text); }
.pill-danger  { background: var(--mse-warn-tint);   border-color: var(--mse-warn-border);  color: var(--mse-warn); }
.pill-info    { background: var(--mse-violet-tint); border-color: #D9CCE9;                 color: var(--mse-violet-deep); }
/* VA claim (§6 Decision 32): Ready for review is the ONLY solid pill — the
   only stage that asks for management attention. Filed to VA is navy. */
.pill-attn    { background: var(--mse-violet);  border-color: var(--mse-violet-deep); color: #FFF; }
.pill-navy    { background: #E8EBF5; border-color: #C5CBE0; color: var(--mse-text); }

/* ---------- Pagination ------------------------------------------------ */
.pager {
  display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--mse-border-in);
}
.pager:empty { display: none; }
.page-btn {
  font: inherit; font-size: 12px; font-weight: 600;
  min-width: 32px; padding: 5px 9px;
  background: var(--mse-surface); border: 1px solid var(--mse-border);
  border-radius: var(--r-sm); color: var(--mse-text-body); cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.page-btn:hover:not(:disabled):not([aria-current]):not(.active) { background: var(--mse-surface-2); border-color: var(--mse-disabled); }
.page-btn[aria-current], .page-btn.active { background: var(--mse-violet-tint); border-color: var(--mse-violet); color: var(--mse-violet-deep); }
.page-btn:disabled { color: var(--mse-disabled); cursor: not-allowed; background: var(--mse-disabled-bg); }
.page-info { font-size: 12px; color: var(--mse-text-faint); margin-left: auto; }

/* ---------- Empty state ------------------------------------------------ */
.empty { padding: var(--sp-8) var(--sp-4); text-align: center; }
.empty-title { font-size: 15px; font-weight: 600; color: var(--mse-text); }
.empty-text { font-size: 13px; color: var(--mse-text-dim); margin-top: var(--sp-1); }
.empty-actions { margin-top: var(--sp-4); display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; }

/* ---------- Veteran detail head ---------------------------------------- */
.crumb { font-size: 13px; color: var(--mse-text-dim); margin-bottom: var(--sp-3); display: flex; align-items: center; gap: var(--sp-3); }
.crumb button, .crumb .crumb-link { background: none; border: 0; padding: 0; color: var(--mse-violet-deep); font: inherit; font-weight: 600; cursor: pointer; }
.detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-6); margin-bottom: var(--sp-5); }
.detail-name { font-size: 24px; font-weight: 700; color: var(--mse-text); letter-spacing: -0.01em; margin: 0 0 var(--sp-1); }
.detail-ids { font-size: 13px; color: var(--mse-text-dim); }
.detail-pills { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }
.cap-card { background: var(--mse-surface); border: 1px solid var(--mse-border); border-radius: var(--r-lg); padding: var(--sp-4) var(--sp-5); min-width: 300px; }
.cap-card .cap-figure { font-size: 22px; font-weight: 700; color: var(--mse-teal-text); }
.cap-card .cap-line { font-size: 12px; color: var(--mse-text-dim); margin-top: var(--sp-1); display: flex; justify-content: space-between; gap: var(--sp-3); }

/* ---------- Two-column body, fact table, stepper, list ------------------ */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.two-col > .card { margin-bottom: 0; }
.facts { width: 100%; border-collapse: collapse; font-size: 13px; }
.facts th { text-align: left; font-weight: 500; color: var(--mse-text-dim); width: 42%; padding: var(--sp-2) 0; border-bottom: 1px solid var(--mse-border-in); font-size: 13px; background: none; white-space: normal; vertical-align: top; }
.facts td { padding: var(--sp-2) 0; border-bottom: 1px solid var(--mse-border-in); color: var(--mse-text-body); }
.facts tr:last-child th, .facts tr:last-child td { border-bottom: 0; }
.facts tr:hover { background: transparent; }
.stepper { list-style: none; margin: 0; padding: 0; }
.stepper li { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-2) 0; color: var(--mse-text-dim); }
.stepper .dot { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--mse-border); background: var(--mse-surface); margin-top: 3px; }
.stepper li.done .dot { background: var(--mse-teal); border-color: var(--mse-teal); }
.stepper li.now .dot { background: var(--mse-violet); border-color: var(--mse-violet); box-shadow: 0 0 0 3px var(--mse-violet-tint); }
.stepper li.done, .stepper li.now { color: var(--mse-text-body); }
.stepper li.now .step-name { font-weight: 600; color: var(--mse-violet-deep); }
.stepper .step-when { font-size: 12px; color: var(--mse-text-faint); }
.stepper li.locked { opacity: .55; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); padding: var(--sp-3) 0; border-bottom: 1px solid var(--mse-border-in); }
.list li:last-child { border-bottom: 0; }
.list .l-main { color: var(--mse-text-body); }
.list .l-sub { font-size: 12px; color: var(--mse-text-faint); }

/* ==========================================================================
   Responsive — shared components only. Each portal owns its page shell.
   ========================================================================== */
@media (max-width: 1180px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr; }
  .detail-head { flex-direction: column; }
  .cap-card { min-width: 0; width: 100%; }
}
/* Phone: a data table stops being a table and becomes a list of records. */
@media (max-width: 620px) {
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .page-head, .card-head { align-items: flex-start; }
  .page-actions .btn, .card-tools .select, .card-tools .btn { flex: 1 1 auto; }
  .table-wrap { overflow-x: visible; }
  .table-wrap table, .table-wrap thead, .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; width: auto; }
  .table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .table-wrap tbody tr { padding: var(--sp-3) var(--sp-4); }
  .table-wrap tbody tr:hover { background: transparent; }
  .table-wrap tbody td {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--sp-4); padding: 3px 0; text-align: right;
    min-width: 0;
  }
  .table-wrap tbody td::before {
    content: attr(data-label);
    font-size: 12px; font-weight: 600; color: var(--mse-text-dim);
    text-align: left; flex: 0 0 auto;
  }
  .vet-cell { text-align: right; min-width: 0; }
  .table-wrap td.cap { display: block; text-align: left; min-width: 0; }
  .table-wrap td.cap::before { display: block; margin-bottom: 2px; }
  .cap-figure { text-align: left; }
  .page-info { margin-left: 0; width: 100%; }
  .pager { justify-content: flex-start; }
}