/* JetBrains Mono (SIL Open Font License, see fonts/OFL.txt), served from here rather than Google
   Fonts, so nobody's IP address goes to Google. One variable file per script covers every weight. */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url('/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2-variations'), url('/fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url('/fonts/jetbrains-mono-latin-ext-wght-normal.woff2') format('woff2-variations'), url('/fonts/jetbrains-mono-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --font: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --bg: #0b0c0e;
  --surface: #111317;
  --surface-2: #171a1f;
  --surface-3: #1e2229;
  --border: #262a31;
  --border-strong: #3a3f48;
  /* edges of text fields, selects and selection boxes: >= 3:1 against every surface (WCAG 1.4.11) */
  --field-border: #68707b;
  /* Text: two clearly separate levels for "label" vs "description" pairs, both readable on every
     surface (primary >= 13:1, secondary >= 5:1 on the lightest surface). --text-dim sits between
     them for body text like menu items; --muted is the secondary level. */
  --text: #e6e8eb;
  --text-primary: var(--text);
  --text-secondary: #8d949e;
  --text-dim: #b8bdc5;
  --muted: var(--text-secondary);

  --accent: #1dc4b3;
  --accent-ink: #0b0c0e;
  --danger: #ff6b61;
  --warn: #f0b429;
  --info: #6cb6ff;
  /* fixed marker colors per board type in the switchers (not a board's own accent) */
  --type-quick: #7ee787;
  --type-sprint: #bc8cff;
  --type-todo: #f0883e;

  /* theme-aware bits that used to be hardcoded for dark */
  --badge-border: #3a3f48;
  --glass-edge: rgba(255, 255, 255, 0.1);
  --glass-edge-soft: rgba(255, 255, 255, 0.07);
  --shadow: rgba(0, 0, 0, 0.6);
  --shadow-ring: #000;
  --backdrop: rgba(5, 6, 8, 0.72);

  /* card color palette (tints) */
  --c-red: #f85149;
  --c-orange: #f0883e;
  --c-yellow: #e3b341;
  --c-green: #56d364;
  --c-teal: #39c5cf;
  --c-blue: #58a6ff;
  --c-purple: #bc8cff;
  --c-pink: #ff7bc5;
  --tint: 16%;

  --skeleton: #1c2027;
  --skeleton-shine: #262b33;

  --col-width: 296px;
  --gap: 12px;
  color-scheme: dark;
}

/* Light base theme, set per board via <html data-theme="light">.
   The accent is darkened in JS when needed so it stays readable here. */
:root[data-theme='light'] {
  --bg: #f1f2f4;
  --surface: #e6e8ec;
  --surface-2: #ffffff;
  --surface-3: #f6f7f9;
  --border: #d3d7de;
  --border-strong: #adb3bd;
  --field-border: #777e89;
  --text: #15171b;
  --text-secondary: #575d67;
  --text-dim: #3a4049;

  --accent: #0b7268;
  --accent-ink: #ffffff;
  --danger: #c7222d;
  --warn: #8a5d00;
  --info: #0a62c9;
  --type-quick: #1a7f37;
  --type-sprint: #8250df;
  --type-todo: #bc4c00;

  --badge-border: #9ea5b0;
  --glass-edge: rgba(255, 255, 255, 0.55);
  --glass-edge-soft: rgba(20, 24, 32, 0.1);
  --shadow: rgba(20, 24, 32, 0.18);
  --shadow-ring: rgba(20, 24, 32, 0.12);
  --backdrop: rgba(30, 34, 42, 0.35);

  --c-red: #d1242f;
  --c-orange: #d4570f;
  --c-yellow: #bf8700;
  --c-green: #1f883d;
  --c-teal: #0f8a96;
  --c-blue: #0969da;
  --c-purple: #8250df;
  --c-pink: #bf3989;
  --tint: 12%;

  --skeleton: #dfe2e7;
  --skeleton-shine: #eceef2;
  color-scheme: light;
}

* { box-sizing: border-box; }
*, *::before, *::after { border-radius: 0 !important; }

/* ---------- scrollbars ----------
   Colors come from the theme, so they follow light/dark and the board's accent.
   Chromium/Safari use ::-webkit-scrollbar; Firefox uses the standard properties. They're
   kept apart on purpose: Chrome 121+ ignores the ::-webkit-scrollbar rules entirely once
   scrollbar-color is set, so the standard ones only apply where the webkit ones don't exist. */
/* The visible height: 100dvh, or less while an on-screen keyboard covers part of it (--vvh is
   set from the visual viewport in 01-core.js). Never more than 100dvh, so a stale value can't
   make anything taller than the screen. */
:root { --visible-h: min(var(--vvh, 100dvh), 100dvh); }

:root {
  --scroll-thumb: color-mix(in srgb, var(--accent) 22%, var(--border-strong));
  --scroll-thumb-hover: color-mix(in srgb, var(--accent) 70%, var(--border-strong));
  --scroll-track: transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--scroll-track); }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); border-width: 2px; background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) var(--scroll-track); }
}

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--accent); color: var(--accent-ink); }

:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }

.muted { color: var(--muted); font-style: normal; }

/* ---------- top bar ---------- */

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  flex-wrap: wrap;
  /* above the columns, which become stacking contexts with backdrop-filter */
  position: relative;
  z-index: 10;
}

.switcher { position: relative; min-width: 0; }
.brand {
  display: flex;
  align-items: baseline;
  gap: 0;
  font-weight: 700;
  font-size: 15px;
  min-width: 0;
  max-width: 280px;
  background: transparent;
  border: 1px solid transparent;
  padding: 3px 6px;
  margin-left: -6px;
  cursor: pointer;
}
.brand:hover, .brand[aria-expanded='true'] { border-color: var(--border-strong); background: var(--surface-2); }
.prompt { color: var(--accent); }
.board-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.caret { color: var(--muted); font-size: 12px; margin-left: 8px; }

.board-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: -6px;
  z-index: 20;
  min-width: 300px;
  max-width: calc(100vw - 32px);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  box-shadow: 0 16px 48px var(--shadow);
}
.board-menu ul { list-style: none; margin: 0; padding: 4px 0; max-height: 60vh; overflow-y: auto; }
.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: 0;
  padding: 8px 12px;
  text-align: left;
  cursor: pointer;
  color: var(--text-dim);
}
.menu-item:hover, .menu-item:focus-visible { background: var(--surface-3); color: var(--text); outline: none; }
.menu-item[aria-current='true'] { color: var(--text); }
.menu-item[aria-current='true']::before { content: '>'; color: var(--accent); margin-left: -2px; }
.menu-item .swatch { width: 8px; height: 8px; flex: none; background: var(--swatch, var(--border-strong)); }
.menu-item .n { margin-left: auto; color: var(--muted); font-size: 12px; }
.menu-item .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-new { border-top: 1px solid var(--border); color: var(--accent); }

.tools { display: flex; align-items: center; gap: 12px; min-width: 0; flex-wrap: wrap; }

.search { display: flex; align-items: center; border: 1px solid var(--field-border); background: var(--bg); }
.search:focus-within { border-color: var(--accent); }
.search-icon { color: var(--muted); padding: 0 0 0 8px; }
.search input {
  background: transparent;
  border: 0;
  outline: none;
  padding: 5px 8px;
  width: 200px;
}
.search input::-webkit-search-cancel-button { filter: invert(0.6); }

.sort { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.sort select {
  background: var(--bg);
  border: 1px solid var(--field-border);
  padding: 4px 6px;
  outline: none;
}
.sort select:focus { border-color: var(--accent); }
.sorted .sort select { border-color: var(--accent); color: var(--accent); }

.stats { color: var(--muted); font-size: 12px; white-space: nowrap; }
.actions { margin-left: auto; display: flex; gap: 8px; }

[hidden] { display: none !important; }

/* ---------- buttons ---------- */

.btn {
  background: transparent;
  border: 1px solid var(--border-strong);
  padding: 5px 10px;
  cursor: pointer;
  color: var(--text-dim);
  text-transform: lowercase;
  line-height: 1.2;
}
.btn:hover { color: var(--text); border-color: var(--text-dim); background: var(--surface-2); }
.btn-accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; } /* the main action of a dialog or screen: filled */
.btn-accent:hover { background: color-mix(in srgb, var(--accent) 82%, var(--text)); color: var(--accent-ink); border-color: var(--accent); }
/* an important action that isn't the main one on screen (toolbar, sprint bar): outlined in the accent */
.btn-soft { border-color: var(--accent); color: var(--accent); }
.btn-soft:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-danger { border-color: color-mix(in srgb, var(--danger) 55%, transparent); color: var(--danger); }
.btn-danger:hover { background: var(--danger); color: var(--accent-ink); border-color: var(--danger); }

.icon-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  font-size: 14px;
}
.icon-btn:hover { color: var(--text); border-color: var(--border-strong); background: var(--surface-3); }

/* ---------- board ---------- */

.board {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: var(--gap);
  padding: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  min-height: 0;
}

.empty-state { color: var(--muted); margin: 0; }

.column {
  flex: 0 0 var(--col-width);
  width: var(--col-width);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
}
.column.dragging { opacity: 0.4; }
.column.over-limit { border-color: color-mix(in srgb, var(--danger) 60%, var(--border)); }

.col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 12px;
  border-bottom: 1px solid var(--border);
  cursor: grab;
  user-select: none;
}
.col-head:active { cursor: grabbing; }
/* column names are the user's own words: shown as typed, not forced into capitals */
.col-name {
  font-weight: 600;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.col-count {
  color: var(--muted);
  font-size: 12px;
  border: 1px solid var(--badge-border);
  padding: 0 5px;
}
.over-limit .col-count { color: var(--danger); border-color: var(--danger); }
.col-head .spacer { flex: 1; }

.card-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 48px;
}
.card-list:empty::after {
  content: 'empty';
  color: var(--muted);
  font-size: 12px;
  border: 1px dashed var(--border);
  padding: 12px;
  text-align: center;
}

/* ---------- card ---------- */

.card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-left: 2px solid var(--border-strong);
  padding: 8px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  user-select: none;
  position: relative;
}
.card:hover { border-color: var(--border-strong); background: var(--surface-3); }

/* ⋮ quick-action button: hidden until hover/focus */
.card-menu-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  cursor: pointer;
  opacity: 0;
  font-size: 13px;
  line-height: 1;
}
.card:hover .card-menu-btn,
.card:focus-within .card-menu-btn,
.card.menu-open .card-menu-btn { opacity: 1; }
.card-menu-btn:hover, .card.menu-open .card-menu-btn { color: var(--text); border-color: var(--text-dim); }
@media (hover: none) {
  .card-menu-btn { opacity: 0.7; background: transparent; border-color: transparent; }
}
.card.dragging { opacity: 0.35; border-style: dashed; }
.card[data-priority='low'] { border-left-color: var(--muted); }
.card[data-priority='medium'] { border-left-color: var(--info); }
.card[data-priority='high'] { border-left-color: var(--warn); }
.card[data-priority='urgent'] { border-left-color: var(--danger); }

.card-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); padding-right: 22px; min-height: 16px; }
.card-id { color: var(--muted); }
/* no priority, flags or icons: the top row disappears (it comes back for the select box) */
.card-meta.empty { display: none; }
.selecting .card-meta.empty, .card.selected .card-meta.empty { display: flex; }
.card-meta.empty ~ .card-title { padding-right: 22px; } /* room for the ⋮ button */
.foot-right { display: inline-flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
.idle { color: var(--warn); }
.prio { font-size: 12px; font-weight: 700; }
.prio-low { color: var(--muted); }
.prio-medium { color: var(--info); }
.prio-high { color: var(--warn); }
.prio-urgent { color: var(--danger); }
.has-desc { margin-left: auto; display: inline-flex; color: var(--text-dim); }
.has-desc svg { width: 11px; height: 11px; }

.card-title { color: var(--text); word-break: break-word; }

.card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag {
  font-size: 12px;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  padding: 0 5px;
}

.card-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); }
.assignee { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.time { margin-left: auto; white-space: nowrap; }

/* ---------- quick add ---------- */

.quick-add { padding: 0 8px 8px; }
.quick-add textarea {
  width: 100%;
  resize: none;
  background: var(--bg);
  border: 1px solid var(--accent);
  padding: 8px;
  outline: none;
}
.quick-add .hint { font-size: 12px; color: var(--muted); padding-top: 4px; }

/* ---------- dialogs ---------- */

.dialog {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  padding: 0;
  width: min(560px, calc(100vw - 32px));
  /* dvh: the height left between mobile browser toolbars (100vh is the page behind them).
     --vvh (set in 01-core.js) also shrinks for the on-screen keyboard. */
  max-height: calc(100vh - 32px);
  max-height: calc(var(--visible-h) - 2rem);
  box-shadow: 0 0 0 1px var(--shadow-ring), 0 24px 64px var(--shadow);
}
.dialog { overflow-y: auto; }
.dialog-sm { width: min(380px, calc(100vw - 32px)); }
.dialog::backdrop { background: var(--backdrop); }
.dialog:focus { outline: none; }
.dialog form { display: flex; flex-direction: column; gap: 12px; padding: 16px; margin: 0; }
.dialog form p { margin: 0; }

.dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
}
.dialog-head .muted { font-weight: 400; text-transform: none; letter-spacing: 0; }
#archive-dialog > .dialog-head { padding: 16px 16px 12px; border-bottom: 1px solid var(--border); }

.field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.field > span, .field > label { font-size: 12px; color: var(--text-primary); font-weight: 500; text-transform: lowercase; }
/* the description next to a label: same size, clearly secondary */
.field > span em, .field > label em, .check em { font-weight: 400; font-style: normal; color: var(--text-secondary); margin-left: 4px; }
.field input, .field select, .field textarea {
  background: var(--bg);
  border: 1px solid var(--field-border);
  padding: 7px 8px;
  width: 100%;
  outline: none;
}
.field textarea { resize: vertical; min-height: 80px; }
/* the full-width field styling is for text inputs, not radios/checkboxes inside a field */
.field input[type='radio'], .field input[type='checkbox'] { width: auto; padding: 0; border: 0; background: none; flex: none; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field-row { display: flex; gap: 12px; }

.dialog-foot { display: flex; justify-content: space-between; gap: 8px; padding-top: 4px; }
/* The buttons stay in reach however long the form: the footer sticks to the bottom of the
   dialog while its content scrolls, clear of the iPhone home bar. (Settings dialogs have their
   own fixed layout with an inner scrolling panel.) */
.dialog:not(.settings-dialog) > form > .dialog-foot {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 4px -16px -16px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.dialog-foot .left, .dialog-foot .right { display: flex; gap: 8px; }

.color-row, .bg-row { display: flex; align-items: center; gap: 10px; }
.color-row input[type='color'] {
  width: 40px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border-strong);
  background: var(--bg);
  cursor: pointer;
}
.color-row input[type='color']::-webkit-color-swatch-wrapper { padding: 2px; }
.color-row input[type='color']::-webkit-color-swatch { border: 0; }
.color-row input[type='color']::-moz-color-swatch { border: 0; }

.bg-row { align-items: stretch; }
.bg-preview {
  width: 160px;
  height: 90px;
  flex: none;
  border: 1px solid var(--border-strong);
  background: var(--bg) center / cover no-repeat;
  display: grid;
  place-items: center;
  font-size: 12px;
}
.bg-preview.busy { opacity: 0.5; }
.bg-actions { display: flex; flex-direction: column; gap: 8px; justify-content: flex-start; }
.file-btn { position: relative; overflow: hidden; text-align: center; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-btn:focus-within { outline: 1px solid var(--accent); outline-offset: 1px; }

input[type='range'] { accent-color: var(--accent); padding: 0 !important; border: 0 !important; background: transparent !important; }

.archive-list { list-style: none; margin: 0; padding: 8px 16px 16px; max-height: 60vh; overflow-y: auto; }
.archive-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.archive-list li:last-child { border-bottom: 0; }
.archive-list .info { flex: 1; min-width: 0; }
.archive-list .info .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.archive-list .info .m { font-size: 12px; color: var(--muted); }
.archive-list .empty { color: var(--muted); justify-content: center; border: 0; padding: 24px 0; }

/* ---------- toast ---------- */

/* a manual popover, so it sits in the top layer above open dialogs */
.toast {
  position: fixed;
  inset: auto auto 16px 50%;
  margin: 0;
  transform: translateX(-50%);
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  border-left: 2px solid var(--accent);
  color: var(--text);
  padding: 6px 6px 6px 14px;
  font-size: 12px;
  max-width: calc(100vw - 32px);
  align-items: center;
  gap: 14px;
  box-shadow: 0 12px 32px var(--shadow);
}
.toast:popover-open { display: flex; }
.toast.error { border-color: var(--danger); padding-right: 14px; }
.toast-action {
  background: transparent;
  border: 1px solid var(--accent);
  color: var(--accent);
  padding: 3px 10px;
  cursor: pointer;
  font-weight: 700;
}
.toast-action:hover { background: var(--accent); color: var(--accent-ink); }
.toast-action kbd { font: inherit; font-weight: 400; opacity: 0.6; margin-left: 6px; }

/* ---------- quiet (destructive) button ---------- */

.btn-quiet {
  background: transparent;
  border: 0;
  padding: 5px 4px;
  color: var(--muted);
  font-size: 12px;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
}
.btn-quiet:hover, .btn-quiet:focus-visible { color: var(--danger); text-decoration-color: currentColor; }

/* ---------- card quick-action menu ---------- */

.menu {
  position: fixed;
  z-index: 30;
  min-width: 190px;
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  padding: 4px 0;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  box-shadow: 0 16px 48px var(--shadow);
}
.menu .menu-item { padding: 6px 12px; font-size: 12px; }
a.menu-item { text-decoration: none; font-size: inherit; }
.menu .menu-item .key { margin-left: auto; color: var(--muted); font-size: 12px; }
.menu .menu-item[aria-expanded='true'] { color: var(--text); background: var(--surface-2); }
.menu .submenu { background: var(--surface-2); padding: 2px 0; }
.menu .submenu .menu-item { padding-left: 24px; }
.menu .submenu .menu-item[aria-disabled='true'] { color: var(--muted); cursor: default; background: transparent; }
.menu-sep { height: 1px; background: var(--border); margin: 4px 0; }
.menu .menu-danger { color: var(--muted); }
.menu .menu-danger:hover, .menu .menu-danger:focus-visible { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }

/* ---------- tag autocomplete ---------- */

.suggestions {
  position: fixed;
  z-index: 1;
  margin: 0;
  padding: 2px 0;
  list-style: none;
  max-height: 180px;
  overflow-y: auto;
  background: var(--surface-2);
  border: 1px solid var(--accent);
  box-shadow: 0 12px 32px var(--shadow);
}
.suggestions li { padding: 5px 8px; cursor: pointer; display: flex; gap: 8px; }
.suggestions li .n { margin-left: auto; color: var(--muted); font-size: 12px; }
.suggestions li mark { background: transparent; color: var(--accent); }
.suggestions li[aria-selected='true'] { background: var(--surface-3); color: var(--text); }
.suggestions li[aria-selected='true']::before { content: '>'; color: var(--accent); }

/* ---------- WIP stepper ---------- */

.stepper { display: flex; }
.stepper .step {
  width: 36px;
  flex: none;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  cursor: pointer;
  font-size: 15px;
}
.stepper .step:hover { color: var(--accent); border-color: var(--accent); }
.field .stepper input {
  text-align: center;
  border-left: 0;
  border-right: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- new board: column list ---------- */

.preset-row { display: flex; gap: 8px; align-items: center; }
.preset-row select, .preset-row input {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--field-border);
  padding: 7px 8px;
  outline: none;
}
.preset-row select:focus, .preset-row input:focus { border-color: var(--accent); }

.column-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 40vh;
  overflow-y: auto;
  counter-reset: col;
}
.column-list li { display: flex; align-items: center; gap: 6px; counter-increment: col; }
.column-list li::before { content: counter(col, decimal-leading-zero); color: var(--muted); font-size: 12px; width: 20px; }
.column-list input {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--field-border);
  padding: 5px 8px;
  outline: none;
}
.column-list input:focus { border-color: var(--accent); }
.column-list .empty { color: var(--muted); font-size: 12px; padding: 6px 0; }
.column-list .empty::before { content: none; }
.btn-add-row { align-self: flex-start; border-style: dashed; }

/* ---------- segmented toggle (radio group) ---------- */

.segmented { display: inline-flex; border: 1px solid var(--border-strong); align-self: flex-start; }
.segmented label { position: relative; cursor: pointer; }
.segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented span { display: block; padding: 5px 12px; color: var(--text-dim); }
.segmented label + label span { border-left: 1px solid var(--border-strong); }
.segmented label:hover span { color: var(--text); background: var(--surface-3); }
.segmented input:checked + span { background: var(--accent); color: var(--accent-ink); }
.segmented input:focus-visible + span { outline: 1px solid var(--accent); outline-offset: 2px; }
.segmented input:disabled + span { opacity: 0.45; cursor: not-allowed; }

.look-row { display: flex; gap: 20px; flex-wrap: wrap; }
.look-row .field { flex: none; }
.hint { font-size: 12px; color: var(--text-secondary); }

.check { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; color: var(--text-primary); }
.check input { accent-color: var(--accent); margin: 0; }
.save-preset { display: flex; flex-direction: column; gap: 6px; }
.save-preset input[type='text'] {
  background: var(--bg);
  border: 1px solid var(--field-border);
  padding: 5px 8px;
  outline: none;
}
.save-preset input[type='text']:focus { border-color: var(--accent); }

/* ---------- quick switcher (ctrl/cmd+k) ---------- */

.switcher-dialog { width: min(440px, calc(100vw - 32px)); margin-top: 12vh; }
.switcher-dialog .qs-input {
  width: 100%;
  background: var(--bg);
  border: 0;
  border-bottom: 1px solid var(--field-border);
  padding: 12px 14px;
  outline: none;
  font-size: 14px;
}
.qs-list { list-style: none; margin: 0; padding: 4px 0; max-height: 50vh; overflow-y: auto; }
.qs-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  cursor: pointer;
  color: var(--text-dim);
}
.qs-list li[aria-selected='true'] { background: var(--surface-3); color: var(--text); }
.qs-list li[aria-selected='true']::before { content: '>'; color: var(--accent); margin-left: -8px; }
.qs-list .swatch { width: 8px; height: 8px; flex: none; background: var(--swatch, var(--border-strong)); }
.qs-list .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qs-list .label mark { background: transparent; color: var(--accent); }
.qs-list .n { margin-left: auto; color: var(--muted); font-size: 12px; }
.qs-list .current { color: var(--muted); font-size: 12px; }
.qs-list .qs-new { color: var(--accent); }
.qs-foot { display: flex; gap: 14px; padding: 6px 14px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.qs-foot kbd, .menu-item kbd { font: inherit; border: 1px solid var(--border-strong); padding: 0 4px; }
.menu-item .kbd-hint { margin-left: auto; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* ---------- card face: color, flags, due date, selection ---------- */

.card[data-color='red'] { --card-color: var(--c-red); }
.card[data-color='orange'] { --card-color: var(--c-orange); }
.card[data-color='yellow'] { --card-color: var(--c-yellow); }
.card[data-color='green'] { --card-color: var(--c-green); }
.card[data-color='teal'] { --card-color: var(--c-teal); }
.card[data-color='blue'] { --card-color: var(--c-blue); }
.card[data-color='purple'] { --card-color: var(--c-purple); }
.card[data-color='pink'] { --card-color: var(--c-pink); }
.card[data-color]:not([data-color='']) { background: color-mix(in srgb, var(--card-color) var(--tint), var(--surface-2)); }
.card[data-color]:not([data-color='']):hover { background: color-mix(in srgb, var(--card-color) calc(var(--tint) + 6%), var(--surface-2)); }

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

.flag-blocked {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--danger);
  border: 1px solid color-mix(in srgb, var(--danger) 50%, transparent);
  padding: 0 4px;
}
.meta-icons { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; color: var(--text-dim); }
.meta-icons .has-desc { margin-left: 0; }
.comment-count { font-size: 12px; display: inline-flex; gap: 3px; align-items: center; }
.comment-count svg { width: 11px; height: 11px; }

.foot-left { display: flex; gap: 8px; align-items: center; min-width: 0; flex-wrap: wrap; }
.badge { font-size: 12px; padding: 0 4px; border: 1px solid var(--badge-border); color: var(--text-dim); white-space: nowrap; }
.due-later { }
.due-soon { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 55%, transparent); }
.due-over { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 60%, transparent); font-weight: 700; }
.due-done { color: var(--muted); text-decoration: line-through; }
.checklist-badge.complete { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.board-chip { font-size: 12px; color: var(--text-dim); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-chip::before { content: '~/'; color: var(--accent); }

.select-box {
  width: 14px;
  height: 14px;
  flex: none;
  border: 1px solid var(--field-border);
  background: var(--bg);
  display: none;
  place-items: center;
  font-size: 12px;
  line-height: 1;
  color: var(--accent-ink);
}
.selecting .select-box, .card.selected .select-box { display: inline-grid; }
.card.selected { outline: 2px solid var(--accent); outline-offset: -1px; }
.card.selected .select-box { background: var(--accent); border-color: var(--accent); }
.card.selected .select-box::after { content: '✓'; }
.selecting .card { cursor: default; }

/* ---------- card editor (wide, two panes) ---------- */

.dialog-wide { width: min(980px, calc(100vw - 32px)); }
.card-dialog-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.card-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.card-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; border-left: 1px solid var(--border); padding-left: 20px; }
.card-side-empty { grid-column: 2; margin: 0; align-self: center; text-align: center; }
.no-side .card-side { display: none; }
.card-dialog-body:not(.no-side) .card-side-empty { display: none; }

.side-section { display: flex; flex-direction: column; gap: 6px; }
.side-section h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.side-section h3 .muted { font-weight: 400; letter-spacing: 0; }

.inline-input {
  background: var(--bg);
  border: 1px solid var(--field-border);
  padding: 5px 8px;
  outline: none;
  width: 100%;
  min-width: 0;
}
.inline-input:focus { border-color: var(--accent); }

.progress { height: 3px; background: var(--surface-3); }
.progress span { display: block; height: 100%; width: 0; background: var(--accent); transition: width 0.2s; }

.checklist, .links, .activity { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.checklist li { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.checklist li.drop-before { box-shadow: 0 -2px 0 var(--accent); }
.checklist .grip { cursor: grab; color: var(--muted); font-size: 12px; padding: 0 2px; user-select: none; }
.checklist input[type='checkbox'] { accent-color: var(--accent); margin: 0; flex: none; }
.checklist .item-text {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 1px solid transparent;
  padding: 3px 6px;
  outline: none;
}
.checklist .item-text:hover { border-color: var(--border); }
.checklist .item-text:focus { border-color: var(--accent); background: var(--bg); }
.checklist li.done .item-text { color: var(--muted); text-decoration: line-through; }
.checklist .icon-btn, .links .icon-btn { width: 20px; height: 20px; font-size: 12px; opacity: 0.5; }
.checklist li:hover .icon-btn, .links li:hover .icon-btn, .checklist .icon-btn:focus-visible, .links .icon-btn:focus-visible { opacity: 1; }

.links li { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 12px; min-width: 0; }
.link-rel { color: var(--muted); font-size: 12px; white-space: nowrap; }
.link-rel.blocked { color: var(--danger); }
.link-card {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  flex: 1;
}
.link-card:hover { color: var(--accent); text-decoration: underline; }
.link-card .muted { font-size: 12px; }
.links li.resolved .link-card { color: var(--muted); text-decoration: line-through; }
.link-add { display: flex; gap: 6px; }
.link-add select { background: var(--bg); border: 1px solid var(--field-border); padding: 4px 6px; outline: none; flex: none; }
.link-add select:focus { border-color: var(--accent); }
.links .empty, .activity .empty, .checklist .empty { color: var(--muted); font-size: 12px; padding: 2px 0; }

.suggestions li .sub { color: var(--muted); font-size: 12px; margin-left: auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }

.comment-box { display: flex; flex-direction: column; gap: 6px; }
.comment-box textarea {
  background: var(--bg);
  border: 1px solid var(--field-border);
  padding: 6px 8px;
  resize: vertical;
  min-height: 44px;
  outline: none;
}
.comment-box textarea:focus { border-color: var(--accent); }
.comment-box .btn { align-self: flex-end; }
/* The side panel has a fixed height; the activity list takes what's left and scrolls inside it,
   so a long history never makes the dialog taller. The comment box stays pinned above it. */
.card-side { height: min(620px, calc(100vh - 190px)); }
.card-side .side-section:last-child { flex: 1 1 auto; min-height: 140px; }
.checklist { max-height: 190px; overflow-y: auto; }
.links { max-height: 110px; overflow-y: auto; }
.activity { gap: 2px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.activity li { padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.activity li:last-child { border-bottom: 0; }
.activity .when { color: var(--muted); font-size: 12px; }
.activity .event { color: var(--muted); font-size: 12px; }
.activity .comment-head { display: flex; gap: 8px; align-items: baseline; }
.activity .comment-head .btn-quiet { margin-left: auto; padding: 0; }
.activity .comment-body { white-space: pre-wrap; word-break: break-word; margin-top: 2px; }

.due-row { display: flex; gap: 6px; align-items: center; }
.due-row input { flex: 1; }
.swatches { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px 0; }
.swatches label { position: relative; cursor: pointer; }
.swatches input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.swatches .sw { display: block; width: 22px; height: 22px; border: 1px solid var(--border-strong); background: var(--sw); }
.swatches .sw-none { background: linear-gradient(135deg, transparent 45%, var(--muted) 45% 55%, transparent 55%), var(--bg); }
.swatches input:checked + .sw { outline: 2px solid var(--text); outline-offset: 1px; }
.swatches input:focus-visible + .sw { outline: 2px solid var(--accent); outline-offset: 1px; }

@media (max-width: 820px) {
  .card-side { height: auto; }
  .activity { max-height: 280px; }
  .card-dialog-body { grid-template-columns: minmax(0, 1fr); }
  .card-side { border-left: 0; padding-left: 0; border-top: 1px solid var(--border); padding-top: 14px; }
  .card-side-empty { grid-column: 1; }
}

/* ---------- board menu: my day, pinned ---------- */

.board-menu .menu-section {
  padding: 6px 12px 2px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.board-menu li { display: flex; align-items: stretch; }
.board-menu li .menu-item { flex: 1; min-width: 0; }
.pin-btn {
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  padding: 0 10px;
  font-size: 12px;
  opacity: 0;
}
.board-menu li:hover .pin-btn, .pin-btn:focus-visible, .pin-btn[aria-pressed='true'] { opacity: 1; }
.pin-btn[aria-pressed='true'] { color: var(--warn); }
.pin-btn:hover { color: var(--text); }
.menu-myday { border-bottom: 1px solid var(--border); color: var(--text); }

/* Board type at a glance: a thin bar on the left edge of a board's row, one fixed color per type
   (green quick kanban, purple sprint board, orange to-do list), independent of the board's own
   accent color (that's the square swatch). */
.board-type-quick { --type-color: var(--type-quick); }
.board-type-sprint { --type-color: var(--type-sprint); }
.board-type-todo { --type-color: var(--type-todo); }
.board-menu li.board-row, .qs-list li.board-row { box-shadow: inset 3px 0 0 var(--type-color, transparent); }
.board-menu li.board-row.dragging { opacity: 0.4; }
.board-menu .type-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 6px 12px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); }
.board-menu .type-legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.board-menu .type-legend i { width: 3px; height: 10px; background: var(--type-color); }
.type-color-rows { display: flex; flex-direction: column; gap: 6px; }
.type-color-name { min-width: 110px; font-size: 12px; }

/* ---------- quick switcher: sections + card results ---------- */

.qs-list .qs-section {
  padding: 8px 14px 2px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  cursor: default;
}
.qs-list .qs-section::before { content: none !important; }
.qs-list .card-id { color: var(--muted); font-size: 12px; flex: none; }
.qs-list .where { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; max-width: 40%; overflow: hidden; text-overflow: ellipsis; }

/* ---------- bulk bar ---------- */

.bulk-bar {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  max-width: calc(100vw - 32px);
  padding: 8px 10px 8px 14px;
  background: var(--surface);
  border: 1px solid var(--accent);
  box-shadow: 0 12px 32px var(--shadow);
}
.bulk-count { font-weight: 700; }
@media (max-width: 640px) {
  .bulk-bar { flex-wrap: wrap; white-space: normal; left: 16px; right: 16px; transform: none; }
  body.bulk-active .toast { bottom: 128px; }
}
.bulk-move { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.bulk-move select { background: var(--bg); border: 1px solid var(--field-border); padding: 4px 6px; outline: none; }
body.bulk-active .toast { bottom: 76px; }
body.bulk-active .board { padding-bottom: 72px; }
#select-btn[aria-pressed='true'] { border-color: var(--accent); color: var(--accent); }

/* ---------- my day ---------- */

.myday-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 16px 0;
  font-size: 12px;
}
.myday-bar strong { color: var(--text); }
.myday-controls { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
.myday-controls select { min-width: 0; max-width: 100%; }
.myday-controls .btn { font-size: 12px; padding: 3px 10px; }
.has-bg .myday-bar { background: color-mix(in srgb, var(--bg) 70%, transparent); padding-bottom: 8px; backdrop-filter: blur(var(--glass-blur, 0px)); }

/* ---------- My Day dashboard sidebar ---------- */

.dash {
  flex: 0 0 280px;
  width: 280px;
  max-height: 100%;
  overflow-y: auto;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 12px;
  font-size: 12px;
}
.has-bg.glass .dash {
  background: color-mix(in srgb, var(--surface) var(--glass-panel, 55%), transparent);
  backdrop-filter: blur(var(--glass-blur, 0px));
  -webkit-backdrop-filter: blur(var(--glass-blur, 0px));
  border-color: var(--glass-edge);
}
.dash.collapsed { flex-basis: 36px; width: 36px; padding: 8px 4px; overflow: hidden; }
.dash.collapsed > :not(.dash-head) { display: none; }
.dash.collapsed .dash-head { flex-direction: column; }
.dash.collapsed .dash-title { writing-mode: vertical-rl; }
.dash-head { display: flex; align-items: center; gap: 8px; }
.dash-title { font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; color: var(--text-dim); }
.dash-head .icon-btn { margin-left: auto; }
.dash.collapsed .dash-head .icon-btn { margin-left: 0; }
.dash h4 { margin: 0 0 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.stat { border: 1px solid var(--border); padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; }
.stat b { font-size: 18px; line-height: 1.1; color: var(--text); }
.stat span { color: var(--muted); font-size: 12px; }
.stat.warn b { color: var(--warn); }
.stat.bad b { color: var(--danger); }
.stat.good b { color: var(--accent); }
.dash-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dash-list li { border-bottom: 1px solid var(--border); }
.dash-list li:last-child { border-bottom: 0; }
.dash-list button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 5px 2px;
  text-align: left;
  cursor: pointer;
  color: var(--text-dim);
}
.dash-list button:hover, .dash-list button:focus-visible { color: var(--text); background: var(--surface-3); outline: none; }
.dash-list .label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-list .sub { color: var(--muted); font-size: 12px; white-space: nowrap; }
.dash-list .swatch { width: 8px; height: 8px; flex: none; background: var(--swatch, var(--border-strong)); }
.dash-list .done-mark { color: var(--accent); }
.dash-list .num { font-size: 12px; color: var(--muted); min-width: 1.5em; text-align: right; }
.dash-list .num.bad { color: var(--danger); }
.dash-empty { color: var(--muted); font-size: 12px; margin: 0; }
@media (max-width: 900px) {
  .dash { margin-left: 0; }
}
.view-myday .tools, .view-myday #archive-btn, .view-myday #settings-btn, .view-myday #add-column-btn, .view-myday #select-btn, .view-myday .more-btn { display: none; }
.view-myday .col-head { cursor: default; }

/* ---------- to-do lists ---------- */

.todo-view .board { display: block; overflow: auto; }
.todo { max-width: 760px; margin: 0 auto; padding: 8px 16px 40px; }
.todo-list { list-style: none; margin: 0; padding: 0; }
.todo-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 7px 6px;
  color: var(--text-primary); line-height: 1.5; cursor: grab;
}
.todo-item:hover, .todo-item:focus-within { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.todo-item.dragging { opacity: 0.4; }
.read-only-board .todo-item { cursor: default; }
.todo-bullet {
  flex: none; width: 16px; height: 16px; margin-top: 3px; padding: 0; border: 1.5px solid var(--text-secondary);
  background: transparent; color: var(--accent-ink); font: 700 12px/1 var(--font); cursor: pointer;
  display: grid; place-items: center;
}
.todo-bullet:hover:not(:disabled) { border-color: var(--accent); }
.todo-bullet:disabled { cursor: default; }
.todo-item.done .todo-bullet { background: var(--accent); border-color: var(--accent); }
.todo-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.todo-body[role='button'] { cursor: pointer; }
.todo-body[role='button']:hover .todo-text { color: var(--accent); }
.todo-body:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.todo-text { overflow-wrap: anywhere; white-space: pre-wrap; }
.todo-item.done .todo-text { text-decoration: line-through; color: var(--muted); }
.todo-desc { color: var(--text-secondary); font-size: 12px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.todo-item.done .todo-desc { opacity: 0.7; }
#todo-dialog textarea { min-height: 0; resize: none; line-height: 1.5; }
.todo-menu-btn { visibility: hidden; flex: none; }
.todo-item:hover .todo-menu-btn, .todo-item:focus-within .todo-menu-btn, .todo-menu-btn[aria-expanded="true"] { visibility: visible; }
@media (hover: none) { .todo-menu-btn { visibility: visible; } }
.todo-add { display: flex; align-items: center; gap: 10px; padding: 7px 6px; margin-top: 4px; }
.todo-bullet-new { border-style: dashed; color: var(--muted); cursor: default; font-size: 12px; margin-top: 0; }
.todo-new { flex: 1; min-width: 0; font: inherit; background: transparent; border: none; border-bottom: 1px solid var(--border); padding: 4px 0; color: var(--text-primary); }
.todo-new:focus { outline: none; border-bottom-color: var(--accent); }
.todo-empty { padding: 12px 6px 0; margin: 0; }
/* Over a background image the list gets a panel like columns do (its text would sit on the photo). */
.has-bg .todo { margin-top: 16px; border: 1px solid var(--border); background: var(--surface); padding: 8px 12px 12px; }
.has-bg.glass .todo {
  background: color-mix(in srgb, var(--surface) var(--glass-panel, 55%), transparent);
  backdrop-filter: blur(var(--glass-blur, 0px));
  -webkit-backdrop-filter: blur(var(--glass-blur, 0px));
  border-color: var(--glass-edge);
}
.myday-empty { color: var(--muted); padding: 24px 0; }

/* ---------- auth ---------- */

.booting .topbar, .booting #board, .booting .myday-bar { visibility: hidden; }
.logged-out .topbar, .logged-out #email-banner, .logged-out #board, .logged-out #col-tabs, .logged-out .myday-bar, .logged-out .bulk-bar, .logged-out .board-background { display: none !important; }

.auth-screen { flex: 1; display: grid; place-items: center; align-content: center; gap: 16px; padding: 16px; }
.auth-card {
  width: min(360px, 100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
}
.auth-card > div { display: flex; flex-direction: column; gap: 12px; }
.auth-title { margin: 0 0 4px; font-size: 18px; }
.auth-card .btn { align-self: stretch; padding: 8px; }
.auth-error { margin: 0; color: var(--danger); font-size: 12px; }
.auth-switch { margin: 0; font-size: 12px; display: flex; gap: 6px; justify-content: center; }

/* "or" + "log in with Google / GitHub" under the login button */
.auth-providers { display: flex; flex-direction: column; gap: 8px; }
.auth-or { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; border-top: 1px solid var(--border); }
.auth-provider-list { display: flex; flex-direction: column; gap: 8px; }
.auth-card a.provider-btn { display: block; text-align: center; text-decoration: none; }

/* account settings → connected logins */
.login-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--border); }
.login-list li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; }
.login-list li + li { border-top: 1px solid var(--border); }
.login-list .login-name { font-weight: 600; min-width: 64px; }
.login-list .login-who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); font-size: 12px; }

/* A one-line notice under the top bar (e.g. "add an email address"). */
.notice-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 10px 16px 0;
  padding: 6px 4px 6px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border-strong));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--text-primary);
  font-size: 12px;
}
.notice-bar > span { flex: 1; min-width: 0; }
.notice-bar[hidden] { display: none; }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { color: var(--text); }
.cursor { color: var(--accent); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.account { position: relative; }
.account-menu { left: auto; right: 0; min-width: 220px; }
.menu-danger-quiet { color: var(--muted); border-top: 1px solid var(--border); }
.menu-danger-quiet:hover, .menu-danger-quiet:focus-visible { color: var(--danger); }

/* no boards yet (a new account): only board-independent controls */
.no-board .tools, .no-board #select-btn, .no-board #archive-btn, .no-board #settings-btn, .no-board #add-column-btn { display: none; }
.empty-board { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; color: var(--text-dim); max-width: 420px; }
.empty-board p { margin: 0; }

/* ---------- attachments (card editor) ---------- */

.attachments-section { padding: 8px; margin: 0 -8px; border: 1px dashed transparent; }
.attachments-section.drop-target { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, transparent); }
.attachments { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 210px; overflow-y: auto; }
.att { display: flex; align-items: center; gap: 10px; padding: 4px; border: 1px solid var(--border); background: var(--surface-2); }
.att.uploading { opacity: 0.7; }
.att-thumb { width: 44px; height: 44px; flex: none; display: block; background: var(--bg); border: 1px solid var(--border); overflow: hidden; }
.att-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.att-badge {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  background: var(--bg);
  border: 1px solid var(--border);
}
.att-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.att-name { color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
a.att-name:hover { color: var(--accent); text-decoration: underline; }
.att-meta { color: var(--muted); font-size: 12px; }
.att .icon-btn { opacity: 0.5; }
.att:hover .icon-btn, .att .icon-btn:focus-visible { opacity: 1; }
.attachments .empty { color: var(--muted); font-size: 12px; padding: 2px 0; border: 0; background: none; }
.attachments-drop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.activity .deleted-user { color: var(--muted); font-style: italic; font-weight: 400; }

/* ---------- calendar ---------- */

.view-calendar .board { display: block; overflow: auto; }
.calendar-bar .cal-nav { display: flex; gap: 4px; }
.calendar-bar .cal-nav .btn { padding: 3px 10px; font-size: 12px; }
.cal-title { font-size: 13px; color: var(--text); min-width: 12ch; }
.cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  min-width: 640px;
}
.cal-weekday { background: var(--surface); padding: 6px 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.cal-cell { background: var(--surface); min-height: 104px; padding: 4px 6px 6px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cal-week .cal-cell { min-height: calc(100vh - 190px); }
.cal-cell.weekend { background: color-mix(in srgb, var(--surface) 88%, var(--bg)); }
.cal-cell.outside { background: var(--bg); }
.cal-cell.outside .cal-date { color: var(--muted); opacity: 0.6; }
.cal-date { font-size: 12px; color: var(--text-dim); }
.cal-cell.today .cal-date { color: var(--accent-ink); background: var(--accent); align-self: flex-start; padding: 0 5px; font-weight: 700; }
.cal-cell.today { box-shadow: inset 0 0 0 1px var(--accent); }
.cal-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; max-height: 150px; }
.cal-week .cal-cards { max-height: none; }
.cal-card {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 2px 5px;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  min-width: 0;
}
.cal-card:hover, .cal-card:focus-visible { border-color: var(--accent); outline: none; }
.cal-dot { width: 7px; height: 7px; flex: none; background: var(--card-color, var(--border-strong)); }
.cal-card[data-color='red'] { --card-color: var(--c-red); }
.cal-card[data-color='orange'] { --card-color: var(--c-orange); }
.cal-card[data-color='yellow'] { --card-color: var(--c-yellow); }
.cal-card[data-color='green'] { --card-color: var(--c-green); }
.cal-card[data-color='teal'] { --card-color: var(--c-teal); }
.cal-card[data-color='blue'] { --card-color: var(--c-blue); }
.cal-card[data-color='purple'] { --card-color: var(--c-purple); }
.cal-card[data-color='pink'] { --card-color: var(--c-pink); }
.cal-card-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-board { color: var(--muted); font-size: 12px; flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-month .cal-board { display: none; }
/* week view has the height: the board name gets its own line so the title keeps the width */
.cal-week .cal-card { flex-wrap: wrap; row-gap: 0; padding: 3px 5px; }
.cal-week .cal-board { flex-basis: 100%; max-width: none; padding-left: 12px; }
.cal-card.done .cal-card-title { color: var(--muted); text-decoration: line-through; }
.cal-card.over { border-color: color-mix(in srgb, var(--danger) 60%, var(--border)); }
.cal-card.over .cal-card-title { color: var(--danger); }
.cal-empty { margin: 12px 0 0; }
.has-bg.glass .cal { background: var(--glass-edge); }
.has-bg.glass .cal-cell, .has-bg.glass .cal-weekday {
  background: color-mix(in srgb, var(--surface) var(--glass-panel, 60%), transparent);
  backdrop-filter: blur(var(--glass-blur, 0px));
  -webkit-backdrop-filter: blur(var(--glass-blur, 0px));
}
.has-bg.glass .cal-cell.outside { background: color-mix(in srgb, var(--bg) 70%, transparent); }

/* ---------- public share page ---------- */

.share-page .topbar { gap: 12px; }
.read-only-tag { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); border: 1px solid var(--border-strong); padding: 1px 6px; }
.card.read-only { cursor: default; }
.card.read-only .card-meta { padding-right: 0; }
#share-url { font-size: 12px; }

/* ---------- admin page ---------- */

.admin-page { height: auto; min-height: 100%; }
.admin-page .topbar { position: static; }
.brand-static { font-weight: 700; font-size: 15px; }
.admin-page .actions { align-items: center; gap: 12px; }
a.btn { text-decoration: none; display: inline-block; }
/* min-width: 0 lets these flex items shrink so only the table scrolls sideways, not the page */
.admin-main { padding: 16px; display: flex; flex-direction: column; gap: 20px; max-width: 1100px; width: 100%; min-width: 0; }
.admin-section { display: flex; flex-direction: column; gap: 10px; background: var(--surface); border: 1px solid var(--border); padding: 16px; min-width: 0; }
.admin-head { display: flex; align-items: baseline; gap: 12px; }
.admin-head h2 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.admin-section .hint { margin: 0; }
.admin-section .hint code { color: var(--text-dim); }
.admin-section > .btn { align-self: flex-start; }
.table-wrap { overflow-x: auto; position: relative; } /* relative: keeps the absolutely-positioned hidden header label clipped too */
.admin-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.admin-table th, .admin-table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.admin-table th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; }
.admin-table .num { text-align: right; }
.admin-table tbody tr:hover { background: var(--surface-2); }
.admin-table tr.inactive td { color: var(--muted); }
.admin-table .uname { color: var(--text); font-weight: 700; margin-right: 6px; }
.admin-table tr.inactive .uname { color: var(--muted); text-decoration: line-through; }
.admin-table .row-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.admin-table .btn { font-size: 12px; padding: 3px 8px; }
.admin-table .btn:disabled { opacity: 0.4; cursor: default; }
.status { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.status-active { color: var(--accent); }
.status-deactivated { color: var(--danger); }
.status-setup { color: var(--warn); }
.status-warn { color: var(--warn); }
.sys-grid { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: 12px; }
.sys-grid dt { color: var(--muted); }
.sys-grid dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.sys-grid .bad { color: var(--danger); }
.sys-grid .warn { color: var(--warn); }
.sys-grid .ok { color: var(--accent); }
#reset-url { font-size: 12px; }
@media (max-width: 560px) {
  .sys-grid { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .sys-grid dd { margin-bottom: 6px; }
}
.purge-summary { margin: 0; padding-left: 18px; font-size: 12px; color: var(--text-dim); display: flex; flex-direction: column; gap: 3px; }
.purge-board { display: flex; align-items: center; gap: 10px; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--border); }
.purge-board-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.purge-board select { background: var(--bg); border: 1px solid var(--field-border); padding: 4px 6px; outline: none; max-width: 55%; }
.purge-board select:focus { border-color: var(--accent); }
.purge-activity { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.purge-activity legend { font-size: 12px; color: var(--text-dim); padding: 0; margin-bottom: 4px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.members-list .inactive { color: var(--muted); text-decoration: line-through; }

/* ---------- members ---------- */

.members-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.members-list li { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.members-list li:last-child { border-bottom: 0; }
.members-list .role { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.members-list .btn-quiet { margin-left: auto; }
.activity .who { color: var(--text-dim); font-weight: 700; }
.assignee.legacy { font-style: italic; opacity: 0.75; }

/* ---------- skeleton loading (theme-aware via --skeleton) ---------- */

.skel {
  background: linear-gradient(90deg, var(--skeleton) 25%, var(--skeleton-shine) 50%, var(--skeleton) 75%);
  background-size: 300% 100%;
  animation: skel 1.4s ease-in-out infinite;
}
@keyframes skel { from { background-position: 100% 0; } to { background-position: 0 0; } }
.skel-column { pointer-events: none; }
.skel-column .col-head .skel { height: 12px; width: 40%; }
.skel-card { background: var(--surface-2); border: 1px solid var(--border); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.skel-line { height: 10px; }
.skel-line.short { width: 35%; }
.skel-line.mid { width: 70%; }
.skel-row { display: flex; align-items: center; gap: 10px; padding: 8px 14px; }
.skel-row .skel-line { flex: 1; }
.skel-row .skel-dot { width: 8px; height: 8px; flex: none; }
.has-bg.glass .skel-card { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; }
  .cursor { animation: none; }
}

/* ---------- background + glass ---------- */

.board-background {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: var(--board-bg-image);
  background-size: cover;
  background-position: center;
  display: none;
}
.has-bg .board-background { display: block; }

/* Column style "solid" (or no background) uses the regular opaque rules above.
   "glass" only kicks in when there's a background to see through. */
.has-bg.glass .topbar {
  background: color-mix(in srgb, var(--bg) var(--glass-bar, 70%), transparent);
  backdrop-filter: blur(var(--glass-blur, 0px));
  -webkit-backdrop-filter: blur(var(--glass-blur, 0px));
  border-bottom-color: var(--glass-edge-soft);
}
/* How opaque glass panels are depends on how bright the image is (set by applyGlass() in the
   theme script): just enough to keep text readable over light and dark images alike. */
.has-bg.glass .column {
  background: color-mix(in srgb, var(--surface) var(--glass-panel, 55%), transparent);
  backdrop-filter: blur(var(--glass-blur, 0px));
  -webkit-backdrop-filter: blur(var(--glass-blur, 0px));
  border-color: var(--glass-edge);
}
.has-bg.glass .col-head { border-bottom-color: var(--glass-edge-soft); }
.has-bg.glass .card { background: color-mix(in srgb, var(--surface-2) var(--glass-card, 82%), transparent); border-color: var(--glass-edge-soft); }
.has-bg.glass .card:hover { background: color-mix(in srgb, var(--surface-3) 90%, transparent); }
.has-bg.glass .card-list:empty::after { border-color: var(--glass-edge); color: var(--text-dim); }

.has-bg.glass .card[data-color]:not([data-color='']) {
  background: color-mix(in srgb, var(--card-color) calc(var(--tint) + 4%), color-mix(in srgb, var(--surface-2) var(--glass-card, 82%), transparent));
}

/* Solid columns over a background: a thin shadow separates them from the image. */
.has-bg:not(.glass) .column { box-shadow: 0 4px 16px var(--shadow); }

/* sorted view: order is temporary, so card dragging is off */
.sorted .card { cursor: pointer; }
.column.no-matches .card-list::after {
  content: 'no matches';
  color: var(--muted);
  font-size: 12px;
  padding: 4px;
  text-align: center;
}

/* ---------- small screens ---------- */

/* Phones and touch screens. iOS zooms into any field under 16px when it gets focus, so fields
   are 16px there (the rest of the design stays small); pinch-zoom is untouched (see the viewport
   tag). touch-action: manipulation drops the double-tap-to-zoom delay on controls. */
@media (max-width: 600px), (pointer: coarse) {
  input, select, textarea { font-size: 16px !important; }
}
button, a, input, select, textarea, label, summary, [role='button'], [role='tab'], .card, .todo-body, .col-head { touch-action: manipulation; }

/* The top bar keeps to search, filter & sort, ⋯ and the account. Settings, select, archive and
   add a column are in the ⋯ menu (their buttons stay in the page, hidden, and the menu presses them);
   sort is in the filter panel. */
.topbar > *, .actions, .tools { min-width: 0; }
#settings-btn, #select-btn, #archive-btn, #add-column-btn, .tools .sort { display: none !important; }
.no-board .more-btn { display: none; }

/* phones: one tab per column above the board */
.col-tabs { display: none; }
@media (max-width: 640px) {
  .col-tabs:not([hidden]) {
    display: flex;
    flex: none;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 8px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
  }
  .col-tabs::-webkit-scrollbar { display: none; }
}
.col-tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 10px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}
.col-tab .n { color: var(--muted); }
.col-tab[aria-current='true'] { color: var(--text); border-bottom-color: var(--accent); }
.col-tab:focus-visible { outline-offset: -2px; }

/* the last "column": adds one */
.add-column {
  flex: 0 0 var(--col-width);
  align-self: flex-start;
  min-height: 44px;
  background: transparent;
  border: 1px dashed var(--border-strong);
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
  padding: 12px;
}
.add-column:hover, .add-column:focus-visible { color: var(--text); border-color: var(--accent); }

/* Phones: dialogs become full-width sheets at the top of what's visible (so the on-screen
   keyboard never covers the fields or the buttons), as tall as they need up to the full height. */
@media (max-width: 600px) {
  dialog.dialog {
    width: 100%;
    max-width: 100%;
    max-height: var(--visible-h);
    margin: 0;
    inset: var(--vv-top, 0px) 0 auto 0;
    border-width: 0 0 1px;
    padding-top: env(safe-area-inset-top);
  }
  dialog#settings-dialog > form, dialog#account-dialog[open] { height: var(--visible-h); }
}

@media (max-width: 900px) {
  .actions { margin-left: 0; }
  .tools { order: 3; width: 100%; }
  .search { flex: 1; }
  .search input { width: 100%; }
}

@media (max-width: 640px) {
  :root { --col-width: calc(100vw - 48px); }
  .topbar { padding: 10px 16px; gap: 8px; }
  .actions { margin-left: auto; }
  .stats { width: 100%; }
  .bg-row { flex-direction: column; }
  .bg-actions { flex-direction: row; }
  .board { scroll-snap-type: x mandatory; padding: 12px 16px; }
  .column { scroll-snap-align: center; }
  .field-row { flex-direction: column; }
  .dialog-foot { flex-wrap: wrap; }
}


/* ======================= phase 9 ======================= */

/* ---------- invites ---------- */

.invite-dot { width: 7px; height: 7px; background: var(--accent); margin-left: 6px; align-self: center; flex: none; }
.invites-box { border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.board-menu .menu-section, .invites-box .menu-section, .account-switch .menu-section {
  padding: 8px 12px 2px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
}
.invite-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.invite { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 12px; }
.invite .swatch { width: 8px; height: 8px; flex: none; background: var(--swatch, var(--border-strong)); }
.invite-text { flex: 1; min-width: 0; color: var(--text-primary); }
.invite-text strong { font-weight: 500; }
.invite .btn { font-size: 12px; padding: 2px 8px; }
/* in the narrow board menu: text on its own line, buttons underneath */
.board-menu li.invite { flex-wrap: wrap; align-items: center; row-gap: 6px; }
.board-menu li.invite .invite-text { flex: 1 1 calc(100% - 20px); }
.board-menu li.invite .btn:first-of-type { margin-left: 16px; }
.empty-board .invite-list { align-self: stretch; border: 1px solid var(--border); background: var(--surface); }

/* ---------- account menu: switching ---------- */

.account-switch { border-bottom: 1px solid var(--border); padding-bottom: 4px; }
.account-switch ul { list-style: none; margin: 0; padding: 0; }
.account-row { display: flex; align-items: center; }
.account-row .menu-item { flex: 1; min-width: 0; }
.account-menu .menu-sep { margin: 0; }

.auth-accounts { display: flex; flex-direction: column; gap: 6px; }
.auth-accounts ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.auth-accounts li { display: flex; align-items: center; gap: 8px; }
.auth-card .auth-accounts .account-pick { flex: 1; text-align: left; color: var(--text-primary); }
.auth-card #login-fields, .auth-card .twofa-fields { display: flex; flex-direction: column; gap: 12px; }
.twofa-fields .link-btn { align-self: flex-start; font-size: 12px; }
.twofa-fields input[name='totp'] { letter-spacing: 0.3em; font-size: 16px; }

/* ---------- 2FA dialog ---------- */

.tfa-step { display: flex; flex-direction: column; gap: 12px; }
.tfa-step .hint { margin: 0; }
.tfa-qr { width: 200px; height: 200px; image-rendering: pixelated; align-self: center; border: 8px solid #fff; background: #fff; }
.tfa-secret { font-size: 13px; letter-spacing: 0.08em; color: var(--text-primary); user-select: all; word-break: break-all; }
.tfa-code-list { margin: 0; padding: 8px 8px 8px 32px; columns: 2; border: 1px solid var(--border); background: var(--bg); }
.tfa-code-list code { font-size: 13px; color: var(--text-primary); user-select: all; }

/* ---------- members, roles, permissions ---------- */

.members-list .member .spacer { flex: 1; }
.members-list .member .btn-quiet { margin-left: 0; }
.members-list .member-name { color: var(--text-primary); }
.member-invite .member-name { color: var(--text-dim); }
.member-email { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invite-note { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.invite-note > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
#member-email { flex: 1; min-width: 0; }
.status-tag {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  padding: 0 5px;
}
.status-tag.declined { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, transparent); }
.status-tag.active { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.status-tag.completed { color: var(--text-secondary); }
.members-list .role-select { width: auto; flex: none; background: var(--bg); border: 1px solid var(--field-border); padding: 1px 4px; font-size: 12px; }
.members-list .member .btn-quiet { white-space: nowrap; }
/* hints that sit directly in a field are descriptions, not labels */
.field > span.hint { font-weight: 400; color: var(--text-secondary); }
.role-select:focus { border-color: var(--accent); outline: none; }
.perm-toggle.custom { color: var(--accent); }
.members-list li.perm-panel { flex-direction: column; align-items: stretch; gap: 4px; padding: 6px 0 8px 16px; background: color-mix(in srgb, var(--surface-3) 60%, transparent); }
.perm-panel .hint { margin: 0 0 2px; }
.perm-panel .check { font-size: 12px; }
.perm-panel .check.overridden > span { color: var(--accent); }
.perm-panel .btn-quiet { align-self: flex-start; margin: 2px 0 0 !important; }
#members-add select { flex: none; width: auto; }

/* ---------- read-only (viewers) ---------- */

.readonly-note { margin: 0; padding: 6px 8px; border: 1px dashed var(--border-strong); color: var(--text-secondary); }
.dialog.read-only .card-main input:disabled,
.dialog.read-only .card-main select:disabled,
.dialog.read-only .card-main textarea:disabled { opacity: 1; color: var(--text-primary); background: transparent; border-style: dashed; cursor: default; }
.checklist .item-text[readonly] { cursor: default; }

/* ---------- sprint boards ---------- */

.sprint-tabs span { padding: 3px 12px; font-size: 12px; }
.sprint-tabs small { font-size: 12px; opacity: 0.8; }
.sprint-info { display: flex; gap: 12px; align-items: center; min-width: 0; color: var(--text-dim); flex-wrap: wrap; }
.sprint-info .bad { color: var(--danger); }
.sprint-info .warn { color: var(--warn); }
/* phones: the sprint bar is one line (tabs, days left, done count); dates and goal are in the
   sprint's own dialog, and complete sprint moves into the ⋯ menu */
@media (max-width: 640px) {
  .sprint-bar { flex-wrap: nowrap; }
  .sprint-bar .sprint-dates, .sprint-bar .sprint-goal, .sprint-bar #sprint-complete { display: none; }
  .sprint-info { flex-wrap: nowrap; gap: 8px; white-space: nowrap; }
}
.sprint-goal { max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
.sprint-empty {
  flex: 0 0 280px;
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border: 1px dashed var(--border-strong);
  background: var(--surface);
  color: var(--text-dim);
}
.sprint-empty p { margin: 0; }
.sprint-empty .preset-row { flex-wrap: wrap; }

.backlog-view .board { display: block; overflow: auto; }
.backlog { display: flex; flex-direction: column; gap: 16px; max-width: 1100px; }
.bl-group { border: 1px solid var(--border); background: var(--surface); }
.bl-group.sprint-active { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
.has-bg.glass .bl-group, .has-bg.glass .bl-completed {
  background: color-mix(in srgb, var(--surface) var(--glass-panel-strong, 72%), transparent);
  backdrop-filter: blur(var(--glass-blur, 0px));
  -webkit-backdrop-filter: blur(var(--glass-blur, 0px));
  border-color: var(--glass-edge);
}
.bl-head { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--border); font-size: 12px; flex-wrap: wrap; }
.bl-head .spacer { flex: 1; }
.bl-head .btn { font-size: 12px; padding: 2px 10px; }
.bl-title { font-weight: 700; color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; }
.bl-goal { margin: 0; padding: 6px 12px 0; color: var(--text-secondary); font-size: 12px; }
.bl-list { list-style: none; margin: 0; padding: 4px 0; min-height: 36px; }
.bl-list.drop-target { background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: inset 0 0 0 1px var(--accent); }
.bl-list .empty { padding: 8px 12px; color: var(--text-secondary); font-size: 12px; }
.bl-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 12px;
  font-size: 12px;
  cursor: pointer;
  border-left: 2px solid transparent;
}
.bl-row:hover, .bl-row:focus-visible { background: var(--surface-3); outline: none; }
.bl-row:focus-visible { border-left-color: var(--accent); }
.bl-row[draggable='true'] { cursor: grab; }
.bl-row[data-priority='high'] { border-left-color: var(--warn); }
.bl-row[data-priority='urgent'] { border-left-color: var(--danger); }
.bl-row .card-id { color: var(--text-secondary); font-size: 12px; flex: none; }
.bl-col { flex: none; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); min-width: 9ch; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-text { flex: 1; min-width: 0; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bl-row.done .bl-text { color: var(--text-secondary); text-decoration: line-through; }
.bl-row .card-tags { flex-wrap: nowrap; }
.bl-row .assignee { flex: none; font-size: 12px; }
.bl-move { flex: none; background: var(--bg); border: 1px solid var(--field-border); font-size: 12px; padding: 1px 4px; max-width: 16ch; }
.bl-move:focus { border-color: var(--accent); outline: none; }
.bl-add { display: block; margin: 0 12px 10px; width: calc(100% - 24px); }
.bl-completed { border: 1px solid var(--border); background: var(--surface); padding: 8px 12px; font-size: 12px; }
.bl-completed summary { cursor: pointer; color: var(--text-dim); }
.bl-done-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.bl-done-sprint { display: flex; gap: 12px; align-items: center; width: 100%; background: transparent; border: 0; padding: 4px 0; cursor: pointer; text-align: left; }
.bl-done-sprint:hover .bl-title { color: var(--accent); }
.bl-done-sprint[aria-expanded='true'] .bl-title::after { content: ' ▾'; }

/* ---------- timeline (gantt) ---------- */

.tl-scroll { overflow: auto; max-height: calc(100vh - 150px); border: 1px solid var(--border); background: var(--surface); }
.has-bg.glass .tl-scroll { background: color-mix(in srgb, var(--surface) var(--glass-panel-strong, 75%), transparent); backdrop-filter: blur(var(--glass-blur, 0px)); border-color: var(--glass-edge); }
.tl { --label: 240px; --day: 30px; width: max-content; min-width: 100%; font-size: 12px; }
.tl-quarter { --day: 12px; }
.tl-row { display: grid; grid-template-columns: var(--label) calc(var(--days) * var(--day)); border-bottom: 1px solid var(--border); min-height: 28px; }
.tl-label {
  position: sticky;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 4px 10px;
  background: var(--surface);
  border: 0;
  border-right: 1px solid var(--border-strong);
  text-align: left;
  color: var(--text-primary);
}
.tl-label .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-card { cursor: pointer; }
.tl-card:hover .label, .tl-card:focus-visible .label { color: var(--accent); }
.tl-card .card-id { color: var(--text-secondary); font-size: 12px; flex: none; }
.tl-track {
  position: relative;
  background-image: linear-gradient(to right, var(--border) 1px, transparent 1px);
  background-size: var(--day) 100%;
}
.tl-quarter .tl-track { background-size: calc(var(--day) * 7) 100%; }
.tl-head { position: sticky; top: 0; z-index: 3; background: var(--surface); min-height: 26px; }
.tl-head .tl-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); z-index: 4; }
.tl-head .tl-track { display: flex; background: var(--surface); }
.tl-day { flex: 0 0 var(--day); width: var(--day); display: grid; place-items: center; font-size: 12px; color: var(--text-secondary); overflow: visible; white-space: nowrap; }
.tl-day.weekend { background: color-mix(in srgb, var(--bg) 55%, transparent); }
.tl-day.first { color: var(--text-primary); font-weight: 700; justify-items: start; }
.tl-day.today { background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.tl-group { background: var(--surface-2); }
.tl-group .tl-label { background: var(--surface-2); font-weight: 500; }
.tl-group .swatch { width: 8px; height: 8px; flex: none; background: var(--swatch, var(--border-strong)); }
.tl-sprint-name { color: var(--text-secondary); font-weight: 400; white-space: nowrap; }
.tl-today, .tl-sprint, .tl-bar { position: absolute; left: calc(var(--from) * var(--day)); }
.tl-today { top: 0; bottom: 0; width: var(--day); background: color-mix(in srgb, var(--accent) 10%, transparent); border-left: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); pointer-events: none; }
.tl-sprint { top: 10px; height: 8px; width: calc(var(--span) * var(--day)); background: color-mix(in srgb, var(--accent) 30%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); }
.tl-sprint.completed { background: color-mix(in srgb, var(--text-secondary) 20%, transparent); border-color: var(--border-strong); }
.tl-bar {
  top: 4px;
  height: 20px;
  width: calc(var(--span) * var(--day) - 2px);
  margin-left: 1px;
  z-index: 1;
  display: flex;
  align-items: center;
  padding: 0 6px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--card-color, var(--accent)) 70%, transparent);
  background: color-mix(in srgb, var(--card-color, var(--accent)) 28%, var(--surface-2));
  color: var(--text-primary);
  font-size: 12px;
  cursor: pointer;
  text-align: left;
}
.tl-bar-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-bar:hover, .tl-bar:focus-visible { border-color: var(--text-primary); outline: none; z-index: 2; }
.tl-bar.clip-start { border-left-style: dashed; }
.tl-bar.clip-end { border-right-style: dashed; }
/* single date: a diamond on the day, title beside it */
.tl-bar.marker { width: auto; max-width: 260px; background: none; border: 0; padding: 0; gap: 6px; }
.tl-bar.marker::before {
  content: '';
  flex: none;
  width: 10px;
  height: 10px;
  margin-left: calc(var(--day) / 2 - 6px);
  transform: rotate(45deg);
  background: var(--card-color, var(--accent));
  border: 1px solid var(--surface);
}
.tl-bar.marker .tl-bar-text { color: var(--text-dim); }
.tl-bar.done { opacity: 0.55; }
.tl-bar.done .tl-bar-text { text-decoration: line-through; }
.tl-bar.over { border-color: var(--danger); }
.tl-bar.over.marker::before { background: var(--danger); }
.tl-bar[data-color='red'] { --card-color: var(--c-red); }
.tl-bar[data-color='orange'] { --card-color: var(--c-orange); }
.tl-bar[data-color='yellow'] { --card-color: var(--c-yellow); }
.tl-bar[data-color='green'] { --card-color: var(--c-green); }
.tl-bar[data-color='teal'] { --card-color: var(--c-teal); }
.tl-bar[data-color='blue'] { --card-color: var(--c-blue); }
.tl-bar[data-color='purple'] { --card-color: var(--c-purple); }
.tl-bar[data-color='pink'] { --card-color: var(--c-pink); }
#tl-board { background: var(--bg); border: 1px solid var(--field-border); font-size: 12px; padding: 3px 6px; max-width: 22ch; }

/* ---------- new board: import ---------- */

.dialog-head .import-btn { margin-left: auto; font-size: 12px; padding: 2px 8px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.import-btn.busy { opacity: 0.5; pointer-events: none; }
.import-list { margin: 0 0 8px; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; color: var(--text-primary); }
.import-list.skipped { color: var(--text-secondary); }

@media (max-width: 700px) {
  .tl { --label: 150px; }
  .bl-col, .bl-row .card-tags, .bl-row .assignee { display: none; }
}

/* ======================= phase 10 ======================= */

/* sign-up honeypot: off-screen rather than display:none, which bots look for */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* checklist: explicit add button next to the input */
.checklist-add-row { display: flex; gap: 6px; align-items: stretch; }
.checklist-add-row .inline-input { flex: 1; min-width: 0; }
.checklist-add-row .btn { font-size: 12px; padding: 2px 10px; flex: none; }

/* automation rules (board settings) */
.rules-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rules-list li { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.rules-list li:last-child { border-bottom: 0; }
.rules-list li.empty { color: var(--text-secondary); border: 0; }
.rules-list input[type='checkbox'] { accent-color: var(--accent); margin: 0; flex: none; }
.rule-text { flex: 1; min-width: 0; color: var(--text-primary); }
.rule-text strong { font-weight: 500; }
.rules-list li.off .rule-text { color: var(--text-secondary); text-decoration: line-through; }
.rule-sw { display: inline-block; width: 10px; height: 10px; vertical-align: middle; background: var(--sw); border: 1px solid var(--border-strong); }
.rule-add { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; }
.rule-add select, .rule-add input {
  width: auto;
  flex: none;
  background: var(--bg);
  border: 1px solid var(--field-border);
  padding: 4px 6px;
  outline: none;
}
.rule-add input { width: 14ch; }
#rule-preset-name { width: 22ch; }
.rule-add .check { font-size: 12px; }
.rules-list li.editing { flex-wrap: wrap; padding: 6px 0; }
.rules-list li.editing .rule-add { flex: 1; }
.rule-order { display: inline-flex; flex: none; }
.rule-order .icon-btn:disabled { opacity: 0.25; cursor: default; }
.rule-add select:focus, .rule-add input:focus { border-color: var(--accent); }

/* activity entries written by automation rules */
.activity li.automation .event { color: var(--text-secondary); }
.activity li.automation .who { color: var(--accent); }

/* timeline: drag to reschedule */
.tl-bar.draggable { cursor: grab; touch-action: none; user-select: none; }
.tl-bar.dragging { cursor: grabbing; z-index: 5; box-shadow: 0 4px 14px var(--shadow); }
.tl-handle {
  position: absolute;
  top: -1px;
  bottom: -1px;
  width: 7px;
  cursor: ew-resize;
  z-index: 1;
}
.tl-handle.start { left: -1px; }
.tl-handle.end { right: -1px; }
.tl-bar:hover .tl-handle, .tl-bar.dragging .tl-handle { background: color-mix(in srgb, var(--card-color, var(--accent)) 70%, transparent); }
.tl-bar[data-preview]::after {
  content: attr(data-preview);
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  padding: 1px 6px;
  white-space: nowrap;
  font-size: 12px;
  background: var(--surface-3);
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  pointer-events: none;
}

/* ======================= phase 11: settings layout ======================= */

/* Board + account settings: sections in a sidebar, one short panel at a time. The dialog keeps
   a fixed height so switching sections doesn't make it jump around. */
.settings-dialog { width: min(820px, calc(100vw - 32px)); overflow: hidden; }
#settings-dialog > form { padding: 0; gap: 0; height: min(640px, calc(var(--visible-h) - 2rem)); }
/* same outer size as board settings (whose 640px is the form inside its 1px border) */
#account-dialog[open] { display: flex; flex-direction: column; height: calc(min(640px, calc(var(--visible-h) - 2rem)) + 2px); }
.settings-dialog .dialog-head { padding: 14px 16px; border-bottom: 1px solid var(--border); justify-content: flex-start; }
.settings-dialog .dialog-foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); align-items: center; }
.settings-dialog .dialog-foot .left { min-width: 0; }
.dirty-note { color: var(--warn); }

.settings-layout { display: flex; flex: 1; min-height: 0; }
.settings-nav {
  display: flex;
  flex-direction: column;
  flex: none;
  width: 170px;
  padding: 8px 0;
  border-right: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 60%, var(--surface));
}
.settings-nav [role='tab'] {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  border-left: 2px solid transparent;
  padding: 8px 14px;
  text-align: left;
  cursor: pointer;
  color: var(--text-dim);
}
.settings-nav [role='tab']:hover { color: var(--text-primary); background: var(--surface-3); }
.settings-nav [role='tab']:focus-visible { outline: 1px solid var(--accent); outline-offset: -1px; }
.settings-nav [role='tab'][aria-selected='true'] { color: var(--text-primary); background: var(--surface); border-left-color: var(--accent); font-weight: 500; }
/* the danger zone sits apart at the bottom: findable, not the first thing you see */
.settings-nav .tab-danger { margin-top: auto; color: var(--text-secondary); border-top: 1px solid var(--border); }
.settings-nav .tab-danger:hover, .settings-nav .tab-danger[aria-selected='true'] { color: var(--danger); border-left-color: var(--danger); }
.tab-badge { font-size: 12px; line-height: 1.4; padding: 0 5px; background: var(--accent); color: var(--accent-ink); font-weight: 700; }

.settings-panels { flex: 1; min-width: 0; overflow-y: auto; padding: 16px; }
.settings-section { display: flex; flex-direction: column; gap: 16px; }
.settings-section > .hint { margin: 0; }
.type-line { margin: 0; color: var(--text-primary); }

.section-title { margin: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; display: flex; align-items: center; gap: 8px; color: var(--text-primary); }
.dialog form.sub-form { padding: 0; gap: 12px; }
.sub-form + .sub-form { border-top: 1px solid var(--border); padding-top: 16px !important; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.form-actions .hint { margin-right: auto; }

.danger-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border));
}
.danger-box strong { color: var(--text-primary); font-weight: 500; }

/* account settings → your data → delete: one row per owned board */
.delete-boards { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); }
.delete-boards li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; flex-wrap: wrap; }
.delete-boards li + li { border-top: 1px solid var(--border); }
.delete-boards .board-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.delete-boards select { min-width: 0; max-width: 100%; }
.delete-account { border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border)); padding: 14px; }
.danger-box p { margin: 4px 0 0; }
.danger-box .btn { flex: none; }

/* settings → columns */
.settings-columns { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.settings-columns li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
.settings-columns li:last-child { border-bottom: 0; }
.settings-columns li.empty { color: var(--text-secondary); }
.settings-columns .col-pos { color: var(--text-secondary); font-size: 12px; flex: none; width: 2ch; }
.settings-columns .col-name-input { flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--field-border); padding: 4px 6px; outline: none; }
.settings-columns .wip-label { display: flex; align-items: center; gap: 4px; color: var(--text-secondary); font-size: 12px; flex: none; }
.settings-columns .wip-input { width: 5ch; background: var(--bg); border: 1px solid var(--field-border); padding: 4px; outline: none; }
.settings-columns input:focus { border-color: var(--accent); }
.settings-columns input:disabled { opacity: 1; border-style: dashed; color: var(--text-primary); }
.settings-columns .check { flex: none; font-size: 12px; }
.settings-columns .col-cards { color: var(--text-secondary); font-size: 12px; width: 8ch; text-align: right; flex: none; }
.settings-columns .icon-btn:disabled { opacity: 0.3; cursor: default; background: none; border-color: transparent; }
.settings-columns .col-del:hover { color: var(--danger); }

/* account → linked accounts */
.linked-accounts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.linked-accounts li { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.linked-accounts li:last-child { border-bottom: 0; }
.linked-accounts .spacer { flex: 1; }
.linked-accounts .member-name { color: var(--text-primary); }

/* account settings → team */
.plan-usage { display: flex; flex-direction: column; gap: 8px; }
.usage-row { display: grid; grid-template-columns: 11rem 1fr auto; align-items: center; gap: 10px; font-size: 12px; }
.usage-label { color: var(--text-secondary); }
.usage-value { color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.meter { height: 6px; background: var(--border); overflow: hidden; }
.meter-fill { display: block; height: 100%; width: 0; background: var(--accent); }
.meter.full .meter-fill { background: var(--danger); }
.plan-features { margin: 0; padding-left: 18px; columns: 2; column-gap: 24px; font-size: 12px; color: var(--text-secondary); }
.plan-features li { break-inside: avoid; padding: 2px 0; }
.team-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.team-list:empty { display: none; }
.team-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12px; min-width: 0; flex-wrap: wrap; }
.team-row:last-child { border-bottom: 0; }
.team-row .spacer { flex: 1; }
.team-row .member-name { color: var(--text-primary); }
.team-email { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16rem; }
#team-invite-form input, #team-rename-form input, #share-password, #share-expiry { flex: 1; min-width: 0; }
.dialog form.preset-row { flex-direction: row; padding: 0; gap: 8px; }
.usage-row .usage-value { grid-column: 3; }
#team-box .danger-box { margin-top: 4px; }
#share-protect-field .preset-row + .preset-row { margin-top: 6px; }
.team-board-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
#confirm-option { margin-top: 10px; }
#transfer-to { margin-top: 8px; max-width: 100%; }
@media (max-width: 700px) {
  .usage-row { grid-template-columns: 1fr auto; }
  .usage-row .meter { grid-column: 1 / -1; grid-row: 2; }
  .usage-row .usage-value { grid-column: 2; }
  .plan-features { columns: 1; }
}

/* share page: password prompt */
.share-unlock { max-width: 22rem; margin: 12vh auto 0; display: flex; flex-direction: column; gap: 10px; padding: 0 16px; }
.share-unlock .preset-row { display: flex; gap: 8px; }
.share-unlock input { flex: 1; min-width: 0; }
.share-unlock .error { color: var(--danger); margin: 0; min-height: 1.2em; font-size: 12px; }

@media (max-width: 700px) {
  #settings-dialog > form, #account-dialog[open] { height: calc(var(--visible-h) - 2rem); }
  .settings-layout { flex-direction: column; }
  .settings-nav { flex-direction: row; width: auto; overflow-x: auto; padding: 0; border-right: 0; border-bottom: 1px solid var(--border); }
  .settings-nav [role='tab'] { border-left: 0; border-bottom: 2px solid transparent; white-space: nowrap; padding: 10px 12px; }
  .settings-nav [role='tab'][aria-selected='true'] { border-bottom-color: var(--accent); }
  .settings-nav .tab-danger { margin-top: 0; border-top: 0; }
  .settings-columns .col-cards { display: none; }
  .danger-box { flex-direction: column; align-items: flex-start; }
}

/* disabled buttons look it (e.g. settings "save" with nothing to save) */
.btn:disabled, .btn:disabled:hover { opacity: 0.45; cursor: default; background: transparent; color: var(--text-dim); border-color: var(--border-strong); }
.btn-accent:disabled, .btn-accent:disabled:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ======================= phase 12 ======================= */

/* filter suggestions (tag: / column:) hang under the search box, above the board */
#filter-suggestions { z-index: 30; }

/* new board: drag handles on the column list */
.column-list .grip { cursor: grab; color: var(--text-secondary); font-size: 12px; padding: 0 2px; user-select: none; }
.column-list li.dragging { opacity: 0.4; }

/* sprint boards, backlog tab: backlog left, sprints right, each scrolling on its own */
.backlog.backlog-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  max-width: 1400px;
  align-items: start;
}
.bl-pane { display: flex; flex-direction: column; gap: 12px; min-width: 0; max-height: calc(100vh - 160px); overflow-y: auto; }
.bl-pane-head { display: flex; align-items: center; gap: 10px; padding: 2px 0; }
.bl-pane-head .btn { margin-left: auto; font-size: 12px; padding: 2px 10px; }
.bl-pane-head .hint { margin: 0; }
.bl-none { margin: 0; padding: 12px; border: 1px dashed var(--border-strong); }
.bl-pane-backlog .bl-group { min-height: 120px; }
@media (max-width: 900px) {
  .backlog.backlog-split { grid-template-columns: minmax(0, 1fr); }
  .bl-pane { max-height: none; overflow: visible; }
}

/* completed sprints: locked cards */
.lock { font-size: 12px; flex: none; }
.bl-row.locked { cursor: pointer; }
.readonly-note.locked-note { border-color: color-mix(in srgb, var(--warn) 55%, var(--border-strong)); color: var(--text-primary); }

/* timeline: the "no date" section and drawing a period */
.tl-nodate-head .tl-label { color: var(--warn); }
.tl-nodate-head .tl-track { display: flex; align-items: center; }
/* sticks just right of the (sticky) label column, so it stays readable when scrolled sideways */
.tl-nodate-hint { position: sticky; left: calc(var(--label) + 8px); font-size: 12px; color: var(--text-secondary); white-space: nowrap; pointer-events: none; padding-left: 8px; }
.tl-row.tl-nodate .tl-track.schedulable { cursor: crosshair; touch-action: none; user-select: none; }
.tl-row.tl-nodate .tl-track.schedulable:hover { background-color: color-mix(in srgb, var(--accent) 6%, transparent); }
.tl-row.tl-nodate.done .tl-label .label { color: var(--text-secondary); text-decoration: line-through; }
.tl-bar.ghost { border-style: dashed; background: color-mix(in srgb, var(--accent) 22%, transparent); pointer-events: none; z-index: 3; }
.tl-bar.ghost[data-preview]::after { left: 0; }
.tl-label .lock { margin-left: auto; }

/* timeline: a sprint as a band behind its cards */
.tl-sprint-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--from) * var(--day));
  width: calc(var(--span) * var(--day));
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  pointer-events: none;
}
.tl-sprint-bg.completed { background: color-mix(in srgb, var(--text-secondary) 8%, transparent); border-color: var(--border); }
/* (only the side edges: border-style on all four sides would draw the top and bottom with the default 3px width) */
.tl-sprint-bg.planned { background: color-mix(in srgb, var(--accent) 5%, transparent); border-left-style: dashed; border-right-style: dashed; }

/* calendar: sprint bands along the top of each day, one lane per sprint */
.cal-sprints { display: flex; flex-direction: column; gap: 1px; margin: 0 -6px; }
.cal-sprint {
  display: block;
  height: 16px;
  padding: 0 6px;
  font-size: 12px;
  line-height: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
  background: color-mix(in srgb, var(--sprint, var(--accent)) 26%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--sprint, var(--accent)) 60%, transparent);
}
.cal-sprint.planned { background: color-mix(in srgb, var(--sprint, var(--accent)) 12%, transparent); border-top-style: dashed; }
.cal-sprint.start { margin-left: 6px; border-left: 2px solid var(--sprint, var(--accent)); }
.cal-sprint.end { margin-right: 6px; }
.cal-sprint.empty { background: none; border-color: transparent; }

/* ======================= phase 12 (revised) ======================= */

/* timeline: every card keeps its row. Tracks lay out their inline hints with flex; bars and
   bands stay absolutely positioned on the day grid. */
.tl-row:not(.tl-head) .tl-track { display: flex; align-items: center; }
/* hints stick just right of the (sticky) label column, so they stay visible when scrolled */
.tl-add, .tl-row-hint, .tl-offscreen.before { position: sticky; left: calc(var(--label) + 6px); }
.tl-add {
  font-size: 12px;
  color: var(--text-secondary);
  opacity: 0.55;
  white-space: nowrap;
  pointer-events: none;
  padding-left: 6px;
}
.tl-add::first-letter { color: var(--accent); font-weight: 700; }
.tl-row:hover .tl-add { opacity: 1; }
.tl-add.muted-add::first-letter { color: inherit; font-weight: 400; }
.tl-track.schedulable { cursor: crosshair; touch-action: none; user-select: none; }
.tl-track.schedulable:hover { background-color: color-mix(in srgb, var(--accent) 6%, transparent); }
.tl-row.done .tl-label .label { color: var(--text-secondary); text-decoration: line-through; }
.tl-row-hint { font-size: 12px; color: var(--warn); white-space: nowrap; padding-left: 6px; pointer-events: none; }
.tl-empty { min-height: 22px; }
.tl-empty .tl-label { font-size: 12px; }
.tl-offscreen {
  flex: none;
  z-index: 1;
  font-size: 12px;
  padding: 1px 6px;
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  color: var(--text-dim);
  cursor: pointer;
  white-space: nowrap;
}
.tl-offscreen.after { position: sticky; right: 6px; margin-left: auto; }
.tl-offscreen:hover, .tl-offscreen:focus-visible { color: var(--text-primary); border-color: var(--accent); outline: none; }
.tl-truncated { margin: 8px 12px; }

/* completed sprint: a thin-stroke "done and settled" mark (check in a square) */
.settled { display: inline-flex; align-items: center; flex: none; color: var(--text-secondary); }
.settled-icon { width: 11px; height: 11px; flex: none; }
.tl-label .settled { margin-left: auto; }
.readonly-note .settled-icon { width: 12px; height: 12px; vertical-align: -2px; color: var(--warn); }

.auth-legal { margin: 0; font-size: 12px; }

/* ---------- legal links (privacy · terms · contact) ---------- */
.consent-fields { gap: 8px !important; }
.consent-fields .check { font-size: 12px; }
.consent-fields a { color: var(--accent); }
.legal-footer, .legal-links, .menu-legal { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; }
.legal-footer a, .legal-links a, .menu-legal a { color: var(--text-secondary); text-decoration: none; }
.legal-footer a:hover, .legal-links a:hover, .menu-legal a:hover { color: var(--accent); text-decoration: underline; }
.menu-legal { padding: 6px 12px 4px; }
.page-footer { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: space-between; padding: 12px 16px; border-top: 1px solid var(--border); font-size: 12px; }
.page-footer .legal-links { margin-left: auto; }

/* to-do lists: "delete N finished items" under the list */
.todo-clear-done { display: flex; justify-content: flex-end; margin-top: 6px; }
.todo-clear-done .btn-quiet { font-size: 12px; }

/* ---------- feedback: the dialog in the app, the triage list in the admin panel ---------- */
.fb-context summary { cursor: pointer; font-size: 12px; color: var(--text-secondary); }
.fb-context-list { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 8px 0; font-size: 12px; }
.fb-context-list dt { color: var(--text-secondary); }
.fb-context-list dd { margin: 0; min-width: 0; overflow-wrap: anywhere; color: var(--text-dim); }
.feedback-filter { margin-left: auto; }
.feedback-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.feedback-item { border: 1px solid var(--border); background: var(--surface-2); }
.feedback-item.status-new { border-left: 3px solid var(--accent); }
.feedback-item summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; cursor: pointer; font-size: 12px; }
.feedback-item .status { margin-left: auto; }
.feedback-title { min-width: 0; overflow-wrap: anywhere; }
.tag.kind-bug { border-color: color-mix(in srgb, var(--danger) 60%, transparent); color: var(--danger); }
.tag.kind-feature { border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--accent); }
.feedback-body { white-space: pre-wrap; overflow-wrap: anywhere; padding: 0 12px 10px; font-size: 13px; }
.feedback-meta { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; margin: 0 12px 10px; font-size: 12px; }
.feedback-meta dt { color: var(--text-secondary); }
.feedback-meta dd { margin: 0; color: var(--text-dim); }
.feedback-item textarea { display: block; width: calc(100% - 24px); margin: 0 12px 10px; font: inherit; font-size: 12px; background: var(--bg); color: var(--text); border: 1px solid var(--field-border); padding: 6px 8px; resize: vertical; }
.feedback-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 0 12px 12px; font-size: 12px; }
.feedback-card { display: inline-flex; gap: 6px; align-items: center; }
.feedback-delete { margin-left: auto; }
.feedback-empty { padding: 8px 0; }

/* ---------- admin dashboard: sidebar, one section at a time, overview cards ---------- */
.admin-shell { display: grid; grid-template-columns: 210px minmax(0, 1fr); min-height: 100vh; min-height: 100dvh; }
.admin-side { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; gap: 18px; padding: 18px 12px; background: var(--surface); border-right: 1px solid var(--border); }
.admin-side .brand-static { padding: 0 10px; font-weight: 700; font-size: 15px; }
.admin-nav { display: flex; flex-direction: column; gap: 2px; }
.admin-nav a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; color: var(--text-dim); text-decoration: none; border-left: 2px solid transparent; font-size: 13px; }
.admin-nav a:hover { background: var(--surface-2); color: var(--text); }
.admin-nav a[aria-current='page'] { background: var(--surface-2); color: var(--text); border-left-color: var(--accent); font-weight: 600; }
.nav-count { color: var(--muted); font-size: 12px; font-weight: 400; }
.nav-badge { background: var(--accent); color: var(--accent-ink); font-size: 12px; font-weight: 700; padding: 0 6px; min-width: 18px; text-align: center; }
.nav-badge[hidden], .nav-dot[hidden] { display: none; }
.nav-dot { width: 8px; height: 8px; background: var(--warn); }
.admin-side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding: 0 10px; font-size: 12px; }
.admin-side-foot .btn { align-self: flex-start; }
.admin-shell .admin-main { display: block; max-width: 1180px; padding: 24px 28px 48px; }
.admin-view[hidden] { display: none; }
.admin-view > .admin-section + .admin-section { margin-top: 16px; }
.page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head h1 { margin: 0; font-size: 18px; letter-spacing: -0.01em; }
.page-head .btn, .page-head .feedback-filter { margin-left: auto; }
.head-link { margin-left: auto; font-size: 12px; color: var(--text-secondary); text-decoration: none; }
.head-link:hover { color: var(--accent); }
.sub-title { margin: 8px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.admin-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; }

/* overview: the cards */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.kpi { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--border-strong); color: inherit; text-decoration: none; min-width: 0; }
.kpi:hover { border-color: var(--border-strong); background: var(--surface-2); }
.kpi-ok { border-top-color: var(--accent); }
.kpi-warn { border-top-color: var(--warn); }
.kpi-bad { border-top-color: var(--danger); }
.kpi-accent { border-top-color: var(--accent); }
.kpi-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.kpi-value { font-size: 24px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; }
.kpi-warn .kpi-value { color: var(--warn); }
.kpi-bad .kpi-value { color: var(--danger); }
.kpi-sub { font-size: 12px; color: var(--text-secondary); overflow-wrap: anywhere; }
.kpi-bar { display: block; height: 4px; margin-top: 6px; background: var(--surface-3); }
.kpi-bar > span { display: block; height: 100%; background: var(--accent); }
.kpi-warn .kpi-bar > span { background: var(--warn); }
.overview-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-top: 16px; align-items: start; }

/* overview: needs attention, latest lists */
.attention-list, .recent-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; font-size: 12px; }
.attention-list li { padding: 7px 10px; border-left: 3px solid var(--border-strong); }
.attention-list li + li, .recent-list li + li { border-top: 1px solid var(--border); }
.attention-list a { color: var(--text); text-decoration: none; }
.attention-list a:hover { color: var(--accent); }
.attention-bad { border-left-color: var(--danger) !important; }
.attention-warn { border-left-color: var(--warn) !important; }
.attention-accent { border-left-color: var(--accent) !important; }
.attention-info { border-left-color: var(--border-strong); }
.attention-info a { color: var(--text-dim); }
.attention-ok { border-left-color: var(--accent) !important; color: var(--accent); }
.recent-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 0; }
.recent-title { font-weight: 600; color: var(--text); text-decoration: none; min-width: 0; overflow-wrap: anywhere; }
a.recent-title:hover { color: var(--accent); }
.recent-list .muted { font-size: 12px; }
.recent-list .muted:last-child { margin-left: auto; }

/* phones and small windows: the sidebar becomes a row of tabs */
@media (max-width: 820px) {
  .admin-shell { grid-template-columns: minmax(0, 1fr); }
  .admin-side { position: sticky; top: 0; z-index: 5; height: auto; flex-direction: row; align-items: center; gap: 10px; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--border); overflow-x: auto; }
  .admin-side .brand-static { padding: 0; flex: none; }
  .admin-nav { flex-direction: row; gap: 0; }
  .admin-nav a { border-left: 0; border-bottom: 2px solid transparent; padding: 8px 10px; white-space: nowrap; }
  .admin-nav a[aria-current='page'] { border-bottom-color: var(--accent); }
  .admin-side-foot { display: none; }
  .admin-shell .admin-main { padding: 16px; }
  .admin-cols { grid-template-columns: minmax(0, 1fr); }
}
.nav-boards { display: none !important; }
@media (max-width: 820px) { .nav-boards { display: flex !important; color: var(--text-secondary) !important; } }
@media (max-width: 820px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi { padding: 10px 12px; }
  .kpi-value { font-size: 19px; }
}
@media (max-width: 820px) {
  .admin-shell { grid-template-rows: auto 1fr; } /* the tab bar keeps its own height, however short the page */
}

/* ======================= team page (a view, like My Day) ======================= */
/* the team window: same size as the settings windows, its content scrolls */
#team-dialog[open] { display: flex; flex-direction: column; height: calc(min(640px, calc(var(--visible-h) - 2rem)) + 2px); }
.team-body { flex: 1; min-height: 0; overflow-y: auto; }
.team-page { padding: 16px 16px 24px; display: flex; flex-direction: column; gap: 16px; }
.team-name { margin: 0; font-size: 16px; color: var(--text-primary); }
.team-page-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.team-page-head .spacer { flex: 1; }
.team-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.team-card { background: var(--surface-2); border: 1px solid var(--border); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.team-card-head { display: flex; align-items: center; gap: 8px; }
.team-card .hint { margin: 0; }
.team-card .field { display: flex; flex-direction: column; gap: 6px; }
.team-card .preset-row input, .team-card .preset-row select { flex: 1; min-width: 0; }

/* board access: boards (or people) on the left, everyone (or every board) on the right */
.team-card-head .seg { margin-left: auto; }
.seg { display: inline-flex; border: 1px solid var(--border-strong); }
.seg button { background: none; border: 0; padding: 5px 10px; font: inherit; font-size: 12px; color: var(--text-secondary); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--border-strong); }
.seg button[aria-pressed='true'] { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.access-layout { display: grid; grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); gap: 16px; align-items: start; }
.access-side, .access-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.access-nav { list-style: none; margin: 0; padding: 0; max-height: 28rem; overflow-y: auto; border: 1px solid var(--border); }
.access-nav li + li { border-top: 1px solid var(--border); }
.access-nav-item { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: 'sw label count' 'sw sub count'; column-gap: 8px; align-items: center; text-align: left; background: none; border: 0; border-left: 2px solid transparent; padding: 8px 10px; font: inherit; font-size: 12px; color: var(--text-primary); cursor: pointer; }
.access-nav-item:hover { background: var(--surface-3); }
.access-nav-item[aria-current='true'] { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.access-nav-item .swatch { grid-area: sw; }
.team-page .swatch { display: inline-block; width: 8px; height: 8px; flex: none; background: var(--swatch, var(--border-strong)); }
.access-nav-label { grid-area: label; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.access-nav-sub { grid-area: sub; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.access-count { grid-area: count; font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.access-main-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.access-main-head strong { color: var(--text-primary); font-size: 14px; }
.access-list { max-height: 34rem; overflow-y: auto; }
.access-list .team-row { flex-wrap: nowrap; }
.access-list .team-board-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.access-list .role-select.access-none { color: var(--text-dim); }
.perm-btn { padding: 4px 10px; font-size: 12px; }
.perm-btn.custom { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, var(--border-strong)); }
.team-perm-row { list-style: none; padding: 10px 12px; background: color-mix(in srgb, var(--surface-3) 60%, transparent); border-bottom: 1px solid var(--border); }
.team-perms { display: flex; flex-direction: column; gap: 8px; }
.team-perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 4px 16px; }
.team-perm-grid .check { font-size: 12px; }
.team-scroll { max-height: 26rem; overflow-y: auto; }
.team-filter { background: var(--bg); border: 1px solid var(--field-border); padding: 7px 8px; font: inherit; font-size: 12px; color: var(--text-primary); outline: none; min-width: 0; }
.team-filter:focus { border-color: var(--accent); }

@media (max-width: 800px) {
  .team-grid { grid-template-columns: minmax(0, 1fr); }
  .access-layout { grid-template-columns: minmax(0, 1fr); }
  .access-nav { max-height: 12rem; }
  .access-list .team-row { flex-wrap: wrap; }
  .team-page { padding: 12px 16px 40px; }
}

/* admin → beta access */
.beta-modes { display: flex; flex-direction: column; gap: 8px; }
.beta-modes .check { font-size: 13px; }
.beta-add { display: flex; gap: 8px; flex-wrap: wrap; }
.beta-add input { flex: 1 1 12rem; min-width: 0; background: var(--bg); border: 1px solid var(--field-border); padding: 7px 8px; font: inherit; font-size: 12px; color: var(--text-primary); }
.beta-link-box { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); }
.beta-link-row { display: flex; gap: 8px; }
.beta-link-row input { flex: 1; min-width: 0; background: var(--bg); border: 1px solid var(--field-border); padding: 7px 8px; font: inherit; font-size: 12px; color: var(--text-primary); }
.beta-request { padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.beta-request-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.beta-request-head .status { margin-left: auto; }
.beta-request-msg { margin: 0; font-size: 12px; color: var(--text-secondary); white-space: pre-wrap; overflow-wrap: anywhere; }
.beta-request .row-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* board settings → appearance: your own look */
.look-note { margin: 0; }
.look-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.look-actions:not(:has(button:not([hidden]))) { display: none; }

/* filter button, "assigned to me" and the filter panel */
.filter-btn { white-space: nowrap; }
.filter-panel { position: fixed; z-index: 60; background: var(--surface-2); border: 1px solid var(--border-strong); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35); padding: 12px; display: flex; flex-direction: column; gap: 12px; max-height: min(70vh, 560px); overflow-y: auto; }
.filter-section { display: flex; flex-direction: column; gap: 6px; }
.filter-section .section-title .muted { font-weight: 400; text-transform: none; letter-spacing: 0; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-chip { background: var(--bg); border: 1px solid var(--border-strong); color: var(--text-secondary); font: inherit; font-size: 12px; padding: 4px 9px; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filter-chip:hover { border-color: var(--text-dim); color: var(--text-primary); }
.filter-chip[aria-pressed='true'] { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.filter-panel-foot { display: flex; align-items: center; gap: 10px; justify-content: space-between; border-top: 1px solid var(--border); padding-top: 10px; }
.filter-panel-foot .hint { margin: 0; }
.filter-panel-foot .btn { white-space: nowrap; flex: none; }
.view-myday .filter-btn { display: none; }

/* archive dialog: archived / trash */
#archive-dialog .dialog-head .seg { margin-right: auto; }
.trash-note { margin: 8px 16px 0; }

/* ---------- card editor: title as a heading, saves as you go ---------- */
.card-title-field { gap: 4px; }
.field input.card-title-input {
  font-size: 18px;
  font-weight: 700;
  padding: 6px 8px;
  margin: 0 -8px;
  width: calc(100% + 16px);
  background: transparent;
  border-color: transparent;
}
.field input.card-title-input:hover { border-color: var(--field-border); }
.field input.card-title-input:focus { border-color: var(--accent); background: var(--bg); }
.field input.card-title-input[aria-invalid='true'] { border-color: var(--danger); }
.field-error { margin: 0; font-size: 12px; color: var(--danger); }
.field-error[hidden] { display: none; }
/* "saving…" / "saved" / "not saved: …" next to the card number */
.save-state { margin-right: auto; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text-secondary); }
.save-state.failed { color: var(--danger); }
.save-state:empty { display: none; }
/* priority, start date, color: folded away unless the card uses them */
.card-more { border-top: 1px solid var(--border); padding-top: 10px; }
.card-more > summary { cursor: pointer; color: var(--text-dim); font-size: 12px; min-height: 28px; display: flex; align-items: center; gap: 6px; }
.card-more > summary:hover { color: var(--text); }
.card-more[open] > summary { margin-bottom: 10px; }
.card-more > .field-row + .field { margin-top: 12px; }

/* buttons at the end of a settings section never wrap onto two lines */
.form-actions .btn { white-space: nowrap; flex: none; }

/* ---------- My Day on phones: one list, top to bottom ----------
   Overdue, then due today, then assigned to me, with the dashboard's numbers as a strip on top
   (its lists stay on wider screens). No sideways scrolling to find the overdue column. */
@media (max-width: 640px) {
  .view-myday .board {
    flex-direction: column;
    align-items: stretch;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: none;
  }
  .view-myday .column { flex: none; width: 100%; max-height: none; }
  .view-myday .card-list { overflow: visible; }
  .view-myday .card-list:empty { display: none; }
  .view-myday .dash { order: -1; flex: none; width: 100%; max-height: none; margin-left: 0; overflow: visible; }
  .view-myday .dash .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .view-myday .dash > :not(.dash-head):not(.stat-grid) { display: none; }
  .view-myday .dash.collapsed { width: 100%; flex-basis: auto; padding: 8px 12px; }
  .view-myday .dash.collapsed .dash-head { flex-direction: row; }
  .view-myday .dash.collapsed .dash-title { writing-mode: horizontal-tb; }
  .view-myday .dash.collapsed .dash-head .icon-btn { margin-left: auto; }
}

/* My Day's "what's in my day?" / "got it": small, inline with the bar's text */
.myday-bar .btn.myday-about { font-size: 12px; padding: 0 8px; min-height: 28px; margin-left: 4px; }
@media (pointer: coarse) { .myday-bar .btn.myday-about { min-height: 40px; } }

/* new board: the look section, folded */
.nb-look[open] > summary ~ * + * { margin-top: 12px; }

/* ---------- account settings → preferences: three groups with room to breathe ---------- */
.dialog form.prefs-form { gap: 28px; }
.pref-group { display: flex; flex-direction: column; gap: 18px; padding-bottom: 28px; border-bottom: 1px solid var(--border); }
.pref-head { display: flex; flex-direction: column; gap: 6px; }
.pref-head .hint { margin: 0; max-width: 62ch; }
.pref-group .field { gap: 8px; }
.prefs-form .look-row { gap: 20px 40px; }
.prefs-form .type-color-rows { gap: 12px; }
.prefs-form .type-color-name { font-size: 13px; }
.prefs-form .form-actions { padding-top: 0; }

/* Workspaces: the entry in the board menu and the overview page (27-workspace.js) */
.board-menu .workspace-row { border-top: 1px solid var(--border); margin-top: 4px; }
.menu-workspace { color: var(--text); }
.menu-workspace .ws-mark { color: var(--accent); width: 8px; flex: none; }
.menu-workspace[aria-current='true'] { color: var(--accent); }
.ws { display: flex; flex-direction: column; gap: 16px; padding: 16px; max-width: 72rem; width: 100%; margin: 0 auto; box-sizing: border-box; }
.ws-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.ws-name { margin: 0; font-size: 18px; color: var(--text); }
.ws-head .spacer { flex: 1; }
.ws-stats { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.ws-boards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 10px; }
.ws-board { box-shadow: inset 3px 0 0 var(--type-color, transparent); background: var(--surface-2); border: 1px solid var(--border); }
.ws-board:hover { border-color: var(--border-strong); }
.ws-board-btn { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 12px 14px; cursor: pointer; color: var(--text); }
.ws-board-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.ws-board-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ws-board-title .swatch { width: 8px; height: 8px; flex: none; background: var(--swatch, var(--border-strong)); }
.ws-board-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-board-meta { font-size: 12px; }
.ws-board-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); }
.ws-board-stats b { color: var(--text); }
.ws-board-stats .bad, .ws-board-stats .bad b { color: var(--danger); }
.ws-empty { display: flex; flex-direction: column; gap: 6px; padding: 24px 0; }
.ws-empty .hint { margin: 0; }

/* Timeline: folding a board up */
.tl-toggle { all: unset; box-sizing: border-box; flex: none; width: 18px; height: 18px; display: inline-grid; place-items: center; cursor: pointer; color: var(--text-secondary); font-size: 12px; }
.tl-toggle:hover { color: var(--text-primary); }
.tl-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tl-toggle-gap { flex: none; width: 18px; }
.tl-folded .tl-sprint-name { color: var(--text-secondary); }
.tl-group { cursor: pointer; }
.tl-group:hover .tl-label .label { color: var(--accent); }
.tl-search { max-width: 200px; }
#tl-filter-suggestions { z-index: 30; }

/* Backlog: the pane header ("sprints", the hint and + sprint) and the empty note sit straight on
   the board's background, so they get a panel like the groups below them. */
.bl-pane-head, .bl-none {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 6px 12px;
}
.bl-none { border-style: dashed; border-color: var(--border-strong); color: var(--text-secondary); }
.bl-pane-head .hint { color: var(--text-secondary); }
.has-bg.glass .bl-pane-head, .has-bg.glass .bl-none {
  background: color-mix(in srgb, var(--surface) var(--glass-panel-strong, 72%), transparent);
  backdrop-filter: blur(var(--glass-blur, 0px));
  -webkit-backdrop-filter: blur(var(--glass-blur, 0px));
  border-color: var(--glass-edge);
}

/* Select mode: a box on each column header that selects the whole column */
.col-select {
  flex: none;
  width: 14px;
  height: 14px;
  padding: 0;
  display: none;
  place-items: center;
  border: 1px solid var(--field-border);
  background: var(--bg);
  color: var(--accent-ink);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.selecting .col-select { display: inline-grid; }
.col-select:disabled { opacity: 0.4; cursor: default; }
.col-select.all { background: var(--accent); border-color: var(--accent); }
.col-select.all::after { content: '✓'; }
.col-select.some { border-color: var(--accent); }
.col-select.some::after { content: '–'; color: var(--accent); }
.col-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }