/* EmergencyHousing.CA - Ontario Housing and Safety Tool. No external fonts, no trackers, no images loaded from other sites. */
:root{--bg:#eef4fb;--card:#ffffff;--ink:#132238;--muted:#55677f;--line:#d5e0ec;--brand:#0b4f7c;--brand2:#0e7a6b;--accent:#f2b705;--danger:#a4122e;--radius:16px;--shadow:0 10px 30px rgba(19,34,56,.10)}
[data-theme="dark"]{--bg:#0f1722;--card:#172233;--ink:#eef4fb;--muted:#b8c6d6;--line:#2c3e55;--brand:#7ec3ff;--brand2:#6fd6c2;--accent:#f2b705}
[data-theme="sunset"]{--bg:#fff1e6;--card:#fffaf5;--ink:#3a1f1f;--muted:#6f4f4f;--line:#f0d3c0;--brand:#a63d2f;--brand2:#c96a1e;--accent:#f2b705}
[data-theme="forest"]{--bg:#eaf3ec;--card:#ffffff;--ink:#17351f;--muted:#4e6a55;--line:#c9dccf;--brand:#1f5c38;--brand2:#2e8b57;--accent:#e8c547}
[data-theme="terminal"]{--bg:#0b1210;--card:#111d19;--ink:#d6ffe9;--muted:#9fc7b3;--line:#24473a;--brand:#4ade80;--brand2:#22d3ee;--accent:#facc15}
[data-theme="matrix"]{--bg:#020a03;--card:#06130a;--ink:#c8ffd6;--muted:#8fbf9d;--line:#1d3a26;--brand:#22ff88;--brand2:#00e676;--accent:#a3ff12}
[data-theme="notebook"]{--bg:#fdf6e3;--card:#fffdf5;--ink:#2b2620;--muted:#6b6156;--line:#e6dcc0;--brand:#7a4a12;--brand2:#5b7a3a;--accent:#d9a441}
[data-theme="highcontrast"]{--bg:#ffffff;--card:#ffffff;--ink:#000000;--muted:#222222;--line:#000000;--brand:#0000aa;--brand2:#006600;--accent:#ffdd00}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.6;font-size:17px}
a{color:var(--brand);font-weight:600}
a:focus,button:focus,input:focus,select:focus,textarea:focus{outline:3px solid var(--accent);outline-offset:2px}
.skip{position:absolute;left:-9999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:99}
.topbar{background:var(--brand);color:#fff;padding:10px 16px;display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.topbar strong{font-size:18px}.topbar span{font-size:14px;opacity:.95}
.quickexit{background:#fff;color:var(--danger);border:2px solid var(--danger);border-radius:999px;padding:10px 16px;font-weight:800;cursor:pointer}
header.hero{max-width:1180px;margin:0 auto;padding:28px 18px 10px;display:grid;grid-template-columns:1.2fr .8fr;gap:22px;align-items:center}
@media(max-width:800px){header.hero{grid-template-columns:1fr}}
.hero h1{font-size:clamp(30px,5vw,52px);line-height:1.05;margin:8px 0}
.hero p.lead{font-size:19px;color:var(--muted)}
.badge{display:inline-block;background:var(--accent);color:#222;padding:4px 10px;border-radius:999px;font-weight:800;font-size:13px}
.heroart{background:linear-gradient(135deg,var(--brand),var(--brand2));color:#fff;border-radius:20px;padding:22px;box-shadow:var(--shadow)}
.heroart svg{width:100%;height:auto;display:block}
nav.tabs{max-width:1180px;margin:14px auto;padding:0 18px;display:flex;gap:8px;flex-wrap:wrap}
nav.tabs button{border:1px solid var(--line);background:var(--card);color:var(--ink);padding:11px 14px;border-radius:999px;cursor:pointer;font-weight:700}
nav.tabs button[aria-selected="true"]{background:var(--brand);color:#fff;border-color:var(--brand)}
main{max-width:1180px;margin:0 auto;padding:10px 18px 40px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin:16px 0;box-shadow:var(--shadow)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.path{border:1px solid var(--line);border-radius:14px;padding:18px;background:var(--card)}
.path h3{margin-top:6px}.path button,.btn{background:var(--brand);color:#fff;border:0;border-radius:10px;padding:12px 16px;font-weight:800;cursor:pointer}
.btn.secondary{background:var(--card);color:var(--brand);border:2px solid var(--brand)}
.btn.green{background:var(--brand2)}.btn.danger{background:var(--danger)}
label{display:block;font-weight:700;margin:12px 0 4px}
input,select,textarea{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font-size:16px}
textarea{min-height:110px}
.small{font-size:14px;color:var(--muted)}
.alert{border-left:6px solid var(--danger);background:color-mix(in srgb,var(--danger) 8%,var(--card));padding:14px 16px;border-radius:10px}
.safe{border-left:6px solid var(--brand2);background:color-mix(in srgb,var(--brand2) 8%,var(--card));padding:14px 16px;border-radius:10px}
.tip{border:1px dashed var(--brand);padding:12px 14px;border-radius:10px;background:color-mix(in srgb,var(--brand) 6%,var(--card))}
details{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:10px 0;background:var(--card)}
details summary{font-weight:800;cursor:pointer}
table{width:100%;border-collapse:collapse}th,td{border-bottom:1px solid var(--line);padding:8px;text-align:left;vertical-align:top}
.output{white-space:pre-wrap;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:18px;margin-top:14px}
.pill{display:inline-block;padding:3px 9px;border-radius:999px;background:var(--bg);border:1px solid var(--line);font-size:13px;font-weight:700}
.controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.toolbar{max-width:1180px;margin:0 auto;padding:8px 18px;display:flex;gap:10px;flex-wrap:wrap;align-items:center;background:var(--card);border-bottom:1px solid var(--line)}
.toolbar button{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:8px;padding:6px 10px;cursor:pointer;font-weight:700}
.path{transition:transform .15s ease,box-shadow .15s ease}.path:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn:hover{filter:brightness(1.08)}button{transition:background .15s ease,transform .1s ease}button:active{transform:scale(.98)}
#toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:12px;box-shadow:var(--shadow);font-weight:700;display:none;z-index:99;max-width:90vw;text-align:center}
#toast.show{display:block}
.bottombar{display:none}
@media(max-width:700px){.bottombar{display:flex;position:fixed;left:0;right:0;bottom:0;background:var(--card);border-top:1px solid var(--line);padding:8px;gap:8px;z-index:30}.bottombar button{flex:1;background:var(--brand);color:#fff;border:0;border-radius:10px;padding:12px 6px;font-weight:800}footer{padding-bottom:80px}}
footer{max-width:1180px;margin:0 auto;padding:20px 18px 50px;color:var(--muted);font-size:14px}
@media(max-width:600px){body{font-size:16px}.card{padding:16px}.topbar{position:sticky;top:0;z-index:20}}
@media print{.topbar,nav.tabs,.no-print{display:none!important}body{background:#fff;color:#000}.card{box-shadow:none;border:1px solid #999}.panel{page-break-inside:auto}.output{border:1px solid #000;page-break-inside:auto}}

/* v2.1 GUI - organized, visual, easy to scan */
.stepbar{max-width:1180px;margin:12px auto 0;padding:10px 18px;display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.stepbar .step{display:inline-flex;gap:6px;align-items:center;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-weight:700}
.stepbar .step strong{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--brand);color:#fff;font-size:13px}
.stepbar button{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;padding:6px 10px;cursor:pointer;font-weight:700}
.dash{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:16px 0}
.stat{border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--bg);text-align:center}
.stat strong{display:block;font-size:30px;line-height:1.1;color:var(--brand)}
.stat span{display:block;font-size:14px;color:var(--muted);margin:6px 0 10px}
.stat button{border:0;background:var(--brand);color:#fff;border-radius:999px;padding:9px 12px;font-weight:800;cursor:pointer;width:100%}
.guidebox{border:2px solid var(--brand2);border-radius:14px;padding:18px;background:color-mix(in srgb,var(--brand2) 7%,var(--card));margin-bottom:16px}
.guidebox h3{margin-top:0}
nav.tabs{position:sticky;top:0;z-index:25;background:var(--bg);padding-top:10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.card h2{border-left:6px solid var(--brand);padding-left:12px}
.card h3{color:var(--brand)}
@media(max-width:700px){.stepbar .step{font-size:14px}.stat strong{font-size:26px}nav.tabs{position:static}}

/* v2.8 - professional legal homepage, animated, no external assets */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes shieldpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@keyframes badgeshimmer{0%{filter:brightness(1)}50%{filter:brightness(1.12)}100%{filter:brightness(1)}}
@keyframes underlinegrow{from{width:0}to{width:100%}}
header.hero>div:first-child{animation:rise .6s ease both}
header.hero .heroart{animation:fadein .8s ease both}
header.hero .heroart svg{animation:shieldpulse 5s ease-in-out infinite}
header.hero .badge{animation:badgeshimmer 4s ease-in-out infinite}
.hero h1 .hl{position:relative;color:var(--brand)}
.hero h1 .hl::after{content:"";position:absolute;left:0;bottom:-4px;height:4px;width:100%;background:var(--accent);animation:underlinegrow .8s ease .4s both}
.trustrow{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0}
.trustrow span{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:5px 11px;font-size:13px;font-weight:700}
.firmstrip{max-width:1180px;margin:16px auto 0;padding:0 18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.firmstrip>div{border-top:4px solid var(--brand);background:var(--card);border-radius:12px;padding:16px;box-shadow:var(--shadow);animation:rise .5s ease both}
.firmstrip>div:nth-child(2){animation-delay:.1s}.firmstrip>div:nth-child(3){animation-delay:.2s}.firmstrip>div:nth-child(4){animation-delay:.3s}
.firmstrip strong{display:block;font-size:17px}.firmstrip span{color:var(--muted);font-size:14px}
.practice .path{animation:rise .5s ease both}
.practice .path:nth-child(2){animation-delay:.05s}.practice .path:nth-child(3){animation-delay:.1s}.practice .path:nth-child(4){animation-delay:.15s}
.practice .path:nth-child(5){animation-delay:.2s}.practice .path:nth-child(6){animation-delay:.25s}.practice .path:nth-child(7){animation-delay:.3s}.practice .path:nth-child(8){animation-delay:.35s}
.stepbar .step strong{transition:transform .2s ease}.stepbar .step:hover strong{transform:scale(1.15)}
nav.tabs button{transition:background .15s ease,transform .1s ease}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
@media print{.firmstrip,.trustrow{display:none!important}}

/* v3.0 GUI - mobile tab rail, contrast, hierarchy, panel transitions */
.topbar{background:color-mix(in srgb,var(--brand) 78%,#0a2033)}
.path button,.btn{background:color-mix(in srgb,var(--brand) 82%,#0a2033)}
.btn.green{background:color-mix(in srgb,var(--brand2) 82%,#0a2033)}
nav.tabs button[aria-selected="true"]{background:color-mix(in srgb,var(--brand) 82%,#0a2033);box-shadow:0 4px 14px rgba(19,34,56,.25)}
.stat button{background:color-mix(in srgb,var(--brand) 82%,#0a2033)}
.bottombar button{background:color-mix(in srgb,var(--brand) 82%,#0a2033)}
button[data-action="generate"],button[data-action="generatePack"],button[data-action="buildNotify"]{padding:15px 22px;font-size:18px}
nav.tabs button,.btn,.path button{min-height:44px}
.output{border-left:6px solid var(--brand);font-size:16px;line-height:1.7}
.stat{border-top:5px solid var(--brand);transition:transform .15s ease,box-shadow .15s ease}
.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.guidebox{box-shadow:var(--shadow)}
.panel:not([hidden]){animation:fadein .25s ease both}
.card h2{font-size:23px}
@media(max-width:700px){
  .topbar{position:static}
  nav.tabs{position:sticky;top:0;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}
  nav.tabs button{flex-shrink:0}
  .stepbar{flex-wrap:nowrap;overflow-x:auto}
  .stepbar .step{flex-shrink:0}
  .card table{display:block;overflow-x:auto}
  header.hero{padding-top:18px}
  .heroart{padding:16px}
  .dash{grid-template-columns:repeat(2,1fr)}
  .stat{padding:12px}
  .stat strong{font-size:24px}
}

/* v3.1 GUI - polish throughout: controls, cards, tables, focus, touch targets */
input[type="checkbox"],input[type="radio"]{width:auto;min-height:0;margin-right:8px;accent-color:var(--brand);cursor:pointer}
input[type="file"]{cursor:pointer}
select{cursor:pointer}
textarea{resize:vertical}
input:not([type="checkbox"]):not([type="radio"]):focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
nav.tabs button:hover{background:color-mix(in srgb,var(--brand) 12%,var(--card))}
nav.tabs button[aria-selected="true"]:hover{filter:brightness(1.08)}
.card{transition:box-shadow .15s ease}
.card h2{margin:6px 0 14px;line-height:1.25}
.card h3{margin:20px 0 8px}
.card>h2:first-child{margin-top:0}
.practice .path p{color:var(--muted)}
.practice .path h3{color:var(--brand)}
.firmstrip>div{transition:transform .15s ease,box-shadow .15s ease}
.firmstrip>div:hover{transform:translateY(-2px)}
.stat span{min-height:38px}
.stat button:hover{filter:brightness(1.08)}
.btn.secondary:hover{background:color-mix(in srgb,var(--brand) 10%,var(--card))}
.btn.green:hover,.btn.danger:hover{filter:brightness(1.08)}
.toolbar button:hover{background:color-mix(in srgb,var(--brand) 10%,var(--bg))}
.stepbar button:hover{background:color-mix(in srgb,var(--brand) 10%,var(--bg))}
table th{background:color-mix(in srgb,var(--brand) 8%,var(--card));color:var(--brand)}
table tr:nth-child(even) td{background:color-mix(in srgb,var(--brand) 3%,var(--card))}
details summary{padding:4px 0}
details[open ] summary{color:var(--brand)}
.tip{border-left:6px solid var(--brand)}
.alert h3,.safe h3,.guidebox h3{margin-top:0}
.hero p.lead{max-width:62ch}
.output{overflow-wrap:anywhere}
#toast{border:1px solid var(--line)}
@media(max-width:700px){
  .controls .btn,.controls button{flex:1 1 46%}
  .card{padding:18px}
  .hero h1{font-size:clamp(28px,8vw,40px)}
  .toolbar{justify-content:center}
  .toolbar button{padding:9px 12px}
  table th,table td{padding:10px 8px}
}
@media print{.toolbar,.stepbar,#toast{display:none!important}.card{page-break-inside:auto}}

/* v3.10 GUI - LegalScape-style progress and polish */
.progresswrap{height:16px;background:var(--bg);border:1px solid var(--line);border-radius:999px;overflow:hidden}
.progressbar{height:100%;width:20%;background:var(--brand);transition:width .3s ease}
.glance{white-space:pre-line;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.card{box-shadow:var(--shadow)}
.practice .path{transition:transform .15s ease,box-shadow .15s ease}
.practice .path:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
nav.tabs button[aria-selected="true"]{box-shadow:0 2px 0 var(--brand)}
.btn.green{box-shadow:0 2px 8px color-mix(in srgb,var(--brand) 35%,transparent)}
@media print{#draftProgressCard{display:none!important}}