/* Lato is self-hosted (public/fonts/), not pulled from Google. The <link> to
   fonts.googleapis.com that used to sit in head.ejs made a render-blocking
   third-party call on every visit — wrong for a private, noindex tool. Files are
   Google's own woff2, split latin / latin-ext with unicode-range preserved so the
   Hawaiian ʻokina and kahakō still resolve. font-display: swap keeps text visible
   while the face loads. Above-the-fold weights (400, 900) preloaded in head.ejs;
   the CSP no longer permits Google's font hosts (this tool serves only its own
   pages, never third-party-styled HTML). */
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/lato-400.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/lato-400-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;
  src:url(/fonts/lato-700.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;
  src:url(/fonts/lato-700-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Lato';font-style:normal;font-weight:900;font-display:swap;
  src:url(/fonts/lato-900.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lato';font-style:normal;font-weight:900;font-display:swap;
  src:url(/fonts/lato-900-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Lato';font-style:italic;font-weight:400;font-display:swap;
  src:url(/fonts/lato-400i.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Lato';font-style:italic;font-weight:400;font-display:swap;
  src:url(/fonts/lato-400i-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Independent Living Data Library — theme carried from independentlivinghawaii.org.
   Brand cyan #12A0D1 is kept for large display and decorative fills, where it
   passes; a deeper step (#0B7FA8, 4.55:1 on white) carries anything with small
   text on it, because white on the parent site's cyan measures 3.01:1 and AA
   asks for 4.5:1. */
:root{
  color-scheme:light;
  --cyan:#12A0D1; --cyan-deep:#0B7FA8; --cyan-dark:#096A8C; --cyan-wash:#E8F5FB;
  --ink:#3E3B3B; --ink-head:#555; --ink-soft:#6B6868;
  --page:#F1F1F1; --panel:#fff; --rule:#DEDEDE; --rule-soft:#EDEDED;
  --focus:#B34700;
  --ok-bg:#E4EFE9; --ok-ink:#215741;
  --warn-bg:#FFF6E2; --warn-ink:#6B4200; --warn-rule:#D6A63F;
  --stop-bg:#FBE9E4; --stop-ink:#8A3520;
  --font:"Lato",-apple-system,"Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --tap:2.75rem;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--page);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.6}
body{margin:0}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--cyan-dark);color:#fff;padding:.75rem 1.25rem;z-index:200;font-weight:700;text-decoration:none}
.skip:focus{left:0}

.band{background-color:var(--cyan);background-repeat:repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='56' viewBox='0 0 160 56'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.16' stroke-width='3'%3E%3Cpath d='M-20 12 Q 0 2 20 12 T 60 12 T 100 12 T 140 12 T 180 12'/%3E%3Cpath d='M-20 30 Q 0 20 20 30 T 60 30 T 100 30 T 140 30 T 180 30'/%3E%3Cpath d='M-20 48 Q 0 38 20 48 T 60 48 T 100 48 T 140 48 T 180 48'/%3E%3C/g%3E%3C/svg%3E")}
.band__inner{max-width:76rem;margin:0 auto;padding:1.35rem 1.5rem;display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between}
.logotype{margin:0;color:#fff;font-weight:900;line-height:1.08;font-size:clamp(1rem,2vw,1.3rem);letter-spacing:.02em;text-transform:uppercase;text-shadow:0 1px 2px rgba(0,0,0,.22)}
.logotype span{display:block}
.nav{display:flex;flex-wrap:wrap;gap:.5rem}
.nav a{color:#fff;text-decoration:none;font-size:.85rem;font-weight:700;border:2px solid rgba(255,255,255,.9);border-radius:3px;padding:.4rem .75rem;background:rgba(11,127,168,.55);min-height:var(--tap);display:inline-flex;align-items:center}
.nav a:hover,.nav a[aria-current="page"]{background:#fff;color:var(--cyan-dark);border-color:#fff}

.who{background:var(--cyan-deep);color:#fff}
.who__inner{max-width:76rem;margin:0 auto;padding:.45rem 1.5rem;font-size:.85rem;display:flex;gap:1rem;justify-content:space-between;align-items:center;flex-wrap:wrap}
.linkbtn{background:none;border:0;color:#fff;font:inherit;font-weight:700;text-decoration:underline;cursor:pointer;min-height:var(--tap);padding:0}

.wrap{max-width:76rem;margin:0 auto;padding:1.9rem 1.5rem 4rem}
h1{font-size:clamp(1.6rem,3.4vw,2.2rem);margin:0 0 .5rem;color:var(--ink-head);font-weight:900;line-height:1.15}
h2{font-size:1.25rem;margin:2.2rem 0 .5rem;color:var(--ink-head);font-weight:900}
p{margin:0 0 1rem;max-width:76ch}
.lede{font-size:1.03rem;max-width:70ch}
.muted{color:var(--ink-soft)}
.small{font-size:.84rem}
.db{display:block}
.mono{font-family:var(--mono)}
a{color:var(--cyan-dark);text-underline-offset:2px}
.head-row{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:.4rem}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(11.5rem,1fr));gap:1rem;margin:1.2rem 0 1.6rem}
.tile{background:var(--panel);border:1px solid var(--rule);border-top:4px solid var(--cyan);border-radius:4px;padding:.95rem 1.05rem}
.tile .k{font-size:.7rem;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-dark);margin:0 0 .3rem;font-weight:700}
.tile .v{font-size:1.9rem;font-weight:900;line-height:1.1;margin:0;color:var(--ink-head)}
.tile .d{font-size:.8rem;color:var(--ink-soft);margin:.25rem 0 0}

.card{background:var(--panel);border:1px solid var(--rule);border-radius:4px;padding:1.2rem 1.3rem 1.4rem;margin:0 0 1.4rem;max-width:56rem}
.card--narrow{max-width:30rem;margin:3rem auto}
.card--tight{max-width:40rem}
.eyebrow{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan-dark);margin:0 0 .3rem;font-weight:700}

label{display:block;font-weight:700;font-size:.92rem;margin:1rem 0 .25rem}
input,select,textarea{width:100%;font:inherit;font-size:.96rem;padding:.55rem .65rem;border:1px solid var(--rule);border-radius:3px;background:#FCFCFB;color:var(--ink);min-height:var(--tap)}
textarea{resize:vertical}
input[type=file]{padding:.45rem}
.two{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:40rem){.two{grid-template-columns:1fr}}
.row-btns{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1rem}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);padding:.55rem 1.15rem;background:var(--cyan-deep);color:#fff;border:2px solid var(--cyan-deep);border-radius:3px;font:inherit;font-weight:700;text-decoration:none;cursor:pointer;margin-top:1rem;width:auto}
.btn:hover{background:var(--cyan-dark);border-color:var(--cyan-dark)}
.btn--ghost{background:var(--panel);color:var(--cyan-dark)}
.btn--ghost:hover{background:var(--cyan-wash)}

.filters{display:flex;gap:.8rem;align-items:flex-end;flex-wrap:wrap;background:var(--panel);border:1px solid var(--rule);border-radius:4px;padding:.8rem 1rem;margin:1.1rem 0}
.filters label{margin:0 0 .2rem}
.filters select{min-width:16rem;width:auto}

.tablewrap{overflow-x:auto;border:1px solid var(--rule);border-radius:4px;background:var(--panel);margin:1rem 0 1.4rem}
table{border-collapse:collapse;width:100%;font-size:.89rem}
th,td{text-align:left;padding:.55rem .7rem;border-bottom:1px solid var(--rule-soft);vertical-align:top}
thead th{background:var(--cyan-wash);color:var(--cyan-dark);font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;font-weight:900}
tbody tr:last-child td{border-bottom:none}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tbody th{width:11rem;color:var(--ink-head)}
table.entry input{min-height:2.4rem;font-size:.9rem}
table.entry td{vertical-align:middle}

.pill{display:inline-block;font-family:var(--mono);font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;font-weight:700;padding:.14rem .4rem;border-radius:3px;white-space:nowrap;background:var(--rule-soft);color:var(--ink-soft)}
.p-accepted,.p-accept,.p-parsed,.p-login{background:var(--ok-bg);color:var(--ok-ink)}
.p-pending,.p-entered,.p-upload,.p-extract{background:var(--warn-bg);color:var(--warn-ink)}
.p-rejected,.p-reject,.p-login_failed{background:var(--stop-bg);color:var(--stop-ink)}
.p-download{background:#EAE8F4;color:#3F3A72}

.alert{background:var(--stop-bg);color:var(--stop-ink);border-left:4px solid var(--stop-ink);padding:.7rem .9rem;border-radius:0 3px 3px 0;font-size:.92rem}
.alert--ok{background:var(--ok-bg);color:var(--ok-ink);border-left-color:var(--ok-ink)}
.note{background:var(--warn-bg);color:var(--warn-ink);border-left:5px solid var(--warn-rule);padding:.9rem 1.05rem;border-radius:0 4px 4px 0;margin:1rem 0;max-width:76ch}
.note--tight{padding:.7rem .9rem;font-size:.9rem}
.note__k{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700;display:block;margin-bottom:.3rem}
.note p{max-width:none}
.note p:last-child{margin:0}

.foot{background:var(--cyan-deep);color:#fff;margin-top:3rem}
.foot__inner{max-width:76rem;margin:0 auto;padding:1.5rem;font-size:.85rem}
.foot p{max-width:78ch;margin:0 0 .4rem}
.foot p:last-child{margin:0}

/* ---- Phase 5 dashboard views ---- */
.subnav{display:flex;flex-wrap:wrap;gap:.35rem;margin:0 0 1.5rem;border-bottom:2px solid var(--rule)}
.subnav a{font-size:.82rem;font-weight:700;text-decoration:none;color:var(--ink-soft);padding:.45rem .75rem;border:1px solid transparent;border-bottom:none;border-radius:4px 4px 0 0;display:inline-flex;gap:.35rem;align-items:center}
.subnav a:hover{background:var(--cyan-wash);color:var(--cyan-dark)}
.subnav a.is-cur{background:var(--panel);color:var(--cyan-dark);border-color:var(--rule);position:relative;top:2px}
.subnav a.is-soon{opacity:.6}
.subnav .tag{font-size:.58rem;font-family:var(--mono);background:var(--warn-bg);color:var(--warn-ink);padding:.05rem .3rem;border-radius:3px;text-transform:uppercase;letter-spacing:.05em}
.pbar{position:relative;height:1.45rem;background:var(--rule-soft);border-radius:3px;overflow:hidden;min-width:7rem}
.pbar>i{position:absolute;left:0;top:0;bottom:0;background:var(--cyan-deep);border-radius:0 3px 3px 0}
.pbar>span{position:absolute;left:.3rem;top:50%;transform:translateY(-50%);font-size:.72rem;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;background:rgba(255,255,255,.85);padding:.02rem .3rem;border-radius:2px}
.pbar--ok>i{background:var(--ok-ink)}
.pbar--warn>i{background:var(--warn-rule)}
.pbar--stop>i{background:var(--stop-ink)}
.funnel-stage{display:grid;grid-template-columns:11rem 1fr;gap:1rem;align-items:center;margin:0 0 .65rem}
.funnel-stage .lbl{font-weight:700;font-size:.9rem}
.funnel-stage .lbl small{display:block;font-weight:400;color:var(--ink-soft);font-size:.75rem}
.inline-form{display:flex;gap:.4rem;align-items:center;margin:0}
.inline-form input{width:5rem;min-height:2rem;padding:.2rem .45rem;margin:0}
.inline-form .btn{margin-top:0;padding:.35rem .7rem}
.mini{font-size:.8rem;color:var(--ink-soft)}

/* Stacked tables on mobile. A .tablewrap marked .stack turns each row into a
   labeled card below the breakpoint, so the wider monitor tables (dropoff,
   channels) stop scrolling sideways with columns hidden off the right edge. */
@media (max-width:48rem){
  .tablewrap.stack{border:0;background:transparent;overflow:visible;border-radius:0;margin:1rem 0 1.4rem}
  .tablewrap.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .tablewrap.stack table{font-size:.95rem}
  .tablewrap.stack tbody tr{display:block;background:var(--panel);border:1px solid var(--rule);border-radius:4px;box-shadow:0 1px 2px rgba(18,33,43,.05);padding:.85rem 1rem;margin:0 0 .8rem}
  .tablewrap.stack td,.tablewrap.stack th{display:block;border:0;padding:.25rem 0;text-align:left;width:auto}
  .tablewrap.stack td.num,.tablewrap.stack th.num{text-align:left}
  .tablewrap.stack th[scope="row"]{font-weight:700 !important;font-size:1.02rem;padding-bottom:.4rem;margin-bottom:.35rem;border-bottom:1px solid var(--rule-soft)}
  .tablewrap.stack td[data-label]::before{content:attr(data-label) ": ";font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan-dark);font-weight:700;display:block;margin-bottom:.15rem}
  .tablewrap.stack .pbar{min-width:0;width:100%}
  .tablewrap.stack tbody tr td:last-child{padding-bottom:0}
}

/* Show / hide password (revealed by reveal.js; no-JS users just never see it). */
.pw{display:flex;align-items:stretch;gap:.4rem}
.pw input{flex:1 1 auto}
.pw-toggle{flex:0 0 auto;min-height:var(--tap);padding:0 .85rem;font:inherit;font-weight:700;font-size:.85rem;background:var(--rule-soft);color:var(--cyan-dark);border:1px solid var(--rule);border-radius:3px;cursor:pointer}
.pw-toggle:hover{border-color:var(--cyan-deep)}

/* Long-form document pages (the methodology). The app's .wrap is 76rem, which
   is right for dashboards and much too wide for prose, so .doc sets its own
   measure and its own vertical rhythm rather than inheriting the view styles. */
.doc{max-width:44rem;margin:1.6rem 0 0}
.doc h2{font-size:1.22rem;margin:2.6rem 0 .7rem;padding-bottom:.45rem;border-bottom:1px solid var(--rule)}
.doc h3{font-size:1rem;font-weight:900;color:var(--ink-head);margin:1.7rem 0 .45rem}
.doc p{max-width:none;margin:0 0 .9rem}
.doc ul,.doc ol{margin:0 0 1rem;padding-left:1.35rem;max-width:none}
.doc li{margin:0 0 .4rem}
.doc li>strong:first-child{color:var(--ink-head)}
.doc hr{border:0;border-top:1px solid var(--rule);margin:2.4rem 0}
.doc em{color:var(--ink-soft);font-style:italic}
.doc blockquote{margin:0 0 1rem;padding:.1rem 0 .1rem 1rem;border-left:3px solid var(--cyan);color:var(--ink-soft)}
.doc .tablewrap{margin:1rem 0 1.4rem}
.doc table{font-size:.85rem}
.doc tbody th{width:auto}
.doc tbody td:first-child{font-weight:700;color:var(--ink-head)}
.doc p,.doc td,.doc li{overflow-wrap:break-word}