/* Sakhikhaya Projects: the same look as the Sakh'ikhaya Water portal (Barlow, steel blue, hairline boxes with corner marks, small uppercase labels). */
:root{
  --color-bg:#f2f2f3;--color-surface:#e9e9ea;--color-text:#1d1f20;--accent:#4d7098;
  --divider:color-mix(in srgb,#1d1f20 16%,transparent);
  --a100:#eef6ff;--a300:#b5d9fd;--a600:#44668c;--a700:#416180;--a800:#2c455d;--a900:#1d2d3d;
  --n100:#f5f5f8;--n300:#d4d4d7;--n600:#66666a;--n700:#5d5d60;
  --font-heading:"Barlow Condensed",system-ui,sans-serif;--font-body:"Barlow",system-ui,sans-serif;
  --good:#1b7a4b;--bad:#b3261e;--warn:#8a6100;
  /* older names used inside the pages */
  --navy:var(--a900);--teal:var(--accent);--muted:var(--n600);--line:var(--divider);--bg:var(--color-bg);--ink:var(--color-text)}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.5 var(--font-body);color:var(--color-text);background:var(--color-bg);padding-bottom:40px}
body.signed-out header,body.signed-out nav#tabs{display:none}
h1,h2,h3{font-family:var(--font-heading);font-weight:600;letter-spacing:-.015em;line-height:1.1;margin:0 0 6px}
h1{font-size:36px;color:var(--a900)}
h2{font-size:12px;font-family:var(--font-body);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--n600);margin:26px 0 10px}
h3{font-size:22px}
a{color:var(--accent);text-underline-offset:3px}
.muted{color:var(--n600)}.small{font-size:13px}
:focus{outline:none}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:color-mix(in srgb,var(--accent) 30%,transparent)}
/* header */
header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--divider);background:var(--color-bg)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand img{height:40px;width:auto;display:block}
.bt b{display:block;font-family:var(--font-heading);font-weight:600;font-size:22px;line-height:1.05;color:var(--color-text)}
.bt i{display:block;font-style:normal;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--a700)}
#who{color:var(--n600);font-size:14px;text-align:right}#who a{margin-left:10px}
main{max-width:1100px;margin:0 auto;padding:20px 16px 8px}
/* the menu: along the top, portal-style tabs */
nav#tabs{display:flex;gap:0;padding:0 16px;border-bottom:1px solid var(--divider);overflow-x:auto;scrollbar-width:none;background:var(--color-bg)}
nav#tabs::-webkit-scrollbar{display:none}
nav#tabs a{display:flex;align-items:center;gap:8px;min-height:46px;padding:10px 18px;color:var(--n700);text-decoration:none;font-size:15px;white-space:nowrap;border:1px solid transparent;border-bottom:0;margin-bottom:-1px}
nav#tabs a:hover{color:var(--a800)}
nav#tabs a.on{color:var(--a800);font-weight:700;background:var(--color-bg);border-color:var(--divider);box-shadow:inset 0 2px 0 var(--accent)}
.ptabs{display:flex;gap:0;border-bottom:1px solid var(--divider);margin:16px 0 18px;overflow-x:auto;scrollbar-width:none}
.ptabs a{padding:10px 18px;min-height:44px;color:var(--n700);text-decoration:none;font-size:15px;white-space:nowrap;border:1px solid transparent;border-bottom:0;margin-bottom:-1px}
.ptabs a.on{color:var(--a800);font-weight:700;border-color:var(--divider);box-shadow:inset 0 2px 0 var(--accent);background:var(--color-bg)}
/* boxes with registration marks (the marks are added by the page) */
.card,.pcard,.kpi{position:relative;border:1px solid var(--divider);border-radius:0;padding:16px;margin:14px 0;background:transparent}
.card>.corner,.pcard>.corner,.kpi>.corner{position:absolute;width:11px;height:11px;color:color-mix(in srgb,var(--color-text) 55%,transparent)}
.corner::before,.corner::after{content:"";position:absolute;background:currentColor}
.corner::before{left:5px;top:0;width:1px;height:100%}.corner::after{top:5px;left:0;width:100%;height:1px}
.corner.tl{top:-6px;left:-6px}.corner.tr{top:-6px;right:-6px}.corner.bl{bottom:-6px;left:-6px}.corner.br{bottom:-6px;right:-6px}
label{display:block;font-size:13px;margin:14px 0 5px;color:color-mix(in srgb,var(--color-text) 72%,transparent)}
input,select,textarea{width:100%;min-height:46px;padding:8px 12px;font:inherit;font-size:16px;color:var(--color-text);caret-color:var(--accent);background:var(--color-surface);border:1px solid var(--divider);border-radius:4px}
input:hover,select:hover,textarea:hover{border-color:color-mix(in srgb,var(--color-text) 45%,transparent)}
input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--accent);outline-offset:0}
input[type=checkbox],input[type=radio]{width:auto;min-height:0}
/* buttons */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:48px;padding:8px 18px;font-family:var(--font-heading);font-weight:600;font-size:17px;line-height:1.2;color:var(--color-bg);background:var(--accent);border:1px solid var(--accent);border-radius:4px;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--a600)}.btn:active{background:var(--a700)}
.btn.alt{background:transparent;color:var(--color-text);border-color:var(--divider)}.btn.alt:hover{background:color-mix(in srgb,var(--color-text) 7%,transparent)}
.btn.good{background:var(--a900);border-color:var(--a900)}.btn.good:hover{background:var(--a800)}
.btn.bad{background:var(--bad);border-color:var(--bad)}
.btn.sm{display:inline-flex;width:auto;min-height:40px;padding:6px 16px;font-size:15px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.big{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
.big a,.big button{min-height:130px;border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-decoration:none;border:0;background:var(--a900);color:var(--color-bg);font-family:var(--font-heading);font-weight:600;font-size:22px;cursor:pointer}
.big a:hover{background:var(--a800)}.big a.fuel{background:var(--accent)}.big a.fuel:hover{background:var(--a600)}
.big .ico{display:flex}
@media(min-width:700px){.big{max-width:560px}}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.right{margin-left:auto}
/* tags */
.chip{display:inline-flex;align-items:center;padding:3px 10px;border-radius:3px;font-size:12px;letter-spacing:.02em;background:var(--a100);color:var(--a800)}
.chip.Submitted{background:#fff3cd;color:#664d03}.chip.Paid{background:#d7f0e1;color:var(--good)}.chip.Rejected{background:#fbe0de;color:var(--bad)}.chip.Recorded{background:var(--n100);color:#424244}
/* lists */
.item{display:flex;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--divider)}.item:first-child{border-top:0}
.thumb{width:58px;height:58px;border-radius:2px;object-fit:cover;background:var(--color-surface);flex:none;cursor:pointer;border:1px solid var(--divider)}
.item .grow,.ph .grow{flex:1;min-width:0}.item .amt{font-family:var(--font-heading);font-weight:600;font-size:19px;white-space:nowrap}
/* figures */
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:18px 0}
@media(min-width:700px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpi{display:flex;flex-direction:column-reverse;margin:0;padding:14px 16px}
.kpi span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--n600)}
.kpi b{font-family:var(--font-heading);font-weight:600;font-size:30px;line-height:1.1;color:var(--a900);margin-top:4px}
.neg{color:var(--bad)!important}.pos{color:var(--good)!important}
.bar{height:8px;background:color-mix(in srgb,var(--color-text) 10%,transparent);margin-top:5px}.bar i{display:block;height:100%;background:var(--accent)}
/* projects as folders */
.pgrid{display:grid;grid-template-columns:1fr;gap:18px;margin-top:14px}@media(min-width:760px){.pgrid{grid-template-columns:1fr 1fr}}
.pcard{display:block;margin:0;color:var(--color-text);text-decoration:none}.pcard:hover{background:color-mix(in srgb,var(--color-text) 4%,transparent)}
.pcard.gen{background:color-mix(in srgb,var(--color-text) 3%,transparent)}
.ph{display:flex;align-items:center;gap:12px}.ph b{font-family:var(--font-heading);font-weight:600;font-size:23px;line-height:1.1}
.fold{color:var(--accent);display:flex}.pcard.gen .fold{color:var(--n600)}
.pcard .m{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--divider)}
.pcard .m span{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--n600)}
.pcard .m b{font-family:var(--font-heading);font-weight:600;font-size:20px;color:var(--a900)}
.photo{display:block;width:100%;max-height:340px;object-fit:contain;background:var(--color-surface);margin:10px 0;border:1px solid var(--divider)}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:10px}.seg label{margin:0;border:1px solid var(--divider);border-radius:4px;padding:12px;display:flex;gap:10px;align-items:center;cursor:pointer;color:var(--color-text);font-weight:500}
.seg label.on{border-color:var(--accent);box-shadow:inset 0 2px 0 var(--accent);background:var(--a100)}
#banner .b{padding:10px 16px;font-size:15px}#banner .warn{background:#fff3cd;color:#664d03}#banner .bad{background:var(--bad);color:#fff;font-weight:600}
.toast{position:fixed;left:16px;right:16px;bottom:24px;background:var(--a900);color:var(--color-bg);padding:14px 16px;border-radius:4px;z-index:20;font-weight:500}.toast.bad{background:var(--bad)}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:30;display:flex;align-items:center;justify-content:center;padding:12px}.modal img{max-width:100%;max-height:100%}
/* sign in, like the portal's */
.welcome{max-width:560px;margin:34px auto}
.wh{display:flex;align-items:center;gap:13px;margin-bottom:22px}.wh img{height:48px;width:auto}
.wh b{display:block;font-family:var(--font-heading);font-weight:600;font-size:26px;line-height:1.05}
.wh i{display:block;font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--a700)}
.welcome h1{font-size:34px;margin-bottom:6px}
@media(max-width:520px){h1{font-size:30px}main{padding:16px 14px 8px}}

/* my profile: a button in the header */
.mechip{display:inline-flex;align-items:center;gap:9px;padding:4px 12px 4px 4px;border:1px solid var(--divider);border-radius:99px;color:var(--color-text);text-decoration:none;font-size:14px}
.mechip:hover,.mechip.on{border-color:var(--accent);background:var(--a100);color:var(--a800)}
.av{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--a900);color:var(--color-bg);font-family:var(--font-heading);font-weight:600;font-size:15px;letter-spacing:.02em}
.av.lg{width:54px;height:54px;font-size:22px}
#mebadge:not(:empty){background:#c9a227;color:#1d1f20;border-radius:99px;font-size:11px;font-weight:700;padding:1px 7px}
@media(max-width:520px){.mechip .nm{display:none}.mechip{padding:3px}}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}@media(max-width:620px){.grid2{grid-template-columns:1fr}}
.fchips{margin:12px 0 10px}
.item.emp:hover{background:color-mix(in srgb,var(--color-text) 4%,transparent)}

.thumb.pdf{display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-weight:600;font-size:18px;color:var(--a800);text-decoration:none;background:var(--a100)}
.sup summary{list-style:none;cursor:pointer}.sup summary::-webkit-details-marker{display:none}.sup{border-top:1px solid var(--divider)}.sup:first-child{border-top:0}.sup summary.item{border-top:0}