/* ─────────────────────────────────────────────────────────────
   Gruvbox Dark — Forgejo theme
   Based on the Gruvbox color scheme by morhetz
   ───────────────────────────────────────────────────────────── */

/* ── Gruvbox syntax highlighting (Chroma) ────────────────────────────────
   @import paths don't work in custom themes — inlined here instead.     */
.chroma { color: #ebdbb2; background-color: #1d2021; }
.chroma .err { color: #fb4934; }
.chroma .lnt, .chroma .ln { color: #7c6f64; }
.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn,
.chroma .kp, .chroma .kr, .chroma .kt { color: #fb4934; }
.chroma .n  { color: #ebdbb2; }
.chroma .na { color: #b8bb26; }
.chroma .nb { color: #fabd2f; }
.chroma .nc { color: #fabd2f; }
.chroma .no { color: #d3869b; }
.chroma .nd { color: #b8bb26; }
.chroma .ne { color: #fb4934; }
.chroma .nf, .chroma .fm { color: #b8bb26; }
.chroma .nn { color: #83a598; }
.chroma .nx { color: #b8bb26; }
.chroma .nt { color: #fb4934; }
.chroma .nv, .chroma .vc, .chroma .vg, .chroma .vi, .chroma .vm { color: #83a598; }
.chroma .s, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .dl,
.chroma .sd, .chroma .s2, .chroma .se, .chroma .sh, .chroma .si,
.chroma .sx, .chroma .sr, .chroma .s1, .chroma .ss { color: #b8bb26; }
.chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi,
.chroma .mo, .chroma .il { color: #d3869b; }
.chroma .o, .chroma .ow { color: #fe8019; }
.chroma .c, .chroma .c1, .chroma .ch, .chroma .cm,
.chroma .cs, .chroma .cp, .chroma .cpf { color: #928374; font-style: italic; }
.chroma .p  { color: #ebdbb2; }
.chroma .bp { color: #fabd2f; }
.chroma .ge { font-style: italic; }
.chroma .gs { font-weight: bold; }
.chroma .gh, .chroma .gu { color: #fabd2f; font-weight: bold; }
.chroma .gd { color: #fb4934; background-color: #3d1a1a; }
.chroma .gi { color: #b8bb26; background-color: #2a3d10; }

/* ── Gruvbox markup (markdown) ────────────────────────────── */
.markup-block-quote {
  border-left: 3px solid rgba(104, 157, 106, 0.4) !important;
  color: #928374;
}

.markup pre,
.repository .file-view .code-view {
  border: 1px solid var(--color-accent) !important;
  box-shadow: 4px 4px 0px #121212 !important;
  border-radius: 4px !important;
}

.markup hr,
.ui.divider {
  border: none !important;
  border-top: 1px solid rgba(104, 157, 106, 0.3) !important;
  background: none !important;
  height: 0 !important;
  margin: 2rem 0 !important;
}

.markup table,
.ui.table {
  border: 1px solid rgba(104, 157, 106, 0.35) !important;
}

.markup table th,
.markup table td,
.ui.table th,
.ui.table td {
  border-color: rgba(104, 157, 106, 0.2) !important;
}

/* ── Gruvbox palette ───────────────────────────────────────── */
:root {
  /* Gruvbox neutrals (replaces steel-* scale) - Shifted down for Hard Dark */
  --gruvbox-bg-h:  #141617;  /* hardest bg */
  --gruvbox-bg:    #1d2021;  /* main bg */
  --gruvbox-bg1:   #282828;  /* boxes, headers */
  --gruvbox-bg2:   #3c3836;  /* input panels */
  --gruvbox-bg3:   #504945;  /* borders, hover states */
  --gruvbox-bg4:   #665c54;
  --gruvbox-fg4:   #928374;  /* gray */
  --gruvbox-fg3:   #a89984;
  --gruvbox-fg2:   #bdae93;
  --gruvbox-fg1:   #d5c4a1;
  --gruvbox-fg:    #ebdbb2;

  /* Gruvbox accent colors */
  --gruvbox-red:    #cc241d;  --gruvbox-red-b:    #fb4934;
  --gruvbox-green:  #98971a;  --gruvbox-green-b:  #b8bb26;
  --gruvbox-yellow: #d79921;  --gruvbox-yellow-b: #fabd2f;
  --gruvbox-blue:   #458588;  --gruvbox-blue-b:   #83a598;
  --gruvbox-purple: #b16286;  --gruvbox-purple-b: #d3869b;
  --gruvbox-aqua:   #689d6a;  --gruvbox-aqua-b:   #8ec07c;
  --gruvbox-orange: #d65d0e;  --gruvbox-orange-b: #fe8019;

  /* ── Forgejo theme variables ─────────────────────────────── */
  --is-dark-theme: true;
  color-scheme: dark;

  /* Primary = Gruvbox aqua */
  --color-primary:          var(--gruvbox-aqua-b);
  --color-primary-contrast: #000;
  --color-primary-dark-1:   var(--gruvbox-yellow-b);
  --color-primary-dark-2:   var(--gruvbox-yellow-b);
  --color-primary-dark-3:   var(--gruvbox-yellow);
  --color-primary-dark-4:   var(--gruvbox-yellow);
  --color-primary-light-1:  var(--gruvbox-aqua);
  --color-primary-light-2:  #507a52;
  --color-primary-light-3:  #3e5c3f;
  --color-primary-light-4:  #2c422d;
  --color-primary-light-5:  #2c422d;
  --color-primary-light-6:  #1e2d1f;
  --color-primary-light-7:  #1e2d1f;
  --color-primary-alpha-10: #689d6a19;
  --color-primary-alpha-20: #689d6a33;
  --color-primary-alpha-30: #689d6a4b;
  --color-primary-alpha-40: #689d6a66;
  --color-primary-alpha-50: #689d6a80;
  --color-primary-alpha-60: #689d6a99;
  --color-primary-alpha-70: #689d6ab3;
  --color-primary-alpha-80: #689d6acc;
  --color-primary-alpha-90: #689d6ae1;
  --color-primary-hover:    var(--gruvbox-aqua);
  --color-primary-active:   #507a52;

  /* Secondary = Gruvbox bg tones */
  --color-secondary:          var(--gruvbox-bg1);
  --color-secondary-dark-1:   var(--gruvbox-bg2);
  --color-secondary-dark-2:   var(--gruvbox-bg3);
  --color-secondary-dark-3:   var(--gruvbox-bg4);
  --color-secondary-dark-4:   var(--gruvbox-fg4);
  --color-secondary-dark-5:   var(--gruvbox-fg3);
  --color-secondary-dark-6:   var(--gruvbox-fg2);
  --color-secondary-dark-7:   var(--gruvbox-fg1);
  --color-secondary-dark-8:   var(--gruvbox-fg);
  --color-secondary-dark-9:   var(--gruvbox-fg);
  --color-secondary-dark-10:  var(--gruvbox-fg);
  --color-secondary-dark-11:  var(--gruvbox-fg);
  --color-secondary-dark-12:  var(--gruvbox-fg);
  --color-secondary-dark-13:  var(--gruvbox-fg);
  --color-secondary-light-1:  var(--gruvbox-bg2);
  --color-secondary-light-2:  var(--gruvbox-bg1);
  --color-secondary-light-3:  var(--gruvbox-bg);
  --color-secondary-light-4:  var(--gruvbox-bg-h);
  --color-secondary-alpha-10: #3c383619;
  --color-secondary-alpha-20: #3c383633;
  --color-secondary-alpha-30: #3c38364b;
  --color-secondary-alpha-40: #3c383666;
  --color-secondary-alpha-50: #3c383680;
  --color-secondary-alpha-60: #3c383699;
  --color-secondary-alpha-70: #3c3836b3;
  --color-secondary-alpha-80: #3c3836cc;
  --color-secondary-alpha-90: #3c3836e1;
  --color-secondary-hover:    var(--gruvbox-bg2);
  --color-secondary-active:   var(--gruvbox-bg1);

  /* Named colors */
  --color-red:    var(--gruvbox-red);
  --color-orange: var(--gruvbox-orange);
  --color-yellow: var(--gruvbox-yellow);
  --color-olive:  var(--gruvbox-green);
  --color-green:  var(--gruvbox-green);
  --color-teal:   var(--gruvbox-aqua);
  --color-blue:   var(--gruvbox-blue);
  --color-violet: var(--gruvbox-purple);
  --color-purple: var(--gruvbox-purple);
  --color-pink:   var(--gruvbox-purple-b);
  --color-brown:  #a47252;
  --color-grey:   var(--gruvbox-fg4);
  --color-black:  var(--gruvbox-bg-h);

  --color-red-light:    var(--gruvbox-red-b);
  --color-orange-light: var(--gruvbox-orange-b);
  --color-yellow-light: var(--gruvbox-yellow-b);
  --color-olive-light:  var(--gruvbox-green-b);
  --color-green-light:  var(--gruvbox-green-b);
  --color-teal-light:   var(--gruvbox-aqua-b);
  --color-purple-light: var(--gruvbox-purple-b);
  --color-pink-light:   var(--gruvbox-purple-b);
  --color-brown-light:  #94674a;
  --color-grey-light:   var(--gruvbox-fg2);
  --color-black-light:  var(--gruvbox-bg1);

  --color-red-dark-1:    #a71919;
  --color-orange-dark-1: #b84e0b;
  --color-yellow-dark-1: #b07f1b;
  --color-olive-dark-1:  #7a7a14;
  --color-green-dark-1:  #7a7a14;
  --color-teal-dark-1:   #507851;
  --color-violet-dark-1: #8c4d6a;
  --color-purple-dark-1: #8c4d6a;
  --color-pink-dark-1:   #a84e7c;
  --color-brown-dark-1:  #94674a;
  --color-black-dark-1:  var(--gruvbox-bg-h);

  --color-red-dark-2:    #941616;
  --color-orange-dark-2: #a24409;
  --color-yellow-dark-2: #9a6f17;
  --color-olive-dark-2:  #6a6a10;
  --color-green-dark-2:  #6a6a10;
  --color-teal-dark-2:   #436843;
  --color-violet-dark-2: #7a4059;
  --color-purple-dark-2: #7a4059;
  --color-pink-dark-2:   #94416c;
  --color-brown-dark-2:  #a47252;
  --color-black-dark-2:  var(--gruvbox-bg);

  /* Console */
  --color-console-fg:          var(--gruvbox-fg);
  --color-console-fg-subtle:   var(--gruvbox-fg4);
  --color-console-bg:          var(--gruvbox-bg-h);
  --color-console-border:      var(--gruvbox-bg1);
  --color-console-hover-bg:    #ffffff12;
  --color-console-active-bg:   var(--gruvbox-bg2);
  --color-console-menu-bg:     var(--gruvbox-bg1);
  --color-console-menu-border: var(--gruvbox-bg2);

  /* ANSI */
  --color-ansi-black:          var(--gruvbox-bg1);
  --color-ansi-red:            var(--gruvbox-red-b);
  --color-ansi-green:          var(--gruvbox-green-b);
  --color-ansi-yellow:         var(--gruvbox-yellow-b);
  --color-ansi-blue:           var(--gruvbox-blue-b);
  --color-ansi-magenta:        var(--gruvbox-purple-b);
  --color-ansi-cyan:           var(--gruvbox-aqua-b);
  --color-ansi-white:          var(--gruvbox-fg4);
  --color-ansi-bright-black:   var(--gruvbox-bg4);
  --color-ansi-bright-red:     var(--gruvbox-red-b);
  --color-ansi-bright-green:   var(--gruvbox-green-b);
  --color-ansi-bright-yellow:  var(--gruvbox-yellow-b);
  --color-ansi-bright-blue:    var(--gruvbox-blue-b);
  --color-ansi-bright-magenta: var(--gruvbox-purple-b);
  --color-ansi-bright-cyan:    var(--gruvbox-aqua-b);
  --color-ansi-bright-white:   var(--gruvbox-fg);

  /* Diff */
  --color-diff-removed-word-bg:  #6b2020;
  --color-diff-added-word-bg:    #4a6320;
  --color-diff-removed-row-bg:   #3d1a1a;
  --color-diff-moved-row-bg:     #5c3d08;
  --color-diff-added-row-bg:     #2a3d10;
  --color-diff-removed-row-border: #6b2020;
  --color-diff-moved-row-border:   #7a5510;
  --color-diff-added-row-border:   #4a6320;
  --color-diff-inactive:         var(--gruvbox-bg2);

  /* Status / feedback */
  --color-error-border:    #6b2020;
  --color-error-bg:        #4a1818;
  --color-error-bg-active: #6b2020;
  --color-error-bg-hover:  #6b2020;
  --color-error-text:      #ffd7d7;
  --color-success-border:  var(--gruvbox-green);
  --color-success-bg:      #2a3a10;
  --color-success-text:    var(--gruvbox-green-b);
  --color-warning-border:  var(--gruvbox-yellow);
  --color-warning-bg:      #4a3a08;
  --color-warning-text:    var(--gruvbox-yellow-b);
  --color-info-border:     var(--gruvbox-blue);
  --color-info-bg:         #1a3038;
  --color-info-text:       var(--gruvbox-blue-b);

  /* Badges */
  --color-red-badge:           var(--gruvbox-red);
  --color-red-badge-bg:        #cc241d22;
  --color-red-badge-hover-bg:  #cc241d44;
  --color-green-badge:         var(--gruvbox-green);
  --color-green-badge-bg:      #98971a22;
  --color-green-badge-hover-bg:#98971a44;
  --color-yellow-badge:        var(--gruvbox-yellow);
  --color-yellow-badge-bg:     #d7992122;
  --color-yellow-badge-hover-bg:#d7992144;
  --color-orange-badge:        var(--gruvbox-orange);
  --color-orange-badge-bg:     #d65d0e22;
  --color-orange-badge-hover-bg:#d65d0e44;

  /* OKLch helpers */
  --thin-lightness:           0.68;
  --regular-chroma:           0.19;
  --hue-green:                145deg;
  --hue-red:                  27deg;
  --hue-purple:               298deg;
  --hue-violet:               293deg;
  --hue-orange:               41deg;
  --hue-blue:                 260deg;
  --thin-lightness-highlight: 0.75;
  --color-thin-red-highlight: oklch(var(--thin-lightness-highlight) var(--regular-chroma) 27deg);
  --bg-lightness:             0.26;
  --bg-chroma:                0.05;
  --color-danger-bg:          oklch(var(--bg-lightness) var(--bg-chroma) 27deg);

  /* Core layout / target-based */
  --color-body:                    var(--gruvbox-bg);
  --color-box-header:              var(--gruvbox-bg1);
  --color-box-body:                var(--gruvbox-bg);
  --color-box-body-highlight:      var(--gruvbox-bg2);
  --color-text-dark:               #fff;
  --color-text:                    var(--gruvbox-fg);
  --color-text-light:              var(--gruvbox-fg1);
  --color-text-light-1:            var(--gruvbox-fg1);
  --color-text-light-2:            var(--gruvbox-fg2);
  --color-text-light-3:            var(--gruvbox-fg3);
  --color-footer:                  var(--gruvbox-bg-h);
  --color-timeline:                var(--gruvbox-bg2);
  --color-input-text:              var(--gruvbox-fg);
  --color-input-background:        var(--gruvbox-bg2);
  --color-input-toggle-background: var(--gruvbox-bg2);
  --color-input-border:            var(--gruvbox-bg3);
  --color-input-border-hover:      var(--gruvbox-bg4);
  --color-header-wrapper:          var(--gruvbox-bg-h);
  --color-header-wrapper-transparent: #1d202100;
  --color-light:                   #00000028;
  --color-light-mimic-enabled:     rgba(0,0,0,calc(40/255*222/255/var(--opacity-disabled)));
  --color-light-border:            #ffffff20;
  --color-hover:                   var(--gruvbox-bg2);
  --color-active:                  var(--gruvbox-bg1);
  --color-menu:                    var(--gruvbox-bg1);
  --color-card:                    var(--gruvbox-bg1);
  --fancy-card-bg:                 var(--gruvbox-bg2);
  --fancy-card-border:             var(--gruvbox-bg3);
  --color-markup-table-row:        #ffffff06;
  --color-markup-code-block:       var(--gruvbox-bg);
  --color-markup-code-inline:      var(--gruvbox-bg-h);
  --color-button:                  var(--gruvbox-bg2);
  --color-code-bg:                 var(--gruvbox-bg);
  --color-shadow:                  #00000060;
  --color-secondary-bg:            var(--gruvbox-bg1);
  --color-text-focus:              #fff;
  --color-expand-button:           var(--gruvbox-bg1);
  --color-placeholder-text:        var(--gruvbox-fg4);
  --color-editor-line-highlight:   var(--gruvbox-bg1);
  --color-project-board-bg:        var(--gruvbox-bg);
  --color-project-board-dark-label:var(--gruvbox-fg3);
  --color-caret:                   var(--gruvbox-fg);
  --color-reaction-bg:             #ffffff10;
  --color-reaction-active-bg:      var(--color-primary-alpha-30);
  --color-reaction-hover-bg:       var(--color-primary-alpha-40);
  --color-tooltip-text:            var(--gruvbox-fg);
  --color-tooltip-bg:              var(--gruvbox-bg-h);
  --color-nav-bg:                  var(--gruvbox-bg-h);
  --color-nav-hover-bg:            var(--gruvbox-bg2);
  --color-secondary-nav-bg:        var(--color-body);
  --color-label-text:              #fff;
  --color-label-bg:                var(--gruvbox-bg2);
  --color-label-hover-bg:          var(--gruvbox-bg3);
  --color-label-active-bg:         var(--gruvbox-bg4);
  --color-label-bg-alt:            var(--gruvbox-bg3);
  --color-accent:                  var(--gruvbox-aqua-b);
  --color-small-accent:            var(--gruvbox-aqua);
  --color-highlight-fg:            var(--gruvbox-yellow-b);
  --color-highlight-bg:            var(--color-primary-alpha-20);
  --color-overlay-backdrop:        #080808c0;
  --color-selection-bg:            var(--gruvbox-fg);
  --color-selection-fg:            var(--gruvbox-bg);
  --checkerboard-color-1:          var(--gruvbox-bg2);
  --checkerboard-color-2:          var(--gruvbox-bg);
  --color-indicator-offline:       var(--gruvbox-fg4);
  --color-indicator-offline-20:    #9283741a;
  --color-indicator-idle:          var(--gruvbox-green);
  --color-indicator-idle-20:       #98971a1a;
  --color-indicator-active:        var(--gruvbox-blue);
  --color-indicator-active-20:     #45858833;
  --color-gold:                    var(--gruvbox-yellow);
  --color-white:                   #ffffff;
  --color-pure-black:              #000000;
  accent-color:                    var(--color-accent);
}

/* ── Maple Mono (self-hosted) ─────────────────────────────── */
@font-face {
  font-family: 'Maple Mono';
  src: url('/assets/fonts/maple-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Maple Mono';
  src: url('/assets/fonts/maple-mono-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lexend';
  src: url('/assets/fonts/lexend-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lexend';
  src: url('/assets/fonts/lexend-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ── Geist Mono (self-hosted) ─────────────────────────────── */
@font-face {
  font-family: 'Geist Mono';
  src: url('/assets/fonts/geist-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('/assets/fonts/geist-mono-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Global font: Lexend for body, Maple Mono for headings + code ──────── */
body,
.ui,
input,
textarea,
select,
button,
p,
span,
li,
td,
th,
label {
  font-family: 'Lexend', sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.header,
.ui.header,
.hero,
.title {
  font-family: 'Geist Mono', monospace !important;
}

code,
pre,
kbd,
.code-inner,
.chroma,
.editor-wrapper,
.monaco-editor {
  font-family: 'Geist Mono', monospace !important;
}

/* ── Home page hero ───────────────────────────────────────── */
.page-content.home {
  background-color: var(--gruvbox-bg-h);
}

.page-content.home .tw-mb-8 {
  background-color: var(--gruvbox-bg-h);
  padding-top: 3rem;
  padding-bottom: 1.5rem;
}

.page-content.home .logo {
  width: 64px;
  height: 64px;
}

.page-content.home h1.title {
  color: var(--gruvbox-yellow-b);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-top: 0.75rem;
  margin-bottom: 0;
}

.page-content.home .hero h2 {
  color: var(--gruvbox-fg4);
  font-size: 0.8rem;
  font-weight: 400;
  margin-top: 0.35rem;
}

.page-content.home .ui.stackable.page.grid {
  border-top: 1px solid var(--gruvbox-bg1);
}

.page-content.home .ui.stackable.page.grid h1.hero {
  color: var(--gruvbox-fg1);
  font-size: 0.95rem;
}

.page-content.home .ui.stackable.page.grid h1.hero svg {
  color: var(--gruvbox-yellow);
}

.page-content.home .ui.stackable.page.grid p.large {
  color: var(--gruvbox-fg4);
  font-size: 0.8rem;
  line-height: 1.75;
}

/* ── Forgejo-dark emoji overrides (kept from upstream) ──── */
.emoji[aria-label="check mark"],
.emoji[aria-label="currency exchange"],
.emoji[aria-label="TOP arrow"],
.emoji[aria-label="END arrow"],
.emoji[aria-label="ON! arrow"],
.emoji[aria-label="SOON arrow"],
.emoji[aria-label="heavy dollar sign"],
.emoji[aria-label="copyright"],
.emoji[aria-label="registered"],
.emoji[aria-label="trade mark"],
.emoji[aria-label="multiply"],
.emoji[aria-label="plus"],
.emoji[aria-label="minus"],
.emoji[aria-label="divide"],
.emoji[aria-label="curly loop"],
.emoji[aria-label="double curly loop"],
.emoji[aria-label="wavy dash"],
.emoji[aria-label="paw prints"],
.emoji[aria-label="musical note"],
.emoji[aria-label="musical notes"] {
  filter: invert(100%) hue-rotate(180deg);
}

/* ── Repository 2-Column Grid Layout ──────────────────────── */
@media (min-width: 992px) {
  .repo-layout-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 2rem;
    align-items: start;
  }
}

/* Fallback for smaller screens */
@media (max-width: 991px) {
  .repo-layout-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .repo-layout-sidebar {
    display: contents !important;
  }

  .repo-sidebar-about {
    order: 1 !important;
  }

  .repo-layout-main {
    order: 2 !important;
  }

  .repo-sidebar-topics {
    order: 3 !important;
  }

  .repo-sidebar-metadata {
    order: 4 !important;
  }

  .repo-sidebar-languages {
    order: 5 !important;
  }
}

.repo-layout-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-top: 0.5rem;
}

.repo-sidebar-section {
  border-bottom: 1px solid var(--gruvbox-bg1);
  padding-bottom: 1.5rem;
}

.repo-sidebar-section:last-child {
  border-bottom: none;
}

.repo-sidebar-section h3 {
  font-family: 'Geist Mono', monospace;
  font-size: 0.85rem;
  color: var(--gruvbox-fg1);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Sidebar description & website */
.repo-sidebar-about .description {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--gruvbox-fg);
}

.repo-sidebar-about .repo-website {
  font-size: 0.9rem;
  color: var(--gruvbox-aqua-b);
}

.repo-sidebar-about .repo-website svg {
  color: var(--gruvbox-fg4);
  vertical-align: middle;
}

.repo-sidebar-about .repo-website a {
  color: var(--gruvbox-aqua-b) !important;
}

/* Sidebar topics */
.repo-sidebar-topics .repo-topics {
  margin-top: 0.5rem;
}

.repo-sidebar-topics .repo-topic.ui.label {
  background-color: var(--gruvbox-bg1) !important;
  color: var(--gruvbox-fg) !important;
  border: 1px solid var(--gruvbox-bg2) !important;
  font-size: 0.75rem !important;
  border-radius: 12px !important;
}

/* Sidebar metadata (size) */
.repo-sidebar-metadata .repo-size {
  display: flex;
  align-items: center;
  font-size: 0.85rem;
  color: var(--gruvbox-fg);
}

.repo-sidebar-metadata .repo-size svg {
  color: var(--gruvbox-fg4);
}

/* Sidebar language details */
.repo-sidebar-languages ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0.75rem 0 0 0 !important;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 1.25rem;
  row-gap: 0.5rem;
}

.repo-sidebar-languages li {
  display: flex;
  align-items: center;
  font-size: 0.75rem;
  color: var(--gruvbox-fg3);
}

.repo-sidebar-languages .color-icon {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 8px;
}

/* Utils */
.bold {
    font-weight: bolder;
}

/* Sidebar language stats-bar styling */
.repo-sidebar-languages stats-bar {
  display: flex !important;
  height: 8px !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  background-color: var(--gruvbox-bg1) !important;
  margin-bottom: 0.75rem !important;
}

.repo-sidebar-languages stats-bar .slice {
  height: 100% !important;
}

/* Repository menu counts bar alignment */
.repository-summary .repository-menu {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  padding: 0.75rem 2rem !important;
}

.repository-summary .repository-menu .item {
  flex: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  padding: 0 !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* ── Personal Landing Page Dashboard (Rich, Modular Workspace Style) ── */
.page-content.home.developer-dashboard-home {
  background-color: var(--gruvbox-bg-h) !important;
  /* Visual CSS grid-pattern background */
  background-image:
    linear-gradient(to right, rgba(60, 56, 54, 0.4) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(60, 56, 54, 0.4) 1px, transparent 1px);
  background-size: 32px 32px;
  min-height: calc(100vh - 120px);
  overflow-x: hidden !important;
}

.page-content.home.developer-dashboard-home .ui.container {
  width: 100% !important;
  max-width: 960px !important;
  padding: 4rem 1.5rem !important;
  box-sizing: border-box !important;
}

@media (max-width: 575px) {
  .page-content.home.developer-dashboard-home .ui.container {
    width: 100% !important;
    padding: 2rem 1rem !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
  }
}

/* Hero Section layout */
.developer-hero-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  margin-bottom: 4rem;
  align-items: center;
  max-width: 100vw !important;
  overflow: hidden !important;
}

@media (min-width: 768px) {
  .developer-hero-section {
    grid-template-columns: 1fr 1fr;
  }
}

/* Intro Text styling */
.ascii-container {
  width: 100%;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.ascii-logo {
  font-family: 'Geist Mono', monospace !important;
  color: var(--gruvbox-yellow-b) !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  line-height: 1.15 !important;
  font-size: clamp(5.5px, 1.8vw, 12px) !important;
  margin: 0 !important;
  white-space: pre !important;
  overflow: hidden !important;
}

@media (max-width: 480px) {
  .ascii-logo {
    transform: scale(0.72) !important;
    transform-origin: left center !important;
    width: 140% !important; /* expand width to prevent character wrapping */
    font-size: 8.5px !important;
    line-height: 1.25 !important;
  }
}

@media (min-width: 576px) {
  .ascii-logo {
    font-size: 0.6rem !important;
    line-height: 1.3 !important;
  }
}

.hero-intro-pane {
  min-width: 0 !important;
  max-width: 100vw !important;
  width: 100% !important;
  overflow: hidden !important;
}

.hero-intro-pane .tagline {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--gruvbox-fg3);
  margin: 0 0 2rem 0;
  white-space: normal !important;
  word-break: break-word !important;
  max-width: 100vw !important;
  width: 100% !important;
}

/* Terminal Mockup styling */
.hero-terminal-pane {
  background-color: #141617 !important;
  border: 1px solid var(--gruvbox-bg2) !important;
  box-shadow: 6px 6px 0px #121212 !important;
  border-radius: 6px !important;
  overflow: hidden;
  font-size: 0.8rem;
  max-width: 100vw !important;
  box-sizing: border-box !important;
}

.terminal-header {
  background-color: var(--gruvbox-bg1);
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--gruvbox-bg2);
}

.terminal-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.terminal-dot.close { background-color: #fb4934; }
.terminal-dot.minimize { background-color: #fabd2f; }
.terminal-dot.maximize { background-color: #b8bb26; }

.terminal-title {
  margin-left: auto;
  font-family: 'Geist Mono', monospace;
  color: var(--gruvbox-fg4);
  font-size: 0.75rem;
}

.terminal-body {
  padding: 1.25rem;
  color: var(--gruvbox-fg);
}

.terminal-line {
  line-height: 1.5;
}

.terminal-line .prompt {
  color: var(--gruvbox-aqua-b);
  margin-right: 0.5rem;
}

.neofetch-output {
  display: flex;
  gap: 1.5rem;
  margin-top: 0.5rem;
  align-items: flex-start;
}

@media (max-width: 480px) {
  .neofetch-output {
    flex-direction: column !important;
    gap: 0.75rem !important;
  }
}

.neofetch-logo {
  font-family: 'Geist Mono', monospace !important;
  color: var(--gruvbox-aqua-b) !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  font-size: 0.8rem !important;
  overflow: hidden !important;
}

.neofetch-stats {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.neofetch-stats .stat {
  line-height: 1.4;
  color: var(--gruvbox-fg);
}

.color-yellow {
  color: var(--gruvbox-yellow-b) !important;
}

.cursor-blink {
  color: var(--gruvbox-fg);
}

/* Dividers styling */
.section-divider {
  border-bottom: 1px solid var(--gruvbox-bg2);
  padding-bottom: 0.5rem;
  margin-bottom: 2rem;
}

.section-divider span {
  font-family: 'Geist Mono', monospace;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--gruvbox-fg4);
}

/* Dynamic Repos Grid */
.featured-repos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 2rem;
  margin-bottom: 4rem;
  padding-right: 8px !important; /* Leave space for the 4px card box-shadows on right */
  width: 100% !important;
  box-sizing: border-box !important;
}

.repo-card-dynamic {
  background-color: #141617 !important;
  border: 1px solid var(--gruvbox-bg2) !important;
  box-shadow: 4px 4px 0px #121212 !important;
  border-radius: 6px !important;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 180px;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

@media (max-width: 480px) {
  .repo-card-dynamic .repo-footer {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }
}

.repo-card-dynamic .repo-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.repo-card-dynamic .repo-icon {
  color: var(--gruvbox-fg4);
  flex-shrink: 0;
}

.repo-card-dynamic .repo-title {
  color: var(--gruvbox-aqua-b) !important;
  font-size: 1.1rem;
}

.repo-card-dynamic .repo-title:hover {
  text-decoration: underline !important;
}

.repo-card-dynamic .repo-desc {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--gruvbox-fg3);
  margin: 0 0 1rem 0;
  flex-grow: 1;
}

.repo-card-dynamic .repo-web {
  font-size: 0.8rem;
  margin-bottom: 1.25rem;
}

.repo-card-dynamic .repo-web a {
  color: var(--gruvbox-aqua-b) !important;
}

.repo-card-dynamic .repo-web a:hover {
  text-decoration: underline !important;
}

.repo-card-dynamic .repo-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--gruvbox-fg4);
  border-top: 1px dashed var(--gruvbox-bg2);
  padding-top: 0.75rem;
  margin-top: auto;
}

.repo-card-dynamic .repo-lang {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.repo-card-dynamic .lang-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.loading-repos, .no-repos, .error-repos {
  font-family: 'Geist Mono', monospace;
  font-size: 0.85rem;
  color: var(--gruvbox-fg4);
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 0;
}

.home-quick-links {
  display: flex;
  justify-content: center;
}

.explore-btn {
  background-color: var(--gruvbox-bg1) !important;
  border: 1px solid var(--gruvbox-bg2) !important;
  color: var(--gruvbox-fg) !important;
  font-family: 'Geist Mono', monospace !important;
  font-size: 0.85rem !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 6px !important;
  box-shadow: 3px 3px 0px #121212 !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}

.explore-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0px #121212 !important;
}

.explore-btn:active {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0px #121212 !important;
}

/* ── Repository Search & Explore List Styling ──────────────── */
.flex-list {
  padding: 0 !important;
}

.flex-list .flex-item {
  background-color: var(--gruvbox-bg1) !important;
  border: 1px solid var(--gruvbox-bg2) !important;
  box-shadow: 4px 4px 0px #121212 !important;
  border-radius: 6px !important;
  padding: 1.5rem !important;
  margin-bottom: 1.5rem !important;
  display: flex !important;
  gap: 1.25rem !important;
  align-items: flex-start !important;
  border-top: 1px solid var(--gruvbox-bg2) !important; /* reset Fomantic defaults */
}

/* Monospace for non-body content */
.flex-item-title,
.flex-item-title a.name,
.flex-item-trailing,
.flex-item-trailing a,
.flex-item-main > .flex-item-body:last-child {
  font-family: 'Geist Mono', monospace !important;
}

/* Repository title link styles */
.flex-item-title a.name {
  color: var(--gruvbox-aqua-b) !important;
  font-size: 1.1rem !important;
  font-weight: bold !important;
}

.flex-item-title a.name:hover {
  text-decoration: underline !important;
}

/* Description body keeps Lexend */
.flex-item-body:not(:last-child) {
  font-family: var(--fonts-regular) !important; /* Lexend */
  color: var(--gruvbox-fg2) !important;
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  margin-top: 0.5rem !important;
  margin-bottom: 0.75rem !important;
}

/* Updated line distinction */
.flex-item-main > .flex-item-body:last-child {
  color: var(--gruvbox-fg4) !important;
  font-size: 0.78rem !important;
  margin-top: 0.75rem !important;
  border-top: 1px dashed var(--gruvbox-bg2) !important;
  padding-top: 0.75rem !important;
  display: block !important;
}

/* Meta stats styling (language, stars, forks) */
.flex-item-trailing.muted-links {
  display: inline-flex !important;
  align-items: center !important;
  gap: 1rem !important;
  font-size: 0.8rem !important;
}

.flex-item-trailing a {
  color: var(--gruvbox-fg4) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.25rem !important;
}

.flex-item-trailing a:hover {
  color: var(--gruvbox-aqua-b) !important;
  text-decoration: none !important;
}

.flex-item-trailing .color-icon {
  border-radius: 50% !important;
  width: 9px !important;
  height: 9px !important;
}

/* Repository header active navigation tab styling */
.repo-navigation .ui.tabular.menu .item.active,
.repo-navigation .ui.menu .item.active,
.ui.tabular.menu .active.item,
.ui.menu .active.item {
  color: var(--gruvbox-aqua-b) !important;
  border-bottom: 2px solid var(--gruvbox-aqua-b) !important; /* bottom accent underline */
  background: none !important;
}

.repo-navigation .ui.tabular.menu .item.active svg,
.repo-navigation .ui.menu .item.active svg,
.ui.tabular.menu .active.item svg,
.ui.menu .active.item svg {
  color: var(--gruvbox-aqua-b) !important;
}