/* ============================================================
   BACK9OPS — APP-LEVEL OVERRIDES
   Global resets and Bootstrap overrides using brand tokens.
   Do not add component-specific styles here.
   ============================================================ */

html, body {
  font-family: var(--b9-font-sans);
  background:  var(--b9-surface);
  color:       var(--b9-text);
  font-size:   var(--font-size-base, 1rem);
}

/* ── Links ── */
a, .btn-link {
  color: var(--b9-link);
}

a:hover, .btn-link:hover {
  color: var(--b9-link-hover);
}

/* ── Bootstrap primary button override ── */
.btn-primary {
  background-color: var(--brand);
  border-color:     var(--brand);
  color:            #fff;
  font-weight:      600;
  transition:       background-color 160ms ease, border-color 160ms ease, transform 120ms ease, box-shadow 160ms ease;
}

.btn-primary:hover {
  background-color: var(--brand-hover);
  border-color:     var(--brand-hover);
}

.btn-primary:active {
  background-color: var(--brand-active) !important;
  border-color:     var(--brand-active) !important;
  transform:        scale(0.975);
}

/* ── Outline secondary (dark-friendly) ── */
.btn-outline-secondary {
  color:        var(--text-secondary);
  border-color: var(--border-default);
  transition:   background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 120ms ease;
}

.btn-outline-secondary:hover {
  background-color: rgba(255,255,255,0.07);
  border-color:     var(--border-strong);
  color:            var(--text-primary);
}

.btn-outline-secondary:active {
  transform: scale(0.975);
}

/* ── Global focus ring ── */
.btn:focus-visible,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus,
.form-select:focus {
  box-shadow: var(--b9-focus-ring);
  outline: none;
}

/* ── Content padding ── */
.content {
  padding-top: 1.1rem;
}

/* ── Headings ── */
h1:focus {
  outline: none;
}

/* ── Form validation ── */
.valid.modified:not([type=checkbox]) {
  outline: 1.5px solid var(--b9-success);
}

.invalid {
  outline: 1.5px solid var(--b9-danger);
}

.validation-message {
  color:     var(--b9-danger);
  font-size: var(--font-size-sm);
}

/* ── Blazor error boundary ── */
.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--b9-danger);
  padding: 1rem 1rem 1rem 3.7rem;
  color:   #fff;
}

.blazor-error-boundary::after {
  content: "An unhandled error has occurred."
}

/* ── Misc Bootstrap helpers ── */
.darker-border-checkbox.form-check-input {
  border-color: var(--b9-border-strong);
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color:      var(--b9-input-placeholder);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ── Card default ── */
.card {
  background:    var(--bg-surface);
  border-radius: var(--b9-card-radius);
  border:        1px solid var(--border-subtle);
  box-shadow:    var(--b9-card-shadow);
  transition:    border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.card:hover {
  border-color:  var(--border-default);
  box-shadow:    var(--b9-card-shadow-hover);
  transform:     translateY(-1px);
}

.card-header {
  background:   var(--bg-elevated);
  border-bottom: 1px solid var(--border-subtle);
  color:        var(--text-primary);
}

.card-footer {
  background:   var(--bg-elevated);
  border-top:   1px solid var(--border-subtle);
}

/* ── Blazor error banner ── */
#blazor-error-ui {
  background:  var(--b9-dark-surface);
  bottom:      0;
  box-shadow:  0 -1px 0 rgba(255,255,255,.06);
  color:       var(--b9-dark-text);
  display:     none;
  left:        0;
  padding:     0.6rem 1.25rem 0.7rem 1.25rem;
  position:    fixed;
  width:       100%;
  z-index:     1000;
  /* The bar a golfer sees when everything else has already failed them. 13.6px was the worst
     possible place to be thrifty with type. */
  font-size:   var(--font-size-sm);
}

#blazor-error-ui .dismiss {
  cursor:   pointer;
  position: absolute;
  right:    0.75rem;
  top:      0.5rem;
}


/* ════════════════════════════════════════════════════════════
   TYPOGRAPHY BASE
   Consistent hierarchy across all pages.
════════════════════════════════════════════════════════════ */

h1, h2, h3, h4, h5, h6 {
  color:          var(--text-primary);
  font-weight:    700;
  letter-spacing: -0.025em;
  line-height:    1.25;
}

/* Page-level heading: h3/h4 range is most common in admin */
.h3, h3 { font-size: 1.125rem; }
.h4, h4 { font-size: 1.0rem;   }
.h5, h5 { font-size: 0.9375rem; font-weight: 600; }

p, li {
  font-size:   var(--font-size-base, 1rem);
  line-height: 1.65;
}

small, .small { font-size: var(--font-size-sm, 14px); }

/* A bare <code> renders SMALLER than the text around it, and not by anyone's choice: when the
   font-family resolves to the single generic keyword `monospace`, browsers substitute their
   "default fixed font size" (13px in Chrome) for the inherited one, so a <code> inside 14px
   text measured 12.25px. That is how `PairingsUnavailable` and a correlation id ended up three
   quarters of a pixel under the absolute floor on the commissioner's week page, with no rule
   anywhere saying so — the classic absence-as-the-defect shape.

   Two fixes, both needed: listing a second family after `monospace` defeats the special case,
   and `font-size: inherit` then keeps the code at exactly the size of the sentence holding it —
   14px in prose, 13px inside a chip, rather than a new number to maintain. */
code, kbd, samp, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace, monospace;
  font-size:   inherit;
}

/* Bootstrap sizes .badge in `em`, so a pill's size is whatever its container happens to be:
   the same class measured 12px beside a roster name, 11.04px in a pairing row and 10.5px
   inside a scorer tag. "Vendor CSS" is not an exemption — reaching for `.badge` is this
   project's decision, and the number it lands on is ours to own.

   The READ floor, not the chip floor, because in this app a `.badge` is rarely a decorative
   word: it carries a handicap (`pl-hcp-badge` renders "5.3", `fld-badge-strong` "16.7"), an
   age ("54d ago"), a roster count. Three independent reviews of the 2026-09-14 ops pass each
   landed on the same reason — the chip token's own definition says it is never for a value a
   person acts on. A badge that IS decorative can still opt down through its own class: this
   sits after bootstrap.min.css and before the scoped stylesheets, so a page that deliberately
   sizes its own badge wins. */
.badge { font-size: var(--font-size-sm, 14px); }

.text-muted,
.text-secondary,
.form-text,
.validation-message {
  font-size: var(--font-size-sm, 14px);
}

.btn,
.btn-link,
a.btn,
button,
[role="button"] {
  min-height: var(--touch-target-min, 48px);
}

tbody tr td button,
tbody tr td .btn,
tbody tr td a.btn,
tbody tr td a[role="button"] {
  min-height: var(--touch-target-min, 48px);
  min-width: var(--touch-target-min, 48px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* ════════════════════════════════════════════════════════════
   GLOBAL FORM SYSTEM
   Override Bootstrap form controls to inherit brand tokens.
   Applies to ALL pages automatically — no .razor edits needed.
════════════════════════════════════════════════════════════ */

/* ── Base controls (dark-first) ── */
.form-control,
.form-select {
  background-color: var(--bg-app);
  border:           1px solid var(--color-gray-400, #94A3B8);
  border-radius:    8px;
  color:            var(--text-primary);
  font-size:        var(--font-size-base, 1rem);
  font-family:      var(--b9-font-sans);
  /* The padding alone gave 44px — four short, on every text field in the product including the
     email and password on the sign-in page. X03, UX audit 2026-09-13. */
  min-height:       var(--touch-target-min);
  padding:          0.5625rem 0.875rem;
  transition:       border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
  box-shadow:       none;
}

.form-control::placeholder {
  color:   var(--text-muted);
  opacity: 1;
}

.form-control:hover:not(:disabled):not([readonly]):not(:focus),
.form-select:hover:not(:disabled):not(:focus) {
  border-color: var(--border-default);
  background-color: var(--bg-app);
}

.form-control:focus,
.form-select:focus {
  background-color: var(--bg-app);
  border-color:     var(--brand);
  box-shadow:       0 0 0 3px var(--brand-ring);
  color:            var(--text-primary);
  outline:          none;
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
  background-color: rgba(255,255,255,0.03);
  border-color:     var(--border-subtle);
  color:            var(--text-secondary);
  opacity:          0.78;
  cursor:           not-allowed;
}

/* ── Small variant ── */
.form-control-sm,
.form-select-sm {
  padding:       0.375rem 0.7rem;
  /* 16px, not the 14px floor: iOS zooms the whole page when an input under 16px takes focus.
     "Small" here means a tighter BOX, never smaller type. */
  font-size:     var(--font-size-base);
  border-radius: 6px;
}

/* ── Textarea ── */
textarea.form-control {
  min-height:  80px;
  resize:      vertical;
  line-height: 1.55;
}

/* ── Select arrow — visible on dark bg ── */
.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394A3B8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* The row a thumb actually aims at: the box plus its label, 48px tall, with the label centred
   against the taller box. `for=` makes the whole of it toggle the checkbox. */
.form-check {
  display:     flex;
  align-items: center;
  gap:         0.5rem;
  min-height:  var(--touch-target-min);
}

.form-check .form-check-label {
  display:     flex;
  align-items: center;
  min-height:  var(--touch-target-min);
  cursor:      pointer;
}

/* ── Checkboxes & radio buttons ── */
/* 24px, not 16. A checkbox is toggled by its label as much as by the box, so the target is the
   ROW (see .form-check below, which gives it 48px) — but 16px is small enough that hitting the
   box itself is a fiddle, and this is a product whose bar is a 90-year-old. Doubling the side
   more than doubles the area and still reads as a checkbox, which a 48px square would not.
   UX audit X03, 2026-09-13: the login page's "Remember me" measured 16x16. */
.form-check-input {
  width:            1.5rem;
  height:           1.5rem;
  background-color: var(--bg-elevated);
  border:           1px solid var(--border-default);
  transition:       border-color 0.12s, background-color 0.12s;
}

.form-check-input:checked {
  background-color: var(--brand);
  border-color:     var(--brand);
}

.form-check-input:focus {
  box-shadow:   0 0 0 3px var(--brand-ring);
  border-color: var(--brand);
  outline:      none;
}

.form-check-label {
  font-size: var(--font-size-sm, 14px);
  color:     var(--text-primary);
}

/* ── Labels ── */
.form-label {
  font-size:      var(--font-size-sm, 14px);
  font-weight:    700;
  color:          var(--text-helper, var(--text-secondary));
  margin-bottom:  0.4rem;
  display:        block;
  line-height:    1.4;
  letter-spacing: 0.01em;
}

/* ── Hint / helper text ── */
.form-text {
  font-size:  var(--font-size-sm, 14px);
  color:      var(--text-helper, var(--text-secondary));
  margin-top: 0.3rem;
  line-height: 1.5;
}

/* ── Validation states ── */
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--b9-danger);
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  border-color: var(--b9-danger);
  box-shadow:   0 0 0 3px rgba(239,68,68,0.2);
}

.form-control.is-valid,
.form-select.is-valid {
  border-color: var(--b9-success);
}

.invalid-feedback { color: var(--b9-danger-text, #FCA5A5); font-size: var(--font-size-sm, 14px); }
.valid-feedback   { color: var(--b9-success-text, #86EFAC); font-size: var(--font-size-sm, 14px); }

/* ── Input groups ── */
.input-group-text {
  background:    var(--bg-elevated);
  border:        1px solid var(--border-default);
  color:         var(--text-secondary);
  font-size:     0.875rem;
  border-radius: 8px;
}

/* ── Range slider ── */
.form-range::-webkit-slider-thumb { background: var(--brand); }
.form-range::-moz-range-thumb     { background: var(--brand); }


/* ════════════════════════════════════════════════════════════
   LIGHT MODE OVERRIDE
   Applied only when the user prefers light or a section uses
   data-theme="light". Admin is dark by default.
════════════════════════════════════════════════════════════ */

[data-theme="light"] .form-control,
[data-theme="light"] .form-select {
  background-color: #FFFFFF;
  border-color:     #CBD5E1;
  color:            #1A1A1A;
}

[data-theme="light"] .form-control::placeholder { color: #94A3B8; }
[data-theme="light"] .form-label                { color: #475569; }
[data-theme="light"] .form-text                 { color: #64748B; }
[data-theme="light"] .form-check-label          { color: #1A1A1A; }

[data-theme="light"] .form-control:focus,
[data-theme="light"] .form-select:focus {
  background-color: #FFFFFF;
  border-color:     #1D4ED8;
  box-shadow:       0 0 0 3px rgba(29,78,216,0.18);
  color:            #1A1A1A;
}


/* ============================================================
   AUTH PAGES — Login, Register, and other account pages
   Centred card that sits inside the main content area
   (sidebar is still rendered by MainLayout on desktop).
   ============================================================ */

.auth-page {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  min-height: calc(100vh - 3.5rem);
  padding: 2.5rem 1rem;
  background: var(--b9-surface);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--b9-card-radius);
  box-shadow: 0 8px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.06);
  padding: 2.25rem 2rem 2rem;
}

/* ── Logo area ── */
.auth-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.auth-logo img {
  height: 48px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* ── Title block ── */
.auth-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.auth-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
  letter-spacing: -0.02em;
}

.auth-subtitle {
  font-size: 0.875rem;
  color: var(--text-helper, var(--text-secondary));
  margin: 0;
}

/* ── Forgot-password inline link ── */
.auth-forgot-link {
  font-size: var(--font-size-sm);
  /* Link text uses the contrast-safe link token, not the brand-fill --b9-primary
     (#1D4ED8 = 2.66:1 on dark, fails WCAG AA; --b9-link = 7.02:1). */
  color: var(--b9-link);
  text-decoration: none;
  font-weight: 500;
}

.auth-forgot-link:hover {
  text-decoration: underline;
}


/* Both of these are the ONLY route out of a dead end — a forgotten password, a confirmation
   email that never arrived — and both measured 19px tall. A golfer who needs them is already
   stuck. X03, UX audit 2026-09-13. */
.auth-forgot-link,
.auth-secondary-action,
.auth-exit-link {
  display:     inline-flex;
  align-items: center;
  min-height:  var(--touch-target-min);
}

/* Third case, same reason: a lone link in a footer paragraph IS the way out of the page, and
   it is the only control on screen. Measured 390x844 on 2026-09-15 — Lockout "Back to sign in"
   96.25x16.50, ResendEmailConfirmation "Back to Sign In" 98x16.50 and "← Back to Sign In"
   126x19, ConfirmEmail "Return to home" 102x16.50.

   A link INSIDE a sentence deliberately does NOT get this class — that is WCAG 2.5.8's Inline
   exception, which floors.ts already honours. Growing the two stacked prose links on
   RegisterConfirmation was measured to overlap their hit areas by 15.4px, which flips which one
   a tap lands on: the fix would have been worse than the defect.

   min-height rather than the self-cancelling padding/margin pair used by .pam-back-link and
   .lb-sponsor-strip-all, and that is measured, not taste: on these anchors the repo's 14px pair
   reaches only 44.5px while they stay display:inline, and on .auth-intent-back a bare
   margin-block:-14px clobbers its own margin-bottom:1rem and drops the link 13.5px ONTO the card
   beneath it. */
.auth-exit-link {
  justify-content: center;
  min-width:       var(--touch-target-min);
}

/* ── Submit button ── */
.auth-submit-btn {
  padding: 0.625rem 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ── Divider ── */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.25rem 0;
  color: var(--b9-text-muted);
  font-size: var(--font-size-sm);
}

.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--b9-border);
}

/* ── Footer links ── */
.auth-footer-text {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--b9-text);
  margin: 0.625rem 0 0;
}

.auth-footer-text a {
  color: var(--b9-primary-text);
  font-weight: 500;
  text-decoration: none;
}

/* ── Info/tip box inside auth card ── */
.auth-info-box {
  background: var(--b9-surface-raised);
  border: 1px solid var(--b9-border);
  border-left: 3px solid var(--b9-primary);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  font-size: var(--font-size-sm);
  color: var(--text-helper, var(--text-secondary));
  line-height: 1.5;
}

/* ── Auth event/league context banner ── */
.auth-event-ctx {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 10px;
  padding: 0.875rem 1rem;
  margin-bottom: 1.25rem;
}

.auth-ctx-avatar {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #15803D;   /* was #16a34a — #fff 3.30:1, now 4.83:1 */
  color: #fff;
  font-weight: 700;
  font-size: var(--font-size-chip);
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-ctx-body {
  min-width: 0;
}

.auth-ctx-org {
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #15803d;
  line-height: 1.2;
  margin-bottom: 0.1rem;
}

.auth-ctx-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #14532d;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.auth-ctx-date {
  font-size: var(--font-size-sm);
  color: #166534;
  margin-top: 0.15rem;
}

/* ── Auth player invite banner ── */
.auth-invite-ctx {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 0.875rem 1rem;
  margin-bottom: 1.25rem;
}

.auth-invite-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #2563eb;
  color: #fff;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-footer-text a:hover {
  text-decoration: underline;
}

/* ── Register / account creation block (P4) ──────────────── */
.auth-register-block {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--b9-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.62rem;
}

.auth-register-prompt {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-secondary, #c2cfdf);
  font-weight: 500;
}

.auth-register-btn {
  width: 100%;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.58rem 1rem;
  border-radius: 8px;
}

.auth-secondary-action {
  display: inline-block;
  font-size: var(--font-size-sm);
  color: var(--text-muted, #9fb0c4);
  text-decoration: none;
}

.auth-secondary-action:hover {
  color: var(--text-secondary, #c2cfdf);
  text-decoration: underline;
}

.auth-app-promo {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--b9-border);
  display: flex;
  justify-content: center;
  text-align: center;
}

.auth-app-promo .storebadges {
  align-items: center;
}

/* ── Dark mode overrides ── */
@media (prefers-color-scheme: dark) {
  .auth-card {
    background: var(--b9-dark-surface);
    border-color: var(--b9-dark-border);
  }

  .auth-logo img {
    /* Primary logo has dark wordmark — swap to dark variant via CSS filter on dark bg */
    filter: none; /* BrandLogo component handles variant selection; no filter needed */
  }
}

[data-theme="dark"] .auth-card {
  background: var(--b9-dark-surface);
  border-color: var(--b9-dark-border);
}

/* ── Auth intent picker (generic registration entry-point) ── */
.auth-intent-picker {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.auth-intent-confidence {
  margin: -0.25rem 0 1.1rem;
  display: grid;
  gap: 0.25rem;
  text-align: center;
}

.auth-intent-confidence span {
  /* "Free to get started" / "No credit card required" — the two sentences that answer a
     golfer's last hesitation before creating an account. They were 12.48px. */
  font-size: var(--font-size-sm);
  color: var(--text-muted, #9fb0c4);
  line-height: 1.35;
}

.auth-intent-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--b9-surface-raised);
  border: 1.5px solid var(--b9-border);
  border-radius: 12px;
  padding: 1rem 1.125rem;
  text-decoration: none;
  color: var(--text-primary);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.auth-intent-card:hover {
  border-color: var(--b9-primary);
  box-shadow: 0 2px 12px rgba(37,99,235,0.12);
  color: var(--text-primary);
  text-decoration: none;
}

.auth-intent-icon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
}

.auth-intent-icon--player {
  background: #dbeafe;
  /* Ink ON a hardcoded light tile: the static dark brand blue (7.2:1 here). The themed
     --b9-primary-text is #93C5FD on :root and would sit pale-on-pale before the theme
     attribute lands; [data-theme="dark"] below re-tints both tile and ink. */
  color: var(--b9-primary-active);
}

.auth-intent-icon--org {
  background: #d1fae5;
  color: #059669;
}

.auth-intent-body {
  flex: 1;
  min-width: 0;
}

.auth-intent-title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.auth-intent-sub {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-top: 0.15rem;
}

.auth-intent-arrow {
  color: var(--b9-text-muted);
  font-size: 0.875rem;
  flex-shrink: 0;
}

.auth-intent-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--font-size-sm);
  color: var(--b9-text-muted);
  text-decoration: none;
  margin-bottom: 1rem;
}

.auth-intent-back:hover {
  color: var(--b9-primary-text);
  text-decoration: none;
}

.auth-intent-selected {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 0.95rem;
  padding: 0.72rem 0.82rem;
  border-radius: 10px;
  border: 1px solid rgba(37, 99, 235, 0.3);
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.1), rgba(37, 99, 235, 0.04));
}

.auth-intent-selected-check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(37, 99, 235, 0.18);
  border: 1px solid rgba(37, 99, 235, 0.45);
  color: #bfdbfe;
  font-size: var(--font-size-chip);
}

.auth-intent-selected-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.auth-intent-selected-copy strong {
  color: var(--text-primary, #f3f6fb);
  font-size: 0.88rem;
  line-height: 1.25;
}

.auth-intent-selected-copy span {
  color: var(--text-secondary, #c2cfdf);
  /* The sentence under whichever kind of account a golfer just chose. 12.16px. */
  font-size: var(--font-size-sm);
  line-height: 1.35;
}

.auth-intent-selected--organizer {
  background: linear-gradient(180deg, rgba(37, 99, 235, 0.12), rgba(15, 23, 42, 0.24));
}

[data-theme="dark"] .auth-intent-card {
  background: var(--b9-dark-surface-raised, #1e293b);
  border-color: var(--b9-dark-border, #334155);
}

[data-theme="dark"] .auth-intent-card:hover {
  border-color: var(--b9-primary);
  background: rgba(37,99,235,0.1);
}

[data-theme="dark"] .auth-intent-icon--player {
  background: rgba(37,99,235,0.2);
  color: #93c5fd;
}

[data-theme="dark"] .auth-intent-icon--org {
  background: rgba(5,150,105,0.2);
  color: #6ee7b7;
}

[data-theme="dark"] .auth-intent-confidence span {
  color: var(--text-muted, #9fb0c4);
}

[data-theme="dark"] .auth-intent-selected {
  border-color: rgba(59, 130, 246, 0.42);
  background: linear-gradient(180deg, rgba(30, 64, 175, 0.2), rgba(15, 23, 42, 0.5));
}

[data-theme="dark"] .auth-intent-selected-check {
  background: rgba(59, 130, 246, 0.24);
  border-color: rgba(147, 197, 253, 0.5);
  color: #dbeafe;
}

/* ── Handicap component baseline accessibility ────────────────────────── */
/* Enforce minimum readable font-size for all handicap UI components.      */
/* Per WCAG 1.4.4 and Back9Ops accessibility requirement: min 16px.        */
.hcp-badge,
.hcp-card,
.hcp-summary-banner,
.hcp-breakdown {
    font-size: max(1rem, 16px);
}

/* Trend chart row in standings table */
.hcp-trend-details {
    padding: 0;
}

.hcp-trend-summary {
    padding: 0.35rem 0.75rem;
    font-size: max(0.875rem, 14px);
    color: #6b7280;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.hcp-trend-summary::-webkit-details-marker { display: none; }

.hcp-trend-summary::before {
    content: '▸ ';
    font-size: 0.7em;
}

details[open].hcp-trend-details .hcp-trend-summary::before {
    content: '▾ ';
}

.hcp-trend-chart-wrap {
    padding: 0.5rem 0.75rem 0.75rem;
}