/* ============================================================
   AIMO — AI governance section
   Block A: animated schematic (SVG + CSS, no JS)
   Block B: interactive redaction demo (HTML + js/governance.js)

   Everything is namespaced .agov-* and inherits the page's type,
   spacing and colour tokens. Only four hooks carry meaning rather
   than decoration and are pinned here: the signal colour, the
   redaction bar, the callout mono, and the two stroke weights.
   ============================================================ */

.agov {
  --agov-sig:      var(--accent);       /* detected / inspection signal */
  --agov-sig-ink:  var(--on-accent);    /* text on the signal colour */
  --agov-ink:      #05070a;             /* censor bar: opaque, darkest value, both themes */
  --agov-ink-text: #eef4fb;
  --agov-rule:     color-mix(in srgb, var(--t-lo) 72%, transparent);  /* structure, 1px solid */
  --agov-hair:     var(--hair-2);       /* registration marks, dimension lines */
  --agov-mute:     var(--t-lo);
}
.agov-thin { font-weight: 500; color: var(--t-mid); }
/* the nav's back-link is hidden below 680px, which leaves a phone visitor no
   way home except the logo. This puts one at the top of the content. */
.agov-back { display: none; }
@media (max-width: 680px) {
  .agov-back {
    display: inline-flex; align-items: center;
    font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em;
    color: var(--t-lo); padding: 7px 12px; margin-bottom: 18px;
    border: 1px solid var(--hair-2); border-radius: 100px; background: var(--tint);
    transition: color .25s, border-color .25s;
  }
  .agov-back:hover, .agov-back:focus-visible { color: var(--accent); border-color: var(--accent); }
}

/* leading the homepage: the nav is fixed and 104px tall, so the first line
   needs real clearance beneath it, not just enough to avoid touching. */
.agov-lead { padding-top: clamp(138px, 15.5vh, 184px); }
/* below 620px the bar shrinks to 68px, so the same gap needs less padding */
@media (max-width: 620px) { .agov-lead { padding-top: clamp(92px, 12vh, 124px); } }


/* the homepage lede and its link sit under the drawing, not beside the title */
.agov-lead__after {
  display: grid; grid-template-columns: minmax(0, 1.15fr) auto;
  gap: clamp(24px, 4vw, 56px); align-items: center;
  margin-top: clamp(26px, 3vw, 40px);
}
.agov-lead__after .lede { max-width: 66ch; }
.agov-lead__after .agov-cta { margin-top: 0; }
@media (max-width: 760px) {
  .agov-lead__after { grid-template-columns: 1fr; gap: 20px; align-items: start; }
}

/* section CTA: sits under the intro, clear of Block B's own controls */
.agov-cta { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; }
/* ---------- detail-page deep dive ---------- */
.agov-prose { max-width: 68ch; display: flex; flex-direction: column; gap: 18px; }
.agov-prose p { color: var(--t-mid); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.68; }
/* a split head whose right column runs to several paragraphs reads better
   top-aligned than bottom-aligned */
.agov-split-top { align-items: start; }

/* the German headline's longest line needs 631px and the shared 1.3fr split
   column gives 629px, so this page's head runs a slightly wider left column.
   Gated above 820px: .sec-head--split collapses to one column at or below
   that width in sections.css, and this rule outweighs it on specificity, so
   ungated it would keep the head two-up all the way down to 320px. */
@media (min-width: 821px) {
  .agov-page .sec-head--split { grid-template-columns: 1.42fr 1fr; }
}

/* model / infrastructure providers. Wordmarks follow the site's trust-strip
   pattern; an <img> dropped in front of the name renders in its place. */
.agov-providers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.agov-provider {
  display: grid; place-items: center; align-content: center; gap: 9px; text-align: center;
  min-height: 122px; padding: 26px 18px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); box-shadow: var(--card-shadow);
  transition: border-color .35s, transform .35s;
}
.agov-provider:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); transform: translateY(-3px); }
.agov-provider img { height: 26px; width: auto; opacity: .92; }
.agov-provider__name {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(14px, 1.15vw, 17px);
  letter-spacing: -.01em; color: var(--t-hi); line-height: 1.25; text-wrap: balance;
  /* the German open-tile label runs to two lines while the brand names are
     one, so every name reserves two lines and all four titles share a
     baseline instead of the long one shunting its neighbours */
  min-height: 2.5em;
}
.agov-provider__role {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--agov-mute);
}
/* Brand marks are inline SVG rather than <img> so they follow the theme
   through currentColor. Paths are Simple Icons (CC0); the trademarks stay
   with their owners. Muted at rest so the row reads as one texture. */
.agov-provider__logo {
  width: 26px; height: 26px; display: block;
  color: var(--t-mid); transition: color .35s;
}
.agov-provider:hover .agov-provider__logo { color: var(--t-hi); }

/* the last tile is the claim the headline makes, so it is drawn open
   rather than as one more vendor */
.agov-provider--open {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--line) 74%, transparent);
  background: transparent; box-shadow: none;
}
.agov-provider--open .agov-provider__name { color: var(--t-mid); }
.agov-provider--open .agov-provider__logo { color: var(--agov-mute); }

@media (max-width: 1000px) { .agov-providers { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) {
  .agov-providers { grid-template-columns: 1fr; }
  .agov-provider { min-height: 0; padding: 20px 16px; }
  /* one per row, so nothing needs to line up with anything */
  .agov-provider__name { min-height: 0; }
}

/* ---------- routing meter and audit log (static) ---------- */

/* cost section: one composer with a working model picker.
   Interaction only — no ambient motion. */
.agov-chat {
  margin-top: clamp(28px, 3.5vw, 44px);
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--panel); box-shadow: var(--card-shadow);
  padding: 16px 16px 14px; max-width: 780px;
}
.agov-chat__prompt {
  margin: 0; color: var(--t-hi); font-size: 16px; line-height: 1.6; min-height: 3.2em;
}
.agov-chat__bar { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.agov-chat__ico {
  width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--tint); color: var(--t-lo);
}
.agov-chat__ico svg { width: 15px; height: 15px; display: block; }
.agov-chat__send {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent);
}
.agov-chat__send svg { width: 15px; height: 15px; display: block; }

/* model picker */
.agov-chat__model { position: relative; margin-left: auto; }
.agov-chat__chip {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 7px 10px 7px 13px; border-radius: 100px;
  border: 1px solid var(--hair-2); background: var(--tint);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: var(--t-mid);
  white-space: nowrap; transition: border-color .25s, color .25s, background .25s;
}
.agov-chat__chip:hover { border-color: var(--accent); color: var(--accent); }
.agov-chat__chip[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); background: var(--tint-2); }
.agov-chat__chev svg { width: 12px; height: 12px; display: block; opacity: .6; }
.agov-chat__menu {
  position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 20;
  min-width: 268px; padding: 6px;
  border: 1px solid var(--hair-2); border-radius: 14px;
  background: var(--panel); box-shadow: 0 18px 44px rgba(0,0,0,.28);
}
:root[data-theme="light"] .agov-chat__menu { box-shadow: 0 18px 44px rgba(23,45,77,.16); }
/* class-driven so the auto-demonstration can fade it in */
.agov-chat__menu {
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.agov-chat__menu.is-open { opacity: 1; visibility: visible; transform: none; }
.agov-chat__menu button.is-preview { background: var(--tint-2); box-shadow: inset 0 0 0 1px var(--hair-2); }
.agov-chat__menu button {
  display: flex; width: 100%; align-items: center; gap: 12px; cursor: pointer;
  padding: 9px 10px; border-radius: 10px; text-align: left;
  transition: background-color .18s ease, color .18s ease;
}
.agov-chat__menu button:hover { background: var(--tint-2); }
.agov-chat__menu button[aria-selected="true"] { background: var(--tint-2); }
.agov-chat__opt-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.agov-chat__opt-name { font-size: 14px; font-weight: 500; color: var(--t-hi); }
.agov-chat__opt-desc { font-family: var(--font-mono); font-size: 10.5px; color: var(--agov-mute); }
.agov-chat__opt-check { width: 14px; flex-shrink: 0; color: var(--accent); opacity: 0; }
.agov-chat__opt-check svg { width: 14px; height: 14px; display: block; }
.agov-chat__menu button[aria-selected="true"] .agov-chat__opt-check { opacity: 1; }
.agov-chat :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.agov-chat__state {
  font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6; letter-spacing: .04em;
  color: var(--t-lo); margin: 14px 0 0;
}
@media (max-width: 560px) {
  .agov-chat__menu { right: auto; left: 0; min-width: 0; width: 100%; }
}

/* ---------- policy -> enforcement ---------- */
.agov-flow {
  margin-top: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); box-shadow: var(--card-shadow); overflow: hidden;
}
.agov-flow__row {
  display: grid; grid-template-columns: 1.5fr 1fr 0.9fr; gap: clamp(14px, 2vw, 26px);
  align-items: center; padding: 16px clamp(16px, 2vw, 22px);
  border-bottom: 1px solid var(--hair);
}
.agov-flow__row:last-child { border-bottom: 0; }
.agov-flow__row--head {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--agov-mute); border-bottom: 1px solid var(--line);
  background: var(--tint); padding-block: 12px;
}
.agov-flow__rule { color: var(--t-hi); font-size: 15px; line-height: 1.5; }
.agov-flow__act {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em;
  color: var(--agov-mute); line-height: 1.5;
}
.agov-flow__out {
  justify-self: start; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  padding: 6px 11px; border-radius: 100px; border: 1px solid var(--hair-2);
  background: var(--tint); color: var(--t-mid); line-height: 1.4;
}
.agov-flow__out.is-redact { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.agov-flow__out.is-block  { color: var(--danger); border-color: color-mix(in srgb, var(--danger-2) 45%, var(--line)); }
@media (max-width: 760px) {
  .agov-flow__row { grid-template-columns: 1fr; gap: 8px; }
  .agov-flow__row--head { display: none; }
}

/* ---------- the seven actions ----------
   The grid is the finished state. Cards arrive one at a time as the block
   scrolls past, then stay. js/governance.js sets --shown from scroll position;
   everything else is CSS. */
.agov-actions {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px;
}
.agov-action {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 7px;
  padding: 20px 18px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); box-shadow: var(--card-shadow);
  transition: border-color .35s, transform .35s;
}
/* same hover as the site's .cap cards: lift, accent border, corner glow */
.agov-action::before {
  content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none;
  transition: opacity .4s;
  background: radial-gradient(80% 60% at 100% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 60%);
}
.agov-action:hover::before { opacity: 1; }
.agov-action:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.agov-action:hover,
.agov-actions[data-reveal-ready] .agov-action.is-in:hover { transform: translateY(-3px); }

/* content sits above the glow */
.agov-action__n, .agov-action__t, .agov-action__p { position: relative; }
.agov-action__n {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; color: var(--accent);
}
.agov-action__t { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--t-hi); }
.agov-action__p { color: var(--t-lo); font-size: 14px; line-height: 1.55; }

/* hidden until its turn. Only opacity and transform move, so the grid never
   reflows and the later cards hold their place. */
.agov-actions[data-reveal-ready] .agov-action {
  opacity: 0; transform: translateY(14px);
  transition: opacity .45s cubic-bezier(.2,.7,.2,1), transform .45s cubic-bezier(.2,.7,.2,1),
              border-color .35s ease;
}
.agov-actions[data-reveal-ready] .agov-action.is-in { opacity: 1; transform: none; }

/* ---------- evidence: text beside the record ----------
   The card was 560px in a 1152px column, leaving half the row empty. */
.agov-evi {
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: clamp(32px, 4vw, 64px); align-items: start;
}
.agov-evi__text { display: flex; flex-direction: column; }
.agov-evi__text .h-sec { margin-top: 18px; }
.agov-evi__text p { color: var(--t-mid); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.68; margin-top: 18px; }
.agov-evi__text .agov-note { margin-top: 16px; }
.agov-evi__side .agov-rec { margin-top: 0; max-width: none; }
@media (max-width: 900px) { .agov-evi { grid-template-columns: 1fr; gap: 30px; } }

/* ---------- evidence: one audit record ----------
   Written line by line when it scrolls into view, then sealed. One entry
   rather than a table of them: the point is what a record contains. */
.agov-rec {
  margin-top: clamp(26px, 3vw, 40px); max-width: 560px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); box-shadow: var(--card-shadow); overflow: hidden;
}
.agov-rec__bar {
  display: flex; align-items: center; gap: 12px; padding: 13px 18px;
  border-bottom: 1px solid var(--line); background: var(--tint);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--agov-mute);
}
.agov-rec__id { color: var(--t-mid); letter-spacing: .08em; }
.agov-rec__seal {
  margin-left: auto; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent);
  opacity: 0; transform: scale(.7);
  transition: opacity .3s ease, transform .3s cubic-bezier(.2,1.4,.4,1);
}
.agov-rec__seal svg { width: 12px; height: 12px; display: block; }
.agov-rec.is-sealed .agov-rec__seal { opacity: 1; transform: none; }

.agov-rec__body { padding: 4px 0; }
.agov-rec__row {
  display: grid; grid-template-columns: 128px 1fr; gap: 14px; align-items: baseline;
  padding: 11px 18px; border-bottom: 1px solid var(--hair);
}
.agov-rec__row:last-child { border-bottom: 0; }
.agov-rec__k {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--agov-mute);
}
.agov-rec__v { font-family: var(--font-mono); font-size: 13px; color: var(--t-hi); }
.agov-rec__v.is-act { color: var(--accent); }

/* the writing-in. Only runs once, and only when the card is on screen. */
.agov-rec[data-writing] .agov-rec__row {
  opacity: 0; transform: translateY(-4px);
  transition: opacity .28s ease, transform .28s cubic-bezier(.2,.7,.2,1);
}
.agov-rec[data-writing] .agov-rec__row.is-in { opacity: 1; transform: none; }
@media (max-width: 520px) {
  .agov-rec__row { grid-template-columns: 1fr; gap: 3px; }
}

/* ---------- generic data table (editions, inventory) ---------- */
.agov-table__wrap {
  margin-top: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); box-shadow: var(--card-shadow); overflow: hidden;
}
.agov-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.agov-table th {
  text-align: left; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 400; color: var(--agov-mute);
  padding: 13px clamp(14px, 1.8vw, 20px); border-bottom: 1px solid var(--line); background: var(--tint);
}
.agov-table td {
  padding: 15px clamp(14px, 1.8vw, 20px); border-bottom: 1px solid var(--hair);
  vertical-align: top; color: var(--t-mid); line-height: 1.55;
}
.agov-table tr:last-child td { border-bottom: 0; }
.agov-table td:first-child { font-family: var(--font-mono); font-size: 13px; color: var(--t-hi); white-space: nowrap; }
.agov-table .is-ok, .agov-table .is-warn, .agov-table .is-no {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; white-space: nowrap;
}
.agov-table .is-ok { color: var(--accent); }
.agov-table .is-warn { color: var(--t-mid); }
.agov-table .is-no { color: var(--t-dim); }
.agov-table--ed td:nth-child(2) { font-family: var(--font-mono); font-size: 12.5px; white-space: nowrap; }
/* On a phone a 600px table means the Status column is off-screen. Each row
   becomes a stacked block instead, labelled from the header it belonged to. */
@media (max-width: 760px) {
  .agov-table__wrap { overflow-x: visible; }
  .agov-table, .agov-table tbody { min-width: 0; display: block; }
  .agov-table thead { display: none; }
  .agov-table tr { display: block; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  .agov-table tr:last-child { border-bottom: 0; }
  .agov-table td {
    display: grid; grid-template-columns: 104px 1fr; gap: 12px; align-items: baseline;
    padding: 5px 0; border: 0; white-space: normal;
  }
  .agov-table td::before {
    content: attr(data-label);
    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--agov-mute);
  }
  .agov-table td:first-child { font-size: 13px; }
}

/* hero supporting line */
.agov-support { color: var(--t-mid); font-size: clamp(15px, 1.2vw, 17px); line-height: 1.6; margin-top: 16px; }

/* the site's .ind grid is built for four cells; the two routing classes
   take half the row each */
.agov-two { grid-template-columns: 1fr 1fr; }
.agov-two .ind__cell:nth-child(-n+2) { border-bottom: 0; }
@media (max-width: 560px) {
  .agov-two { grid-template-columns: 1fr; }
  .agov-two .ind__cell:first-child { border-bottom: 1px solid var(--line); border-right: 0; }
}

/* .btn is nowrap by design; the long German CTA label then forces the hero
   wider than a 360px viewport. Let this one wrap on small screens. */
@media (max-width: 560px) {
  .agov-cta .btn { white-space: normal; text-align: left; }
  .agov-cta { width: 100%; }
  .agov-cta .btn { width: 100%; justify-content: space-between; }
}

/* EU flag on the data-processing card: official 3:2 field, 12 stars.
   Stacked above the heading it pushed the whole card down and knocked its
   two neighbours out of line, so it is lifted out of the flow and pinned
   to the corner as a badge. */
.agov-cap--flag { position: relative; }
.agov-cap--flag .h-card { padding-right: 52px; }
.agov-flagwrap { position: absolute; top: 22px; right: 22px; line-height: 0; }
@media (max-width: 620px) { .agov-flagwrap { top: 18px; right: 18px; } }
.agov-flag {
  width: 40px; height: auto; display: block; border-radius: 3px;
  box-shadow: 0 0 0 1px var(--line), 0 1px 3px rgba(0,0,0,.18);
}

/* the browser-side check is an illustration of the inspection step, and the
   copy next to it has to say so */
.agov-note, .agov-prose .agov-note, .agov-evi__text .agov-note {
  margin-top: 16px; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6;
  letter-spacing: .04em; color: var(--t-lo); max-width: 70ch;
}

/* ---------- the figure runs against the page ----------
   Light page -> dark drawing sheet; dark page -> light sheet. The figure is
   entirely token-driven, so swapping the token set inside it is enough.
   The --agov-* tokens are computed on .agov, so they are redeclared here or
   they would keep resolving against the page's accent instead of this one. */
:root[data-theme="light"] .agov-fig {
  --bg:      #1c222b;
  --panel:   #242b35;
  --line:    rgba(150,180,215,.12);
  --hair:    rgba(150,180,215,.07);
  --hair-2:  rgba(150,180,215,.20);
  --t-hi:    #f0f4f8;
  --t-mid:   #b6c1cf;
  --t-lo:    #8694a4;
  --t-dim:   #5b6776;
  --accent:  #46a6ff;
  --on-accent: #06131f;
  --tint:    rgba(255,255,255,.02);
  --card-shadow: 0 18px 44px rgba(23,45,77,.18);
}
:root[data-theme="dark"] .agov-fig {
  --bg:      #eef1f6;
  --panel:   #ffffff;
  --line:    rgba(23,45,77,.14);
  --hair:    rgba(23,45,77,.08);
  --hair-2:  rgba(23,45,77,.20);
  --t-hi:    #0d1622;
  --t-mid:   #47546a;
  --t-lo:    #5d6a7c;
  --t-dim:   #697687;
  --accent:  #0b62d6;
  --on-accent: #ffffff;
  --tint:    rgba(16,36,66,.03);
  --card-shadow: 0 18px 44px rgba(0,0,0,.35);
}
/* re-derive so they pick up the figure's own accent / text colours */
.agov-fig {
  --agov-sig:     var(--accent);
  --agov-sig-ink: var(--on-accent);
  --agov-rule:    color-mix(in srgb, var(--t-lo) 72%, transparent);
  --agov-hair:    var(--hair-2);
  --agov-mute:    var(--t-lo);
}

/* ============================================================
   BLOCK A — schematic
   ============================================================ */
.agov-fig {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.agov-fig__scroll { padding: clamp(14px, 2vw, 26px) clamp(14px, 2vw, 26px) 6px; }
/* the drawing is authored at 1000px; letting it scale past that blows up
   every label, so cap it at its natural size and centre it */
.agov-fig svg { width: 100%; max-width: 960px; height: auto; display: block; margin-inline: auto; }
.agov-cap {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--agov-mute); padding: 13px clamp(14px, 2vw, 26px); border-top: 1px solid var(--line);
}

/* two stroke weights only: 1px solid for structure, 1px dashed for the boundary */
.agov-rule   { stroke: var(--agov-rule); stroke-width: 1; fill: none; }
.agov-hair   { stroke: var(--agov-hair); stroke-width: 1; fill: none; }
.agov-frame  { stroke: var(--t-dim); stroke-width: 1; fill: none; stroke-dasharray: 6 5; }
.agov-box    { fill: var(--bg); stroke: var(--agov-rule); stroke-width: 1; }

.agov-lbl    { font-family: var(--font-body); font-size: 13px; font-weight: 500; fill: var(--t-hi); }
.agov-mono   { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .09em; fill: var(--agov-mute); }
.agov-mono-d { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .09em; fill: var(--t-mid); }

.agov-tick      { fill: var(--agov-sig); }
.agov-sig-fill  { fill: var(--agov-sig); }
.agov-sig-text  { font-family: var(--font-mono); font-size: 10px; fill: var(--agov-sig-ink); }
.agov-ink-fill  { fill: var(--agov-ink); }
.agov-inv-text  { font-family: var(--font-mono); font-size: 10px; fill: var(--agov-ink-text); }

/* One 8s loop. The packet fades out at the layer's left edge and back in at
   its right edge, so nothing ever travels across a labelled element. The
   raw -> redacted swap happens inside that invisible window. */
@keyframes agov-pathA {
  0%        { transform: translate(0,0); }
  22%, 26%  { transform: translate(136px,0); }
  30%, 34%  { transform: translate(356px,0); }
  55%, 100% { transform: translate(432px,-56px); }
}
@keyframes agov-pathB {
  0%        { transform: translate(0,0); }
  22%, 26%  { transform: translate(136px,0); }
  30%, 34%  { transform: translate(356px,0); }
  55%, 100% { transform: translate(432px,56px); }
}
@keyframes agov-pktFade {
  0%        { opacity: 0; }          /* fade in, so the loop wrap is invisible */
  4%, 22%   { opacity: 1; }
  26%, 30%  { opacity: 0; }          /* hidden while crossing the layer */
  34%, 94%  { opacity: 1; }
  100%      { opacity: 0; }          /* delivered, then clears before restart */
}
@keyframes agov-rawOff { 0%, 28% { opacity: 1; } 32%, 100% { opacity: 0; } }
@keyframes agov-barOn  { 0%, 28% { opacity: 0; } 32%, 100% { opacity: 1; } }
@keyframes agov-tick {
  0%, 20%   { opacity: 0; }
  26%, 34%  { opacity: 1; }
  40%, 100% { opacity: 0; }
}

.agov-pA { animation: agov-pathA 8s cubic-bezier(.65,0,.3,1) infinite; }
.agov-pB { animation: agov-pathB 8s cubic-bezier(.65,0,.3,1) infinite; animation-delay: -2.6s; }
.agov-pkt-fade { animation: agov-pktFade 8s linear infinite; }
.agov-pB .agov-pkt-fade { animation-delay: -2.6s; }
.agov-raw { animation: agov-rawOff 8s linear infinite; }
.agov-bar { animation: agov-barOn 8s linear infinite; opacity: 0; }

.agov-tick { fill: var(--agov-sig); opacity: 0; animation: agov-tick 8s ease infinite; }
.agov-ticks .agov-tick:nth-of-type(2) { animation-delay: .12s; }
.agov-ticks .agov-tick:nth-of-type(3) { animation-delay: .24s; }
.agov-ticks .agov-tick:nth-of-type(4) { animation-delay: .36s; }

/* ============================================================
   BLOCK B — redaction demo
   ============================================================ */
.agov-demo {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--card-shadow);
}
/* corner registration marks, same drawing language as Block A */
.agov-demo::before, .agov-demo::after {
  content: ""; position: absolute; width: 9px; height: 9px; border: 1px solid var(--t-dim); pointer-events: none;
}
.agov-demo::before { top: -5px; left: -5px; border-right: 0; border-bottom: 0; }
.agov-demo::after  { bottom: -5px; right: -5px; border-left: 0; border-top: 0; }

.agov-demo :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.agov-demo__bar {
  display: flex; align-items: center; gap: 12px; padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--agov-mute);
}
.agov-demo__state { margin-left: auto; color: var(--t-hi); display: flex; align-items: center; gap: 8px; }
.agov-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hair-2); transition: background .2s; }
.agov-dot.is-scan { background: var(--agov-sig); }
.agov-dot.is-done { background: var(--agov-ink); box-shadow: 0 0 0 1px var(--hair-2); }

.agov-demo__body { padding: 26px 18px 8px; }
.agov-sample { font-size: 18px; line-height: 2.15; margin: 0; color: var(--t-hi); overflow-wrap: break-word; }
.agov-sample tok { display: inline; border-radius: 1px; padding: 2px 4px; transition: background .22s, color .22s; }
/* a match must read as one bar, so keep it on one line where the column is
   wide enough to hold it; below that, wrapping beats a horizontal scrollbar */
@media (min-width: 480px) { .agov-sample tok { white-space: nowrap; } }
.agov-sample tok.flag { background: var(--agov-sig); color: var(--agov-sig-ink); }
.agov-sample tok.hid  { background: var(--agov-ink); color: transparent; position: relative; }
.agov-sample tok.hid::after {
  content: attr(data-code); position: absolute; left: 0; top: 100%; margin-top: 7px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; color: var(--agov-mute);
  white-space: nowrap; border-left: 1px solid var(--agov-rule); padding-left: 6px; height: 14px;
}
.agov-sample.spaced { line-height: 3.1; }

.agov-panel {
  margin: 18px 18px 0; border-top: 1px solid var(--line); padding: 16px 0 0;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height .35s ease, opacity .3s ease;
}
.agov-panel.is-open { max-height: 520px; opacity: 1; }
.agov-hits { width: 100%; border-collapse: collapse; font-size: 13.5px; color: var(--t-mid); }
.agov-hits td { padding: 7px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.agov-hits td:first-child { font-family: var(--font-mono); font-size: 12px; color: var(--t-hi); width: 118px; }
.agov-hits td:last-child {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--agov-mute); text-align: right;
}
.agov-hits tr:last-child td { border-bottom: 0; }
.agov-hits tr.agov-more td { font-family: var(--font-mono); font-size: 11px; color: var(--agov-mute); letter-spacing: .06em; }

.agov-own { padding: 0 18px 18px; }
.agov-own[hidden] { display: none; }
.agov-own label {
  display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--agov-mute); margin: 6px 0 8px;
}
.agov-own textarea {
  width: 100%; min-height: 96px; font-family: var(--font-body); font-size: 15px; line-height: 1.7;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--tint); color: var(--t-hi); resize: vertical; transition: border-color .25s, background .25s;
}
.agov-own textarea::placeholder { color: var(--t-dim); }
.agov-own textarea:focus { outline: none; border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); background: var(--tint-2); }
.agov-chips { display: flex; gap: 7px; flex-wrap: wrap; margin: 12px 0 0; }
.agov-chip {
  font-family: var(--font-mono); font-size: 11px; padding: 5px 9px;
  border: 1px solid var(--line); border-radius: 6px; color: var(--t-mid);
}
.agov-chip:first-child { border-color: transparent; padding-left: 0; color: var(--agov-mute); }
.agov-err { font-size: 13px; color: var(--danger); margin: 10px 0 0; min-height: 18px; }

.agov-demo__foot {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 18px; border-top: 1px solid var(--line); margin-top: 18px;
}
.agov-demo__foot .btn { --bpad: 10px 17px; font-size: 12px; border-radius: 9px; }
.agov-count {
  margin-left: auto; font-family: var(--font-mono); font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--agov-mute);
}

/* vertical flow, phones only */
.agov-fm { display: none; }
@media (max-width: 760px) {
  .agov-fig__scroll { display: none; }
  .agov-fm {
    display: flex; flex-direction: column; align-items: stretch;
    padding: clamp(14px, 4vw, 22px) clamp(14px, 4vw, 22px) 6px;
  }
  .agov-fm__step {
    display: flex; flex-direction: column; gap: 3px; text-align: center;
    padding: 13px 14px; border: 1px solid var(--agov-rule); border-radius: 10px;
    background: var(--bg);
  }
  .agov-fm__step--layer { padding-bottom: 15px; }
  .agov-fm__lbl { font-size: 14px; font-weight: 500; color: var(--t-hi); }
  .agov-fm__sub {
    font-family: var(--font-mono); font-size: 10px; letter-spacing: .09em;
    color: var(--agov-mute);
  }
  .agov-fm__stages {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 9px;
  }
  .agov-fm__stages i {
    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; font-style: normal;
    color: var(--t-mid); border: 1px solid var(--hair-2); border-radius: 100px; padding: 3px 8px;
  }
  .agov-fm__dim {
    font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .08em;
    color: var(--agov-mute); margin-top: 9px;
  }
  /* the connector, drawn in CSS so nothing needs to scale */
  .agov-fm__link { display: block; height: 22px; position: relative; }
  .agov-fm__link::before {
    content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
    background: var(--agov-rule);
  }
  .agov-fm__link--split { height: 26px; }
  .agov-fm__link--split::after {
    content: ""; position: absolute; left: 25%; right: 25%; bottom: 0; height: 1px;
    background: var(--agov-rule);
  }
  .agov-fm__targets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .agov-fm__targets .agov-fm__step { position: relative; }
  .agov-fm__targets .agov-fm__step::before {
    content: ""; position: absolute; left: 50%; top: -10px; height: 10px; width: 1px;
    background: var(--agov-rule);
  }
}
@media (max-width: 640px) {
  .agov-sample { font-size: 16px; }
  /* at 16px the 3.1 leading leaves the callout code touching the next line's bar */
  .agov-sample.spaced { line-height: 3.45; }
  .agov-demo__foot { gap: 8px; }
  .agov-count { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  /* the record is complete from the start */
  .agov-rec[data-writing] .agov-rec__row { opacity: 1; transform: none; transition: none; }
  .agov-rec__seal { transition: none; }
  /* every card visible at once, no arrival */
  .agov-actions[data-reveal-ready] .agov-action { opacity: 1; transform: none; transition: none; }
  /* hold the end state: both packets delivered, A redacted, all stages lit */
  .agov-pA, .agov-pB, .agov-pkt-fade, .agov-raw, .agov-bar, .agov-tick { animation: none; }
  .agov-pA { transform: translate(432px,-56px); }
  .agov-pB { transform: translate(432px,56px); }
  .agov-pkt-fade { opacity: 1; }
  .agov-raw { opacity: 0; }
  .agov-bar { opacity: 1; }
  .agov-tick { opacity: 1; }
  /* Block B: no transitions; js/governance.js drops every delay and the auto-confirm */
  .agov-panel, .agov-sample tok, .agov-dot, .agov-own textarea { transition: none; }
}