/* Intelligence page (#p-intelligence) in the MISH identity: paper reading layout with one dark band, the story
   "From one email to a paid invoice": ten numbered cards beside a pinned spine, each with an isometric line drawing.
   Every rule is scoped under .inner-intelligence.
   Needs mish-identity.css for the shared components (.mish-paper, .mish-stage, .mish-read*, .mish-btn, .mish-tag,
   .mish-note). Tokens are read with their locked hex values as fallbacks (docs/review/identity-spec.md).
   styles.css is still linked on the site and sets element rules (p, h1 to h3, svg path), so every text element here
   gets an explicit font, margin and measure from a class selector, which outranks those element rules.
   Motion: scroll drives the story. inner-intelligence.mjs writes each card's progress (--p), the spine's (--ii-p) and
   the finale's (--tp); line drawings, cables and the spine follow those values directly, and opening cards and colour
   changes use transitions on the identity duration tokens, which fall to 0ms under reduced motion and Pause motion.
   No CSS keyframe animations, so nothing can run offscreen. */

.inner-intelligence{
  --ii-ease:var(--mish-ease,cubic-bezier(.16,1,.3,1));
  --ii-lit:#182031;                         /* 10% teal blue on abyss: the row being read */
  background:var(--mish-paper,#f5f0fb);
  color:var(--mish-ink,#251637);
  overflow-x:clip;
}
.inner-intelligence *,.inner-intelligence *::before,.inner-intelligence *::after{box-sizing:border-box}
.inner-intelligence code{font-family:var(--mish-font-mono,'JetBrains Mono',ui-monospace,monospace)}

/* ---------- Intro: the route's h1 on the left, who does each step on the right ---------- */
.inner-intelligence .ii-intro{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--mish-space-7,48px) clamp(40px,6vw,96px);align-items:end;padding-bottom:var(--mish-space-8,64px)}
.inner-intelligence .ii-intro .mish-display{max-width:14ch}
.inner-intelligence .ii-split{padding:var(--mish-space-5,24px) clamp(20px,2.4vw,32px) clamp(20px,2.4vw,32px);background:var(--mish-sage,#e8def2);border-top:1px solid var(--mish-ink,#251637)}
.inner-intelligence .ii-split-h{margin:0 0 var(--mish-space-2,8px);font:600 var(--mish-step-body,1rem)/1.3 var(--mish-font-display,Montserrat,sans-serif);letter-spacing:0;text-transform:none;color:var(--mish-ink,#251637)}
.inner-intelligence .ii-split-list{margin:0}
.inner-intelligence .ii-split-list>div{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;padding:14px 0;border-top:1px solid var(--mish-paper-rule,#d8cde4)}
.inner-intelligence .ii-split-list>div:first-child{border-top:0}
.inner-intelligence .ii-split-list dt{margin:0}
.inner-intelligence .ii-split-list dd{margin:0;font:400 var(--mish-step-small,.875rem)/1.6 var(--mish-font-body,Montserrat,sans-serif);color:var(--mish-ink,#251637);max-width:46ch}
@media (min-width:520px){
  .inner-intelligence .ii-split-list>div{grid-template-columns:10.5em minmax(0,1fr);gap:14px;align-items:start}
  .inner-intelligence .ii-split-list dt{padding-top:1px}
}
@media (min-width:1000px){
  .inner-intelligence .ii-intro{grid-template-columns:minmax(0,1.2fr) minmax(340px,.95fr)}
}

/* ---------- The story band ---------- */
.inner-intelligence .ii-band{padding:var(--mish-section,clamp(56px,8vw,112px)) var(--mish-gutter,clamp(16px,4vw,56px));border-top:1px solid var(--mish-rule,#35414a);border-bottom:1px solid var(--mish-rule,#35414a)}
.inner-intelligence .ii-band-in{max-width:var(--mish-max,1320px);margin:0 auto}
.inner-intelligence .ii-band-head{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--mish-space-5,24px) clamp(32px,5vw,72px);align-items:end}
.inner-intelligence .ii-band-lead{margin:var(--mish-space-4,16px) 0 0;font:400 var(--mish-step-body,1rem)/1.7 var(--mish-font-body,Montserrat,sans-serif);color:var(--mish-body,#ded7ea);max-width:62ch}
.inner-intelligence .ii-band-note{max-width:44ch}
@media (min-width:1000px){.inner-intelligence .ii-band-head{grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr)}}

/* The story: numbered cards beside a pinned spine. One column with the spine down the left edge; from 1100px the cards
   alternate either side of a centred spine. The spine pin is sticky inside a wrapper as tall as the list of cards, so
   it rides at mid screen for as long as the cards are on screen. While the story runs, each card reserves the height
   it has open (--ii-h, measured by the module), so a card opening never moves anything below or above it. */
.inner-intelligence .ii-story{--ii-spine:30px;position:relative;display:grid;grid-template-columns:var(--ii-spine) minmax(0,1fr);column-gap:14px;margin-top:var(--mish-space-8,64px)}
.inner-intelligence .ii-spine{grid-column:1;grid-row:1;align-self:stretch;position:relative}
.inner-intelligence .ii-spine-pin{position:sticky;top:calc(50vh - 70px);display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:6px}
.inner-intelligence .ii-spine-track{position:relative;display:block;width:2px;height:120px;background:repeating-linear-gradient(to bottom,var(--mish-edge,#89929e) 0 1px,transparent 1px 6px)}
.inner-intelligence .ii-spine-fill{position:absolute;left:0;top:0;width:2px;height:100%;background:var(--mish-mint,#63d7e3);transform-origin:center top;transform:scaleY(var(--ii-p,1))}
.inner-intelligence .ii-spine-dot{position:absolute;left:50%;top:calc(var(--ii-p,1) * 100%);width:10px;height:10px;margin:-5px 0 0 -5px;background:var(--mish-light,#fbf7ff)}
.inner-intelligence .ii-spine-n{display:flex;flex-direction:column;align-items:center;gap:2px;font:500 var(--mish-step-label,.75rem)/1.2 var(--mish-font-mono,'JetBrains Mono',ui-monospace,monospace);letter-spacing:.04em;color:var(--mish-dim,#b2a1c6);font-variant-numeric:tabular-nums;white-space:nowrap}
.inner-intelligence .ii-spine-n b{font-weight:500;color:var(--mish-mint,#63d7e3)}
.inner-intelligence .ii-chapters{grid-column:2;grid-row:1;display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.inner-intelligence .ii-ch{min-width:0;margin:0}
.inner-intelligence .ii-armed .ii-ch{min-height:var(--ii-h,0px)}
.inner-intelligence .ii-ch+.ii-ch{margin-top:clamp(36px,7vh,80px)}
.inner-intelligence .ii-finale{grid-column:1/-1;grid-row:2;min-width:0;padding-top:clamp(56px,12vh,140px)}
@media (min-width:1100px){
  .inner-intelligence .ii-story{--ii-spine:128px;grid-template-columns:minmax(0,1fr) var(--ii-spine) minmax(0,1fr);column-gap:0}
  .inner-intelligence .ii-spine{grid-column:2}
  .inner-intelligence .ii-spine-n{flex-direction:row;gap:6px}
  .inner-intelligence .ii-chapters{grid-column:1/-1}
  .inner-intelligence .ii-ch{width:min(540px,calc(50% - var(--ii-spine) / 2))}
  .inner-intelligence .ii-ch[data-side="l"]{margin-left:auto;margin-right:calc(50% + var(--ii-spine) / 2)}
  .inner-intelligence .ii-ch[data-side="r"]{margin-left:calc(50% + var(--ii-spine) / 2);margin-right:auto}
  /* Each card starts before the one beside it ends, on the other side of the spine, so the zigzag reads as one path. */
  .inner-intelligence .ii-ch+.ii-ch{margin-top:clamp(-240px,-22vh,-96px)}
}

/* A card: number and title, the drawing and its facts (open once the reader reaches it), and who does the step */
.inner-intelligence .ii-card{position:relative;display:grid;background:var(--mish-abyss,#030405);border:1px solid var(--mish-rule,#35414a);border-radius:var(--mish-radius-panel,6px);transition:border-color var(--mish-dur-2,180ms) ease}
.inner-intelligence .ii-ch.is-lit .ii-card{border-color:var(--mish-edge,#89929e)}
/* The cable: the card's top edge draws in with its progress, teal blue, brass where a person approves */
.inner-intelligence .ii-card::before{content:'';position:absolute;left:-1px;right:-1px;top:-1px;height:var(--mish-cable,2px);border-radius:var(--mish-radius-panel,6px) var(--mish-radius-panel,6px) 0 0;background:var(--mish-mint,#63d7e3);transform-origin:left center;transform:scaleX(var(--p,1))}
.inner-intelligence .ii-ch--gate .ii-card::before{background:var(--mish-brass,#ffb16b)}
.inner-intelligence .ii-ch--gate.is-approved .ii-card::before{background:var(--mish-mint,#63d7e3)}
.inner-intelligence .ii-card-h{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--mish-rule,#35414a)}
.inner-intelligence .ii-card-n{flex:none;display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--mish-edge,#89929e);border-radius:var(--mish-radius-field,2px);font:500 .8125rem/1 var(--mish-font-mono,'JetBrains Mono',ui-monospace,monospace);color:var(--mish-light,#fbf7ff);font-variant-numeric:tabular-nums}
.inner-intelligence .ii-ch.is-lit .ii-card-n{border-color:var(--mish-mint,#63d7e3);color:var(--mish-mint,#63d7e3)}
.inner-intelligence .ii-ch--gate.is-lit .ii-card-n{border-color:var(--mish-brass,#ffb16b);color:var(--mish-brass,#ffb16b)}
.inner-intelligence .ii-card-t{flex:1 1 auto;min-width:0;margin:0;font:500 clamp(.9375rem,.9rem + .2vw,1.0625rem)/1.4 var(--mish-font-mono,'JetBrains Mono',ui-monospace,monospace);letter-spacing:-.01em;color:var(--mish-light,#fbf7ff);text-wrap:balance;max-width:none}
/* The body opens with a row track from 0fr to 1fr; the inner box clips while it opens. Padding lives on the children,
   so a closed body is fully closed. A tree line runs from the number down to the footer, as in a file tree. */
.inner-intelligence .ii-card-body{display:grid;grid-template-rows:1fr;transition:grid-template-rows var(--mish-dur-4,700ms) var(--ii-ease)}
.inner-intelligence .ii-armed .ii-ch:not(.is-open) .ii-card-body{grid-template-rows:0fr}
.inner-intelligence .ii-measure.ii-armed .ii-ch .ii-card-body{grid-template-rows:1fr}
.inner-intelligence .ii-card-in{position:relative;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:12px;padding:0 16px 0 51px}
.inner-intelligence .ii-card-in::before{content:'';position:absolute;left:30px;top:0;bottom:0;width:1px;background:var(--mish-rule,#35414a)}
.inner-intelligence .ii-card-in>:first-child{margin-top:14px}
.inner-intelligence .ii-card-in>:last-child{margin-bottom:18px}
.inner-intelligence .ii-card-f{position:relative;display:flex;align-items:center;gap:12px;padding:10px 14px 12px 51px;border-top:1px solid var(--mish-rule,#35414a)}
.inner-intelligence .ii-card-f::before{content:'';position:absolute;left:30px;top:0;width:13px;height:26px;border-left:1px solid var(--mish-rule,#35414a);border-bottom:1px solid var(--mish-rule,#35414a)}
.inner-intelligence .ii-ico{flex:none;display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--mish-edge,#89929e);border-radius:var(--mish-radius-field,2px);background:var(--mish-deep,#050607);color:var(--mish-muted,#c1b4d0)}
.inner-intelligence .ii-ico svg{width:16px;height:16px}
.inner-intelligence .ii-ico svg path{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.inner-intelligence .ii-ico--claude{color:var(--mish-mint,#63d7e3)}
.inner-intelligence .ii-ico--approve{color:var(--mish-brass,#ffb16b)}
.inner-intelligence .ii-ico--person{color:var(--mish-light,#fbf7ff)}
.inner-intelligence .ii-who{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-width:0}
.inner-intelligence .ii-person{font:500 var(--mish-step-label,.75rem)/1.3 var(--mish-font-mono,'JetBrains Mono',ui-monospace,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--mish-body,#ded7ea)}
.inner-intelligence .ii-card-d{margin:0;max-width:62ch;font:400 var(--mish-step-small,.875rem)/1.6 var(--mish-font-body,Montserrat,sans-serif);color:var(--mish-muted,#c1b4d0)}
.inner-intelligence .ii-card-d--small{font-size:.8125rem}
.inner-intelligence .ii-skill{display:inline-block;padding:3px 7px;border:1px solid var(--mish-line,#35414a);border-radius:var(--mish-radius-field,2px);font:500 .8125rem/1.2 var(--mish-font-mono,'JetBrains Mono',ui-monospace,monospace);letter-spacing:0;text-transform:none;color:var(--mish-signal,#63d7e3);background:transparent;white-space:nowrap}
.inner-intelligence .ii-fine{margin:0;font:500 var(--mish-step-label,.75rem)/1.4 var(--mish-font-mono,'JetBrains Mono',ui-monospace,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--mish-brass,#ffb16b);max-width:none}

/* The drawing: isometric line art. Each path is normalised to length 1 (pathLength) and draws in with the card's
   progress, the scene first and the subject after it. Grey until the card sits on the reading line, then the subject
   lights teal blue; brass marks what waits for a person, and turns teal blue once it is approved. */
.inner-intelligence .ii-art{display:block;width:100%;height:auto;max-height:210px;overflow:visible}
.inner-intelligence .ii-art path{fill:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:calc(1 - var(--p,1));transition:stroke var(--mish-dur-3,320ms) ease,fill-opacity var(--mish-dur-3,320ms) ease,fill var(--mish-dur-3,320ms) ease,transform var(--mish-dur-4,700ms) var(--ii-ease)}
.inner-intelligence .ii-art .b{stroke:var(--mish-edge,#89929e)}
.inner-intelligence .ii-art .a{stroke:var(--mish-mint,#63d7e3);stroke-width:1.4;stroke-dashoffset:calc(1 - clamp(0,(var(--p,1) - .3) / .7,1))}
.inner-intelligence .ii-art .w{stroke:var(--mish-brass,#ffb16b);stroke-width:1.4;stroke-dashoffset:calc(1 - clamp(0,(var(--p,1) - .3) / .7,1))}
.inner-intelligence .ii-art .g{stroke:var(--mish-rule,#35414a);stroke-width:1;stroke-dasharray:1.5 5;stroke-dashoffset:0;opacity:var(--p,1)}
.inner-intelligence .ii-art .f,.inner-intelligence .ii-art .fw{stroke:none;fill:var(--mish-mint,#63d7e3);fill-opacity:.16}
.inner-intelligence .ii-art .fw{fill:var(--mish-brass,#ffb16b)}
.inner-intelligence .ii-armed .ii-ch:not(.is-lit) .ii-art .a{stroke:var(--mish-edge,#89929e)}
.inner-intelligence .ii-armed .ii-ch:not(.is-lit) .ii-art :is(.f,.fw){fill-opacity:0}
.inner-intelligence .ii-ch.is-approved .ii-art .w{stroke:var(--mish-mint,#63d7e3)}
.inner-intelligence .ii-ch.is-approved .ii-art .fw{fill:var(--mish-mint,#63d7e3)}
/* Step 06: the gate's bar lifts once the spend is approved */
.inner-intelligence .ii-art .lift{transform-box:fill-box;transform-origin:0% 100%}
.inner-intelligence .ii-ch.is-approved .ii-art .lift{transform:rotate(-26deg)}

/* Facts: at most three per card */
.inner-intelligence .ii-facts{margin:0}
.inner-intelligence .ii-facts>div{display:grid;grid-template-columns:7.4em minmax(0,1fr);gap:10px;padding:7px 0;border-top:1px solid var(--mish-rule,#35414a)}
.inner-intelligence .ii-facts>div:last-child{border-bottom:1px solid var(--mish-rule,#35414a)}
.inner-intelligence .ii-facts dt{font:500 var(--mish-step-label,.75rem)/1.6 var(--mish-font-mono,'JetBrains Mono',ui-monospace,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--mish-dim,#b2a1c6)}
.inner-intelligence .ii-facts dd{margin:0;font:400 var(--mish-step-small,.875rem)/1.55 var(--mish-font-body,Montserrat,sans-serif);color:var(--mish-body,#ded7ea)}

/* Step 01: the inbox the rule sorts, then the email it sent on */
.inner-intelligence .ii-inbox{margin:0;padding:0;list-style:none;border-top:1px solid var(--mish-rule,#35414a)}
.inner-intelligence .ii-inbox li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"from route" "subj subj";gap:2px 10px;margin:0;padding:8px 2px 9px 10px;border-bottom:1px solid var(--mish-rule,#35414a);border-left:2px solid transparent}
.inner-intelligence .ii-inbox li:first-child{border-left-color:var(--mish-mint,#63d7e3)}
.inner-intelligence .ii-inbox-from{grid-area:from;min-width:0;font:600 var(--mish-step-small,.875rem)/1.4 var(--mish-font-body,Montserrat,sans-serif);color:var(--mish-light,#fbf7ff)}
.inner-intelligence .ii-inbox-subj{grid-area:subj;min-width:0;font:400 var(--mish-step-small,.875rem)/1.45 var(--mish-font-body,Montserrat,sans-serif);color:var(--mish-muted,#c1b4d0)}
.inner-intelligence .ii-route{grid-area:route;align-self:center;font:500 var(--mish-step-label,.75rem)/1.3 var(--mish-font-mono,'JetBrains Mono',ui-monospace,monospace);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:var(--mish-muted,#c1b4d0)}
.inner-intelligence .ii-route--skill{color:var(--mish-mint,#63d7e3)}
.inner-intelligence .ii-mail{display:grid;gap:10px;padding:14px 16px 16px;background:var(--mish-lift,#302047);border-radius:4px}
.inner-intelligence .ii-mail-h{display:grid;gap:3px;margin:0}
.inner-intelligence .ii-mail-h>div{display:flex;gap:10px;align-items:baseline}
.inner-intelligence .ii-mail-h dt{flex:none;width:6.2em;font:500 var(--mish-step-label,.75rem)/1.4 var(--mish-font-mono,'JetBrains Mono',ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--mish-dim,#b2a1c6)}
.inner-intelligence .ii-mail-h dd{margin:0;font:400 var(--mish-step-small,.875rem)/1.5 var(--mish-font-body,Montserrat,sans-serif);color:var(--mish-body,#ded7ea)}
.inner-intelligence .ii-mail-s{margin:4px 0 0;padding-top:10px;border-top:1px solid var(--mish-rule,#35414a);font:600 var(--mish-step-body,1rem)/1.4 var(--mish-font-body,Montserrat,sans-serif);color:var(--mish-light,#fbf7ff);max-width:none}
.inner-intelligence .ii-mail-b{margin:0;font:400 var(--mish-step-small,.875rem)/1.75 var(--mish-font-body,Montserrat,sans-serif);color:var(--mish-body,#ded7ea);max-width:none}
.inner-intelligence .ii-mail-sig{margin-top:-2px}
/* Source phrases: plain spans (not <mark>, which some screen readers announce on every phrase). While a field is
   read in step 02 its phrase is lit in teal blue; once read it keeps a faint tint, a highlighter rather than a link.
   No padding (padding reads as a gap before the punctuation that follows); the tint reaches 1px past the words
   through a box-shadow spread, which takes no space, so nothing shifts when a phrase lights. #373a5d is the 14% mix
   for browsers without color-mix(). */
.inner-intelligence .ii-src{--ii-tint:#373a5d;padding:0;margin:0;border-radius:2px;color:var(--mish-light,#fbf7ff);background:var(--ii-tint);box-shadow:0 0 0 1px var(--ii-tint);-webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-color var(--mish-dur-2,180ms) ease,box-shadow var(--mish-dur-2,180ms) ease,color var(--mish-dur-2,180ms) ease}
@supports (color:color-mix(in srgb,red,blue)){.inner-intelligence .ii-src{--ii-tint:color-mix(in srgb,var(--mish-mint,#63d7e3) 14%,var(--mish-lift,#302047))}}
.inner-intelligence .ii-armed .ii-src:not(.is-read){--ii-tint:transparent;color:inherit}
.inner-intelligence .ii-src.is-lit{--ii-tint:var(--mish-mint,#63d7e3);color:var(--mish-on-mint,#180f28)}

/* Step 02: fields and confidence */
.inner-intelligence .ii-fields{width:100%;border-collapse:collapse;font:400 var(--mish-step-small,.875rem)/1.45 var(--mish-font-body,Montserrat,sans-serif)}
.inner-intelligence .ii-fields tr{border-top:1px solid var(--mish-rule,#35414a);transition:background-color var(--mish-dur-2,180ms) ease}
.inner-intelligence .ii-fields tbody tr:last-child{border-bottom:1px solid var(--mish-rule,#35414a)}
.inner-intelligence .ii-fields th[scope="row"]{width:1%;padding:9px 12px 9px 4px;text-align:left;vertical-align:top;white-space:nowrap;font:500 var(--mish-step-label,.75rem)/1.6 var(--mish-font-mono,'JetBrains Mono',ui-monospace,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--mish-dim,#b2a1c6)}
.inner-intelligence .ii-fields td{padding:8px 10px 8px 0;vertical-align:top;color:var(--mish-light,#fbf7ff)}
.inner-intelligence .ii-fields td:last-child{width:1%;padding-right:4px;text-align:right;white-space:nowrap}
.inner-intelligence .ii-fields tr.is-lit{background:var(--ii-lit);background:color-mix(in srgb,var(--mish-mint,#63d7e3) 10%,var(--mish-abyss,#030405))}
.inner-intelligence .ii-conf{display:inline-flex;align-items:center;gap:8px;font:500 .8125rem/1.6 var(--mish-font-mono,'JetBrains Mono',ui-monospace,monospace);color:var(--mish-body,#ded7ea);font-variant-numeric:tabular-nums}
.inner-intelligence .ii-conf i{position:relative;display:block;width:clamp(26px,3vw,40px);height:4px;overflow:hidden;border-radius:1px;background:var(--mish-rule,#35414a)}
.inner-intelligence .ii-conf i::after{content:'';position:absolute;inset:0;background:var(--mish-mint,#63d7e3);transform-origin:left center;transform:scaleX(var(--c,1));transition:transform var(--mish-dur-4,700ms) var(--ii-ease)}
.inner-intelligence .ii-low .ii-conf i::after{background:var(--mish-brass,#ffb16b)}
.inner-intelligence .ii-armed .ii-fields tr:not(.is-on) .ii-conf i::after{transform:scaleX(0)}
/* "Check": a field a person has to confirm. A marker of this page, not an identity tag (a tag carries only its own
   meaning, never a status), so it has no box: a brass diamond, the approval step's shape, and a short mono word.
   Once the simulated approval is given it turns into a teal blue square, "Time confirmed". */
.inner-intelligence .ii-flag{display:inline-flex;align-items:center;gap:6px;margin-left:8px;white-space:nowrap;vertical-align:1px;font:500 var(--mish-step-label,.75rem)/1.2 var(--mish-font-mono,'JetBrains Mono',ui-monospace,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--mish-brass,#ffb16b)}
.inner-intelligence .ii-flag::before{content:'';flex:none;width:6px;height:6px;background:var(--mish-brass,#ffb16b);transform:rotate(45deg)}
.inner-intelligence .ii-flag.is-approved{color:var(--mish-mint,#63d7e3)}
.inner-intelligence .ii-flag.is-approved::before{background:var(--mish-mint,#63d7e3);transform:none}
.inner-intelligence .ii-rule{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 10px;margin:0;font:400 var(--mish-step-small,.875rem)/1.6 var(--mish-font-body,Montserrat,sans-serif);color:var(--mish-body,#ded7ea);max-width:none}
.inner-intelligence .ii-rule span:last-child{flex:1 1 16em}

/* Approval cards: the draft's status, then the gate with its simulated button */
.inner-intelligence .ii-status{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin:0;padding:4px 9px;border:1px dashed var(--mish-edge,#89929e);border-radius:var(--mish-radius-field,2px);font:500 var(--mish-step-label,.75rem)/1.3 var(--mish-font-mono,'JetBrains Mono',ui-monospace,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--mish-muted,#c1b4d0);max-width:none}
.inner-intelligence .ii-status::before{content:'';flex:none;width:6px;height:6px;background:currentColor}
.inner-intelligence .ii-status.is-approved{border-style:solid;border-color:var(--mish-mint,#63d7e3);color:var(--mish-mint,#63d7e3)}
.inner-intelligence .ii-gate-spec{margin:0}
.inner-intelligence .ii-gate-spec>div{display:grid;grid-template-columns:7.4em minmax(0,1fr);gap:10px;padding:7px 0;border-top:1px solid var(--mish-rule,#35414a)}
.inner-intelligence .ii-gate-spec>div:last-child{border-bottom:1px solid var(--mish-rule,#35414a)}
.inner-intelligence .ii-gate-spec dt{font:500 var(--mish-step-label,.75rem)/1.7 var(--mish-font-mono,'JetBrains Mono',ui-monospace,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--mish-dim,#b2a1c6)}
.inner-intelligence .ii-gate-spec dd{margin:0;font:400 var(--mish-step-small,.875rem)/1.6 var(--mish-font-body,Montserrat,sans-serif);color:var(--mish-body,#ded7ea)}
.inner-intelligence .ii-gate{display:grid;justify-items:start;gap:12px;padding:14px 16px 16px;background:var(--mish-lift,#302047);border-left:2px solid var(--mish-brass,#ffb16b);border-radius:0 4px 4px 0}
.inner-intelligence .ii-ch.is-approved .ii-gate{border-left-color:var(--mish-mint,#63d7e3)}
.inner-intelligence .ii-gate-s{margin:0;font:600 var(--mish-step-body,1rem)/1.45 var(--mish-font-body,Montserrat,sans-serif);color:var(--mish-light,#fbf7ff);max-width:none}
.inner-intelligence .ii-gate-s.is-approved{color:var(--mish-mint,#63d7e3)}
.inner-intelligence .ii-gate-b[hidden]{display:none}

/* Step 08: the notice Sam gets, drawn as a message */
.inner-intelligence .ii-sms{align-self:flex-start;margin:0;padding:10px 13px 11px;max-width:36ch;background:var(--mish-lift,#302047);border:1px solid var(--mish-rule,#35414a);border-radius:12px 12px 12px 3px;font:400 var(--mish-step-small,.875rem)/1.5 var(--mish-font-body,Montserrat,sans-serif);color:var(--mish-light,#fbf7ff)}
.inner-intelligence .ii-sms-k{display:block;margin-bottom:4px;font:500 .6875rem/1.3 var(--mish-font-mono,'JetBrains Mono',ui-monospace,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--mish-dim,#b2a1c6)}

/* Step 10: the invoice */
.inner-intelligence .ii-inv{width:100%;border-collapse:collapse;font:400 var(--mish-step-small,.875rem)/1.45 var(--mish-font-body,Montserrat,sans-serif)}
.inner-intelligence .ii-inv tr{border-top:1px solid var(--mish-rule,#35414a)}
.inner-intelligence .ii-inv th{padding:7px 10px 7px 0;text-align:left;font-weight:400;color:var(--mish-body,#ded7ea)}
.inner-intelligence .ii-inv td{padding:7px 0;text-align:right;white-space:nowrap;font:500 .8125rem/1.5 var(--mish-font-mono,'JetBrains Mono',ui-monospace,monospace);color:var(--mish-light,#fbf7ff);font-variant-numeric:tabular-nums}
.inner-intelligence .ii-inv-total{border-top:1px solid var(--mish-edge,#89929e)}
.inner-intelligence .ii-inv-total th{font-weight:600;color:var(--mish-light,#fbf7ff)}
.inner-intelligence .ii-inv-total td{color:var(--mish-mint,#63d7e3)}

/* The finale: a diamond written in the phrase, filling in row by row as the reader arrives. Decorative and hidden
   from assistive technology; the module writes it to fit the width, so it never scrolls sideways. */
.inner-intelligence .ii-finale{display:flex;justify-content:center}
.inner-intelligence .ii-ascii{width:100%;margin:0;overflow:hidden;white-space:pre;text-align:center;font:500 clamp(11px,.6rem + .25vw,13px)/1.45 var(--mish-font-mono,'JetBrains Mono',ui-monospace,monospace);letter-spacing:0;color:var(--mish-dim,#b2a1c6);max-width:none;clip-path:inset(0 0 calc((1 - var(--tp,1)) * 100%) 0)}
.inner-intelligence .ii-ascii b{font-weight:600;color:var(--mish-mint,#63d7e3)}

/* After the story: the agreed examples every version is checked against */
.inner-intelligence .ii-eval{display:flex;flex-direction:column;gap:12px;margin-top:var(--mish-space-8,64px);padding:22px clamp(16px,2vw,24px) 24px;background:var(--mish-abyss,#030405);border:1px solid var(--mish-rule,#35414a);border-radius:var(--mish-radius-panel,6px)}
.inner-intelligence .ii-eval-k{margin:0;font:500 var(--mish-step-label,.75rem)/1.4 var(--mish-font-mono,'JetBrains Mono',ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--mish-mint,#63d7e3);max-width:none}
.inner-intelligence .ii-ph{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.inner-intelligence .ii-ph-t{flex:1 1 100%;margin:0 0 2px;font:600 clamp(1.0625rem,.98rem + .35vw,1.3125rem)/1.25 var(--mish-font-display,Montserrat,sans-serif);letter-spacing:-.02em;color:var(--mish-light,#fbf7ff);text-wrap:balance}
.inner-intelligence .ii-ph-d{margin:0;max-width:60ch;font:400 var(--mish-step-small,.875rem)/1.6 var(--mish-font-body,Montserrat,sans-serif);color:var(--mish-muted,#c1b4d0)}
.inner-intelligence .ii-cases{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin:4px 0 0;padding:0;list-style:none}
.inner-intelligence .ii-case{position:relative;display:flex;flex-direction:column;gap:10px;margin:0;padding:16px;background:var(--mish-lift,#302047);border-radius:4px}
.inner-intelligence .ii-case::before{content:'';position:absolute;left:0;right:0;top:0;height:var(--mish-cable,2px);border-radius:4px 4px 0 0;background:var(--mish-mint,#63d7e3)}
.inner-intelligence .ii-case-k{margin:0;font:500 var(--mish-step-label,.75rem)/1.4 var(--mish-font-mono,'JetBrains Mono',ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--mish-muted,#c1b4d0);max-width:none}
.inner-intelligence .ii-case-q{margin:0;padding-left:10px;border-left:2px solid var(--mish-edge,#89929e);font:400 var(--mish-step-small,.875rem)/1.6 var(--mish-font-body,Montserrat,sans-serif);color:var(--mish-light,#fbf7ff);max-width:none}
.inner-intelligence .ii-case-when{display:block;margin-top:2px;color:var(--mish-muted,#c1b4d0)}
.inner-intelligence .ii-case-d{margin:0}
.inner-intelligence .ii-case-d>div{display:grid;grid-template-columns:6.2em minmax(0,1fr);gap:10px;padding:8px 0;border-top:1px solid var(--mish-rule,#35414a)}
.inner-intelligence .ii-case-d dt{font:500 var(--mish-step-label,.75rem)/1.7 var(--mish-font-mono,'JetBrains Mono',ui-monospace,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--mish-dim,#b2a1c6)}
.inner-intelligence .ii-case-d dd{margin:0;font:400 var(--mish-step-small,.875rem)/1.6 var(--mish-font-body,Montserrat,sans-serif);color:var(--mish-body,#ded7ea)}
@media (min-width:640px) and (max-width:1099px){
  .inner-intelligence .ii-case{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);grid-template-areas:"k d" "q d";grid-template-rows:auto 1fr;gap:10px 24px;align-items:start}
  .inner-intelligence .ii-case-k{grid-area:k}
  .inner-intelligence .ii-case-q{grid-area:q}
  .inner-intelligence .ii-case-d{grid-area:d}
  .inner-intelligence .ii-case-d>div:first-child{border-top:0;padding-top:0}
}
@media (min-width:1100px){.inner-intelligence .ii-cases{grid-template-columns:repeat(3,minmax(0,1fr))}}
.inner-intelligence .ii-fix dt{color:var(--mish-brass,#ffb16b)}
.inner-intelligence .ii-fix dd{padding-left:8px;border-left:2px solid var(--mish-brass,#ffb16b)}
.inner-intelligence .ii-res{display:inline-flex;align-items:center;gap:5px;margin:0 6px 2px 0;padding:1px 7px 1px 5px;border:1px solid currentColor;border-radius:var(--mish-radius-field,2px);font:500 var(--mish-step-label,.75rem)/1.4 var(--mish-font-mono,'JetBrains Mono',ui-monospace,monospace);letter-spacing:.06em;text-transform:uppercase;vertical-align:1px;white-space:nowrap}
.inner-intelligence .ii-res svg{flex:none;width:12px;height:12px}
.inner-intelligence .ii-res svg path{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.inner-intelligence .ii-res--pass{color:var(--mish-mint,#63d7e3)}
.inner-intelligence .ii-res--fail{color:var(--mish-light,#fbf7ff);border-style:dashed}
.inner-intelligence .ii-sum{margin:0;font:400 var(--mish-step-body,1rem)/1.6 var(--mish-font-body,Montserrat,sans-serif);color:var(--mish-light,#fbf7ff);max-width:72ch}
.inner-intelligence .ii-where{margin-top:4px;max-width:none}
.inner-intelligence .ii-where .ii-skill{padding:1px 6px;font-size:.78rem;vertical-align:1px}
.inner-intelligence .ii-instant,.inner-intelligence .ii-instant *,.inner-intelligence .ii-instant *::before,.inner-intelligence .ii-instant *::after{transition:none!important}

/* ---------- Paper sections ---------- */
.inner-intelligence .mish-read+.mish-read{border-top:1px solid var(--mish-paper-rule,#d8cde4)}
.inner-intelligence .ii-aside-link{margin:var(--mish-space-3,12px) 0 0;max-width:none}
.inner-intelligence .mish-read-main>.mish-note+.mish-rows{margin-top:var(--mish-space-5,24px)}
.inner-intelligence .ii-sample-list{display:grid;margin:var(--mish-space-3,12px) 0 0;padding:0;list-style:none}
.inner-intelligence .ii-sample-list>li{margin:0;padding:14px 0 16px;border-top:1px solid var(--mish-paper-rule,#d8cde4)}
.inner-intelligence .ii-sample-list>li:last-child{padding-bottom:0}
.inner-intelligence .ii-sample{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;min-height:32px;padding:4px 0;color:var(--mish-ink,#251637);text-decoration:none}
.inner-intelligence .ii-sample-n{font:600 var(--mish-step-body,1rem)/1.3 var(--mish-font-display,Montserrat,sans-serif);letter-spacing:-.01em;text-decoration:underline;text-decoration-color:var(--mish-edge,#9883af);text-decoration-thickness:1px;text-underline-offset:5px;transition:color var(--mish-dur-1,120ms) ease,text-decoration-color var(--mish-dur-1,120ms) ease}
.inner-intelligence .ii-sample-i{font:500 var(--mish-step-label,.75rem)/1.3 var(--mish-font-mono,'JetBrains Mono',ui-monospace,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--mish-ink-muted,#62536f)}
.inner-intelligence .ii-sample:hover .ii-sample-n{color:var(--mish-teal,#006274);text-decoration-color:var(--mish-teal,#006274)}
.inner-intelligence .mish-rows .ii-sample-list p{margin:4px 0 0;font:400 var(--mish-step-small,.875rem)/1.65 var(--mish-font-body,Montserrat,sans-serif);color:var(--mish-ink-muted,#62536f);max-width:64ch}
.inner-intelligence .ii-sample-list .ii-skill{padding:1px 6px;font-size:.78rem;vertical-align:1px}
.inner-intelligence .ii-checks{margin:0;padding:0;list-style:none;border-top:1px solid var(--mish-ink,#251637)}
.inner-intelligence .ii-checks li{display:grid;grid-template-columns:8px minmax(0,1fr);gap:16px;margin:0;padding:16px 0;border-bottom:1px solid var(--mish-paper-rule,#d8cde4);font:400 var(--mish-step-body,1rem)/1.6 var(--mish-font-body,Montserrat,sans-serif);color:var(--mish-ink,#251637)}
.inner-intelligence .ii-checks li::before{content:'';width:8px;height:8px;margin-top:.55em;background:var(--mish-teal,#006274)}
.inner-intelligence .ii-first{margin-top:var(--mish-space-6,32px)}
.inner-intelligence .ii-first .mish-text{margin-top:var(--mish-space-3,12px)}
.inner-intelligence .ii-stop .mish-text{font-size:var(--mish-step-lead,1.125rem);line-height:1.6}
.inner-intelligence .ii-stop-spec{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));margin-top:var(--mish-space-6,32px)}
.inner-intelligence .ii-stop-spec>div{padding-bottom:var(--mish-space-3,12px)}

/* ---------- Closing band ---------- */
.inner-intelligence .ii-close{padding:var(--mish-section,clamp(56px,8vw,112px)) var(--mish-gutter,clamp(16px,4vw,56px))}
.inner-intelligence .ii-close-in{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--mish-space-6,32px) var(--mish-space-8,64px);max-width:var(--mish-max,1320px);margin:0 auto}
.inner-intelligence .ii-close-copy{flex:1 1 32rem;min-width:0}
.inner-intelligence .ii-close-p{margin:var(--mish-space-4,16px) 0 0;font:400 var(--mish-step-body,1rem)/1.7 var(--mish-font-body,Montserrat,sans-serif);color:var(--mish-body,#ded7ea);max-width:56ch}
.inner-intelligence .ii-close-contact{margin:var(--mish-space-4,16px) 0 0;font:400 var(--mish-step-small,.875rem)/1.9 var(--mish-font-body,Montserrat,sans-serif);color:var(--mish-muted,#c1b4d0);max-width:none}
.inner-intelligence .ii-close-contact .mish-link{white-space:nowrap}

/* ---------- Phones ---------- */
@media (max-width:519px){
  .inner-intelligence .ii-story{--ii-spine:22px;column-gap:10px}
  .inner-intelligence .ii-spine-track{height:96px}
  .inner-intelligence .ii-art{max-height:170px}
  .inner-intelligence .ii-card-h{padding:10px 12px;gap:10px}
  .inner-intelligence .ii-card-n{width:30px;height:30px}
  .inner-intelligence .ii-card-in{padding:0 12px}
  .inner-intelligence .ii-card-in::before,.inner-intelligence .ii-card-f::before{content:none}
  .inner-intelligence .ii-card-f{padding:10px 12px 12px}
  .inner-intelligence .ii-fields th[scope="row"]{padding-left:2px;letter-spacing:.04em}
  .inner-intelligence .ii-mail{padding:12px 12px 14px}
  .inner-intelligence .ii-mail-h dt{width:5.6em}
  .inner-intelligence .ii-case-d>div,.inner-intelligence .ii-facts>div,.inner-intelligence .ii-gate-spec>div{grid-template-columns:5.8em minmax(0,1fr)}
}

/* Reduced motion and Pause motion: the module shows the story whole, and nothing moves. Colour fades stay. */
@media (prefers-reduced-motion:reduce){
  .inner-intelligence .ii-card-body,.inner-intelligence .ii-art path,.inner-intelligence .ii-conf i::after{transition:none!important}
}
:root[data-motion="paused"] .inner-intelligence .ii-card-body,:root[data-motion="paused"] .inner-intelligence .ii-art path,
:root[data-motion="paused"] .inner-intelligence .ii-conf i::after{transition:none!important}
@media (forced-colors:active){
  .inner-intelligence .ii-card,.inner-intelligence .ii-eval,.inner-intelligence .ii-case,.inner-intelligence .ii-ico,.inner-intelligence .ii-card-n{border:1px solid CanvasText}
  .inner-intelligence .ii-art path{stroke:CanvasText}
  .inner-intelligence .ii-art :is(.f,.fw){fill:none}
  .inner-intelligence .ii-spine-fill,.inner-intelligence .ii-spine-dot,.inner-intelligence .ii-card::before{forced-color-adjust:none;background:CanvasText}
  /* Source phrases keep the page's text colour (a <mark> here turned black on black), and the one being read uses
     the system highlight pair. */
  .inner-intelligence .ii-mail .ii-src{color:CanvasText;background:Canvas}
  .inner-intelligence .ii-mail .ii-src.is-lit{forced-color-adjust:none;background:Highlight;color:HighlightText}
  .inner-intelligence .ii-flag::before{forced-color-adjust:none;background:CanvasText}
}