/* juribooks-skin-v2.css — chrome, density and card skin, v2.
   Loads LAST so it wins on specificity alone. Overrides only; no engine file
   is edited, no class is renamed, no renderer knows this exists.
   Palette and metrics match the redesign mockup. */

:root{
  /* The redesign owns no palette. Each name below is an alias onto the
     engine's semantic token, so Appearance, the clean theme and any future
     theme reach every rule in this file. --accent is the single exception:
     the brand orange the engine has no token for, declared once here. */
  --accent:oklch(64% 0.152 52);
  /* the rail and primary buttons sit on navy, so their text is fixed light
     rather than following --surface, which a theme may darken */
  --on-navy:oklch(100% 0 0);
  --jb2-navy:var(--navy); --jb2-navy-deep:var(--navy-700); --jb2-accent:var(--accent);
  --jb2-paper:var(--paper); --jb2-surface:var(--surface);
  --jb2-line:var(--line); --jb2-line-soft:var(--line);
  --jb2-ink:var(--ink); --jb2-ink-soft:var(--ink-soft);
  --jb2-mute:var(--mute); --jb2-faint:var(--mute-2);
  --jb2-pos:var(--balanced); --jb2-neg:var(--credit); --jb2-warn:var(--flag);
  --jb2-r:var(--radius); --jb2-r-sm:var(--r-sm);
}

/* ---------- rail ---------- */
.rail{background:var(--jb2-navy) !important;background-image:none !important;border-right:1px solid var(--jb2-navy-deep) !important;box-shadow:none !important}
.rail .brand{padding:16px 16px 14px !important}
.rail .navtoggle{color:rgba(255,255,255,.5) !important;font-size:var(--f-xs) !important;letter-spacing:.06em;text-transform:uppercase}
.rail .navtoggle:hover{color:var(--on-navy) !important}
.rail-foot{border-top:1px solid rgba(255,255,255,.1) !important;padding:11px 14px !important}
.rail-foot button{color:rgba(255,255,255,.6) !important;background:transparent !important}
.rail-foot button:hover{color:var(--surface) !important;background:rgba(255,255,255,.09) !important}

/* ---------- topbar ---------- */
.topbar{background:var(--jb2-surface) !important;border-bottom:1px solid var(--jb2-line) !important;box-shadow:none !important;padding:13px 24px !important;gap:18px}
.topbar h1{font-size:calc(var(--fbody) * 1.6 * var(--zoom,1) * var(--mult-heading,1)) !important;font-weight:700 !important;letter-spacing:-.02em !important;color:var(--jb2-ink) !important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .sub{font-size:calc(var(--fbody) * 0.92 * var(--zoom,1) * var(--mult-sub,1)) !important;color:var(--jb2-mute) !important;margin-top:3px !important}
.tb-title{flex:1 1 auto;min-width:max-content}
.tb-actions{flex:0 1 auto;min-width:0;gap:8px !important}
.tb-actions .btn,.topbar .btn{flex-shrink:0;white-space:nowrap}

/* ---------- controls ---------- */
.btn{border-radius:var(--jb2-r-sm) !important;border:1px solid var(--jb2-line) !important;background:var(--jb2-surface) !important;color:var(--jb2-ink-soft) !important;font-size:calc(var(--fbody) * 0.94 * var(--zoom,1)) !important;font-weight:500 !important;padding:8px 12px !important;box-shadow:none !important}
.btn:hover{border-color:var(--line-2) !important;background:var(--jb2-surface) !important}
.btn.primary{background:var(--jb2-navy) !important;border-color:var(--jb2-navy) !important;color:var(--on-navy) !important;font-weight:600 !important}
.btn.primary:hover{background:var(--jb2-navy-deep) !important;border-color:var(--jb2-navy-deep) !important}
.btn.danger{background:var(--jb2-surface) !important;border-color:var(--bg-credit) !important;color:var(--jb2-neg) !important}
.btn-mini{border-radius:6px !important;font-size:var(--f-xs) !important;padding:5px 9px !important}
.inp,.sw-head input[type=text],select.jobsel{border:1px solid var(--jb2-line) !important;border-radius:var(--jb2-r-sm) !important;background:var(--jb2-surface) !important;font-size:calc(var(--fbody) * 0.94 * var(--zoom,1)) !important;padding:7px 10px !important;box-shadow:none !important}
.inp:focus,.sw-head input[type=text]:focus,select.jobsel:focus{border-color:var(--jb2-navy) !important;box-shadow:var(--ring) !important;outline:none !important}
.pill{border-radius:999px !important;font-size:var(--f-xs) !important;padding:5px 11px !important}
.seg,.seg-btn,.seg button{border-radius:var(--jb2-r-sm) !important;font-size:var(--f-sm) !important}
.seg button.on,.seg-btn.on{background:var(--jb2-navy) !important;color:var(--surface) !important;border-color:var(--jb2-navy) !important}
.tag{border-radius:5px !important;font-size:var(--f-2xs) !important;letter-spacing:.05em;text-transform:uppercase;font-weight:700 !important}

/* ---------- cards ---------- */
.card,.beam-card,.modal{background:var(--jb2-surface) !important;border:1px solid var(--jb2-line) !important;border-radius:var(--jb2-r) !important;box-shadow:none !important}
.card{padding:15px 17px !important}
.card h4{font-size:calc(var(--fbody) * 1.08 * var(--zoom,1) * var(--mult-heading,1)) !important;font-weight:700 !important;color:var(--jb2-ink) !important;margin:0 0 10px !important}
.kpi-grid{gap:12px !important}
.kpi,.dkpi{background:var(--jb2-surface) !important;border:1px solid var(--jb2-line) !important;border-radius:var(--jb2-r) !important;box-shadow:none !important;padding:13px 15px !important}
.kpi:hover,.dkpi:hover{border-color:var(--line-2) !important;box-shadow:none !important}
.kpi::before{display:none !important}
.kpi .l,.dkpi .l{font-size:calc(var(--fbody) * 0.78 * var(--zoom,1) * var(--mult-sub,1)) !important;letter-spacing:.09em !important;text-transform:uppercase !important;color:var(--jb2-mute) !important;font-weight:700 !important}
.kpi .v,.dkpi .v{font-size:calc(var(--fbody) * 1.70 * var(--zoom,1) * var(--mult-heading,1)) !important;font-weight:600 !important;letter-spacing:-.02em !important;color:var(--jb2-ink) !important;margin-top:7px !important}
.kpi .d,.dkpi .s{font-size:calc(var(--fbody) * 0.88 * var(--zoom,1)) !important;color:var(--jb2-mute) !important;margin-top:5px !important}

/* ---------- density: tighter than today ---------- */
.stmt,.tb-tbl,.recent-tbl,.drill-tbl{font-size:calc(var(--fbody) * 0.94 * var(--zoom,1)) !important}
.stmt th,.tb-tbl th,.recent-tbl th,.drill-tbl th{padding:8px 11px !important;font-size:calc(var(--fbody) * 0.78 * var(--zoom,1) * var(--mult-sub,1)) !important;letter-spacing:.08em !important;text-transform:uppercase !important;color:var(--jb2-mute) !important;font-weight:600 !important;background:var(--surface-2) !important;border-bottom:1px solid var(--jb2-line) !important}
.stmt td,.tb-tbl td,.recent-tbl td,.drill-tbl td{padding:7px 11px !important;border-bottom:1px solid var(--jb2-line-soft) !important;color:var(--jb2-ink-soft) !important}
.stmt td:first-child,.tb-tbl td:first-child,.stmt th:first-child,.tb-tbl th:first-child{padding-left:16px !important}
.tb-tbl tbody tr:nth-child(even)>td{background:transparent !important}
.tb-tbl tbody tr:hover>td,.tb-tbl tr:hover td,.recent-tbl tr:hover td,.drill-row:hover{background:var(--surface-2) !important}
.stmt tr.tot>td,.tb-tbl tr.tot>td,.tb-tbl tfoot td{font-weight:600 !important;color:var(--jb2-ink) !important;border-top:1px solid var(--line-strong) !important}
.stmt .r,.tb-tbl .r,.recent-tbl td.r,td.num,.stmt .amt{font-variant-numeric:tabular-nums;color:var(--jb2-ink) !important}

/* ---------- statements ---------- */
.stmt-title,.drill-title,.modal-head h3,.sw-band .bt{font-weight:700 !important;letter-spacing:-.015em !important;color:var(--jb2-ink) !important}
.stmt-sub,.drill-sub{font-size:calc(var(--fbody) * 0.92 * var(--zoom,1) * var(--mult-sub,1)) !important;color:var(--jb2-mute) !important}
.sw-band{background:var(--jb2-surface) !important;border-bottom:1px solid var(--jb2-line) !important}
.sw-toolbar,.je-toolbar{gap:7px !important}
.sw-status{font-size:calc(var(--fbody) * 0.88 * var(--zoom,1)) !important;color:var(--jb2-mute) !important}

/* ---------- links ---------- */
a{color:var(--navy)}
a:hover{color:var(--jb2-accent)}

/* ---------- clean-theme override: the rail's children must not repaint it ---------- */
body[data-ui="clean"] .rail,.rail{background:var(--jb2-navy) !important;background-image:none !important}
body[data-ui="clean"] .rail *,.rail .nav,.rail #nav,.rail .brand,.rail .navtoggle,.rail .rail-foot,.rail .navgrp,.rail .navgrp-items{background-color:transparent !important;background-image:none !important}
body[data-ui="clean"] .rail .brand,body[data-ui="clean"] .rail .brand *{color:var(--on-navy) !important}
body[data-ui="clean"] .rail .navtoggle,body[data-ui="clean"] .rail #nav .jb2-glab{color:rgba(255,255,255,.5) !important}
body[data-ui="clean"] .rail #nav .jb2-item{color:rgba(255,255,255,.74) !important}
body[data-ui="clean"] .rail #nav .jb2-item.on,body[data-ui="clean"] .rail #nav .jb2-item:hover{color:var(--on-navy) !important}
body[data-ui="clean"] .rail #nav .jb2-item.on{background-color:rgba(255,255,255,.13) !important}
body[data-ui="clean"] .rail #nav .jb2-item:hover{background-color:rgba(255,255,255,.08) !important}
.rail #nav .jb2-bar{background-color:rgba(255,255,255,.14) !important}
.rail #nav .jb2-item.on .jb2-bar{background-color:var(--jb2-accent) !important}
.rail .brand-logo,.rail .wm{filter:none !important}
body[data-ui="clean"] .rail-foot{border-top:1px solid rgba(255,255,255,.1) !important}

/* ================= typography audit, v2 =================
   Everything that renders text now resolves to ONE of the three roles the app
   already exposes in Settings > Appearance > Typography:
     --font-heading / --color-heading     titles, card heads, statement titles
     --font-subheading / --color-subheading  eyebrows, table heads, KPI labels
     --font-body / --color-body           body copy, table cells, controls
   Nothing below hardcodes a family or a text colour, so changing a role in
   Settings changes every screen, this skin included. */

/* headings */
.card h4,.sw-title .t,.beam-head .ttl,.home-head .stmt-title,.chart-card h4,
#view-reports .rep-title,.dt-head,.modal-head h3,.drill-title,.jbar .t{
  font-family:var(--font-heading) !important;color:var(--color-heading) !important}

/* subheadings: eyebrows, table heads, KPI labels, shelf labels */
.kpi .l,.dkpi .l,.eyebrow,.sw-title .st,.stmt-sub,.drill-sub,
.stmt thead th,.tb-tbl thead th,.recent-tbl thead th,.drill-tbl th,
#nav .jb2-glab{font-family:var(--font-subheading) !important}
.kpi .l,.dkpi .l,.eyebrow,.sw-title .st,.stmt-sub,.drill-sub,
.stmt thead th,.tb-tbl thead th,.recent-tbl thead th,.drill-tbl th{
  color:var(--color-subheading) !important}

/* body: cells, controls, lists, chips, the report rail */
.stmt td,.tb-tbl td,.recent-tbl td,.drill-tbl td,.btn,.inp:not([data-jb2-preview]),.pill,.tag,
.rlist-item,.seg button,.seg-btn,.sw-status,.card,.home-head{
  font-family:var(--font-body) !important}
.stmt td,.tb-tbl td,.recent-tbl td,.drill-tbl td,.rlist-item,.btn{
  color:var(--color-body) !important}

/* numbers keep tabular alignment but follow the body role for family */
.stmt .r,.tb-tbl .r,.recent-tbl td.r,td.num,.stmt .amt,.kpi .v,.dkpi .v{
  font-variant-numeric:tabular-nums;color:var(--color-heading) !important}

/* the rail sits on navy, so it keeps its own colours and only takes families */
#nav .jb2-item,.rail .brand,.rail .navtoggle{font-family:var(--font-body) !important}

/* ---- no rule under the dashboard heading ---- */
#view-home hr.rep-rule,#view-home .home-head hr{display:none !important}

/* ---------- report-style rails go horizontal: Financial Reports,
   Performance & KPIs and Management Accounts share the same .rlayout ---------- */
:is(#view-reports,#view-metrics,#view-afs) .rlayout{display:block !important}
:is(#view-reports,#view-metrics,#view-afs) .rlist{
  display:flex !important;flex-wrap:wrap !important;align-items:center;gap:7px !important;
  width:auto !important;max-width:none !important;position:static !important;
  border-right:0 !important;border-bottom:1px solid var(--jb2-line) !important;
  padding:0 0 12px !important;margin:0 0 16px !important;overflow:visible !important;height:auto !important}
:is(#view-reports,#view-metrics,#view-afs) .rlist-item{
  display:inline-flex !important;align-items:center;width:auto !important;
  padding:7px 13px !important;margin:0 !important;border:1px solid var(--jb2-line) !important;
  border-radius:999px !important;background:var(--surface) !important;white-space:nowrap;
  font-size:calc(var(--fbody) * 0.94 * var(--zoom,1)) !important;line-height:1.2 !important}
:is(#view-reports,#view-metrics,#view-afs) .rlist-item:hover{border-color:var(--line-2) !important;background:var(--surface-2) !important}
:is(#view-reports,#view-metrics,#view-afs) .rlist-item.on{
  background:var(--jb2-navy) !important;border-color:var(--jb2-navy) !important;color:var(--surface) !important;font-weight:600 !important}

:is(#view-reports,#view-metrics,#view-afs) .rbody{width:auto !important;flex:none !important}

/* shelf labels: demoted by weight, size and a genuinely muted colour */
:is(#view-reports,#view-metrics,#view-afs) .rlist [data-jb2-shelf]{
  color:var(--mute) !important;opacity:.9;
  padding:0 2px 0 0 !important;margin:0 !important;border:0 !important}
/* Group dividers removed. A border needed a :first-child exemption that never
   matched, because the rail's own "Reports" label is child 0 — so the leading
   group carried a divider, and every group starting a wrapped row painted a
   hairline against the rail's left edge with nothing to its left. The
   uppercase shelf label and the rail's gap separate them, at any wrap. */

/* ---------- weight and style honour the three type roles ---------- */
.card h4,.sw-title .t,.beam-head .ttl,.home-head .stmt-title,.chart-card h4,
.modal-head h3,.drill-title,.stmt-title,#view-ai [style*="font-family:var(--font-heading)"]{
  font-weight:var(--weight-heading,700) !important;font-style:var(--style-heading,normal) !important}
.kpi .l,.dkpi .l,.eyebrow,.sw-title .st,.stmt-sub,.drill-sub,
.stmt thead th,.tb-tbl thead th,.recent-tbl thead th,.drill-tbl th{
  font-weight:var(--weight-subheading,600) !important;font-style:var(--style-subheading,normal) !important}
.stmt td,.tb-tbl td,.recent-tbl td,.drill-tbl td,.rlist-item,.card,.home-head{
  font-weight:var(--weight-body,400);font-style:var(--style-body,normal)}
.stmt tr.tot>td,.tb-tbl tr.tot>td,.tb-tbl tfoot td{font-weight:700 !important}

/* ---------- clean + plain: the dashboard banner must not be white on white ----------
   index.html sets .home-head{background:var(--fill-navy)} for a navy banner,
   body[data-ui="clean"] whitens that background, and body[data-plain="1"]
   still forces the three text nodes to #fff. Both conditions ship together,
   so the heading, entity and subtitle disappear. Selector below matches the
   engine's own combination and outranks it, resolving the text to ink. */
/* The engine also dims these two (.home-head .stmt-*{opacity:.85}), which was
   written for white text on the navy panel. Once the colour above is chosen
   against a WHITE panel instead, that same dimming pulls it under AA, so the
   dimming is cancelled here rather than the ink being darkened to survive it. */
body[data-ui="clean"][data-plain="1"] .home-head .stmt-entity{color:var(--color-subheading,var(--mute)) !important;opacity:1 !important}
body[data-ui="clean"][data-plain="1"] .home-head .stmt-title{color:var(--color-heading,var(--ink)) !important;opacity:1 !important}
body[data-ui="clean"][data-plain="1"] .home-head .stmt-sub{color:var(--color-subheading,var(--mute)) !important;opacity:1 !important}
body[data-ui="clean"][data-plain="1"] .home-head{border-bottom:1px solid var(--line)}

/* 2. overlay elevation the clean theme cannot flatten: --sh-3 is deliberately
   reduced to a hairline there, which left the modal with no lift at all */
:root{--overlay-shadow:0 4px 14px oklch(21% 0.02 262 / .16),0 24px 60px oklch(21% 0.02 262 / .34)}