/* Slide review panel (slides.js). Uses the dashboard's theme variables, so light and dark mode follow style.css. */
.sl-caveat { background: var(--warn-soft); color: var(--warn); border-radius: 8px; padding: 8px 12px; font-size: 14.5px; max-width: 90ch; }
.sl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.sl-card { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: inherit; transition: border-color .15s; }
.sl-card:hover { border-color: var(--hema); }
.sl-thumb { background: #fff; border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; display: grid; place-items: center; border: 1px solid var(--rule); }
.sl-thumb img { max-width: 100%; max-height: 100%; filter: url(#sl-gamma); }
.sl-chips { gap: 6px; }

.sl-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .sl-wrap { grid-template-columns: 1fr; } }
.sl-stage { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sl-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sl-tools label { display: inline-flex; gap: 6px; align-items: center; color: var(--ink2); }
.sl-tools input[type="range"] { width: 90px; }
.sl-canvas-wrap { position: relative; border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; background: var(--sheet2); }
#sl-canvas { display: block; width: 100%; height: min(66vh, 720px); cursor: grab; touch-action: none; }
#sl-canvas:active { cursor: grabbing; }
.sl-legend { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 8px; align-items: center; background: var(--sheet); border: 1px solid var(--rule);
  border-radius: 8px; padding: 4px 10px; }
.sl-legend i { display: inline-block; width: 90px; height: 10px; border-radius: 3px; border: 1px solid var(--rule); }

.sl-side { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sl-filter { gap: 6px; }
.sl-g { border: 1px solid var(--rule); cursor: pointer; }
.sl-g.on { border-color: var(--gc); color: var(--gc); background: var(--sheet); box-shadow: inset 3px 0 0 var(--gc); }
.sl-g:disabled { opacity: .4; cursor: default; }
.sl-list { max-height: min(66vh, 720px); overflow: auto; border: 1px solid var(--rule); border-radius: var(--r); background: var(--sheet); }
.sl-item { display: flex; gap: 10px; width: 100%; text-align: left; padding: 9px 12px; border: 0; border-bottom: 1px solid var(--rule); background: transparent;
  cursor: pointer; border-left: 4px solid var(--gc); }
.sl-item:hover { background: var(--sheet2); }
.sl-item.on { background: var(--hema-soft); }
.sl-it { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sl-r { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sl-k { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--gc, var(--hema)); color: #fff;
  font-size: 13px; font-weight: 700; }

.sl-detail { margin-top: 16px; border-top: 4px solid var(--gc); }
.sl-why { font-size: 17px; margin: 4px 0 12px; }
.sl-imgs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.sl-imgs figure { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.sl-imgwrap { position: relative; background: #fff; border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; aspect-ratio: 1; }
.sl-imgwrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sl-img.enh { filter: url(#sl-gamma); }
.sl-sal { mix-blend-mode: multiply; pointer-events: none; }
.sl-pbox { position: absolute; border: 2px dashed var(--gc); border-radius: 2px; }
.sl-imgs figcaption { color: var(--muted); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sl-imgs figcaption input[type="range"] { width: 80px; }
.sl-ev { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-top: 10px; }
.sl-ev h3 { font-size: 15.5px; margin: 8px 0; }
.sl-bar { display: grid; grid-template-columns: minmax(110px, 1.2fr) 2fr 48px; gap: 8px; align-items: center; font-size: 14.5px; margin: 3px 0; }
.sl-bar i { display: block; height: 10px; background: var(--track); border-radius: 4px; overflow: hidden; }
.sl-bar b { display: block; height: 100%; background: var(--gc, var(--hema)); border-radius: 4px; }
.sl-bar .num { text-align: right; }
.sl-qc { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.sl-qc td { padding: 4px 6px; border-bottom: 1px solid var(--rule); }
.sl-fb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
.sl-fb input[type="text"] { flex: 1; min-width: 180px; padding: 6px 10px; border: 1px solid var(--rule); border-radius: 8px; background: var(--sheet); }
.sl-fbb.on { background: var(--hema); color: var(--sheet); border-color: var(--hema); }

/* cases: list sections and the slide strip above the viewer (one click switches the slide in place) */
.sl-case-sec { margin-top: 22px; }
.sl-lab { font-weight: 700; letter-spacing: .02em; }
.sl-case-h { font-size: 18px; margin: 0 0 10px; color: var(--ink); }
.sl-case { display: flex; flex-direction: column; gap: 8px; margin: 2px 0 12px; }
.sl-case-head { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.sl-case-head b { font-size: 16px; }
.sl-case-head .btn { padding: 4px 12px; }
.sl-strip { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.sl-sc { flex: none; width: 200px; display: flex; gap: 8px; align-items: center; padding: 5px 9px 5px 5px; border: 1px solid var(--rule);
  border-radius: 10px; background: var(--sheet); color: inherit; text-align: left; cursor: pointer; scroll-snap-align: start; font: inherit; }
.sl-sc:hover { border-color: var(--hema); }
.sl-sc:focus-visible { outline: 2px solid var(--hema); outline-offset: 2px; }
.sl-sc.on { border-color: var(--hema); box-shadow: inset 0 0 0 2px var(--hema); background: var(--hema-soft); }
.sl-sc-img { flex: none; width: 72px; display: grid; place-items: center; aspect-ratio: 4 / 3; background: #fff; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden; }
.sl-sc-img img { max-width: 100%; max-height: 100%; filter: url(#sl-gamma); }
.sl-sc-tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.sl-sc-t { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.sl-sc-t .chip { padding: 0 7px; font-size: 12px; }
.sl-sc-s { font-size: 12.5px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sl-sc-bar { display: block; height: 4px; background: var(--track); border-radius: 2px; overflow: hidden; }
.sl-sc-bar b { display: block; height: 100%; background: var(--good); }
.sl-busy { position: absolute; left: 10px; top: 10px; background: var(--sheet); border: 1px solid var(--rule); border-radius: 8px; padding: 3px 10px; color: var(--muted); }
@media (max-width: 600px) { .sl-sc { width: 168px; } .sl-sc-img { width: 56px; } }