/*
 * panel.css: the styles of the views of the panel page (web/panel/index.html): the base elements, the buttons and switches, the site switcher, the chart base (grid, axis, hover, tooltip), the chips, the details of a page, the freshness badges.
 * Loaded by: web/panel/index.html (a link element, after tokens.css, which defines every colour token in both themes and the old names this file uses). The top bar, the URL check, the side column with the menu, the head of the view and the lens bar are in frame.css, the Visits tab in visits.css, the Page tab in page.css. Served by src/panel/panel-server.js locally and by the web server of the domain (there the page is panel.html behind web/panel-php/index.php); the address in the page is relative.
 * Nothing in it uses url() or @import, so a Content-Security-Policy that allows only 'self' is enough.
 * @comments-complete 2026-11-02
 */
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; flex: none; background: var(--c); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--page); color: var(--ink); font: 14px/1.45 var(--font); font-variant-numeric: var(--num); }
h1 { font-size: var(--fs-xl); font-weight: var(--fw-bold); margin: 0; letter-spacing: var(--ls-heading); }
/* The heading is a link to the home of the panel that looks like a heading: the text colour, underlined only on hover, a clear outline on keyboard focus. */
.brand-link { display: inline-flex; align-items: center; gap: 0.35em; color: inherit; text-decoration: none; border-radius: 4px; }
.brand-link:hover #brand { text-decoration: underline; text-underline-offset: 0.15em; }
.brand-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.brand-mark { width: 1.2em; height: 1.2em; flex: none; }
h2 { font-size: 1.05rem; margin: 0; }
p { margin: 0; }
button { font: inherit; color: inherit; background: transparent; border: 0; padding: 0; cursor: pointer; }
button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
code { background: var(--band); border-radius: 4px; padding: 1px 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.meta { color: var(--ink-2); font-size: 0.9rem; }
.mono { font-family: var(--mono); font-size: 0.86em; }

/* Buttons: the refresh button, the logout button of the domain (same class) and the small buttons share one look. */
.actions form { margin: 0; }
.refresh { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong); border-radius: var(--r-m); padding: 0 12px; min-height: 34px; background: var(--surface); font-weight: 600; font-size: 0.9rem; }
.refresh:hover:not(:disabled) { background: var(--band); }
.refresh:disabled { cursor: progress; opacity: 0.6; }
.refresh[aria-busy="true"] { min-width: 9.5rem; justify-content: center; }

/* Site switcher (round 3: the root of every view, on top of the side column): a box with the globe on the brand gradient, the label "Domain" and the name of the site, and an arrow when there is more than one site; the popup with a search field and the list hangs under the box (at least 340 px wide, so it may reach over the main column) and its list scrolls inside a maximum height; a long domain name stays on one line with an ellipsis (its full name is the title) and the number of visits keeps its own right-aligned column. With one site the box only names it (no arrow, no hover). */
.site-switch { position: relative; margin: 0 12px 0 16px; }
.site-btn { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 58px; padding: 8px 14px 8px 9px; border: 1px solid var(--line-strong); border-radius: var(--r-m); background: var(--surface); text-align: left; }
.site-btn:hover { background: var(--surface-2); }
.site-btn[aria-expanded="true"] { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 20%, transparent); }
.site-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--grad-strong); color: var(--on-grad); }
.site-ic svg { display: block; }
.site-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.site-l { font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-3); }
.site-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: var(--fw-semibold); color: var(--text); }
.site-chev { flex: none; width: 8px; height: 8px; margin-top: -4px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(45deg); transition: transform 0.12s; }
.site-btn[aria-expanded="true"] .site-chev { margin-top: 4px; transform: rotate(-135deg); }
.site-switch.is-single .site-btn { cursor: default; }
.site-switch.is-single .site-btn:hover { background: var(--surface); }
.site-switch.is-single .site-chev { display: none; }
.site-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; width: max(100%, 340px); max-width: calc(100vw - 24px); padding: 8px; background: var(--surface); border: 1px solid var(--ink-3); border-radius: 10px; box-shadow: var(--shadow-pop); }
.site-search { display: block; width: 100%; min-height: 38px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--page); color: var(--ink); font: inherit; font-size: 1rem; }
.site-search:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.site-list { list-style: none; margin: 6px 0 0; padding: 0; max-height: min(55vh, 340px); overflow-y: auto; }
.site-opt { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 12px; min-height: 38px; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.site-opt.active { background: var(--band); box-shadow: inset 3px 0 0 var(--ink); }
.site-opt[aria-current="true"] .site-opt-name { font-weight: var(--fw-semibold); }
.site-opt-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-opt-visits { text-align: right; color: var(--ink-2); font-size: 0.82rem; white-space: nowrap; }
.site-empty { margin-top: 6px; padding: 8px 10px; color: var(--ink-2); }
.warn { border-color: var(--ink-3); }
.warn p + p { margin-top: 4px; }
.empty { text-align: center; padding: 28px 14px; }

/* Controls: the label of a field and the segmented switch (mode, range, language, theme, granularity); the pressed button is filled with the text colour. */
.ctl { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ctl-label { font-size: 0.78rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.04em; }
.seg { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--line-strong); border-radius: var(--r-m); background: var(--surface); }
.seg button { min-height: 28px; padding: 0 11px; border-radius: 7px; color: var(--ink-2); font-size: 0.9rem; font-weight: 600; }
.seg button:hover { background: var(--band); }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.seg button:focus-visible { outline-offset: -3px; }
.seg.langsw button, .seg.themesw button { min-height: 28px; padding: 0 10px; font-size: 0.9rem; }
.seg.themesw button { display: inline-flex; align-items: center; justify-content: center; }
.note { margin-top: 8px; color: var(--ink-2); font-size: 0.86rem; max-width: 80ch; }

/* Cards */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 16px 18px; margin-top: 14px; box-shadow: var(--shadow); }
.card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.sub { color: var(--ink-2); font-size: 0.86rem; }

/* Chart */
.chart-box { position: relative; margin-top: 8px; }
.chart-wrap { border-radius: 6px; }
.chart-wrap:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.chart-wrap svg { display: block; width: 100%; touch-action: pan-y; cursor: pointer; }
.gl { stroke: var(--line); stroke-width: 1; }
.ax { stroke: var(--ink-3); stroke-width: 1; }
.at { fill: var(--ink-3); font-size: 11px; }
.at.sel { fill: var(--ink); font-weight: var(--fw-medium); }
.seg-r { fill: var(--c); }
.seg-r.dim { opacity: 0.35; }
.hov { fill: var(--band); opacity: 0; }
.hov.on { opacity: 1; }
.chart-wrap:focus-visible .hov.on { stroke: var(--focus); stroke-width: 2; }
.tip { position: absolute; top: 4px; left: 0; z-index: 3; pointer-events: none; background: var(--surface); border: 1px solid var(--ink-3); border-radius: 8px; padding: 8px 10px; font-size: 0.82rem; box-shadow: var(--shadow-pop); min-width: 150px; max-width: 250px; }
.tip b { display: block; }
.tip .tl { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.tip .tl span.n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tip .tip-hint { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 0.78rem; }

/* Small buttons and chips */
.mini { border: 1px solid var(--line-strong); border-radius: var(--r-m); padding: 4px 12px; min-height: 34px; background: var(--surface); }
.mini:hover { background: var(--band); }
.mini + .mini { margin-left: 6px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 11px; border: 1px solid var(--ink-3); border-radius: 999px; background: var(--surface); font-size: 0.88rem; }
.chip:hover { background: var(--band); }

.chip[aria-pressed="true"] { border-color: var(--ink); background: var(--band); font-weight: 600; }

.chip[aria-pressed="false"] { color: var(--ink-2); border-style: dashed; }
.chip[aria-pressed="false"] .nm { text-decoration: line-through; text-decoration-thickness: 1px; }

/* Details of a page: the freshness axis, the bots and the table of the visits of an address */
.det { padding: 8px 10px 14px 16px; background: var(--band); border-radius: 0 0 8px 8px; }

table.dt { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.dt th, .dt td { text-align: left; padding: 6px 12px 6px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.dt thead th { font-size: 0.78rem; color: var(--ink-2); font-weight: 600; }
.dt td.num, .dt th.num { text-align: right; }

.dt .codes { white-space: normal; }

/* Freshness: which version of a page each bot has read */
.fs { font-size: 0.95rem; font-weight: var(--fw-medium); }

@media (max-width: 759px) {
  .site-pop { right: 0; width: auto; }
  .seg button { padding: 0 8px; }
  /* The details table turns into vertical cards. */
  table.dt, .dt tbody, .dt tr, .dt td, .dt th { display: block; }
  .dt thead { display: none; }
  .dt tr { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); padding: 8px 10px; margin-bottom: 8px; }
  .dt th, .dt td { border: 0; padding: 2px 0; text-align: left !important; }
  .dt td[data-label] { display: flex; justify-content: space-between; gap: 12px; }
  .dt td[data-label]::before { content: attr(data-label); color: var(--ink-2); flex: none; }
  .dt td.codes { display: block; }
  .dt td.codes::before { display: block; }
}
@media (prefers-reduced-motion: reduce) { .site-chev { transition: none; } }