/* ==========================================================================
   NinDecks site header (ported from RiftMana's header, owner 2026-10-21)
   Markup: inc/site-header.php - behaviour: js/site-header.js.
   The collection look: dark bar, grey controls (#1a1a1a on #3a3a3a), boxes
   #222 on #333 with 10px corners, the site's orange (--ps-orange, style.css)
   for the current page and the one main button. Everything is scoped under
   .rm-hd / .rm-hd-drawer so the theme's link and button colours can't leak in.
   ========================================================================== */

:root {
  --rm-hd-h: 56px;
  --rm-hd-bg: #111;
  --rm-hd-line: #2a2a2a;
  --rm-hd-fg: #e8e8e8;
  --rm-hd-muted: #a8a8a8;
  --rm-hd-surf: #222;
  --rm-hd-edge: #333;
  --rm-hd-ctl: #1a1a1a;
  --rm-hd-ctl-edge: #3a3a3a;
  --rm-hd-row-hover: #2c2c2c;
  /* The one main button (Log In): the site's orange, a brighter rung on hover. */
  --rm-hd-gold: var(--ps-orange, #ffa600);
  --rm-hd-gold-hi: var(--ps-orange-2, #ffb833);
  /* Hover / open / current page: the same orange. */
  --rm-hd-accent: var(--ps-orange, #ffa600);
  /* Dark words on an orange fill. */
  --rm-hd-on-accent: #1a1a1a;
  /* Header words: Lato Bold (as on RiftMana), then the site's own fonts. */
  --rm-hd-font: "NinDecks Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Lato Bold, served from the theme (fonts/, SIL Open Font License - fonts/OFL.txt)
   rather than Google: no extra connection, cached with the site's files.
   Two Google subsets: Latin (preloaded by inc/site-header.php) and Latin
   Extended for accented names; anything else falls back to the site font. */
@font-face {
  font-family: "NinDecks Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/lato-700-latin.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: "NinDecks Lato";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/lato-700-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@media (min-width: 1100px) {
  :root { --rm-hd-h: 60px; }
}

/* The header is centred in the width left beside the page scrollbar, so it
   shifted a few pixels between pages: some pages have no scrollbar (short,
   or /decks/ until its decks load), most have Windows' 15px one, and the
   card list / deck / builder pages a 10px one from deck-builder.css.
   1) Always keep the scrollbar's room, scrollbar or not (also stops the page
      sliding sideways when the search or the menu panel locks scrolling).
   2) One page scrollbar everywhere: the dark 10px one from deck-builder.css,
      on the page itself only (html::), so inner scroll boxes are untouched. */
html {
  scrollbar-gutter: stable;
}

html::-webkit-scrollbar { width: 10px; }

html::-webkit-scrollbar-track {
  background: #252525;
  border-radius: 5px;
}

html::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 5px;
}

html::-webkit-scrollbar-thumb:hover { background: #ff9130; }

/* Firefox has no ::-webkit-scrollbar; give it the same colours. (Not set
   for Chrome/Edge: scrollbar-color there would switch off the rules above.) */
@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-width: thin;
    scrollbar-color: #555 #252525;
  }
}

/* --- the bar ------------------------------------------------------------ */
/* It scrolls away with the page, like Blocksy's header did (owner 2026-10-16:
   most big deck sites don't pin it, and a pinned bar got in the ads' way).
   position: relative + z-index only so its dropdowns sit above the page. */
#header.rm-hd {
  position: relative;
  z-index: 990;
  background: var(--rm-hd-bg);
  /* The line under the bar is a shadow (as on Blocksy's header), not a
     border: the bar keeps a whole 60 / 56px, so everything centred in it
     lands on whole pixels - on a half pixel, icons and text snap apart. */
  box-shadow: 0 1px 0 var(--rm-hd-line);
  color: var(--rm-hd-fg);
}

.rm-hd .rm-hd-in {
  display: flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  height: var(--rm-hd-h);
  /* Same width as Blocksy's header had: 1450px of content on wide screens,
     the side gutter on narrower ones. */
  padding: 0 max(clamp(12px, 2.5vw, 36px), (100% - 1450px) / 2);
}

/* Plain buttons: nothing from the theme's button styles. */
.rm-hd button,
.rm-hd-drawer button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  min-height: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.rm-hd a,
.rm-hd-drawer a {
  -webkit-tap-highlight-color: transparent;
}

.rm-hd :focus-visible,
.rm-hd-drawer :focus-visible {
  outline: 2px solid var(--rm-hd-accent);
  outline-offset: 2px;
}

/* --- logo ----------------------------------------------------------------- */
.rm-hd .rm-hd-logo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  margin-right: clamp(4px, 1.4vw, 22px);
  border-radius: 6px;
  text-decoration: none;
}

.rm-hd .rm-hd-logo-img {
  display: block;
  width: auto;
  max-width: none;
  height: 34px;
  transition: filter 0.2s ease;
}

.rm-hd .rm-hd-logo-text {
  color: #fff;
  font-size: 20px;
  font-weight: 800;
}

@media (min-width: 1100px) {
  .rm-hd .rm-hd-logo-img { height: 40px; }
}

@media (max-width: 360px) {
  .rm-hd .rm-hd-logo-img { height: 30px; }
}

/* --- main menu (1100px and up) -------------------------------------------- */
.rm-hd .rm-hd-nav {
  display: none;
  align-self: stretch;
  min-width: 0;
}

@media (min-width: 1100px) {
  .rm-hd .rm-hd-nav { display: block; }
}

.rm-hd .rm-hd-menu {
  display: flex;
  align-items: stretch;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rm-hd .rm-hd-li {
  position: relative;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

.rm-hd .rm-hd-a {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 15px;
  border-radius: 8px;
  color: var(--rm-hd-fg);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.15s ease;
}

.rm-hd .rm-hd-li.has-sub .rm-hd-a { padding-right: 1px; }

.rm-hd .rm-hd-caret {
  display: grid;
  place-items: center;
  width: 24px; /* the WCAG minimum tap width */
  height: 40px;
  margin-right: 3px;
  border-radius: 6px;
  color: var(--rm-hd-muted);
}

/* Touch screens wide enough for this menu (an iPad held sideways): the arrow
   is the only way into the sub-links there, so give the finger more room. */
@media (pointer: coarse) {
  .rm-hd .rm-hd-caret { width: 32px; }
}

.rm-hd .rm-hd-chev {
  display: block;
  transition: transform 0.15s ease;
}

.rm-hd .rm-hd-li.is-open .rm-hd-chev { transform: rotate(180deg); }

/* Opened with the arrow (click / keyboard): same colour as hover. */
.rm-hd .rm-hd-li.is-open > .rm-hd-a,
.rm-hd .rm-hd-li.is-open > .rm-hd-caret { color: var(--rm-hd-accent); }

/* The page you're on: orange words (and arrow) with an orange line along the
   foot of the bar, as on the live header (owner 2026-10-15). */
.rm-hd .rm-hd-li.is-current > .rm-hd-a,
.rm-hd .rm-hd-li.is-current > .rm-hd-caret { color: var(--rm-hd-accent); }

.rm-hd .rm-hd-li.is-current::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 0;
  left: 10px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--rm-hd-accent);
  pointer-events: none;
}

/* Dropdowns: the popup box look. */
.rm-hd .rm-hd-sub {
  position: absolute;
  top: calc(100% - 6px);
  left: 2px;
  z-index: 5;
  min-width: 210px;
  margin: 0;
  padding: 6px;
  list-style: none;
  box-sizing: border-box;
  background: var(--rm-hd-surf);
  border: 1px solid var(--rm-hd-edge);
  border-radius: 10px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}

.rm-hd .rm-hd-li.is-open > .rm-hd-sub {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.rm-hd .rm-hd-sub li {
  margin: 0;
  padding: 0;
}

.rm-hd .rm-hd-sa {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 7px;
  color: var(--rm-hd-fg);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
}

.rm-hd .rm-hd-ic {
  display: block;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  color: var(--rm-hd-muted);
  fill: none;
  stroke: currentColor;
}

.rm-hd .rm-hd-sa[aria-current="page"] { color: var(--rm-hd-accent); }
.rm-hd .rm-hd-sa[aria-current="page"] .rm-hd-ic { color: var(--rm-hd-accent); }

/* --- right-hand side --------------------------------------------------------- */
.rm-hd .rm-hd-end {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

/* Search: an icon on phones, a box that reads "Search cards..." where it fits. */
.rm-hd .rm-hd-search {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 44px;
  height: 44px;
  color: var(--rm-hd-fg);
}

.rm-hd .rm-hd-search-ic {
  display: block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.rm-hd .rm-hd-search-t,
.rm-hd .rm-hd-kbd {
  display: none;
}

@media (min-width: 640px) and (max-width: 1099px), (min-width: 1280px) {
  .rm-hd .rm-hd-search {
    justify-content: flex-start;
    width: clamp(200px, 18vw, 280px);
    height: 38px;
    margin-right: 4px;
    padding: 0 7px 0 11px;
    box-sizing: border-box;
    background: var(--rm-hd-ctl);
    border: 1px solid var(--rm-hd-ctl-edge);
    color: var(--rm-hd-muted);
    transition: border-color 0.15s ease, color 0.15s ease;
  }
  .rm-hd .rm-hd-search-ic {
    width: 17px;
    height: 17px;
  }
  .rm-hd .rm-hd-search-t {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .rm-hd .rm-hd-kbd {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    box-sizing: border-box;
    background: #222;
    border: 1px solid #444;
    border-radius: 5px;
    color: #9a9a9a;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
  }
}

@media (min-width: 640px) and (max-width: 1099px) {
  .rm-hd .rm-hd-search { width: 240px; }
}

/* 1100-1279: the menu needs the room, so search is the same box, icon only. */
@media (min-width: 1100px) and (max-width: 1279px) {
  .rm-hd .rm-hd-search {
    width: 40px;
    height: 38px;
    margin-right: 4px;
    box-sizing: border-box;
    background: var(--rm-hd-ctl);
    border: 1px solid var(--rm-hd-ctl-edge);
    color: var(--rm-hd-muted);
  }
  .rm-hd .rm-hd-search-ic {
    width: 17px;
    height: 17px;
  }
}

/* Log In: the one orange button. */
.rm-hd .rm-hd-login {
  display: inline-flex;
  align-items: center;
  height: 38px;
  margin-left: 2px;
  padding: 0 16px;
  border-radius: 8px;
  background: var(--rm-hd-gold);
  color: var(--rm-hd-on-accent);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

/* The notification bell (printed here from deck-builder's notifications.php,
   or moved here by an older copy of it). */
.rm-hd .rm-hd-bell {
  display: flex;
  align-items: center;
}

/* Blocksy styles every #header [data-items] as a full-width row with 10px
   side margins on its children, and notifications.css gives the bell 4px side
   margins for Blocksy's header; this spot only holds the bell, and this bar
   spaces its buttons itself. */
#header.rm-hd .rm-hd-bell {
  flex: 0 0 auto;
  width: auto;
}

#header.rm-hd .rm-hd-bell > * { margin: 0; }

/* (#header in front so it beats Blocksy's "#header [data-items] { display: flex }".) */
#header.rm-hd .rm-hd-bell:empty { display: none; }

.rm-hd .rm-notif-bell {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 8px;
  color: var(--rm-hd-fg);
}

.rm-hd .rm-notif-bell svg {
  width: 20px;
  height: 20px;
}

.rm-hd .rm-notif-badge {
  top: 6px;
  right: 5px;
}

/* Avatar + its menu. */
.rm-hd .rm-hd-acct { position: relative; }

.rm-hd .rm-hd-acct-btn {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.rm-hd .rm-hd-av {
  display: block;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  max-width: none;
  border: 2px solid var(--rm-hd-ctl-edge);
  border-radius: 50%;
  background: #222;
  object-fit: cover;
  transition: border-color 0.15s ease;
}

.rm-hd .rm-hd-acct.is-open .rm-hd-acct-btn .rm-hd-av { border-color: var(--rm-hd-accent); }

.rm-hd .rm-hd-acct-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 6;
  width: 250px;
  max-width: calc(100vw - 16px);
  padding: 6px;
  box-sizing: border-box;
  background: var(--rm-hd-surf);
  border: 1px solid var(--rm-hd-edge);
  border-radius: 10px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}

.rm-hd .rm-hd-acct-menu[hidden] { display: none; }

/* Bridges the 6px gap so the pointer can travel from the avatar into the
   hover-opened menu without it closing. */
.rm-hd .rm-hd-acct-menu::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 8px;
}

.rm-hd .rm-hd-acct-who {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  padding: 6px 10px 12px;
  border-bottom: 1px solid var(--rm-hd-edge);
}

.rm-hd .rm-hd-acct-who .rm-hd-av {
  width: 40px;
  height: 40px;
  border-width: 0;
}

.rm-hd .rm-hd-acct-name {
  min-width: 0;
  overflow: hidden;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rm-hd .rm-hd-acct-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rm-hd .rm-hd-acct-list li {
  margin: 0;
  padding: 0;
}

.rm-hd .rm-hd-acct-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 12px;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--rm-hd-fg);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

.rm-hd .rm-hd-acct-list a[aria-current="page"] { color: var(--rm-hd-accent); }
.rm-hd .rm-hd-acct-list a[aria-current="page"] .rm-hd-ic { color: var(--rm-hd-accent); }

.rm-hd .rm-hd-acct-out {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--rm-hd-edge);
}

/* Menu button (below 1100px). */
.rm-hd .rm-hd-burger {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -6px;
  color: var(--rm-hd-fg);
}

.rm-hd .rm-hd-burger svg { display: block; }

@media (min-width: 1100px) {
  .rm-hd .rm-hd-burger { display: none; }
}

/* Phones: a slightly smaller avatar inside the same 44px button as the others. */
@media (max-width: 1099px) {
  .rm-hd .rm-hd-acct-btn {
    width: 44px;
    height: 44px;
  }
  .rm-hd .rm-hd-acct-btn .rm-hd-av {
    width: 38px;
    height: 38px;
  }
}

/* Small phones: everything a touch narrower so the bar never runs out of room. */
@media (max-width: 380px) {
  .rm-hd .rm-hd-acct-btn .rm-hd-av {
    width: 36px;
    height: 36px;
  }
  .rm-hd .rm-hd-in { gap: 2px; }
  .rm-hd .rm-hd-end { gap: 0; }
  .rm-hd .rm-hd-search,
  .rm-hd .rm-notif-bell,
  .rm-hd .rm-hd-acct-btn,
  .rm-hd .rm-hd-burger {
    width: 40px;
  }
  .rm-hd .rm-hd-login {
    height: 36px;
    padding: 0 12px;
    font-size: 13.5px;
  }
}

/* --- hover (mouse only, so taps never leave a stuck highlight) ---------------- */
@media (hover: hover) and (pointer: fine) {
  .rm-hd .rm-hd-logo:hover .rm-hd-logo-img { filter: brightness(0.85); }
  /* Words change colour under the pointer (owner 2026-10-14). */
  .rm-hd .rm-hd-a:hover,
  .rm-hd .rm-hd-li.has-sub:hover > .rm-hd-a,
  .rm-hd .rm-hd-caret:hover,
  .rm-hd .rm-hd-li.has-sub:hover > .rm-hd-caret { color: var(--rm-hd-accent); }
  .rm-hd .rm-hd-li.has-sub:hover > .rm-hd-sub {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
  }
  /* Escape hides a hovered list until the pointer leaves (js/site-header.js). */
  .rm-hd .rm-hd-li.has-sub.is-hushed:hover > .rm-hd-sub {
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
  }
  .rm-hd .rm-hd-sa:hover,
  .rm-hd .rm-hd-acct-list a:hover {
    background: var(--rm-hd-row-hover);
    color: var(--rm-hd-accent);
  }
  .rm-hd .rm-hd-sa:hover .rm-hd-ic,
  .rm-hd .rm-hd-acct-list a:hover .rm-hd-ic { color: var(--rm-hd-accent); }
  .rm-hd .rm-hd-search:hover {
    color: #fff;
    border-color: #555;
  }
  .rm-hd .rm-hd-login:hover {
    background: var(--rm-hd-gold-hi);
    color: var(--rm-hd-on-accent);
  }
  .rm-hd .rm-hd-acct-btn:hover .rm-hd-av { border-color: #6a6a6a; }
  .rm-hd .rm-hd-burger:hover { background: #1e1e1e; }
}

/* ==========================================================================
   The phone / tablet menu panel
   ========================================================================== */
.rm-hd-drawer {
  position: fixed;
  inset: 0;
  z-index: 100004;
}

.rm-hd-drawer[hidden] { display: none; }

@media (min-width: 1100px) {
  .rm-hd-drawer { display: none !important; }
}

.rm-hd-drawer .rm-hd-dr-bg {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.22s ease;
}

.rm-hd-drawer .rm-hd-dr-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(340px, 86vw);
  box-sizing: border-box;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #1a1a1a;
  border-left: 1px solid var(--rm-hd-edge);
  box-shadow: -18px 0 40px rgba(0, 0, 0, 0.4);
  color: var(--rm-hd-fg);
  transform: translateX(100%);
  transition: transform 0.24s ease;
}

.rm-hd-drawer.is-open .rm-hd-dr-bg { opacity: 1; }
.rm-hd-drawer.is-open .rm-hd-dr-panel { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rm-hd .rm-hd-sub,
  .rm-hd .rm-hd-chev,
  .rm-hd-drawer .rm-hd-dr-bg,
  .rm-hd-drawer .rm-hd-dr-panel {
    transition: none;
  }
}

html.rm-hd-locked { overflow: hidden; }

/* While the menu panel or the card search locks the page (html overflow:
   hidden), Blocksy's body { overflow-x: hidden } would turn <body> into its
   own scroll box, and the page behind could jump. clip cuts the same
   sideways overflow without making a scroll box. */
html.rm-hd-locked body,
html.rcs-lock body {
  overflow-x: clip;
}

/* While locked, the page scrollbar is gone but its reserved strip stays (see
   scrollbar-gutter above). Nothing can paint over it - it shows the root
   background - so give it the colour of what it sits next to. */
html.rcs-lock { background-color: rgb(5, 6, 8); } /* the search's dimmed page (#13171b under rgba(0,0,0,.72)) */
html.rm-hd-locked { background-color: #1a1a1a; }   /* the menu panel, which runs to the right edge */

/* Other popups lock the page with body { overflow: hidden } set from script
   (matchup guide, avatar decorations, background picker): same strip, a
   dimmed colour close to their backdrops. */
html:has(> body[style*="overflow: hidden"]):not(.rcs-lock):not(.rm-hd-locked) {
  background-color: rgb(8, 9, 11);
}

.rm-hd-drawer .rm-hd-dr-top {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: space-between;
  height: var(--rm-hd-h);
  padding: 0 6px 0 22px;
  border-bottom: 1px solid var(--rm-hd-line);
}

.rm-hd-drawer .rm-hd-dr-title {
  color: var(--rm-hd-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.rm-hd-drawer .rm-hd-dr-x {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  color: var(--rm-hd-fg);
}

.rm-hd-drawer .rm-hd-dr-x svg { display: block; }

.rm-hd-drawer .rm-hd-dr-nav { padding: 8px 10px; }

.rm-hd-drawer .rm-hd-dr-menu,
.rm-hd-drawer .rm-hd-dr-sub {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rm-hd-drawer .rm-hd-dr-li,
.rm-hd-drawer .rm-hd-dr-sub li {
  margin: 0;
  padding: 0;
}

.rm-hd-drawer .rm-hd-dr-li + .rm-hd-dr-li { margin-top: 2px; }

.rm-hd-drawer .rm-hd-dr-a {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 12px;
  box-sizing: border-box;
  border-radius: 8px;
  color: #f2f2f2;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

/* Sub-links are always shown under their section: no arrows, no second tap. */
.rm-hd-drawer .rm-hd-dr-sub { padding: 0 0 6px 12px; }

.rm-hd-drawer .rm-hd-dr-sa {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 0 12px;
  box-sizing: border-box;
  border-radius: 8px;
  color: #cfcfcf;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
}

.rm-hd-drawer .rm-hd-ic {
  display: block;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  color: var(--rm-hd-muted);
  fill: none;
  stroke: currentColor;
}

/* The page you're on: lifted row with an orange edge and orange words, like the bar. */
.rm-hd-drawer .rm-hd-dr-a[aria-current="page"],
.rm-hd-drawer .rm-hd-dr-sa[aria-current="page"] {
  background: #262626;
  box-shadow: inset 3px 0 0 var(--rm-hd-accent);
  color: var(--rm-hd-accent);
}

.rm-hd-drawer .rm-hd-dr-sa[aria-current="page"] .rm-hd-ic { color: var(--rm-hd-accent); }

/* "Decks" and "All Decks" are the same page: mark only the sub-link. */
.rm-hd-drawer .rm-hd-dr-li:has(.rm-hd-dr-sa[aria-current="page"]) > .rm-hd-dr-a {
  background: none;
  box-shadow: none;
  color: #f2f2f2;
}

.rm-hd-drawer .rm-hd-dr-login {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  margin: 6px 20px 8px;
  border-radius: 8px;
  background: var(--rm-hd-gold);
  color: var(--rm-hd-on-accent);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}

.rm-hd-drawer .rm-hd-dr-social {
  margin-top: auto;
  padding: 16px 20px 20px;
  border-top: 1px solid var(--rm-hd-line);
}

.rm-hd-drawer .rm-hd-dr-social .ct-social-box {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.rm-hd-drawer .rm-hd-dr-social .ct-social-box a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  box-sizing: border-box;
  background: #262626;
  border: 1px solid var(--rm-hd-edge);
  border-radius: 50%;
}

.rm-hd-drawer .rm-hd-dr-social .ct-social-box a { color: var(--official-color, #e8e8e8); }

/* Brands whose official colour is black would vanish on the dark panel. */
.rm-hd-drawer .rm-hd-dr-social .ct-social-box a:is([data-network="twitter"], [data-network="tiktok"], [data-network="threads"], [data-network="github"]) {
  --official-color: #f2f2f2 !important;
}

.rm-hd-drawer .rm-hd-dr-social .ct-social-box svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

@media (hover: hover) and (pointer: fine) {
  .rm-hd-drawer .rm-hd-dr-a:hover,
  .rm-hd-drawer .rm-hd-dr-sa:hover {
    background: var(--rm-hd-row-hover);
    color: var(--rm-hd-accent);
  }
  .rm-hd-drawer .rm-hd-dr-sa:hover .rm-hd-ic { color: var(--rm-hd-accent); }
  .rm-hd-drawer .rm-hd-dr-x:hover { background: #262626; }
  .rm-hd-drawer .rm-hd-dr-login:hover {
    background: var(--rm-hd-gold-hi);
    color: var(--rm-hd-on-accent);
  }
  .rm-hd-drawer .rm-hd-dr-social .ct-social-box a:hover { border-color: #555; }
}

/* ==========================================================================
   Header font: Lato Bold for the words people click (owner 2026-10-15) - the
   menu, its dropdowns, the avatar menu, Log In and the phone panel. The search
   box and the small MENU label keep the site font. Last in the file so it
   wins over the weights set above (one file = one weight: 700).
   ========================================================================== */
.rm-hd .rm-hd-a,
.rm-hd .rm-hd-sa,
.rm-hd .rm-hd-acct-name,
.rm-hd .rm-hd-acct-list a,
.rm-hd .rm-hd-login,
.rm-hd-drawer .rm-hd-dr-a,
.rm-hd-drawer .rm-hd-dr-sa,
.rm-hd-drawer .rm-hd-dr-login {
  font-family: var(--rm-hd-font);
  font-weight: 700;
}