/*
 * robot.css: the styles of the Robot view (the details of one bot) and of the links that lead to it from the other views: the bar of the mode, the head with the company and the role, the bar of the period with the comparison, the tiles with their change, the card of the chart, the card of the pages with its table, and the name of a bot that is a link and the small link "›".
 * Loaded by: web/panel/index.html (a link element, last of the style files); it reads only the tokens of tokens.css. Every class has the prefix bv-; the cards, the figures, the switch, the table and the tooltip come from panel.css, visits.css, pages.css (the table of the pages shares the classes pg-wrap, pg-table and pg-sort), tip.css and frame.css. The drawing is done by assets/js/ui/bot-tab.js, bot-period.js, bot-parts.js, bot-time.js, bot-pages.js and bot-link.js.
 * Nothing in it uses url() or @import, so a Content-Security-Policy that allows only 'self' is enough. The colour never carries a meaning alone: a change has a sign, a state of a page has a sign and a word, an error has a sign.
 * @comments-complete 2026-11-13
 */

/* The bar over the view: the switch of the mode on the right. */
.bv-top { display: flex; justify-content: flex-end; }
.bv-body { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }

/* The company, the role and the main-bot mark of the bot. */
.bv-facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; list-style: none; }
.bv-fact { display: inline-flex; align-items: baseline; gap: 6px; font-size: 14px; }
.bv-fact-l { color: var(--text-3); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; }

/* The bar of the period: the switch of the ways, the fields of the way that is chosen, the line of the comparison. */
.bv-bar { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); }
.bv-bar-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; }
.bv-field { display: flex; flex-direction: column; gap: 4px; }
.bv-date, .bv-select { min-height: 36px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-variant-numeric: var(--num); }
.bv-date:focus-visible, .bv-select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.bv-cmp-btn { cursor: pointer; }
.bv-cmp-btn[aria-pressed="true"] { border-color: var(--accent-text); color: var(--accent-text); font-weight: var(--fw-semibold); }
.bv-cmp-btn[aria-pressed="true"]::before { content: "\2713"; }
.bv-vs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; color: var(--text-2); font-size: 13px; }

/* The tiles: a row that wraps; the change under a number carries its sign. */
.bv-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.bv-chg { margin: 0; font-size: 13px; font-weight: var(--fw-semibold); font-variant-numeric: var(--num); }
.bv-chg.is-up { color: var(--st-current); }
.bv-chg.is-down { color: var(--st-error); }
.bv-chg.is-flat { color: var(--text-3); font-weight: var(--fw-medium); }

/* The chart: the switch of the scale over it. */
.bv-chart-card .bv-seg { align-self: flex-start; }
.bv-chart-host { min-width: 0; }

/* The list of pages: the table is the table of the Pages view; the state of a page has a sign and a word. */
.bv-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.bv-open { margin-left: auto; text-decoration: none; color: var(--text); }
.bv-table-wrap { min-width: 0; }
.bv-th { display: inline-flex; align-items: center; gap: 2px; }
.bv-table th.r .bv-th { justify-content: flex-end; width: 100%; }
.bv-th .pg-sort { width: auto; }
.bv-c-url { min-width: 180px; overflow-wrap: anywhere; }
.bv-c-fresh { white-space: nowrap; }
.bv-st { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-medium); }
.bv-st.st-current { color: var(--st-current); }
.bv-st.st-older { color: var(--st-older); }
.bv-st.st-before { color: var(--st-before); }
.bv-st.st-none, .bv-st.st-nolist { color: var(--st-none); }
.bv-st.st-unknown { color: var(--st-unknown); }
.bv-out td { background: var(--surface-2); font-style: italic; }
.bv-count { margin: 0; }
.bv-more { cursor: pointer; }
.bv-empty { gap: 12px; }

/* The links to the view from the other views: the name of a bot that did nothing on a click, and the small link next to a name whose click does something else. */
.bv-name { color: inherit; font-weight: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.bv-name:hover { text-decoration: underline solid; }
.bv-name:focus-visible, .bv-go:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.bv-go { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 28px; min-height: 28px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text-2); font-size: 16px; line-height: 1; text-decoration: none; }
.bv-go:hover { background: var(--surface-2); color: var(--text); }

/* Where the small link stands in the other views: inside a chip of the legend of the chart of the bots (the button "only" slides in beside it), beside the name in the table of the AI bots, at the end of a row of the table of the bots of Freshness, beside the line of a bot of the Day view, and at the end of the names of the chart "Who has which version" (a link of the drawing). */
.bl-chip > .bv-go { width: 28px; min-width: 0; min-height: 0; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: transparent; }
.bl-chip .bl-only { right: 28px; }
.aiv-name .bv-go { min-width: 22px; min-height: 22px; margin-left: 6px; font-size: 14px; vertical-align: middle; }
.fb-list > li { position: relative; }
.fb-list .fb-bot, .fb-head { padding-right: 46px; }
.fb-list > li > .bv-go { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); }
.day-bot { display: flex; flex-wrap: wrap; align-items: center; }
.day-bot > .day-toggle { flex: 1 1 0; width: auto; min-width: 0; }
.day-bot > .day-paged { flex: 1 0 100%; }
.day-bot > .bv-go { margin: 0 6px; }
.bv-svg-hit { fill: transparent; }
.bv-svg-go { cursor: pointer; }
.bv-svg-sign { fill: var(--text-2); font-size: 16px; }
.bv-svg-go:hover .bv-svg-sign, .bv-svg-go:focus-visible .bv-svg-sign { fill: var(--text); }
.bv-svg-go:focus-visible .bv-svg-hit { stroke: var(--focus); stroke-width: 2; }

@media (max-width: 900px) {
  .bv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .bv-top { justify-content: flex-start; }
  .bv-open { margin-left: 0; }
}
@media (max-width: 480px) {
  .bv-tiles { grid-template-columns: minmax(0, 1fr); }
}