/*
 * Only what a theme cannot know about.
 *
 * No font, no text colour, no background: those come from the site, which is the whole point of
 * rendering into it rather than into an iframe.
 *
 * Everything that does need a colour is mixed with `currentColor` — the theme's own text colour — so
 * the same declaration reads correctly on a dark theme and on a light one without this file knowing
 * which it is on. A flat #2f9e6b is muddy on one of the two; the same green mixed 25% into the text
 * colour is legible on both. That is the one trick this stylesheet turns on.
 */

.bho-ladder {
  --bho-line: color-mix(in srgb, currentColor 12%, transparent);
  --bho-line-strong: color-mix(in srgb, currentColor 22%, transparent);
  --bho-quiet: color-mix(in srgb, currentColor 60%, transparent);
  --bho-faint: color-mix(in srgb, currentColor 40%, transparent);
  --bho-panel: color-mix(in srgb, currentColor 4%, transparent);
  --bho-panel-strong: color-mix(in srgb, currentColor 7%, transparent);

  --bho-up: color-mix(in srgb, #17a673 78%, currentColor);
  --bho-down: color-mix(in srgb, #e2445c 78%, currentColor);
  --bho-live: color-mix(in srgb, #17a673 82%, currentColor);

  --bho-gold: color-mix(in srgb, #e8b32a 82%, currentColor);
  --bho-silver: color-mix(in srgb, #a8b3c2 82%, currentColor);
  --bho-bronze: color-mix(in srgb, #c9803c 82%, currentColor);

  font-variant-numeric: tabular-nums;
}

/* One label style for every section, so the page has a single rhythm. */
.bho-ladder .bho-eyebrow {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--bho-quiet);
}

/* ---------------------------------------------------------------- the table */

.bho-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 0;
}

.bho-table th,
.bho-table td {
  border: 0;
  border-bottom: 1px solid var(--bho-line);
  padding: 0.7rem 0.6rem;
  text-align: left;
  vertical-align: middle;
}

.bho-table thead th {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--bho-line-strong);
  background: var(--bho-panel);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--bho-quiet);
  white-space: nowrap;
}

.bho-table tbody tr:last-child th,
.bho-table tbody tr:last-child td { border-bottom: 0; }

/*
 * Element plus class, because `.bho-table td` alone would win on specificity and did: every numeric
 * column was silently left-aligned, which is what made the table look like it had no columns.
 */
.bho-table th.bho-num,
.bho-table td.bho-num { text-align: right; }

/*
 * A column head that sorts is a link, and looks like the head it replaced until it is hovered: a row
 * of blue underlined words above the standings would read as navigation, which is what the menu is.
 */
.bho-table thead a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  color: inherit;
  text-decoration: none;
}

.bho-table thead a:hover { color: var(--bho-strong, currentColor); text-decoration: underline; }
.bho-table th.bho-sorted { color: currentColor; }
.bho-arrow { font-size: 0.85em; opacity: 0.8; }

.bho-table th.bho-pos,
.bho-table td.bho-pos {
  width: 2.6rem;
  padding-right: 0;
  color: var(--bho-faint);
}

/* The right-hand end of the meta line: a date nobody looks for unless they are wondering. */
.bho-updated {
  margin: 0;
  text-align: right;
  font-size: 0.75rem;
  color: var(--bho-faint);
}

/* Fixed widths so the numbers sit in columns and the name absorbs whatever is left over. */
.bho-table th.bho-w-rating, .bho-table td.bho-w-rating { width: 5.5rem; }
.bho-table th.bho-w-rank,   .bho-table td.bho-w-rank   { width: 4.5rem; }
.bho-table th.bho-w-record, .bho-table td.bho-w-record { width: 6rem; }
.bho-table th.bho-w-games,  .bho-table td.bho-w-games  { width: 4.5rem; }
.bho-table th.bho-w-events, .bho-table td.bho-w-events { width: 5rem; }

.bho-table td.bho-rating { font-weight: 700; }

/* Games and events go first on a phone: the record column already carries both, one as its sum. */
@media (max-width: 40rem) {
  .bho-wide { display: none; }
  .bho-table th, .bho-table td { padding: 0.6rem 0.4rem; }
}

.bho-name a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  font-weight: 600;
  text-decoration: none;
  color: inherit;
}

.bho-name a:hover span { text-decoration: underline; }
.bho-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bho-row:hover { background: var(--bho-panel); }

/*
 * The podium as a bar down the left edge rather than a tinted row. A 9% amber wash over a near-black
 * background comes out olive, and over a white one comes out beige; a bar is the same idea and is the
 * medal's own colour on both.
 */
.bho-place-1 td:first-child { box-shadow: inset 3px 0 0 var(--bho-gold); }
.bho-place-2 td:first-child { box-shadow: inset 3px 0 0 var(--bho-silver); }
.bho-place-3 td:first-child { box-shadow: inset 3px 0 0 var(--bho-bronze); }

.bho-trophy { width: 17px; height: 17px; display: block; margin-left: 0.15rem; }
.bho-place-1 .bho-trophy { color: var(--bho-gold); }
.bho-place-2 .bho-trophy { color: var(--bho-silver); }
.bho-place-3 .bho-trophy { color: var(--bho-bronze); }

/*
 * A hairline mixed from the text colour and rounded corners: without them the black stripe of the
 * German flag runs into a dark background and the flag reads as two stripes.
 */
.bho-flag {
  width: 18px;
  height: 13px;
  flex: none;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px color-mix(in srgb, currentColor 30%, transparent);
}

/* ---------------------------------------------------------------- rank badges */

/*
 * Fill, hairline and text all mixed from one accent per class, so a badge is tuned in one place.
 *
 * Mixing every part with the page colour is what lets one declaration serve both themes: the same
 * mix brightens on a dark background and deepens on a light one. The fill leans on the page colour
 * more than on the accent — a chip that was mostly accent came out a muddy dark hue on the dark
 * theme — and the hairline is half strength, because at full `currentColor` it read as an outline.
 */
.bho-rank {
  display: inline-block;
  min-width: 1.7rem;
  padding: 0.12rem 0.35rem;
  border-radius: 5px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  color: color-mix(in srgb, var(--bho-accent) 70%, currentColor);
  background: color-mix(in srgb, var(--bho-accent) 14%, color-mix(in srgb, currentColor 12%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bho-accent) 50%, transparent);
}

/* Warming as it climbs. The two D classes have no colour of their own and borrow the page's. */
.bho-rank-warmaster { --bho-accent: #e8b32a; }
.bho-rank-aplus     { --bho-accent: #e2445c; }
.bho-rank-a         { --bho-accent: #e07b2a; }
.bho-rank-b         { --bho-accent: #17a673; }
.bho-rank-c         { --bho-accent: #2f8fd4; }
.bho-rank-d         { --bho-accent: currentColor; color: var(--bho-quiet); }
.bho-rank-dminus    { --bho-accent: currentColor; color: var(--bho-faint); }

/*
 * A page wrapping two shortcodes in `<div class="bho-columns">` gets them side by side above 60rem
 * and stacked below it. Here rather than in the theme because the blocks are the plugin's and a site
 * should not have to write CSS to arrange them; `minmax(0, …)` because a grid column defaults to
 * min-content and a long handle would otherwise push the pair wider than the page.
 */
.bho-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
  align-items: start;
}

/*
 * The air under the table, wherever the band below it is one column or two. On the sibling of the
 * table rather than on the blocks themselves: their own headings sit at margin zero so that they
 * start level inside a column, and `[bho_ladder rules="0"]` left the games glued to the last row.
 */
.bho-ladder > .bho-table ~ .bho-columns,
.bho-ladder > .bho-table ~ .bho-group,
.bho-ladder > .bho-table ~ .bho-rules { margin-top: 2.2rem; }

.bho-columns .bho-rules { margin-top: 0; }

@media (min-width: 60rem) {
  .bho-columns { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 2.4rem; }
}

/* ---------------------------------------------------------------- rules panel */

.bho-rules {
  margin: 1.6rem 0 0;
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--bho-line);
  border-radius: 12px;
  background: var(--bho-panel);
}

.bho-rules-line { margin: 0.8rem 0 0; font-size: 0.9rem; }
.bho-rules-line strong { font-variant-numeric: tabular-nums; }

/* The small grey caption above each part. The parenthetical after it is quieter still. */
.bho-rules-label {
  margin: 1.1rem 0 0.4rem;
  font-size: 0.78rem;
  color: var(--bho-quiet);
}

.bho-rules-label span { color: var(--bho-faint); }

.bho-rules-points {
  width: auto;
  min-width: min(100%, 21rem);
  border-collapse: collapse;
  font-size: 0.85rem;
}

/* Centred, not right-aligned: the three headings are of very different lengths, and a number pushed
   to the right edge of "gleiche Klasse" reads as belonging to the column beside it. */
.bho-rules-points th,
.bho-rules-points td {
  padding: 0.28rem 0.7rem;
  text-align: center;
  white-space: nowrap;
}

.bho-rules-points thead th {
  font-weight: 400;
  font-size: 0.76rem;
  color: var(--bho-quiet);
  border-bottom: 1px solid var(--bho-line);
}

.bho-rules-points tbody th { text-align: left; font-weight: 600; padding-left: 0; padding-right: 1.2rem; }
.bho-rules-points td { font-variant-numeric: tabular-nums; }

.bho-rules-bonus { display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; margin: 0; font-size: 0.85rem; }
.bho-rules-place { display: inline-flex; align-items: baseline; gap: 0.35rem; }

/* Inside the panel the legend needs no rule above it — the caption already separates it. */
.bho-rules .bho-legend { margin: 0; padding: 0; border-top: 0; }

/* ---------------------------------------------------------------- legend, notes, panels */

.bho-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  margin: 1.1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--bho-line);
  font-size: 0.78rem;
}

.bho-legend-item { display: inline-flex; align-items: center; gap: 0.4rem; }
/*
 * The range only. `> span` also matched the badge beside it and, standing later in this file, quietly
 * repainted every class in the legend the same grey — the colours showed in the table alone.
 */
.bho-legend-range { color: var(--bho-quiet); }

.bho-foot { margin: 0.9rem 0 0; font-size: 0.8rem; color: var(--bho-quiet); }

.bho-note,
.bho-notice {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  background: var(--bho-panel);
  border: 1px solid var(--bho-line);
  border-left: 3px solid color-mix(in srgb, #d19a00 60%, currentColor);
  font-size: 0.87rem;
}

/*
 * The line above the table: what is being played on the left, when it was last read on the right.
 * Wraps to two lines on a phone, where the right column has nowhere to go.
 */
.bho-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.3rem 1.2rem;
  margin: 0 0 0.9rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--bho-line);
}

.bho-live { min-width: 0; }
.bho-live p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; margin: 0; }
.bho-live p + p { margin-top: 0.2rem; }
.bho-live strong { font-weight: 600; }
.bho-live span { color: var(--bho-quiet); font-size: 0.85rem; }
.bho-live a { font-size: 0.85rem; }
.bho-live .bho-eyebrow { color: var(--bho-quiet); }

.bho-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bho-live);
  flex: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bho-live) 22%, transparent);
}



/* ---------------------------------------------------------------- lists of games */

.bho-group {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem;
  margin: 2rem 0 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--bho-quiet);
}

.bho-group span { letter-spacing: 0; text-transform: none; color: var(--bho-faint); }
.bho-group:first-child { margin-top: 0; }

.bho-recent,
.bho-games { list-style: none; margin: 0.5rem 0 0; padding: 0; }

/* Beside the round marker, in the same quiet grey: the row is read for its names and its score. */
.bho-day {
  width: 4.2rem;
  flex: none;
  font-size: 0.8rem;
  color: var(--bho-faint);
  font-variant-numeric: tabular-nums;
}

.bho-recent li,
.bho-games li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.7rem;
  padding: 0.6rem 0.1rem;
  border-bottom: 1px solid var(--bho-line);
  font-size: 0.9rem;
}

/*
 * Every row keeps its line, the last one included. Dropping it on `:last-child` looked right until
 * the list was split in two: row three is the last of the first list, so the line between it and row
 * four went missing the moment the fold was opened.
 */

/*
 * Two of these blocks on one page is the normal case now — the table and the latest games are
 * separate shortcodes — and each one is a wrapper of its own, so nothing else would separate them.
 */
.bho-ladder + .bho-ladder { margin-top: 2.5rem; }

.bho-round { width: 1.8rem; flex: none; color: var(--bho-faint); }
.bho-side { display: flex; align-items: baseline; gap: 0.45rem; flex: 1 1 0; min-width: 0; }
.bho-side a { color: inherit; text-decoration: none; font-weight: 600; }
.bho-side a:hover { text-decoration: underline; }
.bho-right { justify-content: flex-end; }

/* Each side's box sits at its inner edge, so the two of them meet either side of the dash. */
.bho-side > .bho-score-box:last-child { margin-left: auto; }
.bho-side > .bho-score-box:first-child { margin-right: auto; }
.bho-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  flex: none;
  color: var(--bho-quiet);
}

/*
 * `ch` off the box's own monospace font, so two digits fit exactly. Padding and border are added by
 * hand because a theme's `box-sizing: border-box` counts them inside `min-width` — with a plain 2ch
 * a one-digit box came out 9px narrower than its neighbour, which was the whole complaint.
 */
.bho-score-box {
  min-width: calc(2ch + 0.6rem + 2px);
  padding: 0.05rem 0.3rem;
  border: 1px solid var(--bho-line-strong);
  border-radius: 4px;
  background: var(--bho-panel);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.bho-score-sep { color: var(--bho-faint); }

.bho-opponent {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 0;
  min-width: 0;
  font-weight: 600;
  text-decoration: none;
  color: inherit;
}

.bho-opponent span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bho-opponent:hover span { text-decoration: underline; }

/* Wide enough for the longest word any of the three languages puts here ("Niederlage"). */
.bho-result { width: 5.5rem; flex: none; text-align: right; font-weight: 600; }
.bho-win { color: var(--bho-up); }
.bho-draw { color: var(--bho-quiet); }
.bho-loss { color: var(--bho-down); }

.bho-delta { width: 2.8rem; flex: none; text-align: right; }
.bho-after { width: 3.2rem; flex: none; text-align: right; font-size: 0.8rem; color: var(--bho-faint); }

/* Its own line: two kill team names and a "vs" cannot be a column next to anything else. */
.bho-teams { flex: 1 0 100%; padding-left: 2.5rem; font-size: 0.78rem; color: var(--bho-quiet); }
.bho-teams em { font-style: normal; color: var(--bho-faint); }

.bho-change { font-weight: 700; }
.bho-up { color: var(--bho-up); }
.bho-down { color: var(--bho-down); }
.bho-flat, .bho-none { color: var(--bho-faint); }

/* ---------------------------------------------------------------- a player's page */

.bho-back { margin: 0 0 1rem; font-size: 0.85rem; }

.bho-player-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--bho-line-strong);
}

.bho-player-head h2 { display: flex; align-items: center; gap: 0.6rem; margin: 0; line-height: 1.2; }
.bho-player-head h2 .bho-flag { width: 26px; height: 19px; }
.bho-player-rating { margin: 0; text-align: right; line-height: 1.2; }
.bho-player-rating strong { display: block; font-size: 1.9rem; }
.bho-player-rating span { font-size: 0.78rem; color: var(--bho-quiet); }
.bho-player .bho-foot { margin-top: 0.7rem; }

/* ---------------------------------------------------------------- the games block and its table */

/*
 * The fold is a <details>, so the rows past the third are in the HTML and the browser does the
 * hiding. A link that reloaded the page would cost a round trip for something already fetched.
 */
/*
 * A player per line on a phone, under the round and the day.
 *
 * One line cannot hold both: 390 pixels minus the round, the day and the score leave about 140 for a
 * flag, a name and a rating change each, and a flexible item shrinks before a row breaks, so the
 * names ran into the score. Truncating them was the alternative, and the names are what a row is for.
 *
 * Each line is a grid rather than a flex row, with the column named for every child: the second side
 * is written mirrored for the wide layout, and a grid can put its four parts back in reading order
 * without a second set of markup. Fixed last two columns so the changes and the boxes of both lines
 * line up under each other — ragged numbers down a list is what made this look unfinished.
 */
@media (max-width: 34rem) {
  .bho-recent li { row-gap: 0.15rem; padding: 0.55rem 0.1rem; }
  .bho-recent .bho-score-sep { display: none; }

  .bho-recent .bho-side {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 2.6rem auto;
    align-items: center;
    gap: 0 0.45rem;
    flex: 1 1 100%;
  }

  /* All on one row, or the mirrored side is auto-placed onto a second one, column by column. */
  .bho-recent .bho-side > * { grid-row: 1; }
  .bho-recent .bho-side > .bho-flag { grid-column: 1; }
  .bho-recent .bho-side > a {
    grid-column: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .bho-recent .bho-side > .bho-change { grid-column: 3; text-align: right; }
  .bho-recent .bho-side > .bho-score-box { grid-column: 4; margin: 0; }
}

.bho-quiet { color: var(--bho-quiet); }

/* The event, only printed where the page holds more than one — see BHO_Render::allGames(). */
.bho-event { flex: none; font-size: 0.78rem; color: var(--bho-faint); }

/* The chip that says a result was taken out, beside the kill teams it was played with. */
.bho-tag {
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--bho-panel-strong);
  font-style: normal;
  font-size: 0.72rem;
  color: var(--bho-quiet);
  text-decoration: none;
}

/* One side of a game, not the row: the other player's result stands. */
.bho-excluded { color: var(--bho-faint); }
.bho-excluded a { color: inherit; text-decoration: line-through; }

.bho-pager {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin: 1rem 0 0;
  font-size: 0.85rem;
}

.bho-pager a { color: inherit; }
.bho-pager span { color: var(--bho-faint); }
.bho-pager-of { margin-left: auto; }