/* /vis/alberta: the form of the Alberta referendum page. Colours come from
 * /vis/vis.css; this file names none. Mobile first, one column, designed at
 * 360 px and never wider than 760 px.
 *
 * Three series, and the colour never carries the series alone: «Bli verande»
 * is a filled blue DOT, «Starte prosessen» a filled orange SQUARE, «Usikre» a
 * small hollow grey RING. The result, once counted, is a larger diamond with
 * an ink edge. The same three shapes are the legend, the panel and the card.
 *
 * The series take /vis/mm's existing category steps (--k-uthald, --k-ball,
 * --graa), which already clear 3:1 on the panel in both schemes, so no new
 * colour token was added. */

.ab-bli { --k: var(--k-uthald); }
.ab-start { --k: var(--k-ball); }
.ab-usikre { --k: var(--graa); }

/* ── page ──────────────────────────────────────────────────────────────── */
.ab-side { max-width: 760px; margin: 0 auto; padding: 12px 16px 72px; }
.ab-side h1 {
  font-family: var(--font-disp); font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(2.1rem, 8vw, 3.4rem); line-height: 1; margin: 4px 0 14px;
}
.ab-side h2 {
  font-family: var(--font-disp); font-weight: 700;
  font-size: clamp(1.4rem, 4.5vw, 1.9rem); line-height: 1.15; margin: 0 0 8px;
}
.ab-side h3 { font-size: 0.9375rem; margin: 18px 0 6px; }
.ab-side p { margin: 0 0 10px; }

.ab-sti {
  font-size: 13px; color: var(--muted); min-height: 44px;
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.ab-sti a { color: var(--muted); padding: 10px 0; }
.ab-sti a:hover { color: var(--lenke); }

.ab-hovud { margin: 8px 0 28px; }
.ab-auge { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gull); }
.ab-leiar { font-family: var(--font-disp); font-size: clamp(1.2rem, 4vw, 1.5rem); line-height: 1.3; max-width: 36ch; }
.ab-snitt { color: var(--muted); max-width: 60ch; }

.ab-seksjon { margin: 0 0 36px; }
.ab-intro { color: var(--muted); max-width: 62ch; }
.ab-merknad { color: var(--muted); font-size: 0.875rem; max-width: 66ch; }
.ab-merknad-rad { display: block; font-weight: 400; color: var(--muted); font-size: 0.8125rem; }

/* ── legend and markers ────────────────────────────────────────────────── */
.ab-teikn { list-style: none; padding: 0; margin: 10px 0 12px; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.875rem; }
.ab-teikn li { display: flex; align-items: center; gap: 6px; }
.ab-merke { display: inline-block; width: 12px; height: 12px; background: var(--k); border-radius: 50%; flex: none; }
.ab-merke.ab-start { border-radius: 2px; }
.ab-merke.ab-usikre { background: transparent; border: 2px solid var(--k); width: 10px; height: 10px; }
.ab-merke.ab-resultat { --k: var(--ink); border-radius: 1px; transform: rotate(45deg); width: 11px; height: 11px; }

/* ── the chart ─────────────────────────────────────────────────────────── */
.ab-kort {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 14px 12px 12px;
}
.ab-graf { position: relative; padding: 0 0 22px 28px; touch-action: pan-y; cursor: crosshair; border-radius: 8px; }
.ab-flate { position: relative; height: clamp(240px, 62vw, 360px); }
.ab-rute { position: absolute; left: 0; right: 0; border-top: 1px solid var(--rutenett); }
.ab-rute span {
  position: absolute; right: 100%; top: -0.6em; padding-right: 6px;
  font-size: 11px; color: var(--graa); white-space: nowrap; font-variant-numeric: tabular-nums;
}
.ab-xakse { position: absolute; left: 28px; right: 0; bottom: 0; height: 18px; font-size: 11px; color: var(--graa); }
.ab-xakse span { position: absolute; transform: translateX(-50%); top: 2px; }
.ab-band {
  position: absolute; top: 0; bottom: 0;
  background: repeating-linear-gradient(135deg, var(--rutenett) 0 2px, transparent 2px 7px);
}
.ab-band span {
  position: absolute; top: 4px; left: 50%; transform: translateX(-50%);
  font-size: 11px; color: var(--muted); background: var(--panel); padding: 0 4px; white-space: nowrap;
}
.ab-valdag { position: absolute; top: 0; bottom: 0; border-left: 2px dashed var(--muted); }
/* The label sits in the empty band between the two series (no share there
 * in any poll), to the LEFT of the line, so it never runs off the plot. */
.ab-valdag span {
  position: absolute; right: 6px; top: 46%; font-size: 11px; line-height: 1.25; color: var(--ink);
  background: var(--panel); padding: 2px 4px; text-align: right;
}
.ab-kolonne { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid var(--line); }
.ab-linjer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ab-linje { fill: none; stroke: var(--k); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }

.ab-p {
  position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  background: var(--k); border-radius: 50%; pointer-events: none;
  outline: 1.5px solid var(--panel);
}
.ab-p.ab-start { border-radius: 1px; }
.ab-p.ab-usikre { background: var(--panel); border: 2px solid var(--k); width: 8px; height: 8px; margin: -4px 0 0 -4px; outline: 0; }
.ab-p.ab-valt { width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; outline: 2px solid var(--ink); z-index: 2; }
.ab-p.ab-usikre.ab-valt { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; }
.ab-p.ab-resultat {
  width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 1px;
  transform: rotate(45deg); outline: 2px solid var(--ink); z-index: 3;
}
.ab-p.ab-av { display: none; }

/* ── icons ─────────────────────────────────────────────────────────────
 * One line set from lib/vis-alberta.js, in currentColor. In a heading the
 * icon takes the gold eyebrow colour so the eye finds sections by it. */
.ab-ikon { width: 1em; height: 1em; flex: none; }
.ab-side h2 { display: flex; align-items: center; gap: 10px; }
.ab-side h2 > .ab-ikon { width: 0.9em; height: 0.9em; color: var(--gull); }

/* ── the question, as a flow ─────────────────────────────────────────── */
.ab-flyt {
  list-style: none; padding: 0; margin: 12px 0 0;
  display: grid; gap: 10px; grid-template-columns: 1fr; counter-reset: none;
}
@media (min-width: 720px) { .ab-flyt { grid-template-columns: repeat(5, 1fr); gap: 8px; } }
.ab-steg-kort {
  position: relative; display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: start;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px;
}
@media (min-width: 720px) { .ab-steg-kort { grid-template-columns: 1fr; row-gap: 6px; } }
.ab-steg-kort b { font-size: 0.9375rem; line-height: 1.25; }
.ab-steg-kort > span:not(.ab-steg-nr) { grid-column: 2; color: var(--muted); font-size: 0.8125rem; line-height: 1.35; }
@media (min-width: 720px) { .ab-steg-kort > span:not(.ab-steg-nr) { grid-column: 1; } }
.ab-steg-ikon { width: 28px; height: 28px; color: var(--muted); grid-row: span 2; }
@media (min-width: 720px) { .ab-steg-ikon { grid-row: auto; } }
.ab-steg-nr {
  position: absolute; top: 8px; right: 10px; font-size: 0.75rem; font-weight: 700;
  color: var(--graa); font-variant-numeric: tabular-nums;
}
.ab-steg-no { border: 2px solid var(--gull); }
.ab-steg-no .ab-steg-ikon { color: var(--gull); }
.ab-steg-merke {
  grid-column: 2; justify-self: start; margin-top: 6px; font-style: normal; font-size: 0.75rem; font-weight: 700;
  color: var(--ink); border: 1px solid var(--gull); border-radius: 999px; padding: 1px 8px; white-space: nowrap;
}
@media (min-width: 720px) { .ab-steg-merke { grid-column: 1; } }

/* ── Alberta beside Norway, as shapes ────────────────────────────────── */
.ab-noreg { display: grid; gap: 18px; margin: 12px 0; }
@media (min-width: 640px) { .ab-noreg { grid-template-columns: 1fr 1fr; } }
.ab-noreg-eyebrow { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; font-weight: 600; color: var(--muted); margin: 0 0 8px !important; }
.ab-ab { --k: var(--k-uthald); }
.ab-no { --k: var(--graa); }
.ab-ruter { display: flex; align-items: flex-end; gap: 14px; }
.ab-rute-boks { margin: 0; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.ab-rute-areal { aspect-ratio: 1; background: var(--k); border-radius: 4px; max-width: 100%; }
.ab-rute-boks figcaption { margin-top: 6px; font-size: 0.8125rem; line-height: 1.3; }
.ab-rute-boks figcaption span { display: block; color: var(--muted); font-variant-numeric: tabular-nums; }
.ab-folk { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ab-folk li { display: grid; grid-template-columns: 4.5rem 1fr auto; gap: 8px; align-items: center; font-size: 0.875rem; }
.ab-folk-spor { height: 14px; background: var(--rutenett); border-radius: 4px; overflow: hidden; }
.ab-folk-bar { display: block; height: 100%; background: var(--k); border-radius: 4px; }
.ab-folk-tal { font-variant-numeric: tabular-nums; font-weight: 600; }
.ab-noreg-liten { color: var(--muted); font-size: 0.8125rem; margin: 10px 0 0 !important; }

/* ── the sparkline ─────────────────────────────────────────────────────
 * A small indicator under the lead, not a chart: 150×36, the two averages
 * on the chart's own 0–80 % scale, the end values beside it. One link down
 * to the chart, so the whole row is one tap target. */
.ab-spark {
  display: inline-flex; align-items: center; gap: 12px; margin: 10px 0 14px;
  min-height: 44px; padding: 4px 10px 4px 4px; border-radius: 10px;
  color: var(--ink); text-decoration: none;
}
.ab-spark:hover { background: var(--hover); }
.ab-spark-flate { position: relative; flex: none; width: 150px; height: 36px; border-bottom: 1px solid var(--line); }
.ab-spark-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ab-spark .ab-linje { stroke-width: 2; }
.ab-spark-band {
  position: absolute; top: 0; bottom: 0;
  background: repeating-linear-gradient(135deg, var(--rutenett) 0 2px, transparent 2px 5px);
}
.ab-spark-valdag { position: absolute; right: 0; top: 0; bottom: 0; border-left: 1.5px dashed var(--muted); }
.ab-spark-res {
  position: absolute; right: -5px; width: 9px; height: 9px; margin-top: -4.5px;
  background: var(--k); transform: rotate(45deg); outline: 1.5px solid var(--ink);
}
.ab-spark-tala { display: grid; gap: 2px; font-size: 0.875rem; line-height: 1.2; color: var(--muted); }
.ab-spark-tal { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ab-spark-tal b { color: var(--ink); font-variant-numeric: tabular-nums; }
.ab-spark-tal .ab-merke { width: 9px; height: 9px; }

/* ── the map ───────────────────────────────────────────────────────────
 * Alberta takes the remain blue as its fill only because it is the subject;
 * its NAME is on the map too. Québec is an outline in the gold the page
 * already uses for its eyebrow, also named. */
.ab-kart { position: relative; width: 100%; }
.ab-kart-svg { display: block; width: 100%; height: 100%; }
.ab-prov { fill: var(--rutenett); stroke: var(--panel); stroke-width: 1.5; stroke-linejoin: round; cursor: pointer; }
.ab-prov:hover, .ab-prov.ab-peika { fill: var(--line); }
.ab-prov-alberta, .ab-prov-alberta:hover, .ab-prov-alberta.ab-peika { fill: var(--k-uthald); }
.ab-prov-quebec { stroke: var(--gull); stroke-width: 3; paint-order: stroke; }
.ab-by-prikk { fill: var(--ink); stroke: var(--panel); stroke-width: 3; pointer-events: none; }
.ab-kart-namn, .ab-by {
  position: absolute; transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap;
  font-size: 12px; line-height: 1.2; padding: 1px 4px; border-radius: 4px;
}
.ab-kart-namn { font-weight: 700; font-size: 13px; }
.ab-prov-alberta-namn { color: var(--on); background: var(--k-uthald); transform: translate(-50%, -160%); }
.ab-prov-quebec-namn { color: var(--ink); background: var(--panel); border: 1px solid var(--gull); }
/* City names sit beside their dot, not on it. Edmonton and Calgary are 280 km
 * apart, under 20 px at phone width, so one goes right and one goes left. */
.ab-by { color: var(--ink); background: var(--panel); transform: translate(8px, -50%); }
.ab-by-calgary, .ab-by-ottawa { transform: translate(calc(-100% - 8px), -50%); }
.ab-by-quebec { transform: translate(-50%, -160%); }
.ab-kart-tekst { margin: 8px 0 0; min-height: 1.55em; color: var(--muted); font-size: 0.9375rem; }

/* ── Alberta beside Norway ─────────────────────────────────────────── */
.ab-samanlikning-setning { font-family: var(--font-disp); font-size: 1.125rem; max-width: 40ch; }
.ab-samanlikning td { font-variant-numeric: tabular-nums; }

/* ── has this happened before? ─────────────────────────────────────────
 * One bar per vote: stay from the left, leave from the right, a line at
 * 50 %. Alberta's row is the polling average, not a result, so it is
 * hatched and says so in words. */
.ab-fordomi { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 18px; }
.ab-fordomi-tittel span { display: block; color: var(--muted); font-size: 0.875rem; }
.ab-fordomi-bar {
  position: relative; display: flex; height: 22px; margin: 6px 0 4px;
  border-radius: 6px; overflow: hidden; background: var(--rutenett);
}
.ab-del { display: block; height: 100%; background: var(--k); }
.ab-midt { position: absolute; left: 50%; top: -2px; bottom: -2px; border-left: 2px solid var(--ink); }
.ab-fordomi-maling .ab-del {
  background: repeating-linear-gradient(135deg, var(--k) 0 6px, color-mix(in srgb, var(--k) 55%, var(--panel)) 6px 10px);
}
.ab-fordomi-tal { display: flex; justify-content: space-between; gap: 12px; font-variant-numeric: tabular-nums; font-size: 0.9375rem; margin: 0 !important; }
.ab-fordomi-tal > span { display: inline-flex; align-items: center; gap: 6px; }
.ab-fordomi-fot { color: var(--muted); font-size: 0.8125rem; margin: 2px 0 0 !important; }

/* ── detail panel and stepping ─────────────────────────────────────────── */
.ab-detalj { margin: 12px 0 0; min-height: 6.5em; }
.ab-detalj p { margin: 0 0 4px; }
.ab-detalj-tittel span { color: var(--muted); }
.ab-detalj-delar { list-style: none; padding: 0; margin: 4px 0; display: grid; gap: 2px; }
.ab-detalj-delar li { display: flex; align-items: center; gap: 8px; }
.ab-detalj-delar b { font-variant-numeric: tabular-nums; margin-left: auto; }
.ab-detalj-fot { font-size: 0.8125rem; color: var(--muted); }
.ab-detalj-fot a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
.ab-detalj-tom { color: var(--muted); }
.ab-steg { display: flex; gap: 8px; margin: 8px 0 0; }

.ab-knapp, .ab-brytar {
  min-height: 44px; min-width: 44px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  font: inherit; font-size: 0.875rem; cursor: pointer;
}
.ab-knapp:hover, .ab-brytar:hover { background: var(--hover); }

/* ── pollster toggles ──────────────────────────────────────────────────── */
.ab-byraa { border: 0; padding: 0; margin: 16px 0 8px; min-width: 0; }
.ab-byraa legend { font-weight: 600; font-size: 0.9375rem; margin: 0 0 8px; padding: 0; }
.ab-brytarar { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.ab-brytar[aria-pressed="true"] { border-color: var(--ink); }
.ab-brytar[aria-pressed="false"] { color: var(--muted); text-decoration: line-through; }
.ab-brytar-n { color: var(--muted); font-variant-numeric: tabular-nums; margin-left: 2px; }
.ab-brytar-alle { border-style: dashed; }

/* ── error ─────────────────────────────────────────────────────────────── */
.ab-feil { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 0 0 20px; background: var(--panel); }

/* ── tables ────────────────────────────────────────────────────────────── */
.ab-tekst { margin: 12px 0 0; }
.ab-tekst summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--lenke); }
.ab-rull { overflow-x: auto; }
.ab-tabell { border-collapse: collapse; width: 100%; font-size: 0.875rem; }
.ab-tabell th, .ab-tabell td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--rutenett); vertical-align: top; }
.ab-tabell thead th { color: var(--muted); font-weight: 600; }
.ab-tabell .ab-tal-k { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ab-tabell a { display: inline-block; min-width: 24px; }

/* ── the explainer and the method ──────────────────────────────────────── */
.ab-metode { border-top: 1px solid var(--line); padding: 20px 0 0; }
.ab-metode p { color: var(--muted); font-size: 0.9375rem; max-width: 66ch; }
.ab-kjelder { padding-left: 1.4em; margin: 0; font-size: 0.875rem; }
.ab-kjelder li { margin: 0 0 6px; }
.ab-kjelder li:target { background: var(--hover); }

/* ── the result ────────────────────────────────────────────────────────────
 * Three shapes and few words: where the count is, one bar for the vote, and
 * each final poll as a dot on a track with the result as a line through
 * every row. The section exists only once a result does. */
.ab-res h3 { margin-top: 24px; }
.ab-tid { list-style: none; padding: 0; margin: 4px 0 18px; display: grid; grid-template-columns: repeat(3, 1fr); }
.ab-tid-steg { position: relative; display: grid; justify-items: center; text-align: center; gap: 2px; padding-top: 18px; font-size: 0.8125rem; color: var(--muted); }
.ab-tid-steg b { font-size: 1rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.ab-tid-steg::before {
  content: ""; position: absolute; top: 6px; left: 0; right: 0; border-top: 2px dashed var(--line);
}
.ab-tid-steg:first-child::before { left: 50%; }
.ab-tid-steg:last-child::before { right: 50%; }
.ab-tid-steg.ab-ferdig::before, .ab-tid-steg.ab-no::before { border-top-style: solid; border-color: var(--ink); }
.ab-tid-steg.ab-no::before { right: 50%; }
.ab-tid-prikk {
  position: absolute; top: 0; left: 50%; width: 14px; height: 14px; margin-left: -7px;
  border-radius: 50%; background: var(--bg); border: 2px solid var(--line); box-sizing: border-box; z-index: 1;
}
.ab-ferdig .ab-tid-prikk { background: var(--ink); border-color: var(--ink); }
.ab-no .ab-tid-prikk { border-color: var(--ink); }
.ab-tid-bar { display: block; width: 72px; height: 6px; border-radius: 3px; background: var(--rutenett); overflow: hidden; margin-top: 2px; }
.ab-tid-bar span { display: block; height: 100%; background: var(--ink); }

.ab-res-bar {
  position: relative; display: flex; height: 52px; border-radius: 8px; overflow: hidden; background: var(--rutenett);
}
.ab-res-bar .ab-del { display: flex; align-items: center; padding: 0 10px; box-sizing: border-box; color: var(--on); min-width: 0; }
.ab-res-bar .ab-start { justify-content: flex-end; }
.ab-res-bar b { font-family: var(--font-disp); font-size: 1.375rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ab-res-tala { display: flex; justify-content: space-between; gap: 12px; margin: 8px 0 4px; }
.ab-res-tal { display: grid; grid-template-columns: auto 1fr; column-gap: 6px; align-items: center; margin: 0 !important; font-size: 0.875rem; color: var(--muted); }
.ab-res-tal b { grid-column: 2; color: var(--ink); font-variant-numeric: tabular-nums; }
.ab-res-tal.ab-start { text-align: right; grid-template-columns: 1fr auto; }
.ab-res-tal.ab-start .ab-merke { grid-column: 2; grid-row: 1; }
.ab-res-tal.ab-start > span:not(.ab-merke) { grid-column: 1; grid-row: 1; }
.ab-res-tal.ab-start b { grid-column: 1; }
.ab-res-fot { font-size: 0.8125rem; color: var(--muted); }

.ab-mot-teikn { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.8125rem; color: var(--muted); }
.ab-mot-teikn > span { display: inline-flex; align-items: center; gap: 6px; }
.ab-mot { list-style: none; padding: 0; margin: 6px 0 0; }
.ab-mot-rad {
  display: grid; grid-template-columns: 7rem 1fr 3rem; align-items: center; gap: 8px;
  min-height: 34px; font-size: 0.875rem;
}
.ab-mot-snitt:first-of-type, .ab-mot-maling + .ab-mot-snitt { border-top: 1px solid var(--line); }
.ab-mot-namn { line-height: 1.2; }
.ab-mot-namn small { display: block; color: var(--muted); font-size: 0.75rem; }
.ab-mot-spor { position: relative; height: 34px; background: linear-gradient(var(--rutenett), var(--rutenett)) center / 100% 2px no-repeat; }
.ab-mot-res { position: absolute; top: 0; bottom: 0; border-left: 2px solid var(--ink); margin-left: -1px; }
.ab-mot-linje { position: absolute; top: 50%; height: 2px; margin-top: -1px; background: var(--k-uthald); }
.ab-mot-p {
  position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: var(--k-uthald); box-sizing: border-box; z-index: 1;
}
.ab-mot-teikn .ab-mot-p { position: static; margin: 0; display: inline-block; }
.ab-mot-snitt .ab-mot-p, .ab-mot-snitt-merke { background: var(--panel); border: 3px solid var(--k-uthald); }
.ab-mot-res-merke { display: inline-block; width: 0; height: 14px; border-left: 2px solid var(--ink); }
.ab-mot-gap { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.ab-mot-akse {
  display: flex; justify-content: space-between; margin: 2px 0 8px !important;
  padding: 0 calc(3rem + 8px) 0 calc(7rem + 8px); font-size: 0.75rem; color: var(--graa);
}