.wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 28px 32px 60px;
  font-family: "IBM Plex Sans", -apple-system, "Segoe UI", sans-serif;
  color: var(--text);
}

.wrap,
.wrap :where(*) {
  box-sizing: border-box;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 2px solid var(--grid);
  padding-bottom: 16px;
  margin-bottom: 6px;
}
.title {
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.title .tag {
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--muted);
  text-transform: uppercase;
}
.title h1 {
  margin: 4px 0 0;
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
}
.title h1 span {
  color: var(--accent);
  font-weight: 500;
}
.meta {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
}
.meta b {
  color: var(--text);
}
.meta-sep {
  color: var(--grid);
}

.legend {
  display: flex;
  gap: 15px;
  margin: 14px 0 24px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9.5px;
  color: var(--muted);
  flex-wrap: wrap;
  align-items: center;
}
.legend-hint {
  flex-basis: 100%;
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.02em;
}
.legend-hint-active {
  color: var(--accent);
  font-weight: 600;
}
.legend-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid transparent;
  background: #ffffff;
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 8.5px;
  font: inherit;
  cursor: pointer;
  transition: all 0.15s ease;
  opacity: 0.58;
  white-space: nowrap;
}
.legend-btn:hover {
  color: var(--text);
  border-color: var(--line);
  box-shadow: var(--shadow);
  opacity: 0.82;
}
.legend-btn.active {
  color: var(--text);
  border-color: var(--line);
  box-shadow: var(--shadow);
  opacity: 1;
  background: #ffffff;
}
.legend-btn.inactive {
  border-color: var(--line);
  background: #f8fafc;
}
.legend-btn .sw {
  flex: 0 0 auto;
}
.legend-btn small {
  margin-left: 2px;
  font-size: 7.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  min-width: 15px;
  display: inline-block;
  text-align: left;
}
.legend-divider {
  width: 1px;
  align-self: stretch;
  min-height: 15px;
  background: var(--line);
  flex: 0 0 auto;
}
.legend-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #ffffff;
  color: var(--muted);
  font-size: 7.5px;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
}
.legend-clear:hover {
  color: #ffffff;
  background: var(--accent);
  border-color: var(--accent);
}
.legend-avatar {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 7px;
  font-weight: 700;
  color: #ffffff;
  flex: 0 0 auto;
}
.summary-cards {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 18px;
}
.summary-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: var(--shadow);
}
.summary-card span {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.summary-card strong {
  display: block;
  font-size: 28px;
  line-height: 1.05;
  color: var(--text);
}
.summary-card small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
}
.month-header {
  display: grid;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
  align-items: stretch;
}
.month-header div {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  color: var(--muted);
  padding: 6px 8px;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
}
.month-header .month-label {
  text-align: center;
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.legend .sw {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  vertical-align: -1px;
  border: 1px solid;
}
.sw.done { background: var(--done); border-color: var(--done); }
.sw.progress { background: var(--progress); border-color: var(--progress); }
.sw.review { background: var(--review); border-color: var(--review); }
.sw.todo { background: var(--todo); border-color: var(--todo); }
.sw.cancelled { background: var(--cancelled); border-color: var(--cancelled); }

.board-shell {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.project-rail {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: none;
  padding-top: 2px;
  position: sticky;
  top: 8px;
  /* .detail-backdrop is a full-viewport fixed overlay at z-index:100 for
     the task detail panel — without this, it silently sits on top of the
     rail (unset z-index) and swallows every click, so the rail looked
     "broken" as soon as any task had been opened. The rail is navigation
     chrome, not board content the modal needs to protect, so it stays
     above the backdrop instead. */
  z-index: 101;
}
.rail-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #ffffff;
  color: var(--muted);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}
.rail-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.rail-btn.current {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}
.board {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}
.rows-scroll {
  /* overflow-x: auto with overflow-y: visible computes overflow-y to auto
     too (CSS Overflow spec), silently making this box the nearest
     scrolling ancestor for any position:sticky descendant — which broke
     .project-group-head's "top: 0" (it stuck to this box's own unbounded
     height instead of the page). Bounding the height and scrolling both
     axes here on purpose makes that scrolling ancestor real, so
     project-group-head's sticky top and sticky-cell's sticky left both
     work the same way, together. */
  max-height: 70vh; /* fallback; board.js's sizeRowsScroll() sets a precise
     value based on actual viewport space right after render/resize */
  overflow: auto;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: var(--accent) transparent;
}
.rows-scroll::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
.rows-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.rows-scroll::-webkit-scrollbar-thumb {
  background: rgba(37, 99, 235, 0.35);
  border-radius: 4px;
}
.rows-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(37, 99, 235, 0.55);
}
.grid-inner {
  position: relative;
  min-width: 1220px;
}

.week-header {
  display: grid;
  grid-template-columns: 260px repeat(7, 136px);
  border-bottom: 1px solid var(--line);
}
.week-header div {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--muted);
  padding: 10px 8px;
  border-left: 1px dashed var(--line);
  letter-spacing: 0.05em;
}
.week-header .day-label {
  text-align: center;
  white-space: nowrap;
}
.week-header .day-label.major {
  color: var(--text);
  font-weight: 700;
}
.week-header div:first-child {
  border-left: none;
  color: var(--text);
  font-weight: 600;
}

.sticky-cell {
  position: sticky;
  left: 0;
  z-index: 6;
  background: inherit;
  box-shadow: 10px 0 16px -14px rgba(15, 23, 42, 0.32);
}

.month-header .sticky-cell,
.week-header .sticky-cell {
  z-index: 7;
  background: #f8fafc;
}

.team-group {
  border-bottom: 1px solid var(--line);
}
.project-group {
  border-bottom: 2px solid var(--line);
  margin-bottom: 6px;
  background: #ffffff;
}
.project-group-head {
  background: #f6f9fe;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  color: var(--muted);
  font-size: 11px;
  position: sticky;
  top: 0;
  z-index: 8;
}
.project-group-head-inner {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 20px;
  padding: 12px 14px;
  width: fit-content;
  position: sticky;
  left: 0;
  z-index: 3;
}
.project-group-head-inner > span {
  color: var(--text);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.project-group-head-inner > div {
  display: flex;
  align-items: center;
  gap: 12px;
}
.team-label {
  display: grid;
  grid-template-columns: 260px 1fr;
  background: rgba(15, 23, 42, 0.025);
}
.team-label span:not(.status-pill) {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 8px 12px;
}
.team-label span.sticky-cell {
  background: rgba(15, 23, 42, 0.025);
}
.team-label-name {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.team-label-name:hover {
  background: rgba(37, 99, 235, 0.04);
}
.team-label-name:hover span:not(.status-pill) {
  color: var(--accent);
}
.team-dates {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}
.team-dates.sticky-cell-right {
  /* Pins to the right edge of the visible scrollport (mirrors
     .sticky-cell's left:0), instead of scrolling away with the
     day-grid — same "dual anchor" idea as the name pinned left. */
  position: sticky;
  right: 0;
  justify-self: end;
  z-index: 4;
  padding: 8px 12px 8px 14px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(2px);
  border-left: 1px solid var(--line);
}
.team-dates span:not(.status-pill) {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--muted);
}
.team-dates-sep {
  margin: 0 6px;
  color: var(--line);
}
.team-toggle {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  padding: 8px 0 8px 12px;
  flex-shrink: 0;
}
.team-toggle:hover {
  color: var(--accent);
}

.row {
  display: grid;
  grid-template-columns: 260px 1fr;
  border-top: 1px solid var(--line);
  position: relative;
  min-height: 44px;
}
.row-label {
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--text);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  background: #ffffff;
  z-index: 2;
  cursor: pointer;
}
.row-label:hover {
  background: rgba(37, 99, 235, 0.04);
}
.row-label:hover > div:first-child {
  color: var(--accent);
}
.row-label.sticky-cell {
  left: 0;
}
.row-label .id {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  color: var(--muted);
}
.row-track {
  position: relative;
  height: 44px;
  background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 28px 100%;
}

.row-track,
.month-header,
.week-header {
  min-width: max-content;
}

.bar {
  position: absolute;
  top: 11px;
  height: 22px;
  border: 1px solid;
  display: flex;
  align-items: center;
  padding: 0 8px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  transition: filter 0.15s;
}
.bar:hover {
  filter: brightness(1.35);
}
.bar:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.bar.done { background: rgba(94, 234, 212, 0.14); border-color: var(--done); color: var(--done); }
.bar.progress { background: rgba(100, 214, 255, 0.14); border-color: var(--progress); color: var(--progress); }
.bar.review { background: rgba(124, 111, 224, 0.14); border-color: var(--review); color: var(--review); }
.bar.todo { background: rgba(148, 163, 184, 0.16); border-color: var(--todo); color: var(--text); }
.bar.cancelled { background: rgba(255, 180, 84, 0.14); border-color: var(--cancelled); color: var(--cancelled); }

.dim {
  position: absolute;
  bottom: -9px;
  height: 6px;
  border-left: 1px solid var(--muted);
  border-right: 1px solid var(--muted);
  border-bottom: 1px solid var(--muted);
  opacity: 0.35;
  pointer-events: none;
}
.dim-label {
  position: absolute;
  bottom: -22px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 9px;
  color: var(--muted);
  white-space: nowrap;
  pointer-events: none;
}

.today-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 2px solid var(--accent);
  z-index: 5;
  pointer-events: none;
}
.tooltip {
  position: fixed;
  background: #ffffff;
  border: 1px solid var(--line);
  color: var(--text);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  padding: 8px 10px;
  pointer-events: none;
  z-index: 50;
  max-width: 240px;
  line-height: 1.5;
  box-shadow: var(--shadow);
}

footer {
  margin-top: 20px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  color: var(--muted);
}

/* Task detail panel */
.detail-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.16);
  display: flex;
  justify-content: flex-end;
  z-index: 100;
}
.detail-panel {
  width: min(360px, 90vw);
  height: 100%;
  background: #ffffff;
  border-left: 1px solid var(--line);
  padding: 24px;
  color: var(--text);
  font-family: "IBM Plex Sans", sans-serif;
  box-shadow: -16px 0 32px rgba(15, 23, 42, 0.08);
}
.detail-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.detail-id {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.08em;
}
.detail-close {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}
.detail-close:hover {
  color: var(--text);
}
.detail-panel h2 {
  font-size: 18px;
  margin: 10px 0 20px;
}
.detail-panel dl {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px 12px;
  font-size: 13px;
  margin: 0;
}
.detail-panel dt {
  color: var(--muted);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.status-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.4;
  width: fit-content;
  border: 1px solid;
  vertical-align: middle;
}
.status-pill.done { color: var(--done); border-color: var(--done); background: rgba(94, 234, 212, 0.1); }
.status-pill.progress { color: var(--progress); border-color: var(--progress); background: rgba(100, 214, 255, 0.1); }
.status-pill.review { color: var(--review); border-color: var(--review); background: rgba(124, 111, 224, 0.1); }
.status-pill.todo { color: var(--text); border-color: var(--line); background: rgba(148, 163, 184, 0.1); }
.status-pill.cancelled { color: var(--cancelled); border-color: var(--cancelled); background: rgba(255, 180, 84, 0.1); }
.status-pill.review.chip { border-style: dashed; background: rgba(124, 111, 224, 0.06); font-weight: 600; margin-left: 6px; }
.detail-notes {
  margin-top: 22px;
}
.detail-notes h3 {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  font-family: "JetBrains Mono", ui-monospace, monospace;
}
.detail-notes-body {
  border: 1px solid var(--line);
  background: #f8fafc;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--text);
}
.detail-notes-body :first-child {
  margin-top: 0;
}
.detail-notes-body :last-child {
  margin-bottom: 0;
}

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

@media (max-width: 640px) {
  .summary-cards {
    grid-template-columns: 1fr;
  }
}