/* ABI Stats Bot - how I want the website and the local control panel to look.
   Tactical style to match Arena Breakout: Infinite: near-black, amber
   highlights, uppercase headings, squarer corners. Font: Glacial Indifference
   (fonts.css + the fonts/ folder, served by the bot itself).
   This is the ONE place for colours, text sizes, corners and the shared states
   (focus, disabled, reduced motion). Pages only add their own layout. */
@import url("/fonts.css");

:root {
  /* colours */
  --bg: #0a0b0c; --panel: #131517; --panel-2: #1a1d20; --line: #2a2e33; --line-2: #383d43;
  --text: #e6e2d6; --soft: #c3c6ca; --muted: #a0a4a9;
  --accent: #e2b33c; --accent-hover: #ecc04f; --accent-dim: #33290f; --on-accent: #16130a;
  --good: #6cbf4a; --good-dim: #172a10; --bad: #e4523f; --bad-dim: #36160f; --warn: #ee8a35;
  /* text: normal / supporting / short uppercase labels */
  --fs: 16px; --fs-2: 14px; --fs-label: 12px;
  /* shape: one corner size, one control height (taller on touch screens) */
  --radius: 4px; --ctl-h: 38px;
  --font: "Glacial Indifference", "Segoe UI", system-ui, sans-serif;
  --head: "Glacial Indifference", "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
}
@media (pointer: coarse) { :root { --ctl-h: 40px; } }

html, body {
  font-family: var(--font); font-size: 16px;
  background-color: var(--bg);
  /* a faint map grid, so the background isn't just flat black */
  background-image:
    linear-gradient(rgba(226, 179, 60, .016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226, 179, 60, .016) 1px, transparent 1px);
  background-size: 48px 48px;
}
body { line-height: 1.55; text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; }
body::before { /* my amber strip across the top */
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 50;
  background: var(--accent);       /* one unbroken line, edge to edge */
}
a { color: var(--accent); }

/* Headings: uppercase and tight. I never uppercase long sentences - too hard to read. */
h1, h2, h3, header h1, .card > b:first-child, details.grp > summary {
  font-family: var(--head); text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
}
h1, h2, h3 { line-height: 1.2; text-wrap: balance; }
input, select, textarea, button { font-family: inherit; }
/* The logo (served from brand.py): the badge next to page titles, the full logo on
   the login and download pages. The title text stays for screen readers. */
header h1::before {
  content: ""; display: inline-block; width: 28px; height: 28px; margin-right: 10px; vertical-align: -7px;
  background: url("/logo-mark.svg") center / contain no-repeat;
}
.login h1, body > h1 {
  font-size: 0; line-height: 0; margin: 8px 0 18px;
}
.login h1::before, body > h1::before {
  content: ""; display: block; width: 300px; max-width: 100%; aspect-ratio: 289 / 100;
  background: url("/logo.svg") left center / contain no-repeat;
}

/* Readability: I let long words and links wrap instead of pushing the page sideways,
   pictures never wider than their box. */
p, li, dd, td { overflow-wrap: break-word; }
p { text-wrap: pretty; }
img, video, svg, iframe { max-width: 100%; }

/* Panels */
.card, .stat, nav, details.grp { border-radius: var(--radius); }
.card, details.grp { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02); }
.stat { border-top: 2px solid var(--line); }
.stat b { font-family: var(--head); font-size: 22px; font-weight: 600; letter-spacing: .02em; }
.stat > span { font-family: var(--head); letter-spacing: .08em; }

/* Tabs */
nav { padding: 0; gap: 0; overflow: hidden; }
nav button { border-radius: 0; font-family: var(--head); font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; border-bottom: 2px solid transparent; }
nav button.on { background: var(--accent-dim); color: var(--accent); border-bottom-color: var(--accent); }

/* Buttons, three kinds:
   main (.primary)       solid amber, cut corner - one per area
   secondary (.btn)      dark, grey border, lights up (not amber) on hover
   destructive (.danger) red text and red-tinted border; the "tap again to confirm" step is solid red
   :where() keeps the size/shape defaults at zero weight, so a page's own layout rules still win. */
:where(.btn) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--ctl-h); padding: 0 16px;
  border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text); font-size: 13px; line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap; }
.btn { border-radius: var(--radius); font-family: var(--head); font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; transition: border-color .15s, color .15s, background-color .15s; }
.btn:not(.primary):not(:disabled):hover { border-color: var(--soft); color: var(--text); }
.btn.primary, a.btn.primary, button.primary {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.btn.primary:not(:disabled):hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.danger { color: var(--bad); border-color: rgba(228, 82, 63, .45); }
.btn.danger:not(:disabled):hover { background: var(--bad-dim); border-color: var(--bad); color: #ff8a7a; }
.btn.danger.confirm, .btn.quiet-danger.confirm { background: var(--bad); border-color: var(--bad); color: #fff; }
/* disabled / busy (I disable a button while the page is working on it) */
.btn:disabled, .btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.btn.primary:disabled, .btn.primary[disabled] { background: var(--panel-2); border-color: var(--line-2); color: var(--muted); opacity: 1; clip-path: none; }

/* Keyboard focus: always visible, same everywhere. My cut corner would hide the ring, so I drop it while focused. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.primary:focus-visible, a.btn.primary:focus-visible, button.primary:focus-visible { clip-path: none; }

/* Small labels: short words only (uppercase is for these and headings, never sentences) */
.pill, .badge, .tag { border-radius: 3px; font-family: var(--head); text-transform: uppercase; letter-spacing: .08em; }
.tag { display: inline-flex; align-items: center; padding: 1px 8px; border: 1px solid var(--line-2); color: var(--soft);
  font-size: var(--fs-label); line-height: 1.5; white-space: nowrap; }
.pill.live { border-color: rgba(108, 191, 74, .45); }
.badge.ok { background: var(--good-dim); color: var(--good); }
.badge.ko { background: var(--bad-dim); color: var(--bad); }

/* Inputs: the same dark field everywhere (zero weight, so page layouts still set widths) */
:where(input[type=text], input[type=number], input[type=password], input[type=search], input[type=url], input:not([type]), select, textarea) {
  min-height: var(--ctl-h); padding: 0 12px; border: 1px solid var(--line-2); background: #0d0f11; color: var(--text); font-size: 15px; }
:where(textarea) { padding: 10px 12px; line-height: 1.5; }
input, select, textarea, .seg, input[type=color] { border-radius: 3px; }
input:focus, select:focus, textarea:focus { outline: 1px solid var(--accent); outline-offset: 0; }
input::placeholder, textarea::placeholder { color: #7d8288; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--bad); }

/* Banners that still had my old purple */
.setup { border-color: var(--accent); background: linear-gradient(135deg, var(--accent-dim), var(--panel) 60%); }
.update { background: linear-gradient(135deg, var(--good-dim), var(--panel) 60%); }
.code { border-radius: 3px; color: var(--accent); }

/* Help footer (help.js fills it in) */
.helpfoot { margin: 28px 0 8px; padding: 16px 20px; border: 1px solid var(--line);
  background: var(--panel); border-radius: var(--radius); font-size: var(--fs-2); color: var(--soft); }
.helpfoot:empty { display: none; }
.helpfoot b { font-family: var(--head); text-transform: uppercase; letter-spacing: .08em; color: var(--text); font-weight: 600; }
.helpfoot .links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.helpfoot .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 12px; border: 1px solid var(--line-2);
  border-radius: 3px; background: var(--panel-2); color: var(--text); text-decoration: none; font-size: 13px; cursor: pointer; }
.helpfoot .chip:hover { border-color: var(--soft); }
.helpfoot .chip i { font-style: normal; color: var(--muted); }
.helpfoot .fan { margin-top: 10px; font-size: var(--fs-label); color: var(--muted); }
.helpfoot .chip b { text-transform: none; letter-spacing: 0; }

/* Moving between pages: a quick fade and slide instead of a blank flash, and the logo glides
   to its new spot (browsers that can't do this just load the page as before). */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .22s ease both; }
::view-transition-new(root) { animation: vt-in .32s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }
.top .brand, .side .brand { view-transition-name: brand; }

/* If someone has "Reduce motion" on, I don't slide, pulse or sweep anything, on any page */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- My small helpers on every page (help.js adds them) ---- */
/* Back to top */
.totop { position: fixed; right: 18px; bottom: 18px; z-index: 40; width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: 50%; background: rgba(19, 21, 23, .92); color: var(--text); cursor: pointer;
  opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .2s, transform .2s, border-color .15s; }
.totop.on { opacity: 1; transform: none; pointer-events: auto; }
.totop:hover { border-color: var(--accent); color: var(--accent); }
.totop svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Menu button on phones (public pages): the links fold away until you tap it */
.navbtn { display: none; align-items: center; gap: 6px; margin-left: auto; min-height: 38px; padding: 0 12px; border: 1px solid var(--line-2);
  border-radius: var(--radius); background: var(--panel-2); color: var(--text); font: 600 13px var(--head); cursor: pointer; }
.navbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (max-width: 640px) {
  header.top { flex-wrap: wrap; }
  header.top .navbtn { display: inline-flex; }
  html header.top > nav, html header.top > .menu { display: none; order: 9; width: 100%; flex-direction: column; align-items: stretch; gap: 2px;
    margin: 8px 0 0; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
  html header.top.open > nav, html header.top.open > .menu { display: flex; animation: menu-in .18s ease both; }
  html header.top > nav a, html header.top > .menu a { padding: 10px 12px; border-radius: 3px; }
  html header.top > nav a::after { display: none; }
  html header.top > nav a.on, html header.top > .menu a.on { background: var(--accent-dim); color: var(--accent); }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }

/* ==== My design system (Nov 2026 redesign) ====================================================
   One set of tokens for every page, so nothing drifts:
   - colour: my near-black, three surface steps, one amber accent, and green / red / orange only for meaning
   - type: Glacial Indifference, one scale (12 13 14 16 18 22 28 36), sentence case everywhere
   - shape: 6px on controls, 10px on cards, 14px on big panels and dialogs, pills fully round
   - depth: cards are flat with a border; only things that float (menus, dialogs, toasts) get a shadow
   - motion: 120ms for hovers, 180ms for opening things, one easing; "reduce motion" turns it all off */
:root {
  --bg: #0b0c0e; --panel: #131518; --panel-2: #1a1d21; --panel-3: #22262b; --line: #262a30; --line-2: #343a41;
  --text: #ece8dd; --soft: #c0c3c8; --muted: #9a9fa6;
  --radius: 6px; --radius-card: 10px; --radius-lg: 14px; --ctl-h: 40px;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --shadow-float: 0 12px 32px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .3);
  --ease: cubic-bezier(.2, .8, .2, 1); --t-fast: .12s; --t-open: .18s;
}
html, body { background-image: none; }
body::before { height: 2px; }
::selection { background: rgba(226, 179, 60, .35); color: #fff; }

h1, h2, h3, header h1, .card > b:first-child, details.grp > summary { text-transform: none; letter-spacing: .005em; }

/* Buttons: one height, sentence case, a tiny press; the main one is solid amber (no more cut corner) */
.btn { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; border-radius: var(--radius);
  transition: border-color var(--t-fast), color var(--t-fast), background-color var(--t-fast), transform var(--t-fast); }
.btn:not(:disabled):active { transform: translateY(1px); }
.btn.primary, a.btn.primary, button.primary { clip-path: none; border-radius: var(--radius); }
.btn.primary:disabled, .btn.primary[disabled] { clip-path: none; }
.pill, .badge, .tag { text-transform: none; letter-spacing: 0; border-radius: 999px; }
input, select, textarea, .seg, input[type=color] { border-radius: var(--radius); }
:where(input, select, textarea) { transition: border-color var(--t-fast), box-shadow var(--t-fast); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(226, 179, 60, .18); }
.card, details.grp { box-shadow: none; }
.helpfoot { border-radius: var(--radius-card); }
.helpfoot b { text-transform: none; letter-spacing: 0; }
.helpfoot .chip { border-radius: 999px; transition: border-color var(--t-fast); }

/* Loading: a soft shimmer for boxes that are waiting on data */
@keyframes shimmer { from { background-position: -400px 0; } to { background-position: 400px 0; } }
.skel { border-radius: var(--radius-card); background: linear-gradient(90deg, var(--panel) 0, var(--panel-2) 50%, var(--panel) 100%) 0 0 / 800px 100%;
  animation: shimmer 1.4s linear infinite; }
/* Page moves: a short fade only */
::view-transition-old(root) { animation: vt-out .14s ease both; }
::view-transition-new(root) { animation: vt-in .2s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }