/* =====================================================================
   Onimai · BLOOM für api.onimai.eu und status.onimai.eu
   ---------------------------------------------------------------------
   Dieselbe Handschrift wie onimai.eu und onimai.ch: Rosé und Gold statt
   Blau/Teal, Unbounded und Manrope statt Bebas/Outfit, ruhiger
   Hintergrund statt Orbs, Rasterschleier und Anime-Canvas.

   WICHTIG — Ladereihenfolge
   Die Views bringen ihre eigenen :root-Tokens in einem <style>-Block
   direkt im Kopf mit. Ein <link> aus partials/head.ejs stuende DAVOR und
   verloere. Deshalb wird dieses Blatt als LETZTES eingebunden, kurz vor
   </head> der jeweiligen View.

   Der Helle Modus (body.light) bleibt unberuehrt: dessen Tokens haben
   hoehere Spezifitaet als :root, und alle farbigen Regeln hier sind auf
   body:not(.light) eingegrenzt.
   ===================================================================== */

/* ---------- 0. Tokens ---------- */
:root{
  --bl-night:#0a0510;
  --bl-surface:#120a1b;
  --bl-glass:rgba(24,15,35,.6);

  --bl-rose:#ff5fa2;
  --bl-blush:#ffa8cd;
  --bl-gold:#ffcf6b;
  --bl-plum:#c07bff;
  --bl-mint:#4de3a5;
  --bl-danger:#ff6b7d;

  --bl-text:#fdf3f8;
  --bl-muted:#a394ad;
  --bl-dim:#61526e;

  --bl-border:rgba(255,190,220,.11);
  --bl-border-2:rgba(255,190,220,.22);
  --bl-ring:rgba(255,95,162,.34);

  --bl-fd:'Unbounded',system-ui,sans-serif;
  --bl-fb:'Manrope',system-ui,sans-serif;
  --bl-fm:'Space Mono',ui-monospace,monospace;
  --bl-ease:cubic-bezier(.2,.8,.25,1);

  /* Die Views rechnen mit diesen Namen — hier zeigen sie auf Bloom. */
  --bg:#0a0510; --bg-card:#120a1b; --bg-surface:#180f23; --bg-glass:rgba(24,15,35,.8);
  --accent:#ff5fa2; --accent-b:#ffcf6b; --accent-dim:rgba(255,95,162,.16);
  --accent-glow:rgba(255,95,162,.34); --storm:#ffa8cd; --purple:#c07bff;
  --ok:#4de3a5; --warn:#ffcf6b; --danger:#ff6b7d; --gold:#ffcf6b;
  --text:#fdf3f8; --text-2:#a394ad; --text-3:#61526e;
  --border:rgba(255,190,220,.11); --border-h:rgba(255,190,220,.26);
  --font-d:'Unbounded',sans-serif; --font-b:'Manrope',sans-serif; --font-m:'Space Mono',monospace;
  --r-sm:10px; --r-md:16px; --r-lg:22px; --r-xl:30px;
}

/* ---------- 1. Ruhiger Hintergrund ----------
   Anime-Canvas, Orbs, Raster und Cursor-Glow sind auf onimai.eu/.ch
   ebenfalls aus. Das ist der groesste Teil des „vereinfacht". */
body:not(.light) #bg-canvas,
body:not(.light) .grid-overlay,
body:not(.light) .orb,
body:not(.light) #cursor-glow{display:none !important;}

/* Der Schleier: exakt die drei Verlaeufe, die auf onimai.eu/.ch als .bl-veil
   ueber der Nacht liegen. `fixed` haelt sie beim Scrollen still — so wie dort
   die fest positionierte Ebene. */
body:not(.light){
  background:
    radial-gradient(900px 620px at 78% -8%,rgba(255,95,162,.16),transparent 62%),
    radial-gradient(760px 560px at 8% 104%,rgba(192,123,255,.13),transparent 62%),
    radial-gradient(620px 420px at 52% 46%,rgba(255,207,107,.05),transparent 66%),
    var(--bl-night) !important;
  background-attachment:fixed !important;
  color:var(--bl-text) !important;
}

/* Das grossflaechige Anime-Foto hinter dem Kopfbereich (body::before) gibt es
   auf onimai.eu/.ch nicht — es ist der auffaelligste Unterschied und kostet
   Ruhe. Die rotierende Anime-Vorschau in der Karte BLEIBT, das ist Inhalt. */
body:not(.light)::before{display:none !important;}

/* Blueten: auf onimai.eu liegen sie HINTER dem Inhalt und etwas kraeftiger.
   Hier hatten sie z-index 2 und flimmerten ueber Karten und Text. */
#petals-canvas{z-index:0 !important;opacity:.8 !important;}

/* Feine Lichtkante unter der Kopfleiste — dasselbe Detail wie .bl-rule dort. */
body:not(.light) .topbar{position:relative;}
body:not(.light) .topbar::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--bl-ring),transparent);
  pointer-events:none;
}

/* ---------- 2. Typografie ---------- */
body{font-family:var(--bl-fb) !important;}
h1,h2,h3,h4,
.section-title,.oni-card-val,.stat-val,.hero-title,.brand-text strong,
.snav-name,.status-title{
  font-family:var(--bl-fd) !important;
  letter-spacing:-.035em !important;
  text-transform:none !important;
}
h1{font-weight:700 !important;line-height:1.04 !important;}
.section-label,.section-sub,.oni-card-label,.stat-key,
.info-row-key,.live-row-label,.k,.mono,code,.pill,.fz-chip,.anime-chip{
  font-family:var(--bl-fm) !important;
  letter-spacing:.1em !important;
}
.section-sub,p{font-family:var(--bl-fb) !important;letter-spacing:normal !important;}
body:not(.light) .section-label,
body:not(.light) .oni-card-label,
body:not(.light) .stat-key,
body:not(.light) .info-row-key,
body:not(.light) .live-row-label{color:var(--bl-dim) !important;text-transform:uppercase !important;}

/* ---------- 3. Karten ---------- */
body:not(.light) .glass,
body:not(.light) .oni-card,
body:not(.light) .api-card,
body:not(.light) .stat-card,
body:not(.light) .platform-card,
body:not(.light) .status-card{
  border:1px solid var(--bl-border) !important;
  border-radius:22px !important;
  background:linear-gradient(158deg,rgba(255,255,255,.05),rgba(255,255,255,.014)) !important;
  backdrop-filter:blur(16px);
  box-shadow:none !important;
  transition:transform .3s var(--bl-ease),border-color .3s,box-shadow .3s;
}
body:not(.light) .oni-card:hover,
body:not(.light) .api-card:hover,
body:not(.light) .stat-card:hover,
body:not(.light) .platform-card:hover{
  transform:translateY(-4px);
  border-color:var(--bl-ring) !important;
  box-shadow:0 26px 56px -30px rgba(255,95,162,.5) !important;
}

/* ---------- 4. Seitenleiste und Kopfzeile ---------- */
body:not(.light) .snav,
body:not(.light) .topbar,
body:not(.light) .site-nav{
  background:rgba(18,10,27,.72) !important;
  border-color:var(--bl-border) !important;
  backdrop-filter:blur(18px);
}
body:not(.light) .snav-link{color:var(--bl-muted) !important;border-radius:14px !important;}
body:not(.light) .snav-link:hover{color:var(--bl-text) !important;background:rgba(255,95,162,.08) !important;}
body:not(.light) .snav-link.active{
  color:var(--bl-text) !important;
  background:linear-gradient(135deg,rgba(255,95,162,.20),rgba(255,207,107,.10)) !important;
  border:1px solid var(--bl-border-2) !important;
}
body:not(.light) .snav-sec{color:var(--bl-dim) !important;font-family:var(--bl-fm) !important;}
body:not(.light) .topbar-search,
body:not(.light) .topbar-btn{
  background:rgba(255,255,255,.04) !important;
  border:1px solid var(--bl-border) !important;
  border-radius:100px !important;
}

/* ---------- 5. Chips, Pillen, Knoepfe ---------- */
body:not(.light) .pill,
body:not(.light) .anime-chip,
body:not(.light) .fz-chip,
body:not(.light) .section-label{
  border-radius:100px !important;
  border:1px solid var(--bl-border-2) !important;
  color:var(--bl-blush) !important;
  background:rgba(255,95,162,.08) !important;
}
body:not(.light) .btn,
body:not(.light) .nav-cta{
  border-radius:100px !important;
  font-family:var(--bl-fm) !important;
  letter-spacing:.1em !important;
  background:linear-gradient(135deg,var(--bl-rose),var(--bl-gold)) !important;
  color:#2a0d1c !important;
  border:none !important;
  box-shadow:0 12px 30px -14px rgba(255,95,162,.7) !important;
}
body:not(.light) .btn-ghost{
  background:transparent !important;
  color:var(--bl-muted) !important;
  border:1px solid var(--bl-border-2) !important;
  box-shadow:none !important;
}

/* ---------- 6. Zustaende ---------- */
body:not(.light) .ok{color:var(--bl-mint) !important;}
body:not(.light) .warn{color:var(--bl-gold) !important;}
body:not(.light) .danger,body:not(.light) .err{color:var(--bl-danger) !important;}
body:not(.light) .dot,body:not(.light) .status-led{box-shadow:0 0 12px currentColor;}

/* Balken und Messwerte */
body:not(.light) #scroll-bar,
body:not(.light) .bar > i,.gauge > i{
  background:linear-gradient(90deg,var(--bl-rose),var(--bl-gold)) !important;
}

/* ---------- 7. Zeilen und Tabellen ---------- */
body:not(.light) .info-row,
body:not(.light) .live-row{border-color:var(--bl-border) !important;}
body:not(.light) .info-row-val,
body:not(.light) .live-row-val,
body:not(.light) .v{font-family:var(--bl-fm) !important;color:var(--bl-text) !important;}
body:not(.light) th{
  font-family:var(--bl-fm) !important;letter-spacing:.14em !important;
  text-transform:uppercase !important;color:var(--bl-dim) !important;
  border-bottom:1px solid var(--bl-border) !important;
}
body:not(.light) td{border-bottom:1px solid var(--bl-border) !important;}

/* ---------- 8. Verlaufstext (Ueberschriften mit .grad / .ok-grad) ---------- */
body:not(.light) .hero-sub{
  font-family:var(--bl-fm) !important;
  color:var(--bl-dim) !important;
  letter-spacing:.22em !important;
}
body:not(.light) .ok-grad,
body:not(.light) .grad{
  background:linear-gradient(120deg,var(--bl-rose),var(--bl-gold)) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}

@media (prefers-reduced-motion:reduce){
  body:not(.light) .oni-card:hover,
  body:not(.light) .api-card:hover,
  body:not(.light) .stat-card:hover,
  body:not(.light) .platform-card:hover{transform:none;}
}

/* ---------- 9. Kleine Schirme ----------
   Unbounded ist deutlich breiter als das frueher hier benutzte Bebas Neue.
   Die grossen Schriftzuege im Kopfbereich (Willkommen, „API Platform", der
   Titel) sind mit fester Groesse gesetzt und schoben die Seite auf dem Handy
   waagerecht raus. Deshalb hier kleiner, enger und umbrechend. */
@media (max-width:760px){
  body:not(.light) .hero-sub{
    font-size:clamp(.85rem,4vw,1.3rem) !important;
    letter-spacing:.12em !important;
    white-space:normal !important;
    overflow-wrap:anywhere;
  }
  body:not(.light) .welcome-heading{
    /* Klein genug, dass „WILLKOMMEN!" in einer Zeile bleibt — break-word statt
       anywhere, damit nicht mitten im Wort umgebrochen wird. */
    font-size:clamp(1.25rem,5.6vw,2.1rem) !important;
    overflow-wrap:break-word;
  }
  body:not(.light) .hero-title,
  body:not(.light) .hero h1{
    font-size:clamp(1.9rem,9vw,3.2rem) !important;
    overflow-wrap:anywhere;
    word-break:break-word;
  }
  /* .main-wrapper ist ein Flex-Container; ohne min-width:0 waechst der
     Inhaltsbereich als Flex-Element auf seine min-content-Breite und schiebt
     die ganze Seite waagerecht raus. */
  body:not(.light) .main-wrapper main{min-width:0;max-width:100%;overflow-x:clip;}
  /* Auch die Kopfleiste darf nicht breiter werden als der Schirm: das
     Suchfeld ist ein Flex-Element und braucht dafuer min-width:0. */
  body:not(.light) .topbar{max-width:100%;}
  body:not(.light) .topbar-search{min-width:0;flex:1 1 auto;}
  body:not(.light) .topbar-actions{flex:0 0 auto;}
}

/* Wortumbruch fuer Ueberschriften und Fliesstext ------------------------
   Auf schmalen Displays (320px) ragten lange Woerter ueber den Rand.
   break-word bricht nur, wenn das Wort sonst nicht passt. */
h1,h2,h3,h4,p,li,td{
  overflow-wrap:break-word;
  word-break:break-word;
  hyphens:auto;
}
p a,code,pre{overflow-wrap:anywhere;}

/* Code-Bloecke: nicht umbrechen (Code bleibt lesbar), sondern sauber
   horizontal scrollen. Inline-Code darf dagegen umbrechen. */
pre{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;}
pre code{white-space:pre;overflow-wrap:normal;word-break:normal;}
:not(pre) > code{overflow-wrap:anywhere;word-break:break-word;}

/* ---------- 10. Handy ----------
   Gemessen bei 390 px und 320 px. Die Seite lief zwar nicht mehr waagerecht
   ueber, war aber muehsam zu lesen: Mono-Text unter 10 px, Ticker-Zeilen, die
   ineinanderliefen, ein Tastaturhinweis ohne Tastatur und Tippziele von 20 px.
   ---------------------------------------------------------------------- */
@media (max-width:760px){
  /* Kein Text unter 11.5 px. Mono-Schrift wirkt zusaetzlich kleiner als sie
     misst, deshalb die Untergrenze grosszuegig. */
  body .ticker,
  body .section-label,
  body .oni-card-label,
  body .stat-key,
  body .info-row-key,
  body .live-row-label,
  body .k,
  body .mono,
  body code,
  body .pill,
  body .fz-chip,
  body .anime-chip{
    font-size:12.5px !important;
    letter-spacing:.06em !important;
  }

  /* Fangnetz fuer alles Uebrige: Was auf dem Handy unter 11.5 px landet, wird
     angehoben. Gemessen waren unter anderem .proc-stat-key (8.3 px),
     .apx-chip (8.6 px) und .prov-meta (9 px) — auf einem Telefon nicht mehr
     lesbar. `min` laesst groessere Schriften unangetastet. */
  body .proc-stat-key,
  body .proc-badge,
  body .proc-role,
  body .prov-meta,
  body .apx-chip,
  body .apx-path,
  body .method-badge,
  body .oni-card-sub,
  body .live-row-label,
  body .sd-key,
  body .gsh-chip{
    font-size:12.5px !important;
  }

  /* Die Ticker-Zeilen bestehen jetzt aus einzelnen Bloecken — als Flex mit
     Trennpunkt lesen sie sich auch umgebrochen sauber. */
  body:not(.light) .ticker{
    display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;
    line-height:1.5;text-align:left;
  }
  body:not(.light) .ticker > span{display:inline-flex;align-items:center;gap:5px;}
  body:not(.light) .ticker > span + span::before{
    content:'·';color:var(--bl-dim);margin-right:9px;
  }

  /* Tippziele: 36 px ist die Grenze, ab der man nicht mehr zielen muss. */
  body:not(.light) .snav-link,
  body:not(.light) .oni-dd-menu a,
  body:not(.light) .nav-link,
  body:not(.light) .site-foot a{
    min-height:36px;display:flex;align-items:center;
  }
  body:not(.light) .btn,
  body:not(.light) .nav-cta,
  body:not(.light) .vibe-oracle-submit,
  body:not(.light) .vibe-refresh,
  body:not(.light) .anime-playground-copy,
  body:not(.light) .anime-playground-controls button,
  body:not(.light) .gsh-chip,
  body:not(.light) summary.ripple-host{min-height:42px;padding-left:18px;padding-right:18px;}
  body:not(.light) .vibe-refresh,
  body:not(.light) .gsh-chip{display:inline-flex;align-items:center;justify-content:center;}

  /* Der Kopfbereich stand sehr tief — das war eine halbe leere Bildschirmhoehe
     vor dem ersten Inhalt. */
  body:not(.light) .hero{padding-top:18px !important;}
  body:not(.light) .welcome-row{gap:12px;}

  /* Karten duerfen den Rand ausnutzen, sonst bleibt kaum Platz fuer Inhalt. */
  body:not(.light) .oni-card,
  body:not(.light) .api-card,
  body:not(.light) .stat-card,
  body:not(.light) .glass{padding:16px 15px !important;}
}

/* Hinweise, die eine Tastatur voraussetzen, gehoeren nicht auf ein Handy. */
@media (hover:none),(pointer:coarse){
  .nur-tastatur{display:none !important;}
}

/* ---------- 11. Mindestschriftgroesse auf dem Handy ----------
   Automatisch aus den Stilblöcken gezogen: jeder Selektor, der eine Groesse
   unter 11 px setzt. Auf dem Telefon ist das nicht mehr lesbar — hier gilt
   ueberall mindestens 11.5 px. Am Desktop bleibt die feine Typografie.
   Gefunden: 69 Selektoren.
   ---------------------------------------------------------------------- */
@media (max-width:760px){
  body .af-chip,
  body .af-link,
  body .af-row .s,
  body .anime-card-badge,
  body .api-card .try-chip,
  body .apx-bodywrap label,
  body .apx-chip,
  body .apx-code,
  body .apx-copy,
  body .apx-field label,
  body .apx-method,
  body .apx-path,
  body .apx-resp-label,
  body .apx-status,
  body .bell-badge,
  body .bell-empty,
  body .bell-item-meta,
  body .bell-panel-head span,
  body .endpoint-url,
  body .footer-live,
  body .footer-text,
  body .gsh-modal-endpoint,
  body .gsh-new,
  body .gsh-search-count,
  body .hero-anime-cap,
  body .hero-eyebrow,
  body .hero-sub,
  body .latency-card-title,
  body .live-anime-cap,
  body .live-card-time,
  body .live-chip,
  body .live-row-label,
  body .lm-bar-top,
  body .lm-sub,
  body .logo-container .logo-text small,
  body .method-badge,
  body .metric-card-label,
  body .metric-sub,
  body .nav-links a,
  body .nav-live,
  body .oni-card-label,
  body .oni-foot,
  body .platform-card .plat-meta,
  body .proc-badge,
  body .proc-role,
  body .proc-stat-key,
  body .proc-uptime-label,
  body .progress-pct,
  body .prov-meta,
  body .rx-count,
  body .rx-kind,
  body .rx-preview-sub,
  body .search-count,
  body .section-label,
  body .session-meta,
  body .session-pill,
  body .sessions-count,
  body .sessions-empty,
  body .snav-foot,
  body .snav-name small,
  body .snav-sec,
  body .stat-key,
  body .ticker,
  body .topbar-clock,
  body .uptime-card-role,
  body .uptime-legend,
  body .vault-tile-meta em,
  body .vibe-palette-swatches li,
  body .wotd-meta{
    font-size:12.5px !important;
    letter-spacing:.06em !important;
  }
}

/* ---------- 12. Kleine Schrift aus Inline-Stilen ----------
   Ein Teil der Karten wird per JavaScript zusammengebaut und bringt die
   Schriftgroesse direkt im style-Attribut mit — da kommt keine Klassenregel
   heran. Die Selektoren unten greifen ausschliesslich die KLEINEN Werte
   (0.58/0.62/0.68rem und 0.8em), grosse Inline-Groessen bleiben unberuehrt.
   ---------------------------------------------------------------------- */
@media (max-width:760px){
  body [style*="font-size: 0.58rem"],
  body [style*="font-size:.58rem"],
  body [style*="font-size: 0.62rem"],
  body [style*="font-size:.62rem"],
  body [style*="font-size: 0.68rem"],
  body [style*="font-size:.68rem"],
  body [style*="font-size: 0.6rem"],
  body [style*="font-size:.6rem"],
  body [style*="font-size:0.8em"]{
    font-size:12.5px !important;
  }
}