/* ============================================================
   Inscriptios — design tokens and primitives.

   The palette, type and radii are Expansive's, lifted from the elox portal
   (elox-portal/src/lib/theme.css) so the two products read as one company:
   deep teal anchor, amber action accent, calm light canvas.

   Two deliberate departures from the elox tokens, both because this product
   has a public marketing face and elox does not:

   - `--ink-invert` and the `--band-*` tokens exist for full-bleed teal
     sections, which a logged-in console never needs.
   - Body type runs a little larger (16px base, not 14.5px). elox is a dense
     operations console read by staff all day; this is read once, by a stranger,
     deciding whether to trust us with their legal filings.

   Fonts are self-hosted. `app/security.py` sets `font-src 'self'` and
   `style-src 'self'`, so a Google Fonts <link> would be blocked at the CSP —
   loosening it for a webfont is not a trade worth making on a site that files
   legal documents. Both faces are OFL. Variable woff2, latin + latin-ext.
   ============================================================ */

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/static/fonts/space-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("/static/fonts/space-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/static/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Brand */
  --teal:        #005A7D;
  --teal-deep:   #014A66;
  --teal-800:    #013C53;
  --teal-tint:   #0A6B92;

  --amber:       #FFB548;
  --amber-600:   #F0A330;
  --amber-tint:  #FFE7BE;
  /* #FFB548 is 1.9:1 on white — unusable as text on light. This is the
     companion the elox portal already uses for amber text on light. */
  --amber-ink:   #8A5A08;

  /* Neutrals */
  --ink:         #0F2A36;
  --canvas:      #F3F6F8;
  --surface:     #FFFFFF;
  --surface-2:   #FAFCFD;
  --border:      #E2E9ED;
  --muted:       #5E7886;
  --faint:       #8CA3AE;

  /* On teal */
  --on-teal:       #EAF4F8;
  --on-teal-muted: #9CC4D4;

  /* Semantic */
  --good:      #2E9E6B;
  --good-tint: #E2F3EA;
  --good-ink:  #1C6E49;
  --warn:      #C98A12;
  --warn-tint: #FBF0D8;
  --warn-ink:  #7A5405;
  --bad:       #D2553B;
  --bad-tint:  #FBE7E1;
  --bad-ink:   #9C331E;

  /* Type */
  --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Radius / shadow */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --shadow-card: 0 1px 2px rgba(15, 42, 54, 0.04), 0 4px 16px rgba(15, 42, 54, 0.05);
  --shadow-pop:  0 8px 30px rgba(15, 42, 54, 0.12);

  /* Layout */
  --sidebar-w: 236px;
  --topbar-h:  64px;
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
img { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.02em; margin: 0; }

/* ---------- wordmark ----------
   "Inscriptios" is long — eleven characters against elox's four — so the
   lockup tracks tighter and the tagline sits at a smaller proportion than
   the elox mark, or the tagline outruns the word it belongs to. */
.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.045em;
  font-size: 25px;
  line-height: 1;
  color: #fff;
  display: inline-flex;
  align-items: baseline;
}
.wordmark--ink { color: var(--ink); }
.wordmark__accent { color: var(--amber); }
.wordmark--ink .wordmark__accent { color: var(--amber-ink); }

/* Lockup: the mark, then the wordmark with its tagline beneath it.
   The mark ships with a white ring rather than the source's charcoal. Every
   placement of the logo on this site is a teal surface -- nav, sidebar, signup
   bar, footer -- and the original #494949 ring on #005A7D is about 1.4:1, which
   is not a subtle logo but an absent one. The bolt keeps its own colours; they
   are already the brand's amber family. Source of record: docs/brand/. */
/* Centred, not top-aligned: at 52px the mark is taller than the wordmark and
   tagline stacked together, so it is the text that centres against the mark
   rather than the other way round. (It was top-aligned while the mark was 26px
   and the shorter of the two.) */
/* The gap is now the whole gap. The mark used to ship as a square with ~3.4%
   transparent margin on every side, which rendered as 8.33px of untouchable
   space between the ring and the wordmark -- so halving the CSS gap moved about
   a fifth of what anyone could see. The asset is cropped to its ink, and the
   width/height below hold the ring at exactly the size it was before the crop. */
.brandmark { display: inline-flex; flex-direction: row; align-items: center; gap: 5.5px; }
.brandmark__mark {
  width: 35.33px; height: 41.12px; flex: none; display: block;
  /* Optical, not geometric. The flexbox centring is already exact on the boxes,
     but the wordmark's line box carries 3.8px of empty space above the glyphs
     and 1.4px below, so the visible text sits lower than the box it lives in and
     the mark reads as riding high. Measured ink span of the two lines against
     the mark's centre: 1.25px. Offset rather than margin, so the nudge cannot
     feed back into the centring it is correcting. */
  position: relative;
  top: 1.25px;
}
.brandmark__text { display: inline-flex; flex-direction: column; align-items: flex-start; }
.brandmark__tagline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.13em;
  line-height: 1;
  /* -1px pulled it up into the wordmark's empty descender band; 11px cleared it
     but read as two separate lines. 5.5px is the half-way point, and close to
     where the lockup stops looking like a word with a caption under it. */
  margin-top: 5.5px;
  text-transform: uppercase;
  color: var(--on-teal-muted);
}
.brandmark--ink .brandmark__tagline { color: var(--muted); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 10px 18px;
  font-size: 14.5px; font-weight: 600;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  white-space: nowrap;
}
.btn--primary { background: var(--amber); color: #3A2A06; }
.btn--primary:hover { background: var(--amber-600); }
.btn--teal { background: var(--teal); color: #fff; }
.btn--teal:hover { background: var(--teal-deep); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--border); }
.btn--ghost:hover { background: var(--surface-2); border-color: var(--muted); }
.btn--onteal { background: rgba(255,255,255,0.12); color: #fff; border-color: rgba(255,255,255,0.28); }
.btn--onteal:hover { background: rgba(255,255,255,0.2); }
.btn--lg { padding: 13px 26px; font-size: 16px; }
.btn--sm { padding: 6px 12px; font-size: 13px; }
.btn--block { width: 100%; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* ---------- pills / tags ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em;
  padding: 3px 10px; border-radius: 999px;
  background: var(--canvas); color: var(--muted);
}
.pill--good { background: var(--good-tint); color: var(--good-ink); }
.pill--warn { background: var(--warn-tint); color: var(--warn-ink); }
.pill--bad  { background: var(--bad-tint);  color: var(--bad-ink); }
.pill--teal { background: #E1EEF3; color: var(--teal-800); }
.pill--amber{ background: var(--amber-tint); color: var(--amber-ink); }

/* ---------- cards / panels ---------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
}
.panel__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 17px 20px 0;
}
.panel__title { font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.panel__hint { font-size: 12.5px; color: var(--faint); }
.panel__body { padding: 16px 20px 20px; }
.panel__foot {
  padding: 13px 20px; border-top: 1px solid var(--border);
  background: var(--surface-2); font-size: 13px; color: var(--muted);
  border-radius: 0 0 var(--r-md) var(--r-md);
}

/* ---------- tables ---------- */
.tbl { width: 100%; border-collapse: collapse; }
.tbl thead th {
  text-align: left; font-size: 11.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--faint);
  padding: 13px 18px; border-bottom: 1px solid var(--border);
}
.tbl tbody td { padding: 13px 18px; border-bottom: 1px solid var(--border); font-size: 14px; vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl__name { font-weight: 600; }
.tbl__num { font-variant-numeric: tabular-nums; }
.tbl__actions { text-align: right; }

/* ---------- forms ---------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 13px; font-size: 15px; font-family: inherit;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--teal); outline: none; box-shadow: 0 0 0 3px rgba(0,90,125,0.12);
}
.field__hint { font-size: 12.5px; color: var(--faint); margin-top: 6px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; gap: 0; } }

/* ---------- misc ---------- */
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.mono { font-variant-numeric: tabular-nums; }
.stack > * + * { margin-top: 14px; }
.row { display: flex; align-items: center; gap: 10px; }
.row--wrap { flex-wrap: wrap; }
.spacer { margin-left: auto; }