: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;
}

/* Full-page epic editor layout.
   The shared field partial wraps its fields in .form__grid > {.form__grid-main,
   .form__grid-meta}. Those wrappers are display:contents by default, so the
   resizable drawer and narrow screens keep the original single-column flow.
   Here we promote them to a two-column "content + metadata" grid that uses the
   width the page has — the regular narrow column wasted most of a wide screen.
   Scoped with :not(.drawer__form) so only the full-page form is affected. */
.form__grid,
.form__grid-main,
.form__grid-meta {
  display: contents;
}

[data-epic-form]:not(.drawer__form) {
  max-width: 1100px;
}
[data-epic-form]:not(.drawer__form) .form__row {
  max-width: none;
}
/* Pair the compact fields (date/quarter ranges, difficulty/effort) side by side
   when there's room, instead of stacking narrow boxes. */
[data-epic-form]:not(.drawer__form) .form__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0 1rem;
}
[data-epic-form]:not(.drawer__form) [name="title"] {
  font-size: 1.15rem;
  font-weight: 600;
  padding: 0.55rem 0.7rem;
}

@media (min-width: 900px) {
  [data-epic-form]:not(.drawer__form) .form__grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 0 2.5rem;
    align-items: start;
  }
  [data-epic-form]:not(.drawer__form) .form__grid-main,
  [data-epic-form]:not(.drawer__form) .form__grid-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
}

.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;
}

/* Toast UI rich Markdown editor (epic description). The host fills the field
   width (so it grows with the resizable drawer) and matches the app radius. */
.md-editor {
  width: 100%;
}
.md-editor .toastui-editor-defaultUI {
  border-radius: 8px;
}

/* 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;
}
/* A field changed since the form loaded — a hand-edit (is-dirty) or a value a
   YouTrack refresh pulled in (is-yt-changed). Highlight the input itself so the
   change is obvious: accent border + soft tint, with an accent label. */
.is-dirty .input,
.is-yt-changed .input {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-raised));
}
.is-dirty > label,
.is-dirty > .form__label,
.is-yt-changed > label {
  color: var(--accent);
}
.form__unsaved-cue {
  align-self: center;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.btn--emphasis {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
}

.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);
}
.chip--tag {
  background: var(--surface-raised);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.youtrack-id-actions {
  display: inline-flex;
  gap: 0.3rem;
  align-items: stretch;
}
.youtrack-id-btn {
  padding: 0 0.6rem;
  font-size: 1.05rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.youtrack-id-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.youtrack-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0.2rem 0 0.4rem;
}
.youtrack-meta__row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.youtrack-meta__label {
  flex: 0 0 64px;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.youtrack-meta__val {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
}

/* .is-yt-changed input/label highlight lives with .is-dirty near the form styles. */
.youtrack-refresh-banner {
  margin: 0.3rem 0 0.5rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--text);
}

.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 is drag-resizable (drawer-resize.js sets --drawer-w); this is the
     default. The resize handle reads the same var to track the edge. */
  width: var(--drawer-w, min(560px, 92vw));
  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;
}

/* Left-edge drag handle, revealed only while the drawer is open. Fixed to the
   drawer's left edge via the shared --drawer-w var. */
.drawer__resize {
  position: fixed;
  top: 0;
  right: var(--drawer-w, min(560px, 92vw));
  width: 11px;
  height: 100vh;
  transform: translateX(50%);
  cursor: ew-resize;
  z-index: 51;
  opacity: 0;
  pointer-events: none;
  touch-action: none;
}
.drawer.is-open ~ .drawer__resize {
  opacity: 1;
  pointer-events: auto;
}
.drawer__resize::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: var(--border);
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.drawer__resize:hover::before {
  opacity: 1;
  background: var(--accent);
}
body.is-resizing-drawer {
  user-select: none;
  cursor: ew-resize;
}
body.is-resizing-drawer .drawer {
  transition: none;   /* no lag while dragging */
}
/* In the drawer, fields fill the (resizable) width instead of the 360px form
   cap, so the title and description become larger BOXES as the drawer widens.
   Scoped to .drawer so the regular edit page keeps its narrow column. */
.drawer .form__row {
  max-width: none;
}
.drawer [name="title"] {
  padding: 0.6rem 0.75rem;
  font-size: 1.1rem;
  font-weight: 600;
}
/* Taller description box; its height also scales with the drawer width and it
   stays user-resizable vertically. The preview matches so toggling doesn't jump. */
.drawer [data-md-input],
.drawer [data-md-preview] {
  min-height: clamp(9rem, calc(var(--drawer-w, min(560px, 92vw)) * 0.32), 24rem);
}
.drawer [data-md-input] {
  resize: vertical;
  line-height: 1.5;
}
/* Pair adjacent compact fields into columns when the drawer has room, so wide
   widths don't leave single fields stretched. Collapses to one column when narrow. */
.drawer .form__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0 1rem;
}

.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). */
/* Right-hand header cell: the view actions, pushed to the trailing edge. */
.board-header__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  justify-self: end;
}

/* Present sits on its own right-aligned row just below the header (Quarters
   only), in normal flow so the board starts beneath it — not crowding the
   Add-epic button or floating over the columns. */
.board-header__present {
  display: flex;
  justify-content: flex-end;
  /* Pull up to cancel the header's bottom margin so Present sits just under the
     action icons (≈0.5rem, like the timeline tools row), not a row below. */
  margin: -1.25rem 0 0.75rem;
}

.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 */
}

/* ---- Presentation mode (Quarters) ---------------------------------------
   board-present.js fullscreens .board-page and adds .is-presenting. The board
   then shows one quarter at a time (the .is-present-active column) with each
   team group laid out as a column, in large type. The active card
   (.is-present-current) is lit; the rest dim so the room's eye follows it. */

.board-page.is-presenting {
  background: var(--bg);
  overflow-y: auto;
  padding: 4.5rem 2rem 5rem;   /* clears the fixed top bar and bottom nav */
}
.board-page.is-presenting .board-header,
.board-page.is-presenting .board-header__present,
.board-page.is-presenting .changes-banner {
  display: none;
}

/* Centre the active quarter vertically in the open space — a column-direction
   flex, so the quarter also stretches to the full width (cross axis). `safe
   center` keeps the top reachable when a packed quarter overflows. */
.board-page.is-presenting .board-cols {
  display: flex;
  flex-direction: column;
  justify-content: safe center;
  min-height: calc(100vh - 10rem);
  overflow: visible;
  padding: 0;
}
.board-page.is-presenting .board-col {
  display: none;
}
/* The quarter is a single row of team columns, always side by side — they grow
   to share the width when they fit and shrink to their readable min-width when
   they don't, at which point the row scrolls horizontally (so a 4th/5th team is
   one scroll to the right, not wrapped far down the page). `safe center` keeps
   the columns centred when they fit but pins them to the start once the row
   overflows, so the leftmost stays reachable. The column's own card-chrome
   (surface/border) is dropped for a clean slide; flex:0 0 auto stops it
   inheriting the 25%-width basis from the base .board-col rule. */
.board-page.is-presenting .board-col.is-present-active {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  justify-content: safe center;
  align-items: flex-start;
  gap: 2.5rem;
  width: 100%;
  overflow-x: auto;
  scroll-padding-inline: 2rem;
  padding-bottom: 0.75rem;   /* breathing room for the horizontal scrollbar */
  background: none;
  border: 0;
}
.board-page.is-presenting .board-col__head {
  display: none;   /* the quarter label lives in the .present-bar instead */
}
.board-page.is-presenting .board-group {
  flex: 1 1 400px;
  min-width: 360px;
  max-width: 720px;   /* keep cards a readable width; columns centre when capped */
  margin: 0;
  padding-left: 1rem;
  border-left-width: 4px;
}
.board-page.is-presenting .board-group__summary {
  font-size: clamp(1.6rem, 2.1vw, 2.6rem);   /* scales up on a big shared screen */
  font-weight: 600;
  color: var(--text);
  margin-bottom: 1rem;
}
/* Edit-only affordances would clutter a read-only slide. */
.board-page.is-presenting .bcard-row__unlink {
  display: none;
}

.board-page.is-presenting .bcard {
  opacity: 0.4;
  padding: 1.1rem 1.35rem;
  margin-bottom: 0.85rem;
  gap: 0.6rem;
  transition: opacity 0.15s ease, transform 0.15s ease, outline-color 0.15s ease;
}
.board-page.is-presenting .bcard__title {
  font-size: clamp(1.7rem, 2.4vw, 2.9rem);
  line-height: 1.25;
}
.board-page.is-presenting .bcard__owner {
  font-size: clamp(1.1rem, 1.2vw, 1.5rem);
}
.board-page.is-presenting .status-badge {
  font-size: clamp(1rem, 1.1vw, 1.4rem);
}
.board-page.is-presenting .bcard__span,
.board-page.is-presenting .chip {
  font-size: clamp(1rem, 1vw, 1.3rem);
}
.board-page.is-presenting .bcard.is-present-current {
  opacity: 1;
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  transform: scale(1.02);
}

.present-bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.6rem 1.25rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.present-bar__quarter {
  font-size: clamp(1.7rem, 2.4vw, 2.9rem);
  font-weight: 700;
}
/* Floating control pill, hovering near the bottom centre. */
.present-nav {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.45rem 0.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}
.present-nav__group {
  display: inline-flex;
  gap: 0.3rem;
}
/* Round icon buttons: the quarter steppers and Exit. */
.present-nav__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text);
  font-size: 1.05rem;
  cursor: pointer;
}
/* Segmented Previous | Next joined into one rounded control; Next is primary. */
.present-nav__seg {
  display: inline-flex;
}
.present-nav__seg-btn {
  border: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--text);
  padding: 0.5rem 1.15rem;
  font-size: 1rem;
  cursor: pointer;
}
.present-nav__seg-btn:first-child {
  border-radius: 999px 0 0 999px;
  border-right-width: 0;
}
.present-nav__seg-btn:last-child {
  border-radius: 0 999px 999px 0;
}
.present-nav__seg-btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.present-nav__pos {
  min-width: 3.5rem;
  text-align: center;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.present-nav__icon:disabled,
.present-nav__seg-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.present-nav__icon:not(:disabled):hover,
.present-nav__seg-btn:not(:disabled):hover {
  border-color: var(--accent);
}

/* Read-only detail modal (Enter / click on the selected card). Lives inside
   .board-page so it renders in the fullscreen top layer. */
.present-detail {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.present-detail__panel {
  position: relative;
  width: min(820px, 92vw);
  max-height: 82vh;
  overflow-y: auto;
  padding: 2.25rem 2.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  /* Scale with the screen like the rest of presentation mode; meta and
     description text inherit this so they read at the same size. */
  font-size: clamp(1.05rem, 1.2vw, 1.5rem);
}
.present-detail__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.2rem;
  height: 2.2rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text);
  cursor: pointer;
  font-size: 1rem;
}
.present-detail__close:hover {
  border-color: var(--accent);
}
.present-detail__head {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding-right: 2.5rem;   /* clear the close button */
  margin-bottom: 1.25rem;
}
.present-detail__title {
  flex: 1 1 auto;
  margin: 0;
  font-size: clamp(1.6rem, 2.4vw, 2.9rem);
  line-height: 1.25;
}
.present-detail__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.45rem 1.5rem;
  margin: 0 0 1.5rem;
}
.present-detail__meta dt {
  color: var(--text-muted);
}
.present-detail__meta dd {
  margin: 0;
}
.present-detail__desc {
  line-height: 1.55;
}
/* Rendered-Markdown block elements inside the description. */
.present-detail__desc > :first-child {
  margin-top: 0;
}
.present-detail__desc > :last-child {
  margin-bottom: 0;
}
.present-detail__desc p {
  margin: 0 0 0.8em;
}
.present-detail__desc ul,
.present-detail__desc ol {
  margin: 0 0 0.8em;
  padding-left: 1.4em;
}
.present-detail__desc li {
  margin: 0.15em 0;
}
.present-detail__desc h1,
.present-detail__desc h2,
.present-detail__desc h3,
.present-detail__desc h4 {
  margin: 0.6em 0 0.4em;
  line-height: 1.25;
}
.present-detail__desc h1 { font-size: 1.5em; }
.present-detail__desc h2 { font-size: 1.3em; }
.present-detail__desc h3,
.present-detail__desc h4 { font-size: 1.1em; }
.present-detail__desc a {
  color: var(--accent);
}
.present-detail__desc code {
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  font-size: 0.9em;
}
.present-detail__desc blockquote {
  margin: 0 0 0.8em;
  padding-left: 0.9em;
  border-left: 3px solid var(--border);
  color: var(--text-muted);
}
.present-detail__desc hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 0.9em 0;
}
.present-detail__desc--empty {
  color: var(--text-muted);
  font-style: italic;
}

.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;
}

.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) ===================== */
/* ===== Sign-in — split showcase ====================================
   Left: a "living roadmap" hero (quarter columns + team-colour timeline
   bars that draw in on load) on a fixed deep-blue panel, so the bars pop
   and the page reads as a hero in either theme. Right: a clean, theme-aware
   sign-in card. Below 860px the hero is dropped and the card stands alone. */
.login {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
}

.showcase {
  position: relative;
  overflow: hidden;
  min-width: 0; /* allow the grid column to shrink instead of forcing overflow */
  display: flex;
  align-items: center;
  padding: clamp(2rem, 5vw, 4.5rem);
  color: #eaf0ff;
  background:
    radial-gradient(120% 95% at 16% 10%, rgba(76, 139, 245, 0.40), transparent 55%),
    radial-gradient(95% 85% at 98% 102%, rgba(176, 124, 245, 0.22), transparent 55%),
    linear-gradient(150deg, #0c1838 0%, #14264d 55%, #0a1430 100%);
}
.showcase__inner {
  position: relative;
  width: 100%;
  max-width: 540px;
  margin-inline: auto;
}
.showcase__board {
  padding: 1.1rem 1.3rem 1.45rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.38);
  animation: login-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.showcase__quarters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 0.95rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(234, 240, 255, 0.55);
}
.showcase__lanes {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /* faint quarter divider lines behind the bars */
  background-image: repeating-linear-gradient(to right,
    rgba(255, 255, 255, 0.07) 0, rgba(255, 255, 255, 0.07) 1px,
    transparent 1px, transparent 25%);
}
/* "Today" guide — echoes the red marker on the real timeline. */
.showcase__now {
  position: absolute;
  top: -0.15rem;
  bottom: -0.15rem;
  left: 38%;
  width: 2px;
  background: linear-gradient(rgba(255, 110, 110, 0), rgba(255, 110, 110, 0.85) 18%, rgba(255, 110, 110, 0.85) 82%, rgba(255, 110, 110, 0));
  box-shadow: 0 0 12px rgba(255, 90, 90, 0.55);
  opacity: 0;
  animation: login-fade 0.6s ease 0.9s forwards;
}
.rbar {
  height: 20px;
  margin-left: calc(var(--l) * 1%);
  width: calc(var(--w) * 1%);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  transform: scaleX(0);
  transform-origin: left center;
  animation: rbar-grow 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes rbar-grow { to { transform: scaleX(1); } }
.rbar--cloud    { background: linear-gradient(90deg, #4c8bf5, #6ea4ff); }
.rbar--data     { background: linear-gradient(90deg, #5fd0a6, #80e2bf); }
.rbar--mobile   { background: linear-gradient(90deg, #f5a623, #ffc564); }
.rbar--platform { background: linear-gradient(90deg, #b07cf5, #c89dff); }
.rbar.is-ghost {
  background: transparent;
  border: 1.5px dashed rgba(255, 255, 255, 0.4);
  box-shadow: none;
}
.showcase__lanes .rbar:nth-child(2) { animation-delay: 0.15s; }
.showcase__lanes .rbar:nth-child(3) { animation-delay: 0.24s; }
.showcase__lanes .rbar:nth-child(4) { animation-delay: 0.33s; }
.showcase__lanes .rbar:nth-child(5) { animation-delay: 0.42s; }
.showcase__lanes .rbar:nth-child(6) { animation-delay: 0.51s; }
.showcase__lanes .rbar:nth-child(7) { animation-delay: 0.60s; }
.showcase__lanes .rbar:nth-child(8) { animation-delay: 0.69s; }

.showcase__caption {
  margin-top: 2.1rem;
  animation: login-rise 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
}
.showcase__headline {
  margin: 0;
  font-size: clamp(1.85rem, 3.2vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.showcase__sub {
  margin: 0.7rem 0 0;
  max-width: 34ch;
  font-size: 1rem;
  line-height: 1.45;
  color: rgba(234, 240, 255, 0.72);
}

.login-panel {
  min-width: 0; /* let the column shrink; the card's max-width caps the width */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2rem 1.5rem;
  background: var(--bg);
}
.login__flashes { width: 100%; max-width: 360px; }
.login-card {
  width: 100%;
  max-width: 360px;
  text-align: center;
  animation: login-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}
.login-card__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(140deg, var(--accent), #3360c9);
  box-shadow: 0 12px 26px rgba(76, 139, 245, 0.38);
}
.login-card__brand { margin: 1rem 0 0.35rem; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; }
.login-card__lead { margin: 0 0 1.7rem; color: var(--text-muted); font-size: 0.95rem; }
.login-card__google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: 100%;
  box-sizing: border-box;
  padding: 0.8rem 1rem;
  background: var(--accent);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 12px;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(76, 139, 245, 0.3);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.login-card__google:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(76, 139, 245, 0.42); filter: brightness(1.04); }
.login-card__google:active { transform: translateY(0); }
.login-card__g {
  display: inline-flex;
  padding: 5px;
  background: #fff;
  border-radius: 7px;
  line-height: 0;
}
.login-card__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 1.5rem 0 0;
  color: var(--text-muted);
  font-size: 0.82rem;
}

@keyframes login-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes login-fade { to { opacity: 1; } }

@media (max-width: 860px) {
  /* Single-column block layout — the panel fills the viewport width and
     centres the card; avoids any grid min-content overflow on phones. */
  .login { display: block; }
  .showcase { display: none; }
  .login-panel { min-height: 100vh; }
}
@media (prefers-reduced-motion: reduce) {
  .rbar { animation: none; transform: scaleX(1); }
  .showcase__now { animation: none; opacity: 1; }
  .showcase__board,
  .showcase__caption,
  .login-card { animation: none; opacity: 1; transform: none; }
}

/* 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; }
/* On Timeline/Plan the secondary tools row (zoom/snap/export) hangs out of flow
   below the header's right edge — see .board-header__row--tools. The banner
   renders in normal flow right after the header, so without this it slides under
   that hanging row. Drop it clear of the row's hang (≈ 0.5rem margin + one icon
   button) on top of the header's own 1.25rem bottom margin. Quarters has no
   tools row, so the offset is omitted there. */
.changes-banner--below-tools { margin-top: 2.75rem; }

/* The preview banner sits in the top bar where the app nav would be: a compact
   "message + Exit" unit, set off from the brand by a subtle divider. A spacer
   after it (added in base.html) pushes the theme toggle to the right. */
.preview-banner {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding-left: 1rem;
  border-left: 1px solid var(--border);
}
.preview-banner__text {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-muted);
}

/* "Changes since your last visit" page — a centred reading column with a
   plain page header and one card per epic. The epic title sits in a header
   strip (echoing .panel__head) so even a single change reads as a tidy unit,
   and the title link is toned down to text colour (the default browser link
   purple looked garish against the surface). */
.changes-page { max-width: 880px; margin: 0 auto; }
.changes-page__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.changes-page__heading h1 { margin: 0; }
.changes-page__back {
  display: inline-block;
  margin-bottom: 0.2rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  text-decoration: none;
}
.changes-page__back:hover { color: var(--accent); }

.changes-page__groups { display: flex; flex-direction: column; gap: 0.85rem; }

.changes-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  overflow: hidden;
}
.changes-card__title {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  padding: 0.7rem 1rem;
  font-size: 0.95rem;
  font-weight: 600;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border);
}
.changes-card__title a { color: var(--text); text-decoration: none; }
.changes-card__title a:hover { color: var(--accent); }
.changes-card__count {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
}
/* Change rows sit flush inside the card body, under the title strip. */
.changes-card .activity-log { padding: 0.15rem 1rem; }

/* ── Type icon (YouTrack ticket type inline SVG) ─────────────────────── */
.type-icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  flex: 0 0 auto;
  color: var(--text-muted);
}

.bcard__type-icon {
  vertical-align: -0.1em;
}

.youtrack-id-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}

.youtrack-id-cell__type-icon {
  color: var(--text-muted);
}

/* Drag-to-reorder affordances (plan rail + timeline lanes) */
.plan__rail-grip,
.timeline__lane-grip {
  cursor: grab;
  color: var(--text-muted);
  margin-right: 0.35em;
  user-select: none;
  font-size: 0.85em;
}
.plan__rail-grip:active,
.timeline__lane-grip:active {
  cursor: grabbing;
}

.plan__rail-row.is-dragging,
.plan__rail-section.is-dragging,
.timeline__lane.is-dragging {
  opacity: 0.5;
}

.settings-drawer__reset-order {
  margin-top: 1.25rem;
}