@layer panels { /* ══════════════════════════════════════════════════════════════════════════ v3/panels.css — Rollen, Mono-Reduktion, Dichte pro Tab Dashboard-v3 WP8, 27.07.2026 ══════════════════════════════════════════════════════════════════════════ */ /* ── Keine Panel-Sonderfarben mehr ────────────────────────────────────────── Bis v4.0 waren #tab-identity, #tab-mythos und #tab-wohlbefinden bewusst coral-primaer. Mit der Umstellung auf EINE Hue-Achse ist das entfallen: eine zweite Farbfamilie einzeln stehen zu lassen, war genau die Unstimmigkeit, die weg sollte. Alle Panels tragen jetzt denselben Akzent. Wer einzelne Bereiche unterscheiden will, nimmt --accent-alt-* - dieselbe Familie, nur heller. */ /* ── Mono-Reduktion ───────────────────────────────────────────────────────── 156 Legacy-Regeln setzen var(--font-mono); Mono war damit die dominante Schrift des UI und erzeugte den Terminal-Charakter, den Perplexity nicht hat. Mono bleibt fuer DATEN - Zahlen, IDs, Timestamps, Stat-Werte, Code - und verschwindet aus Prosa, Labels und Eyebrows. Kein Sheet wird angefasst: der Layer `panels` liegt nach `legacy`, normale Deklarationen genuegen. Bewusst NICHT dabei sind Selektoren, die tatsaechlich Zahlen tragen (etwa .xr-count) - die bleiben Mono. */ .editorial-hero-eyebrow, .editorial-hero-meta, .editorial-hero-marginalia, .stat-card-label, .ov-stat-label, .ov-stat-sub, .ov-section-note, .ov-margin-eyebrow, .ov-mood-label, .memory-highlights-subtitle, .factory-eyebrow, .factory-stat-label, .factory-stat-sub, .factory-boss-meta, .factory-task-meta, .factory-task-status, .factory-decision-status, .factory-agent-status, .factory-empty-hint, .factory-detail-meta, .archmap-eyebrow, .archmap-panel-eyebrow, .archmap-panel-status, .archmap-panel-section-title, .archmap-panel-meta-label, .archmap-hint, .wb-eyebrow, .wb-marker-note, .wb-card-sub, .wb-label, .wb-heatmap-label, .wb-quote-meta, .wb-statusbar, .wb-strip, .dreaming-stat-label, .dreaming-trigger-row-label, .v-note, .v-card-meta, .v-row-meta, .w1-step-status, .mood4d-cell-label, .webchat-msg-meta, .id-editor-meta, .notif-meta, .logs-status, .cmdk-type, .polish-chart-label, .tk-log-title, .x-reels-hero-meta, .empty-hint, .lineage-prefix, /* Codex-Sektionskoepfe: "~ heute", "~ stimmung", "~ werkzeug". Das sind Ueberschriften, keine Daten - der Terminal-Anstrich ist genau das, was v4 ablegt. Die Marker-Zeichen (~ > //) bleiben, nur die Schrift wird ruhig. */ .ov-section-header, .ov-margin-action, .ov-mood-detail, .ov-marker, .ov-brief-row, .ov-hero-prefix, .curiosity-tile, .curiosity-label { font-family: var(--font-sans); letter-spacing: 0; } /* Wo Mono bleibt, richten sich Ziffern aus - das legitimiert sie, statt sie zu kaschieren. */ .stat-value, .ov-stat-value, .factory-stat-value, .wb-stat-value, .xr-count, .clock, .header-stats, .logs-ts, code, pre { font-variant-numeric: tabular-nums; } /* ── Editorial-Hero: in v3 zurueckgenommen ────────────────────────────────── Der Hero belegt in v1 den kompletten oberen Bildschirm mit einer Riesen-Headline, roemischen Eyebrows und rotierender Marginalia. In v3 ist die Ask-Bar das Zentrum der Startseite; der Hero schrumpft auf eine Zeile Kontext, statt ersatzlos zu verschwinden - die Angaben (VPS, Tag, Uptime) sind nuetzlich. */ #tab-overview .editorial-hero { padding: 0 0 var(--sp-5); border: 0; background: none; } #tab-overview .editorial-hero-title { font-family: var(--font-hero); font-size: var(--fs-2xl); font-weight: var(--fw-normal); line-height: var(--lh-2xl); letter-spacing: var(--tr-2xl); } #tab-overview .editorial-hero-eyebrow, #tab-overview .editorial-hero-meta { font-size: var(--fs-xs); color: var(--text-3); } /* Die rotierte Marginalia ist der editorial-lasteste Rest - gerade stellen. */ #tab-overview .editorial-hero-marginalia { transform: none; } /* Der atmende Coral-Radialgradient (editorial.css, 28s-Animation ueber body::after mit mix-blend-mode) kostet dauerhaft GPU fuer einen Effekt, den in v3 das Papier-Grain uebernimmt. Animation aus, Rest stark gedaempft. */ body::after { animation: none !important; opacity: .35; } /* ── Roemische Ziffern ────────────────────────────────────────────────────── applyEditorialNumbering() setzt Ⅰ Ⅱ Ⅲ vor jeden Section-Titel. v3 ruft die Funktion nicht, aber Legacy-CSS haelt Platz dafuer frei. */ .section-title.editorial-numbered::before { content: none; } /* ── Dichte pro Tab ───────────────────────────────────────────────────────── Die drei dichtesten Ansichten bekommen etwas Luft, ohne die Tabellen zu sprengen. */ #tab-trading .row-item, #tab-system .row-item, #tab-docs .row-item { padding-block: var(--sp-2); } #tab-overview .ov-section { margin-bottom: var(--sp-6); } /* Container-Breite fuer die Startseite: Lesbarkeit vor Randlosigkeit. */ #tab-overview > .ov-codex, #tab-overview > .editorial-hero { max-width: var(--measure-wide); margin-inline: auto; } /* ── Architektur: unerreichbarer Inhalt ───────────────────────────────────── system-map.css:73 kombiniert justify-content:end mit overflow-x:auto. Das ist der klassische Flexbox-Fallstrick: bei Ueberlauf ragt der Inhalt ueber die ANFANGSkante hinaus, und dorthin laesst sich nicht scrollen - die vorderen Stat-Bloecke lagen bei left:-145px und waren schlicht nicht erreichbar. Gemessen, nicht vermutet. Der kanonische Griff: linksbuendig ausrichten und die Gruppe stattdessen ueber margin-inline-start:auto nach rechts schieben. Ist Platz da, steht sie rechts wie vorher; laeuft sie ueber, beginnt sie links und scrollt korrekt. Dazu max-width von 60vw auf 100%: vw ignoriert die Rail, der Container ist in v3 um --rail-w schmaler als der Viewport. Die Legacy-Shell behaelt den Fehler - sie ist eingefroren. */ .archmap-stats { justify-content: flex-start; max-width: 100%; } .archmap-stats > :first-child { margin-inline-start: auto; } /* ── Schmale Schirme: unerreichbare Inhalte ───────────────────────────────── Gemessen bei 375x812 und 768x1024 mit tests/e2e/verify-tabs.mjs. Gezaehlt wird nur, was UEBER die Viewportkante ragt UND keinen scrollbaren Vorfahren hat - erreichbarer Ueberlauf (breite Tabelle in einer Scrollbox) ist die uebliche Loesung und kein Fehler. Drei Ursachen, drei Fixes. */ @media (max-width: 900px) { /* (1) TABELLEN OHNE SCROLLRAHMEN. approvals: 712px breite Tabelle in section.card mit overflow-x:visible, ragt bei 375px um 378px raus. warroom: .wr-table mit 696px, 366px raus. Die Spalten rechts waren mit keiner Geste erreichbar. Die Karte wird zur Scrollbox statt die Tabelle umzubauen - das haelt das Tabellenlayout intakt. :has() traegt hier, weil beide Shells auf aktuellen Engines laufen; greift es nicht, faengt die Regel darunter den Fall ab. */ #tab-approvals .card:has(table), #tab-warroom .card:has(table), #tab-warroom .card:has(.wr-table) { overflow-x: auto; } /* Rueckfall ohne :has() - die Tabelle selbst wird scrollbar. */ #tab-approvals table, #tab-warroom .wr-table { max-width: 100%; } /* (2) FLEX-KINDER, DIE NICHT SCHRUMPFEN DUERFEN. .v-row-chat hat flex-shrink:0 (phase-v.css:71) und wird damit 387px breit in einem 375px-Viewport. .tk-err erbt das Standard-min-width:auto eines Flex-Kindes und wird 48px ueber die Kante geschoben. Beide duerfen auf schmalen Schirmen schrumpfen; lange Zeichenketten ohne Trennstelle brechen notfalls mitten im Wort, statt die Zeile zu sprengen. */ .v-row { flex-wrap: wrap; } .v-row-chat { flex-shrink: 1; min-width: 0; overflow-wrap: anywhere; } .tk-logrow { flex-wrap: wrap; } .tk-err { min-width: 0; overflow-wrap: anywhere; } /* (3) ZEILE, DIE NICHT UMBRICHT. .x-reels-actions steht auf margin-left:auto in einem flex-wrap-Container und wird dadurch 357px breit - 22px zu viel. Auf schmalen Schirmen soll sie eine eigene Zeile bekommen statt sich nach rechts zu druecken. */ .x-reels-actions { margin-left: 0; width: 100%; flex-wrap: wrap; } } @media (max-width: 720px) { /* Die Karte ragte 6px raus, obwohl das Grid bei <=720px auf 1fr steht - sie war also breiter als ihre eigene Spur. Das passiert, wenn Innenabstand und Rahmen zur Breite addiert werden statt in sie hinein. */ .x-reels-card { box-sizing: border-box; max-width: 100%; min-width: 0; } .x-reels-grid { min-width: 0; } } }