:root {
  --bg:            #f5f1e8;
  --bg-elev:       #fbf8f0;
  --bg-sunken:     #ece6d6;
  --fg:            #2a2520;
  --fg-muted:      #6e6558;
  --fg-faint:      #a39884;
  --rule:          #d9d1be;
  --rule-strong:   #b8ad95;
  --accent:        #b3552a; 
  --accent-soft:   #c97649;
  --accent-bg:     #efd9c9;

  --diff-add-bg:   #e6ecd3;
  --diff-add-fg:   #3a4f10;
  --diff-add-rule: #8aa83a;
  --diff-del-bg:   #f1d9d6;
  --diff-del-fg:   #6f1f1c;
  --diff-del-rule: #c44545;
  --diff-hunk-bg:  #e3dcc8;
  --diff-hunk-fg:  #5e5648;

  --mono: 'JetBrains Mono', 'Berkeley Mono', 'IBM Plex Mono',
          ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --leading:    1.6;
  --leading-tight: 1.35;
  --rhythm:     1.5rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #16130f;
    --bg-elev:       #1c1814;
    --bg-sunken:     #100e0b;
    --fg:            #e8e1d2;
    --fg-muted:      #a39988;
    --fg-faint:      #65604f;
    --rule:          #2a2620;
    --rule-strong:   #3d372e;
    --accent:        #d97c4f;
    --accent-soft:   #e8946a;
    --accent-bg:     #3a2317;

    --diff-add-bg:   #1d2810;
    --diff-add-fg:   #b8d176;
    --diff-add-rule: #6b8a2e;
    --diff-del-bg:   #2c1614;
    --diff-del-fg:   #e89996;
    --diff-del-rule: #b04545;
    --diff-hunk-bg:  #1f1c17;
    --diff-hunk-fg:  #a39988;
  }
}

* { box-sizing: border-box; }

html {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 14px;
  line-height: var(--leading);
  font-feature-settings: 'zero', 'cv11', 'ss02';   /* slashed 0, alt l/i, alt r */
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

div#cgit {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem 4rem;
}

a {
  color: var(--accent);
  text-decoration: none;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
  transition: color 120ms ease, background-color 120ms ease;
}
a:hover { color: var(--accent-soft); text-decoration: underline; }
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

::selection { background: var(--accent-bg); color: var(--fg); }

/* scrollbars — subtle, on-brand */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--rule-strong) transparent;
}
*::-webkit-scrollbar { height: 10px; width: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--rule-strong);
  border-radius: 10px;
  border: 2px solid var(--bg);
}
*::-webkit-scrollbar-track { background: transparent; }

table#header {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 2rem;
  padding: 2rem 0 1.5rem;
  border-bottom: 1px solid var(--rule);
}

table#header td {
  padding: 0;
  vertical-align: baseline;
}

table#header td.logo { display: none; } 

table#header td.main {
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
}

table#header td.main a {
  color: var(--fg);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 2px;
}
table#header td.main a:hover { color: var(--accent); text-decoration: none; }

table#header td.sub {
  color: var(--fg-muted);
  font-size: 0.85rem;
  padding-top: 0.5rem;
  font-style: italic;
}

table#header td.form {
  text-align: right;
}

table#header input[type='text'],
table#header select {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  color: var(--fg);
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.35rem 0.6rem;
  border-radius: 3px;
  transition: border-color 120ms ease;
}
table#header input[type='text']:focus,
table#header select:focus {
  outline: none;
  border-color: var(--accent);
}
table#header input[type='submit'] {
  background: var(--accent);
  color: var(--bg);
  border: none;
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.35rem 0.8rem;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 120ms ease;
}
table#header input[type='submit']:hover { background: var(--accent-soft); }

table.tabs {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 2rem;
}

table.tabs td {
  padding: 0;
  border-bottom: 1px solid var(--rule);
}

table.tabs td:first-child {
  padding: 0;
}

table.tabs a {
  display: inline-block;
  padding: 0.6rem 1rem;
  color: var(--fg-muted);
  font-size: 0.85rem;
  text-transform: lowercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 120ms ease, border-color 120ms ease;
}

table.tabs a:hover {
  color: var(--fg);
  text-decoration: none;
  border-bottom-color: var(--rule-strong);
}

table.tabs a.active {
  color: var(--fg);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

table.tabs td:last-child {
  text-align: right;
  color: var(--fg-faint);
  font-size: 0.8rem;
  padding-right: 0.5rem;
}

div#content {
  margin: 0;
}

h1, h2, h3, h4 {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin: 2rem 0 1rem;
  line-height: var(--leading-tight);
}
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }

div#summary { margin: 2rem 0; }

table.list,
table.list-repos,
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

table.list th,
table th {
  text-align: left;
  font-weight: 500;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-faint);
  padding: 0.75rem 0.75rem;
  border-bottom: 1px solid var(--rule-strong);
  background: transparent;
}

table.list td,
table td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

table.list tr:hover td,
table tr:hover td {
  background: var(--bg-elev);
}

table.list tr:last-child td { border-bottom: none; }

/* repo-list section headers ("section" classes, e.g., personal/work groups) */
tr.nohover-highlight td,
tr.nohover td {
  background: transparent !important;
}
td.reposection {
  font-size: 0.75rem !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent) !important;
  font-weight: 600;
  padding-top: 2rem !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 1px solid var(--rule-strong) !important;
}

/* repo name links — make them feel important */
table.list td a,
td.toplevel-repo a,
td.sublevel-repo a {
  font-weight: 500;
  color: var(--fg);
}
table.list td a:hover { color: var(--accent); text-decoration: none; }

/* age column — "5 hours ago", "3 days ago" */
td.age-mins,
td.age-hours,
td.age-days,
td.age-weeks,
td.age-months,
td.age-years,
span.age-mins,
span.age-hours,
span.age-days,
span.age-weeks,
span.age-months,
span.age-years {
  color: var(--fg-muted);
  font-size: 0.8rem;
  white-space: nowrap;
}
td.age-mins, span.age-mins,
td.age-hours, span.age-hours { color: var(--accent); }

/* tree view — directory vs file vs submodule */
td.ls-dir a {
  color: var(--accent);
  font-weight: 500;
}
td.ls-dir a::before { content: '/ '; opacity: 0.5; }
td.ls-blob a { color: var(--fg); }
td.ls-mod a { color: var(--fg-muted); font-style: italic; }
td.ls-mod a::after { content: ' →'; color: var(--fg-faint); }

/* mode column (rwxr-xr-x) */
td.mode {
  color: var(--fg-faint);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

/* file size */
td.size {
  text-align: right;
  color: var(--fg-muted);
  font-size: 0.8rem;
}

/* ---------- log / commit rows ---------------------------------------------- */

table.list td.commitgraph {
  padding: 0.55rem 0.5rem;
  color: var(--fg-faint);
}

/* the SHA hash */
td.sha1 a,
a.sha1 {
  color: var(--accent);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  font-feature-settings: 'zero', 'tnum';
}

/* commit subject line */
td.subject a {
  color: var(--fg);
  font-weight: 500;
}
td.subject a:hover { color: var(--accent); }

/* author / committer */
td.author {
  color: var(--fg-muted);
  font-size: 0.82rem;
  font-style: italic;
}

/* refs (branch / tag pills next to commits) */
.ref,
span.refs span {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  margin: 0 0.15rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  background: var(--accent-bg);
  color: var(--accent);
  border-radius: 2px;
  text-decoration: none;
}
.ref.tag, span.refs span.tag {
  background: var(--bg-sunken);
  color: var(--fg-muted);
}

/* ---------- commit info pane ----------------------------------------------- */

table.commit-info {
  margin: 1.5rem 0;
  border-collapse: collapse;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  font-size: 0.85rem;
}

table.commit-info th {
  text-align: right;
  text-transform: uppercase;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--fg-faint);
  font-weight: 500;
  padding: 0.6rem 1rem 0.6rem 1.25rem;
  background: transparent;
  border: none;
  width: 1%;
  white-space: nowrap;
}
table.commit-info td {
  padding: 0.6rem 1.25rem 0.6rem 0;
  border: none;
  color: var(--fg);
}

div.commit-subject {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 1.5rem 0 0.5rem;
  color: var(--fg);
}

div.commit-msg {
  margin: 1rem 0 2rem;
  padding: 1rem 1.25rem;
  background: var(--bg-sunken);
  border-left: 3px solid var(--accent);
  white-space: pre-wrap;
  color: var(--fg-muted);
  font-size: 0.9rem;
  line-height: 1.7;
  border-radius: 0 3px 3px 0;
}

/* ---------- diff view — the showpiece -------------------------------------- */

table.diff {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.82rem;
  line-height: 1.55;
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
}

table.diff td {
  padding: 0.15rem 0.85rem;
  border: none;
  white-space: pre;
  font-family: var(--mono);
  vertical-align: baseline;
}

/* hunk header — the @@ -1,5 +1,5 @@ lines */
table.diff td.hunk,
table.diff tr.hunk td {
  background: var(--diff-hunk-bg);
  color: var(--diff-hunk-fg);
  padding: 0.5rem 0.85rem;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* added lines */
table.diff td.add,
table.diff tr.add td {
  background: var(--diff-add-bg);
  color: var(--diff-add-fg);
  border-left: 3px solid var(--diff-add-rule);
  padding-left: calc(0.85rem - 3px);
}

/* removed lines */
table.diff td.del,
table.diff tr.del td {
  background: var(--diff-del-bg);
  color: var(--diff-del-fg);
  border-left: 3px solid var(--diff-del-rule);
  padding-left: calc(0.85rem - 3px);
}

/* context lines */
table.diff td.ctx,
table.diff tr.ctx td {
  color: var(--fg-muted);
  border-left: 3px solid transparent;
  padding-left: calc(0.85rem - 3px);
}

/* file headers in diff (a/path → b/path) */
div.head,
div.diff-head {
  margin: 2rem 0 0;
  padding: 0.8rem 1rem;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  font-size: 0.85rem;
  color: var(--fg);
  font-weight: 500;
}
div.head a { color: var(--fg); }
div.head a:hover { color: var(--accent); }

/* diffstat at top of commit */
table.diffstat {
  margin: 1rem 0 2rem;
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
table.diffstat td {
  padding: 0.3rem 0.5rem;
  border-bottom: 1px dotted var(--rule);
}
table.diffstat td.upd a { color: var(--fg); }
table.diffstat td.add a { color: var(--diff-add-rule); }
table.diffstat td.del a { color: var(--diff-del-rule); }
table.diffstat td.graph {
  width: 40%;
}
table.diffstat td.graph table {
  border: none;
}
table.diffstat td.graph td {
  border: none;
  padding: 0;
  height: 8px;
}
table.diffstat td.graph td.add { background: var(--diff-add-rule); }
table.diffstat td.graph td.rem { background: var(--diff-del-rule); }

/* ---------- blob (file source view) ---------------------------------------- */

table.blob {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
  margin: 1.5rem 0;
  font-size: 0.82rem;
  line-height: 1.65;
}

table.blob td {
  padding: 0;
  border: none;
  vertical-align: top;
}

table.blob td.linenumbers {
  padding: 1rem 0.75rem 1rem 1rem;
  text-align: right;
  background: var(--bg-sunken);
  color: var(--fg-faint);
  user-select: none;
  border-right: 1px solid var(--rule);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  white-space: pre;
}
table.blob td.linenumbers a {
  color: var(--fg-faint);
}
table.blob td.linenumbers a:hover {
  color: var(--accent);
  text-decoration: none;
}

table.blob td.lines {
  padding: 1rem 1rem;
  white-space: pre;
  overflow-x: auto;
}

/* if cgit pipes through source-highlight, basic syntax tokens */
.syntax-comment, .com   { color: var(--fg-faint); font-style: italic; }
.syntax-string, .str    { color: #6b8a2e; }
.syntax-keyword, .kwd   { color: var(--accent); font-weight: 500; }
.syntax-type, .typ      { color: #5a7ba8; }
.syntax-number, .num    { color: var(--accent-soft); }
.syntax-function, .fun  { color: var(--fg); font-weight: 500; }
@media (prefers-color-scheme: dark) {
  .syntax-string, .str { color: #b8d176; }
  .syntax-type, .typ   { color: #82a8d4; }
}

/* ---------- about / readme rendering --------------------------------------- */

div#summary p,
div.markdown p {
  max-width: 70ch;
  color: var(--fg);
  line-height: 1.7;
}
div.markdown h1, div.markdown h2, div.markdown h3 {
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.3rem;
}
div.markdown code {
  background: var(--bg-sunken);
  padding: 0.1rem 0.35rem;
  border-radius: 2px;
  font-size: 0.88em;
}
div.markdown pre {
  background: var(--bg-sunken);
  border-left: 3px solid var(--accent);
  padding: 1rem 1.25rem;
  overflow-x: auto;
  border-radius: 0 3px 3px 0;
}
div.markdown blockquote {
  margin: 1rem 0;
  padding: 0.5rem 1rem;
  border-left: 3px solid var(--rule-strong);
  color: var(--fg-muted);
  font-style: italic;
}

/* ---------- error / msg ---------------------------------------------------- */

div.error {
  margin: 2rem 0;
  padding: 1rem 1.25rem;
  background: var(--diff-del-bg);
  color: var(--diff-del-fg);
  border-left: 3px solid var(--diff-del-rule);
  border-radius: 0 3px 3px 0;
}

/* ---------- pagination ----------------------------------------------------- */

div.pager {
  margin: 2rem 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--fg-muted);
}
div.pager a {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  margin: 0 0.15rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--fg);
}
div.pager a:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}
div.pager a.current {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

/* ---------- footer --------------------------------------------------------- */

div#footer {
  margin: 3rem 0 0;
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule);
  font-size: 0.78rem;
  color: var(--fg-faint);
  text-align: center;
  letter-spacing: 0.02em;
}
div#footer a { color: var(--fg-muted); }
div#footer a:hover { color: var(--accent); }

/* ---------- responsive ----------------------------------------------------- */

@media (max-width: 700px) {
  div#cgit { padding: 0 1rem 2rem; }
  html { font-size: 13px; }

  table#header td.form { display: block; text-align: left; padding-top: 1rem; }
  table.tabs a { padding: 0.5rem 0.6rem; }

  /* let big tables (diffs, blobs) scroll horizontally */
  div#content > table,
  table.diff,
  table.blob {
    display: block;
    overflow-x: auto;
  }
}

/* print — clean, ink-friendly */
@media print {
  div#cgit { max-width: none; padding: 0; }
  table#header, table.tabs, div#footer { display: none; }
  a { color: var(--fg); text-decoration: underline; }
  table.diff td.add { background: #f0f0f0; }
  table.diff td.del { background: #e0e0e0; text-decoration: line-through; }
}