/* SiteLens demo: dark field UI, safety-yellow selection, cyan for measuring/section, red only for issues. */
:root{
  --bg:#0E1013; --panel:#1A1D22; --panel2:#22262D; --glass:rgba(26,29,34,.72); --line:rgba(255,255,255,.09);
  --fg:#F4F5F6; --muted:rgba(244,245,246,.6); --faint:rgba(244,245,246,.38);
  --yellow:#FFC400; --yellow-ink:#16130A; --cyan:#3FC1FF; --red:#FF5A4F; --green:#3DDC84;
  --r:22px; --rs:14px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;background:#07080A;color:var(--fg);font-family:var(--font);font-size:16px;overscroll-behavior:none}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--yellow);outline-offset:2px}
svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
[hidden]{display:none!important}
.muted{color:var(--muted)} .mono{font-family:var(--mono);font-size:.82em}

#app{position:relative;height:100%;max-width:480px;margin:0 auto;background:var(--bg);overflow:hidden}
@media (min-width:520px){#app{border-left:1px solid var(--line);border-right:1px solid var(--line)}}
.screen{position:absolute;inset:0;display:flex;flex-direction:column}
.scroll{flex:1;overflow-y:auto;padding:calc(var(--st) + 18px) 18px 24px;display:flex;flex-direction:column;gap:16px}

/* ---------- projects ---------- */
.bigtitle{display:flex;align-items:center;justify-content:space-between}
.bigtitle h1{font-size:34px;font-weight:800;letter-spacing:-.02em;margin:0}
.avatar{width:44px;height:44px;border-radius:50%;background:var(--panel2);display:grid;place-items:center;color:var(--muted)}
.search{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:0 14px;height:48px;color:var(--muted)}
.search input{flex:1;background:none;border:0;outline:0;color:var(--fg);font-size:16px;min-width:0}
.projcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:12px}
.projcard h2{margin:0;font-size:20px;font-weight:750;line-height:1.2}
.projcard .sub{margin:6px 0 0;color:var(--muted);font-size:14px;display:flex;gap:6px;align-items:center}
.projcard .sub svg{width:16px;height:16px}
.thumb{aspect-ratio:16/10;border-radius:16px;background:radial-gradient(120% 90% at 50% 30%,#1d2229,#0d0f12);overflow:hidden;display:grid;place-items:center}
.thumb img{width:100%;height:100%;object-fit:cover}
.syncline{display:flex;gap:10px;align-items:center;font-size:13.5px;color:var(--muted);background:var(--panel2);border-radius:12px;padding:10px 12px}
.dot{width:10px;height:10px;border-radius:50%;flex:none}.dot.ok{background:var(--green)}
.rowhead{display:flex;justify-content:space-between;align-items:baseline;margin-top:4px}
.rowhead h3{margin:0;font-size:22px;font-weight:750}
.models{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.model{width:100%;display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:14px;text-align:left;min-height:76px}
.model:active{background:var(--panel2)}
.micon{width:46px;height:46px;border-radius:12px;background:var(--panel2);display:grid;place-items:center;color:var(--fg)}
.micon svg{width:26px;height:26px}
.mtext{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.mtext b{font-size:17px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:12.5px;font-weight:600;padding:3px 9px;border-radius:99px;background:var(--panel2);color:var(--muted)}
.mstate{font-size:14px;font-weight:600}.mstate.ok{color:var(--green)}
.chev{color:var(--faint);width:20px;height:20px}
.openfile{display:flex;align-items:center;gap:14px;border:1.5px dashed rgba(255,255,255,.18);border-radius:18px;padding:16px;cursor:pointer;color:var(--yellow)}
.openfile input{position:absolute;width:1px;height:1px;opacity:0}
.openfile span{display:flex;flex-direction:column;gap:2px;color:var(--fg)}
.openfile small{color:var(--muted);font-size:13px}
.openfile:focus-within{outline:2px solid var(--yellow)}
.fineprint{font-size:12.5px;color:var(--faint);line-height:1.45;margin:0}
.fineprint.center{text-align:center}

.tabbar{display:flex;justify-content:space-around;gap:4px;margin:0 12px calc(var(--sb) + 10px);padding:6px;background:var(--glass);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--line);border-radius:28px}
.tab{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:11.5px;font-weight:600;color:var(--muted);padding:8px 4px;border-radius:22px}
.tab.on{color:var(--yellow);background:rgba(255,196,0,.12)}
.badge{position:absolute;top:2px;right:calc(50% - 22px);background:var(--red);color:#fff;font-size:11px;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 5px}

/* ---------- viewer ---------- */
#stage{position:absolute;inset:0;background:radial-gradient(130% 80% at 50% 35%,#1a1e24 0%,#0E1013 70%)}
#c{width:100%;height:100%;display:block;touch-action:none}
#overlay{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.glass{background:var(--glass);backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);border:1px solid var(--line)}
.topbar{position:absolute;left:12px;right:12px;top:calc(var(--st) + 10px);display:flex;align-items:center;gap:10px;padding:6px;border-radius:26px;z-index:5}
.topbar .title{flex:1;display:flex;flex-direction:column;min-width:0;line-height:1.2}
.topbar .title b{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .title small{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iconbtn{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;flex:none}
.iconbtn.sm{width:36px;height:36px}.iconbtn.sm svg{width:18px;height:18px}
.iconbtn:active{background:rgba(255,255,255,.08)}
.storeychip{display:flex;align-items:center;gap:4px;height:40px;padding:0 12px 0 16px;border-radius:20px;background:rgba(255,255,255,.08);font-weight:650;font-size:15px;white-space:nowrap}
.storeychip svg{width:18px;height:18px}
.storeychip.on{background:var(--yellow);color:var(--yellow-ink)}
.rail{position:absolute;right:12px;top:calc(var(--st) + 76px);display:flex;flex-direction:column;border-radius:24px;padding:4px;z-index:4}
.rail button{width:64px;padding:10px 0 8px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--fg);border-radius:18px}
.rail button+button{border-top:1px solid var(--line);border-radius:0}
.rail button:first-child{border-radius:20px 20px 0 0}.rail button:last-child{border-radius:0 0 20px 20px}
.rail button.on{color:var(--yellow)}
.rail button[data-tool="section"].on,.rail button[data-tool="measure"].on{color:var(--cyan)}
.sectionslider{position:absolute;right:12px;top:calc(var(--st) + 400px);width:64px;height:210px;border-radius:22px;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:10px 0}
.sectionslider span{font-size:10.5px;font-family:var(--mono);color:var(--muted)}
.sectionslider input{writing-mode:vertical-lr;direction:rtl;width:28px;height:130px;accent-color:var(--cyan)}
.sl-val{position:absolute;right:72px;top:50%;transform:translateY(-50%);background:var(--cyan);color:#05202d!important;font-weight:700;padding:4px 8px;border-radius:10px;white-space:nowrap}
.hint{position:absolute;left:50%;transform:translateX(-50%);top:calc(var(--st) + 76px);border-radius:16px;padding:9px 14px;font-size:13.5px;z-index:4;max-width:calc(100% - 110px);text-align:center}
.hint b{color:var(--cyan)}

.sheet{position:absolute;left:8px;right:8px;bottom:calc(var(--sb) + 8px);border-radius:28px;padding:6px 14px 14px;z-index:6;display:flex;flex-direction:column;gap:12px;max-height:calc(100% - var(--st) - 90px);transition:max-height .25s ease}
.sheet .grab{align-self:center;width:46px;height:18px;position:relative}
.sheet .grab::after{content:"";position:absolute;left:0;right:0;top:6px;height:5px;border-radius:3px;background:rgba(255,255,255,.28)}
.peek{display:flex;align-items:center;gap:12px}
.elicon{width:52px;height:52px;border-radius:14px;background:rgba(255,196,0,.14);color:var(--yellow);display:grid;place-items:center;flex:none;border:1.5px solid rgba(255,196,0,.5)}
.elicon svg{width:28px;height:28px}
.eltext{flex:1;display:flex;flex-direction:column;min-width:0}
.eltext b{font-size:17.5px;line-height:1.25}
.eltext small{color:var(--muted);font-size:14px;margin-top:2px}
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.quick button{display:flex;align-items:center;justify-content:center;gap:6px;height:48px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid var(--line);font-size:14px;font-weight:600}
.quick svg{width:18px;height:18px}
.pill{font-size:11.5px;font-weight:700;min-width:20px;height:20px;border-radius:10px;display:inline-grid;place-items:center;padding:0 6px}
.pill.red{background:var(--red);color:#fff}
.full{display:none;flex-direction:column;gap:12px;min-height:0;flex:1}
.sheet.expanded{top:calc(var(--st) + 28%)}
.sheet.expanded .full{display:flex}
.sheet.expanded .quick{display:none}
.guid{display:flex;align-items:center;gap:6px;color:var(--muted);margin-top:-4px}
.guid .mono{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.seg{display:flex;background:rgba(255,255,255,.06);border-radius:14px;padding:4px;gap:2px}
.seg button{flex:1;height:38px;border-radius:11px;font-size:14px;font-weight:600;color:var(--muted)}
.seg button.on{background:var(--yellow);color:var(--yellow-ink)}
.segbody{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:10px;min-height:80px;padding-bottom:4px}
.group{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.group summary{list-style:none;display:flex;align-items:center;gap:10px;padding:12px 14px;font-weight:700;font-size:15px;cursor:pointer}
.group summary::-webkit-details-marker{display:none}
.group summary .cnt{margin-left:auto;font-weight:500;color:var(--faint);font-size:13px}
.group summary svg{width:16px;height:16px;color:var(--muted);transition:transform .2s}
.group[open] summary svg.caret{transform:rotate(180deg)}
.kv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 12px;padding:0 14px 6px}
.kv div{padding:9px 0;border-top:1px solid var(--line);font-size:14.5px;overflow-wrap:anywhere}
.kv div:nth-child(odd){color:var(--muted)}
.kv div:nth-child(even){text-align:right;font-variant-numeric:tabular-nums}
.yes{color:var(--green)} .stat-ip{color:var(--yellow)} .stat-pl{color:var(--cyan)}
.empty{color:var(--muted);font-size:14px;padding:16px;text-align:center;border:1px dashed var(--line);border-radius:14px}
.actions{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:8px}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid var(--line);font-weight:650;font-size:15px}
.btn svg{width:20px;height:20px}
.btn.primary{background:var(--yellow);color:var(--yellow-ink);border-color:transparent}
.btn.big{height:58px;font-size:17px;width:100%}
.btn.on{color:var(--yellow);border-color:rgba(255,196,0,.5)}

.panel{position:absolute;inset:0;top:calc(var(--st) + 8px);background:var(--bg);border-radius:28px 28px 0 0;z-index:8;display:flex;flex-direction:column;gap:12px;padding:14px 16px calc(var(--sb) + 12px);box-shadow:0 -10px 40px rgba(0,0,0,.6);border-top:1px solid var(--line)}
.panelhead{display:flex;align-items:center;justify-content:space-between}
.panelhead h2{margin:0;font-size:28px;font-weight:800;letter-spacing:-.01em}
.panelhead .iconbtn{background:var(--panel2)}
.chiprow{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;flex:none;padding-bottom:2px}
.chiprow::-webkit-scrollbar{display:none}
.chiprow button{flex:none;height:38px;padding:0 15px;border-radius:19px;background:var(--panel);border:1px solid var(--line);font-size:14px;font-weight:600;white-space:nowrap}
.chiprow button.on{background:var(--yellow);color:var(--yellow-ink);border-color:transparent}
.treebody{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding-bottom:20px}
.trow{display:flex;align-items:center;gap:8px;min-height:50px;padding:0 6px 0 calc(8px + var(--d,0) * 18px);border-radius:14px;background:var(--panel);border:1px solid var(--line)}
.trow.cur{background:var(--yellow);color:var(--yellow-ink)}
.trow.cur .cnt,.trow.cur .eye{color:var(--yellow-ink)}
.trow.sel{border-color:var(--yellow)}
.trow .tw{width:32px;height:40px;display:grid;place-items:center;color:var(--muted)}
.trow .tw svg{width:16px;height:16px;transition:transform .15s}
.trow.open .tw svg{transform:rotate(90deg)}
.trow .tname{flex:1;min-width:0;text-align:left;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:46px}
.trow .tname small{font-weight:500;color:var(--faint);margin-left:6px}
.trow .cnt{color:var(--muted);font-size:13.5px;font-variant-numeric:tabular-nums}
.trow .eye{width:40px;height:40px;display:grid;place-items:center;color:var(--yellow)}
.trow .eye.off{color:var(--faint)}
.trow.cur .eye.off{opacity:.5}

.menu{position:absolute;right:12px;top:calc(var(--st) + 66px);z-index:9;border-radius:20px;padding:6px;min-width:210px;max-height:60%;overflow-y:auto;display:flex;flex-direction:column}
.menu button{display:flex;justify-content:space-between;gap:16px;padding:12px 14px;border-radius:14px;font-size:15px;font-weight:600;text-align:left}
.menu button small{color:var(--faint);font-weight:500;font-family:var(--mono)}
.menu button.on{background:rgba(255,196,0,.14);color:var(--yellow)}

.form{display:flex;flex-direction:column;gap:10px;overflow-y:auto;flex:1;padding-bottom:16px}
.lbl{font-size:13.5px;color:var(--muted);margin-top:4px}
.form input:not([type=file]),.form select{height:52px;border-radius:14px;background:var(--panel);border:1px solid var(--line);padding:0 14px;font-size:16px;width:100%}
.linked{display:flex;gap:12px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px}
.linked .elicon{width:44px;height:44px}
.linked small{display:block;color:var(--muted)}
.chiprow.pick{flex-wrap:wrap;overflow:visible}
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.photos img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px}
.addphoto{aspect-ratio:1;border:1.5px dashed rgba(255,255,255,.2);border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-size:13px;color:var(--muted);cursor:pointer}
.addphoto input{position:absolute;width:1px;height:1px;opacity:0}

.issue{display:flex;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:14px;text-align:left;width:100%}
.issue .ico{width:40px;height:40px;border-radius:12px;background:rgba(255,90,79,.15);color:var(--red);display:grid;place-items:center;flex:none}
.issue b{display:block;font-size:16px}
.issue small{color:var(--muted);font-size:13.5px}
#issue-list{display:flex;flex-direction:column;gap:10px}

.prose p,.prose li{color:var(--muted);line-height:1.55;font-size:15.5px;margin:0}
.prose b{color:var(--fg)}
.prose ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}

/* overlay markers */
.pin{position:absolute;transform:translate(-50%,-100%);width:30px;height:38px;pointer-events:auto}
.pin::before{content:"!";position:absolute;inset:0 0 8px;background:var(--red);color:#fff;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:grid;place-items:center;font-weight:800;box-shadow:0 4px 12px rgba(0,0,0,.5)}
.pin::after{content:"!";position:absolute;left:0;right:0;top:4px;text-align:center;color:#fff;font-weight:900;font-size:15px}
.mlabel{position:absolute;transform:translate(-50%,-50%);background:var(--cyan);color:#05202d;font-weight:800;font-size:13px;padding:4px 9px;border-radius:10px;font-variant-numeric:tabular-nums;white-space:nowrap}
.mdot{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--cyan);border:2px solid #fff;transform:translate(-50%,-50%)}

.loading{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(14,16,19,.86);text-align:center;padding:24px}
.loading small{color:var(--muted);max-width:280px}
.spinner{width:42px;height:42px;border-radius:50%;border:4px solid rgba(255,255,255,.12);border-top-color:var(--yellow);animation:spin 0.9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:absolute;left:50%;bottom:calc(var(--sb) + 100px);transform:translateX(-50%);background:#2A2E35;color:var(--fg);border:1px solid var(--line);padding:12px 16px;border-radius:16px;font-size:14px;z-index:30;max-width:calc(100% - 32px);text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.5)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation-duration:2s!important}}
.planbtn{margin-left:6px;padding:4px 10px;border-radius:10px;background:rgba(63,193,255,.16)}
.segbody>*{flex:none}
#screen-viewer.expanded .rail,#screen-viewer.expanded .sectionslider,#screen-viewer.expanded .hint{display:none}
/* v2 (Jacob's feedback): larger navigation and icons */
svg{stroke-width:1.8}
.tabbar{padding:8px;border-radius:32px;margin:0 10px calc(var(--sb) + 10px)}
.tab{font-size:12.5px;gap:5px;padding:10px 4px 9px;min-height:64px;border-radius:24px}
.tab svg{width:27px;height:27px}
.badge{top:4px;right:calc(50% - 26px)}
.topbar{padding:8px;border-radius:30px;gap:8px}
.topbar .iconbtn{width:48px;height:48px;background:rgba(255,255,255,.07)}
.topbar .iconbtn svg{width:26px;height:26px}
.topbar .title b{font-size:17.5px}
.topbar .title small{font-size:13px}
.storeychip{height:48px;padding:0 14px 0 18px;border-radius:24px;font-size:16px}
.storeychip svg{width:20px;height:20px}
.rail{top:calc(var(--st) + 86px)}
.rail button{width:72px;padding:12px 0 10px;font-size:12px;gap:5px}
.rail svg{width:26px;height:26px}
.sectionslider{top:calc(var(--st) + 470px);width:72px}
.quick button{height:54px;font-size:15px}
.quick svg{width:21px;height:21px}
.elicon svg{width:28px;height:28px}
.micon svg{width:28px;height:28px}
.avatar svg{width:26px;height:26px}
.hint{top:calc(var(--st) + 86px);max-width:calc(100% - 120px)}
.mstate.warn{color:#FF9F43}
.model.heavy .micon{color:#FF9F43}
.fineprint a{color:var(--muted)}
.projcard + .rowhead{margin-top:0}