/* ============================================================
   tag-picker-drill.css
   ============================================================
   Companion to /shared/tag-picker-drill.js.

   Spec: DESIGN-TAG-PICKER-DRILL-V1.md
   Created: 2026-05-06

   Scoped under .tpd-root to avoid collision with host page styles.
   All colors via CSS vars so DC + Studio (light/dark) can both consume.
   Defaults below match DC tokens (--accent, --rule, --bg-elev, --ink-*);
   hosts override as needed.

   Class prefix:  tpd-  (Tag Picker Drill)
   ============================================================ */

.tpd-root {
  /* Sensible fallbacks if host hasn't defined these */
  --tpd-accent:        var(--accent, #c8553d);
  --tpd-accent-soft:   var(--accent-soft, rgba(200, 85, 61, 0.12));
  --tpd-rule:          var(--rule, rgba(0, 0, 0, 0.10));
  --tpd-rule-strong:   var(--rule-strong, rgba(0, 0, 0, 0.20));
  --tpd-bg-elev:       var(--bg-elev, #ffffff);
  --tpd-bg-surface:    var(--bg-surface, #f8f5f0);
  --tpd-ink-strong:    var(--ink-strong, #1a1a1a);
  --tpd-ink-soft:      var(--ink-soft, #444);
  --tpd-ink-muted:     var(--ink-muted, #888);
  --tpd-sans:          var(--sans, system-ui, -apple-system, sans-serif);
  --tpd-mono:          var(--mono, ui-monospace, "SF Mono", monospace);

  display: block;
}

/* ─── Primary row ────────────────────────────────────────── */

.tpd-pills {
  display: flex;
  gap: 8px;
  padding: 2px 4px 4px;
  margin: -2px -4px 0;
  /* DC bug fix carry-over: reserve layout slot before async catalog fill */
  min-height: 62px;
  align-items: stretch;   /* equal heights so unselected pills match selected */
}

/* Layout: equal-4up (default) */
.tpd-pills[data-layout="equal-4up"] .tpd-pill,
.tpd-pills[data-layout="equal-3up"] .tpd-pill {
  flex: 1 1 0;
  min-width: 0;
}

/* Scroll layout (future use) */
.tpd-pills[data-layout="scroll"] {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tpd-pills[data-layout="scroll"]::-webkit-scrollbar { display: none; }
.tpd-pills[data-layout="scroll"] .tpd-pill {
  flex: 0 0 auto;
}

.tpd-pill {
  background: var(--tpd-bg-elev);
  border: 1px solid var(--tpd-rule);
  border-radius: 14px;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  cursor: pointer;
  font-family: var(--tpd-sans);
  color: var(--tpd-ink-soft);
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms, border-color 160ms, background 160ms, box-shadow 200ms;
  min-height: 56px;
  position: relative;
  text-align: center;
  white-space: nowrap;
}

.tpd-pill:hover,
.tpd-pill:focus-visible {
  border-color: var(--tpd-rule-strong);
  outline: none;
}
.tpd-pill:active { transform: scale(0.96); }

.tpd-pill.is-selected {
  background: var(--tpd-accent-soft);
  border-color: var(--tpd-accent);
  color: var(--tpd-accent);
  box-shadow: 0 0 0 2px rgba(200, 85, 61, 0.15);
}

/* Disabled state — option exists in the taxonomy but no content available
   under this scope. Greyed out, hover/active suppressed, click inert. */
.tpd-pill.is-disabled {
  opacity: 0.36;
  cursor: not-allowed;
  background: transparent;
}
.tpd-pill.is-disabled:hover,
.tpd-pill.is-disabled:focus-visible {
  border-color: var(--tpd-rule);
}
.tpd-pill.is-disabled:active { transform: none; }
.tpd-pill.is-disabled .tpd-pill-swatch {
  filter: grayscale(0.7);
}

/* Color swatch dot above the label */
.tpd-pill-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.08);
  flex: 0 0 auto;
}

.tpd-pill-label {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.1;
}

/* Caption — second line inside selected pill, drill affordance */
.tpd-pill-caption {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  font-family: var(--tpd-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--tpd-accent);
  cursor: pointer;
  /* Caption is its own touch target — generous tap area */
  min-height: 24px;
  /* Don't let long labels break layout */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tpd-pill-caption:hover {
  background: rgba(255, 255, 255, 0.85);
}
.tpd-pill-caption:active { transform: scale(0.97); }

.tpd-pill-caption-arrow {
  font-size: 11px;
  opacity: 0.7;
  flex: 0 0 auto;
}

.tpd-pill-caption-text {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

/* Icon-only caption — host opted in via drill.captionIcon. Caption
   becomes a compact glyph + arrow chip. Used by DC mood picker so
   the row reads as mood, not as a genre advertisement. May 9 2026. */
.tpd-pill-caption--icon-only {
  padding: 4px 7px;
  gap: 3px;
}
.tpd-pill-caption-icon {
  flex: 0 0 auto;
  font-size: 12px;
  line-height: 1;
  /* Icon doesn't inherit caps treatment — keep the glyph crisp */
  text-transform: none;
  letter-spacing: 0;
}

/* ─── Bottom sheet ────────────────────────────────────────── */

.tpd-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 9000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease;
}
.tpd-sheet-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

.tpd-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9001;
  background: var(--tpd-bg-surface);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.18);
  padding: 12px 16px max(20px, env(safe-area-inset-bottom)) 16px;
  transform: translateY(100%);
  transition: transform 280ms cubic-bezier(0.2, 0, 0, 1);
  max-height: 70vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.tpd-sheet.is-open {
  transform: translateY(0);
}

.tpd-sheet-grabber {
  width: 36px;
  height: 4px;
  background: var(--tpd-rule-strong);
  border-radius: 2px;
  margin: 0 auto 10px;
}

.tpd-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.tpd-sheet-title {
  font-family: var(--tpd-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--tpd-accent);
  flex: 1 1 auto;
}

.tpd-sheet-back,
.tpd-sheet-close {
  background: transparent;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: var(--tpd-ink-soft);
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.tpd-sheet-back:hover,
.tpd-sheet-close:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* ─── Sheet leaf grid ─────────────────────────────────────── */

.tpd-leaves {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.tpd-leaf {
  background: var(--tpd-bg-elev);
  border: 1px solid var(--tpd-rule);
  border-radius: 12px;
  padding: 14px 12px;
  font-family: var(--tpd-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--tpd-ink-strong);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  text-align: center;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: transform 120ms, background 160ms, border-color 160ms;
}

.tpd-leaf:hover { border-color: var(--tpd-rule-strong); }
.tpd-leaf:active { transform: scale(0.97); }

.tpd-leaf.is-selected {
  background: var(--tpd-accent-soft);
  border-color: var(--tpd-accent);
  color: var(--tpd-accent);
  font-weight: 600;
}

.tpd-leaf.is-flashing {
  /* 150ms flash after tap before sheet closes */
  background: var(--tpd-accent);
  color: white;
  border-color: var(--tpd-accent);
}

.tpd-leaf-arrow {
  font-size: 11px;
  opacity: 0.6;
  flex: 0 0 auto;
}

/* ─── Surprise me ─────────────────────────────────────────── */

.tpd-surprise {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 12px 16px;
  background: transparent;
  border: 1px dashed var(--tpd-rule-strong);
  border-radius: 12px;
  font-family: var(--tpd-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--tpd-ink-soft);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 160ms, border-color 160ms;
}

.tpd-surprise:hover {
  background: rgba(0, 0, 0, 0.03);
  border-color: var(--tpd-accent);
  color: var(--tpd-accent);
}
.tpd-surprise:active { transform: scale(0.98); }

/* ─── Reduced motion ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .tpd-pill,
  .tpd-leaf,
  .tpd-pill-caption,
  .tpd-surprise,
  .tpd-sheet,
  .tpd-sheet-backdrop {
    transition: none;
  }
}