/* My SACCOS: additions on top of the loan portal stylesheet */
.subnav{background:var(--brand-dark);border-top:1px solid rgba(255,255,255,.15)}
.subnav .top-in{padding-top:0;padding-bottom:0;justify-content:flex-start;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch;flex-wrap:nowrap}
.subnav a{color:#fff;text-decoration:none;padding:9px 12px;font-size:.9rem;white-space:nowrap;opacity:.9;border-bottom:3px solid transparent}
.subnav a:hover{opacity:1;border-bottom-color:var(--accent)}
.card.narrow{max-width:560px}
.btn.secondary{background:#fff;color:var(--brand);border:1px solid var(--brand)}
.linkbtn{background:none;border:0;color:var(--link);text-decoration:underline;padding:0;font:inherit;cursor:pointer}
.stack{display:grid;gap:12px}.stack label{display:block}.stack input,.stack select,.stack textarea{width:100%}
form.inline{display:inline}
.fig.bad b{color:var(--red)}.fig.good b{color:var(--ok)}
.warn{color:var(--amber);font-weight:600}
.small{font-size:.85rem}.nowrap{white-space:nowrap}
.note.blue{background:var(--blue-soft);color:var(--blue)}.note.amber{background:var(--amber-soft);color:var(--amber)}
table.simple{width:100%;border-collapse:collapse}table.simple td,table.simple th{padding:8px 4px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
table.simple th{color:var(--muted);font-size:.85rem;font-weight:600}
.strip{display:grid;grid-template-columns:repeat(12,1fr);gap:4px;margin:10px 0}
.mo{text-align:center;border:1px solid var(--line);border-radius:6px;padding:6px 0;background:#fff}
.mo.on{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.mo .mark{display:block;font-weight:700;font-size:1.1rem;line-height:1.2}.mo .lab{display:block;font-size:.7rem;color:var(--muted)}
.loan{border:1px solid var(--line);border-radius:8px;padding:12px;margin:10px 0}.loan.late{border-color:var(--red)}
.loan .top-line{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.kv{display:grid;grid-template-columns:minmax(120px,40%) 1fr;gap:6px 12px;align-items:baseline}.kv span{color:var(--muted);font-size:.9rem}
.code{font-size:1.6rem;letter-spacing:.3em;text-align:center;max-width:260px}
.dial{font-size:1.15rem;word-break:break-all}
.choices{border:1px solid var(--line);border-radius:8px;padding:8px 12px}.choices legend{font-weight:600;padding:0 6px}
.bankfields{display:none}.bankfields.show{display:block}
details summary{cursor:pointer;margin:8px 0}
.chip.grey{background:var(--grey-soft);color:var(--muted)}.chip.blue{background:var(--blue-soft);color:var(--blue)}.chip.amber{background:var(--amber-soft);color:var(--amber)}
@media (max-width:480px){.strip{grid-template-columns:repeat(6,1fr)}.kv{grid-template-columns:1fr}.kv span{margin-top:4px}}
/* identity documents + camera (from the sign-up app) */
.kyc{display:grid;gap:10px}.kcard{border:1px solid var(--line);border-radius:8px;padding:12px;background:#fff}
.kactions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}.kactions form.upl{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0}
.file{display:inline-block;background:#fff;color:var(--link);border:1px dashed var(--brand);border-radius:8px;padding:9px 12px;font-size:.9rem;cursor:pointer}
.file input{display:none}.file.has span::after{content:" ✓"}
.camwrap{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;z-index:50;padding:12px}
.camwrap[hidden]{display:none}
.cambox{background:#111;border-radius:12px;padding:12px;max-width:520px;width:100%;color:#fff;position:relative}
.cambox video{width:100%;border-radius:8px;background:#000;max-height:60vh;object-fit:cover}
.camguide{position:absolute;left:50%;top:14px;width:46%;aspect-ratio:3/4;transform:translateX(-50%);border:3px dashed rgba(255,255,255,.7);border-radius:50%/40%;pointer-events:none;display:none}
.cambox.face .camguide{display:block}
.cammsg{margin:8px 0;font-size:.95rem;min-height:1.4em}.cambox .actions{margin-top:6px}
.preview{max-width:160px;border-radius:8px;border:1px solid var(--line);margin-top:8px}
.note.big{font-size:1.05rem;padding:14px 16px}
.rules{background:var(--blue-soft);border-radius:8px;padding:10px 14px;margin:8px 0}.rules p:last-child{margin:0}