/**
 * Inline login gate — shared by the Shows Dashboard and the standalone
 * report pages.
 *
 * Extracted from shows-dashboard.css §20 (2026-08-12) so the report pages can
 * render the same sign-in form without pulling in the whole ~4,000-line
 * dashboard stylesheet, most of which is unscoped bare classes that would
 * bleed into the report tables. shows-dashboard.css now DEPENDS on this file
 * rather than carrying its own copy — one set of rules, both surfaces.
 *
 * Self-contained on purpose: it re-declares the handful of tokens it needs
 * scoped to .ucb-login-gate rather than reading shows-dashboard.css's :root,
 * because on a report page that stylesheet isn't loaded. Values mirror the
 * dashboard tokens; keep them in sync if the brand palette moves.
 *
 * Loads BEFORE shows-dashboard.css (dependency order), so on the dashboard
 * .btn/.btn-primary still win for the submit button and nothing changes
 * visually there. Standalone, .inline-login-submit stands on its own.
 */

/* Everything below reads shows-dashboard.css's :root tokens with a LITERAL
 * fallback — `var(--ucb-border-strong, #767676)`. On the dashboard the token
 * resolves; on a report page (where that stylesheet isn't loaded) the fallback
 * does, and the two are the same value. Copy fallbacks from that file exactly:
 * a "close enough" guess is a real defect, not a cosmetic one. An earlier draft
 * guessed #d4d4d8 for the border and took it from 4.35:1 to 1.42:1, under the
 * 3:1 WCAG 1.4.11 asks of a UI component boundary.
 *
 * .ucb-login-gate wraps the standalone rendering only. It exists for the few
 * rules that must NOT reach the dashboard (the standalone button skin, which
 * would otherwise repaint every .btn, and the scoped .hidden) — not as a
 * general scope. */
.ucb-login-gate {
  --ucb-lg-brand: #8B2025;
  --ucb-lg-brand-dark: #6B181C;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ucb-gray-800, #27272a);
}

/* ── Layout ─────────────────────────────────────────────────── */
.inline-login {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
}
.inline-login-inner {
  text-align: center;
  max-width: 340px;
  width: 100%;
}
.inline-login-icon {
  font-size: 36px;
  margin-bottom: 12px;
  opacity: 0.4;
}
.inline-login-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--ucb-gray-800, #27272a);
  margin-bottom: 4px;
  font-family: 'Knockout 31 Junior Middlewt', 'DM Sans', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
}
/* gray-600, not gray-500 (2026-08-12). #71717a measured 4.51:1 on the #f7f7f7
   report page — it passes 1.4.3 by 0.01, which is not a margin, and this line
   carries the "contact us" instruction in the denied state. #52525b measures
   7.21:1 on the same background. Applies to the dashboard's copy of this
   component too; slightly darker secondary text there. */
.inline-login-sub {
  font-size: 13px;
  color: var(--ucb-gray-600, #52525b);
  margin-bottom: 20px;
}

/* ── Form ───────────────────────────────────────────────────── */
.inline-login-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.inline-login-input {
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
  font-family: inherit;
  border: 1px solid var(--ucb-border-strong, #767676);
  border-radius: var(--ucb-radius-sm, 8px);
  background: var(--ucb-gray-50, #fafafa);
  color: var(--ucb-gray-800, #27272a);
}
.inline-login-input:focus {
  outline: none;
  border-color: var(--ucb-brand, #8B2025);
  box-shadow: 0 0 0 3px rgba(139, 32, 37, 0.25);
}
/* WCAG 2.4.7 Focus Visible (AA). The doubled-class rule below needs `border`
   as a SHORTHAND to beat The7 — and that shorthand at (0,2,0) silently
   overrides the border-color the (0,2,0) :focus rule above sets, source order
   deciding it. Without this the field has NO focus indicator at all. Restate
   the focus treatment one level higher so it wins on both surfaces.
   Ring is #8B2025 on #fafafa = 8.63:1, comfortably over 1.4.11's 3:1. */
.inline-login-input.inline-login-input:focus {
  border-color: var(--ucb-brand, #8B2025);
  box-shadow: 0 0 0 3px rgba(139, 32, 37, 0.25);
}
/* WCAG 2.4.7 focus visibility (2026-07 audit): defensive explicit fallback —
   this login-gate markup may render before #shows-dashboard's wrapper is
   present, so don't rely solely on the blanket :focus-visible rule. */
.inline-login-input:focus-visible {
  outline: 2px solid var(--ucb-brand, #8B2025);
  outline-offset: 2px;
}
/* WCAG 1.4.3 (AA, 4.5:1) — the `opacity` here is the load-bearing part.
 *
 * #71717a on the #fafafa field is 4.63:1, which passes. But The7 ships
 * `input::-webkit-input-placeholder { opacity: var(--the7-form-placeholder-opacity, .5) }`
 * and a matching `:focus` rule at 0.15, and opacity composites the text INTO
 * the background — so the colour that passes on paper rendered at ~1.94:1 at
 * rest and ~1.16:1 (all but invisible) once focused. Measured in-browser
 * 2026-08-12; the effective fill was rgb(182,182,186).
 *
 * Declaring opacity:1 hands the contrast back to the colour, which is the only
 * thing here that was ever audited. Unscoped (not under .ucb-login-gate) on
 * purpose: the dashboard's own login gate uses these same classes under the
 * same theme and had the identical defect.
 *
 * The focus rule needs (0,2,0) to beat The7's `input:focus::…` at (0,1,1).
 * Keep the two selectors in SEPARATE rules — a browser that doesn't recognise
 * one selector in a grouped list drops the whole rule. */
.inline-login-input::placeholder {
  color: var(--ucb-gray-500, #71717a);
  opacity: 1;
}
.inline-login-input:focus::placeholder {
  opacity: 1;
}

/* The7 styles form controls at real specificity — `input[type="text"]` (0,1,1)
   beats the single-class rules above (0,1,0) — and repaints these fields to its
   own palette. Measured on the REAL dashboard login gate before this rule:
   typed text #8b8d94 = 3.26:1 (fails 1.4.3's 4.5:1) and a border painting out
   to rgb(229,229,229) = 1.24:1 (fails 1.4.11's 3:1). Same trap ucb-dialog.css
   hit in 2.31.7; same fix — doubled class, no !important.

   NOT scoped to .ucb-login-gate. An earlier draft was, on the reasoning that it
   "can never touch a dashboard input" — but the dashboard runs the same theme
   and had the identical failures, so scoping it there just meant fixing one of
   two broken surfaces. The doubled class targets only our own component, so
   there is nothing else it can reach.

   var(--token, literal): the tokens resolve from shows-dashboard.css's :root on
   the dashboard and fall back to the same values standalone. Convention 33. */
.inline-login-input.inline-login-input {
  color: var(--ucb-gray-800, #27272a);
  background: var(--ucb-gray-50, #fafafa);
  border: 1px solid var(--ucb-border-strong, #767676);
  /* The7 also flattens the corners to 1px. Cosmetic, not WCAG. */
  border-radius: var(--ucb-radius-sm, 8px);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.inline-login-error {
  font-size: 13px;
  font-weight: 600;
  color: var(--ucb-red-dark, #b91c1c);
  text-align: left;
}
.inline-login-submit {
  width: 100%;
  padding: 12px 20px !important;
  font-size: 15px !important;
}

/* Standalone appearance for the submit button. On the dashboard the button
   also carries .btn.btn-primary from shows-dashboard.css, which loads after
   this file and so keeps ownership of the visuals there (equal specificity,
   later source wins). Scoped under .ucb-login-gate so it can never repaint a
   dashboard button. */
.ucb-login-gate .inline-login-submit {
  background: var(--ucb-lg-brand);
  color: #fff;
  border: 1px solid var(--ucb-lg-brand);
  border-radius: 5px;
  font-family: 'Knockout 31 Junior Middlewt', 'DM Sans', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.ucb-login-gate .inline-login-submit:hover {
  background: var(--ucb-lg-brand-dark);
  border-color: var(--ucb-lg-brand-dark);
}
.ucb-login-gate .inline-login-submit:disabled {
  opacity: 0.65;
  cursor: default;
}

/* ── Signed in, but not permitted ───────────────────────────── */
.ucb-access-denied {
  text-align: center;
  padding: 60px 20px;
}
/* Standalone-only: the dashboard renders this inside its own typography
   context, a report page doesn't. */
.ucb-login-gate .ucb-access-denied p {
  max-width: 420px;
  margin: 0 auto;
}
/* WCAG 1.4.1 Use of Color (Level A). Both themes strip link underlines, which
   left this mailto distinguished from the sentence around it by COLOUR ALONE —
   and #8B2025 against the #52525b body text is only 1.86:1, well under the 3:1
   that would let colour carry the distinction on its own. Underline it. */
.ucb-login-gate .ucb-access-denied a {
  color: var(--ucb-lg-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The dashboard's own .hidden is scoped to #shows-dashboard (shows-dashboard.css
   line ~91), which doesn't wrap the standalone gate — so it needs its own,
   scoped just as tightly. A bare `.hidden` here would bleed onto any page that
   loads this file. */
.ucb-login-gate .hidden {
  display: none;
}