/* Bracket maker (/bracket-maker) and viewer (/view, /t/{id}). Uses the tokens from styles.css only. */

@keyframes ed-slide { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes ed-ring { 0% { box-shadow: 0 0 0 0 rgba(242, 86, 29, .45), var(--shadow-card); } 100% { box-shadow: 0 0 0 12px rgba(242, 86, 29, 0), var(--shadow-card); } }
@keyframes ed-pop { 0% { opacity: 0; transform: scale(.4); } 70% { opacity: 1; transform: scale(1.18); } 100% { transform: none; } }
@keyframes ed-crown { 0% { opacity: 0; transform: scale(.9); } 60% { opacity: 1; transform: scale(1.04); } 100% { transform: none; } }
@keyframes ed-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ed-blink { 50% { opacity: .25; } }
@keyframes ed-toast-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

.ed { --ed-tint-0: #FFE3D6; --ed-tint-1: #DCE6FF; --ed-tint-2: #E1F1E0; --ed-tint-3: #FFF0C7; display: flex; flex-direction: column; min-height: calc(100vh - 110px); background: var(--mist); color: var(--ink); font: 500 15px/1.4 var(--sans); }
:where(.ed) :where(button, input, textarea) { font: inherit; color: inherit; }
.ed-grow { flex: 1 1 auto; }
.ed-noscript { margin: 24px; padding: 16px 20px; border-radius: var(--radius); background: var(--orange-tint); color: var(--ink); }

/* Buttons */
.ed-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid transparent; border-radius: 12px; font: 700 15px/1 var(--sans); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color .2s, border-color .2s, box-shadow .2s; }
.ed-btn svg { flex: none; }
.ed-btn:disabled { cursor: default; opacity: .55; }
.ed-btn-orange { background: var(--orange); color: var(--ink); box-shadow: 0 10px 20px -12px rgba(242, 86, 29, .9); }
.ed-btn-orange:hover:not(:disabled) { color: var(--ink); background: #F46A36; }
.ed-btn-ghost { background: #fff; border-color: var(--edge); color: var(--ink); }
.ed-btn-ghost:hover:not(:disabled) { color: var(--ink); background: var(--fog); }
.ed-btn-quiet { background: transparent; color: var(--orange-deep); padding: 0 10px; }
.ed-btn-quiet:hover:not(:disabled) { background: var(--orange-tint); color: var(--orange-deep); }
.ed-btn-small { min-height: 36px; padding: 0 12px; border-radius: 10px; font: 600 14px/1 var(--sans); color: var(--body); }
.ed-link { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0; border: 0; background: transparent; color: var(--blue); font: 700 14px/1 var(--sans); cursor: pointer; }
.ed-link:hover:not(:disabled) { color: var(--ink); }
.ed-link:disabled { color: var(--soft); cursor: default; }
.ed-icon-btn { display: grid; place-items: center; width: 44px; height: 44px; margin: -8px -10px -8px 0; padding: 0; border: 0; border-radius: 12px; background: transparent; color: var(--soft); cursor: pointer; }
.ed-icon-btn:hover { background: var(--fog); color: var(--ink); }

/* Header row */
.ed-top { flex: none; display: flex; align-items: center; gap: 20px; min-height: 68px; padding: 8px 20px 8px 24px; background: #fff; border-bottom: 1px solid var(--hairline); }
.ed-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ed-eyebrow { font: 600 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.ed-name-input { width: 280px; max-width: 100%; height: 32px; margin: 0 0 0 -6px; padding: 0 6px; border: 0; border-radius: 8px; background: transparent; font: 900 24px/1 var(--display); text-transform: uppercase; color: var(--ink); }
.ed-name-input::placeholder { color: var(--soft); opacity: 1; }
.ed-name-input:hover { background: var(--mist); }
.ed-name-input:focus { background: var(--mist); outline: 2px solid var(--blue); outline-offset: 0; }
.ed-tabs { display: flex; gap: 4px; margin-left: 8px; }
.ed-tab { height: 40px; padding: 0 16px; border: 0; border-radius: 10px; background: transparent; color: var(--soft); font: 700 15px/1 var(--sans); cursor: pointer; }
.ed-tab:hover { color: var(--ink); }
.ed-tab[aria-selected="true"] { background: var(--fog); color: var(--ink); }
.ed-tab-teams { display: none; }
.ed-progress { display: flex; flex-direction: column; gap: 7px; width: 190px; }
.ed-progress-text { font: 600 13px/1 var(--sans); color: var(--body); }
.ed-progress-track { height: 6px; border-radius: 999px; background: var(--hairline); overflow: hidden; }
.ed-progress-fill { display: block; width: 0; height: 100%; border-radius: 999px; background: var(--orange); transition: width .5s ease; }
.ed-actions { display: flex; align-items: center; gap: 10px; }
.ed-live-dot { display: none; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--orange-deep); animation: ed-blink 1.2s infinite; }
.ed-share-btn .ed-live-dot { background: var(--ink); }
.ed-share-btn.is-live .ed-live-dot { display: block; }
.ed-share-btn.is-live svg { display: none; }

/* Layout */
.ed-body { flex: 1 0 auto; display: flex; min-height: 0; }
.ed-side { flex: none; width: 340px; display: flex; flex-direction: column; gap: 22px; padding: 20px; background: var(--paper); border-right: 1px solid var(--hairline); }
.ed-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding: 18px 40px 16px; }
.ed-panel { display: flex; flex-direction: column; gap: 10px; flex: 1 0 auto; min-width: 0; }
.ed-panel[hidden] { display: none; }

/* Sidebar */
.ed-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.ed-heading { margin: 0 0 2px; padding: 0; font: 700 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.ed-group > legend.ed-heading { margin-bottom: 8px; }
.ed-format { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border: 1px solid transparent; border-radius: 12px; color: var(--body); font: 600 15px/1.2 var(--sans); cursor: pointer; }
.ed-format input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ed-format:hover { background: var(--fog); }
.ed-format:has(input:checked) { background: #fff; border-color: var(--edge); color: var(--ink); box-shadow: 0 4px 10px -8px rgba(11, 29, 51, .4); }
.ed-format:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 1px; }
.ed-dot { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #9AA8BA; }
.ed-format input:checked + .ed-dot { border: 5px solid var(--orange); }
.ed-format.is-soon { color: var(--soft); cursor: not-allowed; }
.ed-format.is-soon:hover { background: transparent; }
.ed-soon { margin-left: auto; padding: 4px 7px; border-radius: 6px; background: var(--orange-tint); color: var(--orange-deep); font: 700 11px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.ed-note { margin: 2px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--orange-tint); color: var(--orange-deep); font: 600 13px/1.4 var(--sans); }
.ed-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ed-cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px; border-radius: 12px; background: #fff; border: 1px solid var(--hairline); cursor: text; }
.ed-cell:focus-within { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.ed-cell-label { font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.ed-num { width: 100%; min-width: 0; height: 26px; padding: 0; border: 0; background: transparent; font: 800 22px/1 var(--display); color: var(--ink); }
.ed-num:focus { outline: none; }
.ed-time { appearance: none; -webkit-appearance: none; height: 26px; padding: 0 14px 0 0; border-radius: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 3.5l3 3 3-3' fill='none' stroke='%235B6B7F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0 center; font-size: 20px; cursor: pointer; }
.ed-time option { font: 500 15px/1.2 var(--sans); }
.ed-teams-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ed-team-list { display: flex; flex-direction: column; gap: 3px; margin: 0; padding: 0; list-style: none; }
.ed-team { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 3px 0 8px; border-radius: 9px; background: #fff; border: 1px solid var(--hairline); }
.ed-team:focus-within { border-color: var(--edge); }
.ed-team-seed { flex: none; width: 18px; font: 600 11px/1 var(--sans); color: var(--soft); font-variant-numeric: tabular-nums; }
.ed-badge { flex: none; display: grid; place-items: center; width: 24px; height: 22px; border-radius: 6px; font: 700 10px/1 var(--sans); color: var(--ink); background: var(--ed-tint-0); }
.ed-badge.tint-1 { background: var(--ed-tint-1); }
.ed-badge.tint-2 { background: var(--ed-tint-2); }
.ed-badge.tint-3 { background: var(--ed-tint-3); }
.ed-team-input { flex: 1 1 auto; min-width: 0; height: 30px; padding: 0 6px; border: 0; border-radius: 6px; background: transparent; font: 600 15px/1 var(--cond); color: var(--ink); }
.ed-team-input:focus { background: var(--mist); outline: 2px solid var(--blue); outline-offset: 0; }
.ed-team-tools { flex: none; display: flex; opacity: 0; transition: opacity .15s; }
.ed-team:hover .ed-team-tools, .ed-team:focus-within .ed-team-tools { opacity: 1; }
.ed-mini { display: grid; place-items: center; width: 28px; height: 30px; padding: 0; border: 0; border-radius: 7px; background: transparent; color: var(--soft); cursor: pointer; }
.ed-mini svg { pointer-events: none; }
.ed-mini:hover:not(:disabled) { background: var(--fog); color: var(--ink); }
.ed-mini:disabled { opacity: .35; cursor: default; }
.ed-mini[data-remove]:hover:not(:disabled) { background: var(--orange-tint); color: var(--orange-deep); }
.ed-team-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ed-team-actions .ed-btn svg { color: var(--soft); }
.ed-hint { margin: 2px 0 0; font: 500 13px/1.4 var(--sans); color: var(--soft); }
.ed-new { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--hairline); }

/* Toolbar, legend */
.ed-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 36px; }
.ed-status { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 15px/1.3 var(--sans); color: var(--body); }
.ed-status svg { flex: none; color: var(--orange); }
.ed-tools { display: flex; gap: 8px; }
.ed-fit[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.ed-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; padding-top: 12px; border-top: 1px solid var(--rule); font: 500 13px/1.3 var(--sans); color: var(--soft); }
.ed-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 20px; }
.ed-key { display: flex; align-items: center; gap: 8px; }
.ed-swatch { flex: none; width: 18px; height: 4px; border-radius: 2px; background: var(--orange); }
.ed-swatch.is-ready { width: 16px; height: 12px; border-radius: 3px; background: transparent; border: 1.5px dashed var(--orange); }
.ed-swatch.is-later { background: var(--line); }
.ed-saved { display: flex; align-items: center; gap: 6px; }
.ed-saved svg { color: var(--blue); }

/* Board: header row, lines, cards, champion */
.bd-scroll { position: relative; overflow: auto; margin: 0 -8px; padding: 4px 8px 18px; }
.bd-board { position: relative; flex: none; }
.bd-board > * { position: absolute; }
.bd-band { height: 1px; background: var(--rule); }
.bd-head { display: flex; flex-direction: column; gap: 5px; }
.bd-head strong { font: 800 22px/1 var(--display); text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.bd-head span { font: 500 13px/1 var(--sans); color: var(--soft); white-space: nowrap; }
.bd-head.is-final strong { color: var(--orange-deep); }
.bd-board[data-format="double"] .bd-head strong { font-size: 19px; }
.bd-lines { left: 0; top: 0; overflow: visible; pointer-events: none; }
.bd-ln { fill: none; stroke: var(--line); stroke-width: 2; }
.bd-ln.is-bye { stroke-dasharray: 4 4; }
.bd-lit { fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.bd-lit.is-fresh { animation: ed-draw .5s cubic-bezier(.6, 0, .2, 1) both; }
.bd-card { width: 170px; display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--edge); border-radius: 10px; box-shadow: var(--shadow-card); }
.bd-card.is-ready { border: 1.5px dashed var(--orange); animation: ed-ring 1.8s ease-out infinite; }
.bd-card.is-bye { border-style: dashed; border-color: var(--line); background: var(--paper); box-shadow: none; }
.bd-card.is-skipped { border-style: dashed; border-color: var(--line); box-shadow: none; }
.bd-meta { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 22px; margin: 0; padding: 0 10px; border: 0; border-bottom: 1px solid var(--hairline); background: var(--mist); font: 600 11px/1 var(--sans); color: var(--soft); text-align: left; white-space: nowrap; }
button.bd-meta { width: 100%; cursor: pointer; }
button.bd-meta:hover { background: var(--fog); color: var(--ink); }
.bd-row { flex: 1 1 0; display: flex; align-items: center; gap: 8px; width: 100%; min-height: 0; margin: 0; padding: 0 10px; border: 0; background: transparent; text-align: left; font: 600 15px/1 var(--cond); color: var(--ink); cursor: default; transition: background-color .3s, color .3s; }
.bd-row + .bd-row { border-top: 1px solid var(--fog); }
.bd-row:focus-visible, .bd-meta:focus-visible, .bd-prow:focus-visible, .bd-pscore:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
button.bd-row { cursor: pointer; }
button.bd-row:hover, .bd-row.is-tap:hover { background: var(--orange-tint); }
.bd-row.is-win { background: var(--orange-tint); font-weight: 700; }
.bd-row.is-lose { color: var(--soft); font-weight: 500; }
.bd-seed { flex: none; width: 16px; font: 600 11px/1 var(--sans); color: var(--soft); font-variant-numeric: tabular-nums; }
.bd-nm { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bd-nm.is-fresh { animation: ed-slide .4s ease both; }
.bd-tbd { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--soft); font-weight: 500; font-style: italic; }
.bd-sc { flex: none; min-width: 14px; text-align: right; font: 900 18px/1 var(--display); font-variant-numeric: tabular-nums; }
.bd-sc.is-fresh { animation: ed-pop .4s ease both; }
.bd-row.is-win .bd-sc { color: var(--orange-deep); }
.bd-champ { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 8px; border: 2px dashed var(--line); border-radius: var(--radius); background: #fff; color: var(--soft); text-align: center; }
.bd-champ-label { font: 800 13px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.bd-champ-name { max-width: 100%; overflow: hidden; font: 900 24px/1.05 var(--display); text-transform: uppercase; color: var(--soft); overflow-wrap: anywhere; }
.bd-champ.is-crowned { border: 2px solid var(--orange); background: var(--orange); color: var(--ink); box-shadow: 0 18px 34px -14px rgba(242, 86, 29, .7); }
.bd-champ.is-crowned .bd-champ-name { color: var(--ink); }
.bd-champ.is-fresh { animation: ed-crown .7s cubic-bezier(.2, .8, .2, 1) both; }

/* Round robin standings */
.bd-standings { display: grid; gap: 8px; margin-bottom: 8px; }
.bd-standings[hidden] { display: none; }
.bd-table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: #fff; }
.bd-table { width: 100%; border-collapse: collapse; font: 500 15px/1.2 var(--sans); }
.bd-table caption { padding: 14px 16px 6px; text-align: left; font: 800 22px/1 var(--display); text-transform: uppercase; color: var(--ink); }
.bd-table th, .bd-table td { padding: 10px 12px; border-top: 1px solid var(--fog); text-align: left; white-space: nowrap; }
.bd-table thead th { border-top: 0; font: 700 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.bd-table abbr { text-decoration: none; }
.bd-table tbody th { font: 600 16px/1.2 var(--cond); color: var(--ink); }
.bd-table tbody th .bd-seed { display: inline-block; margin-right: 6px; }
.bd-table .bd-num { width: 1%; text-align: right; font-variant-numeric: tabular-nums; }
.bd-table tr.is-lead { background: var(--orange-tint); }
.bd-table tr.is-lead th { font-weight: 700; }
.bd-table-note { margin: 0; font: 500 13px/1.4 var(--sans); color: var(--soft); }

/* Phone rounds */
.bd-rounds { display: none; flex-direction: column; gap: 12px; }
.bd-rtabs { position: relative; display: flex; gap: 2px; padding: 4px; overflow-x: auto; border-radius: 12px; background: var(--hairline); scrollbar-width: none; }
.bd-rtabs::-webkit-scrollbar { display: none; }
.bd-rtab { flex: 1 0 auto; min-width: 44px; min-height: 44px; padding: 0 8px; border: 0; border-radius: 9px; background: transparent; color: var(--body); font: 700 14px/1 var(--sans); white-space: nowrap; cursor: pointer; }
.bd-rtab[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 2px 6px -4px rgba(11, 29, 51, .5); }
.bd-rtab.is-done:not([aria-selected="true"]) { color: var(--body); }
.bd-rpanel { display: flex; flex-direction: column; gap: 12px; }
.bd-ptitle { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 4px 2px 0; font: 800 24px/1 var(--display); text-transform: uppercase; color: var(--ink); }
.bd-ptitle span { font: 600 13px/1 var(--sans); text-transform: none; color: var(--soft); }
.bd-pcards { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.bd-pcard { overflow: hidden; background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.bd-pcard.is-ready { border: 1.5px dashed var(--orange); }
.bd-pcard.is-skipped, .bd-pcard.is-waiting { box-shadow: none; }
.bd-pmeta { display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px 4px; font: 600 12px/1.3 var(--sans); color: var(--soft); }
.bd-pstate { flex: none; font-weight: 700; }
.bd-pcard.is-ready .bd-pstate { color: var(--orange-deep); }
.bd-pcard.is-done .bd-pstate { color: var(--ink); }
.bd-prow { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; margin: 0; padding: 0 14px; border: 0; background: transparent; text-align: left; font: 700 17px/1.1 var(--cond); color: var(--ink); }
.bd-prow + .bd-prow { border-top: 1px solid var(--fog); }
button.bd-prow { cursor: pointer; }
button.bd-prow:active { background: var(--orange-tint); }
.bd-prow.is-win { background: var(--orange-tint); }
.bd-prow.is-lose { color: var(--soft); font-weight: 600; }
.bd-prow .bd-nm { font-size: 17px; }
.bd-prow .bd-sc { font-size: 22px; }
.bd-pscore { display: block; width: 100%; min-height: 44px; margin: 0; padding: 0 14px; border: 0; border-top: 1px solid var(--fog); background: var(--mist); color: var(--blue); font: 700 14px/1 var(--sans); text-align: left; cursor: pointer; }
.bd-pbyes { margin: 0 2px; font: 500 14px/1.45 var(--sans); color: var(--body); }
.bd-pchamp { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 16px; border-radius: var(--radius); background: var(--orange); color: var(--ink); font: 800 14px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
.bd-pchamp strong { margin-left: auto; font: 900 24px/1 var(--display); letter-spacing: 0; text-align: right; overflow-wrap: anywhere; }
.bd-pchamp svg { flex: none; }

/* Schedule */
.bd-schedule { display: flex; flex-direction: column; gap: 14px; max-width: 980px; }
.bd-sched-summary { margin: 0; font: 500 15px/1.5 var(--sans); color: var(--body); }
.bd-slots { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.bd-slot { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: start; }
.bd-stime { margin: 12px 0 0; font: 800 20px/1 var(--display); text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.bd-sgames { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.bd-sgame { display: grid; grid-template-columns: 64px 150px minmax(0, 1fr) 64px auto; align-items: center; gap: 12px; min-height: 48px; padding: 6px 10px 6px 14px; border: 1px solid var(--rule); border-radius: 12px; background: #fff; font: 500 14px/1.3 var(--sans); color: var(--body); }
.bd-sgame.is-ready { border: 1.5px dashed var(--orange); }
.bd-sgame.is-skipped { color: var(--soft); background: var(--mist); }
.bd-sfield { font-weight: 700; color: var(--ink); }
.bd-sid { color: var(--soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-steams { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; min-width: 0; font: 600 16px/1.2 var(--cond); color: var(--ink); }
.bd-steam.is-win { color: var(--orange-deep); font-weight: 700; }
.bd-steam.is-tbd { color: var(--soft); font-style: italic; font-weight: 500; }
.bd-vs { font: 600 12px/1 var(--sans); color: var(--soft); }
.bd-sres { font: 900 18px/1 var(--display); color: var(--ink); text-align: right; white-space: nowrap; }
.bd-sbtn { justify-self: end; }
.bd-empty { margin: 0; color: var(--soft); }

/* Toast and dialogs */
.ed-toast { position: fixed; left: 50%; bottom: 24px; z-index: 40; display: flex; align-items: center; gap: 16px; max-width: calc(100vw - 32px); padding: 10px 10px 10px 18px; border-radius: 14px; background: var(--ink); color: #fff; font: 600 15px/1.35 var(--sans); box-shadow: 0 18px 40px -18px rgba(6, 17, 31, .7); transform: translate(-50%, 0); animation: ed-toast-in .25s ease both; }
.ed-toast[hidden] { display: none; }
.ed-toast-btn { flex: none; min-height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: rgba(255, 255, 255, .14); color: #fff; font: 700 14px/1 var(--sans); cursor: pointer; }
.ed-toast-btn:hover { background: rgba(255, 255, 255, .24); }
.ed-toast-btn[hidden] { display: none; }
.ed-dialog { width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: 20px; background: #fff; color: var(--ink); box-shadow: 0 40px 80px -30px rgba(6, 17, 31, .6); }
.ed-dialog::backdrop { background: rgba(11, 29, 51, .45); }
.ed-dialog-body { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 22px 24px 20px; }
.ed-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ed-dialog-title { margin: 0; font: 900 28px/1 var(--display); text-transform: uppercase; }
.ed-dialog-sub { margin: -6px 0 0; font: 600 14px/1.3 var(--sans); color: var(--soft); }
.ed-dialog-text { margin: 0; font: 500 16px/1.5 var(--sans); color: var(--body); }
.ed-dialog-note { margin: 0; font: 500 14px/1.45 var(--sans); color: var(--soft); }
.ed-dialog-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.ed-label { padding: 0; font: 700 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.ed-optional { font-weight: 500; letter-spacing: 0; text-transform: none; }
.ed-scores, .ed-winner { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.ed-scores .ed-label, .ed-winner .ed-label { margin-bottom: 4px; }
.ed-score-row { display: flex; align-items: center; gap: 12px; }
.ed-score-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 18px/1.2 var(--cond); }
.ed-score-input { flex: none; width: 96px; height: 48px; padding: 0 12px; border: 1px solid var(--edge); border-radius: 12px; background: #fff; font: 900 26px/1 var(--display); text-align: center; }
.ed-score-input:focus { outline: 2px solid var(--blue); outline-offset: 0; border-color: var(--blue); }
.ed-winner { flex-direction: row; flex-wrap: wrap; }
.ed-winner .ed-label { flex-basis: 100%; }
.ed-choice { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--edge); border-radius: 12px; font: 700 16px/1.1 var(--cond); cursor: pointer; }
.ed-choice:has(input:checked) { border-color: var(--orange); background: var(--orange-tint); }
.ed-choice input { width: 18px; height: 18px; margin: 0; accent-color: var(--orange-deep); }
.ed-choice[hidden] { display: none; }
.ed-error { margin: 0; font: 600 14px/1.4 var(--sans); color: var(--orange-deep); }
.ed-error:empty { display: none; }
.ed-textarea { width: 100%; min-height: 200px; padding: 12px 14px; border: 1px solid var(--edge); border-radius: 12px; background: #fff; font: 600 16px/1.5 var(--cond); resize: vertical; }
.ed-textarea:focus { outline: 2px solid var(--blue); outline-offset: 0; border-color: var(--blue); }
.ed-share-step { display: flex; flex-direction: column; gap: 14px; }
.ed-share-step[hidden] { display: none; }
.ed-share-kind { display: flex; align-items: center; gap: 8px; margin: 0; font: 800 14px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
.ed-share-kind.is-live { color: var(--orange-deep); }
.ed-share-kind.is-live .ed-live-dot { display: block; }
.ed-share-row { display: flex; gap: 8px; }
.ed-share-url { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--edge); border-radius: 12px; background: var(--mist); font: 600 14px/1 var(--sans); color: var(--ink); }
.ed-share-url:focus { outline: 2px solid var(--blue); outline-offset: 0; }
.ed-share [hidden] { display: none; }

/* Viewer */
.vw-top { flex-wrap: wrap; }
.vw-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vw-name { margin: 0; font: 900 28px/1 var(--display); text-transform: uppercase; color: var(--ink); overflow-wrap: anywhere; }
.vw-updated { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 13px/1.2 var(--sans); color: var(--soft); }
.vw-updated.is-live { color: var(--orange-deep); }
.vw-updated.is-live .ed-live-dot { display: block; }
.vw-body { flex: 1 0 auto; display: flex; flex-direction: column; gap: 12px; padding: 18px 40px 24px; min-width: 0; }
.vw-message { margin: 0; padding: 14px 16px; border-radius: var(--radius); background: #fff; border: 1px solid var(--rule); font: 600 15px/1.45 var(--sans); color: var(--body); }
.vw-summary { margin: 0; font: 600 15px/1.3 var(--sans); color: var(--body); }
.vw:not(.is-ready) .ed-panel, .vw:not(.is-ready) .ed-tabs, .vw:not(.is-ready) #vw-print { display: none; }

/* Print: only the sheet, the bracket scaled to one Letter landscape page, then the schedule */
.bd-print { display: none; }
@media print {
  .ed { display: block; min-height: 0; background: #fff; }
  .ed > :not(.bd-print) { display: none !important; }
  .bd-print { display: block; color: #000; }
  .bd-print-page { break-after: page; }
  .bd-print-page:last-child { break-after: auto; }
  .bd-print-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin: 0 0 .12in; }
  .bd-print-head h2 { margin: 0; font: 900 20pt/1 var(--display); text-transform: uppercase; color: #000; }
  .bd-print-head p { margin: 0; font: 600 9pt/1.2 var(--sans); color: #333; }
  .bd-print-art svg { display: block; width: 100%; height: 7.05in; max-width: none; }
  .bd-print-schedule h2 { margin: 0 0 .1in; font: 900 16pt/1 var(--display); text-transform: uppercase; color: #000; }
  .bd-print-schedule table { width: 100%; border-collapse: collapse; font: 500 9pt/1.25 var(--sans); color: #000; }
  .bd-print-schedule th, .bd-print-schedule td { padding: 3pt 6pt; border-bottom: .5pt solid #999; text-align: left; }
  .bd-print-schedule th { font-weight: 700; border-bottom: 1pt solid #000; }
  .bd-print-schedule tr { break-inside: avoid; }
}

/* Coarse pointers: 44 px targets everywhere */
@media (pointer: coarse) {
  .ed-btn-small, .ed-link { min-height: 44px; }
  .ed-name-input { height: 44px; }
  .ed-team { min-height: 52px; }
  .ed-team-input { height: 44px; }
  .ed-team-tools { opacity: 1; }
  .ed-mini { width: 44px; height: 44px; }
}

/* Tablets */
@media (max-width: 1100px) {
  .ed-top { flex-wrap: wrap; gap: 12px 16px; }
  .ed-progress { width: 160px; }
  .ed-side { width: 300px; }
  .ed-main { padding: 16px 20px; }
  .vw-body { padding: 16px 20px 24px; }
}

/* Phones: round tabs with big match cards instead of the tree */
@media (max-width: 760px) {
  .ed { min-height: calc(100vh - 64px); }
  .ed-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 12px; padding: 14px 16px 12px; }
  .ed-name { grid-column: 1 / -1; }
  .ed-name-input { width: 100%; height: 36px; font-size: 26px; }
  .ed-tabs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 4px; border-radius: 12px; background: var(--hairline); }
  .vw .ed-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ed-tab { height: 44px; padding: 0 8px; border-radius: 9px; color: var(--body); }
  .ed-tab[aria-selected="true"] { background: #fff; box-shadow: 0 2px 6px -4px rgba(11, 29, 51, .5); }
  .ed-tab-teams { display: block; }
  .ed-grow { display: none; }
  .ed-progress { width: auto; min-width: 0; }
  .ed-actions { gap: 8px; }
  .ed-actions .ed-btn { padding: 0 12px; }
  #ed-print span, #vw-print span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ed-body { display: block; }
  .ed-side { width: auto; border-right: 0; padding: 16px; }
  .ed:not([data-view="teams"]) .ed-side { display: none; }
  .ed[data-view="teams"] .ed-main { display: none; }
  .ed-main { padding: 14px 16px 20px; }
  .ed-toolbar { align-items: flex-start; }
  .ed-status { font-size: 14px; }
  .ed-fit { display: none; }
  .bd-scroll { display: none; }
  .bd-rounds { display: flex; }
  .ed-legend { display: none; }
  .ed-foot { justify-content: center; }
  .bd-slot { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .bd-stime { margin: 0; }
  .bd-sgame { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 10px 12px; }
  .bd-sfield, .bd-sid { grid-column: 1; font-size: 13px; }
  .bd-sid { grid-row: 1; }
  .bd-sfield { grid-row: 1; justify-self: end; grid-column: 2; }
  .bd-steams { grid-column: 1 / -1; }
  .bd-sres { grid-column: 1; text-align: left; }
  .bd-sbtn { grid-column: 2; grid-row: 3; }
  .bd-table th, .bd-table td { padding: 10px 8px; }
  .bd-table tbody th { white-space: normal; }
  .vw-top { display: flex; flex-direction: column; align-items: stretch; }
  .vw-top .ed-actions { justify-content: space-between; }
  .vw-top .ed-actions .ed-btn:last-child { flex: 1; }
  .vw-body { padding: 14px 16px 24px; }
  .vw-name { font-size: 30px; }
  .ed-toast { bottom: 16px; }
  .ed-dialog-actions .ed-btn { flex: 1 1 auto; }
  .ed-dialog-actions .ed-grow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ed *, .ed *::before, .ed *::after { animation: none !important; transition: none !important; }
}