/* /bracket-generator/ page styles. Built from /assets/polyatic.css tokens only (no new colours or fonts). */
.nojs{margin:1.25rem 0 0;padding:0.875rem 1rem;border:1px solid var(--line);border-left:0.25rem solid var(--accent);border-radius:0.625rem;background:var(--surface);color:var(--ink);font-size:0.9375rem;line-height:1.6}
.bk-head .sub{margin-bottom:1rem}
@media(max-width:520px){.bk-head h1{margin-bottom:0.25rem}.bk-head .sub{font-size:0.9375rem;margin-bottom:0.75rem}}

.bk-duo{display:grid;gap:1.25rem;align-items:start}
@media(min-width:920px){.bk-duo{grid-template-columns:minmax(17rem,21rem) minmax(0,1fr);gap:1.5rem}}
.bk-input,.bk-out{min-width:0}
.bk-input{display:grid;gap:0.875rem;align-content:start}
@media(max-width:520px){.bk-input,.bk-out{padding:0.875rem}}

.bk-names .head{gap:0.25rem 0.75rem;flex-wrap:wrap}.bk-names .head .k{flex:none}
.bk-count{font-family:var(--mono);font-size:0.75rem;color:var(--muted);text-align:right;white-space:nowrap;margin-left:auto}
.bk-names textarea{min-height:8.5rem;font-family:var(--sans);font-size:0.9375rem}
@media(max-width:520px){.bk-names textarea{min-height:7.5rem;height:7.5rem}}
.bk-help{margin:0.375rem 0.125rem 0;font-size:0.8125rem;line-height:1.5;color:var(--muted)}
.bk-help code,.bk-fair code{font-family:var(--mono);font-size:0.75rem;background:var(--surface-2);border:1px solid var(--line);border-radius:0.25rem;padding:0 0.25rem;color:var(--ink)}

.bk-opts{display:grid;gap:0.625rem}
.bk-modes{margin-bottom:0}
.bk-reset{font-size:0.8125rem;line-height:1.4}
.bk-reset.is-off{opacity:.5;cursor:default}
.bk-seedrow{display:flex;align-items:center;gap:0.625rem}
.bk-seedrow .k,.bk-outhead .k{font-family:var(--mono);font-size:0.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.bk-seedrow .bk-modes{flex:1}
.bk-titlef .head{margin-bottom:0.375rem}
.bk-titlef input{width:100%}
.bk-make{height:3rem;font-size:1.0625rem;width:100%}
.bk-msg{margin:0;padding:0.75rem 0.875rem;border:1px solid var(--line-2);border-left:0.25rem solid var(--bad);border-radius:0.5rem;background:var(--surface-2);font-size:0.9375rem;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
.bk-fair{margin:0;font-size:0.8125rem;line-height:1.55;color:var(--muted)}

.bk-notice{margin:0 0 1rem;padding:0.75rem 0.875rem;border:1px solid var(--line-2);border-left:0.25rem solid var(--accent);border-radius:0.5rem;background:var(--accent-soft);font-size:0.875rem;line-height:1.5;color:var(--ink);display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem}
.bk-notice .chip{padding:0.375rem 0.6875rem;font-size:0.8125rem}
.bk-notice.is-bad{border-left-color:var(--bad);background:var(--surface-2)}

/* bracket */
.bk-out{display:grid;gap:0.75rem;align-content:start;scroll-margin-top:0.75rem}
.bk-outhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:0.25rem 0.75rem}
.bk-outhead .k{margin:0}
.bk-status{margin:0;font-family:var(--mono);font-size:0.75rem;color:var(--muted);overflow-wrap:anywhere}
.bk-champ{margin:0;padding:0.625rem 0.875rem;border-radius:0.5rem;background:var(--signal);color:var(--signal-ink);font-weight:600;overflow-wrap:anywhere}
.bk-empty{margin:0;padding:1.5rem 1rem;border:1px dashed var(--line-2);border-radius:0.625rem;text-align:center;color:var(--muted);font-size:0.9375rem}
.bk-out.is-empty .bk-view,.bk-out.is-empty .bk-viewhelp,.bk-out.is-empty .bk-share{display:none}
.bk-actions{display:grid;gap:0.625rem}
.bk-tools{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem 0.875rem}
.bk-tools .btn{height:2.5rem;padding:0 0.875rem}
.bk-tools .btn:disabled{opacity:.45;cursor:default}
.bk-scoreson{font-size:0.875rem}
.bk-zoom{display:flex;align-items:center;gap:0.25rem;margin-left:auto}
.bk-zoom .icon{width:2.5rem;height:2.5rem}
.bk-zoom .chip{font-family:var(--mono);font-size:0.75rem;min-width:3.75rem;padding:0.5rem 0.375rem}

.bk-view{overflow:auto;max-height:min(72vh,46rem);min-height:10rem;border:1px solid var(--line);border-radius:0.625rem;background:var(--surface-2);touch-action:pan-x pan-y;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.bk-view:focus{outline:none}
.bk-view svg{display:block}
.bk-viewhelp{margin-top:-0.25rem}

/* on-screen SVG: polyatic tokens, so light and dark both work (export and print keep their attributes) */
.bk-screen .bk-lab{fill:var(--muted)}
.bk-screen .bk-lines{stroke:var(--line-2)}
.bk-screen .bk-num{fill:var(--muted)}
.bk-screen .bk-box{fill:var(--surface);stroke:var(--line-2)}
.bk-screen .bk-mid{stroke:var(--line)}
.bk-screen .bk-hit{fill:var(--surface);fill-opacity:0}
.bk-screen .is-win .bk-hit{fill:var(--accent);fill-opacity:.14}
.bk-screen .bk-name{fill:var(--ink)}
.bk-screen .is-lose .bk-name{fill:var(--muted);text-decoration:line-through;text-decoration-thickness:1px}
.bk-screen .bk-seed,.bk-screen .bk-pend{fill:var(--muted)}
.bk-screen .bk-score{fill:var(--muted)}
.bk-screen .is-win .bk-score{fill:var(--accent)}
.bk-screen .is-ready .bk-box{stroke:var(--accent);stroke-width:1.5}
.bk-screen .is-tap{cursor:pointer}
.bk-screen .is-tap:hover .bk-hit{fill:var(--accent);fill-opacity:.08}
.bk-screen .is-win.is-tap:hover .bk-hit{fill-opacity:.18}
.bk-screen .is-tap:focus{outline:none}
.bk-screen .is-tap:focus-visible .bk-hit{stroke:var(--accent);stroke-width:2}
.bk-screen text{font-family:var(--sans)}
.bk-screen .bk-seed,.bk-screen .bk-num,.bk-screen .bk-score,.bk-screen .bk-lab{font-family:var(--mono)}

.bk-panel{display:grid;gap:0.5rem;padding:0.75rem;border:1px solid var(--line-2);border-left:0.25rem solid var(--accent);border-radius:0.5rem;background:var(--surface-2)}
.bk-ptitle{margin:0;font-weight:600;overflow-wrap:anywhere}
.bk-pscores{display:grid;grid-template-columns:1fr 1fr;gap:0.5rem}
.bk-pscores label{display:grid;gap:0.25rem;font-size:0.8125rem;color:var(--muted);min-width:0}
.bk-pscores label span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-pscores input{font-family:var(--mono);font-size:1rem;width:100%}
.bk-prow{display:flex;flex-wrap:wrap;gap:0.5rem}
.bk-prow .btn{height:2.5rem;padding:0 0.875rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk-prow .btn.is-pre{outline:2px solid var(--signal);outline-offset:2px}

.bk-share{display:grid;gap:0.5rem}
.bk-row{display:flex;flex-wrap:wrap;gap:0.5rem}
.bk-row .btn{height:2.5rem;padding:0 0.875rem}
.bk-sharerow{display:flex;gap:0.5rem}
.bk-sharerow input{flex:1;min-width:0;font-family:var(--mono);font-size:0.8125rem}
.bk-sharerow .btn{height:auto;min-height:2.5rem;padding:0 0.875rem}
.bk-save{display:flex;flex-wrap:wrap;align-items:center;gap:0.375rem 0.75rem;border-top:1px solid var(--line);padding-top:0.75rem}
.bk-save .bk-help{margin:0}
.bk-save .chip{padding:0.375rem 0.6875rem;font-size:0.8125rem}
.bk-save #savestate{flex-basis:100%}
.bk-save #savestate:empty{display:none}

.bk-printout{display:none}

/* print: only the bracket sheets, in polyatic's light-token colours whatever the screen theme;, landscape, one sheet per section */
@page{size:landscape;margin:10mm}
@media print{
  .skip-link,.bk-page,noscript{display:none !important}
  html,body{background:#ffffff !important;margin:0;padding:0}
  .bk-printout{display:block}
  .bk-sheet{break-after:page;page-break-after:always;break-inside:avoid;margin:0;padding:0}
  .bk-sheet:last-child{break-after:auto;page-break-after:auto}
  .bk-sheet h2{margin:0 0 1mm;font-family:var(--sans);font-size:13pt;line-height:1.2;color:#111312}
  .bk-sheet p{margin:0 0 2mm;font-family:var(--sans);font-size:8pt;line-height:1.2;color:#5a5f5b}
  .bk-sheet svg{display:block;width:100%;height:auto;max-height:168mm}
}