/* Gombe SS Teachers SACCO: light, flat, square, Inter. No build step: this file is served as it is. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter/inter-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter/inter-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter/inter-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter/inter-latin-700-normal.woff2') format('woff2');}

/* Light only. Grass green is the SACCO's colour, solid and the same everywhere. Text pairs are 4.5:1 or better on white and on --bg;
   white on --br is 5.4:1. --br-fill is the lighter grass for bars and fills only, never for text. */
:root{
  color-scheme:light;
  --bg:#f4f6f3; --surface:#ffffff; --surface-2:#eef2ed;
  --line:#dfe5dd; --line-2:#c5cfc3;
  --tx:#14201a; --mt:#4f5f55; --mt2:#5b6a60;
  --br:#2f7a16; --br-d:#256410; --br-dd:#1f5a0e; --br-soft:#eaf5e1; --br-fill:#4c9a2a; --on-br:#ffffff;
  --gold:#8a6508; --gold-fill:#d4a72c; --gold-soft:#fbf3dc;
  --ok:#0b6b52; --ok-soft:#e3f3ee; --warn:#9a4a06; --warn-soft:#fcf0e1; --bad:#b42318; --bad-soft:#fdecea; --info:#1f4fb4; --info-soft:#e9effb;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --sw:236px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:400 14.5px/1.5 var(--font);}
a{color:var(--br);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.01em;line-height:1.25}
h1{font-size:21px} h2{font-size:16px} h3{font-size:14.5px}
p{margin:0 0 10px}
small,.muted{color:var(--mt)}
.hint{color:var(--mt2);font-size:12.5px}
.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.right,.list th.right,.list td.right{text-align:right}
.nowrap{white-space:nowrap}
.mt{margin-top:16px}.mb{margin-bottom:16px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.grow{flex:1}
.bp-i{display:inline-flex;width:1.1em;height:1.1em;vertical-align:-.17em;flex:none}
.bp-i svg{width:100%;height:100%}
.only-sm{display:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Shell */
.shell{display:flex;min-height:100vh}
.side{width:var(--sw);flex:none;background:var(--br);border-right:1px solid var(--br-d);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;gap:10px;align-items:center;padding:14px 14px 12px;border-bottom:1px solid rgba(255,255,255,.18);color:#fff}
.brand:hover{text-decoration:none}
.brand img{width:34px;height:34px;flex:none;background:#fff;border-radius:4px;padding:2px}
.brand b{display:block;font-size:13.5px;line-height:1.2}
.brand span{display:block;font-size:11.5px;color:rgba(255,255,255,.82)}
.nav{padding:8px 8px 16px;flex:1}
.nav .group{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.78);padding:14px 8px 4px}
.nav a{display:flex;gap:10px;align-items:center;padding:7px 8px;color:#fff;border-radius:3px;font-weight:500}
.nav a:hover{background:var(--br-d);text-decoration:none}
.nav a.on{background:#fff;color:var(--br-dd);font-weight:600}
.nav a .bp-i{color:rgba(255,255,255,.85)} .nav a.on .bp-i{color:var(--br)}
.nav .count{margin-left:auto;background:var(--gold-fill);color:#2b1d00;font-size:11px;font-weight:700;padding:0 6px;border-radius:9px;line-height:18px}
.side-foot{border-top:1px solid rgba(255,255,255,.18);padding:10px 8px}
.who{display:flex;gap:9px;align-items:center;padding:4px 8px 8px}
.avatar{width:30px;height:30px;border-radius:50%;background:#fff;color:var(--br-dd);display:grid;place-items:center;font-size:12px;font-weight:700;flex:none}
.who b{display:block;font-size:13px;line-height:1.2;color:#fff}
.who span{font-size:11.5px;color:rgba(255,255,255,.82)}
.who .avatar{color:var(--br-dd);font-size:12px}
.linkbtn{display:flex;gap:10px;align-items:center;width:100%;padding:7px 8px;border:0;background:none;color:rgba(255,255,255,.9);font:inherit;font-weight:500;cursor:pointer;border-radius:3px;text-align:left}
.linkbtn:hover{background:var(--br-d);color:#fff}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{display:none}
.content{padding:22px 26px 40px;max-width:1180px;width:100%}
.backdrop{display:none}

/* Page head */
.head{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin-bottom:18px}
.head p{margin:3px 0 0;color:var(--mt)}
.crumb{font-size:12.5px;color:var(--mt);margin-bottom:4px}
.crumb a{color:var(--mt)}

/* Panels: flat, a thin border, no shadow */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:4px;margin-bottom:16px}
.panel>.ph{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.panel>.pb{padding:14px 16px}
.panel>.pb.tight{padding:0}
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cols.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols>.panel{margin-bottom:0}
.stack>*+*{margin-top:16px}

/* Figures: one row of numbers divided by rules */
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));background:var(--surface);border:1px solid var(--line);border-radius:4px;margin-bottom:16px}
.fig{padding:13px 16px;border-right:1px solid var(--line);min-width:0}
.fig:last-child{border-right:0}
.fig .k{font-size:12px;color:var(--mt);font-weight:500}
.fig .v{font-size:19px;font-weight:650;margin-top:2px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fig .s{font-size:12px;color:var(--mt2);margin-top:1px}
.fig.gold .v{color:var(--gold)}
.fig.br .v{color:var(--br)}
dl.facts{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 18px;margin:0}
dl.facts dt{color:var(--mt)}
dl.facts dd{margin:0;font-weight:500;min-width:0;overflow-wrap:anywhere}
dl.facts dd.num{white-space:normal}

/* Tables */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.list{width:100%;border-collapse:collapse;font-size:13.5px}
.list th{font-size:12px;font-weight:600;color:var(--br-dd);text-align:left;padding:8px 12px;border-bottom:1px solid #cfe6bf;background:var(--br-soft);white-space:nowrap}
.list td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.list tr:last-child td{border-bottom:0}
.list tfoot td{font-weight:650;background:var(--surface-2);border-top:1px solid var(--line-2)}
.list tr.dim td{color:var(--mt2)}
.list tr.dim td s{text-decoration-color:var(--mt2)}
.list .sub{display:block;font-size:12px;color:var(--mt2)}
.list a.rowlink{color:var(--tx);font-weight:500}
.plus{color:var(--ok)} .minus{color:var(--bad)}
.empty{padding:26px 16px;text-align:center;color:var(--mt)}

/* Badges */
.badge{display:inline-block;font-size:11.5px;font-weight:600;padding:1px 7px;border-radius:3px;background:var(--surface-2);color:var(--mt);white-space:nowrap;border:1px solid var(--line)}
.badge.ok{background:var(--ok-soft);color:var(--ok);border-color:#b9e0d3}
.badge.warn{background:var(--warn-soft);color:var(--warn);border-color:#efd3b0}
.badge.bad{background:var(--bad-soft);color:var(--bad);border-color:#f3c7c2}
.badge.info{background:var(--info-soft);color:var(--info);border-color:#c9d6f3}
.badge.gold{background:var(--gold-soft);color:var(--gold);border-color:#ecd9a3}

/* Buttons */
.btn{display:inline-flex;gap:7px;align-items:center;justify-content:center;min-height:36px;padding:0 14px;border:1px solid var(--line-2);background:var(--surface);color:var(--tx);font:500 14px var(--font);border-radius:4px;cursor:pointer;white-space:nowrap;text-decoration:none}
.btn:hover{background:var(--surface-2);text-decoration:none}
.btn.primary{background:var(--br);border-color:var(--br);color:var(--on-br)}
.btn.primary:hover{background:var(--br-d)}
.btn.danger{color:var(--bad);border-color:#efc2bd}
.btn.danger:hover{background:var(--bad-soft)}
.btn.small{min-height:30px;padding:0 10px;font-size:13px}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.actions{display:flex;gap:8px;flex-wrap:wrap}

/* Forms */
.form{max-width:640px}
.field{margin-bottom:14px}
.field>label,.label{display:block;font-weight:550;font-size:13.5px;margin-bottom:5px}
.field .hint{margin-top:4px}
input[type=text],input[type=password],input[type=email],input[type=tel],input[type=date],input[type=number],input[type=search],select,textarea{width:100%;min-height:38px;padding:7px 10px;border:1px solid var(--line-2);border-radius:4px;background:#fff;color:var(--tx);font:400 14.5px var(--font)}
textarea{min-height:70px;resize:vertical}
input:focus,select:focus,textarea:focus,.btn:focus-visible,a:focus-visible{outline:2px solid var(--br);outline-offset:1px}
.side a:focus-visible,.side button:focus-visible,.top a:focus-visible,.top button:focus-visible{outline-color:#fff}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--bad)}
.err{color:var(--bad);font-size:12.5px;margin-top:4px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 14px}
.choice{display:flex;gap:8px;flex-wrap:wrap}
.choice label{display:flex;gap:7px;align-items:center;border:1px solid var(--line-2);border-radius:4px;padding:7px 11px;cursor:pointer;font-weight:500;background:#fff}
.choice input{margin:0;accent-color:var(--br)}
.choice label:has(input:checked){border-color:var(--br);background:var(--br-soft);color:var(--br-d)}
.check{display:flex;gap:8px;align-items:center}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;padding:12px 16px;border-bottom:1px solid var(--line)}
.filters .field{margin:0;min-width:140px}
.filters label{font-size:12px;color:var(--mt);font-weight:500;margin-bottom:3px}

/* A worked-out figure (loan quote, share cost) */
.calc{border:1px solid var(--line);background:var(--surface-2);border-radius:4px;padding:12px 14px;margin:4px 0 14px}
.calc .big{font-size:22px;font-weight:700;color:var(--br-d);font-variant-numeric:tabular-nums}
.calc dl.facts{font-size:13.5px}

/* Messages */
.flash{border:1px solid;border-radius:4px;padding:10px 14px;margin-bottom:16px;display:flex;gap:9px;align-items:flex-start}
.flash.ok{background:var(--ok-soft);border-color:#c4e3cd;color:#0d5a2b}
.flash.bad{background:var(--bad-soft);border-color:#f3c7c2;color:#8f1b12}
.flash.info{background:var(--info-soft);border-color:#c9d6f3;color:#173d8c}
.flash.warn{background:var(--warn-soft);border-color:#efd3b0;color:#7a3a05}
.flash .bp-i{margin-top:2px}

/* Tabs */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:16px;overflow-x:auto}
.tabs a{padding:8px 12px;color:var(--mt);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs a:hover{color:var(--tx);text-decoration:none}
.tabs a.on{color:var(--br-d);border-bottom-color:var(--br)}
.tabs .count{font-size:11px;background:var(--surface-2);border-radius:9px;padding:0 6px;margin-left:4px}

/* Waiting-for-you list */
.todo{list-style:none;margin:0;padding:0}
.todo li{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:11px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.todo li:last-child{border-bottom:0}
.todo .what b{display:block}
.todo .what span{font-size:12.5px;color:var(--mt)}

/* Loan timeline */
.timeline{list-style:none;margin:0;padding:0}
.timeline li{position:relative;padding:0 0 14px 22px}
.timeline li::before{content:"";position:absolute;left:5px;top:6px;width:8px;height:8px;border-radius:50%;background:var(--br)}
.timeline li::after{content:"";position:absolute;left:8.5px;top:16px;bottom:0;width:1px;background:var(--line-2)}
.timeline li:last-child::after{display:none}
.timeline li.bad::before{background:var(--bad)}
.timeline b{font-weight:600}
.timeline .when{font-size:12px;color:var(--mt2)}
.steps{display:flex;gap:0;margin:0 0 16px;padding:0;list-style:none;border:1px solid var(--line);border-radius:4px;background:var(--surface);overflow-x:auto}
.steps li{flex:1;min-width:120px;padding:10px 12px;border-right:1px solid var(--line);font-size:12.5px;color:var(--mt2)}
.steps li:last-child{border-right:0}
.steps li b{display:block;font-size:13px;color:var(--mt)}
.steps li.done b{color:var(--ok)}
.steps li.now{background:var(--gold-soft)}
.steps li.now b{color:var(--gold)}
.steps li.stop b{color:var(--bad)}

/* Pagination */
.pager{display:flex;gap:6px;align-items:center;justify-content:space-between;padding:10px 16px;border-top:1px solid var(--line);font-size:13px;color:var(--mt)}

/* Sign-in */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px 16px;background:var(--br)}
.auth-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--br-d);border-top:5px solid var(--br-fill);border-radius:4px;padding:26px 24px}
.auth-brand{text-align:center;margin-bottom:20px}
.auth-brand img{width:64px;height:64px}
.auth-brand h1{font-size:19px;margin-top:10px}
.auth-brand p{color:var(--mt);margin:4px 0 0;font-size:13px}
.auth .btn{width:100%;min-height:42px}
.auth-foot{text-align:center;font-size:12.5px;color:var(--mt);margin-top:16px}
.pw{position:relative}
.pw button{position:absolute;right:4px;top:4px;height:30px;border:0;background:none;color:var(--mt);cursor:pointer;padding:0 8px;font:500 12.5px var(--font)}

/* Receipt (also printed) */
.receipt{max-width:520px;background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:22px}
.receipt .rh{display:flex;gap:12px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:12px}
.receipt .rh img{width:44px;height:44px}
.receipt .amount{font-size:26px;font-weight:700;color:var(--br-d);margin:6px 0 12px}
.stamp{display:inline-block;border:2px solid var(--bad);color:var(--bad);font-weight:700;padding:2px 10px;transform:rotate(-4deg);letter-spacing:.06em}

/* Phone */
@media (max-width: 900px){
  .cols,.cols.c3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 760px){
  .side{position:fixed;left:0;top:0;bottom:0;z-index:40;transform:translateX(-100%);transition:transform .18s ease}
  body.menu-open .side{transform:none}
  body.menu-open .backdrop{display:block;position:fixed;inset:0;background:rgba(20,32,26,.35);z-index:30}
  .top{display:flex;align-items:center;gap:10px;height:52px;padding:0 12px;background:var(--br);border-bottom:1px solid var(--br-d);position:sticky;top:0;z-index:20}
  .top button{border:0;background:none;color:#fff;font-size:20px;padding:6px;cursor:pointer;display:flex}
  .top img{width:28px;height:28px;background:#fff;border-radius:4px;padding:2px}
  .top b{font-size:14px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
  .content{padding:16px 16px 32px}
  .two,.three{grid-template-columns:minmax(0,1fr)}
  dl.facts{grid-template-columns:minmax(0,40%) minmax(0,1fr);gap:6px 12px}
  .figs{grid-template-columns:1fr 1fr}
  .fig{border-bottom:1px solid var(--line)}
  .fig:nth-child(2n){border-right:0}
  .fig .v{font-size:17px}
  h1{font-size:19px}
  .head .actions{width:100%}
  .list th,.list td{padding:8px 10px}
  .hide-sm{display:none}
  .only-sm{display:table-cell}
}

@media print{
  .side,.top,.no-print,.head .actions,.flash{display:none!important}
  body{background:#fff}
  .content{padding:0}
  .panel,.receipt{border:0}
}

/* Rows and list items that open a page (data-href) */
[data-href]{cursor:pointer}
.list tr[data-href]:hover td,.todo li[data-href]:hover{background:var(--surface-2)}
.list tr[data-href]:active td,.todo li[data-href]:active{background:var(--br-soft)}

/* Searchable picker (select[data-search]) */
.combo{position:relative}
.combo input{padding-right:30px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6a60' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat right 9px center/16px}
.combo.bad input{border-color:var(--bad)}
.combo-list{position:absolute;z-index:25;left:0;right:0;top:calc(100% + 2px);margin:0;padding:4px 0;list-style:none;background:#fff;border:1px solid var(--line-2);border-radius:4px;max-height:264px;overflow-y:auto}
.combo-list li{padding:8px 11px;cursor:pointer;font-size:14px}
.combo-list li.on{background:var(--br-soft);color:var(--br-d)}
.combo-list li[aria-selected=true]{font-weight:600}
.combo-list li.muted{cursor:default}
.filters .combo{min-width:200px}
.top a.home{display:flex;align-items:center;gap:10px;color:#fff;min-width:0}
.top a.home:hover{text-decoration:none}

@media (max-width: 760px){
  .actions .btn{flex:1 1 auto}
  .head .actions{gap:6px}
  /* A member's home: the buttons two by two, in order; one left over takes the whole row. */
  .head .actions.quick{display:grid;grid-template-columns:1fr 1fr}
  .head .actions.quick .btn:last-child:nth-child(odd){grid-column:1/-1}
  .filters{padding:10px 12px}
  .filters .field,.filters .combo{min-width:0;flex:1 1 140px}
  .filters .btn{flex:0 0 auto}
  .panel>.ph{padding:11px 12px}
  .panel>.pb{padding:12px}
  .todo li{padding:11px 12px}
  .list td.right,.list th.right{padding-left:6px}
  .receipt{padding:16px}
  .steps li{min-width:104px;padding:8px 10px}
  input[type=text],input[type=password],input[type=email],input[type=tel],input[type=date],input[type=number],input[type=search],select,textarea{font-size:16px} /* no zoom-in on iPhone */
}

/* Money owed to the SACCO, notices, the month's progress, PIN fields (2026-10-29). */
.neg{color:var(--bad)}
.fig .v.neg{color:var(--bad)}
.note{border:1px solid var(--line);background:var(--surface);padding:10px 14px;margin-bottom:14px;font-size:13.5px}
.note.warn{border-color:#efd3b0;background:var(--warn-soft);color:var(--warn)}
.meter{height:8px;background:var(--surface-2);border:1px solid var(--line);margin-top:8px}
.meter>span{display:block;height:100%;background:var(--br-fill)}
ul.plain{list-style:none;margin:0;padding:0;columns:2 220px;column-gap:24px}
ul.plain li{padding:3px 0;break-inside:avoid}
input.pin{letter-spacing:.4em;font-variant-numeric:tabular-nums;font-weight:600}
input.pin::placeholder{letter-spacing:normal;font-weight:400}
.figs{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}

/* The bursar's review: what to look at, and reasons to pick from when declining. */
.reasons{display:flex;flex-direction:column;gap:6px;margin:8px 0 12px}
.reasons .reason{display:block;width:100%;padding:7px 10px;text-align:left;font:inherit;font-size:13px;color:var(--tx,inherit);background:var(--surface);border:1px solid var(--line);border-radius:3px;cursor:pointer}
.reasons .reason:hover,.reasons .reason:focus{border-color:var(--gold-fill);background:var(--gold-soft)}
.reasons .reason.fits{border-color:var(--gold-fill)}

/* The monthly share batch. */
.btn.disabled{opacity:.5;cursor:not-allowed}
.wizard-bar{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;padding:10px 14px;margin-bottom:16px;background:var(--surface);border:1px solid var(--line-2);border-radius:4px}
.wizard-bar .k{display:block;font-size:12px;color:var(--mt)}
.wizard-bar .v{font-weight:700;font-variant-numeric:tabular-nums}
.wizard-bar .go{margin-left:auto;display:flex;gap:8px}
.tools{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;padding:12px 14px;border-bottom:1px solid var(--line)}
.tools .grow{flex:1;min-width:200px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
table.list tr.dim td{opacity:.55}
.batch-tick{width:36px}
.batch-tick input{width:18px;height:18px;vertical-align:middle}
.statusbtn{padding:4px 10px;font:inherit;font-size:13px;background:var(--surface);border:1px solid var(--line);border-radius:3px;cursor:pointer}
.statusbtn.on{background:var(--br-soft);border-color:var(--br);color:var(--br-d)}
fieldset.bare{margin:0;padding:0;border:0;min-width:0}
fieldset.joining{margin:0 0 16px;padding:12px 14px;border:1px solid var(--line-2);border-radius:4px}
fieldset.joining legend{padding:0 6px;font-weight:600}
@media (max-width:640px){.wizard-bar .go{margin-left:0;width:100%}.wizard-bar .go .btn{flex:1;text-align:center;justify-content:center}}

/* The loan calculator and the plan beside a request. */
.loan-plan .big{font-size:26px;font-weight:700;color:var(--br-d);font-variant-numeric:tabular-nums}
.loan-plan .how{margin:14px 0;padding:10px 12px;background:var(--surface-2);border-radius:4px;font-size:13px}
.loan-plan .plan-h{margin:14px 0 6px;font-size:14px}
.loan-plan tfoot td{font-weight:600;border-top:1px solid var(--line-2)}
.loan-plan dl.facts{margin-top:12px}
.cols .loan-plan table.list th,.cols .loan-plan table.list td{padding-left:6px;padding-right:6px;font-size:13px}
.cols .loan-plan table.list th{white-space:normal;vertical-align:bottom}
/* The six-column plan: headings wrap; on a phone all six stay, a little tighter. */
.loan-plan table.plan6 th{white-space:normal;vertical-align:bottom}
@media (max-width: 760px){
  .loan-plan table.plan6 th,.loan-plan table.plan6 td{padding-left:5px;padding-right:5px;font-size:12px}
  .loan-plan table.plan6 .sub{font-size:11px}
}
/* A phone: the table uses the panel's full width, the period shows its number only (the dates are in the print). */
@media (max-width: 480px){
  .loan-plan .tablewrap{margin-left:-12px;margin-right:-12px}
  .loan-plan table.plan6 th,.loan-plan table.plan6 td{padding-left:2px;padding-right:2px;font-size:10.5px;letter-spacing:-.15px}
  .loan-plan table.plan6 th{font-size:10px}
  .loan-plan table.plan6 th:first-child,.loan-plan table.plan6 td:first-child{padding-left:8px}
  .loan-plan table.plan6 th:last-child,.loan-plan table.plan6 td:last-child{padding-right:8px}
  .loan-plan table.plan6 td:first-child .sub{display:none}
}
dl.facts.mt-facts{margin-top:14px}

/* Settings: the logo. */
.logo-pick{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
.logo-pick img{width:88px;height:88px;object-fit:contain;flex:none;padding:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:4px}
.logo-pick .grow{flex:1;min-width:220px}
.calc.bad{border-color:#f3c7c2;background:var(--bad-soft);color:#8f1b12}

/* The payout form: the amount to send (the loan less the service fee taken), in large type. */
.sendbox{border:1px solid var(--line-2);background:var(--br-soft);padding:12px 14px}
.sendbox .big{font-size:28px;font-weight:700;color:var(--br-d);font-variant-numeric:tabular-nums;line-height:1.2}

/* Loan payments, step 2: each loan's amount, typed in the row. */
.line-amount{width:120px;text-align:right;padding:6px 8px;font-variant-numeric:tabular-nums}
.bad-text{color:var(--bad)}
@media (max-width: 480px){.line-amount{width:96px}}

/* The quick search: a button in the menu and the top bar, and the box it opens (press / or Ctrl K). */
.find-open{display:flex;gap:8px;align-items:center;margin:10px 10px 0;padding:8px 10px;border:1px solid rgba(255,255,255,.35);border-radius:4px;background:rgba(255,255,255,.1);color:#fff;font:inherit;font-size:13px;cursor:pointer;text-align:left}
.find-open:hover{background:rgba(255,255,255,.18)}
.find-open span{flex:1}
.find-open kbd{border-color:rgba(255,255,255,.5);color:#fff;background:none}
kbd{display:inline-block;min-width:18px;padding:0 5px;border:1px solid var(--line-2);border-radius:3px;background:var(--surface);font:600 11px/17px var(--font);color:var(--mt);text-align:center}
.top .top-find{margin-left:auto}
body.palette-open{overflow:hidden}
.palette{position:fixed;inset:0;z-index:60;background:rgba(20,32,26,.45);display:flex;justify-content:center;align-items:flex-start;padding:10vh 16px 16px}
.palette[hidden]{display:none}
.palette-box{width:100%;max-width:620px;background:var(--surface);border:1px solid var(--line-2);border-radius:6px;display:flex;flex-direction:column;max-height:76vh;overflow:hidden}
.palette-in{display:flex;align-items:center;gap:10px;padding:0 10px 0 14px;border-bottom:1px solid var(--line)}
.palette-in .bp-i{color:var(--mt);font-size:17px}
.palette-in input{flex:1;border:0;outline:0;padding:15px 0;font:inherit;font-size:16px;background:none;min-width:0;-webkit-appearance:none;appearance:none}
.palette-in input::-webkit-search-cancel-button,.palette-in input::-webkit-search-decoration{-webkit-appearance:none;display:none}
.palette-x{border:0;background:none;color:var(--mt);padding:8px;cursor:pointer;font-size:16px;display:flex}
.palette-list{list-style:none;margin:0;padding:6px;overflow-y:auto}
.palette-list .grp{padding:8px 10px 4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--mt)}
.palette-list .it{display:flex;gap:12px;align-items:center;padding:9px 10px;border-radius:4px;cursor:pointer}
.palette-list .it .ic{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:4px;background:var(--br-soft);color:var(--br-d)}
.palette-list .it .ic svg{width:16px;height:16px}
.palette-list .it b{display:block;font-weight:600;line-height:1.3}
.palette-list .it span.h{display:block;font-size:12.5px;color:var(--mt);line-height:1.3}
.palette-list .it.on{background:var(--br-soft)}
.palette-list .it.on .ic{background:var(--br);color:#fff}
.palette-list .none{padding:18px 12px;color:var(--mt);text-align:center}
.palette-foot{display:flex;gap:16px;padding:8px 14px;border-top:1px solid var(--line);font-size:12px;color:var(--mt);background:var(--surface-2)}
@media (max-width: 760px){
  .palette{padding:0;align-items:stretch}
  .palette-box{max-width:none;max-height:none;height:100%;border-radius:0;border:0}
  .palette-foot{display:none}
}

/* "Do next": suggestions worked out from the books, each with its action. */
.suggest{margin-bottom:16px}
.suggest-h{display:flex;gap:7px;align-items:center;margin-bottom:8px;color:var(--gold);font-size:13px;text-transform:uppercase;letter-spacing:.06em}
.suggest-h b{font-weight:700}
.suggest-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.sg{display:flex;gap:12px;padding:12px 14px;background:var(--surface);border:1px solid var(--line-2);border-radius:4px}
.sg-i{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:4px;background:var(--surface-2);color:var(--br-d)}
.sg.warn .sg-i{background:var(--gold-soft);color:var(--gold)} .sg.bad .sg-i{background:var(--bad-soft);color:var(--bad)}
.sg-t{min-width:0;flex:1}
.sg-t>b{display:block;line-height:1.3}
.sg-t>span{display:block;color:var(--mt);font-size:13px;margin-top:2px}
.sg-a{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:9px}
.sg-hide{border:0;background:none;color:var(--mt);font:inherit;font-size:12.5px;cursor:pointer;padding:4px 6px}
.sg-hide:hover{color:var(--tx);text-decoration:underline}

/* Quick actions: the most used, as tiles. */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:18px}
.tile{display:flex;gap:11px;align-items:flex-start;padding:12px 13px;background:var(--surface);border:1px solid var(--line-2);border-radius:4px;color:var(--tx)}
.tile:hover{border-color:var(--br);text-decoration:none;background:var(--br-soft)}
.tile-i{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:4px;background:var(--br);color:#fff;font-size:16px}
.tile-t{min-width:0}
.tile-t b{display:block;line-height:1.3;font-weight:600}
.tile-t span{display:block;font-size:12.5px;color:var(--mt);line-height:1.35;margin-top:2px}
@media (max-width: 760px){
  .suggest-list{grid-template-columns:minmax(0,1fr)}
  .tiles{grid-template-columns:1fr 1fr;gap:8px}
  .tile{flex-direction:column;gap:8px;padding:11px}
  .tile-t span{display:none}
}
@media print{.suggest,.tiles,.find-open,.palette{display:none!important}}
/* Under the plan, as on the SACCO's paper: the total net amount and the service fee. */
.plan-total{margin:10px 0 0;font-size:13.5px}
/* A picker's member who cannot be chosen now (a guarantor at the limit): shown, greyed out, with why. */
.combo-list li.off{color:var(--mt);cursor:not-allowed;background:none}