/*
 * Signal theme for Gitea 28.3. Source: arcyn-homelab/gitea/custom/public/assets/css/theme-signal.css
 * Gitea --color-* variables stay hex because Gitea JS parses some of them (charts, 3D viewer).
 */
gitea-theme-meta-info {
  --theme-display-name: "Signal";
  --theme-color-scheme: "dark";
}

@font-face {
  font-family: "Wanted Sans Variable";
  src: url("../fonts/WantedSansVariable.woff2") format("woff2");
  font-weight: 400 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-latin-wght.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. Signal tokens (new parts) ---------- */
:root {
  --sg-bg: #0d0e11;
  --sg-s1: #131518;
  --sg-s2: #1c1e22;
  --sg-s3: #23252a;
  --sg-inset: #090a0d;
  --sg-line: #2b2e32;
  --sg-line-strong: #71757a;
  --sg-text: #edeef1;
  --sg-text2: #bbbec3;
  --sg-text3: #a1a5ab;
  --sg-accent: #bdf952;
  --sg-on-accent: #121909;
  --sg-ring: #bdf952;
  --sg-ok: #73d4ac;
  --sg-warn: #f4c26a;
  --sg-danger: #fb817a;
  --sg-info: #87c6f2;
  --sg-done: #b0aff5;
  --sg-hover: #edeef10d;
  --sg-selected: #bdf9521a;
  --sg-accent-hover: #cefc88;
  --sg-accent-press: #a7dc48;
  --sg-shadow: 0 16px 40px -8px #000000a6, 0 0 0 1px var(--sg-line);
  --sg-font-ui: "Wanted Sans Variable", -apple-system, "Segoe UI", system-ui, sans-serif;
  --sg-font-code: "JetBrains Mono", "Wanted Sans Variable", ui-monospace, monospace;
  --sg-fs-meta: 12px;
  --sg-fs-body: 14px;
  --sg-fs-code: 14px;
  --sg-fs-h3: 16px;
  --sg-fs-h2: clamp(18px, 0.95rem + 0.4vw, 20px);
  --sg-fs-h1: clamp(24px, 1.2rem + 0.8vw, 28px);
  --sg-r-control: 6px;
  --sg-r-panel: 8px;
  --sg-r-chip: 4px;
  --sg-ctl: 32px;
  --sg-row: 36px;
  --sg-tab: 40px;
  --sg-rail: 64px;
  --sg-bar: 56px;
  --sg-touch: 44px;
  --sg-dur-color: 70ms;
  --sg-dur-overlay: 120ms;
  --sg-dur-drawer: 160ms;
  --sg-ease: cubic-bezier(0.2, 0, 0, 1);
}
@supports (color: oklch(0 0 0)) {
  :root {
    --sg-bg: oklch(0.165 0.006 260);
    --sg-s1: oklch(0.195 0.007 260);
    --sg-s2: oklch(0.235 0.008 260);
    --sg-s3: oklch(0.265 0.009 260);
    --sg-inset: oklch(0.145 0.006 260);
    --sg-line: oklch(0.3 0.008 260);
    --sg-line-strong: oklch(0.56 0.01 260);
    --sg-text: oklch(0.95 0.004 260);
    --sg-text2: oklch(0.8 0.008 260);
    --sg-text3: oklch(0.72 0.01 260);
    --sg-accent: oklch(0.91 0.2 127);
    --sg-on-accent: oklch(0.2 0.03 127);
    --sg-ring: oklch(0.91 0.2 127);
    --sg-ok: oklch(0.8 0.11 165);
    --sg-warn: oklch(0.84 0.12 80);
    --sg-danger: oklch(0.74 0.15 25);
    --sg-info: oklch(0.8 0.09 240);
    --sg-done: oklch(0.78 0.1 285);
    --sg-hover: oklch(0.95 0.004 260 / 0.05);
    --sg-selected: color-mix(in oklch, var(--sg-accent) 10%, transparent);
    --sg-accent-hover: color-mix(in oklch, var(--sg-accent), white 18%);
    --sg-accent-press: color-mix(in oklch, var(--sg-accent), black 12%);
  }
}
@supports (color: oklch(from red l c h)) {
  :root {
    --sg-accent-hover: oklch(from var(--sg-accent) calc(l + 0.04) c h);
    --sg-accent-press: oklch(from var(--sg-accent) calc(l - 0.08) c h);
  }
}

/* ---------- 2. Gitea variables (all names from theme-gitea-dark 28.3.0) ---------- */
:root {
  --is-dark-theme: true;
  --color-primary: #bdf952;
  --color-primary-contrast: #121909;
  --color-primary-dark-1: #cefc88;
  --color-primary-dark-2: #d8fea2;
  --color-primary-dark-3: #dfffb2;
  --color-primary-dark-4: #e5ffc2;
  --color-primary-dark-5: #ecffd1;
  --color-primary-dark-6: #efffd8;
  --color-primary-dark-7: #f3ffdf;
  --color-primary-light-1: #a7dc48;
  --color-primary-light-2: #92c03e;
  --color-primary-light-3: #7aa233;
  --color-primary-light-4: #5e7e25;
  --color-primary-light-5: #3f5617;
  --color-primary-light-6: #25340a;
  --color-primary-light-7: #141e04;
  --color-primary-alpha-10: #bdf9521a;
  --color-primary-alpha-20: #bdf95233;
  --color-primary-alpha-30: #bdf9524c;
  --color-primary-alpha-40: #bdf95266;
  --color-primary-alpha-50: #bdf95280;
  --color-primary-alpha-60: #bdf95299;
  --color-primary-alpha-70: #bdf952b2;
  --color-primary-alpha-80: #bdf952cc;
  --color-primary-alpha-90: #bdf952e6;
  --color-primary-hover: var(--color-primary-dark-1);
  --color-primary-active: var(--color-primary-light-1);
  --color-secondary: #2b2e32;
  --color-secondary-dark-1: #36393d;
  --color-secondary-dark-2: #414448;
  --color-secondary-dark-3: #4d5054;
  --color-secondary-dark-4: #595c60;
  --color-secondary-dark-5: #65686c;
  --color-secondary-dark-6: #717479;
  --color-secondary-dark-7: #7e8186;
  --color-secondary-dark-8: #8b8e92;
  --color-secondary-dark-9: #989ba0;
  --color-secondary-dark-10: #a5a8ad;
  --color-secondary-dark-11: #b2b6bb;
  --color-secondary-dark-12: #c0c3c8;
  --color-secondary-dark-13: #ced1d6;
  --color-secondary-light-1: #23252a;
  --color-secondary-light-2: #1c1e22;
  --color-secondary-light-3: #131518;
  --color-secondary-light-4: #0d0e11;
  --color-secondary-alpha-10: #2b2e321a;
  --color-secondary-alpha-20: #2b2e3233;
  --color-secondary-alpha-30: #2b2e324c;
  --color-secondary-alpha-40: #2b2e3266;
  --color-secondary-alpha-50: #2b2e3280;
  --color-secondary-alpha-60: #2b2e3299;
  --color-secondary-alpha-70: #2b2e32b2;
  --color-secondary-alpha-80: #2b2e32cc;
  --color-secondary-alpha-90: #2b2e32e6;
  --color-secondary-button: var(--color-secondary-dark-4);
  --color-secondary-hover: var(--color-secondary-dark-3);
  --color-secondary-active: var(--color-secondary-dark-2);
  --color-console-fg: #edeef1;
  --color-console-fg-subtle: #bbbec3;
  --color-console-bg: #090a0d;
  --color-console-hover-bg: #1c1e22;
  --color-console-active-bg: #23252a;
  --color-console-link: #a1a5ab;
  --color-red: #fb817a;
  --color-orange: #f7a062;
  --color-yellow: #f4c26a;
  --color-olive: #91a313;
  --color-green: #73d4ac;
  --color-teal: #00918a;
  --color-blue: #87c6f2;
  --color-violet: #906ae1;
  --color-purple: #b0aff5;
  --color-pink: #d22e8b;
  --color-brown: #a47252;
  --color-black: #131518;
  --color-red-light: #ff9189;
  --color-orange-light: #ffb071;
  --color-yellow-light: #ffd27b;
  --color-olive-light: #abc016;
  --color-green-light: #83e5bc;
  --color-teal-light: #00b6ad;
  --color-blue-light: #97d6ff;
  --color-violet-light: #9b79e4;
  --color-purple-light: #c0bfff;
  --color-pink-light: #d74397;
  --color-brown-light: #b08061;
  --color-black-light: #23252a;
  --color-red-dark-1: #e66e68;
  --color-orange-dark-1: #e28d4f;
  --color-yellow-dark-1: #e0ae57;
  --color-olive-dark-1: #839311;
  --color-green-dark-1: #5fc199;
  --color-teal-dark-1: #00837c;
  --color-blue-dark-1: #74b3de;
  --color-violet-dark-1: #7b4edb;
  --color-purple-dark-1: #9e9ce1;
  --color-pink-dark-1: #be297d;
  --color-brown-dark-1: #94674a;
  --color-black-dark-1: #0d0e11;
  --color-red-dark-2: #d15c56;
  --color-orange-dark-2: #ce7a3b;
  --color-yellow-dark-2: #cc9c42;
  --color-olive-dark-2: #74820f;
  --color-green-dark-2: #4bae87;
  --color-teal-dark-2: #00746e;
  --color-blue-dark-2: #62a0ca;
  --color-violet-dark-2: #6733d6;
  --color-purple-dark-2: #8c89cd;
  --color-pink-dark-2: #a9246f;
  --color-brown-dark-2: #835b42;
  --color-black-dark-2: #090a0d;
  --color-ansi-black: #1c1e22;
  --color-ansi-red: #fb817a;
  --color-ansi-green: #73d4ac;
  --color-ansi-yellow: #f4c26a;
  --color-ansi-blue: #87c6f2;
  --color-ansi-magenta: #f19ac4;
  --color-ansi-cyan: #86d8e3;
  --color-ansi-white: var(--color-console-fg-subtle);
  --color-ansi-bright-black: #71757a;
  --color-ansi-bright-red: #ff9189;
  --color-ansi-bright-green: #83e5bc;
  --color-ansi-bright-yellow: #ffd27b;
  --color-ansi-bright-blue: #97d6ff;
  --color-ansi-bright-magenta: #f8b0d2;
  --color-ansi-bright-cyan: #9be4ee;
  --color-ansi-bright-white: var(--color-console-fg);
  --color-series-16-0: #7db233;
  --color-series-16-1: #499a37;
  --color-series-16-2: #ce4751;
  --color-series-16-3: #8f9121;
  --color-series-16-4: #ac32a6;
  --color-series-16-5: #7445e9;
  --color-series-16-6: #c67d28;
  --color-series-16-7: #4db392;
  --color-series-16-8: #aa4d30;
  --color-series-16-9: #2a6f84;
  --color-series-16-10: #c45327;
  --color-series-16-11: #3d965c;
  --color-series-16-12: #792a93;
  --color-series-16-13: #439d73;
  --color-series-16-14: #103aad;
  --color-series-16-15: #982e85;
  --color-grey: #23252a;
  --color-grey-light: #a1a5ab;
  --color-gold: #b1983b;
  --color-white: #ffffff;
  --color-diff-added-fg: #78dca9;
  --color-diff-added-linenum-bg: #0b2e1e;
  --color-diff-added-row-bg: #0e2318;
  --color-diff-added-row-border: #16412d;
  --color-diff-added-word-bg: #033d26;
  --color-diff-moved-row-bg: #818044;
  --color-diff-moved-row-border: #bcca6f;
  --color-diff-removed-fg: #ff9492;
  --color-diff-removed-linenum-bg: #3f1919;
  --color-diff-removed-row-bg: #2d1514;
  --color-diff-removed-row-border: #572827;
  --color-diff-removed-word-bg: #572222;
  --color-diff-inactive: #131518;
  --color-error-border: #843c38;
  --color-error-bg: #361715;
  --color-error-bg-active: #4a2321;
  --color-error-bg-hover: #401d1b;
  --color-error-text: #fb817a;
  --color-success-border: #205943;
  --color-success-bg: #0c281d;
  --color-success-text: #73d4ac;
  --color-warning-border: #6c5019;
  --color-warning-bg: #2e220b;
  --color-warning-text: #f4c26a;
  --color-info-border: #2d5a78;
  --color-info-bg: #0e2433;
  --color-info-text: #87c6f2;
  --color-priority-border: #494677;
  --color-priority-bg: #1f1e36;
  --color-priority-text: #b0aff5;
  --color-red-badge: #db2828;
  --color-red-badge-bg: #db28281a;
  --color-red-badge-hover-bg: #db28284d;
  --color-green-badge: #21ba45;
  --color-green-badge-bg: #21ba451a;
  --color-green-badge-hover-bg: #21ba454d;
  --color-yellow-badge: #fbbd08;
  --color-yellow-badge-bg: #fbbd081a;
  --color-yellow-badge-hover-bg: #fbbd084d;
  --color-orange-badge: #f2711c;
  --color-orange-badge-bg: #f2711c1a;
  --color-orange-badge-hover-bg: #f2711c4d;
  --color-git: #f05133;
  --color-logo: #bdf952;
  --color-body: #0d0e11;
  --color-box-header: #131518;
  --color-box-body: #131518;
  --color-box-body-highlight: #1c1e22;
  --color-text-dark: #edeef1;
  --color-text: #edeef1;
  --color-text-light: #bbbec3;
  --color-text-light-1: #bbbec3;
  --color-text-light-2: #a1a5ab;
  --color-text-light-3: #a1a5ab;
  --color-footer: #0d0e11;
  --color-timeline: #2b2e32;
  --color-input-text: #edeef1;
  --color-input-background: #090a0d;
  --color-input-toggle-background: #23252a;
  --color-input-border: #71757a;
  --color-light: #00000033;
  --color-light-border: #2b2e32;
  --color-hover: #edeef10d;
  --color-hover-opaque: #1c1e22;
  --color-active: #edeef117;
  --color-menu: #23252a;
  --color-card: #131518;
  --color-markup-table-row: #edeef108;
  --color-markup-code-block: #090a0d;
  --color-markup-code-inline: #23252a;
  --color-button: #131518;
  --color-code-bg: #090a0d;
  --color-shadow: #000000a6;
  --color-shadow-opaque: #000000;
  --color-secondary-bg: #1c1e22;
  --color-expand-button: #23252a;
  --color-placeholder-text: #a1a5ab;
  --color-editor-line-highlight: #edeef10d;
  --color-editor-selection: #bdf9524c;
  --color-project-column-bg: #131518;
  --color-caret: #bdf952;
  --color-reaction-bg: #edeef10d;
  --color-reaction-hover-bg: #25340a;
  --color-reaction-active-bg: #3f5617;
  --color-tooltip-text: #edeef1;
  --color-tooltip-bg: #23252a;
  --color-nav-bg: #131518;
  --color-nav-hover-bg: #edeef10d;
  --color-nav-text: #bbbec3;
  --color-secondary-nav-bg: #0d0e11;
  --color-label-text: #bbbec3;
  --color-label-bg: transparent;
  --color-label-hover-bg: #edeef10d;
  --color-label-active-bg: #edeef117;
  --color-accent: #bdf952;
  --color-small-accent: #25340a;
  --color-highlight-fg: #edeef1;
  --color-highlight-bg: #29390c;
  --color-overlay-backdrop: #000000b3;
  --color-danger: var(--color-red);
  --color-transparency-grid-light: #2a2a2a;
  --color-transparency-grid-dark: #1a1a1a;
  --color-workflow-edge-hover: #71757a;
  --color-syntax-keyword: #f19ac4;
  --color-syntax-bool: #9cc8f5;
  --color-syntax-control: #f19ac4;
  --color-syntax-name: #edeef1;
  --color-syntax-type: #86d8e3;
  --color-syntax-number: #9cc8f5;
  --color-syntax-operator: #b8bdc8;
  --color-syntax-regexp: #f3c27a;
  --color-syntax-string: #8fd9a8;
  --color-syntax-comment: #a1a5ab;
  --color-syntax-invalid: #fb817a;
  --color-syntax-link: #bdf952;
  --color-syntax-tag: #f19ac4;
  --color-syntax-attribute: #f3c27a;
  --color-syntax-property: #f3c27a;
  --color-syntax-variable: #edeef1;
  --color-syntax-string-special: #8fd9a8;
  --color-syntax-escape: #f3c27a;
  --color-syntax-entity: #f3c27a;
  --color-syntax-preproc: #f19ac4;
  --color-syntax-preproc-file: #8fd9a8;
  --color-syntax-decorator: #86d8e3;
  --color-syntax-namespace: #bbbec3;
  --color-syntax-name-pseudo: #86d8e3;
  --color-syntax-comment-special: #a1a5ab;
  --color-syntax-text: #edeef1;
  --color-syntax-text-alt: #bbbec3;
  --color-syntax-punctuation: #b8bdc8;
  --color-syntax-whitespace: #a1a5ab;
  --color-syntax-diff-fg: #edeef1;
  --color-syntax-deleted-bg: #572222;
  --color-syntax-inserted-bg: #033d26;
  --color-syntax-emph: #edeef1;
  --color-syntax-strong: #edeef1;
  --color-syntax-heading: #bdf952;
  --color-syntax-subheading: #bbbec3;
  --color-syntax-output: #bbbec3;
  --color-syntax-prompt: #a1a5ab;
  --color-syntax-traceback: #fb817a;
  --color-syntax-matching-bracket-bg: #bdf95240;
  --color-syntax-nonmatching-bracket-bg: #fb817a4c;
  accent-color: var(--color-accent);
  color-scheme: dark;
}

:root:root {
  --fonts-proportional: var(--sg-font-ui);
  --fonts-monospace: var(--sg-font-code), var(--fonts-emoji);
  --fonts-override: var(--sg-font-ui);
  --fonts-default-override-ko: var(--sg-font-ui);
  --font-weight-medium: 560;
  --font-weight-semibold: 650;
  --font-weight-bold: 700;
  --border-radius: 6px;
  --border-radius-medium: 8px;
  --page-margin-x: clamp(12px, 0.5rem + 2vw, 28px);
  --transition-hover-fade: opacity var(--sg-dur-color) var(--sg-ease);
  /* prototype code text: 14px with line-height 1.7 */
  --line-height-code: 24px;
  --checkbox-size: 16px;
}

/* ---------- 3. Base ---------- */
html {
  color-scheme: dark;
  scrollbar-color: var(--sg-line-strong) var(--sg-bg);
}
body {
  background: var(--sg-bg);
  font-size: var(--sg-fs-body);
  font-optical-sizing: auto;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
code, pre, kbd, .tw-font-mono, .commit-id-short, .sha {
  word-break: normal;
}
h1, h2, h3, .ui.header {
  text-wrap: balance;
  letter-spacing: -0.01em;
}
p {
  text-wrap: pretty;
}
::selection {
  background: #bdf95240;
}
a:hover {
  text-underline-offset: 3px;
}
.ui.label .gt-ellipsis, .ui.label, .count {
  font-variant-numeric: tabular-nums;
}
kbd {
  font: var(--sg-fs-meta)/1 var(--sg-font-code);
  padding: 3px 5px;
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-r-chip);
  color: var(--sg-text2);
  background: var(--sg-s1);
  box-shadow: none;
}

:focus-visible,
a:focus-visible, button:focus-visible, .ui.button:focus-visible, [role=button]:focus-visible,
.ui.dropdown:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--sg-ring);
  outline-offset: 2px;
}
input:not([type=checkbox], [type=radio]):focus-visible, textarea:focus-visible, select:focus-visible,
.ui.input > input:focus-visible, .ui.form input:not([type=checkbox], [type=radio]):focus-visible,
.ui.selection.dropdown:focus-visible {
  outline: 2px solid var(--sg-ring);
  outline-offset: 0;
  border-color: var(--sg-ring);
}
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible {
  outline: 2px solid var(--sg-ring);
  outline-offset: 2px;
}
/* Gitea, Fomantic, and Dropzone remove the outline on several fields with more specific rules */
:is(input:not([type=checkbox], [type=radio]), textarea, select):not(.sg-pal-input *):focus,
input[type=date]:focus-within, .dz-button:focus-visible, .scrolling.menu:focus-visible {
  outline-style: solid !important;
  outline-width: 2px !important;
  outline-color: var(--sg-ring) !important;
}
.scrolling.menu:focus-visible {
  outline-offset: -2px;
}
/* items inside scrolling or clipping containers get an inset ring so the container cannot cut it */
overflow-menu .item:focus-visible,
.ui.dropdown .menu > .item:focus-visible, .tippy-box .item:focus-visible, #issue-list a:focus-visible,
.repo-file-cell a:focus-visible, .lines-num a:focus-visible, .file-tree a:focus-visible, .diff-file-list a:focus-visible,
.latest-commit :focus-visible, .commit-summary :focus-visible, .gt-ellipsis :focus-visible, .ui.segment.sub-menu :focus-visible,
.field.footer :focus-visible {
  outline-offset: -2px;
}
/* tab items overlap the menu's bottom line by 1px */
.ui.secondary.pointing.menu .item:focus-visible, .ui.tabular.menu .item:focus-visible {
  outline-offset: -3px;
}
:is(.latest-commit, .field.footer) .ui.primary.button:focus-visible {
  outline-color: var(--sg-on-accent);
}
/* truncated commit titles: keep the link box inside its ellipsis cell so the inset ring stays visible.
   The commit list table sizes its columns from content, so a nowrap link there widens the page. */
:is(.commit-summary, .gt-ellipsis):not(#commits-table *) a.title-full-link {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: top;
}

/* ---------- 4. Navigation ---------- */
#navbar {
  min-height: 52px;
  background: var(--sg-s1);
  border-bottom: 1px solid var(--sg-line);
}
#navbar :is(.navbar-left, .navbar-right, .navbar-mobile-right) > .item {
  color: var(--sg-text2);
  border-radius: var(--sg-r-control);
  transition: background-color var(--sg-dur-color) var(--sg-ease), color var(--sg-dur-color) var(--sg-ease);
}
#navbar :is(a, button).item:not(.dropdown *):hover {
  color: var(--sg-text);
  background: var(--sg-hover);
}
#navbar :is(.navbar-left, .navbar-right) > .item.active {
  color: var(--sg-text);
  background: var(--sg-selected);
}
#navbar #navbar-logo img {
  width: 26px;
  height: 26px;
}
#navbar a.item .notification_count, #navbar a.item .header-stopwatch-dot {
  color: var(--sg-on-accent);
  background: var(--sg-accent);
}
/* .sg-nav items come from custom/extra_links.tmpl and show only in the rail, except search */
#navbar .navbar-left > .item.sg-nav {
  display: none;
}
@media (min-width: 768px) {
  #navbar .navbar-left > .item.sg-nav-search {
    display: flex;
    gap: 8px;
  }
  #navbar .sg-nav-search kbd {
    padding: 2px 4px;
  }
}

/* without :has() support the top bar stays */
@media (min-width: 1024px) {
  body:has(#navbar .sg-nav) {
    padding-left: var(--sg-rail);
  }
  #navbar:has(.sg-nav) {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 50;
    width: var(--sg-rail);
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    padding: 12px 0;
    border-bottom: 0;
    border-right: 1px solid var(--sg-line);
  }
  #navbar:has(.sg-nav) .navbar-left,
  #navbar:has(.sg-nav) .navbar-right {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-height: 0;
  }
  #navbar:has(.sg-nav) .navbar-left {
    flex: 1;
  }
  #navbar:has(.sg-nav) .navbar-left > a.item:not(#navbar-logo, .sg-nav) {
    display: none;
  }
  #navbar:has(.sg-nav) :is(.navbar-left, .navbar-right) > .item {
    position: relative;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
  }
  #navbar:has(.sg-nav) #navbar-logo {
    margin-bottom: 8px;
  }
  #navbar:has(.sg-nav) #navbar-logo:hover {
    background: none;
  }
  #navbar:has(.sg-nav) .navbar-left > .item.sg-nav {
    display: flex;
  }
  #navbar:has(.sg-nav) .sg-nav :is(kbd, .sg-nav-label) {
    display: none;
  }
  #navbar:has(.sg-nav) .navbar-left > .item.sg-nav-search {
    margin-top: auto;
  }
  #navbar:has(.sg-nav) .sg-nav[aria-current="page"] {
    color: var(--sg-accent);
    background: var(--sg-selected);
  }
  #navbar:has(.sg-nav) .sg-nav[aria-current="page"]::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    background: var(--sg-accent);
  }
  #navbar:has(.sg-nav) .navbar-right .not-mobile.flex-text-block:has(.octicon-triangle-down) {
    display: none;
  }
  #navbar:has(.sg-nav) .item.ui.dropdown {
    padding-right: 0;
  }
  #navbar:has(.sg-nav) .navbar-right .ui.dropdown > .menu {
    top: auto;
    bottom: 0;
    left: calc(100% + 10px);
    right: auto;
  }
}

.sg-bottombar {
  display: none;
}
@media (max-width: 767.98px) {
  .sg-bottombar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--sg-s1);
    border-top: 1px solid var(--sg-line);
  }
  /* body has a fixed height in Gitea, so the space for the bar goes after the footer, the last block */
  body:has(.sg-bottombar) .page-footer {
    padding-bottom: calc(var(--sg-bar) + env(safe-area-inset-bottom));
  }
  html:has(.sg-bottombar) {
    scroll-padding-bottom: calc(var(--sg-bar) + env(safe-area-inset-bottom) + 8px);
  }
  body:has(.sg-bottombar) #navbar .navbar-mobile-right > a.item[href$="/notifications"] {
    display: none;
  }
  .sg-bottombar a {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: var(--sg-bar);
    color: var(--sg-text2);
    font-size: var(--sg-fs-meta);
    font-weight: 560;
    text-decoration: none;
    transition: color var(--sg-dur-color) var(--sg-ease);
  }
  .sg-bottombar a:focus-visible {
    outline-offset: -2px;
  }
  .sg-bottombar a[aria-current="page"] {
    color: var(--sg-accent);
  }
  .sg-bottombar a[aria-current="page"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 25%;
    right: 25%;
    height: 2px;
    background: var(--sg-accent);
  }
  .sg-bottombar .sg-dot {
    position: absolute;
    top: 10px;
    left: calc(50% + 6px);
    display: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sg-accent);
    box-shadow: 0 0 0 2px var(--sg-s1);
  }
  body:has(#navbar .notification_count:not(.tw-hidden)) .sg-bottombar .sg-dot {
    display: block;
  }
}

/* ---------- 5. Repository header and tabs ---------- */
.secondary-nav {
  border-bottom: 0;
}
.repo-header {
  padding-top: 16px;
}
.repo-header .tw-text-18 {
  font-size: var(--sg-fs-h2);
  letter-spacing: -0.01em;
}
.repo-header .tw-text-18 > a.muted:last-of-type {
  color: var(--sg-text);
  font-weight: 700;
}
@media (max-width: 767.98px) {
  /* on a phone a long name wraps inside its own box, so the repository switcher stays on the name line.
     Gitea's tw- utilities are !important */
  .repo-header .tw-text-18 {
    flex-wrap: nowrap !important;
  }
  .repo-header .tw-text-18 > a.muted:last-of-type {
    min-width: 0;
    overflow-wrap: break-word;
  }
}
.repo-header .tw-text-18 > a.muted:first-of-type {
  flex-shrink: 0;
  color: var(--sg-text2);
}
.ui.secondary.pointing.menu,
overflow-menu.ui.secondary.pointing.menu {
  border-bottom: 1px solid var(--sg-line) !important;
}
.ui.secondary.pointing.menu .item {
  min-height: var(--sg-tab);
  margin-bottom: -1px;
  color: var(--sg-text2);
  transition: color var(--sg-dur-color) var(--sg-ease), box-shadow var(--sg-dur-color) var(--sg-ease);
}
.ui.secondary.pointing.menu a.item:hover {
  color: var(--sg-text);
  box-shadow: inset 0 -2px 0 var(--sg-line-strong);
}
.ui.secondary.pointing.menu .active.item,
.ui.secondary.pointing.menu .active.item:hover {
  color: var(--sg-text);
  border-color: var(--sg-accent);
  box-shadow: none;
}
.ui.tabular.menu {
  border-bottom: 1px solid var(--sg-line);
}
.ui.tabular.menu .item {
  color: var(--sg-text2);
}
.ui.tabular.menu .active.item,
.ui.tabular.menu .active.item:hover {
  background: transparent;
  border-color: transparent;
  color: var(--sg-text);
  box-shadow: inset 0 -2px 0 var(--sg-accent);
  border-radius: 0 !important;
}
.ui.menu .item > .ui.label,
overflow-menu .ui.label,
.ui.secondary.menu .item > .label {
  min-width: 20px;
  padding: 0 6px;
  background: transparent;
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-r-chip);
  color: var(--sg-text2);
  font: 600 var(--sg-fs-meta)/18px var(--sg-font-code);
  justify-content: center;
}

/* ---------- 6. Controls ---------- */
.ui.button {
  min-height: var(--sg-ctl);
  padding: 0 12px;
  gap: 6px;
  border-radius: var(--sg-r-control);
  border-color: var(--sg-line);
  background: var(--sg-s1);
  color: var(--sg-text);
  font-weight: 560;
  line-height: 1.2;
  transition: background-color var(--sg-dur-color) var(--sg-ease), color var(--sg-dur-color) var(--sg-ease), border-color var(--sg-dur-color) var(--sg-ease);
}
.ui.button:hover, .ui.basic.button:hover {
  background: var(--sg-s2);
  border-color: var(--sg-line-strong);
  color: var(--sg-text);
}
.ui.basic.button {
  background: var(--sg-s1);
  color: var(--sg-text2);
}
.ui.primary.button, .ui.primary.buttons .button {
  background: var(--sg-accent);
  border-color: var(--sg-accent);
  color: var(--sg-on-accent);
  font-weight: 680;
}
.ui.primary.button:hover, .ui.primary.buttons .button:hover {
  background: var(--sg-accent-hover);
  border-color: var(--sg-accent-hover);
  color: var(--sg-on-accent);
}
.ui.primary.button:active, .ui.primary.buttons .button:active {
  background: var(--sg-accent-press);
  border-color: var(--sg-accent-press);
}
.ui.basic.primary.button, .ui.basic.primary.buttons .button {
  background: var(--sg-s1);
  border-color: color-mix(in srgb, var(--sg-accent) 55%, var(--sg-line));
  color: var(--sg-accent);
}
.ui.red.button, .ui.basic.red.button, .ui.negative.button {
  background: transparent;
  border-color: color-mix(in srgb, var(--sg-danger) 55%, var(--sg-line));
  color: var(--sg-danger);
}
.ui.red.button:hover, .ui.basic.red.button:hover, .ui.negative.button:hover {
  background: var(--color-error-bg);
  color: var(--sg-danger);
}
.ui.button.disabled, .ui.button:disabled, .ui.disabled.button {
  background: var(--sg-s1);
  border-color: var(--sg-line);
  color: var(--sg-text3);
  opacity: 1;
}
.ui.compact.button, .ui.small.button, .ui.tiny.button, .ui.mini.button {
  min-height: 28px;
  padding: 0 10px;
}
.ui.icon.button:not(.labeled) {
  min-width: var(--sg-ctl);
  padding: 0 8px;
}
.ui.form input:not([type=checkbox], [type=radio]), .ui.input > input, .ui.search > .prompt,
input:not([type=checkbox], [type=radio], [type=file], [type=color]), .ui.selection.dropdown {
  min-height: var(--sg-ctl);
  border-radius: var(--sg-r-control);
}
.ui.form input:not([type=checkbox], [type=radio]), .ui.input > input, .ui.search > .prompt {
  padding: 6px 10px;
  line-height: 18px;
}
textarea, .ui.form textarea {
  border-radius: var(--sg-r-control);
}
@media (pointer: coarse), (max-width: 767.98px) {
  .ui.form input:not([type=checkbox], [type=radio]), .ui.input > input,
  .ui.selection.dropdown, input:not([type=checkbox], [type=radio], [type=file], [type=color], [type=range]) {
    min-height: var(--sg-touch);
  }
  /* below 16px, mobile Safari zooms the page when a field gets focus; Gitea sizes fields with longer selectors */
  :is(input:not([type=checkbox], [type=radio], [type=range], [type=color]), textarea, select, [contenteditable="true"]) {
    font-size: 16px !important;
  }
}
@media (max-width: 767.98px) {
  /* the 16px phone font makes inputs wider than Gitea's flex rows expect */
  .ui.input > input {
    flex-shrink: 1;
    min-width: 0;
  }
  .repo-file-search-container, .ui.input, input:not([type=checkbox], [type=radio]) {
    min-width: 0;
    max-width: 100%;
  }
  /* Wanted Sans has a wide average glyph, so size="20" inputs are wider than a 320px row */
  .repo-button-row-right, .repo-file-search-container, .repo-file-search-container > div, .repo-file-search-container .ui.input {
    width: 100%;
  }
  .repo-file-search-container input {
    width: 0;
  }
  .ui.attached.segment > table.ui.table {
    display: block;
    overflow-x: auto;
  }
  /* the table scrolls inside its block, so cells keep one line instead of one word per line */
  .ui.attached.segment > table.ui.table :is(th, td) {
    white-space: nowrap;
  }
  /* list search rows (admin users, orgs, repos) put the field on its own line above the filter menus */
  form.flex-text-block:has(> .tw-flex-1 .ui.input) {
    flex-wrap: wrap;
  }
  form.flex-text-block > .tw-flex-1:has(.ui.input) {
    flex-basis: 100%;
  }
  .flex-left-right > .repo-editor-menu {
    flex-wrap: wrap;
    max-width: 100%;
  }
}
/* long repository, branch, and page names in dropdown buttons shrink to an ellipsis */
.flex-left-right > .list-item-large-title {
  min-width: 0;
  max-width: 100%;
}
:is(.repo-button-row .ui.floating.filter.dropdown, .ui.segment.choose > .ui.dropdown) {
  min-width: 0;
  max-width: 100%;
}
:is(.repo-button-row .ui.floating.filter.dropdown, .ui.segment.choose > .ui.dropdown) > .ui.button {
  max-width: 100%;
}
:is(.repo-button-row .ui.floating.filter.dropdown, .ui.segment.choose > .ui.dropdown) > .ui.button > .text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ui.form .field > label, .ui.form .inline.field > label {
  color: var(--sg-text2);
  font-weight: 600;
}
.ui.form .field.error input:not([type=checkbox], [type=radio]), .ui.form .field.error textarea {
  border-color: var(--sg-danger);
}
input[type=checkbox], input[type=radio] {
  accent-color: var(--sg-accent);
}
.ui.checkbox input[type=checkbox], .ui.checkbox input[type=radio] {
  border-color: var(--sg-line-strong);
}
.ui.toggle.checkbox input:checked ~ label::before {
  background: var(--sg-accent) !important;
}
.ui.dropdown .menu, .ui.selection.dropdown .menu {
  background: var(--sg-s3);
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-r-panel);
  box-shadow: 0 16px 40px -8px #000000a6;
}
.ui.dropdown .menu > .item, .ui.menu .ui.dropdown .menu > .item {
  min-height: 34px;
  color: var(--sg-text);
}
.ui.dropdown .menu > .item:hover, .ui.dropdown .menu > .item.hovered {
  background: var(--sg-hover);
}
.ui.dropdown .menu > .item.active, .ui.dropdown .menu > .item.selected {
  background: var(--sg-selected);
  color: var(--sg-text);
}
.ui.dropdown .menu > .header {
  color: var(--sg-text3);
}

/* issue labels keep their fill: Gitea sets it inline with !important */
.ui.label {
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-r-chip);
  line-height: 16px;
}
.ui.basic.label {
  background: transparent;
  border-color: var(--sg-line-strong);
  color: var(--sg-text2);
}
.ui.label.commit-id-short, .ui.label.sha {
  background: transparent;
  border-color: var(--sg-line);
  color: var(--sg-text2);
  font-family: var(--sg-font-code);
}
.ui.label[style*="background-color"] {
  border-color: transparent;
}
/* Gitea's colored labels use .ui.ui.ui (0,5,0); state labels become outlines in the state color */
.ui.ui.ui.ui.label:is(.green, .red, .purple, .violet, .grey, .black, .yellow, .orange, .brown, .blue, .teal, .olive, .pink) {
  background: transparent;
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
}
a.ui.ui.ui.ui.label:is(.green, .red, .purple, .violet, .grey, .black, .yellow, .orange, .brown, .blue, .teal, .olive, .pink):hover {
  background: var(--sg-hover);
}
.ui.ui.ui.ui.label:is(.green, .olive) { color: var(--sg-ok); }
.ui.ui.ui.ui.label:is(.red, .pink) { color: var(--sg-danger); }
.ui.ui.ui.ui.label:is(.purple, .violet) { color: var(--sg-done); }
.ui.ui.ui.ui.label:is(.yellow, .orange, .brown) { color: var(--sg-warn); }
.ui.ui.ui.ui.label:is(.blue, .teal) { color: var(--sg-info); }
.ui.ui.ui.ui.label:is(.grey, .black) { color: var(--sg-text2); }
.issue-state-label.ui.label {
  gap: 6px;
  font-weight: 600;
}
.issue-state-label.ui.label > svg {
  display: none;
}
.issue-state-label.ui.label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

/* ---------- 7. Panels and lists ---------- */
.ui.segment, .ui.segments {
  border-color: var(--sg-line);
  border-radius: var(--sg-r-panel);
}
.ui.attached.segment:last-child, .ui.attached.segment:has(+ :not(.ui.attached.segment)),
.ui.bottom.attached.segment {
  border-bottom-left-radius: var(--sg-r-panel);
  border-bottom-right-radius: var(--sg-r-panel);
}
.ui.top.attached.header, .ui.top.attached.segment {
  border-radius: var(--sg-r-panel) var(--sg-r-panel) 0 0;
}
.ui.attached.header {
  border-color: var(--sg-line);
  font-weight: 650;
}
#repo-files-table {
  border-color: var(--sg-line);
  border-radius: var(--sg-r-panel);
}
#repo-files-table .repo-file-line, #repo-files-table .repo-file-cell {
  min-height: var(--sg-row);
  padding: 7px 16px;
  border-top-color: var(--sg-line);
}
#repo-files-table .repo-file-cell.name a {
  margin: -1px -4px;
  padding: 1px 4px;
  color: var(--sg-text);
  font-weight: 560;
}
#repo-files-table .repo-file-item:hover > .repo-file-cell, #repo-files-table .parent-link:hover {
  background: var(--sg-hover);
}
#repo-files-table .repo-file-item:hover .repo-file-cell.name a {
  color: var(--sg-accent);
}
#repo-files-table .repo-file-cell.message, #repo-files-table .repo-file-cell.message a,
#repo-files-table .repo-file-cell.age {
  color: var(--sg-text3);
}
/* file type icons follow the text color; color is reserved for state */
.git-entry-icon path[fill], .git-entry-icon [fill]:not([fill="none"]) {
  fill: var(--sg-text3);
}
/* Gitea paints folder icons in the primary color, which is the lime signal here */
.svg.octicon-file-directory-fill, .svg.octicon-file-directory-open-fill, .svg.octicon-file-submodule {
  color: var(--sg-text2);
}
.flex-divided-list > .item + .item {
  border-top-color: var(--sg-line);
}
#issue-list > .item {
  padding: 12px 16px;
  transition: background-color var(--sg-dur-color) var(--sg-ease);
}
#issue-list > .item:hover {
  background: var(--sg-hover);
}
.notifications-link .flex-text-block > span {
  white-space: nowrap;
}
#issue-list .list-item-large-title, .flex-item-title a {
  color: var(--sg-text);
  font-weight: 600;
}
#issue-list .list-item-large-title:hover {
  color: var(--sg-accent);
}
.flex-divided-list .item-main > div > a:not(.ui), .flex-divided-list .item-main > a.title {
  color: var(--sg-text);
  font-weight: 560;
}
.flex-divided-list .item-main > div > a:not(.ui):hover, .flex-divided-list .item-main > a.title:hover {
  color: var(--sg-accent);
}
.form .help {
  color: var(--sg-text3);
}
#issue-list .item-body, #issue-list .item-body a, .flex-item-body {
  color: var(--sg-text3);
  font-size: var(--sg-fs-meta);
}
.issue-title-header .issue-title h1, .repository.view.issue .issue-title h1 {
  font-size: var(--sg-fs-h1);
  line-height: 1.3;
  font-weight: 700;
}
.issue-title .index {
  color: var(--sg-text3);
  font-weight: 500;
}
.comment-header {
  background: var(--sg-s1);
  border-bottom-color: var(--sg-line);
}
.timeline-item .ui.segment, .comment .ui.attached.segment {
  border-color: var(--sg-line);
}
.ui.message {
  border-radius: var(--sg-r-panel);
}
.markup {
  font-size: var(--sg-fs-body);
  line-height: 1.6;
}
/* Gitea clips .markup; a 4px clip margin keeps focus rings on links at its edges visible */
.markup {
  display: flow-root;
  overflow: clip;
  overflow-clip-margin: 4px;
}
.markup h1, .markup h2 {
  border-bottom-color: var(--sg-line);
}
.markup .anchor:focus-visible {
  outline: 2px solid var(--sg-ring);
}
.markup code, .markup tt {
  font-family: var(--sg-font-code);
  border-radius: var(--sg-r-chip);
}
.markup pre {
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-r-panel);
}
.markup table th, .markup table td {
  border-color: var(--sg-line);
}

/* ---------- 8. Code and diff ---------- */
.lines-num, .lines-code, .lines-escape, .lines-type-marker, .code-inner {
  font-family: var(--sg-font-code);
  font-size: var(--sg-fs-code);
  font-variant-ligatures: contextual;
}
.lines-num {
  color: var(--sg-text3) !important;
}
.file-view, .file-view.code-view, .diff-file-box .file-body {
  background: var(--sg-inset);
}
.diff-file-box {
  border-color: var(--sg-line);
  border-radius: var(--sg-r-panel);
}
.diff-file-header, .diff-file-box .header {
  background: var(--sg-s1);
}
/* Gitea sets table-layout: fixed without a width, so a long hunk header widens the unified diff past a phone screen */
.repository .diff-file-box .code-diff table {
  width: 100%;
}
.diff-file-name {
  font-family: var(--sg-font-code);
}
.code-diff .tag-code, .code-diff .tag-code td, .code-diff td.tag-code {
  background: color-mix(in srgb, var(--sg-info) 9%, var(--sg-inset));
  color: var(--sg-text2);
}
.code-diff .add-code .lines-type-marker, .code-diff .added-code {
  color: var(--color-diff-added-fg);
}
.code-diff .del-code .lines-type-marker, .code-diff .removed-code {
  color: var(--color-diff-removed-fg);
}
.code-diff .added-code, .code-diff .removed-code {
  border-radius: 2px;
}
.code-diff .add-code .added-code, .code-diff .del-code .removed-code {
  color: inherit;
}
.lines-num:hover, .file-view .lines-num:hover {
  color: var(--sg-text) !important;
}
.file-view tr.active .lines-num, .file-view tr.active .lines-code, .lines-num.active, .lines-code.active {
  background: color-mix(in srgb, var(--sg-accent) 10%, var(--sg-inset)) !important;
}
.diff-detail-box, .diff-detail-box.sticky {
  background: var(--sg-bg);
}

/* ---------- 9. Overlays ---------- */
.tippy-box {
  background: var(--sg-s3);
  border-color: var(--sg-line);
  border-radius: var(--sg-r-control);
}
.tippy-box[data-theme=tooltip] {
  font-size: var(--sg-fs-meta);
  border: 1px solid var(--sg-line);
}
.tippy-box[data-theme=default], .tippy-box[data-theme=menu], .tippy-box[data-theme=box-with-header] {
  box-shadow: var(--sg-shadow);
  border-radius: var(--sg-r-panel);
}
.toastify {
  background: var(--sg-s3) !important;
  border: 1px solid var(--sg-line);
  border-left: 2px solid var(--sg-info);
  border-radius: var(--sg-r-panel);
  box-shadow: var(--sg-shadow);
  transition: opacity var(--sg-dur-drawer) var(--sg-ease), transform var(--sg-dur-drawer) var(--sg-ease);
}
.toastify.on.error, .toastify.toast-error { border-left-color: var(--sg-danger); }
.toastify.on.success, .toastify.toast-success { border-left-color: var(--sg-ok); }
.toastify.on.warning, .toastify.toast-warning { border-left-color: var(--sg-warn); }
.ui.modal {
  background: var(--sg-s1);
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-r-panel);
  box-shadow: var(--sg-shadow);
}
.ui.modal > .header {
  border-bottom-color: var(--sg-line);
  background: var(--sg-s1);
}
.ui.dimmer {
  background: #000000b3;
}

/* Command palette (custom/footer.tmpl, js/signal-hooks.js) */
.sg-palette {
  width: min(640px, calc(100vw - 24px));
  max-height: min(520px, 80vh);
  margin: 12vh auto auto;
  padding: 0;
  color: var(--sg-text);
  background: var(--sg-s3);
  border: 1px solid var(--sg-line);
  border-radius: var(--sg-r-panel);
  box-shadow: var(--sg-shadow);
  overflow: hidden;
  opacity: 1;
  transform: none;
  transition: opacity var(--sg-dur-overlay) var(--sg-ease), transform var(--sg-dur-overlay) var(--sg-ease), overlay var(--sg-dur-overlay) allow-discrete, display var(--sg-dur-overlay) allow-discrete;
}
.sg-palette[open] {
  display: flex;
  flex-direction: column;
}
@starting-style {
  .sg-palette[open] {
    opacity: 0;
    transform: scale(0.98);
  }
}
.sg-palette::backdrop {
  background: #0000008c;
}
.sg-pal-input {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 14px;
  border-bottom: 1px solid var(--sg-line);
  color: var(--sg-text3);
}
.sg-pal-input input,
.sg-pal-input input:focus,
.sg-pal-input input:focus-visible {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0;
  border: 0;
  outline: none;
  background: none;
  color: var(--sg-text);
  font-size: var(--sg-fs-h3);
}
.sg-palette:has(.sg-pal-input input:focus-visible) .sg-pal-input {
  box-shadow: inset 0 -2px 0 var(--sg-ring);
}
.sg-pal-list {
  flex: 1;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  list-style: none;
}
.sg-pal-group {
  padding: 8px 10px 4px;
  color: var(--sg-text3);
  font-size: var(--sg-fs-meta);
  font-weight: 600;
}
.sg-pal-item a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: var(--sg-r-control);
  color: var(--sg-text);
  text-decoration: none;
}
.sg-pal-item a > span:first-of-type {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sg-pal-item .sg-pal-meta {
  flex-shrink: 0;
  margin-left: auto;
  color: var(--sg-text3);
  font-size: var(--sg-fs-meta);
}
.sg-pal-item svg {
  flex-shrink: 0;
  color: var(--sg-text3);
}
.sg-pal-item[aria-selected="true"] a {
  background: var(--sg-selected);
  box-shadow: inset 2px 0 0 var(--sg-accent);
}
.sg-pal-item[aria-selected="true"] svg {
  color: var(--sg-accent);
}
.sg-pal-empty {
  padding: 16px 10px;
  color: var(--sg-text2);
}
.sg-pal-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-top: 1px solid var(--sg-line);
  color: var(--sg-text3);
  font-size: var(--sg-fs-meta);
}
.sg-pal-foot kbd + span {
  margin-right: 8px;
}

/* ---------- 10. Pages ---------- */
.page-footer {
  background: var(--sg-bg);
  border-top: 1px solid var(--sg-line);
  color: var(--sg-text3);
}
.page-footer a, .page-footer .ui.dropdown {
  color: var(--sg-text2);
}
.sg-home {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 52px - 41px - var(--page-space-bottom));
  min-height: calc(100dvh - 52px - 41px - var(--page-space-bottom));
  padding: 24px var(--page-margin-x);
}
.sg-home-inner {
  display: grid;
  justify-items: center;
  gap: 16px;
  text-align: center;
}
.sg-home-inner img {
  width: 56px;
  height: 56px;
}
.sg-home-title {
  margin: 0;
  color: var(--sg-text);
  font-size: var(--sg-fs-h1);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.sg-home-note {
  margin: 0;
  color: var(--sg-text2);
}
.page-content.user:is(.signin, .signup, .activate, .link-account) .ui.attached.header {
  font-size: var(--sg-fs-h3);
}
/* the approval prompt has no width limit of its own, unlike the other sign-in cards */
.page-content.user.activate .column > .ui.attached {
  max-width: 42rem;
  margin-inline: auto;
}
.sg-auth .ui.attached.segment > p {
  color: var(--sg-text2);
}
.sg-auth .ui.attached.segment > p + #external-login-navigator {
  margin-top: 16px;
}
.status-page-error-title {
  color: var(--sg-text);
  font-size: var(--sg-fs-h1);
  line-height: 1.3;
  letter-spacing: -0.01em;
}
/* the 500 page draws its own minimal bar instead of #navbar */
.full.height > nav.ui.secondary.menu {
  min-height: 52px;
  margin: 0;
  background: var(--sg-s1);
  border-bottom: 1px solid var(--sg-line);
}
.full.height > nav.ui.secondary.menu + .divider {
  display: none;
}
/* a disabled menu button that opens nothing; hidden so it does not read as a broken control */
.full.height > nav.ui.secondary.menu .ui.button.disabled {
  visibility: hidden;
}
.data-table .line-num {
  font-family: var(--sg-font-code);
}
#external-login-navigator .ui.button.external-login-link {
  width: 100%;
  margin: 0;
  justify-content: center;
  min-height: 40px;
  background: var(--sg-s1);
  color: var(--sg-text);
}
#external-login-navigator .ui.button.external-login-link:hover {
  background: var(--sg-s2);
}
#external-login-navigator .ui.button.external-login-link svg,
#external-login-navigator .ui.button.external-login-link img {
  width: 20px;
  height: 20px;
}
.divider.divider-text {
  color: var(--sg-text3);
}

/* ---------- 11. Merge conditions row (repo/issue/view_title.tmpl) ---------- */
.sg-merge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 12px;
}
.sg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sg-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
  border-radius: var(--sg-r-chip);
  color: var(--sg-text2);
  font-size: var(--sg-fs-meta);
  font-weight: 600;
  white-space: nowrap;
}
.sg-chip svg {
  width: 13px;
  height: 13px;
}
.sg-chip.is-ok { color: var(--sg-ok); }
.sg-chip.is-warn { color: var(--sg-warn); }
.sg-chip.is-bad { color: var(--sg-danger); }
.sg-merge-row .sg-merge-go {
  margin-left: auto;
}
#pull-request-merge-form, .pull-merge-box {
  scroll-margin-top: 24px;
}

/* ---------- 12. Touch ---------- */
@media (pointer: coarse), (max-width: 767.98px) {
  /* Gitea sizes compact and small buttons with .ui.ui.ui.ui selectors, so the touch size needs !important */
  .ui.button:not(.add-code-comment), .ui.buttons .button, .btn, .btn-octicon, .markdown-toolbar-button, .code-expander-button,
  .overflow-menu-button, .comment-header-right > .item, .ui.dropdown.jump.item, .issue-sidebar-combo > .ui.dropdown,
  .dz-button, label.gt-checkbox, label.viewed-file-form {
    min-height: var(--sg-touch) !important;
  }
  .ui.button:not(.add-code-comment), .btn, .btn-octicon, .markdown-toolbar-button, .overflow-menu-button, .comment-header-right > .item,
  #navbar #navbar-expand-toggle {
    min-width: var(--sg-touch) !important;
  }
  .btn:has(> svg:only-child), .btn-octicon, .markdown-toolbar-button, .overflow-menu-button, .comment-header-right > .item {
    justify-content: center;
  }
  .btn, .btn-octicon, .markdown-toolbar-button, .comment-header-right > .item, label.viewed-file-form {
    display: inline-flex;
    align-items: center;
  }
  .ui.table td a:has(> svg:only-child) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--sg-touch);
    min-height: var(--sg-touch);
  }
  /* title links get a taller hit box; the negative margin keeps rows the same height where they are flex items */
  #issue-list .list-item-large-title, .flex-divided-list .item-title > a {
    padding-block: 12px;
    margin-block: -12px;
  }
  .repo-home-sidebar-top a.flex-text-block {
    min-height: var(--sg-touch);
  }
  .markdown-toolbar, .markdown-toolbar-group {
    flex-wrap: wrap;
  }
  /* header actions sit in an absolute box as tall as the header, so the header grows to hold a touch-size button */
  .ui.attached.header:has(> .ui.right .ui.button) {
    display: flex;
    align-items: center;
    min-height: calc(var(--sg-touch) + 8px);
  }
  #navbar :is(.navbar-left, .navbar-right) > .item, #navbar .navbar-mobile-right > .item,
  .ui.menu .item, .ui.secondary.pointing.menu .item, .ui.dropdown .menu > .item, .ui.menu .ui.dropdown .menu > .item,
  .repository-summary .sub-menu .item, .flex-container-nav .menu .item, details.item > .menu > .item {
    min-height: var(--sg-touch);
  }
  .flex-container-nav .menu .item, details.item > .menu > .item {
    display: flex;
    align-items: center;
  }
  .page-footer :is(a, .ui.dropdown) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--sg-touch);
    min-height: var(--sg-touch);
  }
  /* the separator keeps its text height while the link grows to the touch size */
  .page-footer .right-links > a {
    border-image: linear-gradient(transparent 14px, var(--color-secondary-dark-1) 14px calc(100% - 14px), transparent calc(100% - 14px)) 1;
  }
  .flex-divided-list .item-trailing a, .repo-header .tw-text-18 > .ui.dropdown {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--sg-touch);
    min-height: var(--sg-touch);
  }
  /* a 20px text line plus this padding makes each row the touch size; the name link covers the row height */
  #repo-files-table :is(.repo-file-line, .repo-file-cell) {
    padding-block: calc((var(--sg-touch) - 20px) / 2);
  }
  #repo-files-table .repo-file-cell.name a {
    padding-block: calc((var(--sg-touch) - 20px) / 2);
    margin-block: calc((var(--sg-touch) - 20px) / -2);
  }
  /* the label carries the hit area; the box moves with the first text line */
  .ui.checkbox label {
    padding-block: calc((var(--sg-touch) - 16px) / 2);
  }
  .ui.checkbox:not(.toggle) :is(input[type=checkbox], input[type=radio]) {
    top: calc((var(--sg-touch) - 16px) / 2 + 1px);
  }
  .ui.toggle.checkbox input[type=checkbox] {
    top: calc((var(--sg-touch) - 24px) / 2);
  }
}
/* controls that Gitea reveals only on hover stay visible on touch screens, which have no hover */
@media (hover: none) {
  .bottom-reactions .select-reaction {
    visibility: visible;
  }
  .notifications-item .notifications-buttons {
    display: flex;
  }
  /* shown on every line, so it stays a quiet glyph instead of a lime block */
  .diff-file-box .lines-code .ui.button.add-code-comment {
    opacity: 1;
    background: var(--sg-s2);
    border-color: var(--sg-line);
    color: var(--sg-text2);
  }
  .repository.wiki .wiki-pages-list .wiki-git-entry {
    display: inline-block;
  }
}

/* ---------- 13. Motion ---------- */
@view-transition {
  navigation: auto;
}
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: var(--sg-dur-overlay);
  animation-timing-function: var(--sg-ease);
}
@media (prefers-reduced-motion: reduce) {
  .sg-palette {
    transition: opacity var(--sg-dur-overlay) linear, overlay var(--sg-dur-overlay) allow-discrete, display var(--sg-dur-overlay) allow-discrete;
  }
  @starting-style {
    .sg-palette[open] {
      opacity: 0;
      transform: none;
    }
  }
  .toastify {
    transition: opacity var(--sg-dur-overlay) linear;
  }
  .ui.dropdown .menu.transition, .ui.modal.transition, .ui.dimmer.transition {
    animation-duration: 0s !important;
  }
}