/* /fair-charge/ only. Shared components live in /styles.css.
   Every number on the page comes from price book v0 (Bloomington–Normal, IL), the same figures as the home page. */

/* ---------- checker: one card, inputs left, result right ---------- */
.fcx-section{ padding-bottom:calc(var(--section) * .6); }
.page-head + .fcx-section{ margin-top:calc(clamp(56px, 2rem + 4vw, 112px) * -.45); }
.fcx{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); border-radius:var(--radius-lg); background:var(--card); box-shadow:inset 0 0 0 1px var(--line); }
.fcx-in{ display:grid; align-content:start; gap:22px; padding:36px; border-right:1px solid var(--line); }
.fcx-out{ padding:36px 40px; }
.fcx-top{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; margin-bottom:6px; }
.fcx-field{ display:grid; gap:10px; }
.fcx select, .fcx-money{
  width:100%; min-height:54px; border:0; border-radius:14px;
  background-color:var(--bg); box-shadow:inset 0 0 0 1px var(--line-2); color:var(--ink);
  font:500 1.0625rem/1.3 var(--font); letter-spacing:-.012em; transition:box-shadow .15s;
}
.fcx select{
  -webkit-appearance:none; appearance:none; padding:0 48px 0 18px; cursor:pointer;
  background-image:linear-gradient(45deg, transparent 50%, var(--ink-3) 50%), linear-gradient(-45deg, transparent 50%, var(--ink-3) 50%);
  background-position:calc(100% - 26px) 50%, calc(100% - 20px) 50%; background-size:6px 6px; background-repeat:no-repeat;
}
@media (hover: hover) and (pointer: fine){
  .fcx select:hover, .fcx-money:hover{ box-shadow:inset 0 0 0 1px var(--ink-4); }
}
.fcx select:focus-visible{ outline:none; box-shadow:inset 0 0 0 2px var(--amber); }
.fcx-money{ display:flex; align-items:center; gap:4px; padding:0 18px; font-family:var(--mono); font-variant-numeric:tabular-nums; }
.fcx-money > span{ color:var(--ink-3); }
.fcx-money:focus-within{ box-shadow:inset 0 0 0 2px var(--amber); }
.fcx-money input{ flex:1; min-width:0; height:52px; border:0; padding:0; background:transparent; color:var(--ink); font:inherit; letter-spacing:-.01em; }
.fcx-money input:focus{ outline:none; }
.fcx-in .note{ margin-top:6px; }

.fcx-figs{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px; margin-bottom:32px; }
.fcx-figs > div{ display:grid; gap:8px; }
.fcx-figs .big-num{ font-size:clamp(2.25rem, 1.4rem + 2.2vw, 3.75rem); white-space:nowrap; }
.fcx-charged{ color:var(--ink); transition:color .2s; }
.fcx-charged.above{ color:var(--new); }
.fcx-charged.below{ color:var(--prior); }
.fcx-charged.none{ color:var(--ink-4); }
.fcx-typical{ color:var(--sealed); }

/* Range bar. Defaults = the no-JS example on a $0–$600 scale ($75–$125, 10% line $137.50, charged $400);
   fair-charge.js updates the same custom properties. */
.fcx-range{ --from:12.5%; --to:20.83%; --cap:22.92%; --at:66.67%; }
.range .cap{ position:absolute; top:2px; bottom:2px; left:var(--cap); border-left:2px dotted var(--ink-3); margin-left:-1px; }
.range .pin{ z-index:1; }
.fcx-range.empty .pin{ opacity:0; }
.fcx-verdict{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin-top:28px; }
.fcx-kv{ margin-top:28px; }
@media (prefers-reduced-motion: no-preference){
  .fcx-range .band, .fcx-range .cap{ transition:left .25s var(--ease-out), width .25s var(--ease-out); }
  .fcx-range .pin{ transition:left .25s var(--ease-out), width .25s var(--ease-out), opacity .15s ease; }
  .fcx-verdict .tag{ transition:background-color .2s, color .2s, box-shadow .2s; }
}

/* Key swatches shared by the checker and the five-range plot. */
.keys{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 24px; }
.keys > span{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.keys .key{ display:inline-block; flex:none; }
.key.k-band{ width:16px; height:8px; border-radius:4px; background:var(--sealed); }
.key.k-cap{ width:0; height:14px; border-left:2px dotted var(--ink-3); }
.key.k-pin{ width:2px; height:14px; border-radius:1px; background:var(--new); }
.key.k-f{ width:16px; height:4px; border-radius:2px; background:var(--ink-4); }
.fcx-section .keys{ margin-top:18px; }

/* ---------- five ranges on one $0–$400 scale ---------- */
.fcr{ list-style:none; border-top:1px solid var(--line-2); }
.fcr > li, .fcr-foot{ display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr) minmax(0,150px); align-items:center; gap:12px 40px; }
.fcr > li{ padding:22px 0; border-bottom:1px solid var(--line); }
.fcr-name{ display:grid; gap:4px; }
.fcr-name b{ font-weight:600; letter-spacing:-.012em; }
.fcr-name .mono, .fcr-out .micro{ font-size:var(--t-micro); color:var(--ink-3); }
.fcr-out{ display:grid; gap:4px; justify-items:end; text-align:right; }
.fcr-out .measure{ font-size:1.0625rem; color:var(--ink); }
.fcr-plot{ position:relative; height:28px; }
.fcr-plot::before{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:var(--line); }
/* faint $100 gridlines, matching the axis */
.fcr-plot{ background:linear-gradient(90deg, transparent calc(25% - .5px), var(--line) calc(25% - .5px) calc(25% + .5px), transparent calc(25% + .5px), transparent calc(50% - .5px), var(--line) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px), transparent calc(75% - .5px), var(--line) calc(75% - .5px) calc(75% + .5px), transparent calc(75% + .5px)); }
.fcr-plot .f, .fcr-plot .r{ position:absolute; left:var(--f0); width:calc(var(--f1) - var(--f0)); min-width:4px; }
.fcr-plot .f{ top:5px; height:4px; border-radius:2px; background:var(--ink-4); }
.fcr-plot .r{ left:var(--r0); width:calc(var(--r1) - var(--r0)); top:15px; height:8px; border-radius:4px; background:var(--sealed); }
/* Formula low–high and published range, as % of $400. */
.r-door{ --f0:7.69%;  --f1:16.55%; --r0:18.75%; --r1:31.25%; }
.r-bump{ --f0:40.12%; --f1:74.89%; --r0:40%;    --r1:75%; }
.r-chip{ --f0:4.4%;   --f1:9.97%;  --r0:12.5%;  --r1:25%; }
.r-nail{ --f0:1.5%;   --f1:3.88%;  --r0:10%;    --r1:20%; }
.r-dry { --f0:9.76%;  --f1:20.22%; --r0:18.75%; --r1:31.25%; }
.fcr-foot{ margin-top:12px; }
.fcr-axis{ grid-column:2; display:flex; justify-content:space-between; font:500 11px/1 var(--mono); color:var(--ink-4); font-variant-numeric:tabular-nums; }
.fcr-axis span{ width:0; display:flex; justify-content:center; white-space:nowrap; }
.fcr-axis span:first-child{ justify-content:flex-start; }
.fcr-axis span:last-child{ justify-content:flex-end; }
.fcr-foot .keys{ grid-column:1 / -1; margin-top:28px; }

/* ---------- formula and worked example ---------- */
.fc-formula{ max-width:none; margin:0 0 clamp(56px, 3rem + 2vw, 88px); padding:28px 0; border-block:1px solid var(--line-2); }
.fc-formula code{ display:block; font:500 clamp(.9375rem, .86rem + .4vw, 1.25rem)/1.65 var(--mono); letter-spacing:-.02em; color:var(--ink); }
.fc-formula code > span{ display:block; padding-left:2ch; text-indent:-2ch; }
.fc-formula code > .i1{ padding-left:4ch; }
.fc-formula code > .i2{ padding-left:6ch; }
.fc-two{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:56px clamp(40px, 6vw, 112px); align-items:start; }
.fc-sub{ margin:10px 0 24px; }
.fc-two > div > .h3 + .kv, .fc-two > div > .h3 + .data, .fc-two > div > .h3 + .fc-verdicts{ margin-top:24px; }
.fc-calc dd{ white-space:nowrap; overflow-wrap:normal; }
.fc-calc .total{ border-bottom-color:var(--line-2); }
.fc-calc .total dt{ color:var(--ink); font-weight:600; }
.fc-calc .total dd{ font-size:1.125rem; color:var(--sealed); }
.fc-verdicts{ list-style:none; border-top:1px solid var(--line); }
.fc-verdicts li{ display:grid; grid-template-columns:minmax(0,190px) minmax(0,1fr); align-items:center; gap:10px 20px; padding:16px 0; border-bottom:1px solid var(--line); font-size:var(--t-small); }
.fc-verdicts .tag{ justify-self:start; }
.fc-ex{ margin-top:20px; }

/* ---------- price book table ---------- */
.fc-book td.num{ color:var(--ink-3); }
.fc-book td.win, .fc-book td.rng{ color:var(--ink); }
.fc-book td.rng{ color:var(--sealed); }
.fc-book .sub{ white-space:nowrap; }
.fc-book td:first-child .sub{ white-space:normal; }
.fc-after{ margin-top:28px; }

/* ---------- sources ---------- */
.fc-wages{ margin-top:24px; }
.fc-wages td:nth-child(2){ color:var(--ink-3); }
.fc-cite{ list-style:none; margin-top:32px; display:grid; gap:22px; }
.fc-cite b{ display:block; font-weight:600; letter-spacing:-.012em; }
.fc-cite p{ margin-top:6px; }
.fc-est-p{ margin-top:20px; max-width:52ch; }
.fc-isnt{ margin-top:48px; padding-top:24px; border-top:1px solid var(--line-2); }
.fc-isnt p{ margin-top:8px; max-width:52ch; }

/* ---------- responsive ---------- */
@media (max-width: 1020px){
  /* the price book reads as one block per repair: name, then the steps two to a row */
  .fc-book thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .fc-book, .fc-book tbody{ display:block; }
  .fc-book tbody{ border-top:1px solid var(--line-2); }
  .fc-book tr{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:16px 20px; padding:22px 0 24px; border-bottom:1px solid var(--line); }
  table.data.fc-book td{ display:block; padding:0; border:0; text-align:left; }
  .fc-book td.num{ text-align:left; font-size:var(--t-small); }
  .fc-book td::before{ content:attr(data-label); display:block; margin-bottom:4px; color:var(--ink-3); font:400 var(--t-micro)/1.3 var(--font); white-space:normal; }
  .fc-book td:first-child{ grid-column:1 / -1; font-weight:600; font-size:1.0625rem; }
  .fc-book td:first-child::before{ content:none; }
  .fc-book td:first-child .sub{ font-weight:400; }
  .fc-book td.num .sub{ margin-top:2px; }
}
@media (max-width: 860px){
  .fcx{ grid-template-columns:minmax(0,1fr); }
  .fcx-in{ border-right:0; border-bottom:1px solid var(--line); }
  .fc-two{ grid-template-columns:minmax(0,1fr); }
  .fcr > li{ grid-template-columns:minmax(0,1fr) auto; gap:10px 24px; padding:20px 0 16px; }
  .fcr-plot{ grid-column:1 / -1; grid-row:2; }
  .fcr-foot{ grid-template-columns:minmax(0,1fr); }
  .fcr-axis{ grid-column:1; }
}
@media (max-width: 560px){
  .fcx-in, .fcx-out{ padding:24px 20px; }
  .fcx-figs{ gap:16px; }
  .fcx-figs .big-num{ font-size:clamp(2rem, 1rem + 5vw, 2.5rem); }
  .fc-verdicts li{ grid-template-columns:minmax(0,1fr); }
  .fc-calc > div{ gap:16px; }
  .fc-book tr{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* ---------- closing ---------- */
.fc-close .h2{ max-width:20ch; }
.fc-close .lede{ margin-top:24px; max-width:56ch; }
.fc-close .actions{ margin-top:36px; }