/* ═════════════════════════════════════════════════════════════════════
   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; }

/* ─── 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; }

.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);
}