/*! NewsBridge — login + error page styles. Loaded after newsbridge.css by login.html and error.html only.
    Tokens only: no raw colours, no px font sizes. */

/* ---- sign in ----
   One column by default: the sign-in form first (it is first in the source too), the brand panel below it,
   both the same width and centred (tablets, and laptops with enlarged text, get one tidy column).
   Two panels side by side when the page column has room at the current text size (52rem): the brand panel
   moves to the left, the form stays on the right. The brand panel holds nothing focusable, so moving it
   never changes the tab order. */
/* The page fills the window and the panels sit in the middle of the space under the top bar, rather than at
   the top with empty canvas below (desktops; most phones scroll). The body is a column so main can grow;
   the skip link is positioned out of flow. The page's own padding is made even so the centring is true. */
.login-body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.login-body .main { display: flex; flex-direction: column; justify-content: center; }
.login { container: login / inline-size; padding-block: var(--sp-6); }
@media (min-width: 48em) { .login { padding-block: var(--sp-8); } }
.login__grid { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr); max-width: 36rem; margin-inline: auto; }
.login__form { min-width: 0; }
.login__hero { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; padding: var(--sp-8) var(--panel-pad); background: var(--surface-1); border: 1px solid var(--border); }
@container login (min-width: 52rem) {
  .login__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: stretch; max-width: 72rem; }
  .login__hero { order: -1; justify-content: center; padding: var(--sp-12) var(--sp-10); }
  .login__form { display: flex; }
  .login__form > .login-card { flex: 1; justify-content: center; }
}
/* The wordmark stays on one line. "NewsBridge_" is about 5.8em wide and the panel's text column is the
   container minus 2.625rem, so the display size steps down where it would no longer fit (small phones at
   enlarged text). overflow-wrap is only the last resort below 12.8rem. */
.login__title { font-size: var(--fs-display); font-weight: var(--display-weight); letter-spacing: -0.025em; line-height: 1.05; overflow-wrap: anywhere; }
@container login (max-width: 17.49rem) { .login__title { font-size: 2.125rem; } }
@container login (max-width: 14.99rem) { .login__title { font-size: 1.75rem; } }

.login-card { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; padding: var(--sp-8) var(--panel-pad); background: var(--surface-1); border: 1px solid var(--border); }
.login-card__title { font-size: var(--fs-h1); font-weight: 400; letter-spacing: -0.02em; line-height: var(--lh-tight); }   /* also the error page heading */

/* ---- password box + Show / Hide ---- (a narrow-column variant of the shared .password; sign-in is its only user)
   Side by side when there is room. When the column is narrow at the current text size (phones, or enlarged
   text) the button moves under the box as a full-width strip reading "Show password", so the box keeps its
   whole width — beside it, a phone with enlarged text had room for only two or three characters.
   The word "password" is always part of the button's name; it is only shown when the button is on its own row.
   The shared .password rule removes the box's right edge so the button sits flush against it; the edge comes
   back when the button is below the box, and when it is not rendered at all (no JavaScript). */
.login-card__pw-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.login-card .password .input { border-right-color: var(--border-control); }
.login-card .password .input[aria-invalid="true"] { border-right-color: var(--danger-mark); }
.login-card .password .input:hover { border-right-color: var(--text-2); }
.login-card .password .input:focus-visible { border-right-color: var(--text); }
html:not(.js) .login-card .password .input { border-right-width: 2px; border-right-style: solid; }
@container login (max-width: 23.99rem) {
  .login-card .password { flex-direction: column; }
  .login-card .password .input { flex: none; border-right-width: 2px; border-right-style: solid; }
  .login-card .password .btn { min-height: var(--tap); border-top: 0; }
  .login-card__pw-word { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
}

/* ---- error page (error.html) ---- */
.error-block { display: flex; flex-direction: column; gap: var(--sp-5); max-width: 36rem; margin-inline: auto; padding: var(--sp-8) var(--panel-pad); background: var(--surface-1); border: 1px solid var(--border); }
.error-block__code { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--fs-meta); }