/*
 * gierz-mocha — Catppuccin Mocha theme for Forgejo, matched to gierz.eu.
 *
 * MANAGED BY ANSIBLE (roles/forgejo). Edit the template, not the
 * rendered file at /data/gitea/public/assets/css/theme-gierz-mocha.css.
 *
 * Source palette: Catppuccin Mocha, taken verbatim from the gierz.eu
 * site theme (sites/main/themes/mocha/static/styles.css). The site's
 * chosen accent / link colour is Catppuccin BLUE (#89b4fa) — every
 * interactive/hover state in the site CSS (link pills, service cards,
 * footer links) resolves to --blue, so this theme uses blue as the
 * Forgejo primary/accent. (Lavender/green/peach appear only as the
 * prompt glyph, cursor and decorative gradients.)
 *
 * Forgejo v15.0.1 theming convention (verified against gitea/forgejo
 * theme sources): the file MUST be named theme-<name>.css and placed at
 * $GITEA_CUSTOM/public/assets/css/. The theme is selected by filename;
 * its variables are declared on :root. --theme-display-name (via the
 * forgejo-theme-meta-info pseudo-element) sets the label shown in the UI
 * theme picker. --is-dark-theme + color-scheme tell the code editor /
 * chroma highlighting to use dark variants.
 */

forgejo-theme-meta-info {
  --theme-display-name: "Gierz Mocha";
}

:root {
  /* ---- Catppuccin Mocha base palette (from gierz.eu) ------------- */
  --ctp-base: #1e1e2e;
  --ctp-mantle: #181825;
  --ctp-crust: #11111b;
  --ctp-surface0: #313244;
  --ctp-surface1: #45475a;
  --ctp-surface2: #585b70;
  --ctp-overlay0: #6c7086;
  --ctp-overlay1: #7f849c;
  --ctp-overlay2: #9399b2;
  --ctp-text: #cdd6f4;
  --ctp-subtext1: #bac2de;
  --ctp-subtext0: #a6adc8;
  --ctp-blue: #89b4fa;
  --ctp-lavender: #b4befe;
  --ctp-sapphire: #74c7ec;
  --ctp-sky: #89dceb;
  --ctp-teal: #94e2d5;
  --ctp-mauve: #cba6f7;
  --ctp-pink: #f5c2e7;
  --ctp-flamingo: #f2cdcd;
  --ctp-rosewater: #f5e0dc;
  --ctp-red: #f38ba8;
  --ctp-maroon: #eba0ac;
  --ctp-peach: #fab387;
  --ctp-yellow: #f9e2af;
  --ctp-green: #a6e3a1;

  --is-dark-theme: true;

  /* ---- Primary / accent (site accent = Catppuccin blue) --------- */
  --color-primary: var(--ctp-blue);
  --color-primary-contrast: #11111b;
  --color-primary-dark-1: #9fc3fb;
  --color-primary-dark-2: #b4d0fc;
  --color-primary-dark-3: #b4d0fc;
  --color-primary-dark-4: #c9defd;
  --color-primary-dark-5: #c9defd;
  --color-primary-dark-6: #ddebfe;
  --color-primary-dark-7: #f0f7ff;
  --color-primary-light-1: #74a5f9;
  --color-primary-light-2: #5f96f8;
  --color-primary-light-3: #4a87f7;
  --color-primary-light-4: #3578f6;
  --color-primary-light-5: #3578f6;
  --color-primary-light-6: #2069f5;
  --color-primary-light-7: #2069f5;
  --color-primary-alpha-10: #89b4fa19;
  --color-primary-alpha-20: #89b4fa33;
  --color-primary-alpha-30: #89b4fa4b;
  --color-primary-alpha-40: #89b4fa66;
  --color-primary-alpha-50: #89b4fa80;
  --color-primary-alpha-60: #89b4fa99;
  --color-primary-alpha-70: #89b4fab3;
  --color-primary-alpha-80: #89b4facc;
  --color-primary-alpha-90: #89b4fae1;
  --color-primary-hover: var(--color-primary-light-1);
  --color-primary-active: var(--color-primary-light-2);

  /* ---- Secondary (surfaces) ------------------------------------- */
  --color-secondary: var(--ctp-surface0);
  --color-secondary-dark-1: var(--ctp-surface1);
  --color-secondary-dark-2: var(--ctp-surface2);
  --color-secondary-dark-3: var(--ctp-overlay0);
  --color-secondary-dark-4: var(--ctp-overlay0);
  --color-secondary-dark-5: var(--ctp-overlay1);
  --color-secondary-dark-6: var(--ctp-overlay1);
  --color-secondary-dark-7: var(--ctp-overlay2);
  --color-secondary-dark-8: var(--ctp-overlay2);
  --color-secondary-dark-9: var(--ctp-subtext0);
  --color-secondary-dark-10: var(--ctp-subtext1);
  --color-secondary-dark-11: var(--ctp-text);
  --color-secondary-dark-12: var(--ctp-text);
  --color-secondary-dark-13: var(--ctp-text);
  --color-secondary-light-1: var(--ctp-surface1);
  --color-secondary-light-2: var(--ctp-surface0);
  --color-secondary-light-3: var(--ctp-mantle);
  --color-secondary-light-4: var(--ctp-crust);
  --color-secondary-alpha-10: #31324419;
  --color-secondary-alpha-20: #31324433;
  --color-secondary-alpha-30: #3132444b;
  --color-secondary-alpha-40: #31324466;
  --color-secondary-alpha-50: #31324480;
  --color-secondary-alpha-60: #31324499;
  --color-secondary-alpha-70: #313244b3;
  --color-secondary-alpha-80: #313244cc;
  --color-secondary-alpha-90: #313244e1;
  --color-secondary-hover: var(--color-secondary-light-1);
  --color-secondary-active: var(--ctp-surface1);
  --color-secondary-bg: var(--ctp-mantle);

  /* ---- Console (actions log / console files) -------------------- */
  --color-console-fg: var(--ctp-text);
  --color-console-fg-subtle: var(--ctp-subtext0);
  --color-console-bg: var(--ctp-crust);
  --color-console-border: var(--ctp-surface1);
  --color-console-hover-bg: #ffffff16;
  --color-console-active-bg: var(--ctp-surface1);
  --color-console-menu-bg: var(--ctp-mantle);
  --color-console-menu-border: var(--ctp-surface2);

  /* ---- Named colours (Catppuccin equivalents) ------------------- */
  --color-red: var(--ctp-red);
  --color-orange: var(--ctp-peach);
  --color-yellow: var(--ctp-yellow);
  --color-olive: #b5bd68;
  --color-green: var(--ctp-green);
  --color-teal: var(--ctp-teal);
  --color-blue: var(--ctp-blue);
  --color-violet: var(--ctp-lavender);
  --color-purple: var(--ctp-mauve);
  --color-pink: var(--ctp-pink);
  --color-brown: #c8917a;
  --color-grey: var(--ctp-overlay0);
  --color-black: var(--ctp-crust);
  /* light variants */
  --color-red-light: #f5a3bb;
  --color-orange-light: #fbc29e;
  --color-yellow-light: #fae9c0;
  --color-olive-light: #c4cb86;
  --color-green-light: #b8eab4;
  --color-teal-light: #a9e9df;
  --color-blue-light: #9fc3fb;
  --color-violet-light: #c5cdfe;
  --color-purple-light: #d6bbf9;
  --color-pink-light: #f7cfec;
  --color-brown-light: #d4a896;
  --color-grey-light: var(--ctp-overlay1);
  --color-black-light: var(--ctp-mantle);
  /* dark 1 variants */
  --color-red-dark-1: #f178a0;
  --color-orange-dark-1: #f9a571;
  --color-yellow-dark-1: #f7db98;
  --color-olive-dark-1: #a6af6a;
  --color-green-dark-1: #94dd8e;
  --color-teal-dark-1: #82dccc;
  --color-blue-dark-1: #74a5f9;
  --color-violet-dark-1: #a3aefe;
  --color-purple-dark-1: #c195f5;
  --color-pink-dark-1: #f2b5e1;
  --color-brown-dark-1: #bd8266;
  --color-black-dark-1: var(--ctp-crust);
  /* dark 2 variants */
  --color-red-dark-2: #ee6590;
  --color-orange-dark-2: #f79860;
  --color-yellow-dark-2: #f5d480;
  --color-olive-dark-2: #99a35e;
  --color-green-dark-2: #82d77b;
  --color-teal-dark-2: #6fd6c3;
  --color-blue-dark-2: #5f96f8;
  --color-violet-dark-2: #919ffe;
  --color-purple-dark-2: #b784f3;
  --color-pink-dark-2: #efa8db;
  --color-brown-dark-2: #b27559;
  --color-black-dark-2: var(--ctp-base);

  /* ---- ANSI colours (console) ----------------------------------- */
  --color-ansi-black: var(--ctp-surface1);
  --color-ansi-red: var(--ctp-red);
  --color-ansi-green: var(--ctp-green);
  --color-ansi-yellow: var(--ctp-yellow);
  --color-ansi-blue: var(--ctp-blue);
  --color-ansi-magenta: var(--ctp-mauve);
  --color-ansi-cyan: var(--ctp-teal);
  --color-ansi-white: var(--ctp-subtext0);
  --color-ansi-bright-black: var(--ctp-overlay0);
  --color-ansi-bright-red: var(--ctp-maroon);
  --color-ansi-bright-green: #b8eab4;
  --color-ansi-bright-yellow: var(--ctp-yellow);
  --color-ansi-bright-blue: var(--ctp-lavender);
  --color-ansi-bright-magenta: var(--ctp-pink);
  --color-ansi-bright-cyan: var(--ctp-sky);
  --color-ansi-bright-white: var(--ctp-text);

  /* ---- Other named colours -------------------------------------- */
  --color-gold: var(--ctp-yellow);
  --color-white: #ffffff;
  --color-pure-black: #000000;

  /* ---- Diff colours --------------------------------------------- */
  --color-diff-removed-word-bg: #5a2a36;
  --color-diff-added-word-bg: #2a4a39;
  --color-diff-removed-row-bg: #3a2230;
  --color-diff-moved-row-bg: #4a3a22;
  --color-diff-added-row-bg: #233a2c;
  --color-diff-removed-row-border: #5a2a36;
  --color-diff-moved-row-border: #6a5a30;
  --color-diff-added-row-border: #2a4a39;
  --color-diff-inactive: var(--ctp-surface0);

  /* ---- Status: error / success / warning / info ----------------- */
  --color-error-border: #5a2a36;
  --color-error-bg: #45222e;
  --color-error-bg-active: #5a2a36;
  --color-error-bg-hover: #5a2a36;
  --color-error-text: var(--ctp-red);
  --color-success-border: #2a5238;
  --color-success-bg: #23402d;
  --color-success-text: var(--ctp-green);
  --color-warning-border: #6a5a30;
  --color-warning-bg: #4a3f24;
  --color-warning-text: var(--ctp-yellow);
  --color-info-border: #3a4a7a;
  --color-info-bg: #283250;
  --color-info-text: var(--ctp-blue);

  /* ---- Badges --------------------------------------------------- */
  --color-red-badge: var(--ctp-red);
  --color-red-badge-bg: #f38ba822;
  --color-red-badge-hover-bg: #f38ba844;
  --color-green-badge: var(--ctp-green);
  --color-green-badge-bg: #a6e3a122;
  --color-green-badge-hover-bg: #a6e3a144;
  --color-yellow-badge: var(--ctp-yellow);
  --color-yellow-badge-bg: #f9e2af22;
  --color-yellow-badge-hover-bg: #f9e2af44;
  --color-orange-badge: var(--ctp-peach);
  --color-orange-badge-bg: #fab38722;
  --color-orange-badge-hover-bg: #fab38744;

  /* ---- Thin elements (octicons, text, borders) ------------------ */
  --thin-lightness: 0.78;
  --regular-chroma: 0.12;
  --color-thin-green: oklch(var(--thin-lightness) var(--regular-chroma) 145deg);
  --color-thin-red: oklch(var(--thin-lightness) var(--regular-chroma) 27deg);
  --color-thin-purple: oklch(var(--thin-lightness) var(--regular-chroma) 298deg);
  --color-thin-orange: oklch(var(--thin-lightness) var(--regular-chroma) 41deg);
  --thin-lightness-highlight: 0.85;
  --color-thin-red-highlight: oklch(var(--thin-lightness-highlight) var(--regular-chroma) 27deg);

  /* ---- Danger button bg ----------------------------------------- */
  --bg-lightness: 0.30;
  --bg-chroma: 0.06;
  --color-danger-bg: oklch(var(--bg-lightness) var(--bg-chroma) 20deg);

  /* ---- Target-based colours (page chrome) ----------------------- */
  --color-body: var(--ctp-base);
  --color-box-header: var(--ctp-mantle);
  --color-box-body: var(--ctp-base);
  --color-box-body-highlight: var(--ctp-surface0);
  --color-text-dark: var(--ctp-text);
  --color-text: var(--ctp-text);
  --color-text-light: var(--ctp-subtext1);
  --color-text-light-1: var(--ctp-subtext1);
  --color-text-light-2: var(--ctp-subtext0);
  --color-text-light-3: var(--ctp-overlay1);
  --color-footer: var(--ctp-mantle);
  --color-timeline: var(--ctp-surface1);
  --color-input-text: var(--ctp-text);
  --color-input-background: var(--ctp-mantle);
  --color-input-toggle-background: var(--ctp-surface0);
  --color-input-border: var(--ctp-surface1);
  --color-input-border-hover: var(--ctp-surface2);
  --color-header-wrapper: var(--ctp-mantle);
  --color-header-wrapper-transparent: #18182500;
  --color-light: #00000028;
  --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));
  --color-light-border: #ffffff20;
  --color-hover: var(--ctp-surface0);
  --color-active: var(--ctp-surface1);
  --color-menu: var(--ctp-mantle);
  --color-card: var(--ctp-mantle);
  --fancy-card-bg: var(--ctp-surface0);
  --fancy-card-border: var(--ctp-surface1);
  --color-markup-table-row: #ffffff06;
  --color-markup-code-block: var(--ctp-mantle);
  --color-markup-code-inline: var(--ctp-surface0);
  --color-button: var(--ctp-surface0);
  --color-code-bg: var(--ctp-base);
  --color-code-sidebar-bg: var(--ctp-mantle);
  --color-shadow: #00000060;
  --color-text-focus: var(--ctp-text);
  --color-expand-button: var(--ctp-surface1);
  --color-placeholder-text: var(--ctp-overlay0);
  --color-editor-line-highlight: var(--ctp-surface0);
  --color-project-board-bg: var(--ctp-mantle);
  --color-project-board-dark-label: var(--ctp-overlay1);
  --color-caret: var(--ctp-text);
  --color-reaction-bg: #ffffff12;
  --color-reaction-active-bg: var(--color-primary-alpha-30);
  --color-reaction-hover-bg: var(--color-primary-alpha-40);
  --color-tooltip-text: var(--ctp-text);
  --color-tooltip-bg: #11111bf0;
  --color-nav-bg: var(--ctp-crust);
  --color-nav-hover-bg: var(--ctp-surface0);
  --color-secondary-nav-bg: var(--color-body);
  --color-label-text: var(--ctp-text);
  --color-label-bg: var(--ctp-surface0);
  --color-label-hover-bg: var(--ctp-surface1);
  --color-label-active-bg: var(--ctp-surface2);
  --color-label-bg-alt: var(--ctp-surface1);
  --color-accent: var(--ctp-blue);
  --color-small-accent: var(--color-primary-light-5);
  --color-highlight-fg: var(--ctp-lavender);
  --color-highlight-bg: var(--color-primary-alpha-20);
  --color-overlay-backdrop: #080808c0;
  --color-selection-bg: var(--ctp-surface2);
  --color-selection-fg: var(--ctp-text);

  /* ---- Image-diff checkerboard ---------------------------------- */
  --checkerboard-color-1: var(--ctp-surface1);
  --checkerboard-color-2: var(--ctp-surface0);

  /* ---- Presence indicators -------------------------------------- */
  --color-indicator-offline: var(--ctp-overlay0);
  --color-indicator-offline-20: #6c70861a;
  --color-indicator-idle: var(--ctp-yellow);
  --color-indicator-idle-20: #f9e2af1a;
  --color-indicator-active: var(--ctp-green);
  --color-indicator-active-20: #a6e3a133;

  accent-color: var(--color-accent);
  color-scheme: dark;

  /* ---- Fonts (mono chrome, matching gierz.eu) ------------------- *
   * Forgejo v15 derives the UI font from --fonts-regular, which is
   *   var(--fonts-override, var(--fonts-proportional)), …
   * so overriding --fonts-proportional makes ALL chrome (headings,
   * nav, labels, buttons, prose) use the site's mono stack while
   * leaving --fonts-monospace untouched for code/diffs. The stack
   * mirrors gierz.eu styles.css verbatim: Maple Mono NF first (used
   * on the landing page where it's installed locally), JetBrains
   * Mono as the self-hosted web fallback (@font-face below), then
   * the generic mono chain. JetBrains Mono carries the emoji subset
   * via --fonts-emoji so flags/reactions still render. */
  --fonts-proportional: "Maple Mono NF", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace, var(--fonts-emoji);
  --fonts-monospace: "JetBrains Mono", "Maple Mono NF", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace, var(--fonts-emoji);
}

/* =====================================================================
 * COMPONENT LAYER — visual extension of gierz.eu
 *
 * Everything below styles real Forgejo v15.0.1 surfaces so the forge
 * reads as the same product family as the gierz.eu landing card, not
 * "Forgejo recolored". Selectors verified against forgejo v15.0.1
 * sources (templates/base/head*.tmpl, web_src/css/{base,modules/*}.css).
 *
 * Tokens (radii, glass, gradients, lift) are lifted verbatim from
 * sites/main/themes/mocha/static/styles.css — not re-derived. The ctp-*
 * palette vars declared in :root above are reused directly.
 *
 * Scope: this whole stylesheet only loads when the gierz-mocha theme is
 * active (Forgejo selects themes by the theme-<name>.css filename), so
 * light-theme users are untouched. No filename-scoped :root selector
 * exists in v15 (forgejo-dark itself uses bare :root) — file-level
 * loading is the isolation boundary.
 *
 * Glass / radii / lift idioms (from styles.css):
 *   panel bg   rgba(24,24,37,.75) + blur(14px) + 1px surface1 + 14px
 *   tile       10px radius
 *   pill       999px radius   (Forgejo: --border-radius-full 99999px)
 *   section    mono / uppercase / .12em / overlay1
 *   hover      blue border + blue text + translateY(-1px..-2px)
 * ===================================================================== */

/* ---- Self-hosted JetBrains Mono (OFL 1.1) -------------------------- *
 * woff2 deployed by the role to $GITEA_CUSTOM/public/assets/fonts/,
 * served at /assets/fonts/. Maple Mono NF is preferred when locally
 * installed (as on gierz.eu); these are the web fallback so the mono
 * chrome holds on machines without Maple. font-display:swap keeps text
 * visible during load on dense pages. */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/JetBrainsMono-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/JetBrainsMono-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/JetBrainsMono-Bold.woff2") format("woff2");
}

/* ---- Page background ---------------------------------------------- *
 * The gierz.eu body treatment: base + two radial gradients + a masked
 * 32px grid. Applied to <body> (fixed-attachment so it doesn't scroll
 * with dense content) and the grid to body::before, exactly as on the
 * landing page. Kept subtle so file-trees / diffs stay legible. */
body {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(137,180,250,0.08), transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(203,166,247,0.07), transparent 60%),
    var(--ctp-base);
  background-attachment: fixed;
  /* Default body font to the same mono stack the cards use. Forgejo's
   * own index.css sets a sans body in production, but standalone pages
   * (mockups, custom templates without the upstream chrome) need a
   * baseline so they don't fall through to UA-default Times New Roman. */
  font-family: var(--fonts-monospace);
  color: var(--ctp-text);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(205,214,244,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(205,214,244,0.025) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 40%, transparent 90%);
}
/* Page content sits above the decorative grid. */
.full.height,
#navbar,
.page-content,
footer.page-footer {
  position: relative;
  z-index: 1;
}

/* ---- Section labels ----------------------------------------------- *
 * Mono / uppercase / .12em / overlay1, matching .section-label. Forgejo
 * uses .ui.header subheaders and .divider.text for section captions. */
.ui.attached.header .ui.sub.header,
.ui.segment > .ui.sub.header,
.repository .header-wrapper .ui.sub.header,
.ui.dividing.header {
  letter-spacing: 0.04em;
}

/* =====================================================================
 * GLASS PANELS
 * Translucent card treatment from .card. Applied to the OUTERMOST box
 * of each surface only; nested .attached children are made transparent
 * so we don't stack blur into mud on dense pages.
 * ===================================================================== */
.ui.segment,
.ui.segments,
.ui.card,
.ui.cards > .card,
.repository .ui.segment,
.repository #issuecomment .comment .content > .ui.segment,
.dashboard.feeds .ui.segment,
.dashboard .small-menu-items,
.user.signin .ui.form,
.user.signin .ui.segment,
.user.signup .ui.segment,
.activity-bar,
.repo-home-sidebar-bottom .ui.segment {
  background: rgba(24, 24, 37, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--ctp-surface1);
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 30px 60px -20px rgba(0,0,0,0.6);
}

/* De-glass nested / attached children so only the outer shell blurs.
 * .attached segments are visually-joined stacks — give the GROUP one
 * glass shell and make the members transparent with hairline dividers. */
.ui.attached.segment,
.ui.attached.header,
.ui.segments > .segment,
.ui.card > .content,
.ui.segment .ui.segment,
.ui.segment .ui.attached,
.repository .ui.attached.table,
.comment-list .ui.segment .ui.segment {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
/* A run of attached boxes = one card: glass on the first, border around
 * the whole run, hairline separators between. */
.ui.attached:not(:last-child) {
  border-bottom: 1px solid var(--ctp-surface1);
}
.ui.top.attached.header,
.ui.attached.header {
  background: rgba(24, 24, 37, 0.55);
  border-color: var(--ctp-surface1);
}

/* Box headers (repo file list bar, issue boxes) keep the mantle tone. */
.ui.attached.header,
.repository .ui.segment.metas,
.commit-header {
  border-radius: 14px 14px 0 0;
}

/* =====================================================================
 * CODE / DIFF / FILE-TREE — keep crisp. Explicitly NOT glass / blurred /
 * over-rounded. These are work surfaces; legibility beats decoration.
 * ===================================================================== */
.code-view,
.file-view,
.diff-file-box,
.diff-file-body,
.repository .diff-box,
.repository .file-content,
.tab-size-8,
.lines-code,
.lines-num,
pre.code,
.CodeMirror,
.monaco-editor,
.file-tree,
.repo-file-tree,
.ui.table.unstackable td {
  background: var(--ctp-base);
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.diff-file-box,
.file-content.repo-view-content,
.repository .file-content {
  border-radius: var(--border-radius-medium);
}

/* =====================================================================
 * NAVBAR / HEADER + SIDEBARS — crust/mantle glass, mono nav, blue active
 * ===================================================================== */
#navbar {
  background: rgba(17, 17, 27, 0.78);          /* crust, translucent */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ctp-surface1);
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset;
}
#navbar .item,
.navbar-left .item,
.navbar-right .item {
  font-family: var(--fonts-proportional);
  font-weight: var(--font-weight-medium);
}
#navbar .item:hover,
#navbar .active.item {
  color: var(--ctp-blue);
}
#navbar .active.item {
  box-shadow: inset 0 -2px 0 var(--ctp-blue);
}

/* Secondary / tabbed nav under the repo header. */
.secondary-nav,
.repository .header-wrapper {
  background: rgba(24, 24, 37, 0.55);
  border-bottom: 1px solid var(--ctp-surface1);
}

/* Left/right sidebars (dashboard, repo settings, org) — mantle glass. */
.ui.secondary.vertical.menu,
.repository.settings .ui.vertical.menu,
.dashboard .ui.vertical.menu,
.organization .ui.vertical.menu {
  background: rgba(24, 24, 37, 0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--ctp-surface1);
  border-radius: 14px;
}
.ui.secondary.vertical.menu .item {
  font-family: var(--fonts-proportional);
  border-radius: 10px;
}
.ui.secondary.vertical.menu .active.item {
  background: var(--color-primary-alpha-20);
  color: var(--ctp-blue);
}

/* =====================================================================
 * BUTTONS — pill-leaning, mono, surface0/blue, lift on hover.
 * v15 has both a native .button (uses --border-radius/--font-weight-medium)
 * and Fomantic .ui.button. Style both.
 * ===================================================================== */
.button,
.ui.button {
  font-family: var(--fonts-proportional);
  font-weight: var(--font-weight-medium);
  border-radius: 999px;
  background: var(--ctp-surface0);
  border: 1px solid var(--ctp-surface1);
  color: var(--ctp-text);
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    background 0.15s ease,
    transform 0.15s ease;
}
.button:hover,
.ui.button:hover {
  background: rgba(137,180,250,0.08);
  border-color: var(--ctp-blue);
  color: var(--ctp-blue);
  transform: translateY(-1px);
}
.button:active,
.ui.button:active {
  transform: translateY(0);
}
/* Primary = blue, dark contrast text. */
.button.primary,
.ui.primary.button,
.ui.primary.buttons .button {
  background: var(--ctp-blue);
  border-color: var(--ctp-blue);
  color: var(--ctp-crust);
}
.button.primary:hover,
.ui.primary.button:hover {
  background: var(--color-primary-light-1);
  border-color: var(--color-primary-light-1);
  color: var(--ctp-crust);
  transform: translateY(-1px);
}
/* Basic = ghost: transparent, blue on hover. */
.ui.basic.button {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--ctp-surface1);
  border-color: transparent;
  color: var(--ctp-subtext1);
}
.ui.basic.button:hover {
  background: rgba(137,180,250,0.08);
  box-shadow: inset 0 0 0 1px var(--ctp-blue);
  color: var(--ctp-blue);
}
/* Grouped buttons (e.g. clone/branch dropdowns) keep square inner edges
 * but rounded outer caps — don't pill every segment of a group. */
.ui.buttons .button {
  border-radius: 0;
}
.ui.buttons .button:first-child { border-radius: 999px 0 0 999px; }
.ui.buttons .button:last-child  { border-radius: 0 999px 999px 0; }

/* =====================================================================
 * LINKS / INPUTS / LABELS / TABS / PILLS
 * ===================================================================== */
/* Links blue (matches site interactive colour). Exclude chrome that is
 * itself an <a> styled as a button/menu item. */
.page-content a:not(.button):not(.item):not(.label):not(.ui.basic.button),
.markup a,
.repository .file-info a {
  color: var(--ctp-blue);
}
.page-content a:not(.button):not(.item):not(.label):hover {
  color: var(--color-primary-light-1);
}

/* Inputs: surface0 fill, surface1 border, blue focus ring. */
.ui.input > input,
.ui.form input:not([type]),
.ui.form input[type="text"],
.ui.form input[type="password"],
.ui.form input[type="email"],
.ui.form input[type="search"],
.ui.form input[type="url"],
.ui.form input[type="number"],
.ui.form textarea,
.ui.selection.dropdown {
  background: var(--ctp-surface0);
  border: 1px solid var(--ctp-surface1);
  border-radius: 10px;
  color: var(--ctp-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ui.input > input:focus,
.ui.form input:focus,
.ui.form textarea:focus,
.ui.selection.dropdown:focus,
.ui.selection.active.dropdown {
  border-color: var(--ctp-blue);
  box-shadow: 0 0 0 2px var(--color-primary-alpha-30);
}

/* Labels + branch/tag pills → rounded pills, mono. */
.ui.label,
.ui.labels .label,
.branch-tag-row .label,
.repo-button-row .label,
.scope-label {
  font-family: var(--fonts-proportional);
  border-radius: 999px;
}
.ui.basic.label {
  border-radius: 999px;
}
/* Branch / tag selector chips stay readable, lightly rounded. */
.branch-dropdown-button,
.ui.button.branch-name {
  border-radius: 999px;
}

/* Tabs: active tab in blue with a blue underline. */
.ui.tabular.menu .active.item,
.ui.secondary.pointing.menu .active.item,
.repository .navbar .active.item {
  color: var(--ctp-blue);
  border-color: var(--ctp-blue);
}
.ui.secondary.pointing.menu .item:hover {
  color: var(--ctp-blue);
}

/* Dashboard activity feed rows — keep flat inside the glass shell. */
.dashboard.feeds .news .ui.feed > .event {
  background: transparent;
}

/* Login / signup card — single prominent glass panel, centered feel. */
.user.signin .ui.grid .column,
.user.signup .ui.grid .column,
.user.activate .ui.grid .column {
  --color-box-body: transparent;
}

/* =====================================================================
 * USABILITY GUARDRAILS
 * - No entry/blink animations on panels (transitions only).
 * - Respect prefers-reduced-motion.
 * ===================================================================== */
.ui.segment,
.ui.card,
#navbar,
.ui.secondary.vertical.menu {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .button,
  .ui.button,
  .ui.input > input,
  .ui.form input,
  .ui.form textarea,
  .secondary-nav .item,
  #navbar .item {
    transition: none;
  }
}

/* =====================================================================
 * NAVBAR — focused tweaks (added 2026-06-03 review).
 * Earlier rules above set the translucent crust bg; these go further:
 * monospace items, sharper border, hidden upstream Help link, larger
 * hover hit-area, and a gierz-mark next to the logo via CSS pseudo.
 * ===================================================================== */

#navbar {
  /* Slightly less transparent so the navbar reads as a distinct band
   * over the page background. */
  background: rgba(24, 24, 37, 0.86) !important;   /* mantle, 86% */
  border-bottom: 1px solid var(--ctp-surface1) !important;
  padding: 0.35rem 1rem !important;
}

#navbar .item,
.navbar-left .item,
.navbar-right .item {
  /* Mono everywhere on the chrome — matches the landing/login prompts. */
  font-family: var(--fonts-monospace) !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  letter-spacing: 0;
  padding: 0.5rem 0.85rem !important;
  color: var(--ctp-subtext) !important;
  border-radius: 6px;
}
#navbar .item:hover {
  color: var(--ctp-blue) !important;
  background: rgba(137, 180, 250, 0.08) !important;
}
#navbar .active.item {
  color: var(--ctp-blue) !important;
  box-shadow: inset 0 -2px 0 var(--ctp-blue) !important;
}

/* Logo link: keep image small, tight padding. */
#navbar-logo {
  padding: 0.25rem 0.6rem !important;
}
#navbar-logo img {
  height: 24px;
  width: auto;
}

/* Hide the "Help" link that points at forgejo.org — out-of-scope for
 * a private homelab; replaced (or just removed) per the unified-portal
 * cleanup. CSS-only hide so we don't need a template override for it. */
#navbar .item[href*="forgejo.org"] {
  display: none !important;
}

/* The user/login button on the right gets a bit more pop. */
#navbar .navbar-right .item[href*="/user/login"] {
  background: rgba(137, 180, 250, 0.10) !important;
  color: var(--ctp-blue) !important;
}
#navbar .navbar-right .item[href*="/user/login"]:hover {
  background: rgba(137, 180, 250, 0.20) !important;
  color: var(--ctp-lavender) !important;
}

/* Hide the navbar entirely on the logged-out home page. The custom
 * home.tmpl carries its own "card" with explore/help tiles + bottom
 * prompt, so the upstream navbar is redundant noise there. Scoped via
 * :has(.page-content.home) so the navbar stays on every other page
 * (dashboard, repo views, settings) where it's actually needed. */
body:has(.page-content.home) #navbar,
body:has(.page-content.user.signin) #navbar,
body:has(.page-content.user.signin) .page-footer {
  display: none !important;
}

/* =====================================================================
 * HOME PAGE — gierz code landing
 * Consumed by roles/forgejo/files/home.tmpl. The page renders a single
 * mocha glass card containing a shell-prompt heading, fake
 * `systemctl status forgejo.service` output, a row of action tiles,
 * and a clickable login prompt at the bottom. All classnames are
 * `gh-` (gierz-home) prefixed to avoid colliding with Forgejo/Fomantic.
 * ===================================================================== */

.gh-page { max-width: 820px; margin: 0 auto; padding: 3.5rem 1rem 5rem; }

/* Card geometry matches sites/themes/mocha .card (gierz.xyz landing)
 * exactly — same padding, radius, border, blur, shadow — so the two
 * cards look like part of the same design system when seen side-by-
 * side. If you change one, change the other. */
.gh-card {
  background: rgba(24, 24, 37, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--ctp-surface1);
  border-radius: 14px;
  padding: 2.5rem 2.25rem;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 30px 60px -20px rgba(0,0,0,0.6);
  font-family: var(--fonts-monospace);
  color: var(--ctp-text);
}

.gh-dir,
.gh-cmd-line {
  font-size: 1rem;
  line-height: 1.6;
}
.gh-dir { color: var(--ctp-sapphire); font-weight: 700; }
.gh-cmd-line { margin-top: 0.1rem; }
.gh-prompt { color: var(--ctp-green); font-weight: 700; margin-right: 0.6ch; }
.gh-cmd { color: var(--ctp-text); }

/* Typing animation on the cmd line — mirrors the .cmd-wrap technique
 * on gierz.xyz. Width 0 → <chars>ch, steps(40) for that classic
 * typewriter feel. Forgejo's home page only loads once (no flow
 * stages), so the animation never replays after first paint. */
.gh-cmd-wrap {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: bottom;
  width: 0;
  max-width: 100%;
  animation: gh-type-cmd calc(0.35s + var(--cmd-chars, 10) * 0.025s)
             steps(40, end) 0.1s forwards;
}
@keyframes gh-type-cmd {
  from { width: 0; }
  to   { width: calc(var(--cmd-chars, 10) * 1ch); }
}
@media (prefers-reduced-motion: reduce) {
  .gh-cmd-wrap { animation: none; width: auto; }
}

/* Staggered fade-in for each labelled help block — matches the
 * .reveal pattern on the gierz.xyz landing. Per-element delay is
 * set inline via style="animation-delay: …s" in home.tmpl so
 * Forgejo doesn't need to know the layout to time it. */
.gh-reveal {
  opacity: 0;
  animation: gh-reveal 0.2s ease-out forwards;
}
@keyframes gh-reveal {
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .gh-reveal { animation: none; opacity: 1; }
}

/* systemctl-style output block. */
.gh-status { margin-top: 1.2rem; line-height: 1.7; }
.gh-status .dot   { color: var(--ctp-green); font-weight: 700; }
.gh-status .svc   { color: var(--ctp-text);  font-weight: 600; }
.gh-status .desc  { color: var(--ctp-subtext); }
.gh-status .label { color: var(--ctp-overlay0); }
.gh-status .val   { color: var(--ctp-subtext); }
.gh-status .ok    { color: var(--ctp-green);   font-weight: 600; }

/* `tea --help`-styled body: tagline, USAGE/COMMANDS/OPTIONS sections,
 * a definition-list of clickable command names with descriptions. The
 * structure mirrors actual tea CLI output so the page reads as if
 * you'd run `tea --help` on a freshly-set-up workstation. */
.gh-help { margin-top: 1.4rem; font-family: var(--fonts-monospace); }
.gh-help-tagline {
  margin: 0 0 1.3rem;
  font-size: 1rem;
  color: var(--ctp-text);
  line-height: 1.6;
}
.gh-help-tagline strong { color: var(--ctp-blue); font-weight: 700; }
.gh-help-host { color: var(--ctp-sapphire); font-weight: 600; }

.gh-help-section {
  font-family: var(--fonts-monospace);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ctp-overlay1);
  text-transform: uppercase;
  margin: 1.4rem 0 0.4rem;
}
.gh-help-line {
  font-family: var(--fonts-monospace);
  margin: 0 0 0.5rem;
  color: var(--ctp-subtext);
  font-size: 1rem;
  white-space: pre-wrap;
  line-height: 1.6;
}
.gh-help-group {
  font-family: var(--fonts-monospace);
  margin: 0.6rem 0 0.25rem;
  padding-left: 0.25rem;
  color: var(--ctp-mauve);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0;
}
.gh-help-cmds {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1.6rem;
  row-gap: 0.2rem;
  margin: 0 0 0.4rem 1.5rem;
  font-size: 1rem;
}
.gh-help-cmds dt { font-weight: 600; }
.gh-help-cmds dt a {
  color: var(--ctp-sapphire);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.gh-help-cmds dt a:hover {
  color: var(--ctp-blue);
  border-bottom-color: var(--ctp-blue);
}
.gh-help-cmds dd { margin: 0; color: var(--ctp-subtext); }

.gh-bottom {
  margin-top: 1.75rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--ctp-surface1);
  font-size: 1rem;
  line-height: 1.6;
}
.gh-bottom a {
  color: var(--ctp-text);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.gh-bottom a:hover {
  color: var(--ctp-blue);
  border-bottom-color: var(--ctp-blue);
}