/* Chaveamento de futebol, page only */

.trno {
  --trno-accent: #1f6feb;
  --trno-accent-dark: #0d47c2;
  --trno-navy: #0b1f4d;
  --trno-title: #1546c9;
  --trno-ink: #0f172a;
  --trno-body: #334155;
  --trno-muted: #64748b;
  --trno-line: #e3e8f1;
  --trno-card: #fff;
  --trno-soft: #f7f9fc;
  --trno-head: #d6e6ff;
  --trno-lead: #3f63d8;
  --trno-orange: #f59e0b;
  display: grid;
  gap: 16px;
  align-items: start;
  margin: 0 0 28px;
  color: var(--trno-ink);
}

.trno,
.trno * {
  overflow-wrap: normal;
  word-break: normal;
}

@media (min-width: 1100px) {
  .trno {
    grid-template-columns: 250px minmax(0, 1fr) 318px;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "left steps right"
      "left center right";
  }

  .trno-left { grid-area: left; }
  .trno-stepbar { grid-area: steps; }
  .trno-center { grid-area: center; }
  .trno-right { grid-area: right; }
}

/* Break out of the 1152px article column, same as the converter pages */
@media (min-width: 1360px) {
  .trno {
    --trno-w: min(1600px, calc(100vw - 96px));
    width: var(--trno-w);
    margin-left: calc((100% - var(--trno-w)) / 2);
    grid-template-columns: clamp(250px, 18vw, 300px) minmax(0, 1fr) clamp(318px, 23vw, 380px);
    column-gap: 22px;
  }
}

.trno-left,
.trno-center,
.trno-right {
  min-width: 0;
}

.trno-right {
  display: grid;
  gap: 14px;
}

/* Reset article spacing inside the tool */
.article .trno p,
.article .trno li,
.article .trno h2,
.article .trno h3,
.article .trno ol,
.article .trno ul {
  margin: 0;
}

/* Left column */

.article .trno-h1 {
  margin: 0 0 10px;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--trno-navy);
}

.article .trno-lead {
  margin: 0 0 16px;
  color: var(--trno-lead);
  font-size: 1.12rem;
  font-weight: 400;
  line-height: 1.3;
}

.trno-panel,
.trno-sheet,
.trno-phase,
.trno-bracket-wrap,
.trno-empty,
.trno-stepbar,
.trno-result {
  background: var(--trno-card);
  border: 1px solid var(--trno-line);
  border-radius: 14px;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
}

.trno-panel {
  padding: 14px;
  display: grid;
  gap: 14px;
}

.trno-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--trno-ink);
}

.trno-input,
.trno-textarea,
.trno-select {
  width: 100%;
  font: inherit;
  font-size: 0.95rem;
  color: var(--trno-ink);
  background: #fff;
  border: 1px solid #d9e0ea;
  border-radius: 8px;
  padding: 8px 12px;
  box-sizing: border-box;
  line-height: 1.35;
}

.trno-textarea {
  min-height: 176px;
  resize: vertical;
  line-height: 1.32;
}

.article .trno-hint {
  margin: 6px 0 0;
  color: var(--trno-muted);
  font-size: 0.78rem;
  line-height: 1.3;
}

.trno-formats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.trno-format {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dbe7fb;
  background: #e8f0fd;
  color: var(--trno-ink);
  border-radius: 8px;
  padding: 9px 10px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  position: relative;
}

.trno-format input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.trno-format:has(input:checked),
.trno-format.is-on {
  background: var(--trno-accent-dark);
  border-color: var(--trno-accent-dark);
  color: #fff;
}

.trno-format:has(input:focus-visible) {
  outline: 2px solid var(--trno-accent);
  outline-offset: 2px;
}

.trno-checks {
  display: grid;
  gap: 8px;
}

.trno-check {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--trno-body);
}

.trno-check input {
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  flex: 0 0 auto;
  accent-color: var(--trno-accent);
}

.article #trno-pots-hint {
  margin: 2px 0 0 25px;
  font-size: 0.72rem;
}

#trno-groups-row .trno-label {
  margin-top: 4px;
}

.trno-submit,
.trno-btn {
  appearance: none;
  border: 0;
  background: var(--trno-accent);
  color: #fff;
  font: inherit;
  font-weight: 700;
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  line-height: 1.2;
}

.trno-submit {
  width: 100%;
  padding: 13px 14px;
  font-size: 1rem;
  box-shadow: 0 6px 16px rgba(31, 111, 235, 0.25);
}

.trno-submit:hover,
.trno-btn:hover { filter: brightness(0.95); }

.trno-submit svg { width: 22px; height: 22px; flex: 0 0 auto; }

.trno-btn svg,
.trno-sec svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.trno-btn-ghost {
  background: #fff;
  color: var(--trno-ink);
  border: 1px solid #d9e0ea;
}

.trno-btn-tiny {
  padding: 4px 8px;
  font-size: 0.75rem;
  border-radius: 999px;
}

.article .trno-quiet {
  display: flex;
  gap: 14px;
  margin: -6px 0 0;
}

.trno-link {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  color: var(--trno-muted);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
  text-decoration: underline;
}

.article .trno-status {
  margin: 0;
  font-size: 0.86rem;
}

.trno-status:empty { display: none; }

.trno-status.is-bad {
  color: #9f1239;
  font-weight: 700;
}

/* Steps bar (same compact card as the converter pages) */

.trno-stepbar { padding: 12px; }

.article .trno-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.article .trno-step {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
}

.trno-step > span:last-child { min-width: 0; }

.trno-step strong,
.trno-step span span { display: block; }

.trno-step strong {
  color: var(--trno-ink);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.3;
}

.trno-step span span {
  color: var(--trno-muted);
  font-size: 0.7rem;
  line-height: 1.25;
}

.trno-step-n {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #475569;
  display: grid;
  place-items: center;
  font-size: 0.82rem;
  font-weight: 800;
  flex: 0 0 auto;
}

.trno-step:first-child .trno-step-n,
.trno-step.is-on .trno-step-n {
  background: var(--trno-accent);
  color: #fff;
}

.article .trno-step:first-child strong,
.article .trno-step.is-on strong { color: var(--trno-accent); }

html[data-theme="dark"] .article .trno-step:first-child strong,
html[data-theme="dark"] .article .trno-step.is-on strong { color: #93b4ff; }

.trno-step-arrow { display: none; }

/* Output */

.trno-out {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.trno-empty { padding: 22px 18px; }

.article .trno-empty-title {
  margin: 0 0 6px;
  font-weight: 800;
  color: var(--trno-navy);
}

.trno-empty p:last-child { color: var(--trno-muted); }

.article .trno-sec {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 1.22rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--trno-title);
}

.article .trno-sec svg {
  width: 26px;
  height: 26px;
  color: var(--trno-accent);
}

.trno-phase .trno-sec svg { color: #f5b301; }

.trno-phase,
.trno-bracket-wrap,
.trno-sheet {
  padding: 14px 16px 16px;
  min-width: 0;
}

.trno-sheet { overflow-x: auto; padding-left: 12px; padding-right: 12px; }

.trno-groups {
  display: grid;
  gap: 18px;
}

@media (min-width: 720px) {
  .trno-groups { grid-template-columns: 1fr 1fr; }
}

.trno-gcard {
  border: 1px solid var(--trno-line);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  min-width: 0;
}

.article .trno-gcard h3 {
  margin: 0;
  padding: 7px 12px;
  background: var(--trno-head);
  color: var(--trno-navy);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.3;
}

.article .trno-glist {
  list-style: none;
  margin: 0;
  padding: 0;
}

.article .trno-glist li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 7px 12px;
  border-top: 1px solid #eef2f7;
  font-size: 0.95rem;
  line-height: 1.3;
}

.article .trno-glist li:first-child { border-top: 0; }

.trno-rank {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--trno-accent);
  color: #fff;
  display: inline-grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 800;
  flex: 0 0 auto;
}

.trno-gcard:nth-child(2n) .trno-rank { background: var(--trno-orange); }
.trno-gcard:nth-child(4n+3) .trno-rank { background: #10b981; }
.trno-glist li:nth-child(3) .trno-rank { background: #64748b; }
.trno-glist li:nth-child(n+4) .trno-rank { background: #a3adbb; }

.trno-gname {
  font-weight: 400;
  min-width: 0;
  overflow-wrap: anywhere;
}

.trno-mini-pts {
  margin-left: auto;
  color: var(--trno-muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.article .trno-wait {
  padding: 6px 12px 8px;
  border-top: 1px solid #eef2f7;
  font-size: 0.74rem;
  line-height: 1.3;
}

.trno-notes {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.article .trno-note,
.article .trno-late,
.article .trno-ok {
  font-size: 0.8rem;
  line-height: 1.35;
}

.trno-wait,
.trno-note { color: var(--trno-muted); }

.trno-late {
  background: #fff1f2;
  color: #9f1239;
  border-radius: 8px;
  padding: 8px 10px;
  font-weight: 700;
}

.trno-ok {
  color: #047857;
  font-weight: 700;
}

/* Bracket */

.trno-bracket {
  display: flex;
  gap: 10px;
  overflow-x: auto;
}

.trno-round {
  flex: 1 0 160px;
  border: 1px solid var(--trno-line);
  border-radius: 10px;
  padding: 8px;
  background: var(--trno-soft);
}

.article .trno-round h3 {
  margin: 0 0 8px;
  font-size: 0.85rem;
  color: var(--trno-navy);
}

.article .trno-round .trno-third-h { margin-top: 10px; }

.trno-bmatch {
  border: 1px solid var(--trno-line);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 8px;
  background: #fff;
  font-size: 0.88rem;
}

.trno-bside {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 8px;
  border-top: 1px solid var(--trno-line);
}

.trno-bside:first-child { border-top: 0; }

.trno-bside.is-win {
  background: #eff6ff;
  font-weight: 800;
}

/* Games table */

.trno-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--trno-line);
  border-radius: 8px;
  overflow: hidden;
  font-size: 0.83rem;
  margin: 0;
}

.article .trno-table { display: table; max-width: none; }
.article .trno-table thead { display: table-header-group; }
.article .trno-table tbody { display: table-row-group; }

.article .trno-table tr {
  display: table-row;
  width: auto;
  min-width: 0;
  padding: 0;
  border-radius: 0;
  background: none;
}

.article .trno-table th,
.article .trno-table td {
  min-width: 0;
  letter-spacing: normal;
}

.article .trno-table th {
  text-align: center;
  font-size: 0.8rem;
  color: var(--trno-ink);
  font-weight: 800;
  padding: 7px 6px;
  background: #eaf1fc;
  border: 0;
  border-left: 1px solid var(--trno-line);
}

.article .trno-table td {
  padding: 4px 6px;
  border: 0;
  border-top: 1px solid var(--trno-line);
  border-left: 1px solid var(--trno-line);
  vertical-align: middle;
  text-align: center;
  color: var(--trno-body);
  font-weight: 400;
  white-space: nowrap;
  background: #fff;
}

.article .trno-table th:first-child,
.article .trno-table td:first-child { border-left: 0; }

.article .trno-table tbody tr:nth-child(even) td { background: var(--trno-soft); }

.article .trno-table td[data-label="Confronto"] { white-space: normal; width: 52%; }

.trno-game {
  display: grid;
  grid-template-columns: 1fr auto auto auto 1fr;
  align-items: center;
  gap: 4px 5px;
}

.trno-side {
  font-weight: 400;
  color: var(--trno-ink);
  text-align: right;
}

.trno-side-b { text-align: left; }

.trno-score {
  width: 1.6rem;
  height: 1.5rem;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  text-align: center;
  border: 1px solid #dbe2ec;
  border-radius: 6px;
  padding: 0 2px;
  background: #fff;
  color: var(--trno-ink);
  box-sizing: border-box;
}

.trno-score:placeholder-shown { background: transparent; }

.trno-x { color: var(--trno-muted); }

.trno-pill {
  display: inline-block;
  min-width: 1.6rem;
  text-align: center;
  border-radius: 6px;
  padding: 1px 6px;
  font-weight: 700;
  font-size: 0.76rem;
  background: #dbeafe;
  color: #1d4ed8;
}

.trno-pill.is-b,
.trno-pill.is-d,
.trno-pill.is-f,
.trno-pill.is-h { background: #ffedd5; color: #ea580c; }
.trno-pill.is-c,
.trno-pill.is-g { background: #dcfce7; color: #15803d; }
.trno-pill.is-ko { background: #e0e7ff; color: #3730a3; }

.trno-pick,
.trno-advanced {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  align-items: center;
  font-size: 0.76rem;
}

.trno-advanced { color: #047857; font-weight: 700; }

/* Right column: settings */

.trno-settings {
  gap: 0;
  padding: 14px 14px 16px;
}

.article .trno-settings .trno-sec { margin-bottom: 14px; }

.trno-set {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 118px;
  gap: 0 10px;
  align-items: center;
  border: 1px solid var(--trno-line);
  border-top: 0;
  padding: 4px 4px 4px 10px;
  background: #fff;
  font-size: 0.8rem;
  color: var(--trno-ink);
  line-height: 1.25;
}

.trno-settings .trno-sec + .trno-set {
  border-top: 1px solid var(--trno-line);
  border-radius: 8px 8px 0 0;
}

.trno-set svg {
  width: 18px;
  height: 18px;
  color: var(--trno-navy);
}

.trno-set .trno-input,
.trno-set .trno-select {
  width: 100%;
  padding: 6px 8px;
  font-size: 0.86rem;
  border-radius: 6px;
  border: 1px solid #dbe2ec;
  background: #fff;
}

.trno-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 8px 10px 10px;
  border: 1px solid var(--trno-line);
  border-top: 0;
  background: var(--trno-soft);
}

.trno-fields:empty { display: none; }

.trno-field span {
  display: block;
  font-size: 0.7rem;
  color: var(--trno-muted);
  margin-bottom: 2px;
}

.trno-field .trno-input {
  padding: 5px 8px;
  font-size: 0.84rem;
  border-radius: 6px;
}

.trno-settings .trno-set:last-of-type { border-radius: 0 0 8px 8px; }

.article .trno-settings .trno-hint {
  margin-top: 10px;
  font-size: 0.74rem;
}

/* Result card */

.trno-result { overflow: hidden; }

.trno-success {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  background: #e9f9ef;
  padding: 14px 16px;
}

.trno-success[hidden] { display: none; }

.trno-success-ic {
  width: 44px;
  height: 44px;
  color: #22a559;
}

.article .trno-success-title {
  margin: 0 0 2px;
  color: #16a34a;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.25;
}

.article .trno-success-sub {
  margin: 0;
  color: #1f8a4c;
  font-size: 0.85rem;
  line-height: 1.35;
}

.trno-actions {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 8px;
  padding: 12px;
}

.trno-actions .trno-btn {
  font-size: 0.78rem;
  gap: 6px;
  padding: 10px 6px;
  line-height: 1.2;
  white-space: nowrap;
}

.trno-share {
  grid-column: 1 / -1;
}

.trno-actions .trno-share {
  background: #f3f5f9;
  border-color: #e1e6ee;
}

/* Tips */

.trno-tips {
  background: #fffaeb;
  border: 1px solid #fbefc4;
  border-radius: 14px;
  padding: 14px 16px 16px;
}

.article .trno-tips h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--trno-navy);
}

.trno-tips h2 svg {
  width: 28px;
  height: 28px;
  color: #f5c518;
  flex: 0 0 auto;
}

.article .trno-tips ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.article .trno-tips li {
  position: relative;
  margin: 0;
  padding-left: 30px;
  font-size: 0.86rem;
  line-height: 1.35;
  color: var(--trno-ink);
}

.article .trno-tips li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f5c518 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%230b1f4d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='m5.5 10.3 3 2.9 6-6.2'/%3E%3C/svg%3E") center / 20px no-repeat;
}

.trno-btn:focus-visible,
.trno-submit:focus-visible,
.trno-input:focus-visible,
.trno-textarea:focus-visible,
.trno-select:focus-visible,
.trno-score:focus-visible,
.trno-link:focus-visible {
  outline: 2px solid var(--trno-accent);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .article .trno-h1 { font-size: 1.5rem; }
  .article .trno-lead { font-size: 1rem; }

  .trno-stepbar { display: none; }

  .article .trno-table,
  .article .trno-table tbody { display: block; border: 0; }

  .article .trno-table thead { display: none; }

  .article .trno-table tr {
    display: block;
    border: 1px solid var(--trno-line);
    border-radius: 10px;
    margin-bottom: 8px;
    padding: 8px 10px;
    background: #fff;
  }

  .article .trno-table td,
  .article .trno-table tbody tr:nth-child(even) td {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    border: 0;
    text-align: right;
    padding: 3px 0;
    background: transparent;
    white-space: normal;
  }

  .article .trno-table td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--trno-muted);
  }

  .article .trno-table td[data-label="Confronto"] {
    display: block;
    width: auto;
    text-align: left;
  }

  .article .trno-table td[data-label="Confronto"]::before {
    display: block;
    margin-bottom: 4px;
  }

  .trno-set { grid-template-columns: 22px minmax(0, 1fr) 128px; }
}

html[data-theme="dark"] .trno {
  --trno-navy: #e2e8f0;
  --trno-title: #93b4ff;
  --trno-ink: #e5e7eb;
  --trno-body: #cbd5e1;
  --trno-muted: #94a3b8;
  --trno-line: #1f2937;
  --trno-card: #0f172a;
  --trno-soft: #111827;
  --trno-head: #1e2b4d;
  --trno-lead: #a5b8f5;
}

html[data-theme="dark"] .trno-input,
html[data-theme="dark"] .trno-textarea,
html[data-theme="dark"] .trno-select,
html[data-theme="dark"] .trno-set,
html[data-theme="dark"] .trno-set .trno-input,
html[data-theme="dark"] .trno-set .trno-select,
html[data-theme="dark"] .trno-gcard,
html[data-theme="dark"] .trno-bmatch,
html[data-theme="dark"] .trno-score,
html[data-theme="dark"] .trno-btn-ghost,
html[data-theme="dark"] .trno-actions .trno-share,
html[data-theme="dark"] .article .trno-table td {
  background: #0b1220;
  color: #e5e7eb;
  border-color: #1f2937;
}

html[data-theme="dark"] .article .trno-table tbody tr:nth-child(even) td { background: #111827; }

html[data-theme="dark"] .trno-step-n { background: #334155; color: #cbd5e1; }

html[data-theme="dark"] .trno-format {
  background: #111827;
  border-color: #1f2937;
  color: #e5e7eb;
}

html[data-theme="dark"] .trno-format:has(input:checked) {
  background: var(--trno-accent);
  border-color: var(--trno-accent);
  color: #fff;
}

html[data-theme="dark"] .article .trno-table th { background: #16213a; }

html[data-theme="dark"] .article .trno-glist li,
html[data-theme="dark"] .article .trno-wait { border-color: #1f2937; }

html[data-theme="dark"] .trno-late {
  background: #3f1d24;
  color: #fecdd3;
}

html[data-theme="dark"] .trno-success { background: #052e16; }

html[data-theme="dark"] .article .trno-success-title,
html[data-theme="dark"] .article .trno-success-sub { color: #bbf7d0; }

html[data-theme="dark"] .trno-tips {
  background: #292010;
  border-color: #854d0e;
}

html[data-theme="dark"] .article .trno-tips li { color: #e5e7eb; }

@media print {
  body * { visibility: hidden; }

  #trno-out,
  #trno-out * { visibility: visible; }

  #trno-out {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }

  .trno-no-print { display: none !important; }
}