/*
 * British - the whole island in one skin.
 *
 * Not a repaint: the chrome changes. Union Flag and a London skyline under a
 * steady drizzle, bunting off the topbar, a Tube line down the side nav, pub
 * fascias on the cards, motorway-blue table heads, a cricket scoreboard, a
 * station departure board for the match clock, the GOV.UK yellow focus ring,
 * and a cursor set (brolly, white glove, a proper cuppa, No Entry).
 *
 * The rule the rest follows: the chrome may be as loud as it likes, the data
 * stays calm. --bg is a paper colour because the console uses it as an inset
 * well all over; the wallpaper is painted with literals on .plus-grid::before.
 * Every text colour here clears 4.5:1 on the surface it sits on.
 *
 * Art is img/brand/british/ - all of it drawn for this skin, generic on
 * purpose: no roundel, no royal arms, no real regalia.
 */

[data-brand="british"] {
  --bg: #f1ece0;
  --surface: #fbf8f1;
  --surface-2: #ece5d3;
  --field: #ffffff;
  --primary: #012169;
  --primary-ink: #ffffff;
  --secondary: #5b6b8c;
  --accent: #c8102e;
  --fg: #0b0c0c;
  --text: #0b0c0c;
  --muted: #4a5160;
  --line: rgba(1, 33, 105, 0.24);
  --valkyra: #b8122b;
  --lonestar: #0b5cad;
  --manticore: #00703c;
  --teamkill: #7d6108;
  --watch: #a04f10;
  --flag: #6b2fa8;

  --good: #00703c;
  --bad: #c8102e;
  --warn: #a04f10;
  --info: #1a65a6;
  --idle: #8b8f98;
  --bad-soft: rgba(200, 16, 46, 0.12);
  --badge-live: #00703c;
  --badge-next: #7d6108;

  --scrim: rgba(1, 14, 48, 0.55);
  --spotlight: rgba(1, 14, 48, 0.6);
  --shadow: 0 14px 36px rgba(1, 14, 48, 0.28);
  --shadow-lift: 0 -8px 24px rgba(1, 14, 48, 0.2);
  --radius: 4px;
  --font: "Ubuntu Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "Ubuntu Sans Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* Skin-only. Hammersmith One and VT323 ship one weight, so wherever they
     are used the weight is pinned and synthesis is off. */
  --brit-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --brit-sign: "Hammersmith One", "Gill Sans Nova", "Gill Sans MT", "Ubuntu Sans", sans-serif;
  --brit-board: "VT323", "Ubuntu Sans Mono", monospace;
  --brit-red: #c8102e;
  --brit-navy: #012169;
  --brit-green: #004225;
  --brit-gilt: #d4af37;
  --brit-focus: #ffdd00;
  --brit-tube: #dc241f;

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

  cursor: var(--cur-default);
  scrollbar-color: #012169 #e6dfcc;
}

/* ---------- Weather and wallpaper ---------- */

/* Skyline on top, then a paper wash, then the flag: a background layer cannot
   carry its own opacity, so the wash is what turns the flag down. */
[data-brand="british"].plus-grid::before,
[data-brand="british"] .plus-grid::before {
  background-color: #dfe5ea;
  background-image:
    url("../../img/brand/british/skyline.svg"),
    linear-gradient(180deg, rgba(223, 229, 234, 0.9), rgba(241, 236, 224, 0.86)),
    url("../../img/brand/british/union-flag.svg");
  background-size: max(100%, 1100px) auto, auto, cover;
  background-position: center bottom, 0 0, center;
  background-repeat: no-repeat;
}

/* The login page has nothing to read outside its card, so the flag gets to fly. */
[data-brand="british"] .plus-grid:has(.connect-wrap)::before {
  background-image:
    url("../../img/brand/british/skyline.svg"),
    linear-gradient(180deg, rgba(223, 229, 234, 0.58), rgba(241, 236, 224, 0.5)),
    url("../../img/brand/british/union-flag.svg");
}

/* Drizzle. One tile, moved by exactly two tiles down and one across so the
   loop has no seam. Behind everything, and it never takes a click. */
[data-brand="british"] .plus-grid::after {
  content: "";
  position: fixed;
  top: -240px;
  right: -120px;
  bottom: 0;
  left: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg stroke='%23012169' stroke-opacity='.3' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M18 6l-5 12M64 22l-5 12M102 4l-5 12M38 58l-5 12M88 66l-5 12M12 92l-5 12M58 100l-5 12M110 96l-5 12'/%3E%3C/g%3E%3C/svg%3E");
  animation: british-drizzle 0.95s linear infinite;
}

@keyframes british-drizzle {
  to { transform: translate3d(-120px, 240px, 0); }
}

/* Belisha beacon: 750 ms on, 750 ms off. */
@keyframes british-belisha {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
  [data-brand="british"] .plus-grid::after,
  [data-brand="british"] .live-chip::before {
    animation: none;
  }
}

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

[data-brand="british"] ::selection {
  background: var(--brit-focus);
  color: #0b0c0c;
}

[data-brand="british"] a {
  color: var(--brit-navy);
}

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

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

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

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

[data-brand="british"] .brand h1 {
  font-family: var(--brit-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--brit-navy);
}

[data-brand="british"] .brand-sub {
  font-family: var(--brit-sign);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0.14em;
  color: var(--brit-red);
}

/* ---------- Topbar: navy, gilt edge, bunting hung off it ---------- */

[data-brand="british"] .topbar {
  position: relative;
  background: linear-gradient(180deg, #02297f, #012169);
  border-bottom: 3px solid var(--brit-gilt);
  color: #fff;
}

[data-brand="british"] .topbar::after {
  content: "";
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  right: 0;
  height: 22px;
  pointer-events: none;
  background: url("../../img/brand/british/bunting.svg") 0 0 / auto 22px repeat-x;
}

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

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

[data-brand="british"] .topbar .brand-sub {
  color: var(--brit-gilt);
}

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

[data-brand="british"] .live-chip {
  color: #fff;
  font-family: var(--brit-sign);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0.06em;
}

[data-brand="british"] .live-chip::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 7px;
  border-radius: 50%;
  background: #ffb000;
  box-shadow: 0 0 8px #ffb000;
  animation: british-belisha 1.5s steps(1) infinite;
}

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

[data-brand="british"] .live-chip.down::before {
  background: #ff5468;
  box-shadow: none;
  animation: none;
}

/* Server tabs are bus destination blinds: yellow on black, and the one you
   are on is the blind lit up. */
[data-brand="british"] .server-tab {
  background: #111;
  color: #ffd200;
  border: 1px solid #000;
  border-radius: 3px;
  font-family: var(--brit-sign);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0.03em;
  box-shadow: inset 0 0 0 1px #2c2c2c;
}

[data-brand="british"] .server-tab.active {
  background: #ffd200;
  color: #111;
  border-color: #ffd200;
  box-shadow: 0 0 0 2px rgba(255, 210, 0, 0.35);
}

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

/* ---------- Side nav: one Tube line, a station per page ---------- */

[data-brand="british"] .nav {
  background: var(--surface);
  border-right: 3px double var(--brit-navy);
}

/* Headroom, so the bunting hangs clear of the first row. */
@media (min-width: 981px) {
  [data-brand="british"] .nav,
  [data-brand="british"] .main {
    padding-top: 32px;
  }
}

[data-brand="british"] .nav > a {
  position: relative;
  padding-left: 40px;
  border-radius: 0;
  color: var(--brit-navy);
  font-family: var(--brit-sign);
  font-size: 13px;
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0.04em;
  text-transform: none;
}

/* The line. It overshoots the 4px gap between items, so it reads unbroken. */
[data-brand="british"] .nav > a::before {
  content: "";
  position: absolute;
  left: 16px;
  top: -2px;
  bottom: -2px;
  width: 6px;
  background: var(--brit-tube);
}

/* A station tick; the page you are on is the interchange. */
[data-brand="british"] .nav > a::after {
  content: "";
  position: absolute;
  left: 22px;
  top: 50%;
  width: 8px;
  height: 5px;
  margin-top: -2.5px;
  background: var(--brit-tube);
}

[data-brand="british"] .nav > a:hover,
[data-brand="british"] .nav > a.active {
  background: rgba(1, 33, 105, 0.09);
  color: var(--brit-navy);
}

[data-brand="british"] .nav > a.active {
  box-shadow: inset -3px 0 0 var(--brit-navy);
}

[data-brand="british"] .nav > a:hover::after,
[data-brand="british"] .nav > a.active::after {
  left: 11px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border: 3px solid #0b0c0c;
  border-radius: 50%;
  background: #fff;
  box-sizing: border-box;
}

@media (min-width: 981px) {
  [data-brand="british"] body.nav-collapsed .nav > a::before,
  [data-brand="british"] body.nav-collapsed .nav > a::after {
    display: none;
  }

  [data-brand="british"] body.nav-collapsed .nav > a.active {
    box-shadow: inset 0 -3px 0 var(--brit-tube);
  }
}

/* ---------- Headings ---------- */

[data-brand="british"] .view-head h2,
[data-brand="british"] .faq-head h2 {
  font-family: var(--brit-display);
  font-weight: 700;
  color: var(--brit-navy);
  letter-spacing: 0.005em;
}

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

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

/* ---------- Cards: a pub fascia over the door ---------- */

[data-brand="british"] .card,
[data-brand="british"] .ws-card,
[data-brand="british"] .stat-tiles {
  background: var(--surface);
  border: 1px solid rgba(1, 33, 105, 0.34);
  box-shadow: 0 2px 0 rgba(1, 33, 105, 0.22), 0 8px 20px rgba(1, 14, 48, 0.1);
}

/* Gilt lettering on racing green. Only the first thing in a card gets to be
   the fascia; h3s further down stay quiet. */
[data-brand="british"] .card > h3:first-child,
[data-brand="british"] .card > .card-head:first-child {
  margin: -16px -16px 14px;
  padding: 9px 16px;
  background: linear-gradient(180deg, #0a5232, var(--brit-green));
  border-bottom: 2px solid var(--brit-gilt);
  border-radius: 3px 3px 0 0;
  color: var(--brit-gilt);
}

[data-brand="british"] .card > h3:first-child,
[data-brand="british"] .card > .card-head:first-child h3 {
  font-family: var(--brit-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--brit-gilt);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}

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

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

/* ---------- Buttons: flat, square, a hard edge underneath ---------- */

[data-brand="british"] .btn {
  background: #fffdf7;
  color: var(--brit-navy);
  border: 1px solid var(--brit-navy);
  border-radius: 3px;
  box-shadow: 0 2px 0 var(--brit-navy);
  font-weight: 600;
}

[data-brand="british"] .btn:hover {
  background: #e9edf7;
  border-color: var(--brit-navy);
}

[data-brand="british"] .btn:active {
  transform: translateY(2px);
  box-shadow: none;
}

[data-brand="british"] .btn-primary,
[data-brand="british"] .nav-foot a.btn:hover {
  background: var(--brit-navy);
  color: #fff;
  border-color: var(--brit-navy);
  box-shadow: 0 2px 0 #000b2e;
}

[data-brand="british"] .btn-primary:hover {
  background: #0a3291;
  color: #fff;
}

/* Gilt, as the name says. */
[data-brand="british"] .btn-gold,
[data-brand="british"] .btn-gold:hover {
  background: linear-gradient(180deg, #ecd06f, #cfa72c);
  color: #1a1506;
  border-color: #8a6a12;
  box-shadow: 0 2px 0 #7a5f10;
  font-family: var(--brit-sign);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0.16em;
}

[data-brand="british"] .btn-gold:hover {
  background: linear-gradient(180deg, #f5dd85, #d9b23a);
}

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

[data-brand="british"] .btn-danger:hover,
[data-brand="british"] .nav-foot a.btn-danger:hover {
  background: var(--brit-red);
  color: #fff;
  border-color: var(--brit-red);
  box-shadow: 0 2px 0 #6e0818;
}

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

[data-brand="british"] .nav-collapse {
  color: var(--brit-navy);
}

/* ---------- Pills and chips: railway tickets ---------- */

[data-brand="british"] .pill {
  background: #fffdf7;
  color: #2f3644;
  border: 1px dashed rgba(1, 33, 105, 0.55);
  border-radius: 3px;
}

[data-brand="british"] .pill:hover {
  color: var(--brit-navy);
  border-style: solid;
}

[data-brand="british"] .pill.active {
  background: var(--brit-navy);
  border: 1px solid var(--brit-navy);
  color: #fff;
}

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

[data-brand="british"] .gold-pill {
  background: var(--brit-red);
  color: #fff;
  font-family: var(--brit-sign);
  font-weight: 400;
  font-synthesis: none;
  padding: 4px 10px;
}

[data-brand="british"] .chip,
[data-brand="british"] .legend-btn {
  background: #fffdf7;
  border-radius: 3px;
}

[data-brand="british"] .chip b {
  color: var(--muted);
}

[data-brand="british"] .nav-count {
  background: var(--brit-red);
}

/* ---------- Fields: black box, yellow ring ---------- */

[data-brand="british"] .ctrl,
[data-brand="british"] .field input:not([type="checkbox"]):not([type="range"]),
[data-brand="british"] .field select,
[data-brand="british"] .field textarea {
  background: #fff;
  color: #0b0c0c;
  border: 2px solid #0b0c0c;
  border-radius: 0;
}

[data-brand="british"] .ctrl:focus,
[data-brand="british"] .field input:not([type="checkbox"]):not([type="range"]):focus,
[data-brand="british"] .field select:focus,
[data-brand="british"] .field textarea:focus {
  border-color: #0b0c0c;
  outline: 3px solid var(--brit-focus);
  outline-offset: 0;
  box-shadow: inset 0 0 0 2px #0b0c0c;
}

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

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

[data-brand="british"] .tick,
[data-brand="british"] .switch input[type="checkbox"],
[data-brand="british"] .row-check input[type="checkbox"] {
  background: #fff;
  border: 2px solid #0b0c0c;
  border-radius: 0;
}

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

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

/* The one focus style, everywhere: yellow with a black keyline, so it shows
   on paper, on navy and on the fascias alike. */
[data-brand="british"] :focus-visible {
  outline: 3px solid var(--brit-focus);
  outline-offset: 1px;
  box-shadow: 0 0 0 5px #0b0c0c;
}

[data-brand="british"] .ctrl:focus-visible,
[data-brand="british"] .field input:focus-visible,
[data-brand="british"] .field select:focus-visible,
[data-brand="british"] .field textarea:focus-visible {
  outline-offset: 0;
  box-shadow: inset 0 0 0 2px #0b0c0c;
}

/* ---------- Tables: motorway blue heads, yellow for the sorted column ---------- */

[data-brand="british"] .table-wrap {
  background: #fff;
  border: 2px solid #0069a8;
  border-radius: 4px;
}

[data-brand="british"] th,
[data-brand="british"] .feed-kills th {
  background: #0069a8;
  color: #fff;
  border-bottom: 0;
  font-family: var(--brit-sign);
  font-size: 12px;
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0.06em;
}

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

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

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

[data-brand="british"] tbody tr:nth-child(even) td {
  background-color: rgba(1, 33, 105, 0.035);
}

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

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

/* ---------- Scores: the village cricket board; clock: the departure board ---------- */

[data-brand="british"] .score {
  background: #14161c;
  border: 3px solid #2d313c;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px #000;
}

[data-brand="british"] .score .name {
  color: #e9dfc4;
  font-family: var(--brit-sign);
  font-weight: 400;
  font-synthesis: none;
}

[data-brand="british"] .score .n {
  font-family: var(--brit-sign);
  font-weight: 400;
  font-synthesis: none;
  font-size: 40px;
}

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

[data-brand="british"] .timer {
  display: inline-block;
  padding: 0 14px;
  background: #0b0c0c;
  border: 2px solid #2d313c;
  border-radius: 3px;
  color: #ffb000;
  font-family: var(--brit-board);
  font-size: 50px;
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.05;
  letter-spacing: 0.06em;
  text-shadow: 0 0 10px rgba(255, 176, 0, 0.45);
}

/* ---------- Overlays ---------- */

/* Keep Calm: red band across the top, the title set like the poster. */
[data-brand="british"] .modal,
[data-brand="british"] .tour-card {
  background: var(--surface);
  border: 2px solid var(--brit-navy);
  border-top: 10px solid var(--brit-red);
  border-radius: 4px;
}

[data-brand="british"] .modal h3,
[data-brand="british"] .tour-card h3 {
  font-family: var(--brit-display);
  font-size: 21px;
  font-weight: 700;
  color: var(--brit-navy);
}

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

[data-brand="british"] .menu button:hover,
[data-brand="british"] .combo-opt.active,
[data-brand="british"] .combo-opt:hover {
  background: var(--brit-focus);
  color: #0b0c0c;
  border-radius: 0;
}

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

/* Mind the gap: the platform edge. */
[data-brand="british"] .wd-toast {
  background: #0b0c0c;
  color: #fff;
  border: 0;
  border-bottom: 6px solid #ffcd00;
  border-radius: 0;
  font-family: var(--brit-sign);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0.03em;
}

[data-brand="british"] .tour-spot {
  border-color: var(--brit-focus);
}

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

/* ---------- Patchlog: the line again, one interchange per date ---------- */

[data-brand="british"] .patchlog-group::before {
  left: 4px;
  width: 5px;
  border-radius: 0;
  background: var(--brit-tube);
}

[data-brand="british"] .patchlog-date::before {
  width: 14px;
  height: 14px;
  left: -1px;
  background: #fff;
  border: 3px solid #0b0c0c;
}

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

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

[data-brand="british"] .patchlog-item {
  background: #fffdf7;
  border-radius: 3px;
}

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

/* ---------- Login: crown, card, bunting across the street ---------- */

[data-brand="british"] .connect-wrap::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 34px;
  pointer-events: none;
  background: url("../../img/brand/british/bunting.svg") 0 0 / auto 34px repeat-x;
}

[data-brand="british"] .connect-card {
  background: var(--surface);
  border: 2px solid var(--brit-navy);
  border-top: 12px solid var(--brit-red);
  border-radius: 4px;
  box-shadow: 0 0 0 5px #fff, 0 0 0 7px var(--brit-navy), var(--shadow);
  backdrop-filter: none;
}

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

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

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

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

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

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

/* ---------- Cursors ----------
   Every cursor the console sets gets its British twin, and each keeps the
   keyword behind it, so a browser that will not load the art still points.
   The selectors mirror app.css one for one, plus what the UA would set. */

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

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

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

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

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

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

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

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

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

/* The tab strip scrolls sideways inside the topbar; a full-width bar there
   would be taller than the blinds. */
[data-brand="british"] .server-tabs {
  scrollbar-width: thin;
  scrollbar-color: #d4af37 transparent;
}

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