.chroma .bp{color:#fabd2f}.chroma .c,.chroma .c1,.chroma .ch,.chroma .cm{color:#777e94}.chroma .cp{color:#8ec07c}.chroma .cpf{color:#649bc4}.chroma .cs{color:#9075cd}.chroma .dl{color:#649bc4}.chroma .gd{color:#fff;background-color:#5f3737}.chroma .ge{color:#ddee30}.chroma .gh{color:#ffaa10}.chroma .gi{color:#fff;background-color:#3a523a}.chroma .go{color:#777e94}.chroma .gp{color:#ebdbb2}.chroma .gr{color:#f43}.chroma .gs{color:#ebdbb2}.chroma .gt{color:#ff7540}.chroma .gu{color:#b8bb26}.chroma .il{color:#649bc4}.chroma .k{color:#ff7540}.chroma .kc{color:#649bc4}.chroma .kd{color:#ff7540}.chroma .kn{color:#ffaa10}.chroma .kp{color:#5f8700}.chroma .kr{color:#ff7540}.chroma .kt{color:#ff7b72}.chroma .m,.chroma .mb,.chroma .mf,.chroma .mh,.chroma .mi,.chroma .mo{color:#649bc4}.chroma .n{color:#c9d1d9}.chroma .na,.chroma .nb{color:#fabd2f}.chroma .nc{color:#ffaa10}.chroma .nd{color:#8ec07c}.chroma .ne{color:#ff7540}.chroma .nf,.chroma .ni{color:#fabd2f}.chroma .nl{color:#ff7540}.chroma .nn{color:#c9d1d9}.chroma .no{color:#649bc4}.chroma .nt{color:#ff7540}.chroma .nv{color:#ebdbb2}.chroma .nx{color:#b6bac5}.chroma .o{color:#ff7540}.chroma .ow{color:#5f8700}.chroma .p{color:#d2d4db}.chroma .s,.chroma .s1,.chroma .s2{color:#b8bb26}.chroma .sa{color:#ffaa10}.chroma .sb{color:#b8bb26}.chroma .sc{color:#ffaa10}.chroma .sd{color:#b8bb26}.chroma .se{color:#ff8540}.chroma .sh{color:#b8bb26}.chroma .si{color:#ffaa10}.chroma .sr{color:#9075cd}.chroma .ss{color:#ff8540}.chroma .sx{color:#ffaa10}.chroma .vc,.chroma .vg,.chroma .vi{color:#649bee}.chroma .w{color:#7f8699}.CodeMirror.cm-s-default .cm-property,.CodeMirror.cm-s-paper .cm-property{color:#a0cc75}.CodeMirror.cm-s-default .cm-header,.CodeMirror.cm-s-paper .cm-header{color:#9daccc}.CodeMirror.cm-s-default .cm-quote,.CodeMirror.cm-s-paper .cm-quote{color:#090}.CodeMirror.cm-s-default .cm-keyword,.CodeMirror.cm-s-paper .cm-keyword{color:#cc8a61}.CodeMirror.cm-s-default .cm-atom,.CodeMirror.cm-s-paper .cm-atom{color:#ef5e77}.CodeMirror.cm-s-default .cm-number,.CodeMirror.cm-s-paper .cm-number{color:#ff5656}.CodeMirror.cm-s-default .cm-def,.CodeMirror.cm-s-paper .cm-def{color:#e4e4e4}.CodeMirror.cm-s-default .cm-variable-2,.CodeMirror.cm-s-paper .cm-variable-2{color:#00bdbf}.CodeMirror.cm-s-default .cm-variable-3,.CodeMirror.cm-s-paper .cm-variable-3{color:#085}.CodeMirror.cm-s-default .cm-comment,.CodeMirror.cm-s-paper .cm-comment{color:#8e9ab3}.CodeMirror.cm-s-default .cm-string,.CodeMirror.cm-s-paper .cm-string{color:#a77272}.CodeMirror.cm-s-default .cm-string-2,.CodeMirror.cm-s-paper .cm-string-2{color:#f50}.CodeMirror.cm-s-default .cm-meta,.CodeMirror.cm-s-paper .cm-meta,.CodeMirror.cm-s-default .cm-qualifier,.CodeMirror.cm-s-paper .cm-qualifier{color:#ffb176}.CodeMirror.cm-s-default .cm-builtin,.CodeMirror.cm-s-paper .cm-builtin{color:#b7c951}.CodeMirror.cm-s-default .cm-bracket,.CodeMirror.cm-s-paper .cm-bracket{color:#997}.CodeMirror.cm-s-default .cm-tag,.CodeMirror.cm-s-paper .cm-tag{color:#f1d273}.CodeMirror.cm-s-default .cm-attribute,.CodeMirror.cm-s-paper .cm-attribute{color:#bfcc70}.CodeMirror.cm-s-default .cm-hr,.CodeMirror.cm-s-paper .cm-hr{color:#999}.CodeMirror.cm-s-default .cm-url,.CodeMirror.cm-s-paper .cm-url{color:#c5cfd0}.CodeMirror.cm-s-default .cm-link,.CodeMirror.cm-s-paper .cm-link{color:#d8c792}.CodeMirror.cm-s-default .cm-error,.CodeMirror.cm-s-paper .cm-error{color:#dbdbeb}.markup [src$="#gh-light-mode-only"],.markup [src$="#light-mode-only"],.markup [href$="#gh-light-mode-only"],.markup [href$="#light-mode-only"]{display:none}.markup [src$="#gh-dark-mode-only"],.markup [src$="#dark-mode-only"],.markup [href$="#gh-dark-mode-only"],.markup [href$="#dark-mode-only"]{display:unset}:root{--steel-900: #10161d;--steel-850: #131a21;--steel-800: #171e26;--steel-750: #1d262f;--steel-700: #242d38;--steel-650: #2b3642;--steel-600: #374351;--steel-550: #445161;--steel-500: #515f70;--steel-450: #5f6e80;--steel-400: #6d7d8f;--steel-350: #7c8c9f;--steel-300: #8c9caf;--steel-250: #9dadc0;--steel-200: #aebed0;--steel-150: #c0cfe0;--steel-100: #d2e0f0;--is-dark-theme: true;--color-primary: #10b981;--color-primary-contrast: #000;--color-primary-dark-1: #34d399;--color-primary-dark-2: #34d399;--color-primary-dark-3: #6ee7b7;--color-primary-dark-4: #6ee7b7;--color-primary-dark-5: #a7f3d0;--color-primary-dark-6: #a7f3d0;--color-primary-dark-7: #d1fae5;--color-primary-light-1: #059669;--color-primary-light-2: #047857;--color-primary-light-3: #065f46;--color-primary-light-4: #064e3b;--color-primary-light-5: #064e3b;--color-primary-light-6: #022c22;--color-primary-light-7: #022c22;--color-primary-alpha-10: #04785719;--color-primary-alpha-20: #04785733;--color-primary-alpha-30: #0478574b;--color-primary-alpha-40: #04785766;--color-primary-alpha-50: #04785780;--color-primary-alpha-60: #04785799;--color-primary-alpha-70: #047857b3;--color-primary-alpha-80: #047857cc;--color-primary-alpha-90: #047857e1;--color-primary-hover: var(--color-primary-light-1);--color-primary-active: var(--color-primary-light-2);--color-secondary: var(--steel-700);--color-secondary-dark-1: var(--steel-550);--color-secondary-dark-2: var(--steel-500);--color-secondary-dark-3: var(--steel-450);--color-secondary-dark-4: var(--steel-400);--color-secondary-dark-5: var(--steel-350);--color-secondary-dark-6: var(--steel-300);--color-secondary-dark-7: var(--steel-250);--color-secondary-dark-8: var(--steel-200);--color-secondary-dark-9: var(--steel-150);--color-secondary-dark-10: var(--steel-100);--color-secondary-dark-11: var(--steel-100);--color-secondary-dark-12: var(--steel-100);--color-secondary-dark-13: var(--steel-100);--color-secondary-light-1: var(--steel-650);--color-secondary-light-2: var(--steel-700);--color-secondary-light-3: var(--steel-750);--color-secondary-light-4: var(--steel-800);--color-secondary-alpha-10: #2b364219;--color-secondary-alpha-20: #2b364233;--color-secondary-alpha-30: #2b36424b;--color-secondary-alpha-40: #2b364266;--color-secondary-alpha-50: #2b364280;--color-secondary-alpha-60: #2b364299;--color-secondary-alpha-70: #2b3642b3;--color-secondary-alpha-80: #2b3642cc;--color-secondary-alpha-90: #2b3642e1;--color-secondary-hover: var(--color-secondary-light-1);--color-secondary-active: var(--color-secondary-light-2);--color-console-fg: #eeeff2;--color-console-fg-subtle: #959cab;--color-console-bg: #1f212b;--color-console-border: #383c47;--color-console-hover-bg: #ffffff16;--color-console-active-bg: #454a57;--color-console-menu-bg: #383c47;--color-console-menu-border: #5c6374;--color-red: #b91c1c;--color-orange: #047857;--color-yellow: #ca8a04;--color-olive: #91a313;--color-green: #15803d;--color-teal: #0d9488;--color-blue: #2563eb;--color-violet: #7c3aed;--color-purple: #9333ea;--color-pink: #db2777;--color-brown: #a47252;--color-grey: var(--steel-500);--color-black: #111827;--color-red-light: #dc2626;--color-orange-light: #059669;--color-yellow-light: #eab308;--color-olive-light: #839311;--color-green-light: #16a34a;--color-teal-light: #14b8a6;--color-blue-light: #3b82f6;--color-violet-light: #8b5cf6;--color-purple-light: #a855f7;--color-pink-light: #ec4899;--color-brown-light: #94674a;--color-grey-light: var(--steel-300);--color-black-light: #1f2937;--color-red-dark-1: #a71919;--color-orange-dark-1: #d34f0b;--color-yellow-dark-1: #b67c04;--color-olive-dark-1: #839311;--color-green-dark-1: #137337;--color-teal-dark-1: #0c857a;--color-blue-dark-1: #1554e0;--color-violet-dark-1: #6a1feb;--color-purple-dark-1: #8519e7;--color-pink-dark-1: #c7216b;--color-brown-dark-1: #94674a;--color-black-dark-1: #0f1623;--color-red-dark-2: #941616;--color-orange-dark-2: #bb460a;--color-yellow-dark-2: #ca8a04;--color-olive-dark-2: #91a313;--color-green-dark-2: #15803d;--color-teal-dark-2: #0a766d;--color-blue-dark-2: #2563eb;--color-violet-dark-2: #5c14d8;--color-purple-dark-2: #7c3aed;--color-pink-dark-2: #b11d5f;--color-brown-dark-2: #a47252;--color-black-dark-2: #111827;--color-ansi-black: #1d2328;--color-ansi-red: #cc4848;--color-ansi-green: #87ab63;--color-ansi-yellow: #cc9903;--color-ansi-blue: #3a8ac6;--color-ansi-magenta: #d22e8b;--color-ansi-cyan: #00918a;--color-ansi-white: var(--color-console-fg-subtle);--color-ansi-bright-black: #424851;--color-ansi-bright-red: #d15a5a;--color-ansi-bright-green: #93b373;--color-ansi-bright-yellow: #eaaf03;--color-ansi-bright-blue: #4e96cc;--color-ansi-bright-magenta: #d74397;--color-ansi-bright-cyan: #00b6ad;--color-ansi-bright-white: var(--color-console-fg);--color-gold: #b1983b;--color-white: #ffffff;--color-pure-black: #000000;--color-diff-removed-word-bg: #783030;--color-diff-added-word-bg: #255c39;--color-diff-removed-row-bg: #432121;--color-diff-moved-row-bg: #825718;--color-diff-added-row-bg: #1b3625;--color-diff-removed-row-border: #783030;--color-diff-moved-row-border: #a67a1d;--color-diff-added-row-border: #255c39;--color-diff-inactive: var(--steel-650);--color-error-border: #783030;--color-error-bg: #5f2525;--color-error-bg-active: #783030;--color-error-bg-hover: #783030;--color-error-text: #fef2f2;--color-success-border: #1f6e3c;--color-success-bg: #1d462c;--color-success-text: #aef0c2;--color-warning-border: #a67a1d;--color-warning-bg: #644821;--color-warning-text: #fff388;--color-info-border: #2e50b0;--color-info-bg: #2a396b;--color-info-text: var(--steel-100);--color-red-badge: #b91c1c;--color-red-badge-bg: #b91c1c22;--color-red-badge-hover-bg: #b91c1c44;--color-green-badge: #16a34a;--color-green-badge-bg: #16a34a22;--color-green-badge-hover-bg: #16a34a44;--color-yellow-badge: #ca8a04;--color-yellow-badge-bg: #ca8a0422;--color-yellow-badge-hover-bg: #ca8a0444;--color-orange-badge: #047857;--color-orange-badge-bg: #04785722;--color-orange-badge-hover-bg: #04785744;--color-git: #f05133;--color-icon-green: #3fb950;--color-icon-red: #f85149;--color-icon-purple: #aa76ff;--color-body: var(--steel-800);--color-box-header: var(--steel-700);--color-box-body: var(--steel-750);--color-box-body-highlight: var(--steel-650);--color-text-dark: #fff;--color-text: var(--steel-100);--color-text-light: var(--steel-150);--color-text-light-1: var(--steel-150);--color-text-light-2: var(--steel-200);--color-text-light-3: var(--steel-200);--color-footer: var(--steel-900);--color-timeline: var(--steel-650);--color-input-text: var(--steel-100);--color-input-background: var(--steel-650);--color-input-toggle-background: var(--steel-650);--color-input-border: var(--steel-550);--color-input-border-hover: var(--steel-450);--color-header-wrapper: var(--steel-850);--color-header-wrapper-transparent: #242d3800;--color-light: #00000028;--color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled)));--color-light-border: #ffffff28;--color-hover: var(--steel-600);--color-active: var(--steel-650);--color-menu: var(--steel-700);--color-card: var(--steel-700);--color-markup-table-row: #ffffff06;--color-markup-code-block: var(--steel-800);--color-markup-code-inline: var(--steel-850);--color-button: var(--steel-600);--color-code-bg: var(--steel-750);--color-shadow: #00000060;--color-secondary-bg: var(--steel-700);--color-text-focus: #fff;--color-expand-button: #3c404d;--color-placeholder-text: var(--color-text-light-3);--color-editor-line-highlight: var(--steel-700);--color-project-board-bg: var(--color-secondary-light-3);--color-project-board-dark-label: var(--color-text-light-3);--color-caret: var(--color-text);--color-reaction-bg: #ffffff12;--color-reaction-active-bg: var(--color-primary-alpha-30);--color-reaction-hover-bg: var(--color-primary-alpha-40);--color-tooltip-text: #ffffff;--color-tooltip-bg: #000000f0;--color-nav-bg: var(--steel-900);--color-nav-hover-bg: var(--steel-600);--color-nav-text: var(--color-text);--color-secondary-nav-bg: var(--color-body);--color-label-text: #fff;--color-label-bg: var(--steel-600);--color-label-hover-bg: var(--steel-550);--color-label-active-bg: var(--steel-500);--color-label-bg-alt: var(--steel-550);--color-accent: var(--color-primary-light-1);--color-small-accent: var(--color-primary-light-5);--color-highlight-fg: var(--color-primary-light-4);--color-highlight-bg: var(--color-primary-alpha-20);--color-overlay-backdrop: #080808c0;--checkerboard-color-1: #474747;--checkerboard-color-2: #313131;accent-color:var(--color-accent);color-scheme:dark}.emoji[aria-label="check mark"],.emoji[aria-label="currency exchange"],.emoji[aria-label="TOP arrow"],.emoji[aria-label="END arrow"],.emoji[aria-label="ON! arrow"],.emoji[aria-label="SOON arrow"],.emoji[aria-label="heavy dollar sign"],.emoji[aria-label=copyright],.emoji[aria-label=registered],.emoji[aria-label="trade mark"],.emoji[aria-label=multiply],.emoji[aria-label=plus],.emoji[aria-label=minus],.emoji[aria-label=divide],.emoji[aria-label="curly loop"],.emoji[aria-label="double curly loop"],.emoji[aria-label="wavy dash"],.emoji[aria-label="paw prints"],.emoji[aria-label="musical note"],.emoji[aria-label="musical notes"]{filter:invert(100%) hue-rotate(180deg)}i.grey.icon.icon.icon.icon{color:var(--steel-350)!important}.ui.secondary.vertical.menu{border-radius:.28571429rem!important;overflow:hidden}.ui.basic.primary.button.item{background-color:var(--color-active)!important;color:var(--color-text)!important;box-shadow:none!important}.ui.red.label.notification_count,.ui.primary.label,.ui.primary.labels .label{background-color:var(--color-primary-light-3)!important}.repository.view.issue .comment-list .code-comment+.code-comment{margin:1.25rem 0!important;padding-top:1.25rem!important;border-top-color:var(--steel-650)!important}.ui.labeled.icon.buttons>.button>.icon,.ui.labeled.icon.button>.icon{background-color:var(--color-light)!important}#review-box .review-comments-counter{background-color:var(--color-shadow)!important;color:var(--color-white)!important;margin-left:.5em}.ui.basic.labels .primary.label,.ui.ui.ui.basic.primary.label{color:var(--color-text-dark)!important}.ui.basic.yellow.label.pending-label{background:var(--color-light)!important}::selection{background:var(--steel-100)!important;color:var(--color-pure-black)!important}strong.attention-important,svg.attention-important{color:var(--color-violet-light)}strong.attention-note,svg.attention-note{color:var(--color-blue-light)}strong.attention-caution,svg.attention-caution{color:var(--color-red-light)}.ui.basic.red.button{background-color:var(--color-red);color:var(--color-white)}.ui.basic.red.button:hover,.ui.basic.red.button:focus{background-color:var(--color-red-dark-1);color:var(--color-white)}.ui.basic.red.button:active{background-color:var(--color-red-dark-2);color:var(--color-white)}

body{font-family:Inter,system-ui,-apple-system,sans-serif;background-image:radial-gradient(circle at 15% 50%,#10b98114,transparent 25%),radial-gradient(circle at 85% 30%,#0ea5e914,transparent 25%);background-attachment:fixed}
.ui.label.primary,.ui.primary.button{box-shadow:0 0 12px #10b98140}
::selection{background:#10b981!important;color:#fff!important}

/* ─────────────────────────────────────────────────────────────────
 * Layout overrides (2026-05-18): nuke LEFT navbars, full-viewport
 * main content. Right-rails on issues/PRs (Labels, Milestone,
 * Assignees, Reviewers) are metadata controls, kept intact.
 * Pairs with chronicle entry + followup issue for CMS-style editing.
 * ───────────────────────────────────────────────────────────────── */

/* user/org/admin/repo settings: vertical fluid menu on the LEFT */
.user.settings .ui.stackable.grid > .column:first-child,
.organization.settings .ui.stackable.grid > .column:first-child,
.admin .ui.stackable.grid > .column:first-child,
.repository.settings .ui.stackable.grid > .column:first-child,
.user.profile .ui.stackable.grid > .four.wide.column:first-child {
  display: none !important;
}
.user.settings .ui.stackable.grid > .column,
.organization.settings .ui.stackable.grid > .column,
.admin .ui.stackable.grid > .column,
.repository.settings .ui.stackable.grid > .column,
.user.profile .ui.stackable.grid > .twelve.wide.column {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

/* dashboard repo sidebar (Forgejo dashboard right column) */
.dashboard.feeds > .ui.container > .ui.stackable.grid > .four.wide.column,
.dashboard.feeds .secondary.pointing.menu + .ui.stackable.grid > .four.wide.column,
.dashboard .ui.grid > .four.wide.column,
.dashboard #dashboard-sidebar {
  display: none !important;
}
.dashboard.feeds .ui.stackable.grid > .twelve.wide.column,
.dashboard .ui.grid > .twelve.wide.column {
  width: 100% !important;
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* Generic catchall: any standalone vertical sidebar nav.
   Excludes issue right-rail (.issue-content-right) + repo right-rail. */
body:not(.repo-issue):not(.repository) .ui.fluid.vertical.menu:not(.issue-content-right .menu) {
  display: none !important;
}

/* Container: stretch to full viewport between header + footer */
body > .full.height,
body > .page-content {
  min-height: calc(100vh - 56px - 56px); /* nav + footer rough heights */
  width: 100%;
}
body > .page-content > .ui.container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 2rem;
  padding-right: 2rem;
}

/* ─────────────────────────────────────────────────────────────────
 * Mobile sweep (2026-05-19): make issues.chaserich.com tolerable
 * on phone-tall screens. Followup #213, slice 1.
 *
 * Targets the real pain points:
 *   - 2rem container padding eats 64px of a 360px viewport
 *   - shim-nav topbar wraps but tap targets are tiny
 *   - issue right-rail (Labels/Milestone/Assignees) needs to drop
 *     below the body, not float beside it
 *   - wide tables (issue lists, file lists, diff stat) overflow
 *   - settings horizontal menus + tab bars need momentum scroll
 *   - long URLs / inline code break layout
 *   - footer wraps awkwardly
 * ───────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* Tighter gutters - reclaim ~40px on a 360px viewport. */
  body > .page-content > .ui.container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* Topbar: ensure clean wrap, larger tap targets, no horizontal scroll. */
  #navbar {
    flex-wrap: wrap !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  #navbar .item {
    min-height: 44px;
    padding: 10px 12px !important;
    font-size: 14px;
  }
  /* Hide the brand-text label past the logo - logo alone is enough on mobile. */
  #navbar > a.item > span:not(.sr-only) {
    display: none;
  }

  /* Issue layout: right-rail stacks BELOW the body, not beside it. */
  .repository.view.issue .ui.stackable.grid > .column,
  .repository.view.issue .issue-content,
  .repository.view.issue .issue-content-right {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .repository.view.issue .issue-content-right {
    order: 2;
    margin-top: 1rem;
    border-top: 1px solid var(--color-secondary);
    padding-top: 1rem;
  }
  .repository.view.issue .issue-content {
    order: 1;
  }

  /* Wide tables wrap into a horizontal-scroll container.
     Forgejo emits issue lists and file lists inside .ui.table; let those
     scroll horizontally inside their parent rather than stretching the page. */
  .repository .ui.segment.metas,
  .repository .file-list,
  .repository .ui.table,
  .ui.attached.table,
  .ui.celled.table,
  .diff-stats,
  .commit-stat-area {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Horizontal tab/menu bars (settings, repo nav): momentum scroll. */
  .ui.secondary.pointing.menu,
  .ui.tabular.menu,
  .repository .header-wrapper .ui.tabular.menu,
  .ui.secondary.menu:not(.vertical) {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .ui.secondary.pointing.menu .item,
  .ui.tabular.menu .item {
    flex-shrink: 0;
    min-height: 44px;
  }

  /* Long URLs + inline code: wrap instead of overflow. */
  .markup a,
  .markup code,
  .repository .commit-summary,
  .commit-list .message-wrapper {
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* Pre/code blocks already scroll horizontally - just guard the radius. */
  .markup pre,
  .markup .code-block {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Images in issue/PR bodies cap at viewport width. */
  .markup img,
  .comment-body img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Forms: full-width inputs, stack two-col rows. */
  .ui.form .field,
  .ui.form .fields {
    width: 100% !important;
  }
  .ui.form .fields > .field {
    width: 100% !important;
    margin-bottom: 0.75rem;
  }
  .ui.form input[type=text],
  .ui.form input[type=email],
  .ui.form input[type=password],
  .ui.form input[type=url],
  .ui.form input[type=number],
  .ui.form textarea,
  .ui.form select {
    font-size: 16px;  /* iOS won't zoom on focus when ≥16px */
    min-height: 44px;
  }

  /* Buttons: tap target floor + spacing. */
  .ui.button {
    min-height: 44px;
    padding-top: 11px;
    padding-bottom: 11px;
  }
  .ui.buttons .button {
    min-height: 44px;
  }

  /* Issue/PR header summary: shrink title + meta. */
  .repository.view.issue .issue-title h1 {
    font-size: 1.5rem !important;
    line-height: 1.25;
    word-break: break-word;
  }
  .repository.view.issue .issue-title .index {
    font-size: 1.1rem !important;
    opacity: 0.7;
  }

  /* Comment composer: ensure the markdown editor + toolbar fit. */
  .comment.form .EasyMDEContainer .editor-toolbar {
    flex-wrap: wrap;
  }
  .EasyMDEContainer .CodeMirror,
  .comment.form textarea {
    min-height: 160px;
  }

  /* Dashboard activity feed: cards full-width. */
  .dashboard.feeds .news .ui.stackable.grid > .column,
  .feeds .news .ui.stackable.grid > .column {
    width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* Footer: stack rather than wrap awkwardly. */
  .page-footer .container {
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
    padding: 1rem 0.75rem;
  }
  .page-footer .container > * {
    margin: 0 !important;
  }

  /* Repo header (path + buttons row): wrap + spacing. */
  .repository .header-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .repository .repo-buttons {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Modal dialogs: full-screen rather than centered with margins. */
  .ui.modal {
    width: 95vw !important;
    max-width: 95vw !important;
    margin: 2.5vw !important;
  }
}

/* Very-narrow phones (iPhone SE / 360px Android). */
@media (max-width: 380px) {
  body > .page-content > .ui.container {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  #navbar .item {
    padding: 10px 8px !important;
    font-size: 13px;
  }
  .repository.view.issue .issue-title h1 {
    font-size: 1.3rem !important;
  }
}

/* Hover-only emerald glow looks heavy on touch; soften shadow on mobile. */
@media (hover: none) and (pointer: coarse) {
  .ui.label.primary,
  .ui.primary.button {
    box-shadow: 0 0 6px #10b98140;
  }
}

/* ─────────────────────────────────────────────────────────────────
 * Themes (#232, 2026-05-19): 12 palettes ported from current.help
 * + 2 fleet-new (highcontrast, matrix). Activated by
 * <html data-theme="..."> set by shim-theme.js (or pre-paint script
 * in header.tmpl).
 *
 * Each theme remaps Forgejo's CSS variable surface (do NOT introduce
 * new structural rules - we are SKINNING, not forking).
 *
 * Approach: set `--t-accent`, `--t-bg`, `--t-bg2`, `--t-text` per
 * theme; derive Forgejo's --color-* tokens via color-mix() so we get
 * hover/active/alpha variants automatically.
 *
 * color-mix support: Chrome 111+ / Safari 16.2+ / Firefox 113+ (2026
 * baseline = fine).
 * ───────────────────────────────────────────────────────────────── */

/* Shared remap macro - applied inside each [data-theme="..."] block via
   variables. The actual Forgejo --color-* overrides live in a helper
   ruleset matched by [data-theme]:not([data-theme="chaserich"]) so we
   only re-skin when a non-default theme is active. */

[data-theme="forest"],
[data-theme="midnight"],
[data-theme="rose"],
[data-theme="lavender"],
[data-theme="ember"],
[data-theme="daylight"],
[data-theme="stillness"],
[data-theme="parchment"],
[data-theme="twilight"],
[data-theme="contrast"],
[data-theme="highcontrast"],
[data-theme="matrix"] {
  /* Primary scale derived from --t-accent. */
  --color-primary: var(--t-accent);
  --color-primary-contrast: var(--t-bg);
  --color-primary-hover: color-mix(in srgb, var(--t-accent) 88%, white);
  --color-primary-active: color-mix(in srgb, var(--t-accent) 76%, white);
  --color-primary-dark-1: color-mix(in srgb, var(--t-accent) 88%, white);
  --color-primary-dark-2: color-mix(in srgb, var(--t-accent) 76%, white);
  --color-primary-dark-3: color-mix(in srgb, var(--t-accent) 64%, white);
  --color-primary-dark-4: color-mix(in srgb, var(--t-accent) 52%, white);
  --color-primary-dark-5: color-mix(in srgb, var(--t-accent) 40%, white);
  --color-primary-dark-6: color-mix(in srgb, var(--t-accent) 28%, white);
  --color-primary-dark-7: color-mix(in srgb, var(--t-accent) 18%, white);
  --color-primary-light-1: color-mix(in srgb, var(--t-accent) 85%, black);
  --color-primary-light-2: color-mix(in srgb, var(--t-accent) 70%, black);
  --color-primary-light-3: color-mix(in srgb, var(--t-accent) 55%, black);
  --color-primary-light-4: color-mix(in srgb, var(--t-accent) 40%, black);
  --color-primary-light-5: color-mix(in srgb, var(--t-accent) 30%, black);
  --color-primary-light-6: color-mix(in srgb, var(--t-accent) 20%, black);
  --color-primary-light-7: color-mix(in srgb, var(--t-accent) 12%, black);
  --color-primary-alpha-10: color-mix(in srgb, var(--t-accent) 10%, transparent);
  --color-primary-alpha-20: color-mix(in srgb, var(--t-accent) 20%, transparent);
  --color-primary-alpha-30: color-mix(in srgb, var(--t-accent) 30%, transparent);
  --color-primary-alpha-40: color-mix(in srgb, var(--t-accent) 40%, transparent);
  --color-primary-alpha-50: color-mix(in srgb, var(--t-accent) 50%, transparent);
  --color-primary-alpha-60: color-mix(in srgb, var(--t-accent) 60%, transparent);
  --color-primary-alpha-70: color-mix(in srgb, var(--t-accent) 70%, transparent);
  --color-primary-alpha-80: color-mix(in srgb, var(--t-accent) 80%, transparent);
  --color-primary-alpha-90: color-mix(in srgb, var(--t-accent) 90%, transparent);

  /* Body / chrome - derived from --t-bg + --t-bg2. */
  --color-body: var(--t-bg);
  --color-footer: color-mix(in srgb, var(--t-bg) 90%, black);
  --color-header-wrapper: color-mix(in srgb, var(--t-bg) 92%, black);
  --color-nav-bg: color-mix(in srgb, var(--t-bg) 92%, black);
  --color-secondary-nav-bg: var(--t-bg);
  --color-nav-text: var(--t-text);
  --color-nav-hover-bg: var(--t-bg2);
  --color-box-header: color-mix(in srgb, var(--t-bg) 75%, var(--t-bg2));
  --color-box-body: color-mix(in srgb, var(--t-bg) 85%, var(--t-bg2));
  --color-box-body-highlight: var(--t-bg2);
  --color-menu: color-mix(in srgb, var(--t-bg) 75%, var(--t-bg2));
  --color-card: color-mix(in srgb, var(--t-bg) 75%, var(--t-bg2));
  --color-button: color-mix(in srgb, var(--t-bg) 60%, var(--t-bg2));
  --color-hover: var(--t-bg2);
  --color-active: color-mix(in srgb, var(--t-bg2) 70%, var(--t-text));
  --color-secondary: color-mix(in srgb, var(--t-bg) 70%, var(--t-text));
  --color-secondary-bg: var(--t-bg2);
  --color-secondary-hover: var(--t-bg2);
  --color-secondary-active: color-mix(in srgb, var(--t-bg2) 80%, var(--t-text));
  --color-code-bg: color-mix(in srgb, var(--t-bg) 88%, var(--t-bg2));
  --color-markup-code-block: var(--t-bg2);
  --color-markup-code-inline: color-mix(in srgb, var(--t-bg) 92%, var(--t-bg2));

  /* Text. */
  --color-text: var(--t-text);
  --color-text-dark: color-mix(in srgb, var(--t-text) 100%, white 20%);
  --color-text-light: color-mix(in srgb, var(--t-text) 75%, var(--t-bg));
  --color-text-light-1: color-mix(in srgb, var(--t-text) 65%, var(--t-bg));
  --color-text-light-2: color-mix(in srgb, var(--t-text) 55%, var(--t-bg));
  --color-text-light-3: color-mix(in srgb, var(--t-text) 45%, var(--t-bg));
  --color-text-focus: var(--t-text);
  --color-input-text: var(--t-text);
  --color-input-background: var(--t-bg2);
  --color-input-border: color-mix(in srgb, var(--t-text) 25%, var(--t-bg));
  --color-input-border-hover: color-mix(in srgb, var(--t-text) 40%, var(--t-bg));
  --color-input-toggle-background: var(--t-bg2);

  /* Accent / highlights. */
  --color-accent: var(--t-accent);
  --color-small-accent: var(--color-primary-light-5);
  --color-highlight-fg: var(--color-primary-dark-3);
  --color-highlight-bg: var(--color-primary-alpha-20);
  --color-label-bg: color-mix(in srgb, var(--t-bg) 65%, var(--t-text));
  --color-label-hover-bg: color-mix(in srgb, var(--t-bg) 55%, var(--t-text));
  --color-label-active-bg: color-mix(in srgb, var(--t-bg) 45%, var(--t-text));

  /* Body gradient: subtle accent wash, override the default emerald/sky. */
  background-image:
    radial-gradient(circle at 15% 50%, color-mix(in srgb, var(--t-accent) 8%, transparent), transparent 25%),
    radial-gradient(circle at 85% 30%, color-mix(in srgb, var(--t-accent) 5%, transparent), transparent 25%);
}

/* Dark themes: keep --is-dark-theme + color-scheme dark. */
[data-theme="forest"],
[data-theme="midnight"],
[data-theme="rose"],
[data-theme="lavender"],
[data-theme="ember"],
[data-theme="stillness"],
[data-theme="twilight"],
[data-theme="contrast"],
[data-theme="highcontrast"],
[data-theme="matrix"] {
  --is-dark-theme: true;
  color-scheme: dark;
}

/* Light themes: flip --is-dark-theme + color-scheme. */
[data-theme="daylight"],
[data-theme="parchment"] {
  --is-dark-theme: false;
  color-scheme: light;
  --color-shadow: #00000020;
  --color-light: #00000010;
  --color-light-border: #0000001a;
  --color-overlay-backdrop: #ffffffd0;
}

/* ── Per-theme palettes ── */

[data-theme="forest"]    { --t-accent: #6b9b7a; --t-bg: #0d1a14; --t-bg2: #14241c; --t-text: #d8e6dc; }
[data-theme="midnight"]  { --t-accent: #5b8cb8; --t-bg: #0a1628; --t-bg2: #122036; --t-text: #d4e1f0; }
[data-theme="rose"]      { --t-accent: #b8897a; --t-bg: #1a1417; --t-bg2: #261d22; --t-text: #ecdcd8; }
[data-theme="lavender"]  { --t-accent: #9b7ab8; --t-bg: #151320; --t-bg2: #211d33; --t-text: #e0d8ec; }
[data-theme="ember"]     { --t-accent: #b89b5b; --t-bg: #1a1410; --t-bg2: #261e17; --t-text: #ecdfc8; }
[data-theme="daylight"]  { --t-accent: #2d7a4f; --t-bg: #f5f3ef; --t-bg2: #e8e5df; --t-text: #1a2620; }
[data-theme="stillness"] { --t-accent: #8a8a90; --t-bg: #1a1a1e; --t-bg2: #26262c; --t-text: #d8d8de; }
[data-theme="parchment"] { --t-accent: #8a6a3a; --t-bg: #f5efe4; --t-bg2: #ebe3d2; --t-text: #2a2218; }
[data-theme="twilight"]  { --t-accent: #6a7a8a; --t-bg: #12161e; --t-bg2: #1c2129; --t-text: #d4dae2; }
[data-theme="contrast"]  { --t-accent: #4fc3f7; --t-bg: #0a0a0a; --t-bg2: #161616; --t-text: #ffffff; }

/* High Contrast: WCAG AAA, yellow focus rings for visibility. */
[data-theme="highcontrast"] {
  --t-accent: #ffd60a;
  --t-bg: #000000;
  --t-bg2: #0a0a0a;
  --t-text: #ffffff;
  --color-text-light: #f5f5f5;
  --color-text-light-1: #ebebeb;
  --color-text-light-2: #d4d4d4;
  --color-text-light-3: #b8b8b8;
  --color-input-border: #ffd60a;
  --color-input-border-hover: #ffd60a;
}
[data-theme="highcontrast"] a:focus,
[data-theme="highcontrast"] button:focus,
[data-theme="highcontrast"] input:focus,
[data-theme="highcontrast"] textarea:focus,
[data-theme="highcontrast"] select:focus,
[data-theme="highcontrast"] .ui.button:focus,
[data-theme="highcontrast"] .item:focus {
  outline: 3px solid #ffd60a !important;
  outline-offset: 2px !important;
}

/* Hacker / Matrix: neon green on pure black, monospace body. */
[data-theme="matrix"] {
  --t-accent: #00ff41;
  --t-bg: #000000;
  --t-bg2: #051005;
  --t-text: #00ff41;
  --color-text-light: #1aff5c;
  --color-text-light-1: #33ff75;
  --color-text-light-2: #4dff8f;
  --color-text-light-3: #66ffa8;
  --color-input-background: #051005;
  --color-input-border: #00ff4150;
  --color-input-border-hover: #00ff41;
}
[data-theme="matrix"] body,
[data-theme="matrix"] .ui.menu,
[data-theme="matrix"] .ui.button,
[data-theme="matrix"] .ui.input input,
[data-theme="matrix"] .ui.form input,
[data-theme="matrix"] .ui.form textarea,
[data-theme="matrix"] .markup,
[data-theme="matrix"] .repository .header,
[data-theme="matrix"] code, [data-theme="matrix"] pre {
  font-family: "Fira Code", "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace !important;
}
[data-theme="matrix"] body {
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(0, 255, 65, 0.025) 0,
      rgba(0, 255, 65, 0.025) 1px,
      transparent 1px,
      transparent 3px
    ),
    radial-gradient(circle at 50% 50%, rgba(0, 255, 65, 0.06), transparent 50%) !important;
}

/* Defensive: pin #navbar and #fleet-tabs to near-pure-black for the
   contrast + highcontrast themes so no upstream Forgejo primary tint
   (the emerald that reads as "ntfy green") leaks through specificity
   wars from the bundled index.css. Chase 2026-05-19. */
[data-theme="contrast"] #navbar,
[data-theme="highcontrast"] #navbar,
[data-theme="contrast"] #fleet-tabs,
[data-theme="highcontrast"] #fleet-tabs {
  background: #050505 !important;
}
[data-theme="contrast"] #navbar {
  border-bottom: 1px solid #1a1a1a !important;
}
[data-theme="highcontrast"] #navbar {
  border-bottom: 1px solid #2a2a2a !important;
}
[data-theme="contrast"] #fleet-tabs {
  border-bottom: 1px solid #1a1a1a !important;
}
[data-theme="highcontrast"] #fleet-tabs {
  border-bottom: 1px solid #2a2a2a !important;
}

/* ─────────────────────────────────────────────────────────────────
 * Theme picker (shim-theme.js injection target)
 * Compact dot row; first-load glow pulse.
 * ───────────────────────────────────────────────────────────────── */

#theme-picker {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  margin: 0 4px;
}
#theme-picker button {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid currentColor;
  padding: 0;
  cursor: pointer;
  opacity: 0.85;
  transition: transform .12s ease, opacity .12s ease, box-shadow .12s ease;
}
#theme-picker button:hover {
  transform: scale(1.18);
  opacity: 1;
}
#theme-picker button[aria-pressed="true"] {
  opacity: 1;
  box-shadow: 0 0 0 2px var(--color-nav-bg), 0 0 0 3px currentColor;
}
@media (max-width: 768px) {
  #theme-picker {
    order: 99;
    width: 100%;
    justify-content: center;
    padding: 6px 8px;
    border-top: 1px solid var(--color-secondary);
  }
  #theme-picker button {
    width: 22px;
    height: 22px;
  }
}

/* First-load glow: ~6s pulse to invite discovery. */
@keyframes theme-picker-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--color-primary-alpha-50); }
  50%      { box-shadow: 0 0 0 8px var(--color-primary-alpha-10); }
}
#theme-picker.first-visit {
  border-radius: 999px;
  animation: theme-picker-pulse 1.6s ease-in-out infinite;
}
#theme-picker.first-visit::before {
  content: "👀 themes";
  font-size: 11px;
  opacity: 0.85;
  margin-right: 4px;
  color: var(--color-text-light);
}

/* ─────────────────────────────────────────────────────────────────
 * Fleet tab bar (#238). Second-row nav under #navbar with Epics,
 * Milestones, Kanbans, Tabula, Backlog. Theme-aware via vars.
 * Mounted by shim-tabs.js.
 *
 * Style: stacked SVG-over-label cards, matching the captioned-icon
 * style of the main topbar (see shim-nav-captions.js + .nav-caption
 * block below). Larger touch targets, mobile-friendly.
 * ───────────────────────────────────────────────────────────────── */

#fleet-tabs {
  background: var(--color-header-wrapper);
  border-bottom: 1px solid var(--color-secondary);
  width: 100%;
  z-index: 9;
  position: relative;
}
/* Fleet tab bar matches the .has-nav-caption style of the topbar
   EXACTLY (chase 2026-05-19): same icon size (22px desktop / 20px mobile),
   same label font (10.5px / 9.5px mobile), same padding (6px 10px),
   same min-width (58px). No special hover-lift or border-bottom-active. */
#fleet-tabs .fleet-tabs-inner {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  /* Soft inset shadow at L/R edges hints horizontal scroll. */
  box-shadow: inset 12px 0 12px -12px var(--color-shadow),
              inset -12px 0 12px -12px var(--color-shadow);
}
#fleet-tabs .fleet-tab {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 58px;
  padding: 6px 10px;
  color: var(--color-text-light);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  flex-shrink: 0;
  transition: color .12s ease, background .12s ease;
}
#fleet-tabs .fleet-tab:hover {
  color: var(--color-text);
  background: var(--color-hover);
  text-decoration: none;
}
#fleet-tabs .fleet-tab.active {
  color: var(--color-primary);
}
#fleet-tabs .fleet-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
#fleet-tabs .fleet-tab-icon svg {
  width: 22px;
  height: 22px;
}
#fleet-tabs .fleet-tab-label {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1;
}
@media (max-width: 768px) {
  #fleet-tabs .fleet-tabs-inner {
    padding: 0 0.25rem;
    justify-content: flex-start;
  }
  #fleet-tabs .fleet-tab {
    min-width: 50px;
    padding: 4px 6px;
  }
  #fleet-tabs .fleet-tab-icon svg {
    width: 20px;
    height: 20px;
  }
  #fleet-tabs .fleet-tab-label {
    font-size: 11.5px;
  }
}

/* Hide the duplicate Issues/Pulls/Milestones/Explore links in #navbar
   when the fleet tab bar is present. (Logo, Notifications, Create+,
   Search, User menu stay - they only live in row 1.) */
body.has-fleet-tabs #navbar > a.item[href="/issues"],
body.has-fleet-tabs #navbar > a.item[href="/pulls"],
body.has-fleet-tabs #navbar > a.item[href="/milestones"],
body.has-fleet-tabs #navbar > a.item[href="/explore/repos"],
body.has-fleet-tabs #navbar > a.item[href="/explore"],
body.has-fleet-tabs #navbar .navbar-left > a.item[href="/issues"],
body.has-fleet-tabs #navbar .navbar-left > a.item[href="/pulls"],
body.has-fleet-tabs #navbar .navbar-left > a.item[href="/milestones"],
body.has-fleet-tabs #navbar .navbar-left > a.item[href="/explore/repos"],
body.has-fleet-tabs #navbar .navbar-left > a.item[href="/explore"] {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────────
 * Main topbar captions (shim-nav-captions.js).
 * Each navbar item with an icon (logo, bell, +, avatar, etc.) gets
 * a "Main", "Alerts", "Create", "Menu" caption stacked underneath.
 * ───────────────────────────────────────────────────────────────── */

body.has-nav-captions #navbar {
  min-height: 64px;
}
/* Do NOT use display:inline-flex !important globally - it overrides
   Forgejo's .only-mobile responsive hides. Use a scoped selector that
   excludes mobile/hidden containers. */
body.has-nav-captions #navbar .item.has-nav-caption:not(.only-mobile):not(.tw-hidden),
body.has-nav-captions #navbar > a.item.has-nav-caption:not(.only-mobile),
body.has-nav-captions #navbar > a#navbar-logo.has-nav-caption,
body.has-nav-captions #navbar .navbar-left > a.item.has-nav-caption:not(.only-mobile),
body.has-nav-captions #navbar .navbar-left > a#navbar-logo.has-nav-caption,
body.has-nav-captions #navbar .navbar-right > .item.has-nav-caption:not(.only-mobile),
/* Fix A (2026-05-19): mobile bell + hamburger inside .navbar-mobile-right. */
body.has-nav-captions #navbar .navbar-mobile-right > a.item.has-nav-caption,
body.has-nav-captions #navbar .navbar-mobile-right > button.item.has-nav-caption,
body.has-nav-captions #navbar .navbar-mobile-right > #mobile-notifications-icon.has-nav-caption,
body.has-nav-captions #navbar .navbar-mobile-right > #navbar-expand-toggle.has-nav-caption {
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 58px;
  padding: 6px 10px !important;
  line-height: 1;
}
body.has-nav-captions #navbar .item.has-nav-caption svg,
body.has-nav-captions #navbar .item.has-nav-caption img.ui.avatar,
body.has-nav-captions #navbar .item.has-nav-caption img.avatar,
body.has-nav-captions #navbar #navbar-logo.has-nav-caption img {
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
}
/* Brand logo specifically - keep the original 30px size since it carries
   visual weight as the wordmark. */
body.has-nav-captions #navbar #navbar-logo.has-nav-caption img {
  width: 28px !important;
  height: 28px !important;
}

/* Mobile: don't force-display `.not-mobile` desktop items. Forgejo's
   .not-mobile { display:none } at narrow widths should win, but my
   display:inline-flex !important above overrides it. Use a media-query
   block at mobile widths to revert the display so Forgejo's responsive
   hide takes effect. */
@media (max-width: 768px) {
  body.has-nav-captions #navbar .navbar-left > a.item.has-nav-caption.not-mobile,
  body.has-nav-captions #navbar .navbar-right > .item.has-nav-caption.not-mobile,
  body.has-nav-captions #navbar .navbar-right > a.item.has-nav-caption.not-mobile,
  body.has-nav-captions #navbar .navbar-left > .item.has-nav-caption.not-mobile {
    display: none !important;
  }
}
body.has-nav-captions #navbar .item.has-nav-caption img.avatar,
body.has-nav-captions #navbar .item.has-nav-caption img.ui.avatar {
  border-radius: 50%;
}
body.has-nav-captions .nav-caption {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--color-text-light);
  line-height: 1;
  text-align: center;
  pointer-events: none;
  margin-top: 1px;
}
body.has-nav-captions #navbar .item.has-nav-caption:hover .nav-caption {
  color: var(--color-text);
}

/* Brand item ("Main") keeps the logo wider, caption gets a special touch. */
body.has-nav-captions #navbar a.item.brand.has-nav-caption {
  min-width: 70px;
}
body.has-nav-captions #navbar a.item.brand.has-nav-caption .nav-caption {
  color: var(--color-primary);
  font-weight: 600;
}

@media (max-width: 768px) {
  body.has-nav-captions #navbar {
    min-height: 60px;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  body.has-nav-captions #navbar .item.has-nav-caption {
    min-width: 50px;
    padding: 4px 6px !important;
  }
  body.has-nav-captions #navbar .item.has-nav-caption svg,
  body.has-nav-captions #navbar .item.has-nav-caption img.avatar {
    width: 20px !important;
    height: 20px !important;
  }
  body.has-nav-captions .nav-caption {
    /* Fix B (2026-05-19): 9.5px was unreadable on phones; bump to 11.5px. */
    font-size: 11.5px;
  }
}

/* Repo-icon clickable affordance (#237). When shim-repo-icons.js
   marks a stat icon container as clickable, give it a subtle hover. */
[role="link"]:hover > [class*="octicon-"] {
  filter: brightness(1.4);
}

/* ─────────────────────────────────────────────────────────────────
 * Git commit-graph branch colors (2026-05-19, chase request).
 * Replace Forgejo's default green/red/orange/yellow 16-color cycle
 * with a periwinkle → white → lavender ramp. White at index 7 is the
 * "middle purple" anchor. Branches stay visually distinguishable via
 * lightness variation while all reading as purple-family.
 *
 * Applies to /<owner>/<repo>/graph (commit graph SVG).
 * Theme-aware: matrix + daylight + parchment get slight tweaks.
 * ───────────────────────────────────────────────────────────────── */

.flow-color-16-0  { stroke: #c8d0f0; fill: #c8d0f0; }  /* lightest periwinkle */
.flow-color-16-1  { stroke: #b0bce8; fill: #b0bce8; }  /* light periwinkle */
.flow-color-16-2  { stroke: #9ba6de; fill: #9ba6de; }  /* periwinkle */
.flow-color-16-3  { stroke: #8593d4; fill: #8593d4; }  /* deeper periwinkle */
.flow-color-16-4  { stroke: #a48fc8; fill: #a48fc8; }  /* periwinkle-lavender mix */
.flow-color-16-5  { stroke: #b8a2d4; fill: #b8a2d4; }  /* pale lavender */
.flow-color-16-6  { stroke: #d6c8e9; fill: #d6c8e9; }  /* very pale lavender */
.flow-color-16-7  { stroke: #ffffff; fill: #ffffff; }  /* WHITE (middle purple) */
.flow-color-16-8  { stroke: #f0e6f7; fill: #f0e6f7; }  /* near-white lavender */
.flow-color-16-9  { stroke: #d8c4e8; fill: #d8c4e8; }  /* light lavender */
.flow-color-16-10 { stroke: #be9fd8; fill: #be9fd8; }  /* lavender */
.flow-color-16-11 { stroke: #a47ac4; fill: #a47ac4; }  /* medium lavender */
.flow-color-16-12 { stroke: #8c5cb0; fill: #8c5cb0; }  /* deep lavender */
.flow-color-16-13 { stroke: #735094; fill: #735094; }  /* dark lavender */
.flow-color-16-14 { stroke: #5d4078; fill: #5d4078; }  /* darker lavender */
.flow-color-16-15 { stroke: #4a325f; fill: #4a325f; }  /* darkest lavender */

/* Highlighted branch (hover/active) gets a brighter version. */
.flow-group.highlight.flow-color-16-0  { stroke: #e0e5f8; fill: #e0e5f8; }
.flow-group.highlight.flow-color-16-1  { stroke: #d0d8ef; fill: #d0d8ef; }
.flow-group.highlight.flow-color-16-2  { stroke: #c2cae9; fill: #c2cae9; }
.flow-group.highlight.flow-color-16-3  { stroke: #b3bce4; fill: #b3bce4; }
.flow-group.highlight.flow-color-16-4  { stroke: #c2b5dc; fill: #c2b5dc; }
.flow-group.highlight.flow-color-16-5  { stroke: #d3c4e3; fill: #d3c4e3; }
.flow-group.highlight.flow-color-16-6  { stroke: #e6dcf0; fill: #e6dcf0; }
.flow-group.highlight.flow-color-16-7  { stroke: #ffffff; fill: #ffffff; }
.flow-group.highlight.flow-color-16-8  { stroke: #f8eefe; fill: #f8eefe; }
.flow-group.highlight.flow-color-16-9  { stroke: #e6d6f0; fill: #e6d6f0; }
.flow-group.highlight.flow-color-16-10 { stroke: #d4b8e6; fill: #d4b8e6; }
.flow-group.highlight.flow-color-16-11 { stroke: #c098d6; fill: #c098d6; }
.flow-group.highlight.flow-color-16-12 { stroke: #a87dc7; fill: #a87dc7; }
.flow-group.highlight.flow-color-16-13 { stroke: #9070ad; fill: #9070ad; }
.flow-group.highlight.flow-color-16-14 { stroke: #7a5e91; fill: #7a5e91; }
.flow-group.highlight.flow-color-16-15 { stroke: #644a78; fill: #644a78; }

/* Light themes: shift the ramp darker so light shades remain visible
   against a cream/white background. */
[data-theme="daylight"] .flow-color-16-0,
[data-theme="parchment"] .flow-color-16-0  { stroke: #6878b8; fill: #6878b8; }
[data-theme="daylight"] .flow-color-16-1,
[data-theme="parchment"] .flow-color-16-1  { stroke: #5e6ea8; fill: #5e6ea8; }
[data-theme="daylight"] .flow-color-16-2,
[data-theme="parchment"] .flow-color-16-2  { stroke: #5566a0; fill: #5566a0; }
[data-theme="daylight"] .flow-color-16-3,
[data-theme="parchment"] .flow-color-16-3  { stroke: #4d5c98; fill: #4d5c98; }
[data-theme="daylight"] .flow-color-16-4,
[data-theme="parchment"] .flow-color-16-4  { stroke: #745da8; fill: #745da8; }
[data-theme="daylight"] .flow-color-16-5,
[data-theme="parchment"] .flow-color-16-5  { stroke: #8870b8; fill: #8870b8; }
[data-theme="daylight"] .flow-color-16-6,
[data-theme="parchment"] .flow-color-16-6  { stroke: #9985c5; fill: #9985c5; }
[data-theme="daylight"] .flow-color-16-7,
[data-theme="parchment"] .flow-color-16-7  { stroke: #555555; fill: #555555; }  /* charcoal instead of white on light bg */
[data-theme="daylight"] .flow-color-16-8,
[data-theme="parchment"] .flow-color-16-8  { stroke: #6a4a90; fill: #6a4a90; }
[data-theme="daylight"] .flow-color-16-9,
[data-theme="parchment"] .flow-color-16-9  { stroke: #7d5aa5; fill: #7d5aa5; }

/* Matrix theme: keep periwinkle-lavender, but slightly cooler to fit
   the neon-green chrome (commit graph still readable). */
[data-theme="matrix"] .flow-color-16-7  { stroke: #b8ffd0; fill: #b8ffd0; }  /* mint-tinted middle */

/* ─────────────────────────────────────────────────────────────────
 * Footer anchor + pagination breathing room (chase, 2026-05-20).
 * Bug: .page-footer floated mid-page when content was short
 * (small issue lists, last page of pagination). Fix: flex body so
 * .full.height grows and .page-footer is pushed to the bottom.
 * Also give .pagination 16px below for separation from the footer.
 * ───────────────────────────────────────────────────────────────── */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > .full.height {
  flex: 1 0 auto;
}
body > .page-footer {
  flex-shrink: 0;
  margin-top: auto;
  border-top: 1px solid var(--color-light-border);
}
.ui.pagination.menu,
.center.page.buttons .ui.pagination,
.paginate {
  margin-bottom: 16px;
}