/* =====================================================================
   Extended Investment — Investor Portal · app-2 "Editorial Bento"
   Warm, airy, magazine-like. HORIZONTAL TOP NAV (no sidebar) + a
   bento grid of varied-size tiles. Brand tokens per MASTER.md.
   Plain CSS, no framework.
   ===================================================================== */

/* -------------------------------------------------------------------
   1. Tokens
   ------------------------------------------------------------------- */
:root{
  /* Brand greens */
  --ei-green-900:#0C2F25;
  --ei-green-800:#143226;
  --ei-green-500:#5c8a3f;
  --ei-lime:#cdf04a;
  --ei-lime-soft:#eaf3d6;

  /* Neutrals / text */
  --ei-ink:#0C2F25;
  --ei-text:#4a5550;
  --ei-text-2:#5c6a64;
  --ei-muted:#9aa39d;
  --ei-muted-on-dark:#9fb0a6;

  /* Surfaces — warmer/airier than app-1 for the editorial feel */
  --ei-bg:#ffffff;
  --ei-bg-tint:#f4f7f2;
  --ei-bg-tint-2:#f8faf7;
  --ei-paper:#fbfaf5;        /* warm paper canvas — the editorial signature */
  --ei-paper-2:#f6f4ec;      /* warm secondary tint */
  --ei-border:#e7ece8;
  --ei-border-warm:#e8e3d4;  /* warm hairline for tiles on paper */
  --ei-border-on-dark:rgba(255,255,255,.10);

  /* Elevation — soft, premium */
  --ei-shadow-card:0 1px 2px rgba(12,47,37,.05);
  --ei-shadow-tile:0 2px 10px -4px rgba(12,47,37,.10);
  --ei-shadow-pop:0 18px 40px -24px rgba(12,47,37,.32);
  --ei-shadow-raised:0 26px 54px -32px rgba(12,47,37,.45);

  /* Rounded 16-20px tiles per direction */
  --ei-radius-tile:20px;
  --ei-radius:16px;
  --ei-radius-sm:12px;

  /* Performance / data semantics */
  --pf-up:#15803d;   --pf-up-bg:#e7f6ec;
  --pf-down:#c0392b; --pf-down-bg:#fbeae8;
  --pf-warn:#b7791f; --pf-warn-bg:#fbf1de;
  --pf-neutral:#5c6a64;

  /* Pillar ramp (distinct green→lime; NOT the gain/loss tokens) */
  --pillar-ai:#0C2F25;
  --pillar-re:#2f6d4f;
  --pillar-ag:#5c8a3f;
  --pillar-bc:#a7c64b;

  /* Shell metrics */
  --topnav-h:72px;
  --portal-maxw:1240px;
  --portal-page-pad:40px;
  --bento-gap:20px;
  --tile-pad:26px;
  --table-row-h:54px;

  /* Motion */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-in:cubic-bezier(.55,.06,.68,.19);
  --dur:200ms;

  --font:'Work Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* -------------------------------------------------------------------
   2. Reset / base
   ------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  color:var(--ei-text);
  background:var(--ei-paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* closed header dropdowns sit off the right edge; clip (not hidden, so the
     sticky topnav keeps working) prevents a hairline horizontal scroll at the
     1024–1100px range. */
  overflow-x:clip;
}
h1,h2,h3,h4,p{margin:0}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
img,svg{display:block}
ul{margin:0;padding:0;list-style:none}
.tnum{font-variant-numeric:tabular-nums}

/* Focus — visible everywhere */
:focus-visible{
  outline:3px solid var(--ei-green-500);
  outline-offset:2px;
  border-radius:6px;
}
.topnav :focus-visible{outline-color:var(--ei-lime)}

.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{
  position:fixed;top:8px;left:8px;z-index:1000;
  background:var(--ei-green-900);color:#fff;
  padding:10px 16px;border-radius:8px;
  transform:translateY(-150%);transition:transform var(--dur) var(--ease-out);
}
.skip-link:focus{transform:translateY(0)}

/* =====================================================================
   3. Top navigation (horizontal — the defining structural difference)
   ===================================================================== */
.topnav{
  position:sticky;top:0;z-index:60;
  height:var(--topnav-h);
  display:flex;align-items:center;gap:22px;
  padding:0 var(--portal-page-pad);
  background:rgba(251,250,245,.86);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--ei-border-warm);
}
.topnav__brand{flex:0 0 auto;display:flex;align-items:center;gap:14px}
.brand-logo{
  font-size:21px;font-weight:800;letter-spacing:-.02em;color:var(--ei-ink);line-height:1;
}
.brand-logo span{color:var(--ei-green-500)}

/* nav links — pill-row, lime underline marker on active */
.topnav__links{
  display:flex;align-items:center;gap:4px;
  margin-left:8px;
}
/* On wide screens, center the primary nav in the middle of the bar (brand stays
   left, actions stay right). Below this it falls back to the inline layout so it
   never collides with the right-side actions on laptops. */
@media (min-width:1400px){
  .topnav__links{position:absolute;left:50%;transform:translateX(-50%);margin-left:0}
}
.topnav__links a{
  position:relative;
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;border-radius:999px;
  font-size:14.5px;font-weight:600;color:var(--ei-text-2);
  transition:background var(--dur) var(--ease-out),color var(--dur) var(--ease-out);
}
.topnav__links a svg{width:17px;height:17px;stroke-width:1.9;color:var(--ei-muted);transition:color var(--dur)}
.topnav__links a:hover{background:var(--ei-paper-2);color:var(--ei-ink)}
.topnav__links a:hover svg{color:var(--ei-text-2)}
.topnav__links a[aria-current="page"]{
  background:var(--ei-green-900);color:#fff;
}
.topnav__links a[aria-current="page"] svg{color:var(--ei-lime)}
.nav-badge{
  font-size:11px;font-weight:700;
  background:var(--ei-lime);color:var(--ei-green-900);
  border-radius:999px;padding:1px 7px;line-height:1.5;
}
.topnav__links a[aria-current="page"] .nav-badge{background:var(--ei-lime)}

.topnav__spacer{flex:1 1 auto}

/* demo badge — persistent */
.demo-pill{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--pf-warn);background:var(--pf-warn-bg);
  border:1px solid #f0dcb0;border-radius:999px;
  padding:4px 11px;flex:0 0 auto;
}
.demo-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--pf-warn)}

.icon-btn{
  position:relative;
  width:42px;height:42px;flex:0 0 auto;
  display:grid;place-items:center;
  background:#fff;border:1px solid var(--ei-border-warm);border-radius:50%;
  color:var(--ei-text);
  transition:background var(--dur),border-color var(--dur),color var(--dur);
}
.icon-btn svg{width:19px;height:19px}
.icon-btn:hover{background:var(--ei-paper-2);color:var(--ei-ink);border-color:#dcd6c4}
.icon-btn .notif-dot{
  position:absolute;top:9px;right:10px;
  width:9px;height:9px;border-radius:50%;
  background:var(--pf-down);border:2px solid #fff;
}

/* user menu */
.usermenu{position:relative;flex:0 0 auto}
.usermenu__btn{
  display:flex;align-items:center;gap:10px;
  height:42px;padding:0 10px 0 6px;
  background:#fff;border:1px solid var(--ei-border-warm);border-radius:999px;
  color:var(--ei-ink);
  transition:background var(--dur),border-color var(--dur);
}
.usermenu__btn:hover{background:var(--ei-paper-2);border-color:#dcd6c4}
.avatar{
  width:32px;height:32px;border-radius:50%;
  display:grid;place-items:center;flex:0 0 auto;
  background:var(--ei-green-900);color:var(--ei-lime);
  font-size:12.5px;font-weight:700;letter-spacing:.02em;
}
.usermenu__btn .nm{font-size:14px;font-weight:600}
.usermenu__btn .caret{width:16px;height:16px;color:var(--ei-muted)}

/* dropdowns */
.dropdown{
  position:absolute;right:0;top:calc(100% + 12px);
  width:312px;
  background:#fff;border:1px solid var(--ei-border);border-radius:var(--ei-radius);
  box-shadow:var(--ei-shadow-pop);
  padding:9px;
  opacity:0;transform:translateY(-6px) scale(.98);transform-origin:top right;
  pointer-events:none;
  transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out);
  z-index:70;
}
.dropdown.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.dropdown__head{
  padding:10px 12px 9px;display:flex;justify-content:space-between;align-items:center;
  border-bottom:1px solid var(--ei-border);margin-bottom:6px;
}
.dropdown__head b{font-size:14px;color:var(--ei-ink)}
.dropdown__head a{font-size:12.5px;color:var(--ei-green-500);font-weight:600}
.notif{
  display:flex;gap:11px;padding:11px 12px;border-radius:var(--ei-radius-sm);
  transition:background var(--dur);
}
.notif:hover{background:var(--ei-paper-2)}
.notif .ico{
  width:34px;height:34px;border-radius:10px;flex:0 0 auto;
  display:grid;place-items:center;
}
.notif .ico svg{width:17px;height:17px}
.notif .ico.warn{background:var(--pf-warn-bg);color:var(--pf-warn)}
.notif .ico.doc{background:var(--ei-lime-soft);color:var(--ei-green-500)}
.notif .ico.mail{background:#e7eef2;color:#3a6079}
.notif .bd b{display:block;font-size:13.5px;color:var(--ei-ink);font-weight:600;line-height:1.35}
.notif .bd p{font-size:12.5px;color:var(--ei-text-2);line-height:1.4}
.notif .bd time{font-size:11.5px;color:var(--ei-muted)}
.menu-link{
  display:flex;align-items:center;gap:11px;
  padding:11px 12px;border-radius:var(--ei-radius-sm);
  font-size:14px;color:var(--ei-text);font-weight:500;width:100%;background:none;border:0;text-align:left;
  transition:background var(--dur);
}
.menu-link svg{width:18px;height:18px;color:var(--ei-muted)}
.menu-link:hover{background:var(--ei-paper-2);color:var(--ei-ink)}
.menu-link.danger{color:var(--pf-down)}
.menu-link.danger svg{color:var(--pf-down)}
.menu-sep{height:1px;background:var(--ei-border);margin:6px 4px}

/* mobile nav toggle */
.nav-toggle{display:none}

/* mobile drawer scrim */
.scrim{
  position:fixed;inset:0;z-index:55;
  background:rgba(12,47,37,.45);
  opacity:0;pointer-events:none;
  transition:opacity var(--dur) var(--ease-out);
}
.scrim.open{opacity:1;pointer-events:auto}

/* =====================================================================
   4. Page shell + editorial masthead
   ===================================================================== */
.page{max-width:var(--portal-maxw);margin:0 auto;padding:var(--portal-page-pad)}

.masthead{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  margin-bottom:30px;flex-wrap:wrap;
}
.masthead__eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ei-green-500);margin-bottom:10px;
}
.masthead h1{
  font-size:clamp(32px,4.4vw,46px);font-weight:800;letter-spacing:-.025em;
  color:var(--ei-ink);line-height:1.04;
}
.masthead .lede{font-size:15.5px;color:var(--ei-text-2);margin-top:12px;max-width:54ch}
.masthead__meta{
  text-align:right;flex:0 0 auto;
}
.masthead__meta .when{font-size:13px;color:var(--ei-muted);font-weight:600}
.masthead__meta .who{font-size:18px;font-weight:700;color:var(--ei-ink);margin-top:2px}

.rule{height:1px;background:var(--ei-border-warm);margin:26px 0}

/* =====================================================================
   5. Bento grid — varied-size tiles
   ===================================================================== */
.bento{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--bento-gap);
  grid-auto-flow:dense;
}
.bento + .bento{margin-top:var(--bento-gap)}

.tile{
  background:var(--ei-bg);
  border:1px solid var(--ei-border-warm);
  border-radius:var(--ei-radius-tile);
  box-shadow:var(--ei-shadow-tile);
  padding:var(--tile-pad);
  display:flex;flex-direction:column;
  min-width:0;
}
.tile--flush{padding:0;overflow:hidden}

/* column spans */
.t-3{grid-column:span 3}
.t-4{grid-column:span 4}
.t-5{grid-column:span 5}
.t-6{grid-column:span 6}
.t-7{grid-column:span 7}
.t-8{grid-column:span 8}
.t-12{grid-column:span 12}

/* tile head */
.tile__head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  margin-bottom:18px;
}
.tile__head h2{font-size:18px;font-weight:700;color:var(--ei-ink);letter-spacing:-.01em}
.tile__head .sub{font-size:12.5px;color:var(--ei-muted);margin-top:3px}
.tile__head .link{font-size:13px;font-weight:600;color:var(--ei-green-500);display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.tile__head .link svg{width:15px;height:15px}
.tile__head .link:hover{color:var(--ei-green-800)}

/* eyebrow label inside tiles (editorial) */
.eyebrow{
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ei-muted);
}

/* ---- HERO tile (Total Assets, dark green, lime numeral) ---- */
.tile--hero{
  background:var(--ei-green-900);
  border-color:var(--ei-green-900);
  color:#fff;position:relative;overflow:hidden;
  justify-content:space-between;
  min-height:248px;
}
.tile--hero::after{
  content:"";position:absolute;right:-60px;top:-70px;
  width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(205,240,74,.16),transparent 68%);
  pointer-events:none;
}
.tile--hero .eyebrow{color:var(--ei-muted-on-dark)}
.hero__fig{
  font-size:clamp(48px,6.4vw,72px);font-weight:800;color:var(--ei-lime);
  line-height:.96;letter-spacing:-.03em;margin:14px 0 4px;
  position:relative;z-index:1;
}
.hero__cap{color:var(--ei-muted-on-dark);font-size:14px;position:relative;z-index:1}
.hero__foot{
  position:relative;z-index:1;
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin-top:20px;padding-top:18px;border-top:1px solid var(--ei-border-on-dark);
}
.hero__stat .k{display:block;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ei-muted-on-dark);font-weight:600}
.hero__stat .v{display:block;font-size:18px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;margin-top:2px}

/* ---- small stat tiles ---- */
.stat{justify-content:space-between;min-height:158px}
.stat__fig{font-size:34px;font-weight:800;color:var(--ei-ink);line-height:1.02;letter-spacing:-.02em;margin-top:6px}
.stat__cap{font-size:12.5px;color:var(--ei-text-2);margin-top:8px}

/* delta pill */
.delta{
  display:inline-flex;align-items:center;gap:5px;
  font-size:13px;font-weight:700;
  padding:3px 10px;border-radius:999px;width:fit-content;margin-top:8px;
  font-variant-numeric:tabular-nums;
}
.delta svg{width:14px;height:14px}
.delta.up{color:var(--pf-up);background:var(--pf-up-bg)}
.delta.down{color:var(--pf-down);background:var(--pf-down-bg)}
.delta.warn{color:var(--pf-warn);background:var(--pf-warn-bg)}

/* risk bullet */
.bullet{margin-top:10px}
.bullet__track{
  position:relative;height:10px;border-radius:999px;
  background:var(--ei-paper-2);overflow:hidden;
}
.bullet__fill{
  height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--ei-green-500),#6fa34c);
  transition:width 400ms var(--ease-out);
}
.bullet__fill.warn{background:linear-gradient(90deg,var(--pf-warn),#d39a3a)}
.bullet__tick{
  position:absolute;top:-3px;width:2px;height:16px;background:var(--ei-ink);border-radius:2px;
}
.bullet__legend{display:flex;justify-content:space-between;margin-top:9px;font-size:12px;color:var(--ei-text-2)}
.bullet__legend b{color:var(--ei-ink)}

/* =====================================================================
   6. Charts
   ===================================================================== */
.donut-wrap{position:relative;height:240px;display:grid;place-items:center}
.donut-center{position:absolute;text-align:center;pointer-events:none}
.donut-center small{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ei-muted);font-weight:700}
.donut-center b{display:block;font-size:25px;font-weight:800;color:var(--ei-ink);line-height:1.2;letter-spacing:-.01em}

.legend{margin-top:16px;display:flex;flex-direction:column;gap:2px}
.legend li{
  display:flex;align-items:center;gap:10px;
  padding:9px 8px;border-radius:10px;
  font-size:14px;
  transition:background var(--dur);
}
.legend li:hover{background:var(--ei-paper-2)}
.legend .sw{width:11px;height:11px;border-radius:3px;flex:0 0 auto}
.legend .nm{color:var(--ei-ink);font-weight:600}
.legend .pct{margin-left:auto;color:var(--ei-text-2);font-weight:700;font-variant-numeric:tabular-nums}
.legend .val{color:var(--ei-muted);font-variant-numeric:tabular-nums;min-width:72px;text-align:right}

.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{
  font-size:13px;font-weight:600;
  padding:7px 14px;border-radius:999px;
  background:var(--ei-paper-2);border:1px solid var(--ei-border-warm);color:var(--ei-text-2);
  transition:background var(--dur),color var(--dur),border-color var(--dur);
}
.chip:hover{border-color:#dcd6c4;color:var(--ei-ink)}
.chip[aria-pressed="true"]{
  background:var(--ei-green-900);border-color:var(--ei-green-900);color:#fff;
}
.chip[aria-pressed="true"]::after{
  content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--ei-lime);margin-left:7px;vertical-align:middle;
}
.line-wrap{height:288px;position:relative;margin-top:4px;flex:1}

.chart-legend{
  display:flex;align-items:center;gap:20px;margin-top:16px;font-size:13px;color:var(--ei-text-2);flex-wrap:wrap;
}
.chart-legend .key{display:inline-flex;align-items:center;gap:7px}
.chart-legend .key .line{width:18px;height:3px;border-radius:2px;background:var(--ei-green-800)}
.chart-legend .key .line.dash{height:0;border-top:2px dashed var(--ei-muted);background:none}

/* chart data-table toggle */
.btn-ghost{
  font-size:12.5px;font-weight:600;color:var(--ei-green-500);
  background:none;border:0;padding:6px 0;display:inline-flex;align-items:center;gap:5px;
}
.btn-ghost svg{width:14px;height:14px}
.btn-ghost:hover{color:var(--ei-green-800)}
.chart-table{margin-top:16px;display:none}
.chart-table.open{display:block}
.chart-table table{width:100%;border-collapse:collapse;font-size:13px}
.chart-table th,.chart-table td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--ei-border)}
.chart-table td.num,.chart-table th.num{text-align:right;font-variant-numeric:tabular-nums}

/* =====================================================================
   7. Recent activity / alerts list (dashboard tiles)
   ===================================================================== */
.flow{display:flex;flex-direction:column}
.flow__item{
  display:flex;align-items:center;gap:14px;
  padding:15px 0;border-bottom:1px solid var(--ei-border-warm);
}
.flow__item:first-child{padding-top:0}
.flow__item:last-child{border-bottom:0;padding-bottom:0}
.flow__date{
  flex:0 0 48px;text-align:center;
  font-variant-numeric:tabular-nums;
}
.flow__date .d{display:block;font-size:18px;font-weight:800;color:var(--ei-ink);line-height:1}
.flow__date .m{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ei-muted)}
.flow__main{min-width:0;flex:1}
.flow__main b{display:block;font-size:14.5px;font-weight:600;color:var(--ei-ink);line-height:1.35}
.flow__main span{font-size:12.5px;color:var(--ei-muted)}
.flow__amt{font-size:14.5px;font-weight:700;font-variant-numeric:tabular-nums;flex:0 0 auto;text-align:right}
.flow__amt.pos{color:var(--pf-up)}
.flow__amt.neg{color:var(--pf-down)}
.flow__amt.flat{color:var(--pf-neutral)}

.alert-list{display:flex;flex-direction:column}
.alert-item{
  display:flex;gap:13px;padding:16px 0;
  border-bottom:1px solid var(--ei-border-warm);
}
.alert-item:last-child{border-bottom:0;padding-bottom:0}
.alert-item:first-child{padding-top:0}
.alert-item .ico{
  width:40px;height:40px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;
}
.alert-item .ico svg{width:19px;height:19px}
.alert-item .ico.warn{background:var(--pf-warn-bg);color:var(--pf-warn)}
.alert-item .ico.doc{background:var(--ei-lime-soft);color:var(--ei-green-500)}
.alert-item .ico.mail{background:#e7eef2;color:#3a6079}
.alert-item .bd{min-width:0;flex:1}
.alert-item .bd b{display:block;font-size:14.5px;font-weight:600;color:var(--ei-ink);line-height:1.35}
.alert-item .bd p{font-size:13px;color:var(--ei-text-2);line-height:1.45;margin-top:2px}
.alert-item .bd time{font-size:12px;color:var(--ei-muted);display:block;margin-top:4px}

/* capital-calls band (dashboard) */
.cc-list{display:flex;flex-direction:column}
.cc-item{
  display:flex;gap:13px;align-items:center;padding:16px 0;
  border-bottom:1px solid var(--ei-border-warm);
}
.cc-item:last-child{border-bottom:0}
.cc-item .ico{
  width:40px;height:40px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--pf-warn-bg);color:var(--pf-warn);
}
.cc-item .ico svg{width:19px;height:19px}
.cc-item .bd{min-width:0;flex:1}
.cc-item .bd b{display:block;font-size:14.5px;font-weight:600;color:var(--ei-ink);line-height:1.35}
.cc-item .bd p{font-size:13px;color:var(--ei-text-2);line-height:1.45;margin-top:2px}
.cc-action{flex:0 0 auto;display:flex;align-items:center}
.cc-status{
  display:inline-flex;align-items:center;font-size:12.5px;font-weight:600;
  padding:5px 12px;border-radius:999px;white-space:nowrap;
  background:var(--ei-paper-2);color:var(--ei-text-2);border:1px solid var(--ei-border-warm);
}
.cc-status.is-authorised{background:var(--pf-up-bg);color:var(--pf-up);border-color:transparent}
.cc-status.is-funded{background:var(--ei-lime-soft);color:var(--ei-green-800);border-color:transparent}
.cc-note{font-size:12.5px;color:var(--ei-muted);line-height:1.5;margin-top:14px}

/* ---- loading skeletons (injected at boot, replaced by live API data) ---- */
@keyframes ei-sk{from{background-position:200% 0}to{background-position:-200% 0}}
.sk{
  display:inline-block;border-radius:8px;color:transparent!important;
  background-color:var(--ei-paper-2);
  background-image:linear-gradient(100deg,transparent 28%,rgba(255,255,255,.65) 50%,transparent 72%);
  background-size:220% 100%;background-repeat:no-repeat;
  animation:ei-sk 1.4s ease-in-out infinite;
  vertical-align:middle;max-width:100%;
}
.sk-ico{width:40px;height:40px;border-radius:12px;flex:0 0 auto}
/* after the safety timeout (API slow/down) stop the shimmer so it doesn't loop forever */
body.sk-timeout .sk{animation:none;opacity:.5}
@media (prefers-reduced-motion:reduce){.sk{animation:none}}

/* deep-linked dashboard sections: clear the sticky top-nav + brief highlight */
#capitalCalls,#alerts{scroll-margin-top:calc(var(--topnav-h,64px) + 18px)}
@keyframes ei-flash{0%,12%{box-shadow:0 0 0 3px var(--ei-lime)}100%{box-shadow:0 0 0 3px rgba(0,0,0,0)}}
.sec-flash{animation:ei-flash 1.6s ease-out}
@media (prefers-reduced-motion:reduce){.sec-flash{animation:none}}

/* pillar chip */
.pchip{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:600;color:var(--ei-ink);
  padding:3px 11px;border-radius:999px;
  background:var(--ei-paper-2);border:1px solid var(--ei-border-warm);
  white-space:nowrap;
}
.pchip .dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.dot-ai{background:var(--pillar-ai)}
.dot-re{background:var(--pillar-re)}
.dot-ag{background:var(--pillar-ag)}
.dot-bc{background:var(--pillar-bc)}

/* =====================================================================
   8. Tables (holdings, documents)
   ===================================================================== */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.data{width:100%;border-collapse:collapse;font-size:14px}

/* header — small tracked labels, hairline rule, no heavy band */
table.data thead th{
  background:var(--ei-bg);
  text-align:left;
  font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ei-muted);
  padding:16px 20px;
  border-bottom:1px solid var(--ei-border-warm);
  white-space:nowrap;
}
table.data thead th.num{text-align:right}
th.sortable{cursor:pointer;user-select:none;transition:color var(--dur)}
th.sortable:hover{color:var(--ei-text-2)}
th.sortable .th-in{display:inline-flex;align-items:center;gap:5px}
th.sortable.num .th-in{flex-direction:row-reverse}
th.sortable svg{width:13px;height:13px;opacity:.35;transition:opacity var(--dur)}
th.sortable:hover svg{opacity:.7}
th[aria-sort="ascending"] svg,th[aria-sort="descending"] svg{opacity:1;color:var(--ei-green-500)}
th[aria-sort="ascending"] .arr-down{display:none}
th[aria-sort="descending"] .arr-up{display:none}
th:not([aria-sort="ascending"]):not([aria-sort="descending"]) .arr-up{display:none}

table.data tbody td{
  padding:0 20px;height:var(--table-row-h);
  border-bottom:1px solid var(--ei-border-warm);
  color:var(--ei-text);vertical-align:middle;
}
table.data tbody td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ei-ink)}
table.data tbody tr{transition:background var(--dur)}
table.data tbody tr.pos-row:hover{background:var(--ei-paper-2)}
table.data tbody tr:last-child td{border-bottom:0}
.cell-strong{font-weight:600;color:var(--ei-ink);font-size:14.5px}
.cell-sub{display:block;font-size:12px;color:var(--ei-muted);font-weight:400;margin-top:1px}

/* group header rows (pillar dividers) — editorial, replaces the empty band */
tr.group-head th{
  position:static;background:var(--ei-paper-2);
  padding:9px 20px;border-top:1px solid var(--ei-border-warm);border-bottom:1px solid var(--ei-border-warm);
}
tr.group-head:first-child th{border-top:0}
.group-label{
  display:inline-flex;align-items:center;gap:9px;
  font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ei-text-2);
}
.group-label .dot{width:8px;height:8px;border-radius:50%;flex:0 0 auto}
.group-label .gh-meta{
  color:var(--ei-muted);font-weight:600;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;text-transform:none;
}

/* subtotal rows */
tr.subtotal td{
  background:var(--ei-bg);
  font-weight:700;color:var(--ei-ink);font-size:13px;
  height:46px;
  border-bottom:1px solid var(--ei-border-warm);
}
tr.subtotal td:first-child{
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ei-muted);
}
tr.subtotal td.num{color:var(--ei-ink)}

/* gain/loss cell */
.gl{display:inline-flex;align-items:center;gap:4px;justify-content:flex-end;font-weight:700;font-variant-numeric:tabular-nums}
.gl svg{width:13px;height:13px}
.gl.up{color:var(--pf-up)}
.gl.down{color:var(--pf-down)}
.gl.flat{color:var(--pf-neutral)}

/* =====================================================================
   9. Toolbar / filters
   ===================================================================== */
.toolbar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-bottom:var(--bento-gap);
}
.toolbar .chips{flex:1}
.toolbar .count{font-size:13px;color:var(--ei-muted);margin-left:auto;font-variant-numeric:tabular-nums;font-weight:600}

.searchbox{position:relative;width:min(280px,100%)}
.searchbox svg{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--ei-muted);pointer-events:none;
}
.searchbox input{
  width:100%;height:44px;
  padding:0 14px 0 40px;
  font-family:inherit;font-size:14px;color:var(--ei-ink);
  background:#fff;
  border:1px solid var(--ei-border-warm);border-radius:999px;
  transition:border-color var(--dur),box-shadow var(--dur);
}
.searchbox input::placeholder{color:var(--ei-muted)}
.searchbox input:focus{
  outline:none;border-color:var(--ei-green-500);
  box-shadow:0 0 0 3px rgba(92,138,63,.16);
}

/* =====================================================================
   10. Documents — editorial card grid (alternative to a plain table)
   ===================================================================== */
.doc-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--bento-gap)}
.doc-card{
  grid-column:span 4;
  background:var(--ei-bg);border:1px solid var(--ei-border-warm);
  border-radius:var(--ei-radius);box-shadow:var(--ei-shadow-tile);
  padding:22px;display:flex;flex-direction:column;gap:12px;min-width:0;
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);
}
.doc-card:hover{transform:translateY(-3px);box-shadow:var(--ei-shadow-pop)}
.doc-card__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.doc-card__icon{
  width:44px;height:44px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;
  background:var(--ei-lime-soft);color:var(--ei-green-800);
}
.doc-card__icon svg{width:21px;height:21px}
.doc-card[data-type="tax"] .doc-card__icon{background:#e7eef2;color:#3a6079}
.doc-card[data-type="notice"] .doc-card__icon{background:var(--pf-warn-bg);color:var(--pf-warn)}
.doc-card[data-type="report"] .doc-card__icon{background:#ece6f4;color:#6b4ea0}
.type-tag{
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ei-text-2);background:var(--ei-paper-2);border:1px solid var(--ei-border-warm);
  border-radius:999px;padding:3px 10px;
}
.doc-card h3{font-size:15.5px;font-weight:700;color:var(--ei-ink);line-height:1.3}
.doc-card .desc{font-size:13px;color:var(--ei-text-2);line-height:1.45}
.doc-card__meta{
  display:flex;align-items:center;gap:12px;margin-top:auto;
  font-size:12.5px;color:var(--ei-muted);font-variant-numeric:tabular-nums;
  padding-top:14px;border-top:1px solid var(--ei-border-warm);
}
.doc-card__meta .sep{width:3px;height:3px;border-radius:50%;background:var(--ei-muted)}
.doc-card__meta .dl{margin-left:auto}

/* =====================================================================
   11. Buttons + misc
   ===================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:46px;padding:0 22px;
  font-size:14.5px;font-weight:600;border-radius:12px;border:1px solid transparent;
  transition:background var(--dur),border-color var(--dur),color var(--dur),box-shadow var(--dur),transform var(--dur);
}
.btn svg{width:17px;height:17px}
.btn-primary{background:var(--ei-green-900);color:#fff}
.btn-primary:hover{background:#0a261e}
.btn-primary:active{transform:translateY(1px)}
.btn-outline{background:#fff;border-color:var(--ei-border-warm);color:var(--ei-ink)}
.btn-outline:hover{border-color:var(--ei-green-500);background:var(--ei-paper-2)}
.btn-sm{height:40px;padding:0 15px;font-size:13.5px}
.btn-block{width:100%}
.btn:disabled{opacity:.55;cursor:not-allowed}

.disclosure-strip{
  margin-top:var(--bento-gap);
  display:flex;align-items:center;gap:10px;
  padding:16px 20px;border-radius:var(--ei-radius);
  background:var(--ei-paper-2);border:1px dashed var(--ei-border-warm);
  font-size:12.5px;color:var(--ei-muted);line-height:1.5;
}
.disclosure-strip svg{width:18px;height:18px;flex:0 0 auto;color:var(--ei-muted)}

/* empty state */
.empty{text-align:center;padding:56px 24px}
.empty .ico{
  width:60px;height:60px;border-radius:18px;margin:0 auto 18px;
  display:grid;place-items:center;background:var(--ei-paper-2);color:var(--ei-green-500);
}
.empty .ico svg{width:28px;height:28px}
.empty h3{font-size:17px;color:var(--ei-ink);margin-bottom:7px}
.empty p{font-size:14px;color:var(--ei-text-2);max-width:360px;margin:0 auto}

/* =====================================================================
   12. Login (no shell) — editorial split
   ===================================================================== */
.login{min-height:100vh;display:grid;grid-template-columns:1.05fr 1fr}
.login__brand{
  background:var(--ei-green-900);color:#fff;
  padding:60px;display:flex;flex-direction:column;position:relative;overflow:hidden;
}
.login__brand::after{
  content:"";position:absolute;right:-140px;bottom:-140px;
  width:460px;height:460px;border-radius:50%;
  background:radial-gradient(circle,rgba(205,240,74,.12),transparent 70%);
}
.login__brand .brand-logo{font-size:25px;color:#fff}
.login__brand .brand-logo span{color:var(--ei-lime)}
.login__brand .lede{margin-top:auto;position:relative;z-index:1}
.login__brand .lede .eyebrow{color:var(--ei-lime);margin-bottom:16px;display:block}
.login__brand .lede h2{font-size:clamp(28px,3.2vw,38px);font-weight:800;line-height:1.18;letter-spacing:-.02em;max-width:16ch}
.login__brand .lede p{color:var(--ei-muted-on-dark);margin-top:18px;font-size:15.5px;max-width:42ch;line-height:1.6}
.login__stats{display:flex;gap:40px;margin-top:38px}
.login__stats b{display:block;font-size:30px;font-weight:800;color:var(--ei-lime);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.login__stats small{color:var(--ei-muted-on-dark);font-size:12.5px}

.login__form{display:grid;place-items:center;padding:44px;background:var(--ei-paper)}
.login__mobilehead{display:none}
.login__card{width:100%;max-width:410px}
.login__card .eyebrow{display:block;margin-bottom:12px;color:var(--ei-green-500)}
.login__card h1{font-size:28px;font-weight:800;color:var(--ei-ink);letter-spacing:-.02em}
.login__card .sub{color:var(--ei-text-2);margin-top:9px;font-size:15px}

.field{margin-top:20px}
.field label{display:block;font-size:13.5px;font-weight:600;color:var(--ei-ink);margin-bottom:7px}
.field .input-wrap{position:relative}
.field input{
  width:100%;height:50px;
  padding:0 14px;font-size:15px;font-family:inherit;color:var(--ei-ink);
  background:#fff;border:1px solid var(--ei-border-warm);border-radius:12px;
  transition:border-color var(--dur),box-shadow var(--dur);
}
.field input::placeholder{color:var(--ei-muted)}
.field input:focus{outline:none;border-color:var(--ei-green-500);box-shadow:0 0 0 3px rgba(92,138,63,.16)}
.field input[aria-invalid="true"]{border-color:var(--pf-down);box-shadow:0 0 0 3px rgba(192,57,43,.12)}
.field .pw-toggle{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);
  width:38px;height:38px;display:grid;place-items:center;
  background:none;border:0;color:var(--ei-muted);border-radius:8px;
}
.field .pw-toggle:hover{color:var(--ei-ink);background:var(--ei-paper-2)}
.field .err{display:none;color:var(--pf-down);font-size:12.5px;margin-top:6px;align-items:center;gap:5px}
.field .err svg{width:14px;height:14px}
.field.invalid .err{display:flex}
.field .hint{color:var(--ei-muted);font-size:12.5px;margin-top:6px;display:block}

.form-row{display:flex;align-items:center;justify-content:space-between;margin-top:18px}
.checkbox{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ei-text)}
.checkbox input{width:16px;height:16px;accent-color:var(--ei-green-500)}
.link-green{color:var(--ei-green-500);font-weight:600;font-size:13.5px}
.link-green:hover{color:var(--ei-green-800);text-decoration:underline}

.login__foot{margin-top:26px;text-align:center;font-size:13.5px;color:var(--ei-text-2)}

/* MFA */
.mfa-boxes{display:flex;gap:10px;margin-top:6px}
.mfa-boxes input{
  width:100%;aspect-ratio:1;text-align:center;
  font-size:23px;font-weight:700;font-family:inherit;color:var(--ei-ink);
  border:1px solid var(--ei-border-warm);border-radius:12px;background:#fff;
  font-variant-numeric:tabular-nums;
  transition:border-color var(--dur),box-shadow var(--dur);
}
.mfa-boxes input:focus{outline:none;border-color:var(--ei-green-500);box-shadow:0 0 0 3px rgba(92,138,63,.16)}
.mfa-boxes input.filled{border-color:var(--ei-green-500);background:var(--ei-bg-tint-2)}
[hidden]{display:none!important}

/* =====================================================================
   13. Account page
   ===================================================================== */
.prof-head{display:flex;align-items:center;gap:18px;margin-bottom:8px}
.prof-head .avatar{width:66px;height:66px;font-size:23px}
.prof-head h2{font-size:22px;color:var(--ei-ink);letter-spacing:-.01em}
.prof-head p{font-size:14px;color:var(--ei-text-2)}

.def-list{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 28px;margin-top:14px}
.def-list .dt{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ei-muted)}
.def-list .dd{font-size:15px;color:var(--ei-ink);font-weight:500;margin-top:3px}

.setting-row{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:18px 0;border-bottom:1px solid var(--ei-border-warm);
}
.setting-row:last-child{border-bottom:0}
.setting-row:first-of-type{padding-top:0}
.setting-row .tx b{display:block;font-size:14.5px;color:var(--ei-ink);font-weight:600}
.setting-row .tx p{font-size:13px;color:var(--ei-text-2);margin-top:2px;max-width:46ch}

/* toggle */
.toggle{position:relative;width:46px;height:26px;flex:0 0 auto}
.toggle input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.toggle .tr{
  position:absolute;inset:0;border-radius:999px;background:#cfd8d2;
  transition:background var(--dur);
}
.toggle .tr::after{
  content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);
  transition:transform var(--dur) var(--ease-out);
}
.toggle input:checked + .tr{background:var(--ei-green-500)}
.toggle input:checked + .tr::after{transform:translateX(20px)}
.toggle input:focus-visible + .tr{outline:3px solid var(--ei-green-500);outline-offset:2px}

.status-tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;
}
.status-tag.on{color:var(--pf-up);background:var(--pf-up-bg)}
.status-tag svg{width:13px;height:13px}

.card-actions{display:flex;gap:12px;margin-top:24px;padding-top:20px;border-top:1px solid var(--ei-border-warm)}
.danger-zone{margin-top:8px}

/* =====================================================================
   13b. Allocation legend → links (donut deep-link)
   ===================================================================== */
.legend__link{
  display:flex;align-items:center;gap:10px;width:100%;
  border-radius:10px;padding:0;color:inherit;
}
.legend__link:hover .nm{color:var(--ei-green-500)}

/* =====================================================================
   13c. Activity ledger (activity.html)
   ===================================================================== */
.act-tools{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:var(--bento-gap);
}
.act-tools .chips{flex:1 1 auto}
.act-tools .act-tools__right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto}
.select-wrap{position:relative;display:inline-flex}
.select-wrap svg{
  position:absolute;right:11px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;color:var(--ei-muted);pointer-events:none;
}
.select-wrap select{
  appearance:none;-webkit-appearance:none;
  height:44px;padding:0 36px 0 16px;
  font-family:inherit;font-size:14px;font-weight:600;color:var(--ei-ink);
  background:#fff;border:1px solid var(--ei-border-warm);border-radius:999px;
  transition:border-color var(--dur),box-shadow var(--dur);
}
.select-wrap select:focus{outline:none;border-color:var(--ei-green-500);box-shadow:0 0 0 3px rgba(92,138,63,.16)}

/* month group divider (echoes the holdings group-head) */
tr.act-month th{
  background:var(--ei-paper-2);text-align:left;
  padding:9px 20px;
  border-top:1px solid var(--ei-border-warm);border-bottom:1px solid var(--ei-border-warm);
  font-weight:400;
}
tr.act-month:first-child th{border-top:0}
.act-month__in{display:flex;align-items:baseline;gap:10px}
.act-month__in b{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ei-text-2)}
.act-month__in .sum{font-size:11.5px;color:var(--ei-muted);font-variant-numeric:tabular-nums;font-weight:600;margin-left:auto}

/* type chip (in the table cell) */
.tchip{
  display:inline-flex;align-items:center;
  font-size:11.5px;font-weight:700;letter-spacing:.03em;
  padding:3px 10px;border-radius:999px;white-space:nowrap;
  background:var(--ei-paper-2);border:1px solid var(--ei-border-warm);color:var(--ei-text-2);
}
.tchip[data-type="distribution"]{background:var(--pf-up-bg);color:var(--pf-up);border-color:transparent}
.tchip[data-type="contribution"]{background:#e7eef2;color:#3a6079;border-color:transparent}
.tchip[data-type="capitalcall"]{background:var(--pf-warn-bg);color:var(--pf-warn);border-color:transparent}
.tchip[data-type="rebalance"]{background:var(--ei-lime-soft);color:var(--ei-green-800);border-color:transparent}
.tchip[data-type="statement"]{background:#ece6f4;color:#6b4ea0;border-color:transparent}

/* amount cell */
.amt{display:inline-flex;align-items:center;gap:4px;justify-content:flex-end;font-weight:700;font-variant-numeric:tabular-nums}
.amt svg{width:13px;height:13px}
.amt.pos{color:var(--pf-up)}
.amt.neg{color:var(--pf-down)}
.amt.flat{color:var(--pf-neutral)}

/* the activity row carries data-label cells reusing the responsive engine */
table.data tbody td .cell-meta{display:block;font-size:12px;color:var(--ei-muted);margin-top:1px}

/* =====================================================================
   13d. Pillars overview + pillar detail
   ===================================================================== */
/* pillar bento tile (overview card) */
.pillar-card{
  grid-column:span 6;
  display:flex;flex-direction:column;gap:0;
  text-decoration:none;color:inherit;position:relative;overflow:hidden;
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),border-color var(--dur);
}
.pillar-card:hover{transform:translateY(-3px);box-shadow:var(--ei-shadow-pop);border-color:#dcd6c4}
.pillar-card__head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.pillar-card__tag{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ei-text-2);
}
.pillar-card__tag .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.pillar-card__pct{font-size:13px;font-weight:700;color:var(--ei-muted);font-variant-numeric:tabular-nums}
.pillar-card h3{font-size:22px;font-weight:800;color:var(--ei-ink);letter-spacing:-.02em;margin-top:14px;line-height:1.1}
.pillar-card__val{display:flex;align-items:baseline;gap:10px;margin-top:6px}
.pillar-card__val b{font-size:24px;font-weight:800;color:var(--ei-ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.pillar-card__thesis{font-size:13.5px;color:var(--ei-text-2);line-height:1.5;margin-top:12px}
.spark{margin-top:16px;height:54px;width:100%}
.spark svg{width:100%;height:100%;display:block;overflow:visible}
.pillar-card__foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--ei-border-warm);
}
.pillar-card__foot .go{font-size:13px;font-weight:600;color:var(--ei-green-500);display:inline-flex;align-items:center;gap:5px}
.pillar-card__foot .go svg{width:15px;height:15px}
.pillar-card:hover .go{color:var(--ei-green-800)}

/* pillar hero (detail page) */
.pillar-hero{
  background:var(--ei-green-900);border-color:var(--ei-green-900);color:#fff;
  position:relative;overflow:hidden;
}
.pillar-hero::after{
  content:"";position:absolute;right:-60px;top:-70px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,rgba(205,240,74,.16),transparent 68%);pointer-events:none;
}
.pillar-hero .eyebrow{color:var(--ei-muted-on-dark)}
.pillar-hero h2{font-size:clamp(26px,3.6vw,34px);font-weight:800;color:#fff;letter-spacing:-.02em;margin:10px 0 4px;position:relative;z-index:1}
.pillar-hero .sub{color:var(--ei-muted-on-dark);font-size:14px;position:relative;z-index:1}
.pillar-hero__stats{
  position:relative;z-index:1;display:flex;gap:30px;flex-wrap:wrap;
  margin-top:22px;padding-top:18px;border-top:1px solid var(--ei-border-on-dark);
}
.pillar-hero__stats .k{display:block;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ei-muted-on-dark);font-weight:600}
.pillar-hero__stats .v{display:block;font-size:24px;font-weight:800;color:var(--ei-lime);font-variant-numeric:tabular-nums;margin-top:3px;letter-spacing:-.02em}
.pillar-hero__stats .v.neutral{color:#fff}

/* thesis prose tile */
.prose p{font-size:14.5px;color:var(--ei-text);line-height:1.65}
.prose p + p{margin-top:14px}
.prose .lead{font-size:16px;color:var(--ei-ink);font-weight:500}

/* risk-slice mini list */
.risk-slice{display:flex;flex-direction:column;gap:14px;margin-top:4px}
.risk-slice__row .top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px}
.risk-slice__row .nm{font-size:13.5px;font-weight:600;color:var(--ei-ink)}
.risk-slice__row .pc{font-size:13px;font-weight:700;color:var(--ei-text-2);font-variant-numeric:tabular-nums}
.risk-bar{height:8px;border-radius:999px;background:var(--ei-paper-2);overflow:hidden}
.risk-bar__fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--ei-green-500),#6fa34c)}

/* breadcrumb */
.crumbs{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ei-muted);margin-bottom:14px;flex-wrap:wrap}
.crumbs a{color:var(--ei-green-500);font-weight:600}
.crumbs a:hover{color:var(--ei-green-800)}
.crumbs svg{width:14px;height:14px;color:var(--ei-muted)}

/* =====================================================================
   14. Responsive
   ===================================================================== */
@media (max-width:1100px){
  :root{--portal-page-pad:28px}
  .t-5,.t-7{grid-column:span 6}
  .doc-card{grid-column:span 6}
}
@media (max-width:1023px){
  :root{--portal-page-pad:22px}
  /* offscreen drawer must not create horizontal scroll */
  html,body{overflow-x:hidden}
  /* drop backdrop-filter on mobile: it makes .topnav a containing block for the
     position:fixed drawer, collapsing it to the bar height. Solid bg instead. */
  .topnav{gap:12px;backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--ei-paper)}
  /* mobile top-nav drawer */
  .topnav__links{
    position:fixed;top:var(--topnav-h);left:0;right:0;bottom:0;z-index:58;
    flex-direction:column;align-items:stretch;gap:6px;
    background:var(--ei-paper);
    padding:18px var(--portal-page-pad);
    transform:translateX(-100%);
    transition:transform var(--dur) var(--ease-out);
    overflow-y:auto;border-right:1px solid var(--ei-border-warm);
    width:min(320px,86vw);box-shadow:var(--ei-shadow-raised);
  }
  body.nav-open .topnav__links{transform:translateX(0)}
  .topnav__links a{justify-content:flex-start;font-size:16px;padding:13px 16px;border-radius:12px}
  .nav-toggle{display:grid}
  .t-3,.t-4{grid-column:span 6}
  .t-5,.t-6,.t-7,.t-8{grid-column:span 12}
  .pillar-card{grid-column:span 6}
  .usermenu__btn .nm{display:none}
  .masthead h1{font-size:clamp(28px,7vw,38px)}
}
@media (max-width:767px){
  :root{--portal-page-pad:16px;--tile-pad:20px;--bento-gap:14px}
  .t-3,.t-4{grid-column:span 12}
  .doc-card{grid-column:span 12}
  .masthead__meta{text-align:left}
  /* simplify the mobile top bar → brand + notifications + avatar */
  .topnav{gap:10px;padding:0 16px}
  .topnav .demo-pill{display:none}
  .usermenu__btn{padding:0 6px}
  .usermenu__btn .caret{display:none}
  .brand-logo{font-size:18px}
  /* toolbar: chips wrap, count sits on its own tidy line */
  .toolbar{gap:10px}
  .toolbar .chips{flex:1 1 100%}
  .toolbar .count{margin-left:0;order:2}
  .searchbox{order:1;width:100%}
  .login{grid-template-columns:1fr}
  .login__brand{display:none}
  .login__form{display:flex;flex-direction:column;align-items:stretch;padding:0}
  .login__mobilehead{display:block;background:var(--ei-green-900);color:#fff;padding:24px 22px 26px;position:relative;overflow:hidden}
  .login__mobilehead::after{content:"";position:absolute;right:-90px;top:-90px;width:250px;height:250px;border-radius:50%;background:radial-gradient(circle,rgba(205,240,74,.14),transparent 70%)}
  .login__mobilehead .brand-logo{font-size:21px;color:#fff;position:relative;z-index:1}
  .login__mobilehead .brand-logo span{color:var(--ei-lime)}
  .login__mobilehead .mh-tag{display:block;margin-top:9px;color:var(--ei-muted-on-dark);font-size:13px;line-height:1.5;max-width:34ch;position:relative;z-index:1}
  .login__card{max-width:none;padding:28px 22px 40px}
  .def-list{grid-template-columns:1fr}
  .stat__fig{font-size:30px}

  /* ---------------------------------------------------------------
     Mobile: data tables → native card list
     Each position row becomes a clean card. Desktop thead is hidden;
     no repeated uppercase per-cell labels, no word-by-word wrapping.
     --------------------------------------------------------------- */
  .table-scroll{overflow:visible}
  table.data.responsive{display:block}
  table.data.responsive thead{display:none}
  table.data.responsive tbody{display:flex;flex-direction:column;gap:10px;padding:14px}

  /* group header → slim section divider, NOT a card */
  table.data.responsive tbody tr.group-head{
    display:block;background:none;border:0;padding:0;margin:8px 2px 2px;
  }
  table.data.responsive tbody tr.group-head:first-child{margin-top:0}
  table.data.responsive tbody tr.group-head th{
    display:block;background:none;border:0;padding:0;position:static;text-align:left;
  }
  table.data.responsive tbody tr.group-head .group-label{
    display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  }

  /* position / activity row → card */
  table.data.responsive tbody tr.pos-row,
  table.data.responsive tbody tr.act-row{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:
      "name  name"
      "meta  value"
      "stats stats";
    align-items:center;
    gap:6px 12px;
    padding:14px 16px;
    background:var(--ei-bg);
    border:1px solid var(--ei-border-warm);
    border-radius:14px;
    box-shadow:var(--ei-shadow-card);
  }
  table.data.responsive tbody tr.pos-row td,
  table.data.responsive tbody tr.act-row td{
    display:block;height:auto;padding:0;border:0;text-align:left;
  }
  table.data.responsive tbody tr.pos-row td::before,
  table.data.responsive tbody tr.act-row td::before{content:none}
  table.data.responsive tbody tr.pos-row td::before{content:none}

  /* line 1 — full-width primary name */
  table.data.responsive td[data-label="Position"]{grid-area:name}
  .responsive td[data-label="Position"] .cell-strong{font-size:15.5px;line-height:1.3}
  .responsive td[data-label="Position"] .cell-sub{font-size:12.5px}

  /* line 2 left — pillar chip */
  table.data.responsive td[data-label="Pillar"]{grid-area:meta}
  /* line 2 right — value, bold */
  table.data.responsive td[data-label="Value"]{
    grid-area:value;text-align:right;font-size:15.5px;font-weight:700;color:var(--ei-ink);
  }

  /* line 3 — compact inline stats (weight + gain) on one row */
  table.data.responsive td[data-label="Weight"],
  table.data.responsive td[data-label="Gain / loss"]{
    grid-area:stats;display:inline-flex;align-items:center;gap:6px;
    font-size:12.5px;font-weight:600;
  }
  table.data.responsive td[data-label="Weight"]{
    grid-area:stats;justify-self:start;
  }
  table.data.responsive td[data-label="Weight"]::before{
    content:"Weight";font-size:11px;font-weight:600;letter-spacing:.02em;
    text-transform:none;color:var(--ei-muted);display:inline;
  }
  table.data.responsive td[data-label="Gain / loss"]{
    justify-self:end;grid-column:2;grid-row:3;
  }
  table.data.responsive td[data-label="Gain / loss"] .gl{font-size:12.5px}

  /* subtotal → slim divider line, not a card */
  table.data.responsive tbody tr.subtotal{
    display:flex;align-items:center;justify-content:space-between;
    background:none;border:0;padding:4px 4px 2px;margin-top:-2px;
  }
  table.data.responsive tbody tr.subtotal td{
    display:none;height:auto;padding:0;border:0;
  }
  table.data.responsive tbody tr.subtotal td[data-label="Subtotal"]{
    display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ei-muted);
  }
  table.data.responsive tbody tr.subtotal td.num:nth-of-type(3){
    display:block;font-size:13px;font-weight:700;color:var(--ei-ink);
  }
  table.data.responsive tbody tr.subtotal td::before{content:none}

  /* pillars overview → one column of full-width tiles */
  .pillar-card{grid-column:span 12}

  /* activity tools: chips wrap, controls drop to their own line */
  .act-tools{gap:10px}
  .act-tools .chips{flex:1 1 100%}
  .act-tools .act-tools__right{margin-left:0;width:100%}
  .act-tools .select-wrap,.act-tools .select-wrap select{flex:1 1 auto}

  /* month divider sits flush with the card list gutter */
  table.act-table.responsive tbody tr.act-month{display:block;margin:6px 2px 2px}
  table.act-table.responsive tbody tr.act-month:first-child{margin-top:0}
  table.act-table.responsive tbody tr.act-month th{
    display:block;background:none;border:0;padding:0;position:static;
  }

  /* ---------------------------------------------------------------
     Activity ledger → native card list (same pattern as holdings)
     Columns: Date · Description · Pillar · Type · Amount
     --------------------------------------------------------------- */
  table.act-table.responsive tbody tr.act-row{
    grid-template-areas:
      "desc desc"
      "meta amount";
  }
  table.act-table.responsive td[data-label="Date"]{display:none}
  table.act-table.responsive td[data-label="Description"]{grid-area:desc}
  .act-table.responsive td[data-label="Description"] .cell-strong{font-size:15px;line-height:1.3}
  .act-table.responsive td[data-label="Description"] .cell-meta{font-size:12.5px;margin-top:2px}
  /* meta line: pillar + type chips inline */
  table.act-table.responsive td[data-label="Pillar"],
  table.act-table.responsive td[data-label="Type"]{
    grid-area:meta;display:inline-flex;align-items:center;
  }
  table.act-table.responsive td[data-label="Pillar"]{margin-right:8px}
  table.act-table.responsive td[data-label="Amount"]{
    grid-area:amount;text-align:right;justify-self:end;
  }
  table.act-table.responsive td[data-label="Amount"] .amt{justify-content:flex-end;font-size:15px}
}

/* =====================================================================
   15. Native mobile bottom tab bar (injected by app.js, <=768px)
   ===================================================================== */
.tabbar{display:none}
.has-tabbar .page{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
@media (max-width:768px){
  .tabbar{
    display:grid;grid-template-columns:repeat(4,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:65;
    background:rgba(251,250,245,.94);
    backdrop-filter:saturate(150%) blur(12px);
    border-top:1px solid var(--ei-border-warm);
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -6px 20px -16px rgba(12,47,37,.4);
  }
  .tabbar__tab{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:56px;padding:8px 4px;
    font-size:10.5px;font-weight:600;letter-spacing:.01em;color:var(--ei-muted);
    transition:color var(--dur) var(--ease-out);
  }
  .tabbar__tab svg{width:22px;height:22px;color:var(--ei-muted);transition:color var(--dur)}
  .tabbar__tab:active{background:var(--ei-paper-2)}
  .tabbar__tab.is-active{color:var(--ei-ink)}
  .tabbar__tab.is-active svg{color:var(--ei-green-500)}
  .tabbar__tab.is-active span{position:relative}
}
@media (max-width:400px){
  .login__stats{gap:26px}
  .mfa-boxes{gap:7px}
}

/* 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;
  }
}