/* Notes online (2.36): the site around the reader (mobile/www/app.css), in its colours. On a wide
   screen the library and the page keep a reading width; the site's header goes while a book is read. */
:root{--site-h:56px}
.site{position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:14px;height:var(--site-h);padding:0 max(16px,calc((100vw - 1080px) / 2));
  background:var(--chrome);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line);transition:transform .25s var(--ease)}
.site.away{transform:translateY(-110%);position:fixed;inset-inline:0}
.brand{display:flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;flex:none}
.brand b{font:700 18px/1 var(--rd-font)}
.brand small{color:var(--muted);font-size:12px;margin-top:3px}
.studios{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.studios::-webkit-scrollbar{display:none}
.studio-tab{display:flex;align-items:center;gap:5px;padding:8px 12px;border-radius:999px;color:var(--ink2);text-decoration:none;font-size:14px;white-space:nowrap}
.studio-tab:hover{background:var(--accent-soft);color:var(--ink)}
.studio-tab.on{background:var(--ink);color:var(--bg)}
.studio-tab.locked{color:var(--muted)}
.studio-tab.on.locked{color:var(--bg)}
.studio-tab .lock{font-size:10px;opacity:.7}
.get{flex:none;padding:8px 14px;border-radius:999px;background:var(--accent);color:var(--accent-ink);text-decoration:none;font-size:14px;font-weight:600;white-space:nowrap}
body.web #bar{top:var(--site-h)}
body.web.reading #bar{top:0}
body.web:not(.reading) #bar{max-width:880px;margin-inline:auto}
.studio-card a:not(.btn),.welcome-web a{color:var(--accent)}
body.in-studio #bar,body.in-studio #main{display:none}

/* a reading width on a wide screen */
body.web #main{max-width:880px;margin-inline:auto}
body.web.reading .read{max-width:760px;margin-inline:auto}
body.web .foot>*{max-width:760px;margin-inline:auto}
@media (min-width:700px){body.web .shelf{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}
@media (min-width:900px){
  body.web .sheet{align-items:center;justify-content:center}
  body.web .sheet-body{max-width:560px;border-radius:24px;max-height:86vh}
  body.web .toast{inset-inline:auto;left:50%;transform:translateX(-50%);max-width:520px}
}

/* a studio of Notes for Windows */
.studio{padding:48px 16px 80px}
.studio-card{max-width:620px;margin:0 auto;padding:36px;border-radius:28px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.studio-kicker{font:600 12px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.studio-card h2{font:700 34px/1.15 var(--rd-font);margin:10px 0 18px}
.studio-card ul{margin:0 0 18px;padding:0;list-style:none;display:grid;gap:10px}
.studio-card li{position:relative;padding-inline-start:26px;line-height:1.5;color:var(--ink2)}
.studio-card li::before{content:"";position:absolute;inset-inline-start:4px;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.studio-card .row{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 10px}
.studio-card a.btn{text-decoration:none}

/* the library online */
.welcome-web{text-align:center;padding:56px 20px 40px}
.welcome-web h3{font:700 30px/1.2 var(--rd-font);margin:0 0 12px}
.welcome-web p{color:var(--ink2);line-height:1.65;max-width:34em;margin:0 auto 22px}
.welcome-web .btn{display:inline-flex;align-items:center;gap:6px}
.add-book .cover{display:flex;align-items:center;justify-content:center;color:var(--muted)}
@media (max-width:640px){
  :root{--site-h:100px}
  .site{flex-wrap:wrap;gap:4px 8px;padding:8px 12px 6px;align-content:flex-start}
  .brand{height:38px}
  .brand small{display:none}
  .get{margin-inline-start:auto;padding:7px 12px;font-size:13px}
  .studios{order:3;flex:1 0 100%;margin-inline:-12px;padding-inline:8px}
  .studio-tab{padding:7px 11px;font-size:13px}
  .studio-card{padding:24px}
  .studio-card .row .btn{flex:1 1 100%;justify-content:center;text-align:center}
  .studio-card h2{font-size:28px}
}