/* ===== Vicin website layout =====
   Only on a computer/tablet browser that is wide enough (1024px+), and NOT when Vicin is installed as an app.
   Phones (any browser) and the installed app keep the normal app look. */
@media (display-mode: browser) and (min-width:1024px){
 :root{--side:232px;--aw:calc(100vw - var(--side))}
 body{background:var(--bg)!important}
 #app{max-width:none!important;width:calc(100% - var(--side));margin:0 0 0 var(--side)!important;box-shadow:none!important}

 /* bottom bar becomes a menu down the left side */
 :root body nav{left:0!important;top:0!important;bottom:0!important;transform:none!important;width:var(--side)!important;max-width:none!important;
  flex-direction:column!important;justify-content:flex-start!important;align-items:stretch!important;gap:4px!important;
  padding:86px 14px 20px!important;border-radius:0!important;border:0!important;border-right:1px solid var(--line)!important;
  background:var(--card)!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
 :root body nav::before{content:"Vicin";position:absolute;top:24px;left:22px;height:36px;padding-left:46px;display:flex;align-items:center;
  background:url(../icons/icon-192.png) left center/36px 36px no-repeat;font:800 22px/1 "Fraunces",Georgia,serif;color:var(--ink)}
 :root body nav button{flex:none!important;width:100%!important;flex-direction:row!important;justify-content:flex-start!important;gap:14px!important;
  padding:11px 14px!important;font-size:15px!important;border-radius:12px!important;color:var(--ink)!important;position:relative}
 :root body nav button span svg{width:22px!important;height:22px!important}
 :root body nav button.on{background:rgba(43,106,140,.10)!important;color:var(--g)!important}
 :root body nav button:hover{background:rgba(0,0,0,.04)}
 :root body nav button .xnb{top:6px!important;left:30px!important}
 :root body.phn nav{background:#1c1838!important;border-right-color:rgba(255,255,255,.12)!important;-webkit-backdrop-filter:blur(18px)!important;backdrop-filter:blur(18px)!important}
 :root body.phn nav::before{color:#fff}
 :root body.phn nav button{color:#fff!important}body.phn nav button.on{background:rgba(255,255,255,.14)!important;color:#ffd36b!important}
 :root body.phn nav button:hover{background:rgba(255,255,255,.08)}

 /* things pinned to the bottom of the screen stay inside the main area */
 .rdgo{left:var(--side)!important;transform:none!important;width:calc(100% - var(--side))!important;max-width:none!important;bottom:0!important}
 .cfab{left:calc(var(--side) + 18px)!important;bottom:24px!important}

 /* pop-up sheets show as a centred window instead of sliding up from the bottom */
 .sheet{align-items:center!important;justify-content:center!important;padding-left:var(--side)}
 .sheet>div{max-width:560px!important;border-radius:20px!important;max-height:88vh;overflow:auto}
 .cmo{padding-left:var(--side)}

 /* home: both icon pages side by side, so everything shows on one screen */
 .pgv{display:grid!important;grid-template-columns:1fr 1fr;gap:10px;overflow:hidden!important;padding:0 18px}
 .pgp{width:auto!important;height:100%!important}
 .pgdt{display:none!important}
 .pgx{--ic:clamp(48px,7vh,64px)}
 /* other pages: keep the content a comfortable reading width in the middle */
 body:not(.phn) #app>main{width:100%;max-width:1040px;margin:0 auto;box-sizing:border-box}
 /* lists of shops, places and people show in 2 columns */
 main div:has(> .card.pc + .card.pc){display:grid!important;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
 main div:has(> .card.pc + .card.pc)>.card.pc{margin:0!important}
 /* the map fits on one screen */
 .gmap svg{display:block;max-height:calc(100vh - 230px);width:auto;max-width:100%;margin:0 auto}
 /* sign-in and other pop-ups: a centred window */
 .voov{align-items:center!important;padding-left:var(--side)}
 .voov>div{max-width:520px!important;border-radius:20px!important;max-height:88vh}
 /* message typing bar stays in the main area */
 .xcomp{left:var(--side)!important;transform:none!important;width:calc(100% - var(--side))!important;max-width:none!important;bottom:0!important}
 /* full-screen community and the Ghana Card demo open in the main area, next to the menu */
 body.cmfull .tdc,body.cmfull .cmx:not(.tdc .cmx){left:var(--side)!important;max-width:none!important;margin:0!important}
 .vidd{left:var(--side)!important;max-width:none!important;margin:0!important}
 :root body.cmfull nav{visibility:visible!important}
 /* the Post / Whisper button: always visible on a computer, bottom-right of the community panel */
 :root body .cfab,:root body.cmhide .cfab{display:inline-flex!important;align-items:center;gap:6px;left:auto!important;top:auto!important;right:34px!important;bottom:26px!important;padding:10px 18px!important;font-size:15px!important;box-shadow:0 8px 24px rgba(0,0,0,.25)}
}