/* static/css/landing/rooms.css — the public landing on a computer: "Rooms" (templates/landing/desk/*).
   The landing is the desktop app's own frame for a signed-out visitor: paper.css supplies the tokens, the top line
   (.dk-nav .dk-word .dk-links), the Messenger pane frame (.dk-msg .dk-mh .dk-tabs), labels (.dk-lab) and buttons
   (.dk-btn). This file adds what a signed-out room needs on top: the intro column, the stage of panels, the ticker
   and the scripted loop. One screen, never a scrolling page. Component looks live in desk_kit.css. */

html.dk.ld-html{background:var(--dk-paper)}
body.dk.ld{grid-template-rows:var(--dk-nav-h) minmax(0,1fr) 36px;grid-template-columns:330px minmax(0,1fr) var(--dk-msg-w);font-size:14px}

/* top line: the app's, with the rooms as its links and Play Now where the status sits */
.ld .dk-nav{padding:0 20px 0 24px}
.ld .dk-word{margin:0 30px 0 0}
.ld .dk-links{gap:24px;min-width:0}
/* the quiet ink mark on a room that is new (services/landing_demo.ROOMS "new") */
.ld-new{display:inline-block;margin-left:6px;padding:2px 4px 1px;border:1px solid var(--dk-red);border-radius:3px;font:600 8.5px/1 var(--dk-label);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--dk-red);rotate:-4deg;vertical-align:2px}
.ld-right{margin-left:auto;display:flex;align-items:center;gap:18px;white-space:nowrap}
.ld-right .in{font:500 13px/1 var(--dk-body);color:var(--dk-ink2)}
.ld-right .in:hover{color:var(--dk-ink)}
.dk-btn.ld-gold{background:var(--dk-gold);color:var(--dk-ink)}
.dk-btn.ld-big{height:56px;padding:0 30px;font-size:17px!important;letter-spacing:.1em;align-self:flex-start}

/* intro column */
.ld-intro{grid-column:1;grid-row:2;padding:27px 28px 20px;display:flex;flex-direction:column;gap:16px;border-right:1px solid var(--dk-rule);min-height:0;overflow:hidden}
.ld-intro>*{flex:none}
.ld-no{font:600 90px/.82 var(--dk-display);color:rgba(28,26,20,.16);letter-spacing:.02em}
.ld-pen{align-self:flex-start;background:var(--dk-paper2);border-left:5px solid var(--dk-acc,#5D3F8E);padding:7px 24px 7px 11px;font:600 13px/1 var(--dk-display);letter-spacing:.1em;text-transform:uppercase;clip-path:polygon(0 0,100% 0,calc(100% - 11px) 50%,100% 100%,0 100%)}
.ld-h1{margin:0;font:600 47px/.98 var(--dk-display);text-transform:uppercase;letter-spacing:.01em;text-wrap:balance}
.ld-h1 em{font-style:normal;color:var(--dk-acc,#5D3F8E)}
.ld-sub{margin:0;font-size:16px;line-height:1.45;color:var(--dk-ink2)}
.ld-door2{font:500 14px/1.3 var(--dk-body);color:var(--dk-ink);border-bottom:1px solid var(--dk-rule2);padding-bottom:2px;align-self:flex-start}
.ld-facts{margin-top:auto;border-top:1px solid var(--dk-rule2);font-size:13px;color:var(--dk-ink2)}
.ld-facts div{display:flex;gap:10px;padding:7px 0;border-bottom:var(--dk-dot)}
.ld-facts b{flex:none;width:74px;font:500 10px/1.9 var(--dk-label);letter-spacing:.12em;text-transform:uppercase;color:var(--dk-muted)}

/* the stage: panels on the darker paper, each one a small sheet */
.ld-stage{grid-column:2;grid-row:2;display:grid;gap:16px;padding:18px;min-height:0;min-width:0;background:var(--dk-paper2)}
.ld-card{background:var(--dk-card);border:1px solid var(--dk-rule);border-radius:6px;box-shadow:0 1px 0 rgba(28,26,20,.06),0 10px 28px rgba(28,26,20,.10);display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden;position:relative}
a.ld-card:hover{border-color:var(--dk-acc,#5D3F8E)}
.ld-ch{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--dk-rule);flex:none;white-space:nowrap}
.ld-cb{padding:14px 16px;display:flex;flex-direction:column;gap:10px;min-height:0;flex:1}
.ld-h2{margin:0;font:600 24px/1.02 var(--dk-display);text-transform:uppercase}
.ld-p{margin:0;font-size:13.5px;line-height:1.45;color:var(--dk-ink2)}
.ld-more{font:500 10px/1.3 var(--dk-label);letter-spacing:.12em;text-transform:uppercase;color:var(--dk-ink)}
.ld-ph{flex:1;min-height:60px;border:1px dashed rgba(28,26,20,.5);border-radius:6px;background:repeating-linear-gradient(135deg,var(--dk-paper) 0 10px,var(--dk-paper2) 10px 20px);display:flex;align-items:center;justify-content:center;padding:12px}
.ld-ph span{background:var(--dk-card);border:1px solid var(--dk-rule2);border-radius:4px;padding:6px 10px;font:500 11px/1.4 var(--dk-label);color:var(--dk-ink2);text-align:center}
.ld-stamp{position:absolute;border:3px solid var(--dk-red);border-radius:4px;padding:5px 10px;font:700 18px/1 var(--dk-display);letter-spacing:.08em;color:var(--dk-red);background:rgba(248,242,225,.9);rotate:-8deg;white-space:nowrap}
.ld-live{display:flex;align-items:center;gap:6px;font:600 10px/1 var(--dk-label);letter-spacing:.12em;color:var(--dk-red)}
.ld-live i{width:7px;height:7px;border-radius:50%;background:var(--dk-red);animation:ld-blink 1.6s ease-in-out infinite}

/* the side pane is the app's Messenger pane (.dk-msg); here it sits in the third column and its tabs are labels */
.ld .dk-msg{grid-column:3;grid-row:2}
.ld .dk-tabs>span{display:flex;align-items:center;gap:5px;font:500 10.5px/1 var(--dk-label);letter-spacing:.06em;text-transform:uppercase;color:var(--dk-muted);position:relative;white-space:nowrap}
.ld .dk-tabs>span.on{color:var(--dk-ink)}
.ld .dk-tabs>span.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--dk-acc,#5D3F8E)}
.ld-feed{flex:1;min-height:0;overflow:hidden;padding:14px 18px;display:flex;flex-direction:column;gap:10px}

/* the ticker: the invite sheet's ticker bar (join_laptop .jn-tick), running the width of the screen */
.ld-bot{grid-column:1/-1;grid-row:3;display:flex;align-items:center;min-width:0;background:var(--dk-ink);color:var(--dk-gold);font:600 11px/1 var(--dk-label);letter-spacing:.2em;text-transform:uppercase}
.ld-tick{flex:1;min-width:0;overflow:hidden;white-space:nowrap}
.ld-tick div{display:inline-flex;align-items:center;animation:ld-marq 70s linear infinite}
.ld-tick span{display:inline-flex;align-items:center;gap:10px;padding:0 20px}
.ld-tick span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--dk-gold);margin-left:30px}
.ld-tick b{font-weight:600;color:var(--dk-back)}
.ld-pager{flex:none;display:flex;align-items:center;height:100%;border-left:1px solid rgba(243,235,214,.25)}
.ld-pager a,.ld-pager span{display:flex;align-items:center;height:100%;padding:0 16px;white-space:nowrap;letter-spacing:.14em}
.ld-pager a{color:var(--dk-gold)}
.ld-pager a:hover{color:var(--dk-back)}
.ld-pager a+a,.ld-pager span+a,.ld-pager a+span{border-left:1px solid rgba(243,235,214,.25)}
.ld-pager span{color:rgba(243,235,214,.6)}

/* the scripted loop: one 20 s cycle. Steps 1 to 5 arrive in order, step 6 is a stamp landing, everything clears together. */
.ld-s1,.ld-s2,.ld-s3,.ld-s4,.ld-s5,.ld-s6{animation-duration:20s;animation-iteration-count:infinite;animation-timing-function:ease-out;animation-fill-mode:both}
.ld-s1{animation-name:ld-s1}.ld-s2{animation-name:ld-s2}.ld-s3{animation-name:ld-s3}.ld-s4{animation-name:ld-s4}.ld-s5{animation-name:ld-s5}.ld-s6{animation-name:ld-s6}
@keyframes ld-s1{0%,2%{opacity:0;transform:translateY(8px)}5%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes ld-s2{0%,9%{opacity:0;transform:translateY(8px)}12%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes ld-s3{0%,16%{opacity:0;transform:translateY(8px)}19%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes ld-s4{0%,23%{opacity:0;transform:translateY(8px)}26%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes ld-s5{0%,30%{opacity:0;transform:translateY(8px)}33%,96%{opacity:1;transform:none}100%{opacity:0}}
@keyframes ld-s6{0%,37%{opacity:0;scale:1.7}39.5%{opacity:1;scale:.94}41%,96%{opacity:1;scale:1}100%{opacity:0}}
@keyframes ld-blink{50%{opacity:.25}}
@keyframes ld-marq{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ld-s1,.ld-s2,.ld-s3,.ld-s4,.ld-s5,.ld-s6,.ld-tick div,.ld-live i{animation:none}}

/* A room is drawn for 1440x900 and scales as a whole to fill the window, like a game canvas: --ldz is set from the
   window size by the small script in landing/desk/base.html (min of width/1440 and height/900). Extra width on a wide
   window goes to the stage; past about 2:1 the room stops widening and sits centred. */
body.dk.ld{zoom:var(--ldz,1);width:calc(100vw / var(--ldz,1));height:calc(100vh / var(--ldz,1));max-width:1800px;margin:0 auto}