/* HOM3 v3x -- the Library as a room.
   One 3D stage, three worlds. Geometry is shared: a perspective ceiling
   that genuinely converges, a receding bookshelf wall on the LEFT, a
   framed viewport CENTER holding the library's actual content, a back
   wall behind it, floor below, warm key light above. .expanded grows
   the viewport to near-full and eases the room back.

   Nautical  = captain's great cabin: coffered beam ceiling with teal
               panels, brass chandelier, arched stern lights, leather
               spines on brass-railed shelves (per operator reference).
   Cyber     = data vault: rack shelves of glowing cartridges, grid
               coffers, terminal lights, hanging emitter.
   Corporate = reading room: walnut-ink shelves, frosted skylight
               coffers, pendant bar, restraint.

   Theme keys off the existing .theme-<name> class on html/body.
   Reduced motion: no transitions, no parallax. ASCII-only. */

.library-room{
  --px:0; --py:0;
  position:relative; isolation:isolate; overflow:hidden;
  /* a room is sized like a room: fixed to the screen, never to the
     content. The viewport scrolls internally, so an endless artifact
     list lives behind the glass instead of stretching the walls. */
  height:82vh; min-height:520px; 
  border-radius:12px;
  perspective:1150px; perspective-origin:50% 42%;
  display:flex; align-items:stretch; justify-content:center;
}

/* ---------- shared geometry (all themes) ---------- */
.lr-ceiling{
  position:absolute; left:-8%; right:-8%; top:0; height:34%;
  transform-origin:bottom center; transform:rotateX(62deg);
  pointer-events:none; z-index:1; /* cornice: ceiling meets wall OVER it */
}
.lr-floor{
  position:absolute; left:-10%; right:-10%; bottom:-4%; height:52%;
  transform-origin:bottom center; transform:rotateX(-60deg);
  pointer-events:none; z-index:0;
}
.lr-wall-left{
  position:absolute; left:-1.5%; top:4%; bottom:6%; width:34%;
  transform-origin:left center; transform:rotateY(56deg);
  pointer-events:none; z-index:1;
  border-radius:4px;
}
.lr-post-right{
  position:absolute; right:0; top:0; bottom:0; width:4.5%;
  pointer-events:none; z-index:2;
}
.lr-backwall{
  position:absolute; left:8%; right:8%; top:30%; height:26%;
  pointer-events:none; z-index:0;
  transform:translate3d(calc(var(--px)*-8px), calc(var(--py)*-4px), 0);
}
.lr-chandelier{
  position:absolute; left:50%; top:0; width:150px; height:130px;
  margin-left:-75px; pointer-events:none; z-index:2;
  background-repeat:no-repeat; background-position:top center;
  transform:translate3d(calc(var(--px)*-12px), calc(var(--py)*-5px), 0);
}
.lr-glow{
  position:absolute; inset:0; pointer-events:none; z-index:3;
  transform:translate3d(calc(var(--px)*6px), calc(var(--py)*4px), 0);
}

/* ---------- the viewport (content surface) ---------- */
.lr-viewport{
  position:relative; z-index:4; align-self:center;
  width:min(66%, 74ch); height:72%; margin:16% 3% 4% 26%;
  border-radius:8px; overflow:auto; overscroll-behavior:contain;
  transition:width .55s ease, margin .55s ease, height .55s ease;
}
.lr-viewport-inner{ padding:1.1rem 1.3rem; position:relative; }
.lr-toggle{
  position:absolute; top:.55rem; right:.6rem; z-index:5;
  font:600 .62rem ui-monospace,monospace; letter-spacing:.14em;
  padding:.3rem .6rem; border-radius:4px; cursor:pointer;
}

/* ---------- expanded: viewport takes the stage ---------- */
.library-room.expanded .lr-viewport{
  width:96%; margin:2% 2%; height:94%;
}
/* sticky toolbar: the artifact search rides primary, over the books */
.lr-toolbar{
  position:sticky; top:0; z-index:6;
  display:flex; align-items:center; gap:.6rem;
  padding:.55rem .6rem .55rem 0; margin-bottom:.6rem;
}
.lr-search-input{
  flex:1 1 auto; min-width:0;
  font:inherit; font-size:.85rem; letter-spacing:.04em;
  padding:.42rem .65rem; border-radius:6px;
  background:rgba(3,10,18,.6); color:inherit;
  border:1px solid rgba(140,160,180,.3);
}
.lr-search-input:focus{ outline:none; }
.theme-nautical .lr-toolbar{
  background:linear-gradient(180deg, rgba(9,22,34,.98),
    rgba(9,22,34,.92) 80%, rgba(9,22,34,0));
  border-bottom:1px solid rgba(217,164,65,.3);
}
.theme-nautical .lr-search-input{
  border-color:#7a5518; background:rgba(3,10,18,.7);
}
.theme-nautical .lr-search-input:focus{
  border-color:#d9a441; box-shadow:0 0 0 1px rgba(217,164,65,.35);
}
.theme-cyber .lr-toolbar{
  background:linear-gradient(180deg, rgba(2,5,7,.98),
    rgba(2,5,7,.9) 80%, rgba(2,5,7,0));
  border-bottom:1px solid rgba(15,157,99,.5);
}
.theme-cyber .lr-search-input{ border-color:#0f9d63; }
.theme-cyber .lr-search-input:focus{
  box-shadow:0 0 8px rgba(52,245,160,.3);
}
.theme-corporate .lr-toolbar{
  background:linear-gradient(180deg, rgba(14,23,38,.98),
    rgba(14,23,38,.9) 80%, rgba(14,23,38,0));
  border-bottom:1px solid #24344f;
}
.theme-corporate .lr-search-input{ border-color:#24344f; }
.theme-corporate .lr-search-input:focus{ border-color:#3d7bd9; }
@media (max-width:760px){
  .lr-viewport{ margin-top:16%; }
}
.library-room.expanded .lr-wall-left{
  transform:rotateY(72deg) translateX(-55%); opacity:.28;
}
.library-room.expanded .lr-ceiling{
  transform:rotateX(62deg) translateY(-42%); opacity:.45;
}
.library-room.expanded .lr-floor{
  transform:rotateX(-60deg) translateY(44%); opacity:.45;
}
.library-room.expanded .lr-backwall{ opacity:.25; }
.library-room.expanded .lr-chandelier{ opacity:.5; }
.lr-wall-left, .lr-ceiling, .lr-floor, .lr-backwall, .lr-chandelier{
  transition:transform .55s ease, opacity .55s ease;
}
@media (prefers-reduced-motion: reduce){
  .lr-wall-left,.lr-ceiling,.lr-floor,.lr-backwall,.lr-chandelier,
  .lr-viewport{ transition:none; }
  .lr-backwall,.lr-chandelier,.lr-glow{ transform:none; }
}
@media (max-width:760px){
  .library-room{ height:74vh; }
  .lr-wall-left{ width:22%; }
  .lr-viewport{ width:78%; margin-left:18%; }
  .library-room.expanded .lr-viewport{ width:96%; margin-left:2%; }
}

/* ================================================================
   NAUTICAL -- captain's great cabin (reference build)
   ================================================================ */
.theme-nautical .library-room{
  background:
    radial-gradient(120% 90% at 50% 30%, #123048 0%, #081826 55%,
      #04090f 100%);
}
/* coffered beam ceiling: wood beams both axes, TEAL panels between --
   drawn straight on the plane; the rotateX makes them truly converge */

/* stern lights: repeating arched windows, moonlit teal glass */

/* brass chandelier + warm pool of light */

/* left wall: brass-railed shelves of leather spines, receding */

/* carved post, brass capital, curtain hint on the right edge */


.theme-nautical .lr-glow{
  background:
    radial-gradient(65% 55% at 50% 26%, rgba(244,213,138,.14),
      transparent 70%),
    radial-gradient(120% 100% at 50% 100%, transparent 55%,
      rgba(2,6,10,.55) 100%);
}
.theme-nautical .lr-viewport{
  background:linear-gradient(180deg, rgba(9,22,34,.94),
    rgba(6,15,24,.96));
  border:1px solid #7a5518;
  box-shadow:inset 0 0 0 1px rgba(244,213,138,.12),
    inset 0 1px 0 rgba(255,246,214,.08), 0 14px 40px rgba(0,0,0,.55);
}


.theme-nautical .lr-toggle{
  background:rgba(217,164,65,.16); border:1px solid #b98a34;
  color:#f4d58a;
}
.theme-nautical .lr-toggle:hover{ background:rgba(217,164,65,.3); }

/* ================================================================
   CYBER -- data vault
   ================================================================ */
.theme-cyber .library-room{
  background:radial-gradient(120% 90% at 50% 30%, #06131020 0%,
    #04070a 60%, #020405 100%), #04070a;
}



/* rack shelves: glowing cartridge spines */



.theme-cyber .lr-glow{
  background:
    radial-gradient(60% 50% at 50% 22%, rgba(52,245,160,.1),
      transparent 70%),
    radial-gradient(120% 100% at 50% 100%, transparent 55%,
      rgba(1,3,4,.6) 100%);
}
.theme-cyber .lr-viewport{
  background:rgba(2,5,7,.94); border:1px solid #0f9d63;
  box-shadow:0 0 18px rgba(52,245,160,.14),
    inset 0 0 22px rgba(15,157,99,.12);
}
.theme-cyber .lr-toggle{
  background:rgba(15,157,99,.18); border:1px solid #0f9d63;
  color:#34f5a0;
}
.theme-cyber .lr-toggle:hover{ background:rgba(15,157,99,.34); }

/* ================================================================
   CORPORATE -- reading room
   ================================================================ */
.theme-corporate .library-room{
  background:linear-gradient(180deg, #17253d 0%, #0e1726 70%,
    #0a111c 100%);
}






.theme-corporate .lr-glow{
  background:
    radial-gradient(70% 45% at 50% 4%, rgba(235,242,250,.16),
      transparent 65%),
    radial-gradient(130% 80% at 50% 118%, transparent 60%,
      rgba(5,9,15,.5) 100%);
}
.theme-corporate .lr-viewport{
  background:#0e1726ee; border:1px solid #24344f;
  box-shadow:0 12px 34px rgba(0,0,0,.45);
}
.theme-corporate .lr-toggle{
  background:#16233a; border:1px solid #3d7bd9; color:#cfe0f5;
}
.theme-corporate .lr-toggle:hover{ background:#1d2f47; }

/* ---------- drawn-scene palettes (SVG fills via CSS vars) ---------- */
.theme-nautical .library-room{
  --lrw-wood:#5a3a1c; --lrw-wood-hi:#8a6134; --lrw-wood-lo:#33200e;
  --lrw-panel:#0d5f66; --lrw-panel-hi:#1a8b96;
  --lrw-metal:#d9a441; --lrw-metal-hi:#f4d58a; --lrw-metal-lo:#7a5518;
  --lrw-glass:#123a4a; --lrw-glass-hi:#bfe7ee; --lrw-moon:#eef7f2;
  --lrw-star:#dfeaf2; --lrw-candle:#f2e5c8; --lrw-flame:#ffcf6e;
  --lrw-flame-hi:#fff3c4; --lrw-curtain:#6e1f22; --lrw-curtain-lo:#471114;
  --lrw-rug:#5b1f22; --lr-handle:#d9a441;
  --lrw-sp0:#6e2f22; --lrw-sp1:#23405a; --lrw-sp2:#7a5518;
  --lrw-sp3:#3f5a35; --lrw-sp4:#55283e; --lrw-sp5:#204a52;
  --lrw-sp6:#8a6134; --lrw-sp7:#2f2438;
}
.theme-cyber .library-room{
  --lrw-wood:#07130e; --lrw-wood-hi:#0f9d63; --lrw-wood-lo:#030a07;
  --lrw-panel:#04100b; --lrw-panel-hi:#0d5f42;
  --lrw-metal:#34f5a0; --lrw-metal-hi:#b3ffe0; --lrw-metal-lo:#0f9d63;
  --lrw-glass:#041712; --lrw-glass-hi:#67f5c1; --lrw-moon:#ccffee;
  --lrw-star:#8dffd8; --lrw-candle:#0f9d63; --lrw-flame:#67f5c1;
  --lrw-flame-hi:#eafff6; --lrw-curtain:#052a1e; --lrw-curtain-lo:#02120c;
  --lrw-rug:#05231a; --lr-handle:#34f5a0;
  --lrw-sp0:#34f5a0; --lrw-sp1:#0affc0; --lrw-sp2:#118a5f;
  --lrw-sp3:#66fff0; --lrw-sp4:#0d5f66; --lrw-sp5:#1fe0a0;
  --lrw-sp6:#0f9d63; --lrw-sp7:#0a3b2b;
}
.theme-corporate .library-room{
  --lrw-wood:#1b2940; --lrw-wood-hi:#2e4a6e; --lrw-wood-lo:#0e1726;
  --lrw-panel:#cfd9e6; --lrw-panel-hi:#eef3fa;
  --lrw-metal:#3d7bd9; --lrw-metal-hi:#9cc1f0; --lrw-metal-lo:#24344f;
  --lrw-glass:#16233a; --lrw-glass-hi:#dfe9f5; --lrw-moon:#eef3fa;
  --lrw-star:#cfe0f5; --lrw-candle:#9cc1f0; --lrw-flame:#9cc1f0;
  --lrw-flame-hi:#eaf2fc; --lrw-curtain:#22344f; --lrw-curtain-lo:#131f33;
  --lrw-rug:#1d2f47; --lr-handle:#3d7bd9;
  --lrw-sp0:#2e4a6e; --lrw-sp1:#3d5f8c; --lrw-sp2:#24344f;
  --lrw-sp3:#41649a; --lrw-sp4:#1b2940; --lrw-sp5:#33507a;
  --lrw-sp6:#2a3f5e; --lrw-sp7:#182338;
}
.library-room svg{ width:100%; height:100%; display:block; }
.library-room .wood{fill:var(--lrw-wood)} .library-room .wood-hi{fill:var(--lrw-wood-hi)}
.library-room .wood-lo{fill:var(--lrw-wood-lo)}
.library-room .panel{fill:var(--lrw-panel)} .library-room .panel-hi{fill:var(--lrw-panel-hi)}
.library-room .metal{fill:var(--lrw-metal)} .library-room .metal-hi{fill:var(--lrw-metal-hi)}
.library-room .metal-lo{fill:var(--lrw-metal-lo)}
.library-room .glass{fill:var(--lrw-glass)} .library-room .glass-hi{fill:var(--lrw-glass-hi)}
.library-room .moon{fill:var(--lrw-moon)} .library-room .star{fill:var(--lrw-star)}
.library-room .candle{fill:var(--lrw-candle)}
.library-room .flame{fill:var(--lrw-flame)} .library-room .flame-hi{fill:var(--lrw-flame-hi)}
.library-room .curtain{fill:var(--lrw-curtain)}
.library-room .curtain-lo{stroke:var(--lrw-curtain-lo);stroke-width:3;fill:none}
.library-room .rug{fill:var(--lrw-rug)} .library-room .rug-fr{fill:var(--lrw-metal-lo)}
.library-room .shade{fill:#000;opacity:.32}
.library-room .chain{stroke:var(--lrw-metal-lo);stroke-width:2.5;fill:none}
.library-room .arm{stroke:var(--lrw-metal);stroke-width:5;fill:none;stroke-linecap:round}
.library-room .mull{stroke:var(--lrw-wood-lo);stroke-width:3}
.library-room .mull-r{fill:var(--lrw-wood-lo)}
.library-room .arch-fr{stroke:var(--lrw-metal-lo);stroke-width:4;fill:none}
.library-room .stroke-lo{stroke:var(--lrw-wood-lo);stroke-width:1.5}
.library-room .stroke-metal{stroke:var(--lrw-metal-lo);stroke-width:3}
.library-room .stroke-panel{stroke:var(--lrw-panel-hi);stroke-width:2}
.library-room .stop-moon{stop-color:var(--lrw-moon)}
.library-room .stop-flame{stop-color:var(--lrw-flame)}
.library-room .sp0{fill:var(--lrw-sp0)} .library-room .sp1{fill:var(--lrw-sp1)}
.library-room .sp2{fill:var(--lrw-sp2)} .library-room .sp3{fill:var(--lrw-sp3)}
.library-room .sp4{fill:var(--lrw-sp4)} .library-room .sp5{fill:var(--lrw-sp5)}
.library-room .sp6{fill:var(--lrw-sp6)} .library-room .sp7{fill:var(--lrw-sp7)}

/* corner resize handles -- brackets you grab */
.lr-rz{position:absolute;width:18px;height:18px;z-index:8}
.lr-rz.tl{top:3px;left:3px;border-top:2px solid var(--lr-handle);
  border-left:2px solid var(--lr-handle);cursor:nwse-resize}
.lr-rz.tr{top:3px;right:3px;border-top:2px solid var(--lr-handle);
  border-right:2px solid var(--lr-handle);cursor:nesw-resize}
.lr-rz.bl{bottom:3px;left:3px;border-bottom:2px solid var(--lr-handle);
  border-left:2px solid var(--lr-handle);cursor:nesw-resize}
.lr-rz.br{bottom:3px;right:3px;border-bottom:2px solid var(--lr-handle);
  border-right:2px solid var(--lr-handle);cursor:nwse-resize}
.lr-rz:hover{filter:brightness(1.4)}
.library-room.expanded .lr-rz{display:none}

/* seats and shadows for the drawn layers */
.lr-wall-left{ border:0; box-shadow:10px 0 26px rgba(0,0,0,.45); }
.lr-ceiling{ border-bottom:3px solid var(--lrw-metal-lo);
  box-shadow:inset 0 -26px 44px rgba(0,0,0,.35); }
.lr-backwall{ box-shadow:0 6px 22px rgba(0,0,0,.35); }
.lr-post-right{ width:7%; }
.lr-chandelier{ width:210px; height:230px; margin-left:-105px; }
.theme-nautical .lr-glow{
  background:
    linear-gradient(115deg, transparent 30%, rgba(191,231,238,.06) 40%,
      transparent 52%),
    linear-gradient(65deg, transparent 52%, rgba(191,231,238,.05) 62%,
      transparent 72%),
    radial-gradient(60% 46% at 50% 20%, rgba(255,207,110,.12),
      transparent 70%),
    radial-gradient(130% 90% at 50% 118%, transparent 58%,
      rgba(2,6,10,.5) 100%);
}
.theme-cyber .lr-glow{
  background:radial-gradient(60% 46% at 50% 20%, rgba(103,245,193,.1),
    transparent 70%),
  radial-gradient(130% 90% at 50% 118%, transparent 58%,
    rgba(1,3,4,.55) 100%);
}
.theme-corporate .lr-glow{
  background:radial-gradient(70% 45% at 50% 4%, rgba(238,243,250,.12),
    transparent 65%),
  radial-gradient(130% 80% at 50% 118%, transparent 60%,
    rgba(5,9,15,.5) 100%);
}
.theme-nautical .lr-viewport{
  background:linear-gradient(180deg, rgba(9,22,34,.94), rgba(6,15,24,.96));
  border:1px solid var(--lrw-metal-lo);
  box-shadow:inset 0 0 0 1px rgba(244,213,138,.1),
    0 14px 40px rgba(0,0,0,.55);
}

/* 1:1 drag: no easing while a corner is held */
.lr-viewport.lr-resizing{ transition:none !important; }