/* Product frames: the application as it appears inside the site.
   Tokens, fonts and component style follow the AegisForge kit (apps/web/src/next/kit/tokens.css, dark theme).
   Everything inside is sized in em from a container-query font size, so a frame scales with its column. */

@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/hanken-grotesk-latin-wght.woff2") format("woff2-variations"), url("../fonts/hanken-grotesk-latin-wght.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-500.woff2") format("woff2"); }

.product-frame {
  /* app tokens (dark) */
  --frame: #0D1420; --canvas: #0F1724; --well: #0B111B; --sheet: #131D2C; --sheet-2: #172235; --hover: #152031;
  --ink: #E8ECF1; --ink-2: #A7B1BF; --ink-3: #8E99A8; --hair: #1F2A3A; --line: #6E7A8C;
  --ember: #E8703F; --ember-text: #F08A5D; --on-ember: #0A0F18;
  --st-bad-fg: #FF6457; --st-bad-bg: #3A1512; --st-warn-fg: #FFC53D; --st-warn-bg: #33260A; --st-good-fg: #7FD1A8; --st-good-bg: #0F2A20; --st-good-mark: #36A572;
  --st-info-fg: #93B9FF; --st-info-bg: #132443; --st-none-fg: #A7B1BF; --st-none-bg: #1B2534;
  --ev-ok-fg: #5ED1C6; --ev-ok-bg: #0E2A2B; --ev-un-fg: #A9BCD3; --ev-un-bg: #17212F;
  --aegis: #C8B8EE; --aegis-tint: #1E1B30; --aegis-rule: #4A4268; --aegis-solid: #BFAEE8; --aegis-on: #0F0B1E;
  --afont: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif; --amono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  container-type: inline-size;
  position: relative;
  background: var(--frame); color: var(--ink);
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px -24px rgba(15,26,43,.45), 0 0 0 1px rgba(15,26,43,.08);
  font-family: var(--afont); font-size: 13px; line-height: 1.35; text-align: left;
  color-scheme: dark;
}
.product-frame .app { font-size: clamp(9px, 1.65cqw, 13.5px); display: grid; grid-template-columns: 12.5em 1fr; grid-template-rows: 3.6em 1fr; min-height: 0; aspect-ratio: 16 / 10.2; }
.product-frame .app.no-rail { grid-template-columns: 1fr; }
.product-frame .label { position: absolute; right: 10px; bottom: 8px; font: 500 10px/1 var(--afont); letter-spacing: .02em; color: var(--ink-3); background: rgba(13,20,32,.7); padding: 4px 7px; border-radius: 3px; pointer-events: none; }

/* chrome */
.pf-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 1em; padding: 0 1.1em; background: var(--frame); border-bottom: 1px solid var(--hair); }
.pf-top .logo { display: flex; align-items: center; gap: .6em; font-weight: 700; letter-spacing: .06em; font-size: .95em; }
.pf-top .logo img { width: 1.6em; height: auto; }
.pf-top .logo small { display: block; font-weight: 400; letter-spacing: 0; color: var(--ink-2); font-size: .75em; margin-top: .1em; }
.pf-ctx { margin-left: .6em; display: flex; align-items: center; gap: .6em; border: 1px solid var(--line); border-radius: .5em; padding: .35em .8em; font-size: .85em; }
.pf-ctx .k { color: var(--ink-3); letter-spacing: .08em; font-size: .78em; text-transform: uppercase; font-family: var(--amono); }
.pf-ctx .v { font-family: var(--amono); color: var(--ink); }
.pf-ctx .pill { background: var(--st-info-bg); color: var(--st-info-fg); border-radius: .4em; padding: .15em .55em; font-size: .9em; }
.pf-you { margin-left: auto; font-size: .85em; color: var(--ink-2); display: flex; align-items: center; gap: .5em; }
.pf-you b { color: var(--ink); border: 1px solid var(--line); border-radius: .4em; padding: .15em .55em; font-weight: 500; }
.pf-av { width: 2.2em; height: 2.2em; border-radius: 50%; background: #5B4BC0; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: .8em; }
.pf-rail { background: var(--frame); border-right: 1px solid var(--hair); padding: 1.2em 0; }
.pf-rail .grp { font-family: var(--amono); font-size: .72em; letter-spacing: .12em; color: var(--ink-3); padding: 0 1.6em; margin: 1.2em 0 .8em; text-transform: uppercase; }
.pf-rail a { display: block; padding: .55em 1.6em; color: var(--ink-2); text-decoration: none; font-size: .95em; }
.pf-rail a.on { color: var(--ink); background: var(--hover); border-radius: .4em; margin: 0 .6em; padding-left: 1em; }
.pf-main { background: var(--canvas); padding: 1.4em 1.8em 2.4em; overflow: hidden; min-width: 0; }
.pf-id { font-family: var(--amono); color: var(--ink-2); font-size: .85em; }
.pf-h { font-size: 1.45em; font-weight: 600; letter-spacing: -.01em; margin: .25em 0 .35em; line-height: 1.2; }
.pf-sub { color: var(--ink-2); font-size: .95em; max-width: 58em; }
.pf-chips { display: flex; gap: .6em; margin: .9em 0; flex-wrap: wrap; }
.pf-chip { font-family: var(--amono); font-size: .72em; letter-spacing: .06em; text-transform: uppercase; border: 1px solid var(--line); padding: .3em .7em; color: var(--ink); clip-path: polygon(.6em 0, 100% 0, calc(100% - .6em) 100%, 0 100%); }
.pf-chip.demo { border-style: dashed; color: var(--ink-2); }
.pf-btn { display: inline-flex; align-items: center; gap: .5em; border-radius: .45em; padding: .55em 1em; font-weight: 600; font-size: .95em; border: 1px solid transparent; cursor: default; font-family: inherit; }
.pf-btn.ember { background: var(--ember); color: var(--on-ember); }
.pf-btn.ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.pf-btn.aegis { background: var(--aegis-solid); color: var(--aegis-on); }
.pf-pill { display: inline-flex; align-items: center; gap: .4em; border-radius: .5em; padding: .2em .6em; font-size: .85em; font-weight: 600; }
.pf-pill.good { background: var(--st-good-bg); color: var(--st-good-fg); }
.pf-pill.bad { background: var(--st-bad-bg); color: var(--st-bad-fg); }
.pf-pill.warn { background: var(--st-warn-bg); color: var(--st-warn-fg); }
.pf-pill.info { background: var(--st-info-bg); color: var(--st-info-fg); }
.pf-pill.none { background: var(--st-none-bg); color: var(--st-none-fg); }
.pf-pill.ok { background: var(--ev-ok-bg); color: var(--ev-ok-fg); }
.pf-pill.un { background: var(--ev-un-bg); color: var(--ev-un-fg); }
.pf-card { background: var(--sheet); border: 1px solid var(--hair); border-radius: .6em; padding: 1em 1.1em; }
.pf-card h4 { margin: 0 0 .5em; font-size: 1em; font-weight: 600; }
.pf-aegis { background: linear-gradient(100deg, var(--aegis-tint) 0%, color-mix(in srgb, var(--aegis-tint) 55%, var(--sheet)) 45%, var(--sheet) 100%); border: 1px solid var(--aegis-rule); border-radius: .6em; padding: 1em 1.1em; }
.pf-aegis .who { display: flex; align-items: center; gap: .5em; color: var(--aegis); font-weight: 600; font-size: .9em; margin-bottom: .6em; }
.pf-aegis .who i { width: .55em; height: .55em; border-radius: 50%; background: var(--aegis-solid); display: inline-block; }
.pf-aegis .who small { color: var(--ink-3); font-weight: 400; margin-left: auto; }
.pf-q { color: var(--ink); border-left: 2px solid var(--ev-ok-fg); padding-left: .8em; margin: .5em 0; font-style: italic; }
.pf-src { font-family: var(--amono); font-size: .8em; color: var(--ink-2); }
.pf-row { display: flex; gap: .6em; align-items: center; flex-wrap: wrap; }
.pf-kv { display: grid; grid-template-columns: auto 1fr; gap: .25em 1em; font-size: .9em; color: var(--ink-2); }
.pf-kv b { color: var(--ink); font-weight: 500; }
.pf-mono { font-family: var(--amono); }
.pf-cols { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1.2em; margin-top: 1em; align-items: start; }
.pf-s1 .pf-cols { grid-template-areas: "doc aegis" "rated aegis"; grid-template-rows: auto 1fr; }
.pf-s1 .pf-doc { grid-area: doc; } .pf-s1 .pf-aegis { grid-area: aegis; } .pf-s1 .rated { grid-area: rated; align-self: start; }
.pf-tabs { display: inline-flex; gap: .2em; background: var(--well); border-radius: .6em; padding: .3em; margin: .9em 0 1.1em; }
.pf-tabs span { padding: .4em .9em; border-radius: .45em; color: var(--ink-2); font-size: .92em; }
.pf-tabs span.on { background: var(--sheet-2); color: var(--ink); font-weight: 600; }
.pf-table { width: 100%; border-collapse: collapse; font-size: .9em; }
.pf-table th { text-align: left; color: var(--ink-3); font-weight: 500; font-size: .85em; padding: .5em .6em; border-bottom: 1px solid var(--hair); }
.pf-table td { padding: .6em .6em; border-bottom: 1px solid var(--hair); vertical-align: middle; }
.pf-table tr:last-child td { border-bottom: 0; }
.pf-bar { height: .55em; border-radius: .3em; background: var(--well); overflow: hidden; display: flex; }
.pf-bar i { display: block; height: 100%; }
.pf-doc { background: #F4F2EE; color: #1B2230; border-radius: .4em; padding: 1.1em 1.2em; font-family: Georgia, "Times New Roman", serif; font-size: .9em; line-height: 1.5; position: relative; }
.pf-doc .dh { font-family: var(--afont); color: #5A6578; font-size: .78em; margin-bottom: .6em; display: flex; justify-content: space-between; }
.pf-doc mark { background: transparent; color: inherit; border-radius: .2em; padding: 0 .1em; transition: background-color .4s var(--ease-out, ease); }
.pf-doc.is-lit mark { background: #FFE9A8; box-shadow: 0 0 0 .15em #FFE9A8; }
.pf-doc .pg { position: absolute; right: 1.1em; bottom: .6em; font-family: var(--afont); color: #5A6578; font-size: .72em; }

/* Front Door (screen 2) */
.pf-box { background: var(--sheet); border: 1px solid var(--aegis-rule); border-radius: .7em; padding: .9em 1.1em; display: flex; align-items: center; gap: .8em; }
.pf-box .typed { flex: 1; color: var(--ink); font-size: 1em; min-height: 1.3em; }
.pf-box .typed .caret { display: inline-block; width: 1px; height: 1.1em; background: var(--ink); vertical-align: -.2em; margin-left: 1px; animation: pfcaret 1s steps(1) infinite; }
@keyframes pfcaret { 50% { opacity: 0 } }
.pf-hot { display: flex; gap: .5em; margin-top: .7em; flex-wrap: wrap; }
.pf-hot span { border: 1px solid var(--line); border-radius: 2em; padding: .3em .8em; font-size: .85em; color: var(--ink-2); }
.pf-working { display: flex; align-items: center; gap: .6em; color: var(--aegis); font-size: .88em; margin: .9em 0 .6em; }
.pf-working i { display: inline-block; width: 1em; height: .55em; border-radius: .3em; background: linear-gradient(90deg, var(--aegis-tint), var(--aegis-solid), var(--aegis-tint)); background-size: 200% 100%; animation: pfshim 1.2s linear infinite; }
@keyframes pfshim { to { background-position: -200% 0 } }
.pf-live { display: flex; gap: 1.4em; align-items: center; border: 1px solid var(--hair); border-radius: .5em; padding: .5em .9em; background: var(--sheet); font-size: .88em; color: var(--ink-2); margin-bottom: 1em; }
.pf-live b { color: var(--ink); font-weight: 600; }
.pf-live .ts { margin-left: auto; font-family: var(--amono); font-size: .85em; color: var(--ink-3); }

/* Client upload (screen 3) */
.pf-drop { border: 1px dashed var(--line); border-radius: .6em; padding: 1em 1.1em; display: grid; gap: .7em; background: var(--well); }
.pf-file { display: grid; grid-template-columns: auto 1fr auto; gap: .8em; align-items: center; }
.pf-file .ic { width: 2.2em; height: 2.6em; border-radius: .25em; background: #E8ECF1; color: #0E1726; display: grid; place-items: center; font: 600 .6em/1 var(--amono); }
.pf-file .nm { font-weight: 500; }
.pf-file .sz { color: var(--ink-3); font-size: .85em; }
.pf-checks { display: grid; gap: .45em; font-size: .9em; }
.pf-checks div { display: flex; align-items: center; gap: .6em; color: var(--ink-2); }
.pf-checks div b { color: var(--ink); font-weight: 500; }
.pf-ok { width: 1em; height: 1em; border-radius: 50%; background: var(--st-good-mark); display: inline-grid; place-items: center; color: #04201E; font-size: .7em; font-weight: 700; }
.pf-cui { border: 1px solid var(--ember); border-radius: .6em; padding: .9em 1.1em; background: color-mix(in srgb, var(--ember) 8%, var(--sheet)); }
.pf-cui .q { font-weight: 600; margin-bottom: .5em; }
.pf-radio { display: flex; gap: 1.4em; font-size: .92em; color: var(--ink-2); }
.pf-radio span { display: inline-flex; align-items: center; gap: .45em; }
.pf-radio i { width: .95em; height: .95em; border-radius: 50%; border: 1.5px solid var(--line); display: inline-block; position: relative; }
.pf-radio span.on { color: var(--ink); }
.pf-radio span.on i { border-color: var(--ember); }
.pf-radio span.on i::after { content: ""; position: absolute; inset: .18em; border-radius: 50%; background: var(--ember); }
.pf-cui .by { color: var(--ink-3); font-size: .82em; margin-top: .5em; }

/* Package (screen 4) */
.pf-stat { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .8em; margin: 1em 0; }
.pf-stat > div { background: var(--sheet); border: 1px solid var(--hair); border-radius: .6em; padding: .8em 1em; }
.pf-stat .n { font-size: 1.7em; font-weight: 600; letter-spacing: -.02em; }
.pf-stat .l { color: var(--ink-2); font-size: .85em; }
.pf-crumb { display: flex; gap: .5em; align-items: center; font-family: var(--amono); font-size: .82em; color: var(--ink-2); flex-wrap: wrap; }
.pf-crumb b { color: var(--ink); font-weight: 500; }
.pf-crumb i { color: var(--ink-3); font-style: normal; }
.pf-decide { display: flex; gap: .6em; flex-wrap: wrap; margin-top: 1em; }

/* status pill flips at the final beat */
.pf-s1 .st-after { display: none; }
.pf-s1[data-beat="4"] .st-before { display: none; }
.pf-s1[data-beat="4"] .st-after { display: inline-flex; }

/* hero animation beats (screen 1): each part grows into place as Aegis works; nothing is shown before it exists */
.pf-s1 .pf-aegis .found, .pf-s1 .pf-aegis .prop, .pf-s1 .pf-aegis .acts, .pf-s1 .rated {
  opacity: 0; max-height: 0; overflow: hidden; margin-top: 0 !important;
  transition: opacity .45s var(--ease-out, ease), max-height .5s var(--ease-inout, ease), margin-top .5s var(--ease-inout, ease);
}
.pf-s1 .pf-aegis .reading { display: flex; align-items: center; gap: .6em; color: var(--ink-2); font-size: .9em; }
.pf-s1 .pf-aegis .reading i { display: inline-block; width: 7em; height: .55em; border-radius: .3em; background: linear-gradient(90deg, var(--aegis-tint), var(--aegis-solid), var(--aegis-tint)); background-size: 200% 100%; animation: pfshim 1.2s linear infinite; }
.pf-s1[data-beat="2"] .pf-aegis .reading, .pf-s1[data-beat="3"] .pf-aegis .reading, .pf-s1[data-beat="4"] .pf-aegis .reading { display: none; }
.pf-s1[data-beat="2"] .pf-aegis .found, .pf-s1[data-beat="3"] .pf-aegis .found, .pf-s1[data-beat="4"] .pf-aegis .found { opacity: 1; max-height: 20em; }
.pf-s1[data-beat="3"] .pf-aegis .prop, .pf-s1[data-beat="4"] .pf-aegis .prop { opacity: 1; max-height: 20em; margin-top: .9em !important; }
.pf-s1[data-beat="3"] .pf-aegis .acts { opacity: 1; max-height: 6em; margin-top: .9em !important; }
.pf-s1[data-beat="4"] .pf-aegis .acts { opacity: .4; max-height: 6em; margin-top: .9em !important; }
.pf-s1[data-beat="4"] .pf-aegis .acts .pf-btn.aegis { outline: 2px solid var(--aegis-solid); outline-offset: 2px; }
.pf-s1[data-beat="4"] .rated { opacity: 1; max-height: 6em; margin-top: .9em !important; }
.pf-s1 .rated { display: flex; align-items: center; gap: .7em; font-size: .9em; color: var(--ink-2); flex-wrap: wrap; }
.pf-s1 .rated .pf-mono { color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
  .pf-doc mark, .pf-s1 .pf-aegis .found, .pf-s1 .pf-aegis .prop, .pf-s1 .pf-aegis .acts, .pf-s1 .rated { transition: none; }
  .pf-working i, .pf-s1 .pf-aegis .reading i, .pf-box .typed .caret { animation: none; }
}

/* ---- narrow containers (phones): no rail, no context pill, stacked columns, natural height ---- */
@container (max-width: 640px) {
  .product-frame .app, .product-frame.pf-role .app, .product-frame.pf-seq .app, .product-frame.pf-s1 .app, .product-frame.pf-s2 .app, .product-frame.pf-s3 .app, .product-frame.pf-s4 .app { grid-template-columns: 1fr; aspect-ratio: auto; font-size: clamp(10.5px, 3cqw, 13px); }
  .product-frame .pf-rail, .product-frame .pf-ctx { display: none; }
  .product-frame .pf-top { gap: .6em; height: 3.4em; }
  .product-frame .pf-main { padding: 1.1em 1.1em 3.2em; }
  .product-frame .pf-cols { grid-template-columns: 1fr !important; }
  .pf-s1 .pf-cols { grid-template-areas: "doc" "aegis" "rated"; grid-template-rows: auto; }
  .product-frame .pf-stat { grid-template-columns: 1fr 1fr; }
  .product-frame .pf-live { flex-wrap: wrap; gap: .6em 1em; }
  .product-frame .pf-live .ts { margin-left: 0; width: 100%; }
  .product-frame .pf-table th:nth-child(4), .product-frame .pf-table td:nth-child(4), .product-frame .pf-table th:nth-child(5), .product-frame .pf-table td:nth-child(5) { display: none; }
  .product-frame .pf-hot { display: none; }
  .product-frame .pf-extra { display: none; }
}

/* ---------- mini frames (lifecycle stages): natural height, no rail ---------- */
.product-frame.mini .app { aspect-ratio: auto; grid-template-rows: 3.4em auto; font-size: clamp(10px, 1.9cqw, 13px); }
.product-frame.mini .pf-main { padding: 1.2em 1.4em 2.6em; }
.product-frame.mini .pf-h { font-size: 1.3em; }
.product-frame.mini .pf-table td { padding: .55em .6em; }
.product-frame.mini .pf-table td:first-child { color: var(--ink-3); width: 7em; }
.product-frame.mini .pf-kv { row-gap: .5em; }
.product-frame.mini .pf-kv .pf-bar { width: 100%; }

/* ---------- Front Door frame ---------- */
.pf-fd .app { aspect-ratio: auto; grid-template-rows: 3.6em auto; }
.pf-fd .pf-main { padding-bottom: 2.8em; }
.pf-fd .pf-box .typed { min-height: 1.3em; }
.fd-chips { display: flex; gap: .5em; margin-top: .7em; flex-wrap: wrap; }
.fd-chip { border: 1px solid var(--line); background: transparent; color: var(--ink-2); border-radius: 2em; padding: .35em .9em; font: inherit; font-size: .85em; cursor: pointer; transition: border-color .15s, color .15s, background-color .15s; }
.fd-chip:hover { border-color: var(--ink); color: var(--ink); }
.fd-chip.is-on { background: var(--aegis-tint); border-color: var(--aegis-rule); color: var(--aegis); }
.fd-chip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.pf-fd .pf-working { margin: 1em 0 .8em; min-height: 1.2em; }
.fd-view[hidden] { display: none; }
.fd-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: .9em; }
.fd-grid .p1 { grid-row: 1 / span 2; }
.fd-grid-b { grid-template-columns: 1fr 1fr; }
.fd-grid-b .p1 { grid-row: auto; grid-column: 1 / -1; }
.fd-grid-c { grid-template-columns: 1fr 1fr; }
.fd-grid-c .p1 { grid-row: auto; grid-column: 1 / -1; }
.fd-panel { opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ease-out, ease), transform .45s var(--ease-out, ease); }
.pf-fd.is-built .fd-panel { opacity: 1; transform: none; }
.pf-fd.is-built .p1 { transition-delay: .1s } .pf-fd.is-built .p2 { transition-delay: .4s } .pf-fd.is-built .p3 { transition-delay: .7s }
.pf-fd .step { opacity: 0; transition: opacity .4s var(--ease-out, ease); }
.pf-fd.is-built .step { opacity: 1; }
.pf-fd.is-built .fd-next { transition-delay: 1.1s; }
.pf-fd .pf-live.step { opacity: 1; }
.fd-bars { display: grid; gap: .5em; font-size: .88em; }
.fd-bars > div { display: grid; grid-template-columns: 2.4em 1fr; align-items: center; gap: .6em; color: var(--ink-2); }
.fd-bars .pf-bar i { transform-origin: left; transform: scaleX(0); transition: transform .6s var(--ease-inout, ease) .5s; }
.pf-fd.is-built .fd-bars .pf-bar i { transform: none; }
.fd-qs { margin: 0; padding-left: 1.2em; font-size: .92em; color: var(--ink); display: grid; gap: .35em; }
.fd-next { display: flex; align-items: center; gap: .5em; margin-top: 1em; flex-wrap: wrap; }
.pf-key { font-family: var(--amono); font-size: .75em; border: 1px solid var(--line); border-radius: .3em; padding: .1em .45em; color: var(--ink-2); }
@container (max-width: 640px) {
  .fd-grid, .fd-grid-b, .fd-grid-c { grid-template-columns: 1fr; }
  .fd-grid .p1 { grid-row: auto; }
  .pf-fd .pf-table td:nth-child(2) { display: none; }
}

/* ---------- role frames ---------- */
.pf-role .app { aspect-ratio: 16 / 10.6; }
.pf-steps { display: flex; gap: .4em; margin: .8em 0 1em; font-size: .82em; flex-wrap: wrap; }
.pf-steps span { padding: .3em .7em; border-radius: .4em; background: var(--well); color: var(--ink-3); }
.pf-steps span.done { color: var(--st-good-fg); background: var(--st-good-bg); }
.pf-steps span.now { color: var(--ink); background: var(--sheet-2); font-weight: 600; }
.pf-table tr.sel td { background: var(--sel); }

/* ---------- Pathfinder frame ---------- */
.pf-path .app { aspect-ratio: auto; grid-template-rows: 3.6em auto; }
.pf-path .pf-main { padding-bottom: 3em; position: relative; }
.pf-path .pfd-collect { display: none; position: absolute; left: 1.8em; right: 1.8em; top: 5.2em; }
.pf-path.is-collect .pfd-scope { visibility: hidden; }
.pf-path.is-collect .pfd-collect { display: block; }
.pf-path.is-collect .pf-tab-scope { background: transparent; color: var(--ink-2); font-weight: 400; }
.pf-path.is-collect .pf-tab-collect { background: var(--sheet-2); color: var(--ink); font-weight: 600; }
.pfd-q { color: var(--ink); font-weight: 500; margin: .4em 0; }
.pfd-a { color: var(--ink-2); margin: .3em 0 .9em; padding-left: .8em; border-left: 2px solid var(--line); }
.pfd-items { display: grid; gap: .45em; }
.pfd-item { display: grid; grid-template-columns: 7.5em 1fr auto; grid-template-areas: "id what act" "id src act"; column-gap: .8em; row-gap: .15em; align-items: center; background: var(--well); border: 1px solid var(--hair); border-radius: .5em; padding: .55em .8em; font-size: .92em; }
.pfd-item > :nth-child(1) { grid-area: id; color: var(--ink-2); }
.pfd-item > :nth-child(2) { grid-area: what; color: var(--ink); }
.pfd-item > :nth-child(2) b { font-weight: 600; }
.pfd-item > .pf-src { grid-area: src; }
.pfd-item > .pfd-act { grid-area: act; align-self: center; border-radius: .4em; padding: .3em .7em; font-weight: 600; font-size: .9em; border: 1px solid transparent; }
.pfd-act.kept { background: var(--st-good-bg); color: var(--st-good-fg); }
.pfd-act.ask { background: var(--st-warn-bg); color: var(--st-warn-fg); }
.pfd-act.cap { background: var(--ev-ok-bg); color: var(--ev-ok-fg); }
.pfd-act.go { background: var(--ember); color: var(--on-ember); }
.pfd-act.pass { border-color: var(--line); color: var(--ink-2); }
.pfd-item.unknown { border-style: dashed; }
.pfd-confirm { display: flex; gap: .8em; align-items: center; flex-wrap: wrap; margin-top: .9em; font-size: .9em; }
.pfd-confirm .pf-mono { color: var(--ink-2); font-size: .85em; }
/* beats */
.pf-path .pfd-q, .pf-path .pfd-a, .pf-path .pfd-item, .pf-path .pfd-confirm { opacity: 0; transform: translateY(4px); transition: opacity .4s var(--ease-out, ease), transform .4s var(--ease-out, ease); }
.pf-path .show { opacity: 1 !important; transform: none !important; }
.pf-path .pfd-item .pfd-act.kept, .pf-path .pfd-item .pfd-act.cap { opacity: 0; transition: opacity .3s .5s; }
.pf-path .pfd-item.show .pfd-act.kept, .pf-path .pfd-item.show .pfd-act.cap { opacity: 1; }
.pfd-ctrl { position: absolute; left: 10px; bottom: 8px; display: flex; gap: 6px; }
.pfd-ctrl button { background: rgba(13,20,32,.7); color: var(--ink-2); border: 1px solid var(--line); border-radius: 4px; padding: 4px 8px; font: 500 11px/1 var(--afont); cursor: pointer; }
.pfd-ctrl button:hover { color: var(--ink); border-color: var(--ink); }
.pfd-ctrl button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@container (max-width: 640px) {
  .pfd-item { grid-template-columns: 1fr auto; grid-template-areas: "id act" "what act" "src act"; }
  .pf-path .pfd-collect { left: 1.1em; right: 1.1em; top: 4.8em; }
}

/* ---------- micro frames (capability cards) ---------- */
.product-frame.micro { min-height: 75cqw; display: flex; flex-direction: column; justify-content: center; gap: .7em; padding: 1em 1.1em; font-size: clamp(10.5px, 4.2cqw, 14px); border-radius: 6px; box-shadow: none; border: 1px solid var(--hair); overflow: hidden; }
.product-frame.micro .pf-doc { font-size: .95em; padding: .8em .9em; }
.product-frame.micro .pf-doc mark { background: transparent; box-shadow: none; }
.cap:hover .product-frame.micro .pf-doc mark, .cap.is-open .product-frame.micro .pf-doc mark, .cap:focus-visible .product-frame.micro .pf-doc mark { background: #FFE9A8; box-shadow: 0 0 0 .15em #FFE9A8; }
.product-frame.micro .hov tr { opacity: 1; }
.product-frame.micro .hov tr td { transition: transform .35s var(--ease-out, ease); } .cap:hover .product-frame.micro .hov tr td:first-child, .cap.is-open .product-frame.micro .hov tr td:first-child { transform: translateX(.3em); }
.cap:hover .product-frame.micro .hov tr:nth-child(2), .cap.is-open .product-frame.micro .hov tr:nth-child(2) { transition-delay: .15s }
.cap:hover .product-frame.micro .hov tr:nth-child(3), .cap.is-open .product-frame.micro .hov tr:nth-child(3) { transition-delay: .3s }
.product-frame.micro .pf-live { margin: 0; }
.product-frame.micro .pf-working { margin: .4em 0; }
.pfd-route { display: grid; grid-template-columns: 1fr auto 1fr; gap: .6em; align-items: center; font-size: .85em; }
.pfd-route .pf-mono { font-size: .8em; text-align: center; }
@container (max-width: 400px) { .pfd-route { grid-template-columns: 1fr; } }

/* ---------- Pathfinder boundary diagram ---------- */
.pfd-diagram { width: 100%; height: auto; display: block; font-family: var(--afont); }
.pfd-diagram .boundary { fill: color-mix(in srgb, var(--aegis-tint) 40%, transparent); stroke: var(--aegis-solid); stroke-width: 1.2; stroke-dasharray: 5 4; }
.pfd-diagram .dl { font-size: 9px; fill: var(--ink); font-weight: 600; }
.pfd-diagram .ds { font-size: 7.5px; fill: var(--ink-2); }
.pfd-diagram .dh { font-size: 8px; fill: var(--st-good-fg); font-family: var(--amono); }
.pfd-diagram .node rect { fill: var(--sheet-2); stroke: var(--line); stroke-width: 1; }
.pfd-diagram .node.prov rect { stroke-dasharray: 3 2; fill: var(--well); }
.pfd-diagram .node.oos rect { fill: var(--well); stroke: var(--hair); }
.pfd-diagram .node.oos .dl, .pfd-diagram .node.oos .ds { fill: var(--ink-3); }
.pfd-diagram .node.unk rect { stroke-dasharray: 2 2; stroke: var(--st-warn-mark); fill: var(--st-warn-bg); }
.pfd-diagram .node.unk .dl { fill: var(--st-warn-fg); }
.pfd-diagram .inherit { stroke: var(--aegis-solid); stroke-width: 1.2; stroke-dasharray: 3 2; fill: none; }
.pf-path .pfd-diagram .bnd, .pf-path .pfd-diagram .node, .pf-path .pfd-diagram .conf { opacity: 0; transform: scale(.96); transform-origin: center; transform-box: fill-box; transition: opacity .5s var(--ease-out, ease), transform .5s var(--ease-out, ease); }
.pf-path:has(.conf.show) .pfd-diagram .boundary { stroke-dasharray: none; stroke: var(--st-good-mark); transition: stroke .4s; }

/* ---------- film player ---------- */
.pf-film .app { aspect-ratio: auto; grid-template-rows: 3.4em auto; font-size: clamp(11px, 1.22cqw, 16px); }
.pf-film .pf-main { padding: 1.2em 1.6em 2.6em; position: relative; min-height: 27em; }
.pf-film .scene[data-scene="1"] { font-size: 1.18em; }
.pf-film .scene[data-scene="1"] .pf-doc { font-size: 1.05em; line-height: 1.6; }
.pf-film .scene { display: none; }
.pf-film .scene.is-active { display: block; }
.pf-film .step { opacity: 0; transform: translateY(4px); transition: opacity .4s var(--ease-out, ease), transform .4s var(--ease-out, ease); }
.pf-film .step.show { opacity: 1; transform: none; }
.pf-film .pf-doc mark { background: transparent; box-shadow: none; transition: background-color .5s var(--ease-out, ease), box-shadow .5s; opacity: 1; transform: none; }
.pf-film .pf-doc mark.show { background: #FFE9A8; box-shadow: 0 0 0 .15em #FFE9A8; }
.pf-film .pf-doc.step { opacity: 0; } .pf-film .pf-doc.step.show { opacity: 1; }
.pf-film .reading { display: flex; align-items: center; gap: .6em; color: var(--ink-2); font-size: .9em; margin-bottom: .6em; }
.pf-film .reading .shim { display: inline-block; width: 7em; height: .55em; border-radius: .3em; background: linear-gradient(90deg, var(--aegis-tint), var(--aegis-solid), var(--aegis-tint)); background-size: 200% 100%; animation: pfshim 1.2s linear infinite; }
.pf-film .scene[data-scene="1"] .reading.done { display: none; }
.pf-film td:has(.pf-pill.step.show) .swap-off, .pf-film td:has(.pf-pill.step.show) .swap-off2, .pf-film td:has(.pf-pill.step.show) .swap-off3 { display: none; }
.pf-film .typed-line { min-height: 1.3em; }
.pf-film .typed-line::after { content: ""; display: inline-block; width: 1px; height: 1em; background: var(--ink); vertical-align: -.15em; margin-left: 1px; animation: pfcaret 1s steps(1) infinite; }
.pf-film .typed-line.done::after { display: none; }
.pf-log { display: grid; gap: .45em; font-size: .9em; }
.pf-log > div { display: grid; grid-template-columns: 6.5em 1fr; gap: .8em; color: var(--ink-2); }
.pf-log > div .pf-mono { color: var(--ink-3); font-size: .85em; padding-top: .15em; }
.pf-log > div span:last-child { color: var(--ink); }
.film-end { margin-top: 1.2em; text-align: center; font-size: 1.25em; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.film-cover { position: absolute; inset: 0; border: 0; background: linear-gradient(180deg, rgba(13,20,32,.35), rgba(13,20,32,.72)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1em; cursor: pointer; color: #E8ECF1; font-family: var(--afont); }
.film-cover .play { width: 5.5em; height: 5.5em; border-radius: 50%; background: var(--ember); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(0,0,0,.35); transition: transform .2s var(--ease-out, ease); }
.film-cover:hover .play { transform: scale(1.05); }
.film-cover .play svg { width: 2.4em; height: 2.4em; fill: #0A0F18; margin-left: .2em; }
.film-cover .t { text-align: center; }
.film-cover .t b { display: block; font-size: 1.25em; font-weight: 600; }
.film-cover .t small { display: block; color: #A7B1BF; font-size: .85em; margin-top: .25em; }
.film-cover:focus-visible { outline: 2px solid #E8ECF1; outline-offset: -4px; }
.film[data-state="playing"] .film-cover, .film[data-state="paused"] .film-cover { display: none; }
.film-cover .t .again { display: none; }
/* when the film ends, the closing card stays on screen; the cover shrinks to a "Watch again" button */
.film[data-state="ended"] .film-cover { inset: 62px 12px auto auto; background: rgba(13,20,32,.9); border: 1px solid #6E7A8C; border-radius: 999px; padding: .4em 1.1em .4em .45em; flex-direction: row; gap: .6em; color: #E8ECF1; }
.film[data-state="ended"] .film-cover .play { width: 2.1em; height: 2.1em; box-shadow: none; } .film[data-state="ended"] .film-cover .play svg { width: 1em; height: 1em; margin-left: .1em; }
.film[data-state="ended"] .film-cover .t .first, .film[data-state="ended"] .film-cover .t small { display: none; }
.film[data-state="ended"] .film-cover .t .again { display: block; font-size: 1em; }
.film[data-state="ended"] .film-cover:focus-visible { outline-offset: 3px; }
/* the closing chapter */
.film-close { display: grid; justify-items: center; text-align: center; gap: .7em; padding: 1.6em 2em 0; }
.film-close .fc-mark { width: 3.4em; height: 3.4em; border-radius: 50%; background: var(--st-good-bg); border: 1px solid #2F7D5B; display: grid; place-items: center; }
.film-close .fc-mark svg { width: 1.8em; height: 1.8em; fill: none; stroke: var(--st-good-fg); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.film-close h4 { margin: .1em 0 0; font-size: 2.1em; font-weight: 600; letter-spacing: -.02em; }
.film-close .fc-sub { margin: 0; color: var(--ink-2); font-size: .98em; }
.film-close .fc-docs { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .6em 1.3em; margin-top: .3em; font-size: 1em; }
.film-close .fc-docs span { display: inline-flex; align-items: center; gap: .45em; }
.film-close .fc-docs i { font-style: normal; font-family: var(--amono); font-size: .68em; font-weight: 600; border: 1px solid; border-radius: .25em; padding: 0 .35em; color: #F08A5D; line-height: 1.5; } .film-close .fc-docs i.x { color: #7FD1A8; }
.film-close .pf-stat { width: min(100%, 60em); margin: .6em 0 0; text-align: left; }
.film-close .film-end { margin-top: .9em; }
@container (max-width: 760px) {
  .film-close { gap: .5em; padding: .9em .4em 0; }
  .film-close .fc-mark { width: 2.4em; height: 2.4em; } .film-close .fc-mark svg { width: 1.3em; height: 1.3em; }
  .film-close h4 { font-size: 1.55em; }
  .film-close .fc-sub { display: none; }
  .film[data-state="ended"] .film-cover { inset: 48px 10px auto auto; padding: 3px; }
  .film[data-state="ended"] .film-cover .t { display: none; }
  .film[data-state="ended"] .film-cover .play { width: 38px; height: 38px; }
  .film-close .fc-docs { gap: .3em .9em; font-size: .92em; margin-top: 0; }
  .film-close .pf-stat { gap: .45em; margin-top: .3em; } .film-close .pf-stat > div { padding: .45em .7em; } .film-close .pf-stat .n { font-size: 1.25em; }
  .film-close .film-end { font-size: 1.05em; margin-top: .45em; }
}

/* ---------- moments and sequence frames ---------- */
.pf-m1 .app, .pf-m2 .app { aspect-ratio: auto; grid-template-rows: 3.4em auto; font-size: clamp(11px, 1.3cqw, 15.5px); }
.pf-m1 .pf-main, .pf-m2 .pf-main { padding: 1.3em 1.6em 2.6em; min-height: 26em; }
.pf-m2 .m2-cols { grid-template-columns: 1.1fr .9fr; margin-top: 1.1em; }
.pf-m2 .pf-doc { font-size: 1.02em; line-height: 1.6; }
.pf-m2 .pf-doc p + p { margin-top: .6em; }
.pf-trail { display: flex; flex-wrap: wrap; gap: .8em; align-items: center; margin-top: 1.1em; padding-top: .9em; border-top: 1px solid var(--hair); font-size: .92em; color: var(--ink-2); }
.pf-trail .pf-mono { color: var(--ink-3); font-size: .85em; }
.pf-event { display: flex; gap: .8em; align-items: center; margin-top: 1em; padding: .7em .9em; border-radius: .5em; background: var(--sheet); border: 1px solid var(--hair); border-left: 3px solid var(--ember); font-size: .92em; color: var(--ink-2); }
.pf-event b { color: var(--ink); }
.pf-seq .app { aspect-ratio: 16 / 10; font-size: clamp(11px, 1.45cqw, 15.5px); }
/* generic beats: anything with .beats uses data-t steps */
.beats .step { opacity: 0; transform: translateY(4px); transition: opacity .4s var(--ease-out, ease), transform .4s var(--ease-out, ease); }
.beats .step.show { opacity: 1; transform: none; }
.beats .pf-doc mark { background: transparent; box-shadow: none; opacity: 1; transform: none; transition: background-color .5s, box-shadow .5s; }
.beats .pf-doc mark.show { background: #FFE9A8; box-shadow: 0 0 0 .15em #FFE9A8; }
.beats .swap { display: inline-flex; } .beats .step.show ~ .swap { display: none; }
.beats td:has(> .step.show) > .swap, .beats .pf-row:has(> .step.show) > .swap, .beats .pf-row:has(> .step.show) > .swap2 { display: none; }
.beats .reading { display: flex; align-items: center; gap: .6em; color: var(--ink-2); font-size: .9em; margin-bottom: .6em; }
.beats .reading .shim { display: inline-block; width: 7em; height: .55em; border-radius: .3em; background: linear-gradient(90deg, var(--aegis-tint), var(--aegis-solid), var(--aegis-tint)); background-size: 200% 100%; animation: pfshim 1.2s linear infinite; }
.beats .reading.done { display: none; }
.beats .typed-line::after { content: ""; display: inline-block; width: 1px; height: 1em; background: var(--ink); vertical-align: -.15em; margin-left: 1px; animation: pfcaret 1s steps(1) infinite; }
.beats .typed-line.done::after, .beats .typed-line.idle::after { display: none; }
@container (max-width: 640px) {
  .pf-m2 .m2-cols { grid-template-columns: 1fr; }
  .pf-m1 .pf-main, .pf-m2 .pf-main { min-height: 0; }
}

/* hero window: larger type inside */
.hero-stage .product-frame .app { font-size: clamp(10px, 1.7cqw, 15px); }

/* ---------- capability tiles: six loops. They run while the grid is on screen; hover opens the text. ---------- */
.product-frame.micro { transition: border-color .25s, box-shadow .25s; }
.cap:hover .product-frame.micro, .cap.is-open .product-frame.micro, .cap:focus-visible .product-frame.micro { border-color: #3A475C; box-shadow: 0 0 0 1px rgba(200,184,238,.12), 0 0 40px -16px rgba(200,184,238,.35); }
.cap-grid .micro * { animation-play-state: paused !important; animation-fill-mode: both !important; }
.cap-grid.is-in .micro * { animation-play-state: running !important; }

/* 1 · evidence stays where it lives: a read travels to the file and back; the record gains a fingerprint */
.m-home .home { display: grid; grid-template-columns: 1.1fr auto 1fr; gap: .5em; align-items: start; font-size: .8em; }
.m-home .home-col { display: flex; flex-direction: column; gap: .5em; min-width: 0; }
.m-home .home-files { display: flex; flex-direction: column; gap: .3em; }
.m-home .hf { display: flex; align-items: center; gap: .45em; padding: .4em .5em; border: 1px solid var(--hair); border-radius: .35em; background: var(--sheet); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .9em; }
.m-home .hf i { flex: none; width: .7em; height: .9em; border: 1px solid var(--ink-3); border-radius: .1em; }
.m-home .hf.is-read { animation: hf-read 4.5s infinite; }
@keyframes hf-read { 0%, 30% { border-color: var(--hair); background: var(--sheet); } 42%, 62% { border-color: var(--ev-ok-fg); background: var(--ev-ok-bg); } 75%, 100% { border-color: var(--hair); background: var(--sheet); } }
.m-home .lock { font-size: .78em; align-self: flex-start; }
.m-home .home-link { position: relative; width: 5.2em; align-self: center; margin-top: 3.6em; display: grid; justify-items: center; gap: .4em; }
.m-home .home-link .line { width: 100%; border-top: 1px dashed var(--line); }
.m-home .home-link .pf-mono { font-size: .68em; color: var(--ink-3); text-align: center; white-space: nowrap; }
.m-home .home-link .pulse { position: absolute; top: -.25em; left: 100%; width: .55em; height: .55em; border-radius: 50%; background: var(--ev-ok-fg); opacity: 0; animation: read-pulse 4.5s infinite; }
@keyframes read-pulse { 0% { left: 95%; opacity: 0 } 8% { opacity: 1 } 38% { left: 2%; opacity: 1 } 48% { left: 2%; opacity: 1 } 72% { left: 95%; opacity: 1 } 80%, 100% { left: 95%; opacity: 0 } }
.m-home .hrec { padding: .6em .7em; display: grid; gap: .2em; font-size: .9em; overflow-wrap: anywhere; }
.m-home .hrec .hname { font-weight: 600; color: var(--ink); }
.m-home .hrec .hash, .m-home .hrec .stamp { animation: hash-in 4.5s infinite; }
@keyframes hash-in { 0%, 68% { opacity: .3 } 78%, 100% { opacity: 1 } }
.m-home .hrec .hash { color: var(--ev-ok-fg); }

@container (max-width: 400px) { .m-home .home { grid-template-columns: 1fr; } .m-home .home-link { width: 100%; margin: 0; } .m-home .home-link .pulse { top: -.25em; } }
/* 2 · a zip drops, rows file themselves */
.m-zip .zip-drop { position: relative; border: 1px dashed var(--line); border-radius: .5em; padding: .55em .8em; display: flex; align-items: center; gap: .8em; min-height: 2.6em; animation: drop-flash 5s infinite; }
@keyframes drop-flash { 0%, 10% { border-color: var(--line); background: transparent } 16%, 22% { border-color: var(--ember); background: rgba(232,112,63,.08) } 30%, 100% { border-color: var(--line); background: transparent } }
.m-zip .zip-chip { display: inline-flex; align-items: center; gap: .5em; background: var(--sheet-2); border: 1px solid var(--line); border-radius: .4em; padding: .3em .6em; font-weight: 600; font-size: .9em; animation: zip-drop 5s var(--ease-out, ease) infinite; }
.m-zip .zip-chip i { width: .8em; height: 1em; border: 1px solid var(--ink-2); border-radius: .15em; background: repeating-linear-gradient(180deg, var(--ink-2) 0 .1em, transparent .1em .25em) center / .25em 70% no-repeat; }
@keyframes zip-drop { 0% { transform: translateY(-2.2em); opacity: 0 } 12% { transform: none; opacity: 1 } 92% { opacity: 1 } 100% { opacity: 0 } }
.m-zip .zip-rows { font-size: .9em; }
.m-zip .zip-rows td { padding: .35em .5em; }
.m-zip .zip-rows td.n { color: var(--ink-2); font-size: .92em; white-space: nowrap; } .m-zip .zip-rows td.st { text-align: right; } .m-zip .zip-rows td.st .pf-pill { font-size: .78em; } .m-zip .zip-rows td.pf-mono { font-size: .85em; white-space: nowrap; }
.m-zip .zip-rows tr { opacity: 0; animation: rowin-hold 5s infinite; }
.m-zip .zip-rows tr:nth-child(1) { animation-delay: 0s } .m-zip .zip-rows tr:nth-child(2) { animation-delay: .25s } .m-zip .zip-rows tr:nth-child(3) { animation-delay: .5s } .m-zip .zip-rows tr:nth-child(4) { animation-delay: .75s }
@keyframes rowin-hold { 0%, 26% { opacity: 0; transform: translateX(-.5em) } 34%, 92% { opacity: 1; transform: none } 100% { opacity: 0 } }
.m-zip .zip-foot { font-size: .85em; opacity: 0; animation: late-in 5s infinite; } .m-zip .zip-btn { padding: .4em .8em; font-size: .9em; }
@keyframes late-in { 0%, 56% { opacity: 0; transform: translateY(.3em) } 64%, 92% { opacity: 1; transform: none } 100% { opacity: 0 } }

/* 3 · the framework is chosen at setup: the selector moves, the counts follow */
.m-fw .fw-seg { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); background: var(--well); border: 1px solid var(--hair); border-radius: .5em; padding: .25em; font-size: .85em; }
.m-fw .fw-seg b { position: relative; z-index: 1; text-align: center; padding: .45em .3em; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.m-fw .fw-seg .thumb { position: absolute; top: .25em; bottom: .25em; left: .25em; width: calc((100% - .5em) / 3); background: var(--sheet-2); border: 1px solid var(--line); border-radius: .35em; animation: fw-thumb 7.5s var(--ease-inout, ease) infinite; }
@keyframes fw-thumb { 0%, 28% { transform: translateX(0) } 33%, 61% { transform: translateX(100%) } 66%, 94% { transform: translateX(200%) } 100% { transform: translateX(0) } }
.m-fw .fw-stats { position: relative; min-height: 4.6em; }
.m-fw .fw-stat { position: absolute; inset: 0; display: grid; grid-template-columns: auto auto auto auto; align-items: baseline; column-gap: .5em; row-gap: .2em; opacity: 0; animation: fw-stat 7.5s infinite; }
.m-fw .fw-stat b { font-size: 2.1em; font-weight: 600; letter-spacing: -.02em; color: var(--ink); line-height: 1; }
.m-fw .fw-stat span { color: var(--ink-3); font-size: .9em; margin-right: .6em; }
.m-fw .fw-stat small { grid-column: 1 / -1; color: var(--ink-3); font-size: .85em; }
.m-fw .fw-stat.s1 { animation-delay: 0s } .m-fw .fw-stat.s2 { animation-delay: 2.5s } .m-fw .fw-stat.s3 { animation-delay: 5s }
@keyframes fw-stat { 0%, 1% { opacity: 0; transform: translateY(.3em) } 5%, 29% { opacity: 1; transform: none } 33%, 100% { opacity: 0 } }

/* 4 · documents in the client's name: the cover rebuilds for the next client and the next document */
.m-doc .doc-page { background: #F4F2EE; color: #1B2230; border-radius: .4em; padding: .9em 1em .7em; display: grid; gap: .55em; position: relative; }
.m-doc .doc-head { display: flex; align-items: center; gap: .6em; font-size: .85em; color: #5A6578; }
.m-doc .logo-slot { position: relative; width: 2em; height: 2em; border-radius: .3em; flex: none; }
.m-doc .logo-slot b, .m-doc .doc-org span, .m-doc .doc-title span { position: absolute; inset: 0; animation: doc-alt 8s infinite; }
.m-doc .logo-slot b { display: grid; place-items: center; border-radius: .3em; font-weight: 700; font-size: .8em; color: #fff; letter-spacing: .02em; }
.m-doc .logo-slot .l1 { background: #1F4E79; } .m-doc .logo-slot .l2 { background: #7A3B2E; }
.m-doc .doc-org, .m-doc .doc-title { position: relative; display: block; }
.m-doc .doc-org { flex: 1; height: 1.4em; } .m-doc .doc-org span { line-height: 1.4em; white-space: nowrap; }
.m-doc .doc-title { height: 1.3em; font-family: Georgia, "Times New Roman", serif; font-size: 1.15em; font-weight: 600; } .m-doc .doc-title span { line-height: 1.3em; white-space: nowrap; }
.m-doc .l2, .m-doc .o2, .m-doc .d2 { animation-delay: 4s !important; }
@keyframes doc-alt { 0%, 2% { opacity: 0 } 6%, 46% { opacity: 1 } 50%, 100% { opacity: 0 } }
.m-doc .doc-lines { display: grid; gap: .35em; }
.m-doc .doc-lines i { height: .45em; background: #D9D5CC; border-radius: .2em; transform-origin: left; animation: doc-line 4s infinite; }
.m-doc .doc-lines i:nth-child(2) { animation-delay: .12s } .m-doc .doc-lines i:nth-child(3) { animation-delay: .24s } .m-doc .doc-lines i.short { width: 60%; animation-delay: .36s }
@keyframes doc-line { 0%, 4% { transform: scaleX(0) } 22%, 96% { transform: scaleX(1) } 100% { transform: scaleX(0) } }
.m-doc .doc-foot { font-size: .7em; color: #5A6578; }
.m-doc .doc-outs { font-size: .85em; }

/* 5 · a POA&M item moves to close-out; the count follows */
.m-poam .poam-bar { font-size: .85em; gap: .8em; }
.m-poam .poam-bar .bar { flex: 1; height: .5em; background: var(--well); border-radius: .25em; overflow: hidden; }
.m-poam .poam-bar .bar i { display: block; height: 100%; width: 58.3%; background: var(--st-good-mark); border-radius: .25em; animation: poam-bar 6s var(--ease-inout, ease) infinite; }
@keyframes poam-bar { 0%, 64% { width: 58.3% } 70%, 100% { width: 66.6% } }
.m-poam .poam-bar .c1, .m-poam .poam-bar .c2 { animation: poam-c 6s infinite; }
.m-poam .poam-bar .c2 { position: absolute; left: 0; top: 0; animation-name: poam-c2; } .m-poam .poam-bar > span:first-child { position: relative; }
@keyframes poam-c { 0%, 66% { opacity: 1 } 70%, 100% { opacity: 0 } }
@keyframes poam-c2 { 0%, 66% { opacity: 0 } 70%, 100% { opacity: 1 } }
.m-poam .poam { font-size: .85em; }
.m-poam .poam td { padding: .4em .5em; } .m-poam .poam td.pf-mono { white-space: nowrap; }
.m-poam .poam .st { position: relative; min-width: 9em; }
.m-poam .poam .st .pf-pill { position: absolute; left: .5em; top: 50%; transform: translateY(-50%); white-space: nowrap; opacity: 0; animation: poam-p 6s infinite; }
.m-poam .poam .st .p1 { animation-name: poam-p1 } .m-poam .poam .st .p2 { animation-name: poam-p2 } .m-poam .poam .st .p3 { animation-name: poam-p3 }
@keyframes poam-p1 { 0%, 30% { opacity: 1 } 34%, 100% { opacity: 0 } }
@keyframes poam-p2 { 0%, 32% { opacity: 0 } 36%, 62% { opacity: 1 } 66%, 100% { opacity: 0 } }
@keyframes poam-p3 { 0%, 64% { opacity: 0 } 68%, 96% { opacity: 1 } 100% { opacity: 0 } }
.m-poam .poam-note { font-size: .8em; }

/* 6 · scans arrive by API; the bars move; findings are proposed, not entered */
.m-mon .mon-feed { display: flex; align-items: center; gap: .6em; font-size: .85em; color: var(--ink); background: var(--sheet); border: 1px solid var(--hair); border-left: 3px solid var(--st-info-fg); border-radius: .4em; padding: .45em .7em; animation: feed-in 5.5s var(--ease-out, ease) infinite; }
.m-mon .mon-feed i { width: .5em; height: .5em; border-radius: 50%; background: var(--st-info-fg); }
@keyframes feed-in { 0% { transform: translateX(-.8em); opacity: 0 } 10%, 94% { transform: none; opacity: 1 } 100% { opacity: 0 } }
.m-mon .mon-bars { display: grid; gap: .5em; font-size: .85em; }
.m-mon .mon-bars > div { display: grid; grid-template-columns: 4.5em 1fr 2em; align-items: center; gap: .6em; color: var(--ink-2); }
.m-mon .mon-bars .bar { height: .6em; background: var(--well); border-radius: .3em; overflow: hidden; }
.m-mon .mon-bars .bar i { display: block; height: 100%; border-radius: .3em; animation: 5.5s var(--ease-inout, ease) infinite; }
.m-mon .b-crit { background: var(--st-bad-fg); animation-name: bar-crit !important; } .m-mon .b-high { background: var(--st-warn-fg); animation-name: bar-high !important; } .m-mon .b-med { background: var(--st-info-fg); animation-name: bar-med !important; }
@keyframes bar-crit { 0%, 30% { width: 16% } 44%, 100% { width: 8% } }
@keyframes bar-high { 0%, 30% { width: 60% } 44%, 100% { width: 47% } }
@keyframes bar-med { 0%, 30% { width: 82% } 44%, 100% { width: 86% } }
.m-mon .mon-bars .v { position: relative; text-align: right; color: var(--ink); font-family: var(--amono); font-weight: 600; height: 1.3em; }
.m-mon .mon-bars .v span { position: absolute; right: 0; top: 0; animation: 5.5s infinite; }
.m-mon .mon-bars .v span:first-child { animation-name: v-old } .m-mon .mon-bars .v span:last-child { animation-name: v-new }
@keyframes v-old { 0%, 36% { opacity: 1 } 42%, 100% { opacity: 0 } }
@keyframes v-new { 0%, 36% { opacity: 0 } 42%, 100% { opacity: 1 } }
.m-mon .mon-foot { font-size: .85em; opacity: 0; animation: late-in 5.5s infinite; }

@media (prefers-reduced-motion: reduce) {
  .cap-grid .micro *, .cap-grid.is-in .micro * { animation: none !important; opacity: 1; transform: none; }
  .m-home .home-link .pulse { display: none; }
  .m-fw .fw-stat.s2, .m-fw .fw-stat.s3, .m-doc .l2, .m-doc .o2, .m-doc .d2, .m-poam .p1, .m-poam .p2, .m-poam .c2, .m-mon .v span:first-child { display: none; }
  .m-poam .poam .st .pf-pill { position: static; transform: none; }
  .m-mon .mon-bars .v span { position: static; }
}

/* ---------- safeguards frame: one rating as the record sees it ---------- */
.pf-sg { padding: 1.1em 1.2em 2.4em; font-size: clamp(10.5px, 1.75cqw, 14px); }
.sg-trace { display: grid; gap: .5em; }
.sg-row { display: grid; grid-template-columns: 5.2em 1fr auto; gap: .9em; align-items: start; padding: .7em .9em; border-radius: .5em; background: var(--sheet); border: 1px solid var(--hair); }
.sg-row .sg-who { display: inline-flex; align-items: center; gap: .45em; font-weight: 600; font-size: .9em; color: var(--ink-2); padding-top: .1em; }
.sg-row .sg-who i { width: .55em; height: .55em; border-radius: 50%; display: inline-block; }
.sg-row.who-aegis { border-color: var(--aegis-rule); background: linear-gradient(100deg, var(--aegis-tint) 0%, var(--sheet) 60%); }
.sg-row.who-aegis .sg-who { color: var(--aegis); } .sg-row.who-aegis .sg-who i { background: var(--aegis-solid); }
.sg-row.who-you { border-color: color-mix(in srgb, var(--ember) 45%, var(--hair)); background: linear-gradient(100deg, rgba(232,112,63,.12) 0%, var(--sheet) 60%); }
.sg-row.who-you .sg-who { color: var(--ember-text); } .sg-row.who-you .sg-who i { background: var(--ember); }
.sg-row.who-check .sg-who, .sg-row.who-rec .sg-who { color: var(--ink-3); }
.sg-row .sg-body { display: grid; gap: .25em; min-width: 0; }
.sg-row .sg-body .pf-sub { font-size: .85em; }
.sg-row .sg-t { color: var(--ink-3); font-size: .8em; padding-top: .2em; }
.sg-row .hash { color: var(--ev-ok-fg); }
.sg-press { display: flex; align-items: center; gap: .9em; flex-wrap: wrap; }
.sg-press .pf-btn.press { transform-origin: center; }
.sg-row.show .pf-btn.press { animation: sg-press .6s var(--ease-inout, ease) .7s both; }
@keyframes sg-press { 0% { transform: none } 40% { transform: scale(.94); box-shadow: 0 0 0 .35em rgba(232,112,63,.25) } 100% { transform: none; box-shadow: none } }
.sg-pressed.show ~ .pf-btn.press, .sg-press:has(.sg-pressed.show) .pf-btn.press { opacity: .45; }
.sg-pressed { font-weight: 500; color: var(--ink); }
@container (max-width: 520px) { .sg-row { grid-template-columns: 4.2em 1fr; } .sg-row .sg-t { display: none; } }
@media (prefers-reduced-motion: reduce) { .sg-row.show .pf-btn.press { animation: none; } }

/* ---------- the Aegis mark (shield and spark, exact app geometry) ---------- */
.pf-mark { width: 1.05em; height: 1.05em; vertical-align: -.15em; margin-right: .35em; display: inline-block; }
.who .pf-mark { margin-right: .3em; }

/* ---------- conversation messages (shared) ---------- */
.msg { border-radius: .6em; padding: .7em .9em; font-size: .92em; line-height: 1.45; }
.msg .who { display: block; font-size: .75em; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .3em; font-family: var(--amono); }
.msg p { margin: 0; color: var(--ink); }
.msg.you { background: var(--sheet-2); border: 1px solid var(--hair); }
.msg.ai { background: var(--sheet); border: 1px solid var(--aegis-rule); }
.msg.ai .who { color: var(--aegis); }

/* ---------- Front Door demonstration: the real shell, the conversation, and the work inside it ----------
   Recreated from captures of the application (Today page, Controls working card, evidence viewer; build of 8 Nov 2026)
   and the Front Door design mockup. Sizes are in em so the whole frame scales from one font-size. */
.pf-fd6 { background: var(--frame); aspect-ratio: 16 / 10.4; }
.fd6-app { position: absolute; inset: 0; font-size: clamp(11px, 1.06cqw, 14px); line-height: 1.45; color: var(--ink); display: grid; grid-template-columns: 13.2em minmax(0, 1fr) 4em; grid-template-rows: 3.7em minmax(0, 1fr); }
.pf-fd6 .ic { display: inline-block; vertical-align: -.2em; width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pf-fd6 .ic.mark { color: var(--aegis); stroke-width: 1.5; }
.pf-fd6 .sp { flex: 1; }
.pf-fd6 kbd { font-family: var(--amono); font-size: .78em; border: 1px solid currentColor; border-radius: .28em; padding: 0 .34em; opacity: .85; line-height: 1.35; }
/* placement */
.fd6-rail { grid-column: 1; grid-row: 2; } .fd6-main { grid-column: 2; grid-row: 2; } .fd6-util { grid-column: 3; grid-row: 2; }
/* top bar */
.fd6-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 1em; padding: 0 1em 0 1.15em; min-width: 0; }
.fd6-top .logo { display: inline-flex; align-items: center; gap: .6em; width: 12.05em; flex: none; }
.fd6-top .logo img { height: 2.1em; width: auto; }
.fd6-top .logo span { display: grid; line-height: 1.15; }
.fd6-top .logo b { font-weight: 800; letter-spacing: .13em; font-size: .98em; }
.fd6-top .logo small { color: var(--ink-2); font-size: .8em; letter-spacing: .02em; }
.fd6-top .ctx { display: grid; border: 1px solid #3A475C; border-radius: .6em; padding: .22em .75em .28em; line-height: 1.2; min-width: 0; }
.fd6-top .ctx small { font-size: .66em; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.fd6-top .ctx > span { display: inline-flex; align-items: center; gap: .5em; white-space: nowrap; }
.fd6-top .ctx b { font-size: .9em; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.fd6-top .youare { color: var(--ink-2); font-size: .9em; white-space: nowrap; }
.fd6-top .rolechip { display: inline-flex; align-items: center; gap: .3em; border: 1px solid #3A475C; border-radius: .55em; padding: .02em .5em; color: var(--ink); font-weight: 700; margin-left: .25em; }
.fd6-top .rolechip .ic { width: .95em; height: .95em; }
.fd6-top .search { margin-left: auto; display: inline-flex; align-items: center; gap: .55em; border: 1px solid #3A475C; border-radius: .6em; padding: .42em .7em; width: 15.5em; color: var(--ink-3); font-size: .92em; white-space: nowrap; }
.fd6-top .search kbd { margin-left: auto; }
.fd6-top .av { width: 2.35em; height: 2.35em; border-radius: 50%; background: #A5561F; color: #fff; font-weight: 700; font-size: .9em; display: grid; place-items: center; flex: none; }
/* left rail */
.fd6-rail { padding: .5em .6em 1em; display: flex; flex-direction: column; gap: .12em; min-width: 0; }
.fd6-rail .grp { font-size: .7em; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; margin: 1em .65em .45em; }
.fd6-rail .it { display: flex; align-items: center; gap: .7em; padding: .48em .65em; border-radius: .5em; color: var(--ink-2); font-weight: 600; font-size: .95em; white-space: nowrap; }
.fd6-rail .it.on { background: #131C2B; color: var(--ink); }
/* utility rail */
.fd6-util { display: flex; flex-direction: column; align-items: center; gap: 1.2em; padding: 1em 0 1.1em; color: var(--ink-2); }
.fd6-util span { position: relative; display: grid; justify-items: center; gap: .2em; font-size: .68em; font-weight: 600; }
.fd6-util .ic { width: 1.75em; height: 1.75em; stroke-width: 1.6; }
.fd6-util .end { margin-top: auto; }
.fd6-util .has-badge i { position: absolute; top: -.5em; right: -.2em; min-width: 1.5em; height: 1.5em; border-radius: 1em; background: #E8ECF1; color: #0D1420; font-style: normal; font-weight: 700; display: grid; place-items: center; font-size: .95em; }
/* the Front Door itself */
.fd6-main { position: relative; background: var(--canvas); border: 1px solid var(--hair); border-bottom: 0; border-radius: .9em .9em 0 0; overflow: hidden; min-width: 0; }
.fd6-greet { position: absolute; left: 50%; top: 19%; transform: translateX(-50%); width: min(90%, 46em); text-align: center; transition: opacity .35s var(--ease-out, ease), transform .35s var(--ease-out, ease); }
.fd6-greet h4 { margin: 0 0 .35em; font-size: 1.6em; font-weight: 700; letter-spacing: -.01em; }
.fd6-greet p { margin: 0; color: var(--ink-2); line-height: 1.5; }
.fd6-greet .sub { font-size: .92em; margin-bottom: .5em; }
.pf-fd6:not([data-phase="0"]) .fd6-greet { opacity: 0; transform: translate(-50%, -.8em); }
/* the thread */
.fd6-scroll { position: absolute; inset: 0 0 6.9em 0; overflow: hidden; padding-top: 1.1em; transition: opacity .35s var(--ease-out, ease); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 1.5em, #000 calc(100% - .5em), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 1.5em, #000 calc(100% - .5em), transparent 100%); }
.fd6-thread { width: min(95%, 72em); margin: 0 auto; display: flex; flex-direction: column; gap: .75em; padding-bottom: 1em; }
.fd6-thread .u { align-self: flex-end; display: grid; justify-items: end; gap: .2em; max-width: 80%; }
.fd6-thread .u > span { background: #0B111B; border-radius: 1.3em; padding: .5em 1.05em; }
.fd6-thread .u small { font-size: .78em; color: var(--ink-3); margin-right: .2em; }
.fd6-thread .a { margin: 0; max-width: 54em; line-height: 1.5; }
.fd6-thread .a .mark { vertical-align: -.2em; margin-right: .5em; }
.pf-fd6 .step:not(.show) { display: none !important; }
.pf-fd6 .step.show { opacity: 1; transform: none; animation: fd6-in .3s var(--ease-out, ease) both; }
@keyframes fd6-in { from { opacity: 0; transform: translateY(5px) } to { opacity: 1; transform: none } }
.pf-fd6 > span.step { position: absolute; width: 0; height: 0; overflow: hidden; }
/* shared parts */
.fd6-block { position: relative; background: #131D2C; border: 1px solid #2B384C; border-radius: .8em; padding: .85em 1em .95em; overflow: hidden; min-width: 0; }
.fd6-block::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--aegis-solid); transform: scaleX(0); transform-origin: left; }
.fd6-block::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, var(--aegis-tint), transparent 70%); opacity: 0; pointer-events: none; }
.fd6-block.show::before, .fd6-pair.show .fd6-block::before { animation: ink-rule .22s var(--ease-out, ease) forwards, ink-rule-out .5s .8s forwards; }
.fd6-block.show::after, .fd6-pair.show .fd6-block::after { animation: ink-wash .8s ease-out .05s forwards; }
.fd6-pair.show .fd6-card::before, .fd6-pair.show .fd6-card::after { animation-delay: .18s, .98s; }
@keyframes ink-rule { to { transform: scaleX(1); } }
@keyframes ink-rule-out { to { opacity: 0; } }
@keyframes ink-wash { 0% { opacity: 0 } 30% { opacity: .9 } 100% { opacity: 0 } }
.fd6-id { display: inline-flex; align-items: center; gap: .3em; border: 1px solid #6E7A8C; border-radius: .32em; padding: .06em .45em; font-family: var(--amono); font-weight: 600; font-size: .92em; white-space: nowrap; }
.fd6-id .ic { width: 1em; height: 1em; }
.fd6-chip { display: inline-flex; align-items: center; gap: .3em; border: 1px solid; border-radius: 999px; padding: .06em .62em; font-size: .84em; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.fd6-chip .ic { width: 1em; height: 1em; stroke-width: 2.2; }
.fd6-chip.none { color: #A7B1BF; background: #1B2534; border-color: #56637A; border-style: dashed; }
.fd6-chip.plain { color: #A7B1BF; background: #1B2534; border-color: #56637A; }
.fd6-chip.dashed { color: var(--ink); border-color: #8E99A8; border-style: dashed; }
.fd6-chip.bad { color: #FF6457; background: #3A1512; border-color: #9B3A31; }
.fd6-chip.good { color: #7FD1A8; background: #0F2A20; border-color: #2F7D5B; }
.fd6-chip.info { color: #93B9FF; background: #132443; border-color: #3B5B9A; border-radius: .38em; font-size: .82em; }
.fd6-btn { display: inline-flex; align-items: center; border: 1px solid #6E7A8C; border-radius: .5em; padding: .26em .7em; font-weight: 700; font-size: .88em; background: rgba(23,34,53,.6); white-space: nowrap; transition: transform .15s, box-shadow .15s; }
.fd6-btn.quiet { border-color: transparent; background: #1B2534; }
.pf-fd6 .is-pressed { transform: scale(.94); box-shadow: 0 0 0 .32em rgba(232,112,63,.32); }
.pf-fd6 .fb { display: inline-block; font-family: var(--amono); font-size: .68em; font-weight: 600; border: 1px solid; border-radius: .25em; padding: 0 .32em; line-height: 1.5; vertical-align: .08em; }
.pf-fd6 .fb.pdf { color: #F08A5D; } .pf-fd6 .fb.xls { color: #7FD1A8; }
.pf-fd6 .lbl { color: var(--ink-3); font-size: .85em; }
/* 1 · the control, as a working view */
.fd6-ctl .hd { display: flex; flex-wrap: wrap; align-items: center; gap: .45em .7em; }
.fd6-ctl .ttl { color: var(--ink-3); font-size: .82em; letter-spacing: .03em; }
.fd6-ctl .fam { display: inline-flex; align-items: center; gap: .35em; border: 1px solid #56637A; border-radius: .38em; padding: .02em .5em; font-size: .85em; color: var(--ink-2); }
.fd6-ctl .fam b { font-family: var(--amono); color: var(--ink); } .fd6-ctl .fam .ic { color: #7FA8F5; width: 1em; height: 1em; }
.fd6-ctl .reqtext { margin: .55em 0 .6em; font-size: 1.05em; line-height: 1.4; }
.fd6-sheet { width: 100%; border-collapse: collapse; table-layout: fixed; }
.fd6-sheet th { text-align: left; font-size: .7em; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; padding: .4em .6em; border-bottom: 1px solid #3A475C; }
.fd6-sheet th:nth-child(1) { width: 43%; } .fd6-sheet th:nth-child(2) { width: 15.5%; } .fd6-sheet th:nth-child(4) { width: 15.5%; }
.fd6-sheet td { padding: .5em .6em; border-bottom: 1px solid var(--hair); vertical-align: top; font-size: .95em; }
.fd6-sheet tbody tr:last-child td { border-bottom: 0; }
.fd6-sheet td:first-child { font-weight: 600; line-height: 1.38; } .fd6-sheet td:first-child b { font-weight: 700; }
.fd6-ctl.show tbody tr { animation: fd6-in .3s var(--ease-out, ease) both; animation-delay: calc(.28s + var(--i, 0) * 70ms); }
.fd6-res { display: inline-flex; align-items: center; gap: .32em; border: 1px solid; border-radius: .45em; padding: .1em .45em; font-weight: 700; font-size: .9em; white-space: nowrap; }
.fd6-res .ic { width: 1em; height: 1em; stroke-width: 2.2; } .fd6-res .chev { opacity: .8; }
.fd6-res.good { color: #7FD1A8; background: #0F2A20; border-color: #2F7D5B; }
.fd6-res.none { color: #A7B1BF; background: #1B2534; border-color: #56637A; border-style: dashed; }
.fd6-sheet .rat { display: block; color: var(--ink-2); line-height: 1.38; }
.fd6-sheet .rat.add { background: #172235; border-radius: .35em; padding: .22em .55em; color: var(--ink); width: fit-content; }
.fd6-sheet td.gap { color: #FFC53D; font-size: .88em; } .fd6-sheet td.gap .ic { width: 1em; height: 1em; vertical-align: -.15em; margin-right: .3em; }
.fd6-ctl .files { display: flex; flex-wrap: wrap; align-items: center; gap: .4em 1.3em; margin-top: .7em; padding-top: .65em; border-top: 1px solid var(--hair); }
.fd6-ctl .files .f { display: inline-flex; align-items: center; gap: .45em; font-size: .93em; }
.fd6-ctl .files u { text-underline-offset: .2em; text-decoration-color: #6E7A8C; } .fd6-ctl .files .pf-mono { color: var(--ink-3); font-size: .85em; }
/* 2 · the evidence beside the objective */
.fd6-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.14fr); gap: .8em; align-items: start; }
.fd6-view .vh { display: flex; align-items: center; gap: .5em; min-width: 0; } .fd6-view .vh b { font-size: .95em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fd6-view .vh .pf-mono { color: var(--ink-3); font-size: .82em; white-space: nowrap; }
.fd6-view .sha { display: flex; align-items: center; gap: .6em; margin: .6em 0 .55em; min-width: 0; } .fd6-view .sha b { color: var(--ink-2); font-size: .85em; white-space: nowrap; } .fd6-view .sha .pf-mono { color: var(--ink-2); font-size: .84em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.fd6-view .tabs { display: flex; align-items: center; gap: .8em; margin-bottom: .45em; }
.fd6-view .tab.on { border: 1px solid #6E7A8C; border-radius: .5em; padding: .22em .7em; font-weight: 700; font-size: .9em; background: #172235; box-shadow: 0 2px 0 #C9D1DE; white-space: nowrap; }
.fd6-view .tabs .tmeta { color: var(--ink-3); font-size: .85em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd6-grid { width: 100%; border-collapse: collapse; font-size: .89em; }
.fd6-grid td:last-child { white-space: nowrap; }
.fd6-grid caption { color: var(--ink-3); font-size: .9em; padding: .1em 0 .3em; }
.fd6-grid th, .fd6-grid td { border: 1px solid #2B384C; padding: .34em .6em; text-align: left; }
.fd6-grid thead th, .fd6-grid tbody th { background: #172235; font-weight: 700; }
.fd6-grid tbody th { width: 2.7em; }
.fd6-grid td { transition: background-color .3s; }
.fd6-view:has(.sig-hl.show) .hl-row td, .fd6-view:has(.sig-hl.show) .hl-row th { background-color: rgba(255,197,61,.08); }
.fd6-view:has(.sig-hl.show) .hl-cell { outline: 2px solid #FFC53D; outline-offset: -2px; background-color: rgba(255,197,61,.2); color: #FFE7A3; font-weight: 700; animation: pulse-amber 1.5s ease-out 1; }
@keyframes pulse-amber { 0% { box-shadow: 0 0 0 0 rgba(255,197,61,.6) } 100% { box-shadow: 0 0 0 .7em rgba(255,197,61,0) } }
.fd6-view .cite { display: inline-flex; align-items: center; gap: .35em; color: var(--aegis); font-size: .86em; white-space: nowrap; }
.fd6-view .tabs:has(.cite.show) > .swap { display: none; } .fd6-view .cite .pf-mono { color: #FFE7A3; }
/* the working card for the objective */
.fd6-card .ch { display: flex; flex-wrap: wrap; align-items: center; gap: .4em .55em; }
.fd6-card .st { display: inline-flex; gap: .4em; align-items: center; }
.fd6-card .st:has(.s-draft.show) > .swap { display: none !important; }
.fd6-card .st:has(.s-saved.show) > .s-draft2 { display: none !important; }
.fd6-card .who { color: var(--ink-2); font-size: .85em; white-space: nowrap; } .fd6-card .who b { color: var(--ink); }
.fd6-card .who:has(> .step.show) > .swap { display: none; }
.fd6-card .avs { display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; border: 1.5px solid var(--ink); border-radius: 50%; font-style: normal; font-size: .72em; font-weight: 700; color: var(--ink); margin: 0 .4em 0 .3em; vertical-align: middle; }
.fd6-card .obj { margin: .55em 0 .6em; font-size: 1.05em; line-height: 1.4; }
.fd6-reading { display: flex; align-items: center; gap: .6em; color: var(--ink-2); font-size: .9em; }
.fd6-reading .shim { display: inline-block; width: 6em; height: .5em; border-radius: .3em; background: linear-gradient(90deg, var(--aegis-tint), var(--aegis-solid), var(--aegis-tint)); background-size: 200% 100%; animation: pfshim 1.2s linear infinite; }
.fd6-card:has(.fd6-found.show) .fd6-reading { display: none !important; }
.fd6-found { border: 1px solid var(--aegis-rule); border-radius: .65em; padding: .65em .85em .7em; background: linear-gradient(120deg, #1E1B30, #161B2C 62%); display: grid; gap: .5em; }
.fd6-card:has(.fd6-found-done.show) .fd6-found { display: none !important; }
.pf-fd6:has(#fd6-u3.show) .fd6-found-done { display: none !important; }
.fd6-found .fh { display: flex; align-items: center; gap: .5em; } .fd6-found .fh b { font-size: 1.1em; } .fd6-found .fh .mark { width: 1.25em; height: 1.25em; }
.fd6-found .sr { display: flex; align-items: center; gap: .6em; flex-wrap: wrap; font-size: .95em; } .fd6-found .basis { color: var(--ink-3); font-size: .86em; }
.fd6-found .cmp { display: grid; gap: .3em; background: rgba(11,17,27,.6); border: 1px solid #2B384C; border-radius: .5em; padding: .55em .7em .5em; }
.fd6-found .cmp .row { display: grid; grid-template-columns: 5.4em minmax(0, 1fr) 3.9em; column-gap: .7em; align-items: center; }
.fd6-found .cmp .k { color: var(--ink-2); font-size: .86em; font-weight: 600; }
.fd6-found .cmp .bar { position: relative; height: .72em; background: #0B111B; border-radius: .36em; overflow: hidden; }
.fd6-found .cmp .bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: .36em; transform-origin: left; }
.fd6-found .cmp .bar .def { width: 25%; background: #7FD1A8; }
.fd6-found .cmp .bar .cfg { width: 100%; background: linear-gradient(90deg, #7FD1A8 0 25%, #FF6457 25% 100%); }
.fd6-found .cmp .bar em { position: absolute; left: 25%; top: -.1em; bottom: -.1em; width: 2px; background: #0B111B; }
.fd6-found.show .cmp .bar i { animation: bar-grow .7s var(--ease-out, ease) .3s both; }
.fd6-found.show .cmp .bar .cfg { animation-delay: .7s; }
@keyframes bar-grow { from { transform: scaleX(0) } to { transform: none } }
.fd6-found .cmp b { text-align: right; font-weight: 700; white-space: nowrap; } .fd6-found .cmp .over { color: #FF6457; }
.fd6-found .cmp .src { grid-column: 2 / -1; color: var(--ink-3); font-size: .8em; margin-top: -.05em; }
.fd6-found .cmp .delta { color: #FF8A7F; font-size: .86em; font-weight: 700; margin-top: .1em; }
.fd6-found p { margin: 0; font-size: .93em; line-height: 1.42; }
.fd6-found p b { color: var(--ink-2); font-size: .9em; margin-right: .35em; }
.fd6-found .sug b { display: block; color: var(--ink); margin-bottom: .1em; }
.fd6-found .adv { color: var(--ink-3); font-size: .86em; }
.fd6-found-done { display: flex; align-items: center; gap: .4em; color: var(--aegis); font-size: .88em; border: 1px dashed var(--aegis-rule); border-radius: .5em; padding: .32em .65em; }
.fd6-rate { display: grid; gap: .5em; margin-top: .65em; }
.fd6-rate .meth { display: flex; align-items: center; gap: .45em; flex-wrap: wrap; } .fd6-rate .meth b { margin-right: .6em; }
.pf-fd6 .cb { display: inline-block; position: relative; width: 1.1em; height: 1.1em; border: 1.5px solid #8E99A8; border-radius: .28em; margin-left: .7em; }
.fd6-rate .meth b + .cb { margin-left: 0; }
.pf-fd6 .cb.on { background: #E8ECF1; border-color: #E8ECF1; }
.pf-fd6 .cb.on::after { content: ""; position: absolute; left: .33em; top: .1em; width: .24em; height: .52em; border: solid #0D1420; border-width: 0 .16em .16em 0; transform: rotate(45deg); }
.fd6-rate .meth:has(.cb.on.show) > .cb.swap { display: none; }
.fd6-rate .rl { font-size: .93em; } .fd6-rate .rl span { color: var(--ink-3); }
.fd6-rate .ra { border: 1px solid #56637A; border-radius: .5em; padding: .5em .7em; font-size: .93em; line-height: 1.42; }
.fd6-rate .tl { color: var(--ink-2); font-size: .88em; font-weight: 600; margin-top: .1em; }
.fd6-rate .btns { display: flex; flex-wrap: wrap; gap: .45em; }
.fd6-rate .rb { display: inline-flex; align-items: center; gap: .4em; border: 1px solid #6E7A8C; border-radius: .5em; padding: .28em .7em; font-weight: 700; font-size: .95em; transition: transform .15s, box-shadow .15s, background-color .2s, color .2s, border-color .2s; }
.fd6-rate .rb.dashed { border-style: dashed; color: var(--ink-2); }
.fd6-rate .rb .ic { display: none; width: 1em; height: 1em; stroke-width: 2.2; }
.fd6-card:has(.s-saved.show) #fd6-notmet { background: #3A1512; border-color: #FF6457; color: #FF6457; } .fd6-card:has(.s-saved.show) #fd6-notmet .ic { display: block; }
.fd6-card .s-saved.show { animation: fd6-in .3s var(--ease-out, ease) both, pulse-good 1.4s ease-out .3s 1; }
@keyframes pulse-good { 0% { box-shadow: 0 0 0 0 rgba(127,209,168,.55) } 100% { box-shadow: 0 0 0 .6em rgba(127,209,168,0) } }
/* 3 · the POA&M item, as a draft */
/* confidence, as the product shows it */
.fd6-found .conf { display: inline-flex; align-items: flex-end; gap: .12em; height: .9em; margin-right: .45em; vertical-align: -.05em; }
.fd6-found .conf i { display: block; width: .22em; background: var(--aegis); border-radius: .06em; } .fd6-found .conf i:nth-child(1) { height: 45% } .fd6-found .conf i:nth-child(2) { height: 72% } .fd6-found .conf i:nth-child(3) { height: 100% }
/* 3 · the run across a family */
.fd6-run .rh { display: flex; align-items: center; gap: .55em; flex-wrap: wrap; } .fd6-run .rh b { font-size: 1.05em; } .fd6-run .scope { color: var(--ink-2); font-size: .9em; } .fd6-run .scope .pf-mono { color: var(--ink); font-weight: 600; }
.fd6-run .st:has(> .step.show) > .swap { display: none; }
.fd6-run .rnote { margin: .5em 0 .55em; color: var(--ink-2); font-size: .93em; line-height: 1.42; }
.fd6-run .rbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .9em; align-items: center; }
.fd6-run .rbar .bar { height: .5em; background: #0B111B; border-radius: .3em; overflow: hidden; }
.fd6-run .rbar .bar i { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--aegis-rule), var(--aegis-solid)); border-radius: .3em; }
.fd6-run.show .rbar .bar i { animation: bar-grow 2.4s linear .1s both; }
.fd6-run .rbar b { font-family: var(--amono); font-size: .9em; font-weight: 600; white-space: nowrap; min-width: 4.6em; text-align: right; }
.fd6-run .rbar .count.step.show { animation: none; display: inline !important; }
.fd6-run .rdid { margin: .65em 0 0; padding-top: .6em; border-top: 1px solid var(--hair); font-size: .93em; line-height: 1.45; color: var(--ink); } .fd6-run .rdid b { margin-right: .45em; } .fd6-run .rdid .adv { color: var(--ink-3); }
/* the family's sheet, with what Aegis proposes */
.fd6-bulk .bh { display: flex; align-items: center; flex-wrap: wrap; gap: .45em .55em; margin-bottom: .55em; }
.fd6-bulk .fam { display: inline-flex; align-items: center; gap: .35em; border: 1px solid #56637A; border-radius: .38em; padding: .04em .55em; font-size: .9em; color: var(--ink-2); margin-right: .3em; } .fd6-bulk .fam b { font-family: var(--amono); color: var(--ink); } .fd6-bulk .fam .ic { color: #7FA8F5; width: 1em; height: 1em; }
.fd6-bulk .fchip { display: inline-flex; align-items: center; gap: .35em; border: 1px solid #2B384C; border-radius: .45em; padding: .12em .6em; font-size: .86em; color: var(--ink-2); white-space: nowrap; } .fd6-bulk .fchip b { color: var(--ink); font-family: var(--amono); font-weight: 600; }
.fd6-bulk .fchip.need { border-color: #B9652F; color: #F08A5D; } .fd6-bulk .fchip.need b { color: #F08A5D; }
.fd6-bulk .fchip .ic { width: 1em; height: 1em; }
.fd6-bulk .fchip b:has(> .step.show) > .swap { display: none; } .fd6-bulk .fchip b:has(> .s2.show) > .s1 { display: none !important; }
.fd6-bulk .fchip b .step.show { display: inline !important; }
.fd6-bsheet th:nth-child(1) { width: 47%; } .fd6-bsheet th:nth-child(2) { width: 14.5%; } .fd6-bsheet th:nth-child(3) { width: 27%; } .fd6-bsheet th:nth-child(4) { width: 11.5%; }
.fd6-bsheet td { padding: .38em .6em; vertical-align: middle; }
.fd6-bsheet td:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 400; color: var(--ink-2); } .fd6-bsheet td:first-child b { color: var(--ink); font-weight: 700; }
.fd6-bulk.show tbody tr { animation: fd6-in .3s var(--ease-out, ease) both; animation-delay: calc(.2s + var(--i, 0) * 55ms); }
.fd6-bsheet td:has(> .step.show) > .swap { display: none; }
.fd6-bsheet .ag { display: inline-flex; align-items: center; gap: .35em; font-size: .9em; color: var(--ink); white-space: nowrap; } .fd6-bsheet .ag .ic { width: 1em; height: 1em; }
.fd6-bsheet .ag.warn { color: #FF8A7F; } .fd6-bsheet .ag.none, .fd6-bsheet .ag.done { color: var(--ink-3); }
.fd6-bsheet tr.lowc .ag { color: #FFC53D; }
.fd6-bsheet .fd6-res.bad { color: #FF6457; background: #3A1512; border-color: #9B3A31; }
.fd6-bsheet .fd6-res.step.show { animation: fd6-in .25s var(--ease-out, ease) both, pulse-good 1s ease-out .1s 1; }
.fd6-bsheet .fd6-res.bad.step.show { animation: fd6-in .25s var(--ease-out, ease) both; }
.fd6-bsheet .fo { display: none !important; }
.fd6-bsheet tr.adv:has(.fo.show):not(:has(.fd6-res.bad.show)) td { background: rgba(232,236,241,.06); }
.fd6-bsheet tr.adv:has(.fo.show):not(:has(.fd6-res.bad.show)) td:first-child { box-shadow: inset 2px 0 0 #E8ECF1; }
.fd6-bsheet .fb.png { color: #93B9FF; }
.fd6-bulk .more { margin: .45em 0 0; color: var(--ink-3); font-size: .85em; }
.fd6-bulkpanel { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .5em .6em; align-items: center; margin-top: .65em; border: 1px solid #3B5B9A; background: #132443; border-radius: .6em; padding: .6em .8em; }
.fd6-bulkpanel b { font-size: 1.02em; } .fd6-bulkpanel p { margin: .15em 0 0; font-size: .92em; line-height: 1.42; color: #C9D6EE; }
.fd6-btn.primary { background: #E8ECF1; color: #0D1420; border-color: #E8ECF1; }
.fd6-bulk:has(.fd6-bulkdone.show) .fd6-bulkpanel { display: none !important; }
.fd6-bulkdone, .fd6-keyline, .fd6-leftline { margin: .6em 0 0; font-size: .93em; line-height: 1.4; }
.fd6-bulkdone { display: flex; align-items: center; gap: .45em; flex-wrap: wrap; color: var(--ink-2); } .fd6-bulkdone b { color: #7FD1A8; } .fd6-bulkdone .ic { color: #7FD1A8; width: 1.1em; height: 1.1em; stroke-width: 2.4; }
.fd6-keyline { display: flex; align-items: center; gap: .4em; flex-wrap: wrap; color: var(--ink-2); } .fd6-keyline span { margin-left: .7em; color: var(--ink); }
.fd6-keyline kbd { font-size: .82em; opacity: 1; border-color: #6E7A8C; background: #0B111B; padding: .05em .45em; }
.fd6-bulk:has(.fd6-leftline.show) .fd6-keyline { display: none !important; }
.fd6-leftline { color: var(--ink-2); } .fd6-leftline b { color: var(--ink); }
/* 4 · POA&M items, drafted and created together */
.fd6-poams .ph { display: flex; align-items: center; gap: .6em; flex-wrap: wrap; } .fd6-poams .ph > b { font-size: 1.06em; } .fd6-poams .ph > .ic { color: var(--ink-2); }
.fd6-poams .st:has(.s-created.show) > .swap { display: none !important; }
.fd6-poams .s-created.show { animation: fd6-in .3s var(--ease-out, ease) both, pulse-good 1.4s ease-out .3s 1; }
.fd6-poams .all { display: inline-flex; align-items: center; gap: .5em; }
.fd6-poams .v { position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: .6em; border: 1px dashed #56637A; border-radius: .5em; padding: .26em .65em; font-size: .92em; color: var(--ink-3); min-width: 9.5em; white-space: nowrap; }
.fd6-poams #fd6-owner { min-width: 15.5em; }
.fd6-poams .v:has(> .val.show), .fd6-poams .v:has(> .typed-line:not(.idle)) { border-style: solid; color: var(--ink); }
.fd6-poams .v:has(> .val.show) > .swap, .fd6-poams .v:has(> .typed-line:not(.idle)) > .swap { display: none; }
.fd6-poams .v:has(> .fd6-menu.show):not(:has(> .val.show)) { border-color: #E8ECF1; border-style: solid; }
.fd6-menu { position: absolute; left: -1px; right: -1px; top: calc(100% + .25em); z-index: 4; display: grid; background: #172235; border: 1px solid #6E7A8C; border-radius: .5em; padding: .25em; box-shadow: 0 16px 34px -14px rgba(0,0,0,.9); color: var(--ink); }
.fd6-menu > span { padding: .32em .55em; border-radius: .35em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd6-menu > span:first-child { background: #22304A; }
.fd6-poams .v:has(> .val.show) > .fd6-menu { display: none !important; }
.fd6-ptable { width: 100%; border-collapse: collapse; table-layout: fixed; margin: .6em 0 .65em; }
.fd6-ptable th { text-align: left; font-size: .7em; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; padding: .4em .6em; border-bottom: 1px solid #3A475C; }
.fd6-ptable th:nth-child(1) { width: 15.5%; } .fd6-ptable th:nth-child(2) { width: 29%; } .fd6-ptable th:nth-child(3) { width: 29%; } .fd6-ptable th:nth-child(4) { width: 12.5%; } .fd6-ptable th:nth-child(5) { width: 14%; }
.fd6-ptable td { padding: .45em .6em; border-bottom: 1px solid var(--hair); vertical-align: top; font-size: .92em; line-height: 1.38; }
.fd6-ptable tbody tr:last-child td { border-bottom: 0; }
.fd6-ptable td:first-child b { display: block; font-family: var(--amono); font-weight: 600; } .fd6-ptable td:first-child small { display: block; color: var(--ink-3); font-size: .84em; margin-top: .1em; white-space: nowrap; }
.fd6-ptable small:has(> .step.show) > .swap, .fd6-ptable td:has(> .step.show) > .swap { display: none; }
.fd6-ptable .pid { color: #7FD1A8; font-family: var(--amono); }
.fd6-ptable td.o, .fd6-ptable td.d { color: var(--ink); white-space: nowrap; } .fd6-ptable td .swap { color: var(--ink-3); }
.fd6-ptable tr.inel td { color: var(--ink-3); } .fd6-ptable tr.inel td:first-child b { color: var(--ink-2); } .fd6-ptable tr.inel td[colspan] { color: #FFC53D; } .fd6-ptable tr.inel .ic { width: 1em; height: 1em; vertical-align: -.15em; margin-right: .35em; }
.fd6-poams.show tbody tr { animation: fd6-in .3s var(--ease-out, ease) both; animation-delay: calc(.25s + var(--i, 0) * 70ms); }
.fd6-poams .pf { display: flex; align-items: center; gap: .5em .6em; flex-wrap: wrap; }
.fd6-poams .note { display: inline-flex; align-items: center; gap: .35em; color: var(--aegis); font-size: .86em; margin-left: .4em; }
#fd6-create { opacity: .5; transition: opacity .25s, transform .15s, box-shadow .15s, border-color .25s; }
.fd6-poams:has(#fd6-date .typed-line.done):has(#fd6-owner .val.show) #fd6-create { opacity: 1; border-color: #E8ECF1; }
.fd6-poams:has(.s-created.show) .pf { display: none; }
.fd6-poams .pc { display: flex; align-items: center; flex-wrap: wrap; gap: .2em .45em; color: var(--ink-2); font-size: .92em; } .fd6-poams .pc b { color: var(--ink); }
.fd6-poams .pc .avs { display: inline-grid; place-items: center; width: 1.9em; height: 1.9em; border: 1.5px solid var(--ink); border-radius: 50%; font-style: normal; font-size: .72em; font-weight: 700; color: var(--ink); }
.fd6-poams .pc .note { margin-left: .8em; }
.fd6-thread .a.fin { font-size: 1.06em; }
/* the composer */
.fd6-dock { position: absolute; left: 50%; transform: translateX(-50%); width: min(90%, 50em); top: calc(100% - 6.5em); z-index: 3; transition: top .5s var(--ease-inout, ease), opacity .35s var(--ease-out, ease); }
.pf-fd6[data-phase="0"] .fd6-dock { top: 44%; transition: opacity .35s var(--ease-out, ease); }
.pf-fd6.is-looping .fd6-scroll, .pf-fd6.is-looping .fd6-dock { opacity: 0; }
.fd6-dock .status { display: flex; justify-content: center; align-items: center; gap: .6em; font-size: .9em; color: var(--ink-2); margin-bottom: .4em; white-space: nowrap; } .fd6-dock .status b { color: var(--ink); }
.pf-fd6[data-phase="0"] .fd6-dock .status { display: none; }
.fd6-dock .sugchip { border: 1px solid #56637A; border-radius: .6em; padding: .16em .65em; color: var(--ink); font-weight: 700; }
.fd6-dock .box { position: relative; background: #131D2C; border: 1.5px solid #56637A; border-radius: 1.05em; padding: .7em 3.4em .7em 1em; min-height: 3.35em; box-shadow: 0 14px 34px -18px rgba(0,0,0,.9); transition: border-color .2s, box-shadow .2s, min-height .4s var(--ease-inout, ease); }
.pf-fd6[data-phase="0"] .fd6-dock .box { min-height: 6.2em; }
.pf-fd6[data-phase="0"] .fd6-dock .box, .pf-fd6[data-phase="2"] .fd6-dock .box, .pf-fd6[data-phase="4"] .fd6-dock .box, .pf-fd6[data-phase="6"] .fd6-dock .box { border-color: #E8ECF1; box-shadow: 0 0 0 1px var(--canvas), 0 0 0 2.5px rgba(232,236,241,.5), 0 14px 34px -18px rgba(0,0,0,.9); }
.fd6-dock .txt > span, .fd6-dock .sugchip, .fd6-dock .status .dot2 { display: none; }
.fd6-dock .txt > span { color: var(--ink-3); }
.fd6-dock .txt > .fill { color: var(--ink); }
/* the caret stays in the composer before, during and after typing, until the request is sent */
.pf-fd6 .fd6-dock .typed-line.idle::after, .pf-fd6 .fd6-dock .typed-line.done::after { display: inline-block; }
.pf-fd6[data-phase="0"] .txt .c0, .pf-fd6[data-phase="2"] .txt .c2, .pf-fd6[data-phase="4"] .txt .c4, .pf-fd6[data-phase="6"] .txt .c6, .pf-fd6[data-phase="8"] .txt .c8, .pf-fd6[data-phase="1"] .txt .ask, .pf-fd6[data-phase="3"] .txt .ask, .pf-fd6[data-phase="5"] .txt .ask, .pf-fd6[data-phase="7"] .txt .ask { display: inline; }
.pf-fd6[data-phase="8"] .fd6-dock .sugchip, .pf-fd6[data-phase="8"] .fd6-dock .status .dot2 { display: inline; }
.fd6-dock .send { position: absolute; right: .7em; bottom: .6em; width: 2.15em; height: 2.15em; border-radius: 50%; background: var(--ember); color: #0D1420; display: grid; place-items: center; transition: transform .15s, box-shadow .15s; } .fd6-dock .send .ic { stroke-width: 2.2; }
.pf-fd6[data-phase="1"] .send, .pf-fd6[data-phase="3"] .send, .pf-fd6[data-phase="5"] .send, .pf-fd6[data-phase="7"] .send { animation: send-pulse .5s ease-out 1; }
@keyframes send-pulse { 0% { box-shadow: 0 0 0 0 rgba(232,112,63,.7) } 100% { box-shadow: 0 0 0 .8em rgba(232,112,63,0) } }
.fd6-dock .quick { display: none; justify-content: center; flex-wrap: wrap; gap: .5em; margin-top: .75em; } .fd6-dock .quick span { border: 1px solid #56637A; border-radius: .55em; padding: .26em .7em; font-weight: 700; font-size: .9em; }
.fd6-dock .rule { display: none; margin: .65em 0 0; text-align: center; color: var(--ink-3); font-size: .88em; }
.pf-fd6[data-phase="0"] .fd6-dock .quick { display: flex; } .pf-fd6[data-phase="0"] .fd6-dock .rule { display: block; }
/* label and playback controls sit in the empty foot of the rail */
.pf-fd6 > .label { left: 10px; right: auto; bottom: 40px; }
.pf-fd6 > .pfd-ctrl { left: 10px; bottom: 8px; }
/* the cursor (shared by staged frames) */
.stage-cursor { position: absolute; left: var(--cx, 50%); top: var(--cy, 50%); width: 22px; height: 22px; opacity: 0; z-index: 20; pointer-events: none; transition: left .7s var(--ease-inout, ease), top .7s var(--ease-inout, ease), opacity .3s; filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)); }
.stage-cursor.is-on { opacity: 1; }
.stage-cursor.follow { transition: opacity .3s; }
.stage-cursor.drag { transition-duration: 1.1s; }
.stage-cursor svg { width: 100%; height: 100%; fill: #fff; stroke: #0F1A2B; stroke-width: 1.4; stroke-linejoin: round; }
.stage-cursor .ring { position: absolute; left: -4px; top: -4px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ember); opacity: 0; }
.stage-cursor.click .ring { animation: ring .5s ease-out; }
@keyframes ring { 0% { transform: scale(.4); opacity: 1 } 100% { transform: scale(2.6); opacity: 0 } }
/* sizes: a taller frame as the page narrows, then the shell steps aside */
@media (max-width: 1180px) { .pf-fd6 { aspect-ratio: 4 / 3; } }
@media (max-width: 900px) { .pf-fd6 { aspect-ratio: auto; height: 740px; } }
@media (max-width: 600px) { .pf-fd6 { height: 680px; } }
@container (max-width: 1000px) {
  .fd6-app { grid-template-columns: 12.6em minmax(0, 1fr); }
  .fd6-util, .fd6-top .search { display: none; }
  .fd6-top .logo { width: 11.45em; }
  .fd6-top .av { margin-left: auto; }
}
@container (max-width: 760px) {
  .fd6-app { font-size: clamp(11.5px, 3.2cqw, 13px); grid-template-columns: minmax(0, 1fr); inset: 0 0 38px 0; }
  .fd6-main { grid-column: 1; }
  .fd6-rail, .fd6-top .youare, .fd6-top .logo span, .fd6-top .ctx small, .fd6-top .ctx .chev { display: none; }
  .fd6-top { gap: .6em; padding: 0 .7em; } .fd6-top .logo { width: auto; } .fd6-top .ctx { border: 0; padding: 0; flex: 1; } .fd6-top .ctx > span { min-width: 0; }
  .fd6-main { border-left: 0; border-right: 0; border-radius: 0; }
  .fd6-thread { width: 94%; }
  .fd6-thread .u { max-width: 92%; }
  .fd6-pair { grid-template-columns: minmax(0, 1fr); }
  .fd6-sheet, .fd6-sheet tbody { display: block; } .fd6-sheet thead, .fd6-sheet td:nth-child(3) { display: none; }
  .fd6-sheet tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .35em .8em; align-items: center; padding: .55em 0; border-bottom: 1px solid var(--hair); }
  .fd6-sheet tbody tr:last-child { border-bottom: 0; }
  .fd6-sheet td { display: block; border: 0; padding: 0; } .fd6-sheet td:first-child { grid-column: 1 / -1; }
  .fd6-ctl .ttl, .fd6-ctl .hd .lbl:first-of-type { display: none; }
  .fd6-card .who { white-space: normal; }
  .fd6-found .cmp .row { grid-template-columns: 5em minmax(0, 1fr) 3.6em; }
  .fd6-bsheet td:nth-child(3) { display: block; } .fd6-bsheet td:nth-child(4) { display: none; }
  .fd6-bsheet tr { padding: .45em 0; gap: .3em .6em; }
  .fd6-bulk .bh .fd6-btn:not(#fd6-safe), .fd6-bulk .fam { display: none; }
  .fd6-bulkpanel { grid-template-columns: auto auto 1fr; } .fd6-bulkpanel > div { grid-column: 1 / -1; }
  .fd6-keyline span { margin-left: 0; flex-basis: 100%; }
  .fd6-poams .all { flex-basis: 100%; flex-wrap: wrap; } .fd6-poams .all .lbl { flex-basis: 100%; } .fd6-poams #fd6-owner { min-width: 0; flex: 1 1 11em; } .fd6-poams .v { min-width: 0; flex: 1 1 7em; }
  .fd6-ptable, .fd6-ptable tbody { display: block; } .fd6-ptable thead, .fd6-ptable td:nth-child(3) { display: none; }
  .fd6-ptable tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .2em .8em; align-items: baseline; padding: .5em 0; border-bottom: 1px solid var(--hair); } .fd6-ptable tbody tr:last-child { border-bottom: 0; }
  .fd6-ptable td { display: block; border: 0; padding: 0; } .fd6-ptable td:nth-child(2), .fd6-ptable tr.inel td[colspan] { grid-column: 1 / -1; grid-row: 2; }
  .fd6-ptable td:first-child { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .5em; } .fd6-ptable td:first-child small { display: inline; margin: 0; } .fd6-ptable td:first-child b { display: inline; white-space: nowrap; }
  .fd6-bulkdone .sep1 { display: none; } .fd6-bulkdone .who { flex-basis: 100%; }
  .fd6-ptable tr.inel td:first-child { grid-column: 1 / -1; }
  .fd6-poams .note, .fd6-poams .pc .note { margin-left: 0; }
  .fd6-dock { width: 94%; } .fd6-dock .status { font-size: .82em; gap: .4em; } .fd6-dock .status b, .fd6-dock .status b + span { display: none; }
  .fd6-greet { top: 12%; }
  .pf-fd6[data-phase="0"] .fd6-dock { top: 40%; }
  .stage-cursor { display: none; }
  .pf-fd6 > .label { left: auto; right: 10px; bottom: 9px; } .pf-fd6 > .pfd-ctrl { bottom: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .fd6-scroll { overflow-y: auto; }
  .fd6-greet, .fd6-dock, .fd6-scroll, .stage-cursor, .fd6-grid td { transition: none; }
  .pf-fd6 .step.show, .fd6-ctl.show tbody tr, .fd6-card .s-saved.show { animation: none; }
  .fd6-block.show::before, .fd6-block.show::after, .fd6-pair.show .fd6-block::before, .fd6-pair.show .fd6-block::after { animation: none; opacity: 0; }
  .fd6-found.show .cmp .bar i, .fd6-view:has(.sig-hl.show) .hl-cell, .fd6-reading .shim, .fd6-dock .send, .pf-fd6 .typed-line::after, .fd6-poams .s-created.show, .fd6-bulk.show tbody tr, .fd6-poams.show tbody tr, .fd6-bsheet .fd6-res.step.show { animation: none; }
  .fd6-run.show .rbar .bar i { animation: none; transform: none; }
  .stage-cursor { display: none; }
}