/* Morganite, a theme for Redmine 7
 * Copyright (C) 2026  Nick Gorbikoff
 *
 * 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
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program; if not, write to the Free Software
 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA. */

@import url("/assets/application-c183e617.css");

/* 1. Light tokens.
 * Redmine 7 takes its colours from the Open Color palette (--oc-gray-0 to -9, and the same ramps for each hue, each with an
 * -rgb twin) plus a few --color-* names. Remapping those variables recolours most of the application. */
:root {
  --fonts-main: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  /* Warm neutrals. Light steps (0 to 4) are surfaces and borders, dark steps (5 to 9) are text. */
  --oc-gray-0: #fcfbfa;
  --oc-gray-1: #f7f5f3;
  --oc-gray-2: #f0ede9;
  --oc-gray-3: #e7e3de;
  --oc-gray-4: #e3ded9;
  --oc-gray-5: #7a726d;
  --oc-gray-6: #6b635f;
  --oc-gray-7: #544d49;
  --oc-gray-8: #3a3532;
  --oc-gray-9: #231f1d;
  --oc-gray-9-rgb: 35, 31, 29;

  /* Coral replaces the blue and indigo ramps: links, selected items, focus. Step 7 is the text colour (5.3 to 1 on white). */
  --morganite-coral-0: #fff5f4;
  --morganite-coral-1: #ffe5e3;
  --morganite-coral-2: #ffcfcc;
  --morganite-coral-3: #ffb0ab;
  --morganite-coral-4: #fb8f8a;
  --morganite-coral-5: #ee6f6f;
  --morganite-coral-6: #dc4f55;
  --morganite-coral-7: #c23a43;
  --morganite-coral-8: #a42c36;
  --morganite-coral-9: #7d1f28;
  --oc-blue-0: var(--morganite-coral-0);
  --oc-blue-1: var(--morganite-coral-1);
  --oc-blue-2: var(--morganite-coral-2);
  --oc-blue-3: var(--morganite-coral-3);
  --oc-blue-4: var(--morganite-coral-4);
  --oc-blue-5: var(--morganite-coral-5);
  --oc-blue-6: var(--morganite-coral-6);
  --oc-blue-7: var(--morganite-coral-7);
  --oc-blue-8: var(--morganite-coral-8);
  --oc-blue-9: var(--morganite-coral-7); /* Redmine colours its links with step 9 */
  --oc-blue-1-rgb: 255, 229, 227;
  --oc-blue-7-rgb: 194, 58, 67;
  --oc-indigo-0: var(--morganite-coral-0);
  --oc-indigo-1: var(--morganite-coral-1);
  --oc-indigo-5: var(--morganite-coral-5);
  --oc-indigo-9: var(--morganite-coral-9);

  --color-top-menu-background: #fff;
  --color-header-background: var(--morganite-page); /* the phone header uses it; the wide layout paints its own */

  --morganite-page: #fff;
  --morganite-rail: #1f1b1a;
  --morganite-rail-ink: #d8d1cd;
  --morganite-rail-width: 224px;
  --morganite-radius: 10px;
}

/* 2. Dark tokens: see the one block at the end of this file. */

body { color: var(--oc-gray-9); background: var(--morganite-page); }
a:hover, a:active { color: var(--morganite-coral-8); text-decoration: underline; }
#wrapper { background: var(--morganite-page); }

/* 3. Layout shell: top bar, project header, menu, sidebar. */
nav.top-menu {
  background: var(--color-top-menu-background);
  color: var(--oc-gray-6);
  min-block-size: 44px;
  padding-inline: 24px;
  border-block-end: 1px solid var(--oc-gray-4);
}
.top-menu__links a, .top-menu__links a:link, .top-menu__links a:visited, #account .dropdown-trigger {
  color: var(--oc-gray-7);
  border-radius: 6px;
  padding-block: 5px;
  padding-inline: 10px;
}
.top-menu__links a:hover, #account .dropdown-trigger:hover {
  color: var(--oc-gray-9);
  background-color: var(--oc-gray-2);
}
.top-menu__links svg.icon-svg, #account .dropdown-trigger .icon-svg { stroke: var(--oc-gray-7); }
.top-menu__links a:hover svg.icon-svg, #account .dropdown-trigger:hover .icon-svg { stroke: var(--oc-gray-9); }

#header {
  background: var(--morganite-page);
  color: var(--oc-gray-9);
  padding-inline: 24px;
  border-block-end: 1px solid var(--oc-gray-4);
}
#header a { color: var(--oc-gray-7); }
#header a:hover { color: var(--oc-gray-9); }
#header h1 { font-size: 1.25rem; font-weight: 650; letter-spacing: -0.01em; }
#header h1 .breadcrumbs { color: var(--oc-gray-6); letter-spacing: 0; }
#quick-search #q {
  border-radius: 999px;
  border-color: var(--oc-gray-4);
  background: var(--oc-gray-0);
  padding-inline: 14px;
  inline-size: 180px;
  block-size: 30px;
}
#quick-search form label { color: var(--oc-gray-6); }

/* Phones: Redmine hides the project name and shows a menu button in a 64px bar, and slides the menus in from the right on the
 * same dark colour as the wide layout's left menu. */
body .flyout-menu { background-color: var(--morganite-rail); }
body .flyout-menu h3 { background-color: #2c2625; border-block-color: var(--morganite-rail); color: var(--morganite-rail-ink); }
body #header #project-jump .drdn-trigger { color: var(--oc-gray-8); }
body #header a.mobile-toggle-button { color: var(--oc-gray-7); }
body #header { border-block-end: 1px solid var(--oc-gray-4); }

#main-menu { background: transparent; padding-inline: 16px; }
#main-menu li a {
  color: var(--oc-gray-6);
  padding-block: 9px 7px;
  border-radius: 8px 8px 0 0;
}
#main-menu li a:hover { background: var(--oc-gray-1); color: var(--oc-gray-9); }
#main-menu li a.selected, #main-menu li a.selected:hover {
  background: transparent;
  color: var(--oc-gray-9);
  font-weight: 600;
  box-shadow: inset 0 -2px 0 var(--morganite-coral-6);
}
#main-menu li a.new-object, #main-menu li a.new-object:hover {
  background: var(--morganite-coral-7);
  color: #fff;
  border-radius: 8px;
  box-shadow: none;
}

/* On wide screens all navigation lives in a dark left sidebar: the title, search and project jump, the general links, the project
 * menu (or the administration menu) and, at the bottom, the profile. Plain CSS: the header's and the top menu's children become
 * grid items of the page wrapper. Narrower screens, and the login page, keep Redmine's own arrangement. */
@media (min-width: 1100px) {
  body:not(.controller-account) #wrapper {
    display: grid;
    grid-template-columns: var(--morganite-rail-width) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto 1fr auto;
    grid-template-areas:
      "brand   main"
      "search  main"
      "general main"
      "menu    main"
      "filler  main"
      "profile footer";
    background: linear-gradient(to right, var(--morganite-rail) var(--morganite-rail-width), var(--morganite-page) var(--morganite-rail-width));
  }
  body:not(.controller-account) #header, body:not(.controller-account) nav.top-menu { display: contents; }

  body:not(.controller-account) #header h1 {
    grid-area: brand;
    background: var(--morganite-rail);
    color: #fff;
    padding: 18px 20px 14px;
    min-block-size: 0;
    justify-content: center;
  }
  body:not(.controller-account) #header h1 .breadcrumbs, body:not(.controller-account) #header h1 .breadcrumbs a { color: var(--morganite-rail-ink); }
  body:not(.controller-account) #header h1 a { color: #fff; }

  /* Search and project jump, stacked. */
  body:not(.controller-account) #quick-search {
    grid-area: search;
    float: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    min-block-size: 0;
    padding: 0 12px 14px;
    background: var(--morganite-rail);
  }
  body:not(.controller-account) #quick-search form { display: flex; flex-direction: column; gap: 4px; margin: 0; }
  body:not(.controller-account) #quick-search form label { margin: 0; font-size: 0.75rem; color: var(--morganite-rail-ink); opacity: 0.75; }
  body:not(.controller-account) #quick-search form label a { color: var(--morganite-rail-ink); }
  body:not(.controller-account) #quick-search #q {
    inline-size: 100%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #fff;
  }
  body:not(.controller-account) #quick-search #q:focus { outline-color: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.5); }
  body:not(.controller-account) #project-jump.drdn { inline-size: 100%; display: block; }
  body:not(.controller-account) #header #project-jump .drdn-trigger {
    background-color: rgba(255, 255, 255, 0.08);
    background-image: none;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    color: #fff;
    padding-block: 6px;
    padding-inline: 12px;
    box-sizing: border-box;
    inline-size: 100%;
    block-size: auto;
    min-block-size: 34px;
    line-height: 1.4;
  }
  body:not(.controller-account) #project-jump .drdn-trigger::after { content: "\25BE"; float: inline-end; opacity: 0.7; }
  /* The popup opens from the left edge of the rail; Redmine anchors it to the right edge, which pushes it off the page here. */
  body:not(.controller-account) #project-jump .drdn-content {
    z-index: 60;
    inset-inline-start: 0;
    inset-inline-end: auto;
    inline-size: 280px;
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(35, 31, 29, 0.18);
  }

  /* General links. */
  body:not(.controller-account) .general-menu {
    grid-area: general;
    padding: 4px 12px 12px;
    background: var(--morganite-rail);
    border-block-end: 1px solid rgba(255, 255, 255, 0.08);
  }
  body:not(.controller-account) .top-menu__links ul { flex-direction: column; gap: 2px; }
  body:not(.controller-account) .top-menu__links a, body:not(.controller-account) .top-menu__links a:link, body:not(.controller-account) .top-menu__links a:visited {
    display: block;
    color: var(--morganite-rail-ink);
    padding: 8px 12px;
    border-radius: 8px;
  }
  body:not(.controller-account) .top-menu__links a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; text-decoration: none; }

  /* The profile, at the bottom of the sidebar; its dropdown opens upwards. */
  body:not(.controller-account) .profile-menu {
    grid-area: profile;
    padding: 12px;
    background: var(--morganite-rail);
    border-block-start: 1px solid rgba(255, 255, 255, 0.08);
  }
  body:not(.controller-account) #account .dropdown-trigger { color: var(--morganite-rail-ink); }
  body:not(.controller-account) #account .dropdown-trigger:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
  body:not(.controller-account) #account .dropdown-trigger .icon-svg { stroke: currentColor; }
  body:not(.controller-account) #account .dropdown-content {
    inset-block-start: auto;
    inset-block-end: calc(100% + 8px);
    inset-inline-start: 0;
    inset-inline-end: auto;
    min-inline-size: 220px;
  }

  /* The project menu. */
  body:not(.controller-account) #main-menu {
    grid-area: menu;
    position: static;
    padding: 12px 12px 14px;
    background: var(--morganite-rail); /* the wrapper's gradient paints the rail too; this keeps the colour on the element itself */
  }
  body:not(.controller-account) #main-menu ul { flex-direction: column; align-items: stretch; gap: 2px; min-block-size: 0; }
  body:not(.controller-account) #main-menu li { display: block; padding: 0; }
  body:not(.controller-account) #main-menu li a {
    display: block;
    color: var(--morganite-rail-ink);
    padding: 8px 12px;
    border-radius: 8px;
  }
  body:not(.controller-account) #main-menu li a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
  body:not(.controller-account) #main-menu li a.selected, body:not(.controller-account) #main-menu li a.selected:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    box-shadow: none;
  }
  body:not(.controller-account) #main-menu li:has(a#new-object) { padding: 0 0 10px; position: relative; }
  body:not(.controller-account) #main-menu li a.new-object, body:not(.controller-account) #main-menu li a.new-object:hover {
    text-align: center;
    background: var(--morganite-coral-7);
    color: #fff;
  }
  /* The "+" menu opens to the right of the sidebar, not over the items below it. */
  body:not(.controller-account) #main-menu .menu-children {
    inset-block-start: 0;
    inset-inline-start: calc(100% - 4px);
    inline-size: 220px;
    padding: 6px;
    border: 1px solid var(--oc-gray-3);
    border-radius: 12px;
    background: var(--oc-white);
    box-shadow: 0 12px 32px rgba(35, 31, 29, 0.14);
  }
  body:not(.controller-account) #main-menu .menu-children li a {
    color: var(--oc-gray-8);
    background: transparent;
    border-radius: 8px;
    padding: 7px 10px;
  }
  body:not(.controller-account) #main-menu .menu-children li a:hover { color: var(--oc-gray-9); background: var(--oc-gray-1); }

  body:not(.controller-account) #main { grid-area: main; }
  body:not(.controller-account) #footer { grid-area: footer; }

  /* Administration: the admin menu takes the project menu's place. Subpages keep it in the sidebar; the index keeps it in the
   * page, so the page contents become grid items of the wrapper to put the list in the rail and the title in the main area. */
  body:not(.controller-account):has(#admin-menu) #main { display: contents; }
  body:not(.controller-account):has(#admin-menu) #sidebar {
    grid-area: menu;
    inline-size: auto;
    padding: 12px 12px 14px;
    border: 0;
    background: var(--morganite-rail);
    color: var(--morganite-rail-ink);
  }
  body:not(.controller-account):has(#admin-menu) #sidebar-switch-panel { display: none; }
  body:not(.controller-account):has(#admin-menu) #sidebar h3 { color: var(--morganite-rail-ink); opacity: 0.7; padding-inline: 12px; }
  body:not(.controller-account):has(#admin-menu) #content { grid-area: main; min-inline-size: 0; }
  body:not(.controller-account):has(#content #admin-menu) #content { display: contents; }
  body:not(.controller-account):has(#content #admin-menu) #content > h2 { grid-area: main; padding: 28px 28px 0; margin: 0; }
  body:not(.controller-account):has(#content #admin-menu) #admin-menu { grid-area: menu; background: var(--morganite-rail); padding: 12px 12px 14px; }
  #admin-menu a, #sidebar #admin-menu a {
    display: block;
    color: var(--morganite-rail-ink);
    padding: 8px 12px;
    border-radius: 8px;
  }
  #admin-menu a svg, #admin-menu a .icon-svg { stroke: currentColor; }
  #admin-menu a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; text-decoration: none; }
  #admin-menu a.selected, #admin-menu a.selected:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
}

#main { background: var(--morganite-page); }
#content {
  background: transparent;
  padding-block: 28px 24px;
  padding-inline: 28px;
}
#content > h2 { color: var(--oc-gray-9); font-size: 1.5rem; font-weight: 650; letter-spacing: -0.01em; margin-block: 0 16px; }
#content h3 { color: var(--oc-gray-9); font-weight: 600; }
/* Headings inside wiki pages and descriptions: one scale, ink coloured, below the page title. */
.wiki h1, .wiki h2, .wiki h3, .wiki h4 { color: var(--oc-gray-9); font-weight: 650; letter-spacing: -0.01em; }
.wiki h1 { font-size: 1.45rem; }
.wiki h2 { font-size: 1.2rem; }
.wiki h3 { font-size: 1.05rem; }
.wiki table { border-collapse: collapse; }
.wiki table th, .wiki table td { border: 1px solid var(--oc-gray-4); padding: 6px 10px; }
.wiki table th { background: var(--oc-gray-1); }
#sidebar { background: transparent; border-inline-start: 1px solid var(--oc-gray-3); inline-size: 232px; }
#sidebar h3 { color: var(--oc-gray-6); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; }
#footer { background: transparent; border-block-start: 1px solid var(--oc-gray-3); color: var(--oc-gray-6); }

/* Administration, below the wide layout: Redmine lists the admin menu in the page on the index and in the right-hand sidebar on
 * every other admin page, so it jumps from one side to the other. The sidebar sits on the left, where the index list is. */
@media (max-width: 1099px) {
  #main:has(#sidebar #admin-menu) { flex-direction: row; }
  #main:has(#sidebar #admin-menu) #sidebar {
    border-inline-start: 0;
    border-inline-end: 1px solid var(--oc-gray-3);
    padding-inline: 28px 16px;
    inline-size: 250px;
  }
  #main:has(#sidebar #admin-menu) #sidebar-switch-panel { display: none; }
}

/* 4. Issues: the list, the issue page, history. */
table.list { border: 0; }
table.list th {
  background: transparent;
  color: var(--oc-gray-6);
  font-weight: 500;
  font-size: 0.8125rem;
  padding-block: 10px;
  border-block-end: 1px solid var(--oc-gray-4);
}
table.list th a { color: var(--oc-gray-6); }
table.list td { padding-block: 11px; border-block-start: 1px solid var(--oc-gray-2); }
/* Soft zebra stripes and thin column lines keep wide tables easy to follow; hover is a coral tint instead of Redmine's yellow. */
.box table.list:not(.odd-even) tbody tr:nth-child(even), .box .even,
table.list:not(.odd-even) tbody tr:nth-child(even), .even { background-color: var(--oc-gray-1); }
table.list:not(.odd-even) tbody tr:nth-child(odd), .odd { background-color: var(--oc-white); }
table.list:not(.odd-even) tbody tr:nth-child(odd):hover, .odd:hover,
table.list:not(.odd-even) tbody tr:nth-child(even):hover, .even:hover { background-color: var(--morganite-coral-0); }
table.list > thead > tr > th + th, table.list > tbody > tr > td + td { border-inline-start: 1px solid var(--oc-gray-3); }
table.list > tbody > tr.group > td { border-inline-start: 0; }
/* The subject is ink, the ticket number carries the accent. */
table.list td.subject a, table.list td.parent-subject a { color: var(--oc-gray-9); }
table.list td.subject a:hover, table.list td.parent-subject a:hover { color: var(--morganite-coral-7); }
table.list td.assigned_to a, table.list td.author a { color: var(--oc-gray-7); }

/* The issue: a quiet card instead of Redmine's yellow box, and calmer headings inside the description. */
div.issue {
  background: var(--oc-gray-0);
  border: 1px solid var(--oc-gray-3);
  border-radius: 14px;
  padding: 22px 24px;
}
#content div.issue div.wiki h1 { font-size: 1.3em; }
#content div.issue div.wiki h2 { font-size: 1.15em; }
#content div.issue div.wiki h3 { font-size: 1.02em; }

/* Avatars: Redmine's orange and pink do not reach 4.5 to 1 with white text, so those two are darker. */
.avatar-color-0 { background-color: #c92a2a; }
.avatar-color-1 { background-color: #b4540a; }
.avatar-color-7 { background-color: #c2255c; }

/* Small fixes found by the contrast check. */
span.badge.badge-count { background-color: var(--morganite-coral-7); }
a.issue.tracker-2, a.issue.tracker-2:visited { color: var(--morganite-coral-7); }
.syntaxhl .k { color: #006b00; }

/* The list as a to-do list: a round check before each subject (filled and ticked when the issue is closed), sections instead of
 * grouped table headers, and coral for what is overdue. The initials, the tracker chips and the view tabs come from one small
 * script that only reads the page. */
table.list td.subject::before {
  content: "";
  display: inline-block;
  box-sizing: border-box;
  inline-size: 16px;
  block-size: 16px;
  margin-inline-end: 8px;
  border: 1.5px solid #b9b0aa;
  border-radius: 50%;
  vertical-align: -3px;
  color: #fff;
  font-size: 10px;
  line-height: 13px;
  text-align: center;
}
table.list tr.issue.closed td.subject::before {
  content: "\2713";
  background: var(--morganite-coral-7);
  border-color: var(--morganite-coral-7);
}
table.list tr.issue.closed td.subject a { color: var(--oc-gray-6); }
table.list tr.issue.overdue td.due_date { color: var(--morganite-coral-7); font-weight: 600; }

table.list tr.group > td { padding-block: 18px 6px; background: var(--oc-white); border-block-start: 0; }
table.list tr.group span.name { color: var(--oc-gray-9); font-size: 0.95rem; font-weight: 650; }
table.list tr.group span.badge-count { background: transparent; color: var(--oc-gray-6); font-weight: 600; }

.tracker-chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--morganite-coral-0);
  color: #9c2b34;
  font-size: 0.75rem;
  font-weight: 500;
}
.assignee-initials {
  display: inline-grid;
  place-items: center;
  inline-size: 22px;
  block-size: 22px;
  margin-inline-end: 6px;
  border-radius: 50%;
  background: #c23a43;
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  vertical-align: middle;
}
.assignee-initials.tone-1 { background: #7a4fb0; }
.assignee-initials.tone-2 { background: #0b7a75; }
.assignee-initials.tone-3 { background: #b4540a; }
.assignee-initials.tone-4 { background: #2554c7; }
.assignee-initials.tone-5 { background: #15803d; }
/* With the initials in place the name stays for screen readers and is hidden from the eye, as the list is narrow. */
table.list td.assigned_to a.assignee-name {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
table.list td.assigned_to { white-space: nowrap; }

nav.view-tabs { display: flex; gap: 22px; margin-block: 0 14px; border-block-end: 1px solid var(--oc-gray-3); }
nav.view-tabs a, nav.view-tabs a:visited { padding: 8px 0; color: var(--oc-gray-6); border-block-end: 2px solid transparent; margin-block-end: -1px; }
nav.view-tabs a:hover { color: var(--oc-gray-9); text-decoration: none; }
nav.view-tabs a.selected { color: var(--oc-gray-9); border-color: var(--morganite-coral-6); font-weight: 600; }

/* Activity: a quiet date label, then a feed with hairlines. */
div#activity h3 {
  margin: 20px 0 4px;
  padding: 0 0 6px;
  background: transparent;
  border: 0;
  border-block-end: 1px solid var(--oc-gray-3);
  color: var(--oc-gray-6);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
div#activity dl { margin: 0; }
div#activity dt { background: transparent; border: 0; padding-block: 12px 0; }
div#activity dd { margin-block: 0; padding-block: 2px 12px; border-block-end: 1px solid var(--oc-gray-2); }
div#activity dd .description { color: var(--oc-gray-7); }

/* 5. Forms, buttons, flash messages, context menu, login. */
input[type=text], input[type=password], input[type=email], input[type=number], input[type=search], input[type=date],
input[type=url], input[type=tel], input:not([type]), select, textarea {
  border: 1px solid var(--oc-gray-4);
  border-radius: 8px;
  background-color: var(--oc-white);
  color: var(--oc-gray-9);
  padding-inline: 10px;
}
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=number]:focus, input[type=search]:focus,
input[type=date]:focus, input[type=url]:focus, input:not([type]):focus, select:focus, textarea:focus {
  outline: 3px solid var(--morganite-coral-1);
  outline-offset: 0;
  border-color: var(--morganite-coral-6);
}
input[type=submit], input[type=button], input[type=reset], button, a.button {
  border: 1px solid var(--oc-gray-4);
  border-radius: 8px;
  background: var(--oc-white);
  color: var(--oc-gray-8);
  padding-block: 5px;
  padding-inline: 14px;
  font-weight: 500;
  cursor: pointer;
}
input[type=submit]:hover, input[type=button]:hover, input[type=reset]:hover, button:hover, a.button:hover {
  background: var(--oc-gray-1);
  border-color: var(--oc-gray-5);
  text-decoration: none;
}
input[type=submit] {
  background: var(--morganite-coral-7);
  border-color: var(--morganite-coral-7);
  color: #fff;
}
input[type=submit]:hover {
  background: var(--morganite-coral-8);
  border-color: var(--morganite-coral-8);
}
div.flash { border-radius: 10px; border-width: 1px; }
#login-form {
  background: var(--oc-white);
  border: 1px solid var(--oc-gray-3);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 12px 40px rgba(35, 31, 29, 0.08);
}
#login-form a.lost_password { color: var(--morganite-coral-7); }

/* 6. Everything else follows from the tokens. Fix only what is clearly broken. */

/* 7. Dark, from the system setting. Supported, but not recommended: Morganite is designed in light and looks weaker in dark.
 * Every dark rule is in this one block; delete it to keep the theme light-only. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --oc-white: #1d1819;
    --oc-gray-0: #231d1f;
    --oc-gray-1: #2a2325;
    --oc-gray-2: #322a2c;
    --oc-gray-3: #3d3436;
    --oc-gray-4: #483e40;
    --oc-gray-5: #a89a9d;
    --oc-gray-6: #b8abae;
    --oc-gray-7: #cdc2c4;
    --oc-gray-8: #e2dadb;
    --oc-gray-9: #f6f1f1;
    --oc-gray-9-rgb: 246, 241, 241;

    /* Links and accents are the light end of the coral ramp; buttons keep step 7 with white text. */
    --oc-blue-0: #3a2326;
    --oc-blue-1: #4a2a2d;
    --oc-blue-7: var(--morganite-coral-4);
    --oc-blue-9: var(--morganite-coral-4);
    --oc-blue-1-rgb: 74, 42, 45;
    --oc-blue-7-rgb: 251, 143, 138;

    --color-top-menu-background: #1d1819;
    --morganite-page: #1d1819;
    --morganite-rail: #130f10;
  }

  a:hover, a:active { color: var(--morganite-coral-3); }
  table.list td.subject a:hover, table.list td.parent-subject a:hover,
  a.issue.tracker-2, a.issue.tracker-2:visited, #login-form a.lost_password { color: var(--morganite-coral-4); }
  #login-form { box-shadow: none; }
  nav.view-tabs a.selected { border-color: var(--morganite-coral-4); }
  .tracker-chip { background: #4a2a2d; color: #ffb0ab; }
  table.list tr.issue.closed td.subject::before { background: var(--morganite-coral-7); }
  table.list td.subject::before { border-color: #6d6264; }

  /* Redmine paints white text with the same variable that is now a dark surface, so white text on colour is set by hand. */
  [class*="avatar-color-"], span.badge.badge-count { color: #fff; }
  .pagination ul.pages li.current { background-color: var(--morganite-coral-7); border-color: var(--morganite-coral-7); }
  .pagination ul.pages li.current span { color: #fff; }
  .avatar-color-2 { color: #231f1d; }
  span.required { color: #ff8787; }
  a.issue.tracker-1, a.issue.tracker-1:visited { color: #ff8787; }

  /* Code blocks stay light: the syntax colours are made for a light background. */
  pre, div.wiki pre, div.pre-wrapper pre, code.syntaxhl, div.wiki code.syntaxhl, div.pre-wrapper code { background-color: #f6f3f1; color: #231f1d; }
  .avatar-color-5 { background-color: var(--morganite-coral-7); }
}