/*
 * "daidala" skin for Redmine 6.x and 7.0 - a visual theme consistent with the
 * daidala.tech landing page and the core /admin panel (task #7503, style reference #7283).
 *
 * Loaded by the plugin (view_layouts_base_html_head hook), NOT as a
 * Setting.ui_theme theme - Redmine scans themes only in Rails.root/themes and
 * Rails.root/app/assets/themes, not plugin_assets. The link is appended to
 * <head> (after core application.css and heads_for_theme), so overrides win
 * through the cascade without !important where specificity is sufficient.
 *
 * Forced dark-only mode (no switch) - the landing page has no light mode.
 * :root tokens match the landing page 1:1 (verified on live daidala.tech).
 *
 * v2 ([#8079]): repalette after the landing redesign - navy + brass + paper
 * (previously terminal green+cyan #7503). Fonts: Lato (sans, text/UI) + Source
 * Code Pro (mono, accents), self-hosted from assets/fonts/. Hook architecture
 * is unchanged - canonical v2 tokens plus v1 name aliases.
 *
 * v3 ([#12071]): fit to Redmine 7.0. Two core changes drive it. (1) The top bar
 * was rebuilt: #top-menu is now <nav class="top-menu"> with .general-menu /
 * .profile-menu, the account items moved into a dropdown behind an avatar, and
 * #loggedas is gone - its rules were removed, the dropdown got skin colors.
 * (2) Core switched its palette to Open Color (open-color.css) and added
 * dropdown.css; most of that switch is a value-preserving swap of the same
 * light hexes for --oc-* variables, so existing overrides still land. Where 7.0
 * introduced NEW light rules the skin did not cover, an override was added next
 * to the related rules below, each marked [#12071]. The skin still renders on
 * 6.1.x: most of those overrides match nothing there. Four of them DO match on
 * 6.1.2 and change how it looks - `#header a:hover` (6.1.2 core has no hover
 * rule for header links, so hover now goes to the accent), `div.wiki pre
 * .syntaxhl` (6.1.2 also paints .syntaxhl #fafafa, so the bright card inside
 * code blocks goes away there too), `.icon-ok svg.icon-svg` (the class exists in
 * 6.1.2) and `.box .even` (6.1.2 core has no .box exception, so boxed lists lose
 * their stripes). The first three fix the same defect on both versions; the
 * fourth makes 6.1.x look like 7.0 by choice.
 *
 * v4 ([#12139]): two light spots the skin had never covered on either version -
 * weekend cells in the calendar (`.cal .calbody.nwday`) and the row picked by
 * the context menu (`.context-menu-selection`). Neither is a 7.0 regression;
 * core paints both the same way in 6.1.2, so both overrides match there as well
 * and fix the same defect on both versions.
 *
 * v5 ([#12149]): a third light spot of the same kind - an issue entry in the
 * calendar (`.cal .calbody div.issue`), which core paints with the same rule it
 * uses for the issue page box. Not a 7.0 regression either; the override
 * matches and fixes it on both versions.
 *
 * v6 ([#12157]): --dim raised from #7C8DA1 to #9AA7B7. The old value read
 * 3.55:1 on --panel, below the 4.5:1 body-text floor, and this one token
 * carries every "closed / locked" text in the skin: closed issue and project
 * links, locked users, closed list rows and their status cell, the locked
 * badge. The new value clears 4.5:1 on every resting surface the token lands
 * on - --panel 4.92:1, --bg 6.88:1, --bg-soft 7.52:1, --warning-bg (today's
 * calendar cell) 5.75:1 - and stays a visible step below --muted (L* 68.0 vs
 * 74.8), so the paper / muted / dim hierarchy survives. Disabled context-menu
 * items keep the old value under the new --menu-disabled token, which exists
 * for that one rule and nothing else: WCAG exempts inactive controls, and on
 * the brass hover the raised value would fall to 1.05:1. Disabled form fields
 * are a different rule and stay on --muted, as [#11083] says lower down. A
 * hovered list row (--hover) still reads 4.22:1; that one is reported in
 * [#12160] and cleared by v7 below. This is a palette token, not a core
 * override, so it changes 6.1.x and 7.0 alike.
 *
 * v7 ([#12160]): the hovered list row v6 left open. --hover carries ten
 * surfaces in the skin and --dim lands on exactly one of them, the hovered row;
 * on the other nine the only text is --fg (8.29:1), and on two of those
 * (workflow "read-only" cell, progress-bar remainder) --hover is the only thing
 * telling the surface apart from --panel. So the row gets its own token,
 * --hover-row #263C54 - the same shape as --menu-disabled above: one value for
 * one rule, the other nine surfaces untouched. On it --dim reads 4.62:1, --fg
 * 9.08:1, --muted 5.70:1. The cost is the step over --panel, which drops from
 * 4.5 to 1.9 L* on the odd row, so there hover is carried by the brass inset the
 * same rule draws; the even row keeps a step of 18.2 L*. The empirical gate
 * found that inset covered by the priority stripe on table.issues rows, which
 * left an odd priority row under the cursor with no hover mark at all - hence
 * the 6px inset in Tables below, 3px of which sit outside the stripe.
 *
 * v8 ([#12162]): --red split in two. #C7544B was below 4.5:1 as text on every
 * surface of the skin (3.84:1 on --bg, 2.75:1 on --panel, 2.58:1 on the hovered
 * list row) and below 3:1 as a graphical object on four of the six rules that
 * draw with it. One token cannot fix both: the value clearing 4.5:1 as text
 * sits at L* 67 and reads salmon, which would also repaint the "private" badge
 * and the priority stripe - alarm colors that have to stay saturated. So the
 * skin does what it already did inline for the error flash: --red #E56B60 is
 * the graphical red (borders, stripes, icons, the badge surface), --red-text
 * #E7B3AB is the textual one, promoted from the flash rule that hardcoded it.
 * Six text rules now read 6.16-6.56:1 on their worst surface, six graphical
 * ones 3.56-5.17:1, and the "private" badge (--bg on --red) 5.29:1 instead of
 * 3.84:1. Same shape as --menu-disabled and --hover-row above; both are palette
 * values, not core overrides, so this changes 6.1.x and 7.0 alike.
 *
 * v9 ([#12161]): brass as text on the hovered list row. --hover-row from v7 is
 * darker than every resting surface, so --brass #C79A4B reads 4.39:1 there -
 * the last text below 4.5:1 after v6-v8. The accent itself is the landing-page
 * color carried over 1:1 ([#8079]), so it does not move; the row gets its own
 * --brass-row #CA9F54 instead - same hue and saturation, L* 66.3 → 68.0, the
 * smallest step that clears the floor (4.63:1). Fourth time this shape after
 * --menu-disabled, --hover-row and --red-text: one value for one narrow place.
 * Only text is repainted - brass drawn as a graphical object inside the same
 * row (the hover inset, the % done bar, icon strokes) keeps #C79A4B, being over
 * 3:1 there already. Palette value again, so 6.1.x and 7.0 alike.
 *
 * v10 ([#12166]): the five v1 accent aliases are gone. --green, --green-dim,
 * --green-hi and --cyan all pointed at brass and --amber at --brass-hi, so
 * every rule reading them drew a color its own name denied - most visibly the
 * hover inset of a list row, written var(--green) while everyone calls it the
 * brass stripe. The aliases were pure naming: one :root block in the file, no
 * @media or other selector redefining them, nothing outside this stylesheet
 * reading them, so the indirection never allowed a per-context palette. The 66
 * references were rewritten to --brass / --brass-dim / --brass-hi and the
 * comments that still named v1 colors ("cyan ID", "amber/waiting") follow. No
 * value moves: the resolved stylesheet is identical before and after, so this
 * changes nothing on 6.1.x or 7.0. What --cyan and --amber carried in their
 * names - "secondary accent", "waiting/warning" - was a distinction the palette
 * had already dropped in v2; it now lives only in comments. --green-bg,
 * --green-bd, --amber-bg and --amber-bd were NOT aliases (own values from the
 * v2 palette) and stayed untouched here - v11 below renames them.
 *
 * v11 ([#12168]): the state surfaces are named by role. --green-bg /
 * --green-bd, --amber-bg / --amber-bd and --red-bg / --red-bd became
 * --success-*, --warning-* and --error-*. Unlike the v10 aliases these were
 * never indirections - each carries its own v2 value - but the names denied the
 * color all the same: --green-bg #2C2717 is a dark warm brown and --amber-bg
 * #322B16 is another one a step away. Naming them by color would have produced
 * two indistinguishable names for two near-identical browns, which is no help
 * to anyone; what actually tells the two apart is the state they stand for, and
 * their neighbours in the same block (--hover, --selected, --info-bg) already
 * read that way. --red-bg / --red-bd came along although "red" did not lie -
 * leaving them behind is what would have made the block half semantic and half
 * chromatic. The layers end up clean: the palette above is still named by color
 * (--brass, --red), the state surfaces below by role. No value moves, so the
 * resolved stylesheet is identical before and after and nothing changes on
 * 6.1.x or 7.0.
 *
 * v12 ([#12171]): the processing indicator's reds become tokens. The Cylon-eye
 * gradient was the last place in the skin painting text with hardcoded reds,
 * and two of its three stops were below 4.5:1 - #7a1a15 at 1.07:1 on
 * --hover-row while filling 60% of the ramp, #ff5f56 at 3.78:1. The number is
 * an issue's only mark in the ID column, so the sweep is text carrying content
 * and none of the WCAG 1.4.3 exemptions covers it. The dark plateau drops out
 * and the ramp is rebuilt from --red-sweep #FF7C74 (the old mid stop raised by
 * the smallest step clearing the floor, 4.52:1 on --hover-row) and --red-hi
 * #FFD0CC (the old peak, unchanged, 8.16:1). Fifth time the --menu-disabled
 * shape, only here the raised value also became reusable. The cycle inverts -
 * a readable number with a flash crossing it, instead of a dark one with a
 * lightening - which is what a legible resting state costs; the amplitude left
 * is dL* 20.1. The prefers-reduced-motion fallback keeps its value (--red-text,
 * 6.16:1) and now also covers the list's `#` prefix, which has its own ::before
 * box and would otherwise have stayed on --red-sweep there. Palette values
 * again, so 6.1.x and 7.0 alike.
 *
 * v13 ([#12177]): the flyout menu. Below 900px core moves the top menu, the
 * project menu and the sidebar into .flyout-menu, where none of the skin's
 * rules reach them - they are scoped by the ids those items no longer sit
 * under - so the panel kept core's light palette: #3e5b76 body, #628db6
 * section bars, a white search field. Not a 7.0 regression; core paints it the
 * same way in 6.1.4, which is where the screenshot reporting it was taken
 * ([#12147]), so this is an eighth override changing 6.1.x as well, fixing the
 * same defect on both. No new token: the panel takes --panel like any other
 * raised card, the section bars --bg-soft + brass like a list header and the
 * field the colors of #quick-search #q. Only rules already in .flyout-menu are
 * overridden - the hamburger button and its divider live in #header and stay
 * on core's grays (covered afterwards in v16).
 *
 * v14 ([#12218]): the cursor gets an answer where the skin gave it none.
 * a.icon-only and span.icon-actions (the "..." trigger) carry no visible text -
 * core hides the label - so the glyph is the whole element, and the skin
 * painted it the same brass resting and hovered: those controls answered the
 * cursor with nothing at all. Both now take --brass-hi under the cursor, the
 * token's declared "accent hover" role and the step the skin already makes on
 * the three links that rest at brass (journal link, wiki toc, main menu "+").
 * The same step goes to an open issue reference (a.issue:not(.closed)), whose
 * hover moved only the dotted underline while the text - nearly the whole link
 * - stayed put. a.icon is deliberately left as it was: its label is visible, so
 * the element already answers (core underlines it, the skin repaints it --fg ->
 * --brass), and raising the glyph alone would split one link into two shades.
 * Measured on every surface the carriers land on: icons 5.55-9.88:1 against a
 * 3:1 floor for a graphical object, the reference 6.47-9.88:1 against 4.5:1;
 * the step between the two states is dL* 10.6. No palette value moves and no
 * rule here is version-specific, so 6.1.x and 7.0 alike.
 *
 * v15 ([#12268]): the notice and warning flashes stop naming their text color
 * inline. Both values move to --success-text (#E3D3A6) and --warning-text
 * (#ECD79A) unchanged, so nothing on screen moves - what changes is that the
 * rule behind them gets written down. Each message paints its text as its own
 * left stripe lightened, saturation kept and hue moved a few degrees: --brass
 * here (dL* +18.5), --brass-hi in the warning (+9.5), --red in the error
 * (+17.5). The error already had its value as a token, so with these two the
 * third one stops looking like an independent pick. Reusing a brass token
 * instead was measured and dropped: the nearest is --brass-hi at dE76 28.4 and
 * 21.4 (dL* near -10, where the step that earned --brass-row its own token was
 * 1.7), and at the warning it is that message's own stripe, so the text would
 * have merged with its state marker. Contrast is untouched - 10.03:1 and
 * 9.88:1 on their surfaces. Nothing here is version-specific, so 6.1.x and 7.0
 * alike.
 *
 * v16 ([#12283]): the two spots v13 left behind - the button that opens the
 * flyout panel and the divider on its left edge. Both live in #header, not in
 * .flyout-menu, so they kept core's grays: a white glyph (--oc-gray-0, #f8f8f8
 * in 6.1.4) where every other header link is --fg, and a light gray divider
 * (--oc-gray-3, #ddd) across the dark bar. Neither is hard to read - this is
 * the same kind of item as the calendar weekends or the issue form, a light
 * spot the skin never reached, not a contrast defect. The glyph joins the other
 * header links on --fg (13.50:1 on the page background) and the divider takes
 * --border like every other separator here. No new token, and both rules match
 * on 6.1.x as well, fixing the same two spots there.
 *
 * v17 ([#12219]): the closed status badge stops sharing its text color with the
 * open one. .badge-status-closed took --brass, the same value .badge-status-open
 * takes, so the two badges differed only by their border (--brass vs
 * --brass-dim, 1.41:1 to each other on a 1px line). That is v2 fallout: the
 * rule was written when --green and --cyan were separate terminal colors, and
 * the repalette made both aliases of --brass. Closed now takes --dim in both
 * fields - the skin's declared "closed / locked" token, already carrying closed
 * issue links, closed rows and their status cell - so the badge joins an
 * existing convention instead of opening a new one: 6.88:1 on --bg, 7.52:1 on
 * --bg-soft, 4.92:1 on --panel, 4.62:1 on --hover-row. Open is untouched, and
 * the two now part by hue (warm brass vs cool gray) rather than lightness
 * (1.05:1 to each other, dL* 1.6), which survives every form of color blindness.
 * The cost, accepted knowingly: closed and locked become identical. Core paints
 * these badges on the issue page, the version list and page, and the wiki, and
 * the two meet only on the version list, where each carries its own label - so
 * the color reinforces the text rather than carrying the state alone. Mail
 * templates have their own inline CSS and the skin does not reach them. No
 * palette value moves, so 6.1.x and 7.0 alike.
 *
 * v18 ([#12284]): the underline core draws below every plain h4 - the only
 * heading it underlines at all (7.0.1 border-block-end: 1px solid
 * var(--oc-gray-4), #CED4DA; 6.1.4 border-bottom: 1px solid #ccc). The skin had
 * never covered that edge, so it read as a light stroke across the dark page in
 * the My page sidebar, the news and document views, forum messages and
 * repository revisions. Same kind of spot as the calendar weekends in v4 or the
 * header divider in v16, not a 7.0 regression. The line carries the
 * heading/content split, so only its color moves to --border - the layout stays
 * put. No new token, and the bare h4 selector matches on 6.1.x as well; the two
 * places where the skin already speaks about h4 are untouched, because .wiki h4
 * keeps core's border: none (more specific) and .journals h4.journal-header
 * keeps its own --border frame.
 *
 * v19 ([#12304]): the last three backgrounds naming an opaque value inline -
 * the changed word inside a removed diff line (#4a1f1a), inside an added one
 * (#17402a) and the search hit (#3a3410 on #ffeaa0). All three come from the v1
 * skin and share one shape: the state's own background lightened at an
 * untouched hue, the same rule v15 wrote down for message text. The two diff
 * spans take --error-bd and --success-bd, which is where that shape lands on
 * today's palette: the v1 rule recomputed on --success-bg gives #483D1A, dE76
 * 3.1 from --success-bd, so the token already sits where a fresh value would.
 * This one does move the picture - dE76 6.6 on the removed line (hue kept, dL*
 * +6.4) and 26.5 on the added one, because #17402a is v2 fallout: the green
 * family became warm brown in the repalette and this value stayed behind as the
 * only green left in the sheet, 72 degrees of hue from its own family. Text on
 * both stays far above the floor (--fg 9.14:1 and 8.30:1, from 11.22:1 and
 * 9.35:1). The search hit is not a state surface, so it has no family to join
 * and keeps both values under --search-bg / --search-text; the nearest warm
 * background token is --warning-bg at dE76 9.4, and borrowing it would paint a
 * search result as a warning. Two backgrounds still spell a color out after
 * this, but as brass channels under an alpha rather than a value of their own
 * (a.user.user-mention and inline code in the wiki) - a separate category, held
 * in [#12361]. Nothing here is version-specific, so 6.1.x and 7.0 alike.
 */

/* Webfonts self-hosted by the plugin (assets/fonts/ → /plugin_assets/…/fonts/),
 * NOT from an external CDN - Redmine may run offline/behind a firewall, while
 * daidala is deployment/environment agnostic ([#8079] note-5). Lato = text/UI
 * (sans), Source Code Pro = accents (code, badges, table headers, eyebrows,
 * issue numbers). Latin + latin-ext subsets (Polish UI diacritics). */
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/plugin_assets/redmine_daidala_plugin/Lato-400-latin-b64a7eb8.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/plugin_assets/redmine_daidala_plugin/Lato-400-latin-ext-22065c39.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/plugin_assets/redmine_daidala_plugin/Lato-700-latin-5fb2d787.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/plugin_assets/redmine_daidala_plugin/Lato-700-latin-ext-af918de1.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 900; font-display: swap;
  src: url("/assets/plugin_assets/redmine_daidala_plugin/Lato-900-latin-0dba9b0d.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 900; font-display: swap;
  src: url("/assets/plugin_assets/redmine_daidala_plugin/Lato-900-latin-ext-256e168e.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Source Code Pro"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/plugin_assets/redmine_daidala_plugin/SourceCodePro-400-latin-b5eb86be.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Source Code Pro"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/plugin_assets/redmine_daidala_plugin/SourceCodePro-400-latin-ext-259ff1eb.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  /* ── v2 palette - matches the daidala.tech landing page 1:1 ([#8079] note-4,
   * approved in note-5). Navy + brass + paper, dark-only. Canonical tokens
   * below; old v1 names ([#7503]) remain as aliases to the new palette to avoid
   * rewriting ~900 cascade rules (repalette, not new architecture). */
  --ink:       #0F1E30;  /* page background (upper gradient stop) */
  --ink-deep:  #0A1521;  /* deepest background: lower stop, code, form fields, top menu */
  --slate:     #22384E;  /* card/box background (.box, login) */
  --line:      #2E4A67;  /* borders, table lines, separators */
  --paper:     #ECE6D6;  /* primary text */
  --dim:       #9AA7B7;  /* tertiary text: closed / locked states ([#12157]) */
  --menu-disabled: #7C8DA1; /* disabled context-menu entry only, not disabled
                             * form fields - those keep --muted ([#12157]) */
  --brass:     #C79A4B;  /* main accent: CTA, link hover, active tab, eyebrow, focus */
  --brass-hi:  #E3B85E;  /* brighter brass: accent hover, in-progress states */
  --brass-dim: #A8802F;  /* subdued brass: pressed/hover-down (derived) */
  --brass-row: #CA9F54;  /* brass as TEXT on a hovered list row only - --hover-row
                          * is darker than every resting surface, so --brass
                          * falls to 4.39:1 there ([#12161]). Same hue and
                          * saturation, L* 66.3 → 68.0, the smallest step that
                          * clears 4.5:1; the resting accent stays #C79A4B. */

  --sans: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* ── v1 token aliases → v2 palette (#7503 cascade works unchanged). The five
   * accent aliases that used to sit here (--green, --green-dim, --green-hi,
   * --cyan, --amber) are gone - they named v1 colors while pointing at brass,
   * so a rule reading var(--green) drew brass ([#12166]). The names left in
   * this block say what the token is FOR (background, border, text), not what
   * color it is, so a repalette does not make them lie. */
  --bg:        var(--ink);
  --bg-soft:   var(--ink-deep);
  --panel:     var(--slate);
  --border:    var(--line);
  --border-2:  var(--line);
  --fg:        var(--paper);
  --fg-strong: var(--paper);
  --muted:     #A9BACD;         /* secondary text: metadata, attribute labels */
  --red:       #E56B60;         /* error / urgent → maritime red (note-5); raised
                                 * from #C7544B so it clears 3:1 as a graphical
                                 * object on every surface it meets ([#12162]) */
  --red-text:  #E7B3AB;         /* red as text only - the value the error flash
                                 * already used inline; --red itself cannot
                                 * clear 4.5:1 without turning salmon ([#12162]) */
  --red-sweep: #FF7C74;         /* resting color of the processing-indicator
                                 * sweep - the number is text under a moving
                                 * gradient, so this is the value it shows most
                                 * of the cycle and it has to clear 4.5:1 on its
                                 * own (4.52:1 on --hover-row, [#12171]) */
  --red-hi:    #FFD0CC;         /* the sweep's bright core, promoted from the
                                 * hardcoded gradient unchanged ([#12171]) */

  /* Semantic-state backgrounds - derived from the v2 palette. Named for the
   * state they carry, not for their color ([#12168]): --success-bg and
   * --warning-bg are two near-identical dark browns, so a color name would have
   * told them apart no better than "brown 1" and "brown 2". */
  --hover:     #2A425C;  /* row/element hover (lightened slate) */
  --hover-row: #263C54;  /* hovered list row only - darker so --dim (closed /
                          * locked text) clears 4.5:1 there; every other hover
                          * surface stays on --hover ([#12160]) */
  --selected:  #2E4A67;  /* selection background */
  --success-bg: #2C2717;  /* notice flash (warm, brass left stripe), added diff
                           * line, allowed workflow transition */
  --success-bd: #4E3E1E;
  --success-text: #E3D3A6; /* notice flash text - the value that rule already
                            * carried inline ([#12268]). A message paints its
                            * text as its own left stripe lightened, at the same
                            * saturation: --brass here, --brass-hi in the
                            * warning, --red in the error (--red-text). */
  --warning-bg: #322B16;  /* warning flash, today's calendar cell, "no repo
                           * access" marker on the Obsada card */
  --warning-bd: #5A4C22;
  --warning-text: #ECD79A; /* warning flash text, same rule as --success-text
                            * ([#12268]). Named by role, not by color, like the
                            * surfaces above: each of the two lands on one state
                            * surface and nowhere else. --red-text is named by
                            * color because it feeds rules well beyond the error
                            * flash, so there is no --error-text alias here - an
                            * alias pointing at another token is what [#12166]
                            * removed. */
  --error-bg:   #2E1A17;  /* error flash, removed diff line */
  --error-bd:   #5C2C27;
  --info-bg:    #1B2E43;  /* :target background (anchor highlight, slate) */

  /* Search hit - the word matched by a search, on the results list and inside
   * the page it points to. Both values sat in the .highlight rule inline until
   * [#12304]. They follow the same shape as the diff spans further down: the
   * background of the family they belong to, lightened at an untouched hue -
   * here the v1 skin's --amber-bg #2a2410, dL* +7.2. A search hit is not a
   * state, though, so it has no family in today's palette to be taken from: the
   * nearest warm surface is --warning-bg (dE76 9.4), which carries the warning
   * flash and today's calendar cell, so reusing it would paint a search result
   * as a warning. Named by role like the state surfaces above ([#12168]). The
   * text reads 10.44:1 on this background. */
  --search-bg:   #3A3410;
  --search-text: #FFEAA0;

  /* [#12071] Core token of Redmine 7.0 (--color-current-marker: --oc-indigo-5)
   * marking "you are here": the underline of the selected main-menu tab, the
   * left stripe of the selected sidebar entry and the circle behind today's
   * date in the calendar. Indigo is off palette in all three places, so the
   * token itself is retuned to brass instead of overriding each rule. Unused on
   * 6.1.x, where core does not read it. */
  --color-current-marker: var(--brass);

  /* Lucide icons for top-menu items (#7524) - outline SVG used as a mask */
  --icon-home: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%2021v-8a1%201%200%200%200-1-1h-4a1%201%200%200%200-1%201v8%22%2F%3E%3Cpath%20d%3D%22M3%2010a2%202%200%200%201%20.709-1.528l7-6a2%202%200%200%201%202.582%200l7%206A2%202%200%200%201%2021%2010v9a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2z%22%2F%3E%3C%2Fsvg%3E");
  --icon-my-page: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%227%22%20height%3D%229%22%20x%3D%223%22%20y%3D%223%22%20rx%3D%221%22%2F%3E%3Crect%20width%3D%227%22%20height%3D%225%22%20x%3D%2214%22%20y%3D%223%22%20rx%3D%221%22%2F%3E%3Crect%20width%3D%227%22%20height%3D%229%22%20x%3D%2214%22%20y%3D%2212%22%20rx%3D%221%22%2F%3E%3Crect%20width%3D%227%22%20height%3D%225%22%20x%3D%223%22%20y%3D%2216%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E");
  --icon-projects: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2020a2%202%200%200%200%202-2V8a2%202%200%200%200-2-2h-7.9a2%202%200%200%201-1.69-.9L9.6%203.9A2%202%200%200%200%207.93%203H4a2%202%200%200%200-2%202v13a2%202%200%200%200%202%202Z%22%2F%3E%3C%2Fsvg%3E");
  --icon-administration: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9.671%204.136a2.34%202.34%200%200%201%204.659%200%202.34%202.34%200%200%200%203.319%201.915%202.34%202.34%200%200%201%202.33%204.033%202.34%202.34%200%200%200%200%203.831%202.34%202.34%200%200%201-2.33%204.033%202.34%202.34%200%200%200-3.319%201.915%202.34%202.34%200%200%201-4.659%200%202.34%202.34%200%200%200-3.32-1.915%202.34%202.34%200%200%201-2.33-4.033%202.34%202.34%200%200%200%200-3.831A2.34%202.34%200%200%201%206.35%206.051a2.34%202.34%200%200%200%203.319-1.915%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E");
  --icon-help: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M9.09%209a3%203%200%200%201%205.83%201c0%202-3%203-3%203%22%2F%3E%3Cpath%20d%3D%22M12%2017h.01%22%2F%3E%3C%2Fsvg%3E");
  --icon-my-account: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2021v-2a4%204%200%200%200-4-4H9a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3C%2Fsvg%3E");
  /* [#12071] Redmine 7.0 added a "Profil" item to the account menu; without an
   * icon it would be the only bare entry in the dropdown. */
  --icon-my-profile: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22M7%2020.662V19a2%202%200%200%201%202-2h6a2%202%200%200%201%202%202v1.662%22%2F%3E%3C%2Fsvg%3E");
  --icon-logout: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m16%2017%205-5-5-5%22%2F%3E%3Cpath%20d%3D%22M21%2012H9%22%2F%3E%3Cpath%20d%3D%22M9%2021H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h4%22%2F%3E%3C%2Fsvg%3E");
  --icon-login: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m10%2017%205-5-5-5%22%2F%3E%3Cpath%20d%3D%22M15%2012H3%22%2F%3E%3Cpath%20d%3D%22M15%203h4a2%202%200%200%201%202%202v14a2%202%200%200%201-2%202h-4%22%2F%3E%3C%2Fsvg%3E");
}

/* ====== Base / layout ====== */
/* Set html to --bg - the core Dark theme sets html,body to gray --gl-bg-0
 * (#1f1e24); the skin targeted only body, leaving html gray (hidden beneath
 * body, but inconsistent). #7556 */
html { background-color: var(--bg); }

/* Base page background - navy ink→ink-deep gradient (landing v2, [#8079]
 * note-4). The glow (brass + slate) sits in an overlay ABOVE the panels
 * (body::after below), with pointer-events:none - it remains visible across the
 * whole surface as on the landing page, while panels stay opaque (text remains
 * readable; overlay mechanism from gate #7556). Scanline removed with landing v2. */
body {
  color: var(--fg);
  font-family: var(--sans);
  background: linear-gradient(var(--ink), var(--ink-deep)) fixed;
}

/* Glow overlay (radial gradient) ABOVE the panels. z-index:2 beats
 * #main/#content (z-index:1 below) in the root stacking context, while
 * pointer-events:none passes clicks through. Alphas match landing v2 1:1
 * ([#8079] note-4): brass .07 (top center) + slate .28 (top right). */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(199,154,75,.07), transparent 60%),
    radial-gradient(900px 520px at 88% 12%, rgba(46,74,103,.28), transparent 55%);
  pointer-events: none;
  z-index: 2;
}
#wrapper, #header, #main, #top-menu, #footer { position: relative; z-index: 1; }
/* [#7609] The expanded "+" button menu (#main-menu .menu-children) lives in
 * #header; #header and #main are siblings in #wrapper, both at z-index:1. With
 * equal z-index, DOM order decides - #main follows #header, so #content blocks
 * painted above the menu (7 of 8 items unclickable, topmost=#content). Raising
 * #header above #main moves the whole header, including the menu, above content. */
#header { z-index: 3; }
/* [#12071] Redmine 7.0 hangs the account menu off the top bar as a dropdown that
 * opens downwards, over #header. At z-index:1 the bar ranked below #header
 * (z-index:3), which painted over the expanded panel - the panel's own
 * z-index:1000 does not help, because it only ranks inside the stacking context
 * #top-menu creates. A value above #header lifts the whole bar with its
 * dropdown. The glow overlay stays on top either way: both #top-menu and #header
 * sit inside #wrapper (z-index:1), whose stacking context no value here escapes.
 * Inert on 6.1.x, where the bar has nothing that overflows it. */
#top-menu { z-index: 4; }

/* Fonts: Lato (sans) for all text/UI, inherited from body. Forms get sans
 * explicitly (Redmine core sets its own font-family, so they do not inherit).
 * Source Code Pro (mono) ONLY for accents ([#8079] note-4): code, table
 * headers/eyebrows, badges, and issue numbers. */
input, select, textarea, button, #main-menu li a, #top-menu a { font-family: var(--sans); }
pre, code, tt, kbd,
table.list th, .table-list-header,
#sidebar h3, legend,
table.issues td.id a, .rdp-daidala-issue-number,
.badge, .badge-count, .badge-issues-count,
.badge-private, .badge-status-open, .badge-status-locked, .badge-status-closed {
  font-family: var(--mono);
}

/* Eyebrow - sidebar/legend/table headers in landing style: spaced uppercase
 * SCP mono brass ([#8079] note-4). The color comes from rules in
 * sections below; only the typographic shape is defined here. */
#sidebar h3, legend {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.82em;
  font-weight: 600;
}
table.list th, .table-list-header {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.85em;
}

/* H1 - heavy Lato (landing v2); the page heading stands out by weight, not color. */
h1, #content h1 { font-weight: 800; }

#wrapper { background: transparent; }
#main { background: transparent; }
/* #content without background or border - Konrad ([#7710]). Previously a
 * --panel with --border and rounding ([#7503]); content now blends into the
 * page background, consistently with header ([#7708]) and sidebar ([#7709]).
 * Color remains unchanged. */
#content,
#main.nosidebar #content {
  background: none;
  color: var(--fg);
  border: none;
  border-radius: 5px;
}

/* ====== Top menu (global bar) ======
 * [#12071] In Redmine 7.0 the bar is <nav class="top-menu" id="top-menu"> with
 * two flex halves: .general-menu (.top-menu__links, the top_menu items) and
 * .profile-menu (#account). The id survived the rebuild, so every #top-menu rule
 * here still applies and outranks the core .top-menu__links class rules. What
 * did NOT survive is #loggedas - 7.0 folded "logged in as <user>" into the
 * account dropdown, so its rules were dropped. */
#top-menu {
  background: none;
  border-bottom: none;
}
#top-menu a { color: var(--muted); }
#top-menu a:hover { color: var(--fg); }

/* The dropdown trigger (avatar + chevron) is an <a> without a menu-item class,
 * so core's #account .dropdown-trigger outranks the #top-menu a rule above and
 * has to be named explicitly. Core also paints a white wash on hover
 * (rgba(255,255,255,.12)) - replaced with the skin's hover surface. */
#top-menu #account .dropdown-trigger { color: var(--muted); }
#top-menu #account .dropdown-trigger:hover { color: var(--fg); }
#top-menu .top-menu__links a:hover,
#top-menu #account .dropdown-trigger:hover {
  background-color: var(--hover);
  border-radius: 3px;
}
#top-menu #account .dropdown-trigger .icon-svg { stroke: var(--muted); }
#top-menu #account .dropdown-trigger:hover .icon-svg { stroke: var(--fg); }

/* The account dropdown panel. Core dropdown.css paints it white with gray
 * borders and dark text (it was built for the light default theme), which on
 * this skin means a white card and, after repainting it, unreadable dark text -
 * hence background, borders and text colors are all set here. */
#top-menu #account .dropdown-content {
  background-color: var(--bg-soft);
  border-color: var(--border-2);
  color: var(--fg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
#top-menu #account .dropdown-content .user-info { color: var(--fg); }
#top-menu #account .dropdown-content .user-info .user-login { color: var(--muted); }
/* Core makes the items flex without align-items, so the ::before icon below (a
 * flex item with a fixed 1em height, where vertical-align means nothing) would
 * sit at the top edge of the row. */
#top-menu #account .dropdown-content a {
  color: var(--fg);
  align-items: center;
}
#top-menu #account .dropdown-content a:hover {
  background-color: var(--brass);
  color: var(--bg);
}
#top-menu #account .dropdown-divider,
#top-menu #account .dropdown-content .logout { border-block-start-color: var(--border); }

/* ====== Top menu - Lucide icons beside items ======
 * Keeps the top bar consistent with daidala's /admin panel (#7524, reference
 * #7283), where every menu item has a Lucide icon. Embedded as mask-image
 * data URIs (without changing Redmine view markup); background: currentColor
 * makes each icon inherit the item color (--muted at rest, --fg on hover) and
 * follow the rules above. The <a> class is the dashed top_menu item name from
 * Redmine::MenuManager: home/my-page/projects/administration/help plus the
 * right-side my-account/logout/login items. */
#top-menu a.home::before,
#top-menu a.my-page::before,
#top-menu a.projects::before,
#top-menu a.administration::before,
#top-menu a.help::before,
#top-menu a.my-profile::before,
#top-menu a.my-account::before,
#top-menu a.logout::before,
#top-menu a.login::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: .4em;
  vertical-align: -.15em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
#top-menu a.home::before { -webkit-mask-image: var(--icon-home); mask-image: var(--icon-home); }
#top-menu a.my-page::before { -webkit-mask-image: var(--icon-my-page); mask-image: var(--icon-my-page); }
#top-menu a.projects::before { -webkit-mask-image: var(--icon-projects); mask-image: var(--icon-projects); }
#top-menu a.administration::before { -webkit-mask-image: var(--icon-administration); mask-image: var(--icon-administration); }
#top-menu a.help::before { -webkit-mask-image: var(--icon-help); mask-image: var(--icon-help); }
#top-menu a.my-profile::before { -webkit-mask-image: var(--icon-my-profile); mask-image: var(--icon-my-profile); }
#top-menu a.my-account::before { -webkit-mask-image: var(--icon-my-account); mask-image: var(--icon-my-account); }
#top-menu a.logout::before { -webkit-mask-image: var(--icon-logout); mask-image: var(--icon-logout); }
#top-menu a.login::before { -webkit-mask-image: var(--icon-login); mask-image: var(--icon-login); }

/* ====== Header ======
 * Header without a background or bottom edge - Konrad ([#7708]). Previously a
 * neutral --border edge and --panel background ([#7635]); it now blends into
 * the page background. */
#header {
  background: none;
  border-bottom: none;
}
#header a { color: var(--fg); }
/* [#12071] Redmine 7.0 added #header a:hover {color: white}; the skin marks link
 * hover with the accent, like the `a:hover` rule in Links below. */
#header a:hover { color: var(--brass); }
#header h1, #header h1 a { color: var(--brass); font-family: var(--sans); }
#quick-search #q {
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border-2);
}

/* ====== Main menu (tabs under header) ====== */
/* [#12071] Redmine 7.0 gave the menu bar itself a background (--oc-indigo-0);
 * in 6.1.x the container only carried positioning and the page showed through.
 * Menu items are transparent unless selected, so without this the bar renders
 * as a light strip under the header on every project page. Cleared the same way
 * as #header above, so the bar keeps blending into the page background. */
#main-menu { background: none; }
#main-menu li a { color: var(--muted); }
#main-menu li a:hover { background: var(--bg-soft); color: var(--brass); }
#main-menu li a.selected,
#main-menu li a.selected:hover {
  background: var(--panel);
  color: var(--brass);
  border-bottom: 2px solid var(--brass);
  /* [#12071] Redmine 7.0 marks the selected tab with its own inset bottom
   * shadow. The skin has drawn that underline with a border since [#7503];
   * keeping both would stack two brass bars, so core's is switched off. */
  box-shadow: none;
}
/* [#12071] 7.0 gave the "+" button a blue outline and a light hover state. */
#main-menu li a.new-object {
  background-color: var(--brass);
  color: var(--bg);
  border-color: var(--brass);
}
#main-menu li a.new-object:hover { background-color: var(--brass-hi); color: var(--bg); }
#main-menu .menu-children {
  background-color: var(--bg-soft);
  border: 1px solid var(--border);
}
#main-menu .menu-children li a { color: var(--fg); background-color: var(--bg-soft); }
#main-menu .menu-children li a:hover { color: var(--bg); background-color: var(--brass); }

/* ====== Sidebar ====== */
#sidebar {
  background: none;
  border-left: none;
  color: var(--fg);
}
#sidebar h3 { color: var(--brass); }
#sidebar hr { background: var(--border); }
#sidebar a.selected { background-color: var(--brass); color: var(--bg); }
/* [#12071] Redmine 7.0 paints the selected entry indigo on hover and forces the
 * same indigo on its icon with !important - both land on the skin's brass
 * background. The stripe on the left edge is core's, retuned through
 * --color-current-marker at the top of this file. */
#sidebar a.selected:hover { color: var(--bg); }
#sidebar a.selected svg.icon-svg { stroke: var(--bg) !important; }
#sidebar-switch-button svg { stroke: var(--fg); }
#sidebar-switch-button:hover { background-color: var(--hover); }

/* ====== Flyout menu and its toggle button (narrow viewports) ======
 * [#12177] Below 900px core hides #top-menu, #main-menu and #sidebar and moves
 * their contents into the .flyout-menu panel (responsive.js detaches the lists
 * and appends them there), so on a narrow screen this panel is the only way to
 * navigate - and every skin rule above misses it, because they are all scoped
 * by the ids the items no longer sit under. Core paints the panel from the
 * light default palette (#3e5b76 body, #628db6 section bars, white search
 * field) and the skin had never covered it, on either core version.
 *
 * The mapping follows surfaces the skin already has: the panel is a raised
 * card (--panel, like .box), the uppercase letter-spaced section bars are the
 * same shape as a list header (--bg-soft + brass, cf. `table.list th` below)
 * and the search field is painted like #quick-search #q in the header. Text
 * reads --fg 9.67:1 on the panel, brass 7.14:1 on the section bar and --fg
 * 13.50:1 in the field. Icons keep the values the rest of the skin gives them:
 * brass 4.68:1 in `a.icon` links, --muted 8.48:1 elsewhere and for the search
 * magnifier, both over the 3:1 threshold for graphics. Row separators keep
 * core's rgba(255,255,255,.1), which lightens on a dark panel just as it did
 * on the blue one.
 *
 * Same selectors and values in 6.1.4 and 7.0.1 (only physical vs logical
 * properties and hex vs --oc-* tokens differ), so this is the eighth override
 * that also changes 6.1.x - and it fixes the same defect there; the screenshot
 * in [#12147] that reported it was taken on 6.1.4. */
@media screen and (max-width: 899px) {
  /* [#12283] The button that opens the panel and the divider on its left edge,
   * both in #header, left on core's grays by [#12177]. Core gives the glyph a
   * rule of its own (`#header a.mobile-toggle-button`, --oc-gray-0 / #f8f8f8 in
   * 6.1.4) which outranks `#header a` in the Header section above, so this one
   * link stayed white while every other header link is --fg; it joins them here
   * (13.50:1 on the page background). The hover rule is repeated because of
   * that same specificity: `#header a:hover` in the Header section carries the
   * button to brass today only by being later in this file than core's rule,
   * and the resting rule right below would take that back - it is later still,
   * and equally specific. The divider takes the color the skin gives every
   * other separator - it is decorative, the glyph alone identifies the control,
   * so no contrast floor applies to it.
   *
   * The divider is addressed logically because 7.0 declares it that way
   * (border-inline-start); a logical and a physical declaration for the same
   * edge cascade together, so in an LTR document this also wins over 6.1.4's
   * `border-left: 1px solid #ddd`. Both fixes therefore land on 6.1.x too,
   * like the panel rules below. */
  #header a.mobile-toggle-button { color: var(--fg); }
  #header a.mobile-toggle-button:hover { color: var(--brass); }
  .mobile-toggle-button { border-inline-start-color: var(--border); }

  .flyout-menu {
    background-color: var(--panel);
    color: var(--fg);
  }
  .flyout-menu h3 {
    background-color: var(--bg-soft);
    color: var(--brass);
    border-block-color: var(--border);
  }
  .flyout-menu h4 { color: var(--fg); }
  /* Core sets the avatar row's link color with its own rule of equal
   * specificity, so `.flyout-menu a` alone would leave the user name white. */
  .flyout-menu a,
  .flyout-menu__avatar a { color: var(--fg); }
  /* Icons are deliberately left alone: `a.icon .icon-svg` below already paints
   * them brass and everything else --muted, which is exactly how the same menu
   * and sidebar links look above 900px. A rule here would also have to outrank
   * that one, which sits later in this file at equal specificity. */
  .flyout-menu__search input[type="text"] {
    background-color: var(--bg);
    color: var(--fg);
    border: 1px solid var(--border-2);
  }
}

/* ====== Footer / admin menu ====== */
#footer { background: transparent; color: var(--muted); border-top: 1px solid var(--border); }
#admin-menu li a { color: var(--fg); }
#admin-menu li a:hover { color: var(--brass); }

/* ====== Headings ====== */
#content h1, #content h2, #content h3,
#content h4, #content h5, #content h6 { color: var(--fg-strong); }
h1, h2 { color: var(--fg-strong); }
.wiki h6 { color: var(--muted); }
/* h4 is the only heading the core underlines: 7.0.1 draws
 * border-block-end: 1px solid var(--oc-gray-4) (#CED4DA), 6.1.4 the same line as
 * border-bottom: 1px solid #ccc. Both read as a light stroke on the dark skin
 * ([#12284]). The line carries the heading/content split, so only its color
 * changes - the layout stays put. Bare h4 matches the core selector, so the skin
 * wins on load order alone; .wiki h4 keeps border: none from the core (more
 * specific) and .journals h4.journal-header keeps its own --border frame. */
h4 { border-block-end-color: var(--border); }

/* ====== Links ======
 * The accent is a RARE action/hover color, not every link's default one
 * (project lead feedback: "too many green links", #7503 note-19 - in v1 the
 * accent was green). Resting content link = --fg; hover → --brass. The accent
 * remains where it deliberately indicates an action/state (buttons, active tab,
 * focus); their own rules below remain unchanged. */
a, a:link, a:visited { color: var(--fg); }
a:hover, a:active { color: var(--brass); }
a.issue.closed, a.issue.closed:link, a.issue.closed:visited,
a.project.closed, a.project.closed:link, a.project.closed:visited,
a.user.locked, a.user.locked:link, a.user.locked:visited { color: var(--dim); }
a.user.user-mention { background-color: rgba(199,154,75,0.16); }

/* ====== Project jump / dropdowns ====== */
#project-jump .drdn-trigger { background: var(--bg-soft); border-color: var(--border-2); }
#project-jump .drdn-items > * { color: var(--fg) !important; }
#project-jump .drdn-items > a:hover { background-color: var(--brass); color: var(--bg) !important; }
.drdn-content {
  background: var(--bg-soft);
  border: 1px solid var(--border-2);
  color: var(--fg);
}
.drdn-content .autocomplete:focus { border-color: var(--brass); }
.drdn-items > * { border-color: var(--border); }
.drdn-items > *:focus { border-color: var(--border-2); }
.drdn-items > span { color: var(--muted); }
.contextual .drdn-items > a:hover,
.journal-actions .drdn-items > a:hover { background-color: var(--brass); color: var(--bg); }
.contextual .drdn-items > a.icon:hover .icon-svg,
.journal-actions .drdn-items > a.icon:hover .icon-svg { stroke: var(--bg); }
.contextual .drdn-items > a.icon:hover .icon-svg-filled,
.journal-actions .drdn-items > a.icon:hover .icon-svg-filled { fill: var(--bg); }

/* ====== Issue context menu ======
 * Redmine appends #context-menu inside #content and positions it with page
 * coordinates. This theme makes #main positioned, so absolute coordinates are
 * offset by the ancestor origin. The companion script supplies viewport
 * coordinates and fixed positioning keeps the menu anchored at the clicked
 * three-dot trigger.
 *
 * Every selector below is prefixed with `html` on purpose: core
 * context_menu.css is injected through `yield :header_tags`, i.e. AFTER this
 * stylesheet, with selectors of equal specificity. Plain `#context-menu ...`
 * rules would lose the cascade; the extra type selector wins regardless of
 * load order. */
html #context-menu {
  position: fixed;
  color: var(--fg);
}
html #context-menu ul {
  background: var(--bg-soft);
  border-color: var(--border-2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
html #context-menu li {
  border-color: transparent;
  background: transparent;
}
html #context-menu a,
html #context-menu a:link,
html #context-menu a:visited { color: var(--fg); }
html #context-menu li:hover {
  background-color: var(--brass);
  border-color: var(--brass-hi);
}
html #context-menu li:hover > a,
html #context-menu a:hover { color: var(--bg); }
html #context-menu li:hover > a.icon .icon-svg { stroke: var(--bg); }
html #context-menu li:hover > a.icon .icon-svg-filled { fill: var(--bg); }
/* [#12157] A disabled entry stays on the pre-v6 --dim value, held by the
 * --menu-disabled token that exists for this rule only. It is an inactive
 * control, which the contrast floor exempts, and it is the one place where the
 * old --dim landed on brass: the hovered row paints itself with the accent, and
 * the entry keeps its own color because .disabled:hover outranks the row's
 * rule. Raising it would take that pair from 1.32:1 to 1.05:1. Disabled form
 * fields are elsewhere and stay on --muted. */
html #context-menu a.disabled,
html #context-menu a.disabled:hover { color: var(--menu-disabled); }

/* [#12139] The row picked by the context menu gets .context-menu-selection and
 * core paints it with !important in both versions (7.0.1 --oc-blue-7, 6.1.2
 * #507AAA) - a blue off this palette. Worse, cells keep the color the skin sets
 * on them (a closed issue takes --dim, about 1.6:1 on that blue), because an
 * inherited color loses to a declaration of the cell's own. Selection here
 * looks like every other selected element of the skin: brass with page-deep
 * text, 6.5:1. Every declaration needs !important to beat core, plus the same
 * `html` prefix as the rules above to outrank core selectors loaded after this
 * sheet.
 * The td rule is separate on purpose - it is the one that overrides the cell's
 * own color.
 * In the Gantt chart the selection ends up in two colors at once, on purpose:
 * the subject column (div.issue-subject.hascontextmenu) sits outside
 * #gantt_area, so it takes the brass from this rule, while the bar itself keeps
 * core's blue through div#gantt_area .context-menu-selection, which is more
 * specific than anything here. Both read fine, so the rule is left as broad as
 * core's own. */
html .context-menu-selection,
html .context-menu-selection:hover {
  background-color: var(--brass) !important;
  color: var(--bg) !important;
}
html .context-menu-selection td,
html .context-menu-selection a,
html .context-menu-selection a:hover { color: var(--bg) !important; }
html .context-menu-selection svg.icon-svg { stroke: var(--bg) !important; }

/* ====== Tables ====== */
table.list, .table-list { border-color: var(--border); }
table.list th, .table-list-header {
  background: var(--bg-soft);
  color: var(--brass);
  border-color: var(--border);
}
table.list td { border-top-color: var(--border); color: var(--fg); }
table.list:not(.odd-even) tbody tr:nth-child(odd),
.odd, #issue-changesets div.changeset:nth-child(odd) { background-color: var(--panel); }
table.list:not(.odd-even) tbody tr:nth-child(even),
.even, #issue-changesets div.changeset:nth-child(even) { background-color: var(--bg-soft); }
/* [#12071] Redmine 7.0 turns striping off inside a .box by repainting even rows
 * white - a more specific rule than the one above, so it wins and leaves white
 * bands in every boxed list (among them the cards of the Daidala module panel).
 * Same intent, skin colors: even rows take the odd background, so a boxed list
 * reads as one uniform surface. */
.box table.list:not(.odd-even) tbody tr:nth-child(even),
.box .even { background-color: var(--panel); }
table.list:not(.odd-even) tbody tr:nth-child(odd):hover,
table.list:not(.odd-even) tbody tr:nth-child(even):hover,
.odd:hover, .even:hover,
#issue-changesets div.changeset:nth-child(odd):hover,
#issue-changesets div.changeset:nth-child(even):hover {
  background-color: var(--hover-row);
  /* 6px, not 3px: in the issue list a first cell carrying the priority stripe
   * (inset 3px, Issue list below) paints over the row and hid this mark
   * completely ([#12160] gate). The outer 3px stay clear of the stripe, so a
   * hovered priority row reads as priority + brass, and every other hovered row
   * gets a 6px brass edge. */
  box-shadow: inset 6px 0 0 var(--brass);
}

/* [#12161] Brass text on that same hovered row, raised to --brass-row. Three
 * selector groups, one per place where brass lands as text inside a row:
 * the issue ID and the "Feedback" status cell of the issue list, and - in every
 * list - an issue reference plus whatever link the cursor is actually on. The
 * groups repeat the row selectors of the rule above so the token appears on
 * exactly the surface that carries --hover-row and nowhere else; brass as a
 * graphical object (the inset above, the % done bar, icon strokes) stays
 * #C79A4B, it is over 3:1 there already.
 * Group 3 is written as three branches so that each exclusion reaches exactly
 * the state it protects and leaves no brass below the floor beside it:
 * - inside table.issues the ID cell is group 1's alone (td:not(.id)), so a row
 *   in daidala's processing flow keeps its state indicator (Daidala
 *   processing-state indicator below) wherever the cursor rests: --brass-hi
 *   for waiting, transparent + clipped gradient for active. Both indicator rules
 *   are less specific than the groups here, so without the exclusion a hovered
 *   row would repaint the number brass and, on an active row, hide the Cylon
 *   eye ([#7550]) behind opaque text. Neither state needs the token anyway: on
 *   --hover-row --brass-hi reads 6.08:1 and the reduced-motion red 6.16:1. Every
 *   other list has no group 1 and keeps td.id - a wiki page history
 *   (table.list.wiki-page-versions) puts its version number there;
 * - in a closed row the only text carrying the closed state is what [#7557]
 *   dims: the cells themselves and their user links. So a.user is the single
 *   exclusion there (--dim, 4.62:1 on --hover-row, over the floor); the rest of
 *   that row is plain brass - an open issue reference in the parent column, a
 *   version or category link under the cursor - and takes the token like
 *   anywhere else. Closed and locked links keep --dim from Links above
 *   (:not(.closed):not(.locked));
 * - the tooltip link keeps --brass on its own --bg-soft panel, which its
 *   !important already guarantees.
 * The changeset rows of the rule above are not repeated here: #issue-changesets
 * is a dead id in both 6.1.2 and 7.0.1 - no view renders it - so nothing can
 * ever match it. */
table.issues
  tr:is(.odd, .even):not(.rdp-daidala-waiting):not(.rdp-daidala-active):hover
  td.id a,
table.issues tr.status-4:is(.odd, .even):hover td.status,
table.issues tr:is(.odd, .even):not(.closed):hover
  td:not(.id)
  :is(a.issue:not(.closed),
      a:not(.closed):not(.locked):hover,
      a:not(.closed):not(.locked):active),
table.issues tr:is(.odd, .even).closed:hover
  td:not(.id)
  :is(a.issue:not(.closed),
      a:not(.closed):not(.locked):not(.user):hover,
      a:not(.closed):not(.locked):not(.user):active),
:is(table.list:not(.odd-even) tbody tr, tr.odd, tr.even):not(.issue):hover
  td
  :is(a.issue:not(.closed),
      a:not(.closed):not(.locked):hover,
      a:not(.closed):not(.locked):active) {
  color: var(--brass-row);
}
table.issues td.block_column { color: var(--muted); }
table.issue-report tr.total,
table.issue-report-detailed tr.total { border-top-color: var(--border); }
.decoration-red, a.decoration-red { color: var(--red-text) !important; }
table#time-report tbody tr.subtotal,
table#time-report tbody tr.subtotal td.hours { color: var(--muted); }
table#time-report tbody tr.total { border-top-color: var(--border); color: var(--fg-strong); }

/* ====== Boxes / mypage / fieldset ======
 * `color` is explicit here on purpose. Base Redmine sets a light-mode text color
 * on the box itself (.box, .mypage-box { color: #505050 }), so text inside a box
 * never inherits the skin color from #content - it kept #505050 on the dark
 * background, i.e. 1.5:1 against --panel. This hit every plain text node with no
 * color rule of its own: form labels (Name, Identifier, Homepage…) and module
 * names in the project form. --fg gives 9.7:1 on --panel, above the WCAG AA
 * minimum of 4.5:1 for body text. --muted stays where it is set explicitly
 * (metadata, disabled fields). [#11083] */
.box, .mypage-box {
  background: var(--panel);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 5px;
}
fieldset { border-color: var(--border); }
legend { color: var(--brass); }

/* ====== Forms ====== */
input, select, textarea, button {
  background: var(--ink-deep);
  color: var(--fg);
  border: 1px solid var(--border-2);
}
select[multiple=multiple] { background: var(--ink-deep); }
input[type="submit"], button[type="submit"] {
  background-color: var(--brass);
  color: var(--ink-deep);
  border-color: var(--brass);
  font-weight: bold;
}
input[type="submit"]:hover, button[type="submit"]:hover {
  background-color: var(--brass-dim);
  border-color: var(--brass-dim);
}
input[type="text"]:focus, input[type="text"]:active,
input[type="password"]:focus, input[type="password"]:active,
input[type="date"]:focus, input[type="date"]:active,
input[type="number"]:focus, input[type="number"]:active,
input[type="email"]:focus,
select:focus, select:active,
textarea:focus, textarea:active {
  border-color: var(--brass);
  outline: none;
  box-shadow: 0 0 0 2px rgba(199,154,75,.22);
}
input:disabled, select:disabled, textarea:disabled { color: var(--muted); opacity: .7; }
.tabular label.error { color: var(--red-text); }
.tabular label.error + *:not(#issue_description_and_toolbar),
.tabular label.error + span#issue_description_and_toolbar div.jstBlock { border-color: var(--red); }
.check_box_group { background: var(--bg); border-color: var(--border-2); }
.attachments_fields input.filename, #existing-attachments .filename { color: var(--fg); }
.existing-attachment.deleted .filename { color: var(--muted) !important; }
input.autocomplete { background-color: var(--bg); }

/* Redmine's formatted-text preview has a white background in the base theme.
 * Without an explicit text color it inherits the skin's light color and
 * becomes unreadable. */
div.wiki-preview {
  background: var(--ink-deep);
  color: var(--fg);
  border-color: var(--border-2);
}

/* ====== Issue (single) ======
 * The main issue-view wrapper is <div class="issue details"> (without an id).
 * The previous #issue.issue selector matched only the sticky header (id="issue"),
 * leaving the attribute wrapper on the Dark theme's gray background
 * (div.issue { background: --gl-bg-2 }, #7503 note-20). div.issue.details has
 * higher specificity (0,0,2,1 > 0,0,1,1).
 * The parameter box border, shadow, and own background were removed (#7642).
 * Base Redmine / Dark theme sets div.issue { border + box-shadow + background };
 * all three are canceled here. The box blends into #content (--panel) without
 * a local distinction; Description below has its own background and border. */
#issue.issue, div.issue.details { background: transparent; border: none; box-shadow: none; }
.issue .attribute .label, .attributes .label { color: var(--muted); }
.issue .attribute .value, .attributes .value { color: var(--fg); }
#issue .subject h3 { color: var(--fg-strong); }

/* Description block - subtle separation from the other issue attributes
 * (#7527). Previously all of div.issue.details had a uniform --panel background
 * and the description blended into it. A slightly darker background plus a thin
 * brass left border anchors the start of content without loud contrast. */
.issue.details .description {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brass);
  border-radius: 4px;
  padding: 8px 12px;
}

/* ====== Journals ====== */
/* Journal header bar. Core (Redmine 6.1.2) gives it flex space-between and
 * align-items:center, without a border or wrapping. Two narrow-viewport defects
 * (#7817): (1) border-color alone, without border width/style, draws no border,
 * while --bg-soft nearly blends into --bg, so the header does not read as a bar;
 * (2) when the author wraps to two lines, vertically centered metadata (icons +
 * #N) detaches from the first line. Border + radius separate the bar;
 * align-items:flex-start and flex columns align metadata with the author line. */
.journals h4.journal-header {
  background-color: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 4px;
  align-items: flex-start;
}
.journals h4.journal-header .journal-info { flex: 1; min-width: 0; }
.journals h4.journal-header .journal-meta { flex: none; }
.journals h4.journal-header .update-info { color: var(--muted); }
.journals div:target h4.journal-header { background-color: var(--info-bg); }
.journals .journal-meta .journal-link { color: var(--brass); }
.journals .journal-details, ul.revision-info { color: var(--muted); }
.journals .journal-details a, ul.revision-info a { color: var(--brass); }
.journals .journal-details a:hover, ul.revision-info a:hover { color: var(--brass-hi); }
.journals .private-notes { border-left-color: var(--red); }

/* ====== Activity / search results ====== */
#search-results dd span.description { color: var(--muted); }

/* ====== Pagination ====== */
.pagination ul.pages li { border-color: var(--border); background-color: var(--panel); }
.pagination ul.pages li.current { background-color: var(--brass); color: var(--bg); border-color: var(--brass); }
.pagination ul.pages li.page:hover { background-color: var(--hover); }
.pagination ul.pages li.page a:hover,
.pagination ul.pages li.page a:active { color: var(--brass-hi); }

/* ====== Tabs ====== */
#content .tabs ul { border-bottom-color: var(--border); }
#content .tabs ul li a {
  border-color: var(--border);
  color: var(--muted);
  background-color: transparent;
}
#content .tabs ul li a:hover { color: var(--fg); }
#content .tabs ul li a.selected,
#content .tabs ul li a.selected:hover {
  background-color: var(--panel);
  border-color: var(--border);
  border-bottom-color: var(--panel);
  color: var(--brass);
  box-shadow: 0 -2px 0 var(--brass) inset;
}
div.tabs-buttons { background: var(--panel); border-bottom-color: var(--border); }
button.tab-left, button.tab-right { border-color: var(--border-2); background-color: var(--bg-soft); }
button.tab-left:hover, button.tab-right:hover { background-color: var(--hover); }
button.tab-left svg.icon-svg, button.tab-right svg.icon-svg { stroke: var(--fg); }

/* ====== Flash messages ====== */
div.flash.error, #errorExplanation {
  background-color: var(--error-bg);
  border-color: var(--error-bd);
  border-left: 4px solid var(--red);
  color: var(--red-text);
}
div.flash.error svg.icon-svg, #errorExplanation svg.icon-svg { stroke: var(--red); }
div.flash.notice {
  background-color: var(--success-bg);
  border-color: var(--success-bd);
  border-left: 4px solid var(--brass);
  color: var(--success-text);
}
div.flash.notice svg.icon-svg { stroke: var(--brass); }
div.flash.warning, .conflict, .nodata, .warning {
  background-color: var(--warning-bg);
  border-color: var(--warning-bd);
  border-left: 4px solid var(--brass-hi);
  color: var(--warning-text);
}
div.flash.warning svg.icon-svg, .conflict svg.icon-svg { stroke: var(--brass-hi); }

/* ====== Login form ====== */
#login-form {
  background-color: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--fg);
  box-shadow: 0 0 40px rgba(199,154,75,.10), 0 0 60px rgba(46,74,103,.30);
}

/* ====== Modal ====== */
div.modal { background: var(--bg-soft); color: var(--fg); border: 1px solid var(--border); }

/* ====== Wiki ====== */
div.wiki table, div.wiki td, div.wiki th { border-color: var(--border); }
div.wiki a.new { color: var(--red-text); }
div.wiki pre {
  background-color: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg);
}
/* [#12071] Redmine 7.0 gives the syntax-highlighted block inside <pre> its own
 * light background, which draws a bright card inside the dark code block. The
 * <pre> above already carries the background. */
div.wiki pre .syntaxhl { background: transparent; }
div.wiki *:not(pre) > code, div.wiki > code {
  background: rgba(199,154,75,0.10);
  color: var(--fg);
  border: 1px solid var(--border);
}
div.wiki blockquote { border-left: 3px solid var(--brass); color: var(--fg); }
div.wiki ul.toc { background-color: var(--bg-soft); border-color: var(--border); }
div.wiki ul.toc > li:first-child { color: var(--muted); }
div.wiki ul.toc a { color: var(--fg); }
div.wiki ul.toc a:hover { color: var(--brass-hi); }
div.wiki a:target + h1, div.wiki a:target + h2, div.wiki a:target + h3,
div.wiki a:target + h4, div.wiki a:target + h5, div.wiki a:target + h6 { background-color: var(--info-bg); }
a.wiki-anchor:hover { color: var(--muted) !important; }
h1:hover a.wiki-anchor, h2:hover a.wiki-anchor, h3:hover a.wiki-anchor,
h4:hover a.wiki-anchor, h5:hover a.wiki-anchor, h6:hover a.wiki-anchor { color: var(--muted); }
.wiki-update-info { color: var(--muted); }
div.pre-wrapper a.copy-pre-content-link { background: var(--bg-soft); border-color: var(--border-2); }
div.thumbnail { background: var(--bg-soft); border-color: var(--border); }
div.attachments span.author { color: var(--muted); }

/* ====== Tooltips ====== */
.tooltip:hover { color: var(--fg); }
.tooltip span.tip a { color: var(--brass) !important; }
div.tooltip:hover span.tip {
  background-color: var(--bg-soft);
  border-color: var(--border-2);
  color: var(--fg);
  box-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.ui-tooltip { background: var(--bg-soft); color: var(--fg); }

/* ====== Badges (status colors from the palette) ====== */
.badge-private { background: var(--red); color: var(--bg); border-color: var(--red); }
.badge-count { background: var(--brass); color: var(--bg); }
.badge-status-open { color: var(--brass); border-color: var(--brass); }
/* Closed shares --dim with locked on purpose ([#12219]): --dim is the skin's
 * "closed / locked" token, already used for closed issue links and rows. The
 * two badges sit side by side only on the version list and each carries its
 * own label, so the shared color is reinforcement, not the sole carrier. */
.badge-status-locked { color: var(--dim); border-color: var(--dim); }
.badge-status-closed { color: var(--dim); border-color: var(--dim); }
.badge-issues-count { background: var(--bg-soft); color: var(--fg); }

/* ====== Progress / diff ====== */
table.progress td.closed { background: var(--brass-dim); }
table.progress td.done { background: var(--brass); }
table.progress td.todo { background: var(--hover); }
p.progress-info { color: var(--muted); }
.diff_out { background: var(--error-bg); }
.diff_in { background: var(--success-bg); }
/* The changed word inside a diff line: its line's background one step lighter,
 * so it reads against the line without leaving the line's own color. That step
 * is the -bd token of the same family - the second and third place in this
 * sheet where a -bd token paints a surface instead of a border (the first is
 * table.fields_permissions td.required below), and for the same reason: -bg is
 * the line itself, so only the border stop is light enough to mark anything.
 * Both values were written inline until [#12304]; --error-bd is dE76 6.6 from
 * the old one at the same hue, while the added line moves further (26.5)
 * because its #17402a was v1 green the v2 repalette left behind - the only
 * green in the sheet, 72 degrees from the warm brown its family became. */
.diff_out span { background: var(--error-bd); }
.diff_in span { background: var(--success-bd); }
.text-diff { background-color: var(--bg); color: var(--fg); border-color: var(--border); }

/* ====== Highlight (search) ====== */
.highlight { background-color: var(--search-bg); color: var(--search-text); }

/* ====== Ajax indicator ====== */
#ajax-indicator { background-color: var(--bg-soft); border-color: var(--border-2); color: var(--fg); }

/* ====== Icons (SVG) ======
 * [#12218] The hover rules repeat core's own selectors, which paint the glyph
 * red (--oc-red-9, application.css 2195 in 7.0.1, same in 6.1.2). They are
 * overrides, so a hover rule that merely restates the resting brass is not dead
 * weight and cannot be dropped - dropping it hands the glyph back to core.
 * a.icon-only and span.icon-actions are the carriers with no cursor response at
 * all: core hides the label (.icon-only span { display: none }), so there is
 * nothing to underline or repaint and the glyph is the whole element. They go
 * to --brass-hi.
 * a.icon keeps --brass in both states on purpose - its label is visible, so the
 * element already answers the cursor, and repainting only the glyph would split
 * one link into two shades.
 * Dropdown and context-menu items are a.icon as well and keep their own, more
 * specific --bg on brass from the sections above; no dropdown item is
 * icon-only, so nothing there lands on the new value. */
a.icon .icon-svg, a.icon-only .icon-svg, span.icon-actions .icon-svg { stroke: var(--brass); }
a.icon:hover .icon-svg { stroke: var(--brass); }
a.icon-only:hover .icon-svg, span.icon-actions:hover .icon-svg { stroke: var(--brass-hi); }
a.icon .icon-svg-filled, a.icon-only .icon-svg-filled { fill: var(--brass); }
a.icon:hover .icon-svg-filled { fill: var(--brass); }
a.icon-only:hover .icon-svg-filled { fill: var(--brass-hi); }
svg.icon-svg { stroke: var(--muted); }
svg.icon-svg-filled { fill: var(--muted); }
svg.icon-ok { stroke: var(--brass); }
/* [#12071] 7.0 added a wrapper variant of the "ok" icon (span.icon-ok > svg),
 * painted core green; the two rules below already covered error and warning. */
.icon-ok svg.icon-svg { stroke: var(--brass); }
.icon-error svg.icon-svg { stroke: var(--red); }
.icon-warning svg.icon-svg { stroke: var(--brass-hi); }

/* ====== Misc text colours ====== */
p.footnote, p.other-formats, em.info, ul.properties, p.subtitle { color: var(--muted); }
.summary { color: var(--fg); }
#projects-index ul.projects li.root {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 5px;
}
#projects-index li.root ul.projects { border-left-color: var(--border); }
ul.projects li.root div.archived, ul.projects li.child div.archived { color: var(--muted); }
/* [#12071] Two light surfaces added by Redmine 7.0: the anchor highlight of a
 * version header on the roadmap and the group header on the documents list. */
div#roadmap header:target { background-color: var(--info-bg); }
#document-list .document-group h3 { background-color: var(--bg-soft); }

/* ====== Calendar ====== */
ul.cal { background: var(--panel); border-color: var(--border); }
.cal .calhead, .cal .week-number { background-color: var(--bg-soft); color: var(--fg); }
.cal .calbody.this-month { background-color: var(--panel); }
.cal .calbody.other-month { background-color: var(--bg); }
.cal .calbody.other-month p.day-num { color: var(--muted); }
.cal .calbody.today { background: var(--warning-bg); }
/* [#12139] Core paints weekend cells light in both versions (7.0.1
 * --oc-gray-1, 6.1.2 #f1f1f1) through a selector more specific than the
 * .this-month rule above, so the skin never covered them and six white columns
 * stayed in the calendar. Core gives weekends the same color as off-month
 * cells, so the skin does too. The second rule keeps today's cell amber when
 * today is a Saturday or Sunday - the core weekend rule outranks the .today
 * rule above. */
.cal .calbody.nwday:not(.other-month) { background-color: var(--bg); }
.cal .calbody.nwday.today { background: var(--warning-bg); }
/* [#12071] Redmine 7.0 puts today's date on a filled circle
 * (--color-current-marker, brass here) and writes it in white - about 2.6:1.
 * The deep background color gives 7.1:1 on brass. */
.cal .calbody.today .day-value { color: var(--ink-deep); }
.cal .calbody { border-color: var(--border) !important; }
/* [#12149] An issue entry in a day cell is a plain div.issue, so it takes the
 * light plate core paints every div.issue with (7.0.1 --oc-yellow-0, 6.1.2
 * #ffffdd). The skin cleared that plate only on the issue page (#issue.issue,
 * div.issue.details) and the entry has no .details class, so it kept the light
 * background with the skin's paper text on it - about 1.1:1. Cleared to the day
 * cell background. border-color only recolors the border 6.1.2 draws around the
 * entry; 7.0.1 core draws none there, so nothing is invented on that version. */
.cal .calbody div.issue { background: transparent; border-color: var(--border); }

/* ====== JQuery UI / datepicker / mentions ====== */
.ui-autocomplete, .ui-menu {
  background-color: var(--bg-soft);
  border-color: var(--border-2);
  color: var(--fg);
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
  border-color: var(--brass);
  background: var(--brass);
  color: var(--bg);
}
.ui-widget-content { background-color: var(--bg-soft); color: var(--fg); }
.ui-widget-header { background-color: var(--hover); color: var(--fg); border-color: var(--border); }
.ui-datepicker { background: var(--bg-soft); color: var(--fg); border-color: var(--border-2); }
.ui-datepicker td a, .ui-datepicker td span { color: var(--fg); background: transparent; border-color: var(--border); }
.ui-datepicker td a.ui-state-hover, .ui-datepicker td span.ui-state-hover { background: var(--hover); }
.ui-datepicker .ui-datepicker-header { background: var(--hover); color: var(--fg); border-color: var(--border); }
.ui-datepicker .ui-state-disabled { color: var(--muted); }
.tribute-container ul { background-color: var(--bg-soft); border-color: var(--border-2); color: var(--fg); }
.tribute-container li.highlight { background-color: var(--brass); color: var(--bg); }

/* ====== File content / workflow / repository ====== */
.filecontent.wiki { background: var(--panel); border-color: var(--border); }
.sample-data { background-color: var(--bg-soft); border-color: var(--border); color: var(--fg); }
.sample-data td { border-color: var(--border); }
table.transitions td.enabled { background: var(--success-bg); }
table.fields_permissions td.readonly { background: var(--hover); }
/* [#12234] A -bd token painting a surface instead of a border, and the value is
 * deliberate: --error-bg (L* 11.8) sits on the page background (L* 10.9), so it
 * would mark nothing, while --error-bd is the only reddish token light enough
 * to read as a marker. Was the only such place until [#12304] put the two diff
 * spans on the same step for the same reason; three in the sheet now. The cell
 * holds a <select> on its own opaque plate, so this background carries no text
 * - it marks the state against the neighbouring cells, and the selected option
 * carries that state as well. */
table.fields_permissions td.required { background: var(--error-bd); }
tr.changeset td.revision_graph { background-color: var(--bg-soft); }

/* ====== Pre/code ====== */
pre, code { color: var(--fg); }

/* ====== Scrollbar ====== */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--border-2); }
* { scrollbar-color: var(--border) var(--bg); }

/* ====== /issues list - terminal accents (#7525) ======
 * Extends the shared table theme (Tables section above) by differentiating
 * issue-list rows: brass ID with a # prefix, status as colored text, and priority
 * as a stripe on the row's left edge. The goal is to break up the monotony of a
 * uniform grid (designer direction #7525 note-2). Selectors are scoped to
 * table.issues so they do not affect other Redmine lists (repositories, users,
 * changesets) or the shared zebra/hover rules from the Tables section. */

/* Issue ID - brass mono with a # prefix (terminal glyph) */
table.issues td.id a { color: var(--brass); font-weight: 600; }
table.issues td.id a::before { content: "#"; color: var(--muted); }

/* Status as colored text - uppercase mono, only the font color varies by
 * status ID (no background or outline, #7535). The accent color is assigned
 * from the row's status ID (status-N on <tr>, see Issue#css_classes). Status
 * IDs are instance-specific; the plugin is dedicated to this instance, so ID
 * mapping matches the designer's intent. Closed rows are muted by .closed
 * (an ID-independent fallback). */
table.issues td.status {
  font-size: .82em;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
table.issues td.status .badge,
table.issues td.status a,
table.issues td.status > span { text-transform: uppercase; }
/* Render the chip on the status cell itself - Redmine inserts bare text */
table.issues tbody td.status {
  padding-top: 3px;
  padding-bottom: 3px;
}
table.issues tbody td.status::first-line { line-height: 1.6; }

/* Chip color by status (v2 palette, [#8079] note-4 intent: new→muted,
 * in progress→brass-hi, closed→dim):
 *  New(1)       -> muted
 *  In progress(2)-> brass-hi
 *  Resolved(3)  -> brass-hi
 *  Feedback(4)  -> brass (accent)
 *  Waiting(34)  -> muted (paused)
 *  Closed/Rejected -> dim (through .closed below) */
table.issues tr.status-1 td.status { color: var(--muted); }
table.issues tr.status-2 td.status,
table.issues tr.status-3 td.status { color: var(--brass-hi); }
table.issues tr.status-4 td.status { color: var(--brass); }
table.issues tr.status-34 td.status { color: var(--muted); }
/* Closed/rejected - muted text, independent of status ID */
table.issues tr.closed td.status { color: var(--dim); }

/* Priority as a stripe on the row's left edge (importance scanability).
 * position_name from IssuePriority#css_classes: highest, high2.., default,
 * low2.., lowest. Normal (default) has no stripe; only baseline outliers get an
 * accent. The stripe is an inset box-shadow on the row's first cell. The cell
 * paints over the row, so this stripe does cover the first 3px of the row's own
 * hover inset - measured on a live instance in [#12160], against what this
 * comment claimed before. The hover inset is 6px wide for that reason (Tables),
 * and shows in the 3-6px band right next to the priority color. */
table.issues tbody tr td:first-child { position: relative; }
table.issues tbody tr.priority-highest td:first-child { box-shadow: inset 3px 0 0 var(--red); }
table.issues tbody tr[class*="priority-high"] td:first-child { box-shadow: inset 3px 0 0 var(--red); }
table.issues tbody tr.priority-lowest td:first-child,
table.issues tbody tr[class*="priority-low"] td:first-child { box-shadow: inset 3px 0 0 var(--muted); }

/* List header - brass bottom edge (accent, consistent with selected main-menu
 * items). Shared th styling (bg-soft, brass) remains from Tables. */
table.issues thead th { border-bottom: 1px solid var(--brass); }

/* ====== Closed issues in lists - dimming (#7557) ======
 * Redmine marks a closed issue row with `.issue.closed` on <tr>, both in the
 * /issues list (table.issues) and the Subtasks (#issue_tree) and Related issues
 * (#relations) blocks on an issue view. Without this, the whole row is as bright
 * as an open one and closed state is not obvious at a glance (#7555). Mute the
 * entire row text to --dim, subtly and consistently with the rest of the skin
 * (the subject link already had --dim + line-through in Links; list td.status
 * was already muted above). Background, priority stripe, and hover remain
 * untouched - brightness is reduced without hiding anything. */
tr.issue.closed td,
tr.issue.closed td a.user,
tr.issue.closed td a.user:link,
tr.issue.closed td a.user:visited { color: var(--dim); }

/* ====== Another assignee in the list - dim "Assigned to" text (#7637) ======
 * In rows where assignee ≠ current user, gently dim ONLY the "Assigned to"
 * column text (not the whole row), distinguishing own assignments from others'
 * at a glance. JavaScript (daidala_task_states.js) adds the
 * `rdp-daidala-other-assignee` class to td.assigned_to based on the list DOM -
 * purely visual and configuration-free (YAGNI). Opacity affects only the cell:
 * subtle dimming, with the rest of the row unchanged. */
table.issues tbody tr.issue td.assigned_to.rdp-daidala-other-assignee { opacity: 0.55; }

/* ====== Issue references - mark as clickable (#7557) ======
 * An issue reference (`a.issue`) in descriptions/journals and the
 * Subtasks/Related issues blocks rendered like plain text (--fg from the shared
 * `a` rule in Links), so its link behavior was not visible. Mark it subtly:
 * brass (consistent with `#…` issue IDs in the /issues list) plus a dotted
 * underline indicating clickability. Closed links (`a.issue.closed`) remain
 * untouched at --dim + line-through from Links; overriding that would regress
 * state readability. */
a.issue:not(.closed),
a.issue:not(.closed):link,
a.issue:not(.closed):visited {
  color: var(--brass);
  text-decoration: underline dotted rgba(199,154,75,.5);
  text-underline-offset: 2px;
}
/* [#12218] Under the cursor the text goes to --brass-hi as well. Before, only
 * the dotted underline moved (a 1 px line), while the text - practically the
 * whole link - stayed at the resting color, so the reference was the one link
 * in the skin that did not repaint on hover. The underline keeps its own,
 * lighter value; it is the same --brass-hi at 60%. */
a.issue:not(.closed):hover,
a.issue:not(.closed):active {
  color: var(--brass-hi);
  text-decoration-color: rgba(227,184,94,.6);
}

/* ====== Daidala processing-state indicator in issue lists (#7554) ======
 * JavaScript (daidala_task_states.js) pulls states from core through the plugin
 * proxy and adds a state class to each issue row in daidala's processing flow:
 *   .rdp-daidala-waiting → issue waits in the flow (picked up, before runner spawn)
 *   .rdp-daidala-active  → runner is currently processing the issue
 * The indicator is the issue number itself in the ID column (td.id a), matching
 * the author's [#7550] intent to show state on the number. Rows without a class
 * (outside daidala's flow) retain the default brass `#…` from above, making
 * "in the flow" and "outside the flow" distinguishable at a glance. */

/* WAITING - static emphasis: --brass-hi number with a dot marker before `#`.
 * No animation while the issue waits in the queue, but clearly distinct from
 * the regular --brass used outside the flow. */
table.issues tbody tr.rdp-daidala-waiting td.id a { color: var(--brass-hi); }
table.issues tbody tr.rdp-daidala-waiting td.id a::before {
  content: "◦ #";
  color: var(--brass-hi);
}

/* ACTIVE - animated "Cylon eye" (BSG, author's intent [#7550 note-2/3]): a
 * horizontal sweep of bright light repeatedly crosses the number glyphs.
 * Implementation: a moving gradient (--red-sweep → --red-hi → --red-sweep)
 * clipped to glyphs with background-clip:text and animated back and forth like
 * an oscillating robot eye.
 *
 * [#12171] The ramp used to rest on a hardcoded #7a1a15 filling 60% of its
 * width - 1.07:1 on --hover-row, so for most of the cycle the number was not
 * low-contrast but unreadable, and the hardcoded mid stop #ff5f56 did not clear
 * 4.5:1 either (3.78:1). The dark plateau is gone with the 30%/70% stops that
 * only held it; the number now rests on --red-sweep with --red-hi running
 * across it. The sweep is text carrying content, so none of the three WCAG
 * 1.4.3 exemptions applies to it and both stops have to clear the floor. That
 * inverts the cycle - a readable number with a flash running over it instead of
 * a dark one with a lightening - which is the cost of a legible resting state;
 * the amplitude left (dL* 20.1) still reads as motion. */
table.issues tbody tr.rdp-daidala-active td.id a {
  color: transparent;
  background-image: linear-gradient(
    90deg,
    var(--red-sweep) 0%,
    var(--red-sweep) 45%,
    var(--red-hi) 50%,
    var(--red-sweep) 55%,
    var(--red-sweep) 100%
  );
  background-size: 300% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  animation: rdp-cylon-eye 1.6s ease-in-out infinite alternate;
}
table.issues tbody tr.rdp-daidala-active td.id a::before {
  content: "#";
  /* The `#` prefix does not inherit the number glyphs' clipped text (separate
   * ::before box), so it gets the sweep's resting color - in the issue view
   * below the `#` is part of the gradient, and both places should match
   * ([#12171]). */
  color: var(--red-sweep);
  -webkit-text-fill-color: var(--red-sweep);
}

@keyframes rdp-cylon-eye {
  from { background-position: 0% 50%; }
  to   { background-position: 100% 50%; }
}

/* Disable animation for prefers-reduced-motion users; active state remains
 * statically readable as a red number. The ::before prefix needs its own rule
 * here: it is a separate box with its own color / -webkit-text-fill-color, so
 * without it the digits would fall back to --red-text while the `#` stayed on
 * --red-sweep - the very split the prefix rule above exists to avoid. */
@media (prefers-reduced-motion: reduce) {
  table.issues tbody tr.rdp-daidala-active td.id a {
    animation: none;
    color: var(--red-text);
    background-image: none;
    -webkit-text-fill-color: var(--red-text);
  }
  table.issues tbody tr.rdp-daidala-active td.id a::before {
    color: var(--red-text);
    -webkit-text-fill-color: var(--red-text);
  }
}

/* ====== Processing-state indicator on a single issue view (#7622) ======
 * The same indicator as in the list (#7554), applied to the "Issue #<id>"
 * heading on /issues/<id>. In lists, state appears on the number in td.id; here
 * the number is embedded in heading text (h2 "Issue #7622"), so JavaScript
 * (daidala_task_states.js) wraps only "#<id>" in
 * <span.rdp-daidala-issue-number> and adds the state class there. Visual rules
 * match the list: --brass-hi/waiting, Cylon-eye gradient/active, shared
 * rdp-cylon-eye keyframes, and the prefers-reduced-motion fallback above.
 *
 * [#9846] The same span is also injected into the number inside
 * div#sticky-issue-header .issue-heading, so the sticky bar shows the state
 * while the h2 is scrolled out of view. The rules below are element-agnostic
 * (class only), so both places share them without duplication. */

/* WAITING - static --brass-hi, matching the list number. */
.rdp-daidala-issue-number.rdp-daidala-waiting { color: var(--brass-hi); }

/* ACTIVE - animated "Cylon eye" on the "#<id>" glyphs. */
.rdp-daidala-issue-number.rdp-daidala-active {
  color: transparent;
  background-image: linear-gradient(
    90deg,
    var(--red-sweep) 0%,
    var(--red-sweep) 45%,
    var(--red-hi) 50%,
    var(--red-sweep) 55%,
    var(--red-sweep) 100%
  );
  background-size: 300% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  animation: rdp-cylon-eye 1.6s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
  .rdp-daidala-issue-number.rdp-daidala-active {
    animation: none;
    color: var(--red-text);
    background-image: none;
    -webkit-text-fill-color: var(--red-text);
  }
}

/* ====== Sticky issue header - skin palette (#9846) ======
 * Core application.css paints the bar with the light palette (white background,
 * #d0d7de border) and the skin left it untouched, so on every viewport width a
 * white strip floated over the dark page with skin-colored (paper) text on it -
 * about 1.2:1 contrast. Repaint it with the panel background the rest of the
 * skin's raised surfaces use, plus a stronger shadow, because the core one
 * (black at .15 alpha) is invisible against a dark page. The bar holds plain
 * text only (span.issue-heading + span.subject), so no link colors are needed. */
div#sticky-issue-header {
  background-color: var(--panel);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  color: var(--fg);
}

/* ====== Sticky issue header on narrow viewports (#9846) ======
 * Core responsive.css pushes div#sticky-issue-header 64px down on mobile so it
 * does not hide under #header, which core makes position:fixed below 900px.
 * This skin keeps #header in normal flow (stacking rule near the top of this
 * file), so it scrolls away with the page and the reserved 64px is just an
 * empty gap above the bar. Pin the bar to the top edge and bring the anchor
 * scroll margin back to the bar height alone (core uses 50px on desktop). */
@media screen and (max-width: 899px) {
  div#sticky-issue-header { inset-block-start: 0; }

  .controller-issues.action-show div.wiki a[name],
  .controller-issues.action-show #history div[id^="note-"],
  .controller-issues.action-show #history div[id^="change-"],
  .controller-issues.action-show #update {
    scroll-margin-block-start: 50px;
  }
}

/* ====== "Blocked" marker in issue lists (#7634) ======
 * JavaScript (daidala_task_states.js) asks the plugin endpoint which visible
 * issues have an open blocker (an unclosed subtask or blocks/follows issue),
 * then adds .rdp-daidala-blocked to the subject cell (td.subject). The reason
 * appears in the subject link's title tooltip; this rule only draws a discreet
 * lock icon before the subject.
 *
 * "Subtle marker" (Konrad's intent [#7634]): a small monochrome lock in
 * subdued brass before the subject. The text variation selector (U+FE0E) forces text
 * rendering instead of a colored emoji, so the glyph accepts `color` and stays
 * quiet. It does not alter table layout: the icon is an inline ::before with a
 * right margin, shifting the subject by the glyph width. */
table.issues tbody tr td.subject.rdp-daidala-blocked > a::before,
table.issues tbody tr td.subject.rdp-daidala-blocked > span:first-child::before {
  content: "\1F512\FE0E";
  color: var(--brass-hi);
  opacity: .75;
  margin-right: .35em;
  font-size: .9em;
  /* The lock is an indicator, not a link - do not underline it with the subject */
  text-decoration: none;
  display: inline-block;
}

/* When the subject cell has no inner <a>/<span> (rare list render variants),
 * place the icon directly on the cell. */
table.issues tbody tr td.subject.rdp-daidala-blocked:not(:has(> a)):not(:has(> span))::before {
  content: "\1F512\FE0E";
  color: var(--brass-hi);
  opacity: .75;
  margin-right: .35em;
  font-size: .9em;
}

/* ====== Hide <hr> on issue view - header and section separators (#7632) ======
 * Konrad does not want horizontal <hr> lines on issue views (#7631 note-2:
 * only the header and between sections, NOT in journal history, NOT globally).
 * issues#show renders exactly three <hr> elements (verified in #7632), all
 * before #history, so journal history has no <hr> to hide:
 *   1. <hr> before .description → header/attributes → description separator
 *   2. <hr> before #issue_tree  → Subtasks section separator
 *   3. <hr> before #relations   → Related issues section separator
 * Scoping to body.controller-issues.action-show limits the rule to this view
 * (body classes from Redmine::Controller), leaving <hr> on other views (wiki,
 * activity) untouched. :has() targets an <hr> preceding a specific section,
 * keeping any future <hr> in journal/description content outside the scope. */
.controller-issues.action-show hr:has(+ .description),
.controller-issues.action-show hr:has(+ #issue_tree),
.controller-issues.action-show hr:has(+ #relations) {
  display: none;
}

/* ====== Cron expression builder on the Scheduled Jobs tab (#8017) ======
 * Variant A: <select> elements compose a five-field expression and write it to
 * the #cron field below (JavaScript: daidala_cron_builder.js). Inline layout
 * with spacing; the builder label follows .box.tabular convention (label on the
 * left). JavaScript shows/hides individual .rdp-cron-part groups by frequency. */
.rdp-cron-builder .rdp-cron-part {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  margin-left: 0.75em;
}
/* Part labels (dom/at/tz) are not column labels of a tabular form. Otherwise
   they match the core .tabular label {float:left;margin-left:-180px;width:175px}
   rule and, instead of staying beside their <select>, move into the left column,
   stack over the builder label, and cover fields (making them unclickable) -
   #8033. Keep them inline beside their own select. */
.rdp-cron-builder .rdp-cron-part label {
  float: none;
  margin-left: 0;
  width: auto;
  text-align: left;
  font-weight: normal;
  line-height: normal;
}
.rdp-cron-builder select {
  margin: 0 0.15em;
}
.rdp-cron-builder .rdp-cron-hh {
  display: inline-flex;
  align-items: center;
}
.rdp-cron-builder .rdp-cron-hour,
.rdp-cron-builder .rdp-cron-minute {
  min-width: 4.5em;
}
.rdp-cron-builder .rdp-cron-colon {
  margin: 0 0.1em;
}
.rdp-cron-builder .info {
  display: block;
  margin-top: 0.4em;
}

/* [#11199] Marker next to an agent on the "Obsada" card that has no access to the
 * project's GitLab repositories. It carries its own background and border, so its
 * contrast does not depend on which stripe of table.list the row landed on:
 * --brass-hi on --warning-bg is 7.6:1, above the WCAG AA minimum of 4.5:1 for body
 * text, on the odd row (--panel), the even row (--bg-soft) and on hover
 * (--hover-row) alike. Under a theme that does not define these tokens the badge
 * degrades to plain inherited text, which stays readable. */
.rdp-staff-no-repo-access {
  margin-left: .4rem;
  padding: .05rem .35rem;
  border: 1px solid var(--warning-bd);
  border-radius: .25rem;
  color: var(--brass-hi);
  background: var(--warning-bg);
  font-size: .85em;
  white-space: nowrap;
}