/* ============================================================================
   Data set pages — /datasets (catalog) and /datasets/<id>
   Version 3.5 · 2026-10-22 (sharp map view: the page draws the map, images and track itself)

   Page bones (header, nav, type, buttons, fields, footer) come from site.css,
   the same rules the static pages carry inline. This file holds only the
   data set components. Colors are tokens only.

   The browser script (datasets.js) finds elements by data-ds-*, data-dl-*,
   data-hud-* attributes, #ds-video, #ds-data, and these classes:
   .ds-list .ds-card-wrap, .chip, .ds-screen, .ds-mark(.on), .ds-fcard(.on),
   .ctrl(.playing), .field(.invalid), .ds-packs, .form-actions,
   and data-ds-view / data-ds-region for the region views.
   Restyle freely; keep the names.
   ========================================================================= */

/* ---------- shared ---------- */
/* footer sits at the bottom on short pages (not found, approval) */
body.ds{min-height:100vh;display:flex;flex-direction:column}
body.ds>main{flex:1;display:flex;flex-direction:column}
.ds-message{flex:1}
.ds-crumbs{font-family:var(--font-display);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:1.4rem;display:flex;flex-wrap:wrap;gap:.2rem .55rem;align-items:center}
.ds-crumbs a{color:var(--muted)}
.ds-crumbs a:hover{color:var(--accent);text-decoration:none}
.ds-crumbs [aria-current]{color:var(--accent-2)}
.ds-draft{background:var(--panel-2);color:var(--text-strong);font-family:var(--font-display);font-size:.85rem;letter-spacing:.04em;padding:.7rem 0;border-bottom:1px solid var(--line)}

/* viewfinder corners: the frame device used on the site's video and figures */
.ds-corners{position:absolute;inset:10px;pointer-events:none;z-index:2}
.ds-corners i{position:absolute;width:18px;height:18px;border-color:var(--text);border-style:solid;opacity:.85}
.ds-corners i:nth-child(1){top:0;left:0;border-width:2px 0 0 2px}
.ds-corners i:nth-child(2){top:0;right:0;border-width:2px 2px 0 0}
.ds-corners i:nth-child(3){bottom:0;left:0;border-width:0 0 2px 2px}
.ds-corners i:nth-child(4){bottom:0;right:0;border-width:0 2px 2px 0}

/* overview: one card with the headline numbers on top and the capture details below.
   On phones the numbers go 2 × 2 and the details fold behind "Capture details" (datasets.js). */
.ds-overview{margin-top:2.4rem;background:var(--bg-0);border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden}
.ds-keyfacts{list-style:none;margin:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
.ds-keyfacts li{display:flex;flex-direction:column;justify-content:space-between;gap:.6rem;padding:1.1rem 1.3rem 1.2rem;box-shadow:1px 0 0 var(--line)}
.ds-keyfacts small{font-family:var(--font-display);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-2)}
.ds-keyfacts b{font-family:var(--font-display);font-weight:400;font-size:clamp(1.5rem,3vw,2rem);line-height:1;color:var(--text-strong);font-variant-numeric:tabular-nums;white-space:nowrap}
.ds-more{border-top:1px solid var(--line);background:var(--bg-1)}
.ds-more summary{display:none}
.ds-specs{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.ds-specs div{min-width:0;padding:.85rem 1.3rem;box-shadow:1px 0 0 var(--line),0 1px 0 var(--line)}
.ds-specs dt{font-family:var(--font-display);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:.2rem}
.ds-specs dd{margin:0;font-size:.92rem;color:var(--text);font-variant-numeric:tabular-nums}
@media (max-width:720px){
  .ds-keyfacts{grid-auto-flow:row;grid-template-columns:1fr 1fr}
  .ds-keyfacts li{padding:1rem 1.1rem;box-shadow:1px 0 0 var(--line),0 1px 0 var(--line)}
  .ds-more{border-top:0}
  .ds-more summary{display:flex;justify-content:space-between;align-items:center;min-height:48px;padding:0 1.1rem;font-family:var(--font-display);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text);cursor:pointer;list-style:none}
  .ds-more summary::-webkit-details-marker{display:none}
  .ds-more summary::after{content:"";width:8px;height:8px;margin-right:4px;border:solid var(--accent);border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg);transition:transform .15s}
  .ds-more[open] summary::after{transform:translateY(2px) rotate(-135deg)}
  .ds-more summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
  .ds-more[open] summary{box-shadow:0 1px 0 var(--line)}
  .ds-specs{grid-template-columns:1fr}
  .ds-specs div{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.7rem 1.1rem;box-shadow:0 1px 0 var(--line)}
  .ds-specs div:last-child{box-shadow:none}
  .ds-specs dt{margin:0;flex:none}
  .ds-specs dd{text-align:right}
}
@media (prefers-reduced-motion:reduce){.ds-more summary::after{transition:none}}

/* ---------- catalog ---------- */
.pp-hero.ds-hero .wrap{max-width:var(--measure)}
.ds-hero .usps{margin-top:2.6rem}
.ds-list{padding:3rem 0 4.5rem}
.ds-filters{display:grid;gap:0;padding:.4rem 1.4rem;background:var(--bg-0);border:1px solid var(--line);border-radius:var(--radius-card);margin-bottom:1.6rem}
.ds-filter{display:grid;grid-template-columns:170px minmax(0,1fr);gap:.4rem 1rem;align-items:center;padding:.9rem 0;border-bottom:1px solid var(--line)}
.ds-filter:last-child{border-bottom:0}
.ds-filter-label{font-family:var(--font-display);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-2)}
.ds-chips{display:flex;flex-wrap:wrap;gap:.45rem}
@media (max-width:640px){
  .ds-filters{padding:.3rem 1rem}
  .ds-filter{grid-template-columns:1fr}
  .ds-chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.25rem;margin-right:-1rem;padding-right:1rem;scrollbar-width:none}
  .ds-chips::-webkit-scrollbar{display:none}
}
.chip{flex:none;display:inline-flex;align-items:center;gap:.45rem;font-family:var(--font-display);font-size:.8rem;letter-spacing:.03em;min-height:36px;padding:0 .9rem;border-radius:18px;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;transition:border-color .15s,background .15s;white-space:nowrap}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--bg-0)}
.chip[disabled]{opacity:.4;cursor:default;border-style:dashed}
.chip[disabled]:hover{border-color:var(--line)}
.chip-n{font-size:.7rem;color:var(--muted);font-variant-numeric:tabular-nums}
.chip[aria-pressed="true"] .chip-n{color:var(--bg-0)}
@media (pointer:coarse){.chip{min-height:44px}}
.ds-count-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem;min-height:40px}
.ds-count{font-family:var(--font-display);font-size:.85rem;letter-spacing:.06em;color:var(--muted)}
.btn-small{padding:.45rem 1rem;font-size:.85rem;min-height:40px}

.ds-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}
.ds-grid-small{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
@media (max-width:420px){.ds-grid,.ds-grid-small{grid-template-columns:1fr}}
.ds-card{display:flex;flex-direction:column;height:100%;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;color:var(--text);transition:border-color .15s}
.ds-card:hover,.ds-card:focus-visible{border-color:var(--accent);text-decoration:none}
.ds-card-img{position:relative;display:block;aspect-ratio:5/3;background:var(--dgm-ink-900);border-bottom:1px solid var(--line);overflow:hidden}
.ds-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.ds-card:hover .ds-card-img img{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){.ds-card-img img{transition:none}.ds-card:hover .ds-card-img img{transform:none}}
.ds-card-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .4s ease}
.ds-card-vid.on{opacity:1}
.ds-card-img .ds-corners{inset:8px}
.ds-card-img .ds-corners i{width:14px;height:14px}
.ds-card-env{position:absolute;left:.75rem;bottom:.7rem;z-index:3;font-family:var(--font-display);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-strong);background:rgba(7,31,33,.72);padding:.2rem .55rem;border-radius:4px}
.ds-badge{position:absolute;top:.75rem;right:.75rem;z-index:3;font-family:var(--font-display);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;padding:.2rem .6rem;border-radius:4px;background:var(--bg-0);color:var(--accent);border:1px solid var(--accent)}
.ds-card-body{display:flex;flex-direction:column;gap:1rem;padding:1.25rem 1.3rem 1.35rem;flex:1}
.ds-card-title{font-family:var(--font-display);font-size:1.1rem;color:var(--text-strong);line-height:1.3;letter-spacing:.01em}
.ds-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.ds-facts>span{background:var(--bg-1);padding:.55rem .7rem;font-family:var(--font-display);font-size:.98rem;color:var(--text-strong);font-variant-numeric:tabular-nums}
.ds-facts small{display:block;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ds-card-meta{font-size:.82rem;color:var(--muted);line-height:1.55;margin-top:auto}
.ds-card-go{font-family:var(--font-display);font-size:.82rem;letter-spacing:.05em;color:var(--accent)}
.ds-empty{padding:3rem 1.5rem;text-align:center;border:1px dashed var(--line);border-radius:var(--radius-card);display:flex;flex-direction:column;align-items:center;gap:1rem;color:var(--muted)}
.ds-close{padding:4.5rem 0 5rem}
.ds-list+.ds-close{padding-top:0}

/* ---------- one data set: hero ---------- */
.ds-hero-tight .wrap{padding-bottom:3rem}
.ds-hero-tight h1{max-width:40ch;text-wrap:balance}

/* ---------- viewer ---------- */
.ds-player-band{padding:3rem 0 3.5rem;background:var(--bg-1)}
.ds-viewer-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:1.1rem}
.ds-viewer-head h2{font-size:clamp(1.3rem,2.4vw,1.6rem);margin:0;max-width:none}
.ds-viewer-head p{font-size:.88rem;color:var(--muted);margin:0}

/* stage: the playthrough (with the data link strip under its timeline), the findings list to
   the right. The list is as tall as the playthrough and scrolls inside. */
.ds-stage{display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"con fl";gap:1.25rem;align-items:stretch}
.ds-console{grid-area:con}
.ds-flist{grid-area:fl;position:relative;min-width:0;min-height:320px}
.ds-flist-in{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden}
.ds-flist-head{padding:1rem 1.1rem .8rem;border-bottom:1px solid var(--line)}
.ds-flist-head h3{margin:0;font-family:var(--font-display);font-weight:400;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-2);display:flex;justify-content:space-between;align-items:baseline}
.ds-flist-head h3 span{font-size:.8rem;letter-spacing:.04em;color:var(--muted);font-variant-numeric:tabular-nums}
.ds-flist-head p{margin:.35rem 0 0;font-size:.8rem;color:var(--muted);line-height:1.45}
.ds-flist .ds-ff-note{margin:0;padding:.6rem 1.1rem;border-bottom:1px solid var(--line);font-size:.8rem}
.ds-flist>.ds-flist-in>.muted{padding:1rem 1.1rem;font-size:.88rem}
@media (max-width:960px){
  .ds-stage{grid-template-columns:1fr;grid-template-areas:"con" "fl"}
  .ds-flist{min-height:0}
  .ds-flist-in{position:static}
}
.ds-console{border:1px solid var(--line);border-radius:var(--radius-card);background:var(--bg-0);overflow:hidden;min-width:0}

/* .ds-screen must wrap the video exactly: the finding box is placed in % of it */
.ds-screen{position:relative;background:var(--dgm-ink-900);border-bottom:1px solid var(--line);overflow:hidden}
/* zoom layer: the video and the full-resolution tiles. Finding boxes and regions sit outside it,
   placed in screen pixels by the script, so their lines stay thin at any zoom. */
.ds-zoom{position:relative;transform-origin:0 0;touch-action:pan-y;cursor:pointer}
.ds-screen.zoomed .ds-zoom{touch-action:none;cursor:grab}
.ds-screen.zoomed .ds-zoom:active{cursor:grabbing}
.ds-boxes{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
/* full-resolution zoom: the current image's tiles, laid exactly over its place in the playthrough */
.ds-hires{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;pointer-events:none}
.ds-hires-img{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.ds-hires-img img{position:absolute;display:block;max-width:none;opacity:0;transition:opacity .2s ease}
.ds-hires-img img.on{opacity:1}
@media (prefers-reduced-motion:reduce){.ds-hires-img img{transition:none}}
.ds-screen video{display:block;width:100%;height:auto;background:var(--dgm-ink-900)}
/* sharp map view: the page draws the map, the images and the track itself over the playthrough */
.ds-maplayer{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.ds-maplayer svg{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.ds-mapimgs{position:absolute;inset:0}
.ds-maptop{position:absolute;left:0;top:0;width:100%;height:100%;z-index:3;pointer-events:none;display:block}
.ds-mapimgs img{position:absolute;left:0;top:0;display:block;max-width:none;transform-origin:0 0}
.ds-mapimgs img.past{filter:brightness(.72)}
.ds-screen.sharpmap video{visibility:hidden}
.ds-mapscale{position:absolute;left:1rem;bottom:.9rem;z-index:2;display:flex;align-items:center;gap:.5rem;pointer-events:none;font-family:var(--font-display);font-size:.7rem;letter-spacing:.04em;color:var(--text)}
.ds-mapscale i{display:block;height:6px;border:2px solid var(--text);border-top:0}
.ds-mapcredit{position:absolute;right:1rem;bottom:.8rem;z-index:2;margin:0;padding:.1rem .4rem;font-size:.66rem;color:var(--text);background:rgba(7,31,33,.75);pointer-events:none}
.ds-screen:fullscreen{display:flex;align-items:center;justify-content:center;background:var(--dgm-ink-900)}
.ds-screen:fullscreen video{max-height:100vh;width:auto;max-width:100%}
.ds-screen:fullscreen .ds-zoom{max-width:100%}
.ds-hud{position:absolute;top:1.15rem;left:2.4rem;right:2.4rem;z-index:3;display:flex;flex-wrap:wrap;gap:.35rem 1.2rem;font-family:var(--font-display);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-strong);pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.6);font-variant-numeric:tabular-nums}
.ds-hud span:first-child{color:var(--accent)}
/* finding boxes: corner brackets in the color of the object type (--c, set by the script) */
.ds-box{--c:var(--accent);--k:32%;position:absolute;pointer-events:auto;cursor:pointer;transition:none;
  background:
    linear-gradient(var(--c),var(--c)) 0 0/var(--k) 2px no-repeat,linear-gradient(var(--c),var(--c)) 0 0/2px var(--k) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0/var(--k) 2px no-repeat,linear-gradient(var(--c),var(--c)) 100% 0/2px var(--k) no-repeat,
    linear-gradient(var(--c),var(--c)) 0 100%/var(--k) 2px no-repeat,linear-gradient(var(--c),var(--c)) 0 100%/2px var(--k) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/var(--k) 2px no-repeat,linear-gradient(var(--c),var(--c)) 100% 100%/2px var(--k) no-repeat}
.ds-box::before{content:"";position:absolute;inset:0;border:1px solid var(--c);opacity:.35}
.ds-box.past{opacity:.5;pointer-events:none}
.ds-box.cur:not(.lead){opacity:.9}
.ds-box:hover{--k:50%}
.ds-box span{position:absolute;left:0;bottom:100%;margin-bottom:3px;white-space:nowrap;font-family:var(--font-display);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;background:var(--c);color:var(--bg-0);padding:.05rem .4rem;border-radius:2px}
.ds-box.lead{z-index:1}
/* warm: a vehicle the thermal image shows as warmer than its surroundings. --warm is data, not an
   action (BRAND-PRECEDENCE.md 4.4). The tag keeps light text on the dark ground for contrast. */
.ds-box.warm{z-index:1}
.ds-box.warm span{background:var(--bg-0);color:var(--text-strong);border-left:3px solid var(--warm);padding-left:.35rem}
/* hover card for a box */
.ds-hcard{position:absolute;z-index:5;max-width:min(260px,70%);padding:.55rem .75rem;border:1px solid var(--line);border-radius:var(--radius-field);background:var(--bg-0);color:var(--text);pointer-events:none;font-size:.78rem;line-height:1.35;box-shadow:none}
.ds-hcard p{margin:0}
.ds-hcard-top{display:flex;align-items:center;gap:.45rem}
.ds-hcard-top i{flex:none;width:10px;height:10px;border-radius:2px}
.ds-hcard-top b{font-weight:400;color:var(--text-strong);font-size:.9rem}
.ds-hcard-top span,.ds-hcard-n,.ds-hcard-ir{font-family:var(--font-display);font-variant-numeric:tabular-nums}
.ds-hcard-top span{margin-left:auto;color:var(--muted)}
.ds-hcard-n{color:var(--accent-2);font-size:.68rem;letter-spacing:.12em}
.ds-hcard-ir{color:var(--text);font-size:.74rem;margin-top:.2rem!important}
/* thermal layer: stills placed over the RGB image (z 2: over the zoom tiles, under the boxes) */
.ds-ir{position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:hidden}
.ds-screen.ir-solid .ds-ir{background:var(--dgm-ink-900)}
.ds-ir-img{position:absolute;left:0;top:0;display:block;max-width:none;transform-origin:0 0}
.ds-irscale{position:absolute;right:2.4rem;bottom:1.3rem;z-index:3;display:flex;align-items:center;gap:.45rem;padding:.3rem .55rem;border-radius:var(--radius-field);background:var(--bg-0);border:1px solid var(--line);font-family:var(--font-display);font-size:.7rem;color:var(--text-strong);font-variant-numeric:tabular-nums;pointer-events:none}
.ds-irscale i{width:72px;height:8px;border-radius:2px;background:linear-gradient(90deg,var(--dgm-ink-900),var(--text-strong))}
.ds-irscale em{font-style:normal;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;font-size:.62rem}
/* Compare: the divider */
.ds-split{position:absolute;top:0;bottom:0;z-index:4;width:32px;margin-left:-16px;cursor:ew-resize;touch-action:none}
.ds-split::before{content:"";position:absolute;left:15px;top:0;bottom:0;width:2px;background:var(--text-strong)}
.ds-split-h{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:0;background:var(--text-strong);display:flex;align-items:center;justify-content:center;cursor:ew-resize;padding:0}
.ds-split-h:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ds-split-tag{position:absolute;top:3.2rem;white-space:nowrap;font-family:var(--font-display);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-strong);background:var(--bg-0);padding:.15rem .45rem;border-radius:2px;pointer-events:none}
.ds-split-tag.l{right:calc(100% - 6px)}
.ds-split-tag.r{left:calc(100% - 6px)}
/* the views bar under the controls */
.ds-irbar{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.2rem;padding:0 1.2rem 1rem}
.ds-irbar > .ds-filter-label{margin-right:-.6rem}
.ds-irmodes .ctrl{font-size:.8rem}
.ds-irmodes .ctrl[aria-pressed="true"]{background:var(--panel-2);border-color:var(--accent-2);color:var(--text-strong);position:relative;z-index:1}
.ds-irop.off{opacity:.55}
.ds-irnote{flex:1 1 100%;margin:0;font-size:.78rem;color:var(--muted)}
@media (max-width:520px){.ds-irbar{padding:0 .8rem .9rem}.ds-irmodes{display:flex;width:100%}.ds-irmodes .ctrl{flex:1;min-width:0;padding:0 .3rem;font-size:.74rem;letter-spacing:.02em}.ds-irop{flex:1 1 100%}.ds-irscale{right:.6rem;bottom:.6rem;gap:.3rem;padding:.2rem .4rem;font-size:.62rem}.ds-irscale i{width:36px;height:6px}.ds-irscale em,.ds-split-tag{display:none}}
.ds-bigplay{position:absolute;left:50%;top:50%;z-index:4;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;border:1.5px solid var(--accent);background:rgba(7,31,33,.6);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,transform .15s}
.ds-bigplay:hover,.ds-bigplay:focus-visible{background:var(--accent);transform:scale(1.05)}
.ds-bigplay:hover path,.ds-bigplay:focus-visible path{fill:var(--bg-0)}

/* timeline: findings above, scrub below */
.ds-scrub{position:relative;height:48px;margin:0}
.ds-track{position:absolute;left:0;right:0;top:30px;height:4px;border-radius:2px;background:var(--line)}
.ds-fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent-2);border-radius:2px}
.ds-marks{position:absolute;left:0;right:0;top:0;height:22px}
.ds-mark{position:absolute;top:0;width:16px;height:22px;margin-left:-8px;padding:0;border:0;background:transparent;cursor:pointer}
.ds-mark::after{content:"";position:absolute;left:4px;top:5px;width:8px;height:8px;background:var(--accent);transform:rotate(45deg)}
.ds-mark:hover::after{background:var(--text-strong)}
.ds-mark.on::after{background:var(--text-strong);box-shadow:0 0 0 2px var(--bg-0),0 0 0 3px var(--accent)}
.ds-range{position:absolute;left:0;right:0;top:22px;width:100%;height:20px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer}
.ds-range::-webkit-slider-runnable-track{height:4px;background:transparent}
.ds-range::-moz-range-track{height:4px;background:transparent}
.ds-range::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-6px;border-radius:50%;background:var(--text-strong);border:2px solid var(--bg-0)}
.ds-range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--text-strong);border:2px solid var(--bg-0)}
.ds-range:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

.ctrl{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-width:44px;min-height:44px;padding:0 .9rem;border-radius:var(--radius-field);border:1px solid var(--line);background:var(--bg-1);color:var(--text);font-family:var(--font-display);font-size:.8rem;letter-spacing:.04em;cursor:pointer;transition:border-color .15s,color .15s}
.ctrl:hover{border-color:var(--accent);color:var(--accent)}
.ctrl[aria-pressed="true"]{border-color:var(--accent-2)}
.ctrl:disabled{opacity:.45;cursor:default;border-color:var(--line);color:var(--text)}
.ctrl[hidden]{display:none}
.ds-pbar .ctrl-select{appearance:none;-webkit-appearance:none;padding-right:2rem;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(-45deg,transparent 50%,currentColor 50%);background-position:right 1rem center,right .7rem center;background-size:.3rem .3rem;background-repeat:no-repeat}
.ctrl-select option{background:var(--bg-1);color:var(--text)}
.ctrl-group{display:inline-flex}
.ctrl-group .ctrl{border-radius:0;font-size:1rem}
.ctrl-group .ctrl:first-child{border-radius:var(--radius-field) 0 0 var(--radius-field)}
.ctrl-group .ctrl:last-child{border-radius:0 var(--radius-field) var(--radius-field) 0}
.ctrl-group .ctrl + .ctrl{margin-left:-1px}
.ctrl-group .ctrl-level{min-width:3.4rem;font-size:.8rem;font-variant-numeric:tabular-nums}
.ctrl .i-pause{display:none}
.ctrl.playing .i-pause{display:block}
.ctrl.playing .i-play{display:none}
.ds-clock{margin:0;white-space:nowrap;font-family:var(--font-display);font-size:.92rem;letter-spacing:.04em;color:var(--text);font-variant-numeric:tabular-nums}
/* findings filter under the player controls: type chips + lowest-confidence slider */
.ds-ffilter{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem 1.6rem;padding:0 1.2rem 1rem}
.ds-ff-types{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.ds-ff-types .ds-filter-label,.ds-ff-conf .ds-filter-label{margin-right:.3rem}
.ds-ffilter .chip[aria-pressed="true"]{background:var(--bg-1);border-color:var(--accent-2);color:var(--text-strong)}
.ds-ffilter .chip[aria-pressed="true"] .chip-n{color:var(--muted)}
.ds-ffilter .chip[aria-pressed="false"]{color:var(--muted);border-style:dashed}
.ds-ff-conf{display:flex;align-items:center;gap:.6rem;margin:0}
.ds-ff-conf input{width:170px;min-height:36px;margin:0;accent-color:var(--accent-2);cursor:pointer}
.ds-ff-conf input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ds-ff-conf output{font-family:var(--font-display);font-size:.85rem;font-variant-numeric:tabular-nums;min-width:2.6rem;color:var(--text-strong)}
.ds-ff-tail{display:flex;align-items:center;gap:.8rem;margin-left:auto}
.ds-ff-count{font-size:.8rem;color:var(--muted);margin:0;font-variant-numeric:tabular-nums}
.ds-ff-note{font-size:.85rem;color:var(--muted);margin:0 0 .8rem}
.ds-ff-warm{flex:1 1 100%}
.ds-ffilter .ds-warmchip[aria-pressed="false"]{border-style:solid;color:var(--text)}
.ds-ffilter .ds-warmchip[aria-pressed="true"]{border-color:var(--warm)}
.ds-warmchip::before,.ds-fcard-warm::before{content:"";flex:none;width:8px;height:8px;border-radius:1px;background:var(--warm)}
.ds-ff-warmn{margin:0 0 0 .4rem;font-size:.8rem;color:var(--muted)}
.ds-fcard-warm{display:flex;align-items:center;gap:.4rem;padding:0 .2rem;font-family:var(--font-display);font-size:.72rem;letter-spacing:.03em;color:var(--text-strong)}
.ds-irbox[aria-pressed="true"]{background:var(--panel-2);border-color:var(--warm);color:var(--text-strong)}
.ds-mark[hidden],.ds-strip li[hidden],.ds-ff-reset[hidden]{display:none}
/* the end of the findings list: when it scrolls into view, the next cards are added */
.ds-strip li.ds-fmore{flex:0 0 1px;min-width:1px;min-height:1px}
@media (max-width:520px){.ds-ffilter{padding:0 .8rem .9rem}.ds-ff-conf{flex:1 1 100%}.ds-ff-conf input{flex:1;width:auto}.ds-ff-tail{margin-left:0}}
@media (max-width:520px){.ctrl{padding:0 .7rem}}

/* region views (multiview): where each region sits in the main frame, and its own stream */
.ds-region{position:absolute;z-index:2;border:1.5px solid var(--steel);border-radius:2px;pointer-events:none}
.ds-region span{position:absolute;left:-1.5px;top:-1.5px;transform:translateY(-100%);font-family:var(--font-display);font-size:.62rem;letter-spacing:.12em;background:var(--steel);color:var(--bg-0);padding:0 .35rem;border-radius:2px 2px 0 0}
@media (max-width:520px){.ds-region span{display:none}}
.ds-views{margin-top:1.25rem}
.ds-views-head{font-family:var(--font-display);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-2);margin-bottom:.8rem;display:flex;flex-wrap:wrap;gap:.3rem 1rem;align-items:baseline}
.ds-views-head span{font-family:var(--font-body);font-size:.85rem;letter-spacing:0;text-transform:none;color:var(--muted)}
.ds-views-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.ds-view figure{margin:0;border:1px solid var(--line);border-radius:var(--radius-card);background:var(--bg-0);overflow:hidden}
.ds-view-screen{position:relative;background:var(--dgm-ink-900);border-bottom:1px solid var(--line)}
.ds-view-screen video{display:block;width:100%;height:auto}
.ds-view-n{position:absolute;left:.6rem;top:.6rem;font-family:var(--font-display);font-size:.62rem;letter-spacing:.12em;background:var(--steel);color:var(--bg-0);padding:0 .35rem;border-radius:2px}
.ds-view figcaption{padding:.6rem .8rem;font-size:.85rem;color:var(--text)}

/* data link panel */
.ds-downlink{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden}
/* below the playthrough: the two meters side by side, the share of data sent beside them */
.ds-dl-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) minmax(0,1.2fr)}
.ds-dl-body .ds-meter{border-bottom:0;box-shadow:1px 0 0 var(--line);display:flex;flex-direction:column}
/* a label that wraps to two lines keeps the numbers and bars level across the meters */
.ds-dl-body .ds-meter-label{flex:1 0 auto}
.ds-dl-note{display:flex;flex-direction:column;justify-content:center}
@media (max-width:720px){.ds-dl-body{grid-template-columns:1fr 1fr}.ds-dl-body .ds-meter{box-shadow:1px 0 0 var(--line),0 1px 0 var(--line)}.ds-dl-note{grid-column:1/-1}}
@media (max-width:420px){.ds-dl-body{grid-template-columns:1fr}}
/* with the area counter: three meters and the note in one row, or the note under the meters */
@media (min-width:981px){.ds-dl-body.ds-dl-area{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.1fr)}}
@media (min-width:721px) and (max-width:980px){.ds-dl-body.ds-dl-area{grid-template-columns:repeat(3,minmax(0,1fr))}.ds-dl-area .ds-meter{box-shadow:1px 0 0 var(--line),0 1px 0 var(--line)}.ds-dl-area .ds-dl-note{grid-column:1/-1}}
@media (max-width:720px){.ds-dl-area .ds-meter:nth-child(3){grid-column:1/-1}}
@media (max-width:420px){.ds-dl-area .ds-meter:nth-child(3){grid-column:auto}}
.ds-downlink h3{margin:0;padding:1rem 1.3rem;border-bottom:1px solid var(--line);font-family:var(--font-display);font-weight:400;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-2)}
.ds-meter{padding:1.1rem 1.3rem;border-bottom:1px solid var(--line)}
.ds-meter-label{font-size:.85rem;color:var(--text);line-height:1.4}
.ds-meter-label small{display:block;font-family:var(--font-display);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:.15rem}
.ds-meter-value{font-family:var(--font-display);font-size:1.75rem;line-height:1.15;color:var(--text-strong);font-variant-numeric:tabular-nums;margin-top:.55rem}
.ds-meter-key .ds-meter-value{color:var(--accent)}
.ds-bar{height:4px;border-radius:2px;background:var(--line);margin-top:.6rem;overflow:hidden}
.ds-bar span{display:block;height:100%;background:var(--muted)}
.ds-meter-key .ds-bar span{background:var(--accent);min-width:2px}
.ds-share{padding:1.1rem 1.3rem .4rem;font-size:.88rem;color:var(--text);line-height:1.5}
.ds-share span:first-child{font-family:var(--font-display);font-size:1.05rem;color:var(--text-strong)}
.ds-basis{padding:0 1.3rem 1.2rem;font-size:.75rem;color:var(--muted);line-height:1.5}
/* in the playthrough, right under the timeline: one slim row, so the data link is seen with the image */
.ds-console .ds-downlink{display:grid;grid-template-columns:auto minmax(0,1fr);margin-top:0;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0}
.ds-console .ds-downlink h3{display:flex;align-items:center;padding:.6rem 1.2rem;border-bottom:0;border-right:1px solid var(--line)}
.ds-console .ds-dl-body{display:flex;flex-wrap:wrap}
.ds-console .ds-dl-body .ds-meter{flex:1 1 8.5rem;padding:.55rem 1rem .6rem;box-shadow:1px 0 0 var(--line)}
.ds-console .ds-meter-label{font-size:.74rem;line-height:1.3;flex:none}
.ds-console .ds-meter-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-console .ds-meter-label small{display:block;margin:.1rem 0 0;font-size:.56rem}
.ds-console .ds-meter-value{font-size:1.2rem;margin-top:.15rem}
.ds-console .ds-bar{height:3px;margin-top:.35rem}
.ds-console .ds-dl-note{flex:1.4 1 11rem}
.ds-console .ds-share{padding:.55rem 1rem 0;font-size:.8rem;line-height:1.4}
.ds-console .ds-share span:first-child{font-size:1rem}
.ds-console .ds-basis{padding:.15rem 1rem .55rem;font-size:.68rem;line-height:1.4}
@media (max-width:720px){
  .ds-console .ds-downlink{grid-template-columns:1fr}
  .ds-console .ds-downlink h3{border-right:0;border-bottom:1px solid var(--line);padding:.55rem .8rem}
  .ds-console .ds-dl-body .ds-meter{flex-basis:40%;box-shadow:1px 0 0 var(--line),0 1px 0 var(--line);padding:.5rem .8rem}
  .ds-console .ds-dl-note{flex-basis:100%}
  .ds-console .ds-share{padding:.5rem .8rem 0}.ds-console .ds-basis{padding:.15rem .8rem .5rem}
}

/* ---------- findings (beside the player) ---------- */
/* wide screens: a column of compact rows, thumbnail left; narrow screens: a sideways strip of cards */
.ds-strip{position:relative;list-style:none;margin:0;display:flex;flex-direction:column;gap:.5rem;flex:1;min-height:0;overflow-y:auto;padding:.7rem;scrollbar-color:var(--slate) transparent}
.ds-strip li{flex:none}
@media (min-width:961px){
  .ds-flist .ds-fcard{display:grid;grid-template-columns:104px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:.7rem;row-gap:.2rem;padding:.45rem;align-items:start}
  .ds-flist .ds-fcard img{grid-row:1/4;grid-column:1}
  .ds-flist .ds-fcard>span{grid-column:2;padding:0}
  .ds-flist .ds-fcard-top{font-size:.85rem}
  .ds-flist .ds-fcard-meta{font-size:.7rem}
}
@media (max-width:960px){
  .ds-strip{flex-direction:row;gap:1rem;overflow-x:auto;overflow-y:hidden;padding:.8rem .8rem 1rem;scroll-snap-type:x proximity}
  .ds-strip li{flex:0 0 212px;scroll-snap-align:start}
}
.ds-fcard{width:100%;display:flex;flex-direction:column;gap:.6rem;padding:.55rem .55rem .75rem;border-radius:8px;background:var(--panel);border:1px solid var(--line);color:var(--text);text-align:left;cursor:pointer;font-family:var(--font-body);transition:border-color .15s}
.ds-fcard:hover{border-color:var(--accent)}
.ds-fcard.on{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.ds-fcard img{width:100%;height:auto;aspect-ratio:5/3;object-fit:cover;border-radius:4px;display:block;background:var(--bg-0)}
.ds-fcard-top{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;font-size:.92rem;padding:0 .2rem}
.ds-fcard-top b{font-weight:400;text-transform:capitalize;color:var(--text-strong)}
.ds-fcard-top span,.ds-fcard-meta{font-family:var(--font-display);color:var(--muted);font-size:.74rem;letter-spacing:.03em;font-variant-numeric:tabular-nums}
.ds-fcard-meta{padding:0 .2rem}
.ds-fcard-n{font-family:var(--font-display);font-size:.62rem;letter-spacing:.16em;color:var(--accent-2);padding:0 .2rem}
.ds-fcard.sel{border-color:var(--accent-2);box-shadow:0 0 0 1px var(--accent-2)}
/* a warm finding keeps its red border in every state: on screen, hovered, selected */
.ds-fcard.warm,.ds-fcard.warm:hover{border-color:var(--warm)}
.ds-fcard.warm.on{border-color:var(--warm);box-shadow:0 0 0 1px var(--warm)}
.ds-fcard.warm.sel{border-color:var(--warm);box-shadow:0 0 0 2px var(--warm)}
/* finding preview: the selected finding, larger, at the top of the findings list */
.ds-fprev{margin:0;padding:.8rem 1.1rem 1rem;border-bottom:1px solid var(--line);display:grid;gap:.65rem;flex:none}
.ds-fprev-img{position:relative;border-radius:6px;overflow:hidden;background:var(--bg-0);border:1px solid var(--line)}
.ds-fprev-img img{display:block;width:100%;height:auto;aspect-ratio:5/3;object-fit:cover}
.ds-fprev-pic{position:relative;display:block;min-width:0}
.ds-fprev-pic i{position:absolute;left:.2rem;bottom:.2rem;font-style:normal;font-family:var(--font-display);font-size:.5rem;line-height:1.3;letter-spacing:.06em;text-transform:uppercase;color:var(--text-strong);background:rgba(7,31,33,.55);padding:0 .22rem;border-radius:2px;pointer-events:none}
.ds-fprev-img:not(.two) .ds-fprev-pic i{display:none}
.ds-fprev-img.two{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.ds-fprev-th{grid-column:1/-1;font-family:var(--font-display);font-size:.74rem;letter-spacing:.03em;color:var(--text);font-variant-numeric:tabular-nums}
.ds-fprev-x{position:absolute;top:.4rem;right:.4rem;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--line);background:rgba(7,31,33,.72);color:var(--text-strong);font-size:1.25rem;line-height:1;cursor:pointer}
.ds-fprev-x:hover,.ds-fprev-x:focus-visible{border-color:var(--accent);color:var(--accent)}
@media (pointer:coarse){.ds-fprev-x{width:44px;height:44px}}
.ds-fprev figcaption{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.15rem .6rem;align-items:baseline}
.ds-fprev-n{grid-column:1/-1;font-family:var(--font-display);font-size:.62rem;letter-spacing:.16em;color:var(--accent-2)}
.ds-fprev-l{font-weight:400;text-transform:capitalize;color:var(--text-strong);font-size:1.05rem}
.ds-fprev-t{font-family:var(--font-display);font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.ds-fprev-m{grid-column:1/-1;font-family:var(--font-display);font-size:.74rem;letter-spacing:.03em;color:var(--muted);font-variant-numeric:tabular-nums}
.ds-fprev-geo{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.2rem .7rem;font-family:var(--font-display);font-size:.74rem;letter-spacing:.03em;color:var(--muted);font-variant-numeric:tabular-nums}
.ds-fprev-geo a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.ds-fprev-geo a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* the same object seen in several images: its views, side by side */
.ds-fprev-views{display:grid;gap:.4rem;min-width:0}
.ds-fprev-vh{margin:0;font-family:var(--font-display);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-2)}
.ds-fprev-vrow{display:flex;gap:.4rem;overflow-x:auto;padding-bottom:2px}
.ds-fprev-v{flex:none;display:grid;gap:.2rem;width:84px;padding:0;border:1px solid var(--line);border-radius:4px;background:var(--bg-0);color:var(--muted);font-family:var(--font-display);font-size:.66rem;font-variant-numeric:tabular-nums;cursor:pointer;overflow:hidden}
.ds-fprev-v img{display:block;width:100%;height:auto;aspect-ratio:5/3;object-fit:cover}
.ds-fprev-v span{padding:0 .3rem .2rem}
.ds-fprev-v:hover{border-color:var(--accent);color:var(--text)}
.ds-fprev-v[aria-pressed="true"]{border-color:var(--accent-2);box-shadow:0 0 0 1px var(--accent-2);color:var(--text-strong)}
.ds-fprev-v:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (pointer:coarse){.ds-fprev-v{width:96px}}
.ds-fprev-back{display:none}
/* wide screens: the preview opens over the list beside the player instead of squeezing it */
@media (min-width:961px){
  .ds-fprev{position:absolute;inset:0;z-index:3;background:var(--panel);overflow-y:auto;overscroll-behavior:contain;border-bottom:0;align-content:start;padding-top:.6rem}
  .ds-fprev-back{display:inline-flex;justify-self:start;align-items:center;min-height:36px;padding:0 .2rem;border:0;background:none;color:var(--accent);font-family:var(--font-display);font-size:.8rem;letter-spacing:.04em;cursor:pointer}
  .ds-fprev-back:hover{text-decoration:underline;text-underline-offset:3px}
  .ds-fprev-back:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .ds-fprev-nav{position:sticky;bottom:-1rem;margin:0 -1.1rem -1rem;padding:.6rem 1.1rem 1rem;background:var(--panel);border-top:1px solid var(--line)}
}
.ds-fprev-nav{display:flex;gap:.5rem}
.ds-fprev-nav .ctrl{flex:1;min-height:40px}
@media (max-width:960px){
  .ds-fprev{grid-template-columns:minmax(0,400px) minmax(0,1fr);grid-template-rows:auto auto 1fr;align-items:start;column-gap:1.1rem}
  .ds-fprev-img{grid-row:1/4}
  .ds-fprev-nav{align-self:end}
}
@media (max-width:560px){.ds-fprev{grid-template-columns:1fr}.ds-fprev-img{grid-row:auto}}

/* ---------- details and download ---------- */
.ds-detail{padding:5rem 0 5rem}
.ds-two{display:grid;grid-template-columns:1.05fr .95fr;gap:4rem;align-items:start}
@media (max-width:960px){.ds-two{grid-template-columns:1fr;gap:2.8rem}}
.ds-two h2{margin-bottom:1.4rem}
.ds-two h3{font-family:var(--font-display);font-weight:400;color:var(--text-strong);font-size:1.05rem;letter-spacing:.02em;margin:2.4rem 0 .8rem}
.ds-table{border-top:1px solid var(--line)}
.ds-table .ds-row{display:flex;justify-content:space-between;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--line);font-size:.95rem}
.ds-table dt{color:var(--muted)}
.ds-table dd{font-family:var(--font-display);text-align:right;color:var(--text-strong)}
.ds-list-plain{list-style:none;display:grid;gap:.6rem;margin:.2rem 0 1rem}
.ds-list-plain li{display:grid;grid-template-columns:auto 1fr;column-gap:.8rem;align-items:start}
.ds-list-plain li::before{content:"";width:7px;height:7px;margin-top:.6em;background:var(--accent-2);transform:rotate(45deg)}
.ds-note{font-size:.88rem;color:var(--muted)}
.ds-form-card{top:92px}
.ds-packs{border:0;display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.4rem}
.ds-packs legend{font-family:var(--font-display);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.ds-pack{display:flex;align-items:center;gap:.75rem;min-height:48px;padding:0 .95rem;border:1px solid var(--line);border-radius:var(--radius-field);background:var(--bg-0);cursor:pointer;transition:border-color .15s}
.ds-pack:hover{border-color:var(--muted)}
.ds-pack:has(input:checked){border-color:var(--accent-2)}
.ds-pack input{width:18px;height:18px;accent-color:var(--accent)}
.ds-pack span{flex:1}
.ds-pack small{font-family:var(--font-display);color:var(--muted);font-variant-numeric:tabular-nums}
.ds-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1rem}
@media (max-width:520px){.ds-form-grid{grid-template-columns:1fr}}
.ds-consent label{display:flex;gap:.6rem;align-items:flex-start;font-family:var(--font-body);font-size:.85rem;letter-spacing:0;text-transform:none;color:var(--muted);line-height:1.6;cursor:pointer}
.ds-consent input{width:18px;height:18px;min-height:0;margin-top:.2rem;flex:none;accent-color:var(--accent)}
.ds-selected{font-family:var(--font-display);font-size:.8rem;color:var(--muted);text-align:center}
.ds-approve{margin:1.5rem 0}
.ds-related{padding:4.5rem 0;background:var(--bg-0);border-top:1px solid var(--line)}
.ds-related .ds-card{background:var(--bg-1)}

/* ---------- message pages ---------- */
.pp-hero.ds-message .wrap{max-width:760px;padding-bottom:4.5rem}
.ds-message p{margin-top:1.2rem}
.ds-message .lede{color:var(--muted)}
.ds-pl-meta{color:var(--muted);font-size:.85rem;margin:.7rem 0 0}

/* ---------- share ---------- */
.ds-card-wrap{position:relative}
.ds-card-share{position:absolute;top:14px;right:14px;z-index:4;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--line);background:rgba(7,31,33,.72);cursor:pointer;transition:border-color .15s}
.ds-card-share:hover,.ds-card-share:focus-visible,.ds-card-share.done{border-color:var(--accent)}
.ds-card-share:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ds-share-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:1.2rem}
.ds-share-row .btn svg{vertical-align:-3px;margin-right:.3rem}
.ds-share-msg{font-size:.85rem;color:var(--accent)}

/* player bar: play, previous and next finding, the timeline, the time, speed and full screen,
   in one row right under the image; on a phone the timeline takes its own row on top */
.ds-pbar{display:flex;align-items:center;gap:.6rem 1rem;padding:.55rem 1rem .6rem;border-bottom:1px solid var(--line)}
.ds-pbar[hidden]{display:none}
.ds-pbar-btns,.ds-pbar-end{display:flex;align-items:center;gap:.35rem;flex:none}
.ds-pbar .ds-scrub{flex:1 1 auto;min-width:0;margin-top:-4px}
.ctrl-icon{padding:0;width:44px}
@media (max-width:600px){.ds-pbar{flex-wrap:wrap;gap:.2rem .3rem;padding:.3rem .8rem .6rem}.ds-pbar .ds-scrub{order:-1;flex:1 1 100%}.ds-pbar-end{margin-left:auto;gap:.3rem}.ds-pbar-btns{gap:.2rem}.ds-pbar .ctrl-icon{width:38px;min-width:38px}.ds-pbar .ds-clock{font-size:.74rem;letter-spacing:0}.ds-pbar .ctrl-select{min-width:0;padding-left:.5rem;padding-right:1.4rem;background-position:right .7rem center,right .4rem center;font-size:.72rem;letter-spacing:0}}

/* the tool rail: icons inside the image's left edge, a panel slides out beside them */
.ds-extras[hidden]{display:none}
.ds-rail{position:absolute;left:1rem;top:3rem;z-index:6;display:flex;align-items:flex-start;gap:.5rem;max-width:calc(100% - 2rem)}
.ds-rail-btns{display:flex;flex-direction:column;gap:2px;padding:3px;border:1px solid var(--line);border-radius:var(--radius-field);background:rgba(7,31,33,.78);flex:none}
.ds-rail-b{position:relative;display:flex;align-items:center;justify-content:center;gap:.45rem;width:40px;height:40px;padding:0;border:1px solid transparent;border-radius:calc(var(--radius-field) - 2px);background:transparent;color:var(--text-strong);font-family:var(--font-display);font-size:.78rem;letter-spacing:.04em;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.ds-rail-b svg{flex:none;display:block}
.ds-rail-t{display:none}
.ds-rail-b:hover{color:var(--accent);background:var(--panel-2)}
.ds-rail-b[aria-expanded="true"]{background:var(--panel-2);border-color:var(--accent-2);color:var(--text-strong)}
.ds-rail-b:focus-visible,.ds-fly-x:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* a dot while the setting is not the default */
.ds-rail-b.on::after{content:"";position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--bg-0)}
.ds-rail-zoom{margin-top:3px;padding-top:4px;border-top:1px solid var(--line)}
.ds-rail .ds-zoomgrp{display:flex;flex-direction:column}
.ds-rail .ds-zoomgrp .ctrl{min-width:0;min-height:0;width:40px;height:36px;padding:0;border:1px solid transparent;border-radius:calc(var(--radius-field) - 2px);background:transparent;color:var(--text-strong);margin:0}
.ds-rail .ds-zoomgrp .ctrl:hover:not(:disabled){color:var(--accent);background:var(--panel-2)}
.ds-rail .ds-zoomgrp .ctrl:disabled{opacity:.35}
.ds-rail .ds-zoomgrp .ctrl-level{font-size:.72rem}
.ds-fly{width:340px;max-width:calc(100% - 52px);overflow:auto;overscroll-behavior:contain;border:1px solid var(--line);border-radius:var(--radius-field);background:rgba(7,31,33,.94);opacity:0;transform:translateX(-8px);transition:opacity .16s ease,transform .16s ease}
.ds-fly.in{opacity:1;transform:none}
.ds-fly[hidden]{display:none}
.ds-fly-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:.35rem .35rem .35rem 1rem;background:inherit;border-bottom:1px solid var(--line)}
.ds-fly-title{margin:0;font-family:var(--font-display);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.ds-fly-x{width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--text);font-size:1.3rem;line-height:1;cursor:pointer}
.ds-fly-x:hover{color:var(--accent)}
.ds-fly-body{padding:.9rem 1rem 1rem}
@media (prefers-reduced-motion:reduce){.ds-fly,.ds-rail-b{transition:none}.ds-fly{transform:none}}
/* the panels' contents, stacked to fit the panel */
.ds-fly .ds-irbar,.ds-fly .ds-ffilter{display:flex;flex-direction:column;align-items:stretch;gap:.9rem;padding:0}
.ds-fly .ds-irbar > .ds-filter-label:first-child{display:none}
.ds-fly .ds-irmodes{display:flex;width:100%}
.ds-fly .ds-irmodes .ctrl{flex:1;min-width:0;padding:0 .3rem;font-size:.76rem;letter-spacing:.02em}
.ds-fly .ds-irbox{align-self:flex-start}
.ds-fly .ds-irop,.ds-fly .ds-ff-conf{flex-wrap:wrap}
.ds-fly .ds-ff-conf .ds-filter-label{flex:1 1 100%;margin:0}
.ds-fly .ds-ff-conf input{flex:1;width:auto}
.ds-fly .ds-irnote,.ds-fly .ds-ff-warmn{margin:0;font-size:.8rem;color:var(--muted)}
.ds-fly .ds-ff-types{gap:.4rem}
.ds-fly .ds-ff-types .ds-filter-label{flex:1 1 100%;margin:0}
.ds-fly .ds-ff-tail{margin:0;justify-content:space-between;padding-top:.8rem;border-top:1px solid var(--line)}
.ds-disp{display:flex;flex-direction:column;gap:.9rem}
.ds-disp-row{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem}
.ds-disp-row[hidden]{display:none}
.ds-disp-note{margin:0;font-size:.8rem;color:var(--muted)}
.ds-keys{display:flex;flex-direction:column;gap:.45rem;margin:0;padding:0;list-style:none;font-size:.82rem;color:var(--text)}
.ds-keys[hidden]{display:none}
.ds-keys kbd{display:inline-block;min-width:1.6em;padding:.05rem .35rem;border:1px solid var(--line);border-radius:3px;background:var(--bg-1);font-family:var(--font-display);font-size:.72rem;text-align:center;color:var(--text-strong)}
/* where the image is too small, the rail is a row of labelled buttons under the player bar,
   and the open panel sits below it instead of over the image */
.ds-rail.row{position:static;display:block;max-width:none;padding:.6rem 1rem;border-bottom:1px solid var(--line)}
.ds-rail.row .ds-rail-btns{flex-direction:row;flex-wrap:wrap;gap:.4rem;padding:0;border:0;background:none}
.ds-rail.row .ds-rail-b{width:auto;height:44px;padding:0 .8rem;border-color:var(--line);background:var(--bg-1)}
.ds-rail.row .ds-rail-b[aria-expanded="true"]{border-color:var(--accent-2);background:var(--panel-2)}
.ds-rail.row .ds-rail-t{display:inline}
.ds-rail.row .ds-rail-b.on::after{top:5px;right:5px}
.ds-rail.row .ds-rail-zoom{margin:0 0 0 auto;padding:0;border:0}
.ds-rail.row .ds-zoomgrp{flex-direction:row}
.ds-rail.row .ds-zoomgrp .ctrl{width:44px;height:44px;border-color:var(--line);background:var(--bg-1);border-radius:0;margin-left:-1px}
.ds-rail.row .ds-zoomgrp .ctrl:first-child{border-radius:var(--radius-field) 0 0 var(--radius-field);margin-left:0}
.ds-rail.row .ds-zoomgrp .ctrl:last-child{border-radius:0 var(--radius-field) var(--radius-field) 0}
.ds-rail.row .ds-fly{width:auto;max-width:none;margin-top:.6rem;background:var(--bg-1);transform:none}
.ds-rail.row .ds-fly-head{background:var(--bg-1)}
@media (max-width:520px){.ds-rail.row{padding:.5rem .8rem}.ds-rail.row .ds-rail-b{padding:0 .6rem}}
@media (pointer:coarse){.ds-rail.row .ds-rail-zoom{display:none}}
/* thermal opacity on the image, beside the heat scale, in the Overlay view */
.ds-irscale-q{display:flex;align-items:center;gap:.4rem;margin:0 0 0 .35rem;padding-left:.55rem;border-left:1px solid var(--line);pointer-events:auto;cursor:pointer}
.ds-irscale-q[hidden]{display:none}
.ds-irscale-ql{color:var(--muted)}
.ds-irscale-op{width:84px;min-height:24px;margin:0;accent-color:var(--accent-2);cursor:pointer}
.ds-irscale-op:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (max-width:520px){.ds-irscale-ql{display:none}.ds-irscale-op{width:64px}}