/* ============================================================================
   MOSS OPERATIONS — FLOORPLATE skin for the Django 6 admin.
   Loaded via {% block extrastyle %} in admin/base_site.html, i.e. AFTER
   base.css + dark_mode.css (so var overrides win) but BEFORE responsive.css
   (so a few tablet-breakpoint rules are re-asserted at higher specificity).
   Strategy: (1) remap Django's admin CSS-variable contract onto the app's
   FLOORPLATE tokens (limestone/graphite/cobalt, IBM Plex — light + dark), then
   (2) hard-style the components: hairline borders, mono labels, cobalt accents,
   and load app.js so every native <select> becomes the custom dropdown.
   ========================================================================== */

/* ---- FLOORPLATE palette (mirrors static/css/app.css) --------------------- */
/* Token NAMES are unchanged so the Django-var remap + every component rule
   below resolve as-is; only the VALUES change — limestone ground, graphite
   ink, one cobalt line, IBM Plex. Light by day, graphite by night. The admin's
   theme toggle sets html[data-theme]; auto follows the OS. */
:root, html[data-theme="light"], html[data-theme="auto"] {
  --bg:#E7E3D9; --surface:#F3F0E8; --ink:#23262B; --ink-dim:#68645C;
  --line:#BCB4A1; --hair:#D9D3C5; --field-line:#858072;
  --blaze:#2B54C9; --on-blaze:#ffffff; --link:#2B54C9;
  --up:#3F7F55; --up-bg:#E2ECE4; --down:#B5231A; --down-bg:#F4E3E1;
  --degraded:#B0781F; --degraded-bg:#F1E8D5; --unknown:#847F75; --unknown-bg:#ECE8DF;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --bg:#171A1E; --surface:#23282E; --ink:#E9E5DC; --ink-dim:#938D83;
    --line:#434C55; --hair:#282D33; --field-line:#647280;
    --blaze:#6A85EA; --on-blaze:#0E1116; --link:#8FA6F0;
    --up:#5FB87C; --up-bg:#18251C; --down:#E36B62; --down-bg:#2A1917;
    --degraded:#D6A24C; --degraded-bg:#2A2314; --unknown:#847F76; --unknown-bg:#1C2025;
    color-scheme: dark;
  }
}
html[data-theme="dark"] {
  --bg:#171A1E; --surface:#23282E; --ink:#E9E5DC; --ink-dim:#938D83;
  --line:#434C55; --hair:#282D33; --field-line:#647280;
  --blaze:#6A85EA; --on-blaze:#0E1116; --link:#8FA6F0;
  --up:#5FB87C; --up-bg:#18251C; --down:#E36B62; --down-bg:#2A1917;
  --degraded:#D6A24C; --degraded-bg:#2A2314; --unknown:#847F76; --unknown-bg:#1C2025;
  color-scheme: dark;
}

/* ---- remap Django admin variables onto the tokens ----------------------- */
/* html:root (0,1,1) + loaded-last beats every base.css/dark_mode.css var rule
   in any theme, while the values track the themed tokens above. */
html:root {
  --primary: var(--ink);
  --secondary: var(--ink);
  --accent: var(--blaze);
  --primary-fg: var(--bg);
  --danger: #B5231A;               /* fixed accessible red for solid destructive buttons (white text = 6.5:1) */

  --body-fg: var(--ink);
  --body-bg: var(--bg);
  --body-quiet-color: var(--ink-dim);
  --body-medium-color: var(--ink-dim);
  --body-loud-color: var(--ink);

  --header-color: var(--ink);
  --header-branding-color: var(--blaze);
  --header-bg: var(--bg);
  --header-link-color: var(--ink);

  --breadcrumbs-fg: var(--ink-dim);
  --breadcrumbs-link-fg: var(--ink);
  --breadcrumbs-bg: var(--surface);

  --link-fg: var(--link);
  --link-hover-color: var(--ink);
  --link-selected-fg: var(--link);

  --hairline-color: var(--hair);
  --border-color: var(--line);

  --error-fg: var(--down);

  --message-success-bg: var(--up-bg);
  --message-warning-bg: var(--degraded-bg);
  --message-error-bg: var(--down-bg);
  --message-info-bg: var(--surface);

  --darkened-bg: var(--surface);
  --selected-bg: var(--surface);
  --selected-row: var(--degraded-bg);

  --button-fg: var(--on-blaze);
  --button-bg: var(--blaze);
  --button-hover-bg: var(--on-blaze);
  --default-button-bg: var(--blaze);
  --default-button-hover-bg: var(--on-blaze);
  --close-button-bg: var(--ink-dim);
  --close-button-hover-bg: var(--ink);
  --delete-button-bg: var(--danger);
  --delete-button-hover-bg: var(--danger);

  --object-tools-fg: var(--on-blaze);
  --object-tools-bg: var(--blaze);
  --object-tools-hover-bg: var(--on-blaze);

  --font-family-primary: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-family-monospace: 'IBM Plex Mono', ui-monospace, monospace;
}

/* kill all rounding inside the admin shell (Django ships 4px). The date/time
   picker popups are appended to <body>, OUTSIDE #container, so list them too. */
#container, #container *, body.login, body.login *,
.calendarbox, .calendarbox *, .clockbox, .clockbox * { border-radius: 0 !important; }

body { font-family: 'IBM Plex Sans', system-ui, sans-serif; }

/* ---- links -------------------------------------------------------------- */
a:link, a:visited { color: var(--link); }
a:hover, a:focus { color: var(--ink); }

/* ---- header / branding -------------------------------------------------- */
#header {
  background: var(--bg);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding: 16px 28px;
  box-shadow: none;
}
#branding #site-name, #branding #site-name a:link, #branding #site-name a:visited {
  font-family: 'IBM Plex Mono', sans-serif;
  font-size: 24px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 400;
}
#branding #site-name a:hover { color: var(--ink); }
.wm-blaze { color: var(--blaze); }
.admtag { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .14em;
  color: var(--blaze); border: 1px solid var(--blaze); padding: 1px 6px; margin-left: 8px; vertical-align: middle; }
.back-to-app { font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-dim); border: 1px solid var(--line); padding: 5px 12px; margin: 8px 0 0 40px; display: inline-block; }
.back-to-app:link, .back-to-app:visited { color: var(--ink-dim); }
.back-to-app:hover { color: var(--blaze); border-color: var(--blaze); }
#user-tools {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink-dim);
  text-align: right;
}
#user-tools a:link, #user-tools a:visited { color: var(--ink); border-bottom: 1px solid transparent; }
#user-tools a:hover { color: var(--blaze); border-bottom-color: var(--blaze); }
#logout-form button {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}
#logout-form button:hover { color: var(--blaze); }
.theme-toggle svg.theme-icon-when-auto,
.theme-toggle svg.theme-icon-when-dark,
.theme-toggle svg.theme-icon-when-light { fill: var(--ink); color: var(--bg); }

/* ---- breadcrumbs -------------------------------------------------------- */
.breadcrumbs {
  background: var(--surface);
  color: var(--ink-dim);
  border-bottom: 1px solid var(--line);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 10px 28px;
}
.breadcrumbs a { color: var(--link); }
.breadcrumbs a:hover { color: var(--ink); }

/* ---- nav sidebar -------------------------------------------------------- */
#nav-sidebar { border-right: 1px solid var(--line); background: var(--bg); }
#nav-sidebar .module caption,
.toggle-nav-sidebar { background: var(--surface); color: var(--ink); }
#nav-sidebar a:link, #nav-sidebar a:visited { color: var(--ink); }
#nav-sidebar li.selected a, #nav-sidebar a:hover { color: var(--link); }
#toggle-nav-sidebar { border-right: 1px solid var(--line); color: var(--ink); }

/* ---- headings + modules ------------------------------------------------- */
#content h1, .colMS #content h1 {
  font-family: 'IBM Plex Mono', sans-serif;
  font-size: 30px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--ink);
}
h2, h3 { color: var(--ink); }
.module {
  background: var(--bg);
  border: 1px solid var(--line);
  margin-bottom: 22px;
}
.module h2, .module caption, .inline-group h2,
.module table caption a.section:link, .module table caption a.section:visited {
  background: var(--surface);
  color: var(--ink);
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border-bottom: 1px solid var(--line);
  padding: 11px 14px;
}
.module h2 a.section:link, .module h2 a.section:visited { color: var(--ink); }
.dashboard .module table th { width: auto; }
.dashboard .module table td a { font-weight: 600; }

/* ---- buttons ------------------------------------------------------------ */
.button, input[type=submit], input[type=button], .submit-row input, a.button,
.object-tools a:link, .object-tools a:visited {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: var(--blaze);
  color: var(--on-blaze);
  border: 3px solid var(--blaze);
  padding: 11px 18px;
  cursor: pointer;
  text-shadow: none;
}
.button:hover, input[type=submit]:hover, input[type=button]:hover,
.submit-row input:hover, a.button:hover,
.object-tools a:hover, .object-tools a:focus {
  background: var(--on-blaze);
  color: var(--blaze);
  border-color: var(--on-blaze);
}
/* secondary (non-primary) buttons read as ghost */
.button.default, input[type=submit].default, .submit-row input[name="_save"] {
  background: var(--blaze); color: var(--on-blaze); border-color: var(--blaze);
}
.submit-row input:not(.default), .button:not(.default):not(a.button) {
  background: transparent; color: var(--ink); border: 2px solid var(--field-line);
}
.submit-row input:not(.default):hover, .button:not(.default):not(a.button):hover {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}
.object-tools { margin-top: 0; }
/* re-assert chunky padding above responsive.css (which sets 7px at <=1024px) */
#container .button, #container input[type=submit], #container input[type=button],
#container .submit-row input, #container a.button, #container .object-tools a { padding: 11px 18px; }

/* destructive: solid red + white text, contrast-safe in BOTH themes */
.submit-row a.deletelink, a.deletelink:link, a.deletelink:visited {
  background: transparent; color: var(--down); border: 2px solid var(--down);
  font-family: 'IBM Plex Mono', monospace; font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: 1px; padding: 10px 16px;
}
.submit-row a.deletelink:hover, a.deletelink:hover, a.deletelink:focus {
  background: var(--danger); color: #fff; border-color: var(--danger);
}
.delete-confirmation form input[type=submit],
.delete-confirmation form input[type=submit]:hover,
.delete-confirmation form input[type=submit]:focus {
  background: var(--danger); color: #fff; border: 3px solid var(--danger);
}
.delete-confirmation form .cancel-link {
  background: transparent; color: var(--ink); border: 2px solid var(--field-line);
  font-family: 'IBM Plex Mono', monospace; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px;
}
.delete-confirmation form .cancel-link:hover { background: var(--ink); color: var(--bg); }
/* popup Close button in line with the rest */
.submit-row a.closelink {
  background: transparent; color: var(--ink); border: 2px solid var(--field-line);
  font-family: 'IBM Plex Mono', monospace; font-weight: 700; text-transform: uppercase;
  letter-spacing: 1px; padding: 10px 16px;
}
.submit-row a.closelink:hover { background: var(--ink); color: var(--bg); }

/* ---- tables / changelist ------------------------------------------------ */
#changelist, .results, #result_list { border-color: var(--line); }
table { border-collapse: collapse; }
thead th, thead td {
  background: var(--surface);
  color: var(--ink-dim);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  border-bottom: 1px solid var(--line);
  font-weight: 700;
}
thead th a:link, thead th a:visited { color: var(--ink-dim); }
#result_list { border: 1px solid var(--line); }
#result_list tbody td, #result_list tbody th {
  border-bottom: 1px solid var(--hair);
  border-left: none; border-right: none;
}
tbody tr:nth-child(odd) { background: var(--bg); }
tbody tr:nth-child(even) { background: var(--surface); }
#result_list tbody tr:hover td, #result_list tbody tr:hover th { background: var(--degraded-bg); }
/* selected (bulk-action) rows get a blaze rail so they read distinct from hover */
#changelist tbody tr.selected td,
#changelist tbody tr:has(.action-select:checked) td { box-shadow: inset 3px 0 0 var(--blaze); }
#changelist-filter {
  background: var(--surface);
  border-left: 1px solid var(--line);
}
#changelist-filter h2 {
  background: var(--ink); color: var(--bg);
  font-family: 'IBM Plex Mono', monospace; font-size: 11px;
  text-transform: uppercase; letter-spacing: 1.5px;
}
#changelist-filter h3 { font-family: 'IBM Plex Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--ink-dim); }
#changelist-filter li.selected a { color: var(--link); }
.paginator { border-top: 1px solid var(--line); font-family: 'IBM Plex Mono', monospace; font-size: 12px; }
.paginator a:link, .paginator a:visited { background: var(--surface); color: var(--ink); border: 2px solid var(--field-line); padding: 2px 6px; }
/* match Django's own (0,3,1) selector shape so the hover wins by source order */
.paginator a:not([aria-current="page"], .showall):hover,
.paginator a:not([aria-current="page"], .showall):focus {
  background: var(--blaze); color: var(--on-blaze); border-color: var(--blaze);
}
/* Django 6 marks the current page with aria-current, NOT .this-page */
.paginator a[aria-current="page"], .paginator .this-page {
  background: var(--blaze); color: var(--on-blaze); border: 2px solid var(--blaze);
  padding: 2px 6px; font-weight: 700;
}
#toolbar, #changelist #toolbar { border: 1px solid var(--line); background: var(--surface); }
#toolbar form input[type=text], #searchbar { border: 2px solid var(--field-line); background: var(--bg); color: var(--ink); }
#toolbar #searchbar:focus { outline: none; border-color: var(--blaze); }
.actions { background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-family: 'IBM Plex Mono', monospace; font-size: 12px; }
.actions select { border: 2px solid var(--field-line); }

/* ---- forms -------------------------------------------------------------- */
fieldset.module { border: 1px solid var(--line); }
.form-row { border-bottom: 1px solid var(--hair); }
.aligned label, form .form-row label, label, #container label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--ink-dim);
}
input[type=text], input[type=password], input[type=email], input[type=url],
input[type=number], input[type=tel], input[type=date], input[type=time],
textarea, select, .vTextField {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  background: var(--bg);
  color: var(--ink);
  border: 2px solid var(--field-line);
  padding: 8px 10px;
}
input:focus, textarea:focus, select:focus, .vTextField:focus { outline: none; border-color: var(--blaze); box-shadow: none; }
.help, .helptext, p.help, div.help { color: var(--ink-dim); font-size: 11px; }
.errorlist, ul.errorlist li { color: var(--down); font-family: 'IBM Plex Mono', monospace; font-size: 11px; background: transparent; }
.errornote {
  background: var(--down-bg); color: var(--ink);
  border: 2px solid var(--down);
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 700;
  padding: 12px 14px;
}
.form-row.errors { border-left: 3px solid var(--down); }
/* stacked / tabular inline headers + add-row match the module chrome */
.inline-related h3, .inline-related h4 {
  background: var(--surface); color: var(--ink); border-color: var(--line);
  font-family: 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: 1px;
}
.inline-group .tabular tr.add-row td, .inline-group div.add-row {
  background: var(--surface); border-top: 1px solid var(--line);
}

/* ---- messages (null the Django SVG icons for a flat brutalist look) ------ */
ul.messagelist li {
  border: 2px solid var(--field-line);
  background-image: none !important;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  color: var(--ink);
  padding: 12px 14px;
}
ul.messagelist li.success { border-color: var(--up); background: var(--up-bg); }
ul.messagelist li.warning { border-color: var(--degraded); background: var(--degraded-bg); }
ul.messagelist li.error { border-color: var(--down); background: var(--down-bg); }

/* ---- widgets: date/time, selector, autocomplete ------------------------- */
.calendarbox, .clockbox { border: 1px solid var(--line); background: var(--surface); }
.calendar caption, .calendarbox h2, .clockbox h2 { background: var(--ink); color: var(--bg); font-family: 'IBM Plex Mono', monospace; text-transform: uppercase; }
.calendar table { background: var(--surface); }              /* was hard-coded white -> unreadable in dark */
.calendar th { background: var(--surface); color: var(--ink-dim); border-color: var(--line); }
.calendar td { border-color: var(--hair); }
.calendar td.nonday { background: var(--bg); }
.calendar td a, .timelist a { color: var(--ink); }
.calendar td.selected a { background: var(--blaze); color: var(--on-blaze); }
/* scoped under the popup containers so this (0,3,2) beats Django's widgets.css
   .calendar td a:hover (0,2,2), which loads AFTER us (extrahead > extrastyle) and
   would otherwise force white-on-near-white in the dark theme. */
.calendarbox .calendar td a:hover, .calendarbox .calendar td a:active,
.clockbox .timelist a:hover, .clockbox .timelist a:active { background: var(--blaze); color: var(--on-blaze); }
.calendarnav, .calendarnav a:link, .calendarnav a:visited { color: var(--ink-dim); }
.datetimeshortcuts a:link, .datetimeshortcuts a:visited { color: var(--link); }
.selector-available, .selector-chosen { border: 2px solid var(--field-line); }
.selector h2, .selector-available-title, .selector-chosen-title {
  background: var(--surface); color: var(--ink);
  font-family: 'IBM Plex Mono', monospace; text-transform: uppercase; border-bottom: 2px solid var(--field-line);
}
.selector-chosen .list-footer-display { background: var(--surface); color: var(--ink); }
.selector .selector-filter input { border: 2px solid var(--field-line); }
.stacked ul.selector-chooser { background-color: var(--surface); }
.select2-container--admin-autocomplete .select2-selection,
.select2-dropdown { border: 2px solid var(--field-line) !important; }
.select2-container--admin-autocomplete .select2-results__option--highlighted { background: var(--blaze) !important; color: var(--on-blaze) !important; }
.related-widget-wrapper-link { filter: none; }
/* Add/Change/View icons are fixed dark SVGs — invert them on the dark bg.
   (hue-rotate keeps the coloured +/x roughly on-hue while lightening the dark
   pencil/eye.) Covers both the changelist <a>-background icons and the change-
   form related-widget <img> icons. */
html[data-theme="dark"] .addlink, html[data-theme="dark"] .changelink,
html[data-theme="dark"] .viewlink, html[data-theme="dark"] .inlinechangelink,
html[data-theme="dark"] .inlineviewlink,
html[data-theme="dark"] .related-widget-wrapper-link img { filter: invert(1) hue-rotate(180deg); }
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .addlink, html[data-theme="auto"] .changelink,
  html[data-theme="auto"] .viewlink, html[data-theme="auto"] .inlinechangelink,
  html[data-theme="auto"] .inlineviewlink,
  html[data-theme="auto"] .related-widget-wrapper-link img { filter: invert(1) hue-rotate(180deg); }
}

/* ---- footer ------------------------------------------------------------- */
#footer { color: var(--ink-dim); font-family: 'IBM Plex Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }

/* ========================================================================
   LOGIN — Django's login.css is intentionally NOT loaded (see admin/login.html);
   this section provides the full brutalist login layout.
   ======================================================================== */
body.login {
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}
body.login #container {
  width: 100%;
  max-width: 430px;
  min-width: 0;
  height: auto;          /* override Django base.css #container height:100% */
  min-height: 0;
  border: 1px solid var(--line);
  background: var(--bg);
  display: block;
  margin: 0;
  box-shadow: 10px 10px 0 var(--line);
}
body.login #header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
body.login .main { padding: 0; display: block; }
body.login #content { padding: 26px 22px 28px; }
body.login #content-main { width: 100%; }
body.login #content h1 { display: none; }
body.login .errornote { margin: 0 0 18px; }
#login-form { margin: 0; padding: 0; }
#login-form .form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 0 16px;
  border: none;
  float: none;
  width: 100%;
}
#login-form .form-row label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--ink-dim);
  width: auto;
}
#login-form input[type=text], #login-form input[type=password] {
  width: 100%;
  box-sizing: border-box;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 15px;
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--field-line);
  padding: 12px 12px;
}
#login-form input:focus { outline: none; border-color: var(--blaze); }
#login-form .submit-row { padding: 8px 0 0; margin: 0; border: none; background: transparent; text-align: left; }
#login-form .submit-row input {
  width: 100%;
  margin: 0;
  padding: 13px 18px;
  background: var(--blaze);
  color: var(--on-blaze);
  border: 3px solid var(--blaze);
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
#login-form .submit-row input:hover { background: var(--on-blaze); color: var(--blaze); border-color: var(--on-blaze); }
.password-reset-link { text-align: center; margin-top: 14px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.password-reset-link a { color: var(--link); }

/* ========================================================================
   Custom dropdown — app.js (loaded in base_site.html) replaces every native
   <select> with this, so the admin honours the no-native-controls rule and the
   selects stop clipping. Styled on the FLOORPLATE tokens.
   ======================================================================== */
.mss { position: relative; display: inline-block; min-width: 220px; max-width: 100%; vertical-align: middle; }
.mss select { position: absolute !important; width: 1px; height: 1px; padding: 0 !important; margin: 0; opacity: 0; pointer-events: none; border: 0 !important; }
.mss-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: .01em;
  background: var(--bg); color: var(--ink); border: 1px solid var(--field-line); padding: 8px 12px; cursor: pointer; text-align: left; }
.mss-btn:hover, .mss.open .mss-btn { border-color: var(--blaze); }
.mss-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mss-caret { font-size: 10px; color: var(--ink-dim); flex: none; }
.mss.open .mss-caret { color: var(--blaze); }
.mss.is-placeholder .mss-label { color: var(--ink-dim); }
.mss-menu { position: absolute; top: calc(100% + 3px); left: 0; min-width: 100%; z-index: 1200;
  background: var(--surface); border: 1px solid var(--line); max-height: 300px; overflow: auto; box-shadow: 0 14px 36px rgba(35,38,43,.22); }
.mss-opt { padding: 8px 12px; font-family: 'IBM Plex Mono', monospace; font-size: 13px; color: var(--ink); cursor: pointer; white-space: nowrap; }
.mss-opt:hover, .mss-opt:focus, .mss-opt.active { background: var(--blaze); color: var(--on-blaze); outline: none; }
.mss-opt.sel { border-left: 3px solid var(--blaze); }
/* keep the related-object +/edit/view controls inline next to the new dropdown */
.related-widget-wrapper { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.related-widget-wrapper .mss { flex: 0 1 auto; }