/* ToDoitLater — Apple Store–flavored, flat design */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: #fbfbfd;
  color: #1d1d1f;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
}
.muted { color: #a1a1a6; font-weight: 400; }
a { text-decoration: none; }

/* ---------- buttons / pills ---------- */
.btn {
  display: inline-block; cursor: pointer; text-align: center;
  font-size: 13px; font-weight: 600; padding: 11px 20px; border-radius: 999px;
  border: none; transition: opacity .15s;
}
.btn:hover { opacity: .88; }
.btn-block { display: block; width: 100%; margin-top: 10px; }
.btn-sm { padding: 8px 16px; font-size: 12px; border-radius: 12px; }
.btn-primary { background: #0071e3; color: #fff; }
.btn-secondary { background: #f5f5f7; color: #1d1d1f; }

/* ---------- login ---------- */
.login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card { width: 100%; max-width: 340px; text-align: center; }
.login-card h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin: 14px 0 4px; }
.fine-print { font-size: 11px; color: #a1a1a6; margin-top: 18px; line-height: 1.5; }

.auth-tabs { display: flex; background: #f5f5f7; border-radius: 12px; padding: 3px; margin: 18px 0 14px; }
.auth-tab {
  flex: 1; text-align: center; padding: 8px 0; font-size: 12.5px; font-weight: 600; color: #6e6e73;
  border-radius: 9px; cursor: pointer; transition: background .15s, color .15s;
}
.auth-tab.active { background: #fff; color: #1d1d1f; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.auth-input {
  width: 100%; padding: 12px 14px; margin-top: 8px; border-radius: 12px;
  border: 1px solid #e5e5e7; background: #fff; font-size: 14px; font-family: inherit;
  color: #1d1d1f; outline: none;
}
.auth-input:focus { border-color: #0071e3; }
.auth-error {
  background: #fde8e6; color: #b42318; font-size: 12px; font-weight: 500;
  border-radius: 10px; padding: 9px 12px; margin-top: 4px; text-align: left; line-height: 1.4;
}
.auth-forgot { font-size: 12px; color: #0071e3; margin-top: 14px; cursor: pointer; text-align: center; }
.auth-forgot:hover { text-decoration: underline; }

/* ---------- logo ---------- */
.logo-mark {
  width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0;
  background: linear-gradient(135deg, #0071e3, #1d1d1f);
  display: flex; align-items: center; justify-content: center;
}
.logo-mark-lg { width: 46px; height: 46px; border-radius: 14px; margin: 0 auto; }

/* ---------- top bar ---------- */
.topbar {
  background: rgba(255,255,255,0.85); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding: 0 28px; height: 52px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 10;
}
.topbar-left { display: flex; align-items: center; gap: 34px; height: 100%; }
.brand { display: flex; align-items: center; gap: 8px; }
.wordmark { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.nav-tabs { display: flex; align-items: center; gap: 24px; height: 100%; }
.nav-tab {
  cursor: pointer; font-size: 12px; font-weight: 500; color: #6e6e73;
  height: 100%; display: flex; align-items: center;
  border-bottom: 2px solid transparent; box-sizing: border-box;
}
.nav-tab.active { color: #1d1d1f; font-weight: 600; border-bottom-color: #1d1d1f; }
.avatar {
  width: 26px; height: 26px; border-radius: 50%; background: #1d1d1f; color: #fff;
  font-size: 10px; font-weight: 600; display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
}
.avatar-lg { width: 56px; height: 56px; font-size: 18px; margin: 0 auto 12px; }

/* ---------- layout ---------- */
.page { max-width: 1080px; margin: 0 auto; padding-bottom: 40px; }
.page-header { padding: 30px 28px 6px; }
.eyebrow { font-size: 13px; font-weight: 600; color: #6e6e73; margin-bottom: 4px; }
.page-title { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.bento-row { padding: 14px 28px 0; display: flex; gap: 14px; flex-wrap: wrap; }
.section { padding: 20px 28px 0; }
.section-title { font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.section-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; flex-wrap: wrap; gap: 10px; }

/* ---------- cards ---------- */
.card {
  flex: 1; min-width: 280px; background: #fff; border: 1px solid rgba(0,0,0,0.06);
  border-radius: 20px; padding: 20px 22px;
}
.card-tinted { background: #f5f5f7; border-color: transparent; }
.card-title { font-size: 13px; font-weight: 600; margin-bottom: 12px; }

/* ---------- today card ---------- */
.today-card { flex: 1.6; min-width: 320px; background: #1d1d1f; border-radius: 22px; padding: 22px 24px; color: #fff; }
.today-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.today-title { font-size: 14px; font-weight: 600; }
.today-count { font-size: 11px; color: #a1a1a6; }
.sync-note { font-size: 10.5px; color: #8e8e93; margin-top: 10px; }

/* ---------- stats ---------- */
.stats-grid { flex: 1; min-width: 220px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat-tile { cursor: pointer; border-radius: 18px; padding: 16px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.stat-num { font-size: 24px; font-weight: 700; }
.stat-label { font-size: 10.5px; font-weight: 600; }

/* ---------- task rows ---------- */
.task-row {
  background: #fff; border: 1px solid #f0f0f1; border-radius: 13px; padding: 11px 13px;
  margin-bottom: 8px; display: flex; align-items: center; gap: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04); font-size: 12.5px;
}
.task-row.done { background: #fafafa; }
.task-row.done .task-text { text-decoration: line-through; color: #a1a1a6; }
.task-row-dark { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 13px; }
.task-row-dark.done .task-text { text-decoration: line-through; color: #8e8e93; }
.task-text { flex: 1; color: #1d1d1f; }
.task-row-dark .task-text { color: #fff; }
.due-badge { font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: #f5f5f7; color: #6e6e73; white-space: nowrap; }
.due-badge.overdue { background: #fde8e6; color: #d70015; }
.proj-pill { font-size: 10.5px; color: #a1a1a6; white-space: nowrap; }
.delete-x { cursor: pointer; color: #c7c7cc; font-size: 13px; padding: 2px 4px; flex-shrink: 0; }
.confirm-row { border-radius: 12px; padding: 10px 14px; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fde8e6; }
.confirm-row.dark { background: rgba(215,0,21,0.18); }
.confirm-text { font-size: 12px; color: #b42318; }
.confirm-row.dark .confirm-text { color: #ffb4ab; }

/* ---------- project cards (dashboard) ---------- */
.project-cards { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.project-card {
  cursor: pointer; flex: 0 0 auto; width: 150px; background: #f5f5f7; border-radius: 18px; padding: 14px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.project-card-name { font-size: 12px; font-weight: 600; text-align: center; }
.project-card-meta { font-size: 10.5px; font-weight: 600; color: #6e6e73; }
.project-card-meta.overdue { color: #d70015; }

/* ---------- browse by day ---------- */
.range-pills span {
  cursor: pointer; font-size: 11px; font-weight: 600; padding: 6px 12px; border-radius: 999px;
  background: #f5f5f7; color: #1d1d1f; margin-left: 6px;
}
.range-pills span.active { background: #1d1d1f; color: #fff; }
.custom-range-box { display: none; align-items: center; gap: 8px; margin-bottom: 12px; }
.custom-range-box input[type="date"] { font-size: 12px; padding: 6px 10px; border-radius: 8px; border: 1px solid #d2d2d7; }
.day-chart-wrap { background: linear-gradient(180deg,#f0f0f2,#e8e8ea); border-radius: 20px; padding: 18px 18px 8px; }
.day-chart, .due-chart { display: flex; align-items: flex-end; gap: 8px; height: 80px; overflow-x: auto; }
.due-chart { gap: 16px; height: 96px; }
.day-col { cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px; flex-shrink: 0; }
.day-bar { width: 22px; border-radius: 5px; background: #d2d2d7; }
.day-bar.has { background: #1d1d1f; }
.day-bar.today { background: #1d1d1f; }
.day-bar.selected { background: #0071e3; box-shadow: 0 3px 8px rgba(0,113,227,0.35); }

/* ---------- My Tasks page ---------- */
.chips-row { padding: 0 28px; display: flex; gap: 8px; flex-wrap: wrap; }
.chip { cursor: pointer; font-size: 12px; font-weight: 600; padding: 7px 14px; border-radius: 999px; background: #f5f5f7; color: #1d1d1f; }
.chip.active { background: #1d1d1f; color: #fff; }
.chip.add-new { background: transparent; border: 1.5px dashed #c7c7cc; color: #6e6e73; }
.add-project-form { display: none; align-items: center; gap: 8px; margin: 12px 28px 0; }
.add-project-form input { flex: 1; max-width: 260px; font-size: 12.5px; padding: 9px 12px; border-radius: 12px; border: 1px solid #e5e5e7; }
.my-tasks-list { padding: 10px 28px 40px; }
.project-block { position: relative; margin-top: 26px; }
.project-badge {
  position: absolute; top: -13px; left: 22px; background: #fbfbfd; padding: 3px 14px; border-radius: 8px;
  border: 1.5px solid; font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
}
.project-body { background: #fff; border: 1.5px solid #e5e5e7; border-radius: 22px; padding: 28px 20px 18px; box-shadow: 0 6px 20px rgba(0,0,0,0.05); }
.project-body-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.project-open-count { font-size: 11px; color: #a1a1a6; font-weight: 600; }
.delete-project-link { cursor: pointer; font-size: 10.5px; color: #a1a1a6; font-weight: 600; }
.add-task-row { display: flex; gap: 8px; margin-top: 14px; }
.add-task-row input { font-size: 12.5px; padding: 9px 12px; border-radius: 12px; border: 1px solid #e5e5e7; background: #fafafa; }
.add-task-row input.text { flex: 1; }
.add-task-row input.date { width: 130px; }
.empty-note { font-size: 12px; color: #a1a1a6; font-style: italic; padding: 6px 2px 14px; }

.project-delete-confirm { background: #fff; border: 1.5px solid #f7c6c2; border-radius: 22px; padding: 28px 20px 22px; box-shadow: 0 6px 20px rgba(0,0,0,0.05); text-align: center; }

.category-banner { display: flex; align-items: center; justify-content: space-between; margin: 16px 0 14px; }
.category-title { font-size: 14px; font-weight: 700; }
.clear-category { cursor: pointer; font-size: 11.5px; font-weight: 600; color: #0071e3; }
.category-card { background: #fff; border: 1.5px solid #e5e5e7; border-radius: 20px; padding: 16px 16px 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.05); }

/* ---------- account ---------- */
.account-card { max-width: 340px; margin: 20px 28px; text-align: center; }
.account-name { font-size: 16px; font-weight: 700; margin-bottom: 2px; }
.account-email { font-size: 13px; color: #6e6e73; margin-bottom: 8px; }
.account-role { font-size: 11px; font-weight: 600; color: #0071e3; margin-bottom: 18px; }

/* ---------- all team ---------- */
.team-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.team-table th { text-align: left; font-size: 10.5px; color: #a1a1a6; font-weight: 600; padding: 8px 10px; border-bottom: 1px solid #f0f0f1; }
.team-table td { padding: 9px 10px; border-bottom: 1px solid #f5f5f7; }

@media (max-width: 640px) {
  .topbar { padding: 0 16px; }
  .page-header, .bento-row, .section, .chips-row, .add-project-form, .my-tasks-list { padding-left: 16px; padding-right: 16px; }
}

/* ---------- edit (task text / due date / project name) ---------- */
.add-task-date-wrap { display: flex; flex-direction: column; gap: 3px; }
.add-task-label { font-size: 9.5px; font-weight: 600; color: #a1a1a6; text-transform: uppercase; letter-spacing: 0.02em; }
.edit-pencil { cursor: pointer; color: #c7c7cc; font-size: 12px; padding: 2px 4px; flex-shrink: 0; }
.task-row-dark .edit-pencil { color: #8e8e93; }
.editing { gap: 8px; }
.edit-text-input, .edit-date-input {
  font-size: 12.5px; padding: 8px 10px; border-radius: 10px; border: 1px solid #e5e5e7; background: #fff;
}
.task-row-dark .edit-text-input, .task-row-dark .edit-date-input { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); color: #fff; }
.edit-text-input { flex: 1; }
.project-head-actions { display: flex; align-items: center; gap: 12px; }

/* ================= v13 refresh: 3D depth, compact due-box, responsive task rows ================= */

.card, .project-body, .category-card, .account-card {
  background: linear-gradient(180deg, #ffffff, #fbfbfd);
  box-shadow: 0 14px 32px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
}
.today-card {
  background: linear-gradient(160deg, #28282c, #1d1d1f);
  box-shadow: 0 18px 36px rgba(0,0,0,0.25);
}
.stat-tile { box-shadow: 0 8px 18px rgba(0,0,0,0.06); transition: transform .12s; }
.stat-tile:active { transform: translateY(1px); }
.project-card { box-shadow: 0 8px 18px rgba(0,0,0,0.06); transition: transform .12s; }
.project-card:hover { transform: translateY(-2px); }

/* task rows: a main line (checkbox/text/edit/delete) + a meta line (project pill/due badge),
   stacked on narrow screens so the task name always gets priority width */
.task-row {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  background: linear-gradient(180deg,#ffffff,#fcfcfd);
  box-shadow: 0 6px 16px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}
.task-row-main { display: flex; align-items: center; gap: 10px; }
.task-row-main .task-text { flex: 1; min-width: 0; }
.task-row-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; padding-left: 26px; }
@media (min-width: 641px) {
  .task-row { flex-direction: row; align-items: center; gap: 10px; }
  .task-row-main { flex: 1; min-width: 0; }
  .task-row-meta { padding-left: 0; }
}

/* solid, clearly-visible project name badge */
.project-badge {
  color: #fff;
  font-weight: 700;
  box-shadow: 0 6px 14px rgba(0,0,0,0.2);
  max-width: calc(100% - 40px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: none;
}

/* compact due-date box, matched height with the text input + Add button */
.add-task-row { align-items: stretch; gap: 10px; }
.add-task-row input.text {
  height: 44px; box-sizing: border-box;
  background: linear-gradient(180deg,#ffffff,#fafafa);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
}
.due-box {
  height: 44px; box-sizing: border-box; flex: 0 0 118px; width: 118px;
  display: flex; align-items: center; gap: 5px;
  border: 1px solid #e5e5e7; border-radius: 12px; padding: 0 10px;
  background: linear-gradient(180deg,#ffffff,#fafafa);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
  overflow: hidden;
}
.due-box-label { font-size: 9.5px; font-weight: 700; color: #a1a1a6; text-transform: uppercase; letter-spacing: .03em; flex-shrink: 0; }
.due-box-input { height: 100%; box-sizing: border-box; border: none; background: transparent; font-size: 11.5px; flex: 1; min-width: 0; width: 100%; padding: 0; color: #1d1d1f; }
.add-task-btn {
  height: 44px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg,#1e8bff,#0071e3) !important;
  box-shadow: 0 6px 14px rgba(0,113,227,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
}

/* 3D day-chart bars */
.day-bar { border-radius: 6px 6px 3px 3px; position: relative; overflow: hidden; transform: perspective(200px) rotateX(10deg); box-shadow: 0 5px 12px rgba(0,0,0,0.15); }
.day-bar::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 45%; background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0)); }
.day-bar.has, .day-bar.today { background: linear-gradient(180deg,#3a3a3c,#1d1d1f); }
.day-bar.selected { background: linear-gradient(180deg,#3399ff,#0071e3); box-shadow: 0 8px 18px rgba(0,113,227,0.5); }
.day-chart-wrap { box-shadow: inset 0 2px 0 rgba(255,255,255,0.6), 0 14px 30px rgba(0,0,0,0.08); }

/* mobile: stack the add-task row so nothing overflows the card */
@media (max-width: 640px) {
  .add-task-row { flex-direction: column; align-items: stretch; }
  .add-task-row input.text { width: 100%; }
  .due-box { flex: none; width: 100%; }
  .add-task-btn { width: 100%; }
}

/* ================= v22: Dashboard "Where the work is" chart ================= */
.chart-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.chart-toggle { display: flex; gap: 4px; background: #fff; border-radius: 999px; padding: 3px; box-shadow: inset 0 1px 2px rgba(0,0,0,0.06); }
.chart-toggle-btn { cursor: pointer; font-size: 10.5px; font-weight: 700; padding: 6px 11px; border-radius: 999px; color: #6e6e73; }
.chart-toggle-btn.active { background: #1d1d1f; color: #fff; }
.work-chart { display: flex; flex-direction: column; }
.work-bar-row { cursor: pointer; margin-bottom: 13px; }
.work-bar-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; gap: 8px; }
.work-bar-name { font-size: 12px; font-weight: 600; color: #1d1d1f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62%; }
.work-bar-count { font-size: 10.5px; font-weight: 700; color: #6e6e73; flex-shrink: 0; white-space: nowrap; }
.work-bar-track { background: #e8e8ea; border-radius: 999px; height: 14px; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,0.08); }
.work-bar-fill { height: 100%; border-radius: 999px; transition: width .4s; }
.work-chart-hint { font-size: 10.5px; color: #a1a1a6; margin-top: 4px; }

/* ================= v22: My Tasks — date filter pills, project picker, quiet actions ================= */
.filter-label { font-size: 10.5px; font-weight: 700; color: #a1a1a6; letter-spacing: 0.03em; margin: 0 28px 6px; }
.filter-label:first-of-type { margin-top: 4px; }
.chips-row { margin-bottom: 18px; }

.project-row { display: flex; align-items: center; gap: 8px; padding: 0 28px; margin-bottom: 6px; }
.project-picker-wrap { position: relative; flex: 1; min-width: 0; }
.project-picker-btn {
  cursor: pointer; width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg,#ffffff,#fafafa); border: 1px solid #e5e5e7; border-radius: 13px;
  padding: 10px 14px; box-shadow: 0 6px 14px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.6);
}
.picker-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.picker-label { font-size: 13px; font-weight: 600; color: #1d1d1f; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picker-caret { color: #a1a1a6; font-size: 11px; flex-shrink: 0; }
.project-picker-panel {
  display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: rgba(255,255,255,0.95); backdrop-filter: blur(16px);
  border: 1px solid rgba(0,0,0,0.06); border-radius: 16px;
  box-shadow: 0 22px 44px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.06);
  padding: 10px; z-index: 30;
}
.project-picker-panel.open { display: block; }
.project-picker-panel input {
  width: 100%; box-sizing: border-box; font-size: 12.5px; padding: 9px 12px; border-radius: 10px;
  border: 1px solid #e5e5e7; background: #f5f5f7; color: #1d1d1f; margin-bottom: 8px;
}
.picker-list { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.picker-row { cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 8px 8px; border-radius: 9px; }
.picker-row:hover { background: #f5f5f7; }
.picker-row.active { background: #f0f6ff; }
.picker-row-name { flex: 1; min-width: 0; font-size: 12px; font-weight: 500; color: #1d1d1f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.picker-row.active .picker-row-name { font-weight: 700; }
.picker-row-count { font-size: 10px; color: #a1a1a6; font-weight: 600; flex-shrink: 0; }

.add-project-btn-quiet {
  cursor: pointer; flex-shrink: 0; display: flex; align-items: center; gap: 6px;
  height: 41px; box-sizing: border-box; padding: 0 14px; border-radius: 13px;
  border: 1.5px solid #e5e5e7; background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,0.05);
  font-size: 12.5px; font-weight: 600; color: #1d1d1f; white-space: nowrap;
}
.add-project-plus { font-size: 14px; color: #a1a1a6; line-height: 1; }

.add-task-ghost {
  cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 9px 4px;
  color: #8e8e93; font-size: 12.5px; font-weight: 500; margin-top: 4px;
}
.add-task-ghost-icon {
  width: 18px; height: 18px; border-radius: 6px; border: 1.5px dashed #c7c7cc;
  display: flex; align-items: center; justify-content: center; font-size: 12px; color: #a1a1a6; flex-shrink: 0;
}
.add-task-btn { background: #1d1d1f !important; color: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.18); }

/* compact due-box: min-height (not fixed) so native mobile date pickers have room without ballooning the row */
.due-box {
  min-height: 44px; box-sizing: border-box; flex: 0 0 118px; width: 118px;
  display: flex; align-items: center; gap: 5px;
  border: 1px solid #e5e5e7; border-radius: 12px; padding: 6px 10px;
  background: linear-gradient(180deg,#ffffff,#fafafa);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.04);
  overflow: hidden;
}
.due-box-input {
  height: 22px; line-height: 22px; box-sizing: border-box; border: none; background: transparent;
  font-size: 11.5px; flex: 1; min-width: 0; width: 100%; padding: 0; color: #1d1d1f;
}

@media (max-width: 640px) {
  .project-row { flex-direction: column; align-items: stretch; }
  .add-project-btn-quiet { width: 100%; justify-content: center; }
  .project-picker-panel { left: 0; right: 0; }
  .due-box { flex: none; width: 100%; min-height: 46px; }
}