/* ============================================================ IA & AC Review — World Bank palette, set in the same types as the National Consolidation Portal so the two read as one family. Fraunces carries titles and headline figures: a serif with the weight of a printed annual report. IBM Plex Sans carries everything else. Both self-hosted, so nothing is fetched from outside and nothing needs building. ============================================================ */ @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap; src:url('../fonts/ibm-plex-sans-400-normal.woff2') format('woff2')} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap; src:url('../fonts/ibm-plex-sans-500-normal.woff2') format('woff2')} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap; src:url('../fonts/ibm-plex-sans-600-normal.woff2') format('woff2')} @font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap; src:url('../fonts/ibm-plex-sans-700-normal.woff2') format('woff2')} @font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap; src:url('../fonts/fraunces-400-normal.woff2') format('woff2')} @font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap; src:url('../fonts/fraunces-500-normal.woff2') format('woff2')} @font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap; src:url('../fonts/fraunces-600-normal.woff2') format('woff2')} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap; src:url('../fonts/ibm-plex-mono-500-normal.woff2') format('woff2')} :root{ /* Chrome: the bar is dark so the working pane is the brightest thing on screen. Navy is the World Bank identity; cyan carries active states and rules, never a second button colour. */ --navy:#002244;--navy-8:#00325F;--navy-9:#001A33; --cyan:#009FDA;--cyan-d:#00648F;--cyan-1:#EAF6FC;--cyan-2:#CCEAF8; /* Ground and sheet. The page is a shade with depth in it, and the card is a hair off pure white: a pure white sheet on a tinted ground is the one surface that reads as a box drawn on a screen rather than paper. */ --paper:#EEF2F6;--card:#FCFDFE;--ink:#141C24;--mute:#5A6672; /* Hairlines. A row separator has to be registered, not read, so these are translucent ink rather than a grey that fights the card behind it. */ --hair:rgba(0,34,68,.10);--hair-strong:rgba(0,34,68,.18); --line:var(--hair);--na:#EDF1F5; --green:#00734B;--greenbg:#E3F1EA;--amber:#8A5300;--amberbg:#FBEEDB; --red:#B3251B;--redbg:#FADEDB;--blue:var(--cyan-d);--bluebg:var(--cyan-1); /* Two shadows, not one: a hairline lift for resting surfaces and a real one for the thing being worked on. */ --shadow:0 1px 1px rgba(0,34,68,.04),0 1px 3px rgba(0,34,68,.06); --shadow-lift:0 1px 2px rgba(0,34,68,.06),0 8px 24px rgba(0,34,68,.10); --radius:9px;--radius-sm:6px; --barh:56px; --font-sans:'IBM Plex Sans',ui-sans-serif,system-ui,'Segoe UI',Roboto,Arial,sans-serif; --font-display:'Fraunces',Georgia,'Times New Roman',serif; --font-mono:'IBM Plex Mono',ui-monospace,Consolas,monospace; } @media (prefers-color-scheme:dark){:root{ --navy:#0A1520;--navy-8:#16293B;--navy-9:#060D14; --cyan:#4FC3F0;--cyan-d:#7FD3F4;--cyan-1:#0E2433;--cyan-2:#143850; --paper:#0B141C;--card:#131F2A;--ink:#E9EFF4;--mute:#9CACBA; --hair:rgba(255,255,255,.10);--hair-strong:rgba(255,255,255,.18); --line:var(--hair);--na:#1A2833; --green:#5FCB9C;--greenbg:#0F3A2B;--amber:#EFC066;--amberbg:#40320A; --red:#F09A92;--redbg:#45201D; --shadow:0 1px 2px rgba(0,0,0,.30);--shadow-lift:0 10px 28px rgba(0,0,0,.45); }} *,*:before,*:after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--paper);color:var(--ink); font:16px/1.55 "Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif} button,input,select,textarea{font:inherit;color:inherit} a{color:var(--cyan-d)} a:hover{color:var(--navy)} h1{font-size:1.4rem;line-height:1.25;margin:0 0 .5rem;letter-spacing:-.01em} h2{font-size:1.08rem;margin:0 0 .6rem;letter-spacing:-.005em} h3{font-size:.95rem;margin:0 0 .4rem} p{margin:0 0 .7rem} .mute{color:var(--mute)}.small{font-size:.85rem}.tnum{font-variant-numeric:tabular-nums} :focus-visible{outline:3px solid var(--cyan);outline-offset:2px} /* ---------- masthead ---------- */ .bar{background:var(--navy);color:#fff;position:sticky;top:0;z-index:20; border-bottom:3px solid var(--cyan)} .bar-in{max-width:1240px;margin:0 auto;padding:.55rem 1rem;display:flex;gap:.9rem;align-items:center;flex-wrap:wrap} .bar .mark{display:flex;flex-direction:column;line-height:1.15;margin-right:.4rem} .bar .mark b{font-size:.95rem;letter-spacing:.01em} .bar .mark span{font-size:.72rem;color:var(--cyan);text-transform:uppercase;letter-spacing:.08em} .bar .sp{flex:1} .bar nav{display:flex;gap:.15rem;flex-wrap:wrap} .bar nav a{color:#D7E3EC;text-decoration:none;padding:.35rem .7rem;border-radius:4px;font-size:.9rem;white-space:nowrap} .bar nav a:hover{background:var(--navy-8);color:#fff} .bar nav a[aria-current=page]{background:var(--navy-8);color:#fff;font-weight:600;box-shadow:inset 0 -2px 0 var(--cyan)} .who{font-size:.82rem;color:#B9CCDA;text-align:right;line-height:1.25} .who b{display:block;color:#fff;font-size:.88rem;font-weight:600} .bar form{margin:0} .bar .signout{color:#fff;background:transparent;border:1px solid #33556F;border-radius:4px; padding:.32rem .75rem;cursor:pointer;font-size:.85rem} .bar .signout:hover{background:var(--navy-8);border-color:#5A7F9B} .wrap{max-width:1240px;margin:0 auto;padding:1.15rem 1rem 3rem} /* ---------- page head ---------- */ .phead{display:flex;gap:1rem;align-items:flex-end;flex-wrap:wrap;margin-bottom:1rem} .phead .t{flex:1;min-width:260px} .phead h1{margin:0} .phead .sub{color:var(--mute);font-size:.9rem;margin:.15rem 0 0} .crumb{font-size:.8rem;color:var(--mute);margin:0 0 .3rem;text-transform:uppercase;letter-spacing:.07em} /* ---------- surfaces ---------- */ .card{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:1.05rem;margin-bottom:1.05rem;box-shadow:var(--shadow)} .card>h2:first-child{margin-top:0} .chead{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;margin:-.15rem 0 .8rem} .chead h2{margin:0;flex:1} /* ---------- buttons ---------- */ .btn{display:inline-block;background:var(--navy);color:#fff;border:1px solid var(--navy); border-radius:4px;padding:.55rem 1.05rem;font-weight:600;font-size:.92rem;cursor:pointer;text-decoration:none;white-space:nowrap} .btn:hover{background:var(--navy-8);color:#fff} .btn.alt{background:var(--card);color:var(--navy);border-color:var(--line)} .btn.alt:hover{background:var(--cyan-1);border-color:var(--cyan);color:var(--navy)} .btn.danger{background:var(--red);border-color:var(--red)} .btn.sm{padding:.3rem .65rem;font-size:.82rem;font-weight:500} @media (prefers-color-scheme:dark){.btn{background:var(--cyan-d);border-color:var(--cyan-d);color:#04121C} .btn:hover{background:var(--cyan);color:#04121C}.btn.alt{color:var(--ink)}} /* ---------- forms ---------- */ label{display:block;font-weight:500;margin:.65rem 0 .25rem;font-size:.92rem} input[type=text],input[type=email],input[type=tel],input[type=date],input[type=number], input[type=password],input[type=search],select,textarea{ width:100%;padding:.5rem .6rem;border:1px solid var(--line);border-radius:4px;background:var(--card)} input:focus,select:focus,textarea:focus{border-color:var(--cyan);outline:2px solid var(--cyan-2);outline-offset:0} input[readonly]{background:var(--na)} textarea{min-height:4.5rem;resize:vertical} .err{background:var(--redbg);color:var(--red);padding:.55rem .75rem;border-radius:4px;margin:.6rem 0;border-left:4px solid var(--red)} .ok{background:var(--greenbg);color:var(--green);padding:.55rem .75rem;border-radius:4px;margin:.6rem 0;border-left:4px solid var(--green)} .warn{background:var(--amberbg);color:var(--amber);padding:.55rem .75rem;border-radius:4px;margin:.6rem 0;border-left:4px solid var(--amber)} /* ---------- sign-in ---------- */ .auth{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr} .auth-brand{background:var(--navy);color:#fff;padding:3rem 3.2rem;display:flex;flex-direction:column;justify-content:center; background-image:linear-gradient(140deg,var(--navy-9) 0%,var(--navy) 55%,#003A70 100%)} .auth-brand .rule{width:64px;height:4px;background:var(--cyan);margin-bottom:1.6rem} .auth-brand h1{font-size:1.9rem;line-height:1.2;margin:0 0 .9rem;max-width:15em;color:#fff} .auth-brand p{color:#C3D5E2;max-width:26em;margin:0} .auth-brand .yrs{margin-top:2.2rem;font-size:.8rem;letter-spacing:.09em;text-transform:uppercase;color:var(--cyan)} .auth-form{display:flex;align-items:center;justify-content:center;padding:2.5rem 1.25rem;background:var(--card)} .auth-form .inner{width:100%;max-width:360px} .auth-form h2{font-size:1.3rem;margin:0 0 .25rem} .auth-form .lead{color:var(--mute);font-size:.9rem;margin:0 0 1.3rem} .auth-form .btn{width:100%;margin-top:1.2rem;padding:.65rem} .auth-form .help{margin:1.4rem 0 0;font-size:.82rem;color:var(--mute);border-top:1px solid var(--line);padding-top:.9rem} @media(max-width:860px){ .auth{grid-template-columns:1fr;min-height:0} .auth-brand{padding:2rem 1.25rem} .auth-brand h1{font-size:1.35rem}.auth-brand .yrs{margin-top:1.1rem} .auth-form{padding:1.75rem 1.25rem} } /* ---------- KPI tiles ---------- */ .kp{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:.8rem;margin-bottom:1.05rem} .kp div{background:var(--card);border:1px solid var(--line);border-top:3px solid var(--cyan); border-radius:6px;padding:.75rem .9rem;box-shadow:var(--shadow);font-size:.84rem;color:var(--mute)} .kp b{display:block;font-size:1.75rem;line-height:1.15;color:var(--ink);font-variant-numeric:tabular-nums;font-weight:650} .kp .g2{border-top-color:var(--green)}.kp .a2{border-top-color:var(--amber)}.kp .r2{border-top-color:var(--red)} /* ---------- toolbar / filters ---------- */ .tools{display:flex;gap:.6rem;flex-wrap:wrap;align-items:flex-end;margin-bottom:.9rem} .tools .f{display:flex;flex-direction:column;gap:.2rem} .tools label{margin:0;font-size:.78rem;color:var(--mute);text-transform:uppercase;letter-spacing:.05em} .tools input,.tools select{min-width:190px;padding:.42rem .55rem} .tools .sp{flex:1} /* ---------- tables ---------- */ .scroll{overflow-x:auto;border-radius:4px} table{border-collapse:collapse;width:100%;font-size:.88rem;font-variant-numeric:tabular-nums} th,td{padding:.45rem .6rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top} /* Not sticky: .scroll only scrolls in x, so a sticky header would stick to the viewport and ride over the masthead. */ thead th{font-weight:600;color:#fff;background:var(--navy);white-space:nowrap; font-size:.78rem;text-transform:uppercase;letter-spacing:.045em;border-bottom:0} thead th a{color:#fff;text-decoration:none} tbody tr:hover{background:var(--cyan-1)} tbody tr:last-child td{border-bottom:0} td.h{text-align:center;font-weight:600;min-width:2.7rem} td.name{font-weight:600} td.name a{text-decoration:none} td.name a:hover{text-decoration:underline} .g{background:var(--greenbg);color:var(--green)}.a{background:var(--amberbg);color:var(--amber)} .r{background:var(--redbg);color:var(--red)}.n{background:var(--na);color:var(--mute)} .pill{display:inline-block;padding:.08rem .55rem;border-radius:10px;font-size:.76rem;font-weight:600;white-space:nowrap} .pill.n{background:var(--na);color:var(--mute)} .bararea{height:6px;background:var(--na);border-radius:3px;overflow:hidden;min-width:56px} .bararea i{display:block;height:100%;background:var(--cyan)} .bararea i.full{background:var(--green)} .legend{font-size:.8rem;color:var(--mute);margin-top:.7rem;line-height:1.7} .legend b{color:var(--ink)} /* ---------- questionnaire (unchanged structure) ---------- */ .grid{display:grid;grid-template-columns:268px 1fr;gap:1.05rem;align-items:start} .nav{position:sticky;top:calc(var(--barh) + 10px);max-height:calc(100vh - var(--barh) - 28px);overflow:auto;padding:.5rem} .nav a{display:grid;grid-template-columns:1.6rem 1fr auto;gap:.4rem;padding:.45rem .5rem;border-radius:4px; align-items:center;font-size:.88rem;text-decoration:none;color:var(--ink)} .nav a:hover{background:var(--cyan-1)} .nav a[aria-current=page]{background:var(--cyan-1);font-weight:600;box-shadow:inset 3px 0 0 var(--cyan)} .nav .k{font-weight:700;color:var(--cyan-d)} @media(max-width:820px){.grid{grid-template-columns:1fr} .nav{position:static;max-height:none;display:flex;gap:.3rem;overflow-x:auto} .nav a{display:flex;flex:none;border:1px solid var(--line)}.nav a span:nth-child(2){display:none}} .pct{font-size:.74rem;font-variant-numeric:tabular-nums;padding:.05rem .45rem;border-radius:9px;background:var(--na);white-space:nowrap} .pct.done{background:var(--greenbg);color:var(--green)}.pct.part{background:var(--amberbg);color:var(--amber)} .box{background:var(--cyan-1);border-left:3px solid var(--cyan);border-radius:0 4px 4px 0; padding:.7rem .9rem;margin:.6rem 0 1rem;font-size:.9rem}.box p:last-child{margin:0} .q{border-top:1px solid var(--line);padding:.9rem 0 .9rem .7rem;border-left:4px solid transparent} .q.done{border-left-color:var(--green)} .qh{display:grid;grid-template-columns:2.8rem 1fr;gap:.3rem} .qn{font-weight:700;color:var(--cyan-d)}.qt{font-weight:500} .qb{margin-left:3.1rem}@media(max-width:560px){.qb{margin-left:0}} .seg{display:flex;flex-wrap:wrap;gap:.35rem;margin:.5rem 0} .seg label{margin:0;border:1px solid var(--line);border-radius:4px;padding:.4rem .75rem;cursor:pointer; min-height:40px;display:flex;align-items:center;gap:.35rem;font-weight:400} .seg input{accent-color:var(--cyan-d)} .seg label:has(input:checked){background:var(--cyan-1);border-color:var(--cyan);font-weight:600} .ev{font-size:.87rem;background:var(--paper);border-radius:4px;padding:.5rem .6rem;margin-top:.6rem} .ev label{font-size:.84rem;margin-top:.4rem} .conf{display:inline-block;font-size:.74rem;background:var(--redbg);color:var(--red);padding:.1rem .45rem;border-radius:3px;font-weight:600} .req{color:var(--red);font-size:.85rem;font-weight:500;display:none}.q.need .req{display:inline} .fy{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-top:.4rem} .fy label{margin:0;font-size:.79rem;color:var(--mute)} .foot{display:flex;gap:.6rem;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-top:1rem; position:sticky;bottom:0;background:var(--card);padding:.6rem 0;border-top:1px solid var(--line)} #save-status{font-size:.85rem;color:var(--green)}#save-status.bad{color:var(--red);font-weight:600} canvas.sig{width:100%;height:170px;border:1px dashed var(--mute);border-radius:4px;background:#fff;touch-action:none;display:block} .ans{white-space:pre-wrap} .login{max-width:440px;margin:6vh auto} .crest{border-left:5px solid var(--cyan);padding-left:.9rem;margin-bottom:1.2rem} @media print{.bar,.nav,.foot,.noprint,.tools{display:none!important} body{background:#fff}.card{border:0;padding:0;box-shadow:none}.grid{display:block} thead th{background:#fff!important;color:#000!important;border-bottom:1px solid #000}} /* ============================================================ Questionnaire form One question per card, guidance folded away, and the explanation revealed only when the answer calls for one. ============================================================ */ /* --- section header ------------------------------------------------ */ .secthead{background:var(--card);border:1px solid var(--line);border-radius:8px; padding:1rem 1.15rem;margin-bottom:1rem;box-shadow:var(--shadow); position:sticky;top:calc(var(--barh) + 10px);z-index:6; border-top:3px solid var(--cyan)} .secthead .eyebrow{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase; color:var(--cyan-d);font-weight:700;margin:0 0 .2rem} .secthead h1{font-size:1.22rem;margin:0 0 .65rem;line-height:1.3} .secthead .meter{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap} .secthead .meter .bararea{flex:1;min-width:130px;height:9px} .secthead .meter .n{font-size:.83rem;color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:500} .secthead .jump{font-size:.83rem;font-weight:600;text-decoration:none;white-space:nowrap} @media(max-width:820px){.secthead{position:static}} /* --- guidance ------------------------------------------------------- */ details.guide{border:1px solid var(--line);border-radius:7px;background:var(--card); margin:0 0 1.1rem;overflow:hidden;box-shadow:var(--shadow)} details.guide>summary{cursor:pointer;padding:.7rem .95rem;font-weight:600;font-size:.9rem; color:var(--navy);background:var(--cyan-1);list-style:none;display:flex;gap:.55rem;align-items:center} details.guide>summary::-webkit-details-marker{display:none} details.guide>summary:before{content:"";width:0;height:0;border:5px solid transparent; border-left-color:var(--cyan-d);transition:transform .15s;flex:none} details.guide[open]>summary:before{transform:rotate(90deg) translateX(-1px)} details.guide .gbody{padding:.9rem 1rem;font-size:.9rem;border-top:1px solid var(--line);line-height:1.6} details.guide .gbody p:last-child{margin:0} @media (prefers-color-scheme:dark){details.guide>summary{color:var(--ink)}} /* --- question card -------------------------------------------------- */ .q{background:var(--card);border:1px solid var(--line);border-radius:8px; padding:0;margin:0 0 .8rem;box-shadow:var(--shadow);overflow:hidden; border-left:4px solid var(--line);transition:border-color .15s,box-shadow .15s} .q:hover{box-shadow:0 2px 10px rgba(0,34,68,.09)} .q.done{border-left-color:var(--green)} .q.need{border-left-color:var(--amber)} .qh{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:start; padding:.85rem 1rem;background:linear-gradient(180deg,var(--paper),transparent)} .qn{display:inline-flex;align-items:center;justify-content:center;min-width:2.5rem;height:1.6rem; padding:0 .5rem;border-radius:4px;background:var(--navy);color:#fff; font-size:.76rem;font-weight:700;letter-spacing:.03em;flex:none} .q.done .qn{background:var(--green)} .q.need .qn{background:var(--amber)} .qt{font-weight:500;line-height:1.5;font-size:.97rem;align-self:center} .qstate{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em; padding:.18rem .5rem;border-radius:10px;white-space:nowrap;background:var(--na);color:var(--mute);align-self:center} .q.done .qstate{background:var(--greenbg);color:var(--green)} .q.need .qstate{background:var(--amberbg);color:var(--amber)} .q.done .qstate:after{content:"Answered"} .q.need .qstate:after{content:"Needs a note"} .q:not(.done):not(.need) .qstate:after{content:"Not answered"} .qb{padding:0 1rem 1rem;border-top:1px solid var(--line)} .qb>*:first-child{margin-top:.85rem} @media(max-width:620px){ .qh{grid-template-columns:auto 1fr;gap:.55rem} .qstate{grid-column:2;justify-self:start;margin-top:.2rem} } /* --- choices -------------------------------------------------------- */ .seg{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 .2rem} .seg label{margin:0;border:1.5px solid var(--line);border-radius:6px;padding:.5rem .85rem;cursor:pointer; min-height:44px;display:flex;align-items:center;gap:.5rem;font-weight:500;font-size:.9rem; background:var(--card);transition:background .12s,border-color .12s,color .12s;user-select:none} .seg label:hover{border-color:var(--cyan);background:var(--cyan-1)} .seg input{accent-color:var(--navy);width:1.05rem;height:1.05rem;flex:none;margin:0} .seg label:has(input:checked){background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600} .seg label:has(input:checked) input{accent-color:#fff} @media (prefers-color-scheme:dark){ .seg label:has(input:checked){background:var(--cyan-d);border-color:var(--cyan-d);color:#04121C}} .q[data-disabled] .seg label{cursor:not-allowed;opacity:.7} /* --- explanation: folded until needed ------------------------------- */ details.explain{margin-top:.85rem;border:1px solid var(--line);border-left:3px solid var(--line); border-radius:0 6px 6px 0;background:var(--na);overflow:hidden} details.explain>summary{cursor:pointer;padding:.55rem .75rem;font-size:.86rem;font-weight:600; color:var(--mute);list-style:none;display:flex;gap:.45rem;align-items:center} details.explain>summary::-webkit-details-marker{display:none} details.explain>summary:before{content:"+";font-weight:700;color:var(--cyan-d);flex:none} details.explain[open]>summary:before{content:"-"} details.explain .ebody{padding:0 .75rem .75rem} details.explain label{margin-top:0} details.explain textarea,details.explain input{background:var(--card)} .q.need details.explain{border-color:var(--amber);border-left-color:var(--amber);background:var(--amberbg)} .q.need details.explain>summary{color:var(--amber)} /* --- evidence ------------------------------------------------------- */ details.ev{margin-top:.65rem;border:1px dashed var(--line);border-radius:6px;background:var(--paper)} details.ev>summary{cursor:pointer;padding:.5rem .75rem;font-size:.85rem;color:var(--cyan-d); font-weight:600;list-style:none;display:flex;gap:.45rem;align-items:center} details.ev>summary::-webkit-details-marker{display:none} details.ev>summary:before{content:"+";font-weight:700;flex:none} details.ev[open]>summary:before{content:"-"} details.ev .ebody{padding:0 .75rem .75rem;font-size:.87rem} details.ev .hint{color:var(--mute);margin:0 0 .55rem;line-height:1.5} /* --- three-year table ----------------------------------------------- */ .fy{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:.2rem} .fy>div{background:var(--paper);border:1px solid var(--line);border-radius:6px;padding:.5rem .6rem} .fy label{margin:0 0 .3rem;font-size:.72rem;color:var(--cyan-d);text-transform:uppercase; letter-spacing:.06em;font-weight:700} .fy input{text-align:right;font-variant-numeric:tabular-nums;background:var(--card)} @media(max-width:560px){.fy{grid-template-columns:1fr}.fy input{text-align:left}} /* --- small helpers -------------------------------------------------- */ .req{color:var(--amber);font-size:.82rem;font-weight:600;display:none} .q.need .req{display:inline} .conf{display:inline-block;font-size:.7rem;background:var(--redbg);color:var(--red); padding:.12rem .5rem;border-radius:3px;font-weight:700;vertical-align:middle;white-space:nowrap;margin-left:.3rem} .conf.rev{background:var(--cyan-1);color:var(--cyan-d)} .fieldlbl{font-size:.72rem;color:var(--mute);font-weight:700;text-transform:uppercase; letter-spacing:.06em;margin:.75rem 0 .25rem} .qb>.fieldlbl:first-child{margin-top:.85rem} /* --- side navigation ------------------------------------------------ */ .nav{position:sticky;top:calc(var(--barh) + 10px);max-height:calc(100vh - var(--barh) - 28px); overflow:auto;padding:.45rem} .nav a{display:grid;grid-template-columns:1.85rem 1fr auto;gap:.5rem;padding:.5rem .55rem; border-radius:6px;align-items:center;font-size:.86rem;text-decoration:none;color:var(--ink);line-height:1.3} .nav a:hover{background:var(--cyan-1)} .nav a[aria-current=page]{background:var(--cyan-1);font-weight:600;box-shadow:inset 3px 0 0 var(--cyan)} .nav .k{display:inline-flex;align-items:center;justify-content:center;width:1.7rem;height:1.7rem; border-radius:50%;background:var(--na);color:var(--mute);font-weight:700;font-size:.76rem;flex:none} .nav a[aria-current=page] .k{background:var(--navy);color:#fff} .nav .k.full{background:var(--greenbg);color:var(--green)} @media(max-width:820px){ .nav{position:static;max-height:none;display:flex;gap:.35rem;overflow-x:auto;padding:.4rem} .nav a{display:flex;flex:none;border:1px solid var(--line)} .nav a span:nth-child(2){display:none}} /* --- sticky footer -------------------------------------------------- */ .foot{display:flex;gap:.8rem;justify-content:space-between;align-items:center;flex-wrap:wrap; margin-top:1.2rem;position:sticky;bottom:0;background:var(--card);padding:.8rem 1rem; border:1px solid var(--line);border-radius:8px;box-shadow:0 -3px 14px rgba(0,34,68,.09);z-index:5} .foot .acts{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap} #save-status{font-size:.86rem;color:var(--green);font-weight:600;display:flex;align-items:center;gap:.4rem} #save-status:before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:currentColor;flex:none} #save-status.bad{color:var(--red)} #save-status.busy{color:var(--mute)} /* --- declaration ---------------------------------------------------- */ canvas.sig{width:100%;height:180px;border:2px dashed var(--cyan);border-radius:6px; background:#fff;touch-action:none;display:block} /* ============================================================ Fitting the screen it is on Targets: 1366x768 and 1280x800 laptops, 1024 and 768 tablets, 390 and 360 phones, and pen/touch input without a keyboard. ============================================================ */ /* Nothing may push the page sideways. */ html,body{max-width:100%;overflow-x:hidden} img,canvas,svg,video{max-width:100%} td,th{overflow-wrap:anywhere} /* --- small laptops: 821px to 1100px --------------------------------- */ /* Lower bound matters: below 821px the layout stacks, and this block comes later in the file, so an unbounded max-width would put the sidebar back. */ @media(min-width:821px) and (max-width:1100px){ .wrap{padding:.9rem .8rem 2.5rem} .grid{grid-template-columns:212px 1fr;gap:.8rem} .nav a{font-size:.8rem;grid-template-columns:1.6rem 1fr auto;gap:.4rem;padding:.42rem .45rem} .nav .k{width:1.5rem;height:1.5rem;font-size:.7rem} .kp b{font-size:1.5rem} .bar .mark span{display:none} } /* --- short screens: 1366x768 and the like --------------------------- */ /* A sticky masthead plus a sticky section header plus a sticky footer leaves too little room to read on a 768px-tall laptop. */ @media(max-height:820px) and (min-width:821px){ .secthead{position:static} .secthead h1{font-size:1.1rem;margin-bottom:.5rem} .secthead{padding:.8rem .95rem} } @media(max-height:700px){ .bar{position:static} .nav{position:static;max-height:none} .foot{position:static;box-shadow:var(--shadow)} } /* --- tablets: 1024px and under -------------------------------------- */ @media(max-width:1024px){ /* The dashboard carries eight section columns. Drop the least useful first so the rest stays readable instead of scrolling forever. */ #tbl th:nth-last-child(1),#tbl td:nth-last-child(1){display:none} /* Last saved */ } @media(max-width:900px){ #tbl th:nth-last-child(2),#tbl td:nth-last-child(2){display:none} /* B7 */ } /* --- stacked layout: 820px and under -------------------------------- */ @media(max-width:820px){ .bar-in{padding:.5rem .8rem;gap:.55rem} .bar .mark b{font-size:.86rem} .who{text-align:left;font-size:.76rem} .who b{font-size:.82rem} .phead{align-items:flex-start} .phead h1{font-size:1.2rem} .card{padding:.85rem} .tools input,.tools select{min-width:0;width:100%} .tools .f{flex:1 1 150px} h1{font-size:1.2rem} } /* --- phones: 560px and under ---------------------------------------- */ @media(max-width:560px){ .wrap{padding:.75rem .7rem 2.5rem} .bar-in{padding:.5rem .7rem} .bar nav{width:100%;order:3;gap:.2rem;overflow-x:auto;padding-bottom:.15rem} .bar nav a{padding:.3rem .55rem;font-size:.85rem} .bar .mark{margin-right:0} .who{font-size:.74rem} .kp{grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:.55rem} .kp b{font-size:1.35rem} .kp div{padding:.6rem .7rem;font-size:.78rem} .qh{padding:.7rem .8rem} .qb{padding:0 .8rem .85rem} .qt{font-size:.94rem} .foot{padding:.65rem .8rem;gap:.5rem} .foot .acts{width:100%} .foot .acts .btn{flex:1;text-align:center} .btn{padding:.55rem .85rem} .phead>div{width:100%;display:flex;gap:.45rem;flex-wrap:wrap} .phead>div .btn{flex:1;text-align:center} table{font-size:.83rem} th,td{padding:.4rem .45rem} } /* --- very small phones: 380px and under ----------------------------- */ @media(max-width:380px){ body{font-size:15px} .kp{grid-template-columns:1fr 1fr} .seg label{padding:.45rem .6rem;font-size:.86rem} .auth-brand h1{font-size:1.2rem} } /* --- pen and finger: no hover, bigger targets ----------------------- */ @media(pointer:coarse){ .seg label{min-height:48px;padding:.6rem .9rem} .btn{padding:.65rem 1.1rem} .btn.sm{padding:.45rem .8rem;font-size:.85rem} .nav a{padding:.6rem .55rem} details.guide>summary,details.explain>summary,details.ev>summary{padding:.7rem .85rem} input[type=text],input[type=email],input[type=tel],input[type=date],input[type=number], input[type=password],input[type=search],select{padding:.62rem .65rem} /* Hover tints never stick on a touch screen. */ .seg label:hover{background:var(--card);border-color:var(--line)} .seg label:has(input:checked):hover{background:var(--navy);border-color:var(--navy)} tbody tr:hover{background:transparent} canvas.sig{height:210px} } /* --- landscape phones ------------------------------------------------ */ @media(max-height:480px) and (orientation:landscape){ .bar{position:static} .foot{position:static} .auth{min-height:0} } /* ============================================================ Guided flow: one question open at a time. Answer it and the next unanswered one opens by itself. Without JavaScript every question stays open, so the form still works. ============================================================ */ .guided .q .qb{display:none} .guided .q.open .qb{display:block} .guided .qh{cursor:pointer;position:relative;padding-right:2.4rem} .guided .qh:hover{background:var(--cyan-1)} .guided .q.open .qh{background:var(--cyan-1)} .guided .qh:after{content:"";position:absolute;right:1rem;top:50%; width:.5rem;height:.5rem;border-right:2px solid var(--mute);border-bottom:2px solid var(--mute); transform:translateY(-70%) rotate(45deg);transition:transform .15s} .guided .q.open .qh:after{transform:translateY(-20%) rotate(-135deg)} .guided .qh:focus-visible{outline:3px solid var(--cyan);outline-offset:-3px} /* the question being answered */ .guided .q.open{border-left-color:var(--cyan);box-shadow:0 2px 14px rgba(0,34,68,.13)} .guided .q.open.done{border-left-color:var(--green)} .guided .q.open.need{border-left-color:var(--amber)} /* a collapsed, still-unanswered question reads as waiting rather than wrong */ .guided .q:not(.done):not(.open) .qt{color:var(--mute)} .showall{font-size:.83rem;font-weight:600;background:none;border:0;padding:0; color:var(--cyan-d);cursor:pointer;text-decoration:underline;white-space:nowrap} .showall:hover{color:var(--navy)} /* how many are left, in the footer */ .left{font-size:.83rem;color:var(--mute);font-weight:500} .left.none{color:var(--green);font-weight:600} /* ============================================================ Error pages: say plainly what happened and offer a way back. ============================================================ */ .errpage{min-height:100vh;display:flex;align-items:center;justify-content:center; padding:2rem 1rem;background:var(--paper)} .errcard{width:100%;max-width:580px;background:var(--card);border:1px solid var(--line); border-top:4px solid var(--cyan);border-radius:10px;padding:2rem 2.1rem;box-shadow:var(--shadow)} .errcode{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.12em; color:#fff;background:var(--navy);padding:.25rem .65rem;border-radius:4px;margin-bottom:.9rem} .errcard h1{font-size:1.5rem;line-height:1.25;margin:0 0 .9rem} .errbody{color:var(--mute);font-size:.95rem;line-height:1.65} .errbody p{margin:0 0 .7rem} .errbody ul{margin:.2rem 0 .9rem;padding-left:1.15rem} .errbody li{margin-bottom:.35rem} .errbody b{color:var(--ink)} .errdetail{background:var(--cyan-1);border-left:3px solid var(--cyan);border-radius:0 4px 4px 0; padding:.6rem .8rem;font-size:.9rem;color:var(--ink);margin:0 0 1rem} .erracts{display:flex;gap:.6rem;flex-wrap:wrap;margin:1.3rem 0 0} .errfoot{margin:1.4rem 0 0;padding-top:.9rem;border-top:1px solid var(--line); font-size:.8rem;color:var(--mute);line-height:1.5} @media(max-width:520px){ .errcard{padding:1.4rem 1.2rem} .errcard h1{font-size:1.25rem} .erracts .btn{flex:1;text-align:center} } /* ============================================================ Section navigation The letter stays visible at all times: it is how the questionnaire refers to each section, and how officers refer to it out loud. Completion shows as colour and a bar, never by hiding the letter. ============================================================ */ .nav{padding:.55rem .5rem} .navhead{font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase; color:var(--mute);margin:.3rem .3rem .45rem;display:flex;justify-content:space-between;gap:.5rem} .navhead+.navhead,.nav a+.navhead{margin-top:.8rem;padding-top:.7rem;border-top:1px solid var(--line)} .navhead span{font-weight:700;letter-spacing:.04em;color:var(--cyan-d);text-transform:none} .nav a{display:grid;grid-template-columns:2rem 1fr auto;gap:.5rem;align-items:start; padding:.5rem .45rem;border-radius:6px;text-decoration:none;color:var(--ink);line-height:1.3} .nav a:hover{background:var(--cyan-1)} .nav a[aria-current=page]{background:var(--cyan-1);box-shadow:inset 3px 0 0 var(--cyan)} /* the letter */ .nav .k{display:inline-flex;align-items:center;justify-content:center; min-width:2rem;height:1.55rem;padding:0 .3rem;border-radius:5px; background:var(--na);color:var(--mute);font-weight:800;font-size:.76rem; letter-spacing:.02em;flex:none;border:1px solid transparent} .nav .k.part{background:var(--amberbg);color:var(--amber);border-color:var(--amber)} .nav .k.full{background:var(--greenbg);color:var(--green);border-color:var(--green)} .nav a[aria-current=page] .k{background:var(--navy);color:#fff;border-color:var(--navy)} /* the name, at a size that can actually be read */ .nvt{min-width:0} .nvn{display:block;font-size:.78rem;line-height:1.35;letter-spacing:.005em; color:var(--ink);overflow-wrap:anywhere} .nav a[aria-current=page] .nvn{font-weight:700} .nav a:not([aria-current=page]) .nvn{color:var(--mute)} /* a thin bar instead of a pill: it reads at a glance and costs no width */ .nvb{display:block;height:3px;border-radius:2px;background:var(--na);margin-top:.35rem;overflow:hidden} .nvb i{display:block;height:100%;background:var(--cyan)} .nav .k.full+.nvt .nvb i{background:var(--green)} .nvp{font-size:.7rem;color:var(--mute);font-variant-numeric:tabular-nums; white-space:nowrap;padding-top:.2rem;font-weight:600} @media(max-width:820px){ .navhead{display:none} .nav a{grid-template-columns:auto;gap:.3rem;padding:.45rem .6rem} .nav a .nvt,.nav a .nvp{display:none} .nav .k{min-width:2.2rem;height:2rem} } /* Assessment criteria are written for the assessor, not the officer filling the form. Kept word for word, but visibly a note about the review, not to them. */ details.guide.criteria>summary{background:var(--na);color:var(--mute);font-weight:600} details.guide.criteria>summary:before{border-left-color:var(--mute)} details.guide.criteria{margin-top:-.7rem;border-top:0;border-radius:0 0 7px 7px} details.guide.criteria .gbody{color:var(--mute);font-size:.87rem} /* ============================================================ Wider World Bank palette Navy and cyan carry the frame; these carry meaning. Every one of them clears 4.5:1 with white text, so they can be used on buttons. ============================================================ */ :root{ --go:#00794A; --go-8:#005E39; --go-bg:#E2F1EA; /* done, forward, save */ --info:#00648F; --info-8:#004E70; --info-bg:#E6F5FC; /* read, download, view */ --care:#9A5B00; --care-8:#7A4800; --care-bg:#FBEDD8; /* needs attention */ --stop:#A6192E; --stop-8:#84121F; --stop-bg:#FADEDB; /* destructive */ --file:#5B3E8E; --file-8:#472F70; --file-bg:#EFE9F7; /* documents, uploads */ } @media (prefers-color-scheme:dark){:root{ --go:#4FBF8B; --go-8:#6FCFA1; --go-bg:#0F3A2B; --info:#5FC4EC; --info-8:#8AD6F3; --info-bg:#0A2233; --care:#E5B45C; --care-8:#F0C87A; --care-bg:#3C2F0A; --stop:#EE8E86; --stop-8:#F4A9A2; --stop-bg:#45201D; --file:#B39BE0; --file-8:#C6B3EA; --file-bg:#241B38; }} /* --- button family --------------------------------------------------- */ .btn.go{background:var(--go);border-color:var(--go)} .btn.go:hover{background:var(--go-8);border-color:var(--go-8)} .btn.info{background:var(--info);border-color:var(--info)} .btn.info:hover{background:var(--info-8);border-color:var(--info-8)} .btn.care{background:var(--care);border-color:var(--care)} .btn.care:hover{background:var(--care-8);border-color:var(--care-8)} .btn.danger{background:var(--stop);border-color:var(--stop)} .btn.danger:hover{background:var(--stop-8);border-color:var(--stop-8)} .btn.file{background:var(--file);border-color:var(--file)} .btn.file:hover{background:var(--file-8);border-color:var(--file-8)} .btn.go,.btn.info,.btn.care,.btn.danger,.btn.file{color:#fff} @media (prefers-color-scheme:dark){ .btn.go,.btn.info,.btn.care,.btn.danger,.btn.file{color:#08131B}} /* outline versions, for a row of secondary actions that still reads */ .btn.alt.go{background:var(--go-bg);color:var(--go);border-color:var(--go)} .btn.alt.info{background:var(--info-bg);color:var(--info);border-color:var(--info)} .btn.alt.file{background:var(--file-bg);color:var(--file);border-color:var(--file)} .btn.alt.danger{background:var(--stop-bg);color:var(--stop);border-color:var(--stop)} .btn.alt.go:hover,.btn.alt.info:hover,.btn.alt.file:hover,.btn.alt.danger:hover{filter:brightness(.96)} /* --- tiles, cards and headers keep their own accent ------------------- */ .kp .g2{border-top-color:var(--go)} .kp .a2{border-top-color:var(--care)} .kp .r2{border-top-color:var(--stop)} .kp .f2{border-top-color:var(--file)} .kp .i2{border-top-color:var(--info)} .card.t-go{border-top:3px solid var(--go)} .card.t-info{border-top:3px solid var(--info)} .card.t-care{border-top:3px solid var(--care)} .card.t-file{border-top:3px solid var(--file)} .card.t-navy{border-top:3px solid var(--navy)} /* a highlighted row, for "this one is you" in the guide */ tr.hl>td{background:var(--info-bg);font-weight:600} tr.hl>td:first-child{box-shadow:inset 3px 0 0 var(--info)} /* --- guide lists ------------------------------------------------------ */ .guidelist{margin:.3rem 0 .2rem;padding-left:1.25rem;line-height:1.65} .guidelist li{margin-bottom:.5rem} .guidelist li::marker{color:var(--info);font-weight:700} /* --- status colours used across tables -------------------------------- */ .g{background:var(--go-bg);color:var(--go)} .a{background:var(--care-bg);color:var(--care)} .r{background:var(--stop-bg);color:var(--stop)} /* --- masthead: give each destination its own underline ---------------- */ .bar nav a[aria-current=page]{box-shadow:inset 0 -3px 0 var(--cyan)} .bar nav a.n-go[aria-current=page]{box-shadow:inset 0 -3px 0 #4FBF8B} .bar nav a.n-file[aria-current=page]{box-shadow:inset 0 -3px 0 #B39BE0} .bar nav a.n-care[aria-current=page]{box-shadow:inset 0 -3px 0 #E5B45C} /* ============================================================ Compact pass Lighter table headers, filters in the header row, pastel status chips and tighter density: more on screen, less weight. ============================================================ */ /* --- slimmer masthead, tabs rather than buttons ---------------------- */ .bar-in{padding:.4rem 1rem;gap:.7rem} .bar .mark b{font-size:.88rem} .bar .mark span{font-size:.66rem} .bar nav{gap:0} .bar nav a{padding:.5rem .75rem;border-radius:0;font-size:.85rem; border-bottom:2px solid transparent;color:#C3D5E2} .bar nav a:hover{background:transparent;color:#fff;border-bottom-color:#4E7D9E} .bar nav a[aria-current=page]{background:transparent;color:#fff;font-weight:600; border-bottom-color:var(--cyan);box-shadow:none} .bar nav a.n-go[aria-current=page]{border-bottom-color:#4FBF8B;box-shadow:none} .bar nav a.n-file[aria-current=page]{border-bottom-color:#B39BE0;box-shadow:none} .bar nav a.n-care[aria-current=page]{border-bottom-color:#E5B45C;box-shadow:none} .who{font-size:.76rem} .who b{font-size:.82rem} .bar .signout{padding:.28rem .65rem;font-size:.8rem} /* --- page rhythm ------------------------------------------------------ */ .wrap{padding:1rem 1rem 2.5rem} .phead{margin-bottom:.8rem;gap:.7rem} .phead h1{font-size:1.28rem} .phead .sub{font-size:.85rem} .crumb{font-size:.72rem;margin-bottom:.2rem} .card{padding:.85rem .95rem;margin-bottom:.8rem;border-radius:8px} .chead{margin-bottom:.6rem} h2{font-size:1rem} /* --- KPI tiles: smaller, calmer -------------------------------------- */ .kp{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.6rem;margin-bottom:.8rem} .kp div{padding:.6rem .75rem;font-size:.76rem;border-top-width:2px;border-radius:7px} .kp b{font-size:1.45rem;font-weight:700} /* --- tables: light header, dense rows, sticky first column ----------- */ .scroll{border:1px solid var(--line);border-radius:7px;overflow:auto;max-height:none} .scroll>table{border-radius:0} table{font-size:.83rem} thead th{background:var(--paper);color:var(--mute);border-bottom:1px solid var(--line); font-size:.7rem;letter-spacing:.06em;padding:.5rem .55rem;font-weight:700; position:sticky;top:0;z-index:2} thead th a{color:var(--mute)} th,td{padding:.38rem .55rem;border-bottom:1px solid var(--line)} tbody tr:hover{background:var(--info-bg)} tbody tr:last-child td{border-bottom:0} td.name{font-weight:600;font-size:.85rem} /* a filter row that lives inside the header, Kobo-style */ thead tr.filters th{background:var(--card);padding:.35rem .4rem;position:sticky;top:1.9rem;z-index:2} thead tr.filters input,thead tr.filters select{ width:100%;min-width:0;padding:.3rem .4rem;font-size:.78rem;border-radius:5px; border:1px solid var(--line);background:var(--card);color:var(--ink)} thead tr.filters input::placeholder{color:var(--mute)} /* --- status chips: pastel, squared, quiet ---------------------------- */ .pill{padding:.16rem .5rem;border-radius:5px;font-size:.72rem;font-weight:600; letter-spacing:.01em;border:1px solid transparent} .pill.g{background:var(--go-bg);color:var(--go);border-color:color-mix(in srgb,var(--go) 25%,transparent)} .pill.a{background:var(--care-bg);color:var(--care);border-color:color-mix(in srgb,var(--care) 25%,transparent)} .pill.r{background:var(--stop-bg);color:var(--stop);border-color:color-mix(in srgb,var(--stop) 25%,transparent)} .pill.n{background:var(--na);color:var(--mute);border-color:var(--line)} /* score cells: tint, not blocks of colour */ td.h{font-weight:700;font-size:.82rem;min-width:2.4rem} td.h.g{background:color-mix(in srgb,var(--go-bg) 65%,transparent)} td.h.a{background:color-mix(in srgb,var(--care-bg) 65%,transparent)} td.h.r{background:color-mix(in srgb,var(--stop-bg) 65%,transparent)} td.h.n{background:transparent;color:var(--mute);font-weight:400} /* --- progress bars: thinner ------------------------------------------ */ .bararea{height:5px;min-width:48px;border-radius:3px} .pct{font-size:.7rem;padding:.04rem .38rem} /* --- buttons: a touch smaller in dense areas ------------------------- */ .btn{padding:.45rem .9rem;font-size:.86rem;border-radius:6px} .btn.sm{padding:.24rem .55rem;font-size:.76rem;border-radius:5px} .tools input,.tools select{padding:.36rem .5rem;font-size:.84rem;border-radius:6px} /* --- legend, footnotes ----------------------------------------------- */ .legend{font-size:.76rem;line-height:1.6;margin-top:.6rem} .rowcount{font-size:.76rem;color:var(--mute);font-variant-numeric:tabular-nums} /* --- questionnaire: tighter without crowding ------------------------- */ .secthead{padding:.8rem .95rem;border-radius:8px;margin-bottom:.8rem} .secthead h1{font-size:1.1rem;margin-bottom:.5rem} .secthead .eyebrow{font-size:.68rem} .q{margin-bottom:.6rem;border-radius:7px} .qh{padding:.65rem .85rem} .qb{padding:0 .85rem .85rem} .qt{font-size:.92rem} .qn{min-width:2.3rem;height:1.45rem;font-size:.72rem} .qstate{font-size:.66rem;padding:.14rem .45rem} .seg label{padding:.42rem .7rem;font-size:.86rem;min-height:38px;border-radius:5px} details.guide>summary{padding:.55rem .8rem;font-size:.85rem} details.guide .gbody{padding:.7rem .85rem;font-size:.85rem} .foot{padding:.6rem .85rem;border-radius:8px} @media(pointer:coarse){.seg label{min-height:46px;padding:.55rem .85rem}} /* --- side navigation: tighter ---------------------------------------- */ .nav{padding:.45rem .4rem} .nav a{padding:.4rem .4rem;gap:.45rem;grid-template-columns:1.85rem 1fr auto} .nvn{font-size:.74rem} .nav .k{height:1.4rem;min-width:1.85rem;font-size:.7rem} .navhead{font-size:.64rem;margin:.25rem .3rem .35rem} /* ============================================================ Analysis charts: plain bars, no library and no build step, so they print and work on a phone. ============================================================ */ .chart{display:flex;flex-direction:column;gap:.4rem;margin:.2rem 0 .3rem} .chart.tight{gap:.22rem} .crow{display:grid;grid-template-columns:minmax(120px,15.5rem) 1fr 2.6rem auto; gap:.6rem;align-items:center;font-size:.82rem} .clabel{color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .clabel b{color:var(--cyan-d);margin-right:.25rem} .clabel a{text-decoration:none} .clabel a:hover{text-decoration:underline} .ctrack{background:var(--na);border-radius:3px;height:14px;overflow:hidden;min-width:40px} .ctrack i{display:block;height:100%;border-radius:3px;transition:width .3s} .cval{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;font-size:.82rem} .cnote{font-size:.7rem;color:var(--mute);white-space:nowrap;min-width:5.5rem;text-align:right} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;align-items:start} @media(max-width:900px){.grid2{grid-template-columns:1fr}} @media(max-width:620px){ .crow{grid-template-columns:1fr 2.4rem;grid-template-areas:"label val" "track track";gap:.25rem .5rem} .clabel{grid-area:label;white-space:normal} .cval{grid-area:val} .ctrack{grid-area:track;height:10px} .cnote{display:none} } @media print{.ctrack{border:1px solid #999}.ctrack i{print-color-adjust:exact;-webkit-print-color-adjust:exact}} /* The full review name is long; let the masthead keep it readable. */ .bar .mark b{font-size:.84rem;line-height:1.2;max-width:22rem;white-space:normal} @media(max-width:820px){.bar .mark b{font-size:.78rem;max-width:15rem}} @media(max-width:560px){.bar .mark b{max-width:none}} /* ============================================================ Sign in: one centred card on a quiet background. Navy and cyan as everywhere else. ============================================================ */ .signin{min-height:100vh;display:flex;align-items:center;justify-content:center; padding:2rem 1rem;background:var(--paper)} .signin-card{width:100%;max-width:470px;background:var(--card); border:1px solid var(--line);border-radius:12px;overflow:hidden; box-shadow:0 1px 2px rgba(0,34,68,.06),0 12px 34px rgba(0,34,68,.10)} .signin-top{height:7px;background:var(--navy)} .signin-body{padding:1.7rem 1.9rem 1.6rem} /* mark and name */ .signin-brand{display:flex;gap:.7rem;align-items:center;margin-bottom:1.4rem} .signin-mark{flex:none;width:2.3rem;height:2.3rem;border-radius:8px;background:var(--navy); color:var(--cyan);display:flex;align-items:center;justify-content:center} .signin-names{min-width:0;line-height:1.3} .signin-names b{display:block;font-size:.88rem;color:var(--ink);font-weight:700} .signin-names span{display:block;font-size:.72rem;color:var(--cyan-d); letter-spacing:.06em;margin-top:.15rem} .signin-eyebrow{font-size:.72rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase; color:var(--cyan-d);margin:0 0 .3rem} .signin-body h1{font-size:1.5rem;margin:0 0 .35rem;letter-spacing:-.015em} .signin-lead{color:var(--mute);font-size:.9rem;margin:0} .signin-rule{border:0;border-top:1px solid var(--line);margin:1.15rem 0 1.1rem} /* fields */ .signin-body label{font-size:.85rem;font-weight:600;margin:.85rem 0 .3rem} .signin-body input[type=text],.signin-body input[type=password]{padding:.62rem .7rem;border-radius:7px} .signin-labelrow{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem} .signin-labelrow label{margin-bottom:.3rem} .signin-help{background:none;border:0;padding:0;cursor:pointer;font-size:.8rem; color:var(--cyan-d);text-decoration:underline;font-weight:500} .signin-help:hover{color:var(--navy)} .signin-pw{position:relative} .signin-pw input{padding-right:2.7rem} .signin-eye{position:absolute;right:.3rem;top:50%;transform:translateY(-50%); background:none;border:0;padding:.45rem;cursor:pointer;color:var(--mute); display:flex;align-items:center;border-radius:6px} .signin-eye:hover{color:var(--navy);background:var(--cyan-1)} .signin-eye.on{color:var(--cyan-d)} .signin-note{margin:.7rem 0 0;font-size:.82rem;color:var(--care); background:var(--care-bg);border-left:3px solid var(--care); border-radius:0 5px 5px 0;padding:.55rem .7rem;line-height:1.5} .signin-body .btn{width:100%;margin-top:1.3rem;padding:.7rem;font-size:.95rem;border-radius:7px} .signin-foot{margin:1.3rem 0 0;padding-top:.95rem;border-top:1px solid var(--line); font-size:.78rem;color:var(--mute);line-height:1.5} .signin-foot a{margin-left:.2rem} @media(max-width:480px){ .signin{padding:1.2rem .8rem;align-items:flex-start} .signin-body{padding:1.3rem 1.2rem 1.3rem} .signin-body h1{font-size:1.3rem} .signin-names b{font-size:.82rem} } @media(pointer:coarse){ .signin-body input[type=text],.signin-body input[type=password]{padding:.72rem .75rem} .signin-eye{padding:.6rem} } /* Masthead: an abbreviation that stays on one line, so the bar never wraps. */ .bar .mark b{font-size:.92rem;line-height:1.2;max-width:none;white-space:nowrap;letter-spacing:.01em} @media(max-width:560px){.bar .mark b{font-size:.86rem}} /* ============================================================ Refinement layer Types, surfaces and hairlines, after the National Consolidation Portal. ============================================================ */ body{font-family:var(--font-sans);font-size:15.5px;line-height:1.55; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} /* --- titles and headline figures carry the serif --------------------- */ h1,h2,.kp b,.cval,.errcode,.signin-body h1,.auth-brand h1{font-family:var(--font-display)} h1{font-weight:600;letter-spacing:-.015em;font-size:1.5rem;line-height:1.2} h2{font-weight:600;letter-spacing:-.01em;font-size:1.08rem} h3{font-family:var(--font-sans);font-weight:600;font-size:.92rem;letter-spacing:0} .phead h1{font-size:1.6rem} .secthead h1{font-size:1.24rem;letter-spacing:-.012em} .crumb,.eyebrow,.signin-eyebrow,.navhead{font-family:var(--font-sans)} .tnum,td.h,.cval,.kp b,.rowcount,.bararea+.pct{font-variant-numeric:tabular-nums} /* --- surfaces: hairline edge, real shadow only when lifted ----------- */ .card{border:1px solid var(--hair);border-radius:var(--radius);box-shadow:var(--shadow); background:var(--card)} .card.t-go,.card.t-info,.card.t-care,.card.t-file,.card.t-navy{border-top-width:2px} .kp div{border:1px solid var(--hair);border-top-width:2px;border-radius:var(--radius); box-shadow:var(--shadow);background:var(--card)} .kp b{font-size:1.9rem;font-weight:500;letter-spacing:-.02em;line-height:1.1;margin-bottom:.15rem} .kp div{font-size:.78rem;letter-spacing:.01em} /* --- tables: hairlines, not borders ---------------------------------- */ .scroll{border:1px solid var(--hair);border-radius:var(--radius-sm)} thead th{background:transparent;color:var(--mute);border-bottom:1px solid var(--hair-strong); font-family:var(--font-sans);font-size:.7rem;font-weight:600;letter-spacing:.07em; text-transform:uppercase;padding:.55rem .6rem} th,td{border-bottom:1px solid var(--hair);padding:.45rem .6rem} tbody tr:hover{background:var(--cyan-1)} tbody tr:last-child td{border-bottom:0} thead tr.filters th{background:transparent;border-bottom:1px solid var(--hair-strong)} td.name{font-weight:600} /* --- the bar ---------------------------------------------------------- */ .bar{border-bottom:0;box-shadow:inset 0 -2px 0 var(--cyan)} .bar .mark b{font-family:var(--font-display);font-weight:600;font-size:1rem;letter-spacing:-.005em} .bar nav a{font-size:.86rem;letter-spacing:.005em} /* --- buttons: tighter radius, no heavy shadow ------------------------ */ .btn{border-radius:var(--radius-sm);font-weight:600;letter-spacing:.005em; box-shadow:0 1px 1px rgba(0,34,68,.06)} .btn.alt{box-shadow:none;border-color:var(--hair-strong)} .btn.sm{border-radius:5px} /* --- form controls ---------------------------------------------------- */ input[type=text],input[type=email],input[type=tel],input[type=date],input[type=number], input[type=password],input[type=search],select,textarea{ border:1px solid var(--hair-strong);border-radius:var(--radius-sm);background:var(--card)} label{font-weight:600;font-size:.86rem;letter-spacing:.005em} /* --- question cards --------------------------------------------------- */ .q{border:1px solid var(--hair);border-left-width:3px;border-radius:var(--radius); box-shadow:var(--shadow)} .q.open{box-shadow:var(--shadow-lift)} .qh{background:transparent;border-bottom:1px solid transparent} .guided .q.open .qh,.guided .qh:hover{background:var(--cyan-1)} .qb{border-top:1px solid var(--hair)} .qn{font-family:var(--font-mono);font-weight:500;letter-spacing:.02em;border-radius:5px} .qt{font-size:.95rem} .seg label{border-color:var(--hair-strong);border-radius:var(--radius-sm);font-weight:500} /* --- charts ----------------------------------------------------------- */ .ctrack{background:var(--na);border-radius:4px;height:15px} .ctrack i{border-radius:4px} .cval{font-family:var(--font-display);font-weight:500;font-size:.92rem} .bararea{background:var(--na)} /* --- sign in ---------------------------------------------------------- */ .signin{background:var(--paper)} .signin-card{border:1px solid var(--hair);border-radius:12px;box-shadow:var(--shadow-lift)} .signin-body h1{font-weight:600;letter-spacing:-.02em;font-size:1.6rem} .signin-names b{font-family:var(--font-display);font-weight:600} .signin-rule{border-top-color:var(--hair)} /* --- error pages ------------------------------------------------------ */ .errcard{border:1px solid var(--hair);box-shadow:var(--shadow-lift);border-radius:12px} .errcode{font-family:var(--font-sans);font-weight:700} .errcard h1{font-weight:600;letter-spacing:-.02em} /* --- side navigation --------------------------------------------------- */ .nav{border:1px solid var(--hair)} .nav .k{font-family:var(--font-mono);font-weight:500;border-radius:5px} .nav a[aria-current=page]{box-shadow:inset 3px 0 0 var(--cyan)} /* --- footer bar -------------------------------------------------------- */ .foot{border:1px solid var(--hair);border-radius:var(--radius); box-shadow:0 -2px 12px rgba(0,34,68,.06)} /* --- disclosures -------------------------------------------------------- */ details.guide{border:1px solid var(--hair);border-radius:var(--radius-sm)} details.guide>summary{background:var(--cyan-1);font-family:var(--font-sans)} details.guide.criteria>summary{background:var(--na)} details.explain,details.ev{border-radius:var(--radius-sm)} /* --- pills ------------------------------------------------------------- */ .pill{font-family:var(--font-sans);border-radius:5px;letter-spacing:.015em} .pct{border-radius:5px;font-weight:600} /* --- tabs inside a card (audit trail) --------------------------------- */ .tabs{display:flex;gap:.2rem;border-bottom:1px solid var(--hair-strong);margin:.2rem 0 .9rem} .tabs a{padding:.5rem .85rem;text-decoration:none;color:var(--mute);font-weight:600;font-size:.88rem; border-bottom:2px solid transparent;margin-bottom:-1px;display:flex;align-items:center;gap:.45rem} .tabs a:hover{color:var(--ink)} .tabs a[aria-current=page]{color:var(--navy);border-bottom-color:var(--cyan)} .tabs .rowcount{background:var(--na);border-radius:9px;padding:.05rem .45rem;font-size:.72rem} @media (prefers-color-scheme:dark){.tabs a[aria-current=page]{color:var(--ink)}} /* --- the masthead never wraps ----------------------------------------- Above phone width the bar stays on one line: the navigation scrolls sideways if it has to, rather than pushing the name and Sign out onto a second row and making the bar twice as tall on a small laptop. */ @media(min-width:561px){ .bar-in{flex-wrap:nowrap;gap:.6rem} .bar .mark{flex:none} .bar nav{flex:1 1 auto;min-width:0;overflow-x:auto;flex-wrap:nowrap; scrollbar-width:none;-ms-overflow-style:none} .bar nav::-webkit-scrollbar{display:none} .bar .sp{display:none} .who{flex:none;max-width:12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .bar form{flex:none} } @media(min-width:561px) and (max-width:1100px){ .bar nav a{padding:.5rem .55rem;font-size:.82rem} .who b{font-size:.8rem} .who{font-size:0} /* keep the name, drop the role line */ .who b{font-size:.8rem} .bar .mark b{font-size:.88rem} } /* --- KPI tiles that filter the table on click -------------------------- */ .kp-filters button{text-align:left;font:inherit;cursor:pointer;color:var(--mute); transition:box-shadow .12s,border-color .12s,transform .12s} .kp-filters button:hover{box-shadow:var(--shadow-lift);transform:translateY(-1px)} .kp-filters button.on{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy),var(--shadow-lift)} .kp-filters button.on b{color:var(--navy)} .kp-filters button:focus-visible{outline:3px solid var(--cyan);outline-offset:2px} /* ============================================================ Register layer The National Consolidation Portal's geometry, in this app's colours: a 14px base, 13px registers on an 8px rhythm, label-strip headers, dot pills, filter chips, pill buttons and KPI tiles with the label above the figure. Everything here overrides the layers above it. ============================================================ */ html{font-size:14px} body{font-size:14.5px;line-height:1.5} .wrap{max-width:1280px;padding:18px 20px 44px} h1,h2{font-family:var(--font-display);font-weight:500} h2{font-size:17px;letter-spacing:-.01em;margin-bottom:8px} .small{font-size:12.5px} .legend{font-size:12px;line-height:1.6} /* --- masthead: quieter type, a pill to sign out ------------------------ */ .bar-in{padding:6px 20px;gap:14px} .bar .mark b{font-size:15.5px;letter-spacing:-.01em} .bar nav a{font-size:12.5px;font-weight:500;letter-spacing:.01em;padding:11px 11px} .bar nav a[aria-current=page]{font-weight:600} .who{font-size:11px} .who b{font-size:12.5px} .bar .signout{border-radius:999px;height:30px;padding:0 13px;font-size:12px;font-weight:600; border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.06)} .bar .signout:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.35)} /* --- page head: eyebrow with a dot, display title, one line under ------ */ .phead{align-items:flex-end;gap:14px;margin-bottom:18px} .crumb{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--cyan-d);margin:0 0 7px} .crumb::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan);flex:none} .phead h1{font-family:var(--font-display);font-weight:500;font-size:clamp(24px,2.4vw,32px); letter-spacing:-.025em;line-height:1.05;text-wrap:balance} .phead .sub{font-size:13.5px;margin-top:7px;line-height:1.45} .phead>div:not(.t){display:flex;gap:8px;flex-wrap:wrap;align-items:center} /* --- buttons: pills ----------------------------------------------------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 16px; border-radius:999px;font-size:13px;font-weight:600;line-height:1;white-space:nowrap; background:linear-gradient(180deg,var(--navy-8),var(--navy));border:1px solid transparent;color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 24px -12px rgba(0,34,68,.8)} .btn:hover{background:linear-gradient(180deg,#0A4478,var(--navy-8));color:#fff} .btn.alt{background:rgba(255,255,255,.75);border-color:var(--hair-strong);color:var(--ink);box-shadow:none} .btn.alt:hover{background:var(--card);border-color:var(--hair-strong);color:var(--ink)} .btn.go,.btn.info,.btn.care,.btn.danger,.btn.file{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 24px -14px rgba(0,34,68,.6)} .btn.alt.go,.btn.alt.info,.btn.alt.file,.btn.alt.danger{box-shadow:none} .btn.sm{height:30px;padding:0 12px;font-size:12px;border-radius:999px} .btn.off{opacity:.45;pointer-events:none} .signin-body .btn,.auth-form .btn{height:42px;font-size:14px;border-radius:999px} @media (prefers-color-scheme:dark){ .btn{background:linear-gradient(180deg,var(--cyan),var(--cyan-d));color:#04121C;box-shadow:none} .btn:hover{background:linear-gradient(180deg,#6FD0F4,var(--cyan));color:#04121C} .btn.alt{background:rgba(255,255,255,.05);color:var(--ink)} .btn.alt:hover{background:rgba(255,255,255,.09);color:var(--ink)}} /* --- form controls ------------------------------------------------------ */ input[type=text],input[type=email],input[type=tel],input[type=date],input[type=number], input[type=password],input[type=search],select,textarea{padding:8px 10px;border-radius:8px;font-size:13.5px} label{font-size:12.5px;font-weight:600;margin:10px 0 4px} .ok,.err,.warn{border-radius:12px;padding:10px 16px;font-size:13.5px;line-height:1.5;border:1px solid transparent;margin:0 0 14px} .ok{border-color:rgba(0,121,74,.28)}.err{border-color:rgba(166,25,46,.28)}.warn{border-color:rgba(154,91,0,.28)} /* --- cards: soft corners, a long low shadow ----------------------------- */ .card{border-radius:16px;padding:18px 20px;margin-bottom:16px;border:1px solid var(--hair); box-shadow:0 1px 2px rgba(0,34,68,.04),0 24px 48px -36px rgba(0,34,68,.25)} .card>h2,.chead h2,.sec-h h2{font-family:var(--font-display);font-weight:500;font-size:17px;letter-spacing:-.01em;margin:0} .card>h2{margin-bottom:10px} .chead{margin:0 0 10px;gap:10px} /* a register sits flush inside its card: the header strip and rows run edge to edge */ .card.flush{padding:0;overflow:hidden} .card.flush>.scroll{border:0;border-radius:0} .card.flush>.chead,.card.flush>.sec-h{padding:16px 20px 10px;margin:0} .card.flush>.legend{padding:10px 20px 14px;margin:0;border-top:1px solid var(--hair)} .card.flush>.tools{padding:10px 20px 12px;margin:0;border-top:1px solid var(--hair); background:color-mix(in srgb,var(--paper) 55%,var(--card))} .card.flush>.ok,.card.flush>.err,.card.flush>.warn{margin:0;border-radius:0;border-width:0;border-top-width:1px} .card.flush>p{padding:0 20px} .sec-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .sec-h .more,.more-link{font-size:12px;font-weight:600;color:var(--cyan-d);white-space:nowrap;text-decoration:none} .more-link:hover{text-decoration:underline} /* --- KPI tiles: label above, figure below, a note under ---------------- */ .kp{gap:12px;margin-bottom:16px;grid-template-columns:repeat(auto-fit,minmax(172px,1fr))} .kp>*{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start; padding:16px 18px;border:1px solid var(--hair);border-top-width:1px;border-radius:16px;background:var(--card); box-shadow:0 1px 2px rgba(0,34,68,.04),0 24px 48px -36px rgba(0,34,68,.25);color:var(--mute);font-size:12px; text-align:left;--dot:var(--cyan);--tint:rgba(0,159,218,.14)} .kp>*::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(420px 170px at 100% 0%,var(--tint),transparent 60%)} .kp .k{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600;letter-spacing:.12em; text-transform:uppercase;color:var(--mute);position:relative} .kp .k::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dot);flex:none} .kp b{font-family:var(--font-display);font-weight:500;font-size:clamp(24px,2.2vw,32px);letter-spacing:-.02em; line-height:1;margin:10px 0 0;color:var(--ink);position:relative} .kp b small{font-family:var(--font-sans);font-size:15px;font-weight:400;color:var(--mute);letter-spacing:0} .kp .d{display:block;margin-top:9px;font-size:12px;color:var(--mute);position:relative;line-height:1.4} .kp .g2{--dot:var(--go);--tint:rgba(0,121,74,.14)} .kp .a2{--dot:var(--care);--tint:rgba(154,91,0,.14)} .kp .r2{--dot:var(--stop);--tint:rgba(166,25,46,.12)} .kp .f2{--dot:var(--file);--tint:rgba(91,62,142,.14)} .kp .i2{--dot:var(--info);--tint:rgba(0,100,143,.14)} .kp-filters button{color:var(--mute)} .kp-filters button:hover{transform:none;box-shadow:0 1px 2px rgba(0,34,68,.06),0 24px 48px -30px rgba(0,34,68,.35); border-color:var(--hair-strong)} .kp-filters button.on{border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)} .kp-filters button.on .k,.kp-filters button.on b{color:var(--navy)} @media(max-width:560px){.kp{gap:8px}.kp>*{padding:12px 14px}.kp b{font-size:22px}} /* --- registers: label-strip header, 13px rows, one baseline ------------- */ .scroll{border:1px solid var(--hair);border-radius:12px} table{font-size:13px;line-height:1.3} thead th{background:var(--paper);color:var(--mute);font-size:10.5px;font-weight:600;letter-spacing:.12em; text-transform:uppercase;padding:10px 12px;border-bottom:1px solid var(--hair)} th,td{padding:9px 12px;vertical-align:middle;border-bottom:1px solid var(--hair)} th:first-child,td:first-child{padding-left:18px} th:last-child,td:last-child{padding-right:18px} tbody tr:hover{background:rgba(0,34,68,.025)} td.name{font-weight:600;font-size:13.5px} td.h{font-size:12.5px} .ct{display:block;font-weight:600} .cs{display:block;font-size:11.5px;line-height:15px;color:var(--mute);font-weight:400} .mono{font-family:var(--font-mono);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap} thead tr.filters th{padding:6px 8px;background:var(--card);top:auto} thead tr.filters th:first-child{padding-left:12px} thead tr.filters input,thead tr.filters select{height:30px;padding:0 8px;font-size:12.5px;border-radius:8px} .bararea{height:5px;border-radius:999px;background:var(--na);min-width:72px} .bararea i{border-radius:999px;background:linear-gradient(90deg,var(--cyan),var(--cyan-d))} .bararea i.full{background:var(--go)} @media (prefers-color-scheme:dark){tbody tr:hover{background:rgba(255,255,255,.03)}} /* --- pills: a dot, then the word ---------------------------------------- */ .pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 10px;font-size:11.5px; font-weight:600;border:0;white-space:nowrap;letter-spacing:0;line-height:1.35} .pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none} .pill.g{background:#E6F1EA;color:#2F6B4A} .pill.r{background:#FBE8E2;color:#B3361F} .pill.a{background:#FBF0D9;color:#9A6200} .pill.i{background:#E5EDF5;color:#2C5F8A} .pill.n{background:#EDF1F5;color:var(--mute)} @media (prefers-color-scheme:dark){ .pill.g{background:#16241D;color:#4AB881}.pill.r{background:#2B1A17;color:#F0A89E} .pill.a{background:#2A2118;color:#D9A441}.pill.i{background:#1A2634;color:#74A8E0} .pill.n{background:#242932;color:var(--mute)}} /* --- chips: which group to list ----------------------------------------- */ .chips{display:flex;flex-wrap:wrap;gap:6px} .chip{display:inline-flex;align-items:center;border-radius:999px;border:1px solid var(--hair-strong); background:rgba(255,255,255,.6);padding:6px 13px;font-size:12px;font-weight:600;color:var(--ink); cursor:pointer;text-decoration:none;line-height:1.2} .chip:hover{background:var(--card);color:var(--ink)} .chip.on,.chip[aria-current=page]{background:var(--ink);border-color:var(--ink);color:var(--paper)} .chip .n{margin-left:5px;opacity:.55;font-variant-numeric:tabular-nums} @media (prefers-color-scheme:dark){.chip{background:rgba(255,255,255,.04)}} /* --- filter bars --------------------------------------------------------- */ .tools{gap:8px 10px;align-items:flex-end;margin-bottom:12px} .tools .f{gap:4px} .tools label{font-size:10.5px;font-weight:600;letter-spacing:.12em;margin:0} .tools input,.tools select{height:34px;padding:0 10px;font-size:13px;border-radius:8px;min-width:150px} .tools .btn{height:34px} .tools .small{align-self:center} /* --- pagination: newer and older, and where you are --------------------- */ .pager{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap; padding:10px 20px;border-top:1px solid var(--hair);font-size:12.5px;color:var(--mute)} .card:not(.flush)>.pager,.card:not(.flush)>div>.pager{padding:12px 0 0;border-top:0} .pager .pg{display:flex;gap:6px} /* --- tabs kept for anything still using them ---------------------------- */ .tabs a{font-size:13px;padding:8px 12px} @media print{.card{box-shadow:none;border:0}.kp>*::before{display:none}} /* --- colour, after KoboToolbox: a tinted band on every register, a coloured stripe on every row that carries a state, tiles washed with their own colour, and the active chip in navy. ------------------------ */ thead th{background:var(--cyan-1);color:var(--cyan-d);border-bottom:1px solid rgba(0,100,143,.18)} thead tr.filters th{background:var(--card)} .kp>*{background:linear-gradient(135deg,var(--wash) 0%,var(--card) 72%);--wash:#E6F5FC} .kp .g2{--wash:#E2F1EA}.kp .a2{--wash:#FBEEDB}.kp .r2{--wash:#FADEDB}.kp .f2{--wash:#EFE9F7}.kp .i2{--wash:#E6F5FC} .kp>*::before{background:radial-gradient(360px 150px at 100% 0%,var(--tint),transparent 62%)} .kp .k{color:var(--ink);opacity:.72} .chip.on,.chip[aria-current=page]{background:var(--navy);border-color:var(--navy);color:#fff} .chip.on .n,.chip[aria-current=page] .n{opacity:.75} tr.s-g>td:first-child{box-shadow:inset 3px 0 0 var(--go)} tr.s-a>td:first-child{box-shadow:inset 3px 0 0 var(--care)} tr.s-r>td:first-child{box-shadow:inset 3px 0 0 var(--stop)} tr.s-i>td:first-child{box-shadow:inset 3px 0 0 var(--cyan)} tr.s-f>td:first-child{box-shadow:inset 3px 0 0 var(--file)} tr.s-n>td:first-child{box-shadow:inset 3px 0 0 var(--hair-strong)} .pill.f{background:#EFE9F7;color:#5B3E8E} .pill.b{background:var(--cyan-1);color:var(--cyan-d)} .card.t-go,.card.t-info,.card.t-care,.card.t-file,.card.t-navy{border-top-width:3px} .sec-h .chips+span{font-size:12px;color:var(--mute)} @media (prefers-color-scheme:dark){ thead th{background:var(--cyan-1);color:var(--cyan-d)} .kp>*{--wash:#0E2433}.kp .g2{--wash:#0F3A2B}.kp .a2{--wash:#40320A}.kp .r2{--wash:#45201D}.kp .f2{--wash:#241B38} .pill.f{background:#241B38;color:#B39BE0}} .ct,.cs{white-space:nowrap} td.ans{overflow-wrap:anywhere;min-width:12rem} .bararea{display:inline-block;width:88px;vertical-align:middle;margin-left:8px} /* --- questionnaire on the same register: rounder cards, pill states ------ */ .secthead{border-radius:16px;padding:14px 20px;border-top-width:3px} .secthead .eyebrow{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.14em;font-weight:600} .secthead .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan)} .secthead h1{font-size:19px;letter-spacing:-.015em} .secthead .meter .bararea{margin-left:0;width:auto;height:7px} .q{border-radius:14px;border-left-width:4px} .qh{padding:12px 16px} .qb{padding:0 16px 16px} .qn{border-radius:999px;min-width:2.4rem;height:1.55rem;font-size:11px} .qstate{border-radius:999px;font-size:10.5px;letter-spacing:.08em;padding:3px 9px} .q.done .qstate{background:#E6F1EA;color:#2F6B4A} .q.need .qstate{background:#FBF0D9;color:#9A6200} details.guide{border-radius:12px} details.guide>summary{font-size:13px;padding:9px 14px} details.guide .gbody{font-size:13.5px;padding:12px 14px} .seg label{border-radius:999px;padding:7px 14px;min-height:36px;font-size:13px} details.explain,details.ev{border-radius:10px} details.ev{border-radius:10px} .nav{border-radius:16px;padding:8px} .nav a{border-radius:10px;font-size:12.5px} .navhead{font-size:10.5px;letter-spacing:.12em;font-weight:600;color:var(--cyan-d)} .nav .k{width:1.7rem;height:1.7rem;font-size:11px} .nav .nvb{height:4px;border-radius:999px} .foot{border-radius:16px;padding:10px 16px} .pct{border-radius:999px;font-size:11px;padding:2px 8px;font-weight:600} .pct.done{background:#E6F1EA;color:#2F6B4A}.pct.part{background:#FBF0D9;color:#9A6200} .box{border-radius:0 10px 10px 0;font-size:13.5px} canvas.sig{border-radius:12px} /* The chip count shares a class name with the grey status tint; keep it plain. */ .chip .n{background:transparent;color:inherit;padding:0;border-radius:0;font-weight:600} /* --- the file control: the browser's grey button becomes one of ours ---- */ input[type=file]{display:block;width:100%;padding:8px;border:1px dashed var(--hair-strong);border-radius:12px; background:var(--paper);font-size:13px;color:var(--mute);cursor:pointer} input[type=file]:hover{border-color:var(--file)} input[type=file]::file-selector-button{display:inline-block;height:32px;padding:0 14px;margin-right:12px;border-radius:999px; border:0;background:var(--file);color:#fff;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer} input[type=file]::file-selector-button:hover{background:var(--file-8)} input[type=file]:focus-visible{outline:3px solid var(--cyan);outline-offset:2px} /* --- someone else is on this section ------------------------------------ */ .others{display:none;align-items:center;gap:10px;margin:0 0 12px;padding:9px 14px;border-radius:12px; background:#FBF0D9;color:#7A4800;border:1px solid rgba(154,91,0,.28);font-size:13px;line-height:1.45} .others.on{display:flex} .others::before{content:"";width:8px;height:8px;border-radius:50%;background:#B7791F;flex:none; box-shadow:0 0 0 4px rgba(183,121,31,.18)} /* --- phone masthead: name and Sign out on one row, one scrolling row of links --- */ @media(max-width:560px){ .bar-in{flex-wrap:wrap;gap:4px 10px;padding:8px 12px 0} .bar .mark{flex:1 1 auto;min-width:0} .bar .mark b{font-size:15px} .who{display:none} .bar form{order:2;flex:none} .bar nav{order:3;width:100%;flex-wrap:nowrap;overflow-x:auto;gap:0;padding:0; scrollbar-width:none;-ms-overflow-style:none;margin-top:2px} .bar nav::-webkit-scrollbar{display:none} .bar nav a{flex:none;padding:9px 10px;font-size:12.5px} .bar .signout{height:28px;padding:0 11px} } /* --- notes from the review team, checks, trend bars ------------------------ */ .note{background:#FBF0D9;border:1px solid rgba(154,91,0,.28);border-radius:10px;padding:8px 10px;margin:0 0 6px;font-size:12.5px;line-height:1.45} .note.done{background:var(--paper);border-color:var(--hair);color:var(--mute)} .note .cs{margin-top:3px} .linkbtn{background:none;border:0;padding:0;font:inherit;font-size:inherit;color:var(--cyan-d);cursor:pointer;text-decoration:underline} .addnote>summary{cursor:pointer;font-size:12px;font-weight:600;color:var(--cyan-d);list-style:none;padding:4px 0} .addnote>summary::-webkit-details-marker{display:none} .addnote textarea{min-height:3.4rem;font-size:12.5px;margin-top:6px} .qnote{margin:0 0 10px;padding:9px 12px;border-radius:10px;background:#FBF0D9;border:1px solid rgba(154,91,0,.28); font-size:13px;line-height:1.5;color:#5A3A00} .qnote b{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#9A5B00;margin-bottom:2px} .qflag{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:#9A5B00;background:#FBF0D9;border-radius:999px;padding:2px 8px;margin-left:6px;vertical-align:middle;white-space:nowrap} .qflag::before{content:"";width:6px;height:6px;border-radius:50%;background:#B7791F} td.h a.cell{display:block;color:inherit;text-decoration:none;margin:-9px -12px;padding:9px 12px} td.h a.cell:hover{text-decoration:underline} .trend{display:grid;grid-template-columns:minmax(200px,1.4fr) repeat(3,1fr);gap:6px 14px;align-items:center;font-size:12.5px} .trend .th{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-d)} .trend .lbl{color:var(--ink)} .trend .lbl b{color:var(--cyan-d);margin-right:4px} .trend .v{display:flex;align-items:center;gap:8px} .trend .v i{display:block;height:8px;border-radius:999px;background:linear-gradient(90deg,var(--cyan),var(--cyan-d));flex:none} .trend .v span{font-variant-numeric:tabular-nums;white-space:nowrap} .trend .rate .v i{background:var(--go)} @media(max-width:700px){.trend{grid-template-columns:1fr 1fr 1fr 1fr;font-size:11.5px}.trend .lbl{grid-column:1/-1;margin-top:6px}} .qreply{margin:8px 0 0;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.7);border:1px solid rgba(154,91,0,.18);color:var(--ink)} .qreply b{color:var(--cyan-d)} .note .reply{margin:6px 0 0;padding:6px 8px;border-radius:8px;background:var(--cyan-1);border:1px solid rgba(0,100,143,.18);color:var(--ink)} .note .reply b{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-d);display:block;margin-bottom:2px} .qnote .addnote>summary{margin-top:6px} /* ============================================================ The rail A deep navy column on the left with the menu, the person and the closing date; the page sits beside it. On a phone the rail folds into a top strip with a menu button. ============================================================ */ :root{--barh:0px;--railw:232px} .shell{display:grid;grid-template-columns:var(--railw) minmax(0,1fr);min-height:100vh} .rail{position:sticky;top:0;height:100vh;overflow:auto;display:flex;flex-direction:column;color:#fff; background:radial-gradient(700px 420px at 0% 100%,#0A4478 0%,transparent 60%),linear-gradient(180deg,var(--navy),#001A33); border-radius:0 24px 24px 0;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent} .rail-top{display:flex;align-items:center;justify-content:space-between;padding:18px 16px 8px} .brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;min-width:0} .brand-mark{flex:none;width:32px;height:32px;border-radius:9px;background:rgba(255,255,255,.08);display:grid;place-items:center} .brand b{font-family:var(--font-display);font-weight:600;font-size:15px;letter-spacing:-.01em;white-space:nowrap} .rail-toggle{display:none} .rail-nav{padding:8px 12px 12px;flex:1} .rail-h{display:block;font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.45);margin:14px 10px 6px} .rail-nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;color:#B9CCDA;font-size:13px;font-weight:500;text-decoration:none;margin:2px 0;line-height:1.3} .rail-nav a:hover{background:rgba(255,255,255,.07);color:#fff} .rail-nav a[aria-current=page]{background:rgba(255,255,255,.10);color:#fff;font-weight:600;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)} .rail-nav .ic{flex:none;width:16px;height:16px;border-radius:5px;background:rgba(255,255,255,.18)} .rail-nav a[aria-current=page] .ic{background:var(--cyan)} .rail-card{margin:18px 4px 4px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px 14px;font-size:12px;color:#C3D5E2;line-height:1.5} .rail-card b{display:block;font-family:var(--font-sans);font-weight:600;font-size:13px;color:#fff;margin-bottom:4px} .rail-card.soon{background:rgba(229,180,92,.16);border-color:rgba(229,180,92,.35)}.rail-card.soon b{color:#F0C87A} .rail-card.past{background:rgba(238,142,134,.14);border-color:rgba(238,142,134,.35)}.rail-card.past b{color:#F4A9A2} .rail-foot{padding:12px 16px 18px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:space-between;gap:10px} .rail-who{min-width:0;line-height:1.25}.rail-who b{display:block;font-size:12.5px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rail-who span{font-size:11px;color:#B9CCDA;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rail-foot form{margin:0;flex:none} .rail .signout{color:#fff;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);border-radius:999px;height:30px;padding:0 12px;font-size:12px;font-weight:600;cursor:pointer} .rail .signout:hover{background:rgba(255,255,255,.12)} .main{min-width:0} .wrap{max-width:1240px;margin:0 auto;padding:22px 26px 44px} /* the sticky pieces no longer sit under a top bar */ .secthead{top:10px}.nav{top:10px;max-height:calc(100vh - 28px)} @media print{.rail{display:none}.shell{display:block}} /* --- folded into a top strip on phones and small tablets --- */ @media(max-width:820px){ .shell{display:block} .rail{position:sticky;top:0;height:auto;border-radius:0;overflow:visible;z-index:20;display:block} .rail-top{padding:10px 14px} .rail-toggle{display:inline-flex;flex-direction:column;gap:4px;background:transparent;border:1px solid rgba(255,255,255,.25);border-radius:8px;padding:8px;cursor:pointer} .rail-toggle span{display:block;width:16px;height:2px;background:#fff;border-radius:2px} .rail-nav{display:none;padding:0 12px 10px} .rail-foot{display:none;padding:10px 14px 14px} .rail.open .rail-nav,.rail.open .rail-foot{display:block} .rail.open .rail-foot{display:flex} .rail-card{margin:12px 4px 4px} .wrap{padding:14px 14px 40px} } /* --- county home: hero, one row per section, documents as folders --------- */ .home{display:grid;grid-template-columns:minmax(0,1fr) 170px;gap:22px;align-items:start} .home.nodocs{grid-template-columns:1fr} .hero{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:16px;align-items:center;padding:24px 26px} .hero h1{font-size:clamp(22px,2.2vw,28px);margin:6px 0 8px;text-wrap:balance} .hero .sub{color:var(--mute);font-size:13.5px;margin:0 0 16px} .hero .acts{display:flex;gap:8px;flex-wrap:wrap} .hero-art{width:240px;height:150px} .rows-h{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:18px 0 8px} .rows .row{display:grid;grid-template-columns:44px minmax(0,1.6fr) 1fr 1fr 1fr auto;gap:12px;align-items:center;padding:12px 14px;margin:6px 0;border-radius:12px; background:var(--card);border:1px solid var(--hair);box-shadow:0 1px 2px rgba(0,34,68,.03)} .rows .row:hover{border-color:var(--hair-strong)} .rows .ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-family:var(--font-mono);font-size:12px;font-weight:500;color:#fff;background:var(--mute)} .rows .row.d .ic{background:var(--go)}.rows .row.p .ic{background:var(--care)}.rows .row.other .ic{background:var(--navy)} .rows .tt{min-width:0}.rows .h{font-weight:600;font-size:13.5px;display:block;line-height:1.3}.rows .s{font-size:11.5px;color:var(--mute);display:block;margin-top:2px} .rows .st{font-size:11px;color:var(--mute);line-height:1.2}.rows .st b{display:block;font-size:13.5px;color:var(--ink);font-weight:600} .rows .st.st-ok b{color:var(--go)}.rows .st.st-warn b{color:var(--care)} .docs{padding-top:4px} .docs .folder{display:block;width:100%;height:56px;border-radius:12px;margin:12px 0 6px;background:linear-gradient(180deg,var(--navy-8),var(--navy));position:relative;text-decoration:none} .docs .folder::before{content:"";position:absolute;left:0;top:-6px;width:44%;height:12px;border-radius:6px 6px 0 0;background:var(--navy-8)} .docs .folder.add{background:var(--cyan-1);border:1.5px dashed var(--cyan-2);display:grid;place-items:center;color:var(--cyan-d);font-size:22px} .docs .folder.add::before{display:none} .docs span{display:block;font-size:11.5px;color:var(--mute);line-height:1.35} @media(max-width:1024px){.home{grid-template-columns:1fr}.docs{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:0 12px}.docs .rows-h{grid-column:1/-1}} @media(max-width:820px){ .hero{grid-template-columns:1fr;padding:18px}.hero-art{display:none} .rows .row{grid-template-columns:36px minmax(0,1fr) auto;gap:10px} .rows .st{display:none}.rows .st:first-of-type{display:block} .rows .ic{width:30px;height:30px} } /* score cells never wrap their digits; the title block on a phone stays stacked */ td.h,td.h a.cell{white-space:nowrap;overflow-wrap:normal} @media(max-width:560px){.phead>div.t{display:block;width:100%}} .pager .pg button[disabled]{opacity:.45;pointer-events:none} .card.flush>.pager{border-top:1px solid var(--hair)} td.name{white-space:nowrap;overflow-wrap:normal} @media(max-width:1100px){:root{--railw:200px}.rail-nav a{font-size:12.5px;padding:8px 9px}} /* --- the reviewer's walk through a county: the county's own form, read-only --- */ .rv{display:grid;grid-template-columns:250px minmax(0,1fr);gap:18px;align-items:start} .rvnav{position:sticky;top:10px;max-height:calc(100vh - 28px);overflow:auto;padding:8px} .rvnav a{display:grid;grid-template-columns:1.9rem 1fr auto;gap:8px;align-items:center;padding:7px 8px;border-radius:9px;text-decoration:none;color:var(--ink);font-size:12.5px} .rvnav a:hover{background:var(--cyan-1)} .rvnav a[aria-current=page]{background:var(--cyan-1);font-weight:600;box-shadow:inset 3px 0 0 var(--cyan)} .rvnav .k{display:inline-flex;align-items:center;justify-content:center;width:1.7rem;height:1.7rem;border-radius:50%;background:var(--na);color:var(--mute);font-family:var(--font-mono);font-size:11px;font-weight:500} .rvnav a[aria-current=page] .k{background:var(--navy);color:#fff} .rvnav .k.g{background:#E6F1EA;color:#2F6B4A}.rvnav .k.a{background:#FBF0D9;color:#9A6200}.rvnav .k.r{background:#FBE8E2;color:#B3361F} .rvnav .nvn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rvnav .nvp{font-family:var(--font-mono);font-size:11px;color:var(--mute)} .rvnav .nvp b{color:var(--ink)} .rvnav .badge{display:inline-block;min-width:16px;padding:0 5px;border-radius:999px;background:#FBF0D9;color:#9A6200;font-size:10px;font-weight:700;text-align:center;margin-left:4px} .rq{background:var(--card);border:1px solid var(--hair);border-left:4px solid var(--hair-strong);border-radius:14px;margin:0 0 12px;box-shadow:var(--shadow);overflow:hidden} .rq.g{border-left-color:var(--go)}.rq.a{border-left-color:var(--care)}.rq.r{border-left-color:var(--stop)} .rq .qh{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:start;padding:12px 16px} .rq .qt{font-size:14.5px;font-weight:500;line-height:1.45} .rq .qb{padding:0 16px 14px;border-top:1px solid var(--hair)} .rq .qb>*:first-child{margin-top:12px} .opts{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 4px} .opt{border:1.5px solid var(--hair-strong);border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:500;color:var(--mute);background:#fff} .opt.sel{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:600} .opt.sel.g{background:var(--go);border-color:var(--go)}.opt.sel.r{background:var(--stop);border-color:var(--stop)}.opt.sel.a{background:var(--care);border-color:var(--care)} .rq .lbl{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin:12px 0 4px} .rq .txt{font-size:13.5px;line-height:1.5;white-space:pre-wrap} .rq .txt.empty{color:var(--mute);font-style:italic} .rq .evrow{display:grid;grid-template-columns:1fr 1fr;gap:12px} .rq .fy3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .rq .fy3 div{background:var(--paper);border:1px solid var(--hair);border-radius:8px;padding:8px 10px} .rq .fy3 label{margin:0 0 2px;font-size:10.5px;color:var(--cyan-d);text-transform:uppercase;letter-spacing:.06em;font-weight:700} .rq .fy3 b{font-family:var(--font-mono);font-weight:500;font-size:14px} .rq .files a{display:inline-block;margin:4px 8px 0 0;font-size:12.5px} .rq .notesbox{margin-top:12px;padding-top:10px;border-top:1px dashed var(--hair-strong)} .rq .pts{font-family:var(--font-mono);font-size:11px;font-weight:600;border-radius:999px;padding:3px 9px;white-space:nowrap;align-self:center} .rq .pts.g{background:#E6F1EA;color:#2F6B4A}.rq .pts.a{background:#FBF0D9;color:#9A6200}.rq .pts.r{background:#FBE8E2;color:#B3361F}.rq .pts.n{background:#EDF1F5;color:var(--mute)} @media(max-width:900px){.rv{grid-template-columns:1fr}.rvnav{position:static;max-height:none;display:flex;gap:4px;overflow-x:auto}.rvnav a{flex:none;display:flex}.rvnav .nvn,.rvnav .nvp{display:none}.rq .evrow{grid-template-columns:1fr}} /* ============================================================ Collapsible rail (icons only) and the steps strip ============================================================ */ .rail-nav a .ic{flex:none;width:18px;height:18px;border-radius:0;background:none;opacity:.8} .rail-nav a[aria-current=page] .ic{opacity:1;color:var(--cyan)} .rail-collapse{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;cursor:pointer} .rail-collapse:hover{background:rgba(255,255,255,.12)} .rail-collapse .ic{width:16px;height:16px} @media(min-width:821px){ .shell.collapsed{--railw:68px} .shell.collapsed .rail{border-radius:0 18px 18px 0} .shell.collapsed .rail-top{flex-direction:column;gap:10px;padding:14px 0 6px;align-items:center} .shell.collapsed .brand b,.shell.collapsed .rail-h,.shell.collapsed .rail-nav a span,.shell.collapsed .rail-card,.shell.collapsed .rail-who{display:none} .shell.collapsed .rail-nav{padding:6px 10px} .shell.collapsed .rail-nav a{justify-content:center;padding:11px 0} .shell.collapsed .rail-foot{flex-direction:column;padding:10px 8px 14px} .shell.collapsed .rail .signout{font-size:0;width:34px;height:34px;padding:0;border-radius:50%;position:relative} .shell.collapsed .rail .signout::after{content:"⏻";font-size:14px;position:absolute;inset:0;display:grid;place-items:center} .shell.collapsed .rail-collapse .ic{transform:rotate(180deg)} } .rail-nav a span{white-space:nowrap} /* --- steps strip: one step per section, scrolls sideways if it must --- */ .steps{display:flex;gap:0;overflow-x:auto;padding:14px 18px 6px;background:var(--card);border:1px solid var(--hair);border-radius:14px;margin-bottom:14px; scrollbar-width:none;box-shadow:var(--shadow)} .steps::-webkit-scrollbar{display:none} .steps .step{position:relative;flex:1 0 96px;min-width:96px;padding:0 10px 14px 6px;text-decoration:none;color:var(--mute)} .steps .n{display:block;font:600 11px var(--font-mono);letter-spacing:.06em} .steps .l{display:block;font-size:11.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .steps .eta{display:block;font-size:10px;color:var(--mute)} .steps .d{position:absolute;left:6px;right:0;bottom:0;height:2px;background:var(--hair)} .steps .d::before{content:"";position:absolute;left:0;top:-5px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--hair-strong)} .steps .step.done .d,.steps .step.done .d::before{background:var(--go);border-color:var(--go)} .steps .step.done .n,.steps .step.done .l{color:var(--go)} .steps .step.part .d::before{background:#fff;border-color:var(--care)}.steps .step.part .n,.steps .step.part .l{color:var(--care)} .steps .step.now .d{background:repeating-linear-gradient(90deg,var(--cyan) 0 6px,transparent 6px 10px)} .steps .step.now .d::before{background:#fff;border:3px solid var(--cyan);width:14px;height:14px;top:-6px} .steps .step.now .n,.steps .step.now .l{color:var(--navy)} .steps .step:hover .l{color:var(--navy)} /* the questionnaire page no longer has a left column */ .grid.nonav{grid-template-columns:1fr} .rv.nonav{grid-template-columns:1fr} /* --- the journey: where the return is on its way --- */ .journey{display:flex;flex-wrap:wrap;align-items:center;gap:8px 0;padding:12px 18px;background:var(--card);border:1px solid var(--hair);border-radius:999px;margin-bottom:14px;box-shadow:var(--shadow)} .jst{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mute);white-space:nowrap} .jst b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--na);font-size:11px;font-weight:600;color:var(--ink)} .jst.done b{background:var(--go);color:#fff} .jst.now{color:var(--ink);font-weight:600} .jst.now b{background:linear-gradient(145deg,var(--cyan),var(--navy));color:#fff;box-shadow:0 0 0 5px rgba(0,159,218,.16)} .jst .ln{width:clamp(14px,3vw,48px);height:1px;margin:0 10px;background:var(--hair-strong)} .jst.done .ln{background:var(--go)} @media(max-width:560px){.journey{border-radius:14px}.jst .ln{width:10px;margin:0 6px}} /* The rail stays put while the page scrolls. overflow-x:hidden on html/body makes the body a scroll container and sticky loses its anchor; clip does the same job of stopping sideways scroll without that side effect. */ html,body{overflow-x:clip} .shell{align-items:start} .rail{position:sticky;top:0;height:100vh;height:100dvh} @media(max-width:820px){.rail{height:auto}} .jumpsel{height:32px;border-radius:999px;padding:0 12px;font-size:12.5px;font-weight:600;max-width:280px;border:1px solid var(--hair-strong);background:var(--card);color:var(--ink)} .secthead .meter .jumpsel{margin-left:auto} .kp.tight{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:12px} .kp.tight>*{padding:12px 14px}.kp.tight b{font-size:22px} @media(max-width:560px){.secthead .meter .jumpsel{margin-left:0;width:100%}} /* ============================================================ Registers, tidied: soft banding, icon buttons with a tooltip, actions grouped at the right edge, rename behind a pencil. ============================================================ */ tbody tr:nth-child(even){background:rgba(0,34,68,.022)} tbody tr:hover{background:var(--cyan-1)} @media (prefers-color-scheme:dark){tbody tr:nth-child(even){background:rgba(255,255,255,.025)}} th,td{padding:8px 12px} td.acts,th.acts{text-align:right;white-space:nowrap;padding-right:14px} .acts .grp{display:inline-flex;gap:4px;align-items:center;justify-content:flex-end} .acts form{display:inline} /* an icon button: 30px, hairline, colour by what it does; the label shows on hover or focus */ .ib{position:relative;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px; border:1px solid var(--hair-strong);background:var(--card);color:var(--mute);cursor:pointer;text-decoration:none;padding:0;vertical-align:middle} .ib .ic{width:15px;height:15px} .ib:hover,.ib:focus-visible{color:var(--navy);border-color:var(--navy);background:var(--cyan-1)} .ib.go:hover{color:var(--go);border-color:var(--go);background:var(--go-bg)} .ib.info:hover{color:var(--info);border-color:var(--info);background:var(--info-bg)} .ib.file:hover{color:var(--file);border-color:var(--file);background:var(--file-bg)} .ib.care:hover{color:var(--care);border-color:var(--care);background:var(--care-bg)} .ib.danger{color:var(--stop)}.ib.danger:hover{color:#fff;border-color:var(--stop);background:var(--stop)} .ib.solid{background:var(--navy);border-color:var(--navy);color:#fff}.ib.solid:hover{background:var(--navy-8)} .ib[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%) translateY(3px); background:var(--navy);color:#fff;font:500 11px/1.3 var(--font-sans);padding:5px 8px;border-radius:6px;white-space:nowrap; opacity:0;pointer-events:none;transition:opacity .12s,transform .12s;z-index:5;box-shadow:0 6px 18px -8px rgba(0,34,68,.6)} .ib[data-tip]::before{content:"";position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--navy);opacity:0;transition:opacity .12s} .ib[data-tip]:hover::after,.ib[data-tip]:focus-visible::after,.ib[data-tip]:hover::before,.ib[data-tip]:focus-visible::before{opacity:1;transform:translateX(-50%)} .ib[disabled]{opacity:.4;pointer-events:none} /* rename lives behind the pencil */ tr .rename{display:none;gap:6px;align-items:center;margin-top:6px} tr.editing .rename{display:flex} tr .rename input{height:30px;padding:0 8px;font-size:12.5px;border-radius:8px;min-width:0} .cell-edit{display:flex;flex-direction:column} .cell-edit .ct{display:flex;align-items:center;gap:6px} .cell-edit .ib{width:24px;height:24px;border:0;background:transparent;color:var(--mute)} .cell-edit .ib:hover{color:var(--navy);background:var(--cyan-1)} .cell-edit .ib .ic{width:13px;height:13px} select.mini{height:30px;padding:0 8px;font-size:12.5px;border-radius:8px;min-width:0} @media(pointer:coarse){.ib{width:36px;height:36px}.ib[data-tip]::after{display:none}} .import-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:6px} .istep{border:1px solid var(--hair);border-radius:12px;padding:12px 14px;background:var(--paper);font-size:12.5px;color:var(--mute);line-height:1.5} .istep b{display:block;color:var(--ink);font-size:13px;margin-bottom:4px} .istep em{font-style:normal;color:var(--ink);font-weight:600} .btn .ic{width:15px;height:15px} @media(max-width:900px){.import-steps{grid-template-columns:1fr}} /* the collapse chevron sits fully inside the rail, whatever the brand's length */ .rail-top{padding-right:14px;gap:8px} .brand{flex:1 1 auto;min-width:0} .brand b{overflow:hidden;text-overflow:ellipsis;display:block} .rail-collapse{flex:none} /* --- the printed/read copy of a return: every table shares one column grid --- */ .atbl{table-layout:fixed;width:100%} .atbl th:first-child,.atbl td:first-child{width:4.6rem;white-space:nowrap;font-family:var(--font-mono);font-weight:500;font-size:12px} .atbl th:nth-child(2),.atbl td:nth-child(2){width:44%} .atbl td{overflow-wrap:anywhere;vertical-align:top} .atbl td b{font-family:var(--font-sans)} @media(max-width:700px){.atbl{table-layout:auto}.atbl th:nth-child(2),.atbl td:nth-child(2){width:auto;min-width:200px}} @media print{.atbl th:nth-child(2),.atbl td:nth-child(2){width:42%}} /* --- a county's profile header, tiles in one row, score against target --- */ .prof-card{padding:0;margin-bottom:14px} .prof{display:flex;gap:16px;align-items:center;padding:18px 22px;flex-wrap:wrap} .crest{flex:none;width:56px;height:56px;border-radius:14px;background:linear-gradient(135deg,var(--navy),var(--cyan-d));color:#fff;display:grid;place-items:center;font:600 20px var(--font-display);letter-spacing:.02em;box-shadow:0 8px 20px -10px rgba(0,34,68,.6)} .prof-t{flex:1 1 320px;min-width:0} .prof-t .crumb{margin-bottom:2px} .prof-t h1{margin:0 0 6px;font-size:clamp(22px,2.2vw,28px)} .prof-meta{display:flex;gap:8px 12px;align-items:center;flex-wrap:wrap;font-size:12.5px;color:var(--mute)} .prof-meta .m .mono{color:var(--ink)} .prof-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-left:auto} .kp.six{grid-template-columns:repeat(6,minmax(0,1fr))} .kp.tight .k{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block} .kp.tight .k::before{display:inline-block;margin-right:7px;vertical-align:1px} @media(max-width:1180px){.kp.six{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:560px){.kp.six{grid-template-columns:repeat(2,minmax(0,1fr))}} .target{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center;padding:14px 20px;margin-bottom:14px} .target b{font:500 26px var(--font-display);line-height:1} .target span{display:block;font-size:12px;color:var(--mute);margin-top:2px} .tbar{position:relative;height:14px;background:var(--paper);border-radius:999px;overflow:visible;margin-top:6px} .tbar i{position:absolute;left:0;top:0;bottom:0;border-radius:999px} .tbar em{position:absolute;top:-6px;width:2px;height:26px;background:var(--stop)} .tbar s{position:absolute;top:-6px;width:2px;height:26px;background:var(--navy);text-decoration:none} .tlab{display:flex;justify-content:space-between;font-size:10.5px;color:var(--mute);margin-top:8px} @media(max-width:560px){.target{grid-template-columns:1fr}}