:root {
  --bg: #f5f7fb;
  --ink: #0f172a;
  --ink-soft: #475569;
  --ink-faint: #8a94a6;
  --line: #e6eaf1;
  --line-strong: #d3d9e3;
  --accent: #2456e8;
  --accent-strong: #1a43c8;
  --accent-soft: #edf2ff;
  --accent-ring: rgba(36, 86, 232, .18);
  --nav: #ffffff;
  --zebra: #fafbfd;
  --neg: #d92d20;
}

* { box-sizing: border-box; }

/* `.body { display: flex }` below is author CSS and so outranks the browser's
   `[hidden] { display: none }`, which would leave a hidden view still laid out.
   This keeps the `hidden` attribute authoritative for view switching. */
[hidden] { display: none !important; }

/* App shell: the page itself never scrolls. Nav, toolbar and the statement header
   stay put; only the grid (and the page list) scroll internally, so a statement always
   sits inside the frame and the column headers stay visible. */
html, body { height: 100%; }
body { display: flex; flex-direction: column; overflow: hidden; }

body {
  margin: 0;
  font-family: "Segoe UI", -apple-system, system-ui, Arial, sans-serif;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* ---------------- top navigation ---------------- */
.topnav {
  display: flex;
  align-items: center;
  gap: 22px;
  background: var(--nav);
  color: #e8eaed;
  padding: 7px 18px;
  flex-wrap: wrap;
}
.topnav { flex-wrap: nowrap; }
.brand { font-size: 16px; font-weight: 600; color: #fff; letter-spacing: .2px; flex: 0 0 auto; }
/* Keep the nav on one line at any width; overflow scrolls rather than wrapping
   into a three-line block. */
.navlinks {
  display: flex;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.navlinks::-webkit-scrollbar { display: none; }
.navlink {
  color: #aeb6c2;
  text-decoration: none;
  font-size: 13px;
  padding: 6px 9px;
  border-radius: 5px;
  white-space: nowrap;
  flex: 0 0 auto;
}
.navlink.active { background: var(--accent); color: #fff; font-weight: 600; }
.navlink.disabled { color: #6b7481; cursor: default; }
.navlink.disabled:hover { color: #8b94a1; }
.navright select {
  padding: 6px 10px;
  border-radius: 5px;
  border: 1px solid #3a4048;
  background: #23272c;
  color: #e8eaed;
  font-size: 13.5px;
}
.navright { display: flex; align-items: center; gap: 10px; }
.navright .btn-sm {
  margin-bottom: 0;
  border: 1px solid #3a4048;
  background: #23272c;
  color: #e8eaed;
}
.navright .btn-sm:hover { background: #2c3138; border-color: #4a525c; }

/* ---------------- toolbar ---------------- */
/* Labels sit inline to the left of each control rather than stacked above it —
   that alone halves the toolbar's height. */
.toolbar {
  display: flex;
  align-items: center;
  gap: 6px 14px;
  padding: 8px 18px;
  border-bottom: 1px solid var(--line);
  background: #fcfdfe;
  flex-wrap: wrap;
}
.field { display: flex; align-items: center; gap: 7px; min-width: 0; flex: 0 1 auto; }
.field > label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}
.field input,
.field select {
  padding: 5px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  font-size: 12.5px;
  color: var(--ink);
  background: #fff;
  max-width: 100%;
}
#companySearch { width: 260px; min-width: 160px; }
#returnSelect { width: 300px; min-width: 170px; }
#periodSelect { min-width: 120px; }
.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field label.toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  white-space: nowrap;
  padding: 0;
  cursor: pointer;
}
.exportbar { margin-left: auto; }
.exportbar button {
  padding: 5px 13px;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  border-radius: 5px;
  font-size: 12.5px;
  cursor: pointer;
}
.exportbar button:hover { background: #1a54a8; }

/* ---------------- layout ---------------- */
.topnav, .toolbar { flex: 0 0 auto; }
.body { display: flex; align-items: stretch; flex: 1 1 auto; min-height: 0; }

.pagesnav {
  width: 210px;
  flex: 0 0 210px;
  border-right: 1px solid var(--line);
  padding: 10px 0;
  background: #fcfdfe;
  overflow-y: auto;
}
.pagesnav-title {
  padding: 0 14px 7px;
  font-weight: 700;
  color: var(--ink-faint);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.page-item {
  padding: 5px 14px;
  cursor: pointer;
  border-left: 3px solid transparent;
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.3;
}
.page-item:hover { background: #f1f5fa; color: var(--ink); }
.page-item.active {
  background: var(--accent-soft);
  border-left-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.statement {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: 12px 18px 14px;
  display: flex;
  flex-direction: column;
}

/* ---------------- statement header ---------------- */
.statement-header { margin-bottom: 8px; flex: 0 0 auto; }
.hdr-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.statement-header .entity-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.3;
}
.statement-header .statement-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-top: 1px;
  line-height: 1.3;
}
.meta-line {
  margin-top: 5px;
  font-size: 11.5px;
  line-height: 1.7;
}
.meta-line > * { margin-right: 8px; }
.pill {
  background: #eef1f5;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 10px;
  font-weight: 600;
  color: var(--ink);
}
.muted { color: var(--ink-faint); }

.status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fdeceb;
  color: #a3261c;
  border: 1px solid #f3c6c2;
  font-size: 11.5px;
  font-weight: 600;
}
.status-badge.calendar-badge {
  background: var(--accent-soft);
  color: var(--accent);
  border-color: var(--accent-soft);
}

/* ---------------- statement table ---------------- */
.table-wrap {
  overflow: auto;                /* grid scrolls here, not the page */
  border: 1px solid var(--line);
  border-radius: 7px;
  flex: 1 1 auto;
  min-height: 0;
}

.statement-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 12.5px;
  line-height: 1.3;
}
.statement-table th,
.statement-table td {
  padding: 2px 10px;
  border-bottom: 1px solid var(--line);
  text-align: right;
  white-space: nowrap;
  vertical-align: top;
}
.statement-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f4f6f9;
  color: var(--ink-soft);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-align: right;
  border-bottom: 2px solid var(--line-strong);
  white-space: normal;
  min-width: 108px;
  max-width: 200px;
  line-height: 1.3;
  vertical-align: bottom;
}
/* Some column labels are a full sentence; clamp to keep the header band shallow.
   The untruncated text stays available as the cell's tooltip. */
.statement-table thead th .th-in {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.statement-table thead th.label-col,
.statement-table thead th.code-col { text-align: left; }

.statement-table tbody tr:nth-child(even) { background: var(--zebra); }
.statement-table tbody tr:hover { background: #eef4fc; }

/* line-code column: the form's own numbering, de-emphasised */
td.code-col, th.code-col {
  width: 48px;
  min-width: 48px;
  text-align: left;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

/* label column: wraps, indents by depth, with a subtle guide rule */
td.label-col {
  text-align: left;
  white-space: normal;
  min-width: 240px;
  max-width: 520px;
  color: var(--ink);
}
/* Long item names are the single biggest driver of row height — some wrapped to five
   lines, making rows 145px tall. One line each keeps every statement scannable; the
   full text is on hover and always intact in the CSV export. */
td.label-col .lbl {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Opt back into full wrapped labels when reading rather than scanning. */
body.wrap-labels td.label-col .lbl { white-space: normal; overflow: visible; }
body.wrap-labels td.label-col { white-space: normal; }
/* form cross-reference printed beside an item ("A ÷ F x 100") */
td.label-col .xref {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #f6f8fa;
  color: var(--ink-faint);
  font-size: 11px;
  white-space: nowrap;
}

.depth-0 td.label-col { padding-left: 12px; }
.depth-1 td.label-col { padding-left: 32px; }
.depth-2 td.label-col { padding-left: 52px; }
.depth-3 td.label-col { padding-left: 72px; }
.depth-4 td.label-col { padding-left: 92px; }
.depth-5 td.label-col { padding-left: 112px; }
.depth-1 td.label-col, .depth-2 td.label-col,
.depth-3 td.label-col, .depth-4 td.label-col,
.depth-5 td.label-col {
  background-image: linear-gradient(var(--line), var(--line));
  background-size: 1px calc(100% - 12px);
  background-position: 18px 6px;
  background-repeat: no-repeat;
}

/* structural rows carry no figures — present them as headings, not blank data */
tr.group-row td.label-col { font-weight: 600; color: var(--ink); }
tr.group-row.depth-0 td.label-col {
  text-transform: none;
  font-size: 12.5px;
  padding-top: 5px;
}
tr.group-row td.num { color: transparent; }

tr.total-row td { font-weight: 700; background: #f7f9fb; }
tr.total-row td.num { border-top: 1px solid var(--line-strong); }

/* Calculated fields (Shareholders Equity, etc.): not on the filed return, computed
   here — deliberately a visibly darker grey than the zebra/total shading above so
   there is no mistaking it for something OSFI itself reported. */
tr.calc-row td {
  background: #d8dbe0 !important;
  font-weight: 600;
  border-top: 1px solid var(--line-strong);
}
tr.calc-row:hover td { background: #ccd0d6 !important; }
tr.calc-row td.code-col { color: var(--ink-soft); font-weight: 700; text-align: center; }
.calc-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 4px;
  background: #6b7280;
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  vertical-align: middle;
}

td.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  min-width: 108px;
}
td.num.empty { color: var(--ink-faint); }
td.num.neg { color: var(--neg); }

@media (max-width: 980px) {
  .pagesnav { width: 178px; flex-basis: 178px; }
  .statement { padding: 10px 12px 24px; }
  /* keep the dense row height here — an earlier value silently overrode it */
  .statement-table th, .statement-table td { padding: 2px 8px; }
  td.label-col { min-width: 200px; }
  td.num, .statement-table thead th { min-width: 88px; }
}

/* ================= Analysis tab ================= */
.analysis { display: flex; }
.an-side {
  width: 330px; flex: 0 0 330px;
  border-right: 1px solid var(--line);
  background: #fcfdfe;
  overflow-y: auto;
  padding: 10px 12px 24px;
}
.an-block { margin-bottom: 16px; }
.an-title {
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 6px;
}
.an-side input, .an-side select {
  width: 100%; padding: 5px 8px; font-size: 12.5px;
  border: 1px solid var(--line-strong); border-radius: 5px; background: #fff;
  margin-bottom: 6px;
}
.an-row { display: flex; gap: 6px; align-items: center; }
.an-row > input, .an-row > select { flex: 1 1 auto; min-width: 0; }
#anCalcUnit { flex: 0 0 auto; width: auto; }
.btn-sm {
  padding: 5px 10px; font-size: 12px; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--line-strong); background: #fff; border-radius: 5px; margin-bottom: 6px;
}
.btn-sm:hover { background: #eef4fc; border-color: var(--accent); }
.btn-primary {
  width: 100%; padding: 7px 12px; font-size: 12.5px; cursor: pointer;
  border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: 5px;
}
.btn-primary:disabled { opacity: .6; cursor: default; }
.an-hint { font-size: 10.5px; color: var(--ink-faint); line-height: 1.4; margin: 2px 0 6px; }
.an-empty { font-size: 11.5px; color: var(--ink-faint); padding: 8px 2px; }
.an-empty.big { padding: 40px 20px; text-align: center; font-size: 13px; }

.an-results { max-height: 260px; overflow-y: auto; border: 1px solid var(--line); border-radius: 5px; background: #fff; }
.an-page { padding: 6px 8px; border-bottom: 1px solid var(--line); cursor: pointer; }
.an-page:hover { background: #eef4fc; }
.an-page:last-child { border-bottom: none; }

/* Query tab's company multi-select — a checkbox row per company, same list chrome
   (.an-results) as the page picker, taller since it's often the longest list on the
   page (every filer in a universe). */
.bq-checklist { max-height: 320px; }
.bq-check-row {
  display: flex; align-items: center; gap: 7px; padding: 5px 8px;
  border-bottom: 1px solid var(--line); font-size: 12px; cursor: pointer;
}
.bq-check-row:hover { background: #eef4fc; }
.bq-check-row:last-child { border-bottom: none; }
.bq-check-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-hit-top { display: flex; gap: 6px; align-items: baseline; }
.an-hit-label { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-hit-sub { font-size: 10px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag {
  font-size: 9.5px; font-weight: 700; padding: 1px 5px; border-radius: 3px;
  background: var(--accent-soft); color: var(--accent); flex: 0 0 auto;
}
.tag-off { background: #fdeceb; color: #a3261c; }

.an-series { display: flex; flex-direction: column; gap: 4px; }
.an-ser { border: 1px solid var(--line); border-radius: 5px; padding: 5px 7px; background: #fff; }
.an-ser-main { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.an-ser-name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-ser-sub { font-size: 10px; color: var(--ink-faint); padding-left: 20px; display: flex; justify-content: space-between; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.an-x {
  border: none; background: none; color: var(--ink-faint); cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0 2px;
}
.an-x:hover { color: var(--neg); }
.an-ser-actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }

/* Screener — full-page layout (not the an-side/an-main split every other tab
   uses): a top toolbar (period/basis/run), then criteria/picker/results panels
   stacked full-width, each scrolling with the page rather than in its own
   cramped column. */
.body.screener-page {
  flex-direction: column; overflow-y: auto; align-items: stretch;
  padding: 12px 20px 40px; gap: 14px;
}
.sc-toolbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 10px; position: sticky; top: 0; z-index: 5; background: #fff;
  padding: 8px 0 10px; border-bottom: 1px solid var(--line); margin: 0 -20px; padding-left: 20px; padding-right: 20px;
}
.sc-toolbar-title { font-size: 15px; font-weight: 700; }
.sc-toolbar-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sc-toolbar-label { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-soft); }
.sc-toolbar-label select { padding: 5px 8px; font-size: 12.5px; border: 1px solid var(--line-strong); border-radius: 5px; background: #fff; }
.sc-panel { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 12px 14px; }
.sc-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.sc-panel-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); }
.sc-export { display: flex; align-items: center; gap: 6px; }
.sc-export input { padding: 5px 8px; font-size: 12.5px; border: 1px solid var(--line-strong); border-radius: 5px; width: 200px; }

.sc-criteria-table { width: 100%; border-collapse: collapse; }
.sc-criteria-table th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-faint); padding: 4px 8px; border-bottom: 1px solid var(--line);
}
.sc-criteria-table td { padding: 7px 8px; border-bottom: 1px solid var(--line); font-size: 12.5px; vertical-align: middle; }
.sc-criteria-table tr:last-child td { border-bottom: none; }
.sc-op-select { padding: 4px 6px; font-size: 12px; border: 1px solid var(--line-strong); border-radius: 5px; background: #fff; }
.sc-val-input { width: 140px; padding: 4px 8px; font-size: 12.5px; border: 1px solid var(--line-strong); border-radius: 5px; }
.an-edit-calc {
  border: none; background: none; color: var(--ink-faint); cursor: pointer;
  font-size: 11px; line-height: 1; padding: 0 2px;
}
.an-edit-calc:hover { color: var(--accent); }

.an-main { flex: 1 1 auto; min-width: 0; overflow-y: auto; padding: 12px 16px 30px; }
.an-dash { display: flex; flex-direction: column; gap: 14px; }
.an-card { border: 1px solid var(--line); border-radius: 7px; background: #fff; padding: 10px 12px; }
.an-card-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-weight: 600; font-size: 13px; margin-bottom: 6px;
}
.an-card-type { font-size: 10.5px; color: var(--ink-faint); font-weight: 400; text-transform: uppercase; }
.an-svg { width: 100%; height: auto; display: block; }
.an-grid { stroke: #eceff3; stroke-width: 1; }
.an-zero { stroke: #c2cad6; stroke-width: 1; }
.an-t { font-size: 9.5px; fill: #6b7280; }
.an-r { text-anchor: end; }
.an-l { text-anchor: start; }
.an-c { text-anchor: middle; }
.an-legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 10.5px; color: var(--ink-soft); margin-top: 6px; }
.an-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 4px; }

.an-flash {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%) translateY(12px);
  background: #23272c; color: #fff; padding: 8px 14px; border-radius: 6px; font-size: 12.5px;
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; z-index: 50;
}
.an-flash.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- Analysis: period controls + drag and drop ---- */
.an-to { font-size: 11px; color: var(--ink-faint); flex: 0 0 auto; padding: 0 2px 6px; }
#anFrom, #anTo { min-width: 0; }

.grip {
  cursor: grab; color: var(--ink-faint); font-size: 11px; letter-spacing: -2px;
  margin-right: 5px; user-select: none; flex: 0 0 auto;
}
.an-card-head .grip { vertical-align: middle; }
.an-ser[draggable="true"] { cursor: grab; }
.dragging { opacity: .45; }

/* ---- Analysis: statement preview (pick a statement -> full page -> tick a value) ---- */
.an-preview-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 4px;
}
.an-preview-title { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.an-preview-section { font-weight: 600; }
.an-preview-period { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-soft); margin-left: auto; }
.an-preview-period select { padding: 4px 6px; font-size: 12px; border: 1px solid var(--line-strong); border-radius: 5px; }
.an-preview-table td.num { padding: 0; }
.cell-pick {
  display: flex; align-items: center; justify-content: flex-end; gap: 5px;
  padding: 4px 8px; cursor: pointer; width: 100%; box-sizing: border-box;
}
.cell-pick input[type="checkbox"], .cell-pick input[type="radio"] { flex: 0 0 auto; cursor: pointer; }
.cell-pick input[disabled] { cursor: default; }
td.cell-picked { background: var(--accent-soft); }
td.cell-match { background: #fff6d8; }
td.cell-match .cell-pick:hover { background: #ffedae; }
tr.row-match > td.label-col { background: #fffaf0; }
tr.row-match > td.label-col .lbl { font-weight: 600; }

/* drop targets */
.an-series.drop-on {
  outline: 2px dashed var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
  background: var(--accent-soft);
  min-height: 36px;
}
.an-ser.drop-before { box-shadow: 0 -2px 0 0 var(--accent); }
.an-card.drop-on { outline: 2px dashed var(--accent); outline-offset: 2px; }

/* ---- Analysis: view mode, table, chart value labels ---- */
.an-viewmode { display: flex; border: 1px solid var(--line-strong); border-radius: 6px; overflow: hidden; width: fit-content; }
.an-seg {
  padding: 5px 14px; font-size: 12px; border: none; background: #fff; cursor: pointer;
  color: var(--ink-soft); border-right: 1px solid var(--line-strong);
}
.an-seg:last-child { border-right: none; }
.an-seg:hover { background: #eef4fc; }
.an-seg.active { background: var(--accent); color: #fff; font-weight: 600; }

.an-main { display: flex; flex-direction: column; gap: 14px; }
/* The table renders at its natural full height and the whole main column scrolls, so
   adding charts pushes the page down instead of squeezing the table into its own
   cramped inner scrollbar. Horizontal scrolling stays — period columns can run wide. */
.an-table-wrap {
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow-x: auto;
  overflow-y: visible;
  background: #fff;
  flex: 0 0 auto;
}
.an-dash { flex: 0 0 auto; }
.an-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 12px; }
.an-table th, .an-table td {
  padding: 5px 10px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap;
}
.an-table thead th {
  position: sticky; top: 0; background: #f4f6f9; color: var(--ink-soft);
  font-size: 11px; font-weight: 700; border-bottom: 2px solid var(--line-strong);
}
.an-table th.at-label, .an-table td.at-label {
  text-align: left; position: sticky; left: 0; background: #fff; z-index: 1;
  min-width: 220px; max-width: 320px; white-space: normal;
}
.an-table thead th.at-label { background: #f4f6f9; z-index: 3; }
.an-table tbody tr:nth-child(even) td.at-label { background: var(--zebra); }
.an-table tbody tr:hover td { background: #eef4fc; }
.an-table td.at-label { display: flex; align-items: flex-start; gap: 6px; cursor: grab; }
.at-label-text { min-width: 0; }
.at-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.at-sub { font-size: 10px; color: var(--ink-faint); }
.an-table td.num.empty { color: var(--ink-faint); }
.an-table tr[draggable="true"].dragging { opacity: .45; }
.an-table tr.drop-before td { box-shadow: 0 -2px 0 0 var(--accent); }

/* value labels drawn on bars/lines: small halo so text stays legible over any fill */
.an-val { font-size: 9.5px; font-weight: 700; fill: #1b1f24; text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }

/* Custom chart hover tooltip — replaces reliance on the native (slow, unstyled) SVG
   <title>. Positioned in JS next to the cursor. */
.an-tooltip {
  position: fixed;
  z-index: 80;
  pointer-events: none;
  background: #23272c;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 9px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  opacity: 0;
  transition: opacity .08s;
  white-space: nowrap;
}
.an-tooltip.show { opacity: 1; }

/* Larger, obviously-hoverable hit targets on chart marks */
.an-svg rect[data-tip], .an-svg circle[data-tip], .an-svg path[data-tip] { cursor: pointer; }
.an-svg circle[data-tip]:hover { stroke: #fff; stroke-width: 1.5; }
.an-svg rect[data-tip]:hover, .an-svg path[data-tip]:hover { filter: brightness(1.12); }

/* ---- Analysis: series refs, calculated & joined series ---- */
.an-ref {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 16px; padding: 0 3px;
  border-radius: 3px; background: #e8ebef; color: #44506a;
  font-size: 10px; font-weight: 800; flex: 0 0 auto;
}
.an-ser.derived { border-left: 3px solid #8a5cd6; }
.an-kind {
  font-size: 10px; font-weight: 700; padding: 0 4px; border-radius: 3px;
  background: #efe8fb; color: #6b3fc0; flex: 0 0 auto;
}
.an-kind.link { background: #e4f2ec; color: #0f6a49; }
.an-err { color: var(--neg); font-weight: 600; }
.an-warn { color: #a3261c; }
.an-series-actions { margin-top: 6px; }

.an-refs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.an-ref-chip {
  display: inline-flex; align-items: center; gap: 4px;
  border: 1px solid var(--line-strong); border-radius: 4px;
  padding: 1px 6px; font-size: 10.5px; background: #fff; cursor: pointer;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.an-ref-chip:hover { background: var(--accent-soft); border-color: var(--accent); }
.an-ref-chip b { color: #44506a; }
.an-hint code { background: #eef1f5; padding: 0 4px; border-radius: 3px; font-size: 11px; }

/* calculated / joined rows stand out in the table too */
.an-table tr.calc td.at-label { border-left: 3px solid #8a5cd6; }
.an-table tr.linked td.at-label { border-left: 3px solid #0f8a5f; }
.an-table tr.calc td, .an-table tr.linked td { background: #faf9fe; }

/* ---- Analysis: chart builder ---- */
.an-chart-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 6px; }
.an-ctype {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 2px; font-size: 10.5px; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: 5px; background: #fff; color: var(--ink-soft);
}
.an-ctype span { font-size: 15px; line-height: 1; }
.an-ctype:hover { background: #eef4fc; border-color: var(--accent); }
.an-ctype.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 700; }
#anAddChart { margin-top: 4px; }
#anAddChart:disabled { opacity: .55; cursor: default; }

.an-card-title { display: flex; align-items: center; gap: 4px; min-width: 0; }
.an-title-edit { outline: none; border-radius: 3px; padding: 1px 3px; }
.an-title-edit:hover { background: #eef1f5; }
.an-title-edit:focus { background: #fff; box-shadow: 0 0 0 2px var(--accent-soft); }
.an-card-tools { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.an-card-type-sel {
  font-size: 10.5px; padding: 2px 4px; border: 1px solid var(--line-strong);
  border-radius: 4px; background: #fff; color: var(--ink-soft);
}
.an-edit-toggle {
  font-size: 12px; line-height: 1; padding: 3px 6px; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: 4px; background: #fff; color: var(--ink-soft);
}
.an-edit-toggle:hover { background: #eef4fc; border-color: var(--accent); }
.an-edit-toggle.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.an-legend-chip { display: inline-flex; align-items: center; gap: 3px; }
.an-legend-chip .an-x { font-size: 12px; }
.an-legend-add { font-size: 10px; font-style: italic; }

/* per-chart Edit panel: axis range, decimal places, and (Combo) per-series bar/line */
.an-chart-edit {
  background: #f7f9fb; border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 10px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 6px;
}
.an-edit-row { display: flex; gap: 14px; flex-wrap: wrap; }
.an-edit-field {
  display: flex; flex-direction: column; gap: 2px; font-size: 10px; color: var(--ink-faint);
}
.an-edit-field input {
  width: 90px; padding: 3px 6px; font-size: 12px;
  border: 1px solid var(--line-strong); border-radius: 4px; background: #fff;
}
.an-edit-series { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--line); padding-top: 6px; }
.an-edit-series-row { display: flex; align-items: center; gap: 6px; font-size: 11.5px; }
.an-edit-series-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-edit-stype { font-size: 11px; padding: 2px 4px; border: 1px solid var(--line-strong); border-radius: 4px; background: #fff; }
.an-edit-axis { display: flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--ink-soft); white-space: nowrap; }

/* basis-change marker on joined series */
.an-basis { stroke: #6b3fc0; stroke-width: 1.5; stroke-dasharray: 4 3; opacity: .8; }
.an-basis-t { fill: #6b3fc0; font-weight: 700; font-size: 8.5px; }

/* secondary export (raw CSV) sits beside the primary formatted-Excel action */
.exportbar { display: flex; gap: 6px; align-items: center; }
.exportbar .btn-secondary {
  background: #fff;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
}

/* ================= Rankings tab ================= */
.rk-metric-picked {
  border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px;
  background: #fff; margin-bottom: 8px;
}
.rk-metric-name { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.rk-metric-sub { font-size: 10.5px; color: var(--ink-faint); margin-bottom: 6px; }

.rk-results-head { margin-bottom: 10px; }
.rk-results-title { font-size: 15px; font-weight: 700; }

.rk-table { width: 100%; border-collapse: collapse; }
.rk-table th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--ink-faint); padding: 4px 8px; border-bottom: 1px solid var(--line-strong);
}
.rk-rank-col { width: 36px; text-align: center !important; }
.rk-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.rk-table td.rk-rank-col { text-align: center; font-weight: 700; color: var(--ink-faint); }
.rk-bar-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 3px; }
.rk-name { font-size: 12.5px; }
.rk-val { font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.rk-bar-track { height: 6px; background: var(--zebra); border-radius: 3px; overflow: hidden; }
.rk-bar { height: 100%; background: var(--accent); border-radius: 3px; }
.rk-table tr:nth-child(odd) .rk-bar { background: #0f8a5f; }
.exportbar .btn-secondary:hover { background: #eef4fc; border-color: var(--accent); color: var(--accent); }

/* ---------------- Dashboard ---------------- */
.body.dashboard-page { flex-direction: column; overflow-y: auto; align-items: stretch; padding: 12px 20px 40px; gap: 14px; }
.dash-toolbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 5; background: #fff;
  padding: 8px 20px 10px; margin: 0 -20px; border-bottom: 1px solid var(--line);
}
.dash-toolbar-label { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-soft); }
.dash-toolbar-label input, .dash-toolbar-label select {
  padding: 5px 8px; font-size: 12.5px; border: 1px solid var(--line-strong);
  border-radius: 5px; background: #fff;
}
.dash-toolbar-label input#dashCompany { width: 180px; }
.dash-ltm-toggle { gap: 5px; }
.dash-export .dash-toolbar-label { white-space: nowrap; }
.dash-export { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.dash-export .btn-primary { padding: 6px 14px; font-size: 12.5px; }

.dash-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(300px, auto);
  gap: 14px;
}
.dash-tile { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 10px 12px; display: flex; flex-direction: column; position: relative; }
.dash-tile-placeholder {
  align-items: center; justify-content: center; color: var(--ink-faint);
  font-size: 12.5px; border-style: dashed;
}
.dash-tile-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.dash-tile-title { font-size: 12.5px; font-weight: 700; }
.dash-ratio-select { margin-bottom: 6px; }
.dash-ratio-select select { padding: 4px 7px; font-size: 11.5px; border: 1px solid var(--line-strong); border-radius: 5px; background: #fff; }
.dash-wf-controls { display: flex; gap: 10px; margin-bottom: 6px; }
.dash-wf-controls select { padding: 4px 7px; font-size: 11.5px; border: 1px solid var(--line-strong); border-radius: 5px; background: #fff; }
.dash-aoci-toggle { font-size: 11px; gap: 5px; }
.dash-wip-badge {
  font-size: 10px; font-weight: 700; color: #8a5a00; background: #fff2cc;
  border: 1px solid #e8c25a; border-radius: 999px; padding: 2px 8px;
  white-space: nowrap; flex: 0 0 auto; cursor: default;
}
.dash-wf-bar { cursor: pointer; }
.dash-wf-bar:hover { opacity: 0.85; }
.dash-wf-connector { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 2; }
.dash-gear {
  border: 1px solid var(--line-strong); background: #fff; border-radius: 5px;
  width: 24px; height: 24px; cursor: pointer; color: var(--ink-soft); font-size: 13px; flex: 0 0 auto;
}
.dash-gear:hover { background: #eef4fc; color: var(--accent); }
.dash-gear-panel {
  position: absolute; top: 38px; right: 10px; z-index: 8; width: 240px;
  border: 1px solid var(--line-strong); border-radius: 7px; background: #fff;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);
  padding: 9px 11px; font-size: 12px; display: flex; flex-direction: column; gap: 5px;
}
.dash-gear-panel label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.dash-chart { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; }
.dash-svg { width: 100%; height: auto; overflow: visible; }
.dash-gridline { stroke: var(--line); stroke-width: 1; }
.dash-axis-label { font-size: 9.5px; fill: var(--ink-faint); }
.dash-val { font-size: 10.5px; font-weight: 600; fill: var(--ink); }
.dash-bar { cursor: pointer; }
.dash-bar:hover { opacity: 0.85; }

.dash-audit-popup {
  position: fixed; z-index: 50; background: #fff; border: 1px solid var(--line-strong);
  border-radius: 7px; box-shadow: 0 6px 20px rgba(0,0,0,.12); padding: 9px 11px;
  font-size: 12px; min-width: 220px; max-width: 320px;
  max-height: 70vh; overflow-y: auto;
}
.dash-audit-back {
  color: var(--accent); font-weight: 600; cursor: pointer; margin: -1px -3px 6px; padding: 2px 3px;
  border-radius: 4px; display: inline-block;
}
.dash-audit-back:hover { background: #eef4fc; }
.dash-audit-title { font-weight: 700; margin-bottom: 5px; }
.dash-audit-row { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.dash-audit-label { color: var(--ink-soft); padding-left: 8px; }
.dash-audit-val { font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.dash-audit-total { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 5px; font-weight: 700; }
.dash-audit-total .dash-audit-label { padding-left: 0; }
.dash-audit-note { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); color: var(--ink-faint); font-size: 11px; }

.dash-audit-clickable { cursor: pointer; border-radius: 4px; margin: 0 -4px; padding: 2px 4px; }
.dash-audit-clickable:hover { background: #eef4fc; }
.dash-audit-hint { color: var(--accent); margin-right: 3px; font-size: 9px; }
.dash-audit-cite { margin: 4px 0; }
.dash-audit-cite-row { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0 2px 8px; }
.dash-audit-cite-row .dash-audit-label { padding-left: 0; }

/* Screener: a value that already has criteria on it stays tickable — the count shows how many */
.cell-pick .sc-added { margin-left: 6px; font-size: 10.5px; font-weight: 700; color: var(--accent); }
.sc-th-crit { display: block; font-size: 10.5px; font-weight: 500; color: var(--ink-soft); }

/* Rankings: market share beside the value, audit-on-click */
.rk-share { font-size: 12px; font-weight: 600; color: var(--accent); flex: 0 0 52px; text-align: right; font-variant-numeric: tabular-nums; }
.rk-audit { cursor: pointer; }
.rk-audit:hover { text-decoration: underline; text-underline-offset: 2px; }
.rk-total-row td { background: #f6f8fb; border-bottom: 2px solid var(--line-strong); }
.rk-share-hint { font-size: 11.5px; color: var(--ink-soft); margin: 0 0 8px; }
.rk-share-warn { color: #b3261e; }

/* Rankings table: Company | Chart | Value | Market share, each in its own column (no overlap) */
.rk-chart-col { width: 34%; min-width: 120px; }
.rk-table th.rk-chart-col { text-align: left; }
.rk-num-col { width: 1%; white-space: nowrap; text-align: right !important; padding-left: 14px !important; }
.rk-table th.rk-num-col { text-align: right; }
.rk-chart-col .rk-bar-track { margin: 0; }
.rk-num-col .rk-share { flex: none; }
.rk-table .rk-bar, .rk-table tr:nth-child(odd) .rk-bar { background: var(--accent); }
/* Rankings: company column hugs its longest name; the chart takes the rest */
.rk-table th.label-col, .rk-table td.label-col { width: 1%; white-space: nowrap; padding-right: 16px; }
.rk-table .rk-chart-col { width: auto; }

/* ---------------- Market Share Analysis ---------------- */
.ms-wrap { display: grid; grid-template-columns: minmax(340px, 1.15fr) minmax(360px, 1fr); gap: 18px; align-items: start; }
@media (max-width: 980px) { .ms-wrap { grid-template-columns: 1fr; } }
.ms-map-card, .ms-panel { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 12px 14px; }
.ms-svg { width: 100%; height: auto; display: block; }
.ms-prov { stroke: #fff; stroke-width: 1.1; cursor: pointer; transition: opacity .12s; }
.ms-prov:hover { opacity: .82; stroke: #1b2733; stroke-width: 1.6; }
.ms-prov.ms-selected { stroke: #111; stroke-width: 2.6; }
.ms-lbl { pointer-events: none; font-family: inherit; fill: #1b2733; }
.ms-lbl-code { font-size: 15px; font-weight: 700; }
.ms-lbl-val { font-size: 13px; font-weight: 600; }
.ms-lbl-light { fill: #fff; }
.ms-leader { stroke: #8a95a3; stroke-width: 1; pointer-events: none; }
.ms-legend { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-soft); margin-top: 6px; }
.ms-grad { display: inline-block; flex: 0 0 160px; height: 9px; border-radius: 5px; background: linear-gradient(90deg, rgb(232,240,251), rgb(30,95,191)); }
.ms-legend-note { margin-left: auto; font-weight: 600; }
.ms-panel-head { margin-bottom: 8px; }
.ms-panel-title { font-weight: 700; font-size: 14px; }
.ms-back { margin-bottom: 8px; }
.ms-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ms-table th { text-align: left; font-size: 11px; color: var(--ink-soft); font-weight: 600; padding: 4px 8px; border-bottom: 1px solid var(--line-strong); }
.ms-table th:not(:first-child), .ms-table td.num { text-align: right; }
.ms-table td { padding: 5px 8px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.ms-row-click { cursor: pointer; }
.ms-row-click:hover td { background: #f3f7fd; }
.ms-row-total td { font-weight: 700; background: #f6f8fb; }
.ms-share { color: var(--accent); font-weight: 600; }
.ms-audit { cursor: pointer; }
.ms-audit:hover { text-decoration: underline; text-underline-offset: 2px; }
.ms-group td { background: #f6f8fb; font-weight: 700; font-size: 11px; letter-spacing: .03em; text-transform: uppercase; color: var(--ink-soft); }
.ms-lvl0 td, .ms-lvl1 td { font-weight: 600; }
.ms-zero td { color: var(--ink-faint); }
.ms-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 10px 0 14px; }
.ms-kpi { border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; }
.ms-kpi-l { font-size: 11px; color: var(--ink-soft); }
.ms-kpi-v { font-size: 15px; font-weight: 700; margin-top: 2px; font-variant-numeric: tabular-nums; }
.ms-sub { font-weight: 600; font-size: 12px; margin: 4px 0 6px; }
.ms-bar-cell { width: 26%; }
.ms-me td { background: #eef4fc; font-weight: 700; }

/* Market Share: province pie */
.ms-pie-wrap { display: flex; justify-content: center; margin: 4px 0 10px; }
.ms-pie { width: 100%; max-width: 250px; height: auto; }
.ms-slice { stroke: #fff; stroke-width: 1.5; }
.ms-slice:hover { opacity: .85; }
.ms-slice-lbl { fill: #fff; font-size: 11px; font-weight: 700; pointer-events: none; }
.ms-pie-c1 { font-size: 10px; fill: var(--ink-soft); }
.ms-pie-c2 { font-size: 15px; font-weight: 700; fill: var(--ink); }
.ms-swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 7px; vertical-align: -1px; }
.ms-note { font-size: 11px; color: var(--ink-soft); margin: 8px 0 0; }
.ms-more { margin-top: 14px; }
.ms-more summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--accent); margin-bottom: 8px; }

/* Market Share: ranking snippet + rank-by-province strip */
.ms-rank td { padding: 4px 8px; }
.ms-gap td { color: var(--ink-faint); font-size: 11px; text-align: center !important; padding: 2px 8px; border-bottom: none; }
.ms-sub-gap { margin-top: 12px; }
.ms-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ms-chip { display: inline-flex; gap: 5px; align-items: baseline; padding: 3px 8px; border: 1px solid var(--line-strong); border-radius: 12px; font-size: 11px; color: var(--ink-soft); cursor: pointer; background: #fff; }
.ms-chip b { color: var(--ink); font-weight: 700; }
.ms-chip:hover { background: #eef4fc; border-color: var(--accent); }
.ms-chip-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.ms-chip-on b { color: #fff; }
.ms-chip-off { opacity: .55; }

.ms-slice[data-region] { cursor: pointer; }

/* ---------------- Query: Index Creator / Benchmark Creator / Bulk Data Download ---------------- */
.body.qb-page { flex-direction: column; }
.qb-tabs { display: flex; align-items: center; gap: 4px; padding: 8px 16px 0; border-bottom: 1px solid var(--line); background: #fff; flex: 0 0 auto; }
.qb-tab { border: 1px solid transparent; border-bottom: none; background: none; padding: 8px 16px; font-size: 13px; font-weight: 600; color: var(--ink-soft); cursor: pointer; border-radius: 7px 7px 0 0; margin-bottom: -1px; }
.qb-tab:hover { background: #eef4fc; }
.qb-tab.active { color: var(--accent); background: #fff; border-color: var(--line); border-bottom: 2px solid var(--accent); }
.qb-tabs-note { margin-left: auto; font-size: 11.5px; color: var(--ink-soft); padding-bottom: 8px; }
.qb-pane { display: flex; flex: 1 1 auto; min-height: 0; align-items: stretch; }
.qb-pane[hidden] { display: none; }
.qb-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qb-lbl { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--ink-soft); margin-bottom: 6px; }
.qb-lbl select { width: 100%; }
.qb-actions { display: flex; gap: 8px; align-items: center; }
.qb-radio { display: flex; gap: 7px; align-items: flex-start; font-size: 12px; margin: 5px 0; cursor: pointer; }
.qb-radio input { margin-top: 2px; }
.qb-card { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 14px 16px; }
.qb-card-title { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.qb-badge { font-size: 10.5px; font-weight: 600; background: #fdf1d8; color: #8a5a00; padding: 2px 7px; border-radius: 10px; margin-left: 6px; vertical-align: 2px; }
.qb-stats { display: flex; gap: 26px; margin-bottom: 12px; }
.qb-stats div { display: flex; flex-direction: column; }
.qb-stats b { font-size: 18px; }
.qb-stats span { font-size: 11px; color: var(--ink-soft); }
.qb-sub { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); margin: 12px 0 6px; }
.qb-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.qb-chip { font-size: 11.5px; background: #eef4fc; border: 1px solid #d6e4f7; border-radius: 12px; padding: 2px 9px; }

.an-side input[type="checkbox"], .an-side input[type="radio"] { width: auto; flex: 0 0 auto; }

/* =====================================================================================
   THEME v2 — a quieter, more modern skin over the components above.
   Light cool-grey canvas, white surfaces with soft borders and shadows, one confident
   blue, Inter type with tabular figures, generous radii. Everything here overrides by
   selector; none of it changes markup or behaviour, so the JS that builds each view is
   untouched. (Colour tokens live in :root at the top of this file.)
   ===================================================================================== */

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: -0.006em;
  background: var(--bg);
  color: var(--ink);
  font-feature-settings: "cv11", "ss03";
}
::selection { background: var(--accent-ring); }
* { scrollbar-width: thin; scrollbar-color: #cdd4df transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cdd4df; border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #b3bdcc; background-clip: content-box; border: 2px solid transparent; }
td.num, .rk-val, .rk-share, .ms-table td, .dash-audit-val, .ms-kpi-v, .an-table td { font-variant-numeric: tabular-nums; }

/* ---------------- navigation ---------------- */
.topnav {
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: saturate(1.5) blur(10px);
  backdrop-filter: saturate(1.5) blur(10px);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding: 0 22px;
  min-height: 56px;
  gap: 28px;
  position: relative;
  z-index: 30;
}
.brand {
  display: flex; align-items: center; gap: 10px; flex: 0 0 auto;
  font-size: 15.5px; font-weight: 700; letter-spacing: -0.025em; color: var(--ink);
}
.brand-mark {
  width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
  background: linear-gradient(140deg, #2f6bff 0%, #5b3df0 100%);
  box-shadow: 0 2px 8px rgba(47, 84, 235, .35), inset 0 1px 0 rgba(255,255,255,.25);
}
.brand-mark svg { width: 15px; height: 15px; display: block; }
.navlinks { gap: 4px; }
.navlink {
  color: var(--ink-soft);
  font-size: 13px; font-weight: 500;
  padding: 7px 13px; border-radius: 9px;
  transition: background .15s, color .15s;
}
.navlink:hover { background: #f1f4f9; color: var(--ink); }
.navlink.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.navright { gap: 10px; }
.navright select {
  background-color: #fff; color: var(--ink); border: 1px solid var(--line-strong);
  border-radius: 9px; padding: 7px 32px 7px 12px; font-size: 13px; font-weight: 500;
}
.navright .btn-sm { background: transparent; border: 1px solid transparent; color: var(--ink-soft); border-radius: 9px; padding: 7px 12px; }
.navright .btn-sm:hover { background: #f1f4f9; color: var(--ink); border-color: transparent; }

/* ---------------- form controls ---------------- */
select {
  -webkit-appearance: none; 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='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 10px center !important; background-size: 12px !important;
  padding-right: 30px !important;
  cursor: pointer;
}
.field input, .field select,
.an-side input:not([type="checkbox"]):not([type="radio"]), .an-side select,
.dash-toolbar-label input, .dash-toolbar-label select,
.sc-toolbar-label select, .sc-export input, .sc-op-select, .sc-val-input,
.an-preview-period select, .dash-ratio-select select, .dash-wf-controls select,
.an-card-type-sel, .an-edit-field input, .an-edit-stype {
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  background-color: #fff;
  color: var(--ink);
  font-size: 12.5px;
  padding: 6px 10px;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.field input:hover, .field select:hover, .an-side input:hover, .an-side select:hover,
.dash-toolbar-label input:hover, .dash-toolbar-label select:hover { border-color: #b9c2d0; }
.field input:focus, .field select:focus, .an-side input:focus, .an-side select:focus,
.dash-toolbar-label input:focus, .dash-toolbar-label select:focus,
.sc-toolbar-label select:focus, .sc-val-input:focus, .sc-op-select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring);
}
input::placeholder { color: #a3adbd; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); }

/* ---------------- buttons ---------------- */
.btn-sm, .exportbar .btn-secondary {
  background: #fff; border: 1px solid var(--line-strong); color: var(--ink);
  border-radius: 9px; padding: 6px 12px; font-size: 12.5px; font-weight: 500; cursor: pointer;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.btn-sm:hover, .exportbar .btn-secondary:hover { background: #f6f8fc; border-color: #b9c2d0; color: var(--ink); }
.btn-primary, .exportbar button:not(.btn-secondary), .dash-export .btn-primary {
  background: var(--accent); border: 1px solid var(--accent); color: #fff;
  border-radius: 9px; padding: 7px 16px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  box-shadow: 0 1px 2px rgba(36, 86, 232, .25), inset 0 1px 0 rgba(255,255,255,.15);
  transition: background .15s, box-shadow .15s, transform .05s;
}
.btn-primary:hover, .exportbar button:not(.btn-secondary):hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { opacity: .55; box-shadow: none; }
.an-seg { border-right: 1px solid var(--line-strong); }
.an-viewmode { border-radius: 9px; border-color: var(--line-strong); background: #fff; }
.an-seg:hover { background: #f6f8fc; }
.an-seg.active { background: var(--accent); }

/* ---------------- toolbars ---------------- */
.toolbar, .dash-toolbar {
  background: #fff; border-bottom: 1px solid var(--line); padding: 10px 22px;
}
.dash-toolbar { margin: 0 -22px; }
.field > label, .dash-toolbar-label, .sc-toolbar-label, .qb-lbl {
  color: var(--ink-faint); font-weight: 600;
}
.field > label { font-size: 10px; letter-spacing: .07em; }
.dash-toolbar-label, .sc-toolbar-label { font-size: 11.5px; font-weight: 500; color: var(--ink-soft); }

/* ---------------- canvas + surfaces ---------------- */
.body.dashboard-page, .an-main, .body.screener-page { background: var(--bg); }
.statement { background: var(--bg); padding: 16px 22px 18px; }
.pagesnav, .an-side { background: #fff; }
.an-main { padding: 18px 22px 34px; }
.body.dashboard-page { padding: 0 22px 40px; gap: 18px; }

.dash-tile, .an-card, .sc-panel, .ms-map-card, .ms-panel, .qb-card, .an-table-wrap, .rk-metric-picked {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 14px -6px rgba(15, 23, 42, .06);
}
.table-wrap {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 14px -6px rgba(15, 23, 42, .06);
}
.dash-tile { padding: 14px 16px; }
.dash-grid { gap: 18px; }
.dash-tile-title { font-size: 13.5px; font-weight: 650; letter-spacing: -0.015em; }
.dash-wip-badge {
  background: #fff7e6; color: #b45309; border: 1px solid #fde6b3; border-radius: 999px;
  font-size: 10px; font-weight: 600; padding: 2px 8px; letter-spacing: .01em;
}
.an-card { padding: 14px 16px; }
.an-card-head { font-size: 13.5px; font-weight: 650; letter-spacing: -0.015em; }
.sc-panel { padding: 16px 18px; }
.ms-map-card, .ms-panel { padding: 16px 18px; }
.qb-card { padding: 18px 20px; }

/* sidebar sections */
.an-side { padding: 14px 16px 26px; border-right: 1px solid var(--line); }
.an-block { margin-bottom: 20px; }
.an-title {
  font-size: 10.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 8px;
}
.an-hint { font-size: 11px; color: var(--ink-faint); line-height: 1.5; }
.an-results {
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
}
.an-page { padding: 8px 10px; }
.an-page:hover, .bq-check-row:hover { background: #f5f8ff; }
.bq-check-row { padding: 6px 10px; }
.an-ser { border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; }
.tag { border-radius: 6px; }

/* statements: left page list */
.pagesnav { padding: 14px 0; }
.pagesnav-title { padding: 0 18px 8px; letter-spacing: .09em; }
.page-item {
  margin: 1px 10px; padding: 7px 10px; border-left: none; border-radius: 9px; font-size: 12.5px;
  transition: background .12s, color .12s;
}
.page-item:hover { background: #f3f6fb; color: var(--ink); }
.page-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.statement-header .entity-name { font-size: 18px; font-weight: 700; letter-spacing: -0.025em; }
.statement-header .statement-title { font-size: 13px; font-weight: 500; }
.pill { background: #f1f4f9; border-color: transparent; font-weight: 600; font-size: 11.5px; }
.status-badge { border-radius: 999px; }

/* ---------------- tables ---------------- */
.statement-table thead th {
  background: #f8fafc; color: var(--ink-soft); font-size: 11px; font-weight: 600; letter-spacing: .01em;
  border-bottom: 1px solid var(--line-strong);
}
.statement-table th, .statement-table td { padding: 4px 12px; border-bottom: 1px solid #eff2f6; }
.statement-table tbody tr:nth-child(even) { background: transparent; }
.statement-table tbody tr:hover { background: #f5f8ff; }
tr.total-row td { background: #f8fafc; }
tr.total-row td.num { border-top: 1px solid var(--line-strong); }
td.num.neg { color: var(--neg); }

.rk-table th, .ms-table th, .sc-criteria-table th {
  font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint);
  border-bottom: 1px solid var(--line-strong);
}
.rk-table td, .ms-table td, .sc-criteria-table td { border-bottom: 1px solid #eff2f6; }
.rk-table tbody tr:hover td, .ms-table tbody tr:hover td { background: #f8faff; }
.rk-total-row td, .ms-row-total td, .ms-group td { background: #f8fafc; }
.rk-bar-track { background: #eef1f6; height: 8px; border-radius: 999px; }
.rk-bar { background: linear-gradient(90deg, #4c7dff, var(--accent)); border-radius: 999px; }
.rk-table .rk-bar, .rk-table tr:nth-child(odd) .rk-bar { background: linear-gradient(90deg, #4c7dff, var(--accent)); }
.rk-results-title { font-size: 17px; font-weight: 700; letter-spacing: -0.025em; }
.rk-rank-col { color: var(--ink-faint); }

.an-table th, .an-table td { border-color: #eff2f6; }
.an-table thead th { background: #f8fafc; }

/* ---------------- charts ---------------- */
.dash-bar { rx: 4px; }
.dash-gridline, .an-grid { stroke: #edf0f5; }
.dash-axis-label, .an-t { fill: #8a94a6; }
.dash-val { fill: var(--ink); font-weight: 600; }
.an-svg rect[data-tip]:hover, .an-svg path[data-tip]:hover, .dash-bar:hover { filter: none; opacity: .85; }

/* ---------------- popovers, toasts ---------------- */
.dash-audit-popup, .an-tooltip {
  border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 12px 40px -8px rgba(15, 23, 42, .22), 0 2px 6px rgba(15, 23, 42, .06);
}
.dash-audit-title { letter-spacing: -0.015em; }
.dash-audit-clickable:hover { background: #f5f8ff; }
.dash-gear-panel { border-radius: 12px; box-shadow: 0 12px 32px -8px rgba(15, 23, 42, .2); }
.an-flash { background: #0f172a; color: #fff; border-radius: 12px; box-shadow: 0 12px 32px -8px rgba(15, 23, 42, .4); }

/* ---------------- Query tabs ---------------- */
.qb-tabs { padding: 0 22px; background: #fff; }
.qb-tab {
  padding: 14px 4px; margin: 0 20px 0 0; border: none; border-bottom: 2px solid transparent; border-radius: 0;
  font-size: 13px; font-weight: 600; color: var(--ink-faint); background: none;
}
.qb-tab:hover { background: none; color: var(--ink); }
.qb-tab.active { color: var(--ink); background: none; border: none; border-bottom: 2px solid var(--accent); margin-bottom: -1px; }
.qb-chip { background: var(--accent-soft); border-color: transparent; color: var(--accent-strong); border-radius: 999px; }
.qb-badge { border-radius: 999px; }
.qb-card-title { font-size: 17px; letter-spacing: -0.025em; }
.qb-stats b { font-size: 22px; letter-spacing: -0.03em; }

/* ---------------- Market share ---------------- */
.ms-prov { stroke: #fff; stroke-width: 1.2; }
.ms-prov.ms-selected { stroke: var(--ink); stroke-width: 2.4; }
.ms-panel-title { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.ms-kpi { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: #fbfcfe; }
.ms-kpi-v { font-size: 17px; letter-spacing: -0.02em; }
.ms-chip { border-radius: 999px; border-color: var(--line-strong); }
.ms-chip:hover { background: var(--accent-soft); }
.ms-me td { background: var(--accent-soft); }
.ms-grad { background: linear-gradient(90deg, rgb(235, 241, 255), rgb(36, 86, 232)); }
.ms-more summary { color: var(--accent); }

/* ---------------- Screener ---------------- */
.sc-toolbar-title { font-size: 17px; font-weight: 700; letter-spacing: -0.025em; }
.sc-panel-title { color: var(--ink-faint); letter-spacing: .08em; }

/* ---------------- statement picker cells ---------------- */
td.cell-picked { background: var(--accent-soft); }

.rk-results {
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 4px 14px -6px rgba(15, 23, 42, .06);
}
.rk-results:empty { display: none; }
.sc-toolbar-controls .btn-primary { width: auto; flex: 0 0 auto; }

.brand-name b { color: var(--accent); font-weight: 700; }