/* Layout for the long-form macro playbook. Loads after brief.css and memo.css and
   only adds what a multi-part document with dense tables needs. */
:root{--pb-accent:#e0793f;--pb-rule:#2a2e33;--pb-soft:#9aa1a9;--pb-panel:#181b1e}

/* Document furniture */
.meta-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;border-block:1px solid var(--pb-rule);padding:20px 0;margin:26px 0}
.meta-strip div{min-width:0}
.meta-strip dt{font:11px/1.6 Consolas,monospace;letter-spacing:.08em;color:var(--pb-soft);margin:0 0 6px}
.meta-strip dd{margin:0;font-size:15px;line-height:1.6;color:#e6e7e9}

.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;margin:30px 0;padding-top:26px;border-top:1px solid var(--pb-rule)}
.tiles article{min-width:0}
.tiles strong{display:block;font:34px/1.1 Georgia,serif;color:#f2f3f4;font-weight:400}
.tiles strong small{font-size:16px;color:var(--pb-soft)}
.tiles h3{font:11px/1.5 Consolas,monospace;letter-spacing:.08em;color:var(--pb-accent);margin:12px 0 8px;text-transform:uppercase}
.tiles p{font-size:13.5px;line-height:1.7;margin:0;color:#aeb4bb}

.part{margin-top:46px;padding-top:12px;border-top:2px solid #3a3f45}
.part>.eyebrow{display:block;font:11px/1.6 Consolas,monospace;letter-spacing:.1em;color:var(--pb-accent);margin-bottom:10px}
.part>h2{margin-top:0}
h4{font:15px Georgia,serif;margin:26px 0 10px;color:#e6e7e9}

/* Tables scroll inside their own box so the page body never scrolls sideways. */
.tw{overflow-x:auto;margin:18px 0;-webkit-overflow-scrolling:touch}
table.pb{border-collapse:collapse;width:100%;min-width:620px;font-size:13.5px}
table.pb caption{text-align:left;font:11px/1.6 Consolas,monospace;letter-spacing:.08em;color:var(--pb-soft);padding-bottom:10px}
table.pb th,table.pb td{text-align:left;vertical-align:top;padding:11px 14px 11px 0;border-bottom:1px solid var(--pb-rule);line-height:1.6}
table.pb thead th{font:11px/1.6 Consolas,monospace;letter-spacing:.07em;color:var(--pb-soft);text-transform:uppercase;border-bottom:1px solid #4a5057;white-space:nowrap}
table.pb tbody th{color:#e6e7e9;font-weight:700;white-space:nowrap}
table.pb td{color:#b9bfc6}
table.pb tbody tr:last-child th,table.pb tbody tr:last-child td{border-bottom:0}
table.pb .num{font-variant-numeric:tabular-nums}
.step{color:var(--pb-accent);font:700 14px Consolas,monospace}

/* Status vocabulary carried over from the source tables. */
.status{font:11px/1.5 Consolas,monospace;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.status.observed{color:#e6e7e9;font-weight:700}
.status.developing{color:var(--pb-accent);font-weight:700}
.status.unconfirmed,.status.absent{color:#7f868e}
.flag{display:inline-block;border:1px solid var(--pb-accent);color:var(--pb-accent);font:10px/1.4 Consolas,monospace;letter-spacing:.06em;padding:2px 6px;text-transform:uppercase}

.note{font-size:13px;line-height:1.75;color:#9aa1a9;margin:14px 0 0}
.callout{background:var(--pb-panel);border-left:2px solid var(--pb-accent);padding:20px 24px;margin:24px 0}
.callout p{margin:0;font-size:15px}
.callout p+p{margin-top:12px}

.phases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin:26px 0}
.phases article{min-width:0;border-top:1px solid var(--pb-rule);padding-top:16px}
.phases .eyebrow{display:block;font:11px/1.5 Consolas,monospace;letter-spacing:.08em;color:var(--pb-accent);margin-bottom:8px}
.phases h3{margin:0 0 10px}
.phases p{font-size:13.5px;margin:0}

/* Charts are drawn from values quoted in the source text, not a live feed. */
figure.chart{margin:24px 0;border-top:1px solid var(--pb-rule);padding-top:18px}
figure.chart h3{font:11px/1.5 Consolas,monospace;letter-spacing:.08em;color:var(--pb-accent);margin:0 0 4px;text-transform:uppercase}
figure.chart p.chart-title{font:17px Georgia,serif;color:#e6e7e9;margin:0 0 14px}
figure.chart svg{width:100%;height:auto;display:block;overflow:visible}
figure.chart figcaption{font-size:12.5px;line-height:1.7;color:#8b9198;margin-top:12px}
.chart-line{fill:none;stroke:var(--pb-accent);stroke-width:2}
.chart-dot{fill:var(--pb-accent)}
.chart-bar{fill:#4c545c}
.chart-bar.last{fill:var(--pb-accent)}
.chart-axis{stroke:#3a3f45;stroke-width:1}
.chart-grid{stroke:#24282c;stroke-width:1}
.chart-text{fill:#8b9198;font:11px Arial,sans-serif}
.chart-value{fill:#c9cfd5;font:11px Arial,sans-serif}

@media (max-width:900px){
 .meta-strip,.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
 .phases{grid-template-columns:minmax(0,1fr);gap:20px}
}
@media (max-width:650px){
 .meta-strip,.tiles{grid-template-columns:minmax(0,1fr)}
 .tiles strong{font-size:30px}
}

@media print{
 :root{--pb-rule:#c4c4c4;--pb-soft:#555;--pb-panel:#f1f1ef}
 .meta-strip dd,.tiles strong,h4,table.pb tbody th{color:#111}
 .tiles h3,.part>.eyebrow,figure.chart h3,.phases .eyebrow{color:#a84a1e}
 .tiles p,table.pb td,.note,figure.chart figcaption{color:#3a3a3a}
 .meta-strip dt,table.pb thead th,table.pb caption{color:#555}
 .tiles strong{font-size:22px}
 .meta-strip,.tiles{padding:12px 0;margin:14px 0;gap:14px}
 .part{margin-top:22px;border-top:1.5px solid #888;page-break-before:always}
 .part:first-of-type{page-break-before:avoid}
 table.pb{font-size:9px;min-width:0}
 table.pb th,table.pb td{padding:6px 9px 6px 0}
 table.pb thead{display:table-header-group}
 table.pb tr{break-inside:avoid}
 .tw{overflow-x:visible}
 .callout{background:#f1f1ef;padding:12px 15px}
 .callout p{font-size:10px}
 .status.developing,.flag,.step{color:#a84a1e}
 .status.unconfirmed,.status.absent{color:#666}
 figure.chart,.phases article,.tiles article{break-inside:avoid}
 .chart-line{stroke:#a84a1e}
 .chart-dot{fill:#a84a1e}
 .chart-bar{fill:#999}
 .chart-bar.last{fill:#a84a1e}
 .chart-text,.chart-value{fill:#555}
}