/* ================= THE FIVE DOORS (W24, 4 Oct 2026) =================
   Victor: "there oughta be something like just 5 options in the sidebar ever!!!! just five big options". The sidebar holds
   five doors: an icon chip in the door's Five Innovators colour over a plain Jost label, a small count of open rooms, a
   gold dot when a room behind it is new. The open door lifts its chip and gets a coloured edge. The bar under the navbar
   (INT5's secondary bar) takes the open door's colour; gold stays for what is new. Phone: the bottom tab bar is the same
   five doors, spread evenly. Loaded after site/sky/sky.css, so these rules win over site.css. */
:root{--rail:92px}

/* the rail */
@media (min-width:960px){
  .side{width:var(--rail);padding:18px 8px}
  .side ol{gap:8px}
  main,.foot{padding-left:var(--rail)}
  .frame-view{left:var(--rail)}
  .viewas{left:var(--rail)}
  .subbar{left:var(--rail)}
  .bar-in{padding-left:33px}   /* the 26px mark centred over the 92px rail */
  .lock-note{left:calc(var(--rail) + 12px)}
  .side .tip{left:calc(var(--rail) - 4px)}
}
.side li.door5 .tile{width:76px;height:68px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  border-radius:14px;background:transparent;color:rgba(214,221,234,.74)}
.side li.door5 .tile > svg{width:19px;height:19px;padding:8px;box-sizing:content-box;border-radius:11px;color:rgb(var(--dc));
  background:rgba(var(--dc),.11);box-shadow:inset 0 0 0 1px rgba(var(--dc),.22);transition:background .25s,box-shadow .25s,transform .3s var(--ease)}
.side li.door5 .dl{font:600 10.5px/1.05 var(--jost);letter-spacing:.015em;white-space:nowrap}
.side li.door5 .tile:hover{background:rgba(255,255,255,.045);color:var(--ink)}
.side li.door5 .tile:hover > svg{transform:translateY(-1px);background:rgba(var(--dc),.2);box-shadow:inset 0 0 0 1px rgba(var(--dc),.45),0 0 18px -4px rgba(var(--dc),.6)}
.side li.door5 .tile.on{color:#fff;background:radial-gradient(90% 80% at 0% 50%,rgba(var(--dc),.2),transparent 75%);box-shadow:inset 3px 0 0 rgb(var(--dc))}
.side li.door5 .tile.on::after{border-radius:14px;box-shadow:0 0 22px -6px rgba(var(--dc),.55)}
.side li.door5 .tile.on > svg{background:rgba(var(--dc),.3);box-shadow:inset 0 0 0 1px rgba(var(--dc),.7),0 0 20px -2px rgba(var(--dc),.6)}
.side li.door5 .tile:focus-visible{outline:2px solid rgb(var(--dc));outline-offset:1px}
/* the count of open rooms: a quiet number on the chip's shoulder */
.side li.door5 .dn{position:absolute;top:5px;left:calc(50% + 10px);min-width:16px;height:16px;padding:0 4px;box-sizing:border-box;border-radius:999px;
  display:grid;place-items:center;font:600 9.5px/1 var(--jost);color:rgba(236,240,248,.9);background:rgba(16,18,46,.95);box-shadow:inset 0 0 0 1px rgba(var(--dc),.45)}
.side li.door5 .dn:empty{display:none}
/* a room new behind this door: a gold dot (the one place gold marks a door) */
.side li.door5.has-new .tile::before{top:4px;right:auto;left:calc(50% - 22px);width:7px;height:7px}
.side li.door5.shimmer .tile > svg{animation:door-in 1.3s ease 2}
@keyframes door-in{50%{box-shadow:inset 0 0 0 2px rgb(var(--dc)),0 0 26px rgba(var(--dc),.7)}}
.side .tip i{display:block;margin-top:2px;font:500 11px var(--jost);font-style:normal;color:var(--dim)}
@media (min-width:960px){.side li.door5{cursor:grab}}

/* phone: the bottom tab bar is the same five doors */
@media (max-width:959px){
  .side{padding:5px 6px env(safe-area-inset-bottom,0px)}
  .side ol{display:flex;gap:2px;overflow:visible}
  .side li.door5{flex:1 1 0;min-width:0}
  .side li.door5 .tile{width:100%;height:52px;gap:4px;border-radius:12px}
  .side li.door5 .tile > svg{width:18px;height:18px;padding:5px;border-radius:9px}
  .side li.door5 .dl{font-size:10.5px;letter-spacing:.01em}
  .side li.door5 .tile.on{background:radial-gradient(70% 90% at 50% 0%,rgba(var(--dc),.2),transparent 75%);box-shadow:none}
  .side li.door5 .tile.on::after{inset:-5px 28% auto;height:2px;border-radius:0 0 3px 3px;background:rgb(var(--dc));box-shadow:0 0 12px rgba(var(--dc),.8)}
  .side li.door5 .dn{top:2px;left:calc(50% + 8px);min-width:15px;height:15px;font-size:9px}
  .side li.door5.has-new .tile::before{top:3px;left:calc(50% - 19px)}
}

/* the bar under the navbar wears the open door's colour */
.subbar{--dc:227,200,120;background:radial-gradient(90% 160% at 0% 0%,rgba(var(--dc),.12),transparent 42%),linear-gradient(180deg,rgba(10,11,42,.94),rgba(5,6,31,.88));
  border-bottom-color:rgba(var(--dc),.2)}
.subbar::before{background:linear-gradient(90deg,rgba(var(--dc),.55),rgba(var(--dc),.08) 55%,transparent)}
.sb-k{color:#eef1f7}
.sb-name{font:600 12px/1 var(--jost);letter-spacing:.14em}
.sb-mark{background:rgba(var(--dc),.16)!important;box-shadow:inset 0 0 0 1px rgba(var(--dc),.5),0 0 20px -4px rgba(var(--dc),.55)!important}
.sb-mark svg{color:rgb(var(--dc))}
.sb-k:hover .sb-mark{box-shadow:inset 0 0 0 1px rgb(var(--dc)),0 0 26px rgba(var(--dc),.45)!important}
.subbar .tile::after{background:rgb(var(--dc))}
.subbar .tile.on{color:#fff;background:radial-gradient(70% 110% at 50% 100%,rgba(var(--dc),.16),transparent 72%)}
.subbar .tile.on::after{box-shadow:0 0 14px rgba(var(--dc),.7)}
.subbar .tile.on > svg:first-child{color:rgb(var(--dc));background:linear-gradient(135deg,rgba(var(--dc),.3),rgba(var(--dc),.08));box-shadow:inset 0 0 0 1px rgba(var(--dc),.55),0 0 16px rgba(var(--dc),.28)}
.subbar .tile:focus-visible{outline-color:rgb(var(--dc))}
.subbar li.teaser .tile > svg:first-child{outline-color:rgba(var(--dc),.55)}
/* the room on screen keeps its tab, even one a link opened before its stage */
.subbar li.here[hidden]{display:flex!important}
.sb-list li:nth-child(7){animation-delay:.24s}.sb-list li:nth-child(8){animation-delay:.28s}.sb-list li:nth-child(9){animation-delay:.32s}.sb-list li:nth-child(10){animation-delay:.36s}
/* tabs sit from the left at the width of their words (conventional tabs); Belong's ten fit at 1440, and the bar scrolls inside itself when they do not */
@media (min-width:960px){.sb-list{padding:0 10px}.sb-list li{flex:0 1 auto}.subbar .tile{padding:0 12px;gap:8px;font-size:14px}.subbar .tile::after,.subbar .tile.on::after{inset:auto 12px 0 12px}.subbar .tile > svg:first-child{padding:5px}.sb-k{padding:0 18px 0 16px}}

/* labels in Jost, never a bold serif (Victor's typography rule) */
.lock-note b{font:600 15px/1.25 var(--jost)}

/* card mode: the hero across the top, then the five doors as five big cards */
.cm-deck{grid-template-columns:repeat(5,minmax(0,1fr))}
.cm-deck .cm-hero{grid-column:1/-1;grid-row:auto;min-height:320px}
@media (max-width:1100px){.cm-deck{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:800px){.cm-deck{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.cm-deck{grid-template-columns:1fr}.cm-deck .cm-hero{min-height:280px}}
.cm-deck .cm-door{min-height:300px}
.cm-rooms{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.cm-rooms i{font:500 11.5px/1 var(--jost);font-style:normal;padding:5px 8px;border-radius:999px;color:#dcd8cf;background:rgba(var(--bc),.1);box-shadow:inset 0 0 0 1px rgba(var(--bc),.25)}
@media (prefers-reduced-motion:reduce){.side li.door5 .tile > svg{transition:none}.side li.door5.shimmer .tile > svg{animation:none}}

/* CLASSIC REST, COLOUR ON HOVER (4 Oct 2026, Victor: "restore the home above the five ... only show each SVG item's glow
   on hover, for a more elegant classic look"). At rest every door is quiet ink on the rail; its innovator colour and glow
   arrive on hover and stay only on the open door. */
.door5 .tile > svg{background:transparent!important;box-shadow:none!important;color:rgba(236,232,222,.78)}
.door5 .tile:hover > svg{background:rgba(var(--dc),.18)!important;box-shadow:inset 0 0 0 1px rgba(var(--dc),.45),0 0 18px -4px rgba(var(--dc),.6)!important;color:rgb(var(--dc))}
.door5 .tile.on > svg{background:rgba(var(--dc),.22)!important;box-shadow:inset 0 0 0 1px rgba(var(--dc),.6),0 0 16px -4px rgba(var(--dc),.5)!important;color:rgb(var(--dc))}
.door5 .dn{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)!important}
.home-door .tile{width:100%;height:52px;flex-direction:column;gap:4px;border-radius:12px;color:rgba(236,232,222,.78)}
.home-door .tile > svg{width:18px;height:18px;padding:5px;border-radius:9px;transition:background .25s,box-shadow .25s,color .25s}
.home-door .tile:hover > svg,.home-door .tile.on > svg{color:#e3c878;background:rgba(227,200,120,.14);box-shadow:inset 0 0 0 1px rgba(227,200,120,.45),0 0 18px -4px rgba(227,200,120,.55)}
.home-door .dl{font:600 10.5px/1.05 var(--jost);letter-spacing:.015em}
.home-sep{margin:6px 10px}
.home-door .tile > svg{width:28px!important;height:28px!important;padding:5px!important;box-sizing:border-box;flex:none}
.side li.door5 .tile > svg{color:rgba(236,232,222,.78)}
.side li.door5 .tile:hover > svg,.side li.door5 .tile.on > svg,.side li.door5 .tile:focus-visible > svg{color:rgb(var(--dc))}