:root {
  /* Palette: the same in both themes. Plain colours are named by hue and lightness
     (0 black, 1000 white). */
  --accent: #418dab;
  --accent-tint: #e6f2f7;
  --black: #000000;
  --danger: #c4403a;
  --danger-edge: rgba(207, 70, 70, .55);
  --danger-strong: #b4382f;
  --focus: #4790ad;
  --focus-glow: rgba(71, 144, 173, .18);
  --focus-glow-soft: rgba(71, 144, 173, .15);
  --link: #3f86a3;
  --milestone: #d4802c;
  --milestone-tint: #fbeedd;
  --phase-tint: #f1eefb;
  --phase-tint-strong: #e9e4f9;
  --shade-05: rgba(20, 30, 40, .05);
  --shade-08: rgba(20, 30, 40, .08);
  --shade-18: rgba(20, 30, 40, .18);
  --shade-30: rgba(20, 40, 60, .3);
  --subtask: #8cc3da;
  --subtask-fill: #cbe5f1;
  --subtask-text: #173a4b;
  --success: #2fa36b;
  --white: #ffffff;
  --blue-927: #e3f0f6;
  --blue-937: #e3eefb;
  --green-324: #23824f;
  --green-922: #e2f4ea;
  --amber-922: #fcefd2;
  --grey-80: #121417;
  --grey-90: #14171a;
  --grey-124: #1b1f24;
  --grey-182: #2a2e33;
  --grey-255: #3a4048;
  --grey-320: #4a5159;
  --grey-451: #6b727b;
  --grey-514: #7b828b;
  --grey-633: #9aa1a9;
  --grey-696: #a9b1ba;
  --grey-714: #b0b5bc;
  --grey-790: #c3c9d0;
  --grey-829: #cdd3da;
  --grey-853: #d3d9e0;
  --grey-857: #d5dae0;
  --grey-884: #dde1e6;
  --grey-904: #e3e6ea;
  --grey-906: #e3e7eb;
  --grey-916: #e6e9ed;
  --grey-931: #e9eef2;
  --grey-937: #eceff2;
  --grey-945: #eef1f4;
  --grey-951: #f0f2f5;
  --grey-955: #f1f3f6;
  --grey-957: #f2f4f6;
  --grey-965: #f4f6f8;
  --grey-969: #f5f7f9;
  --grey-971: #f6f7f9;
  --grey-984: #fafbfc;
  --purple-261: #2d2560;
  --purple-753: #a596ea;
  --purple-916: #e2dcf7;
  --purple-947: #ece8fb;
  /* Icons (Lucide) for CSS: white ticks on coloured fills, and masks that take currentColor */
  --icon-check-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E");
  --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  --icon-slash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 2 22'/%3E%3C/svg%3E");
  /* Theme: light values here, dark values under [data-theme="dark"] below. Numbered
     families run from the strongest (text) or the page colour outward (surfaces, lines). */
  --surface: #ffffff;
  --surface-1: #fafbfc;
  --surface-2: #fafbfc;
  --surface-3: #f8f9fb;
  --surface-4: #f6f7f9;
  --surface-5: #f6f7f9;
  --surface-6: #f2f4f6;
  --surface-7: #f2f4f6;
  --surface-8: #eef2f6;
  --surface-9: #eef1f4;
  --surface-10: #e6edf2;
  --raised: #ffffff;
  --line-1: #eceff2;
  --line-2: #e3e6ea;
  --line-3: #e3e6ea;
  --line-4: #e2e6eb;
  --line-5: #dde1e6;
  --line-6: #a9b1ba;
  --dep-line: #b3bbc4;
  --dep-arrow: #9aa3ad;
  --text-1: #121417;
  --text-2: #14171a;
  --text-3: #1b1f24;
  --text-4: #1b1f24;
  --text-5: #2d3238;
  --text-6: #3a4048;
  --text-7: #4a5159;
  --text-8: #4a5159;
  --text-9: #4a5159;
  --text-10: #5a6169;
  --text-11: #5a6169;
  --text-12: #5d646d;
  --text-13: #6b727b;
  --text-14: #6b727b;
  --text-15: #6b737c;
  --text-faint: #656c75;
  --on-strong: #ffffff;
  --accent-line: #b9d8e5;
  --accent-surface: #eef5f8;
  --accent-text-1: #2f6f89;
  --accent-text-2: #2c64b3;
  --accent-text-3: #3f86a3;
  --accent-text-4: #3f86a3;
  --phase-text: #2d2560;
  --danger-line: #f3cdca;
  --danger-surface: #fdf0ef;
  --danger-text-1: #8d2b25;
  --danger-text-2: #b4382f;
  --shadow: rgba(20, 30, 40, .08);
  --shadow-strong: rgba(20, 30, 40, .16);
}

[data-theme="dark"] {
  --surface: #131619;
  --surface-1: #15181b;
  --surface-2: #16191c;
  --surface-3: #15181b;
  --surface-4: #0f1214;
  --surface-5: #15181b;
  --surface-6: #20242a;
  --surface-7: #22262b;
  --surface-8: #181c20;
  --surface-9: #22262b;
  --surface-10: #262b31;
  --raised: #181b1f;
  --line-1: #2b3036;
  --line-2: #262b31;
  --line-3: #2b3036;
  --line-4: #2b3036;
  --line-5: #2b3036;
  --line-6: #5a6169;
  --dep-line: #4d555e;
  --dep-arrow: #6a737d;
  --text-1: #f1f3f5;
  --text-2: #f1f3f5;
  --text-3: #f1f3f5;
  --text-4: #e4e7ea;
  --text-5: #d5d9de;
  --text-6: #c9ced4;
  --text-7: #c9ced4;
  --text-8: #aab1b9;
  --text-9: #9aa1a9;
  --text-10: #c9ced4;
  --text-11: #9aa1a9;
  --text-12: #9aa1a9;
  --text-13: #9aa1a9;
  --text-14: #8a919a;
  --text-15: #9aa1a9;
  --text-faint: #9aa1a9;
  --on-strong: #121417;
  --accent-line: #2b4c5a;
  --accent-surface: #1d3440;
  --accent-text-1: #8fcbe2;
  --accent-text-2: #86b4ef;
  --accent-text-3: #7fb6cc;
  --accent-text-4: #6fb6d2;
  --phase-text: #c9c1f5;
  --danger-line: #5c2a26;
  --danger-surface: #3a1c1a;
  --danger-text-1: #f4bdb7;
  --danger-text-2: #f0a39d;
  --shadow: rgba(0, 0, 0, .3);
  --shadow-strong: rgba(0, 0, 0, .5);
}

/* Item kinds are short modifier classes wherever an item is drawn: ph phase, ms milestone,
   tk task, sub subtask. The calendar uses k-task, k-milestone, k-phase and k-sub, and the
   list l-ph, l-ms, l-sub and l-top. */
/* On iPhones, keep clear of the notch, the rounded corners and the home bar. The insets are 0
   on every other screen. */
body {
  margin: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  -webkit-text-size-adjust: 100%;
  background: var(--white);
}

a {
  color: #3f6f86;
}

a:hover {
  color: #1f4b5f;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

.app {
  font-family: Inter, system-ui, -apple-system, Segoe UI, sans-serif;
  color: var(--text-4);
  background: var(--white);
  height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  min-height: 640px;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 20px 10px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  white-space: nowrap;
  min-width: 0;
}

.breadcrumb .crumb-home {
  color: var(--grey-451);
}

.breadcrumb .sep {
  color: #a3a9b1;
}

.breadcrumb .name {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-wrap {
  position: relative;
  display: inline-flex;
  min-width: 0;
}

button.name {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 320px;
  margin: 0 -4px;
  padding: 3px 6px;
  border: 0;
  border-radius: 6px;
  background: none;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

button.name::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  background: var(--text-faint);
  -webkit-mask: var(--icon-chevron-down) center / contain no-repeat;
  mask: var(--icon-chevron-down) center / contain no-repeat;
}

button.name:hover,
button.name[aria-expanded="true"] {
  background: var(--grey-951);
}

button.name:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 19px;
  padding: 0 7px;
  border-radius: 4px;
  background: #e8f3f7;
  border: 1px solid #c9e1ea;
  color: #356f86;
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .06em;
}

.tools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border-radius: 7px;
  border: 1px solid var(--line-5);
  background: var(--raised);
  color: var(--text-4);
  font: 500 11.5px Inter, system-ui, sans-serif;
  cursor: pointer;
  white-space: nowrap;
}

.btn:hover:not(:disabled) {
  background: var(--grey-971);
}

.btn svg {
  width: 13px;
  height: 13px;
}

.shortcut {
  font-family: "JetBrains Mono", monospace;
  font-size: 9.5px;
  color: var(--text-faint);
  background: var(--surface-7);
  border: 1px solid var(--grey-904);
  border-radius: 4px;
  padding: 1px 4px;
}

.btn-group {
  display: inline-flex;
  border: 1px solid var(--line-5);
  border-radius: 7px;
  overflow: hidden;
  height: 30px;
}

.btn-group button {
  width: 30px;
  border: 0;
  background: var(--white);
  color: var(--grey-255);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.btn-group button+button {
  border-left: 1px solid var(--grey-916);
}

.btn-group button:disabled {
  color: #b8bdc4;
  cursor: not-allowed;
}

.btn-group svg {
  width: 13px;
  height: 13px;
}

.stack {
  display: flex;
  align-items: center;
  padding: 0 4px;
}

.stack[hidden] {
  display: none;
}

.avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font: 700 9.5px Inter, sans-serif;
  border: 2px solid var(--white);
  margin-left: -6px;
  flex: none;
}

.stack .avatar:first-child {
  margin-left: 0;
}

.more {
  font-size: 10.5px;
  color: var(--text-12);
  margin-left: 4px;
  font-weight: 500;
}

.primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 13px;
  border-radius: 7px;
  border: 0;
  background: var(--text-1);
  color: var(--on-strong);
  font: 600 11.5px Inter, system-ui, sans-serif;
  cursor: pointer;
  white-space: nowrap;
}

.primary:hover:not(:disabled) {
  background: var(--grey-182);
}

.primary svg {
  width: 14px;
  height: 14px;
}

.panel {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: 0 20px;
  border: 1px solid #e2e6eb;
  border-radius: 9px;
  display: flex;
  overflow: hidden;
  background: var(--surface);
}

.rail {
  width: 38px;
  flex: none;
  border-right: 1px solid #e6e9ee;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 0 10px;
  gap: 2px;
  background: var(--surface);
}

.logo {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: var(--text-1);
  color: var(--on-strong);
  font: 800 11px Inter, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.rail-btn {
  position: relative;
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  color: var(--text-9);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.rail-btn:hover:not(:disabled) {
  color: var(--grey-80);
  background: var(--grey-969);
}

.rail-btn svg {
  width: 16px;
  height: 16px;
}

.rail-btn.on {
  color: var(--grey-80);
}

.rail-btn.on::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 2px;
  border-radius: 2px;
  background: #3f8aa8;
}

.rail .spacer {
  flex: 1;
}

.rail .avatar {
  margin: 0 0 8px;
  border: 0;
  width: 20px;
  height: 20px;
}

/* Task list panel: a 24px gutter holding the arrow when closed, a 260px list when open.
   Its header matches the chart header height and its rows sit on the chart's 34px row
   grid (two empty rows first, where the Today button sits) so each row lines up with its bar. */
.task-panel {
  width: 24px;
  flex: none;
  border-right: 1px solid var(--grey-916);
  background: var(--surface-5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width .18s ease;
}

.task-panel.open {
  width: 260px;
}

.task-panel-head {
  height: 41px;
  flex: none;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.task-panel.open .task-panel-head {
  align-items: center;
  padding-left: 12px;
  border-bottom: 1px solid var(--line-3);
}

.task-panel-title {
  display: none;
  flex: 1;
  font: 700 10px Inter, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-5);
}

.task-panel.open .task-panel-title {
  display: block;
}

.task-panel .caret {
  width: 23px;
  height: 24px;
  flex: none;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-14);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.task-panel .caret:hover {
  background: var(--surface-6);
  color: var(--text-1);
}

.task-panel .caret svg {
  transition: transform .18s ease;
}

.task-panel.open .caret svg {
  transform: rotate(180deg);
}

.task-panel-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
}

.task-panel.open .task-panel-body {
  visibility: visible;
}

.task-panel-rows {
  width: 260px;
  padding-top: 34px;
  background-image: repeating-linear-gradient(180deg, transparent 0 33px, #eaedf0 33px 34px);
}

.task-row {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px 0 12px;
  font-size: 11.5px;
  color: var(--grey-124);
  white-space: nowrap;
}

.task-row .row-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-row .row-icon {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--c, var(--accent));
}

.task-row.top .row-name {
  font-weight: 600;
}

.task-row.sub {
  padding-left: 28px;
}

.task-row.sub .row-name {
  color: var(--text-6);
}

.task-row.sub .row-icon {
  background: transparent;
  border: 1.5px solid var(--subtask);
  border-color: color-mix(in srgb, var(--c, var(--accent)) 55%, var(--white));
}

.task-row.ms .row-icon {
  width: 8px;
  height: 8px;
  border-radius: 1.5px;
  background: var(--milestone);
  transform: rotate(45deg);
}

.task-row.ph {
  font: 700 10.5px Inter, sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--purple-261);
  background: var(--phase-tint);
  border-top: 1px solid var(--purple-916);
}

.task-row.ph[data-id]:hover {
  background: var(--phase-tint-strong);
}

.task-row.ph .row-icon {
  width: 12px;
  height: 12px;
  background: var(--white);
  border: 2px solid var(--c, var(--purple-753));
}

.task-row .meta {
  flex: none;
  font: 400 10px "JetBrains Mono", monospace;
  color: var(--text-faint);
}

.task-row.empty {
  margin-top: -34px;
  color: var(--text-faint);
  font-style: italic;
}

.task-row[data-id] {
  cursor: pointer;
}

.task-row[data-id]:hover {
  background: var(--grey-945);
}

.task-row[data-id]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.task-row.add {
  cursor: pointer;
  color: var(--text-faint);
}

.task-row.add>* {
  opacity: 0;
  transition: opacity .12s;
}

.task-row.add .row-icon {
  width: 12px;
  height: 12px;
  margin-left: -2.5px;
  border: 1.5px dashed var(--grey-696);
  background: none;
  box-sizing: border-box;
  position: relative;
}

.task-row.add .row-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grey-514);
  -webkit-mask: var(--icon-plus) center / 9px no-repeat;
  mask: var(--icon-plus) center / 9px no-repeat;
}

.task-row.add:hover,
.task-row.add:focus-visible {
  background: var(--grey-945);
  color: var(--link);
  box-shadow: inset 0 0 0 1px #dfe4e9;
  outline: 0;
}

.task-row.add:hover>*,
.task-row.add:focus-visible>* {
  opacity: 1;
}

.task-row.add:hover .row-icon {
  border-color: var(--link);
}

.task-row.add:hover .row-icon::before {
  background: var(--accent-text-3);
}

.task-row .more {
  display: none;
  flex: none;
  width: 24px;
  height: 22px;
  margin-right: -4px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--text-12);
  cursor: pointer;
}

.task-row .more svg {
  width: 15px;
  height: 15px;
}

.task-row .more:hover {
  background: #dde2e8;
  color: var(--text-4);
}

.task-row[data-id]:hover .more,
.task-row[data-id]:focus-visible .more {
  display: grid;
}

.task-row[data-id]:hover .meta,
.task-row[data-id]:focus-visible .meta {
  display: none;
}

.task-row.empty button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-style: normal;
  font-weight: 600;
  color: var(--link);
  cursor: pointer;
}

.task-row.empty button:hover {
  text-decoration: underline;
}

/* Dragging rows to reorder: the picked-up rows dim and a line shows where they'll land */
.task-panel-rows {
  position: relative;
  user-select: none;
}

.task-row.lifted {
  opacity: .35;
}

.sort-line {
  position: absolute;
  left: 8px;
  right: 8px;
  height: 2px;
  margin-top: -1px;
  background: var(--focus);
  border-radius: 1px;
  pointer-events: none;
}

.sort-line::before {
  content: "";
  position: absolute;
  left: -3px;
  top: -3px;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  border: 2px solid var(--focus);
  border-radius: 50%;
  background: var(--surface-5);
}

.sort-line.sub {
  left: 26px;
}

.task-panel.sorting,
.task-panel.sorting * {
  cursor: grabbing!important;
  user-select: none;
}

.task-panel.sorting .task-row[data-id]:hover {
  background: none;
}

.scroll {
  flex: 1;
  min-width: 0;
  overflow: auto;
  position: relative;
  overscroll-behavior-x: contain;
  cursor: grab;
}

.scroll.dragging {
  cursor: grabbing;
  user-select: none;
}

/* Hide the sideways scrollbar (the timeline is endless); keep a slim vertical one */
.scroll::-webkit-scrollbar {
  width: 8px;
  height: 0;
}

.scroll::-webkit-scrollbar-thumb {
  background: var(--grey-857);
  border-radius: 4px;
}

/* Width and --week (px per week) are set by js/app/timeline.js as the timeline grows */
.chart {
  --week: 75px;
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.chart-head {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface);
}

.groups {
  display: flex;
  height: 17px;
  border-bottom: 1px solid var(--grey-937);
}

.group {
  flex: none;
  overflow: clip;
  white-space: nowrap;
  font: 700 9.5px "JetBrains Mono", monospace;
  letter-spacing: .09em;
  color: var(--text-5);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-left: 1px solid var(--line-3);
}

/* Group labels stick to the left edge so the current month/year stays readable */
.group span {
  position: sticky;
  left: 8px;
  padding: 0 6px;
}

.cols {
  display: flex;
  height: 24px;
  border-bottom: 1px solid var(--line-3);
}

.col {
  flex: none;
  overflow: hidden;
  font: 400 10px "JetBrains Mono", monospace;
  color: var(--text-11);
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid var(--grey-937);
  white-space: nowrap;
}

.body {
  position: relative;
  flex: 1 0 auto;
  min-height: 620px;
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(var(--week)*5/7), var(--surface-8) calc(var(--week)*5/7) var(--week));
}

.rows {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(180deg, transparent 0 33px, var(--grey-955) 33px 34px);
}

.grid-lines {
  position: absolute;
  inset: 0;
}

.grid-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #e1e5ea;
}

.plan {
  position: absolute;
  inset: 0;
}

/* Month, quarter and year views: no weekend shading; very narrow bars drop their label */
/* Weeks starting on Sunday: shade the first and last day of each week */
.chart[data-sunday]:not([data-noshade]):not([data-hours]) .body {
  background-image: repeating-linear-gradient(90deg, var(--surface-8) 0 calc(var(--week)/7), transparent calc(var(--week)/7) calc(var(--week)*6/7), var(--surface-8) calc(var(--week)*6/7) var(--week));
}

.chart[data-noshade] .body {
  background-image: none;
}

/* Hour view: a light shade outside 7am–6pm, with a stronger line between days */
.chart[data-hours] .body {
  background-image: linear-gradient(90deg, var(--surface-3) 0 calc(var(--day)*7/24), transparent calc(var(--day)*7/24) calc(var(--day)*.75), var(--surface-3) calc(var(--day)*.75));
  background-size: var(--day) 100%;
}

.grid-line.day {
  background: #c3cad2;
}

.grid-line.part {
  background: var(--grey-951);
}

.col.part {
  color: var(--grey-633);
  font-size: 9.5px;
  border-left-color: #f4f5f7;
}

.bar.tiny {
  padding: 0;
}

.bar.tiny>* {
  display: none;
}

/* Current period (today's column): highlighted header label and a line at its start */
.col.now span {
  background: var(--focus);
  color: var(--white);
  font-weight: 600;
  border-radius: 9px;
  padding: 2px 7px;
}

.now-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--focus);
}

.deps {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.deps g {
  stroke: var(--dep-line);
}

.deps marker path {
  stroke: var(--dep-arrow);
}

.bar {
  position: absolute;
  height: 20px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2px 0 8px;
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
}

.bar span.t {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bars take the task's colour (--c, set inline; blue by default). Subtasks use a light
   tint of it with dark text; the plain values first are for browsers without color-mix. */
.bar.solid {
  background: var(--c, var(--accent));
  color: var(--white);
  font-weight: 500;
}

.bar.tint {
  height: 18px;
  background: var(--subtask-fill);
  color: var(--subtask-text);
  font-weight: 600;
  font-size: 11px;
}

.bar.tint {
  background-color: color-mix(in srgb, var(--c, var(--accent)) 28%, var(--white));
  color: color-mix(in srgb, var(--c, var(--accent)) 40%, var(--black));
}

.diamond {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--milestone);
  transform: rotate(45deg);
  border-radius: 1.5px;
}

/* Sticky dock keeps the Today button on screen while the chart scrolls either way */
.dock {
  position: sticky;
  left: 0;
  top: 41px;
  width: 0;
  height: 0;
  z-index: 4;
}

.today {
  position: absolute;
  left: var(--dock-x, 24px);
  top: 5px;
  white-space: nowrap;
  height: 24px;
  padding: 0 11px;
  border-radius: 12px;
  border: 0;
  background: var(--focus);
  color: var(--white);
  font: 500 10.5px Inter, sans-serif;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(20, 40, 60, .18);
}

.today.here {
  background: var(--surface);
  color: var(--accent-text-3);
  box-shadow: inset 0 0 0 1.5px var(--focus);
}

/* Phases: a bolder label and line than tasks, and a tinted band behind their whole section */
.phase {
  position: absolute;
  left: 0;
  display: flex;
  text-transform: uppercase;
  align-items: center;
  gap: 7px;
  font: 700 11px Inter, sans-serif;
  letter-spacing: .05em;
  color: var(--purple-261);
}

.phase-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background: #bfb3f0;
  border-radius: 2px;
}

.bands {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.band {
  position: absolute;
  background: rgba(132, 88, 224, .055);
  border-left: 2px solid rgba(132, 88, 224, .3);
  border-radius: 0 6px 6px 0;
}

/* A milestone with a finish: a line from its start diamond to its finish diamond */
.milestone-link {
  position: absolute;
  height: 2px;
  background: #e3a76a;
  cursor: pointer;
}

/* Hovering empty chart space: a guide at the time a click would add something */
.ghost {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px dashed #8fbdd0;
  pointer-events: none;
}

.ghost span {
  position: absolute;
  left: 5px;
  transform: translateY(-50%);
  white-space: nowrap;
  height: 18px;
  line-height: 18px;
  padding: 0 7px;
  border-radius: 9px;
  background: var(--accent-tint);
  color: #2f6f89;
  font: 500 10px Inter, sans-serif;
}

.ghost[hidden],
.scroll.dragging .ghost {
  display: none;
}

/* Hold-to-move: an item darkens while held, then lifts once it can be dragged */
.plan .holding {
  filter: brightness(.85);
  transition: filter .4s linear;
}

/* A task at a moment (no finish): a ring at its time with the name beside it; filled with a tick when done */
.point {
  position: absolute;
  height: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-4);
}

.point i {
  flex: none;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid var(--c, var(--accent));
  background: var(--white);
  position: relative;
}

.point.tint i {
  border-color: var(--subtask);
  border-color: color-mix(in srgb, var(--c, var(--accent)) 55%, var(--white));
}

.point.tint .t {
  color: var(--grey-255);
  font-weight: 400;
}

.point.done i {
  background: var(--c, var(--accent));
}

.point.tint.done i {
  background: var(--subtask);
  background: color-mix(in srgb, var(--c, var(--accent)) 55%, var(--white));
}

.point.done i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--icon-check-white) center / 8px no-repeat;
}

.point.done .t {
  color: var(--text-faint);
  text-decoration: line-through;
}

.point:hover i {
  box-shadow: 0 0 0 2px var(--white), 0 0 0 3.5px var(--focus);
}

.point.fresh i {
  animation: fresh 1.4s ease-out 2;
}

.point.moving i {
  box-shadow: 0 4px 14px var(--shade-30);
}

.plan .point {
  cursor: pointer;
}

.plan .bar.moving,
.plan .diamond.moving {
  box-shadow: 0 4px 14px var(--shade-30);
  z-index: 2;
}

.plan .phase.moving {
  color: var(--link);
}

.scroll.moving,
.scroll.moving * {
  cursor: grabbing!important;
  user-select: none;
}

/* Item details popup */
.details {
  position: fixed;
  z-index: 30;
  width: min(280px, calc(100vw - 16px));
  background: var(--raised);
  color: var(--text-4);
  border: 1px solid var(--line-4);
  border-radius: 10px;
  box-shadow: 0 12px 32px var(--shadow-strong), 0 1px 3px var(--shadow);
  font: 400 12px Inter, system-ui, sans-serif;
}

.details[hidden] {
  display: none;
}

.details-head {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px 10px 8px 14px;
}

.details-icon {
  flex: none;
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-radius: 3px;
  background: var(--c, var(--accent));
}

.details-icon.milestone {
  background: var(--milestone);
  transform: rotate(45deg);
  border-radius: 1.5px;
}

.details-icon.phase {
  border-radius: 50%;
  background: var(--raised);
  border: 1.5px solid var(--c, #c7c1ec);
  width: 12px;
  height: 12px;
}

.details-title {
  flex: 1;
  min-width: 0;
}

.details-kind {
  display: block;
  font: 600 9.5px Inter, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.details-title h3 {
  margin: 2px 0 0;
  font: 600 13.5px Inter, system-ui, sans-serif;
  overflow-wrap: anywhere;
}

.details .close-btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin-top: -2px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #6b737c;
  cursor: pointer;
}

.details .close-btn:hover {
  background: var(--grey-957);
  color: var(--grey-124);
}

.details-body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 14px;
  margin: 0;
  padding: 4px 14px 12px;
}

.details-notes {
  max-height: 96px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.details-body dt {
  color: var(--text-faint);
  white-space: nowrap;
}

.details-body dd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  min-width: 0;
}

.progress-bar {
  width: 70px;
  height: 5px;
  border-radius: 3px;
  background: var(--surface-10);
  overflow: hidden;
}

.progress-bar b {
  display: block;
  height: 100%;
  background: var(--accent);
}

.details-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.details-link i {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--c, var(--accent));
}

.details-link i.ms {
  width: 6px;
  height: 6px;
  background: var(--milestone);
  transform: rotate(45deg);
  border-radius: 1px;
}

.details-foot {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--grey-937);
}

.details-foot .btn {
  height: 28px;
}

.details-foot .btn svg {
  flex: none;
}

/* Move up / Move down: arrows on the left, Edit on the right */
.details-foot [data-peek-move] {
  justify-content: center;
  width: 28px;
  padding: 0;
}

.details-foot [data-peek-move="1"] {
  margin-right: auto;
}

/* Completed: the same greens as the Done status in the list */
.details-foot [data-peek-done][aria-pressed="true"] {
  border-color: var(--green-324);
  background: var(--green-922);
  color: var(--green-324);
}

.details-foot .btn:disabled {
  opacity: .45;
  cursor: default;
}

.phase-cap {
  position: absolute;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  border: 2px solid var(--c, var(--purple-753));
  background: var(--surface);
  box-sizing: border-box;
  cursor: pointer;
}

.status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 20px 12px;
  font-size: 10.5px;
  color: var(--text-9);
}

.status-bar .l {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.status-bar b {
  font-weight: 600;
  color: var(--grey-124);
}

.status-bar .dot {
  color: var(--grey-714);
}

.status-bar .r {
  display: flex;
  gap: 10px;
  align-items: center;
}

.icon-btn {
  width: 24px;
  height: 24px;
  border: 0;
  background: transparent;
  color: var(--text-6);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 5px;
  font-size: 13px;
}

.icon-btn:hover:not(:disabled) {
  background: var(--surface-6);
}

.zoom {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: var(--text-6);
  min-width: 30px;
  text-align: center;
  height: 24px;
  padding: 0 4px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  cursor: pointer;
}

.zoom:hover,
.zoom[aria-expanded="true"] {
  background: var(--surface-6);
}

/* Zoom popup: opens upwards from the footer */
.zoom-wrap {
  position: relative;
}

.dropdown {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  z-index: 20;
  min-width: 132px;
  padding: 4px;
  background: var(--raised);
  border: 1px solid var(--line-4);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(20, 30, 40, .12), 0 1px 3px var(--shade-08);
}

.dropdown button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  height: 26px;
  padding: 0 8px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--grey-124);
  font: 500 11px Inter, system-ui, sans-serif;
  cursor: pointer;
  white-space: nowrap;
}

.dropdown button:hover,
.dropdown button:focus-visible {
  background: var(--grey-957);
  outline: 0;
}

.dropdown button[aria-checked="true"] {
  font-weight: 600;
}

.dropdown button[aria-checked="true"]::after {
  content: "";
  flex: none;
  width: 13px;
  height: 13px;
  background: var(--focus);
  -webkit-mask: var(--icon-check) center / contain no-repeat;
  mask: var(--icon-check) center / contain no-repeat;
}

.dropdown .dropdown-sep {
  height: 1px;
  margin: 4px 2px;
  background: var(--line-1);
}

/* Full-screen toggle: expand icon normally, collapse icon while full screen */
.icon-btn .icon-exit,
.icon-btn[aria-pressed="true"] .icon-enter {
  display: none;
}

.icon-btn[aria-pressed="true"] .icon-exit {
  display: block;
}

.scale-picker {
  display: inline-flex;
  border: 1px solid var(--line-5);
  border-radius: 6px;
  padding: 2px;
  gap: 1px;
}

.scale-picker button {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  font: 500 9.5px "JetBrains Mono", monospace;
  color: var(--grey-320);
  cursor: pointer;
}

.scale-picker button.on {
  background: var(--grey-80);
  color: var(--white);
}

/* Not built yet: greyed out until the feature is wired up */
button:disabled {
  cursor: not-allowed;
}

.btn:disabled,
.primary:disabled,
.rail-btn:disabled,
.icon-btn:disabled,
.today:disabled,
.scale-picker button:disabled {
  opacity: .35;
  filter: grayscale(1);
}

/* New task form */
.dialog {
  width: min(500px, calc(100vw - 32px));
  max-height: calc(100vh - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  padding: 0;
  border: 1px solid var(--line-4);
  border-radius: 12px;
  background: var(--raised);
  color: var(--text-4);
  font: 400 12px Inter, system-ui, sans-serif;
  box-shadow: 0 24px 60px var(--shade-18), 0 2px 6px var(--shade-08);
  -webkit-font-smoothing: antialiased;
}

.dialog::backdrop {
  background: rgba(18, 20, 23, .32);
}

.dialog form {
  display: flex;
  flex-direction: column;
  max-height: inherit;
}

.dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 4px;
}

.dialog-head h2 {
  margin: 0;
  font: 600 14px Inter, system-ui, sans-serif;
}

.dialog .close-btn {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--text-15);
  cursor: pointer;
}

.dialog .close-btn:hover {
  background: var(--surface-7);
  color: var(--grey-124);
}

.dialog-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 10px 16px 14px;
  overflow: auto;
}

.dialog-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--grey-937);
}

.kind {
  display: flex;
  border: 1px solid var(--line-5);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}

.kind label {
  flex: 1;
  position: relative;
}

.kind input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.kind span {
  display: block;
  height: 26px;
  line-height: 26px;
  text-align: center;
  border-radius: 6px;
  font-weight: 500;
  font-size: 11.5px;
  color: var(--grey-320);
  cursor: pointer;
}

.kind span:hover {
  background: var(--grey-971);
}

.kind input:checked+span {
  background: var(--grey-80);
  color: var(--white);
}

.kind input:focus-visible+span {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.field-label {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-weight: 600;
  font-size: 10.5px;
  color: var(--text-9);
}

.field-label em {
  font-style: normal;
  font-weight: 400;
  color: var(--text-faint);
}

.field-label output {
  margin-left: auto;
  font: 500 10px "JetBrains Mono", monospace;
  color: var(--grey-124);
}

.field-label .clear-btn {
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  font: 500 10.5px Inter, sans-serif;
  color: var(--accent-text-3);
  cursor: pointer;
}

.field-label .clear-btn:hover {
  text-decoration: underline;
}

.dialog input[type=text],
.dialog input[type=date],
.dialog input[type=time],
.dialog select {
  box-sizing: border-box;
  height: 30px;
  padding: 0 9px;
  border: 1px solid var(--grey-884);
  border-radius: 7px;
  background: var(--white);
  color: var(--grey-124);
  font: 400 12px Inter, system-ui, sans-serif;
  min-width: 0;
}

.dialog input[type=text]:focus,
.dialog input[type=date]:focus,
.dialog input[type=time]:focus,
.dialog select:focus {
  outline: 0;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px var(--focus-glow);
}

.dialog select:disabled {
  opacity: .5;
}

.dialog input[type=range] {
  accent-color: var(--accent);
  margin: 2px 0;
}

.dialog textarea {
  box-sizing: border-box;
  min-height: 52px;
  max-height: 200px;
  padding: 7px 9px;
  border: 1px solid var(--grey-884);
  border-radius: 7px;
  background: var(--white);
  color: var(--grey-124);
  font: 400 12px/1.45 Inter, system-ui, sans-serif;
  resize: vertical;
  field-sizing: content; /* grows with what's typed */
}

.dialog textarea:focus {
  outline: 0;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px var(--focus-glow);
}

/* Task form: colour, person, phase, subtask, progress and dependencies as chips showing their
   value. A chip opens its picker in the panel below; phase and subtask are selects. */
.props {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--grey-884);
  border-radius: 14px;
  background: var(--white);
  color: var(--grey-124);
  font: 500 11.5px Inter, system-ui, sans-serif;
  white-space: nowrap;
  cursor: pointer;
}

.chip[hidden],
.prop-panel[hidden] {
  display: none;
}

.chip:hover {
  background: var(--grey-971);
}

.chip:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.chip[aria-expanded="true"] {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px var(--focus-glow);
}

.chip svg {
  flex: none;
  width: 13px;
  height: 13px;
  color: var(--text-faint);
}

.chip-dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.chip-person {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.chip[data-chip="person"] {
  padding-left: 5px;
}

.chip-person > :last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.chip .person-avatar.none {
  box-sizing: border-box;
  border: 1.5px dashed var(--grey-696);
}

.chip .progress-bar {
  width: 36px;
}

.chip output {
  font: 500 10.5px "JetBrains Mono", monospace;
}

.chip-select {
  padding: 0 8px 0 10px;
}

.chip-wrap[hidden] {
  display: none;
}

.chip-select [data-pick-label] {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chip-select.unset [data-pick-label] {
  color: var(--text-faint);
}

.chip-select::after {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  margin-left: -2px;
  background: var(--text-faint);
  -webkit-mask: var(--icon-chevron-down) center / contain no-repeat;
  mask: var(--icon-chevron-down) center / contain no-repeat;
}

.chip:disabled {
  opacity: .5;
  cursor: default;
}

.chip:disabled:hover {
  background: var(--white);
}

/* Phase and Subtask of: the app's menu instead of the browser's */
.dropdown.chip-menu {
  position: fixed;
  bottom: auto;
  transform: none;
  z-index: 5;
  min-width: 160px;
  max-width: 300px;
  max-height: 240px;
  overflow: auto;
}

.chip-menu button span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.prop-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: -4px;
  padding: 10px;
  border: 1px solid var(--line-3);
  border-radius: 8px;
  background: var(--surface-3);
}

.prop-panel .deps-list {
  background: var(--white);
}

/* Read by screen readers, not shown: what a chip's value is */
.hidden-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.when,
.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.when:has(.field[hidden]) .field {
  grid-column: 1/-1;
}

.date-time {
  display: flex;
  gap: 6px;
}

.date-time input[type=date] {
  flex: 1;
}

.date-time input[type=time] {
  width: 92px;
}

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 500;
  font-size: 11.5px;
  cursor: pointer;
  margin-top: -4px;
}

.checkbox input,
.dep-option input {
  accent-color: var(--accent);
  margin: 0;
}

/* Colour swatches; the chosen one gets a ring and a tick */
.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 3px;
}

.swatch {
  position: relative;
  cursor: pointer;
}

.swatch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.swatch span {
  display: block;
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  transition: transform .12s, box-shadow .12s;
}

.swatch:hover span {
  transform: scale(1.1);
}

.swatch input:checked+span {
  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--grey-124);
}

.swatch input:checked+span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--icon-check-white) center / 12px no-repeat;
}

.swatch input:focus-visible+span {
  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--focus);
  transform: scale(1.1);
}

.deps-list {
  max-height: 132px;
  overflow: auto;
  border: 1px solid var(--line-5);
  border-radius: 7px;
  padding: 3px;
}

.deps-empty {
  margin: 0;
  padding: 6px 7px;
  color: var(--text-faint);
  font-size: 11.5px;
}

.dep-option {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  padding: 0 7px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 11.5px;
}

.dep-option:hover {
  background: var(--grey-971);
}

.dep-option.sub {
  padding-left: 22px;
}

.dep-option span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dep-option em {
  font-style: normal;
  font-size: 10px;
  color: var(--text-faint);
  white-space: nowrap;
}

.dep-option i {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--c, var(--accent));
}

.dep-option i.ms {
  width: 7px;
  height: 7px;
  background: var(--milestone);
  transform: rotate(45deg);
  border-radius: 1px;
}

.form-error {
  margin: 0;
  padding: 7px 9px;
  border-radius: 7px;
  background: #fdeceb;
  color: #a3302a;
  font-weight: 500;
  font-size: 11.5px;
}

/* A just-created bar or milestone pulses once */
@keyframes fresh {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(71, 144, 173, 0);
  }

  30% {
    box-shadow: 0 0 0 4px rgba(71, 144, 173, .45);
  }
}

.bar.fresh,
.diamond.fresh {
  animation: fresh 1.4s ease-out 2;
}

/* Everything on the plan opens its edit form when clicked */
.plan .bar,
.plan .diamond,
.plan .phase {
  cursor: pointer;
}

.scroll.dragging .plan * {
  cursor: grabbing;
}

.bar:hover,
.diamond:hover {
  box-shadow: 0 0 0 2px var(--white), 0 0 0 3.5px var(--focus);
}

.phase:hover {
  color: var(--link);
}

.dialog-foot .del {
  margin-right: auto;
  color: var(--danger-text-2);
}

.dialog-foot .del.armed {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--white);
}

.dialog-foot .del.armed:hover {
  background: #ad352f;
}

.kind input:disabled+span {
  cursor: default;
}

.kind input:disabled:not(:checked)+span {
  opacity: .4;
}

/* Theme toggle: moon in light mode, sun in dark mode */
.rail-btn .icon-sun,
[data-theme="dark"] .rail-btn .icon-moon {
  display: none;
}

[data-theme="dark"] .rail-btn .icon-sun {
  display: block;
}

/* Without JavaScript the app can't run: say so over the empty page */
.noscript {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 24px;
  background: var(--white);
  color: var(--grey-124);
  font: 500 14px Inter, system-ui, sans-serif;
  text-align: center;
}

/* The warning when this browser can't store a change */
.save-warning {
  position: fixed;
  left: 50%;
  bottom: calc(56px + env(safe-area-inset-bottom));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(520px, calc(100vw - 32px));
  padding: 10px 10px 10px 14px;
  transform: translateX(-50%);
  border: 1px solid var(--danger-line);
  border-radius: 8px;
  background: var(--danger-surface);
  color: var(--danger-text-1);
  font: 500 12px Inter, system-ui, sans-serif;
  box-shadow: 0 8px 24px var(--shadow);
}

.save-warning p {
  margin: 0;
  line-height: 1.45;
}

.save-warning .btn {
  flex: none;
}

/* Dark theme: the overrides colour tokens can't cover (one-off colours, colour-mix() with a
   row's own colour, and a few rules where the cascade needs a separate override) */
[data-theme="dark"] {
  color-scheme: dark;
}

[data-theme="dark"] body,
[data-theme="dark"] .app {
  background: #0e1012;
}

[data-theme="dark"] body {
  color: var(--text-4);
}

[data-theme="dark"] a {
  color: var(--accent-text-3);
}

[data-theme="dark"] a:hover {
  color: #a9d0df;
}

[data-theme="dark"] .breadcrumb .crumb-home {
  color: var(--text-14);
}

[data-theme="dark"] .breadcrumb .sep {
  color: var(--line-6);
}

[data-theme="dark"] .pill {
  background: #16303a;
  border-color: #23495a;
  color: #8cc5da;
}

[data-theme="dark"] .btn:hover:not(:disabled) {
  background: var(--surface-6);
}

[data-theme="dark"] .shortcut {
  border-color: #30353c;
}

[data-theme="dark"] .btn-group button {
  background: var(--raised);
  color: var(--text-6);
}

[data-theme="dark"] .btn-group button+button {
  border-left-color: var(--line-1);
}

[data-theme="dark"] .btn-group button:disabled {
  color: #555b63;
}

[data-theme="dark"] .avatar {
  border-color: #0e1012;
}

[data-theme="dark"] .primary:hover:not(:disabled) {
  background: #d9dde1;
}

[data-theme="dark"] .panel {
  border-color: var(--line-2);
}

[data-theme="dark"] .rail {
  border-right-color: var(--line-2);
}

[data-theme="dark"] .rail-btn:hover:not(:disabled) {
  color: var(--text-1);
  background: #1c2024;
}

[data-theme="dark"] .rail-btn.on {
  color: var(--text-1);
}

[data-theme="dark"] .rail-btn.on::before {
  background: #5aa6c4;
}

[data-theme="dark"] .task-panel {
  border-right-color: #22272c;
}

[data-theme="dark"] .task-panel-rows {
  background-image: repeating-linear-gradient(180deg, transparent 0 33px, #1c2024 33px 34px);
}

[data-theme="dark"] .task-row {
  color: var(--text-4);
}

[data-theme="dark"] .task-row.sub .row-icon {
  border-color: #3f7f99;
  border-color: color-mix(in srgb, var(--c, var(--accent)) 75%, var(--surface));
}

[data-theme="dark"] .task-row.ph {
  color: #ddd6fb;
  background: #1c1930;
  border-top-color: #2c2647;
}

[data-theme="dark"] .task-row.ph[data-id]:hover {
  background: #231f3b;
}

[data-theme="dark"] .task-row.ph .row-icon {
  background: var(--surface);
  border-color: var(--c, #6e63b8);
}

[data-theme="dark"] .task-row.empty {
  color: var(--text-faint);
}

[data-theme="dark"] .task-row.empty button {
  color: var(--accent-text-3);
}

[data-theme="dark"] .scroll::-webkit-scrollbar-thumb {
  background: #363c43;
}

[data-theme="dark"] .groups {
  border-bottom-color: var(--line-2);
}

[data-theme="dark"] .col {
  border-left-color: #22272c;
}

[data-theme="dark"] .rows {
  background-image: repeating-linear-gradient(180deg, transparent 0 33px, #1c2024 33px 34px);
}

[data-theme="dark"] .grid-line {
  background: var(--line-1);
}

[data-theme="dark"] .grid-line.day {
  background: #454c54;
}

[data-theme="dark"] .grid-line.part {
  background: #1e2226;
}

[data-theme="dark"] .col.part {
  color: #6b727b;
  border-left-color: #1e2226;
}

[data-theme="dark"] .bar.tint {
  background: #1f4352;
  color: #cfe8f3;
}

[data-theme="dark"] .bar.tint {
  background-color: color-mix(in srgb, var(--c, var(--accent)) 38%, var(--surface));
  color: color-mix(in srgb, var(--c, var(--accent)) 30%, var(--white));
}

[data-theme="dark"] .phase {
  color: #ddd6fb;
}

[data-theme="dark"] .band {
  background: rgba(132, 88, 224, .08);
  border-left-color: rgba(132, 88, 224, .45);
}

[data-theme="dark"] .milestone-link {
  background: #9a6430;
}

[data-theme="dark"] .phase-line {
  background: #5a4f9a;
}

[data-theme="dark"] .ghost {
  border-left-color: #3f7f99;
}

[data-theme="dark"] .ghost span {
  background: #1a3540;
  color: #9fd0e3;
}

[data-theme="dark"] .phase-cap {
  border-color: var(--c, #6e63b8);
}

[data-theme="dark"] .status-bar b {
  color: var(--text-4);
}

[data-theme="dark"] .status-bar .dot {
  color: var(--line-6);
}

[data-theme="dark"] .dropdown {
  box-shadow: 0 8px 24px rgba(0, 0, 0, .45), 0 1px 3px var(--shadow);
}

[data-theme="dark"] .dropdown button {
  color: var(--text-4);
}

[data-theme="dark"] .dropdown button:hover,
[data-theme="dark"] .dropdown button:focus-visible {
  background: var(--surface-7);
}

[data-theme="dark"] .scale-picker button {
  color: var(--text-9);
}

[data-theme="dark"] .scale-picker button.on {
  background: var(--text-1);
  color: var(--on-strong);
}

[data-theme="dark"] .dialog {
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55), 0 2px 6px var(--shadow);
}

[data-theme="dark"] .dialog::backdrop {
  background: var(--shadow-strong);
}

[data-theme="dark"] .dialog .close-btn:hover {
  color: var(--text-4);
}

[data-theme="dark"] .dialog-foot {
  border-color: var(--line-1);
}

[data-theme="dark"] .kind span {
  color: var(--text-9);
}

[data-theme="dark"] .kind span:hover,
[data-theme="dark"] .dep-option:hover {
  background: var(--surface-6);
}

[data-theme="dark"] .kind input:checked+span {
  background: var(--text-1);
  color: var(--on-strong);
}

[data-theme="dark"] .field-label em,
[data-theme="dark"] .dep-option em,
[data-theme="dark"] .deps-empty {
  color: var(--text-faint);
}

[data-theme="dark"] .field-label output {
  color: var(--text-4);
}

[data-theme="dark"] .dialog input[type=text],
[data-theme="dark"] .dialog input[type=date],
[data-theme="dark"] .dialog input[type=time],
[data-theme="dark"] .dialog select {
  background: var(--surface);
  border-color: var(--line-1);
  color: var(--text-4);
}

[data-theme="dark"] .dialog textarea,
[data-theme="dark"] .chip,
[data-theme="dark"] .prop-panel .deps-list {
  background: var(--surface);
  border-color: var(--line-1);
  color: var(--text-4);
}

[data-theme="dark"] .dialog textarea:focus,
[data-theme="dark"] .chip[aria-expanded="true"] {
  border-color: var(--focus);
}

[data-theme="dark"] .chip:hover {
  background: var(--surface-6);
}

[data-theme="dark"] .chip:disabled:hover {
  background: var(--surface);
}

[data-theme="dark"] .swatch input:checked+span {
  box-shadow: 0 0 0 2px var(--raised), 0 0 0 4px var(--text-4);
}

[data-theme="dark"] .swatch input:focus-visible+span {
  box-shadow: 0 0 0 2px var(--raised), 0 0 0 4px var(--focus);
}

[data-theme="dark"] .form-error {
  background: #3a1d1b;
  color: var(--danger-text-2);
}

[data-theme="dark"] .task-row[data-id]:hover {
  background: #1c2024;
}

[data-theme="dark"] .task-row.add:hover,
[data-theme="dark"] .task-row.add:focus-visible {
  background: #1c2024;
  color: var(--accent-text-3);
  box-shadow: inset 0 0 0 1px var(--line-1);
}

[data-theme="dark"] .task-row.add:hover .row-icon {
  border-color: var(--accent-text-3);
}

[data-theme="dark"] .task-row .more:hover {
  background: #2a3036;
}

[data-theme="dark"] .bar:hover,
[data-theme="dark"] .diamond:hover {
  box-shadow: 0 0 0 2px var(--surface-8), 0 0 0 3.5px var(--focus);
}

[data-theme="dark"] .point i {
  background: var(--surface);
}

[data-theme="dark"] .point.done i {
  background: var(--c, var(--accent));
}

[data-theme="dark"] .point.tint i {
  border-color: #3f7f99;
  border-color: color-mix(in srgb, var(--c, var(--accent)) 75%, var(--surface));
}

[data-theme="dark"] .point.tint.done i {
  background: #3f7f99;
  background: color-mix(in srgb, var(--c, var(--accent)) 75%, var(--surface));
}

[data-theme="dark"] .point.tint .t {
  color: var(--text-6);
}

[data-theme="dark"] .point.done .t {
  color: var(--text-faint);
}

[data-theme="dark"] .point:hover i {
  box-shadow: 0 0 0 2px var(--surface-8), 0 0 0 3.5px var(--focus);
}

[data-theme="dark"] .dialog-foot .del.armed {
  background: #c4403a;
  border-color: #c4403a;
}

[data-theme="dark"] .dialog-foot .del.armed:hover {
  background: #ad352f;
}

[data-theme="dark"] .details-icon.phase {
  border-color: var(--c, #6e63b8);
}

[data-theme="dark"] .details-body dt {
  color: var(--text-14);
}

[data-theme="dark"] .details .close-btn {
  color: var(--text-9);
}

[data-theme="dark"] .details .close-btn:hover {
  background: var(--surface-7);
  color: var(--text-4);
}

[data-theme="dark"] .details-foot {
  border-color: var(--line-1);
}

/* List view: the plan as a table, laid over the timeline (right of the rail) */
.list,
.board,
.cal,
.settings {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 38px;
  z-index: 6;
  display: none;
  flex-direction: column;
  min-width: 0;
  background: var(--surface);
}

.app[data-page="list"] .list,
.app[data-page="board"] .board,
.app[data-page="calendar"] .cal,
.app[data-page="settings"] .settings {
  display: flex;
}

.app[data-page="list"] .status-bar .r,
.app[data-page="board"] .status-bar .r,
.app[data-page="calendar"] .status-bar .r,
.app[data-page="settings"] .status-bar .r {
  visibility: hidden;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-2);
}

.list-search {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 9px;
  box-sizing: border-box;
  border: 1px solid var(--grey-884);
  border-radius: 7px;
  background: var(--raised);
  color: var(--text-faint);
}

.list-search svg {
  flex: none;
  width: 13px;
  height: 13px;
}

.list-search input {
  width: 150px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--grey-124);
  font: 400 11.5px Inter, system-ui, sans-serif;
}

.list-search:focus-within {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px var(--focus-glow-soft);
}

.toolbar select {
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--grey-884);
  border-radius: 7px;
  background: var(--white);
  color: var(--grey-124);
  font: 500 11.5px Inter, system-ui, sans-serif;
  cursor: pointer;
  max-width: 170px;
}

.toolbar select:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.clear-filters {
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--accent-text-4);
  font: 600 11.5px Inter, system-ui, sans-serif;
  cursor: pointer;
}

.clear-filters:hover {
  text-decoration: underline;
}

.clear-filters[hidden] {
  display: none;
}

.item-count {
  margin-left: auto;
  font: 400 10.5px "JetBrains Mono", monospace;
  color: var(--text-faint);
  white-space: nowrap;
}

.menu-wrap {
  position: relative;
}

.menu-wrap .btn {
  height: 28px;
}

.hidden-count {
  margin-left: 2px;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--accent-tint);
  color: var(--accent-text-1);
  font: 600 10px Inter, sans-serif;
}

.hidden-count[hidden] {
  display: none;
}

.dropdown.check-menu {
  left: auto;
  right: 0;
  top: calc(100% + 6px);
  bottom: auto;
  transform: none;
  min-width: 170px;
}

.check-menu button[role="menuitemcheckbox"] {
  justify-content: flex-start;
}

.check-menu button[role="menuitemcheckbox"]::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border: 1.5px solid var(--line-6);
  border-radius: 3px;
}

.check-menu button[aria-checked="true"] {
  font-weight: 500;
}

.check-menu button[aria-checked="true"]::after {
  content: none;
}

.check-menu button[aria-checked="true"]::before {
  border-color: var(--accent);
  background: var(--accent) var(--icon-check-white) center / 75% no-repeat;
}

.check-menu button:disabled {
  color: var(--grey-696);
  cursor: default;
  background: none;
}

.scroll,
.task-panel-body,
.board-scroll {
  scrollbar-width: none;
}

.scroll::-webkit-scrollbar,
.task-panel-body::-webkit-scrollbar,
.board-scroll::-webkit-scrollbar {
  display: none;
}

.list-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  user-select: none;
}

.list-scroll.dragging,
.list-scroll.dragging * {
  cursor: grabbing!important;
}

.list-scroll.dragging .list-row:hover td {
  background: none;
}

.list-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  color: var(--text-4);
}

.list-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 30px;
  padding: 0 4px 0 12px;
  background: var(--grey-984);
  border-bottom: 1px solid var(--grey-904);
  text-align: left;
  white-space: nowrap;
}

.list-table th.r {
  text-align: right;
}

/* Press and hold a heading, then drag it sideways to move the column */
.list-table th:not(.name-col) {
  touch-action: pan-y;
  -webkit-touch-callout: none;
}

.list-table th.lifted {
  opacity: .45;
}

.list-table th.drop-before {
  box-shadow: inset 2px 0 0 var(--focus);
}

.list-table th.drop-after {
  box-shadow: inset -2px 0 0 var(--focus);
}

.list.moving-col,
.list.moving-col * {
  cursor: grabbing;
}

/* The Columns menu: each column with Move up / Move down (earlier or later in the table) */
.check-row {
  display: flex;
  align-items: center;
  gap: 2px;
}

.check-row [role="menuitemcheckbox"] {
  flex: 1;
  min-width: 0;
}

.dropdown .col-move {
  flex: none;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: var(--text-faint);
}

.dropdown .col-move svg {
  width: 13px;
  height: 13px;
}

.sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 0;
  border: 0;
  background: none;
  font: 600 9.5px Inter, sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-14);
  cursor: pointer;
}

.sort-btn:hover,
.sort-btn.on {
  color: var(--grey-80);
}

.sort-btn:focus-visible,
.hide-col-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
  border-radius: 3px;
}

.sort-btn .sort-arrow {
  width: 0;
  height: 0;
  border: 3.5px solid transparent;
  border-bottom: 4.5px solid currentColor;
  margin-top: -4px;
  opacity: 0;
}

.sort-btn .sort-arrow.down {
  border-bottom-color: transparent;
  border-top: 4.5px solid currentColor;
  margin: 4px 0 0;
}

.sort-btn:hover .sort-arrow {
  opacity: .35;
}

.sort-btn.on .sort-arrow {
  opacity: 1;
}

.hide-col-btn {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-left: 2px;
  padding: 0;
  vertical-align: middle;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--text-faint);
  cursor: pointer;
  opacity: 0;
}

.hide-col-btn svg {
  width: 10px;
  height: 10px;
}

.list-table th:hover .hide-col-btn,
.hide-col-btn:focus-visible {
  opacity: 1;
}

.hide-col-btn:hover {
  background: #e9ecf0;
  color: var(--text-3);
}

.list-table td {
  height: 34px;
  padding: 0 12px;
  border-bottom: 1px solid var(--grey-955);
  white-space: nowrap;
}

.list-table td.mono {
  font: 400 11px "JetBrains Mono", monospace;
  color: var(--grey-255);
}

.list-table td.r {
  text-align: right;
}

.list-table .name-col {
  width: 34%;
  min-width: 200px;
}

.name-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 380px;
}

.list-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.list-icon {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--c, var(--accent));
}

.list-icon.sub {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-sizing: border-box;
  background: transparent;
  border: 1.5px solid var(--subtask);
  border-color: color-mix(in srgb, var(--c, var(--accent)) 55%, var(--white));
}

.list-icon.ms {
  width: 8px;
  height: 8px;
  border-radius: 1.5px;
  background: var(--milestone);
  transform: rotate(45deg);
}

.list-icon.ph {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-sizing: border-box;
  background: var(--white);
  border: 2px solid var(--c, var(--purple-753));
}

.list-row {
  cursor: pointer;
}

/* A task's row warms with its progress (--p, 0 to 1): from white to a faint amber at
   half way, then on to a faint green when finished. Every percentage point shifts it a
   little, so 10% is barely tinted and 90% is nearly green. */
.list-row.prog {
  --row-start: var(--white);
  --row-mid: color-mix(in srgb, var(--amber-922) 70%, var(--white));
  --row-end: color-mix(in srgb, var(--green-922) 55%, var(--white));
}

.list-row.prog td {
  background: color-mix(in srgb, var(--row-end) calc(clamp(0, var(--p) * 2 - 1, 1) * 100%),
    color-mix(in srgb, var(--row-mid) calc(clamp(0, var(--p) * 2, 1) * 100%), var(--row-start)));
}

.list-row:hover td {
  background: var(--grey-969);
}

.list-row:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.list-row.l-top .list-name {
  font-weight: 500;
}

.list-row.l-sub .name-cell {
  padding-left: 18px;
}

.list-row.l-sub .list-name {
  color: var(--text-6);
}

/* Header rows in neutral greys: milestones the strongest, phases lighter (their colour kept
   on the name), tasks white */
.list-row.l-ms td {
  background: var(--grey-951);
  border-top: 1px solid var(--grey-884);
  border-bottom-color: var(--grey-884);
}

.list-row.l-ms:hover td {
  background: var(--grey-916);
}

.list-row.l-ph td {
  background: var(--grey-969);
  border-top: 1px solid var(--grey-931);
  border-bottom-color: var(--grey-931);
}

.list-row.l-ph:hover td {
  background: var(--grey-955);
}

.list-row.l-ph .list-name {
  font: 700 10.5px Inter, sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--phase-text);
}

.list-row.fresh td {
  animation: lfresh 2.2s ease-out;
}

@keyframes lfresh {
  0%,
  45% {
    background: #d3e9f2;
  }
}

/* Sorted, the list is flat: no indents; phases keep their grey band but drop the capitals */
.list.flat .list-row.l-sub .name-cell {
  padding-left: 0;
}

.list.flat .list-row.l-ph .list-name {
  font: 600 11.5px Inter, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  color: var(--phase-text);
}

.empty-value {
  color: var(--grey-714);
}

.list-progress {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.list-progress .progress-bar {
  width: 80px;
}

.list-pct {
  min-width: 30px;
  text-align: right;
  font: 400 10.5px "JetBrains Mono", monospace;
  color: var(--text-6);
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 19px;
  padding: 0 8px;
  border-radius: 10px;
  font: 500 10.5px Inter, sans-serif;
  background: var(--surface-9);
  color: var(--text-8);
}

.status::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.status.active {
  background: var(--blue-937);
  color: var(--accent-text-2);
}

.status.done {
  background: var(--green-922);
  color: var(--green-324);
}

.status.ms {
  background: var(--milestone-tint);
  color: #b0621d;
}

.list-notes {
  display: inline-block;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  color: var(--text-6);
}

.list-deps {
  display: inline-block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  color: var(--text-6);
}

.list-add td {
  color: var(--text-faint);
  cursor: pointer;
  border-bottom: 0;
}

.list-add .list-icon.add {
  display: inline-block;
  vertical-align: middle;
  margin: -2px 8px 0 0;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border: 1.5px dashed var(--grey-696);
  border-radius: 50%;
  background: none;
}

.list-add:hover td,
.list-add:focus-visible td {
  background: var(--grey-969);
  color: var(--link);
}

.list-add:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.list-empty td {
  height: 60px;
  color: var(--text-faint);
  font-style: italic;
}

.list-empty button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-style: normal;
  font-weight: 600;
  color: var(--link);
  cursor: pointer;
}

.list-empty button:hover {
  text-decoration: underline;
}

[data-theme="dark"] .toolbar select {
  background: var(--raised);
}

[data-theme="dark"] .list-search,
[data-theme="dark"] .toolbar select {
  border-color: var(--line-1);
  color: var(--text-4);
}

[data-theme="dark"] .list-search {
  color: var(--text-14);
}

[data-theme="dark"] .list-search input {
  color: var(--text-4);
}

[data-theme="dark"] .list-empty button {
  color: var(--accent-text-4);
}

[data-theme="dark"] .hidden-count {
  background: var(--accent-surface);
}

[data-theme="dark"] .check-menu button:disabled {
  color: var(--line-6);
}

[data-theme="dark"] .list-table th {
  background: var(--surface-2);
  border-bottom-color: var(--line-1);
}

[data-theme="dark"] .sort-btn:hover,
[data-theme="dark"] .sort-btn.on {
  color: var(--text-1);
}

[data-theme="dark"] .hide-col-btn:hover {
  background: var(--surface-7);
}

[data-theme="dark"] .list-table td {
  border-bottom-color: #1f2328;
}

[data-theme="dark"] .list-table td.mono {
  color: var(--text-6);
}

[data-theme="dark"] .list-row:hover td,
[data-theme="dark"] .list-add:hover td,
[data-theme="dark"] .list-add:focus-visible td {
  background: #1a1e22;
}

[data-theme="dark"] .list-icon.ph {
  background: var(--surface);
  border-color: var(--c, #6e63b8);
}

[data-theme="dark"] .list-row.l-ms td {
  background: #1b1f24;
  border-top-color: #2a2e33;
  border-bottom-color: #2a2e33;
}

[data-theme="dark"] .list-row.l-ms:hover td {
  background: #22272d;
}

[data-theme="dark"] .list-row.l-ph td {
  background: #171a1e;
  border-top-color: #22262b;
  border-bottom-color: #22262b;
}

[data-theme="dark"] .list-row.l-ph:hover td {
  background: #1f2328;
}

[data-theme="dark"] .empty-value {
  color: #4a5159;
}

[data-theme="dark"] .status.active {
  background: #1b2a40;
}

/* As faint against the dark page as the light green is against white: a slight cool green
   tint rather than the Done badge's forest green */
[data-theme="dark"] .list-row.prog {
  --row-start: var(--surface);
  --row-mid: #1f1b12;
  --row-end: #141d19;
}

/* Hover lifts the tint a touch rather than swapping it for the plain grey */
[data-theme="dark"] .list-row.prog:hover td {
  background: color-mix(in srgb, var(--white) 3%,
    color-mix(in srgb, var(--row-end) calc(clamp(0, var(--p) * 2 - 1, 1) * 100%),
      color-mix(in srgb, var(--row-mid) calc(clamp(0, var(--p) * 2, 1) * 100%), var(--row-start))));
}

[data-theme="dark"] .status.done,
[data-theme="dark"] .details-foot [data-peek-done][aria-pressed="true"] {
  border-color: #7fd0a1;
  background: #17301f;
  color: #7fd0a1;
}

[data-theme="dark"] .status.ms {
  background: #35260f;
  color: #f0b06c;
}

[data-theme="dark"] .list-row.fresh td {
  animation-name: lfreshd;
}

@keyframes lfreshd {
  0%,
  30% {
    background: #1d3440;
  }
}

/* People: initials in a coloured circle */
.person-avatar {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  color: var(--white);
  font: 600 9px/1 Inter, sans-serif;
  letter-spacing: .02em;
}

.bar .person-avatar {
  width: 16px;
  height: 16px;
  font-size: 8.5px;
  margin-left: 6px;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .75);
}

.point .person-avatar {
  width: 16px;
  height: 16px;
  font-size: 8.5px;
}

.details-body .person-avatar {
  margin-right: -2px;
}

.list-person {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* Person picker in the form: avatar circles like the colour swatches */
.people-pick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 3px;
}

.person-pick {
  position: relative;
  cursor: pointer;
  display: block;
}

.person-pick input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.person-pick .person-avatar {
  width: 26px;
  height: 26px;
  font-size: 11px;
  transition: transform .12s, box-shadow .12s;
}

.person-pick .person-avatar.none {
  box-sizing: border-box;
  border: 1.5px dashed var(--grey-696);
  background: var(--white);
}

.person-pick .person-avatar.none::after {
  content: "";
  width: 14px;
  height: 14px;
  background: var(--line-6);
  -webkit-mask: var(--icon-slash) center / contain no-repeat;
  mask: var(--icon-slash) center / contain no-repeat;
}

.person-pick:hover .person-avatar {
  transform: scale(1.08);
}

.person-pick input:checked+.person-avatar {
  box-shadow: 0 0 0 2px var(--raised), 0 0 0 4px var(--text-4);
}

.person-pick input:focus-visible+.person-avatar {
  box-shadow: 0 0 0 2px var(--raised), 0 0 0 4px var(--focus);
  transform: scale(1.08);
}

.person-add {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1.5px dashed var(--grey-696);
  border-radius: 50%;
  background: none;
  color: var(--grey-451);
  cursor: pointer;
}

.person-add svg {
  width: 12px;
  height: 12px;
}

.person-add:hover,
.person-add:focus-visible {
  border-color: var(--link);
  color: var(--link);
  outline: 0;
}

.person-selected {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 16px;
  font-size: 11.5px;
}

.person-name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.person-selected button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font: 600 11px Inter, system-ui, sans-serif;
  cursor: pointer;
}

.person-selected button:hover {
  text-decoration: underline;
}

.person-selected .person-delete {
  color: var(--danger-text-2);
}

.person-selected .person-delete.armed {
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--danger);
  color: var(--white);
  text-decoration: none;
}

.new-person {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
  padding: 10px;
  border: 1px solid var(--line-3);
  border-radius: 8px;
  background: var(--surface-3);
}

.new-person[hidden] {
  display: none;
}

.new-person-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.new-person input[type=text] {
  flex: 1;
}

.new-person .btn,
.new-person .primary {
  height: 30px;
}

.person-colors {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 2px;
}

.swatch.small span {
  width: 16px;
  height: 16px;
}

.swatch.small input:checked+span::after {
  background-size: 9px;
}

[data-theme="dark"] .person-pick .person-avatar.none {
  background: var(--raised);
  border-color: var(--line-6);
}

[data-theme="dark"] .person-add {
  border-color: var(--line-6);
  color: var(--text-9);
}

[data-theme="dark"] .person-selected button {
  color: var(--accent-text-4);
}

/* A phase with its own colour (Settings → Phases): its line, band, rows and headings take
   tints of it instead of lavender. Rings use var(--c) directly, above. */
.phase-line[style*="--c"] {
  background: color-mix(in srgb, var(--c) 55%, var(--surface));
}

.band[style*="--c"] {
  background: color-mix(in srgb, var(--c) 7%, transparent);
  border-left-color: color-mix(in srgb, var(--c) 40%, transparent);
}

.phase[style*="--c"] {
  color: color-mix(in srgb, var(--c) 60%, var(--black));
}

.task-row.ph[style*="--c"] {
  background: color-mix(in srgb, var(--c) 11%, var(--white));
  border-top-color: color-mix(in srgb, var(--c) 22%, var(--white));
  color: color-mix(in srgb, var(--c) 60%, var(--black));
}

.task-row.ph[style*="--c"][data-id]:hover {
  background: color-mix(in srgb, var(--c) 17%, var(--white));
}

.list-row.l-ph[style*="--c"] .list-name {
  color: color-mix(in srgb, var(--c) 60%, var(--black));
}

.cal-item.cal-bar.k-phase[style*="--c"] {
  background: color-mix(in srgb, var(--c) 16%, var(--white));
  color: color-mix(in srgb, var(--c) 60%, var(--black));
}

.cal-group-head[style*="--c"] {
  background: color-mix(in srgb, var(--c) 12%, var(--white));
  color: color-mix(in srgb, var(--c) 60%, var(--black));
}

.cal-summary[style*="--c"] .name-col,
.cal-entry.k-phase[style*="--c"] {
  color: color-mix(in srgb, var(--c) 60%, var(--black));
}

[data-theme="dark"] .band[style*="--c"] {
  background: color-mix(in srgb, var(--c) 10%, transparent);
}

[data-theme="dark"] .phase[style*="--c"],
[data-theme="dark"] .list-row.l-ph[style*="--c"] .list-name,
[data-theme="dark"] .cal-summary[style*="--c"] .name-col,
[data-theme="dark"] .cal-entry.k-phase[style*="--c"] {
  color: color-mix(in srgb, var(--c) 45%, var(--white));
}

[data-theme="dark"] .task-row.ph[style*="--c"] {
  background: color-mix(in srgb, var(--c) 16%, var(--surface-1));
  border-top-color: color-mix(in srgb, var(--c) 28%, var(--surface-1));
  color: color-mix(in srgb, var(--c) 45%, var(--white));
}

[data-theme="dark"] .task-row.ph[style*="--c"][data-id]:hover {
  background: color-mix(in srgb, var(--c) 22%, var(--surface-1));
}

[data-theme="dark"] .cal-item.cal-bar.k-phase[style*="--c"],
[data-theme="dark"] .cal-group-head[style*="--c"] {
  background: color-mix(in srgb, var(--c) 20%, var(--surface));
  color: color-mix(in srgb, var(--c) 45%, var(--white));
}

/* Cronelo: the home page above the projects. It replaces the project's bar, panel and footer */
button.crumb-home {
  padding: 3px 6px;
  margin: 0 -6px;
  border: 0;
  border-radius: 6px;
  background: none;
  font: inherit;
  color: var(--grey-451);
  cursor: pointer;
}

button.crumb-home:hover,
button.crumb-home:focus-visible {
  background: var(--grey-951);
  color: var(--grey-80);
  outline: 0;
}

button.logo {
  padding: 0;
  border: 0;
  cursor: pointer;
}

button.logo:hover {
  background: var(--grey-182);
}

button.logo:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.app.on-home>.top,
.app.on-home>.panel,
.app.on-home>.status-bar {
  display: none;
}

.home {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--surface-4);
}

.home[hidden] {
  display: none;
}

.home-head {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--line-2);
}

.home-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.home-brand .logo {
  margin: 0;
}

.home-brand-name {
  font: 600 14px Inter, system-ui, sans-serif;
  color: var(--text-2);
}

.home-tools {
  display: flex;
  align-items: center;
  gap: 10px;
}

.home-search input {
  width: 200px;
}

.home-search:focus-within input {
  width: 240px;
}

.home-tools .avatar.home-avatar {
  width: 30px;
  height: 30px;
  margin: 0;
  border: 0;
  font-size: 11.5px;
  cursor: pointer;
}

.home-tools .avatar.home-avatar:hover {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--focus);
}

.home-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  column-gap: 24px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
}

.home-main {
  grid-column: 1;
  min-width: 0;
}

.home-side {
  grid-column: 2;
}

.home-hello h1 {
  margin: 0;
  font: 600 22px Inter, system-ui, sans-serif;
  color: var(--grey-90);
  letter-spacing: -.01em;
}

.home-hello p {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--grey-451);
}

.home-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 22px;
  flex-wrap: wrap;
}

.home-label,
.home-box h2 {
  margin: 0;
  font: 600 9.5px Inter, sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--grey-451);
}

.home-sort {
  display: flex;
  align-items: center;
  gap: 6px;
}

.home-sort select {
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--grey-884);
  border-radius: 7px;
  background: var(--white);
  color: var(--grey-124);
  font: 500 11.5px Inter, system-ui, sans-serif;
  cursor: pointer;
}

.home-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 9px;
  border: 1px solid var(--accent-line);
  border-radius: 12px;
  background: var(--accent-surface);
  color: var(--accent-text-1);
  font: 600 11px Inter, system-ui, sans-serif;
  cursor: pointer;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 14px;
}

.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px 16px;
  border: 1px solid var(--line-3);
  border-radius: 12px;
  background: var(--raised);
  box-shadow: 0 1px 2px rgba(20, 30, 40, .04);
  cursor: pointer;
  text-align: left;
  min-width: 0;
}

.project-card:hover {
  border-color: var(--grey-829);
  box-shadow: 0 4px 14px var(--shade-08);
}

.project-card:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.project-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
}

.project-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 19px;
  padding: 0 8px;
  border-radius: 10px;
  font: 600 10px Inter, sans-serif;
  background: var(--surface-9);
  color: var(--text-8);
}

.project-status::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
}

.project-status.active {
  background: var(--blue-937);
  color: var(--accent-text-2);
}

.project-status.upcoming {
  background: var(--purple-947);
  color: #5b47b8;
}

.project-status.finished {
  background: var(--green-922);
  color: var(--green-324);
}

.project-current {
  font-size: 10.5px;
  color: var(--text-faint);
}

.project-menu-btn {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text-15);
  cursor: pointer;
}

.project-menu-btn svg {
  width: 16px;
  height: 16px;
}

.project-menu-btn:hover,
.project-menu-btn[aria-expanded="true"] {
  background: var(--surface-9);
  color: var(--text-3);
}

.dropdown.project-menu {
  top: 44px;
  right: 10px;
  bottom: auto;
  left: auto;
  transform: none;
  min-width: 170px;
}

.dropdown.project-menu button.danger {
  color: var(--danger-strong);
}

.dropdown.project-menu button:disabled {
  color: var(--grey-696);
  cursor: default;
  background: none;
}

.project-card h3 {
  margin: 0;
  font: 600 15px Inter, system-ui, sans-serif;
  color: var(--grey-90);
  overflow-wrap: anywhere;
}

.project-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.project-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-10);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.project-dates {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 400 11px "JetBrains Mono", monospace;
  color: var(--text-7);
}

.project-dates svg {
  width: 12px;
  height: 12px;
  color: var(--text-faint);
}

.project-counts {
  display: flex;
  gap: 14px;
  font-size: 11.5px;
  color: var(--text-14);
}

.project-counts b {
  font-weight: 600;
  color: var(--grey-124);
}

.project-progress {
  display: flex;
  align-items: center;
  gap: 8px;
}

.project-progress .card-progress {
  flex: 1;
  margin: 0;
  height: 5px;
}

.project-pct {
  font: 500 10.5px "JetBrains Mono", monospace;
  color: var(--text-7);
}

.project-card-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 9px;
  border-top: 1px solid var(--grey-951);
}

.project-next {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  color: var(--grey-255);
}

.project-next.none {
  color: var(--text-faint);
  font-style: italic;
}

.project-next-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.project-next-when {
  flex: none;
  color: var(--text-faint);
  font-size: 11px;
}

.avatar-stack {
  flex: none;
  display: flex;
  align-items: center;
}

.avatar-stack .person-avatar {
  width: 22px;
  height: 22px;
  font-size: 9px;
  margin-left: -6px;
  border: 2px solid var(--raised);
}

.avatar-stack .person-avatar:first-child {
  margin-left: 0;
}

.avatar-more {
  margin-left: 4px;
  font-size: 10.5px;
  color: var(--text-14);
}

.project-add {
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 150px;
  border-style: dashed;
  background: transparent;
  box-shadow: none;
  color: var(--text-13);
  font: 500 12.5px Inter, system-ui, sans-serif;
}

.project-add span {
  font-size: 22px;
  line-height: 1;
  color: var(--text-faint);
}

.project-add:hover {
  background: var(--raised);
  color: var(--text-3);
}

.home-empty {
  grid-column: 1/-1;
  margin: 0;
  padding: 28px;
  text-align: center;
  color: var(--text-faint);
  font-style: italic;
}

/* Cronelo as a list: one row per project */
.home-grid.as-list {
  grid-template-columns: 1fr;
  gap: 6px;
}

.home-grid.as-list .project-card {
  display: grid;
  grid-template-columns: 110px minmax(160px, 1.4fr) minmax(150px, 1fr) 150px minmax(170px, 1.2fr);
  grid-template-areas: "top name dates prog ft";
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
}

.home-grid.as-list .project-card-top {
  grid-area: top;
}

.home-grid.as-list h3 {
  grid-area: name;
  font-size: 13px;
}

.home-grid.as-list .project-dates {
  grid-area: dates;
}

.home-grid.as-list .project-progress {
  grid-area: prog;
}

.home-grid.as-list .project-card-foot {
  grid-area: ft;
  margin: 0;
  padding: 0;
  border: 0;
}

.home-grid.as-list .project-tags,
.home-grid.as-list .project-desc,
.home-grid.as-list .project-counts,
.home-grid.as-list .project-current {
  display: none;
}

.home-grid.as-list .project-menu-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
}

.home-grid.as-list .dropdown.project-menu {
  top: 38px;
}

.home-grid.as-list .project-add {
  min-height: 44px;
  display: flex;
}

/* The side column: coming up, notes, templates, tags */
.home-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.home-label {
  height: 14px;
  margin: 0 0 10px;
}

.home-side .home-label {
  margin-bottom: -4px;
}

/* its column has 14px gaps between boxes */
.home-side {
  padding-top: 6px;
}

.home-box {
  padding: 14px 16px;
  border: 1px solid var(--line-3);
  border-radius: 12px;
  background: var(--raised);
}

.home-box h2 {
  margin-bottom: 10px;
}

.coming-up,
.home-notes,
.home-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.coming-up button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 6px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.coming-up button:hover,
.coming-up button:focus-visible {
  background: var(--grey-965);
  outline: 0;
}

.coming-up .kind-mark {
  flex: none;
}

.coming-up-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.coming-up-text b {
  font-weight: 600;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coming-up-text span {
  font-size: 10.5px;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coming-up em {
  flex: none;
  font-style: normal;
  font-size: 10.5px;
  color: var(--link);
  font-weight: 600;
}

/* Coming up, a heading per day */
.coming-day+.coming-day {
  margin-top: 10px;
}

.coming-day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 0 6px 4px;
  border-bottom: 1px solid var(--grey-951);
  margin-bottom: 2px;
}

.coming-day-head b {
  font-size: 12px;
  font-weight: 600;
  color: var(--grey-124);
}

.coming-day-head em {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--link);
}

.coming-up-time {
  flex: none;
  min-width: 44px;
  font: 500 10.5px "JetBrains Mono", monospace;
  color: var(--text-13);
  white-space: nowrap;
}

.coming-up-name {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coming-up-project {
  flex: none;
  max-width: 90px;
  font-size: 10.5px;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.coming-up button {
  padding: 5px 6px;
}

/* Pinned and archived projects */
.project-pin {
  display: inline-grid;
  place-items: center;
  color: var(--accent-text-4);
}

.project-pin svg {
  width: 13px;
  height: 13px;
}

.project-card.archived {
  opacity: .6;
}

.project-card.archived:hover {
  opacity: 1;
}

.home-archived-btn {
  height: 28px;
}

.home-archived-btn .hidden-count {
  margin-left: 4px;
}

[data-theme="dark"] .coming-day-head {
  border-bottom-color: #22272c;
}

[data-theme="dark"] .coming-day-head b {
  color: var(--text-1);
}

[data-theme="dark"] .coming-day-head em {
  color: var(--accent-text-4);
}

.coming-up-empty {
  margin: 0;
  font-size: 11.5px;
  color: var(--text-faint);
  font-style: italic;
  line-height: 1.45;
}

.home-note-add {
  box-sizing: border-box;
  width: 100%;
  height: 30px;
  margin-bottom: 8px;
  padding: 0 9px;
  border: 1px solid var(--grey-884);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text-4);
  font: 400 12px Inter, system-ui, sans-serif;
}

.home-note-add:focus {
  outline: 0;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px var(--focus-glow);
}

.home-notes li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  font-size: 12px;
  line-height: 1.35;
}

.home-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid var(--grey-951);
}

.home-list li:first-child {
  border-top: 0;
}

.home-list li>span {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.home-list b {
  font-size: 12px;
  font-weight: 600;
}

.home-list li>span span {
  font-size: 10.5px;
  color: var(--text-faint);
}

.home-list .btn {
  height: 26px;
}

.home-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.home-tag-list .pill {
  height: 22px;
  cursor: pointer;
}

.home-tag-list .pill.on {
  box-shadow: 0 0 0 2px var(--c, var(--accent));
}

.hidden-count {
  margin-left: 2px;
  opacity: .7;
}

[data-theme="dark"] button.crumb-home {
  color: var(--text-14);
}

[data-theme="dark"] button.crumb-home:hover,
[data-theme="dark"] button.crumb-home:focus-visible {
  background: #1c2024;
  color: var(--text-1);
}

[data-theme="dark"] .home-hello h1,
[data-theme="dark"] .project-card h3,
[data-theme="dark"] .project-counts b {
  color: var(--text-1);
}

[data-theme="dark"] .home-hello p,
[data-theme="dark"] .home-label,
[data-theme="dark"] .home-box h2,
[data-theme="dark"] .coming-up-text span,
[data-theme="dark"] .home-list li>span span {
  color: var(--text-14);
}

[data-theme="dark"] .project-card,
[data-theme="dark"] .home-box {
  box-shadow: none;
}

[data-theme="dark"] .project-card:hover {
  border-color: #3a4047;
}

[data-theme="dark"] .project-card-foot,
[data-theme="dark"] .home-list li {
  border-color: #22272c;
}

[data-theme="dark"] .project-next {
  color: var(--text-6);
}

[data-theme="dark"] .project-status.active {
  background: #1b2a40;
}

[data-theme="dark"] .project-status.upcoming {
  background: #2a2545;
  color: var(--phase-text);
}

[data-theme="dark"] .project-status.finished {
  background: #17301f;
  color: #7fd0a1;
}

[data-theme="dark"] .coming-up button:hover {
  background: var(--surface-7);
  color: var(--text-1);
}

[data-theme="dark"] .project-add {
  border-color: var(--line-1);
}

[data-theme="dark"] .home-sort select {
  background: var(--surface);
  color: var(--text-4);
}

[data-theme="dark"] .home-sort select,
[data-theme="dark"] .home-note-add {
  border-color: var(--line-1);
}

@media (max-width: 980px) {
  .home-wrap {
    grid-template-columns: 1fr;
  }

  .home-side {
    grid-column: 1;
    margin-top: 24px;
  }

  .home-grid.as-list .project-card {
    grid-template-columns: 1fr;
    grid-template-areas: "top" "name" "dates" "prog" "ft";
  }
}

/* Sign-in screen (js/cloud.js): covers the app until you're signed in and synced */
.gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: auto;
  background: var(--surface-4);
  font: 400 12px Inter, system-ui, sans-serif;
  color: var(--text-4);
}

.gate[hidden] {
  display: none;
}

.gate-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(360px, 100%);
  box-sizing: border-box;
  padding: 28px;
  border: 1px solid var(--line-3);
  border-radius: 14px;
  background: var(--raised);
  box-shadow: 0 12px 32px var(--shade-08);
}

.gate-card.loading {
  align-items: center;
  text-align: center;
}

.gate-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 600 14px Inter, system-ui, sans-serif;
}

.gate-brand .logo {
  margin: 0;
}

.gate-card h1 {
  margin: 4px 0 0;
  font: 600 18px Inter, system-ui, sans-serif;
  letter-spacing: -.01em;
}

.gate-sub,
.gate-note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-11);
}

.gate-card input {
  box-sizing: border-box;
  height: 36px;
  padding: 0 11px;
  border: 1px solid var(--grey-884);
  border-radius: 8px;
  background: var(--white);
  color: var(--grey-124);
  font: 400 13px Inter, system-ui, sans-serif;
}

.gate-card input:focus {
  outline: 0;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px var(--focus-glow);
}

.gate-card .primary {
  height: 36px;
  justify-content: center;
  font-size: 12.5px;
}

.gate-card .primary:disabled {
  opacity: .6;
}

.gate-err {
  margin: 0;
  padding: 8px 10px;
  border-radius: 7px;
  background: var(--danger-surface);
  color: var(--danger-text-1);
  font-size: 12px;
  line-height: 1.4;
}

.gate-err[hidden] {
  display: none;
}

.gate-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-13);
}

.gate-links button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font: 600 12px Inter, system-ui, sans-serif;
  cursor: pointer;
}

.gate-links button:hover {
  text-decoration: underline;
}

/* Turnstile's check takes no room until it needs a click */
.gate-captcha {
  margin: -7px 0; /* no extra gap while it's invisible */
}

.gate-captcha:empty {
  display: none;
}

.gate-consent {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--text-13);
}

/* Privacy · Terms · Contact, at the foot of the sign-in card */
.gate-legal {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 2px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line-3);
  font-size: 11px;
  color: var(--text-faint);
}

.gate-consent a,
.gate-legal a {
  color: var(--link);
  text-decoration: none;
}

.gate-legal a {
  color: var(--text-13);
}

.gate-consent a:hover,
.gate-legal a:hover {
  text-decoration: underline;
}

[data-theme="dark"] .gate-consent a {
  color: var(--accent-text-4);
}

html.gated body {
  overflow: hidden;
}

/* Shown inside another site's frame: show nothing (js/early.js) */
html.framed body {
  display: none;
}

html.booting .app {
  visibility: hidden;
}

.profile-link.danger {
  color: var(--danger-text-2);
}

.profile-ok {
  margin: 0 0 8px;
  color: var(--green-324);
  font-size: 12px;
}

.profile-ok[hidden] {
  display: none;
}

[data-theme="dark"] .gate-card {
  box-shadow: none;
}

[data-theme="dark"] .gate-card input {
  background: var(--surface);
  border-color: var(--line-1);
  color: var(--text-4);
}

[data-theme="dark"] .gate-links button {
  color: var(--accent-text-4);
}

[data-theme="dark"] .profile-ok,
[data-theme="dark"] .settings-saved {
  color: #7fd0a1;
}

/* Profile: the avatar at the bottom of the rail, and its popup beside it */
.rail .profile-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--white);
  font: 700 9.5px Inter, sans-serif;
  cursor: pointer;
}

.rail .profile-btn:hover,
.rail .profile-btn[aria-expanded="true"] {
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--focus);
}

.rail .profile-btn:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.profile-backdrop {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: rgba(15, 20, 25, .32);
}

.profile-backdrop[hidden] {
  display: none;
}

[data-theme="dark"] .profile-backdrop {
  background: rgba(0, 0, 0, .55);
}

.profile-popup {
  position: fixed;
  z-index: 40;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(340px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: var(--raised);
  border: 1px solid var(--line-4);
  border-radius: 12px;
  box-shadow: 0 16px 40px var(--shade-18), 0 1px 3px var(--shade-08);
  font: 400 12px Inter, system-ui, sans-serif;
  color: var(--text-4);
}

.profile-popup[hidden] {
  display: none;
}

.profile-me {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px;
}

.profile-avatar {
  width: 40px;
  height: 40px;
  font-size: 14px;
}

.profile-who {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.profile-who b {
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-who span {
  font-size: 11.5px;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-me .btn {
  height: 28px;
}

.profile-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--grey-937);
}

.profile-links {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 6px;
}

.profile-label {
  font: 600 9.5px Inter, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.profile-links .profile-label {
  padding: 6px 8px 4px;
}

.profile-label em {
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--grey-696);
  margin-left: 4px;
}

.profile-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text-4);
  font: 500 12px Inter, system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}

a.profile-link {
  text-decoration: none;
}

.profile-body .act-warn {
  margin-bottom: 12px;
}

.profile-link svg {
  width: 14px;
  height: 14px;
  color: var(--text-faint);
}

.profile-link:hover:not(:disabled),
.profile-link:focus-visible {
  background: var(--surface-7);
  outline: 0;
}

.profile-link:disabled {
  color: var(--line-6);
  cursor: default;
}

.profile-foot {
  padding: 9px 14px;
  border-top: 1px solid var(--grey-937);
  background: var(--surface-1);
  font-size: 10.5px;
  color: var(--text-faint);
}

.profile-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--grey-937);
  font: 600 12.5px Inter, system-ui, sans-serif;
}

.profile-back {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--text-7);
  cursor: pointer;
}

.profile-back svg {
  width: 15px;
  height: 15px;
}

.profile-back:hover,
.profile-back:focus-visible {
  background: var(--grey-957);
  outline: 0;
}

.profile-body {
  padding: 12px 14px 2px;
}

.profile-body .settings-field {
  margin-bottom: 12px;
}

.profile-email {
  height: 32px;
  padding: 0 10px;
  border: 1px dashed var(--line-5);
  border-radius: 7px;
  background: var(--surface-1);
  color: var(--text-7);
  font: 400 12.5px/30px Inter, system-ui, sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-hint {
  font-size: 10.5px;
  color: var(--text-faint);
}

.profile-body input:focus {
  outline: 0;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px var(--focus-glow);
}

.profile-keys {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 12px;
  margin: 0;
  padding: 12px 14px 14px;
  align-items: center;
}

.profile-keys dt {
  display: flex;
  gap: 3px;
  white-space: nowrap;
}

.profile-keys dd {
  margin: 0;
  color: var(--grey-320);
  font-size: 11.5px;
}

.profile-keys kbd {
  display: inline-block;
  min-width: 18px;
  padding: 1px 5px;
  box-sizing: border-box;
  border: 1px solid var(--grey-884);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--grey-984);
  font: 500 10px "JetBrains Mono", monospace;
  color: var(--grey-255);
  text-align: center;
}

[data-theme="dark"] .profile-popup {
  box-shadow: 0 16px 40px var(--shadow-strong), 0 1px 3px var(--shadow);
}

[data-theme="dark"] .profile-who span {
  color: var(--text-14);
}

[data-theme="dark"] .profile-section,
[data-theme="dark"] .profile-foot,
[data-theme="dark"] .profile-head {
  border-color: var(--line-1);
}

[data-theme="dark"] .profile-back:hover {
  background: var(--surface-7);
}

[data-theme="dark"] .profile-keys dd {
  color: var(--text-6);
}

[data-theme="dark"] .profile-keys kbd {
  background: var(--surface-7);
  border-color: #30353c;
  color: var(--text-4);
}

/* Project settings: a section menu on the left, the sections scrolling on the right */
.settings {
  flex-direction: row;
}

.settings-nav {
  flex: none;
  width: 190px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 16px 10px;
  border-right: 1px solid var(--line-3);
  background: var(--surface-2);
  overflow: auto;
}

.settings-nav-head {
  padding: 0 8px 10px;
  font: 600 9.5px Inter, sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.settings-nav button {
  height: 30px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--grey-255);
  font: 500 12px Inter, system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}

.settings-nav button:hover,
.settings-nav button:focus-visible {
  background: var(--grey-945);
  color: var(--grey-80);
  outline: 0;
}

.settings-nav button.danger {
  margin-top: auto;
  color: var(--danger-strong);
}

.settings-body {
  flex: 1;
  min-width: 0;
  overflow: auto;
  padding: 8px 32px 48px;
  scroll-padding-top: 16px;
}

.settings-section {
  max-width: 680px;
  padding: 22px 0 26px;
  border-bottom: 1px solid var(--line-1);
}

.settings-section h2 {
  margin: 0 0 14px;
  font: 600 15px Inter, system-ui, sans-serif;
  color: var(--grey-124);
}

.settings-section h3 {
  margin: 18px 0 10px;
  font: 600 12px Inter, system-ui, sans-serif;
  color: var(--grey-255);
}

.settings-desc {
  margin: -6px 0 14px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-13);
}

.settings-section .settings-desc:last-child {
  margin: 14px 0 0;
}

.settings-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  min-width: 0;
}

.settings-field[hidden] {
  display: none;
}

.settings-field input[type=text],
.settings-field input[type=time],
.settings-field textarea,
.settings-field select,
.settings-add input {
  box-sizing: border-box;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--grey-884);
  border-radius: 7px;
  background: var(--white);
  color: var(--grey-124);
  font: 400 12.5px Inter, system-ui, sans-serif;
}

.settings-field textarea {
  height: auto;
  padding: 8px 10px;
  line-height: 1.5;
  resize: vertical;
}

.settings-field input:focus,
.settings-field textarea:focus,
.settings-field select:focus,
.settings-add input:focus,
.settings-item input:focus {
  outline: 0;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px var(--focus-glow);
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0 14px;
}

.settings-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.settings-glance {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.settings-glance div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--grey-904);
  border-radius: 8px;
  font-size: 11px;
  color: var(--grey-451);
}

.settings-glance div.wide {
  grid-column: 1/-1;
}

.settings-glance b {
  font: 600 16px Inter, system-ui, sans-serif;
  color: var(--grey-124);
}

.settings-glance div.wide b {
  font-size: 13px;
}

.settings-saved {
  height: 14px;
  margin: 0;
  font-size: 11px;
  color: var(--green-324);
  opacity: 0;
  transition: opacity .2s;
}

.settings-saved.on {
  opacity: 1;
}

.settings-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line-3);
  border-radius: 9px;
  overflow: hidden;
  margin-top: 10px;
}

.settings-list:empty {
  display: none;
}

.settings-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 8px 6px 12px;
  border-top: 1px solid var(--grey-937);
  flex-wrap: wrap;
}

.settings-item:first-child {
  border-top: 0;
}

.settings-item:hover {
  background: var(--grey-984);
}

.settings-item.editing {
  background: #f6f9fb;
}

.settings-item .person-avatar {
  width: 24px;
  height: 24px;
  font-size: 10px;
}

.settings-item input[type=text] {
  flex: 1;
  min-width: 160px;
  height: 30px;
  padding: 0 9px;
  border: 1px solid var(--grey-884);
  border-radius: 7px;
  background: var(--white);
  color: var(--grey-124);
  font: 400 12.5px Inter, system-ui, sans-serif;
}

.settings-name {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--text-3);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.settings-meta {
  font-size: 11.5px;
  color: var(--text-faint);
}

.settings-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}

.settings-actions .popup-edit {
  opacity: 1;
}

.settings-actions .popup-edit:disabled {
  opacity: .3;
  cursor: default;
  background: none;
}

.settings-actions select {
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--grey-884);
  border-radius: 7px;
  background: var(--white);
  color: var(--grey-255);
  font: 500 11.5px Inter, system-ui, sans-serif;
  cursor: pointer;
}

.settings-actions .btn,
.settings-actions .primary {
  height: 28px;
}

.settings-item.editing .person-colors {
  flex-basis: 100%;
  padding-left: 34px;
}

.phase-ring {
  flex: none;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2.5px solid var(--c, var(--purple-753));
  background: var(--surface);
}

.settings-empty {
  margin: 0;
  padding: 12px;
  font-size: 12px;
  color: var(--text-faint);
  font-style: italic;
}

.settings-add {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.settings-add input {
  flex: 1;
  max-width: 320px;
}

.settings-add .btn {
  height: 32px;
}

.settings-section.danger h2 {
  color: var(--danger-strong);
}

.settings-danger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border: 1px solid var(--danger-line);
  border-radius: 9px;
  margin-bottom: 10px;
}

.settings-danger div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  color: var(--grey-451);
}

.settings-danger b {
  font-size: 12.5px;
  color: var(--grey-124);
}

.settings-danger .del,
.profile-popup .del {
  flex: none;
  color: var(--danger-text-2);
  border-color: var(--danger-line);
}

.settings-danger .del:hover:not(:disabled),
.profile-popup .del:hover:not(:disabled) {
  background: #fdf0ef;
}

[data-theme="dark"] .settings-nav button {
  color: var(--text-6);
}

[data-theme="dark"] .settings-nav button:hover,
[data-theme="dark"] .settings-nav button:focus-visible {
  background: #1c2024;
  color: var(--text-1);
}

[data-theme="dark"] .settings-nav button.danger {
  color: var(--danger-text-2);
}

[data-theme="dark"] .settings-section h2,
[data-theme="dark"] .settings-glance b,
[data-theme="dark"] .settings-danger b {
  color: var(--text-1);
}

[data-theme="dark"] .settings-section h3 {
  color: var(--text-6);
}

[data-theme="dark"] .settings-glance div,
[data-theme="dark"] .settings-danger div {
  color: var(--text-9);
}

[data-theme="dark"] .settings-field input[type=text],
[data-theme="dark"] .settings-field input[type=time],
[data-theme="dark"] .settings-field textarea,
[data-theme="dark"] .settings-field select,
[data-theme="dark"] .settings-add input,
[data-theme="dark"] .settings-item input[type=text],
[data-theme="dark"] .settings-actions select {
  background: var(--raised);
  border-color: var(--line-1);
  color: var(--text-4);
}

[data-theme="dark"] .settings-glance div {
  border-color: var(--line-1);
}

[data-theme="dark"] .settings-item {
  border-top-color: #22272c;
}

[data-theme="dark"] .settings-item:hover {
  background: #171a1e;
}

[data-theme="dark"] .settings-item.editing {
  background: #1a1e22;
}

[data-theme="dark"] .settings-section.danger h2 {
  color: var(--danger-text-2);
}

[data-theme="dark"] .settings-danger .del:hover:not(:disabled),
[data-theme="dark"] .profile-popup .del:hover:not(:disabled) {
  background: var(--danger-surface);
}

/* Calendar: a month or week grid; items as bars (several days) or chips (within a day) */
.cal-toolbar {
  gap: 10px;
}

.cal-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cal-nav .btn {
  height: 28px;
}

.cal-nav .icon-btn {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-5);
  border-radius: 7px;
  background: var(--raised);
  color: var(--text-9);
  cursor: pointer;
}

.cal-nav .icon-btn:hover {
  background: var(--grey-971);
  color: var(--text-1);
}

.cal-title {
  margin: 0 auto 0 6px;
  font: 600 15px Inter, system-ui, sans-serif;
  color: var(--text-3);
  white-space: nowrap;
}

.cal-show {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11.5px;
  color: var(--text-6);
}

.cal-show .checkbox {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.cal-show input {
  accent-color: var(--accent);
  margin: 0;
}

.cal-grid-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

.cal-weekdays {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-3);
}

.cal-weekdays span {
  padding: 6px 8px;
  font: 600 9.5px Inter, sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--grey-451);
}

.cal-weekdays span.weekend {
  color: var(--grey-633);
}

.cal-grid {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.cal-week {
  position: relative;
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-height: 108px;
  border-bottom: 1px solid var(--line-3);
}

.cal.week .cal-week {
  flex: 1;
  min-height: 200px;
}

.cal-day {
  position: relative;
  min-width: 0;
  padding: 5px 7px;
  border-left: 1px solid var(--grey-937);
  cursor: pointer;
}

.cal-day:first-child {
  border-left: 0;
}

.cal-day.weekend {
  background: var(--surface-3);
}

.cal-day.out {
  background: var(--grey-984);
}

.cal-day.out .cal-date {
  color: var(--grey-714);
}

.cal-day:hover {
  background: #f2f6f8;
}

.cal-day.over {
  background: var(--blue-927);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.cal-date {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 9px;
  font: 500 10.5px/18px "JetBrains Mono", monospace;
  color: var(--text-6);
  text-align: center;
}

.cal-day.is-today .cal-date {
  background: var(--accent);
  color: var(--white);
  font-weight: 700;
}

.cal-item {
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
  height: 19px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 6px;
  font: 500 11px/19px Inter, system-ui, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}

.cal-item .name-col {
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-item .cal-time {
  flex: none;
  font: 500 10px "JetBrains Mono", monospace;
  opacity: .8;
}

.cal-item:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.cal-item.dragging {
  opacity: .35;
}

.cal-item.fresh {
  animation: kfresh 2.2s ease-out;
}

.cal-item.cal-bar.head {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.cal-item.cal-bar.tail {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.cal-item.cal-bar.k-task {
  background: var(--c, var(--accent));
  color: var(--white);
}

.cal-item.cal-bar.k-sub {
  background: var(--subtask-fill);
  background: color-mix(in srgb, var(--c, var(--accent)) 28%, var(--white));
  color: var(--subtask-text);
}

.cal-item.cal-bar.k-phase {
  background: var(--purple-947);
  color: var(--purple-261);
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: 10px;
}

.cal-item.cal-bar.k-milestone {
  background: var(--milestone-tint);
  color: #9a5418;
}

.cal-item.cal-bar:hover {
  filter: brightness(.95);
}

.cal-item.cal-chip {
  border-radius: 5px;
  color: var(--grey-124);
}

.cal-item.cal-chip:hover {
  background: var(--grey-931);
}

.cal-item.cal-chip.k-phase {
  color: var(--purple-261);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .03em;
}

.cal-item.done .name-col {
  text-decoration: line-through;
  opacity: .65;
}

.kind-mark {
  flex: none;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid var(--c, var(--accent));
  background: var(--white);
}

.kind-mark.sub {
  width: 7px;
  height: 7px;
  border-width: 1.5px;
}

.kind-mark.ms {
  border: 0;
  border-radius: 1.5px;
  background: var(--milestone);
  transform: rotate(45deg);
}

.kind-mark.ph {
  width: 9px;
  height: 9px;
  border-color: var(--c, var(--purple-753));
}

.cal-item.done .kind-mark {
  background: var(--c, var(--accent));
}

/* A day's own items: listed (a quiet day, or every day in the week view) or summed up */
.cal-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cal-entry,
.cal-group-head,
.cal-summary {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  height: 20px;
  padding: 0 5px;
  border-radius: 5px;
  font: 500 11px/20px Inter, system-ui, sans-serif;
  color: var(--grey-124);
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
}

.cal-entry .name-col,
.cal-group-head .name-col,
.cal-summary .name-col {
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-entry .cal-time,
.cal-group-head .cal-time,
.cal-summary .cal-time {
  flex: none;
  font: 500 10px "JetBrains Mono", monospace;
  color: var(--text-13);
}

.cal-entry:hover,
.cal-summary:hover,
.cal-group-head[data-id]:hover {
  background: var(--grey-931);
}

.cal-entry:focus-visible,
.cal-summary:focus-visible,
.cal-group-head:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.cal-entry.in {
  padding-left: 16px;
}

.cal-entry.k-phase,
.cal-group-head {
  font-weight: 700;
  color: var(--purple-261);
}

.cal-group-head {
  margin-top: 3px;
  background: var(--phase-tint);
  cursor: default;
}

.cal-group-head[data-id] {
  cursor: pointer;
}

.cal-group-head.other {
  background: #f1f3f5;
  color: var(--grey-320);
}

.cal-group-head {
  height: auto;
  flex-wrap: wrap;
  padding: 3px 5px;
  line-height: 15px;
}

.cal-group-head .name-col {
  flex: 1 1 0;
}

.cal-group-head .cal-time {
  flex-basis: 100%;
  padding-left: 14px;
  line-height: 13px;
}

.cal-entry.done .name-col {
  text-decoration: line-through;
  opacity: .65;
}

.cal-entry.done .kind-mark {
  background: var(--c, var(--accent));
}

.cal-entry.dragging {
  opacity: .35;
}

.cal-entry.fresh,
.cal-group-head.fresh {
  animation: kfresh 2.2s ease-out;
}

.cal-summary .name-col {
  font-weight: 600;
  color: var(--phase-text);
}

.cal-count {
  flex: none;
  margin-left: auto;
  min-width: 16px;
  height: 15px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 8px;
  background: var(--purple-947);
  color: var(--purple-261);
  font: 600 10px/15px "JetBrains Mono", monospace;
  text-align: center;
}

.cal-count.all {
  background: var(--green-922);
  color: var(--green-324);
}

.cal-summary.other {
  color: var(--grey-320);
  font-weight: 600;
}

.cal-more {
  align-self: flex-start;
  height: 18px;
  padding: 0 6px;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--grey-320);
  font: 600 10.5px Inter, system-ui, sans-serif;
  cursor: pointer;
}

[data-theme="dark"] .cal-entry,
[data-theme="dark"] .cal-summary {
  color: var(--text-4);
}

[data-theme="dark"] .cal-summary.other {
  color: var(--text-9);
}

[data-theme="dark"] .cal-entry:hover,
[data-theme="dark"] .cal-summary:hover,
[data-theme="dark"] .cal-group-head[data-id]:hover {
  background: var(--surface-7);
}

[data-theme="dark"] .cal-entry.k-phase,
[data-theme="dark"] .cal-group-head {
  color: var(--phase-text);
}

[data-theme="dark"] .cal-group-head {
  background: #221f36;
}

[data-theme="dark"] .cal-group-head.other {
  background: #1c2024;
  color: var(--text-6);
}

[data-theme="dark"] .cal-count {
  background: #2a2545;
  color: #ddd6fb;
}

[data-theme="dark"] .cal-count.all {
  background: #17301f;
  color: #7fd0a1;
}

.cal-more:hover,
.cal-more:focus-visible {
  background: var(--grey-906);
  color: var(--grey-80);
  outline: 0;
}

[data-theme="dark"] .cal-nav .icon-btn:hover {
  background: var(--surface-6);
}

[data-theme="dark"] .cal-weekdays span {
  color: var(--text-9);
}

[data-theme="dark"] .cal-day {
  border-left-color: #22272c;
}

[data-theme="dark"] .cal-day.out {
  background: #111416;
}

[data-theme="dark"] .cal-day.out .cal-date {
  color: #4a5159;
}

[data-theme="dark"] .cal-day:hover {
  background: #1a1e22;
}

[data-theme="dark"] .cal-day.over {
  background: #16303a;
}

[data-theme="dark"] .cal-item.cal-chip {
  color: var(--text-4);
}

[data-theme="dark"] .cal-item.cal-chip:hover {
  background: var(--surface-7);
}

[data-theme="dark"] .cal-item.cal-chip.k-phase {
  color: var(--phase-text);
}

[data-theme="dark"] .cal-item.cal-bar.k-phase {
  background: #2a2545;
  color: #ddd6fb;
}

[data-theme="dark"] .cal-item.cal-bar.k-milestone {
  background: #3a2a14;
  color: #f0b06c;
}

[data-theme="dark"] .kind-mark {
  background: var(--surface);
}

[data-theme="dark"] .kind-mark.ms {
  background: #d4802c;
}

[data-theme="dark"] .kind-mark.ph {
  border-color: var(--c, #6e63b8);
}

[data-theme="dark"] .cal-more {
  color: var(--text-9);
}

[data-theme="dark"] .cal-more:hover {
  background: var(--surface-7);
  color: var(--text-1);
}

/* Workload: the timeline by person. Rows are people, overload is tinted red */
/* Each person's block: a faint tint of their colour across the chart, a stronger line between people */
.workload-band {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
  background: rgba(65, 141, 171, .05);
  background: color-mix(in srgb, var(--c, var(--accent)) 6%, transparent);
}

.workload-band.none {
  background: repeating-linear-gradient(135deg, rgba(120, 130, 140, .05) 0 8px, transparent 8px 16px);
}

.workload-sep {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--grey-853);
  pointer-events: none;
}

.workload-overlap {
  position: absolute;
  background: repeating-linear-gradient(135deg, rgba(207, 70, 70, .13) 0 6px, rgba(207, 70, 70, .06) 6px 12px);
  border-left: 1.5px solid var(--danger-edge);
  border-right: 1.5px solid var(--danger-edge);
  box-sizing: border-box;
}

.workload-group {
  position: absolute;
  box-sizing: border-box;
  height: 20px;
  padding: 0 9px;
  border-radius: 10px;
  background: var(--accent-tint);
  border: 1px solid #9cc8da;
  color: var(--accent-text-1);
  font: 500 11px/18px Inter, sans-serif;
  white-space: nowrap;
  cursor: pointer;
}

.workload-group b {
  font-weight: 700;
}

/* Timeline rows in day view and coarser: a pill per row with its marker and time */
.row-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
}

.row-pill i {
  flex: none;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid var(--c, var(--accent));
  background: var(--white);
}

.row-pill i.sub {
  width: 7px;
  height: 7px;
  border-width: 1.5px;
}

.row-pill i.ms {
  border: 0;
  border-radius: 1.5px;
  background: var(--milestone);
  transform: rotate(45deg);
}

.row-pill i.ph {
  width: 10px;
  height: 10px;
  border-color: var(--c, var(--purple-753));
}

[data-theme="dark"] .row-pill i {
  background: var(--surface);
}

[data-theme="dark"] .row-pill i.ms {
  background: #d4802c;
}

[data-theme="dark"] .row-pill i.ph {
  border-color: var(--c, #6e63b8);
}

.workload-group:hover,
.workload-group:focus-visible {
  background: #d6eaf3;
  border-color: var(--accent);
  outline: 0;
}

/* Lit up for a moment after going to an item inside it */
.workload-group.fresh {
  animation: gfresh 1.4s ease-out 2;
}

@keyframes gfresh {
  0%,
  40% {
    border-color: #418dab;
    box-shadow: 0 0 0 4px rgba(65, 141, 171, .3);
  }
}

.task-row.workload-person {
  align-items: flex-start;
  gap: 9px;
  padding: 4px 10px 0 9px;
  box-sizing: border-box;
  border-left: 3px solid var(--c, var(--grey-696));
  border-bottom: 2px solid var(--grey-853);
  cursor: pointer;
  background: var(--grey-971);
  background: color-mix(in srgb, var(--c, var(--grey-696)) 9%, var(--grey-971));
}

.task-row.workload-person.none {
  border-left-color: var(--grey-790);
  background: #f3f4f6;
}

.task-row.workload-person:hover {
  background: color-mix(in srgb, var(--c, var(--grey-696)) 16%, var(--grey-971));
}

.task-row.workload-person:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.task-row.workload-person .person-avatar {
  width: 20px;
  height: 20px;
  margin-top: 4px;
  font-size: 9px;
}

.task-row.workload-person .person-avatar.none {
  box-sizing: border-box;
  border: 1.5px dashed var(--grey-696);
  background: transparent;
}

.workload-who {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.workload-who .row-name {
  font-weight: 600;
  line-height: 14px;
}

.workload-sub {
  font-size: 10px;
  line-height: 12px;
  color: var(--text-14);
  overflow: hidden;
  text-overflow: ellipsis;
}

.workload-dot {
  flex: none;
  width: 7px;
  height: 7px;
  margin: 10px 2px 0 0;
  border-radius: 50%;
  background: var(--grey-714);
}

.workload-dot.ok {
  background: var(--success);
}

.workload-dot.over {
  background: #cf4646;
  box-shadow: 0 0 0 3px rgba(207, 70, 70, .18);
}

.app[data-page="workload"] .task-panel .caret {
  display: none;
}

[data-theme="dark"] .workload-sep {
  background: #30363d;
}

[data-theme="dark"] .workload-group {
  background: #16303a;
  border-color: var(--accent-line);
}

[data-theme="dark"] .workload-group:hover,
[data-theme="dark"] .workload-group:focus-visible {
  background: #1d3d4a;
  border-color: #5aa6c4;
}

[data-theme="dark"] .task-row.workload-person {
  border-bottom-color: #2f353b;
  background: color-mix(in srgb, var(--c, var(--line-6)) 14%, var(--surface-1));
}

[data-theme="dark"] .task-row.workload-person.none {
  border-left-color: #4a5159;
  background: var(--raised);
}

[data-theme="dark"] .workload-band {
  background: color-mix(in srgb, var(--c, var(--accent)) 9%, transparent);
}

[data-theme="dark"] .task-row.workload-person:hover {
  background: color-mix(in srgb, var(--c, var(--line-6)) 22%, var(--surface-1));
}

[data-theme="dark"] .task-row.workload-person .person-avatar.none {
  border-color: var(--line-6);
}

/* Board: kanban columns of cards */
.toolbar-label {
  font: 600 9.5px Inter, sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.segmented {
  display: inline-flex;
  border: 1px solid var(--line-5);
  border-radius: 7px;
  padding: 2px;
  gap: 1px;
}

.segmented button {
  height: 22px;
  padding: 0 9px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--grey-320);
  font: 500 11px Inter, system-ui, sans-serif;
  cursor: pointer;
}

.segmented button:hover {
  color: var(--grey-80);
}

.segmented button[aria-pressed="true"] {
  background: var(--grey-80);
  color: var(--white);
}

.segmented button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.board-toolbar .toolbar-label+.segmented {
  margin-left: -2px;
}

.board-toolbar .btn {
  height: 28px;
}

.toggle-btn[aria-pressed="true"] {
  background: var(--accent-surface);
  border-color: var(--accent-line);
  color: var(--accent-text-1);
}

.board-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--surface-4);
  user-select: none;
}

.board-scroll.dragging,
.board-scroll.dragging * {
  cursor: grabbing!important;
}

.board-scroll.dragging .card:hover {
  border-color: var(--grey-904);
  box-shadow: 0 1px 2px var(--shade-05);
}

.board-columns {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 100%;
  padding: 12px;
  box-sizing: border-box;
}

.board-col {
  flex: 1 0 200px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  max-height: 100%;
  border-radius: 10px;
  background: #eef0f3;
  border: 1px solid var(--grey-904);
  transition: background .12s, border-color .12s;
}

.board.compact .board-col {
  flex: 0 0 180px;
}

.board-col.over {
  background: var(--blue-927);
  border-color: var(--accent);
}

.board-col.fresh {
  animation: colfresh 2.2s ease-out;
}

@keyframes colfresh {
  0%,
  45% {
    border-color: #418dab;
    box-shadow: 0 0 0 3px rgba(65, 141, 171, .25);
  }
}

.board-col-hide {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  margin: -6px -6px -6px -2px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--text-faint);
  cursor: pointer;
  opacity: 0;
}

.board-col-hide svg {
  width: 13px;
  height: 13px;
}

.board-col-head:hover .board-col-hide,
.board-col-hide:focus-visible {
  opacity: 1;
}

.board-col-hide:hover {
  background: var(--surface-6);
  color: var(--text-3);
}

.board-col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 8px;
  font: 600 10px Inter, sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-6);
}

.board-col-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-col-count {
  font: 500 10.5px "JetBrains Mono", monospace;
  color: var(--text-faint);
  letter-spacing: 0;
}

.col-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #9aa3ad;
}

.col-dot.active {
  background: #3b82d6;
}

.col-dot.done {
  background: var(--success);
}

.col-dot.ms {
  background: var(--milestone);
}

.col-dot.ph {
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  background: var(--white);
  border: 2px solid var(--c, var(--purple-753));
}

.col-dot.none {
  background: transparent;
  border: 1.5px dashed var(--grey-696);
  box-sizing: border-box;
}

.col-dot.day {
  background: var(--accent);
}

.board-col-head .person-avatar {
  width: 18px;
  height: 18px;
  font-size: 8.5px;
  letter-spacing: .02em;
}

.board-col-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 2px 8px 4px;
  overflow-y: auto;
  min-height: 40px;
}

.board-col-empty {
  margin: 4px 0;
  padding: 14px 10px;
  border: 1.5px dashed var(--grey-857);
  border-radius: 8px;
  text-align: center;
  color: var(--text-faint);
  font-size: 11px;
}

.board-col-add {
  margin: 4px 8px 8px;
  height: 30px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--text-13);
  font: 500 11.5px Inter, system-ui, sans-serif;
  text-align: left;
  padding: 0 8px;
  cursor: pointer;
}

.board-col-add:hover,
.board-col-add:focus-visible {
  background: #e2e6ea;
  color: var(--text-3);
  outline: 0;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 11px 10px 13px;
  border-radius: 8px;
  background: var(--white);
  border: 1px solid var(--grey-904);
  box-shadow: 0 1px 2px var(--shade-05);
  cursor: pointer;
  overflow: hidden;
}

.card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--c, var(--accent));
}

.card.ms::before {
  background: var(--milestone);
}

.card.plain::before {
  display: none;
}

.card:hover {
  border-color: var(--grey-829);
  box-shadow: 0 3px 10px var(--shade-08);
}

.card:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.card.dragging {
  opacity: .4;
}

.card.fresh {
  animation: kfresh 2.2s ease-out;
}

@keyframes kfresh {
  0%,
  45% {
    background: #e1f0f6;
    border-color: #418dab;
  }
}

.board.compact .card {
  padding: 7px 9px 7px 11px;
  gap: 4px;
}

.card-phase {
  font: 600 9px Inter, sans-serif;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-name {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font: 500 12.5px/1.35 Inter, system-ui, sans-serif;
  color: var(--grey-124);
  overflow-wrap: anywhere;
}

.card.sub .card-name {
  font-weight: 400;
  color: var(--text-6);
}

.board.compact .card-name {
  font-size: 12px;
}

.card-diamond {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 1.5px;
  background: var(--milestone);
  transform: translateY(-1px) rotate(45deg);
}

.card-parent {
  font-size: 10.5px;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.card-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.card-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}

.card-date {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: 400 10.5px "JetBrains Mono", monospace;
  color: var(--text-10);
  white-space: nowrap;
}

.card-date svg {
  width: 11px;
  height: 11px;
  color: var(--text-faint);
}

.card-meta .status {
  height: 17px;
  font-size: 10px;
  padding: 0 7px;
}

.card-person {
  flex: none;
  display: inline-flex;
}

.card-person .person-avatar {
  width: 20px;
  height: 20px;
  font-size: 9px;
}

.card-progress {
  display: block;
  height: 4px;
  margin-top: 3px;
  border-radius: 2px;
  background: var(--surface-10);
  overflow: hidden;
}

.card-progress b {
  display: block;
  height: 100%;
  background: var(--c, var(--accent));
  border-radius: 2px;
}

.board-empty {
  margin: 24px;
  color: var(--text-faint);
  font-style: italic;
}

.board-empty button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-style: normal;
  font-weight: 600;
  color: var(--link);
  cursor: pointer;
}

[data-theme="dark"] .segmented button {
  color: var(--text-9);
}

[data-theme="dark"] .segmented button:hover {
  color: var(--text-1);
}

[data-theme="dark"] .segmented button[aria-pressed="true"] {
  background: var(--text-1);
  color: var(--on-strong);
}

[data-theme="dark"] .board-col {
  background: #171a1e;
  border-color: #23282d;
}

[data-theme="dark"] .board-col.over {
  background: #16303a;
  border-color: #5aa6c4;
}

[data-theme="dark"] .col-dot.ph {
  background: var(--surface);
  border-color: var(--c, #6e63b8);
}

[data-theme="dark"] .col-dot.none {
  border-color: var(--line-6);
}

[data-theme="dark"] .board-col-empty {
  border-color: var(--line-1);
  color: var(--text-faint);
}

[data-theme="dark"] .board-col-add:hover,
[data-theme="dark"] .board-col-add:focus-visible {
  background: var(--surface-7);
}

[data-theme="dark"] .card {
  background: #1c2024;
  border-color: var(--line-1);
  box-shadow: none;
}

[data-theme="dark"] .card:hover {
  border-color: #3a4047;
}

[data-theme="dark"] .card.fresh {
  animation-name: kfreshd;
}

@keyframes kfreshd {
  0%,
  45% {
    background: #1d3440;
    border-color: #5aa6c4;
  }
}

[data-theme="dark"] .card-name {
  color: #eef0f2;
}

[data-theme="dark"] .board-empty button {
  color: var(--accent-text-4);
}

/* Project tag: the pill takes the tag's colour (--c); clicking opens the tag popup */
.tag-wrap {
  position: relative;
  display: inline-flex;
}

button.pill {
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
}

.pill {
  background: color-mix(in srgb, var(--c, var(--accent)) 12%, var(--white));
  border-color: color-mix(in srgb, var(--c, var(--accent)) 32%, var(--white));
  color: color-mix(in srgb, var(--c, var(--accent)) 75%, var(--black));
}

.pill:hover {
  background: color-mix(in srgb, var(--c, var(--accent)) 20%, var(--white));
}

.pill:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.pill.empty {
  background: transparent;
  border-style: dashed;
  border-color: var(--grey-790);
  color: var(--grey-451);
}

.popup,
.search-results {
  position: absolute;
  top: calc(100% + 6px);
  z-index: 25;
  background: var(--raised);
  border: 1px solid var(--line-4);
  border-radius: 10px;
  box-shadow: 0 12px 32px var(--shadow-strong), 0 1px 3px var(--shadow);
  font: 400 12px Inter, system-ui, sans-serif;
  color: var(--text-4);
  white-space: normal;
}

.popup {
  left: 0;
  width: 280px;
}

.popup[hidden],
.search-results[hidden] {
  display: none;
}

.popup-head {
  padding: 11px 14px 4px;
  font: 600 9.5px Inter, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.popup-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 10px 10px;
}

.popup-body input[type=text] {
  box-sizing: border-box;
  width: 100%;
  height: 30px;
  padding: 0 9px;
  border: 1px solid var(--grey-884);
  border-radius: 7px;
  background: var(--white);
  color: var(--grey-124);
  font: 400 12px Inter, system-ui, sans-serif;
}

.popup-body input[type=text]:focus {
  outline: 0;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px var(--focus-glow);
}

.popup-list {
  display: flex;
  flex-direction: column;
  max-height: 220px;
  overflow: auto;
  margin: 0 -4px;
}

.popup-row {
  display: flex;
  align-items: center;
  border-radius: 6px;
}

.popup-row:hover,
.popup-row:focus-within {
  background: var(--surface-7);
}

.popup-pick {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 8px;
  border: 0;
  background: none;
  color: inherit;
  font: 500 12px Inter, system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
}

.popup-pick:focus-visible,
.popup-edit:focus-visible,
.popup-create:focus-visible,
.popup-remove:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
  border-radius: 6px;
}

.popup-pick i {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 3px;
}

.popup-pick span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.popup-row.on .popup-pick span {
  font-weight: 600;
}

.popup-row.on .popup-pick::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  background: var(--focus);
  -webkit-mask: var(--icon-check) center / contain no-repeat;
  mask: var(--icon-check) center / contain no-repeat;
}

/* Tags tick on and off: a box per row, ticked for this project's tags */
.popup-row.on .popup-check::after {
  content: none;
}

.popup-box {
  flex: none;
  width: 14px;
  height: 14px;
  box-sizing: border-box;
  border: 1.5px solid var(--line-6);
  border-radius: 4px;
}

.popup-row.on .popup-box {
  border-color: var(--accent);
  background: var(--accent) var(--icon-check-white) center / 75% no-repeat;
}

.popup-check em {
  flex: none;
  font-style: normal;
  font-size: 10px;
  color: var(--text-faint);
}

.popup-count {
  margin-right: auto;
  font-size: 11px;
  color: var(--text-faint);
}

.popup-foot .popup-remove {
  margin-right: 0;
}

.pill-more {
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--c, var(--accent)) 22%, var(--white));
  font-size: 9px;
  letter-spacing: 0;
}

.settings-row.wrap {
  flex-wrap: wrap;
}

[data-theme="dark"] .pill-more {
  background: color-mix(in srgb, var(--c, var(--accent)) 35%, #0e1012);
}

.popup-edit {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  margin-right: 3px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--text-15);
  cursor: pointer;
  opacity: 0;
}

.popup-edit svg {
  width: 12px;
  height: 12px;
}

.popup-row:hover .popup-edit,
.popup-edit:focus-visible {
  opacity: 1;
}

.popup-edit:hover {
  background: var(--grey-906);
  color: var(--grey-124);
}

.popup-create {
  display: block;
  width: 100%;
  height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--accent-text-4);
  font: 600 12px Inter, system-ui, sans-serif;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.popup-create:hover {
  background: var(--accent-surface);
}

.popup-empty,
.popup-note {
  margin: 0;
  padding: 2px 4px;
  color: var(--text-faint);
  font-size: 11px;
}

.popup-error {
  margin: 0;
  color: var(--danger-text-2);
  font-size: 11px;
}

.popup-error[hidden] {
  display: none;
}

.popup-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 9px 10px;
  border-top: 1px solid var(--line-1);
}

.popup-foot .btn,
.popup-foot .primary {
  height: 28px;
}

.popup-foot .del {
  margin-right: auto;
  color: var(--danger-text-2);
}

.popup-foot .del.armed {
  background: var(--danger);
  border-color: var(--danger);
  color: var(--white);
}

.popup-remove {
  margin-right: auto;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--danger-text-2);
  font: 600 11.5px Inter, system-ui, sans-serif;
  cursor: pointer;
}

.popup-remove:hover {
  text-decoration: underline;
}

/* Search: a box in the top bar with live results under it */
.search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 6px 0 10px;
  box-sizing: border-box;
  border: 1px solid var(--grey-884);
  border-radius: 7px;
  background: var(--raised);
  color: var(--text-13);
}

.search svg {
  flex: none;
  width: 13px;
  height: 13px;
}

.search input {
  width: 130px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--grey-124);
  font: 500 11.5px Inter, system-ui, sans-serif;
  transition: width .15s ease;
}

.search input::placeholder {
  color: var(--text-9);
}

.search:focus-within {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px var(--focus-glow-soft);
}

.search:focus-within input {
  width: 190px;
}

.search:focus-within .shortcut {
  display: none;
}

.search-results {
  left: 0;
  width: 380px;
  max-width: calc(100vw - 24px);
  max-height: min(420px, 70vh);
  overflow: auto;
  padding: 4px;
}

.search-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border-radius: 7px;
  cursor: pointer;
}

.search-result[aria-selected="true"] {
  background: #eef3f6;
}

.search-result .list-icon {
  margin: 0 1px;
}

.search-result-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.search-result-name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result-name mark {
  background: #fdeeb5;
  color: inherit;
  border-radius: 2px;
}

.search-result-meta {
  font-size: 10.5px;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-result-date {
  flex: none;
  font: 400 10px "JetBrains Mono", monospace;
  color: var(--text-faint);
  white-space: nowrap;
}

.search-empty {
  padding: 12px 10px;
  color: var(--text-faint);
  font-style: italic;
}

[data-theme="dark"] .pill {
  background: color-mix(in srgb, var(--c, var(--accent)) 20%, #0e1012);
  border-color: color-mix(in srgb, var(--c, var(--accent)) 42%, #0e1012);
  color: color-mix(in srgb, var(--c, var(--accent)) 55%, var(--white));
}

[data-theme="dark"] .pill:hover {
  background: color-mix(in srgb, var(--c, var(--accent)) 30%, #0e1012);
}

[data-theme="dark"] .pill.empty {
  background: transparent;
  border-color: #3a4047;
  color: var(--text-9);
}

[data-theme="dark"] .popup-body input[type=text] {
  background: var(--surface);
  border-color: var(--line-1);
  color: var(--text-4);
}

[data-theme="dark"] .popup-edit:hover {
  background: var(--line-1);
  color: var(--text-1);
}

[data-theme="dark"] .search {
  border-color: var(--line-1);
}

[data-theme="dark"] .search input {
  color: var(--text-4);
}

[data-theme="dark"] .search-result[aria-selected="true"] {
  background: var(--surface-7);
}

[data-theme="dark"] .search-result-name mark {
  background: #5a4a14;
}

/* Project switcher (under the project name) */
.project-popup {
  width: 300px;
}

.project-popup .popup-pick em {
  flex: none;
  font-style: normal;
  font-size: 10.5px;
  color: var(--text-faint);
}

.popup-subhead {
  margin: 6px 4px 0;
  font: 600 9.5px Inter, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.popup-delete:hover {
  color: var(--danger-strong);
}

.popup-delete.armed {
  opacity: 1;
  background: var(--danger);
  color: var(--white);
}

/* Actions menu */
.actions-wrap {
  position: relative;
}

.dropdown.actions-menu {
  left: auto;
  right: 0;
  top: calc(100% + 6px);
  bottom: auto;
  transform: none;
  min-width: 250px;
}

.dropdown-head {
  padding: 6px 8px 2px;
  font: 600 9.5px Inter, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.dropdown.actions-menu button {
  height: auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 6px 8px;
  font-size: 11.5px;
}

.dropdown.actions-menu button em {
  font-style: normal;
  font-weight: 400;
  font-size: 10.5px;
  color: var(--text-faint);
}

.dropdown.actions-menu button.danger {
  color: var(--danger-text-2);
}

/* The small dialog: Save as template, Reset project */
.dialog.dialog-small {
  width: min(420px, calc(100vw - 32px));
}

.dialog-small .dialog-body {
  gap: 12px;
}

/* New project: start blank or from a template */
.new-project-from {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow: auto;
}

.new-project-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--line-5);
  border-radius: 8px;
  cursor: pointer;
}

.new-project-option:hover {
  background: #f8f9fb;
}

.new-project-option:has(input:checked) {
  border-color: var(--accent);
  background: #eef5f8;
}

.new-project-option input {
  margin: 0;
  accent-color: var(--accent);
}

.new-project-option span {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.new-project-option b {
  font-size: 12.5px;
  font-weight: 600;
}

.new-project-option em {
  font-style: normal;
  font-size: 11px;
  color: var(--text-faint);
}

[data-theme="dark"] .new-project-option:hover {
  background: #1c2024;
}

[data-theme="dark"] .new-project-option:has(input:checked) {
  background: #16303a;
}

.act-note {
  margin: 0;
  font-size: 11.5px;
  color: var(--text-13);
  line-height: 1.45;
}

.act-warn {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--danger-surface);
  border: 1px solid var(--danger-line);
  color: var(--danger-text-1);
  font-size: 12px;
  line-height: 1.45;
}

.dialog-small .dialog-foot .del:disabled {
  opacity: .45;
  filter: none;
  cursor: not-allowed;
}

/* Notes: a personal checklist popup */
.notes-wrap {
  position: relative;
}

.notes-badge {
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  box-sizing: border-box;
  border-radius: 8px;
  background: var(--accent);
  color: var(--white);
  font: 700 9.5px/16px Inter, sans-serif;
  text-align: center;
}

.notes-badge[hidden] {
  display: none;
}

.notes-popup {
  position: fixed;
  z-index: 60;
  width: 340px;
  max-width: calc(100vw - 24px);
  background: var(--raised);
  border: 1px solid var(--line-4);
  border-radius: 10px;
  box-shadow: 0 12px 32px var(--shadow-strong), 0 1px 3px var(--shadow);
  font: 400 12px Inter, system-ui, sans-serif;
  color: var(--text-4);
}

.notes-popup[hidden] {
  display: none;
}

.notes-hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.notes-summary {
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  font-size: 10.5px;
}

.note-add {
  padding: 6px 10px 6px;
}

.note-add input,
.note-input {
  box-sizing: border-box;
  width: 100%;
  height: 30px;
  padding: 0 9px;
  border: 1px solid var(--grey-884);
  border-radius: 7px;
  background: var(--white);
  color: var(--grey-124);
  font: 400 12px Inter, system-ui, sans-serif;
}

.note-add input:focus,
.note-input:focus {
  outline: 0;
  border-color: var(--focus);
  box-shadow: 0 0 0 3px var(--focus-glow);
}

.note-input {
  flex: 1;
  height: 26px;
}

.note-list {
  list-style: none;
  margin: 0;
  padding: 2px 6px 6px;
  max-height: 280px;
  overflow: auto;
}

.note {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 3px 4px 3px 6px;
  border-radius: 6px;
}

.note:hover {
  background: var(--grey-965);
}

.note[draggable="true"] {
  cursor: grab;
}

.note.dragging {
  opacity: .35;
}

.note.drop-before {
  box-shadow: inset 0 2px 0 var(--focus);
}

.note.drop-after {
  box-shadow: inset 0 -2px 0 var(--focus);
}

.note-check {
  position: relative;
  flex: none;
  display: grid;
  cursor: pointer;
}

.note-check input {
  position: absolute;
  opacity: 0;
  width: 16px;
  height: 16px;
  margin: 0;
  cursor: pointer;
}

.note-check span {
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 1.5px solid var(--grey-696);
  border-radius: 50%;
  transition: background .12s, border-color .12s;
}

.note-check input:checked+span {
  border-color: var(--success);
  background: var(--success) var(--icon-check-white) center / 75% no-repeat;
}

.note-check input:focus-visible+span {
  box-shadow: 0 0 0 3px rgba(71, 144, 173, .3);
}

.note-check:hover span {
  border-color: var(--success);
}

.note-text {
  flex: 1;
  min-width: 0;
  padding: 4px 2px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  cursor: text;
  border-radius: 4px;
}

.note-text:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

.note.done .note-text {
  color: var(--text-faint);
  text-decoration: line-through;
}

.note-delete {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--text-faint);
  cursor: pointer;
  opacity: 0;
}

.note-delete svg {
  width: 11px;
  height: 11px;
}

/* Move up / Move down, shown like Delete: on hover or keyboard focus */
.note-move {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: none;
  color: var(--text-faint);
  cursor: pointer;
  opacity: 0;
}

.note-move svg {
  width: 12px;
  height: 12px;
}

.note-move:hover:not(:disabled) {
  background: var(--surface-6);
  color: var(--text-3);
}

.note-move:disabled {
  cursor: default;
}

.note:hover .note-delete,
.note-delete:focus-visible,
.note:hover .note-move:not(:disabled),
.note:focus-within .note-move:not(:disabled),
.note-move:focus-visible {
  opacity: 1;
}

.note-delete:hover {
  background: #fbe9e7;
  color: var(--danger-text-2);
}

.notes-empty {
  padding: 10px 8px 12px;
  color: var(--text-faint);
  font-style: italic;
  line-height: 1.4;
}

.notes-done-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px 4px;
  border-top: 1px solid var(--line-1);
}

.notes-fold {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-13);
  font: 600 11px Inter, system-ui, sans-serif;
  cursor: pointer;
}

.notes-fold svg {
  transition: transform .15s;
}

.notes-fold[aria-expanded="true"] svg {
  transform: rotate(90deg);
}

.notes-clear {
  padding: 0;
  border: 0;
  background: none;
  color: var(--danger-text-2);
  font: 500 11px Inter, system-ui, sans-serif;
  cursor: pointer;
}

.notes-clear:hover,
.notes-fold:hover {
  text-decoration: underline;
}

[data-theme="dark"] button.name:hover,
[data-theme="dark"] button.name[aria-expanded="true"] {
  background: #1c2024;
}

[data-theme="dark"] .dropdown.actions-menu button em {
  color: var(--text-14);
}

[data-theme="dark"] .note-add input,
[data-theme="dark"] .note-input {
  background: var(--surface);
  border-color: var(--line-1);
  color: var(--text-4);
}

[data-theme="dark"] .note:hover {
  background: var(--surface-6);
}

[data-theme="dark"] .note-check span {
  border-color: var(--line-6);
}

[data-theme="dark"] .note-delete:hover {
  background: var(--danger-surface);
}

/* Printing (the browser's own Print, Ctrl+P): just the page you're on, without the app's controls */
@media print {
  .tools,
  .rail,
  .status-bar,
  .dock,
  .toolbar,
  .task-panel .caret,
  .board-col-add {
    display: none!important;
  }

  .app {
    height: auto;
    min-height: 0;
  }

  .panel {
    border: 0;
    margin: 0;
  }

  .scroll,
  .list-scroll,
  .board-scroll {
    overflow: visible!important;
  }
}

/* Button tooltips (see js/app/start.js) */
.tip {
  position: fixed;
  z-index: 60;
  max-width: 280px;
  padding: 4px 8px;
  border-radius: 5px;
  background: var(--grey-124);
  color: var(--on-strong);
  font: 500 11px/1.35 Inter, system-ui, sans-serif;
  overflow-wrap: anywhere;
  pointer-events: none;
  box-shadow: 0 4px 12px var(--shade-18);
}

.tip[hidden] {
  display: none;
}

[data-theme="dark"] .tip {
  background: #e9ecef;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
}

@media (max-width: 980px) {
  .shortcut {
    display: none;
  }
}

@media (max-width: 760px) {
  .app {
    height: auto;
    min-height: 100vh;
  }

  .top {
    padding: 12px 14px 10px;
  }

  .btn .btn-label {
    display: none;
  }

  .panel {
    margin: 0 12px;
    height: 72vh;
    min-height: 460px;
    flex: none;
  }

  .rail {
    width: 34px;
  }

  .rail-btn {
    width: 34px;
    height: 34px;
  }

  .task-panel {
    display: none;
  }

  .list,
  .board,
  .cal,
  .settings {
    left: 34px;
  }

  .settings-nav {
    display: none;
  }

  .item-count {
    margin-left: 0;
  }

  .search input,
  .search:focus-within input {
    width: 90px;
  }

  .status-bar {
    padding: 10px 14px 14px;
  }

  .stack {
    display: none;
  }

  .app {
    min-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }

  /* New task as just its + so the tools fit one row; its name is still read out */
  .top [data-new-task] {
    justify-content: center;
    width: 34px;
    padding: 0;
    gap: 0;
    font-size: 0;
  }

  /* Popups from the top bar open full width under the header instead of off the edge */
  .top {
    position: relative;
  }

  .project-wrap,
  .tag-wrap,
  .search {
    position: static;
  }

  .popup,
  .project-popup,
  .search-results {
    left: 14px;
    right: 14px;
    width: auto;
    max-width: none;
  }

  /* The week view keeps readable columns and scrolls sideways */
  .cal.week .cal-weekdays,
  .cal.week .cal-grid {
    min-width: 700px;
  }
}

@media (max-width: 420px) {
  .btn-group {
    display: none;
  }
}

/* Touch screens: text boxes at 16px, so phones (iPhones especially) don't zoom in when you tap one */
@media (hover: none) {
  .note-delete,
  .note-move:not(:disabled),
  .popup-edit,
  .hide-col-btn {
    opacity: 1;
  }

  .task-row[data-id] .more {
    display: grid;
  }

  .board-col-hide {
    opacity: 1;
  }
}

@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select,
  textarea {
    font-size: 16px!important;
  }
}