/*
 * The addorg host (app/views/layouts/addorg.html.erb): the public registration on addorg.secretag.co.
 * The form, the done page and the 404 stand on the apex's .auth, .card, .field and .flash rules from
 * components.css; this sheet adds only what those pages lack outside the public layout: the header
 * row with its Log in link (activate.css's .activate-header measure), the card centered from 900px,
 * the form's error summary and its Secretag help, the done page's list of facts, the 404 card's
 * paragraph rhythm and gutter. Every rule is scoped under body.addorg and uses tokens only.
 */

/* The page fills the screen (base.css gives the body min-height: 100dvh), the public layout's shape. */
body.addorg {
  display: flex;
  flex-direction: column;
}

body.addorg > main {
  flex: 1 0 auto;
}

/* From 900px a page holding .auth centers its card (components.css centers .auth itself at that width);
   the 404's .card keeps its top placement. On a phone the card stays at the top. */
@media (min-width: 900px) {
  body.addorg:has(.auth) > main {
    display: grid;
  }
}

/* Header: the brand on its plate (.brand and .brand-logo in components.css) on the left, Log in on the
   right, on the surface band; Log in wraps under the brand on a narrow phone. */
body.addorg .addorg-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-3);
  padding: var(--space-1) var(--space-4);
  padding-top: max(var(--space-1), env(safe-area-inset-top));
  padding-left: max(var(--space-4), env(safe-area-inset-left));
  padding-right: max(var(--space-4), env(safe-area-inset-right));
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}

/* activate.css's .activate-link-button measure, as a link: a 44px target. */
body.addorg .addorg-header-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--space-2);
  color: var(--accent);
  font-size: var(--text-sm);
  text-decoration: underline;
}

body.addorg .addorg-header-link:active {
  color: var(--accent-pressed);
}

/* The error summary of a refused form (the .flash-alert measure): its heading, then one link per
   error to its field. */
body.addorg .addorg-error-summary {
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--danger);
  border-left-width: var(--space-1);
  border-radius: var(--radius-input);
  background: var(--bg);
  color: var(--text);
}

body.addorg .addorg-error-summary-title {
  font-size: var(--text-md);
  font-weight: 700;
}

body.addorg .addorg-error-summary-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

body.addorg .addorg-error-summary-list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--danger);
  font-weight: 700;
}

/* A summary link lands its field with the label still in view. */
body.addorg .field-input {
  scroll-margin-top: var(--space-12);
}

/* The Secretag field's help: a 44px summary with its default marker, the answer below it. */
body.addorg .addorg-help > summary {
  width: fit-content;
  min-height: var(--tap-min);
  padding: var(--space-3) 0;
  color: var(--accent);
  font-size: var(--text-sm);
  cursor: pointer;
}

body.addorg .addorg-help > p {
  margin-bottom: var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-wrap: pretty;
}

/* The done page's facts: label beside value (activate.css's dl measure). */
body.addorg dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-1) var(--space-3);
  margin: 0;
}

body.addorg dt {
  color: var(--text-muted);
}

body.addorg dd {
  margin: 0;
  overflow-wrap: anywhere;
}

body.addorg .auth-card > dl {
  margin-top: var(--space-4);
}

/* The footnote's link sits inside a sentence, so the stand-alone link padding of components.css goes; its 44px min-height stays. */
body.addorg .auth-footnote a {
  padding: 0;
}

/* The 404 card's paragraphs under the title: the .auth-lead measure; its button row: the dashboard's
   and activate's .actions measure. */
body.addorg main > .card > h1 + p,
body.addorg main > .card > p + p {
  margin-top: var(--space-2);
}

body.addorg main > .card > p.actions {
  margin-top: var(--space-4);
}

/* The 404 card keeps the page gutter at every width. */
body.addorg main > .card {
  margin: var(--space-4);
  margin-left: max(var(--space-4), env(safe-area-inset-left));
  margin-right: max(var(--space-4), env(safe-area-inset-right));
}