/* ONYX Platform · Shell Layout
 * ----------------------------------------------------------------------------
 * NUR Struktur/Layout des gemeinsamen Shells und der surface-übergreifenden
 * Navigation. KEINE neue Designsprache: ausschließlich Tokens und Patterns aus
 * style.css (Farben, Linien, Schrift, Spacing). style.css bleibt die
 * verbindliche Design-SSoT (Architecture: "Never introduce a new design
 * language"). Dieses Blatt wird zusätzlich zu style.css geladen.
 * ------------------------------------------------------------------------- */

/* Shell nutzt denselben Rahmen wie das Dashboard (.frame). */
.platform-shell { min-height: 100vh; }

/* Surface-Switcher (COMMAND ↔ COMPASS) — sitzt rechts im Masthead, im
   selben Duktus wie .meta/.kicker. */
.surface-switcher {
  display: flex;
  gap: 18px;
  align-items: baseline;
}
.surface-tab {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--grey-3);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.surface-tab:hover { color: var(--grey-4); }
.surface-tab.active {
  color: var(--black);
  border-bottom-color: var(--black);
}

/* Bereichs-Tabs innerhalb einer Surface (Canon §7). */
.area-tabs-host { padding: 20px 0 8px; }
.area-tabs {
  display: flex;
  gap: 24px;
  border-bottom: var(--line-thin);
  padding-bottom: 12px;
}
.area-tab {
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--grey-3);
  text-decoration: none;
  transition: color var(--t-fast);
}
.area-tab:hover { color: var(--grey-4); }
.area-tab.active { color: var(--black); }

/* Mount-Container der aktiven Surface. */
.surface-root { padding: 28px 0 64px; }

/* Phase-1-Platzhalter der COMPASS-Surface — bewusst zurückhaltend. */
.compass-placeholder { margin-bottom: 24px; }
.compass-placeholder .todo-note { margin-top: 12px; }

/* ---- COMPASS Surface (Phase 2) — nur bestehende Tokens/Patterns ----------
 * UI-Audit (Pre-Commit): Alle Formular-, Karten-, Masken- und Label-Styles
 * kommen unverändert aus style.css (.mask-actions, .mask-field, .mask-submit,
 * .command-block, .command-label, .command-domain, .level-title, .plain-list,
 * .sub-label, .muted, .todo-note). Hier stehen NUR COMPASS-spezifische
 * Layouts ohne COMMAND-Gegenstück (Begründung im UI-Audit-Report).           */

/* Today's Compass: nutzt das bestehende .command-grid. */
.compass-grid { margin-bottom: 28px; }

/* Fünf Karten (§8): DIESELBE Plattform-Karte wie COMMAND (.agent-cards /
   .agent-card aus style.css — Statuspunkt, Titel, Meta, Chevron, Leitsatz,
   Statuszeile, aktiv=schwarz). Kein eigenes COMPASS-Card-Pattern
   (UI-Alignment 2026-07-09); Hebel-Markierung läuft über den Statuspunkt ⚫
   und die Statuszeile, wie die Kritisch-Markierung in COMMAND. */
.surface-root .agent-cards { margin-bottom: 32px; }
/* Karten-Titel versal (MIND · EMOTION · MOVE · FUEL · RECOVER) — reine
   Darstellung. Font-Size/Weight/Letter-Spacing/Ausrichtung von .agent-title
   bleiben unverändert (style.css). Scope .surface-root → COMMAND unberührt. */
.surface-root .agent-title { text-transform: uppercase; }

.compass-closing {
  text-align: center;
  font-size: 18px;
  font-weight: var(--w-light);
  letter-spacing: 4px;
  margin: 36px 0 20px;
  color: var(--black);
}
.compass-actions { justify-content: center; }
.compass-enter { letter-spacing: 3px; }

/* Morning-Prompt: normale Plattform-Card (.command-block), nur Abstand. */
.compass-morning-prompt { margin-bottom: 24px; }

/* „EINEN MOMENT" — bewusste Atempause. */
.compass-moment {
  text-align: center;
  font-size: 20px;
  letter-spacing: 6px;
  color: var(--grey-3);
  padding: 60px 0;
  animation: momentFade 1.6s ease;
}
@keyframes momentFade { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0.5; } }

/* Timeline (§17) — reines Zeilen-Layout; das Kind-Label ist die geteilte
   Plattform-Komponente .command-domain aus style.css. */
.tl-scope { margin-bottom: 20px; }
.tl-list { list-style: none; padding: 0; margin: 0; }
.tl-entry {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 6px 0;
  border-bottom: var(--line-thin);
  font-size: 13px;
}
.tl-entry .command-domain { min-width: 84px; }
.tl-title { flex: 1; color: var(--black); }
.tl-when { color: var(--grey-3); font-size: 11px; }