/* ================= The organization onboarding screens =================
   Extends login.html's own visual system: every rule reuses a login.css class, or builds a new
   one from login.css's own tokens, loaded after it so nothing here redeclares one. Loads no
   application stylesheet, same as login.css (sys_design-system.md §14a). Markup: five sibling
   panels in login.html's #authCard; JS/features/org-onboarding.js is the only script touching it. */

/* ---------- Screen 1 — the optional Organization Token field on Create Account ---------- */

/* Label and help button are deliberately TWO elements, never a <label> wrapping the button —
   that folds the button's name into the field's (accessible-names.py's catch) and clicking it
   would also focus the input. Typography restated here since this row's parent isn't .lg-field. */
.lg-org-token-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.lg-org-token-head label{
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--text-2);
}
.lg-org-token-optional{
  font-style:normal; font-weight:400; text-transform:none; letter-spacing:normal;
  font-size:11px; color:var(--text-3);
}
/* A real keyboard-reachable toggle button, not a hover tooltip — login.html has no floating-UI
   system, so "more about this field" reveals a real `.lg-hint` paragraph, the same shape every
   other hint on this page already uses. */
.lg-org-token-help{
  display:inline-flex; align-items:center; justify-content:center;
  /* Containing block for the target-expanding ::after below, nothing else. */
  position:relative;
  width:16px; height:16px; padding:0; flex:0 0 auto;
  border-radius:50%; border:1px solid var(--border-strong);
  background:var(--surface-2); color:var(--text-2);
  font-family:var(--mono); font-size:10px; line-height:1; font-weight:700;
  cursor:pointer;
}
/* Pointer target is 24px, the circle stays 16px (sys_design-system.md:4094) — a quiet "?" that
   would compete with its label at 24. `inset` resolves against the PADDING box, not the border
   box (box-sizing:border-box is global, login.css:390), so -5px on this 14px padding box gives
   the real 24x24 — not -4px, which measured 22x22. No pointer-events:none: the point is to be
   hit-testable. */
.lg-org-token-help::after{
  content:''; position:absolute; inset:-5px; border-radius:50%;
}
.lg-org-token-help:hover{ border-color:var(--blue); color:var(--blue-text); }
.lg-org-token-help:focus-visible{ outline:2px solid var(--ring); outline-offset:2px; }
.lg-org-token-tip{
  margin-top:4px;
}
.lg-field input.lg-org-token-input{
  text-transform:uppercase;
}

/* ---------- shared: a cautionary note and its inline actions (screens 4 and 5; screen 7's
   error uses .lg-note-warn below instead, being a refusal rather than a caution) ---------- */

.lg-org-warn-actions{
  display:flex; flex-wrap:wrap; gap:14px 18px; margin-top:10px;
}

/* The one place this file departs from `.lg-note`'s default blue — a refusal reads as a caution
   here, mirroring `.lg-status.err`'s red per login.css's own rule: red means a refusal, nothing
   else. */
.lg-note-warn{
  padding:14px 16px;
  border-radius:var(--r-sm);
  background:var(--red-soft);
  border:1px solid var(--red-line);
  border-left:3px solid var(--red);
  font-size:13px; line-height:1.55; color:var(--text);
}

/* ---------- Screen 2 — How would you like to use STRIDE? ---------- */

.lg-org-choice-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px;
  margin-top:4px;
}
/* Below 420px the two tiles stack — the same width login.css already treats as single-column
   for this card (its .lg-dest-grid phone breakpoint). */
@media (max-width: 420px){
  .lg-org-choice-grid{ grid-template-columns:1fr; }
}
.lg-org-invite-note{
  margin-top:14px;
  display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
}

/* ---------- Screen 4 — Create Organization, Review ---------- */

.lg-org-mark-row{
  display:flex; align-items:center; gap:12px; margin-top:4px;
}
/* The same 30x28 slot every mark in this product draws in (team-brand.js's TEAM_BRAND_W/H) — a
   different-shaped preview would misrepresent what the corner will actually show. */
.lg-org-mark-preview{
  width:30px; height:28px; flex:0 0 auto;
  border-radius:var(--r-sm); border:1px solid var(--border);
  background-color:var(--surface-2);
  background-repeat:no-repeat; background-position:center; background-size:contain;
}
.lg-org-mark-preview[hidden]{ display:none; }
.lg-org-mark-pick{ cursor:pointer; }

.lg-org-review{
  margin-top:18px; padding:14px 16px;
  border-radius:var(--r-sm); border:1px solid var(--border);
  background:var(--surface-2);
}
.lg-org-review-h{
  margin:0 0 8px; font-family:var(--display); font-weight:700; font-size:13px;
  color:var(--text);
}
.lg-org-review-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:4px 0; font-size:13px; color:var(--text-2);
}
.lg-org-review-row + .lg-hint{ margin-top:8px; }

/* ---------- Screen 5 — Organization Created ---------- */

.lg-form #orgCreatedBody{ display:block; margin-top:4px; color:var(--text-2); }