/* ==========================================================================
   Reveal'd dashboards — journal style (JAR conventions), white theme
   Tokens mirror !lab/journal_style/journal.css. Strictly achromatic:
   status = gray level + hatch texture, never hue.
   Previous dark theme: _backup_dark_2026-10-17/
   ========================================================================== */
:root{
  --j-ink:    #000000;
  --j-ink-2:  #404040;
  --j-ink-3:  #8c8c8c;
  --j-ink-4:  #c4c4c4;
  --j-grid:   #e6e6e6;
  --j-paper:  #ffffff;

  --j-font-text:   "Libre Baskerville", "Baskerville", "Baskerville Old Face", Georgia, serif;
  --j-font-figure: Arial, "Helvetica Neue", Helvetica, "Liberation Sans", sans-serif;
  --j-size-note:   11.5px;

  /* status ramp: dark / light / hatched — readable in print and grayscale */
  --status-transposed: #333333;
  --status-pending:    #bdbdbd;
  --status-na-bg:      #ffffff;
  --status-na-hatch:   repeating-linear-gradient(45deg, #000 0 1px, transparent 1px 4px);
  --magnitude-fill:    #6e6e6e;
}
*{ box-sizing:border-box; }
html,body{
  margin:0; padding:0; width:100%;
  background:var(--j-paper); color:var(--j-ink);
  font-family:var(--j-font-text);
  -webkit-font-smoothing:antialiased;
}
body{ display:flex; flex-direction:column; min-height:100vh; }
:focus-visible{ outline:1px dotted var(--j-ink); outline-offset:3px; }

/* ---------- running head ------------------------------------------------ */
header{
  flex:0 0 auto;
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap;
  max-width:1180px; width:100%; margin:0 auto;
  padding:28px 22px 12px;
  border-bottom:1px solid var(--j-ink);
}
.title-block h1{
  margin:0 0 4px;
  font-size:22px; font-weight:400;
  font-variant:small-caps; letter-spacing:.04em;
  text-wrap:balance;
}
.title-block .sub{ margin:0; font-size:13px; font-style:italic; color:var(--j-ink-2); }
.title-block .sub b{ font-weight:400; font-style:normal; color:var(--j-ink); }
.header-right{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.count{ font-size:12px; color:var(--j-ink-2); white-space:nowrap; font-variant-numeric:lining-nums tabular-nums; }
.count b{ font-weight:400; color:var(--j-ink); }
.nav-tabs{ display:flex; gap:18px; }
.nav-tabs a{
  font-size:13px; font-variant:small-caps; letter-spacing:.06em;
  color:var(--j-ink-2); text-decoration:none; padding-bottom:2px; border-bottom:1px solid transparent;
}
.nav-tabs a:hover{ color:var(--j-ink); border-bottom-color:var(--j-ink-3); }
.nav-tabs a.active{ color:var(--j-ink); border-bottom-color:var(--j-ink); }

/* ---------- slicers (sticky) -------------------------------------------- */
.slicer-bar{
  flex:0 0 auto;
  display:flex; align-items:flex-end; gap:12px 34px; flex-wrap:wrap;
  max-width:1180px; width:100%; margin:0 auto;
  padding:12px 22px 14px;
  background:var(--j-paper);
  border-bottom:1px solid var(--j-grid);
  position:sticky; top:0; z-index:29;
}
.slicer-col{ display:flex; flex-direction:column; gap:10px; flex:1 1 0; min-width:160px; max-width:400px; }
.slicer{ display:flex; align-items:flex-end; gap:10px; width:100%; }
.slicer label{
  flex:0 0 64px;
  font-size:12px; font-variant:small-caps; letter-spacing:.06em; color:var(--j-ink-2);
  padding-bottom:4px;
}
.slicer select, #companySearch{
  flex:1 1 auto; min-width:0; width:100%;
  font-family:var(--j-font-text); font-size:13px; color:var(--j-ink);
  background:transparent; border:0; border-bottom:1px solid var(--j-ink-3); border-radius:0;
  padding:3px 2px 4px; outline:none;
}
.slicer select:focus, #companySearch:focus{ border-bottom-color:var(--j-ink); }
.slicer select.active{ border-bottom:2px solid var(--j-ink); font-style:italic; }
#companySearch::placeholder{ color:var(--j-ink-3); font-style:italic; }

.suggest-wrap{ position:relative; flex:1 1 auto; min-width:0; }
.suggest-list{
  display:none; position:absolute; top:calc(100% + 4px); left:74px; right:0;
  max-height:240px; overflow-y:auto;
  background:var(--j-paper); border:1px solid var(--j-ink); z-index:40;
}
.suggest-list.open{ display:block; }
.suggest-item{ padding:5px 10px; font-size:12.5px; color:var(--j-ink-2); cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.suggest-item:hover, .suggest-item.active{ background:#f2f2f2; color:var(--j-ink); }
.suggest-empty{ padding:5px 10px; font-size:12.5px; font-style:italic; color:var(--j-ink-3); }

.slicer-bar button{
  align-self:flex-start;
  font-family:var(--j-font-text); font-size:12px; font-variant:small-caps; letter-spacing:.06em;
  background:none; color:var(--j-ink); border:1px solid var(--j-ink); border-radius:0;
  padding:3px 12px; cursor:pointer;
}
.slicer-bar button:hover{ background:var(--j-ink); color:var(--j-paper); }

/* ---------- spotlight ---------------------------------------------------- */
#spotlight{
  display:none;
  max-width:1136px; width:calc(100% - 44px); margin:16px auto 0;
  border-top:1px solid var(--j-ink); border-bottom:1px solid var(--j-ink);
  padding:8px 2px; font-size:12.5px; color:var(--j-ink-2);
}
#spotlight.show{ display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; }
#spotlight .co{ color:var(--j-ink); font-size:14px; font-variant:small-caps; letter-spacing:.04em; }
#spotlight b{ color:var(--j-ink); font-weight:400; font-style:italic; }
#spotlight .close{ margin-left:auto; cursor:pointer; font-variant:small-caps; letter-spacing:.06em; border:1px solid var(--j-ink); padding:1px 8px; color:var(--j-ink); }
#spotlight .close:hover{ background:var(--j-ink); color:var(--j-paper); }

main{ flex:1 1 auto; padding:24px 22px 8px; max-width:1180px; width:100%; margin:0 auto; }

/* ---------- KPI row = summary-statistics line ---------------------------- */
.kpi-row{
  display:grid; grid-template-columns:repeat(4, 1fr);
  border-top:1.5px solid var(--j-ink); border-bottom:1px solid var(--j-ink);
  margin-bottom:22px;
}
.kpi-tile{ padding:10px 14px 12px; }
.kpi-tile + .kpi-tile{ border-left:1px solid var(--j-grid); }
.kpi-tile .label{ margin:0 0 4px; font-size:12px; font-variant:small-caps; letter-spacing:.05em; color:var(--j-ink-2); }
.kpi-tile .value{ font-size:26px; font-weight:400; line-height:1.15; font-variant-numeric:lining-nums tabular-nums; }
.kpi-tile .value small{ font-size:12.5px; font-style:italic; color:var(--j-ink-2); margin-left:6px; }
.kpi-tile .value.text{ font-size:17px; }
@media (max-width:760px){ .kpi-row{ grid-template-columns:repeat(2,1fr); } .kpi-tile:nth-child(3){ border-left:0; } }

/* ---------- legend (shared key for every figure on the page) ------------- */
.legend{
  display:flex; align-items:center; gap:6px 22px; flex-wrap:wrap;
  padding:0 0 22px;
  font-family:var(--j-font-figure); font-size:11.5px; color:var(--j-ink);
}
.legend .lg-title{ font-family:var(--j-font-text); font-style:italic; font-size:12.5px; color:var(--j-ink-2); }
.legend-item{ display:flex; align-items:center; gap:7px; }
.swatch{ display:block; width:13px; height:11px; flex:0 0 auto; border:1px solid var(--j-ink); }
.swatch.transposed{ background:var(--status-transposed); }
.swatch.pending{ background:var(--status-pending); }
.swatch.magnitude{ background:var(--magnitude-fill); }
.swatch.na{ background-color:var(--status-na-bg); background-image:var(--status-na-hatch); }

/* ---------- figure / table containers ------------------------------------ */
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:34px 44px; margin-bottom:34px; }
@media (max-width:760px){ .two-col{ grid-template-columns:1fr; } }

.panel{ margin:0; min-width:0; display:flex; flex-direction:column; }
.panel-body{ padding:6px 0 4px; }
.panel-body.scroll{ max-height:460px; overflow-y:auto; scrollbar-width:thin; }
.panel-body.empty::before{
  content:"No companies match the current slicers.";
  display:block; padding:24px 0; text-align:center; font-style:italic; font-size:13px; color:var(--j-ink-3);
}

/* caption: below figures ("FIG. 1.—"), above tables ("TABLE 1" / italic title) */
.panel-cap{ margin-top:10px; font-size:var(--j-size-note); line-height:1.45; }
.panel-cap .j-label{ font-variant:small-caps; letter-spacing:.04em; }
.panel-cap .j-label::after{ content:"—"; }
.panel-cap .note{ color:var(--j-ink-2); }
.table-head{ text-align:center; margin:0 0 6px; font-size:13px; line-height:1.35; }
.table-head .j-label{ display:block; font-variant:small-caps; letter-spacing:.04em; font-size:13px; }   /* same lettering as figure labels */
.table-head .j-title{ display:block; font-style:italic; }
.table-notes{ margin-top:6px; font-size:var(--j-size-note); line-height:1.45; color:var(--j-ink); text-align:justify; hyphens:auto; }

/* ---------- single-series bars (figure) ---------------------------------- */
.bar-row{ display:grid; grid-template-columns:150px 1fr 96px; align-items:center; gap:10px; height:24px; transition:opacity .15s ease; }
.bar-row.dim{ opacity:.25; }
.bar-row .bar-label{ font-family:var(--j-font-figure); font-size:11.5px; color:var(--j-ink-2); text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar-row.match .bar-label{ color:var(--j-ink); font-weight:700; }
.bar-track{ position:relative; height:24px; border-left:1px solid var(--j-ink); }   /* y-axis line */
.bar-fill{ position:absolute; left:0; top:5px; height:14px; transition:width .15s ease; }
.bar-fill.transposed{ background:var(--status-transposed); }
.bar-fill.pending{ background:var(--status-pending); }
.bar-fill.magnitude{ background:var(--magnitude-fill); }
.bar-fill.na{ background-color:var(--status-na-bg); background-image:var(--status-na-hatch); border:1px solid var(--j-ink); border-left:0; }
.bar-row .bar-value{ font-family:var(--j-font-figure); font-size:11.5px; color:var(--j-ink); white-space:nowrap; font-variant-numeric:tabular-nums; }
.bar-row .bar-value small{ font-size:11px; color:var(--j-ink-3); margin-left:4px; }

/* ---------- stacked bars (figure) ---------------------------------------- */
.stack-row{ display:grid; grid-template-columns:170px 1fr 44px; align-items:center; gap:10px; height:22px; cursor:default; transition:opacity .15s ease; }
.stack-row.dim{ opacity:.22; }
.stack-row .stack-label{ font-family:var(--j-font-figure); font-size:11.5px; color:var(--j-ink-2); text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stack-row.match .stack-label{ color:var(--j-ink); font-weight:700; }
.stack-axis{ border-left:1px solid var(--j-ink); height:22px; display:flex; align-items:center; }
.stack-track{ position:relative; height:13px; display:flex; }
.seg{ height:100%; }
.seg.transposed{ background:var(--status-transposed); }
.seg.pending{ background:var(--status-pending); }
.seg.na{ background-color:var(--status-na-bg); background-image:var(--status-na-hatch); box-shadow:inset 0 0 0 1px var(--j-ink); }
.seg + .seg{ border-left:1px solid var(--j-paper); }
.stack-row .stack-total{ font-family:var(--j-font-figure); font-size:11.5px; color:var(--j-ink-2); font-variant-numeric:tabular-nums; }

/* ---------- three-rule tables -------------------------------------------- */
table.j-table{
  width:100%; border-collapse:collapse;
  font-size:13px; line-height:1.25; font-variant-numeric:lining-nums tabular-nums;
  border-top:3px double var(--j-ink); border-bottom:1.5px solid var(--j-ink);
}
.j-table th, .j-table td{ padding:3px 8px; text-align:left; font-weight:400; white-space:nowrap; vertical-align:middle; }
.j-table th:first-child, .j-table td:first-child{ padding-left:0; }
.j-table th:last-child, .j-table td:last-child{ padding-right:0; }
.j-table thead th{ position:sticky; top:0; background:var(--j-paper); border-bottom:1px solid var(--j-ink); padding-top:5px; padding-bottom:5px; z-index:1; }
.j-table tbody tr:first-child td{ padding-top:6px; }
.j-table .num{ text-align:right; }
.j-table tbody tr{ transition:opacity .15s ease; }
.j-table tbody tr:hover td{ background:#f7f7f7; }
.j-table tbody tr.dim{ opacity:.25; }
.j-table tbody tr.match td{ font-weight:700; }
.j-table .clip{ max-width:190px; overflow:hidden; text-overflow:ellipsis; }

/* scrolling tables: the rules sit on the scroll box so they stay visible */
.table-scroll{ padding:0; border-top:3px double var(--j-ink); border-bottom:1.5px solid var(--j-ink); }
.table-scroll table.j-table{ border-top:0; border-bottom:0; }

/* share meter inside a table cell */
.meter{ display:inline-block; vertical-align:middle; width:64px; height:8px; border:1px solid var(--j-ink); margin-right:6px; position:relative; }
.meter > i{ position:absolute; left:0; top:0; bottom:0; background:var(--magnitude-fill); }
.pct{ display:inline-block; min-width:3.4em; text-align:right; }

/* ---------- footer ------------------------------------------------------- */
footer{
  flex:0 0 auto;
  display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:6px 20px;
  max-width:1180px; width:100%; margin:0 auto;
  padding:10px 22px 22px;
  border-top:1px solid var(--j-ink);
  font-size:11.5px; color:var(--j-ink-2);
}
footer span b{ font-weight:400; color:var(--j-ink); }

/* ---------- tooltip ------------------------------------------------------ */
#tooltip{
  position:fixed; pointer-events:none; z-index:50;
  background:var(--j-paper); border:1px solid var(--j-ink); color:var(--j-ink);
  font-family:var(--j-font-figure); font-size:11.5px; line-height:1.5;
  padding:5px 9px; transform:translate(-50%,-112%); white-space:nowrap;
  opacity:0; transition:opacity .08s ease;
}
#tooltip .co{ font-weight:700; }
#tooltip .meta{ color:var(--j-ink-3); }
#tooltip .row span{ color:var(--j-ink-2); }
#tooltip .row b{ font-weight:700; }

/* ---------- print -------------------------------------------------------- */
@media print{
  .slicer-bar, .nav-tabs, #tooltip, #spotlight .close{ display:none !important; }
  .panel-body.scroll{ max-height:none; overflow:visible; }
  .panel, .two-col > *{ break-inside:avoid; }
  .j-table tbody tr:hover td{ background:none; }
}
@media (prefers-reduced-motion: reduce){ *{ transition:none !important; } }