/* juribooks-ops-polish-v1.css  (2026-10-17)
   Subscriptions & Renewals (#view-subs) and Prepayments & Accruals (#view-prepay).
   Presentation only: no figure, label or action changes here.

   1. One summary band per page, the same on both: a single surface split by
      hairlines, a plain label, the figure as the loudest thing, a quiet note.
      Replaces four or three identical boxed tiles whose figures were the same
      12px as their labels.
   2. Section headings read as headings (sentence case, ink), not as small
      uppercase kickers sitting on the card border.
   3. Cards placed directly on the Subscriptions page get the inner spacing the
      rest of the app's cards have (a theme rule zeroed it, so forms and tables
      ran edge to edge).
   4. The commitment form: a real two-column grid on desktop, one column on a
      phone, so no field is squeezed to a sliver.
   5. Browser surfaces: tabular numerals, focus rings, selection colour.
   Scoped by view id and !important only where the theme layers use it.
   Rollback: remove the <link>. */

/* ---------- 1. the summary band ---------- */
#view-subs .kpi-grid,
#view-prepay .jb-summary-strip{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr)) !important;
  gap:0 !important;
  margin:0 0 20px !important;
  padding:0 !important;
  background:var(--surface,#fff) !important;
  border:1px solid var(--line-strong,#C9D2DE) !important;
  border-radius:12px !important;
  box-shadow:0 1px 2px rgba(16,24,40,.04) !important;
  overflow:hidden;
}
#view-subs .kpi-grid > .dkpi,
#view-prepay .jb-summary-strip > .mx{
  position:relative;
  margin:0 !important;
  padding:16px 20px 15px !important;
  background:none !important;
  background-image:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  min-height:0 !important;
  text-align:left !important;
}
#view-subs .kpi-grid > .dkpi + .dkpi,
#view-prepay .jb-summary-strip > .mx + .mx{
  border-left:1px solid var(--line,#E3E8EF) !important;
}
#view-subs .kpi-grid > .dkpi::before,#view-subs .kpi-grid > .dkpi::after,
#view-prepay .jb-summary-strip > .mx::before,#view-prepay .jb-summary-strip > .mx::after{
  display:none !important;            /* the decorative corner rings the tile skin draws */
}
#view-subs .kpi-grid .l,
#view-prepay .jb-summary-strip .l{
  font-size:12.5px !important;font-weight:600 !important;
  letter-spacing:0 !important;text-transform:none !important;
  color:var(--mute,#5B6577) !important;
  white-space:normal !important;line-height:1.35 !important;
}
#view-subs .kpi-grid .v,
#view-prepay .jb-summary-strip .v{
  margin-top:6px !important;
  font-weight:650 !important;
  line-height:1.15 !important;letter-spacing:-.02em !important;
  color:var(--ink,#101828) !important;
  font-variant-numeric:tabular-nums lining-nums;
  text-align:left !important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
#view-subs .kpi-grid .s,#view-subs .kpi-grid .d,
#view-prepay .jb-summary-strip .d{
  margin-top:4px !important;
  font-size:12px !important;line-height:1.4 !important;
  color:var(--mute,#5B6577) !important;
}
#view-prepay .jb-summary-strip .d:empty{display:none}
/* The figures take the type system's headline-figure role (--jb-ui-h1, the size the firm sets in
   Text settings), as the Home page KPIs do. text-settings.css matches every interface element at
   six-id specificity (three :not ids plus its #feeNote and #stmtBox exclusions), so this carries nine. */
html:not(#jb-op-a):not(#jb-op-b):not(#jb-op-c):not(#jb-op-d):not(#jb-op-e):not(#jb-op-f):not(#jb-op-g):not(#jb-op-h) body #view-subs .kpi-grid .v,
html:not(#jb-op-a):not(#jb-op-b):not(#jb-op-c):not(#jb-op-d):not(#jb-op-e):not(#jb-op-f):not(#jb-op-g):not(#jb-op-h) body #view-prepay .jb-summary-strip .v{
  font-size:min(var(--jb-ui-h1,28px),26px) !important;
  font-family:var(--font-heading,var(--font-ui)) !important;
}
@media (max-width:720px){
  html:not(#jb-op-a):not(#jb-op-b):not(#jb-op-c):not(#jb-op-d):not(#jb-op-e):not(#jb-op-f):not(#jb-op-g):not(#jb-op-h) body #view-subs .kpi-grid .v,
  html:not(#jb-op-a):not(#jb-op-b):not(#jb-op-c):not(#jb-op-d):not(#jb-op-e):not(#jb-op-f):not(#jb-op-g):not(#jb-op-h) body #view-prepay .jb-summary-strip .v{font-size:min(var(--jb-ui-h1,28px),19px) !important}
}
/* the lead figure carries the brand accent once; an overdue figure is red only when there is one */
#view-subs .kpi-grid > .dkpi:first-child .v,
#view-prepay .jb-summary-strip > .mx:first-child .v{color:var(--navy,#0B223E) !important}
#view-subs .kpi-grid > .dkpi[data-tone="alert"] .v{color:var(--credit,#B42318) !important}
#view-subs .kpi-grid > .dkpi[data-tone="alert"] .s{color:var(--credit,#B42318) !important}

/* ---------- 2 + 3. cards and their headings on Subscriptions ---------- */
#view-subs > .card{
  padding:20px 22px 18px !important;
  border-radius:12px !important;
  margin-bottom:20px !important;
}
#view-subs > .card > .eyebrow{
  margin:0 0 14px !important;padding:0 0 12px !important;
  font-size:15px !important;font-weight:650 !important;
  letter-spacing:-.005em !important;text-transform:none !important;
  color:var(--ink,#101828) !important;
  border-bottom:1px solid var(--line,#E3E8EF) !important;
  background:none !important;
}
#view-subs > .card > .eyebrow::before,#view-subs > .card > .eyebrow::after{display:none !important}
/* the card that needs a decision is marked once, by its border and heading, not a thick side bar */
#view-subs > .card[data-jb2-alert]{
  border-color:#E8B54D !important;
  background:linear-gradient(#FFFBF2,#FFFBF2) padding-box !important;
}
#view-subs > .card[data-jb2-alert] > .eyebrow{color:#7A5200 !important;border-bottom-color:#F3DDB0 !important}
#view-subs > .card .tb-tbl{margin:0 !important}
#view-subs > .card .hnote{font-size:12.5px;color:var(--mute,#5B6577);line-height:1.5;max-width:78ch}

/* the page introduction: a readable measure, tighter to its title */
#view-subs > .stmt-sub{max-width:82ch;line-height:1.55 !important;margin-bottom:14px !important}

/* the calendar's second line: sentence case, first letter capitalised */
#view-subs .sb-meta::first-letter{text-transform:uppercase}

/* ---------- 4. the commitment form ---------- */
#view-subs > .card .field-row{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:14px 18px !important;
  margin:0 0 14px !important;
}
#view-subs > .card .field-row > div{min-width:0}
#view-subs > .card label.fld{display:block;margin:0 0 6px !important;font-size:12.5px !important;font-weight:600 !important;color:var(--ink-2,#344054) !important}
#view-subs > .card .inp{width:100%;min-width:0;box-sizing:border-box}
#view-subs #sbBank{min-width:0}
#view-subs > .card .hrow{display:flex !important;flex-wrap:wrap}

/* ---------- 5. browser surfaces ---------- */
#view-subs .tb-tbl td.num,#view-subs .tb-tbl td.r,
#view-prepay .tb-tbl td.num,#view-prepay .tb-tbl td.r{font-variant-numeric:tabular-nums lining-nums}
#view-subs :is(button,.btn,select,input,summary):focus-visible,
#view-prepay :is(button,.btn,select,input,summary,.rtab):focus-visible{
  outline:2px solid var(--accent,#1672E8) !important;outline-offset:2px !important;
}
#view-subs ::selection,#view-prepay ::selection{background:color-mix(in oklab,var(--accent,#1672E8) 22%,transparent)}

/* ---------- phones ---------- */
@media (max-width:720px){
  #view-subs .kpi-grid,
  #view-prepay .jb-summary-strip{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  #view-subs .kpi-grid > .dkpi,#view-prepay .jb-summary-strip > .mx{padding:13px 14px !important}
  #view-subs .kpi-grid > .dkpi:nth-child(odd),#view-prepay .jb-summary-strip > .mx:nth-child(odd){border-left:0 !important}
  #view-subs .kpi-grid > .dkpi:nth-child(n+3),#view-prepay .jb-summary-strip > .mx:nth-child(n+3){border-top:1px solid var(--line,#E3E8EF) !important}
  #view-subs > .card{padding:16px 14px !important}
  #view-subs > .card .field-row{grid-template-columns:1fr !important;gap:12px !important}
}