/* GENERATED by marketing/tools/trace_flows_build.py -- do not hand-edit.
   The eight-flow view on /trace/how-it-works/. Boxes borrow the canvas's own node language from
   trace-workflow.css (5px accent left border, mist fill, small-caps kicker) so the two pages read
   as one product. The screen reveal is CSS-only -- a hidden radio per node and generated
   :checked rules below -- because this page needs no JavaScript and the CSP hashes inline script. */

/* Halved on David's review, 27 September: the flow sections sat in the site's default section
   rhythm, which is right for prose and too loose for eight diagrams in a row. Scoped to
   .tfl-section so nothing else on the site moves.
     section padding      clamp(3.5rem,7vw,6rem)  -> half
     under the sub-head   clamp(2rem,4vw,3rem)    -> half
     before "select any"  2.8rem                  -> 1.4rem */
/* The patent notice, top right of every flow. In normal flow, never positioned: the last time
   this notice shipped it was placed absolutely and the dev stylesheet hid that element below
   900px, so it vanished on every phone. This one cannot. */
/* The notice sits on the eyebrow's line and takes its colour -- same family, size, tracking and
   --accent-ink. The eyebrow moves out of .section__head to make that row, which also lets the
   notice reach the full content width instead of stopping at the head's 780px. (David, 27 Sep.) */
.tfl-headrow{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  flex-wrap:wrap;margin-bottom:1.1rem}
.tfl-headrow .eyebrow{margin:0}
.tfl-patent{margin:0;font-family:var(--display);font-size:var(--fs-label);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--accent-ink);font-weight:600}
.section--ink .tfl-headrow .eyebrow,.section--ink .tfl-patent{color:var(--accent)}

.tfl-section{padding:clamp(1.75rem,3.5vw,3rem) 0}
.tfl-section .section__head{margin-bottom:clamp(1rem,2vw,1.5rem)}
.tfl{margin-top:1.4rem}
.tfl__radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* row-gap matters: flow 04 has five steps, so it wraps, and with gap:0 the wrapped row sat
   flush against the one above it. The width and min-height are fixed rather than fluid so a
   wrapped step is the same shape as the ones it wrapped from. (David, 27 September.) */
/* A grid, not a flex row. Flows 04 and 06 have five steps, so they wrap, and wrapping a flex row
   left an arrow leading the second line -- which pushed the wrapped step out of column and made it
   a different shape from the ones above it. Grid cells are uniform by construction, the row gap is
   real, and the arrows are drawn on the boxes rather than between them. (David, 27 September.) */
.tfl__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
  gap:1.4rem 1.7rem;align-items:stretch;margin-bottom:1.4rem}
.tfl__box{
  position:relative;min-height:122px;cursor:pointer;
  border:1px solid var(--line);border-left:5px solid #91A8B8;border-radius:var(--r);
  /* white, not the canvas's #E9EFF3: on a mist ground those are a shade apart and the boxes
     stopped reading as boxes at all. White carries on mist, on white and on the ink sections. */
  background:#fff;color:var(--ink);padding:.85rem .95rem;
  display:flex;flex-direction:column;gap:.3rem;transition:transform .12s,box-shadow .12s;
}
.tfl__box:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(10,21,63,.12)}
.tfl__k{font-family:var(--display);font-size:10px;font-weight:800;letter-spacing:.065em;
  text-transform:uppercase;color:var(--body)}
.tfl__t{font-family:var(--display);font-size:.98rem;font-weight:750;line-height:1.2}
.tfl__d{font-size:.8rem;line-height:1.38;color:var(--body)}
.tfl__box:not(:last-of-type)::after{content:"→";position:absolute;right:-1.15rem;top:50%;
  transform:translateY(-50%);color:var(--steel);font-size:1.05rem;line-height:1;pointer-events:none}
.section--ink .tfl__box:not(:last-of-type)::after{color:var(--accent)}

/* the selected box, and its panel */
.tfl__panel{display:none}
.tfl__panel--on{display:block}
.tfl__detail{border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--ink);
  padding:1.2rem 1.3rem;margin-bottom:1rem}
.tfl__detail h4{font-size:1.02rem;margin:0 0 .5rem}
.tfl__detail p{font-size:.92rem;line-height:1.55;margin:0 0 .6rem;color:var(--body)}
.tfl__detail p:last-child{margin-bottom:0}
.tfl__detail b{color:var(--ink)}
.tfl__notes{margin:.7rem 0 0;font-size:.86rem}
.tfl__pat{white-space:nowrap;color:var(--accent-ink);font-weight:600}
.section--ink .tfl__pat{color:var(--accent)}
/* The mocks are dense UI with fixed inner widths, so at phone width they were wider than the
   viewport and stretched the whole page -- the hero lede and the flow index were being clipped
   mid-word. They scroll inside their own box now; the page itself never scrolls sideways. */
.tfl__screen{margin:0;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tfl__scope{max-width:100%}
.tfl__screen figcaption{font-family:var(--display);font-size:var(--fs-label);letter-spacing:.09em;
  text-transform:uppercase;color:var(--body);margin-bottom:.5rem}
.tfl__scope{display:block;background:none;padding:0;margin:0;border:0;box-shadow:none}
/* What the demo's mocks set inline, as classes (MOCK_STYLE_CLASS). Two classes of specificity so
   they beat the demo's own `.trace-demo .mock-card>p` margin, which the inline style used to. */
.tfl__scope.trace-demo .tfl-m-actions{text-align:right;margin-top:10px}
.tfl__scope.trace-demo .tfl-m-right{text-align:right}
.tfl__scope.trace-demo .tfl-m-foot{border-radius:0 0 7px 7px}
.tfl__scope.trace-demo .tfl-m-gap11{margin-top:11px}
.tfl__scope.trace-demo .tfl-m-gap10{margin-top:10px}
.tfl__scope.trace-demo .tfl-m-gap9{margin-top:9px}
.tfl__scope.trace-demo .tfl-m-gap8{margin-top:8px}
/* The replay timeline was rendering one word per line. `.mock-event` is a two-column grid
   (16px 1fr), and each event supplies an empty placeholder div AND a content div -- with the
   `::before` dot that is three grid items in two columns, so the content wrapped into the 16px
   column. The dot is drawn by the pseudo-element, so the placeholder is redundant: hiding it
   leaves exactly two items. Scoped to our screens. (David, 27 September: "Assurance review screen
   is very badly formatted".) */
.tfl__screen .mock-event > div:first-child:empty{display:none}
/* trace-workflow.css sets `.mock-app{opacity:0;transform:scale(.985)}` and relies on the demo's
   `.pop` class to animate each mock in. These are static, so they are simply visible. Found by
   bisecting the stylesheet after the mocks rendered as an empty box. */
.tfl__screen .mock-app{opacity:1;transform:none;min-height:0;max-width:none;font-size:.92rem}
.tfl__noscreen{font-size:.86rem;color:var(--body);font-style:italic}

/* On the dark grounds the boxes and the white detail card carry the contrast. */
.section--ink .tfl__detail{background:rgba(255,255,255,.04);border-color:var(--line-dark);
  color:rgba(255,255,255,.86)}
.section--ink .tfl__detail p{color:rgba(255,255,255,.72)}
.section--ink .tfl__detail b,.section--ink .tfl__detail h4{color:#fff}
/* The caption above each screen inherits --body, which is a dark blue and all but invisible on
   the ink grounds. It is the last element that had no light variant. (David, 27 September.) */
.section--ink .tfl__screen figcaption{color:rgba(255,255,255,.75)}
.section--ink .tfl__noscreen{color:rgba(255,255,255,.65)}

/* The flow index in the hero. It sits on the dark ground and is navigation, so it reads in
   the accent rather than as dimmed body text. */
.tfl-index{display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin:1.3rem 0 0;padding:0}
.tfl-index a{display:inline-flex;gap:.4rem;align-items:baseline;color:#fff;
  text-decoration:none;font-size:.92rem;font-weight:600;
  border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:2px}
.tfl-index a:hover{border-bottom-color:var(--accent-bright);color:var(--accent-bright)}
.tfl-index a b{font-family:var(--display);font-size:.78rem;letter-spacing:.06em;
  color:var(--accent-bright);font-weight:800}

.tfl__hint{font-size:.84rem;color:var(--body);margin:0 0 .9rem}
.section--ink .tfl__hint{color:rgba(255,255,255,.6)}

@media (max-width:720px){
  .tfl__row{grid-template-columns:1fr;gap:.6rem}
  .tfl__box{min-height:0}
  .tfl__box::after{display:none}
  .tfl__screen .mock-app{font-size:.8rem}
}


/* flow 01 -- Design */
.f01 .tfl__box{border-left-color:var(--steel)}
#n-discover:checked ~ .tfl__panels .p-discover{display:block}
#n-discover:checked ~ .tfl__row .s-discover{border-left-width:9px;box-shadow:0 10px 26px rgba(10,21,63,.18);transform:translateY(-3px)}
#n-requirements:checked ~ .tfl__panels .p-requirements{display:block}
#n-requirements:checked ~ .tfl__row .s-requirements{border-left-width:9px;box-shadow:0 10px 26px rgba(10,21,63,.18);transform:translateY(-3px)}
#n-codify:checked ~ .tfl__panels .p-codify{display:block}
#n-codify:checked ~ .tfl__row .s-codify{border-left-width:9px;box-shadow:0 10px 26px rgba(10,21,63,.18);transform:translateY(-3px)}

/* flow 02 -- Capture */
.f02 .tfl__box{border-left-color:var(--navy-mid)}
#n-channel:checked ~ .tfl__panels .p-channel{display:block}
#n-channel:checked ~ .tfl__row .s-channel{border-left-width:9px;box-shadow:0 10px 26px rgba(10,21,63,.18);transform:translateY(-3px)}
#n-capture:checked ~ .tfl__panels .p-capture{display:block}
#n-capture:checked ~ .tfl__row .s-capture{border-left-width:9px;box-shadow:0 10px 26px rgba(10,21,63,.18);transform:translateY(-3px)}
#n-correlate:checked ~ .tfl__panels .p-correlate{display:block}
#n-correlate:checked ~ .tfl__row .s-correlate{border-left-width:9px;box-shadow:0 10px 26px rgba(10,21,63,.18);transform:translateY(-3px)}

/* flow 03 -- Evidence & authority */
.f03 .tfl__box{border-left-color:var(--aqua)}
#n-evidence:checked ~ .tfl__panels .p-evidence{display:block}
#n-evidence:checked ~ .tfl__row .s-evidence{border-left-width:9px;box-shadow:0 10px 26px rgba(10,21,63,.18);transform:translateY(-3px)}
#n-attest:checked ~ .tfl__panels .p-attest{display:block}
#n-attest:checked ~ .tfl__row .s-attest{border-left-width:9px;box-shadow:0 10px 26px rgba(10,21,63,.18);transform:translateY(-3px)}
#n-approve:checked ~ .tfl__panels .p-approve{display:block}
#n-approve:checked ~ .tfl__row .s-approve{border-left-width:9px;box-shadow:0 10px 26px rgba(10,21,63,.18);transform:translateY(-3px)}

/* flow 04 -- Validate */
.f04 .tfl__box{border-left-color:var(--warn)}
#n-complete:checked ~ .tfl__panels .p-complete{display:block}
#n-complete:checked ~ .tfl__row .s-complete{border-left-width:9px;box-shadow:0 10px 26px rgba(10,21,63,.18);transform:translateY(-3px)}
#n-evaluate:checked ~ .tfl__panels .p-evaluate{display:block}
#n-evaluate:checked ~ .tfl__row .s-evaluate{border-left-width:9px;box-shadow:0 10px 26px rgba(10,21,63,.18);transform:translateY(-3px)}
#n-outcome:checked ~ .tfl__panels .p-outcome{display:block}
#n-outcome:checked ~ .tfl__row .s-outcome{border-left-width:9px;box-shadow:0 10px 26px rgba(10,21,63,.18);transform:translateY(-3px)}
#n-moreinfo:checked ~ .tfl__panels .p-moreinfo{display:block}
#n-moreinfo:checked ~ .tfl__row .s-moreinfo{border-left-width:9px;box-shadow:0 10px 26px rgba(10,21,63,.18);transform:translateY(-3px)}
#n-deny:checked ~ .tfl__panels .p-deny{display:block}
#n-deny:checked ~ .tfl__row .s-deny{border-left-width:9px;box-shadow:0 10px 26px rgba(10,21,63,.18);transform:translateY(-3px)}

/* flow 05 -- Bind */
.f05 .tfl__box{border-left-color:var(--ok)}
#n-bindready:checked ~ .tfl__panels .p-bindready{display:block}
#n-bindready:checked ~ .tfl__row .s-bindready{border-left-width:9px;box-shadow:0 10px 26px rgba(10,21,63,.18);transform:translateY(-3px)}
#n-snapshot:checked ~ .tfl__panels .p-snapshot{display:block}
#n-snapshot:checked ~ .tfl__row .s-snapshot{border-left-width:9px;box-shadow:0 10px 26px rgba(10,21,63,.18);transform:translateY(-3px)}
#n-bind:checked ~ .tfl__panels .p-bind{display:block}
#n-bind:checked ~ .tfl__row .s-bind{border-left-width:9px;box-shadow:0 10px 26px rgba(10,21,63,.18);transform:translateY(-3px)}
#n-active:checked ~ .tfl__panels .p-active{display:block}
#n-active:checked ~ .tfl__row .s-active{border-left-width:9px;box-shadow:0 10px 26px rgba(10,21,63,.18);transform:translateY(-3px)}

/* flow 06 -- Monitor */
.f06 .tfl__box{border-left-color:var(--accent-ink)}
#n-event:checked ~ .tfl__panels .p-event{display:block}
#n-event:checked ~ .tfl__row .s-event{border-left-width:9px;box-shadow:0 10px 26px rgba(10,21,63,.18);transform:translateY(-3px)}
#n-match:checked ~ .tfl__panels .p-match{display:block}
#n-match:checked ~ .tfl__row .s-match{border-left-width:9px;box-shadow:0 10px 26px rgba(10,21,63,.18);transform:translateY(-3px)}
#n-condition:checked ~ .tfl__panels .p-condition{display:block}
#n-condition:checked ~ .tfl__row .s-condition{border-left-width:9px;box-shadow:0 10px 26px rgba(10,21,63,.18);transform:translateY(-3px)}
#n-noaction:checked ~ .tfl__panels .p-noaction{display:block}
#n-noaction:checked ~ .tfl__row .s-noaction{border-left-width:9px;box-shadow:0 10px 26px rgba(10,21,63,.18);transform:translateY(-3px)}
#n-change:checked ~ .tfl__panels .p-change{display:block}
#n-change:checked ~ .tfl__row .s-change{border-left-width:9px;box-shadow:0 10px 26px rgba(10,21,63,.18);transform:translateY(-3px)}

/* flow 07 -- Continuous audit */
.f07 .tfl__box{border-left-color:var(--accent-ink)}
#n-audit:checked ~ .tfl__panels .p-audit{display:block}
#n-audit:checked ~ .tfl__row .s-audit{border-left-width:9px;box-shadow:0 10px 26px rgba(10,21,63,.18);transform:translateY(-3px)}
#n-integrity:checked ~ .tfl__panels .p-integrity{display:block}
#n-integrity:checked ~ .tfl__row .s-integrity{border-left-width:9px;box-shadow:0 10px 26px rgba(10,21,63,.18);transform:translateY(-3px)}
#n-central:checked ~ .tfl__panels .p-central{display:block}
#n-central:checked ~ .tfl__row .s-central{border-left-width:9px;box-shadow:0 10px 26px rgba(10,21,63,.18);transform:translateY(-3px)}

/* flow 08 -- Review, replay & reporting */
.f08 .tfl__box{border-left-color:var(--aqua)}
#n-replay:checked ~ .tfl__panels .p-replay{display:block}
#n-replay:checked ~ .tfl__row .s-replay{border-left-width:9px;box-shadow:0 10px 26px rgba(10,21,63,.18);transform:translateY(-3px)}
#n-export:checked ~ .tfl__panels .p-export{display:block}
#n-export:checked ~ .tfl__row .s-export{border-left-width:9px;box-shadow:0 10px 26px rgba(10,21,63,.18);transform:translateY(-3px)}
#n-exportlog:checked ~ .tfl__panels .p-exportlog{display:block}
#n-exportlog:checked ~ .tfl__row .s-exportlog{border-left-width:9px;box-shadow:0 10px 26px rgba(10,21,63,.18);transform:translateY(-3px)}
#n-retention:checked ~ .tfl__panels .p-retention{display:block}
#n-retention:checked ~ .tfl__row .s-retention{border-left-width:9px;box-shadow:0 10px 26px rgba(10,21,63,.18);transform:translateY(-3px)}
#n-assure:checked ~ .tfl__panels .p-assure{display:block}
#n-assure:checked ~ .tfl__row .s-assure{border-left-width:9px;box-shadow:0 10px 26px rgba(10,21,63,.18);transform:translateY(-3px)}