/* The right-hand panel on About and the salary pages (public/site-rail.js).
   Same box as the calculator's panel at >= 1320px: 396px wide, 12px from the
   edges, with 420px of the page kept free for it, so headers line up exactly. */
.site-rail{display:none}
.site-rail:empty{visibility:hidden}
@media(min-width:1320px){
  body.has-rail{padding-right:420px}
  /* The calculator keeps a 4px inner edge next to its panel; match it exactly. */
  body.has-rail .page{padding-right:4px}
  .site-rail{display:block;position:fixed;top:12px;right:12px;bottom:12px;width:396px;overflow:auto;padding:30px 28px 24px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,var(--surface) 0%,var(--surface) 62%,var(--surface-2) 100%);box-shadow:0 12px 36px -22px rgba(12,38,28,.34);z-index:5}
}
.site-rail .icon{width:18px;height:18px;flex:0 0 18px;display:inline-block;vertical-align:middle}
.site-rail .icon--16{width:16px;height:16px;flex-basis:16px}
.rail-top{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.rail-icon{display:inline-flex}
.rail-icon img{width:36px;height:36px;display:block}
.rail-feedback{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;padding:8px 13px;border-radius:999px;border:1px solid var(--f-net);background:var(--f-net);color:var(--on-net);box-shadow:0 6px 16px -10px rgba(12,38,28,.5)}
.rail-feedback:hover{color:var(--on-net);filter:brightness(1.08)}
.rail-privacy{display:flex;align-items:center;gap:12px;margin:0 0 26px;padding:12px 12px 12px 14px;border-radius:14px;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line))}
.rail-privacy-icon{flex:0 0 34px;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--f-net);color:#fff}
.rail-privacy-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;font-size:13px;line-height:1.4;color:var(--ink-2)}
.rail-privacy-copy strong{font-family:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:15px;line-height:1.25;font-weight:700;color:var(--ink)}
.rail-kicker{font-size:14px;font-weight:700;color:var(--accent-ink);margin-bottom:4px}
.rail-title{font-family:"Schibsted Grotesk",ui-sans-serif,system-ui,sans-serif;font-size:28px;line-height:1.08;font-weight:800;letter-spacing:-.04em;color:var(--ink);margin:0 0 14px}
.rail-card{padding:16px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:0 10px 28px -24px rgba(8,32,25,.45)}
.rail-card label{display:block;font-size:13px;font-weight:650;color:var(--ink-3);margin-bottom:6px}
.rail-input{display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid var(--line-strong);border-radius:10px;background:var(--surface)}
.rail-input:focus-within{outline:2px solid var(--accent);outline-offset:1px}
.rail-input input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:20px;font-weight:700;padding:9px 0;color:var(--ink);outline:none;font-variant-numeric:tabular-nums}
.rail-input span{font-size:13px;font-weight:700;color:var(--ink-3)}
.rail-note{font-size:12px;line-height:1.5;color:var(--ink-3);margin:0 0 12px}
.rail-open{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;border:0}

/* Same privacy card as the calculator, with Clear data. */
.rail-privacy .rail-clear{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:10px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink-2);font:inherit;font-size:13px;line-height:1.45;font-weight:700;cursor:pointer}
.rail-privacy .rail-clear:hover{border-color:var(--ink-4);color:var(--ink)}
/* "Remember my numbers on this device", same switch as the calculator's. */
.rail-privacy{flex-wrap:wrap}
.rail-remember{flex:1 0 100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:10px;border-top:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));font-size:13px;line-height:1.4;color:var(--ink-2)}
.rail-switch{position:relative;flex:0 0 auto;width:46px;height:28px;padding:0;border:0;border-radius:999px;background:var(--line-strong);cursor:pointer;transition:background .18s}
.rail-switch i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s}
.rail-switch[aria-checked="true"]{background:var(--accent)}
.rail-switch[aria-checked="true"] i{transform:translateX(18px)}
.rail-switch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.rail-switch,.rail-switch i{transition:none}}
.rail-cleared{margin:-16px 0 20px;font-size:13px;color:var(--ink-2)}
.rail-cleared button{padding:0;border:0;background:none;font:inherit;font-weight:700;color:var(--accent-ink);text-decoration:underline;cursor:pointer}
/* Where you stand */
.rail-stand{margin:14px 0 6px}
.rs-line{font-size:15px;line-height:1.45;color:var(--ink-2);margin:0 0 2px}
.rs-pct{font-family:"Schibsted Grotesk",ui-sans-serif,system-ui,sans-serif;font-size:30px;font-weight:800;letter-spacing:-.03em;color:var(--ink)}
.rs-diff{font-size:13px;color:var(--ink-3);margin:0 0 12px}
.rs-empty{font-size:14px;color:var(--ink-3);margin:0 0 12px}
.rs-track{position:relative;height:10px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);margin:4px 0 6px}
.rs-range{position:absolute;top:0;bottom:0;border-radius:999px;background:color-mix(in srgb,var(--f-net) 35%,transparent)}
.rs-median{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--ink-3)}
.rs-you{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--f-net);border:3px solid var(--surface);box-shadow:0 0 0 1px var(--f-net)}
.rs-scale{display:flex;justify-content:space-between;font-size:11px;color:var(--ink-3);margin-bottom:10px}
.rs-scale span{display:flex;flex-direction:column}
.rs-scale .rs-mid{align-items:center}
.rs-scale span:last-child{align-items:flex-end}
.rs-scale b{font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}