/* =============================================================================
 * Exemem Design System
 * -----------------------------------------------------------------------------
 * Canonical visual language for every static site under web/* (admin, landing,
 * portal). Product-family sibling of LastDB (thelastdb.com / fold_db_website):
 *
 *   SAME graphics convention as LastDB
 *     — dark gruvbox ground, IBM Plex Mono, 1px stone borders, solid chip
 *       labels, tinted section bands, terminal density, no display type.
 *   PRODUCT TWEAK
 *     — accent is aqua (#83a598) instead of LastDB's construction orange
 *       (#fe8019). Links stay family green (#8ec07c). Everything else matches
 *       the gruvbox role map so the two sites read as one kit.
 *
 * Consumers link this file directly:
 *   <link rel="stylesheet" href="/shared/exemem-design-system.css" />
 * Also load IBM Plex Mono (same stack as thelastdb.com):
 *   <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&display=swap" rel="stylesheet" />
 *
 * Tokens (CSS custom properties on :root)
 * ---------------------------------------
 *   Color:    --ev-fg, --ev-dim, --ev-soft, --ev-bg, --ev-card,
 *             --ev-border, --ev-hairline,
 *             --ev-accent, --ev-accent2,
 *             --ev-danger, --ev-warn, --ev-ok,
 *             --ev-warn-bg, --ev-error-bg, --ev-ok-bg, --ev-highlight,
 *             --ev-on-accent (ink on filled accent buttons)
 *   Type:     --ev-font-mono, --ev-font-size-base, --ev-line-height,
 *             --ev-fs-pill, --ev-fs-label, --ev-fs-meta, --ev-fs-sub,
 *             --ev-fs-small, --ev-fs-h1, --ev-fs-display
 *   Tracking: --ev-ls-tight, --ev-ls-normal, --ev-ls-wide, --ev-ls-wider
 *   Borders:  --ev-bw-1, --ev-bw-2, --ev-radius (sharp corners, LastDB idiom)
 *   Layout:   --ev-container-max
 *
 * Component classes (all ship with the file)
 * ------------------------------------------
 *   Layout:   .topbar, .stats, .grid
 *   Display:  .stat (.label/.value/.sub)
 *   Panel:    .card (.head/.head .right; .card section .title)
 *   List:     .list (.list a, .list .title-row, .list .meta-row)
 *   Badge:    .pill (+ .draft / .ok / .warn / .fail / .muted)
 *             .label (+ .label-red/green/blue/yellow/purple/orange/aqua)
 *   Sections: .section-rose / sage / slate / amber / lavender (LastDB bands)
 *   Feedback: .banner (+ .error)
 *   Forms:    .login (auth overlay; pairs with <form> + <input> + <button>)
 *   Helpers:  .dim, .bold, .white, .error, .empty, .more
 *   Element:  <button> (use .ghost for low-weight variant)
 *
 * Conventions
 * -----------
 * - Override tokens at any descendant scope by redefining the custom property.
 * - Don't hardcode hex in consumer CSS — add a token here first.
 * - Class names are unprefixed (.card, .stat, .pill, ...) because this IS the
 *   project's design language. Namespace consumer variants (e.g. .portal-card),
 *   not system primitives.
 * ===========================================================================*/

/* IBM Plex Mono — same stack as thelastdb.com. Consumers may also <link> it;
 * the @import keeps Vite/admin/portal pages in family without per-file wiring. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&display=swap');

:root {
  /* Color — dark gruvbox (LastDB ground) + aqua product accent */
  --ev-fg: #ebdbb2;
  --ev-dim: #928374;
  --ev-soft: #665c54;
  --ev-bg: #282828;
  --ev-card: #3c3836;
  --ev-border: #504945;
  --ev-hairline: #3c3836;
  --ev-accent: #83a598;       /* Exemem product accent (LastDB uses #fe8019) */
  --ev-accent2: #8ec07c;      /* family link green — same as LastDB */
  --ev-danger: #fb4934;
  --ev-warn: #fabd2f;
  --ev-ok: #b8bb26;
  --ev-warn-bg: #3c3931;
  --ev-error-bg: #3c3231;
  --ev-ok-bg: #333c31;
  --ev-highlight: #3c3836;
  --ev-on-accent: #1d2021;    /* ink on filled accent buttons */

  /* Type — IBM Plex Mono. ONE size everywhere (LastDB / family rule):
   * hierarchy is boldness + color only, never font-size scale. Scale tokens
   * stay at 1em so older consumers (var(--ev-fs-h1) etc.) don't reintroduce
   * marketing typography. */
  --ev-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ev-font-size-base: 14px;
  --ev-line-height: 1.5;
  --ev-fs-pill: 1em;
  --ev-fs-label: 1em;
  --ev-fs-meta: 1em;
  --ev-fs-sub: 1em;
  --ev-fs-small: 1em;
  --ev-fs-h1: 1em;
  --ev-fs-display: 1em;

  /* Tracking — keep quiet; density over shout */
  --ev-ls-tight: 0;
  --ev-ls-normal: 0.02em;
  --ev-ls-wide: 0.04em;
  --ev-ls-wider: 0.06em;

  /* Borders — sharp corners match LastDB (no soft marketing radius) */
  --ev-bw-1: 1px;
  --ev-bw-2: 1px;
  --ev-radius: 0;

  /* Layout */
  --ev-container-max: 120ch;

  /* Back-compat aliases (legacy unprefixed token names) */
  --fg: var(--ev-fg);
  --dim: var(--ev-dim);
  --soft: var(--ev-soft);
  --bg: var(--ev-bg);
  --card: var(--ev-card);
  --border: var(--ev-border);
  --hairline: var(--ev-hairline);
  --danger: var(--ev-danger);
  --warn: var(--ev-warn);
  --ok: var(--ev-ok);
}

/* --- Reset ----------------------------------------------------------------- */

* { box-sizing: border-box; }

/* The HTML `hidden` attribute defaults to `display: none`, but explicit
 * `display: flex/block` rules on `.login`, `.banner`, etc. would otherwise
 * override that. This rule re-asserts hidden's default with !important so
 * toggling `el.hidden = true/false` from JS Just Works. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ev-bg);
  color: var(--ev-fg);
  font-family: var(--ev-font-mono);
  font-size: var(--ev-font-size-base);
  line-height: var(--ev-line-height);
  -webkit-font-smoothing: antialiased;
}

/* Kill size-based hierarchy — headings inherit body size */
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
  margin: 0.6em 0 0.35em;
}

/* Scrollbars — gruvbox on both engines (mirror LastDB). */
@supports (-moz-appearance: none) {
  * { scrollbar-width: thin; scrollbar-color: #504945 #1d2021; }
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #1d2021; }
::-webkit-scrollbar-thumb { background: #504945; border-radius: 5px; border: 2px solid #1d2021; }
::-webkit-scrollbar-thumb:hover { background: #665c54; }
::-webkit-scrollbar-corner { background: #1d2021; }

a { color: var(--ev-accent2); text-decoration: none; }
a:hover { color: var(--ev-ok); }

/* --- Layout primitives ----------------------------------------------------- */

main {
  max-width: var(--ev-container-max);
  margin: 0 auto;
  padding: 1em 16px 2.5em;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5em 1em;
  border-bottom: var(--ev-bw-2) solid var(--ev-border);
  padding-bottom: 0.5em;
  margin-bottom: 0.75em;
}

.topbar h1 {
  margin: 0;
  font-size: inherit;
  letter-spacing: var(--ev-ls-tight);
}

.topbar .meta {
  display: flex;
  align-items: center;
  gap: 0.6em;
  flex-wrap: wrap;
  font-size: var(--ev-fs-small);
  color: var(--ev-dim);
}

.topbar .meta .dot { opacity: 0.5; }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1em;
  margin-bottom: 1.5em;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1em;
}

/* --- Buttons --------------------------------------------------------------- */

button {
  font-family: inherit;
  font-size: inherit;
  padding: 0.3em 0.65em;
  border: var(--ev-bw-2) solid var(--ev-border);
  border-radius: var(--ev-radius);
  background: transparent;
  color: var(--ev-fg);
  cursor: pointer;
  letter-spacing: var(--ev-ls-normal);
  text-transform: none;
  font-weight: 700;
}
button:hover { background: var(--ev-card); border-color: var(--ev-accent); color: var(--ev-accent); }
button:focus-visible { outline: var(--ev-bw-2) solid var(--ev-accent); outline-offset: 2px; }
button.ghost { border-color: var(--ev-border); color: var(--ev-dim); }
button.ghost:hover { color: var(--ev-accent); border-color: var(--ev-accent); }

/* --- Banners --------------------------------------------------------------- */

.banner {
  border: var(--ev-bw-2) solid var(--ev-warn);
  border-radius: var(--ev-radius);
  padding: 0.75em 1em;
  margin-bottom: 1.25em;
  background: var(--ev-warn-bg);
}
.banner.error { border-color: var(--ev-danger); background: var(--ev-error-bg); }

/* --- Stats display --------------------------------------------------------- */

.stat {
  border: var(--ev-bw-2) solid var(--ev-border);
  border-radius: var(--ev-radius);
  background: var(--ev-card);
  padding: 0.65em 0.75em;
  text-align: left;
}
.stat .label {
  font-size: inherit;
  letter-spacing: var(--ev-ls-wide);
  text-transform: uppercase;
  color: var(--ev-dim);
  font-weight: 700;
}
.stat .value {
  font-size: inherit;
  font-weight: 700;
  line-height: 1.3;
  margin: 0.1em 0;
  color: var(--ev-accent);
}
.stat .sub {
  font-size: inherit;
  color: var(--ev-dim);
}

/* --- Cards ---------------------------------------------------------------- */

.card {
  border: var(--ev-bw-2) solid var(--ev-border);
  border-radius: var(--ev-radius);
  background: var(--ev-card);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.card .head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: var(--ev-bw-2) solid var(--ev-border);
  padding-bottom: 0.3em;
  margin-bottom: 0.45em;
  font-weight: 700;
  letter-spacing: var(--ev-ls-normal);
  text-transform: uppercase;
  font-size: inherit;
}
.card .head .right {
  color: var(--ev-dim);
  font-weight: 400;
  font-size: inherit;
}

.card section { margin-bottom: 0.55em; }
.card section:last-child { margin-bottom: 0; }
.card section .title {
  font-size: inherit;
  letter-spacing: var(--ev-ls-wide);
  text-transform: uppercase;
  color: var(--ev-dim);
  font-weight: 700;
  margin-bottom: 0.2em;
}

/* --- Lists ---------------------------------------------------------------- */

.list { list-style: none; padding: 0; margin: 0; }
.list li {
  margin-bottom: 0.5em;
  padding-bottom: 0.5em;
  border-bottom: var(--ev-bw-1) dashed var(--ev-border);
}
.list li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.list a {
  color: var(--ev-accent2);
  text-decoration: none;
  border-bottom: var(--ev-bw-1) dotted var(--ev-accent2);
}
.list a:hover { color: var(--ev-ok); background: transparent; }

.list .title-row { font-size: var(--ev-fs-small); margin-top: 0.15em; }
.list .meta-row { font-size: var(--ev-fs-meta); color: var(--ev-dim); }

/* --- Helpers -------------------------------------------------------------- */

.empty { color: var(--ev-soft); font-size: var(--ev-fs-small); }
.more { color: var(--ev-dim); font-size: var(--ev-fs-sub); font-style: italic; }
.dim { color: var(--ev-dim); }
/* Hierarchy = weight + color only (never size). .bold is cream + 700. */
.bold { font-weight: 700; color: #fbf1c7; }
.white { color: #fbf1c7; }
.error { color: var(--ev-danger); }

/* --- Pills ---------------------------------------------------------------- */

.pill {
  display: inline-block;
  padding: 0.05em 0.45em;
  border: var(--ev-bw-1) solid currentColor;
  border-radius: var(--ev-radius);
  font-size: var(--ev-fs-pill);
  font-weight: 700;
  letter-spacing: var(--ev-ls-normal);
  text-transform: uppercase;
  margin-left: 0.4em;
  vertical-align: 1px;
}
.pill.draft { color: var(--ev-soft); }
.pill.fail  { color: var(--ev-danger); }
.pill.warn  { color: var(--ev-warn); }
.pill.ok    { color: var(--ev-ok); }
.pill.muted { color: var(--ev-dim); }

/* Solid chip labels — exact LastDB idiom (.label + color) */
.label {
  display: inline-block;
  padding: 1px 6px;
  font-weight: 700;
  color: #282828;
  font-size: var(--ev-fs-meta);
  letter-spacing: var(--ev-ls-normal);
  text-transform: uppercase;
  border-radius: var(--ev-radius);
}
.label-red    { background: #fb4934; }
.label-green  { background: #b8bb26; }
.label-blue   { background: #83a598; }
.label-yellow { background: #fabd2f; }
.label-purple { background: #d3869b; }
.label-orange { background: #fe8019; }
.label-aqua   { background: #83a598; }

/* LastDB-style tinted section bands — dense padding */
.section-rose     { background: #3c3231; color: #ebdbb2; padding: 16px 14px; margin: 2px 0; }
.section-sage     { background: #333c31; color: #ebdbb2; padding: 16px 14px; margin: 2px 0; }
.section-slate    { background: #31353c; color: #ebdbb2; padding: 16px 14px; margin: 2px 0; }
.section-amber    { background: #3c3931; color: #ebdbb2; padding: 16px 14px; margin: 2px 0; }
.section-lavender { background: #38313c; color: #ebdbb2; padding: 16px 14px; margin: 2px 0; }

.section-rose h2 .bold     { color: #fb4934; }
.section-sage h2 .bold     { color: #b8bb26; }
.section-slate h2 .bold    { color: #83a598; }
.section-amber h2 .bold    { color: #fabd2f; }
.section-lavender h2 .bold { color: #d3869b; }

[class^="section-"] .bold { color: #fbf1c7; }
[class^="section-"] .dim { color: #928374; }
[class^="section-"] a { color: #8ec07c; text-decoration: none; }
[class^="section-"] a:hover { color: #b8bb26; }

/* --- Auth overlay (login form) -------------------------------------------- */

.login {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ev-bg);
  z-index: 10;
}
.login form {
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  width: min(320px, 90vw);
  text-align: center;
}
.login h1 { margin: 0; font-size: inherit; font-weight: 700; }
.login input {
  font-family: inherit;
  font-size: 1em;
  padding: 0.55em 0.75em;
  border: var(--ev-bw-2) solid var(--ev-border);
  border-radius: var(--ev-radius);
  background: var(--ev-card);
  color: var(--ev-fg);
  outline: none;
}
.login input:focus { border-color: var(--ev-accent); }
.login button { align-self: center; padding: 0.5em 1.5em; }