/* Approved customer layout; shared tokens also support the existing calculators and charts.
   Dark values: the GFE platform dark set (docs/TENANT-THEMES.md). A tenant's own theme overrides
   both modes once per-tenant theming lands. */
:root {
  --client-bg: #ffffff;
  --client-surface: #ffffff;
  --client-surface-alt: #f2f8fd;
  --client-ink: #111111;
  --client-muted: #6b7280;
  --client-line: #e2e8f0;
  --client-control: #828997;
  --client-accent: #14213d;
  --client-primary: #14213d;
  --client-on-primary: #ffffff;
  --success: #0c6e4c;
  --danger: #a63d40;
  --warning: #8a5700;
}
:root[data-theme='dark'] {
  --client-bg: #1a1a1a;
  --client-surface: #242424;
  --client-ink: #f5f5f5;
  --client-muted: #a3a3a3;
  --client-line: #3a3a3a;
  --client-accent: #9db4e6;
  --client-surface-alt: #2e2e2e;
  --client-control: #8a8f99;
  --client-primary: #2f55a4;
  --client-on-primary: #ffffff;
  --success: #5fcb9f;
  --danger: #f28b8e;
  --warning: #f0b85a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --client-bg: #1a1a1a;
    --client-surface: #242424;
    --client-ink: #f5f5f5;
    --client-muted: #a3a3a3;
    --client-line: #3a3a3a;
    --client-accent: #9db4e6;
    --client-surface-alt: #2e2e2e;
    --client-control: #8a8f99;
    --client-primary: #2f55a4;
    --client-on-primary: #ffffff;
    --success: #5fcb9f;
    --danger: #f28b8e;
    --warning: #f0b85a;
  }
}
.client-board {
  display: block;
  margin: 0;
  background: var(--client-bg);
  color: var(--client-ink);
  font-family: 'Segoe UI', Arial, sans-serif;
}
.client-board .app-container {
  margin: 0 auto;
  padding: 28px;
  max-width: 1256px;
  width: 100%;
}
.client-header {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 84px;
  padding: 12px 28px;
  background: var(--client-surface);
  border-bottom: 1px solid var(--client-line);
  position: sticky;
  top: 0;
  z-index: 30;
}
.client-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  max-width: 270px;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: 1px;
}
/* Logos come at any shape: hold the height and let a wordmark be wide, rather than squeezing
   it into a 40px square where a 600x240 logo drew 16px tall. */
.client-brand img {
  height: 40px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
}
@media (max-width: 480px) {
  .client-brand img {
    height: 32px;
    max-width: 96px;
  }
}
.client-header .dashboard-nav {
  position: static;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 1;
  gap: 18px;
  background: none;
  padding: 0;
  border: 0;
  box-shadow: none;
}
.client-header .dashboard-nav a {
  min-height: 44px;
  font-size: 12px;
  padding: 8px 0;
  color: var(--client-muted);
  background: none;
  border: 0;
  border-radius: 0;
}
.client-header .dashboard-nav a[aria-current='page'] {
  color: var(--client-accent);
  border-bottom: 2px solid currentColor;
}
.client-header .dashboard-nav svg {
  display: none;
}
.client-header .dashboard-nav a:not([data-tab-primary]):not([data-tab-link='trends']) {
  display: none;
}
.client-header .tab-menu-btn {
  display: flex;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 10px;
}
.client-header .tab-menu-btn span {
  display: none;
}
.client-header .share-btn {
  flex-shrink: 0;
}
.client-board .board-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.client-board .section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0;
  margin: 0 0 16px;
}
.client-board .section-heading :is(h1, .is-display) {
  font-size: 32px;
  font-weight: 650;
  letter-spacing: -1px;
}
/* The page's one h1 is the shop's name in the header (index.html). It is a heading for a screen
   reader and a brand line on screen, so it carries no heading type scale of its own. */
.client-brand__name {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}
.client-board .section-heading h2 {
  font-size: 22px;
  letter-spacing: -0.6px;
}
.client-board .section-heading p {
  color: var(--client-muted);
  font-size: 12px;
}
.client-board .connection-status {
  width: auto;
  min-width: 0;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 12px;
}
.client-board .spot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.client-board .spot-card {
  display: block;
  min-height: 0;
  padding: 20px;
  background: var(--client-surface);
  border: 1px solid var(--client-line);
  box-shadow: none;
  border-radius: 16px;
}
.client-board .spot-card::before,
.client-board .spot-card::after {
  display: none;
}
.client-board .spot-card h2 {
  font-size: 13px;
  font-weight: 500;
  color: var(--client-muted);
  margin: 0 0 10px;
}
.client-board .spot-card strong {
  display: block;
  font-size: 26px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: var(--client-ink);
}
.client-board .spot-range {
  font-size: 12px;
  color: var(--client-muted);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.client-board .rate-panel {
  border: 1px solid var(--client-line);
  background: var(--client-surface);
  border-radius: 16px;
  box-shadow: none;
}
.client-board #products {
  border: 0;
  padding: 0;
  background: none;
}
.client-board #products .dashboard-toolbar {
  display: none;
}
.client-board .client-rate-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
.client-board .client-rate-panels:has(#rtgs-panel[hidden]) {
  grid-template-columns: 1fr;
}
.client-board .client-rate-panel {
  min-width: 0;
  background: var(--client-surface);
  border: 1px solid var(--client-line);
  border-radius: 16px;
  overflow: hidden;
}
.client-board .client-rate-panel h3 {
  font-size: 12px;
  letter-spacing: 1.6px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--client-line);
  color: var(--client-muted);
  margin: 0;
}
.client-board .client-rate-panel .rate-table {
  display: block;
  min-width: 0;
  width: 100%;
}
.client-board .client-rate-panel tbody {
  display: block;
}
.client-board .client-rate-panel tr {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-rows: auto auto;
  padding: 16px 20px;
  align-items: center;
  border-bottom: 1px solid var(--client-line);
  gap: 2px 7px;
}
.client-board .client-rate-panel tr[hidden],
.client-rate-panel tr[data-off-board='true'] {
  display: none;
}
.client-board .client-rate-panel tr:last-child {
  border: 0;
}
.client-board .client-rate-panel tr > * {
  border: 0;
  padding: 0;
  background: none;
  white-space: normal;
}
.client-board .client-rate-panel .rate-table tbody th {
  grid-column: 1;
  grid-row: 1;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}
.client-board .client-rate-panel .rate-table tbody td:nth-child(2) {
  grid-column: 1;
  grid-row: 2;
  font-size: 12px;
  color: var(--client-muted);
  text-align: left;
}
.client-board .client-rate-panel .rate-table tbody td[data-cell='rate'] {
  grid-column: 2/4;
  grid-row: 1;
  text-align: right;
  color: var(--client-ink);
  font-size: 23px;
  font-weight: 650;
  letter-spacing: -0.6px;
}
.client-board .client-rate-panel .rate-table tbody td[data-cell='low'] {
  grid-column: 2;
  grid-row: 2;
  text-align: right;
  font-size: 12px;
  color: var(--client-muted);
}
.client-board .client-rate-panel .rate-table tbody td[data-cell='high'] {
  grid-column: 3;
  grid-row: 2;
  text-align: right;
  font-size: 12px;
  color: var(--client-muted);
}
.client-board .client-rate-panel .rate-table tbody td[data-cell='low']::after {
  content: ' |';
  margin-left: 4px;
}
.client-board .client-rate-panel .rate-table__tag {
  font-size: 10px;
  background: none;
  border: 0;
  padding: 0 2px;
  color: var(--client-muted);
}
.client-board .client-rate-panel .rate-table__note {
  font-size: 11px;
}
.client-menu-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px;
}
.client-board .price-up {
  animation: client-rise 0.25s;
}
.client-board .price-down {
  animation: client-fall 0.25s;
}
@keyframes client-rise {
  50% {
    color: var(--success);
  }
}
@keyframes client-fall {
  50% {
    color: var(--danger);
  }
}
@media (max-width: 1100px) {
  .client-header {
    gap: 12px;
    padding: 12px 16px;
  }
  .client-header .dashboard-nav {
    gap: 12px;
  }
  .client-brand {
    font-size: 14px;
    max-width: 200px;
  }
}
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) {
  .client-board .app-container {
    padding: 20px 14px 100px;
  }
  .client-header {
    min-height: 68px;
    justify-content: space-between;
  }
  .client-brand {
    text-align: center;
    font-size: 15px;
  }
  .client-header .share-btn span {
    display: none;
  }
  .client-header .share-btn {
    width: 44px;
    padding: 10px;
  }
  .client-header .dashboard-nav {
    display: flex;
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    padding: 5px 8px max(8px, env(safe-area-inset-bottom));
    background: var(--client-surface);
    border-top: 1px solid var(--client-line);
    justify-content: space-around;
    gap: 0;
  }
  .client-header .dashboard-nav a {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
    font-size: 11px;
    padding: 4px 0;
  }
  .client-header .dashboard-nav svg {
    display: block;
    width: 20px;
    height: 20px;
  }
  .client-header .dashboard-nav a:not([data-tab-primary]) {
    display: none;
  }
  .client-board .section-heading :is(h1, .is-display) {
    font-size: 25px;
  }
  .client-board .section-heading h2 {
    font-size: 20px;
  }
  .client-board .section-heading p {
    font-size: 10px;
    max-width: 120px;
    text-align: right;
  }
  .client-board .connection-status {
    font-size: 10px;
    padding: 5px 8px;
  }
  .client-board .spot-grid {
    gap: 8px;
  }
  .client-board .spot-card {
    padding: 13px 7px;
    border-radius: 12px;
  }
  .client-board .spot-card h2 {
    font-size: 11px;
  }
  .client-board .spot-card strong {
    font-size: 18px;
    letter-spacing: -0.5px;
  }
  .client-board .spot-range {
    font-size: 10.5px;
    letter-spacing: -0.3px;
  }
  .client-board .client-rate-panels {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .client-board .client-rate-panel tr {
    padding: 14px;
  }
  .client-board .client-rate-panel .rate-table tbody td[data-cell='rate'] {
    font-size: 22px;
  }
}
/* The wall display (TV) has its own block at the end of this file (24 Sep 2026). */
@media (prefers-reduced-motion: reduce) {
  .client-board .price-up,
  .client-board .price-down {
    animation: none;
  }
}
.client-board .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.client-board .client-rate-panel tr > th,
.client-board .client-rate-panel tr > td {
  padding: 0;
}
.client-board .connection-status {
  flex: none;
}
.client-board .client-header .share-btn {
  min-width: 44px;
}
.client-board .spot-section {
  margin-top: 0;
}
.client-board .spot-range {
  white-space: nowrap;
}
/* Scoped to .client-board so it outranks `.dashboard .rate-panel { padding: 0 }`, which had
   silently zeroed it and left these panels' text touching the card edge. */
.client-board :is(.client-history, .client-help, .client-account, .client-settings) {
  padding: 24px;
}
.history-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
}
.history-controls button,
.history-controls select,
.client-help input {
  min-height: 44px;
  padding: 8px 12px;
  color: var(--client-ink);
  background: var(--client-surface);
  border: 1px solid var(--client-line);
  border-radius: 8px;
}
.history-table-wrap {
  overflow: auto;
}
.history-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.history-table th,
.history-table td {
  padding: 14px 12px;
  text-align: right;
  border-bottom: 1px solid var(--client-line);
  white-space: nowrap;
}
.history-table th:first-child,
.history-table td:first-child {
  text-align: left;
}
.client-help label {
  display: block;
  margin-top: 20px;
}
.client-help input {
  width: 100%;
  margin: 12px 0;
}
.client-help details {
  border-bottom: 1px solid var(--client-line);
  padding: 16px 0;
}
.client-help summary {
  cursor: pointer;
  min-height: 44px;
  font-weight: 600;
}
.client-help p,
.client-history p {
  color: var(--client-muted);
  font-size: 14px;
  line-height: 1.6;
}

.client-board .client-header .share-btn {
  flex: 0 0 auto;
}
@media (max-width: 900px) {
  .client-board .client-header .share-btn {
    flex: 0 0 44px;
    width: 44px;
  }
}

.client-board .share-modal-overlay {
  z-index: 100;
}

/* Connected website pages from the approved customer layout. */
.client-board .app-container {
  max-width: 1240px;
  padding: 36px 32px 52px;
}
.client-header .dashboard-nav {
  justify-content: center;
  gap: 22px;
}
.client-board .client-header .share-btn {
  width: 44px;
  height: 44px;
  padding: 10px;
}
.client-header .share-btn span {
  display: none;
}
.client-board .section-heading :is(h1, .is-display),
.client-pagehead :is(h1, .is-display) {
  margin: 0;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -1.3px;
  line-height: 1.15;
  font-weight: 650;
}
.client-board .section-heading .client-subtitle {
  font-size: 14px;
  margin: 9px 0 0;
  max-width: none;
  text-align: left;
}
.client-board .spot-card {
  padding: 22px 24px;
}
.client-board .spot-card strong {
  font-size: 32px;
}
.client-board .client-rate-panel h3 {
  background: var(--client-surface-alt);
  color: var(--client-ink);
  padding: 13px 22px;
  letter-spacing: 0.8px;
}
.client-board .client-rate-panel tr {
  padding: 17px 22px;
}
.client-pagehead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}
.client-pagehead p {
  margin: 9px 0 0;
  color: var(--client-muted);
  font-size: 15px;
  line-height: 1.6;
}
.client-sectionhead {
  margin: 28px 0 18px;
}
.client-sectionhead h2 {
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.6px;
  margin: 0;
}
.client-sectionhead p,
.client-chart-note {
  color: var(--client-muted);
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.6;
}
.client-charts-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.client-charts-toolbar p {
  color: var(--client-muted);
  font-size: 13px;
}
.client-charts-toolbar .chart__tab {
  min-height: 44px;
}
.client-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.client-chart-grid--spots {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.client-chart-card {
  min-width: 0;
  padding: 24px;
  background: var(--client-surface);
  border: 1px solid var(--client-line);
  border-radius: 16px;
}
.client-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.client-chart-head h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
}
.client-chart-head p {
  color: var(--client-muted);
  font-size: 12px;
  margin: 6px 0 0;
}
.client-chart-badge {
  padding: 8px;
  border: 1px solid var(--client-line);
  border-radius: 10px;
  color: var(--client-muted);
  font-size: 12px;
}
.client-chart-value {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: baseline;
  margin: 24px 0 8px;
  font-variant-numeric: tabular-nums;
}
.client-chart-value strong {
  font-size: 30px;
  font-weight: 650;
  letter-spacing: -0.8px;
}
.client-chart-value span {
  font-size: 13px;
}
.client-positive {
  color: var(--success);
}
.client-negative {
  color: var(--danger);
}
.client-chart-card figure {
  margin: 0;
}
.client-chart-card svg {
  width: 100%;
  display: block;
  overflow: visible;
}
.client-chart-gridline {
  stroke: var(--client-line);
  stroke-width: 1;
}
.client-chart-line {
  stroke: var(--client-accent);
  stroke-width: 2.5;
  fill: none;
  vector-effect: non-scaling-stroke;
}
.client-chart-fill {
  fill: color-mix(in srgb, var(--client-accent) 8%, transparent);
}
.client-chart-dot {
  fill: var(--client-accent);
}
.client-chart-axis {
  fill: var(--client-muted);
  font-size: 14px;
}
.client-chart-caption {
  color: var(--client-muted);
  font-size: 12px;
  min-height: 36px;
  line-height: 1.6;
}
.client-chart-picker {
  width: 100%;
  accent-color: var(--client-accent);
  height: 24px;
  cursor: pointer;
}
.client-chart-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  border-top: 1px solid var(--client-line);
  padding-top: 16px;
  margin: 16px 0 0;
  font-variant-numeric: tabular-nums;
}
.client-chart-stats dt {
  font-size: 11px;
  color: var(--client-muted);
  margin-bottom: 6px;
}
.client-chart-stats dd {
  font-size: 12px;
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 600;
}
.client-chart-empty {
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.client-chart-empty h4 {
  font-size: 16px;
  margin: 0 0 8px;
}
.client-chart-empty p {
  font-size: 13px;
  color: var(--client-muted);
  line-height: 1.7;
}
.client-chart-note {
  margin-top: 24px;
}
.client-board .board-details {
  display: block;
  padding: 0;
}
.client-board .board-details > .detail-card {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: none;
  box-shadow: none;
}
.client-story,
.client-contact-layout,
.client-bank-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.client-story {
  border: 1px solid var(--client-line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--client-surface);
  gap: 0;
}
.client-story-copy {
  padding: 40px;
}
.client-story-copy h2 {
  font-size: 30px;
  margin: 12px 0 20px;
}
.client-board .client-story-copy .detail-card__body {
  font-size: 16px;
  line-height: 1.85;
  white-space: pre-line;
  margin-bottom: 28px;
}
.client-story-art {
  background: var(--client-surface-alt);
  display: grid;
  place-content: center;
  padding: 40px;
  text-align: center;
  color: var(--client-muted);
}
.client-story-art svg {
  width: 100%;
  max-width: 300px;
  fill: none;
  stroke: var(--client-accent);
  stroke-width: 1.3;
}
.client-story-art span {
  font-size: 11px;
  letter-spacing: 3px;
}
.client-info-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 24px;
}
.client-info-card,
.client-contact-card,
.client-bank-card {
  background: var(--client-surface);
  border: 1px solid var(--client-line);
  border-radius: 16px;
  padding: 28px;
  min-width: 0;
}
.client-info-card {
  text-decoration: none;
  color: inherit;
}
.client-info-card > span {
  color: var(--client-accent);
  font-size: 13px;
}
.client-info-card h3 {
  font-size: 17px;
  margin: 20px 0 12px;
}
.client-board .client-info-card h2 {
  font-size: 24px;
  line-height: 1.3;
  margin: 0 0 12px;
}
.client-info-card p,
.client-contact-row p {
  font-size: 14px;
  line-height: 1.7;
  color: var(--client-muted);
  margin: 12px 0 20px;
}
.client-contact-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 12px;
  border-bottom: 1px solid var(--client-line);
  padding: 24px 0;
}
.client-contact-row:first-child {
  padding-top: 0;
}
.client-contact-row:last-child {
  border: 0;
  padding-bottom: 0;
}
.client-contact-row > span {
  color: var(--client-accent);
  font-size: 24px;
}
.client-board .client-contact-row h2 {
  margin: 0;
  font-size: 19px;
}
.client-contact-aside {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.client-bank-hero {
  background: var(--client-primary);
  color: var(--client-on-primary);
  border-radius: 12px;
  padding: 28px;
  margin-bottom: 20px;
}
.client-bank-hero p {
  color: color-mix(in srgb, var(--client-on-primary) 82%, var(--client-primary));
  font-size: 10px;
  letter-spacing: 1.5px;
  margin: 0 0 28px;
}
.client-bank-hero strong {
  display: block;
  font-size: 28px;
  letter-spacing: 3px;
  margin-bottom: 24px;
}
.client-board .client-bank-hero h2 {
  color: var(--client-on-primary);
  font-size: 18px;
  margin: 0 0 8px;
}
.client-bank-hero span {
  color: color-mix(in srgb, var(--client-on-primary) 82%, var(--client-primary));
  font-size: 13px;
}
.client-checklist {
  list-style: none;
  padding: 0;
  margin: 24px 0;
}
.client-checklist li {
  display: flex;
  gap: 12px;
  margin: 18px 0;
  font-size: 14px;
}
.client-checklist li::before {
  content: '✓';
  color: var(--client-accent);
}
.client-board .bank-details__warning {
  margin-top: 20px;
  line-height: 1.7;
}
.client-board #calculators-panel {
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 24px;
  padding: 24px;
}
.client-board #calculators-panel > .section-heading {
  grid-column: 1/-1;
}
.client-board .calc-tabs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  padding: 0;
}
.client-board .calc-tabs__tab {
  text-align: left;
  min-height: 44px;
  border-radius: 8px;
  padding: 12px 16px;
  white-space: normal;
}
.client-board #calculators-panel .calculator {
  min-width: 0;
}
@media (max-width: 1100px) {
  .client-header .dashboard-nav {
    gap: 14px;
  }
}
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) {
  .client-board .app-container {
    padding: 24px 14px 100px;
  }
  .client-pagehead {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }
  .client-pagehead p {
    font-size: 14px;
  }
  .client-board .section-heading .client-subtitle {
    font-size: 12px;
  }
  .client-board .spot-card {
    padding: 14px 7px;
  }
  .client-board .spot-card strong {
    font-size: 18px;
  }
  .client-chart-grid,
  .client-chart-grid--spots,
  .client-story,
  .client-contact-layout,
  .client-bank-layout,
  .client-info-grid {
    grid-template-columns: 1fr;
  }
  .client-chart-card,
  .client-info-card,
  .client-contact-card,
  .client-bank-card,
  .client-story-copy {
    padding: 22px;
  }
  .client-story-art {
    padding: 20px;
  }
  .client-story-art svg {
    max-height: 200px;
  }
  .client-board #calculators-panel {
    display: block;
    padding: 18px;
  }
  .client-board .calc-tabs {
    flex-direction: row;
    overflow-x: auto;
    margin: 20px 0;
  }
  .client-board .calc-tabs__tab {
    flex-shrink: 0;
  }
}
.client-board [hidden],
.client-board .is-off-tab {
  display: none !important;
}

.client-board #watch {
  padding: 24px;
}
.client-board #calculators-panel .dashboard-table-foot {
  grid-column: 1/-1;
}
.client-board[data-active-tab='calculators'] #calculators-panel {
  order: 0;
}
.client-board[data-active-tab='calculators'] #weight-grid {
  order: 1;
  padding-top: 24px;
}
.client-board[data-active-tab='calculators'] #weight-grid .section-heading {
  padding: 0 24px;
}
.client-board[data-active-tab='calculators'] .board-disclaimer {
  order: 2;
}

/* ---------------------------------------------------------------------------------------------
   GFE shape and depth (gfe-branding §5): 8px cards with a navy-tinted shadow, 4px controls, 12px
   hero. Colours are the variables at the top: the GFE platform theme by default, a client's own
   theme when the page head carries one (src/tenant-theme.js, docs/TENANT-THEMES.md).
   --------------------------------------------------------------------------------------------- */
:root {
  --gfe-shadow-sm: 0 1px 3px rgba(20, 33, 61, 0.08);
}
:root[data-theme='dark'] {
  --gfe-shadow-sm: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --gfe-shadow-sm: none;
  }
}
.client-board .spot-card,
.client-board .rate-panel,
.client-board .client-rate-panel,
.client-chart-card,
.client-story,
.client-bank-card {
  border-radius: 8px;
  box-shadow: var(--gfe-shadow-sm);
}
.client-bank-hero {
  background: var(--client-primary);
  color: var(--client-on-primary);
  border-radius: 12px;
}
.client-help input,
.client-board .calc-tabs__tab,
.client-chart-badge {
  border-radius: 4px;
}
/* An input's only boundary needs 3:1: the control colour, not the divider line. */
.client-board :is(input, select, textarea) {
  border-color: var(--client-control);
}

/* Login and Settings (22 Sep 2026): account doors and the settings list, in the approved cards. */
.client-account p,
.client-settings p {
  color: var(--client-muted);
  line-height: 1.6;
}
.client-account__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.client-account__card {
  background: var(--client-surface-alt);
  border-radius: 8px;
  padding: 20px;
  display: grid;
  gap: 10px;
  align-content: start;
}
.client-account__card h3,
.client-settings__group h3 {
  margin: 0;
  font-size: 16px;
  color: var(--client-ink);
}
.client-settings__group {
  display: grid;
  gap: 10px;
  padding: 20px 0;
  border-bottom: 1px solid var(--client-line);
}
.client-settings__group:last-of-type {
  border-bottom: 0;
}
.client-settings__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.client-settings__links,
.client-settings__list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  color: var(--client-muted);
}
.client-settings__links a {
  color: var(--client-accent);
}

/* ---------------------------------------------------------------------------------------------
   Live Rate home, matched to the approved prototype (docs/recommended-client-layout, #live),
   23 Sep 2026. Values are the prototype's; colours stay the shop's tokens above. Last in the
   file so it outranks the earlier passes, including the 8px GFE card shape.
   --------------------------------------------------------------------------------------------- */
/* The prototype's tint: the shop's accent, faint on its surface. Drawn from the accent rather
   than surface-alt, which on the GFE default equals the page and would leave the chip unseen. */
:root {
  --client-tint: color-mix(in srgb, var(--client-accent) 8%, var(--client-surface));
}
.client-header {
  height: 84px;
  min-height: 84px;
  padding: 0 28px;
  gap: 16px;
}
.client-board .client-header .tab-menu-btn,
.client-board .client-header .share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--client-ink);
  box-shadow: none;
}
.client-board .client-header .tab-menu-btn:hover,
.client-board .client-header .share-btn:hover {
  background: var(--client-surface-alt);
  color: var(--client-accent);
}
.client-board .client-header :is(.tab-menu-btn, .share-btn) svg {
  width: 20px;
  height: 20px;
}
.client-brand {
  gap: 12px;
  max-width: none;
  white-space: nowrap;
  font-size: 19px;
  font-weight: 650;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}
.client-brand__name {
  line-height: 1.2;
}
.client-brand__name small {
  display: block;
  margin-top: 4px;
  font-size: 9px;
  letter-spacing: 4px;
  line-height: 1.1;
}
.client-brand__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 39px;
  height: 39px;
  border-radius: 9px;
  background: var(--client-primary);
  color: var(--client-on-primary);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 0;
}
.client-brand__mark:empty,
.client-brand img:not([hidden]) + .client-brand__mark {
  display: none;
}
@media (min-width: 1101px), (min-width: 901px) and (orientation: landscape) {
  .client-header .dashboard-nav {
    align-self: stretch;
    align-items: stretch;
    height: 100%;
    justify-content: center;
    gap: 22px;
  }
  .client-header .dashboard-nav a {
    display: flex;
    align-items: center;
    min-height: 0;
    gap: 0;
    padding: 3px 0 0;
    font-size: 12px;
    white-space: nowrap;
    color: var(--client-ink);
    border-bottom: 3px solid transparent;
  }
  .client-header .dashboard-nav a[aria-current='page'] {
    color: var(--client-accent);
    border-bottom: 3px solid var(--client-accent);
    font-weight: 650;
  }
}
@media (max-width: 1160px) {
  .client-header {
    padding: 0 18px;
    gap: 12px;
  }
  .client-header .dashboard-nav {
    gap: 14px;
  }
  .client-header .dashboard-nav a {
    font-size: 11px;
  }
  .client-brand {
    font-size: 16px;
    gap: 8px;
  }
  .client-brand__mark {
    width: 33px;
    height: 33px;
  }
}

/* The page head: title and line on the left, the market chip on the right at the line. */
.client-board #overview > .section-heading {
  align-items: flex-end;
  gap: 24px;
  margin: 0 0 28px;
}
.client-board #overview .client-subtitle {
  font-size: 15px;
}
.client-board .connection-status[class] {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 0;
  padding: 5px 10px;
  border: 0;
  border-radius: 6px;
  background: var(--client-tint);
  color: var(--client-muted);
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
}
.client-board .connection-status .status-dot {
  display: inline-block;
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border: 0;
  border-radius: 50%;
  background: currentColor;
}
.client-board .connection-status .status-dot::after {
  content: none;
}
.client-board .connection-status.status-green .status-dot {
  color: var(--success);
}
.client-board .connection-status.status-amber .status-dot {
  color: var(--warning);
}
.client-board .connection-status.status-red .status-dot {
  color: var(--danger);
}
.client-board .connection-status .status-copy {
  display: inline;
}
/* The closed line is a sentence since §4z7 round B ("Closed · Closing rate, 20:00. Next rate at
   10:00."), so the pill wraps inside the screen rather than pushing the page sideways at 360px. */
.client-board .connection-status[class] {
  white-space: normal;
  max-width: 100%;
}

/* Spot tiles. */
.client-board .spot-grid {
  gap: 20px;
}
.client-board .spot-card {
  position: relative;
  padding: 22px 24px;
  border-radius: 16px;
  box-shadow: none;
}
.client-board .spot-card h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 550;
  color: var(--client-muted);
}
.client-board .spot-card strong {
  margin: 10px 0 3px;
  font-size: 32px;
  font-weight: 650;
  letter-spacing: -1px;
}
.client-board .spot-range {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0;
}

/* Jeweller rates. */
.client-board[data-active-tab='live'] .board-main {
  gap: 28px;
  padding-top: 0;
}
.client-board #products {
  border-radius: 0;
  box-shadow: none;
}
.client-board #products .section-heading {
  margin: 0 0 15px;
}
.client-board #products .section-heading h2 {
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.6px;
}
.client-board #products .section-heading p {
  font-size: 12px;
  line-height: 1.6;
}
.client-board .client-rate-panels {
  gap: 22px;
}
.client-board .client-rate-panel {
  border-radius: 16px;
  box-shadow: none;
}
.client-board .client-rate-panel h3 {
  padding: 13px 22px;
  border-bottom: 0;
  background: var(--client-surface-alt);
  color: var(--client-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
}
.client-board .client-rate-panel tr {
  padding: 17px 22px;
  gap: 3px 0;
}
.client-board .client-rate-panel .rate-table tbody th {
  font-size: 15px;
  font-weight: 700;
}
.client-board .client-rate-panel .rate-table tbody td:nth-child(2)::before {
  content: 'per ';
}
.client-board .client-rate-panel .rate-table tbody td[data-cell='rate'] {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
  font-variant-numeric: tabular-nums;
}
.client-board .client-rate-panel .rate-table tbody td:is([data-cell='low'], [data-cell='high']) {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.client-board .client-rate-panel .rate-table tbody td[data-cell='low']::after {
  content: '|';
  margin: 0 8px;
}
.client-board .client-rate-panel tr[data-karat-card='true'] {
  display: none;
}
/* An RTGS tier's weight band (24 September 2026), under the product's name. */
.client-board .rate-table__band {
  display: block;
  margin-top: 2px;
  color: var(--client-muted);
  font-size: 12px;
  font-weight: 500;
}
/* The approved rows carry no tags: the panel heading already says RTGS, and the chip already
   says Live. Kept for a screen reader and for the weight grid, which reads the RTGS tag. */
.client-board #rtgs-panel .rate-table__tag,
.client-board .rate-table__tag[data-live-tag] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* Karat cards, under the rate book. */
.client-unit-cards {
  display: grid;
  /* Six tracks: a card on a line of two spans three, on a line of three spans two. */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.client-unit-cards[hidden] {
  display: none;
}
.client-unit-cards > [data-span='2'] {
  grid-column: span 2;
}
.client-unit-cards > [data-span='3'] {
  grid-column: span 3;
}
.client-unit-cards > [data-span='6'] {
  grid-column: span 6;
}
/* The one GST line for all six cards, under them rather than on each. */
/* The figures' time beside the Live badge: quiet, and digits that do not jiggle as they change. */
.client-board .status-time {
  font-weight: 400;
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}
.client-unit-note {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--client-muted);
  text-align: center;
}
.client-unit-note[hidden] {
  display: none;
}
/* The "download the app" banner under the rate book. */
.app-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 24px 0 0;
  padding: 18px 22px;
  border-radius: 13px;
  background: var(--client-surface-alt);
  border: 1px solid var(--client-line);
}
.app-banner[hidden] {
  display: none;
}
.app-banner h3 {
  margin: 0;
  font-size: 16px;
  color: var(--client-ink);
}
.app-banner p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--client-muted);
}
.app-banner__stores {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.app-banner__store {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  background: var(--client-primary);
  color: var(--client-on-primary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.app-banner__store[hidden] {
  display: none;
}
/* Cards, then Retail, then the spot tiles, then the jeweller's RTGS book: each book now stands
   alone in its own section, so one column always. */
.client-board .client-rate-panels,
.client-board .client-rate-panels:has(#rtgs-panel[hidden]) {
  grid-template-columns: 1fr;
}
#overview .client-unit-cards {
  margin-top: 0;
}
#overview .client-rate-panels--retail {
  margin-top: 24px;
}
#overview .spot-grid {
  margin-top: 28px;
}
.client-board #products > .section-heading[hidden] {
  display: none;
}
/* RTGS keeps its "Exclusive of GST" in the panel head; Retail names its GST rows instead. */
.client-board .client-rate-panel h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.client-rate-panel__note {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
  opacity: 0.8;
}
/* The same tile as the spot row above, so the page has one tile, not two: centred, the karat
   as the small label, the price large, and its unit on the line beneath, where the spot tiles
   carry their low | high. The markup keeps name and unit together for a screen reader; the
   order on screen comes from the flex order. */
.client-unit-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 24px;
  text-align: center;
  background: var(--client-surface);
  border: 1px solid var(--client-line);
  border-radius: 16px;
}
.client-unit-card > div {
  display: contents;
}
.client-unit-card h3 {
  order: 1;
  margin: 0;
  font-size: 13px;
  font-weight: 550;
  color: var(--client-muted);
}
.client-unit-card strong {
  order: 2;
  margin: 8px 0 0;
  font-size: 32px;
  font-weight: 650;
  letter-spacing: -1px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.client-unit-card span {
  order: 3;
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--client-muted);
}

/* The footer. */
.client-board .footer {
  padding-top: 16px;
  border-top: 1px solid var(--client-line);
  color: var(--client-muted);
  font-size: 11px;
}
.client-board .footer :is(.ticker-source, .timestamp) {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.client-board .footer .ticker-source:not(.ticker-source--held) {
  color: var(--client-muted);
}

@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) {
  .client-board .app-container {
    padding: 25px 16px 100px;
  }
  .client-header {
    height: 68px;
    min-height: 68px;
    padding: 0 12px;
    gap: 12px;
  }
  .client-brand {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 17px;
    letter-spacing: 2px;
    text-align: center;
  }
  .client-brand__mark {
    display: none;
  }
  .client-brand__name small {
    font-size: 8px;
    letter-spacing: 3px;
  }
  .client-board .client-header .share-btn {
    margin-left: auto;
  }
  .client-header .dashboard-nav {
    padding: 8px 5px max(8px, env(safe-area-inset-bottom));
  }
  .client-header .dashboard-nav a {
    gap: 4px;
    min-height: 44px;
    padding: 3px;
    font-size: 10px;
    color: var(--client-muted);
    border-bottom: 0;
  }
  .client-header .dashboard-nav a[aria-current='page'] {
    color: var(--client-accent);
    border-bottom: 0;
    font-weight: 650;
  }
  .client-header .dashboard-nav svg {
    width: 21px;
    height: 21px;
  }
  .client-nav-long {
    display: none;
  }
  .client-board #overview > .section-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 22px;
  }
  .client-board #overview .section-heading .is-display {
    font-size: 29px;
    letter-spacing: -1px;
  }
  .client-board #overview .client-subtitle {
    font-size: 13px;
    line-height: 1.65;
  }
  .client-board[data-active-tab='live'] .board-main {
    gap: 22px;
  }
  .client-board .spot-grid {
    gap: 8px;
  }
  .client-board .spot-card {
    padding: 13px 7px;
    border-radius: 13px;
  }
  .client-board .spot-card h2 {
    font-size: 11px;
    white-space: nowrap;
  }
  .client-board .spot-card strong {
    margin-top: 9px;
    font-size: 17px;
    letter-spacing: -0.5px;
  }
  .client-board .spot-range {
    font-size: 10.5px;
    letter-spacing: -0.2px;
  }
  .client-board #products .section-heading h2 {
    font-size: 20px;
  }
  .client-board #products .section-heading p {
    max-width: none;
    font-size: 11px;
    white-space: nowrap;
  }
  .client-board .client-rate-panel {
    border-radius: 13px;
  }
  .client-board .client-rate-panel h3 {
    padding: 10px 15px;
  }
  .client-board .client-rate-panel tr {
    padding: 14px 15px;
  }
  .client-board .client-rate-panel .rate-table tbody th {
    font-size: 13px;
  }
  .client-board .client-rate-panel .rate-table tbody td[data-cell='rate'] {
    font-size: 19px;
  }
  .client-board .client-rate-panel .rate-table tbody td:is(:nth-child(2), [data-cell='low'], [data-cell='high']) {
    font-size: 12px;
  }
  .client-unit-cards {
    margin-top: 22px;
  }
  .client-unit-card {
    border-radius: 13px;
  }
  .client-board .footer {
    font-size: 10px;
  }
}

/* Portrait tablet: the prototype's own step between phone and desktop. */
@media (min-width: 601px) and (max-width: 1100px) and (orientation: portrait) {
  .client-board .app-container {
    max-width: 820px;
    padding: 32px 28px 100px;
  }
  .client-header {
    height: 76px;
    min-height: 76px;
    padding-inline: 24px;
  }
  .client-brand {
    font-size: 20px;
  }
  .client-board #overview .section-heading .is-display {
    font-size: 34px;
  }
  .client-board #overview .client-subtitle {
    font-size: 15px;
  }
  .client-board .spot-card strong {
    font-size: 24px;
  }
  .client-board .client-rate-panel,
  .client-unit-card {
    border-radius: 16px;
  }
  .client-header .dashboard-nav {
    padding-inline: max(24px, calc((100vw - 760px) / 2));
  }
  .client-header .dashboard-nav a {
    min-height: 50px;
    font-size: 12px;
  }
}

/* Spot tiles, squared up (23 Sep 2026): centred at every width, even insets on every side, and
   one rhythm from label to price to range. Centred rather than the prototype's left edge, which
   left the figures in one corner of a wide tile (Harshal's call, 23 Sep). */
.client-board .spot-card {
  padding: 20px 24px;
  text-align: center;
}
.client-board .spot-card strong {
  margin: 8px 0 0;
  line-height: 1.2;
}
.client-board .spot-range {
  margin: 6px 0 0;
}
/* Between the phone and the tablet the tile grows with the screen: the 360px sizes in a card
   twice as wide left the figures small in one corner. Each size is the 360px value at 360px
   and reaches the tablet value by about 600px. */
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) {
  .client-board .spot-card,
  .client-unit-card {
    padding: clamp(12px, 2.7vw, 16px) clamp(10px, 2.8vw, 18px);
  }
  .client-board .spot-card h2,
  .client-unit-card h3 {
    font-size: clamp(11px, 2.3vw, 13px);
  }
  .client-board .spot-card strong,
  .client-unit-card strong {
    margin-top: clamp(6px, 1.3vw, 8px);
    font-size: clamp(17px, 4.2vw, 24px);
    letter-spacing: -0.5px;
  }
  .client-board .spot-range,
  .client-unit-card span {
    margin-top: clamp(4px, 1vw, 6px);
    font-size: clamp(10px, 2vw, 12px);
  }
  .client-board .spot-grid,
  .client-unit-cards {
    gap: clamp(6px, 1.7vw, 12px);
  }
}
/* Only the narrowest phones need the separator pulled in to fit the low | high pair. */
@media (max-width: 400px) {
  .client-board .spot-range {
    word-spacing: -1px;
  }
}
@media (min-width: 601px) and (max-width: 1100px) and (orientation: portrait) {
  .client-board .spot-card {
    padding: 16px 18px;
  }
  .client-board .spot-range {
    font-size: 12px;
  }
}

/* The footer (23 Sep 2026): one centred line with no rule, so the feed state and the last tick
   read as one statement instead of two halves pushed to opposite edges. */
.client-board[data-active-tab='live'] .board-main {
  padding-bottom: 20px;
}
.client-board .footer {
  justify-content: center;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.client-board .footer-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 0;
  width: 100%;
  text-align: center;
}
.client-board .footer .timestamp::before {
  content: '·';
  margin: 0 8px;
}
@media (max-width: 600px) {
  .client-board .footer-info {
    flex-direction: column;
  }
  .client-board .footer .timestamp::before {
    content: none;
  }
}

/* ---------------------------------------------------------------------------------------------
   Charts (23 Sep 2026): the prototype's page, made proper at every width. A quiet outlined
   history button, one segmented period control, cards in the home screen's shape, readable
   axis text (charts-overview.js now draws at the card's real width), a slim scrubber with a
   dated readout, stats in a 2 x 2 with the change, and the closing note as a card.
   --------------------------------------------------------------------------------------------- */
.client-outline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 17px;
  border: 1px solid var(--client-line);
  border-radius: 9px;
  background: var(--client-surface);
  color: var(--client-ink);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.client-outline-btn:hover {
  border-color: var(--client-accent);
  color: var(--client-accent);
}
.client-outline-btn svg,
.client-icon {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.client-charts-toolbar {
  margin-top: 4px;
}
.client-charts-toolbar .chart__tabs {
  display: flex;
  gap: 3px;
  padding: 4px;
  border: 1px solid var(--client-line);
  border-radius: 9px;
  background: var(--client-bg);
}
.client-charts-toolbar .chart__tab {
  min-height: 34px;
  padding: 7px 14px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--client-muted);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.client-charts-toolbar .chart__tab[aria-pressed='true'] {
  background: var(--client-surface);
  color: var(--client-accent);
  font-weight: 650;
  box-shadow: 0 1px 4px rgba(22, 42, 73, 0.07);
}
.client-sectionhead--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.client-sectionhead__note {
  font-size: 12px;
  color: var(--client-muted);
  white-space: nowrap;
}
.client-chart-card {
  border-radius: 16px;
  box-shadow: none;
}
.client-chart-badge {
  min-width: 38px;
  padding: 7px 9px;
  border-radius: 9px;
  text-align: center;
}
.client-chart-head h3 {
  font-size: 17px;
}
.client-chart-value {
  gap: 10px;
  margin: 20px 0 14px;
}
.client-chart-value span {
  font-size: 12px;
  font-weight: 600;
}
.client-chart-line {
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.client-chart-fill {
  fill: color-mix(in srgb, var(--client-accent) 5%, transparent);
}
.client-chart-marker {
  stroke: var(--client-surface);
  stroke-width: 2;
}
.client-chart-axis {
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.client-chart-picker {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  height: 22px;
  margin: 6px 0 0;
  background: transparent;
}
.client-chart-picker::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 2px;
  background: var(--client-line);
}
.client-chart-picker::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -6px;
  border: 2px solid var(--client-surface);
  border-radius: 50%;
  background: var(--client-accent);
  box-shadow: 0 0 0 1px var(--client-accent);
}
.client-chart-picker::-moz-range-track {
  height: 2px;
  border-radius: 2px;
  background: var(--client-line);
}
.client-chart-picker::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 2px solid var(--client-surface);
  border-radius: 50%;
  background: var(--client-accent);
}
.client-chart-caption {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 0;
  margin-top: 6px;
  font-size: 13px;
}
.client-chart-caption .client-icon {
  width: 18px;
  height: 18px;
}
.client-chart-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
  margin-top: 18px;
  padding-top: 18px;
}
.client-chart-stats dt {
  font-size: 12px;
  margin-bottom: 4px;
}
.client-chart-stats dd {
  font-size: 16px;
}
.client-chart-note {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 0;
  padding: 14px 20px;
  border: 1px solid var(--client-line);
  border-radius: 16px;
  background: var(--client-surface);
  font-size: 12px;
}
.client-chart-note svg {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--client-accent);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) {
  .client-pagehead .client-outline-btn {
    width: 100%;
  }
  .client-charts-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .client-charts-toolbar .chart__tabs {
    width: 100%;
  }
  .client-charts-toolbar .chart__tab {
    flex: 1;
    min-height: 40px;
  }
  .client-sectionhead--split {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  #charts-overview > .client-pagehead {
    margin-bottom: 18px;
  }
  .client-chart-card {
    padding: 18px;
    border-radius: 13px;
  }
  .client-chart-value strong {
    font-size: 26px;
  }
  .client-chart-stats dd {
    font-size: 15px;
  }
  .client-chart-note {
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 13px;
  }
}
@media (min-width: 601px) and (max-width: 1100px) and (orientation: portrait) {
  .client-chart-card {
    padding: 24px;
    border-radius: 16px;
  }
  .client-chart-value strong {
    font-size: 30px;
  }
  .client-charts-toolbar .chart__tabs {
    width: auto;
  }
}

/* White page, cards lifted (Harshal, 23 Sep 2026). The pale blue page left white cards with
   nothing to stand on; the page is now white and every card carries the same fine border and a
   soft, navy-tinted shadow. The pale blue stays as the accent inside cards: the panel headings,
   the status chip and the period control. */
:root {
  --client-card-shadow: 0 1px 3px rgba(20, 33, 61, 0.08), 0 6px 20px rgba(20, 33, 61, 0.09);
  /* A shade darker than the divider lines inside a card, so the card's edge reads first. */
  --client-card-border: color-mix(in srgb, var(--client-line) 88%, var(--client-ink));
}
.client-board .spot-card,
.client-board .client-rate-panel,
.client-unit-card,
.client-chart-card,
.client-chart-note {
  border-color: var(--client-card-border);
  box-shadow: var(--client-card-shadow);
}

/* The shop's main colour as the frame (Harshal, 23 Sep 2026): the RTGS and RETAIL bars filled
   with it, and a thin edge of it along the top of every tile. The tiles stay white, so the
   rate book keeps the page's attention and the price flash keeps its contrast. */
.client-board .client-rate-panel h3 {
  background: var(--client-primary);
  color: var(--client-on-primary);
}
.client-board .spot-card,
.client-unit-card {
  border-top: 3px solid var(--client-primary);
}

/* The home screen trimmed to the rates (Harshal, 23 Sep 2026): no page title or line above the
   tiles and no last-tick time below them; the feed line alone closes the page. The title stays
   for a screen reader, so the page still has its heading. Other tabs keep the last tick. */
.client-board #overview > .section-heading > div:not(.connection-status) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.client-board #overview > .section-heading {
  justify-content: flex-end;
  margin-bottom: 16px;
}
.client-board[data-active-tab='live'] .footer .timestamp {
  display: none;
}

/* Charts with direction (23 Sep 2026): green above the period's start, red below it, a dashed
   start line, a fading fill, the latest price tagged on the right, the high and low marked, a
   change pill in the header and a crosshair that follows the pointer or finger. The colours are
   the fixed meaning colours, never a client's own. */
.client-chart-change {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.client-chart-change.is-up {
  color: var(--success);
  background: color-mix(in srgb, var(--success) 11%, var(--client-surface));
}
.client-chart-change.is-down {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 11%, var(--client-surface));
}
.client-chart-figure {
  position: relative;
}
.client-chart-svg {
  touch-action: pan-y;
  cursor: crosshair;
}
.client-chart-line.is-up {
  stroke: var(--success);
}
.client-chart-line.is-down {
  stroke: var(--danger);
}
.client-chart-dot.is-up {
  fill: var(--success);
}
.client-chart-dot.is-down {
  fill: var(--danger);
}
.client-chart-bridge {
  stroke: var(--client-muted);
  stroke-width: 1;
  stroke-dasharray: 3 4;
  opacity: 0.6;
}
.client-chart-baseline {
  stroke: var(--client-muted);
  stroke-width: 1;
  stroke-dasharray: 5 5;
  opacity: 0.8;
}
.client-chart-extreme {
  fill: var(--client-surface);
  stroke: var(--client-ink);
  stroke-width: 1.5;
}
.client-chart-extreme-label {
  fill: var(--client-ink);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  paint-order: stroke;
  stroke: var(--client-surface);
  stroke-width: 3px;
}
.client-chart-tag.is-up {
  fill: var(--success);
}
.client-chart-tag.is-down {
  fill: var(--danger);
}
.client-chart-tag-text {
  fill: #ffffff;
  font-size: 11px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.client-chart-cross {
  stroke: var(--client-ink);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: 0.5;
}
.client-chart-tip {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 1px;
  padding: 6px 9px;
  border-radius: 7px;
  background: var(--client-ink);
  color: var(--client-surface);
  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 12px));
  box-shadow: 0 4px 12px rgba(20, 33, 61, 0.18);
}
.client-chart-tip[hidden] {
  display: none;
}
.client-chart-tip[data-align='start'] {
  transform: translate(-8px, calc(-100% - 12px));
}
.client-chart-tip[data-align='end'] {
  transform: translate(calc(-100% + 8px), calc(-100% - 12px));
}
.client-chart-tip strong {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.client-chart-tip span {
  opacity: 0.75;
}

/* Controls lifted like the cards (23 Sep 2026): the Historical rates button and the period
   picker carry the same border and shadow as every card, so they read as things to press
   rather than as outlines on a white page. */
.client-outline-btn,
.client-charts-toolbar .chart__tabs {
  border: 1px solid var(--client-card-border);
  background: var(--client-surface);
  box-shadow: var(--client-card-shadow);
}
.client-outline-btn:hover {
  border-color: var(--client-accent);
}
.client-charts-toolbar .chart__tab[aria-pressed='true'] {
  background: var(--client-primary);
  color: var(--client-on-primary);
  box-shadow: none;
}

/* "While you watch", rebuilt as a card like the charts above it (23 Sep 2026). The heading is
   stacked, with the privacy line under the title instead of squeezed into a right column; the
   fields sit flush with the heading (the old .watch padding indented them); the product gets
   the widest column so its name is not cut; on phones and portrait tablets it takes its own
   row, the direction and price share the next, and the button runs full width. */
.client-board #watch {
  margin-top: 24px;
  padding: 24px;
  border: 1px solid var(--client-card-border);
  border-radius: 16px;
  background: var(--client-surface);
  box-shadow: var(--client-card-shadow);
}
.client-board #watch .section-heading--panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
}
.client-board #watch .section-heading--panel > div {
  width: 100%;
  max-width: none;
  text-align: left;
}
.client-board #watch .section-heading__eyebrow {
  max-width: none;
  text-align: left;
  white-space: nowrap;
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 1.6px;
  color: var(--client-muted);
}
.client-board #watch h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.4px;
}
.client-board #watch .section-heading__note {
  margin: 0;
  max-width: none;
  font-size: 12px;
  line-height: 1.6;
  text-align: left;
  color: var(--client-muted);
}
.client-board #watch .watch {
  gap: 14px;
  padding: 0;
}
.client-board #watch .watch__fields {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr) auto;
  align-items: end;
  gap: 12px;
}
.client-board #watch .watch__field {
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--client-muted);
}
.client-board #watch .watch__field :is(select, input) {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--client-control);
  border-radius: 9px;
  background: var(--client-surface);
  color: var(--client-ink);
  font-size: 14px;
}
.client-board #watch #watch-add {
  height: 44px;
  min-height: 44px;
  min-width: 0;
  padding: 0 22px;
  border: 0;
  border-radius: 9px;
  background: var(--client-primary);
  color: var(--client-on-primary);
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
}
.client-board #watch .watch__item {
  padding: 10px 12px;
  border-color: var(--client-line);
  border-radius: 9px;
}
.client-board #watch .watch__note {
  max-width: 72ch;
  font-size: 12px;
  line-height: 1.6;
  color: var(--client-muted);
}
.client-board #watch .watch__notify {
  color: var(--client-accent);
  font-weight: 600;
}
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) {
  .client-board #watch {
    padding: 18px;
    border-radius: 13px;
  }
  .client-board #watch .watch__fields {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .client-board #watch .watch__field:first-child,
  .client-board #watch #watch-add {
    grid-column: 1 / -1;
  }
  .client-board #watch #watch-add {
    width: 100%;
  }
}
@media (min-width: 601px) and (max-width: 1100px) and (orientation: portrait) {
  .client-board #watch {
    padding: 24px;
    border-radius: 16px;
  }
}

/* ---------------------------------------------------------------------------------------------
   About, Contact and Bank, to the approved prototype (23 Sep 2026), taking only what a shop can
   fill: no sample marketing paragraphs, no map, no serif face. Colours are the shop's tokens.
   --------------------------------------------------------------------------------------------- */
.client-board .client-eyebrow {
  margin: 0;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 1.8px;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--client-muted);
}
.client-board .board-details .is-display {
  margin: 14px 0 0;
  font-size: clamp(32px, 4.2vw, 52px);
  font-weight: 650;
  letter-spacing: -1.5px;
  line-height: 1.08;
  color: var(--client-ink);
}
.client-board .board-details .client-pagehead {
  margin-bottom: 32px;
}
.client-board .board-details .client-pagehead p:not(.client-eyebrow) {
  max-width: 46ch;
  margin: 16px 0 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--client-muted);
}
.client-text-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--client-ink);
  color: var(--client-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.client-text-link svg,
.client-link-row svg,
.client-shop-card__action svg,
.client-call-band svg,
.client-contact-row__icon svg,
.client-bank-hero__bank {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* About */
.client-about-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 24px;
  padding: 20px;
  border-radius: 20px;
  background: var(--client-surface-alt);
}
.client-about-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 40px 20px 20px 28px;
}
.client-board .client-about-hero .is-display {
  margin: 20px 0 24px;
}
.client-board .client-about-hero__text {
  max-width: 44ch;
  margin: 0 0 32px;
  font-size: 16px;
  line-height: 1.75;
  white-space: pre-line;
  color: var(--client-muted);
}
.client-about-hero__sign {
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding-top: 44px;
}
.client-about-hero__sign strong {
  font-size: 20px;
  font-weight: 600;
  color: var(--client-ink);
}
.client-about-hero__sign span {
  font-size: 10px;
  letter-spacing: 2.4px;
  color: var(--client-muted);
}
.client-about-hero__media {
  position: relative;
  display: grid;
  min-height: 440px;
  margin: 0;
  overflow: hidden;
  border-radius: 90px 16px 16px 16px;
  background: var(--client-surface);
}
.client-about-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.client-about-hero__art {
  display: grid;
  place-items: center;
  padding: 48px;
}
.client-about-hero__art[hidden] {
  display: none;
}
.client-about-hero__art svg {
  width: 100%;
  max-width: 300px;
  fill: none;
  stroke: var(--client-accent);
  stroke-width: 1.3;
}
.client-about-hero__media figcaption {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  padding: 8px 14px;
  border-radius: 3px;
  background: var(--client-surface);
  color: var(--client-ink);
  font-size: 10px;
  letter-spacing: 2px;
  white-space: nowrap;
}
.client-about-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--client-line);
  border-bottom: 1px solid var(--client-line);
}
.client-about-points li {
  padding: 30px 28px;
}
.client-about-points li + li {
  border-left: 1px solid var(--client-line);
}
.client-about-points span {
  font-size: 15px;
  font-style: italic;
  color: var(--client-muted);
}
.client-board .client-about-points h3 {
  margin: 16px 0 8px;
  font-size: 16px;
  font-weight: 650;
}
.client-board .client-about-points p {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--client-muted);
}

/* Contact */
.client-board .client-contact-layout {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}
.client-shop-card {
  padding: 36px;
  border-radius: 20px;
  background: var(--client-primary);
  color: var(--client-on-primary);
  box-shadow: var(--client-card-shadow);
}
.client-board .client-shop-card .client-eyebrow {
  color: color-mix(in srgb, var(--client-on-primary) 72%, var(--client-primary));
}
.client-board .client-shop-card h3 {
  margin: 22px 0 18px;
  font-size: 32px;
  font-weight: 650;
  letter-spacing: -0.8px;
  line-height: 1.15;
  color: var(--client-on-primary);
}
.client-board .client-shop-card__address {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  white-space: pre-line;
  color: color-mix(in srgb, var(--client-on-primary) 86%, var(--client-primary));
}
.client-shop-card__action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  margin-top: 30px;
  padding: 0 20px;
  border-radius: 6px;
  background: var(--client-surface);
  color: var(--client-ink);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.client-shop-card__action[hidden] {
  display: none;
}
.client-board .client-contact-reach h3 {
  margin: 14px 0 10px;
  font-size: 30px;
  font-weight: 650;
  letter-spacing: -0.8px;
}
.client-board .client-contact-reach__line {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--client-muted);
}
.client-board .client-contact-card {
  margin-top: 22px;
  padding: 4px 22px;
  border: 1px solid var(--client-card-border);
  border-radius: 16px;
  background: var(--client-surface);
  box-shadow: var(--client-card-shadow);
}
.client-board .client-contact-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--client-line);
}
.client-board .client-contact-row:last-child {
  border-bottom: 0;
}
.client-board .client-contact-row[hidden] {
  display: none;
}
.client-contact-row__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--client-line);
  border-radius: 50%;
  color: var(--client-ink);
}
.client-board .client-contact-row .client-eyebrow {
  margin: 0 0 4px;
  font-size: 10px;
}
.client-contact-row strong {
  display: block;
  font-size: 18px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.client-contact-row__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid var(--client-primary);
  border-radius: 9px;
  background: var(--client-primary);
  color: var(--client-on-primary);
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
}
.client-contact-row__action--quiet {
  border-color: var(--client-control);
  background: var(--client-surface);
  color: var(--client-ink);
}
.client-contact-row__action[hidden] {
  display: none;
}
.client-link-row {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: 36px;
  padding: 22px 4px;
  border-top: 1px solid var(--client-line);
  border-bottom: 1px solid var(--client-line);
  color: var(--client-ink);
  text-decoration: none;
}
.client-link-row__icon svg {
  width: 22px;
  height: 22px;
}
.client-link-row strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
}
.client-link-row small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--client-muted);
}

/* Bank */
.client-board .client-bank-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.client-board .client-bank-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 300px;
  margin: 0;
  padding: 30px;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 18px 40px rgba(20, 33, 61, 0.22);
}
.client-board .client-bank-hero::after {
  content: '';
  position: absolute;
  top: -40%;
  right: -30%;
  width: 90%;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--client-on-primary) 14%, transparent);
  border-radius: 50%;
  pointer-events: none;
}
.client-bank-hero__top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.client-board .client-bank-hero__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border: 1px solid color-mix(in srgb, var(--client-on-primary) 55%, transparent);
  border-radius: 50%;
  color: var(--client-on-primary);
  font-size: 22px;
}
.client-board .client-bank-hero__name {
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--client-on-primary);
}
.client-bank-hero__bank {
  width: 22px;
  height: 22px;
  margin-left: auto;
  opacity: 0.8;
}
.client-board .client-bank-hero .client-bank-hero__label {
  margin: 40px 0 10px;
  font-size: 10px;
  letter-spacing: 1.8px;
}
.client-board .client-bank-hero strong {
  margin: 0;
  font-size: 26px;
  letter-spacing: 3px;
  font-variant-numeric: tabular-nums;
}
.client-bank-hero__bottom {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 32px;
}
.client-board .client-bank-hero__bottom .client-bank-hero__label {
  margin: 0 0 6px;
}
.client-board .client-bank-hero h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 650;
  color: var(--client-on-primary);
}
.client-board .client-bank-hero__bottom > span {
  max-width: 48%;
  font-size: 11px;
  letter-spacing: 1px;
  text-align: right;
  text-transform: uppercase;
}
.client-board .client-bank-info .client-eyebrow {
  margin-bottom: 6px;
  color: var(--client-ink);
}
.client-board .client-bank-info .bank-details {
  gap: 0;
  margin: 0;
}
.client-board .client-bank-info .bank-details__row {
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--client-line);
}
.client-board .client-bank-info .bank-details dt {
  font-size: 13px;
  color: var(--client-muted);
}
.client-board .client-bank-info .bank-details dd {
  justify-content: flex-end;
  gap: 12px;
  text-align: right;
}
.client-board .client-bank-info .bank-details__value {
  font-size: 15px;
  font-weight: 600;
  color: var(--client-ink);
}
.client-board .client-bank-info .bank-details__copy {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--client-control);
  border-radius: 7px;
  background: var(--client-surface);
  color: var(--client-ink);
  font-size: 12px;
}
.client-board .client-bank-info .bank-details__warning {
  margin: 20px 0 0;
  border-radius: 8px;
  font-size: 13px;
}
.client-call-band {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  margin-top: 44px;
  padding: 32px;
  border-radius: 18px;
  background: var(--client-surface-alt);
}
.client-call-band__icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border: 1px solid var(--client-line);
  border-radius: 50%;
  background: var(--client-surface);
  color: var(--client-ink);
}
.client-board .client-call-band h3 {
  margin: 8px 0 6px;
  font-size: 26px;
  font-weight: 650;
  letter-spacing: -0.6px;
}
.client-board .client-call-band p:not(.client-eyebrow) {
  margin: 0;
  font-size: 14px;
  color: var(--client-muted);
}
.client-call-band__action {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-height: 52px;
  padding: 0 22px;
  border-radius: 6px;
  background: var(--client-primary);
  color: var(--client-on-primary);
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}
.client-call-band__action[hidden] {
  display: none;
}
.client-bank-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 28px;
}
.client-bank-foot strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
}
.client-bank-foot span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--client-muted);
}
.client-bank-foot span[hidden] {
  display: none;
}

@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) {
  .client-about-hero {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px;
    border-radius: 16px;
  }
  .client-about-hero__copy {
    padding: 24px 12px 8px;
  }
  .client-about-hero__sign {
    padding-top: 28px;
  }
  .client-about-hero__media {
    min-height: 300px;
    border-radius: 60px 12px 12px 12px;
  }
  .client-about-points {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 32px;
  }
  .client-about-points li {
    padding: 22px 4px;
  }
  .client-about-points li + li {
    border-left: 0;
    border-top: 1px solid var(--client-line);
  }
  .client-board .client-contact-layout,
  .client-board .client-bank-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
  .client-shop-card {
    padding: 26px;
    border-radius: 16px;
  }
  .client-board .client-shop-card h3 {
    font-size: 26px;
  }
  .client-board .client-contact-card {
    padding: 2px 16px;
  }
  .client-board .client-contact-row {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 12px;
  }
  .client-contact-row__icon {
    width: 40px;
    height: 40px;
  }
  .client-contact-row strong {
    font-size: 16px;
  }
  .client-board .client-bank-hero {
    min-height: 240px;
    padding: 24px;
  }
  .client-board .client-bank-hero strong {
    font-size: 21px;
  }
  .client-bank-hero__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .client-board .client-bank-hero__bottom > span {
    max-width: none;
    text-align: left;
  }
  .client-call-band {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 16px;
    padding: 22px;
  }
  .client-call-band__icon {
    width: 48px;
    height: 48px;
  }
  .client-board .client-call-band h3 {
    font-size: 22px;
  }
  .client-call-band__action {
    grid-column: 1 / -1;
  }
  .client-bank-foot {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Bank, second pass (23 Sep 2026): the NEFT / RTGS / IMPS graphic in place of the card, every
   value copied on a tap, and no warning line or name-and-address foot. */
.client-transfer {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) 44px minmax(0, 1.3fr);
  align-items: center;
  gap: 14px;
  min-height: 300px;
  margin: 0;
  padding: 30px 28px;
  overflow: hidden;
  border-radius: 18px;
  background: var(--client-primary);
  color: var(--client-on-primary);
  box-shadow: 0 18px 40px rgba(20, 33, 61, 0.22);
}
.client-transfer::after {
  content: '';
  position: absolute;
  top: -45%;
  left: -25%;
  width: 80%;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--client-on-primary) 12%, transparent);
  border-radius: 50%;
  pointer-events: none;
}
.client-transfer__bank {
  display: grid;
  justify-items: center;
  gap: 12px;
}
.client-transfer__bank svg {
  width: 110px;
  height: 110px;
  fill: none;
  stroke: var(--client-on-primary);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.client-transfer__bank span {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--client-on-primary) 78%, var(--client-primary));
}
.client-transfer__flow {
  width: 44px;
  height: 150px;
  fill: none;
  stroke: var(--client-on-primary);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.6;
}
.client-transfer__modes {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.client-transfer__modes li {
  display: grid;
  gap: 2px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--client-surface);
  color: var(--client-ink);
}
.client-transfer__modes strong {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
}
.client-transfer__modes span {
  font-size: 12px;
  color: var(--client-muted);
}
.client-board .client-bank-info__hint {
  margin: 4px 0 6px;
  font-size: 12px;
  color: var(--client-muted);
}
.client-board .client-bank-info .bank-details__value {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: -6px -10px;
  padding: 6px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--client-ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.client-board .client-bank-info .bank-details__value:hover {
  background: var(--client-surface-alt);
}
.client-board .client-bank-info .bank-details__value:focus-visible {
  outline: 2px solid var(--client-accent);
  outline-offset: 2px;
}
.client-board .bank-details__value svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--client-muted);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.client-board .bank-details__value .done-icon,
.client-board .bank-details__value.is-copied .copy-icon {
  display: none;
}
.client-board .bank-details__value.is-copied .done-icon {
  display: inline;
  stroke: var(--success);
}
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) {
  .client-transfer {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    min-height: 0;
    padding: 22px;
  }
  .client-transfer__bank {
    grid-auto-flow: column;
    justify-content: start;
    align-items: center;
    gap: 14px;
  }
  .client-transfer__bank svg {
    width: 56px;
    height: 56px;
  }
  .client-transfer__flow {
    display: none;
  }
}

/* ---------------------------------------------------------------------------------------------
   Gold Trends, to the approved prototype (23 Sep 2026): the chart card with a what-happened
   call-out, the indicator and its disclaimer beside it, and the Charts page's up/down chart.
   --------------------------------------------------------------------------------------------- */
.client-board #price-chart {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.client-board #price-chart .client-pagehead {
  margin-bottom: 28px;
}
.client-trends {
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
.client-trends:has(#trend[hidden]) {
  grid-template-columns: minmax(0, 1fr);
}
.client-board .client-trends__main,
.client-board .client-trends__card {
  padding: 24px;
  border: 1px solid var(--client-card-border);
  border-radius: 16px;
  background: var(--client-surface);
  box-shadow: var(--client-card-shadow);
}
.client-board .client-trends__main {
  gap: 0;
}
.client-board #price-chart .chart__controls {
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
}
.client-board #price-chart .chart__tabs {
  display: flex;
  gap: 3px;
  padding: 4px;
  border: 1px solid var(--client-card-border);
  border-radius: 9px;
  background: var(--client-surface);
  box-shadow: var(--client-card-shadow);
}
.client-board #price-chart .chart__tab {
  min-height: 34px;
  padding: 7px 14px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--client-muted);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.client-board #price-chart .chart__tab[aria-pressed='true'] {
  background: var(--client-primary);
  color: var(--client-on-primary);
  font-weight: 650;
}
.client-trends__resolution {
  margin-left: auto;
  padding: 5px 10px;
  border-radius: 6px;
  background: var(--client-tint);
  color: var(--client-muted);
  font-size: 11px;
  white-space: nowrap;
}
.client-trends__resolution:empty {
  display: none;
}
.client-trend-callout {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin: 20px 0 8px;
  padding: 18px 20px;
  border-radius: 12px;
}
.client-trend-callout[hidden] {
  display: none;
}
.client-trend-callout.is-up {
  background: color-mix(in srgb, var(--success) 9%, var(--client-surface));
  color: var(--success);
}
.client-trend-callout.is-down {
  background: color-mix(in srgb, var(--danger) 9%, var(--client-surface));
  color: var(--danger);
}
.client-trend-callout__icon {
  width: 26px;
  height: 26px;
  margin-top: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.client-trend-callout.is-up .down,
.client-trend-callout.is-down .up {
  display: none;
}
.client-board .client-trend-callout .client-eyebrow {
  color: inherit;
}
.client-board .client-trend-callout__title {
  margin: 6px 0 4px;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.4px;
  color: var(--client-ink);
}
.client-board .client-trend-callout__line {
  margin: 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--client-muted);
}
.client-board #price-chart .chart__svg {
  height: auto;
  overflow: visible;
  touch-action: pan-y;
}
.client-board #price-chart .chart__axis {
  fill: var(--client-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.client-board #price-chart .chart__grid {
  stroke: var(--client-line);
}
.client-board #price-chart .chart__line {
  stroke-width: 2;
  stroke-linecap: round;
}
.client-board #price-chart .chart__line.is-up {
  stroke: var(--success);
}
.client-board #price-chart .chart__line.is-down {
  stroke: var(--danger);
}
.chart__baseline {
  stroke: var(--client-muted);
  stroke-width: 1;
  stroke-dasharray: 5 5;
  opacity: 0.8;
}
.chart__extreme {
  fill: var(--client-surface);
  stroke: var(--client-ink);
  stroke-width: 1.5;
}
.chart__extreme-label {
  fill: var(--client-ink);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  paint-order: stroke;
  stroke: var(--client-surface);
  stroke-width: 3px;
}
.chart__dot.is-up,
.chart__tag.is-up {
  fill: var(--success);
}
.chart__dot.is-down,
.chart__tag.is-down {
  fill: var(--danger);
}
.chart__dot {
  stroke: var(--client-surface);
  stroke-width: 2;
}
.chart__tag-text {
  fill: #ffffff;
  font-size: 11px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.client-board #price-chart .chart__desc {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--client-muted);
}
.client-board #price-chart .chart__stats {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 18px 0 0;
  padding: 0;
  border-top: 0;
}
.client-board #price-chart .chart__stat {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--client-line);
}
.client-board #price-chart .chart__stat:last-child {
  border-bottom: 0;
}
.client-board #price-chart .chart__stats dt {
  font-size: 13px;
  color: var(--client-muted);
}
.client-board #price-chart .chart__stats dd {
  font-size: 15px;
  font-weight: 650;
  color: var(--client-ink);
}
.client-board #price-chart .chart__stats dd.is-up {
  color: var(--success);
}
.client-board #price-chart .chart__stats dd.is-down {
  color: var(--danger);
}
.client-board .client-trends__source {
  margin: 12px 0 0;
  font-size: 11px;
  color: var(--client-muted);
}
.client-board .client-trends__card h3 {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.4px;
}
.client-board .client-trends__card .trend__state {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--client-ink);
}
.client-board .client-trends__card .trend__note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 16px 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--client-surface-alt);
  color: var(--client-muted);
  font-size: 12px;
  line-height: 1.6;
}
.client-board .client-trends__card .trend__note svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  fill: none;
  stroke: var(--client-accent);
  stroke-width: 1.7;
  stroke-linecap: round;
}
.client-board .client-trends__card .trend__lang {
  display: grid;
  gap: 6px;
  margin: 0 0 16px;
}
.client-board .client-trends__card .trend__lang-label {
  font-size: 12px;
  color: var(--client-muted);
}
.client-board .client-trends__card .trend__lang-select {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--client-control);
  border-radius: 9px;
  background-color: var(--client-surface);
  color: var(--client-ink);
  font-size: 14px;
}
.client-board .client-trends__card .client-outline-btn {
  width: 100%;
}
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) {
  .client-trends {
    grid-template-columns: minmax(0, 1fr);
  }
  .client-board .client-trends__main,
  .client-board .client-trends__card {
    padding: 18px;
    border-radius: 13px;
  }
  .client-board #price-chart .chart__tabs:last-of-type {
    flex: 1;
  }
  .client-board #price-chart .chart__tabs:last-of-type .chart__tab {
    flex: 1;
  }
  .client-trends__resolution {
    margin-left: 0;
  }
  .client-board .client-trend-callout__title {
    font-size: 17px;
  }
}

/* ---------------------------------------------------------------------------------------------
   Calculators, to the approved prototype (23 Sep 2026): "Work it out", the calculators as a
   list of tiles with an icon and a hint, the chosen one in a card, and the answer in a tinted
   box with its figure large. Still worked out as you type, so there is no Calculate button.
   --------------------------------------------------------------------------------------------- */
.client-board #calculators-panel {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.client-board #calculators-panel .client-pagehead {
  margin-bottom: 28px;
}
.client-calc-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.client-board #calculators-panel .calc-tabs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  overflow: visible;
}
.client-board #calculators-panel .calc-tabs__tab {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-height: 0;
  padding: 14px 18px;
  border: 1px solid var(--client-card-border);
  border-radius: 12px;
  background: var(--client-surface);
  box-shadow: var(--client-card-shadow);
  color: var(--client-ink);
  text-align: left;
  cursor: pointer;
}
.client-board #calculators-panel .calc-tabs__tab svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.client-board #calculators-panel .calc-tabs__tab strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
}
.client-board #calculators-panel .calc-tabs__tab small {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--client-muted);
}
/* The same edge as the spot tiles on Live Rate: the card border and a thin top edge in the
   shop's main colour. */
.client-board #calculators-panel .calc-tabs__tab {
  border-top: 3px solid var(--client-primary);
}
/* The chosen calculator filled with the shop's main colour (Harshal, 23 Sep 2026). */
.client-board #calculators-panel .calc-tabs__tab[aria-selected='true'] {
  border-color: var(--client-primary);
  background: var(--client-primary);
  color: var(--client-on-primary);
}
.client-board #calculators-panel .calc-tabs__tab[aria-selected='true'] small {
  color: color-mix(in srgb, var(--client-on-primary) 78%, var(--client-primary));
}
.client-board #calculators-panel .calc-grid {
  display: block;
  padding: 0;
}
.client-board #calculators-panel .calc {
  gap: 14px;
  padding: 26px;
  border: 1px solid var(--client-card-border);
  border-radius: 16px;
  background: var(--client-surface);
  box-shadow: var(--client-card-shadow);
}
.client-board #calculators-panel .calc__title {
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.4px;
}
.client-board #calculators-panel .calc__intro {
  font-size: 13px;
  color: var(--client-muted);
}
.client-board #calculators-panel .calc__fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.client-board #calculators-panel .calc__field {
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--client-muted);
}
.client-board #calculators-panel .calc__field :is(input, select) {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--client-control);
  border-radius: 9px;
  background-color: var(--client-surface);
  color: var(--client-ink);
  font-size: 14px;
}
.client-board #calculators-panel .calc__rate {
  font-size: 12px;
  color: var(--client-muted);
}
.client-board #calculators-panel .calc__out {
  gap: 8px 0;
  margin-top: 4px;
  padding: 20px 22px;
  border: 0;
  border-radius: 12px;
  background: var(--client-surface-alt);
}
.client-board #calculators-panel .calc__out dt {
  font-size: 13px;
  color: var(--client-muted);
}
.client-board #calculators-panel .calc__out dd {
  padding-left: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--client-ink);
}
.client-board #calculators-panel .calc__out dt:last-of-type,
.client-board #calculators-panel .calc__out dd:last-of-type {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--client-line);
}
.client-board #calculators-panel .calc__out dt:last-of-type {
  /* Stretched to the row, the label sitting at its foot, so its top border lines up with the
     figure's rather than dropping with the label. */
  display: flex;
  align-items: flex-end;
  align-self: stretch;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.client-board #calculators-panel .calc__out dd:last-of-type {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.6px;
}
/* The twin-answer panel keeps both figures equal (board.css explains why). */
.client-board #calculators-panel .calc__out--twin dt:last-of-type,
.client-board #calculators-panel .calc__out--twin dd:last-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.client-board #calculators-panel .dashboard-table-foot {
  margin-top: 16px;
  padding: 0;
  border: 0;
  font-size: 11px;
  color: var(--client-muted);
}
.client-board[data-active-tab='calculators'] #weight-grid {
  border: 1px solid var(--client-card-border);
  border-radius: 16px;
  box-shadow: var(--client-card-shadow);
}
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) {
  .client-calc-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }
  .client-board #calculators-panel .calc-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .client-board #calculators-panel .calc-tabs__tab {
    gap: 10px;
    padding: 12px;
  }
  .client-board #calculators-panel .calc-tabs__tab small {
    font-size: 11px;
  }
  .client-board #calculators-panel .calc {
    padding: 18px;
    border-radius: 13px;
  }
  .client-board #calculators-panel .calc__fields {
    grid-template-columns: minmax(0, 1fr);
  }
  .client-board #calculators-panel .calc__out dd:last-of-type {
    font-size: 24px;
  }
  .client-board[data-active-tab='calculators'] #weight-grid .section-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 0 18px;
    text-align: left;
  }
  .client-board[data-active-tab='calculators'] #weight-grid .section-heading :is(div, p) {
    max-width: none;
    text-align: left;
  }
}

/* Every rate, every weight: two weights now, so the table fits a phone without scrolling. The
   32rem minimum in board.css was for the four-column table. */
@media (max-width: 42.99rem) {
  .client-board #weight-grid .rate-table {
    width: 100%;
    min-width: 0;
  }
  .client-board #weight-grid .rate-table th,
  .client-board #weight-grid .rate-table td {
    padding: 12px 10px;
  }
  /* The outer columns inset like the heading above them, not against the card's edge. */
  .client-board #weight-grid .rate-table :is(th, td):first-child {
    padding-left: 18px;
  }
  .client-board #weight-grid .rate-table :is(th, td):last-child {
    padding-right: 18px;
  }
  .client-board #weight-grid .rate-table tbody th,
  .client-board #weight-grid .rate-table thead th:first-child {
    white-space: normal;
  }
}

/* ---------------------------------------------------------------------------------------------
   Historical rates, to the approved prototype (23 Sep 2026): the heading outside the card,
   labelled controls with the series named, a tinted table head, whole rupees, the close in bold
   and the day's change coloured. On a phone only Date, Close and Change, which fit.
   --------------------------------------------------------------------------------------------- */
.client-board #history-panel {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.client-board #history-panel .client-pagehead {
  margin-bottom: 28px;
}
.client-history-card {
  padding: 24px;
  border: 1px solid var(--client-card-border);
  border-radius: 16px;
  background: var(--client-surface);
  box-shadow: var(--client-card-shadow);
}
.client-history-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
}
.client-board .client-field {
  display: grid;
  gap: 6px;
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--client-muted);
}
.client-board .client-history-controls select {
  min-width: 200px;
  height: 44px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--client-control);
  border-radius: 9px;
  background-color: var(--client-surface);
  color: var(--client-ink);
  font-size: 14px;
}
.client-history-chip {
  margin-left: auto;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--client-tint);
  color: var(--client-muted);
  font-size: 11px;
  white-space: nowrap;
}
.client-board .client-history-status {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--client-muted);
}
.client-board .client-history-status:empty {
  display: none;
}
.client-board #history-panel .history-table-wrap {
  margin-top: 20px;
}
.client-board #history-panel .history-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.client-board #history-panel .history-table thead th {
  padding: 12px 16px;
  border: 0;
  background: var(--client-surface-alt);
  color: var(--client-muted);
  font-size: 12px;
  font-weight: 600;
  text-align: right;
}
.client-board #history-panel .history-table thead th:first-child {
  border-radius: 8px 0 0 8px;
  text-align: left;
}
.client-board #history-panel .history-table thead th:last-child {
  border-radius: 0 8px 8px 0;
}
.client-board #history-panel .history-table tbody :is(th, td) {
  padding: 15px 16px;
  border-bottom: 1px solid var(--client-line);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.client-board #history-panel .history-table tbody th {
  font-weight: 500;
  color: var(--client-accent);
  text-align: left;
}
.client-board #history-panel .history-table tbody tr:last-child :is(th, td) {
  border-bottom: 0;
}
.client-board #history-panel .history-table td.is-close {
  font-weight: 700;
  color: var(--client-ink);
}
.client-board #history-panel .history-table td.is-up {
  color: var(--success);
}
.client-board #history-panel .history-table td.is-down {
  color: var(--danger);
}
.client-history-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 20px;
}
.client-history-foot #history-page {
  font-size: 13px;
  color: var(--client-muted);
}
.client-history-pager {
  display: flex;
  gap: 8px;
}
.client-board .client-history-pager button {
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--client-card-border);
  border-radius: 9px;
  background: var(--client-surface);
  box-shadow: var(--client-card-shadow);
  color: var(--client-ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.client-board .client-history-pager button:disabled {
  box-shadow: none;
  color: var(--client-muted);
  cursor: default;
  opacity: 0.55;
}
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) {
  .client-history-card {
    padding: 18px;
    border-radius: 13px;
  }
  .client-history-controls .client-field {
    flex: 1 1 140px;
  }
  .client-board .client-history-controls select {
    width: 100%;
    min-width: 0;
  }
  .client-history-chip {
    margin-left: 0;
  }
}
@media (max-width: 600px) {
  /* Open, High and Low from tablet width up; a phone gets the date, the close and the change. */
  .client-board #history-panel .history-table :is(th, td):nth-child(2),
  .client-board #history-panel .history-table :is(th, td):nth-child(3),
  .client-board #history-panel .history-table :is(th, td):nth-child(4) {
    display: none;
  }
  .client-board #history-panel .history-table :is(thead th, tbody th, tbody td) {
    padding-inline: 12px;
  }
}

/* ---------------------------------------------------------------------------------------------
   Our products (23 Sep 2026): the prototype's page, categories only. Each category is a card
   with a tinted panel and its icon where the prototype had a photograph, then its name and a
   line; the visit-or-call block below is a band like the Bank page's.
   --------------------------------------------------------------------------------------------- */
.client-board #products-offered {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.client-board #products-offered .client-pagehead {
  margin-bottom: 28px;
}
.client-board #products-offered .offer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.client-board #products-offered .offer-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--client-card-border);
  border-top: 3px solid var(--client-primary);
  border-radius: 16px;
  background: var(--client-surface);
  box-shadow: var(--client-card-shadow);
}
.client-board #products-offered .offer-card[hidden] {
  display: none;
}
.offer-card__art {
  position: relative;
  display: grid;
  place-items: center;
  height: 180px;
  background: var(--client-surface-alt);
}
.offer-card__chip {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 5px 9px;
  border-radius: 5px;
  background: var(--client-surface);
  color: var(--client-muted);
  font-size: 10px;
  letter-spacing: 1px;
}
.client-board #products-offered .offer-card__icon {
  width: 72px;
  height: 72px;
  fill: none;
  stroke: var(--client-primary);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.offer-card__body {
  padding: 20px 22px 24px;
}
.client-board #products-offered .offer-card__name {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 650;
  color: var(--client-ink);
}
.client-board #products-offered .offer-card__line {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--client-muted);
}
.client-board #products-offered .offer-contact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 28px 0 0;
  padding: 26px 28px;
  border: 0;
  border-radius: 18px;
  background: var(--client-surface-alt);
}
.client-board #products-offered .offer-contact[hidden] {
  display: none;
}
.client-board #products-offered .offer-contact__lead {
  margin: 0;
  font-size: 18px;
  font-weight: 650;
  color: var(--client-ink);
}
.client-board #products-offered .offer-contact__address {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--client-muted);
}
.client-board #products-offered .offer-contact__call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 8px;
  background: var(--client-primary);
  color: var(--client-on-primary);
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
}
.client-board #products-offered .offer-contact__call[hidden] {
  display: none;
}
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) {
  .client-board #products-offered .offer-grid {
    gap: 12px;
  }
  .offer-card__art {
    height: 120px;
  }
  .client-board #products-offered .offer-card__icon {
    width: 52px;
    height: 52px;
  }
  .offer-card__body {
    padding: 14px 14px 16px;
  }
  .client-board #products-offered .offer-card__name {
    font-size: 15px;
  }
  .client-board #products-offered .offer-card__line {
    font-size: 12px;
  }
  .client-board #products-offered .offer-contact {
    flex-direction: column;
    align-items: stretch;
    padding: 20px;
  }
  .client-board #products-offered .offer-contact__call {
    justify-content: center;
  }
}

/* ---------------------------------------------------------------------------------------------
   Help, to the approved prototype (23 Sep 2026): a heading with Ask the shop, a search box with
   its icon, and every answer in one card with + / − marks. #rate-guide-panel and #help-panel
   join into that one card on the Help tab; on the Rate guide tab the first stands alone.
   --------------------------------------------------------------------------------------------- */
.client-board :is(#rate-guide-panel, #help-panel) {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.client-board #rate-guide-panel .client-pagehead {
  margin-bottom: 24px;
}
.client-search {
  position: relative;
  display: block;
  max-width: 480px;
  margin: 0 0 22px;
}
.client-search svg {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--client-muted);
  stroke-width: 1.8;
  stroke-linecap: round;
}
.client-board .client-search input {
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  margin: 0;
  padding: 0 14px 0 42px;
  border: 1px solid var(--client-card-border);
  border-radius: 10px;
  background: var(--client-surface);
  box-shadow: var(--client-card-shadow);
  color: var(--client-ink);
  font-size: 14px;
}
.client-faq {
  padding: 6px 24px;
  border: 1px solid var(--client-card-border);
  border-radius: 16px;
  background: var(--client-surface);
  box-shadow: var(--client-card-shadow);
}
/* The answers card and the links under it sit close on the Help tab. */
.client-board[data-active-tab='help'] .board-main {
  gap: 0;
}
.client-board .client-faq details {
  padding: 0;
  border-bottom: 1px solid var(--client-line);
}
.client-board .client-faq details:last-of-type {
  border-bottom: 0;
}
.client-board .client-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 0;
  padding: 22px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--client-ink);
  list-style: none;
  cursor: pointer;
}
.client-board .client-faq summary::-webkit-details-marker {
  display: none;
}
.client-faq__mark {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
}
.client-faq__mark::before,
.client-faq__mark::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 0;
  width: 14px;
  height: 1.8px;
  border-radius: 1px;
  background: var(--client-ink);
}
.client-faq__mark::after {
  transform: rotate(90deg);
}
.client-board .client-faq details[open] .client-faq__mark::after {
  transform: none;
}
/* An older rule turns the open marker 45 degrees; this one is a plus that becomes a minus. */
.client-board .client-faq details[open] .client-faq__mark,
.client-board .client-faq summary .client-faq__mark {
  transform: none;
}
.client-board .client-faq details p {
  max-width: 72ch;
  margin: -6px 0 22px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--client-muted);
}
.client-board .client-faq__empty {
  margin: 0;
  padding: 22px 0;
  font-size: 14px;
  color: var(--client-muted);
}
/* The old panels' own pieces, not used by the new markup. */
.client-board #rate-guide-panel :is(.dashboard-guide__intro, .dashboard-guide__items) {
  display: none;
}
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) {
  .client-search {
    max-width: none;
  }
  .client-faq {
    padding: 2px 18px;
    border-radius: 13px;
  }
  .client-board .client-faq summary {
    padding: 18px 0;
    font-size: 14px;
  }
}

/* ---------------------------------------------------------------------------------------------
   Account & Settings, to the approved prototype's layout (23 Sep 2026), with only what the
   website really has. Login is a pop-up (below); these are the pieces it reuses.
   --------------------------------------------------------------------------------------------- */
.client-board #settings-panel {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.client-board #settings-panel .client-pagehead {
  margin-bottom: 28px;
}
.client-login__mark {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 9px;
  font-size: 22px;
}
.client-login__primary svg,
.client-settings-row svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.client-login__primary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  margin-top: 6px;
  padding: 0 18px;
  border-radius: 9px;
  background: var(--client-primary);
  color: var(--client-on-primary);
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}
.client-login__secondary {
  width: 100%;
}
.client-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
.client-settings-card {
  padding: 24px;
  border: 1px solid var(--client-card-border);
  border-radius: 16px;
  background: var(--client-surface);
  box-shadow: var(--client-card-shadow);
}
.client-board .client-settings-card h3 {
  margin: 0 0 14px;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.4px;
}
.client-board .client-settings-card > p {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--client-muted);
}
.client-settings-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.client-settings-line strong {
  font-size: 15px;
}
.client-board .client-settings-line p {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--client-muted);
}
.client-settings-chip {
  flex: none;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--client-tint);
  color: var(--client-muted);
  font-size: 12px;
}
.client-board .client-settings__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}
.client-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--client-line);
  color: var(--client-ink);
  text-decoration: none;
}
.client-settings-row:last-child {
  border-bottom: 0;
}
.client-settings-row span {
  font-size: 13px;
  color: var(--client-muted);
}
.client-settings-row strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
}
.client-board .client-settings-status {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--client-muted);
}
.client-board .client-settings-status:empty {
  display: none;
}
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) {
  .client-settings-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .client-settings-card {
    padding: 18px;
    border-radius: 13px;
  }
  .client-settings__actions .client-outline-btn {
    width: 100%;
  }
}

/* Settings' Account card: the app's account, laid out, each line saying where it lives. */
.client-board .client-account-card {
  grid-row: span 2;
}
.client-account-rows {
  margin: 0 0 16px;
  border-top: 1px solid var(--client-line);
}
.client-account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--client-line);
}
.client-account-row span {
  font-size: 13px;
  color: var(--client-muted);
}
.client-account-row strong {
  font-size: 13px;
  font-weight: 500;
  color: var(--client-muted);
}
.client-account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.client-account-action {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px dashed var(--client-control);
  border-radius: 9px;
  color: var(--client-muted);
  font-size: 13px;
}
.client-account-action--danger {
  border-color: color-mix(in srgb, var(--danger) 55%, var(--client-surface));
  color: var(--danger);
}
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) {
  .client-board .client-account-card {
    grid-row: auto;
  }
}

/* The sign-in pop-up (23 Sep 2026): says where to sign in, over the page you were reading. */
.client-login-dialog {
  width: min(440px, calc(100vw - 32px));
  padding: 28px;
  border: 1px solid var(--client-card-border);
  border-radius: 18px;
  background: var(--client-surface);
  box-shadow: 0 24px 60px rgba(20, 33, 61, 0.25);
  color: var(--client-ink);
}
.client-login-dialog[open] {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.client-login-dialog::backdrop {
  background: rgba(20, 33, 61, 0.55);
}
.client-login-dialog .client-login__mark {
  background: var(--client-primary);
  color: var(--client-on-primary);
}
.client-board .client-login-dialog h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -0.5px;
}
.client-board .client-login-dialog > p:not(.client-eyebrow) {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--client-muted);
}
.client-login-dialog__close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--client-ink);
  cursor: pointer;
}
.client-login-dialog__close:hover {
  background: var(--client-surface-alt);
}
.client-login-dialog__close svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
}
.client-login-dialog {
  position: fixed;
}

/* Desktop header (23 Sep 2026): the bar stays full width, and its contents line up with the
   page's content edges (.app-container: 1240px at most, 32px padding, so 1176px of content). The
   menu and share buttons now sit over the cards' left and right edges instead of out at the
   window's, at every desktop width. Phones and portrait tablets keep their own header. */
@media (min-width: 901px) and (orientation: landscape), (min-width: 1101px) {
  .client-board .client-header {
    padding-inline: max(32px, calc((100% - 1176px) / 2));
  }
}

/* ---------------------------------------------------------------------------------------------
   Calls (23 Sep 2026): every Call button is green, the colour a phone uses for "call", not the
   shop's primary; the Bank page's call card is tinted to match. Two floating round buttons, Call
   bottom-left and WhatsApp bottom-right, icons only. Outside the shop's hours a Call button greys
   out (board.js removes its link) and the floating one goes.
   --------------------------------------------------------------------------------------------- */
.client-board {
  --client-call: #15803d;
  --client-call-hover: #166534;
  --client-call-tint: #effaf3;
  --client-call-line: #bfe6cc;
}
.client-board .client-call-action {
  border-color: var(--client-call);
  background: var(--client-call);
  color: #ffffff;
}
.client-board #products-offered .offer-contact__call {
  background: var(--client-call);
  color: #ffffff;
}
.client-board .client-call-action:hover {
  border-color: var(--client-call-hover);
  background: var(--client-call-hover);
}
.client-board .client-call-action.is-closed,
.client-board #products-offered .offer-contact__call.is-closed {
  border-color: var(--client-line);
  background: var(--client-surface-alt);
  color: var(--client-muted);
  cursor: not-allowed;
}
.client-call-band {
  border: 1px solid var(--client-call-line);
  background: var(--client-call-tint);
}
.client-call-band__icon {
  border-color: var(--client-call-line);
  background: var(--client-call);
  color: #ffffff;
}
.client-board .client-call-hours {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--client-muted);
}
.client-board .client-call-hours[hidden] {
  display: none;
}
.client-board .client-call-band p.client-call-hours {
  margin-top: 6px;
  font-size: 12px;
}

.client-board .quick-contact {
  justify-content: center;
  box-sizing: border-box;
  width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  bottom: 24px;
  box-shadow: 0 6px 18px rgba(20, 33, 61, 0.28);
}
.client-board .quick-contact[hidden] {
  display: none;
}
/* The Contact tab's card carries its own Call and WhatsApp. */
.client-board[data-active-tab='contact'] .quick-contact {
  display: none;
}
.client-board .quick-contact__icon {
  flex: none;
  width: 22px;
  height: 22px;
}
/* The floating Call is the shop's own colour; the green is kept for WhatsApp (23 Sep 2026). */
.client-board .quick-contact--call {
  left: 24px;
  background: var(--client-primary);
  color: var(--client-on-primary);
}
/* A deeper WhatsApp green with a white mark, not the light #25d366 (Harshal, 23 Sep 2026). */
.client-board .quick-contact--whatsapp {
  right: 24px;
  background: #1a9e4b;
  color: #ffffff;
}
/* Room below the last line, so the credits are never under a button. */
.client-board .app-container {
  padding-bottom: 104px;
}
/* Phones and portrait tablets: above the pinned tab bar. */
@media (max-width: 900px), (max-width: 1100px) and (orientation: portrait) {
  .client-board .quick-contact {
    bottom: calc(84px + env(safe-area-inset-bottom));
    width: 44px;
    height: 44px;
    min-height: 44px;
  }
  .client-board .quick-contact--call {
    left: 14px;
  }
  .client-board .quick-contact--whatsapp {
    right: 14px;
  }
  .client-board .app-container {
    padding-bottom: 172px;
  }
}

/* Contact card: Call and Chat the same width, one column of actions. */
.client-board .client-contact-row__action {
  box-sizing: border-box;
  min-width: 96px;
}
@media (max-width: 600px) {
  .client-board .client-contact-row__action {
    min-width: 72px;
    padding: 0 12px;
  }
}

/* Gold Trends' source line holds only the no-data message now (23 Sep 2026). */
.client-board .client-trends__source:has(#chart-empty:empty) {
  display: none;
}


/* ------------------------------------------------------------------------------------------
   The wall display (TV), 24 Sep 2026. The shop's own screen, so it shows what a signed-in
   business buyer sees: the three spot prices first, then the RTGS book, large enough to read
   across the shop, on the approved design's dark navy. No Retail, no cards, no Power Rate (the
   private rate is never on a public screen), no navigation. A shop that quotes no RTGS shows its
   Retail book instead, so the screen is never empty.
   ------------------------------------------------------------------------------------------ */
.client-board[data-wall='true'] {
  --wall-bg: #0f1a2c;
  --wall-tile: #182843;
  --wall-line: #25375a;
  --wall-ink: #ffffff;
  --wall-muted: #9fb0cc;
  background: var(--wall-bg);
  color: var(--wall-ink);
  min-height: 100vh;
}
.client-board[data-wall='true'] .dashboard-nav,
.client-board[data-wall='true'] .tab-menu-btn,
.client-board[data-wall='true'] .share-btn,
.client-board[data-wall='true'] .client-header > :not(.client-brand),
.client-board[data-wall='true'] #overview > .section-heading > div:not(.connection-status),
.client-board[data-wall='true'] #products > .section-heading,
.client-board[data-wall='true'] #products .dashboard-toolbar,
.client-board[data-wall='true'] #app-banner,
.client-board[data-wall='true'] #product-empty,
.client-board[data-wall='true'] .board-main > :not(#overview):not(#products),
.client-board[data-wall='true'] .footer,
.client-board[data-wall='true'] [class*='float'],
.client-board[data-wall='true'] [class*='fab'] {
  display: none !important;
}
/* The retail module (HANDOVER.md §4z7), body[data-retail='off'] from the server and board.js: a
   shop without it shows no retail anywhere -- no karat cards, no Retail section, no share card
   (it is a retail card) and no price alerts (they follow the retail rate). Every view, TV included. */
.client-board[data-retail='off'] [data-block='cards'],
.client-board[data-retail='off'] [data-block='retail'],
.client-board[data-retail='off'] [data-action='open-share'],
.client-board[data-retail='off'] #alerts,
.client-board[data-retail='off'] #settings-alerts-link {
  display: none !important;
}
/* What the TV shows, per display link (24 Sep 2026; body[data-wall-view], set by board.js):
   RTGS (the default) hides Retail and the cards while the shop quotes RTGS; Retail hides RTGS;
   Both shows RTGS and Retail side by side without the cards. A shop that quotes no RTGS shows
   Retail and the cards on every view. */
.client-board[data-wall='true']:not([data-wall-view='retail']):not([data-wall-view='both'])[data-rtgs='on'] .client-rate-panels--retail,
.client-board[data-wall='true']:not([data-wall-view='retail'])[data-rtgs='on'] #karat-cards,
.client-board[data-wall='true']:not([data-wall-view='retail'])[data-rtgs='on'] #karat-note,
.client-board[data-wall='true'][data-wall-view='retail'] #products,
.client-board[data-wall='true'][data-rtgs='none'] #rtgs-panel {
  display: none !important;
}
.client-board[data-wall='true'] .client-header {
  background: var(--wall-bg);
  border: 0;
  padding: 28px 48px 8px;
  justify-content: space-between;
}
.client-board[data-wall='true'] .client-brand__name {
  color: var(--wall-ink);
  font-size: clamp(26px, 3vw, 44px);
  letter-spacing: 4px;
}
.client-board[data-wall='true'] .client-brand__mark,
.client-board[data-wall='true'] #tenant-logo {
  display: none;
}
.client-board[data-wall='true'] .board-main {
  max-width: none;
  padding: 8px 48px 32px;
  gap: 28px;
}
.client-board[data-wall='true'] #overview > .section-heading {
  position: absolute;
  top: 34px;
  right: 48px;
  margin: 0;
}
.client-board[data-wall='true'] .connection-status {
  background: transparent;
  border: 0;
  color: #4ade80;
  font-size: clamp(14px, 1.3vw, 20px);
  letter-spacing: 1px;
}
.client-board[data-wall='true'] .connection-status.status-closed,
.client-board[data-wall='true'] .connection-status.status-amber {
  color: #fbbf24;
}
.client-board[data-wall='true'] .connection-status.status-red {
  color: #f87171;
}
.client-board[data-wall='true'] .status-time {
  opacity: 0.85;
}
.client-board[data-wall='true'] .spot-grid {
  margin-top: 0;
  gap: 20px;
}
.client-board[data-wall='true'] .spot-card {
  background: var(--wall-tile);
  border: 0;
  box-shadow: none;
  text-align: left;
  align-items: flex-start;
  padding: 18px 24px;
}
.client-board[data-wall='true'] .spot-card h2 {
  color: var(--wall-muted);
  font-size: clamp(14px, 1.2vw, 20px);
}
.client-board[data-wall='true'] .spot-card strong {
  color: var(--wall-ink);
  font-size: clamp(28px, 3vw, 52px);
}
.client-board[data-wall='true'] .spot-range {
  color: var(--wall-muted);
}
.client-board[data-wall='true'] .client-rate-panel {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.client-board[data-wall='true'] .client-rate-panel h3 {
  background: transparent;
  color: var(--wall-muted);
  padding: 0 0 6px;
  font-size: clamp(14px, 1.2vw, 20px);
  letter-spacing: 2px;
}
.client-board[data-wall='true'] .client-rate-panel__note {
  color: var(--wall-muted);
}
.client-board[data-wall='true'] .client-rate-panel tr {
  padding: clamp(12px, 1.6vw, 22px) 0;
  border-bottom: 1px solid var(--wall-line);
  background: transparent;
}
.client-board[data-wall='true'] .client-rate-panel th,
.client-board[data-wall='true'] .client-rate-panel td:nth-child(2) {
  color: var(--wall-ink);
  font-size: clamp(20px, 2.2vw, 36px);
  font-weight: 500;
}
.client-board[data-wall='true'] .client-rate-panel .rate-table__tag {
  display: none;
}
.client-board[data-wall='true'] .client-rate-panel .rate-table__band {
  color: var(--wall-muted);
  font-size: 0.7em;
}
.client-board[data-wall='true'] .client-rate-panel td[data-cell='rate'] {
  color: var(--wall-ink);
  font-size: clamp(32px, 4vw, 64px);
  font-weight: 700;
}
.client-board[data-wall='true'] .client-rate-panel td:is([data-cell='high'], [data-cell='low']) {
  display: none;
}
/* The wall display, continued: the full width of the screen, and the rules that win over the
   board's own more specific ones. */
.client-board[data-wall='true'] .app-container,
.client-board[data-wall='true'] .board-main,
.client-board[data-wall='true'] #overview,
.client-board[data-wall='true'] #products {
  max-width: none;
  width: 100%;
}
.client-board[data-wall='true'] .quick-contact {
  display: none !important;
}
.client-board[data-wall='true'] .connection-status *,
.client-board[data-wall='true'] .connection-status .status-copy {
  color: inherit !important;
}
.client-board[data-wall='true'] .connection-status .status-dot {
  background: currentColor !important;
}
.client-board[data-wall='true'] .client-rate-panel .rate-table tbody th {
  color: var(--wall-ink);
  font-size: clamp(22px, 2.3vw, 40px);
  font-weight: 600;
}
.client-board[data-wall='true'] .client-rate-panel .rate-table tbody td:nth-child(2) {
  color: var(--wall-muted);
  font-size: clamp(14px, 1.2vw, 20px);
}
.client-board[data-wall='true'] .client-rate-panel .rate-table tbody td[data-cell='rate'] {
  color: var(--wall-ink);
  font-size: clamp(36px, 4.4vw, 76px);
  font-weight: 700;
  letter-spacing: -1px;
}
.client-board[data-wall='true'] .client-rate-panel .rate-table__band {
  display: block;
  color: var(--wall-muted);
  font-size: 0.55em;
  font-weight: 500;
  margin-top: 4px;
}
/* The badge sits in the header's corner, above the header bar. */
.client-board[data-wall='true'] #overview > .section-heading {
  z-index: 60;
}
/* Nobody points at a TV: no hover highlight on its rows or tiles (24 Sep 2026). */
.client-board[data-wall='true'] .rate-table tbody tr:hover,
.client-board[data-wall='true'] .client-rate-panel tr:hover,
.client-board[data-wall='true'] .spot-card:hover {
  background: transparent;
  box-shadow: none;
  transform: none;
}
.client-board[data-wall='true'] .spot-card:hover {
  background: var(--wall-tile);
}
/* "Powered by Bundiwal Tech" stays on the TV, light on the dark page, bottom right. */
.client-board[data-wall='true'] .site-credits {
  display: flex !important;
  justify-content: flex-end;
  max-width: none;
  margin: 0;
  padding: 18px 48px 26px;
  border: 0;
  background: var(--wall-bg);
  color: var(--wall-muted);
}
.client-board[data-wall='true'] .site-credits p:first-child {
  display: none;
}
.client-board[data-wall='true'] .site-credits p,
.client-board[data-wall='true'] .site-credits a {
  color: var(--wall-muted);
  font-size: clamp(13px, 1vw, 17px);
}
.client-board[data-wall='true'] .site-credits a {
  color: var(--wall-ink);
  font-weight: 600;
  text-decoration: none;
}
/* The RTGS book on the TV has no card of its own, so no rounded clip to cut its heading's first
   and last letters; its rows run edge to edge. */
.client-board[data-wall='true'] .client-rate-panel,
.client-board[data-wall='true'] .client-rate-panel .rate-table {
  border-radius: 0;
  overflow: visible;
}
.client-board[data-wall='true'] .client-rate-panel h3 {
  border-radius: 0;
}
/* The credit stays on screen whatever the TV's height: pinned bottom right. */
.client-board[data-wall='true'] .site-credits {
  position: fixed;
  right: 48px;
  bottom: 14px;
  padding: 0;
  background: transparent;
  z-index: 40;
}
/* Fit any TV, 720p to 4K: sizes follow the screen's height as well as its width, so a short
   screen shrinks everything instead of pushing the last row off the bottom. */
.client-board[data-wall='true'] .client-header {
  padding: 3vh 48px 0;
}
.client-board[data-wall='true'] #overview > .section-heading {
  top: 3.5vh;
}
.client-board[data-wall='true'] .board-main {
  padding: 2vh 48px 6vh;
  gap: 3vh;
}
.client-board[data-wall='true'] .spot-card {
  padding: 1.6vh 24px;
}
.client-board[data-wall='true'] .spot-card strong {
  font-size: clamp(24px, min(3vw, 5vh), 52px);
}
.client-board[data-wall='true'] .client-rate-panel tr {
  padding: clamp(6px, 1.5vh, 22px) 0;
}
.client-board[data-wall='true'] .client-rate-panel .rate-table tbody th {
  font-size: clamp(18px, min(2.3vw, 3.4vh), 40px);
}
.client-board[data-wall='true'] .client-rate-panel .rate-table tbody td:nth-child(2) {
  font-size: clamp(12px, min(1.2vw, 1.9vh), 20px);
}
.client-board[data-wall='true'] .client-rate-panel .rate-table tbody td[data-cell='rate'] {
  font-size: clamp(28px, min(4.4vw, 7vh), 76px);
}

/* The TV's order: spot first, then the cards, then the Retail book. */
.client-board[data-wall='true'] #overview {
  display: flex;
  flex-direction: column;
  gap: 3vh;
}
.client-board[data-wall='true'] #overview .spot-grid {
  order: 1;
}
.client-board[data-wall='true'] #overview #karat-cards {
  order: 2;
  margin: 0;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
}
.client-board[data-wall='true'] #overview #karat-cards > li {
  grid-column: auto !important;
  background: var(--wall-tile);
  border: 0;
  box-shadow: none;
  padding: 1.4vh 16px;
}
.client-board[data-wall='true'] #karat-cards h3,
.client-board[data-wall='true'] #karat-cards span {
  color: var(--wall-muted);
  font-size: clamp(12px, min(1.1vw, 1.8vh), 19px);
}
.client-board[data-wall='true'] #karat-cards strong {
  color: var(--wall-ink);
  font-size: clamp(22px, min(2.4vw, 4.2vh), 44px);
}
.client-board[data-wall='true'] #overview #karat-note {
  order: 3;
  margin-top: -1.5vh;
  color: var(--wall-muted);
}
.client-board[data-wall='true'] #overview .client-rate-panels--retail {
  order: 4;
  margin: 0;
}
/* Retail's "including GST" is part of the name, so it stays on the TV (RTGS's tag does not). */
.client-board[data-wall='true'] #retail-panel .rate-table__tag {
  display: inline;
  color: var(--wall-muted);
  font-size: 0.55em;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

/* Both, side by side: spot across the top, RTGS on the left, Retail on the right. */
.client-board[data-wall='true'][data-wall-view='both'][data-rtgs='on'] .board-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 56px;
  row-gap: 3vh;
  align-items: start;
}
.client-board[data-wall='true'][data-wall-view='both'][data-rtgs='on'] #overview {
  display: contents;
}
.client-board[data-wall='true'][data-wall-view='both'][data-rtgs='on'] .spot-grid {
  grid-column: 1 / -1;
  grid-row: 1;
}
.client-board[data-wall='true'][data-wall-view='both'][data-rtgs='on'] #products {
  grid-column: 1;
  grid-row: 2;
}
.client-board[data-wall='true'][data-wall-view='both'][data-rtgs='on'] .client-rate-panels--retail {
  grid-column: 2;
  grid-row: 2;
}
.client-board[data-wall='true'][data-wall-view='both'][data-rtgs='on'] .client-rate-panel .rate-table tbody td[data-cell='rate'] {
  font-size: clamp(26px, min(2.9vw, 6vh), 60px);
}
.client-board[data-wall='true'][data-wall-view='both'][data-rtgs='on'] .client-rate-panel .rate-table tbody th {
  font-size: clamp(16px, min(1.7vw, 3vh), 32px);
}
/* Less air under the shop name on every TV view. */
.client-board[data-wall='true'] .board-main {
  padding-top: 0;
}
.client-board[data-wall='true'] .client-header {
  padding-bottom: 2vh;
}
/* Retail on the TV (and the no-RTGS fallback) carries the cards as well, so its rows are tighter. */
.client-board[data-wall='true'][data-wall-view='retail'] .client-rate-panel tr,
.client-board[data-wall='true'][data-rtgs='none'] .client-rate-panel tr {
  padding: clamp(4px, 0.9vh, 14px) 0;
}
.client-board[data-wall='true'][data-wall-view='retail'] .client-rate-panel .rate-table tbody td[data-cell='rate'],
.client-board[data-wall='true'][data-rtgs='none'] .client-rate-panel .rate-table tbody td[data-cell='rate'] {
  font-size: clamp(24px, min(3.4vw, 5.4vh), 60px);
}
.client-board[data-wall='true'][data-wall-view='retail'] .client-rate-panel .rate-table tbody th,
.client-board[data-wall='true'][data-rtgs='none'] .client-rate-panel .rate-table tbody th {
  font-size: clamp(16px, min(1.9vw, 2.9vh), 34px);
}
.client-board[data-wall='true'][data-wall-view='retail'] .client-rate-panel .rate-table tbody td:nth-child(2),
.client-board[data-wall='true'][data-rtgs='none'] .client-rate-panel .rate-table tbody td:nth-child(2) {
  font-size: clamp(11px, min(1vw, 1.6vh), 17px);
}
/* Retail on a TV, two columns like Both: spot across the top, the Retail book on the left, the
   cards on the right (three to a line), so everything fits a landscape screen. Also the layout of
   a shop with no RTGS, whatever the link's view. */
.client-board[data-wall='true'][data-wall-view='retail'] .board-main,
.client-board[data-wall='true'][data-rtgs='none'] .board-main {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  column-gap: 56px;
  row-gap: 3vh;
  align-items: start;
}
.client-board[data-wall='true'][data-wall-view='retail'] #overview,
.client-board[data-wall='true'][data-rtgs='none'] #overview {
  display: contents;
}
.client-board[data-wall='true'][data-wall-view='retail'] .spot-grid,
.client-board[data-wall='true'][data-rtgs='none'] .spot-grid {
  grid-column: 1 / -1;
  grid-row: 1;
}
.client-board[data-wall='true'][data-wall-view='retail'] .client-rate-panels--retail,
.client-board[data-wall='true'][data-rtgs='none'] .client-rate-panels--retail {
  grid-column: 1;
  grid-row: 2 / span 2;
}
.client-board[data-wall='true'][data-wall-view='retail'] #karat-cards,
.client-board[data-wall='true'][data-rtgs='none'] #karat-cards {
  grid-column: 2;
  grid-row: 2;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 36px;
}
.client-board[data-wall='true'][data-wall-view='retail'] #karat-note,
.client-board[data-wall='true'][data-rtgs='none'] #karat-note {
  grid-column: 2;
  grid-row: 3;
  margin: 0;
}
.client-board[data-wall='true'] #overview.spot-section,
.client-board[data-wall='true'] #products {
  margin: 0;
  padding: 0;
}
/* Three cards to a line and the GST line straight under them, at every TV size. */
.client-board[data-wall='true'][data-wall-view='retail'] .board-main,
.client-board[data-wall='true'][data-rtgs='none'] .board-main {
  grid-template-rows: auto auto 1fr;
}
.client-board[data-wall='true'][data-wall-view='retail'] #overview #karat-cards,
.client-board[data-wall='true'][data-rtgs='none'] #overview #karat-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.client-board[data-wall='true'][data-wall-view='retail'] #overview #karat-note,
.client-board[data-wall='true'][data-rtgs='none'] #overview #karat-note {
  align-self: start;
  margin: 0;
}
/* Retail on a TV (24 Sep 2026, Harshal): no spot tiles; one line of karat cards, 22kt, 18kt, 14kt
   and 9kt per g, as many as the shop ticks; then the Retail book full width. Also the layout of a
   shop with no RTGS. */
.client-board[data-wall='true'][data-wall-view='retail'] .board-main,
.client-board[data-wall='true'][data-rtgs='none'] .board-main {
  display: flex;
  flex-direction: column;
  gap: 3.5vh;
}
.client-board[data-wall='true'][data-wall-view='retail'] #overview,
.client-board[data-wall='true'][data-rtgs='none'] #overview {
  display: flex;
  flex-direction: column;
  gap: 3.5vh;
}
.client-board[data-wall='true'][data-wall-view='retail'] .spot-grid,
.client-board[data-wall='true'][data-rtgs='none'] .spot-grid,
.client-board[data-wall='true'][data-wall-view='retail'] #karat-cards > [data-row='gold-24kt-1g-row'],
.client-board[data-wall='true'][data-rtgs='none'] #karat-cards > [data-row='gold-24kt-1g-row'],
.client-board[data-wall='true'][data-wall-view='retail'] #karat-cards > [data-row='silver-999-100g-row'],
.client-board[data-wall='true'][data-rtgs='none'] #karat-cards > [data-row='silver-999-100g-row'] {
  display: none !important;
}
.client-board[data-wall='true'][data-wall-view='retail'] #overview #karat-cards,
.client-board[data-wall='true'][data-rtgs='none'] #overview #karat-cards {
  order: 1;
  margin: 0;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 20px;
}
.client-board[data-wall='true'][data-wall-view='retail'] #overview #karat-cards > li,
.client-board[data-wall='true'][data-rtgs='none'] #overview #karat-cards > li {
  padding: 2.2vh 20px;
}
.client-board[data-wall='true'][data-wall-view='retail'] #karat-cards h3,
.client-board[data-wall='true'][data-rtgs='none'] #karat-cards h3 {
  font-size: clamp(14px, min(1.4vw, 2.4vh), 24px);
}
.client-board[data-wall='true'][data-wall-view='retail'] #karat-cards strong,
.client-board[data-wall='true'][data-rtgs='none'] #karat-cards strong {
  font-size: clamp(28px, min(3.2vw, 6vh), 60px);
}
.client-board[data-wall='true'][data-wall-view='retail'] #overview #karat-note,
.client-board[data-wall='true'][data-rtgs='none'] #overview #karat-note {
  order: 2;
  margin-top: -2vh;
  text-align: left;
}
.client-board[data-wall='true'][data-wall-view='retail'] #overview .client-rate-panels--retail,
.client-board[data-wall='true'][data-rtgs='none'] #overview .client-rate-panels--retail {
  order: 3;
}
.client-board[data-wall='true'][data-wall-view='retail'] .client-rate-panel tr,
.client-board[data-wall='true'][data-rtgs='none'] .client-rate-panel tr {
  padding: clamp(6px, 1.4vh, 20px) 0;
}
.client-board[data-wall='true'][data-wall-view='retail'] .client-rate-panel .rate-table tbody td[data-cell='rate'],
.client-board[data-wall='true'][data-rtgs='none'] .client-rate-panel .rate-table tbody td[data-cell='rate'] {
  font-size: clamp(28px, min(4.2vw, 6.6vh), 72px);
}
.client-board[data-wall='true'][data-wall-view='retail'] .client-rate-panel .rate-table tbody th,
.client-board[data-wall='true'][data-rtgs='none'] .client-rate-panel .rate-table tbody th {
  font-size: clamp(18px, min(2.2vw, 3.4vh), 38px);
}
/* Retail on a TV, sized so four rows and the cards fit a 720p screen. */
.client-board[data-wall='true'][data-wall-view='retail'] #overview,
.client-board[data-wall='true'][data-rtgs='none'] #overview {
  gap: 2.6vh;
}
.client-board[data-wall='true'][data-wall-view='retail'] #overview #karat-cards > li,
.client-board[data-wall='true'][data-rtgs='none'] #overview #karat-cards > li {
  padding: 1.6vh 20px;
}
.client-board[data-wall='true'][data-wall-view='retail'] #karat-cards strong,
.client-board[data-wall='true'][data-rtgs='none'] #karat-cards strong {
  font-size: clamp(24px, min(3vw, 5.2vh), 56px);
}
.client-board[data-wall='true'][data-wall-view='retail'] .client-rate-panel tr,
.client-board[data-wall='true'][data-rtgs='none'] .client-rate-panel tr {
  padding: clamp(4px, 1vh, 16px) 0;
}
.client-board[data-wall='true'][data-wall-view='retail'] .client-rate-panel .rate-table tbody td[data-cell='rate'],
.client-board[data-wall='true'][data-rtgs='none'] .client-rate-panel .rate-table tbody td[data-cell='rate'] {
  font-size: clamp(24px, min(3.8vw, 5.8vh), 66px);
}
.client-board[data-wall='true'][data-wall-view='retail'] .client-rate-panel .rate-table tbody th,
.client-board[data-wall='true'][data-rtgs='none'] .client-rate-panel .rate-table tbody th {
  font-size: clamp(16px, min(2vw, 3vh), 34px);
}
/* The Monthly Jewellery Scheme's card beside the app banner (HANDOVER.md §4z19 decision 42), from
   Codex's approved design (docs/scheme-accounts-screens/, the board card): side by side on a wide
   screen, stacked on a phone, and the banner alone as before when the card is not shown. */
.board-promos {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 20px;
  align-items: stretch;
  margin-top: 24px;
}
.board-promos:not(:has(> :not([hidden]))) {
  display: none;
}
.board-promos:has(> [hidden]) {
  grid-template-columns: 1fr;
}
.board-promos > .app-banner {
  margin: 0;
}
.scheme-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 24px 26px;
  border-radius: 13px;
  border: 1px solid var(--client-line);
  border-top: 4px solid var(--client-primary);
  background: var(--client-surface, #fff);
}
.scheme-card[hidden] {
  display: none;
}
.scheme-card h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.3;
  color: var(--client-ink);
}
.scheme-card p {
  margin: 0;
  font-size: 13px;
  color: var(--client-muted);
}
.scheme-card__button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 10px;
  padding: 0 18px;
  border-radius: 10px;
  background: var(--client-primary);
  color: var(--client-on-primary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.scheme-footer-link {
  color: inherit;
  font-size: 12px;
}
.scheme-footer-link[hidden] {
  display: none;
}
@media (max-width: 800px) {
  .board-promos {
    grid-template-columns: 1fr;
  }
  .scheme-card h3 {
    font-size: 20px;
  }
}

/* Choose your account (28 Sep 2026): the Login pop-up's two cards, then each account's view. */
.client-login__view[hidden] {
  display: none;
}
.client-login__view {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.client-board .client-login__lede {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--client-muted);
}
.client-login__choice {
  position: relative;
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 18px 48px 18px 18px;
  border: 1px solid var(--client-card-border);
  border-radius: 14px;
  background: var(--client-surface);
  color: var(--client-ink);
  text-align: left;
  text-decoration: none;
  font: inherit;
  cursor: pointer;
}
.client-login__choice:hover {
  border-color: var(--client-primary);
}
.client-login__choice strong {
  font-size: 18px;
  font-weight: 650;
}
.client-login__choice > span:last-of-type {
  font-size: 13px;
  color: var(--client-muted);
}
.client-login__choice svg {
  position: absolute;
  right: 18px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}
.client-login__back {
  align-self: flex-start;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--client-ink);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}