/* Wahsel design system, built in layers toward the master image ("Value Creation Cockpit"):
     L0 foundations  colour tokens from the theme cascade (config/tenancy -> --wc-*, light or dark by the theme
                     `mode`), plus the non-colour tokens below (type, radius, elevation, motion)
     L1 primitives   .display .eyebrow .muted .field .btn (.btn-primary .btn-glass) .kind
     L2 components   .card .seg .conf .value-strip .waterfall (macros in templates/value/_macros.html)
   Pages compose components; they do not add their own styling. */

:root {
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-ui: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  --radius-card: 0.9rem;
  --radius-control: 9999px;
  --elevation-card: inset 0 1px 0 color-mix(in srgb, var(--wc-text) 4%, transparent),
    0 10px 30px color-mix(in srgb, #000 22%, transparent);
  --motion: 160ms ease-out;
}

body {
  background: var(--wc-bg);
  color: var(--wc-text);
  font-family: var(--font-ui);
}

/* L1 primitives */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.eyebrow {
  color: var(--wc-muted);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.muted {
  color: var(--wc-muted);
}
.value-em {
  color: var(--wc-accent);
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: var(--radius-control);
  padding: 0.35rem 0.9rem;
  font-size: 0.875rem;
  transition: background var(--motion), border-color var(--motion);
}
/* Gold is reserved for value, emphasis and the primary action. */
.btn-primary {
  background: var(--wc-accent);
  color: var(--wc-bg);
  font-weight: 600;
}
.btn-primary:hover {
  background: color-mix(in srgb, var(--wc-accent) 88%, var(--wc-text));
}
/* Soft Glass: dark neutral glass, one subtle reflection at the lower edge, faintly convex; no halo, no
   outer glow, no tinted glass. Used for every secondary control and segmented switch. */
.btn-glass,
.seg {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--wc-surface-2) 96%, var(--wc-text)) 0%,
    var(--wc-surface) 100%
  );
  border: 1px solid color-mix(in srgb, var(--wc-grid) 85%, var(--wc-text));
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--wc-text) 10%, transparent),
    inset 0 1px 1px color-mix(in srgb, #000 25%, transparent);
  color: var(--wc-text);
}
.btn-glass:hover {
  border-color: color-mix(in srgb, var(--wc-accent) 45%, var(--wc-grid));
}
.seg {
  display: inline-flex;
  border-radius: var(--radius-control);
  padding: 0.2rem;
  gap: 0.15rem;
}
.seg > a,
.seg > button,
.seg > label {
  border-radius: var(--radius-control);
  padding: 0.25rem 0.8rem;
  font-size: 0.78rem;
  color: var(--wc-muted);
}
.seg > label:focus-within {
  outline: 2px solid var(--wc-accent);
}
.seg > label:has(input:checked),
.seg > [aria-current="true"] {
  background: color-mix(in srgb, var(--wc-info) 22%, var(--wc-surface-2));
  color: var(--wc-text);
}

/* L2 components */
.card {
  background: linear-gradient(180deg, var(--wc-surface-2) 0%, var(--wc-surface) 100%);
  border: 1px solid var(--wc-grid);
  border-radius: var(--radius-card);
  box-shadow: var(--elevation-card);
}
/* Chart panel (reference deck): every WahselChart sits on its own calm panel inside its card, so the plot reads
   as one object; title and explanation stay above it on the card. The colour is a theme token (chart-panel),
   contrast-checked against the bar and label colours (ui/themes.validate). */
[data-wahsel-chart] {
  background: var(--wc-chart-panel, var(--wc-surface));
  border-radius: 0.5rem;
  padding: 0.5rem 0.25rem 0.25rem;
}
.value-strip > div + div {
  border-left: 1px solid var(--wc-grid);
}
@media (max-width: 639px) {
  .value-strip > div + div {
    border-left: 0;
    border-top: 1px solid var(--wc-grid);
  }
}
.waterfall {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  align-items: end;
  gap: 0.75rem;
  height: 11rem;
}
.waterfall .step {
  position: relative;
  height: 100%;
}
.waterfall .bar {
  position: absolute;
  left: 15%;
  right: 15%;
  border-radius: 0.2rem;
  background: color-mix(in srgb, var(--wc-info) 70%, var(--wc-surface));
}
.waterfall .bar.base {
  background: color-mix(in srgb, var(--wc-muted) 55%, var(--wc-surface));
}
.waterfall .bar.total {
  background: linear-gradient(180deg, var(--wc-accent), color-mix(in srgb, var(--wc-accent) 70%, #000));
}
.waterfall .bar.down {
  background: color-mix(in srgb, var(--wc-negative) 70%, var(--wc-surface));
}

.htmx-indicator {
  opacity: 0;
  transition: opacity 150ms;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

/* Company Value: what kind of number this is (DATA, USER assumption, CALCULATION, MODEL ESTIMATE, ...). */
.dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  flex: none;
}
.dot-DATA { background: var(--wc-info); }
.dot-PROXY { background: var(--wc-warn); }
.dot-DEFAULT { background: var(--wc-muted); }
.dot-USER { background: var(--wc-accent); }
.dot-SOURCE { background: #7c3aed; }
.kind {
  display: inline-block;
  border-radius: 9999px;
  padding: 0 0.45rem;
  font-size: 0.68rem;
  line-height: 1.15rem;
  font-weight: 500;
  white-space: nowrap;
  border: 1px solid var(--wc-grid);
}
.kind-DATA { background: color-mix(in srgb, var(--wc-s1) 14%, transparent); }
.kind-PROXY { background: color-mix(in srgb, var(--wc-warn) 18%, transparent); }
.kind-DEFAULT { background: color-mix(in srgb, var(--wc-muted) 16%, transparent); }
.kind-USER { background: color-mix(in srgb, var(--wc-accent) 20%, transparent); }
.kind-CALCULATION { background: color-mix(in srgb, var(--wc-info) 16%, transparent); }
.kind-MODEL_ESTIMATE { background: color-mix(in srgb, #0891b2 16%, transparent); }
.kind-HISTORICAL_EVIDENCE { background: color-mix(in srgb, #64748b 18%, transparent); }
.kind-SOURCE { background: color-mix(in srgb, #7c3aed 14%, transparent); }  /* a published external parameter */
.kind-official { background: color-mix(in srgb, var(--wc-accent, #c9a45c) 28%, transparent); }

.field {
  border: 1px solid var(--wc-grid);
  background: var(--wc-bg);
  border-radius: 0.375rem;
}
.conf {
  --size: 2rem;
  display: inline-grid;
  place-items: center;
  width: var(--size);
  height: var(--size);
  border-radius: 9999px;
  background: conic-gradient(var(--wc-accent, #c9a45c) calc(var(--p) * 1%), var(--wc-grid) 0);
  font-size: 0.65rem;
  font-variant-numeric: tabular-nums;
}
.conf > span {
  display: grid;
  place-items: center;
  width: calc(var(--size) - 6px);
  height: calc(var(--size) - 6px);
  border-radius: 9999px;
  background: var(--wc-surface);
}
.conf-lg { --size: 3.5rem; font-size: 0.9rem; }
.bar-pos { background: var(--wc-positive, #15803d); }
.bar-neg { background: var(--wc-negative, #b91c1c); }
[data-tone="info"] { color: var(--wc-info); }
[data-tone="value"] { color: var(--wc-accent); }
[data-tone="risk"] { color: var(--wc-negative); }
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
}
.status::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 9999px;
  background: var(--wc-muted);
}
.status-PLANNED::before { background: var(--wc-info); }
.status-APPROVED::before { background: var(--wc-accent); }
.status-IN_PROGRESS::before { background: var(--wc-positive); }
.status-DONE::before { background: var(--wc-positive); }
.status-STOPPED::before { background: var(--wc-negative); }
.row-link { cursor: pointer; transition: background var(--motion); }
.row-link:hover { background: color-mix(in srgb, var(--wc-info) 7%, transparent); }
/* Print (the board summary and any page): paper colours, no navigation, cards as plain boxes. The theme's
   dark tokens are swapped for print-safe ones; charts keep their series colours. */
@media print {
  :root {
    --wc-bg: #ffffff !important;
    --wc-surface: #ffffff !important;
    --wc-text: #111111 !important;
    --wc-muted: #555555 !important;
    --wc-grid: #d9d9d9 !important;
    --wc-chart-panel: #ffffff !important;
    --elevation-card: none !important;
  }
  body > header,
  #search-results,
  body > section,
  body > footer,
  nav form,
  .btn {
    display: none !important;
  }
  .card {
    background: #ffffff !important;
    border: 1px solid #d9d9d9 !important;
    box-shadow: none !important;
    break-inside: avoid;
  }
}

/* A form field's placeholder shows the standard (automatic) value: visibly not a typed value. */
[data-assumptions-form] input::placeholder {
  color: var(--wc-muted);
  opacity: 0.75;
}