/*
 * American - red, white and blue, and the Fourth of July every day.
 *
 * Where British is a street party and German a drawing office, this one is
 * the flag itself: the side nav is the canton - stars on navy - with the
 * stripes under its foot, the topbar carries the stripes on across the page,
 * and the whole flag sits faded behind the console. Fireworks go off over it
 * and a bald eagle glides through. Server tabs are licence plates, card heads
 * are starred navy with a red rule, buttons are underlined in red and white,
 * pills are campaign buttons, table heads are red, the scores and the clock
 * are navy boards underlined like the buttons, overlays wear a band of stars. A poster slab for the
 * titles, Public Sans for everything that has to be read. Cursors: a starred
 * arrow, a foam finger, a cheeseburger.
 *
 * No bunting and no skyline: those are British's.
 *
 * As in British, --bg is a paper colour because the console uses it as an
 * inset well, the wallpaper is painted with literals on .plus-grid::before,
 * and every text colour clears 4.5:1 on its surface. Art is
 * img/brand/american/, drawn for this skin; no seals, no real plates.
 */

[data-brand="american"] {
  --bg: #f2f1ec;
  --surface: #fbfbf8;
  --surface-2: #e8e7e0;
  --field: #ffffff;
  --primary: #0a3161;
  --primary-ink: #ffffff;
  --secondary: #6b6f78;
  --accent: #b31942;
  --fg: #111111;
  --text: #111111;
  --muted: #4b4f57;
  --line: rgba(10, 49, 97, 0.24);
  --valkyra: #c1121c;
  --lonestar: #1d4f91;
  --manticore: #1d6b3a;
  --teamkill: #7a5f00;
  --watch: #a04f10;
  --flag: #6b2fa8;

  --good: #1d6b3a;
  --bad: #b31942;
  --warn: #a04f10;
  --info: #1d4f91;
  --idle: #8b8f98;
  --bad-soft: rgba(179, 25, 66, 0.1);
  --badge-live: #1d6b3a;
  --badge-next: #7a5f00;

  --scrim: rgba(10, 10, 12, 0.6);
  --spotlight: rgba(10, 10, 12, 0.64);
  --shadow: 0 14px 36px rgba(10, 10, 12, 0.3);
  --shadow-lift: 0 -8px 24px rgba(10, 10, 12, 0.2);
  --radius: 6px;
  /* Public Sans is the federal web face; Franklin Gothic stands in offline. */
  --font: "Public Sans", "Franklin Gothic Medium", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", "Cascadia Mono", ui-monospace, monospace;

  --us-slab: "Alfa Slab One", "Rockwell Extra Bold", "Rockwell", Georgia, serif;
  --us-navy: #0a3161;
  --us-red: #b31942;
  --us-gold: #ffc72c;
  --us-blue: #1d4f91;
  --us-asphalt: #33363b;

  --cur-default: url("../../img/brand/american/cursors/default.svg") 1 1, default;
  --cur-pointer: url("../../img/brand/american/cursors/pointer.svg") 11 1, pointer;
  --cur-text: url("../../img/brand/american/cursors/text.svg") 16 16, text;
  --cur-grab: url("../../img/brand/american/cursors/grab.svg") 15 14, grab;
  --cur-grabbing: url("../../img/brand/american/cursors/grabbing.svg") 15 14, grabbing;
  --cur-help: url("../../img/brand/american/cursors/help.svg") 1 1, help;
  --cur-no: url("../../img/brand/american/cursors/not-allowed.svg") 16 16, not-allowed;
  --cur-wait: url("../../img/brand/american/cursors/wait.svg") 16 16, wait;
  --cur-progress: url("../../img/brand/american/cursors/progress.svg") 1 1, progress;

  cursor: var(--cur-default);
  scrollbar-color: #0a3161 #dddcd4;
}

/* ---------- Wallpaper, fireworks, eagle ---------- */

/* Behind the console: a paper wash over the whole flag. The wash keeps the
   stripes faint enough that every text colour still clears 4.5:1 on them. */
[data-brand="american"].plus-grid::before,
[data-brand="american"] .plus-grid::before {
  background-color: #e9e8e2;
  background-image:
    linear-gradient(rgba(240, 238, 230, 0.84), rgba(240, 238, 230, 0.84)),
    url("../../img/brand/american/flag.svg");
  background-size: auto, cover;
  background-position: 0 0, 0 0;
  background-repeat: no-repeat;
}

/* Beside the nav, not under it: the nav is already the canton. */
@media (min-width: 981px) {
  [data-brand="american"].plus-grid::before,
  [data-brand="american"] .plus-grid::before {
    background-size: auto, calc(100% - var(--nav-w, 230px)) 100%;
    background-position: 0 0, right top;
  }
}

/* Nothing to read outside the login card, so the flag shows itself in full. */
[data-brand="american"] .plus-grid:has(.connect-wrap)::before {
  background-image: url("../../img/brand/american/flag.svg");
  background-size: cover;
  background-position: 0 0;
}

/* Three fireworks and the eagle. Each is its own fixed box behind the cards,
   so a burst grows from its own centre and only transform and opacity move. */
[data-brand="american"].plus-grid::after,
[data-brand="american"] .plus-grid::after,
[data-brand="american"] .shell::before,
[data-brand="american"] .shell::after,
[data-brand="american"] .main::after,
[data-brand="american"] .connect-wrap::before,
[data-brand="american"] .connect-wrap::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  background: center / contain no-repeat;
}

[data-brand="american"].plus-grid::after,
[data-brand="american"] .plus-grid::after {
  top: 46px;
  right: 5%;
  width: 170px;
  height: 170px;
  background-image: url("../../img/brand/american/firework-red.svg");
  animation: american-burst 5.5s ease-out infinite;
}

[data-brand="american"] .shell::before,
[data-brand="american"] .connect-wrap::after {
  top: 70px;
  right: 24%;
  width: 120px;
  height: 120px;
  background-image: url("../../img/brand/american/firework-blue.svg");
  animation: american-burst 7s ease-out 1.8s infinite backwards;
}

[data-brand="american"] .shell::after {
  bottom: 30px;
  right: 38%;
  width: 150px;
  height: 150px;
  background-image: url("../../img/brand/american/firework-gold.svg");
  animation: american-burst 8.5s ease-out 3.4s infinite backwards;
}

[data-brand="american"] .connect-wrap::after {
  top: auto;
  bottom: 12%;
  right: auto;
  left: 8%;
  width: 190px;
  height: 190px;
}

/* Over the login flag a red burst is lost on the red stripes; gold shows on all of it. */
[data-brand="american"] .plus-grid:has(.connect-wrap)::after {
  background-image: url("../../img/brand/american/firework-gold.svg");
}

/* The eagle crosses the title row, left of centre to off the right edge. */
[data-brand="american"] .main::after,
[data-brand="american"] .connect-wrap::before {
  top: 50px;
  left: 42%;
  width: 184px;
  height: 72px;
  background-image: url("../../img/brand/american/eagle.svg?v=2");
  animation: american-glide 36s linear infinite;
}

[data-brand="american"] .connect-wrap::before {
  top: 8%;
  left: 6%;
  width: 260px;
  height: 102px;
  animation-duration: 48s;
}

@keyframes american-burst {
  0% { transform: scale(0.15); opacity: 0; }
  8% { opacity: 1; }
  40% { transform: scale(1); opacity: 1; }
  70%, 100% { transform: scale(1.1); opacity: 0; }
}

@keyframes american-glide {
  0% { transform: translate3d(0, 10px, 0); opacity: 0; }
  6% { opacity: 1; }
  50% { transform: translate3d(34vw, -8px, 0); }
  94% { opacity: 1; }
  100% { transform: translate3d(68vw, 8px, 0); opacity: 0; }
}

/* Held still: the bursts stay open, the eagle hangs on the thermal. */
@media (prefers-reduced-motion: reduce) {
  [data-brand="american"].plus-grid::after,
  [data-brand="american"] .plus-grid::after,
  [data-brand="american"] .shell::before,
  [data-brand="american"] .shell::after,
  [data-brand="american"] .main::after,
  [data-brand="american"] .connect-wrap::before,
  [data-brand="american"] .connect-wrap::after {
    animation: none;
  }
}

@media print {
  [data-brand="american"].plus-grid::after,
  [data-brand="american"] .plus-grid::after,
  [data-brand="american"] .shell::before,
  [data-brand="american"] .shell::after,
  [data-brand="american"] .main::after,
  [data-brand="american"] .connect-wrap::before,
  [data-brand="american"] .connect-wrap::after {
    display: none;
  }
}

[data-brand="american"] ::selection {
  background: var(--us-red);
  color: #fff;
}

[data-brand="american"] a {
  color: var(--us-blue);
}

[data-brand="american"] a:hover {
  color: var(--us-red);
}

/* ---------- Brand ---------- */

[data-brand="american"] .mark {
  display: grid;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 0;
  background: url("../../img/brand/american/shield.svg") center / contain no-repeat;
  font-size: 0;
}

[data-brand="american"] .brand-icon {
  display: none;
}

/* Alfa Slab One ships one weight: pin it and keep synthesis off. */
[data-brand="american"] .brand h1,
[data-brand="american"] .view-head h2,
[data-brand="american"] .faq-head h2,
[data-brand="american"] .modal h3,
[data-brand="american"] .tour-card h3 {
  font-family: var(--us-slab);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0.01em;
  color: var(--us-navy);
}

[data-brand="american"] .view-head h2::before,
[data-brand="american"] .view-head h2::after {
  content: "\2605";
  font-family: "Segoe UI Symbol", "Apple Symbols", sans-serif;
  font-size: 0.62em;
  color: var(--us-red);
  vertical-align: 0.18em;
}

[data-brand="american"] .view-head h2::before {
  margin-right: 0.4em;
}

[data-brand="american"] .view-head h2::after {
  margin-left: 0.4em;
}

[data-brand="american"] .brand h1 {
  font-size: 21px;
}

[data-brand="american"] .view-head h2 {
  font-size: 28px;
}

[data-brand="american"] .modal h3,
[data-brand="american"] .tour-card h3,
[data-brand="american"] .faq-head h2 {
  font-size: 20px;
}

[data-brand="american"] .view-head p {
  color: #2c2f36;
}

[data-brand="american"] .brand-sub {
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--us-red);
}

/* ---------- Topbar: the stripes, run on from the canton ---------- */

/* Narrow screens get the canton alone: the brand and the Menu button need it. */
[data-brand="american"] .topbar {
  position: relative;
  background: #0a3161 url("../../img/brand/american/stars.svg") 0 -4px / 40px 40px;
  border-bottom: 3px solid var(--us-red);
  color: #fff;
}

[data-brand="american"] .topbar .mark {
  width: 34px;
  height: 34px;
}

[data-brand="american"] .topbar .brand h1 {
  font-size: 18px;
  color: #fff;
}

[data-brand="american"] .topbar .brand-sub {
  color: var(--us-gold);
}

[data-brand="american"] .topbar .hint {
  color: #e6e6e6;
}

[data-brand="american"] .live-chip {
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.04em;
}

[data-brand="american"] .live-chip.down {
  color: #ff9b9b;
}

/* Wide ones get the flag's top edge: stars over the brand, as wide as the open
   nav, then a white bar between two red stripes. */
@media (min-width: 981px) {
  [data-brand="american"] .topbar {
    background:
      linear-gradient(180deg, var(--us-red) 0 5px, #fff 5px calc(100% - 5px), var(--us-red) calc(100% - 5px)) 230px 0 / 100% 100% no-repeat,
      #0a3161 url("../../img/brand/american/stars.svg") 0 -4px / 40px 40px;
    border-bottom: 3px solid var(--us-navy);
    color: var(--us-navy);
  }

  /* The brand fills the canton, so the first licence plate starts on the white
     and never straddles the edge: 16 padding + 210 + 12 gap = 238, past the 230. */
  [data-brand="american"] .topbar .brand {
    min-width: 210px;
  }

  [data-brand="american"] .topbar .hint {
    color: #33363b;
  }

  [data-brand="american"] .topbar .live-chip {
    color: var(--us-navy);
  }

  [data-brand="american"] .topbar .live-chip.down {
    color: var(--us-red);
  }
}

/* Server tabs are licence plates: white, navy edge, a red band along the top. */
[data-brand="american"] .server-tab {
  background: #fff;
  color: #111;
  border: 2px solid var(--us-navy);
  border-radius: 5px;
  box-shadow: inset 0 4px 0 var(--us-red);
  font-weight: 700;
  letter-spacing: 0.04em;
}

[data-brand="american"] .server-tab.active {
  background: var(--us-red);
  border-color: var(--us-navy);
  box-shadow: inset 0 4px 0 #fff;
  color: #fff;
}

[data-brand="american"] .server-tab .icon-btn {
  background: transparent;
  border: 0;
  box-shadow: none;
  color: inherit;
}

/* ---------- Side nav: the flag, hung - the canton up top, the stripes under the foot ---------- */

[data-brand="american"] .nav {
  background: var(--us-navy) url("../../img/brand/american/stars.svg") 0 0 / 56px 56px;
  border-right: 4px solid #fff;
  box-shadow: inset -4px 0 0 var(--us-red);
}

[data-brand="american"] .nav > a {
  border-radius: 3px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: none;
}

[data-brand="american"] .nav > a:hover {
  background: var(--us-red);
  color: #fff;
}

[data-brand="american"] .nav > a.active {
  background: #fff;
  color: var(--us-navy);
  box-shadow: inset 6px 0 0 var(--us-red), inset 0 0 0 2px var(--us-navy);
}

/* The page's navy scrollbar reads as a stray stripe down the sign. */
[data-brand="american"] .nav {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.55) transparent;
}

/* The stripes run edge to edge under the foot: the nav's own padding is pulled
   back and handed to the foot. Desktop only; the narrow nav is a different box. */
@media (min-width: 981px) {
  [data-brand="american"] .nav-foot {
    /* 4px short on the right, so the nav's red keyline runs on past the stripes. */
    margin: auto -6px -20px -10px;
    padding: 16px 6px 20px 10px;
    border-top: 3px solid #fff;
    background: repeating-linear-gradient(180deg, var(--us-red) 0 13px, #fff 13px 26px);
  }

  [data-brand="american"] body.nav-collapsed .nav-foot {
    margin-inline: -9px -5px;
    padding-inline: 9px 5px;
  }
}

/* Links and buttons share the foot; the base sizes them differently. */
[data-brand="american"] .nav-foot .btn {
  padding: 9px 12px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Cards: navy head, white letters, red rule ---------- */

[data-brand="american"] .card,
[data-brand="american"] .ws-card,
[data-brand="american"] .stat-tiles {
  background: var(--surface);
  border: 1px solid rgba(10, 49, 97, 0.5);
  /* The inset band only shows on a card with no head; a head paints over it. */
  box-shadow: 3px 3px 0 rgba(10, 49, 97, 0.18), inset 0 4px 0 var(--us-red);
}

[data-brand="american"] .card > h3:first-child,
[data-brand="american"] .card > .card-head:first-child {
  margin: -16px -16px 14px;
  padding: 9px 16px;
  /* Stars on the right half only, so the title sits on plain navy. */
  background:
    linear-gradient(90deg, #0a3161 0 45%, rgba(10, 49, 97, 0) 100%),
    #0a3161 url("../../img/brand/american/stars.svg") 0 -2px / 30px 30px;
  border-bottom: 3px solid var(--us-red);
  border-radius: 5px 5px 0 0;
  color: #fff;
}

[data-brand="american"] .card > h3:first-child,
[data-brand="american"] .card > .card-head:first-child h3 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #fff;
}

[data-brand="american"] .card > .card-head:first-child .hint,
[data-brand="american"] .card > .card-head:first-child label,
[data-brand="american"] .card > .card-head:first-child .lbl {
  color: #f2f1ec;
}

[data-brand="american"] .card > details > summary.card-head,
[data-brand="american"] details.card > summary.card-head {
  cursor: var(--cur-pointer) !important;
}

/* ---------- Buttons: rounded, and underlined like the flag - white, then red. Paint only. ---------- */

[data-brand="american"] .btn {
  background: #fff;
  color: var(--us-navy);
  border: 2px solid var(--us-navy);
  border-radius: 6px;
  box-shadow: 0 2px 0 #fff, 0 4px 0 var(--us-red);
  font-weight: 700;
}

[data-brand="american"] .btn:hover {
  background: #eef2f9;
  border-color: var(--us-navy);
}

[data-brand="american"] .btn:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--us-red);
}

[data-brand="american"] .btn-primary,
[data-brand="american"] .nav-foot a.btn:hover {
  background: var(--us-navy);
  color: #fff;
  border-color: var(--us-navy);
}

[data-brand="american"] .btn-primary:hover {
  background: #124487;
  color: #fff;
}

[data-brand="american"] .btn-gold,
[data-brand="american"] .btn-gold:hover {
  background: var(--us-gold);
  color: #111;
  border-color: var(--us-navy);
  letter-spacing: 0.16em;
}

[data-brand="american"] .btn-gold:hover {
  background: #ffd75e;
}

[data-brand="american"] .btn-danger {
  background: #fff;
  color: var(--us-red);
  border-color: var(--us-red);
  box-shadow: 0 2px 0 #fff, 0 4px 0 var(--us-navy);
}

[data-brand="american"] .btn-danger:hover,
[data-brand="american"] .nav-foot a.btn-danger:hover {
  background: var(--us-red);
  color: #fff;
  border-color: var(--us-red);
}

[data-brand="american"] .btn:disabled,
[data-brand="american"] .btn[aria-disabled="true"] {
  opacity: 0.55;
  box-shadow: none;
}

/* On the stripes an underline would be lost; a white edge lifts the button off them. */
[data-brand="american"] .nav-foot .btn {
  box-shadow: 0 0 0 2px #fff;
}

/* ---------- Pills and chips: campaign buttons ---------- */

[data-brand="american"] .pill {
  background: #fff;
  color: #2c2f36;
  border: 1px solid var(--us-navy);
  border-radius: 999px;
}

[data-brand="american"] .pill:hover {
  background: #eef2f9;
}

[data-brand="american"] .pill.active {
  background: var(--us-navy);
  /* White edge, so the active pill still shows on a navy card head. */
  border-color: #fff;
  color: #fff;
}

/* After .pill.active, which ties with the base faction rules and would paint
   all three navy. White clears 4.5:1 on each. */
[data-brand="american"] .pill.valkyra.active { background: var(--valkyra); border-color: var(--valkyra); color: #fff; }
[data-brand="american"] .pill.lonestar.active { background: var(--lonestar); border-color: var(--lonestar); color: #fff; }
[data-brand="american"] .pill.manticore.active { background: var(--manticore); border-color: var(--manticore); color: #fff; }

[data-brand="american"] .gold-pill {
  background: var(--us-red);
  color: #fff;
  padding: 4px 10px;
}

[data-brand="american"] .chip,
[data-brand="american"] .legend-btn {
  background: #fff;
  border-radius: 999px;
}

/* ---------- Fields: rounded, navy edge, a red ring ---------- */

[data-brand="american"] .ctrl,
[data-brand="american"] .field input:not([type="checkbox"]):not([type="range"]),
[data-brand="american"] .field select,
[data-brand="american"] .field textarea {
  background: #fff;
  color: #111;
  border: 2px solid var(--us-navy);
  border-radius: 6px;
}

[data-brand="american"] .ctrl:focus,
[data-brand="american"] .field input:not([type="checkbox"]):not([type="range"]):focus,
[data-brand="american"] .field select:focus,
[data-brand="american"] .field textarea:focus {
  border-color: var(--us-navy);
  outline: 3px solid var(--us-red);
  outline-offset: 0;
  box-shadow: none;
}

[data-brand="american"] ::placeholder {
  color: #5f636c;
  opacity: 1;
}

[data-brand="american"] .field label,
[data-brand="american"] .lbl {
  color: #2c2f36;
}

[data-brand="american"] .tick,
[data-brand="american"] .switch input[type="checkbox"],
[data-brand="american"] .row-check input[type="checkbox"] {
  background: #fff;
  border: 2px solid var(--us-navy);
  border-radius: 4px;
}

[data-brand="american"] .tick:checked,
[data-brand="american"] .switch input[type="checkbox"]:checked,
[data-brand="american"] .row-check input[type="checkbox"]:checked {
  background: var(--us-navy);
  border-color: var(--us-navy);
}

[data-brand="american"] .tick:checked::after,
[data-brand="american"] .switch input[type="checkbox"]:checked::after,
[data-brand="american"] .row-check input[type="checkbox"]:checked::after {
  left: 3px;
  top: 0;
}

/* One focus style everywhere: a red ring on a white keyline, so it shows on
   paper and on the navy alike. */
[data-brand="american"] :focus-visible {
  outline: 3px solid var(--us-red);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}

[data-brand="american"] .ctrl:focus-visible,
[data-brand="american"] .field input:focus-visible,
[data-brand="american"] .field select:focus-visible,
[data-brand="american"] .field textarea:focus-visible {
  outline-offset: 0;
  box-shadow: none;
}

/* ---------- Tables: red heads, gold for the sorted column ---------- */

[data-brand="american"] .table-wrap {
  background: #fff;
  border: 2px solid var(--us-navy);
  border-radius: 6px;
}

[data-brand="american"] th,
[data-brand="american"] .feed-kills th {
  background: var(--us-red);
  color: #fff;
  border-bottom: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* The base greys the Time head out; on red it has to be white like the rest. */
[data-brand="american"] .player-table th.time-col {
  color: #fff;
}

[data-brand="american"] .player-table th[data-sort]:hover,
[data-brand="american"] .audit-table th[data-audit-sort]:hover,
[data-brand="american"] .db-table th[data-db-sort]:hover,
[data-brand="american"] .flag-table th[data-flag-sort]:hover,
[data-brand="american"] .feed-kills th[data-feed-sort]:hover,
[data-brand="american"] .feed-stats th[data-stats-sort]:hover {
  color: #fff;
  text-decoration: underline;
}

[data-brand="american"] .player-table th[aria-sort],
[data-brand="american"] .audit-table th[aria-sort],
[data-brand="american"] .db-table th[aria-sort],
[data-brand="american"] .feed-kills th[aria-sort] {
  color: #ffd75e;
}

[data-brand="american"] tbody tr:nth-child(even) td {
  background-color: rgba(10, 49, 97, 0.035);
}

[data-brand="american"] tbody tr:hover td {
  background-color: #fff3c4;
}

[data-brand="american"] .cell-pick:hover,
[data-brand="american"] .feed-steam:hover {
  color: var(--us-red);
  text-decoration: underline;
}

/* ---------- Scores and clock: navy boards, underlined white then red like the buttons ---------- */

[data-brand="american"] .score {
  background: var(--us-navy);
  border: 2px solid var(--us-navy);
  border-radius: 6px;
  box-shadow: inset 0 -6px 0 var(--us-red), inset 0 -8px 0 #fff;
}

[data-brand="american"] .score .name {
  color: #e9e4d6;
  font-weight: 700;
}

[data-brand="american"] .score .n {
  font-size: 40px;
}

/* The faction tokens are inks for paper; on the navy board they go to chalk. */
[data-brand="american"] .score.valkyra .n { color: #ff8a8a; }
[data-brand="american"] .score.lonestar .n { color: #8cc4ff; }
[data-brand="american"] .score.manticore .n { color: #7fe0a6; }

[data-brand="american"] .timer {
  display: inline-block;
  padding: 2px 14px;
  background: var(--us-navy);
  border: 2px solid var(--us-navy);
  border-radius: 6px;
  box-shadow: 0 2px 0 #fff, 0 4px 0 var(--us-red);
  color: #fff;
  font-family: var(--mono);
  font-size: 38px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ---------- Overlays: a band of stars across the top, a red rule under it ---------- */

[data-brand="american"] .modal,
[data-brand="american"] .tour-card {
  background:
    linear-gradient(var(--us-red), var(--us-red)) 0 20px / 100% 4px no-repeat,
    linear-gradient(var(--surface), var(--surface)) 0 24px / 100% 100% no-repeat,
    #0a3161 url("../../img/brand/american/stars.svg") 0 -2px / 24px 24px;
  border: 2px solid var(--us-navy);
  border-radius: 8px;
  padding-top: 38px;
}

[data-brand="american"] .menu {
  background: #fff;
  border: 2px solid var(--us-navy);
  border-radius: 6px;
}

[data-brand="american"] .menu button:hover,
[data-brand="american"] .combo-opt.active,
[data-brand="american"] .combo-opt:hover {
  background: var(--us-red);
  color: #fff;
  border-radius: 4px;
}

[data-brand="american"] .combo-opt.active .combo-detail,
[data-brand="american"] .combo-opt:hover .combo-detail {
  color: inherit;
}

/* A word from the press box. */
[data-brand="american"] .wd-toast {
  background: var(--us-navy);
  color: #fff;
  border: 2px solid #fff;
  border-left: 10px solid var(--us-red);
  border-radius: 6px;
  font-weight: 700;
}

[data-brand="american"] .tour-spot {
  border-color: var(--us-red);
}

[data-brand="american"] .gs-stage {
  background: var(--surface);
  border: 2px solid var(--us-navy);
  border-radius: 8px;
}

/* ---------- Patchlog: a two-lane road, a mile marker per date ---------- */

[data-brand="american"] .patchlog-group::before {
  left: 4px;
  width: 5px;
  border-radius: 0;
  background:
    repeating-linear-gradient(180deg, var(--us-gold) 0 8px, transparent 8px 16px) center / 1px 100% no-repeat,
    var(--us-asphalt);
}

[data-brand="american"] .patchlog-date::before {
  width: 14px;
  height: 14px;
  left: -1px;
  background: var(--us-gold);
  border: 3px solid var(--us-asphalt);
}

/* .modal h3 reaches the date too; put it back to a label. */
[data-brand="american"] .modal .patchlog-date {
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
}

[data-brand="american"] .patchlog-date span {
  background: var(--us-navy);
  border-color: var(--us-navy);
  color: #fff;
  border-radius: 2px;
}

[data-brand="american"] .patchlog-item {
  background: #fff;
  border-radius: 2px;
}

[data-brand="american"] .patchlog-item p {
  color: #2c2f36;
}

/* ---------- Login ---------- */

[data-brand="american"] .connect-card {
  background:
    linear-gradient(var(--us-red), var(--us-red)) 0 30px / 100% 5px no-repeat,
    linear-gradient(var(--surface), var(--surface)) 0 35px / 100% 100% no-repeat,
    #0a3161 url("../../img/brand/american/stars.svg") 0 0 / 30px 30px;
  border: 2px solid var(--us-navy);
  border-radius: 10px;
  padding-top: 56px;
  box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--us-red), 0 18px 40px rgba(6, 24, 50, 0.5);
  backdrop-filter: none;
}

[data-brand="american"] .connect-card .mark {
  width: 56px;
  height: 56px;
}

[data-brand="american"] .connect-card .brand h1 {
  font-size: 30px;
}

/* ---------- Scrollbars ---------- */

[data-brand="american"] ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

[data-brand="american"] ::-webkit-scrollbar-track {
  background: #dddcd4;
}

[data-brand="american"] ::-webkit-scrollbar-thumb {
  background: var(--us-navy);
  border: 2px solid #dddcd4;
  border-radius: 0;
}

[data-brand="american"] .server-tabs {
  scrollbar-width: thin;
  scrollbar-color: #ffc72c transparent;
}

[data-brand="american"] .server-tabs::-webkit-scrollbar {
  height: 5px;
}

/* ---------- Cursors ----------
   Same arrangement as British and German: each of the console's cursors gets its twin,
   and each keeps the keyword behind it for a browser that skips the art. */

[data-brand="american"] a[href],
[data-brand="american"] button,
[data-brand="american"] select,
[data-brand="american"] summary,
[data-brand="american"] label[for],
[data-brand="american"] [role="button"],
[data-brand="american"] input[type="checkbox"],
[data-brand="american"] input[type="range"],
[data-brand="american"] .btn,
[data-brand="american"] .server-tab,
[data-brand="american"] .perm-acc-btn,
[data-brand="american"] .perm-acc-head > label,
[data-brand="american"] .perm-list label,
[data-brand="american"] .role-card-head,
[data-brand="american"] .tick,
[data-brand="american"] .switch input[type="checkbox"],
[data-brand="american"] .row-check input[type="checkbox"],
[data-brand="american"] .wd-toast.show,
[data-brand="american"] .probe-table details summary,
[data-brand="american"] .db-notes-only,
[data-brand="american"] .db-notes-only input,
[data-brand="american"] .btn-plain,
[data-brand="american"] .ws-more,
[data-brand="american"] .feed-match-head,
[data-brand="american"] .cell-pick,
[data-brand="american"] .feed-steam,
[data-brand="american"] .feed-setup > summary,
[data-brand="american"] .combo-clear,
[data-brand="american"] .combo-opt,
[data-brand="american"] .pill,
[data-brand="american"] .player-table th[data-sort],
[data-brand="american"] .audit-table th[data-audit-sort],
[data-brand="american"] .db-table th[data-db-sort],
[data-brand="american"] .flag-table th[data-flag-sort],
[data-brand="american"] .feed-kills th[data-feed-sort],
[data-brand="american"] .feed-stats th[data-stats-sort],
[data-brand="american"] .legend-btn,
[data-brand="american"] .acc-btn,
[data-brand="american"] .faq summary,
[data-brand="american"] .menu button,
[data-brand="american"] .feed-result-close {
  cursor: var(--cur-pointer);
}

[data-brand="american"] input:not([type="checkbox"]):not([type="range"]):not([type="button"]):not([type="submit"]),
[data-brand="american"] textarea,
[data-brand="american"] [contenteditable="true"] {
  cursor: var(--cur-text);
}

[data-brand="american"] .rot-handle {
  cursor: var(--cur-grab);
}

[data-brand="american"] .rot-handle:active {
  cursor: var(--cur-grabbing);
}

[data-brand="american"] body.rot-dragging,
[data-brand="american"] body.rot-dragging * {
  cursor: var(--cur-grabbing) !important;
}

[data-brand="american"] .help-tip,
[data-brand="american"] abbr[title] {
  cursor: var(--cur-help);
}

[data-brand="american"] button:disabled,
[data-brand="american"] .btn:disabled,
[data-brand="american"] .btn[aria-disabled="true"],
[data-brand="american"] select:disabled,
[data-brand="american"] input:disabled,
[data-brand="american"] textarea:disabled,
[data-brand="american"] .tick:disabled,
[data-brand="american"] .switch input[type="checkbox"]:disabled {
  cursor: var(--cur-no);
}

[data-brand="american"] [aria-busy="true"] {
  cursor: var(--cur-progress);
}

[data-brand="american"] [aria-busy="true"] button,
[data-brand="american"] #connect-submit:disabled {
  cursor: var(--cur-wait);
}