/* The browser window is the application shell; only task panes scroll vertically. */
:root { --viewport-pad: 10px; }
html, body { height: 100%; overflow: hidden; }
body { height: 100dvh; min-height: 0; padding: var(--viewport-pad); }
.app-shell {
  display: flex;
  flex-direction: column;
  height: calc(100dvh - var(--viewport-pad) - var(--viewport-pad));
  min-height: 0;
  padding: 12px;
  border-radius: 24px;
  overflow: hidden;
}
.topbar { flex: 0 0 auto; min-height: 50px; padding: 7px 14px; gap: 16px; }
.brand { font-size: 21px; gap: 7px; }
.brand-icon { width: 28px; height: 28px; }
.brand-icon svg { width: 19px; height: 19px; }
.top-nav { padding: 3px; }
.top-nav button { min-height: 30px; padding: 6px 12px; font-size: 11px; gap: 7px; }
.nav-count { min-width: 17px; height: 17px; font-size: 10px; }
.top-actions .icon-button { width: 31px; height: 31px; }
.profile-avatar { width: 29px; height: 29px; font-size: 11px; }
.workspace-layout {
  flex: 1 1 auto;
  min-height: 0;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 15px;
  padding-top: 12px;
}
.sidebar { min-height: 0; padding-top: 44px; }
.icon-nav { width: 44px; padding: 4px; gap: 5px; }
.icon-nav button { width: 36px; height: 36px; }
.icon-nav svg { width: 17px; height: 17px; }
.sidebar-avatar { width: 29px; height: 29px; margin-bottom: 0; }
.page-content { display: flex; flex-direction: column; min-height: 0; padding-right: 0; }
.page-content > :not(.board):not(.list-view) { flex-shrink: 0; }
.heading { min-height: 34px; gap: 14px; margin-bottom: 10px; }
.heading h1 { font-size: 25px; line-height: 1.2; letter-spacing: -1px; }
.heading p { display: none; }
.create-button { min-height: 34px; padding: 8px 13px; font-size: 12px; }
.create-button svg { width: 15px; height: 15px; }
.overview { height: 64px; min-height: 0; grid-template-columns: 1.7fr 1fr; gap: 12px; margin-bottom: 10px; }
.focus-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 27px;
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  min-height: 0;
  height: 100%;
  padding: 9px 15px;
  border-radius: 17px;
  gap: 3px 10px;
}
.focus-label { grid-column: 1; grid-row: 1; padding: 0; flex-wrap: nowrap; font-size: 11px; gap: 6px; }
.focus-label > svg { width: 12px; height: 12px; }
#focus-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#focus-tag { max-width: 130px; }
#focus-tag .task-label { padding: 1px 6px; font-size: 11px; }
.focus-card > strong {
  grid-column: 1;
  grid-row: 2;
  display: block;
  padding: 0;
  width: 100%;
  font-size: 16px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -.25px;
}
#focus-meta, .focus-card::after { display: none; }
.focus-arrow { position: static; grid-column: 2; grid-row: 1 / 3; width: 27px; height: 27px; }
.focus-arrow svg { width: 15px; height: 15px; }
.progress-panel { display: flex; flex-direction: row; align-items: center; height: 100%; min-height: 0; padding: 9px 15px; border-radius: 17px; gap: 14px; }
.progress-panel-heading { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-width: 0; font-size: 12px; }
.progress-panel-heading #progress-scope { max-width: 100%; font-size: 11px; }
.progress-panel-body { gap: 12px; }
.progress-numbers strong { font-size: 24px; }
.progress-numbers > span { font-size: 14px; }
.progress-panel p { display: none; }
.progress-ring { width: 43px; height: 43px; }
.progress-ring > strong { width: 33px; height: 33px; font-size: 11px; }
.toolbar { min-height: 33px; margin-bottom: 8px; gap: 10px; flex-wrap: nowrap; }
.toolbar-left { gap: 12px; min-width: 0; }
.board-heading { flex-wrap: nowrap; gap: 8px; }
.board-heading h2 { font-size: 14px; white-space: nowrap; }
.board-heading > span { font-size: 11px; white-space: nowrap; }
.view-switch { padding: 3px; }
.view-switch button { width: 27px; height: 27px; }
.view-switch svg { width: 14px; height: 14px; }
.toolbar-right { gap: 7px; min-width: 0; }
.search { min-height: 33px; padding: 7px 11px; }
.search input { width: 145px; font-size: 12px; }
.toolbar .icon-button { width: 33px; height: 33px; }
.data-menu { top: 39px; }
.label-filterbar { display: flex; align-items: center; min-height: 0; height: 36px; gap: 9px; margin-bottom: 8px; }
.label-filters { flex-wrap: nowrap; height: 100%; overflow-x: auto; overflow-y: hidden; padding: 2px 1px 4px; gap: 6px; overscroll-behavior-x: contain; }
.label-filter { flex: 0 0 auto; min-height: 28px; max-width: 210px; padding: 5px 9px; font-size: 11px; }
.label-filter-name { max-width: 150px; }
.label-filter:first-child { position: sticky; left: 0; z-index: 1; }
.manage-labels { min-height: 29px; margin: 0; padding: 6px 10px; font-size: 11px; }
.filter-caption { margin: 0 0 6px; font-size: 11px; }
.board { flex: 1 1 0; min-height: 0; gap: 12px; align-items: stretch; }
.column { display: flex; flex-direction: column; min-height: 0; height: 100%; overflow: hidden; padding: 11px 9px 8px; border-radius: 19px; }
.column-header { flex: 0 0 auto; margin-bottom: 8px; padding: 0 4px; gap: 6px; }
.column-header h2 { font-size: 12px; }
.column-header button { width: 22px; height: 22px; }
.column-count { height: 19px; min-width: 19px; font-size: 10px; }
.cards { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; gap: 8px; padding: 2px 3px 3px 1px; scroll-padding-block: 4px; scrollbar-gutter: stable; overscroll-behavior-y: contain; }
.task-card { flex: 0 0 auto; gap: 6px; padding: 11px 12px; border-radius: 13px; }
.card-top { gap: 5px; flex-wrap: nowrap; }
.card-priority { flex-shrink: 0; padding: 2px 6px; font-size: 11px; }
.task-card .task-label { flex: 0 1 auto; max-width: 65%; padding: 2px 6px; font-size: 11px; }
.task-card h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; font-size: 13px; line-height: 1.45; letter-spacing: -.1px; }
.task-card p { -webkit-line-clamp: 1; font-size: 11px; line-height: 1.5; }
.card-footer { margin-top: 1px; }
.card-date { font-size: 11px; }
.card-date svg { width: 12px; height: 12px; }
.card-avatar { display: none; }
.empty-column { min-height: 0; padding: 12px 5px; }
.empty-art { width: 31px; height: 31px; margin-bottom: 9px; }
.empty-art svg { width: 16px; height: 16px; }
.empty-column strong { font-size: 12px; }
.empty-column p { font-size: 11px; line-height: 1.6; margin-top: 6px; }
.add-column { flex: 0 0 auto; min-height: 29px; padding: 8px 3px 1px; font-size: 11px; }
.list-view { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 5px 14px; border-radius: 18px; scrollbar-gutter: stable; overscroll-behavior-y: contain; }
.list-task { padding: 10px 2px; gap: 11px; }
.list-title { font-size: 13px; }
.list-empty { padding: 35px 12px; font-size: 12px; }
.statusbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 8px; min-width: 0; }
.board-bottom { margin: 0; padding: 0; font-size: 10px; gap: 8px; flex-shrink: 0; }
.bottom-progress { gap: 7px; white-space: nowrap; }
.progress-track { width: 50px; height: 3px; }
.drag-hint { display: none; }
.board-footer { flex: 1; min-width: 0; justify-content: flex-end; flex-wrap: nowrap; margin: 0; padding: 0; font-size: 10px; gap: 5px; }
#save-state { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-date { display: none; }
.cards, .list-view, .label-filters { scrollbar-width: thin; scrollbar-color: #c0d2c5 transparent; }
.cards::-webkit-scrollbar, .list-view::-webkit-scrollbar { width: 6px; }
.label-filters::-webkit-scrollbar { height: 4px; }
.cards::-webkit-scrollbar-track, .list-view::-webkit-scrollbar-track, .label-filters::-webkit-scrollbar-track { background: transparent; }
.cards::-webkit-scrollbar-thumb, .list-view::-webkit-scrollbar-thumb, .label-filters::-webkit-scrollbar-thumb { background: #c0d2c5; border-radius: 10px; }
.cards::-webkit-scrollbar-thumb:hover, .list-view::-webkit-scrollbar-thumb:hover { background: #8faf9b; }
@supports selector(::-webkit-scrollbar) {
  .cards, .list-view, .label-filters { scrollbar-width: auto; scrollbar-color: auto; }
  .cards::-webkit-scrollbar-track, .list-view::-webkit-scrollbar-track { background: #f0f4f1; border-radius: 10px; }
}
dialog { overflow-y: auto; overscroll-behavior: contain; }
.toast { bottom: 14px; padding: 11px 17px; font-size: 12px; }

@media (max-width: 820px) {
  :root { --viewport-pad: 6px; }
  .app-shell { padding: 8px; border-radius: 20px; }
  .topbar { grid-template-columns: 1fr auto; min-height: 0; padding: 8px 10px; gap: 5px 12px; border-radius: 19px; }
  .brand { font-size: 20px; }
  .brand-icon { width: 25px; height: 25px; }
  .brand-icon svg { width: 17px; height: 17px; }
  .top-actions .icon-button { width: 28px; height: 28px; }
  .profile-avatar { width: 27px; height: 27px; }
  .top-nav { padding: 2px; }
  .top-nav button { min-height: 29px; padding: 5px; font-size: 11px; gap: 6px; }
  .workspace-layout { display: flex; flex-direction: column; padding-top: 8px; gap: 0; }
  .sidebar { display: none; }
  .page-content { flex: 1; padding: 0; }
  .heading { flex-direction: row; align-items: center; min-height: 32px; margin-bottom: 8px; gap: 8px; }
  .heading h1 { font-size: 21px; line-height: 1.2; letter-spacing: -.7px; }
  .heading h1 > span { display: none; }
  .create-button { min-height: 32px; width: auto; padding: 7px 11px; font-size: 11px; gap: 5px; }
  .overview { grid-template-columns: 1fr; height: 53px; gap: 0; margin-bottom: 8px; }
  .focus-card { min-height: 0; padding: 7px 12px; gap: 2px 8px; border-radius: 15px; }
  .focus-card > strong { font-size: 14px; line-height: 1.25; padding: 0; }
  .focus-label { padding: 0; font-size: 11px; }
  #focus-tag { max-width: 105px; }
  #focus-tag .task-label { font-size: 10px; }
  .focus-arrow { width: 25px; height: 25px; }
  .progress-panel { display: none; }
  .toolbar { display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap; min-height: 35px; margin-bottom: 6px; gap: 6px; }
  .toolbar-left { flex: 0 0 auto; gap: 0; }
  .toolbar-left .board-heading { display: none; }
  .view-switch { padding: 3px; }
  .view-switch button { width: 29px; height: 29px; }
  .toolbar-right { flex: 1; width: auto; gap: 6px; min-width: 0; }
  .search { flex: 1; min-width: 0; min-height: 35px; padding: 7px 9px; gap: 5px; }
  .search input { width: 100%; min-width: 0; font-size: 16px; }
  .search svg { width: 14px; height: 14px; }
  .toolbar .icon-button { width: 35px; height: 35px; }
  .data-menu { top: 41px; }
  .label-filterbar { display: flex; height: 38px; margin-bottom: 6px; gap: 6px; }
  .label-filters { gap: 5px; }
  .label-filter { min-height: 30px; padding: 6px 9px; font-size: 11px; }
  .manage-labels { min-width: 33px; min-height: 33px; padding: 8px; margin: 0; }
  .manage-labels-text { display: none; }
  .manage-labels svg { width: 16px; height: 16px; }
  .mobile-status-tabs { height: 36px; margin-bottom: 7px; padding: 3px; gap: 3px; border-radius: 20px; }
  .mobile-status-tabs button { min-height: 30px; padding: 5px 3px; font-size: 12px; }
  .board { display: flex; flex-direction: column; min-height: 0; }
  .column { min-height: 0; height: 100%; padding: 8px 5px 5px; background: var(--paper); border-radius: 16px; }
  .column:not(.mobile-active) { display: none; }
  .column-header { display: none; }
  .cards { min-height: 0; gap: 7px; padding: 2px 3px 3px; }
  .task-card { padding: 11px 12px; gap: 6px; border-radius: 13px; background: var(--wash); }
  .task-card h3 { font-size: 13px; }
  .task-card p { font-size: 11px; }
  .task-card .task-label, .card-priority { font-size: 11px; }
  .card-date { font-size: 11px; }
  .empty-column { min-height: 0; padding: 12px; background: transparent; }
  .empty-column strong { font-size: 12px; }
  .empty-column p { font-size: 11px; }
  .add-column { min-height: 31px; padding: 8px 3px 2px; font-size: 12px; }
  .statusbar { margin-top: 6px; gap: 7px; }
  .board-bottom, .board-footer { margin: 0; font-size: 10px; }
  .progress-track { width: 25px; }
  .board-footer { flex-wrap: nowrap; width: auto; }
  .list-view { min-height: 0; padding: 4px 10px; }
  .list-task { padding-top: 9px; padding-bottom: 9px; gap: 6px 9px; }
}

@media (pointer: coarse) {
  .top-actions .icon-button { min-width: 36px; min-height: 36px; }
  .top-nav button { min-height: 36px; }
  .create-button { min-height: 40px; }
  .view-switch button { min-width: 36px; min-height: 38px; }
  .toolbar .icon-button, .search { min-height: 42px; min-width: 42px; }
  .label-filterbar { height: 49px; }
  .label-filter, .manage-labels { min-height: 40px; }
  .manage-labels { min-width: 40px; }
  .mobile-status-tabs { height: 46px; }
  .mobile-status-tabs button { min-height: 40px; }
  .add-column { min-height: 36px; }
}

@media (max-height: 650px) and (min-width: 821px) {
  :root { --viewport-pad: 6px; }
  .app-shell { padding: 8px; }
  .topbar { min-height: 44px; padding-top: 4px; padding-bottom: 4px; }
  .workspace-layout { padding-top: 8px; }
  .heading { margin-bottom: 7px; min-height: 30px; }
  .heading h1 { font-size: 22px; }
  .overview { height: 53px; margin-bottom: 7px; }
  .focus-card, .progress-panel { padding-top: 6px; padding-bottom: 6px; }
  .focus-card > strong { font-size: 14px; }
  .progress-ring { width: 36px; height: 36px; }
  .progress-ring > strong { width: 28px; height: 28px; font-size: 10px; }
  .progress-numbers strong { font-size: 21px; }
  .statusbar { margin-top: 5px; }
}
@media (max-height: 580px) and (max-width: 820px), (max-height: 480px) {
  .overview { display: none; }
  .heading { margin-bottom: 6px; }
}
@media (max-height: 480px) and (max-width: 820px) {
  .topbar { display: flex; min-height: 34px; padding: 4px 6px; gap: 6px; }
  .brand { font-size: 0; gap: 0; }
  .top-nav { flex: 1; min-width: 0; grid-column: auto; grid-row: auto; }
  .top-nav button { min-height: 27px; padding: 4px 3px; font-size: 10px; gap: 4px; }
  .top-actions .profile-avatar { display: none; }
  .top-actions .icon-button { min-width: 28px; min-height: 28px; width: 28px; height: 28px; }
  .workspace-layout { padding-top: 6px; }
  .heading { min-height: 28px; margin-bottom: 5px; }
  .heading h1 { font-size: 19px; }
  .create-button { min-height: 28px; padding: 6px 9px; }
  .toolbar { min-height: 31px; margin-bottom: 4px; }
  .view-switch button { min-width: 27px; min-height: 27px; width: 27px; height: 27px; }
  .search, .toolbar .icon-button { min-height: 31px; min-width: 31px; }
  .search { padding-top: 5px; padding-bottom: 5px; }
  .toolbar .icon-button { width: 31px; height: 31px; }
  .label-filterbar { height: 34px; margin-bottom: 4px; }
  .label-filter, .manage-labels { min-height: 28px; }
  .manage-labels { min-width: 30px; padding: 6px; }
  .mobile-status-tabs { height: 32px; margin-bottom: 5px; }
  .mobile-status-tabs button { min-height: 26px; padding: 3px; }
  .statusbar { margin-top: 4px; }
}