/* ════════════════════════════════════════════════════════════════════════
   PHASE 137 — View flow & specialty-tab polish (with phase137-view-flow.js)
   1. Smooth view-entry fade — masks the show-then-render flash when
      switching tabs and makes every switch feel intentional.
   2. Boot veil — hides the unstyled flash while 100+ stylesheets load.
   3. Script DNA bar — the whole script as one segmented strip (width =
      scene length in eighths, color = INT/EXT · DAY/NIGHT convention).
   Additive: removing this file + the JS reverts everything.
   ════════════════════════════════════════════════════════════════════════ */

/* ── 1. View-entry fade ─────────────────────────────────────────────────── */
/* CSS animations restart when an element goes display:none → visible, so
   this fires on exactly every tab switch with zero JS. Opacity-only — no
   transform — so position:fixed children and layout are never affected. */
@keyframes p137-view-in {
  from { opacity: .55; }
  to   { opacity: 1; }
}
[id$="-app"]:not(.hidden) {
  animation: p137-view-in .22s ease-out;
}

/* ── 2. Boot veil ───────────────────────────────────────────────────────── */
#p137-boot-veil {
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  background: #efe9dd;
  display: grid;
  place-items: center;
  transition: opacity .4s ease;
  pointer-events: none;
}
#p137-boot-veil.p137-lift { opacity: 0; }
#p137-boot-veil .p137-veil-mark {
  font-size: 2.2rem;
  filter: saturate(.9);
  animation: p137-veil-pulse 1.1s ease-in-out infinite;
}
@keyframes p137-veil-pulse {
  0%, 100% { opacity: .45; }
  50%      { opacity: 1; }
}
@media (prefers-color-scheme: dark) {
  #p137-boot-veil { background: #0f1320; }
}

/* ── 3. Script DNA bar (stripboard header) ──────────────────────────────── */
#p137-dna {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
#p137-dna .p137-dna-label {
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #8a6d3b;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#p137-dna .p137-dna-key { display: inline-flex; gap: 8px; font-weight: 600; text-transform: none; letter-spacing: 0; }
#p137-dna .p137-dna-key i {
  font-style: normal;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .6rem;
  color: #6b5b3e;
}
#p137-dna .p137-dna-key i::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 2px;
  border: 1px solid rgba(0,0,0,.2);
}
#p137-dna .p137-dna-key .k-id::before { background: #ffffff; }
#p137-dna .p137-dna-key .k-ed::before { background: #fde68a; }
#p137-dna .p137-dna-key .k-in::before { background: #93c5fd; }
#p137-dna .p137-dna-key .k-en::before { background: #86efac; }
#p137-dna .p137-dna-track {
  display: flex;
  width: 100%;
  height: 18px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(105, 74, 36, .3);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.08);
}
#p137-dna .p137-dna-seg {
  height: 100%;
  min-width: 4px;
  cursor: pointer;
  border-right: 1px solid rgba(0,0,0,.14);
  transition: filter .12s ease, flex-grow .25s ease;
}
#p137-dna .p137-dna-seg:last-child { border-right: none; }
#p137-dna .p137-dna-seg:hover { filter: brightness(.88) saturate(1.25); }
#p137-dna .p137-dna-seg.id { background: #ffffff; }
#p137-dna .p137-dna-seg.ed { background: #fde68a; }
#p137-dna .p137-dna-seg.in { background: #93c5fd; }
#p137-dna .p137-dna-seg.en { background: #86efac; }
body.dark #p137-dna .p137-dna-label { color: #d4b06a; }
body.dark #p137-dna .p137-dna-key i { color: #b8a988; }
body.dark #p137-dna .p137-dna-track { border-color: rgba(255,255,255,.18); }
body.dark #p137-dna .p137-dna-seg.id { background: #cbd5e1; }
body.dark #p137-dna .p137-dna-seg.ed { background: #d9b84a; }
body.dark #p137-dna .p137-dna-seg.in { background: #5b8fd9; }
body.dark #p137-dna .p137-dna-seg.en { background: #4dab73; }

@media print { #p137-boot-veil, #p137-dna { display: none !important; } }

@media (prefers-reduced-motion: reduce) {
  [id$="-app"]:not(.hidden) { animation: none; }
  #p137-boot-veil .p137-veil-mark { animation: none; }
}