/* Explore: patient doors and the session list (the player lives on session.html) */
/* arriving with a case hash (from a session's "All sessions" link): skip the picker flash,
   JS takes over once the manifest loads and choose() sets the real hidden attributes */
html.preselect #pagehead,html.preselect #step1{display:none}
.pagehead.slim .wrap{padding-top:clamp(28px,4vw,56px);padding-bottom:clamp(14px,2vw,22px)}
.pagehead.slim h1{font-size:clamp(2rem,4.2vw,3.2rem)}
.pagehead.slim .lede{margin-top:12px}
.steplabel{font:700 14px var(--sans);color:var(--blue-d);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.steplabel::before{content:"";width:28px;height:1.5px;background:var(--blue)}
#step2 #repick{margin-bottom:22px}
#h-step1,#h-step2{font-size:clamp(1.5rem,2.6vw,2.1rem);color:var(--ink)}
#h-step1::before,#h-step2::before{width:36px}
#step2{scroll-margin-top:84px}

.pdoors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,2vw,22px)}
.pdoors.loading .pdoor.skel{min-height:158px;border-color:var(--mist);pointer-events:none;
  background:linear-gradient(100deg,var(--ice) 40%,var(--ice2) 50%,var(--ice) 60%);
  background-size:250% 100%;animation:skel 1.4s ease-in-out infinite}
@keyframes skel{0%{background-position:100% 0}100%{background-position:0 0}}
.pdoor{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:24px 24px 22px;border-radius:26px;
  border:1.5px solid var(--mist);background:var(--white);text-align:left;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s}
.pdoor:hover{transform:translateY(-3px);box-shadow:0 16px 36px -18px rgba(23,60,120,.3)}
.pdoor[aria-pressed="true"]{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-wash)}
.pdoor svg{margin-bottom:8px;transition:transform .45s var(--ease)}
.pdoor:hover svg{transform:rotate(-4deg)}
.pdoor .t{display:flex;flex-direction:column;gap:4px}
.pdoor strong{font:600 1.25rem/1.15 var(--display);color:var(--ink)}
.pdoor .case{font-style:italic;color:var(--muted);font-size:15px}
.pdoor .n{font-size:14px;color:var(--blue-d);font-weight:700;margin-top:8px}
@media (max-width:760px){.pdoors{grid-template-columns:1fr}
  .pdoor{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:16px;padding:16px 18px}
  .pdoor svg{margin:0}.pdoor .t{flex:1;min-width:0}}

.sfilters{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}
.sfield-wrap{position:relative;flex:1;min-width:180px}
.sfield-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.sfield{width:100%;border:1px solid transparent;border-radius:999px;background:var(--ice);
  padding:13px 18px 13px 44px;font:15px var(--sans);color:var(--ink);outline:none;
  transition:background .2s ease,border-color .2s ease,box-shadow .2s ease;box-sizing:border-box}
.sfield::placeholder{color:var(--muted)}
.sfield:hover{background:var(--ice2)}
.sfield:focus-visible{background:var(--white);border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-wash)}
.ftoggle{flex:none;border:0;background:var(--ice2);border-radius:999px;padding:4px;cursor:pointer;
  transition:background .2s ease}
.ftoggle:hover{background:var(--mist)}
.ftoggle-inner{display:inline-flex;align-items:center;gap:8px;background:var(--white);color:var(--text);
  font:600 14px var(--sans);padding:9px 18px;border-radius:999px;white-space:nowrap;
  box-shadow:0 1px 2px rgba(22,32,46,.06),0 1px 1px rgba(22,32,46,.04);transition:box-shadow .2s ease}
.ftoggle-inner svg{color:var(--blue)}
.ftoggle[aria-expanded="true"] .ftoggle-inner{color:var(--blue-d);box-shadow:inset 0 0 0 1.5px var(--blue)}
.loadmore{display:flex;margin:18px auto 0;border:0;background:var(--blue-wash);color:var(--blue);
  padding:13px 28px;border-radius:999px;font-weight:600;transition:background .18s ease,transform .12s ease-out}
.loadmore:hover{background:#DCEAFF}
.loadmore:active{transform:scale(.97);background:#CFE1FE}
.ctrsf{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--mist);border-radius:999px;
  padding:6px 16px;font-size:13.5px}
.ctrsf span{color:var(--muted);font-weight:700;letter-spacing:.03em}
.ctrsf input{width:44px;border:0;background:none;font:700 15px var(--sans);color:var(--ink);
  text-align:center;-moz-appearance:textfield}
.ctrsf input::-webkit-outer-spin-button,.ctrsf input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ctrsf input::placeholder{color:var(--muted);font-weight:400}
.nomatch{padding:36px 0;text-align:center;color:var(--muted);font-size:15px}

.sfacets{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;margin-top:16px}
.sfacets[hidden]{display:none}
.loadmore[hidden]{display:none}
.facet{display:inline-flex;align-items:center;gap:8px}
.flabel{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--muted);text-transform:uppercase}
.fpills{display:inline-flex;flex-wrap:wrap;gap:6px}
.fpills button{border:1.5px solid var(--mist);background:var(--white);border-radius:999px;white-space:nowrap;
  padding:6px 14px;font:600 13.5px var(--sans);color:var(--text);transition:border-color .2s,background .2s,color .2s}
.fpills button:hover{border-color:#B7CBE8}
.fpills button[aria-pressed="true"]{border-color:var(--blue);background:var(--blue-wash);color:var(--blue-d)}

/* match snippet: replaces the diagnosis line while a search query is active */
.srow .snippet mark{background:var(--blue-wash);color:var(--blue-d);border-radius:3px;padding:0 2px;font-weight:700}
.srow .snippet b{font-weight:600;color:var(--muted)}

/* grouped list card: rows are divider-separated, not individually boxed */
.sessions{background:var(--white);border-radius:22px;overflow:hidden;margin-top:18px;
  border:1px solid rgba(213,227,244,.6);
  box-shadow:0 1px 2px rgba(22,32,46,.05),0 8px 20px rgba(22,32,46,.06),0 24px 48px rgba(22,32,46,.05)}
.srow{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.2fr) auto auto;
  gap:6px 24px;align-items:center;padding:18px 22px;text-decoration:none;color:var(--text);
  background:var(--white);transition:background .15s ease}
.srow:not(:first-child)::before{content:"";position:absolute;top:0;left:22px;right:22px;height:1px;background:var(--ice2)}
.srow:hover{background:var(--ice)}
.srow:active{background:var(--ice2)}
.srow svg{color:var(--muted);transition:transform .3s var(--ease),color .2s ease}
.srow:hover svg{transform:translateX(4px);color:var(--blue)}
.srow > span:first-child b{font-family:var(--display);font-size:1.05rem;color:var(--ink);font-weight:700;letter-spacing:-.01em}
.srow small{display:block;color:var(--muted);font-size:13.5px;margin-top:2px}
.srow .dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:6px;vertical-align:middle}
.srow .dot.okt{background:var(--ok)}.srow .dot.not{background:var(--no)}
.srow .mod b{font-family:inherit;font-size:inherit;letter-spacing:normal}
.srow .sc{display:flex;align-items:baseline;gap:4px;font-variant-numeric:tabular-nums;justify-self:end}
.srow .sc{font:700 1.4rem var(--display);color:var(--ink)}
.srow .sc span{font:400 .78rem var(--sans);color:var(--muted)}
@media (max-width:700px){.srow{grid-template-columns:1fr auto}.srow .mod{grid-column:1/-1;order:3}.srow>svg{display:none}}
.okt{color:var(--ok);font-weight:700}.not{color:var(--no);font-weight:700}
.itnote{font-size:14px;color:var(--muted);margin:18px 0 0}

/* the picker keeps air under it, then fades out when a patient is chosen */
#step1{padding-block:4px 56px;
  transition:opacity .2s cubic-bezier(0.23,1,0.32,1),transform .2s cubic-bezier(0.23,1,0.32,1)}
#step1.out{opacity:0;transform:translateY(-6px)}
#pagehead{transition:opacity .2s cubic-bezier(0.23,1,0.32,1),transform .2s cubic-bezier(0.23,1,0.32,1)}
#pagehead.out{opacity:0;transform:translateY(-6px)}
#repick{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;border:0;background:none;padding:0;
  cursor:pointer;font:700 15px var(--sans);color:var(--blue-d)}
#repick svg{transition:transform .3s var(--ease)}
#repick:hover svg{transform:translateX(-3px)}

/* session rows fade in once a patient is chosen; delay is set per row in explore.js */
.sessions .srow{opacity:0;transform:translateY(8px)}
.sessions.in .srow{opacity:1;transform:none;
  transition:opacity .22s cubic-bezier(0.23,1,0.32,1),transform .22s cubic-bezier(0.23,1,0.32,1),background .15s ease}
@media (prefers-reduced-motion:reduce){
  .sessions .srow{transform:none}
  .sessions.in .srow{transition:opacity .2s ease}
}

@media (prefers-reduced-motion:reduce){
  #step1,#pagehead{transition:opacity .15s ease}
  #step1.out,#pagehead.out{transform:none}
}