/* ============================================================================
   CoA Sim
   ----------------------------------------------------------------------------
   Design brief: an instrument that shows its own error bars.

   Every combat constant in this tool is inferred rather than measured, so the
   interface is built around conveying uncertainty instead of hiding it. Two
   decisions follow from that:

   1. The DISTRIBUTION is the hero, not the mean. A simulator's honest output
      is a range; a single large number would overstate what we know.
   2. MONOSPACE is the display face, not merely the data face. This tool's real
      content is formulas (291+0+AP*0.4), spell ids and coefficients — so the
      instrument speaks in mono, and only human prose is set in sans.

   Committed to a single dark treatment: this is a readout, and readouts have
   one correct environment.
   ========================================================================== */

:root {
  /* Surfaces — cold blue-black, closer to an oscilloscope than to "dark mode" */
  --ink:      #0b0e14;
  --panel:    #121724;
  --panel-2:  #0e121c;
  --line:     #212a3c;
  --line-hi:  #2f3b52;

  --text:     #dce3f0;
  --muted:    #808da6;
  --dim:      #5a6579;

  /* Instrument accent, and the amber that always means "not measured" */
  --accent:   #5eead4;
  --accent-d: #2dd4bf;
  --warn:     #f5a524;

  /* Confidence spine — the semantic colour system this product is built on */
  --t-verified:    #4ade80;
  --t-parsed:      #60a5fa;
  --t-partial:     #f5a524;
  --t-unmodeled:   #64748b;
  --t-descriptive: #3f4a5f;

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Inter, Roboto, sans-serif;

  --gap: 1.5rem;
  --radius: 3px;         /* near-square: instrument panel, not app card */
}

* { box-sizing: border-box; }

/* Any class that sets `display` outranks the UA's `[hidden] { display: none }`,
   so toggling `.hidden` in JS silently does nothing. Re-assert it once here
   rather than remembering a `[hidden]` guard on every such rule. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  /* Faint scanline wash: instrument atmosphere, kept below perceptibility */
  background-image: repeating-linear-gradient(
    180deg, rgba(94, 234, 212, 0.014) 0 1px, transparent 1px 3px
  );
}

h1, h2, h3 { font-family: var(--mono); font-weight: 600; letter-spacing: -0.02em; margin: 0; }

a { color: var(--accent); text-decoration-color: rgba(94, 234, 212, 0.35); text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ─────────────────────────────  masthead  ───────────────────────────── */

.masthead {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--gap);
  padding: 1.25rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}

.masthead__id { display: flex; align-items: center; gap: 0.75rem; }

/* Mark: a tick on a scale — the smallest possible drawing of "a measurement" */
.mark {
  width: 22px; height: 22px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--line-hi);
  position: relative;
}
.mark::after {
  content: ""; position: absolute; left: 3px; bottom: 3px;
  width: 7px; height: 11px; background: var(--accent); opacity: 0.55;
}

.masthead h1 { font-size: 1.0625rem; letter-spacing: 0.02em; }
.masthead h1 span { color: var(--muted); }

.masthead__blurb { margin: 0; color: var(--muted); font-size: 0.8125rem; max-width: 46ch; }
.masthead__blurb strong { color: var(--text); font-weight: 500; }

.masthead__facts { display: flex; gap: 1.5rem; margin: 0; }
.masthead__facts div { text-align: right; }
.masthead__facts dt {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--dim);
}
.masthead__facts dd { margin: 0; font-family: var(--mono); font-size: 0.875rem; color: var(--text); }

/* ─────────────────────────────  thesis  ───────────────────────────── */

.thesis {
  padding: 1.25rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  background: linear-gradient(90deg, rgba(245, 165, 36, 0.05), transparent 60%);
}
.thesis__lead {
  margin: 0 0 0.25rem;
  font-family: var(--mono);
  font-size: clamp(0.9375rem, 2.2vw, 1.125rem);
  color: var(--text);
  letter-spacing: -0.01em;
}
.thesis__lead em { color: var(--warn); font-style: normal; }
.thesis__body { margin: 0; color: var(--muted); font-size: 0.8125rem; max-width: 88ch; }

/* ─────────────────────────────  workbench  ───────────────────────────── */

.workbench {
  display: grid;
  grid-template-columns: minmax(290px, 340px) 1fr;
  gap: 0;
  align-items: start;
  min-height: 60vh;
}

/* ─────────────────────────────  controls  ───────────────────────────── */

.controls {
  padding: 1.25rem clamp(1rem, 2vw, 1.5rem) 2rem;
  border-right: 1px solid var(--line);
  background: var(--panel-2);
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
}

.field { border: 0; padding: 0; margin: 0 0 1.5rem; }

.field > legend {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 0 0.5rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  width: 100%;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0.75rem;
}
.legend-count { color: var(--dim); letter-spacing: 0; text-transform: none; }

.note { margin: 0.5rem 0 0; font-size: 0.75rem; color: var(--dim); line-height: 1.5; }

.select-wrap { position: relative; }
.select-wrap::after {
  content: "▾"; position: absolute; right: 0.7rem; top: 50%;
  transform: translateY(-50%); color: var(--muted); pointer-events: none; font-size: 0.7rem;
}

select, input[type="number"] {
  width: 100%;
  background: var(--ink);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.45rem 0.6rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  appearance: none;
}
select { padding-right: 1.8rem; }
select:hover, input[type="number"]:hover { border-color: var(--line-hi); }
select:focus-visible, input:focus-visible { border-color: var(--accent); }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 0.6rem; }

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.stat > label {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.stat--wide { grid-column: 1 / -1; }

/* talents */

.talents { display: flex; flex-direction: column; gap: 1px; max-height: 320px; overflow-y: auto; }

.talent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem;
  align-items: start;
  padding: 0.5rem 0.55rem;
  background: var(--panel);
  border-left: 2px solid transparent;
  cursor: pointer;
}
.talent:hover { background: #161c2b; }
.talent:has(input:checked) { border-left-color: var(--accent); background: #16202e; }

.talent input { margin: 0.2rem 0 0; accent-color: var(--accent-d); }
.talent__name { font-family: var(--mono); font-size: 0.75rem; color: var(--text); }
.talent__desc {
  display: block;
  font-size: 0.6875rem;
  color: var(--dim);
  line-height: 1.45;
  margin-top: 0.15rem;
}

/* run */

.run { position: sticky; bottom: 0; padding-top: 0.5rem; background: var(--panel-2); }

.btn {
  width: 100%;
  font-family: var(--mono);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--accent);
  border: 0;
  border-radius: var(--radius);
  padding: 0.65rem 1rem;
  cursor: pointer;
}
.btn:hover { background: #7df3e0; }
.btn:disabled { background: var(--line-hi); color: var(--muted); cursor: progress; }

.run__status { margin: 0.5rem 0 0; font-family: var(--mono); font-size: 0.6875rem; color: var(--muted); min-height: 1.2em; }

/* ─────────────────────────────  readout  ───────────────────────────── */

.readout { padding: 1.5rem clamp(1rem, 4vw, 2.5rem) 2.5rem; }

.readout__empty {
  display: grid;
  place-items: center;
  min-height: 40vh;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 0.875rem;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
}

/* --- the hero: distribution ------------------------------------------- */

.dist { margin: 0 0 1.25rem; }

.dist__caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.dist__range {
  font-family: var(--mono);
  font-size: 1.0625rem;
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.dist__sep { color: var(--dim); font-size: 0.8125rem; }
.dist__conf { color: var(--muted); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; }

#histogram {
  display: block;
  width: 100%;
  height: 150px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.dist__axis {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--dim);
  margin-top: 0.3rem;
}

/* --- the mean, deliberately secondary to the spread ------------------- */

.headline {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gap);
  flex-wrap: wrap;
  padding: 0.9rem 1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 1.25rem;
}

.headline__value { display: flex; align-items: baseline; gap: 0.5rem; }
.headline__num {
  font-family: var(--mono);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.headline__err { font-family: var(--mono); font-size: 0.875rem; color: var(--muted); }

.headline__meta { display: flex; gap: 1.5rem; margin: 0; flex-wrap: wrap; }
.headline__meta dt {
  font-family: var(--mono); font-size: 0.625rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--dim);
}
.headline__meta dd { margin: 0; font-family: var(--mono); font-size: 0.9375rem; font-variant-numeric: tabular-nums; }

/* --- damage sources ---------------------------------------------------- */

.sources { margin-bottom: 1.25rem; }
.sources h3 { margin-bottom: 0.5rem; }

.srctable { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 0.8125rem; }
.srctable th {
  text-align: right;
  font-weight: 500;
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  padding: 0 0.6rem 0.4rem;
  border-bottom: 1px solid var(--line);
}
.srctable th:first-child { text-align: left; }
.srctable td { padding: 0.45rem 0.6rem; border-bottom: 1px solid rgba(33, 42, 60, 0.5); text-align: right; font-variant-numeric: tabular-nums; }
.srctable td:first-child { text-align: left; color: var(--text); }
.srctable tbody tr:hover { background: var(--panel); }

/* Share is drawn as a bar behind the cell — the data is the decoration */
.sharecell { position: relative; }
.sharecell span { position: relative; }
.sharecell::before {
  content: "";
  position: absolute;
  inset: 4px auto 4px 0;
  width: var(--share, 0%);
  background: linear-gradient(90deg, rgba(94, 234, 212, 0.28), rgba(94, 234, 212, 0.07));
  border-left: 2px solid var(--accent-d);
}

/* --- warnings ---------------------------------------------------------- */

.warnings { border-left: 2px solid var(--warn); padding-left: 0.85rem; }
.warnings ul { margin: 0.4rem 0 0; padding: 0; list-style: none; }
.warnings li { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); padding: 0.15rem 0; }
.warnings li b { color: var(--warn); font-weight: 500; }

/* ─────────────────────────────  provenance  ───────────────────────────── */

.provenance {
  padding: 2rem clamp(1rem, 4vw, 2.5rem);
  border-top: 1px solid var(--line);
  background: var(--panel-2);
}
.provenance > h2 { font-size: 1rem; margin-bottom: 1.25rem; }

.prov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: var(--gap); }
.prov-grid h3 { font-size: 0.8125rem; color: var(--accent); margin-bottom: 0.4rem; }
.prov-grid p { margin: 0 0 0.6rem; font-size: 0.8125rem; color: var(--muted); }
.prov-grid em { color: var(--warn); font-style: normal; }

.formula {
  font-family: var(--mono);
  font-size: 0.9375rem;
  color: var(--text);
  background: var(--ink);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: 0.5rem 0.7rem;
}

.conf-list { list-style: none; margin: 0; padding: 0; }
.conf-list li {
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--mono); font-size: 0.75rem;
  padding: 0.25rem 0; border-bottom: 1px solid rgba(33, 42, 60, 0.6);
}
.conf-list dfn { font-style: normal; color: var(--muted); }
.conf-list b { color: var(--warn); font-weight: 500; }

/* coverage bar */
.tierbar { display: flex; height: 12px; border-radius: 2px; overflow: hidden; border: 1px solid var(--line); }
.tierbar > i { display: block; height: 100%; }

.tierkey { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; gap: 0.2rem; }
.tierkey li {
  display: grid; grid-template-columns: 10px 1fr auto;
  gap: 0.5rem; align-items: center;
  font-family: var(--mono); font-size: 0.6875rem; color: var(--muted);
}
.tierkey i { width: 10px; height: 10px; border-radius: 2px; }
.tierkey b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ─────────────────────────────  footer  ───────────────────────────── */

.foot {
  padding: 1.25rem clamp(1rem, 4vw, 2.5rem) 2rem;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: 0.75rem;
}
.foot p { margin: 0 0 0.3rem; }
.foot__src { font-family: var(--mono); font-size: 0.6875rem; }

/* ─────────────────────────────  responsive  ───────────────────────────── */

@media (max-width: 900px) {
  .workbench { grid-template-columns: 1fr; }
  .controls {
    position: static;
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .masthead { grid-template-columns: 1fr; gap: 0.75rem; }
  .masthead__facts { justify-content: flex-start; }
  .masthead__facts div { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* A talent that maps correctly but buffs an ability this rotation never casts.
   Marked rather than hidden — it is selectable, it just cannot move the number
   here, and silently doing nothing would read as a bug. */
.talent--inert { opacity: 0.62; }
.talent__flag {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.03em;
  color: var(--warn);
}