/* =========================================================================
   Pre-call — Use-case + scenario preset picker (two-row hierarchical card)

   Each row visually surfaces (label / value / action) and overlays an
   invisible <select> for native keyboard, mobile, and screen-reader
   support. The child row carries a branch line on the left to make the
   parent → child hierarchy explicit.
   ========================================================================= */

.preset-card {
  padding: 0;
  overflow: hidden;
}

.preset-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1.25rem;
  transition: background-color var(--dur-micro) var(--ease);
}

.preset-row + .preset-row {
  border-top: 1px solid var(--border);
}

.preset-row:hover {
  background: var(--surface-hover);
}

/* Native <select> sits invisibly over the whole row so any click or
   focus on the row opens the native dropdown. font-size: 16px avoids
   the iOS auto-zoom on focus. The <select>'s own bg/color must match
   the theme so Chromium / Firefox paint the popup with theme colors
   rather than the OS default white — option-level rules below pin
   each row of the popup explicitly. */
.preset-row-select {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  border: 0;
  background: var(--surface);
  color: var(--text);
  font-size: 16px;
  z-index: 2;
}

/* Style the popup list rows directly. <option> styling is one of the
   few hooks browsers honor inside the native dropdown — Chromium and
   Firefox respect background + color here; Safari is partial but at
   least the colors won't clash. */
.preset-row-select option {
  background-color: var(--surface);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 0.5rem 0.75rem;
}

.preset-row-select option:checked {
  background-color: var(--accent-soft);
  color: var(--text);
  font-weight: 600;
}

/* Placeholder option ("-- Select a … --") sits at the top — render
   muted + italic so users can tell it apart from real choices. */
.preset-row-select option[value=""] {
  color: var(--text-muted);
  font-style: italic;
}

/* Focus ring lives on the row, driven by the underlying select focus. */
.preset-row:has(.preset-row-select:focus-visible) {
  outline: 2px solid var(--teal-border);
  outline-offset: -2px;
}

/* ---- Primary row (CALL TYPE) ------------------------------------------- */

.preset-row--primary {
  padding-top: 0.95rem;
  padding-bottom: 0.95rem;
}

.preset-row-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1 1 auto;
  min-width: 0;
}

.preset-row-label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.preset-row-value {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Child row value is a hair smaller — the use case is the headline,
   the scenario is the detail underneath it. */
.preset-row--child .preset-row-value {
  font-size: 0.88rem;
}

/* The "<bold name> — <description>" pattern in scenario titles. The
   second span is rendered in regular weight + dimmer color. */
.preset-row-value-detail {
  font-weight: 400;
  color: var(--text-dim);
}

.preset-row-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: 0 0 auto;
  color: var(--text-muted);
}

.preset-row-chevron {
  width: 12px;
  height: 12px;
  color: var(--text-muted);
  transition: transform var(--dur-micro) var(--ease);
}

.preset-row:hover .preset-row-chevron {
  color: var(--text-dim);
}

/* ---- Child row (SCENARIO) — indented with branch line ----------------- */

.preset-row--child {
  padding-left: 3rem;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.preset-row--child .preset-row-label--inline {
  flex: 0 0 auto;
}

.preset-row--child .preset-row-value--inline {
  flex: 1 1 auto;
  min-width: 0;
}

/* Branch line: small "L" anchored to the row's top edge, curving into
   the indent column. Drawn with two borders + a bottom-left radius.
   The exact geometry lines up the corner with the SCENARIO label. */
.preset-row-branch {
  position: absolute;
  left: 1.5rem;
  top: -0.05rem;
  width: 1rem;
  height: 1.15rem;
  border-left: 1px solid var(--border-emph);
  border-bottom: 1px solid var(--border-emph);
  border-bottom-left-radius: 8px;
  pointer-events: none;
}