/*
 * access.css: the styles of the Access tab of the panel page (web/panel/index.html): the card with the check (the verdict of the site in the colour of its state, the bar of all bots, the site, the time of the last check, the button and the daily limit), the counters, the bots with a problem and their advice, the green fold of the fine bots with their names, the card of the state of the site (robots.txt, firewall, Common Crawl) and the small tooltip buttons of the labels. The tab bar (five columns) is in frame.css.
 * Loaded by: web/panel/index.html (a link element after pages.css); it reads the tokens of tokens.css and adds no colour value of its own, so both themes work. Nothing in it uses url() or @import, so a Content-Security-Policy that allows only 'self' is enough.
 * Every colour is a state of tokens.css (--st-*) and sits beside a word or a mark, never alone. The tooltip panel itself is the shared one of the section tip.js above (ptip-*); here only the place of the labels around it.
 * @comments-complete 2026-11-07
 */

/* The colours of the words: a state colour for the text and its tint for the background. */
.ac-badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; background: var(--cb); color: var(--c); font-size: 12.5px; font-weight: var(--fw-medium); line-height: 1.5; }
.ac-badge + .ac-badge { margin-left: 6px; }
.ac-ok { --c: var(--st-current); --cb: var(--st-current-bg); }
.ac-warn { --c: var(--st-older); --cb: var(--st-older-bg); }
.ac-bad { --c: var(--st-error); --cb: var(--st-error-bg); }
.ac-choice { --c: var(--st-before); --cb: var(--st-before-bg); }
.ac-none { --c: var(--st-none); --cb: var(--st-none-bg); }
.ac-unknown { --c: var(--st-unknown); --cb: var(--st-unknown-bg); }
.ac-card .muted, .ac-top .muted { color: var(--text-3); }

.ac-label-text { min-width: 0; }
.ac-card .card-head { justify-content: flex-start; align-items: center; gap: 4px 8px; }

/* The top card: the site, the time with its tooltip, the button with the limit beside it and the sentence of the state. */
.ac-site { margin-top: 8px; }
.ac-when, .ac-limit { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 8px 0 0; }
.ac-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 12px; }
.ac-actions .ac-limit { margin: 0; }
.ac-run { min-width: 180px; }
.ac-run:disabled { opacity: 0.55; cursor: default; }
.ac-run:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ac-why { margin: 6px 0 0; }
.ac-status { margin-top: 10px; font-weight: 600; }
.ac-running { color: var(--accent-text); }
.ac-error { color: var(--st-error); }
.ac-line { margin: 10px 0 0; }

/* The three counters: a mark, a big number and the label with its tooltip; a counter at zero is muted but keeps its number. */
.ac-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 14px; }
.ac-count { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "mark number" "label label"; column-gap: 10px; align-items: baseline; padding: 14px 16px; border: 1px solid color-mix(in srgb, var(--c) 40%, var(--line)); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--shadow); }
.ac-count-ok { --c: var(--st-current); }
.ac-count-choice { --c: var(--st-before); }
.ac-count-bad { --c: var(--st-error); }
.ac-count-unknown { --c: var(--st-unknown); }
.ac-count-zero { --c: var(--st-none); }
.ac-count-mark { grid-area: mark; color: var(--c); font-size: var(--fs-xl); font-weight: var(--fw-medium); line-height: 1; }
.ac-count-n { grid-area: number; font-size: var(--fs-num-xl); font-weight: var(--fw-medium); letter-spacing: var(--ls-number); line-height: 1; }
.ac-count-zero .ac-count-n { color: var(--text-3); }
.ac-count-label { grid-area: label; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 8px; color: var(--text-2); font-size: var(--fs-s); }

/* Round 4: a counter above zero takes a light tint and the colour of its state on the number, so "has access" is green at a glance. */
.ac-count:not(.ac-count-zero) { background: color-mix(in srgb, var(--c) 9%, var(--surface)); }
.ac-count:not(.ac-count-zero) .ac-count-n { color: var(--c); }

/* Round 4: the verdict on top of the Access tab (ui/access-verdict.js). The top card takes the colour of the state of the site: a tinted top, a coloured edge and a round sign; under the verdict the words of robots.txt, a bar of all bots (full green: checked in our test, hatched green: robots.txt lets in, not tested, then the colours of the problems) and its legend. The site, the time and the button follow under a thin line. */
.ac-top.ac-tone-ok { --c: var(--st-current); --cb: var(--st-current-bg); }
.ac-top.ac-tone-warn { --c: var(--st-older); --cb: var(--st-older-bg); }
.ac-top.ac-tone-bad { --c: var(--st-error); --cb: var(--st-error-bg); }
.ac-top.ac-tone-unknown { --c: var(--st-unknown); --cb: var(--st-unknown-bg); }
.ac-top[class*="ac-tone-"] { border-color: color-mix(in srgb, var(--c) 50%, var(--line)); border-top: 4px solid var(--c); background: linear-gradient(180deg, color-mix(in srgb, var(--cb) 80%, var(--surface)) 0, var(--surface) 180px); }
.ac-verdict { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-items: center; margin-top: 12px; }
.ac-v-sign { grid-row: span 2; align-self: start; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--c); color: var(--surface); font-size: 24px; font-weight: var(--fw-bold); line-height: 1; }
.ac-v-head { grid-column: 2; margin: 0; color: var(--c); font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: var(--lh-snug); letter-spacing: var(--ls-heading); }
.ac-v-text { grid-column: 2; margin: 0; color: var(--text-2); }
.ac-health { grid-column: 2; display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin-top: 6px; }
.ac-health-bar { display: flex; gap: 2px; width: 100%; max-width: 420px; height: 10px; overflow: hidden; border-radius: 999px; background: var(--surface-2); }
.ac-health-seg { flex: var(--n, 1) 1 0; min-width: 6px; background: var(--c); }
.ac-health-seg.ac-seg-soft { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 55%, var(--surface)) 0 3px, color-mix(in srgb, var(--c) 20%, var(--surface)) 3px 6px); }
.ac-health-text { color: var(--text-2); font-size: var(--fs-s); font-weight: var(--fw-medium); }
.ac-health-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 0; padding: 0; list-style: none; color: var(--text-2); font-size: var(--fs-s); }
.ac-legend-item { display: inline-flex; align-items: baseline; gap: 5px; min-width: 0; }
.ac-legend-mark { color: var(--c); font-weight: var(--fw-bold); }
.ac-legend-n { color: var(--c); font-weight: var(--fw-bold); }
.ac-legend-tip { display: inline-flex; align-items: center; }
.ac-site-split { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }

/* The bots with a problem: one block per bot, the colour of its left edge is the state (the word of the state is beside it). */
.ac-problems { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.ac-problem { padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: var(--r-m); background: var(--surface-2); }
.ac-problem-bad { --c: var(--st-error); }
.ac-problem-warn { --c: var(--st-older); }
.ac-problem-choice { --c: var(--st-before); }
.ac-problem-head, .ac-problem-state { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ac-problem-state { margin-top: 8px; }
.ac-role { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; padding: 1px 10px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text-2); font-size: 12.5px; }
.ac-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 10px; }
.ac-fact-item { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ac-fact-label { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; color: var(--text-3); font-size: var(--fs-s); }
.ac-fact-value { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.ac-fact-text { font-size: var(--fs-s); }
.ac-fix { margin-top: 10px; }
.ac-fix summary { display: inline-block; padding: 4px 0; color: var(--accent-text); font-weight: 600; cursor: pointer; }
.ac-fix summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ac-fix p { margin: 8px 0 0; }
.ac-steps { margin: 8px 0 0; padding-left: 20px; }
.ac-snippet { margin: 6px 0 0; padding: 10px 12px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); color: var(--text); white-space: pre; }
.ac-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.ac-link { color: var(--accent-text); }

/* The fold of the fine bots: one line, the list opens under it. */
.ac-fine-box { flex: 0 1 auto; min-width: 0; }
.ac-fine-box summary { padding: 2px 0; color: var(--st-current); font-weight: var(--fw-semibold); cursor: pointer; }
.ac-fine-box summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ac-fine-list { display: flex; flex-direction: column; margin: 10px 0 0; padding: 0; list-style: none; }
.ac-fine-state { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.ac-fine-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding: 7px 0; border-top: 1px solid var(--line); font-size: var(--fs-s); }
.ac-role-text { color: var(--text-2); }

/* Round 4: the fold of the bots with no problem is green: a green edge, a tint, and the names of the bots in small chips in the colour of their state; the line "no bot has a problem" is green too. */
.ac-fine { border-left: 4px solid var(--st-current); background: color-mix(in srgb, var(--st-current-bg) 55%, var(--surface)); }
.ac-fine-title { margin-right: 10px; }
.ac-line-ok { color: var(--st-current); font-weight: var(--fw-semibold); }
.ac-fine-names { display: inline-flex; flex-wrap: wrap; gap: 6px; vertical-align: middle; font-weight: var(--fw-medium); }
.ac-chip { display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 999px; background: var(--cb); color: var(--c); font-family: var(--mono); font-size: 12px; }

/* The card of the state of the site: a label with its tooltip, then the word and one fact. */
.ac-state-row { display: grid; grid-template-columns: minmax(150px, 200px) minmax(0, 1fr); gap: 6px 16px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.ac-state-label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--text); font-weight: var(--fw-medium); }
.ac-state-value { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.ac-fact { color: var(--text-2); font-size: var(--fs-s); }
.ac-ccbot { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.note.muted { margin-top: 14px; }

@media (max-width: 719px) {
  .ac-run { width: 100%; }
  .ac-counts { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ac-count { grid-template-columns: auto auto 1fr; grid-template-areas: "mark number label"; align-items: center; padding: 10px 14px; }
  .ac-count-n { font-size: var(--fs-num-l); }
  .ac-count-label { margin-top: 0; }
  .ac-state-row { grid-template-columns: minmax(0, 1fr); }
  .ac-verdict { grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; }
  .ac-v-sign { width: 40px; height: 40px; font-size: 20px; }
  .ac-v-head { font-size: var(--fs-l); }
}