/* =============================================================================
 * Blueprint app — progressive disclosure patterns
 *
 *   .more-btn      "Show all N notes" list toggle (aria-expanded, says what it reveals)
 *   .xrow          list row that expands in place: key facts on the row, details beneath
 *   .disclose      <details> card whose summary previews what's inside
 *   .card-more / .confirm-more   secondary detail inside answer + confirm cards
 *   .hint          one-time contextual help, dismissed with "Got it"
 *
 * Reveal controls are always visible text, never an icon alone.
 * ============================================================================= */

/* Chevrons rotate when their control is open */
.xchev, .more-btn svg, .card-more summary svg, .confirm-more summary svg {
  transition: transform var(--t-med) var(--ease);
}
[aria-expanded="true"] > .xchev,
.more-btn[aria-expanded="true"] svg,
details[open] > summary .xchev,
details[open] > summary svg { transform: rotate(180deg); }

/* ─── "Show all N" ───────────────────────────────────────────────────────── */

.more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: var(--tap);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--link);
}
.more-btn svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.more-btn-plain { border-top: 0; margin-top: 4px; justify-content: flex-start; }
.more-body > :first-child { border-top: 1px solid var(--line); }
.more-body:not([hidden]) { animation: enter var(--t-med) var(--ease); }

/* ─── Expandable rows ────────────────────────────────────────────────────── */

.xrow + .xrow { border-top: 1px solid var(--line); }
.xrow > .row { border-top: 0; }
.xrow > .row[aria-expanded="true"] { background: var(--surface-2); }
.xchev { width: 18px; height: 18px; }
.xrow-body {
  padding: 4px 12px 14px 76px;
  background: var(--surface-2);
  animation: enter var(--t-med) var(--ease);
}
.xrow-summary { font-size: var(--fs-sm); color: var(--ink-2); }
.kv-tight { padding: 0; margin-top: 6px; }
.kv-tight div { padding: 7px 0; font-size: var(--fs-sm); }
.xrow-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.xrow-actions .btn { height: 40px; font-size: var(--fs-sm); }
.btn-primary { background: var(--blue); color: var(--ink-inv); }
.btn-primary:active { background: var(--blue-600); }
.metric { color: var(--ink); font-weight: 600; }
@media (max-width: 360px) { .xrow-body { padding-left: 12px; } }

/* ─── Details card (summary previews its contents) ───────────────────────── */

.disclose summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 10px 14px;
  list-style: none;
  cursor: pointer;
}
.disclose summary::-webkit-details-marker { display: none; }
.disclose[open] summary { border-bottom: 1px solid var(--line); }
.disclose .kv { animation: enter var(--t-med) var(--ease); }
.disclose summary:focus-visible { border-radius: var(--r-md); }

/* Next-up callout on job detail: the one fact that drives today's decision */
.next-up {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--wood-50);
  font-size: var(--fs-sm);
}
.next-up svg { width: 18px; height: 18px; color: var(--wood-ink); flex: none; }
.next-up b {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--wood-ink);
}

/* ─── Secondary detail inside voice answers and confirm cards ────────────── */

.card-more, .confirm-more { border-top: 1px solid var(--line); }
.card-more summary, .confirm-more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--tap);
  padding: 0 12px;
  list-style: none;
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--link);
}
.card-more summary::-webkit-details-marker,
.confirm-more summary::-webkit-details-marker { display: none; }
.card-more summary svg, .confirm-more summary svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
}
.card-more .kv-tight { padding: 0 12px 8px; }
.confirm-more { margin-top: 10px; border-top: 0; }
.confirm-more summary { padding: 0; color: var(--ink-2); font-weight: 500; }
.confirm-more p { padding-bottom: 6px; font-size: var(--fs-sm); color: var(--ink-2); }

/* ─── One-time contextual hint ───────────────────────────────────────────── */

.hint {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 12px 12px 14px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1.5px dashed var(--line-2);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  animation: enter var(--t-med) var(--ease);
}
.hint > svg { width: 22px; height: 22px; flex: none; margin-top: 1px; color: var(--navy); }
.hint p { flex: 1; }
.hint b { color: var(--ink); }
.hint-ok {
  flex: none;
  align-self: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: var(--surface);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--ink);
}
.hint-ok:focus-visible { border-radius: var(--r-pill); }