/* Home page: two views, picked before first paint by the script in index.html's head.
   The first rules undo the room page's page-wide ones (the centred grid body, the phone scroll lock),
   so Home scrolls like a normal page on every screen. */
html[data-home], html[data-home] body { margin: 0; padding: 0; height: auto; min-height: 100%; overflow: visible; overscroll-behavior: auto; }
/* place-items too: browsers that align blocks would still centre (and shrink) the views under style.css's body rule */
html[data-home] body { display: block; place-items: normal; min-height: 100vh; background: var(--bg); color: var(--text); font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
html[data-home=new] #listView, html[data-home=list] #newView { display: none; }
html[data-home=list] { scroll-padding-top: 92px; }   /* keyboard moves keep the row clear of the sticky top */
html[data-home] .user-widget { display: none; }       /* its name and gear are reached from the top bar */
#dmHost { display: none !important; }                 /* dm.js hangs off a sidebar; here it stays out of sight */

/* ---- top bar, both views ---- */
.tb { height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 12px; background: var(--bg); }
.tb-logo { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 16px; color: var(--text); }
.tb-logo svg { color: var(--accent-text); }
.tb-sp { flex: 1; }
.tb-btn { height: 36px; border: 0; border-radius: var(--r-sm); padding: 0 12px; background: transparent; color: var(--text-2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tb-btn:hover { background: var(--s2); color: var(--text); }
.tb-btn.pri { background: var(--accent); color: var(--on-accent); }
.tb-btn.pri:hover { background: var(--accent-h); }
.tb-av { width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--s3); color: var(--bg-deep); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
#lvMe { display: inline-flex; }

/* ---- returning: the page itself scrolls; the top bar and search stay put ---- */
.lv-head { position: sticky; top: 0; z-index: 5; background: var(--bg); }
.srch { height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--s1); color: var(--muted); cursor: text; }
.srch svg { flex: 0 0 auto; }
.srch input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; outline: 0; color: var(--text); font: inherit; font-size: 15px; box-shadow: none; }
.srch input::placeholder { color: var(--muted); }
#list { padding-bottom: env(safe-area-inset-bottom); }

/* ---- new visitor: one line, one button, one box ---- */
#newView { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.nv { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 14px; width: 100%; max-width: 440px; margin: 0 auto; padding: 16px; }
.nv h1 { margin: 0; font-size: 34px; line-height: 1.12; letter-spacing: -.02em; font-weight: 700; }
.nv-sub { margin: 0; color: var(--muted); }
.cta { height: 54px; border: 0; border-radius: var(--r); padding: 0 16px; background: var(--accent); color: var(--on-accent); font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; }
.cta:hover { background: var(--accent-h); }
.jn { display: flex; gap: 8px; }
.jn input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 0; border-radius: var(--r-sm); background: var(--s2); color: var(--text); font: inherit; outline: 0; }
.jn input::placeholder { color: var(--muted); }
.jn input:focus { box-shadow: inset 0 0 0 1px var(--accent); }
.jn input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--danger); }
.jn button { height: 44px; border: 0; border-radius: var(--r-sm); padding: 0 16px; background: var(--s2); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.jn button:hover { background: var(--s3); }
.jn-err { margin: -6px 0 0; font-size: 13px; color: var(--danger-text); }
html[data-share="0"] .h-share, html[data-share="1"] .h-noshare { display: none; }

@media (max-width: 720px) {
  .tb-btn { height: 40px; }
  .nv { justify-content: flex-start; padding-top: 24px; max-width: none; }
  .nv h1 { font-size: 30px; }
  .jn input, .srch input { font-size: 16px; }   /* below 16px, iPhones zoom the page on focus */
}