/* =====================================================================
   THE DSX CALCULATOR - css/dsx.css - 2026-09-13 (the 9 AM pass).

   ONLY WHAT css/calculators.css LACKS. dsx.html is built on the calculator
   shell Bryan likes (calculators.html): the header, hero, coin, inputs
   panel, result cards, plain read, guide grid, next step and footer all
   come from calculators.css untouched. This sheet adds the four things
   that page never needed: the coverage gauge, the stress chips, the
   stacked carrying-cost bar and the doors (app buttons come from
   css/royal.css's own .appbtn, restated here only for the seat).

   Loaded after calculators.css and before royal-labels.css. Colours are
   the filed ones only: navy #253069, gold #CBA260, gold-deep #7D6238,
   ink #20264a. No new colour is invented; the carrying-cost bar is drawn
   in navy, gold and gold-deep with a navy tint for "other".
   ===================================================================== */

/* THE HERO COIN carries the gold X (assets/coin_goldX.png, the filed DSX
   mark) - the same face index.html's DSX bubble wears. Never re-cut; the
   coin is the same coin calculators.html uses, only the face changes. */
.calculator-coin.dsx-coin img{width:60%}

/* THE EYEBROW, RESTATED. css/royal.css's .step is the keyhole step CARD on
   home.html (white box, 1.5px border, 18px radius); css/calculators.css's
   .step is the small gold eyebrow. Both sheets load here, as they do on
   calculators.html, and the card wins on order, boxing every eyebrow in
   white and hiding the plain read's title. Restated as the eyebrow on this
   page only; calculators.html is not touched tonight and is reported. */
.calculator-shell .step,.plain-read .step,.stress-head .step,.door-card .step{background:none;border:0;border-radius:0;padding:0;display:block;gap:0;box-shadow:none}

/* Same cause, same seat: royal.css paints every h3 navy, so the plain read's
   title was navy on navy. White, as calculators.css intends. */
.plain-read h3{color:#fff}

/* A second field grid inside the same inputs panel needs its own heading. */
.field-group-title{margin:24px 0 0;color:var(--calc-navy);font-size:13px;font-weight:900;letter-spacing:.04em}
.field-group-title+.field-grid{margin-top:12px}
.field-note{display:block;margin-top:6px;color:var(--calc-gold-dark);font-size:11px;font-weight:800}

/* THE ALLOWANCES - vacancy and management, two small sliders that borrow the
   rate control's own look so the panel reads as one instrument. */
.allowance-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.allowance{background:#fff;border:1px solid var(--calc-line);border-radius:15px;padding:14px 15px}
.allowance .rate-heading label{display:block;color:var(--calc-muted);font-size:10px;font-weight:900;letter-spacing:.07em;text-transform:uppercase}
.allowance .percent-input{flex:none;width:78px;padding:6px 8px;box-sizing:border-box}
.allowance .rate-heading label{min-width:0}
.allowance .percent-input input{font-size:15px}
.allowance input[type="range"]{width:100%;height:22px;margin:12px 0 0;accent-color:var(--calc-navy);cursor:pointer}
.allowance p{margin:8px 0 0;color:var(--calc-muted);font-size:10px;line-height:1.5}
#rate-slider{max-width:100%}

/* =====================================================================
   THE GAUGE. A half circle: gold arc sweeps to the coverage value, a navy
   marker rides its tip, navy ticks stand at 0.75, 1.00 and 1.25, which
   are the edges of the four bands. The number sits inside the arc.
   ===================================================================== */
.coverage-stage{padding:6px 0 4px;text-align:center}
.gauge-wrap{position:relative;width:min(100%,340px);margin:0 auto}
.gauge{display:block;width:100%;height:auto;overflow:visible}
.gauge-track{fill:none;stroke:#efede7;stroke-width:16;stroke-linecap:round}
.gauge-fill{fill:none;stroke:url(#gauge-gold);stroke-width:16;stroke-linecap:butt}
.gauge-marker{fill:var(--calc-navy);stroke:#fff;stroke-width:3;transition:opacity .2s}
.gauge-tick{stroke:var(--calc-navy);stroke-width:2.5;stroke-linecap:round}
.gauge-tick-label{fill:var(--calc-navy);font-size:11px;font-weight:800;font-family:Montserrat,Arial,sans-serif;letter-spacing:.02em}
.gauge-end{fill:var(--calc-muted);font-size:10px;font-weight:700;font-family:Montserrat,Arial,sans-serif}
.gauge-readout{position:absolute;left:0;right:0;bottom:2px;display:flex;flex-direction:column;align-items:center;pointer-events:none}
.gauge-readout strong{color:var(--calc-navy);font-size:clamp(44px,12vw,60px);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.gauge-readout span{margin-top:4px;color:var(--calc-gold-dark);font-size:10px;font-weight:900;letter-spacing:.16em;text-transform:uppercase}
.coverage-band{margin:14px 0 0;color:var(--calc-navy);font-size:clamp(19px,2.6vw,24px);font-weight:800;line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
.coverage-line{max-width:520px;margin:8px auto 0;color:var(--calc-muted);font-size:13px;line-height:1.6}
.coverage-stage[data-band="short"] .coverage-band,
.coverage-stage[data-band="well-short"] .coverage-band{color:var(--calc-gold-dark)}
.coverage-stage[data-band="empty"] .gauge-readout strong{color:var(--calc-muted)}

/* =====================================================================
   STRESS IT. Toggle chips: white asleep, navy awake (the family's own
   gold-to-navy press, in type). Each one moves a single number and the
   whole read recomputes. The compare cells reuse .equity-readout.
   ===================================================================== */
.stress{margin-top:22px;border:1px solid var(--calc-line);border-radius:18px;padding:18px}
.stress-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.stress-head .step{margin:0}
.stress-head p{margin:0}
.clear-stress{border:0;background:transparent;color:var(--calc-gold-dark);font-size:11px;font-weight:800;text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:4px 0}
.clear-stress:hover{color:var(--calc-navy)}
.stress-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{min-height:38px;border:1px solid var(--calc-line);border-radius:999px;background:#fff;color:var(--calc-navy);font-size:12px;font-weight:800;padding:8px 14px;cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .15s}
.chip:hover{border-color:var(--calc-gold)}
.chip[aria-pressed="true"]{background:var(--calc-navy);border-color:var(--calc-navy);color:#fff;box-shadow:0 7px 18px rgba(37,48,105,.24)}
.chip:focus-visible,.clear-stress:focus-visible{outline:3px solid var(--calc-gold);outline-offset:2px}
.stress .equity-readout{margin-top:14px}
.stress .equity-readout strong{font-size:24px;font-variant-numeric:tabular-nums}
.stress .equity-readout small{display:block;margin-top:4px;color:var(--calc-muted);font-size:9px;font-weight:700}
.stress .equity-readout .muted strong{color:var(--calc-muted)}

/* The result cards start below the stress block. */
.stress+.result-cards{margin-top:14px}

/* =====================================================================
   THE STACKED BAR. Principal and interest, taxes, insurance, other - one
   bar, four widths that move with the numbers. Navy is the loan, gold is
   the tax, gold-deep the insurance, a navy tint the rest.
   ===================================================================== */
.stack-bar{display:flex;height:9px;margin:15px 0;background:#efede7;border-radius:99px;overflow:hidden}
.stack-bar i{display:block;height:100%;width:0;transition:width .45s ease}
.stack-bar .pi,.swatch.pi{background:linear-gradient(90deg,var(--calc-navy-deep),var(--calc-navy))}
.stack-bar .tax,.swatch.tax{background:linear-gradient(90deg,var(--calc-gold-dark),var(--calc-gold))}
.stack-bar .ins,.swatch.ins{background:#7d6238}
.stack-bar .oth,.swatch.oth{background:#8b94c2}
.swatch{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.result-card.negative .payment strong{color:#793b2a}
.result-card .payment strong{font-variant-numeric:tabular-nums}
.result-card.wide .payment strong{font-size:clamp(26px,3.6vw,36px)}

/* =====================================================================
   WHAT ROYAL DSX READS - the explainer under the guide grid.
   ===================================================================== */
.dsx-explainer{margin-top:18px;background:var(--calc-soft);border:1px solid var(--calc-line);border-radius:20px;padding:24px 26px}
.dsx-explainer p{margin:0;color:var(--calc-ink);font-size:14px;line-height:1.7}
.dsx-explainer p+p{margin-top:12px}
.dsx-explainer b{color:var(--calc-navy)}
.dsx-explainer em{font-style:normal;color:var(--calc-gold-dark);font-weight:800}

/* =====================================================================
   THE DOORS. The app first, the secure portal second, the library third.
   .appbtn and .standrow come from css/royal.css (linked on this page as on
   calculators.html); only the seat is stated here.
   ===================================================================== */
.dsx-doors{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:32px;text-align:left}
.door-card{display:flex;flex-direction:column;border:1px solid var(--calc-line);border-radius:20px;padding:24px}
.door-card.first{background:linear-gradient(150deg,var(--calc-navy),var(--calc-navy-deep));border-color:var(--calc-navy);color:#fff}
.door-card .step{margin-bottom:8px}
.door-card.first .step{color:var(--calc-gold)}
.door-card h3{margin:0;color:var(--calc-navy);font-size:20px;line-height:1.25;letter-spacing:-.02em}
.door-card.first h3{color:#fff}
.door-card.first h3 .rai{color:#fff}
.door-card.first h3 .rai em{color:var(--calc-gold)}
.door-card p{margin:10px 0 0;color:var(--calc-muted);font-size:13px;line-height:1.65}
.door-card.first p{color:#d9dcee}
.door-card .standrow{justify-content:flex-start;margin-top:18px;gap:10px}
.door-card .appbtn{background:#fff;color:var(--calc-navy);box-shadow:0 10px 26px rgba(0,0,0,.22);padding:11px 18px 11px 16px}
.door-card .appbtn svg{fill:var(--calc-navy)}
.door-card .appbtn .t b{font-size:15.5px}
.door-card .appbtn .t small{font-size:10px}
.secure-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;margin-top:18px;border-radius:999px;background:var(--calc-navy);color:#fff;font-size:13px;font-weight:800;letter-spacing:.04em;text-decoration:none;padding:0 24px;box-shadow:0 10px 26px rgba(37,48,105,.22);transition:transform .15s,box-shadow .15s}
.secure-button:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(37,48,105,.3)}
.secure-button:focus-visible,.door-card .appbtn:focus-visible{outline:3px solid var(--calc-gold);outline-offset:3px}
.door-links{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.door-links a{display:inline-block;color:var(--calc-navy);font-size:13px;font-weight:800;text-decoration:none;border-bottom:2px solid var(--calc-gold);padding:4px 0}
.door-links a:hover{color:var(--calc-gold-dark)}
.door-links a:focus-visible{outline:3px solid var(--calc-gold);outline-offset:3px;border-radius:4px}
.next-step .wayhome.triangle{margin-top:44px}

@media(max-width:920px){
  .dsx-doors{grid-template-columns:1fr}
}
@media(max-width:480px){
  .allowance-grid{grid-template-columns:1fr}
  .stress{padding:16px 14px}
  .stress-head{flex-direction:column;gap:4px}
  .chip{font-size:11px;padding:8px 12px}
  .stress .equity-readout{grid-template-columns:1fr 1fr}
  .stress .equity-readout strong{font-size:20px}
  .gauge-readout strong{font-size:44px}
  .door-card{padding:20px 18px}
  .door-card .standrow{flex-direction:column;align-items:stretch}
  .door-card .appbtn{justify-content:center}
}
@media(prefers-reduced-motion:reduce){
  .stack-bar i,.chip,.secure-button,.gauge-marker{transition:none}
}
@media print{.stress,.dsx-doors{display:none}}