@font-face {
  font-family: "Kalam";
  src: url("/fonts/kalam.ttf") format("truetype");
}

/* Ubuntu is the Taiga UI typeface. Medium (500) stands in for bold, as Taiga does.
   Ubuntu Font Licence 1.0 — redistribution permitted. */
@font-face {
  font-family: "Ubuntu";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/Ubuntu-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "Ubuntu";
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
  src: url("/fonts/Ubuntu-Medium.ttf") format("truetype");
}

/* ============================================
   CSS VARIABLES
   ============================================ */

:root {
  /* Density: Taiga is compact — 1 keeps components at their designed size. */
  --ui-scale: 1;
  /* Scaled radius. NOT scaled: shadows, 1px borders, media queries, layout widths (max-width etc). */
  --radius: calc(4px * var(--ui-scale));
  /* Spacing tokens: density-aware padding, margin, gap */
  --s-1: calc(1px * var(--ui-scale));
  --s-2: calc(2px * var(--ui-scale));
  --s-3: calc(3px * var(--ui-scale));
  --s-4: calc(4px * var(--ui-scale));
  --s-5: calc(5px * var(--ui-scale));
  --s-6: calc(6px * var(--ui-scale));
  --s-8: calc(8px * var(--ui-scale));
  --s-10: calc(10px * var(--ui-scale));
  --s-12: calc(12px * var(--ui-scale));
  --s-14: calc(14px * var(--ui-scale));
  --s-16: calc(16px * var(--ui-scale));
  --s-18: calc(18px * var(--ui-scale));
  --s-20: calc(20px * var(--ui-scale));
  --s-24: calc(24px * var(--ui-scale));
  --s-28: calc(28px * var(--ui-scale));
  --s-32: calc(32px * var(--ui-scale));
  --s-36: calc(36px * var(--ui-scale));
  --s-38: calc(38px * var(--ui-scale));
  --s-40: calc(40px * var(--ui-scale));
  --s-56: calc(56px * var(--ui-scale));
  /* Font tokens: calc(base-rem * scale); body remains 1rem */
  /* Text floor: nothing renders under 12px (a11y audit), so the 9–11px steps resolve to 12px. */
  --fs-9: calc(0.75rem * var(--ui-scale));
  --fs-10: calc(0.75rem * var(--ui-scale));
  --fs-11: calc(0.75rem * var(--ui-scale));
  --fs-12: calc(0.75rem * var(--ui-scale));
  --fs-13: calc(0.8125rem * var(--ui-scale));
  --fs-14: calc(0.875rem * var(--ui-scale));
  --fs-15: calc(0.9375rem * var(--ui-scale));
  --fs-16: calc(1rem * var(--ui-scale));
  --fs-17: calc(1.0625rem * var(--ui-scale));
  --fs-18: calc(1.125rem * var(--ui-scale));
  --fs-20: calc(1.25rem * var(--ui-scale));
  --fs-21: calc(1.3125rem * var(--ui-scale));
  --fs-24: calc(1.5rem * var(--ui-scale));
  --fs-48: calc(3rem * var(--ui-scale));
  /* Scaled radii (999px pill shape left unscaled).
     Taiga keeps corners nearly square: 2px on chips/tags, 3-4px on cards, buttons and
     panels, nothing larger. The old 5-14px ladder is flattened here so every component
     picks up the change from one place. */
  --radius-6: calc(2px * var(--ui-scale));
  --radius-8: calc(3px * var(--ui-scale));
  --radius-10: calc(4px * var(--ui-scale));
  --radius-12: calc(4px * var(--ui-scale));
  --radius-5: calc(2px * var(--ui-scale));

  /* Dark theme follows Taiga's own "Taiga 6" layer, which is Nord-derived
     (#2E3440 is both Taiga's $color-black900 and Nord's base). Light theme below is
     the faithful Taiga surface; this is its night counterpart. */
  --bg: #2e3440;
  --panel: #3b4252;
  --panel2: #353c4a;
  --list-item-bg: #3b4252;
  --text: #eceff4;
  --muted: #bcbecf; /* #a9aabc is 4.4:1 on the #3b4252 panels */
  --border: rgba(216, 222, 233, 0.14);
  --accent: #83eede;
  --accent-title: var(--accent);
  /* Text on an accent fill: dark on the light teal (dark theme), white on the dark teal (light theme). */
  --on-accent: #2e3440;
  --success: #93c45d;
  --danger: #e44057;
  --danger-text: #ff9aa8; /* red text on dark panels (#e44057 is 2.5:1) */
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  --card-bg: #3b4252;
  --card-hover-bg: #434c5e;
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  --card-shadow-hover: 0 3px 8px rgba(0, 0, 0, 0.45);
  --project-name-color: #f6c95c;
  --voice-command-icon-filter: invert(1);

  /* Sprint chip inversion (dark mode: light bg + dark text) */
  --chip-sprint-bg: #d8dee9;
  --chip-sprint-text: #2e3440;

  /* App shell (Taiga layout, spec .scratch/taiga-shell). The sidebar stays dark in both
     themes; dark mode keeps the Nord palette with the same layout. */
  --shell-topbar-h: 48px;
  --shell-sidebar-w: 200px;
  --shell-row-h: 48px;
  --shell-topbar-bg: #3b4252;
  --shell-topbar-text: #eceff4;
  --shell-side-bg: #242933;
  --shell-side-text: #d8dee9;
  --shell-side-hover: #2e3440;
  --shell-side-active: #3b4252;
  --shell-side-title-bg: #1f232b;
  --shell-project: #83eede;
  --content-bg: var(--bg);
  --page-title-size: 22.4px;
  --toolbar-control-h: 32px;
  --toolbar-btn-bg: var(--panel);
  /* Card dialog: properties side panel and section bars (Taiga user story). */
  --side-panel-bg: #353c4a;
  --section-bar-bg: #434c5e;
  /* Taiga lane surfaces and status squares (fixed lane keys). */
  --lane-head-bg: #434c5e;
  --lane-col-bg: #353c4a;
  --status-backlog: #a9aabc;
  --status-not-started: #e44057;
  --status-doing: #e47c40;
  --status-testing: #e4ce40;
  --status-done: #a8e440;

  /* Hint to browser: use dark native form controls (e.g. date picker) to match app theme */
  color-scheme: dark;
}

/* Mobile: clamp to 1 so current behavior preserved; overrides density hooks */
@media (max-width: 767px) {
  :root,
  [data-density="comfortable"],
  [data-density="compact"] {
    --ui-scale: 1;
  }
}

/* ==========================================================================
   Capacitor server-selection bootstrap
   Scoped so the normal web/PWA and product auth shells remain unchanged.
   ========================================================================== */
#scrumboy-mobile-bootstrap {
  background: var(--bg);
  height: auto;
  inset: auto;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  position: relative;
  -webkit-overflow-scrolling: touch;
}

#scrumboy-mobile-bootstrap .mobile-bootstrap__container {
  background: var(--bg);
  display: flex;
  flex: none;
  flex-direction: column;
  justify-content: center;
  margin: 0 auto;
  max-width: 432px;
  min-height: 100dvh;
  overflow: visible;
  padding:
    max(var(--s-24), env(safe-area-inset-top))
    max(var(--s-16), env(safe-area-inset-right))
    max(var(--s-24), env(safe-area-inset-bottom))
    max(var(--s-16), env(safe-area-inset-left));
  width: 100%;
}

#scrumboy-mobile-bootstrap .mobile-bootstrap__brand {
  margin-bottom: var(--s-16);
}

#scrumboy-mobile-bootstrap .brand-text {
  height: var(--s-24);
}

#scrumboy-mobile-bootstrap .mobile-bootstrap__panel {
  width: 100%;
}

#scrumboy-mobile-bootstrap .mobile-bootstrap__helper {
  line-height: 1.5;
  margin: calc(-1 * var(--s-6)) 0 var(--s-16);
}

#scrumboy-mobile-bootstrap .mobile-bootstrap__field {
  display: flex;
  flex-direction: column;
}

#scrumboy-mobile-bootstrap .mobile-bootstrap__field .input {
  min-height: 44px;
}

#scrumboy-mobile-bootstrap .mobile-bootstrap__http-warning {
  color: color-mix(in srgb, var(--danger) 78%, var(--muted));
  font-size: var(--fs-12);
  line-height: 1.4;
  margin: var(--s-6) 0 0;
}

#scrumboy-mobile-bootstrap .mobile-bootstrap__status {
  line-height: 1.4;
  margin: 0;
  min-height: 2.8em;
}

#scrumboy-mobile-bootstrap .mobile-bootstrap__status--error {
  color: var(--danger-text);
}

#scrumboy-mobile-bootstrap .mobile-bootstrap__action {
  min-height: 44px;
  width: 100%;
}

#scrumboy-mobile-bootstrap .mobile-bootstrap__privacy {
  margin: 0;
  text-align: center;
}

#scrumboy-mobile-bootstrap .mobile-bootstrap__origin {
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: var(--radius-12);
  line-height: 1.45;
  margin: 0 0 var(--s-12);
  overflow-wrap: anywhere;
  padding: var(--s-10) 12px;
  user-select: text;
  -webkit-user-select: text;
}

@media (max-width: 620px) {
  #scrumboy-mobile-bootstrap:focus-within .mobile-bootstrap__container {
    justify-content: flex-start;
    min-height: 140dvh;
  }
}

@media (max-height: 640px) {
  #scrumboy-mobile-bootstrap .mobile-bootstrap__container {
    justify-content: flex-start;
  }
}

/* Density hooks: no UI yet; override --ui-scale only */
[data-density="comfortable"] {
  --ui-scale: 1.2;
}
[data-density="compact"] {
  --ui-scale: 1;
}

[data-theme="light"] {
  /* Hint to browser: use light native form controls (e.g. date picker) to match app theme */
  color-scheme: light;

  /* Taiga's own palette: teal primary on a white-and-cool-grey field. Greys are the
     blue-tinted ladder from taiga-front's variables.scss; kanban cards are white. */
  --bg: #f9f9fb;
  --panel: #ffffff;
  --panel2: #f1f1f4;
  --text: #2e3440;
  --muted: #666884; /* Taiga #70728f is 4.15:1 on #f1f1f4; this passes 4.5:1 on every light surface */
  --border: #d8dee9;
  /* The one accessible accent: Taiga teal darkened to pass 4.5:1 as small text on #fff/#f9f9fb/#f1f1f4
     and under white text (5.3:1). #008aa8 (4.0:1) stays only for large titles (--accent-title). */
  --accent: #00758d;
  --accent-title: #008aa8;
  --on-accent: #ffffff;
  --success: #93c45d;
  --danger: #c42b44; /* Taiga #e44057 is 4.1:1 as text on white; 5.6:1 here, also under white text */
  --danger-text: var(--danger);
  --shadow: 4px 4px 8px rgba(198, 198, 212, 0.5);
  --project-name-color: #2e3440;

  /* App shell, sampled from Taiga: light top bar, dark sidebar, white content. */
  --shell-topbar-bg: #d8dee9;
  --shell-topbar-text: #2e3440;
  --shell-side-bg: #3b4252;
  --shell-side-hover: #434c5e;
  --shell-side-active: #2e3440;
  --shell-side-title-bg: #2e3440;
  --content-bg: #ffffff;
  --lane-head-bg: #d8dee9;
  --lane-col-bg: #eceff4;
  --toolbar-btn-bg: #f9f9fb;
  --side-panel-bg: #f9f9fb;
  --section-bar-bg: #f1f1f4;
  --voice-command-icon-filter: invert(0);

  /* Sprint chip inversion (light mode: dark bg + light text) */
  --chip-sprint-bg: #434456;
  --chip-sprint-text: #f9f9fb;

  /* Button styles - customize these (keep as-is for rename/delete/create buttons) */
  --btn-bg: rgba(0, 138, 168, 0.1);
  --btn-border: rgba(0, 138, 168, 0.35);
  --btn-hover-border: rgba(0, 138, 168, 0.6);
  --btn-danger-bg: rgba(228, 64, 87, 0.1);
  --btn-danger-border: rgba(228, 64, 87, 0.3);
  --btn-danger-hover-border: rgba(228, 64, 87, 0.5);

  /* Input styles - customize these */
  --input-bg: #ffffff;
  --input-focus-border: rgba(0, 138, 168, 0.65);
  --input-focus-shadow: rgba(0, 138, 168, 0.15);

  /* Panel/Card/List styles */
  --panel-bg: #ffffff;
  --card-bg: #ffffff;
  --card-shadow: none;
  --card-shadow-hover: 0 1px 4px rgba(46, 52, 64, 0.15);
  --list-item-bg: #ffffff;
  --list-item-hover-bg: #f1f1f4;
  --card-hover-bg: #ffffff;

  /* Landing page styles - customize these */
  --landing-card-bg: #ffffff;
  --landing-badge-bg: rgba(0, 138, 168, 0.12);
  --landing-badge-border: rgba(0, 138, 168, 0.35);
  --landing-badge-text: #006a82;
  --landing-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);

  /* Topbar - customize these */
  --topbar-bg: var(--bg);
  --topbar-border: var(--border);

  /* Style overrides - customize these directly */

  /* Buttons */
  /* .btn {
    background: var(--btn-bg);
    border-color: var(--btn-border);
  }
  .btn:hover {
    border-color: var(--btn-hover-border);
  }
  .btn--danger {
    background: var(--btn-danger-bg);
    border-color: var(--btn-danger-border);
  }
  .btn--danger:hover {
    border-color: var(--btn-danger-hover-border);
  } */

  /* Inputs */
  /* .input,
  .textarea,
  .select {
    background: var(--input-bg);
  }
  .input:focus,
  .textarea:focus,
  .select:focus {
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 4px var(--input-focus-shadow);
  } */

  /* Panels - subtle beige for contrast */
  .panel {
    background: var(--panel-bg);
  }

  /* Cards - subtle beige for contrast */
  .card {
    background: var(--card-bg);
  }

  .card:hover {
    background: var(--card-hover-bg);
  }

  /* List items - subtle beige for contrast */
  .list__item {
    background: var(--list-item-bg);
  }

  .list__item:hover {
    background: var(--list-item-hover-bg);
  }

  /* Landing page */
  /* .landing__card {
    background: var(--landing-card-bg);
  }
  .landing__badge {
    background: var(--landing-badge-bg);
    border-color: var(--landing-badge-border);
    color: var(--landing-badge-text);
  }
  .landing__intro,
  .landing__note,
  .landing__card-text {
    text-shadow: var(--landing-text-shadow);
  } */

  /* Topbar */
  /* .topbar {
    background: var(--topbar-bg);
    border-bottom-color: var(--topbar-border);
  } */
}

/* ============================================
   BASE & RESET STYLES
   ============================================ */

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  transition: background-color 0.2s ease, color 0.2s ease;
}

body {
  margin: 0;
  min-height: 100%;
  font-family: "Ubuntu", Arial, Helvetica, ui-sans-serif, system-ui, -apple-system, Segoe UI, Tahoma, Roboto, sans-serif;
  line-height: 1.25;
  background: var(--bg);
  color: var(--text);
}

/* App shell wallpaper (fixed stack behind #app; toggled via html[data-wallpaper-active]) */
.wallpaper-shell {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: none;
}

.wallpaper-shell.wallpaper-shell--visible {
  display: block;
}

.wallpaper-shell__image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.wallpaper-shell__overlay {
  position: absolute;
  inset: 0;
  /* Dark theme: scrim over image for readability */
  background: rgba(11, 15, 23, 0.78);
}

[data-theme="light"] .wallpaper-shell__overlay {
  background: rgba(247, 247, 244, 0.82);
}

html[data-wallpaper-active] #app {
  position: relative;
  z-index: 1;
}

/* Let gutters show wallpaper; panels/cards keep solid surfaces */
html[data-wallpaper-active] .container {
  background: transparent;
}

html[data-wallpaper-active] .topbar {
  background: color-mix(in srgb, var(--topbar-bg) 86%, transparent);
}

/* Light mode + photo wallpaper: paler topbar mix reads as solid white — let more of the image show through. */
html[data-wallpaper-active][data-theme="light"][data-wallpaper-source="image"] .topbar {
  background: color-mix(in srgb, var(--bg) 36%, transparent);
}

/* Settings: match the rest of the shell when a wallpaper is active (native dialog backdrop is a separate layer). */
html[data-wallpaper-active] #settingsDialog.dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
}
html[data-wallpaper-active][data-theme="light"] #settingsDialog.dialog::backdrop {
  background: rgba(247, 247, 244, 0.65);
}
html[data-wallpaper-active] #settingsDialog.dialog {
  background: color-mix(in srgb, var(--bg) 96%, transparent);
}
@media (min-width: 768px) {
  html[data-wallpaper-active] #settingsDialog.dialog {
    backdrop-filter: blur(8px);
  }
}

.page {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

/* ============================================
   LANDING PAGE
   ============================================ */

.landing-body {
  background:
    radial-gradient(800px 800px at 15% 20%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%),
    radial-gradient(620px 620px at 85% 0%, rgba(16, 185, 129, 0.12), transparent 55%),
    var(--bg);
  overflow: hidden;
  height: 100vh;
}

.landing {
  height: 100vh;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: var(--s-32) 0;
}

.landing__halo {
  position: absolute;
  width: 520px;
  height: 520px;
  border-radius: 999px;
  filter: blur(120px);
  opacity: 0.75;
  z-index: 0;
}

.landing__halo--left {
  top: -140px;
  left: -120px;
  background: color-mix(in srgb, var(--accent) 35%, transparent);
}

.landing__halo--right {
  bottom: -180px;
  right: -120px;
  background: rgba(16, 185, 129, 0.28);
}

.landing__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 960px;
  padding: 0 var(--s-18);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-16);
  text-align: center;
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
}

.landing__content::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Opera */
}

.landing__logo {
  height: var(--s-56);
  width: auto;
  object-fit: contain;
}

.landing__intro {
  font-size: var(--fs-21);
  line-height: 1.4;
  color: var(--text);
  margin: var(--s-4) 0;
  max-width: 760px;
}

.landing__intro a {
  color: #2596be;
  text-decoration: none;
  font-weight: 500;
}

.landing__preview {
  width: 100%;
  max-width: 800px;
  max-height: 40vh;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin: var(--s-12) 0;
  object-fit: contain;
}

@media (orientation: landscape) {
  .landing__preview {
    box-shadow: none;
  }
}

.btn--cta {
  background: linear-gradient(135deg, #fbbf24 0%, #d4a017 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #000000 !important;
  font-weight: 800;
  padding: var(--s-14) 28px;
  border-radius: var(--radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-10);
  font-size: var(--fs-17);
  letter-spacing: 0.2px;
  box-shadow: 0 18px 48px color-mix(in srgb, var(--accent) 25%, transparent), 0 12px 28px rgba(20, 184, 166, 0.16);
  min-width: 260px;
  width: min(420px, 100%);
  transition: transform 120ms ease, box-shadow 160ms ease, filter 160ms ease;
  text-decoration: none;
}

.btn--cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 52px color-mix(in srgb, var(--accent) 32%, transparent), 0 14px 32px rgba(20, 184, 166, 0.2);
  filter: brightness(1.03);
}

.btn--cta:active {
  transform: translateY(0);
}

.landing__note {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-14);
  padding: 0 var(--s-18);
}

.landing__highlights {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-14);
  margin-top: var(--s-8);
}

.landing__card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-16);
  text-align: left;
  box-shadow: var(--shadow);
}

.landing__badge {
  display: inline-flex;
  align-items: center;
  padding: var(--s-6) 10px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: #dbeafe;
  font-weight: 700;
  font-size: var(--fs-12);
  margin-bottom: var(--s-10);
}

.landing__card-title {
  font-weight: 800;
  font-size: var(--fs-16);
  margin-bottom: var(--s-6);
}

.landing__card-text {
  color: var(--muted);
  line-height: 1.5;
  font-size: var(--fs-14);
}

.landing__intro,
.landing__note,
.landing__card-text {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

@media (max-width: 720px) {
  .landing {
    padding: var(--s-20) 0;
  }

  .landing__logo {
    height: var(--s-40);
  }

  .landing__intro {
    font-size: var(--fs-16);
    line-height: 1.3;
  }

  .landing__preview {
    margin: var(--s-10) 0;
    max-width: 100%;
    max-height: 35vh;
  }

  .landing__content {
    gap: var(--s-12);
  }

  .btn--cta {
    width: 100%;
    padding: var(--s-12) 24px;
    font-size: var(--fs-15);
  }

  .landing__note {
    font-size: var(--fs-12);
  }

  .landing__highlights {
    gap: var(--s-12);
  }
}

/* ============================================
   LAYOUT COMPONENTS
   ============================================ */

/* Taiga's global bar is a fixed 48px strip on the panel colour, sitting above a grey
   page field — not a translucent extension of the page. */
.topbar {
  display: flex;
  align-items: center;
  gap: var(--s-10);
  min-height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  background: var(--topbar-bg, var(--panel));
  position: sticky;
  top: 0;
  z-index: 10;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.topbar::-webkit-scrollbar {
  display: none;
}

/* ============================================
   APP SHELL: top bar + sidebar + content (views/shell.ts)
   ============================================ */

.app-shell {
  display: grid;
  grid-template-columns: var(--shell-sidebar-w) minmax(0, 1fr);
  grid-template-rows: var(--shell-topbar-h) 1fr;
  min-height: 100vh;
}

.shell-topbar {
  grid-column: 1 / -1;
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--shell-topbar-h);
  padding: 0 16px;
  background: var(--shell-topbar-bg);
  color: var(--shell-topbar-text);
}

.shell-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.shell-burger {
  display: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: inherit;
  font-size: 20px;
  cursor: pointer;
}

.shell-crumb {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 14px;
}

.shell-crumb__root {
  padding: 3px 10px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--panel2);
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}

.shell-crumb__root:hover {
  color: var(--accent);
}

.shell-switch__btn:hover,
.shell-burger:hover {
  background: rgba(46, 52, 64, 0.08);
}

.shell-crumb__sep {
  opacity: 0.6;
}

.shell-switch {
  position: relative;
  min-width: 0;
}

.shell-switch__btn {
  max-width: 40vw;
  padding: 4px 8px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shell-switch__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 4px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.shell-switch__menu[hidden] {
  display: none;
}

.shell-switch__item {
  padding: 8px 10px;
  border-radius: 3px;
  color: var(--text);
  text-decoration: none;
}

.shell-switch__item:hover,
.shell-switch__item.is-active {
  background: var(--panel2);
  color: var(--accent);
}

.shell-switch__empty {
  padding: 8px 10px;
  color: var(--muted);
}

.shell-sidebar {
  position: sticky;
  top: var(--shell-topbar-h);
  z-index: 15;
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--shell-topbar-h));
  overflow-y: auto;
  background: var(--shell-side-bg);
  color: var(--shell-side-text);
}

.shell-group {
  display: flex;
  flex-direction: column;
}

.shell-group__title {
  display: flex;
  align-items: center;
  height: var(--shell-row-h);
  padding: 0 16px;
  background: var(--shell-side-title-bg);
  color: var(--shell-project);
  font-size: 14px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shell-grow {
  flex: 1;
}

.shell-group--bottom {
  border-top: 1px solid var(--shell-side-title-bg);
}

.shell-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  height: var(--shell-row-h);
  padding: 0 16px;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.shell-item svg {
  flex: none;
}

.shell-item__label {
  overflow: hidden;
  text-overflow: ellipsis;
}

.shell-item:hover {
  background: var(--shell-side-hover);
  color: #ffffff;
}

.shell-item.is-active {
  background: var(--shell-side-active);
  color: #ffffff;
}

.shell-item:focus-visible,
.shell-crumb a:focus-visible,
.shell-switch__btn:focus-visible,
.shell-burger:focus-visible {
  outline: 2px solid var(--shell-project);
  outline-offset: -2px;
}

.shell-main {
  min-width: 0;
  background: var(--content-bg);
}

.shell-main .container {
  background: transparent;
}

/* The board's own control row sits under the shell top bar while scrolling. */
.shell-main > .topbar {
  top: var(--shell-topbar-h);
}

/* Wallpaper shows only behind the content area. */
body:has(.app-shell) .wallpaper-shell {
  top: var(--shell-topbar-h);
  left: var(--shell-sidebar-w);
}

html[data-wallpaper-active] .shell-main {
  background: transparent;
}

@media (max-width: 767px) {
  .app-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .shell-topbar {
    gap: 6px;
    padding: 0 8px;
  }

  .shell-burger {
    display: inline-grid;
  }

  .shell-logo {
    display: none;
  }

  .shell-sidebar {
    display: none;
    position: fixed;
    top: var(--shell-topbar-h);
    bottom: 0;
    left: 0;
    z-index: 30;
    width: 260px;
    height: auto;
    box-shadow: 8px 0 24px rgba(0, 0, 0, 0.3);
  }

  .app-shell--drawer-open .shell-sidebar {
    display: flex;
  }

  /* Backdrop: a tap outside the open drawer only closes it (the shell's outside-click handler
     sees .app-shell as the target), it never reaches a card underneath. */
  .app-shell--drawer-open::after {
    content: "";
    position: fixed;
    inset: var(--shell-topbar-h) 0 0 0;
    z-index: 29;
    background: rgba(46, 52, 64, 0.45);
  }

  body:has(.app-shell) .wallpaper-shell {
    left: 0;
  }
}

/* Phones pin `.page` to the viewport (see the 620px block below); start it under the shell top bar. */
@media (max-width: 620px) {
  .shell-main.page {
    top: var(--shell-topbar-h);
    /* .page's min-height: 100% would stretch it past the viewport bottom by the bar's height. */
    min-height: 0;
  }

  .shell-main > .topbar {
    top: 0;
  }
}

/* === Ticket 12: collapsible sidebar (56px icons) + mobile drawer === */
/* "Collapse menu" sits right-aligned at the very bottom with a round chevron (Taiga). */
.shell-collapse {
  flex-direction: row-reverse;
  gap: 10px;
  border-top: 1px solid var(--shell-side-title-bg);
}

.shell-collapse svg {
  box-sizing: content-box;
  width: 16px;
  height: 16px;
  padding: 3px;
  border-radius: 50%;
  background: var(--shell-side-title-bg);
  color: var(--shell-project);
}

@media (min-width: 768px) {
  .app-shell--collapsed {
    --shell-sidebar-w: 56px;
  }

  body:has(.app-shell--collapsed) .wallpaper-shell {
    left: 56px;
  }

  .app-shell--collapsed .shell-item {
    padding: 0 17px;
  }

  .app-shell--collapsed .shell-collapse {
    padding: 0 16px;
  }

  .app-shell--collapsed .shell-collapse svg {
    transform: rotate(180deg);
  }

  /* Collapsed: the project name shrinks to what fits (full name in its title and the breadcrumb);
     the Work overview sub-items become icon rows with the same flyout labels. */
  .app-shell--collapsed .shell-group__title {
    padding: 0 6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    text-align: center;
  }

  .app-shell--collapsed .shell-item--sub svg {
    display: block;
  }

  .app-shell--collapsed .shell-group--project {
    border-top: 1px solid var(--shell-side-title-bg);
  }

  /* The label stays in the accessibility tree and becomes the tooltip: a fixed flyout next to
     the rail (escapes the sidebar's overflow), shown on hover and keyboard focus. */
  .app-shell--collapsed .shell-item__label {
    position: fixed;
    left: var(--shell-sidebar-w);
    z-index: 50;
    display: flex;
    align-items: center;
    height: var(--shell-row-h);
    padding: 0 16px;
    background: var(--shell-side-title-bg);
    color: #ffffff;
    white-space: nowrap;
    pointer-events: none;
    clip-path: inset(50%);
  }

  .app-shell--collapsed .shell-item:hover .shell-item__label,
  .app-shell--collapsed .shell-item:focus-visible .shell-item__label {
    clip-path: none;
  }
}

/* Anonymous temporary board: no sidebar, its own bar painted like the shell top bar. */
.topbar--anon {
  --topbar-bg: var(--shell-topbar-bg);
  color: var(--shell-topbar-text);
  border-bottom: 0;
}

.topbar--anon [data-shell-project-name] {
  font-size: 14px;
  font-weight: 500;
}

.page:has(> .topbar--anon) {
  background: var(--content-bg);
}

.page:has(> .topbar--anon) .container {
  background: transparent;
}

@media (max-width: 767px) {
  .shell-collapse {
    display: none;
  }

  .shell-burger {
    width: 44px;
    height: 44px;
  }
}


/* ============================================
   BOARD PAGE HEADER + TOOLBAR (Taiga kanban; board-rendering.ts buildTopbarHtml)
   Header: project image, teal name, primary "+ New card", ⋮ menu.
   Toolbar: Filters (badge) opening #searchFilterPanel under it, search, ZOOM.
   ============================================ */

.board-bar {
  padding: var(--s-16) var(--s-16) 0;
}

.board-bar + .container {
  padding-top: var(--s-16);
}

.board-head {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  min-width: 0;
}

/* === Ticket 23: non-member read-only notice === */
.board-notice {
  margin: var(--s-12) 0 0;
  padding: var(--s-6) var(--s-10);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel2);
  color: var(--text);
  font-size: var(--fs-14);
}

@media (max-width: 620px) {
  .board-bar:has(.board-notice) {
    flex-wrap: wrap;
  }

  .board-notice {
    order: 10;
    flex: 1 0 100%;
    margin: 0;
  }
}

.board-head__img {
  display: flex;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  overflow: hidden;
}

.board-head__title {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--accent-title);
  font-size: var(--page-title-size);
  font-weight: 500;
}

/* Primary action; the id-level 40x40 icon-button sizing is undone here. */
.board-bar #newTodoBtn {
  width: auto;
  min-width: 0;
  height: var(--toolbar-control-h);
  gap: var(--s-6);
  padding: 0 var(--s-14);
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--fs-14);
  font-weight: 500;
}

.board-bar #newTodoBtn:hover {
  filter: brightness(1.08);
}

/* === Ticket 25: visible wall button in the board header === */
.board-head__wall {
  display: inline-flex;
  align-items: center;
  gap: var(--s-6);
  height: var(--toolbar-control-h);
  padding: 0 var(--s-10);
  font-size: var(--fs-14);
  white-space: nowrap;
}

@media (max-width: 620px) {
  .board-head__wall {
    display: none;
  }
}

.board-more {
  position: relative;
}

.board-more[hidden] {
  display: none;
}

.board-more__btn {
  display: grid;
  place-items: center;
  width: var(--toolbar-control-h);
  height: var(--toolbar-control-h);
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.board-more__btn:hover,
.board-more__btn[aria-expanded="true"] {
  background: var(--panel2);
  color: var(--text);
}

.board-more__menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  padding: var(--s-4);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.board-more__menu[hidden] {
  display: none;
}

#boardMoreMenu .board-more__item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--s-10);
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 var(--s-10);
  border: 0;
  border-radius: 3px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-14);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

#boardMoreMenu .board-more__item:hover,
#boardMoreMenu .board-more__item:focus-visible {
  background: var(--panel2);
  color: var(--accent);
}

#boardMoreMenu .board-more__item svg,
#boardMoreMenu .board-more__item img {
  flex: none;
  width: 18px;
  height: 18px;
}

#boardMoreMenu .board-more__item--danger,
#boardMoreMenu .board-more__item--danger:hover {
  color: var(--danger-text);
}

#boardMoreMenu .board-more__item--danger {
  margin-top: var(--s-4);
  border-top: 1px solid var(--border);
  border-radius: 0 0 3px 3px;
}

/* The trash icon is drawn red; the others follow the theme's icon filter. */
#boardMoreMenu .board-more__item--danger img {
  filter: none;
}

.board-toolbar {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  padding-top: var(--s-16);
  min-width: 0;
}

/* Filters: Taiga's light button with teal text; replaces the search box's chevron. */
.board-toolbar .board-filters-btn {
  position: static;
  transform: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s-6);
  width: auto;
  height: var(--toolbar-control-h);
  padding: 0 var(--s-8);
  border: 0;
  border-radius: var(--radius);
  background: var(--toolbar-btn-bg);
  color: var(--accent);
  font: inherit;
  font-size: var(--fs-14);
  white-space: nowrap;
  /* The badge replaces the search chevron's pulse. */
  animation: none;
  box-shadow: none;
}

.board-toolbar .board-filters-btn:hover,
.board-toolbar .board-filters-btn[aria-expanded="true"] {
  background: var(--panel2);
  color: var(--accent);
}

.board-filters-btn__badge {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--fs-12);
  font-weight: 500;
}

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

.board-toolbar .search-input-wrapper {
  margin-right: 0;
}

.board-toolbar .search-input {
  width: 220px;
  max-width: 220px;
  height: var(--toolbar-control-h);
  padding-right: 2rem;
  border: 2px solid var(--border);
  border-radius: 3px;
  font-size: var(--fs-14);
}

.board-toolbar .search-input:focus,
.board-toolbar .search-input:not(:placeholder-shown) {
  border-color: var(--accent);
  box-shadow: none;
}

.board-toolbar .search-clear {
  right: 0.4rem;
}

.board-toolbar__zoom-label {
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.board-toolbar__zoom-label::after {
  content: ":";
}

/* ============================================
   BOARD FILTER PANEL (Taiga's inline filter side panel; board-filters.ts)
   Desktop: a 216px column left of the lanes that pushes them. Phones: a full-width sheet.
   ============================================ */

@media (min-width: 768px) {
  .board-with-filters {
    display: flex;
    align-items: flex-start;
    gap: var(--s-16);
  }

  .board-with-filters > .mobile-board-wrapper {
    flex: 1 1 auto;
    min-width: 0;
  }
}

.bfp {
  flex: 0 0 216px;
  width: 216px;
  padding: var(--s-8);
  border: 1px solid var(--lane-col-bg);
  background: var(--content-bg);
  color: var(--text);
  font-size: var(--fs-14);
}

.bfp-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
}

.bfp-link:disabled {
  opacity: 0.5;
  cursor: default;
}

.bfp-link--muted {
  color: var(--muted);
}

.bfp-custom {
  margin-bottom: var(--s-12);
  padding-bottom: var(--s-12);
  border-bottom: 1px solid var(--border);
}

.bfp-custom__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-8);
}

.bfp-custom__count {
  color: var(--muted);
}

.bfp-custom__form {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  margin-top: var(--s-8);
}

.bfp-custom__input {
  width: 100%;
  padding: var(--s-4) var(--s-6);
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--content-bg);
  color: var(--text);
  font: inherit;
}

.bfp-custom__form-actions {
  display: flex;
  gap: var(--s-12);
}

.bfp-custom__list {
  margin: var(--s-8) 0 0;
  padding: 0;
  list-style: none;
}

.bfp-custom__item {
  display: flex;
  align-items: center;
}

.bfp-custom__apply {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--s-4) 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.bfp-custom__delete,
.bfp-chip__remove {
  padding: 0 var(--s-4);
  border: 0;
  background: none;
  color: var(--muted);
  font-size: var(--fs-16);
  line-height: 1;
  cursor: pointer;
}

.bfp-custom__delete:hover,
.bfp-chip__remove:hover {
  color: var(--danger-text);
}

/* "Filtered by:" (green) and "Excluded:" (red) boxes with white removable chips. */
.bfp-applied {
  margin-bottom: var(--s-8);
  padding-bottom: var(--s-8);
  border-bottom: 1px solid var(--border);
}

.bfp-applied__group {
  padding: var(--s-8);
}

.bfp-applied__group--include {
  background: color-mix(in srgb, var(--success) 10%, transparent);
}

.bfp-applied__group--exclude {
  background: color-mix(in srgb, var(--danger) 8%, transparent);
}

.bfp-applied__group + .bfp-applied__group {
  margin-top: var(--s-8);
}

.bfp-applied__title {
  margin-bottom: var(--s-8);
}

.bfp-applied__group--include .bfp-applied__title {
  color: var(--success);
}

.bfp-applied__group--exclude .bfp-applied__title {
  color: var(--danger-text);
}

.bfp-applied__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8);
}

.bfp-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  max-width: 100%;
  padding: var(--s-4);
  background: var(--card-bg);
  color: var(--text);
}

.bfp-chip__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bfp-mode {
  display: flex;
  gap: var(--s-16);
  padding: var(--s-8) var(--s-8) var(--s-16);
}

.bfp-mode__option {
  display: inline-flex;
  align-items: center;
  gap: var(--s-6);
  cursor: pointer;
}

.bfp-mode__option input {
  accent-color: var(--accent);
  margin: 0;
}

.bfp-mode__option--exclude input {
  accent-color: var(--danger);
}

.bfp-cats,
.bfp-values {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bfp-cats {
  border-bottom: 1px solid var(--border);
}

.bfp-cat__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--s-8) var(--s-8) var(--s-8) var(--s-16);
  border: 0;
  border-top: 1px solid var(--border);
  background: none;
  color: var(--muted);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.bfp-cat__btn:hover,
.bfp-cat.is-open > .bfp-cat__btn {
  background: var(--lane-col-bg);
  color: var(--text);
}

.bfp-cat__chevron {
  color: var(--accent);
  transition: transform 0.15s ease;
}

.bfp-cat.is-open .bfp-cat__chevron {
  transform: rotate(90deg);
}

.bfp-values {
  max-height: 320px;
  padding: var(--s-8) 0;
  overflow-y: auto;
}

.bfp-values__empty {
  padding: var(--s-6) var(--s-8);
  color: var(--muted);
}

.bfp-value {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  width: 100%;
  min-height: 30px;
  margin-bottom: var(--s-6);
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-8);
  border: 0;
  border-left: 3px solid transparent;
  background: var(--side-panel-bg);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.bfp-value:hover {
  background: var(--lane-col-bg);
}

.bfp-value.is-included {
  border-left-color: var(--success);
  font-weight: 600;
}

.bfp-value.is-excluded {
  border-left-color: var(--danger);
  color: var(--muted);
  text-decoration: line-through;
}

.bfp-value__swatch {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.bfp-value__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bfp-value__count {
  flex: 0 0 auto;
  padding: 0 var(--s-4);
  background: var(--lane-col-bg);
  color: var(--text);
  font-size: var(--fs-13);
}

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

/* Phones: the panel is a full-width sheet over the board, under the shell bar. */
@media (max-width: 767px) {
  .bfp {
    position: fixed;
    inset: var(--shell-topbar-h) 0 0 0;
    z-index: 60;
    width: auto;
    padding: var(--s-12) var(--s-16) var(--s-24);
    border: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  body:not(:has(.app-shell)) .bfp {
    top: 0;
  }

  .bfp-value,
  .bfp-cat__btn {
    min-height: 40px;
  }
}

html[data-wallpaper-active] .board-bar {
  background: color-mix(in srgb, var(--content-bg) 86%, transparent);
  padding-bottom: var(--s-12);
}

/* Phones: header and toolbar fold into one row under the shell bar (the project name is
   already in the breadcrumb): Filters, search, "+", ⋮. */
@media (max-width: 620px) {
  .board-bar {
    display: flex;
    align-items: center;
    gap: var(--s-6);
    padding: var(--s-8) var(--s-10);
  }

  .board-head,
  .board-toolbar {
    display: contents;
  }

  .board-bar + .container {
    padding-top: var(--s-8);
  }

  .board-head__img,
  .board-head__title,
  .board-bar .spacer,
  .board-head__new-label,
  #boardMoreMenu #wallBtn {
    display: none;
  }

  .board-toolbar .board-filters-btn {
    order: 0;
  }

  .board-toolbar .search-input-wrapper {
    order: 1;
    flex: 1 1 0;
    min-width: 0;
  }

  .board-toolbar .search-input {
    width: 100%;
    max-width: none;
  }

  .board-bar #newTodoBtn,
  .board-bar #archiveBtn,
  .board-bar #settingsBtn,
  .board-more {
    order: 2;
    flex-shrink: 0;
  }

  .board-bar #newTodoBtn {
    width: var(--toolbar-control-h);
    padding: 0;
    justify-content: center;
    font-size: var(--fs-18);
  }

  .board-bar #archiveBtn,
  .board-bar #settingsBtn {
    width: var(--toolbar-control-h);
    min-width: var(--toolbar-control-h);
    height: var(--toolbar-control-h);
    padding: 0;
  }
}

.project-image-topbar-btn {
  width: var(--s-32);
  height: var(--s-32);
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius);
  overflow: hidden;
}

.project-image-topbar {
  width: 100%;
  height: 100%;
  border-radius: var(--radius);
  object-fit: cover;
}

.project-image-topbar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-20);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  font-weight: 700;
  letter-spacing: 0.2px;
  min-width: 0;
  flex-shrink: 1;
}

.brand-logo {
  height: var(--s-32);
  width: auto;
  object-fit: contain;
  border-radius: 4px;
}

.brand-text {
  height: var(--s-24);
  width: auto;
  object-fit: contain;
}

.spacer {
  flex: 1;
}

.container {
  padding: var(--s-16);
  /* No max-width: expands fluidly on large viewports. Inner layout (board grid, lists) controls density. */
  width: 100%;
  margin: 0 auto;
  /* Use theme background so container is not white in light mode when body is white for PWA splash */
  background: var(--bg);
}

/* ============================================
   PANEL & VIEW COMPONENTS
   ============================================ */

/* Taiga panels are white cards on a grey page field. */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--s-16);
}

.panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s-16);
}

.panel__title {
  font-size: var(--fs-18);
  font-weight: 700;
  margin: 0;
}

.view-toggle {
  display: flex;
  gap: var(--s-4);
}

.view-toggle-btn {
  padding: var(--s-6) 10px;
  min-width: auto;
}

.view-toggle-btn--active {
  background: var(--panel);
  border-color: var(--accent);
}

.row {
  display: flex;
  gap: var(--s-10);
  align-items: center;
  margin-bottom: var(--s-12);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-10);
}

/* ============================================
   FORM ELEMENTS
   ============================================ */

.input,
.textarea,
.select {
  width: 100%;
  background: var(--input-bg, var(--panel));
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-8);
  padding: var(--s-8) 12px;
  outline: none;
}

.textarea {
  resize: vertical;
}

.todo-notes-editor {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.todo-notes-editor:focus-within {
  border-color: color-mix(in srgb, var(--accent) 65%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent);
}

.todo-notes-field .field__label-row {
  align-items: center;
}

.todo-notes-tabs {
  align-items: center;
  display: flex;
  flex-shrink: 0;
  gap: var(--s-6);
  margin-left: auto;
}

.todo-notes-tabs[hidden] {
  display: none;
}

.todo-notes-tab {
  appearance: none;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: var(--muted); /* the faded tints were ~2:1 */
  cursor: pointer;
  font-size: var(--fs-12);
  font-weight: 600;
  line-height: 1.2;
  padding: 0;
  transition: color 0.15s ease;
}

.todo-notes-tab:hover,
.todo-notes-tab.is-active {
  color: var(--text);
}

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

.todo-notes-format {
  align-items: center;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-6);
}

.todo-notes-format[hidden],
.todo-notes-editor:has(.todo-notes-input[readonly]) .todo-notes-format {
  display: none;
}

.todo-notes-format__btn {
  align-items: center;
  appearance: none;
  background: transparent;
  border: none;
  border-radius: var(--s-6);
  color: var(--muted);
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  height: 28px;
  justify-content: center;
  min-width: 28px;
  padding: 0 var(--s-6);
}

.todo-notes-format__btn:hover {
  background: var(--panel2);
  color: var(--text);
}

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

.todo-notes-field .todo-notes-input {
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.todo-notes-field .todo-notes-input:focus {
  border-color: transparent;
  box-shadow: none;
}

/* === Ticket 30: Markdown colours per theme (notes preview + comments) === */
:root {
  --md-code-bg: rgba(15, 23, 42, 0.95);
  --md-code-text: #eceff4;
  --md-pre-bg: rgba(2, 6, 23, 0.95);
  --md-pre-border: rgba(148, 163, 184, 0.18);
  --md-quote-text: rgba(229, 231, 235, 0.92);
  --md-link: #8cc4ff;
  --md-rule: rgba(148, 163, 184, 0.28);
  --md-error: #ffb4b4;
  --md-warning: #f5c46b;
}
[data-theme="light"] {
  --md-code-bg: #e5e9f0; /* #2e3440 on it: 10.6:1 */
  --md-code-text: #2e3440;
  --md-pre-bg: #e5e9f0;
  --md-pre-border: #d8dee9;
  --md-quote-text: var(--muted);
  --md-link: var(--accent);
  --md-rule: #d8dee9;
  --md-error: var(--danger);
  --md-warning: #8a5300; /* 5.6:1 on #f1f1f4 */
}
#todoDialog .todo-markdown-preview .todo-markdown-task {
  margin: 0 var(--s-6) 0 0;
  vertical-align: middle;
}
#todoDialog .todo-markdown-preview li.todo-markdown-task-item {
  list-style: none;
}
/* === End ticket 30 === */

#todoDialog .todo-markdown-preview {
  background: var(--panel2);
  color: var(--text);
  line-height: 1.6;
  min-height: calc(8.75rem * var(--ui-scale));
  overflow: auto;
  padding: var(--s-10) 12px;
}

#todoDialog .todo-markdown-preview--empty::before {
  color: var(--muted);
  content: "Nothing to preview yet.";
}

#todoDialog .todo-markdown-preview > :first-child {
  margin-top: 0;
}

#todoDialog .todo-markdown-preview > :last-child {
  margin-bottom: 0;
}

#todoDialog .todo-markdown-preview h1,
#todoDialog .todo-markdown-preview h2,
#todoDialog .todo-markdown-preview h3,
#todoDialog .todo-markdown-preview h4,
#todoDialog .todo-markdown-preview h5,
#todoDialog .todo-markdown-preview h6 {
  color: var(--text);
  line-height: 1.25;
  margin: var(--s-14) 0 var(--s-8);
}

#todoDialog .todo-markdown-preview h1 {
  font-size: var(--fs-21);
}

#todoDialog .todo-markdown-preview h2 {
  font-size: var(--fs-18);
}

#todoDialog .todo-markdown-preview h3 {
  font-size: var(--fs-16);
}

#todoDialog .todo-markdown-preview p,
#todoDialog .todo-markdown-preview ul,
#todoDialog .todo-markdown-preview ol,
#todoDialog .todo-markdown-preview blockquote,
#todoDialog .todo-markdown-preview pre {
  margin: 0 0 var(--s-10);
}

#todoDialog .todo-markdown-preview ul,
#todoDialog .todo-markdown-preview ol {
  padding-left: calc(1.35rem * var(--ui-scale));
}

#todoDialog .todo-markdown-preview li + li {
  margin-top: var(--s-4);
}

#todoDialog .todo-markdown-preview blockquote {
  border-left: 3px solid color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--md-quote-text);
  margin-left: 0;
  padding-left: var(--s-12);
}

#todoDialog .todo-markdown-preview code {
  background: var(--md-code-bg);
  color: var(--md-code-text);
  border-radius: var(--radius-8);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: var(--fs-13);
  padding: 0.15em 0.4em;
}

#todoDialog .todo-markdown-preview pre {
  background: var(--md-pre-bg);
  border: 1px solid var(--md-pre-border);
  border-radius: var(--radius-10);
  overflow-x: auto;
  padding: var(--s-10);
}

#todoDialog .todo-markdown-preview pre code {
  background: transparent;
  border-radius: 0;
  display: block;
  padding: 0;
}

#todoDialog .todo-markdown-preview .todo-mermaid-host {
  margin: 0 0 var(--s-10);
}

#todoDialog .todo-markdown-preview .todo-mermaid-status {
  color: var(--muted);
  font-size: var(--fs-12);
  margin: 0 0 var(--s-6);
}

#todoDialog .todo-markdown-preview .todo-mermaid-status--error {
  color: var(--md-error);
}

#todoDialog .todo-markdown-preview .todo-mermaid-status--warning {
  color: var(--md-warning);
}

#todoDialog .todo-markdown-preview .todo-mermaid-canvas {
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: var(--radius-10);
  color: var(--text);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: var(--fs-13);
  overflow-x: auto;
  padding: var(--s-10);
  white-space: pre-wrap;
}

#todoDialog .todo-markdown-preview .todo-mermaid-host--ready .todo-mermaid-canvas {
  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: inherit;
  overflow: visible;
  padding: 0;
  white-space: normal;
}

#todoDialog .todo-markdown-preview .todo-mermaid-host--ready .todo-mermaid-canvas > svg,
#todoDialog .todo-markdown-preview .todo-mermaid-host--ready .todo-mermaid-canvas > iframe {
  background: transparent;
  border: 0;
  display: block;
  margin: 0 auto;
  max-width: 100%;
}

#todoDialog .todo-markdown-preview a {
  color: var(--md-link);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.15em;
}

#todoDialog .todo-markdown-preview hr {
  border: 0;
  border-top: 1px solid var(--md-rule);
  margin: var(--s-14) 0;
}

.input:focus,
.textarea:focus,
.select:focus {
  border-color: color-mix(in srgb, var(--accent) 65%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent);
}

/* Password row: one horizontal field (input + toggle). Button adjacent on mobile so Android Chrome shows it. */
.password-row {
  display: flex;
  align-items: stretch;
  width: 100%;
  gap: 0;
  border-radius: var(--radius-12);
  border: 1px solid var(--border);
  background: var(--bg);
  overflow: hidden;
}

.password-row .input {
  flex: 1;
  min-width: 0;
  width: auto;
  padding: var(--s-10) 12px;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.password-row .input:focus {
  box-shadow: none;
  border: none;
  outline: none;
  border-color: transparent;
}

.password-row:focus-within {
  border-color: color-mix(in srgb, var(--accent) 65%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent);
}

.password-toggle {
  flex-shrink: 0;
  min-width: calc(44px * var(--ui-scale));
  width: calc(44px * var(--ui-scale));
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: none;
  border-left: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  transition: none;
  opacity: 1 !important;
  -webkit-tap-highlight-color: transparent;
}

.password-toggle:hover,
.password-toggle:focus,
.password-toggle:active {
  outline: none;
  color: var(--muted);
  opacity: 1 !important;
  background: var(--bg);
}

.page--auth .auth-locale-select {
  width: auto;
  min-width: 150px;
  max-width: min(42vw, 220px);
  flex: 0 0 auto;
}

.locale-picker {
  position: relative;
  display: inline-block;
}

.locale-picker__button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  cursor: pointer;
}

.locale-picker__flag {
  display: block;
  width: auto;
  height: 16px;
  flex: 0 0 auto;
  object-fit: contain;
  border-radius: 1px;
}

.locale-picker__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.locale-picker__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 40;
  min-width: 100%;
  max-height: min(60dvh, 320px);
  margin: 0;
  padding: 4px 0;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

#settingsDialog .locale-picker__list {
  max-height: min(45dvh, 320px);
}

@media (max-width: 620px), (max-height: 640px) {
  .locale-picker__list {
    max-height: 280px;
  }

  #settingsDialog .locale-picker__list {
    max-height: 260px;
  }
}

.locale-picker__option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
}

.locale-picker__option:hover,
.locale-picker__option--highlight {
  background: var(--surface-hover, rgba(255, 255, 255, 0.06));
}

.locale-picker__option[aria-selected="true"] {
  font-weight: 600;
}

.page--auth .password-row {
  background: var(--bg);
}

.page--auth .password-row .input {
  background: var(--bg);
}

.page--auth .password-toggle {
  background: var(--bg);
}

.page--auth .password-toggle:hover,
.page--auth .password-toggle:focus,
.page--auth .password-toggle:active {
  background: var(--bg);
}

.password-toggle__icon {
  transition: none;
  opacity: 1 !important;
  display: block;
}

/* Desktop: overlay button inside input (single rounded field). */
@media (pointer: fine) and (min-width: 769px) {
  .password-row {
    position: relative;
    overflow: visible;
  }

  .password-row .input {
    padding-right: 2.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-12);
    background: var(--bg);
  }

  .password-row .input:focus {
    border-color: color-mix(in srgb, var(--accent) 65%, transparent);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent);
  }

  .password-row:focus-within {
    border: none;
    box-shadow: none;
  }

  .password-toggle {
    position: absolute;
    right: var(--s-8);
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    min-width: 0;
    padding: var(--s-4);
    border: none;
    border-left: none;
    background: transparent;
  }

  .password-toggle:hover,
  .password-toggle:focus,
  .password-toggle:active {
    outline: none;
    color: var(--muted);
    opacity: 1 !important;
    background: transparent;
  }

  .page--auth .password-toggle,
  .page--auth .password-toggle:hover,
  .page--auth .password-toggle:focus,
  .page--auth .password-toggle:active {
    background: transparent;
  }
}

.field__label {
  color: var(--muted);
  font-size: var(--fs-12);
  font-weight: 700;
  margin-bottom: var(--s-6);
}

.field__label-row {
  align-items: center;
  display: flex;
  gap: var(--s-8);
  justify-content: space-between;
  margin-bottom: var(--s-6);
}

.field__label-row .field__label {
  margin-bottom: 0;
}

.field__label[title],
.chip[title],
#searchInput[title],
.card__points[title],
.card__priority[title] {
  cursor: help;
}

/* ============================================
   BUTTONS
   ============================================ */

/* Derived from --accent so the teal carries into both themes instead of the old
   hard-coded blue. */
.btn {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  color: var(--text);
  border-radius: var(--radius-10);
  padding: var(--s-8) 12px;
  cursor: pointer;
  font-weight: 500;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
}


/* Every control shows a keyboard focus ring (a11y audit); components may restyle it.
   Text fields and selects mark focus with their own border. */
:where(a[href], button, [role="button"], [role="tab"], [role="menuitem"], summary, [tabindex]:not([tabindex="-1"]), input[type="checkbox"], input[type="radio"]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--muted);
}

.btn--ghost {
  background: transparent;
  border-color: var(--border);
}

.btn--ghost:hover:not(:disabled) {
  border-color: rgba(255, 255, 255, 0.15);
}

.btn--ghost:disabled,
.btn--ghost[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  color: var(--muted);
}

.btn--danger {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.32);
}

.btn--danger:hover:not(:disabled) {
  border-color: rgba(239, 68, 68, 0.55);
}

.btn--danger:disabled,
.btn--danger[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  background: rgba(239, 68, 68, 0.08);
  border-color: rgba(239, 68, 68, 0.2);
  color: var(--muted);
}

.btn--success {
  background: color-mix(in srgb, var(--success) 12%, transparent);
  border-color: color-mix(in srgb, var(--success) 32%, transparent);
}

.btn--success:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--success) 55%, transparent);
}

.btn--success:disabled,
.btn--success[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  background: color-mix(in srgb, var(--success) 8%, transparent);
  border-color: color-mix(in srgb, var(--success) 20%, transparent);
  color: var(--muted);
}

.btn--sso {
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px 16px;
  text-decoration: none;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  font-weight: 500;
}
.btn--sso:hover {
  background: color-mix(in srgb, var(--accent) 32%, transparent);
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0;
  color: var(--muted);
  font-size: var(--fs-13);
}
.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* === Ticket 11: sign-in, sign-up, reset password and not found (Taiga login) === */
/* No app bar: centred logo, uppercase tagline, a 400px form, light-teal uppercase button,
   underlined link to the other form; the language picker sits in the top-right corner. */
.page--auth,
.page--notfound {
  min-height: 100vh;
  background: var(--content-bg);
}

.page--auth .auth-locale {
  display: flex;
  justify-content: flex-end;
  padding: var(--s-12) var(--s-16) 0;
}

.auth-main {
  width: 100%;
  max-width: calc(400px + 2 * var(--s-16));
  margin: 0 auto;
  padding: 8vh var(--s-16) var(--s-32);
}

.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-16);
  margin-bottom: var(--s-24);
  text-align: center;
}

.auth-logo {
  height: 56px;
  width: auto;
}

.auth-tagline {
  margin: 0;
  color: var(--text);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* The form is plain on the page, as in Taiga (no card). */
.page--auth .auth-panel {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.page--auth .panel__header {
  justify-content: center;
  margin-bottom: var(--s-8);
}

.page--auth .panel__title {
  font-size: var(--fs-16);
  font-weight: 500;
}

.page--auth .panel__header + .muted {
  text-align: center;
}

.page--auth .stack {
  gap: var(--s-8);
}

.auth-label,
.page--auth .field__label {
  margin: var(--s-4) 0 0;
  color: var(--muted);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.page--auth .field__label {
  margin-bottom: var(--s-6);
}

/* Inputs: 2px cool-grey border, square-ish corners, teal border on focus. */
.page--auth .input,
.page--auth .password-row .input {
  height: 36px;
  padding: 0 var(--s-12);
  border: 2px solid var(--border);
  border-radius: 3px;
  background: var(--content-bg);
  box-shadow: none;
  font-size: var(--fs-14);
}

.page--auth .password-row {
  border: 0;
  border-radius: 3px;
  background: var(--content-bg);
  overflow: visible;
  position: relative;
}

.page--auth .password-row .input {
  padding-right: 2.75rem;
}

.page--auth .password-toggle,
.page--auth .password-toggle:hover,
.page--auth .password-toggle:focus,
.page--auth .password-toggle:active {
  position: absolute;
  right: 2px;
  top: 2px;
  bottom: 2px;
  transform: none;
  width: 32px;
  min-width: 32px;
  border: 0;
  background: transparent;
}

.page--auth .password-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.page--auth .input:focus,
.page--auth .password-row .input:focus {
  border: 2px solid var(--accent);
  box-shadow: none;
  outline: none;
}

.page--auth .password-row:focus-within {
  box-shadow: none;
}

.auth-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-16);
  margin-top: var(--s-8);
}

/* Taiga's light-teal button; dark text keeps it readable in both themes. */
.page--auth .auth-submit {
  width: 100%;
  min-height: 36px;
  border: 0;
  border-radius: 3px;
  background: var(--shell-project);
  color: #2e3440;
  font-size: var(--fs-14);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.page--auth .auth-submit:hover:not(:disabled) {
  background: color-mix(in srgb, var(--shell-project) 80%, #008aa8);
}

.page--auth .auth-submit:focus-visible,
.auth-link:focus-visible,
.page--auth .btn--sso:focus-visible,
.notfound__home:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.auth-link {
  min-height: 24px;
  padding: var(--s-4) var(--s-6);
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-14);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.auth-link:hover:not(:disabled) {
  color: var(--accent);
}

.auth-link:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.page--auth .btn--sso {
  min-height: 36px;
  border-radius: 3px;
  border: 2px solid var(--shell-project);
  background: transparent;
  color: var(--text);
  font-size: var(--fs-14);
}

/* Errors sit under the fields and are announced (role="alert"); the toast stays too. */
.auth-error {
  margin: 0;
  color: #ff9aa8;
  font-size: var(--fs-13);
}

[data-theme="light"] .auth-error {
  color: #b3203a;
}

/* Not found: centred logo, title, message and a teal link home on the plain background. */
.notfound {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-12);
  max-width: 480px;
  margin: 0 auto;
  padding: 16vh var(--s-16) var(--s-32);
  text-align: center;
}

.notfound__logo {
  height: 40px;
  width: auto;
  margin-bottom: var(--s-12);
}

.notfound__title {
  margin: 0;
  color: var(--accent-title);
  font-size: var(--page-title-size);
  font-weight: 500;
}

.notfound__message {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-14);
}

.notfound__home {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--s-8);
  color: var(--accent);
  font-size: var(--fs-16);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 767px) {
  .page--auth .input,
  .page--auth .password-row .input,
  .page--auth .auth-submit,
  .page--auth .btn--sso,
  .auth-link {
    min-height: 44px;
  }

  .page--auth .password-toggle,
  .page--auth .password-toggle:hover,
  .page--auth .password-toggle:focus,
  .page--auth .password-toggle:active {
    width: 44px;
    min-width: 44px;
  }

  .auth-main {
    padding-top: var(--s-24);
  }

  .auth-tagline {
    font-size: var(--fs-18);
  }
}

/* Phones pin every .page to the viewport; these pages scroll inside it. */
@media (max-width: 620px) {
  .page.page--auth,
  .page.page--notfound {
    overflow-y: auto;
  }
}
/* === end Ticket 11 === */

.btn--small {
  padding: var(--s-6) 10px;
  border-radius: var(--radius-10);
  font-size: var(--fs-13);
}

.hamburger {
  font-size: var(--fs-18);
  line-height: 1;
  display: inline-block;
}

.user-avatar {
  width: var(--s-36);
  height: var(--s-36);
  border: none;
  margin: 0;
  padding: 0;
  font: inherit;
  border-radius: 50%;
  background: var(--accent, #3B82F6);
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-14);
  font-weight: 600;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
  transition: opacity 0.2s ease;
  overflow: hidden;
}

.user-avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.user-avatar__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.user-avatar:hover {
  opacity: 0.8;
}

.user-avatar:focus {
  outline: 2px solid var(--accent, #3B82F6);
  outline-offset: 2px;
}

/* ============================================
   DIALOGS / MODALS
   ============================================ */

.dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  width: min(720px, calc(100vw - 24px));
  max-height: calc(100vh - 32px);
  height: max-content;
  /* Taiga lightboxes are white panels, not the page colour. */
  background: var(--panel);
  color: var(--text);
  box-shadow: var(--shadow);
  margin: 0;
  /* Dialog will dynamically resize to fit content while staying centered */
  /* height: max-content ensures it adapts to content size */
}

/* Settings modal: wide enough to fit all tabs on one line, no horizontal scrollbar */
/* Content has fixed max height so modal doesn't grow; user scrolls inside modal to see all (e.g. both charts) */
#settingsDialog .dialog__content {
  max-height: 60vh;
  overflow-y: auto;
}

/* Charts tab: hide scrollbar until user scrolls, then hide again after scrolling stops */
#settingsDialog .dialog__content.settings-content--charts {
  scrollbar-width: none;
}
#settingsDialog .dialog__content.settings-content--charts::-webkit-scrollbar {
  width: 0;
  height: 0;
}
#settingsDialog .dialog__content.settings-content--charts.scrollbar-visible {
  scrollbar-width: auto;
}
#settingsDialog .dialog__content.settings-content--charts.scrollbar-visible::-webkit-scrollbar {
  width: 8px;
  height: 0;
}
#settingsDialog .dialog__content.settings-content--charts.scrollbar-visible::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 4px;
}
#settingsDialog .dialog__content.settings-content--charts.scrollbar-visible::-webkit-scrollbar-track {
  background: transparent;
}
@media (min-width: 768px) {
  #settingsDialog.dialog {
    width: min(960px, calc(100vw - 48px));
  }
  #settingsDialog .dialog__content {
    overflow-x: hidden;
    min-width: 0;
  }
  /* Desktop only: Profile tab has no vertical scrollbar */
  #settingsDialog .dialog__content.settings-content--profile {
    scrollbar-width: none;
  }
  #settingsDialog .dialog__content.settings-content--profile::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
}

/* RTL mobile: explicitly viewport-center the Settings shell to avoid off-screen horizontal drift. */
@media (max-width: 767px) {
  [dir="rtl"] #settingsDialog.dialog {
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    transform: translateY(-50%);
    width: min(720px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
  }
}

@media (max-width: 620px) {
  [dir="rtl"] #settingsDialog.dialog {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
  }
}

.dialog[open] {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* Taiga dims behind a lightbox with a heavy wash of its dark grey, not pure black. */
.dialog::backdrop {
  background: rgba(45, 45, 57, 0.8);
}

.dialog__form {
  padding: var(--s-14);
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  flex: 0 0 auto;
}

.dialog__header {
  display: flex;
  align-items: center;
  gap: var(--s-10);
  justify-content: space-between;
}

.dialog__header-right {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  min-width: 0;
}

.voice-command-trigger,
#newTodoBtn,
#deleteProjectBtn,
#wallBtn,
#archiveBtn {
  white-space: nowrap;
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.voice-command-trigger svg,
.voice-command-trigger img,
#newTodoBtn img,
#deleteProjectBtn img,
#wallBtn img,
#archiveBtn img {
  width: 20px;
  height: 20px;
  max-width: 20px;
  max-height: 20px;
  fill: currentColor;
  flex: 0 0 auto;
}

.voice-command-trigger img,
#newTodoBtn img,
#deleteProjectBtn img,
#wallBtn img,
#archiveBtn img {
  display: block;
  filter: var(--voice-command-icon-filter);
  object-fit: contain;
}

.voice-command-dialog.dialog {
  width: min(560px, calc(100vw - 32px));
}

.voice-agent {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 1400;
  width: min(340px, calc(100vw - 32px));
  display: grid;
  gap: var(--s-10);
  padding: 12px;
  color: var(--text);
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-12);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}

.voice-agent__topline,
.voice-agent__identity,
.voice-agent__controls,
.voice-agent__confirmation-actions {
  display: flex;
  align-items: center;
}

.voice-agent__topline {
  justify-content: space-between;
  gap: var(--s-10);
}

.voice-agent__identity,
.voice-agent__controls,
.voice-agent__confirmation-actions {
  gap: var(--s-8);
}

.voice-agent__identity {
  min-width: 0;
  font-size: var(--fs-13);
  font-weight: 700;
}

.voice-agent__icon-button {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 20px;
}

.voice-agent__icon-button:hover,
.voice-agent__icon-button:focus-visible {
  color: var(--text);
  background: var(--panel2);
}

.voice-agent__wave {
  width: 38px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 999px;
  color: var(--accent);
}

.voice-agent__wave span {
  width: 3px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
}

.voice-agent[data-activity="listening"] {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--border));
  box-shadow: var(--shadow), 0 0 24px color-mix(in srgb, var(--accent) 38%, transparent);
}

.voice-agent[data-activity="listening"] .voice-agent__wave span {
  animation: voice-agent-listening 0.7s ease-in-out infinite alternate;
}

.voice-agent[data-activity="listening"] .voice-agent__wave span:nth-child(2),
.voice-agent[data-activity="listening"] .voice-agent__wave span:nth-child(4) {
  animation-delay: -0.35s;
}

.voice-agent[data-activity="listening"] .voice-agent__wave span:nth-child(3) {
  animation-delay: -0.55s;
}

.voice-agent[data-activity="processing"] .voice-agent__wave {
  animation: voice-agent-processing 0.85s ease-in-out infinite;
}

.voice-agent[data-state="question"] .voice-agent__wave,
.voice-agent[data-state="confirmation"] .voice-agent__wave {
  color: #f59e0b;
}

.voice-agent[data-state="success"] .voice-agent__wave {
  color: #22c55e;
}

.voice-agent[data-state="error"] .voice-agent__wave {
  color: var(--danger-text);
}

.voice-agent__status {
  min-height: 20px;
  color: var(--muted);
  font-size: var(--fs-13);
  line-height: 1.4;
}

.voice-agent__activity {
  min-height: 20px;
  color: var(--accent);
  font-size: var(--fs-13);
  line-height: 1.4;
}

.voice-agent__activity[hidden] {
  display: none;
}

.voice-agent__confirmation {
  display: grid;
  gap: var(--s-10);
  padding: var(--s-10);
  border: 1px solid var(--border);
  border-radius: var(--radius-8);
  background: var(--panel2);
}

.voice-agent__confirmation[hidden],
.voice-agent__controls [hidden],
.voice-agent__continue[hidden] {
  display: none;
}

.voice-agent__summary {
  overflow-wrap: anywhere;
  line-height: 1.4;
}

.voice-agent__confirmation-actions {
  justify-content: flex-end;
}

.voice-agent__controls {
  flex-wrap: wrap;
}

.voice-agent__continue {
  margin-top: 0;
}

@keyframes voice-agent-listening {
  from { transform: scaleY(1); }
  to { transform: scaleY(3.6); }
}

@keyframes voice-agent-processing {
  0%, 100% { transform: translateX(-3px); opacity: 0.55; }
  50% { transform: translateX(3px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .voice-agent[data-activity="listening"] .voice-agent__wave span,
  .voice-agent[data-activity="processing"] .voice-agent__wave {
    animation: none;
  }

  .voice-agent[data-activity="listening"] .voice-agent__wave span:nth-child(2),
  .voice-agent[data-activity="listening"] .voice-agent__wave span:nth-child(4) {
    transform: scaleY(2.2);
  }
}

.voice-command {
  gap: var(--s-14);
}

.voice-command__tabs {
  display: inline-flex;
  align-self: flex-start;
  border: 1px solid var(--border);
  border-radius: var(--radius-8);
  overflow: hidden;
}

.voice-command__tab {
  min-height: 36px;
  padding: var(--s-8) 14px;
  border: 0;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
}

.voice-command__tab:last-child {
  border-right: 0;
}

.voice-command__tab--active {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--text);
}

.voice-command__speech,
.voice-command__review {
  display: flex;
  align-items: center;
  gap: var(--s-10);
  flex-wrap: wrap;
}

.voice-command__state {
  color: var(--muted);
  font-size: var(--fs-13);
}

.voice-command__transcript {
  min-height: 96px;
  resize: vertical;
  line-height: 1.45;
}

.voice-command__confirmation-policy {
  margin-top: calc(var(--s-8) * -1);
}

.voice-command__switch {
  display: inline-flex;
  align-items: center;
  gap: var(--s-10);
  color: var(--text);
  cursor: pointer;
  font-size: var(--fs-13);
}

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

.voice-command__switch-track {
  width: 42px;
  height: 24px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel2);
  display: inline-flex;
  align-items: center;
  padding: 2px;
  transition: background 0.15s ease, border-color 0.15s ease;
  flex: 0 0 auto;
}

.voice-command__switch-thumb {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--muted);
  transition: transform 0.15s ease, background 0.15s ease;
}

.voice-command__switch input:checked + .voice-command__switch-track {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  border-color: var(--accent);
}

.voice-command__switch input:checked + .voice-command__switch-track .voice-command__switch-thumb {
  transform: translateX(18px);
  background: var(--accent);
}

.voice-command__switch input:focus-visible + .voice-command__switch-track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.voice-command__status {
  min-height: 20px;
  color: var(--muted);
  font-size: var(--fs-13);
}

.voice-command__interpretation,
.voice-command__interpretation-proposal {
  border: 1px solid var(--border);
  border-radius: var(--radius-8);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  padding: var(--s-10) 12px;
}

.voice-command__interpretation-disclosure {
  margin: 0 0 var(--s-8);
  color: var(--muted);
  font-size: var(--fs-13);
  line-height: 1.45;
}

.voice-command__interpretation-actions {
  display: flex;
  gap: var(--s-8);
  flex-wrap: wrap;
  margin-top: var(--s-8);
}

.voice-command__interpretation-proposal dl {
  display: grid;
  gap: var(--s-10);
  margin: 0;
}

.voice-command__interpretation-proposal dl > div {
  display: grid;
  gap: var(--s-2);
}

.voice-command__interpretation-proposal dt {
  color: var(--muted);
  font-size: var(--fs-12);
  font-weight: 700;
}

.voice-command__interpretation-proposal dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.voice-command__summary {
  border: 1px solid var(--border);
  border-radius: var(--radius-8);
  background: rgba(255, 255, 255, 0.03);
  padding: var(--s-10) 12px;
  line-height: 1.45;
}

.voice-command__semantic-interaction {
  border: 1px solid var(--border);
  border-radius: var(--radius-8);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  padding: var(--s-10) 12px;
  line-height: 1.45;
}

.voice-command__disambiguation {
  border: 1px solid var(--border);
  border-radius: var(--radius-8);
  background: rgba(255, 255, 255, 0.03);
  padding: var(--s-10) 12px;
  line-height: 1.45;
}

.voice-command__disambiguation-title {
  font-weight: 700;
  margin-bottom: var(--s-8);
}

.voice-command__candidate-list {
  display: grid;
  gap: var(--s-6);
}

.voice-command__candidate {
  width: 100%;
  min-height: 36px;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius-8);
  background: var(--panel2);
  color: var(--text);
  padding: var(--s-8) 10px;
  cursor: pointer;
}

.voice-command__candidate:hover,
.voice-command__candidate:focus-visible {
  border-color: var(--accent);
}

.voice-command__summary[hidden],
.voice-command__semantic-interaction[hidden],
.voice-command__disambiguation[hidden],
.voice-command__interpretation[hidden],
.voice-command__interpretation-proposal[hidden],
.voice-command__speech[hidden],
.voice-command__confirmation-policy[hidden] {
  display: none;
}

/* Edit Todo modal: Updated datetime in header, left of close button. */
/* Hide when no datetime (e.g. New Todo before save); show after todo is saved. */
.todo-dialog-updated[aria-hidden="true"] {
  display: none;
}
.todo-dialog-updated {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

/* Scoped under .dialog for specificity to beat the .muted utility class */
.dialog .todo-dialog-updated {
  font-size: var(--fs-12);
}

.todo-dialog-updated__label {
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .todo-dialog-updated {
    max-width: 200px;
  }
}

.dialog__title {
  font-weight: 900;
  font-size: var(--fs-16);
}

.dialog__content {
  padding: var(--s-16) 0;
  flex: 0 0 auto;
  /* Content grows naturally to fit tab content - no min-height constraint */
}

.dialog__footer {
  display: flex;
  align-items: center;
  gap: var(--s-10);
  margin-top: var(--s-4);
  flex-wrap: wrap;
}

/* === Ticket 10: Taiga lightboxes (confirm, prompt, bulk edit, transition, members) === */
/* Opt-in via .dialog--lightbox so the card and settings dialogs keep their own layouts.
   Taiga: white panel on the dark-grey wash (.dialog::backdrop), centred plain title, bare × top-right,
   centred actions. */
.dialog--lightbox {
  width: min(600px, calc(100vw - 24px));
}
.dialog--lightbox .dialog__form {
  padding: var(--s-24) var(--s-24) var(--s-20);
}
.dialog--lightbox .dialog__header {
  position: relative;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-4);
  padding-inline: var(--s-40);
  text-align: center;
}
.dialog--lightbox .dialog__title {
  font-size: var(--page-title-size, 22.4px);
  font-weight: 400;
  line-height: 1.3;
  color: var(--text);
}
.dialog--lightbox .dialog__header > button:last-child {
  position: absolute;
  top: calc(-1 * var(--s-8));
  inset-inline-end: calc(-1 * var(--s-12));
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-18, 18px);
  line-height: 1;
}
.dialog--lightbox .dialog__header > button:last-child:hover {
  color: var(--text);
}
.dialog--lightbox .dialog__header > button:last-child:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.dialog--lightbox .dialog__footer {
  justify-content: center;
  margin-top: var(--s-8);
}
.dialog--lightbox .dialog__footer .spacer {
  display: none;
}
.dialog--lightbox .dialog__footer .btn {
  min-width: 120px;
  min-height: var(--toolbar-control-h, 32px);
}

/* Members dialog = Taiga Team page: left filter panel (role list + name search) beside the member list. */
.members-dialog.dialog {
  width: min(960px, calc(100vw - 48px));
}
.members-dialog .dialog__form {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--s-20) 0 0;
  gap: 0;
}
.members-dialog .dialog__header {
  padding: 0 48px var(--s-16);
  border-bottom: 1px solid var(--border);
}
.members-dialog .dialog__header > button:last-child {
  top: calc(-1 * var(--s-12));
  inset-inline-end: var(--s-8);
}
#membersDialogProjectLabel {
  font-size: var(--fs-14);
}
.members-dialog__body {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.members-filter {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  padding: var(--s-16);
  background: var(--side-panel-bg, var(--panel2));
  overflow-y: auto;
}
.members-filter__title,
.members-main__title {
  margin: 0;
  font-size: var(--page-title-size, 22.4px);
  font-weight: 500;
  color: var(--accent-title);
}
.members-filter__search {
  width: 100%;
}
.members-filter__roles {
  display: flex;
  flex-direction: column;
  margin: 0 calc(-1 * var(--s-16));
}
.members-filter__role {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  min-height: 48px;
  padding: 0 var(--s-16);
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-15);
  text-align: start;
  text-transform: uppercase;
  cursor: pointer;
}
.members-filter__role-label {
  flex: 1 1 auto;
  min-width: 0;
}
.members-filter__count {
  color: var(--muted);
  font-size: var(--fs-13);
}
.members-filter__role:hover {
  background: var(--panel);
}
.members-filter__role[aria-pressed="true"] {
  background: var(--panel);
  color: var(--accent);
  font-weight: 600;
}
.members-filter__role[aria-pressed="true"]::after {
  content: "›";
  font-size: var(--fs-18, 18px);
  line-height: 1;
}
.members-filter__role:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.members-main {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  padding: var(--s-16) var(--s-24);
  overflow-y: auto;
}
.members-main__subtitle {
  margin: 0 0 var(--s-8);
  font-size: var(--fs-16);
  font-weight: 600;
}
.members-main__note {
  padding: var(--s-12) 0;
}
.members-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.members-row {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  padding: var(--s-10) 0;
  border-bottom: 1px solid var(--border);
}
.members-row__avatar {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--panel2);
  color: var(--text);
  font-weight: 600;
}
.members-row__avatar .user-avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.members-row__who {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
  flex: 1 1 auto;
  min-width: 0;
}
.members-row__name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--accent);
  font-size: var(--fs-16);
  font-weight: 600;
}
.members-row__role {
  color: var(--muted);
  font-size: var(--fs-14);
}
.members-row__role-select.input {
  width: auto;
  min-width: 140px;
  min-height: 28px;
  padding-block: 0;
  font-size: var(--fs-14);
}
.members-row__actions {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  flex: 0 0 auto;
}
.members-tester {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  min-height: 24px;
  font-size: var(--fs-14);
  cursor: pointer;
}
.members-tester--flag {
  padding: 0 var(--s-8);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  cursor: default;
}
.members-add {
  padding-top: var(--s-12);
}
.members-add__fields {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--s-12);
}
.members-dialog .dialog__footer {
  margin: 0;
  padding: var(--s-12) var(--s-24);
  border-top: 1px solid var(--border);
}

@media (max-width: 767px) {
  .dialog--lightbox .dialog__header > button:last-child {
    min-width: 44px;
    min-height: 44px;
  }
  .dialog--lightbox .dialog__footer .btn {
    min-height: 44px;
    min-width: 0;
    font-size: var(--fs-14);
    padding-inline: var(--s-16);
  }
  .members-dialog.dialog {
    width: calc(100vw - 16px);
  }
  .members-dialog__body {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
  .members-filter,
  .members-main {
    overflow: visible;
  }
  .members-filter__title {
    display: none;
  }
  .members-filter__roles {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--s-4);
    margin: 0;
  }
  .members-filter__role {
    min-height: 44px;
    padding: 0 var(--s-12);
    border: 1px solid var(--border);
    border-radius: var(--radius);
  }
  .members-filter__role[aria-pressed="true"]::after {
    content: none;
  }
  .members-main {
    padding: var(--s-12) var(--s-16);
  }
  .members-row {
    flex-wrap: wrap;
  }
  .members-row__actions {
    flex-basis: 100%;
    padding-inline-start: 60px;
  }
  .members-row__actions .btn,
  .members-row__role-select.input,
  .members-tester {
    min-height: 44px;
  }
  .members-add__fields {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* === End ticket 10 lightboxes === */

/* === Ticket 33: owner manages roles (members dialog label + note) === */
.members-row__role-field {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
}
.members-row__role-label {
  color: var(--muted);
  font-size: var(--fs-13);
}
.members-owner-note {
  margin: 0 0 var(--s-8);
  padding: var(--s-8) var(--s-12);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel2);
  color: var(--text);
  font-size: var(--fs-13);
}
/* === End ticket 33 === */
/* === Ticket 34: Settings › Users system-role select (owner only) === */
.user-system-role {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.user-system-role__select.input {
  width: auto;
  min-width: 140px;
  min-height: 28px;
  padding-block: 0;
  font-size: var(--fs-14);
}
.user-system-role__select:focus-visible {
  outline: 2px solid var(--focus, currentColor);
  outline-offset: 2px;
}
.user-system-role__error {
  color: var(--danger);
  font-size: var(--fs-13);
}
.user-system-role__error:empty {
  display: none;
}
@media (max-width: 767px) {
  .user-system-role__select.input {
    min-height: 44px;
  }
}
/* === End ticket 34 === */

#todoDialog .dialog__footer #saveTodoBtn {
  margin-inline-start: auto;
}

/* Card dialog: "Created by <name>" and the date, right of the tags (Taiga user story). */
.todo-dialog-dates[aria-hidden="true"] {
  display: none;
}
.todo-dialog-dates {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--s-2);
  flex-shrink: 0;
  max-width: 50%;
  font-size: var(--fs-13);
  text-align: end;
}

.todo-dialog-createdby {
  color: var(--accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.todo-dialog-createdby:empty {
  display: none;
}

/* Share story button: visible only on mobile in Edit Todo modal */
.todo-share-btn {
  display: none;
}

@media (max-width: 620px) {
  .dialog {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  /* Todo modal: header + footer fixed; fields scroll (same idea as Settings .dialog__content). */
  /* Center without transform so Android Chrome can scroll #todoTitle to the caret. */
  #todoDialog.dialog {
    top: 0;
    right: 8px;
    bottom: 0;
    left: 8px;
    width: auto;
    margin: auto;
    transform: none;
    min-height: 0;
    overflow: hidden;
  }

  #todoDialog #todoTitle {
    touch-action: manipulation;
    padding-inline-end: 1.25rem;
  }

  #todoDialog .dialog__form {
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
  }

  #todoDialog .dialog__header {
    flex-shrink: 0;
  }

  #todoDialog .todo-dialog__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior-y: contain;
  }

  #todoDialog .dialog__footer {
    flex-shrink: 0;
  }

  .dialog__form {
    padding: var(--s-12);
  }

  .dialog__footer {
    gap: var(--s-3);
    flex-wrap: nowrap;
    overflow: hidden;
  }

  .dialog__footer .btn {
    font-size: var(--fs-11);
    padding: var(--s-6) 6px;
    white-space: nowrap;
    flex: 0 0 auto;
  }

  #todoDialog .dialog__footer #deleteTodoBtn,
  #todoDialog .dialog__footer #saveTodoBtn {
    font-size: var(--fs-14);
    font-weight: 700;
    padding: var(--s-10) 14px;
    min-height: 44px;
    flex-shrink: 0;
  }

  .dialog__footer .btn--small {
    padding: var(--s-6) 4px;
    font-size: var(--fs-10);
    min-width: var(--s-40);
  }


  .dialog__footer .spacer {
    flex: 0 1 8px;
    min-width: var(--s-4);
  }

  .todo-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: var(--s-40);
    margin-left: auto;
  }

  /* Reduce font sizes for project buttons in mobile view */
  .list__item .btn {
    font-size: var(--fs-13);
    padding: var(--s-8) 10px;
  }

  .list__item .btn--small {
    font-size: var(--fs-11);
    padding: var(--s-5) var(--s-8);
  }

}

/* ============================================
   SETTINGS MODAL
   ============================================ */

.settings-section {
  margin-bottom: var(--s-24);
}

.settings-agenda-name-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s-12);
}

.settings-agenda-name-field {
  display: flex;
  flex-direction: column;
  flex: 0 0 67%;
  min-width: 0;
}

.settings-agenda-color-field {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 0;
  min-width: 0;
}

.settings-agenda-color-field .field__label {
  text-align: center;
}

.settings-section__title {
  font-weight: 800;
  font-size: var(--fs-16);
  margin-bottom: var(--s-6);
}

.settings-section__description {
  margin-bottom: var(--s-16);
  font-size: var(--fs-13);
}

.voice-speech-speed {
  margin: 12px 0 0 24px;
}

.voice-speech-speed__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.voice-speech-speed__heading output {
  font-weight: 700;
  white-space: nowrap;
}

.voice-speech-speed__slider {
  width: 100%;
  margin-top: 12px;
}

.voice-speech-speed__ticks {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.78rem;
}

.voice-speech-speed__ticks span {
  text-align: center;
}

.voice-speech-speed__ticks span:first-child {
  text-align: left;
}

.voice-speech-speed__ticks span:last-child {
  text-align: right;
}

.settings-push-vapid-notice {
  margin: 0 0 var(--s-16) 0;
  padding: var(--s-10) var(--s-12);
  font-size: var(--fs-13);
  line-height: 1.45;
  border-radius: var(--radius-8);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--muted);
}

.settings-section--push-pwa-disabled {
  opacity: 0.48;
  pointer-events: none;
  user-select: none;
}

.settings-tabs {
  display: flex;
  gap: var(--s-8);
  margin-bottom: var(--s-20);
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}

.settings-tab {
  padding: var(--s-8) 16px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-weight: 600;
  font-size: var(--fs-14);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -8px;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}

.settings-tab:hover {
  color: var(--text);
}

.settings-tab--active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.settings-tab-content {
  /* Content determines height naturally */
}

/* === Ticket 09: Settings sub-navigation (Taiga admin two-pane) === */
.settings-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.settings-nav {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--side-panel-bg);
  border-radius: 4px;
  padding: 8px 0;
}
.settings-nav__select {
  display: none;
}
.settings-nav .settings-tabs {
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
}
.settings-nav .settings-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 8px 16px;
  border: 0;
  border-radius: 0;
  color: var(--text);
  font-weight: 500;
  text-align: start;
  white-space: normal;
}
.settings-nav .settings-tab:hover {
  background: var(--panel);
}
.settings-nav .settings-tab--active {
  background: var(--panel);
  color: var(--accent);
  font-weight: 700;
}
.settings-nav .settings-tab--active::after {
  content: "›";
  font-size: 1.25em;
  line-height: 1;
}
[dir="rtl"] .settings-nav .settings-tab--active::after {
  content: "‹";
}
.settings-nav .settings-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.settings-main {
  min-width: 0;
}
.settings-main__title {
  margin: 0 0 16px;
  color: var(--accent-title);
  font-size: var(--page-title-size);
  font-weight: 500;
  line-height: 1.2;
}
@media (min-width: 768px) {
  /* Fixed height so switching sections does not resize the lightbox */
  #settingsDialog .dialog__content {
    height: min(72vh, 680px);
    max-height: none;
  }
}
@media (max-width: 767px) {
  .settings-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
  .settings-nav {
    padding: 0;
    background: var(--panel);
  }
  .settings-nav__select {
    display: block;
    width: 100%;
    min-height: 44px;
  }
  .settings-nav .settings-tabs {
    display: none;
  }
}
/* === End ticket 09 === */

.settings-tags-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-8);
}

/* === Ticket 30: tag names not squeezed when rename/disable are shown (maintainers) === */
.settings-tags-list:has(.settings-tag-rename) {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 26rem), 1fr));
}
.settings-tag-name {
  min-width: 4ch;
}
@media (max-width: 480px) {
  .settings-tag-item:has(.settings-tag-rename) {
    flex-wrap: wrap;
    border-radius: var(--radius-12);
  }
  .settings-tag-item:has(.settings-tag-rename) .settings-tag-name {
    flex: 1 1 100%;
  }
}
/* === End ticket 30 === */

.settings-tag-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  padding: var(--s-6) 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  min-width: 0;
}

.settings-tag-name {
  font-weight: 500;
  font-size: var(--fs-13);
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-tag-color-controls {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-shrink: 0;
}

.settings-color-picker {
  width: var(--s-24);
  height: var(--s-24);
  border: 1px solid var(--border);
  border-radius: var(--radius-6);
  cursor: pointer;
  background: var(--bg);
  padding: var(--s-1);
  flex-shrink: 0;
}

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

.settings-color-picker::-webkit-color-swatch {
  border: 1px solid var(--border);
  border-radius: var(--radius-5);
}

.settings-tag-item .btn--small {
  padding: var(--s-4) 8px;
  font-size: var(--fs-11);
  min-width: auto;
}

.settings-tag-item .settings-color-clear {
  padding: var(--s-4) 6px;
}

.settings-tag-item .settings-tag-delete {
  padding: var(--s-4) 6px;
  min-width: var(--s-24);
  width: var(--s-24);
  height: var(--s-24);
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-tag-item[data-tag-disabled] .settings-tag-name {
  opacity: 0.7;
}

.settings-tag-disabled {
  font-weight: 400;
  font-size: var(--fs-11);
}

/* === Ticket 35: 44px tap targets in Settings tag rows on phones === */
@media (max-width: 767px) {
  .settings-tag-item .btn--small,
  .settings-tag-item .settings-tag-delete,
  .settings-tag-item .settings-color-picker {
    min-width: 44px;
    min-height: 44px;
  }
  .settings-tag-item .settings-tag-delete,
  .settings-tag-item .settings-color-picker {
    width: 44px;
    height: 44px;
  }
}
/* === End ticket 35 === */

.settings-kv {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  margin-top: var(--s-10);
}

.users-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--s-12);
}

.users-table th {
  text-align: left;
  padding: var(--s-8) 12px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: var(--fs-13);
  color: var(--muted);
}

.users-table td {
  padding: var(--s-12);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

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

.users-table__actions {
  display: flex;
  gap: var(--s-8);
  align-items: center;
}

.settings-kv__row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--s-12);
  align-items: center;
}

.theme-selector {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}

.theme-option {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  padding: var(--s-12);
  border: 1px solid var(--border);
  border-radius: var(--radius-12);
  background: var(--bg);
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}

.theme-option:hover {
  border-color: var(--accent);
  background: var(--panel);
}

.theme-option input[type="radio"] {
  margin: 0;
  cursor: pointer;
}

.theme-option label {
  flex: 1;
  cursor: pointer;
  font-weight: 500;
}

.theme-option__description {
  font-size: var(--fs-12);
  color: var(--muted);
  margin-top: var(--s-2);
}

.theme-selector--inline {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-8);
}

.theme-option.theme-option--inline {
  padding: var(--s-8) var(--s-12);
  flex-direction: row;
  gap: var(--s-8);
}

.theme-option--inline .theme-option__description {
  display: none;
}

.keybinding-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
  margin-top: var(--s-12);
  max-width: 100%;
}

@media (min-width: 560px) {
  .keybinding-list {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--s-24);
    row-gap: var(--s-8);
  }
}

.keybinding-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-12);
  min-width: 0;
}

.keybinding-row__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: var(--fs-14);
}

.keybinding-capture.keybinding-capture--listening {
  outline: 2px solid var(--accent, #6366f1);
  outline-offset: 2px;
}

.keybinding-capture.keybinding-capture--error {
  outline: 2px solid var(--danger, #dc2626);
  outline-offset: 2px;
}

.settings-section--keybindings {
  margin-top: var(--s-24);
}

.settings-backup-section {
  display: flex;
  flex-direction: column;
  gap: var(--s-32);
}

.settings-backup-export,
.settings-backup-import {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
}

.settings-backup-preview {
  font-size: var(--fs-13);
  line-height: 1.6;
}

.settings-backup-confirmation {
  padding: var(--s-8) 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-8);
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-14);
  transition: border-color 0.2s;
}

.settings-backup-confirmation:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
}

.settings-backup-confirmation:invalid {
  border-color: var(--danger);
}

.field-error {
  margin-top: var(--s-6);
  font-size: var(--fs-13);
  color: var(--danger-text);
}

.settings-backup-warnings {
  font-size: var(--fs-13);
  line-height: 1.6;
  color: var(--muted);
}

#backupFileInput {
  padding: var(--s-8);
  border: 1px solid var(--border);
  border-radius: var(--radius-8);
  background: var(--bg);
  color: var(--text);
  font-size: var(--fs-14);
  cursor: pointer;
}

#backupFileInput:hover {
  border-color: var(--accent);
}

input[type="radio"][name="importMode"] {
  margin-right: var(--s-8);
  cursor: pointer;
}

label:has(input[type="radio"][name="importMode"]) {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: var(--s-4) 0;
}

label:has(input[type="radio"][name="importMode"]:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .settings-tags-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .settings-tags-list {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   TAGS & CHIPS
   ============================================ */

.tag-autocomplete-suggestion {
  color: var(--muted);
  opacity: 0.6;
  pointer-events: none;
  user-select: none;
  z-index: 1000;
  line-height: 1.5;
}

/* Mobile: no Tab key; allow tap on suggestion to accept (same as Tab on desktop) */
@media (max-width: 768px) {
  .tag-autocomplete-suggestion {
    pointer-events: auto;
    cursor: pointer;
  }
}

.tags-input-container {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}

.tags-input-row {
  display: flex;
  align-items: center;
  gap: var(--s-8);
}

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

.tags-add-btn {
  display: none;
  white-space: nowrap;
  padding: var(--s-8) 12px;
  height: var(--s-38);
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.tags-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6);
  min-height: var(--s-32);
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}

.tags-input {
  margin-top: 0;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-6);
  background: var(--panel);
  font-size: var(--fs-13);
  line-height: 1.4;
}

.tag-chip-remove {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: var(--fs-18);
  line-height: 1;
  padding: 0;
  margin: 0;
  width: var(--s-16);
  height: var(--s-16);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.tag-chip-remove:hover {
  opacity: 1;
}

/* Link chip button: inherit chip look so it’s not default white/black in dark mode */
.tag-chip-link {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}

/* === Ticket 19: link type ("blocks", "blocked by" …) leads each linked-story chip. === */
.tag-chip-link__type {
  font-weight: 600;
}

/* === Ticket 29: tag picker (project tags as toggles; create is maintainer-only) === */
.tag-picker {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  flex: 1 1 100%;
  min-width: 0;
}
.tag-picker[hidden] {
  display: none;
}
.tag-picker__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6);
  max-height: 168px;
  overflow-y: auto;
}
.tag-pick {
  display: inline-flex;
  align-items: center;
  gap: var(--s-6);
  min-height: 28px;
  padding: var(--s-4) 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-13);
  line-height: 1.3;
  cursor: pointer;
}
.tag-pick::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tag-pick-color, var(--muted));
  flex: none;
}
.tag-pick:hover {
  border-color: var(--accent);
}
.tag-pick[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
  font-weight: 600;
}
.tag-pick[aria-pressed="true"]::after {
  content: "✓";
  color: var(--accent);
}
.tag-pick:focus-visible,
.tag-picker__create-btn:focus-visible,
.tag-picker__color:focus-visible,
.tag-picker__more:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.tag-picker__more {
  align-self: flex-start;
}
.tag-picker__create {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  flex-wrap: wrap;
}
.tag-picker__color {
  width: 36px;
  height: 28px;
  padding: 0 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-6);
  background: var(--panel);
  cursor: pointer;
}
.tag-picker__hint {
  margin: 0;
  font-size: var(--fs-13);
}
@media (min-width: 768px) {
  .tags-input-container:has(> .tag-picker) {
    flex-wrap: wrap;
  }
}
@media (max-width: 767px) {
  .tag-pick,
  .tag-picker__color,
  .tag-picker__create-btn,
  .tag-picker__more {
    min-height: 44px;
  }
}
.settings-tag-create {
  grid-column: 1 / -1; /* full row above the tag grid */
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  margin-bottom: var(--s-4);
  max-width: 480px;
}
.settings-tag-create__label {
  font-size: var(--fs-13);
  font-weight: 600;
}
.settings-tag-create__row {
  display: flex;
  align-items: center;
  gap: var(--s-8);
}
.settings-tag-create__row .input {
  flex: 1 1 auto;
  min-width: 0;
}
.settings-tag-create__row .btn {
  white-space: nowrap;
}
.settings-tag-create__color {
  width: 44px;
  height: 36px;
  padding: 0 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-6);
  background: var(--panel);
  cursor: pointer;
}

/* Dark theme: a raw tag/priority colour as text is unreadable when the colour is dark.
   Lighten the text toward the foreground and deepen the tint; hue stays recognisable. */
:root:not([data-theme="light"]) [style*="--tag-c"] {
  color: color-mix(in srgb, var(--tag-c) 45%, #eceff4) !important;
  background: color-mix(in srgb, var(--tag-c) 28%, transparent) !important;
  border-color: color-mix(in srgb, var(--tag-c) 70%, #eceff4) !important;
}

.tag {
  font-size: var(--fs-12);
  color: var(--muted);
  border: 1px solid var(--border);
  background: var(--bg);
  padding: var(--s-2) var(--s-8);
  border-radius: 999px;
}

@media (min-width: 768px) {
  .tags-input-container {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--s-12);
  }

  .tags-input {
    flex: 0 0 200px;
    min-width: 150px;
  }

  .tags-chips {
    flex: 1;
    min-width: 0;
  }
}

@media (max-width: 767px) {
  .tags-add-btn {
    display: inline-flex;
  }
}

/* ============================================
   LIST & PROJECT VIEWS
   ============================================ */

.list {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}

.list__item {
  display: flex;
  align-items: center;
  gap: var(--s-10);
  padding: var(--s-10);
  border: 1px solid var(--border);
  border-radius: var(--radius-12);
  background: var(--bg);
  cursor: pointer;
  transition: background-color 0.2s;
}

.list__item:hover {
  background: var(--panel);
}

.list__item--clickable {
  cursor: pointer;
}

.list__item--clickable:hover {
  background: var(--panel);
}

.list__item-name {
  color: var(--project-name-color);
  font-weight: 500;
  flex: 1;
}

/* === Ticket 08: Dashboard (Taiga home: teal title, white panels, grey section bars, Taiga table) === */
.dashboard-page__title {
  margin: 0 0 var(--s-16);
  color: var(--accent-title);
  font-size: var(--page-title-size);
  font-weight: 500;
  line-height: 1.3;
}

.dashboard-content {
  display: flex;
  flex-direction: column;
  gap: var(--s-16);
}

.dashboard-panel {
  min-width: 0;
  background: var(--content-bg);
  border: 1px solid var(--border);
  border-radius: 3px;
}

.dashboard-panel__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-8);
  min-height: 40px;
  margin: 0;
  padding: var(--s-6) var(--s-16);
  background: var(--section-bar-bg);
  color: var(--text);
}

.dashboard-panel__title {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-16);
  font-weight: 600;
  line-height: 1.4;
}

.dashboard-panel__empty {
  margin: 0;
  padding: var(--s-16);
  font-size: var(--fs-14);
}

.dashboard-sort {
  display: flex;
  align-items: center;
  gap: var(--s-8);
}

.dashboard-sort__label {
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
}

.dashboard-sort__select {
  height: var(--toolbar-control-h);
  min-width: 180px;
  max-width: 100%;
  padding: 0 var(--s-8);
  font-size: var(--fs-14);
  border-radius: 3px;
}

/* Taiga table: bold header row, 1px separators, teal #id. */
.dashboard-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-14);
}

.dashboard-table thead th {
  padding: var(--s-10) var(--s-16) var(--s-6);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
  text-align: start;
  white-space: nowrap;
}

.dashboard-table td {
  padding: var(--s-6) var(--s-16);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.dashboard-table__status,
.dashboard-table__updated {
  width: 1%;
}

.dashboard-project-group__head th {
  padding: var(--s-16) var(--s-16) var(--s-4);
  text-align: start;
  font-weight: 600;
}

.dashboard-project-group__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  min-height: 24px;
  max-width: 100%;
  color: var(--accent);
  font-size: var(--fs-15);
  text-decoration: none;
}

.dashboard-project-group__tab:hover .dashboard-project-group__tab-name {
  text-decoration: underline;
}

.dashboard-project-group__tab-img {
  width: 24px;
  height: 24px;
  border-radius: 3px;
  object-fit: cover;
  flex-shrink: 0;
}

.dashboard-project-group__tab-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-project-group__section td {
  padding: var(--s-6) var(--s-16) var(--s-4);
  border-bottom: 1px solid var(--border);
}

/* Sprint sub-heading with a status-style square: current sprint green, other sprint yellow, unscheduled grey. */
.dashboard-project-group__tab--sprint {
  display: inline-flex;
  align-items: center;
  gap: var(--s-6);
  color: var(--muted);
  font-size: var(--fs-13);
  font-weight: 600;
}

.dashboard-project-group__tab--sprint::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 1px;
  background: var(--status-backlog);
  flex-shrink: 0;
}

.dashboard-project-group__section[data-sprint-section="active"] .dashboard-project-group__tab--sprint::before {
  background: var(--status-done);
}

.dashboard-project-group__section[data-sprint-section="sprint"] .dashboard-project-group__tab--sprint::before {
  background: var(--status-testing);
}

.dashboard-todo {
  cursor: pointer;
}

.dashboard-todo__card {
  min-width: 0;
}

.dashboard-todo__link {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-8);
  min-height: 24px;
  padding: var(--s-2) 0;
  color: var(--text);
  text-decoration: none;
  vertical-align: middle;
}

.dashboard-todo__link .dashboard-todo__id {
  color: var(--accent);
}

.dashboard-todo__title {
  font-weight: 400;
  overflow-wrap: anywhere;
}

.dashboard-todo:hover .dashboard-todo__title,
.dashboard-todo__link:focus-visible .dashboard-todo__title {
  color: var(--accent);
  text-decoration: underline;
}

.dashboard-todo__link:focus-visible,
.dashboard-project-group__tab:focus-visible,
.dashboard-stats__wip-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.dashboard-todo__points {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-inline-start: var(--s-6);
  padding: 0 var(--s-6);
  border-radius: 999px;
  background: var(--section-bar-bg);
  color: var(--text);
  font-size: var(--fs-12);
  font-weight: 600;
  vertical-align: middle;
}

.dashboard-todo__project {
  color: var(--text);
  white-space: nowrap;
}

.dashboard-status-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  color: var(--text);
  white-space: nowrap;
}

.dashboard-status-chip__square {
  width: 10px;
  height: 10px;
  border-radius: 1px;
  flex-shrink: 0;
}

.dashboard-todo__updated {
  color: var(--muted);
  font-size: var(--fs-13);
  white-space: nowrap;
}

/* Lazy-load: phones keep the ▼ affordance of the board lanes; larger screens the text button. */
.dashboard-load-more {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--s-12);
}

.dashboard-load-more__desktop {
  display: none;
}

.dashboard-load-more__mobile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
  font-size: var(--fs-13);
  color: var(--muted);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.dashboard-load-more__mobile:active {
  opacity: 0.6;
}

.dashboard-load-more__mobile[data-loading="1"] {
  opacity: 0.5;
  pointer-events: none;
}

@media (min-width: 621px) {
  .dashboard-load-more__desktop {
    display: inline-flex;
  }

  .dashboard-load-more__mobile {
    display: none;
  }
}

/* Stats column: one white panel per group, grey section bar as its title. */
.dashboard-stats {
  display: flex;
  flex-direction: column;
  gap: var(--s-16);
  min-width: 0;
}

.dashboard-stats__section-card {
  display: flex;
  flex-direction: column;
  padding: 0 var(--s-16);
}

.dashboard-stats__row {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  padding: var(--s-12) 0;
  border-bottom: 1px solid var(--border);
}

.dashboard-stats__row:last-child {
  border-bottom: none;
}

.dashboard-stats__label {
  font-size: var(--fs-12);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* Split figures (assigned, WIP) as a small table: name as caption, one equal column per part. */
.dashboard-stats__table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.dashboard-stats__table caption { text-align: start; padding-bottom: var(--s-4); }
.dashboard-stats__table thead th { font-size: var(--fs-12); font-weight: 500; color: var(--muted); text-align: start; padding: 0 var(--s-8) 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashboard-stats__cell { text-align: start; padding: 0 var(--s-8) 0 0; font-size: var(--fs-18, 18px); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.dashboard-stats__table .dashboard-stats__value--total { color: var(--text); }
.dashboard-stats__table thead .dashboard-stats__value--total { color: var(--muted); }

/* Dashboard summary: the four numbers people look for first. */
.dashboard-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-12); margin: 0 0 var(--s-16); }
.dashboard-summary__tile { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-6, 6px); padding: var(--s-12) var(--s-16); border-top: 3px solid var(--muted); min-width: 0; }
.dashboard-summary__tile--doing { border-top-color: var(--status-doing, #e47c40); }
.dashboard-summary__tile--testing { border-top-color: var(--status-testing, #e4ce40); }
.dashboard-summary__tile--done { border-top-color: var(--status-done, #a8e440); }
.dashboard-summary__value { font-size: 2rem; font-weight: 700; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.dashboard-summary__label { margin-top: 4px; font-size: var(--fs-14); font-weight: 600; color: var(--text); }
.dashboard-summary__hint { font-size: var(--fs-12); color: var(--muted); }
@media (max-width: 767px) {
  .dashboard-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); }
  .dashboard-summary__value { font-size: 1.6rem; }
}

.dashboard-stats__value {
  font-size: var(--fs-16);
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}

.dashboard-stats__value--num {
  font-size: var(--fs-24);
  font-weight: 500;
  line-height: 1.1;
}

.dashboard-stats__value--assigned {
  font-size: var(--fs-18);
}

/* ASSIGNED total = purple; WIP In progress = green, Testing = blue (dark values; light below). */
.dashboard-stats__wip-in-progress {
  color: rgba(134, 239, 172, 0.95);
}

.dashboard-stats__wip-testing {
  color: rgba(147, 197, 253, 0.95);
}

.dashboard-stats__value--total {
  color: rgba(216, 180, 254, 0.95);
}

[data-theme="light"] .dashboard-stats__wip-in-progress {
  color: #15803d;
}

[data-theme="light"] .dashboard-stats__wip-testing {
  color: #1d4ed8;
}

[data-theme="light"] .dashboard-stats__value--total {
  color: #7c3aed;
}

.dashboard-stats__progress-wrap {
  width: 100%;
  height: 8px;
  background: var(--section-bar-bg);
  border-radius: 999px;
  overflow: hidden;
}

.dashboard-stats__progress-bar {
  height: 100%;
  width: var(--progress, 0%);
  background: var(--accent);
  border-radius: 999px;
}

/* Weekly throughput as a table: week · done · a horizontal bar scaled to the best week. */
.dashboard-throughput__cell { width: 50%; }
.dashboard-throughput__bar {
  width: var(--bar-height, 0%);
  min-width: 2px;
  height: 8px;
  background: var(--accent);
  border-radius: 2px;
}

/* Small stat tables (sprint progress, throughput): row name left, figures right-aligned. */
.dashboard-stats__grid { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.dashboard-stats__grid thead th { font-size: var(--fs-12); font-weight: 500; color: var(--muted); text-align: end; padding: 0 0 4px var(--s-8); white-space: nowrap; }
.dashboard-stats__grid thead th:first-child { text-align: start; padding-inline-start: 0; }
.dashboard-stats__grid tbody th { text-align: start; font-weight: 500; font-size: var(--fs-13); color: var(--text); padding: 4px 0; white-space: nowrap; }
.dashboard-stats__grid .dashboard-stats__cell { text-align: end; padding: 4px 0 4px var(--s-8); font-size: var(--fs-16); }
.dashboard-stats__pct { width: 38%; }
.dashboard-stats__pct .dashboard-stats__progress-wrap { margin-top: 4px; }
.dashboard-throughput .dashboard-throughput__cell { padding: 4px 0 4px var(--s-12); }

.dashboard-stats__wip-link {
  align-self: flex-start;
  color: var(--accent);
  font-size: var(--fs-14);
  text-decoration: none;
}

.dashboard-stats__wip-link:hover {
  text-decoration: underline;
}

.dashboard-stats__row--wip-warning .dashboard-stats__wip-link {
  color: var(--warning, #f59e0b);
}

[data-theme="light"] .dashboard-stats__row--wip-warning .dashboard-stats__wip-link {
  color: #b45309;
}

/* Ticket 37: two columns only once the table has room (sidebar included); below
   that the stats panels sit side by side under "My work". On wide screens the
   "my work lately" panel moves up into the left column, beside the stats, so a
   short list leaves no dead zone (DOM order unchanged: display: contents). */
@media (min-width: 768px) { .dashboard-todo__card { min-width: 9rem; } }
.dashboard-table .dashboard-todo__updated { white-space: normal; }
.dashboard-todo__updated span { white-space: nowrap; }

@media (max-width: 1199px) {
  /* The pill cap follows the table, not the viewport (the sidebar takes 200px). */
  .dashboard-table .dashboard-todo__status .dashboard-todo__test-state { max-width: min(10rem, 34vw); }
}

@media (max-width: 767px) {
  /* Phones: the title column needs the room; the full text is in the title tooltip. */
  .dashboard-table .dashboard-todo__status .dashboard-todo__test-state { max-width: 7rem; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  /* Tablet: the project is the group head row already, as on phones. */
  .dashboard-table__project,
  .dashboard-todo__project { display: none; }
}
.dashboard-stats__empty { font-size: var(--fs-14); }

@media (min-width: 768px) and (max-width: 1199px) {
  .dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    align-items: start;
  }
}

@media (min-width: 1200px) {
  .dashboard-page {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: var(--s-24);
    align-items: start;
  }
  .dashboard-page__title, .dashboard-summary { grid-column: 1 / -1; }
  .dashboard-content { display: contents; }
  .dashboard-mywork { grid-column: 1; grid-row: 3; }
  .dashboard-stats { grid-column: 2; grid-row: 3 / 6; }
  .dashboard-page > .dashboard-worksum { grid-column: 1; grid-row: 4; margin-top: var(--s-16); }
}

@media (max-width: 767px) {
  .dashboard-panel__bar {
    padding-inline: var(--s-12);
  }

  .dashboard-sort__select {
    min-width: 0;
    min-height: 44px;
    max-width: min(160px, 46vw);
  }

  /* The project is the group head row; phones drop the repeated column. */
  .dashboard-table__project,
  .dashboard-todo__project {
    display: none;
  }

  .dashboard-table thead th,
  .dashboard-table td,
  .dashboard-project-group__head th {
    padding-inline: var(--s-12) var(--s-8);
  }

  .dashboard-todo__link,
  .dashboard-project-group__tab,
  .dashboard-stats__wip-link {
    min-height: 44px;
    align-items: center;
  }

  .dashboard-stats__wip-link {
    display: inline-flex;
  }

  .dashboard-todo__updated {
    white-space: normal;
    font-size: var(--fs-12);
  }
}
/* === end Ticket 08 === */

/* === Ticket 17: My work summary panel (the caller's own slice of the Work overview) === */
.dashboard-worksum {
  margin-top: var(--s-24);
}

.dashboard-worksum__range {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-8);
}

.dashboard-worksum__range label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-6);
  color: var(--text);
  font-size: var(--fs-13);
  font-weight: 600;
  white-space: nowrap;
}

.dashboard-worksum__range label[hidden] {
  display: none;
}

.dashboard-worksum__range select,
.dashboard-worksum__range input {
  height: var(--toolbar-control-h);
  padding: 0 var(--s-8);
  font-size: var(--fs-14);
  font-weight: 400;
  border-radius: 3px;
}

.dashboard-worksum__state {
  margin: 0;
  padding: var(--s-16);
  font-size: var(--fs-14);
}

.dashboard-worksum__totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-8);
  margin: 0;
  padding: var(--s-16);
  border-bottom: 1px solid var(--border);
}

.dashboard-worksum__figure dt {
  color: var(--muted);
  font-size: var(--fs-13);
}

.dashboard-worksum__figure dd {
  margin: var(--s-4) 0 0;
  color: var(--text);
  font-size: var(--fs-20);
  font-weight: 600;
}

.dashboard-worksum__parts {
  display: grid;
}

.dashboard-worksum__part {
  min-width: 0;
  padding: var(--s-12) 0 0;
}

.dashboard-worksum__part h3 {
  margin: 0;
  padding: 0 var(--s-16);
  color: var(--text);
  font-size: var(--fs-14);
  font-weight: 600;
}

.dashboard-worksum__part-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-8);
  padding-inline-end: var(--s-16);
}

.dashboard-worksum__sorts {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.dashboard-worksum__sort {
  min-height: 24px;
  padding: 2px var(--s-10);
  border: 0;
  background: var(--content-bg);
  color: var(--text);
  font-size: var(--fs-13);
  cursor: pointer;
}

/* Pressed: bar colour + bold + an accent underline, so it is not colour alone. */
.dashboard-worksum__sort[aria-pressed="true"] {
  background: var(--section-bar-bg);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--accent);
}

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

.dashboard-worksum__note {
  margin: var(--s-4) 0 var(--s-8);
  padding: 0 var(--s-16);
}

.dashboard-worksum__table tbody th {
  padding: var(--s-6) var(--s-16);
  border-bottom: 1px solid var(--border);
  font-weight: 500;
  text-align: start;
  overflow-wrap: break-word;
}

.dashboard-worksum__table td {
  white-space: nowrap;
}

.dashboard-worksum__cards { margin-top: var(--s-8); }
.dashboard-worksum__cards tbody th { overflow-wrap: anywhere; }
.dashboard-worksum__cards .dashboard-worksum__project { color: var(--muted); white-space: normal; }
.dashboard-worksum__cards .dashboard-worksum__link { text-align: end; }

.dashboard-worksum__card .dashboard-todo__id {
  color: var(--accent);
  font-weight: 600;
}

.dashboard-worksum__timeline {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 24px;
  color: var(--accent);
  font-size: var(--fs-13);
}

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

/* Ticket 37: two parts side by side only when the panel is wide enough for the
   tag table (from 1200px it shares the row with the stats column). */
@media (min-width: 1600px) {
  .dashboard-worksum__parts {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .dashboard-worksum__part + .dashboard-worksum__part {
    border-inline-start: 1px solid var(--border);
  }
}

@media (max-width: 767px) {
  .dashboard-worksum__range {
    width: 100%;
  }

  .dashboard-worksum__range select,
  .dashboard-worksum__range input,
  .dashboard-worksum__sort,
  .dashboard-worksum__timeline {
    min-height: 44px;
  }

  /* Ticket 37: a duration never breaks inside ("1 ชั่วโมง 38 นาที"); figures wrap as whole units. */
  .dashboard-worksum__totals {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-12) var(--s-24);
    padding: var(--s-12);
  }

  .dashboard-worksum__figure { flex: 1 1 auto; }

  .dashboard-worksum__figure dd {
    font-size: var(--fs-16);
    white-space: nowrap;
  }

  /* Tag table as stacked rows: tag name, then each figure under its column name. */
  .dashboard-worksum__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .dashboard-worksum__table tbody tr {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-4) var(--s-16);
    padding: var(--s-8) var(--s-12);
    border-bottom: 1px solid var(--border);
  }

  .dashboard-worksum__table tbody th {
    flex: 1 0 100%;
    padding: 0;
    border: 0;
  }

  .dashboard-worksum__table td {
    padding: 0;
    border: 0;
    white-space: nowrap;
  }

  .dashboard-worksum__table td::before {
    content: attr(data-label);
    display: block;
    color: var(--muted);
    font-size: var(--fs-12);
  }

  .dashboard-worksum__cards td.dashboard-worksum__link { margin-inline-start: auto; align-self: flex-end; }
  .dashboard-worksum__cards td.dashboard-worksum__link::before { content: none; }
}

/* Dashboard tables, easier to scan: each project is a tinted band, rows light up
   on hover, figures line up on the right and a zero fades to a dash. */
.dashboard-project-group__head th { background: var(--section-bar-bg); padding-block: var(--s-8); border-bottom: 1px solid var(--border); }
.dashboard-project-group__section td { padding-block: var(--s-4); background: color-mix(in srgb, var(--section-bar-bg) 40%, transparent); }
.dashboard-todo:hover td, .dashboard-worksum__table tbody tr:hover > * { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.dashboard-todo td { padding-block: var(--s-10); }
.dashboard-table .dashboard-todo__updated { white-space: nowrap; }
.dashboard-worksum__num { text-align: end; font-variant-numeric: tabular-nums; }
.dashboard-worksum__table thead th.dashboard-worksum__num { text-align: end; }
.dashboard-worksum__num.is-zero { color: var(--muted); }
.dashboard-worksum__table td:last-child { font-weight: 600; }
.dashboard-worksum__card .dashboard-worksum__timeline { display: inline; color: var(--text); font-size: inherit; text-decoration: none; }
.dashboard-worksum__card .dashboard-worksum__timeline:hover { color: var(--accent); text-decoration: underline; }
@media (max-width: 767px) {
  .dashboard-worksum__num, .dashboard-worksum__table thead th.dashboard-worksum__num { text-align: start; }
  .dashboard-table .dashboard-todo__updated { white-space: normal; }
  /* Phones: the date is enough; the title column gets the room. */
  .dashboard-todo__updated span + span { display: none; }
  .dashboard-table thead .dashboard-table__updated { white-space: normal; }
  /* Stacked rows as a 2×2 grid: every label sits in the same place on every row. */
  .dashboard-worksum__table tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-12); }
  .dashboard-worksum__table tbody th { grid-column: 1 / -1; }
}
/* === end Ticket 17 === */

.status-pill {
  display: inline-block;
  padding: var(--s-2) var(--s-8);
  border-radius: 999px;
  font-size: var(--fs-11);
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
}

.status-pill--backlog {
  background: #9CA3AF;
}

.status-pill--not_started {
  background: #F59E0B;
}

.status-pill--in_progress {
  background: #10B981;
}

.status-pill--testing {
  background: #3B82F6;
}

.status-pill--done {
  background: #EF4444;
}

/* Sprint state badges */
.status-pill--planned {
  background: #EA580C;
}

.status-pill--active {
  background: #10B981;
}

.status-pill--closed {
  background: #EF4444;
}

/* API token badges */
.status-pill--service {
  background: #6366F1;
}

.status-pill--revoked {
  background: #9CA3AF;
}

.api-tokens-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--s-12);
}

.api-tokens-table th {
  text-align: left;
  padding: var(--s-8) 12px;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  font-size: var(--fs-13);
  color: var(--muted);
}

.api-tokens-table td {
  padding: var(--s-12);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.api-tokens-table tbody tr:last-child td {
  border-bottom: none;
}

.api-tokens-create {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-12);
  margin-top: var(--s-12);
}

.api-tokens-create__name {
  flex: 1 1 220px;
}

.api-tokens-create__service {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  flex: 1 1 100%;
}

.settings-sprint-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-8) 0;
  border-bottom: 1px solid var(--border);
  gap: var(--s-12);
  min-height: 40px;
}

.settings-sprint-row:last-child {
  border-bottom: none;
}

.settings-sprint-row--editing {
  align-items: center;
}

.settings-sprint-row--editing .input {
  min-height: 32px;
}

@media (min-width: 768px) {
  .settings-sprint-row__action-placeholder {
    visibility: hidden;
    pointer-events: none;
  }
}

@media (max-width: 767px) {
  .settings-sprint-row__action-placeholder {
    display: none;
  }
  .settings-sprint-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-8);
  }
  .settings-sprint-row__actions {
    width: 100%;
  }
  .settings-sprint-row--editing .settings-sprint-edit-save-cancel {
    width: 100%;
    margin-top: var(--s-8);
  }

  .settings-create-sprint-form {
    flex-direction: column;
    align-items: stretch;
  }
  .settings-create-sprint-form__name {
    flex: none;
    width: 100%;
    min-width: 0;
  }
  .settings-create-sprint-form__dates {
    width: 100%;
    flex-wrap: wrap;
  }
  .settings-create-sprint-form__dates .field {
    flex: 1;
    min-width: 120px;
  }
  .settings-create-sprint-form__submit {
    display: flex;
    justify-content: center;
    width: 100%;
  }
}

/* === Ticket 21: every project listed (membership filter panel, role / "not a member" in the switcher) === */
.projects-layout .two-pane__main { padding: 0; }
.shell-switch__item { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-12); }
.shell-switch__role { flex: none; color: var(--muted); font-size: var(--fs-12); }
.shell-switch__item.is-active .shell-switch__role { color: inherit; }
/* Card dialog: readers (viewer, non-member) get no comment composer; its display:flex beat [hidden]. */
.todo-comments__composer[hidden] { display: none; }
/* === end Ticket 21 === */

/* === Ticket 03: Projects list (Taiga discover rows, white tiles; projects.ts) === */
.projects-page {
  padding: var(--s-24) var(--s-32);
}

.projects-page__head {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  margin-bottom: var(--s-16);
}

.projects-page__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  color: var(--accent-title);
  font-size: var(--page-title-size);
  font-weight: 500;
}

.projects-page .view-toggle-btn {
  display: grid;
  place-items: center;
  min-width: var(--toolbar-control-h);
  height: var(--toolbar-control-h);
  padding: 0;
  border-radius: var(--radius);
}

.projects-page .view-toggle-btn--active {
  border-color: var(--accent);
  color: var(--accent);
}

.projects-page__create {
  margin: 0;
}

.projects-page__new {
  display: inline-flex;
  align-items: center;
  gap: var(--s-6);
  height: var(--toolbar-control-h);
  padding: 0 var(--s-14);
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--fs-14);
  white-space: nowrap;
}

.projects-page__new:hover:not(:disabled) {
  filter: brightness(1.08);
}

.projects-page__empty {
  padding: var(--s-16) 0;
}

/* List: 1px-separated rows with a 48px image, teal name and the role underneath. */
.projects-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}

.project-row,
.project-tile {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-8);
}

.project-row {
  border-bottom: 1px solid var(--border);
}

.project-row__link,
.project-tile__link {
  display: flex;
  align-items: center;
  gap: var(--s-16);
  flex: 1;
  min-width: 0;
  padding: var(--s-12) var(--s-4);
  color: var(--text);
  text-decoration: none;
  border-radius: var(--radius);
}

.project-row__img,
.project-tile__link .project-row__img {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  object-fit: cover;
}

.project-row__img--empty {
  display: grid;
  place-items: center;
  background: var(--section-bar-bg);
  color: var(--muted);
  font-size: var(--fs-20);
  font-weight: 600;
  text-transform: uppercase;
}

.project-row__text,
.project-tile__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.project-row__name,
.project-tile__name {
  overflow: hidden;
  color: var(--accent);
  font-size: var(--fs-16);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-row__role,
.project-tile .project-row__role {
  color: var(--muted);
  font-size: var(--fs-13);
}

.project-row__link:hover .project-row__name,
.project-tile__link:hover .project-tile__name {
  text-decoration: underline;
}

.project-row__link:focus-visible,
.project-tile__link:focus-visible,
.project-more__btn:focus-visible,
.project-more__item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Grid: white tiles. */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--s-16);
}

.project-tile {
  padding-right: var(--s-4);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.project-tile__link {
  padding: var(--s-16);
}

/* Row ⋮: disclosure with rename and (red, separated) delete. */
.project-more {
  position: relative;
  flex: none;
}

.project-more__btn {
  display: grid;
  place-items: center;
  width: var(--toolbar-control-h);
  height: var(--toolbar-control-h);
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--muted);
  font-size: var(--fs-18);
  cursor: pointer;
}

.project-more__btn:hover,
.project-more__btn[aria-expanded="true"] {
  background: var(--panel2);
  color: var(--text);
}

.project-more__menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  min-width: 180px;
  padding: var(--s-4);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.project-more__menu[hidden] {
  display: none;
}

.project-more__item {
  height: 36px;
  padding: 0 var(--s-10);
  border: 0;
  border-radius: 3px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: var(--fs-14);
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.project-more__item:hover {
  background: var(--panel2);
  color: var(--accent);
}

.project-more__item--danger,
.project-more__item--danger:hover {
  color: var(--danger-text);
}

.project-more__item--danger {
  margin-top: var(--s-4);
  border-top: 1px solid var(--border);
}

@media (max-width: 767px) {
  .projects-page {
    padding: var(--s-16);
  }

  .projects-page .view-toggle-btn,
  .projects-page__new,
  .project-more__btn {
    min-width: 44px;
    height: 44px;
  }

  .project-more__item {
    height: 44px;
  }

  .projects-page__head {
    flex-wrap: wrap;
  }

  /* The title stays on one line; the controls wrap under it when they do not fit. */
  .projects-page__title {
    min-width: max-content;
  }

  .project-grid {
    grid-template-columns: 1fr;
  }
}
/* === End ticket 03 === */

/* ============================================
   BOARD & COLUMN COMPONENTS
   ============================================ */

.board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: manipulation;
  gap: var(--s-12);
}

@media (min-width: 1301px) {
  .board.board--wrapped {
    grid-template-columns: repeat(var(--board-wrap-cols), minmax(200px, 1fr));
  }
}

/* Taiga lane: #eceff4 column under a grey #d8dee9 head; the lane's colour is only the
   status square in the head (board-rendering.ts). */
.col {
  background: var(--lane-col-bg);
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 360px;
}

.col * {
  border-color: inherit;
}

.col__head {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  height: 36px;
  padding: 0 var(--s-10);
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--lane-head-bg);
  color: var(--text);
}

/* Taiga status square: 10x16, fixed lanes in the status colours, custom lanes in their own. */
.col__status {
  flex: none;
  width: 10px;
  height: 16px;
}

.col__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-14);
  font-weight: 500;
  text-transform: uppercase;
}

/* === Ticket 23: Thai wrapping in lanes === */
/* Long lane names (Thai has no spaces) wrap to two lines instead of "งานรอจัดลำ…". */
.board .col__head {
  height: auto;
  min-height: 36px;
  padding-block: var(--s-4);
}

.board .col__title {
  white-space: normal;
  line-height: 1.25;
  overflow-wrap: break-word;
}

/* Desktop cards: the title runs on after "#id" and wraps under it at full card width,
   so Thai words are not squeezed into a narrow column and split. */
@media (min-width: 768px) {
  .board .card__title-row {
    display: block;
    padding-right: 0;
  }

  /* Keep only the first line clear of the drag handle; later lines use the full width. */
  .board .card__title-row::before {
    content: "";
    float: right;
    width: calc(var(--s-28) + var(--s-8));
    height: 1em;
  }

  .board .card__title-row .card__id-inline {
    margin-right: var(--s-6);
  }
}

.card__title {
  overflow-wrap: break-word;
}

/* ============================================
   FOLDED COLUMNS (Taiga kanban)
   A folded lane shrinks to a strip; its name turns sideways and the cards are
   hidden, so a wide board can be narrowed to the lanes actually being worked on.
   ============================================ */

.col__fold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px; /* hit area; the chevron stays small */
  height: 24px;
  padding: 0;
  border: none;
  border-radius: var(--radius-6);
  background: transparent;
  color: inherit;
  cursor: pointer;
  opacity: 0.6;
}

.col__fold:hover {
  opacity: 1;
  background: color-mix(in srgb, var(--text) 12%, transparent);
}

.col--folded .col__fold {
  order: -1;
}

.col--folded .col__fold svg {
  transform: rotate(180deg);
}

.col--folded {
  /* Overrides the grid track so the lane keeps only enough room for its label. */
  max-width: 46px;
  min-width: 46px;
  min-height: 0;
}

.col--folded .col__list,
.col--folded .col__load-more {
  display: none;
}

.col--folded .col__head {
  flex-direction: column;
  gap: var(--s-8);
  padding: var(--s-10) var(--s-4);
  height: 100%;
  align-items: center;
  border-radius: var(--radius);
}

.col--folded .col__title {
  writing-mode: vertical-rl;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-height: 260px;
}

/* Count badge: a small pill at the right of the lane head, before the fold chevron. */
.col__count {
  margin-left: auto;
  min-width: 22px;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--content-bg);
  color: var(--muted);
  font-size: var(--fs-11);
  font-weight: 500;
  text-align: center;
}

.col--folded .col__count {
  margin-left: 0;
}

/* WIP limit, as Taiga shows it: the lane counter reads "count / limit" and goes red
   once the limit is passed, so an overloaded lane is visible without opening it. */
.col__count--wip {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 1px;
  background: color-mix(in srgb, var(--success) 18%, transparent);
  color: var(--text);
}

.col__count--wip .col__count-limit {
  font-weight: 400;
  opacity: 0.7;
}

.col__count--wip.col__count--over {
  background: color-mix(in srgb, var(--danger) 22%, transparent);
  color: var(--danger-text);
}

.col--folded .col__count--wip {
  flex-direction: column;
  gap: 0;
  padding: var(--s-4) 0;
}

.col__list {
  padding: 9px var(--s-10) var(--s-10);
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  flex: 1;
  min-height: 200px;
  border: none;
  background: transparent;
}

.col__load-more {
  flex-shrink: 0;
  padding: var(--s-6) 10px;
  border-top: 1px solid var(--border);
  background: transparent;
  display: flex;
  justify-content: center;
}

.col__load-more--mobile {
  display: none;
}

.mobile-board-wrapper {
  display: block;
}

.mobile-tabs {
  display: flex;
  gap: var(--s-8);
  margin-bottom: var(--s-12);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.mobile-tabs::-webkit-scrollbar {
  display: none;
}

.mobile-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  padding: var(--s-10) 16px;
  cursor: pointer;
  font-weight: 600;
  font-size: var(--fs-14);
  margin-bottom: -1px;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.mobile-tab:hover {
  color: var(--text);
}

.mobile-tab--active {
  color: var(--text);
  border-bottom-color: var(--accent);
}

@media (max-width: 1300px) {
  .board {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

@media (max-width: 620px) {
  /* No ring after a tap; a keyboard (:focus-visible) still gets one. */
  .btn:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
  }

  .page {
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  /* Projects screen: scroll the container (not the fixed .page wrapper). */
  .page--projects {
    overflow: hidden;
  }

  .container {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: var(--s-16);
    overflow: hidden;
  }

  /* Projects: allow vertical scroll inside the container on mobile. */
  .page--projects .container {
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior-y: contain;
  }

  /* Dashboard: same scroll behavior as Projects on mobile. */
  .page--dashboard .container {
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior-y: contain;
  }

  .topbar {
    column-gap: var(--s-6);
    row-gap: 0;
    padding: var(--s-8) 10px;
    flex-wrap: wrap;
    min-width: 0;
    align-items: center;
  }

  .topbar .brand {
    flex: 0 0 clamp(56px, 18vw, 88px);
    width: clamp(56px, 18vw, 88px);
    min-width: 0;
    max-width: clamp(56px, 18vw, 88px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--fs-14);
    gap: var(--s-4);
  }

  /* In anonymous mode, extend the project name brand width in mobile view */
  .topbar .project-image-topbar~.brand,
  .topbar .project-image-topbar-placeholder~.brand {
    max-width: 180px;
  }

  .topbar .brand-logo {
    height: var(--s-24);
    width: auto;
  }

  .topbar .brand-text {
    max-width: 70px;
    height: calc(18px * var(--ui-scale));
    object-fit: contain;
    flex-shrink: 1;
  }

  .topbar #backBtn,
  .topbar .project-image-topbar-btn,
  .topbar .project-image-topbar,
  .topbar .project-image-topbar-placeholder,
  .topbar .brand,
  .topbar .spacer,
  .topbar #settingsBtn,
  .topbar #manageMembersBtn,
  .topbar .user-avatar {
    order: 1;
  }

  .topbar::after {
    content: "";
    order: 2;
    flex: 0 0 100%;
    height: 0;
  }

  .topbar .spacer {
    flex: 1;
    min-width: 0;
  }

  .topbar .search-input-wrapper {
    order: 4;
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    margin-right: var(--s-4);
    margin-top: var(--s-8);
  }

  .topbar #renameProjectBtn {
    order: 4;
    margin-top: var(--s-8);
    margin-right: var(--s-16);
  }

  .topbar #newTodoBtn {
    order: 5;
    margin-top: var(--s-8);
    margin-right: var(--s-4);
  }

  .topbar #voiceCommandBtn {
    order: 3;
    margin-top: var(--s-8);
  }

  /* Wall is desktop-only; HTML can still contain #wallBtn after a wide→narrow
     resize because topbar is not re-built on breakpoint cross. */
  .topbar #wallBtn {
    display: none !important;
  }

  .topbar #deleteProjectBtn {
    order: 6;
    margin-top: var(--s-8);
  }

  .search-input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    font-size: calc(0.85rem * var(--ui-scale));
    padding: calc(0.4rem * var(--ui-scale)) calc(0.6rem * var(--ui-scale));
    padding-right: 2.75rem;
  }

  .search-clear {
    right: 1.5rem;
    font-size: calc(0.9rem * var(--ui-scale));
    width: 18px;
    height: calc(18px * var(--ui-scale));
    padding: 0;
  }

  .search-filter-toggle {
    right: 0.3rem;
    width: 18px;
    height: calc(18px * var(--ui-scale));
    padding: 0;
  }

  .topbar .btn {
    padding: var(--s-8) 12px;
    font-size: calc(0.85rem * var(--ui-scale));
    white-space: nowrap;
    flex-shrink: 0;
    border-radius: var(--radius-8);
    font-weight: 500;
  }

  .topbar .btn#newTodoBtn {
    margin-right: var(--s-4);
    padding-left: 0;
    padding-right: 0;
  }

  .topbar .btn#deleteProjectBtn {
    padding-left: 0;
    padding-right: 0;
  }

  .topbar .btn#archiveBtn {
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
  }

  .topbar .btn--ghost {
    padding: var(--s-8) 12px;
    min-width: auto;
  }

  .topbar #renameProjectBtn {
    margin-right: var(--s-8);
  }

  .topbar .hamburger {
    font-size: var(--fs-16);
    line-height: 1;
  }

  .user-avatar {
    width: var(--s-32);
    height: var(--s-32);
    font-size: var(--fs-12);
    margin-left: var(--s-8);
  }

  /* Ensure Members button appears directly before avatar in mobile */
  .topbar #manageMembersBtn {
    order: 1;
  }

  .project-image-topbar-btn {
    width: var(--s-24);
    height: var(--s-24);
    flex-shrink: 0;
  }

  .project-image-topbar,
  .project-image-topbar-placeholder {
    width: var(--s-24);
    height: var(--s-24);
    flex-shrink: 0;
  }

  .project-image-topbar-placeholder {
    font-size: var(--fs-16);
  }

  /* Hide column headers in mobile view to save vertical space */
  .board .col__head {
    display: none !important;
  }

  /* Mobile: tabs on left, board on right */
  .mobile-board-wrapper {
    display: flex;
    flex-direction: row;
    gap: var(--s-8);
    align-items: stretch;
    flex: 1;
    min-height: 0;
    /* Allow flex item to shrink below content size */
    overflow: hidden;
    /* Prevent wrapper from scrolling */
    position: relative;
  }

  .mobile-tabs {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    margin-bottom: 0;
    margin-top: 0;
    border-bottom: none;
    border-right: 1px solid var(--border);
    padding-right: var(--s-8);
    flex-shrink: 0;
    width: auto;
    min-width: fit-content;
    align-self: stretch;
    overflow-x: visible;
    overflow-y: visible;
    position: relative;
    /* Anchor for absolutely-positioned drop zones */
    z-index: 1;
    /* Below the Sortable drag clone (z-index 9999) so dragged cards render on top */
  }

  .mobile-tab {
    padding: var(--s-8) 6px;
    border-bottom: none;
    border-right: 2px solid transparent;
    margin-bottom: 0;
    margin-right: -1px;
    width: auto;
    min-width: fit-content;
    text-align: center;
    white-space: nowrap;
    font-size: var(--fs-12);
    flex: 1 1 0;
    /* Equal distribution, allow shrinking, base size 0 */
    min-height: 0;
    /* Allow tabs to shrink below content size */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* For centering */
    opacity: 0.75;
    /* Dim non-active tabs */
    /* Rounded outer edge for all lanes */
    border-radius: var(--radius-8) 0 0 8px;
  }

  .mobile-tab__text {
    writing-mode: vertical-lr;
    text-orientation: mixed;
    transform: rotate(180deg);
    display: inline-block;
    margin: 0;
    /* Remove any default margins */
  }

  .mobile-tab[data-tab="agenda"] .mobile-tab__text svg {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: -0.15em;
    transform: rotate(90deg);
    transform-origin: center;
  }

  /* Taiga lane tabs: grey like the lane heads, marked by the lane's status colour
     (--lane-color, set inline by mobile-lane-tabs.ts) on the outer edge. */
  .mobile-tab {
    background: var(--lane-head-bg);
    color: var(--text);
    border-left: 4px solid var(--lane-color, var(--muted));
  }

  .mobile-tab[data-tab="agenda"] {
    --lane-color: #6366F1;
  }

  .mobile-tab:hover {
    opacity: 0.9;
  }

  .mobile-tab--active {
    opacity: 1 !important;
    /* The active tab joins its lane: column colour, bold name. */
    background: var(--lane-col-bg);
    font-weight: 700;
    border-right-color: transparent;
  }

  /* Mobile tab drop zones: invisible overlays on top of the tab buttons.
     They become active (accept drops) only while a card is being dragged. */
  #mobileTabDropZones {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    pointer-events: none;
    /* Inactive until drag starts */
    z-index: 10;
  }

  .mobile-tab-drop {
    flex: 1;
    pointer-events: none;
    border-radius: var(--radius-8) 0 0 8px;
    transition: background 0.15s, opacity 0.15s;
    opacity: 0;
    min-height: 0;
    --lane-color: #9CA3AF;
    --lane-shadow: color-mix(in srgb, var(--lane-color) 85%, transparent);
  }

  /* During drag: enable drops and show a subtle per-color hint on each zone */
  .mobile-board-wrapper.dragging #mobileTabDropZones {
    pointer-events: auto;
  }

  /* Labels above the tinted drop overlays; hits pass through to .mobile-tab-drop */
  .mobile-board-wrapper.dragging .mobile-tab {
    z-index: 11;
    pointer-events: none;
  }

  .mobile-board-wrapper.dragging .mobile-tab-drop {
    pointer-events: auto;
    opacity: 0.3;
    background: var(--lane-color);
  }

  /* On hover-over during drag, glow using the tab's lane color */
  .mobile-tab-drop.sortable-drag-over,
  .mobile-tab-drop:has(.card--ghost-tab) {
    opacity: 1 !important;
    background: var(--lane-color) !important;
    box-shadow: 0 0 16px 6px var(--lane-shadow);
  }

  /* At drag start: all tabs pulse at full hover glow briefly (mobile discoverability) */
  .mobile-board-wrapper.dragging #mobileTabDropZones.mobile-tab-drops--intro-glow .mobile-tab-drop {
    opacity: 1 !important;
    background: var(--lane-color) !important;
    box-shadow: 0 0 16px 6px var(--lane-shadow);
  }

  /* Hide the card ghost placeholder inside tab drop zones */
  .card--ghost-tab {
    display: none !important;
  }

  .board {
    flex: 1;
    min-width: 0;
    /* Allow board to shrink */
    overflow: hidden;
    /* Hide overflow, let the column scroll */
    align-self: stretch;
    grid-template-columns: 1fr;
    display: flex;
    /* Override grid to allow column to fill */
  }

  .board .col {
    display: none !important;
  }

  .board .col--mobile-active {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-height: 0;
    width: 100%;
    position: relative;
  }

  /* Cards scroll inside the list; col__load-more is always visible below it */
  .board .col--mobile-active .col__list {
    flex: 1;
    min-height: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior-y: contain;
  }

  /* Load more: no border/background on mobile — only the button itself is visible */
  .board .col--mobile-active .col__load-more {
    max-height: 0;
    overflow: hidden;
    padding: 0;
    border-top: none;
    background: transparent;
    opacity: 0;
    touch-action: manipulation;
    transition: max-height 0.25s ease, padding 0.25s ease, opacity 0.25s ease;
  }

  .board .col--mobile-active .col__load-more.visible {
    max-height: var(--s-32);
    padding: var(--s-2) var(--s-8) 4px;
    opacity: 1;
  }

  .board .col--mobile-active .col__load-more--desktop {
    display: none;
  }

  .board .col--mobile-active .col__load-more--mobile {
    display: block;
    cursor: pointer;
    font-size: var(--fs-13);
    color: var(--muted);
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
  }

  .board .col--mobile-active .col__load-more--mobile:active {
    opacity: 0.6;
  }

  /* Settings modal tabs: horizontal scrolling without scrollbars */
  .settings-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-bottom: var(--s-16);
  }

  .settings-tabs::-webkit-scrollbar {
    display: none;
  }

  .settings-tab {
    flex-shrink: 0;
  }

  /* Prevent horizontal scroll on settings dialog itself */
  .dialog__content {
    overflow-x: hidden;
  }
}

@media (min-width: 621px) {
  .mobile-tabs {
    display: none;
  }
}

/* ============================================
   CARD COMPONENTS
   ============================================ */

/* Taiga card: white, near-square corners, no border or shadow at rest (a soft shadow on
   hover), and a move cursor — on a Taiga board dragging is the default affordance. */
.card {
  display: flex;
  flex-direction: column;
  text-align: left;
  border: 1px solid transparent;
  background: var(--card-bg, var(--panel));
  color: var(--text);
  border-radius: var(--radius-10);
  padding: var(--s-10) 10px;
  cursor: move;
  position: relative;
  box-shadow: var(--card-shadow, 0 1px 2px rgba(45, 45, 57, 0.16));
  transition: box-shadow 0.15s ease, background-color 0.15s ease;
}

.card:hover {
  background: var(--card-hover-bg, var(--panel2));
  box-shadow: var(--card-shadow-hover, 0 2px 6px rgba(45, 45, 57, 0.22));
}

/* Ticket 12: the agenda head is a normal grey lane head; its colour is the .col__status square.
   The lane has a max-height, so keep the head from shrinking below the 36px of the other heads. */
.col__head--agenda {
  flex-shrink: 0;
}

.col__head--agenda .col__title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.col__head--agenda .col__agenda-hosts {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  flex-shrink: 0;
}

.col__agenda-host {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  text-decoration: none;
  font-weight: 700;
  line-height: 1;
}

.col__agenda-host img,
.col__agenda-host svg {
  width: var(--s-16);
  height: var(--s-16);
  flex-shrink: 0;
}

.col__agenda-host img {
  object-fit: contain;
}

.col__agenda-host--apple img {
  filter: invert(1);
}

.col--agenda .col__list {
  gap: 0;
  display: block;
  padding: 0;
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  cursor: grab;
  scrollbar-width: none;
}

.col--agenda .col__list::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.col--agenda:hover .col__list,
.col--agenda:focus-within .col__list,
.col--agenda.is-agenda-panning .col__list {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text) 22%, var(--bg)) transparent;
}

.col--agenda:hover .col__list::-webkit-scrollbar,
.col--agenda:focus-within .col__list::-webkit-scrollbar,
.col--agenda.is-agenda-panning .col__list::-webkit-scrollbar {
  width: 6px;
  height: 0;
}

.col--agenda:hover .col__list::-webkit-scrollbar-thumb,
.col--agenda:focus-within .col__list::-webkit-scrollbar-thumb,
.col--agenda.is-agenda-panning .col__list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text) 22%, var(--bg));
  border-radius: 3px;
}

.col--agenda:hover .col__list::-webkit-scrollbar-track,
.col--agenda:focus-within .col__list::-webkit-scrollbar-track,
.col--agenda.is-agenda-panning .col__list::-webkit-scrollbar-track {
  background: transparent;
}

.col--agenda.is-agenda-panning,
.col--agenda.is-agenda-panning .col__list {
  cursor: grabbing;
  user-select: none;
}

@media (min-width: 621px) {
  .col--agenda {
    max-height: calc(100dvh - 12rem);
    align-self: start;
  }
}

.col__agenda-status,
.col__agenda-empty {
  padding: var(--s-10);
}

.agenda-allday {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding: var(--s-10);
}

.agenda-day {
  --agenda-hour-height: 48px;
  --agenda-hour-gutter: 3.75rem;
  position: relative;
  height: calc(24 * var(--agenda-hour-height));
}

.agenda-hour {
  height: var(--agenda-hour-height);
  box-sizing: border-box;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
}

.agenda-hour__label {
  width: var(--agenda-hour-gutter);
  flex-shrink: 0;
  font-size: var(--fs-12);
  line-height: 1.2;
  padding: 2px 6px 0 8px;
  white-space: nowrap;
}

.agenda-day__events {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: var(--agenda-hour-gutter);
}

.agenda-now-line {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--agenda-now-min, 0) / 60 * var(--agenda-hour-height));
  height: 0;
  margin-top: -1px;
  border-top: 2px dotted color-mix(in srgb, var(--danger) 45%, transparent);
  background: none;
  pointer-events: none;
  z-index: 4;
}

.agenda-now-line--prominent {
  height: 2px;
  border-top: none;
  background: var(--danger);
}

.card--agenda {
  cursor: default;
  border-color: var(--agenda-lane-color, #6366F1);
}

.card--agenda:hover {
  border-color: var(--agenda-lane-color, #6366F1);
}

.card--agenda-timed {
  position: absolute;
  overflow: hidden;
  box-sizing: border-box;
  margin: 0;
  padding: 4px 8px;
  justify-content: flex-start;
  top: calc(var(--agenda-start-min) / 60 * var(--agenda-hour-height));
  height: max(2.75rem, calc(var(--agenda-span-min) / 60 * var(--agenda-hour-height)));
}

.card--agenda-timed:hover,
.card--agenda-timed:focus-within {
  z-index: 2;
}

@media (max-width: 767px) {
  .agenda-day {
    --agenda-hour-height: 96px;
  }
}

.card--agenda-timed .card__agenda-copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
}

.card--agenda-timed .card__agenda-meta {
  margin-top: 2px;
}

.card__agenda-meta {
  font-size: var(--fs-12);
  margin-top: var(--s-4);
  white-space: nowrap;
}

.card:focus:not(:focus-visible) {
  outline: none;
}

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

.card--highlight {
  box-shadow: 0 0 0 2px var(--accent);
  transition: box-shadow 0.2s ease;
}

.card--selected {
  box-shadow: 0 0 0 2px var(--accent);
  outline: 1px solid var(--accent);
  outline-offset: 1px;
}

.bulk-edit-bar {
  position: fixed;
  bottom: var(--s-24);
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  padding: var(--s-8) var(--s-12);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-8);
  box-shadow: var(--shadow);
  display: flex;
  gap: var(--s-8);
  max-width: calc(100vw - 24px);
}

.bulk-edit-bar__btn {
  white-space: nowrap;
}

.todo-archive-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-8);
  padding: var(--s-10) var(--s-12);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--border));
  border-radius: var(--radius-8);
  background: color-mix(in srgb, var(--accent) 10%, var(--panel));
  font-size: var(--fs-13);
}

.todo-archive-banner[hidden] {
  display: none;
}

.todo-archive-banner strong {
  font-size: var(--fs-14);
}

#todoArchiveTimestamp {
  color: var(--muted);
}

.archive-container {
  width: min(980px, 100%);
  margin-inline: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.archive-topbar__title {
  color: var(--muted);
  font-weight: 700;
}

.archive-project-image {
  width: var(--s-32);
  height: var(--s-32);
  flex: 0 0 var(--s-32);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: var(--radius);
}

/* === Ticket 07: archive as a two-pane Taiga table (reuses Ticket 05 .two-pane / .tg-table) === */
.archive-container.two-pane { width: 100%; margin: 0; }
.archive-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-16); }
.archive-heading .page-title { margin: 0 0 12px; }
.archive-search__label { display: block; margin: 0 0 4px; font-size: 14px; font-weight: 500; color: var(--text); }
.archive-search { width: 100%; min-height: 32px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--content-bg); color: var(--text); font: inherit; font-size: 14px; }
.archive-search:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.archive-description { margin: 12px 0 0; font-size: 13px; }
.archive-state { padding: var(--s-24); color: var(--muted); text-align: center; }
.archive-list { padding-bottom: 84px; }
.archive-table { width: 100%; border-collapse: collapse; }
.archive-table th { text-align: start; white-space: nowrap; }
.archive-table td { border-bottom: 1px solid var(--border); vertical-align: middle; }
.archive-row:hover { background: color-mix(in srgb, var(--text) 4%, transparent); }
.archive-row--selected { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.archive-row__select { width: 40px; padding: 0 !important; }
.archive-row__select label { display: flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; cursor: pointer; }
.archive-row__select input { width: 18px; height: 18px; margin: 0; }
.archive-row__open { display: inline-flex; align-items: baseline; gap: var(--s-8); min-height: 24px; padding: 2px 0; border: 0; background: none;
  color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.archive-row__open:hover .archive-row__title { text-decoration: underline; }
.archive-row__open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.archive-row__id { color: var(--accent); font-weight: 500; }
.archive-row__meta, .archive-row__tags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-6); margin-top: 4px; color: var(--muted); font-size: 12px; }
.archive-row__lane, .archive-row__date { white-space: nowrap; }
.archive-row__restore { width: 1%; text-align: end; }
.archive-row__restore .btn { min-height: 32px; white-space: nowrap; }
.archive-row__badge { display: inline-block; padding: 1px var(--s-6); border: 1px solid var(--border); border-radius: 999px; font-size: 12px; }
.archive-row__lane .archive-row__badge { margin-inline-start: var(--s-6); }
.archive-row__badge--done { border-color: color-mix(in srgb, var(--success) 55%, var(--border)); color: var(--text); }
.archive-row__assignee { display: inline-flex; align-items: center; gap: var(--s-4); }
.archive-row__assignee .user-avatar__img,
.archive-row__assignee .user-avatar__initials { width: 22px; height: 22px; font-size: var(--fs-12); }
@media (max-width: 767px) {
  .archive-search, .archive-row__restore .btn, .archive-row__open { min-height: 44px; }
  .archive-row__select { width: 44px; }
  .archive-row__select label { min-width: 44px; min-height: 44px; }
}
@media (max-width: 620px) {
  .page--archive .container.two-pane { display: block; overflow-y: auto; padding: 0; }
  .archive-heading { align-items: stretch; flex-direction: column; gap: 0; }
  /* Rows wrap: [select] story [restore] on the first line, lane + date below. */
  .archive-table thead { display: none; }
  .archive-table tr { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--border); }
  .archive-table td { border-bottom: 0; }
  .archive-row__story { flex: 1 1 calc(100% - 160px); min-width: 0; }
  .archive-row__restore { width: auto; }
  .archive-row__lane, .archive-row__date { order: 2; padding-top: 0 !important; color: var(--muted); font-size: 13px; }
  .archive-row__select ~ .archive-row__lane { margin-inline-start: 44px; }
  .archive-row__assignee span:last-child { display: none; }
}
/* === end Ticket 07 === */

/* === Ticket 18: archive tag filter (board panel chips and values) === */
.archive-tag-filter { margin-top: var(--s-16); }
.archive-tag-filter .bfp-chip__remove { min-width: 24px; min-height: 24px; }
@media (max-width: 767px) {
  .archive-tag-filter .bfp-value { min-height: 44px; }
  .archive-tag-filter .bfp-chip__remove { min-width: 44px; min-height: 44px; }
}
/* === end Ticket 18 === */

.archive-load-more {
  display: flex;
  justify-content: center;
  padding: var(--s-12) 0 var(--s-32);
}

.archive-selection-bar {
  position: fixed;
  right: var(--s-24);
  bottom: var(--s-24);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--s-12);
  padding: var(--s-8) var(--s-12);
  border: 1px solid var(--border);
  border-radius: var(--radius-8);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.archive-selection-bar[hidden] {
  display: none;
}

@media (max-width: 620px) {
  .topbar #archiveBtn {
    order: 3;
    margin-top: var(--s-8);
  }

  .archive-topbar .archive-topbar__title {
    order: 1;
    flex: 0 0 auto;
  }

  .archive-topbar .archive-project-image {
    width: var(--s-24);
    height: var(--s-24);
    flex-basis: var(--s-24);
    order: 1;
  }

  .archive-selection-bar {
    right: 8px;
    bottom: 8px;
    left: 8px;
    justify-content: space-between;
  }

  .bulk-edit-bar {
    bottom: 8px;
    padding: var(--s-6);
  }

  .bulk-edit-bar__btn {
    min-height: 44px;
  }

  #todoDialog .dialog__footer #archiveTodoBtn,
  #todoDialog .dialog__footer #restoreTodoBtn {
    min-height: 44px;
    font-size: var(--fs-13);
    font-weight: 700;
  }
}

.bulk-edit-dialog__hint {
  margin: 0 0 var(--s-12);
  font-size: var(--fs-14);
}

.bulk-edit-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  margin-bottom: var(--s-16);
}

.bulk-edit-field__check {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  cursor: pointer;
  font-weight: 600;
  font-size: var(--fs-14);
}

.bulk-edit-field__check input {
  margin: 0;
}

.card__title-row {
  display: flex;
  align-items: baseline;
  gap: var(--s-6);
  min-width: 0;
}

/* Taiga ref: teal "#id" before the title. */
.card__id-inline {
  font-size: var(--fs-14);
  font-weight: 500;
  color: var(--accent);
  flex-shrink: 0;
}

.card__title {
  font-weight: 400;
  font-size: var(--fs-14);
  min-width: 0;
}

.card__tags {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 6px;
  row-gap: 6px;
  margin-top: var(--s-8);
  align-items: end;
}

.card__tags-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  grid-column: 1;
}

.card__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  grid-column: 2;
  align-self: end;
}

/* Ticket 37: a narrow lane (or a long tag) must not push the badges out of the card.
   Tags and badges share a row while they fit; otherwise the badges drop to their
   own row, right-aligned, and tags wrap as whole words (a tag longer than the card
   breaks inside). Phones lay the card out as a grid of their own (below). */
.card__tags-list .tag { max-width: 100%; overflow-wrap: break-word; }
@media (min-width: 768px) {
  .card__tags { display: flex; flex-wrap: wrap; align-items: flex-end; }
  .card__tags-list { flex: 1 1 auto; width: min-content; min-width: 0; }
  .card__badges { margin-inline-start: auto; }
}

/* Tracking badges on cards (rework / reopen / testing / blocked / needs assignee). */
.card__tracking-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; min-width: 0; }
/* Ticket 37: on the phone card grid the pills get the full card width, not the tag column. */
@media (max-width: 767px) { .card__tracking-badges { grid-column: 1 / -1; } }
/* Badge colours pass 4.5:1 on the card (dark: lighter tints on #3b4252; light: deeper tones on white). */
.card__tracking-badges { --tb-rework: #fbbf24; --tb-reopen: #d8b4fe; --tb-test: #93c5fd; --tb-blocked: #fca5a5; }
[data-theme="light"] .card__tracking-badges { --tb-rework: #b45309; --tb-reopen: #7e22ce; --tb-test: #1d4ed8; --tb-blocked: #b91c1c; }
.card__tracking-badge { font-size: var(--fs-12, 12px); padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border); white-space: nowrap; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.card__tracking-badge--rework { border-color: var(--tb-rework); color: var(--tb-rework); }
.card__tracking-badge--reopen { border-color: var(--tb-reopen); color: var(--tb-reopen); }
.card__tracking-badge--blocked { border-color: var(--tb-blocked); color: var(--tb-blocked); }
.card__tracking-badge--needs-assignee { border-style: dashed; color: var(--muted); }

/* === Ticket 27: test state — queued (outlined amber) vs testing (filled, tester initials) === */
:root { --ts-queue: #fbbf24; --ts-testing-bg: #93c5fd; --ts-testing-fg: #0f172a; }
[data-theme="light"] { --ts-queue: #b45309; --ts-testing-bg: #1d4ed8; --ts-testing-fg: #ffffff; }
.card__tracking-badge--test-waiting { border-color: var(--ts-queue); color: var(--ts-queue); background: transparent; }
/* Ticket 37: one line always — a narrow lane truncates the label (full text in the title), never wraps the pill. */
.card__tracking-badge--testing { display: inline-flex; align-items: center; gap: 4px; background: var(--ts-testing-bg); border-color: var(--ts-testing-bg); color: var(--ts-testing-fg); font-weight: 600; padding-left: 2px; max-width: 100%; }
.card__tracking-badge-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.card__tracking-avatar { flex-shrink: 0; }
.card__tracking-avatar { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 3px; border-radius: 999px; font-size: 12px; line-height: 1; background: color-mix(in srgb, var(--ts-testing-fg) 18%, transparent); }
.col__test-counts { padding: 2px 10px 4px; font-size: var(--fs-12, 12px); color: var(--muted); }
.todo-tester__state--queued { color: var(--ts-queue); font-weight: 600; }
.todo-tester__state--testing { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--ts-testing-bg); color: var(--ts-testing-fg); font-weight: 600; max-width: 100%; overflow-wrap: anywhere; }
.todo-tester__since { font-size: var(--fs-12, 12px); margin-top: 2px; }
.todo-tester__controls { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.todo-tester__controls .btn, .todo-tester__select { min-height: 32px; }
.todo-tester__select { flex: 1 1 140px; min-width: 0; }
.dashboard-todo__test-state { display: inline-block; margin-inline-start: 6px; padding: 0 6px; white-space: nowrap; line-height: 1.6; border-radius: 999px; font-size: var(--fs-12, 12px); border: 1px solid var(--ts-queue); color: var(--ts-queue); }
/* Status cell: lane chip on top, test-state pill on its own line below; neither breaks inside. */
.dashboard-todo__status .dashboard-todo__test-state { display: block; width: fit-content; max-width: min(16rem, 34vw); margin: 4px 0 0; overflow: hidden; text-overflow: ellipsis; }
.dashboard-todo__test-state--testing { background: var(--ts-testing-bg); border-color: var(--ts-testing-bg); color: var(--ts-testing-fg); }
@media (max-width: 767px) {
  .todo-tester__controls .btn, .todo-tester__select { min-height: 44px; }
}

.todo-section[hidden], .todo-timeline[hidden] { display: none; }
.todo-timeline { padding: var(--s-8, 8px) 0 0; display: flex; flex-direction: column; gap: var(--s-12, 12px); }
.todo-timeline__grid { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: 4px 12px; font-size: var(--fs-13, 13px); }
.todo-timeline__value { overflow-wrap: anywhere; }
.todo-timeline__banner { border-left: 4px solid #f59e0b; background: color-mix(in srgb, #f59e0b 10%, transparent); padding: 8px 12px; border-radius: var(--radius-6, 6px); display: grid; gap: 2px; }
.todo-timeline__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.todo-timeline__heading { margin: 0; font-size: var(--fs-13, 13px); }
.todo-timeline__table { width: 100%; border-collapse: collapse; font-size: var(--fs-12, 12px); display: block; overflow-x: auto; }
.todo-timeline__table th, .todo-timeline__table td { padding: 2px 8px; text-align: start; white-space: nowrap; }
.todo-timeline__events { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.todo-timeline__events li { font-size: var(--fs-12); }
.todo-timeline__time { font-size: var(--fs-12); }
.todo-timeline__note, .todo-timeline__pre { margin: 0; font-size: var(--fs-12); }

/* ============================================
   CARD DIALOG (Taiga user-story layout)
   Main column left (#id + title, tags, creator, notes, section bars),
   properties panel right; the panel stacks under the main column on mobile.
   ============================================ */
#todoDialog.dialog {
  width: min(1100px, calc(100vw - 48px));
}
#todoDialog .dialog__form {
  padding: 0;
  gap: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
#todoDialog .dialog__header {
  flex-shrink: 0;
  padding: var(--s-8) var(--s-16);
  border-bottom: 1px solid var(--border);
}
#todoDialog .dialog__title {
  color: var(--muted);
  font-size: var(--fs-13);
  font-weight: 500;
  text-transform: uppercase;
}
#todoDialog .todo-archive-banner {
  margin: var(--s-12) var(--s-16) 0;
}
#todoDialog .todo-dialog__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.todo-dialog__main {
  display: flex;
  flex-direction: column;
  gap: var(--s-16);
  min-width: 0;
  padding: var(--s-16) var(--s-24, 24px) var(--s-24, 24px);
}
#todoDialog .todo-dialog__main > .field {
  margin: 0;
}
.todo-dialog__head {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  padding-bottom: var(--s-16);
  border-bottom: 1px solid var(--border);
}
.todo-dialog__heading {
  display: flex;
  align-items: center;
  gap: var(--s-8);
  min-width: 0;
}
.todo-dialog__ref {
  color: var(--accent);
  font-size: 24px;
  font-weight: 500;
  flex-shrink: 0;
}
.todo-dialog__ref[hidden] {
  display: none;
}
#todoDialog .todo-dialog__title-input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 24px;
  font-weight: 400;
  padding: var(--s-2) var(--s-6);
  border-color: transparent;
  background: transparent;
  border-radius: var(--radius);
}
#todoDialog .todo-dialog__title-input:not([readonly]):hover,
#todoDialog .todo-dialog__title-input:not([readonly]):invalid {
  border-color: var(--border);
}
#todoDialog .todo-dialog__title-input:not([readonly]):focus {
  border-color: color-mix(in srgb, var(--accent) 65%, transparent);
}
#todoDialog .todo-dialog__title-input[readonly]:focus {
  box-shadow: none;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.todo-dialog__meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-16);
}
#todoDialog .todo-dialog__tags {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}
#todoDialog .todo-dialog__tags .tags-input-container {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}
#todoDialog .todo-dialog__tags .tags-chips {
  border: 0;
  background: transparent;
  padding: 0;
  min-height: 0;
}
#todoDialog .todo-dialog__tags .tags-chips:empty {
  display: none;
}
#todoDialog .todo-dialog__tags .tags-input-row {
  max-width: 360px;
}
#todoDialog .todo-dialog__tags .tags-input-row[hidden] {
  display: none;
}
/* Taiga tag chips: grey with white text unless the tag has its own colour. */
#todoDialog .todo-dialog__tags .tag-chip:not([style]) {
  background: #a9aabc;
  border-color: #a9aabc;
  color: #2e3440; /* white on #a9aabc is 2.3:1 */
}
#todoDialog .todo-dialog__tags .tag-chip {
  border-radius: var(--radius);
}

#todoLinksField .tags-chips:empty {
  display: none;
}

/* Section bars (Links, Comments, Timeline): grey strip, bold title. */
.todo-section__heading {
  margin: 0;
}
#todoDialog .todo-section__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 0 0 var(--s-8);
  padding: var(--s-8) var(--s-16);
  border: 0;
  border-radius: 0;
  background: var(--section-bar-bg);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-16);
  font-weight: 600;
  text-align: start;
}
.todo-section__heading .todo-section__bar {
  margin: 0;
}
.todo-section__toggle {
  cursor: pointer;
}
.todo-section__toggle:hover {
  color: var(--accent);
}
.todo-section__toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
.todo-section__chevron {
  font-size: var(--fs-18);
  line-height: 1;
  transition: transform 0.15s ease;
}
.todo-section__toggle[aria-expanded="true"] .todo-section__chevron {
  transform: rotate(90deg);
}

/* Properties panel: small uppercase labels, rows split by rules. */
.todo-dialog__side {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: var(--s-8) var(--s-16) var(--s-16);
  background: var(--side-panel-bg);
}
#todoDialog .todo-side__field {
  margin: 0;
  padding: var(--s-12) 0;
}
#todoDialog .todo-side__field:not(:first-child) {
  border-top: 1px solid var(--border);
}
#todoDialog .todo-side__field[hidden] {
  display: none;
}
#todoDialog .todo-dialog__side .field__label {
  color: var(--text);
  font-size: var(--fs-11);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.todo-side__value {
  font-size: var(--fs-14);
  overflow-wrap: anywhere;
}
.todo-side__value--blocked {
  color: var(--status-not-started);
  font-weight: 500;
}
#todoDialog .todo-dialog__side .select + .btn,
#todoDialog .todo-dialog__side .tags-chips + .select {
  margin-top: var(--s-8);
}
#todoDialog .todo-dialog__side .todo-assignee-chips {
  border: 0;
  background: transparent;
  padding: 0;
}
.todo-status {
  display: flex;
  align-items: center;
  gap: var(--s-8);
}
.todo-status__chip {
  flex-shrink: 0;
  width: 10px;
  height: 16px;
  border-radius: 2px;
}
.todo-status__chip[hidden] {
  display: none;
}
#todoDialog .todo-status__select {
  font-size: 20px;
  font-weight: 500;
  text-transform: uppercase;
  padding-block: var(--s-4);
}
/* Read-only: selects read as plain values, no control chrome. */
#todoDialog .todo-dialog__side .select:disabled {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border-color: transparent;
  color: var(--text);
  opacity: 1;
  padding-inline: 0;
  cursor: default;
}
#todoDialog .todo-dialog__side #todoAssignee:disabled {
  display: none;
}

#todoDialog .dialog__footer {
  flex-shrink: 0;
  margin: 0;
  padding: var(--s-10) var(--s-16);
  border-top: 1px solid var(--border);
}

@media (max-width: 767px) {
  #todoDialog .todo-dialog__body {
    grid-template-columns: minmax(0, 1fr);
  }
  .todo-dialog__main {
    padding: var(--s-12);
  }
  .todo-dialog__side {
    border-top: 1px solid var(--border);
    padding: 0 var(--s-12) var(--s-12);
  }
  .todo-dialog__ref,
  #todoDialog .todo-dialog__title-input {
    font-size: 20px;
  }
  .todo-dialog__meta {
    flex-direction: column;
    gap: var(--s-8);
  }
  .todo-dialog-dates {
    align-items: flex-start;
    max-width: 100%;
    text-align: start;
  }
}

/* Zoom control: four ascending bars, densest on the left, as Taiga draws it. */
.board-zoom {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
  padding: 0 var(--s-2);
}

/* 24×24 hit area around each small bar (a11y target size). */
.board-zoom__pip {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  padding: 3px 0;
  cursor: pointer;
}

.board-zoom__pip input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.board-zoom__bar {
  display: block;
  width: 4px;
  background: var(--muted);
  opacity: 0.4;
  border-radius: 1px;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

.board-zoom__pip:nth-child(1) .board-zoom__bar { height: 6px; }
.board-zoom__pip:nth-child(2) .board-zoom__bar { height: 10px; }
.board-zoom__pip:nth-child(3) .board-zoom__bar { height: 14px; }
.board-zoom__pip:nth-child(4) .board-zoom__bar { height: 18px; }

.board-zoom__pip:hover .board-zoom__bar {
  opacity: 0.7;
}

.board-zoom__pip.is-active .board-zoom__bar {
  background: var(--accent);
  opacity: 1;
}

.board-zoom__pip input:focus-visible + .board-zoom__bar {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============================================
   CARD ZOOM (Taiga kanban board zoom)

   Four cumulative levels set on .board by core/board-zoom-preferences.ts. Taiga's
   ladder, mapped onto this card's markup:
     0  ref + assignee only; title becomes the tooltip, cards collapse to a strip
     1  + title                                             (Taiga's default)
     2  + priority tier + tags as colour swatches, no text
     3  + tag names                                         (Scrumboy's default: tags matter here)
   Level 3 is the card as it looked before zoom existed, so no rules are needed
   for it — each level below simply takes things away. */

.board--zoom-0 .card__title,
.board--zoom-0 .card__tags-list,
.board--zoom-0 .card__points,
.board--zoom-0 .card__priority,
.board--zoom-0 .card__comments,
.board--zoom-1 .card__tags-list,
.board--zoom-1 .card__priority,
.board--zoom-1 .card__comments {
  display: none;
}

/* Zoom 0 lays the card out as a single strip: ref on the left, assignee on the right. */
.board--zoom-0 .card {
  flex-direction: row;
  align-items: center;
  min-height: 45px;
  padding: var(--s-6) 10px;
}

.board--zoom-0 .card__content {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}



.board--zoom-0 .card__tags {
  margin-top: 0;
}

/* With tags gone the two-column badge grid has nothing in its first column. */
.board--zoom-0 .card__tags,
.board--zoom-1 .card__tags {
  grid-template-columns: auto;
}

.board--zoom-0 .card__badges,
.board--zoom-1 .card__badges {
  margin-inline-start: 0;
  grid-column: 1;
}

/* Zoom 2 shows tags as colour swatches only — Taiga hides the label and keeps the
   pill, so a card reads as a row of colours at a glance. */
.board--zoom-2 .card__tags-list .tag {
  font-size: 0;
  padding: 0;
  width: 18px;
  height: 8px;
  border-radius: var(--radius-6);
}

.card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  min-width: 0;
  position: relative;
}

.card__footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  margin-top: auto;
}

.todo-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  overflow: hidden;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.card .todo-avatar {
  width: 30px;
  height: 30px;
  background: var(--lane-head-bg);
  color: var(--text);
  font-weight: 500;
}

.todo-avatar .user-avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__points {
  flex-shrink: 0;
  min-width: var(--s-20);
  height: var(--s-20);
  padding: 0 var(--s-6);
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--text);
  font-size: var(--fs-11);
  font-weight: 700;
  line-height: calc(18px * var(--ui-scale));
  text-align: center;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.card__priority {
  flex-shrink: 0;
  height: var(--s-20);
  padding: 0 var(--s-8);
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  background: rgba(148, 163, 184, 0.18);
  color: var(--text);
  font-size: var(--fs-11);
  font-weight: 700;
  line-height: calc(18px * var(--ui-scale));
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


.card__drag-handle {
  display: flex;
  flex-shrink: 0;
  width: var(--s-28);
  align-items: center;
  justify-content: center;
  color: var(--muted);
  opacity: 0.5;
  cursor: grab;
  touch-action: pan-y;
  /* Allow vertical scrolling but prevent horizontal */
  margin-left: var(--s-8);
  padding: var(--s-4);
}

.card__drag-handle:active {
  cursor: grabbing;
  opacity: 0.9;
}

@media (hover: hover) {
  .card__drag-handle {
    opacity: 0;
    transition: opacity 0.12s ease;
  }

  .card:hover .card__drag-handle,
  .card:focus-within .card__drag-handle {
    opacity: 0.7;
  }
}

@media (min-width: 768px) {
  .card__title-row {
    padding-right: calc(var(--s-28) + var(--s-8));
  }

  .card__drag-handle {
    position: absolute;
    top: var(--s-6);
    right: var(--s-6);
    z-index: 1;
    margin-left: 0;
  }
}

/* Customize Workflow: hide "Done" label on mobile to save space; radio remains for selection */
@media (max-width: 767px) {
  .workflow-done-label-wrap .workflow-done-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* Mobile cards: keep drag handle pinned to top-right regardless of tags/badges/title wrapping */
@media (max-width: 767px) {
  .card {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr;
    column-gap: var(--s-4);
    align-items: stretch;
    min-height: 96px;
  }

  .card__content {
    display: contents;
  }

  .card__title-row {
    grid-column: 1 / -1;
    grid-row: 1;
    /* Reserve room so wrapped titles do not run under the fixed drag handle. */
    padding-right: calc(var(--s-28) + var(--s-8));
  }

  .card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    max-height: calc(1.4em * 2);
    /* 2 lines */
  }

  .card__id-inline {
    font-size: var(--fs-13);
  }

  .card__tags {
    display: contents;
  }

  .card__tags-list {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    flex-wrap: wrap-reverse;
  }

  .card__drag-handle {
    display: flex;
    position: absolute;
    top: var(--s-6);
    right: var(--s-6);
    z-index: 1;
    flex-direction: column;
    justify-content: center;
    margin-left: 0;
  }

  .card__badges {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    align-self: end;
  }
}

@media (max-width: 767px) {
  .card.card--agenda-timed {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
}

.card--ghost {
  opacity: 0.55;
}

.card--drag {
  opacity: 0.85;
  z-index: 9999 !important;
  position: relative;
}

.card--fallback {
  opacity: 0.9;
  z-index: 99999 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  pointer-events: none;
  max-width: 90vw;
}

/* ============================================
   FILTERS & CHIPS
   ============================================ */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8);
}

.chips--view-tabs {
  --view-tabs-scale: 1;
  flex-wrap: nowrap;
  width: 100%;
  min-width: 0;
  margin-top: 10px;
  padding: 4px;
  box-sizing: border-box;
  gap: calc(var(--s-8) * var(--view-tabs-scale));
}

.chips--view-tabs .chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  white-space: nowrap;
  font-size: calc(var(--fs-13) * var(--view-tabs-scale));
  padding: calc(var(--s-6) * var(--view-tabs-scale)) calc(10px * var(--view-tabs-scale));
}

.chips--view-tabs .dashboard-tab__label,
.chips--view-tabs .projects-tab__label {
  white-space: nowrap;
}

.chips--view-tabs .chip__count {
  flex-shrink: 0;
}

/* Taiga tags and chips are 2px-radius pills, not rounded capsules. */
.chip {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: var(--radius-6);
  padding: var(--s-4) var(--s-8);
  cursor: pointer;
  font-weight: 500;
  font-size: var(--fs-12);
}

.chip--active {
  border-color: color-mix(in srgb, var(--accent) 80%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent);
}

.chip--sprint {
  background: var(--chip-sprint-bg);
  color: var(--chip-sprint-text);
  border-color: rgba(128, 128, 128, 0.5);
}
.chip--sprint:hover {
  background: color-mix(in srgb, var(--chip-sprint-bg) 90%, var(--chip-sprint-text) 10%);
}
.chip--sprint:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.chip--sprint.chip--active {
  border-color: color-mix(in srgb, var(--accent) 80%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* Active sprint chip: green background, white text (both light and dark mode) */
.chip--active-sprint {
  background: #10B981 !important;
  color: white !important;
  border-color: #10B981 !important;
}
.chip--active-sprint:hover {
  background: #0d9668 !important;
  color: white !important;
}
.chip--active-sprint:focus-visible {
  outline: 2px solid #10B981;
  outline-offset: 2px;
}

/* Closed sprint chip: red background, white text (both light and dark mode) */
.chip--closed-sprint {
  background: #EF4444 !important;
  color: white !important;
  border-color: #EF4444 !important;
}
.chip--closed-sprint:hover {
  background: #dc2626 !important;
  color: white !important;
}
.chip--closed-sprint:focus-visible {
  outline: 2px solid #EF4444;
  outline-offset: 2px;
}

/* Planned sprint chip: orange background, white text (both light and dark mode) */
.chip--planned-sprint {
  background: #EA580C !important;
  color: white !important;
  border-color: #EA580C !important;
}
.chip--planned-sprint:hover {
  background: #c2410c !important;
  color: white !important;
}
.chip--planned-sprint:focus-visible {
  outline: 2px solid #EA580C;
  outline-offset: 2px;
}

.chip__count {
  color: var(--muted);
  margin-left: var(--s-6);
}

.search-input-wrapper {
  position: relative;
  display: inline-block;
  margin-right: 0.5rem;
}

.search-input {
  padding: calc(0.5rem * var(--ui-scale)) calc(0.75rem * var(--ui-scale));
  /* Room for both the clear (✕) button and the filter-toggle chevron on the right edge. */
  padding-right: 3.25rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: calc(0.9rem * var(--ui-scale));
  width: 200px;
  min-width: 120px;
  max-width: 200px;
  background: var(--panel);
  color: var(--text);
  flex-shrink: 1;
}

.topbar--voice-commands-off .search-input {
  width: 250px;
  max-width: 250px;
}

/* Glow when focused or when there is typed text; disappears only when empty */
.search-input:focus,
.search-input:not(:placeholder-shown) {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), 0 0 16px 4px color-mix(in srgb, var(--accent) 40%, transparent);
}

.search-clear {
  position: absolute;
  /* Sits to the left of the always-present filter-toggle chevron so the two never overlap. */
  right: 1.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: var(--fs-16);
  padding: calc(0.25rem * var(--ui-scale));
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 2px;
}

.search-clear:hover {
  background: var(--border);
  color: var(--text);
}

/* Filter toggle: small chevron affix on the search input that expands the
   assignee/sort popover. Dual-purposes the search box instead of adding a
   separate control to the topbar (which already wraps on narrow/PWA widths). */
.search-filter-toggle {
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: calc(0.25rem * var(--ui-scale));
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 2px;
}

.search-filter-toggle:hover,
.search-filter-toggle[aria-expanded="true"] {
  background: var(--border);
  color: var(--text);
}

/* Slow pulse/glow: the only visual indicator (besides the one-shot toast) that
   an assignee filter or non-default sort is currently narrowing the board. */
@keyframes filter-toggle-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 35%, transparent);
  }
  50% {
    box-shadow: 0 0 10px 4px color-mix(in srgb, var(--accent) 55%, transparent);
  }
}

.search-filter-toggle--active {
  color: var(--accent);
  animation: filter-toggle-pulse 2.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .search-filter-toggle--active {
    animation: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent);
  }
}

.no-results {
  text-align: center;
  padding: calc(2rem * var(--ui-scale));
  color: var(--muted);
  font-style: italic;
}

/* Desktop/tablet: keep .no-results out of the auto-fit grid so empty-search
   messaging cannot steal a lane track or compress columns. Mobile (≤620px)
   keeps .no-results as a normal flex sibling of .board. */
@media (min-width: 621px) {
  .board {
    position: relative;
  }

  .board > .no-results {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    pointer-events: none;
  }
}

/* ============================================
   BURNDOWN CHART
   ============================================ */

.charts-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: var(--s-16);
}

.chart-block {
  display: block;
  min-width: 0;
}

.burndown-chart {
  padding: var(--s-16);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.burndown-chart__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--s-12);
}

.burndown-chart__title {
  font-weight: 700;
  font-size: var(--fs-14);
  color: var(--text);
}

.burndown-chart__subtitle {
  font-size: var(--fs-12);
  margin-top: var(--s-2);
}

.burndown-chart__current {
  font-size: var(--fs-12);
  color: var(--muted);
}

.burndown-chart__subtitle-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-12);
  margin-top: var(--s-4);
}

.burndown-chart__subtitle-row .burndown-chart__subtitle {
  margin: 0;
}

.burndown-chart__nav-arrow {
  flex-shrink: 0;
  padding: 2px 6px;
  min-width: 0;
  font-size: var(--fs-12);
  color: var(--text);
  background: transparent;
  border: none;
  cursor: pointer;
  border-radius: var(--radius);
}
.burndown-chart__nav-arrow:hover:not(:disabled) {
  background: var(--border);
  color: var(--text);
}
.burndown-chart__nav-arrow:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.burndown-chart__container {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 300px;
}

.burndown-chart__uplot {
  width: 100%;
  min-height: 240px;
}

.burndown-chart__no-data {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  padding: 1rem;
  text-align: center;
}

.burndown-chart__footer {
  display: flex;
  gap: 16px;
  padding-top: 8px;
  font-size: 13px;
  color: var(--muted);
}

.burndown-chart__gap-marker {
  stroke: var(--border);
  stroke-width: 0.5;
  opacity: 0.35;
}

.burndown-chart__grid {
  stroke: var(--border);
  stroke-width: 0.5;
  opacity: 0.5;
}

.burndown-chart__grid-label {
  font-size: var(--fs-10);
  fill: var(--muted);
  dominant-baseline: hanging;
  text-anchor: start;
}

.burndown-chart__area {
  fill: var(--accent);
  opacity: 0.2;
}

.burndown-chart__line {
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.burndown-chart__line--points {
  stroke: #f59e0b;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.burndown-chart__line--flat {
  stroke-dasharray: 4 3;
}

.burndown-chart__point {
  fill: var(--accent);
  stroke: var(--bg);
  stroke-width: 1;
}

.burndown-chart__point--current {
  fill: var(--accent);
  stroke: var(--bg);
  stroke-width: 1.5;
}

.burndown-chart__point--points {
  fill: #f59e0b;
  stroke: var(--bg);
  stroke-width: 1;
}

.burndown-chart__scope-line {
  stroke: var(--muted);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.6;
}

.burndown-chart__scope-point {
  fill: var(--muted);
  stroke: var(--bg);
  stroke-width: 1;
  opacity: 0.6;
}

.burndown-chart__xaxis {
  position: relative;
  height: var(--s-20);
  margin-top: var(--s-4);
}

.burndown-chart__xaxis-label {
  position: absolute;
  transform: translateX(-50%);
  font-size: var(--fs-10);
  color: var(--muted);
  white-space: nowrap;
}

.burndown-chart__legend {
  display: flex;
  gap: var(--s-16);
  margin-top: var(--s-12);
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-11);
}

.burndown-chart__legend-item {
  display: flex;
  align-items: center;
  gap: var(--s-6);
}

.burndown-chart__legend-line {
  display: inline-block;
  width: var(--s-24);
  height: 2px;
  flex-shrink: 0;
}

.burndown-chart__legend-line.burndown-chart__line {
  background: var(--accent);
}

.burndown-chart__legend-line.burndown-chart__line--points {
  background: #f59e0b;
}

.burndown-chart__legend-line.burndown-chart__scope-line {
  background: var(--muted);
  opacity: 0.6;
  background-image: repeating-linear-gradient(to right,
      var(--muted) 0,
      var(--muted) 2px,
      transparent 2px,
      transparent 4px);
}

.burndown-chart__legend-label {
  color: var(--text);
  font-size: var(--fs-11);
}

/* ============================================
   CONTEXT MENU
   ============================================ */

.context-menu {
  position: fixed;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  padding: var(--s-4);
  z-index: 10000;
  min-width: 150px;
}

.context-menu__item {
  display: block;
  width: 100%;
  padding: var(--s-8) 12px;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text);
  cursor: pointer;
  border-radius: var(--radius-6);
  font-size: var(--fs-14);
  font-weight: 500;
  transition: background-color 0.2s;
}

.context-menu__item:hover,
.context-menu__item:focus-visible {
  background: var(--panel2);
}
.context-menu__item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}
@media (max-width: 767px) {
  .context-menu__item {
    min-height: 44px;
  }
}

/* ============================================
   TOAST & EMPTY STATES
   ============================================ */

.toast {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--s-10) 14px;
  color: var(--text);
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  max-width: min(720px, calc(100vw - 24px));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 2147483647;
}

.toast--show {
  opacity: 1;
}

.empty {
  padding: calc(72px * var(--ui-scale)) var(--s-16);
  text-align: center;
  color: var(--muted);
}

.empty__title {
  color: var(--text);
  font-weight: 800;
}

/* ============================================
   UTILITIES
   ============================================ */

.muted {
  color: var(--muted);
  font-size: var(--fs-13);
}

/* Reduce interruptions on mobile: no callout (Chrome search / Apple magnification), no accidental selection.
   Only apply to .board or specific views that need it; do NOT apply to body globally, or the projects
   list will not scroll on mobile. See .page--projects in the mobile media block for the override. */
.no-interruptions {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari/Chrome/Opera */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE/Edge */
  user-select: none;
  /* Standard */
  touch-action: manipulation;
  /* pan-x pan-y pinch-zoom; disables double-tap zoom delay */
}

/* Version label on login screen (bottom right) */
.app-version {
  position: fixed;
  bottom: 0;
  right: 0;
  padding: var(--s-6) 10px;
  font-size: var(--fs-12);
  color: var(--muted);
  opacity: 0.8;
  pointer-events: none;
}

/* Settings → Workflow: draft actions */
.settings-workflow-footer {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

@media (max-width: 768px) {
  .settings-workflow-footer {
    justify-content: center;
  }
}

/* Settings → Priorities: draft actions */
.settings-priorities-footer {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

@media (max-width: 768px) {
  .settings-priorities-footer {
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .page--auth .topbar {
    direction: ltr;
    flex-wrap: nowrap;
  }

  .page--auth .topbar .locale-picker {
    flex: 0 0 auto;
    margin-inline-start: auto;
  }

  .page--auth .topbar .auth-locale-select {
    min-width: min(148px, 45vw);
    max-width: 48vw;
  }
}


/* ==========================================================================
   Scrumbaby sticky-note wall dialog (Postbaby-parity).
   Fullscreen entered-screen; dark theme tokens scoped to #wallDialog so they
   do not leak into the rest of the Scrumboy UI. Durable projects only.
   ========================================================================== */
#wallDialog.dialog--wall-fullscreen {
  /* Scoped Postbaby dark tokens. */
  --wall-bg-page: #1a1b1a;
  --wall-bg-header: #202120;
  --wall-fg: #e6e6e1;
  --wall-fg-muted: #9a9b95;
  --wall-border: #2f302e;
  --wall-textarea-bg: #1f201e;
  --wall-textarea-border: #4a4b47;
  --wall-note-text: #111;
  --wall-note-shadow:
    0 4px 8px 0 rgba(0, 0, 0, 0.35),
    0 6px 20px 0 rgba(0, 0, 0, 0.3);
  --wall-trash-bg: rgba(255, 255, 255, 0.04);
  --wall-trash-bg-active: rgba(224, 87, 75, 0.24);
  --wall-trash-border: rgba(255, 255, 255, 0.08);

  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  transform: none;
  background: var(--wall-bg-page);
  color: var(--wall-fg);
  overflow: hidden;
}
#wallDialog.dialog--wall-fullscreen::backdrop {
  background: rgba(0, 0, 0, 0.85);
}

.wall-dialog__shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  position: relative;
  background: var(--wall-bg-page);
  color: var(--wall-fg);
}
.wall-logo {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 132px;
  height: auto;
  z-index: 1;
  pointer-events: none;
  user-select: none;
  opacity: 0.92;
}
.wall-shortcuts {
  position: absolute;
  left: 10px;
  bottom: 10px;
  color: var(--wall-fg-muted);
  font-size: 12px;
  line-height: 1.35;
  opacity: 0.8;
  font-family: "Kalam", sans-serif;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}
/* Floating close — glyph only (no chip); still a comfortable hit target. */
.wall-fit-btn {
  position: absolute;
  top: 10px;
  right: 54px;
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--wall-fg);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 1600;
}
.wall-fit-btn:hover { opacity: 0.75; }
.wall-fit-btn:focus-visible {
  outline: 2px solid var(--accent, #5aa3ff);
  outline-offset: 2px;
}

.wall-mode-toggle-btn {
  position: absolute;
  top: 10px;
  right: 98px;
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--wall-fg);
  cursor: pointer;
  z-index: 1600;
  opacity: 0.72;
  transition: opacity 120ms ease;
}
.wall-mode-toggle-btn svg {
  width: 24px;
  height: 24px;
  pointer-events: none;
}
.wall-mode-toggle-btn:hover {
  opacity: 0.9;
}
.wall-mode-toggle-btn:focus-visible {
  outline: 2px solid var(--accent, #5aa3ff);
  outline-offset: 2px;
}
.wall-mode-toggle-btn[aria-pressed="true"] {
  opacity: 1;
}

.wall-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  min-width: 40px;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--wall-fg);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 1400;
  transition: color 120ms ease, opacity 120ms ease;
}
.wall-close-btn:hover {
  opacity: 0.75;
}
.wall-close-btn:focus-visible {
  outline: 2px solid var(--accent, #5aa3ff);
  outline-offset: 2px;
}

.wall-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.wall-surface {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  /* Very light graph-paper grid to aid alignment without competing with notes. */
  background-color: var(--wall-bg-page);
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 24px 24px;
  outline: none;
  touch-action: none;
  user-select: none;
  cursor: default;
}
.wall-surface--readonly { cursor: default; }
.wall-surface--space-pan { cursor: grab; }
.wall-surface--space-pan.wall-surface--panning { cursor: grabbing; }
.wall-surface--pan-mode { cursor: grab; }
.wall-surface--pan-mode.wall-surface--panning { cursor: grabbing; }

.wall-note {
  position: absolute;
  box-sizing: border-box;
  padding: 16px 20px;
  border-radius: 15px;
  box-shadow: var(--wall-note-shadow);
  background: #4CAF50;
  color: var(--wall-note-text);
  z-index: 2;
  user-select: none;
  touch-action: none;
  cursor: grab;
  overflow: hidden;
  transition: box-shadow 120ms ease, transform 120ms ease;
}
.wall-note--dragging {
  cursor: grabbing;
  z-index: 1000;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.45),
    0 14px 40px rgba(0, 0, 0, 0.35);
  transition: none;
}
/* Selected notes pulled to a mid z-index so they float above unselected
   peers while a marquee or group drag is underway, without eclipsing the
   actively-dragged stack (1000). Outline is layout-neutral. */
.wall-note--selected {
  z-index: 3;
  outline: 2px solid var(--accent, #5aa3ff);
  outline-offset: 2px;
}
.wall-note--selected.wall-note--dragging {
  z-index: 1000;
}
/* Postbaby parity: `.grid-item` keeps the note color; only `.edit-textarea`
   uses `--textarea-bg`. Do not paint the whole note dark here. */
.wall-note--editing {
  cursor: text;
  border-radius: 10px; /* matches inner textarea; Postbaby tightens corners in edit */
}
.wall-surface--readonly .wall-note { cursor: default; }

/* Shared inner inset so display ↔ edit does not move text; breathing room
   between copy and the editor’s inset edge (same numbers on both). */
.wall-note__display,
.wall-note__editor {
  padding: 8px;
}

.wall-note__display {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: hidden;
  color: inherit;
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  pointer-events: none;
}
/* Inset ring only (no border) so layout matches `.wall-note__display`; thin
   line reads lighter next to the padded text block. */
.wall-note__editor {
  width: 100%;
  height: 100%;
  min-height: 40px;
  box-sizing: border-box;
  margin: 0;
  resize: none;
  border: none;
  border-radius: 10px;
  outline: none;
  background: var(--wall-textarea-bg);
  color: var(--wall-fg);
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  white-space: pre-wrap;
  overflow: hidden;
  box-shadow: inset 0 0 0 0.5px var(--wall-textarea-border);
}

.wall-note__resize-handle {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 16px;
  height: 16px;
  cursor: nwse-resize;
  opacity: 0.5;
  background:
    linear-gradient(135deg, transparent 40%, rgba(0,0,0,0.6) 40% 50%, transparent 50% 65%, rgba(0,0,0,0.6) 65% 75%, transparent 75%);
}
.wall-note__resize-handle:hover { opacity: 0.9; }

/* Edge overlay - SVG that connects notes via Shift+drag (Postbaby parity).
   The container ignores pointer events; only `.wall-edge-hit` opts in so the
   user can right-click a connection to delete it. Visual line is painted on
   top and is non-interactive. */
.wall-edge-overlay {
  overflow: visible;
  /* Below .wall-note (z-index: 2) so connections read like Postbaby */
  z-index: 0;
}
.wall-edge-hit:hover + .wall-edge-line,
.wall-edge-group:hover .wall-edge-line {
  stroke: #d6e8ff;
  stroke-opacity: 1;
  stroke-width: 3;
}

/* Wall trash image (scrumbabytrash.png) docked bottom-right — layout matches
   Postbaby's `.trash { position: fixed; bottom: 10px; right: 10px; ... }`. */
.wall-trash {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 100px;
  height: 100px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  opacity: 0.55;
  transition: transform 200ms ease, opacity 200ms ease, filter 200ms ease;
  z-index: 1500;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45));
}
.wall-trash--visible { opacity: 0.85; }
.wall-trash--active {
  opacity: 1;
  transform: scale(1.2);
  filter: drop-shadow(0 6px 14px rgba(224, 87, 75, 0.55));
}

/* Note right-click context menu. Reuses `.context-menu` base styling; this
   override raises it above wall notes and the edge overlay when painted
   inside the wall `<dialog>` top-layer. */
.wall-note-context-menu {
  z-index: 1300;
}

/* Marquee selection rectangle painted on `#wallSurface` during empty-canvas
   left-drag. Pointer-events disabled so the active pointermove/up listeners
   on document continue to fire untouched. */
.wall-marquee {
  position: absolute;
  border: 1px dashed var(--accent, #5aa3ff);
  background: rgba(90, 163, 255, 0.12);
  pointer-events: none;
  z-index: 1200;
}

.wall-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  color: var(--wall-fg-muted);
  font-size: 14px;
  pointer-events: none;
}
.wall-empty .muted { color: var(--wall-fg-muted); opacity: 0.75; }

/* ============================================
   RTL LAYOUT (Arabic)
   ============================================ */

[dir="rtl"] .locale-picker__button {
  text-align: right;
}

[dir="rtl"] .locale-picker__list {
  left: auto;
  right: 0;
}

[dir="rtl"] .todo-notes-tabs {
  margin-left: 0;
  margin-right: auto;
}

[dir="rtl"] .password-toggle {
  border-left: none;
  border-right: 1px solid var(--border);
}

[dir="rtl"] .dialog__footer .spacer {
  margin-left: 0;
  margin-right: auto;
}

@media (max-width: 767px) {
  [dir="rtl"] .dialog__footer .btn--danger {
    margin-left: 0;
    margin-right: auto;
  }
}

[dir="rtl"] .voice-command__tab {
  border-right: 0;
  border-left: 1px solid var(--border);
}

[dir="rtl"] .voice-command__tab:last-child {
  border-left: 0;
}

/* Multiple assignees: overlapping avatar stack on cards, chips in the dialog. */
.todo-avatars {
  display: flex;
  flex-shrink: 0;
}

.todo-avatars .todo-avatar + .todo-avatar {
  margin-left: -6px;
  box-shadow: 0 0 0 2px var(--panel);
}

.todo-avatar--more {
  background: var(--border);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}

.todo-assignee-chips {
  margin-bottom: var(--s-6);
  align-items: center;
}

.todo-assignee-chip .todo-avatar {
  width: 22px;
  height: 22px;
  font-size: 12px;
}

/* Card comment count badge (shown from zoom level 2, like Taiga). */
.card__comments {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  font-size: var(--fs-12);
  color: var(--muted, currentColor);
  opacity: 0.85;
}

/* Todo dialog comment thread. */
.todo-comments__list {
  display: flex;
  flex-direction: column;
  gap: var(--s-12, 12px);
  margin-bottom: var(--s-8, 8px);
}

.todo-comment {
  display: flex;
  gap: var(--s-8, 8px);
  align-items: flex-start;
}

.todo-comment__main {
  flex: 1;
  min-width: 0;
}

.todo-comment__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-6, 6px);
  font-size: var(--fs-13);
}

.todo-comment__tools {
  margin-left: auto;
  display: inline-flex;
  gap: var(--s-4);
}

.todo-comment__body {
  margin-top: 2px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.todo-comment__edit {
  width: 100%;
  margin-top: var(--s-4, 4px);
}

.todo-comment__actions {
  display: flex;
  gap: var(--s-6, 6px);
  margin-top: var(--s-4, 4px);
}

.todo-comments__composer {
  display: flex;
  gap: var(--s-8, 8px);
  align-items: flex-end;
}

.todo-comments__input {
  flex: 1;
  min-width: 0;
  resize: vertical;
}

/* === Ticket 26: image attachments (card dialog section, notes images, lightbox) === */
.todo-attachments__controls[hidden] { display: none; }
.todo-attachments__drop {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-8, 8px);
  padding: var(--s-12, 12px);
  border: 1px dashed var(--border);
  border-radius: 6px;
  margin-bottom: var(--s-8, 8px);
}
.todo-attachments__drop.is-dragover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.todo-attachments__hint { font-size: var(--fs-13); }
.todo-attachments__status { list-style: none; padding: 0; font-size: var(--fs-13); margin: 0 0 var(--s-8, 8px); }
.todo-attachments__status:empty { display: none; }
.todo-attachments__upload--error { color: var(--danger); }
.todo-attachment.todo-attachment--file {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: var(--s-8, 8px);
  padding: 6px 8px;
}
.todo-attachment--file .todo-attachment__info { flex: 1; padding: 0; }
.todo-attachment__ext {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background: var(--panel2);
  border: 1px solid var(--border);
  font-size: var(--fs-12);
  font-weight: 700;
}
.todo-attachment--file .todo-attachment__delete { position: static; }
.todo-attachment__download { min-width: 28px; min-height: 28px; }
/* The card's text editors (notes, comment box): drop cue and inline upload errors. */
.todo-notes-input.is-drop-target,
textarea.is-drop-target { outline: 2px dashed var(--accent); outline-offset: 2px; }
.md-editor__errors { list-style: none; margin: 4px 0 0; padding: 0; color: var(--danger); font-size: var(--fs-13); }
.md-editor__errors:empty { display: none; }
.todo-comment__editor { flex: 1; min-width: 0; }
.todo-comment__tabs:not([hidden]) { display: flex; justify-content: flex-end; margin-bottom: 4px; }
#todoDialog .todo-comment__body.is-markdown { white-space: normal; min-height: 0; background: none; padding: 0; }
.todo-comment__body.is-markdown > :first-child { margin-top: 0; }
.todo-comment__body.is-markdown > :last-child { margin-bottom: 0; }

/* === Ticket 31: rich text editor (notes + comments) and the attach-files dialog === */
.todo-notes-editor.is-drop-target { outline: 2px dashed var(--accent); outline-offset: 2px; }
.todo-notes-tab { min-height: 24px; padding: 2px 6px; }
#todoDialog .todo-markdown-preview.md-rich { background: transparent; position: relative; overflow-wrap: anywhere; }
#todoDialog .md-rich[contenteditable="true"] { cursor: text; }
.md-rich:focus { outline: none; }
#todoDialog .todo-comment__editor .md-rich { min-height: 5.5rem; }
.md-rich.is-empty::before {
  content: attr(data-placeholder);
  color: var(--muted);
  pointer-events: none;
  position: absolute;
}
.md-rich li:has(> .md-task, > p:first-child > .md-task) { list-style: none; margin-left: -1.25em; }
.md-rich .md-task { margin: 0 6px 0 0; vertical-align: -2px; width: 16px; height: 16px; accent-color: var(--accent); }
.md-rich pre.md-raw { border: 1px dashed var(--border); white-space: pre-wrap; }
.md-rich pre { white-space: pre-wrap; }
.md-rich .md-mermaid-preview { margin: 4px 0 12px; user-select: none; }
.md-rich .todo-markdown-image { display: inline-block; max-height: 360px; vertical-align: top; }
.md-file-chip {
  align-items: center;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  display: inline-flex;
  font-size: var(--fs-13);
  gap: 4px;
  max-width: 100%;
  padding: 2px 10px;
  text-decoration: none;
  vertical-align: middle;
}
#todoDialog .todo-markdown-preview a.md-file-chip { color: var(--text); text-decoration: none; }
.md-upload {
  align-items: center;
  border: 1px dashed var(--border);
  border-radius: 6px;
  color: var(--muted);
  display: inline-flex;
  font-size: var(--fs-13);
  gap: 8px;
  max-width: 100%;
  padding: 6px 10px;
  user-select: none;
  vertical-align: middle;
}
.md-upload--image {
  background: var(--panel2);
  flex-direction: column;
  height: 120px;
  justify-content: center;
  text-align: center;
  width: min(220px, 100%);
}
.md-upload__spinner {
  animation: md-upload-spin 0.8s linear infinite;
  border: 2px solid currentColor;
  border-radius: 50%;
  border-top-color: transparent;
  flex: none;
  height: 16px;
  width: 16px;
}
@keyframes md-upload-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .md-upload__spinner { animation: none; border-top-color: currentColor; opacity: 0.6; } }
.attach-dialog { width: min(560px, calc(100vw - 32px)); }
.attach-dialog__drop {
  align-items: center;
  border: 2px dashed var(--border);
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 32px 16px;
  text-align: center;
}
.attach-dialog__drop:hover,
.attach-dialog__drop.is-dragover {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border-color: var(--accent);
}
.attach-dialog__drop:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.attach-dialog__drop-text { font-size: var(--fs-14, 14px); font-weight: 600; }
.attach-dialog__limit { font-size: var(--fs-13); }
.attach-dialog__pick { display: flex; justify-content: center; margin: 12px 0; }
.attach-dialog__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; list-style: none; margin: 0; max-height: 40vh; overflow: auto; padding: 0; }
.attach-dialog__list:empty { display: none; }
.attach-dialog__item { align-items: center; border: 1px solid var(--border); border-radius: 6px; display: flex; gap: 10px; padding: 8px; }
.attach-dialog__thumb { border-radius: 4px; flex: none; height: 40px; object-fit: cover; width: 40px; }
.attach-dialog__info { flex: 1; min-width: 0; }
.attach-dialog__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-dialog__meta { color: var(--muted); font-size: var(--fs-13); }
.attach-dialog__item--error .attach-dialog__status { color: var(--danger); }
.attach-dialog__remove { min-height: 32px; min-width: 32px; }
@media (max-width: 767px) {
  .todo-notes-tab { min-height: 44px; padding: 0 10px; }
  .attach-dialog__remove,
  .attach-dialog__pick .btn { min-height: 44px; min-width: 44px; }
  .attach-dialog__drop { padding: 24px 12px; }
}
.todo-attachments__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--s-12, 12px);
}
.todo-attachments__empty { grid-column: 1 / -1; }
.todo-attachment {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--panel);
  overflow: hidden;
}
.todo-attachment__thumb {
  display: block;
  width: 100%;
  height: 120px;
  padding: 0;
  border: 0;
  background: var(--panel2);
  cursor: zoom-in;
}
.todo-attachment__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; } /* ticket 30: the top of a phone capture, not its empty middle */
.todo-attachment__thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.todo-attachment__info { padding: 6px 8px; min-width: 0; }
.todo-attachment__name { font-size: var(--fs-13); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.todo-attachment__meta { font-size: var(--fs-12); overflow-wrap: anywhere; }
.todo-attachment__delete {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 28px;
  min-height: 28px;
  background: var(--panel);
  border: 1px solid var(--border);
}
.todo-markdown-image { max-width: 100%; height: auto; border-radius: 4px; }
.attachment-lightbox {
  max-width: min(96vw, 1400px);
  max-height: 94vh;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
}
.attachment-lightbox::backdrop { background: rgba(0, 0, 0, 0.75); }
.attachment-lightbox__bar {
  display: flex;
  align-items: center;
  gap: var(--s-8, 8px);
  padding: 6px 8px 6px 12px;
  border-bottom: 1px solid var(--border);
}
.attachment-lightbox__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.attachment-lightbox__img { display: block; max-width: min(96vw, 1400px); max-height: calc(94vh - 48px); margin: 0 auto; object-fit: contain; }
@media (max-width: 767px) {
  .todo-attachments__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .todo-attachment__thumb { height: 100px; }
  .todo-attachment__delete,
  .todo-attachment__download,
  .attachment-lightbox__close,
  .todo-attachments__add { min-width: 44px; min-height: 44px; }
}

/* Members dialog: create an account for someone new and add them in one step. */
.members-create-user {
  border-top: 1px solid var(--border);
  margin-top: var(--s-16, 16px);
  padding-top: var(--s-12, 12px);
}

.members-create-user summary {
  cursor: pointer;
  font-weight: 500;
  margin-bottom: var(--s-8, 8px);
}

.members-create-user__hint {
  font-size: var(--fs-13);
  margin-bottom: var(--s-8, 8px);
}

/* Audit Log */
.audit-filters { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; margin: 12px 0; }
.audit-filters label { display: flex; flex-direction: column; gap: 4px; font-size: .9em; }
.audit-filters__groups { display: flex; flex-wrap: wrap; gap: 6px; border: 0; padding: 0; margin: 0; }
.audit-filters__groups label { flex-direction: row; align-items: center; }
.audit-table-wrap { overflow-x: auto; }
.audit-table { width: 100%; border-collapse: collapse; font-size: .92em; }
.audit-table th, .audit-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border, rgba(127,127,127,.2)); vertical-align: top; }
.audit-card--deleted { text-decoration: line-through; opacity: .75; }
.todo-timeline__audit-link { float: right; font-size: .9em; }

/* === Ticket 06: Audit log as a Taiga timeline === */
/* Stream: 32px round avatar, bold actor + sentence with teal links, time at the right, 1px separators. */
.audit-stream { margin: 8px 0 0; }
.audit-event > * { vertical-align: middle; }
.audit-event__when { white-space: nowrap; width: 1%; }
.audit-event__time { color: var(--muted); font-size: 13px; }
.audit-event__who { text-align: start; font-weight: 400; white-space: nowrap; padding: var(--s-6) var(--s-16); border-bottom: 1px solid var(--border); }
.audit-event__project { white-space: nowrap; }
.audit-event__changes { min-width: 11rem; }
.audit-event__actor { font-weight: 600; }
.audit-event__line { white-space: nowrap; }
.audit-event__card { overflow-wrap: anywhere; min-width: 10rem; }
.audit-event__changes { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.audit-event__details { display: block; }
.audit-event a { color: var(--accent); text-decoration: none; }
.audit-event a:hover { text-decoration: underline; }
.audit-event a:focus-visible, .audit-event__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.audit-event .audit-card--deleted { opacity: 1; } /* the strike-through marks it */
.audit-event__more { width: 1%; }
.audit-event__toggle { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 4px; }
.audit-event__toggle:hover { color: var(--text); }
.audit-event__toggle[aria-expanded="true"] .audit-event__toggle-icon { transform: rotate(90deg); }
.audit-event__toggle-icon { display: inline-block; transition: transform .15s; }
.audit-row__meta-row > td { padding: 0 var(--s-16) var(--s-12); }
.audit-row__meta { padding: 8px; border-radius: 4px; background: var(--bg); }
.audit-row__meta p { margin: 0 0 4px; }
.audit-meta { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; margin: 0; font-size: 13px; }
.audit-meta__row { display: contents; }
.audit-meta dt { color: var(--muted); }
.audit-meta dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.audit-meta__raw { margin-top: 8px; font-size: 12px; color: var(--muted); }
.audit-meta__raw summary { cursor: pointer; }
.audit-meta__raw pre { margin-top: 4px; }
.audit-row__meta pre { margin: 0; white-space: pre-wrap; font-size: 12px; }
/* The tab's filters in the left panel: full-width text/number fields, activity chips wrap. */
.two-pane__side .audit-filters input:is([type="text"], [type="number"]) { width: 100%; min-height: 32px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--content-bg); color: var(--text); font: inherit; font-size: 14px; }
.two-pane__side .audit-filters__groups legend { margin-bottom: 6px; font-size: 14px; font-weight: 500; color: var(--text); }
.two-pane__side .audit-filters__groups label { font-size: 13px; font-weight: 400; min-height: 28px; }
.two-pane__side #auditClearBtn { align-self: flex-start; }
.two-pane__side .audit-filters__hint { font-size: 12px; font-weight: 400; }
@media (max-width: 767px) {
  /* Phones: each activity stacks — "who · what · when ▸", then card / project, then changes. */
  .audit-stream thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .audit-stream .audit-event { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-8); padding: var(--s-8) var(--s-12); border-bottom: 1px solid var(--border); }
  .audit-stream .audit-event > * { padding: 0; border: 0; width: auto; min-width: 0; }
  .audit-event__who { order: 0; }
  .audit-event__line { order: 1; }
  .audit-event__when { order: 2; flex: 1 0 auto; }
  .audit-event__more { order: 3; margin-inline-start: auto; }
  .audit-event__card { order: 4; flex: 1 0 60%; }
  .audit-event__project { order: 5; }
  .audit-event__changes { order: 6; flex: 1 0 100%; }
  .audit-event__project::before { content: "· "; color: var(--muted); }
  .audit-event__toggle { min-height: 44px; min-width: 44px; }
  .audit-row__meta-row, .audit-row__meta-row > td { display: block; }
  .audit-row__meta-row[hidden] { display: none; }
  .two-pane__side .audit-filters input:is([type="text"], [type="number"]) { min-height: 44px; }
  .two-pane__side .audit-filters__groups label { min-height: 44px; }
}
/* === end Ticket 06 === */

/* === Ticket 05: shared two-pane layout, Taiga tabs, tables and figures (Work overview first) === */
/* Two-pane page (Taiga Team / Search): a #f9f9fb 300px left panel beside the white main area. */
.two-pane { display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: stretch; padding: 0; min-height: calc(100vh - var(--shell-topbar-h)); }
.two-pane__side { background: var(--side-panel-bg); border-right: 1px solid var(--border); padding: 16px; min-width: 0; }
.two-pane__main { padding: 16px; min-width: 0; }
.two-pane__title, .page-title { margin: 0 0 12px; color: var(--accent-title); font-size: var(--page-title-size); font-weight: 500; line-height: 1.3; }
.two-pane__side .audit-filters { flex-direction: column; align-items: stretch; gap: 12px; margin: 0 0 12px; }
.two-pane__side .audit-filters label { font-size: 14px; font-weight: 500; color: var(--text); }
.two-pane__side select, .two-pane__side input[type="date"] { width: 100%; min-height: 32px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--content-bg); color: var(--text); font: inherit; font-size: 14px; }
.two-pane__side select:focus-visible, .two-pane__side input:focus-visible, .two-pane__side .reports-filter > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.two-pane a:where(:not(.tg-tab, .two-pane__option, .shell-item)) { color: var(--accent); }
.two-pane__main .reports-person { background: var(--content-bg); }
/* Option list (Taiga filter list): the current one teal with a ›. */
.two-pane__options { display: flex; flex-direction: column; margin: 0 -16px 12px; border-top: 1px solid var(--border); }
.two-pane__option { display: flex; align-items: center; min-height: 44px; padding: 8px 16px; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; font-size: 14px; }
.two-pane__option:hover { background: var(--content-bg); }
.two-pane__option.is-active { background: var(--content-bg); color: var(--accent); font-weight: 600; }
.two-pane__option.is-active::after { content: "›"; margin-left: auto; padding-left: 8px; font-size: 18px; }
.two-pane__option:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* People / project pickers open inside the panel instead of as popovers. */
.two-pane__side .reports-filter { position: static; }
.two-pane__side .reports-filter > summary { display: flex; min-height: 32px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--content-bg); cursor: pointer; font-size: 14px; }
.two-pane__side .reports-filter > summary::after { margin-left: auto; }
.two-pane__side .reports-filter[open] > summary::after { content: "▴"; }
.two-pane__side .reports-filter__menu { position: static; min-width: 0; max-width: none; max-height: 240px; margin-top: 4px; box-shadow: none; background: var(--content-bg); }
.two-pane__side .reports-controls .reports-filter__option { white-space: normal; min-height: 24px; }
/* Taiga tabs: bordered, the current one white and joined to the content; others grey. In-page data tabs only. */
.tg-tabs { display: flex; flex-wrap: wrap; margin: 8px 0 12px; border-bottom: 1px solid var(--border); }
.tg-tab { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; margin-bottom: -1px; border: 1px solid transparent; border-radius: 0;
  background: none; color: var(--muted); font: inherit; font-size: 14px; text-decoration: none; cursor: pointer; }
.tg-tab:hover { color: var(--text); }
.tg-tab.is-active { border-color: var(--border); border-bottom-color: var(--content-bg); background: var(--content-bg); color: var(--text); font-weight: 500; }
.tg-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Taiga tables: bold header row, 1px separators, teal links. */
.tg-table { font-size: 14px; }
.tg-table thead th { font-weight: 600; color: var(--text); border-bottom: 1px solid var(--border); }
.tg-table th, .tg-table td { padding: 8px; }
.tg-table a { color: var(--accent); text-decoration: none; }
.tg-table a:hover { text-decoration: underline; }
.tg-table a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tg-table .reports-fig { color: var(--accent); text-decoration: none; }
/* Summary figures: label over a large number. */
.tg-figures { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 16px; }
.tg-figure { flex: 1 1 140px; display: flex; flex-direction: column-reverse; gap: 2px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 4px; background: var(--side-panel-bg); }
.tg-figure dt { color: var(--text); font-size: 13px; }
.tg-figure dd { margin: 0; font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; }
.tg-figure .reports-fig { color: var(--accent); text-decoration: none; font-weight: 500; }
.tg-figure .reports-fig:hover { text-decoration: underline; }
.page--reports .reports-header, .page--project-report .reports-header { margin: 0 0 8px; }
@media (max-width: 767px) {
  /* The filter panel stacks above the main area. */
  .two-pane { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .two-pane__side { border-right: 0; border-bottom: 1px solid var(--border); }
  .shell-item.shell-item--sub { height: 44px; }
  .tg-tabs { flex-wrap: nowrap; overflow-x: auto; }
  .tg-tab { min-height: 44px; flex: none; white-space: nowrap; }
  .two-pane__side .reports-filter > summary, .two-pane__side select, .two-pane__side input[type="date"] { min-height: 44px; }
  .two-pane__side .reports-controls .reports-filter__option { min-height: 44px; }
}
@media (max-width: 620px) {
  .page--reports .container.two-pane, .page--project-report .container.two-pane { display: block; overflow-y: auto; padding: 0; }
}
/* Work overview sub-pages: indented sidebar sub-items under Work overview. */
.shell-item--sub { height: 40px; padding-left: 52px; font-size: 14px; }
.shell-item--sub svg { display: none; }
/* === end Ticket 05 === */

/* Work overview (/reports) */
.reports-container { padding-bottom: 32px; }
.reports-header { margin: 12px 0 4px; }
.reports-title { font-size: var(--fs-20, 1.25rem); margin: 0; }
/* === Ticket 23: project log refused to non-maintainers === */
.project-report__denied { margin: 12px 0 16px; color: var(--text); font-size: var(--fs-14); }
/* === Ticket 28 F2: Work overview explanation page for signed-in users without report access === */
.reports__denied { margin: 12px 0 16px; color: var(--text); font-size: var(--fs-14); }
.reports-header p { margin: 2px 0 0; }
.reports-controls { align-items: center; }
.reports-controls label[hidden] { display: none; }
.reports-filter { position: relative; }
.reports-filter > summary { list-style: none; display: inline-flex; gap: 4px; align-items: center; }
.reports-filter > summary::-webkit-details-marker { display: none; }
.reports-filter > summary::after { content: "▾"; opacity: .7; }
.reports-filter__menu { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 200px; max-width: calc(100vw - 32px); max-height: 280px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px; padding: 6px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-6, 6px);
  box-shadow: var(--card-shadow-hover, 0 3px 8px rgba(0,0,0,.2)); }
.reports-controls .reports-filter__option { flex-direction: row; align-items: center; gap: 6px; padding: 4px 6px; white-space: nowrap; font-size: .92em; }
/* Phones: the menu spans the controls row (inside the page gutter) instead of hanging off its chip. */
@media (max-width: 480px) {
  .reports-controls { position: relative; }
  .reports-filter { position: static; }
  .reports-filter__menu { left: 0; right: 0; min-width: 0; max-width: none; }
  .reports-controls .reports-filter__option { white-space: normal; }
}
.reports-table-wrap { margin-top: 4px; }
.reports-table { font-variant-numeric: tabular-nums; }
/* Ticket 19: headers wrap (min 6em) so the last column is never clipped at 1440px. */
.reports-table thead th { font-weight: 600; white-space: normal; min-width: 6em; vertical-align: bottom; }
.reports-table th[title] { cursor: help; }
.reports-table__groups th { text-align: center; color: var(--muted); font-size: .85em; text-transform: none; }
.reports-table .reports-group-start { border-left: 1px solid var(--border); }
.reports-table td { white-space: nowrap; }
.reports-person { position: sticky; left: 0; z-index: 1; background: var(--bg); min-width: 140px; text-align: left; font-weight: 500; }
.reports-expander { display: inline-flex; gap: 6px; align-items: baseline; padding: 2px 4px; margin: -2px -4px; border: 0; background: none; color: inherit;
  font: inherit; text-align: left; cursor: pointer; border-radius: var(--radius, 4px); }
.reports-expander__icon { display: inline-block; transition: transform .15s ease; opacity: .7; }
.reports-expander[aria-expanded="true"] .reports-expander__icon { transform: rotate(90deg); }
.reports-expander:focus-visible, .reports-fig:focus-visible, .reports-filter > summary:focus-visible, #reportsTabBtn:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; }
.reports-fig { color: inherit; font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent); text-underline-offset: 3px; }
.reports-fig:hover { color: var(--accent); }
.reports-zero { color: var(--muted); }
.reports-unknown { color: var(--muted); font-size: .85em; margin-left: 4px; }
.reports-row:hover > * { background: color-mix(in srgb, var(--text) 5%, var(--bg)); }
.reports-table__summary tr:first-child > * { border-top: 2px solid var(--border); }
.reports-row--total .reports-person, .reports-row--queue .reports-person { font-weight: 600; }
.reports-detail > td { background: color-mix(in srgb, var(--text) 3%, var(--bg)); white-space: normal; }
.reports-detail__groups { display: flex; flex-wrap: wrap; gap: 12px 32px; position: sticky; left: 0; max-width: calc(100vw - 48px); }
.reports-detail__groups h3 { font-size: .85em; color: var(--muted); margin: 4px 0 6px; font-weight: 600; }
.reports-detail__list, .reports-defs { display: grid; grid-template-columns: max-content auto; gap: 4px 16px; margin: 0; }
.reports-detail__list > div, .reports-defs > div { display: contents; }
.reports-detail__list dt, .reports-defs dt { color: var(--muted); }
.reports-detail__list dd, .reports-defs dd { margin: 0; }
.reports-incomplete { padding: 8px 12px; border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: var(--radius, 4px); }
.reports-note { margin-top: 12px; font-size: .9em; }
.report-tags__sort { margin: 8px 0; }
.report-tags__totals { margin: 8px 0 12px; }
.report-tags__totals h3 { font-size: var(--fs-13, .85rem); margin: 0 0 4px; }
.report-tags__table th[scope="row"] { overflow-wrap: anywhere; }
.reports-defs { font-size: .88em; margin-top: 8px; }
/* Tag detail (/reports/tags/cards): status tabs, then work in the range */
.report-tag-detail__links { display: flex; flex-wrap: wrap; gap: 16px; margin: 4px 0 8px; }
.report-tag-detail__status, .report-tag-detail__range { margin-top: 16px; }
.report-tag-detail__status h3, .report-tag-detail__range h3 { font-size: var(--fs-16, 1rem); margin: 0 0 4px; }
.report-tag-detail__range h4 { font-size: var(--fs-13, .9rem); margin: 16px 0 6px; }
.report-tag-detail__tabs { margin: 8px 0 12px; }
.report-tag-detail__sort { border: 0; background: none; color: inherit; font: inherit; font-weight: inherit; cursor: pointer; padding: 0; text-align: left; }
.report-tag-detail__sort:focus-visible, .report-tag-detail__links a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.report-tag-detail__selected th, .report-tag-detail__selected td { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.report-tag-detail__with { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.report-card__blocked { color: var(--danger, #c0392b); }
/* Work overview drill-down (/reports/cards) and system Audit Log tab */
.report-cards__back { display: inline-block; margin-bottom: 6px; }
.report-cards__title { font-size: var(--fs-16, 1rem); margin: 0 0 4px; overflow-wrap: anywhere; }
.report-cards__figure { font-variant-numeric: tabular-nums; }
.report-cards__views { margin: 8px 0 12px; }
.report-cards__views .chip, .report-card__links a, .report-cards__back { text-decoration: none; }
.report-cards__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
/* /reports/cards as a table: one row per card, the full card in a toggled detail row below it. */
.report-cards__table { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-6, 6px); }
.report-cards__row > th { font-weight: 500; text-align: start; overflow-wrap: anywhere; padding: var(--s-8) var(--s-16); border-bottom: 1px solid var(--border); }
@media (min-width: 768px) { .report-cards__row > th { min-width: 16rem; } }
.report-cards__row .dashboard-todo__id { color: var(--accent); font-weight: 600; }
.report-cards__project { display: block; color: var(--muted); font-size: var(--fs-13); font-weight: 400; }
.report-cards__num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.report-cards__num .muted { display: block; font-size: var(--fs-12); }
.report-cards__toggle-cell { width: 1%; text-align: end; }
.report-cards__toggle { white-space: nowrap; }
.report-cards__table--status td.report-card__links { display: table-cell; margin: 0; white-space: nowrap; }
.report-cards__table--status td.report-card__links a + a { margin-inline-start: var(--s-16); }
.report-cards__row:has(+ .report-cards__detail:not([hidden])) > * { border-bottom-color: transparent; }
.report-cards__row--deleted th { opacity: .8; }
.report-cards__detail > td { padding: 0 var(--s-16) var(--s-12); }
/* Keep the colspan detail from sizing the columns: it takes the table's width, never sets it. */
.report-cards__detail > td > .report-cards__list { width: 0; min-width: 100%; }
.report-cards__row > td:nth-child(2) { min-width: 6rem; }
.report-cards__detail .report-card { background: transparent; }
/* The outer .dashboard-table cell rules must not reach the card's own times table. */
.report-cards__detail .report-card__times th, .report-cards__detail .report-card__times td { padding: 2px 12px 2px 0; border: 0; white-space: normal; }
@media (max-width: 767px) {
  .report-cards__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .report-cards__row { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-16); padding: var(--s-8) var(--s-12); border-bottom: 1px solid var(--border); }
  .report-cards__row > th { flex: 1 0 100%; padding: 0; border: 0; }
  .report-cards__row > td { padding: 0; border: 0; }
  .report-cards__row > td[data-label]::before { content: attr(data-label); display: block; color: var(--muted); font-size: var(--fs-12); }
  .report-cards__toggle-cell { width: auto; margin-inline-start: auto; align-self: flex-end; }
  .report-cards__toggle { min-height: 44px; }
  .report-cards__detail, .report-cards__detail > td { display: block; }
  .report-cards__detail[hidden] { display: none; }
  .report-cards__detail > td { padding: 0 var(--s-12) var(--s-12); }
}
.report-card { border: 1px solid var(--border); border-radius: var(--radius-6, 6px); padding: 10px 12px; background: var(--panel); min-width: 0; overflow-wrap: anywhere; }
.report-card--deleted { opacity: .85; border-style: dashed; }
.report-card__head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.report-card__title { font-weight: 600; margin-right: 4px; }
.report-card__head .chip { font-size: .8em; padding: 1px 8px; }
.report-card__deleted { color: var(--danger, #c0392b); }
.report-card__status, .report-card__rounds, .report-card__note { margin: 6px 0 0; font-size: .92em; }
.report-card__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 4px 16px; margin: 8px 0 0; font-size: .9em; }
.report-card__facts dt { color: var(--muted); font-size: .9em; }
.report-card__facts dd { margin: 0; }
.report-card__times { margin-top: 8px; border-collapse: collapse; font-size: .9em; font-variant-numeric: tabular-nums; }
.report-card__times th, .report-card__times td { text-align: left; padding: 2px 12px 2px 0; vertical-align: top; }
.report-card__times thead th { color: var(--muted); font-weight: 500; }
.report-card__times tbody th { font-weight: 500; }
.report-card__segments { margin-top: 6px; font-size: .88em; }
.report-card__segments ul { margin: 4px 0 0; padding-left: 18px; }
.report-card__links { display: flex; gap: 16px; margin-top: 8px; }
.report-card__links a:focus-visible, .report-cards__back:focus-visible, .report-cards__views .chip:focus-visible, .report-card__segments summary:focus-visible,
.audit-ref-chip__clear:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.audit-filters__hint { font-size: .85em; max-width: 220px; }
.audit-ref-chip { display: inline-flex; align-items: center; gap: 6px; }
.audit-ref-chip__clear { border: 0; background: none; color: inherit; font: inherit; cursor: pointer; padding: 0 4px; border-radius: var(--radius, 4px); }
@media (max-width: 620px) {
  .reports-defs { grid-template-columns: 1fr; }
  .reports-defs dd { margin-bottom: 6px; }
  .reports-person { min-width: 110px; max-width: 45vw; white-space: normal; }
  .report-card__times { width: 100%; }
  .report-card__times th, .report-card__times td { padding-right: 6px; }
}

/* === Ticket 14: target sizes (≥24×24 on desktop, ≥44×44 at ≤767px; the visual may stay small) === */
.todo-notes-tab,
.bfp-link,
.bfp-mode__option {
  min-height: 24px;
}
.bfp-mode__option { display: inline-flex; align-items: center; }
.bfp-link { min-width: 24px; }
.tag-chip-remove { position: relative; }
/* Inline field error (e.g. a required prompt): next to the field, announced by role=alert. */
.field__error { margin: var(--s-6) 0 0; color: var(--danger-text); font-size: var(--fs-13); }
.field__error[hidden] { display: none; }
/* Card dialog: Move up / Move down (drag alternative), under the status. */
.todo-order { display: flex; gap: var(--s-8); padding-bottom: var(--s-12); }
.todo-order[hidden] { display: none; }
.tag-chip-remove::after { content: ""; position: absolute; inset: -4px; }
@media (max-width: 767px) {
  .tag-chip-remove::after { inset: -14px; }
  #todoDialog :is(.btn, .input, .select, .todo-notes-tab, .todo-notes-format__btn, .todo-section__bar) { min-height: 44px; }
  #todoDialog .todo-notes-format__btn,
  #todoDialog .btn { min-width: 44px; }
  #boardMoreMenu .board-more__item,
  .bfp-cat__btn,
  .bfp-link,
  .bfp-mode__option { min-height: 44px; }
  .bfp-link { min-width: 44px; min-height: 44px; }
  /* Invisible hit-area extension for small chips that keep their look. */
  .shell-crumb__root,
  .shell-topbar .user-avatar,
  .topbar--anon .user-avatar {
    position: relative;
    overflow: visible;
  }
  .shell-crumb__root::after,
  .shell-topbar .user-avatar::after,
  .topbar--anon .user-avatar::after {
    content: "";
    position: absolute;
    inset: -9px -4px;
  }
  .shell-topbar .user-avatar::after,
  .topbar--anon .user-avatar::after {
    inset: -6px;
  }
  .shell-switch__btn { min-height: 44px; }
  .board-bar #newTodoBtn,
  .board-bar #boardMoreBtn {
    min-width: 44px;
    min-height: 44px;
  }
  .board-toolbar #searchFilterToggle,
  .board-toolbar .search-input { min-height: 44px; }
  .mobile-tab { min-width: 44px; }
  #notification-panel-mark-all { min-height: 44px; }
}

/* === Ticket 37: 44px hit areas on phones for Settings, reports, audit, archive and sign-in (the look stays; only the box grows) === */
@media (max-width: 767px) {
  #settingsDialog :is(.btn, .input, select, input[type="color"], input[type="file"], input[type="range"], input[type="datetime-local"], input[type="time"], .burndown-chart__nav-arrow),
  #settingsLocaleSelect,
  #authLocaleSelect,
  #authPasswordToggle,
  #auditLoadMoreBtn,
  #cardsLoadMoreBtn,
  #archiveSelectAllBtn,
  .reports-expander,
  .report-card__segments > summary {
    min-height: 44px;
  }
  #settingsDialog :is(.btn, input[type="color"], .burndown-chart__nav-arrow),
  #authPasswordToggle { min-width: 44px; }
  /* Checkbox/radio rows: the whole label is the target. */
  #settingsDialog label:has(> input:is([type="checkbox"], [type="radio"])) {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .report-card__segments > summary { padding-block: 12px; } /* keeps the disclosure marker (display stays list-item) */
  .report-card__links a,
  .report-cards__back {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  #profileAvatarBtn { position: relative; }
  #profileAvatarBtn::after { content: ""; position: absolute; inset: -6px; }
}
/* === end Ticket 37 === */

/* === Ticket 14: lanes stay on one row and scroll sideways (Taiga), also with the filter panel open.
   The "wrap lanes" preference (.board--wrapped, ≥1301px) keeps its grid. === */
@media (min-width: 768px) {
  .board:not(.board--wrapped) {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
    padding-bottom: var(--s-4);
  }
  /* Ticket 19: lanes share the width between a min and a max, so five lanes fit a 1440px screen
     with the filter panel open; the board scrolls sideways only below the min. */
  .board:not(.board--wrapped) > .col {
    flex: 1 1 0;
    min-width: 176px;
    max-width: 360px;
  }
  .board:not(.board--wrapped) > .col.col--folded {
    flex: 0 0 46px;
    min-width: 46px;
  }
}

/* === Ticket 14: anonymous temporary board on phones: one row, the name truncates with an ellipsis. === */
@media (max-width: 620px) {
  .topbar.topbar--anon {
    flex-wrap: nowrap;
    column-gap: var(--s-4);
  }
  .topbar.topbar--anon::after,
  .topbar--anon > .brand:first-child {
    display: none; /* no second row; the logo gives its room to the name */
  }
  .topbar.topbar--anon > * {
    order: 0;
    margin-top: 0;
    margin-right: 0;
  }
  .topbar.topbar--anon > [data-shell-project-name] {
    flex: 2 1 90px;
    width: auto;
    max-width: none;
    min-width: 0;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar.topbar--anon > .spacer { display: none; }
  .topbar.topbar--anon > .search-input-wrapper { flex: 1 1 56px; min-width: 0; margin-right: 0; }
  .topbar.topbar--anon .btn { min-height: 44px; }
  .topbar.topbar--anon #renameProjectBtn { padding-left: var(--s-6); padding-right: var(--s-6); }
}

/* === Ticket 16: shared collapsible filter panel (views/filter-panel.ts) === */
/* The board's Filters button (icon, label, badge), anywhere outside the board toolbar. */
.filter-toggle {
  display: inline-flex; align-items: center; gap: var(--s-6); flex: none;
  min-height: 32px; padding: 0 var(--s-8); border: 0; border-radius: var(--radius);
  background: var(--toolbar-btn-bg); color: var(--accent); font: inherit; font-size: var(--fs-14); white-space: nowrap; cursor: pointer;
  animation: none; box-shadow: none; /* the badge replaces the search chevron pulse */
}
.filter-toggle:hover, .filter-toggle[aria-expanded="true"] { background: var(--panel2); }
.filter-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Panel header: title + the round « hide button (like the sidebar's collapse button). */
.filter-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.filter-panel__head > :first-child { margin: 0; }
.bfp .filter-panel__head { margin-bottom: 8px; color: var(--accent); font-size: var(--fs-16); }
.filter-panel__collapse { position: relative; flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); cursor: pointer; }
.filter-panel__collapse:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); }
.filter-panel__collapse-icon, .filter-panel__close-icon { display: inline-grid; place-items: center; }
.filter-panel__close-icon { display: none; }
.filter-panel__collapse:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Collapsed: the panel is gone and the main area takes the full width; the Filters button reopens it. */
[data-filter-panel][data-collapsed] { display: none !important; }
.two-pane:has(> [data-filter-panel][data-collapsed]) { grid-template-columns: minmax(0, 1fr); }
.members-dialog__body:has(> [data-filter-panel][data-collapsed]) { grid-template-columns: minmax(0, 1fr); }
.dashboard-filter-panel .filter-panel__head { flex: 1; margin: 0; }
.filter-group[hidden], .filter-group__body[hidden] { display: none; }
/* Title row with the toggle at its right. */
.two-pane__head, .members-main__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); flex-wrap: wrap; }
.two-pane__head .page-title, .members-main__head .members-main__title { margin: 0; }
.two-pane__head { margin-bottom: 12px; }
.archive-heading .filter-toggle { margin-left: auto; }
/* Accordion groups (the board's category rows) span the panel's width. */
.two-pane__side .filter-group, .members-filter .filter-group { margin: 0 -16px; }
.two-pane__side .filter-group:last-child, .members-filter .filter-group:last-child { border-bottom: 1px solid var(--border); }
/* The page's own groups continue the shared list without a double line. */
#reportsSide > :first-child > .filter-group:first-child > .bfp-cat__btn, #reportsSide > .filter-group:first-child > .bfp-cat__btn { border-top: 0; }
.filter-group__btn { min-height: 40px; font-size: 14px; }
.filter-group__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.filter-group__body { display: flex; flex-direction: column; gap: 8px; padding: 8px 16px 12px; }
.filter-group__body .reports-filter__menu { position: static; max-height: 240px; overflow-y: auto; box-shadow: none; border: 0; background: none; padding: 0; min-width: 0; max-width: none; }
.filter-group__body .two-pane__options { margin: 0 -16px; border-top: 0; }
.filter-group__body .members-filter__roles { margin: 0 -16px; }
.filter-group__body .bfp-values { padding: 0; font-size: var(--fs-14); }
.two-pane__side .audit-filters { gap: 0; margin: 0; }
.two-pane__side #auditClearBtn { margin-top: 12px; }
.dashboard-filter-panel { display: flex; align-items: center; padding: var(--s-8) var(--s-16); border-bottom: 1px solid var(--border); background: var(--side-panel-bg); }
@media (max-width: 767px) {
  .filter-toggle, .filter-group__btn { min-height: 44px; }
  .filter-panel__collapse { width: 44px; height: 44px; background: none; }
  .filter-panel__collapse-icon { display: none; }
  .filter-panel__close-icon { display: inline-grid; }
  /* Phones: an open panel is a sheet over the page with a ×. */
  .two-pane__side.filter-panel, .members-filter.filter-panel { position: fixed; inset: var(--shell-topbar-h) 0 0 0; z-index: 60; overflow-y: auto; overscroll-behavior: contain; border: 0; }
  .members-filter.filter-panel { inset: 0; }
  .members-filter.filter-panel .members-filter__title { display: block; }
  .filter-group__body .members-filter__roles { margin: 0; }
}
/* === end Ticket 16 === */