/* QUICK ACCESS (W29, 4 Oct 2026): pinned rooms under the five doors, drawn by site/quick.js. Icon-only like the doors
   (sky.css, Victor's latest rule): quiet ink at rest, the room's door colour and glow only on hover, focus and while open.
   Loaded after doors.css and sky.css. */

/* the separator: the same gold hairline as the one under Home (sky.css, RAIL, CLEAN), with a small diamond at its middle */
.side li.qa-li{cursor:default;padding:0}
.qa-sep{position:relative;height:9px;margin:8px 18px 10px}
.qa-sep::before{content:"";position:absolute;left:0;right:0;top:4px;height:1px;background:rgba(227,200,120,.18)}
.qa-sep i{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-3px 0 0 -3px;transform:rotate(45deg);background:#0b0c2e;box-shadow:0 0 0 1px rgba(227,200,120,.38)}
/* the slots: the same 42px chip as the doors' icons */
.qa-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:4px}
.qa-slot{position:relative}
.side .qa-slot{width:100%;display:flex;justify-content:center;cursor:default}
.qs{position:relative;display:grid;place-items:center;width:42px;height:42px;margin:0 auto;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;
  color:rgba(236,232,222,.72);transition:color .25s,background .25s,box-shadow .25s}
.qs > svg{width:22px;height:22px}
/* RAIL, CLEAN: no box, no glow; hover a soft round tint, the open room the same with a 1px ring */
.qs:hover,.qs:focus-visible{color:rgb(var(--dc));background:rgba(var(--dc),.10)}
.qa-slot.on .qs{color:rgb(var(--dc));background:rgba(var(--dc),.16);box-shadow:0 0 0 1px rgba(var(--dc),.35)}
.qs:focus-visible{outline:2px solid rgb(var(--dc));outline-offset:1px}
.qa-slot.shut .qs{opacity:.5}
.qa-slot.dragging{opacity:.4}
@media (min-width:960px){.side .qa-slot[data-room]{cursor:grab}}
/* the empty slot: a faint dashed square with a small + */
.qs-empty{--dc:236,232,222}
.qs-c{display:grid;place-items:center;width:34px;height:34px;box-sizing:border-box;border-radius:10px;border:1px dashed rgba(236,232,222,.3);transition:border-color .25s}
.qs-c svg{width:15px;height:15px}
.qs-empty{color:rgba(236,232,222,.45)}
.qs-empty:hover,.qs-empty:focus-visible{background:transparent;box-shadow:none;color:rgba(236,232,222,.95)}
.qs-empty:hover .qs-c,.qs-empty:focus-visible .qs-c{border-color:rgba(236,232,222,.6)}
.qs-l{display:none}
/* unpin: a small x on the slot's shoulder, on hover or focus */
.qs-x{position:absolute;top:-3px;right:calc(50% - 25px);width:17px;height:17px;padding:0;display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;
  color:rgba(236,232,222,.85);background:rgba(16,18,46,.96);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);opacity:0;transition:opacity .15s,color .15s}
.qs-x svg{width:10px;height:10px}
.qa-slot:hover .qs-x,.qa-slot:focus-within .qs-x{opacity:1}
.qs-x:hover{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
/* add a slot: fainter still */
.qa-add{position:relative;display:grid;place-items:center;width:30px;height:24px;margin:4px auto 0;padding:0;border:0;border-radius:8px;cursor:pointer;
  background:transparent;color:rgba(236,232,222,.24);transition:color .2s,background .2s}
.qa-add svg{width:14px;height:14px}
.qa-add:hover,.qa-add:focus-visible{color:rgba(236,232,222,.85);background:rgba(255,255,255,.05)}
.qa-more{margin:8px 0 0;font:500 9.5px/1.35 var(--jost);letter-spacing:.01em;color:rgba(236,232,222,.42);text-align:center}
/* tooltips: only the slot under the pointer speaks (the rail's own rule would light every tip in this block) */
.side li.qa-li:hover .tip{opacity:0}
.side li.qa-li .qa-slot:hover > .tip,.side li.qa-li .qa-add:hover > .tip,.side li.qa-li .qs:focus-visible ~ .tip,.side li.qa-li .qa-add:focus-visible > .tip{opacity:1;transform:translate(0,-50%)}
.side .qa-add .tip{left:calc(var(--rail) - 4px - (var(--rail) - 30px) / 2)}
/* a slot just filled: one soft pulse in its colour */
.qa-new .qs{animation:qa-in 1.2s var(--ease)}
@keyframes qa-in{0%{transform:scale(.7)}40%{transform:scale(1.06);color:rgb(var(--dc));background:rgba(var(--dc),.16)}100%{transform:none}}

/* the picker: anchored to the slot, search first */
.qp{position:fixed;z-index:60;width:312px;max-height:min(470px,calc(100vh - 100px));display:flex;flex-direction:column;border-radius:16px;font-family:var(--sans);
  background:linear-gradient(180deg,rgba(18,20,54,.97),rgba(9,10,36,.97));box-shadow:0 24px 60px -12px rgba(0,0,0,.65),inset 0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);animation:qp-in .22s var(--ease)}
.qp[hidden]{display:none}
.qp::before{content:"";position:absolute;left:-6px;top:var(--ny,30px);width:11px;height:11px;margin-top:-6px;transform:rotate(45deg);
  background:rgb(17,19,52);box-shadow:-1px 1px 0 rgba(255,255,255,.1)}
@keyframes qp-in{from{opacity:0;transform:translateX(-6px)}}
.qp-top{display:flex;justify-content:space-between;align-items:baseline;padding:14px 16px 8px}
.qp-k{font:600 11px/1 var(--jost);letter-spacing:.16em;text-transform:uppercase;color:#eef1f7}
.qp-n{font:500 11px/1 var(--jost);color:var(--dim)}
.qp-s{display:flex;align-items:center;gap:8px;margin:0 12px 6px;padding:0 12px;height:40px;border-radius:10px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);color:var(--dim)}
.qp-s:focus-within{box-shadow:inset 0 0 0 1px rgba(236,232,222,.5);color:var(--ink)}
.qp-s svg{width:16px;height:16px;flex:none}
.qp-s input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:var(--ink);font:500 14.5px var(--sans)}
.qp-s input::placeholder{color:rgba(201,211,226,.5)}
.qp-l{flex:1;overflow-y:auto;padding:4px 6px 6px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.qp-g + .qp-g{margin-top:4px}
.qp-d{display:flex;align-items:center;gap:8px;margin:0;padding:8px 10px 4px;font:600 10.5px/1 var(--jost);letter-spacing:.14em;text-transform:uppercase;color:rgba(236,232,222,.6)}
.qp-d i{width:7px;height:7px;border-radius:50%;background:rgb(var(--dc));box-shadow:0 0 8px rgba(var(--dc),.6)}
.qp-o{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:9px;cursor:pointer;color:rgba(236,232,222,.86)}
.qp-i{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:9px;color:rgba(236,232,222,.72);transition:color .15s,background .15s,box-shadow .15s}
.qp-i svg{width:18px;height:18px}
.qp-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.qp-t b{font:500 14px/1.25 var(--sans);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qp-t small{font:12px/1.3 var(--sans);color:var(--dim)}
.qp-o em{flex:none;font:500 10.5px/1 var(--jost);font-style:normal;letter-spacing:.04em;color:rgba(236,232,222,.45)}
.qp-o em.qp-door{color:rgba(var(--dc),.85)}
.qp-o.act{background:rgba(var(--dc),.12);color:#fff}
.qp-o.act .qp-i{color:rgb(var(--dc));background:rgba(var(--dc),.16);box-shadow:inset 0 0 0 1px rgba(var(--dc),.45),0 0 16px -4px rgba(var(--dc),.6)}
.qp-o.off{cursor:default;color:rgba(236,232,222,.5)}
.qp-o.off .qp-i{color:rgba(236,232,222,.4)}
.qp-o.off .qp-i svg{width:15px;height:15px}
.qp-none{margin:0;padding:18px 12px;font:13.5px/1.5 var(--sans);color:var(--dim)}
.qp-f{margin:0;padding:9px 14px 11px;border-top:1px solid rgba(255,255,255,.07);font:11.5px/1 var(--sans);color:rgba(201,211,226,.55);display:flex;align-items:center;gap:5px}
.qp-f kbd{font:600 10px/1 var(--sans);padding:3px 5px;border-radius:5px;color:rgba(236,232,222,.8);background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.qp-f kbd + kbd{margin-left:-2px}
.qp-f kbd:not(:first-child){margin-left:6px}.qp-f kbd:nth-child(2){margin-left:2px}

/* the small menu (right-click, or the menu key) */
.qa-menu{position:fixed;z-index:61;min-width:160px;padding:5px;border-radius:12px;background:rgba(14,16,48,.98);box-shadow:0 18px 40px -10px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.1)}
.qa-menu[hidden]{display:none}
.qa-menu button{display:block;width:100%;padding:8px 12px;border:0;border-radius:8px;text-align:left;cursor:pointer;background:transparent;color:rgba(236,232,222,.9);font:500 13.5px var(--sans)}
.qa-menu button:hover,.qa-menu button:focus-visible{background:rgba(255,255,255,.08);outline:0;color:#fff}
.qa-menu button[data-k="unpin"]{color:rgba(255,170,150,.9)}

/* phone: the bottom bar keeps the doors; one quiet Pinned button at its end opens a sheet with the same slots */
.qa-sheet{display:none}
@media (min-width:960px){.side li.qa-pbtn{display:none!important}}
@media (max-width:959px){
  .side li.qa-li{display:none!important}
  .side li.qa-pbtn{position:relative}
  .side li.qa-pbtn::before{content:"";position:absolute;left:-2px;top:12px;bottom:12px;width:1px;background:rgba(236,232,222,.16)}
  .side li.qa-pbtn .tile > svg{width:20px!important;height:20px!important}
  .qa-sheet{position:fixed;z-index:55;left:10px;right:10px;bottom:calc(72px + env(safe-area-inset-bottom,0px));display:block;padding:14px 14px 16px;border-radius:18px;
    background:linear-gradient(180deg,rgba(18,20,54,.97),rgba(9,10,36,.97));box-shadow:0 -10px 50px -10px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.1);
    -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);animation:qa-up .25s var(--ease)}
  .qa-sheet[hidden]{display:none}
  @keyframes qa-up{from{opacity:0;transform:translateY(10px)}}
  .qa-sh-h{display:flex;align-items:baseline;gap:10px;margin-bottom:12px}
  .qa-sh-h b{font:600 11px/1 var(--jost);letter-spacing:.16em;text-transform:uppercase;color:#eef1f7}
  .qa-sh-h span{flex:1;font:12px/1 var(--sans);color:var(--dim)}
  .qa-sh-x{width:30px;height:30px;margin:-8px -6px 0 0;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--dim)}
  .qa-sh-x svg{width:16px;height:16px}
  .qa-row{flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:6px}
  .qa-row .qa-slot{width:auto;flex:0 0 calc((100% - 24px) / 5)}
  .qa-row .qs{width:100%;height:64px;border-radius:14px;display:flex;flex-direction:column;justify-content:center;gap:6px}
  .qa-row .qs-l{display:block;max-width:100%;padding:0 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 10.5px/1 var(--jost);color:rgba(236,232,222,.7)}
  .qa-row .qs-x{opacity:.85;top:-4px;right:-2px;width:20px;height:20px}
  .qa-row .tip{display:none}
  .qa-row .qa-addli{flex:0 0 calc((100% - 24px) / 5);display:flex;align-items:center;justify-content:center;height:64px}
  .qa-row .qa-add{margin:0;width:42px;height:42px;color:rgba(236,232,222,.35)}
  .qa-row .qa-more{margin:0;font-size:10px}
  .qa-row .qa-addli:has(.qa-more){flex:1 0 100%;height:auto;padding-top:6px}
  .qp.qp-phone{left:10px!important;right:10px;top:auto!important;bottom:calc(72px + env(safe-area-inset-bottom,0px));width:auto;max-height:68vh;animation:qa-up .22s var(--ease)}
  .qp.qp-phone::before{display:none}
  .qp-s input{font-size:16px}
  .qp-f{display:none}
}
@media (prefers-reduced-motion:reduce){.qs,.qa-new .qs,.qp,.qa-sheet{animation:none!important;transition:none!important}}
.qp-top,.qp-s,.qp-f,.qp-d,.qp-o{flex-shrink:0}