/* KullHub — branded GitHub/Azure-DevOps-style git browser chrome.
   Link AFTER ../../styles.css. Shared across all 10 git showcase pages. */
* { box-sizing: border-box; }
body { margin: 0; background: var(--surface-page); color: var(--text); font-family: var(--font-sans); }
a { color: inherit; text-decoration: none; }

/* ---- top app bar ---- */
.kh-top { display: flex; align-items: center; gap: 16px; padding: 0 18px; height: 56px; background: var(--kg-ink); color: #fff; }
.kh-top .brand { display: flex; align-items: center; gap: 9px; font-family: var(--font-pixel); font-size: 14px; flex: none; }
.kh-top .brand .mk { width: 30px; height: 30px; border-radius: 7px; background: var(--kg-gold); color: var(--kg-ink); display: grid; place-items: center; font-size: 12px; box-shadow: 0 2px 0 var(--kg-amber-deep); }
.kh-top .brand b { color: var(--kg-gold); }
.kh-search { flex: 1; max-width: 460px; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: var(--r); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #cfc6e6; font-size: 13px; }
.kh-search kbd { margin-left: auto; font-family: var(--font-mono); font-size: 10px; border: 1px solid rgba(255,255,255,.25); border-radius: 4px; padding: 1px 5px; }
.kh-top .nav { display: flex; gap: 16px; font-size: 14px; font-weight: 600; }
.kh-top .nav a { color: #e6def5; opacity: .85; }
.kh-top .nav a:hover { opacity: 1; }
.kh-top .right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.kh-top .ico { color: #e6def5; font-size: 15px; }
.kh-av { width: 28px; height: 28px; border-radius: 50%; background: var(--kg-gold); color: var(--kg-ink); display: grid; place-items: center; font-weight: 800; font-size: 12px; object-fit: cover; }

/* ---- repo header ---- */
.kh-repohead { padding: 18px 24px 0; border-bottom: 1px solid var(--border); background: var(--surface-card); }
.kh-crumb { display: flex; align-items: center; gap: 8px; font-size: 19px; }
.kh-crumb .owner { color: var(--kg-amber-deep); font-weight: 600; }
.kh-crumb .sep { color: var(--text-faint); }
.kh-crumb .repo { color: var(--kg-ink); font-weight: 800; }
.kh-crumb .vis { margin-left: 4px; font-size: 11px; font-weight: 700; color: var(--text-muted); border: 1px solid var(--border-strong); border-radius: 999px; padding: 2px 9px; }
.kh-actions { margin-left: auto; display: flex; gap: 8px; }
.kh-rowtop { display: flex; align-items: center; }
/* tabs */
.kh-tabs { display: flex; gap: 4px; margin-top: 16px; }
.kh-tabs a { display: flex; align-items: center; gap: 7px; padding: 9px 13px; font-size: 14px; font-weight: 600; color: var(--text-muted); border-bottom: 2px solid transparent; }
.kh-tabs a .ct { font-family: var(--font-mono); font-size: 11px; background: var(--surface-well); border-radius: 999px; padding: 1px 7px; color: var(--text-muted); }
.kh-tabs a.on { color: var(--kg-ink); border-bottom-color: var(--kg-gold); }
.kh-tabs a:hover { color: var(--kg-ink); }

/* ---- buttons ---- */
.kh-btn { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: var(--r); border: 1px solid var(--border-strong); background: var(--surface-card); color: var(--kg-ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.kh-btn:hover { background: var(--surface-sunken); }
.kh-btn .ct { font-family: var(--font-mono); font-size: 11px; background: var(--surface-well); border-radius: 999px; padding: 1px 7px; }
.kh-btn--primary { background: var(--kg-gold); border-color: var(--kg-amber); color: var(--kg-ink); box-shadow: 0 2px 0 var(--kg-amber-deep); }
.kh-btn--primary:hover { background: var(--kg-gold-bright); }
.kh-btn--green { background: var(--kg-live); border-color: #3f8a3f; color: #fff; }

/* ---- page body ---- */
.kh-page { max-width: 1180px; margin: 0 auto; padding: 22px 24px 70px; }
.kh-split { display: grid; grid-template-columns: 1fr 300px; gap: 26px; align-items: start; }

/* ---- branch bar ---- */
.kh-branchbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.kh-branch { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--r); background: var(--surface-card); font-size: 13px; font-weight: 600; cursor: pointer; }
.kh-branch .fa { color: var(--text-muted); }

/* ---- file table ---- */
.kh-files { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface-card); }
.kh-files .head { display: flex; align-items: center; gap: 10px; padding: 11px 16px; background: var(--surface-sunken); border-bottom: 1px solid var(--border); font-size: 13px; }
.kh-files .head .au { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.kh-files .head .msg { color: var(--text-muted); }
.kh-files .head .when { margin-left: auto; color: var(--text-faint); font-size: 12px; }
.kh-row { display: grid; grid-template-columns: 1fr 2fr auto; gap: 10px; align-items: center; padding: 9px 16px; border-bottom: 1px solid var(--border); font-size: 14px; }
.kh-row:last-child { border-bottom: none; }
.kh-row:hover { background: var(--surface-sunken); }
.kh-row .nm { display: flex; align-items: center; gap: 9px; }
.kh-row .nm i { width: 16px; text-align: center; }
.kh-row .nm .fa-folder { color: var(--kg-amber); }
.kh-row .nm .fa-file, .kh-row .nm .fa-file-lines { color: var(--text-faint); }
.kh-row .cm { color: var(--text-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kh-row .ago { color: var(--text-faint); font-size: 12px; text-align: right; }
.kh-row a.nm:hover span { color: var(--kg-amber-deep); text-decoration: underline; }

/* ---- sidebar card ---- */
.kh-side h3 { font-size: 15px; margin-bottom: 8px; }
.kh-side p { font-size: 13px; color: var(--text-muted); margin: 0 0 14px; }
.kh-side .sechead { font-size: 13px; font-weight: 700; margin: 18px 0 8px; padding-top: 16px; border-top: 1px solid var(--border); }
.kh-topics { display: flex; flex-wrap: wrap; gap: 6px; }
.kh-topic { font-size: 12px; font-weight: 600; color: var(--kg-amber-deep); background: var(--kg-gold-soft); border: 1px solid rgba(245,197,66,.5); border-radius: 999px; padding: 3px 10px; }

/* ---- language bar ---- */
.kh-langbar { display: flex; height: 9px; border-radius: 999px; overflow: hidden; margin-bottom: 10px; }
.kh-langs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; font-size: 12px; color: var(--text-muted); }
.kh-langs span { display: flex; align-items: center; gap: 6px; }
.kh-langs i { width: 9px; height: 9px; border-radius: 50%; }

/* ---- readme card ---- */
.kh-readme { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-card); margin-top: 22px; overflow: hidden; }
.kh-readme .rhead { display: flex; align-items: center; gap: 9px; padding: 11px 18px; border-bottom: 1px solid var(--border); background: var(--surface-sunken); font-size: 13px; font-weight: 700; }
.kh-readme .rbody { padding: 26px 30px; }
.kh-readme .rbody h1 { font-size: 28px; margin: 0 0 14px; display: flex; align-items: center; gap: 12px; }
.kh-readme .rbody h2 { font-size: 20px; margin: 26px 0 12px; padding-bottom: 7px; border-bottom: 1px solid var(--border); }
.kh-readme .rbody p { font-size: 15px; color: var(--text); line-height: 1.7; margin: 0 0 14px; }
.kh-readme .rbody ul { margin: 0 0 14px; padding-left: 22px; color: var(--text); font-size: 15px; line-height: 1.8; }
.kh-readme .rbody code { font-family: var(--font-mono); font-size: .88em; background: var(--surface-sunken); padding: 2px 6px; border-radius: 4px; color: var(--kg-amber-deep); }

/* ---- code blob ---- */
.kh-code { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface-card); }
.kh-code .chead { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--surface-sunken); font-size: 13px; color: var(--text-muted); }
.kh-code .chead .lines { margin-left: auto; }
.kh-code pre { margin: 0; display: flex; font-family: var(--font-mono); font-size: 13px; line-height: 1.7; overflow: auto; }
.kh-gutter { padding: 14px 0; text-align: right; color: var(--text-faint); user-select: none; background: var(--surface-card); border-right: 1px solid var(--border); flex: none; }
.kh-gutter span { display: block; padding: 0 14px; }
.kh-codebody { padding: 14px 0; flex: 1; }
.kh-codebody span.ln { display: block; padding: 0 16px; white-space: pre; }
.tok-key { color: #9a3bb8; } .tok-str { color: #1f8a5b; } .tok-com { color: var(--text-faint); font-style: italic; } .tok-num { color: var(--kg-amber-deep); } .tok-fn { color: var(--kg-info); }

/* ---- diff ---- */
.kh-diff span.ln { display: block; padding: 0 16px; white-space: pre; font-family: var(--font-mono); font-size: 13px; line-height: 1.7; }
.kh-diff .add { background: color-mix(in srgb, var(--kg-live) 13%, transparent); }
.kh-diff .del { background: color-mix(in srgb, var(--kg-danger) 12%, transparent); }
.kh-diff .hunk { background: color-mix(in srgb, var(--kg-info) 10%, transparent); color: var(--text-muted); }

/* ---- list items (commits/issues/prs) ---- */
.kh-list { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--surface-card); }
.kh-li { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.kh-li:last-child { border-bottom: none; }
.kh-li:hover { background: var(--surface-sunken); }
.kh-li .ic { font-size: 16px; }
.kh-li .ti { font-size: 15px; font-weight: 600; }
.kh-li .ti:hover { color: var(--kg-amber-deep); }
.kh-li .sub { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }
.kh-li .sha { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); }
.kh-label { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; }
.kh-state { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #fff; border-radius: 999px; padding: 4px 11px; }
.kh-state--open { background: var(--kg-live); }
.kh-state--merged { background: #8957e5; }
.kh-state--closed { background: var(--kg-danger); }

.kh-section-h { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 16px; }
@media (max-width: 860px) { .kh-split { grid-template-columns: 1fr; } .kh-top .nav, .kh-search kbd { display: none; } }