/* SiteCaddy Crew: WRA office mode, desktop layout (Stage 1). Two panels: the assessment's sections and assets on the left,
   the WRA app's own screens on the right. Only layout is changed here; the screens themselves are the app's. */
:root{--onw:300px}
/* The page is moved right with margins on its own parts, never with padding on the body: the PDF engine (html2canvas)
   draws the report from its place in the page, and body padding cut the left side off every PDF page in the first test. */
body.office .container{max-width:980px;padding-left:24px;padding-right:24px;margin-left:calc(var(--onw) + max(0px, (100vw - var(--onw) - 980px) / 2));margin-right:auto}
body.office .hdr{margin-left:var(--onw)}
body.office .hdr-in{max-width:1028px}
body.office #avatar-btn,body.office #offline-bar,body.office #install-btn{display:none!important}
body.office .sheet{max-width:640px;left:var(--onw)}
body.office #pdf-panel{left:var(--onw)!important}
#office-nav{display:none}
body.office #office-nav{display:block;position:fixed;left:0;top:0;bottom:0;width:var(--onw);overflow-y:auto;background:#f6f8fa;border-right:1px solid #dde2e8;padding:12px 10px 40px;z-index:50;font-size:14px;color:#111827}
#office-nav button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left}
.on-head{padding:4px 4px 10px;border-bottom:1px solid #e3e7ec;margin-bottom:8px}
.on-back{display:flex;align-items:center;gap:4px;color:#152f63!important;font-size:13px!important;font-weight:600;padding:4px 0}
.on-back svg{transform:rotate(180deg)}
.on-title{display:block;width:100%;padding:8px;border-radius:8px;margin-top:4px}
.on-title b{display:block;font-size:15px}.on-title small{display:block;color:#6b7684;font-size:12.5px}
#office-nav .on-title.on,#office-nav .on-title:hover{background:#e8eef8}
.on-meta{font-size:12px;color:#6b7684;padding:2px 8px}
.on-g{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#6b7684;padding:14px 8px 4px}
.on-s{display:flex;align-items:center;border-radius:8px}
.on-s.on{background:#e8eef8}
.on-t{width:22px;height:30px;display:flex;align-items:center;justify-content:center;flex:none;color:#6b7684}
.on-n{flex:1;display:flex;align-items:center;gap:8px;padding:6px 6px 6px 0;min-height:32px}
.on-n span{flex:1}.on-n small,.on-f small{color:#6b7684;font-size:12px}
.on-s:hover{background:#eef2f7}.on-s.on:hover{background:#e0e8f5}
.on-kids{padding:2px 0 6px 22px}
.on-b{font-size:12.5px;font-weight:700;padding:6px 8px 2px}
.on-f{display:flex;align-items:center;gap:4px;width:100%;padding:4px 6px;font-weight:600;font-size:13px;color:#374151}
.on-i{display:block;width:100%;padding:5px 8px 5px 24px;border-radius:6px;font-size:13.5px}
.on-i small{display:block;color:#6b7684;font-size:12px}
#office-nav .on-i:hover{background:#eef2f7}#office-nav .on-i.on{background:#152f63;color:#fff}#office-nav .on-i.on small{color:#cfd8e8}
/* start screen */
body.off-start-page .container{max-width:760px}
.off-card{background:#fff;border:1px solid #dde2e8;border-radius:16px;padding:24px;margin:24px 0}
.off-card h1{font-size:24px;margin:4px 0 8px}
.off-kicker{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#6b7684}
.off-pick{display:inline-flex;margin:8px 0 4px;cursor:pointer}
.off-msg{margin:8px 0 16px;font-size:14px;color:#374151}.off-msg.bad{color:#b42318;font-weight:600}
.off-ch{display:block;width:100%;margin:6px 0;text-align:left}
@media print{body.office .container,body.office .hdr{margin-left:0}#office-nav{display:none!important}}
/* PDF on a wide screen. The PDF library (html2pdf 0.10.3) centres its drawing area in the window (margin:auto) but draws
   as if the window were one page wide, so on any window wider than the page the left of every page was cut off.
   This is an existing WRA behaviour (the phone app does the same in a wide desktop browser); at phone widths it never
   shows. Pinning the drawing area to the left makes the desktop PDF the same as the phone's. The PDF engine is unchanged. */
.html2pdf__container{margin:0!important;right:auto!important}
body.off-start-page #avatar-btn,body.off-start-page #offline-bar,body.off-start-page #install-btn{display:none!important}