/* ==========================================================================
   Komp v2 Phase 6 — delight (planopus.md §Phase 6)
   Loaded only on the ?phase5=1 opt-in route (html.phase5). The default /v2/
   route never links this sheet, so nothing here can touch it.

   Owns only the pieces Phase 6 adds that no other sheet owns:
     1. View Transitions — cross-fade only, 170ms, reduced-motion off, for a
        programmatic move only (a capsule tap or `komp2:page-go`). A finger
        swipe is plain: no fade after it settles.
     2. Empty states — one centred icon + one plain label per empty side page.
     3. Boot splash polish (the critical pre-JS geometry lives inline in
        index.html; this file only adds the entrance fade).
     4. Reach for the model (owner bug, iPhone, new session): the composer's
        model chip while the keyboard is up on an empty box, and the header
        subtitle as the second model button. Added late, exactly here, because
        this sheet is the one loaded only on the ?phase5 route and it must win
        over phase4.css's html.kb-open hide with higher specificity.

   E2/E3/E6/E7 already live in phase4-motion.css and are NOT touched here.
   Keyframe prefix is p6d- to stay clear of that file's p6- keyframes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. View Transitions (planopus.md §6.3, Appendix D risk row)
   Root-only cross-fade between the old and the new snapshot. No named
   elements, no slide — a page switch and a theme swap both read as one calm
   dip. The API is only called from JS when prefers-reduced-motion allows, so
   the media block at the bottom is belt-and-braces.
   -------------------------------------------------------------------------- */
html.phase5::view-transition {
  background: var(--bg);
}

html.phase5::view-transition-old(root),
html.phase5::view-transition-new(root) {
  animation-duration: 170ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: both;
  background-color: var(--bg);
}

html.phase5::view-transition-old(root) {
  animation-name: p6d-vt-out;
}

html.phase5::view-transition-new(root) {
  animation-name: p6d-vt-in;
}

/* The snapshot opacity runs for 170ms, but the UA stylesheet also animates the
   root group (-ua-view-transition-group-anim-root) at its own 250ms default,
   and the transition — so the input-swallowing overlay — lives until the
   longest of them ends. Match them up so the overlay is not held ~80ms longer
   than the fade the eye sees (the overlay blocks hit-testing throughout). */
html.phase5::view-transition-group(root) {
  animation-duration: 170ms;
}

/* Input safety: the snapshot layer is decoration, never a hit target. Without
   this, a gesture that starts during the fade is tested against the snapshot
   and the page below never sees the touchstart (pager.js also skips the
   running transition on touchstart/pointerdown as the second guard). */
html.phase5::view-transition,
html.phase5::view-transition-old(root),
html.phase5::view-transition-new(root) {
  pointer-events: none;
}

/* A finger swipe between pages gets no fade at all: the native snap is the
   whole motion, and the old post-settle 120ms page fade read as a blink on
   every swipe (owner decision). No rule and no keyframes for it. */

@keyframes p6d-vt-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes p6d-vt-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* --------------------------------------------------------------------------
   2. Empty states (planopus.md §8.21–§8.24, Appendix B tone)
   One node, injected by pager.js only while the host is actually empty and
   removed the moment real rows exist, so the DOM stays cheap. Existing richer
   empty states (Sessions' emptyCta, Files' "Empty folder") are left alone.
   -------------------------------------------------------------------------- */
html.phase5 .p6d-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 128px;
  padding: 26px 18px;
  margin: 0;
  text-align: center;
  color: var(--ink-3);
  box-sizing: border-box;
}

html.phase5 .p6d-empty .p6d-empty-ic {
  width: 26px;
  height: 26px;
  opacity: 0.72;
  color: currentColor;
  flex: 0 0 auto;
}

html.phase5 .p6d-empty .p6d-empty-label {
  font: 500 14px/1.35 -apple-system, system-ui, "Segoe UI", sans-serif;
  letter-spacing: 0.1px;
  max-width: 30ch;
}

/* The saved-notes empty state sits under the editor, inside the Notes page
   column; keep it from stretching the editor. */
html.phase5 #pane-notes > .p6d-empty {
  flex: 0 0 auto;
  min-height: 96px;
  padding: 18px 12px 6px;
}

/* --------------------------------------------------------------------------
   3. Boot splash polish (planopus.md §8.28)
   Geometry, colour and the wordmark found in index.html so the first paint
   is right even before this sheet arrives; here only the fade the eye sees.
   -------------------------------------------------------------------------- */
html.phase5 #p6-splash {
  animation: p6d-splash-in 220ms ease-out both;
}

html.phase5 #p6-splash .p6-splash-word {
  letter-spacing: 0.3px;
}

html.phase5 #p6-splash .p6-splash-mark {
  box-shadow: 0 6px 22px rgb(0 0 0 / 0.14);
}

@keyframes p6d-splash-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* --------------------------------------------------------------------------
   4. Reach for the model while the keyboard is up (owner bug: a NEW session on
   the iPhone, keyboard up, showed only ＋, mic and Send — the model chip was
   hidden under html.kb-open and the header subtitle line was not tappable).

   4a. Composer. phase4.css hides .p4-meta-group under html.kb-open so ＋, mic,
   Queue and Steer fit at 390px. With the box expanded, EMPTY and no turn
   streaming nothing else competes for that row, so the model chip comes back:
   composer.js toggles #composer.p4-empty and this rule outranks the hide above
   (one more class, same !important). Typing text or a live turn drops
   .p4-empty and the phase4.css hide applies again — Queue/Steer need the room
   there. .p4-tighter (composer.js measured even the capped chip as too wide)
   still wins, so a narrow phone can never paint the row outside the box.
   -------------------------------------------------------------------------- */
html.phase4.kb-open #composer.expanded.p4-empty .p4-meta-group {
  display: flex !important;
}

/* Same specificity as the rule above, later in the cascade on purpose: a row
   that the JS already measured as too tight keeps phase4.css's behaviour. */
html.phase4.kb-open #composer.expanded.p4-empty.p4-tighter .p4-meta-group {
  display: none !important;
}

/* --------------------------------------------------------------------------
   4b. Header top bar unified target (planopus.md §Phase 7).
   The title row and subtitle line under it are one single tap/hold target on
   #btn-title. The old 44px padding/negative-margin hack and separate model
   button on the subtitle are retired.
   -------------------------------------------------------------------------- */
html.phase5 #hdr .sess-sub-btn {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* --------------------------------------------------------------------------
   Reduced motion: no cross-fade, no splash fade.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.phase5::view-transition-group(root),
  html.phase5::view-transition-old(root),
  html.phase5::view-transition-new(root) {
    animation: none;
  }

  html.phase5 #p6-splash {
    animation: none;
  }
}