/* ============================================
   Diagram-bibliotek (src/components/charts): ChartFrame + primitiver.
   Ingen hydration, ingen farver uden om design-tokens. Tal saettes i
   Roboto Mono med tabulaere cifre, saa kolonner staar lige.
   Sekventielle nuancer laves med color-mix fra --deep-green og --cta.
   ============================================ */

.ffc {
  --ffc-1: var(--deep-green);
  --ffc-2: var(--cta);
  /* WCAG 1.4.11 kraever 3:1 for grafiske elementer. Soejler og segmenter ligger paa
     cream-track'et (#EFE6D6), som er det haardeste af de to underlag, saa tallene
     nedenfor er maalt der OG paa kortets hvide bund.
     --gold #E6B560:  1,52:1 mod cream / 1,88:1 mod hvid  -> faldt igennem.
     #A8761E:         3,22:1 mod cream / 3,98:1 mod hvid  -> bestaar begge.
     Bemaerk: en lysere guld i stil med #B8862B (2,62:1) eller #C08A2E (2,45:1) klarer
     kun den hvide bund, ikke cream-track'et, saa vi gaar en tand moerkere.
     Kun overstyret HER: det globale --gold bruges af hele sitet og roeres ikke. */
  --ffc-3: #A8761E;
  --ffc-4: var(--info);
  --ffc-5: color-mix(in srgb, var(--deep-green) 55%, var(--white));
  --ffc-6: color-mix(in srgb, var(--cta) 55%, var(--white));
  /* Afledt af --ffc-3, ikke af det globale --gold: 3 og 7 skal blive ved med at vaere
     samme farve i to lysheder. Giver #CBAD78 (1,73:1 mod cream) mod #F0D3A0 (1,51:1).
     De lyse nuancer 5 til 8 naar ikke 3:1 og kan ikke goere det uden at holde op med
     at vaere lyse nuancer: derfor har baade segmenter og legende-prikker en kant. */
  --ffc-7: color-mix(in srgb, var(--ffc-3) 60%, var(--white));
  --ffc-8: color-mix(in srgb, var(--info) 55%, var(--white));
  /* color-mix(--fg-3 45%, white) gav #C3BCBA: 1,51:1 mod cream / 1,87:1 mod hvid.
     #877E7A: 3,20:1 mod cream / 3,97:1 mod hvid. */
  --ffc-muted: #877E7A;
  --ffc-grid: color-mix(in srgb, var(--line) 80%, transparent);
  /* Grid, ikke block: <figcaption> SKAL vaere direkte barn af <figure> (a11y), men
     kilde og knapper skal stadig staa side om side i bunden. To kolonner + en regel
     om at alle andre boern spaender begge kolonner giver praecis det, uden wrapper. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: start;
  margin: 36px 0;
  padding: 26px 26px 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  color: var(--fg-1);
}
figure.ffc > * { grid-column: 1 / -1; min-width: 0; }
@media (max-width: 600px) {
  .ffc { padding: 20px 16px 16px; margin: 28px -4px; }
}

.ffc-head { margin: 0 0 18px; }
.ffc-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  color: var(--fg-1);
}
.ffc-sub { font-size: 13.5px; color: var(--fg-3); margin: 0; }

.ffc-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ffc-svg text {
  font-family: 'Epilogue', system-ui, sans-serif;
  font-size: 12px;
  fill: var(--fg-2);
}
.ffc-svg .ffc-num {
  font-family: 'Roboto Mono', ui-monospace, monospace;
  font-feature-settings: 'tnum';
  font-size: 12px;
  fill: var(--fg-1);
}
.ffc-svg .ffc-axis { stroke: var(--ffc-grid); stroke-width: 1; }
.ffc-svg .ffc-axis-strong { stroke: var(--line-strong); stroke-width: 1; }

/* HTML-baserede bar-raekker (BarChart) */
.ffc-rows { display: flex; flex-direction: column; gap: 10px; }
.ffc-row {
  display: grid;
  grid-template-columns: minmax(120px, 190px) 1fr auto;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}
@media (max-width: 560px) {
  .ffc-row { grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 3px 10px; }
  .ffc-row-label { grid-column: 1 / -1; }
  .ffc-row-track { grid-column: 1; }
  .ffc-row-value { grid-column: 2; grid-row: 2; }
}
.ffc-row-label { color: var(--fg-2); font-weight: 500; line-height: 1.3; }
.ffc-row-track {
  position: relative;
  height: 12px;
  background: var(--cream);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.ffc-row-bar { height: 100%; border-radius: var(--r-sm); background: var(--ffc-1); }
.ffc-row[data-tone="accent"] .ffc-row-bar { background: var(--ffc-2); }
.ffc-row[data-tone="gold"] .ffc-row-bar { background: var(--ffc-3); }
.ffc-row[data-tone="info"] .ffc-row-bar { background: var(--ffc-4); }
.ffc-row[data-tone="muted"] .ffc-row-bar { background: var(--ffc-muted); }
.ffc-row-value {
  font-family: 'Roboto Mono', ui-monospace, monospace;
  font-feature-settings: 'tnum';
  font-size: 13.5px;
  font-weight: 500;
  color: var(--fg-1);
  text-align: right;
  white-space: nowrap;
}

/* Referencelinje (threshold) i BarChart */
.ffc-row-thr {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 0;
  border-left: 2px dashed color-mix(in srgb, var(--fg-2) 60%, transparent);
  transform: translateX(-1px);
}
.ffc-thr-legend {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  font-size: 12.5px;
  color: var(--fg-3);
}
.ffc-thr-legend i { width: 18px; border-top: 2px dashed color-mix(in srgb, var(--fg-2) 60%, transparent); }

/* 100 %-stablet andels-diagram (ShareChart) */
.ffc-share-bar {
  display: flex;
  width: 100%;
  height: 34px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--cream);
}
.ffc-share-seg { height: 100%; min-width: 2px; }
/* WCAG 1.4.1: nabosegmenter maa ikke kun adskilles paa farve. En hvid hairline
   virker paa alle otte serie-farver + muted, som alle er moerkere end hvid. */
.ffc-share-seg + .ffc-share-seg { box-shadow: inset 1.5px 0 0 var(--white); }
.ffc-share-seg[data-i="1"] { background: var(--ffc-1); }
.ffc-share-seg[data-i="2"] { background: var(--ffc-2); }
.ffc-share-seg[data-i="3"] { background: var(--ffc-3); }
.ffc-share-seg[data-i="4"] { background: var(--ffc-4); }
.ffc-share-seg[data-i="5"] { background: var(--ffc-5); }
.ffc-share-seg[data-i="6"] { background: var(--ffc-6); }
.ffc-share-seg[data-i="7"] { background: var(--ffc-7); }
.ffc-share-seg[data-i="8"] { background: var(--ffc-8); }
.ffc-share-seg[data-i="rest"] { background: var(--ffc-muted); }

figure.ffc .ffc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13.5px;
  color: var(--fg-2);
}
figure.ffc .ffc-legend > li { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 0; list-style: none; }
/* Artikel-/PSL-brødtekst giver li::before-bullets; legenden skal ikke have dem */
figure.ffc .ffc-legend > li::before, figure.ffc .ffc-legend > li::marker { content: none; display: none; }
.ffc-legend i { width: 12px; height: 12px; border-radius: 3px; flex: none; }
/* De lyse nuancer (--ffc-6/7/8 ligger paa 1,9 til 2,6:1 mod hvid) ville ellers
   flyde ud i kortets bund. Kanten giver dem en synlig afgraensning. */
.ffc-legend i { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg-1) 24%, transparent); }
.ffc-legend i[data-i="1"] { background: var(--ffc-1); }
.ffc-legend i[data-i="2"] { background: var(--ffc-2); }
.ffc-legend i[data-i="3"] { background: var(--ffc-3); }
.ffc-legend i[data-i="4"] { background: var(--ffc-4); }
.ffc-legend i[data-i="5"] { background: var(--ffc-5); }
.ffc-legend i[data-i="6"] { background: var(--ffc-6); }
.ffc-legend i[data-i="7"] { background: var(--ffc-7); }
.ffc-legend i[data-i="8"] { background: var(--ffc-8); }
.ffc-legend i[data-i="rest"] { background: var(--ffc-muted); }
.ffc-legend b {
  font-family: 'Roboto Mono', ui-monospace, monospace;
  font-feature-settings: 'tnum';
  font-weight: 500;
  color: var(--fg-1);
}

/* Linje-serier (LineChart) */
.ffc-line { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.ffc-line[data-i="1"] { stroke: var(--ffc-1); }
.ffc-line[data-i="2"] { stroke: var(--ffc-2); }
.ffc-line[data-i="3"] { stroke: var(--ffc-3); }
.ffc-line[data-i="4"] { stroke: var(--ffc-4); }
.ffc-line[data-i="5"] { stroke: var(--ffc-5); }
.ffc-line[data-i="6"] { stroke: var(--ffc-6); }
.ffc-line[data-i="7"] { stroke: var(--ffc-7); }
.ffc-line[data-i="8"] { stroke: var(--ffc-8); }
.ffc-dot[data-i="1"] { fill: var(--ffc-1); }
.ffc-dot[data-i="2"] { fill: var(--ffc-2); }
.ffc-dot[data-i="3"] { fill: var(--ffc-3); }
.ffc-dot[data-i="4"] { fill: var(--ffc-4); }
.ffc-dot[data-i="5"] { fill: var(--ffc-5); }
.ffc-dot[data-i="6"] { fill: var(--ffc-6); }
.ffc-dot[data-i="7"] { fill: var(--ffc-7); }
.ffc-dot[data-i="8"] { fill: var(--ffc-8); }

/* Tidslinje (Timeline) */
figure.ffc .ffc-timeline { list-style: none; margin: 0; padding: 0 0 0 22px; position: relative; counter-reset: none; }
figure.ffc .ffc-timeline::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--line-strong);
}
figure.ffc .ffc-timeline > .ffc-tl-item { position: relative; padding: 0 0 18px; margin: 0; }
figure.ffc .ffc-timeline > .ffc-tl-item:last-child { padding-bottom: 0; }
figure.ffc .ffc-timeline > .ffc-tl-item::before {
  content: '';
  position: absolute;
  left: -21px;
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ffc-2);
  border: 2px solid var(--white);
  box-shadow: 0 0 0 2px var(--ffc-2);
}
figure.ffc .ffc-timeline > .ffc-tl-item[data-tone="muted"]::before { background: var(--ffc-muted); box-shadow: 0 0 0 2px var(--ffc-muted); }
figure.ffc .ffc-timeline > .ffc-tl-item[data-tone="primary"]::before { background: var(--ffc-1); box-shadow: 0 0 0 2px var(--ffc-1); }
.ffc-tl-when {
  font-family: 'Roboto Mono', ui-monospace, monospace;
  font-feature-settings: 'tnum';
  font-size: 12.5px;
  font-weight: 500;
  color: var(--fg-3);
  letter-spacing: 0.02em;
}
.ffc-tl-title { font-weight: 700; font-size: 15px; margin: 2px 0 2px; color: var(--fg-1); }
.ffc-tl-body { font-size: 14px; color: var(--fg-2); margin: 0; line-height: 1.5; }

/* Trin-flow (FlowChart) */
figure.ffc .ffc-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  counter-reset: ffc-step;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
figure.ffc .ffc-flow > .ffc-flow-step {
  margin: 0;
  position: relative;
  counter-increment: ffc-step;
  padding: 16px 14px 14px;
  background: var(--cream);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-on-cream);
}
figure.ffc .ffc-flow > .ffc-flow-step::before {
  content: counter(ffc-step);
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ffc-1);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 8px;
}
figure.ffc .ffc-flow > .ffc-flow-step::after {
  content: '';
  position: absolute;
  right: -9px;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 7px solid var(--line-strong);
  transform: translateY(-50%);
}
figure.ffc .ffc-flow > .ffc-flow-step:last-child::after { display: none; }
@media (max-width: 560px) {
  figure.ffc .ffc-flow { grid-template-columns: 1fr; }
  figure.ffc .ffc-flow > .ffc-flow-step::after { display: none; }
}
.ffc-flow-title { font-weight: 700; font-size: 15px; margin: 0 0 4px; color: var(--fg-1); }
.ffc-flow-body { font-size: 13.5px; color: var(--fg-2); margin: 0; line-height: 1.5; }

/* Data-fallback: tabel */
.ffc-details { margin: 14px 0 0; font-size: 14px; }
.ffc-details summary {
  cursor: pointer;
  color: var(--fg-2);
  font-weight: 600;
  font-size: 13.5px;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ffc-details summary::-webkit-details-marker { display: none; }
.ffc-details summary::before { content: '+'; font-weight: 700; color: var(--accent); }
.ffc-details[open] summary::before { content: '\2212'; }
.ffc-table-wrap { overflow-x: auto; margin-top: 10px; }
.ffc-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ffc-table th, .ffc-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.ffc-table th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fg-3); font-weight: 700; }
.ffc-table td.ffc-num, .ffc-table th.ffc-num {
  text-align: right;
  font-family: 'Roboto Mono', ui-monospace, monospace;
  font-feature-settings: 'tnum';
}

/* Kilde og handlinger: to grid-celler i samme raekke, ikke en flex-wrapper.
   Ingen column-gap paa figuren, saa de to border-top'e moedes som én linje. */
figure.ffc > .ffc-cap {
  grid-column: 1;
  align-self: center;
  padding: 12px 16px 0 0;
}
figure.ffc > .ffc-actions {
  grid-column: 2;
  align-self: center;
  justify-self: end;
  padding-top: 12px;
}
figure.ffc > .ffc-cap,
figure.ffc > .ffc-actions {
  margin-top: 16px;
  border-top: 1px solid var(--line);
}
@media (max-width: 520px) {
  /* Smal skaerm: knapperne under kilden, uden dobbelt streg. */
  figure.ffc > .ffc-cap { grid-column: 1 / -1; padding-right: 0; }
  figure.ffc > .ffc-actions {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 10px;
    padding-top: 0;
    border-top: 0;
  }
}
.ffc-cap { font-size: 12.5px; color: var(--fg-3); margin: 0; line-height: 1.45; }
.ffc-cap a { color: var(--fg-2); text-decoration: underline; text-underline-offset: 2px; }
.ffc-note { font-size: 12.5px; color: var(--fg-3); margin: 8px 0 0; }
.ffc-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ffc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--pill);
  background: var(--white);
  color: var(--fg-2);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.ffc-btn:hover { background: var(--cream); color: var(--fg-1); }
/* Eksplicit fokusring: knapperne er en <a> og en <button> paa hvid bund, hvor
   browserens default-ring er svaer at se. --accent (#A8385A) giver 6,2:1 paa hvid. */
.ffc-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ffc-btn[data-done="1"] { border-color: var(--success); color: var(--success); }

/* Skjult for oejet, laest af skaermlaesere */
.ffc-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}