/* The portal's one stylesheet (sign in, create your account, the customer's and the client's views), taken from the design canvas
   "Tuhaye Portal Design": black and white, Geist and Geist Mono served from this site (fonts/, SIL Open Font License: fonts/OFL.txt),
   corners of 6, 8 and 10 px, controls at least 44 px tall. The 3D model (/p/<slug>) and the demo keep their own look. */

@font-face{font-family:Geist;font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/geist-latin.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:Geist;font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/geist-latin-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:'Geist Mono';font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/geist-mono-latin.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:'Geist Mono';font-style:normal;font-display:swap;font-weight:100 900;src:url(fonts/geist-mono-latin-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}

:root{
  --ink:#0A0A0A; --ink-2:#3F3F3F; --grey:#6B6B6B; --hint:#8A8A8A; --edge:#D4D4D4; --line:#E6E6E6; --soft:#F5F5F5; --panel:#FAFAFA; --paper:#FFFFFF;
  --on-ink-grey:#A3A3A3; --on-ink-line:#333333;
  --r-sm:6px; --r-md:8px; --r-lg:10px; --tap:44px;
  --sans:Geist,system-ui,-apple-system,'Segoe UI',sans-serif; --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}   /* over the layouts' display rules */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
h1{font-size:34px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
h1,h2,h3,.title,.h2,.h3{text-wrap:balance}
p,li,figcaption{text-wrap:pretty}   /* no word alone on a last line */
a{color:var(--ink)} a:hover{color:var(--ink-2)}
img{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.on-ink :focus-visible{outline-color:var(--paper)}
.hide-visually{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:16px;top:-60px;z-index:10;min-height:var(--tap);display:inline-flex;align-items:center;background:var(--ink);color:var(--paper);padding:0 14px;border-radius:var(--r-sm);text-decoration:none}
.skip:focus{top:16px;color:var(--paper)}

/* type */
.muted{color:var(--grey)}
.small{font-size:13px}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.on-ink .eyebrow,.on-ink .muted{color:var(--on-ink-grey)}
.title{font-size:clamp(34px,6vw,52px);font-weight:600;letter-spacing:-.04em;line-height:1}
.stack{display:flex;flex-direction:column;gap:var(--gap,16px)}

/* the brand: your logo's mark and name (8.5 puts in the real ones) */
.brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.01em}
.brand .mark{width:28px;height:28px;flex:none;border-radius:5px;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}
.on-ink .brand .mark{background:var(--paper);color:var(--ink)}
.brand.chip{background:var(--paper);color:var(--ink);border-radius:var(--r-md);padding:8px 14px 8px 8px}
.on-ink .brand.chip .mark{background:var(--ink);color:var(--paper)}
.on-ink .brand.chip .mark.has-logo{background:none}
.logo-slot{display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);text-align:center;padding:0 10px}

/* buttons and fields */
.btn{min-height:48px;padding:0 22px;border-radius:var(--r-sm);border:1px solid var(--ink);background:var(--ink);color:var(--paper);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:500;text-decoration:none;cursor:pointer}
.btn:hover{background:#262626;border-color:#262626;color:var(--paper)}
.btn.line{background:var(--paper);color:var(--ink);border-color:var(--edge)}
.btn.line:hover{border-color:var(--ink);color:var(--ink)}
.btn.small{min-height:var(--tap);padding:0 14px;font-size:14px}
.btn.wide{width:100%}
.btn svg{flex:none}
.btn:has(>.ell){max-width:100%}
.btn .ell{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}   /* a long label (an email) on one line, cut short, the whole of it in its title */
.btn.square{width:var(--tap);padding:0}
.linkb{min-height:var(--tap);border:0;background:none;padding:0 2px;color:var(--ink-2);font-size:13px;text-decoration:underline;cursor:pointer}
.field .row .linkb{margin:-8px 0}   /* a 44 px target that doesn't push the field down */
a.go{font-weight:500;display:inline-block;padding:12px 0;margin:-12px 0}
.field{display:flex;flex-direction:column;gap:8px}
.field label,.field .label{font-size:13px;font-weight:500}
.field .row{display:flex;justify-content:space-between;align-items:center;gap:12px}
.input{width:100%;min-height:48px;border:1px solid var(--edge);border-radius:var(--r-sm);padding:0 14px;background:var(--paper);color:var(--ink);font-size:16px}
.input::placeholder{color:var(--hint)}
.input:hover{border-color:#B5B5B5}
.or{display:flex;align-items:center;gap:12px;color:var(--grey);font-size:13px}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.note{border-top:1px solid var(--line);padding-top:20px;display:flex;gap:12px;align-items:flex-start;color:var(--grey);font-size:13px}
.note svg{flex:none;margin-top:2px}

/* banners: errors and notices from portal.js (Portal.banner) */
.banners{display:flex;flex-direction:column;gap:8px}
.banners:empty{display:none}
.banner{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--edge);background:var(--panel);border-radius:var(--r-md);padding:12px 14px;font-size:14px;color:var(--ink-2)}
.banner.error{border-color:var(--ink);background:var(--paper);color:var(--ink)}
.banner svg{flex:none;margin-top:2px}
.banner .text{flex:1;min-width:0}
.banner .acts{display:flex;align-items:center;gap:4px;margin:-10px -2px -10px 0}
/* on the long signed-in pages, a message answering what you just did floats at the bottom of the screen (portal.js): a notice goes after a few
   seconds, an error stays until it's closed; the page's own messages (a project locked, the page not loading) stay at the top */
.banner.toast{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:30;width:min(560px,calc(100vw - 32px));background:var(--paper);box-shadow:0 8px 28px rgba(10,10,10,.16);transition:opacity .3s}
.banner.toast.out{opacity:0}
.banner .x{width:36px;height:36px;margin:-4px -6px -4px 0}

/* sign in: the photo beside the form, the photo on top on a phone */
.split{min-height:100vh;min-height:100dvh;display:flex;flex-wrap:wrap}
.split .photo{flex:1 1 520px;min-height:280px;position:relative;background:var(--ink);overflow:hidden}
.split .photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split .photo .brand{position:absolute;top:24px;left:24px}
.split .photo .tag{position:absolute;left:24px;bottom:24px;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:12px;letter-spacing:.04em;padding:6px 10px;border-radius:4px}
.split .side{flex:1 1 480px;display:flex;align-items:center;justify-content:center;padding:56px 32px}
.split .side>.stack{width:100%;max-width:400px;--gap:28px}

/* create your account: the dark panel with the steps, then the form */
.steps-panel{flex:1 1 400px;background:var(--ink);color:var(--paper);padding:48px 40px;display:flex;flex-direction:column;gap:44px}
.steps-panel h2{font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1.15}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.steps li{display:flex;gap:14px;align-items:center;color:var(--on-ink-grey)}
.steps .n{width:28px;height:28px;flex:none;border-radius:999px;border:1px solid #737373;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px}
.steps li[aria-current]{color:var(--paper);font-weight:600}
.steps li[aria-current] .n{border:1.5px solid var(--paper)}
.split .form-side{flex:999 1 560px;min-width:0;padding:56px 48px 64px;display:flex;justify-content:center;align-items:center}
.split .form-side>.stack{width:100%;max-width:520px;--gap:32px}

/* the client's view (and the admin's from 8.4): a light sidebar beside the page; on a phone the sidebar sits on top */
.shell{min-height:100vh;min-height:100dvh;display:flex;flex-wrap:wrap}
/* an admin viewing as someone (8.5): a black bar above the page */
.viewing-bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:center;gap:8px 16px;flex-wrap:wrap;min-height:var(--tap);padding:6px 16px;background:var(--ink);color:var(--paper);font-size:14px}
.viewing-bar a{color:var(--paper);text-decoration:underline;text-underline-offset:3px;min-height:var(--tap);display:inline-flex;align-items:center}
.viewing-bar a:focus-visible{outline:2px solid var(--paper);outline-offset:2px}
body[data-viewing] .shell{min-height:calc(100dvh - var(--tap) - 12px)}
.sidebar{flex:1 1 260px;min-width:0;background:var(--panel);border-right:1px solid var(--line);padding:24px 16px;display:flex;flex-direction:column;gap:24px;overflow-x:hidden}   /* never sideways: long names are cut short (…) */
@media (min-width:840px){   /* beside the page: it stays in view as the page scrolls, and scrolls on its own if it's long */
  .shell{flex-wrap:nowrap}
  .sidebar{flex:0 0 260px;position:sticky;top:0;align-self:flex-start;height:100vh;height:100dvh;overflow-y:auto;overscroll-behavior:contain}   /* pinned: the page scrolls past it; scrolling the menu never scrolls the page */
  body[data-viewing] .sidebar{top:calc(var(--tap) + 12px);height:calc(100dvh - var(--tap) - 12px)}
}
.side-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.side-toggle{display:none}
@media (max-width:839px){   /* on top of the page: its name and a Menu button, the rest folded until it's opened (portal.js) */
  .sidebar{flex-basis:100%;border-right:0;border-bottom:1px solid var(--line);padding:12px 16px;gap:16px}
  .side-toggle{display:inline-flex}
  .sidebar:not(.open)>:not(.side-top){display:none}
  .sidebar.open{padding-bottom:20px}
}
.sidebar .brand{padding:0 8px;font-size:14px;min-width:0}
.sidebar .badge{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--edge);border-radius:4px;padding:2px 6px;color:var(--ink-2);font-weight:400}
.sidebar .logo-slot{height:64px;margin:0 8px}
.sidebar nav{border-top:1px solid var(--line);padding-top:16px;display:flex;flex-direction:column;gap:2px}
.sidebar .nav-head{min-height:40px;display:flex;align-items:center;gap:8px;padding:0 8px;font-size:14px;font-weight:600}
.sidebar .nav-head .count{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--grey);font-weight:400}
.sidebar .nav-empty{padding:4px 8px;font-size:13px;color:var(--grey)}
.sidebar .foot{margin-top:auto;border-top:1px solid var(--line);padding-top:16px}
.who{display:flex;align-items:center;gap:10px;padding:0 0 0 8px;min-width:0}
.who .avatar{width:32px;height:32px;flex:none;border-radius:999px;background:var(--line);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600}
.who .name{flex:1;min-width:0;font-size:13px;line-height:1.3;overflow-wrap:anywhere}
.who .name span{display:block}
.who .name [data-me="company"]{white-space:pre-line}   /* the company, then the title under it */
.icon-btn{width:var(--tap);height:var(--tap);flex:none;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:var(--r-sm);background:none;color:var(--ink-2);cursor:pointer}
.icon-btn:hover{background:var(--soft);color:var(--ink)}
.shell>main{flex:999 1 560px;min-width:0;padding:48px 48px 64px}
.shell>main>.stack{max-width:1120px;--gap:32px}

/* the customer's view: a header with the builder's logo and yours, then the page */
.top{border-bottom:1px solid var(--line)}
.top .in{max-width:1200px;margin:0 auto;padding:16px 32px;display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap}
.top .who-brands{flex:1 1 260px;display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap}
.top .logo-slot{height:44px;width:140px}
.top .with{font-size:12px;color:var(--grey);display:flex;align-items:center;gap:6px}
.top .with .brand{gap:6px;font-size:12px;font-weight:500;color:var(--ink)}
.top .with .brand .mark{width:18px;height:18px;border-radius:4px;font-size:8px}
.top .me{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2)}
[data-me]:empty{display:none}
.page{max-width:1200px;margin:0 auto;padding:48px 32px 72px;display:flex;flex-direction:column;gap:32px}

/* a step on its own (the text code, a new password, an emailed link): a bar with whose sign-in it is, the step in the middle */
.bar{border-bottom:1px solid var(--line)}
.bar .in{padding:16px 32px;display:flex;align-items:center;justify-content:space-between;gap:8px 16px;flex-wrap:wrap}
.bar .signing{font-size:14px;color:var(--grey);overflow-wrap:anywhere}
.middle{display:flex;justify-content:center;padding:72px 24px}
.middle>.stack{width:100%;max-width:440px;--gap:28px}
.middle .centered{text-align:center}
.code-input{min-height:64px;font-family:var(--mono);font-size:28px;letter-spacing:.3em;text-align:center;border:2px solid var(--ink)}
.code-input::placeholder{letter-spacing:.3em}
.code-input{text-indent:.3em}   /* the spacing after the last digit, matched before the first: the digits sit in the middle */
.code-input:focus-visible{outline-offset:0}   /* the ring against the border: one thick line, not two */
.bar .linkb{font-size:14px}
.phone-code{border-top:1px solid var(--line);padding-top:24px}

/* the sign-in photo fades in once the page knows which (portal.js siteInfo); logos where initials or names would be */
.split .photo img[data-signin-photo]{opacity:0;transition:opacity .4s}
.split .photo img[data-signin-photo].ready{opacity:1}
.brand .mark.has-logo{background:none;width:auto;min-width:28px;max-width:120px}
.brand .mark.has-logo img{height:28px;width:auto;max-width:120px;object-fit:contain;display:block}
.top .with .brand .mark.has-logo img{height:18px}
.logo-slot.has-logo{border-color:transparent;background:none;padding:0}
.top .logo-slot.has-logo{width:auto;max-width:140px;justify-content:flex-start}
.logo-slot.has-logo img{max-height:100%;max-width:100%;object-fit:contain}
.logo-slot.has-name{font-family:var(--sans);font-size:14px;letter-spacing:0;text-transform:none;font-weight:600;color:var(--ink)}
/* a customer's home, large, then a client's cards with their photos (16:10) */
.home-hero{display:flex;flex-direction:column;gap:20px}
.hero-photo{border-radius:12px;overflow:hidden;background:var(--soft);aspect-ratio:2/1}
.hero-photo img{width:100%;height:100%;object-fit:cover}
.hero-photo.none{display:none}
.hero-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
/* the client's project page (8.7): tabs, and what each shows */
.tabs{position:relative;display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{position:relative;flex:none;min-height:var(--tap);display:inline-flex;align-items:center;padding:0 14px;color:var(--grey);text-decoration:none;font-size:15px;font-weight:500;white-space:nowrap}
.tabs a:first-child{padding-left:0}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current="page"]{color:var(--ink)}
.tabs a[aria-current="page"]::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:2px;background:var(--ink)}
.tabs a:first-child[aria-current="page"]::after{left:0}
.tabs a:focus-visible{outline-offset:-2px}
.tabs.more-r{-webkit-mask-image:linear-gradient(to left,transparent,#000 40px);mask-image:linear-gradient(to left,transparent,#000 40px)}
.tabs.more-l{-webkit-mask-image:linear-gradient(to right,transparent,#000 40px);mask-image:linear-gradient(to right,transparent,#000 40px)}
.tabs.more-l.more-r{-webkit-mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(to right,transparent,#000 40px,#000 calc(100% - 40px),transparent)}
.address{display:flex;flex-direction:column;gap:4px;border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;max-width:640px}
.address code{font-family:var(--mono);font-size:14px;word-break:break-all}
.soon{border:1px dashed var(--edge);border-radius:var(--r-lg);padding:18px 20px;display:flex;flex-direction:column;gap:6px;max-width:640px;background:var(--panel)}
.shot-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.shot{display:flex;flex-direction:column;gap:8px;width:100%;padding:0;border:0;background:none;text-align:left;cursor:zoom-in;font:inherit;color:var(--ink)}
.shot img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-md);background:var(--soft)}
.shot .cap{font-size:14px;font-weight:500}
.shot .room{display:block;font-size:13px;font-weight:400}
.shot:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:var(--r-md)}
dialog.viewer{width:min(1400px,calc(100vw - 32px));max-height:calc(100dvh - 32px);border:0;border-radius:var(--r-lg);padding:16px;background:var(--paper);color:var(--ink)}
dialog.viewer::backdrop{background:rgba(10,10,10,.85)}
.viewer-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.viewer-img img{display:block;width:100%;max-height:calc(100dvh - 200px);object-fit:contain;background:var(--soft);border-radius:var(--r-md)}
.viewer-nav{display:flex;justify-content:center;align-items:center;gap:12px;margin-top:12px}
ul.plain.plan-list{list-style:none;padding:0;gap:10px}
.pdf-view{flex-basis:100%;min-width:0;display:flex;flex-direction:column;gap:10px}
.pdf-bar{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between}
.pdf-bar>div{display:flex;gap:8px;align-items:center;min-width:0}
.pdf-bar .pdf-nav{flex:1 1 320px}
.pdf-bar select{min-height:var(--tap);flex:1 1 0;width:0;min-width:0;max-width:360px;font-size:14px}   /* (width 0, then grown: it never holds the row wider than the screen) */
.pdf-scroll{overflow:auto;max-height:80vh;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff}
.pdf-scroll canvas{display:block;max-width:none}
.pdf-bar .zoom-at{font-family:var(--mono);font-size:12px;color:var(--grey);min-width:40px;text-align:center}
.sheet{margin:0;border:1px solid var(--ink);border-radius:var(--r-md);overflow:hidden}
.sheet-scroll{overflow:auto;max-height:70vh;background:#fff}
.sheet-scroll img{display:block;max-width:none}
.title-block{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;border-top:1px solid var(--ink);padding:10px 14px;font-size:13px}
.title-block>div:not(.row-btns){display:flex;flex-direction:column;gap:2px}
ul.plain.furn-list{list-style:none;padding:0;gap:8px}
.furn-row{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;border:1px solid var(--line);border-radius:var(--r-md);padding:8px 12px 8px 8px}
.furn-pic{width:56px;height:56px;border-radius:var(--r-sm);background:var(--soft);overflow:hidden}
.furn-pic img{width:100%;height:100%;object-fit:contain;background:#fff}
.furn-row a{font-size:14px;min-height:var(--tap);display:inline-flex;align-items:center}

/* the client's Make payment (8.9) */
.pay-link{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:var(--tap);padding:0 12px;margin:0 0;border:1px solid var(--ink);border-radius:var(--r-md);color:var(--ink);text-decoration:none;font-size:14px;font-weight:600}
.pay-link:hover{background:var(--soft)}
.pay-link[aria-current]{background:var(--ink);color:var(--paper)}
.pay-link .due{font-family:var(--mono);font-size:12px;font-weight:500}
.top .pay-top .due{font-family:var(--mono);font-size:12px;font-weight:500}   /* a homeowner's Make payment, in /home's header */
.top .pay-top .due:empty{display:none}
.top .pay-top[aria-current]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.balance{display:flex;flex-direction:column;gap:4px;border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;max-width:420px}
.balance b{font-size:32px;font-weight:600;letter-spacing:-.02em}
.tag.bad{border-color:var(--ink);color:var(--ink);background:var(--soft)}
/* the admin's Post invoice (8.11) */
.line-row{display:grid;grid-template-columns:1fr 160px auto;gap:8px;align-items:end}
.line-row .icon-btn{margin-bottom:2px}
@media (max-width:640px){ .line-row{grid-template-columns:1fr 110px auto} }
.rev-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px}
.note-line{border-left:3px solid var(--ink);padding:6px 12px;background:var(--panel);font-size:14px}
.cab-room{border-top:1px solid var(--line);padding-top:20px}
.cab-fig{margin:0;display:flex;flex-direction:column;gap:6px}
.cab-svg{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;padding:12px;overflow:auto}
.cab-svg svg{display:block;width:100%;height:auto}
.cab-svg.plan svg{max-height:420px}
.cab-svg.elev svg{max-height:400px;margin:0 auto}

/* the customer's furniture selections (8.6) */
.filters{display:flex;flex-wrap:wrap;gap:8px}
.filters .sep{width:1px;align-self:stretch;background:var(--line);margin:0 4px}
.filter{min-height:var(--tap);padding:0 14px;border:1px solid var(--edge);border-radius:999px;background:var(--paper);color:var(--ink);font:inherit;font-size:14px;cursor:pointer}
.filter:hover{border-color:var(--ink)}
.filter[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.filter:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sel-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.sel-card{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column}
.sel-photo{position:relative;aspect-ratio:1;background:var(--soft);overflow:hidden}
.sel-photo.has-img{background:var(--paper);border-bottom:1px solid var(--line)}
.sel-photo img{width:100%;height:100%;object-fit:contain}
.sel-photo .no-photo{position:absolute;inset:0;display:grid;place-items:center;color:var(--hint)}
.sel-photo img.crop{position:absolute;height:auto;object-fit:fill}
.sel-photo .count{position:absolute;top:10px;left:10px;background:var(--ink);color:var(--paper);border-radius:999px;padding:2px 10px;font-size:12px;font-weight:600}
.sel-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px;flex:1}
.sel-body b{font-weight:600;font-size:15px;line-height:1.3}
.sel-body .where{font-size:13px;color:var(--grey);text-wrap:balance}
.sel-body a{margin-top:auto;padding-top:8px;font-size:14px;min-height:var(--tap);display:inline-flex;align-items:center}
.card-photo{width:calc(100% + 40px);margin:-20px -20px 8px;aspect-ratio:16/10;background:var(--soft);border-radius:var(--r-lg) var(--r-lg) 0 0;overflow:hidden}
.card-photo img{width:100%;height:100%;object-fit:cover}
.card-photo.none{display:block;background:var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='%238A8A8A' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7'/%3E%3Cpath d='M5 10v10h14V10'/%3E%3Cpath d='M10 20v-6h4v6'/%3E%3C/svg%3E") no-repeat center}   /* no photo yet: a house drawn in its place */

/* a person's projects (until the views of 8.6 and 8.7) */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card{border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.card h2{font-size:20px;font-weight:600;letter-spacing:-.02em}
.card>.btn,.card>.row-btns{margin-top:12px}
.sidebar .nav-list{display:flex;flex-direction:column;gap:2px}
.sidebar .nav-list a{min-height:40px;display:flex;align-items:center;padding:0 12px;border-radius:var(--r-sm);color:var(--ink-2);font-size:14px;text-decoration:none}
.sidebar .nav-list a:hover{background:var(--soft);color:var(--ink)}

/* the admin pages (portal/admin.html) */
#view{display:flex;flex-direction:column;gap:36px}
.h2{font-size:20px;font-weight:600;letter-spacing:-.02em}
textarea.input{min-height:auto;padding:12px 14px;resize:vertical;line-height:1.5}
select.input{-webkit-appearance:none;appearance:none;padding-right:42px;text-overflow:ellipsis;cursor:pointer;
  background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230A0A0A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/12px 12px}
input[type=file].input{padding:7px 8px 7px 7px;font-size:14px;color:var(--grey)}
input[type=file].input::file-selector-button{min-height:32px;margin-right:12px;padding:0 14px;border:1px solid var(--edge);border-radius:var(--r-sm);background:var(--paper);color:var(--ink);font:inherit;font-weight:500;cursor:pointer}
input[type=file].input::file-selector-button:hover{border-color:var(--ink)}
.check{display:inline-flex;align-items:center;gap:10px;min-height:var(--tap);font-size:14px;cursor:pointer}
.check input{width:18px;height:18px;margin:0;accent-color:var(--ink);flex:none}
.tag{display:inline-block;font-size:12px;font-weight:600;border:1px solid var(--edge);border-radius:999px;padding:2px 8px;color:var(--ink-2);white-space:nowrap}
.tag.quiet{border-color:var(--line);color:var(--grey);font-weight:500}   /* done with: a paid invoice */
#view>.tag{align-self:flex-start}
.tag.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
/* a code or link shown only once (the admin's project page) */
.secret-box{display:flex;flex-direction:column;gap:14px;border:1px solid var(--ink);border-radius:var(--r-lg);padding:16px}
.secret{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.secret>.muted{flex-basis:100%}
.secret code{flex:1 1 240px;font-family:var(--mono);font-size:15px;word-break:break-all}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.stat{border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;display:flex;flex-direction:column;gap:2px;text-decoration:none;color:var(--ink)}
.stat b{font-size:28px;font-weight:600;letter-spacing:-.03em}.stat span{color:var(--grey);font-size:14px}
a.stat:hover{border-color:var(--edge)}
.table-wrap{position:relative;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg)}   /* (relative: keeps its screen-reader-only words inside its scrolling) */
/* a shadow at the edge where the table goes on past it (it scrolls sideways), gone at the ends */
.table-wrap{background:linear-gradient(to right,var(--paper) 30%,rgba(255,255,255,0)) left center/40px 100% no-repeat local,
  linear-gradient(to left,var(--paper) 30%,rgba(255,255,255,0)) right center/40px 100% no-repeat local,
  radial-gradient(farthest-side at 0 50%,rgba(10,10,10,.16),rgba(10,10,10,0)) left center/14px 100% no-repeat scroll,
  radial-gradient(farthest-side at 100% 50%,rgba(10,10,10,.16),rgba(10,10,10,0)) right center/14px 100% no-repeat scroll;background-color:var(--paper)}
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th{text-align:left;font-weight:500;color:var(--grey);font-size:13px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--panel);white-space:nowrap}
.table td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.table tr:last-child td{border-bottom:0}
.table .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}   /* a column of numbers (the overview's every project, amounts) */
.table .nw,.table .btn,.table .tag{white-space:nowrap}   /* a date, an invoice number, a phone number, a size: never broken in two */
.table td:has(>.acts){min-width:236px}   /* a row's buttons: two to a line at least, never a stack of one each */
.table tfoot td{border-top:1px solid var(--line);border-bottom:0;font-weight:600}
.who-cell{display:flex;flex-direction:column;line-height:1.3}.who-cell b{font-weight:500}
.acts,.row-btns{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.inline-form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.inline-form .field{flex:1 1 220px}
.inline-form>.btn{min-width:128px}
.card-form{border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;max-width:640px}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:4px;border:1px solid var(--edge);border-radius:999px;padding:0 0 0 12px;font-size:14px}
.bulk{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:var(--ink);color:var(--paper);border-radius:var(--r-md);padding:8px 8px 8px 16px}
.bulk .btn.line{background:var(--ink);color:var(--paper);border-color:#525252}.bulk .btn.line:hover{border-color:var(--paper);color:var(--paper)}
.bulk .linkb{color:var(--paper)}
.bulk:focus-within .btn:focus-visible,.bulk .linkb:focus-visible{outline-color:var(--paper)}
.sidebar .nav-list a[aria-current]{background:var(--ink);color:var(--paper)}
.sidebar .tree{display:flex;flex-direction:column;gap:2px}
.sidebar .tree .nav-head .icon-btn{margin:0 -8px 0 auto}   /* the + at the right edge, inside it */
.node-head{width:100%;min-height:40px;display:flex;align-items:center;gap:8px;padding:0 8px;border:0;background:none;border-radius:var(--r-sm);font-size:14px;font-weight:500;text-align:left;cursor:pointer}
.node-head:hover{background:var(--soft)}
.node-head svg{flex:none;transition:transform .15s}.node-head[aria-expanded="true"] svg{transform:rotate(90deg)}
.node-head .count{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--grey);font-weight:400}
.node-body{display:flex;flex-direction:column;gap:2px;padding:0 0 8px 22px}
.node-body .sub{display:block;line-height:36px;padding:0 8px 0 22px;font-size:13px;color:var(--grey);border-radius:var(--r-sm)}
.node-body .sub:hover{background:var(--soft);color:var(--ink)}
.proj{display:flex;align-items:center;border-radius:var(--r-sm)}
.proj a{flex:1;min-width:0;display:block;line-height:40px;padding:0 8px 0 22px;font-size:14px;color:var(--ink-2);text-decoration:none;border-radius:var(--r-sm)}
.proj a:hover{background:var(--soft);color:var(--ink)}
.proj.archived a{color:var(--hint);text-decoration:line-through}
.sidebar .check{padding:0 8px}
.node-head>span:not(.count),div.node-head>a,.proj a,.node-body .sub{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}   /* one line each; the whole name on hover (title) */
.side-link{display:flex;align-items:center;min-height:var(--tap);padding:0 8px;font-size:13px;color:var(--grey)}
.shell>main:focus{outline:none}
.file-btn{position:relative;cursor:pointer}
.file-btn:focus-within{outline:2px solid var(--ink);outline-offset:2px}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.pick{padding:0;border:2px solid transparent;border-radius:var(--r-md);background:var(--soft);aspect-ratio:16/10;overflow:hidden;cursor:pointer}
.pick:hover{border-color:var(--ink)}
.pick img,.pic img{width:100%;height:100%;object-fit:cover;display:block}
.pic{margin:0;display:flex;flex-direction:column;gap:8px}.pic .btn{align-self:flex-start}.pic img{aspect-ratio:16/10;border-radius:var(--r-md)}
.crops{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.crops figure{margin:0;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--grey)}
.crop{overflow:hidden;border-radius:var(--r-md);background:var(--soft)}.crop img{width:100%;height:100%;object-fit:cover;display:block}
.c-client{width:240px;aspect-ratio:16/10}.c-home{width:240px;aspect-ratio:2/1}.c-phone{width:90px;aspect-ratio:9/16}
.logo-preview{height:72px;display:flex;align-items:center}.logo-preview img{max-height:72px;max-width:240px;object-fit:contain}
.logo-thumb{height:28px;width:auto;max-width:120px;object-fit:contain;vertical-align:middle}
.h3{font-size:16px;font-weight:600;margin-top:8px}
.plan-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;border:1px solid var(--line);border-radius:var(--r-md);padding:12px 14px}
.plan-row>.sheets{flex-basis:100%}
.small-input{max-width:120px}
.tap-link{display:inline-flex;align-items:center;min-height:var(--tap)}
ul.plain{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
ul.plain a{min-height:32px;display:inline-flex;align-items:center}
/* a person's role (Add a person, Change role): the two roles as cards, the chosen one in ink; then a box for each house */
.card-form fieldset{border:0;padding:0;margin:0;min-width:0}
.card-form legend{padding:0;margin-bottom:8px;font-size:13px;font-weight:500}
.roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.role-opt{display:flex;align-items:flex-start;gap:12px;min-height:var(--tap);border:1px solid var(--edge);border-radius:var(--r-lg);padding:14px 16px;cursor:pointer}
.role-opt:hover{border-color:#B5B5B5}
.role-opt:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.role-opt input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--ink);flex:none;cursor:pointer}
.role-opt b{font-weight:600}
.house-picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0 16px}
/* a house under the sidebar's Homeowners: its arrow folds it, its name opens its page */
div.node-head{padding:0 8px 0 0;gap:0;cursor:default}
.node-fold{align-self:stretch;width:30px;flex:none;display:flex;align-items:center;padding:0 0 0 8px;border:0;background:none;color:inherit;border-radius:var(--r-sm);cursor:pointer}
.node-fold[aria-expanded="true"] svg{transform:rotate(90deg)}
div.node-head>a,div.node-head>span:not(.count){flex:1;min-width:0;align-self:stretch;display:block;line-height:40px;color:var(--ink);text-decoration:none}
div.node-head>a:hover{text-decoration:underline;text-underline-offset:3px}

/* the admin's project page: its tabs (with a count where something waits), one panel showing at a time */
.panel{display:flex;flex-direction:column;gap:36px}
.panel[hidden]{display:none}
[data-slot]{display:contents}
.tab-n{margin-left:6px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:12px;font-weight:600;display:inline-flex;align-items:center;justify-content:center}
.tab-n[hidden]{display:none}
/* a row's ⋯ and its menu (a popover, positioned by admin.js) */
.more{display:flex;justify-content:flex-end}
.more-btn{width:36px;height:36px;border:1px solid transparent}
.more-btn:hover{border-color:var(--edge);color:var(--ink)}
.menu:popover-open{position:fixed;inset:auto;margin:0;min-width:200px;max-width:calc(100vw - 16px);padding:6px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);box-shadow:0 10px 30px rgba(10,10,10,.14);display:flex;flex-direction:column;gap:2px}
.menu-item{display:flex;align-items:center;width:100%;min-height:40px;padding:0 12px;border:0;border-radius:var(--r-sm);background:none;color:var(--ink);font:inherit;font-size:14px;text-align:left;text-decoration:none;white-space:nowrap;cursor:pointer}
.menu-item:hover,.menu-item:focus-visible{background:var(--soft)}
@supports not selector(:popover-open){   /* no popovers: the actions show in the row, as small buttons */
  .more-btn{display:none}
  .menu{display:flex;flex-wrap:wrap;gap:6px}
  .menu-item{width:auto;min-height:32px;border:1px solid var(--edge)}
}
/* the overview's boxes; a People row that opens their page; a person's account, as plain lines */
.pick-cell{width:44px;padding-right:0!important}
.pick-box{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;margin:-8px 0;cursor:pointer}
.pick-box input{width:18px;height:18px;margin:0;accent-color:var(--ink);cursor:pointer}
tr.go{cursor:pointer}
tr.go:hover td{background:var(--panel)}
.kvs{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:center;gap:8px 24px;margin:0;font-size:14px}
.kv dd .check{min-height:32px}
.kv{display:contents}
.kv dt{color:var(--grey)}
.kv dd{margin:0;min-width:0}

/* nothing here yet */
.empty{border:1px dashed var(--edge);border-radius:var(--r-lg);background:var(--panel);padding:48px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}
.empty .ico{width:48px;height:48px;border-radius:999px;background:var(--paper);border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.empty p{max-width:420px;color:var(--grey)}
.empty.hero{aspect-ratio:2/1;min-height:240px;max-height:440px}

.foot-links{display:flex;gap:16px;font-size:13px}
.foot-links a{color:var(--grey);min-height:var(--tap);display:inline-flex;align-items:center}

/* a phone */
@media (max-width:640px){
  .split .side,.split .form-side{padding:32px 16px 40px}
  .steps-panel{padding:32px 16px;gap:28px}
  .shell>main{padding:28px 16px 48px}
  .steps-panel{padding:20px 16px;gap:14px}
  .steps-panel h2{font-size:22px}
  .steps-panel .muted,.steps-panel .steps{display:none}   /* the form says which step it is: the panel keeps to the brand and the line */
  .top .in{padding:12px 16px;flex-wrap:nowrap}
  .top .who-brands{flex:1 1 auto;min-width:0}
  .top .logo-slot{width:112px}
  .top .logo-slot.has-logo{width:auto;max-width:112px}
  .top .me [data-me="name"],.top .me .btn svg{display:none}   /* Sign out in words, not an arrow that reads as Back */
  .top .me .btn{white-space:nowrap}
  .top .pay-top .due{display:none}   /* a homeowner's Make payment on one line; its page says what's due */
  .top .me .btn{padding:0 14px}
  .tabs a{padding:0 12px}
  .tabs a[aria-current="page"]::after{left:12px;right:12px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stats>:last-child:nth-child(odd){grid-column:1/-1}
  .crops{display:grid;grid-template-columns:1fr 1fr 56px;gap:10px}
  .c-client,.c-home,.c-phone{width:100%}
  dialog.viewer{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0;padding:12px}
  .viewer-img img{max-height:calc(100dvh - 190px)}
  .filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
  .filters::-webkit-scrollbar{display:none}
  .filter{flex:none}
  .sel-body a{display:block;line-height:var(--tap);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* a table drawn as a card for each row (the client's invoices): each value with its column's name */
  .table.stack-sm thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .table.stack-sm,.table.stack-sm tbody,.table.stack-sm tr,.table.stack-sm td{display:block}
  .table.stack-sm tr{padding:12px 14px;border-bottom:1px solid var(--line)}
  .table.stack-sm tr:last-child{border-bottom:0}
  .table.stack-sm td{padding:2px 0;border:0;text-align:left}
  .table.stack-sm td[data-label]::before{content:attr(data-label);display:inline-block;min-width:72px;color:var(--grey);font-size:13px}
  .table.stack-sm td:last-child .acts{margin-top:8px}
  .table.stack-sm tfoot,.table.stack-sm tfoot tr,.table.stack-sm tfoot td{display:block}
  .table.stack-sm tfoot td:empty{display:none}
  .table.stack-sm tr{position:relative}
  .table.stack-sm td:has(>.more){position:absolute;top:6px;right:6px;padding:0}   /* a card's ⋯ in its corner */
  .table.stack-sm tr:has(>td>.more)>td:first-child{padding-right:44px}
  .table.stack-sm td.pick-cell{position:absolute;top:8px;right:8px;width:auto;padding:0!important}
  .table.stack-sm tr:has(>td.pick-cell)>td:nth-child(2){padding-right:44px}
  .page{padding:28px 16px 48px;gap:24px}
  .filters .sep{display:none}
  .furn-row{grid-template-columns:48px 1fr}
  .furn-row a{grid-column:2}
  .furn-pic{width:48px;height:48px}
  .shot-grid{grid-template-columns:1fr}
  .sel-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .sel-body{padding:10px 12px 12px}
  .empty{padding:32px 16px}
  .bar .in{padding:12px 16px}
  .middle{padding:40px 16px}
  .empty.hero{aspect-ratio:auto}
}
@media (prefers-reduced-motion:no-preference){ .btn,.input,.icon-btn{transition:background-color .15s,border-color .15s,color .15s} }

/* Plumb on a project's admin page (portal/admin.js): its conversations, and Plan changes (requests and revisions to the plans) */
.convs{border-top:1px solid var(--line)}
.conv{border-bottom:1px solid var(--line);padding:10px 0}
.conv summary{cursor:pointer;display:flex;flex-wrap:wrap;gap:2px 10px;align-items:center;min-height:var(--tap);list-style:none}
.conv summary::-webkit-details-marker{display:none}
.conv summary{position:relative;padding-left:20px}
.conv summary::before{content:'›';position:absolute;left:4px;top:50%;font-size:20px;line-height:1;transform:translateY(-55%);transition:transform .15s}
.conv[open] summary::before{transform:translateY(-55%) rotate(90deg)}
.conv .row-btns{margin-top:10px}
.turn{margin:10px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel)}
.turn .q{font-weight:600;margin-bottom:4px}
.turn .a{white-space:pre-wrap;margin-top:8px}
.turn .tool{font:12.5px/1.45 var(--mono);color:var(--grey);white-space:pre-wrap;word-break:break-word;margin-top:6px}
.pcr{border-top:1px solid var(--line);padding:12px 0;display:flex;flex-direction:column;gap:6px}
.pcr .rooms{font-size:14px;margin:0}
.pcr.gone .said{text-decoration:line-through;color:var(--grey)}
.dtag{display:inline-block;min-width:24px;padding:1px 6px;margin-right:8px;border:1px solid var(--ink);border-radius:var(--r-sm);font:600 12.5px/1.4 var(--mono);text-align:center}
.confirm{margin-top:4px}
.perr{font-weight:600;font-size:14px;border-left:3px solid var(--ink);padding-left:10px}
.h2 .tag{vertical-align:middle;margin-left:6px}