/* Chess Tournament tool. The shell comes from the TOOL PAGE TEMPLATE block in
   styles.css; only what is specific to this page lives here. */

.ct-heading {
  margin: 20px 0 4px;
  font-size: 1.05rem;
}

.ct-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px 16px;
  align-items: end;
}

.ct-grid .tool-label {
  margin-top: 4px;
}

.ct-grid .tool-input,
.ct-grid select.tool-input {
  font-size: 14px;
  padding: 7px 10px;
}

.ct-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0;
}

.ct-tabs .tool-button[aria-selected="true"] {
  background: var(--site-accent);
  border-color: var(--site-accent);
  color: var(--site-accent-contrast);
}

.ct-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

/* Header colors come from the site's thead rules, which each palette paints
   differently, so nothing here sets a header color. */
.ct-table {
  border-collapse: collapse;
  font-size: 1rem;
  margin: 0;
}

.ct-table th,
.ct-table td {
  padding: 8px 14px;
  border-bottom: 1px solid var(--site-control-border);
  text-align: left;
  white-space: nowrap;
  vertical-align: middle;
}

.ct-table th {
  font-weight: 600;
}

.ct-table td.ct-num,
.ct-table th.ct-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ct-table .tool-input {
  font-size: 15px;
  padding: 5px 8px;
  width: auto;
  min-width: 90px;
}

.ct-schedule {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 4px 0;
}

.ct-schedule label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--bs-secondary-color, #555);
}

.ct-schedule select.tool-input {
  width: auto;
  padding: 3px 6px;
  font-size: 14px;
}

.ct-table .ct-cell-name {
  min-width: 180px;
}

.ct-table .ct-cell-short {
  min-width: 70px;
  max-width: 90px;
}

.ct-table .tool-button {
  padding: 3px 8px;
  font-size: 12px;
}

.ct-table select.tool-input {
  min-width: 150px;
}

.ct-dim {
  color: var(--bs-secondary-color, #888);
}

.ct-withdrawn {
  text-decoration: line-through;
  color: var(--bs-secondary-color, #888);
}

.ct-symbols {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  margin: 4px 0;
}

.ct-symbols label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

.ct-symbols .tool-input {
  width: 90px;
  padding: 4px 8px;
  font-size: 14px;
}

.ct-drop {
  margin-top: 8px;
  padding: 12px;
  border: 2px dashed var(--site-control-border);
  border-radius: 6px;
  text-align: center;
  font-size: 13px;
  color: var(--bs-secondary-color, #555);
}

.ct-drop[data-active="true"] {
  border-color: var(--site-accent);
  background: var(--site-accent-soft);
}

.ct-scroll {
  max-height: 260px;
  overflow: auto;
  padding: 4px 8px;
  margin-top: 6px;
}

.ct-check-list {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 3 220px;
  column-gap: 16px;
  font-size: 14px;
}

.ct-check-list li {
  break-inside: avoid;
  padding: 2px 0;
}

.ct-check-list label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.ct-history {
  margin: 4px 0 4px 16px;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--bs-secondary-color, #555);
}

.ct-history li {
  padding: 1px 0;
}

.ct-crosstable td,
.ct-crosstable th {
  padding: 2px 5px;
  font-size: 12px;
}

.ct-crosstable td.ct-self {
  background: var(--site-control-border);
}

.ct-errors {
  margin: 6px 0 0;
  padding-left: 1.2rem;
  font-size: 13px;
  color: #b02a37;
}

.tool-status[data-tone="error"] {
  color: #b02a37;
}

.tool-status[data-tone="ok"] {
  color: #1a7f37;
}

.ct-about ul {
  margin: 0;
  padding-left: 1.2rem;
  font-size: 14px;
}

.ct-about li + li {
  margin-top: 4px;
}

#ct-copy-fallback {
  width: 100%;
  min-height: 120px;
  font-family: var(--font-mono);
  font-size: 12px;
}

#ct-print {
  display: none;
}

/* Printing shows only the sheet the organizer asked for. The visibility
   trick is what lets one subtree print while the page chrome stays out. */
@media print {
  body.ct-printing * {
    visibility: hidden;
  }

  body.ct-printing #ct-print,
  body.ct-printing #ct-print * {
    visibility: visible;
  }

  body.ct-printing #ct-print {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    padding: 12mm;
    color: #000;
    background: #fff;
  }

  body.ct-printing #ct-print h1 {
    font-size: 18pt;
    margin: 0 0 4pt;
  }

  body.ct-printing #ct-print p {
    margin: 0 0 8pt;
    font-size: 11pt;
  }

  body.ct-printing #ct-print table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11pt;
  }

  body.ct-printing #ct-print th,
  body.ct-printing #ct-print td {
    border-bottom: 1px solid #999;
    padding: 3pt 6pt;
    text-align: left;
  }
}

/* ============================================
   ANALYSIS
   ============================================
   Chart colors carry meaning rather than branding, so they are fixed values
   rather than the accent tokens, the same rule the chess board and the
   status colors follow. The light steps are validated against both light
   palettes and the dark steps against the dark surface, for lightness,
   chroma, contrast, and separation under protanopia and deuteranopia. The
   neutral is the midpoint of the White-to-Black bar and is meant to read as
   neither side, so it carries no hue. Charts set these as CSS properties
   rather than SVG attributes, which is what lets a figure follow the
   reader's palette with no redraw. */

#chess-tournament {
  --ct-series-1: #2a78d6;
  --ct-series-2: #eb6834;
  --ct-neutral: #8a8a8a;
  --ct-dim: #b4b4b4;
  --ct-grid: var(--site-control-border);
  --ct-ink: var(--bs-body-color, #333333);
  --ct-ink-muted: var(--bs-secondary-color, #666666);
  --ct-surface: var(--site-surface, #fafafa);
}

body.quarto-dark #chess-tournament {
  --ct-series-1: #3987e5;
  --ct-series-2: #d95926;
  --ct-neutral: #9a9a9a;
  --ct-dim: #5e5e5e;
}

.ct-chart {
  position: relative;
  margin-top: 6px;
}

.ct-chart svg text {
  font-family: inherit;
}

/* Stat tiles. The value uses proportional figures, because equal-width
   digits make a large standalone number look loose. */
.ct-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.ct-tile {
  padding: 10px 12px;
  border: 1.5px solid var(--site-control-border);
  border-radius: 8px;
  background: var(--bs-body-bg, #fff);
}

.ct-tile-label {
  font-size: 12px;
  color: var(--ct-ink-muted);
}

.ct-tile-value {
  margin-top: 2px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--ct-ink);
}

.ct-tile-note {
  margin-top: 2px;
  font-size: 12px;
  color: var(--ct-ink-muted);
}

.ct-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 8px;
  font-size: 13px;
  color: var(--ct-ink-muted);
}

.ct-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ct-legend-swatch {
  width: 14px;
  height: 10px;
  border-radius: 2px;
  flex: 0 0 auto;
}

.ct-tip {
  position: absolute;
  z-index: 5;
  transform: translate(-50%, -100%);
  padding: 6px 9px;
  border: 1px solid var(--site-control-border);
  border-radius: 6px;
  background: var(--bs-body-bg, #fff);
  color: var(--ct-ink);
  font-size: 12.5px;
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.ct-table-view {
  margin-top: 10px;
  font-size: 13px;
}

.ct-table-view > summary {
  cursor: pointer;
  color: var(--ct-ink-muted);
}

.ct-table-view .ct-table {
  margin-top: 8px;
  font-size: 13px;
}

.ct-table-view .ct-table th,
.ct-table-view .ct-table td {
  padding: 4px 10px;
}

.ct-finding {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
}

.ct-finding strong {
  color: var(--ct-ink);
}