/* Forge — minimal layer on top of Tabler.
   Restraint is the brief: one accent, flat surfaces, generous whitespace,
   tabular numbers wherever figures line up in a column. */

:root {
  --tblr-font-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Chart tokens. Validated against the actual card surfaces with the palette
     validator: lightness band, chroma floor, and >= 3:1 contrast all pass in
     both modes. One accent only - every plot here carries a single series, so
     there is no categorical discrimination to get wrong. */
  --viz-series-1: #2a78d6;
  --viz-surface:  #ffffff;
  --viz-grid:     #e6e7e9;
  --viz-ink:      #1a1d21;
  --viz-ink-soft: #6c7a91;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --viz-series-1: #3987e5;
    --viz-surface:  #1b1f24;
    --viz-grid:     #2b3138;
    --viz-ink:      #f5f7fb;
    --viz-ink-soft: #8a97a8;
  }
}
/* The toggle stamps both attributes; match either so a hand-set
   data-bs-theme (Tabler's own convention) also moves the chart tokens. */
:root[data-theme="dark"],
:root[data-bs-theme="dark"] {
  --viz-series-1: #3987e5;
  --viz-surface:  #1b1f24;
  --viz-grid:     #2b3138;
  --viz-ink:      #f5f7fb;
  --viz-ink-soft: #8a97a8;
}

body { font-feature-settings: "cv03","cv04","cv11"; }

/* --- chrome --------------------------------------------------------------- */

.navbar {
  background: var(--tblr-bg-surface);
  border-bottom: 1px solid var(--tblr-border-color);
  min-height: 3.25rem;
}

.brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; margin-right: .5rem;
  border-radius: 7px;
  background: var(--viz-series-1); color: #fff; font-size: .9rem;
}

.nav-forge .nav-link {
  padding: .35rem .75rem; border-radius: 7px;
  color: var(--tblr-secondary); font-weight: 500;
}
.nav-forge .nav-link.active {
  color: var(--tblr-body-color);
  background: var(--tblr-bg-surface-secondary);
}

.page-body { margin-top: 1.5rem; }

/* --- board ---------------------------------------------------------------- */

.board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  align-items: start;
}
@media (max-width: 1100px) {
  .board {
    grid-auto-flow: column; grid-template-columns: none;
    grid-auto-columns: min(84vw, 22rem);
    overflow-x: auto; padding-bottom: .5rem;
  }
}

.board-col-head {
  display: flex; align-items: center; gap: .5rem;
  padding: 0 .25rem .6rem;
  font-size: .8125rem; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; color: var(--tblr-secondary);
}
.board-col-head .count {
  font-variant-numeric: tabular-nums; font-weight: 500;
  color: var(--tblr-secondary); opacity: .75;
}

.board-col-body {
  display: flex; flex-direction: column; gap: .625rem;
  min-height: 5rem; padding: .25rem;
  border-radius: 10px; transition: background-color .12s ease;
}
.board-col-body.drop-target {
  background: var(--tblr-bg-surface-secondary);
  outline: 1px dashed var(--tblr-border-color-active);
}

.post-card {
  background: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color);
  border-radius: 10px; padding: .75rem .875rem;
  cursor: grab; transition: border-color .12s ease, transform .12s ease;
}
.post-card:hover { border-color: var(--tblr-border-color-active); }
.post-card.dragging { opacity: .45; cursor: grabbing; }
.post-card .title {
  font-size: .875rem; font-weight: 500; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.post-card .meta {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-top: .5rem; font-size: .75rem; color: var(--tblr-secondary);
}

.chip {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .1rem .4rem; border-radius: 5px;
  background: var(--tblr-bg-surface-secondary);
  font-size: .6875rem; color: var(--tblr-secondary);
}

.empty-col {
  padding: 1.25rem .5rem; text-align: center;
  font-size: .8125rem; color: var(--tblr-secondary); opacity: .7;
}

/* --- stat tile: value carries the data, sparkline carries the shape ------- */

.stat-row { display: flex; align-items: flex-end; gap: .75rem; margin-top: .625rem; }
.stat-value {
  font-size: 1.125rem; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--tblr-body-color);
}
.stat-label {
  font-size: .6875rem; color: var(--tblr-secondary);
  text-transform: uppercase; letter-spacing: .03em;
}
.spark { margin-left: auto; }

/* --- charts --------------------------------------------------------------- */

.viz-figure { margin: 0; }
.viz-title {
  font-size: .8125rem; font-weight: 500; color: var(--tblr-body-color);
  margin-bottom: .125rem;
}
.viz-sub { font-size: .75rem; color: var(--tblr-secondary); margin-bottom: .5rem; }
.viz-tooltip {
  position: fixed; z-index: 1080; pointer-events: none; display: none;
  padding: .375rem .5rem; border-radius: 7px;
  background: var(--tblr-body-color); color: var(--tblr-bg-surface);
  font-size: .75rem; font-variant-numeric: tabular-nums;
  box-shadow: 0 4px 14px rgba(0,0,0,.18);
}

/* --- pipeline ------------------------------------------------------------- */

.score {
  font-variant-numeric: tabular-nums; font-weight: 600;
  min-width: 2.25rem; display: inline-block;
}
/* line-height:0 matters: an inline-block child sits on the parent's baseline,
   so with a normal line-height the fill is pushed out of the 4px clip box and
   the track renders empty. */
.dim-track {
  display: inline-block; width: 3rem; height: 4px; border-radius: 2px;
  background: var(--viz-grid); vertical-align: middle;
  overflow: hidden; line-height: 0; margin-right: 3px;
}
.dim-bar {
  display: block; height: 4px; border-radius: 2px;
  background: var(--viz-series-1);
}

.post-body {
  white-space: pre-wrap; font-size: .875rem; line-height: 1.6;
  max-height: 22rem; overflow-y: auto;
}

.report-body { white-space: pre-wrap; font-size: .8125rem; line-height: 1.55; }

/* --- verdict pills: state, never colour alone (icon + word) -------------- */

.verdict { display: inline-flex; align-items: center; gap: .25rem; font-size: .6875rem; }
.verdict-clean          { color: var(--tblr-green); }
.verdict-ungated        { color: var(--tblr-orange); }
.verdict-changes-required { color: var(--tblr-red); }
.verdict-unknown        { color: var(--tblr-secondary); }