/* ══════════════════════════════════════════════════════════════
   PECK COMPONENTS — CSS for Jinja2 primitive macros
   Bruker kun var(--peck-*) tokens — ingen hardkodede farger.
   WCAG 2.2: fokusringer, kontrast 4.5:1, touch-targets.
   Mobile-first med container queries der støttet.
   ══════════════════════════════════════════════════════════════ */

/* ── Focus ring (WCAG 2.2 §2.4.11) ──────────────────────────── */
:focus-visible {
  outline: 2px solid var(--peck-accent);
  outline-offset: 3px;
  border-radius: var(--peck-r-sm);
}

/* ════════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ════════════════════════════════════════════════════════════════ */

/* Headings */
.peck-heading {
  font-family: var(--peck-font);
  line-height: var(--peck-leading-tight);
  color: var(--peck-white);
  margin: 0;
  letter-spacing: -0.01em;
}

.peck-heading--3xl { font-size: var(--peck-text-3xl); }
.peck-heading--2xl { font-size: var(--peck-text-2xl); }
.peck-heading--xl  { font-size: var(--peck-text-xl);  }
.peck-heading--lg  { font-size: var(--peck-text-lg);  }
.peck-heading--md  { font-size: var(--peck-text-base); }
.peck-heading--sm  { font-size: var(--peck-text-sm);  }
.peck-heading--xs  { font-size: var(--peck-text-xs);  }

.peck-heading--light    { font-weight: 300; }
.peck-heading--normal   { font-weight: 400; }
.peck-heading--medium   { font-weight: 500; }
.peck-heading--semibold { font-weight: 600; }
.peck-heading--bold     { font-weight: 700; }

/* Body text */
.peck-text {
  font-family: var(--peck-font);
  line-height: var(--peck-leading);
  color: var(--peck-gray-200);
  margin: 0;
}

.peck-text--lg  { font-size: var(--peck-text-lg); }
.peck-text--md  { font-size: var(--peck-text-base); }
.peck-text--sm  { font-size: var(--peck-text-sm); }
.peck-text--xs  { font-size: var(--peck-text-xs); }

.peck-text--light    { font-weight: 300; }
.peck-text--normal   { font-weight: 400; }
.peck-text--medium   { font-weight: 500; }
.peck-text--semibold { font-weight: 600; }
.peck-text--bold     { font-weight: 700; }

/* Label */
.peck-label {
  display: inline-block;
  font-family: var(--peck-font);
  font-size: var(--peck-text-sm);
  font-weight: 500;
  color: var(--peck-gray-200);
  margin-bottom: var(--peck-sp-2);
}

.peck-label__required {
  color: var(--peck-danger);
  margin-left: var(--peck-sp-1);
}

/* Inline code */
.peck-code {
  font-family: var(--peck-mono);
  font-size: 0.875em;
  background: var(--peck-glass);
  border: 1px solid var(--peck-border);
  border-radius: var(--peck-r-sm);
  padding: 0.1em 0.4em;
  color: var(--peck-accent);
}

/* Caption */
.peck-caption {
  font-family: var(--peck-font);
  font-size: var(--peck-text-xs);
  color: var(--peck-gray-400);
  line-height: var(--peck-leading);
}

/* ════════════════════════════════════════════════════════════════
   LAYOUT: BOX
   ════════════════════════════════════════════════════════════════ */

.peck-box {
  display: block;
  box-sizing: border-box;
}

.peck-box--bordered {
  border: 1px solid var(--peck-border);
}

.peck-box--shadow-sm { box-shadow: var(--peck-shadow-sm); }
.peck-box--shadow-md { box-shadow: var(--peck-shadow-md); }
.peck-box--shadow-lg { box-shadow: var(--peck-shadow-lg); }

/* ════════════════════════════════════════════════════════════════
   LAYOUT: CONTAINER
   ════════════════════════════════════════════════════════════════ */

.peck-container {
  width: 100%;
  margin-inline: auto;
  box-sizing: border-box;
}

.peck-container--sm   { max-width: 40rem;  }  /* 640px  */
.peck-container--md   { max-width: 48rem;  }  /* 768px  */
.peck-container--lg   { max-width: 64rem;  }  /* 1024px */
.peck-container--xl   { max-width: 80rem;  }  /* 1280px */
.peck-container--full { max-width: none;   }

.peck-container--padded {
  padding-inline: var(--peck-sp-4);
}

@media (min-width: 48rem) {
  .peck-container--padded {
    padding-inline: var(--peck-sp-8);
  }
}

/* ════════════════════════════════════════════════════════════════
   LAYOUT: STACK (vertikal flex)
   ════════════════════════════════════════════════════════════════ */

.peck-stack {
  display: flex;
  flex-direction: column;
}

.peck-stack--gap-xs { gap: var(--peck-sp-1); }
.peck-stack--gap-sm { gap: var(--peck-sp-2); }
.peck-stack--gap-md { gap: var(--peck-sp-4); }
.peck-stack--gap-lg { gap: var(--peck-sp-6); }
.peck-stack--gap-xl { gap: var(--peck-sp-8); }

/* ════════════════════════════════════════════════════════════════
   LAYOUT: ROW (horisontal flex)
   ════════════════════════════════════════════════════════════════ */

.peck-row {
  display: flex;
  flex-direction: row;
}

.peck-row--wrap { flex-wrap: wrap; }

.peck-row--gap-xs { gap: var(--peck-sp-1); }
.peck-row--gap-sm { gap: var(--peck-sp-2); }
.peck-row--gap-md { gap: var(--peck-sp-4); }
.peck-row--gap-lg { gap: var(--peck-sp-6); }
.peck-row--gap-xl { gap: var(--peck-sp-8); }

/* ════════════════════════════════════════════════════════════════
   LAYOUT: GRID
   Responsivt auto-fill grid. Bruker CSS custom properties.
   ════════════════════════════════════════════════════════════════ */

.peck-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(min(var(--peck-grid-min, 250px), 100%), 1fr)
  );
}

@supports (container-type: inline-size) {
  .peck-grid {
    container-type: inline-size;
  }
}

/* ════════════════════════════════════════════════════════════════
   LAYOUT: SIDEBAR (Every Layout-inspirert)
   Bruker flexbox med threshold for kollapset/expanded state.
   ════════════════════════════════════════════════════════════════ */

.peck-sidebar {
  display: flex;
  flex-wrap: wrap;
}

.peck-sidebar--left > :first-child {
  width: var(--peck-sidebar-width, 300px);
  flex-shrink: 0;
}

.peck-sidebar--left > :last-child {
  flex: 1;
  min-width: max(45%, var(--peck-sidebar-width, 300px));
}

.peck-sidebar--right {
  flex-direction: row-reverse;
}

.peck-sidebar--right > :first-child {
  width: var(--peck-sidebar-width, 300px);
  flex-shrink: 0;
}

.peck-sidebar--right > :last-child {
  flex: 1;
  min-width: max(45%, var(--peck-sidebar-width, 300px));
}

/* ════════════════════════════════════════════════════════════════
   BUTTON
   Alle varianter bruker CSS custom properties.
   Touch-target minimum 44×44px (WCAG 2.5.5).
   ════════════════════════════════════════════════════════════════ */

.peck-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--peck-sp-2);
  border: none;
  border-radius: var(--peck-r-md);
  font-family: var(--peck-font);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background var(--peck-t-fast),
    color var(--peck-t-fast),
    box-shadow var(--peck-t-fast),
    opacity var(--peck-t-fast);
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  min-height: 44px; /* WCAG 2.5.5 touch target */
  user-select: none;
}

/* Sizes */
.peck-btn--sm {
  font-size: var(--peck-text-sm);
  padding: var(--peck-sp-2) var(--peck-sp-3);
  min-height: 36px;
  gap: var(--peck-sp-1);
}

.peck-btn--md {
  font-size: var(--peck-text-base);
  padding: var(--peck-sp-3) var(--peck-sp-5);
}

.peck-btn--lg {
  font-size: var(--peck-text-lg);
  padding: var(--peck-sp-4) var(--peck-sp-8);
  border-radius: var(--peck-r-lg);
}

/* Full width */
.peck-btn--full {
  width: 100%;
}

/* ── Intents ──────────────────────────────────────────────────── */

/* Primary */
.peck-btn--primary {
  background: var(--peck-accent);
  color: var(--peck-white);
}
.peck-btn--primary:hover:not(:disabled) {
  background: var(--peck-accent-hover);
  box-shadow: var(--peck-shadow-glow);
}
.peck-btn--primary:active:not(:disabled) {
  transform: translateY(1px);
}

/* Secondary */
.peck-btn--secondary {
  background: var(--peck-glass);
  color: var(--peck-white);
  border: 1px solid var(--peck-border-light);
}
.peck-btn--secondary:hover:not(:disabled) {
  background: var(--peck-glass-light);
  border-color: var(--peck-accent);
}

/* Danger */
.peck-btn--danger {
  background: var(--peck-danger);
  color: var(--peck-white);
}
.peck-btn--danger:hover:not(:disabled) {
  background: color-mix(in srgb, var(--peck-danger) 85%, white);
  box-shadow: 0 0 20px color-mix(in srgb, var(--peck-danger) 30%, transparent);
}

/* Ghost */
.peck-btn--ghost {
  background: transparent;
  color: var(--peck-accent);
  border: 1px solid var(--peck-accent);
}
.peck-btn--ghost:hover:not(:disabled) {
  background: var(--peck-accent-glow);
}

/* Link */
.peck-btn--link {
  background: transparent;
  color: var(--peck-accent);
  border: none;
  padding-inline: var(--peck-sp-1);
  min-height: auto;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.peck-btn--link:hover:not(:disabled) {
  color: var(--peck-accent-hover);
}

/* ── States ───────────────────────────────────────────────────── */

.peck-btn:disabled,
.peck-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Loading state */
.peck-btn--loading {
  cursor: wait;
}

.peck-btn--loading .peck-btn__label {
  opacity: 0;
}

.peck-btn__spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.peck-btn__spinner::after {
  content: "";
  width: 1em;
  height: 1em;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-right-color: currentColor;
  border-radius: 50%;
  animation: peck-icon-spin 0.7s linear infinite;
}

/* Icon-only button */
.peck-btn--icon {
  padding: var(--peck-sp-2);
  aspect-ratio: 1;
  border-radius: var(--peck-r-md);
}
.peck-btn--icon.peck-btn--sm { padding: var(--peck-sp-1); }
.peck-btn--icon.peck-btn--lg { padding: var(--peck-sp-3); border-radius: var(--peck-r-lg); }

/* ════════════════════════════════════════════════════════════════
   ICON
   Størrelser og animasjoner — farger via tokens (se peck-icons.css)
   ════════════════════════════════════════════════════════════════ */

/* Base (overlapper peck-icons.css for macro-bruk) */
.peck-icon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  vertical-align: middle;
  fill: none;
  color: currentColor;
  flex-shrink: 0;
}

.peck-icon--xs  { width: 0.75rem; height: 0.75rem; }
.peck-icon--sm  { width: 1rem;    height: 1rem;    }
.peck-icon--md  { width: 1.5rem;  height: 1.5rem;  }
.peck-icon--lg  { width: 2rem;    height: 2rem;    }
.peck-icon--xl  { width: 3rem;    height: 3rem;    }
.peck-icon--2xl { width: 4rem;    height: 4rem;    }
.peck-icon--3xl { width: 6rem;    height: 6rem;    }

.peck-icon--accent  { color: var(--peck-accent);  }
.peck-icon--success { color: var(--peck-success);  }
.peck-icon--warning { color: var(--peck-warning);  }
.peck-icon--danger  { color: var(--peck-danger);   }
.peck-icon--info    { color: var(--peck-info);     }
.peck-icon--muted   { color: var(--peck-gray-400); }
.peck-icon--earth   { color: var(--peck-earth);    }

.peck-icon--spin    { animation: peck-icon-spin 1s linear infinite; }
.peck-icon--pecking { animation: peck-pecking 0.6s ease-in-out infinite; transform-origin: bottom center; }
.peck-icon--pulse   { animation: peck-pulse 1.5s ease-in-out infinite; }
.peck-icon--bounce  { animation: peck-icon-bounce 0.5s ease; }

@keyframes peck-icon-spin {
  to { transform: rotate(360deg); }
}

@keyframes peck-icon-bounce {
  0%   { transform: translateY(0);    }
  40%  { transform: translateY(-4px); }
  60%  { transform: translateY(-2px); }
  100% { transform: translateY(0);    }
}

/* ════════════════════════════════════════════════════════════════
   DATA DISPLAY — UI2
   Card, Badge, Avatar, Alert, Stat, Skeleton, Progress
   Alle farger via var(--peck-*). WCAG 2.2.
   ════════════════════════════════════════════════════════════════ */

/* ── CARD ─────────────────────────────────────────────────────── */

.peck-card {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  transition:
    border-color var(--peck-t-fast),
    box-shadow var(--peck-t-fast),
    transform var(--peck-t-fast);
}

/* Variants */
.peck-card--default {
  background: var(--peck-gray-900);
}

.peck-card--glass {
  background: var(--peck-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.peck-card--elevated {
  background: var(--peck-gray-800);
  box-shadow: var(--peck-shadow-md);
}

.peck-card--flat {
  background: transparent;
}

.peck-card--bordered {
  border: 1px solid var(--peck-border);
}

/* Clickable card */
.peck-card--link {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}
.peck-card--link:hover {
  border-color: var(--peck-border-light);
  box-shadow: var(--peck-shadow-glow);
  transform: translateY(-1px);
}
.peck-card--link:active {
  transform: translateY(0);
}

/* Accent stripe at top */
.peck-card__accent {
  height: 3px;
  width: 100%;
  flex-shrink: 0;
}

/* Header */
.peck-card__header {
  display: flex;
  flex-direction: column;
  gap: var(--peck-sp-1);
}

.peck-card__title {
  font-family: var(--peck-font);
  font-size: var(--peck-text-base);
  font-weight: 600;
  color: var(--peck-white);
  margin: 0;
  line-height: var(--peck-leading-tight);
}

.peck-card__subtitle {
  font-family: var(--peck-font);
  font-size: var(--peck-text-sm);
  color: var(--peck-gray-400);
  margin: 0;
}

/* Body */
.peck-card__body {
  flex: 1;
}

/* Footer */
.peck-card__footer {
  border-top: 1px solid var(--peck-border);
  margin-top: auto;
  padding-top: var(--peck-sp-3);
}

/* ── BADGE ────────────────────────────────────────────────────── */

.peck-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--peck-sp-1);
  font-family: var(--peck-font);
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  border-radius: var(--peck-r-pill);
}

/* Sizes */
.peck-badge--sm {
  font-size: var(--peck-text-xs);
  padding: 0.15em var(--peck-sp-2);
}
.peck-badge--md {
  font-size: var(--peck-text-xs);
  padding: 0.25em var(--peck-sp-2);
}
.peck-badge--lg {
  font-size: var(--peck-text-sm);
  padding: 0.3em var(--peck-sp-3);
}

/* Intents — filled */
.peck-badge--default  { background: var(--peck-gray-700); color: var(--peck-gray-200); }
.peck-badge--accent   { background: var(--peck-accent-glow); color: var(--peck-accent); border: 1px solid color-mix(in srgb, var(--peck-accent) 30%, transparent); }
.peck-badge--success  { background: color-mix(in srgb, var(--peck-success) 15%, transparent); color: var(--peck-success); border: 1px solid color-mix(in srgb, var(--peck-success) 30%, transparent); }
.peck-badge--warning  { background: color-mix(in srgb, var(--peck-warning) 15%, transparent); color: var(--peck-warning); border: 1px solid color-mix(in srgb, var(--peck-warning) 30%, transparent); }
.peck-badge--danger   { background: color-mix(in srgb, var(--peck-danger)  15%, transparent); color: var(--peck-danger);  border: 1px solid color-mix(in srgb, var(--peck-danger)  30%, transparent); }
.peck-badge--info     { background: color-mix(in srgb, var(--peck-info)    15%, transparent); color: var(--peck-info);    border: 1px solid color-mix(in srgb, var(--peck-info)    30%, transparent); }

/* Outline variant */
.peck-badge--outline { background: transparent !important; }

/* Dot indicator */
.peck-badge__dot {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* ── AVATAR ───────────────────────────────────────────────────── */

.peck-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--peck-font);
  font-weight: 600;
  background: var(--peck-accent-glow);
  color: var(--peck-accent);
  border: 1px solid color-mix(in srgb, var(--peck-accent) 25%, transparent);
  overflow: hidden;
  user-select: none;
}

/* Shapes */
.peck-avatar--circle  { border-radius: 50%; }
.peck-avatar--rounded { border-radius: var(--peck-r-lg); }
.peck-avatar--square  { border-radius: var(--peck-r-sm); }

/* Sizes */
.peck-avatar--xs  { width: 1.5rem;  height: 1.5rem;  font-size: var(--peck-text-xs); }
.peck-avatar--sm  { width: 2rem;    height: 2rem;    font-size: var(--peck-text-xs); }
.peck-avatar--md  { width: 2.5rem;  height: 2.5rem;  font-size: var(--peck-text-sm); }
.peck-avatar--lg  { width: 3rem;    height: 3rem;    font-size: var(--peck-text-base); }
.peck-avatar--xl  { width: 4rem;    height: 4rem;    font-size: var(--peck-text-lg); }

.peck-avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.peck-avatar__initials {
  line-height: 1;
}

/* Status ring */
.peck-avatar--has-status {
  outline: 2px solid var(--peck-gray-950);
}

.peck-avatar__status {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 28%;
  height: 28%;
  border-radius: 50%;
  border: 2px solid var(--peck-gray-950);
  min-width: 8px;
  min-height: 8px;
}

.peck-avatar__status--online  { background: var(--peck-success); }
.peck-avatar__status--offline { background: var(--peck-gray-500); }
.peck-avatar__status--busy    { background: var(--peck-danger); }
.peck-avatar__status--away    { background: var(--peck-warning); }

/* ── ALERT ────────────────────────────────────────────────────── */

.peck-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--peck-sp-3);
  padding: var(--peck-sp-4);
  border-radius: var(--peck-r-md);
  border-left: 3px solid transparent;
  font-family: var(--peck-font);
  font-size: var(--peck-text-sm);
  animation: peck-slide-up var(--peck-t-mid);
}

/* Intent colours */
.peck-alert--info    { background: color-mix(in srgb, var(--peck-info)    12%, transparent); border-color: var(--peck-info);    color: var(--peck-info);    }
.peck-alert--success { background: color-mix(in srgb, var(--peck-success) 12%, transparent); border-color: var(--peck-success); color: var(--peck-success); }
.peck-alert--warning { background: color-mix(in srgb, var(--peck-warning) 12%, transparent); border-color: var(--peck-warning); color: var(--peck-warning); }
.peck-alert--danger  { background: color-mix(in srgb, var(--peck-danger)  12%, transparent); border-color: var(--peck-danger);  color: var(--peck-danger);  }

.peck-alert__icon {
  flex-shrink: 0;
  margin-top: 0.1em;
}

.peck-alert__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--peck-sp-1);
}

.peck-alert__title {
  font-weight: 600;
  margin: 0;
  color: currentColor;
}

.peck-alert__body {
  color: var(--peck-gray-200);
  line-height: var(--peck-leading);
  margin: 0;
}

/* Dismiss button */
.peck-alert--dismissible { padding-right: var(--peck-sp-10); position: relative; }

.peck-alert__close {
  position: absolute;
  top: var(--peck-sp-3);
  right: var(--peck-sp-3);
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--peck-gray-400);
  padding: var(--peck-sp-1);
  border-radius: var(--peck-r-sm);
  line-height: 0;
  transition: color var(--peck-t-fast), background var(--peck-t-fast);
}
.peck-alert__close:hover {
  color: var(--peck-white);
  background: var(--peck-glass);
}

/* ── STAT ─────────────────────────────────────────────────────── */

.peck-stat {
  display: flex;
  flex-direction: column;
  gap: var(--peck-sp-1);
  padding: var(--peck-sp-5);
  background: var(--peck-gray-900);
  border: 1px solid var(--peck-border);
  border-radius: var(--peck-r-lg);
  box-sizing: border-box;
}

.peck-stat__icon-wrap {
  margin-bottom: var(--peck-sp-2);
}

.peck-stat__label {
  font-family: var(--peck-font);
  font-size: var(--peck-text-xs);
  font-weight: 500;
  color: var(--peck-gray-400);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

.peck-stat__value {
  font-family: var(--peck-font);
  font-size: var(--peck-text-2xl);
  font-weight: 700;
  color: var(--peck-white);
  line-height: var(--peck-leading-tight);
  margin: 0;
}

.peck-stat__suffix {
  font-size: var(--peck-text-base);
  font-weight: 400;
  color: var(--peck-gray-400);
  margin-left: var(--peck-sp-1);
}

.peck-stat__delta {
  font-family: var(--peck-font);
  font-size: var(--peck-text-sm);
  font-weight: 500;
  color: var(--peck-gray-400);
  margin: 0;
}
.peck-stat__delta--up   { color: var(--peck-success); }
.peck-stat__delta--down { color: var(--peck-danger); }

/* ── SKELETON ─────────────────────────────────────────────────── */

.peck-skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    var(--peck-gray-800) 25%,
    var(--peck-gray-700) 50%,
    var(--peck-gray-800) 75%
  );
  background-size: 200% 100%;
  animation: peck-skeleton-shimmer 1.5s ease-in-out infinite;
}

@keyframes peck-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── PROGRESS ─────────────────────────────────────────────────── */

.peck-progress-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--peck-sp-2);
  width: 100%;
}

.peck-progress__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.peck-progress__label {
  font-family: var(--peck-font);
  font-size: var(--peck-text-sm);
  color: var(--peck-gray-300);
}

.peck-progress__value {
  font-family: var(--peck-mono);
  font-size: var(--peck-text-xs);
  color: var(--peck-gray-400);
}

.peck-progress {
  position: relative;
  width: 100%;
  background: var(--peck-gray-800);
  border-radius: var(--peck-r-pill);
  overflow: hidden;
}

/* Sizes */
.peck-progress--sm { height: 4px; }
.peck-progress--md { height: 8px; }
.peck-progress--lg { height: 12px; }

.peck-progress__bar {
  height: 100%;
  border-radius: inherit;
  transition: width 0.4s ease;
}

/* Intent colours for bar */
.peck-progress--accent  .peck-progress__bar { background: var(--peck-accent); }
.peck-progress--success .peck-progress__bar { background: var(--peck-success); }
.peck-progress--warning .peck-progress__bar { background: var(--peck-warning); }
.peck-progress--danger  .peck-progress__bar { background: var(--peck-danger); }
.peck-progress--info    .peck-progress__bar { background: var(--peck-info); }

/* Indeterminate */
.peck-progress--indeterminate .peck-progress__bar {
  width: 40% !important;
  animation: peck-progress-slide 1.4s ease-in-out infinite;
}

@keyframes peck-progress-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* Striped animated */
.peck-progress--animated .peck-progress__bar {
  background-image: repeating-linear-gradient(
    45deg,
    color-mix(in srgb, var(--peck-white) 10%, transparent) 0,
    color-mix(in srgb, var(--peck-white) 10%, transparent) 8px,
    transparent 8px,
    transparent 16px
  );
  background-size: 32px 100%;
  animation: peck-progress-stripe 0.7s linear infinite;
}

@keyframes peck-progress-stripe {
  from { background-position: 0 0; }
  to   { background-position: 32px 0; }
}

/* ════════════════════════════════════════════════════════════════
   FORMS — UI2b
   Input, Textarea, Select, Checkbox, Radio, Switch, FieldGroup
   Alle farger via var(--peck-*). WCAG 2.2.
   ════════════════════════════════════════════════════════════════ */

/* ── FIELD (shared wrapper) ──────────────────────────────────── */

.peck-field {
  display: flex;
  flex-direction: column;
  gap: var(--peck-sp-2);
  font-family: var(--peck-font);
}

/* ── FIELD HINT ──────────────────────────────────────────────── */

.peck-field__hint {
  font-size: var(--peck-text-xs);
  line-height: var(--peck-leading);
}

.peck-field__hint--default { color: var(--peck-gray-400); }
.peck-field__hint--success  { color: var(--peck-success); }
.peck-field__hint--warning  { color: var(--peck-warning); }
.peck-field__hint--danger   { color: var(--peck-danger); }
.peck-field__hint--info     { color: var(--peck-info); }

/* ── SHARED INPUT BASE ────────────────────────────────────────── */

.peck-input,
.peck-textarea,
.peck-select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--peck-font);
  color: var(--peck-white);
  background: var(--peck-gray-900);
  border: 1px solid var(--peck-border-light);
  border-radius: var(--peck-r-md);
  transition:
    border-color var(--peck-t-fast),
    box-shadow var(--peck-t-fast),
    background var(--peck-t-fast);
  appearance: none;
  -webkit-appearance: none;
}

.peck-input::placeholder,
.peck-textarea::placeholder {
  color: var(--peck-gray-500);
}

.peck-input:focus,
.peck-textarea:focus,
.peck-select:focus {
  outline: none;
  border-color: var(--peck-accent);
  box-shadow: 0 0 0 3px var(--peck-accent-glow);
}

.peck-input:disabled,
.peck-textarea:disabled,
.peck-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--peck-gray-800);
}

.peck-input[readonly],
.peck-textarea[readonly] {
  background: var(--peck-gray-800);
  border-color: var(--peck-border);
  cursor: default;
}

/* Sizes */
.peck-input--sm,
.peck-textarea--sm,
.peck-select--sm {
  font-size: var(--peck-text-sm);
  padding: var(--peck-sp-2) var(--peck-sp-3);
  border-radius: var(--peck-r-sm);
}

.peck-input--md,
.peck-textarea--md,
.peck-select--md {
  font-size: var(--peck-text-base);
  padding: var(--peck-sp-3) var(--peck-sp-4);
}

.peck-input--lg,
.peck-textarea--lg,
.peck-select--lg {
  font-size: var(--peck-text-lg);
  padding: var(--peck-sp-4) var(--peck-sp-5);
  border-radius: var(--peck-r-lg);
}

/* ── INTENT BORDERS ────────────────────────────────────────────── */

.peck-field--success .peck-input,
.peck-field--success .peck-textarea,
.peck-field--success .peck-select {
  border-color: var(--peck-success);
}
.peck-field--success .peck-input:focus,
.peck-field--success .peck-textarea:focus,
.peck-field--success .peck-select:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--peck-success) 20%, transparent);
}

.peck-field--warning .peck-input,
.peck-field--warning .peck-textarea,
.peck-field--warning .peck-select {
  border-color: var(--peck-warning);
}
.peck-field--warning .peck-input:focus,
.peck-field--warning .peck-textarea:focus,
.peck-field--warning .peck-select:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--peck-warning) 20%, transparent);
}

.peck-field--danger .peck-input,
.peck-field--danger .peck-textarea,
.peck-field--danger .peck-select {
  border-color: var(--peck-danger);
}
.peck-field--danger .peck-input:focus,
.peck-field--danger .peck-textarea:focus,
.peck-field--danger .peck-select:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--peck-danger) 20%, transparent);
}

/* ── INPUT WRAP (for icon support) ───────────────────────────── */

.peck-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.peck-input-wrap .peck-input {
  flex: 1;
}

.peck-input__icon {
  position: absolute;
  color: var(--peck-gray-500);
  pointer-events: none;
  flex-shrink: 0;
}

.peck-input__icon--left  { left: var(--peck-sp-3); }
.peck-input__icon--right { right: var(--peck-sp-3); }

.peck-input-wrap--icon-left  .peck-input { padding-left: calc(var(--peck-sp-3) * 2 + 1rem); }
.peck-input-wrap--icon-right .peck-input { padding-right: calc(var(--peck-sp-3) * 2 + 1rem); }

/* ── TEXTAREA ─────────────────────────────────────────────────── */

.peck-textarea {
  line-height: var(--peck-leading);
  min-height: 6rem;
}

/* ── SELECT ───────────────────────────────────────────────────── */

.peck-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.peck-select-wrap .peck-select {
  flex: 1;
  cursor: pointer;
  padding-right: var(--peck-sp-10);
}

.peck-select-wrap .peck-select option {
  background: var(--peck-gray-900);
  color: var(--peck-white);
}

.peck-select__chevron {
  position: absolute;
  right: var(--peck-sp-3);
  color: var(--peck-gray-400);
  pointer-events: none;
}

/* ── CHECK / RADIO SHARED ─────────────────────────────────────── */

.peck-check-wrap,
.peck-switch-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--peck-sp-1);
}

.peck-check__label {
  display: inline-flex;
  align-items: center;
  gap: var(--peck-sp-2);
  cursor: pointer;
  font-family: var(--peck-font);
  font-size: var(--peck-text-sm);
  color: var(--peck-gray-200);
  user-select: none;
}

.peck-check__label--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.peck-check__text {
  line-height: var(--peck-leading-tight);
}

/* ── CHECKBOX ─────────────────────────────────────────────────── */

/* Hide native input visually but keep accessible */
.peck-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}

.peck-checkbox__box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  border: 1.5px solid var(--peck-border-light);
  border-radius: var(--peck-r-sm);
  background: var(--peck-gray-900);
  transition:
    background var(--peck-t-fast),
    border-color var(--peck-t-fast),
    box-shadow var(--peck-t-fast);
}

/* Checkmark via pseudo-element */
.peck-checkbox__box::after {
  content: "";
  display: block;
  width: 0.3rem;
  height: 0.55rem;
  border: 2px solid transparent;
  border-top: none;
  border-left: none;
  transform: rotate(45deg) scale(0);
  transition: transform var(--peck-t-fast);
  margin-top: -2px;
}

.peck-checkbox:checked + .peck-checkbox__box {
  background: var(--peck-accent);
  border-color: var(--peck-accent);
}

.peck-checkbox:checked + .peck-checkbox__box::after {
  border-color: var(--peck-white);
  transform: rotate(45deg) scale(1);
}

.peck-checkbox:focus-visible + .peck-checkbox__box {
  outline: 2px solid var(--peck-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--peck-accent-glow);
}

.peck-check__label--disabled .peck-checkbox__box {
  background: var(--peck-gray-800);
}

/* ── RADIO ────────────────────────────────────────────────────── */

.peck-radio-group {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--peck-sp-3);
  font-family: var(--peck-font);
}

.peck-radio-group--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
}

.peck-radio-group__legend {
  font-size: var(--peck-text-sm);
  font-weight: 500;
  color: var(--peck-gray-200);
  margin-bottom: var(--peck-sp-2);
  padding: 0;
}

/* Hide native radio */
.peck-radio {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}

.peck-radio__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  border: 1.5px solid var(--peck-border-light);
  border-radius: 50%;
  background: var(--peck-gray-900);
  transition:
    border-color var(--peck-t-fast),
    background var(--peck-t-fast),
    box-shadow var(--peck-t-fast);
}

.peck-radio__dot::after {
  content: "";
  display: block;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: transparent;
  transition: background var(--peck-t-fast), transform var(--peck-t-fast);
  transform: scale(0);
}

.peck-radio:checked + .peck-radio__dot {
  border-color: var(--peck-accent);
}

.peck-radio:checked + .peck-radio__dot::after {
  background: var(--peck-accent);
  transform: scale(1);
}

.peck-radio:focus-visible + .peck-radio__dot {
  outline: 2px solid var(--peck-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--peck-accent-glow);
}

/* ── SWITCH ───────────────────────────────────────────────────── */

.peck-switch__label {
  display: inline-flex;
  align-items: center;
  gap: var(--peck-sp-3);
  cursor: pointer;
  font-family: var(--peck-font);
  font-size: var(--peck-text-sm);
  color: var(--peck-gray-200);
  user-select: none;
}

.peck-switch__label--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.peck-switch__text {
  line-height: var(--peck-leading-tight);
}

/* Hide native checkbox */
.peck-switch__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}

/* Track */
.peck-switch__track {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  background: var(--peck-gray-700);
  border-radius: var(--peck-r-pill);
  transition: background var(--peck-t-fast);
}

.peck-switch__track--sm  { width: 2rem;   height: 1.125rem; padding: 2px; }
.peck-switch__track--md  { width: 2.5rem; height: 1.375rem; padding: 3px; }
.peck-switch__track--lg  { width: 3rem;   height: 1.625rem; padding: 3px; }

/* Thumb */
.peck-switch__thumb {
  display: block;
  background: var(--peck-white);
  border-radius: 50%;
  aspect-ratio: 1;
  height: 100%;
  transition: transform var(--peck-t-fast), background var(--peck-t-fast);
}

/* Checked state — slide thumb right */
.peck-switch__track--sm .peck-switch__thumb   { --_travel: calc(2rem - 1.125rem + 4px); }
.peck-switch__track--md .peck-switch__thumb   { --_travel: calc(2.5rem - 1.375rem + 6px); }
.peck-switch__track--lg .peck-switch__thumb   { --_travel: calc(3rem - 1.625rem + 6px); }

.peck-switch__input:checked ~ .peck-switch__track {
  background: var(--peck-accent);
}

.peck-switch__input:checked ~ .peck-switch__track .peck-switch__thumb {
  transform: translateX(var(--_travel, 1rem));
}

.peck-switch__input:focus-visible ~ .peck-switch__track {
  outline: 2px solid var(--peck-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--peck-accent-glow);
}

/* ── FIELD GROUP ──────────────────────────────────────────────── */

.peck-field-group {
  display: flex;
  flex-direction: column;
}

.peck-field-group--gap-xs { gap: var(--peck-sp-1); }
.peck-field-group--gap-sm { gap: var(--peck-sp-2); }
.peck-field-group--gap-md { gap: var(--peck-sp-4); }
.peck-field-group--gap-lg { gap: var(--peck-sp-6); }
.peck-field-group--gap-xl { gap: var(--peck-sp-8); }

/* ════════════════════════════════════════════════════════════════
   ACTIONS & FEEDBACK — UI2c
   Tabs, Accordion, Dropdown, Tooltip, Toast, Modal, Drawer
   Alle farger via var(--peck-*). WCAG 2.2.
   ════════════════════════════════════════════════════════════════ */

/* ── TABS ─────────────────────────────────────────────────────── */

.peck-tabs {
  font-family: var(--peck-font);
}

/* Nav bar */
.peck-tabs__nav {
  display: flex;
  align-items: flex-end;
  border-bottom: 1px solid var(--peck-border);
  gap: var(--peck-sp-1);
}

/* Hide radio inputs visually */
.peck-tabs__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
}

/* Tab label */
.peck-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--peck-sp-2);
  padding: var(--peck-sp-3) var(--peck-sp-4);
  font-size: var(--peck-text-sm);
  font-weight: 500;
  color: var(--peck-gray-400);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: var(--peck-r-sm) var(--peck-r-sm) 0 0;
  transition:
    color var(--peck-t-fast),
    border-color var(--peck-t-fast),
    background var(--peck-t-fast);
  user-select: none;
  white-space: nowrap;
}

.peck-tabs__tab:hover {
  color: var(--peck-gray-200);
  background: var(--peck-glass);
}

.peck-tabs__input:checked + .peck-tabs__tab {
  color: var(--peck-accent);
  border-bottom-color: var(--peck-accent);
}

.peck-tabs__input:focus-visible + .peck-tabs__tab {
  outline: 2px solid var(--peck-accent);
  outline-offset: 2px;
}

/* Tab panels — hide all, show when radio matched */
.peck-tab-panel {
  padding-top: var(--peck-sp-5);
}

.peck-tab-panel[hidden] {
  display: none;
}

/* ── ACCORDION ────────────────────────────────────────────────── */

.peck-accordion {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--peck-border);
  border-radius: var(--peck-r-lg);
  overflow: hidden;
  font-family: var(--peck-font);
}

.peck-accordion__item {
  border-bottom: 1px solid var(--peck-border);
}

.peck-accordion__item:last-child {
  border-bottom: none;
}

.peck-accordion__item[open] > .peck-accordion__summary {
  color: var(--peck-accent);
}

.peck-accordion__item[open] .peck-accordion__chevron {
  transform: rotate(180deg);
}

.peck-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--peck-sp-4) var(--peck-sp-5);
  cursor: pointer;
  background: var(--peck-gray-900);
  color: var(--peck-gray-200);
  font-weight: 500;
  font-size: var(--peck-text-sm);
  transition: background var(--peck-t-fast), color var(--peck-t-fast);
  list-style: none;
  gap: var(--peck-sp-3);
}

/* Remove default marker */
.peck-accordion__summary::-webkit-details-marker {
  display: none;
}

.peck-accordion__summary::marker {
  display: none;
}

.peck-accordion__summary:hover {
  background: var(--peck-glass);
  color: var(--peck-white);
}

.peck-accordion__summary:focus-visible {
  outline: 2px solid var(--peck-accent);
  outline-offset: -2px;
}

.peck-accordion__title {
  flex: 1;
  line-height: var(--peck-leading-tight);
}

.peck-accordion__chevron {
  flex-shrink: 0;
  color: var(--peck-gray-400);
  transition: transform var(--peck-t-fast);
}

.peck-accordion__body {
  padding: var(--peck-sp-4) var(--peck-sp-5) var(--peck-sp-5);
  background: var(--peck-gray-950);
  color: var(--peck-gray-300);
  font-size: var(--peck-text-sm);
  line-height: var(--peck-leading);
  animation: peck-slide-up var(--peck-t-mid);
}

/* Slideup used by alert + accordion */
@keyframes peck-slide-up {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── DROPDOWN ─────────────────────────────────────────────────── */

.peck-dropdown {
  position: relative;
  display: inline-flex;
  font-family: var(--peck-font);
}

.peck-dropdown__arrow {
  transition: transform var(--peck-t-fast);
  color: var(--peck-gray-400);
}

/* Open state via :focus-within */
.peck-dropdown:focus-within .peck-dropdown__menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
}

.peck-dropdown:focus-within .peck-dropdown__trigger {
  border-color: var(--peck-accent);
}

.peck-dropdown:focus-within .peck-dropdown__arrow {
  transform: rotate(180deg);
}

.peck-dropdown__menu {
  position: absolute;
  top: calc(100% + var(--peck-sp-2));
  z-index: 50;
  min-width: max(12rem, 100%);
  background: var(--peck-gray-900);
  border: 1px solid var(--peck-border-light);
  border-radius: var(--peck-r-lg);
  box-shadow: var(--peck-shadow-lg);
  padding: var(--peck-sp-2) 0;
  list-style: none;
  margin: 0;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity var(--peck-t-fast),
    transform var(--peck-t-fast),
    visibility var(--peck-t-fast);
}

.peck-dropdown__menu--left  { left: 0; }
.peck-dropdown__menu--right { right: 0; }

.peck-dropdown__link {
  display: flex;
  align-items: center;
  gap: var(--peck-sp-2);
  padding: var(--peck-sp-2) var(--peck-sp-4);
  font-size: var(--peck-text-sm);
  color: var(--peck-gray-200);
  text-decoration: none;
  transition: background var(--peck-t-fast), color var(--peck-t-fast);
  cursor: pointer;
  white-space: nowrap;
}

.peck-dropdown__link:hover {
  background: var(--peck-glass-light);
  color: var(--peck-white);
}

.peck-dropdown__item--disabled .peck-dropdown__link {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.peck-dropdown__divider {
  border: none;
  border-top: 1px solid var(--peck-border);
  margin: var(--peck-sp-2) 0;
  height: 0;
}

/* ── TOOLTIP ──────────────────────────────────────────────────── */

.peck-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.peck-tooltip::before,
.peck-tooltip::after {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--peck-t-fast), transform var(--peck-t-fast);
  z-index: 100;
}

/* Tooltip bubble */
.peck-tooltip::before {
  content: attr(data-tooltip);
  background: var(--peck-gray-800);
  color: var(--peck-gray-100);
  font-family: var(--peck-font);
  font-size: var(--peck-text-xs);
  font-weight: 500;
  border: 1px solid var(--peck-border-light);
  border-radius: var(--peck-r-sm);
  padding: var(--peck-sp-1) var(--peck-sp-2);
  white-space: nowrap;
  box-shadow: var(--peck-shadow-md);
}

/* Arrow */
.peck-tooltip::after {
  content: "";
  border: 5px solid transparent;
}

/* Position variants */
.peck-tooltip--top::before {
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
}
.peck-tooltip--top::after {
  bottom: calc(100% + 0px);
  left: 50%;
  transform: translateX(-50%);
  border-top-color: var(--peck-border-light);
}

.peck-tooltip--bottom::before {
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
}
.peck-tooltip--bottom::after {
  top: calc(100% + 0px);
  left: 50%;
  transform: translateX(-50%);
  border-bottom-color: var(--peck-border-light);
}

.peck-tooltip--left::before {
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) translateX(4px);
}
.peck-tooltip--left::after {
  right: calc(100% + 0px);
  top: 50%;
  transform: translateY(-50%);
  border-left-color: var(--peck-border-light);
}

.peck-tooltip--right::before {
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%) translateX(-4px);
}
.peck-tooltip--right::after {
  left: calc(100% + 0px);
  top: 50%;
  transform: translateY(-50%);
  border-right-color: var(--peck-border-light);
}

.peck-tooltip:hover::before,
.peck-tooltip:hover::after,
.peck-tooltip:focus-within::before,
.peck-tooltip:focus-within::after {
  opacity: 1;
}

.peck-tooltip--top:hover::before,
.peck-tooltip--top:focus-within::before {
  transform: translateX(-50%) translateY(0);
}
.peck-tooltip--bottom:hover::before,
.peck-tooltip--bottom:focus-within::before {
  transform: translateX(-50%) translateY(0);
}
.peck-tooltip--left:hover::before,
.peck-tooltip--left:focus-within::before {
  transform: translateY(-50%) translateX(0);
}
.peck-tooltip--right:hover::before,
.peck-tooltip--right:focus-within::before {
  transform: translateY(-50%) translateX(0);
}

/* ── TOAST ────────────────────────────────────────────────────── */

.peck-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--peck-sp-3);
  padding: var(--peck-sp-3) var(--peck-sp-4);
  border-radius: var(--peck-r-lg);
  border: 1px solid var(--peck-border-light);
  background: var(--peck-gray-900);
  box-shadow: var(--peck-shadow-lg);
  font-family: var(--peck-font);
  font-size: var(--peck-text-sm);
  max-width: 24rem;
  animation: peck-slide-up var(--peck-t-mid);
  position: relative;
}

/* Fixed positions */
.peck-toast--bottom-right  { position: fixed; bottom: var(--peck-sp-6); right:  var(--peck-sp-6); z-index: 200; }
.peck-toast--bottom-left   { position: fixed; bottom: var(--peck-sp-6); left:   var(--peck-sp-6); z-index: 200; }
.peck-toast--top-right     { position: fixed; top:    var(--peck-sp-6); right:  var(--peck-sp-6); z-index: 200; }
.peck-toast--top-left      { position: fixed; top:    var(--peck-sp-6); left:   var(--peck-sp-6); z-index: 200; }
.peck-toast--top-center    { position: fixed; top:    var(--peck-sp-6); left: 50%; transform: translateX(-50%); z-index: 200; }
.peck-toast--bottom-center { position: fixed; bottom: var(--peck-sp-6); left: 50%; transform: translateX(-50%); z-index: 200; }

/* Intent accent stripe */
.peck-toast--info    { border-left: 3px solid var(--peck-info);    }
.peck-toast--success { border-left: 3px solid var(--peck-success);  }
.peck-toast--warning { border-left: 3px solid var(--peck-warning);  }
.peck-toast--danger  { border-left: 3px solid var(--peck-danger);   }

/* Intent icon colors */
.peck-toast--info    .peck-toast__icon { color: var(--peck-info);    }
.peck-toast--success .peck-toast__icon { color: var(--peck-success); }
.peck-toast--warning .peck-toast__icon { color: var(--peck-warning); }
.peck-toast--danger  .peck-toast__icon { color: var(--peck-danger);  }

.peck-toast__icon {
  flex-shrink: 0;
  margin-top: 0.1em;
}

.peck-toast__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--peck-sp-1);
}

.peck-toast__title {
  font-weight: 600;
  color: var(--peck-white);
  margin: 0;
}

.peck-toast__body {
  color: var(--peck-gray-300);
  margin: 0;
  line-height: var(--peck-leading);
}

.peck-toast__close {
  flex-shrink: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--peck-gray-500);
  padding: 2px;
  border-radius: var(--peck-r-sm);
  line-height: 0;
  transition: color var(--peck-t-fast), background var(--peck-t-fast);
  margin-left: var(--peck-sp-1);
}

.peck-toast__close:hover {
  color: var(--peck-white);
  background: var(--peck-glass);
}

/* ── MODAL ────────────────────────────────────────────────────── */

.peck-modal {
  position: fixed;
  inset: 0;
  margin: auto;
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
  max-height: 90dvh;
  max-width: 90vw;
}

.peck-modal::backdrop {
  background: color-mix(in srgb, var(--peck-black) 70%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Sizes */
.peck-modal--sm .peck-modal__panel { width: min(24rem, 90vw); }
.peck-modal--md .peck-modal__panel { width: min(36rem, 90vw); }
.peck-modal--lg .peck-modal__panel { width: min(48rem, 90vw); }
.peck-modal--xl .peck-modal__panel { width: min(64rem, 90vw); }
.peck-modal--full .peck-modal__panel { width: 90vw; height: 90dvh; }

.peck-modal__panel {
  display: flex;
  flex-direction: column;
  background: var(--peck-gray-900);
  border: 1px solid var(--peck-border-light);
  border-radius: var(--peck-r-xl);
  box-shadow: var(--peck-shadow-lg);
  overflow: hidden;
  max-height: 90dvh;
  animation: peck-modal-in var(--peck-t-mid) cubic-bezier(0.34, 1.1, 0.64, 1);
}

@keyframes peck-modal-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.peck-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--peck-sp-4);
  padding: var(--peck-sp-5) var(--peck-sp-6);
  border-bottom: 1px solid var(--peck-border);
  flex-shrink: 0;
}

.peck-modal__title {
  font-family: var(--peck-font);
  font-size: var(--peck-text-lg);
  font-weight: 600;
  color: var(--peck-white);
  margin: 0;
  line-height: var(--peck-leading-tight);
}

.peck-modal__close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--peck-gray-400);
  padding: var(--peck-sp-1);
  border-radius: var(--peck-r-sm);
  line-height: 0;
  flex-shrink: 0;
  transition: color var(--peck-t-fast), background var(--peck-t-fast);
}

.peck-modal__close:hover {
  color: var(--peck-white);
  background: var(--peck-glass);
}

.peck-modal__body {
  padding: var(--peck-sp-6);
  overflow-y: auto;
  flex: 1;
  color: var(--peck-gray-200);
  line-height: var(--peck-leading);
}

/* ── DRAWER ───────────────────────────────────────────────────── */

.peck-drawer {
  position: fixed;
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
  max-width: none;
  max-height: none;
}

.peck-drawer::backdrop {
  background: color-mix(in srgb, var(--peck-black) 60%, transparent);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Side placement */
.peck-drawer--right {
  inset: 0 0 0 auto;
  height: 100%;
}
.peck-drawer--left {
  inset: 0 auto 0 0;
  height: 100%;
}

/* Sizes */
.peck-drawer--sm .peck-drawer__panel  { width: min(18rem, 90vw); }
.peck-drawer--md .peck-drawer__panel  { width: min(26rem, 90vw); }
.peck-drawer--lg .peck-drawer__panel  { width: min(36rem, 90vw); }
.peck-drawer--full .peck-drawer__panel { width: 90vw; }

.peck-drawer__panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--peck-gray-900);
  border-left: 1px solid var(--peck-border-light);
  box-shadow: var(--peck-shadow-lg);
  overflow: hidden;
}

.peck-drawer--left .peck-drawer__panel {
  border-left: none;
  border-right: 1px solid var(--peck-border-light);
}

/* Slide animations */
.peck-drawer--right .peck-drawer__panel {
  animation: peck-drawer-right-in var(--peck-t-mid) cubic-bezier(0.34, 1.1, 0.64, 1);
}
.peck-drawer--left .peck-drawer__panel {
  animation: peck-drawer-left-in var(--peck-t-mid) cubic-bezier(0.34, 1.1, 0.64, 1);
}

@keyframes peck-drawer-right-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes peck-drawer-left-in {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

.peck-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--peck-sp-4);
  padding: var(--peck-sp-5) var(--peck-sp-6);
  border-bottom: 1px solid var(--peck-border);
  flex-shrink: 0;
}

.peck-drawer__title {
  font-family: var(--peck-font);
  font-size: var(--peck-text-base);
  font-weight: 600;
  color: var(--peck-white);
  margin: 0;
}

.peck-drawer__close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--peck-gray-400);
  padding: var(--peck-sp-1);
  border-radius: var(--peck-r-sm);
  line-height: 0;
  flex-shrink: 0;
  transition: color var(--peck-t-fast), background var(--peck-t-fast);
}

.peck-drawer__close:hover {
  color: var(--peck-white);
  background: var(--peck-glass);
}

.peck-drawer__body {
  padding: var(--peck-sp-6);
  overflow-y: auto;
  flex: 1;
  color: var(--peck-gray-200);
  line-height: var(--peck-leading);
}

/* ════════════════════════════════════════════════════════════════
   INTERACTIVE — UI3A (Alpine.js)
   Tabs, Accordion, Dropdown, Toast container
   Utilities: x-transition CSS classes
   Alle farger via var(--peck-*). WCAG 2.2. Light DOM.
   ════════════════════════════════════════════════════════════════ */

/* [x-cloak] — eier Alpine init-flimmer */
[x-cloak] { display: none !important; }

/* ── TRANSITION UTILITIES (brukt av x-transition direktiver) ── */

.peck-transition-enter {
  transition:
    opacity var(--peck-t-fast),
    transform var(--peck-t-fast);
}

/* Fade */
.peck-transition-fade-start { opacity: 0; }
.peck-transition-fade-end   { opacity: 1; }

/* Slide down (accordion/dropdowns) */
.peck-transition-slide-start {
  opacity: 0;
  transform: translateY(-6px);
}
.peck-transition-slide-end {
  opacity: 1;
  transform: translateY(0);
}

/* Drop (dropdown menu pops slightly down) */
.peck-transition-drop-start { transform: translateY(-4px) scale(0.98); }
.peck-transition-drop-end   { transform: translateY(0) scale(1); }

/* Toast slide-in from right */
.peck-transition-toast-start {
  opacity: 0;
  transform: translateX(1rem);
}
.peck-transition-toast-end {
  opacity: 1;
  transform: translateX(0);
}

/* ── TABS (Alpine variant) ────────────────────────────────────── */

/* Nav bar */
.peck-tabs__nav {
  display: flex;
  align-items: flex-end;
  gap: var(--peck-sp-1);
  border-bottom: 1px solid var(--peck-border);
}

/* Tab button — default variant */
.peck-tabs__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--peck-sp-2);
  padding: var(--peck-sp-2) var(--peck-sp-4);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: var(--peck-r-sm) var(--peck-r-sm) 0 0;
  font-family: var(--peck-font);
  font-size: var(--peck-text-sm);
  font-weight: 500;
  color: var(--peck-gray-400);
  cursor: pointer;
  transition:
    color var(--peck-t-fast),
    border-color var(--peck-t-fast),
    background var(--peck-t-fast);
  white-space: nowrap;
  min-height: 40px;
}

.peck-tabs__tab:hover {
  color: var(--peck-white);
  background: var(--peck-glass);
}

.peck-tabs__tab--active,
.peck-tabs__tab[aria-selected="true"] {
  color: var(--peck-accent);
  border-bottom-color: var(--peck-accent);
  background: transparent;
}

/* Pills variant */
.peck-tabs--pills .peck-tabs__nav {
  border-bottom: none;
  gap: var(--peck-sp-2);
  padding: var(--peck-sp-1);
  background: var(--peck-gray-900);
  border-radius: var(--peck-r-lg);
  border: 1px solid var(--peck-border);
}

.peck-tabs--pills .peck-tabs__tab {
  border-radius: var(--peck-r-md);
  border-bottom: none;
}

.peck-tabs--pills .peck-tabs__tab--active,
.peck-tabs--pills .peck-tabs__tab[aria-selected="true"] {
  background: var(--peck-accent);
  color: var(--peck-white);
  border-bottom: none;
}

/* Underline variant — same as default but thinner */
.peck-tabs--underline .peck-tabs__tab {
  padding-inline: var(--peck-sp-2);
  border-radius: 0;
}

/* Tab panels */
.peck-tab-panel {
  padding-top: var(--peck-sp-4);
  outline: none;
}

.peck-tab-panel:focus-visible {
  outline: 2px solid var(--peck-accent);
  outline-offset: 4px;
  border-radius: var(--peck-r-sm);
}

/* ── ACCORDION (Alpine variant) ───────────────────────────────── */

.peck-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--peck-sp-2);
}

.peck-accordion__item {
  border: 1px solid var(--peck-border);
  border-radius: var(--peck-r-md);
  background: var(--peck-gray-900);
  overflow: hidden;
  list-style: none;
}

.peck-accordion__item[open] {
  border-color: var(--peck-border-light);
}

.peck-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--peck-sp-3);
  padding: var(--peck-sp-4) var(--peck-sp-5);
  cursor: pointer;
  list-style: none;
  font-family: var(--peck-font);
  color: var(--peck-white);
  user-select: none;
  transition: background var(--peck-t-fast);
  border-radius: var(--peck-r-md);
}

.peck-accordion__summary::-webkit-details-marker { display: none; }
.peck-accordion__summary::marker { display: none; }

.peck-accordion__summary:hover {
  background: var(--peck-glass);
}

.peck-accordion__title {
  font-size: var(--peck-text-sm);
  font-weight: 500;
  flex: 1;
}

.peck-accordion__chevron {
  color: var(--peck-gray-400);
  transition: transform var(--peck-t-fast);
  flex-shrink: 0;
}

.peck-accordion__chevron--open {
  transform: rotate(180deg);
}

.peck-accordion__body {
  padding: 0 var(--peck-sp-5) var(--peck-sp-4);
  color: var(--peck-gray-300);
  font-family: var(--peck-font);
  font-size: var(--peck-text-sm);
  line-height: var(--peck-leading);
}

/* ── DROPDOWN (Alpine variant) ────────────────────────────────── */

.peck-dropdown {
  position: relative;
  display: inline-flex;
}

.peck-dropdown__arrow {
  color: var(--peck-gray-400);
  transition: transform var(--peck-t-fast);
}

.peck-dropdown__arrow--open {
  transform: rotate(180deg);
}

.peck-dropdown__menu {
  position: absolute;
  top: calc(100% + var(--peck-sp-2));
  min-width: max(14rem, 100%);
  z-index: var(--peck-z-float);
  background: var(--peck-gray-900);
  border: 1px solid var(--peck-border-light);
  border-radius: var(--peck-r-lg);
  box-shadow: var(--peck-shadow-md);
  padding: var(--peck-sp-2);
  list-style: none;
  margin: 0;
}

.peck-dropdown__menu--left  { left: 0; }
.peck-dropdown__menu--right { right: 0; }
.peck-dropdown__menu--center { left: 50%; transform: translateX(-50%); }

.peck-dropdown__item {
  display: block;
}

.peck-dropdown__item--disabled {
  pointer-events: none;
  opacity: 0.45;
}

.peck-dropdown__link {
  display: flex;
  align-items: center;
  gap: var(--peck-sp-2);
  width: 100%;
  padding: var(--peck-sp-2) var(--peck-sp-3);
  border-radius: var(--peck-r-md);
  font-family: var(--peck-font);
  font-size: var(--peck-text-sm);
  color: var(--peck-gray-200);
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background var(--peck-t-fast), color var(--peck-t-fast);
  box-sizing: border-box;
}

.peck-dropdown__link:hover,
.peck-dropdown__link:focus-visible {
  background: var(--peck-glass-light);
  color: var(--peck-white);
  outline: none;
}

.peck-dropdown__divider {
  height: 1px;
  background: var(--peck-border);
  margin: var(--peck-sp-2) 0;
}

/* ── TOAST CONTAINER (Alpine event-driven) ────────────────────── */

.peck-toast-container {
  position: fixed;
  z-index: var(--peck-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--peck-sp-3);
  pointer-events: none;
  max-width: min(24rem, 90vw);
}

/* Positions */
.peck-toast-container--top-right    { top: var(--peck-sp-6);    right: var(--peck-sp-6);  }
.peck-toast-container--top-left     { top: var(--peck-sp-6);    left: var(--peck-sp-6);   }
.peck-toast-container--top-center   { top: var(--peck-sp-6);    left: 50%; transform: translateX(-50%); }
.peck-toast-container--bottom-right { bottom: var(--peck-sp-6); right: var(--peck-sp-6);  }
.peck-toast-container--bottom-left  { bottom: var(--peck-sp-6); left: var(--peck-sp-6);   }
.peck-toast-container--bottom-center { bottom: var(--peck-sp-6); left: 50%; transform: translateX(-50%); }

/* Toast card */
.peck-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--peck-sp-3);
  padding: var(--peck-sp-4);
  background: var(--peck-gray-900);
  border: 1px solid var(--peck-border-light);
  border-radius: var(--peck-r-lg);
  box-shadow: var(--peck-shadow-md);
  font-family: var(--peck-font);
  pointer-events: auto;
  min-width: 18rem;
  max-width: 100%;
  box-sizing: border-box;
}

/* Static (server-rendered) toast is position: fixed itself */
.peck-toast--static {
  position: fixed;
  z-index: var(--peck-z-toast);
  max-width: min(24rem, 90vw);
  animation: peck-slide-up var(--peck-t-mid);
}
.peck-toast--static.peck-toast--top-right    { top: var(--peck-sp-6);    right: var(--peck-sp-6);  }
.peck-toast--static.peck-toast--top-left     { top: var(--peck-sp-6);    left: var(--peck-sp-6);   }
.peck-toast--static.peck-toast--top-center   { top: var(--peck-sp-6);    left: 50%; transform: translateX(-50%); }
.peck-toast--static.peck-toast--bottom-right { bottom: var(--peck-sp-6); right: var(--peck-sp-6);  }
.peck-toast--static.peck-toast--bottom-left  { bottom: var(--peck-sp-6); left: var(--peck-sp-6);   }
.peck-toast--static.peck-toast--bottom-center { bottom: var(--peck-sp-6); left: 50%; transform: translateX(-50%); }

/* ════════════════════════════════════════════════════════════════
   NAVIGATION — UI3B
   Navbar, Breadcrumbs, Pagination
   Mobile-first, WCAG 2.2, semantic tokens.
   ════════════════════════════════════════════════════════════════ */

/* ── NAVBAR ───────────────────────────────────────────────────── */

.peck-navbar {
  position: relative;
  z-index: var(--peck-z-sticky, 100);
  background: var(--peck-gray-950);
  border-bottom: 1px solid var(--peck-border);
  font-family: var(--peck-font);
}

.peck-navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--peck-sp-4);
  max-width: 80rem;
  margin-inline: auto;
  padding: var(--peck-sp-3) var(--peck-sp-4);
  min-height: 3.5rem;
  box-sizing: border-box;
}

/* Brand / logo */
.peck-navbar__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--peck-sp-2);
  text-decoration: none;
  color: var(--peck-white);
  font-weight: 700;
  font-size: var(--peck-text-base);
  flex-shrink: 0;
  transition: opacity var(--peck-t-fast);
}
.peck-navbar__brand:hover { opacity: 0.85; }

.peck-navbar__brand-text {
  color: var(--peck-white);
}

/* Desktop nav links container */
.peck-navbar__links {
  display: none;
  align-items: center;
  gap: var(--peck-sp-1);
  flex: 1;
  padding-left: var(--peck-sp-6);
}

@media (min-width: 48rem) {
  .peck-navbar__links {
    display: flex;
  }
  .peck-navbar__hamburger {
    display: none !important;
  }
}

/* Nav links */
.peck-navbar__link {
  display: inline-flex;
  align-items: center;
  gap: var(--peck-sp-1);
  padding: var(--peck-sp-2) var(--peck-sp-3);
  border-radius: var(--peck-r-md);
  text-decoration: none;
  font-size: var(--peck-text-sm);
  font-weight: 500;
  color: var(--peck-gray-300);
  transition:
    color var(--peck-t-fast),
    background var(--peck-t-fast);
  white-space: nowrap;
}
.peck-navbar__link:hover {
  color: var(--peck-white);
  background: var(--peck-glass);
}
.peck-navbar__link--active {
  color: var(--peck-accent);
  background: var(--peck-accent-glow);
}

/* Hamburger button (mobil) */
.peck-navbar__hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--peck-border);
  border-radius: var(--peck-r-md);
  color: var(--peck-gray-300);
  cursor: pointer;
  padding: var(--peck-sp-2);
  min-width: 44px;
  min-height: 44px;   /* WCAG 2.5.5 */
  transition: background var(--peck-t-fast), color var(--peck-t-fast);
}
.peck-navbar__hamburger:hover {
  background: var(--peck-glass);
  color: var(--peck-white);
}

/* Mobile dropdown menu */
.peck-navbar__mobile {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--peck-border);
  padding: var(--peck-sp-2) var(--peck-sp-4) var(--peck-sp-4);
  gap: var(--peck-sp-1);
}

/* Nav links inside mobile menu — full-width */
.peck-navbar__mobile .peck-navbar__link {
  width: 100%;
  padding: var(--peck-sp-3) var(--peck-sp-3);
  border-radius: var(--peck-r-md);
}

/* ── BREADCRUMBS ──────────────────────────────────────────────── */

.peck-breadcrumbs {
  display: block;
}

.peck-breadcrumbs__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--peck-font);
  font-size: var(--peck-text-sm);
}

.peck-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
}

/* Separator via CSS pseudo-element */
.peck-breadcrumbs__item:not(:last-child)::after {
  content: "/";
  display: inline-block;
  margin-inline: var(--peck-sp-2);
  color: var(--peck-gray-600);
  font-size: var(--peck-text-xs);
  user-select: none;
  /* aria-hidden handled in HTML on the item */
}

.peck-breadcrumbs__link {
  display: inline-flex;
  align-items: center;
  gap: var(--peck-sp-1);
  color: var(--peck-gray-400);
  text-decoration: none;
  border-radius: var(--peck-r-sm);
  transition: color var(--peck-t-fast);
}
.peck-breadcrumbs__link:hover {
  color: var(--peck-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.peck-breadcrumbs__current {
  color: var(--peck-gray-200);
  font-weight: 500;
}

/* ── PAGINATION ───────────────────────────────────────────────── */

.peck-pagination {
  display: block;
  font-family: var(--peck-font);
}

.peck-pagination__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--peck-sp-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.peck-pagination__item {
  display: inline-flex;
}

.peck-pagination__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  min-height: 2.5rem; /* WCAG 2.5.5 */
  padding: var(--peck-sp-1) var(--peck-sp-2);
  border-radius: var(--peck-r-md);
  border: 1px solid var(--peck-border);
  background: var(--peck-glass);
  color: var(--peck-gray-300);
  font-family: var(--peck-font);
  font-size: var(--peck-text-sm);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--peck-t-fast),
    color var(--peck-t-fast),
    border-color var(--peck-t-fast),
    box-shadow var(--peck-t-fast);
  box-sizing: border-box;
  user-select: none;
}

.peck-pagination__btn:hover:not(.peck-pagination__btn--disabled):not(.peck-pagination__btn--active) {
  background: var(--peck-glass-light);
  border-color: var(--peck-border-light);
  color: var(--peck-white);
}

.peck-pagination__btn--active {
  background: var(--peck-accent);
  border-color: var(--peck-accent);
  color: var(--peck-white);
  box-shadow: var(--peck-shadow-glow);
  cursor: default;
}

.peck-pagination__btn--disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.peck-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: var(--peck-sp-1);
  color: var(--peck-gray-500);
  font-size: var(--peck-text-sm);
  user-select: none;
}

/* ════════════════════════════════════════════════════════════════
   OVERLAYS — Modal, ConfirmDialog, Popover, Tooltip
   Bruker native <dialog>. Focus trapping via Alpine.js.
   WCAG 2.1.2: No Keyboard Trap. WCAG 2.4.3: Focus Order.
   ════════════════════════════════════════════════════════════════ */

/* Alpine.js transition helpers for modals */
.peck-modal-enter-start {
  opacity: 0;
  transform: scale(0.96) translateY(-8px);
}
.peck-modal-enter-end {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ── MODAL (<dialog>) ─────────────────────────────────────────── */

.peck-modal {
  /* Reset <dialog> defaults */
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  z-index: var(--peck-z-modal);
}

/* Hide when not open (native dialog closed state) */
.peck-modal:not([open]) {
  display: none;
}

/* Backdrop — sits behind panel, on top of page */
.peck-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: peck-fade-in var(--peck-t-mid) ease;
}

/* Override native ::backdrop so we use our own */
.peck-modal::backdrop {
  display: none;
}

/* Modal panel */
.peck-modal__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--peck-gray-900);
  border: 1px solid var(--peck-border-light);
  border-radius: var(--peck-r-xl);
  box-shadow: var(--peck-shadow-lg);
  width: 100%;
  max-height: calc(100dvh - var(--peck-sp-16));
  overflow: hidden;
  box-sizing: border-box;
  transition:
    opacity var(--peck-t-mid) ease,
    transform var(--peck-t-mid) ease;
}

/* Sizes */
.peck-modal--sm  .peck-modal__panel { max-width: 28rem; }
.peck-modal--md  .peck-modal__panel { max-width: 38rem; }
.peck-modal--lg  .peck-modal__panel { max-width: 52rem; }
.peck-modal--xl  .peck-modal__panel { max-width: 68rem; }
.peck-modal--full .peck-modal__panel {
  max-width: calc(100vw - var(--peck-sp-8));
  max-height: calc(100dvh - var(--peck-sp-8));
}

@media (max-width: 36rem) {
  .peck-modal__panel {
    max-width: calc(100vw - var(--peck-sp-8)) !important;
    margin-inline: var(--peck-sp-4);
  }
}

/* Header */
.peck-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--peck-sp-4);
  padding: var(--peck-sp-5) var(--peck-sp-6);
  border-bottom: 1px solid var(--peck-border);
  flex-shrink: 0;
}

.peck-modal__title {
  font-family: var(--peck-font);
  font-size: var(--peck-text-lg);
  font-weight: 600;
  color: var(--peck-white);
  margin: 0;
  line-height: var(--peck-leading-tight);
}

/* Close button */
.peck-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: var(--peck-sp-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--peck-r-md);
  color: var(--peck-gray-400);
  cursor: pointer;
  transition:
    color var(--peck-t-fast),
    background var(--peck-t-fast),
    border-color var(--peck-t-fast);
  line-height: 0;
  min-width: 36px;
  min-height: 36px;
}
.peck-modal__close:hover {
  color: var(--peck-white);
  background: var(--peck-glass-light);
  border-color: var(--peck-border-light);
}

/* Body */
.peck-modal__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--peck-sp-6);
  color: var(--peck-gray-200);
  font-family: var(--peck-font);
  font-size: var(--peck-text-base);
  line-height: var(--peck-leading);
}

/* ── CONFIRM DIALOG ───────────────────────────────────────────── */

.peck-confirm__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--peck-sp-3);
  padding: var(--peck-sp-4) var(--peck-sp-6);
  border-top: 1px solid var(--peck-border);
  flex-shrink: 0;
}

/* ── POPOVER ──────────────────────────────────────────────────── */

.peck-popover {
  position: absolute;
  z-index: var(--peck-z-overlay);
  min-width: 12rem;
  background: var(--peck-gray-800);
  border: 1px solid var(--peck-border-light);
  border-radius: var(--peck-r-lg);
  box-shadow: var(--peck-shadow-lg);
  padding: 0;
  overflow: visible;
  box-sizing: border-box;

  /* Reset native popover styles */
  margin: 0;
  inset: unset;
}

/* Positioning relative to trigger element */
.peck-popover--bottom {
  top: calc(100% + var(--peck-sp-2));
  left: 50%;
  transform: translateX(-50%);
}
.peck-popover--top {
  bottom: calc(100% + var(--peck-sp-2));
  left: 50%;
  transform: translateX(-50%);
}
.peck-popover--left {
  right: calc(100% + var(--peck-sp-2));
  top: 50%;
  transform: translateY(-50%);
}
.peck-popover--right {
  left: calc(100% + var(--peck-sp-2));
  top: 50%;
  transform: translateY(-50%);
}

/* Popover content padding */
.peck-popover__content {
  padding: var(--peck-sp-3) var(--peck-sp-4);
  font-family: var(--peck-font);
  font-size: var(--peck-text-sm);
  color: var(--peck-gray-200);
  line-height: var(--peck-leading);
}

/* CSS triangle arrow */
.peck-popover__arrow {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

.peck-popover--bottom .peck-popover__arrow {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 7px solid var(--peck-border-light);
}
.peck-popover--bottom .peck-popover__arrow::after {
  content: "";
  position: absolute;
  top: 1px;
  left: -5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 6px solid var(--peck-gray-800);
}

.peck-popover--top .peck-popover__arrow {
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid var(--peck-border-light);
}
.peck-popover--top .peck-popover__arrow::after {
  content: "";
  position: absolute;
  bottom: 1px;
  left: -5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--peck-gray-800);
}

.peck-popover--right .peck-popover__arrow {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 7px solid var(--peck-border-light);
}
.peck-popover--right .peck-popover__arrow::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 1px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 6px solid var(--peck-gray-800);
}

.peck-popover--left .peck-popover__arrow {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 7px solid var(--peck-border-light);
}
.peck-popover--left .peck-popover__arrow::after {
  content: "";
  position: absolute;
  top: -5px;
  right: 1px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 6px solid var(--peck-gray-800);
}

/* ── TOOLTIP ──────────────────────────────────────────────────── */

.peck-tooltip {
  position: absolute;
  z-index: var(--peck-z-toast); /* above overlays */
  pointer-events: none;
  white-space: nowrap;
  max-width: 16rem;
  white-space: normal;
  text-align: center;

  /* Appearance */
  background: var(--peck-gray-700);
  color: var(--peck-white);
  font-family: var(--peck-font);
  font-size: var(--peck-text-xs);
  font-weight: 500;
  line-height: var(--peck-leading-tight);
  padding: var(--peck-sp-1) var(--peck-sp-3);
  border-radius: var(--peck-r-md);
  border: 1px solid var(--peck-border-light);
  box-shadow: var(--peck-shadow-md);
}

/* Position offsets — parent wrapper must be position: relative */
.peck-tooltip--top {
  bottom: calc(100% + var(--peck-sp-2));
  left: 50%;
  transform: translateX(-50%);
}
.peck-tooltip--bottom {
  top: calc(100% + var(--peck-sp-2));
  left: 50%;
  transform: translateX(-50%);
}
.peck-tooltip--left {
  right: calc(100% + var(--peck-sp-2));
  top: 50%;
  transform: translateY(-50%);
}
.peck-tooltip--right {
  left: calc(100% + var(--peck-sp-2));
  top: 50%;
  transform: translateY(-50%);
}

/* ── [x-cloak] ────────────────────────────────────────────────── */
[x-cloak] { display: none !important; }

/* ════════════════════════════════════════════════════════════════
   ADVANCED FORMS — UI5C
   DatePicker, FileUpload, Combobox
   Alpine.js interaktivitet. Progressive enhancement.
   WCAG 2.2 AA, norsk locale.
   ════════════════════════════════════════════════════════════════ */

/* ── DATEPICKER ───────────────────────────────────────────────── */

.peck-datepicker-wrap {
  position: relative;
}

.peck-datepicker__panel {
  position: absolute;
  top: calc(100% + var(--peck-sp-2));
  left: 0;
  z-index: var(--peck-z-overlay);
  min-width: 18rem;
  background: var(--peck-gray-900);
  border: 1px solid var(--peck-border-light);
  border-radius: var(--peck-r-xl);
  box-shadow: var(--peck-shadow-lg);
  padding: var(--peck-sp-4);
  box-sizing: border-box;
  font-family: var(--peck-font);
}

/* Nav row */
.peck-datepicker__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--peck-sp-3);
}

.peck-datepicker__month-label {
  display: flex;
  gap: var(--peck-sp-2);
  font-size: var(--peck-text-sm);
  font-weight: 600;
  color: var(--peck-white);
}

.peck-datepicker__nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--peck-border);
  border-radius: var(--peck-r-md);
  color: var(--peck-gray-400);
  cursor: pointer;
  padding: var(--peck-sp-1);
  min-width: 30px;
  min-height: 30px;
  transition: background var(--peck-t-fast), color var(--peck-t-fast);
}
.peck-datepicker__nav-btn:hover {
  background: var(--peck-glass);
  color: var(--peck-white);
}

/* Weekday headers */
.peck-datepicker__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: var(--peck-sp-1);
}

.peck-datepicker__weekday {
  font-size: var(--peck-text-xs);
  font-weight: 500;
  color: var(--peck-gray-500);
  text-align: center;
  padding: var(--peck-sp-1) 0;
  user-select: none;
}

/* Day grid */
.peck-datepicker__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.peck-datepicker__day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  aspect-ratio: 1;
  font-size: var(--peck-text-sm);
  font-family: var(--peck-font);
  color: var(--peck-gray-200);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--peck-r-md);
  cursor: pointer;
  transition:
    background var(--peck-t-fast),
    color var(--peck-t-fast),
    border-color var(--peck-t-fast);
  line-height: 1;
}

.peck-datepicker__day:hover:not(:disabled):not(.peck-datepicker__day--empty) {
  background: var(--peck-glass-light);
  color: var(--peck-white);
}

.peck-datepicker__day--empty {
  visibility: hidden;
  pointer-events: none;
}

.peck-datepicker__day--today {
  border-color: var(--peck-accent);
  color: var(--peck-accent);
  font-weight: 600;
}

.peck-datepicker__day--selected {
  background: var(--peck-accent);
  color: var(--peck-white);
  border-color: var(--peck-accent);
  font-weight: 600;
  box-shadow: var(--peck-shadow-glow);
}

.peck-datepicker__day--disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

/* Footer shortcuts */
.peck-datepicker__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--peck-sp-2);
  margin-top: var(--peck-sp-3);
  padding-top: var(--peck-sp-3);
  border-top: 1px solid var(--peck-border);
}

.peck-datepicker__shortcut {
  background: transparent;
  border: 1px solid var(--peck-border);
  border-radius: var(--peck-r-md);
  color: var(--peck-gray-400);
  font-family: var(--peck-font);
  font-size: var(--peck-text-xs);
  padding: var(--peck-sp-1) var(--peck-sp-3);
  cursor: pointer;
  transition: background var(--peck-t-fast), color var(--peck-t-fast);
}

.peck-datepicker__shortcut:hover {
  background: var(--peck-glass);
  color: var(--peck-white);
}

.peck-datepicker__shortcut--accent {
  border-color: var(--peck-accent);
  color: var(--peck-accent);
}

.peck-datepicker__shortcut--accent:hover {
  background: var(--peck-accent-glow);
}

/* ── FILE UPLOAD ──────────────────────────────────────────────── */

.peck-fileupload {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--peck-sp-2);
  padding: var(--peck-sp-8) var(--peck-sp-6);
  border: 2px dashed var(--peck-border);
  border-radius: var(--peck-r-lg);
  background: var(--peck-glass);
  cursor: pointer;
  transition:
    border-color var(--peck-t-fast),
    background var(--peck-t-fast);
  text-align: center;
  font-family: var(--peck-font);
  min-height: 8rem;
  box-sizing: border-box;
}

.peck-fileupload:hover,
.peck-fileupload:focus-visible {
  border-color: var(--peck-accent);
  background: var(--peck-accent-glow);
  outline: none;
}

.peck-fileupload--dragging {
  border-color: var(--peck-accent);
  background: var(--peck-accent-glow);
  box-shadow: var(--peck-shadow-glow);
}

.peck-fileupload--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.peck-fileupload__icon {
  color: var(--peck-gray-500);
  transition: color var(--peck-t-fast);
}

.peck-fileupload:hover .peck-fileupload__icon,
.peck-fileupload--dragging .peck-fileupload__icon {
  color: var(--peck-accent);
}

.peck-fileupload__text {
  font-size: var(--peck-text-sm);
  color: var(--peck-gray-300);
  margin: 0;
}

.peck-fileupload__text--primary {
  font-weight: 500;
  color: var(--peck-gray-200);
}

.peck-fileupload__text--link {
  color: var(--peck-accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.peck-fileupload__meta {
  font-size: var(--peck-text-xs);
  color: var(--peck-gray-500);
  margin: 0;
}

/* Error list */
.peck-fileupload__errors {
  list-style: none;
  margin: var(--peck-sp-2) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--peck-sp-1);
}

.peck-fileupload__error {
  font-size: var(--peck-text-sm);
  color: var(--peck-danger);
  padding: var(--peck-sp-2) var(--peck-sp-3);
  background: color-mix(in srgb, var(--peck-danger) 10%, transparent);
  border-radius: var(--peck-r-md);
}

/* File list */
.peck-fileupload__list {
  list-style: none;
  margin: var(--peck-sp-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--peck-sp-2);
}

.peck-fileupload__item {
  display: flex;
  align-items: center;
  gap: var(--peck-sp-3);
  padding: var(--peck-sp-2) var(--peck-sp-3);
  background: var(--peck-gray-900);
  border: 1px solid var(--peck-border);
  border-radius: var(--peck-r-md);
  font-family: var(--peck-font);
}

.peck-fileupload__preview {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: cover;
  border-radius: var(--peck-r-sm);
  flex-shrink: 0;
  border: 1px solid var(--peck-border);
}

.peck-fileupload__item-icon {
  color: var(--peck-gray-500);
  flex-shrink: 0;
}

.peck-fileupload__item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.peck-fileupload__item-name {
  font-size: var(--peck-text-sm);
  color: var(--peck-gray-200);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.peck-fileupload__item-size {
  font-size: var(--peck-text-xs);
  color: var(--peck-gray-500);
  font-family: var(--peck-mono);
}

.peck-fileupload__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--peck-r-md);
  color: var(--peck-gray-500);
  cursor: pointer;
  padding: var(--peck-sp-1);
  transition: color var(--peck-t-fast), background var(--peck-t-fast);
  min-width: 28px;
  min-height: 28px;
}

.peck-fileupload__remove:hover {
  color: var(--peck-danger);
  background: color-mix(in srgb, var(--peck-danger) 10%, transparent);
  border-color: color-mix(in srgb, var(--peck-danger) 20%, transparent);
}

/* ── COMBOBOX ─────────────────────────────────────────────────── */

.peck-combobox-wrap {
  position: relative;
}

.peck-combobox__listbox {
  position: absolute;
  top: calc(100% + var(--peck-sp-1));
  left: 0;
  right: 0;
  z-index: var(--peck-z-overlay);
  background: var(--peck-gray-900);
  border: 1px solid var(--peck-border-light);
  border-radius: var(--peck-r-lg);
  box-shadow: var(--peck-shadow-md);
  padding: var(--peck-sp-2);
  list-style: none;
  margin: 0;
  max-height: 16rem;
  overflow-y: auto;
  box-sizing: border-box;
  font-family: var(--peck-font);
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--peck-border) transparent;
}

.peck-combobox__option {
  display: flex;
  align-items: center;
  gap: var(--peck-sp-2);
  padding: var(--peck-sp-2) var(--peck-sp-3);
  border-radius: var(--peck-r-md);
  font-size: var(--peck-text-sm);
  color: var(--peck-gray-200);
  cursor: pointer;
  user-select: none;
  transition: background var(--peck-t-fast), color var(--peck-t-fast);
}

.peck-combobox__option--active {
  background: var(--peck-glass-light);
  color: var(--peck-white);
}

.peck-combobox__option--selected {
  color: var(--peck-accent);
  font-weight: 500;
}

.peck-combobox__option--selected::after {
  content: "✓";
  margin-left: auto;
  font-size: var(--peck-text-xs);
  color: var(--peck-accent);
}

.peck-combobox__loading,
.peck-combobox__no-results {
  display: flex;
  align-items: center;
  gap: var(--peck-sp-2);
  padding: var(--peck-sp-3) var(--peck-sp-3);
  font-size: var(--peck-text-sm);
  color: var(--peck-gray-400);
  list-style: none;
}

.peck-combobox__spinner {
  animation: peck-icon-spin 0.7s linear infinite;
}

/* ════════════════════════════════════════════════════════════════
   IDENTITY — UI5A
   BankID button, Wallet button, Verification badge, Identity card
   BankID farger er merkevarekrav (ikke tokens).
   Øvrige komponenter bruker var(--peck-*) tokens. WCAG 2.2.
   ════════════════════════════════════════════════════════════════ */

/* ── BANKID BUTTON (BRAND COLORS — NOT TOKENS) ──────────────── */

.peck-bankid-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--peck-sp-3);
  border: none;
  border-radius: var(--peck-r-md);
  font-family: var(--peck-font);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  user-select: none;
  /* BankID brand: primary #39134C */
  background: #39134C;
  color: #ffffff;
  transition:
    background var(--peck-t-fast),
    box-shadow var(--peck-t-fast),
    opacity var(--peck-t-fast);
}

.peck-bankid-btn:hover:not(:disabled) {
  background: #2a0e38;
  box-shadow: 0 0 20px rgba(57, 19, 76, 0.4);
}

.peck-bankid-btn:active:not(:disabled) {
  transform: translateY(1px);
}

.peck-bankid-btn:disabled,
.peck-bankid-btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Sizes */
.peck-bankid-btn--sm {
  font-size: var(--peck-text-sm);
  padding: var(--peck-sp-2) var(--peck-sp-3);
  min-height: 36px;
}

.peck-bankid-btn--md {
  font-size: var(--peck-text-base);
  padding: var(--peck-sp-3) var(--peck-sp-5);
  min-height: 44px;
}

.peck-bankid-btn--lg {
  font-size: var(--peck-text-lg);
  padding: var(--peck-sp-4) var(--peck-sp-8);
  min-height: 52px;
  border-radius: var(--peck-r-lg);
}

/* BankID logo */
.peck-bankid-btn__logo {
  height: 1.25em;
  width: auto;
  flex-shrink: 0;
}

.peck-bankid-btn__logo rect[fill="#39134C"] {
  fill: #ffffff;
}

.peck-bankid-btn__logo text {
  fill: #ffffff;
}

.peck-bankid-btn__logo path {
  fill: #39134C;
}

/* Label */
.peck-bankid-btn__label {
  line-height: var(--peck-leading-tight);
}

/* Loading state */
.peck-bankid-btn--loading {
  cursor: wait;
}

.peck-bankid-btn--loading .peck-bankid-btn__label {
  opacity: 0;
}

.peck-bankid-btn--loading .peck-bankid-btn__logo {
  opacity: 0;
}

.peck-bankid-btn__spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.peck-bankid-btn__spinner::after {
  content: "";
  width: 1.2em;
  height: 1.2em;
  border: 2px solid transparent;
  border-top-color: #ffffff;
  border-right-color: #ffffff;
  border-radius: 50%;
  animation: peck-icon-spin 0.7s linear infinite;
}

/* ── IDENTITY CARD ──────────────────────────────────────────── */

.peck-identity-card {
  display: flex;
  flex-direction: column;
  gap: var(--peck-sp-4);
  padding: var(--peck-sp-5);
  background: var(--peck-gray-900);
  border: 1px solid var(--peck-border);
  border-radius: var(--peck-r-lg);
  font-family: var(--peck-font);
  box-sizing: border-box;
  max-width: 24rem;
}

.peck-identity-card__header {
  display: flex;
  align-items: center;
  gap: var(--peck-sp-4);
}

.peck-identity-card__avatar {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--peck-border-light);
}

.peck-identity-card__avatar--initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--peck-accent-glow);
  color: var(--peck-accent);
  font-weight: 600;
  font-size: var(--peck-text-base);
}

.peck-identity-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--peck-sp-1);
  min-width: 0;
}

.peck-identity-card__name {
  font-size: var(--peck-text-base);
  font-weight: 600;
  color: var(--peck-white);
  margin: 0;
  line-height: var(--peck-leading-tight);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.peck-identity-card__paymail {
  font-size: var(--peck-text-sm);
  color: var(--peck-accent);
  margin: 0;
  font-family: var(--peck-mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.peck-identity-card__badge {
  padding-top: var(--peck-sp-2);
  border-top: 1px solid var(--peck-border);
}

.peck-identity-card__body {
  padding-top: var(--peck-sp-2);
  border-top: 1px solid var(--peck-border);
  color: var(--peck-gray-300);
  font-size: var(--peck-text-sm);
  line-height: var(--peck-leading);
}