/*
 * The frame of a shop's public website (the shop-site design, Harshal approved 5 Oct 2026; brief
 * outside work/lr/public-site, guide §3 and §5): the header with the shop's mark, name and town,
 * the top menu and one Login button; at 1040 px and under the menu button and the bar along the
 * bottom (Live, Charts, Sankalp, Jewellery, More); More as a sheet; the footer; and the floating
 * Call and WhatsApp. On the board (public/index.html), the Sankalp pages, the jewellery pages and
 * the shop's not-found page alike; loaded last, so it wins over the older board styles.
 *
 * The shop's own ten colours (--client-*, src/tenant-theme.js), light only. The meaning colours are
 * fixed for every shop and never replaced by a palette: success #0C6E4C, warning #8A5700, danger
 * #A63D40, Call #15803D, WhatsApp #075E54. Focus shows inside a control's own border or fill, never
 * as an outer ring. A 1280 px box with 24 px sides (16 px on phones).
 */

body.client-board {
  --ss-success: #0c6e4c;
  --ss-warning: #8a5700;
  --ss-danger: #a63d40;
  --ss-call: #15803d;
  --ss-whatsapp: #075e54;
  --ss-side: max(24px, calc((100% - 1232px) / 2));
}

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

body.client-board .client-header {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 72px;
  min-height: 72px;
  padding: 0 var(--ss-side);
  background: var(--client-surface);
  border-bottom: 1px solid var(--client-line);
  position: sticky;
  top: 0;
  z-index: 30;
  box-shadow: none;
}

body.client-board .client-header .client-brand {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  column-gap: 12px;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 340px;
  position: static;
  transform: none;
  text-align: left;
  font-size: 17px;
  color: var(--client-ink);
  text-decoration: none;
  letter-spacing: normal;
  text-transform: none;
}
body.client-board .client-header .client-brand:hover {
  color: var(--client-ink);
}
body.client-board .client-header .client-brand img {
  grid-row: 1 / span 2;
  max-height: 44px;
  width: auto;
}
body.client-board .client-header .client-brand__mark {
  grid-row: 1 / span 2;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--client-primary);
  color: var(--client-on-primary);
  display: grid;
  place-items: center;
  font:
    700 16px/1 Inter,
    system-ui,
    sans-serif;
  letter-spacing: 0.04em;
}
body.client-board .client-header .client-brand__mark:empty,
body.client-board .client-header .client-brand img:not([hidden]) + .client-brand__mark {
  display: none;
}
body.client-board .client-header .client-brand__name {
  grid-column: 2;
  margin: 0;
  font:
    700 17px/1.2 Inter,
    system-ui,
    sans-serif;
  letter-spacing: normal;
  text-transform: none;
  color: var(--client-ink);
  overflow-wrap: anywhere;
}
body.client-board .client-header .client-brand__place {
  grid-column: 2;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.3;
  color: var(--client-muted);
}
body.client-board .client-header .client-brand__place[hidden] {
  display: none;
}
body.client-board .client-header .client-brand--logo-only .client-brand__name,
body.client-board .client-header .client-brand--logo-only .client-brand__place {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The top menu: the page on screen in the shop's colour, with a 3 px bar under it. */
body.client-board .client-header .dashboard-nav {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  align-self: stretch;
  flex: 0 1 auto;
  gap: 2px;
  margin: 0 0 0 8px;
  padding: 0;
  position: static;
  background: none;
  border: 0;
  box-shadow: none;
  width: auto;
  height: auto;
}
body.client-board .client-header .dashboard-nav a {
  display: flex;
  align-items: center;
  min-height: 0;
  height: auto;
  padding: 0 12px;
  border: 2px solid transparent;
  border-bottom: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--client-ink);
  font:
    500 15px/1.2 Inter,
    system-ui,
    sans-serif;
  letter-spacing: normal;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
}
body.client-board .client-header .dashboard-nav a:hover {
  color: var(--client-primary);
  background: none;
}
body.client-board .client-header .dashboard-nav a:focus-visible,
body.client-board .client-header .dashboard-nav a[aria-current='page']:focus-visible {
  outline: none;
  border-color: var(--client-primary) !important;
}
/* !important: the scheme pages' stylesheet fills every [aria-current=page] with !important. */
body.client-board .client-header .dashboard-nav a[aria-current='page'] {
  font-weight: 700;
  color: var(--client-primary) !important;
  background: none !important;
  border-color: transparent !important;
  border-bottom: 0;
  box-shadow: inset 0 -3px 0 var(--client-primary) !important;
}
body.client-board .client-header .dashboard-nav a:not([data-tab-primary]),
body.client-board .client-header .dashboard-nav svg {
  display: none;
}

/* The round buttons: the phone's menu button and Login. */
body.client-board .client-header .tab-menu-btn,
body.client-board .client-header .account-btn {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--client-line);
  background: var(--client-surface);
  color: var(--client-ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: none;
}
body.client-board .client-header .tab-menu-btn:hover,
body.client-board .client-header .account-btn:hover {
  background: var(--client-surface-alt);
  color: var(--client-ink);
}
body.client-board .client-header .tab-menu-btn:focus-visible,
body.client-board .client-header .account-btn:focus-visible {
  outline: none;
  box-shadow: none;
  border-color: var(--client-primary);
}
body.client-board .client-header :is(.tab-menu-btn, .account-btn) svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.client-board .client-header .account-btn {
  margin-left: auto;
}
body.client-board .client-header .account-btn[hidden],
body.client-board .client-header .tab-menu-btn {
  display: none;
}

/* ---- the phone's bar ------------------------------------------------------------------- */

body.client-board .site-bar {
  display: none;
}
body.client-board .site-bar svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- More --------------------------------------------------------------------------------- */

body.client-board .tab-menu {
  width: min(520px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  height: auto;
  margin: auto;
  inset: 0;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--client-surface);
  color: var(--client-ink);
  box-shadow: 0 8px 24px rgb(20 33 61 / 16%);
  overflow: auto;
  transform: none;
  animation: none;
}
body.client-board .tab-menu::backdrop {
  background: rgb(17 17 17 / 50%);
}
body.client-board .tab-menu__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 20px 22px 4px;
  border: 0;
}
body.client-board .tab-menu__title {
  margin: 0;
  font:
    700 19px/1.3 Inter,
    system-ui,
    sans-serif;
  letter-spacing: normal;
  text-transform: none;
  color: var(--client-ink);
}
body.client-board .tab-menu__close {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 999px;
  border: 1px solid var(--client-line);
  background: var(--client-surface);
  color: var(--client-ink);
  display: grid;
  place-items: center;
  cursor: pointer;
}
body.client-board .tab-menu__close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
body.client-board .tab-menu__close:focus-visible {
  outline: none;
  box-shadow: none;
  border-color: var(--client-primary);
}
body.client-board .tab-menu__list {
  display: grid;
  gap: 0;
  padding: 6px 22px 20px;
}
body.client-board .tab-menu__list .tab-menu__group {
  margin: 0;
  padding: 12px 10px 4px;
  font:
    600 11px/1.4 Inter,
    system-ui,
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--client-muted);
  border: 0;
}
body.client-board .tab-menu__list a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 0 10px;
  border-radius: 8px;
  border: 2px solid transparent;
  background: none;
  color: var(--client-ink);
  font:
    500 16px/1.3 Inter,
    system-ui,
    sans-serif;
  text-decoration: none;
}
body.client-board .tab-menu__list a:hover {
  background: var(--client-surface-alt);
  color: var(--client-ink);
}
body.client-board .tab-menu__list a:focus-visible {
  outline: none;
  border-color: var(--client-primary);
}
body.client-board .tab-menu__list a[aria-current] {
  background: var(--client-primary);
  color: var(--client-on-primary);
}
body.client-board .tab-menu__list a[aria-current]:focus-visible {
  border-color: var(--client-on-primary);
}
body.client-board .tab-menu__list svg {
  display: none;
}
body.client-board .tab-menu .client-menu-actions {
  padding: 0 22px 20px;
}

/* ---- footer ------------------------------------------------------------------------------- */

body.client-board .site-foot {
  border-top: 1px solid var(--client-line);
  background: var(--client-surface);
  color: var(--client-ink);
}
body.client-board .site-foot__in {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 24px 96px;
  display: grid;
  gap: 14px;
}
body.client-board .site-foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
}
body.client-board .site-foot__links a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--client-ink);
  font-size: 14px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
body.client-board .site-foot__links a:hover {
  color: var(--client-primary);
  text-decoration: underline;
}
body.client-board .site-foot__links a:focus-visible {
  outline: none;
  border-bottom-color: var(--client-primary);
}
body.client-board .site-foot .site-credits {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: 0;
  padding: 0;
  max-width: none;
  border: 0;
  background: none;
  text-align: left;
  font-size: 13px;
  color: var(--client-muted);
}
body.client-board .site-foot .site-credits p {
  margin: 0;
  font-size: 13px;
  color: var(--client-muted);
}
body.client-board .site-foot .site-credits a {
  color: var(--client-muted);
}
/* "Powered by Bundiwal Tech" on Live rates and the TV only (the design, §3). */
body.client-board.dashboard:not([data-active-tab='live']) [data-credit-line] {
  display: none;
}

/* ---- floating Call and WhatsApp ------------------------------------------------------- */

body.client-board .quick-contact {
  position: fixed;
  bottom: 24px;
  z-index: 25;
  width: 56px;
  height: 56px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  display: grid;
  place-items: center;
  color: #ffffff;
  box-shadow: 0 8px 24px rgb(20 33 61 / 24%);
  text-decoration: none;
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
body.client-board .quick-contact[hidden] {
  display: none;
}
body.client-board .quick-contact .quick-contact__icon {
  width: 24px;
  height: 24px;
  flex: none;
  fill: currentColor;
}
body.client-board .quick-contact--call {
  left: 24px;
  background: var(--ss-call);
}
/* Outside the shop's hours: greyed and disabled, saying the hours (site-fab.js). */
body.client-board .quick-contact--call.is-closed {
  background: #8a909b;
  box-shadow: none;
  cursor: not-allowed;
}
body.client-board .quick-contact--whatsapp {
  right: 24px;
  background: var(--ss-whatsapp);
}
body.client-board .quick-contact:hover {
  color: #ffffff;
  transform: none;
}
body.client-board .quick-contact:focus-visible {
  outline: none;
  border-color: #ffffff;
}
:fullscreen body.client-board .quick-contact,
body.client-board[data-wall='true'] .quick-contact,
body.client-board[data-wall='true'] .site-bar,
body.client-board[data-wall='true'] .site-foot__links {
  display: none !important;
}
@media print {
  body.client-board .quick-contact,
  body.client-board .site-bar {
    display: none;
  }
}

/* ---- 1040 px and under: menu button, the bar, More as a sheet --------------------------- */

@media (max-width: 1040px) {
  body.client-board .client-header .dashboard-nav {
    display: none !important;
  }
  body.client-board:not([data-wall='true']) .client-header .tab-menu-btn {
    display: grid;
  }
  body.client-board .site-bar {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 24;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: var(--client-surface);
    border-top: 1px solid var(--client-line);
  }
  body.client-board .site-bar a,
  body.client-board .site-bar button {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 2px;
    min-height: 56px;
    padding: 6px 2px;
    border-radius: 10px;
    border: 2px solid transparent;
    background: none;
    color: var(--client-muted);
    font:
      600 12px/1.2 Inter,
      system-ui,
      sans-serif;
    text-decoration: none;
    cursor: pointer;
    min-width: 0;
  }
  body.client-board .site-bar span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.client-board .site-bar a[aria-current='page'],
  body.client-board .site-bar:not(:has(a[aria-current='page'])) .site-bar__more {
    background: var(--client-primary);
    color: var(--client-on-primary);
  }
  body.client-board .site-bar a:focus-visible,
  body.client-board .site-bar button:focus-visible {
    outline: none;
    border-color: var(--client-primary);
  }
  body.client-board .site-bar a[aria-current='page']:focus-visible,
  body.client-board .site-bar:not(:has(a[aria-current='page'])) .site-bar__more:focus-visible {
    border-color: var(--client-on-primary);
  }
  body.client-board .quick-contact {
    bottom: calc(88px + env(safe-area-inset-bottom));
    width: 52px;
    height: 52px;
  }
  body.client-board .site-foot__in {
    padding-bottom: 160px;
  }
}

@media (max-width: 640px) {
  body.client-board {
    --ss-side: 12px;
  }
  body.client-board .client-header {
    height: 64px;
    min-height: 64px;
    gap: 10px;
  }
  body.client-board .client-header .client-brand {
    flex: 1 1 auto;
  }
  body.client-board .client-header .client-brand__mark {
    width: 40px;
    height: 40px;
  }
  body.client-board .client-header .client-brand__name {
    font-size: 16px;
  }
  body.client-board .tab-menu {
    width: 100%;
    max-width: 100%;
    margin: auto 0 0;
    border-radius: 14px 14px 0 0;
    max-height: 92vh;
  }
  body.client-board .quick-contact--call {
    left: 16px;
  }
  body.client-board .quick-contact--whatsapp {
    right: 16px;
  }
  body.client-board .site-foot__in {
    padding: 20px 16px 160px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.client-board .tab-menu {
    animation: none;
  }
}

/* A page still drawing its screen (the Sankalp pages' frame, a catalogue's skeleton) holds the footer
   back, so it never shows under the frame and is then pushed down (test:first-paint). */
body.client-board:has(#main[aria-busy='true']) .site-foot,
body.client-board:has(#cb-app[aria-busy='true']) .site-foot {
  display: none;
}

/* ---- Live rates (the shop-site design, guide §7) -------------------------------------------
   One column of sections: karat cards, Retail, spot, RTGS (no karat cards: spot first); the books
   lay their rows in two columns on a wide screen, gold left and silver right; spot three across. */

body.client-board[data-active-tab='live'] .board-main {
  gap: 20px;
  padding-top: 28px;
}
body.client-board #overview {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
}
body.client-board #overview > * {
  margin: 0;
}
body.client-board #overview > .live-head {
  order: -3;
}
body.client-board[data-cards='none'] #overview > .spot-grid {
  order: -2;
}
body.client-board #overview > .live-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0;
}
body.client-board #overview > .live-head h2 {
  margin: 0;
  font:
    700 26px/1.2 Inter,
    system-ui,
    sans-serif;
  letter-spacing: -0.02em;
  color: var(--client-ink);
}
body.client-board #overview .connection-status[class] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font:
    600 13px/1 Inter,
    system-ui,
    sans-serif;
  background: var(--client-surface-alt);
  color: var(--client-muted);
  white-space: nowrap;
}
body.client-board #overview .connection-status .status-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  color: inherit;
  background: currentColor;
}
body.client-board #overview .connection-status.status-green {
  background: #e6f4ea;
  color: var(--ss-success);
}
body.client-board #overview .connection-status.status-amber {
  background: #fdf1dd;
  color: var(--ss-warning);
}
body.client-board #overview .connection-status.status-red {
  background: #fae8e8;
  color: var(--ss-danger);
}
body.client-board #overview .live-stamp {
  font-size: 14px;
  color: var(--client-muted);
  font-variant-numeric: tabular-nums lining-nums;
}
body.client-board #overview .live-stamp:empty {
  display: none;
}
body.client-board #overview .status-share {
  margin: 0 0 0 auto;
  position: static;
  place-items: initial;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: auto;
  min-height: 36px;
  height: auto;
  padding: 0 12px;
  border-radius: 6px;
  border: 2px solid var(--client-control);
  background: var(--client-surface);
  color: var(--client-ink);
  font:
    600 14px/1 Inter,
    system-ui,
    sans-serif;
  cursor: pointer;
}
body.client-board #overview .status-share:hover {
  background: var(--client-surface-alt);
  color: var(--client-ink);
}
body.client-board #overview .status-share svg {
  width: 16px;
  height: 16px;
}
body.client-board #overview .status-share:focus-visible {
  outline: none;
  box-shadow: none;
  background: var(--client-surface);
  color: var(--client-ink);
  border-color: var(--client-primary);
}
body.client-board[data-retail='off'] #overview .status-share {
  display: none;
}

/* The shop's notice: a band in its colour under the header. */
body.client-board .board-announcement:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px var(--ss-side);
  border: 0;
  border-radius: 0;
  background: var(--client-primary);
  color: var(--client-on-primary);
  font:
    500 14px/1.4 Inter,
    system-ui,
    sans-serif;
}
body.client-board .board-announcement__icon {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
body.client-board .board-announcement__text {
  color: inherit;
}

/* Karat cards in lines of two or three; the note under them. */
body.client-board #karat-cards {
  gap: 12px;
  margin: 0;
}
body.client-board #karat-cards > .client-unit-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 14px;
  border-radius: 10px;
  background: var(--client-surface);
  border: 1px solid var(--client-line);
  border-top: 3px solid var(--client-primary);
  box-shadow: none;
  text-align: left;
}
body.client-board #karat-cards > .client-unit-card::before,
body.client-board #karat-cards > .client-unit-card::after {
  content: none;
}
body.client-board #karat-cards > .client-unit-card > div {
  display: contents;
}
body.client-board #karat-cards > .client-unit-card h3 {
  order: 1;
  margin: 0;
  font:
    600 14px/1.3 Inter,
    system-ui,
    sans-serif;
  color: var(--client-ink);
  letter-spacing: normal;
  text-transform: none;
}
body.client-board #karat-cards > .client-unit-card strong {
  order: 2;
  margin: 4px 0 2px;
  font:
    700 24px/1.2 Inter,
    system-ui,
    sans-serif;
  letter-spacing: -0.01em;
  color: var(--client-ink);
  font-variant-numeric: tabular-nums lining-nums;
}
body.client-board #karat-cards > .client-unit-card span {
  order: 3;
  font-size: 12px;
  color: var(--client-muted);
}
body.client-board #karat-note {
  margin: -14px 0 0;
  font-size: 12px;
  color: var(--client-muted);
  text-align: left;
}

/* The books: a head in the shop's colour, then the rows. */
body.client-board #overview .client-rate-panels,
body.client-board #products .client-rate-panels {
  display: block;
  margin: 0;
}
body.client-board :is(#retail-panel, #rtgs-panel) {
  border-radius: 10px;
  border: 1px solid var(--client-line);
  overflow: hidden;
  background: var(--client-surface);
  box-shadow: none;
}
body.client-board :is(#retail-panel, #rtgs-panel) > h3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 16px;
  border: 0;
  background: var(--client-primary);
  color: var(--client-on-primary);
  font:
    700 15px/1.3 Inter,
    system-ui,
    sans-serif;
  letter-spacing: 0.06em;
}
body.client-board :is(#retail-panel, #rtgs-panel) > h3 .client-rate-panel__note {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: normal;
  opacity: 0.9;
  color: inherit;
}
body.client-board :is(#retail-panel, #rtgs-panel) tbody {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: 0;
}
body.client-board :is(#retail-panel, #rtgs-panel) tbody > tr {
  grid-column: 1;
  padding: 12px 16px;
  border: 0;
  border-top: 1px solid var(--client-line);
}
body.client-board :is(#retail-panel, #rtgs-panel) tbody > tr[data-product^='silver'] {
  grid-column: 2;
  border-left: 1px solid var(--client-line);
}
/* A book with one metal only keeps one column. */
body.client-board
  :is(#retail-panel, #rtgs-panel)
  tbody:not(
    :has(
      > tr[data-product^='silver']:not([hidden]):not([data-off-board='true']):not(
          [data-karat-card='true']
        )
    )
  )
  > tr,
body.client-board
  :is(#retail-panel, #rtgs-panel)
  tbody:not(
    :has(
      > tr:not([data-product^='silver']):not([hidden]):not([data-off-board='true']):not(
          [data-karat-card='true']
        )
    )
  )
  > tr {
  grid-column: 1 / -1;
  border-left: 0;
}
body.client-board :is(#retail-panel, #rtgs-panel) .rate-table tbody th {
  font-size: 16px;
  font-weight: 600;
}
body.client-board :is(#retail-panel, #rtgs-panel) .rate-table tbody td:nth-child(2) {
  font-size: 12px;
}
/* An RTGS tier names its band under the product ("Below 100 g"), as the design draws it. */
body.client-board #rtgs-panel .rate-table tbody td:nth-child(2) {
  display: none;
}
body.client-board :is(#retail-panel, #rtgs-panel) .rate-table tbody td[data-cell='rate'] {
  font:
    700 20px/1.2 Inter,
    system-ui,
    sans-serif;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums lining-nums;
}
body.client-board
  :is(#retail-panel, #rtgs-panel)
  .rate-table
  tbody
  td:is([data-cell='low'], [data-cell='high']) {
  font-size: 12px;
  color: var(--client-muted);
  font-variant-numeric: tabular-nums lining-nums;
}

/* RTGS: the metal chips under the head; the one chosen filled with the shop's colour. */
body.client-board #rtgs-panel .rtgs-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 16px;
  margin: 0;
  border-bottom: 1px solid var(--client-line);
  background: var(--client-surface);
}
body.client-board #rtgs-panel .rtgs-filter button {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--client-control);
  background: var(--client-surface);
  color: var(--client-ink);
  font:
    500 14px/1 Inter,
    system-ui,
    sans-serif;
  cursor: pointer;
  box-shadow: none;
}
body.client-board #rtgs-panel .rtgs-filter button[aria-pressed='true'] {
  background: var(--client-primary);
  border-color: var(--client-primary);
  color: var(--client-on-primary);
}
body.client-board #rtgs-panel .rtgs-filter button:focus-visible {
  outline: none;
  border-color: var(--client-primary);
  box-shadow: inset 0 0 0 1px var(--client-primary);
}
body.client-board #rtgs-panel .rtgs-filter button[aria-pressed='true']:focus-visible {
  box-shadow: inset 0 0 0 2px var(--client-on-primary);
}
body.client-board #products {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
}
body.client-board #products > .dashboard-empty {
  margin-top: 12px;
}

/* Live tick: only a changed RTGS figure flashes, green up, red down; nothing else moves. */
body.client-board :is(#karat-cards, #retail-panel, .spot-grid) :is(.price-up, .price-down) {
  animation: none;
}
body.client-board #rtgs-panel .price-up {
  animation: ss-rise 0.9s ease-out;
}
body.client-board #rtgs-panel .price-down {
  animation: ss-fall 0.9s ease-out;
}
@keyframes ss-rise {
  0%,
  60% {
    color: var(--ss-success);
  }
}
@keyframes ss-fall {
  0%,
  60% {
    color: var(--ss-danger);
  }
}

/* Spot, three across, centred. */
body.client-board #overview .spot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}
body.client-board #overview .spot-card {
  padding: 14px 12px;
  text-align: center;
  border-radius: 10px;
  background: var(--client-surface);
  border: 1px solid var(--client-line);
  border-top: 3px solid var(--client-primary);
  box-shadow: none;
}
body.client-board #overview .spot-card::before,
body.client-board #overview .spot-card::after {
  content: none;
}
body.client-board #overview .spot-card h2 {
  margin: 0;
  font:
    500 13px/1.3 Inter,
    system-ui,
    sans-serif;
  color: var(--client-muted);
  letter-spacing: normal;
  text-transform: none;
}
body.client-board #overview .spot-card strong {
  display: block;
  margin: 2px 0;
  font:
    700 22px/1.25 Inter,
    system-ui,
    sans-serif;
  letter-spacing: -0.01em;
  color: var(--client-ink);
  font-variant-numeric: tabular-nums lining-nums;
}
body.client-board #overview .spot-range {
  margin: 0;
  font-size: 12px;
  color: var(--client-muted);
  font-variant-numeric: tabular-nums lining-nums;
}

/* The plans' card and the jewellers' card, side by side; the shop's pictures under them. */
body.client-board #board-promos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 16px;
  margin: 0;
}
body.client-board #board-promos > :is(.scheme-card, .app-banner) {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 8px;
  margin: 0;
  padding: 18px 20px;
  border-radius: 10px;
  border: 1px solid var(--client-line);
  background: var(--client-surface);
  box-shadow: 0 1px 3px rgb(20 33 61 / 8%);
  color: var(--client-ink);
}
body.client-board #board-promos > [hidden] {
  display: none;
}
body.client-board #board-promos > :is(.scheme-card, .app-banner)::before {
  content: none;
}
body.client-board #board-promos .client-eyebrow {
  font:
    600 12px/1.4 Inter,
    system-ui,
    sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--client-muted);
}
body.client-board #board-promos h3 {
  margin: 0;
  font:
    700 17px/1.3 Inter,
    system-ui,
    sans-serif;
  color: var(--client-ink);
}
body.client-board #board-promos p {
  margin: 0;
  font-size: 14px;
  color: var(--client-muted);
}
body.client-board #board-promos p[hidden] {
  display: none;
}
body.client-board #board-promos .app-banner__copy {
  display: grid;
  gap: 8px;
}
body.client-board #board-promos .scheme-card__button {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 6px;
  border: 2px solid var(--client-primary);
  background: var(--client-primary);
  color: var(--client-on-primary);
  font:
    600 14px/1 Inter,
    system-ui,
    sans-serif;
  text-decoration: none;
}
body.client-board #board-promos .app-banner__stores {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.client-board #board-promos .app-banner__store {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 6px;
  border: 2px solid var(--client-control);
  background: var(--client-surface);
  color: var(--client-ink);
  font:
    600 14px/1 Inter,
    system-ui,
    sans-serif;
  text-decoration: none;
  cursor: pointer;
}
body.client-board #board-promos .app-banner__store[hidden] {
  display: none;
}
body.client-board #board-promos :is(.scheme-card__button, .app-banner__store):focus-visible {
  outline: none;
  border-color: var(--client-primary);
}
body.client-board #board-promos .scheme-card__button:focus-visible {
  border-color: #e6b84a;
}
body.client-board #board-promos:not(:has(> :is(.scheme-card, .app-banner):not([hidden]))) {
  display: none;
}

@media (max-width: 1040px) {
  body.client-board :is(#retail-panel, #rtgs-panel) tbody {
    grid-template-columns: minmax(0, 1fr);
  }
  body.client-board :is(#retail-panel, #rtgs-panel) tbody > tr,
  body.client-board :is(#retail-panel, #rtgs-panel) tbody > tr[data-product^='silver'] {
    grid-column: 1;
    border-left: 0;
  }
}
@media (max-width: 640px) {
  body.client-board[data-active-tab='live'] .board-main {
    padding-top: 18px;
  }
  body.client-board #overview > .live-head h2 {
    font-size: 22px;
  }
  body.client-board #karat-cards {
    gap: 8px;
  }
  body.client-board #karat-cards > .client-unit-card {
    padding: 12px 10px;
  }
  body.client-board #karat-cards > .client-unit-card strong {
    font-size: 20px;
  }
  body.client-board #overview .spot-grid {
    gap: 8px;
  }
  body.client-board #overview .spot-card {
    padding: 10px 6px;
  }
  body.client-board #overview .spot-card strong {
    font-size: 17px;
  }
  body.client-board #overview .spot-card h2,
  body.client-board #overview .spot-range {
    font-size: 11px;
  }
  /* Each spot's pair on two lines on a phone. */
  body.client-board #overview .spot-range [data-cell] {
    display: block;
  }
  body.client-board #overview .spot-range [aria-hidden='true'] {
    display: none;
  }
  body.client-board :is(#retail-panel, #rtgs-panel) .rate-table tbody td[data-cell='rate'] {
    font-size: 18px;
  }
  body.client-board .board-announcement:not([hidden]) {
    padding: 8px 16px;
  }
}

/* The feed and time line under the page is for a screen reader; the passbook link stays. */
body.client-board .footer .footer-info > .sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
body.client-board .footer:not(:has(.scheme-footer-link:not([hidden]))) {
  display: none;
}

/* The page's top: 28 px under the header (18 on phones), the notice band flush under it. */
body.client-board.dashboard .app-container {
  padding-top: 0;
}
body.client-board
  .client-header
  .client-brand:has(.client-brand__place[hidden])
  :is(.client-brand__mark, img) {
  grid-row: auto;
}

/* The Live page's blocks are plain sections (the layouts' grid, public/css/board-layouts.css, is not
   loaded on the website since the shop-site design fixed the Live order for every shop). */
.board-block {
  display: contents;
}