@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap");

/* Grand Line components. Plain CSS classes for the no-build Worker site: every colour, radius
   and size comes from gl-theme.css. State classes (.is-hover, .is-active, .is-focus, .is-open)
   mirror the real pseudo-classes so the states can be shown side by side; in product code rely
   on :hover/:active/:focus-visible and the ARIA attributes (aria-current, aria-pressed,
   aria-selected, aria-expanded, disabled). No borders on controls or cards. */

:where(html) { background: var(--bg-surface); color: var(--text-primary); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
:where(body) { margin: 0; }
/* The hidden attribute always hides, even on components that set their own display. */
[hidden] { display: none !important; }
.gl-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.gl-label { font: 400 11px/1.2 var(--font-sans); color: var(--text-tertiary); }
.gl-pos { color: var(--pos); } .gl-neg { color: var(--neg); }

/* Shared focus ring: the only outline in the system. */
.gl-btn:focus-visible, .gl-btn.is-focus, .gl-iconbtn:focus-visible, .gl-iconbtn.is-focus,
.gl-link:focus-visible, .gl-link.is-focus, .gl-tab:focus-visible, .gl-tab.is-focus,
.gl-seg__opt:focus-visible, .gl-seg__opt.is-focus, .gl-item:focus-visible, .gl-item.is-focus,
.gl-acct:focus-visible, .gl-acct.is-focus, .gl-sitenav__link:focus-visible, .gl-sitenav__link.is-focus,
.gl-chip:focus-visible, .gl-chip.is-focus, .gl-ticker:focus-visible, .gl-ticker.is-focus,
.gl-switch:focus-visible, .gl-switch.is-focus,
.gl-post:focus-visible, .gl-post.is-focus, .gl-card--link:focus-visible, .gl-card--link.is-focus,
.gl-ann__close:focus-visible, .gl-ann__close.is-focus,
.gl-select:focus-visible, .gl-select.is-focus, .gl-theme:focus-visible, .gl-theme.is-focus, .gl-th-sort:focus-visible, .gl-th-sort.is-focus {
  outline: 2px solid var(--focus); outline-offset: 2px;
}
:where(.gl-btn, .gl-iconbtn, .gl-tab, .gl-seg__opt, .gl-item, .gl-acct, .gl-sitenav__link, .gl-chip, .gl-ticker, .gl-switch, .gl-post, .gl-card--link, .gl-ann__close):focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: no-preference) {
  .gl-btn, .gl-iconbtn, .gl-tab, .gl-seg__opt, .gl-item, .gl-acct, .gl-sitenav__link, .gl-chip,
  .gl-ticker, .gl-switch, .gl-switch::after, .gl-post, .gl-field__input, .gl-search, .gl-card--link {
    transition: background-color .12s ease-out, color .12s ease-out, box-shadow .12s ease-out, transform .12s ease-out, opacity .12s ease-out;
  }
  /* Dropdown caret: 0deg (pointing down) to 180deg turns clockwise on open; back to 0deg turns anticlockwise on close. */
  .gl-caret { transition: transform .22s cubic-bezier(.2, .7, .3, 1); }
  .gl-menu--pop:not([hidden]) { animation: gl-menu-in .18s cubic-bezier(.2, .7, .3, 1); transform-origin: top center; }
}
@keyframes gl-menu-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

/* ---------- Button ---------- */
.gl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--control-md); padding: 0 16px; border: 0; border-radius: var(--radius-pill); box-sizing: border-box;
  font: 500 13px/1 var(--font-sans); letter-spacing: -0.01em; white-space: nowrap;
  text-decoration: none; cursor: pointer; background: transparent; color: var(--text-primary);
}
.gl-btn small { font: 400 0.8em/1 var(--font-sans); opacity: .72; }
.gl-btn--sm { height: var(--control-sm); padding: 0 12px; font-size: 12px; }
.gl-btn--lg { height: var(--control-lg); padding: 0 20px; font-size: 15px; }
.gl-btn--block { display: flex; width: 100%; }
.gl-btn:active:not(:disabled), .gl-btn.is-active { transform: scale(.98); }

.gl-btn--primary { background: var(--accent); color: var(--text-on-fill); }
.gl-btn--primary:hover:not(:disabled), .gl-btn--primary.is-hover { background: var(--accent-hover); }
.gl-btn--primary:active:not(:disabled), .gl-btn--primary.is-active { background: var(--accent-press); }

.gl-btn--secondary { background: var(--fill-2); color: var(--text-primary); }
.gl-btn--secondary:hover:not(:disabled), .gl-btn--secondary.is-hover { background: var(--fill-3); }
.gl-btn--secondary:active:not(:disabled), .gl-btn--secondary.is-active { background: var(--fill-4); }

.gl-btn--ghost { background: transparent; color: var(--text-secondary); }
.gl-btn--ghost:hover:not(:disabled), .gl-btn--ghost.is-hover { background: var(--fill-1); color: var(--text-primary); }
.gl-btn--ghost:active:not(:disabled), .gl-btn--ghost.is-active { background: var(--fill-2); color: var(--text-primary); }

.gl-btn--danger { background: var(--neg-solid); color: var(--text-on-fill); }
.gl-btn--danger:hover:not(:disabled), .gl-btn--danger.is-hover { background: var(--neg-solid-hover); }
.gl-btn--danger:active:not(:disabled), .gl-btn--danger.is-active { background: var(--neg-solid-press); }

.gl-btn:disabled, .gl-btn[aria-disabled="true"] { opacity: .4; cursor: not-allowed; }
.gl-btn.is-loading { pointer-events: none; }
.gl-btn.is-loading::before {
  content: ""; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; box-sizing: border-box;
}
@media (prefers-reduced-motion: no-preference) { .gl-btn.is-loading::before { animation: gl-spin .7s linear infinite; } }
@keyframes gl-spin { to { transform: rotate(360deg); } }

/* ---------- IconButton ---------- */
.gl-iconbtn {
  display: inline-grid; place-items: center; width: var(--control-md); height: var(--control-md);
  padding: 0; border: 0; border-radius: var(--radius-md); background: var(--fill-1);
  color: var(--text-secondary); cursor: pointer;
}
.gl-iconbtn svg { width: 16px; height: 16px; }
.gl-iconbtn--sm { width: 30px; height: 30px; border-radius: var(--radius-sm); }
.gl-iconbtn--sm svg { width: 14px; height: 14px; }
.gl-iconbtn:hover:not(:disabled), .gl-iconbtn.is-hover { background: var(--fill-2); color: var(--text-primary); }
.gl-iconbtn:active:not(:disabled), .gl-iconbtn.is-active { background: var(--fill-3); color: var(--text-primary); transform: scale(.96); }
.gl-iconbtn[aria-pressed="true"] { background: var(--accent); color: var(--text-on-fill); }
.gl-iconbtn[aria-pressed="true"]:hover:not(:disabled), .gl-iconbtn[aria-pressed="true"].is-hover { background: var(--accent-hover); color: var(--text-on-fill); }
.gl-iconbtn[aria-pressed="true"]:active:not(:disabled), .gl-iconbtn[aria-pressed="true"].is-active { background: var(--accent-press); color: var(--text-on-fill); }
.gl-iconbtn:disabled { opacity: .4; cursor: not-allowed; }
/* A Menu's trigger while its menu is open: solid accent, like every open drop-down trigger. */
.gl-iconbtn[aria-expanded="true"] { background: var(--accent); color: var(--text-on-fill); }
.gl-iconbtn[aria-expanded="true"]:hover:not(:disabled) { background: var(--accent-hover); color: var(--text-on-fill); }
.gl-iconbtn[aria-expanded="true"]:active:not(:disabled) { background: var(--accent-press); color: var(--text-on-fill); }

/* ---------- TextLink ---------- */
.gl-link { color: var(--accent-text); text-decoration: none; font-weight: 500; border-radius: 4px; cursor: pointer; }
.gl-link:hover, .gl-link.is-hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.gl-link:active, .gl-link.is-active { opacity: .72; }
.gl-link--quiet { color: var(--text-tertiary); font-weight: 400; }
.gl-link--quiet:hover, .gl-link--quiet.is-hover { color: var(--text-primary); text-decoration: none; }
.gl-link[aria-disabled="true"] { color: var(--text-tertiary); opacity: .6; pointer-events: none; }
.gl-link .gl-arrow { display: inline-block; }
.gl-link:hover .gl-arrow, .gl-link.is-hover .gl-arrow { transform: translateX(2px); }

/* ---------- SiteNav (landing) ---------- */
.gl-sitenav {
  display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 10px 0 20px;
  border-radius: 18px; background: var(--bg-surface);
}
.gl-sitenav__logo { height: 22px; width: auto; display: block; }
.gl-sitenav__links { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.gl-sitenav__link {
  display: inline-flex; align-items: center; height: 34px; padding: 0 12px; border-radius: var(--radius-pill);
  font: 400 14px/1 var(--font-sans); letter-spacing: -0.01em; color: var(--text-secondary); text-decoration: none; cursor: pointer;
}
.gl-sitenav__link:hover, .gl-sitenav__link.is-hover { background: var(--fill-1); color: var(--text-primary); }
.gl-sitenav__link:active, .gl-sitenav__link.is-active { background: var(--fill-2); }
.gl-sitenav__link[aria-current="page"] { color: var(--text-primary); font-weight: 500; background: var(--fill-3); }
.gl-sitenav .gl-btn { margin-left: 8px; }

/* Glass: for a bar that floats over the page (sticky). */
.gl-sitenav--glass { position: relative; background: var(--bg-glass); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.gl-sitenav > a:first-child { display: flex; border-radius: var(--radius-sm); }
/* End group: theme switch, the main Button and, on narrow windows, the Menu button. */
.gl-sitenav__end { display: flex; align-items: center; gap: 8px; margin-left: 8px; }
.gl-sitenav__end .gl-btn { margin-left: 0; }
.gl-sitenav__menu, .gl-sitenav__appearance { display: none; }
/* At 1000px and below the links (and the theme switch) move into a panel the Menu button opens. */
@media (max-width: 1000px) {
  .gl-sitenav__menu { display: inline-flex; }
  .gl-sitenav__end { margin-left: auto; }
  .gl-sitenav__end .gl-theme { display: none; }
  .gl-sitenav__links { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 1; flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: 8px; border-radius: var(--radius-xl); background: var(--bg-overlay); box-shadow: var(--shadow-popover); }
  .gl-sitenav__links .gl-sitenav__link { height: 44px; font-size: 15px; }
  .gl-sitenav.is-open .gl-sitenav__links { display: flex; }
  .gl-sitenav { position: relative; }
  .gl-sitenav__appearance { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px 4px; color: var(--text-secondary); font: 400 13px/1.2 var(--font-sans); }
  .gl-sitenav__appearance .gl-theme { display: inline-flex; }
}
@media (max-width: 420px) { .gl-sitenav { padding-left: 14px; } .gl-sitenav__end .gl-btn { padding: 0 12px; } }

/* ---------- AnnouncementBar ---------- */
.gl-ann {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 8px 48px; border-radius: 14px; background: var(--accent); color: var(--text-on-fill);
  font: 400 13.5px/1.35 var(--font-sans); letter-spacing: -0.01em; text-align: center; box-sizing: border-box;
}
.gl-ann--slim { min-height: 30px; padding-block: 6px; border-radius: var(--radius-md); font-size: 12.5px; }
.gl-ann b { font-weight: 500; }
.gl-ann a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.gl-ann__close {
  position: absolute; right: 8px; top: 50%; translate: 0 -50%; width: 26px; height: 26px; border: 0; padding: 0;
  display: grid; place-items: center; border-radius: var(--radius-pill); background: transparent; color: inherit; opacity: .8; cursor: pointer;
}
.gl-ann__close:hover, .gl-ann__close.is-hover { background: color-mix(in srgb, currentColor 16%, transparent); opacity: 1; }
.gl-ann__close:active, .gl-ann__close.is-active { background: color-mix(in srgb, currentColor 26%, transparent); }
.gl-ann__icon { width: 16px; height: 16px; flex: none; }
.gl-ann--warning { background: var(--caution-fill); color: var(--text-on-caution); }
.gl-ann--critical { background: var(--neg-solid); color: var(--text-on-fill); }

/* ---------- NavTabs (Terminal top tabs) ---------- */
.gl-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-pill); background: var(--fill-1); }
.gl-tab {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px; border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--text-secondary); font: 500 13px/1 var(--font-sans); letter-spacing: -0.01em;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.gl-tab:hover, .gl-tab.is-hover { color: var(--text-primary); background: var(--fill-1); }
.gl-tab:active, .gl-tab.is-active { background: var(--fill-2); }
.gl-tab[aria-current="page"], .gl-tab[aria-selected="true"] { color: var(--text-primary); background: var(--fill-selected); box-shadow: var(--shadow-selected); }
.gl-tab[aria-current="page"]:active, .gl-tab[aria-current="page"].is-active { background: var(--fill-4); }
.gl-tab[aria-expanded="true"] { color: var(--text-on-fill); background: var(--accent); }
.gl-tab[aria-expanded="true"]:hover, .gl-tab[aria-expanded="true"].is-hover { background: var(--accent-hover); }
.gl-tab[aria-disabled="true"] { opacity: .4; cursor: not-allowed; background: transparent; color: var(--text-secondary); }
.gl-tab__count {
  font: 400 11px/1 var(--font-mono); padding: 2px 5px; border-radius: var(--radius-tag);
  background: var(--fill-2); color: var(--text-secondary);
}
.gl-tab[aria-current="page"] .gl-tab__count { background: var(--fill-3); color: var(--text-primary); }
.gl-caret { width: 10px; height: 10px; flex: none; transform: rotate(0deg); }
[aria-expanded="true"] > .gl-caret { transform: rotate(180deg); }

/* ---------- Segmented ---------- */
.gl-seg { display: inline-flex; padding: 2px; border-radius: var(--radius-pill); background: var(--fill-1); }
.gl-seg__opt {
  height: 24px; padding: 0 10px; border: 0; border-radius: var(--radius-pill); background: transparent;
  color: var(--text-secondary); font: 500 11.5px/1 var(--font-sans); cursor: pointer; white-space: nowrap;
}
.gl-seg__opt:hover, .gl-seg__opt.is-hover { color: var(--text-primary); }
.gl-seg__opt:active, .gl-seg__opt.is-active { background: var(--fill-1); }
.gl-seg__opt[aria-pressed="true"], .gl-seg__opt[aria-checked="true"], .gl-seg__opt[aria-current="page"], .gl-seg__opt[aria-current="true"] { background: var(--fill-selected); box-shadow: var(--shadow-selected); color: var(--text-primary); }
/* An option that opens another page is a link, marked with aria-current instead of aria-pressed. */
a.gl-seg__opt { display: inline-flex; align-items: center; text-decoration: none; }
.gl-seg__opt:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- AccountChip ---------- */
.gl-acct {
  display: inline-flex; align-items: center; gap: 8px; height: var(--control-md); padding: 0 12px 0 4px; border: 0;
  border-radius: var(--radius-pill); background: var(--fill-1); color: var(--text-primary);
  font: 500 13px/1 var(--font-sans); cursor: pointer;
}
.gl-acct img { width: 28px; height: 28px; border-radius: 50%; display: block; object-fit: cover; }
.gl-acct:hover, .gl-acct.is-hover { background: var(--fill-2); }
/* Every drop-down trigger, open (AccountChip, Select, DatePicker; NavTabs' drop-down tab has its own):
   solid accent, as NavTabs' menu tab. The Menu README has the rule. */
:is(.gl-acct, .gl-select, .gl-date__field)[aria-expanded="true"] { color: var(--text-on-fill); background: var(--accent); }
:is(.gl-acct, .gl-select, .gl-date__field)[aria-expanded="true"]:hover { background: var(--accent-hover); }
:is(.gl-acct, .gl-select, .gl-date__field)[aria-expanded="true"] :is(.gl-caret, svg, span) { color: inherit; }
.gl-acct .gl-caret { color: var(--text-tertiary); }
.gl-verified { width: 13px; height: 13px; flex: none; color: var(--accent-text); }

/* ---------- Menu (Tools popover) ---------- */
.gl-menu {
  width: 560px; max-width: 100%; box-sizing: border-box; padding: 8px; border-radius: var(--radius-xl);
  background: var(--bg-overlay); box-shadow: var(--shadow-popover); color: var(--text-primary);
}
.gl-menu--glass { background: var(--bg-glass); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); }
.gl-menu__head { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px 10px; font: 400 11px/1.2 var(--font-sans); color: var(--text-tertiary); }
.gl-menu__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.gl-menu__grid--one { grid-template-columns: minmax(0, 1fr); }
.gl-menu { overflow-x: hidden; }
/* Inside a Menu, a ListItem's corner is radius-md (12px): the menu's radius-xl (20px) less its 8px
   padding, so a highlighted item's corners follow the menu's. */
.gl-menu .gl-item { border-radius: var(--radius-md); }
/* A drop-down's wrapper ([data-dropdown]); its Menu hangs under the trigger, right-aligned. */
.gl-dropdown { position: relative; display: inline-flex; }
.gl-dropdown > .gl-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 20; width: max-content; min-width: 200px; }
/* While a drop-down is open, the gap from its trigger's bottom edge down to its menu, as wide as the
   menu, belongs to the drop-down (site-header.js measures it), so a pointer moving diagonally to the
   menu keeps it open. It sits under the menu and never over the trigger. */
[data-dropdown][data-bridge]::after { content: ""; position: fixed; z-index: 19; left: var(--bridge-x); top: var(--bridge-y); width: var(--bridge-w); height: var(--bridge-h); }
/* Inside a box that scrolls, a floating Menu is placed on the screen by the drop-down script so the box can't cut it off. */
.gl-dropdown > .gl-menu--float { position: fixed; top: auto; right: auto; }

/* ---------- ListItem: one selectable row, used by Menu, the trade ledger and search results ---------- */
.gl-list { display: flex; flex-direction: column; gap: 2px; }
.gl-item {
  display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; color: inherit; text-decoration: none; cursor: pointer; min-width: 0;
}
.gl-item > div { min-width: 0; }
button.gl-item { width: 100%; border: 0; background: transparent; font: inherit; text-align: left; } /* a row that opens something on this page */
.gl-item__main { flex: 1; min-width: 0; }
.gl-item:hover, .gl-item.is-hover { background: var(--fill-2); }
.gl-item:active, .gl-item.is-active { background: var(--fill-3); }
.gl-item[aria-current="page"], .gl-item[aria-selected="true"] { background: var(--accent-tint); }
.gl-item[aria-current="page"]:hover, .gl-item[aria-current="page"].is-hover,
.gl-item[aria-selected="true"]:hover, .gl-item[aria-selected="true"].is-hover { background: var(--accent-tint-strong); }
.gl-item.is-muted { opacity: .55; }
.gl-item.is-muted:hover, .gl-item.is-muted.is-hover { opacity: .8; }
.gl-item[aria-disabled="true"] { opacity: .45; cursor: not-allowed; background: transparent; }
.gl-item__icon {
  width: 34px; height: 34px; flex: none; border-radius: var(--radius-sm); display: grid; place-items: center;
  color: var(--text-primary); background: var(--fill-2);
}
.gl-item__icon svg { width: 17px; height: 17px; }
.gl-item[aria-current="page"] .gl-item__icon { background: var(--accent); color: var(--text-on-fill); }
.gl-item b { display: flex; align-items: center; gap: 6px; font: 500 13.5px/1.2 var(--font-sans); letter-spacing: -0.01em; }
.gl-item small { display: block; margin-top: 3px; font: 400 11.5px/1.3 var(--font-sans); color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-item__end { margin-left: auto; flex: none; text-align: right; }

/* ---------- SearchField ---------- */
.gl-search {
  display: flex; align-items: center; gap: 8px; width: 240px; max-width: 100%; height: var(--control-md); padding: 0 8px 0 12px;
  box-sizing: border-box; border-radius: var(--radius-md); background: var(--fill-1); color: var(--text-tertiary); cursor: text;
}
.gl-search svg { width: 14px; height: 14px; flex: none; }
.gl-search input {
  flex: 1; min-width: 0; height: 100%; border: 0; padding: 0; background: transparent; outline: none;
  font: 400 13px/1 var(--font-sans); color: var(--text-primary);
}
.gl-search input::placeholder { color: var(--text-tertiary); }
.gl-search:hover, .gl-search.is-hover { background: var(--fill-2); }
.gl-search:focus-within, .gl-search.is-focus { background: var(--fill-2); color: var(--text-secondary); outline: 2px solid var(--focus); outline-offset: 2px; }
.gl-search.is-disabled { opacity: .4; cursor: not-allowed; }
.gl-kbd { font: 400 11px/1 var(--font-mono); padding: 3px 6px; border-radius: var(--radius-xs); background: var(--fill-2); color: var(--text-tertiary); }

/* ---------- TextField ---------- */
.gl-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gl-field__label { font: 500 12px/1.2 var(--font-sans); color: var(--text-secondary); }
.gl-field__input {
  height: 40px; padding: 0 14px; border: 0; border-radius: var(--radius-md); background: var(--fill-1);
  font: 400 14px/1 var(--font-sans); color: var(--text-primary); outline: none; caret-color: var(--accent-text); box-sizing: border-box; width: 100%;
}
.gl-field__input::placeholder { color: var(--text-tertiary); }
.gl-field__input:hover, .gl-field__input.is-hover { background: var(--fill-2); }
.gl-field__input:focus, .gl-field__input.is-focus { background: var(--accent-tint); }
.gl-field__input:focus-visible, .gl-field__input.is-focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.gl-field__input[aria-invalid="true"] { background: var(--neg-tint); }
.gl-field__input:disabled { opacity: .45; cursor: not-allowed; background: var(--fill-1); }
.gl-field__hint { font: 400 12px/1.35 var(--font-sans); color: var(--text-tertiary); }
.gl-field__hint--error { color: var(--neg); }
.gl-field__input--sm { height: var(--control-sm); padding: 0 10px; border-radius: var(--radius-sm); font-size: 13px; }
/* A phone zooms the page into any field whose text is under 16px, and doesn't zoom back out, so on touch
   screens every field (TextField, SearchField, Textarea, Select, the chat's message box) has 16px text. */
@media (hover: none) and (pointer: coarse) { input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select { font-size: 16px !important; } }

/* ---------- Switch ---------- */
.gl-switch {
  position: relative; width: 36px; height: 20px; flex: none; padding: 0; border: 0; border-radius: var(--radius-pill);
  background: var(--fill-3); cursor: pointer;
}
.gl-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-primary);
}
.gl-switch:hover, .gl-switch.is-hover { background: var(--fill-4); }
.gl-switch[aria-checked="true"] { background: var(--accent); }
.gl-switch[aria-checked="true"]::after { transform: translateX(16px); background: var(--text-on-fill); }
.gl-switch[aria-checked="true"]:hover, .gl-switch[aria-checked="true"].is-hover { background: var(--accent-hover); }
.gl-switch[aria-checked="true"]:active, .gl-switch[aria-checked="true"].is-active { background: var(--accent-press); }
.gl-switch:disabled { opacity: .4; cursor: not-allowed; }
.gl-switch-row { display: inline-flex; align-items: center; gap: 10px; font: 400 13px/1.2 var(--font-sans); color: var(--text-secondary); }

/* ---------- FilterChip ---------- */
.gl-chip {
  display: inline-flex; align-items: center; gap: 6px; height: var(--control-sm); padding: 0 11px; border: 0;
  border-radius: var(--radius-pill); background: var(--fill-1); color: var(--text-secondary);
  font: 500 12px/1 var(--font-sans); cursor: pointer; white-space: nowrap;
}
.gl-chip svg { width: 12px; height: 12px; }
.gl-chip:hover, .gl-chip.is-hover { background: var(--fill-2); color: var(--text-primary); }
.gl-chip:active, .gl-chip.is-active { background: var(--fill-3); }
.gl-chip[aria-pressed="true"] { background: var(--accent); color: var(--text-on-fill); }
.gl-chip[aria-pressed="true"]:hover, .gl-chip[aria-pressed="true"].is-hover { background: var(--accent-hover); }
.gl-chip[aria-pressed="true"]:active, .gl-chip[aria-pressed="true"].is-active { background: var(--accent-press); }
.gl-chip:disabled { opacity: .4; cursor: not-allowed; }
.gl-chip[aria-pressed="false"] > svg:first-child { display: none; } /* the check can stay in the markup: it shows only while on */

/* ---------- Badge ---------- */
.gl-badge {
  display: inline-flex; align-items: center; gap: 5px; height: 18px; padding: 0 6px; border-radius: var(--radius-tag);
  font: 500 10.5px/1 var(--font-sans); white-space: nowrap; background: var(--neutral-solid); color: var(--text-on-fill); box-sizing: border-box;
}
.gl-badge--pos { background: var(--pos-solid); }
.gl-badge--neg { background: var(--neg-solid); }
/* A series tone: the badge filled with a ChartColours colour (gl-s1 to gl-s6 on the badge), white text, like the pos and neg tones; for a label named after its colour or matching a chart line. */
.gl-badge--series { background: var(--series); color: var(--text-on-fill); }
.gl-badge--count { font: 400 11px/1 var(--font-mono); }
.gl-badge__dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
@media (prefers-reduced-motion: no-preference) { .gl-badge__dot--live { animation: gl-pulse 2s ease-in-out infinite; } }
@keyframes gl-pulse { 50% { opacity: .35; } }

/* ---------- SampleTag ---------- */
.gl-sample {
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: var(--radius-tag);
  font: 500 9.5px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  color: var(--text-on-fill); background: var(--warn-solid); box-sizing: border-box;
}

/* ---------- Card, shell and frame ---------- */
.gl-frame { background: var(--bg-page); padding: var(--space-3); }
.gl-shell { background: var(--bg-surface); border-radius: var(--radius-2xl); overflow: hidden; }
.gl-card { background: var(--bg-raised); border-radius: var(--radius-lg); min-width: 0; overflow: hidden; display: flex; flex-direction: column; color: var(--text-primary); }
.gl-card__head { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; flex: none; }
.gl-card__title { margin: 0; white-space: nowrap; font: 500 14px/1.2 var(--font-sans); letter-spacing: -0.015em; }
.gl-card__end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.gl-card__body { padding: 0 16px 16px; }
.gl-card--link { text-decoration: none; cursor: pointer; }
.gl-card--link:hover, .gl-card--link.is-hover { box-shadow: inset 0 0 0 999px var(--fill-1); }
.gl-card--link:active, .gl-card--link.is-active { box-shadow: inset 0 0 0 999px var(--fill-2); }
.gl-inset { padding: 11px 12px; border-radius: var(--radius-md); background: var(--fill-1); font: 400 12.5px/1.45 var(--font-sans); color: var(--text-secondary); }
.gl-inset b { color: var(--text-primary); font-weight: 500; }
.gl-feature__icon { width: 34px; height: 34px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--fill-2); color: var(--text-primary); }
.gl-feature__icon svg { width: 18px; height: 18px; }

/* ---------- StatTile ---------- */
.gl-stat {
  display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-height: 88px; padding: 13px 14px;
  border-radius: var(--radius-lg); background: var(--bg-raised); box-sizing: border-box; min-width: 0;
}
.gl-stat__value { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 400 22px/1 var(--font-sans); letter-spacing: -0.025em; color: var(--text-primary); }
.gl-stat__value--accent { color: var(--accent-text); }
.gl-stat__note { margin: 0; font: 400 12px/1.4 var(--font-sans); color: var(--text-tertiary); }
.gl-stat__split { display: inline-flex; align-items: center; gap: 10px; }
.gl-stat__split i { width: 1px; height: 20px; background: var(--fill-4); }
.gl-stat__split span:last-child { color: var(--text-tertiary); }

/* ---------- Coin monogram (ticker chips, list items) ---------- */
.gl-coin {
  width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font: 600 12px/1 var(--font-sans); color: #0A0A0A; background: var(--coin, var(--fill-3));
}
.gl-coin--sm { width: 22px; height: 22px; font-size: 9.5px; }

/* ---------- Meters ---------- */
.gl-progress { height: 6px; border-radius: var(--radius-pill); background: var(--fill-2); overflow: hidden; }
.gl-progress > i { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--brand-electric); }
.gl-progress--neg > i { background: var(--neg-fill); }
.gl-pillbar { display: flex; gap: 3px; height: 8px; }
.gl-pillbar > i { border-radius: var(--radius-pill); }
.gl-pillbar > i:first-child { background: var(--pos-fill); }
.gl-pillbar > i:last-child { background: var(--neg-fill); }
.gl-ring__track { stroke: var(--fill-3); }
.gl-ring__value { stroke: var(--brand-electric); }
.gl-ring--pos .gl-ring__value { stroke: var(--pos-fill); }
.gl-arc__neg { stroke: var(--neg-fill); }
.gl-arc__pos { stroke: var(--pos-fill); }

/* ---------- TierList and TickerChip ---------- */
.gl-tier { display: flex; align-items: center; gap: 12px; padding: 10px 4px; }
.gl-tier + .gl-tier { box-shadow: 0 -1px 0 var(--line); }
.gl-tier__letter { width: 32px; height: 32px; flex: none; border-radius: var(--radius-sm); display: grid; place-items: center; font: 500 15px/1 var(--font-sans); }
.gl-tier__letter--s { color: var(--text-on-fill); background: var(--pos-solid); }
.gl-tier__letter--a { color: var(--bg-surface); background: var(--text-primary); }
.gl-tier__letter--b { color: var(--text-on-fill); background: var(--neutral-solid); }
.gl-tier__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gl-ticker {
  display: inline-flex; align-items: center; gap: 6px; height: var(--control-sm); padding: 0 10px 0 3px; border: 0;
  border-radius: var(--radius-pill); background: var(--fill-1); color: var(--text-primary); font: 500 12px/1 var(--font-sans); cursor: pointer; white-space: nowrap;
}
.gl-ticker em { font-style: normal; font-weight: 400; font-size: 11px; }
.gl-ticker:hover, .gl-ticker.is-hover { background: var(--fill-2); }
.gl-ticker:active, .gl-ticker.is-active { background: var(--fill-3); }
.gl-ticker[aria-pressed="true"] { background: var(--accent); color: var(--text-on-fill); }
.gl-ticker[aria-pressed="true"]:hover, .gl-ticker[aria-pressed="true"].is-hover { background: var(--accent-hover); }
.gl-ticker[aria-pressed="true"] em { color: var(--text-on-fill); }

/* ---------- AreaChart ---------- */
.gl-chart { display: block; width: 100%; height: auto; overflow: visible; }
.gl-chart__grid { stroke: var(--line); stroke-width: 1; }
.gl-chart__line { fill: none; stroke: var(--brand-electric); stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.gl-chart__area-top { stop-color: var(--brand-electric); stop-opacity: .16; }
.gl-chart__area-bot { stop-color: var(--brand-electric); stop-opacity: 0; }
.gl-chart__dot { fill: var(--brand-electric); }
.gl-chart__halo { fill: var(--brand-electric); opacity: .22; }
.gl-chart__axis { font: 400 10px/1 var(--font-mono); fill: var(--text-tertiary); }
/* Hover: a vertical line at the pointer, the dot on the line, and a .gl-chart__tip above it. */
.gl-chart__cursor { stroke: var(--text-tertiary); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.gl-figure { font: 400 32px/1 var(--font-sans); letter-spacing: -0.035em; color: var(--text-primary); }
.gl-figure small { font-size: 13px; letter-spacing: 0; margin-left: 6px; }

/* ---------- PostCard ---------- */
.gl-post { display: block; padding: 12px 10px; border-radius: 14px; color: inherit; text-decoration: none; cursor: pointer; }
.gl-post:hover, .gl-post.is-hover { background: var(--fill-1); }
.gl-post.is-new { background: var(--accent-tint); }
.gl-post.is-new:hover, .gl-post.is-new.is-hover { background: var(--accent-tint-strong); }
.gl-post__head { display: flex; align-items: center; gap: 6px; font: 500 13px/1 var(--font-sans); }
.gl-post__head img { width: 30px; height: 30px; border-radius: 50%; margin-right: 2px; object-fit: cover; }
.gl-post__handle, .gl-post__time { font: 400 11.5px/1 var(--font-sans); color: var(--text-tertiary); }
.gl-post__time { margin-left: auto; }
.gl-post__text { margin: 8px 0 8px 38px; font: 400 13px/1.5 var(--font-sans); color: var(--text-secondary); }
.gl-post__foot { display: flex; align-items: center; gap: 6px; margin-left: 38px; }
.gl-post__foot .gl-link { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; }

/* ---------- Prose: long-form text such as memos and rendered Markdown ---------- */
.gl-prose { font: 400 14px/1.6 var(--font-sans); color: var(--text-secondary); overflow-wrap: anywhere; }
.gl-prose > :first-child { margin-top: 0; }
.gl-prose > :last-child { margin-bottom: 0; }
.gl-prose :is(h2, h3, h4) { color: var(--text-primary); font-weight: 600; }
.gl-prose h2 { margin: 32px 0 10px; font-size: 20px; line-height: 1.25; letter-spacing: -0.02em; }
.gl-prose h3 { margin: 28px 0 8px; font-size: 17px; line-height: 1.3; letter-spacing: -0.015em; }
.gl-prose h4 { margin: 20px 0 6px; font-size: 14px; line-height: 1.35; letter-spacing: -0.01em; }
.gl-prose :is(p, ul, ol, blockquote, table) { margin: 0 0 12px; }
.gl-prose :is(ul, ol) { padding-left: 20px; }
.gl-prose li + li { margin-top: 4px; }
.gl-prose li::marker { color: var(--text-tertiary); }
.gl-prose :is(strong, b) { color: var(--text-primary); font-weight: 500; }
.gl-prose a { color: var(--accent-text); text-decoration: none; }
.gl-prose a:hover { text-decoration: underline; }
.gl-prose a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.gl-prose blockquote { padding: 11px 14px; border-radius: var(--radius-md); background: var(--fill-1); }
.gl-prose code { padding: 1px 5px; border-radius: var(--radius-tag); background: var(--fill-2); color: var(--text-primary); font: 400 0.9em/1 var(--font-mono); }
.gl-prose table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.gl-prose th { padding: 8px 12px 8px 0; text-align: left; font: 400 11px/1.2 var(--font-sans); color: var(--text-tertiary); }
.gl-prose td { padding: 10px 12px 10px 0; color: var(--text-primary); box-shadow: inset 0 1px 0 var(--line); }

.gl-prose h1 { margin: 32px 0 10px; font-size: 20px; line-height: 1.25; letter-spacing: -0.02em; color: var(--text-primary); font-weight: 600; }
.gl-prose img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: var(--radius-md); }
.gl-prose figure { margin: 24px 0; }
.gl-prose figcaption { margin-top: 8px; font: 400 12px/1.5 var(--font-sans); color: var(--text-tertiary); text-align: center; }
.gl-prose hr { height: 1px; margin: 32px 0; border: 0; background: var(--line); }
.gl-prose pre { overflow-x: auto; margin: 0 0 12px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--fill-1); font: 400 12px/1.5 var(--font-mono); }
.gl-prose pre code { padding: 0; background: none; }
.gl-prose sup { font-size: .7em; }
/* Reading size, for essays and other long reads: "reading" and "reading-heading" in theme.json. */
.gl-prose--read { font-size: 17px; line-height: 1.7; letter-spacing: -0.005em; }
.gl-prose--read :is(p, ul, ol, blockquote, table, pre, figure) { margin-bottom: 20px; }
.gl-prose--read :is(h1, h2) { margin: 44px 0 14px; font-size: 24px; line-height: 1.25; letter-spacing: -0.025em; }
.gl-prose--read h3 { margin: 36px 0 10px; font-size: 20px; line-height: 1.3; letter-spacing: -0.02em; }
.gl-prose--read h4 { margin: 28px 0 8px; font-size: 17px; }
.gl-prose--read li + li { margin-top: 8px; }
.gl-prose--read blockquote { padding: 16px 20px; }
.gl-prose--read figcaption { font-size: 13px; }
/* Tables in long reads come from outside (an essay's source), so one wider than the text scrolls inside itself, never the page. */
.gl-prose--read table { display: block; max-width: 100%; overflow-x: auto; }

/* ---------- Preview scaffolding (state matrices in this system's cards) ---------- */
.gl-demo { padding: 20px; display: flex; flex-direction: column; gap: 14px; background: var(--bg-surface); color: var(--text-primary); font-family: var(--font-sans); }
.gl-demo--raised { background: var(--bg-raised); }
.gl-demo__row { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 16px; }
.gl-demo__row > span:first-child { font: 400 11px/1.2 var(--font-mono); color: var(--text-tertiary); }
.gl-demo__items { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
.gl-demo__head { display: grid; grid-template-columns: 88px repeat(var(--cols, 5), minmax(0, 1fr)); gap: 10px; font: 400 11px/1.2 var(--font-mono); color: var(--text-tertiary); }
.gl-demo__grid { display: grid; grid-template-columns: 88px repeat(var(--cols, 5), minmax(0, 1fr)); gap: 10px; align-items: center; }
.gl-demo__grid > span:first-child { font: 400 11px/1.2 var(--font-mono); color: var(--text-tertiary); }
.gl-demo__grid > * { justify-self: start; }

/* ---------- Status icon (Toast, Notice) ---------- */
.gl-status { width: 20px; height: 20px; flex: none; border-radius: 50%; display: grid; place-items: center; color: var(--text-on-fill); background: var(--neutral-solid); }
.gl-status svg { width: 12px; height: 12px; }
.gl-status--success { background: var(--pos-solid); }
.gl-status--error { background: var(--neg-solid); }
.gl-status--warning { background: var(--warn-solid); }
.gl-status--info { background: var(--neutral-solid); }

/* ---------- Toast ---------- */
.gl-toasts { position: fixed; z-index: 50; left: max(16px, env(safe-area-inset-left, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 8px; }
.gl-toast {
  display: flex; align-items: center; gap: 10px; width: 360px; max-width: calc(100vw - 32px); box-sizing: border-box;
  min-height: 48px; padding: 8px 8px 8px 14px; border-radius: var(--radius-md); background: var(--bg-overlay); box-shadow: var(--shadow-popover);
  font: 400 13px/1.4 var(--font-sans); color: var(--text-primary);
}
.gl-toast__text { flex: 1; min-width: 0; }
.gl-toast__text small { display: block; color: var(--text-secondary); font-size: 12px; }
.gl-toast .gl-btn { flex: none; }
/* Accent: a notification about something that just arrived (a message, a mention, a trade), which
   has to stand out from the page. Solid accent with text-on-fill; its button, dismiss button and
   picture sit on translucent white so they read on the blue. */
.gl-toast--accent { background: var(--accent); color: var(--text-on-fill); }
.gl-toast--accent .gl-btn--ghost, .gl-toast--accent .gl-iconbtn { background: rgba(255,255,255,.14); color: var(--text-on-fill); }
.gl-toast--accent .gl-btn--ghost:hover:not(:disabled), .gl-toast--accent .gl-iconbtn:hover:not(:disabled) { background: rgba(255,255,255,.24); color: var(--text-on-fill); }
.gl-toast--accent .gl-avatar, .gl-toast--accent .gl-coin { background: rgba(255,255,255,.2); color: var(--text-on-fill); }
@media (prefers-reduced-motion: no-preference) {
  .gl-toast:not([hidden]) { animation: gl-toast-in .2s cubic-bezier(.2, .7, .3, 1); }
  .gl-toast.is-leaving { opacity: 0; transform: translateY(6px); transition: opacity .18s ease-in, transform .18s ease-in; }
}
@keyframes gl-toast-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Notice (inline) ---------- */
.gl-notice { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--fill-1); font: 400 13px/1.45 var(--font-sans); color: var(--text-secondary); }
.gl-notice b { display: block; color: var(--text-primary); font-weight: 500; }
.gl-notice .gl-status { margin-top: 1px; }
.gl-notice__end { margin-left: auto; flex: none; align-self: center; }

/* ---------- Dialog ---------- */
.gl-scrim { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: var(--scrim); }
.gl-dialog {
  width: 420px; max-width: 100%; box-sizing: border-box; padding: 20px; border-radius: var(--radius-xl);
  background: var(--bg-overlay); box-shadow: var(--shadow-popover); color: var(--text-primary);
}
/* A native <dialog> can be the Dialog: showModal() gives the focus trap and Escape; its backdrop is the scrim. */
dialog.gl-dialog { border: 0; margin: auto; max-height: calc(100vh - 32px); overflow-y: auto; }
dialog.gl-dialog::backdrop { background: var(--scrim); }
/* Wide: a panel of detail (a ListItem opened), up to 760px. */
.gl-dialog--wide { width: 760px; padding: 24px; }
.gl-dialog__title { margin: 0; font: 500 16px/1.3 var(--font-sans); letter-spacing: -0.015em; }
.gl-dialog__body { margin: 8px 0 0; font: 400 13.5px/1.5 var(--font-sans); color: var(--text-secondary); }
.gl-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
/* Media dialog: one picture at its own size, up to the window, with a close button on top. */
.gl-dialog--media { position: relative; width: auto; padding: 0; background: none; box-shadow: none; }
.gl-dialog--media img { display: block; max-width: 100%; max-height: calc(100vh - 32px); border-radius: var(--radius-lg); }
.gl-dialog__close.gl-iconbtn { position: absolute; top: 8px; right: 8px; background: var(--bg-overlay); }
.gl-dialog__close.gl-iconbtn:hover:not(:disabled) { background: linear-gradient(var(--fill-2), var(--fill-2)) var(--bg-overlay); }
.gl-dialog__close.gl-iconbtn:active:not(:disabled) { background: linear-gradient(var(--fill-3), var(--fill-3)) var(--bg-overlay); }
@media (prefers-reduced-motion: no-preference) {
  .gl-scrim:not([hidden]) { animation: gl-fade .16s ease-out; }
  .gl-scrim:not([hidden]) .gl-dialog { animation: gl-menu-in .2s cubic-bezier(.2, .7, .3, 1); }
}
@keyframes gl-fade { from { opacity: 0; } }

/* ---------- Select (dropdown) ---------- */
.gl-select-wrap { position: relative; display: inline-block; }
.gl-select {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; min-width: 180px; padding: 0 12px 0 14px; border: 0; box-sizing: border-box;
  border-radius: var(--radius-md); background: var(--fill-1); color: var(--text-primary); font: 400 14px/1 var(--font-sans); cursor: pointer; text-align: left;
}
.gl-select > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-select .gl-caret { color: var(--text-tertiary); }
.gl-select--sm { height: var(--control-sm); min-width: 0; padding: 0 10px 0 12px; border-radius: var(--radius-pill); font: 500 12px/1 var(--font-sans); }
.gl-select.is-placeholder > span { color: var(--text-tertiary); }
.gl-select:hover, .gl-select.is-hover { background: var(--fill-2); }
.gl-select:active, .gl-select.is-active { background: var(--fill-3); }
/* Open: solid accent, like every drop-down trigger (the rule is with AccountChip's). */
.gl-select[aria-invalid="true"] { background: var(--neg-tint); }
.gl-select:disabled { opacity: .45; cursor: not-allowed; }
.gl-select-wrap .gl-menu { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: max(100%, 220px); }
.gl-select-wrap .gl-menu { width: max-content; min-width: max(100%, 220px); max-width: min(400px, calc(100vw - 32px)); } /* as wide as its longest option, never wider than the screen */
.gl-select-wrap .gl-menu [role="option"] .gl-item__main { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-select-wrap--end .gl-menu { left: auto; right: 0; } /* a Select at the right end of a row opens leftwards */
.gl-option-check { width: 14px; height: 14px; flex: none; color: var(--text-primary); visibility: hidden; }
.gl-item[aria-selected="true"] .gl-option-check { visibility: visible; }

/* ---------- Textarea ---------- */
.gl-textarea { position: relative; }
.gl-textarea textarea {
  display: block; width: 100%; min-height: 96px; box-sizing: border-box; padding: 12px 14px; border: 0; resize: vertical;
  border-radius: var(--radius-md); background: var(--fill-1); color: var(--text-primary); font: 400 14px/1.5 var(--font-sans); outline: none; caret-color: var(--accent-text);
}
.gl-textarea textarea::placeholder { color: var(--text-tertiary); }
.gl-textarea textarea:hover, .gl-textarea textarea.is-hover { background: var(--fill-2); }
.gl-textarea textarea:focus, .gl-textarea textarea.is-focus { background: var(--accent-tint); }
.gl-textarea textarea:focus-visible, .gl-textarea textarea.is-focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.gl-textarea textarea[aria-invalid="true"] { background: var(--neg-tint); }
.gl-textarea textarea:disabled { opacity: .45; cursor: not-allowed; }
.gl-textarea--action textarea { padding-bottom: 48px; }
.gl-textarea__action { position: absolute; right: 8px; bottom: 8px; }
.gl-count { font: 400 11px/1 var(--font-mono); color: var(--text-tertiary); }
.gl-count.is-over { color: var(--neg); }

/* ---------- DataTable ---------- */
.gl-table { width: 100%; border-collapse: collapse; font: 400 13px/1.3 var(--font-sans); color: var(--text-primary); font-variant-numeric: tabular-nums; }
.gl-table th { height: 32px; padding: 0 12px; text-align: left; vertical-align: bottom; font: 400 11px/1.2 var(--font-sans); color: var(--text-tertiary); }
.gl-table td { height: 44px; padding: 0 12px; overflow-wrap: break-word; }
/* Column headers end 8px above the first row, so a filled (hovered or selected) first row never touches them. */
.gl-table thead th { padding-bottom: 8px; }
@media (max-width: 480px) { .gl-table th, .gl-table td { padding: 0 8px; } } /* narrow screens: tighter cells, so the table fits without scrolling */
.gl-table .is-num { text-align: right; }
.gl-table td.is-num { white-space: nowrap; }
.gl-table tbody tr { cursor: default; }
.gl-table tbody tr:hover td, .gl-table tbody tr.is-hover td { background: var(--fill-1); }
.gl-table tbody tr[aria-selected="true"] td { background: var(--accent-tint); }
/* Matrix: one value for each pair of a row heading and a column heading. Each axis is named: the
   corner cell names the rows, a group heading over the columns names them, and the row headings
   are <th scope="row">. is-current marks the heading of the row or column the reader is at. */
.gl-table--matrix .gl-table__group { height: 28px; vertical-align: middle; text-align: center; background: var(--fill-1); color: var(--text-secondary); }
.gl-table--matrix .gl-table__corner { color: var(--text-secondary); }
.gl-table--matrix thead tr + tr th { font-size: 13px; color: var(--text-secondary); } /* column values read like the row values */
.gl-table tbody th { height: 44px; vertical-align: middle; font: 400 13px/1.3 var(--font-sans); color: var(--text-secondary); }
.gl-table th.gl-mono { font-family: var(--font-mono); }
.gl-table th.is-current, .gl-table--matrix thead tr + tr th.is-current { color: var(--text-primary); font-weight: 500; }
.gl-table--sticky thead th { position: sticky; top: 0; background: var(--bg-raised); z-index: 1; }
.gl-th-sort { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; margin: 0 -6px; border: 0; border-radius: var(--radius-xs); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.gl-th-sort:hover, .gl-th-sort.is-hover { color: var(--text-primary); background: var(--fill-1); }
.gl-th-sort .gl-caret { opacity: 0; }
[aria-sort="ascending"] .gl-th-sort, [aria-sort="descending"] .gl-th-sort { color: var(--text-primary); }
[aria-sort="ascending"] .gl-th-sort .gl-caret { opacity: 1; transform: rotate(180deg); }
[aria-sort="descending"] .gl-th-sort .gl-caret { opacity: 1; }

/* ---------- DatePicker: a field that opens a month calendar; one date, or a From to To range ---------- */
.gl-date { position: relative; display: inline-block; max-width: 100%; }
.gl-date__field {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; height: var(--control-md); padding: 0 12px; border: 0; border-radius: var(--radius-md);
  background: var(--fill-1); color: var(--text-primary); font: 400 13.5px/1 var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap; cursor: pointer;
}
.gl-date__field > svg:first-child { width: 14px; height: 14px; flex: none; color: var(--text-tertiary); }
.gl-date__field span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gl-date__field .gl-caret { width: 10px; height: 10px; flex: none; color: var(--text-tertiary); transition: transform .18s ease; }
.gl-date__field:hover, .gl-date__field.is-hover { background: var(--fill-2); }
.gl-date__field[aria-expanded="true"] .gl-caret { transform: rotate(180deg); }
.gl-date__field:focus-visible, .gl-date__field.is-focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.gl-date__field.is-placeholder span { color: var(--text-tertiary); }
.gl-date__field:disabled { opacity: .45; cursor: not-allowed; }
.gl-date__pop {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: 288px; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 12px;
  border-radius: var(--radius-xl); background: var(--bg-overlay); box-shadow: var(--shadow-popover); color: var(--text-primary);
}
.gl-date--end .gl-date__pop { left: auto; right: 0; } /* a DatePicker at the right end of a row opens leftwards */
.gl-date__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.gl-date__head b { font: 500 13.5px/1 var(--font-sans); }
.gl-date__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); row-gap: 2px; }
.gl-date__wd { padding: 6px 0; text-align: center; font: 400 11px/1 var(--font-sans); color: var(--text-tertiary); }
.gl-date__day {
  height: 36px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-primary);
  font: 400 13px/1 var(--font-sans); font-variant-numeric: tabular-nums; cursor: pointer;
}
.gl-date__day:hover, .gl-date__day.is-hover { background: var(--fill-2); }
.gl-date__day.is-outside { color: var(--text-tertiary); }
.gl-date__day.is-today { color: var(--accent-text); font-weight: 600; }
.gl-date__day.is-in-range { border-radius: 0; background: var(--accent-tint); }
.gl-date__day[aria-selected="true"] { background: var(--accent); color: var(--text-on-fill); }
.gl-date__day.is-start:not(.is-end):has(+ .is-in-range, + .is-end) { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.gl-date__day:is(.is-in-range, .is-start) + .is-end:not(.is-start) { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
/* A range that runs onto the next week is rounded at each row's ends (the 7 weekday labels come first, so Monday is 7n+1). */
.gl-date__day.is-in-range:nth-child(7n+1) { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.gl-date__day.is-in-range:nth-child(7n) { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.gl-date__day:disabled { opacity: .3; background: transparent; cursor: not-allowed; }
.gl-date__day:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; position: relative; }
.gl-date__foot { margin: 8px 2px 0; font: 400 12px/1.4 var(--font-sans); color: var(--text-tertiary); }

/* ---------- Spinner and Skeleton ---------- */
.gl-spinner { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid var(--fill-3); border-top-color: var(--text-secondary); box-sizing: border-box; display: inline-block; }
.gl-spinner--lg { width: 24px; height: 24px; border-width: 2.5px; }
@media (prefers-reduced-motion: no-preference) { .gl-spinner { animation: gl-spin .7s linear infinite; } }
.gl-skel { display: block; border-radius: var(--radius-xs); background: var(--fill-2); }
.gl-skel--text { height: 10px; }
.gl-skel--line { height: 14px; }
.gl-skel--circle { border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) { .gl-skel { animation: gl-skel 1.4s ease-in-out infinite; } }
@keyframes gl-skel { 50% { opacity: .45; } }
/* Still: shapes that stand in for content the reader can't see (signed out, a picture of a page), not content on its way. */
.gl-skel.gl-skel--still { animation: none; }

/* ---------- EmptyState ---------- */
.gl-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 32px 16px; }
.gl-empty .gl-item__icon { width: 40px; height: 40px; margin-bottom: 6px; }
.gl-empty b { font: 500 14px/1.3 var(--font-sans); color: var(--text-primary); }
.gl-empty p { margin: 0; max-width: 320px; font: 400 13px/1.45 var(--font-sans); color: var(--text-secondary); }
.gl-empty .gl-btn { margin-top: 10px; }

/* ---------- Tooltip ---------- */
.gl-tip { position: relative; display: inline-flex; }
.gl-tip__bubble {
  position: absolute; z-index: 40; bottom: calc(100% + 6px); left: 50%; translate: -50% 0; width: max-content; max-width: 240px;
  padding: 6px 8px; border-radius: var(--radius-sm); background: var(--text-primary); color: var(--bg-surface);
  font: 400 12px/1.35 var(--font-sans); pointer-events: none; opacity: 0; visibility: hidden;
}
.gl-tip:hover .gl-tip__bubble, .gl-tip:focus-within .gl-tip__bubble, .gl-tip.is-open .gl-tip__bubble { opacity: 1; visibility: visible; }
/* InfoTip: a small (i) after a label or a title, holding the explanation in a Tooltip. Hover, focus or a
   tap shows it; gl-tooltip.js places it in the window (fixed), so a Card's edge never cuts it off. */
.gl-info { position: relative; display: inline-flex; vertical-align: -2px; margin-left: 4px; }
.gl-info__btn { display: inline-grid; place-items: center; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-tertiary); cursor: help; }
.gl-info__btn svg { width: 14px; height: 14px; }
.gl-info__btn:hover, .gl-info.is-open .gl-info__btn, .gl-info__btn.is-hover { color: var(--text-primary); }
.gl-info__btn:focus-visible, .gl-info__btn.is-focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.gl-info .gl-tip__bubble { max-width: min(280px, calc(100vw - 32px)); text-align: left; text-transform: none; letter-spacing: normal; white-space: normal; }
.gl-info:hover .gl-tip__bubble, .gl-info:focus-within .gl-tip__bubble, .gl-info.is-open .gl-tip__bubble { opacity: 1; visibility: visible; }
/* The bubble is fixed to the window, top left, until gl-tooltip.js places it, so a hidden one never widens what holds it. */
.gl-info .gl-tip__bubble { position: fixed; top: 0; left: 0; bottom: auto; translate: none; }
@media (prefers-reduced-motion: no-preference) {
  .gl-tip__bubble { transition: opacity .12s ease-out, visibility 0s linear .12s; }
  .gl-tip:hover .gl-tip__bubble, .gl-tip:focus-within .gl-tip__bubble { transition-delay: .3s, .3s; }
  .gl-info:focus-within .gl-tip__bubble, .gl-info.is-open .gl-tip__bubble { transition-delay: 0s, 0s; }
}

/* ---------- ThemeToggle ---------- */
.gl-theme { position: relative; display: inline-flex; justify-content: space-between; width: 60px; height: 30px; padding: 3px; border: 0; box-sizing: border-box; border-radius: var(--radius-pill); background: var(--fill-2); cursor: pointer; }
.gl-theme::before { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--bg-overlay); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.gl-theme[aria-checked="true"]::before { transform: translateX(30px); }
.gl-theme svg { position: relative; z-index: 1; width: 14px; height: 14px; margin: 5px; color: var(--text-tertiary); }
.gl-theme[aria-checked="false"] .gl-theme__sun, .gl-theme[aria-checked="true"] .gl-theme__moon { color: var(--text-primary); }
.gl-theme:hover, .gl-theme.is-hover { background: var(--fill-3); }
@media (prefers-reduced-motion: no-preference) { .gl-theme::before { transition: transform .2s cubic-bezier(.2, .7, .3, 1); } }

/* ---------- Locked ---------- */
.gl-locked { position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.gl-locked__content { filter: blur(6px); opacity: .6; pointer-events: none; user-select: none; }
.gl-locked__strip {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: flex; align-items: center; gap: 12px; width: max-content; max-width: calc(100% - 32px);
  padding: 10px 10px 10px 14px; border-radius: var(--radius-lg); background: var(--bg-overlay); box-shadow: var(--shadow-popover); font: 400 13px/1.4 var(--font-sans); color: var(--text-secondary);
}
.gl-locked__strip b { color: var(--text-primary); font-weight: 500; }
.gl-locked__strip > svg { width: 16px; height: 16px; flex: none; color: var(--text-primary); }
.gl-redact { border-radius: var(--radius-xs); background: var(--fill-3); color: transparent; user-select: none; }

/* ---------- ActionBar ---------- */
.gl-actionbar {
  display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; border-radius: var(--radius-lg);
  background: var(--bg-overlay); box-shadow: var(--shadow-popover); font: 400 13px/1.4 var(--font-sans); color: var(--text-secondary);
}
.gl-actionbar b { color: var(--text-primary); font-weight: 500; }
.gl-actionbar__end { margin-left: auto; display: flex; gap: 8px; }
.gl-actionbar--sticky { position: sticky; bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 30; }

/* ---------- Logo swap: the PNG wordmark has one file per ground ---------- */
.gl-logo--on-light { display: none; }
[data-theme="light"] .gl-logo--on-light { display: block; }
[data-theme="light"] .gl-logo--on-dark { display: none; }

/* =====================================================================================
   Additions for social and admin screens. Everything else on those screens is built from
   the components above (ListItem, Badge, FilterChip, Textarea, Menu, SearchField, DataTable).
   ===================================================================================== */

/* ---------- Extensions to existing components ---------- */
/* Badge: high-contrast tone for counts that must stand out (unread). Inverse, never blue. */
.gl-badge--strong { background: var(--accent); color: var(--text-on-fill); } /* unread counts and mentions: the one blue Badge */
/* ListItem: a time at the end of the name line, an unread style, and a static (non-clickable) row. */
.gl-item__time { margin-left: auto; flex: none; font: 400 11px/1 var(--font-sans); color: var(--text-tertiary); }
.gl-item.is-unread b { font-weight: 600; }
.gl-item.is-unread small { color: var(--text-secondary); }
.gl-item--static, .gl-item--static:hover, .gl-item--static:active { cursor: default; background: transparent; }
/* IconButton: vote toggles fill green or red when on; a danger icon action fills red on hover. */
.gl-iconbtn--up[aria-pressed="true"] { background: var(--pos-solid); color: var(--text-on-fill); }
.gl-iconbtn--down[aria-pressed="true"] { background: var(--neg-solid); color: var(--text-on-fill); }
.gl-iconbtn--up[aria-pressed="true"]:hover:not(:disabled), .gl-iconbtn--up[aria-pressed="true"].is-hover { background: var(--pos-solid); }
.gl-iconbtn--down[aria-pressed="true"]:hover:not(:disabled), .gl-iconbtn--down[aria-pressed="true"].is-hover { background: var(--neg-solid-hover); }
.gl-iconbtn--danger:hover:not(:disabled), .gl-iconbtn--danger.is-hover { background: var(--neg-solid); color: var(--text-on-fill); }
/* SearchField: locked to a picked value, with a clear button. */
.gl-search.is-picked { background: var(--fill-2); color: var(--text-primary); }
.gl-search.is-picked input { font-weight: 600; cursor: default; }
/* TextField: a small action inside the field (Save), and the "Saved" note that replaces it. */
.gl-field__wrap { position: relative; display: block; min-width: 0; }
.gl-field__wrap .gl-field__input { padding-right: 72px; }
.gl-field__end { position: absolute; right: 6px; top: 50%; translate: 0 -50%; display: flex; align-items: center; }
.gl-field__saved { padding-right: 8px; font: 400 11.5px/1 var(--font-sans); color: var(--text-tertiary); }
/* Segmented: icon-only options. */
.gl-seg__opt--icon { width: 30px; padding: 0; display: inline-grid; place-items: center; }
.gl-seg__opt--icon svg { width: 14px; height: 14px; }
/* Matched text in search results. */
mark.gl-mark { background: var(--highlight); color: var(--text-primary); border-radius: 2px; padding: 0 1px; }

/* ---------- Avatar ---------- */
.gl-avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--fill-3); color: var(--text-secondary); font: 600 11px/1 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; }
.gl-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-avatar--sm { width: 22px; height: 22px; font-size: 9px; }
.gl-avatar--md { width: 28px; height: 28px; font-size: 10px; }
.gl-avatar--lg { width: 40px; height: 40px; font-size: 13px; }
.gl-avatar--logo { background: #FFFFFF; }
.gl-avatar--logo img { object-fit: contain; padding: 3px; box-sizing: border-box; }

/* ---------- ChatMessage ---------- */
.gl-msg { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 0 12px; padding: 8px 76px 8px 16px; border-radius: var(--radius-md); }
.gl-msg:hover, .gl-msg.is-hover, .gl-msg.is-open { background: var(--fill-1); }
.gl-msg__meta { display: flex; align-items: baseline; gap: 8px; min-height: 20px; flex-wrap: wrap; }
.gl-msg__name { font: 600 13px/1.3 var(--font-sans); color: var(--text-primary); }
.gl-msg__score { font: 500 11px/1 var(--font-mono); }
.gl-msg__body { margin: 0; font: 400 14px/1.5 var(--font-sans); color: var(--text-primary); white-space: pre-wrap; overflow-wrap: anywhere; }
.gl-msg__time { position: absolute; right: 16px; bottom: 8px; font: 400 11px/20px var(--font-sans); color: var(--text-tertiary); }
.gl-msg__extra { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.gl-msg.is-target { background: var(--accent-tint); }
/* Landed on: a row, message or chart the reader was just taken to fades the accent tint in and out once. */
@media (prefers-reduced-motion: no-preference) { .gl-msg.is-flash, .gl-flash { animation: gl-flash 2.2s ease-in-out; } }
@keyframes gl-flash { 0%, 100% { background: transparent; } 20%, 55% { background: var(--accent-tint-strong); } }
.gl-msg.is-deleted .gl-msg__body { color: var(--text-tertiary); font-style: italic; }
.gl-msg__failed { margin-top: 4px; display: flex; align-items: center; gap: 8px; font: 400 12px/1.3 var(--font-sans); color: var(--neg); }
.gl-msgbar { position: absolute; top: -16px; right: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--radius-md); background: var(--bg-overlay); box-shadow: var(--shadow-popover); opacity: 0; pointer-events: none; }
.gl-msg:hover .gl-msgbar, .gl-msg.is-hover .gl-msgbar, .gl-msg.is-open .gl-msgbar, .gl-msg:has(:focus-visible) .gl-msgbar { opacity: 1; pointer-events: auto; }
@media (hover: none) { .gl-msgbar { position: static; opacity: 1; pointer-events: auto; box-shadow: none; margin-top: 4px; width: max-content; } }
.gl-msgbar .gl-iconbtn:not([aria-pressed="true"]) { background: transparent; }
.gl-msgbar .gl-iconbtn:not([aria-pressed="true"]):hover { background: var(--fill-2); }
.gl-msgbar__count { min-width: 18px; text-align: center; font: 500 11.5px/1 var(--font-mono); color: var(--text-secondary); }
.gl-msgbar__sep { width: 1px; height: 16px; margin: 0 3px; background: var(--line); }
.gl-quote { display: flex; align-items: center; gap: 8px; max-width: 100%; margin: 4px 0; padding: 3px 10px; box-sizing: border-box; border-radius: var(--radius-xs); background: var(--fill-1); box-shadow: inset 2px 0 0 var(--text-tertiary); font: 400 12px/1.5 var(--font-sans); color: var(--text-tertiary); cursor: pointer; text-decoration: none; }
/* The quote's own text only: a chart inside a card quote keeps its own styles (its hover tip). */
.gl-quote b:not(.gl-quote__chart *) { flex: none; color: var(--text-secondary); font-weight: 600; }
.gl-quote span:not(.gl-quote__chart *) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-quote:hover, .gl-quote.is-hover { background: var(--fill-2); color: var(--text-secondary); }
.gl-quote .gl-iconbtn { margin-left: auto; }
/* Card quote: an item a message refers to (a note, a trade, a chart), shown whole above the text.
   One line names where it came from, then the item, then its text in full or its chart. */
.gl-quote--card { flex-direction: column; align-items: stretch; gap: 4px; max-width: 720px; padding: 8px 12px; cursor: default; }
.gl-quote--card[role="button"] { cursor: pointer; }
.gl-quote--card:not([role="button"]):hover { background: var(--fill-1); color: var(--text-tertiary); }
.gl-quote--card span:not(.gl-quote__chart *) { overflow: visible; white-space: normal; }
.gl-quote__head { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--text-tertiary); }
.gl-quote--card .gl-quote__head span, .gl-quote__head > * { flex: none; white-space: nowrap; }
.gl-quote__sep { opacity: .6; }
.gl-quote__head .gl-tier__letter { width: 18px; height: 18px; font-size: 11px; border-radius: var(--radius-tag); }
.gl-quote__title { font: 600 13px/1.4 var(--font-sans); color: var(--text-primary); text-decoration: none; }
a.gl-quote__title:hover { text-decoration: underline; }
.gl-quote--card .gl-quote__head .gl-quote__filter { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.gl-quote__item { display: flex; align-items: center; gap: 8px; color: var(--text-primary); }
.gl-quote__item img { width: 18px; height: 18px; border-radius: 50%; }
.gl-quote--card b:not(.gl-quote__chart *) { color: var(--text-primary); }
.gl-quote__text { margin: 0; color: var(--text-secondary); white-space: pre-wrap; overflow-wrap: anywhere; }
/* A chart drawn for a full page: its axis labels are enlarged to stay readable at message width. */
.gl-quote__chart { position: relative; min-width: 0; margin-top: 4px; padding-left: 20px; }
.gl-quote__chart .gl-chart__axis { font-size: 14px; }
.gl-quote__chart svg { overflow: visible; }
/* A chart in a quote is at most about 200px tall, so it reads in a message (its hover readout gives
   the exact figures): the full-page charts (1120 by 300) stop growing at the width that gives that height. */
.gl-quote__chart .gl-bars { max-width: 747px; }
/* A card quote can end with one IconButton (.gl-quote__end, say ✕ to remove it): in its top right
   corner, inset 8px from both edges, with room kept for it, so the card stays one box with one
   ground and one hover state. */
.gl-quote--card:has(> .gl-quote__end) { position: relative; padding-right: 52px; }
.gl-quote--card > .gl-quote__end { position: absolute; top: 8px; right: 8px; margin: 0; }
/* Pictures in a card quote (.gl-quote__media, a post's photos), as wide as the card. One keeps its
   own shape and is sized by the page to fit 300px of height; two to four share a 16:9 box, laid out
   as X lays them out. A video's still has a play mark (.is-video). .is-sensitive blurs them under a
   button (.gl-quote__reveal) that shows them. */
.gl-quote__media { position: relative; display: grid; gap: 2px; margin-top: 4px; border-radius: var(--radius-xs); overflow: hidden; }
.gl-quote__media--1 { display: block; width: fit-content; max-width: 100%; }
.gl-quote__media:not(.gl-quote__media--1) { aspect-ratio: 16 / 9; grid-template-columns: 1fr 1fr; }
.gl-quote__media--3, .gl-quote__media--4 { grid-template-rows: 1fr 1fr; }
.gl-quote__media--3 > :first-child { grid-row: span 2; }
.gl-quote--card .gl-quote__media > span { position: relative; display: block; min-height: 0; max-width: 100%; overflow: hidden; background: var(--fill-2); }
.gl-quote__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gl-quote__media .is-video::after { content: ""; position: absolute; top: 50%; left: 50%; width: 0; height: 0; margin: -12px 0 0 -8px; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent #fff; filter: drop-shadow(0 0 6px rgba(0, 0, 0, .6)); }
.gl-quote__media.is-sensitive img { filter: blur(24px); }
.gl-quote__media > .gl-quote__reveal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
/* .gl-quote--fit, a preview of something outside the site (an X post): the ground wraps its content,
   at most 440px wide so its lines stay short enough to read, and never wider than the message on a
   phone. One picture is sized before it loads, so the ground wraps it too; two to four take the
   whole width, which their grid needs. */
.gl-quote--fit { width: fit-content; max-width: min(100%, 440px); }
.gl-quote--fit:has(.gl-quote__media:not(.gl-quote__media--1)) { width: min(100%, 440px); }
/* Its text is the thing being read, often several lines, so it takes the main text colour. */
.gl-quote--fit .gl-quote__text { color: var(--text-primary); }
/* An author's picture in the head line, before their name (an X post's). */
.gl-quote__head img { width: 18px; height: 18px; border-radius: 50%; }
.gl-mention { color: var(--accent-text); font-weight: 500; text-decoration: none; }
.gl-mention:hover { text-decoration: underline; text-underline-offset: 2px; }
.gl-mention.is-me { background: var(--accent-tint); color: var(--text-primary); padding: 0 2px; border-radius: 3px; }
.gl-cashtag { display: inline-block; padding: 0 6px; border-radius: var(--radius-pill); background: var(--fill-2); color: var(--text-primary); font: 500 12px/18px var(--font-mono); text-decoration: none; }
.gl-cashtag:hover { background: var(--fill-3); }
.gl-emoji-grid { display: grid; grid-template-columns: repeat(8, 32px); gap: 2px; }
.gl-emoji { width: 32px; height: 32px; border: 0; border-radius: var(--radius-sm); background: transparent; font-size: 16px; line-height: 1; cursor: pointer; }
.gl-emoji:hover, .gl-emoji.is-hover { background: var(--fill-2); }
.gl-emoji[aria-pressed="true"] { background: var(--accent-tint-strong); }
.gl-emoji:focus-visible, .gl-emoji.is-focus { outline: 2px solid var(--focus); outline-offset: 1px; }

/* ---------- RankList ---------- */
.gl-rank { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.gl-rank li { display: flex; align-items: center; gap: 8px; font: 400 13px/1.3 var(--font-sans); color: var(--text-primary); }
.gl-rank__n { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: var(--radius-tag); background: var(--fill-2); color: var(--text-secondary); font: 600 11px/1 var(--font-mono); }
.gl-rank li:first-child .gl-rank__n { background: var(--text-primary); color: var(--bg-surface); }
.gl-rank__who { min-width: 0; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-rank__leader { flex: 1; min-width: 12px; border-bottom: 1px dashed var(--line); transform: translateY(3px); }
.gl-rank__amt { flex: none; font: 500 12.5px/1 var(--font-mono); }
.gl-rank__amt small { font: 400 11px/1 var(--font-sans); color: var(--text-tertiary); margin-left: 3px; }

/* ---------- FileInput ---------- */
.gl-file { position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px; box-sizing: border-box; border-radius: var(--radius-md); background: var(--fill-1); }
.gl-file:hover, .gl-file.is-hover { background: var(--fill-2); }
.gl-file__thumb { width: 40px; height: 40px; flex: none; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--fill-2); color: var(--text-tertiary); overflow: hidden; }
.gl-file__thumb svg { width: 18px; height: 18px; }
.gl-file__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gl-file__text { flex: 1; min-width: 0; font: 400 13px/1.35 var(--font-sans); color: var(--text-secondary); }
.gl-file__text b { display: block; color: var(--text-primary); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-file__text small { color: var(--text-tertiary); font-size: 12px; }
.gl-file input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.gl-file:focus-within, .gl-file.is-focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.gl-file.is-drag { background: var(--accent-tint); outline: 2px dashed var(--focus); outline-offset: -2px; }
.gl-file.is-error { background: var(--neg-tint); }
.gl-file.is-error small { color: var(--neg); }
.gl-file.is-disabled { opacity: .45; }

/* ---------- KeyValueList ---------- */
.gl-kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 20px; margin: 0; font: 400 13.5px/1.4 var(--font-sans); }
.gl-kv dt { color: var(--text-tertiary); }
.gl-kv dd { margin: 0; color: var(--text-primary); overflow-wrap: anywhere; }

/* ---------- Chart series, legend and bars ---------- */
.gl-s1 { --series: var(--chart-1); } .gl-s2 { --series: var(--chart-2); } .gl-s3 { --series: var(--chart-3); }
.gl-s4 { --series: var(--chart-4); } .gl-s5 { --series: var(--chart-5); } .gl-s6 { --series: var(--chart-6); }
.gl-sin { --series: var(--pos); } .gl-sout { --series: var(--neg); } .gl-sneutral { --series: var(--text-tertiary); } /* a total behind the series, such as all trading volume */
.gl-chart__base { stroke: var(--fill-4); stroke-width: 1; }
.gl-chart__series { fill: none; stroke: var(--series); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.gl-chart__end { fill: var(--series); stroke: var(--bg-raised); stroke-width: 2; }
/* Stacked areas, and the hover columns of a line or area chart: a column shows its cursor line and a
   dot on each series under the pointer or keyboard focus (gl-charts.js adds the tip). */
.gl-chart__band { fill: var(--series); fill-opacity: .8; }
.gl-chart__col { outline: none; }
.gl-chart__hit { fill: transparent; }
.gl-chart__col .gl-chart__cursor { opacity: 0; }
.gl-chart__col:is(:hover, :focus-visible) .gl-chart__cursor { opacity: 1; }
.gl-chart__pt { r: 0; fill: var(--series); stroke: var(--bg-raised); stroke-width: 2; }
.gl-chart__col:is(:hover, :focus-visible) .gl-chart__pt { r: 4px; }
.gl-chart__wrap { position: relative; }
.gl-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font: 400 12px/1.2 var(--font-sans); color: var(--text-secondary); }
.gl-legend li { display: inline-flex; align-items: center; gap: 6px; }
.gl-legend i { flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--series); }
.gl-legend .gl-legend__line { height: 2px; width: 14px; border-radius: 1px; }
.gl-bars { display: block; width: 100%; height: auto; overflow: visible; }
.gl-bar__hit { fill: transparent; }
.gl-bar__mark { fill: var(--series); }
.gl-bar { outline: none; }
.gl-bar:hover .gl-bar__hit, .gl-bar.is-hover .gl-bar__hit, .gl-bar:focus-visible .gl-bar__hit { fill: var(--fill-1); }
.gl-bar:focus-visible .gl-bar__hit { stroke: var(--focus); stroke-width: 2; vector-effect: non-scaling-stroke; }
.gl-bars:has(.gl-bar:hover, .gl-bar.is-hover, .gl-bar:focus-visible) .gl-bar:not(:hover, .is-hover, :focus-visible) .gl-bar__mark { opacity: .4; }
.gl-chart__tip { position: absolute; translate: -50% calc(-100% - 8px); pointer-events: none; z-index: 5;
  padding: 7px 9px; border-radius: var(--radius-sm); background: var(--text-primary); color: var(--bg-surface);
  font: 400 12px/1.35 var(--font-sans); white-space: nowrap; }
.gl-chart__tip b { display: block; font-weight: 500; }
.gl-chart__tip span { display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.gl-chart__tip i { width: 8px; height: 8px; border-radius: 2px; background: var(--series); }
@media (prefers-reduced-motion: no-preference) { .gl-bar__mark, .gl-bar__hit { transition: opacity .12s ease-out, fill .12s ease-out; } }
/* ---------- DonutChart: a whole split into a few parts, the total in the middle ---------- */
.gl-donut { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); margin: 0; }
.gl-donut__ring { position: relative; flex: none; width: 168px; }
.gl-donut__ring svg { display: block; width: 100%; height: auto; transform: rotate(-90deg); }
.gl-donut__track { fill: none; stroke: var(--fill-2); stroke-width: 14; }
.gl-donut__seg { fill: none; stroke: var(--series); stroke-width: 14; outline: none; }
/* A part's segment and legend row share data-part: hovering or focusing either dims every other part in both. */
.gl-donut:has([data-part="1"]:is(:hover, :focus-visible)) [data-part]:not([data-part="1"]) { opacity: .35; }
.gl-donut:has([data-part="2"]:is(:hover, :focus-visible)) [data-part]:not([data-part="2"]) { opacity: .35; }
.gl-donut:has([data-part="3"]:is(:hover, :focus-visible)) [data-part]:not([data-part="3"]) { opacity: .35; }
.gl-donut:has([data-part="4"]:is(:hover, :focus-visible)) [data-part]:not([data-part="4"]) { opacity: .35; }
.gl-donut:has([data-part="5"]:is(:hover, :focus-visible)) [data-part]:not([data-part="5"]) { opacity: .35; }
.gl-donut__seg:focus-visible { stroke-width: 18; }
.gl-donut__center { position: absolute; inset: 0; display: grid; place-content: center; gap: 4px; text-align: center; pointer-events: none; }
.gl-donut__center b { font: 400 22px/1 var(--font-sans); letter-spacing: -0.025em; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.gl-donut__center span { font: 400 11px/1.2 var(--font-sans); color: var(--text-tertiary); }
.gl-donut__legend { flex: 0 1 380px; min-width: 220px; display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.gl-donut__legend li { cursor: default; display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto; align-items: baseline; gap: 4px 10px; font: 400 13px/1.35 var(--font-sans); color: var(--text-secondary); }
.gl-donut__legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--series); align-self: center; }
.gl-donut__legend b { font-weight: 400; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.gl-donut__legend small { min-width: 3.5em; text-align: right; font-size: 12px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) { .gl-donut__seg { transition: opacity .12s ease-out, stroke-width .12s ease-out; } .gl-donut__legend li { transition: opacity .12s ease-out; } }
.gl-swatches { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.gl-swatch { display: flex; flex-direction: column; gap: 6px; font: 400 11px/1.2 var(--font-mono); color: var(--text-tertiary); }
.gl-swatch i { height: 44px; border-radius: var(--radius-sm); background: var(--series); }

/* ---------- Back link ---------- */
.gl-back {
  display: inline-flex; align-items: center; gap: 8px; height: var(--control-md); padding: 0 14px 0 4px;
  border-radius: var(--radius-pill); color: var(--text-secondary); text-decoration: none; cursor: pointer;
  font: 500 13px/1 var(--font-sans); letter-spacing: -0.01em; white-space: nowrap;
}
.gl-back__icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--fill-2); color: var(--text-primary); }
.gl-back__icon svg { display: block; }
.gl-back:hover, .gl-back.is-hover { background: var(--fill-1); color: var(--text-primary); }
.gl-back:hover .gl-back__icon, .gl-back.is-hover .gl-back__icon { background: var(--fill-3); }
.gl-back:hover .gl-back__icon svg, .gl-back.is-hover .gl-back__icon svg { transform: translateX(-2px); }
.gl-back:active, .gl-back.is-active { background: var(--fill-2); color: var(--text-primary); transform: scale(.98); }
.gl-back:active .gl-back__icon, .gl-back.is-active .gl-back__icon { background: var(--fill-4); }
.gl-back:focus-visible, .gl-back.is-focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.gl-back:focus:not(:focus-visible) { outline: none; }
.gl-back--sm { height: var(--control-sm); gap: 6px; padding: 0 10px 0 3px; font-size: 12px; }
.gl-back--sm .gl-back__icon { width: 22px; height: 22px; }
.gl-back--icon { width: var(--control-md); padding: 0; justify-content: center; }
.gl-back--icon .gl-back__icon { width: 100%; height: 100%; }
.gl-back--icon:hover, .gl-back--icon.is-hover, .gl-back--icon:active, .gl-back--icon.is-active { background: transparent; }
.gl-back--icon .gl-back__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .gl-back, .gl-back__icon { transition: background-color .12s ease-out, color .12s ease-out, transform .12s ease-out; }
  .gl-back__icon svg { transition: transform .16s cubic-bezier(.2, .7, .3, 1); }
}