/* ============================================================
   TrueReturnCapital — design tokens
   Palette drawn from a Kerala jewellery ledger: bottle-green
   shopfront, gold leaf, and the cream of a stamped passbook.
   ============================================================ */
:root {
  /* Deep greens. The range from ink to forest-3 carries almost all
     the depth in the design, so it is wider than it looks. */
  --ink:        #071411;
  --ink-2:      #0C1F19;
  --forest:     #0F2721;
  --forest-2:   #17372E;
  --forest-3:   #204B3E;

  /* Papers — a shade warmer and brighter than plain off-white. */
  --paper:      #FCF9F0;
  --paper-2:    #F4EDDB;
  --paper-3:    #E5DBC2;

  /* Gold. Used as hairline and accent far more than as fill. */
  --gold:       #C08A2E;
  --gold-text:  #7E5713;
  --figure:     #0F2721;
  --on-dark:    #FCF9F0;
  --gold-lit:   #E8BE68;
  --gold-pale:  #F2E1AD;
  --gold-deep:  #7E5713;

  --kumkum:     #9E3218;
  --leaf:       #3F6E3B;


  /* Roles that invert between the two themes. Every rule that paints a
     surface or writes on one uses these, so switching theme is a matter of
     redefining them rather than hunting through the stylesheets. */
  --surface:    #FFFFFF;
  --lift:       #FFFFFF;
  --nav-bg:     rgba(7, 20, 17, 0.92);
  --chip-off:   rgba(7, 20, 17, 0.07);
  --scrim:      rgba(7, 20, 17, 0.55);
  --surface-2:  #FCF9F0;
  --text:       #071411;
  --text-2:     rgba(7, 20, 17, 0.74);
  --text-3:     rgba(7, 20, 17, 0.62);
  --text-4:     rgba(7, 20, 17, 0.4);

  --rule:       rgba(7, 20, 17, 0.12);
  --rule-2:     rgba(7, 20, 17, 0.07);
  --rule-dark:  rgba(240, 220, 168, 0.14);
  --rule-gold:  rgba(192, 138, 46, 0.34);

  --display: 'Fraunces', Georgia, serif;
  --body:    'Instrument Sans', system-ui, -apple-system, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;

  /* Layered shadows read richer than a single blur. */
  --shadow-sm: 0 1px 2px rgba(7,20,17,.05), 0 2px 6px rgba(7,20,17,.04);
  --shadow-md: 0 1px 3px rgba(7,20,17,.06), 0 8px 24px rgba(7,20,17,.08);
  --shadow-lg: 0 4px 12px rgba(7,20,17,.09), 0 26px 64px rgba(7,20,17,.15);
  --shadow-gold: 0 6px 26px rgba(192,138,46,.20);

  --r-sm: 3px;
  --r:    7px;
  --r-lg: 14px;
  --r-xl: 20px;

  --wrap: 1180px;
  --ease: cubic-bezier(.2, .9, .3, 1);
}

/* ---------- Obsidian ----------
   The second theme. Only the roles that invert are redefined here; the gold,
   the shadows and the type scale are shared, so the two themes stay siblings
   rather than two unrelated designs.

   Amber replaces brass because brass on a near-black ground goes muddy —
   it needs to be lifted and desaturated to stay legible. */
[data-theme="dark"] {
  --ink:        #08090B;
  --ink-2:      #0F1114;
  --forest:     #131519;
  --forest-2:   #1A1D22;
  --forest-3:   #262A31;

  --paper:      #0B0C0E;
  --paper-2:    #131519;
  --paper-3:    #23262C;

  --gold:       #E0A44A;
  --gold-text:  #E0A44A;
  --figure:     #EDEDEF;
  --on-dark:    #EDEDEF;
  --gold-lit:   #F0C179;
  --gold-pale:  #F6DCAE;
  --gold-deep:  #E0A44A;

  --kumkum:     #E2705A;
  --leaf:       #6FBF6A;

  --surface:    #131519;
  --lift:       rgba(255,255,255,0.06);
  --nav-bg:     rgba(11, 12, 14, 0.92);
  --chip-off:   rgba(237, 237, 239, 0.08);
  --scrim:      rgba(0, 0, 0, 0.68);
  --surface-2:  #0F1114;
  --text:       #EDEDEF;
  --text-2:     rgba(237, 237, 239, 0.76);
  --text-3:     rgba(237, 237, 239, 0.56);
  --text-4:     rgba(237, 237, 239, 0.4);

  --rule:       rgba(237, 237, 239, 0.13);
  --rule-2:     rgba(237, 237, 239, 0.07);
  --rule-dark:  rgba(240, 220, 168, 0.16);
  --rule-gold:  rgba(224, 164, 74, 0.34);

  /* On a dark ground a drop shadow does almost nothing, so depth comes from
     the surface being lighter than the page instead. */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 2px 8px rgba(0,0,0,.55);
  --shadow-lg: 0 8px 30px rgba(0,0,0,.6);
  --shadow-gold: 0 6px 26px rgba(224,164,74,.18);

  color-scheme: dark;
}

/* The page itself, and the few gradients written as literals. */
[data-theme="dark"] body { background: var(--paper); color: var(--text); }


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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Clears the sticky header when an in-page anchor is followed. */
  scroll-padding-top: 84px;
}
/* Below 900px the landing nav wraps its links onto a second row. */
@media (max-width: 900px) { html { scroll-padding-top: 124px; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.62;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.08;
  margin: 0;
  letter-spacing: -0.022em;
}
p { margin: 0 0 1em; }
a { color: inherit; }

::selection { background: var(--gold-pale); color: var(--ink); }

.wrap { width: min(100% - 3rem, var(--wrap)); margin-inline: auto; }
@media (max-width: 720px) { .wrap { width: min(100% - 2.25rem, var(--wrap)); } }
@media (max-width: 420px) { .wrap { width: min(100% - 1.5rem, var(--wrap)); } }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.num  { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.025em; }

/* Eyebrow — small caps label with a short gold rule before it. */
.eyebrow {
  font-family: var(--mono);
  font-size: .67rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin: 0 0 1rem;
  display: flex;
  align-items: center;
  gap: .6rem;
}
.eyebrow::before {
  content: '';
  width: 22px; height: 1px;
  background: currentColor;
  opacity: .55;
  flex: none;
}
.eyebrow--dim { color: var(--gold-deep); opacity: .72; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--body); font-size: .9rem; font-weight: 600;
  letter-spacing: -0.005em;
  padding: .78rem 1.4rem; border-radius: var(--r);
  border: 1px solid transparent; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  position: relative;
  transition: transform .14s var(--ease), background .18s var(--ease),
              border-color .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--gold-lit); outline-offset: 3px; }

.btn--gold {
  background: linear-gradient(178deg, var(--gold-lit) 0%, var(--gold) 62%);
  color: #2A1A03;
  box-shadow: inset 0 1px 0 rgba(255,244,214,.55), var(--shadow-sm);
}
.btn--gold:hover { box-shadow: inset 0 1px 0 rgba(255,244,214,.7), var(--shadow-gold); }

.btn--forest { background: var(--forest); color: var(--on-dark); box-shadow: var(--shadow-sm); }
.btn--forest:hover { background: var(--forest-2); box-shadow: var(--shadow-md); }

.btn--ghost { background: transparent; border-color: var(--rule); color: var(--text); }
.btn--ghost:hover { border-color: var(--gold); background: rgba(192,138,46,.06); }

.btn--ghost-lit { background: rgba(251,246,234,.04); border-color: var(--rule-dark); color: var(--on-dark); }
.btn--ghost-lit:hover { border-color: var(--gold-lit); color: var(--gold-lit); background: rgba(232,190,104,.09); }

.btn--danger { background: transparent; border-color: rgba(158,50,24,.35); color: var(--kumkum); }
.btn--danger:hover { background: rgba(158,50,24,.08); border-color: var(--kumkum); }

.btn--sm { padding: .46rem .85rem; font-size: .8rem; }
.btn--block { width: 100%; }
.btn[disabled] { opacity: .42; pointer-events: none; }

/* Comfortable thumb targets once there is no mouse. */
@media (hover: none) {
  .btn { min-height: 46px; }
  .btn--sm { min-height: 38px; }
}

/* ---------- Forms ---------- */
.field { margin-bottom: 1.15rem; }
.field label {
  display: block; font-size: .68rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-3); margin-bottom: .48rem;
  font-family: var(--mono);
}
.input, select.input, textarea.input {
  width: 100%; font-family: var(--body); font-size: .95rem;
  padding: .74rem .88rem; border: 1px solid var(--rule);
  border-radius: var(--r); background: var(--surface); color: var(--text);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.input:hover { border-color: var(--text-4); }
.input:focus {
  outline: none; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(192,138,46,.15);
}
.input--num { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
textarea.input { resize: vertical; min-height: 78px; line-height: 1.6; }
.hint { font-size: .78rem; color: var(--text-3); margin-top: .4rem; line-height: 1.5; }

/* Anything under 16px makes iOS Safari zoom the whole page on focus. */
@media (max-width: 820px) {
  .input, select.input, textarea.input { font-size: 16px; padding: .8rem .9rem; }
}

.row { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .row { grid-template-columns: 1fr; gap: .25rem; } }

input[type=range] { width: 100%; accent-color: var(--gold); margin: .45rem 0; }

/* ---------- Notices ---------- */
.notice {
  padding: .82rem 1.05rem; border-radius: var(--r); font-size: .875rem;
  border-left: 3px solid; margin-bottom: 1rem; line-height: 1.55;
}
.notice--err  { background: rgba(158,50,24,.06);  border-color: var(--kumkum); color: #7C2712; }
.notice--ok   { background: rgba(63,110,59,.09);  border-color: var(--leaf);   color: #2C5229; }
.notice--info { background: rgba(192,138,46,.09); border-color: var(--gold);   color: var(--gold-deep); }
.notice:empty { display: none; }

/* ---------- Chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--mono); font-size: .66rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .24rem .6rem; border-radius: 100px; border: 1px solid;
  white-space: nowrap;
}
.chip--active   { color: #2C5229; border-color: rgba(63,110,59,.38);  background: rgba(63,110,59,.09); }
.chip--pending  { color: var(--gold-deep); border-color: var(--rule-gold); background: rgba(192,138,46,.10); }
.chip--closed   { color: var(--text-3); border-color: var(--rule); background: var(--chip-off); }
.chip--rejected { color: #7C2712; border-color: rgba(158,50,24,.34);   background: rgba(158,50,24,.07); }

/* ---------- Tables ---------- */
/* The four gradients give a soft shadow at whichever edge is still
   scrollable, so on a phone it is obvious the table continues. */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(to right, var(--surface) 28%, transparent) left center,
    linear-gradient(to left,  var(--surface) 28%, rgba(255,255,255,0)) right center,
    radial-gradient(farthest-side at 0 50%,   var(--text-4), var(--text-4)) left center,
    radial-gradient(farthest-side at 100% 50%, var(--text-4), var(--text-4)) right center;
  background-repeat: no-repeat;
  background-size: 34px 100%, 34px 100%, 13px 100%, 13px 100%;
  background-attachment: local, local, scroll, scroll;
}

table.data { width: 100%; border-collapse: collapse; font-size: .875rem; }
table.data th {
  text-align: left; font-family: var(--mono); font-size: .64rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600;
  padding: .72rem .8rem; border-bottom: 1px solid var(--rule); white-space: nowrap;
}
table.data td {
  padding: .82rem .8rem;
  border-bottom: 1px solid var(--rule-2);
  vertical-align: middle;
}
table.data tbody tr { transition: background .14s var(--ease); }
table.data tbody tr:hover { background: rgba(192,138,46,.05); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.right, table.data th.right { text-align: right; }

.empty {
  text-align: center; padding: 3.2rem 1.5rem;
  color: var(--text-3); font-size: .9rem;
}
.empty strong {
  display: block; font-family: var(--display); font-size: 1.2rem;
  color: var(--text); margin-bottom: .4rem; letter-spacing: -.02em;
}

/* ---------- Card ---------- */
.card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card__head {
  padding: 1.15rem 1.4rem; border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: linear-gradient(180deg, rgba(244,237,219,.4), transparent);
}
.card__head h3 { font-size: 1.06rem; letter-spacing: -.02em; }
.card__body { padding: 1.4rem; }
.card__body--flush { padding: 0; }
@media (max-width: 560px) {
  .card__head { padding: 1rem 1.05rem; }
  .card__body { padding: 1.05rem; }
  /* Restated after .card__body: same specificity, so the later rule wins.
     Without this, every table sitting in a flush body gains padding here. */
  .card__body--flush { padding: 0; }
}

/* ---------- Modal ---------- */
.modal-back {
  position: fixed; inset: 0; background: var(--scrim);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 1.25rem;
  animation: fade-in .18s var(--ease);
}
.modal-back[hidden] { display: none; }
.modal {
  background: var(--paper); border-radius: var(--r-lg);
  width: min(100%, 540px); max-height: 88vh; overflow-y: auto;
  box-shadow: var(--shadow-lg); border: 1px solid var(--paper-3);
  animation: modal-in .24s var(--ease);
}
.modal__head {
  padding: 1.3rem 1.5rem; border-bottom: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
  position: sticky; top: 0; background: var(--paper); z-index: 1;
}
.modal__head h3 { font-size: 1.24rem; }
.modal__head p { margin: .35rem 0 0; font-size: .85rem; color: var(--text-3); }
.modal__body { padding: 1.5rem; }
.modal__foot {
  padding: 1.05rem 1.5rem; border-top: 1px solid var(--rule);
  display: flex; gap: .6rem; justify-content: flex-end;
  background: rgba(229,219,194,.32);
  position: sticky; bottom: 0;
}
.x-btn {
  background: none; border: none; font-size: 1.6rem; line-height: 1;
  cursor: pointer; color: var(--text-4); padding: 0 .25rem;
  transition: color .15s var(--ease);
}
.x-btn:hover { color: var(--text); }

/* On a phone a centred dialog fights the keyboard. Dock it instead. */
@media (max-width: 620px) {
  .modal-back { align-items: flex-end; padding: 0; }
  .modal {
    width: 100%; max-height: 92vh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    border-bottom: 0;
    animation: sheet-up .28s var(--ease);
  }
  .modal__head { padding: 1.35rem 1.15rem 1rem; }
  .modal__body { padding: 1.15rem; }
  .modal__foot {
    padding: .9rem 1.15rem calc(.9rem + env(safe-area-inset-bottom));
  }
  .modal__foot .btn { flex: 1; }
  /* A short grab bar reads as "this can be dismissed". */
  .modal__head::before {
    content: ''; position: absolute; top: .5rem; left: 50%; transform: translateX(-50%);
    width: 38px; height: 4px; border-radius: 100px; background: var(--paper-3);
  }
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- Toast ---------- */
#toast {
  position: fixed; bottom: calc(1.5rem + env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%) translateY(160%);
  background: var(--ink); color: var(--on-dark);
  padding: .85rem 1.4rem; border-radius: 100px; font-size: .875rem; font-weight: 500;
  box-shadow: var(--shadow-lg); z-index: 300;
  transition: transform .32s var(--ease);
  max-width: min(92vw, 460px); text-align: center;
  border: 1px solid var(--rule-dark);
}
#toast.show { transform: translateX(-50%) translateY(0); }
#toast.err { background: var(--kumkum); border-color: rgba(255,255,255,.18); }

.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 {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--gold); color: #2A1A03; padding: .75rem 1.25rem; font-weight: 600;
}
.skip:focus { left: 0; }

/* ---------- Theme toggle ----------
   A single control with two states. The icon is drawn in CSS rather than
   loaded, so it cannot flash in late or fail to arrive. */
.themetog {
  width: 34px; height: 34px; flex: 0 0 34px;
  display: inline-grid; place-items: center;
  background: transparent; border: 1px solid var(--rule-dark);
  border-radius: 50%; cursor: pointer; padding: 0;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.themetog:hover { border-color: var(--gold); background: rgba(192,138,46,.12); }
.themetog:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Light theme: a filled disc, the sun. */
.themetog__ic {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--gold-lit);
  box-shadow: 0 0 0 2px rgba(232,190,104,.22);
  transition: background .2s var(--ease), box-shadow .2s var(--ease), transform .3s var(--ease);
}
/* Dark theme: the same disc with a bite taken out, the moon. */
[data-theme="dark"] .themetog__ic {
  background: var(--gold-lit);
  box-shadow: inset -4px -1px 0 0 var(--paper-2), 0 0 0 2px rgba(224,164,74,.2);
  transform: rotate(-20deg);
}

/* On the light pages the nav sits on ink, so the border needs the dark rule;
   on the auth pages it sits on paper and needs the light one. */
.auth .themetog, .shell__right .themetog { border-color: var(--rule); }
.auth .themetog:hover, .shell__right .themetog:hover { border-color: var(--gold); }

/* ---------- Password reveal ---------- */
.pw { position: relative; display: block; }
.pw > input { padding-right: 3rem; width: 100%; }
.pw__eye {
  position: absolute; right: .45rem; top: 50%; transform: translateY(-50%);
  width: 2.1rem; height: 2.1rem; display: grid; place-items: center;
  background: transparent; border: 0; border-radius: var(--r-sm);
  cursor: pointer; padding: 0;
}
.pw__eye:hover { background: var(--chip-off); }
.pw__eye:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
/* The eye, drawn rather than loaded: an almond outline with a pupil. */
.pw__eye::before {
  content: ''; width: 17px; height: 11px;
  border: 1.5px solid var(--text-3);
  border-radius: 50% / 60% 60% 40% 40%;
}
.pw__eye::after {
  content: ''; position: absolute; width: 5px; height: 5px;
  border-radius: 50%; background: var(--text-3);
}
.pw__eye:hover::before, .pw__eye:hover::after { border-color: var(--gold); background: var(--gold); }
.pw__eye:hover::before { background: transparent; }
/* Pressed: a stroke through it, so the two states differ by shape and not
   only by a colour someone may not be able to tell apart. */
.pw__bar {
  position: absolute; width: 21px; height: 1.5px; background: var(--text-3);
  transform: rotate(-45deg); border-radius: 2px;
  opacity: 0; transition: opacity .15s var(--ease);
}
.pw__eye[aria-pressed="true"] .pw__bar { opacity: 1; }
.pw__eye[aria-pressed="true"]:hover .pw__bar { background: var(--gold); }

/* ---------- Profile photo ---------- */
.avatar {
  width: 92px; height: 92px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--rule); background: var(--chip-off);
  display: block;
}
.avatar--sm { width: 34px; height: 34px; }
.avatar--none {
  display: grid; place-items: center;
  font-family: var(--display); font-size: 2rem; font-weight: 700;
  color: var(--gold-text);
}
.avatar--none.avatar--sm { font-size: .95rem; }
.avatar-row { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.avatar-row__acts { display: flex; gap: .5rem; flex-wrap: wrap; }
.avatar-row__hint { font-size: .78rem; color: var(--text-3); margin: .5rem 0 0; width: 100%; }