/* ============================================================
   Chain Grove — shared stylesheet
   Space Grotesk (headings, wordmark, body) · IBM Plex Mono (data,
   labels, tickers) · Source Serif 4 (long-form research articles)
   ============================================================ */

:root{
  --ink: #1B211D;        /* mark blocks + wordmark on light */
  --green: #2E9E63;      /* live block, buttons, links on light */
  --green-dark: #4CC183; /* live block + accents on dark */
  --paper: #F7F8F5;      /* mark + wordmark on dark / light bg */
  --dark: #141815;       /* hero, footer, banner background */
  --muted: #5F665F;      /* captions on light, 4.5:1 safe */
  --muted-on-dark: #9AA39B;
  --line: rgba(27,33,29,0.12);
  --line-on-dark: rgba(247,248,245,0.14);
  --panel: #EFF1EC;

  --font-head: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  --container: 1120px;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

/* Any element with the `hidden` attribute must actually hide, even when a
   more specific rule elsewhere on it sets `display: flex/grid/block` — an
   author rule otherwise wins over the browser's built-in [hidden] default
   regardless of specificity, which is what made the admin gate keep showing
   underneath the unlocked panel. This rule must stay last-word on display. */
[hidden]{ display: none !important; }

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-head);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, svg{ max-width: 100%; display: block; }

a{ color: inherit; text-decoration: none; }

h1, h2, h3, h4{
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.12;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}

p{ margin: 0 0 1em; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- labels / mono figures ---------- */
.eyebrow, .label, .mono-label{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow{ color: var(--green); margin-bottom: 14px; display: inline-block; }
section.on-dark .eyebrow{ color: var(--green-dark); }

.figure, .mono{
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ---------- buttons ---------- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 15px;
  padding: 14px 26px;
  border-radius: 3px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: opacity 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn:hover{ opacity: 0.88; }
.btn-primary{ background: var(--green); color: var(--paper); }
/* Outline buttons need a border you can actually see — the hairline --line
   value reads as plain text at small sizes, especially on tinted panels. */
.btn-outline{ background: transparent; border-color: rgba(27,33,29,0.26); color: var(--ink); }
.btn-outline:hover{ border-color: var(--green); color: var(--green); opacity: 1; }
.btn-outline.btn-outline-invert{ border-color: var(--line-on-dark); color: var(--paper); }
.btn-dark{ background: var(--dark); color: var(--paper); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position: sticky;
  /* -webkit-sticky first for older iOS Safari, which ignores the bare keyword
     and leaves the header scrolling away. */
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(247,248,245,0.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 104px;
}
.brand{ display: flex; align-items: center; }
.brand img{ height: 46px; width: auto; }

.nav{
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav a{
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  position: relative;
  padding: 4px 0;
}
.nav a.active{ color: var(--green); }
.nav a:hover{ color: var(--green); }
.nav-links{ display: flex; align-items: center; gap: 26px; }
/* Two header actions sitting as a pair: an outline Log in beside the solid
   Open account. The pair is spaced away from the nav links as one unit, so the
   gap belongs to the group rather than to each button. */
/* The two header actions are one group: an outline Log in beside the solid
   Open account. Wrapping them means the 10px between them is theirs, and the
   nav's own 26px gap separates the pair from the links rather than splitting it. */
.nav-actions{ display: flex; align-items: center; gap: 10px; }
.nav-links .nav-btn{ padding: 11px 22px; font-size: 14.5px; }
.nav-links .btn-outline.nav-btn{
  border-color: rgba(27,33,29,0.28); color: var(--ink); background: transparent;
}
.nav-links .btn-outline.nav-btn:hover{
  border-color: var(--green); color: var(--green); background: transparent;
}

.nav-toggle{
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span{
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
  margin: 5px 0;
}

@media (max-width: 860px){
  .nav-links{
    position: absolute;
    top: 104px; left: 0; right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 8px 28px 20px;
    display: none;
  }
  .nav-links.open{ display: flex; }
  .nav-links a{ width: 100%; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .nav-toggle{ display: block; }

  /* The two header buttons, on a phone.
     Left alone they inherit `.nav-links a` — a full-width link with 12px
     vertical padding and a rule underneath — which flattens them into the list
     of links with a stray line under each, while .nav-actions keeps them side
     by side in a column menu and squeezes both into half the width. They are
     buttons, so they stack, fill the width, and keep their own padding. */
  .nav-actions{
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 10px;
    margin-top: 18px;
  }
  .nav-links .nav-actions a.btn{
    width: 100%;
    margin: 0;
    padding: 13px 18px;
    text-align: center;
    border-bottom: 0;
  }
  /* The outline button needs its border back — the reset above only removes
     the link's underline rule, but border-bottom:0 would flatten one side of
     the outline too. */
  .nav-links .nav-actions a.btn-outline{
    border: 1px solid rgba(27,33,29,0.28);
  }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  background: var(--dark);
  color: var(--paper);
  padding: 64px 0 0;
}
.hero-inner{ padding-bottom: 72px; }
.hero h1{
  font-size: clamp(34px, 5vw, 56px);
  color: var(--paper);
  max-width: 15ch;
}
.hero h1 b{ font-weight: 700; }
.hero-sub{
  font-size: 17px;
  color: var(--muted-on-dark);
  max-width: 46ch;
  margin-bottom: 32px;
}
.hero-actions{ display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 56px; }

.page-hero{
  background: var(--dark);
  color: var(--paper);
  padding: 74px 0 64px;
}
.page-hero h1{ color: var(--paper); font-size: clamp(32px, 4.5vw, 48px); max-width: 22ch; }
.page-hero .hero-sub{ margin-bottom: 0; }

/* ---------- stat bar ---------- */
.stat-bar{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-on-dark);
}
.stat{
  padding: 26px 28px;
  border-right: 1px solid var(--line-on-dark);
}
.stat:last-child{ border-right: none; }
.stat .figure{
  font-size: 30px;
  font-weight: 500;
  color: var(--paper);
}
.stat .figure small{ font-size: 15px; color: var(--muted-on-dark); font-weight: 400; }
.stat .figure.up{ color: var(--green-dark); }
.stat .label{ margin-top: 6px; color: var(--muted-on-dark); }

@media (max-width: 760px){
  .stat-bar{ grid-template-columns: repeat(2, 1fr); }
  .stat{ border-bottom: 1px solid var(--line-on-dark); }
}

/* ============================================================
   SECTIONS
   ============================================================ */
section{ padding: 84px 0; }
section.tight{ padding: 56px 0; }
section.on-dark{ background: var(--dark); color: var(--paper); }
section.on-dark h1, section.on-dark h2, section.on-dark h3{ color: var(--paper); }
section.on-panel{ background: var(--panel); }

.section-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.section-head h2{ font-size: clamp(24px, 3vw, 32px); margin: 0; }
.section-head .label{ margin-bottom: 4px; }

/* ---------- pillar / four-block grid ---------- */
.pillars{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.pillar{
  padding-top: 18px;
  border-top: 2px solid var(--line);
}
.pillar.is-live{ border-top-color: var(--green); }
.pillar .index{ font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-bottom: 14px; display: block; }
.pillar.is-live .index{ color: var(--green); }
.pillar h3{ font-size: 18px; margin-bottom: 8px; }
.pillar p{ color: var(--muted); font-size: 14.5px; margin: 0; }

@media (max-width: 900px){
  .pillars{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .pillars{ grid-template-columns: 1fr; }
}

/* ---------- tables (current book) ---------- */
.book-table{ width: 100%; border-collapse: collapse; }
.book-table th{
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  padding: 0 16px 14px 0;
  border-bottom: 1px solid var(--line);
}
.book-table td{
  padding: 20px 16px 20px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.book-table th:last-child, .book-table td:last-child{ padding-right: 0; }
.book-table td:not(:first-child), .book-table th:not(:first-child){ text-align: right; padding-left: 16px; padding-right: 0; }
.book-table td:not(:first-child):not(:last-child), .book-table th:not(:first-child):not(:last-child){ padding-right: 16px; }
.book-table .pos-name{ font-weight: 500; }
.book-table .pos-sub{ color: var(--muted); font-size: 13px; margin-top: 3px; }
.book-table .up{ color: var(--green); font-family: var(--font-mono); }
.book-table .down{ color: #b23b3b; font-family: var(--font-mono); }
.book-table .flat{ color: var(--muted); font-family: var(--font-mono); }
section.on-dark .book-table .up{ color: var(--green-dark); }
section.on-dark .book-table .down{ color: #e08a8a; }
.book-table td.figure, .book-table td.mono{ font-family: var(--font-mono); }

.table-wrap{ overflow-x: auto; }
.table-note{ margin-top: 18px; color: var(--muted); font-size: 13px; }

/* ---------- research list ---------- */
.notes-list{ border-top: 1px solid var(--line-on-dark); }
section:not(.on-dark) .notes-list{ border-top-color: var(--line); }
.note-row{
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line-on-dark);
  transition: opacity 0.15s ease;
}
section:not(.on-dark) .note-row{ border-bottom-color: var(--line); }
.note-row:hover{ opacity: 0.7; }
.note-date{ font-family: var(--font-mono); font-size: 12px; color: var(--muted); width: 64px; flex-shrink: 0; }
section.on-dark .note-date{ color: var(--muted-on-dark); }
.note-title{ font-weight: 500; font-size: 17px; flex: 1; }
.note-time{ font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
section.on-dark .note-time{ color: var(--muted-on-dark); }

/* ---------- cta band ---------- */
.cta-band{ background: var(--green); color: var(--ink); }
.cta-band h2{ color: var(--ink); font-size: clamp(24px, 3.4vw, 34px); max-width: 18ch; }
.cta-band-inner{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.cta-band .note{ margin-top: 10px; font-size: 14px; opacity: 0.85; }

/* ---------- footer ---------- */
.site-footer{ background: var(--dark); color: var(--paper); padding: 56px 0 28px; }
.footer-top{
  display: flex;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line-on-dark);
  flex-wrap: wrap;
}
.footer-brand img{ height: 38px; margin-bottom: 16px; }
.footer-brand p{ color: var(--muted-on-dark); font-size: 13px; max-width: 32ch; margin: 0; }
.footer-cols{ display: flex; gap: 64px; flex-wrap: wrap; }
.footer-col .label{ color: var(--muted-on-dark); margin-bottom: 14px; display: block; }
.footer-col a{ display: block; font-size: 14px; color: var(--paper); padding: 6px 0; }
.footer-col a:hover{ color: var(--green-dark); }
.footer-bottom{
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--muted-on-dark);
}
.footer-bottom .fine{ max-width: 46ch; text-align: right; }

@media (max-width: 700px){
  .footer-bottom .fine{ text-align: left; max-width: none; }
}

/* ============================================================
   GENERIC PAGE / PROSE HELPERS
   ============================================================ */
.prose{ max-width: 68ch; }
.prose h2{ margin-top: 1.6em; }
.prose p{ color: var(--ink); }
.two-col{ display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
@media (max-width: 800px){ .two-col{ grid-template-columns: 1fr; gap: 32px; } }

.card{
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 28px;
}
section.on-panel .card, section.on-dark .card{ background: transparent; }
section.on-dark .card{ border-color: var(--line-on-dark); }

.card-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 700px){ .card-grid{ grid-template-columns: 1fr; } }

.tag{
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  border: 1px solid var(--green);
  border-radius: 20px;
  padding: 4px 10px;
  margin-bottom: 14px;
}

.divider{ height: 1px; background: var(--line); border: none; margin: 0; }
section.on-dark .divider{ background: var(--line-on-dark); }

/* ---------- role / team cards ---------- */
.role-card{ padding: 28px 0; border-top: 1px solid var(--line); }
.role-card h3{ font-size: 18px; margin-bottom: 6px; }
.role-card .label{ margin-bottom: 10px; display: block; }
.role-card p{ color: var(--muted); margin: 0; font-size: 14.5px; }

/* ---------- article ---------- */
.article-head{ padding: 96px 0 40px; background: var(--dark); color: var(--paper); }
.article-meta{ display: flex; gap: 18px; align-items: center; margin-bottom: 18px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-on-dark); }
.article-head h1{ color: var(--paper); font-size: clamp(28px, 4vw, 42px); max-width: 22ch; }
.article-body{ font-family: var(--font-serif); font-size: 19px; line-height: 1.7; max-width: 68ch; }
.article-body p{ margin: 0 0 1.4em; }
.article-body h2{ font-family: var(--font-head); font-size: 24px; margin-top: 1.8em; }
.article-body blockquote{
  margin: 2em 0;
  padding-left: 22px;
  border-left: 2px solid var(--green);
  font-style: italic;
  color: var(--muted);
}
.back-link{ display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-on-dark); margin-bottom: 28px; }
.back-link:hover{ color: var(--green-dark); }
.article-foot-nav{ display:flex; justify-content: space-between; gap: 20px; padding-top: 32px; margin-top: 48px; border-top: 1px solid var(--line); flex-wrap: wrap; }

/* ---------- misc page bits ---------- */
.notice{
  background: var(--panel);
  border-left: 3px solid var(--muted);
  padding: 18px 22px;
  font-size: 14px;
  color: var(--muted);
  border-radius: 2px;
}
.center-panel{
  min-height: 56vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.center-panel .inner{ max-width: 480px; }
.center-panel .eyebrow{ display: block; }

.link-list a{ display: flex; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.link-list a:hover{ color: var(--green); }

.contact-detail{ display: flex; flex-direction: column; gap: 4px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.contact-detail:last-child{ border-bottom: none; }
.contact-detail .label{ margin-bottom: 2px; }
.contact-detail .value{ font-size: 17px; font-weight: 500; }
.contact-detail .value.mono{ font-size: 16px; }

/* ============================================================
   PORTAL / ADMIN COMPONENTS (investor login, dashboard, admin)
   ============================================================ */

/* ---------- forms ---------- */
.field{ display:block; margin-bottom:18px; }
.field label{
  display:block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}
.field .hint{ font-size:12.5px; color:var(--muted); margin-top:6px; }
.field .error{ font-size:12.5px; color:#b23b3b; margin-top:6px; }
/* Every text-like input, listed exhaustively. The old selector named only
   text/email/password/number, so a `type="tel"` or `type="date"` field fell
   back to the browser's own control and looked nothing like its neighbours. */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="tel"], input[type="url"], input[type="search"], input[type="date"],
input[type="datetime-local"], input[type="month"], input[type="time"],
input:not([type]),
select, textarea{
  width: 100%;
  font-family: var(--font-head);
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
  outline: none;
}
input:focus, select:focus, textarea:focus{ border-color: var(--green); }
.on-dark input[type="text"], .on-dark input[type="email"], .on-dark input[type="password"],
.on-dark input[type="number"], .on-dark input[type="tel"], .on-dark input[type="url"],
.on-dark input[type="search"], .on-dark input[type="date"], .on-dark input:not([type]),
.on-dark select, .on-dark textarea{
  background: transparent;
  border-color: var(--line-on-dark);
  color: var(--paper);
}
.form-row{ display:flex; gap:16px; }
.form-row .field{ flex:1; }
.form-actions{ display:flex; gap:12px; align-items:center; margin-top:8px; flex-wrap:wrap; }
button.btn{ font-family: var(--font-head); border: 1px solid transparent; cursor:pointer; }
button.btn-outline{ background:transparent; }

/* ---------- auth card ---------- */
.auth-wrap{ min-height: 72vh; display:flex; align-items:center; justify-content:center; padding: 48px 20px; }
.auth-card{ width:100%; max-width: 420px; background: var(--paper); border:1px solid var(--line); border-radius:6px; padding:36px; }
.auth-card h1{ font-size:24px; margin-bottom:6px; }

/* ---------- the switch through to the admin panel ----------
   Built by JavaScript, and only for an account the server says is an
   administrator — it is never in the page source. Styled as a quiet outline
   rather than a second solid button so it does not compete with Log out. */
.admin-switch{
  display:inline-flex; align-items:center;
  padding:9px 16px; font-size:13px; text-decoration:none;
  border:1px solid rgba(255,255,255,0.28);
  background:transparent; color:#fff;
}
.admin-switch:hover{ border-color:#fff; background:rgba(255,255,255,0.08); }
.auth-card .sub{ color:var(--muted); font-size:14px; margin-bottom:28px; }
.auth-toggle{ display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:28px; }
.auth-toggle button{
  flex:1; background:none; border:none; cursor:pointer;
  font-family: var(--font-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  color: var(--muted); padding: 12px 0; border-bottom: 2px solid transparent;
}
.auth-toggle button.active{ color: var(--ink); border-bottom-color: var(--green); }

/* ---------- tabs ---------- */
.tabs{ display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:28px; flex-wrap:wrap; }
.tabs button{
  background:none; border:none; cursor:pointer;
  font-family: var(--font-mono); font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  color: var(--muted); padding: 12px 18px; border-bottom: 2px solid transparent;
}
.tabs button.active{ color: var(--ink); border-bottom-color: var(--green); }
section.on-dark .tabs{ border-bottom-color: var(--line-on-dark); }
section.on-dark .tabs button.active{ color: var(--paper); border-bottom-color: var(--green-dark); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

/* ---------- badges ---------- */
.badge{
  display:inline-block; font-family: var(--font-mono); font-size:10.5px;
  letter-spacing:0.06em; text-transform:uppercase; padding:4px 9px; border-radius:20px;
  white-space:nowrap;
}
.badge-pending{ background: rgba(196,148,26,0.14); color:#8a6d1a; }
.badge-confirmed{ background: rgba(46,158,99,0.14); color: var(--green); }
.badge-rejected{ background: rgba(178,59,59,0.12); color:#b23b3b; }
.badge-active{ background: rgba(46,158,99,0.14); color: var(--green); }

/* ---------- dashboard top bar ---------- */
/* The portal's top bar stays put.
   It was an ordinary block, so on a phone it scrolled away with the page and
   took the account name and the way out with it — you had to scroll all the
   way back up to sign out. It is the portal's chrome, so it behaves like
   chrome. The top inset keeps it clear of a notch when the page is opened
   from a home-screen shortcut, where there is no browser bar above it. */
.dash-bar{
  background: var(--dark); color: var(--paper);
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 60;
  padding-top: env(safe-area-inset-top, 0px);
}
.dash-bar .container{
  display:flex; align-items:center; justify-content:space-between;
  height:104px;
}
.dash-bar .brand img{ height:46px; }
.dash-user{ display:flex; align-items:center; gap:16px; }
.dash-user .who{ font-size:14px; color: var(--muted-on-dark); }
.dash-user .who b{ color: var(--paper); font-weight:500; }

/* ---------- account summary ---------- */
.summary-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:0;
  border-top:1px solid var(--line-on-dark);
}
.summary-cell{ padding:26px 28px; border-right:1px solid var(--line-on-dark); }
.summary-cell:last-child{ border-right:none; }
.summary-cell .figure{ font-size:28px; font-weight:500; color:var(--paper); }
.summary-cell .figure.up{ color: var(--green-dark); }
.summary-cell .figure.down{ color:#e08a8a; }
.summary-cell .label{ margin-top:6px; color: var(--muted-on-dark); }
.spark-cell{ padding:20px 28px; display:flex; flex-direction:column; justify-content:center; }
@media (max-width: 860px){
  .summary-grid{ grid-template-columns: repeat(2, 1fr); }
  .summary-cell{ border-bottom:1px solid var(--line-on-dark); }
}

/* ---------- asset picker (deposit) ---------- */
.asset-picker{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px; }
.asset-pill{
  font-family: var(--font-mono); font-size:13px; letter-spacing:0.04em;
  padding:10px 18px; border-radius:20px; border:1px solid var(--line);
  background:transparent; color:var(--ink); cursor:pointer;
}
.asset-pill.active{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.address-box{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background: var(--panel); border:1px solid var(--line); border-radius:4px;
  padding:16px 18px; margin-bottom:20px; flex-wrap:wrap;
}
.address-box .addr{ font-family: var(--font-mono); font-size:14px; word-break:break-all; }
.copy-btn{
  font-family: var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:0.08em;
  background: var(--ink); color: var(--paper); border:none; border-radius:3px; padding:8px 12px; cursor:pointer;
  flex-shrink:0;
}

/* ---------- modal ---------- */
.modal-overlay{
  position:fixed; inset:0; background:rgba(20,24,21,0.6);
  display:flex; align-items:center; justify-content:center; padding:20px; z-index:200;
}
.modal-overlay[hidden]{ display:none; }
.modal{
  background:var(--paper); border-radius:6px; width:100%; max-width:480px;
  max-height:88vh; overflow-y:auto; padding:30px;
}
/* A whole client record does not fit in the width of a three-field form.
   This is opt-in rather than the default: most modals here ask one question,
   and a one-question modal in a 720px box looks like a mistake. */
.modal-wide{ max-width:720px; }
.modal h3{ font-size:19px; margin-bottom:18px; }

/* ---------- the client record editor ---------- */
/* The two things that cannot be changed here, shown anyway. Leaving them out
   invites someone to go looking for them in the database; showing them greyed
   out with no explanation invites the same trip. */
.edit-fixed{
  border:1px solid var(--line); border-radius:8px;
  background:var(--panel); padding:14px 16px; margin-bottom:22px;
}
.edit-fixed > div{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding:3px 0;
}
.edit-fixed .k{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--muted); flex:0 0 110px;
}
.edit-fixed .v{ font-size:13.5px; color:var(--ink); word-break:break-word; }
.edit-fixed p{
  margin:10px 0 0; font-size:12.5px; line-height:1.55; color:var(--muted);
  border-top:1px solid var(--line); padding-top:10px;
}

/* ---------- assigning a deposit address to a client ---------- */
.modal-lead{
  margin:0 0 20px; padding:12px 14px;
  border:1px solid var(--line); border-radius:8px; background:var(--panel);
  font-size:12.5px; color:var(--ink); word-break:break-all; line-height:1.5;
}
.assign-results{ display:grid; gap:7px; max-height:320px; overflow-y:auto; margin-top:4px; }
.assign-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  width:100%; text-align:left; cursor:pointer;
  padding:11px 13px; border:1px solid var(--line); border-radius:8px;
  background:var(--paper); font:inherit; font-size:13.5px;
  transition:border-color .12s ease, background-color .12s ease;
}
.assign-row:hover{ border-color:var(--green); background:var(--panel); }
.assign-row:disabled{ opacity:0.55; cursor:default; }
.assign-who{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.assign-who b{ font-size:13.5px; color:var(--ink); }
.assign-who .mono{ font-family:var(--font-mono); font-size:11.5px; color:var(--muted); }
/* What pressing it will do, said before it is pressed. */
.assign-note{
  flex:0 0 auto; font-size:11.5px; color:#a8732b;
  font-family:var(--font-mono); white-space:nowrap;
}
.assign-note-new{ color:var(--green); }

.edit-group{
  display:block;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--muted);
  margin:24px 0 12px; padding-bottom:7px;
  border-bottom:1px solid var(--line);
}
.edit-group:first-of-type{ margin-top:0; }
.modal .check-grid{ margin-bottom:6px; }
.modal .form-actions{ margin-top:26px; }
.link-btn.danger{ color:#b23b3b; }
.modal-close{
  background:none; border:none; cursor:pointer; color:var(--muted);
  font-family: var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:0.08em;
}

/* ---------- admin table extras ---------- */
.table-actions{ display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
.link-btn{
  background:none; border:none; padding:0; cursor:pointer; font-family: var(--font-mono);
  font-size:11.5px; text-transform:uppercase; letter-spacing:0.06em; color: var(--green);
}
.link-btn.danger{ color:#b23b3b; }
.empty-state{ padding:40px 0; text-align:center; color:var(--muted); font-size:14.5px; }

.setup-notice{
  background: rgba(196,148,26,0.1); border-left:3px solid #c4941a; color:#8a6d1a;
  padding:14px 18px; font-size:13.5px; border-radius:2px; margin-bottom:24px;
}
section.on-dark .setup-notice{ background: rgba(196,148,26,0.14); color:#e0be6a; }

/* ---------- admin summary bar (light) ---------- */
.admin-stat-bar{
  display:grid; grid-template-columns: repeat(5, 1fr); gap:0;
  border:1px solid var(--line); border-radius:6px; overflow:hidden; margin-bottom:32px;
  background: var(--panel);
}
.admin-stat{ padding:20px 24px; border-right:1px solid var(--line); }
.admin-stat:last-child{ border-right:none; }
.admin-stat .figure{ font-size:24px; font-weight:500; color:var(--ink); font-family: var(--font-mono); }
.admin-stat .label{ margin-top:4px; }
@media (max-width: 1080px){ .admin-stat-bar{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px){
  .admin-stat-bar{ grid-template-columns: repeat(2, 1fr); }
  .admin-stat{ border-bottom:1px solid var(--line); }
}

/* ---------- toast notifications ---------- */
.cg-toast-root{
  position:fixed; right:20px; bottom:20px; z-index:400;
  display:flex; flex-direction:column; gap:10px; align-items:flex-end;
}
.cg-toast{
  display:flex; align-items:flex-start; gap:10px;
  background: var(--ink); color: var(--paper); font-size:14px; line-height:1.45;
  padding:14px 18px; border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,0.26);
  opacity:0; transform: translateY(10px) scale(0.98);
  transition: opacity .18s ease, transform .18s cubic-bezier(.2,.9,.3,1.2);
  max-width:360px;
}
.cg-toast.show{ opacity:1; transform: translateY(0) scale(1); }

/* A tick before the words. "Saved" as a bare line of text is easy to miss at
   the edge of a screen; a green mark is not, and it says which kind of message
   this is before the sentence is read. */
.cg-toast::before{
  content:""; flex:0 0 18px; width:18px; height:18px; margin-top:1px;
  border-radius:50%; background:var(--green);
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:12px 12px; background-repeat:no-repeat; background-position:center;
}
.cg-toast-error{ background:#b23b3b; }
.cg-toast-error::before{
  background-color:#fff;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7v7M12 17.5v.5' fill='none' stroke='%23b23b3b' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------- deposit address pool (admin) ---------- */
.pool-stats{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:24px; }
.pool-stat-chip{
  border:1px solid var(--line); border-radius:6px; padding:12px 16px; min-width:112px;
  font-family: var(--font-mono);
}
.pool-stat-chip .asset{ font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); }
.pool-stat-chip .counts{ margin-top:6px; font-size:15px; color:var(--ink); }
.pool-stat-chip .counts .unassigned{ color: var(--green); }
.address-add-form{
  display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end;
  background: var(--panel); border:1px solid var(--line); border-radius:6px; padding:20px; margin-bottom:28px;
}
.address-add-form .field{ margin-bottom:0; }
.address-add-form select{ width:auto; min-width:140px; }
.address-add-form textarea{ width:100%; min-height:84px; font-family: var(--font-mono); font-size:13px; resize:vertical; }
.address-add-form .field.grow{ flex:1; min-width:240px; }
.addr-cell{ font-family: var(--font-mono); font-size:13px; word-break:break-all; }

/* ---------- withdraw / balance hint ---------- */
.balance-hint{ font-size:12.5px; color:var(--muted); margin-top:6px; }

/* ---------- performance chart panel ---------- */
.chart-panel{
  border:1px solid var(--line); border-radius:6px; padding:24px 24px 8px; background: var(--paper);
}
section.on-dark .chart-panel, section.on-panel .chart-panel{
  background: transparent; border-color: var(--line-on-dark);
}
.chart-panel .chart-head{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.chart-panel svg text{ font-family: var(--font-mono); }

/* ---------- monthly returns table ---------- */
.returns-table{
  width:100%; border-collapse:collapse; font-family: var(--font-mono);
  font-size:12.5px; font-variant-numeric: tabular-nums; min-width:820px;
}
.returns-table th{
  font-family: var(--font-mono); font-size:10.5px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--muted); font-weight:400;
  text-align:right; padding:0 10px 12px 0; border-bottom:1px solid var(--line);
}
.returns-table thead th:first-child{ text-align:left; }
.returns-table td{ text-align:right; padding:13px 10px 13px 0; border-bottom:1px solid var(--line); }
.returns-table tbody th{
  text-align:left; padding:13px 10px 13px 0; border-bottom:1px solid var(--line);
  color:var(--ink); font-size:13px; letter-spacing:0; text-transform:none;
}
.returns-table .up{ color: var(--green); }
.returns-table .down{ color:#b23b3b; }
.returns-table .empty{ color: rgba(27,33,29,0.22); }
.returns-table .year-cell{ font-weight:500; border-left:1px solid var(--line); padding-left:14px; }
section.on-dark .returns-table th{ color: var(--muted-on-dark); border-bottom-color: var(--line-on-dark); }
section.on-dark .returns-table td,
section.on-dark .returns-table tbody th{ border-bottom-color: var(--line-on-dark); }
section.on-dark .returns-table tbody th{ color: var(--paper); }
section.on-dark .returns-table .up{ color: var(--green-dark); }
section.on-dark .returns-table .down{ color:#e08a8a; }
section.on-dark .returns-table .empty{ color: rgba(247,248,245,0.2); }
section.on-dark .returns-table .year-cell{ border-left-color: var(--line-on-dark); }

/* ---------- team ---------- */
.team-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:32px 28px; }
@media (max-width: 900px){ .team-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .team-grid{ grid-template-columns: 1fr; } }
.team-member .portrait{
  aspect-ratio: 4 / 5; width:100%; border:1px solid var(--line-on-dark);
  background: linear-gradient(160deg, rgba(76,193,131,0.10), rgba(247,248,245,0.03));
  display:flex; align-items:center; justify-content:center; margin-bottom:18px; overflow:hidden;
}
.team-member .portrait img{ width:100%; height:100%; object-fit:cover; }
.team-member .portrait .placeholder{
  font-family: var(--font-mono); font-size:10.5px; letter-spacing:0.12em; text-transform:uppercase;
  color: var(--muted-on-dark); text-align:center; padding:0 16px; line-height:1.7;
}
.team-member .role{ color: var(--green-dark); display:block; margin-bottom:8px; }
.team-member h3{ font-size:18px; margin-bottom:8px; }
.team-member .name-slot{ color: var(--muted-on-dark); font-family: var(--font-mono); font-size:12.5px; margin-bottom:10px; }
.team-member p{ color: var(--muted-on-dark); font-size:14px; margin:0; }

/* ---------- relationship manager card ---------- */
.rm-card{
  display:flex; gap:20px; align-items:flex-start; border:1px solid var(--line);
  border-radius:8px; padding:22px 24px; background:var(--paper); margin-bottom:28px; flex-wrap:wrap;
}
.rm-avatar{
  width:64px; height:64px; border-radius:50%; flex-shrink:0; overflow:hidden;
  background: linear-gradient(150deg, rgba(46,158,99,0.18), rgba(27,33,29,0.06));
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-head); font-weight:700; font-size:20px; color:var(--green);
}
/* The initials are drawn straight away and the photo fades over them when it
   has decoded, so the circle is never empty and never changes size. */
.rm-avatar{ position:relative; }
.rm-avatar img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .25s ease;
}
.rm-avatar.has-photo img{ opacity:1; }
.rm-initials{ line-height:1; }
@media (prefers-reduced-motion: reduce){
  .rm-avatar img{ transition:none; }
}
.rm-body{ flex:1; min-width:200px; }
.rm-body .label{ display:block; margin-bottom:5px; }
.rm-body h3{ font-size:17px; margin-bottom:2px; }
.rm-body .rm-role{ color:var(--muted); font-size:13.5px; margin-bottom:12px; }
.rm-contacts{ display:flex; gap:9px; flex-wrap:wrap; }
.rm-contact{
  display:inline-flex; align-items:center; gap:7px; font-size:13px;
  border:1px solid var(--line); border-radius:20px; padding:8px 15px; color:var(--ink);
}
.rm-contact:hover{ border-color:var(--green); color:var(--green); }
.rm-contact.wa:hover{ border-color:#25D366; color:#1a9e4b; }

/* ---------- crypto brand colours ---------- */
.asset-pill{ position:relative; padding-left:34px; }
.asset-pill::before{
  content:""; position:absolute; left:15px; top:50%; transform:translateY(-50%);
  width:9px; height:9px; border-radius:50%; background:var(--coin, var(--muted));
}
.asset-pill.active{ border-color:var(--coin, var(--ink)); }
.coin-dot{
  display:inline-block; width:9px; height:9px; border-radius:50%;
  background:var(--coin, var(--muted)); margin-right:8px; vertical-align:middle;
}
.deposit-grid.coin-accent{ border-top:3px solid var(--coin, var(--green)); }

/* ---------- saved withdrawal addresses ---------- */
.addr-book{ border-top:1px solid var(--line); margin-bottom:8px; }
.addr-entry{
  display:flex; gap:16px; align-items:center; padding:15px 0;
  border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.addr-entry .who{ flex:1; min-width:200px; }
.addr-entry .who strong{ font-size:14.5px; font-weight:500; display:block; }
.addr-entry .who .mono{ font-size:12.5px; color:var(--muted); word-break:break-all; }
.addr-entry .badge{ flex-shrink:0; }

/* ---------- tickets / support ---------- */
.ticket-row{
  display:flex; gap:16px; align-items:center; padding:16px 0;
  border-bottom:1px solid var(--line); cursor:pointer; flex-wrap:wrap;
}
.ticket-row:hover{ opacity:0.75; }
.ticket-row .t-main{ flex:1; min-width:200px; }
.ticket-row .t-main strong{ font-size:14.5px; font-weight:500; display:block; margin-bottom:3px; }
.ticket-row .t-main span{ font-size:12.5px; color:var(--muted); }
/* ============================================================
   THE SUPPORT CONVERSATION
   ============================================================ */
/* It used to be bubbles floating on the page's own white, with the FIRM on
   the right and the client on the left — backwards from every messaging app
   anyone has used. It is now a surface of its own, with your messages on the
   right where you expect them, the firm on the left with a mark beside it,
   and the date called out whenever it changes. */
.thread{
  margin:0 0 4px;
  max-height:min(52vh, 460px); overflow-y:auto;
  background:var(--panel);
  border:1px solid var(--line); border-radius:12px;
  padding:18px 16px;
  display:flex; flex-direction:column; gap:14px;
}
.thread-day{
  display:flex; align-items:center; gap:12px;
  margin:6px 0 2px; color:var(--muted);
  font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:0.1em; text-transform:uppercase;
}
.thread-day::before, .thread-day::after{
  content:""; flex:1 1 auto; height:1px; background:var(--line);
}

.msg{ display:flex; gap:9px; align-items:flex-end; max-width:86%; }
.msg.from-you{ align-self:flex-end; flex-direction:row-reverse; }
.msg.from-firm{ align-self:flex-start; }

.msg-who{
  flex:0 0 26px; width:26px; height:26px; border-radius:50%;
  background:var(--ink); color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.04em;
  margin-bottom:18px;
}
.msg-body{ min-width:0; }
.msg .bubble{
  border-radius:14px; padding:11px 14px; font-size:14px; line-height:1.55;
  white-space:pre-wrap; word-break:break-word;
}
.msg.from-firm .bubble{
  background:var(--paper); color:var(--ink);
  border:1px solid var(--line); border-bottom-left-radius:4px;
}
.msg.from-you .bubble{
  background:var(--green); color:#fff; border-bottom-right-radius:4px;
}
.msg .meta{
  font-family:var(--font-mono); font-size:10px; color:var(--muted);
  margin-top:5px; letter-spacing:0.04em;
}
.msg.from-you .meta{ text-align:right; }

@media (max-width: 520px){
  .msg{ max-width:92%; }
  .thread{ padding:14px 12px; }
}

textarea.msg-input{ min-height:96px; resize:vertical; }

/* ---------- admin client detail ---------- */
.client-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:20px; flex-wrap:wrap; padding-bottom:22px; border-bottom:1px solid var(--line); margin-bottom:26px;
}
.client-head h2{ font-size:24px; margin-bottom:6px; }
.client-head .sub{ color:var(--muted); font-size:14px; }
.client-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.client-actions .btn{ padding:9px 16px; font-size:13px; }
.client-actions .btn-outline:hover{ border-color: var(--green); color: var(--green); opacity:1; }
.detail-cols{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; }
@media (max-width: 900px){ .detail-cols{ grid-template-columns:1fr; gap:28px; } }
.detail-block{ margin-bottom:36px; }
.detail-block > .label{ display:block; margin-bottom:12px; }
.mini-stat-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:28px; }
.mini-stat{ border:1px solid var(--line); border-radius:6px; padding:12px 16px; min-width:120px; }
.mini-stat .k{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); }
.mini-stat .v{ font-family:var(--font-mono); font-size:16px; margin-top:4px; }
.back-to-list{
  background:none; border:none; padding:0; cursor:pointer; color:var(--green);
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.06em;
  text-transform:uppercase; margin-bottom:20px; display:inline-block;
}
.upload-row{
  display:flex; gap:14px; align-items:center; padding:13px 0;
  border-bottom:1px solid var(--line); flex-wrap:wrap;
}
.upload-row .u-main{ flex:1; min-width:180px; }
.upload-row .u-main strong{ display:block; font-size:14px; font-weight:500; }
.upload-row .u-main span{ font-size:12px; color:var(--muted); font-family:var(--font-mono); }
.file-input{
  border:1px dashed var(--line); border-radius:6px; padding:20px; text-align:center;
  background:var(--panel); cursor:pointer; display:block;
}
.file-input:hover{ border-color:var(--green); }
.file-input input{ display:none; }
.file-input .fi-label{ font-size:14px; color:var(--ink); display:block; font-weight:500; }
.file-input .fi-hint{ font-size:12.5px; color:var(--muted); margin-top:5px; display:block; }

/* ---------- documents list ---------- */
.doc-list{ border-top:1px solid var(--line); }
/* Cards, not rows in a table. The card styling was added later and this rule
   still had padding:20px 0 and a bottom border, so every document sat flush
   against its own left edge with a stray rule underneath it. */
.doc-row{
  display:flex; align-items:center; gap:18px;
  padding:18px 20px; margin-bottom:10px;
  flex-wrap:wrap;
}
.doc-icon{
  width:40px; height:48px; border:1px solid var(--line); border-radius:3px; flex-shrink:0;
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:7px;
  font-family: var(--font-mono); font-size:8.5px; letter-spacing:0.06em;
  color:var(--muted); background:var(--panel); position:relative;
}
.doc-icon::before{
  content:""; position:absolute; top:0; right:0;
  border-width:0 11px 11px 0; border-style:solid;
  border-color: var(--paper) transparent transparent var(--line);
}
.doc-main{ flex:1 1 240px; min-width:0; }
.doc-main h3{ font-size:15px; margin:0 0 4px; font-weight:500; }
.doc-main p{ margin:0; font-size:13px; line-height:1.55; color:var(--muted); max-width:56ch; }
.doc-actions{ flex:0 0 auto; margin-left:auto; }
.doc-list{ margin-top:12px; }
.doc-group-label{ display:block; margin-top:32px; }
.doc-row.doc-locked{ opacity:0.62; }

@media (max-width: 620px){
  .doc-row{ padding:16px; gap:14px; }
  .doc-actions{ margin-left:0; width:100%; }
  .doc-actions .btn{ width:100%; }
}
.doc-main p{ color:var(--muted); font-size:13.5px; margin:0; }
.doc-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.doc-actions select{ width:auto; min-width:132px; padding:9px 12px; font-size:13px; }
.doc-locked{ opacity:0.55; }
.doc-group-label{ margin:36px 0 4px; display:block; }
.doc-group-label:first-child{ margin-top:0; }

/* ---------- settings ---------- */
.settings-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
@media (max-width: 800px){ .settings-grid{ grid-template-columns:1fr; gap:32px; } }
.detail-list{ border-top:1px solid var(--line); }
.detail-list .row{
  display:flex; justify-content:space-between; gap:18px;
  padding:13px 0; border-bottom:1px solid var(--line); font-size:14px;
}
.detail-list .row .k{ color:var(--muted); }
.detail-list .row .v{ font-family:var(--font-mono); font-size:13px; text-align:right; word-break:break-word; }

/* ---------- onboarding / account creation ---------- */
.onboard-wrap{ max-width: 760px; margin: 0 auto; }
.onboard-card{
  background: var(--paper); border:1px solid var(--line); border-radius:10px;
  padding:44px 48px; box-shadow: 0 1px 3px rgba(27,33,29,0.04);
}
@media (max-width: 640px){ .onboard-card{ padding:28px 22px; } }
.onboard-card > h2{ font-size:24px; margin-bottom:8px; }
.onboard-card .sub{ color:var(--muted); font-size:15px; margin-bottom:32px; }
.steps-bar{ display:flex; gap:0; margin-bottom:36px; border-bottom:1px solid var(--line); }
.step-tab{
  flex:1; padding:0 0 14px; border-bottom:2px solid transparent;
  font-family: var(--font-mono); font-size:11.5px; letter-spacing:0.08em; text-transform:uppercase;
  color: var(--muted); display:flex; align-items:center; gap:9px;
}
.step-tab.active{ color: var(--ink); border-bottom-color: var(--green); }
.step-tab.done{ color: var(--green); border-bottom-color: var(--green); }
.step-tab .n{
  width:22px; height:22px; border-radius:50%; border:1px solid currentColor;
  display:inline-flex; align-items:center; justify-content:center; font-size:10.5px; flex-shrink:0;
}
.step-tab.done .n{ background: var(--green); border-color: var(--green); color: var(--paper); }
.step-tab.active .n{ background: var(--ink); border-color: var(--ink); color: var(--paper); }
.field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 20px; }
@media (max-width: 560px){ .field-grid{ grid-template-columns:1fr; } }
.field-grid .full{ grid-column:1 / -1; }
.onboard-foot{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  margin-top:8px; flex-wrap:wrap;
}
.kyc-note{
  background: var(--panel); border-radius:6px; padding:16px 18px;
  font-size:13px; color:var(--muted); margin-bottom:28px; line-height:1.6;
}
.auth-switch{ text-align:center; margin-top:26px; font-size:14px; color:var(--muted); }
.auth-switch button{
  background:none; border:none; padding:0; cursor:pointer; color:var(--green);
  font-family:var(--font-head); font-size:14px; font-weight:500; text-decoration:underline;
}
.onboard-benefits{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:26px;
  max-width:760px; margin:44px auto 0; padding-top:34px; border-top:1px solid var(--line);
}
@media (max-width: 760px){ .onboard-benefits{ grid-template-columns:repeat(2, 1fr); gap:22px; } }
.onboard-benefit .label{ color:var(--green); margin-bottom:7px; display:block; }
.onboard-benefit p{ font-size:13.5px; color:var(--muted); margin:0; }

/* ---------- account status ---------- */
.status-banner{
  display:flex; gap:16px; align-items:flex-start; border-radius:8px;
  padding:20px 22px; margin-bottom:28px; border:1px solid var(--line);
}
.status-banner.pending{ background: rgba(196,148,26,0.09); border-color:#dcc179; }
.status-banner.active{ background: rgba(46,158,99,0.08); border-color: rgba(46,158,99,0.4); }
.status-banner h3{ font-size:16px; margin-bottom:5px; }
.status-banner p{ font-size:13.5px; color:var(--muted); margin:0 0 12px; }
.status-banner .icon{ font-size:20px; line-height:1; flex-shrink:0; }
.cert-row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.ref-chip{
  font-family: var(--font-mono); font-size:12px; background: var(--ink); color: var(--paper);
  padding:6px 12px; border-radius:4px; letter-spacing:0.04em;
}

/* ---------- deposit panel (exchange style) ---------- */
.deposit-grid{
  display:grid; grid-template-columns: 232px 1fr; gap:32px; align-items:start;
  border:1px solid var(--line); border-radius:8px; padding:26px; background:var(--paper);
}
@media (max-width: 720px){ .deposit-grid{ grid-template-columns:1fr; gap:24px; } }
.qr-box{ text-align:center; }
.qr-frame{
  border:1px solid var(--line); border-radius:8px; padding:12px; background:#fff;
  display:inline-block; line-height:0;
}
.qr-box .qr-caption{
  font-family: var(--font-mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--muted); margin-top:12px; display:block;
}
.deposit-detail .row{
  display:flex; justify-content:space-between; gap:16px; align-items:baseline;
  padding:12px 0; border-bottom:1px solid var(--line); font-size:14px;
}
.deposit-detail .row:last-of-type{ border-bottom:none; }
.deposit-detail .row .k{ color:var(--muted); font-size:13px; }
.deposit-detail .row .v{ font-family: var(--font-mono); font-size:13.5px; text-align:right; }
.address-field{
  display:flex; align-items:center; gap:12px; background:var(--panel);
  border:1px solid var(--line); border-radius:5px; padding:14px 16px; margin:6px 0 4px;
}
.address-field .addr{
  font-family: var(--font-mono); font-size:13.5px; word-break:break-all; flex:1; line-height:1.5;
}
.amount-input{ display:flex; gap:0; }
.amount-input input{ border-top-right-radius:0; border-bottom-right-radius:0; }
.amount-input select{
  width:auto; min-width:88px; border-left:none;
  border-top-left-radius:0; border-bottom-left-radius:0;
  background:var(--panel); font-family:var(--font-mono); font-size:13px;
}
.quick-fills{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.quick-fill{
  font-family: var(--font-mono); font-size:11.5px; padding:6px 12px; border-radius:4px;
  border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer;
}
.quick-fill:hover{ border-color: var(--green); color: var(--green); }
.dash-actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }
.pending-flag{
  display:flex; gap:10px; align-items:center; background: rgba(196,148,26,0.1);
  border-left:3px solid #c4941a; color:#8a6d1a; padding:12px 16px; font-size:13.5px;
  border-radius:2px; margin-bottom:24px;
}

/* ---------- unsaved-changes bar (admin) ---------- */
.save-bar{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  border:1px solid var(--line); border-radius:6px; padding:14px 18px; margin-top:18px;
  background: var(--panel);
}
.save-bar.dirty{ border-color:#c4941a; background: rgba(196,148,26,0.08); }
.save-bar .status{ font-size:13.5px; color:var(--muted); flex:1; }
.save-bar.dirty .status{ color:#8a6d1a; }
.returns-editor input.dirty{ border-color:#c4941a; background:#fff; }

/* ---------- split auth page ---------- */
.auth-split{ display:grid; grid-template-columns: 1fr 452px; gap:72px; align-items:start; padding:72px 0 96px; }
@media (max-width: 960px){
  .auth-split{ grid-template-columns:1fr; gap:44px; padding:48px 0 64px; }
  .auth-split .auth-card{ max-width:none; }
}
.auth-split .auth-card{ max-width:none; margin:0; }
.auth-pitch h1{ font-size: clamp(30px, 4vw, 42px); margin-bottom:18px; }
.auth-pitch .lede{ color:var(--muted); font-size:17px; max-width:46ch; margin-bottom:38px; }
.step-list{ counter-reset: step; margin-bottom:38px; }
.step{ display:flex; gap:18px; padding:18px 0; border-top:1px solid var(--line); }
.step:last-child{ border-bottom:1px solid var(--line); }
.step .num{
  font-family: var(--font-mono); font-size:12px; color:var(--green);
  flex-shrink:0; width:26px; padding-top:2px;
}
.step h3{ font-size:16px; margin-bottom:5px; }
.step p{ color:var(--muted); font-size:14px; margin:0; }
.trust-row{ display:flex; gap:10px; flex-wrap:wrap; }
.trust-chip{
  font-family: var(--font-mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:20px; padding:8px 14px; color:var(--muted);
}
.asset-strip{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 0; }
.asset-chip{
  font-family: var(--font-mono); font-size:11.5px; border:1px solid var(--line);
  border-radius:4px; padding:7px 10px; color:var(--ink); background:var(--paper);
}
.asset-chip small{ color:var(--muted); margin-left:5px; }

/* ---------- returns editor (admin) ---------- */
.returns-editor{ overflow-x:auto; }
.returns-editor table{ width:100%; border-collapse:collapse; min-width:900px; }
.returns-editor th{
  font-family: var(--font-mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--muted); font-weight:400; text-align:center; padding:0 4px 10px; border-bottom:1px solid var(--line);
}
.returns-editor thead th:first-child{ text-align:left; }
.returns-editor td{ padding:6px 3px; border-bottom:1px solid var(--line); }
.returns-editor tbody th{
  text-align:left; font-family: var(--font-mono); font-size:13px; color:var(--ink);
  padding:6px 10px 6px 0; border-bottom:1px solid var(--line); text-transform:none; letter-spacing:0;
}
.returns-editor input{
  width:100%; min-width:52px; padding:8px 6px; text-align:right;
  font-family: var(--font-mono); font-size:12.5px; border:1px solid transparent;
  background: var(--panel); border-radius:3px; color:var(--ink);
}
.returns-editor input:hover{ border-color: var(--line); }
.returns-editor input:focus{ border-color: var(--green); background: var(--paper); }
.returns-editor input.pos{ color: var(--green); }
.returns-editor input.neg{ color:#b23b3b; }
.returns-editor .year-total{
  font-family: var(--font-mono); font-size:13px; text-align:right; padding-left:14px;
  border-left:1px solid var(--line); white-space:nowrap;
}
.perf-stats{ display:flex; gap:10px; flex-wrap:wrap; margin:24px 0 8px; }
.perf-stat{ border:1px solid var(--line); border-radius:6px; padding:12px 16px; min-width:130px; }
.perf-stat .k{ font-family: var(--font-mono); font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); }
.perf-stat .v{ font-family: var(--font-mono); font-size:17px; margin-top:5px; }
.aum-preview{
  border:1px solid var(--line); border-radius:6px; padding:20px 22px; background: var(--panel); margin-top:14px;
}
.aum-preview .row{ display:flex; justify-content:space-between; gap:16px; padding:7px 0; font-size:14px; }
.aum-preview .row.total{ border-top:1px solid var(--line); margin-top:8px; padding-top:14px; font-weight:500; }
.aum-preview .mono{ font-family: var(--font-mono); }
.check-row{ display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--ink); }
.check-row input[type="checkbox"]{ width:auto; margin-top:3px; flex-shrink:0; }

/* ---------- show password ----------
   The button sits inside the field rather than beside it, so revealing a
   password never changes the shape of the form. The right padding on the
   input is what keeps a long password from running underneath it. */
.pw-wrap{ position:relative; display:block; }
.pw-wrap input[type="password"],
.pw-wrap input[type="text"]{ padding-right:48px; }
.pw-reveal{
  position:absolute; top:0; right:0; height:100%; width:44px;
  display:flex; align-items:center; justify-content:center;
  background:none; border:0; padding:0; cursor:pointer;
  color:var(--muted); border-radius:0 6px 6px 0;
  transition:color .12s ease;
}
.pw-reveal:hover{ color:var(--ink); }
.pw-reveal:focus-visible{ outline:2px solid var(--green); outline-offset:-2px; }
.pw-reveal svg{ display:block; }

/* "Stay signed in on this device" on the login form. A whole row rather than a
   bare tick, so the warning underneath has somewhere to sit and the target is
   big enough to hit on a phone. */
.remember-row{
  margin:4px 0 2px; padding:12px 14px;
  border:1px solid var(--line); border-radius:9px; background:var(--panel);
  cursor:pointer; font-size:13.5px;
  transition:border-color .12s ease;
}
.remember-row:hover{ border-color:rgba(46,158,99,0.45); }
.remember-row .hint{ display:block; margin:3px 0 0; font-size:12px; color:var(--muted); }
/* .forgot-line carries a negative top margin to sit tight under an error slot.
   Under a bordered panel that pulled it inside the border. */
.remember-row + .forgot-line{ margin-top:16px; }
.export-box{
  width:100%; min-height:230px; font-family: var(--font-mono); font-size:11.5px;
  white-space:pre; overflow:auto; line-height:1.5;
}

/* ---------- network badge (deposit / withdraw) ---------- */
.net-badge{
  display:inline-block; font-family: var(--font-mono); font-size:10.5px; letter-spacing:0.06em;
  text-transform:uppercase; padding:4px 9px; border-radius:20px; white-space:nowrap;
  background: rgba(27,33,29,0.06); color: var(--muted); margin-left:8px;
}
.asset-pill .net{ opacity:0.6; font-size:11px; margin-left:6px; }
.network-warn{
  display:flex; gap:10px; align-items:flex-start;
  background: rgba(196,148,26,0.1); border-left:3px solid #c4941a; color:#8a6d1a;
  padding:12px 16px; font-size:13px; border-radius:2px; margin:-8px 0 20px;
}

/* ---------- venture theses ---------- */
.thesis-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; }
@media (max-width: 900px){ .thesis-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .thesis-grid{ grid-template-columns: 1fr; } }
.thesis{ border-top:2px solid var(--green); padding-top:18px; }
.thesis .weight{ font-family: var(--font-mono); font-size:22px; display:block; margin-bottom:6px; }
.thesis h3{ font-size:16px; margin-bottom:8px; }
.thesis p{ color: var(--muted); font-size:14px; margin:0; }
section.on-panel .thesis{ border-top-color: var(--ink); }


/* ============================================================
   PORTAL ON SMALL SCREENS
   ============================================================ */
@media (max-width: 720px){
  /* The portal header stacks instead of squeezing. Stacked it is two rows
     tall, which is too much screen to give up permanently on a phone — so it
     scrolls here and the bottom bar carries navigation instead. */
  .dash-bar{ position:static; }
  .dash-bar .container{ height:auto; padding-top:16px; padding-bottom:16px; flex-wrap:wrap; gap:12px; }
  .dash-bar .brand img{ height:34px; }
  .dash-user{ width:100%; justify-content:space-between; gap:10px; }
  .dash-user .who{ font-size:12.5px; }
  .dash-user .btn{ padding:8px 14px !important; font-size:12px !important; }

  /* tabs scroll sideways rather than wrapping into a tall block */
  .tabs{
    flex-wrap:nowrap; overflow-x:auto; gap:0;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .tabs::-webkit-scrollbar{ display:none; }
  .tabs button{ white-space:nowrap; padding:12px 14px; flex:0 0 auto; }

  /* account summary reads as a list on a phone */


  section.tight{ padding:32px 0; }
  .container{ padding:0 18px; }

  /* forms and actions go full width so nothing is half-tappable */
  .form-row{ flex-direction:column; gap:0; }
  .form-actions{ gap:10px; }
  .form-actions .btn{ width:100%; }
  .form-actions .hint{ text-align:center; width:100%; }
  .two-col{ grid-template-columns:1fr; gap:28px; }

  .deposit-grid{ padding:18px; }
  .qr-box{ margin:0 auto; }
  .address-field{ flex-direction:column; align-items:stretch; gap:10px; }
  .address-field .copy-btn{ width:100%; padding:12px; }
  .amount-input select{ min-width:76px; }
  .asset-picker{ gap:8px; }
  .asset-pill{ font-size:12.5px; padding:9px 14px 9px 30px; }
  .asset-pill .net{ display:none; }

  .doc-row{ gap:14px; }
  .doc-actions{ width:100%; }
  .doc-actions .btn, .doc-actions select{ width:100%; }
  .doc-icon{ display:none; }

  .rm-card{ padding:18px; gap:14px; }
  .rm-contacts{ width:100%; }
  .rm-contact{ flex:1; justify-content:center; }

  .client-actions{ width:100%; }
  .client-actions .btn{ flex:1 1 46%; }
  .mini-stat{ flex:1 1 46%; min-width:0; }
  .msg{ max-width:96%; }
  .status-banner{ padding:16px; }
  .cert-row .btn{ width:100%; }

  /* the admin returns grid and wide tables stay scrollable, not squashed */
  .admin-stat-bar{ grid-template-columns:1fr 1fr; }
  .perf-stat{ flex:1 1 46%; min-width:0; }
}

@media (max-width: 420px){

  .client-actions .btn{ flex:1 1 100%; }
}


/* ============================================================
   MOBILE PORTAL NAVIGATION
   A bottom bar for the places people actually go, and a sheet
   for everything else — the horizontal tab strip is hidden.
   ============================================================ */
.mobile-nav, .nav-sheet, .nav-sheet-backdrop, .dash-menu-btn{ display:none; }

@media (max-width: 900px){
  /* the desktop tab strip gives way to the bottom bar */
  .portal-tabs{ display:none !important; }

  /* Room for the bottom bar, INCLUDING the strip the phone reserves for its
     own home indicator. The bar adds that inset to its own padding, so a flat
     76px left the last line of the page hidden underneath it on any phone
     with a gesture bar — which is most of them now. */
  body.has-mobile-nav{
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    /* Rubber-banding past the end of the page lifts the content clear of the
       fixed bar for a moment and shows the gap underneath it. */
    overscroll-behavior-y: none;
  }

  /* The footer is the thing that ends up under the bar, so it gets a little
     more room than the rule above provides. */
  .portal-footer{ padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }

  .mobile-nav{
    display:grid; grid-template-columns:repeat(5, 1fr);
    position:fixed; left:0; right:0; bottom:0; z-index:120;
    background:var(--paper); border-top:1px solid var(--line);
    /* max() rather than a bare env(): a browser that reports no inset returns
       an empty value in some engines, which makes the whole declaration
       invalid and drops the padding entirely. */
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 8px);

    /* iOS Safari shows and hides its own bar as you scroll, and repaints
       position:fixed elements a frame late while it does — which is the
       half-under-the-bar flicker. Promoting the bar to its own compositor
       layer makes it move with the viewport instead of after it.
       will-change is deliberately not used: it would keep the layer alive
       permanently for no gain. */
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;

    /* A floor under the bar, so a phone reporting no inset still leaves the
       row of labels clear of the screen edge. */
    min-height: 58px;
    box-sizing: border-box;
    box-shadow:0 -2px 14px rgba(27,33,29,0.06);
  }
  .mobile-nav button{
    background:none; border:none; cursor:pointer; padding:11px 4px 10px;
    display:flex; flex-direction:column; align-items:center; gap:4px;
    font-family:var(--font-head); font-size:10.5px; color:var(--muted);
    -webkit-tap-highlight-color:transparent;
  }
  .mobile-nav button svg{ width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.7; }
  .mobile-nav button.active{ color:var(--green); }
  .mobile-nav button .dot{
    position:absolute; top:8px; margin-left:16px; width:7px; height:7px;
    border-radius:50%; background:#c4941a;
  }
  .mobile-nav button{ position:relative; }

  /* the "More" sheet */
  .nav-sheet-backdrop{
    display:block; position:fixed; inset:0; background:rgba(20,24,21,0.45);
    z-index:130; opacity:0; pointer-events:none; transition:opacity .18s ease;
  }
  .nav-sheet-backdrop.open{ opacity:1; pointer-events:auto; }
  .nav-sheet{
    display:block; position:fixed; left:0; right:0; bottom:0; z-index:140;
    background:var(--paper); border-radius:16px 16px 0 0;
    padding:10px 20px calc(24px + env(safe-area-inset-bottom));
    transform:translateY(100%); transition:transform .22s ease;
    max-height:82vh; overflow-y:auto;
  }
  .nav-sheet.open{ transform:translateY(0); }
  .nav-sheet .grabber{
    width:40px; height:4px; border-radius:2px; background:var(--line);
    margin:8px auto 18px;
  }
  .nav-sheet .sheet-item{
    display:flex; align-items:center; gap:14px; width:100%;
    background:none; border:none; border-bottom:1px solid var(--line);
    padding:16px 2px; font-family:var(--font-head); font-size:15.5px;
    color:var(--ink); cursor:pointer; text-align:left;
  }
  .nav-sheet .sheet-item svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.7; flex-shrink:0; }
  .nav-sheet .sheet-item .badge{ margin-left:auto; }
  .nav-sheet .sheet-item.danger{ color:#b23b3b; border-bottom:none; }
  .nav-sheet .sheet-head{
    display:flex; align-items:center; gap:12px; padding:4px 2px 16px;
    border-bottom:1px solid var(--line); margin-bottom:4px;
  }
  .nav-sheet .sheet-head .who{ font-size:14px; }
  .nav-sheet .sheet-close{
    margin-left:auto; flex-shrink:0; width:38px; height:38px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    background:var(--panel); border:1px solid var(--line); color:var(--ink);
    -webkit-tap-highlight-color:transparent;
  }
  .nav-sheet .sheet-close svg{ stroke:currentColor; fill:none; stroke-width:2; }
  .nav-sheet .sheet-head .who b{ display:block; font-size:16px; font-weight:500; }

  /* Only the client portal moves these into the sheet — the admin panel has
     no sheet, so its header buttons must stay reachable on a phone. */
  body.has-mobile-nav .dash-bar .dash-user .btn{ display:none; }
  body.has-mobile-nav .dash-bar .container{ height:auto; padding-top:14px; padding-bottom:14px; flex-wrap:nowrap; }
  body.has-mobile-nav .dash-user{ width:auto; }
}

/* ---------- withdraw: addresses first ---------- */
.step-panel{
  border:1px solid var(--line); border-radius:8px; padding:24px; margin-bottom:26px;
}
.step-panel.is-blocking{ border-color:#dcc179; background:rgba(196,148,26,0.06); }
.step-panel .step-head{
  display:flex; align-items:center; gap:12px; justify-content:space-between;
  flex-wrap:wrap; margin-bottom:6px;
}
.step-panel .step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:50%; background:var(--ink); color:var(--paper);
  font-family:var(--font-mono); font-size:11px; flex-shrink:0; margin-right:10px;
}
.step-panel.done .step-num{ background:var(--green); }
.step-panel h3{ font-size:17px; margin:0; display:flex; align-items:center; }
.step-panel .step-sub{ color:var(--muted); font-size:13.5px; margin:8px 0 0 34px; }
.step-body{ margin:18px 0 0 34px; }
@media (max-width: 560px){
  .step-panel{ padding:18px; }
  .step-panel .step-sub, .step-body{ margin-left:0; }
}
.addr-chip-row{ display:flex; gap:10px; flex-wrap:wrap; }
.addr-chip{
  display:flex; align-items:center; gap:9px; border:1px solid var(--line);
  border-radius:8px; padding:11px 14px; font-size:13.5px; background:var(--paper);
}
.addr-chip .mono{ font-size:12px; color:var(--muted); }
.addr-chip button{
  background:none; border:none; cursor:pointer; color:var(--muted);
  font-size:15px; line-height:1; padding:0 0 0 4px;
}
.addr-chip button:hover{ color:#b23b3b; }


/* ---------- notifications ---------- */
.notif-stack{ margin-bottom:26px; }
.notif{
  display:flex; gap:16px; align-items:flex-start; border:1px solid var(--line);
  border-left:3px solid var(--green); border-radius:8px;
  padding:18px 20px; margin-bottom:12px; background:var(--paper);
}
.notif.is-unread{ background:rgba(46,158,99,0.05); }
.notif.type-support{ border-left-color:#2775CA; }
.notif.type-document_request{ border-left-color:#c4941a; background:rgba(196,148,26,0.07); }
.notif.type-withdrawal{ border-left-color:var(--ink); }
.notif.type-bonus{ border-left-color:#9945FF; }
.notif .n-body{ flex:1; min-width:0; }
.notif h4{ font-size:15.5px; margin:0 0 4px; font-weight:500; }
.notif p{ color:var(--muted); font-size:13.5px; margin:0; }
.notif .n-time{
  font-family:var(--font-mono); font-size:10.5px; color:var(--muted);
  letter-spacing:0.05em; margin-top:8px; display:block;
}
.notif .n-actions{ display:flex; gap:8px; align-items:center; flex-shrink:0; flex-wrap:wrap; }
.notif .n-dismiss{
  background:none; border:none; cursor:pointer; color:var(--muted);
  font-size:19px; line-height:1; padding:0 2px;
}
.notif .n-dismiss:hover{ color:var(--ink); }
@media (max-width: 620px){
  .notif{ flex-direction:column; gap:12px; padding:16px; }
  .notif .n-actions{ width:100%; }
  .notif .n-actions .btn{ flex:1; }
}
.notif-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:19px; height:19px; padding:0 6px; border-radius:10px;
  background:var(--green); color:var(--paper);
  font-family:var(--font-mono); font-size:10.5px; margin-left:7px;
}
.mobile-nav .nav-count{
  position:absolute; top:6px; right:50%; margin-right:-20px;
  min-width:16px; height:16px; padding:0 4px; border-radius:8px;
  background:var(--green); color:var(--paper);
  font-family:var(--font-mono); font-size:9.5px; line-height:16px; text-align:center;
}


/* ---------- hamburger in the portal header (mobile) ---------- */
@media (max-width: 900px){
  .dash-menu-btn{
    display:flex; align-items:center; justify-content:center; gap:0;
    background:none; border:1px solid var(--line-on-dark); border-radius:6px;
    width:42px; height:42px; cursor:pointer; padding:0; flex-shrink:0;
  }
  .dash-menu-btn span{ display:block; width:17px; height:1.8px; background:var(--paper); margin:2.4px 0; }
  body.has-mobile-nav .dash-bar .container{ gap:12px; }
}

/* the sheet doubles as the full menu, so it needs every destination */
.nav-sheet .sheet-section{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--muted); padding:16px 2px 6px;
}

/* ---------- notification inbox ---------- */
.inbox-head{
  display:flex; justify-content:space-between; align-items:center;
  gap:14px; flex-wrap:wrap; margin-bottom:18px;
}
.inbox-list{ border-top:1px solid var(--line); }
.inbox-item{
  display:flex; gap:16px; align-items:flex-start;
  padding:18px 4px; border-bottom:1px solid var(--line);
}
.inbox-item.unread{ background:rgba(46,158,99,0.045); }
.inbox-item .dot{
  width:8px; height:8px; border-radius:50%; background:var(--green);
  flex-shrink:0; margin-top:7px;
}
.inbox-item.read .dot{ background:transparent; border:1px solid var(--line); }
.inbox-item .i-body{ flex:1; min-width:0; }
.inbox-item h4{ font-size:15px; margin:0 0 4px; font-weight:500; }
.inbox-item.read h4{ font-weight:400; color:var(--muted); }
.inbox-item p{ font-size:13.5px; color:var(--muted); margin:0; }
.inbox-item .i-meta{
  font-family:var(--font-mono); font-size:10.5px; color:var(--muted);
  letter-spacing:0.05em; margin-top:7px; display:block;
}
.inbox-item .i-actions{ display:flex; gap:10px; flex-shrink:0; align-items:center; }
@media (max-width: 560px){
  .inbox-item{ flex-wrap:wrap; }
  .inbox-item .i-actions{ width:100%; padding-left:24px; gap:18px; margin-top:4px; }
}

/* ---------- balances block ---------- */
.balance-cards{ display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-bottom:30px; }
@media (max-width: 900px){ .balance-cards{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 460px){ .balance-cards{ grid-template-columns:1fr; } }
.balance-card{
  border:1px solid var(--line); border-radius:8px; padding:18px 20px; background:var(--paper);
}
.balance-card .k{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--muted);
}
.balance-card .v{ font-family:var(--font-mono); font-size:22px; margin-top:7px; }
.balance-card .v.up{ color:var(--green); }
.balance-card .v.down{ color:#b23b3b; }
.balance-card .sub{ font-size:12px; color:var(--muted); margin-top:5px; }

/* ---------- pagination ---------- */
.pager{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-top:20px; padding-top:18px; border-top:1px solid var(--line);
}
.pager .pager-info{ font-size:13px; color:var(--muted); }
.pager .pager-controls{ display:flex; align-items:center; gap:8px; }
.pager button{
  background:none; border:1px solid rgba(27,33,29,0.26); border-radius:5px;
  padding:8px 14px; cursor:pointer; font-family:var(--font-head); font-size:13px; color:var(--ink);
}
.pager button:hover:not(:disabled){ border-color:var(--green); color:var(--green); }
.pager button:disabled{ opacity:0.4; cursor:default; }
.pager .page-num{ font-family:var(--font-mono); font-size:13px; padding:0 6px; }
.pager select{ width:auto; padding:8px 10px; font-size:13px; }
.pager .size-wrap{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--muted); }
@media (max-width: 560px){
  .pager{ flex-direction:column; align-items:stretch; }
  .pager .pager-controls{ justify-content:space-between; }
}

/* ---------- support call to action ---------- */
.support-cta{
  display:flex; gap:20px; align-items:center; justify-content:space-between;
  border:1px solid var(--line); border-left:3px solid var(--green);
  border-radius:8px; padding:24px 26px; margin-bottom:28px; flex-wrap:wrap;
}
.support-cta h3{ font-size:17px; margin:0 0 6px; }
.support-cta p{ color:var(--muted); font-size:14px; margin:0; max-width:56ch; }
.support-cta .btn{ flex-shrink:0; }
@media (max-width: 620px){
  .support-cta{ padding:20px; }
  .support-cta .btn{ width:100%; }
}

/* ---------- overview: the dark header stops repeating the balance cards ----------
   On the overview the four balance cards carry deposited / return / pending, so
   the header there is just the account value and the sparkline. Every other tab
   keeps the full four-cell header. */
body.on-overview .summary-grid{ grid-template-columns: 1fr 2fr; }
body.on-overview .summary-cell.hide-on-overview{ display:none; }
@media (max-width: 860px){

}

/* "N more notifications in your inbox" under the dashboard's newest few */
.notif-more{
  display:block; width:100%; text-align:center; background:none; cursor:pointer;
  border:1px dashed var(--line); border-radius:8px; padding:12px 16px;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--muted); transition:color .15s, border-color .15s;
}
.notif-more:hover{ color:var(--green-dark); border-color:var(--green); }

/* Return blurb sits on one line instead of leaving half the row empty */
.return-note{
  display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr);
  gap:30px; align-items:center; padding:22px 0 30px;
  border-top:1px solid var(--line); margin-top:28px;
}
@media (max-width: 720px){
  .return-note{ grid-template-columns:1fr; gap:12px; }
}

/* On a phone the inbox controls are two compact buttons, not stacked blocks */
@media (max-width: 560px){
  .inbox-head .client-actions{ display:flex; gap:10px; width:100%; }
  .inbox-head .client-actions .btn{ flex:1; padding:10px 12px; font-size:13px; }
}

/* ============================================================
   Research articles — data furniture
   Tables, figures, key-stat rows and source lists for the
   longer, data-led notes.
   ============================================================ */

/* Wider measure for notes that carry tables and charts, so a table
   is not forced into the 68ch reading column. */
.article-body.wide{ max-width: 860px; }
.article-body.wide > p,
.article-body.wide > h2,
.article-body.wide > h3,
.article-body.wide > blockquote{ max-width: 68ch; }

/* ---- standfirst ---- */
.article-body .standfirst{
  font-size: 21px; line-height: 1.6; color: var(--ink);
  padding-bottom: 1.2em; margin-bottom: 1.6em;
  border-bottom: 1px solid var(--line);
}

/* ---- figure + chart ---- */
.article-body .figure{ margin: 2.2em 0 2.6em; }
.article-body .figure-head{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:16px; flex-wrap:wrap; margin-bottom:14px;
}
.article-body .figure-head .fig-no{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--muted);
}
.article-body .figure-head h3{
  font-family:var(--font-head); font-size:16px; margin:0; font-weight:500;
}
.article-body .figure-frame{
  border:1px solid var(--line); border-radius:10px; background:var(--paper);
  padding:18px 16px 12px;
}
.article-body .figure figcaption{
  font-family:var(--font-head); font-size:13px; color:var(--muted);
  margin-top:12px; line-height:1.5; max-width:70ch;
}
.chart-svg{ width:100%; height:auto; overflow:visible; }
.chart-svg .grid{ stroke:var(--line); stroke-width:1; }
.chart-svg .axis-label{
  font-family:var(--font-mono); font-size:9.5px; fill:var(--muted);
  letter-spacing:0.06em;
}
.chart-svg .series{ fill:none; stroke:var(--ink); stroke-width:2;
  stroke-linejoin:round; stroke-linecap:round; }
.chart-svg .pt{ fill:var(--ink); }
.chart-svg .pt-ring{ fill:var(--paper); stroke:var(--ink); stroke-width:2; }
.chart-svg .pt-label{
  font-family:var(--font-mono); font-size:10px; fill:var(--ink);
  letter-spacing:0.04em;
}
.chart-svg .pt-label.sub{ fill:var(--muted); font-size:9px; }

/* ---- data table ---- */
.data-table-wrap{ overflow-x:auto; margin:1.6em 0 0.6em; }
table.data-table{
  width:100%; border-collapse:collapse;
  font-family:var(--font-head); font-size:14px;
}
table.data-table th,
table.data-table td{
  text-align:left; padding:11px 14px 11px 0;
  border-bottom:1px solid var(--line); vertical-align:top;
}
table.data-table thead th{
  font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--muted); font-weight:400;
  border-bottom:1px solid rgba(27,33,29,0.28);
}
table.data-table td.num,
table.data-table th.num{ text-align:right; font-family:var(--font-mono); font-size:13px; padding-right:0; }
table.data-table td.num.up{ color:var(--green); }
table.data-table td.num.down{ color:#b23b3b; }
table.data-table tbody tr:last-child td{ border-bottom:none; }
table.data-table caption{
  caption-side:bottom; text-align:left; font-family:var(--font-head);
  font-size:12.5px; color:var(--muted); padding-top:12px; line-height:1.5;
}

/* ---- key stats strip ---- */
.stat-strip{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:10px;
  overflow:hidden; margin:2em 0;
}
@media (max-width: 720px){ .stat-strip{ grid-template-columns:repeat(2, 1fr); } }
.stat-strip .s{ background:var(--paper); padding:18px 18px 16px; }
.stat-strip .s .v{
  font-family:var(--font-mono); font-size:22px; color:var(--ink); line-height:1.1;
}
.stat-strip .s .v.down{ color:#b23b3b; }
.stat-strip .s .v.up{ color:var(--green); }
.stat-strip .s .k{
  font-family:var(--font-head); font-size:12.5px; color:var(--muted);
  margin-top:7px; line-height:1.4;
}

/* ---- pull stat inside prose ---- */
.article-body .inline-note{
  font-family:var(--font-head); font-size:14px; color:var(--muted);
  background:var(--panel); border-radius:8px; padding:16px 20px;
  margin:2em 0; line-height:1.6; max-width:none;
}

/* ---- sources ---- */
.sources{
  margin-top:3em; padding-top:22px; border-top:1px solid var(--line);
  font-family:var(--font-head); font-size:13.5px; color:var(--muted);
  max-width:none;
}
.sources h3{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--muted); margin-bottom:12px; font-weight:400;
}
.sources ol{ margin:0; padding-left:20px; }
.sources li{ margin-bottom:7px; line-height:1.5; }
.sources a{ color:var(--green); border-bottom:1px solid rgba(46,158,99,0.3); }
.sources a:hover{ border-bottom-color:var(--green); }
.as-of{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line); border-radius:100px;
  padding:6px 14px; display:inline-block; margin-bottom:26px;
}

/* ---------- admin: bulk return panel ---------- */
.bulk-return{
  border:1px solid var(--line); border-left:3px solid var(--green);
  border-radius:10px; padding:26px 28px; background:var(--paper);
}
.apply-preview{
  margin:20px 0 4px; padding:16px 20px; background:var(--panel);
  border-radius:8px; max-width:640px;
}
.apply-preview .ap-row{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:16px; padding:7px 0; font-size:14px;
}
.apply-preview .ap-row + .ap-row{ border-top:1px solid var(--line); }
.apply-preview .ap-row span{ color:var(--muted); }
.apply-preview .ap-row b{ font-family:var(--font-mono); font-size:15px; font-weight:500; }
.apply-preview .ap-row b.up{ color:var(--green); }
.apply-preview .ap-row b.down{ color:#b23b3b; }
@media (max-width: 600px){
  .bulk-return{ padding:20px 18px; }
  .apply-preview .ap-row{ flex-direction:column; gap:2px; }
}

/* ============================================================
   Form controls — consistency and affordance
   ============================================================ */

/* Native date inputs need explicit sizing or Safari renders them at their own
   intrinsic width and they stop matching the fields beside them. */
input[type="date"]{ min-height:45px; appearance:none; -webkit-appearance:none; }
input[type="date"]::-webkit-calendar-picker-indicator{ cursor:pointer; opacity:0.55; }
input[type="date"]::-webkit-calendar-picker-indicator:hover{ opacity:1; }

/* A save button is the point of the form it sits in, so it should read as a
   button. The outline variant was too recessive for these — it looked like a
   label. Anything inside .form-actions gets a real, visible control. */
.form-actions .btn{ min-height:44px; padding:12px 22px; font-size:14px; }
.form-actions .btn-outline{
  border-width:1.5px; border-color:var(--ink); color:var(--ink); font-weight:500;
  background:var(--paper);
}
.form-actions .btn-outline:hover{
  background:var(--ink); border-color:var(--ink); color:var(--paper); opacity:1;
}
.form-actions .btn-primary{ font-weight:500; }

/* Saved-state confirmation next to a form button */
.save-flash{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--green);
  opacity:0; transition:opacity .18s;
}
.save-flash.on{ opacity:1; }

/* Settings sections read as distinct cards rather than one long column */
.settings-card{
  border:1px solid var(--line); border-radius:10px; padding:24px 26px;
  background:var(--paper); margin-bottom:22px;
}
.settings-card > .label{ display:block; margin-bottom:4px; }
.settings-card .card-sub{
  color:var(--muted); font-size:13.5px; margin:0 0 16px; line-height:1.5;
}
@media (max-width: 600px){
  .settings-card{ padding:20px 18px; }
}

/* ---------- document request: pinned, titled, unmissable ---------- */
.doc-request-card{
  border:1px solid rgba(196,148,26,0.4); border-left:4px solid #c4941a;
  border-radius:10px; background:rgba(196,148,26,0.07);
  padding:22px 26px; margin-bottom:26px;
}
.doc-request-card .dr-flag{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.12em;
  text-transform:uppercase; color:#8a6710; margin-bottom:10px;
}
.doc-request-card h3{ font-size:18px; margin:0 0 8px; }
.doc-request-card p{ color:var(--muted); font-size:14.5px; margin:0 0 12px; max-width:66ch; }
.doc-request-card .dr-meta{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.05em;
  color:var(--muted); display:block;
}
@media (max-width: 600px){ .doc-request-card{ padding:18px 18px; } }

/* ---------- statement period picker ---------- */
.period-presets{ display:flex; gap:8px; flex-wrap:wrap; }
.period-presets button{
  font-family:var(--font-head); font-size:13px; padding:9px 14px;
  border:1px solid var(--line); border-radius:100px; background:var(--paper);
  color:var(--muted); cursor:pointer; transition:all .15s;
}
.period-presets button:hover{ border-color:var(--ink); color:var(--ink); }
.period-presets button.on{
  background:var(--ink); border-color:var(--ink); color:var(--paper);
}
.stmt-summary{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.05em;
  color:var(--green); margin-top:14px;
}
.stmt-summary.empty{ color:var(--muted); }

/* ---------- admin: document request presets ---------- */
.dr-presets{ display:flex; gap:8px; flex-wrap:wrap; }
.dr-presets button{
  font-family:var(--font-head); font-size:13px; padding:8px 13px;
  border:1px solid var(--line); border-radius:100px; background:var(--paper);
  color:var(--muted); cursor:pointer; transition:all .15s;
}
.dr-presets button:hover{ border-color:var(--ink); color:var(--ink); }
.dr-presets button.on{ background:var(--ink); border-color:var(--ink); color:var(--paper); }

/* ---------- auth: one visible control for both routes ---------- */
.auth-toggle{
  display:grid; grid-template-columns:1fr 1fr; gap:4px;
  background:var(--panel); border:1px solid var(--line);
  border-radius:100px; padding:4px; margin-bottom:30px;
}
.auth-toggle button{
  font-family:var(--font-head); font-size:14px; font-weight:500;
  padding:11px 16px; border:none; border-radius:100px; cursor:pointer;
  background:transparent; color:var(--muted); transition:all .16s;
}
.auth-toggle button:hover{ color:var(--ink); }
.auth-toggle button.on{
  background:var(--ink); color:var(--paper);
  box-shadow:0 1px 3px rgba(27,33,29,0.16);
}
.auth-switch{
  margin-top:26px; padding-top:22px; border-top:1px solid var(--line);
  text-align:center; font-size:14.5px; color:var(--muted);
}
.auth-switch button{
  background:none; border:none; padding:0 0 0 4px; cursor:pointer;
  font-family:var(--font-head); font-size:14.5px; font-weight:500;
  color:var(--green); text-decoration:underline; text-underline-offset:3px;
}
.auth-switch button:hover{ color:var(--green-dark); }

/* ---------- about: plain-language value cards ---------- */
.value-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:22px; }
@media (max-width: 820px){ .value-grid{ grid-template-columns:1fr; } }
.value-card{
  border:1px solid var(--line); border-radius:12px; padding:28px 30px;
  background:var(--paper); transition:border-color .18s;
}
.value-card:hover{ border-color:rgba(27,33,29,0.26); }
.value-card .v-num{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.12em;
  color:var(--green); display:block; margin-bottom:14px;
}
.value-card h3{ font-size:19px; margin:0 0 10px; }
.value-card p{ color:var(--muted); font-size:15px; line-height:1.6; margin:0; }

/* ---------- signup: risk acknowledgment ---------- */
.risk-ack{
  border:1px solid var(--line); border-left:3px solid var(--green);
  border-radius:8px; padding:20px 22px; background:var(--panel); margin:22px 0 4px;
}
.risk-ack .check-row{ align-items:flex-start; margin-bottom:14px; font-size:14px; line-height:1.55; }
.risk-ack .check-row:last-child{ margin-bottom:0; }
.risk-ack .check-row b{ color:var(--ink); }
.risk-ack a{ color:var(--green); text-decoration:underline; }

/* ---------- storage notice ---------- */
.storage-notice{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:900;
  max-width:640px; margin-inline:auto;
  background:var(--dark); color:var(--paper);
  border-radius:10px; padding:18px 22px;
  box-shadow:0 8px 30px rgba(20,26,23,.28);
  display:flex; gap:18px; align-items:center; flex-wrap:wrap;
}
.storage-notice p{ margin:0; font-size:13.5px; line-height:1.55; flex:1; min-width:220px; color:var(--muted-on-dark); }
.storage-notice p b{ color:var(--paper); font-weight:500; }
.storage-notice a{ color:var(--green-dark); text-decoration:underline; }
.storage-notice .btn{ padding:10px 20px; font-size:13.5px; white-space:nowrap; }
@media (max-width: 560px){
  .storage-notice{ padding:16px 18px; }
  .storage-notice .btn{ width:100%; }
}

/* ---------- admin: list controls ---------- */
.list-controls{
  display:flex; gap:14px; align-items:center; flex-wrap:wrap;
  margin-bottom:20px; padding-bottom:18px; border-bottom:1px solid var(--line);
}
.search-wrap{ flex:1; min-width:230px; }
.search-wrap input{ width:100%; }
.filter-pills{ display:flex; gap:7px; flex-wrap:wrap; }
.filter-pills button{
  font-family:var(--font-head); font-size:13px; padding:8px 14px;
  border:1px solid var(--line); border-radius:100px; background:var(--paper);
  color:var(--muted); cursor:pointer; transition:all .15s;
}
.filter-pills button:hover{ border-color:var(--ink); color:var(--ink); }
.filter-pills button.on{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.list-count{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap;
}
@media (max-width: 640px){
  .list-controls{ gap:12px; }
  .filter-pills{ width:100%; }
  .filter-pills button{ flex:1; text-align:center; }
}
/* ---------- skip link ---------- */
.skip-link{
  position:absolute; left:14px; top:-48px; z-index:1000;
  background:var(--ink); color:var(--paper); padding:11px 18px;
  border-radius:0 0 6px 6px; font-size:14px; font-weight:500;
  transition:top .16s;
}
.skip-link:focus{ top:0; outline:2px solid var(--green); outline-offset:2px; }
:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }

/* Visually hidden but read by assistive technology */
.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;
}

/* ============================================================
   Account header — phone layout
   ------------------------------------------------------------
   On a phone the old band ran to 316px of a 844px screen: four
   stretched rows with the value repeated in the balance cards
   immediately below it. This makes it one compact block — label,
   value, change, and a sparkline with enough height to read.
   ============================================================ */

/* The change figure beside the account value. Hidden on desktop, where
   the neighbouring cells already carry deposited and return. */
.stat-change{ display:none; }

@media (max-width: 720px){
  .summary-grid{
    grid-template-columns:1fr !important;
    gap:0; border-top:1px solid var(--line-on-dark);
  }

  /* One block, not a stack of stretched rows */
  .summary-cell{
    padding:16px 20px 0;
    border-right:none; border-bottom:none;
    display:flex; flex-direction:column; align-items:flex-start;
  }

  /* Label above the number on a phone — it reads as a caption otherwise */
  .summary-cell .label{ order:1; margin:0 0 6px; font-size:10.5px; }
  .summary-cell .figure{ order:2; font-size:30px; line-height:1.05; letter-spacing:-0.02em; }
  .summary-cell .stat-change{ order:3; }

  /* Label, value, change — stacked. Side by side collides once the value
     runs past six figures, and a stacked change costs about twenty pixels. */
  .summary-cell.primary-cell{
    display:flex; flex-direction:column; align-items:flex-start;
    padding-bottom:14px;
  }
  .summary-cell.primary-cell .figure{ font-size:28px; }
  .summary-cell.primary-cell .stat-change{
    order:3; margin-top:9px;
    display:inline-flex; align-items:center; gap:8px;
    font-family:var(--font-mono); font-size:12.5px; white-space:nowrap;
  }
  .stat-change.up{ color:var(--green-dark); }
  .stat-change.down{ color:#e08a8a; }
  .stat-change .arrow{ font-size:11px; }
  .stat-change .pct{
    padding:2px 7px; border-radius:100px; font-size:11.5px;
    background:rgba(76,193,131,0.14);
  }
  .stat-change.down .pct{ background:rgba(224,138,138,0.16); }

  /* A strip the full width of the band, tall enough to show a shape */
  .spark-cell{
    padding:0 20px 16px; display:block;
  }
  .spark-cell .label{ display:none; }
  .spark-cell svg{ display:block; width:100%; height:52px; }

  /* Other tabs have no balance cards, so the three figures stay — but as a
     compact row rather than three full-height blocks. */
  body:not(.on-overview) .summary-grid{
    grid-template-columns:1fr 1fr !important;
  }
  body:not(.on-overview) .summary-cell.primary-cell{
    grid-column:1 / -1; border-bottom:1px solid var(--line-on-dark);
    padding-bottom:14px; margin-bottom:2px;
  }
  body:not(.on-overview) .summary-cell.hide-on-overview{
    padding:12px 20px 14px;
  }
  body:not(.on-overview) .summary-cell.hide-on-overview .figure{ font-size:19px; }
  body:not(.on-overview) .spark-cell{ display:none; }
}

/* Very narrow phones: let the change wrap under the value rather than
   squeezing both onto one line. */
@media (max-width: 380px){
  .summary-cell.primary-cell{
    grid-template-columns:1fr;
    grid-template-areas:"label" "value" "change";
  }
  .summary-cell .figure{ font-size:27px; }
}

@media (max-width: 720px){
  /* The band carries the account value and its return, so the matching card
     directly beneath it is the same number twice within one screen. */
  body.on-overview #balanceCards .balance-card.dup-of-header{ display:none; }

  /* The band is a compact block now; the old section padding left ~90px of
     empty dark below the sparkline. */
  .dash-summary-section,
  section.on-dark.tight:has(.summary-grid){ padding-bottom:0; }
}

/* ---------- about: who runs it, as a role table ---------- */
.role-table{ border-top:1px solid var(--line-on-dark); }
.role-row{
  display:grid; grid-template-columns:58px minmax(0,274px) minmax(0,1fr);
  gap:22px; padding:26px 0; border-bottom:1px solid var(--line-on-dark);
  align-items:start;
}

/* A monogram rather than a portrait: the initials set in the same mono face
   the rest of the site uses for labels, so it reads as part of the system
   instead of a gap where a photograph should be. */
.role-mono{
  width:58px; height:58px; border-radius:11px;
  display:grid; place-items:center;
  font-family:var(--font-mono); font-size:15px; font-weight:500;
  letter-spacing:0.08em; color:var(--green-dark);
  background:rgba(76,193,131,0.09);
  border:1px solid rgba(76,193,131,0.30);
}

.role-row .r-name{ padding-top:4px; }
.role-row .r-name .label.role{
  display:block; margin-bottom:8px; color:var(--green-dark);
  white-space:nowrap;
}
.role-row .r-name h3{ font-size:20px; margin:0; color:var(--paper); }
.role-row p{
  margin:0; padding-top:6px; color:var(--muted-on-dark);
  font-size:15px; line-height:1.6; max-width:66ch;
}
@media (max-width: 900px){
  .role-row .r-name .label.role{ white-space:normal; }
}
@media (max-width: 820px){
  .role-row{
    grid-template-columns:52px minmax(0,1fr);
    grid-template-areas:"mono name" "desc desc";
    gap:16px 18px; padding:22px 0;
  }
  .role-mono{ grid-area:mono; width:52px; height:52px; font-size:14px; }
  .role-row .r-name{ grid-area:name; padding-top:2px; }
  .role-row .r-name h3{ font-size:18px; }
  .role-row p{ grid-area:desc; padding-top:0; }
}

/* ---------- footer: registered entity ---------- */
.legal-entity{
  line-height:1.7; font-size:13px; color:var(--muted-on-dark);
}
.legal-entity b{
  color:var(--paper); font-weight:500; font-size:13.5px;
  letter-spacing:0.01em;
}

/* ---------- disclosures: entity details ---------- */
.entity-block{
  border:1px solid var(--line); border-radius:10px;
  background:var(--panel); padding:6px 22px; margin:18px 0 34px;
}
.entity-block .e-row{
  display:grid; grid-template-columns:minmax(0,190px) minmax(0,1fr);
  gap:18px; padding:14px 0; border-bottom:1px solid var(--line);
  align-items:baseline;
}
.entity-block .e-row:last-child{ border-bottom:none; }
.entity-block .e-k{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--muted);
}
.entity-block .e-v{ font-size:15px; color:var(--ink); }
.entity-block .e-v a{ color:var(--green); text-decoration:underline; }
.entity-block .e-v.pending{
  color:var(--muted); font-style:italic;
}
@media (max-width: 620px){
  .entity-block .e-row{ grid-template-columns:1fr; gap:4px; padding:12px 0; }
}

/* ---------- auth pages ---------- */
.auth-hero .hero-sub{ max-width:60ch; }
.auth-reassure{
  display:flex; gap:10px 26px; flex-wrap:wrap; margin-top:26px;
  font-size:14px; color:var(--muted-on-dark);
}
.auth-reassure b{ color:var(--paper); font-weight:500; }

/* a login page does not need the two-column onboarding layout */
.login-wrap{ max-width:470px; margin-inline:auto; }
.login-card{ padding:34px 36px; }
@media (max-width: 560px){ .login-card{ padding:26px 22px; } }

/* the prompt that sits ABOVE the form, so neither route is ever hidden */
.auth-switch-top{
  font-size:14px; color:var(--muted); padding-bottom:18px; margin-bottom:24px;
  border-bottom:1px solid var(--line);
}
.auth-switch-top a{
  color:var(--green); font-weight:500; text-decoration:underline;
  text-underline-offset:3px; margin-left:4px;
}
.auth-switch-top a:hover{ color:var(--green-dark); }

/* "New to Chain Grove?" rule between the form and the other route */
.auth-divider{
  display:flex; align-items:center; gap:16px;
  margin:30px 0 20px; color:var(--muted); font-size:13px;
}
.auth-divider::before, .auth-divider::after{
  content:""; flex:1; height:1px; background:var(--line);
}

/* On a phone the nav collapses to a stacked sheet, where full-width buttons
   read better than two side-by-side pills squeezed into a row. */
@media (max-width: 860px){
  .nav-actions{
    flex-direction: column; align-items: stretch;
    width: 100%; margin-top: 16px;
  }
  .nav-links .nav-btn{
    width: 100%; margin: 0 !important;
    text-align: center; padding: 14px 20px; border-bottom: none;
  }
}

/* ---------- the screen after a successful registration ----------
   Registration ends by sending an email, not by landing the person in an
   account. That gap is where people give up, so the last screen has to read
   as a completed step rather than a form that disappeared. */
.confirm-sent{ text-align:center; padding:12px 4px 8px; }
.confirm-tick{
  width:56px; height:56px; margin:0 auto 22px; border-radius:50%;
  background:var(--green); color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  font-size:26px; line-height:1;
}
.confirm-sent h2{ font-size:24px; margin:0 0 12px; }
.confirm-sent p{ color:var(--muted); max-width:44ch; margin:0 auto 14px; line-height:1.6; }
.confirm-sent strong{ color:var(--ink); font-family:var(--font-mono); font-size:14px; }
.confirm-sent .confirm-note{ font-size:13.5px; }
.confirm-sent .btn{ margin-top:18px; }

/* A neutral message in the same slot the error box uses — "email confirmed",
   not "something went wrong". */
/* A form-level error. There is a `.field .error` rule above, but that is a
   DESCENDANT selector — it styles an .error nested inside a .field. Every form
   on this site writes `<div class="field error">`, both classes on the one
   element, which that selector never matches. So the message telling someone
   their code was wrong has been rendering as ordinary paragraph text, the same
   weight and colour as everything around it, at the exact moment it needed to
   stand out. This is its own rule, mirroring .field.notice. */
.field.error{
  color:#b23b3b; background:rgba(178,59,59,0.07);
  border:1px solid rgba(178,59,59,0.24); border-radius:8px;
  padding:11px 14px; font-size:14px; margin-bottom:16px;
}

.field.error a{ color:inherit; text-decoration:underline; text-underline-offset:2px; font-weight:500; }

.field.notice{
  color:var(--green); background:rgba(46,158,99,0.07);
  border:1px solid rgba(46,158,99,0.22); border-radius:8px;
  padding:11px 14px; font-size:14px; margin-bottom:16px;
}

/* The dashboard holds its content back until the server has confirmed who is
   signed in. Without this, a stranger opening the URL sees the shell of an
   account for a moment before being redirected — which looks like a leak even
   when no data has loaded. */
body[data-checking-session] .dash-bar,
body[data-checking-session] #main,
body[data-checking-session] .mobile-nav{ visibility:hidden; }

/* ...but a blank white screen while that happens reads as a broken site, not
   a loading one. On a slow phone connection it is several seconds. */
.portal-loading{ display:none; }
body[data-checking-session] .portal-loading{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  position:fixed; inset:0; gap:16px;
  background:var(--paper); z-index:400;
}
.portal-loading p{
  margin:0; font-size:13.5px; color:var(--muted);
  font-family:var(--font-mono); letter-spacing:0.02em;
}
.portal-loading-mark{
  width:30px; height:30px; border-radius:50%;
  border:2px solid var(--line); border-top-color:var(--green);
  animation:portal-spin .8s linear infinite;
}
@keyframes portal-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .portal-loading-mark{ animation-duration:2.4s; }
}

/* A client who cannot get in has to be able to see the way out from the form
   itself, not hunt for it. Sits under the error slot so it is the next thing
   read after a failed attempt. */
.forgot-line{ margin:-6px 0 18px; font-size:13.5px; }
.forgot-line a{
  color:var(--muted); text-decoration:underline; text-underline-offset:3px;
}
.forgot-line a:hover{ color:var(--green); }

/* A confirmed client whose account is still being reviewed needs to be told
   that, or the dashboard just looks broken to them. */
.pending-banner{
  display:flex; gap:14px; align-items:flex-start;
  background:rgba(214,158,46,0.08); border:1px solid rgba(214,158,46,0.28);
  border-left:3px solid #c9932c; border-radius:10px;
  padding:16px 18px; margin-bottom:26px;
}
.pending-banner .pb-body{ font-size:14px; line-height:1.6; color:var(--ink); }
.pending-banner .pb-body strong{ display:block; margin-bottom:4px; font-size:15px; }
.pending-banner .pb-body span{ color:var(--muted); }

/* ---------- entering a six-digit code ----------
   One field rather than six boxes: it takes a pasted code in one go, it does
   not fight screen readers, and autocomplete="one-time-code" lets a phone
   offer the code straight from the notification. */
input.code-field{
  width:100%; text-align:center;
  font-family:var(--font-mono); font-size:30px; font-weight:600;
  letter-spacing:11px; text-indent:11px;   /* indent cancels the trailing gap */
  padding:18px 12px;
}
input.code-field::placeholder{ letter-spacing:11px; color:#c2c8c0; font-weight:400; }
.code-sent-to{
  font-size:14px; color:var(--muted); text-align:center;
  margin:0 0 22px; line-height:1.6;
}
.code-sent-to strong{
  display:block; color:var(--ink);
  font-family:var(--font-mono); font-size:14px; margin-top:3px;
}
.code-actions{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:16px; font-size:13.5px;
}
.code-actions button{
  background:none; border:0; padding:0; cursor:pointer;
  font-family:inherit; font-size:13.5px;
  color:var(--green); text-decoration:underline; text-underline-offset:3px;
}
.code-actions button:disabled{ color:var(--muted); cursor:default; text-decoration:none; }
.code-actions a{ color:var(--muted); text-decoration:underline; text-underline-offset:3px; }

@media (max-width: 420px){
  input.code-field{ font-size:25px; letter-spacing:7px; text-indent:7px; }
  input.code-field::placeholder{ letter-spacing:7px; }
}

/* ---------- phone number: dialling code beside the number ---------- */
.phone-row{ display:flex; gap:8px; }
.phone-row select{
  flex:0 0 108px; font-family:var(--font-mono); font-size:14px;
}
/* The dialling code: a small face showing flag and code, with the real
   <select> laid invisibly over it (see CGCountries.enhanceDial). */
.phone-row .dial-pick{
  position:relative; flex:0 0 auto; display:flex; min-width:104px;
}
.phone-row .dial-face{
  display:flex; align-items:center; gap:7px; width:100%;
  padding:0 30px 0 12px; border:1px solid var(--line); border-radius:3px;
  background:var(--paper); font-family:var(--font-mono); font-size:14px;
  color:var(--ink); white-space:nowrap; pointer-events:none;
}
.phone-row .dial-face::after{
  content:""; position:absolute; right:12px; top:50%; width:7px; height:7px;
  margin-top:-5px; border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted);
  transform:rotate(45deg);
}
.phone-row .dial-flag{ font-size:18px; line-height:1; }
.phone-row .dial-pick select{
  position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer;
  flex:none; font-size:16px;
}
.phone-row .dial-pick:focus-within .dial-face{ border-color:var(--green); }
.phone-row input{ flex:1 1 auto; min-width:0; }

/* Live feedback on the confirm-password field. Telling someone the passwords
   differ while they type beats telling them after they submit. */
.hint-ok{ color:var(--green); }
.hint-warn{ color:#b8860b; }

.opt{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--muted); margin-left:6px;
}

/* ---------- what happens after you say you have sent a deposit ----------
   The client has just moved real money on a public blockchain and has no way
   of knowing whether we noticed. Leaving the form looking unchanged is the
   moment they email support. This replaces it with a clear receipt. */
.submitted-receipt{
  border:1px solid rgba(46,158,99,0.3); background:rgba(46,158,99,0.05);
  border-radius:12px; padding:26px 24px; text-align:center;
}
.submitted-receipt .sr-tick{
  width:50px; height:50px; margin:0 auto 18px; border-radius:50%;
  background:var(--green); color:var(--paper);
  display:flex; align-items:center; justify-content:center; font-size:24px;
}
.submitted-receipt h3{ font-size:19px; margin:0 0 10px; }
.submitted-receipt p{
  color:var(--muted); font-size:14.5px; line-height:1.65;
  max-width:46ch; margin:0 auto 12px;
}
.submitted-receipt .sr-figure{
  font-family:var(--font-mono); font-size:20px; color:var(--ink);
  /* auto, not 0 — the rule above gives these paragraphs a max-width, so
     without auto margins the figure sits left of the card it is centred in. */
  margin:0 auto 16px; font-weight:600;
}
.submitted-receipt .sr-steps{
  text-align:left; max-width:40ch; margin:20px auto 0;
  border-top:1px solid var(--line); padding-top:18px;
}
.submitted-receipt .sr-step{
  display:flex; gap:12px; align-items:flex-start;
  font-size:14px; color:var(--muted); line-height:1.6; margin-bottom:12px;
}
.submitted-receipt .sr-step b{ color:var(--ink); font-weight:500; }
.submitted-receipt .sr-num{
  flex:0 0 22px; height:22px; border-radius:50%;
  background:var(--line); color:var(--ink);
  font-family:var(--font-mono); font-size:11px;
  display:flex; align-items:center; justify-content:center; margin-top:1px;
}
.submitted-receipt .sr-step.done .sr-num{ background:var(--green); color:var(--paper); }
/* The outline button's border colour is set per context elsewhere, so inside
   the receipt it came out transparent and the button read as plain text. */
.submitted-receipt .btn-outline{
  margin-top:20px;
  border-color:rgba(27,33,29,0.28); color:var(--ink); background:transparent;
}
.submitted-receipt .btn-outline:hover{ border-color:var(--green); color:var(--green); }


/* ============================================================
   SOURCE OF FUNDS — tick as many as apply
   ============================================================ */
/* A label that reads like a field label but labels a group rather than one
   control, so it cannot use <label for>. */
.label-like{
  display:block; font-size:13px; font-weight:500; color:var(--ink);
  margin-bottom:8px;
}
.label-like .opt{
  font-weight:400; color:var(--muted); font-size:12.5px; margin-left:6px;
}

.check-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px;
}
/* .check-chip is a <label>, and `.field label` turns every label inside a
   field into an 11px uppercase monospace caption. That is right for a field
   caption and wrong for a sentence someone has to read and tick, so the chip
   states the whole lot back. */
.check-grid label.check-chip{
  display:flex; align-items:center; gap:10px;
  font-family: var(--font-head);
  letter-spacing: normal;
  text-transform: none;
  margin-bottom: 0;
  border:1px solid var(--line); border-radius:8px;
  padding:11px 13px; cursor:pointer;
  font-size:13.5px; line-height:1.4; color:var(--ink);
  background:var(--paper);
  transition:border-color .12s ease, background .12s ease;
}
.check-grid label.check-chip:hover{ border-color:rgba(46,158,99,0.5); }
.check-grid label.check-chip span{
  font-family: var(--font-head);
  font-size:13.5px; letter-spacing:normal; text-transform:none;
  color:var(--ink); line-height:1.4;
}
.check-grid label.check-chip input{
  appearance:none; -webkit-appearance:none;
  width:18px; height:18px; flex:0 0 18px; margin:0;
  border:1.5px solid rgba(27,33,29,0.32); border-radius:4px;
  background:#fff; cursor:pointer; position:relative;
}
.check-grid label.check-chip input:checked{ background:var(--green); border-color:var(--green); }
.check-grid label.check-chip input:checked::after{
  content:""; position:absolute; left:6px; top:2px;
  width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.check-grid label.check-chip input:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }
.check-grid label.check-chip:has(input:checked){
  border-color:var(--green); background:rgba(46,158,99,0.06);
}
@media (max-width: 560px){
  .check-grid{ grid-template-columns:1fr; }
}


/* ============================================================
   PORTAL FOOTER
   ============================================================ */
/* The investor portal used to end with the marketing footer — Strategy,
   Portfolio, About — which quietly invited a signed-in client to leave their
   account and land on a sales page. This is the portal's own ending: the legal
   lines that have to be there, and nothing that navigates away from the
   account. The two links that must remain open in a new tab, so the portal
   stays where it is. */
.portal-footer{
  border-top:1px solid var(--line);
  background:var(--paper);
  margin-top:56px;
  padding:34px 0 40px;
}
.portal-footer .pf-top{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:28px; flex-wrap:wrap; margin-bottom:24px;
}
.portal-footer .pf-help{ max-width:440px; }
.portal-footer .pf-help b{ display:block; font-size:14.5px; margin-bottom:5px; color:var(--ink); }
.portal-footer .pf-help p{ margin:0; font-size:13.5px; line-height:1.6; color:var(--muted); }
.portal-footer .pf-help button{
  background:none; border:0; padding:0; margin-top:8px; cursor:pointer;
  font-family:inherit; font-size:13.5px; color:var(--green);
  text-decoration:underline; text-underline-offset:3px;
}
.portal-footer .pf-legal{ display:flex; gap:18px; flex-wrap:wrap; }
.portal-footer .pf-legal a{
  font-size:13px; color:var(--muted);
  text-decoration:underline; text-underline-offset:3px;
}
.portal-footer .pf-legal a:hover{ color:var(--green); }
.portal-footer .pf-bottom{
  border-top:1px solid var(--line); padding-top:18px;
  font-size:12px; line-height:1.65; color:var(--muted);
}
.portal-footer .pf-bottom b{ color:var(--ink); }
.portal-footer .pf-risk{ display:block; margin-top:8px; }

@media (max-width: 720px){
  .portal-footer{ padding:28px 0 32px; margin-top:40px; }
  .portal-footer .pf-top{ gap:20px; }
}


/* ---------- deposit address pool: finding one ---------- */
.pool-filter{
  display:flex; gap:12px; align-items:center; flex-wrap:wrap;
  margin:28px 0 14px;
}
.pool-filter input[type="search"]{ flex:1 1 320px; min-width:0; }
@media (max-width: 640px){
  .pool-filter{ gap:10px; }
  .pool-filter input[type="search"]{ flex:1 1 100%; }
}


/* ============================================================
   SETTINGS — confirmation, and the relationship manager
   ============================================================ */
/* "Saved" in grey beside a button is enough for a preference. It is not
   enough for the password on an account holding someone's money, where the
   thing they most need to be told is what to do if the change was not
   theirs. */
.save-confirm{
  border:1px solid rgba(46,158,99,0.32);
  background:rgba(46,158,99,0.06);
  border-radius:10px; padding:22px 22px 20px; max-width:460px;
}
.save-confirm .sc-mark{
  width:38px; height:38px; border-radius:50%;
  background:var(--green); color:#fff;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:14px;
}
.save-confirm .sc-mark svg{ width:20px; height:20px; }
.save-confirm b{ display:block; font-size:16px; color:var(--ink); margin-bottom:7px; }
.save-confirm p{ margin:0 0 12px; font-size:13.5px; line-height:1.6; color:var(--muted); }
.save-confirm p b{ display:inline; font-size:inherit; }
.save-confirm .sc-warn{
  border-top:1px solid rgba(46,158,99,0.22); padding-top:12px;
  margin-top:14px; font-size:13px;
}
.save-confirm .btn{ margin-top:6px; }

.rm-box{
  border:1px solid var(--line); border-radius:10px;
  padding:18px 20px; margin-top:22px; background:var(--panel);
  max-width:460px;
}
.rm-box .rm-line{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin:8px 0 10px; }
.rm-box .rm-line b{ font-size:15px; color:var(--ink); }
.rm-box .rm-line span{ font-size:12.5px; color:var(--muted); }
.rm-box p{ margin:0 0 14px; font-size:13.5px; line-height:1.6; color:var(--muted); }


/* ---------- the relationship manager, and how to reach them ---------- */
.rm-box-lead{ margin-top:0 !important; margin-bottom:20px; }
/* minmax(0,1fr), not the default auto track: the number under each verb is a
   single unbroken line, and an auto track sizes itself to that line, which
   pushed the tiles past the edge of the card on a narrow phone. */
.rm-ways{ display:grid; grid-template-columns:minmax(0,1fr); gap:8px; margin-top:4px; }

/* Each route is a tile that names itself: the mark on the left is recognised
   before the words are read, the verb says what pressing it does, and the
   number or address sits underneath for anyone who would rather copy it by
   hand than tap. The channel's own colour is carried only by the mark —
   enough to be recognised, not enough to make four tiles fight. */
.rm-way{
  display:flex; align-items:center; gap:13px;
  border:1px solid var(--line); border-radius:10px;
  padding:11px 13px; background:var(--paper);
  text-decoration:none;
  transition:border-color .12s ease, background-color .12s ease, transform .12s ease;
}
.rm-way:hover{ border-color:var(--green); background:var(--panel); }
.rm-way:active{ transform:translateY(1px); }
.rm-way:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }

.rm-way-icon{
  flex:0 0 38px; width:38px; height:38px; border-radius:9px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(27,33,29,0.06); color:var(--ink);
}
.rm-way-icon svg{ width:19px; height:19px; display:block; }

.rm-way-text{ flex:1 1 auto; min-width:0; display:block; }
.rm-way-k{
  display:block; font-family:inherit; font-size:14px; font-weight:500;
  color:var(--ink); line-height:1.3; letter-spacing:0; text-transform:none;
}
.rm-way-v{
  display:block; font-family:var(--font-mono); font-size:12px;
  color:var(--muted); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.rm-way-go{
  flex:0 0 auto; width:16px; height:16px; color:var(--muted);
  transition:transform .12s ease, color .12s ease;
}
.rm-way:hover .rm-way-go{ transform:translateX(2px); color:var(--green); }

/* The two messaging apps carry their own colour because that is how they are
   found on a phone screen; call and email stay in the house green. */
.rm-whatsapp .rm-way-icon{ background:rgba(37,211,102,0.15); color:#128C46; }
.rm-telegram .rm-way-icon{ background:rgba(34,158,217,0.15); color:#1B7FAE; }
.rm-phone .rm-way-icon,
.rm-email .rm-way-icon{ background:rgba(46,158,99,0.12); color:var(--green); }

.rm-fallback{
  margin-top:14px !important; margin-bottom:0 !important;
  font-size:12.5px; line-height:1.6;
}
.rm-fallback a{ color:var(--green); text-decoration:underline; }
/* The outline button needs saying explicitly here. Inside a panel with its
   own background it was rendering without a visible edge — a button that
   reads as loose text, which is the same bug the deposit receipt had. */
.rm-box .btn-outline{
  border:1px solid rgba(27,33,29,0.28);
  background:transparent; color:var(--ink);
  margin-top:14px;
}
.rm-box .btn-outline:hover{ border-color:var(--green); color:var(--green); }

@media (max-width: 480px){
  /* The tile keeps its shape on a phone — this is the one place a client is
     most likely to be reaching for WhatsApp — it only loses a little padding. */
  .rm-way{ gap:11px; padding:10px 11px; }
  .rm-way-icon{ flex-basis:34px; width:34px; height:34px; }
  .rm-way-icon svg{ width:17px; height:17px; }
}


/* ---------- a footnote under an action ----------
   These two sentences used to sit beside the submit button at hint size,
   which put them in competition with the thing the person came to press.
   They are a footnote: below it, smaller, lighter, and out of the way. */
.form-footnote{
  margin:10px 0 0; font-size:12.5px; line-height:1.55;
  color:var(--muted); font-weight:400; max-width:52ch;
}

/* ============================================================
   SAVED WITHDRAWAL ADDRESSES
   ============================================================ */
/* ---------- adding a withdrawal address ---------- */
/* This was a quiet outline button in a panel that already has a border, on a
   page where adding an address is the only thing most people came to do. A
   client who cannot find it cannot withdraw, which is the worst thing on the
   site to be unable to find. */
.add-addr-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; font-size:13.5px; white-space:nowrap;
}
.add-addr-plus{
  font-size:17px; line-height:1; font-weight:400;
  position:relative; top:-1px;
}

/* The empty state. A line of grey hint text is not something you can press. */
.addr-empty{
  text-align:center; padding:30px 22px;
  border:1px dashed var(--line); border-radius:10px;
  background:var(--panel);
}
.addr-empty-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:12px; margin-bottom:14px;
  background:rgba(46,158,99,0.12); color:var(--green);
}
.addr-empty h4{ margin:0 0 6px; font-size:15.5px; color:var(--ink); }
.addr-empty p{
  margin:0 auto 18px; max-width:380px;
  font-size:13.5px; line-height:1.6; color:var(--muted);
}

.addr-list{ display:grid; gap:10px; }
.addr-row{
  border:1px solid var(--line); border-radius:10px;
  padding:14px 16px; background:var(--paper);
  display:grid; grid-template-columns:1fr auto; gap:12px 18px; align-items:start;
}
.addr-row.is-pending{ border-color:rgba(201,147,44,0.45); background:rgba(201,147,44,0.04); }
.addr-top{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:7px; }
.addr-top b{ font-size:14.5px; color:var(--ink); font-weight:500; }
.addr-asset{ font-size:12px; color:var(--muted); }
.addr-full{
  font-size:12px; color:var(--ink); word-break:break-all;
  background:var(--panel); border-radius:6px; padding:8px 10px; line-height:1.5;
}
.addr-meta{ font-size:12px; color:var(--muted); margin-top:7px; }
.addr-acts{ display:flex; gap:14px; align-items:center; white-space:nowrap; }
.addr-acts .link-btn.is-armed{ color:#b23b3b; font-weight:500; }
.addr-confirm{ grid-column:1 / -1; border-top:1px solid var(--line); padding-top:16px; margin-top:4px; }
.addr-confirm input.code-field{ font-size:24px; letter-spacing:8px; text-indent:8px; padding:14px 12px; }
.addr-confirm .otp-title{ font-size:17px !important; }

@media (max-width: 620px){
  .addr-row{ grid-template-columns:1fr; }
  .addr-acts{ gap:18px; border-top:1px solid var(--line); padding-top:11px; }
}


/* ============================================================
   SUPPORT — one view at a time
   ============================================================ */
.sup-back{
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:0; padding:6px 0; margin-bottom:14px;
  cursor:pointer; font-family:inherit; font-size:13.5px;
  color:var(--muted); -webkit-tap-highlight-color:transparent;
}
.sup-back:hover{ color:var(--green); }
.sup-back svg{ width:16px; height:16px; }

.sup-head{ margin-bottom:20px; }
.sup-head h2{ font-size:20px; margin:0 0 5px; }
.sup-head p{ margin:0; font-size:13.5px; color:var(--muted); line-height:1.6; }

/* The rows are buttons now, not divs with a click handler — so they are
   reachable by keyboard and announce themselves as something you can press. */
.ticket-row{
  display:flex; align-items:center; gap:14px; width:100%;
  text-align:left; background:var(--paper); cursor:pointer;
  border:1px solid var(--line); border-radius:10px;
  padding:14px 16px; margin-bottom:8px; font-family:inherit;
  transition:border-color .12s ease, background .12s ease;
}
.ticket-row:hover{ border-color:var(--green); background:rgba(46,158,99,0.04); }
.ticket-row .t-main{ flex:1 1 auto; min-width:0; }
.ticket-row .t-main strong{
  display:block; font-size:14.5px; font-weight:500; color:var(--ink);
  margin-bottom:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.ticket-row .t-main span{ font-size:12.5px; color:var(--muted); }
.ticket-row .t-go{ width:16px; height:16px; color:var(--muted); flex:0 0 16px; }
.ticket-row:hover .t-go{ color:var(--green); }

@media (max-width: 520px){
  .ticket-row{ gap:10px; padding:13px 14px; }
  .ticket-row .badge{ font-size:9.5px; }
}


/* ============================================================
   SUPPORT — three routes
   ============================================================ */
.sup-intro{ font-size:14px; color:var(--muted); line-height:1.6; margin:0 0 22px; max-width:56ch; }

/* ---------- the live indicator ----------
   A quiet dot, not a banner. It answers "is this page current?" for anyone who
   wonders, and says nothing at all to anyone who does not. */
.live-dot{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--muted);
}
.live-dot::before{
  content:''; width:7px; height:7px; border-radius:50%;
  background:var(--line); transition:background-color .3s ease;
}
body.is-live .live-dot::before{
  background:var(--green);
  animation:live-pulse 2.4s ease-in-out infinite;
}
@keyframes live-pulse{
  0%, 100%{ opacity:1; }
  50%{ opacity:0.45; }
}
@media (prefers-reduced-motion: reduce){
  body.is-live .live-dot::before{ animation:none; }
}

/* ---------- Support: conversations first ---------- */
/* The list used to sit under the panels explaining how to start one, so a
   client following a "we have replied" notification had to scroll past an
   explanation of a thing they had already done. */
.sup-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:20px;
}
.sup-head h2{ font-size:20px; margin:0; }
.sup-head-title{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }

/* The other routes, below what the client came for and visibly secondary. */
.sup-alt{
  margin-top:34px; padding-top:26px;
  border-top:1px solid var(--line);
}
.sup-alt > .label{ display:block; margin-bottom:10px; }
.sup-alt .sup-intro{ margin-bottom:18px; }
.sup-alt .rm-box{ margin-top:0; max-width:none; }

@media (max-width: 520px){
  .sup-head{ flex-direction:column; align-items:stretch; }
  .sup-head .btn{ width:100%; }
}

.sup-option{
  display:flex; gap:16px; align-items:flex-start;
  border:1px solid var(--line); border-radius:12px;
  padding:20px; margin-bottom:12px; background:var(--paper);
}
.sup-option-n{
  flex:0 0 28px; width:28px; height:28px; border-radius:50%;
  background:var(--ink); color:var(--paper);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-size:12px; margin-top:2px;
}
.sup-option-body{ flex:1 1 auto; min-width:0; }
.sup-option-body h3{ font-size:15.5px; margin:0 0 5px; }
.sup-option-body > p{ margin:0 0 14px; font-size:13.5px; line-height:1.6; color:var(--muted); }
.sup-option .btn{ font-size:13.5px; padding:10px 18px; }
#supMailBtn{ font-family:var(--font-mono); font-size:12.5px; }

/* Inside a numbered option the manager card has already been introduced, so
   it drops its own frame and heading rather than nesting a box in a box. */
.rm-box-bare{
  border:0; background:none; padding:0; margin:0;
}
.rm-box-bare .label{ display:none; }
.rm-box-bare .rm-line{ margin-top:0; }
.rm-fallback{
  font-size:12.5px; color:var(--muted); line-height:1.6;
  margin:12px 0 0; padding-top:12px; border-top:1px solid var(--line);
}
.rm-fallback a{ color:var(--green); text-decoration:underline; text-underline-offset:3px; }
.portal-footer .pf-mail{ margin:8px 0 0; font-size:13px; color:var(--muted); }
.portal-footer .pf-mail a{ color:var(--green); text-decoration:underline; text-underline-offset:3px; }

@media (max-width: 520px){
  .sup-option{ padding:16px; gap:12px; }
}


/* ============================================================
   SURFACES — so the portal is not one flat sheet of white
   ============================================================ */
/* Almost everything in the portal sat directly on the page background with a
   hairline border, which made a long tab read as one undifferentiated column.
   These give the blocks that hold content a slightly raised surface and a real
   edge, so the eye can find where one thing stops and the next begins. */
.step-panel,
.settings-card,
.chart-panel,
.doc-row{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 1px 2px rgba(27,33,29,0.04);
}
.step-panel{ padding:24px; margin-bottom:22px; }
.settings-card{ padding:22px; margin-bottom:18px; }

/* A section label that actually separates. */
.portal-section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:14px; flex-wrap:wrap;
  margin:34px 0 14px; padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.portal-section-head h3{ font-size:15px; margin:0; }
.portal-section-head .label{ margin:0; }

/* ============================================================
   WITHDRAW — the two steps, told apart
   ============================================================ */
.step-panel .step-sub{
  font-size:13.5px; line-height:1.6; color:var(--muted);
  margin:0 0 18px; max-width:60ch;
}
.step-panel .step-head h3{ font-size:16px; margin:0; display:flex; align-items:center; }
.step-panel.done{ border-color:rgba(46,158,99,0.4); }
.step-panel.done .step-head h3::after{
  content:"Ready"; margin-left:10px;
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--green);
  background:rgba(46,158,99,0.1); border-radius:20px; padding:3px 9px;
}

/* Choosing where the money goes is the decision on this page, so the saved
   addresses are cards you pick from rather than a line in a dropdown you have
   to read character by character. */
.dest-picker{ display:grid; gap:9px; margin-bottom:6px; }
.dest-card{
  display:flex; align-items:center; gap:12px;
  border:1px solid var(--line); border-radius:10px;
  padding:13px 15px; cursor:pointer; background:var(--paper);
  transition:border-color .12s ease, background .12s ease;
}
.dest-card:hover{ border-color:rgba(46,158,99,0.5); }
.dest-card input{
  appearance:none; -webkit-appearance:none;
  width:18px; height:18px; flex:0 0 18px; margin:0;
  border:1.5px solid rgba(27,33,29,0.32); border-radius:50%;
  background:#fff; position:relative; cursor:pointer;
}
.dest-card input:checked{ border-color:var(--green); border-width:5.5px; }
.dest-card:has(input:checked){ border-color:var(--green); background:rgba(46,158,99,0.06); }
.dest-card .dc-main{ min-width:0; flex:1 1 auto; }
.dest-card .dc-main b{ display:block; font-size:14px; font-weight:500; color:var(--ink); }
.dest-card .dc-main span{
  display:block; font-family:var(--font-mono); font-size:11.5px; color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px;
}


/* A row that has just appeared says so about itself, briefly. */
@keyframes cg-just-saved{
  0%   { background:rgba(46,158,99,0.20); border-color:var(--green); }
  100% { background:var(--paper);          border-color:var(--line); }
}
.addr-row.just-saved{ animation:cg-just-saved 2.6s ease-out; }
@media (prefers-reduced-motion: reduce){
  .addr-row.just-saved{ animation:none; border-color:var(--green); }
}

/* ---------- admin-only names on pool addresses ----------
   Sits under the address in the addresses tab. It lives in a table clients
   cannot read (20_address_labels.sql), so this is the only place it appears. */
.addr-label{
  margin-top:4px;
  font-family:var(--font-head, inherit); font-size:12px; font-weight:500;
  color:#a8732b; word-break:normal;
}
.address-add-form .opt{
  font-family:inherit; font-size:10px; letter-spacing:0.06em;
  color:var(--muted); text-transform:none; margin-left:4px;
}
.assign-pending{
  display:inline-block; margin-left:6px; padding:1px 7px; border-radius:10px;
  font-size:10.5px; font-weight:500; vertical-align:1px;
  background:rgba(168,115,43,0.12); color:#a8732b;
}


/* ============================================================
   OVERVIEW — each block looks like what it is
   ------------------------------------------------------------
   Everything on the overview used to be the same box: a hairline
   border on the page's own off-white. Balances, notifications, the
   relationship manager and the chart all read as one grey column,
   so nothing told the eye where to look first.

   Now: white cards that lift off the page; the balances each carry
   an icon and a tint of their own (green for return, amber when a
   withdrawal is pending); updates are one card with a coloured mark
   per kind; the relationship manager is a dark card, because it is
   a person and not a number; and recent activity reads like a
   banking app's list rather than a table squeezed onto a phone.
   ============================================================ */

:root{
  --card:#FFFFFF;
  --card-edge:rgba(27,33,29,0.07);
  --card-shadow:0 1px 2px rgba(27,33,29,0.04), 0 6px 18px rgba(27,33,29,0.05);
  --tint-green:#E9F5EE;
  --tint-blue:#EAF0FA;
  --tint-amber:#FBF3E1;
  --blue:#2F6FD0;
  --amber:#B7860F;
  --violet:#7B4FD6;
}

/* Quick actions in the dark band, overview only */
.dash-quick{ display:none; }
/* Phones only: on a wider screen the tab row directly beneath already offers
   the same three places, one line lower. */
@media (min-width: 721px){ body.on-overview .dash-quick{ display:none !important; } }
body.on-overview .dash-quick{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px;
  max-width:520px; padding:4px 0 26px;
}
.dq-btn{
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 10px; border-radius:12px; cursor:pointer;
  font-family:var(--font-head); font-size:14.5px; font-weight:500;
  color:var(--paper); background:rgba(247,248,245,0.08);
  border:1px solid rgba(247,248,245,0.14);
  -webkit-tap-highlight-color:transparent; transition:background .15s;
}
.dq-btn svg{ stroke:currentColor; fill:none; stroke-width:1.9; flex-shrink:0; }
.dq-btn:hover{ background:rgba(247,248,245,0.14); }
.dq-btn.primary{ background:var(--green); border-color:var(--green); color:#fff; }
.dq-btn.primary:hover{ background:#29905a; }

/* Balances */
#tab-overview .balance-cards{ gap:12px; margin-bottom:22px; }
#tab-overview .balance-card{
  position:relative; background:var(--card); border:1px solid var(--card-edge);
  border-radius:14px; box-shadow:var(--card-shadow); padding:16px 18px 16px;
}
#tab-overview .balance-card .bc-ico{
  width:34px; height:34px; border-radius:10px; display:flex; align-items:center;
  justify-content:center; margin-bottom:12px; background:var(--panel); color:var(--muted);
}
#tab-overview .balance-card .bc-ico svg{ stroke:currentColor; fill:none; stroke-width:1.9; }
#tab-overview .balance-card .v{ font-size:21px; margin-top:4px; }
#tab-overview .bc-value{ background:var(--dark); border-color:var(--dark); }
#tab-overview .bc-value .k, #tab-overview .bc-value .sub{ color:var(--muted-on-dark); }
#tab-overview .bc-value .v{ color:var(--paper); }
#tab-overview .bc-value .bc-ico{ background:rgba(76,193,131,0.16); color:var(--green-dark); }
#tab-overview .bc-deposited .bc-ico{ background:var(--tint-blue); color:var(--blue); }
#tab-overview .bc-return{ background:var(--tint-green); border-color:rgba(46,158,99,0.18); }
#tab-overview .bc-return .bc-ico{ background:rgba(46,158,99,0.15); color:var(--green); }
#tab-overview .bc-return.is-down{ background:#FBEDED; border-color:rgba(178,59,59,0.18); }
#tab-overview .bc-return.is-down .bc-ico{ background:rgba(178,59,59,0.12); color:#b23b3b; }
#tab-overview .bc-pending.is-active{ background:var(--tint-amber); border-color:rgba(183,134,15,0.25); }
#tab-overview .bc-pending.is-active .bc-ico{ background:rgba(183,134,15,0.15); color:var(--amber); }

/* A white card, used by the updates, the chart and recent activity */
.ov-card,
#tab-overview .chart-panel,
#tab-overview .notif-stack.has-items{
  background:var(--card); border:1px solid var(--card-edge);
  border-radius:14px; box-shadow:var(--card-shadow);
}
.ov-card-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom:6px;
}
.ov-card-head h3{ font-size:16px; font-weight:500; margin:0; }
.ov-link{
  background:none; border:none; cursor:pointer; padding:4px 0;
  font-family:var(--font-head); font-size:13.5px; color:var(--green); font-weight:500;
}
.ov-link::after{ content:" \2192"; }

/* Updates */
#tab-overview .notif-stack.has-items{ padding:18px 20px 8px; margin-bottom:22px; }
#tab-overview .notif{
  border:none; border-radius:0; background:none; margin:0;
  padding:14px 0; border-top:1px solid var(--line); gap:14px;
  flex-direction:row; align-items:flex-start;
}
#tab-overview .ov-card-head + .notif{ border-top:none; }
#tab-overview .notif .n-ico{
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--tint-green); color:var(--green);
}
#tab-overview .notif .n-ico svg{ stroke:currentColor; fill:none; stroke-width:1.9; }
#tab-overview .notif.type-deposit .n-ico,
#tab-overview .notif.type-support .n-ico{ background:var(--tint-blue); color:var(--blue); }
#tab-overview .notif.type-withdrawal .n-ico{ background:var(--panel); color:var(--ink); }
#tab-overview .notif.type-document_request .n-ico,
#tab-overview .notif.type-document .n-ico{ background:var(--tint-amber); color:var(--amber); }
#tab-overview .notif.type-bonus .n-ico{ background:#F1ECFB; color:var(--violet); }
#tab-overview .notif h4{ font-size:15px; margin:1px 0 3px; }
#tab-overview .notif .n-ico{ position:relative; }
#tab-overview .notif.is-unread .n-ico::after{
  content:""; position:absolute; top:-1px; right:-1px; width:10px; height:10px;
  border-radius:50%; background:var(--green); box-shadow:0 0 0 2px var(--card);
}
#tab-overview .notif .n-time{ margin-top:6px; }
#tab-overview .notif .n-actions{ width:auto; align-self:flex-start; flex-wrap:nowrap; }
#tab-overview .notif .n-actions .btn{ flex:none; padding:7px 12px !important; font-size:12.5px !important; }
#tab-overview .notif .n-dismiss{
  width:28px; height:28px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:17px; color:var(--muted);
}
#tab-overview .notif .n-dismiss:hover{ background:var(--panel); }
#tab-overview .notif-more{
  border:none; border-top:1px solid var(--line); border-radius:0; padding:14px 0 10px;
  color:var(--green); letter-spacing:0.06em;
}

/* The relationship manager: a person, so a card of its own colour */
#managerCard .rm-card{
  background:linear-gradient(140deg, #1E3A2A 0%, #152019 100%);
  border:none; border-radius:16px; color:var(--paper);
  padding:22px 22px; margin-bottom:22px;
  box-shadow:0 8px 24px rgba(20,24,21,0.18);
}
#managerCard .rm-body .label{ color:var(--green-dark); }
#managerCard .rm-body h3{ color:var(--paper); font-size:18px; }
#managerCard .rm-body .rm-role{ color:var(--muted-on-dark); }
#managerCard .rm-body p{ color:var(--muted-on-dark) !important; }
#managerCard .rm-avatar{
  background:rgba(76,193,131,0.16); color:var(--green-dark);
  box-shadow:0 0 0 3px rgba(76,193,131,0.35);
}
#managerCard .rm-contact{
  color:var(--paper); border-color:rgba(247,248,245,0.2);
  background:rgba(247,248,245,0.06); padding:9px 16px;
}
#managerCard .rm-contact:hover{ border-color:var(--green-dark); color:var(--green-dark); }
#managerCard .rm-contact.wa{ background:#25D366; border-color:#25D366; color:#0d2b18; font-weight:500; }
#managerCard .rm-contact.wa:hover{ background:#2fe070; color:#0d2b18; }

/* Performance */
#tab-overview .chart-panel{ padding:20px 20px 14px; }
#tab-overview .chart-head{ align-items:flex-start; margin-bottom:6px; }
.ov-sub{ font-size:13px; color:var(--muted); margin-top:4px; }
.ov-return{ font-size:22px; font-weight:500; }
.ov-foot{ font-size:12.5px; color:var(--muted); margin:8px 0 0; line-height:1.5; }

/* Recent activity */
.ov-activity{ padding:18px 20px 8px; margin-bottom:10px; }
.ov-list{ list-style:none; margin:0; padding:0; }
.ov-row{
  display:flex; align-items:center; gap:14px; padding:13px 0;
  border-top:1px solid var(--line);
}
.ov-row:first-child{ border-top:none; }
.ov-ico{
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--panel); color:var(--ink);
}
.ov-ico svg{ stroke:currentColor; fill:none; stroke-width:1.9; }
.ov-row.k-deposit .ov-ico{ background:var(--tint-green); color:var(--green); }
.ov-row.k-performance .ov-ico{ background:var(--tint-blue); color:var(--blue); }
.ov-row.k-bonus .ov-ico{ background:#F1ECFB; color:var(--violet); }
.ov-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.ov-main b{ font-weight:500; font-size:14.5px; }
.ov-main span{ font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ov-amt{ font-size:14.5px; white-space:nowrap; }
.ov-amt.up{ color:var(--green); }
.ov-amt.down{ color:#b23b3b; }
.ov-more{
  display:block; width:100%; background:none; border:none; border-top:1px solid var(--line);
  padding:13px 0 10px; cursor:pointer; font-family:var(--font-head);
  font-size:13.5px; color:var(--green); font-weight:500;
}

/* The overview's content starts right under the band on a phone, instead of
   below a gap left by the desktop tab row, which a phone does not show. */
@media (max-width: 720px){
  body.on-overview .dash-summary-section + section.tight{ padding-top:16px; }
}

/* The old full-width buttons at the foot of the overview are in the band now */
#tab-overview .dash-actions{ display:none; }

@media (max-width: 720px){
  body.on-overview .dash-quick{ padding:2px 0 22px; gap:8px; }
  .dq-btn{ padding:12px 6px; font-size:13.5px; gap:6px; border-radius:12px; }

  #tab-overview .balance-cards{ grid-template-columns:1fr 1fr; gap:10px; }
  #tab-overview .balance-card{ padding:14px 14px 14px; }
  #tab-overview .balance-card .bc-ico{ width:30px; height:30px; margin-bottom:10px; border-radius:9px; }
  #tab-overview .balance-card .v{ font-size:17px; }
  #tab-overview .balance-card .k{ font-size:9.5px; }
  #tab-overview .balance-card .sub{ font-size:11.5px; }
  /* The pending tile is a slim row across the bottom */
  #tab-overview .bc-pending{
    grid-column:1 / -1; display:grid; grid-template-columns:auto 1fr auto;
    grid-template-areas:"ico k v" "ico sub v"; column-gap:12px; align-items:center;
    padding:12px 14px;
  }
  #tab-overview .bc-pending .bc-ico{ grid-area:ico; margin:0; }
  #tab-overview .bc-pending .k{ grid-area:k; }
  #tab-overview .bc-pending .sub{ grid-area:sub; margin-top:2px; }
  #tab-overview .bc-pending .v{ grid-area:v; margin:0; font-size:16px; }

  #tab-overview .notif-stack.has-items,
  .ov-activity{ padding:16px 16px 6px; }
  #tab-overview .notif .n-actions .btn{ display:none; }
  #tab-overview .chart-panel{ padding:18px 16px 12px; }
  .ov-return{ font-size:20px; }
  #managerCard .rm-card{ padding:18px; }
}

/* Settings: the current email, shown rather than pre-filled */
.current-email{
  display:flex; flex-direction:column; gap:2px; max-width:400px;
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
  padding:11px 14px; margin:4px 0 16px;
}
.current-email span{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--muted);
}
.current-email b{ font-weight:500; font-size:15px; word-break:break-all; }

/* Phones: 16px in every field. Safari zooms the whole page in when a field
   smaller than that is tapped, and leaves it zoomed — the page then has to be
   pinched back out by hand. */
@media (max-width: 720px){
  input[type="text"]:not(.code-field), input[type="email"], input[type="password"], input[type="number"],
  input[type="tel"], input[type="url"], input[type="search"], input[type="date"],
  input[type="datetime-local"], input[type="month"], input[type="time"],
  input:not([type]), select, textarea{ font-size:16px; }
}
/* The portal: no double-tap zoom, no text-selection flash on taps. */
html.app-like{ touch-action:manipulation; -webkit-text-size-adjust:100%; }
html.app-like body{ -webkit-tap-highlight-color:transparent; overscroll-behavior-y:none; }

/* A hint paragraph outside a form field — the note under the code box, the
   loading-error line — was inheriting the body size and reading as a
   paragraph of instructions. Small and muted, like every other hint. */
p.hint{ font-size:13px; line-height:1.55; color:var(--muted); }

#tab-overview .notif.type-fee .n-ico{ background:#FBEDED; color:#b23b3b; }

/* Admin: deleted clients */
.badge-deleted{ background:rgba(27,33,29,0.08); color:var(--muted); border:1px solid var(--line); }
.deleted-banner{
  display:flex; flex-wrap:wrap; gap:6px 12px; align-items:baseline;
  background:#FBEDED; border:1px solid rgba(178,59,59,0.25); color:#8e2f2f;
  border-radius:8px; padding:12px 16px; margin:4px 0 22px; font-size:14px;
}
.deleted-banner span{ color:var(--muted); font-size:13px; flex-basis:100%; }
.btn.danger-outline{ color:#b23b3b; border-color:rgba(178,59,59,0.45); }
.btn.danger-outline:hover{ background:#FBEDED; }

/* Admin: entering one month of returns */
.perf-quick{
  background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--green);
  border-radius:10px; padding:20px 22px; margin:14px 0 22px; max-width:760px;
}
.perf-quick h3{ font-size:17px; margin:0 0 8px; }
.perf-steps{ margin:0 0 16px; padding-left:20px; color:var(--muted); font-size:14px; line-height:1.7; }
.pq-row{ display:grid; grid-template-columns: 1.4fr 1fr 1fr; gap:12px; }
@media (max-width:620px){ .pq-row{ grid-template-columns:1fr 1fr; } .pq-row .field:last-child{ grid-column:1 / -1; } }
.pq-current{ font-size:14px; color:var(--ink); margin:2px 0 10px; }
.pq-current .up{ color:var(--green); } .pq-current .down{ color:#b23b3b; }
.perf-grid-wrap summary{ cursor:pointer; font-weight:500; font-size:14.5px; color:var(--green); padding:6px 0; }

/* ---------- public site: the twelve-month returns chart ---------- */
.r12-wrap{ min-height:300px; }
.r12-loading{ height:300px; border-radius:8px;
  background:linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.07), rgba(255,255,255,0.03));
  background-size:200% 100%; animation:r12pulse 1.4s ease-in-out infinite; }
@keyframes r12pulse{ 0%{ background-position:100% 0; } 100%{ background-position:-100% 0; } }
@media (prefers-reduced-motion: reduce){ .r12-loading{ animation:none; } }
.r12-summary{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1px;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.08); border-radius:10px; overflow:hidden; margin-bottom:22px; }
.r12-item{ background:var(--dark); padding:14px 16px; display:flex; flex-direction:column; gap:4px; }
.r12-item .k{ font-family:var(--font-mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted-on-dark); }
.r12-item .v{ font-family:var(--font-mono); font-size:19px; color:var(--paper); }
.r12-item .v.up{ color:var(--green-dark); } .r12-item .v.down{ color:#E08A8A; }
.r12-main .v{ font-size:24px; }
.r12-svg{ display:block; overflow:visible; }
.r12-svg text{ font-family:var(--font-mono); }
.r12-foot{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:10px;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.04em; color:var(--muted-on-dark); }
@media (max-width:640px){
  .r12-summary{ grid-template-columns:1fr 1fr; }
  .r12-item{ padding:12px 13px; }
  .r12-item .v{ font-size:16px; } .r12-main .v{ font-size:20px; }
  .r12-wrap{ min-height:250px; } .r12-loading{ height:250px; }
}
.r12-avgkey{ display:inline-block; width:18px; height:0; border-top:1px dashed rgba(247,248,245,0.6); vertical-align:middle; margin:0 4px 0 2px; }