/* UX Research Brief — site layer on top of the go4 studio kit (studio.css + theme.css).
   Only what the kit lacks: legacy figure compatibility, the platform / job / warning ledgers, and the beehiiv embed. */

/* ---------- legacy explainer figures (hand-drawn SVG from src/explainers.js and data/screener_figs.json) */
.legacy-fig {
  --card: var(--paper);
  --accent-soft: var(--tint);
  --gold: #A8791C; --gold-soft: #F1E6CC;
  --warn: #B5523B; --warn-soft: #F4DDD5;
}
.legacy-fig svg { display: block; width: 100%; height: auto; }
.legacy-fig .t { font-family: var(--font-body); fill: var(--ink); }
.legacy-fig .m { fill: var(--muted); }
.legacy-fig .s { font-size: 13px; }
.legacy-fig .xs { font-size: 11.5px; }
.legacy-fig .b { font-weight: 600; }
.legacy-fig .l { font-size: 15px; font-family: var(--font-display); font-weight: 500; }
.legacy-fig .fig__scroll > svg { min-width: 37.5rem; }

/* ---------- generic ledger rows (platforms, jobs) */
.ledger { container-type: inline-size; }
.ledger__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--g-text); }
.ledger__head .eyebrow { margin: 0; }
.ledger__list { list-style: none; margin: 0; padding: 0; }
.ledger__row {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); grid-template-areas: "n name" "n sub" "n meta";
  column-gap: var(--space-3); row-gap: var(--space-1); padding-block: var(--space-4);
  border-bottom: 1px solid var(--g-rule); color: inherit; text-decoration: none;
}
a.ledger__row:hover .ledger__name { font-style: italic; }
a.ledger__row:focus-visible { outline-offset: -2px; }
.ledger__n { grid-area: n; padding-top: .5rem; color: var(--g-muted); font-family: var(--font-data); font-size: var(--text-data-xs); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.ledger__name { grid-area: name; font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-display-sm); line-height: 1.15; letter-spacing: -.01em; }
.ledger__sub { grid-area: sub; color: var(--g-muted); font-family: var(--font-display); font-style: italic; font-size: 1.0625rem; line-height: 1.4; }
.ledger__meta { grid-area: meta; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); align-items: baseline; margin-top: var(--space-1); font-family: var(--font-data); font-size: var(--text-data); color: var(--g-text); font-variant-numeric: tabular-nums; }
.ledger__meta .muted { color: var(--g-muted); }
@container (min-width: 52rem) {
  .ledger__row { grid-template-columns: 2.5rem minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .95fr); grid-template-areas: "n name sub meta"; column-gap: var(--space-5); align-items: baseline; }
  .ledger__n { padding-top: 0; }
  .ledger__meta { margin-top: 0; flex-direction: column; gap: .2rem; align-items: flex-start; }
  .ledger--jobs .ledger__row { grid-template-columns: 5.5rem minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 11rem); }
  .ledger--jobs .ledger__meta { align-items: flex-end; text-align: right; }
}
.ledger--jobs .ledger__n { white-space: nowrap; }
.ledger--jobs .ledger__row { grid-template-columns: 4.75rem minmax(0, 1fr); }
.pay { display: inline-block; padding: .15rem .5rem; background: var(--tint); color: var(--ink); font-family: var(--font-data); font-size: var(--text-data-sm); letter-spacing: .02em; }

/* ---------- warning signs (spot a fake study) */
.flags { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--g-text); counter-reset: flag; }
.flags > li { counter-increment: flag; position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-1) var(--space-3); padding: var(--space-5) 0; border-bottom: 1px solid var(--g-rule); }
.flags > li::before { content: counter(flag, decimal-leading-zero); grid-row: 1 / span 3; font-family: var(--font-data); font-size: var(--text-data-xs); color: var(--g-muted); padding-top: .55em; letter-spacing: .04em; }
.flags > li::after { content: ""; position: absolute; left: 0; top: -1px; width: 2.5rem; height: 3px; background: #B5523B; }
.flags--safe > li::after { background: var(--accent); }
.flags h3 { font-family: var(--font-display); font-weight: var(--lead-weight); font-size: var(--text-display-sm); line-height: 1.2; letter-spacing: -.01em; }
.flags p { color: var(--g-text); max-width: 46rem; }
.flags .meta { margin-top: var(--space-1); }
.flags .meta a { color: inherit; }
@media (min-width: 48em) { .flags > li { grid-template-columns: 4rem minmax(0, 1fr); } .flags > li::after { width: 4rem; } }

/* ---------- facts list on platform pages */
.facts .table tbody th { width: 34%; min-width: 9rem; }
.facts .table td { color: var(--g-text); }

/* ---------- at-a-glance list in the platform hero */
.glance { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--g-text); }
.glance li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--space-3); padding-block: var(--space-3); border-bottom: 1px solid var(--g-rule); }
.glance .k { font-family: var(--font-label); font-size: var(--text-label); font-stretch: var(--label-stretch, 125%); font-weight: 500; letter-spacing: .14em; text-transform: uppercase; padding-top: .2em; }
.glance .v { font-family: var(--font-data); font-size: var(--text-data); line-height: 1.5; }

/* ---------- beehiiv embed */
.subscribe { min-height: 4rem; max-width: 36rem; }
.subscribe iframe { max-width: 100%; }
.subbox { display: grid; gap: var(--space-5); padding: var(--space-6) 0; border-top: 1px solid var(--g-text); border-bottom: 1px solid var(--g-rule); }
@media (min-width: 64em) { .subbox { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; } }
.subbox h2 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--text-display-md); line-height: 1.1; }
.subbox h2 em { font-style: italic; }
.subbox p { color: var(--g-muted); margin-top: var(--space-2); }
.subbox .meta { margin-top: var(--space-2); }

/* ---------- small helpers */
.stack-lg > * + * { margin-top: var(--space-8); }
.muted { color: var(--g-muted); }
.prose a { color: inherit; }
.note-line { margin-top: var(--space-4); }
.ext::after { content: " ↗"; }

/* ---------- overflow guards */
.split > *, .hero__grid > * { min-width: 0; }
.facts .table th, .facts .table td, .glance .v, .ledger__meta { overflow-wrap: anywhere; }

/* ---------- review fixes */
.hero__aside .eyebrow + .glance { margin-top: var(--space-3); }
.legacy-fig .fig__body svg { max-width: 56rem; }
.compare .table td { font-size: var(--text-small); line-height: 1.5; }
.compare .table tbody th { font-size: 1.0625rem; }