/* Shared styles for the doc-shaped Experimentation Lab embeds.
   Ported from the portfolio's embeds/doc.css and re-themed onto the site's
   own tokens — every color, font and space below resolves through
   ../css/tokens.css, so these documents read as part of the site rather
   than as pasted-in foreign artifacts.

   Each embed is a standalone document loaded in an iframe, not a fragment.
   explab-dashboard.html is bespoke and does not use this file. */

* { box-sizing: border-box; margin: 0; padding: 0; }

/* tokens.css paints the page ground sand; an embed sits on a surface. */
html, body { background: var(--bg-surface); }

body {
  font-family: var(--font-body);
  color: var(--fg-default);
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-10) var(--space-10);
  line-height: var(--lh-default);
  font-size: var(--type-body-sm);
}

header {
  border-bottom: var(--rule-strong) solid var(--brand);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-5);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-4);
  flex-wrap: wrap;
}
h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--type-h2);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-snug);
  color: var(--ink-900);
  margin-bottom: var(--space-1);
}
header .sub { font-size: var(--type-caption); color: var(--fg-muted); }
.meta {
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  color: var(--fg-muted);
  text-align: right;
  line-height: var(--lh-default);
}

.lede {
  background: var(--brand-bg);
  border-left: var(--space-1) solid var(--brand);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
}
.lede p:last-child { margin-bottom: 0; }

details.sec {
  border: var(--hairline) solid var(--border-subtle);
  margin-bottom: var(--space-2);
  overflow: hidden;
  background: var(--bg-surface);
}
details.sec > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--brand-text);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  background: var(--bg-inset);
}
details.sec > summary::-webkit-details-marker { display: none; }
details.sec > summary::after { content: "+"; font-size: var(--type-h3); line-height: 1; color: var(--fg-muted); font-weight: 400; }
details.sec[open] > summary::after { content: "\2013"; }
details.sec[open] > summary { border-bottom: var(--hairline) solid var(--border-subtle); }
details.sec .body { padding: var(--space-4); }
details.sec > summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }

p { margin-bottom: var(--space-3); }
p:last-child { margin-bottom: 0; }
h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--type-h3);
  letter-spacing: var(--ls-snug);
  color: var(--ink-900);
  margin: var(--space-5) 0 var(--space-2);
}
h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--type-body);
  color: var(--ink-900);
  margin: var(--space-4) 0 var(--space-1);
}
h2:first-child, h3:first-child { margin-top: 0; }
ul, ol { margin: 0 0 var(--space-3) var(--space-5); }
ul:last-child, ol:last-child { margin-bottom: 0; }
li { margin-bottom: var(--space-1); }
b, strong { color: var(--ink-900); font-weight: 600; }
em { color: var(--fg-muted); }
code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-inset);
  padding: 1px var(--space-1);
  color: var(--ink-700);
}

.tablewrap { overflow-x: auto; margin-bottom: var(--space-3); }
table { border-collapse: collapse; width: 100%; font-size: var(--type-caption); }
th, td { border: var(--hairline) solid var(--border-subtle); padding: var(--space-2) var(--space-3); text-align: left; }
th {
  background: var(--bg-inset);
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--fg-muted);
}
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Verdict chips on the hypothesis scorecard. */
.verdict {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--type-micro);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
}
.verdict.yes { background: var(--success-bg); color: var(--success); }
.verdict.no  { background: var(--error-bg);   color: var(--error); }

.callout { background: var(--bg-inset); padding: var(--space-3) var(--space-4); margin-top: var(--space-4); }
.foot { font-size: var(--type-micro); color: var(--fg-muted); font-style: italic; margin-top: var(--space-5); }

@media (max-width: 560px) {
  body { padding: var(--space-6) var(--space-4) var(--space-8); }
  header { flex-direction: column; align-items: flex-start; }
  .meta { text-align: left; }
}