/* Drone Database – styles
   Black ground, everything else in one color (or the Bauhaus primaries in the "color" theme).
   Bauhaus: basic shapes, hard edges, lowercase UI chrome.
   Typeface: Jost (geometric grotesque in the 1920s tradition), self-hosted, SIL Open Font License. */

@font-face {
  font-family: "Jost"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/jost-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jost"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/jost-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;
  --black: #000000;
  --red: #ff2a1f;          /* text, lines, fills */
  --red-soft: #e5281e;     /* secondary text, still readable on black */
  --red-dim: #5c0d09;      /* de-emphasized marks */
  --red-line: #3a0705;     /* hairlines, grid */
  --red-wash: rgba(255, 42, 31, .10);
  --red-light: #ff8f87;    /* focus ring, lightest step */

  /* names used by the chart (app.js) */
  --page: var(--black); --surface: var(--black); --control: var(--black);
  --ink: var(--red); --ink2: var(--red); --muted: var(--red-soft);
  --grid: var(--red-line); --axis: var(--red); --ring: var(--red);
  --wash: var(--red-wash);
  --s1: var(--red); --s2: var(--red); --s3: var(--red); --other: var(--red-dim);
  --o1: #8a120b; --o2: #c81d13; --o3: #ff2a1f; --o4: #ff8f87;
  --accent: var(--red); --ok: var(--red); --err: var(--red);
  --act: var(--red);       /* primary buttons */
  --hl: var(--red);        /* active / pressed */
  --tag: var(--red);       /* solid badges */
  --rule: 4px;             /* heavy rule */
  --line: 2px;             /* normal line */
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23ff2a1f'/%3E%3C/svg%3E");
  --flag-filter: grayscale(1) contrast(1.15) sepia(1) saturate(9) hue-rotate(-48deg) brightness(.92);
}

/* Selectable theme (settings). The variables are called "red" for historical reasons:
   they carry whichever color is chosen. The background stays black. */
:root[data-theme="green"] {
  --red: #1fe05a; --red-soft: #1cc94f; --red-dim: #0a4d1f; --red-line: #06300f; --red-light: #a5ffbf;
  --red-wash: rgba(31, 224, 90, .10);
  --o1: #0d6b28; --o2: #16a53f; --o3: #1fe05a; --o4: #a5ffbf;
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%231fe05a'/%3E%3C/svg%3E");
  --flag-filter: grayscale(1) contrast(1.15) sepia(1) saturate(7) hue-rotate(72deg) brightness(.95);
}
:root[data-theme="white"] {
  --red: #ffffff; --red-soft: #d9d9d9; --red-dim: #4d4d4d; --red-line: #2b2b2b; --red-light: #9a9a9a;
  --red-wash: rgba(255, 255, 255, .10);
  --o1: #555555; --o2: #8c8c8c; --o3: #c4c4c4; --o4: #ffffff;
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23ffffff'/%3E%3C/svg%3E");
  --flag-filter: grayscale(1) contrast(1.15);
}
/* Color theme: off-white ink plus the three Bauhaus primaries.
   Blue circle, yellow triangle, red square – the same pairing the chart uses for NATO classes I, II, III. */
:root[data-theme="color"] {
  --red: #f4efe6; --red-soft: #cbc5b9; --red-dim: #55514a; --red-line: #2b2925; --red-light: #ffd400;
  --red-wash: rgba(255, 212, 0, .10);
  --s1: #2f7bff; --s2: #ffd400; --s3: #ff2a1f; --other: #55514a;
  --o1: #1d3f86; --o2: #2f7bff; --o3: #8ab6ff; --o4: #e3eeff;
  --act: #ff2a1f; --hl: #ffd400; --tag: #2f7bff; --err: #ff2a1f;
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M0 0h10L5 6z' fill='%23f4efe6'/%3E%3C/svg%3E");
  --flag-filter: none;
}
:root[data-theme="color"] .top { border-image: linear-gradient(90deg, var(--s1) 0 33.33%, var(--s2) 33.33% 66.66%, var(--s3) 66.66%) 1; }
:root[data-theme="color"] .flag { outline-color: var(--red-dim); }
:root[data-theme="color"] a:hover { color: var(--hl); }
:root[data-theme="color"] .nav a[aria-current="page"]:hover,
:root[data-theme="color"] button:hover, :root[data-theme="color"] a.btn:hover { color: var(--black); }
:root[data-theme="color"] button.primary:hover, :root[data-theme="color"] a.btn.primary:hover { color: var(--act); }

* { box-sizing: border-box; border-radius: 0; }
[hidden] { display: none !important; }
html { background: var(--black); }
body { margin: 0; background: var(--black); color: var(--red);
       font-family: "Jost", "Futura", "Century Gothic", "Avenir Next", system-ui, sans-serif; font-size: 15px; line-height: 1.4; }
::selection { background: var(--red); color: var(--black); }
a { color: var(--red); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: var(--line) solid var(--red-light); outline-offset: 2px; }

/* ---------- Header ---------- */
.top { border-bottom: var(--rule) solid var(--red); }
.top-in { max-width: 1200px; margin: 0 auto; padding: 14px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--red); text-decoration: none;
         font-weight: 700; font-size: 22px; letter-spacing: -.3px; text-transform: lowercase; }
.nav { display: flex; flex-wrap: wrap; gap: 2px; flex: 1; }
.nav a { color: var(--red); text-decoration: none; text-transform: lowercase; padding: 7px 11px; min-height: 36px;
         display: inline-flex; align-items: center; font-weight: 500; }
.nav a:hover { box-shadow: inset 0 calc(-1 * var(--line)) 0 var(--red); }
.nav a[aria-current="page"] { background: var(--hl); color: var(--black); font-weight: 700; }
.logout { display: flex; align-items: center; gap: 12px; margin: 0; }
.logout .who { text-transform: lowercase; }

/* ---------- Layout and type ---------- */
.wrap { max-width: 1200px; margin: 0 auto; padding: 26px 16px 48px; }
h1 { font-size: 44px; line-height: 1; font-weight: 700; letter-spacing: -1.2px; text-transform: lowercase; margin: 0 0 8px; }
h2 { font-size: 20px; line-height: 1.1; font-weight: 700; letter-spacing: -.3px; text-transform: lowercase; margin: 0 0 12px; }
.sub { margin: 0 0 18px; font-size: 15px; max-width: 78ch; }
.note, .hint { font-size: 13px; color: var(--red-soft); margin: 8px 0 0; max-width: 90ch; }
.hint { margin: 0 0 12px; }
strong, b { font-weight: 700; }
h1.keep-case { text-transform: none; }

/* Sections: a heavy rule on top instead of a box */
.card { border-top: var(--rule) solid var(--red); padding: 14px 0 0; margin: 0 0 30px; }
.card.narrow { max-width: 440px; margin: 48px auto; }
.card.narrow-left { max-width: 540px; }
.card.empty { text-align: left; padding-top: 22px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }

/* ---------- Controls ---------- */
select, input[type=search], input[type=text], input[type=password], input[type=number], input[type=file], button, a.btn {
  font: inherit; font-size: 15px; color: var(--red); background: var(--black);
  border: var(--line) solid var(--red); padding: 6px 10px; min-height: 40px; }
input::placeholder { color: var(--red); opacity: .55; }
input[readonly] { border-style: dashed; }
input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; flex-shrink: 0;
  border: var(--line) solid var(--red); background: var(--black); cursor: pointer; }
input[type=checkbox]:checked { background: var(--red); box-shadow: inset 0 0 0 3px var(--black); }
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }
select { appearance: none; -webkit-appearance: none; padding-right: 30px;
  background-image: var(--arrow);
  background-repeat: no-repeat; background-position: right 10px center; background-size: 10px 6px; }
input[type=file] { width: 100%; padding: 7px; }
input[type=file]::file-selector-button { font: inherit; background: var(--red); color: var(--black); border: 0; padding: 4px 10px; margin-right: 10px; text-transform: lowercase; font-weight: 700; }
button, a.btn { cursor: pointer; text-transform: lowercase; font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
button:hover, a.btn:hover { background: var(--red); color: var(--black); }
button.primary, a.btn.primary { background: var(--act); border-color: var(--act); color: var(--black); font-weight: 700; }
button.primary:hover, a.btn.primary:hover { background: var(--black); color: var(--act); }
button[aria-pressed="true"] { background: var(--hl); border-color: var(--hl); color: var(--black); font-weight: 700; }
button.danger { border-style: dashed; border-color: var(--err); color: var(--err); }
button.danger:hover { background: var(--err); color: var(--black); }

.controls { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; margin-bottom: 14px; }
.ctl { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ctl > span { font-size: 13px; text-transform: lowercase; font-weight: 500; }
.row { display: flex; gap: 6px; align-items: center; }
label.chk { display: flex; gap: 8px; align-items: center; min-height: 40px; text-transform: lowercase; }
.axisbox { border-top: var(--line) solid var(--red); padding-top: 6px; }

.form { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.form label { display: flex; flex-direction: column; gap: 4px; width: 100%; text-transform: lowercase; }
.form label.chk { flex-direction: row; align-items: center; }
.form input[type=text], .form input[type=password], .form select { width: 100%; }
form.inline { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
form.inline input[type=password] { width: 180px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.toolbar input[type=search] { min-width: 240px; flex: 1; max-width: 440px; }
.toolbar select { min-width: 180px; }
.toolbar form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0; }

fieldset { border: 0; border-top: var(--rule) solid var(--red); padding: 14px 0 0; margin: 0 0 28px; min-width: 0; }
legend { font-size: 20px; font-weight: 700; text-transform: lowercase; padding: 0 12px 0 0; letter-spacing: -.3px; }
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.fgrid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fgrid label, .metric > label { text-transform: lowercase; }
.fgrid label { display: flex; flex-direction: column; gap: 4px; }
input, select, option { text-transform: none; }
.fgrid input[type=text], .fgrid select { width: 100%; }
.metric { display: flex; flex-direction: column; gap: 4px; }
.metric .mrow { display: flex; gap: 12px; align-items: center; }
.metric .mrow input[type=text] { flex: 1; min-width: 0; }
.metric .mrow label { flex-direction: row; align-items: center; gap: 6px; white-space: nowrap; min-height: 40px; text-transform: lowercase; }

/* ---------- Messages: shape instead of color ---------- */
.alert { border: var(--line) solid var(--red); padding: 10px 14px; margin: 0 0 18px; font-weight: 500; }
.alert-error { background: var(--err); border-color: var(--err); color: var(--black); font-weight: 700; }
.alert-warn { border-style: dashed; }
.alert-info { border-width: 0 0 var(--line) 0; padding-left: 0; }

/* ---------- Tables ---------- */
.tbl-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--red-line); white-space: nowrap; }
thead th { border-bottom: var(--line) solid var(--red); text-transform: lowercase; font-weight: 700; user-select: none; }
#tbl thead th { cursor: pointer; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; padding-right: 18px; }
tr[hidden] { display: none; }
.wrap-cells th, .wrap-cells td { white-space: normal; overflow-wrap: anywhere; }
.wrap-cells td.num { white-space: nowrap; }
.wrap-cells th[scope=row] { width: 190px; overflow-wrap: normal; text-transform: lowercase; font-weight: 500; }
.facts .wrap-cells th[scope=row] { width: auto; }
.facts td.rank { font-size: 13px; text-align: right; white-space: nowrap; padding-right: 0; color: var(--red-soft); }

/* ---------- Chart ---------- */
.cardhead { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: flex-start; }
.cardhead .btns { display: flex; gap: 6px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 14px; margin: 2px 0 10px; }
.legend i { display: inline-block; width: 11px; height: 11px; margin-right: 7px; vertical-align: -1px; border-radius: 50%; }
.legend i[data-shape="square"] { border-radius: 0; }
.legend i[data-shape="triangle"] { border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.legend i.hollow { background: transparent !important; border: 2px solid var(--red); }
#chart { width: 100%; display: block; touch-action: pan-y; }
#chart text { font-family: "Jost", "Futura", system-ui, sans-serif; }
#chart .gl { stroke: var(--red-line); stroke-width: 1; }
#chart .ax { stroke: var(--red); stroke-width: 2; }
#chart .tick { fill: var(--red); font-size: 12px; font-variant-numeric: tabular-nums; }
#chart .alab { fill: var(--red); font-size: 13px; font-weight: 700; text-transform: lowercase; }
#chart .split { stroke: var(--red); stroke-width: 2; stroke-dasharray: 2 6; }
#chart .splithit { stroke: transparent; stroke-width: 22; cursor: grab; }
#chart .qlab { fill: var(--red); font-size: 13px; font-weight: 700; text-transform: lowercase; }
#chart .dlab { fill: var(--red); font-size: 12px; font-weight: 500; paint-order: stroke; stroke: var(--black); stroke-width: 4px; stroke-linejoin: round; }
#chart .pt { stroke: var(--black); stroke-width: 1.5; }
#chart .pt.est { fill: var(--black) !important; stroke-width: 2; }
#chart .pt.hl { stroke: var(--red-light); stroke-width: 2.5; }
.quads { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0 0 30px; border: var(--line) solid var(--red); }
.quad { display: flex; flex-direction: column; justify-content: flex-start; text-align: left; border: 0; border-right: var(--line) solid var(--red); padding: 12px 14px 14px; min-height: 0;
        text-transform: none; font-weight: 400; align-items: stretch; }
.quad:last-child { border-right: 0; }
.quad b { display: block; font-size: 15px; text-transform: lowercase; }
.quad .n { font-size: 52px; line-height: 1; font-weight: 700; letter-spacing: -2px; margin: 6px 0 8px; }
.quad .who { font-size: 13px; line-height: 1.35; }
.quad:hover, .quad[aria-pressed="true"] { background: var(--hl); color: var(--black); }

#tip { position: fixed; pointer-events: none; z-index: 10; background: var(--black); color: var(--red);
       border: var(--line) solid var(--red); padding: 12px 14px; font-size: 14px;
       width: 310px; max-width: calc(100vw - 16px); display: none; }
#tip .t { font-weight: 700; font-size: 20px; line-height: 1.1; letter-spacing: -.3px; display: flex; align-items: center; gap: 8px; }
#tip .s { margin: 3px 0 2px; }
#tip .r { margin-bottom: 4px; font-size: 13px; }
#tip .ty { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin: 8px 0 4px; }
#tip .ty b { font-size: 12px; text-transform: lowercase; background: var(--tag); color: var(--black); padding: 1px 7px; }
#tip .ty i { font-style: normal; font-size: 12px; text-transform: lowercase; border: 1px solid var(--red); padding: 0 6px; }
#tip .ty span { font-size: 13px; flex-basis: 100%; }
#tip .h { font-size: 13px; font-weight: 700; text-transform: lowercase; margin: 10px 0 3px; padding-top: 7px; border-top: var(--line) solid var(--red); }
#tip .v { display: flex; justify-content: space-between; gap: 14px; line-height: 1.5; }
#tip .v strong { font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
#tip .v.ax { font-weight: 700; }
#tip .v.ax strong { font-weight: 700; background: var(--hl); color: var(--black); padding: 0 5px; }
#tip .chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; }
#tip .chip { font-size: 12px; border: 1px solid var(--red); padding: 1px 7px; }
#tip .foot { font-size: 12px; margin-top: 8px; }

/* Flags stay recognizable but take the page color (original colors in the color theme) */
.flag { filter: var(--flag-filter); outline: 1px solid var(--red); flex-shrink: 0; }
#tip .t .flag { width: 21px; height: 14px; }

/* ---------- Drone page ---------- */
.headline { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.headline h1 { margin: 0; text-transform: none; }
.headline .flag { width: 42px; height: 28px; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 26px; }
.badge { font-size: 14px; text-transform: lowercase; padding: 2px 9px; border: var(--line) solid var(--red); white-space: nowrap; font-weight: 500; }
.badge.solid { background: var(--tag); border-color: var(--tag); color: var(--black); font-weight: 700; }
.badge.soft { border-width: 1px; text-transform: none; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; }
.pager { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin: 20px 0; }
.pager span { display: flex; gap: 10px; flex-wrap: wrap; }
.pager span a.btn { text-transform: none; }

/* ---------- Settings: theme picker ---------- */
.swatches { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.swatch { --c: #ff2a1f; flex-direction: column; align-items: flex-start; gap: 14px; width: 190px; padding: 16px 16px 14px;
          color: var(--c); border-color: var(--c); background: var(--black); font-size: 17px; }
.swatch-green { --c: #1fe05a; }
.swatch-white { --c: #ffffff; }
.swatch-color { --c: #f4efe6; }
.swatch-color .bar { background: linear-gradient(90deg, #2f7bff 0 33.33%, #ffd400 33.33% 66.66%, #ff2a1f 66.66%); }
.swatch .bar { display: block; width: 100%; height: 14px; background: var(--c); }
.swatch:hover, .swatch[aria-pressed="true"] { background: var(--c); color: var(--black); }
.swatch:hover .bar, .swatch[aria-pressed="true"] .bar { background: var(--black); }
.swatch-color:hover .bar, .swatch-color[aria-pressed="true"] .bar { background: linear-gradient(90deg, #2f7bff 0 33.33%, #ffd400 33.33% 66.66%, #ff2a1f 66.66%); }

/* ---------- Import, users, sign-ins ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 24px; border: var(--line) solid var(--red); }
.stat { padding: 12px 14px 14px; border-right: var(--line) solid var(--red); }
.stat:last-child { border-right: 0; }
.stat b { display: block; font-size: 52px; line-height: 1; letter-spacing: -2px; }
.stat span { font-size: 14px; text-transform: lowercase; }
.stat.bad { background: var(--err); color: var(--black); }
ul.plain, ul.links, ul.errlist { margin: 0; padding-left: 18px; line-height: 1.55; list-style: square; max-width: 100ch; }
ul.links { margin-bottom: 14px; }
.tag { display: inline-block; font-size: 13px; padding: 1px 9px; border: 1px solid var(--red); white-space: nowrap; text-transform: lowercase; }
.tag.fail { background: var(--err); border-color: var(--err); color: var(--black); font-weight: 700; }
.danger-zone { margin-top: 30px; padding-top: 16px; border-top: var(--line) dashed var(--red); }
.danger-card { max-width: 540px; border-top-style: dashed; margin-top: 44px; }

@media (max-width: 900px) {
  .quads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quad:nth-child(2) { border-right: 0; }
  .quad:nth-child(-n+2) { border-bottom: var(--line) solid var(--red); }
}
@media (max-width: 640px) {
  .wrap { padding: 20px 16px 40px; }
  h1 { font-size: 34px; letter-spacing: -.8px; }
  .brand { font-size: 20px; }
  .nav { order: 3; flex-basis: 100%; }
  .logout { margin-left: auto; }
  .grid2, .fgrid, .fgrid.three, .facts { grid-template-columns: minmax(0, 1fr); }
  .controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ctl select, .ctl input[type=search] { width: 100%; }
  .axisbox, #hlBox, #hlTypeBox, #hlPropBox, .controls > button { grid-column: 1 / -1; }
  .axisbox .row { flex-wrap: wrap; }
  .axisbox .row select { flex: 1; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(2) { border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: var(--line) solid var(--red); }
  .quad .n, .stat b { font-size: 40px; }
  .wrap-cells th[scope=row] { width: 110px; }
  .card.narrow { margin: 20px auto; }
  form.inline { flex-wrap: wrap; }
  .swatch { width: 100%; }
}

/* ---------- Statistics ---------- */
.controls.tight { margin: 0; }
.cardhead h2 { margin-top: 6px; }
.piewrap { display: grid; grid-template-columns: minmax(220px, 340px) minmax(0, 1fr); gap: 20px 40px; align-items: center; margin-top: 14px; }
#pie { width: 100%; max-width: 340px; display: block; }
#pie .slice, #bars .seg { stroke: var(--black); stroke-width: 2; }
#bars .seg { stroke-width: 0; }
#pie .slice.click, #pieLegend tr.click { cursor: pointer; }
#pie .slice:hover { stroke: var(--red-light); }
#pieLegend tr.click:hover td { background: var(--red-wash); }
#pie .pietotal { fill: var(--red); font-size: 58px; font-weight: 700; letter-spacing: -2px; font-family: "Jost", "Futura", system-ui, sans-serif; }
#pie .piesub { fill: var(--red); font-size: 15px; text-transform: lowercase; font-family: "Jost", "Futura", system-ui, sans-serif; }
#pieLegend td:first-child, #pieLegend th:first-child { width: 22px; padding-right: 6px; }
i.sw { display: inline-block; width: 12px; height: 12px; vertical-align: -1px; }
.legend i.sw { border-radius: 0; margin-right: 7px; }
#bars { width: 100%; display: block; }
#bars text { font-family: "Jost", "Futura", system-ui, sans-serif; }
#bars .gl { stroke: var(--red-line); stroke-width: 1; }
#bars .ax { stroke: var(--red); stroke-width: 2; }
#bars .tick { fill: var(--red); font-size: 12px; font-variant-numeric: tabular-nums; }
#bars .barval { font-weight: 700; }
#tip .s { max-width: 300px; }
@media (max-width: 640px) { .piewrap { grid-template-columns: minmax(0, 1fr); } #pie { margin: 0 auto; } }

/* ---------- Data set switch (drones / missiles) ---------- */
.setswitch { display: inline-flex; margin: 0 0 18px; }
.setswitch a.btn + a.btn { margin-left: calc(-1 * var(--line)); }