/* /ai-implementation-layer: page-local drawing parts, set in HTML from the system's tokens only.
   The coupling (one feature, two strands), HS-AIL-01 (the governed boundary), the four pillars, the deployment track. */

.statusrow li.gated::before{background:var(--lilac)}
.split > .aside{margin-top:0}

/* ── the coupling: one feature, two strands in one sheath ── */
.cpl-g{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,.8fr) minmax(0,2.3fr);align-items:center}
.cpl-j{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:0 16px;text-align:center}
.cpl-j i{display:block;height:8px;border-top:1.5px solid var(--ok);border-bottom:1.5px dashed var(--warn)}
.cpl-s{display:grid;gap:22px;border-left:1.5px solid var(--line-c)}
.cpl-r{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);align-items:center}
.cpl-w{display:flex;flex-direction:column;gap:8px;padding-right:14px}
.cpl-l{padding-left:14px;font:600 14px/1.35 var(--f-sans);letter-spacing:.02em;color:var(--label)}
.cpl-w i{position:relative;display:block;height:1.5px;background:var(--ok)}
.cpl-w i::after{content:"";position:absolute;right:-1px;top:-4.5px;border:5.25px solid transparent;border-left:8px solid var(--ok);border-right:0}
.cpl-r.warn .cpl-w i{background:repeating-linear-gradient(90deg,var(--warn) 0 6px,transparent 6px 12px)}
.cpl-r.warn .cpl-w i::after{border-left-color:var(--warn)}
.cpl-r.warn .nd{border-style:dashed;border-color:var(--warn)}
.cpl-f{justify-content:flex-end}
.cpl-f .dg-k{display:flex;align-items:center;gap:12px}
.cpl-f .dg-k::before{content:"";width:72px;height:9px;border:1.5px solid var(--warn);border-top:0}
@container (max-width: 620px){
  .cpl-g{grid-template-columns:1fr;row-gap:0}
  .cpl-j{flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;padding:6px 0 6px 20px;text-align:left}
  .cpl-j i{order:-1;flex:none;width:8px;height:44px;border:0;border-left:1.5px solid var(--ok);border-right:1.5px dashed var(--warn)}
  .cpl-s{gap:16px;border-left:0}
  .cpl-r{grid-template-columns:1fr;row-gap:8px}
  .cpl-w{padding:0}
  .cpl-l{padding-left:0}
  .cpl-w i{display:none}
  .cpl-r.ok .nd{border-left:3px solid var(--ok)}
  .cpl-r.warn .nd{border-left-width:3px;border-left-style:solid}
  .cpl-f{justify-content:flex-start}
}

/* ── HS-AIL-01: the governed boundary, in cross-section ── */
.ail-g{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,.42fr);column-gap:30px;align-items:start}
.ail-z{padding:16px 18px 18px;border-radius:12px;border:1px solid var(--nd-bd);background:color-mix(in srgb,var(--nd-bg) 60%,transparent)}
.ail-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ail-3 .nd{padding:14px 14px 16px}
.ail-3 .nd-t,.ail-e .nd-t{font-size:16.5px}
.ail-d{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));height:40px;padding:0 18px}
.ail-d i{position:relative;justify-self:center;width:1.5px;height:100%;background:var(--line-c)}
.ail-d i::after{content:"";position:absolute;bottom:-1px;left:-4.5px;border:5.25px solid transparent;border-top:8px solid var(--line-c);border-bottom:0}
.ail-d.ok i{background:var(--ok)}
.ail-d.ok i::after{border-top-color:var(--ok)}
.ail-l{padding:16px 18px 18px}
.ail-4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ail-4 li{padding:10px 8px 12px;border-radius:7px;border:1px solid var(--nd-bd);background:var(--nd-bg);text-align:center;font-size:14.5px;line-height:1.35;color:var(--body)}
.ail-4 b{display:block;margin-bottom:2px;font:600 15.5px/1.3 var(--f-sans);color:var(--seal)}
.ail-e{margin-top:4px}
.ail-dim{margin-top:18px}
.ail-s{display:flex;flex-direction:column}
.ail-out{padding:14px 16px 16px;border-radius:10px;border:1px dashed var(--warn)}
.ail-out ul{display:grid;gap:4px;margin-top:8px}
.ail-out li{font:600 15.5px/1.4 var(--f-sans);color:var(--warn)}
.ail-out .dg-s{margin-top:10px}
.ail-s .bd-notes{margin-top:22px}
.ail-th{margin-top:20px;font:500 20px/1.35 var(--f-head);color:var(--head);text-wrap:balance}
@container (max-width: 760px){
  .ail-g{grid-template-columns:1fr;row-gap:24px}
}
@container (max-width: 560px){
  .ail-3{grid-template-columns:1fr;gap:8px}
  .ail-4{grid-template-columns:1fr 1fr}
  .ail-d{grid-template-columns:1fr;height:34px}
  .ail-d i:not(:first-child){display:none}
  .ail-z,.ail-l{padding:14px 14px 16px}
}

/* ── the four pillars: one slab, four columns ── */
.pil-load{display:flex;align-items:center;gap:18px}
.pil-load .dg-k{flex:none}
.pil-ar{flex:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));height:30px}
.pil-ar i{position:relative;justify-self:center;width:1.5px;height:100%;background:var(--line-c)}
.pil-ar i::after{content:"";position:absolute;bottom:-1px;left:-4.5px;border:5.25px solid transparent;border-top:8px solid var(--line-c);border-bottom:0}
.pil-slab{margin-top:10px;padding:16px 18px;text-align:center}
.pil-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:12px 28px 0}
.pil-cols .nd{display:flex;flex-direction:column;justify-content:center;min-height:132px;border-radius:6px;text-align:center}
.pil-cols .nd-t{font-size:17px}
.pil-n{display:block;margin-bottom:10px;font:600 14px/1 var(--f-sans);letter-spacing:.04em;color:var(--seal)}
.pil-base{margin-top:0;padding-top:10px;border-top:2px solid var(--line-c)}
.pil-dim{display:flex;align-items:center;gap:12px}
.pil-dim::before{content:"";width:56px;height:9px;border:1.5px solid var(--seal);border-top:0}
@container (max-width: 560px){
  .pil-load{flex-direction:column;align-items:flex-start;gap:8px}
  .pil-ar{width:100%;grid-template-columns:repeat(3,minmax(0,1fr))}
  .pil-ar i:nth-child(n+4){display:none}
  .pil-cols{grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 0}
  .pil-cols .nd{min-height:96px}
}

/* ── the deployment track and what it plugs into ── */
.fitd{margin-top:56px}
.fit-t{display:grid;grid-template-columns:auto minmax(24px,1fr) auto minmax(24px,1fr) auto;align-items:center;column-gap:14px}
.fit-t i{position:relative;height:1.5px;background:var(--ok)}
.fit-t i:last-of-type::after{content:"";position:absolute;right:-1px;top:-4.5px;border:5.25px solid transparent;border-left:8px solid var(--ok);border-right:0}
.fit-c{margin-top:26px}
.fit-c .nd{text-align:center}
@container (max-width: 560px){
  .fit-t{grid-template-columns:1fr;row-gap:6px}
  .fit-t i{justify-self:start;width:1.5px;height:20px;margin-left:10px}
  .fit-t i:last-of-type::after{right:auto;top:auto;bottom:-1px;left:-4.5px;border:5.25px solid transparent;border-top:8px solid var(--ok);border-bottom:0}
  .fit-c .nd{text-align:left}
}

/* ── lists that sit in an aside ── */
.glance{margin-top:14px}
.glance li{padding:11px 0;border-top:1px solid var(--rule);font-size:16.5px;line-height:1.55;color:var(--body)}
.glance li strong{color:var(--head);font-weight:600}
.glance-box .more{margin-top:14px}
.elim .more{margin-top:12px}

/* page-local workaround (listed for the lead): under 700px .tbl.stack makes the table a block, which leaves the caption
   as a shrink-to-fit table-caption about one word wide. Set it as a plain block line instead. */
@media (max-width:699px){ .tbl.stack caption{display:block;width:auto} }
