/**
 * TubeRaker — Submit-flow page styles (JB-2)
 * ---------------------------------------------------------------------------
 * Scoped additions for entries/submit.html only: the consent fieldset, the
 * draft-sync indicator, and the field-error summary. Token-only (var(--...)
 * from variables.css), rem-only (no px; the viewport meta lives in HTML),
 * mobile-first from 22.5rem, touch targets >= 2.75rem, correct in light AND
 * dark (all tokens flip on [data-theme]).
 * ---------------------------------------------------------------------------
 */

/* ---------------------------------------------------------------------------
   Local design token: always-white / on-brand foreground. Unlike
   --text-inverse (which flips to dark in the light theme) this stays white in
   both themes. Defined page-locally because variables.css is a shared file this
   sub-app may not edit — see shared_requests to promote it into variables.css
   as the canonical home (same rationale as voting.css / trends.css).
   --------------------------------------------------------------------------- */
:root {
  --color-white: #ffffff;
}

/* ===========================================================================
   Consent fieldset
   =========================================================================== */
.consent-fieldset {
  border: 0.0625rem solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  margin: 0;
}

.consent-fieldset__legend {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 0 var(--spacing-xs);
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
}

.consent-fieldset__intro {
  margin: var(--spacing-xs) 0 var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

/* Eligibility requirements shown inline above the matching consent row, so the
   attestation is informed. Indented to the consent text column and accented to
   read as evidence for the checkbox directly beneath it. */
.consent-eligibility {
  margin: var(--spacing-sm) 0 var(--spacing-xs);
  padding: var(--spacing-md);
  border-inline-start: 0.1875rem solid var(--color-brand-primary);
  border-radius: var(--radius-md);
  background: var(--bg-hover);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.consent-eligibility[hidden] {
  display: none;
}

.consent-eligibility__label {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin: 0 0 var(--spacing-sm);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.consent-eligibility__label > i {
  color: var(--color-brand-primary);
}

.consent-eligibility__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  color: var(--text-secondary);
}

.consent-eligibility__body p {
  margin: 0;
}

.consent-eligibility__link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  min-height: 2.75rem;
  margin-top: var(--spacing-xs);
  color: var(--color-brand-primary);
}

.consent-row {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  min-height: 2.75rem;
  padding: var(--spacing-sm) var(--spacing-xs);
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.consent-row:hover {
  background: var(--bg-hover);
}

.consent-row__box {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: 0.125rem;
  accent-color: var(--color-brand-primary);
  cursor: pointer;
}

.consent-row__box[aria-invalid="true"] {
  outline: 0.125rem solid var(--color-error);
  outline-offset: 0.125rem;
  border-radius: var(--radius-sm);
}

.consent-row__text {
  flex: 1 1 auto;
}

.consent-rules-link {
  color: var(--color-brand-primary);
  text-decoration: underline;
  white-space: nowrap;
}

.consent-rules-link:hover {
  color: var(--color-brand-primary-hover);
}

.consent-error {
  margin: 0 0 var(--spacing-xs) 2.25rem;
  min-height: 1rem;
  color: var(--color-error);
  font-size: var(--font-size-xs);
}

.consent-error:empty {
  min-height: 0;
  margin-bottom: 0;
}

/* ===========================================================================
   Draft-sync indicator
   =========================================================================== */
.draft-sync {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  min-height: 2.75rem;
  padding: 0 var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}

.draft-sync[hidden] {
  display: none;
}

.draft-sync--synced {
  color: var(--color-success);
}

.draft-sync--local {
  color: var(--text-secondary);
}

.draft-sync--unsaved {
  color: var(--color-warning);
}

.draft-sync i {
  font-size: var(--font-size-xs);
}

/* ===========================================================================
   Error summary
   =========================================================================== */
.form-error-summary {
  border: 0.0625rem solid var(--border-error);
  background: var(--color-error-bg);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  color: var(--text-primary);
}

.form-error-summary[hidden] {
  display: none;
}

.form-error-summary__title {
  margin: 0 0 var(--spacing-xs);
  font-weight: 600;
  font-size: var(--font-size-sm);
}

.form-error-summary__list {
  margin: 0;
  padding-left: var(--spacing-lg);
  font-size: var(--font-size-sm);
}

.form-error-summary__list li {
  margin-bottom: var(--spacing-xs);
}

/* Field-level invalid affordance on text controls (mirrors media aria-invalid). */
.form-input[aria-invalid="true"],
.form-textarea[aria-invalid="true"],
.tag-input-wrap__input[aria-invalid="true"] {
  border-color: var(--border-error);
}

.draft-restore__note {
  display: block;
  margin-top: var(--spacing-xs);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}

/* ===========================================================================
   Explicit optimistic-concurrency recovery
   =========================================================================== */
.draft-conflict {
  align-items: flex-start;
  margin-bottom: var(--spacing-md);
}

.draft-conflict[hidden] {
  display: none;
}

.draft-conflict:focus {
  outline: 0.125rem solid var(--color-brand-primary);
  outline-offset: 0.125rem;
}

.draft-conflict__actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
}

.draft-conflict__actions .btn {
  justify-content: center;
  min-height: 2.75rem;
}

/* ===========================================================================
   Actions row — keep the sync indicator + buttons readable on narrow screens
   =========================================================================== */
.form-actions__right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-sm);
}

@media (min-width: 30rem) {
  .draft-conflict__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (min-width: 48rem) {
  .form-actions__right {
    flex-wrap: nowrap;
  }
}