/* orgs.css: /research/ai-tools-by-organization/, on top of story.css (the research-story language: hero,
   contents card, chapters, sticky scenes, step cards, datafig frames). Layout only: every color is a ka.css
   token (DESIGN.md rule 1). Data marks: --d2 for a problem, --data-dim outside the area in focus; for the
   patient data a tool needs, the library's stacked order (Fig. 4's chart spec): --d1 none, --d2 part of the
   work, --d3 from the start, --d4 no AI tool advised, each also named in the key and on the rows. Markup: ops/build_ai_tools_research.py;
   motion and the explorer: orgs.js plus the shared ka-motion hooks. */

.ao-wrap{max-width:1120px;margin:0 auto;padding:0 var(--gutter);box-sizing:border-box}
.ao-figwrap{margin-top:clamp(32px,5vw,56px)}
.ao-figwrap .datafig{max-width:860px}
.ao-lead{max-width:62ch;margin:0 0 18px;font-size:var(--fs-base);line-height:1.65;color:var(--body)}
.ao-nsrc{font-size:var(--fs-sm);color:var(--mut)}

/* ---------- Fig. 1 and Fig. 4: one square per problem (orgs.js draws them at the figure's own width) ---------- */
.uplot{display:block;width:100%;height:auto;overflow:visible}
.uplot .sq{fill:var(--d2);transition:fill var(--dur-enter) var(--ease-ui),stroke var(--dur-ui) var(--ease-ui)}
.uplot .sq.is-dim{fill:var(--data-dim)}
.uplot.show-phi .sq.phi-0{fill:var(--d1)}
.uplot.show-phi .sq.phi-1{fill:var(--d2)}
.uplot.show-phi .sq.phi-2{fill:var(--d3)}
.uplot.show-phi .sq.phi-3{fill:var(--d4)}
.uplot.show-phi .sq.is-dim{fill:var(--grid)}
.uplot text{paint-order:stroke;stroke:var(--surface);stroke-width:3px;stroke-linejoin:round;transition:fill var(--dur-ui) var(--ease-ui)}
.uplot .ul-lab{font:600 13.5px/1 var(--sans);fill:var(--ink)}
.uplot .ul-sub{font:500 12px/1 var(--sans);fill:var(--mut)}
.uplot .ul-n{font:700 12.5px/1 var(--sans);fill:var(--body);font-variant-numeric:tabular-nums}
.uplot .is-dim:is(.ul-lab,.ul-sub,.ul-n){fill:var(--mut)}
.uplot.is-phone .ul-lab{font-size:12.5px}
.uplot.is-phone .ul-n{font-size:12px}
.uplot .ul-set{transition:opacity .4s var(--ease-io)}
.uplot .ul-set.pre,.uplot .ul-set.out{opacity:0}
.ao-key{margin-bottom:6px}
html.js .ao-key li{opacity:1}
.ao-sw{flex:none;display:inline-block;width:11px;height:11px;border-radius:3px;background:var(--d2)}
.ao-sw.is-dim{background:var(--data-dim)}
.ao-sw.phi-none{background:var(--d1)}.ao-sw.phi-part{background:var(--d2)}.ao-sw.phi-full{background:var(--d3)}.ao-sw.phi-out{background:var(--d4)}
/* the scenes without JavaScript: the steps read as plain text and the tables carry the figures */
html:not(.js) .ao-scene .graphic{display:none}
html:not(.js) .ao-scene{grid-template-columns:minmax(0,1fr);max-width:1120px;padding-left:var(--gutter)}
html:not(.js) .ao-scene .steps{padding:0}
html:not(.js) .ao-scene .step{min-height:0;padding:0 0 16px}
@media (max-width:860px){
  .ao-scene .sfig .datafig-body{margin-top:4px}
  .ao-key{gap:2px 12px;font-size:12px}
}

/* ---------- Part one: the six kinds, one card each (name, who, a size, a link to its problems) ---------- */
.ao-kinds{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
@media (max-width:1000px){.ao-kinds{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.ao-kinds{grid-template-columns:minmax(0,1fr);gap:12px}}
.ao-kind{display:flex;flex-direction:column;padding:clamp(18px,2.2vw,24px)}
.ao-kind-i{margin:0 0 8px;font:700 var(--fs-xs)/1 var(--sans);letter-spacing:.06em;color:var(--blue)}
.ao-kind h3{font:600 var(--fs-xl)/1.25 var(--disp);letter-spacing:-.01em;color:var(--ink);margin:0 0 6px}
.ao-kind-who{margin:0 0 14px;font-size:var(--fs-sm);line-height:1.5;color:var(--body)}
.ao-kind-size{margin:0;padding:10px 12px;border-radius:var(--r-sm);background:var(--tint);box-shadow:inset 0 0 0 1px var(--tint-line);font-size:var(--fs-sm);line-height:1.5;color:var(--body)}
.ao-kind-size b{display:block;font:700 clamp(22px,2.4vw,26px)/1.15 var(--disp);letter-spacing:-.02em;color:var(--blue);font-variant-numeric:tabular-nums}
.ao-kind-go{margin-top:auto;padding-top:14px;font-size:var(--fs-sm)}

/* ---------- one number for each kind: six fact cards ---------- */
.ao-nums{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
@media (max-width:1000px){.ao-nums{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.ao-nums{grid-template-columns:minmax(0,1fr);gap:14px}}
.ao-num{display:flex;flex-direction:column;gap:6px;padding:20px 20px 16px;height:100%;box-sizing:border-box}
.ao-num-k{margin:0;font:700 var(--fs-xs)/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.ao-num [data-fact] .kc-brand{display:none}
.ao-num-more{margin-top:auto;padding-top:6px;font-size:var(--fs-sm)}

/* ---------- AI today ---------- */
.ao-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:clamp(24px,4vw,40px)}
@media (max-width:760px){.ao-cols{grid-template-columns:minmax(0,1fr);gap:14px}}
.ao-col{padding:clamp(20px,2.4vw,28px)}
.ao-col h3{font-size:var(--fs-xl);line-height:1.25;margin:0 0 10px}
.ao-col p{font-size:var(--fs-ui);line-height:1.6;color:var(--body);margin:0}
.ao-h3{font-size:var(--fs-2xl);margin:clamp(40px,6vw,64px) 0 14px}
.ao-rules{list-style:none;padding:0;margin:0;display:grid;gap:10px;max-width:820px}
.ao-rules li{padding:12px 16px;border-radius:var(--r-sm);background:var(--surface);box-shadow:inset 3px 0 0 var(--blue2),inset 0 0 0 1px var(--line);font-size:var(--fs-ui);line-height:1.55;color:var(--body)}
.ao-rules b{color:var(--ink)}
.ao-after{max-width:62ch;margin:16px 0 0;font-size:var(--fs-base);line-height:1.65;color:var(--body)}

/* ---------- the jobs ---------- */
.ao-subh{font-size:var(--fs-2xl)}
.ao-jobs{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:1000px){.ao-jobs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.ao-jobs{grid-template-columns:minmax(0,1fr);gap:12px}}
.ao-job{padding:20px 20px 18px}
.ao-job{display:flex;flex-direction:column}
.ao-job .ao-job-check{margin-top:12px;padding:10px 12px;border-radius:var(--r-sm);background:var(--tint);box-shadow:inset 0 0 0 1px var(--tint-line)}
.ao-job-check b{color:var(--ink)}
.ao-job .ao-job-tools{margin-top:auto;padding-top:12px;color:var(--mut)}
.ao-job-tools a{font-weight:600}
.ao-job-n{display:block;margin-bottom:10px;font:700 var(--fs-xs)/1 var(--sans);letter-spacing:.06em;color:var(--blue)}
.ao-job h4{font:600 var(--fs-lg)/1.3 var(--disp);letter-spacing:-.01em;color:var(--ink);margin:0 0 6px}
.ao-job p{font-size:var(--fs-sm);line-height:1.55;color:var(--body);margin:0}

/* ---------- the explorer ---------- */
.ao-pick{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;padding:5px;border-radius:16px;background:var(--tint-2);box-shadow:inset 0 0 0 1px var(--tint-line)}
html:not(.js) .ao-pick,html:not(.js) .ao-count{display:none}
.ao-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:0;border-radius:11px;background:none;color:var(--body);font:600 var(--fs-sm)/1.2 var(--sans);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color var(--dur-hover) var(--ease-ui),background-color var(--dur-hover) var(--ease-ui),box-shadow var(--dur-ui) var(--ease-ui)}
.ao-chip:hover{color:var(--ink);background:color-mix(in srgb,var(--surface) 60%,transparent)}
.ao-chip:active{scale:.985}
.ao-chip[aria-pressed=true]{color:var(--blue);background:var(--surface);box-shadow:var(--sh)}
.ao-chip:focus-visible{outline-offset:-2px}
.ao-chip-n{font-size:12px;font-weight:700;color:var(--mut);font-variant-numeric:tabular-nums}
.ao-chip[aria-pressed=true] .ao-chip-n{color:var(--blue)}
@media (max-width:760px){
  /* one row that scrolls sideways inside itself, so the page keeps its width */
  .ao-pick{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-inline:calc(-1 * var(--gutter));border-radius:0;padding-inline:var(--gutter)}
  .ao-pick::-webkit-scrollbar{display:none}
  .ao-chip{flex:none;white-space:nowrap}
}
.ao-count{min-height:1.5em;margin:0 0 18px;font-size:var(--fs-sm);color:var(--mut)}
.ao-seg{padding:0}
.ao-seg+.ao-seg{margin-top:clamp(40px,6vw,64px)}
html.js .ao-seg+.ao-seg{margin-top:0} /* with JS one shows at a time */
.ao-seg-head{max-width:760px;margin-bottom:18px}
.ao-seg-head h3{font-size:var(--fs-2xl);margin:0 0 6px}
.ao-seg-who{margin:0 0 4px;font-size:var(--fs-ui);color:var(--body)}
.ao-seg-size{margin:0;font-size:var(--fs-sm);line-height:1.5;color:var(--mut)}
.ao-plist{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
@media (max-width:900px){.ao-plist{grid-template-columns:minmax(0,1fr);gap:14px}}
.ao-p{padding:clamp(18px,2.2vw,24px);scroll-margin-top:calc(var(--hdr-h) + 16px)}
.ao-meta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin:0 0 10px;font:700 var(--fs-xs)/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase}
.ao-area{color:var(--blue)}
.ao-phi{display:inline-flex;align-items:center;gap:6px;color:var(--mut);letter-spacing:.04em;text-transform:none;font-weight:600}
.ao-phi::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--d1)}
.ao-phi.phi-part::before{background:var(--d2)}
.ao-phi.phi-full::before{background:var(--d3)}
.ao-phi.phi-out::before{background:var(--d4)}
.ao-pt{font:600 var(--fs-xl)/1.25 var(--disp);letter-spacing:-.01em;color:var(--ink);margin:0 0 4px}
.ao-who{margin:0 0 14px;font-size:var(--fs-sm);color:var(--mut)}
.ao-fig{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;align-items:baseline;padding:12px 14px;border-radius:var(--r-sm);background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.ao-val{margin:0;font:700 clamp(22px,2.4vw,28px)/1.1 var(--disp);letter-spacing:-.02em;color:var(--blue);max-width:9ch;font-variant-numeric:tabular-nums}
.ao-claim{margin:0;font-size:var(--fs-ui);line-height:1.5;color:var(--body)}
@media (max-width:460px){.ao-fig{grid-template-columns:minmax(0,1fr)}.ao-val{max-width:none}}
.ao-src{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--mut)}
.ao-help{margin:14px 0 0;padding:12px 14px;border-radius:var(--r-sm);background:var(--tint);box-shadow:inset 0 0 0 1px var(--tint-line);font-size:var(--fs-ui);line-height:1.55;color:var(--body)}
.ao-help b{color:var(--ink)}
.ao-tools{margin-top:16px}
.ao-tk{margin:0 0 6px;font:700 var(--fs-xs)/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.ao-tools ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.ao-tool{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"n p" "l l" "t t" "a a";gap:2px 12px;padding:10px 12px;border-radius:var(--r-sm);color:inherit;text-decoration:none;box-shadow:inset 0 0 0 1px var(--line);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),box-shadow var(--dur-hover) var(--ease-ui)}
a.ao-tool:hover{color:inherit;background-size:100% 100%;box-shadow:inset 0 0 0 1px var(--tint-line)}
a.ao-tool:active{background-size:100% 100%}
a.ao-tool:focus-visible{outline-offset:2px}
.ao-tn{grid-area:n;font:600 var(--fs-ui)/1.3 var(--sans);color:var(--ink)}
a.ao-tool .ao-tn{color:var(--blue)}
.ao-tp{grid-area:p;font:700 var(--fs-sm)/1.3 var(--sans);color:var(--blue);white-space:nowrap;font-variant-numeric:tabular-nums}
.ao-tl{grid-area:l;font-size:13.5px;line-height:1.45;color:var(--body)}
.ao-tool.is-held{background:var(--bg);box-shadow:inset 0 0 0 1px var(--line-2)}
.ao-tool.is-held .ao-tn{color:var(--ink)}
.ao-tag{grid-area:t;font:600 12.5px/1.4 var(--sans);color:var(--mut)}
.ao-tool.is-held{grid-template-areas:"n n" "t t" "l l" "a a"}
/* a narrow card: the price goes under the name, so the name keeps its line */
@media (max-width:460px){
  .ao-tool{grid-template-columns:minmax(0,1fr);grid-template-areas:"n" "p" "l" "t" "a"}
  .ao-tool.is-held{grid-template-areas:"n" "t" "l" "a"}
}
.ao-ask{grid-area:a;justify-self:start;margin-top:4px;font:600 var(--fs-sm)/1.2 var(--sans);padding:6px 0}
.ao-note{margin:14px 0 0;padding:2px 0 2px 12px;border-left:2px solid var(--tint-line);font-size:var(--fs-sm);line-height:1.55;color:var(--body)}
.ao-method{max-width:70ch;margin:clamp(32px,5vw,48px) 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:var(--fs-sm);line-height:1.6;color:var(--mut)}
@media (prefers-reduced-motion:reduce){.uplot .sq,.uplot text,.uplot .ul-set,.ao-chip,.ao-tool{transition:none!important}}