/* The server-rendered sign-in pages (/login, the code step, /connect, the
   invite landing, errors), in the extension's first-run dress (#32; cyan 1's
   boards 0a/0b): welcome.css's centred column -- wordmark 40, title 22/600,
   sentence on a 400px measure, one 230px primary -- on the same tokens.css
   the web app loads. No card: the page is the column.

   These pages carry no script (the invite landing is JS-free by rule), so
   the theme cannot be stamped as data-theme the way theme.js does in the app.
   Instead the system setting picks it: the block below is tokens.css's
   :root[data-theme="dark"] body VERBATIM under a media query, and
   TestLoginDarkTokens fails the build if the two ever differ. */
:root { color-scheme: light dark; }
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    /* Foreground Colors */
    --ForegroundPrimary: rgba(223, 229, 229, 1);
    --ForegroundStrong: rgba(255, 255, 255, 1);
    --ForegroundDisabled: rgba(143, 143, 143, 1);
    --ForegroundWatermark: rgba(140, 140, 140, 1);
    /* Invert Foreground Colors */
    --ForegroundInvertPrimary: rgba(223, 229, 229, 1);
    --ForegroundInvertStrong: rgba(255, 255, 255, 1);
    --ForegroundInvertDisabled: rgba(143, 143, 143, 1);
    --ForegroundInvertWatermark: rgba(140, 140, 140, 1);
    /* Action Foreground Colors */
    --ForegroundAction: rgba(129, 140, 248, 1); /* TODO(placeholder): real design from Jon — accent */
    /* Background Colors */
    --BackgroundPrimary: rgba(28, 28, 28, 1);
    --BackgroundStrong: rgba(22, 22, 22, 1);
    --BackgroundStrongStepOne: rgba(34, 34, 34, 1);
    --BackgroundStepOne: rgba(45, 45, 45, 1);
    --BackgroundStepTwo: rgba(32, 32, 32, 1);
    --BackgroundOutline: rgba(37, 37, 37, 1);
    --BackgroundInput: rgba(37, 37, 37, 1);
    --BackgroundInputOutline: rgba(10, 10, 10, 1);
    /* Invert Background Colors */
    --BackgroundInvertPrimary: rgba(45, 45, 45, 1);
    --BackgroundInvertStrong: rgba(10, 10, 10, 1);
    --BackgroundInvertStrongStepOne: rgba(47, 47, 47, 1);
    --BackgroundInvertStepOne: rgba(47, 47, 47, 1);
    --BackgroundInvertStepTwo: rgba(51, 51, 51, 1);
    --BackgroundInvertOutline: rgba(51, 51, 51, 0.133);
    --BackgroundInvertInput: rgba(17, 17, 17, 1);
    --BackgroundInvertInputOutline: rgba(0, 0, 0, 1);
    /* Inner Linework Colors */
    --InnerLines: rgba(68, 68, 68, 0.6);
    --InnerLinesInvert: rgba(68, 68, 68, 0.6);
    --InnerLineDividers: rgba(0, 0, 0, 0);
    /* Shadow Element Colors */
    --ShadowElements: rgba(0, 0, 0, 1);
    /* MouseOver Colors */
    --MouseOverPrimary: rgba(165, 180, 252, 1); /* TODO(placeholder): real design from Jon — accent hover */
    --MouseOverAction: rgba(67, 56, 202, 1); /* cyan 1 (#44): hover for a solid indigo button under white text */
    /* cyan 1 (#110): the danger button, the same in both
       themes -- white on #C41E2E, and #A31826 hovered or pressed. */
    --DangerAction: rgba(196, 30, 46, 1);
    --MouseOverDanger: rgba(163, 24, 38, 1);
    /* #110, mirroring the extension's sc#51: danger as text (--danger) -- menu and
       nav items, errors, the over-count, the setup result marks. >= 4.5:1 on every
       surface, hovered menu items included. */
    --DangerInk: rgba(248, 113, 113, 1);
    /* #110: a text field's resting border (inputs, textareas, selects) -- its only
       boundary, since fields share the page colour: >= 3:1 (WCAG 1.4.11). Dividers
       stay --InnerLines; a focused field keeps the accent. */
    --InputBorder: rgba(110, 110, 110, 1);
    --MouseOverBackground: rgba(6, 6, 6, 1);
    --MouseOverInvertBackground: rgba(34, 34, 34, 1);
    /* Selection Colors */
    --SelectionPrimary: rgba(79, 70, 229, 1); /* TODO(placeholder): real design from Jon — selection */
    --SelectionSecondary: rgba(99, 102, 241, 1); /* TODO(placeholder): real design from Jon — selection */
    --SelectionForeground: rgba(255, 255, 255, 1);
    /* ScrollBar Colors */
    --ScrollBarPrimary: rgba(223, 229, 229, 0.3);
    /* Information Colors */
    --InformationBlue: rgba(129, 140, 248, 1); /* TODO(placeholder): real design from Jon — info / link */
    --InformationBlueAlt: rgba(165, 180, 252, 1); /* TODO(placeholder): real design from Jon — info / link */
    --InformationGreen: rgba(146, 212, 0, 1);
    --InformationYellow: rgba(254, 209, 0, 1);
    --InformationYellowGreen: rgba(154, 205, 50, 1);
    --InformationGreenYellow: rgba(173, 255, 47, 1);
    --InformationOrange: rgba(255, 128, 0, 1);
    --InformationRed: rgba(237, 41, 57, 1);
    --InformationRedAlt: rgba(255, 0, 0, 1);
    --InformationPurple: rgba(196, 153, 247, 1);
    --InformationForeground: rgba(0, 0, 0, 1);
    --InformationBlack: rgba(153, 153, 153, 1);
    --InformationGray: rgba(169, 169, 169, 1);
    --InformationForegroundAlt: rgba(255, 255, 255, 1);
    /* Message Delivery Colors */
    --MessageDeliveryIconInfo: rgba(129, 140, 248, 1); /* TODO(placeholder): real design from Jon — info */
    --MessageDeliveryIconOk: rgba(146, 212, 0, 1);
    --MessageDeliveryIconCritical: rgba(230, 35, 51, 1);
    --MessageDeliveryIconWarning: rgba(255, 128, 0, 1);
    --MessageDeliveryBackgroundInfo: rgba(10, 14, 19, 1);
    --MessageDeliveryBackgroundOk: rgba(17, 22, 17, 1);
    --MessageDeliveryBackgroundCritical: rgba(31, 17, 17, 1);
    --MessageDeliveryBackgroundWarning: rgba(37, 25, 11, 1);
    --MessageDeliveryForeground: rgba(221, 221, 221, 1);
  }
}
body {
  margin: 0;
  font: var(--font-default);
  font-weight: var(--font-normal);
  background: var(--bg);
  color: var(--text);
}
main {
  box-sizing: border-box;
  min-height: 100vh;
  max-width: 520px;
  margin: 0 auto;
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  text-align: center;
  gap: 12px;
}
.mark { color: var(--text-strong); margin: 0 auto 4px; }
.mark svg { height: 40px; width: auto; display: block; }
h1 { margin: 4px 0 0; font-size: 22px; line-height: 1.25; font-weight: 700; color: var(--text-strong); }
/* An address is bold body text that moves to its own line whole, breaking
   inside only when it is wider than the column by itself. */
p strong { display: inline-block; max-width: 100%; color: var(--text); font-weight: 700; word-break: break-all; }
p, ul { margin: 0; max-width: 400px; font-size: 14px; line-height: 1.45; color: var(--text-light); }
ul { text-align: left; padding-left: 1.1rem; }
.err { color: var(--danger); }

/* Forms: label and field left-aligned in a column the width of the page's
   controls; the primary is welcome.css's .account-signin. */
form { width: min(300px, 100%); display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-top: 8px; text-align: left; }
label { font-size: 12px; font-weight: 500; color: var(--text); }
input {
  box-sizing: border-box;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--InputBorder);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 14px;
}
input:focus { outline: none; border-color: var(--accent); }
input.bad, input.bad:focus { border-color: var(--danger); }
/* A row spans the column: centred in it, it would shrink to its button's
   text and the 230px width below would resolve against that. */
.row { align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 10px; }
button, a.btn {
  box-sizing: border-box;
  display: block;
  width: min(230px, 100%);
  padding: 8px 12px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: var(--accent-text);
  font: inherit;
  font-size: 13px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
button:hover, a.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
button:focus-visible, a.btn:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
/* The secondary ("Start over", "Decline"): a quiet text button. */
button.ghost, a.btn.ghost { background: none; border-color: transparent; color: var(--text-light); }
button.ghost:hover, a.btn.ghost:hover { background: none; border-color: transparent; color: var(--text); text-decoration: underline; }
/* In a form the primary is the field's width (cyan 1); alone it keeps 230. */
form .row { align-items: stretch; }
form .row button:not(.ghost) { width: 100%; }
form .row .ghost { align-self: center; width: auto; }
/* Dark: the dark tokens' --accent is a light indigo, where white ink is under
   3:1. The extension's fix for the same defect (DEV 8, #46): a deeper fill
   with white ink, 6.29:1, and 7.90:1 on hover. Tokens, not hex (#99): the
   dark block above makes --SelectionPrimary #4F46E5 and --MouseOverAction
   #4338CA, the same pair as the app's dark .btn-primary. */
@media (prefers-color-scheme: dark) {
  button:not(.ghost), a.btn:not(.ghost) { background: var(--SelectionPrimary); border-color: var(--SelectionPrimary); color: var(--accent-text); }
  button:not(.ghost):hover, a.btn:not(.ghost):hover { background: var(--MouseOverAction); border-color: var(--MouseOverAction); }
}

/* The invite landing's blocks. */
.notice, .tok {
  box-sizing: border-box;
  width: min(400px, 100%);
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  text-align: left;
}
.tok { font-family: ui-monospace, monospace; word-break: break-all; }