/* 3D Review mockup — layout only. Every colour, radius, blur and shadow is a token; see ../../tokens.json. */
html,body{margin:0;min-height:100%;background:var(--ground)}
body{font:15px/1.5 var(--font-ui);color:var(--ink)}
#app.rv{border-radius:0;min-height:100vh}
.shell{display:grid;grid-template-columns:var(--shell-panel-w) 1fr;min-height:calc(100vh - 88px)}
.shell.no-panel{grid-template-columns:1fr}
main.content{padding:var(--main-pad);min-width:0;max-width:1180px}
.top .right{display:flex;align-items:center;gap:var(--gap-row);flex-wrap:wrap}
.top a{color:inherit;text-decoration:none}
.me{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--r-pill);background:var(--badge-fill);color:var(--badge-ink);font-size:13px}
.me b{font-weight:600}
.headrow{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:25px;flex-wrap:wrap}
.stagebar{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0 6px}
.stagebar span{padding:5px 12px;border-radius:var(--r-pill);font-size:12px;letter-spacing:.04em;background:var(--demo-fill);border:1px solid var(--glass-edge);color:var(--secondary)}
.stagebar span.on{background:var(--badge-fill);color:var(--badge-ink);font-weight:600}
.phases{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 22px}
.phases a{display:inline-block;padding:9px 15px;border-radius:var(--r-button);border:1px solid transparent;color:var(--ink);text-decoration:none;font-weight:550}
.phases a.on{background:var(--nav-active);border-color:var(--glass-edge);box-shadow:var(--shadow-nav-active)}
.rule{height:1px;background:var(--line);margin:19px 0}
.table{width:100%;border-collapse:collapse;font-size:13px}
.table th,.table td{padding:12px 8px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.table th{font-weight:600;color:var(--secondary);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;font-size:14px}
.kv dt{color:var(--secondary)}
.kv dd{margin:0}
.chip{display:inline-block;padding:4px 10px;border-radius:var(--r-pill);font-size:12px;background:var(--chip-fill);margin:2px 4px 2px 0}
.qr{width:96px;height:96px;border-radius:var(--r-linkbox);background:
  repeating-linear-gradient(90deg,var(--ink) 0 6px,transparent 6px 12px),
  repeating-linear-gradient(0deg,var(--ink) 0 6px,transparent 6px 12px);background-blend-mode:multiply;opacity:.75;border:6px solid var(--paper)}
.timeline{border-left:2px solid var(--line);padding-left:22px;margin:18px 5px}
.timeline div{padding-bottom:20px}
.right{margin-left:auto}
.danger-btn{background:var(--warning-fill)!important;color:var(--warning-ink)!important;border-color:transparent!important}
.reserved{position:relative;opacity:.92}
.reserved .badge{background:var(--warning-fill);color:var(--warning-ink)}
.notfound{max-width:560px;margin:60px auto;text-align:center}
.feedback{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--secondary);margin-top:40px;flex-wrap:wrap}
.feedback button{min-height:32px;padding:4px 12px;font-size:12px}
.health{display:flex;gap:16px;font-size:12px;color:var(--secondary);flex-wrap:wrap}
.health i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--track-fill);margin-right:6px}
#layer:empty{display:none}
#layer{position:fixed;inset:0;display:grid;place-items:center;background:rgba(23,46,64,.28);z-index:20;padding:18px}
.modal{width:min(520px,100%);padding:var(--panel-pad);background:var(--paper);border:1px solid var(--glass-edge);border-radius:var(--r-panel);box-shadow:var(--shadow-panel)}
.modal h2{margin-top:0}
#toasts{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);display:grid;gap:8px;z-index:30;width:min(560px,calc(100% - 36px))}
.toastc{display:flex;gap:12px;align-items:center;padding:12px 16px;background:var(--paper);border:1px solid var(--glass-edge);border-radius:var(--r-button);box-shadow:var(--shadow-panel);font-size:13px}
.toastc b{color:var(--toast)}
.toastc .trace{color:var(--secondary);font-size:11px}
.phone-wrap{display:grid;place-items:center;padding:24px 0}
.progress{display:flex;gap:7px;margin:0 0 18px}
.progress span{height:5px;flex:1;border-radius:var(--r-pip);background:var(--pip)}
.progress span.done{background:var(--pip-done)}
.sync{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--secondary)}
.sync i{width:8px;height:8px;border-radius:50%;background:var(--track-fill);display:inline-block}
.sync.offline i{background:transparent;border:1.5px dashed var(--secondary)}
.sync.syncing i{animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.5}50%{opacity:1}}
.banner{padding:10px 16px;background:var(--warning-fill);color:var(--warning-ink);font-size:13px;text-align:center}
@media (max-width:760px){.shell{grid-template-columns:1fr}.rv aside{display:flex;overflow:auto;padding:10px;border-right:0;gap:4px}.rv aside .eyebrow,.rv aside .footer,.rv aside .sub{display:none}.rv .nav{width:auto;white-space:nowrap;margin:0}.rv .nav small{display:none}main.content{padding:20px 14px}.rv .three,.rv .grid{grid-template-columns:1fr}.rv h1{font-size:27px}}
@media (prefers-reduced-motion:reduce){.sync.syncing i{animation:none}}
/* anchor-as-button, same tokens as .rv button */
.rv .rv-btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--button-min-h);padding:9px 15px;border-radius:var(--r-button);border:1px solid var(--glass-edge);background:var(--button-fill);color:var(--ink);box-shadow:var(--shadow-button);text-decoration:none;font-weight:500;transition:box-shadow var(--dur-button)}
.rv .rv-btn:hover{box-shadow:var(--shadow-button-hover)}
.rv .rv-btn:focus-visible{outline:var(--focus-w) solid var(--focus);outline-offset:var(--focus-w)}
.rv .rv-btn.primary{background:var(--green);color:var(--primary-ink);border-color:transparent;box-shadow:var(--shadow-primary)}
.rv .rv-btn.quiet{background:transparent;border-color:transparent;box-shadow:none}
.rv a.nav{display:block;text-decoration:none;color:var(--ink);padding:9px 15px;border-radius:var(--r-button);margin:5px 0;border:1px solid transparent;font-weight:500}
.rv a.nav small{display:block;color:var(--secondary);font-size:11px;font-weight:400}
.rv a.nav.active{background:var(--nav-active);border-color:var(--glass-edge);box-shadow:var(--shadow-nav-active)}
.rv a.brand{text-decoration:none;color:inherit}
.rv a{color:var(--green)}
.rv .top a,.rv a.nav,.rv a.rv-btn,.rv .phases a,.rv a.brand{color:inherit}
/* participant: assessment media strip + flagged options */
.rv .media{padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-button);background:var(--paper);margin:8px 0 12px}
.rv .media .row{gap:10px;margin-top:6px}
.rv .choice.flag-missing,.rv .choice.flag-exclusion{color:var(--secondary)}
.rv .choice.flag-other,.rv .choice.flag-other-problem{border-style:dashed}
.rv .other-text{margin-top:8px}
.rv .tour{border-style:dashed;margin-bottom:var(--gap-grid)}
.rv .tour ol li{margin:4px 0}

/* Shell adapter: semantic sibling caret/link (no nested interactive elements). */
.rv .tree-row .tree-label{color:inherit;text-decoration:none;display:block}
.rv .level-menu{position:relative}
.rv .level-menu [data-menu]{position:absolute;right:0;top:calc(100% + 6px);z-index:5;min-width:200px;padding:6px;display:grid;gap:4px}
.rv .level-menu [data-menu] button{text-align:left;white-space:nowrap}
.rv .content:focus{outline:none}
/* An isolated shell may have little content; don't stretch the mobile tree. */
@media(max-width:760px){.shell{grid-template-rows:auto 1fr}}
/* B30 (lane 9, less text 3): ONE visible heading per screen. When a page renders its own h1 (About, sign-in, survey, public
   home, error panels), the shell's generic h1 ("Welcome" / "3D Review" / scope title) steps aside; its eyebrow and level menu stay. */
.rv .content:has(> [data-content] h1) > .row > h1{display:none}