/*
 * FinFlot — diagram hosts and drawn-UI mocks. Every SVG/mock host reserves its
 * box (aspect-ratio) so the page never shifts when a visual initialises.
 * Page-specific layout stays inline in each page; this file styles the drawings.
 */

/* ---- existing d3 hosts ---- */
#ff-hero-flow { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#ff-journey-svg { width: 100%; height: auto; aspect-ratio: 1200 / 190; display: block; }
#ff-network-svg { width: 100%; max-width: 520px; height: auto; aspect-ratio: 1 / 1; display: block; margin: 0 auto; }

/* ---- generic ---- */
.viz-host { position: relative; width: 100%; }
.viz-host > svg { width: 100%; height: auto; display: block; }
.viz-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; fill: var(--ink-soft); }
.viz-label.gold { fill: var(--gold-ink); }
.viz-label.muted { fill: var(--muted); }
.viz-tip { position: absolute; z-index: var(--z-tooltip); pointer-events: none; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 13px; color: var(--ink); box-shadow: var(--shadow-card); max-width: 260px; opacity: 0; transition: opacity 0.15s ease; }
.viz-tip.on { opacity: 1; }
.cf-token { will-change: transform; }

/* ---- hero comparison ---- */
.hero-cmp-wide { aspect-ratio: 640 / 440; }
.hero-cmp-stacked { aspect-ratio: 360 / 560; }
.cmp-bg { fill: rgba(255,255,255,0.72); stroke: var(--line); stroke-width: 1; }
.cmp-bg.gold { stroke: rgba(195,146,46,0.55); fill: rgba(255,255,255,0.86); }
.cmp-cap { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em; fill: var(--ink-soft); }
.cmp-cap.muted { fill: var(--muted); }
.cmp-cap.gold { fill: var(--gold-ink); }
.cmp-glyph { color: var(--ink); }
.cmp-path { fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-dasharray: 5 5; opacity: 0.65; transition: opacity 0.2s ease, stroke 0.2s ease, stroke-width 0.2s ease; }
.cmp-path.on { stroke: var(--ink); opacity: 1; stroke-width: 2.2; }
.cmp-seal, .cmp-doc { color: var(--muted); transition: color 0.2s ease; }
.cmp-seal.on, .cmp-doc.on { color: var(--ink); }
.cmp-lender rect { fill: var(--card); stroke: var(--line); stroke-width: 1.4; transition: stroke 0.2s ease; }
.cmp-lender { color: var(--muted); cursor: default; transition: color 0.2s ease; }
.cmp-lender:hover, .cmp-lender.on { color: var(--ink); }
.cmp-lender:hover rect, .cmp-lender.on rect { stroke: var(--ink); }
.cmp-one { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.cmp-spoke { fill: none; stroke-width: 1.4; opacity: 0.85; }
.cmp-route, .lane-route { fill: none; stroke: none; }
.cmp-slab rect { fill: var(--card); stroke: rgba(195,146,46,0.6); stroke-width: 1.4; }
.cmp-slab { color: var(--gold-ink); }
.cmp-halo { fill: rgba(195,146,46,0.12); stroke: none; transform-box: fill-box; transform-origin: center; }
.cmp-seal-one.pulse .cmp-halo { animation: ffHalo 0.9s ease-out 2; }
@keyframes ffHalo { 0% { transform: scale(0.8); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }

/* ---- hero: the business in one line (#ff-hero-line) ---- */
.hero-line-wide { aspect-ratio: 1200 / 250; }
.hero-line-stacked { aspect-ratio: 360 / 700; }
.hl-one { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.hl-route { fill: none; stroke: none; }
.hl-ghost { fill: none; stroke: var(--muted); stroke-width: 1.3; stroke-dasharray: 4 4; opacity: 0.45; }
.hl-ghost-seal { color: var(--muted); opacity: 0.45; }
.hero-line .hl-ghost-cap { font-size: 8.5px; letter-spacing: 0.12em; }
.hl-st { color: var(--ink-soft); }
.hl-st.on { color: var(--ink); }
.hl-dot { fill: var(--card); stroke: var(--blue); stroke-width: 2; transition: stroke 0.3s ease, fill 0.3s ease; }
.hl-st.on .hl-dot { stroke: var(--gold-ink); fill: rgba(195,146,46,0.12); }
.hl-l { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; fill: var(--ink); }
.hl-l.sub { font-size: 9px; letter-spacing: 0.1em; fill: var(--ink-soft); }
.hero-line-wide .hl-l, .hero-line .hl-cap-sm, .hl-frame-t { text-anchor: middle; }
.hero-line-stacked .hl-l { text-anchor: start; }
.hero-line .hl-cap-sm { font-size: 9.5px; }
.hl-phone { fill: var(--card); stroke: currentColor; stroke-width: 1.5; }
.hl-bar { fill: var(--line); }
.hl-cam, .hl-env, .hl-house { color: var(--gold-ink); }
.hl-ping { fill: var(--gold); opacity: 0; transition: opacity 0.3s ease; transform-box: fill-box; transform-origin: center; }
.hl-ping.on { opacity: 1; animation: ffPing 1.1s ease-out infinite; }
@keyframes ffPing { 0% { transform: scale(0.7); } 60% { transform: scale(1.4); } 100% { transform: scale(0.7); } }
.hl-frame { fill: none; stroke: var(--gold-ink); stroke-dasharray: 4 3; stroke-width: 1.2; }
.hl-frame-t { font-family: var(--mono); font-size: 8px; letter-spacing: 0.14em; fill: var(--gold-ink); }
.hl-spoke { fill: none; stroke: var(--gold-ink); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: 0.8; }
.hl-ledger-bg { fill: var(--paper); stroke: var(--line); }
.hl-ledger-row { stroke: var(--line); stroke-width: 7; stroke-dasharray: 5 3; fill: none; }
.hl-ledger-tick { stroke: var(--gold); stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .hl-ping.on { animation: none; } .hl-dot { transition: none; } }

/* ---- drawn screens inside cards ---- */
.mock-scroll { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 2px -6px 0; padding: 0 6px; }
.mock-scroll svg { min-width: 320px; width: 100%; height: auto; display: block; color: var(--ink); }
.board, .lanes, .spokes { aspect-ratio: 340 / 236; }

/* payout block strip (HTML, wraps on small screens) */
.pstrip { display: flex; flex-wrap: wrap; gap: 10px 0; align-items: stretch; margin-top: 4px; }
.pb { position: relative; flex: 1 1 96px; min-width: 96px; border: 1px solid rgba(251,248,241,0.28); border-radius: 12px; padding: 12px 10px 10px; display: flex; flex-direction: column; gap: 7px; color: #D9E1F2; background: rgba(251,248,241,0.05); opacity: 0.35; transition: opacity 0.45s ease, border-color 0.25s ease, background 0.25s ease; }
.pb.lit { opacity: 1; }
.pb.hi { border-color: var(--gold-light); background: rgba(251,248,241,0.1); }
.pb span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.35; }
.pb span em { display: block; font-style: normal; text-transform: none; letter-spacing: 0.04em; color: #9FB0D2; font-size: 10px; }
.pb i { position: absolute; top: -8px; left: 10px; font-family: var(--serif); font-style: italic; font-size: 11px; color: #9FB0D2; background: var(--navy); padding: 0 5px; line-height: 1.2; }
.pb .ic { width: 18px; height: 18px; color: var(--gold-light); }
.pb-split { border-style: dashed; }
.pb-net { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.pb-net .ic { color: var(--navy); }
.pb + .pb { margin-left: 22px; }
.pb + .pb::before { content: ""; position: absolute; left: -15px; top: 50%; width: 8px; height: 8px; border-right: 1.6px solid #9FB0D2; border-top: 1.6px solid #9FB0D2; transform: translateY(-50%) rotate(45deg); }
.pstrip-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; margin-top: 2px; min-height: 32px; }
.invoice-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-light); border: 1px solid rgba(233,194,103,0.5); border-radius: 999px; padding: 5px 10px; opacity: 0; transform: translateX(-8px); transition: opacity 0.4s ease, transform 0.4s ease; }
.invoice-chip.lit { opacity: 1; transform: none; }
.invoice-chip .ic { width: 14px; height: 14px; }
.payout-vary { margin: 4px 0 0; font-family: var(--mono); font-size: 11.5px; line-height: 1.55; color: #B9C5DE; }
.ledger { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; width: 100%; }
.ledger li { font-size: 13.5px; line-height: 1.5; color: #B9C5DE; padding: 7px 10px; border-radius: 8px; border: 1px solid transparent; transition: border-color 0.2s ease, background 0.2s ease; }
.ledger li b { color: #FBF8F1; font-weight: 600; }
.ledger li.on { border-color: rgba(233,194,103,0.55); background: rgba(251,248,241,0.06); }
@media (max-width: 520px) {
  .pb { flex-basis: 40%; min-width: 0; }
  .pb + .pb { margin-left: 0; }
  .pb + .pb::before { display: none; }
  .pstrip { gap: 8px; }
}

/* case board */
.board .col-h { font-family: var(--mono); font-size: 7.5px; letter-spacing: 0.12em; fill: var(--muted); }
.board .col-l { stroke: var(--line-soft); stroke-width: 1; fill: none; }
.board .frame { fill: none; stroke: var(--gold-ink); stroke-width: 1; stroke-dasharray: 3 2; }
.board .frame-t { font-family: var(--mono); font-size: 6.2px; letter-spacing: 0.1em; fill: var(--gold-ink); }
.board .chip rect.bg { fill: var(--card); stroke: var(--line); stroke-width: 1; }
.board .chip rect.bar { fill: var(--line-soft); }
.board .chip text { font-family: var(--mono); font-size: 7px; letter-spacing: 0.06em; fill: var(--ink-soft); }
.board .chip .q { color: var(--gold-ink); }
.board .chip .tick { stroke: var(--green); stroke-width: 1.4; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.board .closed rect { fill: var(--paper-2); stroke: var(--line); stroke-width: 1; }
.board .closed text { font-family: var(--mono); font-size: 6.4px; letter-spacing: 0.08em; fill: var(--muted); }
.board .closed-lane { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; }

/* swim-lanes */
.lanes .lane { fill: var(--paper); stroke: var(--line-soft); }
.lanes .lane-h { font-family: var(--mono); font-size: 8px; letter-spacing: 0.16em; }
.lanes .lane-h.you { fill: var(--gold-ink); }
.lanes .lane-h.desk { fill: var(--blue); }
.lanes .lane-line { fill: none; stroke: var(--gold); stroke-width: 1.5; }
.lanes .lane-line.desk { stroke: var(--blue); }
.lanes .lane-hand { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 3 3; }
.lanes .lane-back { fill: none; stroke: var(--gold); stroke-width: 1; stroke-dasharray: 2 3; opacity: 0.8; }
.lanes .st { color: var(--ink-soft); }
.lanes .st-d { fill: var(--card); stroke: var(--gold); stroke-width: 1.5; }
.lanes .st.desk .st-d { stroke: var(--blue); }
.lanes .st-l { font-family: var(--mono); font-size: 6.6px; letter-spacing: 0.06em; fill: var(--ink-soft); text-anchor: middle; }
.lanes .st-l.back { fill: var(--gold-ink); font-size: 6.4px; }
.lanes .lane-token { opacity: 0; }
.lanes .lane-token.on { opacity: 1; }

/* permissions matrix */
.perm { position: relative; }
.perm-scroll { position: relative; /* contains the visually-hidden cell text */ overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--card); }
.perm-table { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.perm-table th, .perm-table td { transition: opacity 0.25s ease; }
.perm-table thead th { vertical-align: top; text-align: left; padding: 22px 14px 18px; border-bottom: 1px solid var(--line); }
.perm-table thead th.perm-corner { width: 190px; }
.perm-table thead th[data-col] { border-left: 1px solid var(--line-soft); }
.perm-head { width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: 12px; padding: 8px; margin: -8px 0 6px -8px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; color: var(--ink); font-family: var(--sans); transition: border-color 0.2s ease, background 0.2s ease; }
.perm-head:hover { border-color: var(--line); background: var(--paper); }
.perm-head[aria-pressed="true"] { border-color: rgba(195,146,46,0.55); background: rgba(195,146,46,0.06); }
.perm-head .ic-lg { width: 34px; height: 34px; color: var(--gold-ink); }
.ph-t { font-family: var(--serif); font-size: 16.5px; font-weight: 600; line-height: 1.25; }
.ph-d { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }
.ph-me { font-size: 13px; font-weight: 600; color: var(--blue); }
.perm-table tbody th { text-align: left; padding: 14px 16px; font-size: 14.5px; font-weight: 500; color: var(--ink); border-top: 1px solid var(--line-soft); vertical-align: middle; }
.perm-table tbody th .row-cap { display: block; font-size: 12px; color: var(--muted); font-weight: 400; line-height: 1.4; margin-top: 3px; }
.perm-table tbody td { padding: 14px 12px; border-top: 1px solid var(--line-soft); border-left: 1px solid var(--line-soft); text-align: center; vertical-align: middle; }
.pd { width: 22px; height: 22px; }
.pd.pop { animation: ffPop 0.35s var(--ease); }
@keyframes ffPop { 0% { transform: scale(0.5); opacity: 0.3; } 100% { transform: scale(1); opacity: 1; } }
.perm-table.has-sel tbody td:not(.sel) { opacity: 0.5; }
.perm-table.has-sel thead th[data-col]:not(.sel) { opacity: 0.45; }
.perm-table.has-sel tbody td.sel { background: rgba(195,146,46,0.05); }
.perm-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
.perm-cap { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-ink); }
.perm-legend { list-style: none; margin: 0; padding: 0; display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--mono); font-size: 11px; color: var(--ink-soft); }
.perm-legend li { display: inline-flex; align-items: center; gap: 6px; }
.perm-legend .pd { width: 16px; height: 16px; }
.perm-pills { display: none; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; margin-bottom: 8px; }
.perm-pill { flex: none; display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 8px 13px; cursor: pointer; }
.perm-pill[aria-pressed="true"] { background: var(--navy); color: var(--ivory); border-color: var(--navy); }
.perm-pill .ic { width: 16px; height: 16px; }
.perm.is-mobile .perm-pills { display: flex; }
.perm.is-mobile .perm-table { min-width: 0; table-layout: auto; }
.perm.is-mobile .perm-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.perm.is-mobile .perm-table tbody td:not(.sel) { display: none; }
.perm.is-mobile .perm-table tbody td.sel { width: 64px; opacity: 1; background: transparent; }
.perm.is-mobile .perm-table.has-sel tbody td.sel { opacity: 1; }
.perm.is-mobile .perm-table tbody th { padding: 12px 14px; }
.perm-me-mobile { display: none; margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--blue); }
.perm.is-mobile .perm-me-mobile { display: inline-block; }

/* onboarding track */
.track-svg .tr-line { fill: none; stroke: var(--gold); stroke-width: 2.5; stroke-linecap: round; }
.track-svg .tr-loop { fill: none; stroke: var(--gold); stroke-width: 2; stroke-dasharray: 5 4; }
.track-svg .tr-st circle { fill: var(--card); stroke: var(--gold); stroke-width: 2; transition: fill 0.3s ease, stroke 0.3s ease; }
.track-svg .tr-st.lit circle { stroke: var(--gold-ink); fill: rgba(195,146,46,0.1); }
.track-svg .tr-st { color: var(--ink-soft); cursor: pointer; }
.track-svg .tr-st.lit { color: var(--ink); }
.track-svg .tr-node circle { fill: var(--card); stroke: var(--gold); stroke-width: 1.5; }
.track-svg .tr-node.lender circle { stroke: var(--gold-ink); }
.track-svg .tr-l { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; fill: var(--ink-soft); text-anchor: middle; }
.track-svg .tr-l.small { font-size: 9.5px; }
.track-svg .tr-l.cap { fill: var(--gold-ink); font-size: 10px; }
.track-svg .tr-l.end { fill: var(--ink); }
.track-svg .tr-token { transition: none; }

/* journey blooms, token and labels */
#ff-journey-svg .jn-halo { opacity: 0.15; }
#ff-journey-svg .jn-dot { fill: var(--paper); stroke-width: 2; }
#ff-journey-svg .bloom { opacity: 0; transition: opacity 0.4s ease; }
#ff-journey-svg .bloom.on { opacity: 1; }
#ff-journey-svg .bl-card { fill: var(--card); stroke: var(--line); }
#ff-journey-svg .bl-bar { fill: var(--line-soft); }
#ff-journey-svg .bl-l { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; fill: var(--muted); }
#ff-journey-svg .bl-tick { fill: var(--card); stroke: var(--line); stroke-width: 1.2; transition: fill 0.25s ease, stroke 0.25s ease; }
#ff-journey-svg .bl-tick.done { fill: var(--green); stroke: var(--green); }
#ff-journey-svg .bl-pill { fill: var(--paper); stroke: var(--blue); }
#ff-journey-svg .bl-pill-t { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.1em; fill: var(--blue); }
#ff-journey-svg .bl-frame { fill: none; stroke: var(--gold-ink); stroke-dasharray: 4 3; stroke-width: 1.4; }
#ff-journey-svg .bl-frame-t { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; fill: var(--gold-ink); }
#ff-journey-svg .bl-qarc { fill: none; stroke: var(--gold-ink); stroke-dasharray: 3 4; stroke-width: 1.2; }
#ff-journey-svg .bl-tranche { fill: var(--paper-2); stroke: var(--gold); }
#ff-journey-svg .bl-house { color: var(--gold-ink); }
#ff-journey-svg .jt-l { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; fill: var(--ink-soft); }
#ff-journey-svg .jt-dot { fill: var(--gold); }
#ff-journey-svg .cf-token { cursor: grab; }
#ff-journey-svg .cf-token.dragging { cursor: grabbing; }

/* checklist + feed mocks */
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg-b { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 7px 12px; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.seg-b[aria-pressed="true"] { background: var(--navy); color: var(--ivory); border-color: var(--navy); }
.check-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.check-rows li { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line-soft); background: var(--paper); border-radius: 10px; padding: 9px 12px; transition: opacity 0.3s ease, transform 0.3s ease; }
.check-rows li.enter { opacity: 0; transform: translateY(6px); }
.check-rows li .ic { width: 18px; height: 18px; color: var(--ink-soft); }
.check-rows .cr-t { flex: 1; font-size: 14px; color: var(--ink); display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.check-rows .cr-t small { font-size: 12px; color: var(--muted); }
.check-rows .pill { font-size: 10px; }
.st-pending { color: var(--muted); border: 1px solid var(--line); }
.st-uploaded { color: var(--blue); border: 1px solid rgba(36,86,200,0.4); }
.st-verified { color: var(--green); border: 1px solid rgba(30,91,69,0.4); background: rgba(30,91,69,0.05); }
.feed-who { display: flex; gap: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.feed-who .who { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease; }
.feed-who .who .ic { width: 15px; height: 15px; }
.feed-who .who.lit { border-color: var(--gold); color: var(--gold-ink); background: rgba(195,146,46,0.06); }
.feed-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.feed-rows li { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line-soft); padding: 8px 2px; font-size: 13.5px; color: var(--ink); transition: opacity 0.4s ease; }
.feed-rows li.enter { opacity: 0; }
.feed-rows li.old { opacity: 0.45; }
.feed-rows .fr-to { display: inline-flex; gap: 5px; }
.feed-rows .fr-to i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.feed-rows li[data-to*="p"] .fr-to .p { background: var(--gold); }
.feed-rows li[data-to*="c"] .fr-to .c { background: var(--blue); }

/* network: audit log, stepper, shelf */
#ff-network-svg .nn { color: var(--ink); }
#ff-network-svg .hub-cf { color: var(--ink); }
#ff-network-svg .mover { color: var(--blue); }
#ff-network-svg .mover.env { color: var(--gold-ink); }
.log-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.log-rows li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline; font-size: 13.5px; color: var(--ink); padding: 8px 4px; border-bottom: 1px solid var(--line-soft); transition: opacity 0.35s ease; }
.log-rows li.enter { opacity: 0; }
.log-rows li.dim { opacity: 0.3; }
.log-rows .lr-a { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-ink); }
.log-rows .lr-w { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.stepper { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.stepper li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease; }
.stepper li .ic { width: 18px; height: 18px; color: var(--muted); }
.stepper li.done { color: var(--ink); }
.stepper li.done .ic { color: var(--green); }
.stepper li.cur { color: var(--ink); background: rgba(36,86,200,0.06); border-color: rgba(36,86,200,0.3); }
.stepper li.cur .ic { color: var(--blue); }
.stepper li.confirmed { background: rgba(30,91,69,0.06); border-color: rgba(30,91,69,0.35); color: var(--green); }
.stepper li.confirmed .ic { color: var(--green); }
.stepper-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.stepper-foot .save { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ink-soft); }
.stepper-foot .save .ic { width: 15px; height: 15px; color: var(--gold-ink); }
.shelf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.shelf li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink); border: 1px solid var(--line-soft); background: var(--paper); border-radius: 10px; padding: 10px 12px; transition: transform 0.2s ease, border-color 0.2s ease; }
.shelf li:hover { transform: translateY(-2px); border-color: var(--line); }
.shelf li .ic { width: 18px; height: 18px; color: var(--gold-ink); }

/* channel strip (connect) */
.channels .ch-line { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.channels .ch-in { fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-dasharray: 5 5; opacity: 0.7; }
.channels .ch-node circle { fill: var(--card); stroke: var(--ink-soft); stroke-width: 1.5; }
.channels .ch-node.wa circle { stroke: var(--green); }
.channels .ch-node { color: var(--ink); }
.channels .ch-l { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; fill: var(--ink-soft); }
.channels .ch-l.small { font-size: 9.5px; }
.channels .ch-stage { fill: var(--paper); stroke-width: 2; }
.channels .ch-frame { fill: none; stroke: var(--gold-ink); stroke-dasharray: 4 3; stroke-width: 1.2; }
.channels .ch-frame-t { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.14em; fill: var(--gold-ink); }
.channels .ch-house { color: var(--gold-ink); }
.channels .ch-house circle { fill: rgba(195,146,46,0.08); stroke: var(--gold); stroke-width: 2; }

/* agreement spokes */
.spokes .spk { fill: none; stroke: url(#ffSpokeGrad); stroke-width: 1.5; opacity: 0.85; }
.spokes .leaf { color: var(--ink); }
.spokes .leaf-l { font-family: var(--mono); font-size: 7.4px; letter-spacing: 0.08em; fill: var(--ink-soft); }
.spokes .seal-one { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .viz-tip, .pb, .invoice-chip, .cmp-path, .plate { transition: none; }
  .cmp-seal-one.pulse .cmp-halo { animation: none; }
}