/* DE: Export-Auswahl-Cockpit (ADR 0052). Schlichte, ruhige Liste; die Sprach-Kürzel mit Audio als leise
       Pills, das ✕ als unaufdringlicher Entfernen-Knopf. Server-gerendert, ohne JS voll bedienbar.
   EN: Export selection cockpit (ADR 0052). A calm list; the audio language codes as quiet pills, the ✕
       as an unobtrusive remove button. Server-rendered, fully usable without JS. */
.export-cockpit { max-inline-size: 60rem; margin-inline: auto; padding: var(--sp-lg, 1.5rem); }
.export-cockpit__intro { color: var(--text-muted, #666); margin-block-end: var(--sp-md, 1rem); }

.export-cockpit__filters {
  display: flex; flex-wrap: wrap; align-items: end; gap: .75rem;
  padding: var(--sp-md, 1rem); background: var(--surface-2, #f4f6f4);
  border-radius: var(--radius-lg, .75rem); margin-block-end: var(--sp-md, 1rem);
}
.export-cockpit__filters label { display: block; font-weight: 700; font-size: var(--step--1, .9rem); }

.export-cockpit__count { color: var(--text-muted, #666); font-size: var(--step--1, .9rem); }
.export-cockpit__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }

.export-word {
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem .75rem; border: 1px solid var(--border, #ddd); border-radius: var(--radius-sm);
  background: var(--surface, #fff);
}
.export-word__lemma { font-family: var(--font-lexical, serif); font-weight: 600; font-size: var(--step-1, 1.1rem); }
.export-word__pos { color: var(--text-muted, #888); font-size: var(--step--2, .8rem); }
.export-word__audio { margin-inline-start: auto; display: flex; align-items: center; gap: .3rem; }
.export-word__audio-lang {
  font-size: var(--step--2, .75rem); font-weight: 700; letter-spacing: .03em;
  padding: .1rem .45rem; border-radius: var(--radius-pill, 1rem);
  background: var(--brand-surface, #e6f2ea); color: var(--brand-strong, #2f7a4d);
}
.export-word__audio-none { color: var(--text-muted, #aaa); font-size: var(--step--2, .75rem); }
.export-word__remove {
  flex: none; inline-size: 1.75rem; block-size: 1.75rem; display: inline-flex; align-items: center;
  justify-content: center; border: 1px solid var(--border, #ddd); border-radius: 50%;
  color: var(--text-muted, #888); text-decoration: none; font-size: .9rem;
}
.export-word__remove:hover, .export-word__remove:focus-visible { border-color: var(--danger, #c0392b); color: var(--danger, #c0392b); }

.export-cockpit__pagination {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  margin-block-start: var(--sp-md, 1rem);
}
.export-cockpit__page-of { color: var(--text-muted, #666); font-size: var(--step--1, .9rem); }

.export-cockpit__actions { margin-block-start: var(--sp-md, 1rem); display: flex; gap: var(--sp-sm, .5rem); flex-wrap: wrap; }
.export-cockpit__note { margin-block-start: var(--sp-sm, .5rem); color: var(--text-muted, #666); font-size: var(--step--1, .9rem); }
.export-cockpit__empty { color: var(--text-muted, #888); }

/* DE: Anybook-Vorlesestift (ADR 0090) — ein einladendes, ruhiges Panel unter der Auswahl: Stift-Sprachen als
       antippbare Chip-Checkboxen, eine aufklappbare Kurzanleitung. EN: Anybook reading pen — a calm, inviting
       panel below the selection: pen languages as tappable chip checkboxes, a collapsible how-to. */
.export-cockpit__anybook {
  margin-block-start: var(--sp-lg, 1.5rem); padding: var(--sp-md, 1rem) var(--sp-lg, 1.5rem);
  background: var(--brand-surface, #e6f2ea); border-radius: var(--radius-lg, .75rem);
}
.export-cockpit__anybook h2 { margin-block: 0 .25rem; font-size: var(--step-1, 1.15rem); }
.export-cockpit__anybook-intro { color: var(--text-muted, #556); margin-block-end: var(--sp-md, 1rem); }
.export-cockpit__anybook-form { display: flex; flex-wrap: wrap; align-items: end; gap: 1rem; }
.export-cockpit__pen-langs { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.export-cockpit__pen-langs legend {
  padding: 0; font-weight: 700; font-size: var(--step--1, .9rem); margin-block-end: .5rem;
}
.export-cockpit__pen-lang {
  display: inline-flex; align-items: center; gap: .4rem; margin-inline-end: .5rem; margin-block-end: .4rem;
  padding: .3rem .7rem; background: var(--surface, #fff); border: 1px solid var(--border, #ddd);
  border-radius: var(--radius-pill, 1rem); cursor: pointer;
}
.export-cockpit__pen-lang:hover { border-color: var(--brand-strong, #2f7a4d); }
.export-cockpit__pen-lang:has(:checked) {
  border-color: var(--brand-strong, #2f7a4d); background: var(--surface, #fff);
  box-shadow: inset 0 0 0 1px var(--brand-strong, #2f7a4d);
}
.export-cockpit__anybook-help { margin-block-start: var(--sp-md, 1rem); font-size: var(--step--1, .9rem); }
.export-cockpit__anybook-help summary { cursor: pointer; font-weight: 700; }
.export-cockpit__anybook-steps { margin-block: .5rem 0; padding-inline-start: 1.25rem; color: var(--text-muted, #556); }
.export-cockpit__anybook-steps li { margin-block-end: .3rem; }

/* Gestaltung (S7): layout preset + school font + the didactic switches, laid out like the language fieldset. */
.export-cockpit__anybook-style { border: 0; margin: 0; padding: 0; min-inline-size: 0;
  display: flex; flex-wrap: wrap; align-items: end; gap: .5rem 1.25rem; }
.export-cockpit__anybook-style legend { flex-basis: 100%; font-weight: 700; margin-block-end: .35rem; }
.export-cockpit__field { display: flex; flex-direction: column; gap: .2rem; margin: 0; }
.export-cockpit__field select { min-block-size: 44px; }
.export-cockpit__switch { display: inline-flex; align-items: center; gap: .4rem; min-block-size: 44px; }
.export-cockpit__anybook-actions { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .6rem; margin-block-start: .5rem; }