/* ==========================================================================
   Blue Oak Express Bank — design system
   Direction: "engraved ledger" — engine-turned guilloché, statement rules,
   tabular figures. One stylesheet; no per-page <style> blocks.
   ========================================================================== */

/* ---- Tokens ------------------------------------------------------------ */
:root {
  --ink:        #0B2239;
  --ink-2:      #143A5A;
  --ink-3:      #2A5378;
  --ink-mute:   #5C7590;

  --paper:      #E8ECF0;
  --paper-2:    #F4F6F8;
  --card:       #FFFFFF;

  --oak:        #8A6A3D;
  --gilt:       #C9A227;

  --credit:     #1B6B4F;
  --credit-bg:  #E4F0EA;
  --debit:      #A02F46;
  --debit-bg:   #F7E6E9;
  --warn:       #8A6A1F;
  --warn-bg:    #FBF1DA;

  --rule:       rgba(11, 34, 57, 0.12);
  --rule-2:     rgba(11, 34, 57, 0.06);
  --shadow-1:   0 1px 2px rgba(11, 34, 57, .06), 0 2px 8px rgba(11, 34, 57, .05);
  --shadow-2:   0 2px 4px rgba(11, 34, 57, .08), 0 12px 32px rgba(11, 34, 57, .10);
  --shadow-3:   0 18px 50px rgba(11, 34, 57, .28);

  --display: "Spectral", Georgia, "Times New Roman", serif;
  --body:    "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --r-sm: 4px;
  --r:    8px;
  --r-lg: 14px;

  --nav-h: 68px;
  --ease:  cubic-bezier(.2, .7, .3, 1);
}

/* ---- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--ink);   /* shows behind the sheet; footer sits on it */
  /* guard: `clip` rather than `hidden`, which would create a scroll
     container here and break the sticky watermark inside .page */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   The page sheet
   Opaque, scrolls up over the fixed footer to reveal it. Everything except
   the footer and the navbar lives in here.
   ========================================================================== */
.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;   /* fallback */
  /* the scroll room that reveals the footer; measured by scripts.js */
  margin-bottom: var(--footer-h, 320px);
  background-color: var(--paper);
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 31px,
    var(--rule-2) 31px,
    var(--rule-2) 32px
  );
  box-shadow: 0 24px 60px rgba(6, 18, 31, .45);
  /* `clip` rather than `hidden`: hidden would make this a scroll container
     and break the sticky watermark inside it. */
  overflow: clip;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 .5rem;
}
h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; }
p  { margin: 0 0 1rem; }
a  { color: var(--ink-2); }

/* Every figure in a bank should be tabular. */
.mono, .balance, .card-number, .ledger .date, td.amount {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ==========================================================================
   Security paper — sticky inside the sheet
   A zero-height sticky wrapper pins to the top of the viewport while the
   sheet is on screen, so the watermark reads as fixed. Because it's a
   descendant of .page (which clips), it can never spill over the footer.
   ========================================================================== */
.paper-sticky {
  position: sticky;
  top: 0;
  height: 0;          /* takes no layout space — main starts at the top */
  z-index: 0;
}

.paper {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 100vh;       /* fallback */
  overflow: hidden;
  pointer-events: none;
}

/* 100vh on mobile measures the viewport with the URL bar collapsed, so the
   sheet ends up taller than the screen and you scroll through dead space
   before the footer shows. dvh tracks the real visible height. */
@supports (height: 100dvh) {
  .page  { min-height: 100dvh; }
  .paper { height: 100dvh; }
  .site-footer { max-height: 100dvh; }
}

/* Page-scale guilloché watermark, like the watermark on banknote paper.
   The wrapper owns the parallax translate; the svg owns the rotation, so the
   two never fight over `transform`. */
.paper-watermark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: .16;
  translate: 0 var(--shift, 0px);
  will-change: translate;
}
.paper-watermark svg {
  width: min(150vh, 150vw);
  height: min(150vh, 150vw);
  display: block;
  animation: turn 240s linear infinite;
}

/* Radial vignette keeps the centre readable and the edges soft */
.paper-vignette {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 40%,
      rgba(232, 236, 240, .86) 0%,
      rgba(232, 236, 240, .55) 45%,
      rgba(214, 222, 230, .35) 100%);
}

/* ---- Overflow discipline ----------------------------------------------
   Grid and flex children default to min-width:auto (== min-content). Any
   unbreakable content — a monospace balance, a wide table — then forces its
   track wider than the container and the page scrolls sideways. min-width:0
   lets tracks shrink; the content inside handles its own fitting.
   ----------------------------------------------------------------------- */
.split > *,
.stats > *,
.info-grid .row,
.footer-inner > *,
.footer-col,
.chart-col,
.cert-meta div,
.card-row > div,
.action-btn > *,
.alert > span,
.gate > div {
  min-width: 0;
}

/* Long unbroken strings (emails, account refs) wrap instead of pushing out */
.info-grid dd,
.footer-blurb,
.alert span { overflow-wrap: anywhere; }

/* ---- Screen-reader only ------------------------------------------------ */
.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;
}

/* ---- Skip link --------------------------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--ink); color: #fff; padding: 10px 16px;
}
.skip-link:focus { left: 0; }

/* ---- Focus ring -------------------------------------------------------- */
:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--gilt);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ==========================================================================
   Navbar
   ========================================================================== */
.navbar {
  position: fixed; inset: 0 0 auto 0;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 0 clamp(16px, 4vw, 40px);
  background: var(--ink);
  color: #fff;
  z-index: 1000;
  transition: height .28s var(--ease), background .28s var(--ease), box-shadow .28s var(--ease);
}
/* base.html toggles .shrink on scroll — now it actually does something */
.navbar.shrink {
  height: 56px;
  background: rgba(11, 34, 57, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(11, 34, 57, .22);
}

/* thin gilt hairline under the nav — the engraved detail */
.navbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gilt), var(--oak), transparent);
  opacity: .55;
}

.nav-logo-link { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; }
.nav-logo { height: 38px; width: auto; border-radius: var(--r-sm); transition: height .28s var(--ease); }
.navbar.shrink .nav-logo { height: 30px; }

.bank-name {
  font-family: var(--display);
  font-size: 17px; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
}

nav.nav-desktop { display: flex; align-items: center; gap: 4px; }

nav.nav-desktop a {
  position: relative;
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  font-size: 14px; font-weight: 500;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  transition: color .2s var(--ease);
}
nav.nav-desktop a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 1.5px;
  background: var(--gilt);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
nav.nav-desktop a:hover { color: #fff; }
nav.nav-desktop a:hover::after,
nav.nav-desktop a[aria-current="page"]::after { transform: scaleX(1); }
nav.nav-desktop a[aria-current="page"] { color: #fff; }

nav.nav-desktop a.logout {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  margin-left: 8px;
  transition: background .2s var(--ease), border-color .2s var(--ease);
}
nav.nav-desktop a.logout::after { display: none; }
nav.nav-desktop a.logout:hover { background: var(--debit); border-color: var(--debit); }

/* Hamburger — the three lines */
.menu-toggle {
  display: none;
  width: 42px; height: 42px;
  flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  background: transparent; border: 0; cursor: pointer; border-radius: var(--r-sm);
}
.menu-toggle span {
  display: block; width: 22px; height: 2px; background: #fff; border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Off-canvas drawer
   ========================================================================== */
.drawer-backdrop {
  position: fixed; inset: 0;
  z-index: 1100;
  background: rgba(6, 18, 31, .55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.drawer-backdrop.show { opacity: 1; }

.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 1200;
  width: min(320px, 84vw);
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: #fff;
  box-shadow: -20px 0 60px rgba(6, 18, 31, .45);
  transform: translateX(100%);
  transition: transform .34s var(--ease);
  padding-bottom: env(safe-area-inset-bottom);
  overflow-y: auto;
}
.drawer.open { transform: translateX(0); }

/* gilt hairline down the leading edge, echoing the navbar */
.drawer::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 1px;
  background: linear-gradient(180deg, transparent, var(--gilt), var(--oak), transparent);
  opacity: .6;
}

.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-h);
  flex: none;
  padding: 0 8px 0 22px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.drawer-title {
  font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
.drawer-close {
  width: 42px; height: 42px;
  background: transparent; border: 0; cursor: pointer;
  color: rgba(255, 255, 255, .7);
  font-size: 26px; line-height: 1;
  border-radius: var(--r-sm);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.drawer-close:hover { color: #fff; background: rgba(255, 255, 255, .08); }

.drawer-nav { flex: 1; padding: 18px 14px; }

.drawer-group {
  font-size: 10px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gilt);
  margin: 16px 8px 6px;
  opacity: .8;
}
.drawer-group:first-child { margin-top: 0; }

.drawer-nav a {
  display: block;
  padding: 12px 8px;
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
  font-size: 15px; font-weight: 500;
  border-radius: var(--r-sm);
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  transition: background .2s var(--ease), color .2s var(--ease), padding-left .2s var(--ease);
}
.drawer-nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; padding-left: 14px; }
.drawer-nav a[aria-current="page"] { color: var(--gilt); }

.drawer-foot {
  flex: none;
  padding: 18px 22px 26px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.drawer-note {
  margin: 12px 0 0;
  text-align: center;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .4);
}

@media (max-width: 860px) {
  .menu-toggle { display: flex; }
  nav.nav-desktop { display: none; }
}

/* ==========================================================================
   Layout
   ========================================================================== */
main {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: calc(var(--nav-h) + 36px) clamp(16px, 4vw, 24px) 64px;
}
.narrow { max-width: 460px; margin-inline: auto; }
.medium { max-width: 640px; margin-inline: auto; }

.page-head { text-align: center; margin-bottom: 32px; }
.page-logo { width: 64px; height: auto; margin-bottom: 12px; }
.subtitle { color: var(--ink-mute); font-size: 14.5px; margin: 0; }

/* Eyebrow: small caps label, used only where it names a real section */
.eyebrow {
  font-family: var(--body);
  font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 6px;
}

.btn-back {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px;
  font-size: 13.5px; font-weight: 500;
  color: var(--ink-2); text-decoration: none;
  padding: 7px 14px;
  border: 1px solid var(--rule); border-radius: 100px;
  background: var(--card);
  transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.btn-back:hover { transform: translateX(-2px); border-color: var(--ink-3); box-shadow: var(--shadow-1); }

/* ==========================================================================
   Panels
   ========================================================================== */
.panel {
  /* Query container: the table should stack when THIS PANEL is too narrow for
     it, which is the only question that matters. A viewport breakpoint gets
     landscape wrong — an 844x390 phone has 745px of panel, plenty for the
     table, but reads as "small screen" by width alone. */
  container: panel / inline-size;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: clamp(20px, 3vw, 28px);
}
.panel + .panel { margin-top: 22px; }

.panel-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 14px; margin-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
.panel-head h2 { margin: 0; }
.panel-head .count { font-family: var(--mono); font-size: 12.5px; color: var(--ink-mute); }

/* ==========================================================================
   Balance certificate — the signature element.
   Guilloché SVG is injected by scripts.js into .guilloche
   ========================================================================== */
.certificate {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 55%, #0D2C48 100%);
  color: #fff;
  padding: clamp(24px, 4vw, 34px);
  box-shadow: var(--shadow-2);
  isolation: isolate;
}
.certificate .guilloche {
  position: absolute; inset: -30% -10%;
  z-index: 0;
  opacity: .3;
  pointer-events: none;
  animation: turn 90s linear infinite;
}
.certificate .guilloche svg { width: 100%; height: 100%; display: block; }
@keyframes turn { to { transform: rotate(360deg); } }

/* engraved double border, inset from the edge like a banknote */
.certificate::before {
  content: ""; position: absolute; inset: 10px; z-index: 1;
  border: 1px solid rgba(201, 162, 39, .35);
  border-radius: 8px;
  pointer-events: none;
}
.certificate::after {
  content: ""; position: absolute; inset: 13px; z-index: 1;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 6px;
  pointer-events: none;
}
.certificate > *:not(.guilloche) { position: relative; z-index: 2; }

.certificate .eyebrow { color: rgba(201, 162, 39, .95); }

.balance {
  /* Fallback: viewport-based, sized so the longest balance still fits. */
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.6rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 6px 0 14px;
  line-height: 1;
}

/* The certificate is full-width below 820px but 1.35fr above it, so its
   width isn't a function of the viewport — viewport units can't size this
   correctly. Measure against the card itself instead.
   ~9cqi keeps a 15-character balance ("$117,900,000.00") inside the box. */
@supports (container-type: inline-size) {
  .certificate { container-type: inline-size; }
  .balance { font-size: clamp(1.75rem, 9cqi, 3rem); }
}

.cert-meta {
  display: flex; flex-wrap: wrap; gap: 14px 28px;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.cert-meta div { min-width: 0; }
.cert-meta dt {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55); margin-bottom: 3px;
}
.cert-meta dd {
  margin: 0;
  font-family: var(--mono); font-size: 14px; letter-spacing: .04em;
  color: rgba(255, 255, 255, .95);
}

/* ==========================================================================
   Actions
   ========================================================================== */
.actions { display: grid; gap: 10px; align-content: start; }

.action-btn {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  border-radius: var(--r);
  border: 1px solid var(--rule);
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  font-weight: 500; font-size: 15px;
  box-shadow: var(--shadow-1);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.action-btn .ico {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  color: var(--ink-2);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.action-btn .ico svg { width: 17px; height: 17px; }
.action-btn .arrow { margin-left: auto; color: var(--ink-mute); transition: transform .2s var(--ease); }
.action-btn:hover {
  transform: translateY(-2px);
  border-color: var(--ink-3);
  box-shadow: var(--shadow-2);
}
.action-btn:hover .ico { background: var(--ink); color: var(--gilt); border-color: var(--ink); }
.action-btn:hover .arrow { transform: translateX(3px); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--body); font-size: 15px; font-weight: 600;
  padding: 13px 22px;
  border-radius: var(--r);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .6; cursor: not-allowed; }

.btn-primary { background: var(--ink); color: #fff; box-shadow: var(--shadow-1); }
.btn-primary:hover:not(:disabled) { background: var(--ink-2); box-shadow: var(--shadow-2); }

.btn-gilt {
  background: linear-gradient(135deg, var(--oak), var(--gilt));
  color: #22180A;
  box-shadow: var(--shadow-1);
}
.btn-gilt:hover:not(:disabled) { filter: brightness(1.06); box-shadow: var(--shadow-2); }

.btn-block { width: 100%; }

/* Spinner used by the send form */
.spinner {
  width: 15px; height: 15px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Forms
   ========================================================================== */
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 7px;
}
.input {
  width: 100%;
  font-family: var(--body); font-size: 15px;
  color: var(--ink);
  padding: 12px 14px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.input::placeholder { color: #9BAABA; }
.input:focus {
  outline: none;
  background: var(--card);
  border-color: var(--ink-3);
  box-shadow: 0 0 0 3px rgba(42, 83, 120, .12);
}
.input.mono { letter-spacing: .06em; }
textarea.input { resize: vertical; min-height: 88px; }

.hint { font-size: 12.5px; color: var(--ink-mute); margin: 6px 0 0; }

/* Amount field with a leading currency mark */
.amount-field { position: relative; }
.amount-field .currency {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 15px; color: var(--ink-mute); pointer-events: none;
}
.amount-field .input { padding-left: 30px; }

/* ==========================================================================
   Flash messages
   ========================================================================== */
.flash-messages { margin-bottom: 22px; display: grid; gap: 10px; }

.alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r);
  border: 1px solid;
  font-size: 14px; font-weight: 500;
  animation: flash-in .4s var(--ease) both;
}
.alert .dismiss {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  color: inherit; opacity: .5; font-size: 17px; line-height: 1; padding: 0 2px;
}
.alert .dismiss:hover { opacity: 1; }
.alert.success { background: var(--credit-bg); border-color: rgba(27,107,79,.3); color: var(--credit); }
.alert.danger,
.alert.error   { background: var(--debit-bg);  border-color: rgba(160,47,70,.3);  color: var(--debit); }
.alert.warning { background: var(--warn-bg);   border-color: rgba(138,106,31,.3); color: var(--warn); }
.alert.info    { background: #E6EDF4;          border-color: rgba(42,83,120,.3);  color: var(--ink-2); }

@keyframes flash-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.alert.leaving { animation: flash-out .3s var(--ease) forwards; }
@keyframes flash-out {
  to { opacity: 0; transform: translateY(-6px); margin-bottom: -46px; }
}

/* Inline notice banner (e.g. flagged transactions) */
.notice {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; margin-bottom: 22px;
  background: var(--warn-bg);
  border: 1px solid rgba(138, 106, 31, .3);
  border-left: 3px solid var(--warn);
  border-radius: var(--r);
  font-size: 14px; color: #6B520F;
}
.notice a { color: #6B520F; font-weight: 600; }

/* ==========================================================================
   Tables
   ========================================================================== */
.table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }

.ledger { width: 100%; border-collapse: collapse; min-width: 640px; }

.ledger thead th {
  font-family: var(--body);
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-mute);
  text-align: left;
  padding: 0 12px 10px;
  border-bottom: 1px solid var(--ink);
  white-space: nowrap;
}
.ledger tbody td {
  padding: 13px 10px;
  border-bottom: 1px solid var(--rule-2);
  vertical-align: middle;
  font-size: 14px;
}
.ledger tbody tr { transition: background .15s var(--ease); }
.ledger tbody tr:hover { background: var(--paper-2); }
.ledger tbody tr:last-child td { border-bottom: 0; }

/* not nowrap: a pinned timestamp costs ~150px of unshrinkable column */
.ledger .date  { font-size: 13px; color: var(--ink-mute); }
.ledger .party { font-weight: 500; overflow-wrap: anywhere; }
.ledger td.amount { text-align: right; font-weight: 500; white-space: nowrap; font-size: 14.5px; }
.ledger th.amount { text-align: right; }

.credit-row td.amount { color: var(--credit); }
.debit-row  td.amount { color: var(--ink); }
.credit-row td.amount::before { content: "+"; opacity: .7; }
.debit-row  td.amount::before { content: "\2212"; opacity: .45; }

/* direction tick in the left gutter */
.ledger .dir {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  font-size: 11px; font-weight: 700;
}
.credit-row .dir { background: var(--credit-bg); color: var(--credit); }
.debit-row  .dir { background: var(--paper-2);   color: var(--ink-mute); }

.purpose {
  color: var(--ink-mute);
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- Mobile: stop making phones scroll a 640px table sideways.
   Each row becomes a card; the <th> labels come back via data-label. ---- */
/* Stack when the panel itself can't hold the 640px table (plus breathing
   room). Orientation-agnostic: portrait phones get cards, landscape phones
   get the table, and neither needs to know which it is. */
@container panel (max-width: 680px) {
  .table-wrapper { overflow-x: visible; margin: 0; padding: 0; }

  .ledger { min-width: 0; display: block; }
  .ledger thead { display: none; }
  .ledger tbody { display: grid; gap: 10px; }

  .ledger tbody tr {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 12px;
    padding: 14px;
    background: var(--paper-2);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--rule);
    border-radius: var(--r);
  }
  .ledger tbody tr:hover { background: var(--paper-2); }
  .credit-row { border-left-color: var(--credit); }
  .debit-row  { border-left-color: var(--ink-3); }

  .ledger tbody td {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px;
    grid-column: 2;
    padding: 3px 0;
    border-bottom: 0;
    font-size: 14px;
  }
  .ledger tbody td::before {
    content: attr(data-label);
    flex: none;
    font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-mute);
  }
  .ledger tbody td:not([data-label])::before { content: none; }

  /* direction tick spans the card as a left gutter */
  .ledger .dir-cell {
    grid-column: 1;
    grid-row: 1 / -1;
    display: grid; place-items: start center;
    padding: 2px 0 0;
  }
  .ledger .dir-cell::before { content: none; }

  /* the amount is the thing you actually scan for — make it the headline */
  .ledger tbody td.amount {
    order: -1;
    font-size: 1.15rem;
    padding-bottom: 6px;
  }
  .purpose { max-width: none; white-space: normal; text-align: right; }
  .ledger .date { white-space: normal; }
}

/* ==========================================================================
   Badges
   ========================================================================== */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge.completed,
.badge.active   { background: var(--credit-bg); color: var(--credit); border-color: rgba(27,107,79,.25); }
.badge.flagged,
.badge.pending  { background: var(--warn-bg);   color: var(--warn);   border-color: rgba(138,106,31,.25); }
.badge.inactive { background: var(--debit-bg);  color: var(--debit);  border-color: rgba(160,47,70,.25); }
.badge.tier {
  background: linear-gradient(135deg, rgba(138,106,61,.15), rgba(201,162,39,.2));
  color: var(--oak); border-color: rgba(138,106,61,.35);
}

/* ==========================================================================
   Balance visibility toggle
   ========================================================================== */
.cert-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.eye {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  color: rgba(255, 255, 255, .8);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.eye:hover { background: rgba(255, 255, 255, .16); color: #fff; }
.eye svg { width: 16px; height: 16px; }
.eye .eye-shut { display: none; }
.eye[aria-pressed="true"] .eye-open { display: none; }
.eye[aria-pressed="true"] .eye-shut { display: block; }

.balance.hidden {
  filter: blur(11px);
  user-select: none;
  transition: filter .3s var(--ease);
}

/* ==========================================================================
   Stat cards
   ========================================================================== */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.stat {
  display: grid;
  gap: 3px;
  text-align: left;
  font-family: var(--body);
  padding: 18px 18px 16px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease),
              border-color .2s var(--ease), opacity .2s var(--ease);
}
.stat.static { cursor: default; }
.stat:not(.static):hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  border-color: var(--ink-3);
}
/* deselected = filtered out of the chart */
.stat[aria-pressed="false"] { opacity: .45; box-shadow: none; }

.stat-mark {
  position: absolute; top: 16px; right: 16px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 13px; font-weight: 700;
}
.stat-mark.in  { background: var(--credit-bg); color: var(--credit); }
.stat-mark.out { background: var(--debit-bg);  color: var(--debit); }
.stat-mark.net { background: var(--paper-2);   color: var(--ink-mute); }

.stat-label {
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-mute);
}
.stat-figure { font-size: 1.3rem; font-weight: 500; letter-spacing: -.01em; }
.stat-figure.pos { color: var(--credit); }
.stat-figure.neg { color: var(--debit); }
.stat-sub { font-size: 12px; color: var(--ink-mute); }

/* ==========================================================================
   Activity chart (bars built by scripts.js)
   ========================================================================== */
.chart {
  display: grid;
  grid-auto-flow: column;
  /* minmax(0,1fr), not 1fr: plain 1fr has an auto (min-content) floor that
     refuses to shrink and pushes the panel wide. */
  grid-auto-columns: minmax(0, 1fr);
  align-items: end;
  gap: clamp(8px, 2vw, 22px);
  height: 190px;
  padding-top: 8px;
}

.chart-col {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 8px;
  height: 100%;
  min-width: 0;
}

.chart-bars {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 4px;
  height: 100%;
}

.bar {
  position: relative;
  flex: 1;
  max-width: 22px;
  height: 0;                     /* animated to --h by scripts.js */
  border-radius: 3px 3px 0 0;
  transition: height .7s var(--ease), opacity .25s var(--ease), filter .2s var(--ease);
}
.bar.in  { background: linear-gradient(180deg, #2E8F6B, var(--credit)); }
.bar.out { background: linear-gradient(180deg, #3D6187, var(--ink-2)); }
.bar.muted { opacity: .12; }
.bar:hover { filter: brightness(1.15); }

/* tooltip on hover */
.bar::after {
  content: attr(data-label);
  position: absolute; bottom: calc(100% + 6px); left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 4px 8px;
  background: var(--ink);
  color: #fff;
  font-family: var(--mono); font-size: 11px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
  z-index: 5;
}
.bar:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

.chart-label {
  text-align: center;
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-mute);
  padding-top: 6px;
  border-top: 1px solid var(--rule);
}

.chart-empty { color: var(--ink-mute); font-size: 14px; text-align: center; padding: 60px 0; }

/* ==========================================================================
   Definition grid (account details)
   ========================================================================== */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  overflow: hidden;
}
.info-grid .row {
  background: var(--card);
  padding: 14px 16px;
}
.info-grid dt {
  font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 5px;
}
.info-grid dd { margin: 0; font-size: 14.5px; font-weight: 500; word-break: break-word; }
.info-grid dd.mono { letter-spacing: .05em; }

/* ==========================================================================
   Payment card — 3D flip
   ========================================================================== */
.card-stage { perspective: 1400px; }

.card-flip {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .7s var(--ease);
  aspect-ratio: 1.586;             /* ISO/IEC 7810 ID-1, a real card's ratio */
}
.card-flip.flipped { transform: rotateY(180deg); }

.platinum-card.face {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
}
.platinum-card.back {
  transform: rotateY(180deg);
  padding: 20px 0;
}

.platinum-card {
  overflow: hidden;
  border-radius: var(--r-lg);
  padding: 22px;
  color: #fff;
  background: linear-gradient(135deg, #3E4650 0%, #232A33 40%, #12171D 100%);
  box-shadow: var(--shadow-3);
}
.platinum-card .guilloche {
  position: absolute; inset: -40% -20%; z-index: 0; opacity: .16; pointer-events: none;
}
.platinum-card .guilloche svg { width: 100%; height: 100%; display: block; }
.platinum-card > *:not(.guilloche):not(.sheen):not(.magstripe) { position: relative; z-index: 2; }

/* moving sheen */
.platinum-card .sheen {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.14) 48%, transparent 60%);
  transform: translateX(-120%);
}
.card-stage:hover .platinum-card.front .sheen { animation: sheen 1.1s var(--ease); }
@keyframes sheen { to { transform: translateX(120%); } }

.card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.card-brand { font-family: var(--display); font-size: 15px; font-weight: 600; }
.card-tier {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gilt); margin-top: 2px;
}
.card-chip {
  width: 44px; height: 34px; border-radius: 5px;
  background: linear-gradient(135deg, #E8D9A8, #C9A227 45%, #8A6A3D);
  position: relative; overflow: hidden;
  flex: none;
}
.card-chip::before, .card-chip::after {
  content: ""; position: absolute; left: 4px; right: 4px; height: 1px;
  background: rgba(0, 0, 0, .28);
}
.card-chip::before { top: 11px; }
.card-chip::after  { bottom: 11px; }

.card-number {
  font-size: clamp(.95rem, .6rem + 1.1vw, 1.2rem);
  letter-spacing: .12em;
  margin: auto 0 16px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
}
.card-row { display: flex; gap: 26px; }
.card-small {
  font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .5); margin-bottom: 3px;
}
.card-val { font-size: 13.5px; font-weight: 500; letter-spacing: .04em; }

/* ---- Card back --------------------------------------------------------- */
.magstripe {
  position: absolute; left: 0; right: 0; top: 18px;
  height: 44px;
  z-index: 1;
  background: linear-gradient(180deg, #0C0F13, #23282F 40%, #0C0F13);
}

.sig-row {
  display: flex; align-items: center; gap: 12px;
  margin: 78px 20px 0;
}

.signature {
  flex: 1;
  height: 36px;
  display: flex; align-items: center;
  padding: 0 12px;
  border-radius: 3px;
  /* the diagonal hatch printed on a real signature panel */
  background:
    repeating-linear-gradient(45deg,
      #EDEDE6 0 6px,
      #DCDCD2 6px 12px);
}
.sig-name {
  font-family: var(--display);
  font-style: italic;
  font-size: 14px;
  color: #2A2A2A;
  opacity: .75;
}

.cvv-box {
  flex: none;
  padding: 5px 12px;
  background: #EDEDE6;
  border-radius: 3px;
  text-align: center;
}
.cvv-box .card-small { color: #6A6A62; }
.cvv-box .card-val { color: #17171A; }

.back-note {
  margin: 14px 20px 0;
  font-size: 9.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .4);
}

.card-actions { display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
.btn-card {
  flex: 1;
  min-width: 96px;
  padding: 9px 12px;
  font-family: var(--body); font-size: 12.5px; font-weight: 600;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease);
}
.btn-card:hover { border-color: var(--ink-3); transform: translateY(-1px); }
.btn-card[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }

.card-note { font-size: 12px; color: var(--ink-mute); text-align: center; margin: 12px 0 0; }

/* ==========================================================================
   Empty state
   ========================================================================== */
.empty {
  text-align: center;
  padding: 44px 20px;
  color: var(--ink-mute);
}
.empty svg { width: 34px; height: 34px; opacity: .3; margin-bottom: 12px; }
.empty p { margin: 0 0 4px; font-weight: 500; color: var(--ink); }
.empty .sub { font-size: 13.5px; color: var(--ink-mute); font-weight: 400; }

/* ==========================================================================
   Prose (about page)
   ========================================================================== */
.prose h3 {
  font-family: var(--display); font-size: 1.15rem;
  margin: 28px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
}
.prose h3:first-child { margin-top: 0; }
.prose p { color: var(--ink-2); line-height: 1.75; }
.prose p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Footer — fixed to the viewport bottom, sitting BEHIND the page sheet.
   It never moves; the sheet scrolls up and uncovers it.
   ========================================================================== */
.site-footer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 0;
  background: var(--ink);
  color: rgba(255, 255, 255, .62);
  font-size: 13.5px;
  /* never taller than the viewport, or it could not be fully revealed */
  max-height: 100vh;
  overflow-y: auto;
}

/* gilt hairline across the top, echoing the navbar */
.site-footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--oak), var(--gilt), var(--oak), transparent);
  opacity: .5;
}

.footer-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 56px) clamp(20px, 4vw, 24px) 24px;
  display: grid;
  gap: clamp(18px, 4vw, 40px);
  /* two columns on a phone — one column would make the footer taller than
     the viewport, and a fixed footer that tall can never be fully revealed */
  grid-template-columns: 1fr 1fr;
}
.footer-brand { grid-column: 1 / -1; }

@media (min-width: 720px) {
  .footer-inner { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .footer-brand { grid-column: auto; }
}

.footer-brand .nav-logo-link { margin-bottom: 14px; }
.footer-blurb {
  margin: 0 0 16px;
  max-width: 40ch;
  line-height: 1.7;
  color: rgba(255, 255, 255, .55);
}

.footer-head {
  font-family: var(--body);
  font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gilt);
  margin: 0 0 14px;
  opacity: .85;
}

.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }

.footer-col a {
  position: relative;
  color: rgba(255, 255, 255, .62);
  text-decoration: none;
  padding: 6px 0;
  transition: color .2s var(--ease), padding-left .2s var(--ease);
}
.footer-col a::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 0; height: 1px;
  background: var(--gilt);
  transform: translateY(-50%);
  transition: width .2s var(--ease);
}
.footer-col a:hover { color: #fff; padding-left: 14px; }
.footer-col a:hover::before { width: 8px; }

.footer-tag {
  display: inline-block;
  padding: 4px 10px;
  margin: 0 4px 6px 0;
  border-radius: 100px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  font-family: var(--mono);
  font-size: 11.5px;
  color: rgba(255, 255, 255, .7);
}

.footer-rule {
  max-width: 1080px;
  margin: 0 auto;
  height: 1px;
  background: rgba(255, 255, 255, .1);
}

.footer-bar {
  max-width: 1080px;
  margin: 0 auto;
  padding: 22px clamp(20px, 4vw, 24px) calc(28px + env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 8px 24px;
}
.footer-bar p { margin: 0; font-size: 12.5px; }
.footer-fine {
  color: rgba(255, 255, 255, .4);
  max-width: 62ch;
  line-height: 1.6;
}

.demo-banner {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px;
  border-radius: 100px;
  background: rgba(201, 162, 39, .12);
  border: 1px solid rgba(201, 162, 39, .4);
  color: var(--gilt);
  font-size: 12.5px; font-weight: 600; letter-spacing: .03em;
}
.demo-banner .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--gilt);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse { 50% { opacity: .3; } }

/* ==========================================================================
   Auth page (login / request access)
   ========================================================================== */
.auth { max-width: 440px; margin-inline: auto; }

.auth-head { text-align: center; margin-bottom: 26px; }
.auth-head h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.9rem); margin-bottom: 4px; }

.auth-panel { padding: 10px clamp(18px, 4vw, 26px) clamp(22px, 4vw, 26px); }

.auth-foot {
  margin: 18px 0 0;
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-mute);
}

/* ---- Segmented control ---- */
.segmented {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin: 14px 0 22px;
  padding: 4px;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 100px;
}

/* sliding thumb sits under the labels */
.segmented-thumb {
  position: absolute;
  top: 4px; bottom: 4px; left: 4px;
  width: calc(50% - 4px);
  border-radius: 100px;
  background: var(--ink);
  box-shadow: var(--shadow-1);
  transition: transform .32s var(--ease);
}
.segmented[data-active="signup"] .segmented-thumb { transform: translateX(100%); }

.seg {
  position: relative;
  z-index: 1;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  font-family: var(--body);
  font-size: 14px; font-weight: 600;
  color: var(--ink-mute);
  transition: color .25s var(--ease);
}
.seg[aria-selected="true"] { color: #fff; }

/* ---- Panes ---- */
.auth-pane { animation: pane-in .35s var(--ease) both; }
@keyframes pane-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Password reveal ---- */
.pw-field { position: relative; }
.pw-field .input { padding-right: 46px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: transparent; border: 0; cursor: pointer;
  color: var(--ink-mute);
  border-radius: var(--r-sm);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.pw-toggle:hover { color: var(--ink); background: var(--rule-2); }
.pw-toggle svg { width: 17px; height: 17px; }
.pw-toggle .eye-shut { display: none; }
.pw-toggle[aria-pressed="true"] .eye-open { display: none; }
.pw-toggle[aria-pressed="true"] .eye-shut { display: block; }

/* ---- Invitation gate ---- */
.gate {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px;
  margin-bottom: 22px;
  background: linear-gradient(135deg, rgba(138,106,61,.07), rgba(201,162,39,.09));
  border: 1px solid rgba(138, 106, 61, .3);
  border-radius: var(--r);
}
.gate-seal {
  flex: none;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--card);
  border: 1px solid rgba(138, 106, 61, .35);
  color: var(--oak);
}
.gate-seal svg { width: 18px; height: 18px; }
.gate-title {
  margin: 0 0 4px;
  font-family: var(--display);
  font-size: 15px; font-weight: 600;
  color: var(--ink);
}
.gate-body {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.gate-note { margin-top: 16px; text-align: center; line-height: 1.6; }

/* ==========================================================================
   Entrance animation — applied by scripts.js
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(14px); }
.reveal.in {
  animation: reveal-in .55s var(--ease) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes reveal-in { to { opacity: 1; transform: none; } }

/* ==========================================================================
   Grid helpers
   ========================================================================== */
.split { display: grid; gap: 22px; margin-bottom: 22px; }
@media (min-width: 820px) {
  .split { grid-template-columns: 1.35fr 1fr; align-items: start; }
  .split-even { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Mobile polish
   ========================================================================== */
@media (max-width: 560px) {
  main { padding-top: calc(var(--nav-h) + 24px); }

  /* "Blue Oak Express Bank" is too long for a narrow header — shorten it
     rather than let it shove the hamburger off-screen */
  .bank-name-tail { display: none; }

  /* Cards were sized for desktop; tighten them so content has room */
  .panel { padding: 16px; border-radius: var(--r); }
  .certificate { padding: 20px 18px; }
  .cert-meta dd { font-size: 13px; }
  .action-btn { padding: 13px 14px; gap: 11px; }
  .info-grid { grid-template-columns: 1fr; }
  .info-grid .row { padding: 11px 13px; }

  .chart { height: 150px; gap: 6px; }
  .chart-bars { gap: 3px; }
  .bar { max-width: 14px; }
  .chart-label { font-size: 9.5px; letter-spacing: -.02em; }

  .stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat { padding: 14px 14px 12px; }
  .stat-figure { font-size: 1.05rem; }
  .stat-mark { top: 12px; right: 12px; width: 22px; height: 22px; font-size: 11px; }
  .stat.static { grid-column: 1 / -1; }

  .cert-meta { gap: 12px 20px; }
  .card-actions { gap: 6px; }
  .btn-card { min-width: 0; font-size: 11.5px; padding: 9px 6px; }

  .ledger tbody tr { padding: 12px; }
  .ledger tbody td.amount { font-size: 1.05rem; }

  .footer-bar { flex-direction: column; }

  /* every pixel here is scroll room the user has to travel to reveal the
     footer, so trim it hard — the drawer already carries the nav */
  .footer-blurb { display: none; }
  .footer-col a { padding: 5px 0; font-size: 13px; }
  .footer-fine { font-size: 11.5px; }
}

@media (max-width: 380px) {
  .stats { grid-template-columns: 1fr; }
  .stat.static { grid-column: auto; }
}

/* ==========================================================================
   Short viewports (landscape phones)
   844x390 has width to spare but almost no height — 104px of nav + padding
   is 27% of the screen. Reclaim the vertical, keep the horizontal.
   ========================================================================== */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --nav-h: 50px; }

  main { padding-top: calc(var(--nav-h) + 16px); padding-bottom: 28px; }
  .page-head { margin-bottom: 16px; }
  .page-head h1 { font-size: 1.35rem; }
  .page-logo { width: 44px; }

  .split { gap: 14px; margin-bottom: 14px; }
  .panel + .panel { margin-top: 14px; }
  .panel { padding: 14px 16px; }

  .certificate { padding: 14px 18px; }
  .balance { margin: 2px 0 8px; }
  .cert-meta { padding-top: 10px; gap: 8px 22px; }

  .action-btn { padding: 10px 14px; }
  .actions { gap: 7px; }

  .stats { gap: 8px; margin-bottom: 14px; }
  .stat { padding: 11px 13px 10px; }
  .stat-figure { font-size: 1rem; }

  /* the chart is the biggest vertical offender */
  .chart { height: 112px; }
  .panel-head { padding-bottom: 9px; margin-bottom: 11px; }

  .ledger tbody td { padding: 8px 10px; }

  /* the drawer is full-height and would otherwise overflow */
  .drawer-head { height: 50px; }
  .drawer-nav { padding: 10px 14px; }
  .drawer-nav a { padding: 8px; }
  .drawer-group { margin: 10px 8px 4px; }
  .drawer-foot { padding: 12px 18px 16px; }

  /* a footer taller than the screen can never be fully revealed */
  .footer-inner { padding: 18px 20px 14px; gap: 14px 28px; }
  .footer-blurb { display: none; }
  .footer-col a { padding: 3px 0; }
  .footer-bar { padding: 12px 20px 16px; }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  /* the flip still needs to work — it just happens instantly */
  .card-flip { transition: none; }
  .bar { transition: none; }
}