/* ============================================================
   Site-wide form rhythm

   Loaded after page styles so every form shares the same spacing, control
   height and interaction states while specialized controls (search, message
   composer, switches and the email designer) keep their compact layouts.
   ============================================================ */

:root {
  --form-control-h: 44px;
  --form-gap: 18px;
  --form-label-gap: 7px;
}

/* Control details that should feel consistent everywhere. */
:root input[type="checkbox"],
:root input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--accent);
}

:root input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="hidden"]),
:root select {
  min-height: var(--form-control-h);
}

:root textarea {
  min-height: 112px;
  resize: vertical;
}

:root input:disabled,
:root select:disabled,
:root textarea:disabled {
  cursor: not-allowed;
  opacity: .62;
}

/* Labels: same weight, readable line-height, and predictable field gap. */
.field-label,
.magic-label,
.modal-label,
.form-label,
.profile-label {
  color: var(--ink-2);
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.35;
}

.modal-label > .modal-input,
.modal-label > input,
.modal-label > select,
.modal-label > textarea,
.email-fields label > .modal-input,
.email-automation-form label > .modal-input {
  display: block;
  width: 100%;
  margin-top: var(--form-label-gap);
}

.magic-hint,
.form-hint,
.modal-note,
.dash-note {
  line-height: 1.5;
}

/* Contact, bug-report, privacy and urgent-removal forms. */
.contact-form {
  display: grid;
  gap: var(--form-gap);
}

.contact-form > .field-label {
  margin: 0 0 calc(-1 * (var(--form-gap) - var(--form-label-gap)));
}

.contact-form > .seg {
  margin-top: -2px;
}

.contact-form > .magic-hint {
  margin: -7px 0 0;
}

.seg {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.seg-opt {
  min-height: 42px;
  padding: 9px 13px;
  line-height: 1.35;
}

.check-row,
.modal-check,
.auth-consent-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.5;
}

.check-row {
  padding: 13px 14px;
  border: 1px solid var(--input-border);
  border-radius: var(--r-input);
  background: var(--input-bg);
  color: var(--ink-2);
  font-size: .84rem;
  cursor: pointer;
}

.check-row:has(input:checked) {
  border-color: var(--accent-glow);
  background: var(--accent-soft);
  color: var(--ink);
}

.form-submit {
  min-height: var(--form-control-h);
  margin-top: 0;
}

/* Fragrance image CAPTCHA. The checkbox stays keyboard-focusable while the
   visual tile provides a large hit target and a clear selected state. */
.fragrance-captcha {
  min-width: 0;
  margin: 2px 0 0;
  padding: 16px;
  border: 1px solid var(--input-border);
  border-radius: var(--r-input);
  background: var(--input-bg);
}

.fragrance-captcha-legend {
  padding: 0 6px;
  color: var(--ink-2);
  font-size: .8rem;
  font-weight: 700;
}

.fragrance-captcha-prompt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px;
  color: var(--ink-2);
  font-size: .9rem;
}

.fragrance-captcha-prompt strong {
  color: var(--ink);
  font-size: 1rem;
}

.fragrance-captcha .magic-hint {
  margin: 5px 0 12px;
}

.fragrance-captcha-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.fragrance-captcha-option {
  position: relative;
  display: block;
  min-width: 0;
  cursor: pointer;
}

.fragrance-captcha-option > input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.fragrance-captcha-tile {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 1;
  border: 2px solid transparent;
  border-radius: 9px;
  background: #f5f3f0;
  box-shadow: 0 0 0 1px var(--input-border);
  transition: border-color .16s ease, box-shadow .16s ease,
              transform .16s ease;
}

.fragrance-captcha-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
}

.fragrance-captcha-option:hover .fragrance-captcha-tile {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px var(--accent-glow), 0 5px 14px rgba(0, 0, 0, .12);
}

.fragrance-captcha-option > input:focus-visible + .fragrance-captcha-tile {
  outline: 3px solid var(--accent-glow);
  outline-offset: 3px;
}

.fragrance-captcha-option > input:checked + .fragrance-captcha-tile {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.fragrance-captcha-number,
.fragrance-captcha-check {
  position: absolute;
  top: 6px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
}

.fragrance-captcha-number {
  left: 6px;
  background: rgba(22, 18, 20, .72);
}

.fragrance-captcha-check {
  right: 6px;
  opacity: 0;
  background: var(--accent);
  font-size: .9rem;
  transform: scale(.7);
  transition: opacity .14s ease, transform .14s ease;
}

.fragrance-captcha-option > input:checked + .fragrance-captcha-tile .fragrance-captcha-check {
  opacity: 1;
  transform: scale(1);
}

/* Sign-in and small account forms. */
.magic-form {
  display: grid;
  gap: 8px;
}

.magic-form .magic-label,
.magic-form .magic-hint {
  margin: 0;
}

.magic-row {
  align-items: stretch;
}

.magic-row .acct-btn,
.oauth-btn {
  min-height: var(--form-control-h);
}

.preference-form {
  display: grid;
  justify-items: start;
  gap: 12px;
  margin-top: 18px;
}

.preference-form .auth-consent-label {
  max-width: 68ch;
}

.appeal-form {
  display: grid;
  gap: 10px;
}

.appeal-form .magic-label,
.appeal-form .modal-input {
  margin: 0;
}

/* Forum editors, listings and profile editor. */
.forum-form {
  width: 100%;
}

.forum-form > .form-label {
  margin: 20px 0 var(--form-label-gap);
}

.forum-form > .form-label:first-child {
  margin-top: 0;
}

.forum-form > .form-hint {
  margin-top: 7px;
}

.forum-form > .form-row {
  margin-top: 22px;
}

.listing-fields {
  margin: 22px 0 2px;
  padding: 18px;
}

.listing-fields legend {
  padding: 0 9px;
  color: var(--ink);
  font-size: .86rem;
}

.listing-grid {
  gap: 15px;
}

.listing-grid label,
.listing-item label {
  gap: var(--form-label-gap);
  line-height: 1.35;
}

.listing-item {
  gap: 14px;
  padding: 16px 40px 16px 16px;
  margin-bottom: 12px;
}

.listing-items-head {
  gap: 12px;
  margin-bottom: 7px;
}

.listing-items-hint {
  line-height: 1.5;
}

.listing-filters > .form-input,
.listing-filters > .acct-btn {
  min-height: var(--form-control-h);
}

.profile-edit .form-label {
  margin: 18px 0 var(--form-label-gap);
}

.profile-edit .form-label:first-child {
  margin-top: 0;
}

/* Admin configuration forms. */
.ad-admin-form {
  gap: 18px;
  padding: 20px;
  border-radius: 14px;
}

.ad-admin-form .ad-form-grid {
  gap: 16px;
}

.ad-admin-form .modal-label {
  margin: 0;
}

.ad-admin-form .modal-input {
  min-height: var(--form-control-h);
}

.ad-admin-form textarea.modal-input {
  min-height: 92px;
}

.ad-admin-form .msg-actions {
  margin-top: 2px;
}

.aff-universal {
  padding: 16px;
}

.aff-param-group {
  gap: 10px;
}

.aff-param-lbl .modal-input {
  margin-top: var(--form-label-gap);
}

.ad-active-check {
  min-height: var(--form-control-h);
  padding: 0 3px;
  align-items: center;
}

/* Price-alert and shared action modals. */
.price-alert-form {
  gap: 16px;
}

.modal-field {
  gap: var(--form-label-gap);
  line-height: 1.35;
}

.site-modal-actions,
.modal-actions {
  gap: 10px;
  margin-top: 6px;
}

.modal-primary,
.modal-secondary,
.modal-actions .acct-btn {
  min-height: 42px;
}

/* Inline forms still align cleanly without becoming oversized. */
.dir-search,
.stats-daterange,
.username-edit,
.friends-add-form,
.dm-compose,
.dm-send-row {
  align-items: stretch;
}

.dir-search .acct-btn,
.stats-daterange .stats-range,
.username-edit .acct-btn,
.friends-add-form .acct-btn {
  min-height: var(--form-control-h);
}

.dm-compose .dm-to-input,
.dm-compose .acct-btn,
.dm-send textarea.dm-send-input,
.dm-send-row .acct-btn {
  min-height: 40px;
}

/* The campaign designer is intentionally dense and has its own control
   system; only the surrounding admin forms use the standard 44px rhythm. */
.ed-shell input,
.ed-shell select,
.ed-shell textarea {
  min-height: 0;
}

.ed-shell input[type="checkbox"],
.ed-shell input[type="radio"] {
  width: auto;
  height: auto;
}

.email-editor-block textarea {
  min-height: 72px;
}

@media (max-width: 700px) {
  .fragrance-captcha {
    padding: 12px;
  }

  .fragrance-captcha-grid {
    gap: 5px;
  }

  .magic-row,
  .dir-search,
  .stats-daterange,
  .username-edit {
    flex-direction: column;
    align-items: stretch;
  }

  .magic-row > *,
  .dir-search > *,
  .username-edit > * {
    width: 100%;
    max-width: none;
  }

  .stats-daterange {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .stats-daterange .stats-apply {
    grid-column: 1 / -1;
  }

  .listing-fields,
  .ad-admin-form {
    padding: 16px;
  }

  .listing-grid,
  .listing-item {
    grid-template-columns: 1fr;
  }

  .listing-grid > *,
  .listing-item > *,
  .listing-item label:first-child,
  .listing-item .li-image {
    grid-column: 1 / -1;
  }

  .listing-items-head {
    align-items: stretch;
    flex-direction: column;
  }

  .site-modal-actions,
  .modal-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  .seg {
    display: grid;
    grid-template-columns: 1fr;
  }

  .site-modal-actions,
  .modal-actions {
    grid-template-columns: 1fr;
  }
}

/* Account settings: descriptions, fields and actions each have room to breathe. */
.account-settings:not([hidden]) { display: grid; gap: 24px; }
.account-settings > .dash-section { margin: 0; padding: clamp(20px, 3vw, 28px); }
.account-settings .dash-section-hd { margin-bottom: 16px; }
.account-settings .dash-section-hd h2 { line-height: 1.35; }
.account-settings .dash-note { font-size: .875rem; line-height: 1.65; }
.account-settings .dash-section > .dash-note { margin: 0; max-width: 72ch; }
.account-settings .dash-section > .dash-note + .deal-log-actions,
.account-settings .dash-section > .dash-note + .delete-form { margin-top: 20px; }
.account-settings .deal-log-actions { gap: 12px; }
.account-settings .acct-btn,
.account-settings .danger-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; }
.account-settings .avatar-edit { align-items: flex-start; gap: 24px; }
.account-settings .avatar-edit-controls .dash-note { margin: 0 0 16px; }
.account-settings .avatar-btns { gap: 10px; }
.account-settings .avatar-color { margin-top: 24px; }
.account-settings .avatar-color .dash-note { margin-bottom: 12px; }
.account-settings .username-msg:empty { display: none; }
.account-settings .username-msg:not(:empty) { margin: 12px 0 0; }
.account-settings .username-edit { flex-direction: row; align-items: stretch; gap: 12px; }
.account-settings .username-field { position: relative; flex: 1; min-width: 0; max-width: 400px; }
.account-settings .username-field .username-input { width: 100%; max-width: none; min-height: 44px; padding-left: 32px; }
.account-settings .username-field .username-at { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.account-settings .username-edit > .acct-btn { width: auto; flex: 0 0 auto; }
.account-profile-details { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--glass-line); }
.account-profile-details > div { display: grid; gap: 6px; min-width: 0; }
.account-detail-label { color: var(--ink-3); font-size: .75rem; font-weight: 600; }
.account-detail-value { color: var(--ink); font-size: .875rem; overflow-wrap: anywhere; }
.account-settings .preference-form { margin: 24px 0 0; padding-top: 22px; border-top: 1px solid var(--glass-line); gap: 18px; }
.account-settings .preference-form .auth-consent-label { line-height: 1.6; }
.account-settings .delete-form { margin-bottom: 0; }
.account-settings .dash-danger { border-color: color-mix(in srgb, var(--accent) 24%, var(--glass-line)); }

/* Google brand asset: developers.google.com/identity/branding-guidelines. */
.oauth-btn:is(.oauth-btn--google, .oauth-btn--discord, .oauth-btn--microsoft) {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) 20px; align-items: center; gap: 10px;
  min-height: 44px; width: 100%; margin: 0; padding: 11px 12px;
  border: 1px solid #747775; border-radius: 999px; background: #fff; color: #1f1f1f;
  font-family: 'Google Sans', Arial, sans-serif; font-size: 14px; line-height: 20px; font-weight: 500;
  letter-spacing: .1px; box-shadow: 0 1px 2px rgba(0,0,0,.04); text-align: center; cursor: pointer;
  transform: none; transition: background-color .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.oauth-btn:is(.oauth-btn--google, .oauth-btn--discord, .oauth-btn--microsoft)::after { content: ''; width: 20px; }
.oauth-btn:is(.oauth-btn--google, .oauth-btn--discord, .oauth-btn--microsoft) > img { display: block; width: 20px; height: 20px; object-fit: contain; flex: 0 0 auto; }
.oauth-btn:is(.oauth-btn--google, .oauth-btn--discord, .oauth-btn--microsoft):hover { background: #f8faff; border-color: #747775; box-shadow: 0 2px 6px rgba(0,0,0,.12); transform: none; }
.oauth-btn:is(.oauth-btn--google, .oauth-btn--discord, .oauth-btn--microsoft):focus-visible { outline: 3px solid rgba(66,133,244,.55); outline-offset: 3px; }
.oauth-btn:is(.oauth-btn--google, .oauth-btn--discord, .oauth-btn--microsoft):active { background: #edf2fc; box-shadow: none; }
.oauth-btn:is(.oauth-btn--google, .oauth-btn--discord, .oauth-btn--microsoft).is-disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }
.oauth-btn:is(.oauth-btn--google, .oauth-btn--discord, .oauth-btn--microsoft).is-disabled:hover { background: #fff; box-shadow: none; }
:root[data-theme="dark"] .oauth-btn:is(.oauth-btn--google, .oauth-btn--discord, .oauth-btn--microsoft) { background: #fff; color: #1f1f1f; border-color: #dadce0; }
:root[data-theme="dark"] .oauth-btn:is(.oauth-btn--google, .oauth-btn--discord, .oauth-btn--microsoft):hover { background: #eef3fe; }
:root[data-theme="dark"] .oauth-btn:is(.oauth-btn--google, .oauth-btn--discord, .oauth-btn--microsoft).is-disabled:hover { background: #fff; }

/* Linked identities read as account connections rather than a plain text list. */
.linked-accounts-list { list-style: none; padding: 0; margin: 22px 0 0; border: 1px solid var(--glass-line); border-radius: 16px; background: var(--glass); overflow: hidden; }
.linked-account-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px; }
.linked-account-row + .linked-account-row { border-top: 1px solid var(--glass-line); }
.linked-account-provider { display: flex; align-items: center; gap: 14px; min-width: 0; }
.linked-provider-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; border: 1px solid #e5e7eb; background: #fff; }
.linked-provider-icon img { width: 22px; height: 22px; object-fit: contain; }
.linked-account-identity { display: grid; gap: 5px; min-width: 0; font-size: .875rem; }
.linked-account-identity strong { color: var(--ink); font-weight: 600; }
.linked-account-identity > span { color: var(--ink-2); line-height: 1.5; overflow-wrap: anywhere; }
.linked-account-status { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 6px 10px; border: 1px solid rgba(24,119,70,.2); border-radius: 999px; background: rgba(24,119,70,.08); color: #187746; font-size: .75rem; font-weight: 600; }
.linked-account-status .ui-icon { width: 13px; height: 13px; }
:root[data-theme="dark"] .linked-account-status { background: rgba(74,222,128,.1); border-color: rgba(134,239,172,.22); color: #86efac; }
.linked-account-connect { margin: 14px 0 0; }
.linked-account-connect-button { display: flex; align-items: center; gap: 16px; width: 100%; padding: 18px; border: 1px dashed var(--glass-line); border-radius: 16px; background: var(--glass); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.linked-account-connect-button strong { font-size: .875rem; font-weight: 600; }
.linked-account-connect-button:hover { border-color: var(--accent); background: var(--accent-soft); }
.linked-account-connect-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.linked-account-connect-arrow { margin-inline-start: auto; color: var(--ink-2); }
.linked-account-notice { padding: 12px 16px; margin: 20px 0 0; border: 1px solid rgba(226,55,68,.25); border-radius: 12px; color: var(--ink-2); background: var(--accent-soft); font-size: .875rem; line-height: 1.6; }
.linked-account-notice--success { border-color: rgba(24,119,70,.25); background: rgba(24,119,70,.08); }

/* A familiar provider button, then a clear transition to password sign-in. */
.auth-card--signin { max-width: 440px; padding: clamp(24px, 5vw, 32px); }
.auth-card--signin .auth-title { line-height: 1.3; margin-bottom: 10px; }
.auth-card--signin .auth-sub { line-height: 1.6; margin-bottom: 24px; }
.auth-card--signin .auth-consent { margin: 0 0 20px; padding: 14px; background: var(--glass); border: 1px solid var(--glass-line); border-radius: 12px; text-align: left; }
.auth-card--signin .auth-consent-label { font-size: .8125rem; line-height: 1.6; }
.auth-card--signin .oauth-form { margin: 0; }
.auth-card--signin > .oauth-form + .oauth-form { margin-top: 10px; }
.auth-card--signin .auth-divider { margin: 22px 0; gap: 10px; font-size: .75rem; line-height: 1.4; }
.auth-card--signin .magic-form .magic-label:not(:first-of-type) { margin-top: 8px; }
.auth-card--signin .magic-form > .acct-btn { margin-top: 12px; min-height: 44px; }
.auth-card--signin > .magic-hint { margin-top: 16px; line-height: 1.6; }
.auth-card--signin > .auth-consent-hint { margin-bottom: 18px; }
.auth-card--signin > .oauth-form:last-child { margin-top: 20px; }
@media (max-width: 480px) {
  .account-settings:not([hidden]) { gap: 18px; }
  .account-settings .avatar-edit { gap: 18px; }
  .account-settings .avatar-edit-controls { min-width: 0; width: 100%; flex-basis: 100%; }
  .account-settings .username-field { max-width: none; }
  .linked-account-row { flex-wrap: wrap; gap: 12px; padding: 16px; }
  .linked-account-status { margin-left: 58px; }
  .account-profile-details { align-items: flex-start; }
}