/* 2026-11-12 22:40 theme.css v1.01 (Core; v1.01: light mode, text weight): y6y's terminalism look (y6y-platform public/css/theme.css v2.11):
   dark grey page, slightly lighter panels, thin grey outlines, rounded corners, no shadows, pale text with a
   soft white glow, monochrome controls, lowercase interface labels, JetBrains Mono. Used by the sign-in pages
   (served by the sign-in module at /auth/theme/) and by Core's own page. */

@font-face {
  font-family: "JetBrains Mono";
  src: url("jetbrains_mono_variable.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ui-bg: #1C1E22;
  --ui-surface: #23252A;
  --ui-tint: #1C1E22;
  --ui-raise: #2D3036;
  --ui-ink: #ECEEF1;
  --ui-muted: #8B9099;
  --ui-line-color: #3A3D44;
  --ui-primary-line: #D8DCE1;
  --ui-danger-ink: #FF7A85;
  --ui-danger-line: rgba(255, 122, 133, 0.55);
  --ui-done: #DCE2E8;
  --ui-active: #FFC56B;
  --ui-failed: #FF6B7A;
  --ui-focus: #FFFFFF;
  --ui-scrim: rgba(0, 0, 0, 0.6);
  --ui-selection: rgba(255, 255, 255, 0.22);
  --ui-line: 1px solid var(--ui-line-color);
  --ui-line-dashed: 1px dashed #6B7079;
  --ui-press: translateY(1px);
  --ui-r-panel: 20px;
  --ui-r-control: 12px;
  --ui-r-tag: 6px;
  --ui-glow: 0 0 8px rgba(255, 255, 255, 0.35);
  --ui-font: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --ui-fs-title: 20px;
  --ui-fs-body: 14px;
  --ui-fs-label: 13px;
  --ui-fs-meta: 11px;
  --ui-control: 40px;
  --ui-control-sm: 34px;
  --ui-strong-ink: #FFFFFF;
  --ui-wt: 400;
}

/* Light mode (Display menu): black on white, otherwise the same. */
:root[data-light] {
  color-scheme: light;
  --ui-bg: #FFFFFF;
  --ui-surface: #F3F4F6;
  --ui-tint: #FFFFFF;
  --ui-raise: #E5E7EB;
  --ui-ink: #111111;
  --ui-muted: #5B6069;
  --ui-line-color: #C7CAD0;
  --ui-primary-line: #111111;
  --ui-danger-ink: #B3261E;
  --ui-danger-line: rgba(179, 38, 30, 0.55);
  --ui-done: #2B2F36;
  --ui-active: #9A5B00;
  --ui-failed: #C62828;
  --ui-focus: #111111;
  --ui-scrim: rgba(0, 0, 0, 0.35);
  --ui-selection: rgba(0, 0, 0, 0.15);
  --ui-line-dashed: 1px dashed #8A8F98;
  --ui-glow: none;
  --ui-strong-ink: #000000;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ui-bg); color: var(--ui-ink); font-family: var(--ui-font); font-size: var(--ui-fs-body);
  line-height: 1.45; font-weight: var(--ui-wt); text-shadow: var(--ui-glow); -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font-family: inherit; color: inherit; font-size: inherit; text-shadow: inherit; }
a { color: var(--ui-ink); }
:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
::selection { background: var(--ui-selection); }

button {
  border: var(--ui-line); min-height: var(--ui-control); padding: 8px 16px; border-radius: var(--ui-r-control);
  background: var(--ui-surface); color: var(--ui-ink); font-size: var(--ui-fs-label); font-weight: 700;
  text-transform: lowercase; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  white-space: nowrap; transition: transform 80ms ease, border-color 80ms ease;
}
button:hover { background: var(--ui-raise); }
button:active { transform: var(--ui-press); }
button:disabled { opacity: 0.45; cursor: default; transform: none; }
button.primary { background: transparent; color: var(--ui-strong-ink); border-color: var(--ui-primary-line); }
button.danger { background: transparent; color: var(--ui-danger-ink); border-color: var(--ui-danger-line); }
button.quiet { border-color: transparent; background: transparent; }
button.quiet:hover { background: var(--ui-raise); }

input, textarea {
  width: 100%; min-height: var(--ui-control); padding: 8px 12px; border: var(--ui-line); border-radius: var(--ui-r-control);
  outline: none; background: var(--ui-tint); color: var(--ui-ink);
}
input::placeholder, textarea::placeholder { color: var(--ui-muted); text-shadow: none; }
input:focus-visible, textarea:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 0; background: var(--ui-surface); }

/* ---------- sign-in and PIN pages (markup from the sign-in module's page.js) ---------- */
body[data-mode] { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
body[data-mode] .card {
  width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 16px; padding: 24px;
  background: var(--ui-surface); border: var(--ui-line); border-radius: var(--ui-r-panel);
}
body[data-mode] h1 { margin: 0 0 4px; align-self: center; font-size: 30px; font-weight: 800; letter-spacing: -0.03em; text-transform: lowercase; }
body[data-mode] .step { display: flex; flex-direction: column; gap: 14px; }
body[data-mode] .step[hidden] { display: none; }
body[data-mode] .step p { margin: 0; }
body[data-mode] label { display: flex; flex-direction: column; gap: 6px; font-size: var(--ui-fs-label); font-weight: 700; text-transform: lowercase; }
body[data-mode] input[name="pin"], body[data-mode] input[name="pin2"] { font-size: 26px; letter-spacing: 0.6em; text-align: center; font-variant-numeric: tabular-nums; }
body[data-mode] button { width: 100%; background: transparent; color: var(--ui-strong-ink); border-color: var(--ui-primary-line); }
body[data-mode] img { align-self: center; padding: 12px; background: #FFFFFF; border-radius: var(--ui-r-control); image-rendering: pixelated; width: 244px; height: 244px; }
body[data-mode] .small { font-size: var(--ui-fs-label); color: var(--ui-muted); word-break: break-all; }
body[data-mode] code, body[data-mode] pre { color: var(--ui-ink); }
body[data-mode] pre { margin: 0; padding: 14px; background: var(--ui-tint); border: var(--ui-line); border-radius: var(--ui-r-control); font-weight: 700; font-variant-numeric: tabular-nums; }
body[data-mode] #msg { margin: 0; min-height: 1.4em; color: var(--ui-danger-ink); font-size: var(--ui-fs-label); font-weight: 700; }

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