/* Scan page: section chips (top) + action dock (bottom pill → sheet).
   Spec: docs/superpowers/specs/2026-10-28-scan-page-action-dock-design.md.
   Colours come from the theme tokens only; text on the accent goes through
   --on-copper so light-accent themes can flip it dark. */

/* `hidden` must win over the display rules below. */
.dock [hidden], .scan-chips [hidden] { display: none !important; }

/* ---- Section chips ---------------------------------------------------- */

/* overflow: hidden makes the card a scroll container, which pins a sticky
   child to the card instead of the viewport. clip crops the same without it,
   but (not being a scroll container) lets the grid item grow to the chip
   row's min-content width — min-width: 0 keeps it at the viewport. */
.card:has(.scan-chips) { overflow: clip; min-width: 0; }

.scan-chips {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  transition: background-color 0.25s, box-shadow 0.25s;
}
.scan-chips.is-solid {
  background: color-mix(in srgb, var(--card) 86%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--warm);
}

.scan-chips-row {
  display: flex;
  gap: 0.4rem;
  padding: 0.55rem 0.9rem;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  flex: 1;
  min-width: 0;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.scan-chips-row::-webkit-scrollbar { display: none; }
.scan-chips-row.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.scan-chips-row.is-dragging .scan-chip { pointer-events: none; }

.scan-chip {
  flex: none;
  padding: 0.42rem 0.8rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--ink);
  font: 600 0.78rem/1.2 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  -webkit-user-drag: none;
  transition: background-color 0.2s, color 0.2s;
}
.scan-chip[aria-current="true"] { background: var(--copper); color: var(--on-copper, #fff); }

.scan-chips-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 1.6rem;
  height: 1.6rem;
  margin-top: -0.8rem;
  border: 0;
  border-radius: 50%;
  background: var(--card);
  color: var(--copper);
  font: 700 1.1rem/1 var(--font-body);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  animation: chips-nudge 1.6s ease-in-out infinite;
}
.scan-chips-arrow[data-dir="-1"] { left: 0.2rem; --nudge: -3px; }
.scan-chips-arrow[data-dir="1"] { right: 0.2rem; --nudge: 3px; }
/* A fade behind each arrow masks the chip text it would sit on. Taps on the
   fade fall through to the chip. */
.scan-chips-arrow::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -0.65rem;
  bottom: -0.65rem;
  width: 2.5rem;
  pointer-events: none;
}
.scan-chips-arrow[data-dir="-1"]::before { left: -0.2rem; background: linear-gradient(to right, var(--card) 45%, transparent); }
.scan-chips-arrow[data-dir="1"]::before { right: -0.2rem; background: linear-gradient(to left, var(--card) 45%, transparent); }
@keyframes chips-nudge { 50% { transform: translateX(var(--nudge)); } }

/* Jump targets sit under the sticky row, not behind it. */
.sec-anchor, #guestbook-section, #candle-section { scroll-margin-top: 3.4rem; }

/* ---- Finder confirmation ----------------------------------------------- */

.scan-notified {
  margin: 0;
  padding: 0.6rem 1.25rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
  background: color-mix(in srgb, var(--copper) 12%, var(--card));
}

/* ---- Dock: pill ----------------------------------------------------- */

/* The last block must scroll clear of the pill. */
body:has(#dock) { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }

.dock-ic {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dock-pill {
  position: fixed;
  left: 50%;
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 40;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.55rem;
  max-width: calc(100vw - 2rem);
  padding: 0.9rem 1.4rem;
  border: 0;
  border-radius: 999px;
  background: var(--copper);
  color: var(--on-copper, #fff);
  font: 600 0.95rem/1.2 var(--font-body);
  white-space: nowrap;
  box-shadow: 0 10px 24px -6px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: transform 0.15s;
}
.dock-pill:active { transform: translateX(-50%) scale(0.97); }
.dock-pill-label { overflow: hidden; text-overflow: ellipsis; }
.dock-pill--lost { background: #b42318; color: #fff; }
.dock-badge {
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--copper) 14%, var(--card));
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 600;
}

/* ---- Dock: sheet ---------------------------------------------------- */

.dock-backdrop {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(20, 16, 12, 0.42);
  animation: dock-fade 0.2s ease both;
}
.dock-sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 50;
  width: min(32rem, 100vw);
  max-height: 88vh;
  max-height: 88dvh;
  display: flex;
  flex-direction: column;
  transform: translateX(-50%);
  border-radius: 1.4rem 1.4rem 0 0;
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.25);
  padding-bottom: env(safe-area-inset-bottom);
  animation: dock-up 0.28s cubic-bezier(0.2, 0.9, 0.3, 1) both;
  /* Swipe-to-close (scan-dock.js) drags `translate`, which composes with the
     animated `transform` instead of fighting it. */
  transition: translate 0.2s ease;
}
.dock-sheet.is-dragging { transition: none; }
.dock-grip {
  display: block;
  flex: none;
  width: 36px;
  height: 4px;
  margin: 0.5rem auto 0;
  border-radius: 2px;
  background: color-mix(in srgb, var(--ink) 22%, transparent);
}
.dock-grip, .dock-head { touch-action: none; }
.dock-sheet.is-tall { height: 92vh; max-height: 92vh; height: 92dvh; max-height: 92dvh; }
/* The contact FAB (scan.js) sits above everything; not over an open sheet. */
body.dock-open .contact-fab { display: none; }
/* Android's install banner (scan.js, fixed bottom, z 900): lift the pill over
   it, and keep it off an open sheet. */
body:has(.pwa-banner--visible:not([hidden])) .dock-pill { bottom: calc(6rem + env(safe-area-inset-bottom)); }
body.dock-open .pwa-banner { display: none; }
@keyframes dock-up { from { transform: translate(-50%, 100%); } }
@keyframes dock-fade { from { opacity: 0; } }

.dock-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem 0.4rem;
}
.dock-title {
  flex: 1;
  margin: 0;
  font: 600 1.05rem/1.3 var(--font-display, var(--font-body));
}
.dock-back, .dock-close {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border: 0;
  border-radius: 50%;
  background: var(--warm);
  color: var(--ink);
  cursor: pointer;
}
.dock-sheet .preview-badge { margin: 0 1rem 0.4rem; }

.dock-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  padding: 0.6rem 1rem 1.2rem;
  overflow-y: auto;
}
.dock-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 5.2rem;
  padding: 0.7rem 0.4rem;
  border: 1px solid var(--warm);
  border-radius: 1rem;
  background: var(--card);
  color: var(--ink);
  font: 600 0.8rem/1.25 var(--font-body);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.dock-tile .dock-ic { width: 1.5rem; height: 1.5rem; color: var(--copper); }
.dock-tile--hero {
  grid-column: 1 / -1;
  flex-direction: row;
  min-height: 4rem;
  border: 0;
  background: var(--copper);
  color: var(--on-copper, #fff);
  font-size: 0.95rem;
}
.dock-tile--hero .dock-ic { color: inherit; }
.dock-tile.is-pressed { outline: 3px solid color-mix(in srgb, var(--copper) 45%, transparent); }

.dock-pane {
  display: grid;
  gap: 0.75rem;
  padding: 0.4rem 1rem 1.2rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.dock-pane-title { margin: 0; font-size: 1rem; }
/* The moved blocks bring their page chrome; inside the sheet it is noise. */
.dock-pane .block { margin: 0; padding: 0; border: 0; box-shadow: none; background: none; animation: none; }

/* File inputs + recorder button: rendered (not display:none) but invisible. */
.dock-files {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(50%);
}

/* The candle is lit from the dock tile; the page keeps the flame and counts. */
.candle-section .candle-btn { display: none; }

@media (prefers-reduced-motion: reduce) {
  .scan-chips-arrow, .dock-sheet, .dock-backdrop { animation: none; }
  .dock-sheet { transition: none; }
  .scan-chips-row { scroll-behavior: auto; }
}