/* Yrkessidornas interaktiva lager — only what web/yrke.js needs to show state.
   Layout, type and the charts' own colours live in web/site.css; every value here comes
   from web/tokens.css, so dark mode and the focus ring follow the rest of the site.
   Contract: docs/YRKEN-V2-SPEC.md §7 and §8. */

/* ---- The one tooltip (spec §7) ------------------------------------------------------ */

.st-yr-tip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-float);
  max-width: min(300px, calc(100vw - 2 * var(--s-4)));
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--raised);
  color: var(--ink);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--tabular);
  box-shadow: var(--shadow-float);
  pointer-events: none;
  transition: opacity var(--t-fast) var(--ease);
}

.st-yr-tip[hidden] {
  display: none;
}

/* ---- Variants behind a segmented control (spec §7) ---------------------------------- */

[data-variant][hidden] {
  display: none !important;
}

/* ---- Line chart: guide line, point marker, keyboard focus (spec §4.4) --------------- */

.st-line svg {
  touch-action: pan-y;
}

.st-yr-guide {
  stroke: var(--line-strong);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  pointer-events: none;
}

.st-yr-guide-dot {
  fill: var(--sea);
  stroke: var(--canvas);
  stroke-width: 2;
  pointer-events: none;
}

/* SVG cannot take the site's box-shadow focus ring, so this gets an outline instead. */
.st-line svg:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ---- Week bars (spec §7) ------------------------------------------------------------ */

.st-weeks-bar {
  cursor: default;
}

.st-weeks-bar:hover i,
.st-weeks-bar:focus-visible i {
  background: var(--accent-hover);
}

.st-weeks-bar.is-partial:hover i,
.st-weeks-bar.is-partial:focus-visible i {
  border-color: var(--accent-hover);
}

.st-weeks-bar:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* ---- Band marks (spec §4.2) --------------------------------------------------------- */

.st-band-mark:hover b,
.st-band-mark:focus-visible b {
  color: var(--accent-ink);
}

.st-band-mark:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* ---- The two calculators (spec §4.1, §4.8) ------------------------------------------- */

/* The estimate marker, the slider and the result card are styled in the yrken block of
   site.css (.st-yr-track-mark, .st-yr-calc-range-row, .st-yr-calc-out), where the rest of
   the page's look lives. The only thing the interaction adds is that the reader's own
   marker slides to its new place instead of jumping; :where() keeps it at zero
   specificity so site.css stays in charge of everything else. */
:where([data-out="marker"]) {
  transition: left var(--t-base) var(--ease);
}

/* Results are numbers the reader compares: always tabular. */
.st-yr-calc-out [data-out],
.st-yr-calc [data-out] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: var(--tabular);
}

/* ---- The real SVG map (spec v3 "Var finns jobben"): `.st-yr-lan` hover/focus lift ----
   The colour scale and the default hairline stroke are owned by site.css (.st-yr-lan,
   .st-yr-lan.is-qN); this file only owns the interactive emphasis stroke on hover/focus,
   so there is exactly one place for each (YRKEN-AUDIT item 18). */

.st-yr-lan {
  cursor: pointer;
  transition: stroke var(--t-fast) var(--ease), stroke-width var(--t-fast) var(--ease);
}

.st-yr-lan.is-hot,
.st-yr-lan:focus-visible {
  stroke: var(--ink);
  stroke-width: 1.2;
}

.st-yr-lan:focus-visible {
  outline: none;
}

/* Label colour and halo live in site.css (.st-yr-lan-lbl): dark ink on every shade. */
.st-yr-lan text {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .st-yr-lan {
    transition: none;
  }
}

/* ---- Län list: the row layout lives in site.css (.st-yr-lanrow); the sort control is
   the shared .st-yr-seg. Nothing structural here. */

/* ---- Motion ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .st-yr-tip,
  [data-out="marker"] {
    transition: none;
  }
}