/* Detail "Plate" overlay (§6). Colours come only from the base.css tokens. */

#detail,
.d-backdrop,
.d-flight {
  --d-serif: var(--serif, "Instrument Serif", "Iowan Old Style", Palatino, Georgia, serif);
  --d-mono: var(--mono, "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  --d-fg: var(--ink);
  --d-fg2: var(--graphite);
  --d-dec: var(--2h);
  --d-bgc: var(--paper);
}

#detail {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  color: var(--d-fg);
  font-family: var(--d-mono);
  overscroll-behavior: contain;
  outline: none;
}
#detail[hidden],
#detail [hidden],
.d-backdrop[hidden],
.d-backdrop [hidden] { display: none !important; }

#detail.is-night {
  --d-fg: var(--night-ink);
  --d-fg2: var(--night-graphite);
  --d-dec: var(--graphite);
  --d-bgc: var(--night);
}

.d-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- stage layers (z 20) */

.d-backdrop {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: var(--paper);
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}
.d-flight {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  overflow: hidden;
}

.d-dom,
.d-clone {
  position: absolute;
  overflow: hidden;
  background: var(--paper);
  isolation: isolate;
  transform-origin: 0 0;
}
/* the DOM plate gets its layer only while it moves (detail.js), so a zoom re-rasters sharp */
.d-clone { will-change: transform; }
.d-dom .d-img,
.d-clone img {
  position: absolute;
  display: block;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}
.d-dom[data-ground="paper"] .d-img,
.d-clone[data-ground="paper"] img {
  mix-blend-mode: multiply;
  filter: brightness(var(--wk, 1));
}
/* Toned sheets lie on the paper as objects (§5.4); dark sheets merge into the night ground. */
.d-dom[data-ground="toned"],
.d-clone[data-ground="toned"],
.d-clone[data-ground="dark"] {
  box-shadow: 0 1px 1px rgba(0, 0, 0, .08), 0 14px 32px -18px rgba(0, 0, 0, .45);
}
.d-veil {
  position: absolute;
  inset: 0;
  background: var(--paper);
  mix-blend-mode: lighten;
  pointer-events: none;
}
.d-dom[data-ground="dark"] .d-veil { mix-blend-mode: darken; }

.d-dom.is-scan {
  overflow: visible;
  background: none;
  box-shadow: none;
}
.d-dom.is-scan .d-img {
  mix-blend-mode: normal;
  filter: none;
  outline: 1px solid var(--hair);
}
.d-dom.is-scan .d-veil { display: none; }

/* ---------------------------------------------------------------- gesture surface */

.d-surface {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  cursor: default;
}
/* Keep the Tonal Spine strip (hit area 32 px, 12 px from the edge) clickable. */
#detail[data-bp="lg"] .d-surface,
#detail[data-bp="xl"] .d-surface { right: 48px; }

.d-surface[data-cursor="lamp"] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='6.5' fill='none' stroke='%23F2F1ED' stroke-width='3'/%3E%3Ccircle cx='16' cy='16' r='6.5' fill='none' stroke='%23121212' stroke-width='1'/%3E%3C/svg%3E") 16 16, crosshair;
}
.d-surface[data-cursor="prev"] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M26 16.5H7M12.5 11l-5.5 5.5 5.5 5.5' fill='none' stroke='%23F2F1ED' stroke-width='3'/%3E%3Cpath d='M26 16.5H7M12.5 11l-5.5 5.5 5.5 5.5' fill='none' stroke='%23121212' stroke-width='1'/%3E%3C/svg%3E") 16 16, w-resize;
}
.d-surface[data-cursor="next"] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M6 16.5h19M19.5 11l5.5 5.5-5.5 5.5' fill='none' stroke='%23F2F1ED' stroke-width='3'/%3E%3Cpath d='M6 16.5h19M19.5 11l5.5 5.5-5.5 5.5' fill='none' stroke='%23121212' stroke-width='1'/%3E%3C/svg%3E") 16 16, e-resize;
}
#detail.is-night .d-surface[data-cursor="lamp"] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='6.5' fill='none' stroke='%23141413' stroke-width='3'/%3E%3Ccircle cx='16' cy='16' r='6.5' fill='none' stroke='%23E9E7E2' stroke-width='1'/%3E%3C/svg%3E") 16 16, crosshair;
}
#detail.is-night .d-surface[data-cursor="prev"] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M26 16.5H7M12.5 11l-5.5 5.5 5.5 5.5' fill='none' stroke='%23141413' stroke-width='3'/%3E%3Cpath d='M26 16.5H7M12.5 11l-5.5 5.5 5.5 5.5' fill='none' stroke='%23E9E7E2' stroke-width='1'/%3E%3C/svg%3E") 16 16, w-resize;
}
#detail.is-night .d-surface[data-cursor="next"] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M6 16.5h19M19.5 11l5.5 5.5-5.5 5.5' fill='none' stroke='%23141413' stroke-width='3'/%3E%3Cpath d='M6 16.5h19M19.5 11l5.5 5.5-5.5 5.5' fill='none' stroke='%23E9E7E2' stroke-width='1'/%3E%3C/svg%3E") 16 16, e-resize;
}
.d-surface[data-cursor="grab"] { cursor: grab; }
.d-surface[data-cursor="grabbing"] { cursor: grabbing; }
.d-surface[data-cursor="none"],
#detail.is-loupe .d-surface { cursor: none; }

/* ---------------------------------------------------------------- UI layer */

.d-ui {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--d-ui, 1);
}
/* closing: the page underneath already takes the next click */
#detail.is-closing,
#detail.is-closing * { pointer-events: none !important; }
/* ... including the figures still in the sheet's focus mode (a press on one opens it next) */
html.d-closing #sheet.is-focus .s-fade { pointer-events: auto; }

/* Catalogue entry — desktop column, bottom-aligned to the fit rect (§6.1). The 10/14 px padding
   holds the buttons' 44 px hit areas, so they never make the column scrollable. */
.d-entry {
  position: absolute;
  left: calc(var(--entry-x, 40px) - 10px);
  width: calc(var(--entry-w, 280px) + 20px);
  top: 72px;
  bottom: calc(var(--entry-b, 48px) - 14px);
  padding: 0 10px 14px;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  pointer-events: auto;
  transition: opacity 240ms var(--ease-io), visibility 0s linear 0s;
}
.d-entry::-webkit-scrollbar { display: none; }
/* more below: the last lines fade out (md / short screens) */
.d-entry.is-more {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent calc(100% - 4px));
  mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent calc(100% - 4px));
}
.d-head { margin-top: auto; position: relative; }

:where(.d-entry) p { margin: 0; }

.d-no,
.d-kicker,
.d-peek,
.d-rnote,
.d-hud,
.d-loading,
.d-hint,
.d-actions,
.d-tilt,
.d-loupe-read {
  font-family: var(--d-mono);
  font-size: 11px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-feature-settings: "tnum";
}

.d-no { color: var(--d-fg2); margin-bottom: 16px; white-space: nowrap; }
.d-kicker { color: var(--d-fg2); margin-bottom: 10px; }

.d-title {
  margin: 0;
  font-family: var(--d-serif);
  font-weight: 400;
  font-size: clamp(40px, 4.4vw, 88px);
  line-height: .95;
  letter-spacing: -0.01em;
  text-wrap: balance;
  overflow-wrap: break-word;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}
.d-title[data-len="l"] { font-size: clamp(34px, 3.4vw, 64px); }
.d-title[data-len="xl"] { font-size: clamp(28px, 2.5vw, 44px); line-height: 1; }
.d-title-in { display: block; }

.d-peek,
.d-x,
.d-grip { display: none; }

/* Odometer: digits roll, the rest of the line stays (§6.2) */
.d-odo { display: inline-flex; vertical-align: top; }
.d-dig { display: inline-block; height: 16px; overflow: hidden; }
.d-reel {
  display: flex;
  flex-direction: column;
  transform: translateY(calc(var(--k, 0) * -10%));
  transition: transform 240ms var(--ease-io);
}
.d-reel b { display: block; height: 16px; line-height: 16px; font-weight: 400; }

.d-meta { will-change: opacity; }
.d-hair {
  display: block;
  height: 1px;
  margin: 22px 0 14px;
  border: 0;
  background: var(--hair);
  transform-origin: 0 50%;
}
#detail.is-night .d-hair { background: var(--night-graphite); opacity: .5; }
@media (min-resolution: 2dppx) {
  .d-hair { height: .5px; }
}

.d-dl {
  margin: 0;
  font-family: var(--d-mono);
  font-size: 12px;
  line-height: 20px;
  font-feature-settings: "tnum";
}
.d-row {
  display: grid;
  grid-template-columns: 11ch minmax(0, 1fr);
  column-gap: 12px;
}
.d-row dt {
  color: var(--d-fg2);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.d-row dd { margin: 0; color: var(--d-fg); overflow-wrap: anywhere; }
.d-link {
  position: relative;
  color: inherit;
  text-decoration: none;
}
.d-link::after {                    /* 44 px touch target (§8.1) */
  content: "";
  position: absolute;
  inset: -15px -8px;
}
/* The row clips its content for the entrance (.d-ln), which would clip that target too: on touch
   screens the series row grows 13 px up and down (negative margins keep the layout), and its
   hidden state starts 13 px lower so the entrance still rises from out of view. */
@media (pointer: coarse) {
  .d-row:has(.d-link) { padding-block: 13px; margin-block: -13px; }
  .d-row:has(.d-link) > dt,
  .d-row:has(.d-link) > dd { transform: translateY(calc(105% + 13px)); }
}
.d-link:hover,
.d-link:focus-visible {
  text-decoration: underline 1px;
  text-underline-offset: 3px;
}

/* Hardness ruler 10H–14B (§6.1, §6.4) */
.d-ruler-wrap { margin-top: 22px; }
.d-ruler {
  position: relative;
  height: 36px;
  max-width: 100%;
}
.d-tick {
  position: absolute;
  bottom: 12px;
  width: 1px;
  height: 12px;
  background: var(--d-dec);
  transform: scaleY(.3333);
  transform-origin: 50% 100%;
  transition: transform 160ms var(--ease-out), background-color 160ms var(--ease-io);
}
.d-tick.is-lit { transform: none; background: var(--d-fg); }
.d-tl {
  position: absolute;
  font-family: var(--d-mono);
  font-size: 9px;
  line-height: 12px;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--d-fg2);
  font-feature-settings: "tnum";
  transition: color 160ms var(--ease-io);
}
.d-tl.is-a { top: 0; }
.d-tl.is-b { bottom: 0; }
.d-tl.is-used { color: var(--d-fg2); }
.d-tl.is-used.is-lit { color: var(--d-fg); }
.d-ruler.is-stagger .d-tick,
.d-ruler.is-stagger .d-tl { transition-delay: calc(var(--k0, 0ms) + var(--k, 0ms)); }
.d-rnote { margin-top: 4px; color: var(--d-fg2); }

.d-note {
  margin-top: 22px;
  max-width: 34ch;
  font-family: var(--d-serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.3;
  color: var(--d-fg);
}

/* Actions: ← PREV   NEXT →   LOUPE L   SCAN S   COPY LINK   ✕ ESC */
.d-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 26px;
  padding-bottom: 2px;
  transition: opacity 240ms var(--ease-io);
}
.d-btn,
.d-x,
.d-tilt {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--d-fg);
  font: inherit;
  letter-spacing: inherit;
  text-transform: uppercase;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.d-btn {
  position: relative;
  padding: 0;
  white-space: nowrap;
}
.d-btn::after {                     /* 44 px hit area without moving the layout */
  content: "";
  position: absolute;
  top: -14px;
  bottom: -14px;
  left: 50%;
  width: max(calc(100% + 20px), 44px);   /* a 10 px glyph (✕) still gets 44 px */
  transform: translateX(-50%);
}
.d-k { color: var(--d-fg2); margin-left: .35em; }
#detail.is-touch .d-k { display: none; }
.d-btn[aria-pressed="true"] { text-decoration: underline 1px; text-underline-offset: 4px; }
.d-btn:disabled { color: var(--d-dec); cursor: default; }
.d-btn:disabled .d-k { color: var(--d-dec); }
@media (hover: hover) {
  .d-btn:not(:disabled):hover { text-decoration: underline 1px; text-underline-offset: 4px; }
}
#detail :focus-visible { outline: 1px solid var(--d-fg); outline-offset: 3px; }
#detail:focus-visible { outline: none; }

/* Entrance: rows rise through a mask, 80 ms apart, data rows 40 ms (§6.3) */
.d-ln { overflow: hidden; }
.d-ln > .d-li,
.d-row > dt,
.d-row > dd {
  display: block;
  transform: translateY(105%);
  transition: transform 480ms var(--ease-out);
}
.d-hair {
  transform: scaleX(0);
  transition: transform 480ms var(--ease-out);
}
.d-actions { opacity: 0; }
.d-entry.is-in .d-ln > .d-li,
.d-entry.is-in .d-row > dt,
.d-entry.is-in .d-row > dd,
.d-entry.is-in .d-hair { transform: none; }
.d-entry.is-in .d-actions { opacity: 1; }
.d-entry.is-stagger .d-ln > .d-li,
.d-entry.is-stagger .d-row > dt,
.d-entry.is-stagger .d-row > dd,
.d-entry.is-stagger .d-hair,
.d-entry.is-stagger .d-actions { transition-delay: var(--dly, 0ms); }
.d-entry.is-out { opacity: 0; transition: opacity 240ms var(--ease-io); }

/* HUD bottom right (§6.1); enters with the entry, a paper label once the art runs under it */
.d-hud {
  position: absolute;
  right: calc(var(--d-m, 40px) + 32px - 8px);
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 8px;
  color: var(--d-fg2);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 240ms var(--ease-io), background-color 240ms var(--ease-io);
}
#detail.is-ui-in .d-hud { opacity: 1; }
#detail .d-hud.is-out { opacity: 0; }
#detail.is-zoomed .d-hud {
  background: var(--d-bgc);
  background: color-mix(in srgb, var(--d-bgc) 88%, transparent);
  color: var(--d-fg);
}
.d-scale { display: inline-flex; align-items: center; gap: 8px; color: var(--d-fg); }
.d-scale i {
  position: relative;
  display: block;
  height: 1px;
  background: currentColor;
}
.d-scale i::before,
.d-scale i::after {
  content: "";
  position: absolute;
  top: -3px;
  width: 1px;
  height: 7px;
  background: currentColor;
}
.d-scale i::before { left: 0; }
.d-scale i::after { right: 0; }
.d-hud-load { display: none; color: var(--d-fg); }
#detail.is-loading.is-nolen .d-hud-load { display: inline; }

/* Progress line under the fit rect, LOADING and hints */
.d-progress {
  position: absolute;
  left: var(--fit-x);
  top: calc(var(--vis-b) + 12px);
  width: var(--fit-w);
  height: 1px;
  background: var(--hair);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms var(--ease-io);
}
.d-progress i {
  position: absolute;
  inset: 0;
  background: var(--d-fg);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 160ms linear;
}
#detail.is-loading:not(.is-nolen) .d-progress { opacity: 1; }
.d-loading {
  position: absolute;
  margin: 0;
  left: var(--fit-x);
  top: var(--fit-y);
  width: var(--fit-w);
  height: var(--fit-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--d-fg2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 240ms var(--ease-io), visibility 0s linear 240ms;
}
.d-loading-t {
  padding: 4px 8px;
  background: var(--d-bgc);
  background: color-mix(in srgb, var(--d-bgc) 88%, transparent);
}
#detail.is-waiting .d-loading,
#detail.is-failed .d-loading { opacity: 1; visibility: visible; transition: opacity 240ms var(--ease-io), visibility 0s; }
#detail.is-failed .d-loading-t { color: var(--d-fg); }
.d-retry { padding: 4px 8px; pointer-events: auto; }
.d-hint {
  position: absolute;
  margin: 0;
  left: calc(var(--fit-x, 50vw) + var(--fit-w, 0px) / 2);   /* under the plate, also in side layouts */
  top: calc(var(--vis-b) + 16px);
  transform: translateX(-50%);
  white-space: nowrap;
  text-align: center;
  color: var(--d-fg2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms var(--ease-io);
}
#detail.is-hint .d-hint { opacity: 1; }

/* Autohide after 2.5 s: HUD and controls go, title and ruler stay */
#detail.is-idle .d-hud,
#detail.is-idle .d-actions:not(:focus-within) { opacity: 0; pointer-events: none; }

/* Info (I), zoomed plate, tap-to-hide on touch, expanded bottom sheet (xs) */
#detail.is-sheet-open .d-hud { opacity: 0; }
#detail.is-info-off .d-entry,
#detail.is-zoomed .d-entry,
#detail.is-ui-off .d-entry,
#detail.is-ui-off .d-hud {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 240ms var(--ease-io), visibility 0s linear 240ms, transform 320ms var(--ease-out);
}

/* ---------------------------------------------------------------- loupe (§6.6) */

.d-loupe {
  position: fixed;
  left: 0;
  top: 0;
  width: 280px;
  height: 280px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms var(--ease-io);
  will-change: transform;
}
.d-loupe.is-on.is-in { opacity: 1; }
.d-loupe-win {
  position: absolute;
  inset: 0;
  border: 1px solid var(--d-fg);
  background: var(--paper);
  overflow: hidden;
  isolation: isolate;
}
.d-loupe[data-ground="dark"] .d-loupe-win { background: var(--night); }
.d-loupe-l {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 160ms var(--ease-io);
}
.d-loupe-l.is-ready { opacity: 1; }
.d-loupe-l.is-gone { opacity: 0; }
.d-loupe[data-ground="paper"] .d-loupe-l {
  mix-blend-mode: multiply;
  filter: brightness(var(--wk, 1));
}
.d-loupe-t { position: absolute; background: var(--d-fg); }
.d-loupe-t[data-t="n"] { left: 139px; top: 1px; width: 1px; height: 6px; }
.d-loupe-t[data-t="s"] { left: 139px; bottom: 1px; width: 1px; height: 6px; }
.d-loupe-t[data-t="w"] { top: 139px; left: 1px; width: 6px; height: 1px; }
.d-loupe-t[data-t="e"] { top: 139px; right: 1px; width: 6px; height: 1px; }
.d-loupe-read {
  position: absolute;
  left: 0;
  top: calc(100% + 6px);
  margin: 0;
  padding: 2px 6px;
  white-space: nowrap;
  color: var(--d-fg);
  background: var(--d-bgc);
  background: color-mix(in srgb, var(--d-bgc) 88%, transparent);
}

/* ---------------------------------------------------------------- tablet (md): drawing on top, entry panel below */

#detail[data-bp="md"] .d-entry {
  top: var(--entry-top, 60vh);
  bottom: 56px;
  display: block;
  padding: 0 10px 16px;
}
#detail[data-bp="md"] .d-head { margin-top: 0; }
#detail[data-bp="md"] .d-title { font-size: clamp(36px, 5.2vw, 56px); }
#detail[data-bp="md"] .d-title[data-len="xl"] { font-size: 32px; }
#detail[data-bp="md"] .d-actions {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  margin: 0;
  padding: 0 max(var(--d-m, 32px), env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(var(--d-m, 32px), env(safe-area-inset-left, 0px));
  align-items: center;
  gap: 0 24px;
  background: var(--d-bgc);
  border-top: 1px solid var(--hair);
}
/* the HUD sits at the right end of the action bar, never on the entry */
#detail[data-bp="md"] .d-hud { right: calc(max(var(--d-m, 32px), env(safe-area-inset-right, 0px)) - 8px); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
/* The action bar is position:fixed inside the entry, so a mask on the entry would also mask
   (hide and un-hit) the bar. On md the 'more below' fade is a paper overlay instead. */
#detail[data-bp="md"] .d-entry.is-more { -webkit-mask-image: none; mask-image: none; }
#detail[data-bp="md"] .d-entry.is-more::after {
  content: '';
  display: block;
  position: sticky;
  bottom: -16px;
  height: 40px;
  margin: -40px -10px -16px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--d-bgc) 0%, transparent), var(--d-bgc) calc(100% - 4px));
  pointer-events: none;
}

/* ---------------------------------------------------------------- short landscape (ls): the desktop arrangement */

#detail[data-bp="ls"] .d-title { font-size: 32px; }
#detail[data-bp="ls"] .d-title[data-len="l"],
#detail[data-bp="ls"] .d-title[data-len="xl"] { font-size: 26px; }
#detail[data-bp="ls"] .d-note { display: none; }
/* A phone on its side has ~280 px for the entry column: tighter rhythm, and the action row sticks
   to the foot of the column (on paper, over the rows scrolling under it), so PREV / NEXT / SCAN
   are always in reach without scrolling. The 'more below' fade moves from a mask on the column
   (which would also fade the row) to the row's own top edge. */
#detail[data-bp="ls"] .d-no { margin-bottom: 10px; }
#detail[data-bp="ls"] .d-hair { margin: 14px 0 10px; }
#detail[data-bp="ls"] .d-ruler-wrap { margin-top: 14px; }
#detail[data-bp="ls"] .d-entry.is-more { -webkit-mask-image: none; mask-image: none; }
#detail[data-bp="ls"] .d-actions {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin-top: 8px;
  padding: 10px 0 2px;
  gap: 8px 18px;
  background: var(--d-bgc);
  box-shadow: 0 14px 0 var(--d-bgc);  /* also covers the column's 14 px bottom padding (hit areas) */
}
/* the one-time HOLD TO LIGHT hint and the HUD share the short bottom strip: the hint wins */
#detail[data-bp="ls"].is-hint .d-hud { opacity: 0; }
#detail[data-bp="ls"] .d-actions::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 28px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--d-bgc) 0%, transparent), var(--d-bgc));
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms var(--ease-io);
}
#detail[data-bp="ls"] .d-entry.is-more .d-actions::before { opacity: 1; }

/* ---------------------------------------------------------------- mobile (xs): bottom sheet */

#detail[data-bp="xs"] .d-entry {
  position: fixed;
  left: 0;
  right: 0;
  top: auto;
  bottom: 0;
  width: auto;
  height: var(--sheet-h, 70vh);
  display: block;
  padding: 0 max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  overflow: hidden;
  background: var(--d-bgc);
  border-top: 1px solid var(--hair);
  transform: translate3d(0, calc(100% - 64px - env(safe-area-inset-bottom, 0px)), 0);
  transition: transform 320ms var(--ease-out), opacity 240ms var(--ease-io), visibility 0s linear 0s;
}
#detail[data-bp="xs"].is-night .d-entry { border-top-color: transparent; }
#detail[data-bp="xs"] .d-entry:not(.is-in) { transform: translate3d(0, 100%, 0); }
#detail[data-bp="xs"] .d-entry.is-expanded {
  transform: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
#detail[data-bp="xs"] .d-entry.is-dragging { transition: none; }
#detail[data-bp="xs"] .d-head {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 12px 44px 0 0;
  min-height: 64px;
  touch-action: none;
  cursor: grab;
}
#detail[data-bp="xs"] .d-title { order: 1; font-size: 22px; line-height: 28px; padding-bottom: 0; margin-bottom: 0; }
#detail[data-bp="xs"] .d-title-in { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#detail[data-bp="xs"] .d-entry.is-expanded .d-title-in { white-space: normal; }
#detail[data-bp="xs"] .d-peek {
  order: 2;
  display: block;
  margin: 1px 0 0;
  color: var(--d-fg2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#detail[data-bp="xs"] .d-no { order: 3; margin: 20px 0 0; }
#detail[data-bp="xs"] .d-kicker { order: 4; margin: 6px 0 0; }
#detail[data-bp="xs"] .d-grip {
  display: block;
  position: absolute;
  top: 5px;
  left: 50%;
  width: 32px;
  height: 1px;
  margin-left: -16px;
  background: var(--d-fg2);
}
#detail[data-bp="xs"] .d-x {
  display: block;
  position: absolute;
  top: 10px;
  right: -12px;
  width: 44px;
  height: 44px;
  padding: 0;
  font-family: var(--d-mono);
  font-size: 16px;
  line-height: 44px;
  text-align: center;
}
#detail[data-bp="xs"] .d-hud { right: max(8px, env(safe-area-inset-right, 0px)); bottom: calc(64px + 8px + env(safe-area-inset-bottom, 0px)); }
#detail[data-bp="xs"] .d-actions { gap: 16px 22px; margin-top: 24px; }
#detail[data-bp="xs"] .d-actions .d-btn[data-act="close"] { display: none; }
#detail[data-bp="xs"].is-zoomed .d-entry,
#detail[data-bp="xs"].is-ui-off .d-entry,
#detail[data-bp="xs"].is-info-off .d-entry { transform: translate3d(0, 100%, 0); }

/* ---------------------------------------------------------------- reduced motion (§8.2) */

@media (prefers-reduced-motion: reduce) {
  #detail .d-ln > .d-li,
  #detail .d-row > dt,
  #detail .d-row > dd,
  #detail .d-hair {
    transform: none !important;
    transition: none !important;
  }
  #detail .d-entry,
  #detail .d-actions,
  #detail .d-hud,
  .d-loupe,
  .d-loupe-l {
    transition-duration: 160ms !important;
    transition-delay: 0ms !important;
  }
  #detail .d-reel,
  #detail .d-tick,
  #detail .d-tl { transition: none !important; }
}