/*
 * Страница входа (login.html). app.css без входа не отдаётся (server.js), поэтому здесь своя копия того, что нужно
 * форме: токены трёх тем — значения как в app.css (сверяет test/http.test.js), база, кнопки, выноска, поля.
 */

/* ── Светлая ──────────────────────────────────────────────────── */
:root,
[data-theme="light"] {
  --th-on-20: rgba(0, 0, 0, 0.2);

  --th-text-title: rgba(0, 0, 0, 0.92);
  --th-text-muted: rgba(0, 0, 0, 0.52);

  --th-bg-page: #f9f9f9;
  --th-bd-default: #e8e8e8;
  --th-input-bd: #e0e0e0;

  --th-btn-bg: rgba(0, 0, 0, 0.92);
  --th-btn-text: #ffffff;

  --st-danger-fg: #dc2626;   --st-danger-bg: rgba(239, 68, 68, 0.1);    --st-danger-bd: rgba(239, 68, 68, 0.2);
  --st-warning-fg: #d97706;  --st-warning-bg: rgba(245, 158, 11, 0.1);  --st-warning-bd: rgba(245, 158, 11, 0.2);
}

/* ── Тёмная (чёрная) ──────────────────────────────────────────── */
[data-theme="dark"] {
  --th-on-20: rgba(255, 255, 255, 0.2);

  --th-text-title: rgba(255, 255, 255, 0.95);
  --th-text-muted: rgba(255, 255, 255, 0.5);

  --th-bg-page: #000000;
  --th-bd-default: rgba(255, 255, 255, 0.08);
  --th-input-bd: rgba(255, 255, 255, 0.08);

  --th-btn-bg: #ffffff;
  --th-btn-text: #000000;

  --st-danger-fg: #f04848;   --st-danger-bg: rgba(239, 68, 68, 0.1);    --st-danger-bd: rgba(239, 68, 68, 0.2);
  --st-warning-fg: #fbbf24;  --st-warning-bg: rgba(245, 158, 11, 0.1);  --st-warning-bd: rgba(245, 158, 11, 0.2);
}

/* ── Приглушённая (dim) ───────────────────────────────────────── */
[data-theme="dim"] {
  --th-on-20: rgba(255, 255, 255, 0.2);

  --th-text-title: rgba(255, 255, 255, 0.95);
  --th-text-muted: rgba(255, 255, 255, 0.58);

  --th-bg-page: #141414;
  --th-bd-default: rgba(255, 255, 255, 0.08);
  --th-input-bd: rgba(255, 255, 255, 0.1);

  --th-btn-bg: #ffffff;
  --th-btn-text: #000000;

  --st-danger-fg: hsl(4 82% 67%);     --st-danger-bg: hsl(4 72% 54% / 0.2);     --st-danger-bd: hsl(4 68% 58% / 0.34);
  --st-warning-fg: hsl(40 78% 63%);   --st-warning-bg: hsl(40 72% 50% / 0.16);  --st-warning-bd: hsl(40 68% 54% / 0.3);
}

/* ── Смысловые имена ──────────────────────────────────────────── */
:root {
  --background: var(--th-bg-page);
  --foreground: var(--th-text-title);
  --primary: var(--th-btn-bg);
  --primary-foreground: var(--th-btn-text);
  --muted-foreground: var(--th-text-muted);
  --border: var(--th-bd-default);
  --input: var(--th-input-bd);
  --ring: var(--th-on-20);

  --danger: var(--st-danger-fg);    --danger-bg: var(--st-danger-bg);    --danger-border: var(--st-danger-bd);
  --warning: var(--st-warning-fg);  --warning-bg: var(--st-warning-bg);  --warning-border: var(--st-warning-bd);

  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── База ─────────────────────────────────────────────────────── */
*, ::before, ::after { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  font-family: var(--font-sans);
  color-scheme: light;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html[data-theme="dark"], html[data-theme="dim"] { color-scheme: dark; }
body { min-height: 100dvh; background-color: var(--background); color: var(--foreground); font-size: 0.875rem; line-height: calc(1.25 / 0.875); }
h1 { font-size: inherit; font-weight: inherit; }
a { color: inherit; text-decoration: inherit; }
svg { display: block; vertical-align: middle; }
button, input { font: inherit; letter-spacing: inherit; color: inherit; background-color: transparent; border-radius: 0; }
button { cursor: pointer; }
:disabled { cursor: default; }
::placeholder { opacity: 1; color: color-mix(in oklab, var(--muted-foreground) 60%, transparent); }
/* hidden сильнее display у классов: .field, .alert и другие задают display */
[hidden]:where(:not([hidden="until-found"])) { display: none !important; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 1s linear infinite; }

/* ── Иконки: PNG-маска цвета currentColor (login.js, icon) ────── */
.ico, [data-icon] { display: inline-flex; width: 1rem; height: 1rem; flex: none; }
.ico svg { width: 100%; height: 100%; }

/* ── Кнопки ───────────────────────────────────────────────────── */
.btn { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 0.5rem; white-space: nowrap; font-weight: 500;
  transition: all 0.15s var(--ease); height: 2.5rem; border-radius: 0.75rem; padding: 0 1rem; font-size: 0.875rem; line-height: calc(1.25 / 0.875);
  background: var(--primary); color: var(--primary-foreground); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring); }
.btn:disabled { pointer-events: none; opacity: 0.5; }
.btn-primary:hover { background: color-mix(in oklab, var(--primary) 85%, transparent); }
/* кнопка-иконка темы в углу */
.icon-btn { display: flex; width: 2rem; height: 2rem; flex-shrink: 0; align-items: center; justify-content: center; border-radius: 0.75rem;
  color: var(--muted-foreground); transition: color 0.15s var(--ease), background-color 0.15s var(--ease); }
.icon-btn:hover { background: color-mix(in oklab, var(--foreground) 6%, transparent); color: var(--foreground); }

/* ── Выноски: строка цвета статуса ────────────────────────────── */
.alert { display: flex; align-items: flex-start; gap: 0.625rem; border-radius: 0.75rem; border: 1px solid var(--border); padding: 0.75rem 0.875rem;
  font-size: 0.875rem; background: color-mix(in oklab, var(--primary) 4%, transparent); color: color-mix(in oklab, var(--foreground) 80%, transparent); }
.alert > .ico { margin-top: 0.125rem; }
.alert-body { min-width: 0; flex: 1; overflow-wrap: break-word; }
.alert-error { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
.alert-warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning); }

/* ── Поля: с рамкой, иначе поле сливается с фоном ─────────────── */
.field { min-width: 0; display: grid; gap: 0.375rem; align-content: start; }
.field > label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--foreground); }
input.outline { width: 100%; min-width: 0; height: 2.5rem; border-radius: 0.75rem; background: var(--background); padding: 0 0.875rem; font-size: 0.875rem;
  color: var(--foreground); outline: none; transition: all 0.15s var(--ease); box-shadow: inset 0 0 0 1px var(--input); }
input.outline:focus-visible { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--foreground) 25%, transparent), 0 0 0 2px var(--ring); }
input.outline:disabled { cursor: not-allowed; opacity: 0.5; }

/* ── Страница: тема в углу, форма по центру ───────────────────── */
.auth-page { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 3rem 1rem; }
.auth-top { position: fixed; inset-inline: 0; top: 0; display: flex; align-items: center; justify-content: flex-end; padding: 1rem 1.25rem; }
.auth { width: 100%; max-width: 400px; }
.auth-title { margin-bottom: 1.5rem; font-size: 1.25rem; line-height: 1.75rem; font-weight: 600; letter-spacing: -0.025em; color: var(--foreground); }
.auth-form { display: grid; gap: 0.75rem; }
.auth-submit { margin-top: 0.25rem; width: 100%; }
/* вход не настроен: выноска вместо формы, под ней — «Открыть панель», если панель открыта без пароля */
.auth > .alert + .auth-submit { margin-top: 0.75rem; }
/* пароль с кнопкой «показать» */
.pw { position: relative; }
.pw > input { padding-inline-end: 2.5rem; }
.pw-eye { position: absolute; inset-inline-end: 0.75rem; top: 50%; display: flex; transform: translateY(-50%); color: var(--muted-foreground);
  transition: color 0.15s var(--ease); }
.pw-eye:hover { color: var(--foreground); }
/* поле с ошибкой — красная рамка, при фокусе вместе с кольцом */
input.outline[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--danger); }
input.outline[aria-invalid="true"]:focus-visible { box-shadow: inset 0 0 0 1px var(--danger), 0 0 0 2px var(--danger-border); }

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}