/* craftdesign.group fossil skin
   A dark rendering of Fossil's default skin: same layout, same sizes, same
   menu band and submenu row. Colors are chosen for WCAG AA contrast on a
   near-black page: body text 13:1, muted text 7:1, links 7:1.
   Functional dark-theme overrides for Fossil's hardcoded light colors
   (timeline graph, diffs, chat, forum, tickets) are kept at the end.
   Instrument Sans (OFL) is self-hosted from /var/fossil/www/fonts via Caddy. */

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/instrument-sans-400.woff2) format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/instrument-sans-600.woff2) format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/instrument-sans-700.woff2) format("woff2");
}
@font-face {
  font-family: "Instrument Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/instrument-sans-400-italic.woff2) format("woff2");
}

:root {
  --bg:       #1c1e22;   /* page */
  --surface:  #272a30;   /* menu band, cards, code blocks */
  --surface2: #31353d;   /* hover states, selected rows */
  --border:   #41454e;
  --text:     #e8e9eb;   /* 13:1 on --bg */
  --muted:    #b3b8c0;   /* 7.3:1 on --bg */
  --link:     #7fb6ef;   /* 7.2:1 on --bg; Fossil default's #3779BF, lightened */
  --link-hover: #a3cbf5;
  --title:    #8cbdf0;   /* project title, like the default's #4183C4 */
  --active:   #f08a3c;   /* active menu underline; default's #D26911, lightened */
  --green:    #6fd48f;
  --red:      #f08a7e;
  --yellow:   #f2c94c;
  --font:     "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:     ui-monospace, Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: dark;
}

/* Base, matching the default skin's sizing */
body {
  margin: 0 auto;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
}
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }
a:visited { color: #a6b8e8; }
code, pre, tt, kbd, samp, var { font-family: var(--mono); }
code, tt, kbd, samp { font-size: 0.94em; }
pre { font-size: 0.92em; line-height: 1.35; overflow-x: auto; }
hr { border: none; border-top: 1px solid var(--border); }
blockquote { border-left: 3px solid var(--border); margin: 0.5em 0; padding: 0.1em 1em; }
img { max-width: 100%; }

/* Title area above the menu bar */
header { display: flex; align-items: center; gap: 14px; padding: 14px 0 12px; }
.skip-nav {
  position: absolute; top: -100%; left: 0;
  background: var(--link); color: #0b0d10;
  padding: 0.5rem 1.25rem; font-weight: 600; z-index: 9999;
  border-radius: 0 0 6px 0;
}
.skip-nav:focus { top: 0; outline: 2px solid #fff; outline-offset: -4px; }

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

.title { min-width: 0; color: var(--title); line-height: 1.2; }
.title h1, .title .project-name {
  display: inline;
  font-size: 2.2em;
  font-weight: bold;
  color: var(--title);
  text-decoration: none;
}
.title .project-name:hover { color: var(--link-hover); text-decoration: none; }
.title h1:after, .title .project-name:after {
  content: " / "; color: var(--muted); font-weight: normal;
}
span.page-title { font-size: 18px; color: var(--text); }
h1.page-title {
  font-size: 1.6em; margin-bottom: 0; display: none; color: var(--text);
}
/* Home pages carry their own heading; Fossil's "index" / "Home" title is noise */
h1.page-title.home-title { display: none !important; }
/* Long document titles go in the body instead of the title bar */
.artifact h1.page-title, .dir h1.page-title, .doc h1.page-title, .wiki h1.page-title { display: block; }
.artifact .title > .page-title, .dir .title > .page-title,
.doc .title > .page-title, .wiki .title > .page-title { display: none; }
.artifact .title h1:after, .dir .title h1:after, .doc .title h1:after, .wiki .title h1:after,
.artifact .title .project-name:after, .dir .title .project-name:after,
.doc .title .project-name:after, .wiki .title .project-name:after { content: ""; }

.status { margin-left: auto; font-size: 0.9em; }
.status a { color: var(--muted); }
.status a:hover { color: var(--text); }

/* Main menu band */
.mainmenu {
  clear: both;
  background: var(--surface) linear-gradient(#2d3037, var(--surface)) repeat-x;
  border: 1px solid var(--border);
  border-radius: 5px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  z-index: 21;
}
.mainmenu a {
  display: inline-block;
  line-height: 1.4;
  color: var(--muted);
  text-decoration: none;
  border-right: 1px solid var(--border);
  font-weight: 500;
}
.mainmenu a.active, .mainmenu a:hover {
  color: var(--text);
  border-bottom: 2px solid var(--active);
  text-decoration: none;
}
#hbbtn { font-size: 1.15em; min-width: 44px; text-align: center; }
#hbbtn[aria-expanded="true"] { color: var(--text); background: var(--surface2); }

/* Hamburger dropdown (hbmenu.js toggles display; a11y.js sets --nav-bottom) */
nav#hbdrop {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 0.5em 0.5em;
  display: none;
  font-size: 0.95em;
  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;
  max-height: 75vh;
  overflow-y: auto;
}
ul#sitemap { padding: 0.75rem 1.25rem; }
ul#sitemap > li { margin-bottom: 0.5rem; break-inside: avoid; }
ul#sitemap > li > a { font-weight: 600; color: var(--text); }
ul#sitemap ul { margin: 0.2rem 0 0 1rem; padding: 0; list-style: none; }
ul#sitemap ul li a { color: var(--link); }
nav#hbdrop ul#sitemap { column-width: 16em; column-gap: 2rem; }
nav#hbdrop a { display: inline-block; padding: 0.2rem 0; min-height: 32px; }
ul#sitemap.columns { overflow-x: hidden; }

/* Submenu row, like the default: a horizontal strip under the menu band */
.submenu, .sectionmenu {
  font-size: 0.9em;
  padding: 8px 0;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.5rem;
}
.submenu a, .submenu label, .sectionmenu a {
  padding: 6px 10px;
  text-decoration: none;
  color: var(--link);
  border: 1px solid transparent;
  border-radius: 5px;
  white-space: nowrap;
}
.submenu > a:first-child { margin-left: -10px; }
.submenu a:hover, .submenu label:hover, .sectionmenu a:hover {
  border-color: var(--border);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}
span.submenuctrl, span.submenuctrl input, select.submenuctrl { color: var(--muted); }
span.submenuctrl { white-space: nowrap; display: inline-flex; align-items: center; gap: 0.35rem; }
.submenuckbox { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--text); cursor: pointer; }
.submenu select, .submenu input[type=text], .sectionmenu select, .sectionmenu input[type=text] {
  width: auto;
  font-size: 0.95em;
  padding: 0.3em 0.5em;
}
.section {
  font-size: 1em; font-weight: bold;
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px 3px 0 0;
  padding: 9px 10px 10px;
  margin: 10px 0;
}
.sectionmenu {
  border: 1px solid var(--border);
  border-radius: 0 0 3px 3px;
  border-top: 0;
  margin-top: -10px;
  margin-bottom: 10px;
}

/* Content */
.content { padding: 12px 0; color: var(--text); }
.content h1 { font-size: 1.60em; color: var(--text); }
.content h2 { font-size: 1.45em; color: var(--text); }
.content h3 { font-size: 1.15em; color: var(--text); }
.content h4 { font-size: 1.05em; color: var(--text); }
.content h5 { font-size: 1.00em; color: var(--text); }
.content pre, table.numbered-lines > tbody > tr { hyphens: none; line-height: 1.3; }
.content ul:not(.browser) > li { list-style-type: disc; }
div.filetree ul li.dir, div.filetree ul li.subdir, div.filetree ul li.file { list-style-type: none; }
th { text-align: left; }

/* User content: wiki, embedded docs, forum posts */
.markdown blockquote, p.blockquote, .sidebar {
  background-color: var(--surface);
  border-left: 4px solid var(--link);
}
div.sidebar { outline: 1em solid var(--bg); }
.artifact > .content > p > code, .artifact > .content > .markdown > p > code, .artifact > .content > .fossil-doc > p > code,
.dir > .content > p > code, .dir > .content > .markdown > p > code,
.doc > .content > p > code, .doc > .content > .markdown > p > code, .doc > .content > .fossil-doc > p > code,
.forum > .content .markdown > p > code,
.wiki > .content > p > code, .wiki > .content > .markdown > p > code, .wiki > .content > .fossil-doc > p > code,
.content li > code, .content td > code {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 4px;
}
.artifact > .content > pre, .artifact > .content > .markdown > pre, .artifact > .content > .fossil-doc > pre,
.dir > .content > pre, .dir > .content > .markdown > pre,
.doc > .content > pre, .doc > .content > .markdown > pre, .doc > .content > .fossil-doc > pre,
.forum > .content .markdown > pre,
.wiki > .content > pre, .wiki > .content > .markdown > pre, .wiki > .content > .fossil-doc > pre,
pre.verbatim, pre.textPlain {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 8px 10px;
}
pre.verbatim { white-space: pre-wrap; }
.artifact > .content table, .dir > .content table, .doc > .content table, .wiki > .content table,
.forum > .content .markdown table {
  background-color: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0.5em;
  border-spacing: 0;
  padding: 6px;
}
.artifact > .content th, .dir > .content th, .doc > .content th, .wiki > .content th,
.forum > .content .markdown th {
  border-bottom: 1px solid var(--border);
  background-color: var(--surface2);
  padding: 4px 6px;
}
.artifact > .content tr:nth-child(odd) td, .dir > .content tr:nth-child(odd) td,
.doc > .content tr:nth-child(odd) td, .wiki > .content tr:nth-child(odd) td {
  background-color: #2b2e34;
}
.artifact > .content td, .dir > .content td, .doc > .content td, .wiki > .content td,
.forum > .content .markdown td { padding: 4px 6px; }
textarea.wikiedit { font-size: 1.1em; }

/* Forms */
input[type=text], input[type=password], input[type=email], input[type=search],
input[type=number], textarea, select {
  background: #15171a;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: var(--font);
  font-size: 1em;
  padding: 0.35em 0.6em;
}
textarea { font-family: var(--mono); }
input:focus, textarea:focus, select:focus { border-color: var(--link); outline: none; }
input[type=submit], input[type=button], button {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  cursor: pointer;
  font-family: var(--font);
  font-size: 1em;
  padding: 0.35em 1em;
}
input[type=submit]:hover, input[type=button]:hover, button:hover {
  border-color: var(--muted);
  background: #3b4049;
}
input[type=submit]:disabled, input[type=button]:disabled, button:disabled { opacity: 0.5; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.mainmenu a:focus-visible { outline-offset: -3px; }

/* Footer */
footer {
  border-top: 1px solid var(--border);
  padding: 10px;
  font-size: 0.85em;
  margin-top: 10px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Forum */
.forum a:visited { color: #a6b8e8; }
div.forumSel {
  animation: 1s linear 0s sel-fade;
  background-color: var(--bg);
  border-left: 4px solid var(--link);
}
@keyframes sel-fade { from { background-color: var(--surface2); } to { background-color: var(--bg); } }
.forum form input { margin: 0.5em 0; }
div.forumTime, div.forumHier, div.forumHierRoot {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 4px;
  color: var(--text) !important;
}
div.forumTime.forumSel, div.forumHier.forumSel { border-color: var(--link) !important; }
div.forumObs { opacity: 0.75; }
div.forumPostBody, div.forumPostBody h1, div.forumPostBody h2, div.forumPostBody h3 { color: var(--text) !important; }
.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; }
div.searchForm { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 1em 0; }

/* Tickets and reports */
table.report { cursor: auto; border: 1px solid var(--border); border-radius: 0.5em; margin: 1em 0; }
.report td, .report th { border: 0; font-size: 0.9em; padding: 8px 10px; }
.report th { cursor: pointer; background: var(--surface); }
.report thead + tbody tr:hover { background-color: var(--surface2) !important; }
body.report table.report tr td { color: var(--text) !important; }
body.report table.report a { color: var(--link) !important; }
td.tktDspLabel { width: 70px; text-align: right; overflow: hidden; color: var(--muted) !important; }
td.tktDspValue {
  text-align: left; vertical-align: top;
  background-color: var(--surface) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
td.tktDspValue pre { white-space: pre-wrap; }

/* Timeline */
span.timelineDetail { font-size: 90%; }
div.timelineDate { font-weight: bold; white-space: nowrap; color: var(--muted); }
table.timelineTable { padding: 0 3px; }
table.timelineTable tr { border-radius: 1em; }
.timelineModernCell, .timelineColumnarCell, .timelineDetailCell { border-radius: 0.5em; }
.timelineModernCell[id], .timelineColumnarCell[id], .timelineDetailCell[id] { background-color: var(--surface); }
.timelineModernDetail { opacity: 1; color: var(--muted); font-size: 0.9em; }
.timelineModernComment { color: var(--text); }
td.timelineTime { color: var(--muted); font-family: var(--mono); font-size: 0.9em; white-space: nowrap; }
span.timelineHash { font-family: var(--mono); }
tr.timelineSelected, tr.timelineSecondary { background-color: unset; }
tr.timelineSelected td, span.timelineSelected { background-color: #4a3a2a !important; }
tr.timelineSecondary td, span.timelineSecondary { background-color: #2a3a4a !important; }
tr.timelineCurrent td:first-child, tr.timelineSecondary td:first-child, tr.timelineSelected td:first-child {
  border-top-left-radius: 1em; border-bottom-left-radius: 1em;
}
tr.timelineCurrent td:last-child, tr.timelineSecondary td:last-child, tr.timelineSelected td:last-child {
  border-top-right-radius: 1em; border-bottom-right-radius: 1em;
}
tr.timelineCurrent td { border-top: 1px dashed var(--muted); border-bottom: 1px dashed var(--muted); }
tr.timelineCurrent td:first-child { border-left: 1px dashed var(--muted); }
tr.timelineCurrent td:last-child { border-right: 1px dashed var(--muted); }

/* Timeline graph: Fossil hardcodes black lines and white nodes */
.tl-node { background: var(--link) !important; border-color: var(--text) !important; }
.tl-node.leaf:after { background: var(--bg) !important; }
.tl-node.closed-leaf svg { color: var(--bg) !important; }
.tl-line { background: var(--muted) !important; }
.tl-line.warp { background: var(--yellow) !important; }
.tl-line.cherrypick.h { border-top-color: var(--muted) !important; background: transparent !important; }
.tl-line.cherrypick.v, .tl-line.dotted.v { border-left-color: var(--muted) !important; background: transparent !important; }
.tl-arrow.u, .tl-arrow.u.sm { border-bottom-color: var(--muted) !important; }
.tl-arrow.merge.l, .tl-arrow.cherrypick.l { border-right-color: var(--muted) !important; }
.tl-arrow.merge.r, .tl-arrow.cherrypick.r { border-left-color: var(--muted) !important; }
.tl-arrow.warp { border-left-color: var(--yellow) !important; }
/* Branch colors are pastel inline backgrounds; darken them so text stays readable */
table.timelineTable td[style*="background"] {
  background-image: linear-gradient(rgba(28,30,34,0.8), rgba(28,30,34,0.8)) !important;
}
.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;
}

/* Lists and tables Fossil generates */
table.sortable th, table.filelistTable th, .fileage th {
  text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); cursor: pointer;
}
table.sortable td, table.filelistTable td, .fileage td { padding: 5px 8px; border-bottom: 1px solid #2c2f35; vertical-align: top; }
table.sortable tr:hover td, .fileage tr:hover, div.filetreeline:hover { background: var(--surface) !important; }
body.branch .brlist > table > tbody > tr:hover:not(.selected) { background: var(--surface) !important; }
body.branch .brlist > table > tbody > tr.selected { background: var(--surface2) !important; }
.branch-name, span.tagDsp {
  display: inline-block; background: var(--surface2); border: 1px solid var(--border);
  border-radius: 3px; color: var(--link); font-family: var(--mono); font-size: 0.85em; padding: 0 0.3em;
}

/* Diffs: Fossil's built-in colors are pale pastels */
table.diff { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 0.9em; }
td.difflnc, td.difflna, td.difflnb { color: var(--muted); padding: 0 0.5em; text-align: right; user-select: none; border-right: 1px solid var(--border); }
td.difftext { padding: 0 0.5em; white-space: pre; }
tr.diffskip, tr.diffskip.jchunk { background: var(--surface) !important; }
tr.diffskip > td.chunkctrl .jcbutton { background: var(--surface2) !important; color: var(--muted) !important; border-radius: 3px; }
tr.diffskip > td.chunkctrl .jcbutton:hover { color: var(--text) !important; }
td.diffmkrl, td.diffmkrr, td.diffmkru { color: var(--muted); }
tr.diffadd td { background: rgba(111,212,143,0.10); }
tr.diffrm  td { background: rgba(240,138,126,0.10); }
tr.diffchng td { background: rgba(242,201,76,0.07); }
span.diffadd { color: var(--green); }
span.diffrm  { color: var(--red); }
span.diffchng { color: var(--yellow); }
td.diffln ins, td.difftxt ins, table.diff pre > ins { background-color: rgba(111,212,143,0.16) !important; }
td.diffln del, td.difftxt del, table.diff pre > del { background-color: rgba(240,138,126,0.16) !important; }
td.difftxt del > del, table.diff pre > del > del { background-color: rgba(240,138,126,0.32) !important; }
td.difftxt ins > ins, table.diff pre > ins > ins { background-color: rgba(111,212,143,0.32) !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(127,182,239,0.25) !important; }

/* Annotate / blame: inline pastel backgrounds from Fossil JS */
td.annotateDate, td.annotateUser { color: var(--muted); font-family: var(--mono); font-size: 0.85em; padding: 0 0.5em; white-space: nowrap; border-right: 1px solid var(--border); }
pre span[style*="background"], li span[style*="background"] {
  background-image: linear-gradient(rgba(28,30,34,0.7), rgba(28,30,34,0.7)) !important;
  border-radius: 3px; padding: 0.1em 0.25em;
}

/* Misc Fossil UI elements with hardcoded light colors */
div.debug { background: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--muted) !important; padding: 0.75rem; }
span.error { background: rgba(242,201,76,0.18) !important; color: var(--yellow) !important; padding: 0.1em 0.25em; border-radius: 3px; }
mark { background: rgba(242,201,76,0.25); color: var(--text); padding: 0.1em 0.25em; border-radius: 3px; }
div.sideboxTitle { color: var(--title); font-weight: 600; }
div.sidebox { background: var(--surface); border: 1px solid var(--border) !important; border-radius: 4px; margin: 0 0 1em 1.5em; padding: 0.75em; }
.disabled { color: var(--red); }
.modpending { color: var(--yellow); }
.fossil-tooltip.help-buttonlet-content { background-color: var(--surface2); color: var(--text); border: 1px solid var(--border); }
.fossil-tooltip { background: var(--surface2) !important; color: var(--text) !important; border-color: var(--border) !important; }
td.capsumRead { background: rgba(111,212,143,0.15) !important; color: var(--green); }
td.capsumWrite { background: rgba(242,201,76,0.15) !important; color: var(--yellow); }
td.capsumOff { background: rgba(179,184,192,0.1) !important; color: var(--muted); }
table.login_out { margin: 1em 0; }
td.login_out_label { color: var(--muted); padding: 0.4em 0.75em 0.4em 0; }
.help-buttonlet { color: var(--link); cursor: pointer; }

/* Wiki / file editor tabs */
.tab-container .tab-bar { display: flex; flex-wrap: wrap; gap: 0.25rem; border-bottom: 1px solid var(--border); }
.tab-container .tab-button {
  padding: 0.4em 0.9em; border: 1px solid transparent; border-bottom: none; border-radius: 5px 5px 0 0;
  background: transparent; color: var(--muted); font-family: var(--font); font-size: 0.95em; cursor: pointer; 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); }
#fossil-status-bar { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; color: var(--muted); font-family: var(--mono); font-size: 0.85em; padding: 0.4em 0.75em; margin: 0.5em 0; }
.wikiedit-options, .fileedit-options { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding: 0.5em; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; margin-bottom: 0.5em; }
.wikiedit-options .input-with-label, .fileedit-options .input-with-label { display: flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
#wikiedit-tab-content textarea, #fileedit-tab-content textarea { min-height: 300px; width: 100%; }
.tab-container fieldset { border: 1px solid var(--border); border-radius: 4px; }
.tab-container fieldset legend { color: var(--muted); }
button.wikiedit-content-reload, button.fileedit-content-reload { min-width: unset !important; max-width: unset !important; }

/* Chat: Fossil sets inline pastel backgrounds per user */
body.chat .message-widget-content[style*="background"],
body.chat .message-widget-tab[style*="background"] {
  background-image: linear-gradient(rgba(28,30,34,0.75), rgba(28,30,34,0.75)) !important;
}
body.chat .message-widget-content {
  background: var(--surface) !important; border: 1px solid var(--border) !important;
  border-radius: 6px !important; color: var(--text) !important; padding: 0.5em 0.75em !important;
}
body.chat .message-widget-tab { background: transparent !important; color: var(--muted) !important; border: none !important; font-size: 0.9em !important; }
body.chat .message-widget-tab[style*="background"] { background-image: none !important; }
body.chat .message-widget-tab .xfrom { color: var(--link) !important; font-weight: 600 !important; }
body.chat #chat-input-line-wrapper { border: 1px solid var(--border) !important; border-radius: 6px !important; background: #15171a !important; }
body.chat #chat-input-line-wrapper:focus-within { border-color: var(--link) !important; }
body.chat .chat-input-field { border: none !important; background: transparent !important; color: var(--text) !important; font-family: var(--font) !important; font-size: 1em !important; }
body.chat .cbutton { border: 1px solid var(--border) !important; background: var(--surface) !important; border-radius: 4px !important; }
body.chat .cbutton:hover { background: var(--surface2) !important; }
body.chat fieldset { border: 1px solid var(--border) !important; border-radius: 4px !important; background: var(--surface) !important; }
body.chat .menu-entry { background: var(--surface) !important; border: 1px solid var(--border) !important; color: var(--text) !important; }
body.chat .menu-entry:hover, body.chat .menu-entry.parent { background: var(--surface2) !important; }
body.chat .message-widget .match { background: rgba(242,201,76,0.25) !important; color: var(--text) !important; }
body.chat .chat-message-popup { background: var(--surface2) !important; border: 1px solid var(--border) !important; color: var(--text) !important; }
body.chat .message-widget-content img { max-width: 100% !important; border-radius: 4px !important; }

/* Screen sizes, as in the default skin */
@media screen and (max-width: 600px) {
  body { padding-left: 12px; padding-right: 12px; }
  .content { font-size: 0.95em; }
  header { gap: 10px; padding: 10px 0 8px; }
  div.logo img, img.logo-mark { width: 36px; height: 36px; }
  .title h1, .title .project-name { font-size: 1.5em; }
  .title > .page-title { display: inline; }
  .artifact .title > .page-title, .dir .title > .page-title,
  .doc .title > .page-title, .wiki .title > .page-title { display: none; }
  .mainmenu a { padding: 8px 10px; }
  .mainmenu { padding: 4px; }
  nav#hbdrop ul#sitemap, ul#sitemap.columns { columns: 1 !important; column-width: auto !important; }
  .submenu { padding: 6px 0; }
  td.timelineTime { font-size: 0.8em; }
}
@media screen and (min-width: 600px) {
  body { padding-left: 20px; padding-right: 20px; }
  .mainmenu a { padding: 8px 20px; }
  .mainmenu { padding: 10px; }
  .content dd, .content dt, .content div, .content li, .content p, .content table { line-height: 1.45em; }
  /* Keep running text a comfortable width on wide screens */
  .doc > .content, .wiki > .content, .forum > .content, .artifact > .content { max-width: 70em; }
  .doc > .content > p, .doc > .content > .markdown > p, .doc > .content > .fossil-doc > p,
  .doc > .content > ol, .doc > .content > ul, .doc > .content > .markdown > ol, .doc > .content > .markdown > ul,
  .wiki > .content > p, .wiki > .content > .markdown > p, .wiki > .content > .fossil-doc > p,
  .wiki > .content > ol, .wiki > .content > ul, .wiki > .content > .markdown > ol, .wiki > .content > .markdown > ul,
  .artifact > .content > .markdown > p, .artifact > .content > .markdown > ol, .artifact > .content > .markdown > ul,
  .doc > .content > .markdown > table, .wiki > .content > .markdown > table, .artifact > .content > .markdown > table {
    margin-left: 30pt; margin-right: 30pt;
  }
  .doc > .content > pre, .doc > .content > .markdown > pre, .doc > .content > .fossil-doc > pre,
  .wiki > .content > pre, .wiki > .content > .markdown > pre,
  .artifact > .content > .markdown > pre { margin-left: 40pt; margin-right: 30pt; }
  .forum > .content .markdown > pre { margin-left: 20pt; }
  .doc > .content h1, .wiki .content h1, .artifact .content h1 { margin-left: 10pt; }
  .doc > .content h2, .wiki .content h2, .artifact .content h2 { margin-left: 15pt; }
  .doc > .content h3, .wiki .content h3, .artifact .content h3 { margin-left: 20pt; }
  .doc > .content > blockquote, .wiki > .content > blockquote { margin-left: 50pt; }
  .doc > .content > .markdown > blockquote, .wiki > .content > .markdown > blockquote { margin-left: 40pt; }
  .content .pikchr-wrapper, div.pikchr-wrapper.indent:not(.source) { margin-left: 40pt; }
  div.pikchr-wrapper.center:not(.source), div.pikchr-wrapper.float-right:not(.source) { margin-left: 0; }
}