/* Foxcairn — the density layer.
 * ============================================================================
 * tokens.css already supplies COLOUR, and does it properly: a light parchment
 * default with dark variants, shared by the forum skin and the site. Nothing
 * here redefines a single colour. Every rule below reaches for a --fc-* token
 * so this layer inherits whatever theme is active, and carries a fallback so
 * it still renders standalone.
 *
 * What was missing is what this file adds: a type scale, a spatial scale, and
 * the primitives for building DENSE views with real hierarchy.
 *
 * THE FOUR RULES THIS FILE ENCODES
 *
 *   1. Three tiers, always in the same order.
 *      label  -> mono, 11px, uppercase, tracked, muted
 *      value  -> 15-17px, full-contrast text, often tabular
 *      note   -> 13px, muted, the context you only read if you care
 *      Every stat, row, cell and card uses those three and nothing else. The
 *      eye learns the pattern once and then scans instead of reading.
 *
 *   2. One 4px grid, one type scale, no ad-hoc values.
 *      Density is not "make everything smaller" -- it is removing the
 *      arbitrary. A view is compact because the same six sizes and eight
 *      spacings repeat, not because each element was nudged.
 *
 *   3. Density is a property of a CONTAINER, not of a component.
 *      Set --d on any wrapper and everything inside tightens or relaxes
 *      together. A component never hardcodes its own row height, so the same
 *      table can be an airy summary or an operations view without a variant.
 *
 *   4. Status is a shape AND a colour, never a colour alone.
 *      Every state carries a dot or a stripe as well as a hue, so it survives
 *      a colourblind reader, a greyscale print, and a dark theme.
 * ========================================================================= */

:root {
  /* --- spatial: one 4px grid ------------------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;

  /* Density multiplier. Overridden per container, never per component --
     that is what lets one table serve a summary and an ops view. */
  --d: 1;

  /* --- type: six steps, and no others --------------------------------- */
  --t-label: 0.688rem;   /* 11px  mono, uppercase, tracked   */
  --t-note:  0.8125rem;  /* 13px  secondary and metadata     */
  --t-body:  0.9375rem;  /* 15px  running text; 15 not 16, deliberately --
                                  at density it buys a line every ~8 rows  */
  --t-value: 1.0625rem;  /* 17px  the number you came to read */
  --t-h3:    1.25rem;
  --t-h2:    1.625rem;
  --t-h1:    2.25rem;

  --lh-tight: 1.25;
  --lh-body:  1.55;
  --track:    0.14em;    /* letter-spacing for uppercase labels */

  --row-h: calc(34px * var(--d));
}

/* ---------------------------------------------------------------- base */
.fc {
  font-family: var(--fc-font-body, system-ui, sans-serif);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--fc-text, #1d0711);
}

/* Tier 1. The same label treatment everywhere, so a label is never mistaken
   for content -- which is the failure that makes dense screens unreadable. */
.fc-label {
  font-family: var(--fc-font-mono, ui-monospace, monospace);
  font-size: var(--t-label);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--fc-muted, #7d6c63);
  line-height: var(--lh-tight);
  margin: 0;
}

/* Tier 2. tabular-nums is not a nicety: without it a column of figures
   shifts as the digits change and the eye can no longer compare down it. */
.fc-value {
  font-size: var(--t-value);
  line-height: var(--lh-tight);
  color: var(--fc-text, #1d0711);
  font-variant-numeric: tabular-nums;
  margin: 0;
}
.fc-value.is-lg { font-size: var(--t-h2); }

/* Tier 3. */
.fc-note {
  font-size: var(--t-note);
  color: var(--fc-muted, #7d6c63);
  line-height: var(--lh-body);
  margin: 0;
}

/* ------------------------------------------------------------- headings */
.fc h1, .fc h2, .fc h3 {
  font-family: var(--fc-font-display, Georgia, serif);
  line-height: var(--lh-tight);
  color: var(--fc-text, #1d0711);
  text-wrap: balance;
  margin: 0;
  font-weight: 400;
}
.fc h1 { font-size: var(--t-h1); letter-spacing: -0.015em; }
.fc h2 { font-size: var(--t-h2); letter-spacing: -0.01em; }
.fc h3 { font-size: var(--t-h3); }

/* --------------------------------------------------------------- panel */
.fc-panel {
  background: var(--fc-surface, #fffdf8);
  border: 1px solid var(--fc-line, #ddcfb6);
  border-radius: var(--fc-radius-lg, 10px);
  overflow: hidden;
}
.fc-panel > header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: calc(var(--s-2) * var(--d)) calc(var(--s-4) * var(--d));
  border-bottom: 1px solid var(--fc-line, #ddcfb6);
  background: var(--fc-surface-2, #efe6d5);
}
.fc-panel > .fc-body { padding: calc(var(--s-4) * var(--d)); }

/* ------------------------------------------------------------ stat grid */
.fc-stats {
  display: grid; gap: 1px; margin: 0; padding: 0; list-style: none;
  background: var(--fc-line, #ddcfb6);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.fc-stats > li {
  background: var(--fc-surface, #fffdf8);
  padding: calc(var(--s-3) * var(--d)) calc(var(--s-4) * var(--d));
  display: grid; gap: calc(var(--s-1) * var(--d));
}
/* 1px gaps over borders: at density, borders on every cell double up into
   2px seams and the grid starts to look like a spreadsheet. */

/* ---------------------------------------------------------------- rows */
.fc-rows { margin: 0; padding: 0; list-style: none; }
.fc-rows > li {
  display: flex; align-items: center; gap: var(--s-3);
  min-height: var(--row-h);
  padding: calc(var(--s-2) * var(--d)) calc(var(--s-4) * var(--d));
  border-bottom: 1px solid var(--fc-line-soft, #eae0cd);
}
.fc-rows > li:last-child { border-bottom: 0; }
.fc-rows > li > .fc-grow { flex: 1 1 auto; min-width: 0; }
/* Truncation belongs on the row, not the page: one long value must never be
   what makes a dense table scroll sideways. */
.fc-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --------------------------------------------------------------- table */
.fc-tablewrap { overflow-x: auto; }
.fc-table { width: 100%; border-collapse: collapse; font-size: var(--t-note); }
.fc-table th {
  font-family: var(--fc-font-mono, ui-monospace, monospace);
  font-size: var(--t-label);
  letter-spacing: var(--track);
  text-transform: uppercase;
  color: var(--fc-muted, #7d6c63);
  text-align: left;
  font-weight: 400;
  padding: calc(var(--s-2) * var(--d)) calc(var(--s-3) * var(--d));
  border-bottom: 1px solid var(--fc-line, #ddcfb6);
  white-space: nowrap;
  position: sticky; top: 0;
  background: var(--fc-surface-2, #efe6d5);
}
.fc-table td {
  padding: calc(var(--s-2) * var(--d)) calc(var(--s-3) * var(--d));
  border-bottom: 1px solid var(--fc-line-soft, #eae0cd);
  color: var(--fc-text-2, #4a3b3a);
  vertical-align: baseline;
}
.fc-table tr:last-child td { border-bottom: 0; }
.fc-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.fc-table .key { color: var(--fc-text, #1d0711); }
/* No zebra striping. Ruled rows are lighter, survive a theme change, and do
   not fight the status colours that actually carry meaning. */

/* ------------------------------------------------------------ key/value */
.fc-kv { display: grid; gap: calc(var(--s-2) * var(--d)) var(--s-4); margin: 0;
         grid-template-columns: max-content 1fr; }
.fc-kv dt { font-family: var(--fc-font-mono, ui-monospace, monospace);
            font-size: var(--t-label); letter-spacing: var(--track);
            text-transform: uppercase; color: var(--fc-muted, #7d6c63);
            padding-top: 0.18em; }
.fc-kv dd { margin: 0; color: var(--fc-text, #1d0711);
            font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------- chips */
.fc-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--fc-font-mono, ui-monospace, monospace);
  font-size: var(--t-label); letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 8px 2px 6px; border-radius: 999px; white-space: nowrap;
  border: 1px solid transparent;
}
/* The dot is the point. Colour alone fails a colourblind reader, a greyscale
   print, and any theme that shifts contrast -- the shape does not. */
.fc-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
                   background: currentColor; flex: none; }
.fc-chip.ok     { color: var(--fc-ok, #2c6042);     background: var(--fc-ok-bg, #dcecdf);
                  border-color: color-mix(in srgb, var(--fc-ok, #2c6042) 26%, transparent); }
.fc-chip.warn   { color: var(--fc-warn, #8a5a10);   background: var(--fc-warn-bg, #f7ead0);
                  border-color: color-mix(in srgb, var(--fc-warn, #8a5a10) 26%, transparent); }
.fc-chip.danger { color: var(--fc-danger, #9c3320); background: var(--fc-danger-bg, #f7e0d8);
                  border-color: color-mix(in srgb, var(--fc-danger, #9c3320) 26%, transparent); }
.fc-chip.idle   { color: var(--fc-muted, #7d6c63);
                  background: var(--fc-surface-2, #efe6d5);
                  border-color: var(--fc-line, #ddcfb6); }
.fc-chip.is-square::before { border-radius: 1px; }

/* -------------------------------------------------------------- stripe */
/* A severity rail on the left of a row. Reads before any text does, which is
   the whole job when a screen has forty rows and two of them matter. */
.fc-stripe { border-left: 3px solid var(--fc-line, #ddcfb6); padding-left: var(--s-3); }
.fc-stripe.ok     { border-left-color: var(--fc-ok, #2c6042); }
.fc-stripe.warn   { border-left-color: var(--fc-warn, #8a5a10); }
.fc-stripe.danger { border-left-color: var(--fc-danger, #9c3320); }

/* --------------------------------------------------------------- meter */
.fc-meter { height: 6px; border-radius: 3px; position: relative; overflow: hidden;
            background: var(--fc-surface-2, #efe6d5);
            border: 1px solid var(--fc-line, #ddcfb6); }
.fc-meter > i { display: block; height: 100%; background: var(--fc-accent, #8a5a10); }
/* The tick sits ABOVE the fill and is drawn in the page background colour, so it reads as a
   notch whether the bar has reached it or not. Drawn in --fc-line it vanished the moment the
   fill passed it -- which is exactly when the threshold matters most. */
.fc-meter > b { position: absolute; top: -1px; bottom: -1px; width: 2px; z-index: 1;
                background: var(--fc-bg, #f7f2e8); opacity: .85; }
/* Ticks matter more than the fill. A bar tells you roughly how full; a tick
   tells you how far you are from the threshold that changes something. */

/* -------------------------------------------------------------- layout */
.fc-stack   { display: grid; gap: calc(var(--s-4) * var(--d)); }
.fc-stack.tight { gap: calc(var(--s-2) * var(--d)); }
.fc-cluster { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.fc-split   { display: flex; align-items: baseline; justify-content: space-between;
              gap: var(--s-3); }

/* Density presets. Set on any container; everything inside follows. */
.fc-compact { --d: 0.72; }
.fc-roomy   { --d: 1.35; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }