/* aud-fields · "one record, five answers" · /ai-agents/audit #include (white band, no container). Scoped under .aud-fields.
   Fact: each record answers the same five questions. Spec: build/pages/ai-agents-audit/assets.md §4.
   Uses v4.css tokens (--ink tiers, --sans, --mono, --t2…--t4, --ease, --ease-io) with fallbacks so preview.html works standalone.
   Two indicators, each on its own structure: a 1.5px mark on the list's left rule and a 1.5px write head on the record's rule.
   The markup is the final frame; .is-live (added by asset.js) rewinds it and asset.js drives every frame from one clock, then clears
   its inline styles at END. After END the list is the control, and these transitions carry the head, the mark and the step-back. */
.aud-fields{
  --aud-t2:var(--t2,200ms);--aud-t3:var(--t3,320ms);
  --aud-io:var(--ease-io,cubic-bezier(.65,0,.35,1));--aud-ease:var(--ease,cubic-bezier(.25,1,.5,1));
  --aud-ink:var(--ink,#0a0a0a);
  --aud-soft:var(--ink-60,rgba(10,10,10,.6));
  --aud-line:var(--ink-15,rgba(10,10,10,.15));   /* the stroke floor: never ink-08 */
  --aud-ok-rest:#17471D;                          /* 50% --ok over ink: the outcome at rest, ~10:1 on white */
  display:grid;grid-template-columns:264px minmax(0,1fr);column-gap:48px;align-items:start;margin:0;color:var(--aud-ink)
}
.aud-fields>*{min-width:0}
.aud-fields p{margin:0}

/* the five questions (sans: the page's own list), a 1px rule down the left edge, a 1.5 × 24 mark on it */
.aud-fields .aud-fd-list{position:relative;list-style:none;margin:0;padding:0 0 0 16px}
.aud-fields .aud-fd-list::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--aud-line)}
.aud-fields .aud-fd-list::after{content:"";position:absolute;left:0;top:0;width:1.5px;height:24px;background:var(--aud-ink);
  opacity:var(--aud-mo,0);transform:translateY(var(--aud-my,8px));
  transition:transform var(--aud-t3) var(--aud-io),opacity var(--aud-t3) var(--aud-ease)}
.aud-fields .aud-fd-list li{margin:0}
.aud-fields .aud-fd-q{display:block;width:100%;min-height:40px;margin:0;padding:8px 0;border:0;border-radius:0;background:none;
  text-align:left;font:450 17px/24px var(--sans);letter-spacing:-.005em;color:var(--aud-ink);cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:color var(--aud-t2) var(--aud-ease)}
.aud-fields .aud-fd-q:focus-visible{outline:2px solid var(--blue,#147FFD);outline-offset:2px;border-radius:6px}
.aud-fields .aud-fd-q.is-back{color:var(--aud-soft)}

/* the record: one line of type on one rule. Sans means a person, mono means the machine */
.aud-fields .aud-fd-rec{container:aud-rec / inline-size;position:relative;margin:0}
.aud-fields .aud-fd-stage{position:relative;padding-top:8px}   /* the line box shares list row 1's line box (8px button padding) */
.aud-fields .aud-fd-line{font:400 14px/24px var(--mono);letter-spacing:0;white-space:nowrap;color:var(--aud-ink)}
.aud-fields .aud-fd-line span{display:inline-block}             /* every typed unit is its own box, so clip-path types it */
.aud-fields .aud-fd-seg{transition:color var(--aud-t2) var(--aud-ease)}
.aud-fields .aud-fd-sep{margin:0 8px;color:var(--aud-soft)}
.aud-fields .aud-fd-lbl{color:var(--aud-soft)}
.aud-fields .aud-fd-who{font:450 15px/24px var(--sans);letter-spacing:-.005em}
.aud-fields .aud-fd-out{font-weight:500;letter-spacing:.06em;color:var(--aud-ok-rest)}
.aud-fields .aud-fd-seg.is-back,.aud-fields .aud-fd-seg.is-back *{color:var(--aud-soft)}
.aud-fields .aud-fd-rule{position:relative;display:block;height:1px;margin-top:5px;background:var(--aud-line)}
.aud-fields .aud-fd-head{position:absolute;left:0;right:0;bottom:0;display:block;height:1.5px;background:var(--aud-ink);
  opacity:0;clip-path:inset(0 100% 0 0);
  transition:clip-path var(--aud-t3) var(--aud-io),opacity var(--aud-t3) var(--aud-ease)}
.aud-fields .aud-fd-cap{margin-top:16px;text-align:right;font:400 11px/16px var(--mono);color:var(--aud-soft)}

/* live: asset.js rewinds (every typed unit clipped shut, questions back, indicators hidden) and writes each frame itself */
.aud-fields.is-live .aud-fd-q,.aud-fields.is-live .aud-fd-seg,.aud-fields.is-live .aud-fd-head,.aud-fields.is-live .aud-fd-list::after,
.aud-fields.is-snap .aud-fd-head,.aud-fields.is-snap .aud-fd-list::after{transition:none}
.aud-fields.is-live .aud-fd-q{color:var(--aud-soft)}
.aud-fields.is-live .aud-fd-line span:not(.aud-fd-seg):not(:has(span)),
.aud-fields.is-live .aud-fd-seg:not(:has(span)){clip-path:inset(-4px 100% -4px 0)}

/* stacked segments (record box under 912px, the measured line of ~896 plus air: every phone and 761–959 viewports): recompose, don't shrink.
   The one line becomes five rows in record order, still sitting on the record's one horizontal rule: one record, no labels.
   BUILDER CHANGE (assets.md §4.5 put the rule vertical at x 0 with the head beside the active row): that is apv-named's phone
   composition (a left rule beside stacked mono rows with a mark on it), and under the list's own x 0 rule it read as one broken
   spine. Here the rule stays horizontal and the head rests (M11: marks halved on phones); the list mark, the typing and the
   step-back carry the link from question to answer. */
@container aud-rec (max-width:911.98px){
  .aud-fields .aud-fd-line{display:grid;justify-items:start;row-gap:8px;font-size:13px;line-height:22px}
  .aud-fields .aud-fd-line>.aud-fd-sep{display:none}             /* the · inside the decision stays */
  .aud-fields .aud-fd-who{font-size:14px;line-height:22px}
  .aud-fields .aud-fd-stage,.aud-fields .aud-fd-cap{max-width:470px}   /* the site's body measure: the rule ends near its record */
  .aud-fields .aud-fd-rule{margin-top:12px}
  .aud-fields .aud-fd-head{display:none}
  .aud-fields .aud-fd-cap{text-align:left}
}
/* the same recompose, forced by asset.js if the one line ever overruns its box (a fallback font, text-only zoom) */
.aud-fields.is-tight .aud-fd-line{display:grid;justify-items:start;row-gap:8px;font-size:13px;line-height:22px}
.aud-fields.is-tight .aud-fd-line>.aud-fd-sep{display:none}
.aud-fields.is-tight .aud-fd-who{font-size:14px;line-height:22px}
.aud-fields.is-tight .aud-fd-stage,.aud-fields.is-tight .aud-fd-cap{max-width:470px}
.aud-fields.is-tight .aud-fd-rule{margin-top:12px}
.aud-fields.is-tight .aud-fd-head{display:none}
.aud-fields.is-tight .aud-fd-cap{text-align:left}
/* <= 1271 (covers <= 1100): one column, the list above the record. Side by side needs a 912 record box (264 + 48 + 912 = 1224
   content, so a 1272 viewport; .wrap only reaches 1232 at 1280). Below that the record box is the full content width, so the
   one-line record holds down to 960 viewports and the container rule above takes over below that.
   BUILDER CHANGE (assets.md §4.3–4.4 said >= 1240 and a 880 box): the line measures 896, not 866, so both moved. */
@media (max-width:1271.98px){
  .aud-fields{grid-template-columns:minmax(0,1fr);row-gap:40px}
  .aud-fields .aud-fd-stage{padding-top:0}
}
@media (max-width:760px){
  .aud-fields{row-gap:32px}
  .aud-fields .aud-fd-q{font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  .aud-fields *,.aud-fields .aud-fd-list::after{transition:none!important;animation:none!important}   /* asset.js never plays: the markup is the final frame; the buttons still work, instantly */
}
@media (forced-colors:active){
  .aud-fields .aud-fd-list::before,.aud-fields .aud-fd-rule{forced-color-adjust:none;background:GrayText}
  .aud-fields .aud-fd-list::after,.aud-fields .aud-fd-head{forced-color-adjust:none;background:Highlight}
  .aud-fields .aud-fd-q{color:ButtonText}
  .aud-fields .aud-fd-q.is-back,.aud-fields .aud-fd-seg.is-back,.aud-fields .aud-fd-seg.is-back *{color:GrayText}
}
@media print{
  .aud-fields .aud-fd-list::before,.aud-fields .aud-fd-rule{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .aud-fields .aud-fd-head,.aud-fields .aud-fd-list::after{display:none}
}