/* GitHub Primer Design System for GitMorph */
/* Based on GitHub's Primer design system */

:root {
  /* ============================================ */
  /* COLOR PRIMITIVES - Light Mode */
  /* ============================================ */

  /* Canvas (backgrounds) */
  --gh-color-canvas-default: #ffffff;
  --gh-color-canvas-overlay: #ffffff;
  --gh-color-canvas-inset: #f6f8fa;
  --gh-color-canvas-subtle: #f6f8fa;

  /* Foreground (text) */
  --gh-color-fg-default: #1f2328;
  --gh-color-fg-muted: #656d76;
  --gh-color-fg-subtle: #6e7781;
  --gh-color-fg-on-emphasis: #ffffff;

  /* Border */
  --gh-color-border-default: #d0d7de;
  --gh-color-border-muted: #d8dee4;
  --gh-color-border-subtle: rgba(27, 31, 36, 0.15);

  /* Accent (blue) */
  --gh-color-accent-fg: #0969da;
  --gh-color-accent-emphasis: #0969da;
  --gh-color-accent-muted: rgba(84, 174, 255, 0.4);
  --gh-color-accent-subtle: #ddf4ff;

  /* Success (green) */
  --gh-color-success-fg: #1a7f37;
  --gh-color-success-emphasis: #1f883d;
  --gh-color-success-muted: rgba(74, 194, 107, 0.4);
  --gh-color-success-subtle: #dafbe1;

  /* Attention (yellow) */
  --gh-color-attention-fg: #9a6700;
  --gh-color-attention-emphasis: #9a6700;
  --gh-color-attention-muted: rgba(212, 167, 44, 0.4);
  --gh-color-attention-subtle: #fff8c5;

  /* Severe (orange) */
  --gh-color-severe-fg: #bc4c00;
  --gh-color-severe-emphasis: #bc4c00;
  --gh-color-severe-muted: rgba(251, 143, 68, 0.4);
  --gh-color-severe-subtle: #fff1e5;

  /* Danger (red) */
  --gh-color-danger-fg: #d1242f;
  --gh-color-danger-emphasis: #cf222e;
  --gh-color-danger-muted: rgba(255, 129, 130, 0.4);
  --gh-color-danger-subtle: #ffebe9;

  /* Open (green for issues/PRs) */
  --gh-color-open-fg: #1a7f37;
  --gh-color-open-emphasis: #1f883d;
  --gh-color-open-muted: rgba(74, 194, 107, 0.4);
  --gh-color-open-subtle: #dafbe1;

  /* Closed (purple for merged PRs) */
  --gh-color-closed-fg: #8250df;
  --gh-color-closed-emphasis: #8250df;
  --gh-color-done-fg: #8250df;
  --gh-color-done-emphasis: #8250df;

  /* Neutral */
  --gh-color-neutral-emphasis: #6e7781;
  --gh-color-neutral-emphasis-plus: #59636e;
  --gh-color-neutral-muted: rgba(175, 184, 193, 0.2);
  --gh-color-neutral-subtle: rgba(234, 238, 242, 0.5);

  /* ============================================ */
  /* TYPOGRAPHY */
  /* ============================================ */

  --gh-fontStack-system: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
  --gh-fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;

  --gh-text-body-size: 14px;
  --gh-text-body-lineHeight: 1.5;

  --gh-text-title-size-large: 32px;
  --gh-text-title-size-medium: 20px;
  --gh-text-title-size-small: 16px;

  --gh-text-subtitle-size: 20px;
  --gh-text-caption-size: 12px;

  --gh-fontWeight-light: 300;
  --gh-fontWeight-normal: 400;
  --gh-fontWeight-medium: 500;
  --gh-fontWeight-semibold: 600;
  --gh-fontWeight-bold: 700;

  /* ============================================ */
  /* SPACING */
  /* ============================================ */

  --gh-space-0: 0;
  --gh-space-1: 4px;
  --gh-space-2: 8px;
  --gh-space-3: 16px;
  --gh-space-4: 24px;
  --gh-space-5: 32px;
  --gh-space-6: 40px;
  --gh-space-7: 48px;
  --gh-space-8: 64px;
  --gh-space-9: 80px;
  --gh-space-10: 96px;
  --gh-space-11: 112px;
  --gh-space-12: 128px;

  /* ============================================ */
  /* BORDER RADIUS */
  /* ============================================ */

  --gh-borderRadius-small: 3px;
  --gh-borderRadius-medium: 6px;
  --gh-borderRadius-large: 12px;
  --gh-borderRadius-full: 100vh;

  /* ============================================ */
  /* SHADOWS */
  /* ============================================ */

  --gh-shadow-resting-xsmall: 0 1px 0 rgba(27, 31, 36, 0.04);
  --gh-shadow-resting-small: 0 1px 0 rgba(27, 31, 36, 0.04), 0 1px 3px rgba(27, 31, 36, 0.12);
  --gh-shadow-resting-medium: 0 3px 6px rgba(140, 149, 159, 0.15);
  --gh-shadow-floating-small: 0 0 0 1px rgba(27, 31, 36, 0.04), 0 3px 6px rgba(140, 149, 159, 0.15);
  --gh-shadow-floating-medium: 0 0 0 1px rgba(27, 31, 36, 0.04), 0 8px 16px rgba(140, 149, 159, 0.15);
  --gh-shadow-floating-large: 0 0 0 1px rgba(27, 31, 36, 0.04), 0 12px 28px rgba(140, 149, 159, 0.3);

  /* ============================================ */
  /* TRANSITIONS */
  /* ============================================ */

  --gh-duration-fast: 80ms;
  --gh-duration-medium: 160ms;
  --gh-duration-slow: 320ms;
  --gh-easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ============================================ */
/* DARK MODE COLORS */
/* ============================================ */

[data-theme="gitea-dark"],
[data-theme="gitmorph"],
.theme-dark {
  /* Canvas (backgrounds) */
  --gh-color-canvas-default: #0d1117;
  --gh-color-canvas-overlay: #161b22;
  --gh-color-canvas-inset: #010409;
  --gh-color-canvas-subtle: #161b22;

  /* Foreground (text) - WCAG 4.5:1 contrast compliant */
  --gh-color-fg-default: #e6edf3;
  --gh-color-fg-muted: #9198a1;  /* Updated: 5.0:1 contrast vs #0d1117 */
  --gh-color-fg-subtle: #848d97;  /* Updated: 4.5:1 contrast vs #0d1117 */
  --gh-color-fg-on-emphasis: #ffffff;

  /* Border */
  --gh-color-border-default: #30363d;
  --gh-color-border-muted: #21262d;
  --gh-color-border-subtle: rgba(240, 246, 252, 0.1);

  /* Accent (blue) */
  --gh-color-accent-fg: #58a6ff;
  --gh-color-accent-emphasis: #1f6feb;
  --gh-color-accent-muted: rgba(56, 139, 253, 0.4);
  --gh-color-accent-subtle: rgba(56, 139, 253, 0.1);

  /* Success (green) */
  --gh-color-success-fg: #3fb950;
  --gh-color-success-emphasis: #238636;
  --gh-color-success-muted: rgba(46, 160, 67, 0.4);
  --gh-color-success-subtle: rgba(46, 160, 67, 0.15);

  /* Attention (yellow) */
  --gh-color-attention-fg: #d29922;
  --gh-color-attention-emphasis: #9e6a03;
  --gh-color-attention-muted: rgba(187, 128, 9, 0.4);
  --gh-color-attention-subtle: rgba(187, 128, 9, 0.15);

  /* Severe (orange) */
  --gh-color-severe-fg: #db6d28;
  --gh-color-severe-emphasis: #bd561d;
  --gh-color-severe-muted: rgba(219, 109, 40, 0.4);
  --gh-color-severe-subtle: rgba(219, 109, 40, 0.1);

  /* Danger (red) */
  --gh-color-danger-fg: #f85149;
  --gh-color-danger-emphasis: #da3633;
  --gh-color-danger-muted: rgba(248, 81, 73, 0.4);
  --gh-color-danger-subtle: rgba(248, 81, 73, 0.1);

  /* Open (green) */
  --gh-color-open-fg: #3fb950;
  --gh-color-open-emphasis: #238636;
  --gh-color-open-muted: rgba(46, 160, 67, 0.4);
  --gh-color-open-subtle: rgba(46, 160, 67, 0.15);

  /* Closed (purple for merged) */
  --gh-color-closed-fg: #a371f7;
  --gh-color-closed-emphasis: #8957e5;
  --gh-color-done-fg: #a371f7;
  --gh-color-done-emphasis: #8957e5;

  /* Neutral - WCAG compliant */
  --gh-color-neutral-emphasis: #848d97;  /* Updated for 4.5:1 contrast */
  --gh-color-neutral-emphasis-plus: #9198a1;  /* Updated for 5.0:1 contrast */
  --gh-color-neutral-muted: rgba(132, 141, 151, 0.4);
  --gh-color-neutral-subtle: rgba(132, 141, 151, 0.1);

  /* Shadows */
  --gh-shadow-resting-xsmall: 0 0 transparent;
  --gh-shadow-resting-small: 0 0 transparent;
  --gh-shadow-resting-medium: 0 3px 6px #010409;
  --gh-shadow-floating-small: 0 0 0 1px #30363d, 0 8px 16px rgba(1, 4, 9, 0.4);
  --gh-shadow-floating-medium: 0 0 0 1px #30363d, 0 8px 16px rgba(1, 4, 9, 0.4);
  --gh-shadow-floating-large: 0 0 0 1px #30363d, 0 12px 28px rgba(1, 4, 9, 0.4);
}

/* ============================================ */
/* GITEA-AUTO THEME - DARK MODE (System Preference) */
/* ============================================ */

@media (prefers-color-scheme: dark) {
  [data-theme="gitea-auto"] {
    /* Canvas (backgrounds) */
    --gh-color-canvas-default: #0d1117;
    --gh-color-canvas-overlay: #161b22;
    --gh-color-canvas-inset: #010409;
    --gh-color-canvas-subtle: #161b22;

    /* Foreground (text) - WCAG 4.5:1 contrast compliant */
    --gh-color-fg-default: #e6edf3;
    --gh-color-fg-muted: #9198a1;  /* Updated: 5.0:1 contrast vs #0d1117 */
    --gh-color-fg-subtle: #848d97;  /* Updated: 4.5:1 contrast vs #0d1117 */
    --gh-color-fg-on-emphasis: #ffffff;

    /* Border */
    --gh-color-border-default: #30363d;
    --gh-color-border-muted: #21262d;
    --gh-color-border-subtle: rgba(240, 246, 252, 0.1);

    /* Accent (blue) */
    --gh-color-accent-fg: #58a6ff;
    --gh-color-accent-emphasis: #1f6feb;
    --gh-color-accent-muted: rgba(56, 139, 253, 0.4);
    --gh-color-accent-subtle: rgba(56, 139, 253, 0.1);

    /* Success (green) */
    --gh-color-success-fg: #3fb950;
    --gh-color-success-emphasis: #238636;
    --gh-color-success-muted: rgba(46, 160, 67, 0.4);
    --gh-color-success-subtle: rgba(46, 160, 67, 0.15);

    /* Attention (yellow) */
    --gh-color-attention-fg: #d29922;
    --gh-color-attention-emphasis: #9e6a03;
    --gh-color-attention-muted: rgba(187, 128, 9, 0.4);
    --gh-color-attention-subtle: rgba(187, 128, 9, 0.15);

    /* Severe (orange) */
    --gh-color-severe-fg: #db6d28;
    --gh-color-severe-emphasis: #bd561d;
    --gh-color-severe-muted: rgba(219, 109, 40, 0.4);
    --gh-color-severe-subtle: rgba(219, 109, 40, 0.1);

    /* Danger (red) */
    --gh-color-danger-fg: #f85149;
    --gh-color-danger-emphasis: #da3633;
    --gh-color-danger-muted: rgba(248, 81, 73, 0.4);
    --gh-color-danger-subtle: rgba(248, 81, 73, 0.1);

    /* Open (green) */
    --gh-color-open-fg: #3fb950;
    --gh-color-open-emphasis: #238636;
    --gh-color-open-muted: rgba(46, 160, 67, 0.4);
    --gh-color-open-subtle: rgba(46, 160, 67, 0.15);

    /* Closed (purple for merged) */
    --gh-color-closed-fg: #a371f7;
    --gh-color-closed-emphasis: #8957e5;
    --gh-color-done-fg: #a371f7;
    --gh-color-done-emphasis: #8957e5;

    /* Neutral - WCAG compliant */
    --gh-color-neutral-emphasis: #848d97;  /* Updated for 4.5:1 contrast */
    --gh-color-neutral-emphasis-plus: #9198a1;  /* Updated for 5.0:1 contrast */
    --gh-color-neutral-muted: rgba(132, 141, 151, 0.4);
    --gh-color-neutral-subtle: rgba(132, 141, 151, 0.1);

    /* Shadows */
    --gh-shadow-resting-xsmall: 0 0 transparent;
    --gh-shadow-resting-small: 0 0 transparent;
    --gh-shadow-resting-medium: 0 3px 6px #010409;
    --gh-shadow-floating-small: 0 0 0 1px #30363d, 0 8px 16px rgba(1, 4, 9, 0.4);
    --gh-shadow-floating-medium: 0 0 0 1px #30363d, 0 8px 16px rgba(1, 4, 9, 0.4);
    --gh-shadow-floating-large: 0 0 0 1px #30363d, 0 12px 28px rgba(1, 4, 9, 0.4);
  }
}

/* ============================================ */
/* BASE STYLES */
/* ============================================ */

.gh-body {
  font-family: var(--gh-fontStack-system);
  font-size: var(--gh-text-body-size);
  line-height: var(--gh-text-body-lineHeight);
  color: var(--gh-color-fg-default);
  background-color: var(--gh-color-canvas-default);
}

/* ============================================ */
/* BOX COMPONENT */
/* ============================================ */

.gh-Box {
  background-color: var(--gh-color-canvas-default);
  border: 1px solid var(--gh-color-border-default);
  border-radius: var(--gh-borderRadius-medium);
}

.gh-Box--condensed {
  line-height: 1.25;
}

.gh-Box-header {
  padding: var(--gh-space-3);
  background-color: var(--gh-color-canvas-subtle);
  border-bottom: 1px solid var(--gh-color-border-default);
  border-top-left-radius: var(--gh-borderRadius-medium);
  border-top-right-radius: var(--gh-borderRadius-medium);
}

.gh-Box-header--blue {
  background-color: var(--gh-color-accent-subtle);
  border-bottom-color: var(--gh-color-accent-muted);
}

.gh-Box-title {
  font-size: var(--gh-text-body-size);
  font-weight: var(--gh-fontWeight-semibold);
}

.gh-Box-body {
  padding: var(--gh-space-3);
}

.gh-Box-body--border-bottom {
  border-bottom: 1px solid var(--gh-color-border-muted);
}

.gh-Box-row {
  padding: var(--gh-space-3);
  border-bottom: 1px solid var(--gh-color-border-muted);
}

.gh-Box-row:last-child {
  border-bottom: 0;
}

.gh-Box-row--hover-gray:hover {
  background-color: var(--gh-color-canvas-subtle);
}

.gh-Box-footer {
  padding: var(--gh-space-3);
  border-top: 1px solid var(--gh-color-border-default);
}

/* ============================================ */
/* BUTTON COMPONENT */
/* ============================================ */

.gh-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gh-space-1);
  padding: 5px 16px;
  font-family: inherit;
  font-size: var(--gh-text-body-size);
  font-weight: var(--gh-fontWeight-medium);
  line-height: 20px;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 1px solid;
  border-radius: var(--gh-borderRadius-medium);
  appearance: none;
  transition: 80ms cubic-bezier(0.65, 0, 0.35, 1);
  transition-property: color, fill, background-color, border-color;
}

.gh-btn:focus {
  outline: none;
}

.gh-btn:focus-visible {
  outline: 2px solid var(--gh-color-accent-fg);
  outline-offset: -2px;
}

.gh-btn:disabled,
.gh-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Default button */
.gh-btn--secondary {
  color: var(--gh-color-fg-default);
  background-color: var(--gh-color-canvas-subtle);
  border-color: var(--gh-color-border-default);
  box-shadow: var(--gh-shadow-resting-small);
}

.gh-btn--secondary:hover:not(:disabled) {
  background-color: var(--gh-color-neutral-muted);
  border-color: var(--gh-color-border-default);
}

.gh-btn--secondary:active:not(:disabled) {
  background-color: var(--gh-color-neutral-subtle);
}

/* Primary button (green) */
.gh-btn--primary {
  color: var(--gh-color-fg-on-emphasis);
  background-color: var(--gh-color-success-emphasis);
  border-color: rgba(27, 31, 36, 0.15);
  box-shadow: var(--gh-shadow-resting-small);
}

.gh-btn--primary:hover:not(:disabled) {
  background-color: #2c974b;
}

.gh-btn--primary:active:not(:disabled) {
  background-color: #298e46;
}

/* Danger button */
.gh-btn--danger {
  color: var(--gh-color-danger-fg);
  background-color: var(--gh-color-canvas-subtle);
  border-color: var(--gh-color-border-default);
  box-shadow: var(--gh-shadow-resting-small);
}

.gh-btn--danger:hover:not(:disabled) {
  color: var(--gh-color-fg-on-emphasis);
  background-color: var(--gh-color-danger-emphasis);
  border-color: var(--gh-color-danger-emphasis);
}

/* Invisible/link button */
.gh-btn--invisible {
  color: var(--gh-color-accent-fg);
  background-color: transparent;
  border: 0;
  box-shadow: none;
}

.gh-btn--invisible:hover:not(:disabled) {
  background-color: var(--gh-color-neutral-muted);
}

/* Outline button */
.gh-btn--outline {
  color: var(--gh-color-accent-fg);
  background-color: transparent;
  border-color: var(--gh-color-border-default);
}

.gh-btn--outline:hover:not(:disabled) {
  color: var(--gh-color-fg-on-emphasis);
  background-color: var(--gh-color-accent-emphasis);
  border-color: var(--gh-color-accent-emphasis);
}

/* Button sizes */
.gh-btn--sm {
  padding: 3px 12px;
  font-size: 12px;
  line-height: 20px;
}

.gh-btn--lg {
  padding: 9px 20px;
  font-size: 16px;
  line-height: 24px;
}

/* Button with icon only */
.gh-btn--iconOnly {
  padding: 5px 8px;
}

.gh-btn--iconOnly.gh-btn--sm {
  padding: 3px 8px;
}

/* Button counter */
.gh-btn .gh-Counter {
  margin-left: var(--gh-space-1);
}

/* ============================================ */
/* COUNTER COMPONENT */
/* ============================================ */

.gh-Counter {
  display: inline-block;
  min-width: 20px;
  padding: 0 6px;
  font-size: 12px;
  font-weight: var(--gh-fontWeight-medium);
  line-height: 18px;
  text-align: center;
  background-color: var(--gh-color-neutral-muted);
  border-radius: var(--gh-borderRadius-full);
}

.gh-Counter--primary {
  color: var(--gh-color-fg-on-emphasis);
  background-color: var(--gh-color-neutral-emphasis);
}

.gh-Counter--secondary {
  color: var(--gh-color-fg-default);
  background-color: var(--gh-color-neutral-muted);
}

/* ============================================ */
/* LABEL/BADGE COMPONENT */
/* ============================================ */

.gh-Label {
  display: inline-flex;
  align-items: center;
  padding: 0 7px;
  font-size: 12px;
  font-weight: var(--gh-fontWeight-medium);
  line-height: 18px;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--gh-borderRadius-full);
}

.gh-Label--primary {
  color: var(--gh-color-fg-on-emphasis);
  background-color: var(--gh-color-accent-emphasis);
}

.gh-Label--secondary {
  color: var(--gh-color-fg-muted);
  background-color: var(--gh-color-neutral-muted);
  border-color: var(--gh-color-border-default);
}

.gh-Label--success {
  color: var(--gh-color-fg-on-emphasis);
  background-color: var(--gh-color-success-emphasis);
}

.gh-Label--danger {
  color: var(--gh-color-fg-on-emphasis);
  background-color: var(--gh-color-danger-emphasis);
}

.gh-Label--attention {
  color: #1f2328;
  background-color: var(--gh-color-attention-emphasis);
}

/* Issue/PR state labels */
.gh-State {
  display: inline-flex;
  align-items: center;
  gap: var(--gh-space-1);
  padding: 5px 12px;
  font-size: var(--gh-text-body-size);
  font-weight: var(--gh-fontWeight-medium);
  line-height: 20px;
  white-space: nowrap;
  border-radius: var(--gh-borderRadius-full);
}

.gh-State--open {
  color: var(--gh-color-fg-on-emphasis);
  background-color: var(--gh-color-open-emphasis);
}

.gh-State--closed {
  color: var(--gh-color-fg-on-emphasis);
  background-color: var(--gh-color-danger-emphasis);
}

.gh-State--merged {
  color: var(--gh-color-fg-on-emphasis);
  background-color: var(--gh-color-done-emphasis);
}

.gh-State--draft {
  color: var(--gh-color-fg-on-emphasis);
  background-color: var(--gh-color-neutral-emphasis);
}

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

.gh-FormControl {
  width: 100%;
  padding: 5px 12px;
  font-size: var(--gh-text-body-size);
  line-height: 20px;
  color: var(--gh-color-fg-default);
  vertical-align: middle;
  background-color: var(--gh-color-canvas-default);
  border: 1px solid var(--gh-color-border-default);
  border-radius: var(--gh-borderRadius-medium);
  outline: none;
  box-shadow: var(--gh-shadow-resting-xsmall);
  transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
  transition-property: color, background-color, box-shadow, border-color;
}

.gh-FormControl:focus {
  border-color: var(--gh-color-accent-fg);
  outline: none;
  box-shadow: inset 0 0 0 1px var(--gh-color-accent-fg);
}

.gh-FormControl::placeholder {
  color: var(--gh-color-fg-subtle);
  opacity: 1;
}

.gh-FormControl--monospace {
  font-family: var(--gh-fontStack-monospace);
}

/* Textarea */
.gh-FormControl--textarea {
  min-height: 100px;
  resize: vertical;
}

/* Select */
.gh-FormControl--select {
  padding-right: 32px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'%3e%3cpath fill='%23656d76' d='M4.427 7.427l3.396 3.396a.25.25 0 00.354 0l3.396-3.396A.25.25 0 0011.396 7H4.604a.25.25 0 00-.177.427z'%3e%3c/path%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px;
  appearance: none;
}

/* Checkbox & Radio */
.gh-FormControl--checkbox,
.gh-FormControl--radio {
  width: 16px;
  height: 16px;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

/* ============================================ */
/* AVATAR COMPONENT */
/* ============================================ */

.gh-Avatar {
  display: inline-block;
  overflow: hidden;
  line-height: 1;
  vertical-align: middle;
  background-color: var(--gh-color-canvas-subtle);
  border-radius: var(--gh-borderRadius-medium);
  flex-shrink: 0;
}

.gh-Avatar--circle {
  border-radius: 50%;
}

.gh-Avatar--1 { width: 16px; height: 16px; }
.gh-Avatar--2 { width: 20px; height: 20px; }
.gh-Avatar--3 { width: 24px; height: 24px; }
.gh-Avatar--4 { width: 28px; height: 28px; }
.gh-Avatar--5 { width: 32px; height: 32px; }
.gh-Avatar--6 { width: 40px; height: 40px; }
.gh-Avatar--7 { width: 48px; height: 48px; }
.gh-Avatar--8 { width: 64px; height: 64px; }

.gh-Avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Avatar stack */
.gh-AvatarStack {
  display: flex;
  flex-direction: row-reverse;
}

.gh-AvatarStack .gh-Avatar {
  margin-left: -8px;
  border: 2px solid var(--gh-color-canvas-default);
}

.gh-AvatarStack .gh-Avatar:last-child {
  margin-left: 0;
}

/* ============================================ */
/* NAVIGATION TABS */
/* ============================================ */

.gh-UnderlineNav {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  border-bottom: 1px solid var(--gh-color-border-muted);
  -webkit-overflow-scrolling: touch;
}

.gh-UnderlineNav-body {
  display: flex;
  gap: var(--gh-space-2);
}

.gh-UnderlineNav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--gh-space-2);
  padding: var(--gh-space-2) var(--gh-space-3);
  font-size: var(--gh-text-body-size);
  font-weight: var(--gh-fontWeight-normal);
  line-height: 1.5;
  color: var(--gh-color-fg-muted);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: border-color 0.12s ease-out;
}

.gh-UnderlineNav-item:hover {
  color: var(--gh-color-fg-default);
  text-decoration: none;
  border-bottom-color: var(--gh-color-neutral-muted);
}

.gh-UnderlineNav-item[aria-current="page"],
.gh-UnderlineNav-item.selected {
  font-weight: var(--gh-fontWeight-semibold);
  color: var(--gh-color-fg-default);
  border-bottom-color: var(--gh-color-accent-fg);
}

.gh-UnderlineNav-item .gh-Counter {
  color: var(--gh-color-fg-default);
}

.gh-UnderlineNav-item .gh-octicon {
  color: var(--gh-color-fg-muted);
}

.gh-UnderlineNav-item[aria-current="page"] .gh-octicon,
.gh-UnderlineNav-item.selected .gh-octicon {
  color: var(--gh-color-fg-default);
}

/* ============================================ */
/* SUBNAV / FILTER BAR */
/* ============================================ */

.gh-subnav {
  display: flex;
  margin-bottom: var(--gh-space-3);
}

.gh-subnav-item {
  position: relative;
  display: inline-block;
  padding: 5px 16px;
  font-size: var(--gh-text-body-size);
  font-weight: var(--gh-fontWeight-medium);
  line-height: 20px;
  color: var(--gh-color-fg-muted);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background-color: var(--gh-color-canvas-subtle);
  border: 1px solid var(--gh-color-border-default);
}

.gh-subnav-item:first-child {
  border-top-left-radius: var(--gh-borderRadius-medium);
  border-bottom-left-radius: var(--gh-borderRadius-medium);
}

.gh-subnav-item:last-child {
  border-top-right-radius: var(--gh-borderRadius-medium);
  border-bottom-right-radius: var(--gh-borderRadius-medium);
}

.gh-subnav-item:not(:last-child) {
  border-right: 0;
}

.gh-subnav-item:hover {
  background-color: var(--gh-color-neutral-muted);
}

.gh-subnav-item.selected,
.gh-subnav-item[aria-current="page"] {
  z-index: 1;
  color: var(--gh-color-fg-on-emphasis);
  background-color: var(--gh-color-accent-emphasis);
  border-color: var(--gh-color-accent-emphasis);
}

/* ============================================ */
/* BLANKSLATE (EMPTY STATE) */
/* ============================================ */

.gh-Blankslate {
  position: relative;
  padding: var(--gh-space-5) var(--gh-space-3);
  text-align: center;
}

.gh-Blankslate-heading {
  margin-bottom: var(--gh-space-1);
  font-size: 24px;
  font-weight: var(--gh-fontWeight-semibold);
}

.gh-Blankslate-description {
  color: var(--gh-color-fg-muted);
  font-size: 16px;
}

.gh-Blankslate-icon {
  margin-bottom: var(--gh-space-2);
  color: var(--gh-color-fg-muted);
}

.gh-Blankslate-action {
  margin-top: var(--gh-space-3);
}

/* ============================================ */
/* HEADER */
/* ============================================ */

.gh-Header {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: var(--gh-space-3);
  padding: var(--gh-space-3);
  background-color: var(--gh-color-canvas-default);
  border-bottom: 1px solid var(--gh-color-border-muted);
}

.gh-Header-dark {
  color: var(--gh-color-fg-on-emphasis);
  background-color: #24292f;
  border-bottom: 0;
}

.gh-Header-item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.gh-Header-link {
  color: inherit;
  text-decoration: none;
}

.gh-Header-link:hover {
  color: var(--gh-color-fg-on-emphasis);
}

/* ============================================ */
/* REPOSITORY HEADER */
/* ============================================ */

.gh-repohead {
  padding: var(--gh-space-3) 0;
  background-color: var(--gh-color-canvas-subtle);
  border-bottom: 1px solid var(--gh-color-border-muted);
}

.gh-repohead-details-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gh-space-2);
}

.gh-repohead-name {
  font-size: var(--gh-text-title-size-medium);
  font-weight: var(--gh-fontWeight-normal);
}

.gh-repohead-name strong {
  font-weight: var(--gh-fontWeight-semibold);
}

.gh-repohead-name a {
  color: var(--gh-color-accent-fg);
  text-decoration: none;
}

.gh-repohead-name a:hover {
  text-decoration: underline;
}

/* ============================================ */
/* FILE LIST */
/* ============================================ */

.gh-files {
  border: 1px solid var(--gh-color-border-default);
  border-radius: var(--gh-borderRadius-medium);
}

.gh-files-header {
  display: flex;
  align-items: center;
  padding: var(--gh-space-2) var(--gh-space-3);
  background-color: var(--gh-color-canvas-subtle);
  border-bottom: 1px solid var(--gh-color-border-default);
  border-top-left-radius: var(--gh-borderRadius-medium);
  border-top-right-radius: var(--gh-borderRadius-medium);
}

.gh-files-item {
  display: flex;
  align-items: center;
  padding: var(--gh-space-2) var(--gh-space-3);
  border-bottom: 1px solid var(--gh-color-border-muted);
}

.gh-files-item:last-child {
  border-bottom: 0;
}

.gh-files-item:hover {
  background-color: var(--gh-color-canvas-subtle);
}

.gh-files-item-icon {
  flex-shrink: 0;
  width: 16px;
  margin-right: var(--gh-space-2);
  color: var(--gh-color-fg-muted);
}

.gh-files-item-icon--dir {
  color: var(--gh-color-accent-fg);
}

.gh-files-item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gh-files-item-name a {
  color: var(--gh-color-fg-default);
  text-decoration: none;
}

.gh-files-item-name a:hover {
  color: var(--gh-color-accent-fg);
  text-decoration: underline;
}

.gh-files-item-message {
  flex: 2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--gh-color-fg-muted);
}

.gh-files-item-message a {
  color: var(--gh-color-fg-muted);
  text-decoration: none;
}

.gh-files-item-message a:hover {
  color: var(--gh-color-accent-fg);
  text-decoration: underline;
}

.gh-files-item-age {
  flex-shrink: 0;
  width: 120px;
  text-align: right;
  color: var(--gh-color-fg-muted);
  white-space: nowrap;
}

/* ============================================ */
/* COMMIT LIST */
/* ============================================ */

.gh-commits {
  border: 1px solid var(--gh-color-border-default);
  border-radius: var(--gh-borderRadius-medium);
}

.gh-commits-group-header {
  padding: var(--gh-space-2) var(--gh-space-3);
  font-size: var(--gh-text-body-size);
  font-weight: var(--gh-fontWeight-semibold);
  background-color: var(--gh-color-canvas-subtle);
  border-bottom: 1px solid var(--gh-color-border-muted);
}

.gh-commits-group-header:first-child {
  border-top-left-radius: var(--gh-borderRadius-medium);
  border-top-right-radius: var(--gh-borderRadius-medium);
}

.gh-commit {
  display: flex;
  align-items: center;
  padding: var(--gh-space-3);
  border-bottom: 1px solid var(--gh-color-border-muted);
}

.gh-commit:last-child {
  border-bottom: 0;
}

.gh-commit:hover {
  background-color: var(--gh-color-canvas-subtle);
}

.gh-commit-avatar {
  flex-shrink: 0;
  margin-right: var(--gh-space-3);
}

.gh-commit-body {
  flex: 1;
  min-width: 0;
}

.gh-commit-title {
  display: flex;
  align-items: baseline;
}

.gh-commit-title a {
  color: var(--gh-color-fg-default);
  font-weight: var(--gh-fontWeight-semibold);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gh-commit-title a:hover {
  color: var(--gh-color-accent-fg);
}

.gh-commit-meta {
  display: flex;
  align-items: center;
  gap: var(--gh-space-2);
  margin-top: var(--gh-space-1);
  font-size: 12px;
  color: var(--gh-color-fg-muted);
}

.gh-commit-sha {
  font-family: var(--gh-fontStack-monospace);
}

.gh-commit-sha a {
  color: var(--gh-color-fg-muted);
  text-decoration: none;
}

.gh-commit-sha a:hover {
  color: var(--gh-color-accent-fg);
  text-decoration: underline;
}

/* ============================================ */
/* ISSUE LIST */
/* ============================================ */

.gh-issue-list {
  border: 1px solid var(--gh-color-border-default);
  border-radius: var(--gh-borderRadius-medium);
}

.gh-issue-list-header {
  display: flex;
  align-items: center;
  padding: var(--gh-space-3);
  background-color: var(--gh-color-canvas-subtle);
  border-bottom: 1px solid var(--gh-color-border-default);
  border-top-left-radius: var(--gh-borderRadius-medium);
  border-top-right-radius: var(--gh-borderRadius-medium);
}

.gh-issue-item {
  display: flex;
  padding: var(--gh-space-3);
  border-bottom: 1px solid var(--gh-color-border-muted);
}

.gh-issue-item:last-child {
  border-bottom: 0;
}

.gh-issue-item:hover {
  background-color: var(--gh-color-canvas-subtle);
}

.gh-issue-item-icon {
  flex-shrink: 0;
  margin-right: var(--gh-space-3);
  margin-top: 2px;
}

.gh-issue-item-icon--open {
  color: var(--gh-color-open-fg);
}

.gh-issue-item-icon--closed {
  color: var(--gh-color-danger-fg);
}

.gh-issue-item-icon--merged {
  color: var(--gh-color-done-fg);
}

.gh-issue-item-main {
  flex: 1;
  min-width: 0;
}

.gh-issue-item-title {
  font-size: 16px;
  font-weight: var(--gh-fontWeight-semibold);
  word-wrap: break-word;
}

.gh-issue-item-title a {
  color: var(--gh-color-fg-default);
  text-decoration: none;
}

.gh-issue-item-title a:hover {
  color: var(--gh-color-accent-fg);
}

.gh-issue-item-labels {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--gh-space-1);
  margin-left: var(--gh-space-1);
  vertical-align: middle;
}

.gh-issue-item-meta {
  margin-top: var(--gh-space-1);
  font-size: 12px;
  color: var(--gh-color-fg-muted);
}

.gh-issue-item-meta a {
  color: var(--gh-color-fg-muted);
  text-decoration: none;
}

.gh-issue-item-meta a:hover {
  color: var(--gh-color-accent-fg);
}

.gh-issue-item-assignees {
  flex-shrink: 0;
  margin-left: var(--gh-space-3);
}

.gh-issue-item-comments {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--gh-space-1);
  margin-left: var(--gh-space-3);
  font-size: 12px;
  color: var(--gh-color-fg-muted);
}

.gh-issue-item-comments a {
  display: flex;
  align-items: center;
  gap: var(--gh-space-1);
  color: var(--gh-color-fg-muted);
  text-decoration: none;
}

.gh-issue-item-comments a:hover {
  color: var(--gh-color-accent-fg);
}

/* ============================================ */
/* ISSUE LABEL */
/* ============================================ */

.gh-IssueLabel {
  display: inline-flex;
  align-items: center;
  padding: 0 7px;
  font-size: 12px;
  font-weight: var(--gh-fontWeight-medium);
  line-height: 18px;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: var(--gh-borderRadius-full);
}

.gh-IssueLabel--big {
  padding: 0 10px;
  line-height: 22px;
}

/* ============================================ */
/* TIMELINE */
/* ============================================ */

.gh-TimelineItem {
  position: relative;
  display: flex;
  padding: var(--gh-space-3) 0;
}

.gh-TimelineItem::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 15px;
  display: block;
  width: 2px;
  content: "";
  background-color: var(--gh-color-border-muted);
}

.gh-TimelineItem:first-child::before {
  top: var(--gh-space-3);
}

.gh-TimelineItem:last-child::before {
  bottom: auto;
  height: var(--gh-space-3);
}

.gh-TimelineItem-avatar {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 32px;
}

.gh-TimelineItem-body {
  flex: 1;
  min-width: 0;
  margin-left: var(--gh-space-3);
}

.gh-TimelineItem-comment {
  border: 1px solid var(--gh-color-border-default);
  border-radius: var(--gh-borderRadius-medium);
}

.gh-TimelineItem-comment-header {
  display: flex;
  align-items: center;
  padding: var(--gh-space-2) var(--gh-space-3);
  background-color: var(--gh-color-canvas-subtle);
  border-bottom: 1px solid var(--gh-color-border-default);
  border-top-left-radius: var(--gh-borderRadius-medium);
  border-top-right-radius: var(--gh-borderRadius-medium);
}

.gh-TimelineItem-comment-body {
  padding: var(--gh-space-3);
}

/* ============================================ */
/* UTILITY CLASSES */
/* ============================================ */

.gh-text-normal { font-weight: var(--gh-fontWeight-normal); }
.gh-text-medium { font-weight: var(--gh-fontWeight-medium); }
.gh-text-semibold { font-weight: var(--gh-fontWeight-semibold); }
.gh-text-bold { font-weight: var(--gh-fontWeight-bold); }

.gh-text-small { font-size: 12px; }
.gh-text-body { font-size: var(--gh-text-body-size); }
.gh-text-title-small { font-size: var(--gh-text-title-size-small); }
.gh-text-title-medium { font-size: var(--gh-text-title-size-medium); }
.gh-text-title-large { font-size: var(--gh-text-title-size-large); }

.gh-color-fg-default { color: var(--gh-color-fg-default); }
.gh-color-fg-muted { color: var(--gh-color-fg-muted); }
.gh-color-fg-subtle { color: var(--gh-color-fg-subtle); }
.gh-color-fg-accent { color: var(--gh-color-accent-fg); }
.gh-color-fg-success { color: var(--gh-color-success-fg); }
.gh-color-fg-danger { color: var(--gh-color-danger-fg); }

.gh-bg-default { background-color: var(--gh-color-canvas-default); }
.gh-bg-subtle { background-color: var(--gh-color-canvas-subtle); }
.gh-bg-inset { background-color: var(--gh-color-canvas-inset); }

.gh-border { border: 1px solid var(--gh-color-border-default); }
.gh-border-muted { border: 1px solid var(--gh-color-border-muted); }

.gh-rounded-1 { border-radius: var(--gh-borderRadius-small); }
.gh-rounded-2 { border-radius: var(--gh-borderRadius-medium); }
.gh-rounded-3 { border-radius: var(--gh-borderRadius-large); }

.gh-monospace { font-family: var(--gh-fontStack-monospace); }

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

.gh-break-word {
  word-wrap: break-word;
  word-break: break-word;
}

/* Flexbox utilities */
.gh-d-flex { display: flex; }
.gh-d-inline-flex { display: inline-flex; }
.gh-flex-items-center { align-items: center; }
.gh-flex-items-start { align-items: flex-start; }
.gh-flex-items-end { align-items: flex-end; }
.gh-flex-justify-between { justify-content: space-between; }
.gh-flex-justify-center { justify-content: center; }
.gh-flex-justify-end { justify-content: flex-end; }
.gh-flex-wrap { flex-wrap: wrap; }
.gh-flex-1 { flex: 1; }
.gh-flex-auto { flex: auto; }
.gh-flex-shrink-0 { flex-shrink: 0; }

/* Spacing utilities */
.gh-m-0 { margin: 0; }
.gh-mt-0 { margin-top: 0; }
.gh-mr-0 { margin-right: 0; }
.gh-mb-0 { margin-bottom: 0; }
.gh-ml-0 { margin-left: 0; }

.gh-m-1 { margin: var(--gh-space-1); }
.gh-mt-1 { margin-top: var(--gh-space-1); }
.gh-mr-1 { margin-right: var(--gh-space-1); }
.gh-mb-1 { margin-bottom: var(--gh-space-1); }
.gh-ml-1 { margin-left: var(--gh-space-1); }

.gh-m-2 { margin: var(--gh-space-2); }
.gh-mt-2 { margin-top: var(--gh-space-2); }
.gh-mr-2 { margin-right: var(--gh-space-2); }
.gh-mb-2 { margin-bottom: var(--gh-space-2); }
.gh-ml-2 { margin-left: var(--gh-space-2); }

.gh-m-3 { margin: var(--gh-space-3); }
.gh-mt-3 { margin-top: var(--gh-space-3); }
.gh-mr-3 { margin-right: var(--gh-space-3); }
.gh-mb-3 { margin-bottom: var(--gh-space-3); }
.gh-ml-3 { margin-left: var(--gh-space-3); }

.gh-m-4 { margin: var(--gh-space-4); }
.gh-mt-4 { margin-top: var(--gh-space-4); }
.gh-mr-4 { margin-right: var(--gh-space-4); }
.gh-mb-4 { margin-bottom: var(--gh-space-4); }
.gh-ml-4 { margin-left: var(--gh-space-4); }

.gh-p-0 { padding: 0; }
.gh-pt-0 { padding-top: 0; }
.gh-pr-0 { padding-right: 0; }
.gh-pb-0 { padding-bottom: 0; }
.gh-pl-0 { padding-left: 0; }

.gh-p-1 { padding: var(--gh-space-1); }
.gh-pt-1 { padding-top: var(--gh-space-1); }
.gh-pr-1 { padding-right: var(--gh-space-1); }
.gh-pb-1 { padding-bottom: var(--gh-space-1); }
.gh-pl-1 { padding-left: var(--gh-space-1); }

.gh-p-2 { padding: var(--gh-space-2); }
.gh-pt-2 { padding-top: var(--gh-space-2); }
.gh-pr-2 { padding-right: var(--gh-space-2); }
.gh-pb-2 { padding-bottom: var(--gh-space-2); }
.gh-pl-2 { padding-left: var(--gh-space-2); }

.gh-p-3 { padding: var(--gh-space-3); }
.gh-pt-3 { padding-top: var(--gh-space-3); }
.gh-pr-3 { padding-right: var(--gh-space-3); }
.gh-pb-3 { padding-bottom: var(--gh-space-3); }
.gh-pl-3 { padding-left: var(--gh-space-3); }

.gh-p-4 { padding: var(--gh-space-4); }
.gh-pt-4 { padding-top: var(--gh-space-4); }
.gh-pr-4 { padding-right: var(--gh-space-4); }
.gh-pb-4 { padding-bottom: var(--gh-space-4); }
.gh-pl-4 { padding-left: var(--gh-space-4); }

/* Gap utilities */
.gh-gap-1 { gap: var(--gh-space-1); }
.gh-gap-2 { gap: var(--gh-space-2); }
.gh-gap-3 { gap: var(--gh-space-3); }
.gh-gap-4 { gap: var(--gh-space-4); }