/* AI Collab illustrations (ac-ill-*): before and after panels, product mock-ups, hover-linked charts.
   Same rules as the diagram kit: ambient loops only (transform, opacity, stroke-dashoffset), no blur filters,
   no scroll reveals, a still finished frame under reduced motion, loops paused off-screen (illustrations.js).
   Import after components.css and diagrams.css. */
.ac-ill{margin:0;padding:var(--card-pad);}
.ac-ill__bar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px;}
.ac-ill__toggle{display:inline-flex;padding:4px;border:1px solid var(--ac-glass-border);border-radius:var(--r-pill);background:rgba(255,255,255,.05);}
.ac-ill__toggle button{min-height:34px;padding:0 16px;border:0;border-radius:var(--r-pill);background:transparent;color:rgba(255,255,255,.9);font-family:var(--ac-font-body);font-size:var(--fs-sm);font-weight:700;cursor:pointer;transition:background .2s,color .2s;}
.ac-ill__toggle button[aria-pressed="true"]{background:var(--ac-primary);color:var(--ac-canvas);}
.ac-ill__toggle button:focus-visible{outline:2px solid var(--ac-focus);outline-offset:3px;}
.ac-ill__tag{color:var(--ac-primary);font-family:var(--ac-font-mono);font-weight:600;font-size:var(--fs-2xs);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;}
.ac-ill__state{display:block;}
.ac-ill__head{display:flex;align-items:center;gap:10px;margin:0 0 14px;color:#fff;font-family:var(--ac-font-display);font-size:var(--fs-md);font-weight:600;line-height:1.2;}
.ac-ill__badge{display:inline-flex;line-height:1;align-items:center;min-height:24px;padding:0 10px;border-radius:var(--r-pill);font-family:var(--ac-font-mono);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;flex:none;}
.ac-ill__badge--before{border:1px solid rgba(255,122,103,.6);background:rgba(255,122,103,.12);color:var(--ac-action);}
.ac-ill__badge--after{border:1px solid rgba(55,214,206,.6);background:rgba(55,214,206,.14);color:var(--ac-primary);}
.ac-ill__cap{margin:16px 0 0;color:rgba(255,255,255,.9);font-size:var(--fs-md);line-height:1.55;}
.ac-ill__cap b{color:var(--ac-primary);font-weight:700;}
.ac-ill.is-js .ac-ill__state{display:none;}
.ac-ill.is-js[data-view="today"] .ac-ill__state[data-state="today"],
.ac-ill.is-js[data-view="with"] .ac-ill__state[data-state="with"]{display:block;animation:illIn .35s ease both;}
.ac-ill:not(.is-js) .ac-ill__toggle{display:none;}
.ac-ill:not(.is-js) .ac-ill__state[data-state="today"]{display:none;}
@keyframes illIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.ac-ill svg{display:block;width:100%;height:auto;overflow:visible;}
.ac-ill .dg-m{display:none;}
.ac-ill.is-paused *{animation-play-state:paused!important;}

/* SVG tiles and markers */
.il-tile{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.22);stroke-width:1;}
.il-tile--aqua{fill:rgba(55,214,206,.12);stroke:rgba(55,214,206,.55);}
.il-tile--hub{fill:rgba(55,214,206,.22);stroke:var(--ac-primary);stroke-width:1.6;}
.il-ico{fill:none;stroke:var(--ac-primary);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.il-t{fill:#fff;font-family:var(--ac-font-body);font-size:14px;font-weight:600;}
.il-t--s{fill:rgba(255,255,255,.9);font-size:11px;font-weight:500;}
.il-t--mid{text-anchor:middle;}
.il-mono{fill:var(--ac-primary);font-family:var(--ac-font-mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;}
.il-mono--coral{fill:var(--ac-action);}
.il-link{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1.3;stroke-dasharray:4 5;}
.il-x{fill:none;stroke:var(--ac-action);stroke-width:2;stroke-linecap:round;}
.il-xbg{fill:var(--ac-canvas);stroke:var(--ac-action);stroke-width:1.2;}
.il-flow{fill:none;stroke:var(--ac-primary);stroke-opacity:.7;stroke-width:1.5;stroke-dasharray:3 6;animation:dgFlow 2.4s linear infinite;}
.il-dot{fill:var(--ac-primary);}
.il-ring{fill:none;stroke:var(--ac-primary);stroke-width:1.2;transform-box:fill-box;transform-origin:center;animation:ilRing 2.8s ease-out infinite;}
.il-ring.il-d2{animation-delay:1.4s;}
@keyframes ilRing{0%{transform:scale(.9);opacity:.6;}100%{transform:scale(1.9);opacity:0;}}

/* HTML mock-ups */
.il-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
.il-col{padding:12px;border:1px solid var(--ac-glass-border);border-radius:var(--r-md);background:rgba(255,255,255,.04);}
.il-col__h{display:flex;align-items:center;gap:8px;margin-bottom:10px;color:#fff;font-size:var(--fs-xs);font-weight:700;}
.il-av{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(55,214,206,.16);border:1px solid rgba(55,214,206,.4);color:var(--ac-primary);font-family:var(--ac-font-display);font-size:var(--fs-2xs);font-weight:800;flex:0 0 auto;}
.il-doc{padding:8px 10px;margin-top:8px;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:rgba(255,255,255,.04);color:var(--ac-ink);font-size:var(--fs-xs);line-height:1.45;}
.il-doc small{display:block;margin-top:3px;color:rgba(255,255,255,.9);font-size:11px;}
.il-doc--warn{border-color:rgba(255,122,103,.6);background:rgba(255,122,103,.08);}
.il-doc--warn small{color:var(--ac-action);}
.il-note{margin-top:12px;padding:9px 12px;border:1px solid rgba(255,122,103,.5);border-radius:var(--r-sm);background:rgba(255,122,103,.08);color:var(--ac-action);font-size:var(--fs-xs);font-weight:600;}
.il-panel{border:1px solid var(--ac-glass-border);border-radius:var(--r-md);background:rgba(255,255,255,.04);}
.il-panel__h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.1);color:#fff;font-size:var(--fs-sm);font-weight:700;}
.il-panel__h small{color:rgba(255,255,255,.9);font-weight:500;}
.il-avs{display:flex;gap:4px;}
.il-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px;}
.il-skill{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-sm);background:rgba(255,255,255,.04);}
.il-skill b{display:block;color:#fff;font-size:var(--fs-sm);}
.il-skill small{display:block;color:rgba(255,255,255,.9);font-size:11px;}
.il-btn{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border:1px solid rgba(55,214,206,.5);border-radius:var(--r-sm);color:var(--ac-primary);font-size:11px;font-weight:700;}
.il-foot{padding:10px 14px;border-top:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.9);font-size:11px;}
.il-line{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08);}
.il-line:last-child{border-bottom:0;}
.il-dotk{width:10px;height:10px;margin-top:5px;border-radius:50%;background:var(--ac-primary);}
.il-dotk--amber{background:rgba(255,255,255,.55);}
.il-dotk--red{background:var(--ac-action);}
.il-line small{display:block;color:var(--ac-primary);font-family:var(--ac-font-mono);font-size:var(--fs-2xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;}
.il-line span{color:var(--ac-ink);font-size:var(--fs-md);line-height:1.45;}
.il-line--bad span{color:var(--ac-action);font-weight:600;}
.il-rep{padding:6px 14px 4px;}
.il-rep__row{display:grid;grid-template-columns:22px minmax(0,1fr);gap:10px;padding:9px 0;color:var(--ac-ink);font-size:var(--fs-sm);line-height:1.45;}
.il-rep__row i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;border:1px solid rgba(55,214,206,.6);color:var(--ac-primary);font-style:normal;font-size:11px;font-weight:800;}
.il-use{padding:12px 14px 14px;border-top:1px solid rgba(255,255,255,.1);}
.il-use__t{margin:0 0 8px;color:var(--ac-primary);font-family:var(--ac-font-mono);font-size:var(--fs-2xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;}
.il-use__r{display:grid;grid-template-columns:96px minmax(0,1fr) 34px;gap:10px;align-items:center;margin-top:7px;color:rgba(255,255,255,.9);font-size:var(--fs-xs);}
.il-use__r em{font-style:normal;text-align:right;font-family:var(--ac-font-mono);}
.il-bar{height:5px;border-radius:3px;background:rgba(255,255,255,.1);overflow:hidden;}
.il-bar i{display:block;height:100%;border-radius:3px;background:var(--ac-primary);transform-origin:left;animation:ilGrow 1.1s cubic-bezier(.5,0,.2,1) both;}
.il-bar .w100{transform:scaleX(1);}.il-bar .w70{transform:scaleX(.7);}.il-bar .w52{transform:scaleX(.52);}.il-bar .w30{transform:scaleX(.3);}.il-bar .w12{transform:scaleX(.12);}
@keyframes ilGrow{from{transform:scaleX(0);}}
.il-chip{display:inline-flex;align-items:center;min-height:22px;padding:0 9px;border:1px solid rgba(255,255,255,.2);border-radius:var(--r-pill);background:rgba(255,255,255,.05);color:rgba(255,255,255,.9);font-size:11px;font-weight:700;white-space:nowrap;}
.il-rep .il-chip{white-space:normal;padding-block:3px;}
.il-chip--aqua{border-color:rgba(55,214,206,.55);background:rgba(55,214,206,.12);color:var(--ac-primary);}
.il-chip--coral{border-color:rgba(255,122,103,.6);background:rgba(255,122,103,.1);color:var(--ac-action);}
.il-live{display:inline-flex;align-items:center;gap:7px;}
.il-live::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--ac-primary);animation:dgGlow 2.4s ease-in-out infinite;}

/* inbox window */
.il-win{border:1px solid var(--ac-glass-border);border-radius:var(--r-lg);background:rgba(10,22,21,.55);overflow:hidden;}
.il-win__bar{display:flex;align-items:center;gap:7px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.1);}
.il-win__bar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.22);}
.il-win__bar span{margin-left:8px;color:rgba(255,255,255,.9);font-size:var(--fs-xs);}
.il-win__st{display:flex;justify-content:space-between;padding:10px 14px;color:var(--ac-primary);font-family:var(--ac-font-mono);font-size:var(--fs-2xs);font-weight:500;border-bottom:1px solid rgba(255,255,255,.08);}
.il-mail{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.07);}
.il-mail:last-child{border-bottom:0;}
.il-mail b{display:block;color:#fff;font-size:var(--fs-sm);}
.il-mail small{display:block;color:rgba(255,255,255,.9);font-size:var(--fs-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.il-mail .il-chip{animation:ilTag 8s ease-in-out infinite;}
.il-mail:nth-child(3) .il-chip{animation-delay:.6s;}.il-mail:nth-child(4) .il-chip{animation-delay:1.2s;}.il-mail:nth-child(5) .il-chip{animation-delay:1.8s;}.il-mail:nth-child(6) .il-chip{animation-delay:2.4s;}.il-mail:nth-child(7) .il-chip{animation-delay:3s;}
@keyframes ilTag{0%,6%{opacity:.25;}16%,92%{opacity:1;}100%{opacity:.25;}}

/* audit: matrix with list, tables */
.il-mx{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px;align-items:start;}
.il-mx--stack{grid-template-columns:1fr;}
.il-sm{color:rgba(255,255,255,.9);font-size:11px;}
.il-rep--wide .il-rep__row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.il-rep--wide .il-rep__row>span:not(.il-chip):not(.il-btn){flex:1 1 180px;min-width:0;}
.il-rep--wide .il-rep__row>i{flex:0 0 20px;}
.il-rank{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.il-rank li{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-sm);background:rgba(255,255,255,.04);transition:border-color .2s,background .2s;}
.il-rank li.is-on,.il-rank li:hover{border-color:rgba(55,214,206,.6);background:rgba(55,214,206,.08);}
.il-rank b{color:#fff;font-size:var(--fs-sm);}
.il-rank small{display:block;color:rgba(255,255,255,.9);font-size:11px;}
.il-n{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(55,214,206,.18);border:1px solid var(--ac-primary);color:var(--ac-primary);font-family:var(--ac-font-display);font-size:12px;font-weight:800;}
.il-n--goal{background:var(--ac-action);border-color:var(--ac-action);color:var(--ac-canvas);}
.il-dotg{cursor:pointer;outline:none;}
.il-dotg:focus-visible circle{stroke:#fff;stroke-width:2;}
.il-dotg.is-on circle{fill:rgba(55,214,206,.45);}
.il-phases{display:grid;gap:14px;}
.il-phase{padding:18px 20px;border:1px solid var(--ac-glass-border);border-radius:var(--r-lg);background:rgba(255,255,255,.04);}
.il-phase__h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.il-phase__h b{color:var(--ac-primary);font-family:var(--ac-font-display);font-size:var(--fs-lg);}
.il-phase p{margin:4px 0 0;color:rgba(255,255,255,.9);font-size:var(--fs-sm);}
.il-builds{list-style:none;margin:12px 0 0;padding:12px 0 0;border-top:1px solid rgba(255,255,255,.1);display:grid;gap:10px;}
.il-builds li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:baseline;color:var(--ac-ink);font-size:var(--fs-sm);}
.il-builds li span:first-child{color:var(--ac-primary);font-family:var(--ac-font-display);font-weight:800;}
.il-builds small{color:var(--ac-primary);font-family:var(--ac-font-mono);font-size:var(--fs-2xs);font-weight:500;}
.il-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);}
.il-table th{padding:10px 12px;text-align:left;color:var(--ac-primary);font-family:var(--ac-font-mono);font-size:var(--fs-2xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.14);}
.il-table td{padding:11px 12px;color:var(--ac-ink);border-bottom:1px solid rgba(255,255,255,.07);}
.il-table tr:last-child td{border-bottom:0;}
.il-table .tot td{color:var(--ac-primary);font-weight:700;border-top:1px solid rgba(55,214,206,.5);}
.il-scroll{overflow-x:auto;}

/* compare terminal */
.il-term{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.il-term__p{border:1px solid var(--ac-glass-border);border-radius:var(--r-md);background:rgba(10,22,21,.55);min-height:300px;}
.il-term__h{display:flex;align-items:center;justify-content:flex-start;gap:8px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.1);color:var(--ac-primary);font-family:var(--ac-font-mono);font-size:var(--fs-2xs);font-weight:500;letter-spacing:.06em;}
.il-term__b{padding:14px;color:var(--ac-ink);font-size:var(--fs-sm);line-height:1.55;}
.il-term__b p{margin:0 0 10px;font-size:var(--fs-sm);}
.il-prompt{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:14px;padding:12px 14px;border:1px solid var(--ac-glass-border);border-radius:var(--r-md);background:rgba(255,255,255,.04);color:var(--ac-ink);font-family:var(--ac-font-mono);font-size:var(--fs-sm);font-weight:500;}


.il-term.is-run .rs{animation:illIn .4s ease both;}
.il-term.is-run .rs:nth-child(2){animation-delay:.5s;}.il-term.is-run .rs:nth-child(3){animation-delay:1s;}.il-term.is-run .rs:nth-child(4){animation-delay:1.5s;}.il-term.is-run .rs:nth-child(5){animation-delay:2s;}.il-term.is-run .rs:nth-child(6){animation-delay:2.5s;}
.il-term:not(.is-js) .rs{opacity:1;transform:none;}

/* ladder */
.il-ladder{display:grid;gap:10px;}
.il-step{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-md);background:rgba(255,255,255,.04);}
.il-step b{display:block;color:#fff;font-size:var(--fs-sm);}
.il-step small{color:rgba(255,255,255,.9);font-size:var(--fs-xs);}
.il-step--on{border-color:rgba(55,214,206,.6);background:rgba(55,214,206,.1);}
.il-step--goal{border-color:rgba(255,122,103,.6);}
.il-flowline{position:relative;height:2px;margin:-6px 0 -6px 16px;width:2px;background:repeating-linear-gradient(var(--ac-primary) 0 3px,transparent 3px 8px);opacity:.6;}

/* lifecycle cards */
.il-path{display:grid;grid-template-columns:1fr 54px 1fr 54px 1fr;align-items:stretch;}
.il-pc{padding:22px;border:1px solid var(--ac-glass-border);border-radius:var(--r-xl);background:rgba(255,255,255,.04);text-align:left;}
.il-pc__s{color:var(--ac-primary);font-family:var(--ac-font-mono);font-size:var(--fs-2xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;}
.il-pc b{display:block;margin-top:6px;color:#fff;font-family:var(--ac-font-display);font-size:var(--h-subcard);}
.il-pc__p{margin-top:14px;color:var(--ac-primary);font-family:var(--ac-font-display);font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.02em;}
.il-pc small{display:block;margin-top:4px;color:rgba(255,255,255,.9);font-size:var(--fs-sm);}
.il-arrow{align-self:center;height:2px;background:repeating-linear-gradient(90deg,var(--ac-primary) 0 4px,transparent 4px 10px);opacity:.7;animation:ilArrow 1.6s linear infinite;background-size:20px 2px;}
@keyframes ilArrow{to{background-position:20px 0;}}

@media(pointer:coarse){.ac-ill__toggle button{min-height:44px;}}
@media(max-width:940px){.il-cols{grid-template-columns:repeat(2,minmax(0,1fr));}.il-mx{grid-template-columns:1fr;}}
@media(max-width:760px){
  .ac-ill .dg-d{display:none;}.ac-ill .dg-m{display:block;}
  .il-term{grid-template-columns:1fr;}
  .il-grid2{grid-template-columns:1fr;}
  .il-skill{grid-template-columns:28px minmax(0,1fr);row-gap:10px;}   /* phones: button drops under the text so names don't wrap word by word (Rod 24 Oct) */
  .il-skill .il-btn{grid-column:2;justify-self:start;}
  .il-path{grid-template-columns:1fr;}
  .il-arrow{width:2px;height:28px;margin:0 auto;background:repeating-linear-gradient(var(--ac-primary) 0 4px,transparent 4px 10px);animation:none;}
  .ac-ill__bar{flex-wrap:wrap;}
}
@media(prefers-reduced-motion:reduce){
  .ac-ill *,.il-term *,.il-win *{animation:none!important;}
  .il-term .rs{opacity:1;transform:none;}
}

/* the demo's replay button is the standard coral button (components.css .ac-btn), pushed to the right */
.il-prompt .ac-btn{margin-left:auto;}

/* Before and After share one grid cell, so the panel always keeps the taller state's height and the copy beside it
   never moves when it flips (Rod 24 Oct). The inactive state is hidden with visibility, which also hides it from
   screen readers and the tab order. */
.ac-ill[data-ill].is-js{display:grid;grid-template-columns:minmax(0,1fr);}
.ac-ill[data-ill].is-js>.ac-ill__bar{grid-row:1;grid-column:1;}
.ac-ill[data-ill].is-js>.ac-ill__state{display:block;grid-row:2;grid-column:1;visibility:hidden;}
.ac-ill[data-ill].is-js[data-view="today"]>.ac-ill__state[data-state="today"],
.ac-ill[data-ill].is-js[data-view="with"]>.ac-ill__state[data-state="with"]{visibility:visible;}

/* Wide panels: a diagram is drawn at about its natural size, never stretched to fill the panel, so its labels stay
   near card-text size (Rod 24 Oct: the knowledge diagram's chips were drawn at nearly twice their size). */
.dg-d--capped svg{display:block;width:100%;max-width:600px;margin:0 auto;}