/* deck.css — the synthetic pack as an object of work + the review
   workspace. Distinct palette: the deck is Northstar's (slate), the
   review chrome stays on the product palette (Moss-adjacent). */

/* ---------- Slide rendering (container-scalable) ---------- */

.slide-host { container-type: inline-size; }

.slide {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #fdfdfc;
  border: 1px solid #d8d5cd;
  color: #23282c;
  display: flex;
  flex-direction: column;
  padding: 4.5cqw 5cqw 3.2cqw;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(35, 40, 44, 0.06);
}

.slide-chrome {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 1.05cqw; letter-spacing: 0.14em; text-transform: uppercase;
  color: #8a9096; border-bottom: 1px solid #e7e4dc; padding-bottom: 1.4cqw;
  margin-bottom: 3cqw;
}
.slide-num { font-variant-numeric: tabular-nums; }

/* The pack keeps its own voice — a plain corporate grotesk, deliberately
   distinct from the review chrome's Oswald labels. Reviewer and object
   never share a typeface. */
.slide-title {
  font-family: "Helvetica Neue", Arial, "Segoe UI", sans-serif; text-transform: uppercase;
  font-size: 3.2cqw; line-height: 1.08; font-weight: 700; letter-spacing: 0.02em;
  margin: 0 0 2.2cqw; color: #1c2125;
}
.slide-title-cover { font-family: "Helvetica Neue", Arial, "Segoe UI", sans-serif; text-transform: uppercase; font-size: 6cqw; line-height: 1; font-weight: 700; margin: 4cqw 0 1.2cqw; color: #1c2125; max-width: 22ch; }
.slide-sub { font-size: 1.9cqw; color: #4a5258; margin: 0 0 3cqw; }

.slide-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 1.6cqw; }
.slide-cover .slide-body { justify-content: flex-end; }

.blk p { margin: 0; font-size: 1.7cqw; line-height: 1.5; }
.blk-metric .metric-line { font-size: 2.3cqw; line-height: 1.35; max-width: 46ch; font-weight: 500; }
.blk-metric .fig {
  font-family: var(--display); font-weight: 600; font-size: 9cqw;
  line-height: 1; display: block; margin: 1cqw 0 1.6cqw; color: #1c2125;
  font-variant-numeric: tabular-nums;
}
.blk-metric .fig-inline { font-weight: 600; font-variant-numeric: tabular-nums; font-size: inherit; }
.src-tag { font-size: 1.05cqw !important; text-transform: uppercase; letter-spacing: 0.12em; color: #8a9096; margin-top: 1.8cqw !important; }
.blk-note p { font-size: 1.3cqw; color: #6b7278; }
.blk-context p { font-size: 1.9cqw; color: #3a4147; max-width: 52ch; }
.claim-line { font-size: 2.6cqw; line-height: 1.3; font-weight: 500; max-width: 40ch; }
.evidence-line { font-size: 1.35cqw; color: #6b7278; margin-top: 1.4cqw !important; border-left: 2px solid #35505e; padding-left: 1cqw; }
.evidence-line span { text-transform: uppercase; letter-spacing: 0.1em; font-size: 1cqw; color: #35505e; }
.closing-line { font-size: 2.2cqw; max-width: 44ch; }

/* key-stats recap row — stat-with-purpose pairs */
.blk-stats { display: flex; gap: 4.5cqw; margin: 2.4cqw 0 3cqw; padding: 2cqw 0; border-top: 1px solid #dfe3e6; border-bottom: 1px solid #dfe3e6; }
.blk-stats .stat { display: grid; gap: 0.5cqw; }
.blk-stats .stat-v { font-family: var(--display); font-weight: 600; font-size: 3.4cqw; line-height: 1; color: #1c2125; font-variant-numeric: tabular-nums; }
.blk-stats .stat-l { font-size: 1.15cqw; color: #6b7278; max-width: 16ch; line-height: 1.35; }

.rec-box { border: 1px solid #35505e; padding: 2cqw; }
.rec-box .rec-line { font-size: 1.9cqw; font-weight: 500; margin-bottom: 1.4cqw !important; }
.rec-fields { display: grid; gap: 0.9cqw; margin: 0; }
.rec-fields div { display: grid; grid-template-columns: 12cqw 1fr; gap: 1cqw; }
.rec-fields dt { font-size: 1cqw; text-transform: uppercase; letter-spacing: 0.1em; color: #35505e; padding-top: 0.2cqw; }
.rec-fields dd { margin: 0; font-size: 1.5cqw; }

/* comparison bars */
.cmp-bars { margin-top: 1.8cqw; display: grid; gap: 0.8cqw; max-width: 56cqw; }
.cmp-row { display: grid; grid-template-columns: 9cqw 1fr 4.5cqw 4.5cqw; align-items: center; gap: 1cqw; }
.cmp-label { font-size: 1.25cqw; color: #3a4147; }
.cmp-track { display: block; height: 1.6cqw; background: #eeede8; position: relative; }
.cmp-bar { position: absolute; inset: 0 auto 0 0; background: #35505e; }
.cmp-num { font-size: 1.5cqw; font-variant-numeric: tabular-nums; font-weight: 600; }
.cmp-rate { font-size: 1.25cqw; color: #6b7278; font-variant-numeric: tabular-nums; }

.slide-foot {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 1cqw; color: #9aa0a5; border-top: 1px solid #e7e4dc;
  padding-top: 1.2cqw; letter-spacing: 0.08em; text-transform: uppercase;
}
.syn-mark { color: #6f6148; letter-spacing: 0.2em; font-weight: 600; }

/* editable affordance — annotation chips are owned by ledger.css
   (.blk .flag-chip / .tag-suggested / .flagged / .suggested-applied) */
.blk.editable [data-field] { border-bottom: 1px dashed transparent; transition: border-color .15s; }
.blk.editable:hover [data-field], .blk.editable:focus-within [data-field] { border-bottom-color: var(--accent); }
.blk.editable { position: relative; }
.blk.editable::after {
  content: 'edit'; position: absolute; bottom: -0.4cqw; right: -0.4cqw;
  font-size: 0.9cqw; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); background: var(--paper); border: 1px solid var(--line);
  padding: 0.2cqw 0.7cqw; opacity: 0; transition: opacity .15s; pointer-events: none;
}
.blk.editable:hover::after, .blk.editable:focus-visible::after, .blk.editable:focus-within::after { opacity: 1; }
@media (hover: none) { .blk.editable::after { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .blk.editable [data-field], .strip-thumb { transition: none; }
}