/* ============================================================
   OF Wealth — dark redesign (Oct 2026)
   Loaded LAST in layouts/app.blade.php so it re-points the older
   OF Finance tokens (--of-*, --gold, --bg-*, --font-*) at the new
   palette. Every page that already reads those tokens picks up the
   redesign without a template change; the shell and dashboard use
   the ow-* classes below directly.
   ============================================================ */

:root {
  /* OF Wealth palette */
  --ow-bg:            #0B1620;
  --ow-surface:       #111F2B;
  --ow-surface-2:     #16273A;
  --ow-line:          #1F2E3B;
  --ow-line-soft:     #1A2834;
  --ow-line-strong:   #2E3E4C;
  --ow-text:          #ECE7DC;
  --ow-cream:         #F4F1EA;
  --ow-muted:         #8C98A3;
  --ow-on-dark-muted: rgba(244, 241, 234, 0.65);
  --ow-gold:          #D3A85D;
  --ow-gold-hover:    #E8C27A;
  --ow-gold-soft:     rgba(211, 168, 93, 0.14);
  --ow-gold-line:     rgba(211, 168, 93, 0.22);
  --ow-success:       #7FC49A;
  --ow-success-soft:  rgba(127, 196, 154, 0.12);
  --ow-warning:       #E6A94A;
  --ow-warning-soft:  rgba(230, 169, 74, 0.14);
  --ow-danger:        #E0786A;
  --ow-danger-soft:   rgba(224, 120, 106, 0.14);
  --ow-info:          #7FA6C4;
  --ow-info-soft:     rgba(127, 166, 196, 0.14);
  --ow-hero:          linear-gradient(160deg, #122B40 0%, #0D2539 100%);

  --ow-radius:        20px;
  --ow-radius-md:     12px;
  --ow-radius-sm:     10px;
  --ow-pill:          999px;
  --ow-ease:          0.18s ease;
  --ow-max:           1280px;
  --ow-gutter:        clamp(16px, 4vw, 48px);

  --ow-serif: 'Newsreader', Georgia, serif;
  --ow-sans:  'Geist', system-ui, -apple-system, sans-serif;
  --ow-mono:  'Geist Mono', ui-monospace, monospace;

  /* Re-point the legacy OF Finance tokens */
  --of-gold:        var(--ow-gold);
  --of-gold-bright: var(--ow-gold-hover);
  --of-gold-soft:   var(--ow-gold-soft);
  --of-bg:          var(--ow-bg);
  --of-sidebar:     var(--ow-bg);
  --of-card:        var(--ow-surface);
  --of-card-2:      var(--ow-surface-2);
  --of-line:        var(--ow-line);
  --of-gold-line:   var(--ow-gold-line);
  --of-text:        var(--ow-text);
  --of-muted:       var(--ow-muted);
  --of-faint:       rgba(236, 231, 220, 0.38);
  --of-success:     var(--ow-success);
  --of-warning:     var(--ow-warning);
  --of-danger:      var(--ow-danger);
  --of-info:        var(--ow-info);
  --of-base:        var(--ow-gold);
  --of-radius:      var(--ow-radius);
  --of-shadow:      none;

  --gold:          var(--ow-gold);
  --gold-bright:   var(--ow-gold-hover);
  --gold-subtle:   var(--ow-gold-soft);
  --gold-border:   var(--ow-gold-line);
  --navy-deep:     var(--ow-bg);
  --fg1:           var(--ow-text);
  --fg2:           var(--ow-muted);
  --fg3:           rgba(236, 231, 220, 0.38);
  --success:       var(--ow-success);
  --warning:       var(--ow-warning);
  --danger:        var(--ow-danger);
  --info:          var(--ow-info);
  --bg-app:        var(--ow-bg);
  --bg-sidebar:    var(--ow-bg);
  --bg-card:       var(--ow-surface);
  --bg-card-hover: var(--ow-surface-2);
  --bg-input:      var(--ow-bg);
  --border-gold:   var(--ow-gold-line);
  --border-white:  var(--ow-line);
  --border-input:  var(--ow-line-strong);
  --border-divider: var(--ow-line-soft);
  --shadow-card:   none;
  --radius-lg:     var(--ow-radius);

  --font-display: var(--ow-serif);
  --font-body:    var(--ow-sans);
  --font-mono:    var(--ow-mono);
}

/* ── Base ─────────────────────────────────────────────────── */
html, body {
  background: var(--ow-bg) !important;
}

body {
  color: var(--ow-text);
  font-family: var(--ow-sans) !important;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--ow-serif) !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em;
  color: var(--ow-text);
}

a { color: var(--ow-gold); transition: color var(--ow-ease); }
a:hover { color: var(--ow-text); }

code, kbd, .font-mono, .ow-mono { font-family: var(--ow-mono) !important; }

::selection { background: var(--ow-gold); color: var(--ow-bg); }

.of-app-shell { background: var(--ow-bg) !important; }

/* ── Buttons: pills ───────────────────────────────────────── */
.btn {
  border-radius: var(--ow-pill) !important;
  font-family: var(--ow-sans);
  font-weight: 500;
  transition: all var(--ow-ease);
}
.btn:active { transform: scale(0.97); }

.btn--base,
.btn--primary,
.btn-primary {
  background: var(--ow-gold) !important;
  border: 1px solid var(--ow-gold) !important;
  color: var(--ow-bg) !important;
  box-shadow: none !important;
}
.btn--base:hover,
.btn--primary:hover,
.btn-primary:hover {
  background: var(--ow-gold-hover) !important;
  border-color: var(--ow-gold-hover) !important;
  color: var(--ow-bg) !important;
}

.btn--secondary,
.btn--dark,
.btn-outline-primary,
.btn-secondary {
  background: var(--ow-surface) !important;
  border: 1px solid var(--ow-line-strong) !important;
  color: var(--ow-text) !important;
}
.btn--secondary:hover,
.btn--dark:hover,
.btn-outline-primary:hover,
.btn-secondary:hover {
  border-color: var(--ow-gold) !important;
  color: var(--ow-text) !important;
}

/* ── Cards ────────────────────────────────────────────────── */
.card,
.of-card,
.custom--card {
  background: var(--ow-surface) !important;
  border: 1px solid var(--ow-line) !important;
  border-radius: var(--ow-radius) !important;
  box-shadow: none !important;
  color: var(--ow-text);
}
.card-header,
.card-footer {
  background: transparent !important;
  border-color: var(--ow-line-soft) !important;
}

.of-section-header h2 {
  font-family: var(--ow-serif) !important;
  font-size: 24px;
}

/* ── Forms ────────────────────────────────────────────────── */
.form-control,
.form-select,
.form--control,
.input-group-text {
  background: var(--ow-bg) !important;
  border: 1px solid var(--ow-line-strong) !important;
  border-radius: var(--ow-radius-md) !important;
  color: var(--ow-text) !important;
}
.form-control:focus,
.form-select:focus,
.form--control:focus {
  border-color: var(--ow-gold) !important;
  box-shadow: 0 0 0 3px var(--ow-gold-soft) !important;
}
.form-control::placeholder { color: rgba(236, 231, 220, 0.38) !important; }
.form-label, label { color: var(--ow-muted); font-weight: 500; }

/* ── Tables ───────────────────────────────────────────────── */
.table,
.custom--table {
  --bs-table-bg: transparent;
  color: var(--ow-text) !important;
}
.table thead th,
.custom--table thead th {
  background: transparent !important;
  border-bottom: 1px solid var(--ow-line) !important;
  color: var(--ow-muted) !important;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.table td,
.custom--table td {
  border-color: var(--ow-line-soft) !important;
  color: var(--ow-text);
}

/* ── Badges ───────────────────────────────────────────────── */
.badge {
  border-radius: var(--ow-pill) !important;
  font-family: var(--ow-sans);
  font-weight: 500;
}
.badge--success { background: var(--ow-success-soft) !important; color: var(--ow-success) !important; }
.badge--warning { background: var(--ow-warning-soft) !important; color: var(--ow-warning) !important; }
.badge--danger  { background: var(--ow-danger-soft) !important;  color: var(--ow-danger) !important; }
.badge--primary,
.badge--base    { background: var(--ow-gold-soft) !important;    color: var(--ow-gold) !important; }
.badge--dark    { background: var(--ow-line) !important;         color: var(--ow-muted) !important; }

/* ── Modals & dropdowns ───────────────────────────────────── */
.modal-content {
  background: var(--ow-surface) !important;
  border: 1px solid var(--ow-line) !important;
  border-radius: var(--ow-radius) !important;
  color: var(--ow-text);
}
.modal-header, .modal-footer { border-color: var(--ow-line-soft) !important; }
.modal-backdrop.show { opacity: 0.72; }

/* ============================================================
   Shell: header, navigation, main, footer
   ============================================================ */
.ow-shell {
  background: var(--ow-bg);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.ow-header {
  background: rgba(11, 22, 32, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ow-line);
  padding: 0 var(--ow-gutter);
  position: sticky;
  top: 0;
  z-index: 1030;
}
.ow-header__inner {
  align-items: center;
  column-gap: 24px;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
  max-width: var(--ow-max);
}

.ow-brand {
  align-items: center;
  color: var(--ow-text);
  display: flex;
  flex-shrink: 0;
  gap: 12px;
  height: 64px;
  order: 1;
}
.ow-brand:hover { color: var(--ow-text); }
/* Logo: the hand-and-family mark + the letter-spaced OF WEALTH wordmark
   (images/brand/*.svg, cropped from the master logo). */
.ow-brand__mark {
  display: block;
  flex-shrink: 0;
  height: 42px;
  width: auto;
}
.ow-brand__name {
  display: block;
  height: 13px;
  width: auto;
}

.ow-header__tools {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: 12px;
  margin-left: auto;
  order: 2;
}
.ow-price {
  align-items: center;
  display: flex;
  font-size: 13px;
  gap: 8px;
  white-space: nowrap;
}
.ow-price__label { color: var(--ow-muted); }
.ow-price__value { font-family: var(--ow-mono); font-weight: 500; }
.ow-divider-v {
  background: var(--ow-line);
  height: 20px;
  width: 1px;
}

select.langSel.ow-lang,
.ow-lang {
  appearance: none;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  height: auto !important;
  width: auto !important;
  color: var(--ow-muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  padding: 6px;
}
.ow-lang:focus { outline: none; color: var(--ow-text); }
select.langSel.ow-lang option,
.ow-lang option { background: var(--ow-surface); color: var(--ow-text); }

.ow-icon-btn {
  align-items: center;
  background: var(--ow-surface);
  border: 1px solid var(--ow-line);
  border-radius: 50%;
  color: var(--ow-text);
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: 36px;
  justify-content: center;
  position: relative;
  transition: border-color var(--ow-ease);
  width: 36px;
}
.ow-icon-btn:hover { border-color: var(--ow-gold); color: var(--ow-text); }
.ow-icon-btn svg { height: 16px; width: 16px; }
.ow-icon-btn__dot {
  background: var(--ow-gold);
  border-radius: 50%;
  height: 6px;
  position: absolute;
  right: 9px;
  top: 8px;
  width: 6px;
}

.ow-eligibility img { display: block; height: 40px; width: auto; }

/* Account menu */
.ow-account { position: relative; }
.ow-avatar {
  align-items: center;
  background: var(--ow-gold);
  border: none;
  border-radius: 50%;
  color: var(--ow-bg);
  cursor: pointer;
  display: flex;
  font-size: 12px;
  font-weight: 600;
  height: 36px;
  justify-content: center;
  width: 36px;
}

/* Shared dropdown panel (account menu + nav groups) */
.ow-menu {
  background: var(--ow-surface);
  border: 1px solid var(--ow-line);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
  display: none;
  min-width: 240px;
  padding: 8px;
  position: absolute;
  top: calc(100% + 6px);
  z-index: 1040;
}
.ow-menu--right { right: 0; }
.is-open > .ow-menu { display: flex; flex-direction: column; gap: 4px; }
.ow-menu__head {
  border-bottom: 1px solid var(--ow-line-soft);
  margin-bottom: 6px;
  padding: 8px 12px 12px;
}
.ow-menu__head strong { display: block; font-size: 14px; font-weight: 500; }
.ow-menu__head span { color: var(--ow-muted); font-size: 12px; }
.ow-menu a {
  align-items: center;
  border-radius: 8px;
  color: var(--ow-text);
  display: flex;
  font-size: 14px;
  gap: 10px;
  padding: 9px 12px;
  white-space: nowrap;
}
.ow-menu a:hover {
  background: rgba(236, 231, 220, 0.05);
  color: var(--ow-text);
}
.ow-menu a.active {
  background: var(--ow-gold-soft);
  color: var(--ow-gold);
}
.ow-menu__sep { border-top: 1px solid var(--ow-line-soft); margin: 4px 0; }

.ow-count {
  background: var(--ow-gold-soft);
  border-radius: var(--ow-pill);
  color: var(--ow-gold);
  font-family: var(--ow-mono);
  font-size: 11px;
  line-height: 1;
  margin-left: auto;
  padding: 4px 8px;
}
.ow-count--success { background: var(--ow-success-soft); color: var(--ow-success); }
.ow-count--warning { background: var(--ow-warning-soft); color: var(--ow-warning); }
.ow-count--danger  { background: var(--ow-danger-soft);  color: var(--ow-danger); }
.ow-new {
  background: var(--ow-gold);
  border-radius: var(--ow-pill);
  color: var(--ow-bg);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-left: auto;
  padding: 3px 7px;
  text-transform: uppercase;
}

/* Primary navigation row */
.ow-nav {
  display: flex;
  flex: 1 0 100%;
  gap: 4px;
  height: 48px;
  margin-left: -14px;
  min-width: 0;
  order: 3;
}
.ow-nav__item { position: relative; }
.ow-nav__link {
  align-items: center;
  background: none;
  border: none;
  color: var(--ow-muted);
  cursor: pointer;
  display: flex;
  font-size: 14px;
  font-weight: 500;
  gap: 6px;
  height: 100%;
  padding: 0 14px;
  white-space: nowrap;
}
.ow-nav__link:hover { color: var(--ow-text); }
.ow-nav__link.active {
  box-shadow: inset 0 -2px 0 var(--ow-gold);
  color: var(--ow-text);
}
.ow-nav__link svg { height: 12px; opacity: 0.6; width: 12px; }
.ow-nav__item > .ow-menu { left: 0; top: 100%; }

.ow-burger { display: none; }

/* Main + footer */
.ow-main {
  flex: 1;
  padding: 40px var(--ow-gutter) 64px;
}
.ow-main__inner {
  margin: 0 auto;
  max-width: var(--ow-max);
}
/* Pages still wrap themselves in the old dashboard containers. */
.ow-main .dashboard-inner,
.ow-main .of-dashboard { padding-top: 0 !important; }

.ow-footer {
  border-top: 1px solid var(--ow-line);
  padding: 24px var(--ow-gutter);
}
.ow-footer__inner {
  align-items: center;
  color: var(--ow-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  gap: 16px;
  justify-content: space-between;
  margin: 0 auto;
  max-width: var(--ow-max);
}
.ow-footer__tagline {
  color: var(--ow-text);
  font-family: var(--ow-serif);
  font-size: 15px;
}
.ow-footer__links { display: flex; flex-wrap: wrap; gap: 20px; }

/* ── Phones & tablets: bottom dock + sheets instead of the tab row ── */
.ow-dock, .ow-sheet, .ow-sheet-scrim, .ow-menu__mobile { display: none; }

@media (max-width: 1199.98px) {
  :root { --ow-dock-h: 66px; }
  .ow-nav, .ow-price, .ow-divider-v { display: none !important; }
  .ow-header__inner { flex-wrap: nowrap; }
  .ow-header__tools .ow-price { display: none !important; }

  /* Room at the bottom of every page so the dock never covers content. */
  /* Only pages that render the dock (logged-in shell); guests have none. */
  body:has(.ow-dock) { padding-bottom: calc(var(--ow-dock-h) + env(safe-area-inset-bottom, 0px)) !important; }

  .ow-dock {
    background: rgba(13, 26, 38, 0.94);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid var(--ow-line);
    bottom: 0;
    display: flex;
    left: 0;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    position: fixed;
    right: 0;
    z-index: 1040;
  }
  .ow-dock__item {
    align-items: center;
    background: none;
    border: none;
    border-radius: 14px;
    color: var(--ow-muted);
    cursor: pointer;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    font-family: var(--ow-sans);
    font-size: 10.5px;
    font-weight: 500;
    gap: 4px;
    justify-content: center;
    min-width: 0;
    padding: 7px 2px 6px;
    position: relative;
    transition: color var(--ow-ease), background var(--ow-ease);
  }
  .ow-dock__item svg { height: 22px; width: 22px; }
  .ow-dock__item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ow-dock__item:hover { color: var(--ow-text); }
  .ow-dock__item.is-active { color: var(--ow-gold); }
  .ow-dock__item.is-active::before {
    background: var(--ow-gold);
    border-radius: 0 0 3px 3px;
    content: "";
    height: 3px;
    left: 50%;
    position: absolute;
    top: -6px;
    transform: translateX(-50%);
    width: 22px;
  }
  .ow-dock__dot {
    background: var(--ow-danger);
    border: 2px solid #0D1A26;
    border-radius: 50%;
    height: 9px;
    left: calc(50% + 6px);
    position: absolute;
    top: 6px;
    width: 9px;
  }

  .ow-sheet-scrim {
    background: rgba(6, 21, 32, 0.6);
    display: block;
    inset: 0;
    position: fixed;
    z-index: 1041;
  }
  .ow-sheet-scrim[hidden] { display: none; }
  .ow-sheet {
    background: var(--ow-surface);
    border: 1px solid var(--ow-line);
    border-bottom: none;
    border-radius: 22px 22px 0 0;
    bottom: calc(var(--ow-dock-h) + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -18px 48px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    gap: 12px;
    left: 0;
    max-height: calc(100vh - var(--ow-dock-h) - 80px);
    max-height: calc(100dvh - var(--ow-dock-h) - 80px);
    overflow-y: auto;
    padding: 8px 18px 18px;
    position: fixed;
    right: 0;
    transform: translateY(16px);
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
    z-index: 1042;
  }
  .ow-sheet[hidden] { display: none; }
  .ow-sheet.is-open { opacity: 1; transform: none; }
  .ow-sheet__grip { align-self: center; background: var(--ow-line-strong); border-radius: 3px; height: 4px; width: 38px; }
  .ow-sheet__head { align-items: center; display: flex; justify-content: space-between; }
  .ow-sheet__title { font-family: var(--ow-serif) !important; font-size: 22px !important; margin: 0; }
  .ow-sheet .ow-balances {
    background: var(--ow-bg);
    border: 1px solid var(--ow-line-soft);
    border-radius: var(--ow-radius-md);
    margin: 0;
    min-width: 0;
    padding: 4px 16px;
  }
  .ow-sheet__links { display: flex; flex-direction: column; gap: 4px; }
  .ow-sheet__links a {
    align-items: center;
    border-radius: 12px;
    color: var(--ow-text);
    display: flex;
    font-size: 15px;
    gap: 10px;
    min-height: 50px;
    padding: 10px 12px;
  }
  .ow-sheet__links a:hover { background: rgba(236, 231, 220, 0.05); color: var(--ow-text); }
  .ow-sheet__links a.active { background: var(--ow-gold-soft); color: var(--ow-gold); }
  .ow-sheet__links .ow-count, .ow-sheet__links .ow-new { margin-left: auto; }
  .ow-sheet__chev { color: var(--ow-muted); flex-shrink: 0; height: 16px; margin-left: auto; width: 16px; }
  .ow-sheet__links .ow-count + .ow-sheet__chev, .ow-sheet__links .ow-new + .ow-sheet__chev { margin-left: 0; }
  body.ow-sheet-open { overflow: hidden; }

  /* Account menu carries the price + language on small screens. */
  .ow-menu__mobile {
    border-bottom: 1px solid var(--ow-line-soft);
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 4px;
    padding: 4px 12px 12px;
  }
  .ow-menu__mobile .ow-price { display: flex !important; }
  .ow-account .ow-menu { max-width: calc(100vw - 24px); }
}
@media (max-width: 575.98px) {
  .ow-main { padding-top: 24px; }
  .ow-brand__mark { height: 36px; }
  .ow-brand__name { height: 11px; }
  .ow-eligibility img { height: 34px; }
}

/* ============================================================
   Building blocks for redesigned pages
   ============================================================ */
.ow-stack { display: flex; flex-direction: column; gap: 32px; }

.ow-page-head {
  align-items: flex-end;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
}
.ow-page-head__date { color: var(--ow-muted); font-size: 13px; }
.ow-page-head h1 {
  font-size: clamp(32px, 3.4vw, 44px) !important;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 6px 0 0;
}
.ow-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.ow-btn {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--ow-pill);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--ow-sans);
  font-size: 14px;
  font-weight: 500;
  gap: 8px;
  justify-content: center;
  padding: 12px 22px;
  transition: all var(--ow-ease);
  white-space: nowrap;
}
.ow-btn:active { transform: scale(0.97); }
.ow-btn--gold { background: var(--ow-gold); color: var(--ow-bg); }
.ow-btn--gold:hover { background: var(--ow-gold-hover); color: var(--ow-bg); }
.ow-btn--ghost { background: var(--ow-surface); border-color: var(--ow-line-strong); color: var(--ow-text); }
.ow-btn--ghost:hover { border-color: var(--ow-gold); color: var(--ow-text); }
.ow-btn--outline { background: none; border-color: var(--ow-line-strong); color: var(--ow-text); }
.ow-btn--outline:hover { border-color: var(--ow-gold); color: var(--ow-text); }
.ow-btn--sm { font-size: 12px; padding: 7px 14px; }
.ow-btn.is-disabled { opacity: 0.45; pointer-events: none; }

.ow-card {
  background: var(--ow-surface);
  border: 1px solid var(--ow-line);
  border-radius: var(--ow-radius);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 28px;
}
.ow-card--hero {
  background: var(--ow-hero);
  border-color: var(--ow-gold-line);
  color: var(--ow-cream);
  gap: 28px;
  padding: 32px;
}
.ow-card__head {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
}
.ow-card__title {
  font-family: var(--ow-serif) !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em;
  margin: 0;
}
.ow-card__meta { color: var(--ow-muted); font-size: 13px; }
.ow-link { font-size: 13px; font-weight: 500; }

.ow-eyebrow {
  color: var(--ow-gold);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ow-label { color: var(--ow-muted); font-size: 13px; }
.ow-card--hero .ow-label { color: var(--ow-on-dark-muted); }
.ow-figure {
  font-family: var(--ow-serif);
  font-size: clamp(48px, 5vw, 64px);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1;
}
.ow-figure--md { font-size: 36px; letter-spacing: -0.02em; }
.ow-num { font-family: var(--ow-mono); font-weight: 500; }

.ow-chip {
  border-radius: var(--ow-pill);
  display: inline-flex;
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px;
}
.ow-chip--success { background: var(--ow-success-soft); color: var(--ow-success); }
.ow-chip--warning { background: var(--ow-warning-soft); color: var(--ow-warning); }
.ow-chip--danger  { background: var(--ow-danger-soft);  color: var(--ow-danger); }
.ow-chip--gold    { background: var(--ow-gold-soft);    color: var(--ow-gold); }
.ow-chip--muted   { background: var(--ow-line);         color: var(--ow-muted); }

.ow-segmented {
  border: 1px solid rgba(244, 241, 234, 0.15);
  border-radius: var(--ow-pill);
  display: inline-flex;
  gap: 2px;
  padding: 4px;
}
.ow-segmented button {
  background: transparent;
  border: none;
  border-radius: var(--ow-pill);
  color: var(--ow-on-dark-muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 14px;
}
.ow-segmented button.is-active { background: var(--ow-cream); color: #0D2539; }
.ow-segmented--quiet { background: var(--ow-bg); border: none; padding: 3px; }
.ow-segmented--quiet button { color: var(--ow-muted); }
.ow-segmented--quiet button.is-active {
  background: var(--ow-line);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  color: var(--ow-text);
}

/* Row list: icon · text · trailing value */
.ow-list { display: flex; flex-direction: column; }
.ow-row {
  align-items: center;
  border-top: 1px solid var(--ow-line-soft);
  display: flex;
  gap: 14px;
  padding: 14px 0;
}
.ow-list--first-flush .ow-row:first-child { border-top: none; }
.ow-row__body { flex: 1; min-width: 0; }
.ow-row__title { font-size: 14px; font-weight: 500; }
.ow-row__sub { color: var(--ow-muted); font-size: 12px; }
.ow-row__end { text-align: right; }

.ow-status-dot {
  align-items: center;
  border-radius: 50%;
  display: flex;
  flex-shrink: 0;
  height: 32px;
  justify-content: center;
  width: 32px;
}
.ow-status-dot svg { height: 15px; width: 15px; }
.ow-status-dot--success { background: var(--ow-success-soft); color: var(--ow-success); }
.ow-status-dot--warning { background: var(--ow-warning-soft); color: var(--ow-warning); }
.ow-status-dot--danger  { background: var(--ow-danger-soft);  color: var(--ow-danger); }
.ow-status-dot--gold    { background: var(--ow-gold-soft);    color: var(--ow-gold); }
.ow-status-dot--muted   { background: var(--ow-line);         color: var(--ow-muted); }

.ow-thumb {
  align-items: center;
  background: #0D2539;
  border-radius: var(--ow-radius-sm);
  color: var(--ow-gold);
  display: flex;
  flex-shrink: 0;
  font-family: var(--ow-mono);
  font-size: 10px;
  height: 44px;
  justify-content: center;
  overflow: hidden;
  width: 44px;
}
.ow-thumb img { height: 100%; object-fit: cover; width: 100%; }

.ow-progress { display: flex; gap: 4px; }
.ow-progress span { background: var(--ow-line); border-radius: 2px; flex: 1; height: 3px; }
.ow-progress span.is-done { background: var(--ow-success); }

.ow-split-bar {
  border-radius: var(--ow-pill);
  display: flex;
  gap: 3px;
  height: 6px;
  overflow: hidden;
}
.ow-legend {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.ow-legend__label {
  align-items: center;
  color: var(--ow-on-dark-muted);
  display: flex;
  font-size: 12px;
  gap: 8px;
}
.ow-legend__swatch { border-radius: 2px; height: 8px; width: 8px; }
.ow-legend__value { font-family: var(--ow-mono); font-size: 16px; font-weight: 500; }
.ow-legend__sub { color: var(--ow-on-dark-muted); font-size: 11px; }

.ow-note {
  align-items: center;
  background: var(--ow-bg);
  border-radius: var(--ow-radius-md);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 14px 16px;
}

.ow-grid-hero { display: flex; flex-wrap: wrap; gap: 24px; }
.ow-grid-hero > :first-child { flex: 2 1 560px; }
.ow-grid-hero > :last-child { flex: 1 1 320px; }
.ow-grid-2 { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.ow-grid-3 { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

@media (max-width: 575.98px) {
  .ow-card { padding: 22px 18px; }
  .ow-card--hero { padding: 24px 20px; }
}

/* Wallet balances at the top of the Wallet menu (was the old sidebar) */
.ow-balances { display: flex; flex-direction: column; min-width: 300px; padding-bottom: 4px !important; padding-top: 4px !important; }
.ow-balances__row {
  align-items: center;
  border-top: 1px solid var(--ow-line-soft);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 10px 0;
}
.ow-balances__row:first-child { border-top: none; }
.ow-balances__name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ow-balances__name span { color: var(--ow-text); font-size: 13.5px; font-weight: 500; }
.ow-balances__name small { color: var(--ow-muted); font-size: 11px; line-height: 1.35; }
.ow-balances__val { display: flex; flex-direction: column; flex-shrink: 0; gap: 1px; text-align: right; }
.ow-balances__val strong { font-size: 15px; white-space: nowrap; }
.ow-balances__val strong small { color: var(--ow-muted); font-size: 10.5px; }
.ow-balances__val em { color: var(--ow-muted); font-family: var(--ow-mono); font-size: 11.5px; font-style: normal; white-space: nowrap; }

/* ── Shared additions from the page rollout ───────────────── */
/* Global `a { color: gold }` would otherwise win over the button colours. */
a.ow-btn--gold, a.ow-btn--gold:hover { color: var(--ow-bg); }
a.ow-btn--ghost, a.ow-btn--outline, a.ow-btn--ghost:hover, a.ow-btn--outline:hover { color: var(--ow-text); }

.ow-btn--danger { background: none; border-color: rgba(224, 120, 106, 0.45); color: var(--ow-danger); }
.ow-btn--danger:hover { background: var(--ow-danger-soft); border-color: var(--ow-danger); color: var(--ow-danger); }

/* Segmented control built from links (tab rows) */
.ow-segmented a {
  border-radius: var(--ow-pill);
  color: var(--ow-on-dark-muted);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 14px;
  white-space: nowrap;
}
.ow-segmented a.is-active, .ow-segmented a.active { background: var(--ow-cream); color: #0D2539; }
.ow-segmented--quiet a { color: var(--ow-muted); }
.ow-segmented--quiet a:hover { color: var(--ow-text); }
.ow-segmented--quiet a.is-active, .ow-segmented--quiet a.active {
  background: var(--ow-line);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  color: var(--ow-text);
}

/* Empty states */
.ow-empty {
  align-items: center;
  border: 1px dashed var(--ow-line-strong);
  border-radius: var(--ow-radius-md);
  color: var(--ow-muted);
  display: flex;
  flex-direction: column;
  font-size: 14px;
  gap: 10px;
  justify-content: center;
  padding: 36px 20px;
  text-align: center;
}

/* Pagination */
.pagination { flex-wrap: wrap; gap: 6px; }
.pagination .page-link {
  background: var(--ow-surface) !important;
  border: 1px solid var(--ow-line) !important;
  border-radius: var(--ow-pill) !important;
  color: var(--ow-text) !important;
  font-family: var(--ow-mono);
  font-size: 13px;
  min-width: 36px;
  text-align: center;
}
.pagination .page-link:hover { border-color: var(--ow-gold) !important; }
.pagination .page-item.active .page-link { background: var(--ow-gold) !important; border-color: var(--ow-gold) !important; color: var(--ow-bg) !important; }
.pagination .page-item.disabled .page-link { color: var(--ow-muted) !important; opacity: 0.5; }

/* Neutralise the old template's white/blue tables (main.css .table rules) */
.table { background-color: transparent !important; }
.table thead tr { background: transparent !important; }
.table tbody { background: transparent !important; }
.table tbody tr,
.table tbody tr:nth-child(even) { background: transparent !important; }
.table tbody tr td { background: transparent !important; color: var(--ow-text) !important; }
.table tbody tr:hover td { background: rgba(236, 231, 220, 0.025) !important; }
.table tbody tr td::before { color: var(--ow-muted) !important; }
.ow-table { margin: 0; width: 100%; }
.ow-table-wrap { margin: 0 -4px; overflow-x: auto; }

/* Page head subtitle, status-card variant, file inputs */
.ow-page-head p { color: var(--ow-muted); font-size: 15px; margin: 8px 0 0; max-width: 720px; }
.ow-status-dot--info { background: var(--ow-info-soft); color: var(--ow-info); }
.ow-card--status { align-items: center; flex-direction: row; gap: 16px; }
input[type=file]::file-selector-button {
  background: var(--ow-gold);
  border: none;
  border-radius: var(--ow-pill);
  color: var(--ow-bg);
  cursor: pointer;
  font-family: var(--ow-sans);
  font-weight: 500;
  margin-right: 12px;
  padding: 6px 14px;
}
.table > :not(caption) > * > * { background: transparent !important; box-shadow: none !important; }
.table thead tr th { text-align: left; }

/* Pill tabs (Bootstrap tab JS compatible: .nav-link.active) */
.ow-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: var(--ow-pill); background: var(--ow-bg); border: 1px solid var(--ow-line); }
.ow-tab, .ow-tabs .nav-link {
  background: none !important; border: none !important; border-radius: var(--ow-pill) !important;
  color: var(--ow-muted) !important; cursor: pointer; font-size: 13px; font-weight: 500; padding: 7px 16px;
}
.ow-tab:hover, .ow-tabs .nav-link:hover { color: var(--ow-text) !important; }
.ow-tab.active, .ow-tabs .nav-link.active { background: var(--ow-line) !important; color: var(--ow-text) !important; box-shadow: 0 1px 3px rgba(0,0,0,.4); }

/* Label / value pairs */
.ow-kv { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--ow-line-soft); font-size: 14px; }
.ow-kv:first-child { border-top: none; }
.ow-kv > :first-child { color: var(--ow-muted); }
.ow-kv > :last-child { font-family: var(--ow-mono); text-align: right; }
@media (min-width: 992px) {
  .table tbody tr td { text-align: left; }
}
.modal .btn-close { filter: invert(1) grayscale(1) opacity(.7); }

/* ============================================================
   Mobile foundation (Oct 2026 "feels like an app" pass)
   Everything below is scoped to < 1200px (tablets + phones, the
   dock layout) or < 576px (phones) — desktop is untouched. Pages
   add their own mobile rules in their @push('style') blocks and
   can rely on these globals:
     .ow-sticky-actions  sticky action bar that sits above the dock
     .ow-snap-row        horizontal scroll-snap row (no scrollbar)
     .ow-tabs / .ow-segmented scroll sideways on phones, never wrap
     Bootstrap .modal    becomes a bottom sheet on phones
   ============================================================ */

/* Touch polish everywhere (no visual change with a mouse). */
a, button, .btn, .ow-btn, [role="button"], label, summary, .ow-dock__item {
  -webkit-tap-highlight-color: transparent;
}
button, .btn, .ow-btn, [role="button"], .ow-dock__item, .ow-icon-btn, .ow-avatar,
input, select, textarea, label, summary {
  touch-action: manipulation;
}
.ow-sheet, .ow-menu, .modal, .modal-body, .ow-snap-row { overscroll-behavior: contain; }

/* Horizontal scroll-snap row: cards or chips in one swipeable line. */
.ow-snap-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ow-snap-row::-webkit-scrollbar { display: none; }
.ow-snap-row > * { flex: 0 0 auto; scroll-snap-align: start; }

/* Sticky action bar. Desktop: a plain row of buttons. */
.ow-sticky-actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 1199.98px) {
  /* Safe areas (viewport-fit=cover): notch / home indicator / landscape sides. */
  .ow-header {
    padding-left: max(var(--ow-gutter), env(safe-area-inset-left, 0px));
    padding-right: max(var(--ow-gutter), env(safe-area-inset-right, 0px));
    padding-top: env(safe-area-inset-top, 0px);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
  }
  /* Hides while scrolling down, comes back on the first scroll up (header script). */
  .ow-header.is-tucked { transform: translateY(-100%); }
  .ow-dock {
    padding-left: max(6px, env(safe-area-inset-left, 0px));
    padding-right: max(6px, env(safe-area-inset-right, 0px));
  }
  .ow-main {
    padding-left: max(var(--ow-gutter), env(safe-area-inset-left, 0px));
    padding-right: max(var(--ow-gutter), env(safe-area-inset-right, 0px));
  }
  .ow-sheet { padding-bottom: 18px; -webkit-overflow-scrolling: touch; }

  /* Touch targets: 44px for buttons and form controls. */
  .btn, .ow-btn {
    align-items: center;
    display: inline-flex;
    gap: 6px;
    justify-content: center;
    min-height: 44px;
  }
  .btn.d-block, .btn.w-100, .ow-btn.w-100 { display: flex; }
  .form-control:not(textarea), .form-select, .form--control:not(textarea), .input-group-text { min-height: 44px; }
  .ow-icon-btn { height: 40px; width: 40px; }
  .ow-avatar { height: 40px; width: 40px; }
  .ow-menu a { min-height: 44px; }
  .ow-tab, .ow-tabs .nav-link, .ow-segmented button, .ow-segmented a { min-height: 36px; }
  .ow-segmented a, .ow-tabs .nav-link { align-items: center; display: inline-flex; }

  /* The account menu never runs off a short phone screen. */
  .ow-account .ow-menu {
    max-height: calc(100dvh - 72px - var(--ow-dock-h) - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
  }

  /* Grids on tablets: two columns where one would waste the width. */
  .ow-grid-2 { gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
  .ow-grid-3 { gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
  .ow-grid-hero { gap: 20px; }
  .ow-stack { gap: 24px; }

  /* Toasts: bottom of the screen, above the dock, full width on phones. */
  .iziToast-wrapper-topRight, .iziToast-wrapper-topLeft, .iziToast-wrapper-topCenter,
  .iziToast-wrapper-bottomRight, .iziToast-wrapper-bottomLeft, .iziToast-wrapper-bottomCenter {
    bottom: calc(var(--ow-dock-h) + env(safe-area-inset-bottom, 0px) + 8px) !important;
    flex-direction: column-reverse;
    top: auto !important;
  }

  /* Sticky action bar above the dock (and above the progress widget). */
  .ow-sticky-actions {
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    background: rgba(13, 26, 38, 0.94);
    border: 1px solid var(--ow-line);
    border-radius: 18px;
    bottom: calc(var(--ow-dock-h) + env(safe-area-inset-bottom, 0px) + 8px);
    box-shadow: 0 -10px 32px rgba(0, 0, 0, 0.35);
    flex-wrap: nowrap;
    padding: 8px;
    position: sticky;
    z-index: 1036;
  }
  .ow-sticky-actions > .btn, .ow-sticky-actions > .ow-btn { flex: 1 1 0; min-width: 0; }
}

@media (max-width: 575.98px) {
  /* 16px stops iOS from zooming into a field on focus. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select, textarea,
  .form-control, .form-select, .form--control {
    font-size: 16px !important;
  }

  /* Compact header: logo · eligibility · bell · avatar. */
  .ow-brand { gap: 9px; height: 56px; }
  .ow-brand__mark { height: 32px; }
  .ow-brand__name { height: 10px; }
  .ow-header__tools { gap: 8px; }
  .ow-eligibility img { height: 30px; }

  /* Density */
  .ow-main { padding-bottom: 40px; padding-top: 18px; }
  .ow-stack { gap: 20px; }
  .ow-grid-2, .ow-grid-3, .ow-grid-hero { gap: 16px; }
  .ow-card { gap: 14px; padding: 18px; }
  .ow-card--hero { gap: 20px; padding: 20px 18px; }
  .ow-card__title { font-size: 21px !important; }
  .card > .card-body, .custom--card > .card-body { padding: 18px; }
  .ow-page-head { gap: 16px; }
  .ow-page-head h1 { font-size: clamp(28px, 8.2vw, 32px) !important; }
  .ow-page-head p { font-size: 14px; line-height: 1.55; }
  .ow-figure { font-size: clamp(36px, 11vw, 48px); }
  .ow-figure--md { font-size: clamp(26px, 7.5vw, 32px); }
  .ow-note { padding: 12px 14px; }
  .ow-empty { padding: 28px 16px; }

  /* Tab rows and segmented controls: one swipeable line, never three wrapped ones. */
  .ow-tabs, .ow-segmented {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .ow-tabs::-webkit-scrollbar, .ow-segmented::-webkit-scrollbar { display: none; }
  .ow-tabs > *, .ow-segmented > * { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; }

  /* Bootstrap modals become bottom sheets: full width, rounded top, scroll inside. */
  .modal-dialog,
  .modal-dialog.modal-dialog-centered,
  .modal-dialog.modal-dialog-scrollable {
    align-items: flex-end;
    display: flex;
    height: auto;
    margin: 0 !important;
    max-width: none !important;
    min-height: 100%;
    width: 100% !important;
  }
  .modal.fade .modal-dialog { transform: translateY(48px); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); }
  .modal.show .modal-dialog { transform: none; }
  .modal-content {
    border-bottom: none !important;
    border-radius: 22px 22px 0 0 !important;
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow: hidden;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    width: 100%;
  }
  .modal-content::before {
    align-self: center;
    background: var(--ow-line-strong);
    border-radius: 3px;
    content: "";
    flex-shrink: 0;
    height: 4px;
    margin-top: 8px;
    width: 38px;
  }
  .modal-content > form { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
  .modal-header, .modal-footer { flex-shrink: 0; }
  .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .modal-footer { gap: 8px; }
  .modal-footer > * { margin: 0; }

  /* Toasts span the width with a small inset. */
  .iziToast-wrapper-topRight, .iziToast-wrapper-topLeft, .iziToast-wrapper-topCenter,
  .iziToast-wrapper-bottomRight, .iziToast-wrapper-bottomLeft, .iziToast-wrapper-bottomCenter {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
  }

  /* Footer: centred, compact. */
  .ow-footer { padding: 20px var(--ow-gutter); }
  .ow-footer__inner { flex-direction: column; gap: 12px; text-align: center; }
  .ow-footer__links { font-size: 12.5px; gap: 8px 16px; justify-content: center; }
}

/* ── Mobile fixes collected from the page agents ─────────────── */
@media (max-width: 767.98px) {
  /* Stacked .table--responsive--md tables kept their desktop width and were
     clipped on the right; let the table and body take the card's width. */
  .of-data-table .table--responsive--md,
  .of-data-table .table--responsive--md tbody { display: block; width: 100%; }
}
@media (max-width: 1199.98px) {
  .of-copy-button { min-height: 44px; min-width: 44px; }
}
@media (max-width: 1199.98px) {
  .pagination .page-link { align-items: center; display: inline-flex; justify-content: center; min-height: 44px; min-width: 44px; }
}

/* ── Pagination on phones: ‹ 1 … [n] … last › on one line, not three rows of
   large circles. Hides the neighbour pages; prev/next, first, last, the
   current page and the "…" gaps stay. Member template only. */
@media (max-width: 575.98px) {
  .pagination { flex-wrap: nowrap; gap: 6px; justify-content: center; }
  /* Only collapse long paginators (8+ items); a short one shows every page. */
  .pagination:has(> .page-item:nth-child(8)) > .page-item:not(:first-child):not(:last-child):not(.active):not(:nth-child(2)):not(:nth-last-child(2)):not(.disabled) { display: none; }
  .pagination .page-link { font-size: 13px; min-height: 40px !important; min-width: 40px !important; padding: 0 10px; }
  .pagination .page-item.disabled:not(:first-child):not(:last-child) .page-link { background: none !important; border-color: transparent !important; min-width: 20px !important; padding: 0; }
}