/* Gemba — Card issuing (mobile)
   Built entirely from design-system/colors_and_type.css tokens.
   Layout follows the system's documented mobile breakpoint rules:
   left-nav collapses to a bottom bar, cards stack 1-up, tables
   convert to card-per-row. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
[hidden] { display: none !important; }

body {
  background: var(--gem-bg);
  font-family: var(--gem-font);
  color: var(--gem-fg1);
  -webkit-font-smoothing: antialiased;
}

/* Every button's real look comes from a component class (.btn, .icon-btn,
   .menu-item, .nav-item, etc.) — reset the browser's native button chrome
   (outset bevel border, buttonface background) so it never shows through. */
button {
  font-family: var(--gem-font);
  font-size: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  text-align: center;
}

/* Same reasoning as the button reset above: an <a> used as a component
   (card, row, menu item, nav link) should never show the browser's default
   blue-and-underlined link chrome — component classes own the real look. */
a {
  color: inherit;
  text-decoration: none;
}

/* Centers the phone-width app on wider viewports without adding any
   chrome that isn't part of the design system. On an actual phone
   (<=480px) this is a no-op — the app simply fills the viewport. */
.app-wrap {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  background: var(--gem-surface-emph);
}
@media (max-width: 480px) {
  .app-wrap { background: var(--gem-bg); }
}

.app {
  width: 100%;
  max-width: 430px;
  min-height: 100vh;
  background: var(--gem-bg);
  display: flex;
  flex-direction: column;
  position: relative;
}
@media (min-width: 481px) {
  .app { box-shadow: var(--gem-shadow-md); min-height: 100dvh; }
}

.icon { display: inline-flex; flex-shrink: 0; color: currentColor; }
.icon svg { display: block; }

/* ---------------------------------------------------------------- */
/* Top bar                                                            */
/* ---------------------------------------------------------------- */

.topbar {
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--gem-space-3);
  padding: 0 var(--gem-space-4);
  background: linear-gradient(to bottom, var(--gem-surface), var(--gem-bg));
  border-bottom: 1px solid var(--gem-border);
  position: sticky;
  top: 0;
  z-index: 20;
}

.logo-mark { width: 26px; height: 25px; color: var(--gem-accent); flex-shrink: 0; }
.logo-mark svg { width: 100%; height: 100%; }

.switcher-btn {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  border-radius: var(--gem-radius-pill);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface);
  padding: 0 6px 0 10px;
  cursor: pointer;
  color: var(--gem-fg2);
}
.switcher-btn .badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--gem-surface-emph);
  border-radius: var(--gem-radius-pill);
  padding: 3px 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gem-fg2);
}

.avatar-btn {
  width: 36px; height: 36px;
  border-radius: var(--gem-radius-pill);
  background: var(--gem-fg2);
  color: var(--gem-on-dark);
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--gem-font);
  cursor: pointer;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------- */
/* Content                                                            */
/* ---------------------------------------------------------------- */

.content {
  flex: 1;
  padding: var(--gem-space-4) var(--gem-space-4) var(--gem-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-4);
}

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gem-space-3);
}

/* H1 steps 40 -> 28 on mobile per the system's responsive rules,
   staying Regular weight — the light page-title signature. */
.page-title {
  margin: 0;
  font-family: var(--gem-font-ui);
  font-size: 28px;
  line-height: 1.2;
  font-weight: var(--gem-h1-weight);
  color: var(--gem-fg1);
}

.bottom-bar {
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  z-index: 20;
}

.fab-dock {
  padding: 0 var(--gem-space-4) var(--gem-space-3);
  background: var(--gem-bg);
}

.fab-add {
  width: 100%;
  height: 40px;
  padding: 0 var(--gem-space-5);
  border-radius: var(--gem-radius-pill);
  background: var(--gem-btn-primary);
  color: var(--gem-on-dark);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--gem-font);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--gem-shadow-md);
}

/* Tabs — same bordered-pill language as .service-pill (Payments) for a
   consistent look across every top-level tab row: outlined pills, active =
   ink border + dark text, full-bleed edge scroll. */
.tabs {
  display: flex;
  gap: var(--gem-space-2);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin: 0 calc(var(--gem-space-4) * -1);
  padding: 2px var(--gem-space-4) 4px;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  flex-shrink: 0;
  height: 40px;
  padding: 0 var(--gem-space-4);
  border-radius: var(--gem-radius-pill);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface);
  color: var(--gem-fg2);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--gem-font);
  cursor: pointer;
  white-space: nowrap;
}
.tab.active {
  border-color: var(--gem-ink);
  color: var(--gem-fg1);
}

/* card-panel: flat panel resting directly on the page canvas — surface-emph
   fill, since surface-subtle (#F3F5F6) is nearly the same grey as the page
   background (#F9FAFB) and the two blend together with no visible edge. */
.balance-panel {
  background: var(--gem-surface-emph);
  border-radius: var(--gem-radius-md);
  padding: var(--gem-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-4);
}

.balance-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gem-space-3);
}

.field-label {
  font-size: var(--gem-small-size);
  color: var(--gem-fg2);
  font-family: var(--gem-font);
  margin-bottom: 4px;
}

.balance-amount { font-size: 22px; }

.divider { height: 1px; background: var(--gem-border); }

.account-name-row {
  display: flex;
  align-items: center;
  gap: var(--gem-space-2);
  flex-wrap: wrap;
}
.account-name-row .name {
  font-size: 14px;
  font-weight: 700;
  color: var(--gem-fg1);
}

/* Buttons — pill, per button-primary/secondary/tertiary tokens */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--gem-radius-pill);
  font-family: var(--gem-font);
  font-weight: 700;
  font-size: 14px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-sm { height: 32px; padding: 0 var(--gem-space-4); font-size: 13px; }
.btn-md { height: 40px; padding: 0 var(--gem-space-5); }
.btn-full { width: 100%; }
.btn-primary { background: var(--gem-btn-primary); color: var(--gem-on-dark); }
.btn-secondary { background: var(--gem-btn-emph); color: var(--gem-fg1); }
.btn-tertiary { background: var(--gem-surface); color: var(--gem-fg1); border-color: var(--gem-border); }
.btn-ghost { background: transparent; color: var(--gem-fg1); }

.icon-btn {
  width: 40px; height: 40px;
  border-radius: var(--gem-radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}

/* Search row */
.search-row {
  display: flex;
  align-items: center;
  gap: var(--gem-space-2);
}
.search-field {
  flex: 1;
  height: 40px;
  border-radius: var(--gem-radius-sm);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface);
  box-shadow: var(--gem-shadow-xs);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 var(--gem-space-4);
  min-width: 0;
}
.search-field:focus-within { border: 2px solid var(--gem-ink); padding: 0 15px; }
.search-field input {
  border: 0; outline: 0; background: transparent;
  flex: 1; min-width: 0;
  font-size: 14px;
  font-family: var(--gem-font);
  color: var(--gem-fg1);
}
.search-field input::placeholder { color: var(--gem-fg3); }
.search-field .icon { color: var(--gem-fg3); }

/* Chips — pill status labels, ALL-CAPS 10px bold */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: var(--gem-radius-pill);
  padding: 4px 10px;
  font-size: var(--gem-tiny-size);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-family: var(--gem-font-ui);
  line-height: 12px;
  white-space: nowrap;
}
.chip .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex-shrink: 0; }
.chip-neutral  { background: var(--gem-surface-emph); color: var(--gem-fg2); }
.chip-success  { background: var(--gem-success-soft); color: var(--gem-success); }
.chip-warning  { background: var(--gem-warning-soft); color: var(--gem-warning); }
.chip-critical { background: var(--gem-critical-soft); color: var(--gem-critical); }
.chip-info     { background: var(--gem-info-soft); color: var(--gem-info); }

/* Card list — table rows become card-per-row (Card component, 16px radius) */
.card-list {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-3);
}

.card-row {
  background: var(--gem-surface);
  border: 1px solid var(--gem-border);
  border-radius: var(--gem-radius-lg);
  box-shadow: var(--gem-shadow-xs);
  padding: var(--gem-space-4);
}
.card-row.muted { opacity: 0.55; }

.card-row-top {
  display: flex;
  align-items: center;
  gap: var(--gem-space-2);
  margin-bottom: var(--gem-space-3);
}

/* Card-tone swatches — illustrative card-art gradients (per the system's
   "flat card-graphic illustrations" allowance), not semantic/brand color,
   so these intentionally sit outside the --gem-* token set. */
.card-chip {
  width: 30px; height: 20px;
  border-radius: 4px;
  flex-shrink: 0;
}
.card-chip.tone-virtual  { background: linear-gradient(135deg,#3B4B6B,#283349); }
.card-chip.tone-standard { background: linear-gradient(135deg,#525C72,#2E3547); }
.card-chip.tone-golden   { background: linear-gradient(135deg,#D8B65C,#9C7A2E); }
.card-chip.tone-metal    { background: linear-gradient(135deg,#8B93A1,#4B5262); }

.card-type {
  font-size: 14px;
  font-weight: 700;
  color: var(--gem-fg1);
}

.row-status { margin-left: auto; }

.row-menu {
  border: 0;
  background: transparent;
  color: var(--gem-fg3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: var(--gem-radius-pill);
  cursor: pointer;
  flex-shrink: 0;
}

.card-holder {
  font-size: 14px;
  color: var(--gem-fg1);
  font-weight: 400;
  margin-bottom: 2px;
}

.card-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--gem-small-size);
  color: var(--gem-fg2);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--gem-space-2);
}
.card-meta .warn-icon { color: var(--gem-warning); display: inline-flex; }

.card-limits {
  font-size: var(--gem-small-size);
  color: var(--gem-fg3);
  font-variant-numeric: tabular-nums;
  padding-top: var(--gem-space-2);
  border-top: 1px solid var(--gem-border);
}
.card-limits.pending { color: var(--gem-fg3); font-style: italic; }

/* ---------------------------------------------------------------- */
/* Bottom nav                                                         */
/* ---------------------------------------------------------------- */

/* Floating pill bar (Revolut/Wise-style) — detached from the screen edges
   with a soft shadow, rather than a flush full-width bar with a hairline
   border. The safe-area inset becomes bottom margin (lifting the whole
   bar clear of the home-indicator area) instead of inner padding. */
.bottom-nav {
  flex-shrink: 0;
  display: flex;
  align-items: stretch;
  background: var(--gem-surface);
  border-radius: var(--gem-radius-pill);
  box-shadow: var(--gem-shadow-md);
  margin: 0 var(--gem-space-3) calc(var(--gem-space-3) + env(safe-area-inset-bottom));
  padding: 6px var(--gem-space-2);
  touch-action: none;
}

.nav-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--gem-fg2);
  padding: 2px;
  cursor: pointer;
  min-width: 0;
}
.nav-item .label { font-size: 11px; font-weight: 700; font-family: var(--gem-font); }
.nav-item.active { color: var(--gem-ink); }
/* The pill hugs just the icon+label (shrink-to-fit), centered within the
   item's full-width touch target — the light capsule behind the active
   item, not a bar-wide fill. */
.nav-pill {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  max-width: 100%;
  padding: 6px 14px;
  border-radius: var(--gem-radius-pill);
  transition: background-color .15s ease;
}
.nav-item.active .nav-pill { background: var(--gem-surface-emph); }

/* ---------------------------------------------------------------- */
/* Bottom sheets                                                      */
/* ---------------------------------------------------------------- */

.sheet-scrim {
  position: fixed; inset: 0;
  background: rgba(24, 29, 39, 0.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
  z-index: 30;
}
.sheet-scrim.open { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
  width: 100%;
  max-width: 430px;
  background: var(--gem-surface);
  border-radius: var(--gem-radius-lg) var(--gem-radius-lg) 0 0;
  box-shadow: var(--gem-shadow-md);
  padding: var(--gem-space-3) var(--gem-space-4) calc(var(--gem-space-5) + env(safe-area-inset-bottom));
  transition: transform .2s ease;
  z-index: 31;
  max-height: 75vh;
  overflow-y: auto;
}
.sheet.open { transform: translate(-50%, 0); }

.sheet-handle {
  width: 36px; height: 4px;
  border-radius: var(--gem-radius-pill);
  background: var(--gem-border);
  margin: 0 auto var(--gem-space-4);
}
#sheet-more .sheet-handle { cursor: grab; touch-action: none; }

.sheet-title {
  font-size: var(--gem-h5-size);
  font-weight: 700;
  color: var(--gem-fg1);
  margin: 0 0 var(--gem-space-3);
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: var(--gem-radius-sm);
  padding: 12px 10px;
  font-family: var(--gem-font);
  font-size: 14px;
  font-weight: 600;
  color: var(--gem-fg1);
  text-align: left;
  cursor: pointer;
}
.menu-item:active { background: var(--gem-surface-subtle); }
.menu-item .icon { color: var(--gem-fg2); }
.menu-item.critical { color: var(--gem-critical); }
.menu-item.critical .icon { color: var(--gem-critical); }
.menu-item .check-icon { margin-left: auto; color: var(--gem-accent); }

/* More menu — 3-per-row app-grid layout (bare icon + label, no circle). */
.menu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gem-space-4) var(--gem-space-2);
}
.menu-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gem-space-2);
  background: none;
  border: 0;
  padding: var(--gem-space-2) 0;
  cursor: pointer;
  text-decoration: none;
  color: var(--gem-fg1);
}
.menu-grid-item .icon { color: var(--gem-fg2); }
.menu-grid-item .mg-label { font-size: 12px; font-weight: 600; text-align: center; line-height: 15px; }

.sheet .divider { margin: var(--gem-space-2) 0; }

/* ---------------------------------------------------------------- */
/* Shared: page header w/ back button (sub-pages)                     */
/* ---------------------------------------------------------------- */

.page-topbar {
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--gem-space-3);
  padding: 0 var(--gem-space-4);
  background: linear-gradient(to bottom, var(--gem-surface), var(--gem-bg));
  border-bottom: 1px solid var(--gem-border);
  position: sticky;
  top: 0;
  z-index: 20;
}
.back-btn {
  width: 36px; height: 36px;
  border-radius: var(--gem-radius-pill);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--gem-fg1);
  flex-shrink: 0;
  text-decoration: none;
}
.page-topbar-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--gem-fg1);
  font-family: var(--gem-font-ui);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Card summary strip — used atop Card details / Statements / etc. */
.summary-card {
  background: var(--gem-surface);
  border: 1px solid var(--gem-border);
  border-radius: var(--gem-radius-lg);
  box-shadow: var(--gem-shadow-xs);
  padding: var(--gem-space-3) var(--gem-space-4);
  display: flex;
  align-items: center;
  gap: var(--gem-space-3);
  cursor: pointer;
}
.summary-card .card-chip { width: 34px; height: 22px; }
.summary-card .info { flex: 1; min-width: 0; }
.summary-card .top-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.summary-card .type { font-size: 14px; font-weight: 700; color: var(--gem-fg1); }
.summary-card .sub { font-size: 12px; color: var(--gem-fg2); margin-top: 2px; }
.summary-card .chev { color: var(--gem-fg3); flex-shrink: 0; }

/* Segmented sub-tabs (Transactions / Settings / Statements) */
.subtabs {
  display: flex;
  gap: var(--gem-space-2);
  overflow-x: auto;
  scrollbar-width: none;
}
.subtabs::-webkit-scrollbar { display: none; }
.subtabs .tab { background: var(--gem-surface); border: 1px solid var(--gem-border); color: var(--gem-fg2); }
.subtabs .tab.active { background: var(--gem-btn-primary); color: var(--gem-on-dark); border-color: transparent; }

/* Primary contextual action bar (Activate / Freeze / Terminate) */
.action-primary-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  border-radius: var(--gem-radius-pill);
  border: 0;
  background: var(--gem-btn-primary);
  color: var(--gem-on-dark);
  font-family: var(--gem-font);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}

/* Sections */
.section-title {
  font-family: var(--gem-font-ui);
  font-size: var(--gem-h5-size);
  font-weight: 700;
  color: var(--gem-fg1);
  margin: 0;
}
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gem-space-2);
}
button.section-head {
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}
.section-head .section-chev { color: var(--gem-fg3); flex-shrink: 0; transition: transform 0.15s ease; }
.section-head[aria-expanded="true"] .section-chev { transform: rotate(180deg); }
/* Collapsed: read as its own small card, not just plain text left on the
   page background — makes the collapsed state easy to spot while scanning. */
button.section-head[aria-expanded="false"] {
  background: var(--gem-surface);
  border: 1px solid var(--gem-border);
  border-radius: var(--gem-radius-md);
  box-shadow: var(--gem-shadow-xs);
  padding: var(--gem-space-3) var(--gem-space-4);
}
.section-body { display: flex; flex-direction: column; gap: var(--gem-space-3); }

/* ---------------------------------------------------------------- */
/* Form fields (text-input token: 8px radius, border, xs shadow)      */
/* ---------------------------------------------------------------- */

.field-group { display: flex; flex-direction: column; gap: var(--gem-space-3); }
.field-row { display: flex; gap: var(--gem-space-3); }
.field-row > * { flex: 1; min-width: 0; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field > .flabel {
  font-size: 14px;
  font-weight: 700;
  color: var(--gem-fg1);
  font-family: var(--gem-font);
}
.field > .fhint {
  font-size: var(--gem-small-size);
  color: var(--gem-fg2);
}

.finput, .fselect {
  height: 40px;
  border-radius: var(--gem-radius-sm);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface);
  box-shadow: var(--gem-shadow-xs);
  padding: 0 var(--gem-space-4);
  font-size: 14px;
  font-family: var(--gem-font);
  color: var(--gem-fg1);
  width: 100%;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
}
.finput:focus, .fselect:focus { border: 2px solid var(--gem-ink); padding: 0 15px; }
.finput::placeholder { color: var(--gem-fg3); }
.finput:disabled, .fselect:disabled { background: var(--gem-surface-subtle); color: var(--gem-fg2); cursor: not-allowed; }

.card-number-field {
  height: 40px;
  border-radius: var(--gem-radius-sm);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface);
  box-shadow: var(--gem-shadow-xs);
  display: flex;
  align-items: center;
  padding: 0 var(--gem-space-2) 0 var(--gem-space-4);
}
.card-number-field.disabled { background: var(--gem-surface-subtle); }
.card-number-field:focus-within { border: 2px solid var(--gem-ink); padding: 0 calc(var(--gem-space-2) - 1px) 0 15px; }
.card-number-field input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--gem-font-num);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: var(--gem-fg1);
}
.card-number-field input::placeholder { color: var(--gem-fg3); }
.card-number-field input:disabled { color: var(--gem-fg2); cursor: not-allowed; }
.cnf-scan {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border: 0;
  border-radius: var(--gem-radius-sm);
  background: none;
  color: var(--gem-fg2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.ftextarea {
  border-radius: var(--gem-radius-sm);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface);
  box-shadow: var(--gem-shadow-xs);
  padding: var(--gem-space-3) var(--gem-space-4);
  font-size: 14px;
  font-family: var(--gem-font);
  color: var(--gem-fg1);
  width: 100%;
  min-height: 80px;
  outline: none;
  resize: vertical;
}
.ftextarea:focus { border: 2px solid var(--gem-ink); padding: 11px 15px; }
.ftextarea::placeholder { color: var(--gem-fg3); }

.fselect-wrap { position: relative; }
.fselect-wrap .fselect { padding-right: 40px; }
.fselect-wrap .chev {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  color: var(--gem-fg3); pointer-events: none;
}

/* Row-style selector (Fee account, Statement of card, etc.) */
.row-select {
  display: flex;
  align-items: center;
  gap: var(--gem-space-3);
  border: 1px solid var(--gem-border);
  border-radius: var(--gem-radius-sm);
  background: var(--gem-surface);
  box-shadow: var(--gem-shadow-xs);
  padding: var(--gem-space-3) var(--gem-space-4);
  cursor: pointer;
  width: 100%;
}
.flag-dot {
  width: 24px; height: 24px; border-radius: 999px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gem-surface-emph); color: var(--gem-fg2);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.row-select .flag-dot { width: 28px; height: 28px; }
/* Circular currency flag glyphs — CSS-only, matches the design system's
   own Flag primitive (radial-gradient stars / stripes), never emoji. */
.flag-dot.flag-eur { background: radial-gradient(circle at 50% 50%, transparent 36%, #FFDA44 37%, #FFDA44 40%, transparent 41%), #003399; }
.flag-dot.flag-gbp { background: linear-gradient(#012169,#012169); }
.flag-dot.flag-usd { background: repeating-linear-gradient(#fff 0 2px, #B22234 2px 4px); }
.row-select .rtext { flex: 1; min-width: 0; text-align: left; }
.row-select .rtitle { font-size: 14px; font-weight: 600; color: var(--gem-fg1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-select .rsub { font-size: 12px; color: var(--gem-fg2); margin-top: 1px; }

/* Dropzone */
.dropzone {
  border: 1px dashed var(--gem-border);
  border-radius: var(--gem-radius-sm);
  background: var(--gem-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  color: var(--gem-fg1);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

/* Segmented control (2-way: PDF/CSV, Black/White) */
.segmented {
  display: flex;
  background: var(--gem-surface-emph);
  border-radius: var(--gem-radius-sm);
  padding: 3px;
  gap: 3px;
}
.segmented button {
  flex: 1;
  height: 34px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--gem-fg2);
  font-family: var(--gem-font);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.segmented button.active { background: var(--gem-surface); color: var(--gem-fg1); box-shadow: var(--gem-shadow-xs); }

/* Toggle switch */
.toggle-row {
  display: flex;
  align-items: flex-start;
  gap: var(--gem-space-3);
  padding: var(--gem-space-3) 0;
}
.toggle-row .ttext { flex: 1; min-width: 0; }
.toggle-row .ttitle { font-size: 14px; font-weight: 700; color: var(--gem-fg1); margin-bottom: 2px; }
.toggle-row .tdesc { font-size: var(--gem-small-size); color: var(--gem-fg2); line-height: 16px; }

.switch {
  position: relative;
  width: 40px; height: 24px;
  flex-shrink: 0;
  border-radius: var(--gem-radius-pill);
  background: var(--gem-border);
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: background .15s;
}
.switch::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  border-radius: 999px;
  background: var(--gem-on-dark);
  box-shadow: 0 1px 3px rgba(40,51,73,0.3);
  transition: transform .15s;
}
.switch.on { background: var(--gem-success); }
.switch.on::after { transform: translateX(16px); }

/* Limit card-panel (Daily/Monthly limit) — on page canvas, needs surface-emph */
.limit-panel {
  background: var(--gem-surface-emph);
  border-radius: var(--gem-radius-md);
  padding: var(--gem-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-3);
}
.limit-panel .lhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.limit-panel .lhead .ltitle { font-size: 14px; font-weight: 700; color: var(--gem-fg1); }
.limit-panel .lhead .lrefresh {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--gem-fg3);
}
.limit-remaining { font-size: 12px; color: var(--gem-fg2); }

/* Mini card visual (chip + masked number + name/expiry) */
.card-visual {
  border-radius: var(--gem-radius-md);
  padding: var(--gem-space-4);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 160px;
  color: var(--gem-on-dark);
  position: relative;
  overflow: hidden;
}
.card-visual.dark { background: linear-gradient(145deg,#3B4457,#20242F); }
.card-visual.light { background: linear-gradient(145deg,#F3F5F6,#E3E6EA); color: var(--gem-fg1); }
.card-visual .chip-icon { width: 32px; height: 24px; border-radius: 4px; background: rgba(255,255,255,0.35); }
.card-visual.light .chip-icon { background: rgba(40,51,73,0.18); }
.card-visual .num { font-family: var(--gem-font-num); font-size: 16px; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; opacity: 0.9; }
.card-visual .bottom-row { display: flex; align-items: flex-end; justify-content: space-between; }
.card-visual .holder { font-size: 13px; opacity: 0.85; }
.card-visual .brand { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; }

/* Detail rows (Transaction details) */
.detail-list { display: flex; flex-direction: column; }
.detail-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gem-space-3);
  padding: var(--gem-space-3) 0;
  border-top: 1px solid var(--gem-border);
  font-size: 14px;
}
.detail-row:first-child { border-top: 0; }
.detail-row .dlabel { color: var(--gem-fg2); flex-shrink: 0; }
.detail-row .dvalue { color: var(--gem-fg1); text-align: right; word-break: break-word; }

.amount-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.amount-head .amt { font-family: var(--gem-font-num); font-weight: 700; font-size: 24px; color: var(--gem-ink-strong); font-variant-numeric: tabular-nums; }
.amount-sub { font-size: 12px; color: var(--gem-fg3); }

.category-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--gem-radius-pill);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--gem-fg1);
}

/* Statement row / generic list row */
.list-row {
  display: flex;
  align-items: center;
  gap: var(--gem-space-3);
  padding: var(--gem-space-3) 0;
  border-top: 1px solid var(--gem-border);
}
.list-row:first-child { border-top: 0; }
/* Some list rows open a detail sheet instead of navigating, so they're a
   <button> rather than an <a> — undo the global button center/width reset. */
button.list-row { width: 100%; text-align: left; }
.list-row .lr-main { flex: 1; min-width: 0; }
.list-row .lr-title { font-size: 14px; font-weight: 700; color: var(--gem-fg1); }
.list-row .lr-sub { font-size: 12px; color: var(--gem-fg2); margin-top: 2px; }
.list-row .lr-amount { font-family: var(--gem-font-num); font-weight: 700; font-size: 14px; color: var(--gem-fg1); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.list-row .lr-icon-btn { flex-shrink: 0; color: var(--gem-fg3); background: transparent; border: 0; cursor: pointer; display: inline-flex; padding: 4px; }

/* Cardholder / design row (card-per-row on Cardholders & Designs tabs) */
.entity-row {
  background: var(--gem-surface);
  border: 1px solid var(--gem-border);
  border-radius: var(--gem-radius-lg);
  box-shadow: var(--gem-shadow-xs);
  padding: var(--gem-space-4);
}
.entity-row.muted { opacity: 0.55; }
.entity-row .er-top { display: flex; align-items: center; gap: var(--gem-space-2); margin-bottom: 6px; }
.entity-row .er-name { font-size: 14px; font-weight: 700; color: var(--gem-fg1); }
.entity-row .er-email { font-size: var(--gem-small-size); color: var(--gem-fg2); margin-bottom: 2px; }
.entity-row .er-address { font-size: var(--gem-small-size); color: var(--gem-fg3); }
.entity-row .er-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--gem-space-3);
  padding-top: var(--gem-space-3);
  border-top: 1px solid var(--gem-border);
}
.entity-row .er-spend { font-family: var(--gem-font-num); font-weight: 700; font-size: 14px; color: var(--gem-fg1); }
.entity-row .er-spend-label { font-size: 11px; color: var(--gem-fg3); }
.count-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px;
  background: var(--gem-success-soft); color: var(--gem-success);
  font-size: 12px; font-weight: 700;
}
.count-chip.zero { background: var(--gem-surface-emph); color: var(--gem-fg3); }

/* Illustrative card-art swatches, same exception as .card-chip.tone-*
   above — not semantic/brand color. */
.design-thumb {
  width: 44px; height: 28px;
  border-radius: 4px;
  flex-shrink: 0;
}
.design-thumb.white { background: linear-gradient(135deg,var(--gem-on-dark),#EDEFF1); border: 1px solid var(--gem-border); }
.design-thumb.black { background: linear-gradient(135deg,#3B4457,#181D27); }

.info-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--gem-space-3);
  background: var(--gem-surface-subtle);
  border-radius: var(--gem-radius-md);
  padding: var(--gem-space-4);
  font-size: 14px;
  color: var(--gem-fg1);
  line-height: 20px;
}
.info-banner .icon { color: var(--gem-fg1); flex-shrink: 0; margin-top: 1px; }
/* Message thread: this instance sits directly on the page canvas (not
   inside a white sheet, like the other .info-banner uses), so it needs the
   higher-contrast fill. */
#thread-info-banner { background: var(--gem-surface-emph); }

.bullet-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.bullet-list li { display: flex; gap: 8px; font-size: 14px; color: var(--gem-fg2); line-height: 20px; }
.bullet-list li::before { content: "•"; color: var(--gem-fg3); flex-shrink: 0; }

.link-text {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--gem-accent);
  font-size: 14px; font-weight: 600;
  background: none; border: 0; cursor: pointer; padding: 0;
  text-decoration: none;
}

/* ---------------------------------------------------------------- */
/* Dashboard                                                          */
/* ---------------------------------------------------------------- */

.section {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-3);
}

/* Horizontal snap carousel — accounts, news. Multi-column desktop grids
   collapse to a single scrollable row on mobile rather than stacking
   tall, since these are meant to be browsed, not read top-to-bottom. */
.hscroll {
  display: flex;
  gap: var(--gem-space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 calc(var(--gem-space-4) * -1);
  padding: 2px var(--gem-space-4) 4px;
  /* Without this, snap-start on the first card cancels out the left padding
     on load (the browser scrolls the padding out of view to "start" the
     snap flush with the content edge) — scroll-padding keeps it in. */
  scroll-padding-left: var(--gem-space-4);
  scroll-padding-right: var(--gem-space-4);
}
.hscroll::-webkit-scrollbar { display: none; }
.hscroll > * { scroll-snap-align: start; flex-shrink: 0; }

.account-card {
  width: 240px;
  background: var(--gem-surface);
  border: 1px solid var(--gem-border);
  border-radius: var(--gem-radius-lg);
  box-shadow: var(--gem-shadow-xs);
  padding: var(--gem-space-4);
}
.account-card .ac-top { display: flex; align-items: center; gap: 8px; margin-bottom: var(--gem-space-3); }
.account-card .ac-ccy { font-size: 14px; font-weight: 700; color: var(--gem-fg1); }
.account-card .ac-name { font-size: 12px; color: var(--gem-fg2); margin-bottom: 2px; }
.account-card .ac-iban { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--gem-fg3); font-variant-numeric: tabular-nums; margin-bottom: var(--gem-space-3); }
.account-card .ac-iban .icon { color: var(--gem-fg3); }
.account-card .ac-balance { font-size: 22px; }
.account-card .ac-sub { font-size: 12px; color: var(--gem-fg3); font-weight: 600; margin-top: 2px; }

.see-more-card {
  width: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.see-more-card .circle {
  width: 44px; height: 44px;
  border-radius: 999px;
  background: var(--gem-btn-primary);
  color: var(--gem-on-dark);
  display: inline-flex; align-items: center; justify-content: center;
}

.news-card {
  width: 220px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.news-card .news-body { display: flex; flex-direction: column; gap: 4px; }
.news-card .thumb {
  width: 100%; height: 110px;
  border-radius: var(--gem-radius-md);
  object-fit: cover;
  background: var(--gem-surface-emph);
}
.news-card .news-meta { font-size: 11px; color: var(--gem-fg3); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.news-card .news-title { font-size: 14px; font-weight: 700; color: var(--gem-fg1); line-height: 19px; }
.news-card .news-excerpt { font-size: 12px; color: var(--gem-fg2); line-height: 17px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.message-row { padding: var(--gem-space-3) 0; border-top: 1px solid var(--gem-border); }
.message-row:first-child { border-top: 0; padding-top: 0; }
.message-row .mr-top { display: flex; align-items: center; gap: 8px; }
.message-row .mr-icon { color: var(--gem-fg2); flex-shrink: 0; display: inline-flex; }
.message-row .mr-title { font-size: 14px; font-weight: 700; color: var(--gem-fg1); }
.unread-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--gem-accent); flex-shrink: 0; }
.message-row .mr-body {
  margin: 4px 0 4px 26px;
  font-size: 13px; line-height: 19px; color: var(--gem-fg2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.message-row .mr-meta { margin-left: 26px; font-size: 12px; color: var(--gem-fg3); }

.task-card {
  background: var(--gem-surface);
  border: 1px solid var(--gem-border);
  border-radius: var(--gem-radius-md);
  padding: var(--gem-space-3);
}
.task-card .tc-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.task-card .tc-due { font-size: 11px; color: var(--gem-fg3); font-weight: 600; }
.task-card .tc-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--gem-fg1); margin-bottom: 4px; }
.task-card .tc-body { font-size: 12px; line-height: 17px; color: var(--gem-fg2); margin-bottom: 6px; }
.task-card .tc-meta { font-size: 11px; color: var(--gem-fg3); }

/* On page canvas, needs surface-emph — surface-subtle is nearly the same
   grey as the page background. */
.promo-card {
  background: var(--gem-surface-emph);
  border-radius: var(--gem-radius-lg);
  padding: var(--gem-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-3);
}
.promo-card .promo-title { font-size: 16px; font-weight: 700; color: var(--gem-fg1); }
.promo-card .promo-desc { font-size: 13px; color: var(--gem-fg2); }

.dash-search-btn {
  width: 40px; height: 40px;
  border-radius: var(--gem-radius-pill);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--gem-fg2);
  flex-shrink: 0;
}

/* ---------------------------------------------------------------- */
/* Messages / Tasks list rows                                         */
/* ---------------------------------------------------------------- */

.inbox-row {
  display: flex;
  gap: var(--gem-space-3);
  padding: var(--gem-space-4);
  background: var(--gem-surface);
  border: 1px solid var(--gem-border);
  border-radius: var(--gem-radius-lg);
  box-shadow: var(--gem-shadow-xs);
  text-decoration: none;
}
.inbox-row .ir-icon {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--gem-surface-subtle);
  color: var(--gem-fg2);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.inbox-row .ir-main { flex: 1; min-width: 0; }
.inbox-row .ir-top { display: flex; align-items: center; gap: 8px; }
.inbox-row .ir-title { font-size: 14px; font-weight: 700; color: var(--gem-fg1); }
.inbox-row .ir-body {
  margin: 4px 0 8px;
  font-size: 13px; line-height: 19px; color: var(--gem-fg2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.inbox-row .ir-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--gem-fg3); }
.inbox-row .ir-tag {
  display: inline-flex; align-items: center;
  border: 1px solid var(--gem-border);
  border-radius: var(--gem-radius-pill);
  padding: 2px 8px;
  font-size: 11px; font-weight: 600; color: var(--gem-fg2);
}
.inbox-row .ir-action {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--gem-warning);
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
}

/* ---------------------------------------------------------------- */
/* Message thread                                                     */
/* ---------------------------------------------------------------- */

.thread-meta-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--gem-fg2);
}
.thread-meta-row b { color: var(--gem-fg1); font-weight: 700; }

.thread-list { display: flex; flex-direction: column; gap: var(--gem-space-2); }

.thread-item { display: flex; flex-direction: column; max-width: 88%; }
.thread-item.out { align-self: flex-end; align-items: flex-end; }
.thread-item.in { align-self: flex-start; align-items: flex-start; }

.thread-bubble {
  border-radius: var(--gem-radius-lg);
  padding: var(--gem-space-4);
  font-size: 14px;
  line-height: 20px;
}
.thread-item.in .thread-bubble {
  background: var(--gem-surface);
  border: 1px solid var(--gem-border);
  color: var(--gem-fg1);
  border-bottom-left-radius: 4px;
}
.thread-item.out .thread-bubble {
  background: var(--gem-btn-primary);
  color: var(--gem-on-dark);
  border-bottom-right-radius: 4px;
}
.thread-bubble p { margin: 0 0 10px; }
.thread-bubble p:last-child { margin-bottom: 0; }

.thread-timemeta {
  margin-top: 6px;
  font-size: 12px;
  color: var(--gem-fg3);
  display: flex; align-items: center; gap: 6px;
}

/* Nested panels inside an incoming bubble (required docs, tx list) */
.thread-panel {
  background: var(--gem-surface-subtle);
  border-radius: var(--gem-radius-md);
  padding: var(--gem-space-3);
  margin-top: 4px;
}
.thread-panel .tp-title { font-size: 13px; font-weight: 700; color: var(--gem-fg1); margin-bottom: 8px; }
.thread-panel .bullet-list li { color: var(--gem-fg1); }

.thread-panel .tx-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 8px;
  background: var(--gem-surface);
  border-radius: var(--gem-radius-sm);
  padding: 10px 12px;
  margin-bottom: 6px;
  font-size: 13px;
}
.thread-panel .tx-row:last-child { margin-bottom: 0; }
.thread-panel .tx-name { font-weight: 700; color: var(--gem-fg1); }
.thread-panel .tx-sub { color: var(--gem-fg3); font-size: 12px; }
.thread-panel .tx-amount { font-weight: 700; color: var(--gem-fg1); font-variant-numeric: tabular-nums; flex-shrink: 0; }

.file-chip {
  display: flex; align-items: center; gap: 10px;
  background: var(--gem-surface-subtle);
  border-radius: var(--gem-radius-md);
  padding: var(--gem-space-3);
  margin-top: 4px;
}
.file-chip .fc-icon { color: var(--gem-fg2); flex-shrink: 0; }
.file-chip .fc-name { font-size: 13px; font-weight: 700; color: var(--gem-fg1); }
.file-chip .fc-size { font-size: 12px; color: var(--gem-fg3); }

/* Composer bar */
.composer {
  display: flex;
  align-items: flex-end;
  gap: var(--gem-space-2);
  position: sticky;
  /* Clears the fixed bottom-nav bar below it (~70px incl. its own
     padding) — bottom:0 here would let the composer slide under/over
     the nav once a thread is long enough to scroll. */
  bottom: calc(64px + env(safe-area-inset-bottom));
  background: var(--gem-bg);
  padding-top: var(--gem-space-2);
  padding-bottom: var(--gem-space-2);
  margin-bottom: calc(-1 * var(--gem-space-2));
}
.composer .attach-btn {
  width: 40px; height: 40px;
  border-radius: var(--gem-radius-sm);
  background: var(--gem-surface-emph);
  color: var(--gem-fg2);
  border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.composer .composer-input {
  flex: 1;
  min-height: 40px;
  border-radius: var(--gem-radius-sm);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface);
  box-shadow: var(--gem-shadow-xs);
  padding: 10px 16px;
  font-size: 14px;
  font-family: var(--gem-font);
  color: var(--gem-fg1);
  outline: none;
}
.composer .composer-input:focus { border: 2px solid var(--gem-ink); padding: 9px 15px; }
.composer .composer-input::placeholder { color: var(--gem-fg3); }
.composer .send-btn {
  width: 40px; height: 40px;
  border-radius: var(--gem-radius-pill);
  background: var(--gem-btn-primary);
  color: var(--gem-on-dark);
  border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------- */
/* Accounts                                                            */
/* ---------------------------------------------------------------- */

.wallet-card {
  background: var(--gem-surface);
  border: 1px solid var(--gem-border);
  border-radius: var(--gem-radius-lg);
  box-shadow: var(--gem-shadow-xs);
  overflow: hidden;
}

.wallet-header {
  display: flex;
  align-items: center;
  gap: var(--gem-space-3);
  padding: var(--gem-space-4);
  cursor: pointer;
  background: none;
  border: 0;
  width: 100%;
  text-align: left;
}
.wallet-header .wh-avatar {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--gem-surface-subtle);
  color: var(--gem-fg2);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.wallet-header .wh-main { flex: 1; min-width: 0; }
.wallet-header .wh-name { font-size: 14px; font-weight: 700; color: var(--gem-fg1); }
.wallet-header .wh-balance { text-align: right; flex-shrink: 0; }
.wallet-header .wh-amount { font-family: var(--gem-font-num); font-weight: 700; font-size: 16px; color: var(--gem-ink-strong); font-variant-numeric: tabular-nums; }
.wallet-header .wh-label { font-size: 11px; color: var(--gem-fg3); margin-top: 2px; }
.wallet-header .wh-chev { color: var(--gem-fg3); flex-shrink: 0; transition: transform .15s; }
.wallet-header[aria-expanded="true"] .wh-chev { transform: rotate(180deg); }

.id-chip {
  display: inline-flex; align-items: center;
  border: 1px solid var(--gem-border);
  border-radius: var(--gem-radius-pill);
  padding: 2px 8px;
  font-size: 11px; font-weight: 600; color: var(--gem-fg2);
  font-family: var(--gem-font);
}

.wallet-body {
  padding: 0 var(--gem-space-4) var(--gem-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-3);
}

.add-currency-card {
  height: 56px;
  border-radius: var(--gem-radius-lg);
  border: 1px dashed var(--gem-border);
  background: transparent;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--gem-fg1);
  font-size: 14px; font-weight: 700;
  cursor: pointer;
  width: 100%;
}

/* Copyable detail row (Beneficiary, IBAN, SWIFT, Bank address...) */
.copy-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gem-space-3);
  padding: var(--gem-space-3) 0;
  border-top: 1px solid var(--gem-border);
}
.copy-row:first-child { border-top: 0; }
.copy-row .cr-label { font-size: 12px; color: var(--gem-fg2); margin-bottom: 2px; }
.copy-row .cr-value { font-size: 14px; font-weight: 700; color: var(--gem-fg1); }
.copy-row .cr-btn { color: var(--gem-fg3); background: none; border: 0; flex-shrink: 0; display: inline-flex; padding: 4px; margin-top: 1px; cursor: pointer; }

/* A fixed set of primary actions (New payment / Convert / Statements, etc.)
   not a browsable carousel — wrap instead of scroll-and-clip so nothing
   gets silently cut off with no scroll affordance to hint at it. */
.pill-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gem-space-2);
}

/* Success state (Share your link) */
.success-icon {
  width: 56px; height: 56px;
  border-radius: 999px;
  background: var(--gem-success-soft);
  color: var(--gem-success);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--gem-space-3);
}
.sheet-title.center { text-align: center; }

.link-panel {
  background: var(--gem-surface-subtle);
  border-radius: var(--gem-radius-md);
  padding: var(--gem-space-4);
  text-align: center;
}
.link-panel .lp-label { font-size: 12px; color: var(--gem-fg2); margin-bottom: 6px; }
.link-panel .lp-link { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--gem-accent); word-break: break-all; }
.link-panel .lp-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--gem-fg3); }

/* ---------------------------------------------------------------- */
/* Customize dashboard — reorder / hide sections                      */
/* ---------------------------------------------------------------- */

.customize-list {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-2);
}

.customize-row {
  display: flex;
  align-items: center;
  gap: var(--gem-space-3);
  background: var(--gem-surface);
  border: 1px solid var(--gem-border);
  border-radius: var(--gem-radius-md);
  padding: 10px var(--gem-space-3);
  user-select: none;
}
.customize-row.locked {
  background: var(--gem-surface-subtle);
  border-style: dashed;
}
.customize-row .cz-lock-icon { color: var(--gem-fg3); flex-shrink: 0; }
.customize-row .cz-label { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: var(--gem-fg1); }
.customize-row .cz-locked-label { font-size: 12px; color: var(--gem-fg3); flex-shrink: 0; }

.customize-row .drag-handle {
  color: var(--gem-fg3);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  margin: -6px;
  touch-action: none;
  cursor: grab;
  transform: rotate(90deg);
}
.customize-row.dragging {
  opacity: 0.9;
  box-shadow: var(--gem-shadow-md);
  border-color: var(--gem-border-hover, var(--gem-border));
  position: relative;
  z-index: 5;
}
.customize-row .drag-handle:active { cursor: grabbing; }

/* Tab panel content — was unstyled, leaving zero gap between its
   children (e.g. a search row touching the list right below it).
   Match .content's own vertical rhythm. */
.tab-panel {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-4);
}

/* Dashboard section container — added for the Customize-dashboard
   feature, wrapping what used to be .content's direct children. It
   needs its own vertical rhythm or every section touches the next
   with zero gap. */
#dash-sections {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-4);
}

/* ---------------------------------------------------------------- */
/* Payments                                                            */
/* ---------------------------------------------------------------- */

/* Payment services — horizontal pill selector (desktop's boxed list
   collapses to a scroll row on mobile, same idea as other tab rows). */
.services-scroll {
  display: flex;
  gap: var(--gem-space-2);
  overflow-x: auto;
  scrollbar-width: none;
  margin: 0 calc(var(--gem-space-4) * -1);
  padding: 2px var(--gem-space-4) 4px;
}
.services-scroll::-webkit-scrollbar { display: none; }
.service-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 var(--gem-space-4);
  border-radius: var(--gem-radius-pill);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface);
  color: var(--gem-fg2);
  font-family: var(--gem-font);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.service-pill.active { border-color: var(--gem-ink); color: var(--gem-fg1); }
.service-pill .icon { color: inherit; }

/* Accordion steps */
.accordion-step {
  background: var(--gem-surface);
  border: 1px solid var(--gem-border);
  border-radius: var(--gem-radius-lg);
  box-shadow: var(--gem-shadow-xs);
  overflow: hidden;
}
.step-header {
  display: flex;
  align-items: center;
  gap: var(--gem-space-3);
  width: 100%;
  padding: var(--gem-space-4);
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
}
.step-header .step-name {
  flex: 1;
  font-size: var(--gem-h5-size);
  font-weight: 700;
  color: var(--gem-fg3);
}
.accordion-step.active .step-header .step-name,
.accordion-step.done .step-header .step-name { color: var(--gem-fg1); }
.step-header .step-status {
  width: 24px; height: 24px;
  border-radius: 999px;
  border: 2px solid var(--gem-border);
  flex-shrink: 0;
}
.accordion-step.done .step-header .step-status {
  border: 0;
  background: var(--gem-success-soft);
  color: var(--gem-success);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* The active step shows no indicator at all — only completed steps (checkmark)
   and upcoming ones (empty circle) get one. */
.accordion-step.active:not(.done) .step-header .step-status {
  display: none;
}
.step-body {
  padding: 0 var(--gem-space-4) var(--gem-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-4);
}

/* Fee breakdown — on page canvas, needs surface-emph */
.fee-panel {
  background: var(--gem-surface-emph);
  border-radius: var(--gem-radius-md);
  display: flex;
}
.fee-panel > div { flex: 1; padding: var(--gem-space-3) var(--gem-space-4); }
.fee-panel > div:not(:last-child) { border-right: 1px solid var(--gem-border); }
.fee-panel .fp-label { font-size: 12px; color: var(--gem-fg2); margin-bottom: 2px; }
.fee-panel .fp-value { font-family: var(--gem-font-num); font-weight: 700; font-size: 14px; color: var(--gem-fg1); font-variant-numeric: tabular-nums; }

/* Amount input with trailing currency */
.amount-field {
  display: flex;
  align-items: center;
  height: 40px;
  border-radius: var(--gem-radius-sm);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface);
  box-shadow: var(--gem-shadow-xs);
  padding: 0 var(--gem-space-4);
}
.amount-field:focus-within { border: 2px solid var(--gem-ink); padding: 0 15px; }
.amount-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 14px;
  font-family: var(--gem-font-num);
  color: var(--gem-fg1);
  font-variant-numeric: tabular-nums;
}
.amount-field .af-ccy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--gem-fg1);
  flex-shrink: 0;
  padding-left: var(--gem-space-3);
  border-left: 1px solid var(--gem-border);
  margin-left: var(--gem-space-3);
}

/* Contact rows (Recents) */
.contact-row {
  display: flex;
  align-items: center;
  gap: var(--gem-space-3);
  width: 100%;
  padding: var(--gem-space-3) 0;
  border-top: 1px solid var(--gem-border);
  background: none;
  border-left: 0; border-right: 0; border-bottom: 0;
  cursor: pointer;
  text-align: left;
}
.contact-row:first-child { border-top: 0; }
.contact-row .cr-avatar {
  width: 40px; height: 40px;
  border-radius: 999px;
  background: var(--gem-fg2);
  color: var(--gem-on-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--gem-font);
  flex-shrink: 0;
}
.contact-row .cr-name { font-size: 14px; font-weight: 700; color: var(--gem-fg1); }
.contact-row .cr-meta { font-size: 12px; color: var(--gem-fg2); margin-top: 1px; }

/* Checkbox */
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.checkbox-row .cb-box {
  width: 20px; height: 20px;
  border-radius: 5px;
  border: 2px solid var(--gem-border);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gem-on-dark);
}
.checkbox-row.checked .cb-box { background: var(--gem-btn-primary); border-color: var(--gem-btn-primary); }
.checkbox-row .cb-label { font-size: 14px; font-weight: 700; color: var(--gem-fg1); }

/* Bulk payments: mandatory-fields info card — on page canvas, needs surface-emph */
.info-card {
  background: var(--gem-surface-emph);
  border-radius: var(--gem-radius-md);
  padding: var(--gem-space-4);
}
.info-card .ic-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gem-space-3);
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.info-card .ic-title { font-size: 14px; font-weight: 700; color: var(--gem-fg1); }
.info-card .ic-chev { color: var(--gem-fg3); flex-shrink: 0; transition: transform 0.15s ease; }
.info-card.open .ic-chev { transform: rotate(180deg); }
.info-card .ic-content {
  display: flex;
  flex-direction: column;
  gap: var(--gem-space-2);
  margin-top: var(--gem-space-2);
}
.info-card .ic-body { font-size: 13px; line-height: 18px; color: var(--gem-fg2); }
.info-card .btn { align-self: flex-start; margin-top: var(--gem-space-1); }
.info-card .ic-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--gem-fg2);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--gem-font);
  text-decoration: underline dotted var(--gem-fg3);
  text-underline-offset: 3px;
}
.info-card .ic-more .icon { color: var(--gem-fg3); flex-shrink: 0; }

/* Small hint line under a field (e.g. file-format help text) */
.field-hint {
  display: flex;
  gap: 6px;
  margin-top: var(--gem-space-2);
  font-size: 12px;
  line-height: 16px;
  color: var(--gem-fg2);
}
.field-hint .icon { flex-shrink: 0; margin-top: 1px; color: var(--gem-fg3); }

/* Uploaded-file chip (replaces the dropzone once a file is "chosen") */
.file-chip {
  height: 40px;
  border-radius: var(--gem-radius-sm);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gem-space-2) 0 var(--gem-space-4);
  font-size: 14px;
  font-weight: 600;
  color: var(--gem-fg1);
}
.file-chip .fc-remove {
  width: 28px; height: 28px;
  flex-shrink: 0;
  border: 0;
  border-radius: var(--gem-radius-sm);
  background: none;
  color: var(--gem-fg3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* Payment-summary status legend (row of count chips) */
.status-legend { display: flex; align-items: center; gap: var(--gem-space-2); flex-wrap: wrap; }

/* Payment-summary payee row (mobile card equivalent of the desktop table row).
   One tidy top line — name+edit on the left, amount+status+remove on the
   right, all the same 20px/14px icon scale — with meta text flowing below. */
.payee-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--gem-space-3) 0;
  border-top: 1px solid var(--gem-border);
}
.payee-row:first-child { border-top: 0; }
.payee-row .pr-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gem-space-3);
}
.payee-row .pr-name-group { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; }
.payee-row .pr-name { font-size: 14px; font-weight: 700; color: var(--gem-fg1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.payee-row .pr-name-input {
  font-size: 14px; font-weight: 700; color: var(--gem-fg1); font-family: var(--gem-font);
  border: 2px solid var(--gem-ink); border-radius: var(--gem-radius-xs); padding: 1px 5px; flex: 1; min-width: 0;
}
.payee-row .pr-edit {
  width: 20px; height: 20px;
  flex-shrink: 0;
  border: 0;
  background: none;
  color: var(--gem-fg3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.payee-row .pr-amount-group { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.payee-row .pr-amount { font-family: var(--gem-font-num); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px; color: var(--gem-fg1); white-space: nowrap; }
.payee-row .pr-status {
  width: 20px; height: 20px;
  border-radius: 999px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.payee-row .pr-status.success  { background: var(--gem-success-soft);  color: var(--gem-success); }
.payee-row .pr-status.critical { background: var(--gem-critical-soft); color: var(--gem-critical); }
.payee-row .pr-status.warning  { background: var(--gem-warning-soft);  color: var(--gem-warning); }
.payee-row .pr-remove {
  width: 20px; height: 20px;
  flex-shrink: 0;
  border: 0;
  background: none;
  color: var(--gem-fg3);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.payee-row .pr-meta { font-size: 12px; color: var(--gem-fg2); }
.payee-row .pr-fee { font-size: 12px; color: var(--gem-fg2); font-variant-numeric: tabular-nums; }

/* One-time-code entry (bulk payment 2FA) */
.otp-row { display: flex; gap: 8px; justify-content: center; }
.otp-box {
  width: 44px; height: 52px;
  text-align: center;
  font-size: 20px;
  font-family: var(--gem-font-num);
  border: 1px solid var(--gem-border);
  border-radius: var(--gem-radius-sm);
  background: var(--gem-surface);
  color: var(--gem-fg1);
  outline: none;
}
.otp-box:focus { border: 2px solid var(--gem-ink); }

/* Radio row (single-select — e.g. Accounting > Xero sync-start date) */
.radio-row { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; padding: var(--gem-space-3) 0; }
.radio-row .rb-circle {
  width: 20px; height: 20px;
  border-radius: 999px;
  border: 2px solid var(--gem-border);
  flex-shrink: 0;
  margin-top: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gem-on-dark);
}
.radio-row.checked .rb-circle { background: var(--gem-btn-primary); border-color: var(--gem-btn-primary); }
.radio-row .rb-label { font-size: 14px; font-weight: 700; color: var(--gem-fg1); }

/* Currency-account option — a bordered pill row, green border + check-square
   glyph when selected (matches the reference exactly; unlike a generic
   selection control this specific toggle means "included in sync", so the
   success color is semantically apt here, not just decorative). */
.currency-option {
  display: flex;
  align-items: center;
  gap: var(--gem-space-3);
  border: 2px solid var(--gem-border);
  border-radius: var(--gem-radius-pill);
  background: var(--gem-surface);
  padding: var(--gem-space-3) var(--gem-space-4);
  cursor: pointer;
}
.currency-option + .currency-option { margin-top: var(--gem-space-2); }
.currency-option .co-label { flex: 1; min-width: 0; font-size: 15px; font-weight: 700; color: var(--gem-fg1); }
.currency-option .co-check { color: var(--gem-fg3); flex-shrink: 0; display: flex; }
.currency-option .flag-dot { width: 32px; height: 32px; }
.currency-option.checked { border-color: var(--gem-success); }
.currency-option.checked .co-check { color: var(--gem-success); }

/* Small circular icon avatar for a card header (e.g. account name + icon) */
.avatar-icon {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--gem-surface-subtle);
  color: var(--gem-fg2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Success banner (e.g. "Connected to X") */
.connect-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: var(--gem-space-3) var(--gem-space-4);
  border-radius: var(--gem-radius-md);
  background: var(--gem-success-soft);
  color: var(--gem-success);
  font-size: 14px;
  font-weight: 700;
}

/* White label — status callout (title + body, both tinted) */
.callout { border-radius: var(--gem-radius-md); padding: var(--gem-space-4); }
.callout-title { font-size: 14px; font-weight: 700; margin: 0; }
.callout-body { font-size: 13px; line-height: 18px; margin-top: 2px; }
.callout-info { background: var(--gem-info-soft); }
.callout-info .callout-title, .callout-info .callout-body { color: var(--gem-info); }
.callout-success { background: var(--gem-success-soft); }
.callout-success .callout-title { color: var(--gem-success); }
.callout-success .callout-body { color: var(--gem-fg2); }

/* Domain status indicator (icon + label, color varies by state) */
.status-text { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; }
.status-text.neutral { color: var(--gem-fg2); }
.status-text.pending { color: var(--gem-info); }
.status-text.success { color: var(--gem-success); }
.status-text .spin { animation: gem-spin 1.4s linear infinite; }
@keyframes gem-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Read-only DNS record field — value can be long, wraps instead of truncating */
.dns-field {
  display: flex;
  align-items: flex-start;
  gap: var(--gem-space-2);
  border-radius: var(--gem-radius-sm);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface-subtle);
  padding: var(--gem-space-3) var(--gem-space-3) var(--gem-space-3) var(--gem-space-4);
}
.dns-field .df-value {
  flex: 1;
  min-width: 0;
  font-family: var(--gem-font-num);
  font-size: 13px;
  color: var(--gem-fg1);
  word-break: break-all;
  padding-top: 1px;
}
.dns-field .df-copy {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border: 0;
  background: none;
  color: var(--gem-fg3);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.dns-field .df-copy.copied { color: var(--gem-success); }

/* Color picker field: native swatch (opens the OS picker) + hex text input */
.color-field {
  display: flex;
  align-items: center;
  gap: var(--gem-space-3);
  height: 40px;
  border-radius: var(--gem-radius-sm);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface);
  box-shadow: var(--gem-shadow-xs);
  padding: 0 var(--gem-space-4);
}
.color-field:focus-within { border: 2px solid var(--gem-ink); padding: 0 15px; }
.color-field .cf-swatch {
  width: 22px; height: 22px;
  border-radius: 999px;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,.08);
  padding: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: none;
}
.color-field .cf-swatch::-webkit-color-swatch-wrapper { padding: 0; }
.color-field .cf-swatch::-webkit-color-swatch { border: 0; border-radius: 999px; }
.color-field .cf-swatch::-moz-color-swatch { border: 0; border-radius: 999px; }
.color-field input[type="text"] {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-family: var(--gem-font-num); font-size: 14px; color: var(--gem-fg1);
}

/* File picker: a small button + the chosen filename (native <input type=file>) */
.file-picker { display: flex; align-items: center; gap: var(--gem-space-3); flex-wrap: wrap; }
.file-picker .fp-filename { font-size: 13px; color: var(--gem-fg3); }

/* Bank-card / document branding preview */
.doc-preview {
  border-radius: var(--gem-radius-md);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface);
  padding: var(--gem-space-4);
  max-width: 260px;
}
.doc-preview .dp-brand { display: flex; align-items: center; gap: 8px; }
.doc-preview .dp-logo { width: 22px; height: 22px; border-radius: 999px; flex-shrink: 0; }
.doc-preview .dp-brand-name { font-size: 12px; font-weight: 700; color: var(--gem-fg1); line-height: 13px; }
.doc-preview .dp-bar { height: 8px; border-radius: var(--gem-radius-xs); background: var(--gem-surface-emph); }

/* More menu — no title, so give it its own top spacing; bottom padding
   doubled vs. the base sheet since it's a big tappable grid, not a list. */
#sheet-more { padding-top: var(--gem-space-4); padding-bottom: calc(var(--gem-space-5) * 2 + env(safe-area-inset-bottom)); }

/* Documents — one bordered card per document (icon + title + download). */
.doc-card {
  background: var(--gem-surface);
  border: 1px solid var(--gem-border);
  border-radius: var(--gem-radius-lg);
  box-shadow: var(--gem-shadow-xs);
  padding: var(--gem-space-4);
}
.doc-card .doc-top { display: flex; align-items: center; gap: var(--gem-space-3); }
.doc-card .doc-top > .icon { color: var(--gem-fg2); flex-shrink: 0; }
.doc-card .doc-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: var(--gem-fg1); }
.doc-card .doc-download {
  width: 32px; height: 32px;
  border-radius: var(--gem-radius-sm);
  border: 1px solid var(--gem-border);
  background: var(--gem-surface);
  color: var(--gem-fg2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}
.doc-card .divider { margin: var(--gem-space-3) 0; }
.doc-card .doc-meta { font-size: 13px; color: var(--gem-fg2); display: flex; flex-direction: column; gap: 2px; }
.doc-group-label { font-size: 13px; font-weight: 700; color: var(--gem-fg3); }