/* Shared surface roles. Layout, dimensions and typography belong to callers.
 * Keep the catalog palette: artwork and meaningful states carry bright color. */
.surface-appearance_surface__eFYfG.surface-appearance_surface__eFYfG {
  background-color: var(--surface-bottom);
  background-image: linear-gradient(155deg, var(--surface-top), var(--surface-bottom));
  border-color: var(--surface-edge);
  box-shadow: inset 0 0 0 1px var(--surface-edge), inset 0 2px 0 var(--surface-light);
}
.surface-appearance_panel__isTL4 {
  --surface-top: #39373e;
  --surface-bottom: #2d2e34;
  --surface-edge: rgba(211, 202, 223, .14);
  --surface-light: rgba(245, 236, 255, .035);
}
.surface-appearance_inset__enMGJ {
  --surface-top: #2c2b33;
  --surface-bottom: #24272e;
  --surface-edge: rgba(199, 191, 214, .10);
  --surface-light: rgba(245, 236, 255, .015);
}
.surface-appearance_quiet__MGp5G {
  --surface-top: #292930;
  --surface-bottom: #26282e;
  --surface-edge: rgba(199, 191, 214, .075);
  --surface-light: transparent;
}
.surface-appearance_floating__71_fN {
  --surface-top: #3a3741;
  --surface-bottom: #2e2e35;
  --surface-edge: rgba(218, 207, 235, .22);
  --surface-light: rgba(245, 236, 255, .055);
}
.surface-appearance_control__Hp3ZY {
  --surface-top: #3c3941;
  --surface-bottom: #303138;
  --surface-edge: rgba(211, 202, 223, .19);
  --surface-light: rgba(245, 236, 255, .04);
}
@media (hover: hover) {
  .surface-appearance_control__Hp3ZY.surface-appearance_control__Hp3ZY:hover:not(:disabled):not([aria-disabled="true"]) {
    --surface-top: #44404a;
    --surface-edge: rgba(211, 202, 223, .29);
  }
}
.surface-appearance_control__Hp3ZY.surface-appearance_control__Hp3ZY:focus-visible {
  outline: 2px solid #c6ad70 !important;
  outline-offset: 2px;
}
/* Compact plot controls are location/state, not purchase CTAs. */
.surface-appearance_plotControl__nbdyG.surface-appearance_plotControl__nbdyG {
  background-image: linear-gradient(180deg, rgba(230, 223, 245, .055), rgba(230, 223, 245, .015));
  box-shadow: inset 0 1px 0 rgba(230, 223, 245, .06);
}
.surface-appearance_plotControl__nbdyG.surface-appearance_plotControl__nbdyG:focus-visible {
  outline: 2px solid #c6ad70 !important;
  outline-offset: 1px;
}

/* Muted status chips keep their semantic hues; rarity is a separate system. */
.surface-appearance_badge___m0bX {
  color: var(--badge-text);
  background-color: var(--badge-bg);
  border-color: var(--badge-edge);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.surface-appearance_success__MqIop { --badge-text: #c4edd2; --badge-bg: #294639; --badge-edge: #436251; }
.surface-appearance_warning__5cTzj { --badge-text: #f4dfae; --badge-bg: #4a3d29; --badge-edge: #6e5937; }
.surface-appearance_error__zcwoi { --badge-text: #f5c9cf; --badge-bg: #4b303a; --badge-edge: #704450; }
.surface-appearance_info__kFUWV { --badge-text: #c8ddf7; --badge-bg: #2b3d53; --badge-edge: #425e7c; }
.surface-appearance_new__4ELU5 { --badge-text: #e9d3ff; --badge-bg: #453450; --badge-edge: #68517e; }

/* Roadmap journey board (roadmap-board.tsx).
 * Wide (>= 1100 px): four stations side by side on a horizontal rail, each column under its station.
 * Narrow: the rail turns vertical at the start side; Done can collapse behind "Show all".
 * Arabic pages are dir="rtl": every offset is logical (inline-start/end) and the rail's
 * gradients follow --rm-forward, so the journey runs right to left there.
 * Text is light everywhere (no black text, also on the badge); motion only changes opacity and
 * respects prefers-reduced-motion. */

.roadmap-board_board__1G2NZ {
  --rm-done: #45c285;
  --rm-now: #e0b341;
  --rm-next: #9b86e0;
  --rm-idea: #8e98ab;
  --rm-line: rgba(255, 255, 255, 0.07);
  --rm-gap: 20px;
  /* Direction of travel along the horizontal rail: rightwards, or leftwards in RTL. */
  --rm-forward: 90deg;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 28px 16px 48px;
  color: var(--rm-text);
  font-family: var(--font-exo2), system-ui, sans-serif;
}

[dir='rtl'] .roadmap-board_board__1G2NZ {
  --rm-forward: 270deg;
}

.roadmap-board_done__kwG9Z { --rm-state: var(--rm-done); }
.roadmap-board_now__HXH6o { --rm-state: var(--rm-now); }
.roadmap-board_next__Dvg_I { --rm-state: var(--rm-next); }
.roadmap-board_idea__x4tMp { --rm-state: var(--rm-idea); }

/* ---------------------------------------------------------------- header */

.roadmap-board_header___p2IQ {
  margin-bottom: 22px;
}

.roadmap-board_title__DIvDS {
  margin: 0;
  font-family: 'Cinzel', 'Cormorant SC', serif;
  font-weight: 700;
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: #eaddb6;
}

.roadmap-board_description__6xCho {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--rm-muted);
}

/* ---------------------------------------------------------------- journey (narrow: vertical rail) */

.roadmap-board_journey__8mow7 {
  position: relative;
  margin: 0;
  padding: 0;
  padding-inline-start: 38px;
  list-style: none;
}

.roadmap-board_stage__JAPoM {
  position: relative;
  padding-bottom: 26px;
}

.roadmap-board_stage__JAPoM:last-child {
  padding-bottom: 0;
}

/* The rail from this station's node down to the next one, in the colour of that step. */
.roadmap-board_stage__JAPoM:not(:last-child)::before {
  content: '';
  position: absolute;
  inset-inline-start: -24px;
  top: 16px;
  bottom: -16px;
  width: 3px;
  border-radius: 2px;
}

.roadmap-board_done__kwG9Z:not(:last-child)::before { background: linear-gradient(180deg, var(--rm-done) 0%, var(--rm-done) 85%, var(--rm-now) 100%); }
.roadmap-board_now__HXH6o:not(:last-child)::before { background: repeating-linear-gradient(180deg, rgba(155, 134, 224, 0.75) 0 8px, transparent 8px 13px); }
.roadmap-board_next__Dvg_I:not(:last-child)::before { background: repeating-linear-gradient(180deg, rgba(142, 152, 171, 0.5) 0 3px, transparent 3px 8px); }

.roadmap-board_head__WSptu {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    'label here'
    'hint hint';
  -moz-column-gap: 12px;
       column-gap: 12px;
  align-items: center;
  min-height: 32px;
  margin-bottom: 10px;
}

.roadmap-board_node__2MjZS {
  position: absolute;
  inset-inline-start: -38px;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #232326;
  color: var(--rm-state);
  z-index: 1;
}

.roadmap-board_nodeSymbol__37aZb {
  display: block;
  width: 100%;
  height: 100%;
}

/* The Next chevron points the way the journey runs. */
.roadmap-board_rtlOnly___xOGf {
  display: none;
}

[dir='rtl'] .roadmap-board_ltrOnly__5yC6q {
  display: none;
}

[dir='rtl'] .roadmap-board_rtlOnly___xOGf {
  display: inline;
}

.roadmap-board_now__HXH6o .roadmap-board_node__2MjZS {
  box-shadow: 0 0 0 5px rgba(224, 179, 65, 0.12), 0 0 22px rgba(224, 179, 65, 0.45);
}

/* A slow breathing halo around the current station; opacity only, never a transform. */
.roadmap-board_now__HXH6o .roadmap-board_node__2MjZS::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px solid rgba(224, 179, 65, 0.55);
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .roadmap-board_now__HXH6o .roadmap-board_node__2MjZS::after {
    animation: roadmap-board_rm-breathe__pnW4f 2.8s ease-in-out infinite;
  }
}

@keyframes roadmap-board_rm-breathe__pnW4f {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

.roadmap-board_here___Ze8g {
  grid-area: here;
  justify-self: end;
  white-space: nowrap;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(224, 179, 65, 0.55);
  background: rgba(224, 179, 65, 0.14);
  color: #f2d27a;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
}

.roadmap-board_label__EQvNl {
  grid-area: label;
  margin: 0;
  /* globals.css draws every h1-h6 in Cinzel; status names are interface labels in Exo 2. */
  font-family: var(--font-exo2), system-ui, sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.roadmap-board_labelText__NFiYH {
  color: var(--rm-state);
}

.roadmap-board_count__kh1Q1 {
  color: var(--rm-muted);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.roadmap-board_hint___HbMg {
  grid-area: hint;
  margin: 2px 0 0;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--rm-muted);
}

/* ---------------------------------------------------------------- panels and rows */

.roadmap-board_panel__dJc3h {
  background: var(--rm-panel);
  border: 1px solid var(--rm-line);
  border-radius: 16px;
  padding: 10px 14px 8px;
}

.roadmap-board_now__HXH6o .roadmap-board_panel__dJc3h {
  border-color: rgba(224, 179, 65, 0.32);
  box-shadow: 0 0 0 1px rgba(224, 179, 65, 0.12), 0 12px 40px rgba(224, 179, 65, 0.07);
}

.roadmap-board_group__GxISD + .roadmap-board_group__GxISD {
  margin-top: 14px;
}

.roadmap-board_collapsed__zE4bS {
  display: none;
}

.roadmap-board_groupTitle__32NxN {
  margin: 4px 0 2px;
  font-family: var(--font-exo2), system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--rm-muted);
}

.roadmap-board_rows__7hV2P {
  margin: 0;
  padding: 0;
  list-style: none;
}

.roadmap-board_row__GgZ50 {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  font-size: 15px;
  line-height: 1.35;
  color: var(--rm-text);
}

.roadmap-board_row__GgZ50 + .roadmap-board_row__GgZ50 {
  border-top: 1px solid var(--rm-line);
}

.roadmap-board_done__kwG9Z .roadmap-board_row__GgZ50 {
  color: var(--rm-secondary);
}

.roadmap-board_bullet__SO_nb {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--rm-state);
}

.roadmap-board_mark__5nOb6 {
  flex: none;
  width: 24px;
  height: 24px;
  margin: -2px 0;
  border-radius: 50%;
  -o-object-fit: cover;
     object-fit: cover;
}

.roadmap-board_markOnLight__74JlA {
  background: #eceff6;
  padding: 3px;
  -o-object-fit: contain;
     object-fit: contain;
}

.roadmap-board_face__C1zHA {
  position: relative;
  display: block;
  overflow: hidden;
  background-color: #2a2420;
}

.roadmap-board_face__C1zHA img {
  position: absolute;
  max-width: none;
}

/* An element's own art (event elements): a cut-out object, no circle or plate around it. */
.roadmap-board_art__OY_Wz {
  flex: none;
  width: 28px;
  height: 28px;
  /* Takes a logo's 24 px of width, so titles after art and after logos line up. */
  margin: -4px -2px;
  -o-object-fit: contain;
     object-fit: contain;
}

.roadmap-board_rowTitle__AmolW {
  min-width: 0;
  overflow-wrap: break-word;
}

.roadmap-board_more__AwEbl {
  display: block;
  width: 100%;
  /* Kept clear of the docs page's sticky top bar when brought back into view. */
  scroll-margin: 96px 0 24px;
  margin-top: 6px;
  padding: 10px 0 4px;
  border: 0;
  border-top: 1px solid var(--rm-line);
  background: none;
  color: var(--rm-now);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

/* globals.css removes outlines and shadows from focused buttons, so keyboard focus shows as a
 * tint and an underline instead. */
.roadmap-board_more__AwEbl:focus-visible {
  background: rgba(224, 179, 65, 0.12);
  border-radius: 8px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 640px) {
  .roadmap-board_board__1G2NZ {
    padding: 32px 24px 56px;
  }

  .roadmap-board_title__DIvDS {
    font-size: 30px;
  }
}

/* ---------------------------------------------------------------- wide: horizontal journey */

@media (min-width: 1100px) {
  .roadmap-board_board__1G2NZ {
    padding: 34px 32px 64px;
  }

  .roadmap-board_header___p2IQ {
    text-align: center;
    margin-bottom: 52px;
  }

  .roadmap-board_title__DIvDS {
    font-size: 34px;
  }

  .roadmap-board_description__6xCho {
    font-size: 16px;
  }

  .roadmap-board_journey__8mow7 {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 0.9fr);
    -moz-column-gap: var(--rm-gap);
         column-gap: var(--rm-gap);
    align-items: start;
    padding: 0;
  }

  .roadmap-board_stage__JAPoM {
    padding-bottom: 0;
  }

  .roadmap-board_stage__JAPoM:not(:last-child)::before {
    content: none;
  }

  .roadmap-board_head__WSptu {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 0;
    margin-bottom: 14px;
    padding-top: 0;
  }

  /* Rail halves on both sides of each node; neighbouring halves meet in the column gap. */
  .roadmap-board_head__WSptu::before,
  .roadmap-board_head__WSptu::after {
    content: '';
    position: absolute;
    top: 21px;
    height: 3px;
  }

  .roadmap-board_head__WSptu::before {
    inset-inline-start: calc(var(--rm-gap) / -2);
    inset-inline-end: 50%;
  }

  .roadmap-board_head__WSptu::after {
    inset-inline-start: 50%;
    inset-inline-end: calc(var(--rm-gap) / -2);
  }

  .roadmap-board_done__kwG9Z .roadmap-board_head__WSptu::before,
  .roadmap-board_idea__x4tMp .roadmap-board_head__WSptu::after {
    content: none;
  }

  .roadmap-board_done__kwG9Z .roadmap-board_head__WSptu::after { background: var(--rm-done); }
  .roadmap-board_now__HXH6o .roadmap-board_head__WSptu::before { background: linear-gradient(var(--rm-forward), var(--rm-done), var(--rm-now)); }
  .roadmap-board_now__HXH6o .roadmap-board_head__WSptu::after,
  .roadmap-board_next__Dvg_I .roadmap-board_head__WSptu::before { background: repeating-linear-gradient(var(--rm-forward), rgba(155, 134, 224, 0.75) 0 10px, transparent 10px 16px); }
  .roadmap-board_next__Dvg_I .roadmap-board_head__WSptu::after,
  .roadmap-board_idea__x4tMp .roadmap-board_head__WSptu::before { background: repeating-linear-gradient(var(--rm-forward), rgba(142, 152, 171, 0.5) 0 4px, transparent 4px 9px); }

  .roadmap-board_node__2MjZS {
    position: relative;
    inset-inline-start: auto;
    width: 44px;
    height: 44px;
  }

  .roadmap-board_now__HXH6o .roadmap-board_node__2MjZS {
    box-shadow: 0 0 0 6px rgba(224, 179, 65, 0.12), 0 0 28px rgba(224, 179, 65, 0.45);
  }

  /* Centred above the node without a transform (Telegram Desktop blurs lasting transforms). */
  .roadmap-board_here___Ze8g {
    position: absolute;
    top: -34px;
    left: 0;
    right: 0;
    width: -moz-max-content;
    width: max-content;
    margin-inline: auto;
  }

  .roadmap-board_label__EQvNl {
    margin-top: 12px;
    font-size: 21px;
  }

  .roadmap-board_hint___HbMg {
    margin-top: 3px;
    white-space: nowrap;
  }

  .roadmap-board_panel__dJc3h {
    padding: 12px 16px 10px;
  }

  .roadmap-board_done__kwG9Z .roadmap-board_row__GgZ50 {
    font-size: 14.5px;
    padding: 6px 0;
  }

  .roadmap-board_collapsed__zE4bS {
    display: block;
  }

  .roadmap-board_more__AwEbl {
    display: none;
  }
}

/* Between 1100 and 1599 px the columns are narrower than at Alex's 1707 px window: slightly
 * smaller rows keep most titles on one line; a title that still does not fit wraps cleanly. */
@media (min-width: 1100px) and (max-width: 1599px) {
  .roadmap-board_panel__dJc3h {
    padding: 10px 14px 8px;
  }

  .roadmap-board_row__GgZ50 {
    font-size: 14px;
    gap: 8px;
  }

  .roadmap-board_done__kwG9Z .roadmap-board_row__GgZ50 {
    font-size: 13.5px;
  }
}

