/* 3D Review glass — preview scaffolding.
   Values are the cookbook's glass.css / mock inline styles, addressed through this system's tokens.
   Behaviours (hover, focus, reduced transparency, live regions) follow Generative Glass where the mocks agree. */
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;500&display=swap");

:root{
  --aurora-ground:
    radial-gradient(ellipse at 0% 8%, var(--aurora-mint), transparent 55%),
    radial-gradient(ellipse at 96% 28%, var(--aurora-lilac), transparent 58%),
    radial-gradient(ellipse at 48% 95%, var(--aurora-sky), transparent 60%),
    var(--ground);
}

.rv{font:15px/1.5 var(--font-ui);color:var(--ink);background:var(--aurora-ground);border-radius:var(--r-page);overflow:clip;min-height:100%}
.rv *{box-sizing:border-box}
.rv button,.rv input,.rv select,.rv textarea{font:inherit}
.rv .glass{background:var(--glass);backdrop-filter:blur(var(--blur-panel)) saturate(var(--sat-panel));-webkit-backdrop-filter:blur(var(--blur-panel)) saturate(var(--sat-panel));border:1px solid var(--glass-edge);border-radius:var(--r-panel);box-shadow:var(--shadow-panel)}
.rv .panel{padding:var(--panel-pad);margin-bottom:var(--gap-grid)}
.rv .top{display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;padding:var(--top-pad-y) var(--top-pad-x);background:var(--glass);backdrop-filter:blur(var(--blur-top)) saturate(var(--sat-top));-webkit-backdrop-filter:blur(var(--blur-top)) saturate(var(--sat-top));border-bottom:1px solid var(--glass-edge)}
.rv aside{padding:var(--aside-pad-y) var(--aside-pad-x);background:var(--aside-fill);backdrop-filter:blur(var(--blur-panel));-webkit-backdrop-filter:blur(var(--blur-panel));border-right:1px solid var(--glass-edge)}
.rv .brand{font-size:23px;font-weight:650;letter-spacing:-1px}
.rv .brand span{display:inline-block;background:var(--green);color:var(--primary-ink);padding:2px 9px;border-radius:var(--r-brand);margin-right:8px}
.rv .eyebrow{font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:650;color:var(--secondary)}
.rv h1{font-size:31px;line-height:1.18;letter-spacing:-1px;margin:8px 0 12px;font-weight:600;max-width:var(--h1-max-w)}
.rv h2{font-size:20px;line-height:1.3;margin:0 0 12px;font-weight:600}
.rv h3{font-size:16px;margin:0 0 7px}
.rv p{margin:7px 0 17px}
.rv .muted{color:var(--secondary)}
.rv .metric{font-size:25px;font-weight:600}
.rv button{cursor:pointer;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);transition:background var(--dur-button),box-shadow var(--dur-button)}
.rv button:hover{box-shadow:var(--shadow-button-hover)}
.rv button:focus-visible,.rv input:focus-visible,.rv select:focus-visible,.rv a:focus-visible{outline:var(--focus-w) solid var(--focus);outline-offset:var(--focus-w)}
.rv button.primary{background:var(--green);color:var(--primary-ink);border-color:transparent;box-shadow:var(--shadow-primary)}
.rv button.quiet{background:transparent;border-color:transparent;box-shadow:none}
.rv button[disabled]{opacity:.5;cursor:default}
.rv .nav{display:block;width:100%;text-align:left;margin:5px 0;box-shadow:none;background:transparent;border-color:transparent}
.rv .nav.active{background:var(--nav-active);border-color:var(--glass-edge);box-shadow:var(--shadow-nav-active);color:var(--ink)}
.rv .nav small{display:block;color:var(--secondary);font-size:11px;margin-left:24px}
.rv .badge{display:inline-block;font-size:12px;letter-spacing:.04em;border-radius:var(--r-pill);padding:var(--badge-pad-y) var(--badge-pad-x);background:var(--badge-fill);color:var(--badge-ink)}
.rv .badge.demo{background:var(--demo-fill);color:var(--secondary);border:1px solid var(--glass-edge);letter-spacing:.06em}
.rv .note{padding:var(--note-pad-y) var(--note-pad-x);border-radius:var(--r-button);background:var(--note-fill);font-size:13px}
.rv .warning{background:var(--warning-fill);color:var(--warning-ink)}
.rv .linkbox{font-size:13px;background:var(--note-fill);border:1px dashed var(--line);border-radius:var(--r-button);padding:12px;overflow-wrap:anywhere}
.rv input:not([type=checkbox]):not([type=radio]),.rv select,.rv textarea{display:block;width:100%;padding:var(--input-pad);margin-top:6px;border:1px solid var(--line);border-radius:var(--r-input);background:var(--paper);color:var(--ink);font-size:16px}
.rv label{display:block;font-size:13px;font-weight:550;margin-bottom:14px}
.rv .row{display:flex;gap:var(--gap-row);align-items:center;flex-wrap:wrap}
.rv .grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-grid)}
.rv .three{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-three)}
.rv .track{height:var(--track-h);background:var(--track);border-radius:10px;margin:12px 0}
.rv .fill{height:100%;background:var(--track-fill);border-radius:10px}
.rv .lens{border-top:var(--lens-w) solid var(--lens-green)}
.rv .lens.blue{border-top-color:var(--lens-blue)}
.rv .lens.yellow{border-top-color:var(--lens-yellow)}
.rv .face{width:var(--face);height:var(--face);margin-bottom:15px}
.rv .legend{font-size:12px;display:flex;gap:16px;flex-wrap:wrap;margin:12px 0 20px}
.rv .dot{display:inline-block;width:var(--dot-legend);height:var(--dot-legend);border-radius:var(--r-round);margin-right:5px}
.rv .choice{display:block;border:1px solid var(--line);border-radius:var(--r-choice);padding:14px;margin:9px 0;font-size:15px;background:var(--paper)}
.rv .choice:has(input:checked){background:var(--choice-selected);border-color:var(--choice-selected-edge)}
.rv .toast{margin-top:15px;color:var(--toast);font-size:13px}
.rv .phone{max-width:var(--phone-max-w);margin:0 auto;padding:var(--phone-pad)}
.rv .footer{font-size:12px;color:var(--secondary);margin-top:22px}
.rv .rw-perspective{padding:18px 14px;border-radius:var(--r-perspective);background:var(--perspective-fill);border:1px solid var(--welcome-edge)}
.rv .rw-dot{display:block;width:var(--dot-perspective);height:var(--dot-perspective);border-radius:var(--r-round);margin-bottom:13px;box-shadow:var(--inset-dot)}
.rv .rw-progress{display:flex;gap:var(--gap-pip);margin:0 0 25px}
.rv .rw-progress span{height:var(--pip-h);flex:1;border-radius:var(--r-pip);background:var(--pip)}
.rv .rw-progress span.done{background:var(--pip-done)}
.rv [hidden]{display:none!important}

@media (prefers-reduced-transparency:reduce){.rv .glass,.rv .top,.rv aside,.rv .rw-perspective{background:var(--paper);backdrop-filter:none;-webkit-backdrop-filter:none}}
@media (prefers-reduced-motion:reduce){.rv button{transition:none}}

/* ── ContextTree: the left pane. Workspace › Project › Assessment › Survey; Notion-feel navigation, bounded to access layering (06 §brief). ── */
.rv .tree{display:flex;flex-direction:column;gap:14px;min-width:0;width:auto}
.rv .tree .eyebrow{margin:0 0 4px 8px}
.rv .tree-search{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--glass-edge);border-radius:var(--r-button);background:var(--button-fill);box-shadow:var(--shadow-button);color:var(--secondary);font-size:13px}
.rv .tree-search input:not([type=checkbox]){all:unset;flex:1;min-width:0;color:var(--ink);font:inherit;font-size:13px;display:block;width:auto;margin:0;padding:2px 0;border:0;background:transparent;box-shadow:none;min-height:0}
.rv label.tree-search{margin:0;font-weight:500}
.rv .tree-search input:focus{outline:none}
.rv .tree-search:focus-within{outline:var(--focus-w) solid var(--focus);outline-offset:1px}
.rv .tree-search kbd{font:11px/1 var(--font-ui);padding:3px 5px;border:1px solid var(--line);border-radius:5px;color:var(--secondary)}
.rv .tree-section{display:flex;flex-direction:column;gap:1px}
.rv .tree-node{position:relative}
.rv .tree-kids{position:relative;margin-left:12px;padding-left:4px;border-left:1px solid var(--line)}
.rv .tree-row{display:flex;align-items:center;gap:5px;min-height:32px;padding:3px 6px 3px 2px;border-radius:var(--r-button);color:var(--ink);text-decoration:none;font-size:13.5px;font-weight:500;border:1px solid transparent;line-height:1.25}
.rv .tree-row:hover{background:var(--chip-fill)}
.rv .tree-row.on{background:var(--nav-active);border-color:var(--glass-edge);box-shadow:var(--shadow-nav-active);font-weight:600}
.rv .tree-row:focus-visible{outline:var(--focus-w) solid var(--focus);outline-offset:1px}
.rv .tree-row .tree-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rv .tree-row .tree-label small{display:block;font-size:11px;font-weight:400;color:var(--secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv .tree-row .tree-meta{font-size:11px;color:var(--secondary);font-weight:400;white-space:nowrap}
.rv .tree-row.add{color:var(--secondary);font-weight:400;font-size:13px;min-height:30px}
.rv .tree-row.add:hover{color:var(--ink)}
.rv .tree-row.lvl-2,.rv .tree-row.lvl-3,.rv .tree-row.lvl-4{font-weight:500}
.rv .tree-ico{width:18px;text-align:center;color:var(--secondary);font-size:13px;flex:none}
.rv .tree-caret{flex:none;width:20px;height:20px;padding:0;margin:0;min-height:0;border:0;background:transparent;box-shadow:none;border-radius:6px;color:var(--secondary);font-size:11px;line-height:20px;cursor:pointer}
.rv .tree-caret:hover{background:var(--badge-fill);color:var(--ink)}
.rv .tree-caret.none{display:inline-block;pointer-events:none}
.rv .tree-role{flex:none;font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;padding:2px 6px;border-radius:var(--r-pill);background:var(--badge-fill);color:var(--badge-ink);font-weight:600;opacity:.85}
.rv .tree-node.cur>.tree-row:not(.on){font-weight:600}
.rv .tree-empty,.rv .tree-note{font-size:12px;color:var(--secondary);padding:6px 8px 6px 12px}
.rv .tree-note{border-left:2px solid var(--line);margin:4px 0 0 8px}
.rv .tree-tools{margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
.rv .tree-footer{font-size:12px;color:var(--secondary);display:grid;gap:8px}
.rv .tree-me{color:var(--ink)}
.rv .tree-viewas{display:grid;gap:4px;font-size:11px}
.rv .tree-viewas select{font-size:12px;min-height:30px;padding:3px 8px}
.rv .crumbs{display:flex;align-items:center;gap:6px;min-width:0;flex:1;font-size:13px;color:var(--secondary);padding:0 8px}
.rv .crumbs a{color:inherit;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px;padding:4px 6px;border-radius:6px}
.rv .crumbs a:hover{background:var(--chip-fill);color:var(--ink)}
.rv .crumbs a[aria-current]{color:var(--ink);font-weight:600}
.rv .crumbs .sep{opacity:.6}
.rv .glass.focus{outline:2px solid var(--focus);outline-offset:2px}
@media (max-width:760px){.rv .tree{width:auto;flex-direction:column;gap:8px}.rv .tree-tools,.rv .tree-footer .footer{display:none}.rv .crumbs{display:none}}

/* ── C1 states: skeleton (loading), compensating toast, proposed chip ── */
.rv .skeleton .sk{height:14px;border-radius:7px;background:linear-gradient(90deg,var(--chip-fill),var(--nav-active),var(--chip-fill));background-size:200% 100%;animation:sk 1.4s linear infinite;margin:10px 0;max-width:100%}
.rv .skeleton .sk-h{height:26px;width:46%;margin-bottom:16px}
.rv .skeleton .sk-short{width:38%}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.rv .skeleton .sk{animation:none}}
.toastc.compensate b{color:var(--secondary)}
.toastc small{font-size:11px}
.rv .chip.proposed{font-size:11px;background:var(--warning-fill);color:var(--warning-ink);text-decoration:none;vertical-align:middle;border:1px dashed var(--warning-ink)}