/* Interactive parts of the guide pages (calculators, picker, process diagrams, contents, progress bar). */

/* calculators + picker */
.gcalc,.gpick{margin:18px 0 8px;padding:20px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,rgba(91,147,255,.07),rgba(255,255,255,.02))}
.gc-title{margin:0 0 14px;font-family:"Archivo",var(--sans);font-weight:600;font-size:1.08rem;color:var(--fg)}
.gc-fields{display:grid;gap:16px}
.gc-f{display:grid;gap:8px}
.gc-l{display:flex;justify-content:space-between;gap:12px;font-size:.92rem;color:var(--muted)}
.gc-v{font:500 .95rem var(--mono);color:var(--fg);white-space:nowrap}
.gc-f input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:36px;background:transparent;cursor:pointer;margin:0}
.gc-f input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:99px;background:linear-gradient(90deg,var(--accent) var(--p,50%),rgba(255,255,255,.12) var(--p,50%))}
.gc-f input[type=range]::-moz-range-track{height:6px;border-radius:99px;background:rgba(255,255,255,.12)}
.gc-f input[type=range]::-moz-range-progress{height:6px;border-radius:99px;background:var(--accent)}
.gc-f input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;border-radius:50%;background:#fff;border:3px solid var(--accent);box-shadow:0 2px 8px rgba(0,0,0,.4)}
.gc-f input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--accent)}
.gc-f input[type=range]:focus-visible{outline:2px solid var(--accent-2,#a9c6ff);outline-offset:4px;border-radius:8px}
.gc-out{margin-top:18px;padding:16px 18px;border-radius:14px;background:rgba(0,0,0,.25);border:1px solid var(--line)}
.gc-out small{display:block;font:500 .68rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.gc-big{display:inline-block;margin-top:4px;font-family:"Archivo",var(--sans);font-weight:700;font-size:clamp(1.9rem,6vw,2.6rem);letter-spacing:-.03em;color:#ff8f8f;font-variant-numeric:tabular-nums}
.gc-unit{margin-left:8px;color:var(--muted)}
.gc-line{margin:6px 0 0;color:#d5dceb;font-size:.95rem}
.gc-cta{margin-top:16px}
.gc-note{margin:10px 0 0;font-size:.8rem;color:var(--dim)}
.gc-chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:16px}
.gc-cl{font-size:.9rem;color:var(--muted);margin-right:4px}
.gc-chip{font:500 .88rem var(--sans);min-height:40px;padding:8px 14px;border-radius:999px;border:1px solid var(--line-2,rgba(255,255,255,.18));background:rgba(255,255,255,.04);color:var(--fg);cursor:pointer}
.gc-chip:hover{border-color:var(--accent)}
.gc-chip[aria-pressed="true"]{background:var(--accent-fill,#2f6fe8);border-color:var(--accent-fill,#2f6fe8);color:#fff}
.gp-list{list-style:none;counter-reset:q;padding:0;margin:0;display:grid;gap:10px}
.gp-q{counter-increment:q;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02)}
.gp-text::before{content:counter(q) ". ";color:var(--dim)}
.gp-text{flex:1 1 260px;font-size:.95rem}
.gp-btns{display:flex;gap:8px}
.gp-big{display:block;margin-top:4px;font-family:"Archivo",var(--sans);font-weight:700;font-size:1.4rem;color:var(--fg)}
.gp-out[data-result="shelf"] .gp-big{color:#a9c6ff}.gp-out[data-result="middle"] .gp-big{color:#ffd28a}.gp-out[data-result="custom"] .gp-big{color:#7fe0a8}

/* "where the money slips out" process diagrams */
.gflow{display:flex;gap:0;margin:16px 0 18px;padding:18px 14px 14px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.02);counter-reset:fs}
.gf-step{flex:1 1 0;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:0 6px;counter-increment:fs}
.gf-step::before{content:counter(fs);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(91,147,255,.15);border:1px solid rgba(91,147,255,.5);color:#cfe0ff;font:600 .85rem var(--mono)}
.gf-step:not(:last-child)::after{content:"";position:absolute;top:15px;left:calc(50% + 20px);right:calc(-50% + 20px);height:2px;background:linear-gradient(90deg,rgba(91,147,255,.6),rgba(91,147,255,.15))}
.gf-step b{font-size:.88rem;font-weight:600;color:var(--fg);line-height:1.3}
.gf-leak{font-size:.76rem;line-height:1.35;color:#ffb3b3;background:rgba(255,90,90,.1);border:1px solid rgba(255,90,90,.35);border-radius:10px;padding:5px 8px}
.gf-leak::before{content:"● ";color:#ff6b6b}
.gf-cap{margin:-8px 0 16px;font-size:.84rem;color:var(--dim)}
@media (max-width:640px){
  .gflow{flex-direction:column;gap:14px;padding:16px}
  .gf-step{flex-direction:row;flex-wrap:wrap;text-align:left;align-items:center;gap:6px 12px;padding:0}
  .gf-step::before{flex:none}
  .gf-step:not(:last-child)::after{top:34px;left:14px;right:auto;width:2px;height:calc(100% - 20px)}
  .gf-step b{flex:1 1 auto}
  .gf-leak{flex-basis:100%;margin-left:42px}
}

/* "On this page" */
.gtoc{margin:0 0 26px;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02)}
.gtoc summary{cursor:pointer;padding:10px 0;margin:-10px 0;font:500 .72rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.gtoc ol{margin:10px 0 2px;padding-left:1.3em;display:grid;gap:6px;font-size:.95rem}
.gtoc a{color:#d5dceb;text-decoration:none}
.gtoc a:hover{color:var(--fg);text-decoration:underline}
h2[id]{scroll-margin-top:100px}

/* reading progress */
.gprog{position:fixed;left:0;right:0;top:0;height:3px;z-index:60;pointer-events:none}
.gprog i{display:block;height:100%;background:linear-gradient(90deg,#6fa2ff,#a9c6ff);transform:scaleX(0);transform-origin:0 50%}
@media (prefers-reduced-motion:reduce){.gprog{display:none}*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}