/* ==========================================================================
   SurveyIQ — components
   Reusable primitives shared by every screen: buttons, fields, pills, chips,
   toggles, cards, tables, bars, popovers, modals, toasts.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Brand mark
   -------------------------------------------------------------------------- */

.brand { display: flex; align-items: center; gap: 10px; }

.brand__tile {
  width: 30px; height: 30px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--c-accent);
  color: var(--c-on-ink);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
}

.brand__tile--sm { width: 26px; height: 26px; border-radius: var(--r-sm); font-size: var(--fs-13); }

.brand__name {
  font-family: var(--font-display);
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  color: var(--c-ink);
}
.brand__name--sm { font-size: var(--fs-14); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid transparent;
  /* 2px, from the system's button demo - not the pill the app used before. */
  border-radius: var(--r-xs);
  background: transparent;
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .12s var(--ease), border-color .12s var(--ease), color .12s var(--ease);
}

/* Filled maroon. The system shows one filled button and this is it, so the
   primary action is the brand colour rather than ink. */
.btn--primary,
.btn--accent {
  background: var(--c-accent);
  color: var(--c-on-ink);
  border-color: var(--c-accent);
}
.btn--primary:hover,
.btn--accent:hover {
  background: var(--c-accent-hover);
  border-color: var(--c-accent-hover);
}

/* The system's ghost button: maroon text inside a maroon hairline. */
.btn--outline {
  border-color: var(--c-accent);
  color: var(--c-accent);
  background: transparent;
}
.btn--outline:hover { background: var(--c-accent-tint-2); }

/* Bare text link with a trailing arrow - the CTA form used everywhere in the
   source. Underlines on hover and nudges the arrow, no fill at any point. */
.btn--link {
  height: auto;
  padding: 0;
  gap: 6px;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  color: var(--c-accent);
  font-size: var(--fs-14-5);
  transition: border-color .2s var(--ease);
}
.btn--link:hover { border-bottom-color: var(--c-accent); background: transparent; }
.btn--link .arrow { transition: transform .2s var(--ease); }
.btn--link:hover .arrow { transform: translateX(3px); }

.btn--quiet {
  border-color: var(--c-border);
  color: var(--c-text-secondary);
  background: var(--c-surface);
  font-weight: var(--fw-regular);
}
.btn--quiet:hover { background: var(--c-surface-2); color: var(--c-ink); }

.btn--ghost { color: var(--c-text-secondary); }
.btn--ghost:hover { background: var(--c-surface-3); }

/* On the dark preview bar */
.btn--on-dark {
  border-color: rgba(255, 255, 255, .24);
  color: var(--c-on-ink);
  background: transparent;
}
.btn--on-dark:hover { background: rgba(255, 255, 255, .1); }

.btn--sm { height: 30px; padding: 0 11px; font-size: var(--fs-12-5); }
.btn--md { height: 32px; padding: 0 12px; font-size: var(--fs-12-5); }
/* 11px/22px is the padding the system states for a filled button. */
.btn--lg { height: 44px; padding: 0 22px; font-size: var(--fs-14-5); border-radius: var(--r-xs); }
.btn--xl { height: 46px; padding: 0 22px; font-size: var(--fs-14); border-radius: var(--r-xs); }
.btn--block { width: 100%; }

.btn--icon { width: 46px; padding: 0; font-size: var(--fs-15); }

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

.btn__key { font-size: var(--fs-12); opacity: .75; }

/* --------------------------------------------------------------------------
   Form fields
   -------------------------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: 9px; }

.field__label { font-size: var(--fs-12-5); font-weight: var(--fw-medium); }
.field__hint  { font-size: var(--fs-12); color: var(--c-text-faint); }
.field__error { font-size: var(--fs-12-5); color: var(--c-accent); }

.input {
  height: 44px;
  width: 100%;
  padding: 0 14px;
  border: 1px solid var(--c-border);
  /* 4px, matching the system's form fields - the 50px pill is reserved for
     search, where it carries meaning. */
  border-radius: var(--r-md);
  background: var(--c-surface);
  font-size: var(--fs-14);
  color: var(--c-ink-2);
  transition: border-color .12s var(--ease);
}
.input:hover { border-color: var(--c-border-3); }
.input:focus {
  outline: none;
  border: 1.5px solid var(--c-accent);
  padding: 0 13.5px;
  caret-color: var(--c-accent);
}
.input[aria-invalid="true"] { border-color: var(--c-accent); }

.input--sm   { height: 40px; border-radius: var(--r-md); padding: 0 12px; }
.input--lg   { height: var(--h-touch); font-size: var(--fs-17); border-radius: var(--r-md); padding: 0 16px; }
.input--mono { font-family: var(--font-mono); }

.textarea {
  width: 100%;
  min-height: 118px;
  padding: 14px 16px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  background: var(--c-surface);
  font-size: var(--fs-14-5);
  line-height: var(--lh-body);
  resize: vertical;
}
.textarea:focus {
  outline: none;
  border: 1.5px solid var(--c-ink);
  padding: 13.5px 15.5px;
  caret-color: var(--c-accent);
}

/* Search field: glyph + input in one bordered shell */
/* --------------------------------------------------------------------------
   Search pill
   The system's confirmed pattern: a 50px-radius shell with 8px of padding, an
   inset circular icon and a frosted input. On the app's light chrome it is the
   dark-on-white state the system describes; .search--on-maroon is the
   white-on-maroon one for a maroon header.
   -------------------------------------------------------------------------- */

.search {
  display: flex;
  align-items: center;
  gap: 6px;
  /* The system's pill is 8px around a 32px control - a 48px block. That suits
     a hero search; in a 56px top bar it crowds everything beside it, so the
     shell is tightened and the proportions kept. */
  padding: 5px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.search:focus-within {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-tint);
}

.search__glyph {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-round);
  background: var(--c-surface-3);
  color: var(--c-accent);
  font-size: var(--fs-13);
}

.search__input {
  flex: 1;
  min-width: 0;
  height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-surface-2);
  font-size: var(--fs-13);
  color: var(--c-ink-2);
  outline: none;
}

/* The white-on-maroon state, for a search sitting on the brand colour. */
.search--on-maroon {
  border-color: transparent;
  background: var(--c-accent);
}
.search--on-maroon .search__glyph {
  background: rgba(255, 255, 255, .15);
  color: var(--c-on-ink);
}
.search--on-maroon .search__input {
  /* Frosted, as the system describes, and translucent so the maroon reads
     through rather than being covered by a flat panel. */
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(6px);
  color: var(--c-on-ink);
}
.search--on-maroon .search__input::placeholder { color: var(--c-on-ink-muted); }

/* The system's own proportions, for a search that is the page's main act. */
.search--hero { padding: 8px; gap: var(--space-1); }
.search--hero .search__glyph { width: 32px; height: 32px; }
.search--hero .search__input { height: 32px; }

.search--sm { padding: 4px; }
.search--sm .search__glyph { width: 28px; height: 28px; }
.search--sm .search__input { height: 28px; font-size: var(--fs-12-5); padding: 0 12px; }

/* Dashed drop zone for file-upload blocks */
.dropzone {
  min-height: 88px;
  border: 1.5px dashed var(--c-border-3);
  border-radius: var(--r-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--c-text-faint);
  font-size: var(--fs-13);
  background: var(--c-surface);
  cursor: pointer;
}
.dropzone:hover, .dropzone.is-over { border-color: var(--c-accent); background: var(--c-accent-tint-2); }
.dropzone__meta { font-size: var(--fs-11-5); font-family: var(--font-mono); }

/* --------------------------------------------------------------------------
   Toggle switch
   -------------------------------------------------------------------------- */

.toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-12-5);
  color: var(--c-text-muted);
  cursor: pointer;
}

.toggle__track {
  position: relative;
  width: 30px; height: 17px;
  flex: none;
  border-radius: var(--r-pill);
  background: var(--c-border-4);
  transition: background-color .15s var(--ease);
}
.toggle__knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 13px; height: 13px;
  border-radius: var(--r-round);
  background: var(--c-surface);
  transition: transform .15s var(--ease);
}
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle input:checked + .toggle__track { background: var(--c-accent); }
.toggle input:checked + .toggle__track .toggle__knob { transform: translateX(13px); }
.toggle input:focus-visible + .toggle__track { outline: 2px solid var(--c-accent); outline-offset: 2px; }

.toggle--lg .toggle__track { width: 34px; height: 19px; }
.toggle--lg .toggle__knob { width: 15px; height: 15px; }
.toggle--lg input:checked + .toggle__track .toggle__knob { transform: translateX(15px); }

/* --------------------------------------------------------------------------
   Pills, chips, tags
   -------------------------------------------------------------------------- */

/* Shaped like the system's own tags: small, uppercase, tracked, pill-cornered.
   That is what a status marker is in this language. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.pill--published { background: var(--c-success-tint); color: var(--c-success); }
.pill--draft     { background: var(--c-divider); color: var(--c-text-muted); }
.pill--closed    { background: var(--c-accent-tint-3); color: var(--c-accent); }
.pill--new       { background: var(--c-success-tint); color: var(--c-success); }
.pill--reviewed  { background: var(--c-divider); color: var(--c-text-muted); }
.pill--followup  { background: var(--c-accent-tint); color: var(--c-accent); }

/* Selectable chip (suggestion pills, expiry periods, embed modes) */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-12-5);
  padding: 6px 11px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-pill);
  background: var(--c-surface);
  color: var(--c-text-secondary);
  cursor: pointer;
  transition: border-color .12s var(--ease), background-color .12s var(--ease), color .12s var(--ease);
}
.chip:hover { border-color: var(--c-border-3); background: var(--c-surface-2); }
.chip[aria-pressed="true"], .chip.is-selected {
  border: 1.5px solid var(--c-accent);
  padding: 5.5px 10.5px;
  color: var(--c-accent);
  font-weight: var(--fw-medium);
}

/* Square-cornered variant used by the expiry period selector */
.chip--square { border-radius: var(--r-lg); font-size: var(--fs-13); padding: 8px 14px; }
.chip--square[aria-pressed="true"] {
  background: var(--c-accent);
  color: var(--c-on-ink);
  border: 1px solid var(--c-accent);
  padding: 8px 14px;
}

.chip--dashed { border-style: dashed; border-color: var(--c-border-3); color: var(--c-text-muted); }
.chip--filter { border-color: var(--c-accent); color: var(--c-accent); gap: 7px; }

/* Small AI marker inside table rows */
.tag-ai {
  font-family: var(--font-ui);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  color: var(--c-accent);
  background: var(--c-accent-tint);
  border-radius: var(--r-pill);
  padding: 2px 7px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Segmented control (Build / Logic / Design / Share / Results)
   -------------------------------------------------------------------------- */

.segmented {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--c-surface-3);
  border-radius: var(--r-lg);
  padding: 3px;
}

.segmented__item {
  padding: 5px 13px;
  border-radius: var(--r-md);
  font-size: var(--fs-12-5);
  color: var(--c-text-muted);
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  transition: background-color .12s var(--ease), color .12s var(--ease);
}
.segmented__item:hover { color: var(--c-ink); }
.segmented__item[aria-current="page"], .segmented__item.is-active {
  background: var(--c-surface);
  color: var(--c-ink);
  font-weight: var(--fw-medium);
  box-shadow: var(--sh-segment);
}
.segmented__item[aria-disabled="true"] {
  color: var(--c-placeholder);
  cursor: not-allowed;
  pointer-events: none;
}

/* Dark variant on the preview top bar */
.segmented--dark { background: rgba(255, 255, 255, .1); gap: 5px; }
.segmented--dark .segmented__item { color: var(--c-on-ink-subtle); }
.segmented--dark .segmented__item.is-active {
  background: var(--c-surface);
  color: var(--c-ink);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   Underline tabs (workspace filters, results sub-tabs)
   -------------------------------------------------------------------------- */

.tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--c-border-2);
}

.tabs__item {
  padding: 9px 12px;
  font-size: var(--fs-13-5);
  color: var(--c-text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
}
.tabs__item:hover { color: var(--c-ink); }
.tabs__item[aria-current="page"], .tabs__item.is-active {
  color: var(--c-accent);
  font-weight: var(--fw-medium);
  border-bottom-color: var(--c-accent);
}

/* Sub-tabs sit on the results bar with tighter padding */
.tabs--sub { border: 0; gap: 16px; }
.tabs--sub .tabs__item { padding: 4px 0; font-size: var(--fs-13); }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

/* 3px corners, hairline border and a soft drop shadow, as the media card in
   the system does it. */
.card {
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  box-shadow: var(--sh-card);
}

.card--lg { border-radius: var(--r-lg); }

.card__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-track);
}

.card__body { padding: 16px; }

/* KPI tile */
.kpi {
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  box-shadow: var(--sh-card);
  padding: var(--space-2) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.kpi__label { font-size: var(--fs-12); color: var(--c-text-muted); }
.kpi__value {
  font-family: var(--font-display);
  font-size: var(--fs-30);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: var(--c-ink);
}
.kpi__row { display: flex; align-items: baseline; gap: 8px; }
.kpi__delta { font-size: var(--fs-12); }
.kpi__delta--up   { color: var(--c-success); }
.kpi__delta--down { color: var(--c-accent); }

/* Callout on accent tint */
.callout {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--c-accent-tint);
  border: 1px solid var(--c-accent-border-2);
  border-radius: var(--r-lg);
  padding: 11px 13px;
  font-size: var(--fs-12-5);
  color: var(--c-accent-hover);
  line-height: 1.5;
}

/* Status banner (published & collecting) */
.banner {
  display: flex;
  align-items: center;
  gap: 11px;
  border-radius: var(--r-xl);
  padding: 14px 16px;
  font-size: var(--fs-12-5);
}
.banner--success {
  background: var(--c-success-tint-2);
  border: 1px solid var(--c-success-border);
  color: var(--c-success-text);
}
.banner__title { font-size: var(--fs-14); font-weight: var(--fw-mid); color: var(--c-ink); }

.dot {
  width: 8px; height: 8px;
  flex: none;
  border-radius: var(--r-round);
  display: inline-block;
  background: currentColor;
}
.dot--sm { width: 5px; height: 5px; }
.dot--md { width: 7px; height: 7px; }
.dot--lg { width: 9px; height: 9px; }

/* --------------------------------------------------------------------------
   Bars & meters
   -------------------------------------------------------------------------- */

/* `display:block` matters — bars are frequently rendered as <span>. */
.bar {
  display: block;
  flex: 1;
  height: 10px;
  background: var(--c-surface-3);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.bar__fill {
  display: block;
  height: 100%;
  border-radius: var(--r-sm);
  background: var(--c-accent);
  transition: width .3s var(--ease);
}
.bar__fill--hot { background: var(--c-accent); }

.bar--xs   { height: 4px;  width: 26px; flex: none; border-radius: var(--r-xs); background: var(--c-track); }
.bar--sm   { height: 5px;  width: 52px; flex: none; border-radius: var(--r-sm); background: var(--c-track); }
.bar--thin { height: 8px;  border-radius: var(--r-md); background: var(--c-track-2); }

/* Funnel bands stack in a column, where the base `flex: 1` would resolve to a
   zero flex-basis and collapse the track's height. */
.bar--tall {
  height: 26px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--c-track-2);
}

/* Top-of-page progress rail on respondent screens */
.progress { height: 3px; flex: none; background: var(--c-divider); }
.progress__fill {
  height: 100%;
  background: var(--c-accent);
  transition: width .25s var(--ease);
}

/* --------------------------------------------------------------------------
   Data table
   Column widths are supplied per instance via --cols (set from JS), because
   response tables generate one column per form field.
   -------------------------------------------------------------------------- */

.table { display: flex; flex-direction: column; min-height: 0; }

.table__head,
.table__row {
  display: grid;
  grid-template-columns: var(--cols);
  gap: var(--col-gap, 16px);
  align-items: center;
}

.table__head {
  height: var(--h-table-head);
  padding: 0 14px;
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-border-2);
  /* A small uppercase label, which is the role Poppins is loaded for. Mono is
     kept for the tabular values in the rows below. */
  font-family: var(--font-ui);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-text-subtle);
  position: sticky;
  top: 0;
  z-index: 1;
}

.table__row {
  height: var(--h-table-row);
  padding: 0 14px;
  border-bottom: 1px solid var(--c-divider-2);
  background: var(--c-surface);
  cursor: pointer;
  text-align: left;
  width: 100%;
  /* Rows are often anchors; they must not inherit the accent link colour. */
  color: var(--c-ink);
  text-decoration: none;
}
.table__row:hover { background: var(--c-surface-2); color: var(--c-ink); }
.table__row[aria-selected="true"] { background: var(--c-surface-2); }

.table__sort {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.table__sort:hover { color: var(--c-ink); }
.table__sort-arrow { opacity: 0; font-size: 9px; }
.table__sort[data-dir="asc"] .table__sort-arrow,
.table__sort[data-dir="desc"] .table__sort-arrow { opacity: 1; color: var(--c-accent); }

.table__empty {
  padding: 40px 16px;
  text-align: center;
  font-size: var(--fs-13);
  color: var(--c-text-faint);
}

/* Faux checkbox that matches the design's 13px square */
.checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 13px; height: 13px;
  border: 1px solid var(--c-swatch-dim-2);
  border-radius: var(--r-xs);
  background: var(--c-surface);
  cursor: pointer;
  display: inline-block;
}
.checkbox:checked { background: var(--c-accent); border-color: var(--c-accent); }

/* --------------------------------------------------------------------------
   Popover / menu
   -------------------------------------------------------------------------- */

.popover {
  position: absolute;
  width: 300px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-popover);
  padding: 6px;
  z-index: var(--z-popover);
}

.popover__label {
  font-family: var(--font-ui);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-text-faint);
  padding: 7px 9px 5px;
}

.popover__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 9px;
  border-radius: var(--r-md);
  font-size: var(--fs-13);
  font-weight: var(--fw-book);
  cursor: pointer;
  background: transparent;
}
.popover__item:hover,
.popover__item.is-active { background: var(--c-surface-3); }

.popover__icon {
  width: 22px; height: 22px;
  flex: none;
  border-radius: var(--r-sm);
  background: var(--c-surface-3);
  display: grid;
  place-items: center;
  font-size: var(--fs-11);
  color: var(--c-text-muted);
}
.popover__key {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-10-5);
  color: var(--c-placeholder);
}
.popover__item.is-active .popover__icon { background: var(--c-surface-4); }

/* --------------------------------------------------------------------------
   Modal
   -------------------------------------------------------------------------- */

.modal-scrim {
  position: fixed;
  inset: 0;
  background: var(--c-overlay);
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  padding: 24px;
}
.modal-scrim[hidden] { display: none; }

.modal {
  width: min(900px, 100%);
  max-height: calc(100vh - 48px);
  background: var(--c-surface);
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-modal);
  overflow: hidden;
  display: flex;
  z-index: var(--z-modal);
}

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */

.toast-stack {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: var(--z-toast);
  pointer-events: none;
}

.toast {
  background: var(--c-ink);
  color: var(--c-on-ink);
  font-size: var(--fs-13);
  padding: 10px 16px;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-popover);
  animation: toast-in .18s var(--ease);
}
.toast--leaving { animation: toast-out .18s var(--ease) forwards; }

@keyframes toast-in  { from { opacity: 0; transform: translateY(6px); } }
@keyframes toast-out { to   { opacity: 0; transform: translateY(6px); } }

/* --------------------------------------------------------------------------
   Misc
   -------------------------------------------------------------------------- */

.divider-or {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-11-5);
  color: var(--c-text-faint);
}
.divider-or::before,
.divider-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--c-track);
}

.avatar {
  width: 24px; height: 24px;
  flex: none;
  border-radius: var(--r-round);
  background: var(--c-swatch-dim);
  display: grid;
  place-items: center;
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  color: var(--c-text-secondary);
}
.avatar--lg { width: 30px; height: 30px; font-size: var(--fs-11-5); background: var(--c-surface-4); }

.code-block {
  background: var(--c-surface-2);
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-lg);
  padding: 13px 15px;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--c-text-secondary);
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

.required { color: var(--c-accent); }