/* ═════════════════════════════════════════════════════════════════════
   detail.css  ·  Inner content of the detail sheet (layer 1 body)
   Hero (tone varies by status), key/value sect cards, address blocks,
   the activity timeline, and the meta footer. Adapted from the
   reference modal.css; accent-themed; Relay status tones.
   ═════════════════════════════════════════════════════════════════════ */

.sect{ padding:18px 20px 4px; }
.sect-label{
  font-size:.6rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color: var(--muted); margin-bottom:10px;
}
.sect-card{
  background: var(--card);
  border:1px solid var(--border); border-radius:12px; padding:14px 16px;
}

/* ─── Booking details (schema-driven form submission) ─── */
.fs-loading{ padding:14px 16px; color: var(--muted); font-size:.78rem; }
.fs-group{ margin-bottom:10px; }
.fs-group:last-child{ margin-bottom:0; }
.fs-group-title{
  font-size:.7rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color: var(--accent-light); margin:0 0 6px 2px;
}
.fs-group + .sect-card{ margin-top:10px; }

/* ─── Photos (Lead Photo Uploads) — lazy thumbnail grid + lightbox ─── */
.photo-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(76px, 1fr)); gap:8px;
}
.photo-cell{
  padding:0; border:1px solid var(--border); border-radius:10px; overflow:hidden;
  background: var(--card); cursor:pointer; aspect-ratio:1; display:block;
  transition:border-color .15s, transform .1s;
}
.photo-cell:hover{ border-color: var(--accent-light); }
.photo-cell:active{ transform:scale(.98); }
.photo-cell img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-lightbox{
  position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.86); padding:24px;
}
.photo-lightbox img{ max-width:100%; max-height:100%; border-radius:8px; object-fit:contain; }
.photo-lightbox-close{
  position:fixed; top:14px; right:16px; width:40px; height:40px; border-radius:50%;
  border:none; background:rgba(255,255,255,.15); color:#fff; font-size:18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}

/* ─── Hero ─────────────────────────────────────────────── */
.hero{
  margin:16px 20px 4px; padding:16px 18px; border-radius:14px;
  background: linear-gradient(135deg, var(--blue-glow) 0%, var(--accent-glow) 100%);
  border:1px solid var(--accent-glow);
}
.hero-svc{ font-size:.65rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--accent-light); margin-bottom:6px; }
.hero-date{ font-family:'Bebas Neue', sans-serif; font-size:1.6rem; letter-spacing:.025em; line-height:1.05; }
.hero-meta{ font-size:.72rem; color: var(--muted2); margin-top:6px; }
.hero-est{ margin-top:11px; padding-top:11px; border-top:1px dashed var(--accent-glow); display:flex; justify-content:space-between; align-items:baseline; }
.hero-est-lbl{ font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; color: var(--muted2); font-weight:600; }
.hero-est-val{ font-family:'Bebas Neue', sans-serif; font-size:1.4rem; color: var(--accent-light); }

/* tone variants — status-driven (see js/badges.js deriveHeroState) */
.hero.tone-lead{ background: linear-gradient(135deg, rgba(122,142,175,.08) 0%, rgba(86,105,138,.04) 100%); border-color: var(--border); }
.hero.tone-lead .hero-svc{ color: var(--muted2); }
.hero.tone-lead .hero-est-val{ color: var(--text); }
.hero.tone-lead .hero-est{ border-top-color: var(--border); }

.hero.tone-waiting{ background: linear-gradient(135deg, rgba(34,211,238,.1) 0%, rgba(34,211,238,.04) 100%); border-color: rgba(34,211,238,.32); }
.hero.tone-waiting .hero-svc{ color:#67e8f9; }

.hero.tone-confirmed{ background: linear-gradient(135deg, rgba(34,197,94,.12) 0%, rgba(34,197,94,.04) 100%); border-color: rgba(34,197,94,.32); }
.hero.tone-confirmed .hero-svc{ color:#86efac; }
.hero.tone-confirmed .hero-est{ border-top-color: rgba(34,197,94,.18); }

.hero.tone-cancelled{ background: linear-gradient(135deg, rgba(248,113,113,.08) 0%, rgba(248,113,113,.03) 100%); border-color: rgba(248,113,113,.28); }
.hero.tone-cancelled .hero-svc{ color: var(--red); }
.hero.tone-cancelled .hero-date{ text-decoration: line-through; color: var(--muted2); }

.hero-status-chip{
  display:inline-block; margin-top:8px; padding:3px 9px; border-radius:100px;
  font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
}
.hero.tone-lead .hero-status-chip{ background: var(--card2); color: var(--muted2); border:1px solid var(--border); }
.hero.tone-waiting .hero-status-chip{ background: rgba(34,211,238,.12); color:#67e8f9; border:1px solid rgba(34,211,238,.3); }
.hero.tone-confirmed .hero-status-chip{ background: rgba(34,197,94,.14); color:#86efac; border:1px solid rgba(34,197,94,.32); }
.hero.tone-cancelled .hero-status-chip{ background: rgba(248,113,113,.12); color: var(--red); border:1px solid rgba(248,113,113,.32); }

/* ─── Key/value rows ───────────────────────────────────── */
.row{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:14px; padding:9px 0; border-bottom:1px solid var(--border); font-size:.78rem;
}
.row:last-child{ border-bottom:none; }
.row-lbl{ color: var(--muted2); font-weight:500; flex-shrink:0; }
.row-val{ text-align:right; font-weight:600; color: var(--text); word-break:break-word; }
.row-val a{ color: var(--blue-light); text-decoration:none; }
.row-val a:hover{ text-decoration:underline; }
.row-val .masked{ color: var(--muted2); font-variant-numeric: tabular-nums; letter-spacing:.04em; }

/* ─── Address block ────────────────────────────────────── */
.addr-block{ background: var(--card2); border:1px solid var(--border); border-radius:10px; padding:11px 13px; margin-top:8px; }
.addr-role{ font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--accent-light); margin-bottom:4px; }
.addr-text{ font-size:.8rem; font-weight:600; line-height:1.35; margin-bottom:9px; }
.addr-dir{
  display:inline-flex; align-items:center; gap:5px;
  font-size:.66rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color: var(--blue-light); text-decoration:none; padding:7px 11px;
  border:1.5px solid rgba(59,130,246,.3); border-radius:6px; background: rgba(37,99,235,.07);
  transition: all .13s; -webkit-tap-highlight-color: transparent;
}
.addr-dir:hover{ border-color: var(--blue-light); background: rgba(37,99,235,.15); }
.addr-dir svg{ width:12px; height:12px; }

/* ─── Activity timeline ────────────────────────────────── */
.activity-list{ position:relative; padding:4px 0 4px 20px; }
.activity-list::before{ content:""; position:absolute; left:7px; top:10px; bottom:10px; width:1.5px; background: var(--border); }
.activity-item{ position:relative; padding:0 0 14px; }
.activity-item:last-child{ padding-bottom:0; }
.activity-dot{ position:absolute; left:-19px; top:5px; width:9px; height:9px; border-radius:100px; background: var(--blue-light); border:2px solid var(--surface); box-shadow: 0 0 0 1px var(--border); }
.activity-dot.green{ background: var(--green); }
.activity-dot.red{ background: var(--red); }
.activity-dot.accent{ background: var(--accent-light); }
.activity-dot.muted{ background: var(--muted); }
.activity-row{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:2px; }
.activity-label{ font-size:.76rem; font-weight:700; color: var(--text); letter-spacing:.01em; }
.activity-time{ font-size:.6rem; color: var(--muted); font-weight:600; letter-spacing:.04em; flex-shrink:0; text-transform:uppercase; }
.activity-actor{ font-size:.6rem; color: var(--muted); font-weight:600; letter-spacing:.04em; text-transform:uppercase; margin-top:2px; }
.activity-empty{ padding:8px 0; font-size:.74rem; color: var(--muted); font-style:italic; }

/* ─── Meta footer + copy ───────────────────────────────── */
.l-meta{ padding:16px 20px 4px; font-size:.62rem; color: var(--muted); letter-spacing:.04em; line-height:1.55; }
.l-meta div{ padding:2px 0; word-break:break-all; }
.copy-link{
  display:inline-flex; align-items:center; gap:6px;
  background: var(--card2); border:1.5px solid var(--border); border-radius:8px;
  color: var(--muted2); font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:8px 13px; cursor:pointer; margin-top:14px;
  transition: all .14s; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.copy-link:hover{ border-color: var(--accent); color: var(--accent-light); background: var(--accent-glow); }
.copy-link svg{ width:13px; height:13px; stroke: currentColor; stroke-width:2; fill:none; stroke-linecap:round; stroke-linejoin:round; }

/* ─── Form fields inside action panels ─────────────────── */
.fld{ margin:0 16px 14px; }
.fld label{ display:block; font-size:.62rem; text-transform:uppercase; letter-spacing:.08em; color: var(--muted2); margin-bottom:6px; font-weight:600; }
.fld input, .fld select, .fld textarea{
  width:100%; background: var(--card2); border:1.5px solid var(--border); border-radius:8px;
  padding:11px 12px; color: var(--text); /* font-size inherits the 16px global floor */
}
.fld input:focus, .fld select:focus, .fld textarea:focus{ outline:none; border-color: var(--accent); }
.fld textarea{ min-height:72px; resize:none; }

.choice{ display:flex; align-items:flex-start; gap:10px; margin:0 16px 8px; padding:12px 14px; background: var(--card); border:1px solid var(--border); border-radius:10px; cursor:pointer; }
.choice input{ margin-top:2px; accent-color: var(--accent); flex-shrink:0; }
.choice-t{ font-size:.78rem; font-weight:600; }
.choice-s{ font-size:.66rem; color: var(--muted2); margin-top:2px; line-height:1.4; }

/* ═════════════════════════════════════════════════════════════════════
   NEXT STEP block (nextstep.js) — the signature stage-aware action set.
   Sits at the top of the detail body, under the contact grid. Reuses
   .l-btn (primary/ghost/danger); only the eyebrow, layout, note and a
   slightly taller primary are new.
   ═════════════════════════════════════════════════════════════════════ */
.next-step{
  margin:14px 16px 4px; padding:14px;
  background: var(--card);
  border:1px solid var(--border); border-radius:14px;
}
.ns-eyebrow{
  font-size:.62rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color: var(--accent-light); margin-bottom:10px;
}
/* Primary: a touch taller/louder than a normal .l-btn — it's the one thing
   the operator should do next. */
.next-step .l-btn.ns-primary{ padding:15px; font-size:.78rem; letter-spacing:.04em; }
.next-step .l-btn.ns-primary svg{ width:16px; height:16px; }

/* ── The meta row (ADR-021 N4/N2): countdown left · last-sent right.
   FIXED height — empty / countdown-only / timestamp-only / both all occupy
   the same strip so the button and rationale never shift. Colours are brand
   tokens only (N9): the :root accent is tenant-overridable (tier 4), so a
   hex literal here would break the cascade. */
.ns-meta{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  min-height:26px; margin-top:8px;
}
.ns-count{
  display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px;
  background:color-mix(in srgb, var(--green) 12%, transparent);
  border:1px solid color-mix(in srgb, var(--green) 30%, transparent);
  color:var(--green); font-size:.66rem; font-weight:600; letter-spacing:.01em;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.ns-count svg{
  width:12px; height:12px; flex:none;
  stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
  opacity:.85;
}
.ns-count.urgent{
  background:var(--accent-glow);
  border-color:color-mix(in srgb, var(--accent) 35%, transparent);
  color:var(--accent-light);
}
.ns-count.pulse{ animation:pulse 1.2s ease-in-out infinite; }
.ns-meta-manual{ font-size:.64rem; color:var(--muted); }
.ns-meta-last{
  margin-left:auto; font-size:.64rem; color:var(--muted2);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.ns-meta-last b{ color:var(--text); font-weight:600; }
.ns-meta-chip{
  display:inline-block; margin-left:6px; padding:1px 6px; border-radius:6px;
  background:var(--card2); border:1px solid var(--border); color:var(--muted2);
  font-family:ui-monospace,SFMono-Regular,monospace; font-size:.6rem;
}

.ns-secondaries{ display:grid; gap:8px; margin-top:8px; }
.ns-secondaries[data-count="2"]{ grid-template-columns:1fr 1fr; }
.ns-secondaries[data-count="3"]{ grid-template-columns:1fr 1fr 1fr; }
.next-step .l-btn.ns-sec{ padding:11px; font-size:.66rem; letter-spacing:.04em; }
.next-step .l-btn.ns-sec svg{ width:14px; height:14px; }

/* Buttons in the block carry their icon + a <span> label. */
.next-step .l-btn svg{ stroke: currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.next-step .l-btn.is-disabled,
.next-step .l-btn[disabled]{ opacity:.4; pointer-events:none; }

.ns-note{
  margin-top:11px; font-size:.72rem; line-height:1.5; color: var(--muted2);
}

/* ── The return capture (ADR-021 N3): "did you reach them?" ────────────
   Body-level overlay so it survives drawer repaints; sits above the layer
   stack. Tokens only. */
.cap-overlay{
  position:fixed; inset:0; z-index:1200;
  background:rgba(0,0,0,.55); backdrop-filter:blur(2px);
  display:flex; align-items:flex-end; justify-content:center;
  padding:16px; padding-bottom:max(16px, env(safe-area-inset-bottom));
}
.cap-card{
  width:100%; max-width:420px; padding:18px 16px 12px;
  background:var(--card); border:1px solid var(--border); border-radius:16px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.8);
}
.cap-title{ font-size:1.02rem; font-weight:800; letter-spacing:-.01em; }
.cap-sub{ margin-top:4px; font-size:.7rem; color:var(--muted2); }
.cap-note{
  width:100%; margin-top:12px; padding:10px 11px; resize:none;
  background:var(--bg); border:1px solid var(--border); border-radius:10px;
  color:var(--text); font-size:.8rem; font-family:inherit; line-height:1.45;
}
.cap-note:focus{ outline:none; border-color:var(--accent); }
.cap-actions{ display:grid; gap:8px; margin-top:12px; }
.cap-actions .l-btn{ width:100%; }
.cap-skip{
  display:block; width:100%; margin-top:6px; padding:11px;
  background:transparent; border:none; color:var(--muted2);
  font-size:.68rem; font-weight:600; cursor:pointer;
}
.cap-skip:hover{ color:var(--text); }

/* Offer section — the redeemed promo code chip */
.d-code{
  display:inline-block; font-family:"Bebas Neue",sans-serif; letter-spacing:.06em;
  font-size:.95rem; line-height:1; padding:4px 9px; border-radius:7px;
  color:var(--green,#16a34a); background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.28);
}