/* ===================================================================
   /costs/, COMPACT (JJ, 21 Oct 2026: "een drie km lange scroll").

   It was 6.8 screens on a desktop and 10 on a phone. The calculator is
   now two columns on a desktop, with what you would pay staying in view
   while you move the controls. On a phone the controls are tight, the
   outcome rides along at the bottom of the screen, and everything that
   explains rather than answers folds away. Same pattern as /smartplay/:
   a row you swipe, a chapter index under the bar, folds.
   Research: Brein 40_Sources/research/viewcast-mobiel-swipe-2026-10/.

   Nothing here touches a figure: costs.js still writes every output by
   its id, and the page only moved blocks and changed their dress.
   =================================================================== */

/* --- the panel ------------------------------------------------------ */
/* The panel used to carry .strip. The audience strip's compact rules now
   target .strip, so the calculator lost half its readouts; it leaves that
   class behind and states its own layout here. */
.cc-panel .strip-in{
  display:grid;grid-template-columns:minmax(0,1fr);
  padding:clamp(18px,2vw,28px);
  gap:clamp(22px,2.4vw,34px);
}
.cc-panel .strip-cell{display:block;min-width:0}
.cc-picks{margin:clamp(20px,2.2vw,28px) 0 0}

@media (min-width:1000px){
  .cc-panel .strip-in{
    grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
    align-items:start;column-gap:clamp(30px,3.4vw,56px);
  }
  .cc-inputs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cc-picks{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
  /* what you would pay stays beside the controls while you move them */
  .cc-out{position:sticky;top:calc(var(--nav-h) + 20px)}
  .cc-out > .ro-row.cc-results{margin-top:0}
}

/* --- folds: the explanation steps back ------------------------------ */
.cc-fold-btn{
  all:unset;box-sizing:border-box;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;min-height:48px;cursor:pointer;
  font:inherit;color:inherit;
}
.cc-fold-btn svg{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.75;transition:transform .3s cubic-bezier(.215,.61,.355,1)}
.cc-fold-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.cc-fold-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
[data-cc-folded="true"] > :not(.cc-fold-head){display:none}

.cc-more{margin-top:clamp(20px,2.2vw,30px);border-top:1px solid var(--rule)}
.cc-more > .cc-fold-head{
  margin:0;font-family:var(--display);font-weight:600;font-size:1rem;color:var(--ink);
}
.cc-more[data-cc-folded="false"] > .cc-fold-head{margin-bottom:6px}
.cc-more > .cc-aside{margin-top:6px}

/* the questions: one line each until opened, at every width */
.js-ccfold .cc-faq > div{border-top:1px solid var(--rule)}
.js-ccfold .cc-faq{gap:0}
.js-ccfold .cc-faq .faq-a{margin:0 0 16px}
.js-ccfold .cc-faq .cc-fold-btn{padding-block:10px}

/* the notes beside a sheet: a fold of their own on a phone */
.js-ccfold .cc-notes > .cc-fold-head{margin:0;border-top:1px solid var(--rule)}

/* the five-contracts list reads as feature cards: two columns on a
   desktop, a row you swipe on a phone (the .sp-feats rules) */
.cc-chainlist{margin-top:14px}
@media (min-width:1000px){.cc-chainlist{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* --- the outcome rides along on a phone ----------------------------- */
.cc-bar{display:none}

@media (max-width:999px){
  /* tight controls: label and figure on one line, the rail under it */
  .cc-inputs{row-gap:6px}
  .cc-input{display:flex;flex-direction:column;gap:0}
  .cc-input .range-ends{display:none}
  .cc-panel .slider-top output{font-size:1.25rem}
  .cc-picks{gap:14px}
  .cc-rate .foot{font-size:.8125rem}

  .cc-bar{
    display:flex;position:fixed;z-index:30;left:0;right:0;bottom:0;
    align-items:baseline;justify-content:space-between;gap:12px;
    padding:10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
    background-color:#171A18;color:#F2F3F0;
    font-family:var(--display);
    transform:translateY(110%);
    transition:transform .35s cubic-bezier(.215,.61,.355,1);
  }
  .cc-bar.is-on{transform:none}
  .cc-bar > div{display:flex;flex-direction:column;min-width:0}
  .cc-bar .k{font-size:.75rem;line-height:1.3;color:#C9CEC7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cc-bar .v{font-size:1.25rem;line-height:1.15;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
  .cc-bar > div + div{text-align:right;align-items:flex-end}
  .cc-bar > div + div .v{font-size:1rem;font-weight:600;color:#DFE2DC}
}

/* --- the chapter index, phone only (the /smartplay/ bar) ------------- */
.cc-chapters{display:none}
@media (max-width:760px){
  .cc-chapters{
    display:block;position:sticky;top:var(--nav-h);z-index:40;
    background-color:var(--paper);border-bottom:1px solid var(--rule);
  }
  .cc-chapters ul{
    list-style:none;margin:0;padding:0 var(--gutter);
    display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;
  }
  .cc-chapters ul::-webkit-scrollbar{display:none}
  .cc-chapters li{flex:0 0 auto}
  .cc-chapters a{
    display:flex;align-items:center;min-height:44px;padding:0 12px;
    font-family:var(--display);font-weight:500;font-size:.9375rem;
    color:var(--ink-2);text-decoration:none;white-space:nowrap;
    border-bottom:2px solid transparent;margin-bottom:-1px;
  }
  .cc-chapters a[aria-current="true"]{color:var(--ink);border-bottom-color:var(--green)}
  .cc-chapters a:focus-visible{outline:2px solid var(--focus);outline-offset:-4px}
  .page-sub .sheet{scroll-margin-top:calc(var(--nav-h) + 46px + 12px)}
  .page-sub .sheet{padding-block:36px}
}

@media (prefers-reduced-motion:reduce){
  .cc-bar,.cc-fold-btn svg{transition:none}
}

/* ink-3 reads 4.2:1 on the panel's paper-2; the small print inside it
   steps up one ink */
.cc-panel .cc-cav,.cc-panel .cc-split,.cc-panel .foot,.cc-panel .cc-ceiling-cap,
.cc-panel .range-ends,.cc-panel .cc-money-sign{color:var(--ink-2)}

/* on the iPhone the labels sat right-aligned against their figures, and the
   title touched the panel (checked in Safari, 21 Oct) */
#calc-title{margin-bottom:clamp(16px,2vw,24px)}
.cc-panel .slider-top label{flex:1 1 auto;text-align:left;min-width:0}
.cc-panel .slider-top output{min-width:0}
.cc-panel .cc-input > .slider-top{align-self:stretch;width:100%}

/* --- the comparison: one list of bars, largest first ----------------- */
/* One input leads. The peak slider is the question; the rate box is the
   optional second; everything else sits in the Fine-tune fold. */
.cc-inputs.cc-inputs-main{grid-template-columns:minmax(0,1fr)}
.cc-panel .cc-inputs-main .slider-top output{font-size:2.25rem;line-height:1.1}
.cc-in .cc-rate{margin-top:clamp(18px,2vw,26px);max-width:34rem}
.cc-fine .cc-fine-body{margin-top:16px}
.cc-fine .cc-picks{grid-template-columns:minmax(0,1fr);margin:clamp(18px,2vw,26px) 0}
.cc-fine .ro-row.cc-results{grid-template-columns:minmax(0,1fr)}

.cc-cmp-cap{margin:0 0 .9em;color:var(--ink);font-size:1.0625rem}
.cc-cmp-list{list-style:none;margin:0;padding:0;display:grid;gap:clamp(14px,1.6vw,20px)}
.cc-cmp-row{display:grid;gap:6px;min-width:0}
.cc-cmp-row[hidden]{display:none}
.cc-cmp-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.cc-cmp-lab{font-family:var(--display);font-weight:600;font-size:1rem;line-height:1.3;color:var(--ink)}
.cc-cmp-val,.cc-cmp-row .cc-cmp-val.fig{font-family:var(--display);font-weight:700;font-size:1.25rem;line-height:1.15;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.cc-cmp-track{display:block;height:14px;background-color:var(--paper-3)}
.cc-cmp-fill{display:block;height:100%;width:0;background-color:var(--ink-3)}
.cc-cmp-row.is-vc .cc-cmp-fill{background-color:var(--green)}
.cc-cmp-row.is-vc .cc-cmp-track{height:18px}
.cc-cmp-row.is-vc .cc-cmp-val{font-size:1.75rem}
.cc-cmp-sub{margin:0;font-family:var(--display);font-size:.875rem;line-height:1.4;color:var(--ink-2)}
.cc-cmp-row.is-vc .cc-cmp-sub{font-size:.8125rem}
.cc-save{margin:clamp(16px,1.8vw,22px) 0 0;font-family:var(--display);font-weight:600;font-size:1.125rem;line-height:1.35;color:var(--ink);max-width:48ch}
.cc-save[hidden]{display:none}
.cc-save + .cc-save{margin-top:6px}
.cc-caveat{margin:clamp(12px,1.4vw,16px) 0 0;max-width:56ch}
.cc-panel .cc-cmp .cc-note{max-width:64ch}
@media (prefers-reduced-motion:no-preference){
  .cc-cmp-fill{transition:width .35s cubic-bezier(.215,.61,.355,1)}
}
@media (max-width:620px){
  .cc-cmp-row.is-vc .cc-cmp-val{font-size:1.5rem}
  .cc-panel .cc-inputs-main .slider-top output{font-size:1.75rem}
}
.cc-save.cc-save-floor{font-weight:500;font-size:1rem;color:var(--ink-2)}
.cc-scope{margin:clamp(12px,1.4vw,16px) 0 0;max-width:56ch;font-style:normal}

.cc-fine .cc-pick{max-width:34rem}
.cc-cmp-sub[hidden]{display:none}
.cc-cmp-row.is-vc .cc-cmp-sub .textlink{white-space:nowrap}
.cc-partial-line{margin:12px 0 0;max-width:56ch;font-style:normal;color:var(--ink-2)}
.cc-partial-line[hidden]{display:none}