/* App shell (§3.2–§3.4, WP0): header, bottom tab bar with the raised Scan disc (phone), icon rail (tablet),
   7-group rail + secondary tab strip (desktop). No horizontal scroll at 320–375 px. */
.app{ min-height:100dvh; }
.topbar{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:8px; height:calc(var(--header-h) + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) var(--gutter) 0; background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.topbar .brand-mark{ display:none; }
.branch-chip{
  display:inline-flex; align-items:center; gap:6px; max-width:96px; min-height:40px; padding:0 10px; flex:none;
  border:1px solid var(--line); border-radius:var(--r-pill); background:var(--surface); color:var(--ink); font-weight:700; font-size:var(--fs-label);
}
.branch-chip span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.branch-chip.static{ border-color:transparent; background:transparent; cursor:default; }
.search-pill{
  flex:1; min-width:120px; display:flex; align-items:center; gap:8px; min-height:40px; padding:0 8px 0 12px;
  border:1px solid var(--line); border-radius:var(--r-pill); background:var(--surface); color:var(--ink-2); font-size:var(--fs-label); text-align:left;
}
.search-pill .txt{ flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.search-pill kbd{ display:none; font-size:.6875rem; border:1px solid var(--line); border-radius:6px; padding:1px 6px; color:var(--ink-3); }
.sync-chip{ position:relative; display:inline-grid; place-items:center; width:40px; height:40px; border-radius:var(--r-pill); border:0; background:transparent; color:var(--ink-3); flex:none; }
.sync-chip.queued{ color:var(--due); }
.sync-chip.offline{ color:var(--stale); }
.sync-chip .n{ position:absolute; top:2px; right:0; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:var(--due); color:#fff; font-size:.625rem; font-weight:800; line-height:16px; }
.sync-chip.syncing .i{ animation:breathe 1.2s infinite; }
.avatar-btn{ border:0; padding:0; background:transparent; width:40px; height:40px; display:grid; place-items:center; border-radius:50%; flex:none; }
.header-actions{ display:none; gap:8px; align-items:center; }
@media (max-width:359px){ .search-pill{ flex:0 0 48px; min-width:48px; justify-content:center; padding:0; } .search-pill .txt{ display:none; } }

#view{ display:block; padding:16px var(--gutter) calc(var(--tab-h) + 32px + env(safe-area-inset-bottom)); max-width:1440px; outline:none; min-width:0; }
#view:focus{ outline:none; }

/* ── bottom tab bar with raised Scan disc (phone) ─────────────────────────────────────────────────────────── */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:40; display:grid; grid-template-columns:repeat(5,1fr); align-items:end;
  height:calc(var(--tab-h) + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom);
  background:var(--surface); border-top:1px solid var(--line);
}
.tabbar a,.tabbar button.tab{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; height:var(--tab-h); min-width:0;
  color:var(--ink-2); font-size:.6875rem; font-weight:600; text-decoration:none; border:0; background:transparent; padding:0 2px;
}
.tabbar a span,.tabbar button.tab span{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tabbar a[aria-current="page"],.tabbar button.tab[aria-current="page"]{ color:var(--primary); }
.tabbar a[aria-current="page"]::before{ content:''; position:absolute; top:6px; width:6px; height:6px; border-radius:50%; background:var(--marigold); transform:translateY(-4px); }
.tabbar .badge-n{ position:absolute; top:6px; left:calc(50% + 6px); min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--primary); color:var(--on-primary); font-size:.625rem; font-weight:800; line-height:18px; }
.tabbar .tab-empty{ height:var(--tab-h); }
.scan-disc{
  justify-self:center; align-self:start; display:grid; place-items:center; width:64px; height:64px; margin-top:-20px; border-radius:50%; border:4px solid var(--bg);
  background:var(--brand-grad); color:#fff; box-shadow:0 6px 18px rgb(15 118 110/.35); position:relative;
}
.scan-disc .i{ width:30px; height:30px; }
.scan-disc:active{ transform:scale(.95); }
.scan-disc.beat{ animation:beat 1.1s var(--ease-out) 2; }
@keyframes beat{ 30%{ transform:scale(1.06); } 60%{ transform:scale(1); } }
body.no-tabbar .tabbar{ display:none; }
body.no-tabbar #view{ padding-bottom:32px; }

/* ── rail (tablet: 72 px icons; desktop: 240 px groups, collapsible) ──────────────────────────────────────── */
.rail{ display:none; }
.rail .rail-brand{ display:flex; align-items:center; gap:10px; height:var(--header-h); padding:0 16px; color:var(--ink); text-decoration:none; }
.rail .rail-brand img,.rail .rail-brand svg{ width:32px; height:32px; flex:none; }
.rail .rail-brand b{ font-size:1.125rem; font-weight:800; letter-spacing:-.01em; }
.rail .rail-brand b em{ font-style:normal; color:var(--primary); }
.rail nav{ display:flex; flex-direction:column; gap:2px; padding:8px; }
.rail nav a{ display:flex; align-items:center; gap:12px; min-height:44px; padding:0 12px; border-radius:var(--r-sm); color:var(--ink-2); font-weight:600; text-decoration:none; white-space:nowrap; overflow:hidden; }
.rail nav a:hover{ background:var(--surface-2); color:var(--ink); }
.rail nav a[aria-current="page"]{ background:var(--primary-soft); color:var(--primary); }
.rail .rail-scan{ margin:8px; }
.rail .rail-foot{ margin-top:auto; padding:8px; }
.subtabs{ display:none; }

@media (min-width:768px){
  .app{ display:grid; grid-template-columns:var(--rail-w-collapsed) minmax(0,1fr); grid-template-rows:auto 1fr; }
  .rail{ display:flex; flex-direction:column; grid-row:1 / span 2; position:sticky; top:0; height:100dvh; background:var(--surface); border-right:1px solid var(--line); overflow-y:auto; }
  .rail .rail-brand b,.rail nav a span{ display:none; }
  .rail nav a{ justify-content:center; padding:0; }
  .rail .rail-scan{ display:grid; place-items:center; width:48px; height:48px; margin:8px auto; border-radius:50%; background:var(--brand-grad); color:#fff; border:0; }
  .rail .rail-scan span{ display:none; }
  .tabbar{ display:none; }
  #view{ padding:20px 24px 40px; }
  .snackbar,.toast{ bottom:24px; }
}
@media (min-width:1024px){
  .app{ grid-template-columns:var(--rail-w) minmax(0,1fr); }
  .app.rail-collapsed{ grid-template-columns:var(--rail-w-collapsed) minmax(0,1fr); }
  .app:not(.rail-collapsed) .rail .rail-brand b,.app:not(.rail-collapsed) .rail nav a span{ display:inline; }
  .app:not(.rail-collapsed) .rail nav a{ justify-content:flex-start; padding:0 12px; }
  .app:not(.rail-collapsed) .rail .rail-scan{ width:auto; height:44px; border-radius:var(--r-sm); display:flex; gap:8px; justify-content:center; margin:8px; font-weight:700; }
  .app:not(.rail-collapsed) .rail .rail-scan span{ display:inline; }
  .branch-chip{ max-width:220px; }
  .search-pill{ max-width:560px; }
  .search-pill kbd{ display:inline; }
  .header-actions{ display:flex; }
  .subtabs{ display:flex; gap:4px; padding:0 24px; border-bottom:1px solid var(--line); background:var(--bg); overflow-x:auto; position:sticky; top:var(--header-h); z-index:20; }
  .subtabs a{ display:inline-flex; align-items:center; min-height:44px; padding:0 12px; color:var(--ink-2); font-weight:600; text-decoration:none; border-bottom:2px solid transparent; white-space:nowrap; }
  .subtabs a[aria-current="page"]{ color:var(--primary); border-color:var(--primary); }
  .subtabs:empty{ display:none; }
}

/* ── More sheet grid (§3.2) ──────────────────────────────────────────────────────────────────────────────── */
.more-group h3{ margin:16px 0 8px; color:var(--ink-2); text-transform:uppercase; letter-spacing:.05em; font-size:var(--fs-caption); }
.more-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.more-grid a,.more-grid button{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; min-height:88px; padding:8px 4px; text-align:center;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface); color:var(--ink); text-decoration:none; font-size:var(--fs-caption); font-weight:600;
}
.more-grid a:hover,.more-grid button:hover{ border-color:var(--primary); text-decoration:none; }
.more-grid .i{ width:28px; height:28px; color:var(--primary); }
@media (min-width:768px){ .more-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }

/* ── system pages ────────────────────────────────────────────────────────────────────────────────────────── */
.auth-page{ min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px var(--gutter); }
.auth-card{ width:100%; max-width:400px; }
.auth-card .lockup{ display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:24px; text-align:center; }
.auth-card .lockup img{ width:72px; height:72px; }
.auth-card .lockup .wm{ font-size:1.75rem; font-weight:800; letter-spacing:-.02em; }
.auth-card .lockup .wm em{ font-style:normal; color:var(--primary); }
.auth-card .lockup .tagline{ color:var(--ink-2); font-weight:600; }
.coming-soon{ max-width:560px; margin:24px auto; }
.update-toast{ position:fixed; top:calc(var(--header-h) + 8px); left:50%; transform:translateX(-50%); z-index:95; display:flex; gap:8px; align-items:center; padding:8px 8px 8px 16px; border-radius:var(--r-pill); background:var(--ink); color:var(--bg); box-shadow:var(--shadow-sheet); }
.update-toast .btn{ min-height:36px; background:var(--primary); color:var(--on-primary); border:0; }
.offline-banner{ background:var(--stale-soft); color:var(--ink); padding:8px var(--gutter); font-size:var(--fs-caption); font-weight:600; display:flex; gap:8px; align-items:center; }

/* sign-in and public pages: no app chrome (§3.2) */
body[data-chrome="auth"] .topbar,body[data-chrome="auth"] .rail,body[data-chrome="auth"] .subtabs,
body[data-chrome="public"] .topbar,body[data-chrome="public"] .rail,body[data-chrome="public"] .subtabs,
body[data-chrome="print"] .topbar,body[data-chrome="print"] .rail{ display:none; }
@media (min-width:768px){ body[data-chrome="auth"] .app,body[data-chrome="public"] .app,body[data-chrome="print"] .app{ display:block; } }
body[data-chrome="auth"] #view,body[data-chrome="public"] #view{ padding:0; max-width:none; }