/* LPT 2026 — styles for the shared four-layer platform architecture
   component (assets/platform.js). Loaded only by pages that render it. */
/* ---- Four-layer platform architecture (assets/platform.js) ----
   Inverted-pyramid stack: the foundation is widest at the bottom; the
   current page's layer is highlighted from the blue scale. */
.arch{display:grid; gap:10px; max-width:860px; margin:0 auto;}
.arch-layer{display:grid; grid-template-columns:200px 1fr 24px; gap:18px; align-items:center;
  background:#fff; border:1px solid var(--gray-200); border-radius:var(--radius);
  padding:16px 20px; margin:0 auto; width:100%; transition:border-color .15s, transform .12s;}
.arch-layer[data-i="0"]{width:82%;}
.arch-layer[data-i="1"]{width:88%;}
.arch-layer[data-i="2"]{width:94%;}
.arch-layer:hover{border-color:var(--blue); transform:translateY(-1px);}
.arch-role{font-weight:700; font-size:.74rem; letter-spacing:1.8px; text-transform:uppercase; color:var(--blue);}
.arch-here{display:inline-block; margin-left:8px; letter-spacing:.5px; background:var(--blue); color:#fff;
  border-radius:3px; padding:2px 7px; font-size:.66rem;}
.arch-name{display:block; font-family:var(--display); font-weight:800; font-size:1.08rem; color:var(--ink);}
.arch-line{display:block; font-size:.9rem; color:#555; margin-top:2px;}
.arch-layer .iarw{color:var(--blue);}
.arch-layer.current{border-color:var(--blue); background:var(--blue-tint);}
.arch-dark .arch-layer{background:#0a3355; border-color:rgba(255,255,255,.14);}
.arch-dark .arch-name{color:#fff;}
.arch-dark .arch-line{color:#B9C6D2;}
.arch-dark .arch-role{color:#6FB2E6;}
.arch-dark .arch-layer.current{background:var(--blue); border-color:#6FB2E6;}
@media (max-width:720px){
  .arch-layer, .arch-layer[data-i="0"], .arch-layer[data-i="1"], .arch-layer[data-i="2"]{width:100%;}
  .arch-layer{grid-template-columns:1fr 24px;}
  .arch-role{grid-column:1 / -1;}
}