/* affine.io/baseline (Jacob 2026-11-02): site tile frame + k1-chart look (gridlines, mono labels), like the bench cards (b969182). */
.baseline-page{display:flex;flex-direction:column;gap:16px;padding:28px 0 36px}
.bl-intro{max-width:800px}
.bl-intro h1{margin:0 0 14px}
.bl-intro p{margin:0 0 12px;font:15px/1.65 Haffer,Arial,sans-serif;color:var(--ink)}
.bl-intro .bl-stats{margin:0;font:11px/1.6 var(--mono);color:var(--muted)}
.bl-tile{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;padding:12px 14px;border:1px solid var(--line);border-radius:4px;background:var(--bg)}
.baseline-page>section+section{border-top:1px solid var(--line)}
.bl-tile>.section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0;height:22px;overflow:hidden;white-space:nowrap}
.bl-tile h2,.bl-tile .reading{font:400 15px/22px Haffer,Arial,sans-serif;letter-spacing:-.035em;color:var(--ink)}
.bl-tile h2{overflow:hidden;text-overflow:ellipsis;min-width:0}
.bl-tile .reading{min-width:0;flex-shrink:0;text-align:right}
.bl-chart.chart-wrap{height:280px;min-width:0;overflow:visible}
.bl-chart svg{width:100%;height:100%;display:block;overflow:visible}
.bl-chart .chart-tip{z-index:5;min-width:170px}
.bl-tile .legend{font:10px/16px var(--mono);gap:10px;margin:0}
.bl-swatch-dash{background:none!important;border-top:1px dashed var(--guide);height:0!important;width:12px!important}
.bl-swatch-guide{background:none!important;border-left:1px dashed var(--axis);height:10px!important;width:1px!important}
.bl-chart .bl-guide{stroke:var(--axis);stroke-width:1;stroke-dasharray:3 3}
.bl-chart .bl-uniform{stroke:var(--guide);stroke-width:1;stroke-dasharray:4 3}
.bl-note{margin:0;max-width:800px;font:11px/1.6 var(--mono);color:var(--muted)}
footer #bl-updated{font:10px/1.6 var(--mono);color:var(--muted)}
.theme-toggle{flex:none}
@media(max-width:700px){.baseline-page{padding:20px 0 28px}.bl-intro p{font-size:14px}.bl-chart.chart-wrap{height:220px}.bl-tile{padding:10px 12px}}
/* v2 (Jacob pt1059u): How the draw works - HTML math in the page's own type (Haffer, italic variables), no external math library. */
.bl-intro a,.bl-how p a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--guide)}
.bl-ov{border-top:1px solid currentColor;padding:2px 2px 0 3px;margin-left:1px}
.bl-how{gap:12px;padding-bottom:16px}
.bl-how .bl-code{font:11px/22px var(--mono);color:var(--muted);display:inline-flex;align-items:center;gap:6px;flex-shrink:0}
@media(hover:hover){.bl-how .bl-code:hover{color:var(--ink)}}
.bl-how p,.bl-how li{margin:0;max-width:820px;font:15px/1.65 Haffer,Arial,sans-serif;color:var(--ink)}
.bl-how var{font-style:italic;font-family:Haffer,Arial,sans-serif;padding-right:.12em}
.bl-how var+sub{margin-left:-.06em}
.bl-k{font:.82em var(--mono);color:var(--ink);letter-spacing:0}
.bl-how sub,.bl-how sup,.bl-intro sub{font-size:.68em;line-height:0}
.bl-eq{overflow-x:auto;overflow-y:hidden;padding:12px 16px;border:1px solid var(--line);border-radius:4px;background:var(--surface);font:18px/1.6 Haffer,Arial,sans-serif;color:var(--ink);white-space:nowrap;max-width:100%}
.bl-frac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;margin:0 2px;font-size:.88em;line-height:1.35}
.bl-frac>span:first-child{border-bottom:1px solid currentColor;padding:0 4px 1px}
.bl-frac>span:last-child{padding:1px 4px 0}
.bl-br{font-size:1.7em;font-weight:300;color:var(--muted);vertical-align:-.08em;margin:0 2px}
.bl-knobs{display:flex;flex-direction:column;gap:8px;margin:0;padding-left:20px}
.bl-knobs li::marker{color:var(--muted)}
.bl-knobs code{font:12px var(--mono);color:var(--ink);padding:1px 5px;border-radius:3px;background:var(--control);white-space:nowrap}
@media(max-width:700px){.bl-how p,.bl-how li{font-size:14px}.bl-eq{font-size:15px;padding:10px 12px}.bl-how>.section-heading{height:auto;flex-wrap:wrap}}
/* pt1080u: IRT overlay (proposed, not live) - dashed --accepted accent, own legend swatch, right-axis ticks for a/median */
.bl-swatch-prev{background:none!important;border-top:2px dashed var(--muted);height:0!important;width:14px!important}
.bl-swatch-irt{background:none!important;border-top:2px dashed var(--accepted);height:0!important;width:14px!important}
.bl-swatch-irt.bl-swatch-dot{border-top-style:dotted}
.bl-chart text.bl-rtick{fill:var(--accepted)}
.bl-how p.bl-irt-only{padding-top:4px;border-top:1px solid var(--line)}
.bl-how p.bl-irt-only strong{font-weight:400;color:var(--accepted)}