Artifact [735fac278c]

Artifact 735fac278c460f945b97d000914e81e25012597022fd7c3d033a0eaa5f87eb10:

• File skin/css.txt — part of check-in [5e434ca14e] at 2026-04-07 19:19:41 on branch trunk — Dark theme overhaul: buttons, forms, chat, diffs, and page-specific fixes

  Comprehensive dark-mode styling pass covering:

  - Submenu link-buttons styled as pills with hover/active/focus states - Custom dark-themed checkboxes replacing browser defaults - Submit/action buttons with hover, active, and disabled states - Wiki editor: tab bar, toolbar layout, fieldsets - Chat: centered layout, blue-tinted bubbles, styled input/buttons, mobile - Timeline: fileage/tree-view hover overrides (was bright white) - Diff: subtle green/red ins/del, diffskip rows, SBS marker columns - Annotate: dark overlay on inline pastel backgrounds - Forum: search form layout, post containers, debug panel - Tickets: tktDspValue dark surface instead of light grey - Security audit: capsumRead/Write/Off with dark-appropriate colors - Search form: proper flex layout with text input priority - Sitemap dropdown: multi-column with mobile single-column fallback - Header: logo image from /logo instead of F text mark - span.error/mark: dark-mode yellow highlight treatment - Various Fossil built-in light-theme color overrides (user: dmestas, size: 39329) [annotate] [blame] [check-ins using]

/* ── craftdesign.group fossil skin ── */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --bg:       #0f1117;
  --surface:  #1a1d27;
  --surface2: #22263a;
  --border:   #2a2d3e;
  --accent:   #6c8ebf;
  --accent2:  #4a7c9e;
  --text:     #e2e8f0;
  --muted:    #8892a4;
  --green:    #4ade80;
  --red:      #f87171;
  --yellow:   #fbbf24;
  --radius:   8px;
  --font:     'Inter', system-ui, -apple-system, sans-serif;
  --mono:     'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  color-scheme: dark;
}

/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: #8fb3d9; text-decoration: underline; }
a:visited { color: #7ea5cc; }

code, pre, tt, kbd {
  font-family: var(--mono);
  font-size: 0.875em;
}
pre {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  overflow-x: auto;
  color: var(--text);
}
blockquote {
  border-left: 3px solid var(--border);
  margin: 0.5rem 0;
  padding: 0.25rem 1rem;
  color: var(--muted);
}
hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.5rem 0;
}

/* ── Header ── */
header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}

.logo { flex-shrink: 0; }
img.logo-mark {
  width: 32px; height: 32px;
  border-radius: 6px;
  display: block;
  object-fit: cover;
}
.hub-link { text-decoration: none; }
.hub-link:hover .logo-mark { opacity: 0.85; }

.title {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  min-width: 0;
}
.project-name {
  font-family: var(--mono);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
.project-name:hover { color: var(--accent); text-decoration: none; }

span.page-title {
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Hide the duplicate h1 page-title that fossil inserts after the nav */
h1.page-title { display: none; }

.status {
  flex-shrink: 0;
  font-size: 0.8rem;
}
.status a { color: var(--muted); }
.status a:hover { color: var(--text); text-decoration: none; }

/* ── Main nav ── */
nav.mainmenu {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  z-index: 21;
  font-size: 0.82rem;
  font-weight: 500;
  min-height: 44px;
  overflow-x: auto;
}
nav.mainmenu a {
  color: var(--muted);
  text-decoration: none;
  padding: 0 0.75rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  display: inline-flex;
  align-items: center;
  min-height: 44px;          /* WCAG 2.5.5 minimum touch target */
}
nav.mainmenu a:hover {
  color: var(--text);
  text-decoration: none;
  border-bottom-color: var(--border);
}
nav.mainmenu a.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Hamburger button — visually distinct, 44×44 touch target */
#hbbtn {
  color: var(--muted);
  font-size: 1.15rem;
  padding: 0 0.875rem;
  border-bottom: 2px solid transparent !important;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 0.25rem;
  border-right: 1px solid var(--border);
}
#hbbtn:hover { color: var(--text); }
#hbbtn[aria-expanded="true"] {
  color: var(--accent);
  background: rgba(108, 142, 191, 0.08);
}

/* Hamburger dropdown — position:fixed so it overlays content regardless of
   DOM structure. --nav-bottom is set by a11y.js to the nav bar's bottom edge
   and updated on resize, so the dropdown always appears directly below the nav. */
nav#hbdrop {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  display: none;
  position: fixed;
  top: var(--nav-bottom, 88px);
  left: 0;
  right: 0;
  z-index: 200;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  overflow-x: hidden;
}
nav#hbdrop a {
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  min-height: 44px;        /* WCAG 2.5.5 minimum touch target */
  color: var(--muted);
  font-size: 0.875rem;
  border-bottom: 1px solid var(--border);
}
nav#hbdrop a:last-child { border-bottom: none; }
nav#hbdrop a:hover { color: var(--text); background: var(--surface2); text-decoration: none; }

/* ── Sitemap (hamburger dropdown + /sitemap page) ── */
ul#sitemap {
  padding: 0.5rem 1rem 0.5rem 1.5rem;
  font-size: 0.85rem;
}
ul#sitemap > li {
  margin-bottom: 0.75rem;
  break-inside: avoid;
}
ul#sitemap > li > a {
  font-weight: 600;
  color: var(--text);
  font-size: 0.9rem;
}
ul#sitemap > li > a:hover {
  color: var(--accent);
}
ul#sitemap ul {
  margin: 0.2rem 0 0 1rem;
  padding: 0;
  list-style: none;
}
ul#sitemap ul li {
  margin: 0.15rem 0;
}
ul#sitemap ul li a {
  color: var(--muted);
  font-size: 0.82rem;
}
ul#sitemap ul li a:hover {
  color: var(--text);
}
/* Dropdown version: constrain columns and add padding */
nav#hbdrop ul#sitemap {
  column-width: 16em;
  column-gap: 2rem;
  padding: 1rem 1.5rem;
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
}
/* Sitemap page: prevent horizontal overflow */
ul#sitemap.columns {
  overflow-x: hidden;
}

@media (max-width: 640px) {
  nav#hbdrop ul#sitemap,
  ul#sitemap.columns {
    columns: 1 !important;
    column-width: auto !important;
    padding: 0.75rem 1rem;
  }
}

/* ── Content area ── */
div.content {
  flex: 1;
  max-width: 960px;
  margin: 1rem auto 0;
  padding: 0 1.5rem 1.5rem;
  width: 100%;
}
div.content p { margin: 0.5rem 0; }
div.content h1, div.content h2, div.content h3,
div.content h4, div.content h5 {
  color: var(--text);
  font-weight: 600;
  margin: 1.25rem 0 0.5rem;
  letter-spacing: -0.01em;
}

/* Submenu bar */
div.submenu, div.sectionmenu {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.4rem 1rem;
  margin: 1rem auto 1rem;
  max-width: 960px;
  font-size: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  align-items: center;
}
div.submenu a, div.sectionmenu a {
  color: var(--muted);
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-weight: 500;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
div.submenu a:hover, div.sectionmenu a:hover {
  color: var(--text);
  background: var(--surface2);
  border-color: var(--muted);
  text-decoration: none;
}
div.submenu a:active, div.sectionmenu a:active {
  background: var(--border);
}
div.submenu a:visited, div.sectionmenu a:visited {
  color: var(--muted);
}
div.submenu select, div.submenu input[type=text],
div.sectionmenu select, div.sectionmenu input[type=text] {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.8rem;
  padding: 0.35rem 0.5rem;
  transition: border-color 0.15s;
}
div.submenu select:hover, div.submenu input[type=text]:hover,
div.sectionmenu select:hover, div.sectionmenu input[type=text]:hover {
  border-color: var(--muted);
}
div.submenu select:focus, div.submenu input[type=text]:focus,
div.sectionmenu select:focus, div.sectionmenu input[type=text]:focus {
  border-color: var(--accent);
}

/* Checkbox labels in submenu */
.submenuckbox {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  transition: color 0.15s;
}
.submenuckbox:hover { color: var(--text); }

/* Custom checkbox appearance */
.submenuckbox input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface2);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.submenuckbox input[type="checkbox"]:hover {
  border-color: var(--muted);
}
.submenuckbox input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.submenuckbox input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.submenuckbox input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Inline labeled inputs (Max:, Tag Filter:) */
span.submenuctrl {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 500;
}
span.submenuctrl input[type="text"] {
  width: auto;
}

/* ── Timeline ── */
table.timelineTable {
  width: 100%;
  border-spacing: 0 2px;
}
/* Fix Fossil's built-in card styles:
   Base class: padding:0.75em, border-radius:1em (big pill shape) — tighten both.
   [id] variant: background:#efefef (light grey) — make transparent for dark bg. */
.timelineModernCell,
.timelineColumnarCell,
.timelineDetailCell {
  padding: 0.4em 0.6em;
  border-radius: var(--radius);
}
.timelineModernCell[id],
.timelineColumnarCell[id],
.timelineDetailCell[id] {
  background-color: transparent;
}
/* Detail text has opacity:0.75 in Fossil's built-in CSS. On dark bg that
   drops effective contrast to ~2:1. Remove it and set a solid muted color. */
.timelineModernDetail {
  opacity: 1;
  color: var(--muted);
}
.timelineModernComment {
  color: var(--text);
}
tr.timelineCurrent td {
  background: rgba(108, 142, 191, 0.08);
  border-left: 2px solid var(--accent) !important;
}
tr.timelineSelected td {
  background: rgba(108, 142, 191, 0.12);
  border: 1px solid var(--accent);
  box-shadow: none;
}
/* Fossil also sets .timelineSelected on the tr itself with bright yellow */
.timelineSelected {
  background: transparent !important;
}
.timelineSecondary td { background: rgba(74, 222, 128, 0.05); }
td.timelineTime {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.78rem;
  vertical-align: top;
  text-align: right;
  padding-right: 0.75rem;
  white-space: nowrap;
}
td.timelineGraph { width: 20px; vertical-align: top; }
span.timelineLeaf, span.timelineHash { font-weight: 600; }
span.timelineHash { font-family: var(--mono); font-size: 0.82rem; color: var(--muted); }
.timelineDate {
  color: var(--muted);
  font-size: 0.75rem;
  font-family: var(--mono);
  padding: 0.75rem 0 0.25rem;
}

/* ── Tables ── */
table.sortable, table.filelistTable, table.branchlistTable,
table.taglistTable, table.userlistTable {
  width: 100%;
  border-collapse: collapse;
}
table.sortable th, table.filelistTable th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
table.sortable td, table.filelistTable td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(42, 45, 62, 0.5);
  vertical-align: top;
  font-size: 0.85rem;
}
table.sortable tr:hover td { background: var(--surface); }

/* File age & tree view — Fossil hardcodes light-theme hover colors */
.fileage tr:hover {
  background: var(--surface) !important;
}
.fileage th {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  padding: 0.5rem 0.75rem;
}
.fileage td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(42, 45, 62, 0.5);
  vertical-align: top;
}
div.filetreeline:hover {
  background: var(--surface) !important;
}
/* Branch list hover — Fossil uses light yellow */
body.branch .brlist > table > tbody > tr:hover:not(.selected) {
  background: var(--surface) !important;
}
body.branch .brlist > table > tbody > tr.selected {
  background: rgba(108, 142, 191, 0.12) !important;
}

/* ── File diff ── */
table.diff {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 0.8rem;
}
td.difflnc, td.difflna, td.difflnb {
  color: var(--muted);
  padding: 0 0.5rem;
  text-align: right;
  user-select: none;
  border-right: 1px solid var(--border);
  width: 1%;
  white-space: nowrap;
}
td.difftext { padding: 0 0.5rem; white-space: pre; }
/* Diff skip/chunk rows — Fossil uses aliceblue */
tr.diffskip,
tr.diffskip.jchunk {
  background: var(--surface) !important;
}
tr.diffskip > td.chunkctrl .jcbutton {
  background: var(--surface2) !important;
  border-radius: 4px;
  color: var(--muted) !important;
}
tr.diffskip > td.chunkctrl .jcbutton:hover {
  background: var(--border) !important;
  color: var(--text) !important;
}
/* SBS diff marker columns (the > character for changed lines) */
td.diffmkrl, td.diffmkrr, td.diffmkru {
  color: var(--muted);
}
tr.diffadd td { background: rgba(74, 222, 128, 0.08); }
tr.diffrm  td { background: rgba(248, 113, 113, 0.08); }
tr.diffchng td { background: rgba(251, 191, 36, 0.06); }
span.diffadd { color: var(--green); }
span.diffrm  { color: var(--red); }
span.diffchng { color: var(--yellow); }

/* ── Forms & inputs ── */
input[type=text], input[type=password], input[type=email],
input[type=search], textarea, select {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.875rem;
  padding: 0.45rem 0.75rem;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
}
input[type=text]:focus, input[type=password]:focus,
input[type=email]:focus, textarea:focus, select:focus {
  border-color: var(--accent);
}
input[type=submit], input[type=button], button {
  background: var(--accent);
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: #fff;
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.45rem 1.1rem;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
input[type=submit]:hover, input[type=button]:hover, button:hover {
  background: #5a7eb0;
  border-color: rgba(255,255,255,0.1);
}
input[type=submit]:active, input[type=button]:active, button:active {
  background: var(--accent2);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}
input[type=submit]:disabled, input[type=button]:disabled, button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
textarea { font-family: var(--mono); min-height: 120px; resize: vertical; }

/* ── Wiki ── */
div.wiki {
  line-height: 1.75;
}
div.wiki p { margin: 0.75rem 0; }
div.wiki ul, div.wiki ol { margin: 0.5rem 0 0.5rem 1.5rem; }
div.wiki li { margin: 0.2rem 0; }
div.wiki table {
  border-collapse: collapse;
  margin: 1rem 0;
}
div.wiki th, div.wiki td {
  border: 1px solid var(--border);
  padding: 0.4rem 0.75rem;
}
div.wiki th { background: var(--surface); }

/* ── Ticket ── */
table.report {
  width: 100%;
  border-collapse: collapse;
}
table.report th {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
  color: var(--muted);
}
table.report td {
  border: 1px solid var(--border);
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
}
table.report tr:hover td { background: var(--surface); }

/* ── Annotation / blame ── */
table.annotation { width: 100%; border-collapse: collapse; }
td.annotateDate, td.annotateUser {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.78rem;
  padding: 0 0.5rem;
  white-space: nowrap;
  border-right: 1px solid var(--border);
}
/* Fossil JS sets inline background-color on annotation version spans using
   light pastels (pink, green, etc.). Same dark overlay technique as branches. */
pre span[style*="background"],
li span[style*="background"] {
  background-image: linear-gradient(
    rgba(15, 17, 23, 0.7),
    rgba(15, 17, 23, 0.7)
  ) !important;
  border-radius: 3px;
  padding: 0.1em 0.25em;
}

/* ── Debug / admin options panel ── */
/* Fossil uses bright yellow (#ffffcc) for admin debug panels                */
div.debug {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius);
  color: var(--muted) !important;
  padding: 0.75rem;
}

/* ── Highlights & marks ── */
/* span.error: Fossil uses yellow bg for template errors / placeholders.
   mark: browser default is yellow — both unreadable on dark backgrounds.   */
span.error {
  background: rgba(251, 191, 36, 0.15) !important;
  color: var(--yellow) !important;
  padding: 0.1em 0.25em;
  border-radius: 3px;
}
mark {
  background: rgba(251, 191, 36, 0.2);
  color: var(--text);
  padding: 0.1em 0.25em;
  border-radius: 3px;
}

/* ── Misc ── */
div.sideboxTitle { color: var(--accent); font-weight: 600; }
div.sidebox {
  background: var(--surface);
  border: 1px solid var(--border) !important;
  border-radius: var(--radius);
  margin: 0 0 1rem 1.5rem;
  padding: 0.75rem;
}
.disabled { color: var(--red); }
.modpending { color: var(--yellow); }

/* Branch/tag badges */
.branch-name, span.tagDsp {
  display: inline-block;
  background: rgba(108, 142, 191, 0.1);
  border: 1px solid rgba(108, 142, 191, 0.25);
  border-radius: 4px;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.75rem;
  padding: 0.1rem 0.4rem;
}

/* Login page */
table.login_out { margin: 2rem auto; }
td.login_out_label { color: var(--muted); padding: 0.4rem 0.75rem 0.4rem 0; font-size: 0.875rem; }
td.login_out_value { padding: 0.3rem 0; }

/* ── Footer ── */
footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border);
  margin-top: 3rem;
  font-size: 0.75rem;
  color: var(--muted);
  font-family: var(--mono);
}
.footer-project { color: var(--muted); }
.footer-meta { color: rgba(136, 146, 164, 0.6); }

/* ════════════════════════════════════════════════════════
   ACCESSIBILITY FIXES
   ════════════════════════════════════════════════════════ */

/* ── Skip navigation (WCAG 2.4.1) ── */
.skip-nav {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--accent);
  color: #fff;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 500;
  z-index: 9999;
  border-radius: 0 0 var(--radius) 0;
  text-decoration: none;
  transition: top 0.1s;
}
.skip-nav:focus {
  top: 0;
  outline: 2px solid #fff;
  outline-offset: -4px;
}

/* ── Focus indicators (WCAG 2.4.7 / 2.4.11) ──
   Fossil has no :focus styles at all — keyboard users see nothing.        */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}
/* Nav links: inset ring looks cleaner inside the bar */
nav.mainmenu a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}
/* Form elements already have a border so offset 0 works better */
input:focus-visible,
button:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 0;
}

/* ── Fix visited-link contrast (#5a7aaa → #7ea5cc, ~4.6:1 on --surface) ── */
a:visited { color: #7ea5cc; }

/* ── Branch/tag badge contrast fix ──
   Old: #6c8ebf on rgba(108,142,191,0.1)+#1a1d27 ≈ 3.4:1 — fails AA.
   New: #8fb3d9 on same tinted surface ≈ 5.2:1 — passes AA.             */
.branch-name, span.tagDsp {
  color: #8fb3d9;
  border-color: rgba(143, 179, 217, 0.3);
}

/* ════════════════════════════════════════════════════════
   TIMELINE GRAPH — DARK THEME OVERRIDES
   Fossil's built-in graph CSS hardcodes light-theme black/white colors.
   Every rule below overrides one of those hardcoded values.
   ════════════════════════════════════════════════════════ */

/* ── Node dots ──
   Default: background:#fff, border:1px solid #000
   Branch nodes also receive inline style.backgroundColor = p.bg (e.g. #e8f0c7).
   !important beats inline styles, giving us uniform accent-colored dots.     */
.tl-node {
  background: var(--accent) !important;
  border-color: var(--accent2) !important;
}
/* Leaf indicator (inner filled square): was #000, now white for contrast */
.tl-node.leaf:after {
  background: #fff !important;
}
/* Closed-leaf SVG icon color */
.tl-node.closed-leaf svg {
  color: var(--text) !important;
}
/* Selected node stays red — red is visible on dark and is intentional feedback */

/* ── Vertical connector lines ──
   Default: background:#000 — completely invisible on dark background.        */
.tl-line {
  background: var(--muted) !important;
}
.tl-line.warp {
  background: var(--yellow) !important;
}
/* Cherry-pick and dotted lines use border rather than background */
.tl-line.cherrypick.h {
  border-top-color: var(--muted) !important;
  background: transparent !important;
}
.tl-line.cherrypick.v {
  border-left-color: var(--muted) !important;
  background: transparent !important;
}
.tl-line.dotted.v {
  border-left-color: var(--muted) !important;
  background: transparent !important;
}

/* ── Arrows ──
   All use border-color tricks; defaults are #000, invisible on dark.
   Branch-specific arrows get inline borderBottomColor set by JS when p.fg
   is non-empty — !important overrides those too for consistency.            */
.tl-arrow.u    { border-bottom-color: var(--muted) !important; }
.tl-arrow.u.sm { border-bottom-color: var(--muted) !important; }
.tl-arrow.merge.l      { border-right-color: var(--muted) !important; }
.tl-arrow.merge.r      { border-left-color:  var(--muted) !important; }
.tl-arrow.cherrypick.l { border-right-color: var(--muted) !important; }
.tl-arrow.cherrypick.r { border-left-color:  var(--muted) !important; }
/* Warp arrow: was dark maroon #600000, now yellow warning tone */
.tl-arrow.warp { border-left-color: var(--yellow) !important; }

/* ── Branch row colors (dark-mode adaptation) ──
   Fossil JS sets style.backgroundColor = p.bg (light pastels, e.g. "#e8f0c7")
   on td#mc<n>. CSS background-image layers sit on TOP of background-color, so
   we overlay a semi-transparent dark layer — the pastel bleeds through as a
   subtle hue that identifies the branch without wrecking text contrast.       */
table.timelineTable td[style*="background"] {
  background-image: linear-gradient(
    rgba(15, 17, 23, 0.75),
    rgba(15, 17, 23, 0.75)
  ) !important;
}

/* Re-assert our intentional row highlights with !important since we're
   now in an !important cascade for timeline cells.                          */
tr.timelineCurrent td {
  background: rgba(108, 142, 191, 0.08) !important;
  border-left: 2px solid var(--accent) !important;
}
tr.timelineSelected td {
  background: rgba(108, 142, 191, 0.12) !important;
  border: 1px solid var(--accent) !important;
  box-shadow: none !important;
}

/* ── Tooltip ──
   Default: white background with black border — flashes bright on dark page. */
.tl-tooltip {
  background: var(--surface2) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important;
}

/* ── Mobile / responsive ────────────────────────────────────────────────── */

/* On small screens: hide inline nav links, show only the hamburger button.
   The full link list is accessible via the hamburger dropdown.              */
@media (max-width: 640px) {
  nav.mainmenu > a:not(#hbbtn) {
    display: none;
  }
  #hbbtn {
    border-right: none;
    margin-right: 0;
  }

  /* Tighten header for small screens */
  header {
    padding: 0.75rem 1rem;
    gap: 0.75rem;
  }
  span.page-title {
    display: none;   /* project name alone is enough on narrow viewports */
  }

  /* Content: reduce side padding so text isn't cramped */
  div.content {
    padding: 0 1rem 1rem;
    margin-top: 0.75rem;
  }

  /* Submenu: stack items on mobile */
  div.submenu, div.sectionmenu {
    padding: 0.35rem 0.75rem;
    gap: 0.15rem;
  }

  /* Timeline: narrow the time column */
  td.timelineTime {
    font-size: 0.72rem;
    padding-right: 0.5rem;
  }
  td.timelineGraph { width: 16px; }
}

/* Medium screens: keep inline links but reduce padding a bit */
@media (max-width: 900px) {
  div.content {
    padding: 0 1.25rem 1.25rem;
  }
  div.submenu, div.sectionmenu {
    margin: 0.75rem auto;
  }
}

/* ── Wiki / Fileedit tab container ─────────────────────────────────────── */

/* Tab bar: the row of tab buttons */
.tab-container .tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0 0.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}
.tab-container .tab-button {
  padding: 0.4rem 0.85rem;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 500;
  font-family: var(--font);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  margin-bottom: -1px;
}
.tab-container .tab-button:hover {
  color: var(--text);
  background: var(--surface);
}
.tab-container .tab-button.selected {
  color: var(--text);
  background: var(--surface);
  border-color: var(--border);
  border-bottom-color: var(--surface);
}
.tab-container .tab-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}

/* Status bar */
#fossil-status-bar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.78rem;
  padding: 0.4rem 0.75rem;
  margin: 0.5rem 0;
}

/* Editor toolbar row */
.wikiedit-options,
.fileedit-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
}

/* Label + control pairs inside toolbar */
.wikiedit-options .input-with-label,
.fileedit-options .input-with-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--muted);
  white-space: nowrap;
}
.wikiedit-options .input-with-label label,
.fileedit-options .input-with-label label {
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 500;
}
.wikiedit-options select,
.fileedit-options select {
  width: auto;
  padding: 0.3rem 0.5rem;
  font-size: 0.8rem;
}

/* Save / action buttons inside editor toolbar */
.wikiedit-options button,
.fileedit-options button {
  padding: 0.35rem 0.85rem;
  font-size: 0.82rem;
  white-space: nowrap;
}
/* Discard & Reload — destructive-ish, make it subtler by default */
button.wikiedit-content-reload,
button.fileedit-content-reload {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
}
button.wikiedit-content-reload:hover,
button.fileedit-content-reload:hover {
  background: var(--border);
  border-color: var(--muted);
}
/* Let reload button size naturally instead of forced min/max-width */
button.wikiedit-content-reload,
button.fileedit-content-reload {
  min-width: unset !important;
  max-width: unset !important;
}

/* Help buttonlets (the ? icons) */
.help-buttonlet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.7rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s, border-color 0.15s;
}
.help-buttonlet:hover {
  color: var(--text);
  border-color: var(--muted);
}

/* Edit status area (page name + links row) */
#wikiedit-edit-status,
#fileedit-edit-status {
  font-size: 0.85rem;
  padding: 0.25rem 0;
}

/* Editor textarea */
#wikiedit-tab-content textarea,
#fileedit-tab-content textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--mono);
  padding: 0.75rem;
  min-height: 300px;
}

/* Local edits dropdown */
.tab-container select[id*="local"] {
  width: 100%;
}

/* Fieldsets in wiki editor (Page types, Create new page, etc.) */
.tab-container fieldset {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem;
}
.tab-container fieldset legend {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0 0.4rem;
}

/* ── Chat page ──────────────────────────────────────────────────────────── */

/* Center the chat within a readable max-width */
body.chat #chat-messages-wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 0.5rem 1rem;
}

/* Message bubbles — override inline pastel colors with dark overlay */
body.chat .message-widget-content[style*="background"],
body.chat .message-widget-tab[style*="background"] {
  background-image: linear-gradient(
    rgba(15, 17, 23, 0.78),
    rgba(15, 17, 23, 0.78)
  ) !important;
}
/* Fallback for messages without inline color */
body.chat .message-widget-content {
  background: rgba(108, 142, 191, 0.1) !important;
  border: 1px solid rgba(108, 142, 191, 0.18) !important;
  border-radius: var(--radius) !important;
  color: var(--text) !important;
  padding: 0.5rem 0.75rem !important;
  margin-top: 0 !important;
}
body.chat .message-widget-content[style*="background"] {
  border-color: rgba(108, 142, 191, 0.18) !important;
}

/* Message header (sender / timestamp bar) */
body.chat .message-widget-tab {
  background: transparent !important;
  color: var(--muted) !important;
  font-size: 0.78rem !important;
  padding: 0.35rem 0.5rem 0.15rem !important;
  border-radius: var(--radius) var(--radius) 0 0 !important;
  border: none !important;
}
body.chat .message-widget-tab[style*="background"] {
  background: transparent !important;
  background-image: none !important;
}
body.chat .message-widget-tab .xfrom {
  color: var(--accent) !important;
  font-weight: 600 !important;
}
body.chat .message-widget-tab .msgid {
  color: var(--muted) !important;
  opacity: 0.6;
}
body.chat .message-widget-tab .timestamp {
  color: var(--muted) !important;
}

/* Message widget spacing */
body.chat .message-widget {
  margin-bottom: 0.75rem !important;
}

/* Input area — center, sticky at bottom */
body.chat #chat-input-area {
  max-width: 800px;
  margin: 0 auto;
  padding: 0.5rem 1rem 0.75rem;
  width: 100%;
}
body.chat #chat-input-line-wrapper {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: var(--surface) !important;
  padding: 0.25rem !important;
}
body.chat .chat-input-field {
  border: none !important;
  background: transparent !important;
  color: var(--text) !important;
  font-family: var(--font) !important;
  font-size: 0.875rem !important;
  padding: 0.4rem 0.5rem !important;
}
body.chat .chat-input-field:focus {
  outline: none !important;
  box-shadow: none !important;
}
body.chat #chat-input-line-wrapper:focus-within {
  border-color: var(--accent) !important;
}

/* Chat toolbar buttons (emoji icons) — inside input wrapper */
body.chat #chat-buttons-wrapper {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-top: 1px solid var(--border);
  margin-top: 0.25rem;
}
body.chat .cbutton {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px !important;
  height: 36px !important;
  border-radius: 6px !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  cursor: pointer !important;
  font-size: 1rem !important;
  transition: background 0.15s, border-color 0.15s;
}
body.chat .cbutton:hover {
  background: var(--surface2) !important;
  border-color: var(--muted) !important;
}

/* "Previous 50 messages" / "All previous messages" load buttons */
body.chat fieldset {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background: var(--surface) !important;
  max-width: 800px;
  margin: 0.5rem auto !important;
  padding: 0.5rem !important;
}
body.chat fieldset button {
  font-size: 0.82rem;
  padding: 0.35rem 0.75rem;
}

/* Settings menu entries */
body.chat .menu-entry {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  margin-bottom: 0.25rem !important;
  padding: 0.5rem 0.75rem !important;
  color: var(--text) !important;
}
body.chat .menu-entry.parent {
  background: var(--surface2) !important;
  font-weight: 500;
}
body.chat .menu-entry:hover {
  background: var(--surface2) !important;
  border-color: var(--muted) !important;
}

/* Chat view panels (settings, preview, search) */
body.chat .chat-view {
  max-width: 800px;
  margin: 0 auto;
}

/* Search match highlight */
body.chat .message-widget .match {
  background: rgba(251, 191, 36, 0.2) !important;
  color: var(--text) !important;
}

/* Message popup (timestamp/delete controls) */
body.chat .chat-message-popup {
  background: var(--surface2) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  color: var(--text) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important;
}

/* Images in chat — constrain and round */
body.chat .message-widget-content img {
  max-width: 100% !important;
  border-radius: var(--radius) !important;
}

/* File attachment area */
body.chat #chat-input-file-area {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Mobile: tighten chat layout */
@media (max-width: 640px) {
  body.chat #chat-messages-wrapper {
    padding: 0.25rem 0.5rem;
  }
  body.chat #chat-input-area {
    padding: 0.5rem 0.5rem 0.5rem;
  }
  body.chat .cbutton {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.9rem !important;
  }
  body.chat .message-widget-content {
    padding: 0.4rem 0.6rem !important;
  }
}

/* ── Forum page ─────────────────────────────────────────────────────────── */

/* Forum search form */
div.searchForm {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 600px;
  margin: 1rem auto;
  padding: 0.75rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
div.searchForm input[type="text"] {
  flex: 3;
  min-width: 0;
}
div.searchForm select {
  flex: 1;
  width: auto;
  min-width: 0;
}
div.searchForm input[type="submit"] {
  flex-shrink: 0;
}

/* Forum post collapser border uses rgba(0,0,0,0.2) — near-invisible on dark */
.forum-post-collapser {
  border-color: var(--border) !important;
  background: var(--surface) !important;
  color: var(--muted) !important;
}
.forum-post-collapser:hover {
  background: var(--surface2) !important;
  color: var(--text) !important;
}

/* Forum post containers — Fossil uses light-blue pastels (#cceeff, #e0f0ff)
   on .forumTime, .forumSel, and .forumObs. Override all to dark variants.   */
div.forumTime {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius);
  color: var(--text) !important;
}
div.forumTime.forumSel {
  background: var(--surface2) !important;
  border-color: var(--accent) !important;
}
div.forumTime.forumObs {
  background: var(--surface) !important;
  opacity: 0.7;
}
/* Forum post body — Fossil may set inline bg on the post wrapper */
div.forumPostBody {
  color: var(--text) !important;
}
div.forumPostBody h1, div.forumPostBody h2,
div.forumPostBody h3, div.forumPostBody h4 {
  color: var(--text) !important;
}
/* Forum edit/reply/delete buttons row */
div.forumPostBody .forumPostControls a {
  color: var(--muted);
}

/* ── Diff view ──────────────────────────────────────────────────────────── */
/* Fossil built-in diff colors (#a0e4b2, #ffc0c0, #ffe8e8) are very light —
   override ALL variants including nested ins>ins, del>del, .edit, and
   the pre>ins/pre>del used in wdiff (wiki diff) pages.                     */
td.diffln ins, td.difftxt ins,
table.diff pre > ins           { background-color: rgba(74,222,128,0.12) !important; }
td.diffln del, td.difftxt del,
table.diff pre > del           { background-color: rgba(248,113,113,0.12) !important; }
td.difftxt del > del,
table.diff pre > del > del     { background-color: rgba(248,113,113,0.25) !important; }
td.difftxt ins > ins,
table.diff pre > ins > ins     { background-color: rgba(74,222,128,0.25) !important; }
td.difftxt del > del.edit,
td.difftxt ins > ins.edit,
table.diff pre > del > del.edit,
table.diff pre > ins > ins.edit { background-color: rgba(108,142,191,0.2) !important; }

/* ── Security audit capability summary table ───────────────────────────── */
/* Fossil uses bright pastel cell backgrounds for read/write/off states.    */
td.capsumRead {
  background: rgba(74, 222, 128, 0.12) !important;
  color: var(--green);
}
td.capsumWrite {
  background: rgba(251, 191, 36, 0.12) !important;
  color: var(--yellow);
}
td.capsumOff {
  background: rgba(136, 146, 164, 0.1) !important;
  color: var(--muted);
}

/* ── Ticket / report pages ──────────────────────────────────────────────── */
/* Fossil hardcodes light-grey bg and black/blue text on ticket pages        */
body.tkt td.tktDspValue {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
body.tkt td.tktDspValue a { color: var(--accent) !important; }
body.tkt td.tktDspLabel {
  color: var(--muted) !important;
  text-align: right;
  padding-right: 0.75rem;
  font-weight: 500;
}
body.report table.report tr td { color: var(--text) !important; }
body.report table.report a     { color: var(--accent) !important; }