/* bsk: Forgejo in the look of www.billige-softwareklitsche.ai (design:
 * docs/superpowers/specs/2026-10-27-forgejo-branding-design.md, sections 2-4).
 *
 * Built on Forgejo's own dark theme: its variables are re-based on the website's navy, so
 * every page Forgejo draws with them follows. Selector rules only where no variable
 * reaches; each names the Forgejo element it styles, so a Forgejo update's diff of
 * theme-forgejo-dark.css / index.css can be checked against them. After an update:
 * bash tests/test-forgejo-look.sh with FORGEJO_TAG set to the new tag.
 *
 * Website colours: background #0b2545, grid #14315a, text #e8f0ff, muted #b8ccf0,
 * strong #ffffff, accent #8cb4ff. Panels #0e2b50, code #081d38.
 */
@import "./theme-forgejo-dark.css";

/* The website's fonts, served by Forgejo from custom/public/assets/fonts (OFL.txt there). */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* The website's palette, for the rules below. */
  --bsk-bg: #0b2545;
  --bsk-grid: #14315a;
  --bsk-panel: #0e2b50;
  --bsk-code: #081d38;
  --bsk-text: #e8f0ff;
  --bsk-muted: #b8ccf0;
  --bsk-strong: #ffffff;
  --bsk-accent: #8cb4ff;
  /* The website's blueprint grid: 1px lines on a 20px raster. */
  --bsk-grid-image: linear-gradient(var(--bsk-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bsk-grid) 1px, transparent 1px);

  /* Fonts: Plex first, Forgejo's stacks after. */
  --fonts-proportional: "IBM Plex Sans", -apple-system, "Segoe UI", system-ui, "Noto Sans", Roboto, "Helvetica Neue", Arial;
  --fonts-monospace: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, var(--fonts-emoji);

  /* Forgejo's steel scale (900 darkest ... 100 lightest), re-based on the navy. */
  --steel-900: #061730;
  --steel-850: #081d38;
  --steel-800: #0b2545;
  --steel-750: #0e2b50;
  --steel-700: #12335d;
  --steel-650: #163a68;
  --steel-600: #1d4577;
  --steel-550: #2a5488;
  --steel-500: #3a6399;
  --steel-450: #4d74a8;
  --steel-400: #6286b6;
  --steel-350: #7898c3;
  --steel-300: #8eaacf;
  --steel-250: #a3bbda;
  --steel-200: #b8ccf0;
  --steel-150: #d0def8;
  --steel-100: #e8f0ff;

  /* Primary = the website's accent; text on it is navy (the .cta hover). */
  --color-primary: #8cb4ff;
  --color-primary-contrast: #0b2545;
  --color-primary-dark-1: #a3c3ff;
  --color-primary-dark-2: #b5ceff;
  --color-primary-dark-3: #c8dbff;
  --color-primary-dark-4: #dce8ff;
  --color-primary-light-1: #7aa6f5;
  --color-primary-light-2: #6895e6;
  --color-primary-light-3: #4f7bc8;
  --color-primary-light-4: #3d65a8;
  --color-primary-light-5: #2f528c;
  --color-primary-light-6: #254473;
  --color-primary-light-7: #1d3860;
  --color-primary-alpha-10: #8cb4ff19;
  --color-primary-alpha-20: #8cb4ff33;
  --color-primary-alpha-30: #8cb4ff4b;
  --color-primary-alpha-40: #8cb4ff66;
  --color-primary-alpha-50: #8cb4ff80;
  --color-primary-alpha-60: #8cb4ff99;
  --color-primary-alpha-70: #8cb4ffb3;
  --color-primary-alpha-80: #8cb4ffcc;
  --color-primary-alpha-90: #8cb4ffe1;
  --color-primary-hover: var(--color-primary-dark-1);
  --color-primary-active: var(--color-primary-dark-2);
  --color-secondary-alpha-10: #163a6819;
  --color-secondary-alpha-20: #163a6833;
  --color-secondary-alpha-30: #163a684b;
  --color-secondary-alpha-40: #163a6866;
  --color-secondary-alpha-50: #163a6880;
  --color-secondary-alpha-60: #163a6899;
  --color-secondary-alpha-70: #163a68b3;
  --color-secondary-alpha-80: #163a68cc;
  --color-secondary-alpha-90: #163a68e1;

  /* Surfaces: navy page, slightly lighter panels, darker code. */
  --color-body: var(--bsk-bg);
  --color-box-header: var(--steel-700);
  --color-box-body: var(--bsk-panel);
  --color-box-body-highlight: var(--steel-650);
  --color-code-bg: var(--bsk-code);
  --color-markup-code-block: var(--bsk-code);
  --color-markup-code-inline: var(--steel-650);
  --color-markup-table-row: #ffffff08;
  --color-nav-bg: var(--bsk-bg);
  --color-nav-hover-bg: var(--steel-650);
  --color-secondary-nav-bg: var(--bsk-bg);
  --color-header-wrapper: var(--bsk-bg);
  --color-header-wrapper-transparent: #0b254500;
  --color-footer: var(--bsk-code);
  --color-menu: var(--steel-750);
  --color-card: var(--steel-750);
  --color-console-bg: var(--bsk-code);
  --color-console-menu-bg: var(--steel-700);
  --color-console-border: var(--steel-600);
  --color-console-menu-border: var(--steel-550);
  --color-console-active-bg: var(--steel-650);
  --color-input-background: var(--bsk-code);
  --color-input-toggle-background: var(--steel-650);
  --color-input-border: var(--steel-550);
  --color-input-border-hover: var(--steel-450);
  --color-button: transparent;
  --color-expand-button: var(--steel-650);
  --color-tooltip-bg: #061730f0;
  --color-overlay-backdrop: #030c1cc0;
  --color-shadow: #00000080;

  /* Text: the website's text, muted and strong. */
  --color-text: var(--bsk-text);
  --color-text-dark: var(--bsk-strong);
  --color-text-light: var(--bsk-muted);
  --color-text-light-1: var(--bsk-muted);
  --color-text-light-2: #a3bbda;
  --color-text-light-3: #a3bbda;
  --color-input-text: var(--bsk-text);
  --color-caret: var(--bsk-text);
  --color-text-focus: var(--bsk-strong);
  --color-selection-bg: var(--bsk-accent);
  --color-selection-fg: var(--bsk-bg);

  /* Labels (e.g. the repo's counters, topic tags). */
  --color-label-text: var(--bsk-text);
  --color-label-bg: var(--steel-650);
  --color-label-hover-bg: var(--steel-600);
  --color-label-active-bg: var(--steel-550);
  --color-label-bg-alt: var(--steel-600);

  /* Diffs: muted green and red on the code navy. Opaque: Forgejo paints a diff row's <tr>
   * and its <td>s with the same colour, so a translucent one would count twice. Mixed from
   * rgba(80,200,150,.14) and rgba(255,120,120,.13) over the code navy, twice; words stronger. */
  --color-diff-added-row-bg: #1b4a50;
  --color-diff-added-row-border: #2e7668;
  --color-diff-added-word-bg: #2e7668;
  --color-diff-removed-row-bg: #443347;
  --color-diff-removed-row-border: #824a57;
  --color-diff-removed-word-bg: #824a57;
  --color-diff-moved-row-bg: #3f3d3a;
  --color-diff-moved-row-border: #a67a1d;
  --color-diff-inactive: var(--steel-700);

  /* Messages: Forgejo's meanings, on navy. */
  --color-info-border: var(--steel-450);
  --color-info-bg: var(--steel-650);
  --color-info-text: var(--bsk-text);
}

/* Top bar (#navbar): the website's blueprint grid behind the logo and menu. The only grid once
 * signed in (mockup B): every page below it is plain navy, the dashboard too. */
#navbar {
  background-color: var(--bsk-bg);
  background-image: var(--bsk-grid-image);
  background-size: 20px 20px;
  border-bottom-color: var(--bsk-grid);
}

/* Top bar logo (#navbar-logo): the wordmark beside the mark, as the website's header brand. */
#navbar-logo::after {
  content: "billige-softwareklitsche.ai";
  margin-inline-start: .5rem;
  font-family: var(--fonts-monospace);
  font-size: .875rem;
  line-height: 1;
  color: var(--bsk-accent);
  white-space: nowrap;
}

/* Top bar logo below 1024px (phones, tablets, narrow windows): the mark alone, so the menu
 * (with the admin's icons and the longer German labels) does not overflow. */
@media (max-width: 1023.98px) {
  #navbar-logo::after {
    content: none;
  }
}

/* Box headers in settings and admin (h4.ui.top.attached.header): the website's section labels.
 * Not where the header carries user text, which capitals would misquote: the admin's user view
 * (user name), runner pages (runner name), an authorized integration (app name) and a branch
 * protection rule (its pattern, header followed by the form with .branch-protection). */
.page-content:is(.settings, .admin):not(.view, .runners, .authorized-integrations) h4.ui.top.attached.header:not(:has(+ form .branch-protection)) {
  font-family: var(--fonts-monospace);
  font-size: .75rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--bsk-accent);
}

/* An LFS object ID in a settings box header (.sha): lower-case hex as Forgejo shows it. */
.page-content.settings h4.ui.top.attached.header .sha {
  text-transform: none;
  letter-spacing: normal;
}

/* Settings/admin side menu title (.ui.vertical.menu > .header.item): a section label too. */
.page-content:is(.settings, .admin) .ui.vertical.menu > .header.item {
  font-family: var(--fonts-monospace);
  font-size: .75rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--bsk-accent);
}

/* Footer (footer.page-footer, base/footer_content.tmpl): the website's footer — the owner on
 * the left, the legal links (custom/extra_links_footer.tmpl) and the language menu on the
 * right, a grid-coloured rule above, muted text. */
.page-footer {
  border-top: 1px solid var(--bsk-grid);
  color: var(--bsk-muted);
  font-size: .8rem;
  padding: 1rem 1.5rem;
}

/* Forgejo's own footer content goes: .left-links holds "Powered by", the version (shown to
 * admins on admin pages whatever SHOW_FOOTER_VERSION says) and the load times; the licenses
 * and API links sit in .right-links. The language menu stays: it switches the legal links. */
.page-footer .left-links,
.page-footer .right-links > a[href$="/licenses.txt"],
.page-footer .right-links > a[href$="/api/swagger"] {
  display: none;
}

.page-footer .right-links {
  flex: 1;
  justify-content: flex-end;
  gap: .5rem 1rem;
}

.page-footer .ui.dropdown.language {
  font-size: inherit;
}

.page-footer .bsk-footer-owner {
  order: -1;
  margin-inline-end: auto;
}

/* The legal links: spaced like the website's footer, without Forgejo's separators. */
.page-footer .right-links > a.bsk-footer-legal {
  border: 0;
  padding: 0;
  margin: 0;
}

/* Narrow (Forgejo stacks the footer below 880px): centred, the owner on a row of its own. */
@media (max-width: 880px) {
  .page-footer .right-links {
    justify-content: center;
  }

  .page-footer .bsk-footer-owner {
    flex-basis: 100%;
    margin-inline-end: 0;
    text-align: center;
  }
}

/* Buttons (.ui.button, Fomantic): the website's .cta shape — square, mono capitals.
 * .ui.ui.ui outranks Fomantic's variants (.ui.basic.buttons .button sets text-transform). */
.ui.ui.ui.button,
.ui.ui.ui.buttons .button {
  border-radius: 0;
  font-family: var(--fonts-monospace);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* A dropdown menu inside a button (e.g. the clone panel's "more operations"): normal text. */
.ui.ui.ui.button .menu {
  font-family: var(--fonts-regular);
  text-transform: none;
  letter-spacing: normal;
}

/* Plain and basic buttons (no colour class): accent border and accent text, like .cta.
 * Coloured ones (primary, red = danger, green, ...) keep Forgejo's fill in the same shape. */
.ui.ui.ui.button:not(.primary, .red, .green, .teal, .yellow, .orange, .olive, .blue, .violet, .purple, .pink, .brown, .grey, .black) {
  background: transparent;
  border: 1px solid var(--bsk-accent);
  color: var(--bsk-accent);
}

/* Their hover, focus and open state: filled accent with navy text (.cta:hover). */
.ui.ui.ui.button:not(.primary, .red, .green, .teal, .yellow, .orange, .olive, .blue, .violet, .purple, .pink, .brown, .grey, .black):is(:hover, :focus-visible, .active) {
  background: var(--bsk-accent);
  color: var(--bsk-bg);
}

/* Primary buttons (.ui.primary.button): filled accent (variables), navy text, accent border. */
.ui.ui.ui.primary.button,
.ui.ui.ui.primary.buttons .button {
  border: 1px solid var(--bsk-accent);
}

/* Forgejo's own buttons (.button.primary / .secondary / .danger, outside Fomantic): the
 * same shape; colours through their --button-* variables. */
.button {
  border-radius: 0;
  font-family: var(--fonts-monospace);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* Forgejo's secondary button (.button.secondary): accent outline, filled accent on hover. */
.button.secondary {
  --button-border-color: var(--bsk-accent);
  --button-color: var(--bsk-accent);
  --button-background: transparent;
  --button-background-hover: var(--bsk-accent);
  --button-color-hover: var(--bsk-bg);
}

/* Forgejo's primary button (.button.primary): filled accent with an accent border. */
.button.primary {
  --button-border-color: var(--bsk-accent);
}

/* User text in buttons keeps its case (refs are case-sensitive): the branch/tag selector
 * (.branch-dropdown-button), mono SHA buttons, the issue ref selector (.branch-name) and the
 * value a filter dropdown's button shows (compare base/head, PR target branch). */
.ui.ui.ui.button.branch-dropdown-button,
.ui.ui.ui.button.tw-font-mono,
.ui.ui.ui.button .branch-name,
.ui.filter.dropdown .ui.ui.ui.button .text {
  text-transform: none;
  letter-spacing: normal;
}

/* PR "Files changed" summary (.diff-detail-stats): files/additions/deletions in Forgejo's
 * yellow/green/red, the light variants that read on navy. */
.repository .diff-detail-box .diff-detail-stats strong:nth-of-type(1) {
  color: var(--color-yellow-light);
}
.repository .diff-detail-box .diff-detail-stats strong:nth-of-type(2) {
  color: var(--color-thin-green);
}
.repository .diff-detail-box .diff-detail-stats strong:nth-of-type(3) {
  color: var(--color-thin-red);
}

/* 404/500 page number (h1.error-code): Forgejo's grey stripes in the accent blues. */
h1.error-code {
  --error-code-color-1: var(--bsk-accent);
  --error-code-color-2: var(--color-primary-light-3);
}

/* Code line numbers (.lines-num) in file views and diffs: the website's dim blue. */
.lines-num {
  color: #4f6f9c;
}

/* Code highlighting (.chroma, Forgejo's file views, diffs, markdown code): blues for
 * structure, one warm colour for strings. Overrides every colour theme-forgejo-dark sets. */
.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr, .chroma .ow,
.chroma .nt, .chroma .o {
  color: #8cb4ff;
}
.chroma .kt, .chroma .nb, .chroma .bp, .chroma .na, .chroma .nc, .chroma .ne, .chroma .nn,
.chroma .no, .chroma .nd, .chroma .nl, .chroma .m, .chroma .mb, .chroma .mf, .chroma .mh,
.chroma .mi, .chroma .il, .chroma .mo, .chroma .cp, .chroma .cpf {
  color: #9ee7ff;
}
.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 {
  color: #ffd38c;
}
.chroma .c, .chroma .c1, .chroma .ch, .chroma .cm, .chroma .cs, .chroma .go, .chroma .w {
  color: #6f8fbf;
}
.chroma .n, .chroma .nf, .chroma .ni, .chroma .nv, .chroma .vc, .chroma .vg, .chroma .vi,
.chroma .nx, .chroma .p, .chroma .gp, .chroma .gs {
  color: var(--bsk-text);
}
.chroma .gh, .chroma .gu, .chroma .ge {
  color: #8cb4ff;
}
.chroma .gr, .chroma .gt {
  color: #ff9e9e;
}
.chroma .gi {
  color: var(--bsk-text);
  background-color: var(--color-diff-added-word-bg);
}
.chroma .gd {
  color: var(--bsk-text);
  background-color: var(--color-diff-removed-word-bg);
}