:root {
  --bg: #191919;
  --surface: #232323;
  --surface-raised: #2c2c2c;
  --border: #383838;
  --text: #e8e8e8;
  --text-muted: #9a9a9a;
  --accent: #4c8bf5;

  --danger: #d9534f;

  /* Team accent colors — reused by the board view in a later phase. */
  --team-cloud: #4c8bf5;
  --team-data: #5fd0a6;
  --team-mobile: #f5a623;
  --team-platform: #b07cf5;
}

[data-theme="light"] {
  --bg: #f7f7f5;
  --surface: #ffffff;
  --surface-raised: #f0f0ee;
  --border: #e2e2df;
  --text: #1f1f1f;
  --text-muted: #6b6b6b;
  --danger: #c9302c;
}

* {
  box-sizing: border-box;
}

/* The `hidden` attribute must win over author display rules (e.g. flex rows),
   so JS-toggled elements like the inline new-team input actually hide. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1.25rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.topbar__brand {
  font-weight: 600;
  font-size: 1.05rem;
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.topbar__logo {
  height: 24px;
  width: auto;
  display: block;
}

.topbar__spacer { flex: 1; }

.topbar__search {
  flex: 1;
  display: flex;
  justify-content: center;
  position: relative;       /* anchor the suggest dropdown */
}

.topbar__search form {
  width: 100%;
  max-width: 640px;
}

.topbar__search input {
  width: 100%;
  padding: 0.45rem 0.8rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
}

.topbar__search input::placeholder {
  color: var(--text-muted);
}

.search-dropdown {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 640px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  padding: 0.4rem;
  z-index: 100;
}

.search-dropdown__group + .search-dropdown__group {
  border-top: 1px solid var(--border);
  margin-top: 0.3rem;
  padding-top: 0.3rem;
}

.search-dropdown__heading {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 0.3rem 0.5rem 0.15rem;
}

.search-dropdown__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  color: var(--text);
  text-decoration: none;
  border-radius: 6px;
  font-size: 0.88rem;
}

.search-dropdown__item:hover,
.search-dropdown__item.is-active {
  background: var(--surface);
  color: var(--accent);
}

.search-dropdown__title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-dropdown__meta {
  font-size: 0.74rem;
  color: var(--text-muted);
  flex-shrink: 0;
}

.search-dropdown__item--all {
  margin-top: 0.3rem;
  border-top: 1px solid var(--border);
  padding-top: 0.5rem;
  color: var(--accent);
  font-weight: 500;
}

.search-dropdown__empty {
  margin: 0;
  padding: 0.7rem 0.5rem;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.topbar__avatar {
  display: flex;
  align-items: center;
}

.userbox {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.userbox__img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-raised);
  object-fit: cover;
}

.userbox__name {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.content {
  padding: 1.5rem 2rem;
}

.narrow {
  max-width: 760px;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.75rem;
}

.panel h1 {
  margin-top: 0;
}

.panel p {
  color: var(--text-muted);
}

.topnav {
  display: flex;
  gap: 1rem;
  margin-left: 1rem;
}

.topnav a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9rem;
}

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

.flashes {
  margin-bottom: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.flash {
  padding: 0.6rem 0.9rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
}

.flash--success {
  border-color: var(--team-data);
}

.flash--error {
  border-color: #e06c75;
}

.panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.45rem 0.9rem;
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
}

.btn--danger {
  background: #e06c75;
}

.btn--secondary {
  background: var(--surface-raised);
  color: var(--text);
}

.btn--secondary:hover {
  background: var(--border);
}

/* Button with a leading icon + label (e.g. Add epic). */
.btn--lead {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.btn--lead svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

/* Icon-only button — square, centred glyph, label carried by title/aria. */
.btn--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem;
  line-height: 0;
}
.btn--icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.action {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  border-radius: 6px;
  padding: 0.3rem 0.55rem;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
}

.action:hover {
  background: var(--surface-raised);
}

.action--danger {
  color: #e06c75;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}

.data-table th,
.data-table td {
  text-align: left;
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid var(--border);
}

.data-table th { white-space: nowrap; }

.data-table__sort {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.data-table__sort:hover { color: var(--accent); }
.data-table__sort.is-active { color: var(--accent); }
.data-table__sort-arrow { font-size: 0.7em; line-height: 1; }

.row-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.data-table tbody tr {
  transition: background-color 120ms ease;
}

.data-table tbody tr:hover {
  background: var(--surface-raised);
}

.row-link {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
}

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

/* Stable column widths across paginated pages: with table-layout:fixed
   the colgroup widths win and don't shrink to fit each page's longest cell. */
.data-table--fixed { table-layout: fixed; }

.cell-truncate { overflow: hidden; }
.cell-truncate__row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}
.cell-truncate__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.data-table--epics .col-youtrack { width: 125px; }
.data-table--epics .col-quarter  { width: 90px; }
.data-table--epics .col-status   { width: 120px; }
.data-table--epics .col-owner    { width: 160px; }
.data-table--epics .col-dates    { width: 230px; }
.data-table--epics .col-actions  { width: 90px; }

.swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  vertical-align: middle;
}

.form__row {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 1rem;
  max-width: 360px;
}

.input {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 0.45rem 0.6rem;
}

.input--color {
  width: 3rem;
  height: 2.25rem;
  padding: 2px;
  cursor: pointer;
}

/* Segmented toggle (epic schedule mode) */
.seg-toggle {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  width: fit-content;
}
.seg-toggle__btn {
  background: var(--surface-raised);
  border: none;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  padding: 0.4rem 0.9rem;
}
.seg-toggle__btn + .seg-toggle__btn {
  border-left: 1px solid var(--border);
}
.seg-toggle__btn.is-active {
  background: var(--accent);
  color: #fff;
}

/* Add-marker drawer: pad the tabbed content to line up with the head, give the
   tab strip a gap below it, and stop the leading helper note from tucking up
   into the tabs (.form__note's negative top margin assumes a field above it). */
[data-marker-drawer] {
  padding: 1.25rem;
}
[data-marker-drawer] .seg-toggle {
  margin-bottom: 1rem;
}
[data-marker-drawer] .drawer__form {
  padding: 0;
}
[data-marker-group] > .form__note:first-child {
  margin-top: 0;
}

/* Team list drag-to-reorder */
.teams-table__handle {
  width: 1.75rem;
  text-align: center;
  color: var(--text-muted);
  cursor: grab;
  user-select: none;
}
.teams-table tbody tr.is-dragging { opacity: 0.5; }
.teams-table tbody tr.is-drop-above { box-shadow: inset 0 2px 0 0 var(--accent); }
.teams-table tbody tr.is-drop-below { box-shadow: inset 0 -2px 0 0 var(--accent); }
.teams-table tbody tr[draggable="true"]:hover .teams-table__handle { cursor: grab; }
.teams-table tbody tr[draggable="true"]:active { cursor: grabbing; }

/* Settings drawer (combined board settings + teams) */
.settings-drawer { padding: 1rem 1.25rem; }
.settings-drawer__section + .settings-drawer__section {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.settings-drawer__heading {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.settings-drawer__subheading {
  margin: 1rem 0 0.5rem;
  font-size: 0.95rem;
}
/* Collapsible "Add team" / "Add release" — fields stay hidden behind the
   summary toggle until opened (auto-opens on validation errors). */
.settings-drawer__add { margin-top: 1rem; }
.settings-drawer__add-toggle {
  display: inline-block;
  background: var(--surface-raised);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.45rem 0.9rem;
  font-size: 0.9rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.settings-drawer__add-toggle::-webkit-details-marker { display: none; }
.settings-drawer__add-toggle:hover { background: var(--border); }
.settings-drawer__add[open] .settings-drawer__add-toggle { margin-bottom: 0.75rem; }

/* Collapsible section heading (Advanced): keeps the section-heading look but
   toggles a <details>, with a caret that rotates open. */
.settings-drawer__advanced { margin-top: 0; }
.settings-drawer__heading-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.settings-drawer__heading-toggle::-webkit-details-marker { display: none; }
.settings-drawer__heading-toggle::before {
  content: "\25B8"; /* ▸ */
  font-size: 0.85em;
  line-height: 1;
  transition: transform 0.15s ease;
}
.settings-drawer__advanced[open] .settings-drawer__heading-toggle::before {
  transform: rotate(90deg);
}

/* Danger zone (delete board) inside the Advanced section. Set apart from the
   Copy-to-board controls above it with a top border. The delete button uses a
   two-step confirm (board-delete-confirm.js): the armed state darkens it and
   hints that the next click is destructive. */
.danger-zone {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.danger-zone__heading { color: #e06c75; }
.danger-zone__delete { margin-top: 0.5rem; }
.btn--danger.is-confirming {
  background: #c0392b;
  box-shadow: 0 0 0 2px rgba(224, 108, 117, 0.4);
}

/* Add-epic drawer */
.add-epic-drawer { padding: 1rem 1.25rem; }
.add-epic-drawer__search { width: 100%; box-sizing: border-box; margin-bottom: 0.75rem; }
.add-epic-drawer__hint { color: var(--text-muted); font-size: 0.85rem; padding: 0.5rem 0; }
.add-epic-drawer__noresults { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.add-epic-drawer__create { align-self: flex-start; }
.add-epic-drawer__results { display: flex; flex-direction: column; gap: 0.5rem; }
.add-epic-drawer__row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.6rem 0.75rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.add-epic-drawer__row.is-added { background: var(--surface); }
.add-epic-drawer__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.add-epic-drawer__title { font-weight: 500; }
.add-epic-drawer__yt { color: var(--text-muted); font-size: 0.75rem; }
.add-epic-drawer__controls { display: flex; gap: 0.5rem; align-items: center; }
.add-epic-drawer__team { flex: 1 1 auto; min-width: 0; }
.add-epic-drawer__added { color: var(--text-muted); padding: 0.25rem 0; }
.add-epic-drawer__error { margin: 0.25rem 0 0; }
.add-epic-drawer__footer {
  margin-top: 1rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}
.add-epic-drawer__footer a {
  color: var(--accent);
  text-decoration: none;
}
.add-epic-drawer__footer a:hover { text-decoration: underline; }
.add-epic-drawer__relatives { display: flex; flex-direction: column; gap: 0.5rem; }
.add-epic-drawer__rel-heading { margin: 0; font-weight: 500; }
.add-epic-drawer__rel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.add-epic-drawer__rel-tag { color: var(--text-muted); font-size: 0.8rem; }
.add-epic-drawer__rel-actions { display: flex; gap: 0.5rem; }

/* Copy-to-board tool (settings drawer › Advanced) */
.copy-board__search { width: 100%; box-sizing: border-box; margin-bottom: 0.75rem; }
.copy-board__results { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.75rem; }
.copy-board__option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.copy-board__option:hover,
.copy-board__option:focus { background: var(--surface); color: var(--accent); outline: none; }
.copy-board__hint { color: var(--text-muted); font-size: 0.85rem; padding: 0.25rem 0; }
.copy-board__chosen { display: flex; align-items: center; gap: 0.75rem; margin: 0.5rem 0; }
.copy-board__chosen-name { font-weight: 600; }
.copy-board__status { color: var(--text-muted); font-size: 0.85rem; margin-top: 0.4rem; }

/* Pagination (epics list) */
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.pagination__count { color: var(--text-muted); font-size: 0.9rem; }
.pagination__pages { display: flex; align-items: center; gap: 0.5rem; }
.pagination__cur { color: var(--text-muted); font-size: 0.9rem; }
.is-disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: default;
}

.form__error {
  color: #e06c75;
  font-size: 0.85rem;
}

.form__note {
  margin: -0.4rem 0 1rem 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  max-width: 360px;
}
/* Opt-out of the tight tuck for longer help text that needs room under a field. */
.form__note--gap {
  margin-top: 0.5rem;
}

.form__actions {
  display: flex;
  gap: 1rem;
  align-items: center;
}
/* A note placed inline in an actions row (e.g. "Last saved …") shouldn't carry
   the block helper-text margins, which would offset it from the button's
   vertical centre. */
.form__actions .form__note {
  margin: 0;
}

.dashboard__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.dashboard__top h1 {
  margin: 0;
}

.dashboard__stat {
  margin: 0;
  color: var(--text-muted);
}

.dashboard__heading {
  margin: 1.75rem 0 0.75rem;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

.team-card {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

.team-card__accent {
  width: 6px;
  background: var(--card-accent);
}

.team-card__body {
  padding: 1rem 1.1rem;
}

.team-card__body h3 {
  margin: 0 0 0.3rem;
}

.team-card__count {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.empty {
  color: var(--text-muted);
}

/* Home dashboard panels ------------------------------------------------- */
.home-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
}
@media (max-width: 720px) {
  .home-grid { grid-template-columns: 1fr; }
}

/* The .panel--card + .panel--card sibling rule (defined later in this file)
   adds margin-top to stacked cards on other pages; in the grid it knocks
   the second tile in DOM order down a row. We scope these overrides under
   .home-grid so the specificity (0,2,0) of the sibling override wins even
   though that rule appears later in source order. */
.home-grid .home-block,
.home-grid .home-block + .home-block {
  /* .panel--card defaults to max-width: 960px + margin: auto so the card
     sits in the middle of a wide page. Inside the dashboard grid that
     clamps each tile and leaves uneven whitespace -- here we want the tile
     to fully fill its 1fr column. */
  margin: 0;
  max-width: none;
  width: 100%;
}
.home-block {
  cursor: grab;
  display: flex;
  flex-direction: column;
  /* Uniform tile heights -- matches the YouTrack-style dashboard where each
     widget is the same size regardless of content. Body scrolls internally. */
  height: 380px;
  transition: box-shadow 120ms ease, transform 120ms ease;
}
.home-block > .panel__body {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}

/* Inside the Boards tile, fewer cards than columns leave a left-aligned
   gap on the right. auto-fit collapses empty tracks, fixed card width
   removes the 1fr stretch, and justify-content centers the cluster. */
.home-block .team-grid {
  grid-template-columns: repeat(auto-fit, 220px);
  justify-content: center;
}
.home-block:active { cursor: grabbing; }
.home-block.is-dragging { opacity: 0.5; }
.home-block.is-drop-before { box-shadow: -3px 0 0 0 var(--accent); }
.home-block.is-drop-after  { box-shadow:  3px 0 0 0 var(--accent); }
/* On a single-column row (narrow viewports / odd last block) the drop edge
   reads better as a horizontal bar. */
@media (max-width: 720px) {
  .home-block.is-drop-before { box-shadow: 0 -3px 0 0 var(--accent); }
  .home-block.is-drop-after  { box-shadow: 0  3px 0 0 var(--accent); }
}

.home-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.home-list__row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border);
}
.home-list__row:last-child { border-bottom: none; }
.home-list__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
}
.home-list__title:hover { color: var(--accent); }
.home-list__meta {
  color: var(--text-muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

.quarter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (max-width: 720px) {
  .quarter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.quarter-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 0.75rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.quarter-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
  border-color: var(--text-muted);
}
.quarter-card__number {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
}

.form__fieldset {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.75rem 1rem;
}
.form__fieldset legend {
  padding: 0 0.4rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}
.form__check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0;
  cursor: pointer;
}

.empty a,
.timeline-note a {
  color: var(--accent);
  text-decoration: none;
}

.empty a:hover,
.timeline-note a:hover {
  text-decoration: underline;
}

.team-card__link {
  color: var(--text);
  text-decoration: none;
}

.team-card__link:hover {
  color: var(--accent);
}

.filters {
  display: flex;
  gap: 0.75rem;
  margin: 1rem 0;
  align-items: center;
}

.filters select {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  padding: 0.4rem 0.6rem;
}

.filters__clear {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-decoration: none;
}

.filters__clear:hover {
  color: var(--accent);
  text-decoration: underline;
}

.board-header {
  /* Equal flexible side columns keep the centered view-toggle from shifting
     when the right-hand actions change width across views (e.g. Timeline's
     extra "Add release" button). minmax(0,1fr) lets the sides shrink instead
     of growing the column and nudging the center. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  margin-bottom: 1.25rem;
  gap: 1rem;
}

.board-header__title {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.board-header__title h1 {
  margin: 0;
}

.board-header__back {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-decoration: none;
}

.board-header__back:hover {
  color: var(--accent);
}

.board-header__main-badge {
  color: #f5a623;       /* warm amber — matches team-mobile */
  font-size: 0.85em;
  vertical-align: middle;
  margin-left: 0.25rem;
}

.board-header__public-badge {
  display: inline-block;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.7rem;        /* fixed, not em — the h1 is huge */
  font-weight: 500;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 0.5rem;
  letter-spacing: 0.02em;
}

.bcard--static {
  cursor: default;
}
.bcard--static:hover {
  background: var(--surface);   /* don't show the hover affordance for read-only cards */
}

.public-link {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.4rem;
}
.public-link .input { flex: 1 1 auto; min-width: 0; }
.public-link__copy {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}
.public-link__copy:hover { color: var(--text); }
.public-link__copy:disabled { cursor: default; color: var(--accent, #4c8bf5); }

.board-col {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.75rem;
}

.board-col__head {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.board-col__count,
.board-group__count {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 400;
}

.board-group {
  margin-bottom: 0.85rem;
  border-left: 3px solid var(--group-accent);
  padding-left: 0.5rem;
}

.board-group__summary {
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.45rem;
}

.bcard {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.45rem 0.55rem;
  margin-bottom: 0.4rem;
  text-decoration: none;
  color: var(--text);
}

.bcard:hover {
  border-color: var(--accent);
}

.bcard__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.4rem;
}
.bcard__header .bcard__title { flex: 1 1 auto; min-width: 0; }
.bcard__header .status-badge { flex: 0 0 auto; }

.bcard__title {
  font-size: 0.88rem;
}

.bcard__owner {
  font-size: 0.74rem;
  color: var(--text-muted);
}

.bcard__span {
  display: inline-block;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* YouTrack difficulty/effort chips (signed-in card only). Each chip renders
   only when its value is present — see _quarters_fragment.html. Difficulty
   sits bottom-left; total time spent is pushed bottom-right. */
.bcard__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.1rem;
}
.chip {
  font-size: 0.7rem;
  line-height: 1.4;
  padding: 0 0.4rem;
  border-radius: 10px;
  white-space: nowrap;
}
.chip--size {
  background: var(--surface-raised);
  color: var(--text);
  border: 1px solid var(--border);
}
.chip--time {
  margin-left: auto;        /* keep effort at the right even if size is absent */
  background: var(--surface-raised);
  color: var(--text-muted);
}

.timeline-note {
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.timeline {
  border: 1px solid var(--border);
  border-radius: 12px;
}

.timeline__head,
.timeline__lane {
  display: flex;
  width: max-content;
  min-width: 100%;
}

.timeline__head {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.timeline__month {
  padding: 0.5rem 0.3rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  border-left: 1px solid var(--border);
  box-sizing: border-box;
}

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

.timeline__lane:last-child {
  border-bottom: none;
}

.timeline__lane-label {
  flex: 0 0 130px;
  padding: 0.8rem;
  font-weight: 600;
  background: var(--surface);
  border-left: 4px solid var(--lane-accent);
  position: sticky;
  left: 0;
  z-index: 1;
}

.timeline__head .timeline__lane-label {
  border-left: none;
  border-right: 1px solid var(--border);
}

.timeline__track {
  position: relative;
  min-height: 44px;
  width: calc(var(--day-w, 2.6px) * var(--n-days, 365));
}
/* Track gridlines (uniform-width units only). JS toggles exactly one of these
   classes on the .timeline root by zoom level; week lines are offset to Mondays
   via --grid-offset. Months stay readable from the header row above. */
.timeline.is-week-grid .timeline__track {
  background: repeating-linear-gradient(
    to right,
    transparent,
    transparent calc(7 * var(--day-w) - 1px),
    var(--border) calc(7 * var(--day-w) - 1px),
    var(--border) calc(7 * var(--day-w))
  );
  background-position-x: var(--grid-offset, 0);
}
.timeline.is-day-grid .timeline__track {
  background: repeating-linear-gradient(
    to right,
    transparent,
    transparent calc(var(--day-w) - 1px),
    var(--border) calc(var(--day-w) - 1px),
    var(--border) var(--day-w)
  );
}

.tbar {
  position: absolute;
  top: 8px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
  color: #fff;
  text-decoration: none;
  font-size: 0.8rem;
  overflow: hidden;
  box-sizing: border-box;
}

.tbar--static { cursor: default; }

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

/* Search results page: muted section labels + clean hover rows. */
.search-results__heading {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 1.5rem 0 0.4rem;
}
.search-results__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.search-results__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
}
.search-results__item:hover { background: var(--surface); }
.search-results__title {
  flex: 0 1 auto;            /* hug content; don't push the meta to the far edge */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.search-results__meta {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
  font-size: 0.85rem;
}
.search-results__meta::before {
  content: "·";
  margin-right: 0.45rem;
}
.search-results__empty {
  margin: 0.15rem 0 0;
  padding: 0.3rem 0.6rem;
}

.status-badge {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.72rem;
  padding: 0.1rem 0.45rem;
  border-radius: 6px;
  background: var(--surface-raised);
  color: var(--text-muted);
}

.status-badge--planned { background: var(--surface-raised); color: var(--text-muted); }
.status-badge--in_progress { background: #2c4a6e; color: #cfe2ff; }
.status-badge--on_hold { background: #5a4420; color: #ffe6b0; }
.status-badge--at_risk { background: #5a2a2f; color: #ffd2d2; }
.status-badge--done { background: #234d3a; color: #c8f0d8; }
.status-badge--cancelled { background: #3a3a3a; color: #9a9a9a; }

.team-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-right: 0.45rem;
  vertical-align: middle;
}

.data-table td {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.timeline__lane-label,
.timeline__month {
  font-size: 0.8rem;
}

.timeline__track {
  min-height: 40px;
}

.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 40;
}

.drawer-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(480px, 100%);
  background: var(--surface);
  border-left: 1px solid var(--border);
  transform: translateX(100%);
  transition: transform 0.2s ease;
  z-index: 50;
  overflow-y: auto;
}

.drawer.is-open {
  transform: none;
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

.drawer__title {
  margin: 0;
  font-size: 1.1rem;
}

.drawer__close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  border-radius: 4px;
  padding: 2px 6px;
}

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

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

.drawer__form {
  padding: 1.25rem;
}

.drawer__hint {
  color: var(--text-muted);
  font-size: 0.9rem;
  margin: 0 0 0.85rem;
}

.widget-toggle-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.widget-toggle-list__row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 0.9rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.widget-toggle-list__meta {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.widget-toggle-list__name { font-weight: 600; }
.widget-toggle-list__desc { color: var(--text-muted); font-size: 0.85rem; }
.widget-toggle-list__error { margin: 0.4rem 0 0; }

/* On/off switch (used in the Widgets drawer). */
.switch {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
  cursor: pointer;
}
.switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.switch__track {
  width: 38px;
  height: 22px;
  border-radius: 999px;
  background: var(--border);
  padding: 2px;
  display: inline-flex;
  align-items: center;
  transition: background 0.18s ease;
}
.switch__thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: transform 0.18s ease;
}
.switch input:checked + .switch__track { background: var(--accent); }
.switch input:checked + .switch__track .switch__thumb { transform: translateX(16px); }
.switch input:focus-visible + .switch__track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.drawer__error {
  color: #e06c75;
  padding: 0 1.25rem 1rem;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.35rem;
  border-radius: 8px;
}

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

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

.theme-toggle__moon {
  display: none;
}

[data-theme="light"] .theme-toggle__sun {
  display: none;
}

[data-theme="light"] .theme-toggle__moon {
  display: inline-flex;
}

/* --- Card-style panel variant (used on /profile) ------------------------ */
/* Differs from the flat .panel by giving each section a header bar with an
 * icon + title, and a subtle hover lift to reinforce that the whole card is
 * a self-contained unit. Only opted into via the .panel--card modifier so
 * other pages keep their current flat look. */

.panel--card {
  padding: 0;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: transform 160ms ease, box-shadow 160ms ease;
  /* Centered with a comfortable reading width — used by /profile and the
   * admin pages. The .narrow modifier can shrink this further for forms. */
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.panel--card.narrow {
  max-width: 760px;
}

.panel--card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.panel--card + .panel--card {
  margin-top: 1rem;
}

.panel__head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 1.25rem;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border);
}

.panel__head h1,
.panel__head h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.panel__head-icon {
  color: var(--text-muted);
  flex-shrink: 0;
}

.panel__head-action {
  /* Trailing button in a panel head bar (e.g. "New team"). Pushes itself
   * all the way to the right so the title and icon stay flush-left. */
  margin-left: auto;
}

.panel__body {
  padding: 1.5rem;
}

/* Inside a card panel, forms fill the available width rather than
 * being capped at the global 360px (which looks tiny inside a card).
 * The Save button row right-aligns to match common settings-page
 * conventions. */
.panel--card .form__row {
  max-width: none;
}

.panel--card .form__note {
  max-width: none;
  /* Drop the legacy negative-top so the helper text breathes under
   * the input rather than crowding it. */
  margin-top: 0.5rem;
}

.panel--card .form__actions {
  justify-content: flex-end;
}

.form__section-title {
  margin: 0 0 0.75rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
/* Collapsible section heading: a <summary> that keeps the section-title look
   but toggles a <details>, with a caret that rotates open. */
.form__section-title--toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.form__section-title--toggle::-webkit-details-marker { display: none; }
.form__section-title--toggle::before {
  content: "\25B8"; /* ▸ */
  font-size: 0.85em;
  line-height: 1;
  transition: transform 0.15s ease;
}
.form__collapsible[open] .form__section-title--toggle::before {
  transform: rotate(90deg);
}

/* --- Profile panel internals ------------------------------------------- */

.profile-panel {
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.profile__layout {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 1.75rem;
  align-items: start;
}

@media (max-width: 640px) {
  .profile__layout {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
}

.profile__identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

.profile__avatar {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border);
}

.profile__avatar--placeholder {
  background: var(--surface-raised);
}

/* Subtle animated ring around the profile-detail avatar (not the header one).
   A soft conic gradient slowly rotates in the thin band around the picture. */
.profile__avatar-ring {
  position: relative;
  display: grid;
  place-items: center;
  padding: 4px;
  border-radius: 50%;
  isolation: isolate;
}
.profile__avatar-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: -1;
  opacity: 0.85;
  background: conic-gradient(
    from 0deg,
    var(--accent),
    color-mix(in srgb, var(--accent) 18%, transparent) 35%,
    transparent 50%,
    color-mix(in srgb, var(--accent) 18%, transparent) 65%,
    var(--accent)
  );
  animation: profile-avatar-ring 7s linear infinite;
}
@keyframes profile-avatar-ring {
  to { transform: rotate(1turn); }
}
@media (prefers-reduced-motion: reduce) {
  .profile__avatar-ring::before { animation: none; }
}

/* Easter egg: 5 quick clicks on the avatar → a little dance + confetti burst. */
.profile__avatar.is-celebrating {
  animation: profile-avatar-celebrate 0.8s ease-in-out;
}
@keyframes profile-avatar-celebrate {
  0%   { transform: scale(1) rotate(0); }
  20%  { transform: scale(1.16) rotate(-14deg); }
  40%  { transform: scale(1.1) rotate(12deg); }
  60%  { transform: scale(1.12) rotate(-8deg); }
  80%  { transform: scale(1.07) rotate(6deg); }
  100% { transform: scale(1) rotate(0); }
}
.confetti-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2000;
  overflow: hidden;
}
.confetti-piece {
  position: fixed;
  width: 8px;
  height: 14px;
  border-radius: 2px;
  opacity: 0.95;
  transform: translate(-50%, -50%);
  animation: confetti-fall var(--d, 1.2s) ease-out forwards;
}
@keyframes confetti-fall {
  to {
    transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r));
    opacity: 0;
  }
}

.profile__badge {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #fff;
  background: var(--accent);
}
.profile__badge--member {
  background: color-mix(in srgb, var(--text-muted) 70%, var(--surface, #555));
}
/* A light shimmer sweeps across the badge on hover. */
.profile__badge::after {
  content: "";
  position: absolute;
  top: 0;
  left: -150%;
  width: 60%;
  height: 100%;
  pointer-events: none;
  transform: skewX(-20deg);
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.5) 50%,
    transparent 100%
  );
}
.profile__badge:hover::after {
  animation: profile-badge-shine 0.85s ease-out;
}
@keyframes profile-badge-shine {
  from { left: -150%; }
  to { left: 150%; }
}
@media (prefers-reduced-motion: reduce) {
  .profile__badge:hover::after { animation: none; }
}

.profile__info-title {
  margin: 0 0 1rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.profile__meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1.5rem;
  row-gap: 0.85rem;
  margin: 0;
}

.profile__meta dt {
  font-weight: 600;
  color: var(--text);
}

.profile__meta dd {
  margin: 0;
  color: var(--text);
}

.profile__role-source {
  display: block;
  margin-top: 2px;
  font-size: 0.8rem;
  color: var(--text-muted);
}

@media (max-width: 640px) {
  .profile__meta {
    grid-template-columns: 1fr;
    row-gap: 0.25rem;
    text-align: left;
  }
  .profile__meta dd {
    margin-bottom: 0.6rem;
    color: var(--text-muted);
  }
}

/* --- Profile integrations subsection (compact row + drawer surface) --- */

.integrations {
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.integration-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.integration-row__main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.integration-row__name {
  font-weight: 600;
}

.integration-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
  background: var(--surface-raised);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.integration-status--on {
  color: #2d7a4f;
  background: rgba(95, 180, 97, 0.14);
  border-color: rgba(95, 180, 97, 0.35);
}

[data-theme="dark"] .integration-status--on {
  color: #7fd99a;
}

.integration-status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}

/* Drawer surface for YouTrack integration */

.drawer__intro {
  padding: 1.25rem 1.25rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* keep the status pill compact, not full-width */
  gap: 0.85rem;
}

.drawer__current {
  margin: 0;
  align-self: stretch;       /* full width even though the intro aligns left */
  padding: 0.7rem 0.9rem;
  font-size: 0.88rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
}

.drawer__current code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9rem;
}

.drawer__current-when {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.drawer__danger-form {
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  margin-top: 0.75rem;
}
/* Make the Unlink action feel like a proper (destructive) button, aligned with
   the form content and with a subtle hover, rather than bare red text. */
.drawer__danger-form .action--danger {
  padding: 0.45rem 0.7rem;
  margin-left: -0.7rem;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
}
.drawer__danger-form .action--danger:hover {
  background: color-mix(in srgb, #e06c75 14%, transparent);
}

/* --- Activity stat cards ----------------------------------------------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

@media (max-width: 720px) {
  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.25rem 1rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
  border-color: var(--text-muted);
}

.stat-card__number {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--accent);
}

.stat-card__label {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
}

/* Color variants for stat numbers — match the screenshot's palette
 * (blue / teal / green / amber). Cards keep the same neutral chrome. */
.stat-card--blue .stat-card__number   { color: #4c8bf5; }
.stat-card--teal .stat-card__number   { color: #2dbfb0; }
.stat-card--green .stat-card__number  { color: #5fb461; }
.stat-card--amber .stat-card__number  { color: #f5a623; }

.usermenu {
  position: relative;
  display: inline-flex;
}

.usermenu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 0.25rem 0.4rem;
  border-radius: 8px;
}

.usermenu__trigger:hover {
  background: var(--surface-raised);
}

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

.usermenu__badge {
  font-size: 0.7rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text-muted);
}

.usermenu__caret {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.usermenu__panel {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  min-width: 200px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.4rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  z-index: 60;
}

.usermenu__panel form {
  margin: 0;
}

.usermenu__email {
  padding: 0.5rem 0.6rem;
  color: var(--text-muted);
  font-size: 0.85rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.3rem;
}

.usermenu__item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  color: var(--text);
  text-decoration: none;
  font-size: 0.9rem;
  box-sizing: border-box;
}

.usermenu__item:hover {
  background: var(--surface-raised);
}

.usermenu__item--button {
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

/* ---- Boards feature ---- */

/* A universal action row (same on every view) with a view-specific tools row
   floating beneath it. The tools row is taken out of flow so the actions block
   is always exactly the primary row's height — that keeps the header height,
   and "Add epic", vertically aligned with the view toggle on every view (no
   jump between Quarters and Timeline/Plan). */
.board-header__actions {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-self: end;
}
.board-header__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.board-header__row--tools {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
}

/* Timeline zoom buttons sit as a tight cluster in the header actions. */
.board-header__zoom {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* Snap-to-releases toggle: an icon button (next to Take snapshot) wrapping a
   visually-hidden checkbox. The accent fill marks the "on" state. */
.snap-toggle {
  position: relative;
  cursor: pointer;
}
.snap-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.snap-toggle:has(input:checked) {
  background: var(--accent);
  color: #fff;
}
.snap-toggle:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.board-list {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.board-list__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.85rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.board-list__item > a {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  flex: 1;
}

.board-list__item > a:hover {
  color: var(--accent);
}

.board-list__mark {
  display: flex;
  align-items: center;
  margin: 0;
}

.board-list__mark-btn {
  padding: 0.15rem 0.4rem;
  font-size: 1rem;
  line-height: 1;
  color: var(--text-muted);
}

.board-list__mark-btn.is-main,
.board-list__mark--readonly.is-main {
  color: #f5a623;       /* same amber as the in-header badge */
}

.board-list__badge {
  font-size: 0.72rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.board-list__meta {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.bcard-row {
  display: flex;
  align-items: stretch;
  margin-bottom: 0.4rem;
}

.bcard[draggable="true"] {
  cursor: grab;
  user-select: none;  /* keep the gesture a drag, not a text selection */
}
.bcard[draggable="true"]:active {
  cursor: grabbing;
}
.bcard-row.is-dragging {
  opacity: 0.5;
}
.board-col.is-drop-target {
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
  background: var(--surface-raised);
}

.bcard-row .bcard {
  flex: 1;
  margin-bottom: 0;
}

.bcard-row__unlink {
  display: flex;
  align-items: center;
  width: 0;
  margin-left: 0;
  overflow: hidden;
  transition: width 180ms ease, margin-left 180ms ease;
}

.bcard-row:hover .bcard-row__unlink,
.bcard-row:focus-within .bcard-row__unlink {
  width: 2rem;
  margin-left: 0.25rem;
}

.bcard-row__unlink button {
  padding: 0.2rem 0.5rem;
  font-size: 1rem;
  line-height: 1;
}

.bcard-row__unlink button.is-confirming {
  color: #5fd0a6;     /* green: click to confirm */
}

.owner-list {
  list-style: none;
  margin: 0 0 1.25rem 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.owner-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.7rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.owner-list__email {
  flex: 1;
}

.owner-list__remove {
  display: inline;
}

.board-delete {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

.assign-group {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.6rem 1rem 0.8rem;
  margin: 0 0 1rem 0;
  border-left: 3px solid var(--group-accent, var(--border));
}

.assign-group legend {
  padding: 0 0.4rem;
  color: var(--text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.assign-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.3rem 0;
}

.assign-row input[disabled] + * {
  color: var(--text-muted);
}

.assign-row__meta {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.assign-row__team {
  flex: 0 0 12rem;
  min-width: 0;
}

/* ---- Board view toggle + scroll-snap containers ---- */

.view-toggle {
  display: inline-flex;
  gap: 0.4rem;
  align-items: center;
}

.board-export-bar {
  display: flex;
  justify-content: flex-end;
  margin: 0.5rem 0;
}

.board-cols {
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-gutter: stable;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding-bottom: 0.5rem;
}

.board-col {
  flex: 0 0 calc(25% - 0.75rem);
  scroll-snap-align: start;
  min-width: 240px;
  min-height: 4rem;       /* empty quarters keep the row height steady when scrolling */
}

.timeline {
  position: relative;          /* anchor for the JS-positioned releases overlay */
  isolation: isolate;          /* own stacking context so the overlay's negative
                                  z-index sits behind the lanes/bars but above the
                                  timeline's own backdrop (guide lines under epics) */
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline-start: 130px;
  scrollbar-gutter: stable;
  --n-days: 365;
  --day-w: 2.6px;
  --grid-offset: 0px;
}

.timeline__months {
  display: flex;
}

.timeline__month {
  flex: 0 0 calc(var(--day-w, 2.6px) * var(--days, 30));
  scroll-snap-align: start;
}

/* When columns get narrow (JS toggles .is-compact-labels on the timeline root),
   drop the year from the month label so "Jan 2026" becomes just "Jan". */
.timeline.is-compact-labels .timeline__month-year {
  display: none;
}

/* Header right side stacks the month row over the JS-filled sub-tick row. */
.timeline__head-cols {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}
.timeline__subticks {
  position: relative;
  height: 18px;
}
.timeline__subtick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 0.68rem;
  color: var(--text-muted);
  white-space: nowrap;
  pointer-events: none;
}

/* --- YouTrack integration -------------------------------------------------- */

.form__section {
  margin-bottom: 1.25rem;
}

.form__field-with-action {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  max-width: 360px;
}

.form__field-with-action .input {
  flex: 1;
  min-width: 0;
}

.form__field-with-action .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.youtrack-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.form--inline {
  display: inline;
  margin: 0;
}

.youtrack-status {
  margin: 0.5rem 0;
  font-size: 0.875rem;
}

.youtrack-status--ok { color: var(--text-muted); }
.youtrack-status--warn { color: #f5a623; }

.chain-icon {
  display: inline-flex;
  align-items: center;
  margin-left: 0.4rem;
  color: var(--text-muted);
  vertical-align: middle;
  line-height: 0;
}

.chain-icon:hover { color: var(--text); }
.chain-icon--broken { color: #f5a623; }
.chain-icon--broken:hover { color: #d68f1f; }

/* === Plan view === */
.plan {
  --plan-rail-width: 220px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 200px);
  min-height: 500px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  overflow: hidden;
}

.plan__toolbar {
  display: flex;
  gap: 6px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-raised);
}
.plan__toolbar button {
  padding: 4px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  cursor: pointer;
}
.plan__toolbar button:hover {
  background: var(--surface-raised);
}

.plan__header {
  display: flex;
  /* 48px for the two tick rows (24px each) + a release band below them. */
  height: 80px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-raised);
}

/* Blank corner above the rail — keeps the tick track's x=0 aligned with the
   canvas's x=0 (both sit to the right of the rail width). */
.plan__header-corner {
  flex: 0 0 var(--plan-rail-width);
  border-right: 1px solid var(--border);
}

/* Positioned container for the date ticks; shares the viewport's left origin
   so header ticks line up with the bars below. */
.plan__header-track {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
}

.plan__body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.plan__rail {
  flex: 0 0 var(--plan-rail-width);
  border-right: 1px solid var(--border);
  background: var(--surface);
  overflow: hidden;
  position: relative;
}
.plan__rail-row {
  height: 32px;
  margin-bottom: 6px;
  padding: 4px 8px;
  font-size: 13px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  cursor: pointer;
  display: block;
  box-sizing: border-box;
}
.plan__rail-row:hover {
  background: var(--surface-raised);
  color: var(--accent);
}
.plan__rail-row[data-depth="1"] {
  padding-left: 24px;
  color: var(--text-muted);
}
.plan__rail-section {
  height: 32px;
  margin-bottom: 6px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: var(--surface-raised);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  box-sizing: border-box;
}

.plan__rail-section-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-right: 6px;
  border-radius: 50%;
}

.plan__viewport {
  flex: 1 1 auto;
  overflow: hidden;
  position: relative;
  cursor: grab;
}
.plan__viewport.is-dragging { cursor: grabbing; }

.plan__canvas {
  position: relative;
  height: 100%;
  width: 100%;
  will-change: transform;
}

.plan__bar {
  position: absolute;
  height: 26px;
  margin: 3px 0;
  border-radius: 3px;
  background: var(--team-color, var(--accent));
  border: none;
  color: #fff;
  font-size: 12px;
  padding: 0 6px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.plan__bar:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.plan__group-box {
  position: absolute;
  border: 1px dashed var(--accent);
  border-radius: 4px;
  pointer-events: none;
  opacity: 0.6;
}

.plan__arrows {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
}
.plan__arrow { fill: none; stroke: var(--text-muted); stroke-width: 1.5; }
.plan__arrow--warn { stroke: var(--danger); stroke-dasharray: 6 3; }

.plan__today-line {
  position: absolute;
  top: 0;
  bottom: 0;
  /* Match the Timeline's today marker: a red guide line, distinct from the
     accent-coloured release lines. */
  width: 2px;
  background: var(--today, #e5484d);
  opacity: 0.8;
}

/* Release markers on the Plan. The dashed guide line lives in the canvas
   (scrolls with content); the diamond + label live in the header track
   (pinned vertically, translate with panX only). left is set in JS. */
.plan__release-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 1px dashed var(--accent, #4c8bf5);
  opacity: 0.5;
}
/* Pinned release band: sits below the two 24px tick rows so the diamond +
   label never overlap the date-tick text. left set in JS; translated by panX
   in applyTransform. */
.plan__release-labels {
  position: absolute;
  left: 0;
  right: 0;
  top: 52px;
  bottom: 0;
}
/* Each marker is a bottom-anchored stack (label on top, diamond at the very
   bottom sitting on the canvas guide line), centered on its date pixel. */
.plan__release {
  position: absolute;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transform: translateX(-50%);
}
.plan__release-diamond {
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
  background: var(--accent, #4c8bf5);
}
.plan__release-label {
  padding: 1px 6px;
  font-size: 0.7rem;
  line-height: 1.4;
  white-space: nowrap;
  color: #fff;
  background: var(--accent, #4c8bf5);
  border-radius: 10px;
}

/* Gate = a team-coloured diamond on its own Plan row, centred on its date. */
.plan__gate-diamond {
  position: absolute;
  width: 11px;
  height: 11px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--gate-color, #888);
  pointer-events: none;
}
.plan__gate-link {
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 1.5;
  stroke-dasharray: 3 3;
  opacity: 0.8;
  pointer-events: none;
}
/* Gate row label in the left rail — mirrors .plan__rail-row metrics, muted,
   with a diamond glyph. */
.plan__rail-gate {
  display: flex;
  align-items: center;
  justify-content: center;  /* centre the gate name so it reads apart from the left-aligned epic rows */
  text-align: center;
  height: 32px;            /* keep in sync with .plan__rail-row */
  margin-bottom: 6px;
  padding: 4px 8px;
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
}

/* Hover highlight — fades unrelated, accents the path + group of the hovered epic. */
.plan__bar.is-target {
  box-shadow: 0 0 0 2px var(--accent), 0 0 8px var(--accent);
  z-index: 2;
}
.plan__bar.is-related {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.plan__bar.is-faded { opacity: 0.25; }

.plan__arrow.is-related { stroke-width: 2.5; opacity: 1; }
.plan__arrow.is-faded { opacity: 0.15; }

.plan__group-box.is-related { opacity: 1; border-width: 1.5px; }
.plan__group-box.is-faded { opacity: 0.15; }

/* Relationship picker (epic form Relationships section) */
.rel-picker { position: relative; }

.rel-picker__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.rel-picker__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 6px 2px 8px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--text);
}
.rel-picker__chip-yt {
  color: var(--text-muted);
  font-size: 0.75rem;
}
.rel-picker__chip-x {
  background: none;
  border: 0;
  padding: 0 2px;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--text-muted);
}
.rel-picker__chip-x:hover { color: var(--text); }

.rel-picker__input-wrap { position: relative; }
.rel-picker__input { width: 100%; box-sizing: border-box; padding-right: 28px; }
.rel-picker__clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.9rem;
  padding: 2px 6px;
}
.rel-picker__clear:hover { color: var(--text); }

.rel-picker__dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 2px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  z-index: 20;
  max-height: 280px;
  overflow-y: auto;
}
.rel-picker__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--text);
  font: inherit;
}
.rel-picker__row:hover { background: var(--surface-raised); }
.rel-picker__row-yt { color: var(--text-muted); font-size: 0.8rem; }
.rel-picker__hint {
  padding: 8px 10px;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* ----- Timeline releases (board-scoped milestones) ----- */
/* When the board has releases, reserve a band between the months header and
   the first lane so the diamonds + pill labels (positioned in the JS overlay)
   sit below the months instead of over them. */
/* Reserved band above the first lane for the release pills (diamond + label)
   so they don't cover the month header. The Today marker is a line only. */
.timeline .timeline__head + .timeline__lane {
  margin-top: 2.5rem;
}

/* Overlay aligns with the month grid; left/width/height are set in JS. Sits
   BEHIND the lanes/bars (negative z within .timeline's stacking context) so the
   guide lines render under the epics; the diamonds/labels live in the empty band
   above the first lane, where nothing covers them. Never intercepts clicks. */
.timeline__releases {
  position: absolute;
  top: 0;
  pointer-events: none;
  z-index: -1;
}
.trelease {
  position: absolute;
  top: 0;
  height: 100%;
  /* no width; children use left:50% + translateX(-50%) to center on the date pixel */
}
.trelease__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 0;
  border-left: 1px dashed var(--accent, #4c8bf5);
  opacity: 0.5;
}
.trelease__diamond {
  position: absolute;
  top: 2px;
  left: 50%;
  width: 10px;
  height: 10px;
  transform: translateX(-50%) rotate(45deg);
  background: var(--accent, #4c8bf5);
}
.trelease__label {
  min-height: 18px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 14px;          /* sit just below the diamond; JS adds row offset via top */
  padding: 1px 6px;
  font-size: 0.72rem;
  line-height: 1.4;
  white-space: nowrap;
  color: #fff;
  background: var(--accent, #4c8bf5);
  border-radius: 10px;
}

/* Today marker — a distinct solid guide line; left is set in JS. */
.ttoday {
  position: absolute;
  top: 0;
  height: 100%;
}
.ttoday__line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 0;
  border-left: 2px solid var(--today, #e5484d);
  opacity: 0.8;
}
/* ===== Login / sign-in page (standalone, no topbar) ===================== */
.login {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem 1rem;
  background: var(--bg);
}
.login__flashes { width: 100%; max-width: 380px; }
.login__card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}
.login__head {
  background: linear-gradient(135deg, var(--accent), #3360c9);
  color: #fff;
  text-align: center;
  padding: 2rem 1.5rem 1.75rem;
}
.login__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.login__brand { margin: 0.85rem 0 0.35rem; font-size: 1.5rem; font-weight: 700; }
.login__tagline { margin: 0; font-size: 0.9rem; line-height: 1.4; opacity: 0.9; }
.login__body { padding: 1.5rem; }
.login__google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.7rem 1rem;
  background: var(--accent);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none;
  transition: filter 0.12s ease;
}
.login__google:hover { filter: brightness(1.06); }
.login__g {
  display: inline-flex;
  padding: 4px;
  background: #fff;
  border-radius: 6px;
  line-height: 0;
}
.login__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.9rem 1.5rem;
  border-top: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--text-muted);
  font-size: 0.83rem;
  text-align: center;
}

/* Deployed-version footer */
.app-footer {
  margin-top: auto;
  padding: 1.25rem 1rem 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.75rem;
}
.app-footer__version {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted transparent;
}
.app-footer__version:hover {
  color: var(--accent);
  border-bottom-color: currentColor;
}

/* ===== Changelog page ================================================== */
.changelog__intro {
  margin: 0 0 1.5rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.changelog__release {
  padding: 1.25rem 0;
  border-top: 1px solid var(--border);
}
.changelog__release:first-of-type {
  padding-top: 0;
  border-top: none;
}
.changelog__release-head {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.changelog__version {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}
.changelog__date {
  color: var(--text-muted);
  font-size: 0.8rem;
}
.changelog__note {
  margin: 0 0 0.85rem;
  color: var(--text-muted);
}
.changelog__section { margin-bottom: 1rem; }
.changelog__section:last-child { margin-bottom: 0; }
.changelog__tag {
  display: inline-block;
  margin: 0 0 0.55rem;
  padding: 0.12rem 0.55rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--text-muted);
}
.changelog__tag--added { background: #2e9e5b; }
.changelog__tag--changed { background: var(--accent); }
.changelog__tag--fixed { background: #d98324; }
.changelog__tag--removed,
.changelog__tag--deprecated { background: var(--danger); }
.changelog__tag--security { background: #8a63d2; }
.changelog__list {
  margin: 0;
  padding-left: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.changelog__list li {
  font-size: 0.9rem;
  line-height: 1.55;
}
.changelog a { color: var(--accent); }
.changelog code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.82em;
  padding: 0.05rem 0.3rem;
  border-radius: 4px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
}

/* ===== Mobile / narrow viewports ======================================= */
@media (max-width: 720px) {
  .content { padding: 1rem; }

  /* Topbar stacks into rows: brand + theme/avatar controls, then the nav,
     then a full-width search. No JS needed — flex-wrap + order. */
  .topbar {
    flex-wrap: wrap;
    padding: 0.55rem 1rem;
    gap: 0.5rem 0.75rem;
  }
  .topbar__brand { order: 0; }
  .theme-toggle { order: 1; margin-left: auto; }   /* pin controls to the right of row 1 */
  .topbar__avatar { order: 2; }
  .topnav {
    order: 3;
    flex-basis: 100%;
    margin-left: 0;
    flex-wrap: wrap;
    gap: 0.85rem;
  }
  .topbar__search {
    order: 4;
    flex: 0 0 100%;
  }
  .topbar__search form { max-width: none; }
  .topbar__spacer { display: none; }
  /* The username can be long on a phone — let it truncate instead of pushing
     the avatar row over-wide. */
  .userbox__name { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Board header: stack title, view tabs, and action buttons. Override the
     desktop 3-column grid back to a single stacked column. */
  .board-header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
  }
  .board-header__title h1 { font-size: 1.5rem; }
  .view-toggle { flex-wrap: wrap; }
  .board-header__actions { flex-wrap: wrap; }
}

/* Board snapshots */
.snapshot-list { list-style: none; padding: 0; margin: 1rem 0; }
.snapshot-list__item { display: flex; justify-content: space-between; align-items: center;
  padding: .6rem .8rem; background: var(--surface-raised); border: 1px solid var(--border);
  border-radius: 8px; margin-bottom: .5rem; }
.snapshot-list__name { font-weight: 600; color: var(--text); text-decoration: none; }
.snapshot-list__name:hover { color: var(--accent); }
.snapshot-list__sub { display: block; color: var(--text-muted); font-size: .85rem; }
.snapshot-list__actions { display: flex; gap: .5rem; align-items: center; }
.snapshot-summary { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 1rem 0; }
.snapshot-summary__title { font-weight: 600; }
.snapshot-summary__counts { display: flex; gap: .4rem; flex-wrap: wrap; }
/* Changed-epic highlight: bright left border + low-alpha wash, readable on
   both dark and light themes. Colors are vivid so changes pop. */
.bcard--new { border-left: 4px solid #4493f8; background: rgba(68, 147, 248, 0.12); }
.bcard--completed { border-left: 4px solid #3fb950; background: rgba(63, 185, 80, 0.12); }
.bcard--slipped { border-left: 4px solid #f0883e; background: rgba(240, 136, 62, 0.14); }
.bcard--changed { border-left: 4px solid #bc8cff; background: rgba(188, 140, 255, 0.12); }
.bcard__change { font-weight: 700; }
.bcard--new .bcard__change { color: #4493f8; }
.bcard--completed .bcard__change { color: #3fb950; }
.bcard--slipped .bcard__change { color: #f0883e; }
.bcard--changed .bcard__change { color: #bc8cff; }
.bcard__diff { margin-top: .4rem; font-size: .85rem; }
.bcard__diff ul { margin: .3rem 0 0; padding-left: 1rem; }
.diff-before { color: var(--text-muted); text-decoration: line-through; }
.snapshot-removed { margin-top: 1.5rem; }
.snapshot-removed ul { list-style: none; padding: 0; }
.snapshot-removed li { padding: .3rem 0; color: var(--text-muted); }
.board-header__snapshot { margin: 0; display: inline-flex; }

/* ===== Status cues on Timeline & Plan bars ============================
   Team colour stays the bar fill; status rides on top as a decoration so
   both channels read at once. Textured cues use ::after (never the bar's
   own background, which the timeline sets inline) and only outline /
   box-shadow / opacity / filter — nothing that changes the bar's size or
   position, so arrow anchoring and the today line are unaffected. The same
   modifier classes drive the legend swatches. Signed-in views only. */

/* Planned — not started yet: faded, with a dashed outline that follows the
   rounded corners. */
.is-status-planned { opacity: 0.55; }
.is-status-planned::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(255, 255, 255, 0.9);
  border-radius: inherit;
  pointer-events: none;
}

/* On Hold — paused: diagonal hatch. */
.is-status-on_hold::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.35) 0,
    rgba(255, 255, 255, 0.35) 3px,
    transparent 3px,
    transparent 7px
  );
}

/* At Risk — needs attention: solid danger-coloured border. */
.is-status-at_risk::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--danger);
  border-radius: inherit;
  pointer-events: none;
}

/* Done — finished: muted, with a check at the trailing edge. */
.is-status-done { filter: saturate(0.55); opacity: 0.85; padding-right: 1.1rem; }
.is-status-done::after {
  content: "✓";
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  font-size: 0.8em;
  line-height: 1;
  color: #fff;
  pointer-events: none;
}

/* Cancelled — dead: greyed and struck through (works even on label-less
   short bars, where text-decoration alone wouldn't show). */
.is-status-cancelled { filter: grayscale(1); opacity: 0.6; }
.is-status-cancelled::after {
  content: "";
  position: absolute;
  left: 4px;
  right: 4px;
  top: 50%;
  height: 1px;
  background: rgba(255, 255, 255, 0.9);
  pointer-events: none;
}

/* Legend — shared swatches reuse the cue classes so samples match the bars
   exactly. */
.bar-legend {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 1rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.bar-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.bar-legend__sample {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  width: 34px;
  height: 14px;
  border-radius: 4px;
  background: var(--accent);
  flex: 0 0 auto;
}

/* --- Drag-to-move / resize epic bars (Timeline + Plan), editors only --- */
[data-plan-root][data-schedule-url] .plan__bar,
.timeline[data-schedule-url] .tbar {
  cursor: grab;
}
.plan__bar.is-bar-dragging,
.tbar.is-bar-dragging {
  cursor: grabbing;
  z-index: 5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
/* Floating "start -> end" label that follows the cursor during a bar drag. */
.bar-drag-label {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  padding: 3px 7px;
  border-radius: 5px;
  /* Fixed dark-on-light contrast in both themes — a floating tooltip, so it must
     not inherit the theme text colour (which goes dark in light mode and was
     rendering black-on-black). */
  background: #1f2433;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}

/* --- Epic activity log (history page + drawer preview) --- */
.activity-log { list-style: none; margin: 0; padding: 0; }
.activity-log__row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}
.activity-log__row:last-child { border-bottom: none; }
.activity-log__who {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
  min-width: 7rem;
  font-weight: 600;
}
.activity-log__avatar {
  width: 18px; height: 18px; border-radius: 50%; object-fit: cover;
}
.activity-log__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-log__desc { flex: 1 1 auto; min-width: 0; color: var(--text); }
.activity-log__time {
  flex: 0 0 auto; color: var(--text-muted); font-size: 0.85rem; white-space: nowrap;
}
/* Drawer Activity preview: a collapsed footer section (like Relationships),
   set off from the form actions above by a full-width divider. Side padding
   matches `.drawer__form` (1.25rem) so the summary triangle lines up with the
   Relationships disclosure inside the form. Compact feed rows for the drawer. */
.drawer__activity {
  padding: 1rem 1.25rem 1.25rem;
  border-top: 1px solid var(--border);
}
.drawer__activity > summary { cursor: pointer; }
.drawer__activity[open] > summary { margin-bottom: 0.5rem; }
.drawer__activity .activity-log { font-size: 0.85rem; }
.drawer__activity .activity-log__row { padding: 0.4rem 0; gap: 0.5rem; }
.drawer__activity .activity-log__who { min-width: 0; }
.drawer__activity .activity-log__avatar { width: 16px; height: 16px; }
.drawer__activity-more {
  display: block;
  text-align: right;
  margin-top: 0.7rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-decoration: none;
}
.drawer__activity-more:hover { text-decoration: underline; }

/* --- "Changes since your last visit" board banner --- */
.changes-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0.9rem;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  background: var(--surface-1, var(--surface, transparent));
}
.changes-banner__actions { display: inline-flex; gap: 0.5rem; align-items: center; }
.changes-banner__actions form { margin: 0; }

.changes-group { margin-bottom: 1.25rem; }
.changes-group__title { margin: 0 0 0.25rem 0; font-size: 1rem; }