/* portex — one stylesheet for every page.
 *
 * The pages used to carry their own <style> blocks, which is how the dashboard
 * ended up inheriting a landing rule that centred its body and squeezed a page
 * of tables into one column. Tokens and components live here now; a page adds
 * only what is genuinely its own.
 *
 * Oswald for display type because that is the brand, a system stack for body
 * text because a condensed display face is hard work at 15px.
 */

:root {
  --bg: #0e1013;
  --bg-2: #0b0d10;
  --card: #191c20;
  --card-2: #212529;
  --line: #2b3036;
  --line-soft: #23272c;

  --ink: #e8eaed;
  --ink-dim: #9aa2ab;
  --ink-faint: #6b737c;

  --accent: #4caf7d;
  --accent-soft: #6ec696;
  --accent-ink: #07130d;

  --danger: #e5534b;
  --warn-bg: #2e2413;
  --warn-line: #b8862b;
  --warn-ink: #e8c07a;
  --ok-bg: #12291e;
  --ok-line: #2f7d55;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: Oswald, var(--sans);

  --radius: 12px;
  --radius-sm: 8px;
  --shell: 940px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-soft); }

h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: 0.01em; margin: 0; }

code, kbd, pre { font-family: var(--mono); }
code {
  font-size: 0.88em; background: var(--card-2); color: var(--ink);
  padding: 0.12em 0.4em; border-radius: 5px;
}

/* ---- shell -------------------------------------------------------------- */

.shell { max-width: var(--shell); margin: 0 auto; padding: 0 1.5rem; }

.topbar { border-bottom: 1px solid var(--line); background: var(--bg-2); }
.topbar .shell { display: flex; align-items: center; gap: 1rem; padding-top: 1rem; padding-bottom: 1rem; }
.topbar.sticky { position: sticky; top: 0; z-index: 10; }

.brand {
  font-family: var(--display); font-weight: 600; font-size: 1.5rem;
  color: var(--ink); text-decoration: none; letter-spacing: 0.01em;
}
.brand span { color: var(--accent); }
.brand:hover { color: var(--ink); }

.spacer { margin-left: auto; }

.topnav { display: flex; align-items: center; gap: 1.1rem; font-size: 0.95rem; }
.topnav a { color: var(--ink-dim); text-decoration: none; }
.topnav a:hover { color: var(--ink); }

/* ---- type --------------------------------------------------------------- */

.display { font-family: var(--display); font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; }
.muted { color: var(--ink-dim); }
.faint { color: var(--ink-faint); }
.small { font-size: 0.88rem; }

/* ---- surfaces ----------------------------------------------------------- */

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.5rem;
}
.card.tight { padding: 1.1rem 1.25rem; }

.note {
  padding: 1rem 1.15rem; border-radius: var(--radius-sm);
  background: var(--warn-bg); border-left: 3px solid var(--warn-line);
  font-size: 0.94rem; line-height: 1.65;
}
.note strong { color: var(--warn-ink); }

.alert {
  padding: 0.85rem 1.1rem; border-radius: var(--radius-sm); margin-bottom: 1.25rem;
  background: var(--warn-bg); border-left: 3px solid var(--warn-line); font-size: 0.95rem;
}
.alert.success { background: var(--ok-bg); border-left-color: var(--ok-line); }
.alert.error { background: #2c1614; border-left-color: var(--danger); }

/* ---- controls ----------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.75rem 1.3rem; border: none; border-radius: var(--radius-sm);
  background: var(--accent); color: var(--accent-ink);
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: filter 0.15s, background 0.15s;
}
.btn:hover { filter: brightness(1.08); color: var(--accent-ink); }
.btn.block { width: 100%; }
.btn.lg { padding: 0.9rem 1.5rem; font-size: 1.05rem; }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.75rem 1.3rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: transparent; color: var(--ink);
  font: inherit; cursor: pointer; text-decoration: none;
  transition: border-color 0.15s, background 0.15s;
}
.btn-ghost:hover { background: var(--card-2); border-color: #3a4048; color: var(--ink); }
.btn-ghost.block { width: 100%; }
.btn-ghost.sm { padding: 0.35rem 0.8rem; font-size: 0.85rem; color: var(--ink-dim); }
.btn-ghost.sm:hover { border-color: var(--danger); color: var(--danger); background: transparent; }

.btn-link {
  background: none; border: none; padding: 0; cursor: pointer; font: inherit;
  color: var(--ink-dim); text-decoration: underline; text-underline-offset: 3px;
}
.btn-link:hover { color: var(--ink); }

.field {
  width: 100%; padding: 0.75rem 0.9rem; font: inherit; font-size: 1rem;
  background: var(--card-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.field::placeholder { color: var(--ink-faint); }
.field:focus { outline: none; border-color: var(--accent); }

.row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.row .field { flex: 1; min-width: 200px; }

.badge {
  font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.2rem 0.55rem; border: 1px solid var(--line);
  border-radius: 999px; color: var(--ink-dim); white-space: nowrap;
}

/* ---- terminal ----------------------------------------------------------- */

.term {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.term-bar {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.7rem 1rem; border-bottom: 1px solid var(--line-soft);
}
.term-bar i { width: 11px; height: 11px; border-radius: 50%; background: #333940; }
.term-body { padding: 1.1rem 1.25rem; font-family: var(--mono); font-size: 0.92rem; line-height: 2; }
.term-line { display: flex; align-items: center; gap: 0.6rem; }
.term-line .p { color: var(--accent); user-select: none; }
.term-line .c { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; }
.term-out { color: var(--ink-dim); padding-left: 1.4rem; }
.term-out .ok { color: var(--accent); }

.copy {
  background: none; border: 1px solid var(--line); color: var(--ink-faint);
  font: inherit; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.2rem 0.55rem; border-radius: 5px; cursor: pointer; flex: 0 0 auto;
}
.copy:hover { color: var(--ink); border-color: #3a4048; }
.copy.done { color: var(--accent); border-color: var(--accent); }

/* ---- tables ------------------------------------------------------------- */

.table-wrap { border: 1px solid var(--line); border-radius: var(--radius);
  overflow-x: auto; background: var(--card); }
table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
th {
  text-align: left; font-weight: 500; font-size: 0.7rem; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink-faint);
  padding: 0.8rem 1.1rem; border-bottom: 1px solid var(--line); white-space: nowrap;
}
td { padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
td.mono { font-family: var(--mono); font-size: 0.88rem; }
td.dim { color: var(--ink-dim); white-space: nowrap; }
td.act { text-align: right; width: 1%; }
.empty { padding: 1.75rem 1.1rem; text-align: center; color: var(--ink-dim); font-size: 0.94rem; }

/* ---- auth pages --------------------------------------------------------- */

.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1.25rem; }
.auth {
  width: 100%; max-width: 460px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 2.5rem;
}
.auth h1 { font-size: 1.85rem; margin-bottom: 0.4rem; }
.auth .sub { color: var(--ink-dim); margin: 0 0 2rem; font-size: 1rem; }
.auth .foot { margin-top: 2rem; font-size: 0.85rem; color: var(--ink-faint); line-height: 1.7; }

.provider {
  display: flex; align-items: center; gap: 0.85rem; width: 100%;
  padding: 1rem 1.15rem; margin-bottom: 0.85rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card-2); color: var(--ink);
  font: inherit; font-size: 1.05rem; text-decoration: none; cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.08s;
}
.provider:hover { background: #262b31; border-color: #3a4048; color: var(--ink); }
.provider:active { transform: translateY(1px); }
.provider svg { width: 22px; height: 22px; flex: 0 0 22px; }

/* ---- footer ------------------------------------------------------------- */

.site-foot {
  border-top: 1px solid var(--line); margin-top: 5rem;
  padding: 2rem 0 3rem; font-size: 0.88rem; color: var(--ink-faint);
}
.site-foot .shell { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: center; }
.site-foot a { color: var(--ink-dim); text-decoration: none; }
.site-foot a:hover { color: var(--ink); }

@media (max-width: 640px) {
  body { font-size: 15px; }
  .shell { padding: 0 1.1rem; }
  .auth { padding: 1.75rem 1.4rem; border-radius: 12px; }
  .auth h1 { font-size: 1.55rem; }
  .topbar .shell { flex-wrap: wrap; gap: 0.7rem; }
}