/* =============================================================================
 * Exemem Design System
 * -----------------------------------------------------------------------------
 * The canonical visual language for every static site under web/* (admin,
 * landing, portal). The aesthetic: brutalist monospace — sharp 2px black
 * borders, no border-radius, no shadows, terminal-like typography.
 *
 * Consumers link this file directly:
 *   <link rel="stylesheet" href="/shared/exemem-design-system.css" />
 *
 * Tokens (CSS custom properties on :root)
 * ---------------------------------------
 *   Color:    --ev-fg, --ev-dim, --ev-soft, --ev-bg, --ev-card,
 *             --ev-border, --ev-hairline,
 *             --ev-danger, --ev-warn, --ev-ok,
 *             --ev-warn-bg, --ev-error-bg, --ev-highlight
 *   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 (no radii — flat by design)
 *   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)
 *   Feedback: .banner (+ .error)
 *   Forms:    .login (auth overlay; pairs with <form> + <input> + <button>)
 *   Helpers:  .dim, .error, .empty, .more
 *   Element:  <button> (use .ghost for low-weight variant)
 *
 * Conventions
 * -----------
 * - Override tokens at any descendant scope (e.g. a card variant) by
 *   redefining the custom property on a wrapper.
 * - Don't reach past the tokens to hardcode hex values in consumer CSS.
 *   If you need a color the system doesn't have, add a token here first.
 * - Class names are unprefixed (.card, .stat, .pill, ...) because this
 *   IS the project's design language. If a consumer needs a name we
 *   already own, namespace the consumer's variant (e.g. .portal-card),
 *   not the system's primitive.
 * ===========================================================================*/

:root {
  /* Color */
  --ev-fg: #0a0a0a;
  --ev-dim: #666;
  --ev-soft: #888;
  --ev-bg: #fafafa;
  --ev-card: #ffffff;
  --ev-border: #0a0a0a;
  --ev-hairline: #d4d4d4;
  --ev-danger: #cc0000;
  --ev-warn: #cc8800;
  --ev-ok: #2a8a3e;
  --ev-warn-bg: #fff8e6;
  --ev-error-bg: #ffeaea;
  --ev-highlight: #fff5cc;

  /* Type */
  --ev-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ev-font-size-base: 14px;
  --ev-line-height: 1.45;
  --ev-fs-pill: 0.65em;
  --ev-fs-label: 0.7em;
  --ev-fs-meta: 0.72em;
  --ev-fs-sub: 0.75em;
  --ev-fs-small: 0.85em;
  --ev-fs-h1: 1.4em;
  --ev-fs-display: 2.4em;

  /* Tracking */
  --ev-ls-tight: 0.02em;
  --ev-ls-normal: 0.05em;
  --ev-ls-wide: 0.1em;
  --ev-ls-wider: 0.12em;

  /* Borders */
  --ev-bw-1: 1px;
  --ev-bw-2: 2px;

  /* Layout */
  --ev-container-max: 1280px;

  /* Back-compat aliases (legacy unprefixed token names). These let any
   * existing site that already references --fg / --bg / --border keep
   * working while it migrates to the --ev-* 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);
}

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

main {
  max-width: var(--ev-container-max);
  margin: 0 auto;
  padding: 1.5em 1.25em 4em;
}

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

.topbar h1 {
  margin: 0;
  font-size: var(--ev-fs-h1);
  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: var(--ev-fs-small);
  padding: 0.35em 0.8em;
  border: var(--ev-bw-2) solid var(--ev-border);
  background: transparent;
  cursor: pointer;
  letter-spacing: var(--ev-ls-normal);
  text-transform: uppercase;
}
button:hover { background: var(--ev-card); }
button.ghost { border-color: var(--ev-hairline); color: var(--ev-dim); }

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

.banner {
  border: var(--ev-bw-2) solid var(--ev-warn);
  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);
  background: var(--ev-card);
  padding: 1em;
  text-align: center;
}
.stat .label {
  font-size: var(--ev-fs-label);
  letter-spacing: var(--ev-ls-wider);
  text-transform: uppercase;
  color: var(--ev-dim);
}
.stat .value {
  font-size: var(--ev-fs-display);
  font-weight: 700;
  line-height: 1.05;
  margin: 0.15em 0;
}
.stat .sub {
  font-size: var(--ev-fs-sub);
  color: var(--ev-dim);
}

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

.card {
  border: var(--ev-bw-2) solid var(--ev-border);
  background: var(--ev-card);
  padding: 1em;
}
.card .head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: var(--ev-bw-2) solid var(--ev-border);
  padding-bottom: 0.4em;
  margin-bottom: 0.75em;
  font-weight: 700;
  letter-spacing: var(--ev-ls-normal);
  text-transform: uppercase;
  font-size: var(--ev-fs-small);
}
.card .head .right {
  color: var(--ev-dim);
  font-weight: 400;
  font-size: var(--ev-fs-small);
}

.card section { margin-bottom: 0.9em; }
.card section:last-child { margin-bottom: 0; }
.card section .title {
  font-size: var(--ev-fs-label);
  letter-spacing: var(--ev-ls-wide);
  text-transform: uppercase;
  color: var(--ev-dim);
  margin-bottom: 0.3em;
}

/* --- 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-hairline);
}
.list li:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

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

.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); }
.error { color: var(--ev-danger); }

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

.pill {
  display: inline-block;
  padding: 0.05em 0.45em;
  border: var(--ev-bw-1) solid currentColor;
  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); }

/* --- 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: 1.3em; }
.login input {
  font-family: inherit;
  font-size: 1em;
  padding: 0.55em 0.75em;
  border: var(--ev-bw-2) solid var(--ev-border);
  background: transparent;
  outline: none;
}
.login button { align-self: center; padding: 0.5em 1.5em; }