/*
 * signup-entrance.css — styles for the two-step sign-up entrance (jk-signup-0910).
 *
 * What this file does, in 3 lines:
 *  - Styles ONE shared entrance component (`.gb-se-*`) used by both create-account doors:
 *    register.html step 1 and the login.html "Create account" tab.
 *  - Every colour is a token with a fallback, because the two host pages ship different
 *    stylesheets (register.css / login.css) and must not be assumed to define the same names.
 *
 * WHY scoped class names: the component is mounted INSIDE two pages that already own
 * `.role-card`, `.svc-pick`, `.btn-primary`, `.btn-submit`. A `gb-se-` prefix means the
 * entrance can never inherit or clobber a host rule by accident.
 */

/* Self-contained box model (09-11, sign-up entrance agent).
 *
 * WHY this is not redundant even though BOTH current hosts already reset it:
 * `.gb-se-select` and `.gb-se-btn` are `width:100%` WITH horizontal padding. Under the default
 * `content-box` that is 100% PLUS 28px, which overflows the page sideways on a 390px phone — the
 * exact fault already found twice in this project (F-143). register.css and login.css happen to
 * carry a global `* { box-sizing:border-box }` today, so the component is borrowing its correct
 * layout from its hosts. A shared component must not depend on a host rule it does not own: the
 * third door that mounts this (or a host whose reset is ever narrowed) would overflow silently.
 * Scoped to `.gb-se` and its descendants, so it changes nothing outside the entrance. */
.gb-se, .gb-se *, .gb-se *::before, .gb-se *::after { box-sizing: border-box; }

.gb-se { display: block; }

.gb-se-stage[hidden] { display: none; }

/* Visually hidden but still announced — used when the host page already prints the
   same heading above the component, so a sighted user does not read it twice while a
   screen-reader user still gets a named region. */
.gb-se-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.gb-se-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--brand, #1b2a4a);
  letter-spacing: -0.3px;
  line-height: 1.3;
  margin: 0 0 6px;
}
.gb-se-sub {
  font-size: 13.5px;
  color: var(--ink-2, #5c5b62);
  line-height: 1.55;
  margin: 0 0 18px;
}

/* ── Screen 1 — the two account-path cards ─────────────────────────────
   auto-fit rather than a fixed 2-column grid: the login page mounts this in a
   ~420px card and register.html in a ~560px one. One rule serves both, and on a
   360px phone both cards go full width without a media query fighting a host rule. */
.gb-se-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
  margin: 0 0 4px;
}

.gb-se-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 16px;
  background: var(--bg-2, #ffffff);
  border: 1.5px solid var(--border, #e2e1dd);
  border-radius: var(--r, 12px);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.gb-se-card:hover { border-color: var(--brand, #1b2a4a); }
.gb-se-card:focus-within { border-color: var(--brand, #1b2a4a); }

.gb-se-card__icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-3, #eae9e3);
  color: var(--brand, #1b2a4a);
  flex-shrink: 0;
}

.gb-se-card__name {
  font-size: 16px;
  font-weight: 800;
  color: var(--brand, #1b2a4a);
  letter-spacing: -0.2px;
  margin: 0;
}
.gb-se-card__desc {
  font-size: 13px;
  color: var(--ink-2, #5c5b62);
  line-height: 1.55;
  margin: 0 0 4px;
  flex: 1;
}

/* ── Screen 2 — the operation dropdown ─────────────────────────────── */
.gb-se-field { margin: 0 0 14px; }

.gb-se-label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink, #15141a);
  margin-bottom: 6px;
}
.gb-se-req { color: var(--danger, #dc2626); }

.gb-se-select {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink, #15141a);
  background: var(--bg-2, #ffffff);
  border: 1.5px solid var(--border, #e2e1dd);
  border-radius: var(--r-sm, 8px);
  cursor: pointer;
  appearance: none;
  /* Chevron drawn inline so the control needs no image request on a weak connection. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235c5b62' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}
.gb-se-select:hover { border-color: var(--brand, #1b2a4a); }
/* The placeholder is not a choice — show it in muted ink so it never reads as a picked value. */
.gb-se-select:invalid,
.gb-se-select[data-empty="1"] { color: var(--ink-3, #9e9da4); font-weight: 500; }

.gb-se-help {
  font-size: 12px;
  color: var(--ink-3, #9e9da4);
  line-height: 1.5;
  margin: 6px 0 0;
}

/* Error text carries an icon AND words — colour is never the only signal. */
.gb-se-err {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--danger, #dc2626);
  margin: 10px 0 0;
}
.gb-se-err[hidden] { display: none; }

/* ── Buttons ───────────────────────────────────────────────────────── */
.gb-se-btn {
  width: 100%;
  min-height: 48px;
  padding: 13px 18px;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  border-radius: var(--r-sm, 8px);
  border: 1.5px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.gb-se-btn--primary {
  background: var(--accent, #1a7a4a);
  color: #ffffff;
}
.gb-se-btn--primary:hover:not(:disabled) { filter: brightness(0.93); }
.gb-se-btn--secondary {
  background: var(--bg-2, #ffffff);
  color: var(--brand, #1b2a4a);
  border-color: var(--brand, #1b2a4a);
}
.gb-se-btn--secondary:hover:not(:disabled) { background: var(--bg-3, #eae9e3); }
.gb-se-btn--ghost {
  background: transparent;
  color: var(--ink-2, #5c5b62);
  min-height: 44px;
  margin-top: 8px;
}
.gb-se-btn--ghost:hover:not(:disabled) { color: var(--ink, #15141a); }
/* A disabled control swallows the tap entirely — the event is not dispatched, and it does not
   bubble to any parent either. `pointer-events:none` hands the tap to the wrapper around it, which
   is how the greyed Continue can answer "choose an operation first" instead of feeling broken. */
.gb-se-btn:disabled { opacity: 0.5; pointer-events: none; }
.gb-se-gate { cursor: not-allowed; }
.gb-se-gate:has(.gb-se-btn:not(:disabled)) { cursor: default; }

/* Keyboard users must always be able to see where they are. */
.gb-se-btn:focus-visible,
.gb-se-select:focus-visible {
  outline: 2px solid var(--brand, #1b2a4a);
  outline-offset: 2px;
}

.gb-se-foot {
  font-size: 12.5px;
  color: var(--ink-3, #9e9da4);
  text-align: center;
  line-height: 1.55;
  margin: 14px 0 0;
}

@media (max-width: 400px) {
  .gb-se-title { font-size: 18px; }
  .gb-se-card { padding: 16px 14px; }
}