/*
 * fresh.css: the styles of the top of the Freshness tab of the panel page (web/panel/index.html): the summary card (the verdict and up to four facts with the button "Show", the first of them a link to the Pages tab; the figures .fo-figs of the older summary stay for the Errors view and the Common Crawl summary), the Common Crawl summary of the Visits tab in the same look, the table "which bots have the current version of your pages" with its share bars, and the two lists (most visited pages with an old copy, sections of the site), ported from the approved mockup (eksport/2026-11-04_konkurs-ux/final_src/style_x_fresh.css).
 * Loaded by: web/panel/index.html (a link element, after visits.css, whose cards, .kicker and .kpi it reuses); it reads only the tokens of tokens.css and the custom properties the scripts set (--w, the width of a section bar; --share, the part of the coverage bar of Common Crawl). The drawing is done by assets/js/ui/fresh-overview.js and ui/cc-summary.js.
 * Nothing in it uses url() or @import, so a Content-Security-Policy that allows only 'self' is enough.
 * @comments-complete 2026-11-09
 */

.fo { display: flex; flex-direction: column; gap: 14px; margin: 14px 0; min-width: 0; }
.fo .vcard, .fo .vcard-b { min-width: 0; }
.fb-table { max-width: 100%; }
.fo .kicker { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; }
.fo-hint { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-3); }
.fo-empty { margin: 0; padding: 18px; border: 1px dashed var(--line-strong); border-radius: var(--r-m); background: var(--surface-2); color: var(--text-2); font-size: 13px; text-align: center; }
.fo-ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fo-sign { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; font-size: 11px; font-weight: var(--fw-semibold); }
.fo-sign.st-current { color: var(--st-current); background: var(--st-current-bg); }
.fo-sign.st-older { color: var(--st-older); background: var(--st-older-bg); }
.fo-sign.st-none { color: var(--st-none); background: var(--st-none-bg); }

/* The frame of the summaries (the card of the Freshness tab, the Common Crawl summary, the Errors view): the verdict with the number of sitemap pages on the right, then four figures in one row, split by thin lines; two by two when the card is narrow (a container query on the card). */
.fo-sum { display: flex; flex-direction: column; gap: 14px; container-type: inline-size; }
.fo-sum-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.fo-sum-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fo-head { margin: 0; font-size: var(--fs-l); font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: var(--ls-heading); }
.fo-sum-pages { color: var(--text-3); font-size: var(--fs-s); white-space: nowrap; }
.fo-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 0; padding-top: 14px; border-top: 1px solid var(--line); }
.fo-fig { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 0 18px; border-left: 1px solid var(--line); }
.fo-fig:first-child { padding-left: 0; border-left: 0; }
.fo-fig .kpi-n { font-size: 30px; }
.fo-fig .kpi-u { font-size: 13px; }
.fo-fig .meta { font-size: var(--fs-s); line-height: var(--lh-snug); }
@container (max-width: 720px) {
  .fo-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fo-fig:nth-child(odd) { padding-left: 0; border-left: 0; }
}
@container (max-width: 360px) {
  .fo-fig { padding: 0 10px; }
  .fo-fig .kpi-n { font-size: 26px; }
}

/* The summary card on top of the Freshness tab (ui/fresh-overview.js): a stripe in the colour of the state, the verdict with the number large, and under a thin line up to three facts, each with the number in the colour of its state, a few words, the outlined button "Show" with an arrow and its "?" (the errors as the fourth only when there are some). One rule of colours: zero is green (ok), a backlog is yellow (warn), errors are red (bad). A fact without a place to go is only the number. */
.fc-sum { --fc-c: var(--st-none); display: flex; flex-direction: column; gap: 16px; box-shadow: inset 5px 0 0 var(--fc-c); }
.fc-state-warn { --fc-c: var(--st-older); }
.fc-state-ok { --fc-c: var(--st-current); }
.fc-sum .fo-sum-top { align-items: flex-start; }
.fc-verdict { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.fc-vnum { font-size: clamp(30px, 3vw, 38px); font-weight: var(--fw-medium); letter-spacing: var(--ls-number); font-variant-numeric: var(--num); line-height: 1; color: var(--fc-c); white-space: nowrap; }
.fc-vsign { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--fc-c); }
.fc-vtext { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: var(--ls-heading); min-width: 0; }
.fc-verdict .fc-tip { align-self: center; }
.fc-facts { list-style: none; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px 24px; }
.fc-fact { --fc-t: var(--text); display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.fc-ok { --fc-t: var(--st-current); }
.fc-warn { --fc-t: var(--st-older); }
.fc-bad { --fc-t: var(--st-error); }
.fc-num { font-size: var(--fs-l); font-weight: var(--fw-semibold); font-variant-numeric: var(--num); line-height: 1.1; color: var(--fc-t); }
.fc-words { font-size: var(--fs-m); color: var(--text-2); }
.fc-go { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border: 1px solid var(--fc-t); border-radius: 999px; background: var(--surface); color: var(--fc-t); font: inherit; font-size: var(--fs-s); font-weight: var(--fw-semibold); text-decoration: none; cursor: pointer; }
.fc-go:hover { background: var(--fc-t); color: var(--surface); }
.fc-go:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.fc-arrow { font-size: 14px; line-height: 1; }
@media (max-width: 640px) {
  .fc-facts { flex-direction: column; gap: 12px; }
  .fc-vtext { font-size: var(--fs-l); }
}

/* Common Crawl summary: the wide card of the Visits tab under the chart (ui/cc-summary.js) in the look of the summary above (.fo-sum): a title with its "?", the verdict, four figures and, under a thin line, how many sitemap pages were checked and the quiet note of the PRO version. The colours of the states are those of the Common Crawl badges of page.css (in the index, not in it, could not be checked). */
.cc-sum { margin-top: 14px; }
.cc-title .kicker, .fo-fig > .kicker { margin: 0; }
.cc-title .kicker { padding-left: 10px; border-left: 4px solid var(--accent-b-text); color: var(--accent-b-text); font-size: var(--fs-base); font-weight: var(--fw-bold); } /* the name of the archive stands out: bigger, bold, with a bar and its own colour (the bar and the size carry it too, not the colour alone) */
.stackbar .cc-seg-in { fill: var(--st-current); }
.stackbar .cc-seg-out { fill: var(--st-older); }
.stackbar .cc-seg-failed { fill: var(--st-unknown); }
.cc-keys { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.cc-key { display: inline-flex; align-items: center; gap: 6px; }
.key.cc-k-in { background: var(--st-current); }
.key.cc-k-out { background: var(--st-older); }
.key.cc-k-failed { background: var(--st-unknown); }
.cc-out { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
.cc-addr { max-width: 100%; padding: 0; border: 0; background: transparent; color: var(--accent-text); font-size: var(--fs-s); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.cc-addr:hover, .cc-link:hover { text-decoration: underline; }
.cc-word { font-size: 22px; font-weight: var(--fw-semibold); line-height: 1.25; letter-spacing: var(--ls-heading); }
.cc-word.kpi-ok { color: var(--st-current); }
.cc-word.kpi-warn { color: var(--st-older); }
.cc-word.kpi-bad { color: var(--st-error); }
.cc-link { padding: 0; border: 0; background: transparent; color: var(--accent-text); font: inherit; font-weight: var(--fw-medium); text-decoration: none; cursor: pointer; }
.cc-cover { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--text-2); font-size: var(--fs-s); }
.cc-cover-l { gap: 8px 10px; }
.cc-cover-bar { position: relative; display: inline-block; width: 120px; height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.cc-cover-fill { position: absolute; inset: 0 auto 0 0; width: max(4px, calc(var(--share) * 100%)); border-radius: 999px; background: var(--ink-conf); }
.cc-pro { color: var(--text-3); }
.cc-sum .fo-sum-pages { white-space: normal; }
@media (max-width: 599px) {
  .cc-addr, .cc-link { padding-block: 7px; } /* a bigger target for a finger; the line keeps its look */
}

/* The table of the bots: plain counts in named columns and a share bar of the same length on every row. */
.fo-lead { margin: 0; font-size: 15px; font-weight: 600; }
.fb-table { display: flex; flex-direction: column; overflow-x: auto; }
.fb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fb-row { display: grid; grid-template-columns: minmax(130px, 1.3fr) 92px 76px 118px 136px 104px minmax(200px, 2fr); gap: 10px; align-items: center; }
.fb-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; }
.fb-th { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.fb-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; }
.fb-bot:hover, .fb-bot:focus-visible { background: var(--surface-2); }
.fb-bot.has-old { box-shadow: inset 3px 0 0 var(--st-older); }
.fb-name { display: flex; flex-direction: column; min-width: 0; }
.fb-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-name small { font-size: 11.5px; color: var(--text-3); }
.fb-num { justify-self: end; text-align: right; }
.fb-c { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; }
.fb-c.zero { color: var(--text-3); }
.fb-worst, .fb-speed { font-size: 13.5px; font-weight: 600; }
.fb-worst.st-older { color: var(--st-older); }
.fb-bot .muted { color: var(--text-3); font-weight: 500; }
.fs { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-left: 4px; }
.fs-bar { display: flex; gap: 3px; height: 12px; padding: 2px; border-radius: 999px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.fs-seg { position: relative; display: block; min-width: 4px; flex-basis: 0; border-radius: 999px; }
.fs-seg::after { content: attr(data-val); position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 4; padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: var(--r-s); background: var(--surface); box-shadow: var(--shadow-pop); color: var(--text); font-size: var(--fs-xs); font-weight: var(--fw-regular); white-space: nowrap; pointer-events: none; transform: translateX(-50%); opacity: 0; visibility: hidden; }
.fs-seg:first-child::after { left: 0; transform: none; }
.fs-seg:last-child::after { left: auto; right: 0; transform: none; }
.fs-seg:first-child:last-child::after { left: 50%; right: auto; transform: translateX(-50%); }
.fs-seg:hover::after { opacity: 1; visibility: visible; }
.fs-seg.k-current { background: linear-gradient(90deg, color-mix(in srgb, var(--st-current) 78%, var(--surface)), var(--st-current)); }
.fs-seg.k-older { background: linear-gradient(90deg, color-mix(in srgb, var(--st-older) 78%, var(--surface)), var(--st-older)); }
.fs-seg.k-other { background: repeating-linear-gradient(135deg, var(--line-strong) 0 3px, transparent 3px 6px); }
.fs-vals { display: flex; flex-wrap: wrap; gap: 0 3px; padding: 0 2px; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; line-height: 1.3; }
.fs-val { flex-basis: 0; min-width: max-content; white-space: nowrap; }
.fs-val.st-current { color: var(--st-current); }
.fs-val.st-older { color: var(--st-older); }
.fs-val.st-none { color: var(--st-none); }

/* The two lists. */
.fo-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.fo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fo-list > li { border-top: 1px solid var(--line); }
.fo-list > li:first-child { border-top: 0; }
.fo-pg { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; width: 100%; padding: 8px 4px; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; font-size: 13.5px; text-align: left; cursor: pointer; }
.fo-pg:hover, .fo-pg:focus-visible { background: var(--surface-2); }
.fo-pg .st-older { color: var(--st-older); white-space: nowrap; }
.fo-pv { white-space: nowrap; }
.fo-sec { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; gap: 12px; align-items: center; padding: 8px 4px; font-size: 13.5px; }
.fo-sbar { display: block; height: 8px; overflow: hidden; border-radius: 999px; background: var(--surface-2); }
.fo-sbar > i { display: block; width: var(--w); height: 100%; border-radius: 999px; background: var(--st-older); }
.fo-sn { white-space: nowrap; color: var(--text-3); }

@media (max-width: 1240px) {
  .fb-row { grid-template-columns: minmax(110px, 1.1fr) 88px 70px 112px 130px 98px minmax(180px, 2fr); gap: 8px; }
}

@media (max-width: 640px) {
  .fo-head { font-size: var(--fs-base); }
  .fb-row { grid-template-columns: minmax(64px, 1fr) 76px 60px; gap: 6px; }
  .fb-row > :nth-child(n+4):not(:last-child) { display: none; }
  .fb-bot > .fs, .fb-head > :last-child { grid-column: 1 / -1; }
  .fb-bot > .fs { padding-left: 0; }
  .fb-head { padding-inline: 8px; }
  .fo-pg { grid-template-columns: minmax(0, 1fr) auto; }
  .fo-sec { grid-template-columns: minmax(0, 1fr) 60px; }
  .fo-sec .fo-sn { grid-column: 1 / -1; }
}