/* The sign-in page and the first-run page. Light whatever the browser prefers, dark when the user chose it (spec/LOOK.md); colours only
   through the tokens of :root, phone width first: one column of at most 400 px with a 16 px gutter. Served as
   /s/login.<hash>.css (CSP style-src 'self'). The values are those of the application (src/css/00-base.css: --bg,
   --surface, --text, --muted, --field-line, --field-shadow, --accent, --accent-hover, --on-accent, --crit, the card and its font),
   so that the two pages are one product; change them together. */
/* the same four files and rules as src/css/00-base.css */
@font-face{font-family:"Open Sans";font-style:normal;font-weight:300 800;font-stretch:100%;font-display:swap;src:url("/s/opensans-cyrillic-ext.95dd03b930ac.woff2") format("woff2");unicode-range:U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:300 800;font-stretch:100%;font-display:swap;src:url("/s/opensans-cyrillic.2809606237a6.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:300 800;font-stretch:100%;font-display:swap;src:url("/s/opensans-latin-ext.d5bab8e28732.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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Open Sans";font-style:normal;font-weight:300 800;font-stretch:100%;font-display:swap;src:url("/s/opensans-latin.d8e4fe0452aa.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 {
  color-scheme: light;
  --bg: #f5f5f5;
  --panel: #ffffff;
  --text: #242638;
  --muted: #6d6d6d;
  --line: #c2d8de;
  --field-shadow: inset 0 0 4px rgba(103,123,147,.3);
  --field: #ffffff;
  --accent: #2070d1;
  --accent-hover: #014da8;
  --accent-text: #ffffff;
  --error: #d70c17;
  --focus: #2070d1;
  --radius: 4px;
  --radius-card: 12px;
  --card-shadow: 0 12px 32px rgba(36,38,56,.04), inset 0 1px rgba(255,255,255,.96);
  --font: "Open Sans", Arial, sans-serif;
}
/* the dark theme the user chose (src/assets/theme.js): the same tokens, the values of the application's dark block —
   --line is its --field-line (3.3:1 on the card) and --field its --surface: an input has the card's ground there too */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #181a27;
  --panel: #242638;
  --text: #eef0f6;
  --muted: #a9aec6;
  --line: #6e7499;
  --field-shadow: inset 0 1px 3px rgba(0,0,0,.35);
  --field: #242638;
  --accent: #74abf2;
  --accent-hover: #a3c8f8;
  --accent-text: #10121c;
  --error: #ff8087;
  --focus: #74abf2;
  --card-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.45 var(--font);
  font-synthesis: none;
}
/* the portal's card: white, 12 px corners, the soft shadow, no border */
.login {
  width: 100%;
  max-width: 400px;
  padding: 32px;
  background: var(--panel);
  border-radius: var(--radius-card);
  box-shadow: var(--card-shadow);
}
/* the product's own mark and name, as in the header of the application */
.login-brand { display: flex; align-items: center; gap: 12px; margin: 0 0 24px; }
.login-logo {
  width: 40px;
  height: 40px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-text);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
}
.login-title { margin: 0; font-size: 24px; line-height: 1.3; font-weight: 700; }
.login-note, .login-lead { margin: 0 0 16px; color: var(--muted); font-size: 14px; }
.login-form { display: flex; flex-direction: column; gap: 16px; }
.login-field { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; }
.login-field input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  font: inherit;
  font-size: 16px;
  font-weight: 400;
  color: var(--text);
  background: var(--field);
  border: 1px solid var(--line);
  box-shadow: var(--field-shadow);
  border-radius: var(--radius);
}
.login-field input:focus { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--accent); }
.login-error { margin: 0; color: var(--error); font-size: 14px; }
.login-button {
  margin-top: 8px;
  height: 44px;
  padding: 0 16px;
  font: inherit;
  font-weight: 600;
  color: var(--accent-text);
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  cursor: pointer;
}
.login-button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.login-button:disabled { opacity: 0.6; cursor: progress; }
.login-button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* the theme switch under the card: a quiet text button «Темна тема» with a small track that shows its state — the knob
   to the right and the track in the accent while the dark theme is on (aria-pressed, written by theme.js). It takes its
   place at once and is shown when theme.js has given it its state (without script it would do nothing) */
.theme-link {
  visibility: hidden;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  font: inherit;
  font-size: 14px;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
}
.theme-link[aria-pressed] { visibility: visible; }
.theme-sw { position: relative; flex: none; width: 30px; height: 16px; border-radius: 8px; background: var(--muted); }
.theme-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); }
.theme-link[aria-pressed="true"] .theme-sw { background: var(--accent); }
.theme-link[aria-pressed="true"] .theme-sw::after { left: 16px; }
.theme-link:hover { color: var(--accent); text-decoration: underline; }
.theme-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 480px) {
  .login { padding: 24px 20px; }
}