/* App shell: collapsible charcoal sidebar, top bar, view area, mobile nav. */
.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); height: 100vh; height: 100dvh; transition: grid-template-columns 220ms var(--ease); }
.app.is-collapsed { grid-template-columns: var(--side-w-collapsed) minmax(0, 1fr); }
.app.is-auth { display: block; }
.app.is-auth .sidebar, .app.is-auth .topbar { display: none; }

/* ---------- Sidebar ---------- */
.sidebar { background: var(--side-bg); color: var(--side-text); display: flex; flex-direction: column; min-height: 0; overflow: hidden; border-right: 1px solid var(--side-line); }
.side-brand { display: flex; align-items: center; gap: 10px; height: var(--top-h); padding: 0 14px 0 16px; flex: none; }
.side-brand .brand-mark { width: 26px; height: 24px; flex: none; }
.side-brand .brand-name { font-weight: 700; font-size: 17px; letter-spacing: -.02em; color: #fff; }
.side-brand .btn-icon { margin-left: auto; color: var(--side-text-2); }
.side-brand .btn-icon:hover { background: var(--side-hover); color: #fff; }
.ws-switch { margin: 2px 10px 8px; display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--r-md); background: var(--side-bg-2); border: 1px solid var(--side-line); text-align: left; width: calc(100% - 20px); }
.ws-switch:hover { background: var(--side-hover); }
.ws-logo { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-weight: 700; font-size: 12px; color: #fff; flex: none; }
.ws-switch .ws-name { color: #fff; font-weight: 600; font-size: 13.5px; }
.ws-switch .ws-meta { color: var(--side-text-2); font-size: 11.5px; }
.side-scroll { flex: 1; overflow-y: auto; padding: 4px 10px 12px; scrollbar-color: rgba(255,255,255,.15) transparent; }
.side-section { margin-top: 14px; }
.side-section-head { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 4px; font-size: 11.5px; font-weight: 600; color: var(--side-text-2); }
.side-section-head .btn-icon { width: 22px; height: 22px; color: var(--side-text-2); border-radius: 5px; }
.side-section-head .btn-icon:hover { background: var(--side-hover); color: #fff; }
.nav-item { position: relative; display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 8px; border-radius: var(--r-sm); color: var(--side-text); font-size: 13.5px; font-weight: 500; width: 100%; text-align: left; text-decoration: none !important; }
.nav-item:hover { background: var(--side-hover); color: #fff; }
.nav-item.is-active { background: var(--side-active); color: #fff; }
.nav-item.is-active::before { content: ""; position: absolute; left: -10px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); }
.nav-item .ico { color: var(--side-text-2); }
.nav-item.is-active .ico, .nav-item:hover .ico { color: #7fd3f3; }
.nav-item .nav-count { margin-left: auto; font-size: 11.5px; color: var(--side-text-2); font-variant-numeric: tabular-nums; }
.nav-item .proj-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; margin: 0 3px; }
.nav-item .nav-trail { margin-left: auto; opacity: 0; display: flex; }
.nav-item:hover .nav-trail { opacity: 1; }
.side-foot { flex: none; border-top: 1px solid var(--side-line); padding: 8px 10px; }
.storage-mini { padding: 8px; font-size: 11.5px; color: var(--side-text-2); }
.storage-mini .progress { background: rgba(255,255,255,.1); height: 4px; margin-top: 6px; }

/* Collapsed sidebar: icons only, labels become tooltips */
.app.is-collapsed .sidebar .hide-collapsed { display: none !important; }
.app.is-collapsed .nav-item { justify-content: center; padding: 0; }
.app.is-collapsed .ws-switch { justify-content: center; padding: 6px 0; }
.app.is-collapsed .side-brand { justify-content: center; padding: 0; }
.app.is-collapsed .side-section-head { justify-content: center; padding: 0 0 4px; }
.app.is-collapsed .nav-item.is-active::before { left: -10px; }

/* ---------- Main column ---------- */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.topbar { height: var(--top-h); flex: none; display: flex; align-items: center; gap: 10px; padding: 0 16px 0 20px; background: var(--surface); border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text-2); min-width: 0; }
.crumbs .ico { color: var(--text-3); }
.crumbs b { color: var(--text); font-weight: 600; }
.search-trigger { margin-left: auto; display: flex; align-items: center; gap: 8px; height: 34px; width: min(340px, 34vw); padding: 0 8px 0 10px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface-2); color: var(--text-3); font-size: 13px; }
.search-trigger:hover { border-color: var(--line-strong); color: var(--text-2); }
.search-trigger .kbd { margin-left: auto; }
.topbar .icon-badge { position: relative; }
.topbar .icon-badge .badge { position: absolute; top: 2px; right: 1px; min-width: 16px; height: 16px; font-size: 10px; box-shadow: 0 0 0 2px var(--surface); }
.sync-pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 9px; border-radius: var(--r-pill); font-size: 12px; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--line); }
.view { flex: 1; min-height: 0; overflow: auto; position: relative; }

/* Standard page scaffolding used by views */
.page { padding: 24px 28px 64px; max-width: 1240px; margin: 0 auto; }
.page-narrow { max-width: 880px; }
.page-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head .grow h1 { font-size: 22px; font-weight: 700; letter-spacing: -.015em; }
.page-head .grow p { color: var(--text-2); margin-top: 4px; font-size: 13.5px; }
.view-bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 8px; padding: 10px 20px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.project-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px 0; flex-wrap: wrap; }
.project-head .proj-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px; }
.project-head h1 { font-size: 20px; font-weight: 700; letter-spacing: -.015em; }
.project-tabs { display: flex; gap: 2px; padding: 8px 20px 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
.project-tabs .tab { flex: none; }

/* Floating layer (Pomodoro player, copilot button) */
.floating-layer { position: fixed; right: 20px; bottom: 20px; z-index: 60; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; pointer-events: none; }
.floating-layer > * { pointer-events: auto; }

/* ---------- Mobile ---------- */
.mobile-nav { display: none; }
@media (max-width: 860px) {
  .app, .app.is-collapsed { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); z-index: 85; transform: translateX(-102%); transition: transform 240ms var(--ease); }
  .app.is-mobile-open .sidebar { transform: none; box-shadow: var(--shadow-3); }
  .app.is-collapsed .sidebar .hide-collapsed { display: revert !important; }
  .side-scrim { position: fixed; inset: 0; z-index: 84; background: rgba(15,24,28,.42); }
  .topbar { padding: 0 10px; }
  .search-trigger { width: auto; flex: 1; }
  .search-trigger .kbd, .hide-mobile, .crumbs { display: none !important; }
  .main { padding-bottom: 60px; }
  .mobile-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: 60px; z-index: 70; background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
  .mobile-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10.5px; font-weight: 500; color: var(--text-3); text-decoration: none; }
  .mobile-nav a.is-active { color: var(--brand-text); }
  .mobile-nav .mn-add { width: 44px; height: 44px; border-radius: 14px; background: var(--brand); color: #fff; display: grid; place-items: center; margin-top: -18px; box-shadow: 0 8px 18px -6px rgba(7,112,155,.6); }
  .page { padding: 16px 16px 48px; }
  .view-bar, .project-tabs, .project-head { padding-left: 16px; padding-right: 16px; }
  .project-head { flex-wrap: nowrap; gap: 10px; }
  .project-head > :first-child { width: 28px !important; height: 28px !important; font-size: 12px !important; }
  .project-head h1 { font-size: 17px; }
  .project-head p { display: none; }
  .floating-layer { bottom: 76px; right: 14px; }
  .sheet { width: 100vw; }
  .modal { top: auto; bottom: 0; border-radius: var(--r-xl) var(--r-xl) 0 0; max-height: 88vh; width: 100vw; animation: modal-up 220ms var(--ease); }
  @keyframes modal-up { from { transform: translate(-50%, 24px); opacity: 0; } }
  .toast-stack { bottom: 76px; }
}

/* Project view chrome: filter panel, chips, color swatches */
.project-content { position: relative; }
.filter-panel { width: min(720px, calc(100vw - 24px)); }
.filter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 18px; padding: 14px 16px; max-height: 60vh; overflow-y: auto; }
.filter-grid h4 { font-size: 12px; font-weight: 600; color: var(--text-3); margin: 10px 0 6px; }
.filter-grid h4:first-child { margin-top: 0; }
.filter-opt { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 6px; border-radius: var(--r-sm); font-size: 13px; cursor: pointer; min-width: 0; }
.filter-opt:hover { background: var(--hover); }
.filter-foot { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.filter-foot .hint { flex: 1; }
@media (max-width: 720px) { .filter-grid { grid-template-columns: 1fr; } }
.filter-chip { padding-right: 3px; }
.filter-chip button { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 3px; color: inherit; }
.filter-chip button:hover { background: var(--brand-soft-2); }
.color-swatch { width: 26px; height: 26px; border-radius: 8px; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.color-swatch.is-active { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--sw); }