/* The accountant's sign-in (SIGN_IN_SPEC.md; mock docs/ui/design/sign-in-mock.html on ui/broadsheet): one small card
   under the bar. A static file the server serves as it is (no build step), so the Ledger tokens are repeated here from
   src/bs/tokens.css, and the two fonts come from the app's own origin (latin and latin-ext; SIL OFL 1.1, licences in
   /fonts). The phone is the same card, the full width less 14 px each side: fields 16 px so that a phone does not zoom,
   buttons 44 px. */
@font-face { font-family: "Noto Sans"; font-style: normal; font-display: swap; font-weight: 400 700;
  src: url("/fonts/noto-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Noto Sans"; font-style: normal; font-display: swap; font-weight: 400 700;
  src: url("/fonts/noto-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-display: swap; font-weight: 600;
  src: url("/fonts/source-serif-4-latin-ext-opsz-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-display: swap; font-weight: 600;
  src: url("/fonts/source-serif-4-latin-opsz-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --si-ink: #17231f; --si-ink-2: #3f4f4a; --si-muted: #5f6e69; --si-faint: #8b9894;
  --si-paper: #f7f8f6; --si-sheet: #ffffff; --si-subtle: #f4f6f5; --si-rule-soft: #eef1ef; --si-rule: #e2e7e4;
  --si-rule-strong: #cbd4cf; --si-primary: #17594e; --si-primary-hover: #0d4a40; --si-flag: #92361f;
  --si-bar: #203b37; --si-bar-ink: #f3f8f5; --si-bar-sep: #3d5853;
  --si-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --si-sans: "Noto Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --si-radius: 6px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.si-page { margin: 0; min-height: 100vh; background: var(--si-paper); color: var(--si-ink); font: 400 13.5px/18px var(--si-sans);
  -webkit-font-smoothing: antialiased; font-variant-numeric: lining-nums tabular-nums; }
.si-page h1, .si-page p { margin: 0; }
.si-page [hidden] { display: none !important; }

/* The bar: the product's, with "Eziar" alone. */
.si-bar { display: flex; align-items: center; height: 48px; padding: 0 20px; background: var(--si-bar); color: var(--si-bar-ink); border-bottom: 1px solid var(--si-bar-sep); }
.si-brand { font: 600 22px/1 var(--si-serif); letter-spacing: -.01em; }

/* The card. */
.si-main { display: flex; flex-direction: column; align-items: center; padding: 56px 16px 40px; }
.si-card { width: 440px; max-width: 100%; padding: 26px 28px 22px; border: 1px solid var(--si-rule); border-radius: 10px; background: var(--si-sheet); }
.si-card h1 { font: 600 24px/32px var(--si-serif); }
.si-lead { margin-top: 6px !important; font-size: 13.5px; line-height: 20px; color: var(--si-ink-2); overflow-wrap: anywhere; }
.si-lead b { font-weight: 600; color: var(--si-ink); }
.si-tag { max-width: 440px; margin: 34px auto 0 !important; text-align: center; font-size: 12px; line-height: 17px; letter-spacing: .02em; color: var(--si-faint); }

/* Fields. */
.si-form { margin: 0; }
.si-field { display: block; margin-top: 16px; }
.si-field > span { display: block; margin-bottom: 4px; font-size: 12.5px; color: var(--si-muted); }
.si-input { display: block; width: 100%; height: 40px; padding: 0 10px; border: 1px solid var(--si-rule-strong); border-radius: var(--si-radius); background: var(--si-sheet);
  font: 400 14.5px/1 var(--si-sans); color: var(--si-ink); outline: none; appearance: none; }
.si-input:focus { border-color: var(--si-primary); box-shadow: inset 0 0 0 1px var(--si-primary); }
.si-input.is-wrong { border-color: var(--si-flag); box-shadow: inset 0 0 0 1px var(--si-flag); }
.si-error { margin-top: 8px !important; font-size: 13px; line-height: 19px; font-weight: 500; color: var(--si-flag); }

/* The code: one field (for assistive technology and the phone's own code suggestion), drawn as eight boxes in two fours
   once the page's script runs; without it, the plain field. */
.si-code { position: relative; }
.si-boxes { display: none; }
.si-code.is-boxed .si-boxes { display: flex; gap: 8px; }
.si-code.is-boxed .si-input { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; box-shadow: none; background: transparent;
  color: transparent; caret-color: transparent; font-size: 16px; opacity: 0; cursor: text; }
.si-box { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 48px; border: 1px solid var(--si-rule-strong); border-radius: var(--si-radius);
  background: var(--si-sheet); font: 600 20px/1 var(--si-sans); font-variant-numeric: tabular-nums; }
.si-gap { width: 6px; flex: none; }
.si-box.is-at { border-color: var(--si-primary); box-shadow: inset 0 0 0 1px var(--si-primary); }
.si-code.is-wrong .si-box { border-color: var(--si-flag); box-shadow: inset 0 0 0 1px var(--si-flag); }
.si-code.is-off .si-box { background: var(--si-subtle); }

/* Buttons and links. */
.si-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; border: 1px solid var(--si-rule-strong); border-radius: var(--si-radius);
  background: var(--si-sheet); font: 500 13.5px/1 var(--si-sans); color: var(--si-ink); text-decoration: none; white-space: nowrap; cursor: pointer; }
.si-btn:hover { background: var(--si-subtle); }
.si-btn.is-primary { border-color: var(--si-primary); background: var(--si-primary); color: #fff; font-weight: 600; }
.si-btn.is-primary:hover { border-color: var(--si-primary-hover); background: var(--si-primary-hover); }
.si-btn.is-wide { width: 100%; height: 40px; margin-top: 12px; font-size: 14px; }
.si-btn:disabled, .si-btn[aria-disabled="true"] { border-color: var(--si-rule-strong); background: var(--si-rule-strong); color: #fff; cursor: default; }
.si-btn:not(.is-primary):disabled { border-color: var(--si-rule); background: transparent; color: var(--si-muted); }
.si-link { display: inline; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--si-primary); text-decoration: none; cursor: pointer; }
.si-link:hover { text-decoration: underline; }
.si-link.is-quiet { font-weight: 500; color: var(--si-ink-2); }
.si-link.is-strong { font-size: 13.5px; }
.si-btn:focus-visible, .si-link:focus-visible, .si-where:focus-visible { outline: 2px solid var(--si-primary); outline-offset: 2px; }
.si-hint { margin-top: 14px !important; font-size: 12.5px; line-height: 19px; color: var(--si-muted); }
.si-hint.is-tight { margin-top: 4px !important; }
.si-actions { display: flex; align-items: center; gap: 10px; margin-top: 20px; }
.si-space { flex: 1; }

/* "Where to?": a row each. */
.si-where { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; margin-top: 10px; padding: 12px 14px; border: 1px solid var(--si-rule-strong);
  border-radius: var(--si-radius); background: var(--si-sheet); font: 400 13.5px/19px var(--si-sans); color: var(--si-ink); text-align: left; cursor: pointer; }
.si-where:hover { background: var(--si-subtle); }
.si-where b { display: block; font-weight: 600; }
.si-where small { display: block; font-size: 12.5px; color: var(--si-muted); }
.si-where .si-arrow { color: var(--si-muted); }

/* The phone. */
@media (max-width: 600px) {
  .si-bar { padding: 0 12px; }
  .si-main { padding: 20px 14px 28px; }
  .si-card { width: 100%; padding: 20px 18px 18px; }
  .si-card h1 { font-size: 21px; line-height: 28px; }
  .si-input { height: 44px; font-size: 16px; }
  .si-btn, .si-btn.is-wide { height: 44px; }
  .si-actions .si-btn { flex: 1; }
  .si-actions .si-space { display: none; }
  .si-actions { flex-wrap: wrap; }
  .si-actions > .si-link { flex-basis: 100%; }
  .si-code.is-boxed .si-boxes { gap: 5px; }
  .si-box { width: 34px; height: 46px; font-size: 19px; }
  .si-gap { width: 2px; }
  .si-hint .si-link { display: inline-block; min-height: 24px; }
}