/* ============================================================================
   AdaptFi — Design system & component library
   Eyekyam Risk Resolutions × auctusESG · Adaptation Finance Platform
   Refined institutional aesthetic: calm, dense, trustworthy, teal-signed.
   ========================================================================== */

/* ----- Tokens ----------------------------------------------------------- */
:root {
  /* Brand */
  --primary-accent: #2AADA8;
  --primary-deep:   #1A7070;
  --primary-light:  #47C4BE;
  --primary-wash:   #E8F6F5;
  --primary-wash-2: #D3EEEC;
  --ink:            #0E1C26;

  /* Neutrals */
  --n-0:  #ffffff;
  --n-50: #f7f9fa;
  --n-100:#eef2f4;
  --n-150:#e6ecef;
  --n-200:#dbe3e7;
  --n-300:#c2ced4;
  --n-400:#9aa9b1;
  --n-500:#6f7f88;
  --n-600:#53636c;
  --n-700:#3c4a52;
  --n-800:#27333a;
  --n-900:#16222a;

  /* Semantic */
  --ok:   #168A5C;  --ok-wash:  #e4f4ec;
  --warn: #B8790E;  --warn-wash:#fbf0db;
  --bad:  #B2283B;  --bad-wash: #fbe4e7;
  --info: #1A5F9E;  --info-wash:#e5eff7;

  /* Hazard chips */
  --hz-heat:  #ED7B2F;
  --hz-flood: #2D74C4;
  --hz-water: #C99A2E;
  --hz-storm: #7C5CD6;
  --hz-quake: #8A6F3C;
  --hz-fire:  #C0392B;

  /* Typography */
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-doc:'Source Serif 4', 'Source Serif Pro', Georgia, 'Times New Roman', serif;
  --font-mono:'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  /* Spacing (8pt) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;

  /* Radius / shadow / layout */
  --r-sm:6px; --r:8px; --r-lg:14px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(14,28,38,.06), 0 1px 1px rgba(14,28,38,.04);
  --sh-2:0 4px 14px rgba(14,28,38,.07), 0 1px 3px rgba(14,28,38,.05);
  --sh-3:0 18px 48px rgba(14,28,38,.16), 0 4px 12px rgba(14,28,38,.08);
  --ring:0 0 0 3px rgba(42,173,168,.30);
  --maxw:1320px;
  --pad:28px;
}

/* ----- Reset ------------------------------------------------------------ */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; font-family:var(--font-ui); font-size:14px; line-height:1.5;
  color:var(--ink); background:var(--n-50);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,p,ul,ol,figure { margin:0; }
ul,ol { padding:0; list-style:none; }
a { color:var(--primary-deep); text-decoration:none; }
a:hover { color:var(--primary-accent); }
button { font-family:inherit; cursor:pointer; }
img,svg { display:block; max-width:100%; }
table { border-collapse:collapse; width:100%; }
:focus-visible { outline:none; box-shadow:var(--ring); border-radius:var(--r-sm); }
::selection { background:var(--primary-wash-2); color:var(--ink); }

/* Scrollbar */
*::-webkit-scrollbar { width:10px; height:10px; }
*::-webkit-scrollbar-thumb { background:var(--n-300); border-radius:99px; border:2px solid var(--n-50); }
*::-webkit-scrollbar-thumb:hover { background:var(--n-400); }

/* ----- Typography helpers ---------------------------------------------- */
.h1 { font-size:26px; font-weight:700; letter-spacing:-.02em; line-height:1.2; }
.h2 { font-size:20px; font-weight:650; letter-spacing:-.01em; }
.h3 { font-size:16px; font-weight:650; }
.eyebrow { font-size:11px; font-weight:650; letter-spacing:.09em; text-transform:uppercase; color:var(--primary-deep); }
.meta { font-size:11.5px; color:var(--n-500); }
.muted { color:var(--n-500); }
.mono { font-family:var(--font-mono); font-size:.92em; }
.strong { font-weight:650; }
.center { text-align:center; }
.nowrap { white-space:nowrap; }

/* ----- App shell -------------------------------------------------------- */
.app { min-height:100vh; display:flex; flex-direction:column; }

.topbar {
  position:sticky; top:0; z-index:40;
  background:linear-gradient(180deg, #103e44 0%, #0c3236 100%);
  color:#eaf6f5; border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar-inner { max-width:var(--maxw); margin:0 auto; padding:0 var(--pad);
  height:60px; display:flex; align-items:center; gap:var(--s5); }
.brand { display:flex; align-items:center; gap:12px; color:#fff; }
.brand .mark {
  width:34px; height:34px; border-radius:9px; flex:none;
  display:grid; place-items:center; font-weight:800; font-size:16px; letter-spacing:-.04em;
  background:linear-gradient(135deg,var(--primary-light),var(--primary-deep));
  color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.brand .wm { font-size:18px; font-weight:750; letter-spacing:-.02em; line-height:1; }
.brand .desc { font-size:11px; color:#9fd4d0; letter-spacing:.02em; }
.topbar-spacer { flex:1; }
.cobrand { display:flex; align-items:center; gap:10px; padding-right:6px; }
.cobrand .colabel { font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:#7fb8b4; }
.cobrand .logochip { background:#fff; border-radius:6px; padding:4px 8px; display:flex; align-items:center; box-shadow:var(--sh-1); }
.cobrand .logochip img { height:18px; width:auto; display:block; }
.userbox { display:flex; align-items:center; gap:10px; padding:5px 6px 5px 12px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.10); }
.userbox .uname { font-size:12.5px; font-weight:600; line-height:1.1; }
.userbox .urole { font-size:10.5px; color:#9fd4d0; }
.userbox .uava { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--primary-light),var(--primary-deep));
  color:#fff; display:grid; place-items:center; font-size:12px; font-weight:700; }
.ghostlink { color:#bfe3e0; font-size:12px; display:inline-flex; gap:6px; align-items:center; }
.ghostlink:hover { color:#fff; }

/* Secondary nav */
.subnav { position:sticky; top:60px; z-index:30; background:var(--n-0); border-bottom:1px solid var(--n-200); }
.subnav-inner { max-width:var(--maxw); margin:0 auto; padding:0 var(--pad); display:flex; gap:2px; }
.navlink {
  position:relative; padding:13px 16px; font-size:13.5px; font-weight:550; color:var(--n-600);
  border-bottom:2px solid transparent; display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
}
.navlink:hover { color:var(--ink); background:var(--n-50); }
.navlink.active { color:var(--primary-deep); border-bottom-color:var(--primary-accent); }
.navlink .ic { width:16px; height:16px; opacity:.85; }
.navlink.admin { margin-left:auto; color:var(--n-500); }
.navlink.admin.active { color:var(--primary-deep); }

/* Breadcrumb */
.crumbs { max-width:var(--maxw); margin:0 auto; padding:11px var(--pad) 0;
  display:flex; align-items:center; gap:7px; font-size:12px; color:var(--n-500); flex-wrap:wrap; }
.crumbs a { color:var(--n-500); }
.crumbs a:hover { color:var(--primary-deep); }
.crumbs .sep { color:var(--n-300); }
.crumbs .cur { color:var(--ink); font-weight:550; }

/* Main */
.main { flex:1; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:var(--s5) var(--pad) var(--s8); }
.wrap.narrow { max-width:1040px; }

/* Footer */
.footer { border-top:1px solid var(--n-200); background:var(--n-0); }
.footer-inner { max-width:var(--maxw); margin:0 auto; padding:18px var(--pad);
  display:flex; align-items:center; gap:18px; flex-wrap:wrap; font-size:11.5px; color:var(--n-500); }
.footer .ver { font-family:var(--font-mono); font-size:11px; }
.footer .conf { margin-left:auto; display:inline-flex; align-items:center; gap:6px;
  color:var(--n-600); font-weight:550; }
.footer .conf .dot { width:7px; height:7px; border-radius:50%; background:var(--warn); }
.footer .fcobrand { display:flex; align-items:center; gap:10px; }
.footer .fcobrand img { height:20px; opacity:.7; }
.footer .fcobrand .div { width:1px; height:18px; background:var(--n-200); }

/* ----- Page head -------------------------------------------------------- */
.pagehead { display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s4);
  margin-bottom:var(--s5); flex-wrap:wrap; }
.pagehead .lead { max-width:62ch; }
.pagehead h1 { margin-top:6px; }
.pagehead p.sub { color:var(--n-600); margin-top:6px; font-size:13.5px; }
.head-actions { display:flex; gap:10px; flex-wrap:wrap; }

/* ----- Buttons ---------------------------------------------------------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 15px; border-radius:var(--r); font-size:13px; font-weight:600;
  border:1px solid var(--n-200); background:var(--n-0); color:var(--ink);
  transition:.15s ease; white-space:nowrap; }
.btn:hover { border-color:var(--n-300); background:var(--n-50); box-shadow:var(--sh-1); }
.btn .ic { width:16px; height:16px; }
.btn-primary { background:linear-gradient(180deg,var(--primary-accent),var(--primary-deep));
  color:#fff; border-color:transparent; box-shadow:0 1px 2px rgba(26,112,112,.4); }
.btn-primary:hover { background:linear-gradient(180deg,#34bcb6,#176262); color:#fff; box-shadow:var(--sh-2); }
.btn-ghost { background:transparent; border-color:transparent; color:var(--primary-deep); }
.btn-ghost:hover { background:var(--primary-wash); border-color:transparent; }
.btn-danger { color:var(--bad); border-color:#eccfd3; background:var(--bad-wash); }
.btn-danger:hover { background:#f7d6da; border-color:#e0b2b8; }
.btn-sm { padding:6px 11px; font-size:12px; }
.btn-lg { padding:12px 22px; font-size:14px; }
.btn-block { width:100%; }
.btn[disabled] { opacity:.5; pointer-events:none; }
.iconbtn { width:34px; height:34px; padding:0; border-radius:var(--r); display:grid; place-items:center;
  border:1px solid var(--n-200); background:var(--n-0); color:var(--n-600); }
.iconbtn:hover { background:var(--n-50); color:var(--ink); }

/* ----- Cards ------------------------------------------------------------ */
.card { background:var(--n-0); border:1px solid var(--n-200); border-radius:var(--r-lg);
  box-shadow:var(--sh-1); }
.card.pad { padding:var(--s5); }
.card-head { padding:16px 20px; border-bottom:1px solid var(--n-150); display:flex; align-items:center;
  justify-content:space-between; gap:12px; }
.card-head h3 { font-size:14.5px; font-weight:650; }
.card-head .sub { font-size:11.5px; color:var(--n-500); margin-top:2px; }
.card-body { padding:20px; }
.card-foot { padding:13px 20px; border-top:1px solid var(--n-150); display:flex; align-items:center;
  gap:12px; font-size:12px; color:var(--n-500); }
.hoverable { transition:.18s ease; cursor:pointer; }
.hoverable:hover { border-color:var(--primary-light); box-shadow:var(--sh-2); transform:translateY(-2px); }

/* ----- Grid utilities --------------------------------------------------- */
.grid { display:grid; gap:var(--s4); }
.cols-2 { grid-template-columns:repeat(2,1fr); }
.cols-3 { grid-template-columns:repeat(3,1fr); }
.cols-4 { grid-template-columns:repeat(4,1fr); }
.layout-rail { display:grid; grid-template-columns:1fr 320px; gap:var(--s5); align-items:start; }
.layout-rail-l { display:grid; grid-template-columns:260px 1fr; gap:var(--s5); align-items:start; }
.stack { display:flex; flex-direction:column; gap:var(--s4); }
.row { display:flex; gap:var(--s3); align-items:center; }
.between { justify-content:space-between; }
.wrapf { flex-wrap:wrap; }

/* ----- Stat ------------------------------------------------------------- */
.stat { background:var(--n-0); border:1px solid var(--n-200); border-radius:var(--r-lg); padding:18px 18px 16px;
  position:relative; overflow:hidden; }
.stat::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--primary-accent); opacity:.85; }
.stat .k { font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--n-500); }
.stat .v { font-size:30px; font-weight:730; letter-spacing:-.02em; line-height:1.05; margin-top:8px; }
.stat .d { font-size:11.5px; margin-top:6px; color:var(--n-500); display:inline-flex; align-items:center; gap:5px; }
.stat .d.up { color:var(--ok); } .stat .d.down { color:var(--bad); }
.stat.ok::before { background:var(--ok); } .stat.warn::before { background:var(--warn); }
.stat.bad::before { background:var(--bad); } .stat.info::before { background:var(--info); }

/* ----- Chips ------------------------------------------------------------ */
.chip { display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:var(--r-pill);
  font-size:11px; font-weight:600; line-height:1.5; border:1px solid transparent; white-space:nowrap; }
.chip .dot { width:6px; height:6px; border-radius:50%; background:currentColor; }
.chip.ok   { color:var(--ok);   background:var(--ok-wash);   border-color:#bfe3d1; }
.chip.warn { color:var(--warn); background:var(--warn-wash); border-color:#ecd8a8; }
.chip.bad  { color:var(--bad);  background:var(--bad-wash);  border-color:#eec3c9; }
.chip.info { color:var(--info); background:var(--info-wash); border-color:#bcd6ee; }
.chip.neutral { color:var(--n-600); background:var(--n-100); border-color:var(--n-200); }
.chip.solid-ok { color:#fff; background:var(--ok); }
.chip.solid-bad { color:#fff; background:var(--bad); }

/* LoE chips */
.chip.loe-High { color:#8a3d12; background:#fde7d; border-color:#f1c75a; }
.chip.loe-Medium { color:#7a5a12; background:#fbf0cf; border-color:#ecd9a0; }
.chip.loe-Low { color:#385c45; background:#e6f1e9; border-color:#c4ddcd; }
.chip.loe-Unspecified { color:var(--n-600); background:var(--n-100); border-color:var(--n-200); }

/* Hazard chips */
.chip.hz { color:#fff; }
.chip.hz-extreme-heat { background:var(--hz-heat); }
.chip.hz-floods { background:var(--hz-flood); }
.chip.hz-water-scarcity { background:var(--hz-water); }
.chip.hz-storm-cyclone { background:var(--hz-storm); }
.chip.hz-earthquake-landslides { background:var(--hz-quake); }
.chip.hz-wildfire { background:var(--hz-fire); }
.chip.hz-soft { color:var(--ink); background:var(--n-100); }
.chip.hz-soft .dot { width:8px; height:8px; }

/* Intensity pills */
.pill { display:inline-flex; align-items:center; justify-content:center; gap:5px; min-width:62px; padding:3px 8px;
  border-radius:var(--r-sm); font-size:10.5px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; }
.pill.High { color:#fff; background:var(--bad); }
.pill.Medium { color:#5a3e07; background:#f5c860; }
.pill.Low { color:#fff; background:var(--ok); }
.pill.none { color:var(--n-500); background:var(--n-100); }
.pill.sm { min-width:auto; padding:2px 7px; font-size:9.5px; }

/* ----- Tables ----------------------------------------------------------- */
.tbl { font-size:13px; }
.tbl thead th { text-align:left; font-size:10.5px; font-weight:650; letter-spacing:.05em; text-transform:uppercase;
  color:var(--n-500); padding:11px 14px; border-bottom:1px solid var(--n-200); background:var(--n-50); white-space:nowrap; }
.tbl tbody td { padding:13px 14px; border-bottom:1px solid var(--n-150); vertical-align:middle; }
.tbl tbody tr:last-child td { border-bottom:none; }
.tbl.rowlink tbody tr { cursor:pointer; transition:background .12s; }
.tbl.rowlink tbody tr:hover { background:var(--primary-wash); }
.tbl .pname { font-weight:600; color:var(--ink); }
.tbl .psub { font-size:11px; color:var(--n-500); margin-top:1px; }
.tbl .num { text-align:right; font-variant-numeric:tabular-nums; }
.tbl.compact tbody td { padding:9px 12px; }
.tbl tr.row-edited td { background:var(--warn-wash); }
.tbl tr.row-added td { background:var(--ok-wash); }
.tbl tr.row-retired td { background:var(--bad-wash); color:var(--n-500); text-decoration:line-through; }
.kebab { color:var(--n-400); font-weight:800; letter-spacing:1px; padding:2px 6px; border-radius:6px; }
.kebab:hover { background:var(--n-100); color:var(--n-600); }

/* ----- Forms ------------------------------------------------------------ */
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:var(--s4); }
.field > label { font-size:12.5px; font-weight:600; color:var(--n-700); }
.field .hint { font-size:11px; color:var(--n-500); }
.field .req { color:var(--bad); }
.input, .select, .textarea {
  width:100%; padding:9px 12px; font-size:13.5px; font-family:inherit; color:var(--ink);
  background:var(--n-0); border:1px solid var(--n-300); border-radius:var(--r); transition:.15s;
}
.input:hover,.select:hover,.textarea:hover { border-color:var(--n-400); }
.input:focus,.select:focus,.textarea:focus { border-color:var(--primary-accent); box-shadow:var(--ring); }
.input::placeholder,.textarea::placeholder { color:var(--n-400); }
.textarea { min-height:84px; resize:vertical; line-height:1.55; }
.select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%236f7f88' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; }
.input-search { position:relative; }
.input-search .input { padding-left:36px; }
.input-search .si { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--n-400); width:16px; height:16px; }

/* Toggle */
.toggle { position:relative; width:40px; height:22px; flex:none; }
.toggle input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.toggle .tk { position:absolute; inset:0; background:var(--n-300); border-radius:99px; transition:.18s; }
.toggle .tk::after { content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; background:#fff;
  border-radius:50%; transition:.18s; box-shadow:var(--sh-1); }
.toggle input:checked + .tk { background:var(--primary-accent); }
.toggle input:checked + .tk::after { transform:translateX(18px); }

/* Segmented control */
.seg { display:inline-flex; padding:3px; background:var(--n-100); border-radius:var(--r); border:1px solid var(--n-200); }
.seg button { padding:6px 12px; font-size:12.5px; font-weight:600; border:none; background:transparent; color:var(--n-600); border-radius:6px; }
.seg button.active { background:var(--n-0); color:var(--primary-deep); box-shadow:var(--sh-1); }

/* Yes/No/NA control */
.ynn { display:inline-flex; gap:6px; }
.ynn button { padding:6px 14px; font-size:12px; font-weight:650; border:1px solid var(--n-300); background:var(--n-0); color:var(--n-600); border-radius:var(--r); }
.ynn button[data-v="Yes"].active { background:var(--ok); border-color:var(--ok); color:#fff; }
.ynn button[data-v="No"].active { background:var(--bad); border-color:var(--bad); color:#fff; }
.ynn button[data-v="NA"].active { background:var(--n-500); border-color:var(--n-500); color:#fff; }
.ynn.desired button[data-v="Yes"].active.good,
.ynn.desired button[data-v="No"].active.good { background:var(--ok); border-color:var(--ok); }

/* ----- Filter chips ----------------------------------------------------- */
.facet { margin-bottom:var(--s5); }
.facet h4 { font-size:11px; font-weight:650; letter-spacing:.05em; text-transform:uppercase; color:var(--n-500); margin-bottom:10px; }
.facet-chips { display:flex; flex-wrap:wrap; gap:7px; }
.fchip { display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:var(--r-pill);
  font-size:12px; font-weight:550; border:1px solid var(--n-200); background:var(--n-0); color:var(--n-700); transition:.13s; }
.fchip:hover { border-color:var(--primary-light); background:var(--primary-wash); }
.fchip.active { background:var(--primary-deep); border-color:var(--primary-deep); color:#fff; }
.fchip .cnt { font-size:10.5px; padding:1px 6px; border-radius:99px; background:var(--n-100); color:var(--n-600); }
.fchip.active .cnt { background:rgba(255,255,255,.22); color:#fff; }
.fchip .swatch { width:9px; height:9px; border-radius:3px; }
.applied-chips { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.applied-chip { display:inline-flex; align-items:center; gap:6px; padding:4px 6px 4px 11px; border-radius:var(--r-pill);
  font-size:11.5px; font-weight:550; background:var(--primary-wash); color:var(--primary-deep); border:1px solid var(--primary-wash-2); }
.applied-chip button { border:none; background:none; color:var(--primary-deep); font-size:13px; line-height:1; padding:2px 4px; border-radius:50%; }
.applied-chip button:hover { background:var(--primary-wash-2); }

/* ----- Alerts ----------------------------------------------------------- */
.alert { display:flex; gap:12px; padding:13px 16px; border-radius:var(--r); border:1px solid; font-size:13px; align-items:flex-start; }
.alert .ai { flex:none; width:18px; height:18px; margin-top:1px; }
.alert.info { background:var(--info-wash); border-color:#bcd6ee; color:#114a7e; }
.alert.warn { background:var(--warn-wash); border-color:#ecd8a8; color:#7a5208; }
.alert.ok   { background:var(--ok-wash);  border-color:#bfe3d1; color:#0f6a45; }
.alert.bad  { background:var(--bad-wash);  border-color:#eec3c9; color:#8a1f2e; }
.alert .at { font-weight:650; }

/* ----- Banner (determination) ------------------------------------------ */
.banner { border-radius:var(--r-lg); padding:18px 22px; display:flex; align-items:center; gap:16px; }
.banner .bicon { width:42px; height:42px; border-radius:12px; flex:none; display:grid; place-items:center; font-size:20px; }
.banner .bt { font-size:16px; font-weight:700; }
.banner .bs { font-size:12.5px; opacity:.85; margin-top:2px; }
.banner.ok { background:linear-gradient(100deg,var(--ok-wash),#f1fbf6); border:1px solid #bfe3d1; color:#0f6a45; }
.banner.ok .bicon { background:var(--ok); color:#fff; }
.banner.bad { background:linear-gradient(100deg,var(--bad-wash),#fdf1f3); border:1px solid #eec3c9; color:#8a1f2e; }
.banner.bad .bicon { background:var(--bad); color:#fff; }
.banner.warn { background:linear-gradient(100deg,var(--warn-wash),#fdf8ec); border:1px solid #ecd8a8; color:#7a5208; }
.banner.warn .bicon { background:var(--warn); color:#fff; }

/* ----- Key/value blocks ------------------------------------------------- */
.kv { display:grid; grid-template-columns:auto 1fr; gap:10px 18px; font-size:13px; }
.kv dt { color:var(--n-500); font-weight:550; }
.kv dd { margin:0; color:var(--ink); font-weight:550; }
.deflist { display:flex; flex-direction:column; gap:11px; }
.deflist .di { display:flex; justify-content:space-between; gap:14px; font-size:12.5px; padding-bottom:11px; border-bottom:1px dashed var(--n-200); }
.deflist .di:last-child { border-bottom:none; padding-bottom:0; }
.deflist .dk { color:var(--n-500); } .deflist .dv { font-weight:600; text-align:right; }

/* ----- Tabs ------------------------------------------------------------- */
.tabs { display:flex; gap:4px; border-bottom:1px solid var(--n-200); margin-bottom:var(--s5); overflow-x:auto; }
.tab { padding:11px 16px; font-size:13px; font-weight:600; color:var(--n-600); border-bottom:2px solid transparent; white-space:nowrap; }
.tab:hover { color:var(--ink); }
.tab.active { color:var(--primary-deep); border-bottom-color:var(--primary-accent); }
.tab .badge { margin-left:6px; font-size:10px; padding:1px 6px; border-radius:99px; background:var(--n-100); color:var(--n-600); }

/* ----- Status strip ----------------------------------------------------- */
.statusstrip { display:flex; align-items:center; gap:16px; padding:18px 22px; background:var(--n-0);
  border:1px solid var(--n-200); border-radius:var(--r-lg); box-shadow:var(--sh-1); flex-wrap:wrap; }
.statusstrip .sid { font-family:var(--font-mono); font-size:12px; color:var(--n-500); }
.statusstrip h2 { font-size:18px; }
.statusstrip .identity { font-size:12px; color:var(--n-500); margin-top:3px; }
.statusstrip .chips { display:flex; gap:8px; flex-wrap:wrap; }

/* ----- Wizard ----------------------------------------------------------- */
.stepstrip { display:flex; gap:6px; background:var(--n-0); border:1px solid var(--n-200); border-radius:var(--r-lg);
  padding:10px; box-shadow:var(--sh-1); overflow-x:auto; }
.stepitem { flex:1; min-width:130px; display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:var(--r); }
.stepitem .sn { width:26px; height:26px; flex:none; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:700;
  background:var(--n-100); color:var(--n-500); border:1px solid var(--n-200); }
.stepitem .sl { font-size:12px; font-weight:600; color:var(--n-600); line-height:1.2; }
.stepitem .sk { font-size:10px; color:var(--n-400); }
.stepitem.done .sn { background:var(--ok); color:#fff; border-color:var(--ok); }
.stepitem.active { background:var(--primary-wash); }
.stepitem.active .sn { background:var(--primary-deep); color:#fff; border-color:var(--primary-deep); }
.stepitem.active .sl { color:var(--primary-deep); }
.stepitem.clickable { cursor:pointer; }
.stepitem.clickable:hover { background:var(--n-50); }

.wizard-grid { display:grid; grid-template-columns:230px 1fr 270px; gap:var(--s5); align-items:start; margin-top:var(--s5); }
.sidekick { background:var(--n-0); border:1px solid var(--n-200); border-radius:var(--r-lg); padding:18px; position:sticky; top:140px; }
.sidekick h4 { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--primary-deep); margin-bottom:8px; }
.sidekick p { font-size:12.5px; color:var(--n-600); line-height:1.6; }
.sidekick .blk { padding-bottom:16px; margin-bottom:16px; border-bottom:1px solid var(--n-150); }
.sidekick .blk:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.wizard-nav { display:flex; justify-content:space-between; gap:12px; margin-top:var(--s5); }

/* ----- Measure card ----------------------------------------------------- */
.measure-card { border:1px solid var(--n-200); border-radius:var(--r-lg); background:var(--n-0); padding:16px; display:flex; flex-direction:column; gap:11px; transition:.16s; }
.measure-card:hover { border-color:var(--primary-light); box-shadow:var(--sh-2); }
.measure-card .mtop { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.measure-card .mid { font-family:var(--font-mono); font-size:10.5px; color:var(--n-400); margin-left:auto; }
.measure-card .mtext { font-size:13px; line-height:1.55; color:var(--ink); }
.measure-card .mfoot { display:flex; align-items:center; gap:8px; margin-top:auto; padding-top:6px; flex-wrap:wrap; }
.measure-card .mlink { font-size:11.5px; font-weight:600; margin-left:auto; }

/* Measure row (wizard) */
.measure-row { border:1px solid var(--n-200); border-radius:var(--r); background:var(--n-0); padding:14px 16px; display:grid;
  grid-template-columns:1fr auto; gap:12px; align-items:start; transition:.15s; }
.measure-row.applied { border-color:#bfe3d1; background:linear-gradient(0deg,var(--ok-wash),#fff); }
.measure-row.deferred { border-color:#ecd8a8; }
.measure-row.na { opacity:.62; }
.measure-row .mtext { font-size:13px; line-height:1.5; }
.measure-row .ctrls { display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.statusset { display:inline-flex; gap:4px; }
.statusset button { padding:5px 10px; font-size:11.5px; font-weight:600; border:1px solid var(--n-300); background:var(--n-0); color:var(--n-600); border-radius:6px; }
.statusset button.applied.active { background:var(--ok); border-color:var(--ok); color:#fff; }
.statusset button.deferred.active { background:var(--warn); border-color:var(--warn); color:#fff; }
.statusset button.na.active { background:var(--n-500); border-color:var(--n-500); color:#fff; }

/* ----- District tile + map --------------------------------------------- */
.tile-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:var(--s3); }
.dtile { border:1px solid var(--n-200); border-radius:var(--r-lg); background:var(--n-0); padding:14px; transition:.16s; cursor:pointer; }
.dtile:hover { border-color:var(--primary-light); box-shadow:var(--sh-2); transform:translateY(-2px); }
.dtile .dn { font-weight:650; font-size:13.5px; }
.dtile .ds { font-size:11px; color:var(--n-500); margin-bottom:10px; }
.dtile .hzrow { display:flex; gap:4px; flex-wrap:wrap; }
.hzpip { display:inline-flex; align-items:center; gap:4px; font-size:9.5px; font-weight:650; padding:2px 6px; border-radius:5px;
  background:var(--n-100); color:var(--n-600); }
.hzpip .pd { width:7px; height:7px; border-radius:2px; }

.mapwrap { position:relative; background:linear-gradient(160deg,#f1f7f8,#e7f1f2); border:1px solid var(--n-200);
  border-radius:var(--r-lg); overflow:hidden; }
.mapwrap .mapcanvas { position:relative; width:100%; aspect-ratio:5/6; }
.mapdot { position:absolute; transform:translate(-50%,-50%); border-radius:50%; border:2px solid #fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25); cursor:pointer; transition:.15s; }
.mapdot:hover { transform:translate(-50%,-50%) scale(1.5); z-index:5; }
.maplabel { position:absolute; transform:translate(-50%,-140%); font-size:10px; font-weight:600; color:var(--n-700);
  background:rgba(255,255,255,.85); padding:1px 5px; border-radius:4px; pointer-events:none; white-space:nowrap; }
.maplegend { position:absolute; bottom:12px; left:12px; background:rgba(255,255,255,.92); border:1px solid var(--n-200);
  border-radius:var(--r); padding:10px 12px; font-size:11px; box-shadow:var(--sh-1); }
.maplegend .lr { display:flex; align-items:center; gap:7px; margin-top:5px; }
.maplegend .lr:first-of-type { margin-top:8px; }
.maplegend .ls { width:12px; height:12px; border-radius:3px; }
.mapnote { position:absolute; bottom:12px; right:12px; font-size:10px; color:var(--n-500); background:rgba(255,255,255,.85); padding:3px 8px; border-radius:5px; }

/* ----- Bars / charts ---------------------------------------------------- */
.barchart { display:flex; align-items:flex-end; gap:10px; height:160px; padding-top:10px; }
.barchart .bar { flex:1; display:flex; flex-direction:column; align-items:center; gap:7px; justify-content:flex-end; height:100%; }
.barchart .bar .col { width:100%; max-width:38px; background:linear-gradient(180deg,var(--primary-light),var(--primary-deep));
  border-radius:6px 6px 0 0; transition:height .4s ease; min-height:4px; }
.barchart .bar .bl { font-size:10px; color:var(--n-500); }
.barchart .bar .bv { font-size:11px; font-weight:700; }
.hbar { display:flex; flex-direction:column; gap:12px; }
.hbar .hb { display:grid; grid-template-columns:150px 1fr 34px; gap:12px; align-items:center; font-size:12px; }
.hbar .track { height:10px; background:var(--n-100); border-radius:99px; overflow:hidden; }
.hbar .fill { height:100%; background:linear-gradient(90deg,var(--primary-accent),var(--primary-deep)); border-radius:99px; }

/* ----- Sign-in ---------------------------------------------------------- */
.auth { min-height:100vh; display:grid; grid-template-columns:1.1fr 1fr; }
.auth-art { position:relative; overflow:hidden; color:#eafaf8;
  background:radial-gradient(120% 100% at 0% 0%, #1f5e63 0%, #0c2f34 60%, #08252a 100%); }
.auth-art .glow { position:absolute; border-radius:50%; filter:blur(60px); opacity:.5; }
.auth-art .g1 { width:380px; height:380px; background:var(--primary-accent); top:-80px; right:-60px; }
.auth-art .g2 { width:300px; height:300px; background:#2e8d88; bottom:-60px; left:-40px; opacity:.4; }
.auth-art .grain { position:absolute; inset:0; opacity:.06;
  background-image:radial-gradient(#fff 1px, transparent 1px); background-size:18px 18px; }
.auth-art-inner { position:relative; z-index:2; height:100%; display:flex; flex-direction:column; padding:48px 56px; }
.auth-art .brandbig { display:flex; align-items:center; gap:14px; }
.auth-art .brandbig .mark { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; font-weight:800; font-size:22px;
  background:linear-gradient(135deg,var(--primary-light),var(--primary-deep)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.2); }
.auth-art .brandbig .wm { font-size:24px; font-weight:780; letter-spacing:-.02em; }
.auth-art .brandbig .desc { font-size:12px; color:#9fd4d0; }
.auth-art .pitch { margin-top:auto; }
.auth-art .pitch h2 { font-size:30px; font-weight:730; letter-spacing:-.02em; line-height:1.18; max-width:18ch; }
.auth-art .pitch p { margin-top:14px; font-size:14px; color:#bfe3e0; max-width:42ch; line-height:1.6; }
.auth-art .feats { margin-top:26px; display:flex; flex-direction:column; gap:12px; }
.auth-art .feats .f { display:flex; gap:10px; align-items:flex-start; font-size:13px; color:#dff4f2; }
.auth-art .feats .f .fi { color:var(--primary-light); margin-top:1px; }
.auth-art .partners { margin-top:34px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14); }
.auth-art .partners .pl { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#7fb8b4; margin-bottom:12px; }
.auth-art .partners .logos { display:flex; align-items:center; gap:14px; }
.auth-art .partners .logos .logochip { background:#fff; border-radius:8px; padding:8px 14px; box-shadow:var(--sh-2); }
.auth-art .partners img { height:30px; display:block; }

.auth-form { display:grid; place-items:center; padding:40px; background:var(--n-0); }
.auth-card { width:100%; max-width:380px; }
.auth-card .ac-h { margin-bottom:24px; }
.auth-card h1 { font-size:22px; }
.auth-card .ac-sub { color:var(--n-500); font-size:13px; margin-top:6px; }
.auth-card .divider { display:flex; align-items:center; gap:12px; color:var(--n-400); font-size:11px; margin:18px 0; }
.auth-card .divider::before,.auth-card .divider::after { content:""; flex:1; height:1px; background:var(--n-200); }
.checkrow { display:flex; align-items:center; justify-content:space-between; font-size:12.5px; margin:4px 0 18px; }
.checkrow label { display:flex; align-items:center; gap:8px; color:var(--n-600); }
.auth-foot { margin-top:24px; font-size:11px; color:var(--n-400); text-align:center; font-family:var(--font-mono); }

/* ----- Output (document) ------------------------------------------------ */
.doc-toolbar { display:flex; align-items:center; gap:10px; margin-bottom:var(--s5); flex-wrap:wrap;
  background:var(--n-0); border:1px solid var(--n-200); border-radius:var(--r-lg); padding:14px 18px; box-shadow:var(--sh-1); }
.doc-frame { background:var(--n-200); border-radius:var(--r-lg); padding:34px; display:flex; justify-content:center; }
.a4 { background:#fff; width:100%; max-width:820px; box-shadow:var(--sh-3); border-radius:2px;
  padding:64px 70px; font-family:var(--font-doc); color:#1a1a1a; }
.a4 .doc-cover { border-bottom:3px double #cdb27a; padding-bottom:26px; margin-bottom:30px; }
.a4 .doc-kicker { font-family:var(--font-ui); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#9a7b3a; }
.a4 .doc-title { font-size:30px; font-weight:700; letter-spacing:-.01em; margin-top:10px; line-height:1.15; }
.a4 .doc-sub { font-size:15px; color:#555; margin-top:8px; font-style:italic; }
.a4 .doc-idblock { font-family:var(--font-ui); display:grid; grid-template-columns:repeat(2,1fr); gap:10px 30px; margin-top:24px; font-size:11.5px; }
.a4 .doc-idblock .l { color:#888; } .a4 .doc-idblock .v { font-weight:600; color:#222; }
.a4 .doc-cobrand { display:flex; align-items:center; gap:14px; margin-top:22px; padding-top:18px; border-top:1px solid #e8e2d4; }
.a4 .doc-cobrand img { height:26px; }
.a4 .doc-cobrand .div { width:1px; height:24px; background:#ddd; }
.a4 h2.doc-sec { font-size:13px; font-family:var(--font-ui); font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--primary-deep); border-bottom:1px solid #e3ddcf; padding-bottom:7px; margin:30px 0 14px; }
.a4 h2.doc-sec .nn { color:#bda05f; margin-right:8px; }
.a4 p.doc-p { font-size:13.5px; line-height:1.7; margin-bottom:12px; color:#2a2a2a; }
.a4 .doc-tbl { font-family:var(--font-ui); font-size:11.5px; margin:8px 0 14px; }
.a4 .doc-tbl th { text-align:left; padding:7px 10px; background:#f4f1ea; border:1px solid #e3ddcf; font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:#7a6a44; }
.a4 .doc-tbl td { padding:7px 10px; border:1px solid #ece7da; }
.a4 .doc-attrib { font-family:var(--font-ui); font-size:11px; color:#777; background:#faf8f2; border:1px solid #ece7da; border-radius:6px; padding:14px 16px; }
.a4 .doc-foot { margin-top:34px; padding-top:14px; border-top:1px solid #e3ddcf; font-family:var(--font-ui); font-size:10px; color:#999; display:flex; justify-content:space-between; }
.a4 .doc-hash { font-family:var(--font-mono); font-size:11px; }

/* ----- Catalogue (index) ----------------------------------------------- */
.cat-hero { background:radial-gradient(120% 130% at 80% -10%, #1f5e63 0%, #0c2f34 55%, #08252a 100%);
  color:#eafaf8; border-radius:var(--r-lg); padding:44px 44px 40px; position:relative; overflow:hidden; }
.cat-hero .glow { position:absolute; width:360px; height:360px; border-radius:50%; background:var(--primary-accent);
  filter:blur(70px); opacity:.4; top:-120px; right:-60px; }
.cat-hero .inner { position:relative; z-index:2; max-width:680px; }
.cat-hero .eyebrow { color:var(--primary-light); }
.cat-hero h1 { font-size:32px; font-weight:780; letter-spacing:-.02em; margin-top:12px; }
.cat-hero p { margin-top:14px; font-size:14.5px; color:#cdeae8; line-height:1.6; }
.cat-hero .partners { margin-top:26px; display:flex; align-items:center; gap:14px; }
.cat-hero .partners .pl { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#7fb8b4; }
.cat-hero .partners .logochip { background:#fff; border-radius:8px; padding:8px 14px; box-shadow:var(--sh-2); }
.cat-hero .partners img { height:28px; display:block; }
.cat-hero .partners .div { width:1px; height:24px; background:rgba(255,255,255,.2); }
.cat-group { margin-top:var(--s6); }
.cat-group h3 { font-size:13px; letter-spacing:.04em; text-transform:uppercase; color:var(--n-500); margin-bottom:14px;
  display:flex; align-items:center; gap:10px; }
.cat-group h3::after { content:""; flex:1; height:1px; background:var(--n-200); }
.cat-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:var(--s3); }
.cat-card { display:flex; gap:13px; padding:16px; border:1px solid var(--n-200); border-radius:var(--r-lg); background:var(--n-0); transition:.16s; }
.cat-card:hover { border-color:var(--primary-light); box-shadow:var(--sh-2); transform:translateY(-2px); }
.cat-card .num { font-family:var(--font-mono); font-size:11px; font-weight:700; color:#fff; background:var(--primary-deep);
  width:30px; height:30px; border-radius:8px; display:grid; place-items:center; flex:none; }
.cat-card .ct { font-weight:650; font-size:13.5px; color:var(--ink); }
.cat-card .cd { font-size:11.5px; color:var(--n-500); margin-top:3px; line-height:1.45; }

/* ----- Misc ------------------------------------------------------------- */
.section-title { display:flex; align-items:center; gap:10px; font-size:12px; font-weight:650; letter-spacing:.05em;
  text-transform:uppercase; color:var(--n-500); margin:var(--s5) 0 var(--s3); }
.section-title::after { content:""; flex:1; height:1px; background:var(--n-200); }
.divider-h { height:1px; background:var(--n-200); margin:var(--s4) 0; }
.tag-soft { font-size:10.5px; font-weight:650; padding:2px 8px; border-radius:99px; background:var(--primary-wash); color:var(--primary-deep); }
.dnsh-note { font-size:12px; background:var(--info-wash); border:1px solid #cfe0f0; border-radius:var(--r); padding:11px 13px; color:#155285; line-height:1.5; }
.quote-narrative { border-left:3px solid var(--primary-accent); padding:4px 0 4px 14px; color:var(--n-700); font-size:13px; line-height:1.6; }
.empty { text-align:center; padding:40px; color:var(--n-500); }
.empty .ei { font-size:30px; margin-bottom:10px; opacity:.5; }

/* Toast */
.toast-wrap { position:fixed; right:24px; bottom:24px; z-index:120; display:flex; flex-direction:column; gap:10px; }
.toast { background:var(--ink); color:#fff; padding:12px 16px; border-radius:var(--r); box-shadow:var(--sh-3);
  font-size:13px; display:flex; gap:10px; align-items:center; animation:toastin .25s ease; max-width:340px; }
.toast .tdot { width:8px; height:8px; border-radius:50%; background:var(--primary-light); flex:none; }
.toast.ok .tdot { background:#43d39a; } .toast.warn .tdot { background:#f3c45f; }
@keyframes toastin { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

/* Modal */
.modal-back { position:fixed; inset:0; background:rgba(14,28,38,.5); backdrop-filter:blur(2px); z-index:100;
  display:grid; place-items:center; padding:24px; animation:fade .2s ease; }
.modal { background:var(--n-0); border-radius:var(--r-lg); box-shadow:var(--sh-3); width:100%; max-width:480px; overflow:hidden; }
.modal .mh { padding:18px 22px; border-bottom:1px solid var(--n-150); font-weight:650; font-size:15px; }
.modal .mb { padding:22px; font-size:13.5px; color:var(--n-700); line-height:1.6; }
.modal .mf { padding:14px 22px; border-top:1px solid var(--n-150); display:flex; justify-content:flex-end; gap:10px; }
@keyframes fade { from { opacity:0; } to { opacity:1; } }

/* View transition */
.view-enter { animation:viewin .26s ease; }
@keyframes viewin { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

/* Staggered page-load reveal for stat/card rows */
.reveal > * { animation:reveal .4s ease both; }
.reveal > *:nth-child(1){animation-delay:.02s}.reveal > *:nth-child(2){animation-delay:.07s}
.reveal > *:nth-child(3){animation-delay:.12s}.reveal > *:nth-child(4){animation-delay:.17s}
.reveal > *:nth-child(5){animation-delay:.22s}.reveal > *:nth-child(6){animation-delay:.27s}
@keyframes reveal { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

/* Pagination */
.pager { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 4px 0; font-size:12px; color:var(--n-500); flex-wrap:wrap; }
.pager .pages { display:flex; gap:4px; }
.pager .pg { min-width:30px; height:30px; padding:0 8px; border-radius:6px; border:1px solid var(--n-200); background:var(--n-0);
  display:grid; place-items:center; font-size:12px; font-weight:600; color:var(--n-600); }
.pager .pg.active { background:var(--primary-deep); border-color:var(--primary-deep); color:#fff; }

/* Avatar (users table) */
.ava { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:700; color:#fff;
  background:linear-gradient(135deg,var(--primary-light),var(--primary-deep)); flex:none; }
.userrow { display:flex; align-items:center; gap:10px; }

/* ----- Responsive ------------------------------------------------------- */
@media (max-width:1100px) {
  .wizard-grid { grid-template-columns:1fr; }
  .sidekick { position:static; }
  .layout-rail, .layout-rail-l { grid-template-columns:1fr; }
  .cols-4 { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:820px) {
  :root { --pad:16px; }
  .auth { grid-template-columns:1fr; }
  .auth-art { display:none; }
  .cols-3 { grid-template-columns:1fr; }
  .cols-2 { grid-template-columns:1fr; }
  .cobrand .colabel { display:none; }
  .a4 { padding:36px 26px; }
  .subnav-inner { overflow-x:auto; }
  .wizard-desktop-only { display:block; }
}
@media (max-width:560px) {
  .cols-4 { grid-template-columns:1fr; }
  .userbox .uname,.userbox .urole { display:none; }
  .topbar-inner { gap:12px; }
  .brand .desc { display:none; }
}

/* Print (output page) */
@media print {
  .topbar,.subnav,.crumbs,.footer,.doc-toolbar { display:none !important; }
  .doc-frame { background:#fff; padding:0; }
  .a4 { box-shadow:none; max-width:none; }
}