/* app.css — Komponenten für Importlotse.
   Grundlage: docs/DESIGN_Handoff_v2.md §5 bis §12.

   Leitsätze: ruhig statt alarmistisch · Weißraum als Struktur · Text ist das
   Produkt (alles fließt) · Local-first sichtbar. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--il-font-sans);
  font-size: var(--il-text-md);
  line-height: var(--il-lh-md);
  color: var(--il-text);
  background: var(--il-canvas);
  -webkit-font-smoothing: antialiased;
}

/* Fokus immer sichtbar: 2 px Akzent + 3 px Ring (Handoff §5) */
:focus-visible {
  outline: 2px solid var(--il-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--il-focus-ring);
  border-radius: var(--il-radius-sm);
}

p { margin: 0; }
ul, ol { margin: 0; }

/* ================================================================== *
 * Kopfbereich und Grundraster
 * ================================================================== */

.site-header {
  background: var(--il-surface);
  border-bottom: 1px solid var(--il-border);
}
.site-header__inner {
  max-width: var(--il-content-max);
  margin: 0 auto;
  padding: var(--il-space-3) var(--il-space-5);
  display: flex;
  align-items: center;
  gap: var(--il-space-3);
}
.site-header__inner > * { min-width: 0; }

/* Header-Lockup nach Logo-Spec §6: Marke 28 px, gap 11 zur zweizeiligen
   Wortmarke (Name 16/600 + Claim 12.5 muted). */
.wordmark {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
/* Die Marke traegt keine eigene Flaeche: Petrol auf Weiss, kein Kachel-
   Hintergrund (die Petrol-Kachel ist laut Spec §5 dem App-Icon vorbehalten). */
.wordmark__sign {
  width: 28px;
  height: 28px;
  flex: none;
  display: block;
}
/* Ohne min-width:0 wird der Claim zur Mindestbreite des Flex-Kindes und
   sprengt auf schmalen Geraeten die gesamte Seitenbreite. */
.wordmark__text { min-width: 0; display: block; }
.wordmark__name {
  display: block;
  font-size: 16px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -.015em;
}
.wordmark__claim {
  display: block;
  font-size: var(--il-text-xs);
  line-height: var(--il-lh-xs);
  color: var(--il-text-muted);
  font-weight: 400;
  letter-spacing: 0;
  text-wrap: pretty;
}

.page {
  max-width: var(--il-content-max);
  margin: 0 auto;
  padding: var(--il-space-7) var(--il-space-5) var(--il-space-8);
}

.section + .section { margin-top: var(--il-space-8); }

/* Bereichs-Label: 13 px, 600, uppercase (Handoff §4) */
.section-label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--il-text-muted);
  margin: 0 0 var(--il-space-3);
}

h1 {
  font-size: var(--il-text-3xl);
  line-height: var(--il-lh-3xl);
  font-weight: 600;
  letter-spacing: -.025em;
  margin: 0 0 var(--il-space-3);
  max-width: 20ch;
}
h2 {
  font-size: var(--il-text-2xl);
  line-height: var(--il-lh-2xl);
  font-weight: 600;
  letter-spacing: -.02em;
  margin: 0;
}
.lead {
  font-size: var(--il-text-lg);
  line-height: var(--il-lh-lg);
  color: var(--il-text-secondary);
  max-width: var(--il-measure);
  margin: 0 0 var(--il-space-6);
}

.mono {
  font-family: var(--il-font-mono);
  font-size: var(--il-text-mono);
  line-height: var(--il-lh-mono);
}

/* ================================================================== *
 * Karten
 * ================================================================== */

.card {
  background: var(--il-surface);
  border: 1px solid var(--il-border);
  border-radius: 12px;
  box-shadow: var(--il-shadow-1);
  padding: 20px;
}
.card--muted {
  background: var(--il-surface-muted);
  box-shadow: none;
}
.card + .card { margin-top: var(--il-space-4); }

/* ================================================================== *
 * Buttons
 * ================================================================== */

.button {
  font: inherit;
  font-size: var(--il-text-sm);
  font-weight: 500;
  min-height: var(--il-tap);
  padding: 0 18px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: var(--il-accent);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--il-space-2);
}
.button:hover { background: var(--il-accent-hover); }

.button--secondary {
  background: var(--il-surface);
  color: var(--il-text);
  border-color: var(--il-border-strong);
}
.button--secondary:hover { background: var(--il-surface-muted); }

.button--ghost {
  background: transparent;
  color: var(--il-accent);
  border-color: transparent;
  min-height: 36px;
  padding: 0 10px;
}
.button--ghost:hover { background: var(--il-accent-soft); }

.button--small { min-height: 36px; font-size: var(--il-text-sm); }

.button[disabled] {
  background: var(--il-surface-muted);
  color: var(--il-text-disabled);
  border-color: var(--il-border);
  cursor: default;
}

/* ================================================================== *
 * Importweg-Auswahl (Handoff §7a)
 * ================================================================== */

/* Beiwerk, kein Einstieg: kein eigener Kasten, keine Hervorhebung. */
.importweg { margin-bottom: var(--il-space-4); }
.importweg__label {
  display: block;
  font-size: var(--il-text-sm);
  font-weight: 500;
  margin-bottom: var(--il-space-2);
}
.select {
  font: inherit;
  font-size: var(--il-text-sm);
  min-height: var(--il-tap);
  width: 100%;
  max-width: 28rem;
  padding: 0 var(--il-space-3);
  border-radius: 8px;
  border: 1px solid var(--il-border-strong);
  background: var(--il-surface);
  color: var(--il-text);
}
.select:hover { background: var(--il-surface-muted); }
.importweg__hint {
  font-size: 13px;
  line-height: 20px;
  color: var(--il-text-muted);
  margin-top: var(--il-space-2);
  max-width: var(--il-measure);
}

/* ================================================================== *
 * Dropzone (Handoff §8)
 * ================================================================== */

.dropzone {
  background: var(--il-surface);
  border: 1.5px dashed var(--il-border-strong);
  border-radius: var(--il-radius-lg);
  padding: 44px 32px;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: var(--il-space-3);
  transition: background-color 120ms ease, border-color 120ms ease,
              box-shadow 120ms ease;
}
.dropzone__icon { color: var(--il-accent); line-height: 0; }
.dropzone__title {
  font-size: var(--il-text-lg);
  line-height: var(--il-lh-lg);
  font-weight: 600;
}
.dropzone__hint {
  font-size: var(--il-text-sm);
  color: var(--il-text-muted);
}
.dropzone.is-dragover {
  background: var(--il-accent-soft);
  border-color: var(--il-accent);
  border-style: dashed;
  box-shadow: 0 0 0 4px rgba(14, 110, 104, .12);
}
.dropzone.is-rejected {
  border-color: var(--il-error-border);
}

/* Local-first-Anker: direkt unter der Zone, nicht im Footer (Handoff §1/§8) */
.local-first {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--il-space-2);
  margin-top: var(--il-space-3);
  font-size: 13.5px;
  line-height: 20px;
  color: var(--il-text-muted);
}
.local-first svg { color: var(--il-accent); flex: none; }

/* ================================================================== *
 * Analysezustand (Handoff §8) — erscheint nur oberhalb der Schwelle
 * ================================================================== */

.analysing { display: grid; gap: var(--il-space-3); }
.analysing__file {
  font-family: var(--il-font-mono);
  font-size: var(--il-text-mono);
  color: var(--il-text-secondary);
  word-break: break-all;
}
.analysing__label { font-size: var(--il-text-sm); color: var(--il-text-secondary); }
/* Eine unbestimmte Aktivitätsanzeige — kein Prozentwert, kein Fortschritt. */
.indeterminate {
  height: 6px;
  border-radius: var(--il-radius-pill);
  background: var(--il-border);
  overflow: hidden;
}
.indeterminate::after {
  content: "";
  display: block;
  width: 38%;
  height: 100%;
  border-radius: inherit;
  background: var(--il-accent);
  animation: il-slide 1.1s ease-in-out infinite;
}
@keyframes il-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(300%); }
}
@media (prefers-reduced-motion: reduce) {
  .indeterminate::after { animation: none; width: 100%; opacity: .5; }
}

/* ================================================================== *
 * Ergebnis-Layout (Handoff §9)
 * ================================================================== */

.result-head { margin-bottom: var(--il-space-6); }
.result-head__count {
  font-size: var(--il-text-sm);
  line-height: var(--il-lh-sm);
  color: var(--il-text-muted);
  margin-top: var(--il-space-2);
}

.result-grid { display: grid; gap: var(--il-space-5); }

@media (min-width: 1024px) {
  .result-grid {
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, .85fr);
    align-items: start;
  }
  .result-aside { position: sticky; top: var(--il-space-5); }
}

.result-main { min-width: 0; display: grid; gap: var(--il-space-6); }
.result-aside { min-width: 0; display: grid; gap: var(--il-space-4); }

/* ================================================================== *
 * Filterleiste (Handoff §7)
 * ================================================================== */

.filterbar {
  display: flex;
  gap: var(--il-space-2);
  margin-bottom: var(--il-space-4);
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}
.filter {
  font: inherit;
  font-size: var(--il-text-sm);
  min-height: 36px;
  padding: 0 14px;
  white-space: nowrap;
  border-radius: var(--il-radius-pill);
  border: 1px solid var(--il-border);
  background: var(--il-surface);
  color: var(--il-text-secondary);
  cursor: pointer;
}
.filter:hover { background: var(--il-surface-muted); }
.filter[aria-pressed="true"] {
  background: var(--il-text);
  border-color: var(--il-text);
  color: #fff;
}

/* ================================================================== *
 * Befundkarte (Handoff §7)
 * ================================================================== */

.findings { display: grid; gap: var(--il-space-4); min-width: 0; }

.finding {
  background: var(--il-surface);
  border: 1px solid var(--il-border);
  border-left: 3px solid var(--il-border-strong);
  border-radius: 12px;
  box-shadow: var(--il-shadow-1);
  padding: 20px;
  display: grid;
  gap: 14px;                       /* gap statt Margin: leere Slots = keine Lücke */
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
}
.finding[data-severity="error"]   { border-left-color: var(--il-error); }
.finding[data-severity="warning"] { border-left-color: var(--il-warning); }
.finding[data-severity="info"]    { border-left-color: var(--il-info); }

.finding__icon {
  grid-row: 1;
  width: 28px; height: 28px;
  border-radius: var(--il-radius-sm);
  display: grid;
  place-items: center;
  line-height: 0;
}
.finding[data-severity="error"]   .finding__icon { background: var(--il-error-soft);   color: var(--il-error); }
.finding[data-severity="warning"] .finding__icon { background: var(--il-warning-soft); color: var(--il-warning); }
.finding[data-severity="info"]    .finding__icon { background: var(--il-info-soft);    color: var(--il-info); }

.finding__body {
  grid-column: 2;
  display: grid;
  gap: 10px;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* Meta-Zeile: Badge · Regel-ID · Confidence-Text (rechts) */
.finding__meta {
  display: flex;
  align-items: center;
  gap: var(--il-space-2);
  flex-wrap: wrap;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--il-radius-sm);
  border: 1px solid;
  font-size: var(--il-text-xs);
  line-height: 1;
  font-weight: 500;
  letter-spacing: .02em;
}
.badge::before {
  content: "";
  width: 6px; height: 6px;
  flex: none;
  background: currentColor;
}
.badge--error   { background: var(--il-error-soft);   border-color: var(--il-error-border);   color: var(--il-error-text); }
.badge--warning { background: var(--il-warning-soft); border-color: var(--il-warning-border); color: var(--il-warning-text); }
.badge--info    { background: var(--il-info-soft);    border-color: var(--il-info-border);    color: var(--il-info-text); }

.chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border-radius: var(--il-radius-sm);
  border: 1px solid var(--il-border);
  background: var(--il-surface-muted);
  font-family: var(--il-font-mono);
  font-size: 11.5px;
  line-height: 1;
  color: var(--il-text-secondary);
  white-space: nowrap;
}

/* Confidence: reiner, neutraler Text — nie eingefärbt, nie ein Badge,
   keine Balken, Punkte, Prozente oder Brüche (Handoff §6). */
.confidence {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--il-text-xs);
  line-height: var(--il-lh-xs);
  font-weight: 500;
  color: var(--il-text-secondary);
}
.confidence svg { color: var(--il-text-muted); flex: none; }

.finding__title {
  font-size: var(--il-text-xl);
  line-height: var(--il-lh-xl);
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0;
  text-wrap: pretty;
}
.finding__text {
  font-size: var(--il-text-md);
  line-height: var(--il-lh-md);
  color: var(--il-text-secondary);
  max-width: 68ch;
  text-wrap: pretty;
}

/* Fundstellen */
.locations {
  background: var(--il-surface-muted);
  border: 1px solid var(--il-border);
  border-radius: var(--il-radius-md);
  padding: 12px 14px;
}
.locations__label {
  font-size: var(--il-text-xs);
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--il-text-muted);
  margin-bottom: var(--il-space-2);
}
.locations { min-width: 0; }
.locations ul { list-style: none; padding: 0; display: grid; gap: 8px; min-width: 0; }
.locations li { display: grid; gap: 4px; min-width: 0; }
/* Ohne diese Zeile sprengt der nicht umbrechende <pre>-Inhalt die Karte:
   ein Grid-Kind ist standardmäßig mindestens so breit wie sein Inhalt. */
.locations pre { min-width: 0; max-width: 100%; }
.locations__where {
  font-family: var(--il-font-mono);
  font-size: 11.5px;
  color: var(--il-text-muted);
  word-break: break-word;
}
/* Rohzeilen: horizontal scrollend, nie umbrechend, nie abgeschnitten */
.locations pre {
  margin: 0;
  font-family: var(--il-font-mono);
  font-size: var(--il-text-mono);
  line-height: var(--il-lh-mono);
  overflow-x: auto;
  white-space: pre;
  background: var(--il-surface);
  border: 1px solid var(--il-border);
  border-radius: var(--il-radius-sm);
  padding: 6px 8px;
}
.locations mark {
  background: var(--il-surface-muted);
  color: inherit;
  padding: 0 1px;
  border-bottom: 2px solid var(--il-border-strong);
}
.finding[data-severity="error"]   .locations mark { background: var(--il-error-soft);   border-bottom-color: var(--il-error); }
.finding[data-severity="warning"] .locations mark { background: var(--il-warning-soft); border-bottom-color: var(--il-warning); }
.finding[data-severity="info"]    .locations mark { background: var(--il-info-soft);    border-bottom-color: var(--il-info); }

details.locations > summary {
  cursor: pointer;
  font-size: var(--il-text-xs);
  font-weight: 500;
  color: var(--il-text-secondary);
  list-style: none;
}
details.locations > summary::-webkit-details-marker { display: none; }
details.locations > summary::before { content: "▸ "; color: var(--il-text-muted); }
details.locations[open] > summary::before { content: "▾ "; }
details.locations > summary + * { margin-top: var(--il-space-3); }

/* Erklärung kürzen ab ~6 Zeilen */
.clamped {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ================================================================== *
 * Alles in Ordnung / Vorbehalt
 * ================================================================== */

.all-clear {
  background: var(--il-surface);
  border: 1px solid var(--il-ok-border);
  border-left: 3px solid var(--il-ok);
  border-radius: 12px;
  padding: 20px;
  display: grid;
  gap: var(--il-space-2);
}
.all-clear__title { font-weight: 600; color: var(--il-text); }
.all-clear__text { font-size: var(--il-text-sm); color: var(--il-text-secondary); max-width: var(--il-measure); }

.skip-note {
  background: var(--il-surface);
  border: 1px solid var(--il-border);
  border-left: 3px solid var(--il-warning);
  border-radius: 12px;
  padding: 16px 20px;
  display: grid;
  gap: var(--il-space-2);
}
.skip-note__title {
  font-size: var(--il-text-sm);
  font-weight: 600;
  color: var(--il-warning-text);
}
.skip-note ul { padding-left: 18px; display: grid; gap: 4px; }
.skip-note li { font-size: var(--il-text-sm); color: var(--il-text-secondary); }

.io-error {
  background: var(--il-surface);
  border: 1px solid var(--il-error-border);
  border-left: 3px solid var(--il-error);
  border-radius: 12px;
  padding: 16px 20px;
  font-size: var(--il-text-sm);
  color: var(--il-text-secondary);
}

/* ================================================================== *
 * Nächste Schritte (Handoff §9)
 * ================================================================== */

.steps { list-style: none; padding: 0; display: grid; gap: var(--il-space-5); }
.step {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: var(--il-space-3);
  align-items: start;
}
/* Neutrale Nummernkreise, alle gleich — keine Fortschritts- oder
   Erledigt-Zustände (Handoff §9/§13). */
.step__number {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--il-surface-muted);
  border: 1px solid var(--il-border);
  color: var(--il-text-secondary);
  font-size: var(--il-text-xs);
  font-weight: 500;
  display: grid;
  place-items: center;
}
.step__body { display: grid; gap: 4px; min-width: 0; }
.step__title { font-size: var(--il-text-sm); font-weight: 600; }
.step__text {
  font-size: var(--il-text-sm);
  line-height: var(--il-lh-sm);
  color: var(--il-text-secondary);
  max-width: 68ch;
  text-wrap: pretty;
}
.step__rule { font-size: 11.5px; font-family: var(--il-font-mono); color: var(--il-text-muted); }

.actions { display: flex; flex-wrap: wrap; gap: var(--il-space-3); margin-top: var(--il-space-5); }

/* ================================================================== *
 * Datei-Steckbrief (Handoff §10) — datengetrieben
 * ================================================================== */

.profile__name {
  font-family: var(--il-font-mono);
  font-size: var(--il-text-mono);
  line-height: var(--il-lh-mono);
  word-break: break-all;
  color: var(--il-text);
}
.profile__size { font-size: var(--il-text-xs); color: var(--il-text-muted); margin-top: 2px; }

.profile__list { margin: var(--il-space-4) 0 0; display: grid; }
.profile__row {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: var(--il-space-3);
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid var(--il-surface-muted);
}
.profile__row:first-child { border-top: 0; }
.profile__label { font-size: 13px; color: var(--il-text-muted); }
.profile__value {
  font-size: 13.5px;
  font-weight: 500;
  text-align: right;
  word-break: break-word;
}
.profile__value--mono {
  font-family: var(--il-font-mono);
  font-size: var(--il-text-mono);
  font-weight: 400;
}
.profile__value--muted { color: var(--il-text-muted); font-weight: 400; }
.profile__value--flag  { color: var(--il-error-text); }

/* Severity-Zähler in der Seitenspalte */
.tally { display: grid; gap: var(--il-space-2); }
.tally__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--il-space-3);
  font-size: var(--il-text-sm);
  color: var(--il-text-secondary);
}
.tally__count { font-weight: 600; color: var(--il-text); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--il-radius-pill);
  background: var(--il-accent-soft);
  border: 1px solid var(--il-accent-soft-border);
  color: var(--il-accent-hover);
  font-size: var(--il-text-xs);
  line-height: var(--il-lh-xs);
}

.disclaimer {
  font-size: var(--il-text-xs);
  line-height: var(--il-lh-xs);
  color: var(--il-text-muted);
  max-width: var(--il-measure);
  margin-top: var(--il-space-6);
}

.scope-note {
  font-size: var(--il-text-sm);
  line-height: var(--il-lh-sm);
  color: var(--il-text-secondary);
  display: grid;
  gap: var(--il-space-2);
  max-width: var(--il-measure);
}
.scope-note strong { color: var(--il-text); font-weight: 600; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

[hidden] { display: none !important; }

/* ================================================================== *
 * Mobil (Handoff §11)
 * ================================================================== */

@media (max-width: 1023px) {
  .page { padding: var(--il-space-6) var(--il-space-4) var(--il-space-7); }
  .section + .section { margin-top: var(--il-space-6); }
}

@media (max-width: 639px) {
  h1 { font-size: 27px; line-height: 32px; }
  .lead { font-size: var(--il-text-md); line-height: var(--il-lh-md); }
  .page { padding: var(--il-space-5) var(--il-space-4) 96px; }
  .card { padding: 16px; }
  .finding { padding: 16px; grid-template-columns: 26px minmax(0, 1fr); }
  .finding__title { font-size: 16.5px; line-height: 22px; }
  .dropzone { padding: 32px 20px; }
  .select { max-width: none; }
  .button { width: 100%; min-height: 48px; }
  .button--ghost, .filter { width: auto; }
  /* Confidence bekommt mobil eine eigene volle Zeile */
  .confidence { margin-left: 0; width: 100%; }
  .profile__row { grid-template-columns: 1fr; gap: 2px; }
  .profile__value { text-align: left; }
  .site-header__inner { padding: var(--il-space-3) var(--il-space-4); }
  /* Logo-Spec §6, Header mobil: Marke 22 px, Wortmarke 15/600, ohne Claim. */
  .wordmark__sign { width: 22px; height: 22px; }
  .wordmark__name { font-size: 15px; line-height: 19px; }
  .wordmark__claim { display: none; }

  /* Feste Fußleiste: trägt nur die Zählzeile, keine erfundene Aktion */
  .mobile-tally {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--il-surface);
    border-top: 1px solid var(--il-border);
    padding: 10px var(--il-space-4);
    text-align: center;
    font-size: 12px;
    color: var(--il-text-secondary);
    z-index: 10;
  }
}

@media (min-width: 640px) {
  .mobile-tally { display: none !important; }
}