/* ==========================================================================
   TREASURY-AI — MSME Risk & Financial Inclusion Analytics Platform
   Design language: development-treasury ledger. Deep ink navy, brass seal
   accents, verdigris data-ink, tabular mono figures. Not affiliated with
   or representing official World Bank Group branding.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* -- color tokens -- */
  --ink-950:#0A1922;
  --ink-900:#0F212B;
  --ink-800:#152C38;
  --ink-700:#1D3B49;
  --hairline: rgba(237,231,217,0.13);
  --hairline-strong: rgba(237,231,217,0.24);
  --paper:#EDE7D9;
  --paper-dim:#9FB2BA;
  --paper-faint:#6C818A;
  --brass:#C39A4B;
  --brass-bright:#E3BC70;
  --brass-dim: rgba(195,154,75,0.18);
  --verdigris:#4A9089;
  --verdigris-bright:#6BB3AB;
  --brick:#BD5347;
  --brick-bright:#D97C6F;
  --moss:#6F9760;
  --moss-bright:#8CB97C;

  /* -- type tokens -- */
  --font-display:'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:'IBM Plex Mono', 'SF Mono', Consolas, monospace;

  /* -- layout tokens -- */
  --content-w: 1240px;
  --radius-sm: 3px;
  --radius-md: 5px;
  --ticker-h: 34px;
  --nav-h: 66px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  background:var(--ink-950);
  color:var(--paper);
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font-family:inherit; }

::selection{ background:var(--brass-dim); color:var(--paper); }

/* subtle vertical ledger-line texture behind everything */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  z-index:0;
  background-image: repeating-linear-gradient(90deg, rgba(237,231,217,0.018) 0px, rgba(237,231,217,0.018) 1px, transparent 1px, transparent 120px);
  opacity:0.6;
}

.container{
  max-width:var(--content-w);
  margin:0 auto;
  padding:0 32px;
}

/* ==========================================================================
   TICKER — signature scrolling strip of live-simulated treasury metrics
   ========================================================================== */
.ticker{
  position:sticky; top:0; z-index:40;
  height:var(--ticker-h);
  background:#08141B;
  border-bottom:1px solid var(--hairline);
  overflow:hidden;
  display:flex;
  align-items:center;
}
.ticker__track{
  display:flex;
  align-items:center;
  white-space:nowrap;
  animation: ticker-scroll 38s linear infinite;
  will-change:transform;
}
.ticker.is-paused .ticker__track{ animation-play-state:paused; }
@keyframes ticker-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.ticker__item{
  font-family:var(--font-mono);
  font-size:11.5px;
  letter-spacing:0.02em;
  color:var(--paper-dim);
  padding:0 22px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border-right:1px solid var(--hairline);
}
.ticker__item b{ color:var(--paper); font-weight:600; }
.ticker__item .up{ color:var(--moss-bright); }
.ticker__item .down{ color:var(--brick-bright); }
.ticker__tag{
  font-size:9.5px; letter-spacing:0.14em; color:var(--brass);
  border:1px solid var(--brass-dim); padding:1px 5px; border-radius:2px;
}

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:sticky; top:var(--ticker-h); z-index:39;
  height:var(--nav-h);
  background:rgba(10,25,34,0.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hairline);
  display:flex; align-items:center;
}
.nav .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; width:100%; }
.nav__brand{ display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
.nav__mark{
  width:30px; height:30px; border-radius:50%;
  border:1px solid var(--brass);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:13px; color:var(--brass);
  flex-shrink:0;
}
.nav__brand-text{ font-family:var(--font-display); font-size:18px; letter-spacing:0.01em; color:var(--paper); }
.nav__brand-text em{ font-style:normal; color:var(--brass); }

.nav__tabs{ display:flex; align-items:stretch; gap:2px; overflow-x:auto; scrollbar-width:none; }
.nav__tabs::-webkit-scrollbar{ display:none; }
.nav__tab{
  background:none; border:none; cursor:pointer;
  display:flex; align-items:center; gap:8px;
  padding:0 14px; height:var(--nav-h);
  color:var(--paper-dim);
  font-family:var(--font-body); font-size:12.5px; font-weight:500;
  letter-spacing:0.02em;
  white-space:nowrap;
  border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.nav__tab:hover{ color:var(--paper); }
.nav__tab.is-active{ color:var(--brass-bright); border-bottom-color:var(--brass); }
.nav__tab-idx{ font-family:var(--font-mono); font-size:10.5px; color:var(--paper-faint); }
.nav__tab.is-active .nav__tab-idx{ color:var(--brass); }

/* ==========================================================================
   VIEWS / SECTIONS
   ========================================================================== */
.view{ display:none; position:relative; z-index:1; }
.view.is-active{ display:block; animation: view-in .35s ease both; }
@keyframes view-in{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:translateY(0);} }

/* ---------- OVERVIEW / HERO ---------- */
.hero{ padding:88px 0 56px; border-bottom:1px solid var(--hairline); }
.hero__grid{ display:grid; grid-template-columns:auto 1fr; gap:40px; align-items:start; }
.seal{
  width:104px; height:104px; border-radius:50%;
  border:1.5px solid var(--brass);
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  transform:rotate(-8deg);
  flex-shrink:0;
  position:relative;
}
.seal::before{
  content:""; position:absolute; inset:6px; border-radius:50%;
  border:1px dashed var(--brass-dim);
}
.seal__text{ font-family:var(--font-mono); font-size:8px; letter-spacing:0.12em; color:var(--brass); line-height:1.5; }
.seal--sm{ width:64px; height:64px; }
.seal--sm .seal__text{ font-size:6.5px; }

.eyebrow{
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--verdigris-bright); margin:0 0 14px;
}
.hero h1{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(34px, 4.6vw, 54px);
  line-height:1.08; letter-spacing:-0.01em;
  margin:0 0 20px; color:var(--paper);
  max-width:16ch;
}
.hero h1 em{ font-style:italic; color:var(--brass-bright); }
.hero p.lede{
  font-size:16.5px; color:var(--paper-dim); max-width:62ch; margin:0 0 28px; line-height:1.65;
}
.hero__ctas{ display:flex; gap:12px; flex-wrap:wrap; }

.btn{
  font-family:var(--font-body); font-size:13px; font-weight:600; letter-spacing:0.01em;
  padding:12px 22px; border-radius:var(--radius-sm); cursor:pointer;
  border:1px solid transparent; transition:all .15s ease;
  display:inline-flex; align-items:center; gap:8px;
}
.btn--brass{ background:var(--brass); color:#0A1922; }
.btn--brass:hover{ background:var(--brass-bright); }
.btn--ghost{ background:transparent; border-color:var(--hairline-strong); color:var(--paper); }
.btn--ghost:hover{ border-color:var(--brass); color:var(--brass-bright); }
.btn--full{ width:100%; justify-content:center; }
.btn--sm{ padding:9px 16px; font-size:12px; }

.divider-label{
  display:flex; align-items:center; gap:14px; margin:64px 0 28px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:0.14em; color:var(--paper-faint); text-transform:uppercase;
}
.divider-label::after{ content:""; height:1px; flex:1; background:var(--hairline); }

/* dossier module preview grid */
.dossier-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--hairline); border:1px solid var(--hairline); }
.dossier{
  background:var(--ink-950); padding:26px 22px; cursor:pointer; text-align:left;
  border:none; color:inherit; display:flex; flex-direction:column; gap:14px; min-height:220px;
  transition:background .15s ease;
}
.dossier:hover{ background:var(--ink-900); }
.dossier__idx{ font-family:var(--font-mono); font-size:12px; color:var(--brass); letter-spacing:0.08em; }
.dossier__title{ font-family:var(--font-display); font-size:19px; color:var(--paper); line-height:1.25; }
.dossier__desc{ font-size:12.5px; color:var(--paper-dim); line-height:1.55; flex:1; }
.dossier__method{ font-family:var(--font-mono); font-size:10.5px; color:var(--paper-faint); border-top:1px solid var(--hairline); padding-top:12px; }
.dossier__go{ font-family:var(--font-mono); font-size:11px; color:var(--verdigris-bright); }

.rotation-note{
  margin-top:20px; font-size:12.5px; color:var(--paper-faint); font-family:var(--font-mono);
  display:flex; gap:10px; align-items:baseline;
}

/* ---------- MODULE PAGE HEADER ---------- */
.module-head{ padding:52px 0 30px; border-bottom:1px solid var(--hairline); }
.module-head__idx{ font-family:var(--font-mono); font-size:12px; letter-spacing:0.14em; color:var(--brass); margin-bottom:10px; }
.module-head h2{ font-family:var(--font-display); font-size:clamp(26px,3.2vw,36px); font-weight:500; margin:0 0 10px; color:var(--paper); }
.module-head__method{ font-family:var(--font-mono); font-size:12px; color:var(--verdigris-bright); }
.module-head p{ color:var(--paper-dim); max-width:70ch; margin:14px 0 0; font-size:14px; }

.module-body{ padding:36px 0 100px; }
.module-grid{ display:grid; grid-template-columns:340px 1fr; gap:1px; background:var(--hairline); border:1px solid var(--hairline); align-items:stretch; }

/* ---------- PANELS ---------- */
.panel{ background:var(--ink-950); padding:26px 26px 30px; }
.panel__title{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--paper-faint); margin:0 0 20px; display:flex; align-items:center; gap:10px; }
.panel__title::after{ content:""; height:1px; flex:1; background:var(--hairline); }

.field{ margin-bottom:18px; }
.field label{ display:flex; justify-content:space-between; align-items:baseline; font-size:12px; color:var(--paper-dim); margin-bottom:7px; }
.field label span.val{ font-family:var(--font-mono); color:var(--brass-bright); font-size:12.5px; }
.field input[type="range"]{
  width:100%; -webkit-appearance:none; appearance:none; height:2px; background:var(--hairline-strong); border-radius:2px; outline:none;
}
.field input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:13px; height:13px; border-radius:50%;
  background:var(--brass); cursor:pointer; border:2px solid var(--ink-950); box-shadow:0 0 0 1px var(--brass);
}
.field input[type="range"]::-moz-range-thumb{
  width:13px; height:13px; border-radius:50%; background:var(--brass); cursor:pointer; border:2px solid var(--ink-950); box-shadow:0 0 0 1px var(--brass);
}
.field input[type="number"], .field input[type="text"], .field select{
  width:100%; background:var(--ink-800); border:1px solid var(--hairline-strong); color:var(--paper);
  font-family:var(--font-mono); font-size:13px; padding:9px 10px; border-radius:var(--radius-sm);
  outline:none; transition:border-color .15s ease;
}
.field input[type="number"]:focus, .field input[type="text"]:focus, .field select:focus{ border-color:var(--brass); }
.field select{ appearance:none; background-image:linear-gradient(45deg, transparent 50%, var(--paper-dim) 50%), linear-gradient(135deg, var(--paper-dim) 50%, transparent 50%); background-position:calc(100% - 16px) center, calc(100% - 11px) center; background-size:5px 5px, 5px 5px; background-repeat:no-repeat; }
.field__hint{ font-size:10.5px; color:var(--paper-faint); margin-top:5px; line-height:1.4; }

.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* ---------- RESULTS PANEL ---------- */
.results{ background:var(--ink-950); padding:26px 30px 34px; display:flex; flex-direction:column; gap:26px; }
.kpi-row{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:1px; background:var(--hairline); border:1px solid var(--hairline); }
.kpi{ background:var(--ink-950); padding:16px 16px 14px; }
.kpi__label{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.09em; text-transform:uppercase; color:var(--paper-faint); margin-bottom:8px; }
.kpi__value{ font-family:var(--font-mono); font-size:22px; font-weight:600; color:var(--paper); letter-spacing:-0.01em; }
.kpi__value.brass{ color:var(--brass-bright); }
.kpi__value.verdigris{ color:var(--verdigris-bright); }
.kpi__value.brick{ color:var(--brick-bright); }
.kpi__value.moss{ color:var(--moss-bright); }
.kpi__sub{ font-family:var(--font-mono); font-size:10.5px; color:var(--paper-faint); margin-top:4px; }

.chart-block{ border:1px solid var(--hairline); padding:20px 20px 12px; border-radius:var(--radius-md); background:var(--ink-900); }
.chart-block__title{ font-size:12.5px; color:var(--paper-dim); margin:0 0 14px; display:flex; justify-content:space-between; align-items:center; }
.chart-block__title .legend-note{ font-family:var(--font-mono); font-size:10px; color:var(--paper-faint); }
.chart-canvas-wrap{ position:relative; height:260px; }
.chart-canvas-wrap.tall{ height:320px; }

.two-col-charts{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:900px){ .two-col-charts{ grid-template-columns:1fr; } }

.stamp-note{
  display:flex; align-items:center; gap:14px;
  border:1px dashed var(--brass-dim); border-radius:var(--radius-md);
  padding:12px 16px; margin-top:4px;
}
.stamp-note p{ margin:0; font-size:11.5px; color:var(--paper-faint); line-height:1.5; }
.stamp-note p b{ color:var(--brass); font-weight:600; }

/* data table */
.data-table-wrap{ overflow-x:auto; border:1px solid var(--hairline); border-radius:var(--radius-md); }
table.data-table{ width:100%; border-collapse:collapse; font-size:12.5px; }
table.data-table thead th{
  text-align:left; font-family:var(--font-mono); font-size:10px; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--paper-faint); padding:10px 14px; border-bottom:1px solid var(--hairline-strong); background:var(--ink-900);
  cursor:pointer; white-space:nowrap; user-select:none;
}
table.data-table thead th:hover{ color:var(--brass-bright); }
table.data-table tbody td{ padding:10px 14px; border-bottom:1px solid var(--hairline); font-family:var(--font-mono); color:var(--paper-dim); white-space:nowrap; }
table.data-table tbody tr:hover td{ background:var(--ink-900); color:var(--paper); }
table.data-table tbody td.tag{
  font-family:var(--font-body); display:inline-block; padding:2px 8px; border-radius:20px; font-size:10.5px;
  border:1px solid var(--hairline-strong);
}

.filter-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.filter-row select{ width:auto; min-width:170px; }

.add-bond-form{ display:grid; grid-template-columns:repeat(6,1fr); gap:10px; align-items:end; margin-top:18px; padding-top:18px; border-top:1px solid var(--hairline); }
.add-bond-form .field{ margin-bottom:0; }
@media (max-width:1100px){ .add-bond-form{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .add-bond-form{ grid-template-columns:repeat(2,1fr); } }

/* country picker chips (module 4) */
.chip-row{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  font-family:var(--font-mono); font-size:11px; padding:7px 12px; border-radius:20px;
  border:1px solid var(--hairline-strong); color:var(--paper-dim); cursor:pointer; background:transparent;
  transition:all .15s ease;
}
.chip:hover{ border-color:var(--brass); color:var(--paper); }
.chip.is-active{ border-color:var(--brass); background:var(--brass-dim); color:var(--brass-bright); }

/* ---------- FOOTER ---------- */
footer{ border-top:1px solid var(--hairline); padding:40px 0 60px; }
footer .container{ display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; }
footer .foot-brand{ font-family:var(--font-display); font-size:15px; color:var(--paper-dim); }
footer .foot-disclaimer{ max-width:640px; font-size:11.5px; color:var(--paper-faint); line-height:1.6; }
footer .foot-disclaimer b{ color:var(--paper-dim); }

/* ---------- RESPONSIVE ---------- */
@media (max-width:960px){
  .hero__grid{ grid-template-columns:1fr; }
  .seal{ transform:none; }
  .dossier-grid{ grid-template-columns:repeat(2,1fr); }
  .module-grid{ grid-template-columns:1fr; }
  .two-col-charts{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .container{ padding:0 18px; }
  .dossier-grid{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
  .nav__brand-text{ display:none; }
  .hero{ padding:56px 0 40px; }
}

/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline:2px solid var(--brass); outline-offset:2px;
}