/* Customer Financial Hub (screen-05)
   Only what the hub alone draws. Everything the Finance screens share (cell alignment, compact
   buttons, memo and void rows, dialog sizing, the derived badge colours) lives in finance.css; the
   tab strip (#screen-05 .hub-tab) stays in global.css. Every custom property used below is defined
   there for both themes. */

/* ---- section headings inside a tab ---- */
#screen-05 .hub-h { font-size: 13px; font-weight: 700; margin: 0 0 8px; }
#screen-05 .hub-h + .gridwrap { margin-top: 0; }
#screen-05 .hub-h.spaced { margin-top: 20px; }

/* ---- credit utilisation meter ---- */
#screen-05 .util { margin: 12px 0 2px; }
#screen-05 .util-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: 12px; color: var(--ink-mut); margin-bottom: 6px;
}
#screen-05 .util-head strong { color: var(--ink-strong); font-size: 13px; }
#screen-05 .util-bar {
  height: 8px; border-radius: 999px; overflow: hidden;
  background: var(--neutral-bg); border: 1px solid var(--line);
}
#screen-05 .util-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--cyan); }
#screen-05 .util-bar.is-over > span { background: var(--danger-text); }

/* ---- the automatic-hold rule checkbox ---- */
#screen-05 .rule-row { display: flex; align-items: flex-start; gap: 9px; margin-top: 16px; font-size: 13px; }
#screen-05 .rule-row input { margin-top: 2px; flex: 0 0 auto; }
#screen-05 .rule-row label { cursor: pointer; }

/* ---- a button sitting in a .field column should not stretch to the column width ---- */
#screen-05 .field > button { align-self: flex-start; }

/* ---- a form-grid column holding nothing but a button. The button names itself, so the column
        carries no label; what it needs is the label row's height, or the button rides up out of
        line with the input beside it. An empty line box with a label's own metrics supplies it. ---- */
#screen-05 .field.field-nolabel::before {
  content: "\00a0";
  visibility: hidden;
  font-size: var(--label-fs);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
}

/* ---- hold reason readout ---- */
#screen-05 .hold-note { margin: 10px 0 12px; }
#screen-05 .hold-note { overflow-wrap: break-word; word-break: break-word; }