/* ===========================================================================
   PMA Ops — "JUNTA"                       backend/static/css/base.css
   Reset, Webfonts, Element-Defaults, Typografie, Fokus, Motion, Druck.
   Lädt NACH tokens.css. Nichts hier ist ungelayert — ungelayerte Regeln
   schlagen jede Schicht und würden Mandanten-Overrides still brechen.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   WEBFONTS — selbst gehostet unter /static/fonts, kein CDN (CSP script-src
   'self', §9.7). Vier Dateien, ~63 KB, subset `latin`.
   `unicode-range` erlaubt dem Browser, die Datei bei reinem ASCII trotzdem
   zu laden — der Subset deckt ñ á é í ó ú ü ¿ ¡ bereits ab.
   Fällt eine Datei aus, greift der Fallback-Stack aus tokens.css; die Seite
   bleibt vollständig lesbar, nur flacher. `font-display: swap` sorgt dafür,
   dass nie unsichtbarer Text entsteht.
   /ops lädt nichts davon: dort zeigen die Familien-Tokens auf System-Stacks.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-800.woff2") format("woff2");
  font-weight: 800;             /* EINZIGER Schnitt. Es gibt kein 700. */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-600.woff2") format("woff2");
  font-weight: 600;             /* 600 ist ohnehin der Sonnen-Boden. */
  font-style: normal;
  font-display: swap;
}

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

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-block-start: calc(var(--tap) + var(--sp-4));
  }

  body,
  h1, h2, h3, h4, p, figure, blockquote,
  dl, dd, ol, ul, fieldset, legend {
    margin: 0;
    padding: 0;
  }

  ul[class], ol[class] { list-style: none; }

  img, picture, svg, video { display: block; max-inline-size: 100%; }
  img { block-size: auto; }

  input, button, textarea, select {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
  }

  table { border-collapse: collapse; }

  /* Schrift nie faken: Archivo existiert nur in 800, Source Sans in 400/600.
     Ohne diese Regel synthetisiert der Browser ein 700 aus dem 800er und das
     sieht aus wie ein Renderfehler, nicht wie Design. */
  body { font-synthesis-weight: none; font-synthesis-style: none; }
}

@layer base {

  html, body { background: var(--ground); }

  body {
    color: var(--ink);
    font-family: var(--f-body);
    font-size: var(--step-0);
    line-height: var(--lh-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-block-size: 100%;
  }

  /* --- Überschriften: Beschilderung, nicht Software ----------------------
     Archivo erscheint ausschließlich in 800. Braucht eine Fläche einen
     leiseren Untertitel, nimmt sie `.eyebrow` oder --f-body 600 — es wird
     KEIN zweiter Archivo-Schnitt nachgeladen (Invariante 4, Schriftbudget). */
  h1, h2, h3, h4 {
    font-family: var(--f-display);
    font-weight: 800;
    line-height: var(--lh-display);
    letter-spacing: -0.025em;
    text-wrap: balance;
  }
  h1 { font-size: var(--step-3); }
  h2 { font-size: var(--step-2); letter-spacing: -0.02em; }
  h3 { font-size: var(--step-1); letter-spacing: -0.015em; line-height: var(--lh-tight); }
  h4 { font-size: var(--step-0); letter-spacing: -0.01em; line-height: var(--lh-tight); }

  p, li, dd {
    text-wrap: pretty;
    max-inline-size: var(--measure);
  }
  /* In Rastern und Zeilen zählt die Spaltenbreite, nicht das Zeilenmaß. */
  li[class], dd[class] { max-inline-size: none; }

  b, strong { font-weight: 600; }

  small { font-size: var(--step--1); }

  a {
    color: var(--accent);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
  }
  a:hover { text-decoration-thickness: 3px; }

  /* Zahlen laufen überall in Spalten übereinander. */
  :is(td, th, .data, output, time) { font-variant-numeric: tabular-nums; }

  code, kbd, samp, pre {
    font-family: var(--f-data);
    font-size: 0.9em;
  }

  hr {
    block-size: var(--joint);
    border: 0;
    background: var(--grout);
    margin-block: var(--sp-5);
  }

  /* Abkürzungen mit title sind auf dem Telefon nicht erreichbar — nur
     Unterstreichung, der Klartext steht immer im Satz. */
  abbr[title] { text-decoration: underline dotted; cursor: help; }

  ::selection { background: var(--accent); color: var(--accent-ink); }

  /* --- Fokus ------------------------------------------------------------
     Nur :focus-visible. Ein Ring, der bei Mausklick feuert, erzieht Leute
     dazu, ihn zu ignorieren. Zwei konzentrische Ringe, damit er gegen das
     Control UND die Fläche dahinter liest; Komponenten, die auf einer
     anderen Fläche sitzen, setzen --focus-halo lokal neu. */
  :focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--focus-halo);
    border-radius: var(--r-edge);
  }
  :focus:not(:focus-visible) { outline: none; }

  /* Windows-Kontrastmodus: Systemfarben übernehmen, Ring erzwingen. */
  @media (forced-colors: active) {
    :focus-visible { outline: 3px solid Highlight; box-shadow: none; }
    .chip, .whose, .btn { forced-color-adjust: none; }
  }

  /* --- Formular-Grundlagen ---------------------------------------------- */
  :where(input, select, textarea) { accent-color: var(--accent); }
  textarea { resize: vertical; }
  legend { font-weight: 600; }

  /* --- Bewegung ---------------------------------------------------------
     Eine einzige Mikrointeraktion im ganzen System: der Knopf setzt sich
     beim Drücken in den Estrich (components.css). Alles andere ist
     Zustandswechsel ohne Animation. */
  @media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }   /* reine Verbesserung, nichts hängt daran */
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 1ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ===========================================================================
   DRUCK — ein Angebot wird über die Küchentheke gereicht. Druck ist hier eine
   Fläche, kein Notbehelf.
   WICHTIG: `[hx-get]` wird NICHT pauschal versteckt. Ein Container, der per
   hx-get ein Fragment nachlädt (Fotogrid, Ledger-Seite), würde sonst aus dem
   gedruckten Angebot verschwinden. Versteckt werden nur Bedienelemente.
   =========================================================================== */
@media print {
  @page { size: Letter; margin: 15mm; }

  html, body { background: #fff; color: #000; font-size: 11pt; }

  nav, .appbar, .thumbbar, .bottomnav, .tabs, .toasts,
  .no-print, .skel, .sunbtn, .langswitch,
  button, [role="button"], a.btn,
  button[hx-post], button[hx-get], a.btn[hx-get] { display: none !important; }

  .panel, .panel--lift, .panel--mine {
    box-shadow: none !important;
    border: 1pt solid #000;
    background: #fff;
  }

  a { color: #000; }
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }

  /* Ohne print-color-adjust drucken Chips und Richtungsstreifen leer — und
     damit verliert die Zeile ihre einzige Zustandsangabe. */
  .chip, .whose, .row, .stmt__row, .badge-sev {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .stmt__row, tr, figure, .signature, .mile__item, .drift > li {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  thead { display: table-header-group; }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }

  input, select, textarea { border: 0; padding: 0; appearance: none; background: none; }
}