/* ============================================================
   Lighthouse — §02 Applications module
   Shipped layout: tabs (chip tablist over a full-width stage) with
   a per-industry risk-signal indicator. Interaction: hover-to-preview
   + click-to-lock. Builds on apps-visuals.css (the bespoke
   per-industry visuals) which must also be loaded.
   ============================================================ */

.apps-mount { position: relative; }

/* gradient-edge frame (matches the site panel language) */
.ap-frame {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--canvas-2), var(--canvas-2)) padding-box,
    linear-gradient(140deg, rgba(202,169,11,0.55), rgba(202,169,11,0.06) 62%) border-box;
  position: relative;
}
.ap-frame::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.020) 0 1px, transparent 1px 5px);
}
.ap-frame > * { position: relative; z-index: 1; }

/* ---- shared: signal indicator (consistent across every layout) ---- */
.sigblock { display: flex; flex-direction: column; gap: 11px; }
.sig-top { display: flex; align-items: flex-end; justify-content: space-between; }
.sig-lab { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-tertiary); }
.sig-bar { height: 6px; background: rgba(255,255,255,0.06); position: relative; overflow: hidden; }
.sig-bar > i { position: absolute; left: 0; top: 0; bottom: 0; display: block; width: var(--w, 0%); background: var(--marigold); transition: width 760ms var(--ease-out-expo); }
.sig-bar.low > i { background: linear-gradient(90deg, var(--periwinkle), rgba(136,156,231,0.5)); }
.sig-verdict { display: flex; align-items: center; gap: 10px; }
.sig-chip { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; padding: 4px 10px; }
.sig-chip.go { background: var(--marigold); color: #141416; }
.sig-chip.stop { border: 1px dashed var(--text-dim); color: var(--periwinkle); }

/* ---- shared: caption ---- */
.ap-cap .di { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--periwinkle); margin-bottom: 12px; }
.ap-cap p { color: var(--text-secondary); font-size: 13.5px; line-height: 1.68; max-width: 46ch; }

/* ============================================================
   TABS (horizontal chips top, full-width stage)
   ============================================================ */
.lay-tabs { display: flex; flex-direction: column; }
/* D161: the row scrolls with the scrollbar suppressed, so at 768px two chips sat
   off-screen with no cue they existed. A right-edge mask fades the overflow so the
   row reads as continuing; it disappears once there is nothing left to scroll. */
.lay-tabs .ap-chips { display: flex; border-bottom: 1px solid var(--hair); overflow-x: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); }
.lay-tabs .ap-chips.at-end { -webkit-mask-image: none; mask-image: none; }
.lay-tabs .ap-chips::-webkit-scrollbar { display: none; }
/* V3 proportional chips: flex-basis auto distributes width by label length; the automatic
   min-content floor (no min-width:0) means labels can never be squeezed into ellipsis -
   below the fit width the tablist scrolls (the row is already overflow-x:auto). */
.ap-chip { appearance: none; background: transparent; border: 0; border-right: 1px solid var(--hair); padding: 0 18px; height: 48px; cursor: pointer; position: relative; white-space: nowrap; flex: 1 1 auto; text-align: left; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-tertiary); transition: color 160ms, background 160ms; }
.ap-chip:first-child { border-left: 1px solid var(--hair); }
/* M24 rail grammar: dim white = passing light (preview), marigold = committed light (locked).
   .active is declared after .preview so gold wins when the locked chip is also previewed. */
.ap-chip::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: rgba(255,255,255,0.30); transform: scaleX(0); transform-origin: left; transition: transform 260ms var(--ease-out-expo), background 160ms; }
.ap-chip .ccat { font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); transition: color 160ms; }
.ap-chip:hover, .ap-chip.preview { background: rgba(255,255,255,0.018); }
.ap-chip.preview::after { transform: scaleX(1); }
.ap-chip.preview .ccat { color: var(--text-primary); }
.ap-chip.active { background: rgba(202,169,11,0.04); }
.ap-chip.active::after { transform: scaleX(1); background: var(--marigold); }
.ap-chip.active .ccat { color: var(--text-primary); }
.lay-tabs .ap-stage2 { padding: 34px 40px; display: grid; grid-template-columns: 1.35fr 0.65fr; gap: 40px; align-items: stretch; min-height: 320px; }
.lay-tabs .ap-stage2 .stage-viz { min-height: 180px; display: flex; flex-direction: column; justify-content: flex-start; }
.lay-tabs .ap-stage2 .stage-viz .appviz { flex: 1; }
.lay-tabs .ap-stage2 .stage-side { display: flex; flex-direction: column; gap: 38px; border-left: 1px solid var(--hair); padding-left: 36px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1040px) {
  .lay-tabs .ap-stage2 { grid-template-columns: 1fr; gap: 28px; }
  .lay-tabs .ap-stage2 > * { min-width: 0; }
  .lay-tabs .ap-stage2 .stage-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--hair); padding-top: 24px; }
}

/* tab icons */
.ap-chip .ci2 { display: flex; align-items: center; gap: 9px; }
.ap-chip .cico { display: flex; color: var(--text-dim); transition: color 160ms; }
.ap-chip .cico svg { display: block; }
.ap-chip:hover .cico, .ap-chip.preview .cico { color: var(--text-tertiary); }
.ap-chip.active .cico { color: var(--text-secondary); }

/* V3 type tune: clamp the chip label below the 15px fit width so the row holds
   five full labels as far down as the container allows (zero ellipsis at any width) */
@media (max-width: 1280px) {
  .ap-chip .ccat { font-size: 14px; letter-spacing: 0.04em; }
}

/* mobile: chips become a swipeable row at full label width */
@media (max-width: 760px) {
  .lay-tabs .ap-chips { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .ap-chip { flex: 0 0 auto; min-width: 216px; scroll-snap-align: start; }
}

/* ============================================================
   D22 — mobile accordion (<=760): five labeled rows, inline stages,
   M3 state layers in the Lighthouse skin
   ============================================================ */
@media (max-width: 760px) {
  .lay-acc { display: flex; flex-direction: column; }
  .acc-item { border-bottom: 1px solid var(--hair); }
  .acc-item:last-child { border-bottom: 0; }
  .acc-row {
    appearance: none; background: transparent; border: 0; width: 100%; min-height: 48px;
    display: flex; align-items: center; gap: 12px; padding: 0 20px; cursor: pointer; text-align: left;
    font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text-secondary); position: relative;
  }
  .acc-row .cico svg { width: 20px; height: 20px; }
  .acc-row .cico svg [stroke] { stroke-width: 1.6px; }
  .acc-row::after { content: ''; position: absolute; inset: 0; background: #fff; opacity: 0; transition: opacity 150ms; pointer-events: none; }
  .acc-row:active::after { opacity: 0.10; }
  .acc-row .cico { flex: 0 0 auto; }
  .acc-row .acc-t { flex: 1; }
  .acc-row .acc-x { width: 12px; height: 12px; position: relative; opacity: 0.7; flex: 0 0 auto; }
  .acc-row .acc-x::before, .acc-row .acc-x::after { content: ''; position: absolute; background: var(--text-tertiary); }
  .acc-row .acc-x::before { left: 0; right: 0; top: 5.25px; height: 1.5px; }
  .acc-row .acc-x::after { top: 0; bottom: 0; left: 5.25px; width: 1.5px; transition: transform 200ms var(--ease-m3-decel, ease-out); }
  .acc-item.open .acc-row { color: var(--text-primary); background: rgba(202,169,11,0.04); }
  /* top-edge active marker (matches header tab grammar) - the left side-stripe broke the Hairline Rule */
  .acc-item.open .acc-row::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--marigold); }
  .acc-item.open .acc-x::after { transform: scaleY(0); }
  .acc-panel { padding: 8px 20px 28px; } /* 14->20px inset so content breathes off the card outline */
  /* collapse without display:none so stage entrances keep their played state
     (display toggling restarts CSS animations; visibility does not) */
  .acc-panel[hidden] { display: block; visibility: hidden; height: 0; padding: 0; margin: 0; overflow: hidden; }
  .acc-panel .stage-side { border-top: 1px solid var(--hair); margin-top: 14px; padding-top: 18px; gap: 28px; }
  /* scaled stage content (D22 v2): tighter type, compact visuals */
  .acc-panel .stage-viz { zoom: 0.85; }
  .acc-panel   .acc-panel .ap-cap p { font-size: 13px; line-height: 1.6; }
  .acc-panel .sig-lab, .acc-panel .sig-chip { font-size: 10.5px; }
}

/* ===== Stage-1 · B6 beam-wipe on stage swap (user-initiated; reduced-motion skips via JS) ===== */
.lay-tabs .ap-stage2 { position: relative; }
.ap-stage2.apwipe { overflow: hidden; }
.ap-stage2.apwipe::after { content: ''; position: absolute; top: 0; bottom: 0; width: 26%; left: -30%; pointer-events: none; opacity: 1;
  background: linear-gradient(90deg, transparent, rgba(202,169,11,0.05) 38%, rgba(255,243,200,0.10) 50%, rgba(202,169,11,0.05) 62%, transparent);
  animation: apWipe 450ms cubic-bezier(0.3, 0, 0.2, 1) both; }
@keyframes apWipe { 0% { transform: translateX(0); opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(560%); opacity: 0; } }

/* ===== M24 + V17 - reduced-motion / frozen: chip rails and the DECISION SIGNAL
   fill snap to their end state instead of drawing (JS also sets --w immediately) ===== */
@media (prefers-reduced-motion: reduce) {
  .ap-chip::after { transition: none; }
  .sig-bar > i { transition: none; }
}
body.frozen .ap-chip::after { transition: none; }
body.frozen .sig-bar > i { transition: none; }