/* finance.css — B66 W2: Mocca › Finance (finance.js). Workbook: Mocca's own tokens and
   components (.kpi, .card, .tbl, .pill, .btn); only the arrangement lives here. */
.fn-host{ display:flex; flex-direction:column; gap:14px; padding-bottom:28px; }
.fn-kpis{ margin:0; }
.fn-mute{ color:var(--fg-3); }
.fn-g2{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:14px; align-items:start; }
@media (max-width:1099px){ .fn-g2{ grid-template-columns:1fr; } }
.fn-chart{ display:flex; align-items:flex-end; gap:14px; height:200px; padding:6px 4px 0; }
.fn-mo{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end; min-width:0; }
.fn-bars{ display:flex; align-items:flex-end; gap:4px; height:100%; width:100%; justify-content:center; }
.fn-bars i{ width:40%; max-width:22px; border-radius:6px 6px 0 0; display:block; }
.fn-bars i.in{ background:var(--accent); }
.fn-bars i.out{ background:color-mix(in srgb,var(--fg-1) 22%,transparent); }
.fn-mo small{ font:650 11px var(--mk-font-ui); color:var(--fg-3); text-transform:capitalize; }
.fn-rows{ display:flex; flex-direction:column; margin:0 -18px -18px; }
.fn-row{ display:flex; align-items:center; gap:12px; min-height:56px; padding:8px 18px; border-top:1px solid var(--divider); background:none; border-inline:0; border-bottom:0; width:100%; text-align:start; color:inherit; font:inherit; }
.fn-row:first-child{ border-top:0; }
.fn-row.is-btn{ cursor:pointer; }
.fn-row.is-btn:hover{ background:var(--bg-2); }
.fn-row.is-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.fn-row > .mi{ color:var(--fg-3); font-size:20px; }
.fn-row-t{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.fn-row-t b{ font:650 13.5px var(--mk-font-ui); color:var(--fg-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fn-row-t small{ font:500 12px var(--mk-font-ui); color:var(--fg-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fn-num{ font:700 13.5px var(--mk-font-ui); font-variant-numeric:tabular-nums; color:var(--fg-1); white-space:nowrap; }
.fn-num small{ font-weight:600; color:var(--fg-3); }
.fn-lg{ width:32px; height:32px; border-radius:50%; flex:0 0 auto; background:#fff center/72% no-repeat; border:1px solid var(--border); display:grid; place-items:center; }
.fn-lg.is-ini{ background:var(--bg-3); color:var(--fg-2); font:700 11px var(--mk-font-ui); }
.fn-av{ width:32px; height:32px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-text); font:700 11.5px var(--mk-font-ui); }
.fn-co{ display:inline-flex; align-items:center; gap:10px; }
.fn-co .fn-lg{ width:26px; height:26px; }
.fn-bar{ display:flex; justify-content:flex-end; }
.fn-n{ display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--bg-3); color:var(--fg-2); font:700 11px var(--mk-font-ui); margin-inline-start:4px; }
.fn-tbl{ overflow-x:auto; }
.sec-view .page .fn-host > .tbl-card{ margin-inline:0; }
.fn-tbl .tbl tbody tr:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.fn-sec-h h3{ margin:4px 0 0; font:700 15px var(--mk-font-ui); color:var(--fg-1); display:flex; align-items:center; gap:4px; }
.fn-apv{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px; }
.fn-ap{ gap:12px; }
.fn-ap-top{ display:flex; align-items:center; gap:10px; }
.fn-rcpt{ height:90px; border-radius:12px; background:repeating-linear-gradient(0deg,var(--bg-2) 0 10px,var(--bg-1) 10px 20px); border:1px solid var(--border); display:grid; place-items:center; color:var(--fg-3); }
.fn-ap-ft{ display:flex; align-items:center; gap:8px; }
.fn-sp{ flex:1; }
.fn-buds{ display:flex; flex-direction:column; margin:0 -18px -18px; }
.fn-bud{ display:flex; flex-direction:column; gap:8px; padding:12px 18px; border-top:1px solid var(--divider); }
.fn-bud:first-child{ border-top:0; }
.fn-bud-h{ display:flex; align-items:center; gap:8px; font:650 13.5px var(--mk-font-ui); color:var(--fg-1); }
.fn-bud-h span{ flex:1; }
.fn-bt{ position:relative; height:10px; border-radius:999px; background:var(--bg-3); }
.fn-bt i{ position:absolute; inset-block:0; inset-inline-start:0; border-radius:999px; background:var(--accent); }
.fn-bt i.over{ background:var(--mk-danger); }
.fn-bt b{ position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--fg-1); border-radius:2px; }
.fn-pl-h{ padding:16px 18px 6px; }
.fn-pl td:first-child{ font-weight:600; }
.fn-pl tr{ cursor:default !important; }
.fn-pl tr.is-sum td{ font-weight:800; background:var(--bg-2); }
.fn-pl td.neg{ color:var(--mk-danger); }
.fn-rec{ display:flex; flex-direction:column; gap:14px; }
.fn-rec-top{ display:flex; align-items:center; gap:12px; }
.fn-rec-amt{ font:800 28px var(--mk-font-ui); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.fn-rec .fn-rows{ margin:0; border:1px solid var(--border); border-radius:var(--mk-radius-md); overflow:hidden; }
.fn-lines{ display:flex; flex-direction:column; gap:8px; }
.fn-line{ display:grid; grid-template-columns:1fr 140px; gap:8px; }
@media (max-width:600px){ .fn-line{ grid-template-columns:1fr 110px; } .fn-apv{ grid-template-columns:1fr; } }
/* B67 R67-068 — a Latin counterparty ("Claro · internet") truncated at its start in Arabic (R67-014) */
html[dir="rtl"] .fn-row-t b{ unicode-bidi:plaintext; text-align:right; }
html[dir="rtl"] .fn-row-t small{ unicode-bidi:plaintext; text-align:right; }   /* B67 R25 (R67-098) — the subtitle beside the title fixed in R19 */