/* Logged-in interior pages (/profile, /start). Requires tokens.css +
   components.css loaded first. No swirl here — per design-system.md, the
   swirl is reserved for auth screens and the marketing hero, not the app
   interior. Plain light cards only. */

body{margin:0;min-height:100vh;background:var(--page);color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}

.app-shell{max-width:520px;margin:0 auto;padding:64px 20px 80px}

.app-shell h1{font-family:Fraunces,Georgia,serif;font-weight:600;
  font-size:26px;letter-spacing:-.01em;margin:0 0 8px}
.app-shell .sub{color:var(--ink-2);margin:0 0 26px}

.profile-block{white-space:pre-wrap;font-size:15.5px;line-height:1.7;
  color:var(--ink)}

.qr-card{display:flex;justify-content:center;padding:24px;margin:0 0 20px}
.qr-card svg{display:block;width:100%;max-width:220px;height:auto}

.app-shell .btn-block{margin:0 0 28px}

/* ── App sidebar (_app_sidebar.html) ─────────────────────────────────────
   Desktop: a persistent left rail. Mobile (<=820px, matching the Admin
   Console's breakpoint): the same markup slides on/off screen as a drawer,
   opened by the top bar's menu button — mobile and desktop always show
   identical nav content, nothing is trimmed for the smaller viewport. */
.app-topbar{display:none}
.app-nav-scrim{display:none}

/* height:100vh is a fallback for browsers that don't know 100dvh; on real
   Mobile Safari, 100vh is computed as if the toolbar were collapsed even
   while it's showing, so the drawer ends up taller than what's actually
   on screen — pushing Log out (pinned to the bottom via .app-side-foot's
   margin-top:auto) below the visible fold with nothing to signal there's
   more to scroll to. 100dvh tracks the real, currently-visible viewport. */
.app-side{position:fixed;top:0;left:0;width:240px;height:100vh;height:100dvh;
  overflow-y:auto;z-index:30;flex:none;display:flex;flex-direction:column;
  background:var(--paper);border-right:1px solid var(--line);padding:22px 14px}
.app-side-logo{display:flex;align-items:center;gap:9px;font-family:Fraunces,Georgia,serif;
  font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--ink);padding:4px 10px 22px}
.app-side-logo em{font-style:italic;font-weight:400;color:var(--ultramarine)}
.app-logo-mark{width:24px;height:24px;border-radius:7px;flex:none;object-fit:cover}

.app-navi{display:flex;flex-direction:column;gap:2px}
.app-navi a{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r-control);
  color:var(--ink-2);text-decoration:none;font-size:14px;border:1px solid transparent}
.app-navi a:hover{background:var(--wash);color:var(--ink)}
.app-navi a.on{background:var(--wash);color:var(--ultramarine);border-color:var(--line)}
.app-navi a .ic{width:18px;height:18px;flex:none}

.app-side-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.app-nav-logout{display:flex;align-items:center;gap:11px;width:100%;
  padding:9px 11px;border-radius:var(--r-control);border:1px solid transparent;
  background:none;color:var(--ink-2);font:inherit;font-size:14px;cursor:pointer;text-align:left}
.app-nav-logout:hover{background:var(--wash);color:var(--danger-text)}
.app-nav-logout .ic{width:18px;height:18px;flex:none}

/* flex column so a page's footer (added as a flex sibling of the page's
   own content wrapper — see public.css's .pub-footer) sticks to the
   bottom of the viewport instead of the bottom of short content. */
.app-main{margin-left:240px;min-height:100vh;display:flex;flex-direction:column}

@media (max-width:820px){
  .app-topbar{display:flex;align-items:center;justify-content:space-between;
    position:fixed;top:0;left:0;right:0;height:56px;z-index:46;
    background:var(--page);border-bottom:1px solid var(--line);padding:0 8px 0 16px}
  .app-topbar-logo{display:flex;align-items:center;gap:8px;font-family:Fraunces,Georgia,serif;
    font-weight:600;font-size:16px;letter-spacing:-.01em;color:var(--ink)}
  .app-topbar-logo em{font-style:italic;font-weight:400;color:var(--ultramarine)}
  .app-topbar-logo .app-logo-mark{width:22px;height:22px}
  .app-menu-btn{display:inline-flex;align-items:center;justify-content:center;
    width:38px;height:38px;background:none;border:1px solid var(--line-2);border-radius:var(--r-control);
    color:var(--ink-2);cursor:pointer}
  .app-menu-btn:hover{color:var(--ink);border-color:var(--ultramarine)}
  .app-menu-btn:focus-visible{outline:none;border-color:var(--ultramarine);box-shadow:0 0 0 3px var(--focus-ring)}
  .app-menu-btn .icon-close{display:none}
  body.app-nav-open .app-menu-btn .icon-open{display:none}
  body.app-nav-open .app-menu-btn .icon-close{display:inline-flex}

  .app-nav-scrim{display:block;position:fixed;inset:0;background:rgba(8,18,42,.4);
    z-index:44;opacity:0;pointer-events:none;transition:opacity .2s}
  body.app-nav-open .app-nav-scrim{opacity:1;pointer-events:auto}

  .app-side{width:min(280px,84vw);z-index:47;box-shadow:none;
    transform:translateX(-100%);transition:transform .22s ease}
  body.app-nav-open .app-side{transform:translateX(0);box-shadow:var(--shadow-card)}
  .app-side-logo{display:none}

  .app-main{margin-left:0;margin-top:56px}
  .app-main .app-shell{padding-top:36px}
}