/*
  controls.css
  Kontrolflade: logovarianter, sporvaelger, felter og miniaturer.
  Fokus maa aldrig forsvinde fra et aktivt felt, naar preview opdateres.
  Kontroller maa ikke flytte sig, mens man arbejder.
*/

/* Felt-primitiver */
.field {
  margin-bottom: var(--space-2);
}

.field__label {
  display: block;
  font-size: var(--ui-label-size);
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 4px;
}

.field__hint {
  font-size: var(--ui-help-size);
  color: var(--color-neutral-dark);
  margin-top: 4px;
}

.input,
.textarea,
.select {
  width: 100%;
  min-height: var(--touch-min);
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--color-neutral-light);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.textarea {
  min-height: 88px;
  resize: vertical;
}

.input:focus,
.textarea:focus,
.select:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Miniature-gitter, bruges til logovarianter og spor */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-1);
}

.choice {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  min-height: var(--touch-min);
  text-align: left;
  background: #fff;
  border: 1.5px solid var(--color-neutral-light);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.choice:hover {
  border-color: #d8d0c1;
}

.choice[aria-pressed="true"] {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary) inset;
  background: #fff;
}

.choice__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 6px;
  background: var(--color-paper);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.choice__thumb img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

.choice__label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.25;
}

.choice__meta {
  font-size: 11px;
  color: var(--color-neutral-dark);
}

/* Sporkomponent, miniature i editor. Farvechip plus ikon plus navn.
   Ikonet staar paa hvid cirkel, saa sporfarven ikke slaar det ihjel. */
.track-choice {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  min-height: var(--touch-min);
  background: #fff;
  border: 1.5px solid var(--color-neutral-light);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.track-choice:hover {
  border-color: #d8d0c1;
}

.track-choice[aria-pressed="true"] {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary) inset;
}

.track-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  /* sporfarven saettes inline pr. spor via --chip-color */
  background: var(--chip-color, var(--color-neutral-dark));
}

.track-chip__icon-bg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
  overflow: hidden;
}

.track-chip__icon-bg img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.track-choice__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.track-choice__name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink);
}

.track-choice__desc {
  font-size: 11px;
  color: var(--color-neutral-dark);
}

.track-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

/* Årsindstillinger, diskret panel */
.settings-note {
  font-size: var(--ui-help-size);
  color: var(--color-neutral-dark);
  padding: 10px 12px;
  background: var(--color-neutral-light);
  border-radius: var(--radius-sm);
}

/* Fremhaevet sektionslabel */
.section__hint--bold {
  font-weight: 600;
  color: var(--color-ink);
}

/* Template-gitter: Aktivitet-varianter, 3 kolonner */
.template-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-1);
}

.template-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 6px;
  min-height: var(--touch-min);
  text-align: center;
  background: #fff;
  border: 1.5px solid var(--color-neutral-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}


.template-card__name {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.3;
}

.template-card__meta {
  font-size: 10px;
  color: var(--color-neutral-dark);
  line-height: 1.3;
}

.template-card--coming {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

/* Kommende familier */
.template-coming-group {
  margin-top: var(--space-2);
}

.coming-label {
  display: block;
  margin-bottom: var(--space-1);
}


/* Foto-pladsholder */
.photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-3);
  background: var(--color-neutral-light);
  border: 1.5px dashed #c8c0b0;
  border-radius: var(--radius-md);
  min-height: 120px;
  text-align: center;
}

.photo-placeholder__text {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-neutral-dark);
}

.photo-placeholder__hint {
  font-size: 11px;
  color: var(--color-neutral-dark);
}

/* Tegntalier til tekstfelter */
.field__counter {
  display: block;
  font-size: 11px;
  color: var(--color-neutral-dark);
  text-align: right;
  margin-top: 4px;
}

/* Sporplaceringstoggle-label */
.track-layout-label {
  display: block;
  margin-top: var(--space-2);
  margin-bottom: var(--space-1);
}

/* Foto-upload zone */
.photo-upload-zone {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  padding: var(--space-2);
  background: var(--color-neutral-light);
  border: 1.5px dashed #c8c0b0;
  border-radius: var(--radius-md);
}

.photo-upload-btn {
  min-height: var(--touch-min);
}

.photo-remove-btn {
  min-height: var(--touch-min);
  font-size: 13px;
}

.photo-upload-preview {
  width: 100%;
}

.photo-upload-thumb {
  display: block;
  width: 100%;
  max-height: 160px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: #fff;
}

/* Kvalitetsstop */
.quality-stop {
  padding: 12px;
  background: var(--color-status-error-bg);
  border: 1.5px solid var(--color-status-error-border);
  border-radius: var(--radius-md);
  font-size: 13px;
  color: var(--color-ink);
}

.quality-stop strong {
  display: block;
  margin-bottom: 4px;
  color: var(--color-status-error-text);
}

/* Eksportknap og knap-raekke i kvalitetspanelet */
.export-btn {
  width: 100%;
  font-size: 15px;
  font-weight: 600;
  min-height: 48px;
  margin-bottom: var(--space-1);
}

.export-btn-row {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.export-btn-row .btn {
  flex: 1 1 auto;
}

/* Beskaeringsslidere */
#crop-controls {
  margin-top: var(--space-2);
}

.crop-slider-group {
  display: grid;
  grid-template-columns: 64px 1fr 44px;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-1);
}

.crop-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-neutral-dark);
  white-space: nowrap;
}

.crop-slider {
  width: 100%;
  accent-color: var(--color-primary);
  cursor: pointer;
  min-height: var(--touch-min);
}

.crop-value {
  font-size: 11px;
  color: var(--color-neutral-dark);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

#crop-reset {
  width: 100%;
  margin-top: var(--space-1);
  font-size: 13px;
}

/* Modal: <dialog>-element med nativ backdrop.
   Browseren centrerer elementet automatisk via top-layer ved showModal().
   Vi styr kun stoerrelse og visuel stil. */
.modal {
  max-width: min(640px, calc(100vw - 32px));
  max-height: calc(100dvh - 64px);
  width: calc(100% - 2rem);
  background: var(--color-paper);
  border: 1px solid var(--color-neutral-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel);
  padding: 0;
  overflow: hidden;
}

/* display:flex paa [open] saa browsernes UA-regel dialog:not([open]) { display: none }
   ikke overrides af author stylesheet. */
.modal[open] {
  display: flex;
  flex-direction: column;
}

.modal::backdrop {
  background: rgba(28, 27, 25, 0.52);
  backdrop-filter: blur(2px);
}

.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-neutral-light);
  flex: 0 0 auto;
}

.modal__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-ink);
}

.modal__close {
  width: 36px;
  height: 36px;
  padding: 0;
  font-size: 16px;
  border-radius: var(--radius-sm);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal__body {
  padding: var(--space-3);
  overflow-y: auto;
  flex: 1 1 auto;
  overscroll-behavior: contain;
}

.modal__foot {
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--color-neutral-light);
  display: flex;
  gap: var(--space-1);
  justify-content: flex-end;
  flex: 0 0 auto;
}

/* Hjaelp-dialog: bredere laesning */
.modal--help {
  max-width: min(560px, calc(100vw - 32px));
}

.help-list {
  margin: 0 0 var(--space-2) 0;
  padding: 0;
  list-style: none;
  counter-reset: help-counter;
}

.help-list li {
  counter-increment: help-counter;
  padding: var(--space-1) 0 var(--space-1) 32px;
  position: relative;
  font-size: 14px;
  color: var(--color-ink);
  line-height: 1.6;
  border-bottom: 1px solid var(--color-neutral-light);
}

.help-list li:last-child {
  border-bottom: none;
}

.help-list li::before {
  content: counter(help-counter);
  position: absolute;
  left: 0;
  top: var(--space-1);
  width: 22px;
  height: 22px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.help-note {
  font-size: 12px;
  color: var(--color-neutral-dark);
  margin-top: var(--space-2);
}


/* --- Sporvaelger: farvet baggrund pr. spor --- */
.track-choice {
  background: var(--track-color, var(--color-neutral-light));
  border-color: transparent;
}

.track-choice[data-has-color="false"] {
  border-color: var(--color-neutral-light);
}

/* Chip er gennemsigtig naar knappen allerede har sporfarven */
.track-choice[data-has-color="true"] .track-chip {
  background: transparent;
}

/* Tekst paa farvet baggrund: enten hvid eller blaeksort (sat inline) */
.track-choice .track-choice__name {
  color: var(--track-text-color, var(--color-ink));
}

/* Hover: lys op lidt, hold border transparent paa farvede knapper */
.track-choice[data-has-color="true"]:hover {
  filter: brightness(1.12);
  border-color: transparent;
}

/* Valgt tilstand: hvid ring paa farvet, primær ring paa neutral */
.track-choice[data-has-color="true"][aria-pressed="true"] {
  border-color: rgba(255, 255, 255, 0.75);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.75) inset;
  filter: none;
}

.track-choice[data-has-color="false"][aria-pressed="true"] {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary) inset;
}

/* --- Filnavn-raekke i eksportpanelet --- */
.filename-row {
  display: flex;
  align-items: center;
  gap: 0;
}

.filename-row .input {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  min-height: var(--touch-min);
  flex: 1 1 auto;
}

.filename-ext {
  display: flex;
  align-items: center;
  padding: 0 10px;
  min-height: var(--touch-min);
  background: var(--color-neutral-light);
  border: 1px solid var(--color-neutral-light);
  border-left: none;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-neutral-dark);
  white-space: nowrap;
  user-select: none;
}

/* --- Lokal behandling: fast infobaoks --- */
.local-info {
  margin-top: var(--space-2);
  padding: 10px 12px;
  background: var(--color-neutral-light);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-primary);
  user-select: none;
  pointer-events: none;
}

.local-info__title {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 3px;
}

.local-info__text {
  font-size: 11px;
  color: var(--color-neutral-dark);
  line-height: 1.55;
  margin: 0;
}

/* Stedgenveje */
.venue-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: -4px;
  margin-bottom: 4px;
}

.venue-preset-btn {
  padding: 4px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  border: 1.5px solid var(--color-neutral-light);
  border-radius: 999px;
  background: transparent;
  color: var(--color-neutral-dark);
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}

.venue-preset-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.venue-preset-btn[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-paper);
}

/* V2.1: historik, autosave og gendannelse */
.history-actions {
  display: inline-flex;
  gap: 4px;
}

.btn--icon {
  min-width: 36px;
  padding-inline: 9px;
  font-size: 1.1rem;
  line-height: 1;
}

.autosave-status {
  max-width: 190px;
  color: var(--color-neutral-dark);
  font-size: 0.75rem;
  line-height: 1.25;
  text-align: right;
}

.template-preserve-hint {
  margin-top: 10px;
}

.photo-missing-notice {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-paper));
  color: var(--color-ink);
  font-size: 0.78rem;
  line-height: 1.4;
}

.modal__confirm {
  margin: 0 24px 24px;
  padding: 16px;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-paper);
}

.modal__confirm p {
  margin-top: 6px;
}

.modal__confirm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.modal--recovery {
  max-width: 520px;
}

/* Succes-dialog: vises efter vellykket PNG-eksport */
.modal--success {
  max-width: 440px;
}

.modal--success .modal__body {
  padding: 0;
  text-align: center;
}

.modal--success__photo {
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}

.modal--success__message {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-primary);
  padding: 1.25rem 1.5rem 1rem;
  line-height: 1.5;
  margin: 0;
}

/* V2.3: informationsstatus og feltvalidering */
.field-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.field-status__label {
  font-size: 0.72rem;
  color: var(--color-neutral-dark);
}

.field-status__select {
  min-width: 8.5rem;
  border: 1px solid var(--color-neutral-light);
  border-radius: 6px;
  background: var(--color-paper);
  color: var(--color-ink);
  padding: 0.35rem 1.8rem 0.35rem 0.55rem;
  font: inherit;
  font-size: 0.75rem;
}

.field[data-status="confirmed"] .field-status__select {
  border-color: var(--color-primary);
}

.field[data-status="changed"] .field-status__select,
.field[data-status="preliminary"] .field-status__select {
  border-color: #C99A3E;
}

.field--issue .input,
.field--issue .textarea,
.field--issue .field-status__select {
  outline: 2px solid transparent;
}

.field--critical .input,
.field--critical .textarea,
.field--critical .field-status__select {
  border-color: #8A4B38;
  box-shadow: 0 0 0 2px color-mix(in srgb, #8A4B38 18%, transparent);
}

.field--warning .input,
.field--warning .textarea,
.field--warning .field-status__select {
  border-color: #C99A3E;
}

.field__issue {
  margin-top: var(--space-1);
  font-size: 0.74rem;
  line-height: 1.35;
  color: #8A4B38;
}

/* "Hele Ordet er Frit" dato-toggle */
.full-event-date-toggle {
  margin-top: -4px;
  margin-bottom: var(--space-2);
}

.full-event-date-toggle__label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: var(--ui-label-size);
  font-weight: 600;
  color: var(--color-ink);
  user-select: none;
  min-height: var(--touch-min);
}

/* Skjul det native checkbox visuelt men hold det tilgaengeligt */
.full-event-date-toggle__checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
}

/* Toggle-pille */
.full-event-date-toggle__pill {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  border-radius: 11px;
  background: var(--color-neutral-light);
  border: 1.5px solid #c8c0b0;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  flex-shrink: 0;
}

/* Toggle-tommel */
.full-event-date-toggle__pill::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform var(--transition-fast);
}

/* Aktiv tilstand */
.full-event-date-toggle__checkbox:checked + .full-event-date-toggle__pill {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.full-event-date-toggle__checkbox:checked + .full-event-date-toggle__pill::after {
  transform: translateX(18px);
}

/* Fokusmarkering - synlig ring om pille */
.full-event-date-toggle__checkbox:focus-visible + .full-event-date-toggle__pill {
  outline: var(--focus-width) solid var(--focus-color);
  outline-offset: 2px;
}

.rights-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: 0.78rem;
  line-height: 1.35;
  cursor: pointer;
}

.rights-check input {
  margin-top: 0.15rem;
}

.image-quality-note {
  display: grid;
  gap: 0.2rem;
  margin-top: var(--space-3);
  padding: var(--space-3);
  border-left: 4px solid #C99A3E;
  background: color-mix(in srgb, #C99A3E 10%, var(--color-paper));
  font-size: 0.76rem;
  line-height: 1.35;
}

.image-quality-note[data-severity="critical"] {
  border-left-color: #8A4B38;
  background: color-mix(in srgb, #8A4B38 9%, var(--color-paper));
}

/* V2.3: eksporttilstand */
.export-mode-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.export-mode-card {
  display: grid;
  gap: 0.25rem;
  width: 100%;
  padding: var(--space-3);
  text-align: left;
  border: 1px solid var(--color-neutral-light);
  border-radius: 8px;
  background: var(--color-paper);
  color: var(--color-ink);
}

.export-mode-card span {
  font-size: 0.73rem;
  line-height: 1.35;
  color: var(--color-neutral-dark);
}

.export-mode-card--active {
  border-color: var(--color-primary);
  box-shadow: inset 4px 0 0 var(--color-primary);
}

body[data-export-mode="draft"] .export-mode-card--active {
  border-color: #C99A3E;
  box-shadow: inset 4px 0 0 #C99A3E;
}

.quality-overview__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.quality-count {
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.quality-issues {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.quality-issue {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--color-neutral-light);
  border-left-width: 4px;
  border-radius: 7px;
  background: var(--color-paper);
  color: var(--color-ink);
  text-align: left;
}

.quality-issue:not(:disabled) {
  cursor: pointer;
}

.quality-issue--critical { border-left-color: #8A4B38; }
.quality-issue--warning { border-left-color: #C99A3E; }
.quality-issue--info { border-left-color: #2E5F63; }

.quality-issue__badge {
  display: inline-block;
  min-width: 4.2rem;
  padding: 0.18rem 0.38rem;
  border-radius: 999px;
  background: var(--color-neutral-light);
  font-size: 0.62rem;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.quality-issue__content {
  display: grid;
  gap: 0.16rem;
  min-width: 0;
  font-size: 0.74rem;
  line-height: 1.35;
}

.quality-issue__content span {
  color: var(--color-neutral-dark);
}

.quality-issue--compact {
  padding: var(--space-2);
}

.quality-more {
  margin: 0;
  font-size: 0.72rem;
  color: var(--color-neutral-dark);
}

.modal__subtitle {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  color: var(--color-neutral-dark);
}

.modal--preflight {
  width: min(760px, calc(100vw - 2rem));
  max-height: min(820px, calc(100vh - 2rem));
}

.preflight-group {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.preflight-group h3 {
  margin: 0;
  font-size: 0.9rem;
}

/* V2.4: avanceret Canva-link, bevidst adskilt fra almindelig redigering. */
.section--advanced {
  padding: var(--space-2);
  border: 1px solid var(--color-neutral-light);
  border-radius: var(--radius-md);
  background: rgba(239, 234, 224, 0.38);
}

.advanced-template-link {
  width: 100%;
  min-height: 40px;
  text-align: center;
  text-decoration: none;
}

.advanced-template-help {
  margin: var(--space-1) 0 0;
  line-height: 1.45;
}

.template-card__desc {
  display: block;
  max-width: 24ch;
  font-size: 10px;
  line-height: 1.35;
  color: var(--color-neutral-dark);
}

/* --- v2.6: Output-tilstand (Billede / Video) --- */
.output-mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: var(--space-2);
}

.output-mode-btn {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  min-height: var(--touch-min);
  text-align: left;
  border: 1.5px solid var(--color-neutral-light);
  border-radius: var(--radius-md);
  background: var(--color-paper);
  color: var(--color-ink);
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.output-mode-btn strong {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.output-mode-btn span {
  font-size: 10.5px;
  color: var(--color-neutral-dark);
  line-height: 1.3;
}

.output-mode-btn[aria-checked="true"] {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary) inset;
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-paper));
}

.output-mode-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.output-event-cover-notice {
  margin-top: var(--space-2);
  padding: 8px 10px;
  background: var(--color-neutral-light);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  color: var(--color-neutral-dark);
}

/* --- Trim-slidere til videokontroller --- */
#video-trim-controls {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-neutral-light);
}

/* Video-preview og trimbar */
.video-preview-wrap {
  position: relative;
  width: 100%;
  background: #111;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-2);
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-preview {
  width: 100%;
  height: auto;
  max-height: 220px;
  object-fit: contain;
  display: block;
}

.video-trim-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.video-trim-timecode {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--color-neutral-dark);
  letter-spacing: 0.02em;
}

.trim-bar {
  position: relative;
  height: 28px;
  background: var(--color-neutral-light);
  border-radius: 4px;
  margin-bottom: var(--space-1);
  cursor: pointer;
  user-select: none;
}

.trim-bar__left-inactive,
.trim-bar__right-inactive {
  position: absolute;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.38);
  border-radius: 4px;
  pointer-events: none;
}

.trim-bar__left-inactive  { left: 0; }
.trim-bar__right-inactive { right: 0; width: 0; }

.trim-bar__active {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--color-primary);
  opacity: 0.22;
  pointer-events: none;
}

.trim-bar__handle {
  position: absolute;
  top: -5px;
  bottom: -5px;
  width: 12px;
  margin-left: -6px;
  background: var(--color-primary);
  border-radius: 3px;
  cursor: col-resize;
  z-index: 2;
  touch-action: none;
}

.trim-bar__handle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.trim-bar__playhead {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  margin-left: -1px;
  background: #fff;
  border-radius: 1px;
  pointer-events: none;
  z-index: 3;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.trim-times {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--color-neutral-dark);
  margin-bottom: var(--space-1);
}

/* Export-fremskridtsbar */
#video-export-progress {
  margin-top: var(--space-2);
}

.export-progress-bar {
  height: 6px;
  background: var(--color-neutral-light);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}

.export-progress-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 3px;
  transition: width 0.12s linear;
}

.export-progress-label {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--color-neutral-dark);
  text-align: right;
  margin: 0;
}

/* ============================================================
   Template-guide: trin-for-trin skabelonvaelger
   ============================================================ */

.tmpl-wizard {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Et enkelt trin (format / stil / variant) */
.tmpl-step__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-neutral-dark);
  margin: 0 0 var(--space-1);
}

/* -- Trin 1: Format-knapper -- */
.tmpl-format-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.tmpl-format-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 6px 8px;
  background: #fff;
  border: 1.5px solid var(--color-neutral-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  color: var(--color-neutral-dark);
}

.tmpl-format-btn:hover {
  border-color: #d8d0c1;
  color: var(--color-ink);
}

.tmpl-format-btn[aria-pressed="true"] {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary) inset;
  color: var(--color-primary);
}

.tmpl-format-btn__shape {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
}

.tmpl-format-btn__name {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.2;
}

.tmpl-format-btn__ratio {
  font-size: 9.5px;
  color: var(--color-neutral-dark);
  line-height: 1.2;
}

/* -- Trin 2: Stil-knapper (aktivitet vs overlay) -- */
.tmpl-style-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.tmpl-style-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 8px 9px;
  background: #fff;
  border: 1.5px solid var(--color-neutral-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.tmpl-style-btn:hover {
  border-color: #d8d0c1;
}

.tmpl-style-btn[aria-pressed="true"] {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary) inset;
}

.tmpl-style-btn__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
}

.tmpl-style-btn__thumb svg {
  max-height: 54px;
  width: auto;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(28,27,25,0.10);
}

.tmpl-style-btn__name {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.2;
}

.tmpl-style-btn__desc {
  font-size: 9.5px;
  color: var(--color-neutral-dark);
  line-height: 1.35;
}

/* -- Trin 3: Variant-knapper (foto / titel / spørgsmål) -- */
.tmpl-variant-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tmpl-variant-btn {
  display: flex;
  align-items: baseline;
  gap: 6px;
  width: 100%;
  padding: 9px 12px;
  background: #fff;
  border: 1.5px solid var(--color-neutral-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: left;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.tmpl-variant-btn:hover {
  border-color: #d8d0c1;
}

.tmpl-variant-btn[aria-pressed="true"] {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary) inset;
}

.tmpl-variant-btn__name {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-ink);
  white-space: nowrap;
}

.tmpl-variant-btn__desc {
  font-size: 11px;
  color: var(--color-neutral-dark);
  line-height: 1.3;
}