/* Page chrome for the study. Tokens mirror web/shared/tokens/theme.css so the
   page reads like the product it describes. Light by default; dark follows the
   system, or PiCode's data-theme when the viewer sets one. */
:root {
  --bg-base: #f0f2f7; --bg-panel: #fbfcfe; --bg-elevated: #ffffff; --bg-hover: #e4e9f2;
  --border: #dde2ec; --border-strong: #b3bccd;
  --text-primary: #16181d; --text-secondary: #5b6472;
  --accent: #2a62d6; --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent); --accent-fill: #2a62d6; --on-accent: #fff;
  --ok: #2e7d32; --ok-soft: color-mix(in srgb, var(--ok) 13%, transparent);
  --warn: #a16207; --warn-ink: #854d0e; --warn-soft: color-mix(in srgb, var(--warn) 14%, transparent);
  --danger: #cf3b54; --danger-ink: #a8293f; --danger-soft: color-mix(in srgb, var(--danger) 12%, transparent);
  --brand: #2563EB;
  --radius-ctl: 8px; --radius-panel: 12px; --ctl-h: 36px;
  --sans: -apple-system, "Segoe UI", Inter, Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .06);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-base: #0e0e11; --bg-panel: #16161c; --bg-elevated: #1c1c23; --bg-hover: #202027;
    --border: #232329; --border-strong: #2c2c34;
    --text-primary: #ececf1; --text-secondary: #9b9ba7;
    --accent: #7c8cf8; --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent); --accent-fill: #4f5dde; --on-accent: #fff;
    --ok: #63d297; --warn: #e5c07b; --warn-ink: #e5c07b; --danger: #f7768e; --danger-ink: #f7768e;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg-base: #0e0e11; --bg-panel: #16161c; --bg-elevated: #1c1c23; --bg-hover: #202027;
  --border: #232329; --border-strong: #2c2c34;
  --text-primary: #ececf1; --text-secondary: #9b9ba7;
  --accent: #7c8cf8; --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent); --accent-fill: #4f5dde; --on-accent: #fff;
  --ok: #63d297; --warn: #e5c07b; --warn-ink: #e5c07b; --danger: #f7768e; --danger-ink: #f7768e;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px rgba(0,0,0,.35);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg-base); color: var(--text-primary); font: 15px/1.6 var(--sans); }
a { color: var(--accent); text-underline-offset: 3px; }
code, kbd { font-family: var(--mono); font-size: .86em; background: var(--bg-hover); border-radius: 5px; padding: .1em .35em; white-space: nowrap; }
kbd { white-space: nowrap; overflow-wrap: normal; border: 1px solid var(--border); border-bottom-width: 2px; }
html, body { overflow-x: clip; }
h1, h2, h3, .job h3 { text-wrap: balance; }
p, li, .lede { text-wrap: pretty; }
.sub { text-wrap: balance; }
ul.cols2 { columns: 2; column-gap: 32px; margin: 0; }
ul.cols2 li { break-inside: avoid; }
@media (max-width: 720px) { ul.cols2 { columns: 1; } }
table.wide { min-width: 720px; }
table.mid { min-width: 560px; }
h1, h2, h3, h4 { line-height: 1.25; margin: 0; }
p { margin: .55em 0; }
ul, ol { margin: .4em 0; padding-left: 1.25em; }
li { margin: .3em 0; }
strong { font-weight: 650; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* Header + tabs */
.top { background: var(--bg-panel); border-bottom: 1px solid var(--border); }
.top .wrap { padding-top: 26px; padding-bottom: 0; }
.eyebrow { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); font-weight: 600; }
.title-row { display: flex; gap: 18px; align-items: center; margin: 8px 0 6px; }
.title-row h1 { font-size: 30px; letter-spacing: -.02em; }
.lede { color: var(--text-secondary); max-width: 760px; margin: 0 0 18px; font-size: 16px; }
.tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin: 0 0 0 -14px; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: none; height: 40px; padding: 0 14px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--text-secondary); font: 600 14px var(--sans); cursor: pointer; border-radius: 6px 6px 0 0; }
.tabs button:hover { color: var(--text-primary); background: var(--bg-hover); }
.tabs button[aria-selected="true"] { color: var(--text-primary); border-bottom-color: var(--accent); }
.tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tabsbar { position: sticky; top: 0; z-index: 20; background: var(--bg-panel); border-bottom: 1px solid var(--border); }
.top { border-bottom: 0; display: flow-root; }
.eyebrow span { white-space: nowrap; }

main { padding: 28px 0 60px; }
section.tab { display: none; }
section.tab.on { display: block; }
.sec { margin: 34px 0 0; }
.sec:first-child { margin-top: 0; }
.sec > h2 { font-size: 21px; letter-spacing: -.01em; margin-bottom: 4px; }
.sec > .sub { color: var(--text-secondary); margin: 0 0 14px; max-width: 820px; }
h3 { font-size: 16px; margin: 18px 0 6px; }

.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); } }

.card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius-panel); padding: 16px 18px; min-width: 0; }
.card h3 { margin-top: 0; }
.card .k { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); font-weight: 650; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.card.accent { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 5%, var(--bg-panel)); }
.num { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
.muted { color: var(--text-secondary); }
.small { font-size: 13px; }

.callout { border-left: 3px solid var(--accent); background: var(--accent-soft); padding: 12px 16px; border-radius: 0 10px 10px 0; margin: 14px 0; }
.callout.warn { border-left-color: var(--warn); background: var(--warn-soft); }
.callout.ok { border-left-color: var(--ok); background: var(--ok-soft); }
.callout p:first-child { margin-top: 0; } .callout p:last-child { margin-bottom: 0; }

.chip { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--bg-hover); color: var(--text-secondary); white-space: nowrap; vertical-align: 1px; }
.chip.v { background: var(--ok-soft); color: var(--ok); }
.chip.s { background: var(--accent-soft); color: var(--accent); }
.chip.i { background: var(--warn-soft); color: var(--warn-ink); }
.chip.no { background: var(--danger-soft); color: var(--danger-ink); }
.chip.rec { background: var(--accent-fill); color: var(--on-accent); }

table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; vertical-align: top; padding: 10px 10px; border-bottom: 1px solid var(--border); }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); font-weight: 650; background: var(--bg-panel); }
tbody tr:hover { background: color-mix(in srgb, var(--bg-hover) 55%, transparent); }
.tbl { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-panel); background: var(--bg-elevated); }
.tbl table th:first-child, .tbl table td:first-child { padding-left: 14px; }
.tbl table tr:last-child td { border-bottom: 0; }
td.nowrap, th.nowrap { white-space: nowrap; }

/* Four jobs */
.job { display: flex; flex-direction: column; gap: 6px; }
.job .ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.job h3 { margin: 6px 0 0; font-size: 16px; }
.job p { margin: 0; color: var(--text-secondary); font-size: 14px; }
.job .eg { margin-top: 6px; font-size: 13px; background: var(--bg-base); border-radius: 8px; padding: 8px 10px; color: var(--text-primary); }

/* Decisions */
.dec { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 4px 14px; padding: 16px 18px; }
.dec .id { font: 700 15px var(--mono); color: var(--accent); padding-top: 2px; }
.dec h3 { margin: 0 0 4px; font-size: 16px; }
.dec .opts { display: grid; gap: 6px; margin-top: 8px; }
.dec .opt { display: flex; gap: 8px; align-items: baseline; font-size: 14px; }
.dec .opt .chip { flex: none; }
.dec .why { margin-top: 8px; font-size: 13.5px; color: var(--text-secondary); }

/* Phases */
.phases { display: grid; gap: 12px; }
.phase { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 14px; }
.phase .pid { font: 800 15px var(--mono); color: var(--accent); text-align: right; padding-top: 16px; }
.phase .card h3 { margin: 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
@media (max-width: 620px) { .phase { grid-template-columns: minmax(0, 1fr); } .phase .pid { text-align: left; padding: 0; } }

/* Layer diagram */
.layers { display: grid; gap: 10px; }
.layer { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; align-items: stretch; }
.layer .lname { font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); padding: 12px 0; }
.layer .lbody { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; border: 1px dashed var(--border-strong); border-radius: 12px; background: var(--bg-panel); }
.layer.core .lbody { border-style: solid; border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: color-mix(in srgb, var(--accent) 6%, var(--bg-panel)); }
.box { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 9px; padding: 8px 11px; font-size: 13px; line-height: 1.35; min-width: 120px; flex: 1 1 150px; }
.box b { display: block; font-size: 13.5px; margin-bottom: 2px; }
.box .muted { font-size: 12px; }
.box.new { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); }
.box.new b::after { content: "novo"; margin-left: 6px; font-size: 10.5px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .05em; }
.box.reuse b::after { content: "já existe"; margin-left: 6px; font-size: 10.5px; font-weight: 700; color: var(--ok); text-transform: uppercase; letter-spacing: .05em; }
.arrowdown { text-align: center; color: var(--text-secondary); font-size: 13px; margin: -2px 0; }
@media (max-width: 720px) { .layer { grid-template-columns: minmax(0, 1fr); } .layer .lname { padding: 4px 0 0; } }

/* Reference cards */
.ref { display: flex; flex-direction: column; gap: 6px; }
.ref .hd { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.ref h3 { margin: 0; font-size: 16px; }
.ref .what { font-size: 14px; }
.ref .adapt { font-size: 13.5px; background: var(--ok-soft); border-radius: 8px; padding: 8px 10px; }
.ref .avoid { font-size: 13.5px; background: var(--danger-soft); border-radius: 8px; padding: 8px 10px; }
.ref .adapt b, .ref .avoid b { display: block; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 2px; }
.ref .src { font-size: 12.5px; color: var(--text-secondary); }

.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--text-secondary); margin: 6px 0 16px; }
.legend span { display: inline-flex; gap: 6px; align-items: center; }

footer.foot { border-top: 1px solid var(--border); margin-top: 40px; padding-top: 16px; font-size: 13px; color: var(--text-secondary); }

.sources ol { padding-left: 1.4em; }
.sources li { margin: .45em 0; font-size: 14px; overflow-wrap: anywhere; }

/* Bars (relative effort) */
.bar { height: 8px; border-radius: 999px; background: var(--bg-hover); overflow: hidden; margin-top: 8px; }
.bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }

details.more { margin-top: 10px; }
details.more summary { cursor: pointer; font-weight: 650; color: var(--accent); }

@media (max-width: 620px) {
  .wrap { padding: 0 16px; }
  .title-row h1 { font-size: 24px; }
  .lede { font-size: 15px; }
  .card { padding: 14px; }
  th, td { padding: 8px; }
}

@media (prefers-reduced-motion: reduce) { #hero-mc .mc * { animation: none !important; } }

/* Tabs that do not fit fade out at the right edge instead of being cut. */
@media (max-width: 720px) {
  .tabs { mask-image: linear-gradient(to right, #000 82%, transparent); -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); padding-right: 40px; }
}
.sbtn { height: var(--ctl-h); padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius-ctl); background: var(--bg-elevated); color: var(--text-primary); font: 600 13px var(--sans); cursor: pointer; }
.sbtn:hover { border-color: var(--border-strong); }
.sbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

@media (max-width: 620px) {
  .dec { grid-template-columns: minmax(0, 1fr); }
  .dec .id { padding: 0; }
  .dec .opt { flex-direction: column; gap: 4px; }
}
/* 8 a table that scrolls says so with a fade at the edge it can scroll to */
@media (max-width: 760px) {
  .tbl.scrolls:not(.end) { mask-image: linear-gradient(to right, #000 86%, transparent); -webkit-mask-image: linear-gradient(to right, #000 86%, transparent); }
}
/* 12 card titles carry the hierarchy */
.card h3.ct { font-size: 15.5px; margin: 0 0 4px; line-height: 1.3; }
/* 14 two-column list starts level */
ul.cols2 li { margin: 0 0 .65em; }
/* 15 measure */
.callout, footer.foot p, .sec > .sub, .phase .card p, .dec .why, .dec .opt span { max-width: 84ch; }
/* 16 reference cards: neutral boxes with a rule, sources at the bottom */
.ref .adapt, .ref .avoid { background: var(--bg-base); border-left: 3px solid var(--ok); border-radius: 0 8px 8px 0; }
.ref .avoid { border-left-color: var(--danger); }
.ref .adapt b { color: var(--ok); } .ref .avoid b { color: var(--danger-ink); }
.ref .src { margin-top: auto; padding: 4px 0 0; }
/* 17 examples line up */
.job .eg { margin-top: auto; }
/* effort chips in the plan */
.eff { display: inline-flex; gap: 6px; align-items: center; margin-top: 8px; font-size: 12.5px; color: var(--text-secondary); }
/* 19 arrows sit under the layer column */
.arrowdown { text-align: left; padding-left: 182px; }
@media (max-width: 720px) { .arrowdown { padding-left: 0; } }
/* inline mascot mark in prose */
.imc { display: inline-block; vertical-align: -3px; margin: 0 2px; }
.imc svg { display: block; }

.job p { margin-bottom: 16px; }
.ref .src { padding-top: 12px; }
section.tab { min-height: 70vh; }
/* effort scale: four dots */
.dots { display: inline-flex; gap: 3px; vertical-align: 1px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.dots i.on { background: var(--accent); }

.ref { padding-bottom: 16px; }
.ref .adapt { margin-top: auto; }
.ref .src { margin-top: 0; }
@media (max-width: 760px) {
  .tbl.scrolls.scrolled:not(.end) { mask-image: linear-gradient(to right, transparent, #000 10%, #000 86%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 86%, transparent); }
  .tbl.scrolls.scrolled.end { mask-image: linear-gradient(to right, transparent, #000 12%); -webkit-mask-image: linear-gradient(to right, transparent, #000 12%); }
}