/*
 * knock.css: the styles of Knock Score (web/panel/index.html, assets/js/ui/knock-*.js): the heading, the gauge, the numbers, the line of the history, the bar of points (the window), the card at the top of the Freshness tab with the table of the platforms and the block "What to do?", and the window "How it is calculated". It reads only the tokens of tokens.css and is linked after access.css.
 * @comments-complete 2026-11-08
 */

/* ---- Knock Score: the heading (the name, the tooltip, the button "How it is calculated" at the right) ---- */
.knock-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.knock-head .knock-how { margin-left: auto; }
.knock-how { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--text-2); font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: 0; text-transform: none; white-space: nowrap; }
.knock-how:hover { background: var(--surface-2); color: var(--text); }
.knock-sub-lead { display: inline-flex; align-items: center; gap: 6px; }

/* ---- Knock Score: the gauge ("like in a car"): a neutral scale 0 to 100, no red, yellow and green zones ---- */
.knock-gauge { display: block; width: 100%; height: auto; margin-inline: auto; }
.knock-gauge-large { max-width: 340px; }
.knock-gauge-medium { max-width: 280px; }
.knock-gauge-small { max-width: 200px; margin-inline: 0; }
.kg-track { fill: none; stroke: var(--line-strong); stroke-width: 9; }
.kg-fill { fill: none; stroke: var(--accent-text); stroke-width: 9; }
.kg-tick { stroke: var(--text-3); stroke-width: 1.2; }
.kg-tick-major { stroke: var(--text-2); stroke-width: 2; }
.kg-label { fill: var(--text-3); font-size: 10px; font-variant-numeric: var(--num); }
.kg-hand { fill: var(--text); }
.kg-hub { fill: var(--text); }
.kg-hub-dot { fill: var(--surface); }
.kg-score { fill: var(--text); font-size: 40px; font-weight: var(--fw-medium); font-variant-numeric: var(--num); }
.kg-sub { fill: var(--text-3); font-size: 12px; }
.kg-none { fill: var(--text-2); font-size: 20px; font-weight: var(--fw-medium); }
.knock-gauge-small .kg-label { display: none; }
/* ---- Knock Score: the numbers (the big score, the "no data" word) ---- */

.knock-more { margin-top: 2px; }

/* ---- Knock Score: the line of the history (small in the card of the Visits tab, large in the Freshness tab) ---- */
.knock-chart { display: block; width: 100%; height: auto; }
.knock-line { fill: none; stroke: var(--accent-text); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.knock-area { fill: color-mix(in srgb, var(--brand-a) 14%, transparent); }
.knock-dot { fill: var(--accent-text); stroke: var(--surface); stroke-width: 1.5; }
.knock-hit { fill: transparent; }
.knock-grid { stroke: var(--line); stroke-width: 1; }
.knock-axis { fill: var(--text-3); font-size: 11px; font-variant-numeric: var(--num); }
.knock-axis-last { fill: var(--text); font-weight: var(--fw-semibold); }
.knock-guide { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 3; }
.knock-last { fill: var(--text); font-size: 13px; font-weight: var(--fw-semibold); font-variant-numeric: var(--num); }
.knock-last-large { font-size: 14px; }

/* ---- Knock Score: the bar of points (a segment per platform) and the swatch of a platform ---- */
.knock-stack { display: block; width: 100%; overflow: hidden; }
.knock-seg { fill: var(--c, var(--text-3)); stroke: var(--surface); stroke-width: 1; }
.knock-sw { display: inline-block; flex: none; width: 10px; height: 10px; margin-right: 8px; border-radius: 3px; background: var(--c, var(--text-3)); }
/* ---- Knock Score: the card at the top of the Freshness tab ---- */
.knock-ov-wrap { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.knock-ov-top { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.knock-ov-top > .card { margin-top: 0; }
.knock-ov { justify-content: flex-start; }
.knock-ov .vcard-b { flex: 1 1 auto; gap: 14px; }
.knock-ov .knock-ov-score { flex: 1 1 auto; justify-content: center; }
.knock-plat .ai-plat:first-child { padding-top: 0; border-top: 0; }
.knock-ov-score { display: flex; flex-direction: column; justify-content: flex-start; gap: 14px; min-width: 0; }
.knock-ov-score .knock-gauge { margin-inline: 0; }
.knock-ov-hist { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 12px; border-top: 1px solid var(--line); }
.knock-ov-hist .knock-sub { margin: 0; color: var(--text-2); }
.vcard-knock .knock-chart { margin-top: 4px; }
.knock-sub { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; margin: 0 0 10px; font-size: var(--fs-s); font-weight: var(--fw-semibold); }

/* ---- Platforms and their bots: the table inside the Knock Score card (ui/ai-platforms.js) and the block "What to do?" (ui/ai-advice.js). One row per platform; when the card is narrower than 960 px each row becomes a small card of its own. ---- */
.knock-ov-score .knock-gauge { max-width: 320px; }
.ai-plat, .ai-todo { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.ai-plat { container-type: inline-size; }
.ai-plat .knock-sub, .ai-todo .knock-sub { margin: 0; }
.ai-legend { display: inline-flex; flex-wrap: wrap; gap: 0 12px; font-size: var(--fs-xs); font-weight: var(--fw-regular); }
.ai-table { display: flex; flex-direction: column; min-width: 0; }
.ai-list { display: flex; flex-direction: column; }
.ai-row { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(170px, 1.6fr) 96px 96px 104px; gap: 10px; align-items: center; }
.ai-head { padding: 8px 10px; margin-bottom: 2px; border-block: 1px solid var(--line-strong); border-radius: var(--r-s); background: var(--surface-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text); white-space: nowrap; }
.ai-th { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.ai-bot { width: 100%; padding: 9px 10px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: inherit; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.ai-bot:hover, .ai-bot:focus-visible { background: var(--surface-2); }
.ai-bot:disabled { cursor: default; }
.ai-bot.is-top { box-shadow: inset 3px 0 0 var(--st-older); }
.ai-num { justify-self: end; text-align: right; }
.ai-num b { font-size: 15px; font-weight: var(--fw-medium); font-variant-numeric: var(--num); }
.ai-cell .ai-lab { display: none; }
.ai-cell.muted b { color: var(--text-3); font-weight: var(--fw-regular); }
.ai-cell.st-older b { color: var(--st-older); }
.ai-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ai-name b { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; font-weight: var(--fw-semibold); }
.ai-name small { color: var(--text-3); font-size: 11.5px; }
.ai-flag { margin-left: 4px; padding: 0 7px; border: 1px solid var(--st-older); border-radius: 999px; color: var(--st-older); font-size: 10.5px; font-style: normal; font-weight: var(--fw-semibold); line-height: 17px; white-space: nowrap; }
.ai-pages { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ai-counts { display: flex; flex-wrap: wrap; gap: 0 10px; padding: 0 2px; font-size: var(--fs-xs); font-variant-numeric: var(--num); line-height: 1.3; }
.ai-count { white-space: nowrap; }
.ai-count.st-current { color: var(--st-current); }
.ai-count.st-older { color: var(--st-older); }
.ai-count.st-none { color: var(--st-none); }
.ai-count-key { font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 2px; }
.ai-total { margin: 0; padding: 8px 10px 0; text-align: right; font-size: var(--fs-s); font-weight: var(--fw-semibold); font-variant-numeric: var(--num); }
.ai-todo-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: aitodo; }
.ai-todo-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-2); counter-increment: aitodo; }
.ai-todo-item::before { content: counter(aitodo); display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--text-2); font-size: 12px; font-weight: var(--fw-semibold); }
.ai-todo-text { flex: 1 1 280px; min-width: 0; color: var(--text); font-size: var(--fs-s); line-height: var(--lh-snug); }
.ai-todo-go { flex: none; min-height: 28px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--accent-text); font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-medium); cursor: pointer; }
.ai-todo-go:hover { background: var(--surface-2); }
.ai-ok { margin: 0; color: var(--st-current); font-size: var(--fs-s); font-weight: var(--fw-medium); }
@container (max-width: 960px) {
  .ai-head { display: none; }
  .ai-bot { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 12px; padding: 12px 10px; }
  .ai-bot > :nth-child(1) { grid-area: 1 / 1 / 2 / 4; }
  .ai-bot > :nth-child(5) { grid-area: 1 / 4 / 2 / 5; }
  .ai-bot > :nth-child(2) { grid-area: 2 / 1 / 3 / 5; }
  .ai-bot > :nth-child(3) { grid-area: 3 / 1 / 4 / 3; }
  .ai-bot > :nth-child(4) { grid-area: 3 / 3 / 4 / 5; }
  .ai-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; justify-self: stretch; text-align: left; }
  .ai-cell .ai-lab { display: block; color: var(--text-3); font-size: var(--fs-xs); }
  .ai-pages { align-items: stretch; }
}

/* ---- Do the AI bots come?: the card under the Knock Score card (ui/ai-visits.js). The chart of the five bots (assets/css/botchart.css) stands beside their table; under 720 px they stand one under the other and each row of the table becomes a small card. ---- */
.ai-visits { container-type: inline-size; }
.aiv-body { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.aiv-table { display: flex; flex-direction: column; min-width: 0; }
.aiv-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.aiv-row { display: grid; grid-template-columns: minmax(132px, 1.5fr) 50px 52px 58px 70px minmax(96px, 1.2fr); gap: 8px; align-items: center; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.aiv-head { margin-bottom: 2px; border-block: 1px solid var(--line-strong); border-radius: var(--r-s); background: var(--surface-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text); white-space: nowrap; }
.aiv-th { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.aiv-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.aiv-name b { display: flex; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-medium); }
.aiv-name small { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; color: var(--text-3); font-size: 11.5px; }
.aiv-flag .ptip-btn { padding: 0 7px; border: 1px solid var(--st-older); border-radius: 999px; color: var(--st-older); font-size: 10.5px; font-weight: var(--fw-semibold); line-height: 17px; text-decoration: none; }
.aiv-flag .ptip-btn::after { content: none; }
.aiv-num { justify-self: end; text-align: right; }
.aiv-c { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; line-height: 1.2; }
.aiv-c b { font-size: 14px; font-weight: var(--fw-semibold); font-variant-numeric: var(--num); }
.aiv-c.muted b { color: var(--text-3); font-weight: var(--fw-medium); }
.aiv-c.st-older b { color: var(--st-older); }
.aiv-sign { font-size: 0.8em; }
.aiv-lbl { display: none; color: var(--text-3); font-size: 11.5px; font-weight: var(--fw-regular); }
@container (max-width: 520px) {
  .aiv-body > .bl { order: 2; } /* on a phone the table comes first and the chart under it (the chart of the bots, assets/css/botchart.css) */
  .aiv-head { display: none; }
  .aiv-lbl { display: block; }
  .aiv-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
  .aiv-row .aiv-name { grid-column: 1 / -1; }
  .aiv-row .aiv-c { align-items: flex-start; text-align: left; justify-self: start; }
  .aiv-row .aiv-c:last-child { grid-column: 1 / -1; }
}
/* ---- Knock Score: the window "How it is calculated" ---- */
.knock-dialog { width: min(720px, calc(100vw - 32px)); max-height: min(88vh, 920px); margin: auto; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--r-l); background: var(--surface); color: var(--text); box-shadow: var(--shadow-pop); overflow: hidden; }
.knock-dialog[open] { display: flex; flex-direction: column; }
.knock-dialog::backdrop { background: color-mix(in srgb, var(--scrim) 62%, transparent); }
.knock-dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.knock-dlg-title { margin: 0; font-size: var(--fs-l); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
.knock-dlg-close { display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--text-2); font-size: 20px; line-height: 1; }
.knock-dlg-close:hover { background: var(--surface-2); color: var(--text); }
.knock-dlg-body { display: flex; flex-direction: column; gap: 24px; min-height: 0; padding: 20px; overflow-y: auto; overscroll-behavior: contain; }
.knock-m-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.knock-m-hero .knock-gauge { flex: 0 1 200px; }
.knock-m-lead { flex: 1 1 280px; margin: 0; color: var(--text-2); font-size: var(--fs-m); line-height: var(--lh-snug); }
.knock-m-sec { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.knock-m-h { margin: 0; font-size: var(--fs-m); font-weight: var(--fw-semibold); }
.knock-m-note { margin: 0; color: var(--text-3); font-size: var(--fs-xs); line-height: var(--lh-snug); }
.knock-m-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding-left: 18px; color: var(--text-2); font-size: var(--fs-s); line-height: var(--lh-snug); }
.knock-tablewrap { overflow-x: auto; }
.knock-table { width: 100%; border-collapse: collapse; font-size: var(--fs-s); }
.knock-table th, .knock-table td { padding: 8px 6px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.knock-table thead th { color: var(--text-3); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.knock-table .knock-num { text-align: right; font-variant-numeric: var(--num); white-space: nowrap; }
.knock-th-in { display: inline-flex; align-items: center; gap: 4px; }
.knock-name { min-width: 140px; }
.knock-name-in { display: flex; align-items: center; }
.knock-name-l { display: flex; flex-direction: column; line-height: 1.25; }
.knock-name-l small { color: var(--text-3); font-size: 11.5px; }
.knock-row-none .knock-num { color: var(--text-3); font-size: 12.5px; }
.knock-table tfoot th, .knock-table tfoot td { border-bottom: 0; font-weight: var(--fw-medium); }
.knock-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; padding-top: 18px; border-top: 1px solid var(--line); }
.knock-fact { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.knock-fact-l { color: var(--text-3); font-size: var(--fs-xs); }
.knock-fact-n { font-size: var(--fs-num-l); font-weight: var(--fw-medium); letter-spacing: var(--ls-number); font-variant-numeric: var(--num); line-height: 1.1; }
.knock-fact-t { color: var(--text-2); font-size: var(--fs-xs); line-height: var(--lh-snug); }

@media (max-width: 1199px) {
  .knock-ov-top { grid-template-columns: minmax(0, 1fr); }
  .knock-ov-score .knock-gauge { margin-inline: auto; }
}
@media (max-width: 719px) {
  .knock-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .knock-name { min-width: 0; }
  .knock-table th, .knock-table td { padding: 8px 3px; }
  .knock-dlg-head { padding: 12px 14px; }
  .knock-dlg-body { gap: 20px; padding: 14px; }
}
@media (prefers-reduced-motion: no-preference) {
  .knock-how, .knock-dlg-close { transition: background-color 0.15s, color 0.15s; }
}