/* Login, first-run setup and user administration.
   Deliberately standalone: these screens must render before the app shell has
   loaded anything, and must keep working if the main stylesheet is mid-change.
   Colours come from tokens.css where available, with fallbacks so a broken
   token file degrades to something readable rather than white-on-white. */
:root {
  --a-bg:     var(--bg, #0f1115);
  --a-panel:  var(--panel, #12151d);
  --a-raised: var(--bg3, #1d212c);
  --a-fg:     var(--fg, #d7dbe3);
  --a-muted:  var(--muted, #8b93a7);
  --a-accent: var(--accent2, #6aa0ff);
  --a-green:  var(--green, #5fc16e);
  --a-amber:  var(--amber, #e3b341);
  --a-red:    var(--red, #e5604d);
  --a-line:   rgba(255,255,255,.10);
}
:root[data-theme="light"] { --a-line: rgba(0,0,0,.12); }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--a-bg); color: var(--a-fg);
  font: var(--fs-md, 13px)/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.shell { min-height: 100%; display: grid; place-items: center; padding: var(--space-9, 20px); }
.loading { color: var(--a-muted); }

.card {
  width: 100%; max-width: 460px; background: var(--a-panel);
  border: 1px solid var(--a-line); border-radius: var(--radius-2xl, 12px);
  padding: var(--space-10, 24px); box-shadow: 0 10px 40px rgba(0,0,0,.28);
}
.card.wide { max-width: 860px; }

.brand { display: flex; align-items: center; gap: var(--space-4, 8px); margin-bottom: var(--space-8, 16px); }
.brand .mark {
  width: 26px; height: 26px; border-radius: var(--radius-sm, 4px);
  background: linear-gradient(135deg, var(--a-accent), var(--accent, #c98a5b));
  /* Warp threads: the product's own metaphor, drawn rather than shipped as an asset. */
  mask: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 6px);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 3px, transparent 3px 6px);
}
.brand h1 { font-size: var(--fs-xl, 18px); margin: 0; font-weight: 650; letter-spacing: -.01em; }
.brand .sub { color: var(--a-muted); font-size: var(--fs-sm, 11px); }

h2 { font-size: var(--fs-lg, 15px); margin: 0 0 var(--space-2, 4px); font-weight: 600; }
.lede { color: var(--a-muted); margin: 0 0 var(--space-8, 16px); font-size: var(--fs-base, 12px); }

label { display: block; margin: var(--space-6, 12px) 0 var(--space-2, 4px); font-size: var(--fs-sm, 11px); color: var(--a-muted); }
input[type=text], input[type=password], input[type=email] {
  width: 100%; padding: var(--space-5, 10px) var(--space-6, 12px);
  background: var(--a-bg); color: var(--a-fg);
  border: 1px solid var(--a-line); border-radius: var(--radius-md, 6px);
  font: inherit; font-size: var(--fs-md, 13px);
}
input:focus { outline: 2px solid var(--a-accent); outline-offset: -1px; border-color: transparent; }
.hint { color: var(--a-muted); font-size: var(--fs-xs, 10px); margin-top: var(--space-2, 4px); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3, 6px);
  padding: var(--space-5, 10px) var(--space-8, 16px); border-radius: var(--radius-md, 6px);
  border: 1px solid var(--a-line); background: var(--a-raised); color: var(--a-fg);
  font: inherit; font-size: var(--fs-md, 13px); cursor: pointer;
}
.btn:hover:not(:disabled) { border-color: var(--a-accent); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--a-accent); border-color: var(--a-accent); color: #05070c; font-weight: 600; }
.btn.danger:hover:not(:disabled) { border-color: var(--a-red); color: var(--a-red); }
.btn.sm { padding: var(--space-2, 4px) var(--space-5, 10px); font-size: var(--fs-sm, 11px); }
.row { display: flex; gap: var(--space-4, 8px); align-items: center; }
.row.end { justify-content: flex-end; margin-top: var(--space-8, 16px); }
.grow { flex: 1; }

.msg { padding: var(--space-5,10px) var(--space-6,12px); border-radius: var(--radius-md,6px);
       font-size: var(--fs-base,12px); margin-top: var(--space-6,12px); border: 1px solid transparent; }
.msg.err { background: var(--red-bg, rgba(229,96,77,.10)); border-color: var(--a-red); color: var(--a-red); }
.msg.ok  { background: var(--green-bg, rgba(95,193,110,.10)); border-color: var(--a-green); color: var(--a-green); }
.msg.info{ background: var(--a-raised); color: var(--a-muted); }

/* wizard */
.steps { display: flex; gap: var(--space-2,4px); margin-bottom: var(--space-9,20px); }
.steps .s { flex: 1; height: 3px; border-radius: 2px; background: var(--a-raised); }
.steps .s.done { background: var(--a-green); }
.steps .s.now  { background: var(--a-accent); }
.stepno { color: var(--a-muted); font-size: var(--fs-xs,10px); text-transform: uppercase;
          letter-spacing: .08em; margin-bottom: var(--space-2,4px); }

pre.cmd {
  background: var(--a-bg); border: 1px solid var(--a-line); border-radius: var(--radius-md,6px);
  padding: var(--space-6,12px); overflow-x: auto; margin: var(--space-4,8px) 0 0;
  font: var(--fs-sm,11px)/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--a-fg); user-select: all;
}

.list { border: 1px solid var(--a-line); border-radius: var(--radius-md,6px); overflow: hidden; margin-top: var(--space-6,12px); }
.item { display: flex; align-items: center; gap: var(--space-5,10px);
        padding: var(--space-5,10px) var(--space-6,12px); border-bottom: 1px solid var(--a-line); }
.item:last-child { border-bottom: 0; }
.item .name { font-weight: 550; }
.item .meta { color: var(--a-muted); font-size: var(--fs-sm,11px); }
.pill { font-size: var(--fs-xs,10px); padding: 1px var(--space-4,8px); border-radius: 999px;
        border: 1px solid var(--a-line); color: var(--a-muted); }
.pill.admin { color: var(--a-accent); border-color: var(--a-accent); }
.pill.off   { color: var(--a-red); border-color: var(--a-red); }
.pill.on    { color: var(--a-green); border-color: var(--a-green); }
.empty { color: var(--a-muted); padding: var(--space-9,20px); text-align: center; font-size: var(--fs-base,12px); }