/* Ikonsprite fra icons.svg: selve spriten er usynlig (den inneholder bare
   <symbol>-definisjoner), og hvert bruk via <use href="#ds-x"> arver farge
   fra teksten rundt. Størrelsen settes her sentralt; enkeltbruk kan overstyre
   width/height lokalt ved behov. */
.ds-icon-sprite{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}
.ds-icon{display:block;width:20px;height:20px;flex:0 0 20px;color:currentColor;fill:currentColor}

/* Felles kontrollkomponenter. Nye handlingsknapper skal bruke én av disse
   variantene i stedet for å få lokale farger, radius og tilstander. */
.ds-primary-button,.ds-secondary-button,.ds-neutral-button,.ds-destructive-button{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:var(--ui-control-height);padding:0 14px;border-radius:var(--ui-radius-pill)!important;
  font:600 var(--ui-text-base) var(--ui-font);cursor:pointer;white-space:nowrap
}
.ds-primary-button{border:0!important;background:var(--ui-primary)!important;color:var(--ui-text-on-primary)!important}
.ds-primary-button:hover:not(:disabled){background:var(--ui-primary-hover)!important}
.ds-secondary-button{border:0!important;background:rgba(85,169,255,.12)!important;color:#2951ff!important}
.ds-secondary-button:hover:not(:disabled){background:rgba(85,169,255,.22)!important;color:#173bd2!important}
.ds-neutral-button{border:1px solid var(--ui-border)!important;background:var(--ui-surface)!important;color:#313663!important}
.ds-neutral-button:hover:not(:disabled){border-color:#9da2ba!important;background:#f7f8fc!important}
.ds-destructive-button{border:0!important;background:rgba(233,50,50,.12)!important;color:#bf0000!important}
.ds-destructive-button:hover:not(:disabled){background:rgba(233,50,50,.2)!important;color:#9d0000!important}
.ds-primary-button:disabled,.ds-secondary-button:disabled,.ds-neutral-button:disabled,.ds-destructive-button:disabled{
  opacity:.42;cursor:not-allowed
}

/* Segmentvalg og små justeringsknapper har samme aktive, fokus- og deaktivert
   tilstand på tvers av editor, rutetegner og materiellgenerator. */
.ds-segment-button{min-height:40px;border:0;border-radius:var(--ui-radius-control);background:transparent;
  color:#313663;font:600 var(--ui-text-md) var(--ui-font);cursor:pointer;transition:background-color .15s ease,color .15s ease,box-shadow .15s ease}
.ds-segment-button.active,.ds-segment-button[aria-pressed="true"]{background:var(--ui-surface)!important;color:#1b3fd8!important;
  box-shadow:0 1px 4px rgba(49,54,99,.16)!important}
.ds-step-button{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:0;
  border-radius:var(--ui-radius-pill);background:rgba(54,64,153,.12);color:#313663;font-weight:700;cursor:pointer}

/* Segmented toggle group — the pill-shaped container for a small set (2-5)
   of mutually-exclusive .ds-segment-button options in one row (layout:
   vertical/wide/none). By default each segment is only as wide as its
   label; add --fixed to make every segment share the row equally instead —
   use that when the options are similarly weighted and the group should
   fill its container edge to edge. */
.ds-segment-group{display:flex;gap:4px;padding:4px;border-radius:12px;background:rgba(54,64,153,.12)}
.ds-segment-group .ds-segment-button{flex:0 0 auto}
.ds-segment-group--fixed{display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
.ds-segment-group--fixed .ds-segment-button{width:100%}

/* Chip group — for more options than a segmented group comfortably holds
   (a weekday picker, a tag list), single- or multi-select, wrapping to as
   many rows as it needs. Segments assume one row and mutual exclusivity;
   chips make no such assumption. */
.ds-chip-group{display:flex;flex-wrap:wrap;gap:5px}
.ds-chip{border:1.5px solid var(--ui-border);border-radius:var(--ui-radius-pill);padding:6px 9px;background:var(--ui-surface);
  font:700 var(--ui-text-xs) var(--ui-font);color:var(--ui-text-secondary);cursor:pointer;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease}
.ds-chip.on,.ds-chip[aria-pressed="true"]{background:var(--ui-primary);color:#fff;border-color:var(--ui-primary)}

/* Segmented grid — like .ds-segment-group, but for more mutually-exclusive
   options than comfortably fit one row: a fixed grid within the same pill
   container, wrapping to as many rows as --cols requires. Modeled on the
   source app's QR-code/north-arrow corner picker (4 options, 2 columns —
   set --cols:2 for that shape), which uses this exact grid + active
   treatment. Still single-select and still assumes every option is
   visible at once — for an open-ended, wrapping list use .ds-chip-group
   instead. */
.ds-segment-group--grid{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:4px}
.ds-segment-group--grid .ds-segment-button{width:100%}

:where(.layout-segments,.map-fit-toggle,.arrow-segments,.mapside-segments,.mode-tabs) button{
  min-height:40px;border:0!important;border-radius:var(--ui-radius-control)!important;background:transparent!important;
  color:#313663!important;font:600 var(--ui-text-md) var(--ui-font);cursor:pointer
}
:where(.layout-segments,.map-fit-toggle,.arrow-segments,.mapside-segments,.mode-tabs) button.active,
:where(.layout-segments,.map-fit-toggle,.arrow-segments,.mapside-segments,.mode-tabs) button[aria-pressed="true"]{
  background:var(--ui-surface)!important;color:#1b3fd8!important;box-shadow:0 1px 4px rgba(49,54,99,.16)!important
}
:where(.qr-scale-row,.map-adjust-grid,.preview-zoom) button{
  display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0;border:0!important;
  border-radius:var(--ui-radius-pill)!important;background:rgba(54,64,153,.12)!important;color:#313663;cursor:pointer
}

/* Icon-only button — a round tap target with just an .ds-icon inside, no
   label. Use for a toolbar/panel action that's unambiguous from the icon
   alone (close, screenshot, settings); if you'd need a tooltip to explain
   it, use a labelled button instead. */
.ds-icon-button{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;
  border:0;border-radius:var(--ui-radius-pill);background:rgba(85,169,255,.12);color:#2951ff;cursor:pointer}
.ds-icon-button:hover{background:rgba(85,169,255,.22);color:#173bd2}

/* Toggle switch — an on/off setting the user flips directly (map layer
   visible, QR code shown). Don't use this for a binary choice between two
   named options ("vertical vs. wide layout") — that's .ds-segment-button
   above; a switch is specifically for "on" vs "off" of one thing. */
.ds-switch-row{display:flex;align-items:center;gap:10px;font-weight:600;margin:10px 0 12px}
.ds-switch-row input[type="checkbox"]{appearance:none;width:48px;height:28px;border:0;border-radius:var(--ui-radius-pill);
  background:#cfd2dc;padding:4px;cursor:pointer;transition:.2s;position:relative;flex:0 0 auto}
.ds-switch-row input[type="checkbox"]::after{content:"";display:block;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.18);transition:.2s}
.ds-switch-row input[type="checkbox"]:checked{background:var(--ui-primary)}
.ds-switch-row input[type="checkbox"]:checked::after{transform:translateX(20px)}

/* Plain, continuous range — accent-color is all it takes to theme the
   native control. Fine for a value with no meaningful "steps" of its own.
   The design kit leans on the stepped slider below instead whenever the
   value actually has discrete stops, which is the more common case in this
   system (font sizes, zoom levels, percentages) — reach for this one only
   when the value is genuinely continuous. */
input[type="range"]{accent-color:var(--ui-primary)}

/* Stepped slider — the track's filled portion matches the design system
   (native accent-color styling varies too much across browsers to use on
   its own), AND the thumb genuinely locks to a fixed set of positions —
   that's the native `step` attribute's job, not CSS. Pair `step` with a
   `list`/<datalist> of the same stops so the browser also draws tick marks
   at each one (Chrome/Edge/Safari; Firefox snaps via `step` but doesn't
   draw the ticks):

     <input class="ds-stepped-slider" type="range" min="0" max="100"
            step="25" list="myTicks" value="50">
     <datalist id="myTicks">
       <option value="0"></option><option value="25"></option>
       <option value="50"></option><option value="75"></option>
       <option value="100"></option>
     </datalist>

   Needs the companion JS in components.js to keep --range-pct (the filled
   portion) in sync as the value changes. */
input.ds-stepped-slider{appearance:none;-webkit-appearance:none;width:100%;height:28px;background:transparent;cursor:pointer}
input.ds-stepped-slider::-webkit-slider-runnable-track{height:6px;border-radius:3px;
  background:linear-gradient(to right,var(--ui-primary) 0 var(--range-pct),rgba(120,120,120,.2) var(--range-pct) 100%)}
input.ds-stepped-slider::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:20px;margin-top:-7px;
  border:1px solid transparent;border-radius:999px;background:#fff;box-shadow:0 4px 10px rgba(0,0,0,.16),0 1px 3px rgba(0,0,0,.14)}
input.ds-stepped-slider::-moz-range-track{height:6px;border:0;border-radius:3px;background:rgba(120,120,120,.2)}
input.ds-stepped-slider::-moz-range-progress{height:6px;border-radius:3px;background:var(--ui-primary)}
input.ds-stepped-slider::-moz-range-thumb{width:28px;height:20px;border:0;border-radius:999px;background:#fff;
  box-shadow:0 4px 10px rgba(0,0,0,.16),0 1px 3px rgba(0,0,0,.14)}

/* Stepper, read-only display — a value the user nudges with +/- buttons but
   never types directly (a percentage bubble size, a count). */
.ds-stepper{display:flex;align-items:center;gap:8px}
.ds-stepper button{width:34px;height:34px;border:0;border-radius:999px;background:rgba(54,64,153,.12);color:#313663;
  font-weight:700;cursor:pointer;transition:background .12s,color .12s}
.ds-stepper button:hover{background:rgba(85,169,255,.22);color:#173bd2}
.ds-stepper button:active{background:rgba(85,169,255,.32)}
.ds-stepper output{min-width:52px;text-align:center;font-weight:700}

/* Stepper, editable — same +/- affordance, but the middle is a real text
   input so the user can also type an exact value (a font size in pt, a
   zoom percentage). Use this one once precision matters; use the
   read-only .ds-stepper above when it doesn't. */
.ds-stepper-editable{display:flex;align-items:center;gap:6px}
.ds-stepper-editable button{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;
  padding:0;border:0;border-radius:var(--ui-radius-pill);background:rgba(54,64,153,.12);color:#313663;cursor:pointer;
  transition:background .12s,color .12s}
.ds-stepper-editable button:hover{background:rgba(85,169,255,.22);color:#173bd2}
.ds-stepper-editable button:active{background:rgba(85,169,255,.32)}
.ds-stepper-editable input{width:64px;height:34px;border:1px solid var(--ui-border);border-radius:var(--ui-radius-control);
  text-align:center;font:600 var(--ui-text-md) var(--ui-font)}
.ds-stepper-editable input:focus{outline:none;box-shadow:var(--ui-focus-ring);border-color:var(--ui-primary)}

/* Accordion — native <details>/<summary>, no JS required. Use for a group
   of settings that's usually collapsed (advanced options, a rarely-touched
   panel section) — not for primary content the user needs to see by
   default. This is the icon-left/chevron-right variant; see README.md for
   a plainer text-label alternative. */
details.ds-accordion{border-radius:var(--ui-radius-card);overflow:hidden;border:1px solid var(--ui-border)}
details.ds-accordion>summary{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;
  background:var(--ui-surface);color:#313663;font-size:var(--ui-text-lg);font-weight:500;cursor:pointer;list-style:none}
details.ds-accordion>summary::-webkit-details-marker{display:none}
details.ds-accordion>summary::after{content:none}
details.ds-accordion>summary:hover{background:#f7f8fc}
details.ds-accordion .ds-accordion-label{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
details.ds-accordion .ds-accordion-icon{width:20px;height:20px;flex:0 0 20px;color:#313663}
details.ds-accordion .ds-accordion-chevron{display:flex;align-items:center;justify-content:center;width:28px;height:28px;
  flex:0 0 28px;margin-left:auto;border-radius:999px;background:rgba(85,169,255,.12);color:#2951ff}
details.ds-accordion .ds-accordion-chevron .ds-icon{width:17px;height:17px;transition:transform .16s ease}
details.ds-accordion[open] .ds-accordion-chevron .ds-icon{transform:rotate(180deg)}
details.ds-accordion[open] .ds-accordion-icon{color:#2951ff}
details.ds-accordion .ds-accordion-body{padding:12px}

/* Info box — a static, always-visible note inline in a panel (a hint, a
   caveat about what a setting does). Not dismissible and doesn't move —
   for that, use the toast below instead. */
.ds-infobox{display:flex;align-items:flex-start;gap:10px;background:var(--ui-surface-subtle);color:#313663;
  border-radius:var(--ui-radius-card);padding:11px 13px;margin-bottom:11px;font-size:var(--ui-text-md);
  line-height:1.5;font-weight:500}
.ds-infobox .ds-icon{flex:0 0 auto;width:18px;height:18px;margin-top:1px;color:#313663}
.ds-infobox strong{font-weight:700}
.ds-infobox ul{margin:5px 0 0;padding-left:16px}
.ds-infobox li{margin-bottom:3px}

/* Alert message — unlike the neutral info box above, this is for something
   the user should specifically notice: a validation problem, a heads-up
   about consequences of what they're about to do. Default is the warning
   (yellow) tone; add --danger for a harder stop (a blocking error, a
   destructive action's confirmation). Use .ds-icon with #ds-warning inside. */
.ds-alert{display:flex;align-items:flex-start;gap:8px;margin-top:var(--ui-space-3);padding:12px;
  border-radius:var(--ui-radius-panel);background:#fff3c7;color:#313663;font-size:var(--ui-text-md);
  font-weight:500;line-height:1.45}
.ds-alert .ds-icon{flex:0 0 auto;width:22px;height:22px;color:#313663}
.ds-alert--danger{background:var(--ui-danger-soft);color:var(--ui-danger);border:1px solid var(--ui-danger);
  border-radius:var(--ui-radius-control);font-weight:600}
.ds-alert--danger .ds-icon{color:var(--ui-danger)}

/* Toast / nudge — a dismissible prompt that appears on its own (bottom
   corner by convention) and asks for a yes/no, then goes away for good
   once answered. Use for an optional offer ("want a quick tour?"), never
   for information the user must not miss — that belongs inline as an
   .ds-infobox or blocks the flow as a real dialog. */
.ds-toast{position:fixed;z-index:2000;right:16px;bottom:16px;max-width:300px;display:flex;align-items:flex-start;
  gap:10px;background:var(--ui-surface);color:var(--ui-text-color);border:1px solid var(--ui-border);
  border-radius:14px;padding:13px 14px;box-shadow:0 12px 32px rgba(15,18,45,.18);font-size:var(--ui-text-base);line-height:1.45}
.ds-toast .ds-icon{flex:0 0 auto;width:18px;height:18px;margin-top:1px;color:var(--ui-primary)}
.ds-toast-title{font-weight:700;margin-bottom:2px}
.ds-toast-text{color:var(--ui-text-secondary)}
.ds-toast-actions{display:flex;gap:8px;margin-top:10px}
.ds-toast-yes{border:1.5px solid var(--ui-primary);background:var(--ui-primary);color:#fff;border-radius:999px;
  padding:7px 13px;font:700 12.5px var(--ui-font);cursor:pointer}
.ds-toast-yes:hover{background:var(--ui-primary-hover);border-color:var(--ui-primary-hover)}
.ds-toast-no{border:0;background:none;color:var(--ui-text-secondary);font:600 12.5px var(--ui-font);cursor:pointer;padding:7px 4px}
.ds-toast-no:hover{color:var(--ui-text-color)}

/* Keycap — a small badge showing a keyboard shortcut. Use inline in a
   sentence ("press <span class=ds-keycap>Esc</span> to cancel") to explain
   a shortcut in passing, or docked inside a .ds-keybound-button below to
   surface a mode's shortcut right on the control that triggers it. */
.ds-keycap{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:18px;padding:0 5px;
  margin:0 1px;border:1px solid #b6bad0;border-bottom-width:2px;border-radius:var(--ui-radius-badge);
  background:var(--ui-surface);color:#313663;font-size:10.5px;font-weight:700;vertical-align:baseline}

/* Keybound button — an icon + label tile with its keyboard shortcut docked
   to the right. Use for a tool mode reached for often enough that the
   shortcut is worth advertising every time (not for a one-off action —
   there, a plain button plus a tooltip is enough). */
.ds-keybound-button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 12px;
  font-size:var(--ui-text-md);border-radius:var(--ui-radius-control);border:1px solid var(--ui-border);
  color:var(--ui-text-color);background:var(--ui-surface);font-weight:600;cursor:pointer}
.ds-keybound-button .ds-icon{width:17px;height:17px;flex:0 0 auto}
.ds-keybound-button-label{flex:0 1 auto;text-align:center}
.ds-keybound-button .ds-keycap{flex:0 0 auto;margin-left:auto}
.ds-keybound-button:hover{border-color:var(--ui-primary-border);background:var(--ui-primary-soft);color:var(--ui-primary)}
.ds-keybound-button.active,.ds-keybound-button[aria-pressed="true"]{border-color:var(--ui-primary);
  background:var(--ui-primary-soft);color:var(--ui-primary)}