/* ===========================================================================
   Reponest theme for Gitea — matches the marketing site (landing/).
   Dark navy base, cyan -> blue -> indigo accent, Inter font.
   Loaded on top of gitea-dark via custom/templates/custom/header.tmpl.
   Palette pulled from landing/public/css/styles.css.
   =========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* Double :root beats Gitea's single :root / [data-theme] declarations,
   so these overrides win regardless of stylesheet load order. */
:root:root {
  --reponest-cyan:   #38e1ff;
  --reponest-blue:   #2b6cff;
  --reponest-indigo: #6a5bff;
  --reponest-grad:   linear-gradient(135deg, #38e1ff 0%, #2b6cff 55%, #6a5bff 100%);

  /* ---- Surfaces (dark navy) ---- */
  --color-body:               #05070d;
  --color-box-body:           #080b14;
  --color-box-body-highlight: #0c1322;
  --color-box-header:         #0a0f1c;
  --color-nav-bg:             #070a12;
  --color-nav-hover-bg:       #0e1626;
  --color-footer:             #070a12;
  --color-menu:               #080b14;
  --color-card:               #080b14;
  --color-markup-code-block:  #0a0f1c;
  --color-input-background:   #0a1020;
  --color-active-bg:          #0e1626;
  --color-hover:              #0e1626;

  /* ---- Text ---- */
  --color-text:         #eaf1fb;
  --color-text-light:   #b7c3d8;
  --color-text-light-1: #a3b1c9;
  --color-text-light-2: #93a3bd;
  --color-text-light-3: #7c8ba6;

  /* ---- Primary accent (blue) ---- */
  --color-primary:          #2b6cff;
  --color-primary-contrast: #ffffff;
  --color-primary-hover:    #3f7bff;
  --color-primary-active:   #2560ec;
  --color-primary-light-1:  #4b86ff;
  --color-primary-light-2:  #6f9dff;
  --color-primary-light-3:  #93b4ff;
  --color-primary-dark-1:   #2560ec;
  --color-primary-dark-2:   #1f52cf;
  --color-accent:           #38e1ff;
  --color-primary-alpha-20: #2b6cff33;
  --color-primary-alpha-30: #2b6cff4b;
  --color-primary-alpha-40: #2b6cff66;
  --color-primary-alpha-50: #2b6cff80;

  /* ---- Borders / dividers (faint blue tint) ---- */
  --color-secondary:          #16223b;
  --color-secondary-alpha-40: #16223b66;
  --color-border:             #142038;
  --color-secondary-bg:       #0c1322;
  --border-radius:            6px; /* GitHub-like rounding on buttons/inputs/boxes */

  /* Inter as the UI font */
  --fonts-proportional: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --fonts-regular: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

body {
  font-family: var(--fonts-proportional);
  background: var(--color-body);
  color: var(--color-text);
}

/* Ambient background glows, echoing the landing-page hero */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 600px at 78% -5%, rgba(43,108,255,.18), transparent 60%),
    radial-gradient(700px 500px at 8% 8%,   rgba(56,225,255,.10), transparent 55%),
    radial-gradient(900px 700px at 50% 110%, rgba(106,91,255,.12), transparent 60%);
}

/* Gradient primary buttons (marketing CTA look) */
.ui.primary.button,
.ui.primary.buttons .button {
  background: var(--reponest-grad) !important;
  color: #00131f !important;
  border: none !important;
  font-weight: 600;
  box-shadow: 0 8px 30px -8px rgba(56, 225, 255, .45);
  transition: transform .2s, filter .2s, box-shadow .2s;
}
.ui.primary.button:hover,
.ui.primary.buttons .button:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
  box-shadow: 0 14px 40px -10px rgba(56, 225, 255, .55);
}

/* Links pick up the blue accent */
a { color: var(--color-primary); }
a:hover { color: var(--color-primary-light-1); }

/* Top nav: subtle blue-tinted divider, like the marketing nav.
   NOTE: no backdrop-filter here — it turns the navbar into a containing block
   and breaks dropdown popup positioning/painting in Chromium. */
.full.height > .following.bar,
#navbar {
  /* Crisp solid header bar on BOTH engines. Both Gitea and Forgejo paint the
     navbar with var(--color-nav-bg) (= #070a12 here), but on Forgejo's layout
     the body's ambient glow (body::before) reads around the near-black bar so
     it looks "missing". position+z-index lifts the bar above that glow, and the
     shadow gives it a clear edge so it always reads as a distinct header. */
  background: var(--color-nav-bg) !important;
  position: relative;
  z-index: 2;
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 12px -2px rgba(0, 0, 0, .6);
}

/* Dropdown / popup menus: explicit solid surfaces (never see-through) */
.tippy-box,
.tippy-box[data-theme=menu],
.ui.dropdown .menu,
.ui.menu .dropdown.item .menu,
.ui.vertical.menu {
  background: #0c1322 !important;
  border: 1px solid var(--color-border);
  box-shadow: 0 18px 44px -18px rgba(0, 0, 0, .8);
}
.tippy-box[data-theme=menu] .item:hover,
.ui.dropdown .menu > .item:hover {
  background: #142038 !important;
}

/* Boxes / cards / segments */
.ui.segment,
.ui.card,
.ui.attached.segment,
.repository .ui.segment {
  border-color: var(--color-border);
}

/* Login / signup panel gets the glassy card feel */
/* Open, GitHub-style: anonymous visitors keep the engine navbar with its
   Sign In / Register links (previously hidden when the marketing site was the
   only front door). */

/* ===== Sign in / sign up: marketing-style auth card =====
   Centered glassy card with the Reponest mark, rounded inputs with a cyan
   focus ring, and the gradient CTA — matches the landing page's auth look. */

/* narrower, centered column */
.user.signin .column.tw-max-w-2xl,
.user.signup .column.tw-max-w-2xl,
.user.link-account .column.tw-max-w-2xl {
  max-width: 440px !important;
}

/* card top: logo mark + big centered title, merges into the card body */
.user.signin h4.ui.top.attached.header,
.user.signup h4.ui.top.attached.header,
.user.link-account h4.ui.top.attached.header {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)), #0a0f1c;
  border: 1px solid rgba(120, 170, 255, .22);
  border-bottom: none;
  border-radius: 16px 16px 0 0;
  color: var(--color-text);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.02em;
  text-align: center;
  padding: 30px 26px 6px;
}
.user.signin h4.ui.top.attached.header::before,
.user.signup h4.ui.top.attached.header::before,
.user.link-account h4.ui.top.attached.header::before {
  content: "";
  display: block;
  width: 46px;
  height: 46px;
  margin: 0 auto 14px;
  background: url("../img/logo.svg") center / contain no-repeat;
}

/* card body */
.user.signin .ui.attached.segment,
.user.signup .ui.attached.segment,
.user.link-account .ui.attached.segment {
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)), #0a0f1c;
  border: 1px solid rgba(120, 170, 255, .22);
  border-top: none;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 40px 90px -40px rgba(43, 108, 255, .45);
  padding: 22px 34px 30px;
}

/* rounded inputs with cyan focus ring — text-like inputs only,
   NEVER checkboxes/radios (styling those breaks the checkbox layout) */
.user.signin .ui.form input:not([type="checkbox"]):not([type="radio"]),
.user.signup .ui.form input:not([type="checkbox"]):not([type="radio"]),
.user.link-account .ui.form input:not([type="checkbox"]):not([type="radio"]) {
  background: rgba(5, 7, 13, .55) !important;
  border: 1px solid rgba(120, 170, 255, .22) !important;
  border-radius: 12px !important;
  padding: 12px 15px !important;
  color: var(--color-text) !important;
  transition: border-color .2s, box-shadow .2s;
}
.user.signin .ui.form input:not([type="checkbox"]):not([type="radio"]):focus,
.user.signup .ui.form input:not([type="checkbox"]):not([type="radio"]):focus,
.user.link-account .ui.form input:not([type="checkbox"]):not([type="radio"]):focus {
  border-color: var(--reponest-cyan) !important;
  box-shadow: 0 0 0 3px rgba(56, 225, 255, .14) !important;
}

/* Browser autofill (Chrome/Edge) paints its OWN light background over
   saved-credential fields — this only shows on the live domain, where creds
   are saved, so the inputs looked white there but dark locally. A normal
   `background` can't beat the UA autofill style; the inset box-shadow trick
   paints the dark surface over it and -webkit-text-fill-color keeps text light. */
.user.signin .ui.form input:-webkit-autofill,
.user.signup .ui.form input:-webkit-autofill,
.user.link-account .ui.form input:-webkit-autofill,
.user.signin .ui.form input:-webkit-autofill:hover,
.user.signup .ui.form input:-webkit-autofill:hover,
.user.link-account .ui.form input:-webkit-autofill:hover,
.user.signin .ui.form input:-webkit-autofill:focus,
.user.signup .ui.form input:-webkit-autofill:focus,
.user.link-account .ui.form input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--color-input-background) inset !important;
  box-shadow: 0 0 0 1000px var(--color-input-background) inset !important;
  caret-color: var(--color-text) !important;
  border: 1px solid rgba(120, 170, 255, .22) !important;
  border-radius: 12px !important;
  /* stall autofill's own bg transition so the dark fill never flashes white */
  transition: background-color 9999s ease-in-out 0s !important;
}

/* checkbox row ("Remember This Device"): stock Fomantic box, themed */
.user.signin .ui.checkbox label,
.user.signup .ui.checkbox label {
  color: var(--color-text) !important;
  font-weight: 500;
}

/* password inputs get room for the show/hide eye (injected by reponest.js) */
.user.signin .ui.form input[type="password"],
.user.signup .ui.form input[type="password"],
.user.link-account .ui.form input[type="password"] {
  padding-right: 44px !important;
}
.reponest-pw-toggle {
  position: absolute;
  right: 10px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-light-3);
  border-radius: 8px;
}
.reponest-pw-toggle:hover { color: var(--color-text); background: rgba(255, 255, 255, .06); }
.reponest-pw-toggle svg { width: 18px; height: 18px; }

/* hide the navbar Help link (external Gitea docs) */
#navbar a.item[href*="docs.gitea.com"] {
  display: none !important;
}

/* Open, GitHub-style: the engine navbar shows for everyone, including
   anonymous visitors browsing public repos. (Previously hidden for anon when
   the platform was members-only and the marketing site was the front door.) */

/* …EXCEPT on the auth pages — sign in / sign up / link account get a clean,
   centered card with no top navbar (the card carries its own logo). #navbar is
   a sibling of .page-content, so match via body:has(). */
body:has(.page-content.user.signin) #navbar,
body:has(.page-content.user.signup) #navbar,
body:has(.page-content.user.link-account) #navbar,
body:has(.page-content.user.forgot) #navbar,
body:has(.page-content.user.reset) #navbar,
body:has(.page-content.user.activate) #navbar {
  display: none !important;
}

/* No engine footer anywhere (theme/language pickers, Licenses, API links) */
footer.page-footer {
  display: none !important;
}

/* "Continue with Google" (injected by reponest.js below the CTA) */
.reponest-auth-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--color-text-light-3);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 18px 0 14px;
}
.reponest-auth-divider::before,
.reponest-auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(120, 170, 255, .18);
}
.reponest-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  padding: 12px 22px;
  border-radius: 12px;
  background: #fff;
  color: #1f2430 !important;
  font-weight: 600;
  font-size: 15px;
  transition: transform .2s, box-shadow .2s;
}
.reponest-google-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 34px -12px rgba(0, 0, 0, .6);
  color: #1f2430 !important;
}
.reponest-google-btn svg { width: 18px; height: 18px; flex: none; }

/* Now that the Google source exists, the engine renders its OWN native OAuth
   button ("Sign in with google") + an "or" divider. We already inject our own
   styled "Continue with Google", so hide the native duplicate + its divider.
   NOTE: Gitea (local) uses `.external-login-link`; Forgejo (prod) uses a
   different block — `#oauth2-login-navigator` / `.oauth-login-link` — so both
   must be listed or the duplicate reappears on prod. */
.user.signin .external-login-link,
.user.signup .external-login-link,
.user.link-account .external-login-link,
.user.signin .divider.divider-text,
.user.signup .divider.divider-text,
.user.link-account .divider.divider-text,
#oauth2-login-navigator,
.user.signin .oauth-login-link,
.user.signup .oauth-login-link,
.user.link-account .oauth-login-link {
  display: none !important;
}
.user.signin .ui.form label,
.user.signup .ui.form label,
.user.link-account .ui.form label {
  color: var(--color-text) !important;
  font-weight: 600;
  font-size: 13.5px;
}

/* CTA */
.user.signin .ui.primary.button,
.user.signup .ui.primary.button,
.user.link-account .ui.primary.button {
  border-radius: 12px !important;
  padding: 14px 22px;
  font-size: 15px;
  margin-top: 6px;
}

/* secondary box (passkey / register-now / sign-in-now): quiet, borderless */
.user.signin .ui.attached.segment.header.top,
.user.signup .ui.attached.segment.header.top,
.user.link-account .ui.attached.segment.header.top {
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--color-text-light-2);
  padding: 18px 10px 0;
}

/* ---- Live password checklist (sign-up) ------------------------------- */
.reponest-pw-rules {
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--color-secondary);
  border-radius: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 16px;
  font-size: 12.5px;
  color: var(--color-text-light-2);
  list-style: none;
}
.reponest-pw-rules li { display: flex; align-items: center; gap: 8px; transition: color .15s ease; }
.reponest-pw-rules .mark {
  width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 1.5px solid currentColor; opacity: .55;
  position: relative;
}
.reponest-pw-rules li.ok { color: #3ed598; }
.reponest-pw-rules li.bad { color: #ff7a7a; }
.reponest-pw-rules li.ok .mark,
.reponest-pw-rules li.bad .mark { opacity: 1; }
.reponest-pw-rules li.ok .mark::after {
  content: ""; position: absolute; left: 3.5px; top: 0.5px;
  width: 4px; height: 8px;
  border: solid currentColor; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.reponest-pw-rules li.bad .mark::after {
  content: "\00d7"; position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -54%);
  font-size: 12px; font-weight: 700; line-height: 1;
}
@media (max-width: 480px) { .reponest-pw-rules { grid-template-columns: 1fr; } }

/* ---- "New branch" button on the Branches page (injected by reponest.js) */
.reponest-nb-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.reponest-new-branch-btn.ui.button {
  margin-left: auto;
  margin-right: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* "Source" picker (searchable combobox) injected into the create-branch modal */
.reponest-nb-hide {
  display: none !important;
}
.reponest-nb-combo {
  position: relative;
}
.reponest-nb-combo-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 7px 10px;
  border-radius: var(--border-radius, 6px);
  background: var(--color-input-background);
  color: var(--color-input-text);
  border: 1px solid var(--color-input-border);
  cursor: pointer;
  font: inherit;
}
.reponest-nb-combo-btn svg {
  flex-shrink: 0;
}
.reponest-nb-combo-label {
  flex: 1;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reponest-nb-combo-caret {
  opacity: 0.7;
  font-size: 0.85em;
}
.reponest-nb-combo-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 10;
  background: var(--color-box-body, var(--color-body));
  border: 1px solid var(--color-secondary);
  border-radius: var(--border-radius, 6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.reponest-nb-combo-search {
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-bottom: 1px solid var(--color-secondary);
  border-radius: 0;
  background: var(--color-input-background);
  color: var(--color-input-text);
  outline: none;
}
.reponest-nb-combo-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  max-height: 180px;
  overflow-y: auto;
}
.reponest-nb-combo-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
}
.reponest-nb-combo-list li[hidden] {
  display: none;
}
.reponest-nb-combo-list li:hover {
  background: var(--color-hover);
}
.reponest-nb-combo-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reponest-nb-default-badge {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 11px;
  line-height: 1.6;
  padding: 0 8px;
  border-radius: 10px;
  border: 1px solid var(--color-secondary);
  opacity: 0.85;
}

/* ---- GitHub-style dialog polish (X close injected by reponest.js) ----- */
/* Native <dialog> (prod Forgejo) */
dialog {
  border: 1px solid var(--color-secondary);
  border-radius: 12px;
  background: var(--color-box-body);
  color: var(--color-text);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}
dialog::backdrop {
  background: rgba(2, 6, 16, 0.6);
}
dialog > article > header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px solid var(--color-secondary);
}
/* Fomantic modals (local Gitea + prod confirm dialogs) */
.ui.modal {
  border: 1px solid var(--color-secondary);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}
.ui.modal > .header {
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 12px 12px 0 0;
  font-size: 16px !important;
  font-weight: 600;
  border-bottom: 1px solid var(--color-secondary);
}
.ui.dimmer {
  background: rgba(2, 6, 16, 0.6);
}
dialog .actions,
.ui.modal > .actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--color-secondary);
  background: var(--color-box-header);
}
.ui.modal > .actions {
  border-radius: 0 0 12px 12px;
}
.reponest-modal-x {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--color-text-light-2);
  cursor: pointer;
}
.reponest-modal-x:hover {
  background: var(--color-hover);
  color: var(--color-text);
}

/* ===========================================================================
   GitHub-style page polish pass (2026-07-25) — selectors verified against
   BOTH engines' embedded templates (prod Forgejo 15, local Gitea 1.27).
   Unmatched engine-specific selectors are harmless no-ops on the other.
   =========================================================================== */

/* ======================= Issues / PR list ======================= */

/* ---- Issues/PR list: GitHub-exact state colors ---------------------------
   open = #3fb950 green, closed = #f85149 red, merged = #a371f7 purple.
   Both engines paint the state icons with !important utility classes that
   resolve CSS vars (Gitea: .tw-text-green -> var(--color-green); Forgejo:
   .text.green -> var(--color-thin-green, var(--color-green))), so scoping
   new var values to #issue-list wins in both without fighting !important. */
#issue-list {
  --color-green:  #3fb950;
  --color-red:    #f85149;
  --color-purple: #a371f7;
  --color-thin-green:  #3fb950;
  --color-thin-red:    #f85149;
  --color-thin-purple: #a371f7;
}

/* ---- Issues/PR list: GitHub-style pill labels -----------------------------
   Fully rounded label chips. Scoped labels (scope-left/right, plus Gitea's
   scope-middle) keep their flat joining edges — our #issue-list rule outranks
   the engines' plain .ui.label.scope-* rules, so those edges are restated. */
#issue-list .labels-list .ui.label {
  border-radius: 2em;
  padding: 0 9px;
  font-size: 12px;
  font-weight: 500;
}
#issue-list .labels-list .ui.label.scope-parent { padding: 0; }
#issue-list .labels-list .ui.label.scope-left {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
#issue-list .labels-list .ui.label.scope-middle { border-radius: 0; }
#issue-list .labels-list .ui.label.scope-right {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* ---- Issues/PR list: quiet GitHub-style row hover -------------------------
   Row separators already come from the engines (Gitea:
   .flex-divided-list>.item+.item, Forgejo: .flex-list>.flex-item+.flex-item,
   both 1px var(--color-secondary)); this adds only the hover wash.
   Gitea rows are `.item`, Forgejo rows are `.flex-item`. */
#issue-list > .item,
#issue-list > .flex-item {
  transition: background-color .1s ease;
}
#issue-list > .item:hover,
#issue-list > .flex-item:hover {
  background-color: var(--color-hover);
}

/* ---- Issues/PR list: muted metadata + aligned comment counts --------------
   The "#12 opened by X · time" line drops to GitHub's smaller, quieter tone
   (Gitea: .item-body, Forgejo: .flex-item-body). The trailing comment-count
   link (a.muted.flex-text-block in both engines) right-aligns on a fixed min
   width so counts line up down the column, and turns primary on hover. */
#issue-list .item-body,
#issue-list .flex-item-body {
  color: var(--color-text-light-3);
  font-size: 13px;
}
#issue-list .item-trailing a.muted.flex-text-block,
#issue-list .flex-item-trailing a.muted.flex-text-block {
  justify-content: flex-end;
  min-width: 34px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-light-3);
}
#issue-list .item-trailing a.muted.flex-text-block:hover,
#issue-list .flex-item-trailing a.muted.flex-text-block:hover {
  color: var(--color-primary);
}

/* ======================= User profile ======================= */

/* ---- User profile: GitHub-style contribution heatmap ------------------
   Both engines' Vue heatmap paints cells with fill: var(--color-*) (verified
   in ActivityHeatmap.YzkmCUyb.js on Gitea and activity-heatmap.43fc6632.js on
   Forgejo), so redefining those vars SCOPED to #user-heatmap swaps the cell
   + legend colors to GitHub's dark green scale without touching the global
   blue palette. Empty cells get a navy-tinted square like GitHub's #161b22. */
#user-heatmap {
  --color-secondary-alpha-60: #101a2e; /* empty cell on dark navy */
  --color-primary-light-4:    #0e4429; /* level 1 (GitHub dark) */
  --color-primary-light-2:    #006d32; /* level 2 */
  --color-primary:            #26a641; /* level 3 */
  --color-primary-dark-2:     #39d353; /* level 4 */
  --color-primary-dark-4:     #56d364; /* top level */
}
/* GitHub rounds its contribution cells slightly (rx=2); CSS geometry
   property applies to both the calendar and the legend squares, and is a
   no-op in browsers/markup that don't support it. */
#user-heatmap svg rect {
  rx: 2px;
}

/* ---- User profile: avatar card (GitHub-style) --------------------------
   Circular avatar with a faint cyan ring, bigger full-name over a muted
   @login, and 6px card rounding. #profile-avatar-card / #profile-avatar /
   .profile-avatar-name confirmed in both engines' profile_big_avatar.tmpl. */
#profile-avatar-card.ui.card {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
}
#profile-avatar img {
  border-radius: 50%;
  border: 1px solid var(--color-border);
  box-shadow: 0 0 0 3px rgba(56, 225, 255, .06);
}
#profile-avatar-card .profile-avatar-name .header {
  display: block;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--color-text);
}
#profile-avatar-card .profile-avatar-name .username {
  display: block;
  font-size: 15px;
  font-weight: 400;
  color: var(--color-text-light-2);
}
/* meta rows (location / email / website / joined) read as muted metadata */
#profile-avatar-card .extra.content {
  color: var(--color-text-light-2);
  font-size: 13px;
}

/* ---- User profile: repo list rows (GitHub-style) -----------------------
   Gitea 1.27 renders shared/repo/list.tmpl (.flex-divided-list > .item);
   Forgejo 15 renders explore/repo_list.tmpl (.flex-list > .flex-item) —
   both selector sets are listed so the polish applies on both engines.
   Also used by the Stars tab (same page class). */
.user.profile .flex-divided-list > .item,
.user.profile .flex-list > .flex-item {
  border-radius: var(--border-radius);
  transition: background-color .12s ease;
}
.user.profile .flex-divided-list > .item:hover,
.user.profile .flex-list > .flex-item:hover {
  background-color: var(--color-hover);
}
/* repo names read semibold like GitHub */
.user.profile .item-title a.name,
.user.profile .flex-item-title a.name {
  font-weight: 600;
}
/* Archived / Private / Template chips -> quiet outlined pills */
.user.profile .item-title .ui.label,
.user.profile .flex-item-title .ui.label {
  background: transparent;
  border: 1px solid var(--color-secondary);
  color: var(--color-text-light-2);
  border-radius: 2em;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
}
/* topic chips -> accent-tinted pills (GitHub topic look) */
.user.profile .item-main > .label-list .ui.label,
.user.profile .flex-item-main > .repo-topics .ui.label {
  background: var(--color-primary-alpha-20);
  border: none;
  color: var(--color-primary-light-2);
  border-radius: 2em;
  padding: 3px 10px;
  font-size: 12px;
}
.user.profile .item-main > .label-list .ui.label:hover,
.user.profile .flex-item-main > .repo-topics .ui.label:hover {
  background: var(--color-primary-alpha-30);
  color: var(--color-primary-light-3);
}
/* "Updated ..." line stays muted metadata */
.user.profile .item-body,
.user.profile .flex-item-body {
  color: var(--color-text-light-2);
}

/* ---- User profile: overview tabs (GitHub-style) ------------------------
   Both engines render <overflow-menu class="ui secondary pointing tabular
   borderless menu"> with .ui.small.label counters (user/overview/header.tmpl
   identical opening markup on Gitea and Forgejo). Counters become rounded
   pills like GitHub's tab counters, tabs get a soft hover. */
.user.profile overflow-menu.ui.tabular.menu a.item:hover {
  background: var(--color-hover);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}
.user.profile overflow-menu .ui.small.label {
  background: var(--color-secondary);
  color: var(--color-text-light);
  border-radius: 2em;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}

/* ======================= Repo home / file browser ======================= */

/* ===== Repo home: Code / clone panel ===================================
   Clone URL reads like code on both engines. Confirmed wrappers:
   Gitea popup  = .ui.input.tiny.action > input.repo-clone-url.js-clone-url
   Forgejo row  = .clone-panel.ui.action.tiny.input > input#repo-clone-url.js-clone-url */
.ui.action.input input.js-clone-url {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  font-size: 12px;
  color: var(--color-text-light);
  background: var(--color-input-background);
}

/* Gitea (local): cyan accent on the active HTTPS/SSH/Tea tab inside the
   "Code" popup (engine rule uses the same selector with currentcolor for the
   underline, so this recolors both text and underline; loads after index.css). */
.clone-panel-tab .item.active {
  color: var(--reponest-cyan);
}

/* Forgejo (prod): clone_script.tmpl toggles .primary onto the active
   HTTPS/SSH button, which already picks up the brand gradient — tone the
   marketing glow down to fit the compact clone row and keep it steady on
   hover. `.clone-panel` is a Forgejo-only class token, no-op on local. */
.clone-panel .ui.primary.button,
.clone-panel .ui.primary.button:hover {
  box-shadow: 0 4px 14px -8px rgba(56, 225, 255, .55);
  transform: none;
}

/* ===== Repo home: file list rows =======================================
   GitHub-style subtle row hover. Gitea grid highlights per-cell (same
   selectors as the engine's own rule, retinted from --color-hover-opaque —
   which our theme never overrides — to the navy --color-hover); Forgejo is a
   Fomantic table, so tint the row's cells. */
.repo-file-item:hover > .repo-file-cell,
#repo-files-table .parent-link:hover,
#repo-files-table tr.entry:hover td,
#repo-files-table tr.has-parent:hover td {
  background: var(--color-hover);
}

/* Muted commit-message + age columns (GitHub tree-view feel).
   Gitea cells = .repo-file-cell.message / .repo-file-cell.age (grid);
   Forgejo cells = td.message / td.age (table). */
#repo-files-table .repo-file-cell.message,
#repo-files-table .repo-file-cell.message a,
#repo-files-table td.message,
#repo-files-table td.message a {
  color: var(--color-text-light-2);
  font-size: 13px;
}
#repo-files-table .repo-file-cell.message a:hover,
#repo-files-table td.message a:hover {
  color: var(--color-primary-light-1);
  text-decoration: underline;
}
#repo-files-table .repo-file-cell.age,
#repo-files-table td.age {
  color: var(--color-text-light-3);
  font-size: 12.5px;
}

/* ===== Repo home: latest commit bar ====================================
   .latest-commit / .commit-summary confirmed in both engines'
   latest_commit.tmpl. Slightly muted summary that brightens + underlines on
   hover, like GitHub's latest-commit bar. */
.latest-commit .commit-summary,
.latest-commit .commit-summary a {
  color: var(--color-text-light-1);
}
.latest-commit .commit-summary a:hover {
  color: var(--color-text);
  text-decoration: underline;
}

/* Forgejo (prod): the bar lives in the table header row — give it the same
   box-header surface Gitea's .repo-file-last-commit already has. */
#repo-files-table thead tr.commit-list th {
  background: var(--color-box-header);
}

/* ======================= Diff view + commits list ======================= */

/* ---- Diff: GitHub-style add/del colors tuned to the navy theme ---------
   Both engines paint diff rows through these theme vars (verified in
   theme-gitea-dark.css on both engines + theme-forgejo-dark.css).
   Translucent GitHub green/red reads far better on #080b14 than the stock
   opaque moss/maroon. The *-fg / *-linenum-bg vars exist in Gitea only;
   on Forgejo they are harmless no-ops. */
:root:root {
  --color-diff-added-row-bg:       rgba(63, 185, 80, .13);
  --color-diff-added-row-border:   rgba(63, 185, 80, .30);
  --color-diff-added-word-bg:      rgba(46, 160, 67, .40);
  --color-diff-added-linenum-bg:   rgba(63, 185, 80, .22); /* Gitea only */
  --color-diff-added-fg:           #3fb950;                /* Gitea only */
  --color-diff-removed-row-bg:     rgba(248, 81, 73, .11);
  --color-diff-removed-row-border: rgba(248, 81, 73, .30);
  --color-diff-removed-word-bg:    rgba(248, 81, 73, .40);
  --color-diff-removed-linenum-bg: rgba(248, 81, 73, .20); /* Gitea only */
  --color-diff-removed-fg:         #f85149;                /* Gitea only */
  /* split-view empty side + inactive cells: quiet navy instead of grey */
  --color-diff-inactive: #0c1322;
}

/* word-level (intraline) highlights: soft rounded chips like GitHub */
.code-diff .added-code,
.code-diff .removed-code {
  border-radius: 3px;
}

/* hunk header rows ("@@ ... @@"): faint GitHub blue + muted text */
.code-diff tr[data-line-type="tag"] td {
  background: rgba(56, 139, 253, .07);
}
.code-diff tr[data-line-type="tag"] .lines-code {
  color: var(--color-text-light-2);
}

/* per-file +/- ratio bar: same green/red on both engines.
   (Gitea's bar reads the *-fg vars above; Forgejo's uses --color-red/green,
   so restate directly — same selectors as the engine rule, loaded later.) */
.diff-stats-bar {
  background-color: rgba(248, 81, 73, .75);
  border-radius: 2px;
  overflow: hidden;
}
.diff-stats-bar .diff-stats-add-bar {
  background-color: #3fb950;
}

/* ---- Diff file headers: GitHub-style polish ----------------------------
   .diff-file-box / .diff-file-header / .file-link / .fold-file confirmed in
   both engines' repo/diff/box.tmpl. Headers are already position:sticky via
   the engines' own `sticky-2nd-row`; the opaque box-header color + soft
   shadow keep them reading as a crisp bar while stuck. */
.repository .diff-file-box {
  border-radius: var(--border-radius);
  margin-bottom: 16px; /* GitHub-style breathing room between files */
}
.diff-file-header.ui.top.attached.header {
  background: var(--color-box-header);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  box-shadow: 0 2px 8px -4px rgba(0, 0, 0, .5);
}
.diff-file-header a.file-link {
  font-size: 12.5px;
  color: var(--color-text);
}
.diff-file-header a.file-link:hover {
  color: var(--color-primary-light-1);
  text-decoration: underline;
}
/* LFS / generated / vendored / file-mode badges: quiet GitHub-ish pills */
.diff-file-header .ui.label {
  border-radius: 2em;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 500;
  background: var(--color-secondary-bg);
  border: 1px solid var(--color-secondary);
  color: var(--color-text-light-2);
}
/* fold chevron: muted until hovered */
.diff-file-header .fold-file {
  color: var(--color-text-light-2);
  border-radius: var(--border-radius);
}
.diff-file-header .fold-file:hover {
  color: var(--color-text);
}

/* ---- Commits list: GitHub-style rows -----------------------------------
   #commits-table / td.sha confirmed in both engines' commits_list.tmpl.
   SHA pill: Gitea renders a.ui.label.commit-id-short, Forgejo a.sha.label;
   signed commits (.commit-is-signed / .isSigned) keep their engine styling
   so trust colors stay intact. */
#commits-table td.sha .ui.label.commit-id-short:not(.commit-is-signed),
#commits-table td.sha .sha.label:not(.isSigned) {
  font-family: var(--fonts-monospace, monospace);
  font-size: 12px;
  background: var(--color-input-background);
  border: 1px solid var(--color-secondary);
  border-radius: var(--border-radius);
  color: var(--color-primary-light-2);
  transition: border-color .15s, color .15s, background .15s;
}
#commits-table td.sha .ui.label.commit-id-short:not(.commit-is-signed):hover,
#commits-table td.sha .sha.label:not(.isSigned):hover {
  border-color: var(--color-primary);
  color: var(--color-primary-light-3);
  background: var(--color-hover);
}

/* subtle full-row hover, like GitHub's commit list */
#commits-table tbody.commit-list tr {
  transition: background .1s ease;
}
#commits-table tbody.commit-list tr:hover {
  background: var(--color-hover);
}

/* commit message reads as the row's title; the date column recedes */
#commits-table .commit-summary {
  font-weight: 500;
}
#commits-table tbody.commit-list td:nth-child(4) {
  color: var(--color-text-light-3);
  font-size: 12.5px;
  white-space: nowrap;
}

/* ---- Diff hunk expand arrows: GitHub-blue hover -------------------------
   .code-expander-button is rendered by both engines (Forgejo: directly in
   section_unified.tmpl; Gitea: via RenderBlobExcerptButtons — the class is
   present in its compiled index.css). Unmatched selectors are a no-op, so
   this degrades gracefully. */
.code-diff .code-expander-button {
  color: var(--color-text-light-2);
}
.code-diff .code-expander-button:hover {
  color: var(--color-primary-contrast);
  background: var(--color-primary);
}

/* ======================= Issue / PR conversation ======================= */

/* ---- Issue/PR state badge: GitHub-style pill ----------------------------
   Both engines emit .ui.<color>.label.issue-state-label (view_title.tmpl)
   and ship `.issue-state-label{...!important}`, hence the !importants.
   Colors = GitHub dark-mode state badges. */
.ui.label.issue-state-label {
  border-radius: 2em !important;
  padding: 6px 14px !important;
  font-weight: 600;
}
.ui.green.label.issue-state-label {  /* open */
  background: #238636 !important;
  border-color: #238636 !important;
  color: #fff !important;
}
.ui.red.label.issue-state-label {    /* closed */
  background: #da3633 !important;
  border-color: #da3633 !important;
  color: #fff !important;
}
.ui.purple.label.issue-state-label { /* merged */
  background: #8957e5 !important;
  border-color: #8957e5 !important;
  color: #fff !important;
}
.ui.grey.label.issue-state-label {   /* draft */
  background: #6e7681 !important;
  border-color: #6e7681 !important;
  color: #fff !important;
}

/* ---- Issue/PR conversation: GitHub-style comment cards ------------------
   Both engines: .timeline-item.comment > .content.comment-container >
   .comment-header + .ui.attached.segment.comment-body (view_content.tmpl,
   view_content/comments.tmpl). Header gets one step lighter than the body
   so it reads as a distinct bar (GitHub two-tone card). The direct-child
   chain keeps inline code-review comments (.comment.code-comment in
   conversation.tmpl) untouched — Gitea paints those headers transparent
   on purpose. */
.repository.view.issue .comment-list .timeline-item.comment > .comment-container > .comment-header {
  background: var(--color-box-body-highlight);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}
/* keep the little arrow pointing at the avatar the same color as the bar */
.repository.view.issue .comment-list .timeline-item.comment > .comment-container > .comment-header::after {
  border-right-color: var(--color-box-body-highlight);
}
/* round the card's bottom corners when the body is the last block
   (reactions render after the body and keep their own edge otherwise) */
.repository.view.issue .comment-list .timeline-item.comment > .comment-container > .comment-body:last-child {
  border-radius: 0 0 var(--border-radius) var(--border-radius);
}

/* ---- Author / repo-role badges: GitHub-style outline pills --------------
   Gitea emits .ui.basic.label.role-label, Forgejo .ui.label.role-label
   (solid grey by default) — unify both into the quiet bordered pill GitHub
   uses for "Author"/"Member". !important is needed to beat Fomantic's
   colored-label declarations on Forgejo. */
.repository.view.issue .comment-header-right .role-label {
  background: transparent !important;
  border: 1px solid var(--color-secondary) !important;
  color: var(--color-text-light-2) !important;
  border-radius: 2em !important;
  padding: 3px 10px !important;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
}
.repository.view.issue .comment-header-right .role-label:hover {
  color: var(--color-text-light);
  border-color: var(--color-text-light-3) !important;
}

/* ---- Conversation timeline: tinted connector + GitHub event badges ------
   Both engines draw the 2px timeline line and neutral event badges with
   --color-timeline (a grey that clashes with the navy palette); double
   :root beats the theme files, same trick as the palette block above. */
:root:root {
  --color-timeline: var(--color-secondary);
}
/* small page-background ring so badges sit ON the line like GitHub */
.repository.view.issue .comment-list .timeline-item.event > .badge {
  box-shadow: 0 0 0 3px var(--color-body);
}
/* reopen = green, close = red, merge = purple (GitHub state colors);
   tw-bg-* utilities are compiled with !important in both engines */
.repository.view.issue .comment-list .timeline-item.event > .badge.tw-bg-green {
  background-color: #238636 !important;
}
.repository.view.issue .comment-list .timeline-item.event > .badge.tw-bg-red {
  background-color: #da3633 !important;
}
.repository.view.issue .comment-list .timeline-item.event > .badge.tw-bg-purple {
  background-color: #8957e5 !important;
}

/* ======================= Dashboard / activity feed ======================= */

/* ---- Dashboard activity feed: GitHub-style cards -----------------------
   #activity-feed is the feed container id on BOTH engines
   (templates/user/dashboard/feeds.tmpl). Gitea 1.27 renders rows as
   `> .item` (flex-divided-list); Forgejo 15 as `> .flex-item` (flex-list) —
   both listed below. The ID selector out-specifies each engine's divider
   rule (.flex-divided-list>.item+.item / .flex-list>.flex-item+.flex-item),
   so the card border replaces the built-in divider cleanly. The pager the
   engines render inside #activity-feed is nested (.center.page.buttons >
   .menu > a.item), so these direct-child selectors never touch it. */
#activity-feed > .item,
#activity-feed > .flex-item {
  background: var(--color-box-body);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius, 6px);
  padding: 12px 16px;
  transition: border-color .15s ease, background-color .15s ease;
}
#activity-feed > .item + .item,
#activity-feed > .flex-item + .flex-item {
  margin-top: 10px;
}
#activity-feed > .item:hover,
#activity-feed > .flex-item:hover {
  background: var(--color-box-body-highlight);
  border-color: rgba(120, 170, 255, .28);
}

/* muted, GitHub-grey metadata: relative timestamps + trailing action icon.
   !important on the icon color only — it must beat Gitea's utility class
   .tw-text-text-light{color:...!important} on the same svg. */
#activity-feed relative-time {
  color: var(--color-text-light-3);
  font-size: 12.5px;
}
#activity-feed .item-trailing svg,
#activity-feed .flex-item-trailing svg {
  color: var(--color-text-light-3) !important;
  opacity: .75;
}

/* ---- Dashboard sidebar: repo panel (Vue-rendered on both engines) ------
   #dashboard-repo-list is the mount point in templates/user/dashboard/
   repolist.tmpl on BOTH engines. Inner classes confirmed in both compiled
   bundles: .repos-search / .repos-filter / .repo-owner-name-list /
   .ui.attached.table.segment. The .ui.top.attached.header rule is
   Gitea-only ("My Repositories" heading) and never matches on Forgejo. */
#dashboard-repo-list .ui.attached.segment {
  background: var(--color-box-body);
  border-color: var(--color-border);
}
#dashboard-repo-list .ui.top.attached.header {
  background: var(--color-box-header);
  border-color: var(--color-border);
}
#dashboard-repo-list .repos-search input {
  background: var(--color-input-background);
}

/* GitHub-style subtle row hover on the repo / org lists */
#dashboard-repo-list .repo-owner-name-list li {
  border-radius: var(--border-radius, 6px);
  transition: background-color .15s ease;
}
#dashboard-repo-list .repo-owner-name-list li:hover {
  background: var(--color-hover);
}

/* ---- Dashboard context bar: solid strip like the top navbar, and a
   GitHub-style hover pill on the user/org context switcher.
   .secondary-nav and .ui.floating.dropdown.jump confirmed in
   templates/user/dashboard/navbar.tmpl on BOTH engines; the page carries
   .dashboard on both (templates/user/dashboard/dashboard.tmpl). */
.dashboard .secondary-nav {
  background: var(--color-nav-bg);
}
.dashboard .secondary-nav .ui.floating.dropdown.jump {
  padding: 4px 10px;
  border-radius: var(--border-radius, 6px);
  transition: background-color .15s ease;
}
.dashboard .secondary-nav .ui.floating.dropdown.jump:hover {
  background: var(--color-hover);
}

/* section label injected above the activity feed by reponest.js */
.reponest-dash-feed-header {
  margin: 4px 0 10px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--color-text-light-2);
}