#tb-app { min-width: 0; }
#tb-app [hidden] { display: none !important; }
#tb-app input, #tb-app textarea, #tb-app select { max-width: 100%; box-sizing: border-box; background: var(--surface); color: var(--fg); border: 1px solid var(--border); }
#tb-app textarea { width: 100%; min-height: 12rem; resize: vertical; }
#tb-app input, #tb-app textarea, #tb-app select { font: inherit; padding: .6rem; border-radius: .4rem; }
#tb-title { width: min(100%, 32rem); }
.tb-actions button, #tb-confirm button { border: 1px solid var(--border); border-radius: .4rem; padding: .6rem .9rem; font: inherit; background: var(--surface); color: var(--fg); }
#tb-generate { background: var(--primary-bg); color: var(--primary-fg); border-color: var(--primary-bg); font-weight: 700; }
#tb-generate:hover:not(:disabled) { background: var(--primary-hover-bg); }
#tb-app button, #tb-app select { min-height: 44px; }
#tb-app button { cursor: pointer; }
#tb-app button:disabled { cursor: default; opacity: .55; }
#tb-app :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
#tb-app p, #tb-app h2, #tb-app h3, #tb-app h4, #tb-app bdi { overflow-wrap: anywhere; }
#tb-app label { display: block; margin-block: .7rem .3rem; }
#tb-app .tb-setup label { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
#tb-app .button-row, .tb-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-block: 1rem; }
#tb-results button, #tb-outputs button { min-height: 44px; cursor: pointer; }
#tb-results button:disabled, #tb-outputs button:disabled { cursor: default; opacity: .55; }
#tb-results :focus-visible, #tb-outputs :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
#tb-results, #tb-outputs { min-width: 0; }
#tb-results p, #tb-results bdi, #tb-results h2, #tb-results h3, #tb-results h4 { overflow-wrap: anywhere; }
#tb-app .card { min-width: 0; }
#tb-draft-warning, #tb-error { padding: .8rem; border: 2px solid currentColor; border-radius: .4rem; }
#tb-champion { padding: .8rem; border-inline-start: 4px solid var(--accent); font-weight: 700; }
#tb-bracket { position: relative; display: grid; grid-template-columns: repeat(var(--tb-rounds, 1), minmax(0, 1fr)); gap: 1.6rem; align-items: stretch; }
.tb-round { min-width: 0; display: flex; flex-direction: column; }
.tb-round h3 { font-size: 1.05rem; margin-block: 0 1rem; }
.tb-matches { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 1rem; }
.tb-match { position: relative; z-index: 1; padding: .55rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--surface); min-width: 0; }
.tb-match h4 { margin: 0; font-size: 1rem; }
.tb-match-status, .tb-source { color: var(--muted); font-size: .8rem; line-height: 1.4; margin-block: .4rem; }
.tb-entry { display: flex; flex-direction: column; align-items: stretch; text-align: start; width: 100%; box-sizing: border-box; padding: .5rem; margin-block: .4rem; border: 1px solid var(--border); border-radius: .3rem; background: var(--bg); color: var(--fg); font: inherit; line-height: 1.45; }
.tb-entry[aria-pressed="true"] { border: 2px solid var(--accent); }
.tb-entry-number { font-size: .75rem; color: var(--muted); }
.tb-winner { font-size: .8rem; }
.tb-cancel-result { font-size: .8rem; width: 100%; white-space: normal; }
.tb-connectors { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.tb-connectors path { fill: none; stroke: var(--muted); stroke-width: 1.5; }
#tb-confirm { max-width: min(32rem, 85vw); background: var(--surface); color: var(--fg); border: 2px solid var(--border); border-radius: .6rem; padding: 1.25rem; }
#tb-confirm::backdrop { background: rgb(0 0 0 / .5); }
#tb-confirm button { min-height: 44px; margin: .4rem; }
#tb-confirm :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
#tb-print-root { display: none; }
@media (max-width: 999px) {
  #tb-bracket { display: block; }
  .tb-round { margin-block: 1.5rem; }
  .tb-connectors { display: none; }
  .tb-matches { gap: .8rem; }
}
@media (forced-colors: active) {
  .tb-entry[aria-pressed="true"] { border: 3px double Highlight; }
  .tb-connectors path { stroke: CanvasText; }
}
@page tb-a4 { size: A4 landscape; margin: 10mm; }
@page tb-letter { size: Letter landscape; margin: 10mm; }
@media print {
  html, body { margin: 0 !important; padding: 0 !important; background: white !important; color: black !important; }
  body > :not(#tb-print-root) { display: none !important; }
  #tb-print-root { display: block !important; font: 10pt/1.25 sans-serif; color: black; width: 250mm; }
  .tb-paper-a4 { page: tb-a4; }
  .tb-paper-letter { page: tb-letter; }
  .tb-print-sheet { break-after: page; break-inside: avoid; width: 250mm; height: 187mm; }
  .tb-print-sheet:last-child { break-after: auto; }
  .tb-print-sheet h2 { font: bold 12pt/1.2 sans-serif; margin: 0; height: 6mm; white-space: nowrap; }
  .tb-print-subtitle { margin: 0; height: 6mm; }
  .tb-print-sheet svg { display: block; width: 250mm; height: 160mm; max-width: none; }
  .tb-print-box { fill: white; stroke: black; stroke-width: .3; }
  .tb-print-line { fill: none; stroke: black; stroke-width: .3; }
  .tb-print-label, .tb-print-name { font: 3.528px sans-serif; fill: black; direction: ltr; unicode-bidi: embed; }
  .tb-print-label { font-weight: normal; }
  .tb-print-legend { margin: 2mm 0 0; font-size: 10pt; }
  .tb-print-roster { width: 250mm; }
  .tb-print-roster h2 { font-size: 14pt; }
  .tb-print-roster p, .tb-print-roster li { overflow-wrap: anywhere; }
  .tb-print-roster ol { list-style: none; padding: 0; }
  .tb-print-roster li { break-inside: avoid; margin-block: 3mm; }
}