/* jobbo.se — the "Arbetsmarknaden just nu" data band (docs/site/templates/charts.mjs).
   Ported from web/proto-hem.html's .data/.charts/.chart/.bars-h/.row/.src rules onto the
   site's st- classes. Tokens only: no hex, no rgba; color-mix between tokens is fine. */

.st-chart-band {
  background: var(--canvas-tint);
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  padding: var(--st-section) 0;
}
/* Same 1280 frame and gutter as every other section on the page. */
.st-chart-wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); }
.st-chart-head { max-width: 62ch; }
.st-chart-band .st-lede {
  font-size: 18px;
}

.st-chart-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}

.st-chart {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px 22px 18px;
}
.st-chart h3 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.st-chart-sub {
  margin: 2px 0 18px;
  font-size: 13px;
  color: var(--ink-3);
}

/* Bar rows: label left, tabular value right, bar underneath the label. */
.st-chart-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.st-chart-row {
  display: grid;
  grid-template-columns: 1fr 64px;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 4px 12px;
  font-size: 13.5px;
}
.st-chart-lbl {
  grid-column: 1;
  grid-row: 1;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.st-chart-bar {
  grid-column: 1;
  grid-row: 2;
  height: 8px;
  border-radius: var(--r-xs);
  background: var(--sea);
}
.st-chart-bar.is-lo {
  background: color-mix(in srgb, var(--sea) 55%, var(--canvas-tint));
}
.st-chart-val {
  grid-column: 2;
  grid-row: 1 / span 2;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  font-size: 13px;
}

/* Source list. */
.st-chart-src-group {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.st-chart-src {
  display: grid;
  grid-template-columns: 10px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13.5px;
}
.st-chart-src:last-child {
  border-bottom: 0;
}
.st-chart-src i {
  width: 10px;
  height: 10px;
  border-radius: var(--r-2xs);
}
.st-chart-src .st-chart-val {
  grid-column: auto;
  grid-row: auto;
  text-align: right;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.st-chart-how {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--sunken);
  color: var(--ink-2);
}

.st-chart-foot {
  margin: 16px 0 0;
  font-size: 12px;
  color: var(--ink-3);
}

/* Table fallback: visually hidden trigger content stays styled like a link. */
.st-chart-table {
  margin-top: 14px;
}
.st-chart-table summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--accent-ink);
  font-weight: var(--weight-medium);
}
.st-chart-table table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
  font-size: 13px;
}
.st-chart-table th,
.st-chart-table td {
  text-align: left;
  padding: 6px 8px 6px 0;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-2);
}
.st-chart-table th {
  color: var(--ink-3);
  font-weight: var(--weight-medium);
}
.st-chart-table td:last-child,
.st-chart-table th:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 960px) {
  .st-chart-grid {
    grid-template-columns: 1fr;
  }
}