/* ==========================================================================
   v2 — new views (Changes / Compare / Portfolio) — appended overlay
   ========================================================================== */

/* Positive-impact greens. Kept as named variables so changing the palette
   (or tweaking dark-mode contrast) is a one-line edit instead of a hunt
   through every rule that mentions "#2d6b3e" or "#7fc28a". */
body[data-v2="true"] {
  --green-positive: #2d6b3e;
  --green-positive-soft: rgba(45, 107, 62, 0.14);
  --green-positive-border: rgba(45, 107, 62, 0.4);
}
body[data-v2="true"][data-theme="dark"] {
  --green-positive: #7fc28a;
  --green-positive-soft: rgba(127, 194, 138, 0.14);
  --green-positive-border: rgba(127, 194, 138, 0.4);
}

/* ---------- Changes ---------- */
.v2-changes-filters {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  padding: 0.9rem 0 1.2rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 1.4rem;
}
.v2-pill-row { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.v2-pill-row-label {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ink-3); margin-right: 0.3rem;
}
.v2-pill.v2-impact-positive.is-active { background: var(--green-positive); color: #fff; border-color: var(--green-positive); }
.v2-pill.v2-impact-negative.is-active { background: var(--red); color: #fff; border-color: var(--red); }
.v2-pill.v2-impact-neutral.is-active { background: var(--ink-3); color: var(--paper); border-color: var(--ink-3); }

.v2-timeline { display: flex; flex-direction: column; gap: 0.5rem; }
.v2-timeline-year {
  font-size: 1.6rem; font-weight: 500; letter-spacing: 0.02em;
  color: var(--ink); padding: 1.4rem 0 0.5rem;
  border-bottom: 1px solid var(--rule-2);
  margin-bottom: 0.4rem;
}
.v2-timeline-year:first-child { padding-top: 0; }
.v2-timeline-entry {
  display: grid; grid-template-columns: 160px 1fr; gap: 1.4rem;
  padding: 1.1rem 0.4rem; border-bottom: 1px solid var(--rule);
  transition: background 120ms ease;
}
.v2-timeline-entry:hover {
  /* Solid fallback for browsers without color-mix() support. */
  background: var(--paper-2);
  background: color-mix(in oklab, var(--paper-2) 50%, transparent);
}
.v2-timeline-date { color: var(--ink-3); font-size: 0.8rem; }
.v2-timeline-day { color: var(--ink-2); font-weight: 500; letter-spacing: 0.03em; }
.v2-timeline-type {
  display: inline-block; margin-top: 0.35rem;
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.68rem;
  padding: 0.18rem 0.5rem; border: 1px solid var(--rule-2); border-radius: 2px;
}
.v2-timeline-kicker {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem;
  font-size: 0.78rem; color: var(--ink-3); margin-bottom: 0.45rem;
}
.v2-timeline-headline {
  font-family: var(--serif); font-size: 1.25rem; font-weight: 500;
  line-height: 1.25; margin: 0 0 0.5rem; color: var(--ink);
}
.v2-timeline-detail { font-size: 0.92rem; line-height: 1.55; color: var(--ink-2); margin: 0 0 0.55rem; }
.v2-timeline-sources { display: flex; flex-wrap: wrap; gap: 0.7rem; font-size: 0.72rem; }
.v2-timeline-sources a {
  color: var(--ochre); text-decoration: none; border-bottom: 1px dotted var(--ochre);
  padding-bottom: 1px;
}
.v2-timeline-sources a:hover { color: var(--ochre-2); }
.v2-impact-chip {
  text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.66rem;
  padding: 0.14rem 0.48rem; border-radius: 2px; font-weight: 500;
}
.v2-impact-chip.v2-impact-positive { background: var(--green-positive-soft); color: var(--green-positive); }
.v2-impact-chip.v2-impact-negative { background: rgba(168, 50, 30, 0.14); color: var(--red); }
.v2-impact-chip.v2-impact-neutral {
  background: var(--paper-2);
  background: color-mix(in oklab, var(--ink-3) 18%, transparent);
  color: var(--ink-3);
}
.v2-conf-chip {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.14em;
  padding: 0.14rem 0.48rem; border: 1px solid var(--rule-2); border-radius: 2px; color: var(--ink-3);
}
.v2-timeline-entry.v2-impact-negative { border-left: 3px solid var(--red); padding-left: 1.1rem; margin-left: -1.1rem; }
.v2-timeline-entry.v2-impact-positive { border-left: 3px solid var(--green-positive); padding-left: 1.1rem; margin-left: -1.1rem; }

/* ---------- Editor's desk ---------- */
.v2-desk {
  margin-top: 3rem; padding-top: 2rem;
  border-top: 1px solid var(--rule-strong);
}
.v2-desk-head { margin-bottom: 1.4rem; max-width: 760px; }
.v2-desk-title {
  font-family: var(--serif); font-size: 1.8rem; font-weight: 500;
  margin: 0.2rem 0 0.4rem; line-height: 1.15;
}
.v2-desk-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem;
}
.v2-desk-card {
  border: 1px solid var(--rule-2); background: var(--paper-2);
  padding: 1.1rem; border-radius: 3px;
}
.v2-desk-card-title {
  font-family: var(--serif); font-size: 1.05rem; font-weight: 500;
  margin: 0 0 0.3rem;
}
.v2-desk-card-sub {
  font-size: 0.7rem; color: var(--ink-3); margin: 0 0 0.9rem; line-height: 1.5;
}
.v2-desk-list {
  display: flex; flex-direction: column; gap: 0.3rem;
  max-height: 360px; overflow-y: auto;
  padding-right: 0.3rem;
}
.v2-desk-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.7rem;
  font-size: 0.72rem; color: var(--ink-2);
  padding: 0.3rem 0; border-bottom: 1px dotted var(--rule);
}
.v2-desk-row:last-child { border-bottom: 0; }
.v2-desk-id { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-desk-meta { color: var(--ink-3); font-size: 0.68rem; flex-shrink: 0; }
.v2-desk-more { font-size: 0.68rem; color: var(--ink-3); padding-top: 0.4rem; font-style: italic; }
.v2-desk-gaps .v2-desk-row { font-family: var(--serif); font-size: 0.82rem; letter-spacing: 0; }

/* ---------- Compare ---------- */
.v2-compare-empty {
  padding: 4rem 2rem; text-align: center; border: 1px dashed var(--rule-2); border-radius: 4px;
}
.v2-compare-empty h2 { font-family: var(--serif); font-size: 1.5rem; margin: 0 0 0.5rem; font-weight: 500; }
.v2-compare-empty p { color: var(--ink-3); max-width: 460px; margin: 0 auto 1.2rem; line-height: 1.55; }

.v2-cmp-table {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--rule-2);
}
.v2-cmp-row {
  display: grid; grid-template-columns: 180px repeat(var(--cols, 2), minmax(0, 1fr));
  border-bottom: 1px solid var(--rule);
  min-height: 54px;
}
.v2-cmp-row:nth-child(odd) {
  background: var(--paper-2);
  background: color-mix(in oklab, var(--paper-2) 35%, transparent);
}
.v2-cmp-rowk {
  padding: 0.8rem 1rem; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-3); border-right: 1px solid var(--rule);
  display: flex; align-items: center;
}
.v2-cmp-cell {
  padding: 0.8rem 1rem; font-size: 0.88rem; line-height: 1.4;
  border-right: 1px solid var(--rule);
  display: flex; align-items: center;
}
.v2-cmp-cell:last-child { border-right: 0; }
.v2-cmp-cell.is-best {
  background: var(--paper-2);
  background: color-mix(in oklab, var(--ochre) 10%, transparent);
  color: var(--ochre-2); font-weight: 500;
  position: relative;
}
.v2-cmp-cell.is-best::before {
  content: "★"; position: absolute; top: 6px; right: 10px;
  font-size: 0.7rem; color: var(--ochre);
}
.v2-cmp-head { background: var(--paper-2) !important; border-bottom: 2px solid var(--rule-strong); }
.v2-cmp-col-head { padding: 0.9rem 1rem; border-right: 1px solid var(--rule); position: relative; }
.v2-cmp-col-head:last-child { border-right: 0; }
.v2-cmp-issuer { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-3); margin-bottom: 0.25rem; }
.v2-cmp-name {
  font-family: var(--serif); font-size: 1.1rem; font-weight: 500;
  margin: 0; line-height: 1.2;
}
.v2-cmp-name:hover { color: var(--ochre); }
.v2-cmp-remove {
  position: absolute; top: 10px; right: 10px;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--rule-2); background: var(--paper); color: var(--ink-3);
  cursor: pointer; font-size: 1rem; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.v2-cmp-remove:hover { background: var(--red); color: #fff; border-color: var(--red); }
.v2-cmp-visual { width: 100%; aspect-ratio: 1.6; max-width: 200px; overflow: hidden; border-radius: 3px; }
.v2-cmp-visual svg { width: 100%; height: 100%; }

/* ---------- Portfolio ---------- */
.v2-pf-coverage {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.7rem;
  margin-bottom: 2rem;
}
.v2-pf-cov {
  padding: 0.9rem 1rem; border: 1px solid var(--rule-2); border-radius: 3px;
  display: flex; flex-direction: column; gap: 0.35rem;
  background: var(--paper-2);
}
.v2-pf-cov.on { border-color: var(--green-positive-border); }
.v2-pf-cov.off { border-style: dashed; }
.v2-pf-cov-k {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-3);
}
.v2-pf-cov-v {
  font-family: var(--serif); font-size: 1.2rem; font-weight: 500;
}
.v2-pf-cov.on .v2-pf-cov-v { color: var(--green-positive); }
.v2-pf-cov.off .v2-pf-cov-v { color: var(--ink-3); font-style: italic; }
.v2-pf-list { display: flex; flex-direction: column; }

@media (max-width: 1100px) {
  .v2-desk-grid { grid-template-columns: 1fr 1fr; }
  .v2-pf-coverage { grid-template-columns: repeat(3, 1fr); }
  .v2-cmp-row { grid-template-columns: 130px repeat(var(--cols, 2), minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .v2-desk-grid { grid-template-columns: 1fr; }
  .v2-pf-coverage { grid-template-columns: repeat(2, 1fr); }
  .v2-timeline-entry { grid-template-columns: 1fr; gap: 0.6rem; }
  .v2-cmp-row { grid-template-columns: 110px repeat(var(--cols, 2), minmax(0, 1fr)); font-size: 0.8rem; }
  .v2-cmp-rowk, .v2-cmp-cell { padding: 0.6rem 0.7rem; }
}