/* showkit-bracket.css — the Bracket tab's look, and ONLY its look.
 *
 * ============================================================================
 * EVERY VISUAL CHOICE HERE IS A CUSTOM PROPERTY. THE MARKUP NEVER CHANGES.
 * ============================================================================
 * showkit-bracket.js builds fixed class names (.skbr-match-box, .skbr-slotline,
 * etc.) and never reads a color, a radius, or a font from JS — it only toggles
 * classes like `.won` and `.hidden`, and computes pixel POSITIONS for the
 * bracket-tree layout (which round a box sits in, where its connector lines
 * go) — never a visual STYLE choice. That means the whole visual identity of
 * this tab lives in the --skbr-* variables below, and reskinning it is a
 * CSS-only change: nobody needs to open showkit-bracket.js, understand the
 * bracket logic, or risk breaking seeding/voting/advancing to change how it
 * looks. Same separation argument as showkit-skin.css's tokens half.
 *
 * TO RESKIN: don't edit this file. Load a second, small stylesheet AFTER this
 * one that overrides `.skbr-wrap { --skbr-accent-from: ...; }` etc. See
 * showkit-bracket-theme-example.css for a complete worked example, and
 * THEMING.md for the full variable list in plain language.
 *
 * The defaults below are a plain dark control-room look — deliberately
 * unopinionated, since the actual look is Hollywood's call, not ours.
 */

.skbr-wrap, .skbr-wrap *, .skbr-wrap *::before, .skbr-wrap *::after { box-sizing: border-box; }

.skbr-wrap {
  /* ---- surfaces ---- */
  --skbr-bg:        #05070a;   /* page/empty-state background */
  --skbr-panel:      #12161d;   /* match-box + build-box background */
  --skbr-panel-2:    #0b0e13;   /* inputs (one shade darker) */
  --skbr-border:     #262d38;   /* also used for the bracket's connector lines */
  --skbr-border-hover: #4c6ef5;
  --skbr-radius:     8px;

  /* ---- text ---- */
  --skbr-ink:        #dbe4ee;   /* primary text */
  --skbr-muted:      #8a97a8;   /* labels, hints, captions, TBD placeholders */
  --skbr-font:       system-ui, "Segoe UI", Arial, sans-serif;
  --skbr-mono:       "SF Mono", Consolas, monospace;

  /* ---- the one color that means "this side won / is selected" ---- */
  --skbr-accent-from: #3a5bd9;
  --skbr-accent-to:   #22337a;
  --skbr-accent-border: #5c7cfa;
  --skbr-accent-ink:  #ffffff;
  --skbr-accent-ink-muted: #c7d3ff;

  /* ---- destructive action (Delete Bracket) ---- */
  --skbr-danger:        #ff6b6b;
  --skbr-danger-border: #6b2b2b;
  --skbr-danger-bg:     #2a1214;

  /* ---- champion banner ---- */
  --skbr-champion-from: #2a1d00;
  --skbr-champion-to:   #12161d;
  --skbr-champion-border: #6b5200;

  /* ---- spacing / sizing ---- */
  --skbr-gap:        10px;
  --skbr-pad:        12px;
  --skbr-photo-max:  20px;      /* the small thumbnail inside a bracket slot */

  font: 13px/1.4 var(--skbr-font);
  color: var(--skbr-ink);
  padding: 4px;
}

/* One header STRIP, not three stacked rows: the panel title, the bracket-type
   chips, the layout toggle and the live-output label all share this line, and
   it wraps only when the deck is genuinely too narrow for them. */
.skbr-head{display:flex;align-items:center;gap:7px;flex-wrap:wrap;row-gap:4px}
.skbr-head > b{font-size:15px;line-height:1;flex:0 0 auto}
.skbr-mode{font-size:11px;color:var(--skbr-muted);margin-left:auto;flex:0 0 auto}

.skbr-build{background:var(--skbr-panel);border:1px solid var(--skbr-border);border-radius:var(--skbr-radius);padding:5px 7px;margin-bottom:7px}
.skbr-b-label{font-size:11px;color:var(--skbr-muted)}
.skbr-b-label code{font-family:var(--skbr-mono)}
.skbr-build textarea{width:100%;background:var(--skbr-panel-2);color:var(--skbr-ink);border:1px solid var(--skbr-border);border-radius:6px;padding:8px;font:12px/1.4 var(--skbr-mono);resize:vertical}
.skbr-b-row{display:flex;gap:8px;align-items:center;margin-top:6px;flex-wrap:wrap}
.skbr-build button{background:var(--skbr-panel-2);border:1px solid var(--skbr-border);border-radius:6px;color:var(--skbr-ink);padding:7px 12px;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--skbr-font)}
.skbr-build button:hover:not(:disabled){border-color:var(--skbr-border-hover)}
.skbr-build button:disabled{opacity:.4;cursor:not-allowed}
.skbr-rewind-btn{margin-left:auto}
.skbr-advance-btn{font-weight:700}
.skbr-rewind-btn:disabled,.skbr-advance-btn:disabled{opacity:.4;cursor:not-allowed}
.skbr-matchup-nav{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--skbr-muted);white-space:nowrap}
.skbr-matchup-nav button{padding:6px 10px}
.skbr-matchup-nav button:disabled{opacity:.4;cursor:not-allowed}
/* Shares the tools row rather than owning a line of its own. */
.skbr-b-msg{font-size:11px;color:var(--skbr-muted);min-height:14px;flex:1 1 120px;min-width:0}

.skbr-type-grid{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.skbr-type-grid > .skbr-type-card,.skbr-custom-types .skbr-type-card{flex:0 0 auto}
.skbr-custom-types{display:contents}
.skbr-build .skbr-new-type{flex:0 0 auto;min-width:auto;border-style:dashed;color:var(--skbr-muted)}
.skbr-build .skbr-type-card{min-height:0;padding:4px 10px;text-align:center;display:grid;place-items:center;background:var(--skbr-panel-2)}
.skbr-type-card b{font-size:13px;line-height:1.15}
.skbr-type-card.active{border-color:var(--skbr-accent-border);background:linear-gradient(135deg,var(--skbr-accent-from),var(--skbr-accent-to))}
.skbr-layout-picker{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.skbr-build .skbr-layout-toggle{display:grid;grid-template-columns:32px 22px 32px;align-items:center;gap:2px;padding:2px 5px;border-radius:999px}
.skbr-layout-toggle i{position:relative;width:22px;height:12px;border-radius:999px;background:var(--skbr-border)}
.skbr-layout-toggle i::after{content:"";position:absolute;top:2px;left:2px;width:8px;height:8px;border-radius:50%;background:var(--skbr-accent-ink);transition:transform .16s ease}
.skbr-layout-toggle.two-sided i::after{transform:translateX(10px)}
.skbr-layout-choice{display:grid;place-items:center;min-width:28px;color:var(--skbr-muted);font-size:19px;font-weight:900;line-height:1}
.skbr-layout-choice.active{color:var(--skbr-accent-border)}
/* Two 1 seeds or one run of them: only offered on a two-sided board, so it
   hides with the layout rather than sitting there greyed out. */
.skbr-build .skbr-sideseeds-toggle{display:flex;align-items:center;gap:7px;padding:5px 10px;border-radius:999px;color:var(--skbr-muted);font:700 12px/1 var(--skbr-font);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
.skbr-sideseeds-toggle i{position:relative;width:22px;height:12px;border-radius:999px;background:var(--skbr-border);flex:0 0 auto}
.skbr-sideseeds-toggle i::after{content:"";position:absolute;top:2px;left:2px;width:8px;height:8px;border-radius:50%;background:var(--skbr-accent-ink);transition:transform .16s ease}
.skbr-build .skbr-sideseeds-toggle.on{color:var(--skbr-accent-border)}
.skbr-sideseeds-toggle.on i::after{transform:translateX(10px)}
/* Destructive, so it sits apart from the build controls at the end of the head
   strip and reads as a warning rather than another grey chip. */
.skbr-build .skbr-delete-btn{flex:0 0 auto;padding:5px 11px;border-color:var(--skbr-danger-border);color:var(--skbr-danger)}
.skbr-build .skbr-delete-btn:hover:not(:disabled){border-color:var(--skbr-danger);background:var(--skbr-danger-bg)}
.skbr-kind-panel{border-top:1px solid var(--skbr-border);margin-top:7px;padding-top:7px}
/* The whole of a kind's setup on one wrapping line: output name, title, size. */
.skbr-kind-row{display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.skbr-output-name,.skbr-slot-picker{display:flex;align-items:center;gap:9px;flex:0 0 auto;color:var(--skbr-muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.skbr-output-name code,.skbr-slot-picker code{color:var(--skbr-ink);font-family:var(--skbr-mono);text-transform:none;letter-spacing:0}
.skbr-slot-picker select{background:var(--skbr-panel-2);color:var(--skbr-ink);border:1px solid var(--skbr-border);border-radius:6px;padding:7px 28px 7px 8px;font:700 12px/1 var(--skbr-font)}
.skbr-slot-picker button{padding:7px 10px}
.skbr-title-input{flex:1 1 170px;min-width:140px;background:var(--skbr-panel-2);color:var(--skbr-ink);border:1px solid var(--skbr-border);border-radius:6px;padding:8px;font:600 13px/1.4 var(--skbr-font)}
.skbr-subs-note{background:var(--skbr-panel-2);border:1px solid var(--skbr-border);border-radius:6px;padding:7px 9px;margin-top:7px;font-size:11px;line-height:1.5;color:var(--skbr-muted)}
.skbr-seed-count{display:flex;align-items:center;gap:8px;flex:1 1 260px;color:var(--skbr-muted);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;flex-wrap:wrap}
.skbr-size-picker{display:flex;gap:4px}
.skbr-build .skbr-size-btn{padding:6px 12px;min-width:44px;text-align:center}
.skbr-build .skbr-size-btn.active{border-color:var(--skbr-accent-border);background:linear-gradient(135deg,var(--skbr-accent-from),var(--skbr-accent-to))}
.skbr-seed-count input{flex:0 1 165px;min-width:130px;background:var(--skbr-panel-2);color:var(--skbr-ink);border:1px solid var(--skbr-border);border-radius:6px;padding:7px 8px;font:700 13px/1 var(--skbr-font);text-transform:none;letter-spacing:0}
/* Reads back beside the size picker, not on a line under it. */
.skbr-size-note{flex:1 1 150px;min-width:0;font-size:11px;line-height:1.4;font-weight:400;text-transform:none;letter-spacing:0;color:var(--skbr-muted)}
.skbr-size-note:empty{display:none}
.skbr-manual{margin-top:7px}
.skbr-manual-foot{justify-content:space-between}
.skbr-photo-rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:7px;margin-top:7px}
.skbr-photo-row{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:8px;border:1px solid var(--skbr-border);border-radius:6px;padding:6px;min-width:0}
.skbr-photo-row img,.skbr-photo-empty{width:42px;height:42px;border-radius:5px;object-fit:cover;background:var(--skbr-panel-2)}
.skbr-photo-empty{display:grid;place-items:center;text-align:center;font-size:8px;color:var(--skbr-muted)}
.skbr-photo-row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.skbr-photo-row label{cursor:pointer;color:var(--skbr-accent-ink-muted);font-size:11px;font-weight:700}
.skbr-tools{padding-top:2px;margin-top:6px}

.skbr-champion{background:linear-gradient(135deg,var(--skbr-champion-from),var(--skbr-champion-to));border:1px solid var(--skbr-champion-border);border-radius:var(--skbr-radius);padding:14px;margin-bottom:14px;text-align:center;font-size:16px}
.skbr-champion img{display:block;max-height:120px;margin:8px auto 0;border-radius:6px}
.hidden{display:none!important}

/* ---- the bracket tree itself: columns of matchup boxes connected by lines,
   the classic printed-tournament-bracket shape ---- */
.skbr-bracket-wrap{overflow-x:auto;overflow-y:hidden;padding-bottom:10px}
.skbr-bracket{position:relative}

.skbr-conf-title{display:none}
.skbr-round-title{position:absolute;text-align:center;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--skbr-muted);font-weight:700}

.skbr-line{position:absolute;background:var(--skbr-border)}

.skbr-slot-pos{position:absolute}

.skbr-match-box{width:100%;height:100%;display:flex;flex-direction:column;background:var(--skbr-panel);border:1px solid var(--skbr-border);border-radius:var(--skbr-radius);overflow:hidden}

.skbr-slotline{flex:1;display:flex;align-items:center;gap:6px;padding:0 8px;font-size:12px;color:var(--skbr-ink);background:none;border:none;text-align:left;width:100%;font-family:var(--skbr-font);min-width:0}
.skbr-slotline:not(:last-child){border-bottom:1px solid var(--skbr-border)}
button.skbr-slotline{cursor:pointer}
button.skbr-slotline:hover:not(.won){background:var(--skbr-panel-2);border-color:var(--skbr-border-hover)}
#skBracket .skbr-slotline[draggable="true"]{cursor:grab}
#skBracket .skbr-slotline[draggable="true"]:active{cursor:grabbing}
#skBracket button.skbr-slotline[data-side]{cursor:pointer}
#skBracket button.skbr-slotline.is-dragging{cursor:grabbing}
#skBracket .skbr-slotline.is-dragging{opacity:.42}
.skbr-slotline[data-seed]{transition:background .14s,box-shadow .14s}
.skbr-slotline.skbr-seed-drop{background:rgba(76,110,245,.22);box-shadow:inset 0 0 0 2px var(--skbr-border-hover)}
.skbr-slotline.won{background:linear-gradient(90deg,var(--skbr-accent-from),var(--skbr-accent-to));color:var(--skbr-accent-ink);font-weight:700}

.skbr-slot-photo{width:var(--skbr-photo-max);height:var(--skbr-photo-max);border-radius:4px;object-fit:cover;flex-shrink:0}
.skbr-slot-seed{min-width:1.35em;color:var(--skbr-muted);font-family:var(--skbr-mono);font-weight:800;text-align:right;flex:none}
.skbr-slot-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.skbr-slot-cat{color:var(--skbr-muted);font-weight:400;flex-shrink:0}
.skbr-slotline.won .skbr-slot-cat{color:var(--skbr-accent-ink-muted)}
.skbr-slotline.won .skbr-slot-seed{color:var(--skbr-accent-ink-muted)}
.skbr-slot-score{font-size:14px;font-variant-numeric:tabular-nums;flex:none}

.skbr-placeholder{border-style:dashed}
.skbr-placeholder .skbr-slotline{color:var(--skbr-muted);font-style:italic;justify-content:center}
.skbr-placeholder.skbr-partial .skbr-slotline.skbr-advanced{color:var(--skbr-ink);font-style:normal;font-weight:700;justify-content:flex-start}
.skbr-placeholder.skbr-partial .skbr-slotline.skbr-advanced .skbr-slot-cat,
.skbr-placeholder.skbr-partial .skbr-slotline.skbr-advanced .skbr-slot-seed{color:var(--skbr-muted)}

.skbr-champion-node .skbr-slotline{justify-content:center;font-size:13px}

.skbr-slot-final .skbr-match-box{border-width:2px;border-color:var(--skbr-accent-border)}

.skbr-empty{border:1px dashed var(--skbr-border);border-radius:var(--skbr-radius);padding:26px;text-align:center;color:var(--skbr-muted)}

/* The Control Room gets a roomy operator view. Broadcast graphics use the
   same renderer without this #skBracket scope, so their sizing stays separate. */
#skBracket .skbr-wrap{--skbr-photo-max:40px}
#skBracket .skbr-round-title{font-size:14px}
#skBracket .skbr-slotline{gap:10px;padding:0 14px;font-size:18px}
#skBracket .skbr-slot-score{font-size:22px}
#skBracket .skbr-slot-votes{margin-left:auto;flex:none;font-size:14px;font-weight:800;
  font-variant-numeric:tabular-nums;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
#skBracket .skbr-slotline.won .skbr-slot-votes{color:var(--skbr-accent-ink)}
#skBracket .skbr-champion-node .skbr-slotline{font-size:19px}

@media(max-width:700px){.skbr-type-grid{grid-template-columns:1fr}.skbr-photo-rows{grid-template-columns:1fr}}