/* /how/ — live architecture diagrams. Nodes (.wn) are placed by CSS grid areas per diagram, so they
   reflow on phones; js/how.min.js draws the wires (.wires) between them and re-routes on resize. */

.page-head { padding: clamp(2.5rem, 6vw, 4.5rem) 0 0; }
.crumb { color: var(--muted); text-decoration: none; font-size: var(--fs-sm); }
.crumb:hover { color: var(--text-hi); }
.page-title { font-size: var(--fs-2xl); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: var(--text-hi); margin: 1rem 0; }
.toc { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: -.75rem; }
.toc a { color: var(--text); text-decoration: none; font-size: var(--fs-sm); border: 1px solid var(--hair); border-radius: 999px; padding: .35rem .9rem; transition: border-color .2s, color .2s; }
.toc a:hover { border-color: var(--accent); color: var(--text-hi); }

.badge {
  display: inline-block; vertical-align: middle; font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .02em;
  color: var(--amber); border: 1px solid rgba(255, 181, 71, .45); border-radius: 999px; padding: 0 .5rem; margin-left: .25rem;
}
.notes { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; margin-top: var(--sp-3); }
.notes li { font-size: var(--fs-sm); color: var(--muted); border-left: 2px solid var(--border); padding-left: .65rem; }
.frame { position: relative; border: 1px dashed var(--border); border-radius: 24px; padding: 2.2rem clamp(.8rem, 2vw, 1.6rem) 1.6rem; }
.frame-label { position: absolute; top: -.75rem; left: 1.4rem; background: var(--bg); padding: 0 .6rem; font-size: var(--fs-xs);
  font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }

/* ── Eight layers: a stack of plates and a panel ── */
.layers-ui { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.stack { display: flex; flex-direction: column; perspective: 1200px; }
.plate {
  --lift: 0px;
  position: relative; display: flex; justify-content: space-between; align-items: center; gap: 1rem; text-align: left;
  padding: 1rem 1.2rem; margin-top: -6px; cursor: pointer; border-radius: 14px;
  background: linear-gradient(180deg, rgba(22, 34, 58, .95), rgba(15, 23, 38, .95));
  border: 1px solid color-mix(in srgb, var(--tone) 35%, transparent);
  box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .9);
  transform: rotateX(18deg) translateY(var(--lift)) translateZ(0);
  transform-origin: 50% 100%;
  transition: transform .35s var(--ease), border-color .3s, background .3s;
}
.plate:first-child { margin-top: 0; }
.plate::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 3px; background: var(--tone); }
.plate b { color: var(--tone); font-size: var(--fs-base); font-weight: 700; }
.plate span { color: var(--muted); font-size: var(--fs-sm); text-align: right; }
.plate:hover { --lift: -4px; border-color: color-mix(in srgb, var(--tone) 65%, transparent); }
.plate.on { --lift: -8px; z-index: 1; border-color: var(--tone);
  background: linear-gradient(180deg, color-mix(in srgb, var(--tone) 16%, #16223a), #111a2c); }
.plate.on span { color: var(--text-hi); }
.layer-panel {
  position: sticky; top: 5rem; min-height: 18rem; padding: 1.5rem 1.6rem; border-radius: var(--r-lg);
  border: 1px solid color-mix(in srgb, var(--tone, var(--border)) 45%, transparent);
  background: radial-gradient(80% 60% at 100% 0%, color-mix(in srgb, var(--tone, #16223a) 12%, transparent), transparent 70%), rgba(15, 23, 38, .85);
}
.layer-panel h3 { color: var(--tone, var(--text-hi)); font-size: var(--fs-lg); margin-bottom: .3rem; }
.layer-panel > p { color: var(--muted); margin-bottom: 1rem; }
.layer-panel h4 { font-size: var(--fs-xs); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 1rem 0 .4rem; }
.layer-panel ul { list-style: none; display: flex; flex-direction: column; gap: .35rem; }
.layer-panel li { padding-left: 1.4rem; position: relative; color: var(--text-hi); font-size: var(--fs-sm); }
.layer-panel h4:first-of-type + ul li::before { content: "●"; position: absolute; left: .2rem; color: var(--green); font-size: .7em; top: .25em; }
.layer-panel h4:last-of-type + ul li::before { content: "○"; position: absolute; left: .15rem; color: var(--amber); font-size: .8em; top: .15em; }
.layer-panel h4:last-of-type + ul li { color: var(--text); }
/* without JS the panel is empty: hide it and let the plates read as a list */
html:not(.wired) .layer-panel { display: none; }
html:not(.wired) .layers-ui { grid-template-columns: 1fr; }

/* ── Wire diagrams ── */
.wire { position: relative; display: grid; gap: 80px 34px; }
.wires { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 0; }
.wire .wn { position: relative; z-index: 1; }
.wire path.wire { fill: none; stroke-width: 1.6; opacity: .45; transition: opacity .25s, stroke-width .25s; }
.wire path.dash { stroke-dasharray: 6 6; }
.wire.lit path.wire { opacity: .1; }
.wire.lit path.wire.on { opacity: 1; stroke-width: 2.2; }
.flow-dot { filter: drop-shadow(0 0 4px currentColor); }
.wire.lit .flow-dot { opacity: .25; }
.wire-label { position: absolute; z-index: 2; transform: translate(-50%, -50%); white-space: nowrap; font-size: 11px; font-weight: 600;
  background: var(--bg); padding: .05rem .4rem; border-radius: 6px; opacity: .8; pointer-events: none; transition: opacity .25s; }
.wire.lit .wire-label { opacity: .15; }
.wire.lit .wire-label.on { opacity: 1; }

.wn {
  display: flex; flex-direction: column; gap: .25rem; padding: .85rem 1rem .95rem; border-radius: 14px; outline: none;
  background: linear-gradient(180deg, rgba(22, 34, 58, .96), rgba(15, 23, 38, .96));
  border: 1px solid color-mix(in srgb, var(--tone) 40%, transparent);
  box-shadow: 0 0 0 0 transparent; transition: border-color .25s, box-shadow .25s, opacity .25s, transform .25s var(--ease);
}
.wn b { color: var(--tone); font-size: var(--fs-base); font-weight: 700; line-height: 1.3; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
.wn span { color: var(--muted); font-size: var(--fs-sm); line-height: 1.45; }
.wn-dashed { border-style: dashed; background: transparent; }
.wn-hub { justify-content: center; }
.wire.lit .wn { opacity: .45; }
.wire.lit .wn.on { opacity: 1; border-color: var(--tone); box-shadow: 0 0 0 1px var(--tone), 0 10px 40px -12px color-mix(in srgb, var(--tone) 60%, transparent); }
.wn:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
.wn.pass { border-color: var(--tone); }
.wn.fail { border-color: var(--red); box-shadow: 0 0 0 1px var(--red), 0 10px 40px -12px rgba(255, 107, 107, .6); }

.w-dept { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 90px 18px;
  grid-template-areas: "lead lead lead d1 d1 d1 d2 d2 d2 dn dn dn" "forge forge forge forge mem mem mem mem pmd pmd pmd pmd"; }
.w-pipe { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 120px 46px;
  grid-template-areas: "ticket agent pr ci" "owner deploy merge review"; }
.w-mem { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px 110px;
  grid-template-areas: "h1 hub s1" "h2 hub s2" "h3 hub s3" ". repo ."; }
.w-mem .wn[data-node="repo"] { margin-top: 50px; }
.w-sec { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px 150px;
  grid-template-areas: "keys pmd agent" "secret pmd priv"; }

.pipe-play { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: 2rem; }
.btn-pill { border: 1px solid color-mix(in srgb, var(--tone) 55%, transparent); color: var(--tone); background: color-mix(in srgb, var(--tone) 8%, transparent);
  border-radius: 999px; padding: .5rem 1rem; font-weight: 650; font-size: var(--fs-sm); cursor: pointer; transition: background .2s; }
.btn-pill:hover { background: color-mix(in srgb, var(--tone) 18%, transparent); }
.pipe-say { flex: 1 1 18rem; color: var(--text); font-size: var(--fs-sm); min-height: 2.6em; }
.how-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: var(--sp-5); }

@media (max-width: 900px) {
  .layers-ui { grid-template-columns: 1fr; }
  .layer-panel { position: relative; top: 0; }
  .w-mem { gap: 22px 60px; }
  .w-sec { gap: 40px 70px; }
}
@media (max-width: 760px) {
  .plate { transform: none; margin-top: 6px; }
  .plate span { display: none; }
  .wire { gap: 56px 12px; }
  .w-dept { grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas: "lead lead lead d1 d1 d1 d2 d2 d2 dn dn dn" "forge forge forge forge mem mem mem mem pmd pmd pmd pmd"; }
  .w-dept .wn span, .w-mem .wn:not(.wn-hub) span { display: none; }
  .w-dept .wn { padding: .6rem .5rem; text-align: center; }
  .w-dept .wn b { font-size: var(--fs-sm); }
  .w-pipe { grid-template-columns: 1fr; gap: 34px; margin-right: 56px;
    grid-template-areas: "ticket" "agent" "pr" "ci" "review" "merge" "deploy" "owner"; }
  .w-mem { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 56px 10px;
    grid-template-areas: "h1 h1 h2 h2 h3 h3" "repo repo hub hub hub hub" "s1 s1 s2 s2 s3 s3"; }
  .w-mem .wn[data-node="repo"] { margin-top: 0; }
  .w-mem .wn { padding: .6rem .6rem; }
  .w-mem .wn b { font-size: var(--fs-sm); }
  .w-sec { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 14px;
    grid-template-areas: "keys secret" "pmd pmd" "agent priv"; }
  .badge { display: block; width: max-content; margin: .3rem 0 0; }
  /* labels on narrow wires collide with each other; the boxes carry the meaning */
  .wire-label { display: none; }
  .w-mem .wn[data-node="repo"] { align-self: center; }
  .w-dept .wn b { font-size: .8rem; overflow-wrap: anywhere; }
}

/* «Песочница проекта» under the security diagram */
.sandbox { margin-top: var(--sp-4); padding: 1.3rem 1.4rem; border-radius: var(--r-lg); border: 1px solid var(--hair);
  background: radial-gradient(70% 80% at 0% 0%, rgba(60, 207, 145, .08), transparent 70%), rgba(15, 23, 38, .8); }
.sandbox h3 { color: var(--text-hi); font-size: var(--fs-lg); margin-bottom: .8rem; }
.sandbox-list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem 1.4rem; }
.sandbox-list li { font-size: var(--fs-sm); color: var(--text); padding-left: 1.3rem; position: relative; }
.sandbox-list li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700; }
.sandbox-list b { color: var(--text-hi); display: block; }
.sandbox-next { margin-top: 1rem; font-size: var(--fs-sm); color: var(--muted); }
.sandbox-next .badge { margin: 0 .3rem 0 0; }
@media (max-width: 760px) { .sandbox-list { grid-template-columns: 1fr; } }