/*
   EvilEKo Forgejo theme
   Catppuccin Frappé interface with mauve as the single accent.
   The layout stays quiet so the repository and its code remain the focus.
*/

@font-face {
  font-family: 'Agave';
  src: url('fonts/Agave-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Agave';
  src: url('fonts/Agave-Bold.ttf') format('truetype');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --eko-crust: #232634;
  --eko-bg: #303446;
  --eko-surface: #292c3c;
  --eko-surface-2: #414559;
  --eko-surface-3: #51576d;
  --eko-line: #626880;
  --eko-line-strong: #838ba7;
  --eko-code-bg: #414559;
  --eko-text: #c6d0f5;
  --eko-muted: #b5bfe2;
  --eko-dim: #838ba7;
  --eko-accent: #ca9ee6;
  --eko-accent-strong: #d8b4ef;
  --eko-accent-soft: #414559;
  --eko-mono: 'Agave', ui-monospace, monospace;
  --eko-sans: 'Outfit', system-ui, -apple-system, sans-serif;

  /* Catppuccin Frappé syntax colors. */
  --syntax-comment: #737994;
  --syntax-text: #c6d0f5;
  --syntax-keyword: #ca9ee6;
  --syntax-function: #8caaee;
  --syntax-string: #a6d189;
  --syntax-number: #ef9f76;
  --syntax-type: #babbf1;
  --syntax-operator: #ca9ee6;
  --syntax-punctuation: #babbf1;
  --syntax-error: #e78284;

  /* Forgejo's theme variables. */
  --is-dark-theme: true;
  --color-primary: var(--eko-accent);
  --color-primary-contrast: var(--eko-crust);
  --color-primary-dark-1: #d8b4ef;
  --color-primary-dark-2: #e1c5f3;
  --color-primary-dark-3: #ead6f7;
  --color-primary-dark-4: #f1e3fa;
  --color-primary-dark-5: #f6ecfc;
  --color-primary-dark-6: #faf5fd;
  --color-primary-dark-7: var(--eko-text);
  --color-primary-light-1: #b689d1;
  --color-primary-light-2: #a276bd;
  --color-primary-light-3: #8d63a8;
  --color-primary-light-4: #795393;
  --color-primary-light-5: #65447a;
  --color-primary-light-6: #523761;
  --color-primary-light-7: #3f2a49;
  --color-primary-hover: var(--eko-accent-strong);
  --color-primary-active: var(--eko-accent);
  --color-secondary: #51576d;
  --color-secondary-dark-1: #626880;
  --color-secondary-dark-2: #737994;
  --color-secondary-dark-3: #838ba7;
  --color-secondary-dark-4: #949cbb;
  --color-secondary-dark-5: #a5adce;
  --color-secondary-dark-6: #b5bfe2;
  --color-secondary-dark-7: #c6d0f5;
  --color-secondary-light-1: #414559;
  --color-secondary-light-2: #292c3c;
  --color-secondary-light-3: #232634;
  --color-body: #303446;
  --color-box-header: #414559;
  --color-box-body: #303446;
  --color-box-body-highlight: #414559;
  --color-text-dark: #c6d0f5;
  --color-text: #c6d0f5;
  --color-text-light: #b5bfe2;
  --color-text-light-1: #b5bfe2;
  --color-text-light-2: #a5adce;
  --color-text-light-3: #838ba7;
  --color-footer: #232634;
  --color-input-text: #c6d0f5;
  --color-input-background: #414559;
  --color-input-border: #838ba7;
  --color-input-border-hover: #c6d0f5;
  --color-header-wrapper: #292c3c;
  --color-header-wrapper-transparent: #292c3c;
  --color-hover: #414559;
  --color-active: #51576d;
  --color-menu: #414559;
  --color-card: #292c3c;
  --color-markup-code-block: #414559;
  --color-markup-code-inline: transparent;
  --color-button: #414559;
  --color-code-bg: #414559;
  --color-shadow: transparent;
  --color-secondary-bg: #292c3c;
  --color-accent: var(--eko-accent);
  --color-small-accent: var(--eko-accent);
  --color-highlight-fg: #c6d0f5;
  --color-highlight-bg: #51576d;
  --color-overlay-backdrop: #232634;
  --color-caret: #c6d0f5;
  --color-reaction-bg: #414559;
  --color-reaction-active-bg: var(--eko-accent-soft);
  --color-reaction-hover-bg: #5c476a;
  --color-tooltip-text: #c6d0f5;
  --color-tooltip-bg: #414559;
  --color-nav-bg: #292c3c;
  --color-nav-hover-bg: #414559;
  --color-secondary-nav-bg: #292c3c;
  --color-label-text: #c6d0f5;
  --color-label-bg: #51576d;
  --color-label-hover-bg: #626880;
  --color-label-active-bg: #737994;
  --color-label-bg-alt: #51576d;
}

html {
  color-scheme: dark;
  background: var(--eko-bg) !important;
}

html,
body,
.full.height,
.page-content {
  background: var(--eko-bg) !important;
  color: var(--eko-text) !important;
  font-family: var(--eko-sans);
}

body * {
  box-shadow: none !important;
  text-shadow: none !important;
}

body,
#navbar,
.page-content,
.ui,
.ui *,
.repository,
.repository *,
.eko-portfolio,
.eko-portfolio * {
  background-image: none !important;
}

*:focus-visible {
  outline: 2px solid var(--eko-accent) !important;
  outline-offset: 2px;
  box-shadow: none !important;
}

::selection {
  background: var(--eko-accent) !important;
  color: var(--eko-crust) !important;
}

a,
a.muted,
.ui.breadcrumb a,
.ui.list a,
.repository .repo-name,
.repository .repo-title a,
.ui.table a,
.ui.header > a,
.feeds .news .content a {
  color: var(--eko-accent) !important;
  text-decoration: none;
}

a:hover,
.ui.table a:hover,
.ui.header > a:hover,
.ui.breadcrumb a:hover,
.feeds .news .content a:hover {
  color: var(--eko-accent-strong) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Forgejo chrome and common controls. */

#navbar {
  background: var(--eko-surface) !important;
  border-bottom: 1px solid var(--eko-line) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

#navbar .item,
#navbar .item:hover {
  color: var(--eko-text) !important;
}

#navbar .item:hover {
  background: var(--eko-surface-2) !important;
}

#navbar .active.item {
  color: var(--eko-accent) !important;
}

.ui.segment,
.ui.segments,
.ui.attached.segment,
.ui.raised.segment,
.ui.card,
.ui.cards > .card,
.repository.file.list #repo-files-table,
.repository .ui.top.attached.header,
.user.profile .ui.card,
.ui.modal,
.ui.dropdown .menu,
.ui.menu,
.ui.table,
.ui.message,
.ui.label {
  background: var(--eko-surface) !important;
  border: 1px solid var(--eko-line) !important;
  border-radius: 0 !important;
  color: var(--eko-text) !important;
}

.ui.segment,
.ui.segments,
.ui.card,
.ui.cards > .card,
.ui.modal {
  box-shadow: none !important;
}

.ui.form input,
.ui.form textarea,
.ui.form select,
.ui.form .ui.selection.dropdown,
.ui.search input,
input,
textarea,
select {
  background: var(--eko-surface-2) !important;
  border: 1px solid var(--eko-line-strong) !important;
  border-radius: 0 !important;
  color: var(--eko-text) !important;
}

.ui.form input:focus,
.ui.form textarea:focus,
.ui.form select:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--eko-accent) !important;
  outline: 1px solid var(--eko-accent) !important;
  outline-offset: -1px;
}

input::placeholder,
textarea::placeholder {
  color: var(--eko-dim) !important;
}

.ui.table th,
.ui.table td,
.ui.table thead,
.ui.table tfoot,
.ui.divider,
.ui.tabular.menu,
.ui.secondary.pointing.menu {
  border-color: var(--eko-line) !important;
}

.ui.button,
.ui.basic.button,
.ui.icon.button,
button {
  background: var(--eko-surface-2) !important;
  border: 1px solid var(--eko-line-strong) !important;
  border-radius: 0 !important;
  color: var(--eko-text) !important;
}

.ui.button:hover,
.ui.basic.button:hover,
.ui.icon.button:hover,
button:hover {
  background: var(--eko-surface-2) !important;
  border-color: var(--eko-text) !important;
  color: var(--eko-text) !important;
}

.ui.primary.button,
.ui.green.button,
.ui.primary.label,
.ui.primary.labels .label {
  background: var(--eko-accent) !important;
  border-color: var(--eko-accent) !important;
  color: var(--eko-crust) !important;
}

.ui.primary.button:hover,
.ui.green.button:hover {
  background: var(--eko-accent-strong) !important;
  border-color: var(--eko-accent-strong) !important;
  color: var(--eko-crust) !important;
}

.ui.tabular.menu .item,
.text.grey,
.ui.grey.text,
.muted,
.ui.header .sub.header,
.ui.menu .item,
.ui.menu a.item {
  color: var(--eko-muted) !important;
}

.ui.tabular.menu .active.item {
  background: var(--eko-surface) !important;
  border-color: var(--eko-accent) !important;
  color: var(--eko-accent) !important;
}

/* Keep status controls monochrome; mauve remains the single UI accent. */

.ui.red.button,
.ui.orange.button,
.ui.yellow.button,
.ui.green.button,
.ui.blue.button,
.ui.teal.button,
.ui.purple.button,
.ui.violet.button,
.ui.pink.button,
.ui.red.label,
.ui.orange.label,
.ui.yellow.label,
.ui.green.label,
.ui.blue.label,
.ui.teal.label,
.ui.purple.label,
.ui.violet.label,
.ui.pink.label {
  background: var(--eko-surface-2) !important;
  border: 1px solid var(--eko-line-strong) !important;
  color: var(--eko-text) !important;
}

.ui.positive.message,
.ui.negative.message,
.ui.warning.message,
.ui.info.message {
  background: var(--eko-surface) !important;
  border: 1px solid var(--eko-line-strong) !important;
  color: var(--eko-text) !important;
}

svg.octicon-file-directory-fill,
svg.octicon-repo,
.repository.file.list #repo-files-table .svg.octicon-file-directory-fill {
  color: var(--eko-accent) !important;
}

/* Forgejo code view: Chroma spans use Catppuccin Frappé with mauve keywords. */

pre,
.markup pre,
.code-view,
.chroma,
.code-block {
  font-family: var(--eko-mono) !important;
  background: var(--eko-code-bg) !important;
  border-color: var(--eko-line) !important;
  border-radius: 0 !important;
  color: var(--syntax-text) !important;
}

/* Agave carries the source-facing layer: navigation, archive metadata, and code. */

#navbar,
.repo-header,
.repo-button-row,
.repo-buttons,
.code-search,
#repo-files-table,
code,
kbd,
samp,
.code-view * {
  font-family: var(--eko-mono) !important;
}

.eko-browser-body .repo-row,
.eko-browser-body .repo-row * {
  font-family: var(--eko-mono) !important;
}

/* The documentation layer is the reading desk: keep its prose, links,
   tables, metadata, inline code, and code blocks in Agave. Display titles
   outside the repository documentation retain the existing Outfit treatment. */

.repository .file-header,
.repository .file-header *,
.repository .file-view.markup,
.repository .file-view.markup * {
  font-family: var(--eko-mono) !important;
}

.repository .file-view.markup :is(h1, h2, h3, h4, h5, h6),
.repository .file-view.markup :is(h1, h2, h3, h4, h5, h6) * {
  font-family: var(--eko-sans) !important;
}

.code-view,
.file-view {
  box-shadow: none !important;
}

.file-view.markup {
  background: transparent !important;
}

.code-view code.code-inner,
.code-diff code.code-inner,
td.lines-code > code.code-inner {
  background: transparent !important;
  border: 0 !important;
  color: var(--syntax-text) !important;
}

td.lines-code,
td.lines-num,
.lines-num {
  background: var(--eko-code-bg) !important;
  border-color: var(--eko-line) !important;
}

td.lines-num,
.lines-num {
  color: var(--eko-dim) !important;
}

code.inline,
.markup :not(pre) > code:not(.code-inner):not(.chroma),
.markup p code:not(.code-inner):not(.chroma),
.markup li code:not(.code-inner):not(.chroma),
.ui code:not(.code-inner):not(.chroma) {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--eko-accent) !important;
  padding: 0 !important;
}

.chroma .c,
.chroma .c1,
.chroma .ch,
.chroma .cm,
.chroma .cs,
.chroma .go,
.chroma .w,
.CodeMirror .cm-comment {
  color: var(--syntax-comment) !important;
}

.chroma .k,
.chroma .kc,
.chroma .kd,
.chroma .kn,
.chroma .kp,
.chroma .kr,
.chroma .kt,
.chroma .cp,
.chroma .nt,
.chroma .ne,
.chroma .nl,
.chroma .gu,
.chroma .o,
.chroma .ow,
.CodeMirror .cm-keyword,
.CodeMirror .cm-operator,
.token.keyword,
.token.operator,
.hljs-keyword,
.hljs-operator,
.tok-keyword,
.tok-operator {
  color: var(--syntax-keyword) !important;
}

.chroma .n,
.chroma .nn,
.chroma .nv,
.chroma .vc,
.chroma .vg,
.chroma .vi,
.chroma .bp,
.CodeMirror .cm-variable,
.CodeMirror .cm-variable-2,
.CodeMirror .cm-variable-3,
.token.variable,
.hljs-variable,
.tok-variable {
  color: var(--syntax-text) !important;
}

.chroma .na,
.chroma .nb,
.chroma .nd,
.chroma .nf,
.chroma .ni,
.chroma .nx,
.chroma .fm,
.CodeMirror .cm-def,
.CodeMirror .cm-property,
.CodeMirror .cm-builtin,
.token.function,
.token.property,
.hljs-title,
.hljs-function,
.tok-function,
.tok-property {
  color: var(--syntax-function) !important;
}

.chroma .nc,
.chroma .no,
.chroma .gh,
.CodeMirror .cm-type,
.CodeMirror .cm-qualifier,
.token.class-name,
.token.type,
.hljs-type,
.tok-type {
  color: var(--syntax-type) !important;
}

.chroma .s,
.chroma .s1,
.chroma .s2,
.chroma .sa,
.chroma .sb,
.chroma .sc,
.chroma .sd,
.chroma .se,
.chroma .sh,
.chroma .si,
.chroma .sr,
.chroma .ss,
.chroma .sx,
.chroma .dl,
.CodeMirror .cm-string,
.CodeMirror .cm-string-2,
.token.string,
.hljs-string,
.tok-string {
  color: var(--syntax-string) !important;
}

.chroma .m,
.chroma .mb,
.chroma .mf,
.chroma .mh,
.chroma .mi,
.chroma .mo,
.chroma .il,
.CodeMirror .cm-number,
.token.number,
.hljs-number,
.tok-number {
  color: var(--syntax-number) !important;
}

.chroma .p,
.chroma .x,
.CodeMirror .cm-bracket,
.CodeMirror .cm-punctuation,
.token.punctuation,
.hljs-punctuation,
.tok-punctuation {
  color: var(--syntax-punctuation) !important;
}

.chroma .err,
.chroma .gr,
.chroma .gt,
.CodeMirror .cm-error,
.token.error,
.hljs-deletion,
.tok-error {
  background: transparent !important;
  color: var(--syntax-error) !important;
}

.chroma .gd,
.chroma .gi {
  background: var(--eko-surface-2) !important;
  color: var(--syntax-text) !important;
}

/* A few common token names used by Tree-sitter adapters. */

[data-token="keyword"],
[data-token="operator"],
[data-token="type"],
[data-token="function"],
[data-token="property"],
[data-token="string"],
[data-token="number"],
[data-token="comment"],
[data-token="punctuation"] {
  background: transparent !important;
}

[data-token="keyword"],
[data-token="operator"] { color: var(--syntax-keyword) !important; }
[data-token="type"] { color: var(--syntax-type) !important; }
[data-token="function"],
[data-token="property"] { color: var(--syntax-function) !important; }
[data-token="string"] { color: var(--syntax-string) !important; }
[data-token="number"] { color: var(--syntax-number) !important; }
[data-token="comment"] { color: var(--syntax-comment) !important; }
[data-token="punctuation"] { color: var(--syntax-punctuation) !important; }

/* Keep the panel grey, but never paint a box behind individual tokens. */

.code-view .chroma span,
.code-diff .chroma span,
.markup pre .chroma span,
pre.chroma span,
.code-block .chroma span,
td.lines-code .code-inner span,
.chroma span[class] {
  background: transparent !important;
  background-image: none !important;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: var(--eko-line-strong);
  border: 2px solid var(--eko-crust);
  border-radius: 0;
}

::-webkit-scrollbar-track {
  background: var(--eko-crust);
}

#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-6,
#git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-8 {
  stroke: var(--eko-accent) !important;
  fill: var(--eko-accent) !important;
}

/* Portfolio homepage. */

html[data-eko-audience="visitor"] body:has(.eko-portfolio) #navbar,
html[data-eko-audience="visitor"] body:has(.eko-portfolio) footer.page-footer {
  display: none !important;
}

body:has(.eko-portfolio) .full.height {
  min-height: 100vh;
}

.eko-portfolio {
  min-height: 100vh;
  background: var(--eko-bg) !important;
  color: var(--eko-text);
  font-family: var(--eko-sans);
  position: relative;
}

.eko-noise {
  display: none !important;
}

.eko-shell {
  max-width: 1160px;
  margin: 0 auto;
  padding: 40px 24px 72px;
}

.eko-masthead {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: start;
  margin-bottom: 56px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--eko-text);
}

.eko-masthead-inner {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}

.eko-monogram {
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--eko-accent);
  border-radius: 0 !important;
  background: var(--eko-crust);
  color: var(--eko-accent);
  font-family: var(--eko-sans);
  font-size: 48px;
  font-weight: 900;
  letter-spacing: -0.04em;
  user-select: none;
}

.eko-identity h1 {
  margin: 0;
  color: var(--eko-text);
  font-family: var(--eko-sans);
  font-size: clamp(2.8rem, 6vw, 4.2rem);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1;
}

.eko-tagline {
  margin: 10px 0 0;
  color: var(--eko-accent);
  font-family: var(--eko-mono);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.eko-bio {
  max-width: 38rem;
  margin: 14px 0 0;
  color: var(--eko-muted);
  font-size: 1.05rem;
  line-height: 1.7;
}

.eko-nav {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.eko-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border: 1px solid var(--eko-line-strong);
  border-radius: 0 !important;
  background: var(--eko-surface);
  color: var(--eko-text) !important;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none !important;
}

.eko-nav-link:hover {
  border-color: var(--eko-text);
  background: var(--eko-text);
  color: var(--eko-crust) !important;
}

.eko-nav-accent {
  border-color: var(--eko-accent);
  background: var(--eko-accent);
  color: var(--eko-crust) !important;
}

.eko-nav-accent:hover {
  border-color: var(--eko-accent-strong);
  background: var(--eko-accent-strong);
  color: var(--eko-crust) !important;
}

.eko-arrow {
  transition: none;
}

.eko-masthead-stats {
  display: flex;
  min-width: 180px;
  flex-direction: column;
  gap: 8px;
}

.eko-kv {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
}

.eko-k {
  color: var(--eko-dim);
  font-family: var(--eko-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eko-v {
  color: var(--eko-text);
  font-size: 0.88rem;
  font-weight: 600;
}

.eko-gallery {
  margin-bottom: 56px;
}

.eko-gallery-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  color: var(--eko-accent);
  font-family: var(--eko-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.eko-label-dot {
  width: 8px;
  height: 8px;
  border: 1px solid var(--eko-accent);
  border-radius: 0 !important;
  background: var(--eko-accent);
}

.eko-gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}

.eko-piece {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid var(--eko-line);
  border-radius: 0 !important;
  background: var(--eko-surface);
  color: var(--eko-text) !important;
  text-decoration: none !important;
}

.eko-piece:hover {
  border-color: var(--eko-accent);
  background: var(--eko-surface-2);
}

.eko-piece-hero {
  grid-column: span 7;
  min-height: 320px;
}

.eko-piece:not(.eko-piece-hero):nth-child(2) { grid-column: span 5; }
.eko-piece:not(.eko-piece-hero):nth-child(3) { grid-column: span 5; }
.eko-piece:not(.eko-piece-hero):nth-child(4) { grid-column: span 7; }

.eko-piece-number {
  margin-bottom: 14px;
  color: var(--eko-dim);
  font-family: var(--eko-mono);
  font-size: 0.72rem;
  font-weight: 700;
}

.eko-piece-body {
  flex: 1;
}

.eko-piece-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.eko-piece-tags span {
  color: var(--eko-muted);
  font-family: var(--eko-mono);
  font-size: 0.72rem;
}

.eko-piece-tags span::after {
  content: " ·";
  color: var(--eko-dim);
}

.eko-piece-tags span:last-child::after {
  content: "";
}

.eko-piece h2 {
  margin: 0 0 10px;
  color: var(--eko-text);
  font-family: var(--eko-sans);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.eko-piece p {
  margin: 0;
  color: var(--eko-muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

.eko-piece-details {
  margin: 14px 0 0;
  padding-left: 1rem;
  color: var(--eko-muted);
  font-size: 0.88rem;
  line-height: 1.8;
}

.eko-piece-details li::marker {
  color: var(--eko-accent);
}

.eko-piece-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  color: var(--eko-accent);
  font-size: 0.88rem;
  font-weight: 700;
}

.eko-browser {
  overflow: hidden;
  border: 1px solid var(--eko-line);
  border-radius: 0 !important;
  background: var(--eko-surface);
}

.eko-browser-chrome {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--eko-line);
  background: var(--eko-surface-2);
}

.eko-browser-dots {
  display: flex;
  gap: 7px;
}

.eko-browser-dots span {
  width: 10px;
  height: 10px;
  border: 1px solid var(--eko-muted);
  border-radius: 0 !important;
  background: var(--eko-crust) !important;
}

#repo-search {
  flex: 1;
  padding: 9px 14px;
  border: 1px solid var(--eko-line-strong);
  border-radius: 0 !important;
  background: var(--eko-surface) !important;
  color: var(--eko-text);
  font-family: var(--eko-mono);
  font-size: 0.82rem;
}

#repo-search:focus {
  border-color: var(--eko-accent);
  outline: 1px solid var(--eko-accent);
  outline-offset: -1px;
}

#repo-search::placeholder {
  color: var(--eko-dim);
}

.eko-browser-body,
.ai-home-list {
  display: flex;
  flex-direction: column;
}

.repo-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--eko-line);
  color: var(--eko-text) !important;
  text-decoration: none !important;
}

.repo-row:last-child {
  border-bottom: 0;
}

.repo-row:hover {
  background: var(--eko-surface-2);
}

.repo-row-main {
  min-width: 0;
}

.repo-row-title-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

.repo-row h3 {
  margin: 0;
  color: var(--eko-accent);
  font-family: var(--eko-mono);
  font-size: 0.92rem;
  font-weight: 700;
}

.repo-row p {
  max-width: 48ch;
  margin: 0;
  overflow: hidden;
  color: var(--eko-muted);
  font-size: 0.84rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.repo-row-meta {
  display: flex;
  gap: 14px;
  color: var(--eko-dim);
  font-family: var(--eko-mono);
  font-size: 0.72rem;
  white-space: nowrap;
}

.repo-chip {
  color: var(--eko-muted);
  font-family: var(--eko-mono);
  font-size: 0.72rem;
}

.repo-chip-visibility {
  color: var(--eko-dim);
}

#language-stats ul li .repo-language-lines {
  margin-left: 0.35rem;
  color: var(--eko-accent);
  font-family: var(--eko-mono);
  font-size: 0.78rem;
  white-space: nowrap;
}

#language-stats ul li .repo-language-lines.is-loading,
#language-stats ul li .repo-language-lines.is-bytes,
#language-stats ul li .repo-language-lines.is-error {
  color: var(--eko-muted);
}

.eko-browser-empty,
.history-empty {
  padding: 24px;
  color: var(--eko-dim);
  font-family: var(--eko-mono);
  font-size: 0.82rem;
  text-align: center;
}

@media (max-width: 980px) {
  .eko-masthead {
    grid-template-columns: 1fr;
  }

  .eko-masthead-stats {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .eko-gallery-grid {
    grid-template-columns: 1fr;
  }

  .eko-piece-hero,
  .eko-piece:not(.eko-piece-hero):nth-child(2),
  .eko-piece:not(.eko-piece-hero):nth-child(3),
  .eko-piece:not(.eko-piece-hero):nth-child(4) {
    grid-column: span 1;
  }

  .eko-piece-hero {
    min-height: auto;
  }
}

@media (max-width: 640px) {
  .eko-shell {
    padding: 24px 16px 48px;
  }

  .eko-masthead-inner {
    flex-direction: column;
    gap: 16px;
  }

  .eko-monogram {
    width: 64px;
    height: 64px;
    font-size: 36px;
  }

  .eko-identity h1 {
    font-size: 2.4rem;
  }

  .eko-nav {
    flex-direction: column;
  }

  .eko-nav-link {
    width: 100%;
    justify-content: center;
  }

  .eko-masthead-stats {
    flex-direction: column;
  }

  .eko-piece {
    padding: 18px;
  }

  .repo-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .repo-row-meta {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* ─────────────────────────────────────────────────────
   Anonymous visitor mode
   A portfolio surface around the same public source.
   ───────────────────────────────────────────────────── */

html[data-eko-audience="visitor"] {
  --visitor-content: 1120px;
  --visitor-rule: var(--eko-line);
  --visitor-rule-strong: var(--eko-line-strong);
  --visitor-code: var(--eko-code-bg);
}

html[data-eko-audience="visitor"],
html[data-eko-audience="visitor"] body,
html[data-eko-audience="visitor"] .full.height,
html[data-eko-audience="visitor"] .page-content {
  background: var(--eko-bg) !important;
  color: var(--eko-text) !important;
}

html[data-eko-audience="visitor"] #navbar {
  display: block !important;
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 58px;
  padding: 0;
  background: var(--eko-surface) !important;
  border-bottom: 1px solid var(--visitor-rule) !important;
}

html[data-eko-audience="visitor"] #navbar .eko-visitor-bar {
  display: flex;
  max-width: var(--visitor-content);
  min-height: 58px;
  margin: 0 auto;
  padding: 0 24px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

html[data-eko-audience="visitor"] #navbar .eko-visitor-brand {
  color: var(--eko-text) !important;
  font-family: var(--eko-mono);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none !important;
  white-space: nowrap;
}

html[data-eko-audience="visitor"] #navbar .eko-visitor-brand-suffix {
  color: var(--eko-dim);
  font-weight: 400;
}

html[data-eko-audience="visitor"] #navbar .eko-visitor-links {
  display: flex;
  align-items: center;
  gap: 4px;
}

html[data-eko-audience="visitor"] #navbar .eko-visitor-link {
  display: inline-flex;
  min-height: 34px;
  padding: 0 12px;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 0 !important;
  color: var(--eko-muted) !important;
  font-family: var(--eko-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-decoration: none !important;
}

html[data-eko-audience="visitor"] #navbar .eko-visitor-link:hover,
html[data-eko-audience="visitor"] #navbar .eko-visitor-link:focus-visible {
  border-color: var(--visitor-rule-strong);
  background: var(--eko-surface-2) !important;
  color: var(--eko-text) !important;
}

html[data-eko-audience="visitor"] #navbar .eko-visitor-link-accent {
  margin-left: 8px;
  border-color: var(--eko-accent);
  color: var(--eko-accent) !important;
}

html[data-eko-audience="visitor"] #navbar .eko-visitor-link-accent:hover,
html[data-eko-audience="visitor"] #navbar .eko-visitor-link-accent:focus-visible {
  background: var(--eko-accent) !important;
  color: var(--eko-crust) !important;
}

/* The portfolio home gets the same visitor nav instead of a hidden Forgejo bar. */

html[data-eko-audience="visitor"] body:has(.eko-portfolio) #navbar {
  display: block !important;
}

html[data-eko-audience="visitor"] body:has(.eko-portfolio) footer.page-footer {
  display: none !important;
}

html[data-eko-audience="visitor"] .eko-about {
  margin-top: 56px;
  padding: 32px 0 12px;
  border-top: 1px solid var(--visitor-rule);
}

html[data-eko-audience="visitor"] .eko-about-label,
html[data-eko-audience="visitor"] .eko-gallery-label {
  color: var(--eko-accent);
}

html[data-eko-audience="visitor"] .eko-about-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
  gap: 48px;
  align-items: start;
}

html[data-eko-audience="visitor"] .eko-about h2 {
  margin: 0;
  color: var(--eko-text);
  font-size: clamp(1.8rem, 4vw, 3rem);
  letter-spacing: -0.04em;
  line-height: 1.05;
}

html[data-eko-audience="visitor"] .eko-about-copy p {
  max-width: 58ch;
  margin: 0 0 16px;
  color: var(--eko-muted);
  font-size: 1rem;
  line-height: 1.75;
}

html[data-eko-audience="visitor"] .eko-about-copy a {
  color: var(--eko-accent) !important;
  font-weight: 700;
}

/* Repository pages become project pages for anonymous readers. */

html[data-eko-audience="visitor"] .page-content.repository {
  max-width: none;
  padding-bottom: 88px;
}

html[data-eko-audience="visitor"] .page-content.repository .secondary-nav {
  background: var(--eko-surface) !important;
  border-bottom: 1px solid var(--visitor-rule) !important;
}

html[data-eko-audience="visitor"] .page-content.repository .secondary-nav > .ui.container,
html[data-eko-audience="visitor"] .page-content.repository > .ui.container {
  width: calc(100% - 32px) !important;
  max-width: var(--visitor-content) !important;
  margin-right: auto;
  margin-left: auto;
  box-sizing: border-box;
}

html[data-eko-audience="visitor"] .page-content.repository .repo-header {
  min-height: 78px;
  padding: 14px 0;
}

html[data-eko-audience="visitor"] .page-content.repository .repo-header .flex-item-title {
  font-family: var(--eko-mono);
  font-size: 0.9rem;
}

html[data-eko-audience="visitor"] .page-content.repository .repo-header .flex-item-title a:first-child {
  color: var(--eko-muted) !important;
}

html[data-eko-audience="visitor"] .page-content.repository .repo-header .flex-item-title a:last-child {
  color: var(--eko-text) !important;
  font-weight: 700;
}

html[data-eko-audience="visitor"] .page-content.repository .repo-header .repo-buttons,
html[data-eko-audience="visitor"] .page-content.repository .repo-button-row,
html[data-eko-audience="visitor"] .page-content.repository .repository-summary,
html[data-eko-audience="visitor"] .page-content.repository .code-search,
html[data-eko-audience="visitor"] .page-content.repository .repo-description,
html[data-eko-audience="visitor"] .page-content.repository .repo-topics,
html[data-eko-audience="visitor"] .page-content.repository .secondary-nav > overflow-menu,
html[data-eko-audience="visitor"] .page-content.repository .secondary-nav > .ui.tabs.divider {
  display: none !important;
}

html[data-eko-audience="visitor"] .eko-visitor-project-intro {
  margin: 0 0 12px;
  padding: 54px 0 48px;
  border-bottom: 1px solid var(--visitor-rule);
}

html[data-eko-audience="visitor"] .eko-visitor-eyebrow {
  color: var(--eko-accent);
  font-family: var(--eko-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

html[data-eko-audience="visitor"] .eko-visitor-project-title {
  margin: 14px 0 12px;
  color: var(--eko-text) !important;
  font-family: var(--eko-sans);
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 0.95;
}

html[data-eko-audience="visitor"] .eko-visitor-project-copy {
  max-width: 62ch;
  margin: 0;
  color: var(--eko-muted);
  font-size: 1.1rem;
  line-height: 1.7;
}

html[data-eko-audience="visitor"] .eko-visitor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

html[data-eko-audience="visitor"] .eko-visitor-action {
  display: inline-flex;
  min-height: 42px;
  padding: 0 16px;
  align-items: center;
  border: 1px solid var(--visitor-rule-strong);
  border-radius: 0 !important;
  color: var(--eko-text) !important;
  font-family: var(--eko-mono);
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none !important;
}

html[data-eko-audience="visitor"] .eko-visitor-action:hover,
html[data-eko-audience="visitor"] .eko-visitor-action:focus-visible {
  background: var(--eko-text) !important;
  border-color: var(--eko-text);
  color: var(--eko-crust) !important;
}

html[data-eko-audience="visitor"] .eko-visitor-action-accent {
  border-color: var(--eko-accent);
  background: var(--eko-accent);
  color: var(--eko-crust) !important;
}

html[data-eko-audience="visitor"] .eko-visitor-action-accent:hover,
html[data-eko-audience="visitor"] .eko-visitor-action-accent:focus-visible {
  background: var(--eko-accent-strong) !important;
  border-color: var(--eko-accent-strong);
  color: var(--eko-crust) !important;
}

/* README first; the source table becomes the appendix. */

html[data-eko-audience="visitor"] #readme.eko-visitor-readme {
  margin-top: 44px;
  border-top: 1px solid var(--visitor-rule);
}

html[data-eko-audience="visitor"] #readme.eko-visitor-readme .file-header {
  min-height: 58px;
  padding: 0;
  background: var(--eko-bg) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--visitor-rule) !important;
  color: var(--eko-muted) !important;
}

html[data-eko-audience="visitor"] #readme.eko-visitor-readme .file-header a {
  color: var(--eko-text) !important;
}

html[data-eko-audience="visitor"] #readme.eko-visitor-readme > .ui.segment {
  margin: 0;
  padding: 0;
  background: var(--eko-bg) !important;
  border: 0 !important;
}

html[data-eko-audience="visitor"] #readme.eko-visitor-readme .file-view.markup {
  max-width: 960px;
  margin: 0 auto;
  padding: 48px 24px 72px;
  background: var(--eko-bg) !important;
}

html[data-eko-audience="visitor"] #readme.eko-visitor-readme .markup h1,
html[data-eko-audience="visitor"] #readme.eko-visitor-readme .markup h2,
html[data-eko-audience="visitor"] #readme.eko-visitor-readme .markup h3 {
  color: var(--eko-text) !important;
}

html[data-eko-audience="visitor"] #readme.eko-visitor-readme .markup h1 {
  font-size: clamp(2rem, 5vw, 3.8rem);
  letter-spacing: -0.05em;
}

html[data-eko-audience="visitor"] #readme.eko-visitor-readme .markup h2 {
  margin-top: 48px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--visitor-rule);
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  letter-spacing: -0.04em;
}

html[data-eko-audience="visitor"] #readme.eko-visitor-readme .markup h3 {
  margin-top: 32px;
  font-size: 1.25rem;
}

html[data-eko-audience="visitor"] #readme.eko-visitor-readme .markup p,
html[data-eko-audience="visitor"] #readme.eko-visitor-readme .markup li {
  color: var(--eko-muted) !important;
  font-size: 1rem;
  line-height: 1.8;
}

html[data-eko-audience="visitor"] #readme.eko-visitor-readme .markup a {
  color: var(--eko-accent) !important;
}

html[data-eko-audience="visitor"] #readme.eko-visitor-readme .markup pre.code-block,
html[data-eko-audience="visitor"] #readme.eko-visitor-readme .markup pre {
  margin: 24px 0;
  padding: 20px;
  overflow-x: auto;
  background: var(--visitor-code) !important;
  border: 1px solid var(--visitor-rule) !important;
  border-radius: 0 !important;
}

html[data-eko-audience="visitor"] #readme.eko-visitor-readme .markup pre code,
html[data-eko-audience="visitor"] #readme.eko-visitor-readme .markup pre code span {
  background: transparent !important;
  border: 0 !important;
}

html[data-eko-audience="visitor"] .eko-visitor-source-label {
  display: flex;
  min-height: 72px;
  padding: 18px 0;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--visitor-rule);
  border-bottom: 1px solid var(--visitor-rule);
}

html[data-eko-audience="visitor"] .eko-visitor-source-copy {
  color: var(--eko-muted);
  font-family: var(--eko-mono);
  font-size: 0.78rem;
}

html[data-eko-audience="visitor"] #repo-files-table {
  margin-top: 0 !important;
  background: var(--eko-bg) !important;
  border: 1px solid var(--visitor-rule) !important;
  border-top: 0 !important;
}

html[data-eko-audience="visitor"] #repo-files-table thead,
html[data-eko-audience="visitor"] #repo-files-table .commit-list {
  background: var(--eko-surface-2) !important;
}

html[data-eko-audience="visitor"] #repo-files-table td,
html[data-eko-audience="visitor"] #repo-files-table th {
  border-color: var(--visitor-rule) !important;
}

html[data-eko-audience="visitor"] #repo-files-table td.name a {
  color: var(--eko-text) !important;
}

html[data-eko-audience="visitor"] #repo-files-table td.message a,
html[data-eko-audience="visitor"] #repo-files-table td.age {
  color: var(--eko-dim) !important;
}

html[data-eko-audience="visitor"] #repo-files-table tbody tr:hover {
  background: var(--eko-surface-2) !important;
}

/* Individual source files retain the technical code view, with a clear way back. */

html[data-eko-audience="visitor"] .eko-visitor-file-intro {
  display: flex;
  max-width: var(--visitor-content);
  margin: 0 auto;
  padding: 24px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--visitor-rule);
}

html[data-eko-audience="visitor"] .eko-visitor-back {
  color: var(--eko-accent) !important;
  font-family: var(--eko-mono);
  font-size: 0.78rem;
  text-decoration: none !important;
}

html[data-eko-audience="visitor"] .eko-visitor-file-note {
  color: var(--eko-dim);
  font-family: var(--eko-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

html[data-eko-audience="developer"] .eko-about {
  display: none !important;
}

html[data-eko-audience="visitor"] .page-content.repository .code-view {
  max-width: var(--visitor-content);
  margin: 32px auto 0;
}

/* Agave has a deliberately compact x-height; give the source-facing layer a
   little more scale so it reads comfortably at a glance. */

:root {
  --eko-mono-ui: 0.95rem;
  --eko-mono-micro: 0.9rem;
  --eko-mono-code: 1.15rem;
}

#navbar .item {
  font-size: 0.95rem;
}

html[data-eko-audience="visitor"] #navbar .eko-visitor-brand {
  font-size: 1.15rem;
}

html[data-eko-audience="visitor"] #navbar .eko-visitor-link {
  font-size: var(--eko-mono-ui);
  white-space: nowrap;
}

.eko-tagline,
.eko-k,
.eko-gallery-label,
.eko-piece-number,
.eko-piece-tags span,
.repo-row-meta,
.repo-chip,
.eko-browser-empty,
.history-empty,
#language-stats ul li .repo-language-lines {
  font-size: var(--eko-mono-micro);
}

.eko-piece-cta {
  font-size: 1.05rem;
}

#repo-search {
  font-size: 1rem;
}

html[data-eko-audience="visitor"] .page-content.repository .repo-header .flex-item-title {
  font-size: 1.1rem !important;
}

html[data-eko-audience="visitor"] .eko-visitor-eyebrow {
  font-size: 0.9rem;
}

html[data-eko-audience="visitor"] .eko-visitor-action,
html[data-eko-audience="visitor"] .eko-visitor-source-copy,
html[data-eko-audience="visitor"] .eko-visitor-back {
  font-size: var(--eko-mono-ui);
}

html[data-eko-audience="visitor"] .eko-visitor-file-note {
  font-size: var(--eko-mono-micro);
}

pre,
.markup pre,
.code-view,
.chroma,
.code-block {
  font-size: var(--eko-mono-code) !important;
  line-height: 1.6;
}

code.inline,
.markup :not(pre) > code:not(.code-inner):not(.chroma),
.markup p code:not(.code-inner):not(.chroma),
.markup li code:not(.code-inner):not(.chroma),
.ui code:not(.code-inner):not(.chroma) {
  font-size: 1.05em;
}

#repo-files-table {
  font-size: 0.98rem;
}

/* README readability floor. Forgejo's defaults reduce paragraph text below
   the surrounding Agave scale; make the actual reading text comfortable. */

.repository .file-view.markup {
  font-size: 18px !important;
  line-height: 1.75 !important;
}

.repository .file-view.markup :is(p, li, blockquote, dd, dt, figcaption) {
  font-size: 18px !important;
  line-height: 1.75 !important;
}

.repository .file-view.markup :is(p, li, blockquote, dd, dt, figcaption) :is(a, span, strong, em, del, s, mark) {
  font-size: inherit !important;
}

.repository .file-view.markup :is(table, thead, tbody, tfoot, tr, td, th) {
  font-size: 17px !important;
  line-height: 1.65 !important;
}

.repository .file-view.markup :is(td, th) :is(a, span, strong, em, code) {
  font-size: inherit !important;
}

.repository .file-view.markup :not(pre) > code:not(.code-inner):not(.chroma),
.repository .file-view.markup p code:not(.code-inner):not(.chroma),
.repository .file-view.markup li code:not(.code-inner):not(.chroma) {
  font-size: 17px !important;
}

.repository .file-view.markup pre,
.repository .file-view.markup pre code,
.repository .file-view.markup .code-block,
.repository .file-view.markup .chroma {
  font-size: 18px !important;
  line-height: 1.65 !important;
}

.repository .file-view.markup .chroma span {
  font-size: inherit !important;
}

.repository .file-header,
.repository .file-header * {
  font-size: 15px !important;
}

.repository.file.list #repo-files-table {
  font-size: 16px !important;
}

@media (max-width: 700px) {
  html[data-eko-audience="visitor"] #navbar .eko-visitor-bar {
    padding: 0 16px;
  }

  html[data-eko-audience="visitor"] #navbar .eko-visitor-links {
    gap: 0;
  }

  html[data-eko-audience="visitor"] #navbar .eko-visitor-link {
    padding: 0 7px;
    font-size: 0.8rem;
  }

  html[data-eko-audience="visitor"] #navbar .eko-visitor-link-accent {
    margin-left: 3px;
  }

  html[data-eko-audience="visitor"] .eko-about-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  html[data-eko-audience="visitor"] .eko-visitor-project-intro {
    padding: 38px 0 34px;
  }

  html[data-eko-audience="visitor"] .eko-visitor-project-title {
    font-size: clamp(2.5rem, 15vw, 4.5rem);
  }

  html[data-eko-audience="visitor"] .eko-visitor-source-label {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  html[data-eko-audience="visitor"] #readme.eko-visitor-readme .file-view.markup {
    padding-right: 16px;
    padding-left: 16px;
  }

  .repository .file-view.markup :is(p, li, blockquote, dd, dt, figcaption) {
    font-size: 17px !important;
  }

  .repository .file-view.markup :is(table, thead, tbody, tfoot, tr, td, th) {
    font-size: 16px !important;
  }

  .repository .file-view.markup pre,
  .repository .file-view.markup pre code,
  .repository .file-view.markup .code-block,
  .repository .file-view.markup .chroma {
    font-size: 17px !important;
  }
}