/* ═══ 3. App shell — sidebar (desktop) · top bar + tab bar (phone) ═══ */
.app { min-height: 100dvh; }
.main { padding: calc(var(--top) + var(--safe-t) + 8px) 16px calc(var(--tabbar) + var(--safe-b) + 28px); max-width: 1120px; margin-inline: auto; }
.main.bare { padding: 0; max-width: none; }

.topbar {
  position: fixed; inset-inline: 0; top: 0; z-index: 40; height: calc(var(--top) + var(--safe-t)); padding: var(--safe-t) 14px 0;
  display: flex; align-items: center; gap: 8px; background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(18px); backdrop-filter: saturate(1.4) blur(18px);
  border-bottom: 1px solid transparent; transition: border-color .2s;
}
.topbar.scrolled { border-bottom-color: var(--line); }
.topbar__title { flex: 1; min-width: 0; font-weight: 700; font-size: 17px; transition: opacity .2s; }
@media (max-width: 959px) { .topbar__title.fade { opacity: 0; } .topbar.scrolled .topbar__title.fade { opacity: 1; }}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand__mark { width: 38px; height: 38px; flex: none; }
.brand__name { font-weight: 700; font-size: 16.5px; line-height: 1.2; white-space: nowrap; }
.brand__sub { font-size: 11.5px; color: var(--ink-3); line-height: 1.2; letter-spacing: .3px; }
.icon-btn {
  width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: var(--ink-2); flex: none;
  transition: background .15s, color .15s, transform .15s var(--spring);
}
.icon-btn:hover { background: var(--hover); color: var(--ink); }
.icon-btn:active { transform: scale(.92); }
.icon-btn.on { color: var(--primary); background: var(--primary-soft); }
.icon-btn.tint { color: var(--primary); background: var(--primary-soft); }
.icon-btn .dot { position: absolute; }

.tabbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 40; padding: 6px 6px calc(var(--safe-b) + 6px);
  display: grid; grid-template-columns: repeat(5, 1fr); background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(18px); backdrop-filter: saturate(1.4) blur(18px); border-top: 1px solid var(--line);
}
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 3px; padding: 6px 2px 2px; border-radius: 14px;
  color: var(--ink-3); font-size: 10.5px; line-height: 1.25; text-align: center; min-height: 52px; transition: color .15s;
}
.tab .tab__ico { width: 46px; height: 28px; border-radius: 999px; display: grid; place-items: center; transition: background .2s var(--ease); }
.tab.on { color: var(--primary); font-weight: 700; }
.tab.on .tab__ico { background: var(--primary-soft); }
.tab:active .tab__ico { transform: scale(.9); }

.sidebar { display: none; }

@media (min-width: 960px) {
  .tabbar { display: none; }
  .topbar { inset-inline-start: var(--side); background: color-mix(in srgb, var(--bg) 90%, transparent); padding-inline: 28px; }
  .topbar .brand { display: none; }
  .main { margin-inline-start: var(--side); padding: calc(var(--top) + 14px) 36px 56px; max-width: calc(1120px + var(--side)); margin-inline-end: auto; }
  .main.bare { margin-inline-start: 0; }
  .sidebar {
    display: flex; flex-direction: column; position: fixed; inset-block: 0; inset-inline-start: 0; width: var(--side); z-index: 41;
    padding: 22px 16px 18px; background: var(--surface-2); border-inline-end: 1px solid var(--line); overflow-y: auto;
  }
  .sidebar .brand { padding: 0 8px 22px; }
  .sidebar .brand__mark { width: 44px; height: 44px; }
  .nav { display: grid; gap: 2px; }
  .nav a {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 13px; color: var(--ink-2); font-size: 14.5px;
    transition: background .15s, color .15s;
  }
  .nav a:hover { background: var(--hover); color: var(--ink); }
  .nav a.on { background: var(--surface); color: var(--primary); font-weight: 700; box-shadow: var(--shadow-1); }
  .nav a.on .i { color: var(--primary); }
  .nav hr { border: 0; border-top: 1px solid var(--line); margin: 12px 8px; }}

/* Main menu (phone) */

/* ═══ Opening animation — runs once per app launch only ═══ */
.splash {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--bg);
  animation: splash-out .55s var(--ease) 1.45s forwards;
}
.splash__in { display: grid; justify-items: center; gap: 14px; }
.splash svg { width: 92px; height: 92px; }
.splash .lg-tile { transform-origin: center; animation: pop .7s var(--spring) both; }
.splash .lg-m { stroke-dasharray: 760; stroke-dashoffset: 760; animation: draw .9s var(--ease) .25s forwards; }
.splash .lg-sun { transform-origin: 138px 132px; animation: sun .7s var(--spring) .75s both; }
.splash__name { font-weight: 700; font-size: 19px; opacity: 0; animation: rise .6s var(--ease) .7s forwards; }
.splash__sub { font-size: 12.5px; color: var(--ink-3); letter-spacing: 1px; opacity: 0; animation: rise .6s var(--ease) .85s forwards; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes sun { from { transform: scale(0) translateY(30px); } to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes splash-out { to { opacity: 0; visibility: hidden; } }
/* First paint of the home page after the splash: gentle cascade (only once) */
.intro .cascade > * { opacity: 0; animation: rise .7s var(--ease) forwards; }
.intro .cascade > *:nth-child(1) { animation-delay: 1.55s; }
.intro .cascade > *:nth-child(2) { animation-delay: 1.65s; }
.intro .cascade > *:nth-child(3) { animation-delay: 1.75s; }
.intro .cascade > *:nth-child(4) { animation-delay: 1.85s; }
.intro .cascade > *:nth-child(5) { animation-delay: 1.95s; }
.intro .cascade > *:nth-child(n+6) { animation-delay: 2.05s; }
@keyframes drift { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
body[data-layout="bare"] .topbar, body[data-layout="bare"] .tabbar, body[data-layout="bare"] .sidebar { display: none; }

/* 1.11 — the top icons sit close together as one group (bell first, then search) */
.topbar { gap: 0; }
.topbar > .icon-btn { width: 32px; height: 36px; border-radius: 10px; position: relative; }
.topbar > .icon-btn .i { width: 20px; height: 20px; }
/* the count sits neatly on the icon's corner, ringed by the bar's colour */
.topbar > .icon-btn .tab__badge { top: 2px; inset-inline-end: -1px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 9.5px; line-height: 16px; box-shadow: 0 0 0 2px var(--bg); }
.topbar > .brand, .topbar > .topbar__title { margin-inline-end: 8px; }
@media (min-width: 960px) { .sidebar { overscroll-behavior: contain; scrollbar-width: thin; }}
/* 1.13 — a page redrawn in place keeps still (no replayed entrance animations, no transition flashes) */
.main.still :is(section, article, .card, .li, .draft, .check, .tl > *, .tlist > *, .list > *, .stack-s > *), .main.still :is(section, article, .card, .li, .draft, .check)::before { animation-duration: 0s !important; animation-delay: 0s !important; }
.main.still-t *, .main.still-t *::before, .main.still-t *::after { transition: none !important; }
/* 1.17 · small phones: tighter top bar so the name never runs under the buttons */
@media (max-width: 379px) {
  .topbar { gap: 4px; padding-inline: 10px; }
  .topbar .icon-btn { width: 36px; height: 36px; }
  .brand { gap: 8px; } .brand__mark { width: 34px; height: 34px; } .brand__name { font-size: 14px; }}
.brand > div { min-width: 0; }
.brand__name { overflow: hidden; text-overflow: ellipsis; }