/* problems.css: the all-problems figure (every problem in the research data, grouped and filtered), placed in
   /blog/ai-tools-without-patient-data/ as Fig. 4. On top of ka.css, post.css and orgs.css (the shared parts of
   a problem card: .ao-fig, .ao-tool, .ao-sw, .ao-pick, .ao-chip). Layout only, every color a ka.css token
   (DESIGN.md rule 1). Data marks follow Fig. 3's stacked order: --d1 no patient data, --d2 part of the work,
   --d3 from the start, --d4 no AI tool advised; dimmed marks are --grid, as in orgs.css.
   Markup: ops/build_ai_tools_research.py (px_html); behavior and motion: problems.js. */

.post-fig-wide{max-width:860px}

/* ---------- search ---------- */
.px-search{margin-top:20px;max-width:560px}
.px-search .px-lab{display:block}
.px-q{width:100%;min-height:48px;padding:0 16px 0 44px;border:1px solid var(--line-2);border-radius:14px;background:var(--surface) no-repeat 16px 50%/18px 18px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  font:500 var(--fs-base)/1.2 var(--sans);color:var(--ink);transition:border-color var(--dur-hover) var(--ease-ui),box-shadow var(--dur-hover) var(--ease-ui)}
.px-q::placeholder{color:var(--mut)}
.px-q:focus{outline:none;border-color:var(--blue2);box-shadow:0 0 0 3px var(--tint-line)}
html:not(.js) .px-search,html:not(.js) .px-hint{display:none}

/* ---------- the map: kinds of organization by area, one square per problem ---------- */
.px-map{display:grid;grid-template-columns:minmax(118px,1.15fr) repeat(6,minmax(0,1fr));margin-top:18px;border-bottom:1px solid var(--line)}
.px-corner{border-bottom:1px solid var(--line)}
.px-col,.px-row{border:0;background:none;color:var(--body);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color var(--dur-hover) var(--ease-ui),background-color var(--dur-hover) var(--ease-ui)}
.px-col{display:flex;align-items:flex-end;justify-content:center;min-height:52px;padding:6px 4px 8px;border-bottom:1px solid var(--line);font:600 12.5px/1.25 var(--sans);text-align:center}
.px-row{display:flex;align-items:center;min-height:56px;padding:6px 10px 6px 0;border-top:1px solid var(--line);font:600 var(--fs-sm)/1.3 var(--sans);text-align:left}
.px-cs,.px-rs{display:none}
.px-col:hover,.px-row:hover{color:var(--blue)}
.px-col[aria-pressed=true],.px-row[aria-pressed=true]{color:var(--blue);background:var(--tint)}
.px-cell{display:flex;flex-wrap:wrap;align-items:center;align-content:center;justify-content:center;gap:5px;min-height:56px;padding:6px 3px;border-top:1px solid var(--line);border-left:1px solid var(--line);transition:background-color var(--dur-ui) var(--ease-ui)}
.px-cell.is-sel{background:var(--tint)}
.px-dot{width:20px;height:20px;padding:0;border:0;border-radius:5px;background:var(--d1);cursor:pointer;transition:background-color var(--dur-ui) var(--ease-ui),box-shadow var(--dur-hover) var(--ease-ui),scale var(--dur-hover) var(--ease-ui)}
.px-dot.phi-part{background:var(--d2)}
.px-dot.phi-full{background:var(--d3)}
.px-dot.phi-out{background:var(--d4)}
.px-dot.is-dim{background:var(--grid)}
.px-dot.is-on{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--blue)}
@media (hover:hover) and (pointer:fine){.px-dot:hover{scale:1.2}}
html.js-motion .px-map.is-wait .px-dot{opacity:0}
@media (max-width:640px){
  /* a phone: short names, the column heads turned on end, smaller squares */
  .px-map{grid-template-columns:68px repeat(6,minmax(0,1fr))}
  .px-cl,.px-rl{display:none}
  .px-cs,.px-rs{display:inline}
  .px-col{min-height:78px;padding:6px 0 8px;font-size:11.5px}
  .px-cs{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}
  .px-row{min-height:46px;padding-right:6px;font-size:11.5px;line-height:1.25}
  .px-cell{min-height:46px;gap:2px;padding:4px 0}
  .px-dot{width:12px;height:12px;border-radius:3px}
}
.px-key{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;padding:0;margin:14px 0 0;font-size:var(--fs-sm);line-height:1.4;color:var(--body)}
.px-key li{display:inline-flex;align-items:center;gap:8px}
.px-kn{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.px-hint{margin:8px 0 0;font-size:var(--fs-sm);color:var(--mut)}

/* ---------- the card, in a panel over the map (a sheet from the bottom on a phone) ---------- */
.px-sheet{width:min(640px,calc(100vw - 32px));max-height:min(80vh,760px);margin:auto;padding:0;border:0;border-radius:var(--r-lg);background:var(--surface);color:var(--body);box-shadow:0 24px 60px rgb(15 23 42/.28)}
.px-sheet::backdrop{background:rgb(15 23 42/.45)}
.px-sheet-in{max-height:inherit;overflow:auto;padding:22px 24px 26px;overscroll-behavior:contain}
.px-close{float:right;min-height:40px;margin:-6px -8px 0 12px;padding:0 12px;border:0;border-radius:10px;background:var(--tint);color:var(--blue);font:600 var(--fs-sm)/1 var(--sans);cursor:pointer}
.px-sheet-m{margin:0 0 6px;font:700 var(--fs-xs)/1.4 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--blue)}
.px-sheet-t{margin:0 0 14px;font:600 var(--fs-xl)/1.25 var(--disp);letter-spacing:-.01em;color:var(--ink)}
.px-sheet-b .ao-who{margin:0 0 12px}
@media (max-width:640px){
  .px-sheet{width:100vw;max-width:100vw;max-height:88vh;margin:auto 0 0;border-radius:20px 20px 0 0}
  .px-sheet-in{padding:18px 16px 28px}
}

/* ---------- group by, show ---------- */
.px-ctl{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.px-lab{margin:0 0 6px;font:700 var(--fs-xs)/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.px .ao-pick{margin:0 0 14px}
@media (max-width:760px){
  /* inside the figure's frame the row scrolls within its own rounded track */
  .px .ao-pick{margin-inline:0;border-radius:14px;padding-inline:5px}
  .px .ao-chip{padding:0 12px}
}
html:not(.js) .px-ctl,html:not(.js) .px-count{display:none}
.px-count{min-height:1.5em;margin:2px 0 0;font-size:var(--fs-sm);color:var(--mut)}

/* ---------- the list ---------- */
.px-list{margin-top:6px}
.px-g{margin-top:22px}
.px-g[hidden]{display:none}
.px-gh{display:flex;align-items:baseline;gap:10px;margin:0 0 8px;font:600 var(--fs-lg)/1.3 var(--disp);letter-spacing:-.01em;color:var(--ink)}
.px-gn{font:700 var(--fs-sm)/1 var(--sans);color:var(--mut);font-variant-numeric:tabular-nums}
.px-ul{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.px-i{border-bottom:1px solid var(--line);scroll-margin-top:calc(var(--hdr-h) + 16px)}
.px-i[hidden]{display:none}
.px-s{display:grid;grid-template-columns:11px minmax(0,1fr) 8px;gap:12px;align-items:start;min-height:44px;padding:12px 6px;list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent;
  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)}
.px-s::-webkit-details-marker{display:none}
.px-s::after{content:"";width:8px;height:14px;margin-top:4px;background:var(--mut);-webkit-mask:var(--chev) center/contain no-repeat;mask:var(--chev) center/contain no-repeat;
  transition:transform var(--dur-ui) var(--ease-ui),translate var(--dur-hover) var(--ease-ui),background-color var(--dur-hover) var(--ease-ui)}
@media (hover:hover) and (pointer:fine){
  .px-s:hover{background-size:100% 100%}
  .px-s:hover::after{translate:2px 0;background:var(--blue)}
}
.px-s:active{background-size:100% 100%}
.px-d[open]>.px-s::after{transform:rotate(90deg)}
.px-s .ao-sw{margin-top:5px}
.px-st{display:grid;gap:3px;min-width:0}
.px-t{font:600 var(--fs-ui)/1.4 var(--sans);color:var(--ink)}
.px-d[open]>.px-s .px-t{color:var(--blue)}
.px-m{display:flex;flex-wrap:wrap;gap:0 6px;font-size:13px;line-height:1.45;color:var(--mut)}
.px-m-phi::before,.px[data-by=phi] .px-m-area::before{content:"\00b7";margin-right:6px}
.px[data-by=area] .px-m-area,.px[data-by=seg] .px-m-seg,.px[data-by=phi] .px-m-phi{display:none}
.px-b{padding:2px 6px 20px 29px}
.px-b .ao-who{margin:0 0 12px}
@media (max-width:520px){
  /* on a phone the two labels stack, so a separator never starts a line */
  .px-m{flex-direction:column}
  .px-m-phi::before,.px[data-by=phi] .px-m-area::before{content:none}
  .px-b{padding-left:6px}
}

.px .datafig-foot{margin-top:18px}
.px .datafig-src{margin-top:2px}
@media (prefers-reduced-motion:reduce){.px-dot,.px-s,.px-s::after{transition:none!important}}
/* the list on demand (the research page): it shows once the reader searches, filters or asks for it */
.px-more-p{margin:4px 0 0}
.px-more{min-height:44px;padding:0 18px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);color:var(--blue);font:600 var(--fs-sm)/1 var(--sans);cursor:pointer}
.px-more[hidden],.px-reset[hidden]{display:none}
.px-reset{min-height:36px;margin:2px 0 0;padding:0 2px;border:0;background:none;color:var(--blue);font:600 var(--fs-sm)/1 var(--sans);cursor:pointer;text-decoration:underline}
html.js .px[data-list=demand]:not(.is-listing) .px-list,
html.js .px[data-list=demand]:not(.is-listing) [id$="-by"],
html.js .px[data-list=demand]:not(.is-listing) [aria-labelledby$="-by"]{display:none}