/* ===== Praus · How it works visual + Running cost (redesign) ===== */

/* ---- How it works: router figure ---- */
.router{margin:0;display:flex;flex-direction:column;align-items:center;gap:18px}
.geometry--router{max-width:520px!important;aspect-ratio:1}
/* ---- Running cost ---- */
#cost-panel{--rcw:#F5F4F2;--rcl:rgba(245,244,242,.1);--rcl2:rgba(245,244,242,.2)}
.rc-head{display:grid;grid-template-columns:1.25fr 1fr 1fr;border-top:1px solid var(--rcl);border-bottom:1px solid var(--rcl);margin-bottom:20px}
.rc-stat{padding:28px 28px 26px;border-left:1px solid var(--rcl)}
.rc-stat:first-child{border-left:0;padding-left:0}
.rc-k{margin:0 0 14px;font:500 14px/1.3 Inter,sans-serif;color:var(--rcw)}
.rc-big{margin:0;font:500 clamp(48px,5.6vw,76px)/.95 "Inter Tight",sans-serif;letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:var(--rcw)}
.rc-mid{margin:0;font:500 clamp(34px,3.4vw,46px)/1 "Inter Tight",sans-serif;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:var(--rcw)}
.rc-s{margin:12px 0 0;font:400 14.5px/1.45 Inter,sans-serif;color:var(--rcw);opacity:.72}
.rc-card{border-radius:20px;box-shadow:inset 0 0 0 1px var(--rcl);padding:22px 28px 20px}
.rc-bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.rc-seg{display:inline-flex;gap:22px}
.rc-seg button{appearance:none;border:0;background:none;padding:6px 0;cursor:pointer;font:500 14.5px/1.2 Inter,sans-serif;color:var(--rcw);opacity:.55;border-bottom:1.5px solid transparent;transition:opacity .3s,border-color .3s}
.rc-seg button:hover{opacity:.85}
.rc-seg button[aria-pressed=true]{opacity:1;border-bottom-color:var(--rcw)}
/* grid: name | track | value | multiple */
.rc-axis,.rc-row{display:grid;grid-template-columns:minmax(9rem,11.5rem) minmax(0,1fr) 5.6rem 4.6rem;gap:18px;align-items:center}
.rc-axis{height:26px;border-bottom:1px solid var(--rcl)}
.rc-ticks{position:relative;height:100%}
.rc-tick{position:absolute;top:4px;transform:translateX(-50%);font:500 12px/1 Inter,sans-serif;font-variant-numeric:tabular-nums;color:var(--rcw);opacity:.5;white-space:nowrap}
.rc-list{list-style:none;margin:0;padding:6px 0 0;position:relative}
.rc-row{min-height:36px;border-bottom:1px solid rgba(245,244,242,.05);transition:background .25s}
.rc-row:last-child{border-bottom:0}
.rc-row[hidden]{display:none}
.rc-row:hover{background:rgba(245,244,242,.03)}
.rc-n{font:500 14px/1.3 Inter,sans-serif;color:var(--rcw);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-row:not(.is-praus) .rc-n{opacity:.82}
.rc-v{text-align:right;font:500 14px/1 "Inter Tight",sans-serif;font-variant-numeric:tabular-nums;color:var(--rcw)}
.rc-x{text-align:right;font:500 13px/1 Inter,sans-serif;font-variant-numeric:tabular-nums;color:var(--rcw);opacity:.6}
.rc-row.is-praus .rc-n,.rc-row.is-praus .rc-v{font-weight:600}
.rc-row.is-praus .rc-x{opacity:.6}
.rc-track{position:relative;height:100%;min-height:36px}
/* gridlines at the tick positions (set via the axis) */
.rc-list::before{content:'';position:absolute;inset:0;pointer-events:none}
.rc-gap{position:absolute;top:50%;height:2px;margin-top:-1px;left:var(--b);width:calc(var(--p) - var(--b));background:linear-gradient(90deg,rgba(245,244,242,.55),rgba(245,244,242,.22));border-radius:2px;transform-origin:left;transform:scaleX(0)}
.rc-dot{position:absolute;top:50%;left:var(--b);width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:rgba(245,244,242,.55);box-shadow:0 0 0 3px #171719}
.rc-row.is-praus .rc-dot{left:var(--b);width:12px;height:12px;margin:-6px 0 0 -6px;background:var(--rcw);box-shadow:0 0 0 3px #171719,0 0 14px rgba(245,244,242,.55)}
.rc-row.is-praus .rc-gap{display:none}
#cost-panel.rc-in .rc-dot{left:var(--p);transition:left 1.1s cubic-bezier(.22,1,.36,1) calc(var(--k,0)*45ms)}
#cost-panel.rc-in .rc-gap{transform:scaleX(1);transition:transform 1.1s cubic-bezier(.22,1,.36,1) calc(var(--k,0)*45ms)}
#cost-panel.rc-in .rc-row.is-praus .rc-dot{transition:none}
.rc-row:hover .rc-dot{background:var(--rcw)}
.rc-row:hover .rc-gap{background:linear-gradient(90deg,rgba(245,244,242,.8),rgba(245,244,242,.4))}
#cost-panel .rc-v,#cost-panel [data-big],#cost-panel .rc-tick{transition:opacity .16s}
#cost-panel.rc-swap .rc-v,#cost-panel.rc-swap [data-big],#cost-panel.rc-swap .rc-tick{opacity:0}
.rc-foot{margin:14px 0 0;font:400 13px/1.5 Inter,sans-serif;color:var(--rcw);opacity:.6}
#cost-panel .cost-note{margin-top:20px}
@media(max-width:900px){
 .rc-head{grid-template-columns:1fr 1fr}.rc-main{grid-column:1/-1;border-bottom:1px solid var(--rcl)}.rc-stat:nth-child(2){border-left:0;padding-left:0}
 .rc-axis,.rc-row{grid-template-columns:minmax(7rem,9rem) minmax(0,1fr) 4.8rem 3.6rem;gap:12px}
}
@media(max-width:600px){
 .rc-card{padding:16px 16px 14px;border-radius:16px}
 .rc-bar{flex-direction:column;gap:10px}.rc-seg{gap:16px;flex-wrap:wrap}
 .rc-axis{grid-template-columns:minmax(0,1fr);}.rc-axis>span:not(.rc-ticks){display:none}
 .rc-row{grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"n v x" "t t t";row-gap:2px;padding:8px 0}
 .rc-n{grid-area:n}.rc-v{grid-area:v}.rc-x{grid-area:x}.rc-track{grid-area:t;min-height:16px}
 .rc-stat{padding:20px 14px}.rc-main{padding-left:0}
}
@media(prefers-reduced-motion:reduce){#cost-panel .rc-dot,#cost-panel .rc-gap{transition:none!important}}

@media(max-width:600px){.rc-tick[data-t="0.0005"]{display:none}}