:root {
  --sidebar-width: 480px;
  --diagram-figure-background: #fafbfc;
  --diagram-figure-border: #eef0f3;
  --diagram-canvas-background: #fff;
  --diagram-text-scale: 1;
  --diagram-axis-color: #000000;
  --diagram-axis-text-color: #000000;
  --diagram-grid-color: #e5e7eb;
  --diagram-text-color: #000000;
  --diagram-bar-stroke: #000000;
  --diagram-series-0: #574595;
  --diagram-series-1: #d081a1;
  --diagram-line-series-0: var(--diagram-series-0);
  --diagram-line-series-1: var(--diagram-series-1);
  --diagram-handle-fill: #f1f1f7;
  --diagram-handle-stroke: #555555;
  --diagram-focus-outline: #1e88e5;
  --diagram-pie-stroke: #ffffff;
  --diagram-pie-divider: #ffffff;
  --diagram-pie-label-color: #000000;
  --diagram-pie-label-inside-color: #ffffff;
  --diagram-value-color: #111111;
  --diagram-value-stroke: #ffffff;
  --diagram-legend-background: #ffffff;
  --diagram-legend-text-color: #000000;
  --diagram-legend-border: #d1d5db;
  --diagram-pie-0: #4f2c8c;
  --diagram-pie-1: #6c3db5;
  --diagram-pie-2: #8a4de0;
  --diagram-pie-3: #a75cf1;
  --diagram-pie-4: #c26ef0;
  --diagram-pie-5: #d381ba;
  --diagram-pie-6: #c46287;
  --diagram-pie-7: #9f436d;
  --diagram-pie-8: #723a82;
  --diagram-pie-9: #503070;
}
.figure { border-radius: 10px; background: var(--diagram-figure-background); overflow: hidden; border: 1px solid var(--diagram-figure-border); }
.figure svg { width: 100%; height: auto; display: block; background: var(--diagram-canvas-background); }
.status {
  display: none;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-size: calc(var(--diagram-text-scale, 1) * 14px);
  line-height: 1.4;
}
.status[hidden] {
  display: none;
}
.status strong {
  display: block;
  margin-bottom: 4px;
}
.status--success {
  display: block;
  background: #ecfdf5;
  border-color: #a7f3d0;
  color: #065f46;
}
.status--error {
  display: block;
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}
.status--info {
  display: block;
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}
.settings { display: flex; flex-direction: column; gap: 8px; }
.settings input, .settings select { width: 100%; }
.settings fieldset { border: 1px solid #e5e7eb; border-radius: 10px; padding: 10px; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.settings legend { font-weight: 600; font-size: 13px; color: #374151; padding: 0 4px; }
.settings-row { display: flex; gap: 8px; }
.settings-row label { flex: 1; }
.series-settings { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.series-settings fieldset { flex: 1 1 220px; min-width: 200px; }
.series-settings .addFigureBtn { width: clamp(40px, 8vw, 60px); aspect-ratio: 1; border: 2px dashed #cfcfcf; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #6b7280; cursor: pointer; align-self: center; }
.series-settings .addFigureBtn:hover { box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.series-settings .addFigureBtn:active { transform: translateY(1px); }
.series-settings__controls { display: flex; gap: 10px; align-items: center; align-self: center; }
.color-picker-label { display: flex; flex-direction: column; gap: 8px; }
.color-picker { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.color-swatch { width: 34px; height: 34px; border-radius: 999px; border: 2px solid transparent; background: var(--swatch-fill, #fff); cursor: pointer; --swatch-elevation: 0 3px 6px rgba(15,23,42,.16); }
.color-swatch:focus-visible { outline: 3px solid rgba(99,102,241,.45); outline-offset: 2px; }
.color-options { position: absolute; top: 44px; left: 0; z-index: 10; display: grid; grid-template-columns: repeat(3, 34px); gap: 8px; padding: 10px; border-radius: 12px; background: #fff; border: 1px solid #e5e7eb; box-shadow: 0 10px 20px rgba(15,23,42,.15); }
.color-options[hidden] { display: none !important; }
.color-option-btn { width: 34px; height: 34px; border-radius: 999px; border: 0; background: transparent; cursor: pointer; }
.color-option-btn.is-selected { --swatch-outer-ring: 0 0 0 3px rgba(15,23,42,.2); }
#chartTitle { text-align: center; font-size: calc(var(--diagram-text-scale, 1) * 20px); margin: 0 0 6px; }

/* Akser og rutenett */
.axis{stroke:var(--diagram-axis-color);stroke-width:3.5;fill:none}
.axis-group{pointer-events:none}
.axis-arrow{fill:none;stroke:var(--diagram-axis-color);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.axis-label-text{fill:var(--diagram-axis-text-color);font-weight:600;letter-spacing:.02em;font-size:calc(var(--diagram-text-scale, 1) * 20px);dominant-baseline:middle}
.gridline{stroke:var(--diagram-grid-color);stroke-width:1;opacity:1}
.yTickText{fill:var(--diagram-text-color);font-size:calc(var(--diagram-text-scale, 1) * 20px);text-anchor:end}
.xLabel{fill:var(--diagram-text-color);font-size:calc(var(--diagram-text-scale, 1) * 20px);text-anchor:middle}

/* Søyler + vurderingsrammer */
.bar{stroke:none;stroke-width:0;opacity:1;fill-opacity:1}
.bar.series0{fill:var(--diagram-series-0)}
.bar.series1{fill:var(--diagram-series-1)}
.bar.badge-ok{stroke:none;stroke-width:0}
.bar.badge-no{stroke:none;stroke-width:0}
.pie-slice.badge-ok{stroke:#2e7d32;stroke-width:4}
.pie-slice.badge-no{stroke:#c62828;stroke-width:4}

/* Linjediagram */
.line{fill:none;stroke-width:4}
.line.series0{stroke:var(--diagram-line-series-0)}
.line.series1{stroke:var(--diagram-line-series-1)}
.line-dot.series0{fill:var(--diagram-line-series-0)}
.line-dot.series1{fill:var(--diagram-line-series-1)}

/* Legend */
.legend-root{font-size:calc(var(--diagram-text-scale, 1) * 20px)}
.legend-frame{fill:var(--diagram-legend-background,#ffffff);stroke:var(--diagram-legend-border,var(--diagram-legend-text-color,#000000));stroke-width:1.5}
.legendbox.series0{fill:var(--diagram-series-0)}
.legendbox.series1{fill:var(--diagram-series-1)}
.legendtext{fill:var(--diagram-legend-text-color,#000000);font-size:calc(var(--diagram-text-scale, 1) * 20px)}
.legend-separator{fill:var(--diagram-legend-text-color,#000000);font-size:calc(var(--diagram-text-scale, 1) * 20px)}

/* Håndtak */
.handle{cursor:grab;user-select:none;touch-action:none}
.handle.is-grabbing{cursor:grabbing}

/* Sektordiagram */
.pie-slice{stroke:var(--diagram-pie-stroke);stroke-width:2;cursor:pointer}
.pie-divider{stroke:var(--diagram-pie-divider);stroke-width:2;stroke-dasharray:6 6;opacity:.6}
.pie-label{fill:var(--diagram-pie-label-color);font-size:calc(var(--diagram-text-scale, 1) * 20px);font-weight:600;pointer-events:none}
.pie-label--inside{fill:var(--diagram-pie-label-inside-color);text-shadow:0 1px 2px rgba(0,0,0,.4)}
.pie-label__value{font-size:calc(var(--diagram-text-scale, 1) * 20px);font-weight:400;pointer-events:none}
.pie-slice-0{fill:var(--diagram-pie-0)}
.pie-slice-1{fill:var(--diagram-pie-1)}
.pie-slice-2{fill:var(--diagram-pie-2)}
.pie-slice-3{fill:var(--diagram-pie-3)}
.pie-slice-4{fill:var(--diagram-pie-4)}
.pie-slice-5{fill:var(--diagram-pie-5)}
.pie-slice-6{fill:var(--diagram-pie-6)}
.pie-slice-7{fill:var(--diagram-pie-7)}
.pie-slice-8{fill:var(--diagram-pie-8)}
.pie-slice-9{fill:var(--diagram-pie-9)}

/* Verdi‐tekst over søyle (ikke-interaktiv) */
.value{fill:var(--diagram-value-color);font-size:calc(var(--diagram-text-scale, 1) * 16px);text-anchor:middle;paint-order:stroke fill;stroke:var(--diagram-value-stroke);stroke-width:6;pointer-events:none}
.value-fo{overflow:visible;pointer-events:none}
.value.value--html{color:var(--diagram-value-color);font-size:calc(var(--diagram-text-scale, 1) * 16px);justify-content:center;text-align:center;text-shadow:0 0 6px var(--diagram-value-stroke),0 0 2px var(--diagram-value-stroke);font-weight:500;}
.value.value--html .katex{pointer-events:none}
.label-draggable{pointer-events:auto;cursor:grab;touch-action:none;user-select:none}
.label-draggable.is-dragging{cursor:grabbing}

/* Låsing */
.bar.locked{cursor:not-allowed}
.handle.locked{fill:#e5e7eb;cursor:not-allowed}
.pie-slice.locked{cursor:not-allowed}

/* Fokus + tastatur (A11y-overlay) */
.a11y{cursor:ns-resize;fill:transparent;stroke:none}
.a11y:focus{outline:none;stroke:var(--diagram-focus-outline);stroke-width:3}

.xAxisLabel{fill:var(--diagram-text-color);font-size:calc(var(--diagram-text-scale, 1) * 20px);text-anchor:middle}

.alt-text{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.alt-text label{font-size:13px;color:#4b5563;font-weight:600}
.alt-text textarea{min-height:104px;padding:10px;border:1px solid #d1d5db;border-radius:10px;font-size:14px;font-family:inherit;resize:vertical;background:#fff;color:#111}
.alt-text textarea:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.15)}
.alt-text__footer{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.alt-text__status{font-size:12px;color:#6b7280;min-height:18px;flex:1}
.alt-text__status.alt-text__status--error{color:#b91c1c}
.alt-text__status-action{display:inline-block;margin-left:8px;padding:2px 8px;font-size:12px;line-height:1.4;border:1px solid #d1d5db;border-radius:4px;background-color:#fff;color:inherit;cursor:pointer}
.alt-text__status.alt-text__status--error .alt-text__status-action{border-color:#fca5a5}
.alt-text__status-action+.alt-text__status-action{margin-left:6px}