pm-app { display: block; height: 100vh; }
.app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); height: 100vh; transition: grid-template-columns .18s ease; }
.app.collapsed { grid-template-columns: 0 minmax(0, 1fr); }
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; }
.page { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.page-head { display: flex; align-items: center; gap: 10px; padding: 14px 20px 6px; min-height: 58px; }
.page-head h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.page-body { flex: 1; min-height: 0; overflow: auto; padding: 8px 20px 28px; }
.sidebar-toggle { position: absolute; z-index: 20; left: -14px; top: 50%; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-1); display: grid; place-items: center; color: var(--text-2); }
.app.collapsed .sidebar-toggle { left: 6px; top: 14px; }
.scrim { display: none; }

/* ---------- guest banner ---------- */
.guest-banner { display: flex; align-items: center; gap: 12px; padding: 8px 20px; background: var(--accent-soft); color: var(--text); font-size: 13px; border-bottom: 1px solid var(--border); }
.guest-banner .grow { flex: 1; }

/* ---------- sidebar ---------- */
pm-sidebar { display: flex; flex-direction: column; min-height: 0; overflow: hidden; background: var(--sidebar-bg); border-right: 1px solid var(--border); }
.app.collapsed pm-sidebar { visibility: hidden; }
.sb-brand { display: flex; align-items: center; gap: 10px; padding: 14px 14px 8px; font-weight: 800; font-size: 17px; letter-spacing: -0.02em; }
.sb-logo { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, #fde047, #f59e0b); color: #1c2333; display: grid; place-items: center; }
.sb-nav { display: grid; gap: 2px; padding: 4px 8px; }
.sb-link { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border: 0; border-radius: var(--radius); background: transparent; color: var(--text); text-align: left; text-decoration: none; font-weight: 500; }
.sb-link:hover { background: var(--surface-3); }
.sb-link.active { background: var(--accent-soft); color: var(--accent); }
.sb-link .i { color: var(--text-2); }
.sb-link.active .i { color: var(--accent); }
.sb-fav { padding: 0 8px; }
.sb-fav .sb-link { height: 30px; padding-left: 36px; font-weight: 400; }
.sb-ws { display: flex; align-items: center; gap: 4px; margin: 10px 10px 8px; }
.sb-ws-btn { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-weight: 600; text-align: left; }
.sb-ws-btn:hover { background: var(--surface-2); }
.sb-ws-btn .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-avatar { width: 24px; height: 24px; border-radius: 7px; background: #d97706; color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 800; flex: none; }
.sb-search { display: flex; gap: 6px; padding: 0 10px 8px; }
.sb-search .input { height: 34px; padding-left: 32px; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238892a6' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 10px center; }
.sb-tree { flex: 1; min-height: 0; overflow: auto; padding: 0 8px 16px; }
.tree-list { list-style: none; margin: 0; padding: 0; min-height: 6px; }
.tree-list .tree-list { padding-left: 14px; margin-left: 12px; border-left: 1px solid var(--border); }
.tree-row { text-decoration: none; display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 4px 0 6px; border-radius: var(--radius); cursor: pointer; color: var(--text); }
.tree-row:hover { background: var(--surface-3); }
.tree-row.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.tree-row .i { color: var(--text-2); }
.tree-row.active .i { color: var(--accent); }
.tree-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-row .more { opacity: 0; }
.tree-row:hover .more, .tree-row .more:focus-visible { opacity: 1; }
.tree-row .chev { transition: transform .12s; }
.tree-row .chev.open { transform: rotate(90deg); }
.tree-empty { padding: 14px 10px; color: var(--text-3); font-size: 13px; }
.tree-drag-ghost { opacity: .4; }

/* ---------- board header, tabs, toolbar ---------- */
.board-title { border: 0; background: transparent; padding: 2px 6px; margin-left: -6px; border-radius: 6px; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-title:hover { background: var(--surface-2); }
input.board-title { background: var(--surface); box-shadow: var(--focus-ring); min-width: 240px; }
.star-on { color: #f5b301; }
.star-on svg { fill: #f5b301; }
.view-tabs { display: flex; align-items: center; gap: 4px; padding: 0 20px; border-bottom: 1px solid var(--border); overflow-x: auto; flex: none; }
.view-tab { position: relative; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border: 0; background: transparent; color: var(--text-2); font-weight: 600; white-space: nowrap; border-radius: 8px 8px 0 0; }
.view-tab:hover { background: var(--surface-2); color: var(--text); }
.view-tab.active { color: var(--text); }
.view-tab.active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: var(--accent); border-radius: 2px; }
.view-tab .more { opacity: 0; margin-right: -6px; }
.view-tab:hover .more, .view-tab.active .more { opacity: .8; }
.toolbar { display: flex; align-items: center; gap: 4px; padding: 10px 20px; flex-wrap: wrap; flex: none; }
.toolbar .search-box { position: relative; display: inline-flex; align-items: center; }
.toolbar .search-box .input { height: 34px; width: 170px; padding-left: 32px; border-color: transparent; background: transparent; transition: width .15s, background .15s; }
.toolbar .search-box .input:hover { background: var(--surface-2); }
.toolbar .search-box .input:focus, .toolbar .search-box .input:not(:placeholder-shown) { width: 240px; background: var(--surface); border-color: var(--border-strong); }
.toolbar .search-box .i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-2); }
.badge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--accent-text); font-size: 11px; font-weight: 700; }
.view-host { flex: 1; min-height: 0; overflow: auto; position: relative; }
.empty-state { display: grid; place-items: center; gap: 10px; text-align: center; padding: 64px 20px; color: var(--text-2); }
.empty-state h3 { color: var(--text); font-size: 17px; }

/* ---------- home / my tasks / invite ---------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.board-card { display: grid; gap: 6px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); text-align: left; text-decoration: none; color: var(--text); }
.board-card:hover { border-color: var(--accent); box-shadow: var(--shadow-1); }
.board-card .t { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.section-title { font-size: 12px; font-weight: 700; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; margin: 22px 0 10px; }
.task-board { margin-bottom: 22px; }
.task-board h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 15px; }
.task-row { display: grid; grid-template-columns: 1fr 150px 110px; gap: 10px; align-items: center; min-height: 40px; padding: 0 12px; margin-bottom: 4px; background: var(--row-bg); border-radius: var(--radius); box-shadow: inset 4px 0 0 var(--g, var(--accent)); }
.task-row:hover { background: var(--row-hover); }
.task-row .nm { cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-row .sub { color: var(--text-3); font-size: 12px; margin-left: 6px; }
.center-card { max-width: 440px; margin: 12vh auto; padding: 28px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-1); display: grid; gap: 14px; }

/* ---------- item drawer ---------- */
.drawer-backdrop { position: fixed; inset: 0; z-index: 800; background: var(--overlay); display: flex; justify-content: flex-end; }
.drawer { width: min(100%, 520px); height: 100%; background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-pop); display: flex; flex-direction: column; animation: slidein .16s ease-out; }
@keyframes slidein { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.drawer > header { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.drawer > header .title { flex: 1; font-size: 18px; font-weight: 700; border: 0; background: transparent; padding: 4px 6px; margin-left: -6px; border-radius: 6px; }
.drawer > header .title:hover { background: var(--surface-2); }
.drawer > header .title:focus { background: var(--surface); box-shadow: var(--focus-ring); outline: none; }
.drawer > .body { flex: 1; overflow: auto; padding: 8px 18px 24px; }
.dfield { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 10px; min-height: 44px; border-bottom: 1px solid var(--border); }
.dfield > .lbl { display: flex; align-items: center; gap: 6px; }
.dfield .cell { height: 34px; border-radius: var(--radius-sm); }
.dfield .cell.tall { height: auto; min-height: 34px; }
.sub-list { display: grid; gap: 4px; margin-top: 6px; }

@media (max-width: 820px) {
  .app, .app.collapsed { grid-template-columns: minmax(0, 1fr); }
  pm-sidebar { position: fixed; z-index: 700; left: 0; top: 0; bottom: 0; width: min(86vw, 300px); transform: translateX(-100%); transition: transform .18s ease; box-shadow: var(--shadow-pop); visibility: visible !important; }
  .app.sidebar-open pm-sidebar { transform: none; }
  .app.sidebar-open .scrim { display: block; position: fixed; inset: 0; z-index: 650; background: var(--overlay); }
  .sidebar-toggle, .app.collapsed .sidebar-toggle { left: 8px; top: 12px; }
  .page-head { padding-left: 48px; }
  .toolbar, .view-tabs, .page-body { padding-left: 12px; padding-right: 12px; }
  .board-title { max-width: 50vw; min-width: 40px; font-size: 18px; flex: 0 1 auto; }
  .head-members { display: none; } /* people are managed from the sidebar on phones */
}