/* The stats page's new cards (staging, 2026-10-25): beta/stats-extra.js. Uses the page's own card classes. */
.bkx-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: #8a5a00; background: #fff4d6; border: 1px solid #f3d58a; border-radius: 999px; padding: 3px 10px; margin: 0 0 12px; line-height: 1.4; }
.bkx-badge svg { flex: none; }
.bkx-note { font-size: 12px; color: var(--text-light, #64748b); margin: 12px 0 0; line-height: 1.5; }
.bkx-empty { padding: 26px 10px; text-align: center; color: var(--text-light, #64748b); font-size: 14px; }
.bkx-lead { font-size: 14px; margin: 0 0 10px; color: var(--text-light, #64748b); }
.bkx-lead strong { color: var(--text, #1e293b); }
.bkx-switch { display: flex; flex-wrap: wrap; gap: 6px; }
.bkx-bars { display: grid; gap: 9px; }
.bkx-bar { display: grid; grid-template-columns: minmax(110px, 38%) 1fr auto; gap: 10px; align-items: center; font-size: 13.5px; }
.bkx-bar .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bkx-bar .trk { height: 10px; border-radius: 6px; background: rgba(127, 127, 127, .14); overflow: hidden; }
.bkx-bar .trk span { display: block; height: 100%; border-radius: 6px; background: var(--primary-color, rgb(10, 122, 252)); }
.bkx-bar .val { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 64px; text-align: right; }
.bkx-bar .val small { font-weight: 500; color: var(--text-light, #64748b); margin-left: 4px; }
.bkx-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bkx-tiles.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bkx-tiles.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* the same boxes as the page's "Records" */
.bkx-tile { background: var(--section-bg, #f8f9fa); border-radius: 10px; padding: 12px; min-width: 0; }
.bkx-tile .k { font-size: 13px; color: var(--text-dark); font-weight: 600; }
.bkx-tile .v { font-size: 20px; font-weight: 700; color: var(--primary-color); margin-top: 2px; font-variant-numeric: tabular-nums; }
.bkx-tile .s { font-size: 12px; color: var(--text-light); margin-top: 2px; line-height: 1.4; }
@media (max-width: 760px) { .bkx-tiles.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .bkx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bkx-list { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow: auto; }
.bkx-list li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 2px; border-bottom: 1px solid rgba(127, 127, 127, .14); font-size: 14px; }
.bkx-list li a { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bkx-list li span { color: var(--text-light, #64748b); white-space: nowrap; font-size: 13px; }
.bkx-search { display: flex; gap: 8px; margin: 10px 0; }
.bkx-search input { flex: 1; min-width: 0; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(127, 127, 127, .3); font: inherit; background: transparent; color: inherit; }
.bkx-spark { width: 100%; height: 34px; display: block; }
.bkx-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.bkx-table td, .bkx-table th { padding: 8px 6px; border-bottom: 1px solid rgba(127, 127, 127, .14); text-align: left; }
.bkx-table th { font-size: 12px; color: var(--text-light, #64748b); font-weight: 600; }
.bkx-table td.n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.bkx-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .bkx-two { grid-template-columns: 1fr; } .bkx-bar { grid-template-columns: minmax(90px, 40%) 1fr auto; } }
/* the page centres short card contents vertically: these start at the top */
.card-content:has([data-bkx]), .card-content:has(canvas[id^="bkx"]), .card-content:has(#bkx-top5) { display: block !important; }
.bkx-h { font-size: 13px; font-weight: 700; color: var(--text-dark); margin: 18px 0 10px; }
#bkx-act-kpis .kpi-strip { margin-top: 2px; }
.bkx-faq { margin-top: 16px; } .bkx-faq h3 { font-size: 15px; margin: 16px 0 4px; color: var(--text-dark); } .bkx-faq h3:first-child { margin-top: 0; } .bkx-faq p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-dark); }
/* Newest accounts by type: full width, the list in two columns on wide screens */
#bkx-newest .bkx-list { max-height: none; columns: 2; column-gap: 32px; }
#bkx-newest .bkx-list li { break-inside: avoid; }
@media (max-width: 768px) { #bkx-newest .bkx-list { columns: 1; max-height: 460px; } }

/* A little colour (owner, 2026-10-25: "a little dry"): icons on the card titles and rows, accents on the figure
   boxes, all from the theme's colour (var(--primary-color)), so every theme follows */
.bkx-tico { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; margin-right: 10px; vertical-align: -8px; flex: none;
    color: var(--primary-color); background: rgba(10, 122, 252, .1); background: color-mix(in srgb, var(--primary-color) 13%, transparent); }
.bkx-tico svg { width: 17px; height: 17px; }
.bkx-rico { width: 15px; height: 15px; margin-right: 8px; vertical-align: -2px; color: var(--primary-color); opacity: .9; flex: none; }
.projection-label { display: flex; align-items: center; }
.record, .bkx-tile { border-left: 3px solid var(--primary-color); }
.milestone, .average-box { background: rgba(10, 122, 252, .06); background: color-mix(in srgb, var(--primary-color) 7%, var(--card-bg, #fff)); border-color: color-mix(in srgb, var(--primary-color) 18%, transparent); }
.bkx-progress { height: 8px; border-radius: 6px; background: rgba(127, 127, 127, .16); overflow: hidden; margin-top: 8px; }
.bkx-progress span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--primary-color), color-mix(in srgb, var(--primary-color) 55%, #fff)); }
.stats-overview .current-users-value { font-size: 26px; font-weight: 800; color: var(--primary-color); font-variant-numeric: tabular-nums; }
.stats-overview .current-users-label { font-size: 13px; font-weight: 600; color: var(--text-light); }
#faq.faq-wrap { margin-top: 16px; }
/* links in the new cards: the theme's colour, like the page's own lists */
#bkx-newest .bkx-list a, #bkx-newest .bkx-list a:visited { color: var(--primary-color); text-decoration: none; }
#bkx-newest .bkx-list a:hover { text-decoration: underline; }
/* Eurosky: the new accounts list, two columns like the newest accounts by type */
#bkx-eu-list { columns: 2; column-gap: 32px; max-height: none; }
#bkx-eu-list li { break-inside: avoid; }
#bkx-eu-list a, #bkx-eu-list a:visited { color: var(--primary-color); text-decoration: none; }
#bkx-eu-list a:hover { text-decoration: underline; }
#bkx-eu-list .bk-host { margin: 0 4px 0 0; }
@media (max-width: 768px) { #bkx-eu-list { columns: 1; max-height: 460px; } }

/* Phones: the three 7-day averages as three small tiles, not one cramped line with separators (stats_style.css), QA 2026-10-26 */
@media (max-width: 600px) {
  .stats-section .averages-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0; background: none; border: 0; }
  .stats-section .average-box { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--primary-color) 18%, transparent); }
  .stats-section .average-box:not(:last-child):after { content: none; }
  .stats-section .average-value { font-size: 1.1rem; font-weight: 700; }
  .stats-section .average-label { font-size: .75rem; }
}

/* Activity: the day the five figures are for (2026-10-26) */
.bkx-act-day { margin: 0 0 12px; text-align: center; font-size: 14px; color: var(--text-light, #64748b); }
.bkx-act-day strong { color: var(--text-dark, #1e293b); }

/* Matched pairs (owner, 2026-10-26: "2 cards not fully filled next to each other is not very pleasing"): the cards of a row
   share its height, their content starts at the top, and a chart grows into the room left (its height is the minimum) */
#statistics-section .stats-grid > .card:not(.fixed-height-md) { display: flex; flex-direction: column; }
#statistics-section .stats-grid > .card:not(.fixed-height-md) > .card-content { flex: 1 1 auto; display: flex !important; flex-direction: column; justify-content: flex-start; }
#statistics-section .stats-grid > .card:not(.fixed-height-md) > .card-content > .chart-container { flex: 1 1 auto; }
/* Round charts keep their own size: the paired-card rule above lets chart containers grow with the card, which blew the
   donuts up to the card's width (owner, 2026-10-27, "Own domains by extension"). Line and bar charts still grow. */
#statistics-section .stats-grid > .card > .card-content > .chart-container:has(#typeChart, #domainChart, #pdsChart) { flex: 0 0 auto; height: 230px !important; max-height: 230px; }
/* ...and the table under the donut takes the rest of the card (more rows), not empty space around the chart */
#statistics-section .stats-grid > .card > .card-content:has(> .chart-container #typeChart, > .chart-container #domainChart, > .chart-container #pdsChart) { flex: 0 0 auto !important; }
#statistics-section .stats-grid > .card:has(#typeChart, #domainChart, #pdsChart) > .country-table-container { flex: 1 1 0; height: auto; min-height: 180px; }