/*
 * ai.css: the styles of Traffic from AI (beta): the pill "beta" (menu, card, view), the card on the Visits tab, the view (the chart of the days, the platforms, the ranking of the pages with their arrivals) and the empty state "we are collecting since ...".
 * Loaded by: web/panel/index.html (a link element, last of the style files); it reads only the tokens of tokens.css and the custom properties that the scripts set (--c, the colour of a platform; --h, the height of a day in per cent; --n, the arrivals of a platform on a day). The drawing is done by assets/js/ui/ai-widget.js, ai-tab.js and ai-parts.js.
 * Nothing in it uses url() or @import, so a Content-Security-Policy that allows only 'self' is enough. The colour never carries a meaning alone: platforms and states always have a word or a sign beside the colour.
 * @comments-complete 2026-11-11
 */

/* The pill "beta": calm (a tint of the brand violet, no loud colour); in the card and the view it is the button of a tooltip, in the menu a plain label. */
.air-beta-tip .ptip-btn.ptip-link, .nav-beta { display: inline-flex; align-items: center; padding: 1px 9px; border: 1px solid color-mix(in srgb, var(--brand-a) 42%, var(--line-strong)); border-radius: 999px; background: color-mix(in srgb, var(--brand-a) 9%, var(--surface)); color: var(--accent-text); font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); line-height: 1.6; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.air-beta-tip .ptip-btn.ptip-link:hover, .air-beta-tip .ptip-btn.ptip-link[aria-expanded="true"] { background: color-mix(in srgb, var(--brand-a) 18%, var(--surface)); color: var(--accent-text); }
.air-beta-tip .ptip-link::after { content: none; }
.nav-beta { flex: none; padding: 0 7px; font-size: 10px; }
.air-hd { row-gap: 4px; }

/* Platforms: a dot in the colour of the platform, always with its name. */
.air-chips { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.air-chip { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 12.5px; color: var(--text-2); }
.air-chip b { color: var(--text); font-weight: var(--fw-semibold); font-variant-numeric: var(--num); }
.air-chip-more { color: var(--text-3); cursor: default; }
.air-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--s9)); }

/* The badge of a page: a sitemap page has a tick and a word, any other page a plain word. */
.air-sm { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text-3); font-size: 11.5px; font-weight: var(--fw-semibold); line-height: 1.6; white-space: nowrap; }
.air-sm.is-in { border-color: var(--st-current); background: var(--st-current-bg); color: var(--st-current); }
.air-sm-tick { font-size: 10px; }

/* The figure and its words. */
.air-pre { margin: 0 0 6px; color: var(--text-3); font-size: var(--fs-s); font-weight: var(--fw-medium); }
.air-since { margin: 0; color: var(--text-2); font-size: var(--fs-s); }
.air-since.is-strong { color: var(--text); font-weight: var(--fw-medium); }
.air-kpi-zero .kpi-n { color: var(--text-3); }
.air-delta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.air-delta-n { padding: 1px 9px; border-radius: 999px; background: var(--st-none-bg); color: var(--st-none); font-size: var(--fs-s); font-weight: var(--fw-semibold); font-variant-numeric: var(--num); white-space: nowrap; }
.air-delta.is-up .air-delta-n { background: var(--st-current-bg); color: var(--st-current); }
.air-delta.is-down .air-delta-n { background: var(--st-error-bg); color: var(--st-error); }
.air-delta-vs { color: var(--text-3); font-size: var(--fs-xs); }

/* The columns of the days: a column per day, the stack of the platforms inside it grows from the base; the "!" marks a day with skipped arrivals. */
.air-days { position: relative; min-width: 0; }
.air-bars { display: flex; align-items: flex-end; gap: 2px; height: 190px; padding-top: 16px; }
.air-days.is-compact { display: flex; flex: 1 1 auto; flex-direction: column; }
.air-days.is-compact .air-bars { flex: 1 1 auto; height: auto; min-height: 56px; padding-top: 0; }
.air-col { position: relative; display: flex; flex: 1 1 0; align-items: flex-end; min-width: 0; height: 100%; border-radius: 3px; }
.air-col:hover { background: var(--surface-2); }
.air-col.is-zero::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--line); }
.air-stack { display: flex; flex-direction: column-reverse; width: 100%; height: calc(var(--h, 0) * 1%); min-height: 3px; overflow: hidden; border-radius: 2px 2px 0 0; }
.air-col.is-zero .air-stack { display: none; }
.air-seg { flex: var(--n, 1) 1 0; min-height: 1px; background: var(--c, var(--s9)); }
.air-seg + .air-seg { border-bottom: 1px solid var(--surface); }
.air-seg.is-dim { opacity: 0.16; }
.air-over { position: absolute; top: 0; left: 50%; z-index: 1; display: grid; place-items: center; width: 14px; height: 14px; transform: translateX(-50%); border-radius: 50%; background: var(--st-older-bg); color: var(--st-older); font-size: 10px; font-weight: var(--fw-bold); line-height: 1; }
.air-axis { display: flex; justify-content: space-between; margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line-strong); color: var(--text-3); font-size: var(--fs-xs); font-variant-numeric: var(--num); }
.air-max { position: absolute; top: 0; left: 0; color: var(--text-3); font-size: var(--fs-xs); font-variant-numeric: var(--num); pointer-events: none; }
.air-over-list { display: flex; flex-direction: column; gap: 4px; margin: 12px 0 0; padding: 0; list-style: none; }
.air-over-note { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--r-s); background: var(--st-older-bg); color: var(--st-older); font-size: var(--fs-s); }
.air-over-mark { display: inline-grid; flex: none; place-items: center; width: 16px; height: 16px; border: 2px solid currentColor; border-radius: 50%; font-size: 10px; font-weight: var(--fw-bold); line-height: 1; }

/* The card on the Visits tab: the figure and the small chart on the left, the three pages on the right. */
.air-w-body { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 24px; margin-top: 12px; }
.air-w-sum { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; padding-right: 24px; border-right: 1px solid var(--line); }
.air-w-sum .air-days { align-self: stretch; margin-top: 6px; }
.air-w-sum .air-pre { margin-bottom: 0; }
.air-w-top { min-width: 0; }
.air-w-list { margin: 8px 0 0; padding: 0; list-style: none; }
.air-w-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) 150px; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.air-w-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.air-w-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.air-w-num { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 8px; }
.air-w-num b { text-align: right; font-size: 15px; font-variant-numeric: var(--num); }
.air-rank { color: var(--text-3); font-size: var(--fs-s); text-align: right; font-variant-numeric: var(--num); }
.air-path { min-width: 0; overflow-wrap: anywhere; }
.vt-open.air-open { width: auto; max-width: 100%; height: auto; padding: 0; color: var(--accent-text); }
.vt-open.air-open .mono { overflow-wrap: anywhere; white-space: normal; }
.air-addr { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
a.air-ext { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; }
.air-ext-i { display: inline-flex; flex: none; align-items: center; padding: 2px; border-radius: 4px; color: var(--accent-text); }
.air-ext-i:hover { color: var(--text); }
a.air-ext:focus-visible, .air-ext-i:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.air-more { margin-top: 12px; }
.is-ghost .air-w-num b { color: var(--text-3); }
.air-wait { color: var(--text-3); font-size: 12.5px; }
.air-ghost-bar { display: block; height: 8px; border: 1px dashed var(--line-strong); border-radius: 4px; }

/* The view: the card on top (the chart, the figures, the platforms as filters) and the ranking of the pages. */
.air-top-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; margin-top: 12px; }
.air-top-chart { min-width: 0; }
.air-top-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding-left: 24px; border-left: 1px solid var(--line); }
.air-top-side .air-pre { margin-bottom: -6px; }
.air-stats { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.air-stats dt { margin-top: 8px; color: var(--text-3); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.air-stats dt:first-child { margin-top: 0; }
.air-stat-v { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; }
.air-stat-v b { font-size: 15px; font-variant-numeric: var(--num); }
.air-stat-note { color: var(--text-3); font-size: var(--fs-s); }
.air-pfs { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.air-pf-list { display: flex; flex-wrap: wrap; gap: 6px; }
.air-pf { display: inline-flex; padding: 4px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; text-align: left; }
.air-pf:hover { background: var(--surface-2); }
.air-pf[aria-pressed="true"] { border-color: var(--text); background: var(--surface-2); }
.air-pf .air-chip { font-size: var(--fs-s); }
.air-rank-card .air-r-list { margin: 8px 0 0; padding: 0; list-style: none; }
.air-group { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding: 16px 4px 6px; border-bottom: 1px solid var(--line-strong); }
.air-group:first-child { padding-top: 6px; }
.air-group-t { color: var(--text-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; }
.air-group-n { color: var(--text-3); font-size: var(--fs-xs); font-variant-numeric: var(--num); }
.air-r { border-bottom: 1px solid var(--line); }
.air-r-line { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) 150px 56px 18px; align-items: center; gap: 10px; padding: 10px 4px; }
.air-r-line:hover { background: var(--surface-2); }
.air-r-toggle { justify-self: end; display: inline-flex; align-items: center; justify-content: flex-end; width: 18px; padding: 0; border: 0; background: transparent; }
.air-r-toggle::after { content: ""; position: absolute; inset: 0; }
.air-r-toggle:focus-visible { outline: none; }
.air-r-toggle:focus-visible::after { outline: 2px solid var(--focus); outline-offset: -2px; }
.air-r-addr { position: relative; z-index: 1; }
.air-detail-acts { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.air-r-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.air-r-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; }
.air-last { margin-left: auto; color: var(--text-3); font-size: var(--fs-xs); font-variant-numeric: var(--num); white-space: nowrap; }
.air-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 10px 0 4px; }
.air-scope { display: inline-flex; align-items: center; gap: 4px; }
.air-sw { display: inline-flex; padding: 2px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface-2); }
.air-sw-b { display: inline-flex; align-items: center; gap: 6px; padding: 4px 14px; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font-size: var(--fs-s); font-weight: var(--fw-medium); white-space: nowrap; }
.air-sw-b b { color: var(--text-3); font-variant-numeric: var(--num); }
.air-sw-b:hover { color: var(--text); }
.air-sw-b[aria-pressed="true"] { background: var(--surface); box-shadow: 0 0 0 1px var(--line-strong); color: var(--text); font-weight: var(--fw-semibold); }
.air-sw-b[aria-pressed="true"] b { color: var(--text-2); }
.air-r-num { text-align: right; font-size: 15px; font-variant-numeric: var(--num); }
.air-chev { justify-self: end; width: 7px; height: 7px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(-45deg); }
.air-r-toggle[aria-expanded="true"] .air-chev { transform: rotate(45deg); }
.air-r-detail { padding: 4px 4px 14px 38px; }
.air-arrivals { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-m); }
.air-a-row { display: grid; grid-template-columns: 110px 150px minmax(0, 1fr); align-items: center; gap: 10px; padding: 7px 12px; border-bottom: 1px solid var(--line); font-size: var(--fs-s); }
.air-a-row.is-flat { grid-template-columns: 110px 150px minmax(0, 1fr) minmax(0, 230px); }
.air-latest { margin-top: 8px; }
.air-a-row:last-child { border-bottom: 0; }
.air-a-head { background: var(--surface-2); color: var(--text-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.air-a-when { font-variant-numeric: var(--num); }
.air-a-trace { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.air-signal { padding: 0 8px; border: 1px solid; border-radius: 6px; font-size: 11.5px; font-weight: var(--fw-semibold); line-height: 1.6; }
.air-signal.is-utm { border-color: var(--st-current); background: var(--st-current-bg); color: var(--st-current); }
.air-signal.is-referer { border-color: var(--st-before); background: var(--st-before-bg); color: var(--st-before); }
.air-a-src { min-width: 0; overflow-wrap: anywhere; color: var(--text-2); }

/* The empty state: the radar, the figure 0 with the day the collection started, the three steps of an arrival. */
.air-empty-body { display: flex; align-items: center; gap: 28px; margin: 12px 0 18px; }
.air-empty-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.air-empty-text .air-pre { margin-bottom: 0; }
.air-radar { flex: none; }
.air-ring { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 3 4; }
.air-ring-1 { stroke: color-mix(in srgb, var(--brand-a) 45%, var(--line-strong)); }
.air-core { fill: var(--brand-a); }
.air-blip { fill: var(--brand-b); }
.air-steps { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.air-step { display: flex; flex: 1 1 200px; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-2); font-size: var(--fs-m); }
.air-step:not(:last-child)::after { content: "→"; margin-left: auto; color: var(--text-3); }
.air-step-n { display: inline-grid; flex: none; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--grad-strong); color: var(--on-grad); font-size: var(--fs-s); font-weight: var(--fw-semibold); }
.air-watch .air-w-row { grid-template-columns: 24px minmax(0, 1fr) 150px; }

@media (max-width: 1100px) {
  .air-top-grid { grid-template-columns: minmax(0, 1fr); }
  .air-top-side { padding-top: 14px; padding-left: 0; border-top: 1px solid var(--line); border-left: 0; }
}
@media (max-width: 900px) {
  .air-w-body { grid-template-columns: minmax(0, 1fr); }
  .air-w-sum { padding-right: 0; padding-bottom: 16px; border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 640px) {
  /* A phone: the bars of the rows are dropped (the figure stays), the arrivals list the trace under the time and the platform. */
  .air-w-row, .air-watch .air-w-row { grid-template-columns: 22px minmax(0, 1fr) 40px; gap: 8px; }
  .air-w-num { grid-template-columns: minmax(0, 1fr); }
  .air-w-num .hbar, .air-ghost-bar, .air-r-line .hbar { display: none; }
  .air-r-line { grid-template-columns: 22px minmax(0, 1fr) 40px 16px; gap: 8px; }
  .air-r-detail { padding-left: 0; }
  .air-a-row { grid-template-columns: 86px minmax(0, 1fr); }
  .air-a-trace, .air-a-head > :nth-child(3) { grid-column: 1 / -1; }
  .air-a-row.is-flat { grid-template-columns: 86px minmax(0, 1fr); }
  .air-a-row.is-flat > :nth-child(3) { grid-column: 1 / -1; }
  .air-a-head.is-flat { display: none; }
  .air-controls { flex-direction: column; align-items: flex-start; }
  .air-bars { height: 120px; }
  .air-empty-body { flex-direction: column; align-items: flex-start; gap: 14px; }
  .air-step { flex-basis: 100%; }
  .air-step:not(:last-child)::after { content: "↓"; }
}
@media (prefers-reduced-motion: no-preference) {
  .air-blip { animation: air-pulse 2.6s ease-in-out infinite; }
  .air-r-line, .air-pf, .air-col { transition: background-color 0.15s, border-color 0.15s; }
  .air-chev { transition: transform 0.12s; }
  @keyframes air-pulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
}