/* ============================================================
   GUARD FORGE — landing scenes.
   The product's own hero artefact and idea scenes; the shared
   grammar (hold/stage, ritual, panels) lives in foundry-scene.css.
   Loaded only on this site's front page (inc/enqueue.php).
   Fail-safe: static markup IS the end state — the scrub in
   assets/js/scenes/guardforge.js only replays how it got there.
   ============================================================ */

.gf-grid { display: grid; grid-template-columns: 1.3fr 78px .78fr; gap: clamp(18px, 2.6vw, 40px); align-items: center; }
/* ============================================================
   GUARD — «The gate»: attack traffic, the portcullis, the shield
   ============================================================ */
.gf-traffic {
  position: relative; padding: 20px 22px; display: grid; gap: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.028));
  border: 1px solid rgba(255,255,255,.1);
  font-family: "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace;
}
.gf-traffic__head {
  display: flex; justify-content: space-between;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--fdry-ink-faint, #6B7299); padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.gf-req {
  display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: baseline;
  padding: 9px 12px; border-radius: 9px; font-size: .84rem;
  border: 1px solid transparent; will-change: transform, opacity;
}
.gf-req__payload { color: var(--fdry-ink-soft, #A7AEC8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gf-req__rule { font-size: .72rem; letter-spacing: .06em; white-space: nowrap; }
/* Stopped: the bar that caught it, named. */
.gf-req--attack.is-stopped {
  border-color: color-mix(in srgb, #D96A5E 34%, transparent);
  background: color-mix(in srgb, #D96A5E 10%, transparent);
}
.gf-req--attack .gf-req__rule { color: #E58275; }
.gf-req--attack.is-stopped .gf-req__payload { text-decoration: line-through; text-decoration-color: color-mix(in srgb, #D96A5E 55%, transparent); }
/* Through: ordinary traffic the firewall must not touch. */
.gf-req--benign.is-through {
  border-color: color-mix(in srgb, #4C9C77 30%, transparent);
  background: color-mix(in srgb, #4C9C77 8%, transparent);
}
.gf-req__rule--ok { color: #6FBF95; }
.gf-gate { position: relative; height: 100%; min-height: 260px; color: var(--accent, #2ABE55); }
.gf-gate__svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--accent) 28%, transparent)); }
.gf-gate__spark {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent-light, #48CF68); opacity: 0; will-change: transform, opacity;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent-light) 70%, transparent));
}
.gf-side { display: grid; gap: 16px; justify-items: start; }
.gf-shield { display: grid; justify-items: center; gap: 4px; color: var(--accent, #2ABE55); }
.gf-shield svg { width: 92px; height: 92px; }
.gf-shield__count {
  font-family: "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace; font-size: 1.9rem;
  color: var(--fdry-ink, #ECEEF7); font-variant-numeric: tabular-nums;
}
.gf-shield__cap { font-size: .74rem; color: var(--fdry-ink-faint, #6B7299); text-align: center; max-width: 190px; }
.gf-shield.is-held .gf-shield__count { color: #6FBF95; }
.gf-side__math { font-family: "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace; color: var(--fdry-ink-soft, #A7AEC8); font-size: .9rem; margin: 0; }
.gf-side__math span { color: var(--accent-light, #48CF68); font-weight: 600; }
.gf-side__note { color: var(--fdry-ink-soft, #A7AEC8); font-size: .93rem; line-height: 1.6; margin: 0; }
.gf-lad { max-width: 780px; margin-inline: auto; color: var(--fdry-ink-soft, #A7AEC8); }
.gf-lad__svg { display: block; width: 100%; height: auto; }
.gf-lad__t { font-family: "IBM Plex Mono", "JetBrains Mono", ui-monospace, monospace; font-size: 13px; fill: var(--fdry-ink-soft, #A7AEC8); }
.gf-lad__t--accent { fill: var(--accent-light, #48CF68); }
.gf-lad__t--dim { fill: var(--fdry-ink-faint, #6B7299); }

/* ============================================================
   HERO ARTEFACT — the gate (hero-guardforge.php)
   ============================================================ */
.gfh { max-width: 440px; margin-inline: auto; }
.gfh-field {
  position: relative; height: 250px; overflow: hidden;
  color: var(--accent, #2ABE55);
}
.gfh-bars { position: absolute; left: 58%; top: 0; width: 60px; height: 100%; }
/* Payloads fly in from the left and stop at the bars. The one benign request
   is aimed at the gap between the crossbars, because the block's whole claim
   is that ordinary traffic is not what the gate is for. */
/* Each payload owns a row from the markup, so the static barrage is already a
   readable stack rather than five chips piled on one another waiting for JS. */
.gfh-shot {
  position: absolute; left: 14px; top: calc(20px + var(--row, 0) * 45px);
  max-width: 52%; padding: 6px 10px; border-radius: 8px;
  border: 1px solid rgba(224,106,94,.45); background: rgba(224,106,94,.1);
}
.gfh-shot code {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .68rem;
  color: #E88C82; white-space: nowrap;
}
.gfh-shot--ok { border-color: rgba(126,217,166,.5); background: rgba(126,217,166,.1); }
.gfh-shot--ok code { color: #7ED9A6; }
.gfh-verdict {
  position: absolute; right: 10px; bottom: 12px; text-align: right;
  color: #E88C82; max-width: 34%;
}
.gfh-tally {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
  padding: 13px 16px; border-top: 1px solid rgba(255,255,255,.08);
  font-size: .78rem; color: var(--fdry-ink-faint, #6B7299);
}
.gfh-tally b { font-size: .98rem; color: #E88C82; margin-left: 8px; }
.gfh-tally b:first-child { margin-left: 0; }
.gfh-tally__ok { color: #7ED9A6 !important; }

/* ============================================================
   SCENE 2 — the ladder, and the log it leaves behind
   ============================================================ */
.gf-log {
  max-width: 700px; margin: clamp(16px, 2.4vh, 28px) auto 0;
  border-radius: 14px; overflow: hidden;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.09);
}
.gf-log__rows { list-style: none; margin: 0; padding: 0; }
.gf-log__rows li {
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: baseline;
  padding: 6px 16px; border-bottom: 1px solid rgba(255,255,255,.05);
  font-size: .8rem; color: var(--fdry-ink-soft, #A7AEC8);
}
.gf-log__rows code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .72rem; color: var(--fdry-ink-faint, #6B7299); }
.gf-log__rows b { color: var(--fdry-ink, #ECEEF7); font-weight: 500; }
.gf-log__rows li.is-locked { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.gf-log__rows li.is-locked code, .gf-log__rows li.is-locked span { color: var(--accent-light, #48CF68); }

/* ============================================================
   SCENE 3 — the range: send anything at the gate
   ============================================================ */
.gf-range__panel { max-width: 1000px; }
.gf-range__body { display: grid; grid-template-columns: 1.35fr .65fr; gap: clamp(20px, 3vw, 40px); padding: clamp(18px, 2.4vw, 26px); }
.gf-reqs { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.gf-req {
  appearance: none; width: 100%; cursor: pointer; font: inherit; text-align: left;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 9px 13px; border-radius: 9px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
  transition: border-color 120ms cubic-bezier(.2,.6,.2,1), background-color 120ms cubic-bezier(.2,.6,.2,1);
}
.gf-req:hover { border-color: rgba(255,255,255,.22); }
.gf-req:focus-visible { outline: 3px solid var(--accent-light, #48CF68); outline-offset: 2px; }
.gf-req__payload {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .76rem;
  color: var(--fdry-ink-soft, #A7AEC8); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gf-req__verdict {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .7rem;
  white-space: nowrap; color: var(--fdry-ink-faint, #6B7299); opacity: 0;
}
.gf-req.is-sent .gf-req__verdict { opacity: 1; }
/* A stopped request keeps its payload struck through: it did not happen. */
.gf-req--attack.is-sent { border-color: rgba(224,106,94,.4); background: rgba(224,106,94,.08); }
.gf-req--attack.is-sent .gf-req__payload { text-decoration: line-through; text-decoration-color: rgba(224,106,94,.7); }
.gf-req--attack.is-sent .gf-req__verdict { color: #E88C82; }
.gf-req--benign.is-sent { border-color: rgba(126,217,166,.4); background: rgba(126,217,166,.07); }
.gf-req--benign.is-sent .gf-req__verdict { color: #7ED9A6; }
.gf-range__side { display: grid; gap: 16px; align-content: start; }
.gf-scoreboard { display: grid; gap: 10px; }
.gf-scoreboard p { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: .84rem; color: var(--fdry-ink-soft, #A7AEC8); }
.gf-scoreboard b { font-size: 1.6rem; color: #E88C82; min-width: 2ch; }
.gf-ok { color: #7ED9A6 !important; }
.gf-range__note { margin: 0; font-size: .84rem; line-height: 1.6; color: var(--fdry-ink-faint, #6B7299); }
@media (max-width: 899px) { .gf-range__body { grid-template-columns: 1fr; } }

/* Phone: one column, and the gate lies down — stacked, it reads as a
   horizontal barrier between the traffic above and what it protects below.
   `height` and `min-height` have to be restated here: the base rule is
   `height: 100%` of a desktop grid row, and a 700px-tall element rotated
   ninety degrees is 700px WIDE. (See clearwayforge.css for why these live in
   the product sheet.) */
@media (max-width: 899px) {
  .gf-grid { grid-template-columns: 1fr; }
  /* Not rotated: `rotate(90deg) scaleX(.26)` squashed the portcullis into a
     20px sliver that read as a stray dotted line. Stacked, the gate is simply
     shorter and full width — the bars stay vertical, which is what bars are. */
  .gf-gate { height: 86px; min-height: 0; width: 100%; }
}