/* Kirsh Philanthropy Project Reporting (KFPR). Visual direction A: white cards on #f6f9fc, indigo #635bff, left sidebar, pill filters,
   quiet tables. System font stack only: no remote fonts, scripts or images. No text below 10 px anywhere (charts: see src/web/charts.ts). */
html,body{margin:0;padding:0;min-height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:400;font-size:14px;line-height:1.45;color:#0a2540;background:#f6f9fc;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-weight:600;margin:0;letter-spacing:-.01em}
h3{font-size:14px;margin-bottom:8px}
.maroon{color:#5a52f0}.muted{color:#697386}.small{font-size:12.5px}.hidden{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* shell: left navigation and page bar */
.navchk{position:absolute;opacity:0;pointer-events:none}
.sidenav{position:fixed;top:0;left:0;bottom:0;width:224px;background:#fff;border-right:1px solid #e3e8ee;padding:14px 10px 10px;z-index:110;display:flex;flex-direction:column}
.brand{display:flex;align-items:center;gap:9px;padding:6px 8px 12px;font-weight:700;color:#0a2540;font-size:16px;letter-spacing:.02em}
.brand svg{display:block;flex:none}
.nav{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#c5cbe6 #fff}
.nav a{display:flex;align-items:center;gap:9px;padding:5px 10px;margin:0;border-radius:6px;color:#425466;font-size:13.5px}
.nav a:hover{background:#f6f9fc}
.nav a.cur{background:#f0f0ff;color:#5a52f0;font-weight:600}
.nav small{display:block;text-transform:uppercase;letter-spacing:.06em;font-size:10.5px;color:#697386;padding:8px 10px 3px}
.nav .ico{opacity:.85;flex:none;width:16px;height:16px}
.nav a.soon{color:#697386;gap:6px;padding-right:4px;font-size:13px}.nav a.soon.cur,.nav a.soon.cur .tagsoon{color:#5a52f0}
.tagsoon{margin-left:auto;padding-left:2px;font-size:10px;line-height:1.4;color:#697386;font-style:italic;flex:none}
.acct{flex:none;border-top:1px solid #e3e8ee;margin-top:6px;padding-top:6px;font-size:13px}
.acct .who{display:flex;align-items:center;gap:9px;padding:3px 10px 5px;color:#0a2540}
.acct .who b{display:block;font-weight:600;font-size:13px;line-height:1.2}
.acct .who span.r{display:block;font-size:12px;color:#697386;line-height:1.2}
.acct a,.acct .linkbtn{display:block;width:100%;text-align:left;padding:4px 10px;border-radius:6px;color:#425466;font-size:13px;background:none;border:0;font-family:inherit;cursor:pointer}
.acct a:hover,.acct .linkbtn:hover{background:#f6f9fc}
.acct a.cur{color:#5a52f0;font-weight:600}
.acct form{margin:0}
.avatar{width:28px;height:28px;border-radius:50%;background:#c9c7ff;display:inline-block;position:relative;overflow:hidden;flex:none}
.avatar:before{content:"";position:absolute;left:9px;top:5px;width:10px;height:10px;border-radius:50%;background:#fff}
.avatar:after{content:"";position:absolute;left:5px;top:17px;width:18px;height:16px;border-radius:50%;background:#fff}
.pagebar{position:fixed;top:0;left:224px;right:0;height:64px;background:#fff;border-bottom:1px solid #e3e8ee;display:flex;align-items:center;gap:12px;padding:0 28px;z-index:100}
.pagebar h1{font-size:20px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1}
.navtoggle{display:none;border:1px solid #e3e8ee;border-radius:6px;padding:6px 8px;color:#0a2540;cursor:pointer;line-height:0}
.searchfield{display:flex;align-items:center;gap:8px;border:1px solid #e3e8ee;background:#fff;border-radius:6px;padding:0 12px;color:#697386;width:260px;height:36px;flex:none;margin:0}
.searchfield:focus-within{border-color:#635bff;box-shadow:0 0 0 3px #f0f0ff}
.searchfield input{border:0;outline:none;background:none;flex:1;min-width:0;font:inherit;font-size:13.5px;color:#0a2540}
.scrim{display:none}
.shellmain{margin-left:224px;padding-top:64px;min-height:100vh}
.content{padding:24px 28px 80px;max-width:1500px}
.pagehead{display:flex;align-items:baseline;gap:14px;margin-bottom:10px;flex-wrap:wrap}
.pagehead h1{font-size:20px}
.asof{margin-left:auto;font-size:12px;color:#697386}
.crumb{font-size:12.5px;color:#697386}

/* form controls */
.filters{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:flex-end;margin:6px 0 16px;padding:12px 14px;background:#fff;border:1px solid #e3e8ee;border-radius:8px}
.filters label{display:block;font-size:11px;color:#697386;margin:0 0 3px 10px}
.filters .row{margin:0}
.pill{height:34px;border:1px solid #e3e8ee;border-radius:999px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23697386' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 12px center;padding:0 32px 0 13px;appearance:none;-webkit-appearance:none;outline:none;color:#3c4257;min-width:130px;max-width:100%;font-family:inherit;font-size:13px}
input.pill{background-image:none;padding-right:13px}
.pill:focus{border-color:#635bff;box-shadow:0 0 0 3px #f0f0ff}
.btn{display:inline-block;border:1px solid #635bff;border-radius:6px;padding:7px 14px;background:#635bff;color:#fff;font-family:inherit;font-size:14px;font-weight:500;line-height:1.3;cursor:pointer}
.btn:hover{background:#3d37b8;border-color:#3d37b8}
.btn.maroon-bg{background:#635bff;border-color:#635bff}.btn.maroon-bg:hover{background:#3d37b8}
.btn.ghost{background:#fff;color:#3c4257;border:1px solid #e3e8ee}.btn.ghost:hover{background:#f6f9fc}
.btn.small{padding:4px 11px;font-size:13px}
.btn.on{background:#635bff;color:#fff}
.btn.off{background:#fff;color:#3c4257;border:1px solid #e3e8ee}
.btn.block{display:block;width:100%;margin-top:14px;text-align:center}
.seg{display:inline-flex;gap:0}.seg .btn{border-radius:0;padding:5px 14px}.seg .btn:first-child{border-radius:6px 0 0 6px}.seg .btn:last-child{border-radius:0 6px 6px 0}
.linkm{color:#5a52f0}.linkm:hover{text-decoration:underline}
.field{margin:12px 0}.field label{display:block;font-size:12.5px;color:#697386;margin-bottom:4px}
.field input,.field select{width:100%;height:40px;border:1px solid #e3e8ee;border-radius:6px;padding:0 11px;background:#fff;outline:none;font-family:inherit;font-size:14px;color:#0a2540}
.field input:focus,.field select:focus{border-color:#635bff;box-shadow:0 0 0 3px #f0f0ff}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.spacer{flex:1}

/* cards and tiles */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin:0 0 16px}
.kpi,.card{background:#fff;border:1px solid #e3e8ee;border-radius:8px;box-shadow:0 1px 2px rgba(10,37,64,.06),0 2px 6px rgba(10,37,64,.04);padding:16px 18px;min-width:0}
.card{margin-bottom:16px}
.kpi .t{font-size:12.5px;color:#697386}
.kpi .v{font-size:21px;font-weight:600;letter-spacing:-.02em;margin-top:6px}
.kpi .s{font-size:12px;color:#697386;margin-top:3px}
.cardhead{display:flex;align-items:center;gap:10px;margin-bottom:8px}.cardhead h3{margin:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.grid2>.card,.grid3>.card,.grid4>.card{margin-bottom:0}
.sec-title{font-size:15px;margin:22px 0 8px}
.empty{padding:48px 20px;text-align:center;color:#697386}.empty h3{font-size:16px;color:#0a2540;margin-bottom:8px}
.card .empty{padding:24px 12px}
.notice{padding:10px 14px;border-radius:6px;margin:0 0 14px;font-size:14px}
.notice.error{background:#fde2e4;color:#9b1c2c}.notice.ok{background:#d7f7c2;color:#05603a}.notice.info{background:#f0f0ff;color:#3d37b8;border:1px solid #c9c7ff}
.tag{display:inline-block;padding:1px 9px;border-radius:999px;font-size:11.5px;background:#eef2f7;color:#3c4257}
.tag.green{background:#d7f7c2;color:#05603a}.tag.amber{background:#fdeccb;color:#8a5a00}.tag.red{background:#fde2e4;color:#9b1c2c}.tag.gray{background:#eef2f7;color:#3c4257}
.besteff{display:inline-block;font-size:12px;background:#f0f0ff;color:#3d37b8;border:1px solid #c9c7ff;border-radius:999px;padding:4px 11px;margin:0 0 12px}

/* tables */
table.t{border-collapse:collapse;width:100%;background:#fff;font-size:13.5px;border:1px solid #e3e8ee;border-radius:8px;overflow:hidden}
table.t th,table.t td{border:0;border-bottom:1px solid #e3e8ee;padding:10px 14px;text-align:left;vertical-align:top}
table.t th{background:#fafbfc;font-weight:500;color:#697386;font-size:12px;white-space:nowrap}
table.t th a{color:#697386}table.t th a.on{color:#5a52f0;font-weight:600}
table.t tr:last-child td{border-bottom:0}
table.t tbody tr:hover td{background:#f6f9fc}
td.num,th.num{text-align:right}
table.t.center td,table.t.center th{text-align:center;padding:8px 8px}
table.t td.lbl{background:#fafbfc;color:#3c4257;text-align:left}
.tablewrap{overflow-x:auto;border:1px solid #e3e8ee;border-radius:8px;background:#fff;margin-bottom:8px}
.tablewrap table.t{border:0;border-radius:0}
.rg{background:#d7f7c2;color:#05603a}.ra{background:#fdeccb;color:#8a5a00}.rr{background:#fde2e4;color:#9b1c2c}
.rlegend{display:flex;gap:14px;align-items:center;font-size:12.5px;margin:10px 0 18px;color:#3c4257;flex-wrap:wrap}
.rlegend i{display:inline-block;width:14px;height:14px;vertical-align:middle;margin-right:6px;border-radius:3px}
.gridfoot{display:flex;gap:16px;align-items:center;margin-top:10px;font-size:13px;color:#697386;flex-wrap:wrap}
.gridfoot b{color:#0a2540}

/* charts: server-rendered SVG, drawn at 1:1 or larger (see src/web/charts.ts) */
.chartbox{overflow-x:auto}
svg.chart{display:block;max-width:none;width:100%;height:auto}
.donutwrap{display:flex;flex-direction:column;align-items:center;gap:8px}
.donutwrap svg.chart{width:auto}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;margin-top:8px;color:#3c4257}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{width:11px;height:11px;border-radius:50%;display:inline-block;flex:none}
.legend.col{flex-direction:column;align-items:flex-start}
.hbar{display:flex;align-items:center;gap:10px;margin:12px 0;font-size:13px}
.hbar .nm{width:110px;color:#3c4257;flex:none}
.hbar .tr{flex:1;height:22px;background:#eef2f7;border-radius:11px;overflow:hidden;display:flex;min-width:120px}
.hbar .tr i{display:flex;align-items:center;justify-content:center;height:100%;font-style:normal;font-size:12px;color:#fff;min-width:0}
.bigcount{font-size:26px;font-weight:600;margin-top:48px;text-align:center}

/* tabs */
.tabs{display:flex;gap:2px;border-bottom:1px solid #e3e8ee;margin:10px 0 18px;overflow-x:auto;white-space:nowrap}
.tabs a{padding:10px 14px;font-size:13.5px;color:#697386;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a:hover{color:#0a2540}
.tabs a.active{color:#5a52f0;border-bottom-color:#635bff;font-weight:600}

/* project page */
.kv{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:8px 28px;font-size:13.5px}
.kv div b{font-weight:500;color:#697386;margin-right:6px}
.formsplit{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start}
.flist{background:#fff;border:1px solid #e3e8ee;border-radius:8px;overflow:hidden}
.flist a{display:block;padding:8px 14px;border-bottom:1px solid #e3e8ee;font-size:13.5px}
.flist a:hover{background:#f6f9fc}.flist a.on{background:#f0f0ff;color:#5a52f0}
.flist .grp{padding:8px 14px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#697386;background:#fafbfc;border-bottom:1px solid #e3e8ee}
.mask{color:#697386;font-style:italic}
.kmz{border:1px dashed #c5cbe6;background:#fafbfc;padding:12px 16px;color:#3c4257;font-size:13px;margin-top:16px;border-radius:8px}

/* sign in and one-time pages */
.loginwrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:30px;background:radial-gradient(circle at 20% 10%,#e8e7ff 0,transparent 40%),radial-gradient(circle at 85% 90%,#dff4ff 0,transparent 38%),#f6f9fc}
.logincard{width:420px;max-width:100%;background:#fff;border:1px solid #e3e8ee;border-radius:12px;box-shadow:0 12px 36px rgba(10,37,64,.12);padding:34px 36px 30px;text-align:center}
.logincard h1{font-size:20px;line-height:1.25;margin:14px 0 6px}
.logincard p{color:#697386;margin:0 0 16px;font-size:13.5px}
.logincard .field{text-align:left}
.block{display:block;width:100%;margin-top:18px;padding:11px;font-size:15px;text-align:center}
.onetime{max-width:560px;margin:60px auto;background:#fff;padding:32px;border:1px solid #e3e8ee;border-radius:12px;box-shadow:0 12px 36px rgba(10,37,64,.12)}
.onetime h1{font-size:22px;margin-bottom:10px}
.secrets{list-style:none;padding:0;margin:14px 0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;font-size:21px;letter-spacing:.04em}
.secrets:has(li:only-child){display:block;text-align:center}
.inline{display:inline}.inline form{display:inline}
.setupkey{font-size:20px;letter-spacing:.08em;background:#f0f0ff;padding:12px 16px;border-radius:6px;text-align:center;word-break:break-all}

/* the mockup's filter strip: a bar across the top of the page, flush with the content edges (style.css .sidebar) */
.stripbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 10px;padding:14px 28px;margin:-24px -28px 16px;background:#fff;border-bottom:1px solid #e3e8ee}
.stripbar h2{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#697386;font-weight:600;margin:0 4px 0 0;padding:0;border:0;align-self:center}
.stripbar .pill{width:auto;min-width:150px}
.stripbar label.dupl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.stripbar .btn{margin:0}

/* up to a 13 inch laptop: the sidebar stays, the content is a little tighter */
@media (max-width:1366px){.content{padding:20px 22px 70px}.stripbar{padding:12px 22px;margin:-20px -22px 16px}.pagebar{padding:0 22px}.searchfield{width:220px}}
@media (max-width:1180px){.grid4{grid-template-columns:repeat(2,1fr)}.formsplit{grid-template-columns:240px 1fr}}

/* tablet (820 px) and narrower: the sidebar becomes a drawer opened by the menu button (a checkbox, no script) */
@media (max-width:980px){
  .sidenav{transform:translateX(-100%);transition:transform .2s;box-shadow:0 0 30px rgba(10,37,64,.2)}
  .navchk:checked~.sidenav{transform:none}
  .navchk:checked~.scrim{display:block;position:fixed;inset:0;background:rgba(10,37,64,.35);z-index:105}
  .pagebar{left:0;padding:0 16px}
  .navtoggle{display:inline-flex}
  .shellmain{margin-left:0}
  .content{padding:16px 16px 70px}
  .stripbar{padding:12px 16px;margin:-16px -16px 16px}
  .searchfield{width:190px}
  .grid2,.grid3,.grid4,.formsplit{grid-template-columns:1fr}
}
@media (max-width:560px){.searchfield{width:130px}.pagebar .btn{display:none}}

.soonbtn{color:#697386;display:inline-flex;gap:6px;align-items:center}.soonbtn .tagsoon{margin-left:0}

/* grids with a list of views (Forms, Sections) */
.gside h3{font-size:14px;margin-bottom:6px}
.gside h4{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#697386;margin:14px 0 4px}
.vlist{list-style:none;margin:0;padding:0}
.vlist li{margin:0}.vlist li a{display:block;padding:5px 8px;border-radius:6px;font-size:13px;color:#425466}
.vlist li a:hover{background:#f6f9fc}.vlist li a.active{background:#f0f0ff;color:#5a52f0;font-weight:600}
.vrow{display:flex;align-items:center;gap:4px}.vrow a{flex:1;min-width:0}.vrow form{margin:0}
.linkbtn.small{background:none;border:0;color:#5a52f0;cursor:pointer;font:inherit;font-size:12px;padding:2px 4px}
.vsave{margin-top:14px;display:flex;flex-direction:column;gap:6px;border-top:1px solid #e3e8ee;padding-top:10px}
.gmain{min-width:0}

/* form page */
.formhead{display:flex;align-items:flex-start;gap:16px;margin:6px 0 14px;flex-wrap:wrap}.formhead>div:first-child{flex:1;min-width:0}
.formhead h2{font-size:18px}.formtype{font-size:15px;color:#5a52f0;margin-top:2px}
.formpage{display:grid;grid-template-columns:1fr 220px;gap:16px;align-items:start}
.fsec{margin-bottom:16px}.fsec h4{font-size:15px;color:#0a2540;margin-bottom:6px}
.toc{position:sticky;top:76px;background:#fff;border:1px solid #e3e8ee;border-radius:8px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;max-height:calc(100vh - 90px);overflow-y:auto}
.toc a{font-size:13px;color:#5a52f0}.toc a:hover{text-decoration:underline}
@media (max-width:980px){.formpage{grid-template-columns:1fr}.toc{position:static}}

/* calendar (links, no script) */
.cal-top{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.cal-nav,.cal-views{display:flex;background:#fff;border:1px solid #e3e8ee;border-radius:6px;overflow:hidden}
.cal-nav .off{display:inline-block;padding:7px 14px;font-size:13.5px;color:#a3acb9;background:#f6f9fc;cursor:not-allowed}
.cal-nav a,.cal-views a,.cal-today{display:inline-block;color:#3c4257;padding:7px 14px;font-size:13.5px;background:#fff}
.cal-today{border:1px solid #e3e8ee;border-radius:6px}
.cal-nav a:hover,.cal-views a:hover,.cal-today:hover{background:#f6f9fc}
.cal-views a.active{background:#f0f0ff;color:#5a52f0;font-weight:600}
.cal-title{flex:1;text-align:center;font-size:18px;font-weight:600;color:#0a2540;min-width:180px}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-top:1px solid #e3e8ee;border-left:1px solid #e3e8ee;background:#fff;border-radius:8px;overflow:hidden}
.cal-grid>div{border-right:1px solid #e3e8ee;border-bottom:1px solid #e3e8ee;min-height:104px;padding:4px 4px 3px;overflow:hidden;position:relative}
.cal-grid .dow{min-height:0;text-align:center;font-size:12px;color:#697386;padding:8px;background:#fafbfc;font-weight:500}
.cal-grid .out .dn{color:#6b7587}.cal-grid .dn{font-size:13px;padding:0 4px}.cal-grid .today,.cal-week .today{background:#f0f0ff}
.ev{display:block;font-size:12px;line-height:1.25;padding:2px 6px;margin:2px 0;border-radius:4px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev.visit{background:#635bff}.ev.maint{background:#3d37b8}.ev.sched{background:#e3e8ee;color:#3c4257}
.more{display:block;font-size:12px;color:#3c4257;padding:1px 6px}.more:hover{color:#5a52f0;text-decoration:underline}
.cal-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid #e3e8ee;background:#fff;border-radius:8px;overflow:hidden}
.cal-week>div{border-right:1px solid #e3e8ee;min-height:300px;padding:6px}.cal-week>div:last-child{border-right:0}
.cal-grid>.outside,.cal-week>.outside{background:#f6f9fc}.cal-week .wh{text-align:center;font-size:13px;padding:8px 0;border-bottom:1px solid #e3e8ee;margin:-6px -6px 6px;background:#fafbfc}
.cal-list{background:#fff;border:1px solid #e3e8ee;border-radius:8px;overflow:hidden}
.cal-list h4{background:#fafbfc;padding:8px 14px;font-size:13px;color:#3c4257;border-bottom:1px solid #e3e8ee;margin:0}
.cal-list .li{display:flex;gap:12px;padding:8px 14px;border-bottom:1px solid #e3e8ee;font-size:13.5px;align-items:center}
.cal-list .li i{width:10px;height:10px;border-radius:50%;flex:none}
.cal-legend{display:flex;gap:22px;margin-top:16px;font-size:13px;flex-wrap:wrap;color:#3c4257}
.cal-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:middle}
@media (max-width:980px){.cal-grid>div{min-height:70px}.cal-week{grid-template-columns:1fr}}

/* project tabs: forms list with groups, system design */
.flist details>summary{display:flex;justify-content:space-between;gap:8px;padding:8px 14px;border-bottom:1px solid #e3e8ee;font-size:13.5px;cursor:pointer;list-style:none}
.flist details>summary::-webkit-details-marker{display:none}
.flist details>summary:hover{background:#f6f9fc}
.flist a.sub{padding-left:26px;background:#fcfcff}
.subtabs{display:flex;gap:2px;border-bottom:1px solid #e3e8ee;margin:0 0 10px}.subtabs span{padding:6px 14px;font-size:13px;color:#697386;border-bottom:2px solid transparent;margin-bottom:-1px}.subtabs .active{color:#5a52f0;border-bottom-color:#635bff;font-weight:600}
.frow{display:grid;grid-template-columns:60% 40%;padding:6px 0;border-bottom:1px solid #eef2f7;font-size:13.5px}.frow .k{color:#425466}
.grid2.sd{grid-template-columns:340px 1fr;align-items:start}
@media (max-width:980px){.grid2.sd{grid-template-columns:1fr}}

/* grid toolbar, views drawer and menus (F74): details elements, no script */
/* The views drawer: closed below 1500 px (as an overlay, so it never pushes the grid down or squeezes its columns) and open from 1500 px (a
   220 px column), as in the mockup. No script: the checkbox #gside-toggle is visually hidden but focusable (Tab, Space), and flips whatever the
   default is for the width. The label is the visible 'Views' button. */
.gridwrap{display:grid;grid-template-columns:1fr;grid-template-areas:"tog" "main";gap:8px 16px;align-items:start;position:relative}
.gtoggle{position:absolute;opacity:0;width:1px;height:1px;margin:0;left:0;top:0;pointer-events:none}
.gtoggle-btn{grid-area:tog;justify-self:start;display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13.5px;font-weight:600;color:#0a2540;border:1px solid #e3e8ee;border-radius:999px;background:#fff;padding:4px 12px 4px 5px;min-height:34px}
.gtoggle-btn:hover{background:#f6f9fc;color:#5a52f0}
.gtoggle:focus+.gtoggle-btn{outline:2px solid #635bff;outline-offset:2px}
.gtoggle-btn .circ{width:24px;height:24px;border-radius:50%;border:1px solid #e3e8ee;display:inline-flex;align-items:center;justify-content:center;color:#697386;flex:none}
.gtoggle-btn .circ::before{content:"\203A"}.gtoggle:checked+.gtoggle-btn .circ::before{content:"\2039"}
.gtoggle-btn .gcount{font-weight:400;color:#697386}
.vt-hide{display:none}.gtoggle:checked+.gtoggle-btn .vt-show{display:none}.gtoggle:checked+.gtoggle-btn .vt-hide{display:inline}
.gside{display:none;grid-area:tog;background:#fff;border:1px solid #e3e8ee;border-radius:8px;padding:14px;width:260px;max-width:calc(100vw - 32px);max-height:70vh;overflow-y:auto;position:absolute;top:40px;left:0;z-index:50;box-shadow:0 10px 26px rgba(10,37,64,.16)}
.gtoggle:checked~.gside{display:block}
.gside>.gt{font-size:14px;font-weight:600;color:#0a2540;margin-bottom:8px}
.gmain{grid-area:main}
@media (min-width:1500px){
  .gridwrap{grid-template-columns:220px 1fr;grid-template-areas:"tog tog" "side main"}
  .gside{display:block;grid-area:side;position:sticky;top:76px;width:auto;max-height:calc(100vh - 90px);box-shadow:none;z-index:auto}
  .gtoggle:checked~.gside{display:none}
  .gtoggle:checked~.gmain{grid-column:1/-1}
  .vt-hide{display:inline}.vt-show{display:none}
  .gtoggle:checked+.gtoggle-btn .vt-show{display:inline}.gtoggle:checked+.gtoggle-btn .vt-hide{display:none}
  .gtoggle-btn .circ::before{content:"\2039"}.gtoggle:checked+.gtoggle-btn .circ::before{content:"\203A"}
}
.gside input.vs{width:100%;height:32px;border:1px solid #e3e8ee;border-radius:6px;padding:0 10px;margin-bottom:6px;background:#f6f9fc;font:inherit;font-size:13px}
.toolbar{display:flex;align-items:center;gap:6px;margin:6px 0 10px;flex-wrap:wrap}
.tgroup{display:flex;gap:2px}
.tmenu{position:relative}
.tmenu>summary{list-style:none;cursor:pointer;padding:7px 12px;font-size:13.5px;color:#3c4257;border-radius:6px;line-height:1.15}
.tmenu>summary::-webkit-details-marker{display:none}
.tmenu>summary:hover,.tmenu[open]>summary{background:#f6f9fc;color:#5a52f0}
.tmenu .menu{position:absolute;top:100%;left:0;margin-top:4px;background:#fff;border:1px solid #e3e8ee;border-radius:8px;box-shadow:0 8px 24px rgba(10,37,64,.16);min-width:220px;z-index:60;padding:4px}
.tmenu .menu a,.tmenu .menu button{display:block;width:100%;text-align:left;border:0;background:none;padding:7px 12px;font:inherit;font-size:13.5px;color:#3c4257;border-radius:6px;cursor:pointer}
.tmenu .menu a:hover,.tmenu .menu button:hover{background:#f6f9fc}.tmenu .menu button[disabled]{color:#aab2bf;cursor:default}
.tmenu .menu form{margin:0}.tmenu .menu .vsave{padding:6px 12px;margin:0;border-top:1px solid #e3e8ee;border-bottom:1px solid #e3e8ee}
.panelx{position:absolute;z-index:70;background:#fff;border:1px solid #e3e8ee;border-radius:10px;box-shadow:0 10px 26px rgba(10,37,64,.16);padding:14px 16px;width:340px;max-width:92vw;top:100%;left:0;margin-top:4px}
.panelx.wide{width:620px}.panelx h4{font-size:14px;color:#0a2540;margin-bottom:8px}.panelx h5{font-size:13px;color:#5a52f0;margin:0 0 6px}
.panelx .field{margin-bottom:8px}.panelx .field label{display:block;font-size:11px;color:#697386;margin:0 0 3px 10px}.panelx .field .pill{width:100%}
.panelx .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.colbox{border:1px solid #e3e8ee;border-radius:8px;max-height:260px;overflow:auto}
.colbox .ci{display:flex;align-items:center;padding:6px 10px;border-bottom:1px solid #e3e8ee;gap:8px;font-size:13px}.colbox .ci span{flex:1}.colbox .ci a{color:#5a52f0;font-size:12px}
.gsearch{flex:1;min-width:180px;max-width:380px;display:flex;align-items:center;border:1px solid #e3e8ee;border-radius:6px;background:#fff;height:34px;padding:0 10px;margin:0 0 0 auto}
.gsearch input{flex:1;border:0;outline:none;height:100%;background:none;font:inherit;font-size:13.5px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 8px}.chips .tag{padding:2px 8px;border-radius:999px;background:#eef1f5;font-size:12px}
table.t.compact td{padding-top:3px;padding-bottom:3px}
@media (max-width:980px){.two{grid-template-columns:1fr}}
/* The two wide panels (Column Visibility, Conditional Formatting) open under the whole toolbar, not under their own button, and never wider than it:
   under the button they ran past the right edge at 1366 px (53 px) and at 820 px. */
.toolbar{position:relative}.tmenu.tpanel{position:static}.tmenu.tpanel>.panelx.wide{left:0;right:auto;width:min(620px,100%);max-width:100%}

/* the account block: a name with a chevron that opens My Account, Sign out and the role (F74) */
details.acct>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;padding:3px 10px 5px;color:#0a2540;font-weight:600;font-size:13px;border-radius:6px}
details.acct>summary::-webkit-details-marker{display:none}
details.acct>summary:hover{background:#f6f9fc}
details.acct>summary .chev{margin-left:auto;width:8px;height:8px;border-right:1.5px solid #697386;border-bottom:1.5px solid #697386;transform:rotate(45deg);margin-bottom:3px;flex:none}
details.acct[open]>summary .chev{transform:rotate(-135deg);margin-bottom:-3px}
details.acct .acctbody{padding-top:2px}.acct .rolel{display:block;padding:2px 10px 4px;font-size:12px;color:#697386}
/* File Feed in the top bar: the mockup's primary button; the 'soon' tag stays while it is unbuilt */
.btn.soonbtn.primary{background:#635bff;color:#fff;border-color:#635bff;display:inline-flex;gap:6px;align-items:center}.btn.soonbtn.primary .tagsoon{color:#fff;margin-left:0}

/* paged lists (F76): the Forms tab shows 100 at a time with the total in view */
.pager{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;font-size:13px;color:#3c4257;padding:8px 14px;border-bottom:1px solid #e3e8ee}
.pager a,.pager .off{padding:3px 10px;border:1px solid #e3e8ee;border-radius:6px;background:#fff}
.pager a{color:#3c3aa8}.pager .off{color:#697386;background:#f6f9fc}
.filters+.pager{border:0;padding-left:0}

/* offline Map (F77): the outlines are inline SVG, the pin card is an ordinary card under the map */
.mapcanvas{position:relative;background:#e8eef7;border:1px solid #e3e8ee;border-radius:8px;overflow:hidden;line-height:0}
.mapempty{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#fff;border:1px solid #e3e8ee;border-radius:8px;box-shadow:0 6px 20px rgba(10,37,64,.12);padding:14px 22px;font-size:14px;color:#3c4257;line-height:1.4}
.mapcanvas .chartbox{overflow-x:auto}
.mapnote{font-size:12.5px;color:#697386;margin:10px 0 6px}
.maplegend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12.5px;color:#3c4257;align-items:center}
.maplegend .lgm{display:inline-block;line-height:0;vertical-align:-2px;margin-right:6px}
.mk{cursor:pointer}.mk:hover{stroke:#0a2540}
a.pinlink,a.pinhit{outline:none}a.pinlink:focus-visible .ring{stroke:#0a2540;stroke-width:2}a.pinlink:focus-visible .mk,a.pinlink:hover .mk{stroke:#0a2540}
.stripbar .chk{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#3c4257;margin:0 6px 0 4px;align-self:center}.stripbar .chk input{width:auto;margin:0}
.mapmore{font-size:13px;color:#3c4257;margin:8px 0 0}
.maplist{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.maplist .chip{display:inline-block;font-size:13px;padding:5px 12px;border:1px solid #c9c7ff;border-radius:999px;background:#fff;color:#3d37b8;text-decoration:none}
.maplist .chip[aria-current="true"]{background:#f0f0ff;font-weight:600}
.maplist .chip.off{color:#697386;border-color:#e3e8ee}
.maplist .chip:focus-visible{outline:2px solid #0a2540;outline-offset:2px}
.mappop{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;margin-top:14px;font-size:13.5px;color:#3c4257}
.mappop b{color:#0a2540;font-size:14px}
.docfolders{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 12px}
.docfolder{display:flex;flex-direction:column;gap:2px;min-width:150px;padding:10px 14px;border:1px solid #e3e8ee;border-radius:8px;background:#fff;color:#3c4257;text-decoration:none;font-size:13px}
.docfolder b{color:#0a2540;font-size:14px}.docfolder.on{border-color:#c9c7ff;background:#f0f0ff}.docfolder:focus-visible{outline:2px solid #0a2540;outline-offset:2px}
/* the picture overlay (public/lightbox.js) */
.lb{position:fixed;inset:0;background:rgba(10,20,40,.94);z-index:250;display:flex;flex-direction:column}
.lb .lbtop{display:flex;align-items:center;color:#fff;padding:12px 20px;gap:18px;font-size:14px}
.lb .lbtop button,.lb .lbtop a{background:none;border:0;color:#fff;font-size:20px;padding:2px 8px;cursor:pointer;text-decoration:none;font-family:inherit}
.lb .lbtop button:hover,.lb .lbtop a:hover{color:#c9c7ff}
.lb .lbmain{flex:1;display:flex;align-items:center;justify-content:center;position:relative;min-height:0;overflow:hidden}
.lb .lbmain .stage{max-width:70vw;max-height:100%;height:100%;transition:transform .2s;display:flex;align-items:center;justify-content:center}
.lb .lbmain .stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.lb .arrow{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.14);border:0;color:#fff;font-size:30px;width:48px;height:72px;border-radius:8px;cursor:pointer;z-index:1}
.lb .arrow:hover{background:rgba(255,255,255,.3)}
.lb .arrow:disabled{opacity:.3;cursor:default}
.lb .arrow.l{left:20px}.lb .arrow.r{right:20px}
.lb .lbcap{color:#dbe2ee;text-align:center;padding:8px 8px 18px;font-size:13.5px;min-height:1.5em}
.lb button:focus-visible,.lb a:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* the viewer page without a script: zoom steps are links to a fragment of the page, read here, so a zoom is never a request */
.zframe{overflow:auto;max-height:75vh;background:#f4f4f7}
.zframe img{display:block;width:100%;max-width:100%;height:auto;margin:0 auto}
#zoom-1:target ~ .zframe img{width:150%;max-width:none}
#zoom-2:target ~ .zframe img{width:200%;max-width:none}
#zoom-3:target ~ .zframe img{width:300%;max-width:none}
#zoom-4:target ~ .zframe img{width:400%;max-width:none}