/**
 * Atlas Classic - a theme for Redmine
 * Copyright (C) 2026 Samuel Zamvil
 *
 * This program is free software; you can redistribute it and/or modify it under
 * the terms of the GNU General Public License as published by the Free Software
 * Foundation; either version 2 of the License, or (at your option) any later
 * version.
 *
 * This program is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE. See the COPYING file for the full text of the
 * licence, or https://www.gnu.org/licenses/old-licenses/gpl-2.0.en.html
 */

@import url("/assets/themes/atlas-classic/fonts-d28fc810.css");
@import url("/assets/application-c183e617.css");
@import url("/assets/themes/atlas-classic/branding-815e1d61.css");

/* =============================================================
   Atlas Classic — Redmine 7 theme
   Structure per redmine.org/wiki/HowTo_create_a_custom_Redmine_theme
   themes/atlas-classic/stylesheets/application.css
   themes/atlas-classic/javascripts/theme.js
   Ships light with an automatic dark variant.
   Every colour below is derived from the token block; retint the whole
   theme by editing --oc-gray-* (neutrals) and --oc-blue-* (accent).
   ============================================================= */

:root {
  --oc-gray-0: oklch(0.985 0.012 255);
  --oc-gray-1: oklch(0.968 0.012 255);
  --oc-gray-2: oklch(0.945 0.012 255);
  --oc-gray-3: oklch(0.912 0.012 255);
  --oc-gray-4: oklch(0.868 0.012 255);
  --oc-gray-5: oklch(0.775 0.012 255);
  --oc-gray-6: oklch(0.54 0.012 255);
  --oc-gray-7: oklch(0.475 0.012 255);
  --oc-gray-8: oklch(0.34 0.012 255);
  --oc-gray-9: oklch(0.24 0.012 255);
  --oc-blue-0: oklch(0.965 0.020 258);
  --oc-blue-1: oklch(0.93 0.040 258);
  --oc-blue-2: oklch(0.88 0.070 258);
  --oc-blue-3: oklch(0.82 0.100 258);
  --oc-blue-4: oklch(0.75 0.130 258);
  --oc-blue-5: oklch(0.68 0.150 258);
  --oc-blue-6: oklch(0.62 0.160 258);
  --oc-blue-7: oklch(0.56 0.160 258);
  --oc-blue-8: oklch(0.5 0.150 258);
  --oc-blue-9: oklch(0.44 0.140 258);
  --oc-indigo-0: oklch(0.965 0.020 258);
  --oc-indigo-1: oklch(0.93 0.040 258);
  --oc-indigo-2: oklch(0.88 0.070 258);
  --oc-indigo-3: oklch(0.82 0.100 258);
  --oc-indigo-4: oklch(0.75 0.130 258);
  --oc-indigo-5: oklch(0.68 0.150 258);
  --oc-indigo-6: oklch(0.62 0.160 258);
  --oc-indigo-7: oklch(0.56 0.160 258);
  --oc-indigo-8: oklch(0.5 0.150 258);
  --oc-indigo-9: oklch(0.44 0.140 258);
  --oc-violet-0: oklch(0.965 0.020 258);
  --oc-violet-1: oklch(0.93 0.040 258);
  --oc-violet-2: oklch(0.88 0.070 258);
  --oc-violet-3: oklch(0.82 0.100 258);
  --oc-violet-4: oklch(0.75 0.130 258);
  --oc-violet-5: oklch(0.68 0.150 258);
  --oc-violet-6: oklch(0.62 0.160 258);
  --oc-violet-7: oklch(0.56 0.160 258);
  --oc-violet-8: oklch(0.5 0.150 258);
  --oc-violet-9: oklch(0.44 0.140 258);
  --oc-cyan-0: oklch(0.965 0.020 258);
  --oc-cyan-1: oklch(0.93 0.040 258);
  --oc-cyan-2: oklch(0.88 0.070 258);
  --oc-cyan-3: oklch(0.82 0.100 258);
  --oc-cyan-4: oklch(0.75 0.130 258);
  --oc-cyan-5: oklch(0.68 0.150 258);
  --oc-cyan-6: oklch(0.62 0.160 258);
  --oc-cyan-7: oklch(0.56 0.160 258);
  --oc-cyan-8: oklch(0.5 0.150 258);
  --oc-cyan-9: oklch(0.44 0.140 258);
  --fonts-main: "Public Sans", ui-sans-serif, system-ui, sans-serif;
  --color-current-marker: var(--oc-blue-6);
  --t-bg: var(--oc-gray-1);
  --t-surface: #fff;
  --t-surface-2: var(--oc-gray-0);
  --t-border: var(--oc-gray-3);
  --t-border-strong: var(--oc-gray-4);
  --t-text: var(--oc-gray-9);
  --t-dim: var(--oc-gray-6);
  --t-accent: var(--oc-blue-7);
  --t-accent-soft: var(--oc-blue-0);
  --t-on-accent: #fff;
  --t-chrome: oklch(0.30 0.045 258);
  --t-chrome-text: oklch(0.93 0.012 258);
  --t-rail: #fff;
  --t-rail-text: oklch(0.42 0.02 258);
  --t-shadow: 0 1px 2px oklch(0 0 0 / 0.06), 0 4px 12px oklch(0 0 0 / 0.06);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-rm-mode="light"]) {
  --oc-gray-0: oklch(0.205 0.016 255);
  --oc-gray-1: oklch(0.245 0.016 255);
  --oc-gray-2: oklch(0.285 0.016 255);
  --oc-gray-3: oklch(0.335 0.016 255);
  --oc-gray-4: oklch(0.39 0.016 255);
  --oc-gray-5: oklch(0.5 0.016 255);
  --oc-gray-6: oklch(0.63 0.016 255);
  --oc-gray-7: oklch(0.78 0.016 255);
  --oc-gray-8: oklch(0.87 0.016 255);
  --oc-gray-9: oklch(0.93 0.016 255);
  --oc-blue-0: oklch(0.28 0.020 258);
  --oc-blue-1: oklch(0.34 0.040 258);
  --oc-blue-2: oklch(0.41 0.070 258);
  --oc-blue-3: oklch(0.48 0.100 258);
  --oc-blue-4: oklch(0.56 0.130 258);
  --oc-blue-5: oklch(0.63 0.150 258);
  --oc-blue-6: oklch(0.7 0.160 258);
  --oc-blue-7: oklch(0.76 0.160 258);
  --oc-blue-8: oklch(0.82 0.150 258);
  --oc-blue-9: oklch(0.88 0.140 258);
  --oc-indigo-0: oklch(0.28 0.020 258);
  --oc-indigo-1: oklch(0.34 0.040 258);
  --oc-indigo-2: oklch(0.41 0.070 258);
  --oc-indigo-3: oklch(0.48 0.100 258);
  --oc-indigo-4: oklch(0.56 0.130 258);
  --oc-indigo-5: oklch(0.63 0.150 258);
  --oc-indigo-6: oklch(0.7 0.160 258);
  --oc-indigo-7: oklch(0.76 0.160 258);
  --oc-indigo-8: oklch(0.82 0.150 258);
  --oc-indigo-9: oklch(0.88 0.140 258);
  --oc-violet-0: oklch(0.28 0.020 258);
  --oc-violet-1: oklch(0.34 0.040 258);
  --oc-violet-2: oklch(0.41 0.070 258);
  --oc-violet-3: oklch(0.48 0.100 258);
  --oc-violet-4: oklch(0.56 0.130 258);
  --oc-violet-5: oklch(0.63 0.150 258);
  --oc-violet-6: oklch(0.7 0.160 258);
  --oc-violet-7: oklch(0.76 0.160 258);
  --oc-violet-8: oklch(0.82 0.150 258);
  --oc-violet-9: oklch(0.88 0.140 258);
  --oc-cyan-0: oklch(0.28 0.020 258);
  --oc-cyan-1: oklch(0.34 0.040 258);
  --oc-cyan-2: oklch(0.41 0.070 258);
  --oc-cyan-3: oklch(0.48 0.100 258);
  --oc-cyan-4: oklch(0.56 0.130 258);
  --oc-cyan-5: oklch(0.63 0.150 258);
  --oc-cyan-6: oklch(0.7 0.160 258);
  --oc-cyan-7: oklch(0.76 0.160 258);
  --oc-cyan-8: oklch(0.82 0.150 258);
  --oc-cyan-9: oklch(0.88 0.140 258);
  --fonts-main: "Public Sans", ui-sans-serif, system-ui, sans-serif;
  --color-current-marker: var(--oc-blue-6);
  --t-bg: var(--oc-gray-0);
  --t-surface: oklch(0.235 0.016 255);
  --t-surface-2: var(--oc-gray-1);
  --t-border: var(--oc-gray-2);
  --t-border-strong: var(--oc-gray-4);
  --t-text: var(--oc-gray-9);
  --t-dim: var(--oc-gray-6);
  --t-accent: var(--oc-blue-5);
  --t-accent-soft: var(--oc-blue-1);
  --t-on-accent: oklch(0.16 0.01 255);
  --t-chrome: oklch(0.160 0.016 255);
  --t-chrome-text: var(--oc-gray-8);
  --t-rail: oklch(0.160 0.016 255);
  --t-rail-text: var(--oc-gray-7);
  --t-shadow: 0 1px 2px oklch(0 0 0 / 0.5), 0 2px 8px oklch(0 0 0 / 0.4);
  }
}

:root[data-rm-mode="dark"] {
  --oc-gray-0: oklch(0.205 0.016 255);
  --oc-gray-1: oklch(0.245 0.016 255);
  --oc-gray-2: oklch(0.285 0.016 255);
  --oc-gray-3: oklch(0.335 0.016 255);
  --oc-gray-4: oklch(0.39 0.016 255);
  --oc-gray-5: oklch(0.5 0.016 255);
  --oc-gray-6: oklch(0.63 0.016 255);
  --oc-gray-7: oklch(0.78 0.016 255);
  --oc-gray-8: oklch(0.87 0.016 255);
  --oc-gray-9: oklch(0.93 0.016 255);
  --oc-blue-0: oklch(0.28 0.020 258);
  --oc-blue-1: oklch(0.34 0.040 258);
  --oc-blue-2: oklch(0.41 0.070 258);
  --oc-blue-3: oklch(0.48 0.100 258);
  --oc-blue-4: oklch(0.56 0.130 258);
  --oc-blue-5: oklch(0.63 0.150 258);
  --oc-blue-6: oklch(0.7 0.160 258);
  --oc-blue-7: oklch(0.76 0.160 258);
  --oc-blue-8: oklch(0.82 0.150 258);
  --oc-blue-9: oklch(0.88 0.140 258);
  --oc-indigo-0: oklch(0.28 0.020 258);
  --oc-indigo-1: oklch(0.34 0.040 258);
  --oc-indigo-2: oklch(0.41 0.070 258);
  --oc-indigo-3: oklch(0.48 0.100 258);
  --oc-indigo-4: oklch(0.56 0.130 258);
  --oc-indigo-5: oklch(0.63 0.150 258);
  --oc-indigo-6: oklch(0.7 0.160 258);
  --oc-indigo-7: oklch(0.76 0.160 258);
  --oc-indigo-8: oklch(0.82 0.150 258);
  --oc-indigo-9: oklch(0.88 0.140 258);
  --oc-violet-0: oklch(0.28 0.020 258);
  --oc-violet-1: oklch(0.34 0.040 258);
  --oc-violet-2: oklch(0.41 0.070 258);
  --oc-violet-3: oklch(0.48 0.100 258);
  --oc-violet-4: oklch(0.56 0.130 258);
  --oc-violet-5: oklch(0.63 0.150 258);
  --oc-violet-6: oklch(0.7 0.160 258);
  --oc-violet-7: oklch(0.76 0.160 258);
  --oc-violet-8: oklch(0.82 0.150 258);
  --oc-violet-9: oklch(0.88 0.140 258);
  --oc-cyan-0: oklch(0.28 0.020 258);
  --oc-cyan-1: oklch(0.34 0.040 258);
  --oc-cyan-2: oklch(0.41 0.070 258);
  --oc-cyan-3: oklch(0.48 0.100 258);
  --oc-cyan-4: oklch(0.56 0.130 258);
  --oc-cyan-5: oklch(0.63 0.150 258);
  --oc-cyan-6: oklch(0.7 0.160 258);
  --oc-cyan-7: oklch(0.76 0.160 258);
  --oc-cyan-8: oklch(0.82 0.150 258);
  --oc-cyan-9: oklch(0.88 0.140 258);
  --fonts-main: "Public Sans", ui-sans-serif, system-ui, sans-serif;
  --color-current-marker: var(--oc-blue-6);
  --t-bg: var(--oc-gray-0);
  --t-surface: oklch(0.235 0.016 255);
  --t-surface-2: var(--oc-gray-1);
  --t-border: var(--oc-gray-2);
  --t-border-strong: var(--oc-gray-4);
  --t-text: var(--oc-gray-9);
  --t-dim: var(--oc-gray-6);
  --t-accent: var(--oc-blue-5);
  --t-accent-soft: var(--oc-blue-1);
  --t-on-accent: oklch(0.16 0.01 255);
  --t-chrome: oklch(0.160 0.016 255);
  --t-chrome-text: var(--oc-gray-8);
  --t-rail: oklch(0.160 0.016 255);
  --t-rail-text: var(--oc-gray-7);
  --t-shadow: 0 1px 2px oklch(0 0 0 / 0.5), 0 2px 8px oklch(0 0 0 / 0.4);
}

:root { --t-radius: 6px; --t-box-radius: 10px; }

/* ===== Layout shell ===== */
body { min-inline-size: 0; }
#wrapper { min-inline-size: 640px; }
.top-menu__links ul { flex-wrap: nowrap; }
.top-menu__links a { white-space: nowrap; }
fieldset.box legend { white-space: nowrap; }
#header h1 { overflow: visible; }
body { font-family: var(--fonts-main); font-size: 0.875rem; color: var(--t-text); background: var(--t-bg); -webkit-font-smoothing: antialiased; }
#wrapper { background: var(--t-bg); }
a, a:link, a:visited { color: var(--t-accent-text); text-decoration: none; }
a:hover, a:active { color: var(--t-accent-text); text-decoration: underline; }
h1,h2,h3,h4 { font-family: var(--fonts-main); letter-spacing: -0.012em; color: var(--t-text); }
#content h1, #content h2, #content h3, #content h4 { color: var(--t-text); }
#content h2 { font-size: 1.125rem; font-weight: 650; margin-block-end: 16px; }

nav.top-menu, #top-menu { background: var(--t-chrome); border-block-end: 1px solid var(--t-border); padding-inline: 22px; min-block-size: 34px; }
.top-menu__links a, .top-menu__links a:link, .top-menu__links a:visited { color: var(--t-chrome-text); border-radius: 6px; padding-block: 3px; font-size: 0.8125rem; }
.top-menu__links a:hover { background: color-mix(in oklab, var(--t-chrome-text) 12%, transparent); color: var(--t-chrome-text); text-decoration: none; }
.top-menu__links svg.icon-svg { stroke: var(--t-chrome-text); }

#header { background: var(--t-surface); border-block-end: 1px solid var(--t-border); padding: 14px 22px 12px; color: var(--t-text); }
body.has-main-menu #header { padding-block-end: 2.35rem; }
#header a, #header a:hover { color: var(--t-text); }
#header h1 { font-size: 1.375rem; font-weight: 650; color: var(--t-text); letter-spacing: -0.012em; }
#header h1 .breadcrumbs { color: var(--t-dim); font-size: 0.6875rem; letter-spacing: .06em; text-transform: uppercase; }
#quick-search { color: var(--t-dim); }
#quick-search label a { color: var(--t-dim); font-size: 0.75rem; }
#quick-search input[type=text] { min-inline-size: 190px; }

#main-menu { inset-inline-start: 22px; }
#main-menu ul { background: transparent; gap: 2px; }
#main-menu li a { color: var(--t-dim); border-radius: 6px 6px 0 0; padding-block: 6px; padding-inline: 12px; font-weight: 500; font-size: 0.8125rem; border: 0; }
#main-menu li a:hover { background: var(--t-surface-2); color: var(--t-text); }
#main-menu li a.selected, #main-menu li a.selected:hover { background: transparent; color: var(--t-accent-text); box-shadow: inset 0 -2px 0 var(--t-accent); font-weight: 600; }
#main-menu li a.new-object { background: var(--t-accent); border: 0; color: var(--t-on-accent); border-radius: 6px; font-weight: 600; }
#main-menu li a.new-object:hover { background: var(--t-accent); color: var(--t-on-accent); filter: brightness(1.08); }
#main-menu .menu-children { background: var(--t-surface); border: 1px solid var(--t-border); border-radius: 6px; box-shadow: var(--t-shadow); padding-block: 4px; }

#sidebar { background: var(--t-bg); border-inline-start: 1px solid var(--t-border); padding-inline: 18px 14px; padding-block-start: 16px; }
#sidebar h3 { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .08em; color: var(--t-dim); font-weight: 700; }
#sidebar a.selected { background: var(--t-accent-soft); color: var(--t-accent-text); border-radius: 6px; box-shadow: none; padding-inline: 8px; }
#sidebar hr { background: var(--t-border); }

#content { background: var(--t-surface); padding: 22px 24px; }
#footer { background: var(--t-bg); border-block-start: 1px solid var(--t-border); color: var(--t-dim); padding-block: 14px; font-size: 0.75rem; }

/* ===== Surfaces ===== */
div.box, fieldset.box, #activity dl, .splitcontent > div > .box {
  background: var(--t-surface); border: 1px solid var(--t-border); border-radius: 10px;
  padding: 16px 18px; box-shadow: 0 1px 2px oklch(0 0 0 / .05);
}
fieldset.box legend { color: var(--t-dim); font-weight: 700; font-size: 0.75rem; text-transform: uppercase; letter-spacing: .06em; }
div.box h3, .box h3 { margin-block-start: 0; font-size: 0.9375rem; }

/* ===== Tables ===== */
table.list, .table-list { border: 1px solid var(--t-border); border-radius: 10px; overflow: hidden; border-collapse: separate; border-spacing: 0; background: var(--t-surface); }
table.list th, .table-list-header { background: var(--t-surface-2); color: var(--t-dim); border-block-end: 1px solid var(--t-border); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; padding: 8px 10px; position: sticky; inset-block-start: 0; z-index: 5; }
table.list td { border-block-start: 1px solid var(--t-border); padding-block: 9px; color: var(--t-text); }
table.list tbody tr:hover, table.list tbody tr.odd:hover, table.list tbody tr.even:hover { background: var(--t-accent-soft); }
table.list tbody tr.odd { background: transparent; }
table.list tbody tr.even { background: color-mix(in oklab, var(--oc-gray-1) 45%, transparent); }
table.list td.id a { color: var(--t-dim); font-variant-numeric: tabular-nums; }
table.list td.subject a, table.list td.name a { color: var(--t-text); font-weight: 500; }
table.list td.subject a:hover { color: var(--t-accent-text); }
tr.issue.closed td.subject a, tr.issue.closed a { text-decoration: line-through; color: var(--t-dim); }

/* ===== Forms & buttons ===== */
input[type=text], input[type=password], input[type=email], input[type=number], input[type=date], select, textarea {
  background: var(--t-surface); color: var(--t-text); border: 1px solid var(--t-border-strong); border-radius: 6px;
  padding: 6px 9px; font-family: inherit; font-size: 0.8125rem; transition: border-color .15s, box-shadow .15s;
}
input[type=text]:focus, input[type=password]:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--t-accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--t-accent) 22%, transparent);
}
input[type=submit], input[type=button], a.button,
button:not(.tab-left):not(.tab-right):not(.icon-only):not(.jstSpacer):not([class*="jstb_"]) {
  background: var(--t-accent); color: var(--t-on-accent); border: 0; border-radius: 6px;
  padding: 6px 14px; font-family: inherit; font-weight: 600; font-size: 0.8125rem; cursor: pointer; transition: filter .15s;
}
input[type=submit]:hover, a.button:hover,
button:not(.tab-left):not(.tab-right):not(.icon-only):not(.jstSpacer):not([class*="jstb_"]):hover { filter: brightness(1.08); text-decoration: none; color: var(--t-on-accent); }
input[type=submit].secondary, button.secondary, a.button.secondary { background: var(--t-surface-2); color: var(--t-text); border: 1px solid var(--t-border-strong); }
label { color: var(--t-dim); font-weight: 600; font-size: 0.8125rem; }

/* ===== Messages & chrome ===== */
div.flash, .flash { border-radius: 6px; border: 1px solid var(--t-border); padding: 10px 14px; font-weight: 500; }
div.flash.notice { background: color-mix(in oklab, var(--oc-green-5) 14%, var(--t-surface)); border-color: color-mix(in oklab, var(--oc-green-5) 40%, transparent); color: var(--t-text); }
div.flash.error { background: color-mix(in oklab, var(--oc-red-5) 14%, var(--t-surface)); border-color: color-mix(in oklab, var(--oc-red-5) 40%, transparent); color: var(--t-text); }
p.pagination, span.pagination { color: var(--t-dim); font-size: 0.75rem; }
.pagination a { padding: 2px 7px; border-radius: 6px; }
.pagination .current { background: var(--t-accent); color: var(--t-on-accent); padding: 2px 7px; border-radius: 6px; }
div.tabs ul { border-block-end: 1px solid var(--t-border); }
div.tabs ul li a.selected { background: var(--t-surface); border-color: var(--t-border); border-block-end-color: var(--t-surface); color: var(--t-accent-text); }

/* ===== Issue detail ===== */
div.issue { background: var(--t-surface); border: 1px solid var(--t-border); border-radius: 10px; padding: 16px 18px; }
div.issue div.subject h3 { font-size: 1.25rem; font-weight: 650; letter-spacing: -0.012em; }
div.issue .attributes th, div.issue table.attributes th { color: var(--t-dim); font-weight: 600; }
#history .journal, div.journal { border-block-start: 1px solid var(--t-border); padding-block: 14px; }
.badge, .tag-label-color, span.badge { border-radius: 999px; }

/* ===== Status & priority pills (theme.js adds .rm-pill) ===== */
.rm-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 0.6875rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; background: var(--t-surface-2); color: var(--t-dim); border: 1px solid var(--t-border); }
.rm-pill[data-s="new"] { background: color-mix(in oklab, var(--oc-blue-5) 16%, var(--t-surface)); color: var(--oc-blue-8); border-color: transparent; }
.rm-pill[data-s="inprogress"] { background: color-mix(in oklab, var(--oc-yellow-5) 20%, var(--t-surface)); color: var(--oc-orange-9); border-color: transparent; }
.rm-pill[data-s="resolved"] { background: color-mix(in oklab, var(--oc-teal-5) 18%, var(--t-surface)); color: var(--oc-teal-9); border-color: transparent; }
.rm-pill[data-s="feedback"] { background: color-mix(in oklab, var(--oc-grape-5) 16%, var(--t-surface)); color: var(--oc-grape-9); border-color: transparent; }
.rm-pill[data-s="closed"] { background: color-mix(in oklab, var(--oc-green-5) 16%, var(--t-surface)); color: var(--oc-green-9); border-color: transparent; }
.rm-pill[data-s="rejected"] { background: color-mix(in oklab, var(--oc-red-5) 14%, var(--t-surface)); color: var(--oc-red-9); border-color: transparent; }

/* ===== Global nav rail (built by theme.js) ===== */
#rm-rail { box-sizing: border-box; position: fixed; inset-block: 0; inset-inline-start: 0; inline-size: 216px; background: var(--t-rail); border-inline-end: 1px solid var(--t-border); display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; z-index: 40; transition: inline-size .18s ease; }
#rm-rail .rm-rail-brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; color: var(--t-rail-text); font-weight: 700; font-size: 0.9375rem; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; }
#rm-rail .rm-rail-mark { inline-size: 24px; block-size: 24px; border-radius: 7px; background: var(--t-accent); flex: 0 0 auto; }
#rm-rail a { display: flex; align-items: center; gap: 10px; padding: 7px 9px; border-radius: 6px; color: var(--t-rail-text); font-size: 0.8125rem; font-weight: 500; white-space: nowrap; overflow: hidden; }
#rm-rail a:hover { background: color-mix(in oklab, var(--t-rail-text) 10%, transparent); text-decoration: none; }
#rm-rail a.selected { background: var(--t-accent-soft); color: var(--t-accent-text); font-weight: 600; }
#rm-rail .rm-rail-sec { font-size: 0.625rem; text-transform: uppercase; letter-spacing: .1em; color: var(--t-dim); padding: 14px 9px 5px; white-space: nowrap; overflow: hidden; }
#rm-rail .rm-rail-toggle { margin-block-start: auto; }
body.rm-has-rail #wrapper { margin-inline-start: 216px; transition: margin-inline-start .18s ease; }
body.rm-rail-collapsed #rm-rail { inline-size: 52px; }
body.rm-rail-collapsed #wrapper { margin-inline-start: 52px; }
body.rm-rail-collapsed #rm-rail .rm-rail-label, body.rm-rail-collapsed #rm-rail .rm-rail-sec { opacity: 0; }

/* ===== Board mode (theme.js) ===== */
.rm-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 12px; overflow-x: auto; padding-block: 4px; align-items: start; }
.rm-board-col { background: var(--t-surface-2); border: 1px solid var(--t-border); border-radius: 10px; padding: 10px; min-block-size: 120px; }
.rm-board-col > h4 { margin: 0 0 10px; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .08em; color: var(--t-dim); display: flex; justify-content: space-between; }
.rm-card { background: var(--t-surface); border: 1px solid var(--t-border); border-radius: 6px; padding: 10px 11px; margin-block-end: 8px; box-shadow: 0 1px 2px oklch(0 0 0 / .05); }
.rm-card .rm-card-subject { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--t-text); line-height: 1.4; margin-block-end: 8px; }
.rm-card .rm-card-meta { display: flex; align-items: center; gap: 8px; font-size: 0.6875rem; color: var(--t-dim); }
.rm-viewswitch { display: inline-flex; gap: 0; border: 1px solid var(--t-border-strong); border-radius: 6px; overflow: hidden; margin-inline-start: 8px; }
.rm-viewswitch button { background: var(--t-surface) !important; color: var(--t-dim) !important; border: 0 !important; border-radius: 0 !important; padding: 4px 11px !important; font-size: 0.75rem !important; }
.rm-viewswitch button.on { background: var(--t-accent) !important; color: var(--t-on-accent) !important; }

/* ===== Login ===== */
#login-form { background: var(--t-surface); border: 1px solid var(--t-border); border-radius: 10px; box-shadow: var(--t-shadow); padding: 28px 30px; max-inline-size: 380px; margin-block-start: 8vh; }
#login-form table { inline-size: 100%; }
#login-form input[type=text], #login-form input[type=password] { inline-size: 100%; box-sizing: border-box; }
#login-form input[type=submit] { inline-size: 100%; padding-block: 9px; }

/* ===== Wiki / activity ===== */
div.wiki { line-height: 1.65; }
div.wiki h1, div.wiki h2 { border-block-end: 1px solid var(--t-border); padding-block-end: 6px; }
div.wiki pre, pre, code { background: var(--t-surface-2); border: 1px solid var(--t-border); border-radius: 6px; font-family: "JetBrains Mono", ui-monospace, monospace; }
/* Core lays the activity feed out with floats, which collide once the
   entries sit inside a card. Re-flow each dt as a single row. */
#activity dl { padding: 0; }
#activity dt { display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 10px 16px; border-block-start: 1px solid var(--t-border); background-image: none; }
#activity dl > dt:first-child { border-block-start: 0; }
#activity dt .time { flex: 0 0 auto; color: var(--t-dim); font-variant-numeric: tabular-nums; font-size: 0.75rem; }
#activity dt > a { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#activity dt .author { flex: 0 0 auto; margin-inline-start: auto; float: none; color: var(--t-dim); font-size: 0.8125rem; }
#activity dd { margin: 0; padding: 0 16px 12px 62px; color: var(--t-dim); font-size: 0.8125rem; }
#activity dd .description { display: block; font-style: normal; padding: 0; margin: 0; }
#activity h3 { margin-block: 22px 8px; }

/* ===== Gantt / calendar ===== */
table.cal th { background: var(--t-surface-2); color: var(--t-dim); border-color: var(--t-border); }
table.cal td { border-color: var(--t-border); }
table.cal td p.day-num { color: var(--t-dim); font-variant-numeric: tabular-nums; }
table.gantt-table { border: 1px solid var(--t-border); border-radius: var(--t-box-radius); overflow: hidden; background: var(--t-surface); }
.gantt_hdr { border-color: var(--t-border); background: var(--t-surface-2); color: var(--t-dim); font-size: 0.6875rem; font-weight: 600; }
.gantt_hdr.nwday { background: color-mix(in oklab, var(--t-dim) 12%, var(--t-surface-2)); color: var(--t-dim); }
.gantt_subjects div a, .gantt_subjects div { color: var(--t-text); }
.gantt_subjects div.issue-subject:hover { background: var(--t-accent-soft); }
.gantt_subjects div.project-name a, .gantt_subjects div.version-name a { font-weight: 600; }
.task { border-radius: 3px; color: var(--t-dim); }
div.task_todo { background: var(--t-accent-soft) !important; border: 1px solid color-mix(in oklab, var(--t-accent) 55%, transparent) !important; }
div.task_done { background: var(--t-accent) !important; border: 1px solid var(--t-accent) !important; }
div.task_late { background: var(--oc-red-5) !important; border: 1px solid var(--oc-red-5) !important; }
div.task_todo.parent, div.task_done.parent, div.task_late.parent { border-radius: 2px; }
.version.task_todo, .project.task_todo { background: var(--t-surface) !important; border-color: var(--t-border-strong) !important; }
.version.task_done, .project.task_done { background: var(--t-accent) !important; border-color: var(--t-accent) !important; }
#gantt-today-line { position: absolute; inset-block: 0; inline-size: 0; border-inline-start: 2px dashed color-mix(in oklab, var(--oc-red-6) 70%, transparent); z-index: 8; }

/* Atlas: card-like content column, roomy rows */
#content { max-inline-size: none; }
table.list tbody tr { transition: background .12s; }
table.list td.subject { font-size: 0.875rem; }
#header h1 .current-project { font-weight: 650; }
.rm-card { border-inline-start: 3px solid var(--t-accent); }

/* ===== Issue editor (theme.js lifts #update above the history and tabs it) ===== */
#update.rm-editor { margin-block: 18px 22px; }
.rm-editor > form > .box, .rm-editor .box { padding: 0; overflow: hidden; }
.rm-editor-tabs { display: flex; gap: 2px; padding: 8px 10px 0; background: var(--t-surface-2); border-block-end: 1px solid var(--t-border); }
.rm-editor-tabs button { background: transparent !important; color: var(--t-dim) !important; border: 0 !important; border-radius: var(--t-radius) var(--t-radius) 0 0 !important; padding: 7px 14px !important; font-size: 0.8125rem !important; font-weight: 600 !important; cursor: pointer; }
.rm-editor-tabs button:hover { background: color-mix(in oklab, var(--t-dim) 10%, transparent) !important; }
.rm-editor-tabs button.on { background: var(--t-surface) !important; color: var(--t-accent-text) !important; box-shadow: inset 0 -2px 0 var(--t-accent); }
.rm-editor-tabs .rm-editor-hint { margin-inline-start: auto; align-self: center; font-size: 0.6875rem; color: var(--t-dim); padding-inline-end: 4px; }
.rm-editor fieldset { border: 0; margin: 0; padding: 16px 18px; }
.rm-editor fieldset > legend { display: none; }
.rm-editor fieldset[hidden] { display: none; }
.rm-editor textarea { inline-size: 100%; box-sizing: border-box; min-block-size: 130px; }
.rm-editor .jstElements { border: 1px solid var(--t-border); border-block-end: 0; border-radius: var(--t-radius) var(--t-radius) 0 0; background: var(--t-surface-2); }
.rm-editor-actions { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-block-start: 1px solid var(--t-border); background: var(--t-surface-2); position: sticky; inset-block-end: 0; z-index: 12; }
.rm-editor-actions a { color: var(--t-dim); font-size: 0.8125rem; }
.rm-editor-actions .rm-editor-spacer { margin-inline-start: auto; font-size: 0.75rem; color: var(--t-dim); }
/* Redmine's .tabular rows indent with padding-inline-start on the <p> and a
   matching negative margin on the label. Reset both, then lay the row out as
   flex so trailing text like "hours" stays on the same line as its field. */
.rm-editor .tabular p, .rm-editor fieldset > p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding-inline-start: 0; margin-block: 12px; }
/* One width for every label in the editor. The top rows (Tracker, Subject,
   Description) and the .splitcontent rows below them used to differ — 140px
   against 108px — which started their fields at different x and read as two
   mismatched columns. They align on the NARROWER width: .splitcontent's grid is
   two columns of about 320px, and a 140px label leaves too little for the field,
   so every row in it wrapped its control onto a second line. */
.rm-editor .tabular p > label, .rm-editor fieldset > p > label,
.rm-editor .splitcontent p > label { float: none; flex: 0 0 108px; inline-size: 108px; margin-inline: 0; padding: 0; text-align: start; line-height: 1.35; }
.rm-editor .tabular p > input[type=text], .rm-editor .tabular p > input[type=date],
.rm-editor .tabular p > input[type=number], .rm-editor .tabular p > select { flex: 1 1 auto; min-inline-size: 0; max-inline-size: 400px; box-sizing: border-box; }
.rm-editor .tabular p > textarea { flex: 1 1 320px; inline-size: auto; min-inline-size: 0; max-inline-size: none; box-sizing: border-box; }
.rm-editor .splitcontent { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.rm-editor .splitcontentleft, .rm-editor .splitcontentright { float: none; inline-size: auto; }
.rm-editor .splitcontent p > select, .rm-editor .splitcontent p > input { max-inline-size: none; }
.rm-editor #attributes { margin-block-start: 6px; padding-block-start: 14px; border-block-start: 1px solid var(--t-border); }
.rm-editor .required { color: var(--oc-red-7); }
.rm-editor-hint { white-space: nowrap; }
.rm-editor #add_notes p, .rm-editor #add_attachments p { display: block; }
.rm-editor #add_notes label { display: inline-flex; align-items: center; gap: 6px; margin-block-start: 10px; font-weight: 400; }

/* ===== Nav rail icons ===== */
#rm-rail .rm-rail-icon { inline-size: 18px; block-size: 18px; flex: 0 0 18px; stroke: currentColor; opacity: .85; }
#rm-rail a.selected .rm-rail-icon { opacity: 1; }
#rm-rail .rm-rail-mono { display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; border: 1px solid currentColor; border-radius: 4px; opacity: .7; }
#rm-rail .rm-rail-label { transition: opacity .12s ease; }
body.rm-rail-collapsed #rm-rail a { justify-content: center; padding-inline: 0; }
body.rm-rail-collapsed #rm-rail .rm-rail-brand { justify-content: center; padding-inline: 0; }
body.rm-rail-collapsed #rm-rail .rm-rail-label { display: none; }
body.rm-rail-collapsed #rm-rail .rm-rail-sec { block-size: 1px; padding: 10px 0 0; overflow: hidden; color: transparent; border-block-start: 1px solid var(--t-border); margin-inline: 8px; }

.rm-editor-tabs button, .rm-editor-actions a, .rm-editor-actions input[type=submit] { white-space: nowrap; }
.rm-viewswitch button { white-space: nowrap; }
#gantt-mount { max-inline-size: 100%; }
.gantt_hdr { line-height: 16px; }

/* -------------------------------------------------------------------
   Core hardcodes --oc-white for row striping, #content, boxes and the
   footer, so it has to flip with the mode too — otherwise dark mode
   leaves white bands behind. The -rgb variants stay literal: they are
   only used for shadows, which should stay black in both modes.
   ------------------------------------------------------------------- */
:root { --oc-white: #ffffff; --oc-black: #000000; }
@media (prefers-color-scheme: dark) { :root:not([data-rm-mode="light"]) { --oc-white: var(--t-surface); --oc-black: var(--oc-gray-9); } }
:root[data-rm-mode="dark"] { --oc-white: var(--t-surface); --oc-black: var(--oc-gray-9); }

/* Core's striping selectors outrank a plain tr.odd, so match their shape. */
table.list:not(.odd-even) tbody tr:nth-child(odd), table.list tbody tr.odd { background-color: transparent; }
table.list:not(.odd-even) tbody tr:nth-child(even), table.list tbody tr.even { background-color: color-mix(in oklab, var(--oc-gray-1) 45%, transparent); }
table.list:not(.odd-even) tbody tr:nth-child(odd):hover,
table.list:not(.odd-even) tbody tr:nth-child(even):hover,
table.list tbody tr:hover { background-color: var(--t-accent-soft); }
.box table.list:not(.odd-even) tbody tr:nth-child(even), .box .even { background-color: color-mix(in oklab, var(--oc-gray-1) 45%, transparent); }

/* -------------------------------------------------------------------
   Wiki toolbar. Its buttons carry their glyph as a background-image, so
   the generic button styling above has to skip them — it did not, which
   turned the whole toolbar into coloured blobs.

   The glyphs are dark-stroked SVGs shipped by Redmine, so dark mode has
   to invert them. filter applies to the whole element, not just the
   background image, so in dark mode the button chrome goes transparent
   and the hover tint is a mid grey, which survives inversion unchanged.
   ------------------------------------------------------------------- */
:root { --t-icon-invert: 0; --t-jst-bg: var(--t-surface); --t-jst-border: var(--t-border); --t-jst-hover: var(--t-accent-soft); }
@media (prefers-color-scheme: dark) { :root:not([data-rm-mode="light"]) { --t-icon-invert: 0.92; --t-jst-bg: transparent; --t-jst-border: transparent; --t-jst-hover: rgba(128,128,128,.3); } }
:root[data-rm-mode="dark"] { --t-icon-invert: 0.92; --t-jst-bg: transparent; --t-jst-border: transparent; --t-jst-hover: rgba(128,128,128,.3); }

.jstElements button {
  inline-size: 26px; block-size: 26px; margin: 0; padding: 4px; opacity: 1; cursor: pointer;
  background-color: var(--t-jst-bg); border: 1px solid var(--t-jst-border); border-radius: var(--t-radius);
  background-position: 50% 50%; background-repeat: no-repeat; background-size: 15px 15px;
  filter: invert(var(--t-icon-invert));
}
.jstElements button:hover { background-color: var(--t-jst-hover); border-color: var(--t-jst-border); }
.jstb_pre::before { color: currentColor; font-size: 10px; font-weight: 700; }
button[class*="jstb_"] { color: var(--t-text); }
.jstSpacer { inline-size: 1px; block-size: 18px; background: var(--t-border); margin-inline: 5px; padding: 0; border: 0; font-size: 0; }

/* Core's div.tabs is a fixed-height, overflow-hidden block with an absolutely
   positioned ul; the wiki toolbar shares that class, so the Edit/Preview tabs
   landed on top of the buttons. Let this one instance flow normally, and let
   the toolbar take its own row so it grows instead of clipping when it wraps. */
#content .jstTabs.tabs { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 6px 12px; block-size: auto; min-block-size: 0; overflow: visible; position: relative; padding: 0; margin-block-end: 0; }
#content .jstTabs.tabs ul { position: static; display: flex; gap: 2px; inline-size: auto; block-size: auto; overflow: visible; white-space: nowrap; margin: 0; flex: 0 0 auto; }
#content .jstTabs.tabs li { display: inline-block; float: none; block-size: auto; }
#content .jstTabs.tabs li a { border-radius: var(--t-radius) var(--t-radius) 0 0; color: var(--t-dim); padding-block: 5px; }
#content .jstTabs.tabs li a.selected { background: var(--t-surface); color: var(--t-accent-text); border-color: var(--t-border); }
#content .jstTabs.tabs .jstElements { flex: 1 1 100%; block-size: auto; align-content: flex-start; display: flex; flex-wrap: wrap; align-items: center; gap: 3px; padding: 4px 0 6px; }
#content .jstTabs.tabs .jstElements .help { flex: 0 0 auto; float: none; margin-inline-start: auto; align-self: center; white-space: nowrap; padding: 0; }
#content .jstTabs.tabs .jstElements .help a { color: var(--t-dim); font-size: 0.75rem; }

.jstEditor textarea { border-start-start-radius: 0; border-start-end-radius: 0; }
.wiki-preview { background: var(--t-surface); border: 1px solid var(--t-border); border-radius: 0 0 var(--t-radius) var(--t-radius); padding: 12px 14px; }
.table-generator td { border-color: var(--t-border-strong); background: var(--t-surface); }
.table-generator td.selected-cell, .table-generator td:hover { background: var(--t-accent-soft); }

/* Redmine's own small icon buttons keep their sprite rather than a fill. */
button.icon-only { background: transparent; border: 0; padding: 3px; border-radius: var(--t-radius); cursor: pointer; }
button.icon-only:hover { background: var(--t-surface-2); }

/* The rail's inline-size must include its own padding and border, otherwise the
   fixed rail renders wider than the margin reserved on #wrapper and overlaps the
   left edge of the content. */
#rm-rail, #rm-rail * { box-sizing: border-box; }

/* -------------------------------------------------------------------
   Action affordances, matched to what Redmine actually renders.

   The contextual bar, the query form buttons and the per-row menus are
   all <a class="icon icon-*"> sprite links — not <input type=submit> or
   a.button, which core barely uses. Core also turns icon strokes red on
   hover; these themes use the accent instead.
   ------------------------------------------------------------------- */
.contextual { display: flex; align-items: center; gap: 6px; }
.contextual a.icon, p.buttons a.icon {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: var(--t-radius);
  border: 1px solid var(--t-border-strong); background: var(--t-surface);
  color: var(--t-text); font-size: 0.8125rem; font-weight: 500; text-decoration: none;
}
.contextual a.icon:hover, p.buttons a.icon:hover {
  background: var(--t-accent-soft); border-color: var(--t-accent); color: var(--t-accent-text); text-decoration: none;
}
.contextual a.icon .icon-svg, p.buttons a.icon .icon-svg { stroke: var(--t-dim); }
.contextual a.icon:hover .icon-svg, p.buttons a.icon:hover .icon-svg { stroke: var(--t-accent-text); }
.contextual a.icon .icon-label, p.buttons a.icon .icon-label { margin-inline-start: 0; }

/* The primary action in each bar reads as filled. */
.contextual a.icon.new-issue, .contextual a.icon.new-object, p.buttons a.icon-checked {
  background: var(--t-accent); border-color: var(--t-accent); color: var(--t-on-accent); font-weight: 600;
}
.contextual a.icon.new-issue:hover, .contextual a.icon.new-object:hover, p.buttons a.icon-checked:hover {
  background: var(--t-accent); border-color: var(--t-accent); color: var(--t-on-accent); filter: brightness(1.08);
}
.contextual a.icon.new-issue .icon-svg, .contextual a.icon.new-object .icon-svg, p.buttons a.icon-checked .icon-svg,
.contextual a.icon.new-issue:hover .icon-svg, p.buttons a.icon-checked:hover .icon-svg { stroke: var(--t-on-accent); }

/* Overflow menus: quiet until pointed at. */
.icon-only.icon-actions, a.icon-only.js-contextmenu {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 26px; block-size: 26px; border-radius: var(--t-radius); cursor: pointer;
}
.icon-only.icon-actions:hover, a.icon-only.js-contextmenu:hover { background: var(--t-surface-2); }
.icon-only.icon-actions .icon-svg, a.icon-only.js-contextmenu .icon-svg { stroke: var(--t-dim); }
.icon-only.icon-actions:hover .icon-svg, a.icon-only.js-contextmenu:hover .icon-svg { stroke: var(--t-accent-text); }
table.list td.buttons { inline-size: 30px; }
table.list td.buttons a { opacity: 0; transition: opacity .12s; }
table.list tbody tr:hover td.buttons a, table.list td.buttons a:focus { opacity: 1; }

/* Query form. */
#query_form_with_buttons { margin-block-end: 14px; }
fieldset#filters, fieldset#options { margin-block-end: 8px; }
fieldset#filters > legend, fieldset#options > legend {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  color: var(--t-dim); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
fieldset#filters > legend .icon-svg, fieldset#options > legend .icon-svg { stroke: var(--t-dim); }
#filters-table { float: none; }
#filters-table .filter { display: flex; align-items: center; gap: 10px; margin-block: 6px 0; flex-wrap: wrap; }
#filters-table .filter .field { inline-size: 210px; display: inline-flex; align-items: center; gap: 6px; }
#filters-table .filter .field label { font-weight: 500; color: var(--t-text); }
#filters-table .filter .operator select { inline-size: 130px; }
.add-filter { float: none; inline-size: auto; text-align: start; margin-block-start: 12px; display: flex; align-items: center; gap: 8px; }
p.buttons { display: flex; align-items: center; gap: 6px; margin-block: 12px 0; }

/* Lists. */
.autoscroll { overflow-x: auto; }
table.list tr.group td { background: var(--t-surface-2); padding: 8px 10px; font-weight: 600; }
table.list tr.group .badge-count { background: var(--t-accent-soft); color: var(--t-accent-text); border-radius: 999px; padding: 1px 8px; font-size: 0.6875rem; font-weight: 700; margin-inline-start: 8px; }
table.list tr.group .toggle-all { float: inline-end; font-size: 0.6875rem; color: var(--t-dim); }
table.list th a { color: inherit; text-decoration: none; }
table.list th a:hover { color: var(--t-accent-text); }

/* Pagination is a <ul class="pages"> in the real markup. */
span.pagination ul.pages { display: inline-flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
span.pagination ul.pages li { list-style: none; }
span.pagination ul.pages li a, span.pagination ul.pages li.current {
  display: inline-block; padding: 3px 9px; border-radius: var(--t-radius); font-size: 0.75rem;
}
span.pagination ul.pages li.current { background: var(--t-accent); color: var(--t-on-accent); font-weight: 700; }
span.pagination ul.pages li a:hover { background: var(--t-surface-2); text-decoration: none; }
span.pagination .items { color: var(--t-dim); font-size: 0.75rem; margin-inline-end: 10px; }
p.other-formats { color: var(--t-dim); font-size: 0.75rem; margin-block-start: 14px; }

.add-filter label, #filters-table .filter .field label { white-space: nowrap; }
#filters-table .filter .field { flex: 0 0 210px; }
#filters-table .filter .values select, #filters-table .filter .values input { min-inline-size: 160px; }

/* -------------------------------------------------------------------
   Redmine floats .contextual so it sits beside the page heading. Any
   sibling that establishes a block formatting context — .splitcontent
   and .autoscroll both do, via overflow — then shrinks to avoid that
   float, and these themes render the contextual as buttons rather than
   bare text links, so it is wide enough to visibly narrow the overview
   columns and the issue table. Take it out of flow instead; it keeps
   the same position without stealing width from anything.
   ------------------------------------------------------------------- */
:root { --t-pad-b: 22px; --t-pad-i: 24px; }
#content { position: relative; }
/* The bar is floated to the inline end further down this file (see the block on
   the flash icon and the title row); the measurement above is why it must never
   be laid out in normal flow at full width. */
#content > .contextual + h2, #content > .contextual + h1 { margin-block-start: 0; }

/* ===================================================================
   RESPONSIVE

   Redmine already ships a mobile system: below 900px core hides the top
   menu, the project menu and the sidebar and moves all three into a
   .flyout-menu opened by .mobile-toggle-button. These themes get out of
   its way rather than compete — the nav rail is a desktop affordance and
   is withdrawn entirely.

   SPECIFICITY NOTE. Redmine substitutes this file for core's
   application.css in the 'application' slot, so the load order is

       <theme>/application.css  ->  dropdown.css  ->  responsive.css

   Every rule here therefore loses a specificity tie with responsive.css.
   Mobile overrides are prefixed with body/html to outrank it; without
   that prefix core's hard-coded blue and 40px rows silently win.

   Three ranges:
     < 900px   core's flyout owns navigation; rail withdrawn
     900-1180  rail auto-collapses to icons so content keeps its width
     > 1180px  rail expanded
   =================================================================== */

@media screen and (min-width: 900px) and (max-width: 1180px) {
  #rm-rail { inline-size: 56px; }
  body.rm-has-rail #wrapper { margin-inline-start: 56px; }
  /* display:none, not opacity:0. An invisible label still occupies its 27-50px
     of width inside the centred flex row, which pushes the 18px icon out past
     the rail's left edge where overflow:hidden clips it. The manual-collapse
     path (body.rm-rail-collapsed) already removes them from flow. */
  #rm-rail .rm-rail-label, #rm-rail .rm-rail-sec { display: none; }
  #rm-rail .rm-rail-brand { justify-content: center; padding-inline: 0; }
  #rm-rail a { justify-content: center; }
  /* the toggle would be a lie at this width — expanding cannot fit */
  #rm-rail .rm-rail-toggle { display: none; }
  /* A collapse flag stored at a wider viewport would otherwise apply its 52px
     rail width here against the 56px this range reserves on #wrapper, leaving a
     seam that cannot be undone because the toggle above is hidden. */
  body.rm-rail-collapsed #rm-rail { inline-size: 56px; }
  body.rm-rail-collapsed #wrapper { margin-inline-start: 56px; }
  .splitcontentleft, .splitcontentright { inline-size: 100%; flex: auto; margin-inline: 0; }
}

@media screen and (max-width: 899px) {
  /* Core resets body's 900px min-width on mobile, but these themes also put a
     min-width on #wrapper to keep the desktop chrome from collapsing. It has to
     be released here or the whole page overflows horizontally. */
  body #wrapper { min-inline-size: 0; }

  /* --- Rail withdrawn; core's flyout takes over --- */
  #rm-rail { display: none; }
  body.rm-has-rail #wrapper, body.rm-rail-collapsed #wrapper { margin-inline-start: 0; }

  /* --- Header. Core fixes it at 64px and hard-codes #628db6; use the
         theme's own chrome so the mobile bar matches its desktop top menu. --- */
  body #header { background: var(--t-chrome); border-block-end: 1px solid var(--t-border); }
  body.has-main-menu #header { padding-block-end: 0; }
  body #header a.mobile-toggle-button {
    color: var(--t-chrome-text); inline-size: 64px;
    border-inline-start-color: color-mix(in oklab, var(--t-chrome-text) 22%, transparent);
  }
  body #header #project-jump .drdn-trigger {
    color: var(--t-chrome-text); font-family: var(--fonts-main);
    font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em;
  }
  body #header #project-jump .drdn-content {
    background: var(--t-surface); border: 1px solid var(--t-border);
    border-radius: 0 0 var(--t-radius) var(--t-radius); box-shadow: var(--t-shadow); padding-block: 4px;
  }
  body #header #project-jump .drdn-content a { color: var(--t-text); padding: 11px 14px; display: block; }
  body #header #project-jump .drdn-content a.selected { background: var(--t-accent-soft); color: var(--t-accent-text); font-weight: 600; }

  /* --- Flyout panel, themed rather than core's fixed navy --- */
  #wrapper .flyout-menu { background: var(--t-chrome); color: var(--t-chrome-text); inline-size: 272px; inset-inline-end: -272px; }
  html.flyout-is-active #wrapper, html.flyout-is-active #header { inset-inline-end: 272px; }
  #wrapper .flyout-menu a, #wrapper .flyout-menu .user { color: var(--t-chrome-text); }
  #wrapper .flyout-menu .icon svg, #wrapper .flyout-menu .icon-only svg, #wrapper .flyout-menu .icon-svg { stroke: var(--t-chrome-text); }
  #wrapper .flyout-menu h3 {
    background: color-mix(in oklab, var(--t-chrome-text) 10%, transparent);
    color: color-mix(in oklab, var(--t-chrome-text) 72%, transparent);
    border-block-color: color-mix(in oklab, var(--t-chrome-text) 16%, transparent);
    block-size: auto; padding-block: 7px; line-height: 1.2; font-weight: 700;
  }
  /* 44px rows: core uses 40, below a comfortable touch target */
  #wrapper .flyout-menu ul li a, #wrapper .flyout-menu ul li:first-child a {
    block-size: 44px; line-height: 44px;
    display: flex; align-items: center; gap: 10px;
    border-block-start-color: color-mix(in oklab, var(--t-chrome-text) 12%, transparent);
  }
  #wrapper .flyout-menu ul li a.selected { background: color-mix(in oklab, var(--t-accent) 22%, transparent); font-weight: 600; }
  #wrapper .flyout-menu ul li a:active { background: color-mix(in oklab, var(--t-chrome-text) 12%, transparent); }
  #wrapper .flyout-menu__search input[type='text'] {
    background: var(--t-surface); color: var(--t-text); border: 1px solid var(--t-border);
    block-size: 40px; border-radius: var(--t-radius);
  }
  #wrapper .flyout-menu__avatar { border-block-start-color: color-mix(in oklab, var(--t-chrome-text) 12%, transparent); align-items: center; }
  #wrapper .flyout-menu__avatar .gravatar.g40 { inline-size: 40px; block-size: 40px; }
  #wrapper .flyout-menu__sidebar h3 { margin-inline-start: 0; }
  #wrapper .flyout-menu__sidebar a.selected { background: color-mix(in oklab, var(--t-accent) 22%, transparent); border-radius: 0; }

  /* --- Content --- */
  body div#content { padding-block: 16px; }
  body #footer { padding-inline: 16px; }

  /* The contextual is taken out of flow on desktop so it cannot shrink the
     page. On a narrow screen core's full-width row is better — restore it. */
  body #content > .contextual { position: static; float: none; inline-size: 100%; display: flex; flex-wrap: wrap; gap: 6px; margin-block-end: 12px; }
  body #content > .contextual a.icon, body #content > .contextual .dropdown { margin: 0; padding: 9px 12px; }
  body #content > div.flash + .contextual { inset-block-start: auto; }

  /* Sticky headers would slide under the fixed 64px header. */
  body table.list th { position: static; }

  body .autoscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Board columns become a swipeable row. */
  .rm-board { grid-auto-columns: 82vw; gap: 10px; }
  .rm-editor-tabs { flex-wrap: wrap; }
  .rm-editor-actions { position: sticky; inset-block-end: 0; }

  body #filters-table .filter { gap: 6px; }
  body #filters-table .filter .field { flex: 1 1 100%; inline-size: 100%; }
  body #filters-table .filter .operator select, body #filters-table .filter .values select { inline-size: 100%; }

  /* Touch targets. 1rem on inputs also stops iOS zooming on focus. */
  body input[type=text], body input[type=password], body input[type=email],
  body input[type=number], body input[type=date], body select, body textarea {
    min-block-size: 40px; font-size: 1rem;
  }
  body input[type=submit], body a.button, body .contextual a.icon { min-block-size: 40px; }
}

@media screen and (max-width: 599px) {
  body div#content { padding-inline: 12px; }
  body #login-form { inline-size: 100%; margin-block-start: 1.5em; padding: 22px 20px; }
  .rm-board { grid-auto-columns: 88vw; }
  .rm-viewswitch { margin-inline-start: 0; }
  body #content h2 { font-size: 1.0625rem; }
}

/* -------------------------------------------------------------------
   Semantic colour families in dark mode.

   The token block at the top of this file remaps the gray ramp and the
   accent families (blue/indigo/violet/cyan) for dark mode, but Open
   Color's semantic families were left at their light values — pale
   pastel -0/-1 tints and dark saturated -9 foregrounds, both of which
   are meant for a white page.

   On a dark surface that inverts the intent: core's diff highlighting
   (.diff_in on --oc-green-1, .diff_out on --oc-red-1) became near-white
   text on pale pastel, and the status pills put a dark saturated -9
   foreground on a dark background. Both measured close to 1:1.

   Same treatment as the other ramps: keep each family's hue, invert the
   lightness scale, so -0/-1 are dark tints and -9 is a light readable
   foreground. Scoped to the dark selectors only, so light mode keeps
   Open Color's own values.
   ------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-rm-mode="light"]) {
    --oc-red-0: oklch(0.28 0.021 27);
    --oc-red-1: oklch(0.34 0.042 27);
    --oc-red-2: oklch(0.41 0.074 27);
    --oc-red-3: oklch(0.48 0.105 27);
    --oc-red-4: oklch(0.56 0.137 27);
    --oc-red-5: oklch(0.63 0.158 27);
    --oc-red-6: oklch(0.7 0.168 27);
    --oc-red-7: oklch(0.76 0.168 27);
    --oc-red-8: oklch(0.82 0.158 27);
    --oc-red-9: oklch(0.88 0.147 27);

    --oc-pink-0: oklch(0.28 0.020 355);
    --oc-pink-1: oklch(0.34 0.040 355);
    --oc-pink-2: oklch(0.41 0.070 355);
    --oc-pink-3: oklch(0.48 0.100 355);
    --oc-pink-4: oklch(0.56 0.130 355);
    --oc-pink-5: oklch(0.63 0.150 355);
    --oc-pink-6: oklch(0.7 0.160 355);
    --oc-pink-7: oklch(0.76 0.160 355);
    --oc-pink-8: oklch(0.82 0.150 355);
    --oc-pink-9: oklch(0.88 0.140 355);

    --oc-grape-0: oklch(0.28 0.020 320);
    --oc-grape-1: oklch(0.34 0.040 320);
    --oc-grape-2: oklch(0.41 0.070 320);
    --oc-grape-3: oklch(0.48 0.100 320);
    --oc-grape-4: oklch(0.56 0.130 320);
    --oc-grape-5: oklch(0.63 0.150 320);
    --oc-grape-6: oklch(0.7 0.160 320);
    --oc-grape-7: oklch(0.76 0.160 320);
    --oc-grape-8: oklch(0.82 0.150 320);
    --oc-grape-9: oklch(0.88 0.140 320);

    --oc-teal-0: oklch(0.28 0.019 175);
    --oc-teal-1: oklch(0.34 0.038 175);
    --oc-teal-2: oklch(0.41 0.067 175);
    --oc-teal-3: oklch(0.48 0.095 175);
    --oc-teal-4: oklch(0.56 0.123 175);
    --oc-teal-5: oklch(0.63 0.142 175);
    --oc-teal-6: oklch(0.7 0.152 175);
    --oc-teal-7: oklch(0.76 0.152 175);
    --oc-teal-8: oklch(0.82 0.142 175);
    --oc-teal-9: oklch(0.88 0.133 175);

    --oc-green-0: oklch(0.28 0.019 148);
    --oc-green-1: oklch(0.34 0.038 148);
    --oc-green-2: oklch(0.41 0.067 148);
    --oc-green-3: oklch(0.48 0.095 148);
    --oc-green-4: oklch(0.56 0.123 148);
    --oc-green-5: oklch(0.63 0.142 148);
    --oc-green-6: oklch(0.7 0.152 148);
    --oc-green-7: oklch(0.76 0.152 148);
    --oc-green-8: oklch(0.82 0.142 148);
    --oc-green-9: oklch(0.88 0.133 148);

    --oc-lime-0: oklch(0.28 0.019 128);
    --oc-lime-1: oklch(0.34 0.038 128);
    --oc-lime-2: oklch(0.41 0.067 128);
    --oc-lime-3: oklch(0.48 0.095 128);
    --oc-lime-4: oklch(0.56 0.123 128);
    --oc-lime-5: oklch(0.63 0.142 128);
    --oc-lime-6: oklch(0.7 0.152 128);
    --oc-lime-7: oklch(0.76 0.152 128);
    --oc-lime-8: oklch(0.82 0.142 128);
    --oc-lime-9: oklch(0.88 0.133 128);

    --oc-yellow-0: oklch(0.28 0.018 95);
    --oc-yellow-1: oklch(0.34 0.036 95);
    --oc-yellow-2: oklch(0.41 0.063 95);
    --oc-yellow-3: oklch(0.48 0.090 95);
    --oc-yellow-4: oklch(0.56 0.117 95);
    --oc-yellow-5: oklch(0.63 0.135 95);
    --oc-yellow-6: oklch(0.7 0.144 95);
    --oc-yellow-7: oklch(0.76 0.144 95);
    --oc-yellow-8: oklch(0.82 0.135 95);
    --oc-yellow-9: oklch(0.88 0.126 95);

    --oc-orange-0: oklch(0.28 0.021 62);
    --oc-orange-1: oklch(0.34 0.042 62);
    --oc-orange-2: oklch(0.41 0.074 62);
    --oc-orange-3: oklch(0.48 0.105 62);
    --oc-orange-4: oklch(0.56 0.137 62);
    --oc-orange-5: oklch(0.63 0.158 62);
    --oc-orange-6: oklch(0.7 0.168 62);
    --oc-orange-7: oklch(0.76 0.168 62);
    --oc-orange-8: oklch(0.82 0.158 62);
    --oc-orange-9: oklch(0.88 0.147 62);
  }
}

:root[data-rm-mode="dark"] {
  --oc-red-0: oklch(0.28 0.021 27);
  --oc-red-1: oklch(0.34 0.042 27);
  --oc-red-2: oklch(0.41 0.074 27);
  --oc-red-3: oklch(0.48 0.105 27);
  --oc-red-4: oklch(0.56 0.137 27);
  --oc-red-5: oklch(0.63 0.158 27);
  --oc-red-6: oklch(0.7 0.168 27);
  --oc-red-7: oklch(0.76 0.168 27);
  --oc-red-8: oklch(0.82 0.158 27);
  --oc-red-9: oklch(0.88 0.147 27);

  --oc-pink-0: oklch(0.28 0.020 355);
  --oc-pink-1: oklch(0.34 0.040 355);
  --oc-pink-2: oklch(0.41 0.070 355);
  --oc-pink-3: oklch(0.48 0.100 355);
  --oc-pink-4: oklch(0.56 0.130 355);
  --oc-pink-5: oklch(0.63 0.150 355);
  --oc-pink-6: oklch(0.7 0.160 355);
  --oc-pink-7: oklch(0.76 0.160 355);
  --oc-pink-8: oklch(0.82 0.150 355);
  --oc-pink-9: oklch(0.88 0.140 355);

  --oc-grape-0: oklch(0.28 0.020 320);
  --oc-grape-1: oklch(0.34 0.040 320);
  --oc-grape-2: oklch(0.41 0.070 320);
  --oc-grape-3: oklch(0.48 0.100 320);
  --oc-grape-4: oklch(0.56 0.130 320);
  --oc-grape-5: oklch(0.63 0.150 320);
  --oc-grape-6: oklch(0.7 0.160 320);
  --oc-grape-7: oklch(0.76 0.160 320);
  --oc-grape-8: oklch(0.82 0.150 320);
  --oc-grape-9: oklch(0.88 0.140 320);

  --oc-teal-0: oklch(0.28 0.019 175);
  --oc-teal-1: oklch(0.34 0.038 175);
  --oc-teal-2: oklch(0.41 0.067 175);
  --oc-teal-3: oklch(0.48 0.095 175);
  --oc-teal-4: oklch(0.56 0.123 175);
  --oc-teal-5: oklch(0.63 0.142 175);
  --oc-teal-6: oklch(0.7 0.152 175);
  --oc-teal-7: oklch(0.76 0.152 175);
  --oc-teal-8: oklch(0.82 0.142 175);
  --oc-teal-9: oklch(0.88 0.133 175);

  --oc-green-0: oklch(0.28 0.019 148);
  --oc-green-1: oklch(0.34 0.038 148);
  --oc-green-2: oklch(0.41 0.067 148);
  --oc-green-3: oklch(0.48 0.095 148);
  --oc-green-4: oklch(0.56 0.123 148);
  --oc-green-5: oklch(0.63 0.142 148);
  --oc-green-6: oklch(0.7 0.152 148);
  --oc-green-7: oklch(0.76 0.152 148);
  --oc-green-8: oklch(0.82 0.142 148);
  --oc-green-9: oklch(0.88 0.133 148);

  --oc-lime-0: oklch(0.28 0.019 128);
  --oc-lime-1: oklch(0.34 0.038 128);
  --oc-lime-2: oklch(0.41 0.067 128);
  --oc-lime-3: oklch(0.48 0.095 128);
  --oc-lime-4: oklch(0.56 0.123 128);
  --oc-lime-5: oklch(0.63 0.142 128);
  --oc-lime-6: oklch(0.7 0.152 128);
  --oc-lime-7: oklch(0.76 0.152 128);
  --oc-lime-8: oklch(0.82 0.142 128);
  --oc-lime-9: oklch(0.88 0.133 128);

  --oc-yellow-0: oklch(0.28 0.018 95);
  --oc-yellow-1: oklch(0.34 0.036 95);
  --oc-yellow-2: oklch(0.41 0.063 95);
  --oc-yellow-3: oklch(0.48 0.090 95);
  --oc-yellow-4: oklch(0.56 0.117 95);
  --oc-yellow-5: oklch(0.63 0.135 95);
  --oc-yellow-6: oklch(0.7 0.144 95);
  --oc-yellow-7: oklch(0.76 0.144 95);
  --oc-yellow-8: oklch(0.82 0.135 95);
  --oc-yellow-9: oklch(0.88 0.126 95);

  --oc-orange-0: oklch(0.28 0.021 62);
  --oc-orange-1: oklch(0.34 0.042 62);
  --oc-orange-2: oklch(0.41 0.074 62);
  --oc-orange-3: oklch(0.48 0.105 62);
  --oc-orange-4: oklch(0.56 0.137 62);
  --oc-orange-5: oklch(0.63 0.158 62);
  --oc-orange-6: oklch(0.7 0.168 62);
  --oc-orange-7: oklch(0.76 0.168 62);
  --oc-orange-8: oklch(0.82 0.158 62);
  --oc-orange-9: oklch(0.88 0.147 62);
}

/* -------------------------------------------------------------------
   Dim text tier.

   --t-dim resolves to --oc-gray-6, which carries most of the secondary
   text in these themes: column headers, sidebar headings, issue-number
   links, pagination counts, field labels, the footer. The light ramp
   put it at oklch(0.655), which is 3.17:1 on white and 2.92:1 on Dense's
   zebra rows — under WCAG AA, and none of it is large text.

   Lowered to oklch(0.54): 5.06:1 on white, 4.66:1 on the zebra row, so
   the worst case still clears AA. The dark ramp already passed (4.65 to
   5.12) and is unchanged.
   ------------------------------------------------------------------- */

/* -------------------------------------------------------------------
   Accent as text vs accent as fill.

   --t-accent is the accent ramp's fill rung, tuned to sit BEHIND
   --t-on-accent: filled buttons, the new-object action, the current
   page marker. Reused as a foreground it measured 3.3-4.1:1 in dark
   mode — and the worst case was the current-location indicator in the
   rail, the sidebar and the project menu.

   The tightest pairing is not the page surface but --t-accent-soft:
   selected items tint their own background, so accent text sits on
   accent tint. Against that the -7 rung still failed in light (4.26:1,
   4.35:1 on a zebra row). The -8 rung clears both: light 5.51 on
   accent-soft, 6.12 on white; dark 6.37 on accent-soft, 9.03 on
   --t-surface. Because the ramps already invert per mode, one
   definition serves both.

   Fills, borders, focus rings and the current-page marker keep
   --t-accent; only foregrounds move.
   ------------------------------------------------------------------- */
:root { --t-accent-text: var(--oc-blue-8); }

/* Core sets min-inline-size: 2000px on .tabs ul for its scrolling tab strip.
   The wiki toolbar shares that class, so overriding inline-size alone left a
   latent 2000px scroll region inside the editor box. */
#content .jstTabs.tabs ul { min-inline-size: 0; }

/* -------------------------------------------------------------------
   Semantic colour families in light mode.

   The companion to the dark ramps above. Those fixed dark mode but left
   light on raw Open Color, whose -9 rung tops out around oklch(0.50)
   — not dark enough to carry 11px bold text over a near-white tint of
   the same family. The status pills measured 3.94-4.42:1.

   Lightening the pill background does not fix it: dropping the mix from
   16-20% to 8% still only reaches 4.16-4.69. The foreground has to move,
   so these ramps land -9 at oklch(0.44), matching the scale the accent
   families already use in light mode. Scoped to the light selectors, so
   the dark ramps are untouched.
   ------------------------------------------------------------------- */
@media (prefers-color-scheme: light) {
  :root:not([data-rm-mode="dark"]) {
    --oc-red-0: oklch(0.965 0.020 27);
    --oc-red-1: oklch(0.93 0.040 27);
    --oc-red-2: oklch(0.88 0.070 27);
    --oc-red-3: oklch(0.82 0.100 27);
    --oc-red-4: oklch(0.75 0.130 27);
    --oc-red-5: oklch(0.68 0.150 27);
    --oc-red-6: oklch(0.62 0.160 27);
    --oc-red-7: oklch(0.56 0.160 27);
    --oc-red-8: oklch(0.5 0.150 27);
    --oc-red-9: oklch(0.44 0.140 27);

    --oc-pink-0: oklch(0.965 0.020 355);
    --oc-pink-1: oklch(0.93 0.040 355);
    --oc-pink-2: oklch(0.88 0.070 355);
    --oc-pink-3: oklch(0.82 0.100 355);
    --oc-pink-4: oklch(0.75 0.130 355);
    --oc-pink-5: oklch(0.68 0.150 355);
    --oc-pink-6: oklch(0.62 0.160 355);
    --oc-pink-7: oklch(0.56 0.160 355);
    --oc-pink-8: oklch(0.5 0.150 355);
    --oc-pink-9: oklch(0.44 0.140 355);

    --oc-grape-0: oklch(0.965 0.020 320);
    --oc-grape-1: oklch(0.93 0.040 320);
    --oc-grape-2: oklch(0.88 0.070 320);
    --oc-grape-3: oklch(0.82 0.100 320);
    --oc-grape-4: oklch(0.75 0.130 320);
    --oc-grape-5: oklch(0.68 0.150 320);
    --oc-grape-6: oklch(0.62 0.160 320);
    --oc-grape-7: oklch(0.56 0.160 320);
    --oc-grape-8: oklch(0.5 0.150 320);
    --oc-grape-9: oklch(0.44 0.140 320);

    --oc-teal-0: oklch(0.965 0.020 175);
    --oc-teal-1: oklch(0.93 0.040 175);
    --oc-teal-2: oklch(0.88 0.070 175);
    --oc-teal-3: oklch(0.82 0.100 175);
    --oc-teal-4: oklch(0.75 0.130 175);
    --oc-teal-5: oklch(0.68 0.150 175);
    --oc-teal-6: oklch(0.62 0.160 175);
    --oc-teal-7: oklch(0.56 0.160 175);
    --oc-teal-8: oklch(0.5 0.150 175);
    --oc-teal-9: oklch(0.44 0.140 175);

    --oc-green-0: oklch(0.965 0.020 148);
    --oc-green-1: oklch(0.93 0.040 148);
    --oc-green-2: oklch(0.88 0.070 148);
    --oc-green-3: oklch(0.82 0.100 148);
    --oc-green-4: oklch(0.75 0.130 148);
    --oc-green-5: oklch(0.68 0.150 148);
    --oc-green-6: oklch(0.62 0.160 148);
    --oc-green-7: oklch(0.56 0.160 148);
    --oc-green-8: oklch(0.5 0.150 148);
    --oc-green-9: oklch(0.44 0.140 148);

    --oc-lime-0: oklch(0.965 0.020 128);
    --oc-lime-1: oklch(0.93 0.040 128);
    --oc-lime-2: oklch(0.88 0.070 128);
    --oc-lime-3: oklch(0.82 0.100 128);
    --oc-lime-4: oklch(0.75 0.130 128);
    --oc-lime-5: oklch(0.68 0.150 128);
    --oc-lime-6: oklch(0.62 0.160 128);
    --oc-lime-7: oklch(0.56 0.160 128);
    --oc-lime-8: oklch(0.5 0.150 128);
    --oc-lime-9: oklch(0.44 0.140 128);

    --oc-yellow-0: oklch(0.965 0.020 95);
    --oc-yellow-1: oklch(0.93 0.040 95);
    --oc-yellow-2: oklch(0.88 0.070 95);
    --oc-yellow-3: oklch(0.82 0.100 95);
    --oc-yellow-4: oklch(0.75 0.130 95);
    --oc-yellow-5: oklch(0.68 0.150 95);
    --oc-yellow-6: oklch(0.62 0.160 95);
    --oc-yellow-7: oklch(0.56 0.160 95);
    --oc-yellow-8: oklch(0.5 0.150 95);
    --oc-yellow-9: oklch(0.44 0.140 95);

    --oc-orange-0: oklch(0.965 0.020 62);
    --oc-orange-1: oklch(0.93 0.040 62);
    --oc-orange-2: oklch(0.88 0.070 62);
    --oc-orange-3: oklch(0.82 0.100 62);
    --oc-orange-4: oklch(0.75 0.130 62);
    --oc-orange-5: oklch(0.68 0.150 62);
    --oc-orange-6: oklch(0.62 0.160 62);
    --oc-orange-7: oklch(0.56 0.160 62);
    --oc-orange-8: oklch(0.5 0.150 62);
    --oc-orange-9: oklch(0.44 0.140 62);
  }
}

:root[data-rm-mode="light"] {
  --oc-red-0: oklch(0.965 0.020 27);
  --oc-red-1: oklch(0.93 0.040 27);
  --oc-red-2: oklch(0.88 0.070 27);
  --oc-red-3: oklch(0.82 0.100 27);
  --oc-red-4: oklch(0.75 0.130 27);
  --oc-red-5: oklch(0.68 0.150 27);
  --oc-red-6: oklch(0.62 0.160 27);
  --oc-red-7: oklch(0.56 0.160 27);
  --oc-red-8: oklch(0.5 0.150 27);
  --oc-red-9: oklch(0.44 0.140 27);

  --oc-pink-0: oklch(0.965 0.020 355);
  --oc-pink-1: oklch(0.93 0.040 355);
  --oc-pink-2: oklch(0.88 0.070 355);
  --oc-pink-3: oklch(0.82 0.100 355);
  --oc-pink-4: oklch(0.75 0.130 355);
  --oc-pink-5: oklch(0.68 0.150 355);
  --oc-pink-6: oklch(0.62 0.160 355);
  --oc-pink-7: oklch(0.56 0.160 355);
  --oc-pink-8: oklch(0.5 0.150 355);
  --oc-pink-9: oklch(0.44 0.140 355);

  --oc-grape-0: oklch(0.965 0.020 320);
  --oc-grape-1: oklch(0.93 0.040 320);
  --oc-grape-2: oklch(0.88 0.070 320);
  --oc-grape-3: oklch(0.82 0.100 320);
  --oc-grape-4: oklch(0.75 0.130 320);
  --oc-grape-5: oklch(0.68 0.150 320);
  --oc-grape-6: oklch(0.62 0.160 320);
  --oc-grape-7: oklch(0.56 0.160 320);
  --oc-grape-8: oklch(0.5 0.150 320);
  --oc-grape-9: oklch(0.44 0.140 320);

  --oc-teal-0: oklch(0.965 0.020 175);
  --oc-teal-1: oklch(0.93 0.040 175);
  --oc-teal-2: oklch(0.88 0.070 175);
  --oc-teal-3: oklch(0.82 0.100 175);
  --oc-teal-4: oklch(0.75 0.130 175);
  --oc-teal-5: oklch(0.68 0.150 175);
  --oc-teal-6: oklch(0.62 0.160 175);
  --oc-teal-7: oklch(0.56 0.160 175);
  --oc-teal-8: oklch(0.5 0.150 175);
  --oc-teal-9: oklch(0.44 0.140 175);

  --oc-green-0: oklch(0.965 0.020 148);
  --oc-green-1: oklch(0.93 0.040 148);
  --oc-green-2: oklch(0.88 0.070 148);
  --oc-green-3: oklch(0.82 0.100 148);
  --oc-green-4: oklch(0.75 0.130 148);
  --oc-green-5: oklch(0.68 0.150 148);
  --oc-green-6: oklch(0.62 0.160 148);
  --oc-green-7: oklch(0.56 0.160 148);
  --oc-green-8: oklch(0.5 0.150 148);
  --oc-green-9: oklch(0.44 0.140 148);

  --oc-lime-0: oklch(0.965 0.020 128);
  --oc-lime-1: oklch(0.93 0.040 128);
  --oc-lime-2: oklch(0.88 0.070 128);
  --oc-lime-3: oklch(0.82 0.100 128);
  --oc-lime-4: oklch(0.75 0.130 128);
  --oc-lime-5: oklch(0.68 0.150 128);
  --oc-lime-6: oklch(0.62 0.160 128);
  --oc-lime-7: oklch(0.56 0.160 128);
  --oc-lime-8: oklch(0.5 0.150 128);
  --oc-lime-9: oklch(0.44 0.140 128);

  --oc-yellow-0: oklch(0.965 0.020 95);
  --oc-yellow-1: oklch(0.93 0.040 95);
  --oc-yellow-2: oklch(0.88 0.070 95);
  --oc-yellow-3: oklch(0.82 0.100 95);
  --oc-yellow-4: oklch(0.75 0.130 95);
  --oc-yellow-5: oklch(0.68 0.150 95);
  --oc-yellow-6: oklch(0.62 0.160 95);
  --oc-yellow-7: oklch(0.56 0.160 95);
  --oc-yellow-8: oklch(0.5 0.150 95);
  --oc-yellow-9: oklch(0.44 0.140 95);

  --oc-orange-0: oklch(0.965 0.020 62);
  --oc-orange-1: oklch(0.93 0.040 62);
  --oc-orange-2: oklch(0.88 0.070 62);
  --oc-orange-3: oklch(0.82 0.100 62);
  --oc-orange-4: oklch(0.75 0.130 62);
  --oc-orange-5: oklch(0.68 0.150 62);
  --oc-orange-6: oklch(0.62 0.160 62);
  --oc-orange-7: oklch(0.56 0.160 62);
  --oc-orange-8: oklch(0.5 0.150 62);
  --oc-orange-9: oklch(0.44 0.140 62);
}

/* ===================================================================
   NAV MODE: classic

   No rail. Redmine's own navigation stays exactly where it is — the
   global bar across the top, the project tabs beneath it. The runtime
   in this folder never builds a rail, so the variant is decided when
   the file is written rather than read from CSS at load time; reading a
   custom property at DOMContentLoaded races the stylesheet.

   --t-nav is declarative — it records the variant for anyone reading
   the file. The #rm-rail reset is insurance for the one case that would
   otherwise look broken: a rail-variant theme.js paired with this
   stylesheet, which would leave a rail overlapping the content.
   =================================================================== */
:root { --t-nav: classic; }

#rm-rail { display: none; }
body.rm-has-rail #wrapper, body.rm-rail-collapsed #wrapper { margin-inline-start: 0; }

/* ===================================================================
   REAL-INSTALL CORRECTIONS

   Reported from a live Redmine 7 install in dark mode. Three of the four
   share one cause: jstoolbar.css is page-specific, so Redmine adds it
   through yield :header_tags — AFTER the theme, which sits in the
   'application' slot. Every theme rule therefore loses a specificity
   tie with it, exactly as it does with responsive.css. The toolbar
   rules earlier in this file are plain .jstElements selectors, so core
   won them back: buttons kept core's --oc-gray-0 chrome, and with the
   dark-mode invert on top that turned all twenty into identical grey
   slabs; core's inline-block, fixed-26px strip also won over the flex
   row, so the buttons overflowed the editor and overlapped each other.

   The rules below are the same intent at body-level specificity.
   =================================================================== */

/* --- Wiki toolbar: chrome, layout and glyph colour --- */
body .jstElements {
  display: flex; flex-wrap: wrap; align-items: center; gap: 3px;
  block-size: auto; padding: 4px 0 6px; vertical-align: baseline;
}
body .jstElements button {
  inline-size: 26px; block-size: 26px; margin: 0; padding: 4px; opacity: 1;
  /* transparent chrome matters: the invert below applies to the whole
     element, so any fill would inflate into a light slab */
  background-color: var(--t-jst-bg);
  border: 1px solid var(--t-jst-border);
  border-radius: var(--t-radius);
  background-position: 50% 50%; background-repeat: no-repeat; background-size: 15px 15px;
  filter: invert(var(--t-icon-invert));
}
body .jstElements button:hover { background-color: var(--t-jst-hover); border-color: var(--t-jst-border); }
body .jstSpacer { inline-size: 1px; block-size: 18px; background: var(--t-border); margin-inline: 5px; padding: 0; border: 0; font-size: 0; }
body .jstElements .help { float: none; margin-inline-start: auto; padding: 0; align-self: center; }
body .jstElements .help a { color: var(--t-dim); font-size: 0.75rem; }
body #content .jstTabs.tabs { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 6px 12px; block-size: auto; min-block-size: 0; overflow: visible; position: relative; padding: 0; }
body #content .jstTabs.tabs ul { position: static; display: flex; gap: 2px; inline-size: auto; min-inline-size: 0; block-size: auto; overflow: visible; margin: 0; flex: 0 0 auto; }
body #content .jstTabs.tabs li { display: inline-block; float: none; block-size: auto; }
body #content .jstTabs.tabs .jstElements { flex: 1 1 100%; }
body .jstEditor textarea { border-start-start-radius: 0; border-start-end-radius: 0; }

/* --- Sticky issue header and the tab scroll arrows ---
   Both are painted from --oc-white. Rather than depend on that remap
   surviving every load order, name the surface directly. --- */
body #sticky-issue-header {
  background: var(--t-surface); color: var(--t-text);
  border-block-end: 1px solid var(--t-border); box-shadow: var(--t-shadow);
}
body #sticky-issue-header a { color: var(--t-accent-text); }
body .tabs-buttons { background: transparent; }
body .tabs-buttons button, body button.tab-left, body button.tab-right {
  background: var(--t-surface); color: var(--t-text);
  border: 1px solid var(--t-border); border-radius: var(--t-radius); padding: 0 4px;
}
body .tabs-buttons button:hover, body button.tab-left:hover, body button.tab-right:hover { background: var(--t-surface-2); }
body .tabs-buttons svg, body button.tab-left svg, body button.tab-right svg { stroke: var(--t-text); fill: none; }

/* --- Flyout: overlay, not a push ---
   Core slides the whole page sideways with inset-inline-end, which moves
   the header and content out from under the user's thumb and cannot be
   animated smoothly because it reflows every frame. Draw the panel over
   the page instead, on its own layer, with a scrim behind it. --- */
@media screen and (max-width: 899px) {
  /* Core sets overflow:hidden on <html> while the flyout is open, to stop the
     page behind it scrolling. That also removes the scrollbar, so the viewport
     widens by its width and everything anchored to the right edge — the header,
     and the toggle the user just tapped — jumps sideways under their finger.
     Reserving the gutter keeps the layout width identical either way. */
  html { scrollbar-gutter: stable; }

  #wrapper .flyout-menu {
    position: fixed; inset-block: 0; inset-inline-end: 0; inset-inline-start: auto;
    inline-size: 288px; max-inline-size: 86vw; block-size: 100%;
    transform: translateX(100%);
    transition: transform .22s cubic-bezier(.4, 0, .2, 1);
    z-index: 60; overflow-y: auto; overscroll-behavior: contain;
    box-shadow: -8px 0 24px oklch(0 0 0 / .35);
  }
  html.flyout-is-active #wrapper .flyout-menu { transform: translateX(0); }

  /* cancel core's page shift — the panel is over the page now */
  html.flyout-is-active #wrapper,
  html.flyout-is-active #header { inset-inline-end: 0; }

  /* scrim */
  html.flyout-is-active body::after {
    content: ""; position: fixed; inset: 0;
    background: oklch(0 0 0 / .45); z-index: 55;
  }

  /* the toggle becomes the close control, so it has to sit above both */
  body #header a.mobile-toggle-button { position: relative; z-index: 70; }
  html.flyout-is-active #header a.mobile-toggle-button { color: var(--t-chrome-text); }

  /* core's own close glyph is a bare × at the panel edge; give it the same
     44px target as every other row and align it to the panel, not the page */
  #wrapper .flyout-menu .flyout-menu__search { padding-block-start: 10px; }
}

/* ===================================================================
   RAIL ACCOUNT CONTROL

   Replaces the bare sign-out link at the foot of the rail with the same
   control the classic variants get from Redmine's own top bar: the user
   behind a person icon, opening the account menu.

   Expanded it reads icon + name; collapsed — either by the toggle or
   automatically in the 900-1180 range — the icon alone. The name never
   widens the rail: it truncates. The menu itself is fixed-positioned
   from JS, so it opens clear of the rail in either state instead of
   being clipped to 56px.
   =================================================================== */
#rm-rail .rm-rail-account {
  display: flex; align-items: center; gap: 10px;
  inline-size: 100%; padding: 7px 9px;
  border: 0; border-radius: var(--t-radius);
  background: transparent; color: var(--t-rail-text);
  font: inherit; font-size: 0.8125rem; font-weight: 500;
  text-align: start; cursor: pointer;
}
#rm-rail .rm-rail-account:hover { background: color-mix(in oklab, var(--t-rail-text) 10%, transparent); }
#rm-rail .rm-rail-account .rm-rail-label { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#rm-rail .rm-rail-account .rm-rail-caret { flex: 0 0 auto; inline-size: 14px; block-size: 14px; opacity: .65; transition: transform .15s ease; }
#rm-rail .rm-rail-account[aria-expanded="true"] .rm-rail-caret { transform: rotate(180deg); }

body.rm-rail-collapsed #rm-rail .rm-rail-account { justify-content: center; padding-inline: 0; }
body.rm-rail-collapsed #rm-rail .rm-rail-account .rm-rail-caret { display: none; }

@media screen and (min-width: 900px) and (max-width: 1180px) {
  #rm-rail .rm-rail-account { justify-content: center; padding-inline: 0; }
  #rm-rail .rm-rail-account .rm-rail-caret { display: none; }
}

.rm-rail-menu {
  position: fixed; z-index: 80;
  min-inline-size: 208px; max-inline-size: 264px;
  background: var(--t-surface); border: 1px solid var(--t-border);
  border-radius: var(--t-radius); box-shadow: var(--t-shadow); padding: 6px;
}
.rm-rail-menu[hidden] { display: none; }
.rm-rail-menu-head {
  display: flex; flex-direction: column; gap: 1px;
  padding: 6px 8px 8px; margin-block-end: 4px;
  border-block-end: 1px solid var(--t-border);
}
.rm-rail-menu-name { font-size: 0.8125rem; font-weight: 600; color: var(--t-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-rail-menu-login { font-size: 0.6875rem; color: var(--t-dim); }
.rm-rail-menu a {
  display: block; padding: 8px; border-radius: var(--t-radius);
  color: var(--t-text); font-size: 0.8125rem; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rm-rail-menu a:hover { background: var(--t-accent-soft); color: var(--t-accent-text); text-decoration: none; }

/* the rail is withdrawn below 900px, so its menu goes with it */
@media screen and (max-width: 899px) { .rm-rail-menu { display: none; } }

/* ===================================================================
   ONE ACTION BAR OUT OF FLOW, NOT ALL OF THEM

   Redmine renders more than one .contextual on some pages — the issue
   action menu repeats below the history. Only the page's own action bar
   belongs on the title row: the first child of #content, or the one
   immediately after a flash message. Those two are floated by the block
   on the flash icon and the title row, further down.

   This rule is for every OTHER .contextual: it stays where Redmine put
   it, laid out as a flex row rather than a float, so it still cannot
   shrink its siblings.
   =================================================================== */
#content > .contextual {
  position: static; float: none;
  display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px;
  inline-size: auto; margin-block: 14px 0;
}

@media screen and (max-width: 899px) {
  body #content > .contextual { inline-size: 100%; margin-block: 0 12px; }
}

/* ===================================================================
   WIKI TOOLBAR DRAWN OVER THE TEXTAREA

   SUPERSEDED — this diagnosed the wrong element. The real cause is the
   jstoolbar DOM shape, handled in the block further down this file; the
   rules here are kept because the height-vs-block-size cascade they
   describe is a genuine hazard, not because they fix the overlap.

   The toolbar is given its own row inside .jstTabs.tabs (flex-wrap +
   flex: 1 1 100%) so it grows instead of clipping when it wraps. That
   row only fits if the container can grow, and the container was only
   told to grow via 'block-size: auto'.

   Core writes the physical 'height: 42px'. Logical and physical
   properties share one computed value, so the winner is decided by the
   normal cascade — and in Redmine 7 core's stylesheet is injected after
   the theme in the 'application' slot. A logical declaration therefore
   cannot beat a physical one from core on specificity alone at these
   weights: the container stayed 42px, the wrapped toolbar row overflowed
   it, and 'overflow: visible' let it paint over the textarea below.

   The mock never showed this because it has no core stylesheet, so
   'block-size: auto' was unopposed.

   Both spellings are set here, on the same body-prefixed selector the
   rest of the toolbar overrides use.
   =================================================================== */
body #content .jstTabs.tabs {
  height: auto; min-height: 0; max-height: none;
  block-size: auto; min-block-size: 0; max-block-size: none;
}
body #content .jstTabs.tabs .jstElements {
  height: auto; block-size: auto;
}

/* ===================================================================
   GANTT OPTIONS ROW: CONTROLS DRAWN OVER EACH OTHER

   #query_form_with_buttons holds three siblings: the fieldsets, a
   p.contextual (the zoom links), and a p.buttons (months / month / year
   / Apply / Clear). Core floats p.contextual to the inline end and lets
   p.buttons flow underneath it — inline content wraps around a float, so
   on a wide screen the two share one line harmlessly.

   Earlier in this file p.buttons is given 'display: flex' to space its
   actions, and that is what breaks it. Inline content wraps around a
   float; a flex container instead avoids it, shrinking to the space left
   beside it. On a phone almost nothing is left: the row collapses to
   about 27px and its controls — the month count, the month and year
   selects, Apply and Clear — overflow it and land on top of each other.

   Fix: lay the container out as a wrapping flex row so the two rows are
   real siblings and the float is dropped. Desktop keeps the zoom links
   at the inline end via auto margin; under 900px they take their own
   row. Scoped to the container, so it applies wherever this form is used
   (gantt and the issue list alike).
   =================================================================== */
body #query_form_with_buttons {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
}
body #query_form_with_buttons > #query_form_content,
body #query_form_with_buttons > fieldset { flex: 1 1 100%; min-inline-size: 0; }
body #query_form_with_buttons > p.buttons {
  order: 1; flex: 1 1 auto; min-inline-size: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0;
}
body #query_form_with_buttons > p.contextual {
  order: 2; flex: 0 1 auto; float: none; margin: 0; margin-inline-start: auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
}
/* the month count is two characters wide; core sizes it with a size attr
   that the theme's own input width would otherwise stretch */
body #query_form_with_buttons > p.buttons input[type="text"] { inline-size: 4rem; }
body #query_form_with_buttons > p.buttons select { max-inline-size: 100%; }

@media screen and (max-width: 899px) {
  body #query_form_with_buttons > p.contextual {
    order: 3; flex: 1 1 100%; margin-inline-start: 0;
  }
}

/* ===================================================================
   WIKI TOOLBAR, WRITTEN AGAINST THE REAL JSTOOLBAR DOM

   Earlier rules in this file assumed .jstElements was a sibling of the
   tab <ul>. It is not. jstoolbar.js builds three <li> inside that <ul> —
   Edit, Preview, and a third <li class="tab-elements"> that CONTAINS the
   toolbar:

     .jstTabs.tabs > ul > li            (Edit)
                       > li            (Preview)
                       > li.tab-elements > .jstElements > button…

   So 'flex: 1 1 100%' on .jstElements was sizing a block inside an <li>
   rather than giving the toolbar its own row, the <ul> overflowed its
   container, and the toolbar's last row landed on the textarea. The mock
   hand-wrote the flatter markup, which is why this only ever appeared on
   a real install.

   The wrapping row is therefore the <ul>, and the full-width item is
   li.tab-elements. Core's fixed 42px li height and its li:before strut
   are dropped on that one <li> so the toolbar can grow to as many rows
   as it needs.
   =================================================================== */
body #content .jstTabs.tabs {
  display: block; padding: 0; overflow: visible;
  height: auto; min-height: 0; max-height: none;
  block-size: auto; min-block-size: 0; max-block-size: none;
}
body #content .jstTabs.tabs ul {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  gap: 2px; margin: 0; padding: 0;
  inline-size: 100%; min-inline-size: 0;
  height: auto; block-size: auto; overflow: visible;
}
body #content .jstTabs.tabs li {
  display: block; float: none; list-style: none;
  height: auto; block-size: auto;
}
body #content .jstTabs.tabs li.tab-elements {
  flex: 1 1 100%; min-inline-size: 0;
  height: auto; block-size: auto;
}
/* core pads every tab li with a full-height inline strut; on the toolbar
   li that only adds a phantom 42px row */
body #content .jstTabs.tabs li.tab-elements::before { content: none; display: none; }

body #content .jstTabs.tabs li.tab-elements .jstElements {
  display: flex; flex-wrap: wrap; align-items: center; gap: 3px;
  height: auto; block-size: auto; padding: 4px 0 6px;
  inline-size: 100%; vertical-align: baseline;
}
body #content .jstTabs.tabs li.tab-elements .jstElements.hidden { display: none; }

/* ===================================================================
   FLASH ICON, AND THE ACTION BAR ON THE TITLE ROW

   Two faults visible together after saving an issue.

   1. The tick was drawn outside the banner. Core reserves room for it
      with 'padding-inline: 30px 4px' on the banner and then pulls the
      icon back into that reserve with 'margin-inline: -26px 4px'. This
      theme restyles the banner padding to '10px 14px', which removes the
      reserve but not the pull, so the icon landed left of the box. The
      banner is now a flex row with a real gap and the pull is zeroed —
      no reserve to depend on.

   2. Edit / Unwatch / Copy overlapped the banner and sat above the
      title. The bar was positioned absolutely and offset by a hardcoded
      'calc(var(--t-pad-b) + 46px)' — a guess at the banner's height that
      is wrong as soon as the banner wraps or the font metrics differ.

      Redmine's own order is flash, then .contextual, then the h2. A
      float is what that markup wants: the title flows up beside the bar,
      which is the alignment with 'Task #399' that was missing, and a
      float cannot overlap the banner block above it at any height.

      On the width note further up this file: that measurement stands, and
      a float CAN shrink a BFC-establishing sibling. Measured here on the
      project overview (splitcontent, overflow-x:auto) and the issue list
      (autoscroll), at 1280 and 1000, it does not — the sibling's top
      always lands below the float's bottom, so the two never share a
      band. That holds even with the bar cloned out to 65px, and when the
      heading's margin is removed to force the issue.

      But displacing the sibling and narrowing it are both legal ways for
      a browser to keep it clear of a float, and nothing in the markup
      forces the first. The 'clear' below makes the displacement explicit
      rather than left to the layout engine, so the 412px-instead-of-592px
      shrink recorded up there cannot come back through this float.
   =================================================================== */
body div.flash {
  display: flex; align-items: center; gap: 8px;
  padding-block: 10px; padding-inline: 14px;
}
body div.flash svg.icon-svg { margin-inline: 0; flex: 0 0 auto; }

body #content > .contextual:first-child,
body #content > div.flash + .contextual {
  position: static; float: inline-end; clear: none;
  inset-block-start: auto; inset-inline-end: auto;
  margin: 0 0 0 12px; max-inline-size: 100%;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
}
/* the heading after the bar must flow beside the float, not below it */
body #content > .contextual + h2,
body #content > .contextual + h3,
body #content > .contextual + p.subtitle { clear: none; margin-block-start: 0; }

@media screen and (max-width: 899px) {
  body #content > .contextual:first-child,
  body #content > div.flash + .contextual {
    float: none; inline-size: 100%; margin: 0 0 12px 0;
  }
}


/* Inside .splitcontent the fields had 'max-inline-size: none' and no shrink
   floor, so at laptop widths a long <select> kept its intrinsic width and
   pushed itself onto a second line under its label. Let them shrink. */
body .rm-editor .splitcontent p > select,
body .rm-editor .splitcontent p > input[type=text],
body .rm-editor .splitcontent p > input[type=date],
body .rm-editor .splitcontent p > input[type=number] {
  flex: 1 1 0; min-inline-size: 0; max-inline-size: none;
}
body .rm-editor .splitcontent p { flex-wrap: nowrap; }

/* The two siblings named in the width note: keep them below the floated
   bar rather than beside it, so neither can ever be narrowed by it. Where
   the bar is short — the issue list, where the table starts 285px lower —
   this changes nothing. */
body #content > .splitcontent,
body #content > .autoscroll,
body #content > .splitcontent + .autoscroll { clear: inline-end; }