/* ═══════════════════════════════════════════════════════════════════════
 * TELLUSGIT — FORGEJO OVERRIDES (compat layer)
 *
 * build-touch: 2026-06-25 — see commit 9dd63e75 (bottom-bar overlap +
 * over-nested template cleanup). If you're reading this on disk and
 * the running container doesn't reflect 9dd63e75, the previous deploy
 * was cancelled before its tellusgit build finished; the follow-up
 * empty commit on this file is what re-triggered the image rebuild.
 * ═══════════════════════════════════════════════════════════════════════
 *
 * This file is a thin compatibility layer on top of the upstream Forgejo
 * styles. It only styles elements that still use the upstream markup
 * (issues, projects, pulls, settings, admin, etc.) and would otherwise
 * look out of place with the rest of the TellusGit shell.
 *
 * The home view, the app shell (sidebar + dashboard), the spotlight
 * command palette and the mobile shell live in upstream files
 * (forgejo/web_src/css/tellusgit-*.css) and are imported from
 * forgejo/web_src/css/index.css. Design tokens are defined once in
 * forgejo/web_src/css/base.css.
 *
 * Sections:
 *   3. CHROME  (navbar, sidebar, repo tabs)
 *   4. CONTROLS  (buttons, inputs, dropdowns)
 *   5. CONTAINERS  (cards, segments, tables, modals)
 *   6. REPOSITORY SURFACES  (header, file list, diff, clone)
 *   7. ACTIVITY  (issues, pulls, projects, releases, wiki)
 *  7a. UNIFIED TOOLBAR (issues / PRs / milestones / labels / explore)
 *   9. AUTH  (signin / signup)
 *  10. MOTION
 *  11. RESPONSIVE
 */

/*
 * TellusGit visual system
 * TellusChat-inspired layer that overrides Forgejo's default chrome.
 *
 * Structure
 * ─────────────────────────────────────────────────────────────────────
 *  1. Design tokens & theme palettes
 *  2. Base (body, links, focus, headings, selection)
 *  3. Chrome (navbar, sidebar, tab bar)
 *  4. Controls (buttons, inputs, labels, dropdowns, pagination, search)
 *  5. Containers (cards, segments, tables, lists, messages, modals)
 *  6. Repository surfaces (header, file list, file view, diff, clone, action bar)
 *  7. Activity (issues, pulls, projects, releases, wiki, activity feed)
 *  8. TellusGit shell (welcome, dashboard, home)
 *  8a. Spotlight command palette (bottom bar + search dropdown)
 *  9. Auth (signin / signup)
 * 10. Motion
 * 11. Responsive
 */

/* stylelint-disable scale-unlimited/declaration-strict-value, csstools/value-no-unknown-custom-properties, no-duplicate-selectors */

/* ═══════════════════════════════════════════════════════════════════════
 * 3. CHROME — navbar, sidebar, tab bar
 * ═══════════════════════════════════════════════════════════════════════ */

.following.bar,
.ui.menu.navbar,
.ui.secondary.menu,
.repository .secondary-nav,
.repository .repo-tabs,
.list-header {
  background: var(--tg-surface-overlay) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--tg-border) !important;
  box-shadow: none !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}
.following.bar .brand,
.following.bar .item,
.ui.menu .item { color: var(--tg-text) !important; }
.ui.menu .active.item,
.ui.menu .item:hover,
.following.bar .item:hover {
  background: var(--tg-surface-muted) !important;
  color: var(--tg-text) !important;
  border-radius: var(--tg-radius-sm) !important;
}

/* Repo tab bar (code, issues, pulls, …) — underline indicator, no chrome. */
.repository .secondary-nav .item,
.repository .repo-tabs .item,
.ui.tabular.menu .item {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 9px 12px !important;
  color: var(--tg-text-muted) !important;
  font-weight: 500;
  transition: color var(--tg-dur) var(--tg-ease);
}
.repository .secondary-nav .item:hover,
.repository .repo-tabs .item:hover,
.ui.tabular.menu .item:hover { color: var(--tg-text) !important; }
.repository .secondary-nav .item.active,
.repository .repo-tabs .item.active,
.ui.tabular.menu .item.active {
  color: var(--tg-text) !important;
  box-shadow: inset 0 -2px 0 0 var(--tg-accent) !important;
  border-radius: 0 !important;
  font-weight: 600;
}
.repository .secondary-nav .item .ui.label,
.repository .repo-tabs .item .ui.label,
.ui.tabular.menu .item .ui.label {
  background: transparent !important;
  color: inherit !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 0 0 6px !important;
}
.repository .secondary-nav .ui.tabs.divider { display: none !important; }

/* Forgejo logo: turn it into a TellusGit wordmark. */
#navbar-logo {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
#navbar-logo img {
  display: block !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: var(--tg-radius-pill) !important;
  object-fit: cover !important;
}
#navbar-logo::after {
  content: "TellusGit";
  color: var(--tg-text);
  font-weight: 900;
  line-height: 1;
}

/* TellusChat-style global sidebar. */
:root { --tg-sidebar-width: 250px; }

/* Global sidebar: flex column so children naturally spread to fill the
   sidebar width. Direct children take full width via `> *`;

/* Inputs */
input,
textarea,
select,
.ui.input > input,
.ui.form input,
.ui.form textarea,
.ui.selection.dropdown,
.ui.dropdown.selection {
  background: var(--color-input-background);
  color: var(--tg-text);
  border: 1px solid var(--color-input-border);
  border-radius: var(--tg-radius-sm);
  box-shadow: none;
  transition: border-color var(--tg-dur) var(--tg-ease), box-shadow var(--tg-dur) var(--tg-ease);
}
input:focus,
textarea:focus,
.ui.input.focus > input,
.ui.form input:focus,
.ui.form textarea:focus,
.ui.selection.dropdown:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tg-accent) 28%, transparent) !important;
}

/* Labels — all pill-shaped, no borders. */
.ui.label,
.label,
.ui.labels .label,
.repository .ui.label,
.ui.repository .ui.label {
  background: var(--tg-surface-muted) !important;
  border: 0 !important;
  color: var(--tg-text-muted) !important;
  border-radius: var(--tg-radius-pill) !important;
  font-weight: 500;
  box-shadow: none !important;
}
.ui.blue.label,   .ui.primary.label { color: var(--tg-blue)    !important; background: color-mix(in srgb, var(--tg-blue)    12%, transparent) !important; }
.ui.green.label   { color: var(--tg-emerald) !important; background: color-mix(in srgb, var(--tg-emerald) 12%, transparent) !important; }
.ui.red.label     { color: var(--tg-danger)  !important; background: color-mix(in srgb, var(--tg-danger)  12%, transparent) !important; }
.ui.yellow.label,
.ui.orange.label  { color: var(--tg-amber)   !important; background: color-mix(in srgb, var(--tg-amber)   14%, transparent) !important; }
.ui.violet.label,
.ui.purple.label  { color: var(--tg-violet)  !important; background: color-mix(in srgb, var(--tg-violet)  12%, transparent) !important; }
.ui.pink.label    { color: var(--tg-pink)    !important; background: color-mix(in srgb, var(--tg-pink)    12%, transparent) !important; }

/* Dropdown menus */
/* Fomantic positions dropdown popups with left/right classes. Inside a
 * .ui.menu toolbar, its own `.ui.menu:not(.vertical) .left.menu`
 * { display: flex } (0,4,0) outranks `.ui.dropdown .menu` (0,3,0), so
 * the popup stays visible even after Fomantic toggles it back to
 * .hidden — pinning one dropdown open and blocking every other one.
 * Force the closed state; .visible (open) is untouched. */
.ui.dropdown .menu.hidden {
  display: none !important;
}
.ui.dropdown .menu {
  background: var(--tg-surface-strong) !important;
  border: 1px solid var(--tg-border) !important;
  box-shadow: var(--tg-shadow-md) !important;
  border-radius: var(--tg-radius-sm) !important;
  color: var(--tg-text) !important;
  padding: 6px !important;
}
.ui.dropdown .menu > .item {
  background: transparent !important;
  border: 0 !important;
  color: var(--tg-text) !important;
  border-radius: var(--tg-radius-xs) !important;
}
.ui.dropdown .menu > .item:hover {
  background: var(--tg-surface-muted) !important;
  color: var(--tg-text) !important;
}

/* Pagination */
.ui.pagination.menu {
  border-radius: var(--tg-radius-md) !important;
  overflow: hidden;
  border: 1px solid var(--tg-border) !important;
}
.ui.pagination.menu .item {
  background: var(--tg-surface) !important;
  color: var(--tg-text-muted) !important;
  border-color: var(--tg-border) !important;
}
.ui.pagination.menu .active.item {
  background: color-mix(in srgb, var(--tg-indigo) 16%, transparent) !important;
  color: var(--tg-text) !important;
}

/* Search results */
.ui.search > .results,
.ui.category.search > .results {
  background: var(--tg-surface-strong) !important;
  border: 1px solid var(--tg-border) !important;
  border-radius: var(--tg-radius-md) !important;
  box-shadow: var(--tg-shadow-md) !important;
  overflow: hidden;
}
.ui.search > .results .result,
.ui.category.search > .results .category .result {
  color: var(--tg-text) !important;
  border-color: var(--tg-border) !important;
}
.ui.search > .results .result:hover,
.ui.category.search > .results .category .result:hover {
  background: var(--tg-surface-muted) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 5. CONTAINERS — cards, segments, tables, lists, messages, modals
 * ═══════════════════════════════════════════════════════════════════════ */

/* Segments are used as list / section frames — make them invisible. */
.ui.segment,
.ui.attached.segment,
.ui.attached.table.segment {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: var(--tg-text) !important;
  padding: 0 !important;
  margin: 0 !important;
}
.ui.attached.segment {
  border-top: 1px solid var(--tg-border) !important;
  padding: 12px 0 !important;
}
.ui.attached.header {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--tg-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 8px 0 !important;
  margin: 0 0 8px !important;
  color: var(--tg-text) !important;
  font-weight: 600;
}

.ui.divider {
  border-color: var(--tg-border) !important;
  border-top: 1px solid var(--tg-border) !important;
  border-bottom: 0 !important;
  margin: 14px 0 !important;
  height: 0 !important;
}

/* Cards — the only place a container gets a real frame. */
.repository .ui.card,
.ui.card,
.ui.cards > .card {
  background: var(--tg-surface) !important;
  border: 1px solid var(--tg-border) !important;
  box-shadow: var(--tg-shadow-sm) !important;
  border-radius: var(--tg-radius-md) !important;
  color: var(--tg-text) !important;
  overflow: hidden;
  transition: transform var(--tg-dur) var(--tg-ease), box-shadow var(--tg-dur) var(--tg-ease), border-color var(--tg-dur) var(--tg-ease);
}
.repository .ui.card:hover,
.ui.card:hover,
.ui.cards > .card:hover {
  transform: translateY(-1px);
  border-color: var(--tg-border-strong);
  box-shadow: var(--tg-shadow-md) !important;
}
.repository .ui.card .header,
.ui.card .header { color: var(--tg-text) !important; font-weight: 600; border: 0 !important; }
.repository .ui.card .meta,
.ui.card .meta { color: var(--tg-text-muted) !important; }

/* Tables — borderless, hover only. */
.ui.table {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border-collapse: separate !important;
  color: var(--tg-text) !important;
}
.ui.table th {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--tg-border) !important;
  color: var(--tg-text-muted) !important;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 10px !important;
}
.ui.table td {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--tg-border) !important;
  color: var(--tg-text) !important;
  padding: 8px 10px !important;
}
.ui.table tr:hover td { background: var(--tg-surface-muted) !important; }
.ui.table tr:last-child td { border-bottom: 0 !important; }

/* Lists */
.ui.list,
.ui.repository.list,
.repository .ui.list {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.repository .ui.list .item,
.ui.repository.list .item,
.repository .issue.list > .item {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--tg-border) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 8px 10px !important;
  margin: 0 !important;
  transition: background var(--tg-dur) var(--tg-ease);
}
.repository .ui.list .item:last-child,
.ui.repository.list .item:last-child { border-bottom: 0 !important; }
.repository .ui.list .item:hover,
.ui.repository.list .item:hover,
.repository .issue.list > .item:hover { background: var(--tg-surface-muted) !important; }
.repository .ui.list .item .header,
.ui.repository.list .item .header { color: var(--tg-text) !important; font-weight: 600; }
.repository .ui.list .item .meta,
.repository .ui.list .item .description,
.ui.repository.list .item .description { color: var(--tg-text-muted) !important; }

.list-header {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--tg-border) !important;
  box-shadow: none !important;
  padding: 8px 0 !important;
  margin: 0 0 8px !important;
  border-radius: 0 !important;
}
.list-header .item,
.list-header .button,
.list-header .input,
.list-header .menu {
  background: transparent !important;
  border-color: var(--tg-border) !important;
  box-shadow: none !important;
  color: var(--tg-text-muted) !important;
  border-radius: var(--tg-radius-sm) !important;
}
.list-header .item.active,
.list-header .menu .item.active {
  color: var(--tg-text) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: inset 0 -2px 0 0 var(--tg-accent) !important;
  border-radius: 0 !important;
}
.list-header .issue-list-new,
.list-header .new-pr-button,
.list-header .primary.button {
  background: var(--tg-accent) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: var(--tg-radius-pill) !important;
}
.list-header .issue-list-new:hover,
.list-header .new-pr-button:hover,
.list-header .primary.button:hover { filter: brightness(1.08); }

.issue-card {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--tg-border) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 10px 8px !important;
  margin: 0 !important;
  transition: background var(--tg-dur) var(--tg-ease);
}
.issue-card:hover { background: var(--tg-surface-muted) !important; }
.issue-card .issue-card-title { color: var(--tg-text) !important; font-weight: 600; }
#issue-pins .issue-card {
  background: transparent !important;
  border: 1px solid var(--tg-border) !important;
  border-radius: var(--tg-radius-sm) !important;
  padding: 8px 10px !important;
  margin-bottom: 4px;
}

/* Messages */
.ui.message.empty,
.repository .empty-state,
.ui.message.empty {
  background: transparent !important;
  border: 1px dashed var(--tg-border) !important;
  box-shadow: none !important;
  border-radius: var(--tg-radius-md) !important;
  color: var(--tg-text-muted) !important;
  padding: 32px 16px !important;
  text-align: center;
}
.ui.message.positive,
.ui.positive.message {
  background: color-mix(in srgb, var(--tg-emerald) 12%, transparent) !important;
  color: color-mix(in srgb, var(--tg-emerald), var(--tg-text) 25%) !important;
  border-color: color-mix(in srgb, var(--tg-emerald) 24%, transparent) !important;
}
.ui.message.negative,
.ui.negative.message,
.ui.error.message {
  background: color-mix(in srgb, var(--tg-danger) 12%, transparent) !important;
  color: color-mix(in srgb, var(--tg-danger), var(--tg-text) 20%) !important;
  border-color: color-mix(in srgb, var(--tg-danger) 24%, transparent) !important;
}

/* Modals & dimmers */
.ui.modal,
.ui.small.modal {
  background: var(--tg-surface-strong) !important;
  border: 1px solid var(--tg-border) !important;
  border-radius: var(--tg-radius-lg) !important;
  color: var(--tg-text) !important;
  box-shadow: var(--tg-shadow-lg) !important;
  overflow: hidden;
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
}
.ui.modal .header,
.ui.modal .content,
.ui.modal .actions { background: transparent !important; border: 0 !important; color: var(--tg-text) !important; }
.ui.modal .actions { border-top: 1px solid var(--tg-border) !important; }
.ui.dimmer {
  background: rgba(2, 6, 23, 0.4) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ui.popup {
  background: var(--tg-surface-strong) !important;
  border: 1px solid var(--tg-border) !important;
  border-radius: var(--tg-radius-md) !important;
  box-shadow: var(--tg-shadow-md) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 6. REPOSITORY SURFACES
 * ═══════════════════════════════════════════════════════════════════════ */

.page-content.repository,
.page-content {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  /* Only zero the sides we want bare; leave padding-bottom alone so the
     fixed bottom-bar / mobile tabbar can still push the last row of
     content above itself. The shell's padding-bottom: 7.375rem is the
     source of truth and lives in tellusgit-shell.css. */
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
}
.page-content.repository > .ui.container,
.page-content.repository > .ui.container.fluid {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-top: 0 !important;
  padding-bottom: 20px !important;
  margin-top: 0 !important;
}
.page-footer {
  background: var(--tg-surface-overlay) !important;
  border-top: 1px solid var(--tg-border) !important;
  color: var(--tg-text-muted) !important;
  backdrop-filter: blur(16px) saturate(145%);
  -webkit-backdrop-filter: blur(16px) saturate(145%);
}

/* Repo header strip (name, description, topics, stats) */
.repository .repo-header,
.repository .header-wrapper,
.repository .repo-description,
.repository .repo-desc,
.repository .repo-topics,
.repository .secondary-nav,
.repository .secondary-nav .overflow-menu,
.repository .secondary-nav .overflow-menu-items,
.repository .repository-summary,
.repository .repository-summary .item,
.repository .repository-summary .repository-stat {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.repository .repository-summary .item.active,
.repository .repository-summary .repository-stat.active {
  background: transparent !important;
  color: var(--tg-accent) !important;
  box-shadow: inset 0 -2px 0 0 var(--tg-accent) !important;
  border-radius: 0 !important;
}
.repository .repo-topics .repo-topic {
  background: transparent !important;
  border: 1px solid var(--tg-border) !important;
  border-radius: var(--tg-radius-pill) !important;
  color: var(--tg-text-muted) !important;
  box-shadow: none !important;
}
.repository .repo-topics .repo-topic:hover {
  background: var(--tg-surface-muted) !important;
  color: var(--tg-text) !important;
}

/* File list */
.repository.file.list #repo-files-table,
.repository.file.list #repo-files-table thead th,
.repository.file.list #repo-files-table tbody tr,
.repository.file.list #repo-files-table tbody tr td {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.repository.file.list #repo-files-table tbody tr.entry {
  border-bottom: 1px solid var(--tg-border) !important;
}
.repository.file.list #repo-files-table tbody tr.entry:hover {
  background: var(--tg-surface-muted) !important;
}
.repository.file.list #repo-files-table .commit-list {
  border-bottom: 1px solid var(--tg-border) !important;
}
.repository.file.list .repo-file-icon,
.repository.file.list a,
.repository .repo-title a,
.explore .repo-title a { color: var(--tg-text) !important; }
.repository .repo-title .repo-icon,
.explore .repo-title .repo-icon,
.dashboard .repo-title .repo-icon { color: var(--tg-indigo) !important; }

/* Clone panel + branch dropdown */
.repository .clone-panel {
  background: var(--tg-surface) !important;
  border: 1px solid var(--tg-border) !important;
  border-radius: var(--tg-radius-md) !important;
  box-shadow: var(--tg-shadow-sm) !important;
}
.repository .branch-dropdown-button,
.repository .clone-panel input { border-radius: var(--tg-radius-sm) !important; }

/* Action bar (watch, star, fork, RSS) — borderless pills. */
.repository .repo-buttons .ui.button,
.repository .repo-buttons .ui.basic.button,
.repository .repo-buttons .ui.compact.small.basic.button,
.repository .repo-buttons .ui.compact.basic.button,
.repository .repo-buttons .ui.compact.small.button,
.repository .repo-buttons .ui.labeled.button,
.repository .repo-buttons .ui.dropdown.icon.button {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--tg-text-muted) !important;
  border-radius: var(--tg-radius-pill) !important;
  padding: 5px 8px !important;
  min-height: 30px;
  margin: 0 !important;
  transition: background var(--tg-dur) var(--tg-ease), color var(--tg-dur) var(--tg-ease);
}
.repository .repo-buttons .ui.basic.label,
.repository .repo-buttons .ui.labeled.button > .label {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--tg-text-muted) !important;
  font-weight: 500 !important;
  padding: 5px 8px !important;
  border-radius: var(--tg-radius-pill) !important;
  margin: 0 0 0 -2px !important;
  transition: color var(--tg-dur) var(--tg-ease), background var(--tg-dur) var(--tg-ease);
}
.repository .repo-buttons .ui.button:hover,
.repository .repo-buttons .ui.basic.button:hover,
.repository .repo-buttons .ui.labeled.button:hover > .label,
.repository .repo-buttons .ui.labeled.button:hover > .button,
.repository .repo-buttons .ui.labeled.button > .label:hover,
.repository .repo-buttons .ui.dropdown.icon.button:hover {
  background: var(--tg-surface-muted) !important;
  color: var(--tg-text) !important;
  border: 0 !important;
  box-shadow: none !important;
}
.repository .repo-buttons .ui.compact.small.basic.button[disabled] {
  color: var(--tg-text-soft) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* File view, commit list, diff — strip the heavy Forgejo chrome. */
.repository .file-header,
.repository .commit-list,
.repository .commit-list .commit-list-row,
.repository .commit-list .commit-list-row:hover,
.repository .diff-box .header,
.repository .file-view,
.repository .markup,
.repository .markdown,
.repository .chroma,
.repository .code-view,
.repository .non-diff-file-content,
.repository .ui.segment.sub-menu,
.repository .diff-detail-box,
.repository .commit-summary,
.repository .branch-tag-choice {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.repository .commit-list .commit-list-row {
  border-bottom: 1px solid var(--tg-border) !important;
  padding: 8px 10px !important;
}
.repository .commit-list .commit-list-row:hover { background: var(--tg-surface-muted) !important; }
.repository .file-view,
.repository .markup,
.repository .markdown,
.repository .chroma { border-radius: var(--tg-radius-sm) !important; }
.repository .diff-file-box {
  border-radius: var(--tg-radius-md) !important;
  overflow: hidden;
  border: 1px solid var(--tg-border) !important;
  background: var(--tg-surface) !important;
}
.repository .diff-file-header {
  background: var(--tg-surface-strong) !important;
  border-bottom: 1px solid var(--tg-border) !important;
}
.repository .code-view .lines-num {
  background: transparent !important;
  color: var(--tg-text-soft) !important;
  border: 0 !important;
}
.repository .code-view .lines-code { background: transparent !important; }

code, pre,
.markup code, .markdown code,
.repository .file-view code,
.chroma {
  background: var(--tg-code-bg) !important;
  color: var(--tg-code-text) !important;
  border-radius: var(--tg-radius-xs);
}
.file-view, .markup, .markdown { color: var(--tg-text) !important; }
.markup blockquote, .markdown blockquote {
  border-left: 3px solid var(--tg-indigo) !important;
  background: var(--tg-surface-muted);
  border-radius: 0 var(--tg-radius-sm) var(--tg-radius-sm) 0;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 7. ACTIVITY — issues, pulls, projects, releases, wiki, activity feed
 * ═══════════════════════════════════════════════════════════════════════ */

.repository .repo-buttons .ui.button,
.repository .file-actions .ui.button,
.repository .commit-button-row .ui.button { min-height: 34px; }

#dashboard-repo-list { width: 100%; min-width: 0; }
#dashboard-repo-list .ui.input input,
#dashboard-repo-list input { min-height: 38px; }
#dashboard-repo-list .repo-list,
#dashboard-repo-list .flex-list { display: grid; gap: 8px; }
#dashboard-repo-list .repo-list .item,
#dashboard-repo-list .flex-item {
  border: 1px solid var(--tg-border) !important;
  border-radius: var(--tg-radius-sm) !important;
  background: var(--tg-surface-muted) !important;
  padding: 11px !important;
}

.ui.list .list > .item .header,
.ui.list > .item .header,
.repository .metadata,
.repository .repo-description,
.repo-list .description { color: var(--tg-text-muted) !important; }

/* ───────────────────────────────────────────────────────────────────────
 * 7a. UNIFIED TOOLBAR — issue / PR / milestone / label / explore toolbars
 *
 * Forgejo's `ui.secondary.filter.menu` / `ui.secondary.menu` wrappers
 * leave a visible "parent container" chrome around each filter dropdown
 * (Label, Milestone, Project, Author, Assignee, Sort, Type), making them
 * look nested inside a tab strip. We strip that chrome here and re-skin
 * every dropdown as a flat pill button so the whole row reads as one
 * modern toolbar.
 *
 * Affected selectors:
 *   • `.issue-list-toolbar`            — issues / pulls filter row
 *   • `.list-header-issues`            — issues / pulls top row
 *   • `.list-header`                   — explore repos / users / orgs / code
 *   • `.issue-navbar`                  — labels page sub-header
 *   • `h4.ui.top.attached.header`      — labels page header (Sort dropdown)
 * ─────────────────────────────────────────────────────────────────────── */

/* Shared pill button — every filter dropdown, every switch item, every
   primary action button in the toolbar uses this shape. */
.list-header .ui.dropdown,
.list-header .ui.dropdown > .text,
.list-header .ui.dropdown > .dropdown.icon,
.issue-list-toolbar .ui.dropdown,
.issue-list-toolbar .ui.dropdown > .text,
.issue-list-toolbar .ui.dropdown > .dropdown.icon,
.issue-navbar .ui.dropdown,
.issue-navbar .ui.dropdown > .text,
.issue-navbar .ui.dropdown > .dropdown.icon,
.issue-navbar .ui.button,
.list-header-issues .switch,
.list-header .switch,
.issue-list-toolbar .switch,
.list-header-issues .switch .item,
.list-header .switch .item,
.issue-list-toolbar .switch .item,
.issue-list-toolbar .ui.menu:not(.ui.dropdown .menu),
.issue-list-toolbar .issue-list-toolbar-right .ui.secondary.filter.menu,
.list-header .ui.menu:not(.ui.dropdown .menu),
.list-header .ui.small.secondary.filter.menu,
.list-header-issues .button-row .ui.button {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Strip the gray box around the .switch tab containers themselves. */
.list-header-issues .switch,
.list-header .switch,
.issue-list-toolbar .switch,
.issue-navbar .switch,
.list-header-issues .switch *,
.list-header .switch *,
.issue-list-toolbar .switch *,
.issue-navbar .switch * {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}
.list-header-issues .switch,
.list-header .switch,
.issue-list-toolbar .switch,
.issue-navbar .switch {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 2px !important;
}

/* ── Strip the "nested" chrome from the toolbar wrappers ────────────── */
/* :not(.ui.dropdown .menu) keeps Fomantic dropdown POPUPS out of these
 * wrappers: the popups are `.ui.menu` descendants of headers that also
 * carry .list-header/.issue-navbar, and a blanket display:flex !important
 * pinned every popup open (Fomantic's .hidden could not win), which
 * blocked every other dropdown on the page. */
.issue-list-toolbar .ui.secondary.filter.menu.labels:not(.ui.dropdown .menu),
.issue-list-toolbar .ui.secondary.filter.menu:not(.ui.dropdown .menu),
.issue-list-toolbar .ui.compact.tiny.secondary.menu:not(.ui.dropdown .menu),
.issue-list-toolbar .ui.menu:not(.ui.dropdown .menu),
.list-header .ui.small.secondary.filter.menu:not(.ui.dropdown .menu),
.list-header .ui.secondary.menu:not(.ui.dropdown .menu),
.list-header .ui.menu:not(.ui.dropdown .menu),
.issue-navbar .ui.secondary.menu:not(.ui.dropdown .menu) {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  min-height: 0 !important;
  height: auto !important;
}
/* Kill the default Forgejo item chrome on filter menu items. */
.issue-list-toolbar .ui.secondary.filter.menu.labels .item,
.issue-list-toolbar .ui.secondary.filter.menu .item,
.issue-list-toolbar .ui.compact.tiny.secondary.menu .item,
.list-header .ui.small.secondary.filter.menu .item,
.list-header .ui.secondary.menu .item,
.issue-navbar .ui.secondary.menu .item {
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--tg-radius-pill) !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  color: var(--tg-text-muted) !important;
}

/* ── Generic filter pill (dropdown openers + switch items) ──────────── */
.issue-list-toolbar .ui.dropdown.type.jump.item,
.issue-list-toolbar .ui.dropdown.jump.item,
.issue-list-toolbar .ui.compact.tiny.secondary.menu .item,
.list-header .ui.dropdown.type.jump.item,
.list-header .ui.dropdown.jump.item,
.list-header-issues .switch .item,
.list-header .switch .item,
.issue-list-toolbar .switch .item,
.issue-navbar .ui.dropdown.jump.item,
.issue-navbar .ui.jump.dropdown {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--tg-radius-pill) !important;
  color: var(--tg-text-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  margin: 0 !important;
  transition:
    background var(--tg-dur) var(--tg-ease),
    color var(--tg-dur) var(--tg-ease),
    border-color var(--tg-dur) var(--tg-ease);
  white-space: nowrap;
  text-decoration: none !important;
  cursor: pointer;
}
.issue-list-toolbar .ui.dropdown.type.jump.item > .text,
.issue-list-toolbar .ui.dropdown.jump.item > .text,
.list-header .ui.dropdown.type.jump.item > .text,
.list-header .ui.dropdown.jump.item > .text,
.issue-navbar .ui.dropdown.jump.item > .text,
.issue-navbar .ui.jump.dropdown > .text {
  padding: 0 !important;
  color: inherit !important;
  font-weight: inherit !important;
  background: transparent !important;
}
.issue-list-toolbar .ui.dropdown.type.jump.item > .dropdown.icon,
.issue-list-toolbar .ui.dropdown.jump.item > .dropdown.icon,
.list-header .ui.dropdown.type.jump.item > .dropdown.icon,
.list-header .ui.dropdown.jump.item > .dropdown.icon,
.issue-navbar .ui.dropdown.jump.item > .dropdown.icon,
.issue-navbar .ui.jump.dropdown > .dropdown.icon {
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: .65 !important;
  color: inherit !important;
}
.issue-list-toolbar .ui.dropdown.type.jump.item svg.octicon,
.issue-list-toolbar .ui.dropdown.jump.item svg.octicon,
.list-header .ui.dropdown.type.jump.item svg.octicon,
.list-header .ui.dropdown.jump.item svg.octicon,
.issue-navbar .ui.jump.dropdown svg.octicon {
  width: 14px !important;
  height: 14px !important;
  margin: 0 !important;
}

/* Hover: subtle surface tint, text becomes regular text color. */
.issue-list-toolbar .ui.dropdown.type.jump.item:hover,
.issue-list-toolbar .ui.dropdown.jump.item:hover,
.issue-list-toolbar .ui.compact.tiny.secondary.menu .item:hover,
.list-header .ui.dropdown.type.jump.item:hover,
.list-header .ui.dropdown.jump.item:hover,
.list-header-issues .switch .item:hover,
.list-header .switch .item:hover,
.issue-list-toolbar .switch .item:hover,
.issue-navbar .ui.dropdown.jump.item:hover,
.issue-navbar .ui.jump.dropdown:hover {
  background: var(--tg-surface-muted) !important;
  color: var(--tg-text) !important;
  border-color: transparent !important;
}
.issue-list-toolbar .ui.dropdown.type.jump.item:hover > .dropdown.icon,
.issue-list-toolbar .ui.dropdown.jump.item:hover > .dropdown.icon,
.list-header .ui.dropdown.type.jump.item:hover > .dropdown.icon,
.list-header .ui.dropdown.jump.item:hover > .dropdown.icon,
.issue-navbar .ui.jump.dropdown:hover > .dropdown.icon { opacity: 1 !important; }

/* Active / pressed (when the dropdown is open or the item is current). */
.issue-list-toolbar .ui.dropdown.type.jump.item.active,
.issue-list-toolbar .ui.dropdown.jump.item.active,
.issue-list-toolbar .ui.dropdown.type.jump.item.visible,
.issue-list-toolbar .ui.dropdown.jump.item.visible,
.list-header .ui.dropdown.type.jump.item.active,
.list-header .ui.dropdown.jump.item.active,
.list-header .ui.dropdown.type.jump.item.visible,
.list-header .ui.dropdown.jump.item.visible,
.issue-navbar .ui.dropdown.jump.item.active,
.issue-navbar .ui.dropdown.jump.item.visible,
.issue-navbar .ui.jump.dropdown.active,
.issue-navbar .ui.jump.dropdown.visible {
  background: var(--tg-surface-muted) !important;
  color: var(--tg-text) !important;
  border-color: var(--tg-border) !important;
  box-shadow: none !important;
}
.list-header-issues .switch .item.active,
.list-header .switch .item.active,
.issue-list-toolbar .switch .item.active {
  background: transparent !important;
  color: var(--tg-text) !important;
  border-color: transparent !important;
  box-shadow: inset 0 -2px 0 0 var(--tg-accent) !important;
  border-radius: var(--tg-radius-pill) !important;
  font-weight: 600 !important;
}

/* Disabled (no milestones / no labels / etc.) — keep it readable but muted. */
.issue-list-toolbar .ui.dropdown.disabled,
.issue-list-toolbar .ui.dropdown.disabled > .text,
.list-header .ui.dropdown.disabled,
.list-header .ui.dropdown.disabled > .text,
.issue-navbar .ui.dropdown.disabled,
.issue-navbar .ui.dropdown.disabled > .text {
  opacity: .5 !important;
  pointer-events: none;
}

/* ── Dropdown menu (popover) — clean glass panel, modern look ───────── */
.issue-list-toolbar .ui.dropdown .menu,
.list-header .ui.dropdown .menu,
.issue-navbar .ui.dropdown .menu {
  background: var(--tg-surface-strong) !important;
  border: 1px solid var(--tg-border) !important;
  border-radius: var(--tg-radius-md) !important;
  box-shadow: var(--tg-shadow-md) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  padding: 6px !important;
  margin-top: 4px !important;
  min-width: 200px;
  max-width: 320px;
  color: var(--tg-text) !important;
}
.issue-list-toolbar .ui.dropdown .menu > .item,
.list-header .ui.dropdown .menu > .item,
.issue-navbar .ui.dropdown .menu > .item {
  display: flex !important;
  align-items: center !important;
  gap: 8px;
  padding: 7px 10px !important;
  border-radius: var(--tg-radius-sm) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--tg-text) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  min-height: 0 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  transition:
    background var(--tg-dur) var(--tg-ease),
    color var(--tg-dur) var(--tg-ease);
}
.issue-list-toolbar .ui.dropdown .menu > .item:hover,
.list-header .ui.dropdown .menu > .item:hover,
.issue-navbar .ui.dropdown .menu > .item:hover {
  background: var(--tg-surface-muted) !important;
  color: var(--tg-text) !important;
}
.issue-list-toolbar .ui.dropdown .menu > .item.active.selected,
.list-header .ui.dropdown .menu > .item.active.selected,
.issue-navbar .ui.dropdown .menu > .item.active.selected {
  background: color-mix(in srgb, var(--tg-accent) 14%, transparent) !important;
  color: var(--tg-text) !important;
  font-weight: 600 !important;
}
.issue-list-toolbar .ui.dropdown .menu > .header,
.list-header .ui.dropdown .menu > .header,
.issue-navbar .ui.dropdown .menu > .header {
  padding: 6px 10px 4px !important;
  margin: 4px 0 2px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--tg-text-soft) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.issue-list-toolbar .ui.dropdown .menu > .divider,
.list-header .ui.dropdown .menu > .divider,
.issue-navbar .ui.dropdown .menu > .divider {
  border: 0 !important;
  border-top: 1px solid var(--tg-border) !important;
  height: 0 !important;
  margin: 4px 0 !important;
  background: transparent !important;
}
.issue-list-toolbar .ui.dropdown .menu .ui.icon.search.input,
.list-header .ui.dropdown .menu .ui.icon.search.input,
.issue-navbar .ui.dropdown .menu .ui.icon.search.input {
  margin: 2px 0 4px !important;
}
.issue-list-toolbar .ui.dropdown .menu .ui.icon.search.input input,
.list-header .ui.dropdown .menu .ui.icon.search.input input,
.issue-navbar .ui.dropdown .menu .ui.icon.search.input input {
  height: 32px !important;
  padding: 6px 10px 6px 32px !important;
  border-radius: var(--tg-radius-sm) !important;
  background: var(--color-input-background) !important;
  border: 1px solid var(--tg-border) !important;
  color: var(--tg-text) !important;
  font-size: 13px !important;
}
.issue-list-toolbar .ui.dropdown .menu .info,
.list-header .ui.dropdown .menu .info,
.issue-navbar .ui.dropdown .menu .info {
  display: block !important;
  padding: 6px 10px !important;
  font-size: 11px !important;
  color: var(--tg-text-soft) !important;
}
.issue-list-toolbar .ui.dropdown .menu .info kbd,
.list-header .ui.dropdown .menu .info kbd,
.issue-navbar .ui.dropdown .menu .info kbd {
  background: var(--tg-surface-muted) !important;
  border: 1px solid var(--tg-border) !important;
  color: var(--tg-text-muted) !important;
  border-radius: var(--tg-radius-xs) !important;
  padding: 1px 5px !important;
  font-family: var(--fonts-monospace) !important;
  font-size: 11px !important;
  box-shadow: none !important;
}

/* ── Issue-list-toolbar layout — single flat row ─────────────────────── */
.issue-list-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 8px 0 !important;
  margin: 0 0 12px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--tg-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.issue-list-toolbar.issue-list-toolbar-right { gap: 6px !important; }
.issue-list-toolbar-left,
.issue-list-toolbar-right {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 4px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.issue-list-toolbar-left .switch,
.issue-list-toolbar-right .switch { display: flex !important; flex-wrap: wrap !important; gap: 2px !important; }

/* ── list-header-issues — top row (sub-tabs + search + primary CTA) ─── */
.list-header-issues {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 0 8px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.list-header-issues .switch.issue-list-navbar { display: flex !important; gap: 2px !important; }
.list-header-issues .switch.issue-list-navbar .item {
  display: inline-flex !important;
  align-items: center !important;
  height: 34px !important;
  padding: 0 12px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--tg-radius-pill) !important;
  color: var(--tg-text-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition:
    background var(--tg-dur) var(--tg-ease),
    color var(--tg-dur) var(--tg-ease);
}
.list-header-issues .switch.issue-list-navbar .item:hover {
  background: var(--tg-surface-muted) !important;
  color: var(--tg-text) !important;
}
.list-header-issues .switch.issue-list-navbar .item.active {
  background: transparent !important;
  color: var(--tg-text) !important;
  box-shadow: inset 0 -2px 0 0 var(--tg-accent) !important;
  font-weight: 600 !important;
  border-radius: var(--tg-radius-pill) !important;
}

/* ── list-header-search — the search bar inside the top row ─────────── */
.list-header-search {
  flex: 1 1 240px !important;
  min-width: 200px !important;
  max-width: 480px !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}
.list-header-search .ui.search.fluid.action.input {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  background: var(--tg-surface-muted) !important;
  border: 1px solid transparent !important;
  border-radius: var(--tg-radius-pill) !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 34px !important;
  height: 34px !important;
  transition:
    background var(--tg-dur) var(--tg-ease),
    border-color var(--tg-dur) var(--tg-ease),
    box-shadow var(--tg-dur) var(--tg-ease);
}
.list-header-search .ui.search.fluid.action.input:focus-within,
.list-header-search .ui.search.fluid.action.input.focus {
  background: var(--tg-surface) !important;
  border-color: var(--tg-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tg-accent) 22%, transparent) !important;
}
.list-header-search .ui.search.fluid.action.input > input,
.list-header-search input[type="search"] {
  flex: 1 !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--tg-radius-pill) !important;
  color: var(--tg-text) !important;
  font-size: 13px !important;
  box-shadow: none !important;
}
.list-header-search input[type="search"]::placeholder { color: var(--tg-text-soft) !important; }
.list-header-search .ui.search.fluid.action.input > input:focus {
  outline: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
.list-header-search .ui.search.fluid.action.input > .ui.icon.button,
.list-header-search .ui.small.icon.button {
  width: 34px !important;
  min-width: 34px !important;
  height: 32px !important;
  margin: 0 2px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--tg-radius-pill) !important;
  color: var(--tg-text-muted) !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.list-header-search .ui.search.fluid.action.input > .ui.icon.button:hover {
  background: var(--tg-surface-elevated) !important;
  color: var(--tg-text) !important;
}
/* Help (?) icon next to the search bar */
.list-header-issues > a.show-modal[data-modal="#search-syntax-modal"] {
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: var(--tg-radius-pill) !important;
  color: var(--tg-text-muted) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  transition:
    background var(--tg-dur) var(--tg-ease),
    color var(--tg-dur) var(--tg-ease);
}
.list-header-issues > a.show-modal[data-modal="#search-syntax-modal"]:hover {
  background: var(--tg-surface-muted) !important;
  color: var(--tg-text) !important;
}

/* ── Primary CTA button in the toolbar ──────────────────────────────── */
.list-header-issues .issue-list-new,
.list-header-issues .new-pr-button,
.list-header-issues .new-issue-button,
.list-header-issues .new-label.button,
.list-header-issues .primary.button,
.list-header-issues .button-row .ui.small.primary.button,
.list-header .button-row .ui.small.primary.button,
.list-header-issues .ui.small.primary.new-label.button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 16px !important;
  background: var(--tg-accent) !important;
  border: 0 !important;
  border-radius: var(--tg-radius-pill) !important;
  box-shadow: var(--tg-shadow-sm) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition:
    transform var(--tg-dur) var(--tg-ease),
    box-shadow var(--tg-dur) var(--tg-ease),
    filter var(--tg-dur) var(--tg-ease);
  white-space: nowrap;
}
.list-header-issues .issue-list-new:hover,
.list-header-issues .new-pr-button:hover,
.list-header-issues .new-issue-button:hover,
.list-header-issues .new-label.button:hover,
.list-header-issues .primary.button:hover,
.list-header-issues .button-row .ui.small.primary.button:hover,
.list-header .button-row .ui.small.primary.button:hover,
.list-header-issues .ui.small.primary.new-label.button:hover {
  transform: translateY(-1px);
  box-shadow: var(--tg-shadow-md) !important;
  filter: brightness(1.05);
  color: #fff !important;
}
.list-header-issues .issue-list-new:active,
.list-header-issues .new-pr-button:active,
.list-header-issues .new-issue-button:active,
.list-header-issues .new-label.button:active,
.list-header-issues .primary.button:active,
.list-header-issues .button-row .ui.small.primary.button:active,
.list-header-issues .ui.small.primary.new-label.button:active {
  transform: translateY(0);
}
.list-header-issues .issue-list-new.disabled,
.list-header-issues .new-pr-button.disabled,
.list-header-issues .new-issue-button.disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  filter: none !important;
  transform: none !important;
}
.list-header-issues .button-row {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* ── explore / list-header (Filter + Sort dropdowns) ───────────────── */
.list-header {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 0 !important;
  margin: 0 0 8px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* The search form (between the Open/Closed switch and the Type/Sort
   dropdowns) is the visual center of the row. We cap its width and
   auto-center it so it reads as a proper search bar instead of
   stretching to fill the entire middle area. The toggle and
   Type/Sort are siblings with their natural width; the leftover
   space on either side of the form is balanced by `margin: 0 auto`,
   which in a flex row absorbs the free space symmetrically. */
.list-header > form {
  flex: 1 1 auto !important;
  min-width: 200px !important;
  max-width: 520px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.list-header > form .ui.small.fluid.action.input {
  flex: 1 1 auto !important;
  min-width: 180px !important;
  background: var(--tg-surface-muted) !important;
  border: 1px solid transparent !important;
  border-radius: var(--tg-radius-pill) !important;
  box-shadow: none !important;
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  transition:
    background var(--tg-dur) var(--tg-ease),
    border-color var(--tg-dur) var(--tg-ease),
    box-shadow var(--tg-dur) var(--tg-ease);
}
.list-header > form .ui.small.fluid.action.input:focus-within {
  background: var(--tg-surface) !important;
  border-color: var(--tg-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tg-accent) 22%, transparent) !important;
}
.list-header > form .ui.small.fluid.action.input > input[type="search"] {
  flex: 1 !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--tg-text) !important;
  font-size: 13px !important;
}
.list-header > form .ui.small.fluid.action.input > input::placeholder { color: var(--tg-text-soft) !important; }
.list-header > form .ui.small.fluid.action.input > .ui.small.icon.button,
.list-header > form .ui.small.fluid.action.input > button {
  width: 34px !important;
  height: 32px !important;
  margin: 0 2px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: var(--tg-radius-pill) !important;
  color: var(--tg-text-muted) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.list-header > form .ui.small.fluid.action.input > .ui.small.icon.button:hover {
  background: var(--tg-surface-elevated) !important;
  color: var(--tg-text) !important;
}
.list-header > form .ui.dropdown.type.jump.item.tw-mr-0,
.list-header > form .ui.small.dropdown.type.jump.item.tw-mr-0 {
  margin: 0 !important;
}

/* explore/search.tmpl uses a <details> dropdown — give it the same pill style. */
.list-header details.dropdown {
  position: relative !important;
  margin: 0 !important;
}
.list-header details.dropdown > summary.options {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--tg-radius-pill) !important;
  color: var(--tg-text-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer;
  list-style: none !important;
  transition:
    background var(--tg-dur) var(--tg-ease),
    color var(--tg-dur) var(--tg-ease);
}
.list-header details.dropdown > summary.options::-webkit-details-marker { display: none !important; }
.list-header details.dropdown > summary.options:hover,
.list-header details.dropdown[open] > summary.options {
  background: var(--tg-surface-muted) !important;
  color: var(--tg-text) !important;
}
.list-header details.dropdown > summary.options > svg {
  width: 14px !important;
  height: 14px !important;
  opacity: .65;
}
.list-header details.dropdown > .content {
  position: absolute !important;
  right: 0 !important;
  top: calc(100% + 4px) !important;
  z-index: 20 !important;
  background: var(--tg-surface-strong) !important;
  border: 1px solid var(--tg-border) !important;
  border-radius: var(--tg-radius-md) !important;
  box-shadow: var(--tg-shadow-md) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  padding: 6px !important;
  min-width: 200px !important;
}
.list-header details.dropdown > .content > ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.list-header details.dropdown > .content > ul > li {
  display: block !important;
  margin: 0 !important;
}
.list-header details.dropdown > .content > ul > li > a {
  display: flex !important;
  align-items: center !important;
  padding: 7px 10px !important;
  border-radius: var(--tg-radius-sm) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--tg-text) !important;
  text-decoration: none !important;
  transition:
    background var(--tg-dur) var(--tg-ease),
    color var(--tg-dur) var(--tg-ease);
}
.list-header details.dropdown > .content > ul > li > a:hover {
  background: var(--tg-surface-muted) !important;
  color: var(--tg-text) !important;
}
.list-header details.dropdown > .content > ul > li > a.active {
  background: color-mix(in srgb, var(--tg-accent) 14%, transparent) !important;
  color: var(--tg-text) !important;
  font-weight: 600 !important;
}

/* ── h4.ui.top.attached.header on labels page (Sort dropdown) ──────── */
.repository.labels h4.ui.top.attached.header,
.page-content.repository.labels .ui.top.attached.header,
.ui.top.attached.header:has(.ui.secondary.menu) {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  padding: 10px 0 !important;
  margin: 0 0 10px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--tg-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--tg-text) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  min-height: 0 !important;
}
.repository.labels h4.ui.top.attached.header .ui.right {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.repository.labels h4.ui.top.attached.header .ui.secondary.menu,
.page-content.repository.labels .ui.top.attached.header .ui.secondary.menu {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
}

/* ── issue-navbar on labels page ───────────────────────────────────── */
.issue-navbar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  padding: 10px 0 !important;
  margin: 0 0 12px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--tg-border) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.issue-navbar .switch.issue-list-navbar {
  display: flex !important;
  gap: 2px !important;
  align-items: center !important;
}
.issue-navbar .switch.issue-list-navbar .item {
  display: inline-flex !important;
  align-items: center !important;
  height: 34px !important;
  padding: 0 12px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--tg-radius-pill) !important;
  color: var(--tg-text-muted) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition:
    background var(--tg-dur) var(--tg-ease),
    color var(--tg-dur) var(--tg-ease);
}
.issue-navbar .switch.issue-list-navbar .item:hover {
  background: var(--tg-surface-muted) !important;
  color: var(--tg-text) !important;
}
.issue-navbar .switch.issue-list-navbar .item.active {
  background: transparent !important;
  color: var(--tg-text) !important;
  box-shadow: inset 0 -2px 0 0 var(--tg-accent) !important;
  font-weight: 600 !important;
  border-radius: var(--tg-radius-pill) !important;
}

/* ── Action buttons (open/close/delete) inside filter_actions ──────── */
.issue-list-toolbar #issue-actions .ui.primary.basic.button,
.issue-list-toolbar #issue-actions .ui.red.basic.button,
.issue-list-toolbar #issue-actions .ui.red.button,
.issue-list-toolbar #issue-actions .ui.button.issue-action {
  display: inline-flex !important;
  align-items: center !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  background: var(--tg-surface-muted) !important;
  border: 1px solid transparent !important;
  border-radius: var(--tg-radius-pill) !important;
  color: var(--tg-text) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  transition:
    background var(--tg-dur) var(--tg-ease),
    color var(--tg-dur) var(--tg-ease);
}
.issue-list-toolbar #issue-actions .ui.primary.basic.button:hover,
.issue-list-toolbar #issue-actions .ui.red.basic.button:hover,
.issue-list-toolbar #issue-actions .ui.red.button:hover,
.issue-list-toolbar #issue-actions .ui.button.issue-action:hover {
  background: var(--tg-surface-elevated) !important;
  color: var(--tg-text) !important;
}
.issue-list-toolbar #issue-actions .ui.red.button,
.issue-list-toolbar #issue-actions .ui.red.basic.button {
  background: color-mix(in srgb, var(--tg-danger) 12%, transparent) !important;
  color: var(--tg-danger) !important;
}
.issue-list-toolbar #issue-actions .ui.red.button:hover,
.issue-list-toolbar #issue-actions .ui.red.basic.button:hover {
  background: color-mix(in srgb, var(--tg-danger) 22%, transparent) !important;
  color: var(--tg-danger) !important;
}
.issue-list-toolbar #issue-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 8px 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ── Responsive: collapse on narrow screens ─────────────────────────── */
@media (max-width: 900px) {
  .list-header-issues,
  .issue-list-toolbar,
  .list-header,
  .issue-navbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .list-header-search,
  .list-header > form,
  .list-header-search.ui.form { max-width: 100% !important; }
  .issue-list-toolbar-left,
  .issue-list-toolbar-right { justify-content: flex-start !important; }
  .list-header-issues .switch.issue-list-navbar,
  .issue-list-toolbar-left .switch,
  .issue-list-toolbar-right .switch { overflow-x: auto !important; flex-wrap: nowrap !important; }
  .list-header-issues .issue-list-new,
  .list-header-issues .new-pr-button,
  .list-header-issues .new-issue-button,
  .list-header-issues .new-label.button,
  .list-header-issues .button-row .ui.small.primary.button { align-self: flex-end !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * 9. AUTH — signin / signup
 * ═══════════════════════════════════════════════════════════════════════ */

.page-content.user.signin,
.page-content.user.signup,
.user.signin,
.user.signup {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  padding: clamp(24px, 5vw, 80px) clamp(16px, 4vw, 40px) !important;
  box-sizing: border-box !important;
}
.page-content.user.signin .ui.page.grid,
.page-content.user.signup .ui.page.grid,
.user.signin .ui.page.grid,
.user.signup .ui.page.grid {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.page-content.user.signin .column,
.page-content.user.signup .column,
.user.signin .column,
.user.signup .column {
  width: 100% !important;
  max-width: 420px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
.page-content.user.signin .tw-max-w-2xl,
.page-content.user.signup .tw-max-w-2xl,
.user.signin .tw-max-w-2xl,
.user.signup .tw-max-w-2xl { max-width: 420px !important; }
.page-content.user.signin .ui.container,
.page-content.user.signup .ui.container,
.user.signin .ui.container,
.user.signup .ui.container {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.user.signin .ui.segment,
.user.signup .ui.segment,
.user.signin .ui.attached.segment,
.user.signup .ui.attached.segment {
  padding: clamp(28px, 4vw, 44px) !important;
  border-radius: var(--tg-radius-xl) !important;
  box-shadow: var(--tg-shadow-lg) !important;
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  background: var(--tg-surface-strong) !important;
  border: 1px solid var(--tg-border-strong) !important;
}

#webauthn-error,
[data-webauthn-error],
#webauthn-error-msg,
[data-webauthn-error-msg] { display: none !important; }

.page-content.user.signin h4.ui.top.attached.header,
.page-content.user.signup h4.ui.top.attached.header,
.user.signin h4.ui.top.attached.header,
.user.signup h4.ui.top.attached.header,
.user.signin .ui.attached.segment.header.top,
.user.signup .ui.attached.segment.header.top,
.page-content.user.signin .ui.top.attached.header,
.page-content.user.signup .ui.top.attached.header {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
}

.page-content.user.signin .auth-header,
.page-content.user.signup .auth-header,
.user.signin .auth-header,
.user.signup .auth-header { text-align: center; margin-bottom: 20px; }
.user.signin .auth-header h1,
.user.signup .auth-header h1 { margin: 0 0 6px; font-size: 24px; font-weight: 700; color: var(--tg-text); line-height: 1.2; }
.user.signin .auth-header p,
.user.signup .auth-header p { margin: 0; font-size: 14px; color: var(--tg-text-muted); }

.user.signin .form, .user.signup .form { display: flex; flex-direction: column; gap: 14px; }
.user.signin .field, .user.signup .field { margin: 0; }
.user.signin .field label, .user.signup .field label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--tg-text);
}
.user.signin input, .user.signup input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--tg-border);
  border-radius: var(--tg-radius-sm);
  background: var(--color-input-background);
  color: var(--tg-text);
  font-size: 15px;
  transition: border-color var(--tg-dur) var(--tg-ease), box-shadow var(--tg-dur) var(--tg-ease);
}
.user.signin input:focus, .user.signup input:focus {
  outline: none;
  border-color: var(--tg-indigo);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tg-indigo) 28%, transparent);
}
.user.signin .ui.button.primary,
.user.signup .ui.button.primary,
.user.signin .ui.submit.button,
.user.signup .ui.submit.button {
  width: 100%;
  padding: 13px 24px;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--tg-radius-sm);
  background: var(--tg-accent) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: var(--tg-shadow-sm);
  transition: transform var(--tg-dur) var(--tg-ease), box-shadow var(--tg-dur) var(--tg-ease);
}
.user.signin .ui.button.primary:hover,
.user.signup .ui.button.primary:hover,
.user.signin .ui.submit.button:hover,
.user.signup .ui.submit.button:hover {
  transform: translateY(-1px);
  box-shadow: var(--tg-shadow-md);
  color: #fff !important;
}
.user.signin .ui.button.primary:active,
.user.signup .ui.button.primary:active,
.user.signin .ui.submit.button:active,
.user.signup .ui.submit.button:active { transform: translateY(0); }
.user.signin .divider.divider-text,
.user.signup .divider.divider-text { margin: 6px 0 2px !important; color: var(--tg-text-muted); }
.user.signin .oauth-login-link,
.user.signup .oauth-login-link {
  min-height: 48px;
  border-radius: var(--tg-radius-sm) !important;
  border: 1px solid var(--tg-border-strong) !important;
  background: var(--tg-surface-muted) !important;
  color: var(--tg-text) !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transition: background var(--tg-dur) var(--tg-ease), transform var(--tg-dur) var(--tg-ease);
}
.user.signin .oauth-login-link:hover,
.user.signup .oauth-login-link:hover {
  background: var(--tg-surface-elevated) !important;
  transform: translateY(-1px);
}
.user.signin .remember-me,
.user.signup .remember-me {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
}
.user.signin .remember-me label,
.user.signup .remember-me label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--tg-text-muted);
  cursor: pointer;
}
.user.signin .remember-me input[type="checkbox"],
.user.signup .remember-me input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: var(--tg-indigo);
}
.user.signin .forgot-password, .user.signup .forgot-password { font-size: 14px; }
.user.signin .auth-footer,
.user.signup .auth-footer {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--tg-border);
  font-size: 13px;
}
.user.signin .auth-footer a, .user.signup .auth-footer a {
  color: var(--tg-text-muted);
  transition: color var(--tg-dur) var(--tg-ease);
}
.user.signin .auth-footer a:hover, .user.signup .auth-footer a:hover { color: var(--tg-indigo); }

/* ═══════════════════════════════════════════════════════════════════════
 * 9a. AUTH MODAL — neutral frosted glass sign-in over the TellusGit home
 *
 * The sign-in / sign-up / forgot-password screens render the same TellusGit
 * home view (bubbles + hero + action buttons + feature accordion) that
 * /git/ shows, so users land on the same branded surface whether they
 * arrive at the home page or the auth pages. The auth form itself is a
 * separate fixed-positioned modal that floats on top with a neutral
 * frosted glass surface — tone-on-tone translucency, no brand-color
 * wash, so it reads as calm chrome rather than another marketing card.
 *
 *   .tg-auth-page    — added to the home page wrapper when a modal is
 *                      open, so the page gets a dimmed, blurred backdrop
 *                      and the home hero is the tinted surface behind
 *                      the form.
 *   .tg-auth-modal   — fixed-positioned overlay that contains the form.
 *   .tg-auth-modal-card — the frosted glass card.
 *
 * Colors below all come from the theme's neutral tokens (--tg-surface*,
 * --tg-border*, --tg-text*), which are already defined per light/dark/
 * auto theme in base.css — so this section needs zero [data-theme]
 * duplication to stay correct across themes.
 * ═══════════════════════════════════════════════════════════════════════ */

/* Dimmed, blurred backdrop behind the modal. Pointer events still flow
   through to the home page underneath — the empty area around the card
   stays clickable, only the card itself is interactive. */
.tg-auth-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  background: color-mix(in srgb, var(--tg-bg-deep) 40%, transparent);
  backdrop-filter: blur(10px) saturate(125%);
  -webkit-backdrop-filter: blur(10px) saturate(125%);
  animation: tg-auth-page-dim-in 320ms var(--tg-ease) both;
}
@keyframes tg-auth-page-dim-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* The modal shell — fixed fullscreen, but pointer events only on the
   card itself (the empty surrounding area is transparent and click-
   through to the home page). */
.tg-auth-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 40px);
  box-sizing: border-box;
  pointer-events: none;
  animation: tg-auth-modal-in 320ms var(--tg-ease) both;
}
@keyframes tg-auth-modal-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* The frosted glass card — a neutral translucent surface (theme tokens
   only, no brand-color gradient) blurred over the home hero behind it.
   pointer-events: auto so the form is interactive even though the
   parent .tg-auth-modal is click-through. */
.tg-auth-modal-card {
  pointer-events: auto;
  position: relative;
  width: 100%;
  max-width: 26rem;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(24px, 3.5vw, 36px) clamp(24px, 3.5vw, 36px) clamp(20px, 3vw, 28px);
  border-radius: var(--tg-radius-xl);
  border: 1px solid var(--tg-border-strong);
  background: var(--tg-surface);
  backdrop-filter: blur(32px) saturate(140%);
  -webkit-backdrop-filter: blur(32px) saturate(140%);
  box-shadow:
    var(--tg-shadow-popover),
    0 1px 0 color-mix(in srgb, var(--tg-text) 6%, transparent) inset,
    0 0 0 1px color-mix(in srgb, var(--tg-text) 4%, transparent) inset;
  animation: tg-auth-card-in 380ms var(--tg-ease) both;
  animation-delay: 60ms;
}

@keyframes tg-auth-card-in {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Close button (X) — anchored to the top-right of the card. */
.tg-auth-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--tg-border);
  border-radius: var(--tg-radius-pill);
  background: color-mix(in srgb, var(--tg-surface-strong) 70%, transparent);
  color: var(--tg-text-muted);
  text-decoration: none;
  transition: background var(--tg-dur) var(--tg-ease), color var(--tg-dur) var(--tg-ease), transform var(--tg-dur) var(--tg-ease);
}
.tg-auth-modal-close:hover {
  background: var(--tg-surface-strong);
  color: var(--tg-text);
  transform: rotate(90deg);
}
.tg-auth-modal-close svg { display: block; }

/* Card header — kicker, title, lede. Neutral gray kicker pill instead of
   a brand-tinted one. */
.tg-auth-card-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  margin: 4px 28px 0;
}
.tg-auth-card-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 1.5rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--tg-border);
  border-radius: var(--tg-radius-pill);
  background: var(--tg-surface-muted);
  color: var(--tg-text-muted);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tg-auth-card-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--tg-text);
  letter-spacing: -0.01em;
}
.tg-auth-card-lede {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--tg-text-muted);
}

/* Card footer — secondary actions under the form. */
.tg-auth-card-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 16px;
  margin: 4px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--tg-border);
  font-size: 0.8125rem;
}
.tg-auth-card-foot a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--tg-text-muted);
  font-weight: 600;
  transition: color var(--tg-dur) var(--tg-ease);
}
.tg-auth-card-foot a:hover { color: var(--tg-text); }
.tg-auth-card-foot svg { opacity: 0.7; }
.tg-auth-card-foot a:hover svg { opacity: 1; }

/* Inner segments inside the modal card lose their own frosted styling
   — the card already provides the glass surface, so sub-segments
   should be transparent. */
.tg-auth-modal-card .ui.container,
.tg-auth-modal-card .ui.container.fluid {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
.tg-auth-modal-card .ui.segment,
.tg-auth-modal-card .ui.attached.segment,
.tg-auth-modal-card h4.ui.top.attached.header {
  background: transparent !important;
  border: 0 !important;
  border-top: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  display: block !important;
  visibility: visible !important;
  height: auto !important;
  overflow: visible !important;
}
/* The inner templates end with an attached-header hint block ("Need an
   account? Register now." / "Already have an account? Sign in.") and a
   duplicate forgot-password link. The card footer already carries both
   actions as styled links, so inside the modal these are pure noise. */
.tg-auth-modal-card h4.ui.top.attached.header,
.tg-auth-modal-card .ui.attached.segment.header.top {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Form elements — keep the existing signin styling but tighten spacing. */
.tg-auth-modal-card .ui.form { display: flex; flex-direction: column; gap: 14px; }
.tg-auth-modal-card .field { margin: 0; }
.tg-auth-modal-card .field label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--tg-text);
}
.tg-auth-modal-card input,
.tg-auth-modal-card .ui.input > input,
.tg-auth-modal-card .ui.form input {
  width: 100%;
  height: 2.75rem;
  padding: 0 0.875rem;
  border: 1px solid var(--tg-border);
  border-radius: var(--tg-radius-sm);
  background: var(--color-input-background);
  color: var(--tg-text);
  font-size: 0.9375rem;
  font-family: inherit;
  transition: border-color var(--tg-dur) var(--tg-ease), box-shadow var(--tg-dur) var(--tg-ease);
  box-sizing: border-box;
}
/* Neutral focus ring. Forgejo's form CSS paints focused inputs with the
   brand-orange --color-primary via attribute selectors, so this needs
   !important to keep the modal's monochrome look. */
.tg-auth-modal-card input:focus,
.tg-auth-modal-card .ui.input.focus > input,
.tg-auth-modal-card .ui.form input:focus {
  outline: none;
  border-color: var(--tg-text-soft) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tg-text) 12%, transparent) !important;
}
.tg-auth-modal-card .inline.field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
/* "Remember this device" checkbox. Fomantic's checkbox absolutely
   positions the native input over the label and draws its own box via
   label::before — inside the modal that overlapped and clipped the label
   text, so restore the native input (styled via accent-color) and drop
   the pseudo-element box entirely. The markup puts the label before the
   input, so order: -1 moves the box back in front of the text. */
.tg-auth-modal-card .ui.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8125rem;
  color: var(--tg-text-muted);
  cursor: pointer;
}
.tg-auth-modal-card .ui.checkbox input[type="checkbox"] {
  position: static !important;
  opacity: 1 !important;
  order: -1;
  width: 16px !important;
  height: 16px !important;
  margin: 0;
  accent-color: var(--tg-text);
  cursor: pointer;
}
.tg-auth-modal-card .ui.checkbox label {
  margin: 0;
  padding: 0 !important;
  color: inherit !important;
  cursor: pointer;
}
.tg-auth-modal-card .ui.checkbox label::before,
.tg-auth-modal-card .ui.checkbox label::after {
  display: none !important;
}

/* Primary button — a solid neutral "ink" pill (theme text-on-bg,
   inverted) instead of a brand-color gradient. Reads as modern and
   neutral in both light and dark themes without extra overrides. */
.tg-auth-modal-card .ui.button.primary,
.tg-auth-modal-card .ui.submit.button,
.tg-auth-modal-card button.ui.primary.button {
  width: 100%;
  min-height: 2.75rem;
  padding: 0 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  border-radius: var(--tg-radius-sm);
  background: var(--tg-text) !important;
  border: 0 !important;
  color: var(--tg-bg) !important;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--tg-text) 22%, transparent);
  transition: transform var(--tg-dur) var(--tg-ease), box-shadow var(--tg-dur) var(--tg-ease), filter var(--tg-dur) var(--tg-ease);
  cursor: pointer;
}
.tg-auth-modal-card .ui.button.primary:hover,
.tg-auth-modal-card .ui.submit.button:hover,
.tg-auth-modal-card button.ui.primary.button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--tg-text) 28%, transparent);
  filter: brightness(1.08);
  color: var(--tg-bg) !important;
}
.tg-auth-modal-card .ui.button.primary:active,
.tg-auth-modal-card .ui.submit.button:active,
.tg-auth-modal-card button.ui.primary.button:active {
  transform: translateY(0);
  filter: brightness(0.96);
}

.tg-auth-modal-card .divider.divider-text {
  position: relative;
  margin: 6px 0 2px;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tg-text-soft);
}
.tg-auth-modal-card .divider.divider-text::before,
.tg-auth-modal-card .divider.divider-text::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - 1.75rem);
  height: 1px;
  background: var(--tg-border);
}
.tg-auth-modal-card .divider.divider-text::before { left: 0; }
.tg-auth-modal-card .divider.divider-text::after { right: 0; }

.tg-auth-modal-card .oauth-login-link,
.tg-auth-modal-card .openid.ui.button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 2.75rem;
  padding: 0 1rem;
  border-radius: var(--tg-radius-sm) !important;
  border: 1px solid var(--tg-border-strong) !important;
  background: color-mix(in srgb, var(--tg-surface-strong) 80%, transparent) !important;
  color: var(--tg-text) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  box-shadow: none !important;
  transition: background var(--tg-dur) var(--tg-ease), transform var(--tg-dur) var(--tg-ease), border-color var(--tg-dur) var(--tg-ease);
  text-decoration: none;
}
.tg-auth-modal-card .oauth-login-link:hover,
.tg-auth-modal-card .openid.ui.button:hover {
  background: var(--tg-surface-strong) !important;
  border-color: var(--tg-text-soft) !important;
  color: var(--tg-text) !important;
  transform: translateY(-1px);
}
.tg-auth-modal-card #oauth2-login-navigator,
.tg-auth-modal-card #oauth2-login-navigator-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

/* Forgot / reset confirmation block inside the modal card. */
.tg-auth-overlay-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.tg-auth-overlay-confirm {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--tg-emerald) 30%, transparent);
  background: color-mix(in srgb, var(--tg-emerald) 10%, transparent);
  border-radius: var(--tg-radius-sm);
  color: var(--tg-text);
  font-size: 0.875rem;
  line-height: 1.5;
}
.tg-auth-overlay-confirm p { margin: 0; }
.tg-auth-overlay-confirm-icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: var(--tg-radius-pill);
  background: color-mix(in srgb, var(--tg-emerald) 24%, transparent);
  color: var(--tg-emerald);
  align-items: center;
  justify-content: center;
}
.tg-auth-overlay-confirm-icon svg {
  width: 14px;
  height: 14px;
}

.tg-auth-modal-card .ui.message {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--tg-radius-sm);
  background: color-mix(in srgb, var(--tg-amber) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--tg-amber) 30%, transparent);
  color: var(--tg-text);
  font-size: 0.8125rem;
}
.tg-auth-modal-card .ui.message.error {
  background: color-mix(in srgb, var(--tg-danger) 12%, transparent);
  border-color: color-mix(in srgb, var(--tg-danger) 30%, transparent);
}
.tg-auth-modal-card .ui.message ul { margin: 0; padding-left: 18px; }

/* Hide the existing auth-header and auth-footer blocks inside the
   signin_inner template — the card head + card foot already provide
   equivalent content. */
.tg-auth-modal-card .auth-header,
.tg-auth-modal-card .auth-footer {
  display: none !important;
}

/* On the auth pages, scale down the home hero a touch and reduce visual
   weight of the feature accordion so the modal stays the focal point.
   The "Explore" and cross-app buttons in the hero remain visible and
   clickable behind the dimmed backdrop. */
.tg-auth-page .tg-chat-title {
  font-size: clamp(1.75rem, 4.5vw, 2.75rem);
}
.tg-auth-page .tg-chat-subtitle {
  font-size: 0.9rem;
  max-width: 30rem;
}
.tg-auth-page .tg-welcome-card {
  opacity: 0.85;
}

/* Responsive: on phones, hide the home hero behind the modal so the
   form is the entire UI. */
@media (max-width: 720px) {
  .tg-auth-page .tg-chat-welcome { display: none; }
  .tg-auth-modal-card { padding: 22px; }
}
@media (max-width: 480px) {
  .tg-auth-modal-card { padding: 20px 18px; }
  .tg-auth-card-title { font-size: 1.25rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * 9b. BUTTONS + GUEST TOP-RIGHT ACTIONS
 *
 * .tg-button is the shared TellusGit button component used by the home
 * hero and the guest top-corner actions. The hero markup also carries
 * Fomantic's `ui button` classes for its JS behaviours, so these rules
 * double up the class selectors to out-rank Fomantic's own background/
 * padding without resorting to !important.
 *
 *   .tg-button-primary   — solid "ink" pill (theme text color inverted),
 *                          matches the auth modal's submit button.
 *   .tg-button-secondary — neutral frosted glass pill.
 * ═══════════════════════════════════════════════════════════════════════ */
.tg-button,
.tg-button.ui.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.625rem;
  margin: 0;
  padding: 0 1.375rem;
  border-radius: var(--tg-radius-pill);
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--tg-dur) var(--tg-ease), color var(--tg-dur) var(--tg-ease), border-color var(--tg-dur) var(--tg-ease), transform var(--tg-dur) var(--tg-ease), box-shadow var(--tg-dur) var(--tg-ease);
}
.tg-button-primary,
.tg-button-primary.ui.button {
  border: 1px solid transparent;
  background: var(--tg-text);
  color: var(--tg-bg);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--tg-text) 20%, transparent);
}
.tg-button-primary:hover,
.tg-button-primary.ui.button:hover {
  background: var(--tg-text);
  color: var(--tg-bg);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--tg-text) 28%, transparent);
  filter: brightness(1.08);
}
.tg-button-primary:active,
.tg-button-primary.ui.button:active {
  transform: translateY(0);
  filter: brightness(0.96);
}
.tg-button-secondary,
.tg-button-secondary.ui.button {
  border: 1px solid var(--tg-border-strong);
  background: color-mix(in srgb, var(--tg-surface) 85%, transparent);
  color: var(--tg-text);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--tg-shadow-sm);
}
.tg-button-secondary:hover,
.tg-button-secondary.ui.button:hover {
  background: var(--tg-surface-strong);
  border-color: var(--tg-text-soft);
  color: var(--tg-text);
  transform: translateY(-1px);
  box-shadow: var(--tg-shadow-md);
}
.tg-button-secondary:active,
.tg-button-secondary.ui.button:active {
  transform: translateY(0);
}

/* ── Guest top-right actions — Sign in / Sign up, pinned to the corner ──
 *
 * Desktop-only persistent chrome for signed-out users (emitted by
 * base/head_navbar.tmpl). Sits above the home hero on every guest page
 * — home, explore, and the auth screens alike — so the account actions
 * are always reachable without cluttering the guest sidebar, which is
 * reserved for navigation (Explore, TellusChat). Below the 1020px
 * breakpoint the mobile tabbar already carries Sign in / Sign up, so
 * this is hidden there to avoid duplicating the affordance. */
/* The shell CSS grows the guest shortcuts section to absorb the sidebar
   height (there is no repositories rail to do it) — but the section is a
   grid, and stretched grid rows would smear the four links across the
   whole column. Pack them at the top instead. */
#navbar.tg-global-sidebar.tg-guest-sidebar > .tg-sidebar-shortcuts {
  align-content: start;
}

.tg-guest-topcorner {
  position: fixed;
  top: clamp(0.875rem, 2vw, 1.5rem);
  right: clamp(0.875rem, 2vw, 1.5rem);
  z-index: 85;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  animation: tg-guest-topcorner-in 420ms var(--tg-ease) both;
  animation-delay: 80ms;
}
@keyframes tg-guest-topcorner-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tg-guest-topcorner .tg-button {
  min-height: 2.375rem;
  padding: 0 1.125rem;
  font-size: 0.875rem;
}
@media (max-width: 1020px) {
  .tg-guest-topcorner { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * 10. MOTION
 * ═══════════════════════════════════════════════════════════════════════ */

@keyframes floatBubble {
  0%, 100% { transform: translate(-50%, -50%) translateY(0) scale(1); }
  33%      { transform: translate(-50%, -50%) translateY(-12px) scale(1.04); }
  66%      { transform: translate(-50%, -50%) translateY(7px) scale(0.98); }
}
@keyframes heroPillPop {
  from { opacity: 0; transform: translateY(8px) scale(.88); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes tgSpin     { to { transform: rotate(360deg); } }
@keyframes pulse-glow { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
 * 11. RESPONSIVE
 * ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 1020px) {
  .tg-auth-page .page-content { padding-left: 0 !important; }
}

@media (max-width: 900px) {
  .tg-auth-modal-card { max-width: 28rem; }
}

@media (max-width: 680px) {
  .tg-auth-modal { padding: 12px; }
  .tg-auth-modal-card { max-width: 100%; padding: 22px 18px; }
}

@media (min-width: 1200px) {
  /* No-op: the modal stays at ~26rem wide for readability. */
}

/* ═══════════════════════════════════════════════════════════════════════
 * 12. SPA SHELL — soft-page-transition states, toast stack, mobile
 *     search launcher, store-driven UI bits
 * ═══════════════════════════════════════════════════════════════════════
 *
 * The TellusGit store is the single source of truth for the entire
 * frontend, and tellusgit-router.js performs in-shell navigations
 * without a full page reload. This section styles the new
 * shell-driven UI:
 *
 *   - .tg-page-fade  — a soft fade in/out applied to .page-content
 *                      during navigation, so the swap never feels
 *                      like a hard cut.
 *   - .tg-toast-stack + .tg-toast  — bottom-right notification stack
 *                      the store pushes into via the pushToast()
 *                      action creator.
 *   - .tg-search-result, .tg-search-error — the spotlight dropdown
 *                      items the new renderSpotlightInto() emits.
 *
 * Everything here is designed to compose with the existing
 * frosted-glass and theme variables, so dark mode and the rest of
 * the visual system keep working without overrides.
 */

/* ── Page-content soft transition ─────────────────────────────────── */

.tg-page-content {
  transition: opacity 140ms var(--tg-ease, ease);
}
.tg-page-content.is-transitioning {
  opacity: 0.45;
  pointer-events: none;
}

/* ── Toast stack ──────────────────────────────────────────────────── */

.tg-toast-stack {
  position: fixed;
  right: 1.25rem;
  bottom: calc(env(safe-area-inset-bottom, 0) + 1.25rem);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: min(28rem, calc(100vw - 2.5rem));
  pointer-events: none;
}
@media (max-width: 680px) {
  .tg-toast-stack {
    right: 0.75rem;
    bottom: calc(env(safe-area-inset-bottom, 0) + 0.75rem);
    left: 0.75rem;
    max-width: none;
  }
}
.tg-toast {
  pointer-events: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem;
  border-radius: 14px;
  background: var(--tg-surface-overlay, rgba(20, 22, 28, 0.85));
  border: 1px solid var(--tg-border, rgba(255, 255, 255, 0.08));
  color: var(--tg-text, #f1f2f5);
  box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  animation: tg-toast-pop 180ms var(--tg-ease, ease);
  font-size: 0.9rem;
  line-height: 1.35;
}
.tg-toast strong {
  display: block;
  font-weight: 600;
  margin-bottom: 0.15rem;
}
.tg-toast span { color: var(--tg-text-muted, rgba(241, 242, 245, 0.78)); }
.tg-toast-close {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--tg-text-muted, rgba(241, 242, 245, 0.78));
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 0.1rem;
  cursor: pointer;
  border-radius: 6px;
  transition: background 120ms var(--tg-ease, ease);
}
.tg-toast-close:hover,
.tg-toast-close:focus-visible {
  background: var(--tg-surface-muted, rgba(255, 255, 255, 0.08));
  outline: 0;
  color: var(--tg-text, #f1f2f5);
}
.tg-toast-success { border-left: 3px solid var(--tg-emerald, #22c55e); }
.tg-toast-error   { border-left: 3px solid #ef4444; }
.tg-toast-info    { border-left: 3px solid var(--tg-accent, #6366f1); }
.tg-toast-warning { border-left: 3px solid var(--tg-amber, #f59e0b); }

@keyframes tg-toast-pop {
  from { opacity: 0; transform: translateY(6px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* ═══════════════════════════════════════════════════════════════════════
 * Spotlight chrome — ported from forgejo/web_src/css/tellusgit-spotlight.css
 *
 * The bundled CSS file in forgejo/web_src/css/ is only delivered via the
 * webpack pipeline. The runtime template (templates/custom/header.tmpl)
 * <link>-imports ONLY this standalone file, so the bundled rules never
 * reach the browser when serving TellusGit from a TellusChat-style
 * deployment that skips the webpack rebuild. Without this port:
 *   - .tg-bottom-command has no position / z-index / backdrop-filter
 *   - .tg-search-dropdown has no position / width / opacity / transform
 *   - .tg-spotlight-backdrop has no fixed inset / dim layer
 *   - .tg-mobile-tabbar / .tg-mobile-search-launcher are not styled at
 *     all, so phones show an empty document flow where the bar should
 *     be, and the mobile overlay paints inside the desktop layout
 *
 * The full chrome was ported verbatim from tellusgit-spotlight.css so
 * any future change to that file can be diffed & re-applied with
 * `diff <(sed -n '17,$p' forgejo/web_src/css/tellusgit-spotlight.css)
 *        <(sed -n '/SPOTLIGHT-CHROME-PORT-BEGIN/,/SPOTLIGHT-CHROME-PORT-END/p'
 *               public/assets/css/tellusgit.css)`.
 * The store-driven renderer-output rules (.tg-search-result etc.) stay
 * above this block because they were intentionally kept in standalone
 * to allow a simpler visual override surface (the bundled versions are
 * a superset; the standalone ones are a curated subset).
 *
 * REGRESSION GUARD: aether-server/test/tellusgitSpotlightCss.test.mjs
 * pins the selectors actually styled in this block. If you add a new
 * selector to tellusgit-spotlight.css, port it here AND add it to the
 * REQUIRED_SELECTORS array in that test file so future re-ports are
 * caught by CI.
 * ═══════════════════════════════════════════════════════════════════════
 * SPOTLIGHT-CHROME-PORT-BEGIN
 * TellusGit spotlight command palette + mobile shell.
 *
 * The spotlight is a single line of text input that lives in the global
 * shell. On desktop it lives as a fixed pill at the bottom of the screen
 * (offset for the sidebar); on phone it lives inside a full-screen
 * overlay launched from the top bar.
 *
 * Design tokens come from base.css (`--tg-*`).
 */

/* ═══════════════════════════════════════════════════════════════════════
 * Bottom command bar — fixed pill at the bottom of the screen.
 * Grid lays out: + (new repo) | input | hint chips. The bar is centred
 * horizontally in the content area (right of the fixed sidebar) and
 * capped to a chatbot-style width so it reads as a single input field,
 * not a full-width toolbar. The matching dropdown below mirrors the
 * bar's width.
 * ═══════════════════════════════════════════════════════════════════════ */
.tg-bottom-command {
  position: fixed;
  left: var(--tg-sidebar-width);
  right: 1.25rem;
  bottom: 1.5rem;
  max-width: 46rem; /* chatbot-style input — caps the width on wide screens */
  margin-inline: auto; /* centres the capped bar inside the content area */
  z-index: 120;
  display: grid;
  grid-template-columns: 2.625rem minmax(0, 1fr) auto;
  gap: 0.625rem;
  align-items: center;
  min-height: 3.625rem;
  padding: 0.5rem 0.625rem;
  border: 1px solid color-mix(in srgb, var(--tg-border), transparent 8%);
  border-radius: var(--tg-radius-pill);
  background: color-mix(in srgb, var(--tg-surface-elevated), transparent 4%);
  box-shadow: var(--tg-shadow-popover);
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}
.tg-bottom-command.is-open,
.tg-bottom-command:focus-within {
  border-color: color-mix(in srgb, var(--tg-accent), var(--tg-border) 52%);
  background: var(--tg-surface-elevated);
}

/* Type-to-search "wake up" pulse — flashes the bar briefly when a
   printable character focuses it from the page. */
.tg-bottom-command.is-typing {
  animation: tg-command-wake 360ms cubic-bezier(.16, 1, .3, 1);
}
@keyframes tg-command-wake {
  0%   { transform: translateY(0);     box-shadow: var(--tg-shadow-popover); border-color: color-mix(in srgb, var(--tg-accent), var(--tg-border) 52%); }
  35%  { transform: translateY(-4px);  box-shadow: 0 0 0 5px color-mix(in srgb, var(--tg-accent), transparent 80%), var(--tg-shadow-popover); border-color: var(--tg-accent); }
  100% { transform: translateY(0);     box-shadow: var(--tg-shadow-popover); border-color: color-mix(in srgb, var(--tg-accent), var(--tg-border) 52%); }
}

.tg-command-plus {
  display: grid;
  place-items: center;
  width: 2.625rem;
  height: 2.625rem;
  border-radius: var(--tg-radius-pill);
  background: var(--tg-text);
  color: var(--tg-bg);
  font-size: 1.5rem;
  line-height: 1;
  font-weight: 500;
  text-decoration: none;
}

.tg-command-input {
  min-width: 0;
  display: grid;
  grid-template-columns: 1.125rem minmax(0, 1fr);
  gap: 0.625rem;
  align-items: center;
  color: var(--tg-text-soft);
}
.tg-command-input input {
  width: 100%;
  height: 2.5rem;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--tg-text);
  font-size: 0.9375rem;
  box-shadow: none;
}
.tg-command-input input::placeholder { color: var(--tg-text-soft); }

.tg-command-hints {
  display: flex;
  gap: 0.3125rem;
  align-items: center;
}
.tg-command-hints span {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--tg-radius-pill);
  background: var(--tg-surface-muted);
  color: var(--tg-text-soft);
  font-size: 0.6875rem;
  font-weight: 800;
}

/* ═══════════════════════════════════════════════════════════════════════
 * Spotlight backdrop + dropdown — the panel that appears below the bar
 * when the user has typed a query.
 * ═══════════════════════════════════════════════════════════════════════ */
.tg-spotlight-backdrop {
  position: fixed;
  inset: 0;
  z-index: 119;
  pointer-events: none;
  opacity: 0;
  background: var(--tg-surface-overlay);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 160ms ease;
}
.tg-spotlight-backdrop.active { pointer-events: auto; opacity: 1; }

.tg-search-dropdown {
  position: fixed;
  left: var(--tg-sidebar-width);
  right: 1.25rem;
  bottom: 6rem;
  max-width: 46rem; /* mirrors the bottom command bar */
  margin-inline: auto; /* centres under the bar */
  z-index: 121;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  width: auto;
  max-height: min(72vh, 42.5rem);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--tg-border-strong), transparent 8%);
  border-radius: var(--tg-radius-md);
  background: color-mix(in srgb, var(--tg-surface-elevated), transparent 2%);
  box-shadow: var(--tg-shadow-popover);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  backdrop-filter: blur(28px) saturate(175%);
  -webkit-backdrop-filter: blur(28px) saturate(175%);
  transition: opacity 160ms ease, transform 160ms ease;
}
.tg-search-dropdown.active { pointer-events: auto; transform: translateY(0); opacity: 1; }

.tg-spotlight-top {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 3.25rem;
  padding: 0 1rem;
  border-bottom: 1px solid var(--tg-border);
  color: var(--tg-text-muted);
  font-size: 0.8125rem;
  font-weight: 700;
}

.tg-search-results {
  min-height: 0;
  overflow-y: auto;
  padding: 0.5rem;
}
.tg-search-section { padding: 0.375rem 0; }
.tg-search-section + .tg-search-section {
  border-top: 1px solid color-mix(in srgb, var(--tg-border), transparent 30%);
}
.tg-search-section-title {
  margin: 0;
  padding: 0.5rem 0.5625rem 0.375rem;
  color: var(--tg-text-soft);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tg-search-result {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  gap: 0.625rem;
  align-items: center;
  min-height: 3rem;
  padding: 0.4375rem 0.5625rem;
  border: 1px solid transparent;
  border-radius: var(--tg-radius-md);
  color: var(--tg-text);
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease;
}
.tg-search-result:hover,
.tg-search-result.selected {
  border-color: color-mix(in srgb, var(--tg-accent), transparent 64%);
  background: color-mix(in srgb, var(--tg-accent), transparent 86%);
}
.tg-search-result img,
.tg-search-result-icon {
  width: 2.125rem;
  height: 2.125rem;
  border-radius: var(--tg-radius-md);
  object-fit: cover;
  background: var(--tg-surface-muted);
}
.tg-search-result-icon {
  display: grid;
  place-items: center;
  color: var(--tg-text-muted);
  font-size: 0.6875rem;
  font-weight: 800;
}
.tg-search-result-info { min-width: 0; }
.tg-search-result-name,
.tg-search-result-meta {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tg-search-result-name { color: var(--tg-text); font-size: 0.875rem; font-weight: 700; }
.tg-search-result-meta { margin-top: 0.125rem; color: var(--tg-text-muted); font-size: 0.75rem; }
.tg-search-result-badge {
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.125rem 0.5rem;
  border-radius: var(--tg-radius-pill);
  background: var(--tg-surface-muted);
  color: var(--tg-text-muted);
}

.tg-search-footer {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--tg-border);
  background: color-mix(in srgb, var(--tg-surface-elevated), transparent 6%);
  color: var(--tg-text-soft);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.tg-search-footer-group {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.tg-search-footer-group--primary { color: var(--tg-text); }
.tg-search-footer-hint { letter-spacing: 0.04em; }
.tg-search-footer-keys { display: inline-flex; gap: 0.1875rem; }
.tg-search-footer kbd {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.3125rem;
  border: 1px solid color-mix(in srgb, var(--tg-border), transparent 30%);
  border-radius: var(--tg-radius-xs);
  background: var(--tg-surface-muted);
  color: var(--tg-text-muted);
  font-family: inherit;
  font-size: 0.625rem;
  font-weight: 800;
}
.tg-search-footer-group--primary kbd {
  border-color: color-mix(in srgb, var(--tg-accent), transparent 50%);
  background: color-mix(in srgb, var(--tg-accent), transparent 84%);
  color: var(--tg-accent);
}

.tg-search-empty {
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--tg-text-muted);
  font-size: 0.8125rem;
}
.tg-search-empty strong { display: block; color: var(--tg-text); margin-bottom: 0.25rem; }

/* ═══════════════════════════════════════════════════════════════════════
 * Mobile shell — top-bar search launcher + full-screen overlay + tab bar.
 * Hidden on desktop (the rule below the mobile media query overrides).
 * ═══════════════════════════════════════════════════════════════════════ */
.tg-mobile-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  align-items: stretch;
  justify-content: space-around;
  gap: 0.125rem;
  padding: 0.375rem 0.375rem calc(0.375rem + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--tg-surface) 92%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-top: 1px solid var(--tg-border);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
  z-index: 70;
}
.tg-mobile-tab {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  padding: 0.375rem 0.25rem 0.25rem;
  border-radius: 0.75rem;
  color: var(--tg-text-muted);
  text-decoration: none;
  font-size: 0.65625rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  position: relative;
  transition: color 0.15s ease, background 0.15s ease;
}
.tg-mobile-tab svg { width: 1.375rem; height: 1.375rem; }
.tg-mobile-tab:hover { color: var(--tg-text); }
.tg-mobile-tab.is-active { color: var(--tg-accent); }
.tg-mobile-tab-badge {
  position: absolute;
  top: 0.125rem;
  right: calc(50% - 1.125rem);
  min-width: 0.875rem;
  height: 0.875rem;
  padding: 0 0.25rem;
  border-radius: var(--tg-radius-pill);
  background: var(--tg-danger);
  color: #fff;
  font-size: 0.5625rem;
  font-weight: 800;
  line-height: 0.875rem;
  text-align: center;
}
.tg-mobile-tab-create { margin-top: -1.125rem; }
.tg-mobile-tab-create-bubble {
  display: grid;
  place-items: center;
  width: 2.875rem;
  height: 2.875rem;
  border-radius: var(--tg-radius-pill);
  background: var(--tg-accent);
  color: #fff;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--tg-accent) 36%, transparent);
}
.tg-mobile-tab-create-bubble svg { width: 1.5rem; height: 1.5rem; }
.tg-mobile-tab-create:hover .tg-mobile-tab-create-bubble { transform: translateY(-1px); }

/* Search launcher pill — appears on mobile only, floats above the
   top-bar navbar at ≤1020px. z-index MUST sit above the opaque
   guest top bar (#navbar.tg-global-sidebar, z-index 80) and below
   the full-screen search overlay (.tg-mobile-search-overlay,
   z-index 110) so the launcher is clickable but the overlay can
   still fully cover it when active. 90 is exactly that gap.
   See TG-UI-1 in codeissues.md. */
.tg-mobile-search-launcher {
  position: fixed;
  top: 0.625rem;
  left: 50%;
  transform: translateX(-50%);
  height: 2.375rem;
  min-width: 0;
  max-width: calc(100vw - 12.5rem);
  flex: 1 1 auto;
  display: none;
  align-items: center;
  gap: 0.625rem;
  padding: 0 0.875rem;
  border-radius: var(--tg-radius-pill);
  background: var(--tg-surface-muted);
  border: 1px solid var(--tg-border);
  color: var(--tg-text-muted);
  font: inherit;
  font-size: 0.875rem;
  line-height: 1;
  text-align: left;
  cursor: pointer;
  z-index: 90;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.tg-mobile-search-launcher:hover,
.tg-mobile-search-launcher:focus-visible {
  background: var(--tg-surface-strong);
  border-color: var(--tg-border-strong);
  outline: none;
}
.tg-mobile-search-launcher svg { flex: 0 0 auto; opacity: 0.7; }
.tg-mobile-search-launcher .tg-mobile-search-launcher-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tg-mobile-search-launcher .tg-mobile-search-launcher-key {
  flex: 0 0 auto;
  padding: 0.1875rem 0.4375rem;
  border-radius: var(--tg-radius-xs);
  background: var(--tg-surface-strong);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--tg-text-muted);
}
.tg-mobile-search-launcher.is-typing {
  animation: tg-launcher-wake 360ms cubic-bezier(.16, 1, .3, 1);
}
@keyframes tg-launcher-wake {
  0%   { transform: translateX(-50%) scale(1);    border-color: var(--tg-border); }
  35%  { transform: translateX(-50%) scale(1.04); border-color: var(--tg-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tg-accent) 22%, transparent); }
  100% { transform: translateX(-50%) scale(1);    border-color: var(--tg-border); }
}

/* Overlay-top "wake" — paired with launcher.wakeOverlayTop() in
   tellusgit.js, which flashes the input bar when a tap-typing
   shortcut opens the overlay. Mirror the launcher's cubic-bezier
   so the two animations feel like one motion. See TG-UI-1. */
.tg-mobile-search-overlay-top.is-typing {
  animation: tg-overlay-top-wake 360ms cubic-bezier(.16, 1, .3, 1);
}
@keyframes tg-overlay-top-wake {
  0%   { border-bottom-color: var(--tg-border); }
  35%  { border-bottom-color: var(--tg-accent); box-shadow: inset 0 -2px 0 0 var(--tg-accent); }
  100% { border-bottom-color: var(--tg-border); }
}
@media (prefers-reduced-motion: reduce) {
  .tg-mobile-search-overlay-top.is-typing { animation: none; }
}

/* Full-screen search overlay — used on phone instead of the dropdown. */
.tg-mobile-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: none;
  flex-direction: column;
  background: var(--tg-bg);
  animation: tg-overlay-in 200ms ease;
}
/* tellusgit.js toggles .is-open; .active is kept for older markup. */
.tg-mobile-search-overlay.active,
.tg-mobile-search-overlay.is-open { display: flex; }
@keyframes tg-overlay-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tg-mobile-search-overlay-top {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--tg-border);
  background: var(--tg-surface);
}
.tg-mobile-search-overlay-input {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.625rem;
  padding: 0 0.75rem;
  border-radius: var(--tg-radius-pill);
  background: var(--tg-surface-muted);
}
.tg-mobile-search-overlay-input input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--tg-text);
  font: inherit;
  font-size: 0.9375rem;
  outline: 0;
}
.tg-mobile-search-overlay-input input::placeholder { color: var(--tg-text-soft); }
.tg-mobile-search-overlay-close {
  flex: 0 0 auto;
  height: 2.625rem;
  padding: 0 1rem;
  border: 0;
  border-radius: 0.75rem;
  background: var(--tg-accent);
  color: #fff;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tg-mobile-search-overlay-results {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.5rem 0;
}
.tg-mobile-search-overlay-status {
  padding: 0.875rem 1rem;
  font-size: 0.8125rem;
  color: var(--tg-text-muted);
}
.tg-mobile-search-overlay-results .tg-search-section-title {
  margin: 0.625rem 1rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tg-text-muted);
}
.tg-mobile-search-overlay-results .tg-search-result {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--tg-border);
  transition: background 0.1s ease;
}
.tg-mobile-search-overlay-results .tg-search-result:active,
.tg-mobile-search-overlay-results .tg-search-result.selected {
  background: color-mix(in srgb, var(--tg-accent) 10%, transparent);
}
.tg-mobile-search-overlay-results .tg-search-result-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.tg-mobile-search-overlay-results .tg-search-result-name {
  font-size: 0.9375rem;
  font-weight: 600;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tg-mobile-search-overlay-results .tg-search-result-meta {
  font-size: 0.75rem;
  color: var(--tg-text-muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.tg-mobile-search-overlay-results .tg-search-result-badge {
  flex: 0 0 auto;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: var(--tg-radius-pill);
  background: var(--tg-surface-muted);
  color: var(--tg-text-muted);
}
.tg-mobile-search-overlay-results .tg-search-result-icon,
.tg-mobile-search-overlay-results .tg-search-result img {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: var(--tg-surface-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--tg-text);
  object-fit: cover;
}

/* ═══════════════════════════════════════════════════════════════════════
 * Active media query — switch to mobile shell at <=1020px.
 * Bottom bar + dropdown hide; launcher + tabbar + overlay become visible.
 * ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1020px) {
  .tg-bottom-command { display: none; }
  .tg-search-dropdown { display: none; }
  .tg-mobile-tabbar { display: flex; }
  .tg-mobile-search-launcher { display: flex; }
  .tg-mobile-search-overlay { display: none; }
  .tg-mobile-search-overlay.active,
  .tg-mobile-search-overlay.is-open { display: flex; }
}

@media (min-width: 1021px) {
  .tg-mobile-tabbar,
  .tg-mobile-search-launcher,
  .tg-mobile-search-overlay { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * Tight overrides for narrow phones.
 * ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .tg-mobile-tabbar { padding: 0.25rem 0.25rem calc(0.25rem + env(safe-area-inset-bottom)); }
  .tg-mobile-tab { font-size: 0.625rem; padding: 0.25rem 0.125rem 0.125rem; }
  .tg-mobile-tab svg { width: 1.25rem; height: 1.25rem; }
  .tg-mobile-tab-create { margin-top: -1.125rem; }
  .tg-mobile-tab-create-bubble { width: 2.875rem; height: 2.875rem; }
  .tg-mobile-tab-create-bubble svg { width: 1.375rem; height: 1.375rem; }
  .tg-mobile-tab-badge { top: 0; right: calc(50% - 1.125rem); min-width: 0.875rem; height: 0.875rem; font-size: 0.5625rem; line-height: 0.875rem; }

  .tg-mobile-search-launcher { height: 2.25rem; padding: 0 0.75rem; font-size: 0.8125rem; }
  .tg-mobile-search-launcher .tg-mobile-search-launcher-key { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tg-mobile-search-overlay,
  .tg-mobile-tab-create-bubble,
  .tg-mobile-tab { animation: none; transition: none; }
}

/* ======================================================================
 * SPOTLIGHT-CHROME-PORT-END
 * ---------------------------------------------------------------------
 * The rules above are a verbatim port from
 * forgejo/web_src/css/tellusgit-spotlight.css. If the bundled file
 * adds new chrome (a new selector or a new animation), re-port with
 * the diff command in the SPOTLIGHT-CHROME-PORT-BEGIN block above,
 * and add the new selector to the REQUIRED_SELECTORS list in
 * aether-server/test/tellusgitSpotlightCss.test.mjs so the regression
 * guard catches any future re-port that drops a rule.
 * ====================================================================== */

/* ═══════════════════════════════════════════════════════════════════════
 * POLISH-COMMAND-PALETTE-BEGIN
 *
 * Compact Linear-style polish for the search spotlight popup.
 * Direction picked on 2026-08-10: Linear command palette (filter chips
 * at top, dense keyboard hint column, grouped sections) · dark tokens
 * (theme-aware via --tg-surface-elevated / --tg-violet) · compact density
 * (28px rows, ~8 results visible).
 *
 * Override surface: this block targets selectors already styled by the
 * "store-driven renderer-output rules" above (.tg-search-result,
 * .tg-search-section-title, .tg-search-footer, .tg-search-result-badge,
 * .tg-spotlight-top). Being later in the cascade wins by source order —
 * no `!important` needed.
 *
 * Additive surface: filter chips (.tg-search-filters / .tg-search-chip /
 * .tg-search-chip-count), keyword highlights (mark inside .tg-search-result-name),
 * and the optional AI suggestion row (.tg-search-ai-row) are new — the JS
 * and templates don't render them yet, but when they're added they'll pick
 * up the style automatically without any other code changes.
 *
 * REGRESSION GUARD: aether-server/test/tellusgitSpotlightCss.test.mjs
 * pins the selectors actually styled in this block. If you add a new
 * selector here (chip variant, AI row, etc.), add it to the
 * REQUIRED_POLISH_SELECTORS array in that test file so future re-port
 * regressions are caught by CI.
 * ═══════════════════════════════════════════════════════════════════════ */

/* ── Spotlight top header (denser) ─────────────────────────────── */

.tg-spotlight-top {
  min-height: 2.5rem;
  padding: 0 0.875rem;
  font-size: 11px;
  font-weight: 600;
}
.tg-spotlight-top > svg {
  width: 13px;
  height: 13px;
  color: var(--tg-text-soft);
}

/* ── Result rows (compact: 28px) ────────────────────────────────── */

.tg-search-result {
  grid-template-columns: 18px minmax(0, 1fr) auto;
  gap: 0.5rem;
  min-height: 28px;
  height: 28px;
  padding: 0 0.625rem;
  margin: 0 0.25rem;
  border-radius: var(--tg-radius-sm);
  border-width: 1px;
  transition: background 100ms ease, border-color 100ms ease;
}
.tg-search-result img,
.tg-search-result-icon {
  width: 18px;
  height: 18px;
  border-radius: 0;
  background: transparent;
  font-size: 11px;
  color: var(--tg-text-soft);
  text-align: center;
  font-weight: 400;
}
.tg-search-result-icon {
  width: 18px;
  display: inline-block;
}
.tg-search-result-info {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.5rem;
  overflow: hidden;
}
.tg-search-result-name,
.tg-search-result-meta {
  display: inline;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.tg-search-result-name {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.tg-search-result-meta {
  margin-top: 0;
  font-size: 10px;
  font-family: var(--tg-font-mono);
  color: var(--tg-text-soft);
}
/* Right-column badge (renders short tags like "main", "PR", "issue #142").
 * Linear-style: turn it into a small kbd-shaped pill so the column reads
 * as a "hint" regardless of whether content is text or a real kbd. */
.tg-search-result-badge {
  font-family: var(--tg-font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 1px 5px;
  border-radius: 3px;
  background: var(--tg-surface-muted);
  border: 1px solid var(--tg-border);
  color: var(--tg-text-soft);
  white-space: nowrap;
}
/* If anyone renders a real keyboard hint column with .tg-search-result-hint,
 * make it match the badge so the right column reads consistently. */
.tg-search-result-hint {
  font-family: var(--tg-font-mono);
  font-size: 9px;
  font-weight: 600;
  color: var(--tg-text-soft);
  background: var(--tg-surface-muted);
  border: 1px solid var(--tg-border);
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
/* Selected state — violet accent matches the Linear default. */
.tg-search-result.selected,
.tg-search-result:hover {
  background: color-mix(in srgb, var(--tg-violet), transparent 84%);
  border-color: color-mix(in srgb, var(--tg-violet), transparent 72%);
}
.tg-search-result.selected .tg-search-result-badge,
.tg-search-result:hover .tg-search-result-badge,
.tg-search-result.selected .tg-search-result-hint,
.tg-search-result:hover .tg-search-result-hint {
  background: color-mix(in srgb, var(--tg-violet), transparent 65%);
  border-color: color-mix(in srgb, var(--tg-violet), transparent 40%);
  color: #c4b5fd;
}

/* ── Sections (denser titles) ───────────────────────────────────── */

.tg-search-results { padding: 0.25rem 0.375rem; }
.tg-search-section { padding: 0.25rem 0; }
.tg-search-section + .tg-search-section {
  border-top: 1px solid color-mix(in srgb, var(--tg-border), transparent 30%);
  margin-top: 0.25rem;
}
.tg-search-section-title {
  padding: 0.375rem 0.625rem 0.25rem;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tg-text-soft);
}

/* ── Footer hint bar (Linear-style kbd pills) ────────────────────── */

.tg-search-footer {
  gap: 1rem;
  padding: 0.4375rem 0.875rem;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0;
  background: var(--tg-surface-muted);
}
.tg-search-footer-group { gap: 0.4375rem; }
.tg-search-footer-group--primary { color: var(--tg-text-muted); }
.tg-search-footer-hint {
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 600;
  color: var(--tg-text-soft);
}
.tg-search-footer-keys { gap: 0.1875rem; }
.tg-search-footer kbd {
  min-width: 16px;
  height: 18px;
  padding: 0 5px;
  border-radius: 3px;
  background: var(--tg-surface-elevated);
  border: 1px solid var(--tg-border);
  color: var(--tg-text);
  font-family: var(--tg-font-mono);
  font-size: 9px;
  font-weight: 600;
  line-height: 16px;
}
.tg-search-footer-group--primary kbd {
  /* Keep the "primary" group's keys in the violet accent so the most-used
   * shortcuts (navigate + open) catch the eye. */
  border-color: color-mix(in srgb, var(--tg-violet), transparent 50%);
  background: color-mix(in srgb, var(--tg-violet), transparent 84%);
  color: var(--tg-violet);
}

/* ── Empty / loading states (compact) ───────────────────────────── */

.tg-search-empty {
  padding: 1.25rem 1rem;
  font-size: 12px;
  color: var(--tg-text-muted);
}
.tg-search-empty strong {
  font-size: 13px;
  font-weight: 700;
}
.tg-search-loading {
  padding: 0.5rem 0.875rem;
  font-size: 11px;
  color: var(--tg-text-soft);
}

/* ── Filter chips (new — currently template-less, so this only takes
 *      effect once someone renders .tg-search-filters) ────────── */

.tg-search-filters {
  display: flex;
  gap: 0.25rem;
  padding: 0.375rem 0.625rem;
  border-bottom: 1px solid var(--tg-border);
  background: var(--tg-surface-muted);
  overflow-x: auto;
  scrollbar-width: none;
}
.tg-search-filters::-webkit-scrollbar { display: none; }

.tg-search-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.1875rem 0.625rem;
  border: 1px solid transparent;
  border-radius: var(--tg-radius-sm);
  background: transparent;
  color: var(--tg-text-soft);
  font-family: var(--tg-font-sans);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.tg-search-chip:hover { color: var(--tg-text); }
.tg-search-chip.is-active {
  background: color-mix(in srgb, var(--tg-violet), transparent 78%);
  color: #c4b5fd;
  border-color: color-mix(in srgb, var(--tg-violet), transparent 65%);
}
.tg-search-chip-count {
  font-family: var(--tg-font-mono);
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--tg-text), transparent 88%);
  color: var(--tg-text-soft);
}
.tg-search-chip.is-active .tg-search-chip-count {
  background: color-mix(in srgb, var(--tg-violet), transparent 70%);
  color: #c4b5fd;
}

/* ── Keyword highlighting (mark inside result names) ─────────────── */

.tg-search-result-name mark,
.tg-search-section-title mark {
  background: color-mix(in srgb, var(--tg-violet), transparent 55%);
  color: #c4b5fd;
  padding: 0 1px;
  border-radius: 2px;
  font-weight: 700;
}

/* ── AI suggestion row (optional, currently not rendered) ────────── */

.tg-search-ai-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem;
  padding: 0.4375rem 0.875rem;
  border-bottom: 1px solid color-mix(in srgb, var(--tg-violet), transparent 60%);
  background: color-mix(in srgb, var(--tg-violet), transparent 92%);
  color: var(--tg-text);
}
.tg-search-ai-row-icon {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  background: var(--tg-violet);
  color: #fff;
  border-radius: var(--tg-radius-sm);
  font-size: 12px;
  flex-shrink: 0;
}
.tg-search-ai-row-info {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  line-height: 1.35;
}
.tg-search-ai-row-info strong {
  display: block;
  color: var(--tg-violet);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.125rem;
}
.tg-search-ai-row-info span {
  display: block;
  color: var(--tg-text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tg-search-ai-row-hint {
  font-family: var(--tg-font-mono);
  font-size: 9px;
  font-weight: 600;
  color: var(--tg-violet);
  background: color-mix(in srgb, var(--tg-violet), transparent 80%);
  border: 1px solid color-mix(in srgb, var(--tg-violet), transparent 60%);
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════
 * POLISH-COMMAND-PALETTE-END
 *
 * The rules above are the Compact Linear-style polish applied on top of
 * the SPOTLIGHT-CHROME-PORT chrome. If you add a new polish rule (a new
 * chip variant, a new AI-row sub-element, etc.), append it here AND add
 * the new selector to the REQUIRED_POLISH_SELECTORS list in
 * aether-server/test/tellusgitSpotlightCss.test.mjs so the regression
 * guard catches any future refactor that drops a rule.
 * ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
 * Bottom-bar clearance
 *
 * The desktop .tg-bottom-command (fixed, bottom: 1.5rem, min-height:
 * 3.625rem) and the phone .tg-mobile-tabbar (fixed, bottom: 0, ~3rem +
 * safe-area) both cover whatever sits at the bottom of the viewport.
 * Every non-dashboard .page-content needs enough bottom padding so the
 * last row of content can scroll above the bar. The shell already sets
 * padding-bottom: 7.375rem on .page-content, but its rule has no
 * !important and was previously zeroed out by the .page-content
 * `padding: 0 !important` shorthand above; we re-assert the clearance
 * here as a safety net so any future padding reset can't silently
 * regress this.
 * ═══════════════════════════════════════════════════════════════════════ */

body.tg-has-global-sidebar .page-content:not(.tg-dashboard-page) {
  padding-bottom: 7.375rem !important;
}
@media (max-width: 1020px) {
  body.tg-has-global-sidebar .page-content:not(.tg-dashboard-page) {
    /* Mobile tabbar ≈ 3rem + safe-area-inset-bottom (0–1.5rem on iOS). */
    padding-bottom: calc(4.875rem + env(safe-area-inset-bottom, 0px)) !important;
  }
}
@media (max-width: 480px) {
  body.tg-has-global-sidebar .page-content:not(.tg-dashboard-page) {
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ── prefers-reduced-motion: keep transitions instant ──────────── */

@media (prefers-reduced-motion: reduce) {
  .tg-page-content,
  .tg-toast,
  .tg-mobile-search-overlay,
  .tg-failure-card,
  .tg-mobile-tab {
    transition: none !important;
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
 * TellusGit phone hero alignment
 *
 * The default .tg-chat-welcome-page (in vendored tellusgit-home.css)
 * centers the entire hero (title + feature card) inside 100dvh. On
 * phones we push the title group to the top of the viewport so the
 * welcome-card (.tg-welcome-card) naturally scrolls into view below
 * the fold — matching the user's expectation that scrolling reveals
 * more content.
 * ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .tg-chat-welcome-page {
    justify-content: flex-start;
    padding-top: clamp(3.5rem, 8vh, 5rem);  /* clears the top-bar */
    padding-bottom: clamp(2rem, 5vh, 3rem);
    overflow-y: auto;  /* allow the welcome-card to scroll into view */
  }
  .tg-chat-welcome-page .tg-chat-welcome {
    width: 100%;
    max-width: 28rem;
    gap: 1rem;
  }
  .tg-chat-welcome-page .tg-welcome-card {
    margin-top: 0.5rem;
    max-width: 32rem;
    width: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
 * TellusGit phone touch targets (≥44px)
 *
 * Override vendored Forgejo CSS (which sets many of these to 32px or
 * less) so every tappable element on phones meets Apple HIG / WCAG
 * 2.5.5 minimums. !important is necessary because the vendored rules
 * above are explicit and we cannot touch them.
 * ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  .tg-dismiss-button {
    min-height: 44px !important;
    padding: 0.625rem 0.875rem !important;
    font-size: 0.9375rem !important;
  }
  .tg-text-link {
    min-height: 44px !important;
    padding: 0.625rem 0.875rem !important;
    font-size: 0.9375rem !important;
  }
  .tg-repo-chip {
    min-height: 44px !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
  }
  .tg-chat-pills span {
    min-height: 44px !important;
    padding: 0.625rem 1rem !important;
    font-size: 0.875rem !important;
  }
  .tg-feature-toggle {
    min-height: 44px !important;
    padding: 0.625rem 0.875rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
 * Minimal signed-out home — hero only.
 *
 * The feature accordion card was removed from the signed-out home, so
 * the remaining content is short; keep it truly centred in the viewport
 * (the vendored page shell already centers via justify-content:center,
 * this just neutralises leftover card spacing) and style the new
 * Sign in / Sign up row that sits below the capability pills.
 * ═══════════════════════════════════════════════════════════════════ */

.tg-chat-welcome-page .tg-welcome-card {
  display: none;
}

.tg-home-auth-actions {
  margin-top: 0.5rem;
  gap: 0.625rem;
  justify-content: center;
}

.tg-home-auth-actions .tg-button {
  min-width: 7.5rem;
}

@media (max-width: 640px) {
  .tg-home-auth-actions {
    flex-direction: column;
    width: 100%;
    max-width: 22rem;
  }
  .tg-home-auth-actions .tg-button {
    width: 100%;
    justify-content: center;
  }
}

/* ═════════════════════════════════════════════════════════════════
 * Bottom command bar — flexible input width + even magnifier spacing
 *
 * Overrides on top of the SPOTLIGHT-CHROME-PORT chrome (kept here, not
 * inside the ported block, so the port stays diffable against
 * forgejo/web_src/css/tellusgit-spotlight.css).
 *
 * 1. Flexible input. The ported chrome lays the bar out as a 3-track
 *    grid (＋ | input | hints) that assumes the "＋" create shortcut is
 *    rendered as the first child. Signed-out visitors get no "＋"
 *    (repo creation is account-scoped), so every child shifted one
 *    track left: the search input collapsed into the 2.625rem track
 *    (a ~12px sliver) and the hint chips stretched across the
 *    flexible track. Flexbox removes the positional coupling — the
 *    input takes whatever width is left, whichever children render.
 *
 * 2. Even magnifier spacing. The search icon is sized to the same
 *    2.625rem square as the "＋" shortcut with the glyph centred via
 *    symmetric padding, and the bar's padding is made uniform, so the
 *    icon's horizontal inset equals its vertical inset exactly.
 * ═════════════════════════════════════════════════════════════════ */

.tg-bottom-command {
  display: flex;
  padding: 0.5rem;
}

.tg-bottom-command > .tg-command-input {
  flex: 1 1 auto;
  min-width: 0;
}

.tg-bottom-command > .tg-command-plus,
.tg-bottom-command > .tg-command-hints {
  flex: 0 0 auto;
}

.tg-command-input {
  grid-template-columns: 2.625rem minmax(0, 1fr);
  gap: 0;
}

.tg-command-input > svg {
  width: 2.625rem;
  height: 2.625rem;
  padding: calc((2.625rem - 1rem) / 2);
  box-sizing: border-box;
  justify-self: center;
}

/* ═══════════════════════════════════════════════════════════════
 * Auth modal polish — wider card, neutral autofill, calmer form
 *
 * Sits on top of the base .tg-auth-modal-card rules above. Three
 * goals:
 *
 * 1. Width. 26rem cramped the two-column-feeling labels + inputs;
 *    31rem gives the fields room without turning the modal into a
 *    billboard.
 *
 * 2. Autofill. Chrome/WebKit repaints autofilled inputs with the
 *    theme's brand-tinted background (peach/orange on this build),
 *    which fights the modal's monochrome surface. The 1000px inset
 *    box-shadow paints over WebKit's forced background colour, and
 *    -webkit-text-fill-color pins the text colour.
 *
 * 3. Tactility. Quieter input backgrounds, hover/focus affordances,
 *    and a submit button with lift/press feedback so the primary
 *    action reads as clickable rather than painted-on.
 * ═══════════════════════════════════════════════════════════════ */

.tg-auth-modal-card {
  max-width: 31rem;
  gap: 20px;
  padding: clamp(28px, 3.5vw, 40px) clamp(28px, 4vw, 44px) clamp(24px, 3vw, 32px);
  box-shadow:
    0 24px 70px -28px color-mix(in srgb, var(--tg-bg-deep) 55%, transparent),
    var(--tg-shadow-popover),
    0 1px 0 color-mix(in srgb, var(--tg-text) 6%, transparent) inset,
    0 0 0 1px color-mix(in srgb, var(--tg-text) 4%, transparent) inset;
}

.tg-auth-card-head {
  margin: 2px clamp(4px, 4%, 16px) 0;
  gap: 8px;
}
.tg-auth-card-title { font-size: 1.625rem; }
.tg-auth-card-lede { font-size: 0.9375rem; }

.tg-auth-modal-card input,
.tg-auth-modal-card .ui.input > input,
.tg-auth-modal-card .ui.form input {
  height: 2.875rem;
  border-radius: 10px;
  background: var(--tg-surface-muted);
  border-color: color-mix(in srgb, var(--tg-border-strong), transparent 15%);
}
.tg-auth-modal-card input:hover {
  border-color: var(--tg-text-soft);
}

/* Neutralise WebKit's brand-tinted autofill paint (see block comment). */
.tg-auth-modal-card input:-webkit-autofill,
.tg-auth-modal-card input:-webkit-autofill:hover,
.tg-auth-modal-card input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--tg-text);
  -webkit-box-shadow: 0 0 0 1000px var(--tg-surface-muted) inset;
  caret-color: var(--tg-text);
  border-color: color-mix(in srgb, var(--tg-border-strong), transparent 15%);
  transition: background-color 9999s ease-out;
}

.tg-auth-modal-card .ui.form .ui.primary.button {
  height: 2.875rem;
  border-radius: 10px;
  font-weight: 650;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 24px -14px color-mix(in srgb, var(--tg-text) 65%, transparent);
  transition:
    transform var(--tg-dur) var(--tg-ease),
    box-shadow var(--tg-dur) var(--tg-ease),
    filter var(--tg-dur) var(--tg-ease);
}
.tg-auth-modal-card .ui.form .ui.primary.button:hover {
  transform: translateY(-1px);
  filter: brightness(1.07);
  box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--tg-text) 72%, transparent);
}
.tg-auth-modal-card .ui.form .ui.primary.button:active {
  transform: translateY(0);
  filter: brightness(0.97);
}

.tg-auth-card-foot {
  padding-top: 18px;
  gap: 8px 20px;
  font-size: 0.875rem;
}
.tg-auth-card-foot a { padding: 4px 2px; }