/*
 * Steady Hand theme pass for the screens beyond the request workspace: request composer,
 * templates, users, email settings and the centered verification cards.
 */

/* Field stacks keep their label on top when a sibling in the row carries help text. */
.field { align-content: start; }

/* Small labels read as plain text, not uppercase eyebrows. */
.wf-kicker {
  margin-bottom: 4px;
  color: var(--sh-text-2);
  font-size: var(--sh-text-sm);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* Section headers inside a panel: title and description, one rule beneath. */
.surface-header { padding: 16px 20px; }
.surface-header .wf-heading { font-size: var(--sh-text-lg); font-weight: 600; }
.surface-header .wf-copy { color: var(--sh-text-2); font-size: var(--sh-text-sm); }
.surface-header:has(> .tabs) { padding: 4px 20px 0; border-bottom: 0; }
.surface-header > .tabs { margin: 0; }

/* A preference row inside a panel is part of the panel, not a card within it. */
.surface .preference-card,
.surface-body > .preference-card { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.preference-list .preference-card + .preference-card { padding-top: 14px; border-top: 1px solid var(--sh-border); }
.preference-card small { display: block; color: var(--sh-text-2); font-size: var(--sh-text-sm); }
.preference-card .help { margin-top: 2px; font-size: var(--sh-text-xs); color: var(--sh-text-3); }

/* Account page (r006): the summary list reads as three flat preference rows. */
.account-list { padding: 0; }
.account-row-title { color: var(--sh-text-2); font-weight: 600; }
.account-row-main { color: var(--sh-text); }
.account-row-panel { border-top-style: solid; border-top-color: var(--sh-border); }
.account-row-facts { color: var(--sh-text); }
.saved-note { color: var(--sh-approved-text); }
.saved-note .icon { color: var(--sh-approved); }
.pending-change { padding: 12px 14px; border-radius: var(--sh-radius); background: var(--sh-accent-tint); }
.pending-change strong { color: var(--sh-text); }
.account-row-note.help { color: var(--sh-text-2); }

/* Composer: steps and starting point. */
.step-nav { gap: 4px; }
.step-button { min-height: 44px; gap: 10px; border-radius: var(--sh-radius); color: var(--sh-text-2); font-weight: 500; text-decoration: none; }
.step-button:hover { background: var(--sh-hover); color: var(--sh-text); }
.step-button.is-active { background: var(--sh-accent-tint); color: var(--sh-accent-press); font-weight: 600; box-shadow: none; }
.step-number { width: 24px; height: 24px; border: 1.5px solid var(--sh-border-strong); border-radius: 50%; background: var(--sh-surface); color: var(--sh-text-2); font-size: var(--sh-text-xs); font-weight: 600; }
.step-number .icon { width: 13px; height: 13px; }
.step-button.is-active .step-number { border-color: var(--sh-accent); color: var(--sh-accent-press); }
.step-button.is-complete .step-number { border-color: var(--sh-accent); background: var(--sh-accent); color: #ffffff; }

.form-section { padding: 24px; }
.form-section h2 { margin-bottom: 4px; font-size: var(--sh-text-xl); font-weight: 700; letter-spacing: -.01em; }
.form-section > p { color: var(--sh-text-2); }
.form-grid { gap: 18px; }
.form-actions { padding: 14px 24px; border-top-color: var(--sh-border); }
.reference-list + .button--ghost,
.field > .button--ghost { justify-self: start; }

.blank-card {
  border: 1px solid var(--sh-border);
  box-shadow: var(--sh-shadow-1);
}

.blank-card:hover { border-color: var(--sh-border-strong); }

.template-card { box-shadow: var(--sh-shadow-1); transition: border-color 150ms var(--sh-ease), box-shadow 150ms var(--sh-ease); }
.template-card h3 { font-size: var(--sh-text-lg); font-weight: 600; }
.template-card p { color: var(--sh-text-2); }

.summary-aside h2,
.aside-card h2 { font-size: var(--sh-text-lg); font-weight: 600; }
.summary-list dt { color: var(--sh-text-2); }
.summary-list dd { font-weight: 600; }
.summary-list div { border-bottom-color: var(--sh-border); }

.participant-row { box-shadow: none; }
.participant-identity small,
.profile-choice small { color: var(--sh-text-2); }
.profile-choice:hover { background: var(--sh-hover); }

/* Template checks: pass in green, open items in neutral text. */
.readiness li { color: var(--sh-text); }
.readiness .icon { color: var(--sh-text-3); }
.readiness [data-icon="check"] .icon,
.readiness [data-icon="check"] { color: var(--sh-approved); }
.readiness [data-icon="x"] .icon,
.readiness [data-icon="x"] { color: var(--sh-rejected-text); }

/* Collections: role and access are tags, not statuses. */
.collection-head { font-size: 11px; font-weight: 600; }
.collection-title a,
.user-link strong { color: var(--sh-text); }
.collection-title a:hover,
.user-link:hover strong { color: var(--sh-accent); }
.user-collection .badge--soft,
.collection .badge--soft { background: var(--sh-accent-tint); color: var(--sh-accent-press); }

/* The directory search always owns the remaining toolbar width on desktop. */
.user-toolbar.toolbar--full .toolbar-group { display: flex; width: 100%; min-width: 0; flex-wrap: nowrap; }
.user-toolbar.toolbar--full .search { flex: 1 1 auto; width: auto; min-width: 0; }
.user-toolbar.toolbar--full .select,
.user-toolbar.toolbar--full .result-count { flex: 0 0 auto; }

/* Detail pages. */
.detail-title-row h1 { font-size: var(--sh-text-route); font-weight: 600; line-height: 1.2; letter-spacing: -.015em; }
.detail-meta { color: var(--sh-text-2); }
.aside-card { padding: 18px 20px; }

/* Verification cards (sign in, setup, email change, invitation). */
.verify-card { padding: 32px; }
.verify-card h1 { font-size: var(--sh-text-2xl); font-weight: 700; letter-spacing: -.015em; }
.verify-card .error { color: var(--sh-rejected-text); }
.user-collection .access-label { color: var(--sh-text-2); font-size: var(--sh-text-sm); font-weight: 600; }
.user-form-actions { justify-content: flex-end; }
@media (max-width: 900px) { .user-detail-layout .detail-aside { grid-row: auto; } }

@media (max-width: 900px) {
  .step-nav { gap: 6px; padding-bottom: 2px; scroll-snap-type: x proximity; mask-image: linear-gradient(to right, rgb(0 0 0 / 100%) 85%, transparent); }
  .step-button { scroll-snap-align: start; padding-inline: 10px; }
}

@media (max-width: 700px) {
  .detail-title-row h1 { font-size: var(--sh-text-xl); }
  .form-section { padding: 18px 16px; }
  .form-actions { padding: 14px 16px; }
  .verify-card { padding: 24px 20px; }
  .user-toolbar .result-count { flex-basis: 100%; }
  .user-headline .detail-meta-separator { display: none; }
  .user-form-actions { position: fixed; z-index: 18; right: 0; bottom: 0; left: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--sh-border); background: var(--sh-surface); box-shadow: var(--sh-shadow-4); }
  .user-form-actions .button { width: 100%; min-height: 44px; }
}

@media (hover: none) {
  .step-button:hover { background: transparent; color: var(--sh-text-2); }
  .step-button.is-active:hover { background: var(--sh-accent-tint); color: var(--sh-accent-press); }
  .blank-card:hover { border-color: var(--sh-border); }
  .profile-choice:hover { background: var(--sh-surface); }
  .profile-choice[aria-pressed="true"]:hover { background: var(--sh-accent-tint); }
  .collection-title a:hover, .user-link:hover strong { color: var(--sh-text); }
}

/* Global error page: the product lockup above one calm card; the button is the single accent. */
.error-page { align-content: center; gap: 20px; }
.error-page .error-brand { min-height: auto; padding: 0; color: var(--sh-text); font-size: var(--sh-text-lg); }
.error-page .error-brand .brand-mark { width: 28px; height: 28px; font-size: 11px; }
.error-page .error-brand .brand-mark--logo { width: 30px; height: 30px; }
/* Verification pages carry the product lockup above the card, as the global error page does. */
.verify-page:has(> .verify-brand) { align-content: center; gap: 20px; }
.verify-brand { min-height: auto; padding: 0; color: var(--sh-text); font-size: var(--sh-text-lg); }
.verify-brand .brand-mark { width: 28px; height: 28px; font-size: 11px; }
.verify-brand .brand-mark--logo { width: 30px; height: 30px; }
.error-card .error-mark { border: 1px solid var(--sh-border); background: var(--sh-surface-sunken); color: var(--sh-text-2); }
.error-card .button { min-height: 40px; }
.error-card .error-secondary {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  margin-top: 6px;
  color: var(--sh-accent);
  font-size: var(--sh-text-md);
  font-weight: 600;
  text-underline-offset: 3px;
}
.error-card .error-secondary:hover { color: var(--sh-accent-hover); text-decoration-thickness: 2px; }
.error-card .error-status { margin-top: 14px; color: var(--sh-text-3); font-size: var(--sh-text-xs); font-variant-numeric: tabular-nums; }

@media (max-width: 700px) {
  .error-card .button, .error-card .error-secondary { min-height: 44px; }
}
@media (max-width: 700px) { .user-profile-form { padding-bottom: 76px; } }