/* EasyPath app design system v4 - from Josh's approved dashboard redesign. Newsreader serif + Hanken Grotesk sans, warm paper, forest sidebar, honey attention. Self-contained (this page does not load styles.css). Motion is always on and subtle; no toggle (Josh's standing rule). */ /* ============ TOKENS ============ */ :root{ --base:#F4F1EA; --surface:#FFFFFF; --sidebar:#164C3C; --sidebar-2:#123E31; --ink:#1C2621; --brand:#1F6B54; --brand-deep:#164C3C; --secondary:#4A6158; --positive:#2A7354; --attention:#B07A1E; --attention-ink:#7A5411; --negative:#A6462F; --hairline:#E6E9E3; --active-pill:#EAF0EB; --ivory:#F3EFE6; --amber-wash:#FBF3E2; --sage-wash:#EFF4F0; --clay-wash:#F7ECE8; --row-tint:#F5F7F4; --hairline-hover:#d5d9d2; --on-brand:#F5FBF8; --amber-300:#DCC48E; --amber-700:#8A5A12; --amber-border:#e6cf9f; --radius:16px; --gap:18px; --ease:cubic-bezier(.2,.7,.2,1); --shadow:0 1px 2px rgba(28,38,33,.04),0 10px 26px -14px rgba(28,38,33,.12); --shadow-hover:0 2px 5px rgba(28,38,33,.06),0 22px 46px -18px rgba(28,38,33,.18); --font-serif:'Newsreader',Georgia,'Times New Roman',serif; --font-sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; /* Tokens the shared overlay UI (setup coach, shortcuts dialog, house picker) reads. They were only ever defined in styles.css, which this page does not load - so on the dashboard they fell back to hardcoded LIGHT values while the surfaces around them flipped to dark, and the text landed unreadable. */ --card:#FFFFFF; --wash:#F6F3EE; --line:#E6E9E3; --ink-soft:#4A6158; --forest:#164C3C; --accent:#1F6B54; --accent-deep:#164C3C; --accent-soft:#EFF4F0; --font-head:'Newsreader',Georgia,'Times New Roman',serif; } /* Dark mode (opt-in, per device). Same warm-dark palette as styles.css, mapped onto this document's token names so the whole dashboard cascades. Applied by the pre-paint THEME_SCRIPT which sets [data-theme="dark"] on . A user preference - NOT a motion toggle; motion / prefers-reduced-motion untouched. */ :root[data-theme="dark"]{ --card:#201C16; --wash:#26211A; --line:#34302A; --ink-soft:#ABA192; --forest:#8FD9B8; --accent:#4FB58C; --accent-deep:#6ECBA2; --accent-soft:#1D3128; --base:#17140F; --surface:#201C16; --sidebar:#123E31; --sidebar-2:#0E3227; --ink:#ECE6DA; --brand:#4FB58C; --brand-deep:#6ECBA2; --secondary:#ABA192; --positive:#5FBE93; --attention:#D8A441; --attention-ink:#E7C88A; --negative:#E0745B; --hairline:#34302A; --active-pill:#26473B; --ivory:#EFEAE0; --amber-wash:#2E2413; --sage-wash:#1D3128; --clay-wash:#331F1A; --row-tint:#262019; --hairline-hover:#443F37; --on-brand:#0E1A14; --amber-300:#7A5F2A; --amber-700:#E7C88A; --amber-border:#5B4A27; --shadow:0 1px 2px rgba(0,0,0,.34),0 10px 26px -14px rgba(0,0,0,.6); --shadow-hover:0 2px 5px rgba(0,0,0,.4),0 22px 46px -18px rgba(0,0,0,.7); } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;overflow-x:clip} body{margin:0;background:var(--base);color:var(--ink);font-family:var(--font-sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100vh;min-height:100dvh} h1,h2,h3{margin:0;font-family:var(--font-serif);font-weight:500;font-optical-sizing:auto;letter-spacing:-.005em;line-height:1.15;text-wrap:balance} a{color:var(--brand-deep);text-decoration:none} button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer;border:0;background:none} ul{margin:0;padding:0;list-style:none} .tnum{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1} .amberink{color:var(--attention-ink)} .ico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} :focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px} .rail a:focus-visible{outline-color:var(--ivory)} .skip:focus{position:fixed;top:12px;left:12px;width:auto;height:auto;clip:auto;overflow:visible;padding:10px 14px;background:var(--surface);color:var(--brand-deep);border:1px solid var(--hairline);border-radius:10px;box-shadow:var(--shadow-hover);font-weight:600;z-index:40} /* ============ APP SHELL ============ */ .app{display:grid;grid-template-columns:232px 1fr;min-height:100vh;min-height:100dvh} .rail{position:sticky;top:0;z-index:70;align-self:start;height:100vh;height:100dvh;background:linear-gradient(180deg,var(--sidebar),var(--sidebar-2));color:var(--ivory);display:flex;flex-direction:column;padding:22px 14px;gap:6px} .brandmark{display:flex;align-items:center;gap:11px;padding:6px 8px 20px;text-decoration:none} .brandmark .mark{width:34px;height:34px;flex:none;border-radius:9px;background:rgba(243,239,230,.08);display:grid;place-items:center;color:var(--ivory)} .brandmark .mark svg{width:22px;height:22px} .wordmark{font-family:var(--font-serif);font-weight:500;font-size:16.5px;line-height:1.15;color:var(--ivory)} .wordmark small{display:block;font-family:var(--font-sans);font-weight:500;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:rgba(243,239,230,.72);margin-top:3px} .nav{display:flex;flex-direction:column;gap:3px} .nav a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:11px;color:rgba(243,239,230,.74);font-weight:500;font-size:14.5px;transition:background .16s var(--ease),color .16s var(--ease);position:relative} .nav a .ico{width:19px;height:19px;opacity:.92} .nav a:hover{background:rgba(243,239,230,.07);color:var(--ivory)} .nav a.active{background:var(--active-pill);color:var(--brand-deep);font-weight:600} .nav a.active::before{content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);width:4px;height:22px;border-radius:0 4px 4px 0;background:var(--ivory)} .nav .railitem{position:relative} .nav a .caret{margin-left:auto;width:15px;height:15px;color:rgba(243,239,230,.5)} .nav .railitem.on a .caret,.nav .railitem>a:hover .caret{color:inherit} .flyout{position:absolute;left:calc(100% + 10px);top:-6px;z-index:60;min-width:208px;padding:8px;display:none;flex-direction:column;gap:2px;background:var(--surface);color:var(--ink);border:1px solid var(--hairline);border-radius:12px;box-shadow:0 20px 44px -20px rgba(20,30,25,.55)} .flyout::before{content:"";position:absolute;left:-12px;top:0;width:14px;height:100%} .nav .railitem:hover>.flyout,.nav .railitem:focus-within>.flyout,.nav .railitem.is-open>.flyout{display:flex} .flyout__hd{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--secondary);padding:4px 10px 6px} .flyout a{display:block;min-height:0;padding:8px 10px;border-radius:8px;color:var(--ink);font-size:14px;font-weight:500} .flyout a:hover{background:var(--row-tint);text-decoration:none} .flyout a.on{background:var(--active-pill);color:var(--brand-deep);font-weight:600} /* the flyout sits inside the dark rail nav - force dark text so the rail's ivory link colors (meant for the green sidebar) can't wash it out on hover */ .nav .flyout a{color:var(--ink)} .nav .flyout a:hover{color:var(--ink);background:var(--row-tint)} .nav .flyout a.on,.nav .flyout a.on:hover{color:var(--brand-deep)} .rail__spacer{flex:1} .railchip{display:flex;align-items:center;gap:11px;padding:10px 10px;border-radius:12px;background:rgba(243,239,230,.06)} .railchip .av{width:32px;height:32px;flex:none;border-radius:50%;background:#2E7D5B;color:var(--ivory);display:grid;place-items:center;font-weight:600;font-size:13px} .railchip .who{font-size:13px;font-weight:600;color:var(--ivory);line-height:1.2;min-width:0} .railchip .who small{display:block;font-weight:400;font-size:11px;color:rgba(243,239,230,.72);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .railsignout{display:flex;align-items:center;gap:11px;min-height:44px;margin-top:4px;padding:0 12px;border-radius:11px;color:rgba(243,239,230,.7);font-weight:500;font-size:13.5px;transition:background .16s var(--ease),color .16s var(--ease)} .railsignout .ico{width:18px;height:18px;opacity:.9} .railsignout:hover{background:rgba(243,239,230,.07);color:var(--ivory)} /* ---- Main ---- */ .main{min-width:0;padding:28px clamp(18px,3.4vw,44px) 40px} .wrap{max-width:1220px;margin:0 auto} /* Page head + verdict */ .pagehead{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:24px} .greeting h1{font-size:clamp(27px,3.3vw,36px);font-weight:500} .verdict{display:inline-flex;align-items:center;gap:9px;min-height:44px;box-sizing:border-box;margin-top:11px;padding:8px 14px;border-radius:999px;font-weight:600;font-size:14px;border:1px solid;transition:transform .16s var(--ease),box-shadow .16s var(--ease)} .verdict .ico{width:15px;height:15px} .verdict.neg{background:var(--clay-wash);color:var(--negative);border-color:#e2b6ad} .verdict.neg .vdot{width:8px;height:8px;border-radius:50%;background:var(--negative);flex:none;box-shadow:0 0 0 3px rgba(166,70,47,.16)} .verdict.ok{background:var(--sage-wash);color:var(--positive);border-color:#c4ddce} .verdict.ok .vdot{width:8px;height:8px;border-radius:50%;background:var(--positive);flex:none;box-shadow:0 0 0 3px rgba(42,115,84,.16)} .verdict b{font-family:var(--font-serif);font-weight:560;font-size:16px} .headtools{display:flex;align-items:center;flex-wrap:wrap;gap:12px} .hf-btn{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 12px 0 13px;border-radius:11px;border:1px solid var(--hairline);background:var(--surface);color:var(--ink);font-weight:600;font-size:13.5px;box-shadow:var(--shadow);transition:border-color .16s var(--ease),box-shadow .16s var(--ease),transform .16s var(--ease)} .hf-btn .ico{width:17px;height:17px;color:var(--secondary)} .hf-btn .caret{width:15px;height:15px;margin-left:2px} .hf-btn:hover{border-color:var(--hairline-hover);transform:translateY(-1px);box-shadow:var(--shadow-hover)} .asof{font-size:12.5px;color:var(--secondary);font-weight:500;white-space:nowrap;display:inline-flex;align-items:center;gap:6px} .asof .live{width:7px;height:7px;border-radius:50%;background:var(--positive);flex:none} /* ============ CARDS + PRIMITIVES ============ */ .card{background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);box-shadow:var(--shadow);transition:box-shadow .18s var(--ease)} @media (hover:hover) and (pointer:fine){.card:hover{box-shadow:var(--shadow-hover)}} .reveal{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s var(--ease);min-width:0} .reveal.in{opacity:1;transform:none} .sechead{display:flex;align-items:baseline;gap:12px;margin:30px 2px 14px} .sechead h2{font-size:18px;font-weight:500} .sechead .subt{font-size:12.5px;color:var(--secondary)} .sechead .viewall{margin-left:auto} .grid{display:grid;gap:var(--gap)} .grid>*{min-width:0} .g-2{grid-template-columns:1.5fr 1fr} .g-houses{grid-template-columns:repeat(3,1fr);gap:12px} .fillbar{position:relative;height:9px;border-radius:999px;background:var(--sage-wash);overflow:hidden} .fillbar>i{display:block;height:100%;width:100%;background:var(--brand);transform-origin:left;transform:scaleX(0);transition:transform .85s var(--ease) .4s} .loaded .fillbar>i{transform:scaleX(var(--w,0))} .viewall{font-size:12.5px;font-weight:600;color:var(--secondary);display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:6px 8px;border-radius:8px;transition:color .16s var(--ease),background .16s var(--ease)} .viewall .ico{width:15px;height:15px} .viewall:hover{color:var(--brand-deep);background:var(--row-tint)} /* ============ KPI BAND ============ */ .kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)} .kpis>*,.kpi{min-width:0} .kpi{padding:18px 18px 16px;height:100%;position:relative;overflow:hidden;text-decoration:none;display:block} .kpi .khead{display:flex;align-items:center;gap:9px;margin-bottom:12px} .kpi .kicon{width:32px;height:32px;flex:none;border-radius:9px;display:grid;place-items:center;background:var(--sage-wash);color:var(--brand)} .kpi .kicon .ico{width:18px;height:18px} .kpi .klabel{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--secondary)} .kpi .kval{font-family:var(--font-serif);font-weight:560;font-size:31px;line-height:1;letter-spacing:-.01em;color:var(--ink)} .kpi .kval .den{font-size:20px;color:var(--secondary);font-weight:460} .kpi .kcap{margin-top:8px;font-size:12.5px;color:var(--secondary);display:flex;align-items:center;gap:6px;flex-wrap:wrap} .kpi .kcap b{color:var(--ink);font-weight:600} .kpi.attn{background:linear-gradient(180deg,var(--amber-wash),var(--surface) 58%)} .kpi.attn .kicon{background:var(--amber-wash);color:var(--attention)} .kpi.attn .kval{color:var(--attention-ink)} .kpi.attn .klabel{display:inline-flex;align-items:center;gap:6px} .kpi.attn .klabel::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--attention);flex:none} .agebar{display:flex;gap:2px;height:8px;margin-top:12px;border-radius:999px;overflow:hidden} .agebar span{display:block} .agebar .a1{background:var(--amber-300)} .agebar .a2{background:var(--attention)} .agebar .a3{background:var(--amber-700)} .agelegend{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:8px;font-size:11px;color:var(--secondary)} .agelegend span{display:inline-flex;align-items:center;gap:5px} .agelegend i{width:7px;height:7px;border-radius:2px;display:inline-block} .agelegend i.a1{background:var(--amber-300)} .agelegend i.a2{background:var(--attention)} .agelegend i.a3{background:var(--amber-700)} /* ============ ACTION QUEUE (the hero) ============ */ .queue{padding:6px 6px 10px} .qrow{position:relative;display:flex;align-items:center;gap:13px;padding:13px 14px 13px 12px;border-top:1px solid var(--hairline);border-left:3px solid transparent;border-radius:0 11px 11px 0;transition:background .16s var(--ease)} .qrow:first-of-type{border-top:0} .qrow.sev-clay{border-left-color:var(--negative)} .qrow.sev-amber{border-left-color:var(--attention)} @media (hover:hover){.qrow:hover{background:var(--row-tint)}} .qicon{width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center} .qicon .ico{width:19px;height:19px} .qrow.sev-clay .qicon{background:var(--clay-wash);color:var(--negative)} .qrow.sev-amber .qicon{background:var(--amber-wash);color:var(--attention)} .qbody{flex:1;min-width:0;display:flex;flex-direction:column} .qtitle{font-weight:600;font-size:14.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .qsub{font-size:12.5px;color:var(--secondary);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .qsub b{color:var(--attention-ink);font-weight:600} .qact{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:9px;border:1px solid var(--hairline);background:var(--surface);color:var(--brand-deep);font-weight:600;font-size:13px;transition:background .16s var(--ease),border-color .16s var(--ease),transform .16s var(--ease)} .qact .ico{width:15px;height:15px} .qact:hover{background:var(--row-tint);border-color:var(--hairline-hover);transform:translateY(-1px)} /* "Choose what you see here" control + overflow indicator */ .sechead .qchoose{margin-left:auto;display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 11px;border-radius:9px;border:1px solid var(--hairline);background:var(--surface);color:var(--secondary);font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:border-color .16s var(--ease),color .16s var(--ease)} .sechead .qchoose .ico{width:14px;height:14px} .sechead .qchoose:hover{border-color:var(--hairline-hover);color:var(--brand-deep)} .qhidden{display:none} .queue.expanded .qhidden{display:flex} .queue.expanded .qscroll{max-height:58vh;overflow-y:auto} .qmore{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 14px;margin-top:2px;border:0;border-top:1px solid var(--hairline);background:none;font:inherit;font-size:12.5px;color:var(--secondary);cursor:pointer;border-radius:0 0 12px 12px;transition:background .16s var(--ease)} .qmore:hover{background:var(--row-tint)} .qmore b{color:var(--ink);font-weight:600} .qmore-show,.qmore-less{display:inline-flex;align-items:center;gap:7px} .qmore-less{display:none} .queue.expanded .qmore-show{display:none} .queue.expanded .qmore-less{display:inline-flex} .qmore-caret{width:14px;height:14px} .qmore-caret.up{transform:rotate(180deg)} .ho-strip{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--sage-wash);border:1px solid var(--active-pill);border-radius:12px;margin-bottom:18px;text-decoration:none;color:var(--ink)} .ho-strip:hover{text-decoration:none;border-color:var(--brand)} .ho-strip .ico{width:18px;height:18px;color:var(--brand-deep);flex:none} .ho-strip .hs-body{min-width:0;flex:1} .ho-strip .hs-k{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--brand-deep)} .ho-strip .hs-note{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--secondary);font-size:13px;margin-top:1px} /* First-run setup checklist */ .setup{background:var(--surface);border:1px solid var(--hairline);border-radius:14px;padding:16px 18px;margin-bottom:18px;box-shadow:var(--shadow)} .setup-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .setup-head h2{font-family:var(--font-serif);font-weight:560;font-size:18px} .setup-prog{font-size:12.5px;color:var(--secondary)} .setup-x{border:0;background:none;color:var(--secondary);font:inherit;font-size:12.5px;cursor:pointer;padding:2px 4px} .setup-x:hover{color:var(--ink);text-decoration:underline} .setup-bar{height:6px;border-radius:99px;background:var(--active-pill);margin:10px 0 14px;overflow:hidden} .setup-bar>i{display:block;height:100%;width:calc(var(--w,0)*100%);background:var(--brand);border-radius:99px;transition:width .4s var(--ease)} .setup-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px} .setup-step{display:flex;align-items:center;gap:12px;padding:9px 8px;border-radius:10px} .setup-step:hover{background:var(--row-tint)} .setup-tick{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--hairline);display:grid;place-items:center;color:var(--surface)} .setup-step.done .setup-tick{background:var(--brand);border-color:var(--brand)} .setup-step.done .setup-tick .ico{width:13px;height:13px} .setup-body{flex:1;min-width:0;display:flex;flex-direction:column} .setup-label{font-weight:600;font-size:14.5px;color:var(--ink)} .setup-step.done .setup-label{color:var(--secondary);text-decoration:line-through} .setup-opt{font-weight:400;color:var(--secondary)} .setup-sub{font-size:12.5px;color:var(--secondary)} .setup-go{flex:none;display:inline-flex;align-items:center;gap:5px;min-height:36px;padding:0 13px;border-radius:9px;background:var(--brand-deep);color:var(--ivory);font-weight:600;font-size:13px} .setup-go:hover{text-decoration:none;filter:brightness(1.06)} .setup-go .ico{width:14px;height:14px} .setup-status{flex:none;font-size:12px;font-weight:600;color:var(--brand)} .railsearch{display:flex;align-items:center;gap:11px;min-height:40px;margin:2px 0 8px;padding:0 12px;width:100%;border-radius:11px;border:1px solid rgba(243,239,230,.16);background:rgba(243,239,230,.05);color:rgba(243,239,230,.8);font:inherit;font-size:13.5px;font-weight:500;cursor:pointer;transition:background .16s var(--ease)} .railsearch .ico{width:17px;height:17px} .railsearch:hover{background:rgba(243,239,230,.1);color:var(--ivory)} .railsearch-k{margin-left:auto;font-size:11px;background:rgba(243,239,230,.14);border-radius:5px;padding:1px 6px;font-family:inherit} .cmdk{position:fixed;inset:0;z-index:90;background:rgba(20,30,25,.4);display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 16px} .cmdk[hidden]{display:none} .cmdk-box{width:min(600px,100%);max-height:70vh;display:flex;flex-direction:column;overflow:hidden;background:var(--surface);border:1px solid var(--hairline);border-radius:14px;box-shadow:0 30px 80px -24px rgba(20,30,25,.6)} .cmdk-input{font:inherit;font-size:1.05rem;padding:16px 18px;border:0;border-bottom:1px solid var(--hairline);background:none;color:var(--ink);outline:none} .cmdk-results{overflow:auto;padding:6px} .cmdk-empty{padding:18px;color:var(--secondary);font-size:.92rem;text-align:center} .cmdk-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:none;font:inherit;padding:10px 12px;border-radius:9px;cursor:pointer;color:var(--ink)} .cmdk-item.on,.cmdk-item:hover{background:var(--row-tint)} .cmdk-i-label{font-size:.95rem;font-weight:500} .cmdk-i-sub{font-size:.82rem;color:var(--secondary)} .cmdk-i-kind{margin-left:auto;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--secondary);background:var(--row-tint);padding:2px 7px;border-radius:20px} .cmdk-foot{display:flex;gap:14px;padding:8px 14px;border-top:1px solid var(--hairline);font-size:.75rem;color:var(--secondary)} .cmdk-foot kbd{background:var(--row-tint);border-radius:4px;padding:0 5px;font-family:inherit} .offline-banner{position:fixed;top:0;left:0;right:0;z-index:100;background:var(--attention,#B07A1E);color:#fff;text-align:center;font-size:.85rem;font-weight:600;padding:6px 12px} .offline-banner[hidden]{display:none} .pwa-install{position:fixed;left:16px;bottom:16px;z-index:60;border:1px solid var(--brand);background:var(--surface);color:var(--brand-deep);font:inherit;font-weight:600;font-size:.85rem;padding:.5rem .9rem;border-radius:11px;box-shadow:0 8px 24px -10px rgba(22,60,49,.4);cursor:pointer} .pwa-install[hidden]{display:none} /* iOS Add-to-Home-Screen hint (ui.tsx PWA_SCRIPT); the dashboard uses this sheet, so it needs the rule too. */ .ios-install{position:fixed;left:12px;right:12px;bottom:12px;z-index:90;display:flex;align-items:center;gap:.5rem;max-width:460px;margin:0 auto;background:var(--surface);border:1px solid var(--line,#e6e4da);border-radius:14px;padding:.6rem .6rem .6rem .9rem;box-shadow:0 12px 32px -12px rgba(22,60,49,.45);font-size:.85rem;color:var(--ink,#2c2c2a)} .ios-install[hidden]{display:none} .ios-install-txt{flex:1;line-height:1.35} .ios-share{vertical-align:-3px;margin:0 1px;color:var(--brand-deep)} .ios-install-x{flex:none;border:none;background:transparent;color:var(--ink-soft,#5f5e5a);font-size:1.25rem;line-height:1;cursor:pointer;padding:.05rem .35rem;border-radius:8px} .ios-install-x:hover{background:rgba(0,0,0,.06)} .qpanel{position:fixed;inset:0;z-index:80;background:rgba(20,30,25,.44);display:flex;align-items:center;justify-content:center;padding:20px} .qpanel[hidden]{display:none} .qpanel-card{background:var(--surface);border-radius:16px;box-shadow:0 30px 80px -30px rgba(20,30,25,.6);width:min(560px,100%);max-height:86vh;display:flex;flex-direction:column;overflow:hidden} .qpanel-head{display:flex;align-items:center;gap:12px;padding:18px 20px 4px} .qpanel-head h3{font-family:var(--font-serif);font-weight:560;font-size:20px} .qpanel-x{margin-left:auto;border:0;background:none;font-size:26px;line-height:1;color:var(--secondary);cursor:pointer;padding:0 4px} .qpanel-sub{padding:0 20px 8px;font-size:13px;color:var(--secondary)} .qpanel-body{overflow:auto;padding:6px 20px 8px;display:flex;flex-direction:column;gap:14px} .qgroup{display:flex;flex-direction:column;gap:2px} .qgroup-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--secondary);margin-bottom:4px} .qopt{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:9px;font-size:14px;cursor:pointer} .qopt:hover{background:var(--row-tint)} .qopt-cb{width:17px;height:17px;flex:none;accent-color:var(--brand)} .qopt-label{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .qopt-setup{font-size:11.5px;font-weight:700;color:var(--attention);background:var(--amber-wash);padding:1px 8px;border-radius:20px} .qopt-setup:hover{text-decoration:underline} .qpanel-foot{display:flex;align-items:center;gap:12px;padding:12px 20px 18px;border-top:1px solid var(--hairline)} .qpanel-note{font-size:12px;color:var(--secondary)} .qpanel-foot .qbtn{margin-left:auto} /* ============ PER-HOUSE HEALTH STRIP ============ */ .hcard{padding:16px 16px 15px;height:100%;position:relative;display:flex;flex-direction:column;gap:12px;text-decoration:none} .hcard .hh{display:flex;align-items:center;gap:10px} .hdot{width:11px;height:11px;border-radius:50%;flex:none} .hdot.ok{background:var(--positive);box-shadow:0 0 0 3px rgba(42,115,84,.16)} .hdot.warn{background:var(--attention);box-shadow:0 0 0 3px rgba(176,122,30,.16)} .hdot.clay{background:var(--negative);box-shadow:0 0 0 3px rgba(166,70,47,.16)} .hname{font-family:var(--font-serif);font-weight:560;font-size:16px;line-height:1.1;color:var(--ink)} .hcity{font-size:11.5px;color:var(--secondary);margin-top:1px} .hex{font-size:13px;font-weight:500;display:flex;align-items:center;gap:7px} .hex .ico{width:15px;height:15px;flex:none} .hex.ok{color:var(--secondary)} .hex.warn{color:var(--attention-ink)} .hex.clay{color:var(--negative)} .hfoot{margin-top:auto;display:flex;align-items:center;gap:10px} .hfoot .fillbar{flex:1} .hfoot .hocc{font-size:12px;color:var(--secondary);white-space:nowrap} .hcard .rowlink{position:absolute;inset:0;border-radius:var(--radius)} /* ============ COMPLIANCE COUNTDOWNS ============ */ .complist{padding:2px 8px 8px} .crow{position:relative;display:flex;align-items:center;gap:13px;min-height:54px;padding:8px 10px;border-top:1px solid var(--hairline);border-radius:11px;transition:background .16s var(--ease)} .complist .crow:first-child{border-top:0} @media (hover:hover){.crow:hover{background:var(--row-tint)}} .crow .cicon{width:34px;height:34px;flex:none;border-radius:9px;display:grid;place-items:center;background:var(--sage-wash);color:var(--brand)} .crow .cicon .ico{width:18px;height:18px} .crow .cbody{flex:1;min-width:0;display:flex;flex-direction:column} .crow .cwhat{font-weight:500;font-size:14px;color:var(--ink)} .crow .cwhere{font-size:12px;color:var(--secondary);margin-top:1px} .statuschip{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:4px 11px;border-radius:999px;border:1px solid} .statuschip .d{width:7px;height:7px;border-radius:50%;flex:none} .statuschip.soon{color:var(--secondary);border-color:var(--hairline);background:var(--base)} .statuschip.soon .d{background:var(--secondary)} .statuschip.expiring{color:var(--attention-ink);border-color:var(--amber-border);background:var(--amber-wash)} .statuschip.expiring .d{background:var(--attention)} .emptyline{margin:2px 16px 10px;font-size:12.5px;color:var(--secondary)} /* ============ PANELS (beds/admissions) ============ */ .panel{padding:6px 6px 8px;height:100%;display:flex;flex-direction:column} .phead{display:flex;align-items:center;gap:10px;padding:15px 16px 13px} .phead .pi{width:30px;height:30px;flex:none;border-radius:8px;display:grid;place-items:center;background:var(--sage-wash);color:var(--brand)} .phead .pi .ico{width:17px;height:17px} .phead h3{font-size:16px;font-weight:500} .beds-body{padding:4px 16px 16px;display:flex;flex-direction:column;gap:14px;flex:1} .pipe{display:flex;align-items:center;gap:9px} .pstep{flex:1;text-align:center;padding:11px 6px;border-radius:12px;background:var(--row-tint);border:1px solid var(--hairline)} .pstep.hot{background:var(--sage-wash);border-color:#cfe0d7} .pnum{display:block;font-family:var(--font-serif);font-weight:560;font-size:22px;line-height:1;color:var(--ink)} .pstep.hot .pnum{color:var(--brand)} .plabel{display:block;font-size:11px;color:var(--secondary);margin-top:4px} .pconn{width:12px;height:2px;background:var(--hairline);flex:none;border-radius:2px} .oldest{font-size:12.5px;color:var(--secondary)} .oldest b{color:var(--ink);font-weight:600} .ref-label{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--secondary);margin:0 2px 9px} .qempty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;padding:26px 20px;background:transparent;border:1px dashed var(--hairline);border-radius:var(--radius)} .qempty-ico{width:46px;height:46px;border-radius:50%;background:var(--surface);border:1px solid var(--hairline);display:grid;place-items:center;color:var(--secondary)} .qempty-ico .ico{width:24px;height:24px} .qempty-msg{margin:0;font-size:14px;color:var(--secondary);max-width:38ch} /* ============ FOOTER STRIP ============ */ .qa{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:2px} .qbtn{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px;border-radius:12px;font-weight:600;font-size:14px;background:var(--surface);color:var(--ink);border:1px solid var(--hairline);box-shadow:var(--shadow);transition:border-color .16s var(--ease),transform .16s var(--ease),box-shadow .16s var(--ease)} .qbtn .ico{width:18px;height:18px;color:var(--secondary)} .qbtn:hover{border-color:var(--hairline-hover);transform:translateY(-1px);box-shadow:var(--shadow-hover)} .qbtn.primary{background:var(--brand);color:var(--on-brand);border-color:transparent;box-shadow:0 1px 2px rgba(22,60,49,.16),0 10px 22px -12px rgba(31,107,84,.6)} .qbtn.primary .ico{color:var(--on-brand)} .qbtn.primary:hover{background:var(--brand-deep)} .minor{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;margin-top:16px;font-size:13px;color:var(--secondary)} .minor a{color:var(--brand-deep);font-weight:600;display:inline-flex;align-items:center;gap:5px} .minor a .ico{width:15px;height:15px} .mfoot{display:flex;justify-content:flex-end;align-items:center;gap:14px;flex-wrap:wrap;margin-top:26px;padding-top:18px;border-top:1px solid var(--hairline);color:var(--secondary);font-size:12.5px} .madeby a{color:var(--brand-deep);font-weight:600} .tabbar{display:none} /* ============ RESPONSIVE ============ */ @media (max-width:1100px){ .app{grid-template-columns:72px 1fr} .wordmark,.nav a .lbl,.railchip .who,.railsignout .lbl{display:none} .brandmark{justify-content:center;padding:6px 0 18px} .nav a{justify-content:center;padding:0} .railchip{justify-content:center;padding:8px} .railsignout{justify-content:center;padding:0} .g-2{grid-template-columns:1fr} } @media (max-width:720px){ .app{grid-template-columns:1fr} .rail{display:none} .main{padding:22px 16px calc(76px + env(safe-area-inset-bottom))} .kpis,.g-2,.g-houses{grid-template-columns:1fr} .pagehead{align-items:flex-start} .qrow{flex-wrap:wrap} .qact{margin-left:51px} .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--surface);border-top:1px solid var(--hairline);padding:8px 6px calc(8px + env(safe-area-inset-bottom));justify-content:space-around;box-shadow:0 -6px 20px -12px rgba(28,38,33,.2)} .tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:56px;min-height:48px;justify-content:center;color:var(--secondary);font-size:10px;font-weight:600} .tabbar a .ico{width:21px;height:21px} .tabbar a.active{color:var(--brand-deep)} } @media (max-width:460px){ .kpis{grid-template-columns:1fr} } /* ============ REDUCED MOTION (silent OS fallback) ============ */ @media (prefers-reduced-motion:reduce){ .reveal{transition:opacity .12s linear !important;transform:none !important} .fillbar>i{transition:none !important} .card{transition:none} } /* ============ ASSISTANT WIDGET (restyled to match) ============ */ .ai-fab{position:fixed;right:20px;bottom:20px;z-index:60;border:none;cursor:pointer;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--brand-deep));color:var(--ivory);display:flex;align-items:center;justify-content:center;font-size:1.5rem;box-shadow:0 8px 24px -6px rgba(22,60,49,.5);transition:transform .16s var(--ease)} .ai-fab:hover{transform:translateY(-2px) scale(1.04)} .ai-fab.hidden{display:none} .ai-spark{line-height:1} .ai-panel{position:fixed;right:20px;bottom:20px;z-index:61;width:min(390px,calc(100vw - 32px));height:min(580px,calc(100vh - 40px));background:var(--surface);border:1px solid var(--hairline);border-radius:18px;box-shadow:0 24px 60px -12px rgba(28,38,33,.32);display:flex;flex-direction:column;overflow:hidden;color:var(--ink)} .ai-panel[hidden]{display:none} .ai-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:linear-gradient(135deg,var(--sidebar),var(--sidebar-2));color:var(--ivory)} .ai-title{font-family:var(--font-serif);font-weight:560;font-size:16px;display:flex;align-items:center;gap:8px} .ai-x{background:none;border:none;color:var(--ivory);font-size:1.35rem;cursor:pointer;line-height:1;padding:0 4px;transition:opacity .14s ease} .ai-x:hover{opacity:.72} .ai-thread{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px;background:var(--base)} .msg{max-width:82%;padding:9px 13px;border-radius:14px;font-size:14px;line-height:1.5} .msg .msg-body{display:block;white-space:pre-wrap} .msg.in{background:var(--surface);border:1px solid var(--hairline);align-self:flex-start;border-bottom-left-radius:5px} .msg.out{background:var(--sage-wash);align-self:flex-end;border-bottom-right-radius:5px;color:var(--ink)} .ai-doneline{font-size:12.5px;color:var(--secondary);background:transparent !important;border:0 !important;padding:2px 4px} .ai-doneline .ai-refresh{color:var(--brand-deep);font-weight:600} .ai-compose{display:flex;gap:8px;padding:10px;border-top:1px solid var(--hairline);align-items:center;background:var(--surface)} .ai-compose input{flex:1;min-height:44px;border:1px solid var(--hairline);border-radius:11px;padding:9px 12px;font:inherit;background:var(--base);color:var(--ink);-webkit-text-fill-color:var(--ink)} .ai-compose input:focus{outline:2px solid var(--brand);outline-offset:1px} .ai-mic{background:var(--sage-wash);border:none;width:44px;height:44px;border-radius:11px;cursor:pointer;font-size:1.05rem;flex-shrink:0} .ai-mic.on{background:var(--clay-wash)} .ai-send{min-height:44px;padding:0 14px;flex-shrink:0;border-radius:11px;background:var(--brand);color:var(--on-brand);font-weight:600} .ai-send:hover{background:var(--brand-deep)} .ai-quick{display:flex;flex-wrap:wrap;gap:7px;padding:2px 2px 5px} .ai-qbtn,.ai-qchip{font:inherit;cursor:pointer;border-radius:999px;min-height:36px;padding:6px 14px;font-size:13px;font-weight:600;transition:filter .14s ease,background .14s ease} .ai-qbtn{border:none;background:var(--brand);color:var(--on-brand)} .ai-qbtn:hover{filter:brightness(1.08)} .ai-quick-btns .ai-qbtn:last-child{background:var(--surface);color:var(--ink);border:1px solid var(--hairline)} .ai-quick-btns .ai-qbtn:last-child:hover{background:var(--row-tint);filter:none} .ai-qchip{border:1px solid var(--hairline);background:var(--surface);color:var(--brand-deep);font-weight:550} .ai-qchip:hover{background:var(--sage-wash);border-color:var(--sage-wash)} @media print{.ai-fab,.ai-panel{display:none !important}} @media (max-width:720px){.ai-fab{bottom:calc(76px + env(safe-area-inset-bottom))}.ai-panel{bottom:calc(76px + env(safe-area-inset-bottom));height:min(560px,calc(100vh - 120px))}} /* ============ RISK RADAR - "who to check on" (supportive) ============ */ .riskcard{padding:6px 6px 8px} .rrow{position:relative;display:flex;align-items:center;gap:13px;padding:12px 14px 12px 12px;border-top:1px solid var(--hairline);border-radius:11px;text-decoration:none;color:var(--ink);transition:background .16s var(--ease)} .rrow:first-of-type{border-top:0} @media (hover:hover){.rrow:hover{background:var(--row-tint)}} .rrow .ricon{width:38px;height:38px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--sage-wash);color:var(--brand)} .rrow .ricon .ico{width:19px;height:19px} .rbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px} .rtop{display:flex;align-items:center;gap:9px;flex-wrap:wrap} .rname{font-weight:600;font-size:14.5px;color:var(--ink)} .rhouse{font-size:12px;color:var(--secondary)} .rlevel{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;text-transform:capitalize;padding:2px 9px;border-radius:999px;border:1px solid} .rlevel .d{width:6px;height:6px;border-radius:50%;flex:none} .rlevel.watch{color:var(--secondary);border-color:var(--hairline);background:var(--base)} .rlevel.watch .d{background:var(--secondary)} .rlevel.elevated{color:var(--attention-ink);border-color:var(--amber-border);background:var(--amber-wash)} .rlevel.elevated .d{background:var(--attention)} .rlevel.high{color:var(--negative);border-color:#e2b6ad;background:var(--clay-wash)} .rlevel.high .d{background:var(--negative)} .rsignals{font-size:12.5px;color:var(--secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rrow .rarrow{width:16px;height:16px;flex:none;color:var(--secondary)} /* ============ BEDS ↔ WAITLIST MATCHING ============ */ .g-beds{grid-template-columns:repeat(2,1fr);gap:var(--gap)} .bwcard{padding:14px 16px 12px;height:100%;display:flex;flex-direction:column;gap:12px} .bw-head{display:flex;align-items:flex-start;gap:12px} .bw-bed{display:flex;align-items:center;gap:11px;min-width:0;flex:1} .bw-ico{width:34px;height:34px;flex:none;border-radius:9px;display:grid;place-items:center;background:var(--sage-wash);color:var(--brand)} .bw-ico .ico{width:18px;height:18px} .bw-meta{min-width:0;display:flex;flex-direction:column} .bw-label{font-family:var(--font-serif);font-weight:560;font-size:15px;line-height:1.15;color:var(--ink)} .bw-room{font-size:11.5px;color:var(--secondary);margin-top:1px} .bw-head .statuschip{flex:none} .bw-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px} .bw-cand{display:flex;align-items:center;gap:10px;padding:8px 8px;border-radius:9px;text-decoration:none;color:var(--ink);transition:background .16s var(--ease)} @media (hover:hover){a.bw-cand:hover{background:var(--row-tint)}} .bw-cav{width:28px;height:28px;flex:none;border-radius:50%;background:var(--active-pill);color:var(--brand-deep);display:grid;place-items:center;font-weight:600;font-size:12px} .bw-cname{flex:1;min-width:0;font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .bw-cwait{flex:none;font-size:11.5px;color:var(--secondary)} .bw-more{font-size:11.5px;color:var(--secondary);padding:4px 8px 2px} .bw-empty{margin:0;padding:2px 8px 4px;font-size:12.5px;color:var(--secondary)} @media (max-width:720px){.g-beds{grid-template-columns:1fr}} /* ============ HOUSE WRAPPED - the monthly recap (#48) ============ */ /* A warm, shareable, Spotify-Wrapped-style page. Reuses the design tokens: same paper base, forest/honey palette, Newsreader display type, always-on motion. Its own scoped block so it never disturbs the dashboard proper. */ .wrapped-body{background:radial-gradient(1200px 620px at 50% -8%,#FBF3E2 0%,var(--base) 46%,var(--base) 100%);min-height:100dvh} .wico{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .wrapped{max-width:820px;margin:0 auto;padding:22px clamp(16px,4vw,32px) 60px} .wrap-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:26px} .wback{display:inline-flex;align-items:center;gap:7px;color:var(--secondary);font-weight:600;font-size:13.5px;min-height:40px} .wback-i{width:16px;height:16px;transform:rotate(180deg)} .wback:hover{color:var(--brand-deep)} .wtop-actions{display:flex;align-items:center;gap:8px} .wghost{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 13px;border-radius:11px;border:1px solid var(--hairline);background:var(--surface);color:var(--ink);font-weight:600;font-size:13px;box-shadow:var(--shadow);transition:border-color .16s var(--ease),transform .16s var(--ease),box-shadow .16s var(--ease)} .wghost .wico{width:16px;height:16px;color:var(--secondary)} .wghost:hover{border-color:var(--hairline-hover);transform:translateY(-1px);box-shadow:var(--shadow-hover)} /* Hero */ .whero{text-align:center;margin:6px 0 30px} .weyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:var(--surface);border:1px solid var(--amber-border);color:var(--attention-ink);font-weight:700;font-size:12px;letter-spacing:.05em;text-transform:uppercase;box-shadow:var(--shadow)} .weyebrow-i{width:15px;height:15px;fill:var(--attention);stroke:none} .wtitle{margin:20px 0 0;font-family:var(--font-serif);font-weight:560;font-size:clamp(46px,11vw,84px);line-height:.98;letter-spacing:-.02em;color:var(--brand-deep)} .wtitle-2{color:var(--attention);font-style:italic} .wlede{max-width:44ch;margin:18px auto 0;font-size:16px;line-height:1.6;color:var(--secondary)} /* Big centerpiece number */ .wbig{position:relative;overflow:hidden;text-align:center;background:linear-gradient(180deg,var(--sidebar),var(--sidebar-2));color:var(--on-brand);border-radius:26px;padding:44px 24px 40px;box-shadow:0 30px 70px -30px rgba(20,40,32,.7);margin-bottom:var(--gap)} .wbig-glow{position:absolute;inset:-40% -10% auto;height:70%;background:radial-gradient(closest-side,rgba(220,196,142,.34),transparent 70%);pointer-events:none} .wbig-icon{position:relative;width:52px;height:52px;margin:0 auto 14px;border-radius:15px;display:grid;place-items:center;background:rgba(243,239,230,.12);color:#F4E4BE} .wbig-icon .wico{width:28px;height:28px;stroke-width:1.5} .wbig-n{position:relative;display:block;font-family:var(--font-serif);font-weight:560;font-size:clamp(64px,17vw,124px);line-height:.92;letter-spacing:-.03em;color:#FBF3E2;text-shadow:0 2px 30px rgba(0,0,0,.18)} .wbig-l{position:relative;display:block;margin-top:8px;font-size:15px;font-weight:600;color:rgba(243,239,230,.9);letter-spacing:.01em} .wbig-sub{position:relative;display:block;margin-top:12px;font-size:13px;color:rgba(243,239,230,.66)} /* Stat grid */ .wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:var(--gap)} .wstat{background:var(--surface);border:1px solid var(--hairline);border-radius:18px;padding:22px 18px 18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:3px;transition:transform .18s var(--ease),box-shadow .18s var(--ease)} @media (hover:hover){.wstat:hover{transform:translateY(-3px);box-shadow:var(--shadow-hover)}} .wstat-n{font-family:var(--font-serif);font-weight:560;font-size:clamp(38px,7vw,52px);line-height:1;letter-spacing:-.02em;color:var(--ink)} .wstat-l{font-size:14px;font-weight:600;color:var(--ink);margin-top:5px} .wstat-sub{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--secondary);margin-top:2px} .wstat-i{width:14px;height:14px;flex:none;color:var(--secondary)} .wstat.w-gold{background:linear-gradient(180deg,var(--amber-wash),var(--surface) 64%);border-color:var(--amber-border)} .wstat.w-gold .wstat-n{color:var(--attention-ink)} .wstat.w-gold .wstat-i{color:var(--attention)} .wstat.w-sage{background:linear-gradient(180deg,var(--sage-wash),var(--surface) 64%);border-color:#cfe0d7} .wstat.w-sage .wstat-n{color:var(--positive)} .wstat.w-sage .wstat-i{color:var(--brand)} /* Clean-rate dial */ .wring-card{display:flex;align-items:center;gap:22px;background:var(--surface);border:1px solid var(--hairline);border-radius:20px;padding:22px 24px;box-shadow:var(--shadow);margin-bottom:var(--gap)} .wring{position:relative;width:116px;height:116px;flex:none;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--brand) calc(var(--p,0)*360deg),var(--sage-wash) 0);transition:none} .wring::after{content:"";position:absolute;inset:11px;border-radius:50%;background:var(--surface)} .wring-val{position:relative;font-family:var(--font-serif);font-weight:560;font-size:28px;color:var(--brand-deep)} .wring-copy h2{font-family:var(--font-serif);font-weight:560;font-size:19px;color:var(--ink)} .wring-copy p{margin:6px 0 0;font-size:13.5px;line-height:1.55;color:var(--secondary)} /* Standouts */ .wstandout{background:linear-gradient(180deg,var(--amber-wash),var(--surface) 80%);border:1px solid var(--amber-border);border-radius:20px;padding:22px 24px;box-shadow:var(--shadow);margin-bottom:var(--gap)} .wstandout-hd{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--attention-ink)} .wstandout-hd .wico{width:15px;height:15px;fill:var(--attention);stroke:none} .wstandout-line{margin:12px 0 0;font-family:var(--font-serif);font-weight:460;font-size:clamp(18px,3.4vw,23px);line-height:1.35;color:var(--ink);text-wrap:balance} .wstandout-line+.wstandout-line{border-top:1px solid var(--amber-border);padding-top:12px} /* Footer */ .wfoot{text-align:center;margin-top:30px} .wfoot-msg{max-width:52ch;margin:0 auto;font-size:15px;line-height:1.6;color:var(--secondary)} .wfoot-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:20px 0 22px} .wbtn{display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:0 20px;border-radius:12px;font-weight:600;font-size:14.5px;background:var(--brand);color:var(--on-brand);border:1px solid transparent;box-shadow:0 1px 2px rgba(22,60,49,.16),0 12px 24px -12px rgba(31,107,84,.6);transition:background .16s var(--ease),transform .16s var(--ease)} .wbtn .wico{width:17px;height:17px;color:var(--on-brand)} .wbtn:hover{background:var(--brand-deep);transform:translateY(-1px)} .wbtn.ghost{background:var(--surface);color:var(--ink);border-color:var(--hairline);box-shadow:var(--shadow)} .wbtn.ghost:hover{background:var(--row-tint)} .wmade{display:block;font-size:12px;color:var(--secondary)} .wmade a{color:var(--brand-deep);font-weight:600} /* Wrapped motion - always on (no reduce toggle, per house rule). */ .wreveal{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .wreveal.in{opacity:1;transform:none} @media (max-width:640px){ .wgrid{grid-template-columns:repeat(2,1fr)} .wring-card{flex-direction:column;text-align:center;gap:16px} } @media (max-width:400px){ .wgrid{grid-template-columns:1fr} } @media print{ .wrapped-body{background:#fff} .wrap-top,.wfoot-row,.wmade{display:none} .wbig{box-shadow:none;-webkit-print-color-adjust:exact;print-color-adjust:exact} .wreveal{opacity:1;transform:none} } /* ============ DARK MODE - literal-border patches ============ */ /* Everything else in this file reads a token and cascades. Only these few verdict/step chips hardcode light accent-borders; darken them so they read as a subtle edge on the now-dark tint rather than a bright hairline. */ :root[data-theme="dark"] .verdict.ok,:root[data-theme="dark"] .pstep.hot{border-color:#2f5142} :root[data-theme="dark"] .verdict.neg,:root[data-theme="dark"] .rlevel.high{border-color:#5a352c} /* ─ House workspace: picker + "Viewing X" bar (per-house view) ─ */ .housebar{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;margin:0 0 1rem;padding:.45rem .6rem;border:1px solid var(--line,#e6e1d8);border-radius:12px;background:var(--card,#fff)} .housebar.is-on{border-color:var(--accent,#2f7d5b);background:#eef6f1;background:color-mix(in srgb,var(--accent,#2f7d5b) 9%,#fff)} .housebar.is-org{background:var(--wash,#f6f3ee)} .housebar-note{font-size:.85rem;color:var(--ink,#26221c);font-weight:550} .housebar-note b{font-weight:750} .housebar.is-on .housebar-note{color:var(--accent,#2f7d5b)} .housebar-exit{margin-left:auto} .housebar-exit>button{font:inherit;font-size:.8rem;font-weight:600;cursor:pointer;border:1px solid var(--line,#ddd);background:var(--card,#fff);color:var(--ink,#26221c);border-radius:99px;padding:.3rem .75rem} .housebar-exit>button:hover{border-color:var(--accent,#2f7d5b);color:var(--accent,#2f7d5b)} .hpick{position:relative} .hpick-btn{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;list-style:none;font-weight:650;font-size:.88rem;color:var(--ink,#26221c);border:1px solid var(--line,#ddd);background:var(--card,#fff);border-radius:99px;padding:.34rem .75rem;user-select:none} .hpick-btn::-webkit-details-marker{display:none} .hpick-btn::marker{content:""} .hpick[open]>.hpick-btn,.hpick-btn:hover{border-color:var(--accent,#2f7d5b)} .hpick-car{font-size:.65rem;opacity:.65} .hpick-menu{position:absolute;z-index:60;top:calc(100% + 6px);left:0;min-width:210px;display:flex;flex-direction:column;padding:.35rem;background:var(--card,#fff);border:1px solid var(--line,#e0dccf);border-radius:12px;box-shadow:0 14px 36px rgba(20,16,10,.17)} .hpick-opt{text-align:left;font:inherit;font-size:.88rem;font-weight:550;cursor:pointer;border:0;background:none;color:var(--ink,#26221c);border-radius:8px;padding:.48rem .55rem} .hpick-opt:hover{background:var(--wash,#f3efe7)} .hpick-opt.on{font-weight:750;color:var(--accent,#2f7d5b)} @media (max-width:640px){.hpick-menu{min-width:min(80vw,260px)}} .hcard-form{display:contents} button.hcard{-webkit-appearance:none;appearance:none;width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer} /* === Shared overlay UI ported for the self-contained dashboard shell (2026-09-02): Quick tab + in-app modal + quick-tab picker + demo AI spotlight. Uses var(--x, fallback) so it survives whatever tokens this shell does or doesn't define. === */ .railshort{margin-top:6px;padding-top:7px;border-top:1px solid rgba(243,239,230,.1)} .railquick-list{display:flex;flex-direction:column;gap:1px} .railshort-hd{display:flex;align-items:center;justify-content:space-between;padding:2px 12px 3px} .railshort-t{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:rgba(243,239,230,.5)} .railshort-edit{background:none;border:0;color:rgba(243,239,230,.62);font:inherit;font-size:11.5px;font-weight:600;cursor:pointer;padding:2px 7px;border-radius:7px} .railshort-edit:hover{background:rgba(243,239,230,.1);color:var(--ivory,#F3EFE6)} .railshort-item{display:flex;align-items:center;gap:4px;min-height:40px;padding:0 12px;border-radius:11px;color:rgba(243,239,230,.78);font-weight:500;font-size:14px;text-decoration:none;transition:background .16s,color .16s} .railshort-item:hover{background:rgba(243,239,230,.07);color:var(--ivory,#F3EFE6);text-decoration:none} .railshort-dot{width:5px;height:5px;margin:0 8px 0 5px;border-radius:50%;background:currentColor;opacity:.6;flex:none} .railshort-empty{color:rgba(243,239,230,.5);font-size:11.5px;line-height:1.45;padding:1px 12px 3px;margin:0} .railshort-empty b{color:rgba(243,239,230,.72);font-weight:600} .ep-modal-ov{position:fixed;inset:0;background:rgba(28,38,33,.42);display:flex;align-items:center;justify-content:center;padding:1.25rem;z-index:200;animation:epModalIn .16s ease} .ep-modal{background:var(--surface,#fff);border:1px solid var(--line,#E6E9E3);border-radius:16px;box-shadow:0 10px 40px -12px rgba(28,38,33,.4);padding:1.4rem 1.4rem 1.15rem;width:100%;max-width:420px;animation:epModalPop .18s ease} .ep-modal-t{font-family:var(--font-head,Georgia,serif);font-size:1.25rem;margin:0 0 .8rem;color:var(--forest,#164C3C)} .ep-modal-in{width:100%;font:inherit;padding:.7rem .8rem;border:1px solid var(--line,#E6E9E3);border-radius:10px;background:#fdfdfc;color:var(--ink,#1C2621)} .ep-modal-in:focus{outline:2px solid var(--accent,#1F6B54);outline-offset:1px;border-color:var(--accent,#1F6B54)} .ep-modal-acts{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1rem} .ep-modal-acts .btn{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:.4rem .95rem;border-radius:10px;font:inherit;font-weight:600;font-size:.9rem;cursor:pointer;border:1px solid transparent} .ep-modal-acts .btn:not(.ghost){background:var(--accent,#1F6B54);color:var(--accent-ink,#F5FBF8)} .ep-modal-acts .btn.ghost{background:var(--surface,#fff);color:var(--ink,#1C2621);border-color:var(--line,#E6E9E3)} @keyframes epModalIn{from{opacity:0}to{opacity:1}} @keyframes epModalPop{from{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:none}} .qt-modal{max-width:440px} .qt-sub{color:var(--ink-soft,#4A6158);font-size:.9rem;margin:0 0 .8rem} .qt-list{max-height:46vh;overflow-y:auto;display:flex;flex-direction:column;gap:1px;margin:0 -.3rem;padding:0 .3rem} .qt-row{display:flex;align-items:center;gap:.65rem;padding:.5rem .55rem;border-radius:9px;cursor:pointer;font-weight:550;color:var(--ink,#1C2621)} .qt-row:hover{background:var(--accent-soft,#EFF4F0)} .qt-row input{width:18px;height:18px;accent-color:var(--accent,#1F6B54);flex:none;cursor:pointer} .ai-fab.ai-nudge{animation:aiNudge 1s ease 3} @keyframes aiNudge{0%,58%,100%{transform:translateY(0)}16%{transform:translateY(-10px)}30%{transform:translateY(0)}42%{transform:translateY(-5px)}} @media (max-width:1080px){.railshort{display:none}} /* Floating setup coach (ported) + the empty-dashboard welcome verdict */ .verdict.welcome{color:var(--ink-soft,#4A6158);background:transparent;font-weight:500} .verdict.welcome .vdot{background:var(--accent,#1F6B54)} .ep-coach{position:fixed;top:74px;right:18px;z-index:60;width:330px;max-width:calc(100vw - 32px);animation:epCoachIn .3s ease} .ep-coach-body{position:relative;background:var(--surface,#fff);border:1px solid var(--line,#E6E9E3);border-radius:16px;box-shadow:0 12px 40px -14px rgba(20,40,30,.35);padding:1.1rem 1.15rem 1rem} .ep-coach-min{position:absolute;top:8px;right:10px;width:26px;height:26px;border:0;background:none;color:var(--ink-soft,#4A6158);font-size:1.25rem;line-height:1;cursor:pointer;border-radius:7px} .ep-coach-min:hover{background:var(--row-tint,#F5F7F4);color:var(--ink,#1C2621)} .ep-coach-welcome{font-family:var(--font-head,Georgia,serif);font-size:1.2rem;color:var(--forest,#164C3C);line-height:1.15;padding-right:22px} .ep-coach-sub{color:var(--ink-soft,#4A6158);font-size:.86rem;line-height:1.4;margin:.3rem 0 .8rem} .ep-coach-bar{height:6px;background:var(--accent-soft,#EFF4F0);border-radius:999px;overflow:hidden} .ep-coach-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--accent,#1F6B54),var(--accent-deep,#164C3C));border-radius:999px;transition:width .4s ease} .ep-coach-prog{font-size:.72rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-soft,#4A6158);margin:.45rem 0 .7rem} .ep-coach-steps{display:flex;flex-direction:column;gap:.25rem} .ep-coach-step{display:flex;align-items:center;gap:.65rem;padding:.5rem .55rem;border-radius:11px;text-decoration:none;color:var(--ink,#1C2621);transition:background .15s ease} .ep-coach-step:hover{background:var(--accent-soft,#EFF4F0);text-decoration:none} .ep-coach-num{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:.82rem;font-weight:700;background:var(--accent-soft,#EFF4F0);color:var(--accent,#1F6B54)} .ep-coach-step.done .ep-coach-num{background:var(--accent,#1F6B54);color:#fff} .ep-coach-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25} .ep-coach-txt b{font-weight:650;font-size:.92rem} .ep-coach-txt span{color:var(--ink-soft,#4A6158);font-size:.78rem} .ep-coach-step.done .ep-coach-txt b{color:var(--ink-soft,#4A6158);text-decoration:line-through} .ep-coach-go{color:var(--accent,#1F6B54);font-weight:700;opacity:0;transition:opacity .15s} .ep-coach-step:hover .ep-coach-go{opacity:1} .ep-coach-step.done .ep-coach-go{display:none} .ep-coach-pill{display:none;align-items:center;gap:.5rem;background:var(--accent,#1F6B54);color:#fff;border:0;cursor:pointer;font:inherit;font-weight:650;font-size:.9rem;padding:.6rem 1rem;border-radius:999px;box-shadow:0 8px 24px -10px rgba(20,40,30,.5)} .ep-coach-pilln{background:rgba(255,255,255,.22);border-radius:999px;padding:.05rem .5rem;font-size:.8rem} .ep-coach.min{width:auto} .ep-coach.min .ep-coach-body{display:none} .ep-coach.min .ep-coach-pill{display:inline-flex} @keyframes epCoachIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} @media (max-width:620px){.ep-coach{top:auto;bottom:84px;right:12px;left:12px;width:auto;max-width:none}.ep-coach.min{left:auto}} .ep-coach-import{display:block;margin-top:.5rem;padding-top:.55rem;border-top:1px solid var(--line,#E6E9E3);font-size:.82rem;font-weight:600;color:var(--honey-ink,#7A5411);text-decoration:none} .ep-coach-import:hover{text-decoration:underline} /* The phone "More" sheet: everything that does not fit the five tab slots. The sidebar is display:none at this width, so without this the sections below the fifth are not reachable on a phone at all. Hidden with the whole .tabbar on desktop. */ .tabmore{position:static} .tabmore>summary{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:56px;min-height:48px;color:var(--secondary);font-size:10px;font-weight:600;cursor:pointer;list-style:none} .tabmore>summary::-webkit-details-marker{display:none} .tabmore>summary::marker{content:""} .tabmore>summary .icon svg,.tabmore>summary .ico{width:21px;height:21px} .tabmore[open]>summary,.tabmore>summary.on,.tabmore>summary.active{color:var(--brand-deep)} .tabsheet{position:absolute;left:8px;right:8px;bottom:100%;margin-bottom:8px;max-height:min(62vh,420px);overflow:auto;-webkit-overflow-scrolling:touch;background:var(--surface);border:1px solid var(--hairline);border-radius:14px;box-shadow:0 18px 44px -18px rgba(28,38,33,.45);padding:8px;display:flex;flex-direction:column;gap:2px;text-align:left} .tabsheet-hd{display:flex;align-items:center;gap:10px;min-height:44px;padding:10px 12px;border-radius:10px;font-weight:600;font-size:14px;text-decoration:none} .tabsheet-hd .icon svg,.tabsheet-hd .ico{width:19px;height:19px} .tabsheet-sub{display:flex;flex-direction:column;padding:0 0 6px 42px} .tabsheet-sub a{display:flex;align-items:center;min-height:42px;padding:2px 10px;border-radius:9px;color:var(--secondary);font-size:13.5px;text-decoration:none} @media (hover:hover) and (pointer:fine){.tabsheet-hd:hover,.tabsheet-sub a:hover{background:var(--wash,rgba(0,0,0,.05))}} .tabsheet-hd:active,.tabsheet-sub a:active{background:var(--wash,rgba(0,0,0,.08))} /* The tab bar is the ONLY navigation on a phone, so nothing may sit on top of it. z-index 70 puts it above the assistant FAB (50) and the setup coach (60). The FAB covered the right-most tab, which is "More" - so tapping the centre of the one control that reaches Settings opened the AI assistant instead. Raising the bar also lifts the open sheet, which is trapped in the bar's stacking context and was being covered by the coach. The FAB moves clear too, so it is not merely hidden behind the bar. */ .tabbar{z-index:70} @media (max-width:720px){ .ai-fab{bottom:calc(76px + env(safe-area-inset-bottom))} .ai-panel{bottom:calc(76px + env(safe-area-inset-bottom));max-height:min(560px,calc(100vh - 150px))} .help-fab{bottom:calc(76px + env(safe-area-inset-bottom))} }