/* Integra — setup page (setup.html). Operations forms for creators and their
   accounts. Single column, 720px max, hairline rows, compact paddings.
   js/setup.js renders rows and forms into the contracted containers
   (#creators-list, #creator-edit, #accounts-list, #account-add), so row and
   control styling here is structural: direct children of the list containers
   are rows, whatever element the module renders. */

/* --row-hover lives in tokens.css so the wash follows the theme (#F3F3F6 light
   / #1E1D25 dark). Redeclaring it here would pin this page to the light value,
   since this sheet loads after tokens.css. */

::selection { background: var(--blurple); color: var(--accent-ink); }

/* Subtle page-load fade — opacity only, gated on motion preference. */
@media (prefers-reduced-motion: no-preference) {
  body { animation: setup-page-in 150ms var(--ease); }
  @keyframes setup-page-in { from { opacity: 0; } }
}

.setup-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---- Header ---- */

.setup-header {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

/* The chrome is sized to the page, not to the 720px form column: at 1100px it
   matches the admin board and the tracker exactly, so the wordmark holds its
   position as staff move between them instead of sliding toward the middle.
   min-height pins the bar at 41px + --s4 twice = 73px under the 1px hairline
   (border-box, so the min-height carries the padding). 41px is a .btn-sm's own
   height, so the header measures the same 74px whether the staff-only Admin
   board link is showing or not. */
.setup-header .header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--s4) var(--s5);
  min-height: calc(41px + var(--s4) * 2);
  display: flex;
  align-items: center;
  gap: var(--s2) var(--s3);
  /* The Admin board link drops to its own line rather than overflow at 360px. */
  flex-wrap: wrap;
}

.lockup-link { display: inline-flex; align-items: center; }
/* One height for both themes: light and dark ship the same 1080×267 badged
   lockup, so the identity never moves or changes size across a theme flip. */
.lockup { height: 28px; width: auto; display: block; }

.header-divider {
  width: 1px;
  height: 18px;
  background: var(--rule);
  flex: none;
}

/* Right-edge group: the Admin board link (ships hidden; js/setup.js unhides it
   for va/admin only) and the theme toggle. Grouping keeps the toggle in the
   same place whether or not the staff link is showing. */
.setup-header .header-links {
  margin-left: auto;
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--s2);
}

/* ---- Main column ---- */

.setup-main {
  flex: 1;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: var(--s6) var(--s5) var(--s8);
}

@media (min-width: 600px) {
  .setup-main { padding-top: var(--s7); }
}

.page-title {
  font-weight: 500;
  font-size: 24px;
  letter-spacing: -0.005em;
  line-height: 1.25;
  margin: 0 0 var(--s2);
}

.page-sub {
  font-size: 14px;
  margin: 0 0 var(--s6);
}

/* Page-level notes — demo mode, creator access, promote-first-admin hint.
   js/setup.js appends p.setup-note copy into the #setup-note container.
   While the container has content the form sections stay out of the flow:
   the note replaces the forms per the access contract, whatever js/setup.js
   does with the sections themselves. */
.setup-note {
  color: var(--graphite);
  font-size: 15px;
  max-width: var(--measure);
  margin: 0 0 var(--s5);
}

/* The note's prose and its one action are separate blocks: the container
   already carries the bottom margin, so the prose adds none of its own, and the
   action line sits a clear --s4 below the last sentence rather than trailing
   off the end of it. */
.note-prose { margin: 0; }

.note-action {
  margin: var(--s4) 0 0;
  font-size: 15px;
}

#setup-note:not(:empty) { margin-bottom: var(--s5); }

#setup-note:not(:empty) ~ section { display: none; }

/* ---- Sections ---- */

.setup-section {
  border-top: 1px solid var(--rule);
  padding: var(--s5) 0;
}

.section-label { display: block; margin: 0 0 var(--s3); }

/* ---- Rows (rendered by js/setup.js) ---- */
/* Direct children of the list containers are rows. A list element (<ul>/<ol>)
   in between is normalized so its items become the rows instead. */

#creators-list > :is(ul, ol),
#accounts-list > :is(ul, ol) {
  list-style: none;
  margin: 0;
  padding: 0;
}

#creators-list > :not(ul, ol),
#accounts-list > :not(ul, ol),
#creators-list :is(ul, ol) > li,
#accounts-list :is(ul, ol) > li {
  position: relative;
  z-index: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s1) var(--s4);
  width: 100%;
  padding: var(--s3) 0;
  font-size: 15px;
  text-align: left;
}

#creators-list > :not(ul, ol) + :not(ul, ol),
#accounts-list > :not(ul, ol) + :not(ul, ol),
#creators-list :is(ul, ol) > li + li,
#accounts-list :is(ul, ol) > li + li {
  border-top: 1px solid var(--rule);
}

/* Hover wash — same pattern as the dashboard rows: the fill bleeds --s3 past
   the text edge on a pseudo layer, so the hairlines above and below keep
   exactly to the content column. */
#creators-list > :not(ul, ol)::before,
#accounts-list > :not(ul, ol)::before,
#creators-list :is(ul, ol) > li::before,
#accounts-list :is(ul, ol) > li::before {
  content: '';
  position: absolute;
  inset: 0 calc(-1 * var(--s3));
  z-index: -1;
  border-radius: var(--radius);
  pointer-events: none;
  transition: background-color var(--t-fast) var(--ease);
}

#creators-list > :not(ul, ol, p):hover::before,
#accounts-list > :not(ul, ol, p):hover::before,
#creators-list :is(ul, ol) > li:hover::before,
#accounts-list :is(ul, ol) > li:hover::before {
  background: var(--row-hover);
}

/* Creator rows select on click (empty-state paragraphs excluded). */
#creators-list > :not(ul, ol, p),
#creators-list :is(ul, ol) > li {
  cursor: pointer;
}

/* Selected creator — persistent wash + a 2px blurple edge at the left bleed.
   js/setup.js may mark selection with aria-selected, aria-current, or a
   class; all are honored. */
#creators-list [aria-selected="true"]::before,
#creators-list [aria-current="true"]::before,
#creators-list .is-selected::before,
#creators-list .selected::before {
  content: '';
  position: absolute;
  inset: 0 calc(-1 * var(--s3));
  z-index: -1;
  border-radius: var(--radius);
  pointer-events: none;
  background: var(--row-hover);
}

#creators-list [aria-selected="true"]::after,
#creators-list [aria-current="true"]::after,
#creators-list .is-selected::after,
#creators-list .selected::after {
  content: '';
  position: absolute;
  left: calc(-1 * var(--s3));
  top: var(--s2);
  bottom: var(--s2);
  width: 2px;
  border-radius: var(--radius);
  background: var(--blurple);
}

/* Empty states inside the lists read as metadata, not records. */
#creators-list p,
#accounts-list p {
  margin: 0;
  color: var(--graphite);
  font-size: 14px;
}

/* ---- Inline controls in rows ---- */

/* Text buttons — "Edit", "Remove". A button that carries row content
   (child elements) only gets the reset, not the link treatment. */
#creators-list button:not(.btn),
#accounts-list button:not(.btn) {
  appearance: none;
  background: none;
  border: 0;
  border-radius: var(--radius);
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

#creators-list button:not(.btn):not(:has(*)),
#accounts-list button:not(.btn):not(:has(*)) {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--blurple-text);
  transition: color var(--t-fast) var(--ease);
}

#creators-list button:not(.btn):not(:has(*)):hover,
#accounts-list button:not(.btn):not(:has(*)):hover {
  color: var(--blurple-text-hover);
}

/* Armed remove — "Remove — sure?" holds for 3 seconds in fault text. */
#accounts-list button.is-confirm,
#accounts-list button.confirm,
#accounts-list button.danger,
#accounts-list button[data-confirm],
#accounts-list button[data-armed],
#accounts-list button.is-confirm:hover,
#accounts-list button.confirm:hover,
#accounts-list button.danger:hover,
#accounts-list button[data-confirm]:hover,
#accounts-list button[data-armed]:hover {
  color: var(--fault-text);
}

/* Status select in account rows — compact and mono (a status is data),
   saving on change; base.css supplies border, radius, and focus. */
#accounts-list select {
  width: auto;
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}

/* Status dot — base.css supplies the mark; the row only holds it in place.
   Same status vocabulary as the dashboard account rows and the admin board:
   the select beside it is what edits the value. */
#accounts-list .status-dot { flex: none; }

/* Platform glyphs — 16px, ink, same register as the dashboard rows. */
#accounts-list svg {
  width: 16px;
  height: 16px;
  flex: none;
  display: block;
  color: var(--ink);
}

/* Identifiers and figures inside rows sit a step under body size. */
#creators-list .data,
#accounts-list .data { font-size: 13px; }

/* ---- Integration with js/setup.js as shipped ---- */
/* The module renders .setup-list items carrying a .setup-row line (its own
   structural styles travel with the file). The standard hover wash and the
   selected-creator mark live here, same pattern as the dashboard rows: the
   fill bleeds --s3 past the text edge on a pseudo layer, hairlines keep to
   the content column. */

.setup-list .setup-row {
  position: relative;
  z-index: 0;
}

.setup-list .setup-row::before {
  content: '';
  position: absolute;
  inset: 0 calc(-1 * var(--s3));
  z-index: -1;
  border-radius: var(--radius);
  pointer-events: none;
  transition: background-color var(--t-fast) var(--ease);
}

.setup-list .setup-row:hover::before { background: var(--row-hover); }

/* Selected creator — persistent wash + a 2px blurple edge at the left bleed. */
.setup-list > li.is-selected > .setup-row::before { background: var(--row-hover); }

.setup-list > li.is-selected > .setup-row::after {
  content: '';
  position: absolute;
  left: calc(-1 * var(--s3));
  top: var(--s2);
  bottom: var(--s2);
  width: 2px;
  border-radius: var(--radius);
  background: var(--blurple);
}

/* ---- Inline forms (#creator-edit, #account-add) ---- */
/* Forms expand in place under a hairline: the containers reserve no height,
   content above them never moves, and the reveal is an opacity-only fade
   (gated on motion preference — no height animation, no layout jump). */

#creator-edit > *,
#account-add > * {
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule);
}

@media (prefers-reduced-motion: no-preference) {
  #creator-edit > *,
  #account-add > * { animation: setup-reveal 150ms var(--ease); }
  @keyframes setup-reveal { from { opacity: 0; } }
}

.field { margin-bottom: var(--s4); }

#creator-edit label,
#account-add label {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: var(--s1);
}

#creator-edit input,
#creator-edit select,
#creator-edit textarea,
#account-add input,
#account-add select,
#account-add textarea {
  max-width: 480px;
  padding: 10px 12px;
  font-size: 14px;
}

/* Handles, URLs, channel ids, and device labels are data — mono. */
#creator-edit input[name="handle"],
#creator-edit input[name="discord_channel_id"],
#creator-edit input.data,
#account-add input[name="handle"],
#account-add input[name="url"],
#account-add input[name="phone_label"],
#account-add input[name="platform"],
#account-add input.data,
#account-add select.data,
#account-add select[name="status"],
#account-add select[name="platform"] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Compact button size — same values as the app shell's .btn-sm
   (app.css is not loaded on this page). */
.btn-sm { padding: 13px 16px; font-size: 13px; }

.form-actions,
.submit-row {
  display: flex;
  align-items: center;
  gap: var(--s4);
  flex-wrap: wrap;
  margin-top: var(--s2);
}

/* "Saved HH:MM" — inline mono confirmation, same register as the tracker. */
.confirm-note,
.saved-note {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--graphite);
  font-size: 13px;
}

@media (prefers-reduced-motion: no-preference) {
  .confirm-note.is-shown,
  .saved-note.is-shown { animation: setup-confirm-in 120ms var(--ease); }
  @keyframes setup-confirm-in { from { opacity: 0; } }
}

/* Errors — inline, fault text on paper. */
.field-error,
.form-error,
.setup-error {
  color: var(--fault-text);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  margin: var(--s2) 0 0;
}

/* ---- Footer ---- */

.setup-footer { border-top: 1px solid var(--rule); }

/* Same 1100px chrome width as the header above, so the footer mark sits on the
   same vertical as the wordmark. */
.setup-footer .footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--s4) var(--s5);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.setup-footer .tagline { margin: 0; }
.setup-footer img { display: block; width: 16px; height: 16px; }