/* Current -- shared auth gate styles
 *
 * Drop this in via <link rel="stylesheet" href="/auth-gate.css"> before
 * your page-specific styles. The page can override any of these (they're
 * scoped to .auth-gate-* classes and a few specific IDs).
 *
 * Variables fall through to the page's --bg / --surface / --border / --text
 * / --muted / --green / --shadow if defined. Sensible defaults otherwise.
 */

:root {
  --ag-bg:      var(--bg, #EFF1EC);
  --ag-surface: var(--surface, #ffffff);
  --ag-border:  var(--border, #DFE2DA);
  --ag-text:    var(--text, #1A2332);
  --ag-muted:   var(--muted, #5B6576);
  --ag-green:   var(--green, #78C832);
  --ag-shadow:  var(--shadow, 0 1px 3px rgba(0,0,0,0.08));
  /* Portal standard (Dan, 2026-10-23): square corners. Every card-like surface (cards, panels, tiles, sections,
     stage sections, banners, modals, drawers, menus, toasts, table boxes, the Save bar, hero blocks, images in
     cards) reads its radius from this one token as var(--radius-card, 0). Pills, chips, badges, buttons, inputs,
     avatars, dots, toggles and progress bars keep their own radius. tests/square-corners.test.mjs holds the line. */
  --radius-card: 0;
  /* Portal accent (Dan, 2026-10-23): a muted steel blue replaces the old bright blue wherever it is a UI accent.
     --accent-steel is for fills, rules, marks and gradient ends (5.4:1 on white, 4.7:1 on the #EFF1EC page).
     --accent-steel-text is for text and links (6.3:1 on white, 5.5:1 on #EFF1EC). --accent-steel-focus is the
     focus ring. Tints derive from the token with color-mix. Categorical palettes (DISC C, the Battery category,
     per-tile console colours) and the Trinity Total Home logo keep their own blue. */
  --accent-steel: #2F6F9F;
  --accent-steel-text: #2A6590;
  --accent-steel-focus: #2F6F9F;
  --accent-steel-on-dark: #8DB3D6; /* text and rings on surfaces that are navy or charcoal in every theme */
  --accent-steel-gradient: linear-gradient(90deg, #78C832 0%, #63B362 25%, #4F9D7D 50%, #3D8790 75%, #2F6F9F 100%);
}
/* Charcoal theme (#111112 page, #1b1b1d surface): the steel itself is 3.2:1 there, enough for rules and fills but
   not for text, so text, links and focus rings take the light tint of the same hue (7.8:1 on #1b1b1d). */
:root[data-theme="dark"] {
  --accent-steel-text: var(--accent-steel-on-dark);
  --accent-steel-focus: var(--accent-steel-on-dark);
}

#loginScreen,
#changePasswordScreen {
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  background: var(--ag-bg);
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
}

/* Border-box inside the card. Without this, `width: 100%` + padding made every
 * field 26px WIDER than the card's content box. The username field got away
 * with it -- the card's 32px padding absorbed the spill, leaving 6px. The
 * password field did not: the eye toggle re-pads it to 42px on the right, so it
 * measured 436px and hung 23px past the card's right border. Same root cause put
 * the eye ~95px inboard of the field's right edge -- the button is positioned
 * off its wrapper, and the wrapper was the only element actually the card's
 * width. Border-box makes input, wrapper, button and card agree on one width.
 */
.auth-card,
.auth-card input,
.auth-card button,
.auth-card .auth-error {
  box-sizing: border-box;
}

.auth-card {
  background: var(--ag-surface);
  border: 1px solid var(--ag-border);
  border-radius: var(--radius-card, 0);
  padding: 32px;
  max-width: 380px;
  width: 100%;
  box-shadow: var(--ag-shadow);
}

.auth-card h2 {
  font-family: 'Fraunces', 'Plus Jakarta Sans', serif;
  font-size: 22px;
  color: var(--ag-text);
  margin: 0 0 8px;
}

.auth-card p {
  color: var(--ag-muted);
  font-size: 13px;
  line-height: 1.5;
  margin: 0 0 20px;
}

.auth-card label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--ag-muted);
  margin: 12px 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.auth-card input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--ag-border);
  border-radius: 6px;
  background: var(--ag-surface);
  color: var(--ag-text);
  font-family: inherit;
  font-size: 14px;
}

.auth-card input:focus {
  outline: 2px solid var(--ag-green);
  outline-offset: -1px;
}

.auth-card .btn-auth {
  width: 100%;
  margin-top: 20px;
  padding: 10px 16px;
  background: var(--ag-green);
  color: var(--ag-text); /* white on this green is 2.1:1; the ink colour is 7.6:1 */
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

.auth-card .btn-auth:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.auth-card .auth-error {
  background: #FEF2F2;
  border: 1px solid #FCA5A5;
  color: #991B1B;
  font-size: 12px;
  padding: 9px 12px;
  border-radius: var(--radius-card, 0);
  margin-bottom: 14px;
}

.auth-card .auth-hint {
  margin-top: 16px;
  font-size: 12px;
  color: var(--ag-muted);
  line-height: 1.5;
}

/* Cancel on the change-password screen when it is opened from the settings gear (openChangePassword in auth-gate.js). */
.btn-auth-cancel {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 10px 16px;
  background: transparent;
  color: var(--ag-text);
  border: 1px solid var(--ag-border);
  border-radius: 6px;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

/* Under the site bar the screen fills what is left of the window, so it does not scroll by the bar's height. */
html.ct-has-bar #changePasswordScreen {
  min-height: calc(100vh - var(--ct-bar-h, 0px));
}