/* Pareto Terminal: one platform. Tokens per BRAND.md: white ground, forest
   green, hairline rules, no rounded cards, light display type, tiny
   wide-tracked labels. Numbers are set in a monospace so columns line up.
   Gains and losses carry a sign and an arrow as well as a colour. */

:root {
  --ground: #FFFFFF; --panel: #F4F7F5; --tint: #EDF3EF; --line: #E2E8E4;
  --forest: #14402E; --forest-deep: #0E2B1E; --forest-mid: #2D6A4F;
  --ink: #16211B; --body: #4A5A51; --faint: #6B7A72;
  --gain: #15803D; --loss: #9B2C2C; --amber: #8A5A00; --amber-tint: #FBF3E2; --loss-tint: #F8ECEC;
  --display: 'Cormorant Garamond', Georgia, serif;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--body); font: 400 14.5px/1.55 var(--sans); }
a { color: var(--forest); }
button { font: inherit; cursor: pointer; }
.mono, .num { font-family: var(--mono); }
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.eyebrow { margin: 0 0 10px; font: 700 10px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.faint { color: var(--faint); }
.small { font-size: 12.5px; }
.gain { color: var(--gain); }
.loss { color: var(--loss); }
.hidden, [hidden] { display: none !important; }

/* ---------- top bar ---------- */
.top { background: var(--forest-deep); color: #CFE0D6; position: sticky; top: 0; z-index: 30; }
.top-inner { display: flex; align-items: center; gap: 20px; height: 54px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; flex: none; }
.brand .mark { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.brand .mark i { display: block; width: 3px; background: #9FD9B4; }
.brand .mark i:nth-child(1) { height: 5px; opacity: .5; }
.brand .mark i:nth-child(2) { height: 9px; opacity: .75; }
.brand .mark i:nth-child(3) { height: 14px; background: #fff; }
.brand span { font: 400 19px/1 var(--display); letter-spacing: -.01em; }
.nav { display: flex; gap: 18px; font: 600 12.5px/1 var(--sans); }
.nav a { color: #9FBCAC; text-decoration: none; padding: 19px 0 17px; border-bottom: 2px solid transparent; white-space: nowrap; }
.nav a:hover { color: #fff; }
.nav a[aria-current="page"] { color: #fff; border-bottom-color: #9FD9B4; }
.top-search { position: relative; margin-left: auto; width: 260px; }
@media (max-width: 1180px) { .nav { gap: 13px; } .top-search { width: 190px; } }
.top-search input { width: 100%; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); color: #fff;
                    padding: 8px 10px; font: 500 13px/1 var(--sans); outline: none; }
.top-search input::placeholder { color: #9FBCAC; }
.top-search input:focus { border-color: #9FD9B4; }
.auth-slot:empty { display: none; }
.auth-slot button { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .3); padding: 7px 10px; font: 600 12px/1 var(--sans); }

.results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40; background: #fff; border: 1px solid var(--line);
           box-shadow: 0 12px 28px rgba(14, 43, 30, .14); max-height: 380px; overflow: auto; }
.results a { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; padding: 9px 12px; color: var(--ink); text-decoration: none; font-size: 13.5px; }
.results a[aria-selected="true"], .results a:hover { background: var(--tint); }
.results .t { font: 600 12.5px/1.4 var(--mono); color: var(--forest); }
.results .k { font-size: 11px; color: var(--faint); }

@media (max-width: 900px) {
  .top-inner { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; gap: 10px 16px; }
  .nav { order: 3; width: 100%; overflow-x: auto; gap: 16px; }
  .nav a { padding: 6px 0 8px; white-space: nowrap; }
  .top-search { width: auto; flex: 1; min-width: 140px; }
}
@media (max-width: 600px) { .wrap { padding: 0 16px; } .brand span { display: none; } }

/* ---------- page furniture ---------- */
main { padding-bottom: 72px; min-height: 70vh; }
.page-head { padding: 34px 0 20px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.page-head h1 { margin: 0; color: var(--ink); font: 300 44px/1.05 var(--display); letter-spacing: -.02em; }
.page-head h1 small { font: 500 15px/1 var(--mono); color: var(--faint); margin-left: 10px; letter-spacing: 0; }
.page-head .dek { margin: 10px 0 0; max-width: 78ch; }
.quote-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-top: 12px; }
.px { font: 500 26px/1 var(--mono); color: var(--ink); }
.grade { display: inline-block; font: 700 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 6px 8px; border: 1px solid currentColor; }
.grade.Strong { color: var(--gain); }
.grade.Adequate { color: var(--forest-mid); }
.grade.Stretched { color: var(--amber); }
.grade.Weak { color: var(--loss); }
.grade.none { color: var(--faint); }
.star { background: none; border: 1px solid var(--line); color: var(--forest); padding: 6px 10px; font: 600 12px/1 var(--sans); }
.star[aria-pressed="true"] { background: var(--forest); color: #fff; border-color: var(--forest); }

.jump { position: sticky; top: 54px; z-index: 20; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--line);
        display: flex; gap: 4px; overflow-x: auto; padding: 8px 0; }
.jump a { flex: none; font: 600 12px/1 var(--sans); color: var(--body); text-decoration: none; padding: 7px 10px; border: 1px solid transparent; }
.jump a:hover { border-color: var(--line); color: var(--forest); }
@media (max-width: 900px) { .jump { top: 96px; } }

section.block { padding: 30px 0 8px; scroll-margin-top: 110px; }
section.block > h2 { margin: 0 0 4px; color: var(--ink); font: 400 28px/1.15 var(--display); letter-spacing: -.01em; }
section.block > .dek { margin: 0 0 16px; max-width: 80ch; font-size: 13.5px; }
h3.sub { margin: 22px 0 8px; font: 700 10px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 40px; }
.src { margin: 14px 0 0; font-size: 12px; color: var(--faint); }
.empty { color: var(--faint); font-size: 13.5px; padding: 8px 0; }
.loading { color: var(--faint); font: 500 13px/1 var(--mono); padding: 16px 0; }

/* ---------- insights ---------- */
.insights { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.insights li { display: grid; grid-template-columns: 94px 1fr; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.insights .kind { font: 700 10px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.insights .kind small { display: block; font-weight: 600; letter-spacing: .06em; color: var(--faint); margin-top: 3px; }
.insights li.risk .kind { color: var(--loss); }
.insights li.watch .kind { color: var(--amber); }
.insights li.strength .kind { color: var(--gain); }
.insights .text { color: var(--ink); }
@media (max-width: 600px) { .insights li { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- stats ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.stat { padding: 12px 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat .k { font: 700 9.5px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); }
.stat .v { font: 500 19px/1.3 var(--mono); color: var(--ink); margin-top: 5px; }
.stat .h { font-size: 11.5px; color: var(--faint); }

/* ---------- tables ---------- */
.scroll { overflow-x: auto; }
table.t { width: 100%; border-collapse: collapse; font-size: 13px; }
table.t th { font: 700 9.5px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); text-align: left;
             padding: 8px 10px 8px 0; border-bottom: 1px solid var(--ink); white-space: nowrap; vertical-align: bottom; }
table.t th.num { text-align: right; padding: 8px 0 8px 10px; }
table.t th[data-sort] { cursor: pointer; }
table.t th[data-sort]:hover, table.t th[aria-sort] { color: var(--forest); }
table.t td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
table.t td.num { padding: 8px 14px 8px 10px; }
table.t th.num { padding-right: 14px; }
table.t td.num:last-child, table.t th.num:last-child { padding-right: 0; }
table.t td.mono { white-space: nowrap; }
table.t tr:hover td { background: var(--panel); }
table.t .q { color: var(--body); font-size: 12.5px; max-width: 72ch; }
.tk { font: 600 12.5px/1.4 var(--mono); color: var(--forest); text-decoration: none; }
a.co { color: var(--ink); text-decoration: none; }
a.co:hover { color: var(--forest); text-decoration: underline; }

.tag { display: inline-block; font: 700 9.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 4px 5px; border: 1px solid var(--line); color: var(--body); white-space: nowrap; }
.tag.credit, .tag.risk { color: var(--loss); border-color: #E7C9C9; background: var(--loss-tint); }
.tag.watch, .tag.most { color: var(--amber); border-color: #EAD7AE; background: var(--amber-tint); }
.tag.supplier, .tag.strength { color: var(--forest); border-color: #C9DCD0; background: var(--tint); }
.tag.customer { color: var(--forest-mid); border-color: #C9DCD0; }

.bar { height: 6px; background: var(--tint); min-width: 50px; }
.bar i { display: block; height: 100%; background: var(--forest-mid); }
.corr { display: grid; grid-template-columns: 1fr 44px; gap: 8px; align-items: center; min-width: 140px; }
.corr .bar i.neg { background: var(--loss); }

/* ---------- filters ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; align-items: center; }
.filters button, .filters select { background: #fff; border: 1px solid var(--line); color: var(--body); padding: 6px 10px; font: 600 12px/1 var(--sans); }
.filters button[aria-pressed="true"] { background: var(--forest); color: #fff; border-color: var(--forest); }
.filters .count { margin-left: auto; font-size: 12px; color: var(--faint); }

/* ---------- chain ---------- */
.chain-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 28px; }
.chain-col h4 { margin: 14px 0 4px; font: 700 10px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.chain-row { padding: 7px 0; border-top: 1px solid var(--line); font-size: 13px; }
.chain-row .w { display: block; color: var(--faint); font-size: 12px; }
.chain-row .r { float: right; font: 500 12px/1.4 var(--mono); }
.locked { position: relative; }
.locked .chain-cols { filter: blur(5px); pointer-events: none; user-select: none; }
.lock-note { position: absolute; inset: 20px 0 auto; margin: 0 auto; max-width: 460px; background: #fff; border: 1px solid var(--line); padding: 18px 20px;
             box-shadow: 0 12px 28px rgba(14, 43, 30, .12); text-align: center; }
.btn { display: inline-block; background: var(--forest); color: #fff; border: 0; padding: 10px 16px; font: 700 12.5px/1 var(--sans); text-decoration: none; }
.btn.ghost { background: transparent; color: var(--forest); border: 1px solid var(--forest); }

/* ---------- chart ---------- */
.chart { position: relative; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .line { fill: none; stroke: var(--forest); stroke-width: 2; stroke-linejoin: round; }
.chart .gridl { stroke: var(--line); stroke-width: 1; }
.chart .axis { fill: var(--faint); font: 500 10.5px var(--mono); }
.chart .cross { stroke: var(--faint); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .dot { fill: var(--forest); stroke: #fff; stroke-width: 2; }
.chart-tip { position: absolute; pointer-events: none; background: #fff; border: 1px solid var(--line); padding: 5px 8px;
             font: 500 11.5px/1.35 var(--mono); white-space: nowrap; box-shadow: 0 6px 16px rgba(14, 43, 30, .1); }
.periods { display: flex; gap: 4px; margin: 0 0 8px; }
.periods button { background: #fff; border: 1px solid var(--line); color: var(--body); padding: 4px 8px; font: 600 11px/1 var(--mono); }
.periods button[aria-pressed="true"] { border-color: var(--forest); color: var(--forest); }
.spark { display: block; }
.spark polyline { fill: none; stroke: var(--forest-mid); stroke-width: 1.5; }

/* ---------- news ---------- */
.news { list-style: none; margin: 0; padding: 0; }
.news li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.news a { color: var(--ink); text-decoration: none; font-weight: 600; }
.news a:hover { color: var(--forest); text-decoration: underline; }
.news .meta { font-size: 12px; color: var(--faint); margin-top: 2px; }
.news .meta .tag { margin-left: 4px; }

/* ---------- overview ---------- */
.hero { background: var(--forest); color: #CFE0D6; }
.hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; padding-top: 56px; padding-bottom: 48px; align-items: end; }
.hero h1 { margin: 0; color: #fff; font: 300 56px/1.02 var(--display); letter-spacing: -.02em; }
.hero h1 strong { font-weight: 600; color: #9FD9B4; }
.hero p { margin: 0 0 20px; max-width: 50ch; }
.hero .search { position: relative; }
.hero .search input { width: 100%; padding: 12px 2px; border: 0; border-bottom: 1px solid #9FD9B4; outline: none; background: transparent;
                      color: #fff; font: 500 18px/1.2 var(--sans); }
.hero .search input::placeholder { color: #9FBCAC; }
.hero .eyebrow { color: #9FBCAC; }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; gap: 20px; padding-top: 36px; } .hero h1 { font-size: 40px; } }

.dist { display: flex; height: 10px; margin: 6px 0 8px; }
.dist i { display: block; height: 100%; border-right: 2px solid #fff; }
.dist-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; }
.dist-legend b { font: 600 12px var(--mono); color: var(--ink); margin-right: 3px; }
.sw { display: inline-block; width: 9px; height: 9px; margin-right: 5px; vertical-align: 0; }

.watch-row { display: grid; grid-template-columns: 70px 1fr auto auto; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; align-items: baseline; }
.watch-row .x { background: none; border: 0; color: var(--faint); padding: 0 2px; }

/* ---------- brands ---------- */
.score { font: 600 13px var(--mono); color: var(--forest); }

/* ---------- atlas ---------- */
.atlas-frame { width: 100%; height: calc(100vh - 140px); min-height: 640px; border: 0; border-top: 1px solid var(--line); display: block; }

/* ---------- profile form ---------- */
.panel { position: fixed; inset: 0; z-index: 60; background: rgba(14, 43, 30, .45); display: grid; place-items: center; padding: 16px; }
.panel-inner { background: #fff; max-width: 480px; width: 100%; padding: 26px; position: relative; }
.panel-inner h2 { margin: 0 0 8px; color: var(--ink); font: 400 26px/1.1 var(--display); }
.panel-inner label { display: block; font: 700 10px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin: 14px 0 0; }
.panel-inner input, .panel-inner select { display: block; width: 100%; margin-top: 6px; padding: 9px 10px; border: 1px solid var(--line); font: 500 14px var(--sans); color: var(--ink); background: #fff; }
.panel-close { position: absolute; top: 10px; right: 12px; background: none; border: 0; font-size: 22px; color: var(--faint); }
.form-error { color: var(--loss); font-size: 12.5px; margin-left: 10px; }

footer.foot { border-top: 1px solid var(--line); padding: 22px 0 40px; font-size: 12.5px; color: var(--faint); }

/* small remove buttons, inside tags, tables and filters */
.x { background: none; border: 0; color: var(--faint); padding: 0 4px; font: 600 14px/1 var(--sans); }
.x:hover { color: var(--loss); }
.filters .x { border: 0; padding: 0 4px; background: none; }
.filters input[type="number"], .filters input[type="search"], .filters input:not([type]) { border: 1px solid var(--line); padding: 6px 8px; font: 500 12.5px var(--sans); color: var(--ink); }
.filters label { display: inline-flex; align-items: center; gap: 6px; }
a.star { display: inline-block; }