/*
  Routine Builder — page-specific styles.
  Tokens only. New classes: .segmented(+__item), .search-field, .search-results(+__*),
  .action-bar, and builder step-card helpers. Everything else reuses components.css.
*/

/* ── Page shell ── */
.builder {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding-top: var(--space-8);
  /* Clear the fixed mobile action bar so the last section isn't hidden under it
     (~72px bar + safe-area). Reset on desktop where the bar is in-flow. */
  padding-bottom: calc(88px + env(safe-area-inset-bottom));
  min-height: calc(100dvh - 65px);
}
/* Builder is an app-like tool with its own bottom action bar — the marketing
   site footer would sit under the fixed bar and read as a bottom gap. Hide it.
   (builder.css only loads on this page, so this is scoped to /builder.) */
.site-footer { display: none; }

/* Desktop: give the tool a bit more room than the narrow quiz column. */
@media (min-width: 768px) {
  .builder { max-width: var(--container-sm); padding-bottom: 0; }
}

.builder__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ── Header ── */
.builder__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.builder__eyebrow { align-self: flex-start; }
.builder__subtitle {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  text-wrap: pretty;
}

.builder__view-banner { align-items: center; }

/* ─────────────────────────────────────────────
   SEGMENTED CONTROL
───────────────────────────────────────────── */
.segmented {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1);
  background-color: var(--color-primary-50);
  border-radius: var(--radius-full);
}

.segmented__item {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2) var(--space-3);
  border: none;
  border-radius: var(--radius-full);
  background-color: transparent;
  color: var(--color-text-secondary);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.segmented__item:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.segmented__item:hover:not(.is-selected):not(:disabled) {
  color: var(--color-primary-700);
  background-color: color-mix(in srgb, var(--color-primary-100) 60%, transparent);
}

.segmented__item:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.segmented__item.is-selected {
  background-color: var(--color-surface);
  color: var(--color-primary-700);
  font-weight: var(--font-weight-semibold);
  box-shadow: var(--shadow-sm);
}

/* Sub control (AM/PM) — a touch smaller, sits directly beneath */
.segmented--sub { background-color: var(--color-bg-subtle); }

/* ─────────────────────────────────────────────
   SEARCH FIELD
───────────────────────────────────────────── */
.search-field {
  position: relative;
  display: flex;
  align-items: center;
}
.search-field__icon {
  position: absolute;
  left: var(--space-3);
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);
  pointer-events: none;
}
.search-field__input {
  /* leave room for the leading icon and trailing clear button */
  padding-left: calc(var(--space-4) + var(--space-5));
  padding-right: calc(var(--space-4) + var(--space-6));
}
.search-field__clear {
  position: absolute;
  right: var(--space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  border-radius: var(--radius-full);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}
.search-field__clear:hover { color: var(--color-text-primary); background-color: var(--color-primary-50); }
.search-field__clear:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* ── In-flow results (NOT absolute — pushes content, stays above keyboard) ── */
.search-results {
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  max-height: 320px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.search-results__empty {
  padding: var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}
.search-results__hint { padding-inline: var(--space-1); }

/* Branded loading row */
.search-results__loading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-4);
  color: var(--color-primary-600);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
}
.spin { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .spin { animation: none; }
}

.search-result {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}
.search-result:last-child { border-bottom: none; }

.search-result__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  flex: 1;
}
.search-result__name {
  font-size: var(--text-sm);           /* smaller so long titles fit */
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  overflow-wrap: anywhere;             /* wrap the full title, no ellipsis clipping */
}
.search-result__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.search-result__brand {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-500);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  white-space: nowrap;
}

.search-result__add {
  flex-shrink: 0;
  min-width: 44px;
  min-height: 44px;
}
.search-result__add.is-added {
  background-color: var(--color-success-light);
  border-color: var(--color-success-light);
  color: var(--color-success-dark);
  opacity: 1;               /* override .btn:disabled dimming — keep it legible */
}

/* ─────────────────────────────────────────────
   BUILT ROUTINE
───────────────────────────────────────────── */
.builder__routine-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.builder__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-6);
}
.builder__empty-icon {
  width: 40px;
  height: 40px;
  color: var(--color-primary-300);
}
.builder__empty-title {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}
.builder__empty-sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.builder__steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
}

.builder__step {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.builder__step-main {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
/* Footer row: reorder pulled left, delete pulled right. */
.builder__step-footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border-subtle);
}
.builder__step-move-group {
  display: flex;
  gap: var(--space-2);
}
.builder__step-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.builder__step-brand {
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-500);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}
.builder__step-name {
  font-size: var(--text-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  /* Wrap the full product name — no truncation on mobile. */
  overflow-wrap: anywhere;
}
.builder__step-cat { flex-shrink: 0; margin-top: 2px; }
.builder__step-move {
  min-width: 44px;
  min-height: 40px;
  padding: var(--space-2);
  color: var(--color-text-muted);
}
.builder__step-move:hover:not(:disabled) {
  color: var(--color-primary-600);
  background-color: var(--color-primary-50);
}
.builder__step-remove {
  /* Pull delete to the far right of the footer. */
  margin-left: auto;
  min-width: 44px;
  min-height: 40px;
  padding: var(--space-2);
  color: var(--color-text-muted);
}
.builder__step-remove:hover:not(:disabled) {
  color: var(--color-error);
  background-color: var(--color-error-light);
}

/* ── Title/description + manual link cards ── */
.builder__meta,
.builder__manual { padding: var(--space-5); }
.builder__meta-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.builder__meta-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.builder__view-title { font-size: var(--text-2xl); }
.builder__view-desc {
  margin-top: var(--space-2);
  color: var(--color-text-secondary);
  white-space: pre-wrap;
}
.builder__manual { display: flex; flex-direction: column; gap: var(--space-2); }

/* ─────────────────────────────────────────────
   ACTION BAR (sticky bottom, mobile-first)
───────────────────────────────────────────── */
.action-bar {
  /* Mobile: pinned edge-to-edge at the viewport bottom, always visible.
     Opaque so scrolled content doesn't show through. .builder adds matching
     bottom padding so the last content clears this bar. */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 16px 0 rgb(74 133 105 / 0.08);
  padding: var(--space-3) var(--space-4);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
}

/* Desktop has room — in-flow button, drop the white bar chrome. */
@media (min-width: 768px) {
  .action-bar {
    position: static;
    background: transparent;
    border-top: none;
    box-shadow: none;
    padding-inline: 0;
    padding-bottom: var(--space-2);
  }
}