/* Suiza Clara — contrast safeguards for both themes.
   Loaded after the main theme so light surfaces never inherit light text,
   and dark surfaces never retain light-mode greys/backgrounds. */

/* Controls: pale controls always use a strong foreground. */
.btn{color:var(--ink)}
.btn-primary{color:#fff}
.btn-dark{color:#fff}
.section-dark .btn-ghost{color:#fff}
input::placeholder,textarea::placeholder{color:#77736b;opacity:1}
.help,.meta,.privacy-note,.result-label,.caption,.data-kind{color:var(--muted)}

/* Map labels use a darker version of the semantic palette so white codes stay legible. */
.map-pin{background:color-mix(in srgb,var(--pin,#df1c36) 72%,#000)!important;color:#fff!important}

/* Light cards placed inside dark sections must carry their own foreground. */
.market-card,.final-market,.profession-market-card{color:var(--ink)}
.market-card h3,.market-card b,.market-card strong,.market-card a,.market-card-foot,
.profession-market-card h3,.profession-market-card b,.profession-market-card strong,.profession-market-card a{color:var(--ink)}
.market-card span:not(.flag-code),.market-card small,
.profession-market-card span:not(.flag-code),.profession-market-card small{color:var(--muted)}
.market-card .flag-code,.profession-market-card .flag-code{color:var(--red)}

/* Search-term matrices use explicit foregrounds instead of inherited colours. */
.phrase-row{color:var(--ink)}
.phrase-row>div{color:var(--ink)}
.phrase-row.header>div{color:var(--muted)}

/* Featured red salary cells always use high-contrast copy. */
.salary-triplet>div.featured,
.salary-triplet .featured{color:#fff}
.salary-triplet>div.featured :is(small,span,strong,em),
.salary-triplet .featured :is(small,span,strong,em){color:#fff!important}

/* Explicit light-mode control/card contrast. */
html[data-theme="light"] .btn:not(.btn-primary):not(.btn-dark){color:#171714!important}
html[data-theme="light"] .btn-primary{color:#fff!important}
html[data-theme="light"] .btn-dark{color:#fff!important}
html[data-theme="light"] .market-card,
html[data-theme="light"] .final-market,
html[data-theme="light"] .profession-market-card{color:#171714}
html[data-theme="light"] .market-card h3,
html[data-theme="light"] .market-card b,
html[data-theme="light"] .market-card strong,
html[data-theme="light"] .market-card a,
html[data-theme="light"] .market-card-foot{color:#171714}
html[data-theme="light"] .market-card span:not(.flag-code),
html[data-theme="light"] .market-card small{color:#666159}

/* Dark-mode semantic tokens. */
html[data-theme="dark"]{
  --sc-contrast-surface:#191d21;
  --sc-contrast-surface-2:#171b1f;
  --sc-contrast-surface-3:#14181c;
  --sc-contrast-text:#f2f0ea;
  --sc-contrast-muted:#b7b3aa;
}

/* In dark mode btn-dark deliberately becomes the pale secondary CTA. */
html[data-theme="dark"] .btn-dark{
  background:#ece9e1!important;
  border-color:#ece9e1!important;
  color:#111310!important;
}
html[data-theme="dark"] .btn-dark :is(span,b,strong){color:#111310!important}
html[data-theme="dark"] .btn:not(.btn-primary):not(.btn-dark){color:var(--sc-contrast-text)}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder{color:#a5abb1!important;opacity:1}

/* Home market cards. */
html[data-theme="dark"] .market-card,
html[data-theme="dark"] .final-market,
html[data-theme="dark"] .profession-market-card{
  background:var(--sc-contrast-surface)!important;
  color:var(--sc-contrast-text)!important;
  border-color:var(--line)!important;
}
html[data-theme="dark"] .market-card h3,
html[data-theme="dark"] .market-card b,
html[data-theme="dark"] .market-card strong,
html[data-theme="dark"] .market-card a,
html[data-theme="dark"] .market-card-foot,
html[data-theme="dark"] .profession-market-card h3,
html[data-theme="dark"] .profession-market-card b,
html[data-theme="dark"] .profession-market-card strong{color:var(--sc-contrast-text)!important}
html[data-theme="dark"] .market-card span:not(.flag-code),
html[data-theme="dark"] .market-card small,
html[data-theme="dark"] .profession-market-card span:not(.flag-code),
html[data-theme="dark"] .profession-market-card small{color:var(--sc-contrast-muted)!important}
html[data-theme="dark"] .market-card .flag-code,
html[data-theme="dark"] .profession-market-card .flag-code{color:var(--red)!important}
html[data-theme="dark"] .market-kpis>div,
html[data-theme="dark"] .market-card .mini-metric{
  background:var(--sc-contrast-surface-2)!important;
  border-color:var(--line)!important;
}

/* Red feature cards must not inherit dark-theme muted grey. */
html[data-theme="dark"] .wow-card.red,
html[data-theme="dark"] .wow-card.red :is(h3,b,strong,a){color:#fff!important}
html[data-theme="dark"] .wow-card.red>span,
html[data-theme="dark"] .wow-card.red p{color:#fff!important}

/* Salary pyramid legend is a surface of its own in dark mode. */
html[data-theme="dark"] .pyramid-explain span{
  background:var(--sc-contrast-surface-2)!important;
  color:var(--sc-contrast-muted)!important;
  border-color:var(--line)!important;
}
html[data-theme="dark"] .pyramid-explain b{color:var(--sc-contrast-text)!important}

/* Profession/language term matrix. Child cells had literal white backgrounds. */
html[data-theme="dark"] .phrase-table{border-color:var(--line)!important;background:transparent!important}
html[data-theme="dark"] .phrase-row{
  background:var(--sc-contrast-surface)!important;
  color:var(--sc-contrast-text)!important;
  border-color:var(--line)!important;
}
html[data-theme="dark"] .phrase-row>div{
  background:transparent!important;
  color:var(--sc-contrast-text)!important;
  border-color:var(--line)!important;
}
html[data-theme="dark"] .phrase-row.header{background:var(--sc-contrast-surface-3)!important}
html[data-theme="dark"] .phrase-row.header>div{color:var(--sc-contrast-muted)!important}

/* Article checklist/bullet cards are pale in light mode, dark surfaces in dark mode. */
html[data-theme="dark"] .article-bullets li{
  background:var(--sc-contrast-surface-2)!important;
  color:var(--sc-contrast-text)!important;
  border-color:var(--line)!important;
}

/* Legacy light-coded cards across the product. */
html[data-theme="dark"] :is(
  .guide-card,.language-card,.job-card,.method-card,.source-card,.scenario-card,
  .scenario-insight,.budget-card,.cost-card,.salary-card,.community-aggregate,
  .profession-card,.canton-card
){
  background:var(--sc-contrast-surface)!important;
  color:var(--sc-contrast-text)!important;
  border-color:var(--line)!important;
}
html[data-theme="dark"] :is(
  .guide-card,.language-card,.job-card,.method-card,.source-card,.scenario-card,
  .scenario-insight,.budget-card,.cost-card,.salary-card,.community-aggregate,
  .profession-card,.canton-card
) :is(h2,h3,h4,b,strong,a){color:var(--sc-contrast-text)}
html[data-theme="dark"] :is(
  .guide-card,.language-card,.job-card,.method-card,.source-card,.scenario-card,
  .scenario-insight,.budget-card,.cost-card,.salary-card,.community-aggregate,
  .profession-card,.canton-card
) :is(p,small,.meta,.help){color:var(--sc-contrast-muted)}

/* Notices and explanatory panels. */
html[data-theme="dark"] .notice,
html[data-theme="dark"] .offer-caveat,
html[data-theme="dark"] .data-method,
html[data-theme="dark"] .foreign-compact,
html[data-theme="dark"] .foreign-compact>div{
  background:var(--sc-contrast-surface-2)!important;
  color:var(--sc-contrast-text)!important;
  border-color:var(--line)!important;
}
html[data-theme="dark"] :is(.notice,.offer-caveat,.data-method,.foreign-compact,.foreign-compact>div) :is(b,strong){color:var(--sc-contrast-text)!important}
html[data-theme="dark"] :is(.notice,.offer-caveat,.data-method,.foreign-compact,.foreign-compact>div) :is(small,span,p){color:var(--sc-contrast-muted)!important}

/* Canton and profession salary blocks. */
html[data-theme="dark"] .salary-triplet>div:not(.featured),
html[data-theme="dark"] .canton-facts>div,
html[data-theme="dark"] .foreign-stats>div{
  background:var(--sc-contrast-surface-2)!important;
  color:var(--sc-contrast-text)!important;
  border-color:var(--line)!important;
}
html[data-theme="dark"] .salary-triplet>div:not(.featured) :is(strong,b),
html[data-theme="dark"] .canton-facts>div :is(strong,b),
html[data-theme="dark"] .foreign-stats>div :is(strong,b){color:var(--sc-contrast-text)!important}
html[data-theme="dark"] .salary-triplet>div:not(.featured) :is(small,span,em),
html[data-theme="dark"] .canton-facts>div span,
html[data-theme="dark"] .foreign-stats>div :is(small,span){color:var(--sc-contrast-muted)!important}
html[data-theme="dark"] .data-kind{
  background:var(--sc-contrast-surface-2)!important;
  color:var(--sc-contrast-muted)!important;
  border-color:var(--line)!important;
}

/* Tables: header and body need the same theme, not a light header over dark rows. */
html[data-theme="dark"] :is(.data-table,.salary-table) thead,
html[data-theme="dark"] :is(.data-table,.salary-table) th{
  background:var(--sc-contrast-surface-3)!important;
  color:var(--sc-contrast-muted)!important;
  border-color:var(--line)!important;
}
html[data-theme="dark"] :is(.data-table,.salary-table) tbody tr{
  background:var(--sc-contrast-surface)!important;
  color:var(--sc-contrast-text)!important;
}
html[data-theme="dark"] :is(.data-table,.salary-table) tbody tr:hover{background:#20252a!important}
html[data-theme="dark"] :is(.data-table,.salary-table) td,
html[data-theme="dark"] :is(.data-table,.salary-table) td a,
html[data-theme="dark"] :is(.data-table,.salary-table) td b,
html[data-theme="dark"] :is(.data-table,.salary-table) td strong{color:var(--sc-contrast-text)!important}
html[data-theme="dark"] :is(.data-table,.salary-table) td small{color:var(--sc-contrast-muted)!important}

/* Comparison cards are generated dynamically and contained legacy pale child panels. */
html[data-theme="dark"] .compare-pro-card{
  background:var(--sc-contrast-surface)!important;
  color:var(--sc-contrast-text)!important;
  border-color:var(--line)!important;
}
html[data-theme="dark"] .compare-pro-card div:not(.bar):not(.offer-track){
  background-color:transparent!important;
  border-color:var(--line)!important;
}
html[data-theme="dark"] .compare-pro-card :is(h2,h3,h4,b,strong,span){color:var(--sc-contrast-text)}
html[data-theme="dark"] .compare-pro-card :is(small,.meta,.compare-card-note){color:var(--sc-contrast-muted)!important}
html[data-theme="dark"] .compare-pro-rows>div{
  background:var(--sc-contrast-surface-2)!important;
  border-color:var(--line)!important;
}
html[data-theme="dark"] .mini-band>*{
  background:var(--sc-contrast-surface-2)!important;
  color:var(--sc-contrast-text)!important;
  border-color:var(--line)!important;
}
html[data-theme="dark"] .compare-card-note{background:var(--sc-contrast-surface-2)!important;color:var(--sc-contrast-muted)!important}

/* Common secondary text. */
html[data-theme="dark"] .help,
html[data-theme="dark"] .meta,
html[data-theme="dark"] .privacy-note,
html[data-theme="dark"] .result-label,
html[data-theme="dark"] .caption{color:var(--sc-contrast-muted)!important}
html[data-theme="dark"] input:disabled,
html[data-theme="dark"] select:disabled,
html[data-theme="dark"] textarea:disabled{color:#a8adb2;opacity:1}

/* Preserve semantic accent colours after broad foreground fixes. */
html[data-theme="dark"] :is(.eyebrow,.flag-code,.canton-code,.nav-wow,.profession-card .category){color:var(--red)!important}
html[data-theme="dark"] .pill.official{color:var(--green)!important}
html[data-theme="dark"] .de-good{color:var(--green)!important}
html[data-theme="dark"] .de-risk{color:#ff9aaa!important}

/* Footer / breadcrumb secondary copy. */
html[data-theme="dark"] .footer-col a,
html[data-theme="dark"] .footer-brand p,
html[data-theme="dark"] .footer-bottom,
html[data-theme="dark"] .breadcrumbs,
html[data-theme="dark"] .breadcrumbs a{color:var(--sc-contrast-muted)}

/* Visual polish from screenshot QA. */
.atlas-stage{overflow:visible}
.map-tooltip{z-index:30;box-shadow:0 18px 42px rgba(0,0,0,.34)}
html[data-theme="dark"] .salary-big-output strong{color:var(--red)!important}

/* Atlas form: native selects do not wrap, so long profile labels need deliberate sizing. */
.atlas-controls select.input{
  width:100%;
  min-width:0;
  padding-right:42px;
  font-size:.96rem;
  letter-spacing:-.01em;
}
.atlas-controls select[name="mapProfile"]{font-size:.9rem}
@media(max-width:560px){
  .atlas-controls select.input{font-size:.92rem}
  .atlas-controls select[name="mapProfile"]{font-size:.84rem}
}

/* Salary pyramid: force the final three-row component so no labels or bars are clipped. */
.pyramid.pyramid-final{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:14px!important;
  margin:30px 0 18px!important;
  overflow:visible!important;
}
.pyramid.pyramid-final>.pyramid-row{
  display:grid!important;
  grid-template-columns:minmax(150px,175px) minmax(0,1fr)!important;
  gap:18px!important;
  align-items:center!important;
  width:100%!important;
  min-width:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:var(--ink)!important;
  overflow:visible!important;
}
.pyramid.pyramid-final .pyramid-value{
  display:grid!important;
  grid-template-columns:auto 1fr!important;
  column-gap:8px!important;
  align-items:baseline!important;
  min-width:0!important;
  overflow:visible!important;
}
.pyramid.pyramid-final .pyramid-value small{
  grid-column:1/-1!important;
  display:block!important;
  position:static!important;
  margin:0 0 2px!important;
  line-height:1.2!important;
  color:var(--muted)!important;
}
.pyramid.pyramid-final .pyramid-value b{
  display:block!important;
  font-size:1.55rem!important;
  line-height:1!important;
  color:var(--ink)!important;
}
.pyramid.pyramid-final .pyramid-row.median .pyramid-value b{
  color:var(--red)!important;
  font-size:1.8rem!important;
}
.pyramid.pyramid-final .pyramid-value em{
  display:block!important;
  margin:0!important;
  color:var(--muted)!important;
  white-space:nowrap!important;
}
.pyramid.pyramid-final .pyramid-bar{
  display:block!important;
  width:100%!important;
  height:16px!important;
  min-width:0!important;
  padding:0!important;
  border:0!important;
  border-radius:999px!important;
  overflow:hidden!important;
  background:#ece7de!important;
}
.pyramid.pyramid-final .pyramid-bar i{
  display:block!important;
  height:100%!important;
  border-radius:999px!important;
  background:#252521!important;
}
.pyramid.pyramid-final .pyramid-row.median .pyramid-bar i{background:var(--red)!important}
html[data-theme="dark"] .pyramid.pyramid-final .pyramid-bar{background:#2b3035!important}
html[data-theme="dark"] .pyramid.pyramid-final .pyramid-bar i{background:#ece9e1!important}
html[data-theme="dark"] .pyramid.pyramid-final .pyramid-row.median .pyramid-bar i{background:var(--red)!important}
@media(max-width:760px){
  .pyramid.pyramid-final>.pyramid-row{
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  .pyramid.pyramid-final .pyramid-bar{height:13px!important}
}

/* Salary pyramid geometry parity — light and dark use the exact same scale. */
.pyramid.pyramid-final>.pyramid-row:nth-child(1) .pyramid-bar i{width:37%!important}
.pyramid.pyramid-final>.pyramid-row:nth-child(2) .pyramid-bar i{width:56%!important}
.pyramid.pyramid-final>.pyramid-row:nth-child(3) .pyramid-bar i{width:100%!important}

/* Dark salary pyramid surface parity and contrast. */
html[data-theme="dark"] .salary-visual{
  background:var(--sc-contrast-surface)!important;
  color:var(--sc-contrast-text)!important;
  border-color:var(--line)!important;
}
html[data-theme="dark"] .salary-visual .pyramid.pyramid-final,
html[data-theme="dark"] .salary-visual .pyramid.pyramid-final>.pyramid-row,
html[data-theme="dark"] .salary-visual .pyramid.pyramid-final .pyramid-value{
  background:transparent!important;
  color:var(--sc-contrast-text)!important;
}
html[data-theme="dark"] .salary-visual .pyramid.pyramid-final .pyramid-value b{
  color:var(--sc-contrast-text)!important;
}
html[data-theme="dark"] .salary-visual .pyramid.pyramid-final .pyramid-value small,
html[data-theme="dark"] .salary-visual .pyramid.pyramid-final .pyramid-value em{
  color:var(--sc-contrast-muted)!important;
}
html[data-theme="dark"] .salary-visual .pyramid.pyramid-final .pyramid-row.median .pyramid-value b{
  color:var(--red)!important;
}