/*!
 * Early-Access Header (Landing-Look)
 * File: /early-access/early-access.css
 * Version: v1.2 (2025-10-06)
 *
 * Leitideen
 * - Eine Breitenquelle für Header + Banner + Main: .page
 * - Kapselung über ea-* Klassen – keine Kollision mit Engine-Styles
 * - Banner-Theming über Engine-Tokens (--c-s, --c-e)
 * - Progressive Reduktion wie Landing (Container-Queries)
 */

/* ============================================================================
   0) Tokens / Fallbacks (falls Engine-Tokens fehlen)
   ========================================================================== */
:root {
  /* Layout-Bezug aus der Engine (Fallbacks für Standalone-Betrieb) */
  --ea-max-width: var(--d2-max-width, 1280px);
  --ea-pad-x:     var(--d2-page-pad, 24px);
  --ea-gap:       var(--d2-gap, 12px);
  --ea-gap-lg:    var(--d2-gap-lg, 16px);

  /* Heller Header wie Landing */
  --ea-surface:   #ffffff;
  --ea-text:      #0b1b2d;
  --ea-muted:     #637386;
  --ea-border:    rgba(8,23,37,0.12);
  --ea-shadow:    0 2px 8px rgba(0,0,0,0.05);
  --ea-logo-ring: #1fd0c8;

  /* Banner-Defaults (werden durch Themes überschrieben) */
  --ea-banner-bg: #1fbe8b;
  --ea-banner-fg: #0b1b2d;
}

/* ============================================================================
   1) Gemeinsamer Seiten-Container (Header + Banner + Main)
   ========================================================================== */
.page {
  inline-size: 100%;
  max-inline-size: var(--ea-max-width);
  margin-inline: auto;
  padding-inline: var(--ea-pad-x);
  box-sizing: border-box;
  overflow: clip; /* verhindert Subpixel-Überstände rechts */
}

/* ============================================================================
   2) Header-Wrap (nur vertikaler Abstand + CQ-Anker)
   ========================================================================== */
.ea-wrap {
  inline-size: 100%;
  margin-block: var(--ea-gap-lg);
  padding-inline: 0;       /* Seite paddet .page – nicht der Header */
  max-inline-size: none;   /* Breite kommt von .page */
  container-type: inline-size; /* Container Queries wie Landing */
}

/* ============================================================================
   3) Header: Brand | Nav (zentriert) | Controls (rechts)
   ========================================================================== */
.ea-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;

  background: var(--ea-surface);
  color: var(--ea-text);
  border: 1px solid var(--ea-border);
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: var(--ea-shadow);

  /* gleiche Kastenbreite wie Banner, keine Border-„+1px“-Effekte */
  inline-size: 100%;
  margin-inline: 0;
  box-sizing: border-box;
}

/* Brand */
.ea-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ea-logo  {
  inline-size: 28px; block-size: 28px; border-radius: 8px;
  display: grid; place-items: center;
  font: 700 12px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ea-logo-ring);
  border: 2px solid var(--ea-logo-ring);
  background: #f0fffd;
}
.ea-titles { line-height: 1.1; min-width: 0; }
.ea-title  { font: 700 16px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: var(--ea-text); }
.ea-sub    { font: 400 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: var(--ea-muted); }

/* Nav (zentriert) */
.ea-nav  { justify-self: center; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ea-link {
  text-decoration: none; color: var(--ea-text);
  padding: 6px 10px; border-radius: 999px; border: 1px solid transparent;
}
.ea-link:is(:hover, :focus-visible) {
  border-color: var(--ea-border);
  outline: 2px solid rgba(8,23,37,0.08); outline-offset: 2px;
}

/* Controls (ausgegraut, ohne Funktion) */
.ea-controls       { justify-self: end; display: flex; gap: 8px; }
.ea-chip, .ea-icon {
  display: inline-grid; place-items: center;
  min-inline-size: 30px; height: 30px; border-radius: 999px;
  font: 600 13px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ea-text);
  border: 1px solid var(--ea-border);
  background: #eef2f5;
}
.is-disabled { opacity: .45; filter: grayscale(1); pointer-events: none; cursor: not-allowed; }
.ea-icon     { font-size: 14px; padding-inline: 6px; }

/* ============================================================================
   4) Banner (über volle Seitenbreite) + Token-Themes
   ========================================================================== */
.ea-banner {
  margin-block-start: var(--ea-gap);
  border-radius: 12px;
  padding: 8px 12px;
  text-align: center;
  font: 700 13px/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  letter-spacing: .02em;

  color: var(--ea-banner-fg);
  background: var(--ea-banner-bg);
  border: 1px solid color-mix(in srgb, var(--ea-banner-bg) 65%, black 35%);

  inline-size: 100%;
  margin-inline: 0;
  box-sizing: border-box;
}
.ea-banner a { color: inherit; text-decoration: underline; }

/* Themes: S (grün) / E (gelb) – greifen auf Engine-Tokens zurück */
.ea-banner.theme-s { --ea-banner-bg: var(--c-s, #22c55e); --ea-banner-fg: #0b1b2d; }
.ea-banner.theme-e { --ea-banner-bg: var(--c-e, #f59e0b); --ea-banner-fg: #0b1b2d; }

/* ============================================================================
   5) Responsive Verhalten (Container-Queries, wie Landing/Repo)
   Reihenfolge: Gaps verdichten → Controls weg → Subline weg → Links nacheinander
               → ganze Nav weg → nur noch ID-Icon
   ========================================================================== */

/* A ≤1200: enger setzen */
@container (max-width: 1200px) {
  .ea-header { gap: 12px; }
  .ea-nav    { gap: 10px; }
}

/* B ≤1060: S/U/Globus ausblenden */
@container (max-width: 1060px) {
  .ea-controls { display: none; }
}

/* C ≤980: Subline weg, Titel kleiner */
@container (max-width: 980px) {
  .ea-sub   { display: none; }
  .ea-title { font-size: 15px; }
}

/* D ≤880: „Repository“ zuerst ausblenden (Platzschaffer) */
@container (max-width: 880px) {
  .ea-link-repo { display: none; }
}

/* E ≤780: „Landing“ auch weg; „Rechtliches“ bleibt */
@container (max-width: 780px) {
  .ea-link-landing { display: none; }
}

/* F ≤700: gesamte Nav weg (nur Brand verbleibt) */
@container (max-width: 700px) {
  .ea-nav { display: none; }
}

/* G ≤520: nur noch ID-Icon sichtbar */
@container (max-width: 520px) {
  .ea-titles { display: none; } /* Wortmarke + Unterzeile weg */
  .ea-header { grid-template-columns: auto; justify-items: start; }
  .ea-banner { font-size: 12px; border-radius: 10px; padding: 7px 10px; }
}

/* ============================================================================
   6) Fallback (selten): Wenn .ea-controls im Markup fehlt
   ========================================================================== */
@supports (selector(:has(*))) {
  .ea-header:not(:has(.ea-controls)) {
    display: flex; align-items: center; gap: 16px; justify-content: space-between;
  }
  .ea-header:not(:has(.ea-controls)) .ea-nav { flex: 1 1 auto; justify-content: center; }
}

/* Experimental-Chip: nur für Widgets mit data-experimental */
.widget[data-experimental] .widget-body{
  position: relative;            /* Anker für den Chip */
  container-type: inline-size;   /* für responsives Schrumpfen nur hier */
  /* optional: etwas Luft nach oben, falls Inhalt zu dicht steht */
  --exp-chip-clearance: 0px;     /* bei Bedarf z.B. 8px setzen */
  padding-top: calc(var(--d2-pad-lg, 16px) + var(--exp-chip-clearance));
}

.widget[data-experimental] .widget-body::after{
  content: "Tech Preview";
  position: absolute;
  top: 8px; right: 12px;
  z-index: 3;
  padding: 4px 10px;
  font: 600 12px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  letter-spacing: .02em;

  /* Farben aus Tokens – Exposed/Orange */
  --exp-bg: var(--c-e, #f59e0b);
  --exp-fg: #0b1b2d;
  background: var(--exp-bg);
  color: var(--exp-fg);
  border: 1px solid color-mix(in srgb, var(--exp-bg) 65%, black 35%);

  border-radius: 999px;
  box-shadow: var(--shadow-1, 0 2px 8px rgba(0,0,0,.2));
  pointer-events: none; /* stört niemals Interaktionen */
}

/* kompakter auf schmalen Widgets */
@container (max-width: 420px){
  .widget[data-experimental] .widget-body::after{
    padding: 3px 8px;
    font-size: 11px;
  }
}