/* Remote Salary Calculator. Mobile first. Reuses resume-keyword-matcher.css for the hero grid,
   glows, step cards, tools grid and final CTA centering (loaded before this file via extraCss),
   and blog.css for the FAQ accordion. This file is only the calculator card itself, the Next
   Step card and the factor grid, all new to this page. Violet only gradient on the card frame,
   never mixed with green, matching the rest of the page's design rule. */
/* Several elements here set their own display (flex) while starting hidden via the HTML hidden
   attribute (the role error, the next step section, the other-country select, the local currency
   button). An author rule that sets display wins the cascade over the UA stylesheet's
   [hidden]{display:none} at equal specificity, so without this they would show immediately.
   Mirrors the same fix already applied on the Resume Keyword Matcher page. */
body[data-tool="remote-salary-calculator"] [hidden]{display:none!important}
.rsc-main{overflow-x:clip}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.rsc-ticks{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.rsc-ticks li{display:flex;align-items:center;gap:8px;font:500 14px/1 "DM Sans",sans-serif;color:var(--ink)}
.rsc-ticks svg{flex:none;color:var(--navy)}

/* ---------- calculator card ---------- */
.rsc-frame{position:relative;width:100%;max-width:460px;padding:14px;border-radius:var(--radius-lg);background:linear-gradient(145deg,var(--violet-2),var(--violet));box-shadow:var(--shadow-lg)}
@media (min-width:480px){.rsc-frame{padding:20px}}
.rsc-card{background:#fff;border-radius:calc(var(--radius-lg) - 14px);overflow:hidden;isolation:isolate}
@media (min-width:480px){.rsc-card{border-radius:calc(var(--radius-lg) - 20px)}}

.rsc-card-top{background:var(--ink);color:#fff;padding:20px 22px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.rsc-card-eyebrow{margin:0 0 6px;font:700 11px/16px "DM Sans",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.56)}
.rsc-card-h{margin:0;font:700 22px/28px "Syne","DM Sans",sans-serif;letter-spacing:-.02em;color:#fff}
.rsc-bars{flex:none;margin-top:4px}

.rsc-card-body{padding:22px;display:flex;flex-direction:column;gap:18px}
.rsc-row3{display:grid;gap:18px}
@media (min-width:460px){.rsc-row3{grid-template-columns:1.3fr 1fr}}
.rsc-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.rsc-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.rsc-label{font:700 13px/18px "DM Sans",sans-serif;color:var(--ink)}
.rsc-help{margin:0;font-size:12px;line-height:16px;color:var(--muted)}

.rsc-select{width:100%;min-height:48px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font:400 15px/1.3 "DM Sans",sans-serif;padding:0 14px;transition:border-color .2s ease,box-shadow .2s ease}
.rsc-select:hover{border-color:var(--violet)}
.rsc-select:focus-visible{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(197,150,254,.45)}
.rsc-select[aria-invalid="true"]{border-color:var(--error);box-shadow:0 0 0 3px rgba(229,72,77,.25)}

/* ---------- role combobox ---------- */
.rsc-combobox{position:relative}
.rsc-combobox-input{cursor:text}
.rsc-listbox{position:absolute;z-index:20;top:calc(100% + 6px);left:0;right:0;max-height:280px;overflow-y:auto;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-md)}
.rsc-listbox-group{padding:8px 10px 4px;font:700 11px/14px "DM Sans",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rsc-listbox-option{padding:10px 10px;border-radius:9px;font:500 14px/20px "DM Sans",sans-serif;color:var(--ink);cursor:pointer}
.rsc-listbox-option.is-active,.rsc-listbox-option:hover{background:var(--violet-2)}
.rsc-listbox-option[aria-selected="true"]{font-weight:700}
.rsc-listbox-option-other{border-top:1px solid var(--line);margin-top:4px;padding-top:12px}

.rsc-err{display:flex;align-items:flex-start;gap:8px;margin:0;font:500 13px/18px "DM Sans",sans-serif;color:var(--error)}
.rsc-err svg{flex:none;margin-top:1px}

.rsc-years-pill{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:26px;padding:0 8px;border-radius:var(--radius-pill);background:var(--violet-2);color:var(--ink);font:700 13px/1 "DM Sans",sans-serif}
.rsc-range{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;background:var(--line);outline:none;margin:10px 0 2px}
.rsc-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:var(--ink);border:3px solid #fff;box-shadow:0 1px 4px rgba(14,14,16,.4);cursor:pointer}
.rsc-range::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--ink);border:3px solid #fff;box-shadow:0 1px 4px rgba(14,14,16,.4);cursor:pointer;box-sizing:border-box}
.rsc-range:focus-visible::-webkit-slider-thumb{outline:3px solid var(--blue);outline-offset:2px}
.rsc-range-scale{display:flex;justify-content:space-between;font:500 11px/1 "DM Sans",sans-serif;color:var(--muted)}

.rsc-pillrow{display:flex;flex-wrap:wrap;gap:8px}
.rsc-pill{min-height:40px;padding:0 16px;border-radius:var(--radius-pill);border:1px solid var(--line);background:#fff;color:var(--ink);font:500 13px/1 "DM Sans",sans-serif;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease}
.rsc-pill:hover{border-color:var(--violet)}
.rsc-pill[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:transparent}
.rsc-pill:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

.rsc-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rsc-actions .btn{flex:1 1 auto;min-width:0}
/* Calculate stands apart from the ink pills used everywhere else on the site: green at rest,
   same violet hover every other primary button already uses (site.css .btn-primary:hover). */
#rsc-calculate{background:var(--green);color:var(--ink);box-shadow:0 18px 40px -18px rgba(181,245,87,.55)}
#rsc-calculate:hover{background:var(--violet);color:var(--ink)}

.rsc-divider{height:1px;background:var(--line)}

/* ---------- result ---------- */
.rsc-hint-text{margin:0 0 14px;color:var(--muted);font-size:14px;line-height:20px}
.rsc-skeleton{display:flex;flex-direction:column;gap:8px}
.rsc-skeleton span{display:block;height:12px;border-radius:999px;background:var(--bg-alt)}
.rsc-skeleton span:nth-child(1){width:70%}
.rsc-skeleton span:nth-child(2){width:100%;height:20px}
.rsc-skeleton span:nth-child(3){width:50%}

.rsc-range-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.rsc-label-sm{margin:0;font:700 12px/16px "DM Sans",sans-serif;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.rsc-currency-toggle{display:inline-flex;gap:2px;padding:3px;border-radius:var(--radius-pill);background:var(--bg-alt);border:1px solid var(--line)}
.rsc-ctoggle-btn{min-height:28px;padding:0 12px;border-radius:var(--radius-pill);border:0;background:transparent;color:var(--muted);font:600 12px/1 "DM Sans",sans-serif;cursor:pointer;transition:background .2s ease,color .2s ease}
.rsc-ctoggle-btn[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}
.rsc-ctoggle-btn:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* Two independent scenario cards, always stacked on narrow screens (explicit requirement),
   side by side once the card is wide enough to fit both without squeezing the range bars. */
.rsc-scenarios{display:flex;flex-direction:column;gap:14px;margin-bottom:4px}
.rsc-scenario{min-width:0;background:var(--bg-alt);border:1px solid var(--line);border-radius:16px;padding:16px}
.rsc-scenario-label{margin:0;font:700 13px/18px "DM Sans",sans-serif;color:var(--ink)}

.rsc-big-range{margin:6px 0 0;font:700 28px/1.1 "Syne","DM Sans",sans-serif;letter-spacing:-.02em;color:var(--ink)}
.rsc-per-year{margin:4px 0 0;font-size:13px;color:var(--muted)}
.rsc-ceiling-note{margin:10px 0 0;font-size:12px;line-height:17px;color:var(--muted)}

.rsc-bar{position:relative;height:10px;border-radius:999px;background:#fff;margin:16px 0 8px;overflow:visible}
.rsc-bar-track{position:absolute;inset:0;border-radius:999px;background:linear-gradient(90deg,var(--violet-2),var(--violet))}
.rsc-bar-mark{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;background:var(--ink);border:2px solid #fff;box-shadow:0 1px 3px rgba(14,14,16,.3);transform:translate(-50%,-50%)}
.rsc-bar-labels{display:flex;justify-content:space-between;font:500 11px/16px "DM Sans",sans-serif;color:var(--muted)}
.rsc-bar-labels strong{display:block;color:var(--ink);font:700 12px/16px "DM Sans",sans-serif}

.rsc-month-note{margin:12px 0 0;font-size:13px;color:var(--ink)}
.rsc-month-note strong{font-weight:700}

.rsc-chips-row{margin-top:14px}
.rsc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.rsc-chip{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:var(--radius-pill);background:var(--bg-alt);border:1px solid var(--line);color:var(--ink);font:500 12px/1 "DM Sans",sans-serif}

.rsc-bottom-row{margin-top:16px}
.rsc-notes{margin-top:14px}
.rsc-estimate-note{margin:0;font-size:12px;line-height:18px;color:var(--muted)}
.rsc-estimate-note a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--blue);text-underline-offset:2px}
.rsc-disclaimer-note{margin:4px 0 0;font-size:12px;line-height:18px;color:var(--muted)}
.rsc-rates-note{margin:4px 0 0;font-size:12px;color:var(--muted)}
.rsc-imprecise-note{margin:4px 0 0;font-size:12px;color:var(--muted)}

/* ---------- desktop hero: one centered column, text above a wide calculator card ---------- */
@media (min-width:768px){
  .rsc-hero .rkm-hero-grid{grid-template-columns:1fr;gap:32px}
  .rsc-hero .rkm-hero-copy{display:flex;flex-direction:column;align-items:center;text-align:center}
  .rsc-hero .rkm-hero-copy h1{max-width:none}
  .rsc-hero .rkm-hero-copy .lede{max-width:620px}
  .rsc-hero .rsc-ticks{flex-direction:row;justify-content:center;gap:28px;margin-top:22px}
  .rsc-hero .rkm-hero-visual{justify-content:center;width:100%}
  .rsc-frame{max-width:none}

  .rsc-row3{grid-template-columns:repeat(3,1fr)}
  .rsc-pillrow{flex-wrap:nowrap}
  .rsc-actions{flex-wrap:nowrap}
  .rsc-actions .btn{flex:0 0 auto}

  .rsc-scenarios{flex-direction:row}
  .rsc-scenario{flex:1 1 0}

  .rsc-bottom-row{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
  .rsc-notes{margin-top:0;max-width:560px;text-align:right}
}

/* ---------- next step ---------- */
.rsc-next-step-wrap{padding-top:0}
.rsc-next-step{background:#d9f7ab;border-radius:var(--radius-lg);padding:32px;display:flex;flex-direction:column;gap:20px;opacity:0;transform:translateY(8px);transition:opacity .4s ease,transform .4s ease}
.rsc-next-step.in{opacity:1;transform:translateY(0)}
.rsc-next-step-h{margin:6px 0 0;font:700 clamp(22px,3vw,30px)/1.15 "Syne","DM Sans",sans-serif;letter-spacing:-.02em;color:var(--ink)}
.rsc-next-step-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.rsc-share-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:var(--radius-pill);border:1px solid rgba(14,14,16,.2);background:transparent;color:var(--ink);font:600 14px/1 "DM Sans",sans-serif;cursor:pointer;transition:background .2s ease}
.rsc-share-btn:hover{background:rgba(255,255,255,.4)}
.rsc-share-btn:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
@media (min-width:768px){.rsc-next-step{flex-direction:row;align-items:center;justify-content:space-between}}
@media (prefers-reduced-motion:reduce){.rsc-next-step{transition:none}}

/* ---------- factor grid ---------- */
.rsc-factors{display:grid;gap:12px;margin-top:28px}
@media (min-width:650px){.rsc-factors{grid-template-columns:repeat(2,1fr)}}
.rsc-factor{display:flex;align-items:flex-start;gap:16px;padding:24px 0;border-top:1px solid var(--line)}
.rsc-factor-ic{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--violet-2)}
.rsc-factor:nth-child(4n+2) .rsc-factor-ic{background:var(--green-2)}
.rsc-factor:nth-child(4n+3) .rsc-factor-ic{background:rgba(108,124,255,.18)}
.rsc-factor:nth-child(4n) .rsc-factor-ic{background:var(--violet-2)}
.rsc-factor-text{min-width:0}
.rsc-factor-name{margin:0;font:700 19px/26px "Syne","DM Sans",sans-serif;letter-spacing:-.01em;color:var(--ink)}
.rsc-factor-desc{margin:4px 0 0;font:400 14px/20px "DM Sans",sans-serif;color:var(--muted)}

/* ---------- error state ---------- */
#rsc-role[aria-invalid="true"]{border-color:var(--error)}