/*
 * Rusty Quill Design System — internal theme.
 * Tokens + component patterns extracted from the RQ Design System (Claude Design project
 * e7121fa3-…): Foundations (Colors/Typography/Spacing), Internal App Shell, Tables, Forms, Buttons.
 * TODO(fidelity): vendor time-in-hell.woff2 (display) + Fira Sans into static/ for exact type; the
 * fallback stacks below are the ones the design system itself specifies.
 */

:root {
  --rq-black: #030303;        /* public canvas / sidebar rail */
  --rq-shell: #0b0c0d;        /* outer page behind the shell */
  --rq-surface: #212529;      /* internal app canvas / cards */
  --rq-grey-dk: #333333;
  --rq-muted: #6c757d;        /* secondary text, disabled */
  --rq-orange: #c48533;       /* links, primary action, accent */
  --rq-orange-muted: #9e6906; /* hover / active */
  --rq-white: #ffffff;
  --rq-ecru: #eddcc5;         /* feather mark on dark */
  --rq-red: #8b2020;          /* status: expired / danger */
  --rq-green: #2e7d4a;        /* status: sent / running */

  --hairline: #ffffff14;
  --hairline-strong: #ffffff26;

  --body: "Fira Sans", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --display: "TimeInHel", "Helvetica Neue", "Arial Black", system-ui, sans-serif;
  --mono: "SF Mono", "SFMono-Regular", ui-monospace, "Menlo", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--rq-shell);
  color: var(--rq-white);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--rq-orange); text-decoration: none; }
a:hover { color: var(--rq-orange-muted); }
.display { font-family: var(--display); font-weight: 900; letter-spacing: -0.01em; }
.eyebrow {
  color: var(--rq-orange); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.18em; font-size: 12px;
}
.muted { color: var(--rq-muted); }
.mono { font-family: var(--mono); font-size: 12px; }

/* --- buttons ------------------------------------------------------------ */
.btn {
  font-family: inherit; font-size: 14px; font-weight: 700; border-radius: 6px;
  padding: 9px 16px; border: 2px solid var(--rq-orange); background: var(--rq-orange);
  color: #fff; cursor: pointer; text-decoration: none; display: inline-block;
}
.btn:hover { background: var(--rq-orange-muted); border-color: var(--rq-orange-muted); color: #fff; }
.btn-ghost { background: transparent; color: var(--rq-orange); }
.btn-ghost:hover { background: #c4853318; color: var(--rq-orange); }

/* ======================================================================== */
/* Public landing (black canvas)                                            */
/* ======================================================================== */
.public { min-height: 100vh; background: var(--rq-black); display: flex; flex-direction: column; }
.public-bar { display: flex; align-items: center; gap: 10px; padding: 22px 40px; }
.hero {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  gap: 20px; max-width: 720px; padding: 0 40px 80px;
}
.hero h1 { font-family: var(--display); font-weight: 900; font-size: 64px; line-height: 1.02; margin: 0; letter-spacing: -0.02em; }
.hero h1 .q { color: var(--rq-orange); }
.hero p { font-size: 18px; color: var(--rq-ecru); max-width: 560px; margin: 0; }
.hero .btn { font-size: 16px; padding: 12px 24px; align-self: flex-start; margin-top: 8px; }
.feather { height: 26px; width: auto; flex: none; }
.feather-lg { height: 56px; width: auto; }
.wordmark {
  font-family: var(--display); font-weight: 900; font-size: 15px; letter-spacing: 0.03em;
}
.wordmark .q { color: var(--rq-orange); }

/* ======================================================================== */
/* Internal app shell                                                       */
/* ======================================================================== */
.shell { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.side {
  background: var(--rq-black); border-right: 1px solid var(--hairline);
  display: flex; flex-direction: column; padding: 18px 14px; gap: 4px;
}
.side-brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 16px; }
.feather-sm { height: 22px; width: auto; flex: none; }
.side-word { font-family: var(--display); font-weight: 900; font-size: 14px; letter-spacing: 0.03em; }
.side-word .q { color: var(--rq-orange); }
.nav-sec { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #ffffff55; padding: 14px 8px 6px; }
.nav-item {
  display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 8px;
  color: #cfd3d6; font-size: 14px; font-weight: 600;
}
.nav-item:hover { background: #ffffff0d; color: #fff; }
.nav-item.active { background: #c4853320; color: var(--rq-orange); box-shadow: inset 2px 0 0 var(--rq-orange); }
.nav-ic { width: 16px; text-align: center; flex: none; opacity: .9; }
.side-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 8px 4px; border-top: 1px solid var(--hairline); }
.avatar { width: 28px; height: 28px; border-radius: 999px; background: var(--rq-orange); display: flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; font-size: 12px; flex: none; }
.side-foot a { font-size: 12px; }

.main { background: var(--rq-surface); display: flex; flex-direction: column; min-width: 0; }
.topbar { display: flex; align-items: center; gap: 14px; padding: 14px 22px; border-bottom: 1px solid var(--hairline); }
.crumb { color: var(--rq-muted); font-size: 13px; }
.crumb b { color: #fff; }
.top-actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.content { padding: 24px 26px; display: flex; flex-direction: column; gap: 18px; }
.h1 { font-size: 24px; font-weight: 800; margin: 0; }

/* --- new-case form (compact, panel-header style) ------------------------ */
.new-case { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field .label { font-size: 12px; font-weight: 600; color: var(--rq-muted); }
.input {
  font-family: inherit; font-size: 14px; color: #fff; background: #00000033;
  border: 1px solid #ffffff33; border-radius: 6px; padding: 10px 12px; min-width: 240px; outline: none;
}
.input::placeholder { color: #ffffff55; }
.input:focus { border-color: var(--rq-orange); box-shadow: 0 0 0 3px #c4853340; }

/* --- panel + table ------------------------------------------------------ */
.panel { border: 1px solid var(--hairline); border-radius: 12px; overflow: hidden; background: #00000026; }
.panel-head {
  padding: 10px 16px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--rq-muted); border-bottom: 1px solid var(--hairline);
}
.tbl-wrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th {
  text-align: left; padding: 12px 16px; color: var(--rq-muted); font-weight: 600;
  border-bottom: 1px solid var(--hairline-strong); text-transform: uppercase;
  letter-spacing: 0.06em; font-size: 11px; white-space: nowrap;
}
.tbl td { padding: 13px 16px; border-bottom: 1px solid #ffffff12; vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: #ffffff08; }
.tbl .empty td { color: var(--rq-muted); text-align: center; padding: 28px 16px; }

/* --- status badges (mapped from RQ pill formula) ------------------------ */
.status {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  padding: 3px 10px; border-radius: 999px; text-transform: uppercase; white-space: nowrap;
}
/* orange = needs attention / in-flight-approval */
.status-ingested, .status-drafted, .status-classifying, .status-follow_up {
  background: #c4853322; color: #e0a75a; box-shadow: inset 0 0 0 1px #c4853355;
}
/* green = sent / statutory month running */
.status-sent, .status-waiting {
  background: #2e7d4a22; color: #5fbd85; box-shadow: inset 0 0 0 1px #2e7d4a55;
}
/* red = expired deadline */
.status-expired {
  background: #8b202022; color: #d97070; box-shadow: inset 0 0 0 1px #8b202055;
}
/* grey = terminal (closed / reported / discarded) */
.status-closed, .status-reported, .status-discarded {
  background: #6c757d22; color: #aab2b8; box-shadow: inset 0 0 0 1px #6c757d55;
}

/* --- personal ingest address (forward-to card) -------------------------- */
.forward-card {
  border: 1px solid #c4853340; background: #c4853312; border-radius: 12px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 8px;
}
.forward-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.forward-addr {
  font-family: var(--mono); font-size: 15px; color: var(--rq-orange);
  background: #00000033; border: 1px solid var(--hairline); border-radius: 6px; padding: 8px 12px;
}

/* --- row actions (HTMX transition buttons) ------------------------------ */
.actions { display: flex; gap: 8px; justify-content: flex-end; }
.rowact {
  font-family: inherit; font-size: 13px; font-weight: 700; color: var(--rq-orange);
  background: transparent; border: 0; padding: 4px 6px; border-radius: 6px; cursor: pointer;
}
.rowact:hover { background: #c4853318; color: var(--rq-orange-muted); }