/* Fee Snapshot — interactive comparison.
   Brand palette only: steel-blue accent (+ a restrained amber second hue for
   flat/instant-buy rows). Reads from the global theme variables in v13.css. */

.fs-section{background:var(--bg-2,var(--bg));border:1px solid var(--line);border-radius:6px;padding:clamp(1.4rem,3vw,2.4rem);margin-bottom:clamp(2.4rem,4vh,3.4rem)}
.fs-section h2{margin-bottom:.4rem}
.fs-intro{color:var(--ink-dim);margin-bottom:.4rem}

.fs-controls{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;align-items:center;margin:1.25rem 0 1.1rem}
.fs-controls label{font-family:var(--mono);font-size:.62rem;letter-spacing:.25em;color:var(--ink-dim)}
.fs-controls select{background:var(--bg);color:var(--ink);border:1px solid var(--line-strong);border-radius:4px;padding:.45rem .7rem;font:inherit;font-size:.85rem;min-height:44px}
.fs-controls select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fs-chips{display:flex;gap:.5rem}
@media(max-width:360px){.fs-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px}.fs-chip{flex:0 0 auto}}
.fs-chip{background:none;border:1px solid var(--line);color:var(--ink-dim);border-radius:999px;padding:.32rem .9rem;font:inherit;font-size:.72rem;cursor:pointer;transition:border-color .15s,color .15s;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.fs-chip:hover{color:var(--ink)}
.fs-chip[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);background:rgba(91,155,213,.08)}
html[data-theme="light"] .fs-chip[aria-pressed="true"]{background:rgba(28,78,128,.08)}
.fs-chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fs-count{font-family:var(--mono);font-size:.62rem;letter-spacing:.25em;color:var(--accent);margin-left:auto}

/* scale header: 0 — 0.6% — 1.2% ticks aligned with the bar column */
.fs-scale{display:grid;grid-template-columns:10.5rem 1fr;gap:.9rem;margin-bottom:.55rem;font-family:var(--mono);font-size:.6rem;letter-spacing:.15em;color:var(--ink-dim)}
.fs-scale .ticks{position:relative;height:1em;margin-right:4.9rem}
.fs-scale .ticks span{position:absolute;transform:translateX(-50%)}
.fs-scale .ticks span:first-child{transform:none}

.fs-list{list-style:none;margin:0;padding:0}
.fs-row{display:grid;grid-template-columns:10.5rem 1fr;gap:.3rem .9rem;padding:.6rem 0;border-bottom:1px solid var(--line);transition:background .15s}
.fs-row:hover{background:rgba(91,155,213,.05)}
html[data-theme="light"] .fs-row:hover{background:rgba(28,78,128,.045)}
.fs-row:last-child{border-bottom:none}
.fs-name{font-size:.95rem;color:var(--ink);align-self:center}
.fs-cc{font-family:var(--mono);font-size:.6rem;letter-spacing:.15em;color:var(--ink-dim);border:1px solid var(--line);border-radius:3px;padding:.05rem .3rem;vertical-align:1px}

.fs-barwrap{position:relative;display:flex;min-height:1.5rem;margin-right:4.9rem}
.fs-track{position:absolute;inset:0;border:1px solid var(--line);background:var(--bg);opacity:1;border-radius:3px}
/* quarter guides so the full line reads as a scale */
/* Fill is painted by gradient stops (--w), never by percentage width:
   % sizing was resolving to 0 in some production contexts; paint stops don't. */
.fs-bar{position:absolute;inset:0;border-radius:2px;
  background:linear-gradient(90deg,var(--fs-c1,#4e9ade),var(--fs-c2,#7fc3f4) var(--w,0%),transparent var(--w,0%))}
html[data-theme="light"] .fs-bar{--fs-c1:#1c4e80;--fs-c2:#4c8cc9}
.fs-row[data-model="flat"] .fs-bar{--fs-c1:#c99036;--fs-c2:#f0c26e}
html[data-theme="light"] .fs-row[data-model="flat"] .fs-bar{--fs-c1:#9a6f24;--fs-c2:#c9a04a}
.fs-maker{position:absolute;top:-6px;bottom:-6px;width:2px;background:var(--ink);opacity:.85;border-radius:1px}
.fs-maker::after{content:"\25B8";position:absolute;top:-1.15em;left:-.35em;font-size:.55em;color:var(--ink);opacity:.9}
/* value sits in its own lane right of the full-width bar line */
.fs-val{position:absolute;left:100%;top:50%;transform:translateY(-50%);width:4.4rem;text-align:right;font-family:var(--mono);font-size:.85rem;font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap}
.fs-val:hover{color:var(--accent);text-decoration:underline}
.fs-val:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.fs-meta{grid-column:2;font-size:.74rem;color:var(--ink-dim)}
.fs-meta em{font-style:italic;color:var(--accent)}
.fs-legend{display:flex;gap:1.4rem;flex-wrap:wrap;margin-top:.9rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;color:var(--ink-dim)}
.fs-legend .sw{display:inline-block;width:1.6em;height:.7em;border-radius:2px;vertical-align:-1px;margin-right:.45em}
.fs-legend .sw-ob{background:linear-gradient(90deg,#4e9ade,#7fc3f4)}
.fs-legend .sw-flat{background:linear-gradient(90deg,#c99036,#f0c26e)}
.fs-legend .sw-mk{background:var(--ink);width:.15em;height:.75em}
@media (max-width:720px){
  .fs-row,.fs-scale{grid-template-columns:1fr}
  .fs-row{padding:.7rem 0}
  .fs-name{display:block;margin-bottom:.35rem}
  .fs-meta{grid-column:1;margin-top:.15rem}
  .fs-count{margin-left:0;width:100%}
  .fs-barwrap,.fs-scale .ticks{margin-right:3.7rem}
  .fs-val{width:3.2rem;font-size:.74rem}
}