/* ═══════════════════════════════════════════════════════
   HuskyCore — Design System (v2, aligned to GitHusky_RedHusky.dc.html)
   Palette: neutral arctic darks + ember orange accent

   Tokens (--husky-*, --font-*) live in app/assets/tailwind/application.css's
   @theme block now — that's the only file Tailwind's build scans for
   @theme, so it's the single source of truth both for these plain
   custom-property references and for Tailwind's generated utility classes.
   ═══════════════════════════════════════════════════════ */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; }

@keyframes ghPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
@keyframes ghSpin { to { transform: rotate(360deg); } }

/* Dark scrollbars — matches the mockup, avoids the light-OS default gray
   scrollbar clashing with the dark theme. Firefox via scrollbar-color,
   everyone else via the ::-webkit-scrollbar-* pseudo-elements. */
* { scrollbar-color: var(--husky-border) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--husky-border); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--husky-line); }
::-webkit-scrollbar-track { background: transparent; }

body.gh-body {
  background: var(--husky-shell);
  color: var(--husky-text);
  font-family: var(--font-body);
  line-height: 1.5;
  min-height: 100vh;
}

a { color: var(--husky-orange); text-decoration: none; }
a:hover { color: var(--husky-sunset); text-decoration: underline; }
code, pre, .gh-code { font-family: var(--font-code); }

/* Heterochromia signature #3 — the loading moment. Turbo injects this bar
   on every page navigation; ice→ember instead of Turbo's default flat blue. */
.turbo-progress-bar {
  height: 2px;
  background: linear-gradient(90deg, var(--husky-ice), var(--husky-orange));
}

/* ══════════════════════════════════════════════════
   SIDEBAR
   ══════════════════════════════════════════════════ */
.gh-sidebar {
  background: var(--husky-sidebar);
  border-right: 1px solid var(--husky-border);
  z-index: 50;
  position: relative;
}

/* Forge-glow behind the brand logo — signature element */
.gh-sidebar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 80px;
  background: radial-gradient(ellipse 120px 60px at 30px 28px,
    rgba(232,69,24,0.18) 0%,
    rgba(232,69,24,0.04) 50%,
    transparent 100%);
  pointer-events: none;
  z-index: 0;
}

/* Collapsed state — labels vanish instantly (display:none) so they never squish
   or wrap while the panel animates 220→56px. Only width transitions.
   html.sb-collapsed mirrors the same rules pre-paint (head script reads
   localStorage) so a refresh doesn't flash the rail open before Stimulus. */
.sidebar-collapsed, .sb-collapsed .gh-sidebar { width: 56px !important; }
.sidebar-collapsed .nav-label, .sb-collapsed .gh-sidebar .nav-label { display: none; }
.sb-collapsed .gh-sidebar-toggle { left: calc(56px - 0.6875rem) !important; }

/* Alça de redimensionar: fica FORA da nav (que tem overflow hidden e cortaria
   um filho absoluto na borda) e segue a mesma variável de largura. Some com a
   sidebar colapsada — ali a largura é fixa. */
.gh-sidebar-resizer {
  position: absolute; top: 0; bottom: 0; z-index: 60; width: 7px;
  left: calc(var(--gh-sb-w, 220px) - 3px);
  cursor: col-resize;
}
.gh-sidebar-resizer:hover { background: var(--husky-orange); opacity: .35; }
.sb-collapsed .gh-sidebar-resizer { display: none; }
/* Durante o arrasto a transição de largura ficaria correndo atrás do ponteiro. */
.sb-resizing .gh-sidebar, .sb-resizing .gh-sidebar-toggle { transition: none !important; }
.sb-resizing { user-select: none; }

/* Empty spacer where the "Your work" label was — keeps one nav-item of blank
   space, both expanded and collapsed (no .nav-label so it never hides). */
.gh-sidebar-spacer { height: 35px; }

.gh-sidebar-section-label {
  padding: 4px 12px 2px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--husky-muted);
  font-family: var(--font-label);
  transition: opacity 0.2s;
}

.gh-sidebar-nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 12px; font-size: 13px; font-weight: 500;
  color: var(--husky-smoke); text-decoration: none;
  border-radius: 6px; margin: 1px 6px;
  transition: background 0.1s, color 0.1s;
  cursor: pointer; border: none; background: none;
  position: relative;
  white-space: nowrap; overflow: hidden;
}
/* Collapsed rail: nothing to do. The icon is ALREADY centred on the 56px rail
   by the expanded geometry — margin 6 + padding 12 puts its left edge at 18px,
   and centring a 20px icon on 56px is (56-20)/2 = 18px, the same number. The
   old rule here flipped justify-content to `center` at t=0 while the panel
   width was still animating 220→56 (200ms, see the layout), so on collapse the
   icon jumped to the centre of the *wide* panel (~110px) and then slid back
   left as the panel shrank — two opposing motions, the "jumps". Expanding
   never showed it because the same flip parked the icon at its final position
   before the panel grew. Labels are clipped by overflow:hidden above, so they
   need no help either. Don't reintroduce a collapsed layout rule: if it isn't
   animatable in lockstep with the width, it will jump. */
.gh-sidebar-nav-item:hover {
  background: var(--husky-hover);
  color: var(--husky-snow);
  text-decoration: none;
}

/* Active: left-bar indicator + subtle ember bg */
.gh-sidebar-active {
  color: var(--husky-snow);
  background: rgba(232,69,24,0.10);
}
/* Heterochromia signature #1 — the active-nav indicator is the one bar on
   the whole page that carries both halves of the husky's two eye colors
   (ice + ember) as a deliberate gradient, not a flat accent. */
.gh-sidebar-active::before {
  content: '';
  position: absolute;
  left: -6px; top: 6px; bottom: 6px;
  width: 3px;
  background: linear-gradient(180deg, var(--husky-ice), var(--husky-orange));
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px rgba(232,69,24,0.5);
}
.gh-sidebar-active:hover { background: rgba(232,69,24,0.15); }

.gh-sidebar-icon {
  display: flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex-shrink: 0;
}
.gh-icon-muted { color: var(--husky-smoke); flex-shrink: 0; }
.gh-icon-ok { color: var(--husky-ok); flex-shrink: 0; }
.gh-icon-ok-item { color: var(--husky-ok); flex-shrink: 0; margin-top: 2px; }
.gh-icon-sunset { color: var(--husky-sunset); flex-shrink: 0; }
.gh-icon-purple { color: var(--husky-purple); flex-shrink: 0; }
.gh-icon-muted-i { color: var(--husky-muted); flex-shrink: 0; }
.gh-sidebar-icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 6px;
  color: var(--husky-smoke); text-decoration: none;
  transition: background 0.1s, color 0.1s;
}
.gh-sidebar-icon-btn:hover { background: var(--husky-hover); color: var(--husky-snow); }

.gh-sidebar-label {
  flex: 1; white-space: nowrap; overflow: hidden;
  transition: opacity 0.15s, width 0.2s;
}

.gh-sidebar-dropdown-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px; font-size: 13px; color: var(--husky-text);
  text-decoration: none; transition: background 0.1s, color 0.1s;
}
.gh-sidebar-dropdown-item:hover {
  background: var(--husky-hover);
  color: var(--husky-snow);
  text-decoration: none;
}

/* ── Search ── */
.gh-search-input {
  width: 100%; background: var(--husky-night);
  border: 1px solid var(--husky-border); border-radius: 6px;
  color: var(--husky-text); padding: 6px 12px; font-size: 13px; outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.gh-search-input:focus {
  border-color: var(--husky-orange);
  box-shadow: var(--husky-glow-sm);
}
.gh-search-input::placeholder { color: var(--husky-muted); }

/* ══════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════ */
.gh-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 500;
  cursor: pointer; border: 1px solid var(--husky-border);
  background: var(--husky-card); color: var(--husky-text);
  text-decoration: none; transition: background 0.15s, border-color 0.15s, color 0.15s;
  line-height: 1.4;
}
.gh-btn:hover {
  background: var(--husky-surface);
  border-color: var(--husky-line);
  color: var(--husky-snow);
  text-decoration: none;
}
.gh-btn-primary {
  background: var(--husky-orange);
  border-color: var(--husky-orange);
  color: white;
}
.gh-btn-primary:hover {
  background: var(--husky-sunset);
  border-color: var(--husky-sunset);
  color: white;
  box-shadow: 0 0 16px rgba(232,69,24,0.35);
}
.gh-btn-ghost { background: transparent; border-color: transparent; }
.gh-btn-ghost:hover { background: var(--husky-hover); color: var(--husky-snow); }
.gh-btn-danger { background: var(--husky-err); border-color: var(--husky-err); color: white; }
.gh-btn-danger:hover { background: #dc2626; box-shadow: 0 0 12px rgba(239,68,68,0.3); }
.gh-btn-sm { padding: 4px 10px; font-size: 12px; }
.gh-btn-lg { padding: 10px 20px; font-size: 15px; }

/* ══════════════════════════════════════════════════
   FLASH
   ══════════════════════════════════════════════════ */
.gh-flash {
  padding: 11px 20px; font-size: 13px; font-weight: 500;
  display: flex; align-items: center; gap: 8px;
}
.gh-flash-notice {
  background: var(--husky-ok-dim);
  color: #86efac;
}
.gh-flash-alert {
  background: var(--husky-err-dim);
  color: #fca5a5;
}
.gh-flash-warning {
  background: var(--husky-warn-dim);
  color: #fcd34d;
}

.gh-toast-wrap {
  /* Abaixo da topbar (56px), não em cima dela: a 16px do topo o toast caía
     exatamente sobre o avatar da conta. */
  position: fixed; top: 68px; right: 16px; z-index: 60;
  display: flex; flex-direction: column; gap: 8px;
  width: 360px; max-width: calc(100vw - 32px); pointer-events: none;
}
.gh-toast {
  pointer-events: auto; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4);
  /* Superfície OPACA. O fundo de .gh-flash-* é rgba(...,0.12), pensado pra
     faixa dentro da página; flutuando sobre a topbar ele deixava o avatar
     aparecer por baixo do texto. A cor do estado fica na barra lateral e no
     texto, que já é colorido por .gh-flash-*. */
  background: var(--husky-card);
  border: 1px solid var(--husky-border);
  border-left: 3px solid currentColor;
  color: var(--husky-text);
}
.gh-toast.gh-flash-notice  { color: var(--husky-ok); }
.gh-toast.gh-flash-alert   { color: var(--husky-err); }
.gh-toast.gh-flash-warning { color: var(--husky-warn); }
/* O texto herda a cor do estado só na barra; a mensagem em si fica legível. */
.gh-toast > .flex-1 { color: var(--husky-snow); }
.gh-toast-x {
  background: none; border: 0; color: inherit; cursor: pointer;
  font-size: 18px; line-height: 1; opacity: .6;
}
.gh-toast-x:hover { opacity: 1; }

/* ══════════════════════════════════════════════════
   CONFIRM MODAL — project-wide replacement for window.confirm()
   ══════════════════════════════════════════════════ */
.gh-modal {
  /* The global `* { margin: 0 }` reset beats <dialog>'s UA-stylesheet
     `margin: auto` centering (author styles always win over UA defaults),
     so it has to be restored explicitly here — positioned a bit above
     true center, not dead center. */
  position: fixed;
  top: 42%; left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  border: 1px solid var(--husky-border);
  border-radius: 10px;
  background: var(--husky-card);
  color: var(--husky-text);
  padding: 20px;
  width: 380px;
  max-width: calc(100vw - 32px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5);
}
.gh-modal::backdrop { background: rgba(0, 0, 0, .6); }
/* Modal de conteúdo (import da wiki), não de confirmação: cabe uma lista. */
.gh-modal-wide { width: 560px; text-align: left; }
/* Pré-visualização do documento: o iframe carrega a página branca de
   impressão, então a moldura escura fica só em volta. */
/* Pendurado no topo, não centralizado: o modal é alto e centralizar encostava
   a borda de cima na barra do navegador. */
.gh-modal-xl {
  width: min(1000px, calc(100vw - 48px));
  top: 40px; transform: translateX(-50%);
  max-height: calc(100vh - 80px);
  text-align: left;
}
/* Modal de formulário (criar repositório): alto, então pendura no topo e rola
   por dentro em vez de estourar a tela. */
.gh-modal-form {
  width: min(640px, calc(100vw - 32px));
  top: 40px; transform: translateX(-50%);
  max-height: calc(100vh - 80px); overflow-y: auto;
  text-align: left;
}
.gh-doc-frame {
  display: block; width: 100%; height: min(72vh, 760px);
  border: 1px solid var(--husky-border); border-radius: 6px; background: #fff;
}
.gh-modal-message { font-size: 14px; line-height: 1.5; margin: 0 0 18px; }
.gh-modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

.gh-main { min-height: 100vh; }
[x-cloak] { display: none !important; }

/* ── Avatar ── */
.gh-avatar { border-radius: 50%; object-fit: cover; }
.gh-avatar-sm { width: 32px; height: 32px; cursor: pointer; }
.gh-avatar-md { width: 48px; height: 48px; }
.gh-avatar-lg { width: 80px; height: 80px; }

/* ── Layout ── */
/* 1400 e não 1200: as telas densas (árvore, diff, blame, lista de commits)
   são as de uso diário e as que mais sofriam com a coluna estreita. */
.gh-container        { max-width: 1400px; margin: 0 auto; padding: 24px; }
.gh-container-narrow { max-width: 720px;  margin: 0 auto; padding: 24px; }
.gh-container-wide   { max-width: none;   margin: 0 auto; padding: 24px; }

/* ══════════════════════════════════════════════════
   CARDS
   ══════════════════════════════════════════════════ */
.gh-card {
  background: var(--husky-card);
  border: 1px solid var(--husky-border);
  border-radius: 8px;
}
.gh-card-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--husky-border);
  font-weight: 600; font-size: 14px; color: var(--husky-snow);
  background: var(--husky-veil);
}
.gh-card-body { padding: 20px; }

.gh-sidebar-toggle {
  background: var(--husky-sidebar);
  border: 1px solid var(--husky-border);
  color: var(--husky-smoke);
}
.gh-sidebar-toggle:hover { color: var(--husky-snow); border-color: var(--husky-smoke); }

.gh-wordmark { font-family: "Montserrat", ui-sans-serif, system-ui, sans-serif; }

/* ══════════════════════════════════════════════════
   REPO HEADER
   ══════════════════════════════════════════════════ */
.gh-repo-header {
  background: var(--husky-sidebar);
  border-bottom: 1px solid var(--husky-border);
  padding: 20px 0 0;
}
/* A faixa do repo é full-bleed (cor e réguas tocam as bordas), mas o que está
   dentro dela senta na mesma coluna do conteúdo da página — antes o header
   começava a 24px da sidebar e o conteúdo a ~220px, um degrau que lê como
   desalinhamento. Mesma largura e mesmo padding de .gh-container. */
.gh-repo-header-inner { max-width: 1400px; margin: 0 auto; padding: 0 24px; }
.gh-repo-desc { font-size: 13px; color: var(--husky-smoke); max-width: 720px; }
.gh-repo-breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 18px; font-weight: 600; margin-bottom: 16px;
}
.gh-repo-breadcrumb .ns   { color: var(--husky-smoke); font-weight: 400; }
.gh-repo-breadcrumb .sep  { color: var(--husky-muted); font-weight: 300; }
.gh-repo-breadcrumb .repo-name { color: var(--husky-orange); }

.gh-repo-tabs { display: flex; margin-top: 8px; gap: 2px; }
.gh-repo-tab {
  padding: 10px 14px; font-size: 13px; color: var(--husky-smoke);
  border-bottom: 2px solid transparent; text-decoration: none;
  display: flex; align-items: center; gap: 6px;
  transition: color 0.15s; border-radius: 6px 6px 0 0;
}
.gh-repo-tab:hover { color: var(--husky-snow); text-decoration: none; background: var(--husky-veil); }
.gh-repo-tab.active { color: var(--husky-snow); border-bottom-color: var(--husky-orange); }
/* The "More" tab is a <button> (it opens a menu) — strip the UA chrome so it
   sits on the same baseline as the anchor tabs. */
button.gh-repo-tab { background: none; border: none; border-bottom: 2px solid transparent; font: inherit; cursor: pointer; }
button.gh-repo-tab:hover { background: var(--husky-veil); }
.gh-tab-count {
  background: var(--husky-surface); border: 1px solid var(--husky-border);
  border-radius: 10px; padding: 0 6px; font-size: 11px;
  color: var(--husky-smoke); font-family: var(--font-label);
}

/* ── File tree ── */
.gh-filetree { border: 1px solid var(--husky-border); border-radius: 8px; overflow: hidden; margin-top: 16px; }
.gh-filetree-header {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px;
  background: var(--husky-card); border-bottom: 1px solid var(--husky-border);
  font-size: 13px;
}
.gh-filetree-row {
  display: grid; grid-template-columns: var(--gh-filetree-name-width, 220px) 1fr 170px; align-items: center;
  padding: 7px 16px; border-bottom: 1px solid rgba(28,45,69,0.6);
  font-size: 13px; gap: 16px; text-decoration: none;
  color: var(--husky-text); background: var(--husky-shell);
  transition: background 0.1s;
}
.gh-filetree-columns {
  display: grid; grid-template-columns: var(--gh-filetree-name-width, 220px) 1fr 170px; gap: 16px;
  padding: 8px 16px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--husky-smoke);
  background: var(--husky-card); border-bottom: 1px solid var(--husky-border);
}
.gh-filetree-row:last-child { border-bottom: none; }
.gh-filetree-row:hover { background: var(--husky-night); text-decoration: none; }
.gh-filetree-name { display: flex; align-items: center; gap: 8px; color: var(--husky-text); min-width: 0; }
.gh-filetree-name svg { color: var(--husky-muted); flex-shrink: 0; }
.gh-filetree-name.dir svg { color: var(--husky-ice); }
.gh-filetree-name.dir { color: var(--husky-ice); }
.gh-filetree-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.gh-filetree-icon { flex-shrink: 0; }
.gh-repo-stat { display: inline-flex; align-items: center; gap: 6px; }
.gh-filetree-msg  { color: var(--husky-smoke); font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gh-filetree-time { color: var(--husky-muted); font-size: 12px; white-space: nowrap; font-family: var(--font-label); }

/* ── Breadcrumb ── */
.gh-breadcrumb {
  display: flex; align-items: center; gap: 4px; font-size: 13px;
  font-family: var(--font-code); padding: 10px 16px;
  background: var(--husky-card); border-bottom: 1px solid var(--husky-border);
}
.gh-breadcrumb a { color: var(--husky-ice); }
.gh-breadcrumb a:hover { color: var(--husky-snow); }
.gh-breadcrumb .sep     { color: var(--husky-muted); }
.gh-breadcrumb .current { color: var(--husky-snow); }

/* ── Code blob ── */
.gh-blob { border: 1px solid var(--husky-border); border-radius: 8px; overflow: hidden; margin-top: 16px; }
/* "Last commit touching this file" strip above the blob header (F2). */
.gh-blob-lastcommit {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; font-size: 12.5px;
  background: var(--husky-veil);
  border: 1px solid var(--husky-border); border-bottom: none;
  border-radius: 8px 8px 0 0;
  color: var(--husky-smoke);
}
.gh-blob-lastcommit svg { color: var(--husky-muted); flex-shrink: 0; }
.gh-blob-lastcommit .msg {
  color: var(--husky-text); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gh-blob-lastcommit .msg:hover { color: var(--husky-sunset); }
.gh-blob-lastcommit .sha {
  font-family: var(--font-mono); font-size: 11px;
  background: var(--husky-surface); border-radius: 4px; padding: 1px 6px;
}
.gh-blob-lastcommit .when { margin-left: auto; white-space: nowrap; font-family: var(--font-label); font-size: 11.5px; color: var(--husky-muted); }
.gh-blob-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: var(--husky-card);
  border-bottom: 1px solid var(--husky-border);
  font-size: 12px; color: var(--husky-smoke);
}
.gh-blob-toc { position: relative; }
.gh-blob-toc .gh-btn { display: inline-flex; align-items: center; gap: 4px; }
.gh-blob-toc .gh-menu-item { display: block; overflow: hidden; text-overflow: ellipsis; }
/* Heading anchors (markdown blob TOC targets) — the empty <a> commonmarker
   emits must not eat a line, and the target must clear the sticky topbar. */
.gh-markdown h1, .gh-markdown h2, .gh-markdown h3,
.gh-markdown h4, .gh-markdown h5, .gh-markdown h6 { scroll-margin-top: 72px; }
.gh-markdown .anchor { float: left; padding-right: 4px; margin-left: -4px; }
.gh-blob-code { overflow-x: auto; background: var(--husky-night); }
.gh-blob-table { width: 100%; border-collapse: collapse; font-family: var(--font-code); font-size: 13px; line-height: 1.6; }
.gh-blob-table td { padding: 0; vertical-align: top; }
.gh-line-num {
  user-select: none; text-align: right; padding: 0 16px;
  color: var(--husky-muted); min-width: 52px;
  border-right: 1px solid var(--husky-border);
  cursor: pointer; font-family: var(--font-label);
}
.gh-line-num:hover { color: var(--husky-smoke); }
.gh-line-code { padding: 0 16px; white-space: pre; color: var(--husky-text); }
.gh-blob-table tr:hover .gh-line-code { background: rgba(91,155,213,0.04); }
/* githusky-34: blame gutter — one meta cell spans its whole hunk */
.gh-blame-meta {
  vertical-align: top; padding: 4px 12px; min-width: 190px;
  border-right: 1px solid var(--husky-border); background: var(--husky-veil);
  font-family: var(--font-label);
}

/* ── Diff ── */
.gh-diff-file { border: 1px solid var(--husky-border); border-radius: 8px; margin-bottom: 16px; overflow: hidden; }
.gh-diff-header {
  padding: 10px 16px; background: var(--husky-card);
  border-bottom: 1px solid var(--husky-border);
  font-family: var(--font-code); font-size: 12px; color: var(--husky-text);
}
.gh-diff-table { width: 100%; border-collapse: collapse; font-family: var(--font-code); font-size: 12px; line-height: 1.5; }
.gh-diff-table td { padding: 1px 16px; vertical-align: top; white-space: pre; }
.gh-diff-table .ln { min-width: 40px; text-align: right; color: var(--husky-muted); user-select: none; }
.gh-diff-table tr.add { background: rgba(34,197,94,0.10); }
.gh-diff-table tr.add td { color: #86efac; }
.gh-diff-table tr.del { background: rgba(239,68,68,0.10); }
.gh-diff-table tr.del td { color: #fca5a5; }
.gh-diff-table tr.hunk { background: rgba(91,155,213,0.12); }
.gh-diff-table tr.hunk td { color: #7eb8d4; font-style: italic; }

/* ── Code review (githusky-15) ── */
.gh-diff-line-btn:hover { cursor: pointer; background: rgba(232,69,24,0.15); }
.gh-diff-comment-form-row td { background: var(--husky-card); padding: 10px 16px; white-space: normal; }
.gh-diff-comment-form textarea { min-height: 60px; }
.gh-diff-thread { background: var(--husky-card); padding: 10px 16px; white-space: normal; border-top: 1px solid var(--husky-border); border-bottom: 1px solid var(--husky-border); }
.gh-diff-thread.resolved { opacity: 0.6; }
.gh-diff-comment { padding: 6px 0; }
.gh-diff-comment + .gh-diff-comment { border-top: 1px solid var(--husky-border); }

/* ── Commits ── */
.gh-commit-item {
  display: grid; grid-template-columns: 1fr auto;
  align-items: start; padding: 14px 16px;
  border-bottom: 1px solid var(--husky-border); gap: 16px;
}
.gh-commit-item:last-child { border-bottom: none; }
.gh-commit-title { font-size: 13px; color: var(--husky-snow); margin-bottom: 4px; }
.gh-commit-title a { color: var(--husky-snow); }
.gh-commit-title a:hover { color: var(--husky-orange); text-decoration: none; }
.gh-commit-meta { font-size: 12px; color: var(--husky-smoke); }
.gh-commit-sha {
  font-family: var(--font-code); font-size: 12px; color: var(--husky-ice);
  text-decoration: none; background: var(--husky-surface);
  padding: 3px 8px; border-radius: 4px; border: 1px solid var(--husky-border);
}
.gh-commit-sha:hover { color: var(--husky-snow); text-decoration: none; }

/* Commit graph (lanes SVG + fixed-height rows share the same 56px rhythm) */
.gh-graph-wrap { display: flex; align-items: stretch; padding: 16px 0; }
.gh-graph-svg { flex: none; display: block; margin-left: 8px; }
.gh-graph-rows { flex: 1; min-width: 0; }
.gh-graph-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: 16px; height: 56px; padding: 0 16px 0 8px;
  border-bottom: 1px solid var(--husky-border);
}
.gh-graph-row:last-child { border-bottom: none; }
.gh-graph-title { display: flex; align-items: center; gap: 8px; min-width: 0; margin-bottom: 2px; }
.gh-graph-title > a:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gh-ref-chip {
  flex: none; font-family: var(--font-code); font-size: 10px;
  padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--husky-border); color: var(--husky-ice);
  background: var(--husky-surface); text-decoration: none;
}
.gh-ref-chip:hover { color: var(--husky-snow); text-decoration: none; }
.gh-ref-chip.current { border-color: var(--husky-orange); color: var(--husky-orange); }

/* ── KPI stat tiles (global planning pages) ── */
.gh-kpi-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px; margin-bottom: 16px;
}
.gh-kpi {
  background: var(--husky-card); border: 1px solid var(--husky-border);
  border-radius: 10px; padding: 14px 16px; min-width: 0;
}
.gh-kpi-label {
  font-family: var(--font-label); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--husky-muted); margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
}
.gh-kpi-value {
  font-family: var(--font-display); font-size: 26px; font-weight: 700;
  color: var(--husky-snow); line-height: 1.1;
}
.gh-kpi-value .unit { font-size: 14px; font-weight: 600; color: var(--husky-smoke); margin-left: 2px; }
.gh-kpi-sub { font-size: 12px; color: var(--husky-smoke); margin-top: 5px; }
.gh-kpi-meter {
  height: 4px; border-radius: 2px; background: var(--husky-surface);
  overflow: hidden; margin-top: 8px;
}
.gh-kpi-meter > div { height: 100%; border-radius: 2px; background: var(--husky-orange); }
.gh-kpi-meter.ok > div { background: var(--husky-ok); }

/* ── Activity timeline ── */
.gh-tl-day {
  font-family: var(--font-label); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--husky-muted);
  padding: 14px 16px 6px;
}
.gh-tl-item {
  display: flex; gap: 12px; padding: 8px 16px; position: relative;
}
.gh-tl-item::before {
  content: ""; position: absolute; left: 29px; top: 34px; bottom: -8px;
  width: 2px; background: var(--husky-border);
}
.gh-tl-item:last-child::before, .gh-tl-item.day-last::before { display: none; }
.gh-tl-dot {
  width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--husky-surface); border: 1px solid var(--husky-border);
  color: var(--husky-smoke); position: relative; z-index: 1;
}
.gh-tl-dot.push  { color: var(--husky-orange); }
.gh-tl-dot.merge { color: var(--husky-purple); }
.gh-tl-dot.issue { color: var(--husky-ok); }
.gh-tl-dot.pr    { color: var(--husky-sunset); }
.gh-tl-dot.repo  { color: var(--husky-snow); }
.gh-tl-body { flex: 1; min-width: 0; padding-top: 4px; font-size: 13px; color: var(--husky-smoke); }
.gh-tl-body a { color: var(--husky-snow); }
.gh-tl-body .repo-ref { font-family: var(--font-mono); font-size: 12px; color: var(--husky-orange); }
.gh-tl-time { font-size: 11.5px; color: var(--husky-muted); white-space: nowrap; padding-top: 6px; }

/* Activity: per-type distribution (micro horizontal bars, one hue) */
.gh-type-row { display: flex; align-items: center; gap: 10px; padding: 7px 14px; font-size: 12.5px; color: var(--husky-smoke); }
.gh-type-row .n { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--husky-snow); min-width: 28px; text-align: right; }
.gh-type-row .lbl { min-width: 0; flex-basis: 110px; flex-shrink: 0; display: flex; align-items: center; gap: 6px; }
.gh-type-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--husky-surface); overflow: hidden; }
.gh-type-bar > div { height: 100%; border-radius: 3px; background: var(--husky-orange); }

/* ── Milestone cards ── */
.gh-ms-card { padding: 16px; border-bottom: 1px solid var(--husky-border); }
.gh-ms-card:last-child { border-bottom: none; }
.gh-ms-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.gh-ms-title { font-size: 14px; font-weight: 600; }
.gh-ms-title a { color: var(--husky-snow); }
.gh-ms-due {
  margin-left: auto; font-size: 11.5px; color: var(--husky-smoke);
  display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid var(--husky-border); border-radius: 999px; padding: 2px 10px;
}
.gh-ms-due.overdue { color: var(--husky-err); border-color: var(--husky-err); }
.gh-ms-progress { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.gh-ms-progress .track { flex: 1; height: 8px; border-radius: 4px; background: var(--husky-surface); overflow: hidden; }
.gh-ms-progress .track > div { height: 100%; border-radius: 4px; background: var(--husky-ok); }
.gh-ms-progress .pct { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--husky-snow); min-width: 40px; text-align: right; }
.gh-ms-meta { font-size: 12px; color: var(--husky-smoke); margin-top: 6px; }
.gh-ms-sprints { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.gh-sprint-chip.current { border-color: var(--husky-orange); color: var(--husky-orange); }

/* ── Issues / PRs ── */
.gh-issue-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--husky-border);
}
.gh-issue-item:last-child { border-bottom: none; }
.gh-issue-icon { margin-top: 2px; flex-shrink: 0; }
.gh-issue-icon.open   { color: var(--husky-ok); }
.gh-issue-icon.pr-open   { color: var(--husky-sunset); }
.gh-issue-icon.pr-merged { color: var(--husky-purple); }
.gh-issue-icon.closed { color: var(--husky-muted); }
.gh-issue-title { font-size: 13px; color: var(--husky-snow); margin-bottom: 3px; }
.gh-issue-title a { color: var(--husky-snow); }
.gh-issue-title a:hover { color: var(--husky-orange); }
.gh-issue-meta { font-size: 12px; color: var(--husky-smoke); }

.gh-label-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gh-label-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 20px;
  font-size: 11px; font-weight: 500; font-family: var(--font-label);
  background: var(--husky-surface); border: 1px solid var(--husky-border); color: var(--husky-text);
}
.gh-label-chip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── Badges — single reusable pill component, rendered by the status_badge
   helper (app/helpers/application_helper.rb). variant picks bg/border/color
   from tokenized semantic colors; .gh-badge-open/closed/merged are kept as
   aliases so any not-yet-migrated call site still renders correctly. ── */
.gh-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; font-family: var(--font-label); letter-spacing: 0.03em; }
.gh-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.gh-badge-anim-pulse { animation: ghPulse 1.4s ease-in-out infinite; }
.gh-badge-anim-spin { width: 10px; height: 10px; border-radius: 50%; background: transparent !important; border: 2px solid currentColor; opacity: 0.3; border-top-color: currentColor; opacity: 1; animation: ghSpin 0.8s linear infinite; }
.gh-badge-ok,     .gh-badge-open   { background: var(--husky-ok-dim);      color: #86EFAC; border: 1px solid rgba(34,197,94,0.28); }
.gh-badge-warn                     { background: var(--husky-warn-dim);    color: #FCD34D; border: 1px solid rgba(245,158,11,0.28); }
.gh-badge-err,    .gh-badge-closed { background: var(--husky-err-dim);     color: #FCA5A5; border: 1px solid rgba(239,68,68,0.28); }
.gh-badge-neutral                  { background: var(--husky-neutral-dim); color: #9AA6B0; border: 1px solid rgba(110,118,129,0.3); }
.gh-badge-purple, .gh-badge-merged { background: var(--husky-purple-dim);  color: #C9A3FC; border: 1px solid rgba(163,113,247,0.3); }
.gh-badge-peach                    { background: var(--husky-peach-dim);  color: var(--husky-peach); border: 1px solid rgba(255,228,214,0.22); }
.gh-badge-glow                     { background: rgba(232,69,24,0.16); color: #FFAD8F; border: 1px solid rgba(232,69,24,0.4); box-shadow: 0 0 12px rgba(232,69,24,0.18); }
.gh-badge-sunset                   { background: rgba(255,122,77,0.12); color: #FFB394; border: 1px solid rgba(255,122,77,0.28); }
.gh-mention { color: var(--husky-ice); font-weight: 500; }
.gh-mention:hover { color: var(--husky-snow); text-decoration: none; }
.gh-code-menu-label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--husky-smoke); margin: 4px 2px 6px; }

/* ══════════════════════════════════════════════════
   FORMS
   ══════════════════════════════════════════════════ */
.gh-form-group { margin-bottom: 20px; }
.gh-form-label {
  display: block; font-size: 13px; font-weight: 500;
  color: var(--husky-snow); margin-bottom: 6px;
}
.gh-form-input, .gh-form-textarea, .gh-form-select {
  width: 100%; background: var(--husky-night);
  border: 1px solid var(--husky-border); border-radius: 6px;
  color: var(--husky-text); padding: 8px 12px; font-size: 13px;
  font-family: var(--font-body); outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  /* Native <input type=date/time> popups ignore page CSS — this tells the
     browser to render its own calendar/clock widget chrome in dark mode
     instead of the default light one. */
  color-scheme: dark;
}
.gh-form-input:focus, .gh-form-textarea:focus, .gh-form-select:focus {
  border-color: var(--husky-orange);
  box-shadow: var(--husky-glow-sm);
}
.gh-form-textarea  { min-height: 120px; resize: vertical; }
.gh-form-hint  { font-size: 12px; color: var(--husky-smoke); margin-top: 4px; }
.gh-form-error { font-size: 12px; color: var(--husky-err);   margin-top: 4px; }

/* ── Markdown ── */
.gh-readme { margin-top: 20px; border: 1px solid var(--husky-border); border-radius: 8px; overflow: hidden; }
.gh-readme-header {
  padding: 10px 16px; background: var(--husky-card);
  border-bottom: 1px solid var(--husky-border);
  font-size: 13px; font-weight: 600; color: var(--husky-snow);
  display: flex; align-items: center; gap: 6px;
}
.gh-readme-body { padding: 24px; background: var(--husky-shell); }
.gh-markdown h1, .gh-markdown h2, .gh-markdown h3 { color: var(--husky-snow); margin: 1.2em 0 0.6em; }
.gh-markdown h1 { font-size: 1.8em; padding-bottom: 0.3em; border-bottom: 1px solid var(--husky-border); }
.gh-markdown h2 { font-size: 1.4em; padding-bottom: 0.2em; border-bottom: 1px solid var(--husky-border); }
.gh-markdown p  { margin-bottom: 1em; line-height: 1.7; }
.gh-markdown ul, .gh-markdown ol { margin: 0.5em 0 1em 1.5em; }
.gh-markdown li { margin-bottom: 0.3em; }
.gh-markdown code { background: var(--husky-surface); padding: 2px 6px; border-radius: 4px; font-family: var(--font-code); font-size: 0.9em; color: #fca5a5; }
.gh-markdown pre { background: var(--husky-night); border: 1px solid var(--husky-border); border-radius: 6px; padding: 16px; overflow-x: auto; margin: 1em 0; }
.gh-markdown pre code { background: none; padding: 0; color: var(--husky-text); }
.gh-markdown blockquote { border-left: 3px solid var(--husky-orange); padding-left: 16px; color: var(--husky-smoke); margin: 1em 0; background: rgba(232,69,24,0.05); padding: 8px 16px; border-radius: 0 4px 4px 0; }
.gh-markdown table { width: 100%; border-collapse: collapse; margin: 1em 0; }
.gh-markdown th, .gh-markdown td { padding: 8px 12px; border: 1px solid var(--husky-border); }
.gh-markdown th { background: var(--husky-surface); color: var(--husky-snow); font-weight: 600; }
.gh-markdown a  { color: var(--husky-ice); }
.gh-markdown a:hover { color: var(--husky-snow); }
.gh-markdown hr { border: none; border-top: 1px solid var(--husky-border); margin: 1.5em 0; }
.gh-markdown img { max-width: 100%; border-radius: 6px; }

/* ── Clone box ── */
.gh-clone-box { display: flex; align-items: center; gap: 8px; margin: 12px 0; }
.gh-clone-url {
  flex: 1; background: var(--husky-night); border: 1px solid var(--husky-border);
  border-radius: 6px; color: var(--husky-text); padding: 5px 10px;
  font-family: var(--font-code); font-size: 12px; outline: none;
}

/* ── SSH Keys ── */
.gh-key-table { width: 100%; border-collapse: collapse; }
.gh-key-table th, .gh-key-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--husky-border); font-size: 13px; }
.gh-key-table th { color: var(--husky-smoke); font-weight: 500; font-family: var(--font-label); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
.gh-key-fingerprint { font-family: var(--font-code); font-size: 12px; color: var(--husky-ice); }

/* ── Profile ── */
.gh-profile { display: grid; grid-template-columns: 296px 1fr; gap: 32px; max-width: 1180px; margin: 0 auto; padding: 32px 24px 48px; }
.gh-profile-sidebar { min-width: 0; }
.gh-profile-avatar {
  width: 240px; max-width: 100%; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid var(--husky-border); background: var(--husky-card);
}
.gh-profile-name     { font-size: 24px; font-weight: 700; color: var(--husky-snow); margin-top: 16px; font-family: var(--font-display); line-height: 1.2; }
.gh-profile-username { font-size: 18px; font-weight: 400; color: var(--husky-smoke); margin-top: 2px; font-family: var(--font-label); }
.gh-profile-pronouns { font-size: 13px; color: var(--husky-muted); margin-left: 8px; font-weight: 400; }
.gh-profile-bio      { font-size: 14px; color: var(--husky-text); margin-top: 14px; line-height: 1.6; }

/* status pill — forge-warm */
.gh-status-pill {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; max-width: 100%;
  padding: 5px 12px; border-radius: 16px; font-size: 13px;
  background: var(--husky-surface); border: 1px solid var(--husky-border); color: var(--husky-text);
}
.gh-status-pill .emoji { font-size: 15px; line-height: 1; }
.gh-status-pill .msg   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* meta list */
.gh-profile-meta { margin-top: 18px; display: flex; flex-direction: column; gap: 9px; }
.gh-profile-meta-row { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--husky-text); min-width: 0; }
.gh-profile-meta-row svg { color: var(--husky-smoke); flex-shrink: 0; }
.gh-profile-meta-row a { color: var(--husky-ice); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gh-profile-meta-row a:hover { color: var(--husky-snow); }

/* social icons */
.gh-social-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.gh-social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid var(--husky-border); background: var(--husky-card); color: var(--husky-smoke);
  transition: color .12s, border-color .12s, background .12s;
}
.gh-social-link:hover { color: var(--husky-snow); border-color: var(--husky-line); background: var(--husky-surface); text-decoration: none; }
.gh-profile-actions { margin-top: 18px; }

/* organizations */
.gh-profile-orgs { margin-top: 20px; }
.gh-profile-orgs-title { font-size: 13px; font-weight: 600; color: var(--husky-snow); margin-bottom: 10px; }
.gh-org-avatars { display: flex; flex-wrap: wrap; gap: 8px; }
.gh-org-avatar { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--husky-border); background: var(--husky-card); transition: border-color .12s; }
.gh-org-avatar:hover { border-color: var(--husky-orange); }

/* popular repositories grid (profile overview) */
.gh-repo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gh-repo-grid-card { background: var(--husky-card); border: 1px solid var(--husky-border); border-radius: 8px; padding: 16px; transition: border-color .15s; }
.gh-repo-grid-card:hover { border-color: var(--husky-line); }
@media (max-width: 720px) { .gh-repo-grid { grid-template-columns: 1fr; } }

@media (max-width: 860px) {
  .gh-profile { grid-template-columns: 1fr; gap: 20px; padding: 24px 16px; }
  .gh-profile-avatar { width: 120px; }
}

/* ── Empty state ── */
/* Faded commit-graph flourish under the text — fills the dead space the
   same way Metabase's line-art footer does, but with our own git motif. */
.gh-empty {
  /* bottom padding reserves the flourish zone so long custom copy
     (e.g. snippets' help text) never overlaps the drawing */
  text-align: center; padding: 60px 24px 128px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='140' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='560' y2='0'%3E%3Cstop offset='0' stop-color='%23272F37' stop-opacity='0'/%3E%3Cstop offset='.25' stop-color='%23272F37'/%3E%3Cstop offset='.75' stop-color='%23272F37'/%3E%3Cstop offset='1' stop-color='%23272F37' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 100 H560' stroke='url(%23g)' stroke-width='1.5'/%3E%3Cpath d='M150 100 c25 0 25-48 50-48 H360 c25 0 25 48 50 48' stroke='url(%23g)' stroke-width='1.5'/%3E%3Cg fill='%23272F37'%3E%3Ccircle cx='90' cy='100' r='4'/%3E%3Ccircle cx='230' cy='52' r='4'/%3E%3Ccircle cx='330' cy='52' r='4'/%3E%3Ccircle cx='470' cy='100' r='4'/%3E%3C/g%3E%3Ccircle cx='280' cy='52' r='4' fill='%23E84518' opacity='.55'/%3E%3C/svg%3E") center bottom no-repeat;
}
.gh-empty-icon  { display: flex; justify-content: center; margin-bottom: 16px; color: var(--husky-muted); }
.gh-empty-title { font-size: 18px; font-weight: 600; color: var(--husky-snow); margin-bottom: 8px; }
.gh-empty-desc  { font-size: 13px; color: var(--husky-smoke); margin-bottom: 20px; }

/* ── Pagination ── */
.gh-pagination { display: flex; justify-content: center; gap: 4px; padding: 20px 0; }
.gh-pagination a, .gh-pagination span {
  padding: 6px 12px; border-radius: 6px; font-size: 13px;
  border: 1px solid var(--husky-border); background: var(--husky-card);
  color: var(--husky-text); text-decoration: none;
}
.gh-pagination a:hover { background: var(--husky-surface); color: var(--husky-snow); }
.gh-pagination .current { background: var(--husky-orange); border-color: var(--husky-orange); color: white; }
.gh-pagination .disabled { opacity: 0.4; }

/* ══════════════════════════════════════════════════
   AUTH PAGES
   ══════════════════════════════════════════════════ */
.gh-auth-page {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; min-height: 100vh; padding: 24px;
}
.gh-auth-card {
  width: 100%; max-width: 360px;
  background: var(--husky-card);
  border: 1px solid var(--husky-border);
  border-radius: 12px; padding: 32px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(91,155,213,0.08);
}
.gh-auth-title {
  font-family: var(--font-display); font-size: 20px; font-weight: 700;
  color: var(--husky-snow); text-align: center; margin-bottom: 24px;
}
.gh-auth-footer { margin-top: 16px; text-align: center; font-size: 12px; color: var(--husky-smoke); }

/* Commit-graph landscape pinned to the viewport bottom (Metabase-style).
   bg-graph.svg tiles horizontally: every lane crosses x=0/1600 at the same y. */
.gh-auth-scene > * { position: relative; z-index: 1; }
.gh-auth-bg {
  position: fixed; left: 0; right: 0; bottom: 0; height: 420px;
  z-index: 0; pointer-events: none;
  background: url("/bg-graph.svg") center bottom repeat-x;
  background-size: 1600px 420px;
  -webkit-mask-image: linear-gradient(to top, #000 62%, transparent);
  mask-image: linear-gradient(to top, #000 62%, transparent);
}

/* ══════════════════════════════════════════════════
   DASHBOARD
   ══════════════════════════════════════════════════ */
.gh-dashboard { display: grid; grid-template-columns: 1fr 320px; gap: 24px; max-width: 1400px; margin: 0 auto; padding: 24px; }
/* Full-bleed line-art landscape at the bottom of every page (wrapper
   injected in the layout around yield). Scrolls with the content: when
   the page fills up, the scenery yields the space (padding-bottom keeps
   items off the drawing). Scene picked per controller in the layout. */
.gh-page-scene {
  min-height: 100%;
  padding-bottom: 300px;
  background-position: center bottom;
  background-repeat: repeat-x;
  background-size: 1600px 380px;
}
.gh-scene-1 { background-image: url("/bg-graph-dash.svg"); }
.gh-scene-2 { background-image: url("/bg-graph.svg"); background-size: 1600px 420px; }
.gh-scene-3 { background-image: url("/bg-graph-3.svg"); }
.gh-scene-4 { background-image: url("/bg-graph-4.svg"); }
.gh-dash-layout {
  display: grid;
  grid-template-columns: 296px 1fr;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 24px 48px;
}

/* Sidebar column */
.gh-dash-sidebar { min-width: 0; }
.gh-dash-profile { margin-bottom: 20px; }
.gh-dash-profile-name { font-size: 16px; font-weight: 700; color: var(--husky-snow); margin-top: 12px; font-family: var(--font-display); }
.gh-dash-profile-user { font-size: 14px; color: var(--husky-smoke); font-family: var(--font-label); }
.gh-dash-profile-bio  { font-size: 13px; color: var(--husky-text); margin-top: 8px; line-height: 1.5; }
.gh-dash-sidebar-section { margin-top: 20px; }
.gh-dash-sidebar-heading {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 600; color: var(--husky-smoke);
  margin-bottom: 10px; font-family: var(--font-label);
  text-transform: uppercase; letter-spacing: 0.08em;
}
.gh-dash-new-repo {
  color: var(--husky-smoke); display: flex; align-items: center;
  padding: 2px 6px; border-radius: 4px; border: 1px solid var(--husky-border);
  background: var(--husky-card);
}
.gh-dash-new-repo:hover { color: var(--husky-snow); background: var(--husky-surface); }
.gh-dash-repo-search-wrap { margin-bottom: 10px; }
.gh-dash-repo-list { list-style: none; }
.gh-dash-repo-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 4px; border-radius: 6px;
  font-size: 13px; transition: background 0.1s;
}
.gh-dash-repo-item:hover { background: var(--husky-hover); }
.gh-dash-repo-link { color: var(--husky-text); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; flex: 1; min-width: 0; }
.gh-dash-repo-link:hover { color: var(--husky-orange); text-decoration: none; }
.gh-dash-repo-empty { color: var(--husky-muted); font-size: 12px; padding: 8px 0; }

/* Main column */
.gh-dash-main { min-width: 0; }
.gh-dash-section {
  background: var(--husky-card);
  border: 1px solid var(--husky-border);
  border-radius: 10px;
  margin-bottom: 20px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.gh-dash-section:hover { border-color: var(--husky-line); }
.gh-dash-section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--husky-border);
  background: var(--husky-veil);
}
.gh-dash-section-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--husky-snow);
}
.gh-dash-empty { padding: 24px 20px; font-size: 13px; color: var(--husky-smoke); }
.gh-dash-item {
  display: flex; gap: 12px;
  padding: 12px 20px; border-bottom: 1px solid rgba(28,45,69,0.6);
  font-size: 13px;
}
.gh-dash-item:last-child { border-bottom: none; }
.gh-dash-item-body { flex: 1; min-width: 0; }
.gh-dash-item-title a { color: var(--husky-snow); font-weight: 500; }
.gh-dash-item-title a:hover { color: var(--husky-orange); text-decoration: none; }
.gh-dash-item-meta { font-size: 12px; color: var(--husky-smoke); margin-top: 3px; }
.gh-dash-item-meta a { color: var(--husky-smoke); }
.gh-dash-item-meta a:hover { color: var(--husky-orange); }

/* ══════════════════════════════════════════════════
   CONTRIBUTION GRAPH — GitHub anatomy, ember scale
   ══════════════════════════════════════════════════ */
.gh-contrib-body { position: relative; padding: 14px 20px 14px; }
.gh-contrib-scroll { overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; }
/* 53 weeks × (10px + 3px gap) = 686px + 30px day rail — fits both the
   dashboard main column and the narrower profile card; anything narrower
   scrolls inside .gh-contrib-scroll. */
.gh-contrib-months {
  display: grid;
  grid-template-columns: repeat(53, 10px);
  gap: 3px;
  margin-left: 34px; margin-bottom: 4px;
  font-size: 10px; color: var(--husky-smoke);
  font-family: var(--font-label);
}
.gh-contrib-months span { overflow: visible; white-space: nowrap; line-height: 1.4; }
.gh-contrib-wrap { display: flex; gap: 4px; }
.gh-contrib-days {
  display: grid; grid-template-rows: repeat(7, 10px);
  gap: 3px; width: 30px; flex-shrink: 0;
  font-size: 9.5px; color: var(--husky-muted);
  font-family: var(--font-label); text-align: right;
}
.gh-contrib-days span { line-height: 10px; padding-right: 4px; }
.gh-contrib-grid { display: flex; gap: 3px; }
.gh-contrib-col { display: grid; grid-template-rows: repeat(7, 10px); gap: 3px; }
.gh-contrib-cell {
  width: 10px; height: 10px; border-radius: 2px;
  outline: 1px solid var(--husky-hover); outline-offset: -1px;
}
.gh-contrib-cell[data-level="x"] { visibility: hidden; }
.gh-contrib-cell[data-level="0"] { background: var(--husky-contrib-0); }
.gh-contrib-cell[data-level="1"] { background: var(--husky-contrib-1); }
.gh-contrib-cell[data-level="2"] { background: var(--husky-contrib-2); }
.gh-contrib-cell[data-level="3"] { background: var(--husky-contrib-3); }
.gh-contrib-cell[data-level="4"] { background: var(--husky-contrib-4); }
.gh-contrib-grid .gh-contrib-cell:hover { outline: 1px solid var(--husky-sunset); }
.gh-contrib-legend {
  display: flex; align-items: center; justify-content: flex-end; gap: 4px;
  margin-top: 8px;
  font-size: 10.5px; color: var(--husky-muted); font-family: var(--font-label);
}
.gh-contrib-tooltip {
  position: absolute; z-index: 30;
  transform: translate(-50%, -100%);
  background: var(--husky-surface); border: 1px solid var(--husky-line);
  border-radius: 6px; padding: 5px 10px;
  font-size: 11.5px; color: var(--husky-snow);
  white-space: nowrap; pointer-events: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* ── 2FA setup (QR + backup codes) ── */
.gh-qr-box {
  background: #FFF; border-radius: 10px; padding: 10px;
  width: 190px; height: 190px; flex-shrink: 0;
}
.gh-qr-box svg { width: 100%; height: 100%; display: block; }
.gh-backup-codes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px; max-width: 560px;
}
.gh-backup-codes code {
  background: var(--husky-surface); border: 1px solid var(--husky-border);
  border-radius: 6px; padding: 7px 10px; font-size: 12.5px;
  text-align: center; user-select: all;
}

/* ── Global pages (issues/MRs/activity/todos/milestones/snippets):
      main list + right context rail, mirroring the dashboard's grid. ── */
.gh-global-layout {
  display: grid;
  /* aside column = one KPI tile: the KPI row above is 4 tiles with 12px
     gaps ((100% - 3*12px)/4), so the right rail lines up flush under the
     4th tile instead of floating 24px off it. */
  grid-template-columns: minmax(0, 1fr) calc((100% - 36px) / 4);
  gap: 12px;
  align-items: start;
}
.gh-global-aside { position: sticky; top: 16px; }
.gh-global-aside .gh-dash-section { margin-bottom: 16px; }
.gh-aside-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 14px; font-size: 12.5px; color: var(--husky-text);
  text-decoration: none; border-bottom: 1px solid rgba(39,47,55,0.6);
}
.gh-aside-row:last-child { border-bottom: none; }
.gh-aside-row:hover { background: var(--husky-night); text-decoration: none; }
.gh-aside-row.active { background: rgba(232,69,24,0.10); color: var(--husky-snow); }
.gh-aside-row .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gh-aside-count {
  font-family: var(--font-mono); font-size: 10px;
  padding: 0 6px; border-radius: 10px;
  background: var(--husky-surface); border: 1px solid var(--husky-border);
  color: var(--husky-smoke);
}
.gh-aside-stat {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 8px 14px; border-bottom: 1px solid rgba(39,47,55,0.6);
  font-size: 12.5px; color: var(--husky-smoke);
}
.gh-aside-stat:last-child { border-bottom: none; }
.gh-aside-stat .v { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--husky-snow); }
@media (max-width: 980px) {
  .gh-global-layout { grid-template-columns: 1fr; }
  .gh-global-aside { position: static; }
}

/* ── Column drag handle (board settings) ── */
.gh-drag-handle {
  cursor: grab; color: var(--husky-muted); font-size: 14px;
  user-select: none; padding: 0 2px; flex-shrink: 0;
}
.gh-drag-handle:active { cursor: grabbing; }
.sortable-ghost { opacity: 0.4; }

/* ── Similar issues (new-issue form, githusky-24) ── */
.gh-similar-box {
  background: var(--husky-card); border: 1px solid var(--husky-border);
  border-radius: 8px; margin-bottom: 16px; overflow: hidden;
}
.gh-similar-heading {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-bottom: 1px solid var(--husky-border);
  background: var(--husky-veil);
  font-family: var(--font-label); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--husky-smoke);
}
.gh-similar-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; font-size: 13px; color: var(--husky-text);
  border-bottom: 1px solid rgba(39,47,55,0.6); text-decoration: none;
}
.gh-similar-item:last-child { border-bottom: none; }
.gh-similar-item:hover { background: var(--husky-night); text-decoration: none; }
.gh-similar-item .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.gh-similar-item .dot.open   { background: var(--husky-ok); }
.gh-similar-item .dot.closed { background: var(--husky-purple); }
.gh-similar-item .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gh-similar-item .n { font-family: var(--font-mono); font-size: 11px; color: var(--husky-muted); }

/* ── AI review summary card (PR show; populated by githusky-23) ── */
.gh-ai-summary {
  background: var(--husky-card);
  border: 1px solid var(--husky-border);
  border-left: 3px solid var(--husky-sunset);
  border-radius: 10px;
  overflow: hidden;
}
.gh-ai-summary-header {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 16px; border-bottom: 1px solid var(--husky-border);
  background: rgba(255,122,77,0.05);
  font-size: 13px; color: var(--husky-snow);
}
.gh-ai-summary-header svg { color: var(--husky-sunset); }
.gh-ai-summary-body { padding: 14px 16px; }

/* ── Screen-3 list filter bar (issues/PRs index card header) ── */
.gh-list-filter-bar {
  display: flex; align-items: center; gap: 18px;
  padding: 11px 20px; border-bottom: 1px solid var(--husky-border);
  background: var(--husky-veil);
  font-size: 12.5px;
}
.gh-list-state {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--husky-smoke); text-decoration: none;
}
.gh-list-state:hover { color: var(--husky-snow); text-decoration: none; }
.gh-list-state.active { color: var(--husky-snow); font-weight: 600; }
.gh-list-filter-selects { margin-left: auto; display: flex; gap: 8px; }
.gh-form-select-bare {
  width: auto; padding: 2px 8px; font-size: 11px;
  font-family: var(--font-label);
  background: transparent; border-color: transparent; color: var(--husky-smoke);
  color-scheme: dark;
}
.gh-form-select-bare:hover { color: var(--husky-snow); border-color: var(--husky-border); }
/* The native dropdown popup doesn't inherit page styles everywhere
   (Edge/Windows renders it OS-themed): pin option colors explicitly so the
   list can never come out white-on-white. */
.gh-form-select option, .gh-form-select-bare option {
  background: var(--husky-card); color: var(--husky-snow);
}

/* ── Pipeline tracker (Amazon-delivery-style stepper) ── */
.gh-pipe-row { padding: 14px 16px; border-bottom: 1px solid var(--husky-border); }
.gh-pipe-row:last-child { border-bottom: none; }
.gh-pipe-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.gh-pipe-log { margin-top: 10px; }
/* githusky-28: per-job sub-rows inside a pipeline row */
.gh-pipe-jobs {
  margin-top: 12px; border: 1px solid var(--husky-border); border-radius: 8px;
  background: var(--husky-veil);
}
.gh-pipe-job { padding: 8px 12px; border-bottom: 1px solid var(--husky-border); }
.gh-pipe-job:last-child { border-bottom: none; }
.gh-pipe-job-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gh-pipe-log-pre {
  margin-top: 8px; padding: 12px; max-height: 420px; overflow: auto;
  background: var(--husky-shell); border: 1px solid var(--husky-border); border-radius: 8px;
  font-family: var(--font-mono, monospace); font-size: 12px; line-height: 1.5;
  color: var(--husky-snow); white-space: pre-wrap; word-break: break-word;
}
.gh-tracker { display: flex; align-items: flex-start; max-width: 640px; }
.gh-tracker-step {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 92px; text-align: center;
}
.gh-tracker-dot {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--husky-border); background: var(--husky-surface);
  box-sizing: border-box;
}
.gh-tracker-step.done .gh-tracker-dot { border-color: var(--husky-orange); background: var(--husky-orange); }
.gh-tracker-step.current .gh-tracker-dot { border-color: var(--husky-orange); }
.gh-tracker-dot.pulse { animation: gh-tracker-pulse 1.2s ease-in-out infinite; border-color: var(--husky-orange); }
@keyframes gh-tracker-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,69,24,0.5); }
  50% { box-shadow: 0 0 0 6px rgba(232,69,24,0); }
}
.gh-tracker-step.outcome-ok .gh-tracker-dot { border-color: #3FB950; background: #3FB950; }
.gh-tracker-step.outcome-err .gh-tracker-dot { border-color: #F85149; background: #F85149; }
.gh-tracker-step.outcome-neutral .gh-tracker-dot { border-color: var(--husky-smoke); background: var(--husky-smoke); }
.gh-tracker-label { font-size: 11.5px; font-weight: 600; color: var(--husky-smoke); }
.gh-tracker-step.done .gh-tracker-label, .gh-tracker-step.current .gh-tracker-label { color: var(--husky-snow); }
.gh-tracker-time { font-size: 10.5px; color: var(--husky-muted); }
.gh-tracker-line {
  flex: 1; height: 2px; background: var(--husky-border); margin-top: 6px; min-width: 24px;
}
.gh-tracker-line.done { background: var(--husky-orange); }

/* ── Admin ── */
.gh-admin-stats {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px;
}
.gh-admin-stat {
  display: flex; flex-direction: column; gap: 2px; padding: 14px 16px;
  background: var(--husky-card); border: 1px solid var(--husky-border); border-radius: 10px;
}
.gh-admin-stat-icon { color: var(--husky-orange); }
.gh-admin-stat-value { font-size: 22px; font-weight: 700; color: var(--husky-snow); }
.gh-admin-stat-label { font-size: 11.5px; color: var(--husky-smoke); }
.gh-admin-matrix { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.gh-admin-matrix th, .gh-admin-matrix td {
  padding: 7px 12px; border-bottom: 1px solid var(--husky-border); text-align: center;
}
.gh-admin-matrix th:first-child, .gh-admin-matrix td:first-child { text-align: left; color: var(--husky-snow); }
.gh-admin-matrix th { color: var(--husky-smoke); font-weight: 600; }
.gh-admin-matrix td.yes { color: var(--husky-ok, #3FB950); }
.gh-admin-matrix td.no { color: var(--husky-muted); }
.gh-admin-provider {
  display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 220px;
  padding: 12px 14px; border: 1px solid var(--husky-border); border-radius: 10px;
  background: var(--husky-surface); cursor: pointer;
}
.gh-admin-provider.selected { border-color: var(--husky-orange); }

/* ── Help / FAQ ── */
.gh-help-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.gh-help-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 16px; border-radius: 10px;
  background: var(--husky-card); border: 1px solid var(--husky-border);
  text-decoration: none; transition: border-color .15s;
}
.gh-help-card:hover { border-color: var(--husky-orange); text-decoration: none; }
.gh-help-card-icon { color: var(--husky-orange); }
.gh-help-card-title { color: var(--husky-snow); font-weight: 600; font-size: 14px; }
.gh-help-card-desc {
  color: var(--husky-smoke); font-size: 12px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.gh-help-card-faq { border-style: dashed; }
.gh-help-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 900px) { .gh-help-shell { grid-template-columns: 1fr; } }
.gh-help-nav { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 2px; }
.gh-help-nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 6px;
  color: var(--husky-smoke); font-size: 13px; text-decoration: none;
}
.gh-help-nav-item:hover { color: var(--husky-snow); background: var(--husky-hover); text-decoration: none; }
.gh-help-nav-item.active { color: var(--husky-snow); background: rgba(232,69,24,0.12); font-weight: 600; }

/* Sprint chips on the global milestones list */
.gh-sprint-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--husky-border); background: var(--husky-surface);
  font-size: 11px; color: var(--husky-ice); text-decoration: none;
}
.gh-sprint-chip:hover { color: var(--husky-snow); border-color: var(--husky-smoke); text-decoration: none; }
.gh-sprint-chip.closed { opacity: 0.55; }

/* ══════════════════════════════════════════════════
   EXPLORE
   ══════════════════════════════════════════════════ */
.gh-explore-header { padding: 32px 24px 24px; max-width: 1400px; margin: 0 auto; }
.gh-explore-grid   { max-width: 1400px; margin: 0 auto; padding: 0 24px 24px; }
.gh-repo-card { padding: 16px; border-bottom: 1px solid rgba(28,45,69,0.6); }
.gh-repo-card:last-child { border-bottom: none; }
.gh-repo-card-row { display: flex; align-items: center; gap: 12px; }
.gh-repo-card-avatar { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.gh-repo-card-heading { min-width: 0; }
.gh-repo-card-name { font-size: 15px; font-weight: 600; color: var(--husky-orange); }
.gh-repo-card-name:hover { text-decoration: underline; }
.gh-repo-card-sub { font-size: 12px; color: var(--husky-smoke); margin-top: 2px; }
.gh-repo-card-sha { font-family: var(--font-mono, monospace); background: var(--husky-surface); border-radius: 4px; padding: 1px 5px; color: var(--husky-text); }
.gh-repo-card-desc { font-size: 13px; color: var(--husky-smoke); margin-top: 8px; }
.gh-repo-card-meta { display: flex; align-items: center; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--husky-muted); font-family: var(--font-label); }
.gh-repo-card-meta span { display: inline-flex; align-items: center; gap: 4px; }
.gh-lang-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.gh-lang-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 2px; }
.gh-lang-legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px;
  color: var(--husky-smoke); font-size: 11.5px; font-family: var(--font-label);
}
.gh-lang-legend > span { display: inline-flex; align-items: center; gap: 5px; }
/* Nas listagens a barra é fina e a legenda encosta nela — o card já tem
   os contadores acima, então ela não pode competir com o nome do repo. */
.gh-lang-compact { margin-top: 10px; }
/* Largura travada: full-bleed numa lista de repos lê como divisória, ainda
   mais em repo de uma linguagem só (barra sólida atravessando o card). */
.gh-lang-compact .gh-lang-bar { height: 5px; border-radius: 3px; max-width: 420px; }
.gh-lang-compact .gh-lang-legend { margin-top: 7px; gap: 4px 12px; font-size: 11px; }

/* ── Group list (/groups) ── */
.gh-group-card-main { min-width: 0; flex: 1; }
.gh-group-card-title { display: flex; align-items: center; gap: 8px; }
.gh-group-card-title a { font-size: 15px; font-weight: 600; color: var(--husky-orange); }
.gh-group-card-title a:hover { text-decoration: underline; }
.gh-group-card-role {
  font-size: 11px; padding: 2px 7px; border-radius: 10px;
  border: 1px solid var(--husky-border); color: var(--husky-smoke);
  font-family: var(--font-label);
}
.gh-group-card-stats {
  display: flex; align-items: center; gap: 16px; margin-top: 8px;
  font-size: 12px; color: var(--husky-muted); font-family: var(--font-label);
}
.gh-group-card-stats span { display: inline-flex; align-items: center; gap: 4px; }
.gh-avatar-letter {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; font-size: 18px; font-family: var(--font-label);
}

/* ── Group tree (chevron + avatar + type icon + name, nested subgroups/repos) ── */
.gh-group-summary, .gh-group-leaf {
  display: flex; align-items: center; gap: 8px;
  padding: 16px 16px 16px calc(16px + var(--gh-group-depth, 0) * 24px);
  border-bottom: 1px solid rgba(28,45,69,0.6);
}
.gh-group-summary { cursor: pointer; list-style: none; }
.gh-group-summary::-webkit-details-marker { display: none; }
.gh-group-summary:hover { background: var(--husky-veil); }

/* Depth is carried by the guide line, not by a stack of markers: one hairline
   per level, dropped at the parent's own disclosure column, so a subgroup four
   levels deep reads as four rails rather than four triangles. The marker left
   on each row only has to say open or closed, so it's the same stroked caret
   used by every menu in the app — the old one was a solid clip-path triangle,
   the single filled glyph in an interface drawn entirely in line art, and at
   10px a filled triangle is a blob. */
.gh-group-children { position: relative; }
.gh-group-children::before {
  content: ''; position: absolute; top: 0; bottom: 0;
  left: calc(16px + var(--gh-group-depth, 0) * 24px + 5px);
  width: 1px; background: var(--husky-border);
}
.gh-group-chevron {
  flex-shrink: 0; width: 10px; height: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--husky-muted);
  transform: rotate(-90deg);
  transition: transform 0.15s ease;
}
.gh-group-summary:hover .gh-group-chevron { color: var(--husky-snow); }
/* Reserves the same 10px column on rows that don't expand, so names stay in
   one vertical line whether or not a row has children. */
.gh-group-chevron-spacer { visibility: hidden; }
.gh-group-leaf-card { align-items: flex-start; padding-top: 12px; padding-bottom: 12px; }
.gh-group-leaf-card .gh-repo-card { flex: 1; min-width: 0; border: none; padding: 0; }
.gh-group-type-icon { flex-shrink: 0; }
details[open] > .gh-group-summary .gh-group-chevron { transform: rotate(0deg); }

@media (prefers-reduced-motion: reduce) {
  .gh-group-chevron { transition: none; }
}

/* ── Misc ── */
.gh-vis-badge {
  font-size: 11px; padding: 2px 7px; border-radius: 10px;
  border: 1px solid var(--husky-border); color: var(--husky-smoke);
  vertical-align: middle; font-family: var(--font-label);
}
.gh-ref-selector {
  background: var(--husky-surface); border: 1px solid var(--husky-border);
  border-radius: 6px; color: var(--husky-text); padding: 5px 10px;
  font-size: 13px; font-family: var(--font-code);
}

/* ══════════════════════════════════════════════════
   UTILITIES
   ══════════════════════════════════════════════════ */
.text-muted   { color: var(--husky-smoke); }
.text-snow    { color: var(--husky-snow); }
.text-orange  { color: var(--husky-orange); }
.text-ice     { color: var(--husky-ice); }
.text-ok      { color: var(--husky-ok); }
.text-err     { color: var(--husky-err); }
.text-sm      { font-size: 12px; }
.text-mono    { font-family: var(--font-code); }
.text-label   { font-family: var(--font-label); }
.d-flex       { display: flex; }
.align-center { align-items: center; }
/* Nome + anotação em corpo menor na mesma linha: centralizar caixas de
   alturas diferentes desencontra as bases e uma parece mais alta que a outra. */
.align-baseline { align-items: baseline; }
.gap-8  { gap: 8px; }
.gap-16 { gap: 16px; }
.mt-8   { margin-top: 8px; }
.mt-16  { margin-top: 16px; }
.mt-24  { margin-top: 24px; }
.mb-16  { margin-bottom: 16px; }
.mb-24  { margin-bottom: 24px; }
.ml-auto   { margin-left: auto; }
.w-full    { width: 100%; }
.fw-600    { font-weight: 600; }

/* ══════════════════════════════════════════════════
   ROUGE SYNTAX — Arctic Forge theme
   ══════════════════════════════════════════════════ */
.highlight .c, .highlight .cm, .highlight .cp,
.highlight .c1, .highlight .cs { color: #4A6A88; font-style: italic; }
.highlight .k, .highlight .kd, .highlight .kn,
.highlight .kp, .highlight .kr, .highlight .kt { color: #FF6B9D; }
.highlight .s, .highlight .s1, .highlight .s2,
.highlight .sb, .highlight .sd, .highlight .sh,
.highlight .si, .highlight .sx { color: #7EC8E3; }
.highlight .m, .highlight .mf, .highlight .mh,
.highlight .mi, .highlight .mo, .highlight .il { color: #A8D8FF; }
.highlight .nc, .highlight .ne, .highlight .nn { color: #FFB347; }
.highlight .nf, .highlight .nd { color: #C0A0FF; }
.highlight .na, .highlight .nb, .highlight .no,
.highlight .nl, .highlight .nv, .highlight .vc,
.highlight .vg, .highlight .vi { color: #80D4FF; }
.highlight .nt { color: #7EE8A2; }
.highlight .o, .highlight .ow { color: #E8A87C; }
.highlight .gi { color: #7EE8A2; }
.highlight .gd { color: #FF6B9D; }

/* ══════════════════════════════════════════════════
   SIDEBAR BRAND
   ══════════════════════════════════════════════════ */
.gh-sidebar-brand {
  display: flex; align-items: center; height: 56px;
  padding: 0 16px; flex-shrink: 0; overflow: hidden;
  border-bottom: 1px solid var(--husky-border);
}
.sidebar-collapsed .gh-sidebar-brand, .sb-collapsed .gh-sidebar .gh-sidebar-brand { padding: 0; justify-content: center; }
.gh-sidebar-brand a:hover { text-decoration: none; }
/* flex moved out of inline style so the collapsed rules above can hide it */
.gh-brand-label { display: flex; flex-direction: column; }

/* Heterochromia signature #4 — a literal nod: one ice dot, one ember dot,
   next to the wordmark. Logo file itself stays untouched. */
.gh-sidebar-heterochromia { display: inline-flex; gap: 3px; margin-left: 6px; }
.gh-sidebar-heterochromia span {
  width: 5px; height: 5px; border-radius: 50%;
}
.gh-sidebar-heterochromia span:first-child { background: var(--husky-ice); }
.gh-sidebar-heterochromia span:last-child { background: var(--husky-orange); }

/* ══════════════════════════════════════════════════
   TOP BAR
   ══════════════════════════════════════════════════ */
.gh-topbar {
  display: flex; align-items: center; gap: 12px;
  height: 56px; flex-shrink: 0; padding: 0 16px;
  background: var(--husky-night);
  border-bottom: 1px solid var(--husky-border);
  position: sticky; top: 0; z-index: 40;
}
.gh-topbar-icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 2px;
  height: 34px; min-width: 34px; padding: 0 7px; border-radius: 8px;
  color: var(--husky-text); background: transparent; border: 1px solid transparent;
  cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.gh-topbar-icon-btn:hover { background: var(--husky-card); color: var(--husky-snow); border-color: var(--husky-border); }

/* 2FA status shield — keeps its ok/err color through hover */
.gh-topbar-2fa,       .gh-topbar-2fa:hover       { color: var(--husky-err); }
.gh-topbar-2fa.is-on, .gh-topbar-2fa.is-on:hover { color: var(--husky-ok); }

.gh-topbar-search { position: relative; flex: 1; max-width: 420px; display: flex; align-items: center; }
.gh-topbar-search-icon { position: absolute; left: 11px; color: var(--husky-muted); pointer-events: none; }
.gh-topbar-search-input {
  width: 100%; height: 34px; padding: 0 12px 0 32px;
  background: var(--husky-shell); border: 1px solid var(--husky-border); border-radius: 8px;
  color: var(--husky-text); font-size: 13px; outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.gh-topbar-search-input::placeholder { color: var(--husky-muted); }
.gh-topbar-search-input:focus { border-color: var(--husky-orange); box-shadow: var(--husky-glow-sm); background: var(--husky-night); }

.gh-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.gh-topbar-caret { color: var(--husky-smoke); transition: transform .15s; }

.gh-user-trigger {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 3px;
  border-radius: 999px; border: 1px solid transparent; background: transparent; cursor: pointer;
  transition: background .12s, border-color .12s;
}
.gh-user-trigger:hover { background: var(--husky-card); border-color: var(--husky-border); }
.gh-user-trigger .gh-avatar-sm { width: 28px; height: 28px; }

/* ══════════════════════════════════════════════════
   DROPDOWN MENU (top-right)
   ══════════════════════════════════════════════════ */
.gh-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 50;
  background: var(--husky-card); border: 1px solid var(--husky-border);
  border-radius: 12px; overflow: hidden; padding: 6px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.55), 0 0 0 1px rgba(91,155,213,0.06);
}
.gh-menu-header { padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--husky-border); }
/* Section label inside a menu — same typographic role as the sidebar's
   section labels, so the grouping in the repo "More" menu reads the same way
   the sidebar's grouping does. No border: the whitespace does the dividing. */
.gh-menu-label {
  padding: 8px 10px 4px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--husky-muted);
  font-family: var(--font-label);
}
.gh-menu-label:first-child { padding-top: 4px; }
.gh-menu-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; font-size: 13px;
  color: var(--husky-text); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .1s, color .1s;
}
.gh-menu-item svg { color: var(--husky-smoke); flex-shrink: 0; }
.gh-menu-item:hover { background: var(--husky-surface); color: var(--husky-snow); text-decoration: none; }
.gh-menu-item:hover svg { color: var(--husky-snow); }
.gh-menu-sep { height: 1px; background: var(--husky-border); margin: 6px 4px; }

/* ══════════════════════════════════════════════════
   SETTINGS — profile editor
   ══════════════════════════════════════════════════ */
.gh-settings { max-width: 760px; margin: 0 auto; padding: 32px 24px 48px; }
.gh-settings-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--husky-snow); margin-bottom: 4px; }
/* Tailwind preflight turns svg into display:block — a leading icon() inside
   the title would land on its own line above the text. */
.gh-settings-title > svg { display: inline-block; vertical-align: -0.12em; margin-right: 4px; }
.gh-settings-sub   { font-size: 13px; color: var(--husky-smoke); margin-bottom: 24px; }
.gh-settings-section { margin-bottom: 24px; }
.gh-status-fields { display: grid; grid-template-columns: 96px 1fr; gap: 12px; }
.gh-social-input { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.gh-social-input-label {
  display: flex; align-items: center; gap: 8px; width: 130px; flex-shrink: 0;
  font-size: 13px; color: var(--husky-text);
}
.gh-social-input-label svg { color: var(--husky-smoke); }
.gh-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .gh-form-row, .gh-status-fields { grid-template-columns: 1fr; } }

/* member management rows */
.gh-member-row { display: flex; align-items: center; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--husky-border); }
.gh-member-row:last-child { border-bottom: none; }
.gh-member-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.gh-member-remove { margin: 0; }
.gh-toggle-field { display: flex; align-items: flex-start; gap: 10px; }
.gh-toggle-field input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--husky-orange); flex-shrink: 0; }

/* Settings area with left sub-nav (GitLab-style user settings) */
.gh-settings-shell { display: grid; grid-template-columns: 212px 1fr; gap: 32px; max-width: 1080px; margin: 0 auto; padding: 32px 24px 48px; }
.gh-settings-nav { display: flex; flex-direction: column; gap: 2px; align-self: start; position: sticky; top: 80px; }
.gh-settings-nav-title { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--husky-muted); font-family: var(--font-label); padding: 4px 12px 8px; }
.gh-settings-nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; font-size: 13px; color: var(--husky-text); text-decoration: none; transition: background .1s, color .1s; }
.gh-settings-nav-item svg { color: var(--husky-smoke); flex-shrink: 0; }
.gh-settings-nav-item:hover { background: var(--husky-card); color: var(--husky-snow); text-decoration: none; }
.gh-settings-nav-item.active { background: rgba(232,69,24,0.10); color: var(--husky-snow); font-weight: 500; }
.gh-settings-nav-item.active svg { color: var(--husky-orange); }
.gh-settings-content { min-width: 0; }
@media (max-width: 800px) {
  .gh-settings-shell { grid-template-columns: 1fr; gap: 16px; }
  .gh-settings-nav { position: static; flex-direction: row; flex-wrap: wrap; }
}

/* ── Wiki (per-repository page tree) ── */
/* Árvore e página em molduras próprias: soltas sobre o fundo escuro (com a
   cena em line-art atrás) elas liam como um bloco só de conteúdo. */
.gh-wiki-shell { display: grid; grid-template-columns: 280px 1fr; gap: 20px; padding: 16px 0 48px; }
.gh-wiki-sidebar, .gh-wiki-content {
  background: var(--husky-card); border: 1px solid var(--husky-border); border-radius: 10px;
  /* Mesma altura mínima nas duas: wiki curta com uma moldura alta e outra
     baixinha lê como desalinho, não como hierarquia. */
  min-height: 60vh;
}
.gh-wiki-sidebar { align-self: start; position: sticky; top: 80px; padding: 14px 16px; }
.gh-wiki-content { min-width: 0; padding: 20px 24px; }
@media (max-width: 800px) {
  .gh-wiki-shell { grid-template-columns: 1fr; gap: 16px; }
  .gh-wiki-sidebar { position: static; }
}

/* ── Issue board (kanban) ── */
.gh-board { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 16px; }
.gh-board-column { flex: 0 0 280px; background: var(--husky-card); border: 1px solid var(--husky-border); border-radius: 8px; display: flex; flex-direction: column; max-height: calc(100vh - 260px); }
.gh-board-column-header { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--husky-border); font-size: 13px; font-weight: 600; color: var(--husky-snow); }
.gh-board-column-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.gh-board-column-cards { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.gh-board-card { display: block; background: var(--husky-night); border: 1px solid var(--husky-border); border-radius: 6px; padding: 10px 12px; cursor: grab; text-decoration: none; color: inherit; }
.gh-board-card:hover { border-color: var(--husky-line); text-decoration: none; }
.gh-board-card-title { font-size: 13px; color: var(--husky-snow); margin-bottom: 6px; }
.gh-board-card-meta { display: flex; align-items: center; gap: 8px; }
/* Dentro do frame do dashboard o .gh-board herdava só padding-bottom, então as
   colunas encostavam na divisória do título e as margens saíam desiguais. */
.gh-board-mini { padding: 16px 20px; gap: 12px; }
.gh-board-mini .gh-board-column { flex: 0 0 200px; max-height: none; background: var(--husky-veil); }
.gh-board-mini .gh-board-column-header { padding: 8px 10px; }
.gh-board-mini .gh-board-column-cards { padding: 8px; gap: 6px; }
.gh-board-mini .gh-board-card { padding: 8px 10px; cursor: pointer; }
.gh-board-mini .gh-board-card-title { font-size: 12px; margin-bottom: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gh-board-card-ghost { opacity: 0.4; }
.gh-board-card-dragging { cursor: grabbing; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .gh-dash-layout { grid-template-columns: 1fr; }
  .gh-dash-sidebar { display: none; }
}

/* ══════════════════════════════════════════════════
   LIGHT THEMES — art swaps & dark islands
   Tokens flip in tailwind/application.css; here we swap the backdrop
   artwork files and keep rouge-highlighted code on a dark island
   (the syntax palette is dark-tuned). ── */

[data-theme="orange-light"] .gh-auth-bg, [data-theme="ice-light"] .gh-auth-bg {
  background-image: url("/bg-graph-light.svg");
}
[data-theme="orange-light"] .gh-scene-1, [data-theme="ice-light"] .gh-scene-1 {
  background-image: url("/bg-graph-dash-light.svg");
}
[data-theme="orange-light"] .gh-scene-2, [data-theme="ice-light"] .gh-scene-2 {
  background-image: url("/bg-graph-light.svg");
}
[data-theme="orange-light"] .gh-scene-3, [data-theme="ice-light"] .gh-scene-3 {
  background-image: url("/bg-graph-3-light.svg");
}
[data-theme="orange-light"] .gh-scene-4, [data-theme="ice-light"] .gh-scene-4 {
  background-image: url("/bg-graph-4-light.svg");
}
[data-theme="orange-light"] .gh-empty, [data-theme="ice-light"] .gh-empty {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='140' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='560' y2='0'%3E%3Cstop offset='0' stop-color='%23C6CFD8' stop-opacity='0'/%3E%3Cstop offset='.25' stop-color='%23C6CFD8'/%3E%3Cstop offset='.75' stop-color='%23C6CFD8'/%3E%3Cstop offset='1' stop-color='%23C6CFD8' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 100 H560' stroke='url(%23g)' stroke-width='1.5'/%3E%3Cpath d='M150 100 c25 0 25-48 50-48 H360 c25 0 25 48 50 48' stroke='url(%23g)' stroke-width='1.5'/%3E%3Cg fill='%23C6CFD8'%3E%3Ccircle cx='90' cy='100' r='4'/%3E%3Ccircle cx='230' cy='52' r='4'/%3E%3Ccircle cx='330' cy='52' r='4'/%3E%3Ccircle cx='470' cy='100' r='4'/%3E%3C/g%3E%3Ccircle cx='280' cy='52' r='4' fill='%23E84518' opacity='.55'/%3E%3C/svg%3E");
}

[data-theme="orange-light"] .gh-flash-notice,  [data-theme="ice-light"] .gh-flash-notice  { color: #15803D; }
[data-theme="orange-light"] .gh-flash-alert,   [data-theme="ice-light"] .gh-flash-alert   { color: #B91C1C; }
[data-theme="orange-light"] .gh-flash-warning, [data-theme="ice-light"] .gh-flash-warning { color: #92400E; }

/* Badge text: the dark-theme pastels (#86EFAC…) wash out on white — swap
   for saturated darks. warn gets brown text per the amber-on-white rule. */
[data-theme="orange-light"] .gh-badge-ok,      [data-theme="ice-light"] .gh-badge-ok,
[data-theme="orange-light"] .gh-badge-open,    [data-theme="ice-light"] .gh-badge-open    { color: #15803D; }
[data-theme="orange-light"] .gh-badge-warn,    [data-theme="ice-light"] .gh-badge-warn    { color: #92400E; }
[data-theme="orange-light"] .gh-badge-err,     [data-theme="ice-light"] .gh-badge-err,
[data-theme="orange-light"] .gh-badge-closed,  [data-theme="ice-light"] .gh-badge-closed  { color: #B91C1C; }
[data-theme="orange-light"] .gh-badge-neutral, [data-theme="ice-light"] .gh-badge-neutral { color: #4B5563; }
[data-theme="orange-light"] .gh-badge-purple,  [data-theme="ice-light"] .gh-badge-purple,
[data-theme="orange-light"] .gh-badge-merged,  [data-theme="ice-light"] .gh-badge-merged  { color: #6D28D9; }
[data-theme="orange-light"] .gh-badge-glow,    [data-theme="ice-light"] .gh-badge-glow    { color: #B32F0D; }
[data-theme="orange-light"] .gh-badge-sunset,  [data-theme="ice-light"] .gh-badge-sunset  { color: #C2410C; }

/* Dark islands: re-declare the dark tokens inside code surfaces so every
   descendant (line numbers, hunk headers, diff rows) reads dark again. */
[data-theme="orange-light"] .gh-markdown pre, [data-theme="ice-light"] .gh-markdown pre,
[data-theme="orange-light"] .gh-blob-code,    [data-theme="ice-light"] .gh-blob-code,
[data-theme="orange-light"] .gh-diff-table,   [data-theme="ice-light"] .gh-diff-table {
  color-scheme: dark;
  --husky-shell: #0A0D0F; --husky-night: #0F1419; --husky-card: #151A1F;
  --husky-surface: #1E252C; --husky-border: #272F37; --husky-line: #333D46;
  --husky-snow: #FAFAFA; --husky-text: #AEB9C2; --husky-smoke: #7D8891;
  --husky-muted: #4A545D; --husky-veil: rgba(255,255,255,0.02); --husky-hover: rgba(255,255,255,0.05);
  background: #0F1419;
}

/* ── Theme picker (user menu) ── */
.gh-theme-row { display: flex; align-items: center; gap: 8px; padding: 8px 16px; }
.gh-theme-row form { display: contents; }
.gh-theme-label { font-size: 11px; color: var(--husky-smoke); margin-right: auto; }
.gh-theme-swatch {
  width: 20px; height: 20px; border-radius: 50%; padding: 0;
  border: 1px solid var(--husky-line); cursor: pointer;
}
.gh-theme-swatch.active { box-shadow: 0 0 0 2px var(--husky-orange); }
.gh-theme-orange-dark  { background: linear-gradient(135deg, #0A0D0F 50%, #E84518 50%); }
.gh-theme-orange-light { background: linear-gradient(135deg, #F2F4F6 50%, #E84518 50%); }
.gh-theme-ice-dark     { background: linear-gradient(135deg, #0A0D0F 50%, #3B9EFF 50%); }
.gh-theme-ice-light    { background: linear-gradient(135deg, #F2F4F6 50%, #1D7FE8 50%); }

/* githusky-50 — faixa de sub-abas de uma superfície do repo. Fica colada nas
   tabs primárias, sem borda própria: é o segundo nível da mesma navegação,
   não um bloco novo. */
/* Banda da faixa: régua full-bleed como a borda do header. Padding vertical
   igual dos dois lados deixa os botões centrados entre as duas réguas. */
.gh-surface-band { border-top: 1px solid var(--husky-border); padding: 10px 0; margin-top: 8px; }
.gh-surface-tabs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  max-width: 1400px; margin: 0 auto; padding: 0 24px;
}

/* githusky-51 — barras por mês e ranking. Gráfico é layout, não biblioteca:
   coluna flex com altura em %, nada de canvas nem dependência nova. */
.gh-chart { display: flex; flex-direction: column; gap: 10px; }
.gh-chart-plot { display: flex; align-items: flex-end; gap: 6px; height: 160px; }
.gh-chart-col { flex: 1; display: flex; flex-direction: column; gap: 6px; height: 100%; min-width: 0; }
.gh-chart-bars { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 2px; }
.gh-chart-bar { flex: 1; min-height: 2px; border-radius: 2px 2px 0 0; background: var(--husky-orange); }
.gh-chart-bar.ok { background: var(--husky-ok); }
.gh-chart-bar.muted { background: var(--husky-line); }
.gh-chart-x {
  font-family: var(--font-label); font-size: 10px; color: var(--husky-muted);
  text-align: center; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis;
}
.gh-chart-legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11.5px;
  color: var(--husky-smoke); font-family: var(--font-label);
}
.gh-chart-legend > span { display: inline-flex; align-items: center; gap: 5px; }
.gh-chart-swatch.accent { background: var(--husky-orange); }
.gh-chart-swatch.ok { background: var(--husky-ok); }

.gh-rank-row {
  display: grid; grid-template-columns: minmax(120px, 1fr) 2fr auto;
  align-items: center; gap: 12px; padding: 6px 0; font-size: 13px;
}
.gh-rank-row + .gh-rank-row { border-top: 1px solid var(--husky-border); }
.gh-rank-name { color: var(--husky-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gh-rank-track { height: 6px; border-radius: 3px; background: var(--husky-surface); overflow: hidden; }
.gh-rank-track > span { display: block; height: 100%; background: var(--husky-orange); border-radius: 3px; }
.gh-rank-track.err > span { background: var(--husky-err); }
.gh-rank-value {
  font-family: var(--font-label); font-variant-numeric: tabular-nums;
  color: var(--husky-snow); font-size: 12.5px;
}

/* githusky-53 — nó do grafo ligado à linha do commit. O par acende junto
   (Stimulus commit-graph), e o nó inteiro é link pro commit. */
.gh-graph-node { cursor: pointer; }
.gh-graph-node .dot { transition: r .1s ease, stroke-width .1s ease; }
.gh-graph-node:hover .dot, .gh-graph-node.hl .dot { r: 7; stroke-width: 3; }
.gh-graph-row.hl { background: var(--husky-hover); }
@media (prefers-reduced-motion: reduce) {
  .gh-graph-node .dot { transition: none; }
}

/* githusky-54 — ações do repo na ponta direita da faixa. Ícone + número; o
   rótulo virou tooltip, e a linha que elas ocupavam no topo sumiu. */
.gh-repo-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.gh-repo-actions form { display: inline-block; margin: 0; }
.gh-btn-icon { padding-left: 9px; padding-right: 9px; }

/* githusky-55 — linha de lista genérica (flags, alertas, erros) e blocos de
   detalhe. Mesmo desenho das linhas de issue, sem o ícone de estado. */
.gh-list-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-bottom: 1px solid var(--husky-border);
}
.gh-list-row:last-child { border-bottom: none; }
.gh-list-row form { margin: 0; }
.gh-def-list { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 8px 16px; font-size: 13px; margin: 0; }
.gh-def-list dt { color: var(--husky-muted); font-family: var(--font-label); }
.gh-def-list dd { color: var(--husky-text); margin: 0; }
.gh-pre-scroll {
  overflow-x: auto; background: var(--husky-night); border: 1px solid var(--husky-border);
  border-radius: 6px; padding: 12px; font-family: var(--font-code); font-size: 12px; margin: 0;
}

/* githusky-60 — hierarquia da wiki na lateral. Numeração em cascata e ícone
   de pasta/página: numa coluna estreita o recuo de 24px por nível some, e o
   leitor perde de quem a página é filha. */
.gh-wiki-node .gh-group-summary,
.gh-wiki-node .gh-group-leaf { padding-top: 8px; padding-bottom: 8px; font-size: 13px; }
.gh-wiki-num {
  font-family: var(--font-label); font-size: 11px; font-variant-numeric: tabular-nums;
  color: var(--husky-muted); flex-shrink: 0; min-width: 2ch;
}
.gh-wiki-icon { color: var(--husky-smoke); flex-shrink: 0; }
.gh-wiki-node .gh-group-summary:hover .gh-wiki-icon,
.gh-wiki-node .gh-group-leaf:hover .gh-wiki-icon { color: var(--husky-orange); }