/* juribooks-exhibit-v2.css — the dashboard's treatment, carried across the app.

   Same vocabulary everywhere: a ruled masthead, hairline cards, tables set as
   financial exhibits rather than web grids, figures that align down the
   column, and the accent reserved for the one thing that matters on a screen.
   Scoped to .main so the navigation rail keeps its own palette.

   Loads after juribooks-skin-v2.css, which owns density and the type roles;
   this file owns structure and rhythm. Every value is a token. */

:root{
  --ex-rule:color-mix(in oklab, var(--ink) 12%, transparent);
  --ex-rule-soft:color-mix(in oklab, var(--ink) 7%, transparent);
  --ex-rule-firm:color-mix(in oklab, var(--ink) 24%, transparent);
  --ex-quiet:color-mix(in oklab, var(--navy) 6%, var(--surface));
}

/* ---------- every view opens on a ruled masthead ---------- */
/* The rule goes under the SUBTITLE, which is the last line of every masthead.
   Hanging it off .stmt-title failed twice: that node is never its parent's
   first child (it sits at index 1, after the entity line) and its parent
   differs per view — .frz, .card, a bare div, section.view — so neither a
   child combinator nor :first-child could ever match. .stmt-sub always
   follows the title, so one flat selector covers every screen. */
.main .home-head{
  border-bottom:2px solid var(--navy) !important;
  padding-bottom:12px !important;margin-bottom:18px !important}
/* :not(.home-head *) because the dashboard head draws its own masthead rule
   one level up — without the exclusion this one landed inside it and cut the
   title away from the health gauge and customise control below.
   The leading body[data-plain] is specificity, not decoration: the engine's
   body[data-plain="1"] .stmt-sub:not(.home-head *) is also !important and
   scores (0,3,1), so a (0,3,0) selector lost the colour to its near-black
   however important it was declared. Attribute presence rather than value, so
   it holds under data-plain="1" and "0" alike.
   One margin for every view: a card is not a reason for different leading. */
body[data-plain] .main .stmt-sub:not(.home-head *){
  padding-bottom:12px;margin-bottom:18px;
  border-bottom:2px solid var(--navy) !important}
.main .stmt-title{letter-spacing:-.02em !important;line-height:1.1}
.main .stmt-entity{letter-spacing:.16em;text-transform:uppercase;font-weight:700}
.main .eyebrow{letter-spacing:.14em !important;text-transform:uppercase !important;font-weight:700 !important}

/* ---------- cards: hairline, flat, headed by a rule ---------- */
.main .card{
  border:1px solid var(--ex-rule) !important;
  border-radius:var(--r-sm) !important;
  box-shadow:none !important}
.main .card>.eyebrow:first-child{
  display:block;padding-bottom:9px;margin-bottom:13px;
  border-bottom:1px solid var(--ex-rule-soft)}

/* An attention card. The flat-hairline rules above are !important and score
   (0,2,0)/(0,2,0), so an inline border-color or eyebrow colour on the card lost
   to them silently — every accented card rendered as an ordinary grey one.
   Emphasis therefore belongs in this file, keyed off a marker attribute and
   carried at a specificity that beats its own base rules. */
body[data-plain] .main .card[data-jb2-alert]{
  border-color:var(--accent) !important}
body[data-plain] .main [data-jb2-alert]>.eyebrow{
  color:var(--accent) !important}

/* ---------- tables set as exhibits ---------- */
/* Every data grid the app renders, not a subset: .coa-tbl (Chart of accounts)
   and .jtbl (the Journal entry line grid) were left on the old treatment,
   which showed as a blue-grey row rule against the ink hairline used on the
   statements. Both already scroll horizontally, so the wider headers add no
   new overflow. */
.main :is(.tb-tbl,.stmt,.drill-tbl,.recent-tbl,.coa-tbl,.jtbl){
  border-collapse:collapse}
.main :is(.tb-tbl,.stmt,.drill-tbl,.recent-tbl){width:100%}
.main :is(.tb-tbl,.stmt,.recent-tbl,.coa-tbl,.jtbl) thead th,
.main .drill-tbl th{
  background:transparent !important;
  border-top:1px solid var(--ex-rule-firm) !important;
  border-bottom:1px solid var(--ex-rule) !important;
  letter-spacing:.12em !important;text-transform:uppercase !important;
  font-weight:700 !important;color:var(--mute) !important;
  white-space:nowrap}
.main :is(.tb-tbl,.stmt,.drill-tbl,.recent-tbl,.coa-tbl,.jtbl) td{
  border-bottom:1px solid var(--ex-rule-soft) !important}
.main :is(.tb-tbl,.stmt,.recent-tbl,.coa-tbl) tbody tr:hover>td{
  background:var(--surface-2) !important}
/* figures align down the column, everywhere */
.main .num,.main td.r,.main th.r,.main .amt,.main .v,.main .coa-code{
  font-variant-numeric:tabular-nums lining-nums}
.main .coa-code{letter-spacing:.02em;color:var(--mute) !important}

/* totals: a rule above, a double rule for the closing figure */
.main :is(.tb-tbl,.stmt,.coa-tbl,.jtbl) tr.tot>td,.main .tb-tbl tfoot td{
  border-top:1px solid var(--ex-rule-firm) !important;
  border-bottom:0 !important;
  font-weight:700 !important;color:var(--ink) !important;
  background:transparent !important}
/* a statement's own section captions */
.main .stmt tr.sec>td{
  border-bottom:1px solid var(--ex-rule) !important;
  letter-spacing:.12em;text-transform:uppercase;
  font-weight:700;color:var(--mute) !important;
  padding-top:16px !important}

/* ---------- the report rail ----------
   NOT a tab strip. An underline on the selected item has to meet a rule on the
   container, and those only coincide while every item is on one row; this rail
   wraps to three at the app's own width, which left the accent floating in
   mid-block. The selected state is therefore self-contained: an accent bar on
   the item itself, which reads the same wherever the item lands.
   Groups are separated by their own uppercase shelf label and the gap. A
   border between them needed a first-child exemption that never matched,
   because the rail's own "Reports" label is the first child. */
:is(#view-reports,#view-metrics,#view-afs) .rlist{
  border-bottom:1px solid var(--ex-rule) !important;
  gap:3px 4px !important;padding-bottom:12px !important;margin-bottom:18px !important;
  align-items:stretch !important}
:is(#view-reports,#view-metrics,#view-afs) .rlist-item{
  border:0 !important;border-radius:0 !important;
  background:transparent !important;
  color:var(--mute) !important;font-weight:600 !important;
  padding:7px 12px 7px 11px !important;
  border-left:2px solid transparent !important}
:is(#view-reports,#view-metrics,#view-afs) .rlist-item:hover{
  background:var(--surface-2) !important;color:var(--ink) !important;
  border-left-color:var(--ex-rule-firm) !important}
:is(#view-reports,#view-metrics,#view-afs) .rlist-item.on{
  background:var(--ex-quiet) !important;color:var(--navy) !important;
  font-weight:700 !important;
  border-left-color:var(--accent) !important}
:is(#view-reports,#view-metrics,#view-afs) .rlist [data-jb2-group]{
  align-items:center}

/* ---------- KPI tiles wherever they appear ---------- */
.main .kpi-grid{
  gap:1px !important;background:var(--ex-rule-soft);
  border:1px solid var(--ex-rule);border-radius:var(--r-sm);overflow:hidden}
.main .kpi-grid .kpi,.main .kpi-grid .dkpi{
  border:0 !important;border-radius:0 !important;box-shadow:none !important;
  background:var(--surface) !important}
.main .kpi .l,.main .dkpi .l{
  letter-spacing:.13em !important;text-transform:uppercase !important;
  font-weight:700 !important;color:var(--mute) !important}
.main .kpi .v,.main .dkpi .v{
  letter-spacing:-.028em !important;line-height:1.05 !important;
  font-variant-numeric:tabular-nums lining-nums}

/* ---------- controls: quieter, so the figures lead ---------- */
.main .btn{box-shadow:none !important}
.main .btn.primary{border-color:var(--navy) !important}
.main .pill{border:1px solid var(--ex-rule) !important;background:transparent !important}
.main .tag{border-radius:3px !important;letter-spacing:.08em}
.main .seg,.main .seg-btn{border-color:var(--ex-rule) !important}

/* ---------- charts ---------- */
.main .chart-card{border:1px solid var(--ex-rule) !important;box-shadow:none !important}
.main .lgd{
  width:auto !important;height:auto !important;border-radius:0 !important;
  display:inline-block;position:relative;padding-left:16px;background:none !important}
.main .lgd::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:11px;height:3px;border-radius:1px;background:currentColor}

/* ---------- quiet notes and empty states ---------- */
.main .hnote,.main .stmt-sub,.main .drill-sub,.main .sw-status{
  color:var(--mute) !important;line-height:1.55}
.main .empty{
  border:1px dashed var(--ex-rule) !important;border-radius:var(--r-sm);
  background:transparent !important;color:var(--mute) !important}