@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/DMMono-normal400.woff2') format('woff2'); }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/DMMono-normal500.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: italic; font-weight: 300 700; font-display: swap; src: url('/fonts/DMSans-italic.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/fonts/DMSans-normal.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400 900; font-display: swap; src: url('/fonts/PlayfairDisplay-italic.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('/fonts/PlayfairDisplay-normal.woff2') format('woff2'); }

/* ==========================================================================
   LCA RAG · editorial eco-report
   Calm, earthy, premium: a sustainability annual report as a web app.
   ========================================================================== */
:root {
  /* chrome */
  --forest-700: #1F4D36;
  --forest-900: #163A28;
  --mint-bg: #EAF6EE;
  --cream: #FBF7EE;
  --white: #FFFFFF;
  --hairline: #E4E0D2;
  --hairline-strong: #D6D0BD;
  /* text */
  --choc: #3A2A1E;
  --sage: #7A8B80;          /* decorative and large secondary text */
  --sage-ink: #5E6E64;      /* small secondary text: 5.3:1 on white */
  /* accent */
  --gold: #C9A24B;
  --gold-ink: #8A6A1F;      /* gold for small text on light surfaces */
  /* data (ordered by certainty: dark = measured) */
  --earth-1: #7A4B2A;
  --earth-2: #A0814F;
  --earth-3: #C9BE8F;
  --earth-track: #EFE9D9;
  --rose: #D94A5C;
  /* status tints: pastel fill + darker text of the same hue */
  --good-bg: #DDF1E3;   --good-ink: #1E5A38;
  --okay-bg: #FBF0C8;   --okay-ink: #73560C;
  --work-bg: #FCE3D2;   --work-ink: #8A4317;
  --crit-bg: #FADBE0;   --crit-ink: #9C2235;
  /* surface */
  --radius: 0;  /* boxes have straight edges; pills and inputs stay rounded */
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(58, 42, 30, .04), 0 10px 30px rgba(58, 42, 30, .06);
  --shadow-lift: 0 2px 4px rgba(58, 42, 30, .05), 0 16px 40px rgba(58, 42, 30, .10);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --serif: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --sans: "DM Sans", "Avenir Next", "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: light;

  /* aliases used by inline styles in the scripts */
  --bg: var(--mint-bg);
  --surface: var(--white);
  --surface-2: var(--cream);
  --text: var(--choc);
  --muted: var(--sage-ink);
  --border: var(--hairline);
  --accent: var(--forest-700);
  --accent-strong: var(--forest-700);
  --accent-soft: var(--good-bg);
  --warn: var(--okay-ink);
  --warn-soft: var(--okay-bg);
  --danger: var(--rose);
  --danger-soft: var(--crit-bg);
  --prov: var(--earth-1);
  --prov-soft: var(--cream);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }  /* class display rules must not override `hidden` */
html, body { margin: 0; }
html { scroll-behavior: smooth; }
body {
  color: var(--choc);
  font: 400 15px/1.6 var(--sans);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(1100px 600px at 85% 20%, rgba(255, 255, 255, .55), transparent 70%),
    radial-gradient(900px 700px at 0% 60%, rgba(214, 240, 222, .9), transparent 70%),
    var(--mint-bg);
  -webkit-font-smoothing: antialiased;
}
main { width: 100%; max-width: 1180px; margin: 0 auto; padding: 44px 24px 64px; flex: 1; position: relative; z-index: 2;
  overflow-x: clip; }  /* slide-in offsets must not create sideways scroll; clip keeps sticky elements working */
h1, h2, h3, h4 { margin: 0; color: var(--choc); font-family: var(--serif); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
/* Playfair defaults to old-style figures ("0" reads as "o"); use lining figures everywhere */
body, h1, h2, h3, h4, .bignum, .tile .v, .grade, .sc-result .v, .rank { font-variant-numeric: lining-nums; }
.tile .v, .bignum, .sc-result .v { font-variant-numeric: lining-nums tabular-nums; }
button, input, select { font: inherit; color: inherit; }
.muted, .hint { color: var(--sage-ink); }
.hint { font-size: 12.5px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.mono { font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; }
::selection { background: #F1E3BC; color: var(--choc); }
.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(22, 58, 40, .86);
  backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid rgba(201, 162, 75, .25);
}
.topbar-inner { max-width: 1180px; margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--cream); text-decoration: none; }
.logo { width: 26px; height: 26px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.brand-name { font: 600 21px/1 var(--serif); letter-spacing: .01em; }
.tabs { display: flex; gap: 4px; height: 100%; }
.tab {
  position: relative; display: inline-flex; align-items: center; gap: 8px; height: 100%; padding: 0 16px;
  background: none; border: 0; cursor: pointer; color: rgba(251, 247, 238, .72); font: 500 14px var(--sans);
  transition: color .24s var(--ease);
}
.tab::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0;
  background: var(--gold); transform: scaleX(0); transition: transform .24s var(--ease);
}
.tab:hover { color: var(--cream); }
.tab.active { color: var(--cream); }
.tab.active::after { transform: scaleX(1); }

/* ---------- hero ---------- */
.hero {
  background:
    radial-gradient(700px 360px at 80% 0%, rgba(201, 162, 75, .14), transparent 70%),
    radial-gradient(600px 400px at 10% 100%, rgba(234, 246, 238, .08), transparent 70%),
    linear-gradient(160deg, var(--forest-700), var(--forest-900));
  color: var(--cream);
}
.hero-inner { max-width: 1180px; margin: 0 auto; padding: 56px 24px 72px; }
.eyebrow { margin: 0 0 14px; font: 600 11.5px/1 var(--sans); color: var(--gold); text-transform: uppercase; letter-spacing: .18em; }
.hero h1 { color: var(--cream); font-size: clamp(34px, 5vw, 56px); font-weight: 600; line-height: 1.08; letter-spacing: -.02em; max-width: 14ch; }
.hero h1 em { font-style: italic; font-weight: 500; color: #EBDDB3; }
.lede { max-width: 62ch; margin: 18px 0 0; color: rgba(251, 247, 238, .78); font-size: 16.5px; line-height: 1.65; }
.stats { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 26px; }
.pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 999px;
  background: rgba(251, 247, 238, .08); border: 1px solid rgba(251, 247, 238, .18);
  color: rgba(251, 247, 238, .78); font: 500 12.5px/1.2 var(--sans);
}
.pill b { color: var(--cream); font: 500 12.5px var(--mono); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(251, 247, 238, .3); }
.dot.on { background: #8BD3A5; box-shadow: 0 0 0 3px rgba(139, 211, 165, .2); }

/* ---------- cards & form ---------- */
.card { background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.search-card { margin-bottom: 32px; }
.card-title { position: relative; padding-left: 14px; font-size: 21px; margin-bottom: 10px; }
.card-title::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 3px; border-radius: 3px; background: var(--forest-700); }
.query-row { display: flex; gap: 12px; }
.query-row input {
  flex: 1; min-width: 0; padding: 15px 20px; border-radius: 999px; border: 1px solid var(--hairline-strong);
  background: var(--cream); font-size: 17px; transition: border-color .24s var(--ease), box-shadow .24s var(--ease);
}
.query-row input::placeholder { color: var(--sage); }
input:focus, select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(201, 162, 75, .18); }
button:focus-visible, summary:focus-visible, a:focus-visible, .drop:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
button.primary {
  background: var(--forest-700); color: var(--cream); border: 0; border-radius: 999px; padding: 0 28px; min-height: 46px;
  font: 600 14.5px var(--sans); cursor: pointer; box-shadow: 0 6px 16px rgba(31, 77, 54, .18);
  transition: background .24s var(--ease), transform .24s var(--ease), box-shadow .24s var(--ease);
}
button.primary:hover { background: var(--forest-900); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(31, 77, 54, .22); }
button.primary:disabled { opacity: .6; cursor: progress; transform: none; }
button.ghost { background: var(--white); border: 1px solid var(--hairline); border-radius: 999px; padding: 4px 11px; cursor: pointer; color: var(--sage-ink); transition: border-color .24s var(--ease); }
button.ghost:hover { border-color: var(--hairline-strong); color: var(--choc); }
.examples { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 14px 0 4px; }
.examples > .hint { font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: .14em; color: var(--sage-ink); margin-right: 2px; }
.chip {
  border: 1px solid var(--hairline); background: var(--cream); border-radius: 999px; padding: 6px 14px;
  font-size: 13.5px; cursor: pointer; color: var(--choc); transition: background .24s var(--ease), border-color .24s var(--ease), transform .24s var(--ease);
}
.chip:hover { background: var(--good-bg); border-color: #BFE3CB; transform: translateY(-1px); }
.chip:disabled { opacity: .6; }
.grid.filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 18px; margin-top: 20px; }
label { display: flex; flex-direction: column; gap: 6px; font: 600 11px/1.35 var(--sans); color: var(--sage-ink); text-transform: uppercase; letter-spacing: .12em; }
label select, label input {
  width: 100%; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--hairline);
  background: var(--cream); font: 400 14px/1.35 var(--sans); color: var(--choc); text-transform: none; letter-spacing: 0; min-width: 0;
  transition: border-color .24s var(--ease), box-shadow .24s var(--ease);
}
label select:hover, label input:hover { border-color: var(--hairline-strong); }
.options { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--hairline); }
.options select { padding: 9px 12px; border-radius: 999px; border: 1px solid var(--hairline); background: var(--cream); }
label.check, label.corr { flex-direction: row; align-items: center; gap: 9px; color: var(--choc); font: 500 14px/1.4 var(--sans); text-transform: none; letter-spacing: 0; }
label.corr { align-items: flex-start; }
label.check input, label.corr input { accent-color: var(--forest-700); width: 17px; height: 17px; margin-top: 1px; }
label.inline { flex-direction: row; align-items: center; gap: 8px; }
label.inline input { width: 72px; padding: 8px 10px; }

/* ---------- open panels: controls sit directly on the mint page, no box ---------- */
.panel-head { margin: 0 0 18px; }
.panel-kicker { margin: 0 0 6px; font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: .18em; color: var(--gold-ink); }
.panel-head h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 600; letter-spacing: -.015em; }
.open-panel { background: none; border: 0; box-shadow: none; padding: 0; margin-bottom: 32px; }
.open-panel .query-row input { background: var(--white); border-color: transparent; box-shadow: 0 2px 4px rgba(31, 77, 54, .04), 0 14px 34px rgba(31, 77, 54, .10); padding: 17px 24px; font-size: 17.5px; }
.open-panel .query-row input:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(201, 162, 75, .18), 0 14px 34px rgba(31, 77, 54, .12); }
.open-panel .chip { background: rgba(255, 255, 255, .7); border-color: rgba(31, 77, 54, .12); }
.open-panel .chip:hover { background: var(--white); }
.open-panel label select, .open-panel label input { background: var(--white); border-color: rgba(31, 77, 54, .12); }
.open-panel .options { border-top: 1px solid rgba(31, 77, 54, .12); }
.open-panel .options select { background: var(--white); border-color: rgba(31, 77, 54, .12); }
.open-panel .drop { background: rgba(255, 255, 255, .55); border-color: rgba(31, 77, 54, .25); }
.open-panel .drop:hover, .open-panel .drop.over { background: var(--white); }
.open-panel .tree { margin-top: 4px; }
.open-panel > .muted:first-child { margin-top: 0; }
.tabpanel > .panel-head { animation: rise .42s var(--ease) both .24s; }
.tabpanel > .open-panel { animation: rise .42s var(--ease) both .32s; }

/* ---------- results ---------- */
.results { display: flex; flex-direction: column; gap: 20px; }
.empty { color: var(--sage-ink); text-align: center; padding: 40px 16px; font: italic 400 17px/1.6 var(--serif); }
.loading { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 36px 16px; color: var(--sage-ink); }
.loading ol { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.loading li { display: flex; align-items: center; gap: 8px; opacity: .45; transition: opacity .24s var(--ease); }
.loading li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--hairline-strong); }
.loading li.done { opacity: .8; }
.loading li.done::before { background: var(--forest-700); }
.loading li.now { opacity: 1; color: var(--choc); font-weight: 500; }
.loading li.now::before { background: var(--gold); box-shadow: 0 0 0 3px rgba(201, 162, 75, .2); }
.banner { display: flex; gap: 14px; align-items: flex-start; border-radius: 0; padding: 16px 20px; border: 1px solid var(--hairline); border-left: 4px solid var(--hairline-strong); background: var(--cream); }
.banner.ok { border-left-color: var(--forest-700); background: #F2FAF4; }
.banner.insufficient { border-left-color: var(--gold); background: var(--cream); }
.banner.error { border-left-color: var(--rose); background: #FDF1F2; }
.banner h3 { font-size: 17px; }
.banner p { color: var(--choc); }
.banner ul { margin: 6px 0 0; padding-left: 18px; }
.banner .meta { margin-left: auto; font: 12px/1.6 var(--mono); color: var(--sage-ink); white-space: nowrap; text-align: right; }
.route { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font: 600 11px var(--sans); color: var(--sage-ink); text-transform: uppercase; letter-spacing: .12em; }
.route span.node { background: var(--white); border: 1px solid var(--hairline); padding: 3px 10px; border-radius: 999px; color: var(--choc); font: 400 12.5px var(--sans); text-transform: none; letter-spacing: 0; }

.answer { border-top: 3px solid var(--forest-700); }
.answer .label, .provisional .label, .explain .label, .tile .k, .section-title, .eyebrow-sm {
  font: 600 11px/1.35 var(--sans); text-transform: uppercase; letter-spacing: .14em;
}
.answer .label { color: var(--gold-ink); }
.bignum { font: 600 46px/1.05 var(--serif); letter-spacing: -.02em; margin: 8px 0; color: var(--choc); }
.bignum small { font: 400 14px/1.3 var(--sans); color: var(--sage-ink); letter-spacing: 0; }
.cite { font-size: 13px; color: var(--sage-ink); overflow-wrap: anywhere; }

.provisional { background: var(--cream); border-left: 4px solid var(--earth-2); }
.provisional .label { color: var(--earth-1); }
.provisional .disclaimer { font: italic 500 15.5px/1.45 var(--serif); color: var(--earth-1); margin: 4px 0 12px; }
.range { position: relative; height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--earth-3), var(--earth-2), var(--earth-3)); margin: 20px 4px 8px; }
.range .marker { position: absolute; top: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--white); border: 2px solid var(--earth-1); transform: translateX(-9px); box-shadow: var(--shadow); }
.range-labels { display: flex; justify-content: space-between; font: 12px var(--mono); color: var(--sage-ink); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 14px; }
.two-col h4 { margin: 0 0 6px; font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: .12em; color: var(--sage-ink); }
.two-col ul { margin: 0; padding-left: 18px; font-size: 14px; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; font-size: 13.5px; margin-top: 12px; }
.kv dt { color: var(--sage-ink); }
.kv dd { margin: 0; overflow-wrap: anywhere; }

.section-title { color: var(--sage-ink); margin: 12px 2px -6px; display: flex; align-items: center; gap: 12px; }
.section-title::after { content: ""; flex: 1; border-top: 1px solid var(--hairline-strong); }
.cand {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 16px; align-items: start; cursor: pointer; text-align: left; width: 100%; color: inherit;
  transition: transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
}
.cand:hover, .tile:hover, .rec:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.cand:hover { border-color: var(--hairline-strong); }
.rank { width: 36px; height: 36px; border-radius: 50%; background: var(--cream); border: 1px solid var(--hairline); color: var(--earth-1); display: grid; place-items: center; font: 600 15px/1 var(--serif); }
.cand h3 { font: 600 16.5px/1.35 var(--sans); overflow-wrap: anywhere; letter-spacing: 0; }
.cand .path { font-size: 12.5px; color: var(--sage-ink); margin-top: 4px; }
.tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.tag { font: 400 12px/1.6 var(--sans); padding: 1px 10px; border-radius: 999px; background: var(--cream); border: 1px solid var(--hairline); }
.tag.warn { background: var(--okay-bg); border-color: transparent; color: var(--okay-ink); }
.tag.good { background: var(--good-bg); border-color: transparent; color: var(--good-ink); }
.score { text-align: right; font: 12px/1.6 var(--mono); color: var(--sage-ink); min-width: 104px; }
.meter { height: 6px; background: var(--earth-track); border-radius: 999px; overflow: hidden; margin-top: 6px; }
.meter > i { display: block; height: 100%; border-radius: 999px; background: var(--earth-2); transform-origin: left; animation: grow .6s var(--ease) both .15s; }
.note { font: italic 400 14px/1.6 var(--serif); color: var(--sage-ink); padding: 0 4px; }
.spinner { width: 22px; height: 22px; border: 2px solid var(--earth-track); border-top-color: var(--forest-700); border-radius: 50%; animation: spin 1s linear infinite; display: inline-block; vertical-align: middle; }

/* ---------- drawer ---------- */
.scrim { position: fixed; inset: 0; background: rgba(22, 58, 40, .28); backdrop-filter: blur(2px); z-index: 30; animation: fade .24s var(--ease) both; }
.drawer {
  position: fixed; top: 12px; right: 12px; bottom: 12px; width: min(640px, calc(100% - 24px)); background: var(--cream);
  border: 1px solid var(--hairline); border-radius: var(--radius); z-index: 31; display: flex; flex-direction: column;
  box-shadow: 0 30px 80px rgba(58, 42, 30, .22); animation: slide .28s var(--ease) both; overflow: hidden;
}
.drawer-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--hairline); background: var(--white); }
.drawer-head h2 { font-size: 21px; overflow-wrap: anywhere; }
.drawer-body { overflow: auto; padding: 20px 24px 36px; display: flex; flex-direction: column; gap: 22px; }
.drawer-body h4 { margin: 0 0 8px; font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: .14em; color: var(--sage-ink); }
.calc { display: grid; grid-template-columns: 1fr 110px 90px auto; gap: 10px; align-items: end; }
.calc button { min-height: 40px; }
.calc-out { margin-top: 10px; font-size: 14px; }
.calc-out.ok { color: var(--good-ink); font: 500 13.5px var(--mono); }
.calc-out.err { color: var(--crit-ink); }
table.impacts { width: 100%; border-collapse: collapse; font-size: 13.5px; background: var(--white); border-radius: var(--radius-sm); overflow: hidden; }
table.impacts td { padding: 7px 10px; border-bottom: 1px solid var(--hairline); }
table.impacts td:last-child { text-align: right; font: 12.5px var(--mono); }
table.impacts tr.zero td:last-child { color: var(--sage); }
pre.raw { background: var(--white); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 14px; font: 12px/1.55 var(--mono); overflow: auto; max-height: 300px; margin: 0; white-space: pre-wrap; word-break: break-word; }

/* ---------- eBOM ---------- */
.drop {
  border: 1.5px dashed var(--hairline-strong); border-radius: var(--radius); padding: 34px 24px; text-align: center; cursor: pointer;
  background: var(--cream); transition: border-color .24s var(--ease), background .24s var(--ease);
}
.drop:hover, .drop.over { border-color: var(--forest-700); background: #F2FAF4; }
.drop-title { font: 500 21px/1.3 var(--serif); margin-bottom: 6px; }
.drop-title u { text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.drop-file { margin-top: 12px; font: 500 13px var(--mono); color: var(--forest-700); overflow-wrap: anywhere; }
a.chip { text-decoration: none; display: inline-flex; align-items: center; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.tile {
  background: var(--white); border: 1px solid var(--hairline); border-top: 3px solid var(--forest-700); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow); min-width: 0; transition: transform .24s var(--ease), box-shadow .24s var(--ease);
}
.kpis > .tile:nth-child(2) { border-top-color: var(--gold); }
.kpis > .tile:nth-child(3) { border-top-color: var(--earth-2); }
.kpis > .tile:nth-child(4) { border-top-color: var(--earth-1); }
.tile .k { color: var(--sage-ink); }
.tile .v { font: 600 34px/1.1 var(--serif); letter-spacing: -.02em; margin-top: 8px; color: var(--choc); }
.tile .v small, .sc-result .v small { font: 400 12.5px var(--sans); color: var(--sage-ink); letter-spacing: 0; }
.tile .s { font-size: 12.5px; color: var(--sage-ink); margin-top: 4px; overflow-wrap: anywhere; }
.kpis > .tile.warn { border-top-color: var(--rose); background: linear-gradient(180deg, #FDF4F5, var(--white) 60%); }
.grade-row { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.grade {
  display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding: 0 9px; border-radius: 999px;
  font: 600 14px/1 var(--serif); background: var(--g-bg); color: var(--g-ink);
}
.grade.big { min-width: 58px; height: 58px; border-radius: 50%; padding: 0; font-size: 30px; box-shadow: inset 0 0 0 1px rgba(58, 42, 30, .06); }
.grade.g-A { --g-bg: var(--good-bg); --g-ink: var(--good-ink); }
.grade.g-B { --g-bg: var(--okay-bg); --g-ink: var(--okay-ink); }
.grade.g-C { --g-bg: var(--work-bg); --g-ink: var(--work-ink); }
.grade.g-D { --g-bg: var(--crit-bg); --g-ink: var(--crit-ink); }
/* data sources, ordered dark (measured) to light (estimated); AI also hatched */
.t-evidence { background: var(--earth-1); }
.t-proxy { background: var(--earth-2); }
.t-reference { background: var(--earth-3); box-shadow: inset 0 0 0 1px var(--earth-2); }
.t-provisional { background: repeating-linear-gradient(135deg, var(--earth-2) 0 3px, var(--earth-3) 3px 7px); }
.tierbar { display: flex; gap: 2px; height: 6px; margin: 12px 0 8px; border-radius: 999px; overflow: hidden; background: var(--earth-track); }
.tierbar .seg { transform-origin: left; animation: grow .6s var(--ease) both .2s; }
.seg { display: block; min-width: 3px; }
.swatch { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex: none; }
.legend { display: flex; gap: 18px; flex-wrap: wrap; font: 400 12.5px/1.4 var(--sans); color: var(--sage-ink); margin: 2px 0 14px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.dash-grid { display: grid; grid-template-columns: minmax(280px, 1fr) 2fr; gap: 20px; align-items: start; }
.radar { width: 100%; max-width: 320px; display: block; margin: 12px auto 4px; overflow: visible; }
.radar .ring { fill: none; stroke: var(--hairline); }
.radar .axis { stroke: var(--hairline); }
.radar .shape { fill: rgba(201, 190, 143, .35); stroke: var(--earth-1); stroke-width: 2; stroke-linejoin: round; animation: fade .5s var(--ease) both .15s; }
.radar .dot { fill: var(--white); stroke: var(--earth-1); stroke-width: 2; }
.radar .rlabel { font: 500 11.5px var(--sans); fill: var(--sage-ink); }
.barrow { display: grid; grid-template-columns: minmax(120px, 230px) 1fr 76px; gap: 14px; align-items: center; padding: 6px 0; }
.barrow.pareto { grid-template-columns: minmax(150px, 270px) 1fr 76px 52px; }
.barrow + .barrow { border-top: 1px solid #F2EEE3; }
.barrow .lbl { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barrow .val { font: 12px/1.35 var(--mono); text-align: right; color: var(--sage-ink); }
.barrow .val.cum { color: var(--choc); }
.track { position: relative; height: 16px; border-radius: 999px; background: var(--earth-track); }
.bar { position: absolute; left: 0; top: 0; height: 16px; border-radius: 999px; min-width: 4px; transform-origin: left; animation: grow .6s var(--ease) both; }
.stack { display: flex; gap: 2px; height: 16px; min-width: 4px; border-radius: 999px; overflow: hidden; transform-origin: left; animation: grow .6s var(--ease) both; }
.barrow:nth-child(n+4) :is(.bar, .stack) { animation-delay: .06s; } .barrow:nth-child(n+7) :is(.bar, .stack) { animation-delay: .12s; }
.barrow:nth-child(n+10) :is(.bar, .stack) { animation-delay: .18s; }
.hot { color: var(--rose); font-weight: 600; }
[data-tip] { position: relative; }
[data-tip]:hover::after {
  content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 5; width: max-content; max-width: 320px;
  padding: 8px 12px; border-radius: 10px; background: var(--cream); border: 1px solid var(--hairline); color: var(--choc);
  font: 400 12.5px/1.45 var(--sans); box-shadow: var(--shadow-lift); white-space: normal; pointer-events: none;
  animation: fade .2s var(--ease) both;
}
.recs { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; }
.rec { border: 1px solid var(--hairline); border-radius: 0; padding: 18px; min-width: 0; background: var(--cream); transition: transform .24s var(--ease), box-shadow .24s var(--ease); }
.rec.hotspot { border-left: 4px solid var(--rose); background: #FFFBF8; }
.rec-head b { font: 600 17px var(--serif); }
.advice { margin: 10px 0; padding-left: 18px; font-size: 14px; }
.advice li { margin: 4px 0; }
.ideas-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; margin-bottom: 18px; }
.ideas-wrap .chip { margin-top: 12px; }
.ideas-out { margin-top: 10px; }
.sisters { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.sister { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 11px 14px; background: var(--white); border: 1px solid var(--hairline); border-radius: 0; }
.sister-main { min-width: 0; }
.sister .linkish { overflow-wrap: anywhere; }
.sister .chip { flex: none; }
.good { color: var(--good-ink); }
.scenarios { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.scenario { border: 1.5px dashed var(--hairline-strong); border-radius: 0; padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; background: var(--cream); }
.scenario input, .scenario select { padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--hairline); background: var(--white); min-width: 0; }
.sc-name { font: 600 17px var(--serif); }
.swap { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 12px; background: var(--white); border: 1px solid var(--hairline); border-radius: 0; position: relative; }
.swap .ghost { position: absolute; top: 10px; right: 10px; padding: 0 8px; }
.swap select { margin-right: 40px; }
.row-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.row-actions .primary { padding: 0 24px; }
.sc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 20px; }
.sc-result { border: 1px solid var(--hairline); border-radius: 0; padding: 18px; min-width: 0; background: var(--white); box-shadow: var(--shadow); }
.sc-result.base { background: var(--cream); box-shadow: none; }
.sc-result h4 { margin: 0 0 10px; font-size: 18px; }
.sc-result .v { font: 600 26px/1.1 var(--serif); }
.sc-result .s { font-size: 12.5px; color: var(--sage-ink); }
.delta { margin: 12px 0; font: 500 13px/1.5 var(--mono); padding: 6px 12px; border-radius: 999px; display: inline-block; }
.delta .s { font-family: var(--sans); }
.delta.down { color: var(--good-ink); background: var(--good-bg); }
.delta.up { color: var(--crit-ink); background: var(--crit-bg); }
.explain { border-left: 3px solid var(--hairline-strong); padding: 2px 0 2px 14px; margin-top: 12px; font-size: 14px; }
.explain.ai { border-left-color: var(--gold); }
.explain.ai p, .explain.ai li { font-family: var(--serif); font-style: italic; font-size: 15px; line-height: 1.6; }
.explain .label { color: var(--sage-ink); }
.explain.ai .label { color: var(--gold-ink); }
.explain p { margin: 6px 0; }
.filters-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.filters-row input, .filters-row select { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--hairline); background: var(--cream); }
.filters-row input[type=search] { flex: 1; min-width: 200px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: 0; background: var(--white); }
table.lines { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 800px; }
table.lines th { text-align: left; font: 600 10.5px/1.3 var(--sans); text-transform: uppercase; letter-spacing: .12em; color: var(--sage-ink);
  padding: 12px 12px; border-bottom: 1px solid var(--hairline); white-space: nowrap; background: var(--cream); position: sticky; top: 0; }
th.sortable { cursor: pointer; user-select: none; transition: color .24s var(--ease); }
th.sortable:hover { color: var(--choc); }
th[aria-sort=ascending]::after { content: " ↑"; color: var(--gold-ink); }
th[aria-sort=descending]::after { content: " ↓"; color: var(--gold-ink); }
table.lines td { padding: 11px 12px; border-bottom: 1px solid #F2EEE3; vertical-align: top; }
table.lines tbody tr { transition: background .2s var(--ease); }
table.lines tbody tr:hover { background: #FCFAF4; }
table.lines td.num { text-align: right; font: 12.5px/1.55 var(--mono); white-space: nowrap; }
table.lines tr.hot-row td:first-child { box-shadow: inset 3px 0 0 var(--rose); }
td.notes { min-width: 220px; }
td.notes summary { cursor: pointer; color: var(--sage-ink); font-size: 12.5px; }
td.notes ul { margin: 6px 0 0; padding-left: 16px; }
.linkish { background: none; border: 0; padding: 0; color: var(--forest-700); cursor: pointer; text-align: left; font: inherit;
  text-decoration: underline; text-decoration-color: rgba(201, 162, 75, .55); text-decoration-thickness: 1.5px; text-underline-offset: 3px;
  transition: text-decoration-color .24s var(--ease); }
.linkish:hover { text-decoration-color: var(--gold); }
.status { display: inline-block; font: 500 11.5px/1.6 var(--sans); padding: 1px 10px; border-radius: 999px; white-space: nowrap; }
.status.evidence { background: var(--good-bg); color: var(--good-ink); }
.status.proxy { background: var(--okay-bg); color: var(--okay-ink); }
.status.reference { background: #F1EBDB; color: #66502C; }
.status.provisional { background: var(--work-bg); color: var(--work-ink); }
.status.not_covered { background: #F3F1EA; color: var(--sage-ink); }
.status.invalid { background: var(--crit-bg); color: var(--crit-ink); }
.status.corrected { background: var(--okay-bg); color: var(--okay-ink); margin-left: 4px; }
.conf { font: 500 12px var(--sans); padding: 1px 9px; border-radius: 999px; }
.conf.c-high { color: var(--good-ink); background: var(--good-bg); }
.conf.c-medium { color: var(--okay-ink); background: var(--okay-bg); }
.conf.c-low { color: var(--work-ink); background: var(--work-bg); }
.sub { font-size: 12.5px; color: var(--sage-ink); margin-top: 3px; }
.method summary { cursor: pointer; font: 600 17px var(--serif); }
.method ul { margin: 14px 0 0; padding-left: 18px; font-size: 14px; }
.method li { margin: 5px 0; }

/* ---------- hierarchy ---------- */
.tree, .tree ul { list-style: none; margin: 0; padding-left: 22px; }
.tree { padding-left: 0; margin-top: 14px; }
.tree ul { border-left: 1px solid var(--hairline); margin-left: 12px; }
.tree li { margin: 4px 0; }
.tree .row { display: flex; align-items: center; gap: 6px; }
.tree .caret { width: 26px; height: 26px; border: 0; background: none; cursor: pointer; color: var(--sage); border-radius: 50%; transition: background .24s var(--ease); }
.tree .caret:hover { background: var(--cream); color: var(--choc); }
.tree .caret:disabled { visibility: hidden; }
.tree .name { background: none; border: 0; padding: 3px 6px; cursor: pointer; color: var(--choc); text-align: left; border-radius: 8px; font: 500 14.5px var(--sans); transition: background .24s var(--ease); }
.tree > li > .row .name { font: 600 17px var(--serif); }
.tree .name:hover { background: var(--good-bg); }
.tree .count { font: 12px var(--mono); color: var(--sage-ink); }

.foot { margin-top: auto; background: var(--forest-900); color: rgba(251, 247, 238, .7); text-align: center; font: 400 13px/1.6 var(--sans); padding: 22px 24px; }

/* Playfair defaults to old-style figures ("0" reads as "o"). Declared last because the
   `font` shorthand used above resets font-variant-numeric. */
.tile .v, .bignum, .sc-result .v, .grade, .rank, .rec-head b, .card-title, .hero h1 { font-variant-numeric: lining-nums tabular-nums; }

/* ---------- saved analysis note ---------- */
.saved-note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px 10px 14px; border-radius: 999px;
  background: var(--good-bg); color: var(--good-ink); font-size: 13.5px; align-self: flex-start; }
.saved-note.warn { background: var(--okay-bg); color: var(--okay-ink); }
.saved-note .chip { background: var(--white); border-color: transparent; padding: 4px 12px; font-size: 12.5px; }
.saved-icon { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--white); font-size: 12px; }

/* ---------- yellow boxes with brown writing ---------- */
.card, .tile, .table-wrap, .sc-result, .sister, .swap, .drawer, table.impacts, pre.raw, .section-nav {
  --box: #FDF3D3;
  --box-2: #F8E9BC;
  --box-line: #EAD9A6;
  --sage-ink: #6B4E30;      /* secondary writing: warm brown, 6.6:1 on the yellow */
  --sage: #8A6A47;
  --earth-track: #F1E2B5;
  color: var(--choc);
}
.card, .tile, .table-wrap, .sc-result, .sister, .swap, .drawer, table.impacts, pre.raw { background: var(--box); border-color: var(--box-line); }
.provisional { background: #FBEFD0; }
.banner, .banner.insufficient { background: #FDF3D3; border-color: #EAD9A6; --sage-ink: #6B4E30; }
.banner.ok { background: #FDF3D3; border-color: #EAD9A6; border-left-color: var(--forest-700); }
.banner.error { background: #FCE7DF; border-color: #EAD9A6; border-left-color: var(--rose); }
.kpis > .tile.warn { background: linear-gradient(180deg, #FCE7DF, var(--box) 60%); }
.drawer-head, table.lines th { background: var(--box-2); }
.drawer-head { border-bottom-color: var(--box-line); }
table.lines th, table.lines td, table.impacts td { border-color: var(--box-line); }
table.lines td { border-bottom-color: #F1E3B8; }
table.lines tbody tr:hover { background: #FBEBC0; }
.card .rank, .card .tag, .card .route span.node { background: var(--box-2); border-color: var(--box-line); }
.card :is(input, select), .drawer :is(input, select), .swap :is(input, select) { background: #FFFBEE; border-color: var(--box-line); }
.barrow + .barrow { border-top-color: #F1E3B8; }
.section-nav { background: rgba(253, 243, 211, .92); border-color: var(--box-line); }
.section-nav a:hover { background: var(--box-2); }
.sc-result.base { background: var(--box-2); }
/* pastel badges keep their shape on yellow */
.card .grade, .tile .grade, .sc-result .grade, .card .status, .card .conf { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g-ink, currentColor) 30%, transparent); }

/* ---------- motion: subtle, organic ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes rowin { from { opacity: 0; transform: translateY(6px); } }
@keyframes drift { to { transform: translate(-70px, 46px) scale(1.1); } }
@keyframes panel { from { opacity: 0; transform: translateY(8px); } }
@keyframes radarin { from { opacity: 0; transform: scale(.6); } }
@keyframes gradein { from { opacity: 0; transform: scale(.86); } }
@keyframes barin { from { transform: scaleY(0); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(31, 77, 54, .28); } 100% { box-shadow: 0 0 0 16px rgba(31, 77, 54, 0); } }

/* scroll: progress line in the top bar, firmer bar once scrolled, hero drifting away */
.topbar { transition: background .3s var(--ease), box-shadow .3s var(--ease); }
.topbar::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--gold);
  transform-origin: left; transform: scaleX(var(--scroll-progress, 0)); }
.topbar.scrolled { background: rgba(22, 58, 40, .95); box-shadow: 0 8px 24px rgba(22, 58, 40, .18); }
.hero-text { transform: translateY(calc(var(--hero-shift, 0) * -.18px)); opacity: calc(1 - var(--hero-shift, 0) / 520); will-change: transform; }
.hero-tree { transform: translateY(calc(var(--hero-shift, 0) * -.08px)); }

/* sticky section navigation for eBOM results */
.section-nav { position: sticky; top: 72px; z-index: 15; display: flex; gap: 4px; flex-wrap: wrap; align-self: center;
  padding: 6px; border-radius: 999px; background: rgba(255, 255, 255, .86); border: 1px solid var(--hairline);
  box-shadow: var(--shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); animation: rise .35s var(--ease) both; }
.section-nav a { position: relative; padding: 7px 14px; border-radius: 999px; color: var(--sage-ink); font: 500 13px var(--sans);
  text-decoration: none; transition: background .24s var(--ease), color .24s var(--ease); }
.section-nav a:hover { color: var(--choc); background: var(--cream); }
.section-nav a.active { color: var(--cream); background: var(--forest-700); }
[id^="sec-"], #whatif { scroll-margin-top: 130px; }

/* back to top, with a gold ring that fills as you scroll */
.to-top { position: fixed; right: 24px; bottom: 24px; z-index: 25; width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; color: var(--cream);
  background: radial-gradient(circle, var(--forest-700) 62%, transparent 63%),
    conic-gradient(var(--gold) calc(var(--scroll-progress, 0) * 360deg), rgba(201, 162, 75, .2) 0);
  box-shadow: 0 10px 24px rgba(22, 58, 40, .25); opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease); }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { transform: translateY(-2px); }

/* hotspot rows: one soft rose sweep when they come into view */
.barrow.is-hot { position: relative; }
.barrow.is-hot::before { content: ""; position: absolute; inset: 0 -10px; border-radius: 10px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(217, 74, 92, .12), transparent); background-size: 200% 100%;
  animation: sweep 1.6s var(--ease) both .4s; }
@keyframes sweep { from { background-position: 150% 0; opacity: 1; } to { background-position: -50% 0; opacity: .5; } }

/* hero: staggered entrance and slow ambient light */
.hero { position: relative; overflow: hidden; }
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(50px); pointer-events: none;
  animation: drift 26s ease-in-out infinite alternate; }
.hero::before { width: 440px; height: 440px; top: -140px; right: 6%; background: radial-gradient(circle, rgba(201, 162, 75, .32), transparent 70%); }
.hero::after { width: 560px; height: 560px; bottom: -300px; left: -120px; background: radial-gradient(circle, rgba(139, 211, 165, .22), transparent 70%); animation-duration: 34s; }
.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); gap: 32px; align-items: center; }

/* hero tree: line-drawn, leaves fade in, canopy sways very slightly */
.hero-tree { width: 100%; max-width: 380px; justify-self: end; overflow: visible; }
.hero-tree .branches path, .hero-tree .ground path { fill: none; stroke: rgba(251, 247, 238, .72); stroke-width: 2.2; stroke-linecap: round; }
.hero-tree .branches path:first-child { stroke-width: 4; }
.hero-tree .ground .soil { stroke: rgba(201, 162, 75, .55); stroke-width: 1.4; stroke-dasharray: 2 6; }
.hero-tree .lf { stroke-width: 1; }
.hero-tree .lf.mint { fill: rgba(139, 211, 165, .16); stroke: rgba(234, 246, 238, .32); }
.hero-tree .lf.gold { fill: rgba(201, 162, 75, .2); stroke: rgba(201, 162, 75, .45); }
.hero-tree .nodes circle { fill: var(--gold); }
.hero-tree .canopy { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 9s ease-in-out infinite alternate; }
.hero-tree .branches path { stroke-dasharray: 260; animation: drawline .9s var(--ease) both .3s; }
.hero-tree .lf { transform-box: fill-box; transform-origin: center; animation: leafin .5s var(--ease) both; }
.hero-tree .lf:nth-child(1) { animation-delay: .55s; } .hero-tree .lf:nth-child(2) { animation-delay: .62s; }
.hero-tree .lf:nth-child(3) { animation-delay: .69s; } .hero-tree .lf:nth-child(4) { animation-delay: .76s; }
.hero-tree .lf:nth-child(5) { animation-delay: .83s; } .hero-tree .lf:nth-child(6) { animation-delay: .9s; }
.hero-tree .lf:nth-child(7) { animation-delay: .97s; } .hero-tree .lf:nth-child(8) { animation-delay: 1.04s; }
.hero-tree .lf:nth-child(9) { animation-delay: 1.11s; } .hero-tree .lf:nth-child(10) { animation-delay: 1.18s; }
.hero-tree .nodes circle { animation: fade .4s var(--ease) both 1.2s; }
@keyframes sway { from { transform: rotate(-.8deg); } to { transform: rotate(.8deg); } }
@keyframes drawline { from { stroke-dashoffset: 260; } to { stroke-dashoffset: 0; } }
@keyframes leafin { from { opacity: 0; transform: scale(.7); } }
.hero .eyebrow, .hero h1, .hero .lede { animation: rise .42s var(--ease) both; }
.hero .eyebrow { animation-delay: .05s; } .hero h1 { animation-delay: .13s; } .hero .lede { animation-delay: .21s; }
.tabpanel > .card:first-child { animation: rise .42s var(--ease) both .28s; }
.logo { transition: transform .3s var(--ease); }
.brand:hover .logo { transform: rotate(-14deg); }

/* tab switches, presses, focus */
.tabpanel:not([hidden]) { animation: panel .28s var(--ease) both; }
button.primary:active, .chip:active, .tab:active { transform: scale(.97); }
.query-row input:focus { background: var(--white); }

/* staggered groups */
.kpis > .tile.reveal:nth-child(2) { transition-delay: .06s; } .kpis > .tile.reveal:nth-child(3) { transition-delay: .12s; }
.kpis > .tile.reveal:nth-child(4) { transition-delay: .18s; }
.recs > .rec.reveal:nth-child(3n+2), .ideas-wrap > .rec.reveal:nth-child(3n+2) { transition-delay: .06s; }
.recs > .rec.reveal:nth-child(3n), .ideas-wrap > .rec.reveal:nth-child(3n) { transition-delay: .12s; }
.sisters .sister, .advice li, .loading li { animation: rowin .28s var(--ease) both; }
.sisters .sister:nth-child(3) { animation-delay: .06s; } .sisters .sister:nth-child(4) { animation-delay: .12s; }
#items-body tr { animation: rowin .3s var(--ease) both; }
#items-body tr:nth-child(2) { animation-delay: .02s; } #items-body tr:nth-child(3) { animation-delay: .04s; }
#items-body tr:nth-child(4) { animation-delay: .06s; } #items-body tr:nth-child(5) { animation-delay: .08s; }
#items-body tr:nth-child(6) { animation-delay: .1s; } #items-body tr:nth-child(7) { animation-delay: .12s; }
#items-body tr:nth-child(8) { animation-delay: .14s; } #items-body tr:nth-child(n+9) { animation-delay: .16s; }
.tree ul > li { animation: rowin .26s var(--ease) both; }
details[open] > :not(summary) { animation: rowin .24s var(--ease) both; }
.sc-grid > .sc-result { animation: rise .32s var(--ease) both; }
.sc-grid > .sc-result:nth-child(2) { animation-delay: .07s; } .sc-grid > .sc-result:nth-child(3) { animation-delay: .14s; }
.sc-grid > .sc-result:nth-child(4) { animation-delay: .21s; }

/* charts and marks */
.radar .shape { transform-box: fill-box; transform-origin: center; animation: radarin .5s var(--ease) both .1s; }
.radar .dot { animation: fade .3s var(--ease) both .45s; }
.grade.big { animation: gradein .4s var(--ease) both .15s; }
.card-title::before { transform-origin: top; animation: barin .4s var(--ease) both .1s; }
.section-title::after { transform-origin: left; animation: grow .6s var(--ease) both; }
.saved-note { animation: rise .32s var(--ease) both; }

/* drop zone */
.drop-title { transition: transform .24s var(--ease); }
.drop:hover .drop-title { transform: translateY(-2px); }
.drop.loaded { animation: pulse 1.1s var(--ease) 1; border-color: var(--forest-700); }

/* loading skeleton */
.skeleton { display: grid; gap: 10px; width: min(560px, 100%); margin-top: 6px; }
.skeleton i { display: block; height: 12px; border-radius: 999px; background: linear-gradient(90deg, var(--earth-track) 0%, #F8F4E8 50%, var(--earth-track) 100%);
  background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.skeleton i:nth-child(2) { width: 82%; } .skeleton i:nth-child(3) { width: 58%; }

@keyframes grow { from { transform: scaleX(0); } }
@keyframes fade { from { opacity: 0; } }
@keyframes slide { from { transform: translateX(24px); opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
.reveal { opacity: 0; transform: translateY(28px) scale(.985); transition: opacity .5s var(--ease), transform .55s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.dash-grid > .reveal:first-child { transform: translateX(-28px); }
.dash-grid > .reveal:last-child { transform: translateX(28px); transition-delay: .08s; }
.dash-grid > .reveal.in { transform: none; }
/* charts, meters and rows wait until their card scrolls into view, then play */
.reveal:not(.in), .reveal:not(.in) * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  .dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-tree { display: none; }
}
@media (max-width: 760px) {
  .section-nav { top: 104px; border-radius: 14px; }
  .section-nav a { padding: 6px 10px; font-size: 12.5px; }
  .to-top { right: 16px; bottom: 16px; }
  .topbar-inner { height: auto; flex-wrap: wrap; padding-top: 10px; gap: 4px; }
  .tabs { width: 100%; overflow-x: auto; height: 46px; }
  .tab { padding: 0 12px; }
  .hero-inner { padding: 40px 20px 92px; }
  .barrow { grid-template-columns: 100px 1fr 60px; }
  .barrow.pareto { grid-template-columns: 100px 1fr 56px 42px; }
  .grid.filters { grid-template-columns: 1fr 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .cand { grid-template-columns: 36px 1fr; }
  .score { grid-column: 2; text-align: left; }
  .calc { grid-template-columns: 1fr 1fr; }
  .banner { flex-wrap: wrap; }
  .banner .meta { margin-left: 0; text-align: left; }
}
@media (max-width: 460px) {
  main, .topbar-inner, .hero-inner { padding-left: 16px; padding-right: 16px; }
  .kpis { grid-template-columns: 1fr; }
  .grid.filters { grid-template-columns: 1fr; }
  .query-row { flex-direction: column; }
  .query-row button { min-height: 46px; }
  .bignum { font-size: 38px; }
  .tab .icon { display: none; }
}