/* Section: Three layers (#layers). One stage with tabs (Normalisation, Reconciliation, Fusion) that doubles as a small carousel
   (tabs, Next/back buttons, arrow keys, swipe; js/layers-tabs.js), then a cross-layer strip and the export line.
   Without the script the three layer cards show stacked, so everything below the [data-on] rules is the no-script layout.
   Independent of the other sections. Needs section-base.css. */

/* ---- Layer cards (stacked by default) ---- */
.lyr__stage-wrap { display: grid; gap: var(--s-4); }
.lyr__panel { display: grid; grid-template-columns: minmax(0, 1fr); }
.lyr__art { padding: var(--s-4) var(--s-4) 0; }
.lyr__art svg { max-height: 150px; }
.lyr__body { display: flex; flex-direction: column; padding: var(--s-6); }
.lyr__top { min-height: 52px; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.lyr__top .card__index { margin: 0; padding-top: 6px; }
.lyr__top .chip { white-space: normal; text-align: left; }
.lyr__gloss { margin: var(--s-3) 0 0; color: var(--t-body); font-size: var(--fs-small); line-height: 1.5; font-style: italic; }
.lyr__stage {
  margin: auto 0 0; padding-top: var(--s-5); color: var(--t-3); font-size: var(--fs-small); line-height: 1.55;
}
.lyr__stage strong { color: var(--t-body); }
.lyr__stage::before { content: ""; display: block; margin-bottom: var(--s-4); border-top: 1px solid var(--border); }

/* What each layer delivers */
.lyr__list { display: grid; gap: var(--s-3); margin: var(--s-5) 0 var(--s-5); padding: 0; list-style: none; }
.lyr__list li {
  position: relative; padding: var(--s-3) 0 0 var(--s-5); border-top: 1px solid var(--border);
  color: var(--t-body); font-size: var(--fs-body); line-height: 1.45;
}
.lyr__list li::before { content: ""; position: absolute; left: 0; top: calc(var(--s-3) + 0.55em); width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--t-3); }

/* ---- Tabs and stage (scripts on) ---- */
.lyr__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin-bottom: var(--s-4); }
.lyr__tabs[hidden] { display: none; }
.lyr__tab {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-3);
  padding: var(--s-4) var(--s-5); text-align: left; cursor: pointer;
  border: 1px solid rgba(10, 10, 10, 0.08); border-radius: 12px; color: var(--t-3);
  background: linear-gradient(180deg, rgba(10, 10, 10, 0.045), rgba(10, 10, 10, 0.02));   /* the same frosted glass as the cards, no shadow */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(18px) saturate(120%); backdrop-filter: blur(18px) saturate(120%);
  font: 500 var(--fs-body)/1.2 var(--font-sans);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.lyr__tab:hover { border-color: rgba(10, 10, 10, 0.2); color: var(--t-head); }
.lyr__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lyr__tabidx { font: 400 var(--fs-mono)/1 var(--font-mono); letter-spacing: 0.1em; color: var(--t-4); }
.lyr__tabname { min-width: 0; overflow-wrap: anywhere; }
.lyr__tabdot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--t-3); box-sizing: border-box; }
.lyr__tabdot--now { background: var(--accent); border-color: var(--accent); }
.lyr__tabdot--early { background: linear-gradient(90deg, var(--accent) 50%, transparent 50%); border-color: var(--accent); }
.lyr__tab[aria-selected="true"] { color: var(--t-head); border-color: rgba(10, 10, 10, 0.2); }
.lyr__tab[aria-selected="true"] .lyr__tabidx { color: var(--accent); }

[data-on] .lyr__stage-wrap { display: grid; }
[data-on] .lyr__panel { grid-area: 1 / 1; }
@media (min-width: 800px) {
  [data-on] .lyr__panel { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: stretch; }
  [data-on] .lyr__art {
    display: grid; place-items: center; padding: var(--s-6); border-bottom: 0; border-right: 1px solid var(--border);
    background: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(30, 118, 250, 0.06), transparent 75%);
  }
  [data-on] .lyr__art svg { width: 100%; max-height: 240px; }
  [data-on] .lyr__body { padding: var(--s-7); }
}
@media (prefers-reduced-motion: no-preference) {
  [data-on] .lyr__panel { transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s; }
  [data-on] .lyr__stage-wrap[data-dir="1"] .lyr__panel:not(.is-active) { transform: translateX(16px); }
  [data-on] .lyr__stage-wrap[data-dir="-1"] .lyr__panel:not(.is-active) { transform: translateX(-16px); }
}
[data-on] .lyr__panel:not(.is-active) { opacity: 0; visibility: hidden; pointer-events: none; }
[data-on] .lyr__panel.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/* Back / next */
.lyr__nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--border); }
.lyr__nav[hidden] { display: none; }
.lyr__go {
  display: inline-flex; align-items: center; gap: var(--s-2); padding: 8px 14px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--t-2);
  font: 500 var(--fs-small)/1 var(--font-sans); transition: border-color 0.2s ease, color 0.2s ease;
}
.lyr__go:hover { border-color: rgba(10, 10, 10, 0.3); color: var(--t-head); }
.lyr__go:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lyr__go--next { margin-left: auto; }

/* ---- Cross-layer strip ---- */
.lyr__across { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: var(--s-4); align-items: center; }
.lyr__wave { padding: var(--s-4) var(--s-4) 0; }
.lyr__wave svg { display: block; width: 100%; max-height: 110px; }
.lyr__acrossbody { padding: var(--s-5) var(--s-6) var(--s-6); }
.lyr__acrossbody .card__text { max-width: 56ch; }
@media (min-width: 800px) {
  .lyr__across { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .lyr__wave { padding: var(--s-4) var(--s-6); border-right: 1px solid var(--border); }
  .lyr__acrossbody { padding: var(--s-5) var(--s-7); }
}

.lyr__export {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: var(--s-3);
  margin: var(--s-5) 0 0; color: var(--t-3); font: 400 var(--fs-small)/1.5 var(--font-mono); letter-spacing: 0.01em;
}
.lyr__idx { font: 400 var(--fs-mono)/1 var(--font-mono); letter-spacing: 0.1em; color: var(--t-4); }

@media (max-width: 719.98px) {
  .lyr__body { padding: var(--s-5); }
  .lyr__tabs { gap: var(--s-2); }
  .lyr__tab { grid-template-columns: minmax(0, 1fr); gap: var(--s-2); padding: var(--s-3); font-size: 12.5px; }
  .lyr__tabdot { position: absolute; top: 12px; right: 10px; }
  .lyr__go { padding: 8px 12px; }
}