/* ============================================================
   Sam — public web app design system.

   Palette deliberately built from this project's actual character:
   hand-assembled home-lab hardware (repurposed office minis, a GPU
   rig), not a generic SaaS dashboard. Deep near-black navy, warm
   amber/copper accent — evoking indicator LEDs and hardware glow
   rather than corporate tech-blue. Monospace touches on system-ish
   text (labels, meta, status) reflect the terminal/systemd heritage
   this whole project actually lives in; a warm, humane sans carries
   everything a real person reads.
   ============================================================ */

:root {
  /* ---- Color ---- */
  --bg: #0a0d13;
  --surface: #12161f;
  --surface-raised: #1a2029;
  --border: #232a36;
  --text: #e8e6e1;
  --text-dim: #9199a8;
  --text-faint: #5b6270;

  --amber: #e0993e;
  --amber-bright: #f2ab52;
  --amber-dim: #8a6530;

  --danger: #d9704f;
  --success: #6fae7f;

  /* ---- Type ---- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  --radius: 3px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
}

body {
  background-image:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(224, 153, 62, 0.08), transparent),
    radial-gradient(ellipse 700px 400px at 100% 100%, rgba(224, 153, 62, 0.04), transparent);
  background-attachment: fixed;
}

/* ---- Layout shell ---- */
.shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* ---- The signature element: a status rail.
   Every screen in this app carries a thin, live-feeling strip of
   ticks along one edge — a quiet nod to the actual cluster this app
   is a window into (five nodes, always being watched), rendered as
   pure texture, not literal data on the login screen itself. ---- */
.status-rail {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--amber-dim) 0%, var(--amber) 20%, var(--amber-dim) 20.5%,
    var(--amber-dim) 40%, var(--amber-bright) 55%, var(--amber-dim) 55.5%,
    var(--amber-dim) 72%, var(--amber) 85%, var(--amber-dim) 85.5%,
    var(--amber-dim) 100%);
  opacity: 0.6;
}

/* ---- Card ---- */
.card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 36px;
}

/* ---- Brand mark ---- */
.brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 4px;
}

.brand-mark {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--amber);
  border: 1px solid var(--amber-dim);
  padding: 2px 6px;
  border-radius: var(--radius);
}

.brand-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
}

.tagline {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-faint);
  margin: 0 0 32px;
  letter-spacing: 0.02em;
}

/* ---- Headings ---- */
h1 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--text);
}

.subhead {
  font-size: 14px;
  color: var(--text-dim);
  margin: 0 0 28px;
  line-height: 1.5;
}

/* ---- Fields ---- */
.field { margin-bottom: 18px; }

.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 7px;
}

.field input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  padding: 11px 13px;
  transition: border-color 0.15s ease;
}

.field input:focus {
  outline: none;
  border-color: var(--amber-dim);
}

.field input:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 1px;
}

.field-hint {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 6px;
  line-height: 1.4;
}

/* ---- Buttons ---- */
button {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  border-radius: var(--radius);
  border: none;
  padding: 12px 20px;
  cursor: pointer;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

button:focus-visible {
  outline: 2px solid var(--amber-bright);
  outline-offset: 2px;
}

.btn-primary {
  width: 100%;
  background: var(--amber);
  color: #1a1206;
}

.btn-primary:hover { background: var(--amber-bright); }
.btn-primary:disabled { opacity: 0.5; cursor: default; }

/* ---- Messages ---- */
.error-message {
  background: rgba(217, 112, 79, 0.1);
  border: 1px solid rgba(217, 112, 79, 0.3);
  color: var(--danger);
  font-size: 13px;
  padding: 10px 13px;
  border-radius: var(--radius);
  margin-bottom: 18px;
  line-height: 1.4;
  display: none;
}

.error-message.visible { display: block; }

/* ---- Footer meta ---- */
.meta-footer {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  text-align: center;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---- Mobile ---- */
@media (max-width: 480px) {
  .card { padding: 32px 24px; }
  h1 { font-size: 22px; }
}