/*
 * visits.css: the styles of the Visits tab of the panel page (web/panel/index.html): the card "Visits day by day" with its real tabs, the line and the bars of the chart, the column beside it (visits of the range or of the picked period), the row of cards (Knock Score, ranking of the bots, errors, confirmed share, ranking of the bots by the days without a visit), which fills every line it wraps into, and the small heatmap of the most visited pages, ported from the approved mockup (eksport/2026-11-04_konkurs-ux/final_src/style*.css).
 * Loaded by: web/panel/index.html (a link element, last of the style files); it reads only the tokens of tokens.css (--ink-conf is the blue of "confirmed", --heat and --on-heat the heat scale) and the custom properties that the scripts set (--c, the colour of a bot, and --bots, the number of bot columns of the heatmap). The drawing is done by assets/js/ui/chart.js, visit-days.js, visit-cards.js, bot-rank.js, bot-absence.js and top-pages.js.
 * Nothing in it uses url() or @import, so a Content-Security-Policy that allows only 'self' is enough.
 * @comments-complete 2026-11-10
 */

.kicker { margin: 0; font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-3); }
.vis-card .muted, .vcard .muted, .daydetail .muted { color: var(--text-3); }
.vempty { margin: 0; padding: 14px; border: 1px dashed var(--line-strong); border-radius: var(--r-m); background: var(--surface-2); color: var(--text-2); font-size: 13px; }

/* The card of the chart: real tabs (the selected one is joined to the panel under it and carries the brand line), the granularity beside them, the chart and the figure of the picked period. */
.vis-card .card-head { align-items: center; }
.rbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: 10px; }
.rbar .seg { margin-bottom: 6px; }
.rtabs { position: relative; z-index: 2; display: flex; gap: 4px; margin-bottom: -1px; }
.rtab { position: relative; margin-top: 4px; padding: 8px 18px; border: 1px solid var(--line-strong); border-radius: 10px 10px 0 0; background: var(--surface-2); color: var(--text-2); font-weight: var(--fw-semibold); font-size: 13px; }
.rtab:hover { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
.rtab[aria-selected="true"] { margin-top: 0; padding-top: 12px; border-bottom-color: var(--surface); background: var(--surface); color: var(--text); }
.rtab[aria-selected="true"]::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 10px 10px 0 0; background: var(--grad); }
.rtab:focus-visible { outline-offset: -3px; }
.rpanel { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px; border: 1px solid var(--line-strong); border-radius: 0 var(--r-m) var(--r-m) var(--r-m); background: var(--surface); }
.vis-main { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; }
.vis-main .chart-box { min-width: 0; margin-top: 0; }
/* The column beside the chart: the visits of the range (or of the picked period) on top, the visited pages and the visits outside the sitemap (or the button back to the whole range) under a thin line. */
.daydetail { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding-left: 18px; border-left: 1px solid var(--line); }
.dd-head { display: flex; flex-direction: column; gap: 8px; }
.dd-day { margin: 0; font-size: 15px; font-weight: var(--fw-semibold); }
.dd-facts { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.dd-facts:empty { display: none; }
.daydetail .note { margin-top: 0; }
.ln-area { fill: color-mix(in srgb, var(--ink-conf) 14%, transparent); }
.ln-line { fill: none; stroke: var(--ink-conf); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ln-dot { fill: var(--surface); stroke: var(--ink-conf); stroke-width: 2; }
.ln-dot.on { fill: var(--ink-conf); }
.pickmark { fill: color-mix(in srgb, var(--brand-a) 14%, transparent); }
.bar-n { fill: var(--text-2); font-size: 12px; font-weight: var(--fw-medium); }
.at.grp { fill: var(--text-2); font-weight: var(--fw-medium); }

/* Big numbers. */
.kpi { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; line-height: 1; }
.kpi-n { font-size: var(--fs-num-xl); font-weight: var(--fw-medium); letter-spacing: var(--ls-number); font-variant-numeric: var(--num); }
.kpi-u { font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--text-2); }
.kpi-sm .kpi-n { font-size: var(--fs-num-l); }
.kpi-bad .kpi-n { color: var(--st-error); }

/* The row of cards under the chart: the cards wrap into lines and every line is filled to its end, so a card that is left out (it has no figure) leaves no hole. A card is at least 226px wide; a wide card (the two rankings of the bots) counts as two cards with the gap between them and grows twice as fast, so in every line a wide card stays as wide as two narrow ones and the gap between them. */
.insights { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
.insights > .vcard { flex: 1 1 226px; }
.insights > .vcard-wide { flex: 2 1 466px; }
.vcard { display: flex; flex-direction: column; gap: 10px; min-width: 0; margin-top: 0; text-align: left; }
.vcard-b { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.vcard .note { margin-top: 0; }
.hbar, .stackbar { display: block; width: 100%; overflow: hidden; }
.hb-track { fill: var(--surface-2); }
.hb-fill { fill: var(--c, var(--text-3)); }
.stackbar .seg-c { fill: var(--ink-conf); }
.stackbar .seg-u { fill: var(--text-3); }
.stackbar .seg-n { fill: var(--line-strong); }
.bot-rank { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.br-row { display: grid; grid-template-columns: 24px minmax(110px, 1.3fr) minmax(40px, 1fr) auto 52px; align-items: center; gap: 10px; width: 100%; padding: 4px 2px; border: 0; background: transparent; text-align: left; font-size: 13px; }
.br-row:hover { background: var(--surface-2); }
.br-no { color: var(--text-3); text-align: right; }
.br-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; overflow-wrap: anywhere; }
.br-name .muted { font-size: 11.5px; }
.br-n { text-align: right; }
.br-pct { text-align: right; color: var(--text-2); }
/* The ranking by the days without a visit: the rows of the ranking of the bots, with the days and the date of the last visit in the last two columns; a core bot without any visit has a plain row (nothing to open) and the "none" tone. */
.br-row.ba-row { grid-template-columns: 24px minmax(110px, 1.3fr) minmax(40px, 1fr) 76px 88px; } /* fixed days and date columns, so the bars of all rows start at one line */
.ba-days { text-align: right; white-space: nowrap; font-variant-numeric: var(--num); }
.ba-date { text-align: right; white-space: nowrap; color: var(--text-2); font-variant-numeric: var(--num); }
.ba-none:hover { background: transparent; }
.ba-none .ba-days { color: var(--st-none); font-weight: var(--fw-medium); }
/* The folded row of the bots with 0 days: a chevron in the place column (right when folded, down when open) and the list it unfolds under it. */
.ba-fold { display: flex; flex-direction: column; gap: 2px; }
.ba-chev { display: inline-block; width: 7px; height: 7px; margin-right: 3px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(-45deg); }
.ba-recent[aria-expanded="true"] .ba-chev { transform: rotate(45deg); }
.ba-recent .ba-days { color: var(--text-2); }
.share { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.share li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.share li b { min-width: 48px; text-align: right; }
.err-pages { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; overflow: hidden; color: var(--text-2); }
.err-pages li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.err-sign { display: inline-grid; flex: none; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--st-error-bg); color: var(--st-error); font-size: 10px; font-weight: var(--fw-semibold); line-height: 1; }
.errc { display: inline-flex; align-items: center; gap: 3px; color: var(--st-error); font-weight: var(--fw-medium); }
.vchip { display: inline-flex; align-items: center; gap: 6px; width: fit-content; min-height: 32px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); font-size: 12.5px; font-weight: 600; }
.vchip:hover { background: var(--surface-2); }

/* The card of the most visited pages: a grid of rows, the columns of the bots are as many as --bots says; it scrolls sideways inside its own box. */
#top-pages .card-head { align-items: center; }
.tp-scroll { margin-top: 10px; overflow-x: auto; }
.tp-grid { --cols: 280px 76px 56px repeat(var(--bots), minmax(46px, 1fr)); --w: calc(412px + var(--bots) * 46px); width: max(var(--w), 100%); }
.tp-row { display: grid; grid-template-columns: var(--cols); align-items: stretch; min-height: 30px; border-bottom: 1px solid var(--line); }
.tp-row .c { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 0 4px; }
.tp-row .tp-url { justify-content: flex-start; padding: 0; }
.tp-row .c-num { justify-content: flex-end; padding-right: 10px; }
.tp-head { border-bottom-color: var(--line-strong); background: var(--surface-2); }
.th { display: flex; align-items: flex-end; padding: 6px 10px; color: var(--text-2); font-size: 12px; font-weight: var(--fw-semibold); }
.th.r { justify-content: flex-end; }
.th-bot { flex-direction: column; justify-content: flex-start; align-items: center; height: 128px; padding: 0 0 6px; gap: 4px; }
.th-v { display: block; flex: none; width: 100%; height: 4px; background: var(--c); }
.th-n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; font-weight: 600; }
.vt-open { display: flex; align-items: center; gap: 6px; width: 100%; height: 30px; padding: 0 10px; overflow: hidden; border: 0; background: transparent; text-align: left; }
.vt-open .mono { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-open:hover .mono { text-decoration: underline; }
.c.hc { padding: 0; border: 1px solid var(--surface); border-radius: 4px; background: var(--hf, transparent); font-size: 12px; font-weight: 600; }
.h1 { --hf: color-mix(in srgb, var(--heat) 10%, var(--surface)); }
.h2 { --hf: color-mix(in srgb, var(--heat) 20%, var(--surface)); }
.h3 { --hf: color-mix(in srgb, var(--heat) 32%, var(--surface)); }
.h4 { --hf: color-mix(in srgb, var(--heat) 46%, var(--surface)); }
.h5 { --hf: color-mix(in srgb, var(--heat) 62%, var(--surface)); }
.h6 { --hf: color-mix(in srgb, var(--heat) 76%, var(--surface)); }
.h7 { --hf: color-mix(in srgb, var(--heat) 88%, var(--surface)); }
.h8 { --hf: var(--heat); }
.c.hc.hi { color: var(--on-heat); }
.c.hc.hi5 { color: var(--scrim); } /* the middle step takes a dark ink in both themes */
.vcta { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; margin-top: 12px; padding: 12px 14px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--r-m); background: var(--surface-2); color: var(--text); text-align: left; }
.vcta::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--grad); }
.vcta:hover { border-color: var(--text-3); background: var(--surface); }
.vcta-t { font-size: 13px; }
.vcta b { color: var(--accent-text); white-space: nowrap; }

@media (max-width: 1100px) {
  .vis-main { grid-template-columns: minmax(0, 1fr); }
  .daydetail { padding-top: 12px; padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
}
@media (max-width: 719px) {
  .kpi-n { font-size: var(--fs-num-xl); }
  .rpanel { padding: 12px; }
  .br-row { grid-template-columns: 22px minmax(0, 1.3fr) minmax(30px, 1fr) auto 46px; gap: 6px; }
  .br-row.ba-row { grid-template-columns: 22px minmax(0, 1.3fr) minmax(24px, 0.6fr) 68px 80px; }
}
@media (max-width: 640px) {
  .tp-grid { --cols: 168px 56px repeat(var(--bots), minmax(40px, 1fr)); --w: calc(224px + var(--bots) * 40px); }
  .tp-row .c-err, .th.c-err { display: none; }
  .th-bot { height: 112px; }
}
@media (prefers-reduced-motion: no-preference) {
  .rtab, .vchip, .vcta, .br-row { transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
  .ba-chev { transition: transform 0.12s; }
}