:root {
  --bg: #0b0b0c;
  --panel: #131314;
  --panel-raised: #1a1a1c;
  --row-a: #131314;
  --row-b: #17171a;
  --border: #3d3d42;
  --border-strong: #5c5c63;
  --text: #f2f2f0;
  --text-dim: #adadb3;
  --accent: #f2f2f0;
  --accent-text: #0b0b0c;
  /* LGG's identity is monochrome (charcoal + #f2f2f0 white), so the selection
     highlight is the brand white as a low-alpha tint rather than a new hue. */
  --highlight: rgba(242, 242, 240, 0.1);
  /* Tints previewing what a hovered control will do. */
  --delete-hover: rgba(226, 68, 92, 0.16);
  --duplicate-hover: rgba(0, 200, 117, 0.14);
  --rename-hover: rgba(245, 166, 35, 0.14);

  --not-started: #7a7ea0;
  --working: #f5a623;
  --stuck: #e2445c;
  --done: #00c875;
  /* Brighter green for hovering an active confirm button. */
  --done-hover: #19e08d;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;

  --control-h: 34px;
}

:root[data-theme="light"] {
  --bg: #ffffff;
  --panel: #ffffff;
  --panel-raised: #f2f2f0;
  --row-a: #ffffff;
  --row-b: #f7f7f6;
  --border: #dedee1;
  --border-strong: #c2c2c7;
  --text: #16161a;
  --text-dim: #63636a;
  --accent: #16161a;
  --accent-text: #ffffff;
  --highlight: rgba(22, 22, 26, 0.08);
  --delete-hover: rgba(226, 68, 92, 0.12);
  --duplicate-hover: rgba(0, 200, 117, 0.12);
  --rename-hover: rgba(245, 166, 35, 0.12);
}

:root[data-theme="light"] .brand-logo {
  filter: invert(1);
}

@font-face {
  font-family: "DunbarText";
  src: url("/static/fonts/DunbarText-Regular.woff2") format("woff2"),
    url("/static/fonts/DunbarText-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DunbarText";
  src: url("/static/fonts/DunbarText-Medium.woff2") format("woff2"),
    url("/static/fonts/DunbarText-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DunbarText";
  src: url("/static/fonts/DunbarText-Bold.woff2") format("woff2"),
    url("/static/fonts/DunbarText-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "DunbarText", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

/* brand header */

.brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  cursor: pointer;
}

.brand-logo {
  height: 20px;
  width: auto;
  display: block;
}

.brand-wordmark {
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  text-transform: uppercase;
  border-left: 1px solid var(--border-strong);
  padding-left: var(--space-2);
}

/* topbar */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-3) var(--space-5);
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

.topbar-left .divider {
  width: 1px;
  height: 22px;
  background: var(--border-strong);
  flex-shrink: 0;
}

.topbar h1 {
  font-size: 15px;
  margin: 0;
  color: var(--text);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-shrink: 0;
}

.topbar .who {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--text-dim);
  font-size: 13px;
  white-space: nowrap;
}

.profile-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
}

.profile-trigger:hover {
  background: var(--panel-raised);
  color: var(--text);
}

.avatar-sm {
  width: 22px;
  height: 22px;
}

.topbar a {
  color: var(--text-dim);
  text-decoration: none;
}

.topbar a:hover {
  color: var(--text);
}

.board-wrap {
  padding: var(--space-5);
  overflow-x: auto;
}

/* shared control look: inputs, selects, buttons all share one visual language */

.control {
  height: var(--control-h);
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: 13px;
  padding: 0 var(--space-3);
}

/* The outer border lives on the wrapper, not the table. A border on the table
   itself changes how border-collapse resolves its columns, which knocked the
   nested sub item table 1px out of alignment with the parent. */
.table-wrap {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--panel);
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  table-layout: fixed;
}

thead th {
  background: var(--panel-raised);
  color: var(--text-dim);
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

th.col-checkbox {
  width: 40px;
}

th.col-actions {
  width: 36px;
}

/* The add-sub-item control gets its own column, as on the reference board. */
th.col-add {
  width: 44px;
}

th.col-comment {
  width: 44px;
}

/* The icon columns are too narrow for the default cell padding, which would push
   their control off centre. */
td.col-add,
td.col-comment,
td.col-actions {
  padding: 0;
  text-align: center;
}

td.col-add .add-sub-btn,
td.col-comment .comment-btn,
td.col-actions .delete-btn {
  margin: 0 auto;
}

td.col-actions .delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-plus {
  width: 16px;
  height: 16px;
  display: block;
  flex-shrink: 0;
}

th.col-data {
  text-align: center;
}

/* Only headers explicitly marked sortable respond to clicks; the checkbox,
   actions, and any unlabelled column headers are fully inert. */
thead th:not(.sortable-header) {
  pointer-events: none;
  cursor: default;
  user-select: none;
}

.sortable-header {
  cursor: pointer;
  user-select: none;
}

/* Every column heading sits centred over its own column. */
thead th[data-sort-key="task"],
.subitem-table thead th.subitem-name-header {
  text-align: center;
}

.sortable-header:hover {
  color: var(--text);
}

.sort-arrow {
  font-size: 9px;
  color: var(--accent);
}

.reset-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-dim);
  font-size: 12px;
  padding: 0 var(--space-3);
  height: var(--control-h);
  cursor: pointer;
  white-space: nowrap;
}

.reset-sort-btn:hover {
  color: var(--text);
  border-color: var(--text-dim);
}

tbody tr {
  border-bottom: 1px solid var(--border);
}

tbody tr:nth-child(even) {
  background: var(--row-b);
}

tbody tr:hover {
  background: var(--panel-raised);
}

td {
  padding: var(--space-2) var(--space-3);
  vertical-align: middle;
  height: 46px;
}

/* Vertical column separators, on both the main and sub item tables. */
thead th,
tbody td {
  border-right: 1px solid var(--border);
}

thead th:last-child,
tbody td:last-child {
  border-right: none;
}

.row-start {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
}

.task-input {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text);
  font-size: 14px;
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-sm);
}

.task-input:hover,
.task-input:focus {
  border-color: var(--border);
  background: var(--panel-raised);
  outline: none;
}

.avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #0b0b0c;
  background: #d6d6da;
  object-fit: cover;
  flex-shrink: 0;
}

/* Flex centring aligns the line box, not the letters. Dunbar's ascent runs well
   above its cap height, so uppercase initials sit low in the circle. 0.045em is
   the font's own (ascent-descent) vs (cap-height) gap, measured at a large size
   where the metrics aren't rounding-distorted; in em so it holds at every size. */
.avatar-initials {
  display: block;
  transform: translateY(-0.05em);
}

.avatar-lg {
  width: 64px;
  height: 64px;
  font-size: 22px;
}

.profile-avatar-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.profile-upload-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.profile-upload-btn input[type="file"] {
  display: none;
}

.profile-name-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.profile-name-form label {
  color: var(--text-dim);
  font-size: 12px;
}

.profile-name-form input {
  height: var(--control-h);
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0 var(--space-3);
  color: var(--text);
  font-size: 14px;
}

.profile-name-form button {
  align-self: flex-start;
  margin-top: var(--space-1);
}

.profile-password-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.profile-password-form label {
  color: var(--text-dim);
  font-size: 12px;
}

.profile-password-form input {
  height: var(--control-h);
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0 var(--space-3);
  color: var(--text);
  font-size: 14px;
}

.profile-password-form input:focus {
  border-color: var(--border-strong);
  outline: none;
}

.profile-password-form button {
  align-self: flex-start;
  margin-top: var(--space-1);
  height: var(--control-h);
  background: var(--accent);
  border: none;
  border-radius: var(--radius-md);
  color: var(--accent-text);
  padding: 0 var(--space-4);
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  font-family: inherit;
}

.profile-password-form button:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.form-message {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}

.form-message.error {
  color: var(--stuck);
}

.form-message.ok {
  color: var(--done);
}

.theme-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  font-size: 13px;
  cursor: pointer;
}

.theme-toggle {
  appearance: none;
  -webkit-appearance: none;
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--panel-raised);
  border: 1px solid var(--border);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s;
}

.theme-toggle::after {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: transform 0.15s, background 0.15s;
}

.theme-toggle:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.theme-toggle:checked::after {
  transform: translateX(16px);
  background: var(--accent-text);
}

.status-cell {
  position: relative;
  display: flex;
  justify-content: center;
}

.status-select {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  border: none;
  border-radius: var(--radius-sm);
  height: 30px;
  padding: 0 var(--space-2);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  width: 100%;
  text-align: center;
  cursor: pointer;
}

.status-select::-webkit-details-marker {
  display: none;
}

.status-menu {
  position: absolute;
  z-index: 10;
  top: 34px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 150px;
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-1);
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
}

.status-option {
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: 12px;
  font-weight: 600;
  /* Centred, to match the selected pill the menu drops out of. */
  text-align: center;
  cursor: pointer;
  width: 100%;
}

.status-option:hover {
  filter: brightness(1.12);
}

.status-option-empty {
  background: var(--panel);
  color: var(--text-dim);
}

.owner-select {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  text-align: center;
  text-align-last: center;
  width: 100%;
  height: 30px;
  padding: 0 var(--space-1);
}

.owner-select:hover {
  border-color: var(--border);
}

td.date-td {
  cursor: pointer;
}

td.date-td:hover .date-cell {
  background: var(--panel-raised);
}

.date-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}

.date-dot {
  --fill: 0%;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  flex-shrink: 0;
  background: conic-gradient(var(--text-dim) var(--fill), transparent var(--fill));
  transition: background 0.2s, border-color 0.2s;
}

.date-dot.overdue {
  border-color: var(--stuck);
  background: conic-gradient(var(--stuck) var(--fill), transparent var(--fill));
}

.date-edit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  color: var(--text);
}

.icon-gear {
  width: 14px;
  height: 14px;
  display: block;
  flex-shrink: 0;
}

/* Driven by openDatePicker() on the cell, so it must never swallow the click. */
.date-input-native {
  pointer-events: none;
}

.date-display {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
  pointer-events: none;
}

.date-display.dim {
  color: var(--text-dim);
  font-weight: 400;
  text-transform: none;
}

.date-display.overdue {
  color: var(--stuck);
}

.date-input-native {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: none;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.people-cell {
  position: relative;
}

.people-cell {
  display: flex;
  justify-content: center;
}

.people-cell summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
}

.people-cell summary::-webkit-details-marker {
  display: none;
}

.people-avatars {
  display: flex;
  min-height: 24px;
  align-items: center;
  justify-content: center;
}

.people-avatars .avatar {
  margin-left: -8px;
  border: 2px solid var(--panel);
}

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

.people-menu {
  position: absolute;
  z-index: 10;
  top: 32px;
  left: 0;
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  min-width: 160px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
}

.people-menu label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
}

.people-menu label:hover {
  background: var(--border);
}

.avatar-xs {
  width: 20px;
  height: 20px;
  font-size: 9px;
}

.person-cell {
  position: relative;
  display: flex;
  justify-content: center;
}

.person-select {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  max-width: 100%;
}

.person-select:hover {
  background: var(--panel-raised);
}

.person-select::-webkit-details-marker {
  display: none;
}

.person-name {
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.person-menu {
  position: absolute;
  z-index: 10;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-1);
  min-width: 170px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
}

.person-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  color: var(--text);
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  width: 100%;
}

.person-option:hover {
  background: var(--border);
}

/* Ticked rows use the same brand highlight as a group being dragged. */
tr.done > td {
  background: var(--highlight);
}

/* Hovering a row's ✕ tints the whole row, so it is unmistakable which line item
   is about to go. Scoped to the row-level delete button (a direct child of the
   cell), so the ✕ inside a file chip does not trigger it. */
tbody tr:has(> td > .delete-btn:hover) > td {
  background: var(--delete-hover);
}

.checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  background: transparent;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s;
}

.checkbox:hover {
  border-color: var(--text-dim);
}

.checkbox:checked {
  border-color: var(--accent);
}

.checkbox:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid var(--accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.delete-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  opacity: 1;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.delete-btn:hover {
  color: var(--stuck);
  background: rgba(226, 68, 92, 0.12);
}

/* Same outlined field as editing a task description. */
.add-row input {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 14px;
  padding: var(--space-2) var(--space-2);
}

.add-row input:hover,
.add-row input:focus {
  border-color: var(--border);
  background: var(--panel-raised);
  color: var(--text);
  outline: none;
}

/* Line the field up with the task text above it. */
.add-row > td:last-child {
  padding-left: calc(var(--space-3) + 22px);
  padding-right: var(--space-3);
}

.add-row-inner input {
  flex: 1;
  min-width: 0;
}

.add-row input::placeholder {
  color: var(--text-dim);
}

/* board switcher */

.board-switcher summary {
  list-style: none;
  cursor: pointer;
}

.board-switcher summary::-webkit-details-marker {
  display: none;
}

.board-name-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
}

.board-name-input {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: var(--space-1) var(--space-2);
  min-width: 60px;
  max-width: 260px;
}

.board-name-input:hover,
.board-name-input:focus {
  border-color: var(--border);
  background: var(--panel-raised);
  outline: none;
}

/* A real 28px target rather than a bare glyph, so it is easy to hit and reads as
   something you can click. */
.board-switcher summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  transition: background 0.15s, color 0.15s;
}

.board-switcher summary:hover {
  background: var(--panel-raised);
  color: var(--text);
}

.board-switcher[open] summary {
  background: var(--panel-raised);
  color: var(--text);
}

.caret {
  font-size: 13px;
  line-height: 1;
}

.board-switcher-menu {
  position: absolute;
  margin-top: var(--space-2);
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-1);
  min-width: 200px;
  z-index: 20;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
}

.board-switcher-menu a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-size: 13px;
}

.board-switcher-menu a:hover {
  background: var(--border);
}

.board-switcher-menu a.active {
  color: var(--accent);
  font-weight: 600;
}

.board-switcher-menu .manage-link {
  border-top: 1px solid var(--border);
  margin-top: var(--space-1);
  padding-top: var(--space-3);
  color: var(--text-dim);
}

/* groups */

#groups-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.group-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.group-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  border-left: 3px solid;
  padding-left: var(--space-3);
}

.group-collapse-btn {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 12px;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  transition: transform 0.15s, background 0.15s;
  flex-shrink: 0;
}

.group-collapse-btn:hover {
  background: var(--panel-raised);
}

.group-collapse-btn.rotated {
  transform: rotate(-90deg);
}

.group-name-input {
  font-weight: 700;
  font-size: 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: inherit;
  padding: var(--space-1) var(--space-2);
  max-width: 200px;
}

.group-name-input:hover,
.group-name-input:focus {
  border-color: var(--border);
  background: var(--panel-raised);
  outline: none;
}

.color-swatch {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 1px solid var(--border);
  border-radius: 50%;
  padding: 0;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
  overflow: hidden;
}

.color-swatch::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-swatch::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
}

.color-swatch::-moz-color-swatch {
  border: none;
  border-radius: 50%;
}

.header-count {
  color: var(--text-dim);
  font-weight: 400;
}

/* ---- interaction feedback ----
   Following the WDS MVP's conventions, in Friday.com's palette: a coloured
   control brightens on hover, a plain one lifts toward --text, and anything
   clickable snaps down slightly when pressed. */

/* Coloured pills brighten rather than change hue, so the status colour still
   reads at a glance. Same treatment the options in their menus already use. */
.status-select,
.status-filter-select {
  transition: filter 0.15s, box-shadow 0.15s;
}

.status-select:hover,
.status-filter-select:hover {
  filter: brightness(1.12);
}

.brand {
  transition: opacity 0.15s;
}

.brand:hover {
  /* opacity, not a filter: the logo is already inverted in light mode and a
     second filter would fight it. */
  opacity: 0.85;
}

.brand:hover .brand-wordmark {
  color: var(--text);
}

.color-swatch {
  transition: transform 0.15s, border-color 0.15s;
}

.color-swatch:hover {
  transform: scale(1.12);
  border-color: var(--text-dim);
}

.theme-toggle-row {
  transition: color 0.15s;
}

.theme-toggle-row:hover {
  color: var(--text);
}

.theme-toggle-row:hover .theme-toggle {
  border-color: var(--text-dim);
}

.search-input {
  transition: border-color 0.15s, background 0.15s;
}

.search-input:hover {
  border-color: var(--border-strong);
}

.profile-upload-btn {
  transition: filter 0.15s, transform 0.15s;
}

.profile-upload-btn:hover {
  filter: brightness(1.12);
}

.comment-form textarea {
  transition: border-color 0.15s;
}

.comment-form textarea:hover {
  border-color: var(--border-strong);
}

/* A quick snap on press, shared by everything that behaves like a button. */
.btn:active,
.add-btn:active,
.recipe-btn:active,
.card-action:active,
.notif-trigger:active,
.profile-trigger:active,
.profile-upload-btn:active,
.status-option:active,
.person-option:active,
.mention-option:active,
.board-dup-menu button:active,
.notif-read-all:active,
.add-column-form button:active,
.automation-form button:active,
.comment-form button:active,
.login-card button:active,
.profile-password-form button:active {
  transform: scale(0.98);
  transition-duration: 0.08s;
}

/* mentions and notifications */

.mention {
  color: var(--done);
  font-weight: 700;
}

.comment-body {
  white-space: pre-wrap;
}

.mention-wrap {
  position: relative;
  display: block;
}

/* display:flex below is an author rule, so it beats the browser's own
   [hidden] { display: none } and the empty menu stayed painted above the box.
   This puts the hidden attribute back in charge. */
.mention-menu[hidden] {
  display: none;
}

.mention-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 4px);
  z-index: 40;
  min-width: 180px;
  max-height: 180px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: var(--space-1);
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.mention-option {
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  white-space: nowrap;
}

.mention-option.active,
.mention-option:hover {
  background: var(--highlight);
}

.notif-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-dim);
  cursor: pointer;
}

.notif-trigger:hover {
  background: var(--panel-raised);
  color: var(--text);
}

.icon-bell {
  width: 17px;
  height: 17px;
  display: block;
}

.notif-badge {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--stuck);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 0 0 2px var(--panel);
}

/* display:none, so a zero badge is not a stray click target either */
.notif-badge.is-empty {
  display: none;
}

.notif-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.notif-read-all {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
}

.notif-read-all:hover {
  color: var(--text);
  text-decoration: underline;
}

.notif-row {
  position: relative;
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel-raised);
  text-decoration: none;
  color: var(--text);
}

.notif-row:hover {
  border-color: var(--border-strong);
}

.notif-row.unread {
  background: var(--highlight);
  border-color: var(--border-strong);
}

.notif-body {
  min-width: 0;
  flex: 1;
}

.notif-line {
  font-size: 13px;
}

.notif-task {
  font-size: 13px;
  font-weight: 600;
  margin-top: 2px;
}

.notif-snippet {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 2px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.notif-when {
  font-size: 11px;
  margin-top: var(--space-2);
}

.notif-dot {
  align-self: flex-start;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--stuck);
  flex-shrink: 0;
  margin-top: 4px;
}

/* undo toast */

.undo-toast {
  position: fixed;
  right: var(--space-5);
  bottom: var(--space-5);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  color: var(--text);
  font-size: 13px;
  /* visibility, not just opacity, so a faded toast is never a stray click target */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}

.undo-toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.undo-toast-btn {
  background: transparent;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
}

.undo-toast-btn:hover {
  background: var(--highlight);
  border-color: var(--text-dim);
}

.dim {
  color: var(--text-dim);
}

/* Sit in the same vertical line as the rows' ✕ below: in from the header's right
   edge by the table's 1px border plus half the gap between the 36px actions
   column and this 24px button. */
.group-delete {
  margin-left: auto;
  margin-right: calc(1px + (36px - 24px) / 2);
}

/* Hovering it tints the whole group header, the same cue a row gets. */
.group-header:has(.group-delete:hover) {
  background: var(--delete-hover);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.table-wrap.collapsed-hidden {
  display: none;
}

/* subitems */

/* The expand chevron sits in a fixed absolute slot so task text starts at the
   same x on every row, with or without it. */
.task-cell {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  padding-left: 22px;
}

.expand-btn {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 11px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
}

.expand-btn:hover {
  background: var(--panel-raised);
}

/* No sub items, no indicator -- the 22px slot stays reserved so task text does
   not shift. display:none, so it is not a phantom click target either. */
.expand-btn.is-empty {
  display: none;
}

.add-sub-btn,
.comment-btn {
  position: relative;
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 14px;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  opacity: 1;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.add-sub-btn:hover,
.comment-btn:hover {
  background: var(--panel-raised);
  color: var(--text);
}

tr.subitem {
  font-size: 13px;
}

tr.subitem td {
  height: 38px;
}

tr.subitem-hidden {
  display: none;
}

/* subitem mini-table */

/* The wrapper row is scaffolding: no stripe, no hover, no separators -- just
   breathing room between the parent line item and its sub item list. */
tr.subitem-panel-row,
tr.subitem-panel-row:hover,
tr.subitem-panel-row:nth-child(even) {
  background: transparent;
  border-bottom: none;
}

tr.subitem-panel-row > td {
  padding: var(--space-3) var(--space-3) var(--space-4) 0;
  background: transparent;
  border-right: none;
  height: auto;
}

/* Indented card, starting past the parent's checkbox column. The indent means
   these columns sit offset from the parent's by design -- an inset box and
   pixel-matched columns cannot both be true. */
.subitem-panel {
  margin-left: calc(40px + var(--space-5));
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--panel);
}

.subitem-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  border: none;
  border-radius: 0;
}

.subitem-table thead th {
  font-size: 11px;
  padding: var(--space-2) var(--space-3);
  height: auto;
}

.subitem-table tbody tr:last-child > td {
  border-bottom: none;
}

.cell-number {
  text-align: center;
}

.col-delete {
  margin-left: var(--space-1);
  font-size: 11px;
  vertical-align: middle;
  text-transform: none;
}

/* add group / column */

/* Set apart from the last group, and presented as a full-width row like the
   add-sub-item field rather than a stray input. */
.add-group-form {
  margin-top: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--panel);
  padding: var(--space-2) var(--space-3);
}

.add-group-form input {
  flex: 1;
  min-width: 0;
  height: auto;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  color: var(--text-dim);
  font-size: 14px;
}

/* Shared by the add-group, add-task and add-sub-item rows. Green once there is
   something to submit: :placeholder-shown is true only while the field is empty,
   so the state follows typing with no JS. */
.add-btn {
  flex-shrink: 0;
  height: 30px;
  padding: 0 var(--space-4);
  border: none;
  border-radius: var(--radius-sm);
  background: var(--done);
  color: #0b0b0c;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.08s ease;
}

.add-btn:hover {
  background: var(--done-hover);
}

/* Presses back down to the base green and shrinks a touch. */
.add-btn:active {
  background: var(--done);
  transform: scale(0.94);
}

.add-group-form input:placeholder-shown ~ .add-btn,
.add-row-inner input:placeholder-shown ~ .add-btn,
.add-board-form input:placeholder-shown ~ .add-btn {
  background: var(--border-strong);
  color: var(--text-dim);
  cursor: default;
  /* grey means nothing to add yet, so it should not fire either */
  pointer-events: none;
}

/* The add row dips briefly when it accepts something. Applied to the inner block
   rather than the <tr>, since table rows are not reliably transformable. */
.add-row-inner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

@keyframes add-press {
  0% { transform: scale(1); }
  40% { transform: scale(0.985); }
  100% { transform: scale(1); }
}

.add-pressed {
  animation: add-press 0.19s ease;
}

/* Deleting is the mirror of the add press: the thing dips away as it goes.
   htmx puts .htmx-swapping on the target for the swap delay on the button. */
tr.htmx-swapping > td {
  background: var(--delete-hover);
  opacity: 0;
  transition: opacity 0.19s ease, background 0.19s ease;
}

/* Rows can't be transformed reliably, so they fade; a group block is a div and
   can shrink as well. */
.group-block.htmx-swapping {
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 0.19s ease, transform 0.19s ease;
}

.add-group-form input:hover,
.add-group-form input:focus {
  border-color: var(--border);
  background: var(--panel-raised);
  color: var(--text);
  outline: none;
}

.add-board-form {
  margin-top: 0;
}

.add-board-form input {
  height: var(--control-h);
  background: var(--panel);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  padding: 0 var(--space-3);
  color: var(--text-dim);
  font-size: 14px;
  width: 220px;
}

.add-board-form {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.btn {
  height: var(--control-h);
  background: var(--accent);
  border: none;
  border-radius: var(--radius-md);
  color: var(--accent-text);
  padding: 0 var(--space-4);
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  transition: filter 0.15s, transform 0.15s;
}

.btn:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.add-column-form button,
.automation-form button,
.comment-form button,
.login-card button {
  height: var(--control-h);
  background: var(--accent);
  border: none;
  border-radius: var(--radius-md);
  color: var(--accent-text);
  padding: 0 var(--space-4);
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  transition: opacity 0.15s;
}

.add-column-form button:hover,
.automation-form button:hover,
.comment-form button:hover,
.login-card button:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.add-column-block {
  margin-top: 0;
}

.add-column-block summary {
  cursor: pointer;
  color: var(--text-dim);
  font-size: 13px;
  list-style: none;
  padding: var(--space-2) 0;
}

.add-column-block summary:hover {
  color: var(--text);
}

.add-column-block summary::-webkit-details-marker {
  display: none;
}

.existing-columns {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.existing-column-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
  font-size: 12px;
  color: var(--text-dim);
}

.add-column-form {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
  flex-wrap: wrap;
  align-items: center;
}

.add-column-form input,
.add-column-form select {
  height: var(--control-h);
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0 var(--space-3);
  color: var(--text);
  font-size: 13px;
}

/* boards list */

.boards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.board-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color 0.15s;
}

.board-card:hover {
  border-color: var(--border-strong);
}

/* The link is its own element rather than wrapping the card, so the controls are
   not nested inside an anchor. Padded clear of them on the right. */
.board-card-link {
  display: block;
  padding: var(--space-5);
  padding-right: calc(var(--space-5) + 52px);
  text-decoration: none;
  color: var(--text);
  font-weight: 600;
}

.board-card-actions {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  display: flex;
  align-items: center;
  gap: 2px;
}

.card-action {
  list-style: none;
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-dim);
  font-size: 14px;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}

.card-action::-webkit-details-marker {
  display: none;
}

/* Each control previews what it will do: the card tints to match, so it is clear
   which board is about to be renamed, copied or deleted. */
.card-action:hover {
  background: var(--panel-raised);
  color: var(--text);
}

.rename-action:hover {
  color: var(--working);
}

.dup-action:hover {
  color: var(--done);
}

.delete-action:hover {
  color: var(--stuck);
}

.board-card:has(.rename-action:hover) {
  background: var(--rename-hover);
  border-color: var(--working);
}

.board-card:has(.dup-action:hover) {
  background: var(--duplicate-hover);
  border-color: var(--done);
}

.board-card:has(.delete-action:hover) {
  background: var(--delete-hover);
  border-color: var(--stuck);
}

.board-dup {
  position: relative;
}

.board-dup-menu {
  position: absolute;
  top: 28px;
  right: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 190px;
  padding: var(--space-1);
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}

.board-dup-menu button {
  background: transparent;
  border: none;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  white-space: nowrap;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.board-dup-menu button:hover {
  background: var(--highlight);
}

.icon-sm {
  width: 15px;
  height: 15px;
  display: block;
  flex-shrink: 0;
}

/* The rename field sits in the link's place, so the card does not resize. */
.board-card-rename {
  display: none;
  width: calc(100% - var(--space-5) * 2);
  margin: var(--space-5);
  margin-right: calc(var(--space-5) + 78px);
  padding: var(--space-2);
  background: var(--panel-raised);
  border: 1px solid var(--working);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  outline: none;
}

.board-card.renaming .board-card-link {
  display: none;
}

.board-card.renaming .board-card-rename {
  display: block;
}

/* New cards ease in, so a duplicate or a fresh board announces itself. */
@keyframes card-enter {
  0% { opacity: 0; transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1); }
}

.card-enter {
  animation: card-enter 0.22s ease;
}

/* side panels (automations, comments) */

.side-panel {
  position: fixed;
  top: 0;
  right: -380px;
  width: 380px;
  height: 100vh;
  background: var(--panel);
  border-left: 1px solid var(--border);
  transition: right 0.2s;
  z-index: 30;
  overflow-y: auto;
  box-shadow: -12px 0 32px rgba(0, 0, 0, 0.4);
}

.side-panel.open {
  right: 0;
}

.side-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
}

.side-panel-header strong {
  font-size: 14px;
}

.side-panel-header a {
  color: var(--text-dim);
  text-decoration: none;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}

.side-panel-header a:hover {
  background: var(--panel-raised);
  color: var(--text);
}

.side-panel-body {
  padding: var(--space-5);
}

.automation-rule {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2);
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  font-size: 13px;
  line-height: 1.5;
}

.automation-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-4);
  font-size: 13px;
}

.automation-form label {
  color: var(--text-dim);
}

.automation-form input,
.automation-form select {
  height: var(--control-h);
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-2);
  color: var(--text);
  font-size: 13px;
}

.automation-form button {
  width: 100%;
  margin-top: var(--space-1);
}

.recipes-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-2);
}

.automation-recipes {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.automation-recipes form {
  margin: 0;
}

.recipe-btn {
  width: 100%;
  text-align: left;
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: 12px;
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
}

.recipe-btn:hover {
  border-color: var(--text-dim);
}

/* toolbar: search + filter */

.board-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.search-input {
  height: var(--control-h);
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0 var(--space-3);
  color: var(--text);
  font-size: 13px;
}

.status-filter-cell {
  position: relative;
}

.status-filter-select {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  height: var(--control-h);
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 0 var(--space-3);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.status-filter-select::-webkit-details-marker {
  display: none;
}

.status-filter-cell .status-menu {
  left: 0;
  transform: none;
}

.search-input {
  width: 200px;
}

.search-input::placeholder {
  color: var(--text-dim);
}

.filtered-hidden {
  display: none !important;
}

/* drag and drop reorder (groups only — items are always ordered by due date) */

.group-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  user-select: none;
  flex-shrink: 0;
  touch-action: none;
  margin-right: var(--space-1);
}

.group-drag-handle:hover {
  background: var(--panel-raised);
  color: var(--text);
}

.group-drag-handle:active {
  cursor: grabbing;
}

/* While dragging, a group collapses to a single labelled box carrying the same
   highlight as a selected row. */
.group-block.dragging {
  position: relative;
  z-index: 30;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
  border-radius: var(--radius-lg);
  cursor: grabbing;
}

.group-block.dragging .table-wrap,
.group-block.dragging .group-delete,
.group-block.dragging .group-collapse-btn,
.group-block.dragging .color-swatch {
  display: none;
}

.group-block.dragging .group-header {
  background: var(--highlight);
  border-radius: var(--radius-lg);
}

/* comments */

.comment-count {
  position: absolute;
  top: -2px;
  right: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-size: 10px;
  background: var(--stuck);
  color: #fff;
  border-radius: 8px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  line-height: 1;
  font-weight: 700;
  box-shadow: 0 0 0 2px var(--panel);
}

.comment-row {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.comment-row .avatar {
  margin-top: 2px;
}

.comment-body-wrap {
  flex: 1;
  min-width: 0;
}

.comment-meta {
  font-size: 12px;
  margin-bottom: 2px;
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
}

.comment-body {
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.comment-form {
  margin-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.comment-form textarea {
  /* A textarea sizes itself from its cols attribute, so it needs an explicit
     width to fill the panel now that a wrapper sits between it and the flex
     column it used to stretch in. */
  width: 100%;
  display: block;
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  line-height: 1.5;
  resize: vertical;
}

.comment-form button {
  align-self: flex-start;
}

/* file attachments */

.file-cell {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  align-items: center;
  justify-content: center;
}

.file-chip {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 3px var(--space-2);
  font-size: 12px;
  max-width: 130px;
}

.file-chip a {
  color: var(--text);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-chip a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.file-upload-btn {
  cursor: pointer;
  color: var(--text-dim);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.file-upload-btn:hover {
  color: var(--text);
  border-color: var(--text-dim);
}

.file-upload-btn input[type="file"] {
  display: none;
}

/* login page */

.login-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
}

.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.login-brand .brand-logo {
  height: 32px;
}

.login-brand .tagline {
  color: var(--text-dim);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.login-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  width: 320px;
}

.login-card h1 {
  margin: 0 0 var(--space-4);
  font-size: 17px;
  text-align: center;
}

.login-card input {
  display: block;
  width: 100%;
  height: var(--control-h);
  padding: 0 var(--space-3);
  margin-bottom: var(--space-3);
  background: var(--panel-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text);
  font-size: 14px;
}

.login-card button {
  width: 100%;
  margin-top: var(--space-1);
}

.login-error {
  color: var(--stuck);
  font-size: 13px;
  margin-bottom: var(--space-3);
  text-align: center;
}