/* BABOOM Office Design System: A4 guide kit (PDF guides: standard guide, family guide, AI guide, DS guide).
   render_guide.py injects tokens.css + this file at the BBM_GUIDE_STYLE (or older FAMILY_GUIDE_STYLE) comment of a guide source.
   Never write a comment marker or a placeholder name inside this file: it would end this comment or be replaced again. */
/* shortcut: aliases for guide sources written before the DS (var(--navy) etc.); drop when every source uses --ba-* names */
:root{--navy:var(--ba-accent);--navy2:var(--ba-ink);--red:var(--ba-accent);--ink:var(--ba-ink);--mute:var(--ba-mute);--line:var(--ba-line);--tint:var(--ba-surface-2)}
@page{size:A4;margin:14mm 15mm 14mm 15mm}
*{box-sizing:border-box}
html,body{margin:0;background:#fff;color:var(--ba-ink);font:var(--ba-pfs-md)/1.45 var(--ba-sans)}
a{color:var(--ba-accent)}
.page{page-break-after:always;position:relative;height:268mm;overflow:hidden}
.page:last-child{page-break-after:auto}
/* page head: logo, 1px accent divider, title; 2.5pt accent rule */
.top{display:flex;align-items:center;gap:14px;border-bottom:2.5pt solid var(--ba-accent);padding-bottom:7pt;margin-bottom:10pt}
.top img{height:18mm;width:auto}/* 26mm wide: above the 25mm print minimum */
.top .t{flex:1;border-left:var(--ba-divider) solid var(--ba-accent);padding-left:12px}
.top h1{margin:0;font-size:var(--ba-pfs-xl);color:var(--ba-ink);white-space:nowrap}
.top p{margin:1pt 0 0;color:var(--ba-mute);font-size:8pt}
.top .ref{text-align:right;font-size:var(--ba-pfs-xs);color:var(--ba-mute);line-height:1.5}
.top .ref b{color:var(--ba-accent)}
h2{font-size:var(--ba-pfs-lg);color:var(--ba-ink);margin:11pt 0 5pt;display:flex;align-items:center;gap:7px;break-after:avoid}
h2 i{font-style:normal;background:var(--ba-accent);color:var(--ba-on-accent);width:17pt;height:17pt;border-radius:var(--ba-radius);display:inline-flex;align-items:center;justify-content:center;font-size:8.5pt}
h3{font-size:9.6pt;color:var(--ba-ink);margin:6pt 0 3pt}
p{margin:0 0 5pt}
code,.mono{font-family:var(--ba-mono);font-size:8.8pt}
.lead{font-size:10pt;border-left:3pt solid var(--ba-accent);padding:5pt 9pt;background:var(--ba-bg);margin-bottom:6pt}
.cols{display:flex;gap:14pt}
.cols>div{flex:1}
.tree{font-family:var(--ba-mono);font-size:8.3pt;background:var(--ba-surface-2);border-radius:var(--ba-radius);padding:7pt 9pt;line-height:1.55;white-space:pre}
.tree b{color:var(--ba-ink)}
.tree em{font-style:normal;color:var(--ba-mute)}
.steps{display:flex;gap:6pt;margin:4pt 0 4pt}
.step{flex:1;border:1px solid var(--ba-line);border-top:3pt solid var(--ba-ink-2);border-radius:var(--ba-radius-chip);padding:6pt 7pt;font-size:var(--ba-pfs-sm);position:relative}
.step b{display:block;color:var(--ba-ink);font-size:9pt;margin-bottom:2pt}
.step .n{position:absolute;top:4pt;right:6pt;color:var(--ba-accent);font-weight:bold;font-size:15pt;opacity:.35}
.arrow .step:not(:last-child)::after{content:"";position:absolute;right:-7pt;top:50%;border:4pt solid transparent;border-left:5pt solid var(--ba-ink-2)}
.name{display:flex;justify-content:center;gap:3pt;margin:7pt 0 3pt;font-family:var(--ba-mono);font-size:13pt}
.name span{padding:3pt 7pt;border-radius:var(--ba-radius-chip);background:var(--ba-surface-2);color:var(--ba-ink);text-align:center}
.name span small{display:block;font-family:var(--ba-sans);font-size:6.8pt;color:var(--ba-mute);margin-top:2pt}
.name span.k{background:var(--ba-ink-2);color:var(--ba-on-accent)}.name span.k small{color:var(--ba-on-accent)}
.name span.v{background:var(--ba-accent);color:var(--ba-on-accent)}.name span.v small{color:var(--ba-on-accent)}
table{width:100%;border-collapse:collapse;font-size:8pt}
th{background:var(--ba-ink-2);color:var(--ba-on-accent);text-align:left;padding:3pt 5pt;font-weight:bold}
td{padding:2.6pt 5pt;border-bottom:1px solid var(--ba-line)}
td:first-child{font-family:var(--ba-mono);font-weight:bold;color:var(--ba-ink);white-space:nowrap}
td.n{text-align:right;color:var(--ba-mute);white-space:nowrap}
.box{border:1px solid var(--ba-line);border-radius:var(--ba-radius);padding:6pt 9pt}
.do{border-left:3pt solid var(--ba-ok)}.dont{border-left:3pt solid var(--ba-accent)}
.box h3{margin:0 0 3pt;font-size:9pt}
.do h3{color:var(--ba-ok)}.dont h3{color:var(--ba-accent)}
.box ul{margin:0;padding-left:13pt}.box li{margin:1.5pt 0}
.foot{position:absolute;bottom:0;left:0;right:0;font-size:7pt;color:var(--ba-mute);border-top:1px solid var(--ba-line);padding-top:3pt;display:flex;justify-content:space-between}
.shot{border:1px solid var(--ba-line);border-radius:var(--ba-radius);width:100%;height:66mm;object-fit:cover;object-position:top;display:block}
.cap{font-size:var(--ba-pfs-xs);color:var(--ba-mute);margin-top:2pt}