/* ═══════════════════════════════════════════════════════
   Obzek.io — shared tool UI primitives.

   The step-by-step shell every tool wears: numbered panels that
   tick themselves off, segmented pickers and preset chips for the
   handful of choices that matter, and one <details> drawer holding
   everything that doesn't. Tokens come from the host app's
   css/app.css :root — this file only adds components.
   ═══════════════════════════════════════════════════════ */

/* ─── STEP STATE ────────────────────────────────────── */
/* A step that still needs something from you keeps its number; one
   that's satisfied swaps to a tick, so the column reads as a
   checklist at a glance. */
.panel.done .step {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  border-color: transparent;
  color: #1a0d00;
  font-size: 0;
}
.panel.done .step::after {
  content: '✓';
  font-size: .78rem;
  line-height: 1;
}
.panel.done > .panel-head h2 { color: var(--text); }

/* The gift tag is a step too, even though it lives in its own component. */
.gift-tag-head h3 { display: flex; align-items: center; gap: .6rem; }

/* A tag is a business-card-sized thing. Given a panel of its own in a wide
   column it would otherwise stretch to twice the width of the card it's
   previewing, so hosts that do that mark the panel `.panel-gift`. */
.panel-gift .gift-tag { max-width: 27rem; margin-inline: auto; }

.pill-optional {
  font-family: var(--font-head); font-size: .58rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-muted); border: 1px solid var(--border);
  border-radius: 100px; padding: .12rem .45rem; white-space: nowrap;
}

/* Sub-label under a step heading: says what this step is for in
   plain words, so the panel doesn't rely on the control names. */
.panel-lede {
  font-size: .78rem; color: var(--text-sub);
  margin: -.5rem 0 1rem;
}

/* Vertical rhythm for the two or three groups a step panel holds now
   that the long control grids have moved into the drawer. */
.stack { display: flex; flex-direction: column; gap: 1.1rem; }

/* ─── SEGMENTED PICKER ──────────────────────────────── */
/* For the two-to-five-way choices that used to be <select>s. Seeing
   every option at once is the difference between a decision and a
   menu you have to open first. */
.seg {
  display: flex; gap: .25rem;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 10px; padding: 3px;
}
.seg-btn {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: .05rem;
  border: none; background: transparent; cursor: pointer;
  font-family: var(--font-body); font-size: .76rem; font-weight: 500;
  color: var(--text-sub); padding: .4rem .35rem; border-radius: 8px;
  white-space: nowrap; transition: background .18s, color .18s;
}
.seg-btn small {
  font-size: .6rem; letter-spacing: .04em; opacity: .7;
  font-variant-numeric: tabular-nums;
}
.seg-btn:hover:not(.active) { color: var(--text); background: rgba(109,40,217,.16); }
.seg-btn.active {
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: #1a0d00; font-weight: 700;
}
.seg-btn.active small { opacity: .8; }
.seg-btn:focus-visible { outline: 2px solid var(--purple-vivid); outline-offset: 1px; }

/* ─── PRESET CHIPS ──────────────────────────────────── */
/* One click that sets a whole cluster of advanced values. The chips
   deselect themselves the moment a value underneath is edited by
   hand, so the label never claims more than it delivers. */
.presets {
  display: grid; gap: .5rem;
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
}
.preset {
  display: flex; flex-direction: column; gap: .1rem; text-align: left;
  padding: .6rem .7rem; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-surface);
  color: var(--text-sub); font-family: var(--font-body); transition: .15s ease;
}
.preset:hover { border-color: var(--purple-vivid); background: rgba(109,40,217,.12); color: var(--text); }
.preset.active { border-color: var(--gold-bright); background: rgba(245,158,11,.08); color: var(--text); }
.preset strong {
  font-family: var(--font-head); font-size: .8rem; font-weight: 600;
  letter-spacing: -.01em; color: var(--text);
}
.preset span { font-size: .68rem; line-height: 1.35; }

/* ─── ADVANCED DRAWER ───────────────────────────────── */
/* Everything a first-time gift-maker never has to open. Dashed edge
   and no card fill so it reads as an aside, not another step. */
.adv {
  border: 1px dashed var(--border);
  border-radius: var(--r);
  background: rgba(10, 6, 25, .45);
  padding: 0;
}
.adv > summary {
  display: flex; align-items: center; gap: .55rem;
  padding: .85rem 1.1rem; cursor: pointer; list-style: none;
  font-family: var(--font-head); font-size: .8rem; font-weight: 600;
  color: var(--text-sub); border-radius: var(--r);
}
.adv > summary::-webkit-details-marker { display: none; }
.adv > summary::marker { content: ''; }
.adv > summary:hover { color: var(--text); }
.adv > summary:focus-visible { outline: 2px solid var(--purple-vivid); outline-offset: -2px; }
.adv-chev { flex: none; transition: transform .2s ease; }
.adv[open] .adv-chev { transform: rotate(90deg); }
.adv-note { margin-left: auto; font-family: var(--font-body); font-weight: 400; font-size: .7rem; color: var(--text-muted); }
.adv[open] > summary { border-bottom: 1px dashed var(--border); border-radius: var(--r) var(--r) 0 0; }

.adv-body { padding: 1.1rem; }
.adv-group + .adv-group { margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--border); }
.adv-group-title {
  font-family: var(--font-head); font-size: .66rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: .75rem;
}
.adv-group > .btn-tiny { margin-top: .85rem; }

/* ─── RIGHT RAIL ────────────────────────────────────── */
/* The rail is two panels now — a sticky stage that follows you down
   the form, and the finished gift below it. */
.col-preview { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }

@media (max-width: 640px) {
  /* The drawer's contents list is a nicety; the label has to fit. */
  .adv-note { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .adv-chev { transition: none; }
}