/* Frontier / Pareto page — inherits tokens from styles.css */

.page { background: transparent; }

/* nav on parchment (not overlay) */
.nav--solid { border-bottom: 1px solid rgba(143, 168, 147, 0.35); }
.nav--solid .nav__links a[aria-current="page"] { color: var(--forest); }

/* ---- masthead: a single full-width stack. Big serif title, then the intro
   directly beneath it spanning the full measure (no floating side column that
   just relocates the dead space), then the mono dateline. On article pages
   article.css centers this whole block on the 72rem body axis. ---- */
.mast {
  padding: clamp(3rem, 8vh, 5.5rem) var(--gutter) clamp(1.5rem, 3vh, 2.5rem);
  max-width: 92rem;
}
.mast__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 6.4vw, 5rem);
  line-height: 1.0;
  letter-spacing: -0.01em;
  margin: 0.9rem 0 0;
}
.mast__title em { color: var(--forest); }
.mast__sub {
  margin-top: 1.5rem;
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: none;
}
.mast__meta {
  margin-top: 1.8rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--sage);
}

/* ---- chart region ---- */
.chart {
  padding: 0 var(--gutter) clamp(3rem, 7vh, 5rem);
}
.chart__frame {
  position: relative;
  border: 1px solid rgba(143, 168, 147, 0.5);
  border-radius: 6px;
  background:
    repeating-linear-gradient(0deg, rgba(29,74,56,0.025) 0 1px, transparent 1px 40px),
    var(--parchment-deep);
  padding: clamp(1rem, 2.5vw, 2rem) clamp(0.75rem, 2vw, 1.75rem);
}
.chart__bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.chart__legend { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.leg {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}
.leg__dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.leg__dot--prop { background: var(--forest); }
.leg__dot--open { background: var(--terracotta); }
.leg__dot--front {
  width: 12px; height: 12px; border-radius: 50%;
  border: 1.4px solid var(--terracotta); background: transparent;
}

.chart__filters { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.filter-btn {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid rgba(143, 168, 147, 0.55);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  cursor: pointer;
  transition: color 200ms var(--ease), border-color 200ms var(--ease), background 200ms var(--ease);
}
.filter-btn:hover { border-color: var(--forest); color: var(--forest); }
.filter-btn.is-active { background: var(--forest); border-color: var(--forest); color: var(--parchment); }

.chart__plot { display: block; width: 100%; height: auto; overflow: visible; }

/* svg text styles */
.ax-lbl { font-family: var(--mono); font-size: 13px; fill: var(--ink-soft); }
.ax-title { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; fill: var(--sage); }
.front-lbl { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; fill: var(--terracotta); }
.ann-lbl { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; fill: var(--ink-soft); }

.dot__pt { transition: r 180ms var(--ease); cursor: pointer; }
.dot__lbl {
  font-family: var(--mono);
  font-size: 12.5px;
  fill: var(--ink);
  opacity: 0;
  transition: opacity 200ms var(--ease);
  pointer-events: none;
}
.dot__lbl--end { text-anchor: end; }
.dot--front .dot__lbl { opacity: 0.9; }
.dot.is-hot .dot__lbl { opacity: 1; }
.dot.is-hot .dot__pt { r: 8; }
.dot { cursor: pointer; }
.dot.is-dim { opacity: 0.1 !important; pointer-events: none; }
.dot.is-dim .dot__lbl { opacity: 0 !important; }
.front-path.is-dim { opacity: 0.18 !important; }

/* effort ladder lines */
.ladder { pointer-events: none; transition: opacity 200ms var(--ease); }
.ladder.is-dim { opacity: 0.04 !important; }
.chart__plot.is-armed .ladder { opacity: 0; }
.chart__plot.is-armed.is-drawn .ladder { opacity: 1; transition: opacity 600ms var(--ease) 350ms; }

.leg__line {
  width: 16px; height: 0; display: inline-block;
  border-top: 1px solid var(--forest); opacity: 0.65;
  transform: translateY(-3px);
}

/* effort tier chip in the table */
.eff {
  font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-soft);
  border: 1px solid rgba(143, 168, 147, 0.6); border-radius: 999px;
  padding: 0.1rem 0.42rem; margin-left: 0.5rem; vertical-align: middle;
}

/* draw-in animation */
.chart__plot.is-armed .dot,
.chart__plot.is-armed .front-path,
.chart__plot.is-armed .ann,
.chart__plot.is-armed .front-lbl { opacity: 0; }
.chart__plot.is-armed.is-drawn .dot { opacity: 1; transition: opacity 500ms var(--ease); }
.chart__plot.is-armed.is-drawn .front-path,
.chart__plot.is-armed.is-drawn .front-lbl { opacity: 1; transition: opacity 600ms var(--ease) 350ms; }
.chart__plot.is-armed.is-drawn .ann { opacity: 1; transition: opacity 600ms var(--ease) 650ms; }
.chart__plot.is-armed.is-drawn .dot--front { transition: opacity 500ms var(--ease) 200ms; }

/* tooltip */
.pareto-tip {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  min-width: 190px;
  background: var(--forest-deep);
  color: var(--parchment);
  border-radius: 6px;
  padding: 0.85rem 1rem;
  box-shadow: 0 14px 34px rgba(34, 27, 21, 0.28);
  opacity: 0;
  transition: opacity 160ms var(--ease);
  font-family: var(--mono);
}
.pareto-tip.is-on { opacity: 1; }
.tip__name { font-family: var(--serif); font-size: 1.05rem; display: block; }
.tip__lab { font-size: 0.62rem; letter-spacing: 0.1em; color: var(--sage); display: block; margin-bottom: 0.6rem; }
.tip__row {
  display: flex; justify-content: space-between; gap: 1.5rem;
  font-size: 0.66rem; letter-spacing: 0.06em;
  padding: 0.18rem 0; color: rgba(246, 241, 232, 0.82);
}
.tip__row span:first-child { color: var(--sage); }
.tip__flag {
  display: inline-block; margin-top: 0.5rem;
  font-size: 0.58rem; letter-spacing: 0.12em;
  color: var(--terracotta);
}

/* ---- reading / thesis ---- */
.thesis {
  padding: clamp(3rem, 8vh, 6rem) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}
.thesis__lede h2 { margin-bottom: 1rem; }
.thesis__lede p { color: var(--ink-soft); max-width: 42ch; }
.thesis__points { list-style: none; display: grid; gap: 1.5rem; }
.thesis__points li { border-top: 1px solid var(--sage); padding-top: 1.1rem; display: flex; gap: 1rem; align-items: baseline; }
.thesis__points .n { font-family: var(--mono); font-size: 0.78rem; color: var(--terracotta); }
.thesis__points h3 { font-family: var(--serif); font-weight: 480; font-size: 1.25rem; }
.thesis__points p { font-size: 0.95rem; color: var(--ink-soft); margin-top: 0.35rem; max-width: 52ch; }

/* ---- table ---- */
.tbl-wrap { padding: 0 var(--gutter) clamp(3rem, 8vh, 6rem); }
.tbl-head { max-width: 60ch; margin-bottom: 1.75rem; }
.tbl-head h2 { margin-bottom: 0.6rem; }
.tbl-head p { color: var(--ink-soft); font-size: 0.95rem; }
.tbl-scroll { overflow-x: auto; }
.model-tbl {
  width: 100%;
  border-collapse: collapse;
  min-width: 820px;
}
.model-tbl th {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.1em;
  color: var(--sage);
  text-align: left;
  font-weight: 400;
  padding: 0 0.9rem 0.7rem;
  border-bottom: 1px solid var(--sage);
}
.model-tbl th.num, .model-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.model-tbl td {
  padding: 0.85rem 0.9rem;
  border-bottom: 1px solid rgba(143, 168, 147, 0.3);
  font-size: 0.9rem;
}
.model-tbl td.num { font-family: var(--mono); font-size: 0.82rem; color: var(--ink); }
.model-tbl .m-name { font-family: var(--serif); font-size: 1.05rem; }
.model-tbl .m-lab { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; color: var(--ink-soft); }
.model-tbl tr.is-front td { background: rgba(201, 131, 107, 0.07); }
.tag {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em;
  padding: 0.18rem 0.5rem; border-radius: 999px;
}
.tag--open { color: var(--terracotta); border: 1px solid rgba(201, 131, 107, 0.5); }
.tag--prop { color: var(--forest); border: 1px solid rgba(29, 74, 56, 0.35); }
.tick { color: var(--terracotta); font-family: var(--mono); }
.dash { color: var(--sage); }

.src-note {
  margin-top: 1.5rem;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  color: var(--sage);
  max-width: 80ch;
  line-height: 1.7;
}
.src-note a { color: var(--forest); }

@media (max-width: 860px) {
  .thesis { grid-template-columns: 1fr; }
  .dot__lbl { display: none; }
  .chart__frame { padding: 0.75rem 0.4rem; }
  .mast__sub { margin-top: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .chart__plot.is-armed .dot,
  .chart__plot.is-armed .front-path,
  .chart__plot.is-armed .front-lbl,
  .chart__plot.is-armed .ann { opacity: 1 !important; }
  .dot__pt, .dot__lbl, .filter-btn, .pareto-tip { transition: none !important; }
}