/* Runway-style — kraft paper ledger under amber desk lamp.
   cream canvas / pure paper cards / linen borders / espresso ink / one amber signal */

:root {
  --color-cream-canvas: #f8f7f5;
  --color-pure-paper: #ffffff;
  --color-linen-border: #e3dfd5;
  --color-stone-mist: #d5d2cd;
  --color-warm-ash: #aca89f;
  --color-driftwood: #8f897e;
  --color-bark: #61594a;
  --color-espresso: #261b07;
  --color-amber-signal: #f9a600;
  --color-burnished-gold: #e89b01;
  --color-terracotta: #f0624f;
  --color-wisteria: #d5befa;
  --color-honey-wash: #f8da9d;

  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --shadow-sm: 0 4px 8px 0 rgba(38, 27, 7, 0.06);
  --shadow-btn: inset 0 2px 4px 0 rgba(255, 255, 255, 0.56),
                0 4px 8px 0 rgba(38, 27, 7, 0.06),
                0 1px 2px 0 rgba(38, 27, 7, 0.36);
  --radius: 8px;
  --radius-badge: 4px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--color-cream-canvas);
  color: var(--color-espresso);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -0.16px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-espresso); text-decoration: none; }
a:hover { text-decoration: underline; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ─── top bar ─────────────────────────────────────────── */

.topbar {
  background: var(--color-cream-canvas);
  border-bottom: 1px solid var(--color-linen-border);
  padding: 16px 0;
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  font-size: 20px;
  font-weight: 584;
  letter-spacing: -0.31px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand .dot { color: var(--color-amber-signal); }
.brand em {
  font-style: normal;
  font-size: 12px;
  font-weight: 492;
  letter-spacing: 0.6px;
  color: var(--color-driftwood);
  border: 1px solid var(--color-linen-border);
  border-radius: var(--radius-badge);
  padding: 2px 8px;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-chip {
  font-size: 14px;
  color: var(--color-bark);
  background: var(--color-pure-paper);
  border: 1px solid var(--color-linen-border);
  border-radius: var(--radius);
  padding: 6px 12px;
}

/* ─── shell: sidebar + content ────────────────────────── */

.shell {
  display: grid;
  grid-template-columns: 232px 1fr;
  gap: 32px;
  padding-top: 32px;
  padding-bottom: 96px;
  align-items: start;
}

.sidebar {
  position: sticky;
  top: 24px;
}

.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-section {
  font-size: 12px;
  font-weight: 492;
  letter-spacing: 0.6px;
  color: var(--color-driftwood);
  padding: 16px 12px 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius);
  font-size: 14px;
  color: var(--color-espresso);
  text-decoration: none;
}
.nav-item:hover { background: var(--color-pure-paper); text-decoration: none; }
.nav-item.active { background: var(--color-linen-border); }
.nav-item svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; flex: none; }

.content { min-width: 0; }

/* ─── typography ──────────────────────────────────────── */

.page-head { margin-bottom: 28px; }
.page-head h1 {
  margin: 0 0 4px;
  font-size: 36px;
  font-weight: 584;
  letter-spacing: -0.61px;
  line-height: 1.13;
}
.page-head p {
  margin: 0;
  font-size: 16px;
  color: var(--color-bark);
}

.section-title {
  font-size: 24px;
  font-weight: 584;
  letter-spacing: -0.31px;
  margin: 0 0 16px;
}

/* ─── cards ───────────────────────────────────────────── */

.card {
  background: var(--color-pure-paper);
  border: 1px solid var(--color-linen-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 32px;
  margin-bottom: 24px;
}

.card-title {
  font-size: 16px;
  font-weight: 492;
  margin: 0 0 16px;
}

.card-note {
  font-size: 14px;
  color: var(--color-driftwood);
  margin: 0;
}

/* ─── metric tiles ────────────────────────────────────── */

.tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.tile {
  background: var(--color-pure-paper);
  border: 1px solid var(--color-linen-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 24px;
}

.tile .label {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-driftwood);
  letter-spacing: 0.6px;
}

.tile .value {
  font-size: 24px;
  font-weight: 584;
  letter-spacing: -0.31px;
  margin-top: 6px;
}

.tile .delta {
  font-size: 12px;
  font-weight: 492;
  color: var(--color-bark);
  margin-top: 6px;
}

/* ─── buttons ─────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 492;
  letter-spacing: -0.16px;
  border-radius: var(--radius);
  padding: 8px 16px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.25;
}
.btn:hover { text-decoration: none; }

.btn-amber {
  background: var(--color-amber-signal);
  color: var(--color-espresso);
  box-shadow: var(--shadow-btn);
}
.btn-amber:hover { background: var(--color-burnished-gold); }

.btn-ghost {
  background: transparent;
  color: var(--color-espresso);
  border: 1px solid var(--color-espresso);
}
.btn-ghost:hover { background: var(--color-pure-paper); }

.btn-danger {
  background: transparent;
  color: var(--color-terracotta);
  border: 1px solid var(--color-terracotta);
}
.btn-danger:hover { background: var(--color-pure-paper); }

.btn-sm {
  font-size: 14px;
  padding: 5px 12px;
}

.inline-form { display: inline-flex; margin: 0; }

/* ─── forms ───────────────────────────────────────────── */

.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 12px;
  font-weight: 492;
  letter-spacing: 0.6px;
  color: var(--color-driftwood);
  margin-bottom: 6px;
}

.input, input[type="text"], input[type="password"], input[type="number"], select {
  width: 100%;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--color-espresso);
  background: var(--color-pure-paper);
  border: 1px solid var(--color-stone-mist);
  border-radius: var(--radius);
  padding: 8px 12px;
  outline: none;
}
.input:focus, input:focus, select:focus {
  border-color: var(--color-amber-signal);
  box-shadow: 0 0 0 3px rgba(249, 166, 0, 0.18);
}
.input::placeholder { color: var(--color-warm-ash); }

.form-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.form-row .input { flex: 1; }

.radio-row { display: flex; flex-direction: column; gap: 10px; }
.radio-row label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 16px;
  font-weight: 400;
  color: var(--color-espresso);
  border: 1px solid var(--color-linen-border);
  border-radius: var(--radius);
  padding: 12px 16px;
  cursor: pointer;
}
.radio-row label:hover { background: var(--color-cream-canvas); }
.radio-row input { margin-top: 4px; accent-color: var(--color-amber-signal); }
.radio-row .hint { display: block; font-size: 14px; color: var(--color-driftwood); margin-top: 2px; }

code, .mono { font-family: var(--font-mono); font-size: 13px; }

/* ─── tables ──────────────────────────────────────────── */

.table-wrap { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th {
  text-align: left;
  font-size: 12px;
  font-weight: 492;
  letter-spacing: 0.6px;
  color: var(--color-driftwood);
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-linen-border);
  white-space: nowrap;
}

td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-linen-border);
  vertical-align: middle;
}

tr:last-child td { border-bottom: none; }

td .sub { display: block; font-size: 12px; color: var(--color-driftwood); margin-top: 2px; }

/* ─── badges & status ─────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-badge);
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 492;
  white-space: nowrap;
}
.badge-honey { background: var(--color-honey-wash); color: var(--color-espresso); }
.badge-linen { background: var(--color-linen-border); color: var(--color-bark); }
.badge-wisteria { background: var(--color-wisteria); color: var(--color-espresso); }
.badge-err { background: transparent; color: var(--color-terracotta); border: 1px solid var(--color-terracotta); }

.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-warm-ash);
  flex: none;
}
.status-dot.on { background: var(--color-amber-signal); }
.status-dot.off { background: var(--color-terracotta); }

/* ─── flash ───────────────────────────────────────────── */

.flash {
  margin-top: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--color-linen-border);
  background: var(--color-pure-paper);
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 492;
  box-shadow: var(--shadow-sm);
}
.flash-ok { border-left: 4px solid var(--color-amber-signal); }
.flash-err { border-left: 4px solid var(--color-terracotta); color: var(--color-terracotta); }

/* ─── login ───────────────────────────────────────────── */

.login-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--color-pure-paper);
  border: 1px solid var(--color-linen-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 40px;
}

.login-card .brand { margin-bottom: 24px; }
.login-card h1 { font-size: 24px; font-weight: 584; letter-spacing: -0.31px; margin: 0 0 4px; }
.login-card .sub { font-size: 14px; color: var(--color-driftwood); margin: 0 0 24px; }

.login-error {
  border-left: 3px solid var(--color-terracotta);
  background: var(--color-cream-canvas);
  color: var(--color-terracotta);
  font-size: 14px;
  font-weight: 492;
  border-radius: var(--radius-badge);
  padding: 8px 12px;
  margin-bottom: 16px;
}

.login-hint { font-size: 12px; color: var(--color-driftwood); margin-top: 12px; }
.login-foot {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--color-linen-border);
  font-size: 12px;
  color: var(--color-driftwood);
  line-height: 1.5;
}

.btn-block { width: 100%; }

/* ─── misc ────────────────────────────────────────────── */

.empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--color-driftwood);
  font-size: 14px;
}
.empty .big { font-size: 20px; font-weight: 492; color: var(--color-bark); margin-bottom: 6px; }

.divider { border: none; border-top: 1px solid var(--color-linen-border); margin: 24px 0; }

.actions { display: flex; gap: 8px; flex-wrap: wrap; }

.stack { display: flex; flex-direction: column; gap: 12px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.secret-box {
  background: var(--color-cream-canvas);
  border: 1px dashed var(--color-stone-mist);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  word-break: break-all;
}

@media (max-width: 960px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .tiles { grid-template-columns: 1fr; }
  .card { padding: 24px; }
  .login-card { padding: 24px; }
}