/*
 * botchart.css: the styles of the chart "Bots" (a line per bot): the legend of chips (the five biggest bots in one row, the rest behind "N more", folded behind one button on a phone), the lines with their points, the guide line and the tooltip of a period, the split by bot beside the chart on the Visits tab and the name buttons of the table of the card "Do the AI bots come?".
 * Loaded by: index.html (a link element, last of the style files). Drawn by assets/js/ui/bot-chart.js, bot-chart-legend.js, bot-chart-draw.js, bot-chart-tip.js, ui/visit-days.js and ui/ai-visits.js; reads only the tokens of tokens.css and the custom property --c (the colour of a bot) that the scripts set. The grid and the axis texts are the shared classes .gl, .ax and .at of panel.css.
 * Nothing in it uses url() or @import, so a Content-Security-Policy that allows only 'self' is enough.
 * @comments-complete 2026-11-12
 */
.bl { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bl-legend-host:empty { display: none; }

/* The legend: a chip per bot (its main button switches the line, "only" keeps this bot alone), then "N more", "Show all" and the help in the same row, so the five biggest bots and the buttons share one line where the width allows. */
.bl-legend { min-width: 0; }
.bl-legend-btn { display: none; }
.bl-rows { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.bl-chips, .bl-empties { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.bl-rows > .bl-chips:first-child { flex-wrap: nowrap; } /* the five biggest bots stay in one row: a long name is cut, never wrapped */
.bl-more, .bl-empties { flex: 1 0 100%; }
.bl-more[hidden], .bl-empties[hidden] { display: none; }
.bl-chip { position: relative; display: inline-flex; flex: 0 1 auto; align-items: stretch; min-width: 0; max-width: 100%; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); overflow: hidden; }
.bl-chip:hover { border-color: var(--text-3); }
.bl-main { display: inline-flex; align-items: center; gap: 6px; min-width: 0; min-height: 28px; padding: 2px 7px 2px 9px; font-size: 0.84rem; font-weight: var(--fw-medium); color: var(--text); }
.bl-main:hover { background: var(--surface-2); }
.bl-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-only { flex: none; padding: 0 8px; border-left: 1px solid var(--line); color: var(--text-2); font-size: 0.74rem; font-weight: var(--fw-semibold); }
.bl-only:hover, .bl-only[aria-pressed="true"], .bl-chip .bl-only:hover, .bl-chip .bl-only[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
/* "only" of a chip appears over the end of the chip while the pointer or the keyboard is on it, so five chips fit in one row; it stays in the order of the Tab key, and a pointer without hover (a touch screen) and the bot that is alone see it in the flow. */
.bl-chip .bl-only { position: absolute; top: 0; right: 0; bottom: 0; background: var(--surface-2); opacity: 0; pointer-events: none; }
.bl-chip:hover .bl-only, .bl-chip:focus-within .bl-only { opacity: 1; pointer-events: auto; }
.bl-chip .bl-only[aria-pressed="true"] { position: static; opacity: 1; pointer-events: auto; }
@media (hover: none) {
  .bl-chip .bl-only { position: static; opacity: 1; pointer-events: auto; }
}
.bl-main:focus-visible, .bl-only:focus-visible, .bl-all:focus-visible, .bl-fold-btn:focus-visible, .bl-legend-btn:focus-visible, .aiv-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.bl-chip.off { border-style: dashed; }
.bl-chip.off .bl-main { color: var(--text-3); }
.bl-chip.off .bl-name { text-decoration: line-through; }
.bl-chip.off .bl-sample, .aiv-toggle[aria-pressed="false"] .bl-sample { opacity: 0.35; }
.bl-empty-item { display: inline-flex; align-items: center; gap: 7px; min-height: 26px; padding: 0 10px; border: 1px dotted var(--line-strong); border-radius: 999px; color: var(--text-3); font-size: 0.8rem; }
.bl-empty-item .bl-sample { opacity: 0.5; }
.bl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.bl-fold-btn { min-height: 30px; padding: 0 12px; border: 1px dotted var(--line-strong); border-radius: 999px; color: var(--text-2); font-size: 0.8rem; font-weight: var(--fw-medium); }
.bl-fold-btn:hover { background: var(--surface-2); }
.bl-all { min-height: 30px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 0.82rem; font-weight: var(--fw-semibold); white-space: nowrap; }
.bl-all:hover { background: var(--surface-2); }
.bl-all[hidden] { display: none; }
.bl-all.is-idle { opacity: 0.45; }

/* The key of a line: a piece of the line with its point (the dash and the shape tell the bots apart when the colours are near). */
.bl-sample { flex: none; overflow: visible; }
.bl-sample-line { stroke: var(--c); stroke-width: 2; stroke-linecap: round; }

/* The chart. */
.bl-plot { position: relative; min-width: 0; }
.bl-wrap { border-radius: 6px; }
.bl-wrap:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bl-wrap svg { display: block; width: 100%; touch-action: pan-y; cursor: crosshair; }
.bl-band { fill: var(--band); opacity: 0; }
.bl-band.on { opacity: 1; }
.bl-guide { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 3 3; }
.bl-line { fill: none; stroke: var(--c); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.bl-area { fill: color-mix(in srgb, var(--c) 14%, transparent); }
.bl-mk { fill: var(--surface); stroke: var(--c); stroke-width: 1.8; stroke-linejoin: round; }
.bl-mk.pk { fill: var(--c); stroke: var(--surface); stroke-width: 1.5; }
.bl-mk.hot { fill: var(--c); stroke: var(--surface); stroke-width: 2; }
.has-focus .bl-ser { opacity: 0.16; }
.has-focus .bl-ser.on { opacity: 1; }
.has-focus .bl-ser.on .bl-line { stroke-width: 3.4; }
.bl-peak { fill: var(--text); font-size: 12px; font-weight: var(--fw-semibold); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; stroke-linejoin: round; }
.bl-none { fill: var(--text-3); font-size: 13px; }

/* The tooltip of a period: a row per visible bot that came, the biggest first. */
.bl-tip { min-width: 176px; max-width: 280px; }
.bl-tip .sub { margin-top: 2px; color: var(--text-3); }
.bl-val { font-weight: var(--fw-semibold); font-variant-numeric: var(--num); }
.bl-total { margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--line); color: var(--text-2); }

/* The split by bot in the column beside the chart (the tab Bots of the Visits view). */
.bl-split { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; list-style: none; }
.bl-split-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto 44px; align-items: center; gap: 8px; font-size: 0.86rem; }
.bl-split-row .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-split-row .bl-pct { color: var(--text-3); text-align: right; font-variant-numeric: var(--num); }

/* The name of a bot in the table of the card "Do the AI bots come?": a button that switches its line, "only" beside it, "Show all" under the table. */
.aiv-toggle { display: inline-flex; align-items: center; gap: 8px; min-width: 0; margin-left: -4px; padding: 2px 6px 2px 4px; border-radius: 6px; font: inherit; font-weight: var(--fw-medium); color: inherit; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aiv-toggle:hover:not(:disabled) { background: var(--surface-2); }
.aiv-toggle[aria-pressed="false"] { color: var(--text-3); text-decoration: line-through; }
.aiv-toggle:disabled { cursor: default; color: var(--text-3); }
.aiv-only { flex: none; margin-left: 6px; min-height: 22px; border: 1px solid var(--line-strong); border-radius: 999px; }
.aiv-tools { margin-top: 8px; padding-left: 4px; }

@media (max-width: 719px) {
  .bl-legend-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 36px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 0.84rem; font-weight: var(--fw-semibold); }
  .bl-legend-btn::after { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(45deg); }
  .bl-legend.open .bl-legend-btn::after { transform: rotate(225deg); }
  .bl-rows > .bl-chips:first-child { flex-wrap: wrap; }
  .bl-chip .bl-only { position: static; opacity: 1; pointer-events: auto; }
  .bl-legend-body { display: none; margin-top: 8px; }
  .bl-legend.open .bl-legend-body { display: block; }
}

@media (prefers-reduced-motion: no-preference) {
  .bl-ser { transition: opacity 0.15s; }
  .bl-chip { transition: border-color 0.15s; }
}