/* ==== CSS VARIABLES ==== */
:root {
  --line-height: 1.3rem;
  --grid-height: 0.65rem;

  /* Dark theme defaults (overridden by vars.css) */
  --bg-color: #282a36;
  --text-color: #f8f8f2;
  --border: #6272a4;
  --link-color: #8be9fd;
  --hover: #ff79c6;
  --visited: #8be9fd;
  --white: #f2f2f2;
  --white-light: #f2f2f2;
  --white-dark: #e8e8e8;
  --grey: #414558;
  --grey-light: #6a708e;
  --code: #414558;
  --pre: #252525;
  --blockquote: #bd93f9;
  --blockquote-bg: #353548;
  --text-red: #ff5555;
  --text-green: #50fa7b;
}

/* ==== BASE RESET ==== */
*,
::before,
::after {
  box-sizing: border-box;
}

::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

:-moz-focusring {
  outline: 1px dotted ButtonText;
}

:-moz-ui-invalid {
  box-shadow: none;
}

html {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-size: 16px;
  line-height: var(--line-height);
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Fira Sans",
    "Droid Sans",
    "Helvetica Neue",
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
}

body {
  margin: 0 auto;
  max-width: 900px;
}

img {
  max-width: 100%;
  height: auto;
}

b,
strong {
  font-weight: bold;
}

code,
kbd,
samp,
pre {
  font-family: monospace;
}

code,
kbd,
samp {
  border: 2px solid var(--code);
}

pre>code {
  background-color: inherit;
  padding: 0;
  border: none;
  border-radius: 0;
}

code {
  font-size: 90%;
  border-radius: 0.3rem;
  padding: 0.025rem 0.3rem;
}

pre {
  font-size: 0.8rem;
  border-radius: 1px;
  padding: var(--line-height);
  overflow-x: auto;
  background-color: var(--pre);
  border: 1px solid var(--border);
}

small {
  font-size: 0.8rem;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  padding: 0;
  border: 0;
  font-style: normal;
  font-weight: inherit;
  font-size: inherit;
  font-family: monospace;
}

path {
  fill: var(--text-color);
  stroke: var(--text-color);
}

hr {
  color: inherit;
  border: 0;
  height: 2px;
  background: var(--grey);
  margin: calc(var(--grid-height) - 2px) auto;
  margin-top: calc(var(--line-height) * 2);
}

a {
  text-decoration: none;
  color: var(--link-color);
}

a:hover,
a:visited:hover {
  text-decoration: underline;
}

a:visited {
  color: var(--visited);
}

section {
  margin-bottom: 1.4rem;
}

section:last-child {
  margin-bottom: 0;
}

header {
  margin: 1rem auto;
}

p {
  margin-top: var(--line-height);
  margin-bottom: var(--line-height);
}

article {
  overflow-wrap: break-word;
}

blockquote {
  border-left: 5px solid var(--blockquote);
  background-color: var(--blockquote-bg);
  padding: var(--grid-height);
  margin: var(--line-height) 0;
}

blockquote>p {
  margin: 0;
}

blockquote code {
  border: 1px solid var(--blockquote);
}

ul,
ol {
  padding: 0 15px;
  list-style-position: inside;
  list-style-type: square;
  margin: var(--grid-height) 0;
}

ol ul,
ol ol,
ul ol,
ul ul {
  padding: 0 0 0 var(--line-height);
  margin: 0;
}

li {
  margin: var(--grid-height) 0;
  padding: 0;
}

li::marker {
  line-height: 0;
  color: var(--grey-light);
}

table {
  border-collapse: collapse;
  margin: var(--line-height) 0;
}

th,
td {
  border: 1px solid var(--white);
  padding: var(--grid-height);
}

footer {
  text-align: center;
  margin-bottom: calc(var(--line-height) * 3);
}

dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

dd:not(:last-child) {
  margin-bottom: 0.5rem;
}

figure {
  margin: 0;
}

sup {
  line-height: 0;
}

/* ==== LAYOUT PATTERNS ==== */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--grid-height);
}

.stack--lg {
  gap: var(--line-height);
}

.cluster {
  display: flex;
  align-items: center;
  gap: var(--grid-height);
}

.cluster--xs {
  gap: 0.25rem;
}

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

.split--start {
  align-items: flex-start;
}

/* ==== SITE COMPONENTS ==== */

/* ==== VIEW TRANSITIONS ==== */
@view-transition {
  navigation: auto;
}

/* Smooth cross-fade for view transitions */
::view-transition-old(root) {
  animation: fade-out 150ms ease-out forwards;
}

::view-transition-new(root) {
  animation: fade-in 150ms ease-in forwards;
}

@keyframes fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Prevent flash during HTMX swaps */
.htmx-swapping {
  opacity: 1;
}

.htmx-settling {
  animation: htmx-fade-in 100ms ease-in;
}

@keyframes htmx-fade-in {
  from {
    opacity: 0.8;
  }

  to {
    opacity: 1;
  }
}

/* Site Header */
.site-header {
  display: flex;
  flex-direction: column;
}

.site-header__title {
  font-size: 1rem;
  font-weight: bold;
  line-height: var(--line-height);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  margin: 0;
}

.site-header__logo {
  width: 4rem;
  height: 4rem;
  display: block;
}

.site-header__repo-name {
  vertical-align: middle;
}

.site-header__desc {
  font-style: italic;
  color: var(--grey-light);
  margin-top: var(--grid-height);
}

.site-header__desc>p {
  padding: 0;
  margin: 0;
}

/* Navigation */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 1rem 0;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
  flex-wrap: wrap;
}

.nav-menu a,
.nav-menu span.active {
  color: var(--grey-light);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.9rem;
  text-decoration: none;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
}

.nav-menu a:hover,
.nav-menu span.active {
  color: var(--text-color);
  border-bottom: 2px solid var(--link-color);
}

.nav-menu span.font-bold {
  color: var(--text-color);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.9rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid transparent;
}

/* Ref Selector Dropdown */
.nav-menu__ref-selector {
  margin-left: auto;
  position: relative;
}

.nav-menu__ref-selector summary {
  color: var(--grey-light);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.9rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.nav-menu__ref-selector summary:hover {
  color: var(--text-color);
}

.nav-menu__ref-selector summary::-webkit-details-marker {
  display: none;
}

.nav-menu__ref-selector summary::after {
  content: "▼";
  font-size: 0.7rem;
}

.nav-menu__ref-selector[open] summary::after {
  content: "▲";
}

.ref-selector__dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 150px;
  background-color: var(--bg-color);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.5rem 0;
  margin-top: 0.25rem;
  z-index: 100;
  max-height: 300px;
  overflow-y: auto;
}

.ref-selector__dropdown a {
  display: block;
  padding: 0.25rem 1rem;
  color: var(--text-color);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.9rem;
  text-decoration: none;
  border-bottom: none;
  padding-bottom: 0.25rem;
}

.ref-selector__dropdown a:hover {
  background-color: var(--pre);
  color: var(--link-color);
  text-decoration: none;
}

/* Last Commit Bar (summary page) */
.last-commit-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--grid-height);
  margin-bottom: var(--grid-height);
  font-size: 0.8rem;
  color: var(--grey-light);
}

.last-commit-bar__info {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.last-commit-bar__info svg {
  color: var(--white);
}

.last-commit-bar__info a {
  color: var(--white);
}

.last-commit-bar__info a:hover {
  color: var(--hover);
}

.last-commit-bar__time {
  font-family: monospace;
}

/* Commit List */
.commit-list {
  display: flex;
  flex-direction: column;
}

.commit-list__count {
  margin-bottom: var(--grid-height);
}

/* Commit Item */
.commit-item {
  transition: background-color 0.2s ease;
  padding: 0 0.5rem;
  margin: 0 -0.5rem;
}

.commit-item:hover {
  background: var(--pre);
}

.commit-item__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--grid-height);
}

.commit-item__content {
  flex: 1;
  margin-right: 1rem;
}


.commit-item__message {
  margin: 0;
  display: inline-block;
  white-space: break-spaces;
  font-weight: bold;
  font-size: 1rem;
  line-height: var(--line-height);
}

.commit-item__message a {
  color: var(--text-color);
}

.commit-item__message>svg {
  width: 1rem;
  margin-right: 0.25rem;
  transform: translateY(25%);
}

.commit-item__meta {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8rem;
  color: var(--grey-light);
}

.commit-item__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.commit-item__hash {
  font-family: monospace;
  font-size: 0.8rem;
  font-weight: bold;
}

.commit-item__hash a {
  color: var(--text-color);
  text-decoration: none;
}

.commit-item__hash a:hover {
  text-decoration: underline;
}

.commit-item__refs {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.commit-item__ref {
  font-family: monospace;
  font-size: 0.8rem;
}

/* Page Title */
.page-title {
  font-size: 1rem;
  font-weight: bold;
  line-height: var(--line-height);
  margin-top: calc(var(--line-height) * 2);
  margin-bottom: var(--line-height);
  text-transform: uppercase;
  color: var(--white-dark);
}

/* File List (Tree View) */
.file-list__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--line-height);
  padding: 0 var(--grid-height);
}

.file-list__row:last-child {
  border-bottom: none;
}

.file-list__path {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--grid-height);
  text-wrap: wrap;
}

.file-list__meta {
  display: flex;
  align-items: center;
  gap: var(--grid-height);
}

.file-list__commit {
  flex: 1;
}

.file-list__size {
  width: 60px;
  text-align: right;
}

/* Metadata Grid (Commit Detail) */
.metadata {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1.5rem;
  align-items: center;
  background-color: var(--pre);
  padding: 1rem;
  border-radius: 4px;
  border: 1px solid var(--grey);
  font-size: 0.8rem;
  margin-bottom: calc(var(--line-height) * 2);
}

.metadata__label {
  color: var(--grey-light);
  text-align: right;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.metadata__value {
  color: var(--text-color);
}

.metadata__value--code {
  font-family: monospace;
}

/* Diff Styles */
.diff-file__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: monospace;
  padding: var(--grid-height) 0;
  position: sticky;
  top: 0;
  left: 0;
  background-color: var(--bg-color);
  border-bottom: 2px solid var(--grey);
  border-top: 1px solid var(--grey);
  padding: 0 1rem;
  margin: 2rem 0 0 0;
  z-index: 10;
  font-weight: bold;
  height: 48px;
}

.diff-stat--add {
  color: #50fa7b;
  font-weight: bold;
}

.diff-stat--del {
  color: #ff5555;
  font-weight: bold;
}

/* File Header - uses commit-item classes for consistent styling with log page */
.file-header {
  margin: 1rem 0;
}

.file-header .commit-item__header {
  margin-bottom: 0;
}

/* Box Component */
.box {
  margin: 1rem 0;
  padding: var(--grid-height);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.box__title {
  font-size: 1rem;
  font-weight: bold;
  line-height: var(--line-height);
  margin-bottom: var(--grid-height);
  text-transform: uppercase;
}

.box__stats {
  margin-top: var(--grid-height);
}

/* Clone URL */
.clone-url {
  text-align: left;
  margin-bottom: calc(var(--line-height) * 1.5);
}

.clone-url__label {
  color: var(--grey-light);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
}

.clone-url__command {
  color: var(--text-color);
  font-size: 0.9rem;
  font-family: monospace;
}

/* Breadcrumb */
.breadcrumb {
  font-size: 1rem;
  font-weight: bold;
  line-height: var(--line-height);
  margin-bottom: var(--grid-height);
  text-transform: none;
}

.breadcrumb__current {
  font-weight: bold;
}

/* Content Heading */
.content-heading {
  font-size: 1rem;
  font-weight: bold;
  line-height: var(--line-height);
  margin-top: var(--line-height);
  margin-bottom: var(--line-height);
  text-transform: none;
  color: var(--white-dark);
}

/* ==== MARKDOWN CONTENT ==== */
.markdown {
  overflow-wrap: break-word;
}

/* Headings */
.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4 {
  margin: 0;
  padding: 0;
  font-family: monospace;
  font-weight: bold;
  line-height: var(--line-height);
  text-transform: uppercase;
}

.markdown h1 {
  font-size: var(--line-height);
  margin-top: var(--line-height);
  margin-bottom: var(--grid-height);
}

.markdown h2,
.markdown h3,
.markdown h4 {
  font-size: 1rem;
  margin-top: var(--line-height);
  margin-bottom: var(--line-height);
  color: var(--white-dark);
}

.markdown h1 a,
.markdown h2 a,
.markdown h3 a,
.markdown h4 a {
  color: var(--grey-light);
  text-decoration: none;
}

.markdown h1 a:hover,
.markdown h2 a:hover,
.markdown h3 a:hover,
.markdown h4 a:hover {
  text-decoration: underline;
}

/* Code inline */
.markdown code {
  font-family: monospace;
  font-size: 90%;
  border: 2px solid var(--code);
  border-radius: 0.3rem;
  padding: 0.025rem 0.3rem;
  background-color: transparent;
  text-transform: none;
}

/* Code blocks */
.markdown pre {
  font-family: monospace;
  font-size: 0.8rem;
  border-radius: 1px;
  padding: var(--line-height);
  overflow-x: auto;
  background-color: var(--pre);
  border: 1px solid var(--border);
}

.markdown pre>code {
  background-color: inherit;
  padding: 0;
  border: none;
  border-radius: 0;
}

/* Paragraphs */
.markdown p {
  margin-top: var(--line-height);
  margin-bottom: var(--line-height);
}

/* Lists */
.markdown ul,
.markdown ol {
  padding: 0 15px;
  list-style-position: inside;
  list-style-type: square;
  margin: var(--grid-height) 0;
}

.markdown li {
  margin: var(--grid-height) 0;
  padding: 0;
}

.markdown li::marker {
  line-height: 0;
  color: var(--grey-light);
}

/* Nested lists */
.markdown ol ul,
.markdown ol ol,
.markdown ul ol,
.markdown ul ul {
  padding: 0 0 0 var(--line-height);
  margin: 0;
}

/* Blockquotes */
.markdown blockquote {
  border-left: 5px solid var(--blockquote);
  background-color: var(--blockquote-bg);
  padding: var(--grid-height);
  margin: var(--line-height) 0;
}

.markdown blockquote>p {
  margin: 0;
}

.markdown blockquote code {
  border: 1px solid var(--blockquote);
}

/* Tables */
.markdown table {
  border-collapse: collapse;
  margin: var(--line-height) 0;
}

.markdown th,
.markdown td {
  border: 1px solid var(--white);
  padding: var(--grid-height);
}

/* Horizontal rules */
.markdown hr {
  color: inherit;
  border: 0;
  height: 2px;
  background: var(--grey);
  margin: calc(var(--grid-height) - 2px) auto;
}

/* Images */
.markdown img {
  max-width: 100%;
  height: auto;
}

/* Strong/Emphasis */
.markdown strong {
  font-weight: bold;
}

.markdown em {
  font-style: italic;
}

/* Links */
.markdown a {
  color: var(--link-color);
  text-decoration: none;
}

.markdown a:hover {
  text-decoration: underline;
}

.markdown a:visited {
  color: var(--visited);
}

/* ==== RESPONSIVE MEDIA QUERIES ==== */

@media only screen and (max-width: 40em) {
  body {
    padding: 0 var(--grid-height);
  }

  header {
    margin: 0;
  }

  /* Stack navigation on mobile */
  .nav-menu {
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  /* Hide ref selector on mobile */
  .nav-menu__ref-selector {
    display: none;
  }

  /* Commit list adjustments */
  .commit-item__header {
    flex-direction: column;
  }

  .commit-item__content {
    margin-right: 0;
    width: 100%;
  }

  .commit-item__actions {
    align-items: flex-start;
    width: 100%;
  }

  /* File list adjustments */
  .file-list__row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--grid-height);
  }

  .file-list__path {
    width: 100%;
  }

  .file-list__meta {
    width: 100%;
    justify-content: space-between;
  }

  /* Hide tree commit info on small screens */
  .file-list__commit {
    display: none;
  }

  /* Metadata grid becomes vertical */
  .metadata {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .metadata__label {
    text-align: left;
    margin-top: 0.5rem;
  }

  .metadata__label:first-child {
    margin-top: 0;
  }

  /* Diff file header */
  .diff-file__header {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    padding: var(--grid-height);
    gap: var(--grid-height);
  }

  /* Last commit bar */
  .last-commit-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }

  .last-commit-bar__info,
  .last-commit-bar__time {
    line-height: var(--line-height);
    margin: 0;
    padding: 0;
  }

  .last-commit-bar__info {
    white-space: normal;
  }

  /* Issue detail title row becomes column on mobile */
  .issue-detail__title-row {
    flex-direction: column;
  }

  .issue-detail__status {
    align-self: flex-start;
  }
}

@media only screen and (max-width: 900px) {

  .file-list_row {
    padding: 0 var(--grid-height);
    padding-top: var(--grid-height);
  }

  /* Hide tree commit column on medium screens */
  .file-list__commit {
    display: none;
  }

  .file-list__size {
    display: none;
  }
}

/* Commit Message (in commit detail page) */
.commit-message {
  margin: 0;
  margin-bottom: calc(var(--line-height) * 2);
  white-space: break-spaces;
  font-size: 1rem;
  line-height: var(--line-height);
  text-transform: none;
}

.commit-message__summary {
  font-weight: 700;
  margin-bottom: var(--line-height);
}

.commit-message__body {
  font-weight: 400;
}

/* File List Summary (in commit page) */
.file-list-summary {
  margin-top: var(--grid-height);
}

.file-list-summary__item {
  margin: var(--grid-height) 0;
}

/* ==== ISSUES PAGES ==== */

/* Issues List Page */
.issues-page {
  margin-top: var(--line-height);
}

.issues-header {
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.5rem;
}

.issues-header h1 {
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: var(--grid-height);
}

/* Issues Navigation - matches top-level nav-menu */
.issues-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 1rem 0;
  flex-wrap: wrap;
}

.issues-nav a,
.issues-nav span.active {
  color: var(--grey-light);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.9rem;
  text-decoration: none;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid transparent;
  transition: all 0.2s ease;
}

.issues-nav a:hover,
.issues-nav span.active {
  color: var(--text-color);
  border-bottom: 2px solid var(--link-color);
}

/* Label Selector Dropdown */
.issues-nav__label-selector {
  margin-left: auto;
  position: relative;
}

.issues-nav__label-selector summary {
  color: var(--grey-light);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.9rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.issues-nav__label-selector summary:hover {
  color: var(--text-color);
}

.issues-nav__label-selector summary::-webkit-details-marker {
  display: none;
}

.issues-nav__label-selector summary::after {
  content: "▼";
  font-size: 0.7rem;
}

.issues-nav__label-selector[open] summary::after {
  content: "▲";
}

.label-selector__dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 150px;
  background-color: var(--bg-color);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.5rem 0;
  margin-top: 0.25rem;
  z-index: 100;
  max-height: 300px;
  overflow-y: auto;
}

.label-selector__dropdown a {
  display: block;
  padding: 0.25rem 1rem;
  color: var(--text-color);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.9rem;
  text-decoration: none;
  border-bottom: none;
  padding-bottom: 0.25rem;
}

.label-selector__dropdown a:hover {
  background-color: var(--pre);
  color: var(--link-color);
  text-decoration: none;
}

.issues-list {
  display: flex;
  flex-direction: column;
}

.issue-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0.25rem 0.5rem;
  transition: background-color 0.2s ease;
  margin: 0 -0.5rem;
}

.issue-item:hover {
  background-color: var(--pre);
}

.issue-item__main {
  flex: 1;
  margin-right: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.issue-item__title {
  color: var(--text-color) !important;
  font-size: 1rem;
  font-weight: bold;
  text-decoration: none;
  display: block;
  line-height: var(--line-height);
}

.issue-item__title:hover {
  text-decoration: underline;
}

.issue-meta {
  color: var(--grey-light);
  font-family: monospace;
  font-size: 0.8rem;
  line-height: var(--line-height);
}

.issue-item__stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  font-size: 0.8rem;
  color: var(--grey-light);
  line-height: var(--line-height);
}

.issue-date {
  white-space: nowrap;
}

.issue-labels-text {
  color: var(--grey-light);
}

.no-issues {
  color: var(--grey-light);
  font-style: italic;
  padding: var(--line-height) 0;
}

/* Issue Detail Page */
.issue-detail {}

.issue-detail__header {
  margin-bottom: var(--line-height);
  padding-bottom: var(--grid-height);
  border-bottom: 1px solid var(--border);
}

.issue-detail__title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--grid-height);
}

.issue-detail__title {
  font-size: 1rem;
  font-weight: bold;
  line-height: var(--line-height);
  margin: 0 1rem 0 0;
  flex: 1;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.issue-detail__status {
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.issue-detail__status--open {
  color: var(--text-red);
}

.issue-detail__status--closed {
  color: var(--text-green);
}

.issue-detail__meta {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.8rem;
  color: var(--grey-light);
  flex-wrap: wrap;
}

.issue-detail__labels {
  font-size: 0.9rem;
}

.issue-detail__labels>span:first-child {
  color: var(--grey-light);
  margin-right: 0.5rem;
}

.issue-label:not(:last-child)::after {
  content: "•";
  margin: 0 0.4rem;
  color: var(--grey-light);
}

.issue-description {
  margin-bottom: var(--line-height);
}

.issue-comment {
  padding: var(--grid-height);
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: var(--grid-height);
  background: var(--background);
}

.issue-comment__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--grid-height);
  padding-bottom: var(--grid-height);
  border-bottom: 1px solid var(--grey);
  font-size: 0.9rem;
}

.issue-comment__author {
  font-weight: bold;
  color: var(--text-color);
}

.issue-comment__date {
  color: var(--grey-light);
  font-size: 0.8rem;
}

.issue-comment__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.issue-comment__id {
  color: var(--grey-light);
  font-size: 0.8rem;
  font-family: monospace;
}

.issue-comment__id::after {
  content: " · ";
  margin-left: 0.25rem;
}

.issue-comment__body {
  line-height: var(--line-height);
}

.issue-comments h3 {
  font-size: 1rem;
  font-weight: bold;
  text-transform: uppercase;
  margin: var(--line-height) 0 var(--grid-height);
  color: var(--white-dark);
}