/* ============================================================
   instruments.css — sektionsprogrammets små primitiver
   ============================================================
   Det som formkatalogen (producer, lager C) namnger men som inget
   annat ark bär: blödningen, kontrollerna läsaren rör, krönikan och
   transparensnoten. Token-drivna, mobil-först (endast min-width),
   och medvetet få — kompositionen är artefaktens, mekaniken systemets. */

/* ── .bleed — den dokumenterade fullbreddsklassen ──
   Aldrig 100vw. Ett fullbreddsbarn till artefaktroten; innerdelen
   återvänder till sidmåttet. */
.bleed { width: 100%; }
.bleed__inner {
  width: min(100% - (var(--gutter) * 2), var(--col-page));
  margin-inline: auto;
}

/* ── .segmented — segmenterad kontroll (A/B-växling, scenarioväxlare) ── */
.segmented {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.segmented__btn {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-ink);
  background: var(--brand-paper);
  border: 0;
  padding: var(--space-2) var(--space-4);
  min-height: 44px;
  cursor: pointer;
}
.segmented__btn + .segmented__btn { border-left: 1px solid var(--brand-line); }
.segmented__btn[aria-pressed="true"],
.segmented__btn[aria-selected="true"] {
  background: var(--brand-surface);
  color: var(--brand-primary);
  box-shadow: inset 0 -2px 0 var(--brand-primary);
}
.segmented__btn:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -2px; }

/* ── .chips — valbara etiketter (filter, enhetsväljare) ── */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-ink);
  background: var(--brand-paper);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-lg);
  padding: var(--space-2) var(--space-4);
  min-height: 44px;
  cursor: pointer;
}
.chip[aria-pressed="true"] {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  background: var(--brand-tint);
}
.chip:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

/* ── .range — reglaget (kalkylator, where-you-fall) ── */
.range { display: grid; gap: var(--space-2); }
.range__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-muted);
}
.range input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  background: transparent;
  cursor: pointer;
}
.range input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--brand-line);
  border-radius: var(--radius-xs);
}
.range input[type="range"]::-moz-range-track {
  height: 4px;
  background: var(--brand-line);
  border-radius: var(--radius-xs);
}
.range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px; height: 22px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--brand-primary);
  border: 2px solid var(--brand-paper);
  box-shadow: var(--shadow-1);
}
.range input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--brand-primary);
  border: 2px solid var(--brand-paper);
  box-shadow: var(--shadow-1);
}
.range input[type="range"]:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 4px; }
.range output {
  font-family: var(--brand-display-font);
  font-size: var(--text-xl);
  letter-spacing: -0.02em;
  color: var(--brand-ink);
}

/* ── .kronika — zon 3: händelser och röster flätade på en tidsaxel ──
   Vertikal, mobil-först. En post är en händelse eller ett citat;
   citatet är en POST i förloppet, inte ett sidoblock. */
.kronika { display: grid; gap: var(--space-5); padding-left: var(--space-5); position: relative; }
.kronika::before {
  content: "";
  position: absolute;
  left: 0; top: var(--space-2); bottom: var(--space-2);
  width: 2px;
  background: var(--brand-line);
}
.kronika__entry { position: relative; }
.kronika__entry::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-5) - 4px);
  top: 0.4em;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--brand-paper);
  border: 2px solid var(--brand-primary);
}
.kronika__date {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-muted);
  display: block;
  margin-bottom: var(--space-1);
}
.kronika__event { margin: 0; line-height: 1.6; }
.kronika__entry--quote .kronika__event {
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: 1.5;
  border-left: 3px solid var(--brand-primary);
  padding-left: var(--space-3);
}
.kronika__speaker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-muted);
  display: block;
  margin-top: var(--space-1);
}
@media (min-width: 48rem) {
  .kronika { padding-left: var(--space-7); }
  .kronika__entry::before { left: calc(-1 * var(--space-7) - 4px); }
}

/* ── .link-card — intern länk som kort ──
   Producern skriver bara <a data-internal-link data-link-card>; CMS:et
   ersätter med detta kort vid publicering — titel och tumnagel hämtas
   ur kön. Utan bild: enspaltig variant. Aldrig handskrivet i artefakten. */
.link-card {
  display: grid;
  grid-template-columns: 104px 1fr auto;
  gap: var(--space-4);
  align-items: center;
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-sm);
  background: var(--brand-paper);
  padding: var(--space-3);
  margin-block: var(--space-5);
  text-decoration: none;
  color: var(--brand-ink);
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}
.link-card:hover,
.link-card:focus-visible {
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-1);
  transform: translateY(-1px);
}
.link-card:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.link-card__thumb {
  width: 104px;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-xs);
  overflow: hidden;
  background: var(--brand-tint);
  display: block;
}
.link-card__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.link-card__body { display: grid; gap: var(--space-1); min-width: 0; }
.link-card__kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-primary);
}
.link-card__title {
  font-family: var(--brand-display-font);
  font-size: var(--text-base);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.link-card__arrow {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  color: var(--brand-primary);
  padding-right: var(--space-2);
  transition: transform 120ms ease;
}
.link-card:hover .link-card__arrow { transform: translateX(3px); }
.link-card--text { grid-template-columns: 1fr auto; }
@media (min-width: 48rem) {
  .link-card { grid-template-columns: 136px 1fr auto; }
  .link-card__thumb { width: 136px; }
  .link-card--text { grid-template-columns: 1fr auto; }
}

/* ── .ai-disclosure — transparensnoten ──
   EN definition för båda ytorna: temats sidopanel (partial) och
   artefaktens egen not. Huvudet bär punkten, metaraden bär det
   systemet faktiskt vet (källor, datum, modellnivå) — aldrig påhitt. */
.ai-disclosure {
  border: 1px solid var(--brand-line);
  border-left: 3px solid var(--brand-primary);
  border-radius: var(--radius-sm);
  background: var(--brand-surface);
  padding: var(--space-4) var(--space-5);
  margin-top: var(--space-8);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--brand-muted);
}
.ai-disclosure__head {
  display: flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-primary);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.ai-disclosure__head::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brand-primary);
  flex: none;
}
.ai-disclosure p { margin: 0; color: var(--brand-muted); }
.ai-disclosure p + p { margin-top: var(--space-2); }
.ai-disclosure__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--brand-line);
}
.ai-disclosure__meta span {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-muted);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-lg);
  padding: 2px var(--space-3);
  background: var(--brand-paper);
}