/*
 * updates.css: the Updates view (the card of the application, the cards of the list of bots and of the IP lists), the badge "New version" of the top bar and the pill "new" of the menu entry. Drawn by ui/updates-tab.js and ui/updates-cards.js; the badges of the states and the cards are those of the Access view (.ac-badge, .ac-card in access.css); only tokens from tokens.css.
 * @comments-complete 2026-11-08
 */

/* The badge of the top bar: a pill with a dot in the brand gradient; red for an urgent fix; the dot pulses while an update runs. */
.up-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 14px; border: 1px solid color-mix(in srgb, var(--brand-a) 45%, var(--line)); border-radius: 999px; background: color-mix(in srgb, var(--brand-a) 10%, var(--surface)); color: var(--accent-text); font-size: 0.9rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.up-chip:hover { background: color-mix(in srgb, var(--brand-a) 18%, var(--surface)); }
.up-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.up-chip-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--grad); }
.up-chip.is-urgent { border-color: color-mix(in srgb, var(--st-error) 45%, var(--line)); background: var(--st-error-bg); color: var(--st-error); }
.up-chip.is-urgent .up-chip-dot { background: var(--st-error); }

/* The menu entry Updates: "new" is an accent pill. */
.nav-item.is-new .nav-stat { padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--brand-a) 14%, var(--surface)); color: var(--accent-text); font-weight: var(--fw-medium); }
.nav-item.is-new .nav-stat b { color: inherit; }

/* The card of the application: on the left the versions, what can be done, the check and the foot; on the right what is new. */
.up-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 380px); gap: 20px 32px; margin-top: 12px; }
.up-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.up-versions { display: flex; flex-wrap: wrap; gap: 12px 44px; }
.up-ver { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.up-ver-l { font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-3); }
.up-ver-n { font-size: 30px; font-weight: var(--fw-medium); letter-spacing: var(--ls-number); line-height: 1.15; font-variant-numeric: var(--num); }
.up-ver .muted { color: var(--text-3); font-size: var(--fs-s); }
.up-ver .ac-badge { margin-top: 4px; }
.up-action { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.up-install { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.up-go:disabled { opacity: 0.55; cursor: default; }
.up-ok { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--st-current); font-weight: 600; }
.up-ok::before { content: "✓"; display: inline-grid; flex: none; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--st-current-bg); font-size: 12px; }
.up-alert { margin: 0; padding: 10px 14px; border: 1px solid; border-radius: var(--r-m); font-weight: 500; }
.up-alert-warn { border-color: color-mix(in srgb, var(--st-older) 35%, transparent); background: var(--st-older-bg); color: var(--st-older); }
.up-alert-bad { border-color: color-mix(in srgb, var(--st-error) 35%, transparent); background: var(--st-error-bg); color: var(--st-error); }

/* The progress of a piece of work: the four steps, done ones with a tick, the running one with a turning ring. */
.up-progress { display: flex; flex-direction: column; gap: 10px; align-self: stretch; max-width: 460px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: var(--r-m); background: var(--surface-2); }
.up-progress-t { margin: 0; font-weight: 600; }
.up-progress .muted { margin: 0; color: var(--text-3); font-size: var(--fs-s); }
.up-steps { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.up-step { display: flex; align-items: center; gap: 10px; color: var(--text-3); }
.up-step.is-done { color: var(--text-2); }
.up-step.is-now { color: var(--text); font-weight: 600; }
.up-step-i { display: inline-grid; flex: none; place-items: center; width: 20px; height: 20px; border: 2px solid var(--line-strong); border-radius: 50%; font-size: 11px; line-height: 1; }
.up-step.is-done .up-step-i { border-color: var(--st-current); background: var(--st-current); color: var(--surface); }
.up-step.is-now .up-step-i { border-color: var(--line-strong); border-top-color: var(--focus); }

/* The check of the update server and the foot (the last change, the way back). */
.up-check { display: flex; flex-direction: column; gap: 6px; }
.up-check-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.up-check .muted, .up-foot .muted { color: var(--text-3); }
.up-check .ac-error { margin: 0; }
.up-main .mini:disabled { color: var(--text-3); cursor: default; }
.up-foot { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--fs-s); }
.up-foot p { margin: 0; }
.up-back { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.up-back .mini + .mini { margin-left: 0; }
.up-danger { border-color: color-mix(in srgb, var(--st-error) 45%, var(--line-strong)); color: var(--st-error); }

/* What is new: a list per version, beside the left part on a wide screen. */
.up-changes { min-width: 0; padding-left: 24px; border-left: 1px solid var(--line); }
.up-sub { margin: 0 0 8px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--text-3); }
.up-ch-h { margin: 12px 0 4px; font-size: var(--fs-m); font-weight: 600; }
.up-sub + .up-ch-h { margin-top: 0; }
.up-ch-list { display: flex; flex-direction: column; gap: 3px; margin: 0; padding-left: 18px; color: var(--text-2); font-size: var(--fs-s); }

/* The cards of the data: the list of bots (narrow) and the IP lists (wide) side by side. */
.up-row { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr); gap: 14px; margin-top: 14px; align-items: start; }
.up-row > .card { margin-top: 0; }
.up-figs { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 12px; }
.up-fig { display: flex; flex-direction: column; gap: 2px; }
.up-fig-n { font-size: var(--fs-num-l); font-weight: var(--fw-medium); letter-spacing: var(--ls-number); font-variant-numeric: var(--num); }
.up-data .note { margin-top: 12px; max-width: none; }
.up-ip-counts { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 10px; }
.up-ip-counts .ac-badge + .ac-badge { margin-left: 0; }
.up-ip-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-m); }
.up-ip { width: 100%; border-collapse: collapse; font-size: 13px; }
.up-ip th { padding: 8px 10px; border-bottom: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text-2); font-size: 12px; font-weight: var(--fw-semibold); text-align: left; white-space: nowrap; }
.up-ip td { padding: 7px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.up-ip tbody tr:last-child td { border-bottom: 0; }
.up-ip-bots { color: var(--text-2); }
.up-ip td.muted { color: var(--text-3); white-space: nowrap; }

@media (max-width: 1100px) {
  .up-grid, .up-row { grid-template-columns: minmax(0, 1fr); }
  .up-changes { padding: 14px 0 0; border-top: 1px solid var(--line); border-left: 0; }
}
/* A phone: the badge of the top bar gives way (the top bar keeps three rows); the menu entry "Updates · new" under the four views says the same. */
@media (max-width: 599px) {
  .actions .up-chip { display: none; }
  .up-ver-n { font-size: 24px; }
  .up-go { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .up-step.is-now .up-step-i { animation: up-spin 0.9s linear infinite; }
  .up-chip.is-busy .up-chip-dot { animation: up-pulse 1.2s ease-in-out infinite; }
  .up-chip { transition: background-color 0.15s; }
}
@keyframes up-spin { to { transform: rotate(360deg); } }
@keyframes up-pulse { 50% { opacity: 0.3; } }
.up-share { display: flex; flex-direction: column; gap: 6px; }
.up-share .muted { color: var(--text-3); font-size: var(--fs-s); }