.public-bracket-view {
  --bracket-winner:#7c3aed;
  --bracket-loser:#ea580c;
  color:#253047;
}
.public-bracket-view .public-path-stack { gap:14px; }
.public-bracket-view .public-path,
.public-bracket-view .public-final-source {
  --path-accent:#6d28d9;
  --path-soft:#f5f3ff;
  border:1px solid #e8eaf2;
  border-radius:18px;
  background:#fff;
  box-shadow:0 6px 24px rgba(36,31,73,.04);
  overflow:hidden;
}
.public-bracket-view .public-path--tone-2 { --path-accent:#0f766e; --path-soft:#effaf8; }
.public-bracket-view .public-path--tone-3 { --path-accent:#c2410c; --path-soft:#fff6ef; }
.public-bracket-view .public-path-head,
.public-bracket-view .public-final-source-head {
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:12px;
  padding:18px;
  border:0;
  background:var(--path-soft);
  cursor:pointer;
  list-style:none;
}
.public-bracket-view summary::-webkit-details-marker { display:none; }
.public-bracket-view .public-path[open] > .public-path-head { background:#fff; border-bottom:1px solid #f0eef6; }
.public-bracket-view .public-path-title { display:flex; flex:1; gap:4px 10px; align-items:center; min-width:0; }
.public-bracket-view .public-path-title h2 { flex-basis:100%; font-size:1rem; line-height:1.3; color:#20243b; overflow-wrap:anywhere; }
.public-bracket-view .public-path-range,
.public-bracket-view .public-path-division { color:#667085; padding:0; border:0; background:none; font-size:.75rem; font-weight:450; }
.public-bracket-view .public-path-icon { display:grid; place-items:center; width:40px; height:40px; flex:none; background:var(--path-soft); color:var(--path-accent); border-radius:13px; font-size:1.15rem; }
.public-path-chevron { flex:none; width:9px; height:9px; margin:0 5px; border-right:1.7px solid currentColor; border-bottom:1.7px solid currentColor; transform:rotate(45deg); transition:transform .15s; }
.public-path[open] > summary .public-path-chevron,
.public-final-source[open] > summary .public-path-chevron { transform:rotate(225deg); }
.public-path-nav { display:flex; gap:8px; overflow-x:auto; padding:2px 1px 14px; scrollbar-width:thin; }
.public-path-nav-item { flex:1 0 145px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:3px; padding:11px 14px; min-width:0; border:1px solid #e8e4f4; border-radius:16px; text-align:center; color:#596078; background:#faf9fd; text-decoration:none; font-size:.76rem; }
.public-path-nav-item strong { font-weight:650; }
.public-path-nav-item span { font-size:.7rem; }
.public-path-nav-item[aria-current="true"] { background:#6d28d9; color:#fff; border-color:#6d28d9; box-shadow:0 5px 14px rgba(109,40,217,.15); }
.public-path-nav-item--tone-2[aria-current="true"] { background:#0f766e; border-color:#0f766e; box-shadow:none; }
.public-path-nav-item--tone-3[aria-current="true"] { background:#c2410c; border-color:#c2410c; box-shadow:none; }
.public-path-tools { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:9px 18px 0; }
.public-path-scroll-hint { color:#747084; font-size:.68rem; }
.public-path-expand { display:inline-flex; align-items:center; gap:6px; border:1px solid #e8e4f4; border-radius:9px; padding:7px 9px; background:#fff; color:#6d6782; font:inherit; font-size:.7rem; cursor:pointer; }
.public-path-expand:hover { background:#f5f3ff; color:#6d28d9; }
.public-path-expand[hidden] { display:none; }
.public-path-entry { margin:8px 18px 0; font-size:.72rem; color:#7b7191; }
.public-bracket-view .public-bracket-scroll { overflow:auto; padding:22px 16px 12px; scrollbar-width:thin; overscroll-behavior-x:contain; background:linear-gradient(180deg,#faf9fe, #fff); }
.public-bracket-view .public-path .vl-bracket-container--tableau { display:flex; position:relative; gap:40px; padding:0 0 12px; margin:0 auto; width:max-content; min-width:0; align-items:stretch; justify-content:flex-start; }
.public-bracket-view .public-path .vl-bracket-col--finals { flex:0 0 250px; min-width:250px; max-width:250px; width:250px; }
.public-bracket-view .public-path .vl-bracket-col-title { padding:0 8px 14px; margin:0; border:0; background:none; color:#6c7186; text-align:left; font-size:.65rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
.public-bracket-view .public-path .vl-bracket-col-matches--finals { display:flex; flex-direction:column; justify-content:flex-start; gap:28px; }
.public-bracket-view .public-path .vl-nhl-match { position:relative; margin:0; border:1px solid #e6e4f0; border-radius:13px; padding:0; overflow:hidden; background:#fff; box-shadow:0 3px 12px rgba(42,36,76,.07); opacity:1; }
.public-bracket-view .public-path .vl-nhl-match:has(.vl-nhl-match-title) { border-top-color:#ded7f4; }
.public-bracket-view .public-path .public-match--placement { border-color:#fedbc4; }
.public-bracket-view .public-path .public-match--placement .vl-nhl-match-label { color:#c2410c; background:#fff7f0; }
.public-bracket-view .public-path .vl-nhl-match--live { border-color:#ef4444; box-shadow:0 0 0 2px rgba(239,68,68,.08); }
.public-bracket-view .public-path .vl-nhl-match-label { display:flex; align-items:flex-start; justify-content:space-between; gap:6px; margin:0; padding:9px 10px 7px; background:#faf9fe; border-bottom:0; color:#6d28d9; border-radius:0; font-size:.65rem; }
.public-bracket-view .public-path .vl-nhl-match-title { font-weight:650; text-transform:none; line-height:1.35; overflow-wrap:anywhere; }
.public-bracket-view .public-path .vl-nhl-match-number { color:#726d84; font-size:.62rem; font-weight:650; background:none; border:0; flex:none; padding:0; }
.public-bracket-view .public-path .vl-nhl-team { display:flex; align-items:center; gap:7px; min-height:38px; padding:8px 10px; background:none; }
.public-bracket-view .public-path .vl-nhl-team + .vl-nhl-team { border-top:1px solid #f0f0f6; }
.public-bracket-view .public-path .vl-nhl-name { min-width:0; flex:1; white-space:normal; overflow-wrap:anywhere; overflow:visible; text-overflow:clip; font-size:.76rem; font-weight:550; line-height:1.35; color:#2c3045; }
.public-bracket-view .public-path .vl-bracket-team-mark { flex:0 0 23px; width:23px; height:23px; margin:0; border:0; background:#f0eef8; color:#746b87; font-size:.55rem; }
.public-bracket-view .public-path .vl-nhl-score { color:#747089; font-size:.78rem; width:auto; min-width:14px; background:none; font-weight:700; }
.public-bracket-view .public-path .vl-nhl-team--winner { background:#f5f1ff; box-shadow:inset 3px 0 #7c3aed; }
.public-bracket-view .public-path .vl-nhl-team--winner .vl-nhl-name,
.public-bracket-view .public-path .vl-nhl-team--winner .vl-nhl-score { color:#5b21b6; font-weight:750; }
.public-bracket-view .public-path .vl-nhl-team--loser { opacity:1; }
.public-bracket-view .public-path .vl-nhl-team--loser .vl-nhl-name { color:#747084; }
.public-bracket-view .public-path .vl-nhl-label { margin:0; padding:6px 10px; border-top:1px solid #f3f1f7; color:#756f83; font-size:.62rem; text-align:left; overflow-wrap:anywhere; }
.public-bracket-view .public-path .vl-nhl-live-dot { display:none; }
.public-bracket-view .public-path .vl-bracket-connector { stroke-width:1.7; opacity:.8; }
.public-bracket-view .public-path .vl-bracket-connector--winner { stroke:var(--bracket-winner); }
.public-bracket-view .public-path .vl-bracket-connector--loser { stroke:var(--bracket-loser); stroke-dasharray:5 4; }
.public-match-details { border-top:1px solid #f1eff6; }
.public-match-details > summary { display:flex; justify-content:space-between; gap:8px; padding:6px 10px; color:#756780; font-size:.61rem; cursor:pointer; list-style:none; }
.public-match-details > summary::after { content:'+'; }
.public-match-details[open] > summary::after { content:'\2212'; }
.public-match-details-body { padding:0 10px 9px; font-size:.68rem; color:#777187; }
.public-match-details-body p { margin:4px 0; overflow-wrap:anywhere; }
.public-match-details-body a { display:inline-block; margin-top:5px; color:#6d28d9; }
.public-match-live { color:#dc2626; font-weight:700; }
.public-bracket-view .public-path-legend { display:flex; justify-content:center; flex-wrap:wrap; gap:18px; margin:0; padding:12px 16px 16px; border:0; background:none; color:#746c82; font-size:.68rem; font-weight:450; }
.public-bracket-view .public-path-legend-line { border-color:var(--bracket-winner); width:28px; }
.public-bracket-view .public-path-legend-line--loser { border-color:var(--bracket-loser); }
.public-bracket-view .public-final-source { margin:0 0 12px; box-shadow:none; }
.public-bracket-view .public-final-source-head { padding:12px 16px; background:#fafbfd; }
.public-bracket-view .public-final-source-head h2 { flex:1; font-size:.8rem; color:#777b8c; }
.public-bracket-dialog { width:calc(100vw - 32px); max-width:1500px; max-height:calc(100dvh - 32px); border:1px solid #e8e4f4; border-radius:18px; padding:16px; background:#faf9fd; }
.public-bracket-dialog::backdrop { background:rgba(23,20,41,.55); backdrop-filter:blur(3px); }
.public-bracket-dialog > form { display:flex; justify-content:flex-end; margin-bottom:10px; }
.public-bracket-dialog-close { border:1px solid #e8e4f4; padding:8px 12px; border-radius:9px; color:#555069; background:#fff; font:inherit; font-size:.8rem; cursor:pointer; }
.public-bracket-dialog .public-path-expand { display:none; }
.public-bracket-view :is(a,button,summary,[tabindex]):focus-visible { outline:2px solid #7c3aed; outline-offset:3px; }
@media(max-width:600px) {
  .public-bracket-view .public-path-head { padding:14px; }
  .public-bracket-view .public-path-title h2 { font-size:.92rem; }
  .public-bracket-view .public-path .vl-bracket-col--finals { flex:0 0 174px; min-width:174px; max-width:174px; width:174px; }
  .public-bracket-view .public-path .vl-bracket-container--tableau { gap:30px; }
  .public-bracket-view .public-bracket-scroll { padding:16px 10px 12px; }
  .public-path-nav-item { flex-basis:120px; padding:10px; }
  .public-path-tools { padding:9px 12px 0; }
  .public-path-expand span { display:none; }
  .public-bracket-dialog { width:calc(100vw - 12px); max-height:calc(100dvh - 12px); padding:8px; }
}
@media(prefers-reduced-motion:reduce) { .public-path-chevron { transition:none; } }
