/* Round 9b: collector update banner, owner "Collector-Versionen", Racing › Meine Bestzeiten
   ("Wer ist schneller als ich?", "Vergleich mit Teammitglied").  Own classes only; CSP style-src 'self'. */

/* ---------- Update banner (top of <main>, every page) ---------- */
.client-update{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:start;margin:0 0 18px;padding:14px 16px;border:1px solid #8a5a12;border-left:4px solid #f0b24a;border-radius:12px;background:linear-gradient(120deg,rgb(240 178 74/.16),rgb(19 22 28/.96) 60%);color:var(--text,#f5f6f8);box-shadow:0 10px 30px rgb(0 0 0/.25)}
.client-update .cu-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgb(240 178 74/.18);color:#f3cf8a}
.client-update .cu-body{min-width:0}
.client-update .cu-title{margin:0;font-size:15px;line-height:1.4}
.client-update .cu-title b{color:#fff}
.client-update .cu-versions{font-variant-numeric:tabular-nums;color:#f3cf8a;font-weight:600;white-space:nowrap}
.client-update .cu-sub{margin:3px 0 0;font-size:12.5px;color:var(--muted)}
.client-update .cu-help{margin-top:8px;font-size:13px}
.client-update .cu-help summary{cursor:pointer;color:#f3cf8a;font-weight:600;width:max-content;max-width:100%}
.client-update .cu-help summary:focus-visible{outline:2px solid #f0b24a;outline-offset:2px;border-radius:4px}
.client-update .cu-help ol{margin:8px 0 0;padding-left:20px;display:grid;gap:4px;color:#d5d9e1}
.client-update .cu-actions{display:flex;flex-direction:column;gap:8px;align-items:stretch}
.client-update .cu-actions .r4-btn{margin:0;justify-content:center;flex:0 0 auto}
/* Recommended update ("Update verfügbar"): subtle, compact, no glow. */
.client-update.subtle{padding:10px 14px;gap:12px;align-items:start;border-color:var(--line);border-left:3px solid #f0b24a;background:var(--panel);box-shadow:none}
.client-update.subtle .cu-icon{width:30px;height:30px;background:rgb(240 178 74/.12)}
.client-update.subtle .cu-icon svg{width:18px;height:18px}
.client-update.subtle .cu-title{font-size:14px}
.client-update.subtle .cu-versions{color:var(--muted);font-weight:500}
.client-update.subtle .cu-sub{font-size:12px}
.client-update.subtle .cu-help{margin-top:4px;font-size:12.5px}
.client-update.subtle .cu-actions{flex-direction:row;flex-wrap:wrap;justify-content:flex-end}
/* Owner card: automatic/manual blocks. */
.cu-auto[hidden],.cu-manual[hidden]{display:none}
.cu-auto,.cu-manual{display:grid;gap:10px;min-width:0}
/* Below the minimum version: urgent, red, cannot be hidden. */
.client-update.urgent{border-color:#8a1420;border-left-color:var(--red,#d8071d);background:linear-gradient(120deg,rgb(216 7 29/.22),rgb(19 22 28/.96) 60%)}
.client-update.urgent .cu-icon{background:rgb(216 7 29/.22);color:#ffb5bd}
.client-update.urgent .cu-versions,.client-update.urgent .cu-help summary{color:#ffb5bd}
.client-update.urgent .cu-help summary:focus-visible{outline-color:var(--red,#d8071d)}
/* Paired but never connected: informational, blue. */
.client-update.info{border-color:#2b4a6d;border-left-color:#6cb4ff;background:linear-gradient(120deg,rgb(108 180 255/.14),rgb(19 22 28/.96) 60%)}
.client-update.info .cu-icon{background:rgb(108 180 255/.18);color:#9fcbff}
.client-update.info .cu-help summary{color:#9fcbff}
.client-update.info .cu-help summary:focus-visible{outline-color:#6cb4ff}
@media(max-width:760px){
  .client-update{grid-template-columns:auto minmax(0,1fr);padding:12px}
  .client-update .cu-actions{grid-column:1/-1;flex-direction:row;flex-wrap:wrap}
  .client-update .cu-actions .r4-btn{flex:1 1 160px}
}

/* ---------- Owner: Collector-Versionen ---------- */
.cu-reported{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.cu-filter{display:flex;flex-wrap:wrap;gap:6px}
.cu-filter button{min-height:30px;padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);font-size:12px;cursor:pointer}
.cu-filter button em{font-style:normal;font-weight:700;margin-left:4px;color:var(--text,#f5f6f8)}
.cu-filter button.active,.cu-filter button:hover{background:var(--panel2);color:var(--text,#f5f6f8);border-color:#555}
#client-version-table td small{display:block;color:var(--muted)}
#settings-client-version .set-hint .link{padding:0;border:0;background:none;color:var(--redt,#ff8a95);font-weight:600;cursor:pointer;text-decoration:underline}

/* ---------- Racing › Meine Bestzeiten: views ---------- */
.mine-viewbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rv-table .th-sort{padding:0;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;white-space:nowrap}
.rv-table .th-sort:hover,.rv-table .th-sort:focus-visible{color:var(--text,#f5f6f8)}
.rv-table td small{display:block;color:var(--muted)}
.rv-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;min-width:0}
.rv-list li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-width:0}
.rv-list li+li{padding-top:8px;border-top:1px solid var(--line)}
.rv-list li small{display:inline;color:var(--muted)}
.rv-list .rv-who{min-width:0;flex:1 1 180px}
.rv-list .r4-btn{margin-left:auto;flex:0 0 auto}
.rv-sect{flex-basis:100%;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.rv-sect .rv-loss{color:#f3cf8a;font-weight:700}
.rv-champion{padding:28px 18px;font-size:15px}
.rv-champion b{color:#8de3a3}
.rv-score{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0 16px 10px;min-width:0}
.rv-score .r4-b{max-width:100%;white-space:normal;overflow-wrap:anywhere}
.rv-pick select{text-overflow:ellipsis;padding:0 4px;line-height:normal}
.rv-click{cursor:pointer}
.rv-click:hover td,.rv-click:focus-visible td{background:var(--panel2)}
.rv-click:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
@media(max-width:760px){
  .rv-table td{white-space:normal}
  .rv-list .rv-who{flex-basis:100%}
  .mine-viewbar .seg{width:100%;height:auto}
  .mine-viewbar .seg button{flex:1 1 100%;min-height:36px;justify-content:center}
}