/* Attendee profile screen (/profile). Loaded only there -- see TicketLayout.
   Builds on the shared .form-field / .inline-status / .organizer-checkbox-row
   rules in /styles/app.css and the .field-error / .detail-card rules in
   ticket.css rather than repeating them. */

/* ---- field spacing ------------------------------------------------------
   profile.js stacks one .form-field per question directly inside this div
   with no gap of its own -- every kind (text/select/consent/checkbox, and
   the multi_select fieldset, and the icon field) carries the .form-field
   class, see fieldRowHTML -- so without this, one field's help text sits
   flush against the next field's title. The shared .form-field { gap: 8px }
   rule in /styles/app.css already keeps each field's own label/control/
   counter/help/error close together; this only adds room *between*
   fields. */
#profile-fields {
  display: grid;
  gap: 28px;
}

/* .form-actions (the Save button) is a sibling of #profile-fields, not one
   of its grid items -- #661's 28px field rhythm above stops at the fields
   grid's own edge, so the CoC checkbox (the last field) and Save otherwise
   sit flush against each other. Same 28px, kept here rather than on the
   shared .form-actions rule in /styles/app.css since other forms that use
   it (e.g. workshop forms) already have their own spacing above it. */
#profile-form .form-actions {
  margin-top: 28px;
}

.field-help {
  margin: -4px 0 0;
  font-size: .875rem;
  color: var(--muted, #495057);
}

.purged-note {
  color: #b02a37;
}

/* Informational, not an error (unlike .purged-note): the field is still
   editable, only the already-printed badge won't reflect the edit. */
.fixed-note {
  font-style: italic;
}

#profile-required-legend {
  margin: 0 0 16px;
}

.required-mark {
  color: #b02a37;
  font-weight: 700;
}

/* Advisory only -- see profile.js's graphemeLength/updateCounter. Sits
   between the control and .field-help, right-aligned like a byte-count
   hint in any other form. */
.field-counter {
  margin: 2px 0 0;
  font-size: .8125rem;
  color: var(--muted, #495057);
  text-align: right;
}

.field-counter-over {
  color: #b02a37;
  font-weight: 600;
}

/* ---- delete section ----------------------------------------------------
   Kept visually distinct from the Save button above it: a wide gap plus a
   danger-tinted divider, rather than sitting flush against the form's
   .form-actions the way an ordinary .detail-card would. */

#profile-delete-section {
  margin-top: 48px;
  /* Overrides just the top edge of .detail-card's neutral border -- a subtle
     danger tint that reads as "this section is different" without a second,
     stacked border. */
  border-top: 1px solid rgba(220, 53, 69, 0.25);
}

#profile-delete-section h2 {
  margin: 0 0 10px;
  font-size: 1.3rem;
  font-weight: 700;
  color: #b02a37;
}

/* ---- task list --------------------------------------------------------- */

.task-list {
  display: grid;
  gap: 12px;
}

.task-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid rgba(0, 0, 0, .125);
  border-radius: .375rem;
  background: #fff;
}

.task-row.task-done { border-color: rgba(25, 135, 84, .25); background: rgba(25, 135, 84, .06); }

.task-check {
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1;
}

.task-row.task-done .task-check { color: #146c43; }

.task-body { min-width: 0; overflow-wrap: anywhere; }

.task-label { font-weight: 600; }

.task-note { display: block; color: var(--muted, #495057); font-size: .9rem; margin-top: 2px; }

.task-note a { font-weight: 600; }

/* ---- multi-select checklist --------------------------------------------- */

.checklist-search {
  width: 100%;
  border: 1px solid #ced4da;
  border-radius: .375rem;
  padding: 8px 12px;
  font: inherit;
  margin-bottom: 8px;
}

.checklist-box {
  display: grid;
  gap: 4px;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid #ced4da;
  border-radius: .375rem;
  padding: 8px 12px;
}

.checklist-group + .checklist-group { margin-top: 8px; }

.checklist-group-heading {
  margin: 4px 0 2px;
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--muted, #495057);
}

.checklist-option { padding: 4px 0; }

.checklist-option-hidden { display: none; }

/* ---- passkeys (ticket-passkey.js) ---------------------------------------
   #passkeys-section itself sits alongside #profile-delete-section (same
   .detail-card), both [hidden] by default -- see ProfilePage.swift's own
   doc comment. Each row mirrors ticket.css's .ticket-row (a border-top
   divider, wrapping flex row) rather than introducing a second card style. */
.passkey-list { margin: 0; padding: 0; list-style: none; }
.passkey-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.125);
}
.passkey-info { min-width: 0; overflow-wrap: anywhere; }
.passkey-name { margin: 0; font-weight: 600; }
.passkey-actions { display: flex; flex-wrap: wrap; gap: 8px; flex-shrink: 0; }
.passkey-actions .button { min-height: 44px; }