/* Local clay semantics follow guides/show; colors always come from tokens. */
.bp-page {
  --gd-accent: var(--color-clay-500);
  --gd-accent-strong: var(--color-clay-700);
  --gd-on-accent: var(--color-clay-100);
  --gd-tint: var(--color-clay-50);
  --gd-tint-line: var(--color-clay-200);
  width: 100%; max-width: 72rem; min-width: 0; margin: 0 auto; padding: 1rem;
  color: var(--text-body); background: var(--surface-body);
  word-break: keep-all; overflow-wrap: break-word; text-wrap: pretty; line-height: 1.85;
}
.dark .bp-page {
  --gd-accent: var(--color-clay-400);
  --gd-accent-strong: var(--color-clay-300);
  --gd-on-accent: var(--text-inverse);
  --gd-tint: var(--surface-muted);
  --gd-tint-line: var(--border-card);
}
.bp-page *, .bp-page { box-sizing: border-box; }
.bp-page h1, .bp-page h2, .bp-page h3 { text-wrap: balance; color: var(--text-heading); font-weight: 700; line-height: 1.4; margin: 0 0 1rem; }
.bp-page h1 { font-size: clamp(1.8rem, 5vw, 3rem); }
.bp-page h2 { font-size: 1.4rem; }
.bp-page h3 { font-size: 1.1rem; }
.bp-page p { margin: .75rem 0; }
.bp-page a { color: var(--gd-accent-strong); text-decoration: underline; text-underline-offset: .2em; }
.bp-page a:focus-visible, .bp-page button:focus-visible, .bp-page textarea:focus-visible, .bt-scroll:focus-visible { outline: 2px solid var(--gd-accent-strong); outline-offset: 3px; }
.bp-nav { display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; padding: 1rem 0; }
.bp-hero { padding: clamp(1rem, 4vw, 3rem); border-radius: 1rem; background: var(--gd-tint); border: 1px solid var(--gd-tint-line); }
.bp-section { margin: 2.5rem 0; min-width: 0; }
.bp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
.bp-card { display: block; min-width: 0; padding: 1.25rem; background: var(--surface-card); border: 1px solid var(--border-card); border-radius: 1rem; }
.bp-page .bp-card { text-decoration: none; }
.bp-page dt { font-weight: 700; color: var(--text-heading); margin-top: 1.5rem; }
.bp-page dd { margin: .5rem 0; }
.bp-page .bp-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .65rem 1rem; border-radius: .65rem; border: 1px solid var(--gd-accent); background: var(--gd-accent); color: var(--gd-on-accent); text-decoration: none; cursor: pointer; font: inherit; }
.bp-page button:disabled { opacity: .6; cursor: not-allowed; }
.bp-page textarea { display: block; width: 100%; max-width: 100%; margin: .5rem 0; padding: .75rem; border: 1px solid var(--border-card); border-radius: .5rem; color: var(--text-body); background: var(--surface-card); font: inherit; resize: vertical; }
.bt-scroll { max-width: 100%; min-width: 0; overflow-x: auto; padding: .75rem 0; }
.bt-tree { display: flex; gap: 1.25rem; min-width: max-content; align-items: stretch; }
.bt-round { display: flex; flex-direction: column; justify-content: space-around; gap: .75rem; width: 11rem; flex-shrink: 0; }
.bt-match { position: relative; border: 1px solid var(--border-card); border-radius: .4rem; background: var(--surface-card); padding: .4rem; font-size: .85rem; }
.bt-match::after { content: ""; position: absolute; width: 1.25rem; border-top: 1px solid var(--border-card); top: 50%; left: 100%; }
.bt-round:last-child .bt-match::after { content: none; }
.bt-match strong { display: block; font-size: .7rem; color: var(--text-muted); }
.bt-slot { min-height: 1.8rem; padding: .2rem; border-bottom: 1px solid var(--border-subtle); overflow-wrap: anywhere; }
.bt-status { color: var(--text-muted); }
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  body:has(#bracket-template-page) > :not(main),
  body:has(#bracket-template-page) main > :not(#bracket-template-page),
  #bracket-template-page > :not(.bt-print-sheet),
  #bracket-template-page .bt-controls { display: none !important; }
  #bracket-template-page {
    --text-body: var(--color-clay-900);
    --text-heading: var(--color-clay-900);
    --text-muted: var(--color-clay-700);
    --surface-body: var(--color-clay-50);
    --surface-card: var(--color-clay-50);
    --border-card: var(--color-clay-500);
    --border-subtle: var(--color-clay-200);
    max-width: none; padding: 0; margin: 0;
  }
  #bracket-template-page .bt-print-sheet { margin: 0; }
  #bracket-template-page h2 { font-size: 14pt; margin-bottom: 4mm; }
  #bracket-template-page .bt-scroll { overflow: visible; padding: 0; }
  #bracket-template-page .bt-tree { min-width: 0; width: 100%; gap: 4mm; }
  #bracket-template-page .bt-round { width: 0; flex: 1; min-width: 0; gap: 1mm; }
  #bracket-template-page .bt-match { padding: .5mm; font-size: 7pt; break-inside: avoid; }
  #bracket-template-page .bt-match strong { font-size: 5pt; line-height: 1.1; }
  #bracket-template-page .bt-match::after { width: 4mm; }
  #bracket-template-page .bt-slot { min-height: 3mm; padding: 0; line-height: 1.1; }
}