/* Consolidated Cash Flow page */

/* ── Hero visual: statement + cash bridge ── */
.cf{position:relative;margin-right:-40px;min-width:0;font-variant-numeric:tabular-nums}
.cf-glow{position:absolute;inset:4% -4% 4% 4%;background:radial-gradient(closest-side,rgba(13,115,119,.22),transparent);filter:blur(10px);pointer-events:none}
.cf-win{position:relative;background:#fff;border:1.5px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 28px 60px -22px rgba(12,26,28,.38)}
.cf-bar{display:flex;align-items:center;gap:5px;background:#0c1a1c;padding:8px 11px}
.cf-bar i{width:9px;height:9px;border-radius:50%;background:#ff5f57}.cf-bar i:nth-child(2){background:#febc2e}.cf-bar i:nth-child(3){background:#28c840}
.cf-bar span{margin-left:8px;font-size:10.5px;font-weight:600;color:#cfe3e3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-std{display:flex;gap:5px;flex-wrap:wrap;padding:8px 12px;border-bottom:1px solid #eef3f3;background:#fff}
.cf-std b{font-size:9px;font-weight:600;color:var(--muted);border:1px solid var(--border);border-radius:20px;padding:2px 8px}
.cf-std b.on{background:var(--teal);border-color:var(--teal);color:#fff}
.cf-body{display:grid;grid-template-columns:1.2fr 1fr;gap:10px;padding:12px;background:#f6f9f9}
.cf-st,.cf-br{background:#fff;border:1px solid var(--border);border-radius:10px;padding:8px 10px 6px;box-shadow:0 6px 16px -10px rgba(12,26,28,.25)}
.cf-sec+.cf-sec{margin-top:4px}
.cf-h{font-size:9px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--teal);padding:3px 0 2px}
.cf-l{position:relative;z-index:0;display:flex;justify-content:space-between;align-items:center;gap:6px;padding:2.5px 5px;margin:0 -5px;border-radius:5px;font-size:9.5px;color:var(--mid)}
.cf-l span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cf-l b{font-weight:600;color:var(--dark)}
.cf-l em{font-style:normal;font-size:7.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#7c5a12;background:#fdf3d8;border-radius:20px;padding:1px 5px;margin-left:4px;vertical-align:1px}
.cf-s{border-top:1px solid #e6eeee;border-radius:0}.cf-s span,.cf-s b{font-weight:700;color:var(--dark)}
.cf-t{margin-top:5px;border-top:1.5px solid var(--dark)}
.cf-fx span,.cf-fx b{color:#64748b}
.cf-end{background:var(--teal-pale)}.cf-end span,.cf-end b{color:var(--teal);font-weight:700}
.cf-k::after{content:'';position:absolute;inset:0;border-radius:5px;background:var(--teal-pale);box-shadow:0 0 0 1.5px rgba(13,115,119,.35);opacity:0;z-index:-1}

.cf-br{display:flex;flex-direction:column}
.cf-bh{display:flex;justify-content:space-between;align-items:center;font-size:10.5px;font-weight:700;color:var(--dark);padding-bottom:5px;margin-bottom:6px;border-bottom:1px solid #eef3f3}
.cf-bh small{font-size:8.5px;font-weight:600;color:var(--muted)}
.cf-rows{position:relative;display:flex;flex-direction:column;gap:7px;flex:1;justify-content:space-around;padding:4px 0}
.cf-r{display:grid;grid-template-columns:52px 1fr 34px;align-items:center;gap:6px;font-size:9px;color:var(--mid)}
.cf-r>span{white-space:nowrap}
.cf-r>b{text-align:right;font-weight:600;color:var(--dark);font-size:9px}
.cf-tr{position:relative;height:22px;background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),#eef3f3 calc(25% - 1px) 25%)}
.cf-b{position:absolute;top:2px;bottom:2px;left:var(--l);width:var(--w);min-width:3px;border-radius:3px;background:var(--teal);transform-origin:left center}
.cf-b.neg{background:#d97757;transform-origin:right center}
.cf-b.fx{background:#94a3b8;transform-origin:right center}
.cf-b.tot{background:#0d4f52}
.cf-r.cf-close>span,.cf-r.cf-close>b{font-weight:700;color:var(--teal)}
.cf-note{margin-top:8px;padding-top:6px;border-top:1px solid #eef3f3;font-size:8.5px;color:var(--muted);line-height:1.45}

.cf-ft{display:flex;gap:6px;flex-wrap:wrap;padding:9px 12px;border-top:1px solid #eef3f3}
.cf-ft span{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:600;color:var(--teal);background:var(--teal-pale);border-radius:20px;padding:2px 9px;opacity:0}

/* sequence (~2s) */
.cf.visible .cf-win{animation:cfUp .35s cubic-bezier(.2,.7,.2,1) .05s both}
.cf.visible .cf-std b{animation:cfPop .25s cubic-bezier(.3,1.5,.5,1) calc(.3s + var(--j,0)*.04s) both}
.cf.visible .cf-sec{animation:cfUp .3s cubic-bezier(.2,.7,.2,1) calc(.4s + var(--i)*.3s) both}
.cf.visible .cf-tot{animation:cfUp .3s cubic-bezier(.2,.7,.2,1) 1.3s both}
.cf.visible .cf-br{animation:cfUp .3s cubic-bezier(.2,.7,.2,1) .3s both}
.cf.visible .cf-b{animation:cfGrow .45s cubic-bezier(.2,.7,.2,1) calc(.45s + var(--i)*.25s) both}
.cf.visible .cf-r>b{animation:cfFade .3s ease calc(.6s + var(--i)*.25s) both}
.cf.visible .cf-note{animation:cfFade .4s ease 1.8s both}
.cf.visible .cf-ft span{animation:cfPop .3s cubic-bezier(.3,1.5,.5,1) calc(1.75s + var(--j,0s)) both}
.cf-ft span:nth-child(2){--j:.08s}.cf-ft span:nth-child(3){--j:.16s}
/* idle: each activity total and its bridge bar light up together */
.cf.visible .cf-k::after{animation:cfLoop 6s ease-in-out calc(2.4s + var(--k)*1.5s) infinite}
.cf.visible .cf-b[style*="--k"]{animation:cfGrow .45s cubic-bezier(.2,.7,.2,1) calc(.45s + var(--i)*.25s) both,cfBar 6s ease-in-out calc(2.4s + var(--k)*1.5s) infinite}
.cf.visible .cf-l em{animation:cfFade .3s ease 1.4s both,cfTag 3.2s ease-in-out 2.6s infinite}
@keyframes cfUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes cfPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes cfFade{from{opacity:0}to{opacity:1}}
@keyframes cfGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes cfLoop{0%,28%,100%{opacity:0}6%,20%{opacity:1}}
@keyframes cfBar{0%,28%,100%{box-shadow:none;filter:none}6%,20%{box-shadow:0 0 0 2px rgba(13,115,119,.35);filter:brightness(1.08)}}
@keyframes cfTag{0%,100%{box-shadow:0 0 0 0 rgba(217,164,40,0)}50%{box-shadow:0 0 0 3px rgba(217,164,40,.18)}}

/* ── Entity columns (Show Entities) ── */
.cfe{background:#fff;border:1.5px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 18px 40px -24px rgba(12,26,28,.35);font-variant-numeric:tabular-nums}
.cfe-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid #eef3f3}
.cfe-top b{font-size:12px;color:var(--dark)}
.cfe-tg{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;color:var(--teal)}
.cfe-tg i{position:relative;width:24px;height:13px;border-radius:20px;background:var(--teal)}
.cfe-tg i::after{content:'';position:absolute;top:2px;right:2px;width:9px;height:9px;border-radius:50%;background:#fff}
.cfe table{width:100%;border-collapse:collapse;font-size:11px}
.cfe th,.cfe td{padding:8px 10px;text-align:right;white-space:nowrap}
.cfe th{font-size:9.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;background:#f6f9f9;line-height:1.25;vertical-align:bottom}
.cfe th:first-child,.cfe td:first-child{text-align:left;color:var(--mid)}
.cfe td{border-top:1px solid #eef3f3;color:var(--dark)}
.cfe th small{display:block;font-size:8.5px;font-weight:600;color:#94a3b8;letter-spacing:0;text-transform:none}
.cfe .el{background:#fbf6ec;color:#7c5a12}
.cfe th.el{color:#7c5a12}
.cfe .gp{background:var(--teal-pale);color:var(--teal);font-weight:700}
.cfe th.gp{color:var(--teal)}
.cfe tr.nt td{font-weight:700;border-top:1.5px solid var(--dark)}
.cfe-ft{padding:9px 14px;font-size:10.5px;color:var(--muted);border-top:1px solid #eef3f3}
.cfe-w.visible .ec{animation:cfFade .35s ease calc(.15s + var(--c)*.18s) both}
.cfe-w.visible td.el{animation:cfFade .35s ease .8s both,cfeEl 4s ease-in-out 2.2s infinite}
.cfe-w.visible td.gp{animation:cfFade .35s ease 1.05s both}
@keyframes cfeEl{0%,100%{background:#fbf6ec}50%{background:#f8ecd2}}

/* ── Cash FX reconciliation card ── */
.cfx{background:#fff;border:1.5px solid var(--border);border-radius:14px;padding:16px 18px;box-shadow:0 18px 40px -24px rgba(12,26,28,.35);font-variant-numeric:tabular-nums}
.cfx-h{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;font-weight:700;color:var(--dark);padding-bottom:8px;border-bottom:1px solid #eef3f3;margin-bottom:6px}
.cfx-h small{font-size:10px;font-weight:600;color:var(--muted)}
.cfx-l{display:flex;justify-content:space-between;gap:10px;padding:6px 0;font-size:12px;color:var(--mid)}
.cfx-l b{font-weight:600;color:var(--dark)}
.cfx-l.sub{padding-left:14px;font-size:11.5px}
.cfx-l.tot{border-top:1.5px solid var(--dark);margin-top:4px;font-weight:700}
.cfx-l.tot span,.cfx-l.tot b{color:var(--teal);font-weight:700}
.cfx-tie{display:flex;align-items:center;gap:7px;margin-top:10px;padding:9px 11px;border-radius:9px;background:#ecfdf5;color:#047857;font-size:11px;font-weight:600}
.cfx-w.visible .cfx-l{animation:cfUp .3s cubic-bezier(.2,.7,.2,1) calc(.1s + var(--i)*.15s) both}
.cfx-w.visible .cfx-tie{animation:cfPop .3s cubic-bezier(.3,1.5,.5,1) 1s both}

/* ── Classification card ── */
.cfc-r{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fff;border:1px solid var(--border);border-radius:7px;padding:8px 11px;font-size:12px}
.cfc-r span{font-weight:600;color:var(--mid);white-space:nowrap}
.cfc-r b{font-weight:500;color:var(--dark);text-align:right}
.cfc-w.visible .cfc-r{animation:cfUp .3s cubic-bezier(.2,.7,.2,1) calc(.35s + var(--i)*.14s) both}
.cfc-w.visible .cfc-r b{animation:cfFade .35s ease calc(.5s + var(--i)*.14s) both}
.cfc-w.visible .cfc-warn{animation:cfPop .35s cubic-bezier(.3,1.5,.5,1) 1.2s both}
.cfc-w.visible .cfc-warn svg{animation:cfWarn 3s ease-in-out 2s infinite}
@keyframes cfWarn{0%,100%{transform:none}50%{transform:scale(1.15)}}

/* ── Tutorial links ── */
.cft-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cft-grid.cft-4{grid-template-columns:repeat(4,1fr)}
.cft{display:flex;flex-direction:column;gap:6px;background:#fff;border:1.5px solid var(--border);border-radius:12px;padding:16px 18px;text-decoration:none;transition:border-color .2s,box-shadow .2s,transform .2s}
.cft:hover{border-color:var(--teal);box-shadow:0 8px 24px -14px rgba(12,26,28,.35);transform:translateY(-2px)}
.cft small{align-self:flex-start;font-size:10px;font-weight:700;letter-spacing:.4px;color:var(--teal);background:var(--teal-pale);border-radius:20px;padding:2px 9px}
.cft b{font-size:14px;font-weight:600;color:var(--dark);line-height:1.35}
.cft span{margin-top:auto;font-size:12px;font-weight:600;color:var(--teal)}
.cft-sub{font-size:13px;font-weight:700;color:var(--dark);margin:30px 0 12px}
.cft-int{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;justify-content:center}
.cft-int a{font-size:13px;font-weight:600;color:var(--teal);border:1.5px solid var(--border);border-radius:100px;padding:7px 16px;text-decoration:none;background:#fff;transition:border-color .2s}
.cft-int a:hover{border-color:var(--teal)}

@media(prefers-reduced-motion:reduce){
  .cf.visible *,.cfe-w.visible *,.cfx-w.visible *,.cfc-w.visible *{animation:none!important}
  .cf-ft span{opacity:1}
}
@media(max-width:1024px){.cf{margin-right:0}.cft-grid,.cft-grid.cft-4{grid-template-columns:1fr 1fr}}
@media(max-width:600px){
  .cf-body{grid-template-columns:1fr}
  .cft-grid,.cft-grid.cft-4{grid-template-columns:1fr}
  .cfe{overflow-x:auto}
  .cfe th,.cfe td{padding:7px 8px}
}

/* Cash flow page: the Accounting Standards page, CF classifications */
.ast{font-variant-numeric:tabular-nums}
.ast-win{background:#fff;border:1.5px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 18px 40px -24px rgba(12,26,28,.35)}
.ast-bar{display:flex;align-items:center;gap:5px;background:#0c1a1c;padding:8px 12px}
.ast-bar i{width:9px;height:9px;border-radius:50%;background:#ff5f57}.ast-bar i:nth-child(2){background:#febc2e}.ast-bar i:nth-child(3){background:#28c840}
.ast-bar span{margin-left:8px;font-size:11px;font-weight:600;color:#cfe3e3}
.ast-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:10px 14px 0;border-bottom:1px solid #e6eeee}
.ast-sel{display:flex;flex-direction:column;gap:3px;padding-bottom:8px}
.ast-sel small{font-size:9px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted)}
.ast-sel b{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;min-width:120px;font-size:12px;font-weight:600;color:var(--dark);border:1.5px solid var(--border);border-radius:8px;padding:5px 9px;transition:border-color .3s ease,box-shadow .3s ease}
.ast-sel svg{color:var(--muted)}
.ast.sw .ast-sel b{border-color:var(--teal);box-shadow:0 0 0 3px rgba(13,115,119,.14)}
.ast-sv{transition:opacity .2s ease}
.ast-tabs{display:flex;gap:2px}
.ast-tabs span{position:relative;font-size:11px;font-weight:600;color:var(--muted);padding:7px 11px;border-bottom:2px solid transparent;margin-bottom:-1px}
.ast-tabs span.on{color:var(--teal);border-bottom-color:var(--teal)}
.ast-dot{position:absolute;top:5px;right:3px;width:6px;height:6px;border-radius:50%;background:#d97706}
.ast-h{display:flex;flex-direction:column;gap:1px;padding:9px 14px 4px}
.ast-h b{font-size:12px;color:var(--dark)}
.ast-h small{font-size:10.5px;color:var(--muted)}
.ast-body{padding:2px 14px 12px}
.ast-sec{margin-top:6px}
.ast-sh{font-size:9.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--teal);padding:4px 0 3px;border-bottom:1px solid #eef3f3;margin-bottom:2px}
.ast-row{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .35s ease,opacity .3s ease}
.ast-in{min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:10px}
.ast-tag{font-size:11px;font-weight:600;color:var(--dark);padding:5px 0;transition:opacity .2s ease}
.ast-acs{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px;padding:4px 0}
.ast-ac{font-size:10px;font-weight:600;color:var(--teal);background:var(--teal-pale);border-radius:6px;padding:2px 7px;white-space:nowrap}
.ast-none{font-size:10px;color:#b45309;background:#fffbeb;border:1px dashed #fcd34d;border-radius:6px;padding:2px 7px;white-space:nowrap}

/* rows that belong to the selected standard */
.ast[data-std="ifrs"] .ast-row.in-ifrs,.ast[data-std="us"] .ast-row.in-us,.ast[data-std="uk"] .ast-row.in-uk{grid-template-rows:1fr;opacity:1}
.ast.fade .ast-tag,.ast.fade .ast-sv{opacity:0}
/* build (~2s) */
.ast .ast-win{opacity:0}
.ast.run .ast-win{animation:astUp .4s cubic-bezier(.2,.7,.2,1) .05s both}
.ast.run .ast-row .ast-in{animation:astIn .3s ease calc(.4s + var(--i)*.14s) both}
.ast.run .ast-dot{animation:astPop .3s cubic-bezier(.3,1.4,.5,1) 1.7s both}
.ast.ready .ast-row .ast-in,.ast.ready .ast-dot{animation:none}
@keyframes astUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes astIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
@keyframes astPop{from{opacity:0;transform:scale(0)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.ast *{animation:none!important;transition:none!important}.ast .ast-win{opacity:1}}
@media(max-width:600px){.ast-top{flex-direction:column;align-items:stretch}.ast-in{flex-direction:column;align-items:flex-start;gap:0}.ast-acs{justify-content:flex-start}}

/* Cash flow page: Show Entities on the consolidated cash flow */
.sx{font-variant-numeric:tabular-nums}
.sx-win{background:#fff;border:1.5px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 18px 40px -24px rgba(12,26,28,.35)}
.sx-bar{display:flex;align-items:center;gap:5px;background:#0c1a1c;padding:8px 12px}
.sx-bar i{width:9px;height:9px;border-radius:50%;background:#ff5f57}.sx-bar i:nth-child(2){background:#febc2e}.sx-bar i:nth-child(3){background:#28c840}
.sx-bar span{margin-left:8px;font-size:11px;font-weight:600;color:#cfe3e3}
.sx-tool{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:9px 14px;border-bottom:1px solid #e6eeee}
.sx-tg{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:600;color:var(--mid)}
.sx-tg i{position:relative;width:24px;height:13px;border-radius:20px;background:#cbd5d5;transition:background .3s ease}
.sx-tg i::after{content:'';position:absolute;top:2px;left:2px;width:9px;height:9px;border-radius:50%;background:#fff;transition:transform .3s ease}
.sx-tg.on i,.sx.on .sx-se i{background:var(--teal)}
.sx-tg.on i::after,.sx.on .sx-se i::after{transform:translateX(11px)}
.sx.on .sx-se{color:var(--teal)}
.sx-dd{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:10.5px;font-weight:600;color:var(--dark);border:1.5px solid var(--border);border-radius:7px;padding:3px 8px}
.sx-dd svg{color:var(--muted)}
.sx-grid{padding:2px 14px 6px}
.sx-r{display:grid;grid-template-columns:1.9fr 1fr 0fr 0fr 0fr 0fr;align-items:center;border-bottom:1px solid #eef3f3;transition:grid-template-columns .5s cubic-bezier(.2,.7,.2,1)}
.sx.on .sx-r{grid-template-columns:1.9fr 1fr 1fr 1fr 1fr 1fr}
.sx-r .c{min-width:0;overflow:hidden;white-space:nowrap;text-align:right;padding:8px 6px;font-size:11px;color:var(--dark)}
.sx-r .c.l{text-align:left;white-space:normal;padding-left:0;color:var(--mid);line-height:1.3}
.sx-r .c.g{background:var(--teal-pale);color:var(--teal);font-weight:700}
.sx-r .c.e,.sx-r .c.a{opacity:0;padding-left:0;padding-right:0;transition:opacity .3s ease,padding .5s ease}
.sx.on .sx-r .c.e,.sx.on .sx-r .c.a{padding-left:6px;padding-right:6px}
.sx.on .sx-r .c.e,.sx.on .sx-r .c.a{opacity:1;transition-delay:.2s}
.sx-r .c.a{background:#fbf6ec;color:#7c5a12}
.sx-hd .c{font-size:9.5px;font-weight:700;color:var(--muted);white-space:nowrap}
.sx-hd .c small{display:block;font-size:8.5px;font-weight:600;color:#94a3b8}
.sx-hd .c b{font-weight:700;color:inherit}
.sx-hd .c.g{color:var(--teal)}
.sx-hd .c.a{color:#7c5a12}
.sx-t{border-bottom:0;border-top:1.5px solid var(--dark)}
.sx-t .c{font-weight:700}
.sx-t .c.l{color:var(--dark)}
.sx-ft{padding:9px 14px;border-top:1px solid #eef3f3;font-size:10.5px;color:var(--muted)}
/* build (~2s): the group view first, then Show Entities turns on */
.sx .sx-win{opacity:0}
.sx.run .sx-win{animation:sxUp .4s cubic-bezier(.2,.7,.2,1) .05s both}
.sx.run .sx-r{animation:sxIn .3s ease calc(.3s + var(--r,0)*.1s) both}
.sx-r:nth-child(2){--r:1}.sx-r:nth-child(3){--r:2}.sx-r:nth-child(4){--r:3}.sx-r:nth-child(5){--r:4}
.sx.ready .sx-r{animation:none}
@keyframes sxUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes sxIn{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.sx *{animation:none!important;transition:none!important}.sx .sx-win{opacity:1}}
@media(max-width:600px){.sx-r .c{padding:7px 3px;font-size:10px}.sx-dd{margin-left:0}}

/* Cash flow page: FX on cash, statement and reconciliation side by side */
.sf{display:flex;flex-direction:column;gap:12px;font-variant-numeric:tabular-nums}
.sf-win{background:#fff;border:1.5px solid var(--border);border-radius:13px;overflow:hidden;box-shadow:0 18px 40px -24px rgba(12,26,28,.35)}
.sf-bar{display:flex;align-items:center;gap:5px;background:#0c1a1c;padding:7px 12px}
.sf-bar i{width:9px;height:9px;border-radius:50%;background:#ff5f57}.sf-bar i:nth-child(2){background:#febc2e}.sf-bar i:nth-child(3){background:#28c840}
.sf-bar span{margin-left:8px;font-size:11px;font-weight:600;color:#cfe3e3}
.sf-bar em{margin-left:auto;font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#9fd8d3}
.sf-rows{padding:6px 14px 8px}
.sf-r{display:flex;justify-content:space-between;gap:12px;padding:5px 7px;margin:0 -7px;border-radius:6px;font-size:11.5px;color:var(--mid);transition:background .3s ease,box-shadow .3s ease}
.sf-r b{font-weight:500;color:var(--dark)}
.sf-r.tt span,.sf-r.tt b{font-weight:700;color:var(--dark)}
.sf-r.dbl b{border-bottom:3px double var(--dark)}
.sf-r.hd{font-weight:700;color:var(--teal);font-size:10.5px;text-transform:uppercase;letter-spacing:.4px}
.sf-ft{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.sf-k{font-size:10px;font-weight:600;color:var(--mid);background:#fff;border:1px solid var(--border);border-radius:20px;padding:2px 9px;transition:background .3s ease,border-color .3s ease,color .3s ease}
.sf-ft small{margin-left:auto;font-size:9.5px;color:var(--muted)}
/* idle: the figures that tie between the two reports light up together */
.sf.sa .sf-r.ka,.sf.sb .sf-r.kb{background:#fff3d6;box-shadow:inset 0 0 0 1.5px #e7c98f}
.sf.sa .sf-r.ka b,.sf.sb .sf-r.kb b{font-weight:700}
.sf.sa .sf-k.ka,.sf.sb .sf-k.kb{background:#fff3d6;border-color:#e7c98f;color:#7c5a12}
/* build (~2s) */
.sf .sf-win,.sf .sf-r,.sf .sf-ft{opacity:0}
.sf.run .sf-win.w1{animation:sfUp .4s cubic-bezier(.2,.7,.2,1) .05s both}
.sf.run .sf-win.w2{animation:sfUp .4s cubic-bezier(.2,.7,.2,1) .75s both}
.sf.run .sf-r{animation:sfFade .25s ease calc(.3s + var(--i)*.14s) both}
.sf.run .sf-ft{animation:sfFade .3s ease 1.8s both}
.sf.ready .sf-win,.sf.ready .sf-r,.sf.ready .sf-ft{animation:none;opacity:1}
@keyframes sfUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes sfFade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.sf *{animation:none!important;transition:none!important}.sf .sf-win,.sf .sf-r,.sf .sf-ft{opacity:1}}