/* juribooks-dashboard-skin-v2.css — institutional dashboard treatment.

   The reference is the printed exhibit, not the web dashboard: hairlines
   instead of boxes, one accent used once, figures that align down the column,
   and no ornament that is not data. Every value is a token, so Appearance and
   the clean theme still govern all of it.

   Scoped to #view-home so no other view is touched. */

#view-home{
  --ex-rule:color-mix(in oklab, var(--ink) 12%, transparent);
  --ex-rule-soft:color-mix(in oklab, var(--ink) 7%, transparent);
  --ex-quiet:color-mix(in oklab, var(--navy) 8%, transparent);
}

/* ---------- the page head reads as a masthead ----------
   An accent hairline above the whole page, then the masthead, then the rule:
   the top of a financial front page rather than the top of a web app. One
   accent, used once, at the point of entry. */
#view-home{padding-top:0}
#view-home .home-head{
  position:relative;
  padding-top:16px;
  padding-bottom:14px;
  border-bottom:2px solid var(--navy) !important;
  margin-bottom:22px}
#view-home .home-head::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent)}
/* Neither colour NOR opacity is set on these two. .home-head is a navy panel
   in the classic theme and a light one in clean; the engine resolves the
   colour for each, and dimming whatever it resolved simply moved a contrast
   failure from one theme to the other. Hierarchy comes from size, weight,
   case and tracking, none of which touch contrast. */
#view-home .home-head .stmt-entity{
  font-size:var(--f-2xs);letter-spacing:.16em;text-transform:uppercase;font-weight:700}
/* No font-size here: every token derives from --fbody and the engine already
   sets this from the top of that scale, so naming a smaller token would have
   quietly shrunk the page title. Presence comes from tracking and leading. */
#view-home .home-head .stmt-title{letter-spacing:-.03em;line-height:1.02}
#view-home .home-head .stmt-sub{font-weight:400;letter-spacing:.005em}

/* ---------- KPI tiles: stat blocks divided by rules, not boxed ---------- */
/* The rules ARE the gaps: the band's own colour shows through a 1px grid gap
   on every edge between tiles. Drawing them as borders instead encoded "one
   row" — nothing separated wrapped rows, and a :first-child exemption clears
   only the first tile in the DOM, not the first of each row. This is
   column-count agnostic, so it survives any wrap without a breakpoint. */
#view-home .kpi-grid{
  gap:1px !important;
  background:var(--ex-rule-soft);
  border:1px solid var(--ex-rule);
  border-radius:var(--r-sm);
  overflow:hidden;
  margin-bottom:14px}
#view-home .kpi-grid .dkpi,
#view-home .kpi-grid .kpi{
  border:0 !important;border-radius:0 !important;box-shadow:none !important;
  padding:16px 18px 15px !important;
  background:var(--surface) !important;
  position:relative;
  transition:background .16s ease}

/* ---------- the headline figure ----------
   Four tiles of equal weight is the universal admin-dashboard skeleton, and no
   amount of restraint stops it reading as one. An annual report does the
   opposite: ONE figure carries the page and everything else is marginalia
   around it. So the leading tile — cash, which the reordering layer already
   puts first — spans the full band above the rest, at roughly three times
   their size. The scale contrast is the whole design; nothing decorative is
   added to get it.

   Full-width rather than a 2x2 block on purpose: it holds whatever number of
   tiles the dashboard is showing, with no hole in the grid at four or six. */
/* Keyed on [data-jb2-lead], not on :first-child alone. The dashboard has TWO
   .kpi-grid bands, and "first tile inside the view's kpi-grid" matched the
   first tile of BOTH — so Receivables outstanding became a second headline at
   the same size and full width, which is the exact failure this treatment
   exists to prevent. CSS has no "first element of class" selector, but the
   reordering layer already marks the leading band's tiles, so that marker is
   the honest anchor: the headline belongs to the band that has a lead. */
#view-home .kpi-grid > .dkpi[data-jb2-lead]:first-child{
  grid-column:1 / -1;
  padding:26px 30px 24px !important}
#view-home .kpi-grid > .dkpi[data-jb2-lead]:first-child .l{
  font-size:var(--f-2xs) !important;letter-spacing:.2em !important}
#view-home .kpi-grid > .dkpi[data-jb2-lead]:first-child .v{
  /* the heading face, not the mono face: figures set as a headline. Still the
     firm's chosen heading font, so central type control still governs it. */
  font-family:var(--font-heading) !important;
  /* bounded in --fbody, not raw px, so the Settings font-size control still
     moves this with everything else instead of leaving it stranded. */
  font-size:clamp(calc(var(--fbody) * 3.4), 7vw, calc(var(--fbody) * 6)) !important;
  letter-spacing:-.04em !important;line-height:.98 !important;
  margin-top:12px !important}
#view-home .kpi-grid > .dkpi[data-jb2-lead]:first-child .s,
#view-home .kpi-grid > .dkpi[data-jb2-lead]:first-child .d{
  font-size:var(--f-rd) !important;margin-top:10px !important;max-width:62ch}
/* The supporting figures are deliberately left at the engine's own size. Naming
   a token for them meant naming a SMALLER one — the whole scale derives from
   --fbody — which would have shrunk them rather than making the headline
   dominant. The contrast is created by raising the headline, not lowering
   everything else.

   The second lead tile is the one exception: it is emphasised, but by a modest
   step that keeps it clearly subordinate. Two figures at the same size is two
   headlines, which is none. */
#view-home .kpi-grid > .dkpi[data-jb2-lead]:not(:first-child) .v{
  font-size:calc(var(--fbody) * 1.9 * var(--zoom,1) * var(--mult-heading,1)) !important}
#view-home .kpi-grid .dkpi:hover,
#view-home .kpi-grid .kpi:hover{background:var(--surface-2) !important}

/* the label is a caption, not a heading */
#view-home .dkpi .l,#view-home .kpi .l{
  letter-spacing:.13em !important;text-transform:uppercase !important;
  color:var(--mute) !important;font-weight:700 !important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* the figure carries the weight: tabular, tight, unornamented */
#view-home .dkpi .v,#view-home .kpi .v{
  font-variant-numeric:tabular-nums lining-nums;
  letter-spacing:-.028em !important;line-height:1.05 !important;
  margin-top:10px !important;color:var(--ink) !important}
#view-home .dkpi .s,#view-home .dkpi .d,#view-home .kpi .d{
  margin-top:7px !important;color:var(--mute) !important;
  font-variant-numeric:tabular-nums}

/* Colour lands once. The headline gets the wash and the accent above it; the
   second lead tile keeps a navy rule only, or the row turns into two competing
   emphases and the hierarchy collapses back to "normal". */
#view-home .kpi-grid > .dkpi[data-jb2-lead]:first-child{
  background:color-mix(in oklab, var(--navy) 6%, var(--surface)) !important}
#view-home .kpi-grid .dkpi[data-jb2-lead]:not(:first-child){
  background:var(--surface) !important}
#view-home .kpi-grid .dkpi[data-jb2-lead]::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--navy)}
#view-home .kpi-grid .dkpi[data-jb2-lead]:first-child::before{background:var(--accent)}

/* ---------- cards: hairline, flat, headed by a rule ---------- */
#view-home .card,#view-home .home-card{
  border:1px solid var(--ex-rule) !important;
  border-radius:var(--r-sm) !important;
  box-shadow:none !important;
  padding:17px 19px 18px !important}
#view-home .home-card>.eyebrow:first-child,
#view-home .card>.eyebrow:first-child{
  display:block;padding-bottom:9px;margin-bottom:13px;
  border-bottom:1px solid var(--ex-rule-soft)}
#view-home .eyebrow{
  letter-spacing:.14em !important;text-transform:uppercase !important;
  font-weight:700 !important;color:var(--mute) !important}
#view-home .hnote{color:var(--mute) !important;line-height:1.55}
#view-home .hrow{gap:14px !important}

/* An attention card on the dashboard. The marker rule in juribooks-exhibit-v2.css
   is (0,4,0) and cannot reach in here: the two rules above are ID-scoped
   (1,1,0) and !important, so they win on specificity, and this file also
   redefines --ex-rule inside #view-home. The eyebrow selector carries the
   card's attribute too, so it beats #view-home .card>.eyebrow:first-child. */
#view-home .card[data-jb2-alert]{border-color:var(--accent) !important}
#view-home .card[data-jb2-alert]>.eyebrow{color:var(--accent) !important}

/* ---------- figures inside cards align down the column ---------- */
#view-home .num,#view-home td.r,#view-home .v,#view-home .amt{
  font-variant-numeric:tabular-nums lining-nums}
#view-home table td,#view-home table th{border-color:var(--ex-rule-soft) !important}
#view-home table thead th{
  background:transparent !important;
  border-bottom:1px solid var(--ex-rule) !important;
  letter-spacing:.11em !important}
#view-home table tr.tot>td{border-top:1px solid var(--ex-rule) !important}

/* ---------- charts: data-ink only ---------- */
#view-home .lgd{
  width:auto !important;height:auto !important;border-radius:0 !important;
  display:inline-block;position:relative;padding-left:16px;background:none !important}
#view-home .lgd::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:11px;height:3px;border-radius:1px;background:currentColor}
#view-home .spark,#view-home .sparkbars{gap:6px !important}
#view-home .spark i,#view-home .sparkbars i{border-radius:2px 2px 0 0 !important}

/* ---------- shortcuts read as a menu, not buttons ---------- */
#view-home .hshort{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--ex-rule-soft)}
#view-home .hshort .btn{
  border:0 !important;border-radius:0 !important;background:var(--surface) !important;
  justify-content:flex-start !important;padding:11px 13px !important;
  color:var(--ink-soft) !important}
#view-home .hshort .btn:hover{background:var(--surface-2) !important;color:var(--navy) !important}

/* ---------- the attention strip sits with the exhibit ---------- */
#view-home #jb2-blockers{border-radius:var(--r-sm) !important;border-color:var(--ex-rule) !important}