/* Velo-side additions (round 3). Loads after a.css. Everything here is Velo/day side only. */

/* ============ 1. ORDER BOARD: plain text, no pills ============ */
.ob-tabs { align-items: center; gap: 16px; }
.ob-tabs span { padding: 0; border: 0; border-radius: 0; background: none; color: var(--ink-muted); letter-spacing: .08em; text-transform: uppercase; }
.ob-tabs .w { display: inline-flex; align-items: center; gap: 7px; background: none; color: var(--warn-ink); }
.ob-tabs .w::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); flex: none; }

.ob .ob-row > .chip { padding: 0; border: 0 !important; border-radius: 0; background: none !important; white-space: nowrap; }
/* mode: mono caps */
.ob .ob-row > .chip:nth-child(2) { color: var(--ink) !important; font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
/* status: coloured dot + plain text */
.ob .ob-row > .chip:nth-child(4) { gap: 8px; color: var(--ink) !important; font: 500 12.5px/1.2 var(--font-body); letter-spacing: 0; }
.ob .ob-row > .chip .dot { width: 7px; height: 7px; background: var(--ink-muted); flex: none; }
.ob .ob-row > .chip-ok .dot { background: var(--accent); }
.ob .ob-row > .chip-warn .dot { background: var(--warn); }
.ob .ob-row.is-exc > .chip-warn { color: var(--warn-ink) !important; font-weight: 700; }

/* ============ 2. MODES: 3 -> 1, strike the 3 only ============ */
.modes-title s.m-three { position: relative; display: inline-block; text-decoration: none; color: var(--ink-muted); }
.modes-title s.m-three::after { content: ""; position: absolute; left: -7%; right: -7%; top: 52%; height: max(3px, .05em); background: var(--accent); transform: rotate(-8deg); transform-origin: center; pointer-events: none; }
.modes-title .m-one { color: var(--ink); }

/* ============ 3. MATCH & PAY: native, no OCR ============ */
.readby { display: flex; align-items: center; gap: 10px; margin: 2px 0 0; font: 500 11px/1.4 var(--font-mono); letter-spacing: .04em; color: var(--ok-ink); }
.rb-scan { position: relative; flex: none; width: 15px; height: 19px; border: 1.5px solid currentColor; border-radius: 2px; overflow: hidden; }
.rb-scan::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1.5px; background: currentColor; animation: rb-scan 2.6s var(--ease) infinite; }
@keyframes rb-scan { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(16px); opacity: 0; } }

/* ============ 4. NEW SECTIONS: shared ============ */
.vx { border-top: 1px solid var(--line); }
.vx-giant { font-size: min(20vw, 9rem); margin: 0 0 20px; white-space: nowrap; }
.vx-lede { max-width: 40ch; }
.vx-lede .tiny, .vx-copy .tiny { color: var(--ink-muted); max-width: 40ch; }
.vx-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 4px 0 36px; }
.vx-head .vx-giant { margin-bottom: 14px; }
.vx-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: 4px; }
.vx-stage { min-width: 0; }
@media (min-width: 880px) {
  .vx-head { grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: clamp(32px, 6vw, 96px); margin-bottom: 56px; }
  .vx-head .vx-giant { font-size: clamp(8rem, 1rem + 15vw, 18rem); margin-bottom: 0; }
  .vx-lede { padding-bottom: 1.2vw; }
  .vx-split { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(32px, 6vw, 96px); align-items: center; }
  .vx-split .vx-giant { font-size: clamp(4.5rem, 8.4vw, 6.9rem); margin-bottom: 26px; }
  .vx-rev .vx-copy { order: 2; }
  .vx-rev .vx-stage { order: 1; }
}

/* ---------- 4a. Carrier portal (phone) ---------- */
.phone { width: min(100%, 308px); margin-inline: auto; padding: 10px; border-radius: 42px; background: var(--ink); box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 36px 70px -30px rgba(27,26,23,.55); }
.ph-screen { display: grid; gap: 16px; padding: 22px 16px 18px; border-radius: 32px; background: var(--panel); }
.ph-bar { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.ph-logo { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border: 1.5px dashed var(--ink-muted); border-radius: 8px; font: 500 9px/1 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
.ph-who { display: grid; gap: 3px; min-width: 0; }
.ph-who b { font: 700 14px/1.2 var(--font-body); }
.ph-load { display: grid; gap: 4px; }
.ph-id { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; }
.ph-id b { font: 500 13px/1.3 var(--font-mono); letter-spacing: .02em; }
.ph-mode { font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.ph-lane { margin: 0; font: 700 15px/1.3 var(--font-body); }
.ph-lane i { font-style: normal; color: var(--ink-muted); padding: 0 2px; }
.ph-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ph-btn { display: grid; gap: 6px; align-content: center; min-height: 64px; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); color: var(--ok-ink); }
.ph-btn-k { font: 700 14px/1.2 var(--font-body); display: flex; align-items: center; gap: 7px; color: var(--ink); }
.ph-btn-k::before { content: "✓"; font-weight: 700; color: var(--accent); }
.ph-btn time { font: 500 11.5px/1 var(--font-mono); letter-spacing: .02em; }
.ph-list { list-style: none; margin: 0; padding: 0; }
.ph-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.ph-t { display: grid; gap: 2px; min-width: 0; }
.ph-t b { font: 700 13px/1.2 var(--font-body); }
.ph-t .tiny { font: 400 11px/1.3 var(--font-mono); color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ph-ico { position: relative; width: 28px; height: 28px; border-radius: 8px; background: var(--inset); border: 1px solid var(--line); }
.ph-doc::after { content: ""; position: absolute; left: 8px; top: 6px; width: 10px; height: 14px; border: 1.5px solid var(--ink); border-radius: 2px; background: linear-gradient(var(--ink), var(--ink)) 2px 4px / 4px 1.5px no-repeat, linear-gradient(var(--ink), var(--ink)) 2px 7px / 4px 1.5px no-repeat; }
.ph-pay::after { content: "$"; position: absolute; inset: 0; display: grid; place-items: center; font: 500 13px/1 var(--font-mono); color: var(--ink); }
.ph-ok { display: inline-flex; align-items: center; gap: 6px; font: 500 11px/1.2 var(--font-mono); color: var(--ok-ink); white-space: nowrap; }
.ph-ok i { font-style: normal; font-weight: 700; color: var(--accent); }
.ph-list li .ph-ok:last-child { grid-column: 3; }
.ph-st { grid-column: 2 / -1; display: inline-flex; align-items: center; gap: 8px; font: 500 11.5px/1.2 var(--font-mono); color: var(--ink); }
.ph-st .dot { width: 7px; height: 7px; background: var(--accent); position: relative; }
.ph-st .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); animation: ping 2.4s var(--ease) infinite; }
/* the BOL row: label would crowd the 308px phone, so drop the file name on the narrowest screens */
@media (max-width: 380px) { .ph-t .tiny { display: none; } }

/* ---------- 4b. Agent network (credit split) ---------- */
.ag { padding: 20px 18px 22px; display: grid; gap: 22px; }
.ag-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.ag-line { text-align: right; }
.ag-cust { margin: 4px 0 0; font: 700 15px/1.3 var(--font-body); }
.ag-who { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.ag-a { display: grid; gap: 4px; align-content: start; min-width: 0; }
.ag-a2 { order: -1; }              /* Agent 2 sits on the left so the bar grows in the same direction as the slider thumb */
.ag-a1 { text-align: right; }
.ag-a .kicker { display: flex; align-items: center; gap: 8px; }
.ag-a1 .kicker { justify-content: flex-end; }
.ag-key { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.ag-a1 .ag-key { background: var(--ink); }
.ag-a2 .ag-key { background: var(--accent); }
.ag-name { font-size: 13px; line-height: 1.3; color: var(--ink-muted); }
.ag-amt { font: 900 var(--t-lg)/1.05 var(--font-velo); letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.ag-bar { position: relative; height: 22px; border-radius: 6px; background: var(--ink); overflow: hidden; }
.ag-seg2 { position: absolute; inset: 0; background: var(--accent); transform-origin: left center; transform: scaleX(.4); will-change: transform; }
.ag-ctl { display: grid; gap: 2px; }
.ag-lab { font: 500 var(--t-2xs)/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.ag-range { --p: 40%; -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.ag-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(to right, var(--accent) var(--p), var(--line) var(--p)); }
.ag-range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--line); }
.ag-range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--accent); }
.ag-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 44px; height: 44px; margin-top: -19px; border: 8px solid transparent; border-radius: 50%; background: var(--ink); background-clip: padding-box; box-shadow: 0 0 0 3px var(--panel) inset; cursor: grab; }
.ag-range::-moz-range-thumb { box-sizing: border-box; width: 44px; height: 44px; border: 8px solid transparent; border-radius: 50%; background: var(--ink); background-clip: padding-box; cursor: grab; }
.ag-range:active::-webkit-slider-thumb { cursor: grabbing; }
.ag-range:focus-visible { outline-offset: 0; border-radius: 22px; }
.ag-range:focus-visible::-webkit-slider-thumb { background: var(--accent); }
.ag-range:focus-visible::-moz-range-thumb { background: var(--accent); }
.ag-scale { display: flex; justify-content: space-between; font: 400 11px/1 var(--font-mono); color: var(--ink-muted); padding-inline: 6px; }
.ag-comm { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0; padding-top: 16px; border-top: 1px solid var(--line); font: 500 12px/1.4 var(--font-mono); }
@media (min-width: 880px) {
  .ag { padding: 32px 40px 34px; gap: 28px; margin-inline: 0; }
  .ag-bar { height: 28px; }
  .ag-name { font-size: 14px; }
}

/* ---------- 4c. EDI mapper ---------- */
.edi { padding: 16px; }
.edi-top { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 12px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.edi-body { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); align-items: start; }
.edi-col { list-style: none; margin: 0; padding: 0; }
.edi-col li { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--inset); min-width: 0; }
.edi-col li + li { margin-top: 8px; }
.edi-col li b { font: 500 12.5px/1.1 var(--font-mono); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.edi-col li span { font-size: 11px; line-height: 1.1; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.edi-src li:not(.is-dim)::after, .edi-dst li:not(.is-dim)::before { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--ink); }
.edi-src li::after { right: -4px; }
.edi-dst li::before { left: -4px; }
.edi-col .is-dim { opacity: .55; border-style: dashed; background: transparent; }
.edi-dst .is-drop { border: 1.5px dashed var(--accent); background: var(--accent-soft); }
.edi-dst .is-drop span { color: var(--ok-ink); }
.edi-dst .is-drop::before { background: var(--accent); }
.edi-src .is-drag { z-index: 2; background: var(--panel); border-color: var(--ink); box-shadow: 0 16px 28px -14px rgba(27,26,23,.5); transform: translate(14px, -3px) rotate(-1.5deg); animation: edi-drag 3.4s ease-in-out infinite; }
.edi-src .is-drag::before { content: ""; position: absolute; right: 8px; top: 8px; width: 10px; height: 14px; background: radial-gradient(circle, var(--ink-muted) 1.2px, transparent 1.6px) 0 0 / 5px 5px; }
.edi-src .is-drag::after { background: var(--accent); }
@keyframes edi-drag { 0%, 100% { transform: translate(14px, -3px) rotate(-1.5deg); } 50% { transform: translate(24px, -8px) rotate(-2.5deg); } }
.edi-lines { width: 100%; height: 184px; overflow: visible; }
.edi-lines path { fill: none; stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.edi-lines .dash { stroke: var(--accent); stroke-dasharray: 5 4; }
@media (min-width: 880px) {
  .edi { padding: 22px 24px 26px; }
  .edi-body { grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); }
  .edi-col li { padding: 0 14px; }
}

/* ---------- 4d. Asset + non-asset intermodal ---------- */
.ai { padding: 14px 14px 12px; }
.ai-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.ai-seg { display: flex; gap: 2px; width: 100%; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--inset); }
.ai-opt { flex: 1 1 auto; min-height: 44px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--ink-muted); font: 500 12.5px/1 var(--font-body); cursor: pointer; white-space: nowrap; transition: background-color 160ms var(--ease), color 160ms var(--ease); }
.ai-opt:hover { color: var(--ink); }
.ai-opt[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.ai-rows { list-style: none; margin: 0; padding: 0; }
.ai-row { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "id mode" "lane lane" "src src" "st st"; align-items: center; gap: 6px 12px; padding: 14px 6px; border-top: 1px solid var(--line); transition: opacity 300ms var(--ease); }
.ai-row:first-child { border-top: 0; }
.ai-row .id { grid-area: id; font: 500 12px/1 var(--font-mono); letter-spacing: .02em; }
.ai-mode { grid-area: mode; font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.ai-row .lane { grid-area: lane; font-size: 14px; font-weight: 500; }
.ai-row .lane i { font-style: normal; color: var(--ink-muted); padding: 0 2px; }
.ai-src { grid-area: src; display: grid; grid-template-columns: 10px minmax(0, 1fr); column-gap: 10px; row-gap: 3px; align-items: center; }
.ai-key { grid-row: 1 / 3; width: 10px; height: 10px; border-radius: 2px; }
.ai-key.is-own { background: var(--ink); }
.ai-key.is-buy { border: 1.5px solid var(--accent); background: var(--accent-soft); }
.ai-k { font: 500 10.5px/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.ai-cn { font: 500 12.5px/1.2 var(--font-mono); letter-spacing: .02em; }
.ai-st { grid-area: st; display: inline-flex; align-items: center; gap: 8px; font: 500 12.5px/1.2 var(--font-body); }
.ai-st .dot { width: 7px; height: 7px; background: var(--accent); flex: none; }
.ai-st.is-wait .dot { background: var(--ink-muted); }
.ai-foot { margin: 0; padding: 14px 6px 6px; border-top: 1px solid var(--line); color: var(--ink-muted); }
.ai[data-show="own"] .ai-row[data-src="buy"], .ai[data-show="buy"] .ai-row[data-src="own"] { opacity: .26; }
@media (min-width: 880px) {
  .ai { padding: 22px 28px 16px; }
  .ai-seg { width: auto; }
  .ai-opt { flex: none; padding: 0 16px; }
  .ai-row { grid-template-columns: 96px 76px minmax(0, 1.25fr) minmax(0, 1fr) 176px; grid-template-areas: "id mode lane src st"; gap: 12px 16px; padding: 18px 8px; }
  .ai-row .lane { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .rb-scan::after { animation: none; opacity: 1; transform: translateY(8px); }
  .edi-src .is-drag, .ph-st .dot::after { animation: none; }
  .ag-seg2 { will-change: auto; }
}

/* ============================================================
   ROUND 4 POLISH
   ============================================================ */

/* ---- R4.1 MODES: "3 < 1" (three systems are worth less than one). Strike stays on the 3 only. ---- */
.modes-title .m-lt { display: inline-block; margin: 0 .1em 0 .2em; font-size: .46em; font-weight: 900; line-height: 1; letter-spacing: 0; color: var(--accent); text-decoration: none; vertical-align: .41em; transform: scaleX(1.12); transform-origin: center; }

/* ---- R4.2 ORDER BOARD: one fixed status column so every dot shares the same x ---- */
.ob { --ob-px: 6px; --ob-st: 124px; }
.ob .ob-top { padding-inline: var(--ob-px); }
.ob .ob-row { padding-inline: var(--ob-px); }
/* status cell: fixed width, dot + text left-aligned inside it, cell itself sits on the right edge */
.ob .ob-row > .chip:nth-child(4) { width: var(--ob-st); justify-self: end; justify-content: flex-start; text-align: left; }
/* header: the exception marker takes the same fixed column, so its dot lines up with the dots below */
.ob .ob-tabs { gap: 0; }
.ob .ob-tabs .w { width: var(--ob-st); justify-content: flex-start; }
.ob .ob-tabs > span:first-child { margin-right: 6px; }
.ob .ob-tabs > span:first-child::after { content: "\00b7"; margin-left: 10px; }
@media (min-width: 880px) {
  .ob { --ob-px: 8px; --ob-st: 132px; }
  .ob .ob-row { grid-template-columns: 92px 70px minmax(0, 1fr) var(--ob-st); }
  .ob .ob-row > .chip:nth-child(4) { justify-self: stretch; }
}

/* ---- R4.3 CARRIER PORTAL: generic modern phone (no brand marks) ---- */
.phone { position: relative; width: min(100%, 300px); aspect-ratio: 9 / 19.5; padding: 11px; border-radius: 50px; background: linear-gradient(145deg, #2b2a27, var(--ink) 40%, #0e0d0b); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.1), 0 1px 0 rgba(0,0,0,.02), 0 36px 70px -30px rgba(27,26,23,.55); }
.ph-screen { position: relative; display: flex; flex-direction: column; gap: 20px; height: 100%; padding: 58px 16px 32px; border-radius: 39px; background: var(--panel); overflow: hidden; }
/* side buttons: thin bars hugging the edges */
.ph-side { position: absolute; width: 3px; border-radius: 2px; background: #3a3833; }
.ph-side-a { left: -2.5px; top: 88px; height: 22px; }
.ph-side-b { left: -2.5px; top: 128px; height: 40px; }
.ph-side-c { left: -2.5px; top: 178px; height: 40px; }
.ph-side-p { right: -2.5px; top: 140px; height: 64px; }
/* status bar + island */
.ph-status { position: absolute; left: 0; right: 0; top: 0; height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 6px 20px 0 26px; color: var(--ink); pointer-events: none; }
.ph-clock { font: 700 13.5px/1 var(--font-body); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ph-island { position: absolute; left: 50%; top: 10px; width: 78px; height: 23px; margin-left: -39px; border-radius: 999px; background: #000; }
.ph-sys { display: inline-flex; align-items: center; gap: 4px; }
.ph-sys svg { fill: currentColor; width: auto; height: 10px; max-width: none; }
/* home indicator */
.ph-home { position: absolute; left: 50%; bottom: 8px; width: 104px; height: 4px; margin-left: -52px; border-radius: 2px; background: var(--ink); opacity: .85; }
/* header: Velo wordmark + tiny kicker */
.ph-bar { gap: 12px; padding-bottom: 12px; }
.ph-bar .mark-velo { width: 66px; color: var(--ink); }
.ph-bar .ph-who { padding-left: 12px; border-left: 1px solid var(--line); }
.ph-list li { padding: 15px 0; }
.ph-acts .ph-btn { min-height: 78px; }
.ph-load { gap: 6px; }
.ph-bar { padding-bottom: 16px; }
/* fit the phone + sticky CTA in a 375x812 viewport */
@media (max-width: 760px) {
  .phone { width: min(100%, 292px); }
  .ph-screen { gap: 16px; }
}
@media (max-width: 380px) { .ph-t .tiny { display: none; } .ph-list li .ph-ok { font-size: 10.5px; } }

/* ============================================================
   ROUND 5: freight agents, commissions, API connectors
   ============================================================ */

/* ---- R5.1 API connectors: six chips stay in two rows on phones (card height unchanged) ---- */
@media (max-width: 520px) {
  .t-api .parts { gap: 6px 5px; }
  .t-api .parts li { gap: 6px; padding: 6px 9px; }
}

/* ---- R5.2 FREIGHT AGENTS: roster card ---- */
.vx-fa .vx-giant { font-size: min(17vw, 8rem); }
@media (min-width: 880px) {
  .vx-fa .vx-head .vx-giant { font-size: clamp(5.5rem, .5rem + 11.2vw, 13rem); }
}
.fa { padding: 18px 16px 18px; display: grid; gap: 16px; }
.fa-top { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.fa-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.fa-o { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--inset); min-width: 0; }
.fa-name { margin: 0; font: 900 18px/1.1 var(--font-velo); letter-spacing: -.02em; text-transform: uppercase; }
.fa-st { margin: 0; display: grid; }
.fa-st > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 6px 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13px; }
.fa-st dt { color: var(--ink-muted); }
.fa-st dd { margin: 0; font: 500 13px/1.2 var(--font-mono); font-variant-numeric: tabular-nums; }
.fa-cr i { grid-column: 1 / -1; position: relative; display: block; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.fa-cr i::after { content: ""; position: absolute; inset: 0; width: var(--w); background: var(--ink); border-radius: 3px; transform-origin: left; transform: scaleX(0); transition: transform 1000ms var(--ease) 250ms; }
.in .fa-cr i::after { transform: scaleX(1); }
.fa-cr.is-tight i::after { background: var(--warn); }
.fa-cr.is-tight dd { color: var(--warn-ink); }
.fa-foot { margin: 0; padding-top: 14px; border-top: 1px solid var(--line); }
@media (min-width: 880px) {
  .fa { padding: 28px 32px 26px; gap: 22px; }
  .fa-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .fa-o { padding: 22px; gap: 16px; }
  .fa-name { font-size: 20px; }
}

/* ---- R5.3 COMMISSIONS: wide bento tile ---- */
.t-com { display: grid; gap: 22px; }
.t-com-l { display: flex; flex-direction: column; gap: 10px; }
.t-com-l .tiny { max-width: 40ch; }
.t-com .ov-com { font-size: min(21vw, 9rem); margin: 14px 0 6px; white-space: nowrap; }
.com { align-self: end; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--inset); display: grid; gap: 14px; min-width: 0; }
.com-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.com-id { font: 500 12.5px/1.2 var(--font-mono); letter-spacing: .02em; }
.com-lane { font: 700 13px/1.3 var(--font-body); }
.com-lane i { font-style: normal; color: var(--ink-muted); padding: 0 2px; }
.com-margin { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; }
.com-mv { font: 900 clamp(2rem, 1.4rem + 2.6vw, 2.75rem)/1 var(--font-velo); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.com-sub { margin: 2px 0 -4px; }
.cm-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cm-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 12px; }
.cm-k { font: 700 13px/1.3 var(--font-body); }
.cm-v { font: 500 12px/1.3 var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cm-track { grid-column: 1 / -1; position: relative; display: block; padding-bottom: 14px; }
/* quiet dashed rail past the cap on the 7.5% rows: same 0-15% scale, nothing selectable beyond the cap */
.cm-track.is-half::before { content: ""; position: absolute; left: calc(var(--cap) - 22px); right: 0; top: 22px; border-top: 1px dashed var(--line); pointer-events: none; }
.cm-max { position: absolute; left: calc(var(--cap) - 22px); bottom: 0; transform: translateX(-50%); font: 400 10.5px/1 var(--font-mono); letter-spacing: .02em; color: var(--ink-muted); white-space: nowrap; pointer-events: none; }
/* cap marker: a hairline across the rail exactly where the thumb stops */
.cm-track::after { content: ""; position: absolute; left: calc(var(--cap) - 22px); top: 14px; height: 16px; width: 1px; background: var(--ink-muted); pointer-events: none; }
.cm-range { --f: .6667; -webkit-appearance: none; appearance: none; display: block; width: var(--cap, 100%); max-width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.cm-range { --edge: 22px; }
.cm-range::-webkit-slider-runnable-track { height: 6px; background: linear-gradient(to right, transparent var(--edge), var(--accent) var(--edge), var(--accent) calc(var(--edge) + (100% - 44px) * var(--f)), var(--line) calc(var(--edge) + (100% - 44px) * var(--f)), var(--line) calc(100% - var(--edge)), transparent calc(100% - var(--edge))); }
.cm-range::-moz-range-track { height: 6px; background: linear-gradient(to right, transparent var(--edge), var(--accent) var(--edge), var(--accent) calc(var(--edge) + (100% - 44px) * var(--f)), var(--line) calc(var(--edge) + (100% - 44px) * var(--f)), var(--line) calc(100% - var(--edge)), transparent calc(100% - var(--edge))); }
.cm-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 44px; height: 44px; margin-top: -19px; border: 8px solid transparent; border-radius: 50%; background: var(--ink); background-clip: padding-box; box-shadow: 0 0 0 3px var(--panel) inset; cursor: grab; }
.cm-range::-moz-range-thumb { box-sizing: border-box; width: 44px; height: 44px; border: 8px solid transparent; border-radius: 50%; background: var(--ink); background-clip: padding-box; cursor: grab; }
.cm-range:active::-webkit-slider-thumb { cursor: grabbing; }
.cm-range:focus-visible { outline-offset: 0; border-radius: 22px; }
.cm-range:focus-visible::-webkit-slider-thumb { background: var(--accent); }
.cm-range:focus-visible::-moz-range-thumb { background: var(--accent); }
.cm-after { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin: 0; padding-top: 14px; border-top: 1px solid var(--line); }
.cm-after-k { font: 700 13px/1.3 var(--font-body); }
.cm-after-v { font: 900 var(--t-lg)/1.05 var(--font-velo); letter-spacing: -.025em; font-variant-numeric: tabular-nums; }
.com-foot { display: flex; align-items: center; gap: 8px; margin: 0; padding-top: 12px; border-top: 1px solid var(--line); font: 500 11px/1.4 var(--font-mono); letter-spacing: .04em; color: var(--ok-ink); }
.com-foot .dot { width: 7px; height: 7px; background: var(--accent); flex: none; }
@media (min-width: 880px) {
  .t-com { grid-column: span 12; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 40px; align-items: end; }
  .t-com .ov-com { font-size: clamp(5rem, 9.6vw, 9.6rem); }
  .com { padding: 22px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .fa-cr i::after { transform: scaleX(1); transition: none; }
}

/* ---- Capacity tile: "Cover with" Asset / Non-asset toggle, bottom-left under the last lane (self-contained; changes nothing else) ---- */
/* In flow as the tile's last item: order moves it below the lane bars, align-self keeps it at the bars' left edge (no stretch). */
.t-cap .cw { order: 9; align-self: flex-start; display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.cw-k { font: 500 9.5px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; }
.cw-seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 28px; border: 1px solid var(--line); border-radius: 999px; background: var(--inset); }
.cw-thumb { position: absolute; top: 2px; bottom: 2px; left: 2px; width: calc(50% - 2px); border-radius: 999px; background: var(--ink); transition: transform 200ms var(--ease); pointer-events: none; }
.cw[data-cw="non"] .cw-thumb { transform: translateX(100%); }
.cw-opt { position: relative; z-index: 1; margin: 0; padding: 0 11px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-muted); font: 500 10.5px/1 var(--font-mono); letter-spacing: .03em; white-space: nowrap; cursor: pointer; transition: color 200ms var(--ease); }
.cw-opt::before { content: ""; position: absolute; inset: -9px -2px; }
.cw-opt[aria-pressed="true"] { color: var(--paper); }
.cw-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .cw-thumb, .cw-opt { transition: none; }
}