/* AI Værk Learn, Eingang. Gestaltung wie die Anmeldung des Dashboards
   (dashboard/internal/web/assets/app.css, Abschnitt 11 „Eingang“), Tokens
   und Schriften aus brand/tokens.css. Thema folgt dem System. */

:root {
  color-scheme: light dark;
  --d-app: oklch(0.955 0.007 85);
  --d-surface: oklch(0.985 0.004 85);
  --d-inner: oklch(0.963 0.006 85);
  --d-ink: oklch(0.235 0.028 255);
  --d-soft: oklch(0.345 0.024 255);
  --d-muted: oklch(0.48 0.02 255);
  --d-line: oklch(0.912 0.008 85);
  --d-line-strong: oklch(0.86 0.01 85);
  --d-chip: color-mix(in oklch, var(--d-ink) 5%, transparent);
  --d-accent: oklch(0.45 0.075 240);
  --d-accent-soft: oklch(0.94 0.02 240);
  --d-warn-ink: oklch(0.5 0.17 27);
  --d-block: oklch(0.935 0.03 315);
  --d-block-ink: oklch(0.45 0.12 318);
  --d-btn: var(--d-ink);
  --d-btn-ink: var(--d-surface);
  --d-btn-hover: var(--d-soft);
  --d-focus: var(--d-accent);
  --d-shadow-raise: 0 1px 1px oklch(0.237 0.009 75.2 / 0.04), 0 2px 6px oklch(0.237 0.009 75.2 / 0.05);
  --d-t-press: 120ms;
  --d-t-press-out: 160ms;
  --d-druck: var(--d-t-press-out);
  --d-t-hover: 150ms;
  --d-t-in-fade: 180ms;
  --d-t-in-rise: 340ms;
  --d-t-in-step: 60ms;
}
@media (prefers-color-scheme: dark) {
  :root {
    --d-app: oklch(0.205 0.008 85);
    --d-surface: oklch(0.24 0.009 85);
    --d-inner: oklch(0.277 0.01 85);
    --d-ink: oklch(0.953 0.01 87);
    --d-soft: oklch(0.89 0.014 85);
    --d-muted: oklch(0.805 0.018 85);
    --d-line: oklch(0.31 0.01 85);
    --d-line-strong: oklch(0.39 0.012 85);
    --d-chip: color-mix(in oklch, var(--d-ink) 7%, transparent);
    --d-accent: oklch(0.78 0.085 232);
    --d-accent-soft: oklch(0.31 0.05 240);
    --d-warn-ink: oklch(0.8 0.114 25);
    --d-block: oklch(0.3 0.06 315);
    --d-block-ink: oklch(0.8 0.1 318);
    --d-btn-hover: oklch(1 0 0);
    --d-shadow-raise: 0 1px 1px oklch(0 0 0 / 0.3), 0 2px 6px oklch(0 0 0 / 0.25);
  }
}

html {
  background: var(--d-app);
  color: var(--d-ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body { margin: 0; text-wrap: pretty; }
h1 { margin: 0; text-wrap: balance; font-family: var(--font-brand); }
p { margin: 0; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--d-accent-soft); color: var(--d-ink); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--d-focus); outline-offset: 2px; }

.d-mark {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-brand);
  font-weight: 610;
  font-size: 18px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--d-ink);
  text-decoration: none;
  white-space: nowrap;
}
.d-mark svg { flex: none; width: 0.9em; height: 0.9em; }

.d-card {
  min-width: 0;
  box-sizing: border-box;
  background: var(--d-surface);
  border-radius: var(--r-lg);
  padding: 6px;
  box-shadow: var(--d-shadow-raise);
  display: flex;
  flex-direction: column;
}
.d-card__in {
  min-width: 0;
  box-sizing: border-box;
  background: var(--d-inner);
  border-radius: calc(var(--r-lg) - 6px);
  padding: 14px;
}

.d-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  min-height: 36px;
  box-sizing: border-box;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-control);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--d-line-strong);
  color: var(--d-ink);
  font-size: 13px;
  line-height: 1.3;
  font-weight: 500;
  text-decoration: none;
  transition: scale var(--d-druck) var(--ease), background-color var(--d-t-hover) var(--ease), color var(--d-t-hover) var(--ease);
  -webkit-user-select: none;
  user-select: none;
}
.d-btn::before { content: ""; position: absolute; inset: -2px 0; }
.d-btn > svg:first-child { margin-left: -2px; }
.d-btn--primary { background: var(--d-btn); color: var(--d-btn-ink); box-shadow: none; }
@media (hover: hover) {
  .d-btn--primary:hover { background: var(--d-btn-hover); }
}
.d-btn:active { scale: 0.98; --d-druck: var(--d-t-press); }
.d-btn--primary[aria-busy="true"] { background: var(--d-btn-hover); cursor: progress; }
@media (pointer: coarse) {
  .d-btn { min-height: 44px; font-size: 14px; }
}

html.d-enter .d-in { opacity: 0; translate: 0 6px; }
.d-in {
  transition: opacity var(--d-t-in-fade) var(--ease-out), translate var(--d-t-in-rise) var(--ease-out);
  transition-delay: calc(var(--d-i, 0) * var(--d-t-in-step));
}
.d-i1 { --d-i: 1; }
.d-i2 { --d-i: 2; }

.d-gate {
  min-height: 100dvh;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  padding: 40px 16px 56px;
}
.d-gate__inner { width: min(460px, 100%); display: flex; flex-direction: column; align-items: center; gap: 24px; }
.d-gate__mark { font-size: 20px; }
.d-gate__card { width: 100%; }
.d-gate__body { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 28px 24px 24px; }
.d-gate__icon {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 8px;
  border-radius: var(--r-sm);
  background: var(--d-block);
  color: var(--d-block-ink);
}
.d-gate__title { font-size: 26px; line-height: 1.15; font-weight: 600; letter-spacing: -0.03em; }
.d-gate__lead { max-width: 38ch; color: var(--d-soft); }
.d-gate__note { max-width: 46ch; text-align: center; font-size: 13px; line-height: 1.5; color: var(--d-muted); }
.d-gate__status { min-height: 1.5em; color: var(--d-soft); }
.d-gate__status:empty { min-height: 0; }
.d-gate__status[data-art="fehler"] { display: flex; align-items: flex-start; gap: 8px; color: var(--d-warn-ink); }
.d-gate__status > svg { flex: none; margin-top: 2px; }
@media (max-width: 420px) {
  .d-gate { padding-top: 24px; place-items: start center; }
  .d-gate__body { padding: 22px 18px 18px; }
}

/* Code-Formular: Feld und Taste auf voller Breite der Karte. */
.l-form { align-self: stretch; display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.l-label { font-size: 13px; font-weight: 500; color: var(--d-soft); }
.l-input {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-control);
  background: var(--d-surface);
  box-shadow: inset 0 0 0 1px var(--d-line-strong);
  color: var(--d-ink);
  font-family: var(--font-brand);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  -webkit-appearance: none;
  appearance: none;
  transition: box-shadow var(--d-t-hover) var(--ease);
}
.l-input::placeholder { color: var(--d-muted); opacity: 1; letter-spacing: 0.02em; text-transform: none; font-family: var(--font-body); }
.l-input:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--d-focus); }
.l-input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--d-warn-ink); }
.l-input[aria-invalid="true"]:focus-visible { box-shadow: inset 0 0 0 2px var(--d-warn-ink); }
.l-form > .d-btn { width: 100%; }

@media (prefers-reduced-motion: reduce) {
  html.d-enter .d-in { opacity: 1; translate: none; }
  .d-in, .d-btn, .l-input { transition: none; }
}