/* page-ai.css: Plant Toolbox AI (wrapper #p-ai, ai.php). Every selector starts with #p-ai.
   2026-10-31 (R2·10, build step 4a, a pure move): the AI governance block (content/views/ai/02-governance.php,
   #pt-ai), with its rules from page-trust.css verbatim and re-scoped from #p-trust: the mono span (.pt-mono, the
   "Shared bits" rule, also kept on /trust), §7 AI governance whole, and the AI lines of its forced-colors block. The
   pt- prefix stays so the move reads as one. The Decision models deck keeps its own sheet, page-decision-models.css
   (also scoped to #p-ai), loaded after this one. Production state: P1 light ("Light steel") only. Loaded after
   site.css. Colors are tokens only.
   2026-10-31 (R2·11, build step 4b): the header (content/views/ai/01-header.php, #ai-top), a short hero with the
   neural-network figure (ai.js "The header" animates it).
   2026-10-31 (build step 4c): copy only (R2·O3, R2·O4, R2·9); the closing band (content/views/ai/09-next.php,
   #ai-next) is the site's closing band, styled by site.css §24a, so it has no rules here.
   Sections:
     1 shared: the mono span
     2 the header (#ai-top): short hero, no hairline; the neural-network figure (.ai-nn)
     3 AI governance (#pt-ai): six feature cards, then the harness console (ai.js "AI governance" adds the audit rows)
     4 forced colors
   ========================================================================== */

/* 1 · Shared ----------------------------------------------------------------------------------------------- */
/* D70 sweep: mono marks instrument values only, and only through this inline span (it keeps its line's colour and
   weight): the codes us-east-1 and TLS 1.2+, clock times (06:41:52), ids (WO-5527, #4187), plus the step badges
   below. Labels, names, table words and sentences are sans. Nothing inside an .app frame takes it. */
#p-ai .pt-mono { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 2 · The header -------------------------------------------------------------------------------------------
   A short hero with no hairline (R2·11, R2·C12, as on Getting started): 32/32 on a phone, 64/48 from 768 (the standard
   .page-header is 48/48 and 96/64), and no .page-header::before rule, so the AI governance tint starts right under it.
   B's paragraph (U·C1) is a second lead whose first words are bold in --ink. The figure sits beside the copy from 1024
   (site.css .page-header-grid, 7/5), centred on the copy rather than at its foot. Below 1024 it comes after the "On this
   page" chips, as in the plan's phone mock: unlike the site's other header visuals it holds a control (Replay, under
   reduced motion), so the screen order has to follow the DOM order for focus. */
#p-ai .ai-head { padding-top: var(--s-6); padding-bottom: var(--s-6); }
@media (min-width: 768px) { #p-ai .ai-head { padding-top: var(--s-8); padding-bottom: var(--s-7); } }
#p-ai .ai-head::before { display: none; }
#p-ai .ai-head .lead.ai-head-rules { margin-top: var(--s-3); }
#p-ai .ai-head-rules b { font-weight: 600; color: var(--ink); }
@media (max-width: 1023px) { #p-ai .ai-head .page-header-copy > .page-toc { order: 0; } }
@media (min-width: 1024px) { #p-ai .ai-head .page-header-visual { align-self: center; } }
/* The neural network (owner ask, Oct 30): plant data in, two hidden layers, what the product makes out. The markup is
   the still frame; ai.js moves it with classes and inline stroke values only (no layout), so nothing shifts. Edges are
   faint --line-strong; a lit path, its pulses and its nodes are --teal; an output's words go --ink once resolved.
   340 x 224 viewBox drawn at about 1:1 on a 390 phone (the figure fills the column, 440 px at most). */
#p-ai .ai-nn { width: 100%; max-width: 440px; margin-inline: auto; padding: var(--s-3) var(--s-3) var(--s-2); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-card); box-shadow: var(--shadow-1); }
@media (min-width: 1024px) { #p-ai .ai-nn { margin-right: 0; } }
#p-ai .ai-nn-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-sans); }
#p-ai .ai-nn-k { font-size: 11px; font-weight: 600; fill: var(--ink-3); }
#p-ai .ai-nn-e { stroke: var(--line-strong); stroke-width: 1; stroke-opacity: .3; transition: stroke .6s ease; }
#p-ai .ai-nn-e.is-hot { stroke: var(--teal); stroke-opacity: .6; }
#p-ai .ai-nn-p { stroke: var(--teal); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 12 100; stroke-dashoffset: 12; opacity: 0; }
#p-ai .ai-nn-n { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.3; transition: fill .45s ease, stroke .45s ease; }
#p-ai .ai-nn-n.is-lit { fill: var(--teal); stroke: var(--teal); }
#p-ai .ai-nn-halo { fill: none; stroke: var(--teal); stroke-width: 5; stroke-opacity: 0; transition: stroke-opacity .6s ease; }
#p-ai .ai-nn-out.is-on .ai-nn-halo { stroke-opacity: .2; }
#p-ai .ai-nn-l { font-size: 12px; fill: var(--ink-2); }
#p-ai .ai-nn-o { font-size: 12px; font-weight: 600; fill: var(--ink-3); transition: fill .5s ease; }
#p-ai .ai-nn-out.is-on .ai-nn-o { fill: var(--ink); }
/* Foot: Replay (reduced motion only, ai.js unhides it) left, the Illustrative tag right. */
#p-ai .ai-nn-cap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-1); }
#p-ai .ai-nn-cap .tag-illustrative { margin-left: auto; }
#p-ai .ai-nn-replay { flex: none; min-height: 32px; padding: 4px 12px; font: 600 13px/1.5 var(--font-sans); color: var(--teal-ink); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-control); cursor: pointer; }
#p-ai .ai-nn-replay:hover { border-color: var(--teal-ink); }
#p-ai .ai-nn-replay[hidden] { display: none; }
@media (max-width: 767px) { #p-ai .ai-nn-replay { min-height: 40px; } }
@media (prefers-reduced-motion: reduce) {
  #p-ai .ai-nn :is(.ai-nn-e, .ai-nn-n, .ai-nn-halo, .ai-nn-o) { transition: none; }
}

/* 3 · AI governance ----------------------------------------------------------------------------------------
   AI governance (owner round 2026-10-27; /trust §7 until 2026-10-31): fine-grained control. Six feature cards, then the harness console.
   Cards: one column, two from 640, three (3 × 2) from 1024; each an icon tile, name, where it lives, one line and its
   control as two chips (the kind of control, then who) pinned to the card foot. The console (figure.pt-hx) is the
   most technical panel, in light colours (owner round 2): a site diagram of Settings › Vera, not an .app frame.
   Panes: switches (three real checkboxes, role=switch; the metering mode and two locked rows are drawn), groups,
   credits used vs balance, the model lane (a dot runs the wire), and the audit tail. Mono only for values (counts,
   times, event codes). ai.js (AI governance) prepends .is-new audit rows; motion only under no-preference. */
#p-ai .pt-ai-feats { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
#p-ai .pt-ai-feat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  min-width: 0;
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}
#p-ai .pt-ai-feat::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto;
  height: 2px;
  background: linear-gradient(90deg, var(--teal), transparent 72%);
  border-radius: var(--r-card) var(--r-card) 0 0;
}
#p-ai .pt-ai-feat-h { display: flex; align-items: flex-start; gap: var(--s-3); min-width: 0; }
#p-ai .pt-ai-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--teal-ink);
  background: var(--tint);
  border: 1px solid var(--tint-border);
  border-radius: var(--r-control);
}
#p-ai .pt-ai-ico .icon { width: 18px; height: 18px; }
#p-ai .pt-ai-feat h3 { font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--ink); }
#p-ai .pt-ai-where { margin-top: 2px; font-size: 13px; line-height: 1.4; color: var(--ink-3); }
#p-ai .pt-ai-line { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
#p-ai .pt-ai-ctl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--hairline); }
#p-ai .pt-ai-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-2);
  background: var(--neutral-fill);
  border: 1px solid var(--hairline);
  border-radius: var(--r-control);
}
#p-ai .pt-ai-chip--k { color: var(--select-ink); background: var(--select-bg); border-color: var(--tint-border); }
@media (min-width: 640px) { #p-ai .pt-ai-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { #p-ai .pt-ai-feats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* The console (owner round 2, light): a --bg ground with the faint --grid-line grid and a --tint-border edge, white
   panes on --hairline rules, --ink words, --ink-3 captions, and the one blue (--teal, text --teal-ink) for every lit
   part: switch on, event codes, the lane and its dot. Text pairs pass AA: ink-3 5.9:1 on white, 5.5:1 on --bg;
   teal-ink 7.4:1; select-ink on select-bg 8.7:1. Non-text edges (switch track off) use --line-strong, 3.6:1. */
#p-ai .pt-hx { min-width: 0; margin: var(--s-7) 0 0; }
#p-ai .pt-hx-panel {
  position: relative;
  overflow: hidden;
  color: var(--ink-2);
  background:
    radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, var(--teal) 7%, transparent), transparent 70%),
    linear-gradient(var(--grid-line) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--bg);
  border: 1px solid var(--tint-border);
  border-radius: var(--r-decision);
  box-shadow: var(--shadow-1);
}
#p-ai :is(.pt-hx-panel, .pt-ai-feat) p { max-width: none; }
#p-ai .pt-hx .pt-mono { font-family: var(--font-mono); font-size: var(--fs-mono); font-variant-numeric: tabular-nums; }
#p-ai .pt-hx-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--surface) 75%, transparent);
  border-bottom: 1px solid var(--tint-border);
}
#p-ai .pt-hx-mark {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: 11px;
  font-weight: 700;
  color: var(--white);
  background: var(--teal);
  border-radius: var(--r-control);
}
#p-ai .pt-hx-title { font-size: 14px; font-weight: 600; color: var(--ink); }
#p-ai .pt-hx-crumb { font-size: 13px; color: var(--ink-3); }
#p-ai .pt-hx-crumb::before { content: "/"; margin-right: 10px; color: var(--hairline); }
#p-ai .pt-hx-end { display: inline-flex; align-items: center; gap: 14px; margin-left: auto; font-size: 13px; color: var(--ink-3); }
#p-ai .pt-hx-live { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--teal-ink); }
#p-ai .pt-hx-live i { width: 7px; height: 7px; background: var(--teal); border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 20%, transparent); }
#p-ai .pt-hx-body { display: grid; gap: var(--s-3); padding: var(--s-3); }
#p-ai .pt-hx-side { display: grid; gap: var(--s-3); align-content: start; min-width: 0; }
#p-ai .pt-hx-pane {
  min-width: 0;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}
#p-ai .pt-hx-h {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
#p-ai .pt-hx-count { margin-left: auto; letter-spacing: 0; text-transform: none; }
#p-ai .pt-hx-count .pt-mono { color: var(--ink); }

/* Switch rows: the name and its scope left, the control right; the control drops under the name when it can't fit. */
#p-ai .pt-hx-rows { margin: 0; padding: 0; list-style: none; }
#p-ai .pt-hx-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; min-height: 52px; padding-block: 8px; }
#p-ai .pt-hx-row + .pt-hx-row { border-top: 1px solid var(--hairline); }
#p-ai .pt-hx-nm { flex: 1 1 200px; min-width: 0; font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--ink); }
#p-ai .pt-hx-sub { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--ink-3); }
#p-ai .pt-hx-switch { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; }
#p-ai .pt-hx-switch input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
#p-ai .pt-hx-track {
  position: relative;
  flex: none;
  width: 36px;
  height: 20px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  transition: background-color 160ms ease, border-color 160ms ease;
}
#p-ai .pt-hx-track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: var(--line-strong);
  border-radius: 50%;
  transition: transform 160ms ease, background-color 160ms ease;
}
#p-ai .pt-hx-switch input:checked + .pt-hx-track { background: var(--teal); border-color: var(--teal); }
#p-ai .pt-hx-switch input:checked + .pt-hx-track::after { background: var(--white); transform: translateX(16px); }
#p-ai .pt-hx-switch input:focus-visible + .pt-hx-track { outline: 2px solid var(--focus); outline-offset: 3px; }
#p-ai :is(.pt-hx-on, .pt-hx-off) { min-width: 22px; font-size: 13px; font-weight: 600; }
#p-ai .pt-hx-on { color: var(--teal-ink); }
#p-ai .pt-hx-off { color: var(--ink-3); }
#p-ai .pt-hx-switch input:checked ~ .pt-hx-off,
#p-ai .pt-hx-switch input:not(:checked) ~ .pt-hx-on { display: none; }
#p-ai .pt-hx-lock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-control);
}
#p-ai .pt-hx-lock .icon { width: 13px; height: 13px; }
#p-ai .pt-hx-mode { display: inline-flex; border: 1px solid var(--hairline); border-radius: var(--r-control); overflow: hidden; }
#p-ai .pt-hx-mode span { padding: 3px 8px; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
#p-ai .pt-hx-mode span + span { border-left: 1px solid var(--hairline); }
#p-ai .pt-hx-mode .is-on { font-weight: 600; color: var(--select-ink); background: var(--select-bg); box-shadow: inset 0 -2px 0 var(--select-edge); }

/* Groups, credits, model lane. */
#p-ai .pt-hx-dl { display: grid; margin: 0; }
#p-ai .pt-hx-dl div { display: flex; justify-content: space-between; gap: var(--s-3); padding-block: 6px; font-size: 14px; }
#p-ai .pt-hx-dl div + div { border-top: 1px solid var(--hairline); }
#p-ai .pt-hx-dl dt { color: var(--ink-2); }
#p-ai .pt-hx-dl dd { margin: 0; color: var(--ink-3); text-align: right; }
#p-ai .pt-hx-dl dd .pt-mono { color: var(--ink); }
#p-ai .pt-hx-cr-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px var(--s-3); margin-bottom: 10px; font-size: 13px; color: var(--ink-3); }
#p-ai .pt-hx-cr-row b { margin-left: 4px; font-size: 16px; font-weight: 600; color: var(--ink); }
#p-ai .pt-hx-meter { display: block; height: 8px; overflow: hidden; background: var(--meter-track); border-radius: 4px; }
#p-ai .pt-hx-meter span { display: block; width: calc(var(--v, 0) * 1%); height: 100%; background: var(--teal); border-radius: inherit; }
#p-ai .pt-hx-lane { display: flex; align-items: center; gap: 8px; }
#p-ai .pt-hx-node { flex: none; padding: 4px 10px; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--ink-2); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-control); }
#p-ai .pt-hx-node--m { flex: 0 1 auto; font-weight: 600; color: var(--select-ink); background: var(--select-bg); border-color: var(--teal); }
#p-ai .pt-hx-wire { position: relative; flex: 1 1 24px; min-width: 24px; height: 1px; background: repeating-linear-gradient(90deg, var(--teal) 0 4px, transparent 4px 8px); }
#p-ai .pt-hx-wire i { position: absolute; top: -3px; left: calc(50% - 3.5px); width: 7px; height: 7px; background: var(--teal); border-radius: 50%; box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 18%, transparent); }
#p-ai .pt-hx-note { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--ink-3); }
#p-ai .pt-hx-ok { font-weight: 600; color: var(--ok-ink); }

/* Audit tail: time · event code · target · who and result. Phone: time and code on one line, the rest under them. */
#p-ai .pt-hx-log { margin: 0; padding: 0; list-style: none; }
#p-ai .pt-hx-log li {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 2px var(--s-3);
  padding-block: 8px;
  font-size: 13px;
  line-height: 1.45;
  border-top: 1px solid var(--hairline);
}
#p-ai .pt-hx-log li:first-child { border-top: 0; }
#p-ai .pt-hx-t { color: var(--ink-3); }
#p-ai .pt-hx-k { color: var(--teal-ink); }
#p-ai .pt-hx-tg { grid-column: 2; color: var(--ink); }
#p-ai .pt-hx-res { grid-column: 2; color: var(--ink-2); }
#p-ai .pt-hx-res .pt-mono { color: var(--ink); }
@media (min-width: 720px) {
  #p-ai .pt-hx-log li { grid-template-columns: 48px 132px minmax(0, 1fr) auto; align-items: baseline; }
  #p-ai :is(.pt-hx-tg, .pt-hx-res) { grid-column: auto; }
  #p-ai .pt-hx-res { text-align: right; }
}
@media (min-width: 960px) {
  #p-ai .pt-hx-body { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); padding: var(--s-4); gap: var(--s-4); }
  #p-ai .pt-hx-audit { grid-column: 1 / -1; }
}
@media (max-width: 559px) {
  #p-ai .pt-hx-site { display: none; }
  #p-ai .pt-hx-crumb { flex-basis: 100%; order: 3; margin-left: 34px; }
  #p-ai .pt-hx-crumb::before { content: none; }
  #p-ai .pt-hx-pane { padding: 12px 14px; }
  /* The model lane runs top to bottom, so neither box wraps; the dot sits still on the short wire. */
  #p-ai .pt-hx-lane { flex-direction: column; align-items: flex-start; gap: 4px; }
  #p-ai .pt-hx-wire { flex: none; width: 1px; height: 14px; min-width: 0; margin-left: 20px; background: repeating-linear-gradient(180deg, var(--teal) 0 3px, transparent 3px 6px); }
  #p-ai .pt-hx-lane .pt-hx-wire i { top: calc(50% - 3.5px); left: -3px; animation: none; }
}
/* Motion: the live dot breathes, the dot runs the model lane, a new audit row fades in, the meter grows. */
@media (prefers-reduced-motion: no-preference) {
  #p-ai .pt-hx-live i { animation: pt-hx-pulse 2.4s ease-in-out infinite; }
  #p-ai .pt-hx-wire i { animation: pt-hx-run 2.8s linear infinite; }
  #p-ai .pt-hx-log li.is-new { animation: pt-hx-in 900ms ease-out; }
  #p-ai .pt-hx-meter span { transition: width 600ms ease; }
}
@media (prefers-reduced-motion: reduce) {
  #p-ai :is(.pt-hx-track, .pt-hx-track::after) { transition: none; }
}
@keyframes pt-hx-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--teal) 0%, transparent); } }
@keyframes pt-hx-run { from { left: 0; opacity: 0; } 15%, 85% { opacity: 1; } to { left: calc(100% - 7px); opacity: 0; } }
@keyframes pt-hx-in { from { opacity: 0; transform: translateY(-6px); background: var(--select-bg); } 40% { opacity: 1; transform: none; } to { background: transparent; } }
/* /trust set this section's head 32px over its content from 1100 (its page rhythm, QA3-03); kept for the block. */
@media (min-width: 1100px) {
  #p-ai .pt-ai .section-head { margin-bottom: var(--s-6); }
}

/* 4 · Forced colors: boxes keep a solid edge, lit parts use system colors (from page-trust.css's block). ---- */
@media (forced-colors: active) {
  #p-ai .pt-ai-feat, #p-ai .pt-hx-panel, #p-ai .pt-hx-pane, #p-ai .pt-hx-track, #p-ai .pt-hx-node { border: 1px solid; }
  #p-ai .pt-hx-switch input:checked + .pt-hx-track, #p-ai .pt-hx-meter span, #p-ai .pt-hx-mode .is-on { forced-color-adjust: none; color: HighlightText; background: Highlight; }
  #p-ai .pt-hx-track::after { forced-color-adjust: none; background: CanvasText; }
  #p-ai .pt-hx-switch input:checked + .pt-hx-track::after { background: HighlightText; }
  #p-ai .pt-hx-live i, #p-ai .pt-hx-wire i { forced-color-adjust: none; background: Highlight; }
  #p-ai .pt-hx-wire { background: none; border-top: 1px dashed CanvasText; }
  #p-ai .ai-nn, #p-ai .ai-nn-replay { border: 1px solid; }
  #p-ai .ai-nn-e { stroke: GrayText; }
  #p-ai :is(.ai-nn-e.is-hot, .ai-nn-p, .ai-nn-n.is-lit, .ai-nn-halo) { stroke: Highlight; }
  #p-ai .ai-nn-n { fill: Canvas; stroke: CanvasText; }
  #p-ai .ai-nn-n.is-lit { fill: Highlight; }
  #p-ai :is(.ai-nn-k, .ai-nn-l, .ai-nn-o) { fill: CanvasText; }
}