/* Home2 source library - dark exhibit overlay (reference: root room-3d.html).
   Chrome inherits the viewer page tokens (dark default, body.light mirrors light);
   sheet imagery stays on a white card inside the dark chrome, like a lightbox. */
.h2docs{--muted:var(--mut,#8fa0ad);--accent:var(--cyan,#02A9E0);
  --docmono:var(--mono,ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace);
  box-sizing:border-box;width:min(1340px,96vw);max-width:none;height:min(920px,94dvh);max-height:94dvh;
  padding:0;border:1px solid rgba(143,160,173,.35);border-radius:8px;
  background:var(--panelbg,linear-gradient(180deg,rgba(18,24,31,.97),rgba(14,20,26,.97)));
  color:var(--ink,#eef3f7);box-shadow:0 12px 34px rgba(0,0,0,.55);
  font:14px/1.5 "Avenir Next","Segoe UI",system-ui,sans-serif;overflow:hidden}
.h2docs::backdrop{background:rgba(11,15,19,.82);backdrop-filter:blur(5px)}
.h2docs *{box-sizing:border-box}
.h2docs-shell{height:100%;display:flex;flex-direction:column}
.h2docs-header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:20px 28px 4px}
.h2docs h2,.h2docs h3,.h2docs p{margin:0}
.h2docs h2{font-size:20px;line-height:1.25;font-weight:700;letter-spacing:.03em}
.h2docs-eyebrow{font:600 10px/1 var(--docmono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:7px!important}
.h2docs-close{border:1px solid var(--line,rgba(143,160,173,.22));background:var(--chipbg,rgba(18,24,31,.9));
  border-radius:50%;width:38px;height:38px;font-size:22px;line-height:1;color:var(--muted);cursor:pointer;flex:none}
.h2docs-close:hover{color:var(--ink,#eef3f7);border-color:rgba(143,160,173,.5)}
.h2docs-context{padding:8px 28px 14px;color:var(--muted);font-size:12px;max-width:1100px}
.h2docs-tabs{display:flex;gap:6px;padding:0 28px 12px;border-bottom:2px solid rgba(2,169,224,.5);overflow:auto;flex:none}
.h2docs-tab{border:1px solid transparent;border-radius:4px;padding:9px 13px;background:none;
  color:var(--muted);font-weight:600;font-size:10px;font-family:var(--docmono);
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;cursor:pointer}
.h2docs-tab:hover{color:var(--ink,#eef3f7);border-color:rgba(143,160,173,.5)}
.h2docs-tab[aria-selected=true]{background:none;color:var(--accent);border-color:rgba(2,169,224,.6)}
.h2docs-panel{display:grid;grid-template-columns:245px minmax(0,1fr);min-height:0;flex:1;overflow:hidden}
.h2docs-list{padding:14px 12px;overflow:auto;border-right:1px solid var(--line,rgba(143,160,173,.22));
  background:var(--panel2,#0e141a)}
.h2docs-document{display:flex;flex-direction:column;text-align:left;gap:5px;width:100%;margin-bottom:6px;
  padding:11px 12px;border:1px solid transparent;border-radius:3px;background:none;
  color:var(--ink,#eef3f7);cursor:pointer;font:inherit;font-size:12px}
.h2docs-document:hover{background:rgba(2,169,224,.08)}
.h2docs-document small{font:600 9px var(--docmono);letter-spacing:.09em;color:var(--muted);text-transform:uppercase}
.h2docs-document[aria-current=true]{background:rgba(2,169,224,.14);border-color:rgba(2,169,224,.6);box-shadow:none}
.h2docs-stage{min-height:0;min-width:0;display:flex;flex-direction:column;overflow:auto;background:none}
.h2docs-document-head{padding:18px 24px 14px;border-bottom:1px solid var(--line,rgba(143,160,173,.22));flex:none}
.h2docs h3{font-size:16px;line-height:1.35;font-weight:700;letter-spacing:.02em}
.h2docs-meta{margin-top:6px!important;font:600 9.5px/1.7 var(--docmono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.h2docs-note{margin-top:9px!important;font-size:12px;line-height:1.55;color:var(--lblink,#c6d1db)}
.h2docs-status{display:inline-block;margin-top:9px!important;font:700 8.5px/1.4 var(--docmono);
  letter-spacing:.1em;text-transform:uppercase;padding:3px 7px;border-radius:2px;
  border:1px solid var(--scalbd,rgba(201,185,143,.6));background:none;color:#d8c99c}
.h2docs-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.h2docs-action{display:inline-block;text-decoration:none!important;padding:7px 11px;
  background:var(--accent);color:#03181f!important;border:1px solid var(--accent);border-radius:3px;
  font:700 10px/1.3 var(--docmono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.h2docs-secondary{background:none;color:var(--accent)!important;border-color:rgba(2,169,224,.55)}
.h2docs-zoom{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:7px 14px;
  border-bottom:1px solid var(--line,rgba(143,160,173,.22));flex:none;
  font:600 9.5px var(--docmono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.h2docs-zoom-button{background:var(--chipbg,rgba(18,24,31,.9));border:1px solid var(--line,rgba(143,160,173,.22));
  color:var(--ink,#eef3f7);border-radius:4px;min-width:28px;height:27px;cursor:pointer}
.h2docs-zoom-button:hover{border-color:rgba(143,160,173,.5)}
/* Sheets are white drawings: the viewport is a dark well and the image itself is
   the light card, so linework stays readable inside the dark chrome. */
.h2docs-image-viewport{overflow:auto;background:var(--bg,#0b0f13);min-height:180px;flex:1;padding:16px}
.h2docs-image{display:block;max-width:none!important;height:auto!important;width:100%;background:#fff;
  box-shadow:0 0 0 1px rgba(143,160,173,.3),0 10px 30px rgba(0,0,0,.5)}
.h2docs-footer{padding:9px 28px;border-top:1px solid var(--line,rgba(143,160,173,.22));
  color:var(--muted);font:600 9px/1.6 var(--docmono);letter-spacing:.08em;flex:none}
.h2docs-file{margin:25px;padding:40px 24px;text-align:center;border:1px dashed var(--line,rgba(143,160,173,.22));
  border-radius:6px;color:var(--muted)}
.h2docs-file span{display:inline-grid;place-items:center;width:55px;height:68px;margin-bottom:15px;
  background:rgba(2,169,224,.10);border:1px solid rgba(2,169,224,.55);border-radius:4px;
  color:var(--accent);font:700 11px var(--docmono);letter-spacing:.1em}
.h2docs-empty{grid-column:1/-1;margin:24px;padding:24px;color:var(--muted)}
.h2docs-empty p{margin:10px 0 18px}
.h2docs :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* Inline reference list mounted inside the viewer card (outside the dialog):
   uses the page tokens directly. */
.h2docs-inline{display:grid;gap:8px;padding:13px 0;color:inherit}
.h2docs-inline-title{font:700 9px/1.4 var(--mono,ui-monospace,"SF Mono","Cascadia Mono",Menlo,Consolas,monospace);letter-spacing:.13em;text-transform:uppercase;
  color:var(--mut,#8fa0ad);opacity:1}
.h2docs-inline-button{border:1px solid rgba(2,169,224,.55);background:none;color:var(--ink,#eef3f7);
  border-radius:3px;padding:9px 11px;text-align:left;font-weight:600;font-size:12px;line-height:1.4;cursor:pointer}
.h2docs-inline-button:hover{border-color:rgba(2,169,224,.6);background:rgba(2,169,224,.08)}
.h2docs-inline small{font-size:10px;color:var(--mut,#8fa0ad);opacity:1}
@media(max-width:700px){.h2docs{width:100vw;height:100dvh;max-height:100dvh;border-radius:0;border:0}
.h2docs-header{padding:17px 17px 4px}.h2docs h2{font-size:17px}.h2docs-context{padding:8px 17px 12px}
.h2docs-tabs{padding:0 12px 10px;gap:4px}.h2docs-tab{padding:9px 11px}
.h2docs-panel{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
.h2docs-list{display:flex;gap:6px;padding:9px 12px;max-height:108px;border-right:0;
  border-bottom:1px solid var(--line,rgba(143,160,173,.22))}
.h2docs-document{flex:0 0 190px;margin:0;padding:8px 10px;font-size:10px}
.h2docs-document-head{padding:13px 16px 10px}.h2docs h3{font-size:15px}
.h2docs-image-viewport{padding:8px}.h2docs-footer{padding:7px 15px;font-size:8.5px}}
@media(prefers-reduced-motion:reduce){.h2docs *{scroll-behavior:auto!important}}
.h2docs{position:fixed;inset:0;margin:auto!important}
.h2docs-stage,.h2docs-list{scrollbar-width:thin;scrollbar-color:#3d4a57 transparent}
/* Light scheme: tokens flip via body.light; mirror the hardcoded accents. */
body.light .h2docs{border-color:rgba(52,66,80,.35);box-shadow:0 12px 34px rgba(24,34,44,.25)}
body.light .h2docs::backdrop{background:rgba(28,36,44,.6)}
body.light .h2docs-action:not(.h2docs-secondary){color:#fff!important}
body.light .h2docs-status{color:#6b5a1c;border-color:var(--scalbd,rgba(138,109,31,.55))}
body.light .h2docs-image{box-shadow:0 0 0 1px rgba(52,66,80,.25),0 6px 22px rgba(24,34,44,.2)}
body.light .h2docs-stage,body.light .h2docs-list{scrollbar-color:#b9c3cb transparent}
/* Touch devices never get a hover state - kill the sticky highlight look
   (reference room-3d.html:270-274). */
@media(hover:none){
.h2docs-close:hover{color:var(--muted);border-color:var(--line,rgba(143,160,173,.22))}
.h2docs-tab:hover{color:var(--muted);border-color:transparent}
.h2docs-document:hover{background:none}
.h2docs-zoom-button:hover{border-color:var(--line,rgba(143,160,173,.22))}
.h2docs-inline-button:hover{border-color:rgba(2,169,224,.55);background:none}
}