/* c.flow.css — the home hero's two columns and the Scan_Flow figure
   in the right one (scan_flow in templates/macros/scan_flow.html).
   Restored from the old System_Architecture rules (git a344f0a,
   c.css and c.mobile.css). Loaded after c.scan.css and before
   c.mobile.css, whose phone padding for .c-hero-in still applies. */

/* ── Hero columns ────────────────────────────────────────────────
   Copy and form on the left, the figure on the right, centred on
   each other. min-width: 0 lets each column shrink below its
   content's natural width instead of pushing the grid wider. */
.c-hero-in {
  display: grid;
  grid-template-columns: 1.06fr .82fr;
  gap: 52px;
  align-items: center;
}
.c-hero-l, .c-hero-r { min-width: 0; }

/* Below 900px the right column would squeeze the form, so the
   figure drops under it at no more than its drawn width. */
@media (max-width: 900px) {
  .c-hero-in { grid-template-columns: 1fr; gap: 36px; }
  .c-hero-r { max-width: 380px; }
}

/* ── Figure frame and head bar ──────────────────────────────────── */
.c-bp { border: 1px solid var(--line); background: var(--paper); }
.c-bp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}
.c-bp-head .l {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
}
.c-bp-head .l .gd { width: 6px; height: 6px; background: var(--blue); }

/* ── SVG drawing ─────────────────────────────────────────────────
   The greys are the old figure's literal values: lighter than
   --line for the box edges and ticks, darker for the icons. */
.c-bp-svg { display: block; width: 100%; height: auto; }
.cbp-frame { fill: none; stroke: var(--line); stroke-width: 1; }
.cbp-grid { stroke: rgba(157, 34, 53, .06); stroke-width: 1; }
.cbp-box { fill: var(--paper); stroke: #D9DADF; stroke-width: 1.1; }
.cbp-box.lit { stroke: var(--blue); }
.cbp-title {
  fill: var(--ink);
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: -.01em;
}
.cbp-sub {
  fill: var(--muted);
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: .12em;
}
.cbp-idx {
  fill: var(--blue);
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px;
  letter-spacing: .04em;
}
.cbp-ic { color: #7E7F86; }
.cbp-ic.lit { color: var(--blue); }
.cbp-conn { stroke: #CFD0D6; stroke-width: 1.2; fill: none; }
.cbp-flow {
  stroke: var(--blue);
  stroke-width: 1.2;
  fill: none;
  stroke-dasharray: 3 6;
  opacity: .6;
}
.cbp-tick { stroke: #CFD0D6; stroke-width: 1; }
.cbp-tracer { fill: var(--blue); }
/* The edge glow: a 46px dash that runs once round a box's 600px
   outline. Invisible until its animation lights it. */
.cbp-edge {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2;
  stroke-dasharray: 46 554;
  stroke-dashoffset: 0;
  opacity: 0;
  stroke-linecap: round;
  filter: drop-shadow(0 0 2.5px rgba(157, 34, 53, .55));
}

/* ── Motion ──────────────────────────────────────────────────────
   Only for visitors who have not asked for reduced motion. The
   dashes crawl down the flow line, the tracer drops through all five
   boxes in 4.2s, and each box's edge glows as the tracer reaches it:
   the delays step by about 0.78s, the time between box tops. */
@media (prefers-reduced-motion: no-preference) {
  .cbp-flow { animation: cbpflow 1.4s linear infinite; }
  .cbp-tracer { animation: cbptrace 4.2s linear infinite; }
  .cbp-edge { animation: cbpedge 4.2s linear infinite; }
  .cbp-edge.e0 { animation-delay: .20s; }
  .cbp-edge.e1 { animation-delay: .98s; }
  .cbp-edge.e2 { animation-delay: 1.76s; }
  .cbp-edge.e3 { animation-delay: 2.55s; }
  .cbp-edge.e4 { animation-delay: 3.33s; }
}
@keyframes cbpflow { to { stroke-dashoffset: -18; } }
@keyframes cbptrace {
  0% { transform: translateY(0); opacity: 0; }
  5% { opacity: 1; }
  95% { opacity: 1; }
  100% { transform: translateY(450px); opacity: 0; }
}
@keyframes cbpedge {
  0% { opacity: 0; stroke-dashoffset: 0; }
  2% { opacity: 1; }
  16% { stroke-dashoffset: -600; opacity: 1; }
  21% { opacity: 0; stroke-dashoffset: -600; }
  100% { opacity: 0; stroke-dashoffset: -600; }
}

/* ── Phone: rows instead of the SVG ──────────────────────────────
   The SVG scales to about 0.7 on a phone, which drops its labels to
   roughly 10px. Below 640px the same five steps render as real rows
   instead, at full size. Exactly one of the two is displayed, so the
   hidden one leaves the accessibility tree with it. */
.c-bp-rows { display: none; }

@media (max-width: 639.98px) {
  .c-bp-svg { display: none; }
  /* The caption and the figure number met with no space between them
     on a phone: space-between has nothing to distribute once the two
     labels fill the row. Tighter tracking buys back the gap. */
  .c-bp-head { gap: 10px; letter-spacing: .06em; }
  /* The figure number is one token; wrapping it strands the closing
     bracket on a line of its own. */
  .c-bp-head > span + span { white-space: nowrap; }
  .c-bp-rows {
    display: block;
    margin: 0;
    padding: 14px;
    list-style: none;
  }
  .c-bp-row {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-content: center;
    gap: 2px 12px;
    min-height: 64px;
    padding: 16px;
    border: 1px solid var(--line);
    box-sizing: border-box;
  }
  /* The index sits above the pair, spanning both columns. */
  .c-bp-row .ix {
    grid-column: 1 / -1;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: .12em;
    color: var(--muted);
  }
  .c-bp-row .nm { font-size: 15px; font-weight: 500; color: var(--ink); }
  .c-bp-row .st {
    align-self: end;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
  }
  /* The step the SVG highlights keeps its accent here. */
  .c-bp-row.lit { border-color: var(--blue); }
  .c-bp-row.lit .ix { color: var(--blue); }

  /* Connector: a 2px stem in the 24px gap below every row but the
     last, with a chevron at its foot. Both are pseudo-elements on the
     row itself, so the markup stays five list items and nothing else. */
  .c-bp-row:not(:last-child) { margin-bottom: 24px; }
  .c-bp-row:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    width: 2px;
    height: 24px;
    transform: translateX(-50%);
    background: var(--line);
  }
  .c-bp-row:not(:last-child)::before {
    content: "";
    position: absolute;
    top: calc(100% + 13px);
    left: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--line);
    border-bottom: 2px solid var(--line);
    transform: translate(-50%, -50%) rotate(45deg);
  }
}

/* ── Narrow phones ───────────────────────────────────────────────
   Under 360px the longest LV status ("ATKĀRTOTI PĀRBAUDĪTS") ran 8px
   past its row at 320px. Tighter tracking alone still left it 8px
   into the row's padding, so the status may also wrap; right-aligned,
   a wrapped status keeps the column's edge. */
@media (max-width: 359.98px) {
  .c-bp-row .st {
    letter-spacing: .04em;
    white-space: normal;
    text-align: right;
  }
}