/* Prototype styling for the DCFS portal frontend. Intentionally minimal — a
   design system (FE-1-01) replaces this; enough here to demo the shell and the
   preview emulator. */

* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: #1a1f24; background: #f4f6f8; }

/* Accessibility primitives (WCAG 2.1 AA, FE-1-11) */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -999px; top: 0; z-index: 10; background: #f0b429; color: #3a2d00; font-weight: 600; padding: 0.6rem 1rem; border-radius: 0 0 0.4rem 0; }
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid #f0b429; outline-offset: 2px; }

.brand-logo { display: block; width: 145px; height: auto; flex: none; }
.topbar { display: flex; align-items: center; gap: 1rem; background: #14395e; color: #fff; padding: 0.75rem 1.25rem; }
.brand { font-weight: 600; }
.proto-badge { font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; background: #f0b429; color: #3a2d00; padding: 0.15rem 0.5rem; border-radius: 0.25rem; }
/* Signed-in persona badge, top-right — a "who's logged in" display (the current
   preview persona in the prototype), distinct from the hideable switcher. */
.user-badge { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
.user-avatar { width: 1.85rem; height: 1.85rem; border-radius: 50%; background: #2d5580; color: #d5e4f2; display: flex; align-items: center; justify-content: center; flex: none; }
.user-id { display: flex; flex-direction: column; line-height: 1.12; }
.user-role { font-size: 0.82rem; font-weight: 600; color: #fff; }
.user-region { font-size: 0.68rem; color: #a9bfd4; }

/* minmax(0,1fr) lets the content column shrink under a wide table instead of
   pushing the preview emulator off the right edge. */
.layout { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; min-height: calc(100vh - 49px); }
.sidenav { background: #1f2a37; padding: 1rem 0; }
.sidenav a { display: block; color: #c7d0da; text-decoration: none; padding: 0.6rem 1.25rem; font-size: 0.95rem; }
.sidenav a:hover { background: #2b3947; color: #fff; }
.sidenav a.active { background: #14395e; color: #fff; border-left: 3px solid #f0b429; }
/* Grouped nav: plain uppercase section labels, every item always visible (no
   collapsing). Dashboard and Help stay ungrouped as top/bottom anchors. */
.nav-group { margin: 0; padding: 1rem 1.25rem 0.25rem; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: #7c8b9c; font-weight: 700; }
.sidenav > a:last-child { margin-top: 0.9rem; }
.content { padding: 1.5rem 2rem; display: flex; flex-direction: column; }
/* Page footer */
.site-footer { margin-top: auto; padding: 1.25rem 0 1rem; border-top: 1px solid #dbe2e8; color: #64748b; font-size: 0.8rem; text-align: center; display: flex; align-items: center; justify-content: center; gap: 0.75rem; }
.site-footer p { margin: 0; }
.footer-logo { display: block; width: 150px; height: auto; flex: none; }
h1 { margin-top: 0; font-size: 1.4rem; }
h2 { font-size: 1.05rem; color: #334155; margin: 1.6rem 0 0.6rem; }
.page-head { display: flex; align-items: center; gap: 1rem; justify-content: space-between; margin-bottom: 0.5rem; }
.page-head h1 { margin: 0; }
.page-head-title { display: flex; flex-direction: column; gap: 0.1rem; }
.order-subtitle { margin: 0; color: #475569; font-size: 0.95rem; }
.crumb { margin: 0 0 0.5rem; font-size: 0.85rem; }
.crumb a { color: #475569; text-decoration: none; }
.crumb a:hover { text-decoration: underline; }

/* Status chips — order lifecycle Submitted → Invoiced → Paid → Order Placed
   → Shipped → Received (P-6-01/02) */
.chip { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 1rem; font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.chip-submitted { background: #fff7e0; color: #7a5c00; border: 1px solid #f0dca0; }
.chip-invoiced { background: #fdf0e3; color: #92500f; border: 1px solid #f3d2a6; }
.chip-paid { background: #e8f6ef; color: #0f6b47; border: 1px solid #a9e2c6; }
.chip-order-placed { background: #ecfeff; color: #155e75; border: 1px solid #a5f3fc; }
.chip-shipped { background: #e3edf9; color: #1d4f80; border: 1px solid #b6d0ea; }
.chip-received { background: #e6f6ea; color: #1d5c2e; border: 1px solid #9fd8ae; }

/* Claim status chips — L-1/L-2 replacements and L-3 disputes */
.chip-filed { background: #fff7e0; color: #7a5c00; border: 1px solid #f0dca0; }
.chip-replacement-in-progress { background: #e3edf9; color: #1d4f80; border: 1px solid #b6d0ea; }
.chip-replaced { background: #e6f6ea; color: #1d5c2e; border: 1px solid #9fd8ae; }
.chip-under-investigation { background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe; }
.chip-findings-received { background: #f5f0ff; color: #5b21b6; border: 1px solid #ddd0fa; }
.chip-resolved-credited, .chip-resolved-replaced { background: #e6f6ea; color: #1d5c2e; border: 1px solid #9fd8ae; }
.chip-denied { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }

/* Inventory & stock states */
.chip-on-hand { background: #e6f6ea; color: #1d5c2e; border: 1px solid #9fd8ae; }
/* Assigned is a spent state, and a location kind labels a type rather than a
   status — both take the quiet slate set. */
.chip-assigned, .chip-regional-office, .chip-field-office { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
.chip-awaiting-review { background: #fff7e0; color: #7a5c00; border: 1px solid #f0dca0; }
.chip-extended { background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe; }
.chip-certified,
.chip-certified-by-delegate { background: #e6f6ea; color: #1d5c2e; border: 1px solid #9fd8ae; }
.chip-certified-with-exceptions { background: #fff7e0; color: #7a5c00; border: 1px solid #f0dca0; }
.chip-not-certified { background: #fef3f2; color: #b42318; border: 1px solid #e5b8b0; }
.chip-superseded { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }

/* Needs-your-attention list — the dashboard's reason to exist */
.attention h2 { margin-top: 0.4rem; }
.attention-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.attention-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: #fff; border: 1px solid #e2e8f0; border-left: 4px solid #f0b429; border-radius: 0.4rem; padding: 0.6rem 0.9rem; font-size: 0.9rem; }
.attention-receive { border-left-color: #1d4f80; }
.attention-determine { border-left-color: #0e7490; }

.message.warning { background: #fff7e0; border: 1px solid #f0dca0; color: #7a5c00; padding: 0.5rem 0.8rem; border-radius: 0.35rem; font-size: 0.9rem; margin-top: 0.4rem; }
.helptext { display: block; font-size: 0.75rem; color: #64748b; margin-top: 0.2rem; }

/* Delivery check-in against the packing slip */
.slip { background: #fff; border: 1px solid #e2e8f0; border-radius: 0.5rem; padding: 1rem 1.25rem; max-width: 34rem; margin: 1rem 0; }
.slip h2 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.slip-hint { font-size: 0.82rem; color: #64748b; margin: 0.6rem 0 0; }
.order-form ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.order-form ul label { font-weight: 400; font-size: 0.9rem; color: #1a1f24; }
.discrepancy-banner { background: #fdecea; border: 1px solid #f5b5ae; color: #93261b; border-radius: 0.4rem; padding: 0.6rem 0.9rem; font-size: 0.9rem; margin: 0 0 1rem; max-width: 44rem; }
.payment-banner { background: #fdf3e3; border: 1px solid #f0d199; color: #8a5a12; border-radius: 0.4rem; padding: 0.6rem 0.9rem; font-size: 0.9rem; margin: 0 0 1rem; max-width: 44rem; }
.deadline-banner { background: #f5f0ff; border: 1px solid #ddd0fa; color: #5b21b6; border-radius: 0.4rem; padding: 0.6rem 0.9rem; font-size: 0.9rem; margin: 0 0 1rem; max-width: 44rem; }
.claim-type { font-size: 0.85rem; font-weight: 400; color: #64748b; margin-left: 0.4rem; }
.findings-text { margin: 0; font-size: 0.9rem; color: #1a1f24; }
.page-actions { display: flex; gap: 0.6rem; }
.attention-discrepancy { border-left-color: #b42318; }
.btn-small { display: inline-block; background: #14395e; color: #fff; text-decoration: none; border-radius: 0.3rem; padding: 0.35rem 0.7rem; font-size: 0.8rem; white-space: nowrap; }
.btn-small:hover { background: #1d4f80; }
.user-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; }
.user-actions form { margin: 0; }
.all-clear { color: #1d5c2e; background: #e6f6ea; border: 1px solid #9fd8ae; display: inline-block; padding: 0.45rem 0.8rem; border-radius: 0.35rem; font-size: 0.9rem; }

/* Inventory-at-a-glance strip (a real list for screen readers) */
.stock-strip { display: flex; flex-wrap: wrap; gap: 0.8rem; list-style: none; margin: 0; padding: 0; }
.stock { background: #fff; border: 1px solid #e2e8f0; border-radius: 0.5rem; padding: 0.7rem 1rem; min-width: 8.5rem; }
.stock-low { border-color: #e5b8b0; background: #fdf3f1; }
.stock-denom { font-size: 0.8rem; color: #64748b; font-weight: 600; }
.stock-count { font-size: 1.4rem; font-weight: 700; color: #14395e; }
.stock-low .stock-count { color: #b42318; }
.stock-note { font-size: 0.72rem; color: #64748b; }
.flag { color: #7a5c00; background: #fff7e0; border: 1px solid #f0dca0; padding: 0.1rem 0.5rem; border-radius: 0.3rem; font-size: 0.78rem; }

/* Inventory: filter bar and the regional-office card */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 0.5rem; padding: 0.7rem 0.9rem; margin: 0.6rem 0 1rem; font-size: 0.85rem; }
.filters label { font-weight: 600; color: #475569; }
.filters select { padding: 0.3rem 0.4rem; border: 1px solid #cbd5e1; border-radius: 0.3rem; font-size: 0.85rem; background: #fff; }
.filter-clear { color: #475569; font-size: 0.82rem; }
.scope-note { color: #475569; font-size: 0.9rem; }
.loc-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 0.5rem; padding: 0.8rem 1rem; max-width: 34rem; }
.loc-card.loc-low { border-color: #e5b8b0; background: #fdf3f1; }
.loc-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem; }
.loc-name { font-weight: 700; color: #14395e; }
.loc-code { font-size: 0.78rem; color: #64748b; }
.loc-figures { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 0.45rem; font-size: 0.88rem; color: #334155; }
.loc-figures strong { font-size: 1.15rem; color: #14395e; }
.loc-note { margin: 0.45rem 0 0; font-size: 0.82rem; color: #b42318; }

/* Order landing: detailed in-flight register and compact received history */
.orders-register { margin-top: 1.4rem; }
.orders-register > h2 { margin-bottom: 0.7rem; }
.in-flight-orders { display: flex; flex-direction: column; gap: 1rem; }
.order-card { background: #fff; border: 1px solid #e2e8f0; border-left: 3px solid #14395e; border-radius: 0.5rem; padding: 1rem 1.2rem; }
.order-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.order-card-head h3 { margin: 0; font-size: 1.05rem; }
.order-card-name { margin: 0.2rem 0 0; color: #475569; font-size: 0.88rem; }
.order-card-facts,
.order-card-extra { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 0.8rem; color: #334155; font-size: 0.86rem; }
.order-card-facts span,
.order-card-extra span { display: flex; gap: 0.35rem; }
.order-card h4 { margin: 0.8rem 0 0.4rem; font-size: 0.9rem; color: #334155; }
.order-card-timeline { overflow-x: auto; margin-bottom: 0.8rem; }
.order-card-timeline li { min-width: 7rem; }
.order-shipment-wrap { overflow-x: auto; }
.order-shipment-table { margin: 0; }
.order-card-action { margin: 0.8rem 0 0; font-size: 0.88rem; }

/* Order fulfillment timeline */
.timeline { list-style: none; display: flex; gap: 0; margin: 1rem 0 1.2rem; padding: 0; }
.timeline li { flex: 1; max-width: 14rem; position: relative; padding: 0.5rem 0.75rem 0.5rem 1.6rem; border-top: 3px solid #cbd5e1; }
.timeline li.done { border-top-color: #14395e; }
.timeline li::before { content: ""; position: absolute; top: -0.55rem; left: 0.35rem; width: 0.8rem; height: 0.8rem; border-radius: 50%; background: #cbd5e1; }
.timeline li.done::before { background: #14395e; }
.timeline-label { display: block; font-weight: 600; font-size: 0.88rem; color: #334155; }
.timeline-date { display: block; font-size: 0.8rem; color: #64748b; }

/* Two-tier physical-order approval: progress on the order and routed work on the orders landing. */
.approval-panel { max-width: 44rem; margin: 0 0 1.25rem; padding: 1rem 1.25rem; background: #fff; border: 1px solid #cbd5e1; border-left: 4px solid #0e7490; border-radius: 0.5rem; }
.approval-panel h2 { margin: 0 0 0.35rem; font-size: 1.05rem; color: #14395e; }
.approval-panel > p { margin: 0.45rem 0 0; color: #475569; font-size: 0.9rem; }
.approval-list { list-style: none; margin: 0.75rem 0; padding: 0; border-top: 1px solid #e2e8f0; }
.approval-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; padding: 0.65rem 0; border-bottom: 1px solid #e2e8f0; color: #334155; font-size: 0.9rem; }
.approval-list form, .approval-panel > form { margin: 0; }
.approval-queue { max-width: 56rem; margin: 0 0 1.25rem; }
.attention-order-approval { border-left-color: #0e7490; }
.chip-awaiting-approvals { background: #fff7e0; color: #7a5c00; border-color: #f0dca0; }

.receive-form { display: flex; align-items: center; gap: 0.8rem; margin: 0 0 1rem; }
.receive-hint { font-size: 0.82rem; color: #64748b; }
/* Shipments on the order page: one card per leg — destination first, then
   the leg's own dates. Check-in lives on the shipment's page, so the cards
   carry no controls. */
.shipment-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; margin: 0.5rem 0 1.25rem; max-width: 56rem; }
.shipment-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 0.5rem; padding: 0.9rem 1.1rem; display: flex; flex-direction: column; gap: 0.55rem; }
.shipment-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.shipment-card-head h3 { margin: 0; font-size: 1rem; }
.shipment-card-head h3 a { color: inherit; }
.shipment-card .facts { border: 0; padding: 0; background: transparent; grid-template-columns: 6.5rem 1fr; gap: 0.2rem 0.6rem; }
.shipment-card-note, .shipment-card-action { margin: 0; font-size: 0.85rem; }
/* A list row's Cards and Expected cells: one line per shipment, so a
   multi-shipment order reads leg by leg with each date beside its cards. */
.cell-line { display: block; white-space: nowrap; }

/* Order facts */
.facts { display: grid; grid-template-columns: 10rem 1fr; gap: 0.35rem 1rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 0.5rem; padding: 1rem 1.25rem; max-width: 34rem; margin: 0; }
.facts dt { color: #64748b; font-size: 0.85rem; }
.facts dd { margin: 0; font-size: 0.9rem; color: #1a1f24; }

.tiles { display: flex; flex-wrap: wrap; gap: 1rem; }
.tile { background: #fff; border: 1px solid #e2e8f0; border-radius: 0.5rem; padding: 1rem 1.25rem; min-width: 9rem; }
.tile-value { font-size: 1.6rem; font-weight: 700; color: #14395e; }
.tile-label { font-size: 0.8rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.03em; }

/* A wide table (the 10-column issuance ledger) scrolls inside its own box rather
   than clipping its last column or running under the right rail. */
.table-scroll { overflow-x: auto; }
.grid { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e2e8f0; border-radius: 0.5rem; overflow: hidden; }
.grid th, .grid td { text-align: left; padding: 0.55rem 0.85rem; border-bottom: 1px solid #eef2f6; font-size: 0.9rem; }
.grid th { background: #f8fafc; color: #475569; font-weight: 600; }
.messages { list-style: none; margin: 0 0 1rem; padding: 0; }
.message.success { background: #e6f6ea; border: 1px solid #9fd8ae; color: #1d5c2e; padding: 0.5rem 0.8rem; border-radius: 0.35rem; font-size: 0.9rem; }

.order-form { background: #fff; border: 1px solid #e2e8f0; border-radius: 0.5rem; padding: 1.25rem; max-width: 26rem; margin-top: 1rem; }
.order-form div { margin-bottom: 0.9rem; display: flex; flex-direction: column; gap: 0.3rem; }
.order-form label { font-size: 0.85rem; font-weight: 600; color: #334155; }
.order-form select, .order-form input { padding: 0.45rem 0.55rem; border: 1px solid #cbd5e1; border-radius: 0.35rem; font-size: 0.9rem; }
.order-form .errorlist { color: #b42318; font-size: 0.8rem; margin: 0; padding-left: 1rem; }
.btn-primary { background: #14395e; color: #fff; border: none; border-radius: 0.35rem; padding: 0.55rem 1.1rem; font-size: 0.9rem; cursor: pointer; text-decoration: none; display: inline-block; }
.btn-primary:hover { background: #1d4f80; }
.order-form textarea { padding: 0.45rem 0.55rem; border: 1px solid #cbd5e1; border-radius: 0.35rem; font-size: 0.9rem; font-family: inherit; box-sizing: border-box; width: 100%; }

.config-note { font-size: 0.8rem; color: #7a5c00; background: #fff7e0; border: 1px solid #f0dca0; padding: 0.4rem 0.7rem; border-radius: 0.35rem; display: inline-block; }

/* Tokenized identifiers shouldn't wrap on their hyphens (FAKE-REF-0001-0007). */
.grid td.ident, .grid th.ident { white-space: nowrap; }
/* A PUID renders exactly as printed — thirteen characters, no separators — in
   a monospace face so the fields can be counted off; it never breaks
   mid-string, but a pair of them may wrap between. */
.puid { font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace; font-size: 0.94em; white-space: nowrap; }

/* RadioSelect groups (check-in, claim type, MCC action, determination) render
   in the form's own language rather than a browser-default fieldset. */
.order-form ul, .order-form fieldset { list-style: none; margin: 0; padding: 0; border: 0; }
.order-form ul li { margin: 0.15rem 0; }
.order-form ul label, .order-form fieldset label { display: inline; font-weight: 400; }
.order-form input[type="radio"] { margin-right: 0.4rem; }
/* Check-in: the note is only for a discrepancy. A browser that can watch the
   radio (:has) reveals it when that outcome is chosen; any other shows it all
   along — the server requires it for a discrepancy either way. */
@supports selector(:has(*)) {
  .order-form .checkin-note { display: none; }
  .order-form:has(input[name="outcome"][value="discrepancy"]:checked) .checkin-note { display: flex; }
}
/* Allocation form: a plainly numeric count, stacked stock-line choices with the
   card value on top, and the same-day date nudge behind a disclosure. */
.order-form .input-count { width: 7rem; }
.order-form .input-count::-webkit-inner-spin-button { opacity: 1; height: 1.7rem; }
.order-form .line-choice label { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.5rem; align-items: start; padding: 0.55rem 0.65rem; border: 1px solid #e2e8f0; border-radius: 0.35rem; }
.order-form .line-choice label:has(input:checked) { border-color: #14395e; background: #f5f8fc; }
.order-form .line-choice input[type="radio"] { margin-top: 0.2rem; }
.line-body { display: flex; flex-direction: column; gap: 0.15rem; }
.line-value { font-weight: 600; color: #1a1f24; }
.line-meta { font-size: 0.8rem; color: #475569; }
.line-preview { font-size: 0.82rem; color: #334155; line-height: 1.55; }
.line-preview .puid { color: #14395e; font-weight: 600; }
/* The preview is script-created after each choice's label, indented past the radio. */
.line-choice .line-preview { display: block; margin: -0.35rem 0 0.7rem 2.2rem; }
.sent-on .field-label { font-size: 0.85rem; font-weight: 600; color: #334155; }
.sent-today { margin: 0; font-weight: 600; color: #1a1f24; }
.date-change summary { cursor: pointer; color: #14395e; font-size: 0.85rem; font-weight: 600; }
.date-change[open] { border-left: 3px solid #e2e8f0; padding-left: 0.7rem; margin-top: 0.4rem; }
/* The order form: a header over shipment rows. Each row is one shipment —
   destination, program, card value, quantity — laid out as a strip so a
   three-shipment order reads as three lines, not three forms. */
.order-form.order-form-wide { max-width: 46rem; }
.order-form .shipments { border: 0; padding: 0; margin: 0 0 0.9rem; display: block; }
.order-form .shipments legend { font-size: 0.85rem; font-weight: 600; color: #334155; padding: 0; margin-bottom: 0.2rem; }
.order-form .shipments > .slip-hint { margin: 0 0 0.6rem; }
.order-form .shipment-rows { display: block; margin: 0; }
.order-form .shipment-row { display: grid; grid-template-columns: 1fr 1fr 6.5rem 6rem auto; gap: 0.5rem; align-items: end; padding: 0.6rem 0.7rem; border: 1px solid #e2e8f0; border-radius: 0.4rem; margin: 0 0 0.5rem; background: #f8fafc; }
.order-form .shipment-row > div { margin: 0; }
.order-form .shipment-row label { display: block; font-size: 0.78rem; font-weight: 600; }
.order-form .shipment-row select, .order-form .shipment-row input { width: 100%; box-sizing: border-box; }
.order-form .shipment-row .row-errors { grid-column: 1 / -1; margin: 0 0 0.1rem; }
.order-form .shipment-row .row-errors ul { margin: 0; }
.order-form .remove-line { background: none; border: 1px solid #cbd5e1; color: #475569; border-radius: 0.35rem; padding: 0.4rem 0.6rem; font-size: 0.8rem; cursor: pointer; align-self: end; }
/* The first row cannot be removed; its button keeps the column so rows align. */
.order-form .remove-line-anchor { visibility: hidden; }
.order-form .add-line { background: none; border: 1px dashed #94a3b8; color: #475569; border-radius: 0.35rem; padding: 0.4rem 0.8rem; font-size: 0.85rem; margin: 0.1rem 0 0.6rem; cursor: pointer; }
.order-form .order-summary { font-size: 0.9rem; color: #334155; border-top: 1px solid #e2e8f0; padding-top: 0.6rem; margin: 0; }
.order-form .order-summary:empty { display: none; } /* no script, no running total */
.order-form .add-limit { font-size: 0.85rem; color: #7a5c00; background: #fff7e0; border: 1px solid #f0dca0; border-radius: 0.35rem; padding: 0.4rem 0.7rem; margin: 0.1rem 0 0.6rem; }

/* E-gift delivery trail (D-2-02) */
.chip-sent { background: #fff7e0; color: #7a5c00; border: 1px solid #f0dca0; }
.chip-delivered { background: #e3edf9; color: #1d4f80; border: 1px solid #b6d0ea; }
.chip-read { background: #e6f6ea; color: #1d5c2e; border: 1px solid #9fd8ae; }

/* User directory — the P-7 account lifecycle */
.chip-active { background: #e6f6ea; color: #1d5c2e; border: 1px solid #9fd8ae; }
.chip-disabled { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; }
.btn-deactivate { background: #93261b; }
.btn-deactivate:hover { background: #b42318; }

/* MCC restriction policy desk */
.chip-pending { background: #fff7e0; color: #7a5c00; border: 1px solid #f0dca0; }
.chip-effective { background: #e6f6ea; color: #1d5c2e; border: 1px solid #9fd8ae; }
.sla-ok { color: #1d5c2e; font-size: 0.85rem; }
.mcc-table { max-width: 46rem; }

/* Report catalog & previews */
.chip-preview { background: #e6f6ea; color: #1d5c2e; border: 1px solid #9fd8ae; }
.chip-awaiting-processor-data { background: #fff7e0; color: #7a5c00; border: 1px solid #f0dca0; }
.chip-proposed { background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe; }
.report-actions .inline-links { align-self: center; margin-left: 0.5rem; color: #475569; }
.report-actions { display: flex; align-items: center; gap: 0.6rem; margin: 0.9rem 0; flex-wrap: wrap; }
.btn-disabled { background: #e9edf2; color: #94a3b8; border: 1px solid #d5dce4; border-radius: 0.35rem; padding: 0.5rem 1.1rem; font-size: 0.9rem; cursor: not-allowed; }
.report-hint { font-size: 0.8rem; color: #64748b; }

/* Help & resources — the contract-required in-portal documentation */
.help-desk-strip { background: #e3edf9; border: 1px solid #b6d0ea; color: #1d4f80; border-radius: 0.4rem; padding: 0.55rem 0.9rem; font-size: 0.9rem; display: inline-block; }
.help-intro { font-size: 0.9rem; color: #475569; max-width: 46rem; }
.help-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 22rem)); gap: 0.9rem; margin-top: 0.6rem; }
.help-card { display: block; background: #fff; border: 1px solid #e2e8f0; border-radius: 0.5rem; padding: 1rem 1.1rem; text-decoration: none; }
.help-card:hover { border-color: #14395e; }
.help-card-title { display: block; font-weight: 600; color: #14395e; margin-bottom: 0.3rem; }
.help-card-blurb { display: block; font-size: 0.85rem; color: #64748b; }
.help-body { max-width: 46rem; background: #fff; border: 1px solid #e2e8f0; border-radius: 0.5rem; padding: 1.1rem 1.4rem; font-size: 0.92rem; color: #1a1f24; }
.help-body h2 { margin-top: 1.2rem; }
.help-steps { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.6rem; }
.help-contacts { max-width: 40rem; }
.help-link { font-size: 0.85rem; color: #475569; }
.version-line { font-size: 0.75rem; color: #64748b; margin-top: 0.8rem; }
.edit-chip { font-size: 0.78rem; color: #5b21b6; background: #f5f0ff; border: 1px dashed #ddd0fa; padding: 0.25rem 0.6rem; border-radius: 0.3rem; white-space: nowrap; }

/* Collapsible preview emulator — deliberately styled to read as an overlaid dev
   tool, not part of the app: a brighter "doesn't belong" accent, offset from the
   top, and a slim collapsed tab. */
.emulator { background: #1e1533; color: #e4dcff; width: 280px; margin-top: 2.5rem; align-self: start; border: 2px solid #8b5cf6; border-right: none; border-radius: 0.5rem 0 0 0.5rem; overflow: hidden; transition: width 0.15s ease; }
.emulator.collapsed { width: 26px; }
.emulator.collapsed .emulator-body, .emulator.collapsed .emulator-toggle-label { display: none; }
.emulator.collapsed .emulator-chevron { transform: rotate(180deg); }
.emulator-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; background: #8b5cf6; color: #fff; border: none; padding: 0.6rem 0.7rem; cursor: pointer; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }
.emulator-chevron { display: inline-block; transition: transform 0.15s ease; }
.emulator-body { padding: 0.9rem; }
.emulator-hint { font-size: 0.75rem; color: #8fa0b3; margin: 0 0 0.8rem; }
.persona-list { list-style: none; margin: 0 0 0.8rem; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.persona { width: 100%; text-align: left; background: #17212e; color: #d7dee7; border: 1px solid #24313f; border-radius: 0.35rem; padding: 0.5rem 0.6rem; cursor: pointer; }
.persona:hover { border-color: #3a4d63; }
.persona.selected { border-color: #f0b429; background: #1c2b1a; }
.persona-label { display: block; font-size: 0.85rem; font-weight: 600; }
.persona-meta { display: block; font-size: 0.7rem; color: #8fa0b3; margin-top: 0.15rem; }
.emulator-current { font-size: 0.78rem; color: #a9b7c6; border-top: 1px solid #24313f; padding-top: 0.6rem; margin: 0; }

/* Right rail: stacks the walkthrough notes above the preview emulator in the
   third grid column. */
.right-rail { display: flex; flex-direction: column; align-items: flex-end; gap: 1.25rem; margin-top: 2.5rem; }
.right-rail .emulator { align-self: flex-end; margin-top: 0; }

/* Internal walkthrough notes — single-sourced from portal.core.demo_notes,
   shown only when PORTAL_DEMO_NOTES is on. Teal, to read distinctly from the
   violet persona emulator; always visible so there's nothing to toggle mid-demo. */
.demo-notes { background: #0c2733; color: #d7e6ea; width: 340px; border: 2px solid #0e7490; border-right: none; border-radius: 0.5rem 0 0 0.5rem; overflow: hidden; transition: width 0.15s ease; }
.demo-notes.collapsed { width: 26px; }
.demo-notes.collapsed .demo-notes-body, .demo-notes.collapsed .demo-notes-toggle-label { display: none; }
.demo-notes.collapsed .demo-notes-chevron { transform: rotate(180deg); }
.demo-notes-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; background: #0e7490; color: #fff; border: none; padding: 0.6rem 0.7rem; cursor: pointer; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; text-align: left; }
.demo-notes-chevron { display: inline-block; transition: transform 0.15s ease; }
.demo-notes-body { padding: 0.9rem; max-height: calc(100vh - 210px); overflow-y: auto; }
.demo-notes-section { margin: 0 0 0.9rem; }
.demo-notes-section h3 { font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: #7fd3e6; margin: 0 0 0.35rem; }
.demo-notes-section ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.demo-notes-section li { font-size: 0.8rem; line-height: 1.35; color: #e6f0f2; }
.demo-notes-empty { font-size: 0.8rem; color: #8fb3bd; margin: 0.3rem 0 0.8rem; }
.demo-notes-flag { font-size: 0.66rem; color: #6f97a2; border-top: 1px solid #143a44; padding-top: 0.55rem; margin: 0.4rem 0 0; }

/* Authenticated viewers waiting for a portal entitlement. */
.unentitled { max-width: 46rem; margin: 4rem auto; padding: 0 1.5rem; }
.unentitled-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 0.5rem; padding: 1.5rem 1.75rem; }
.unentitled-card h1 { margin-top: 0; color: #14395e; }
.unentitled-card p { color: #475569; line-height: 1.5; }

/* Sign-in codes by text: one card, no sidenav, like the other sign-in screens. */
.setup-page { display: flex; justify-content: center; padding: 3rem 1rem; }
.setup-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 0.5rem; padding: 1.75rem 2rem; width: min(100%, 30rem); display: flex; flex-direction: column; gap: 1rem; }
.setup-heading { margin: 0; color: #14395e; font-size: 1.4rem; }
.setup-intro { margin: 0; color: #475569; line-height: 1.5; }
.setup-saved { margin: 0; background: #e6f6ea; border: 1px solid #9fd8ae; color: #1d5c2e; border-radius: 0.35rem; padding: 0.5rem 0.75rem; font-size: 0.9rem; }
.setup-number { margin: 0; color: #1a1f24; line-height: 1.5; }
.setup-hint { margin: 0; font-size: 0.82rem; color: #64748b; }
.setup-consent { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.88rem; color: #1a1f24; line-height: 1.45; }
.setup-consent input { margin-top: 0.2rem; flex: none; }
.setup-error { margin: 0; color: #a4262c; font-size: 0.85rem; }
.setup-card .btn-primary { align-self: flex-start; }
/* The public page that describes the sign-in texts (build_public_pages). */
.public-head { background: #14395e; color: #fff; padding: 1rem 2rem; }
.public-operator { margin: 0; font-weight: 700; }
.public-main { max-width: 46rem; margin: 2rem auto; padding: 0 1.5rem; color: #1a1f24; line-height: 1.55; }
.public-main h1 { color: #14395e; }
.public-consent { margin: 1.25rem 0; padding: 1rem 1.25rem; background: #fff; border: 1px solid #e2e8f0; border-left: 4px solid #14395e; border-radius: 0.4rem; color: #1a1f24; }
.public-terms { padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; }
.public-foot { max-width: 46rem; margin: 3rem auto 2rem; padding: 0 1.5rem; color: #64748b; font-size: 0.85rem; }

/* Audit count entry, comparison, and correction states. */
.audit-entry-preview { margin-top: 0.75rem; margin-bottom: 0.75rem; display: grid; gap: 0.4rem; max-width: 42rem; }
.audit-entry-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.55rem 0.7rem; border: 1px solid #c8c8c8; border-radius: 0.2rem; }
.audit-entry-row-error { border-color: #b42318; background: #fef3f2; color: #7a271a; }
.audit-entry-row-valid { background: #fff; }
.audit-entry-status { font-weight: 600; text-align: right; }
.audit-status { display: flex; align-items: baseline; gap: 0.35rem; margin: 0.5rem 0 1.5rem; font-size: 1.2rem; }
.audit-status strong { font-size: 1.25rem; }
.audit-comparison { max-width: 60rem; margin-top: 0; }
.audit-comparison > h3:first-child { margin-top: 0; }
.audit-comparison h3 { margin-top: 1.5rem; margin-bottom: 0.4rem; }
.audit-comparison .slip-hint { margin-top: 0; margin-bottom: 0.75rem; max-width: 52rem; }
.audit-comparison ul { list-style: none; margin: 0.5rem 0 0; padding: 0; max-width: 52rem; }
.audit-comparison li { margin-bottom: 0.75rem; }
.audit-comparison .puid { display: block; font-weight: 600; margin-bottom: 0.5rem; }
.audit-correction-form { display: grid; grid-template-columns: minmax(15rem, 28rem) auto; align-items: end; gap: 0.35rem 0.75rem; padding: 0.75rem; background: #fff; border: 1px solid #d7dee8; border-radius: 0.35rem; }
.audit-correction-form label { grid-column: 1; font-weight: 600; }
.audit-correction-form textarea { grid-column: 1; width: 100%; box-sizing: border-box; }
.audit-correction-form > .btn-small, .audit-correction-form > button { grid-column: 2; grid-row: 2; }
.audit-correction-actions { grid-column: 2; grid-row: 2; display: flex; gap: 0.5rem; align-items: end; }
.audit-empty { color: #526987; }
.audit-reenter { display: inline-block; width: fit-content; }
.audit-start-button { margin-top: 0.75rem; }
.transfer-actions { margin-top: 0.75rem; }

.audit-review-panel { max-width: 40rem; margin-top: 0.5rem; }
.audit-review-panel .btn-small { font-size: 1rem; }
.audit-review-panel h2 { margin: 0 0 0.75rem; font-size: 1.17em; }
.audit-review-panel > .page-actions { margin-bottom: 0.75rem; }
.audit-review-panel .audit-correction-form { width: fit-content; max-width: 100%; grid-template-columns: minmax(18rem, 26rem) max-content; }

/* Issuance form */
.issuance-envelope-field { margin-bottom: 1rem; }
.envelope-confirmation { margin: 0.5rem 0 0; }

.not-located-form { display: grid; gap: 1.1rem; max-width: 34rem; margin-top: 1rem; }
.not-located-field { display: grid; gap: 0.35rem; }
.not-located-field label { font-weight: 600; }
.not-located-field .slip-hint { margin: 0; }
.not-located-field input, .not-located-field textarea { width: 100%; box-sizing: border-box; }
.not-located-actions { display: flex; justify-content: flex-start; }