/* /insights/: the hub for Research, Blog, News, Charts and Facts (site/insights/index.html), and the
   /research/ index, which shows each analysis on one wide card. The research previews, the newest posts,
   stories, charts and facts and the hero's counts are generated by ops/build_insights.py; their motion is
   site/design/pages/insights.js. Layout only; tokens from ka.css. */

/* hero: title on the left, the contents card on the right from 961px */
.ins-hero{padding-bottom:clamp(40px,6vw,72px)}
.ins-sub{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0;max-width:none}
.ins-sub-t{font-size:var(--fs-sm);color:var(--mut)}
@media (pointer:coarse){.ins-sub .btn.small{min-height:44px}}  /* a full-size touch target on phones */
@media (min-width:961px){.ins-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,23rem);gap:64px;align-items:end}}
@media (max-width:960px){.ins-hero-grid .ii{margin-top:32px;max-width:32rem}}
.ii{padding:14px 10px 6px}
.ii-k{margin:2px 12px 6px;font:700 var(--fs-xs)/1.25 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.ii-list{list-style:none;padding:0}
.ii-row{display:grid;grid-template-columns:2.1rem minmax(0,1fr) auto 8px;align-items:center;column-gap:10px;min-height:66px;padding:10px 12px;border-radius:14px;color:inherit;text-decoration:none;background:linear-gradient(90deg,var(--tint-2),var(--tint) 60%) no-repeat 0 0/0% 100%;transition:background-size var(--dur-ui) var(--ease-out),background-color var(--dur-press) var(--ease-ui);-webkit-tap-highlight-color:transparent}
.ii-list li{position:relative}
.ii-list li+li::before{content:"";position:absolute;left:12px;right:12px;top:0;border-top:1px solid var(--line);pointer-events:none}
.ii-row:hover{color:inherit;background-size:100% 100%}
.ii-row:active{background-color:var(--tint-2);background-size:100% 100%}
.ii-row:focus-visible{outline-offset:-2px}
.ii-row::after{content:"";width:8px;height:14px;background:var(--blue);opacity:.7;-webkit-mask:var(--chev) center/contain no-repeat;mask:var(--chev) center/contain no-repeat;rotate:90deg;transition:translate var(--dur-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){.ii-row:hover::after{translate:0 3px;opacity:1}}
.ii-n{font:700 var(--fs-xs)/1 var(--sans);letter-spacing:.06em;color:var(--blue)}
.ii-t{display:grid;gap:2px;min-width:0}
.ii-t b{font:600 var(--fs-lg)/1.2 var(--disp);letter-spacing:-.01em;color:var(--ink)}
.ii-t span{font-size:13.5px;line-height:1.35;color:var(--mut)}
.ii-c{font-size:12.5px;color:var(--mut);white-space:nowrap;text-align:right}
.ii-c b{display:block;font:700 var(--fs-xl)/1 var(--disp);color:var(--ink);font-variant-numeric:tabular-nums}

/* sections: numbered heads, the Blog section on a white band so the three read as separate parts */
.ins-sec{padding:clamp(64px,8vw,104px) 0}
.ins-hero+.ins-sec{padding-top:clamp(24px,4vw,48px)}
.ins-alt{background:var(--surface);border-block:1px solid var(--line)}
.ins-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 40px;margin-bottom:clamp(24px,3vw,36px)}
.ins-head .lede{margin-bottom:0}
.ins-head>a.more{flex:none;margin-bottom:4px}
.ins-n{display:inline-grid;place-items:center;min-width:30px;height:22px;margin-right:10px;padding:0 6px;border-radius:6px;background:var(--tint-2);color:var(--blue);font:700 12.5px/1 var(--sans);letter-spacing:.04em;vertical-align:1px}
@media (max-width:760px){.ins-head{flex-direction:column;align-items:flex-start}}

/* research: the analyses, each with a live preview drawn from its data. On the hub, where AI tools fit and
   the TEAM explorer run across; parts one and two of Where healthcare AI has proof sit side by side, and part
   three runs across under them. On /research/ each one is wide (.ix-list), its text beside its preview from
   901px. */
.ix-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.ix-grid>.ix-wide{grid-column:1/-1}
.ix-list{display:grid;gap:clamp(20px,2.4vw,28px)}
@media (max-width:900px){.ix-grid{grid-template-columns:1fr}}
@media (min-width:901px){
  a.ix-card.ix-wide{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto auto auto 1fr;column-gap:clamp(28px,4vw,52px);padding:clamp(28px,3vw,40px)}
  .ix-wide>.ix-k{grid-area:1/1}
  .ix-wide>.ix-h{grid-area:2/1}
  .ix-wide>.ix-p{grid-area:3/1}
  .ix-wide>.ix-foot{grid-area:4/1;align-self:end;padding-top:20px}
  .ix-wide>:is(.ix-team,.em,.ot,.nb){grid-area:1/2/5/3;align-self:center;margin:0}
  .ix-list .ix-h{font-size:clamp(26px,2.6vw,32px);letter-spacing:-.02em;margin-bottom:12px}
  .ix-list .ix-p{font-size:var(--fs-base)}
}
.rx-sec{padding-bottom:clamp(64px,8vw,104px)}
a.ix-card{display:flex;flex-direction:column;padding:26px 26px 20px;color:inherit;text-decoration:none}
.ix-card:hover{color:inherit}
.ix-k{font:700 var(--fs-xs)/1.25 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:10px}
.ix-h{font-size:var(--fs-2xl);margin-bottom:8px}
.ix-p{font-size:var(--fs-ui);line-height:1.6;color:var(--body)}
.ix-team,.em,.ot,.nb{margin:20px 0 18px;padding:16px 16px 12px;border-radius:14px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
/* every card's foot: the facts, then the action, on their own lines, so cards side by side line up */
.ix-foot{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:auto;font-size:var(--fs-sm);color:var(--mut)}
.ix-go{display:inline-flex;align-items:center;gap:6px;font:600 var(--fs-ui)/1.2 var(--sans);color:var(--blue)}
.ix-go::after{content:"\2192";content:"\2192" / "";transition:translate var(--dur-hover) var(--ease-ui)}
@media (hover:hover) and (pointer:fine){.ix-card:hover .ix-go::after{translate:3px 0}}
@media (max-width:600px){.ix-card{padding:20px 18px 16px}.ix-team,.em,.ot,.nb{padding:14px 12px 10px}}

/* TEAM preview: the /team-report/ strips, with one example hospital's five stays in blue */
.ix-ex{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;min-height:1.5em;margin-bottom:10px;font-size:var(--fs-sm);line-height:1.45;color:var(--body);max-width:none}
.ix-ex-k{align-self:center;padding:3px 8px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--tint-line);color:var(--blue);font:700 12.5px/1.2 var(--sans);letter-spacing:.04em}
.ix-ex-n{font-weight:600;color:var(--ink)}
.ix-ex-h{display:inline-block}
.ix-row+.ix-row{margin-top:6px}
.ix-lab{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 10px;max-width:none;font-size:13.5px;line-height:1.35;color:var(--mut)}
.ix-lab>span:first-child{font-weight:600;color:var(--ink)}
.ix-v{color:var(--blue);font-weight:700;font-variant-numeric:tabular-nums}
.ix-typ{font-variant-numeric:tabular-nums}
.ix-strip{position:relative;margin-top:3px}
.ix-strip .mf-strip{height:24px;margin-top:0}
.ix-dot{position:absolute;left:var(--x);top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--blue2);box-shadow:0 0 0 2.5px var(--bg),var(--sh-mark)}
.ix-team .mf-axis{margin-top:6px}
.ix-key{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px;font-size:12.5px;color:var(--mut);max-width:none}
.ix-key span{display:inline-flex;align-items:center;gap:7px}
.ix-key i{width:9px;height:9px;border-radius:50%;background:var(--data-dim)}
.ix-key i.s{width:10px;height:10px;background:var(--blue2)}
.ix-key i.m{width:2px;height:12px;border-radius:0;background:var(--ink)}
@media (max-width:420px){.ix-typ{display:none}}

/* evidence map preview: each area at its evidence (across) and momentum (up), sized by how ready it
   is to deploy, colored by verdict as in the story (Adopt --d1, Pilot --d2, Watch --d3, Hold --d4);
   the key and the names list say each verdict in words */
.em{position:relative;padding-left:34px}
.em-plot{position:relative;height:clamp(200px,21vw,272px);margin:10px 8px 0 0;border-left:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.em-gx{position:absolute;left:50%;top:0;bottom:0;border-left:1px dashed var(--line-2)}
.em-gy{position:absolute;top:50%;left:0;right:0;border-top:1px dashed var(--line-2)}
.em-m{position:absolute;left:var(--x);top:var(--y);width:0;height:0}
.em-m{--s:var(--d)}
.em-b{position:absolute;left:calc(var(--s) / -2);top:calc(var(--s) / -2);width:var(--s);height:var(--s);border-radius:50%;background:var(--c);box-shadow:0 0 0 2px var(--bg);transition:scale var(--dur-ui) var(--ease-out)}
.v-adopt{--c:var(--d1)}.v-pilot{--c:var(--d2)}.v-watch{--c:var(--d3)}.v-hold{--c:var(--d4)}
.em-t{position:absolute;white-space:nowrap;font:600 12.5px/1.2 var(--sans);color:var(--ink)}
.em-v{display:block;font:700 11px/1.25 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--body)}
.em-lr .em-t{left:calc(var(--d) / 2 + 6px);top:0;translate:0 -50%}
.em-ll .em-t{right:calc(var(--d) / 2 + 6px);top:0;translate:0 -50%}
.em-lt .em-t{right:calc(var(--d) / -2);bottom:calc(var(--d) / 2 + 4px)}
.em-lb .em-t{left:-3em;width:6em;text-align:center;top:calc(var(--d) / 2 + 4px)}
.em-ax{font:700 12.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--mut);max-width:none}
.em-ax-x{margin:8px 8px 0 0;text-align:right}
.em-ax-x::after,.em-ax-y::after{content:" \2192"}
.em-ax-y{position:absolute;left:-26px;bottom:0;writing-mode:vertical-rl;rotate:180deg}
.em-names{display:none}
@media (max-width:600px){
  .em-m{--s:calc(var(--d) * .78 + 4px)}
  .em-t{display:none}
  .em-b{display:grid;place-items:center}
  .em-b::after{content:attr(data-n);font:700 12px/1 var(--sans);color:var(--ink)}
  .em-m:not(.v-hold) .em-b::after{color:var(--surface)}
  .em-names{display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;list-style:none;padding:12px 0 0;margin:10px 0 0;border-top:1px solid var(--line);font-size:13px;line-height:1.35;color:var(--ink)}
  .em-names li{display:grid;grid-template-columns:1.4em minmax(0,1fr)}
  .em-names b{color:var(--blue)}
  .em-names .em-v{display:inline;margin-left:2px;font-size:11px;letter-spacing:.05em}
}
.em-key{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:10px;font-size:12.5px;color:var(--mut);max-width:none}
.em-key span{display:inline-flex;align-items:center;gap:7px}
.em-key i{width:10px;height:10px;border-radius:50%;background:var(--c)}
@media (hover:hover) and (pointer:fine){
  .ix-card:hover .em-b{scale:1.12}
  .ix-card:hover .em-m:nth-child(even) .em-b{transition-delay:40ms}
}

/* three-outcome test preview: six use cases, each outcome scored 1 to 4 as four pips (blue at Moderate
   or better); a use case that clears all three is tinted and tagged */
.ot{padding-bottom:10px}
.ot-row{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr)) 4.2rem;align-items:center;gap:10px;max-width:none;min-height:34px;margin:0 -8px;padding:0 8px;border-radius:9px;font-size:13.5px;line-height:1.25;color:var(--body);transition:background-color 420ms var(--ease-out)}
.ot-row+.ot-row{margin-top:2px}
.ot-head{min-height:26px;font:700 12px/1.2 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--mut)}
.ot-n{font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ot-c{display:flex;gap:3px}
.ot-c i{flex:1;max-width:20px;height:9px;border-radius:3px;background:var(--line)}
.ot-c i.on{background:var(--data-dim)}
.ot-c.ot-ok i.on{background:var(--blue2)}
.ot-tag{font:700 12px/1 var(--sans);letter-spacing:.02em;color:var(--blue);text-align:right}
.ot-pass{background:var(--tint)}
.ot-pass .ot-n{color:var(--blue)}
.ot.ot-wait .ot-pass{background-color:transparent}
.ot.ot-wait .ot-pass .ot-n{color:var(--ink)}
.ot-key{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:10px;font-size:12.5px;color:var(--mut);max-width:none}
.ot-key span{display:inline-flex;align-items:center;gap:3px}
.ot-key span i:last-of-type{margin-right:5px}
.ot-key i{width:12px;height:7px;border-radius:2px;background:var(--line)}
.ot-key i.on{background:var(--blue2)}
.ot-key i.on.w{background:var(--data-dim)}
/* hover (insights.js otestHover()): the four use cases that fall short turn grey, so the two that pass stand
   out while insights.js fills their scores again */
.ot-n{transition:color var(--dur-ui) var(--ease-out)}
.ot-c i{transition:background-color var(--dur-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .ix-test:hover .ot-row:not(.ot-pass):not(.ot-head) .ot-n{color:var(--mut)}
  .ix-test:hover .ot-row:not(.ot-pass) .ot-c i.on{background:var(--data-dim)}
}
@media (max-width:600px){
  .ot-row{grid-template-columns:4.6rem repeat(3,minmax(0,1fr)) 14px;gap:6px;font-size:12px}
  .ot-n{overflow:visible;text-overflow:clip;hyphens:manual}
  .ot-head{font:600 11px/1.2 var(--sans);letter-spacing:0;text-transform:none}
  .ot-head span{display:flex;justify-content:center;white-space:nowrap} /* a label wider than its column overflows evenly into the gaps */
  .ot-n{white-space:normal}
  /* the pass column narrows to a check mark; the head's question and the word stay for screen readers */
  .ot-head .ot-tag,.ot-yes{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .ot-pass .ot-tag::before{content:"";display:block;width:14px;height:14px;background:var(--blue);-webkit-mask:var(--check) center/contain no-repeat;mask:var(--check) center/contain no-repeat}
  .ot-c{gap:2px}
}

/* part two preview: each quoted number, the story's verdict on it, and the bars of what its source measured
   (the story's Fig. 2 to 4 colors: the quote --warm, a plan striped, a measured figure --d2); the pair no
   source could be found for is struck through */
.nb{display:flex;flex-direction:column}
.nb-row{padding:12px 0}
.nb-row:first-child{padding-top:0}
.nb-row:last-child{padding-bottom:2px}
.nb-row+.nb-row{border-top:1px solid var(--line)}
.nb-top{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;margin:0;max-width:none}
.nb-fig{position:relative;font:700 26px/1.05 var(--disp);letter-spacing:-.03em;color:var(--blue);white-space:nowrap;font-variant-numeric:tabular-nums}
.nb-fig.nb-void{color:var(--mut)}
.nb-strike{position:absolute;left:-3px;right:-3px;top:52%;height:2.5px;border-radius:2px;background:var(--warm)}
.nb-what{font:600 13.5px/1.3 var(--sans);color:var(--ink)}
.nb-tag{display:flex;align-items:center;gap:7px;margin:8px 0 9px;font:700 11px/1.2 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--ink);max-width:none}
.nb-tag>i{flex:none;width:8px;height:8px;border-radius:2px;background:var(--warm)}
.nb-tag .nb-ico{flex:none;color:var(--warm)}
.nb-row-none .nb-tag{margin-bottom:0}
.nb-bar{display:grid;grid-template-columns:minmax(0,9.75rem) minmax(0,1fr) 4.4rem;align-items:center;gap:10px;margin:0;max-width:none;font-size:12.5px;line-height:1.3;color:var(--body)}
.nb-bar+.nb-bar{margin-top:6px}
.nb-t{position:relative;height:8px;border-radius:4px;background:var(--grid);overflow:hidden}
.nb-t i{position:absolute;top:0;bottom:0;border-radius:4px;background:var(--d2)}
.nb-plan .nb-t i{background:repeating-linear-gradient(135deg,var(--d2) 0 4px,var(--d4) 4px 7px)}
.nb-quote .nb-t i{background:var(--warm)}
.nb-bar b{font:700 12.5px/1 var(--sans);color:var(--ink);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:600px){
  .nb-bar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l v" "t t";gap:4px 10px}
  .nb-l{grid-area:l}.nb-t{grid-area:t}.nb-bar b{grid-area:v}
  .nb-bar+.nb-bar{margin-top:8px}
}
@media (min-width:901px){
  /* beside part one on the hub, the preview takes the card's spare height and centers each row in its share */
  .ix-grid>.ix-nums:not(.ix-wide)>.nb{flex:1 0 auto}
  .ix-grid>.ix-nums:not(.ix-wide) .nb-row{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
  /* and part one's map takes its own card's spare height when part two's text runs longer */
  .ix-grid>.ix-card:not(.ix-wide):not(.ix-nums)>.em{flex:1 0 auto;display:flex;flex-direction:column}
  .ix-grid>.ix-card:not(.ix-wide):not(.ix-nums)>.em>.em-plot{flex:1 0 auto}
}

/* blog: the newest post as the lead card, the next two beside it */
.ib-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px}
.ib-lead{grid-row:span 2}
@media (max-width:900px){.ib-grid{grid-template-columns:1fr}.ib-lead{grid-row:auto}}
a.ib-card{position:relative;display:flex;flex-direction:column;padding:24px;color:inherit;text-decoration:none;overflow:hidden}
.ib-card:hover{color:inherit}
.ib-lead{--pad:clamp(24px,3vw,36px);padding:var(--pad)}
.ib-lead::before{content:"";position:absolute;z-index:1;inset:0 0 auto;height:4px;background:var(--grad)}
.ib-cover{display:block;height:clamp(120px,13vw,168px);margin:calc(var(--pad) * -1) calc(var(--pad) * -1) 24px;background:linear-gradient(180deg,var(--tint),var(--surface));border-bottom:1px solid var(--line);overflow:hidden}
.ib-cover svg{display:block;width:100%;height:100%}
.ib-cover .c-s{fill:var(--data-dim)}
.ib-cover .c-m{fill:color-mix(in srgb,var(--blue2) 55%,var(--data-dim))}
.ib-cover .c-l{fill:var(--blue2)}
.ib-cover .c-lane{stroke:var(--tint-line);stroke-width:1.5;stroke-dasharray:3 5}
.ib-cover .c-hi{fill:none;stroke:var(--sky);stroke-width:2}
.ib-top{display:flex;align-items:center;gap:14px;margin-bottom:16px;max-width:none}
.ib-date{flex:none;display:grid;place-content:center;width:56px;height:56px;border-radius:14px;background:var(--tint);box-shadow:inset 0 0 0 1px var(--tint-line);text-align:center}
.ib-d{font:700 22px/1 var(--disp);color:var(--blue);font-variant-numeric:tabular-nums}
.ib-my{margin-top:3px;font:600 12.5px/1 var(--sans);color:var(--mut)}
.ib-topic{font:700 var(--fs-xs)/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.ib-h{font-size:var(--fs-xl);line-height:1.3}
.ib-lead .ib-h{font-size:var(--fs-2xl);line-height:1.25}
.ib-dek{margin-top:10px;font-size:var(--fs-ui);line-height:1.6;color:var(--body)}
.ib-lead .ib-dek{margin-top:16px;font-size:var(--fs-lg)}
.ib-open{margin-top:18px;padding-left:16px;border-left:2px solid var(--tint-line);font-size:var(--fs-ui);line-height:1.65;color:var(--body)}
.ib-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px;margin-top:auto;padding-top:20px;max-width:none;font-size:var(--fs-sm);color:var(--mut)}
.ib-by{color:var(--ink);font-weight:600}
.ib-go{display:inline-flex;align-items:center;gap:6px;font:600 var(--fs-ui)/1.2 var(--sans);color:var(--blue)}
.ib-go::after{content:"\2192";content:"\2192" / "";transition:translate var(--dur-hover) var(--ease-ui)}
@media (hover:hover) and (pointer:fine){.ib-card:hover .ib-go::after{translate:3px 0}}
@media (max-width:600px){.ib-card{padding:20px 18px}.ib-lead .ib-dek{font-size:var(--fs-ui)}}

/* news: the five newest stories, numbered, as one wire card */
.in-wire{padding:4px clamp(18px,3vw,32px) 8px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh)}
.in-upd{display:flex;align-items:center;gap:10px;padding:16px 0 14px;font:600 var(--fs-sm)/1.3 var(--sans);color:var(--ink);max-width:none}
.in-live{position:relative;flex:none;width:8px;height:8px;border-radius:50%;background:var(--sky)}
@media (prefers-reduced-motion:no-preference){.in-live::after{content:"";position:absolute;inset:-5px;border-radius:50%;box-shadow:0 0 0 2px var(--sky);opacity:0;animation:in-ping 1.8s var(--ease-out) .6s 3}}
@keyframes in-ping{0%{opacity:.7;scale:.4}100%{opacity:0;scale:1.4}}
.in-list{list-style:none;padding:0}
.in-row{display:grid;grid-template-columns:3.4rem minmax(0,1fr);gap:4px 12px;padding:22px 0;border-top:1px solid var(--line)}
.in-n{font:700 var(--fs-2xl)/1.15 var(--disp);letter-spacing:-.02em;color:var(--blue);font-variant-numeric:tabular-nums}
.in-b{max-width:74ch}
.in-h{font-size:var(--fs-lg);line-height:1.35}
.in-a{color:var(--ink);text-decoration:underline 1px transparent;text-underline-offset:.2em;transition:color var(--dur-hover) var(--ease-ui),text-decoration-color var(--dur-ui) var(--ease-ui)}
.in-a:hover{color:var(--blue);text-decoration-color:currentColor}
.in-src{margin:6px 0;font:600 var(--fs-xs)/1.3 var(--sans);letter-spacing:.02em;color:var(--mut)}
.in-why{font-size:var(--fs-ui);line-height:1.6;color:var(--body)}
.in-why b{color:var(--blue)}
@media (max-width:600px){.in-row{grid-template-columns:2.4rem minmax(0,1fr);padding:18px 0}.in-n{font-size:var(--fs-xl)}.in-h{font-size:17px}}

/* charts and facts: the library's own cards (pages/charts.css draws them, ka-charts.js fills them).
   Four charts in a row from 1000px, two across from 640px; on a phone each chart is a row, its thumb
   beside its title, so the four read as a short list. Facts two across from 640px (the third takes the full row) and three in a row from 900px. */
@media (min-width:1000px){.ic-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}}
.ic-grid .lib-title{font-size:var(--fs-ui);line-height:1.4}
.ic-grid .lib-src{font-size:12.5px}
@media (max-width:639px){
  .ic-grid{gap:12px}
  .ic-grid a.lib-card{flex-direction:row;align-items:center;gap:14px;padding:10px 14px 10px 10px}
  .ic-grid .lib-thumb{flex:0 0 42%;margin:0;padding:8px 10px}
  .ic-grid .lib-body{padding:0}
  .ic-grid .lib-kind{margin-bottom:4px;font-size:var(--fs-xs)}
  .ic-grid .lib-src{display:none}
}
@media (min-width:640px) and (max-width:899px){.if-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.if-grid>li:last-child:nth-child(odd){grid-column:1/-1}}
@media (min-width:900px){.if-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* research: where AI tools fit, by type of organization (/research/ai-tools-by-organization/). The 44
   problems as squares in rows by area, each in the color of the patient data a tool for it needs (the
   story's Fig. 4: --d1 none, --d2 part of the work, --d3 from the start, --d4 no AI tool advised, each
   named in the key with its count). Markup: build_insights.orgs_preview(); the squares pop in through
   data-build, and on hover insights.js counts the ones that need no patient data. */
.ao-pv{margin:20px 0 18px;padding:16px 16px 12px;border-radius:14px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
@media (min-width:901px){.ix-wide>.ao-pv{grid-area:1/2/5/3;align-self:center;margin:0}}
@media (max-width:600px){.ao-pv{padding:14px 12px 10px}}
.ao-pv-row{display:grid;grid-template-columns:minmax(0,13.5rem) minmax(0,1fr);grid-template-areas:"l l" "s s";align-items:center;gap:3px 10px;margin:0;max-width:none}
.ao-pv-row+.ao-pv-row{margin-top:8px}
.ao-pv-l{grid-area:l;font-size:13px;line-height:1.3;font-weight:600;color:var(--ink)}
.ao-pv-sq{grid-area:s;display:flex;flex-wrap:wrap;align-items:center;gap:3px}
.ao-pv-n{display:none}
.ao-pv i{display:block;width:12px;height:12px;border-radius:3px;background:var(--d1)}
.ao-pv i.pv-1{background:var(--d2)}.ao-pv i.pv-2{background:var(--d3)}.ao-pv i.pv-3{background:var(--d4)}
/* the patient-data groups in a row sit a little apart, so they read apart by position as well as by color */
.ao-pv i:not(.pv-1)+i.pv-1,.ao-pv i:not(.pv-2)+i.pv-2,.ao-pv i:not(.pv-3)+i.pv-3{margin-left:5px}
@media (min-width:480px){
  .ao-pv-row{grid-template-columns:minmax(0,12.5rem) auto minmax(0,1fr);grid-template-areas:"l s n"}
  .ao-pv-n{display:block;grid-area:n;font:700 12.5px/1 var(--sans);color:var(--body);font-variant-numeric:tabular-nums}
  .ao-pv-sq{flex-wrap:nowrap}
}
.ao-pv-key{display:flex;flex-wrap:wrap;gap:4px 14px;margin:12px 0 0;padding-top:10px;border-top:1px solid var(--line);font-size:12.5px;color:var(--mut);max-width:none}
.ao-pv-key>span{display:inline-flex;align-items:center;gap:6px;transition:color var(--dur-ui) var(--ease-out)}
.ao-pv-key i{width:10px;height:10px}
.ao-pv-kn{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.ao-pv-key>span:first-child .ao-pv-kn{display:inline-block;min-width:2ch} /* holds the key still while it counts */
/* hover (insights.js orgs()): the problems that need patient data, or have no AI tool advised, turn the
   unselected-data grey and shrink a little, so the ones that need none stand out while insights.js counts them */
.ao-pv i{transition:background-color var(--dur-ui) var(--ease-out),scale var(--dur-ui) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .ix-orgs:hover .ao-pv i:not(.pv-0){background:var(--data-dim)}
  .ix-orgs:hover .ao-pv-key>span:first-child{color:var(--ink)}
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.ix-orgs:hover .ao-pv-sq i:not(.pv-0){scale:.8}}

/* research reports (ops/insights/research.json, written by ops/build_research_piece.py): the lead figure, drawn live
   in thumb mode in the library card's frame (pages/charts.css .lib-thumb), beside the text from 901px */
.ix-rp-fig{margin:20px 0 18px}
.ix-rp-fig .lib-thumb{margin:0}
@media (min-width:901px){.ix-wide>.ix-rp-fig{grid-area:1/2/5/3;align-self:center;margin:0}}