/*
 * Monthly board pack (#3227): one A4 page in the organisation's brand.
 * Brand values arrive as --brand-* custom properties from Decks::Theme
 * (the same ones the deck engine uses), via deck_theme_tag.
 */

.bp-sheet {
  page: board-pack;
  --bp-rule: color-mix(in srgb, var(--brand-text) 16%, transparent);
  --bp-soft: color-mix(in srgb, var(--brand-text) 68%, var(--brand-bg));
  position: relative;
  max-width: 210mm; margin: 0 auto;
  padding: 11mm 13mm 9mm;
  background: var(--brand-bg); color: var(--brand-text);
  font-family: var(--brand-body-font); font-size: 9.5pt; line-height: 1.4;
  border-radius: var(--brand-radius);
  box-shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 12px 32px -12px rgb(0 0 0 / 18%);
}
.bp-sheet h1, .bp-sheet h2, .bp-sheet h3 { font-family: var(--brand-heading-font); color: var(--brand-text); margin: 0; }

.bp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 6mm; padding-bottom: 3mm; border-bottom: 2px solid var(--brand-accent); }
.bp-logo { display: inline-flex; align-items: center; gap: 2.5mm; font-family: var(--brand-heading-font); font-weight: 700; font-size: 13pt; color: var(--brand-accent); }
.bp-logo img { height: 10mm; width: auto; max-width: 55mm; object-fit: contain; }
.bp-logo .dk-logo-mark { width: 6mm; height: 6mm; border-radius: calc(var(--brand-radius) / 2); background: var(--brand-accent); display: inline-block; }
.bp-meta { text-align: right; }
.bp-eyebrow { font-size: 7.5pt; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-accent); }
.bp-meta h1 { font-size: 16pt; font-weight: 700; line-height: 1.15; margin-top: 1mm; }
.bp-meta p { margin: 0.5mm 0 0; color: var(--bp-soft); font-size: 8.5pt; }

.bp-headline { display: grid; grid-template-columns: auto 1fr; gap: 6mm; align-items: center; margin-top: 4mm; padding: 4mm 5mm; background: var(--brand-surface); border-radius: var(--brand-radius); border-left: 5px solid var(--brand-accent); }
.bp-big { font-family: var(--brand-heading-font); font-size: 34pt; font-weight: 700; line-height: 1; color: var(--brand-accent); font-variant-numeric: tabular-nums; }
.bp-big small { display: block; margin-top: 1.5mm; font-family: var(--brand-body-font); font-size: 8.5pt; font-weight: 600; color: var(--brand-text); }
.bp-headline h2 { font-size: 12.5pt; font-weight: 700; line-height: 1.25; }
.bp-headline p { margin: 1mm 0 0; color: var(--bp-soft); font-size: 8.5pt; }
.bp-headline blockquote { margin: 2mm 0 0; padding-left: 3mm; border-left: 2px solid var(--bp-rule); font-style: italic; color: var(--brand-text); }

.bp-badge { display: inline-flex; align-items: center; gap: 1mm; border-radius: 999px; padding: 0.3mm 2mm; font-family: var(--brand-body-font); font-size: 6.5pt; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--bp-rule); color: var(--bp-soft); vertical-align: middle; white-space: nowrap; }
.bp-badge-timed { border-color: var(--brand-accent); color: var(--brand-accent); }
.bp-badge-example { background: #c4501b; border-color: #c4501b; color: #fff; }

.bp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3mm; margin: 3mm 0 0; }
.bp-stat { padding: 2.5mm 3mm; border: 1px solid var(--bp-rule); border-radius: var(--brand-radius); }
.bp-stat dt { font-size: 7pt; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bp-soft); }
.bp-stat dd { margin: 0.5mm 0 0; font-family: var(--brand-heading-font); font-size: 16pt; font-weight: 700; font-variant-numeric: tabular-nums; }
.bp-stat dd span { font-family: var(--brand-body-font); font-size: 8pt; font-weight: 500; color: var(--bp-soft); }

.bp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3mm 7mm; margin-top: 4mm; }
.bp-section h2 { font-size: 10.5pt; font-weight: 700; padding-bottom: 1mm; margin-bottom: 1.5mm; border-bottom: 1px solid var(--bp-rule); }
.bp-section p { margin: 0 0 1mm; }
.bp-section ul { margin: 0; padding-left: 4mm; list-style: disc; }
.bp-section li { margin: 0 0 0.8mm; }
.bp-section li::marker { color: var(--brand-accent); }
.bp-muted { color: var(--bp-soft); }
.bp-lines { margin: 0; }
.bp-lines div { display: flex; justify-content: space-between; gap: 3mm; padding: 0.3mm 0; }
.bp-lines dt { color: var(--bp-soft); }
.bp-lines dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }

.bp-table { width: 100%; border-collapse: collapse; font-size: 8.5pt; }
.bp-table th { text-align: left; font-size: 6.5pt; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bp-soft); padding: 0.8mm 1.5mm; border-bottom: 1px solid var(--bp-rule); white-space: nowrap; }
.bp-table td { padding: 1mm 1.5mm; border-bottom: 1px solid var(--bp-rule); vertical-align: top; }
.bp-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bp-table .src { white-space: nowrap; }

.bp-asks { margin-top: 4mm; display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 4mm; }
.bp-ask-box { padding: 3.5mm 4mm; border-radius: var(--brand-radius); background: var(--brand-accent); color: var(--brand-on-accent); }
.bp-ask-box h2 { color: var(--brand-on-accent); border-bottom-color: color-mix(in srgb, var(--brand-on-accent) 35%, transparent); }
.bp-ask-box li::marker { color: var(--brand-on-accent); }
.bp-ask-box .bp-muted { color: color-mix(in srgb, var(--brand-on-accent) 75%, transparent); }

.bp-foot { display: flex; justify-content: space-between; gap: 4mm; margin-top: 5mm; padding-top: 2mm; border-top: 1px solid var(--bp-rule); font-size: 7pt; color: var(--bp-soft); }

.bp-example-ribbon { position: absolute; top: 3mm; left: 50%; transform: translateX(-50%); }

@page board-pack { size: A4 portrait; margin: 0; }

@media print {
  .bp-toolbar, .bp-toolbar * { display: none !important; }
  body.bp-body { background: #fff !important; }
  .bp-sheet { box-shadow: none; border-radius: 0; max-width: none; width: 210mm; min-height: 296mm; margin: 0; padding: 11mm 13mm 9mm; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .bp-sheet a { color: inherit; text-decoration: none; }
}

@media (max-width: 720px) {
  .bp-sheet { padding: 8mm 6mm; }
  .bp-headline, .bp-grid, .bp-asks { grid-template-columns: 1fr; }
  .bp-stats { grid-template-columns: repeat(2, 1fr); }
}