/* ═══════════════════════════════════════════════════════════════════════
   LAKKAM PLATFORM — design system
   Taken from the Private Credit app: navy #1a1f2e, gold #c5a55a, 3px gold
   rules, white sidebar, navy table headers. Applied across all three
   modules. Light only. No CDN — every byte is served from this folder.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── fonts, self-hosted ──
   Atkinson Hyperlegible is the default because it was commissioned by the
   Braille Institute to separate the characters that collide at small size
   or with reduced acuity: I / l / 1, O / 0, b d p q. On a screen of tickers
   and figures that is the whole problem.

   Dubai and Aptos stay first in each stack, so Surya's own Windows machines
   render them locally. They are Microsoft-licensed and cannot legally be
   served from a public host, which is why there is a fallback at all. */
@font-face{font-family:'Atkinson Hyperlegible';font-weight:400;font-style:normal;
  font-display:swap;src:url('fonts/atkinson-hyperlegible-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Atkinson Hyperlegible';font-weight:700;font-style:normal;
  font-display:swap;src:url('fonts/atkinson-hyperlegible-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Source Sans 3';font-weight:400;font-style:normal;
  font-display:swap;src:url('fonts/source-sans-3-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Source Sans 3';font-weight:500;font-style:normal;
  font-display:swap;src:url('fonts/source-sans-3-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Source Sans 3';font-weight:600;font-style:normal;
  font-display:swap;src:url('fonts/source-sans-3-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-weight:400;font-style:normal;
  font-display:swap;src:url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-style:normal;
  font-display:swap;src:url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-weight:600;font-style:normal;
  font-display:swap;src:url('fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2');}

:root{
  --navy:#1a1f2e;
  --navy-2:#232a3d;
  --navy-3:#2e374d;
  --gold:#c5a55a;
  --gold-2:#b3944c;
  --gold-soft:#e8dcc0;
  --gold-tint:#faf7ef;

  --green:#2d8a4e;   --green-soft:#e7f3ea;
  --red:#c44536;     --red-soft:#fbeceb;
  --amber:#b07d2b;   --amber-soft:#fbf3e3;
  --blue:#2f5d9e;    --blue-soft:#e9f0f9;

  --bg:#f5f6f8;
  --card:#ffffff;
  --ink:#23262e;
  --ink-2:#4d5461;
  --muted:#6b7280;
  --line:#e3e5ea;
  --line-2:#eef0f3;

  --radius:8px;
  --radius-sm:6px;
  --shadow:0 1px 2px rgba(26,31,46,.05),0 4px 14px rgba(26,31,46,.05);
  --shadow-lift:0 2px 6px rgba(26,31,46,.08),0 12px 30px rgba(26,31,46,.10);

  /* Option 1 — Legibility. Overridden per user by the switcher. */
  --font-body:'Dubai','Aptos','Atkinson Hyperlegible','Segoe UI',system-ui,sans-serif;
  --font-head:'Dubai','Aptos','Atkinson Hyperlegible','Segoe UI',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',Consolas,'SF Mono',monospace;

  /* 15px, not 13.5px: legibility brief. Nothing anywhere goes below 12px. */
  --fs-body:15px;
  --topnav-h:58px;
  --rail-w:232px;
}
html[data-font="classic"]{
  --font-body:'Dubai','Aptos','Source Sans 3','Segoe UI',system-ui,sans-serif;
  --font-head:'Dubai','Aptos','Source Sans 3','Segoe UI',system-ui,sans-serif;
}
html[data-font="editorial"]{
  --font-body:'Dubai','Aptos','Source Sans 3','Segoe UI',system-ui,sans-serif;
  --font-head:Georgia,'Times New Roman',serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{font-family:var(--font-body);font-size:var(--fs-body);line-height:1.55;
  color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{margin:0;font-family:var(--font-head);font-weight:600;
  letter-spacing:-.01em;color:var(--navy);}
a{color:var(--blue);}
table{border-collapse:collapse;width:100%;}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:3px;}

/* Every figure is mono with tabular numerals, so columns align on the
   decimal. Non-negotiable in a financial product. */
.n,.num,td.num,.mono{font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum";}

/* ── topnav: navy with the 3px gold rule, the platform's signature ── */
.topnav{height:var(--topnav-h);background:var(--navy);
  border-bottom:3px solid var(--gold);display:flex;align-items:center;
  padding:0 22px;gap:24px;position:sticky;top:0;z-index:100;}
.brand{display:flex;flex-direction:column;justify-content:center;
  text-decoration:none;line-height:1.15;}
.brand-mark{font-family:var(--font-head);font-size:17px;font-weight:700;
  color:#fff;letter-spacing:.06em;}
.brand-mark em{font-style:normal;color:var(--gold);font-weight:600;}
.brand-sub{font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;
  color:#8a92a3;margin-top:1px;}
.topnav-links{display:flex;gap:2px;margin-left:12px;}
.topnav-links a{color:#b4bcc9;text-decoration:none;font-size:14px;
  padding:8px 13px;border-radius:var(--radius-sm);}
.topnav-links a:hover{color:#fff;background:var(--navy-2);}
.topnav-links a.on{color:var(--navy);background:var(--gold);font-weight:600;}
.topnav-right{margin-left:auto;display:flex;align-items:center;gap:14px;
  font-size:13px;color:#8a92a3;}
.topnav-right .who{color:#d6dbe3;}
.topnav-right a{color:#8a92a3;text-decoration:none;}
.topnav-right a:hover{color:var(--gold);}
.rail-toggle{display:none;background:none;border:0;color:#b4bcc9;
  font-size:22px;line-height:1;cursor:pointer;padding:4px 8px;}

/* ── shell ── */
.shell{display:flex;min-height:calc(100vh - var(--topnav-h));}
.rail{width:var(--rail-w);flex:0 0 var(--rail-w);background:var(--card);
  border-right:1px solid var(--line);padding:16px 0 28px;}
.rail-label{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);padding:16px 20px 7px;font-weight:600;}
.rail a{display:flex;align-items:center;gap:10px;padding:10px 20px;
  color:var(--ink-2);text-decoration:none;font-size:14.5px;
  border-left:3px solid transparent;min-height:44px;}
.rail a:hover{background:var(--line-2);color:var(--navy);}
.rail a.on{background:var(--gold-tint);border-left-color:var(--gold);
  color:var(--navy);font-weight:600;}
.rail a .ic{color:var(--gold);width:18px;text-align:center;font-size:15px;}
.main{flex:1;min-width:0;padding:24px 26px 70px;}

/* ── page head ── */
.phead{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;
  margin-bottom:20px;}
.phead h1{font-size:26px;}
.eyebrow{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-2);font-weight:600;margin-bottom:5px;}
.phead .meta{font-family:var(--font-mono);font-size:12.5px;color:var(--muted);
  display:flex;gap:16px;flex-wrap:wrap;margin-top:7px;}
.spacer{flex:1;}

/* ── cards and KPIs ── */
.card{background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:16px;}
.card-h{padding:15px 18px 12px;border-bottom:1px solid var(--line-2);
  display:flex;align-items:baseline;gap:10px;}
.card-h h3{font-size:15px;}
.card-h .sub{font-family:var(--font-mono);font-size:12px;color:var(--muted);}
.card-h .rt{margin-left:auto;font-size:13px;}
.card-b{padding:16px 18px;}
.card-b.flush{padding:0;overflow-x:auto;}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:14px;margin-bottom:18px;}
.kpi{background:var(--card);border:1px solid var(--line);
  border-top:3px solid var(--gold);border-radius:var(--radius);
  padding:15px 17px 17px;box-shadow:var(--shadow);}
.kpi .k{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-weight:600;}
.kpi .v{font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:27px;font-weight:600;color:var(--navy);letter-spacing:-.02em;
  margin-top:8px;line-height:1.1;}
.kpi .d{font-size:13px;color:var(--ink-2);margin-top:6px;}

/* ── tables: navy header, zebra, gold rule above totals ── */
table.d{font-size:14px;}
table.d thead th{background:var(--navy);color:#fff;font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;font-weight:600;
  text-align:left;padding:10px 11px;white-space:nowrap;}
table.d thead th.r{text-align:right;}
table.d tbody td{padding:9px 11px;border-bottom:1px solid var(--line-2);}
table.d tbody tr:nth-child(even) td{background:#fafbfc;}
table.d tbody tr:hover td{background:var(--gold-tint);}
table.d td.r{text-align:right;}
table.d tr.tot td{border-top:2px solid var(--gold);font-weight:700;
  background:#fff!important;}
.tick{font-family:var(--font-mono);font-weight:600;}
.sec{color:var(--muted);font-size:13px;}
.up{color:var(--green);} .dn{color:var(--red);}

/* ── badges, buttons ── */
.badge{display:inline-block;font-size:11px;font-weight:600;padding:3px 9px;
  border-radius:20px;letter-spacing:.04em;background:var(--line-2);
  color:var(--ink-2);white-space:nowrap;}
.badge.g{background:var(--green-soft);color:var(--green);}
.badge.r{background:var(--red-soft);color:var(--red);}
.badge.a{background:var(--amber-soft);color:var(--amber);}
.badge.b{background:var(--blue-soft);color:var(--blue);}
.badge.gold{background:var(--gold-soft);color:#6d5620;}

.btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-body);
  font-size:14px;font-weight:600;padding:9px 15px;border-radius:var(--radius-sm);
  border:1px solid var(--navy);background:var(--navy);color:#fff;cursor:pointer;
  text-decoration:none;min-height:42px;line-height:1.2;}
.btn:hover{background:var(--navy-2);color:#fff;}
.btn.gold{background:var(--gold);border-color:var(--gold);color:var(--navy);}
.btn.gold:hover{background:var(--gold-2);}
.btn.ghost{background:#fff;color:var(--navy);border-color:var(--line);}
.btn.ghost:hover{background:var(--line-2);}
.btn.sm{font-size:13px;padding:6px 11px;min-height:34px;}
.btn:disabled{opacity:.5;cursor:not-allowed;}

/* ── forms ── */
label.f{display:block;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:5px;}
.inp,select.inp,textarea.inp{display:block;width:100%;font-family:var(--font-body);
  font-size:15px;padding:11px 12px;border:1px solid var(--line);
  border-radius:var(--radius-sm);background:#fff;color:var(--ink);
  outline:none;min-height:44px;}
.inp:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft);}
.row{display:flex;gap:14px;flex-wrap:wrap;}
.row > *{flex:1;min-width:180px;}

/* ── notices ── */
.note{padding:12px 15px;border-radius:var(--radius);font-size:14px;
  border:1px solid var(--line);background:#fff;margin-bottom:16px;
  display:flex;gap:11px;align-items:flex-start;}
.note.ok{background:var(--green-soft);border-color:#bfdfc8;color:#1c5c33;}
.note.bad{background:var(--red-soft);border-color:#eec6c2;color:#8a2f24;}
.note.warn{background:var(--amber-soft);border-color:#eeddb8;color:#6d5620;}
.note.info{background:var(--blue-soft);border-color:#c8d9ef;color:#24476f;}

.empty{text-align:center;padding:52px 22px;color:var(--muted);}
.empty h3{color:var(--ink-2);font-size:17px;margin-bottom:7px;}

/* ── provenance: the figure the platform calculated, not read ──
   Carried over from the earlier build, retokenised to amber. Given this is
   a filings-driven product, knowing which numbers are derived is the most
   valuable thing the interface can tell you. */
.prov{border-bottom:1px dotted var(--amber);cursor:help;}
.prov::after{content:"\25E6";font-family:var(--font-mono);font-size:.62em;
  vertical-align:.45em;color:var(--amber);margin-left:2px;}
.provkey{font-family:var(--font-mono);font-size:12px;color:var(--muted);}
.provkey i{font-style:normal;border-bottom:1px dotted var(--amber);}

/* ── bars ── */
.bar{height:7px;background:var(--line-2);border-radius:20px;overflow:hidden;}
.bar i{display:block;height:100%;border-radius:20px;background:var(--gold);}
.barrow{display:flex;align-items:center;gap:12px;padding:8px 0;
  border-bottom:1px solid var(--line-2);}
.barrow:last-child{border-bottom:0;}
.barrow .nm{flex:1;font-size:14px;min-width:0;}
.barrow .nm em{font-style:normal;font-family:var(--font-mono);font-size:11px;
  color:var(--muted);margin-right:8px;}
.barrow .bar{width:110px;flex:0 0 110px;}
.barrow .pt{font-family:var(--font-mono);font-size:13.5px;width:46px;
  text-align:right;font-variant-numeric:tabular-nums;}

/* ── login ── */
.login-wrap{min-height:100vh;display:grid;place-items:center;
  background:var(--navy);padding:22px;}
.login-card{background:#fff;border-radius:12px;border-top:4px solid var(--gold);
  padding:38px 34px;width:100%;max-width:400px;
  box-shadow:0 24px 60px rgba(0,0,0,.42);}
.login-card .brand-mark{color:var(--navy);font-size:24px;text-align:center;
  display:block;}
.login-card .brand-sub{text-align:center;color:var(--muted);margin-bottom:26px;}

/* ── module launcher ── */
.mods{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:16px;max-width:1000px;}
.mod{display:block;background:#fff;border:1px solid var(--line);
  border-top:3px solid var(--gold);border-radius:var(--radius);padding:24px;
  text-decoration:none;color:var(--ink);box-shadow:var(--shadow);
  transition:transform .16s,box-shadow .16s;}
.mod:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);}
.mod h2{font-size:18px;margin-bottom:8px;}
.mod p{margin:0;font-size:14px;color:var(--ink-2);line-height:1.6;}
.mod .st{font-family:var(--font-mono);font-size:12.5px;color:var(--muted);
  margin-top:14px;display:block;}
.mod.off{opacity:.55;pointer-events:none;border-top-color:var(--line);}

/* ── the permission grid ── */
table.grid td,table.grid th{padding:9px 11px;border-bottom:1px solid var(--line-2);}
table.grid select{font-size:14px;padding:7px 9px;border:1px solid var(--line);
  border-radius:var(--radius-sm);min-height:38px;background:#fff;}

/* ══════════════ MOBILE — designed, not merely reflowed ══════════════ */
@media (max-width:860px){
  .rail{position:fixed;top:var(--topnav-h);left:calc(-1 * var(--rail-w));
    height:calc(100vh - var(--topnav-h));z-index:90;transition:left .2s;
    overflow-y:auto;box-shadow:6px 0 24px rgba(0,0,0,.16);}
  .rail.open{left:0;}
  .rail-toggle{display:block;}
  .topnav-links{display:none;}
  .topnav-right .who{display:none;}
  .main{padding:18px 15px 60px;}
  .kpis{grid-template-columns:1fr;}
  .kpi .v{font-size:29px;}
  .phead h1{font-size:22px;}

  /* A 40-column ratio table cannot be scrolled sideways on a phone and
     remain usable, so wide tables become one card per row with the column
     name beside each value. The label comes from data-l on each cell. */
  table.stack thead{display:none;}
  table.stack,table.stack tbody,table.stack tr,table.stack td{display:block;
    width:100%;}
  table.stack tr{background:#fff;border:1px solid var(--line);
    border-radius:var(--radius);margin-bottom:11px;padding:6px 0;
    box-shadow:var(--shadow);}
  table.stack tbody tr:nth-child(even) td{background:transparent;}
  table.stack td{display:flex;justify-content:space-between;gap:14px;
    text-align:right;border:0;border-bottom:1px solid var(--line-2);
    padding:9px 14px;}
  table.stack tr td:last-child{border-bottom:0;}
  table.stack td::before{content:attr(data-l);font-size:11px;
    letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
    font-weight:600;text-align:left;flex:0 0 42%;}
  table.stack td:empty{display:none;}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;}}
@media print{
  .topnav,.rail,.btn,.rail-toggle,.no-print{display:none!important;}
  body{background:#fff;}
  .main{padding:0;}
  .card,.kpi{box-shadow:none;border:1px solid #ccc;break-inside:avoid;}
}