/* ============================================================================
   The one dropdown component (static/js/app.js, ADR-0024): select, combobox,
   datepicker and the menus they open. Loaded after app.css (templates/base.html)
   and after moss-admin.css (templates/admin/base_site.html).

   Every rule below reads a --mss-* token and nothing else (the forced-colours block
   at the end speaks in system colours, which is all that mode keeps). The block that follows
   maps those tokens onto the app's design tokens; moss-admin.css maps them onto
   the admin's under `html:root`, which outranks this `:root`. To restyle every
   dropdown in both places, change the mapping, not the rules.

   Menus are appended to <body> by app.js, so no rule here may depend on where
   the control sits: menus are styled by their own classes only.
   ========================================================================== */
:root{
  /* type and size: the same box as the text fields beside them - the interface face,
     on the field fill, not the grey a disabled field wears (ADR-0029) */
  --mss-font:var(--sans);
  --mss-fs:var(--fs-4,13px);
  --mss-fs-sm:var(--fs-3,12px);
  --mss-fs-xs:var(--fs-2,11px);
  --mss-h:var(--ctl-h,36px);
  --mss-h-sm:var(--ctl-h-sm,27px);
  --mss-r:var(--r,3px);
  --mss-r-sm:var(--r-sm,2px);
  --mss-bw:1px;
  --mss-pad:var(--space-3,12px);
  /* surfaces and ink */
  --mss-bg:var(--bg-base);
  --mss-bg-cell:var(--bg-base);
  --mss-pop:var(--bg-overlay);
  --mss-line:var(--field-line,var(--line));
  --mss-line-hover:var(--text-mut);
  --mss-line-pop:var(--line-strong);
  --mss-ink:var(--text-hi);
  --mss-ink-2:var(--text);
  --mss-mut:var(--text-mut);
  --mss-accent:var(--acid);
  --mss-on-accent:var(--on-acid);
  --mss-hi:var(--acid-glow);
  --mss-crit:var(--crit);
  --mss-ok:var(--ok);
  --mss-warn:var(--warn);
  --mss-shadow:var(--shadow-3);
  --mss-ring:var(--ring,0 0 0 3px var(--acid-glow));
  /* above the status strip (60), the header (40), the console (70) and the
     quick-create dialog (1000) */
  --mss-z:1100;
  --mss-dur:var(--dur-fast,.12s);
  --mss-ease:var(--ease,ease-out);
  /* TEXT colours, derived from the mapping above (so the admin's mapping feeds them
     too). The muted and status tokens are made for icons, borders and dots; as small
     text on the popup, the control, a table cell or a highlighted row they fall under
     WCAG AA 4.5:1, so text mixes them toward the ink, per theme, just far enough to
     clear it everywhere. tools/dropdowns checks every text in both themes. */
  --mss-mut-fg:color-mix(in srgb,var(--mss-mut) 75%,var(--mss-ink-2));
  --mss-accent-fg:var(--mss-accent);
  --mss-ok-fg:color-mix(in srgb,var(--mss-ok) 80%,var(--mss-ink));
  --mss-warn-fg:color-mix(in srgb,var(--mss-warn) 65%,var(--mss-ink));
  --mss-crit-fg:color-mix(in srgb,var(--mss-crit) 90%,var(--mss-ink));
}
/* dark: the app's dark theme and the admin's (whose "auto" follows the OS) */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --mss-mut-fg:color-mix(in srgb,var(--mss-mut) 50%,var(--mss-ink-2));
    --mss-accent-fg:color-mix(in srgb,var(--mss-accent) 65%,var(--mss-ink));
    --mss-ok-fg:color-mix(in srgb,var(--mss-ok) 90%,var(--mss-ink));
    --mss-warn-fg:var(--mss-warn);
    --mss-crit-fg:color-mix(in srgb,var(--mss-crit) 70%,var(--mss-ink));
  }
}
:root[data-theme="dark"]{
  --mss-mut-fg:color-mix(in srgb,var(--mss-mut) 50%,var(--mss-ink-2));
  --mss-accent-fg:color-mix(in srgb,var(--mss-accent) 65%,var(--mss-ink));
  --mss-ok-fg:color-mix(in srgb,var(--mss-ok) 90%,var(--mss-ink));
  --mss-warn-fg:var(--mss-warn);
  --mss-crit-fg:color-mix(in srgb,var(--mss-crit) 70%,var(--mss-ink));
}

/* ---- the control ---------------------------------------------------------- */
.mss{position:relative;display:inline-flex;align-items:stretch;vertical-align:middle;
  min-width:var(--mss-min,180px);max-width:100%;}
/* the native <select> stays in the form, invisible, covering the control so any
   message the browser anchors to it lands in the right place */
.mss > select{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;
  margin:0!important;padding:0!important;border:0!important;opacity:0!important;pointer-events:none!important;}
/* ...except in the admin, where it stays in front of its related-object icons
   (app.js, enhanceSelect): out of the row, one invisible pixel */
select.mss-native{position:absolute!important;width:1px!important;height:1px!important;min-width:0!important;
  margin:0!important;padding:0!important;border:0!important;opacity:0!important;pointer-events:none!important;
  overflow:hidden!important;clip-path:inset(50%)!important;}

.mss-btn,
.mss input.mss-input{
  -webkit-appearance:none;appearance:none;box-sizing:border-box;margin:0;
  width:100%;min-width:0;min-height:var(--mss-h);
  padding:0 var(--mss-pad);
  font-family:var(--mss-font);font-size:var(--mss-fs);font-weight:400;line-height:1.3;
  letter-spacing:normal;text-transform:none;text-align:left;
  color:var(--mss-ink);background:var(--mss-bg);
  border:var(--mss-bw) solid var(--mss-line);border-radius:var(--mss-r);
  transition:border-color var(--mss-dur) var(--mss-ease),box-shadow var(--mss-dur) var(--mss-ease);
}
.mss-btn{display:flex;align-items:center;gap:var(--space-2,8px);cursor:pointer;}
.mss-btn:hover,
.mss input.mss-input:hover{border-color:var(--mss-line-hover);}
.mss-btn:focus-visible,.mss-btn.mss-kbd-focus:focus,.mss.open .mss-btn,
.mss input.mss-input:focus,.mss.open input.mss-input{outline:none;border-color:var(--mss-accent);box-shadow:var(--mss-ring);}
.mss input.mss-input::placeholder{color:var(--mss-mut-fg);opacity:1;}
.mss-label{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mss.is-placeholder .mss-label{color:var(--mss-mut-fg);}

/* chevron: two borders, so it takes the text colour in both themes */
.mss-caret{flex:none;width:7px;height:7px;margin:0 2px 3px 0;
  border:solid var(--mss-mut);border-width:0 1.5px 1.5px 0;transform:rotate(45deg);
  transition:transform var(--mss-dur) var(--mss-ease);}
.mss.open .mss-caret{border-color:var(--mss-accent);transform:translateY(3px) rotate(-135deg);}
.mss-combo > .mss-caret{position:absolute;right:calc(var(--mss-pad) + 2px);top:50%;margin-top:-6px;pointer-events:none;}
.mss-combo input.mss-input{padding-right:calc(var(--mss-pad) + 20px);}
.mss-combo--bare input.mss-input{padding-right:var(--mss-pad);}

/* states */
.mss.is-disabled .mss-btn,.mss-btn:disabled,
.mss input.mss-input:disabled{cursor:not-allowed;opacity:.55;border-style:dashed;}
.mss.is-disabled .mss-btn:hover{border-color:var(--mss-line);}
.mss.is-invalid .mss-btn,.mss.is-invalid input.mss-input,
.mss-btn[aria-invalid="true"],.mss input.mss-input[aria-invalid="true"]{border-color:var(--mss-crit);}
.mss.is-invalid .mss-btn:focus-visible,.mss.is-invalid input.mss-input:focus{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--mss-crit) 22%,transparent);}
.field.has-error .mss-btn,.field.has-error .mss input.mss-input,
#container .errors .mss-btn,#container .errors .mss input.mss-input{border-color:var(--mss-crit);}
.mss-err{display:block;margin-top:var(--space-1,4px);font-family:var(--mss-font);
  font-size:var(--mss-fs-xs);line-height:1.4;color:var(--mss-crit-fg);}

/* fixed enumerations that read as codes (invoice stages): opt-in capitals */
.mss--caps .mss-btn,.mss-menu.mss--caps .mss-opt{text-transform:uppercase;letter-spacing:.04em;font-size:var(--mss-fs-sm);}

/* a dropdown in a table cell (the Network board's row editor): the same box as
   the cell inputs beside it, and never wider than its column */
.mss--cell{--mss-min:104px;max-width:160px;}
.mss--cell .mss-btn{min-height:var(--mss-h-sm);padding:0 var(--space-2,6px);gap:var(--space-1,4px);
  font-size:var(--mss-fs-xs);background:var(--mss-bg-cell);}
/* ...and a date there ("In service since"): a form field's 180px x 36px pushed the open
   row past the board's width at 1280px; this is just wide enough for YYYY-MM-DD */
.mss--cell input.mss-input{min-height:var(--mss-h-sm);padding:0 var(--space-2,6px);
  font-size:var(--mss-fs-xs);background:var(--mss-bg-cell);}
.mss-datewrap.mss--cell{width:112px;}
.mss-datewrap.mss--cell input.mss-input{padding-right:30px;}
.mss--cell .mss-cal-btn{width:26px;}
.mss--cell .mss-cal-btn::before{width:13px;height:13px;}

/* invoice stage colours follow the stage itself: the text in its text shade, the
   border in the plain status colour */
.mss.sub-submitted .mss-btn,.mss.pay-paid .mss-btn{color:var(--mss-ok-fg);
  border-color:color-mix(in srgb,var(--mss-ok) 55%,var(--mss-line));}
.mss.sub-on_hold .mss-btn,.mss.pay-on_hold .mss-btn,.mss.pay-in_process .mss-btn{color:var(--mss-warn-fg);
  border-color:color-mix(in srgb,var(--mss-warn) 55%,var(--mss-line));}
.mss.sub-rejected .mss-btn{color:var(--mss-crit-fg);border-color:color-mix(in srgb,var(--mss-crit) 55%,var(--mss-line));}
.mss.sub-not_submitted .mss-btn,.mss.pay-unpaid .mss-btn{color:var(--mss-mut-fg);}

/* ---- where the control sits ------------------------------------------------ */
.form-grid .mss,.qc-body .mss{display:flex;width:100%;min-width:0;}
.qc-row > .mss{flex:1 1 auto;min-width:0;}
.filters .mss{flex:0 1 auto;}
.filters .mss-datewrap{--mss-min:136px;flex:0 1 136px;}
/* a wide free-text field (the Diagnostics target) keeps its width inside the wrapper */
.mss:has(> input.wide-input){--mss-min:min(340px,100%);}
.rowform .mss{--mss-min:150px;}
/* a cell of the Add assets in bulk grid (ADR-0037): edge to edge, with no box of its own -
   the grid draws the lines - and the accent's ring inside the cell the cursor is in. What
   is wrong is marked by the cell (a tint, a rule, a message), not by a red box. */
.bulk-cell .mss{display:flex;width:100%;min-width:0;}
.bulk-cell .mss-btn,.bulk-cell .mss input.mss-input{min-height:40px;padding:0 10px;border-color:transparent;
  border-radius:0;background:transparent;}
.bulk-cell .mss-combo input.mss-input{padding-right:30px;}
.bulk-cell .mss-combo > .mss-caret{right:12px;}
.bulk-cell .mss-btn:hover,.bulk-cell .mss input.mss-input:hover,
.bulk-cell .mss.is-invalid .mss-btn,.bulk-cell .mss input.mss-input[aria-invalid="true"]{border-color:transparent;}
.bulk-cell .mss-btn:focus,.bulk-cell .mss.open .mss-btn,.bulk-cell .mss.is-invalid .mss-btn:focus-visible,
.bulk-cell .mss input.mss-input:focus,.bulk-cell .mss.open input.mss-input{outline:none;border-color:transparent;
  background:var(--mss-bg-cell);box-shadow:inset 0 0 0 2px var(--mss-accent);}
.related-widget-wrapper .mss{flex:0 1 auto;}
/* the admin. One width for every dropdown in a form row, with or without the
   related-object icons: its "nothing may widen the page" rule (min-width:0) would
   otherwise shrink a plain choice field ("In stock") to the width of its label. */
#container .form-row .flex-container > .mss{flex:none;width:var(--mss-min,220px);max-width:100%;}
/* (a width, not a flex-basis: on a phone Django stacks the row into a column, where
   a basis would become the control's height) */
/* a date and time pair: the calendar field lines up with the time field under it.
   The admin's skin (moss-admin.css, ADR-0033) sets the time field flush, without
   Django's 5px indent, and spaces the two rows with its grid's gap */
#container .datetime .mss-datewrap{margin:0;}
/* the changelist: the action picker and a list_editable column take the compact
   size of the Run button and the table cells beside them, not a form field's */
#changelist .mss{--mss-h:var(--mss-h-sm);}
#changelist #result_list .mss{--mss-min:140px;}
/* on a phone Django makes every span in the action bar a full-width row
   (#changelist .actions span{flex:1 0 100%}); the control's own parts keep their size */
#changelist .actions .mss-label{flex:1 1 auto;}
#changelist .actions .mss-caret{flex:none;}
@media (max-width:820px){
  .filters .mss{flex:1 1 100%;min-width:0;}
}
/* a phone: an admin dropdown gives way to its related-object icons, so the icons
   stay on its line instead of wrapping one of them under it */
@media (max-width:767px){
  .related-widget-wrapper .mss{flex:1 1 0;min-width:0;}
}

/* ---- the menu ------------------------------------------------------------- */
.mss-menu{position:fixed;top:0;left:0;z-index:var(--mss-z);box-sizing:border-box;
  display:flex;flex-direction:column;min-width:160px;max-width:calc(100vw - 16px);
  font-family:var(--mss-font);font-size:var(--mss-fs);line-height:1.35;color:var(--mss-ink-2);
  background:var(--mss-pop);border:1px solid var(--mss-line-pop);border-radius:var(--mss-r);
  box-shadow:var(--mss-shadow);overflow:hidden;text-align:left;}
@media (prefers-reduced-motion:no-preference){
  .mss-menu{animation:mss-in var(--mss-dur) var(--mss-ease);}
  .mss-menu.mss-up{animation-name:mss-in-up;}
}
@keyframes mss-in{from{opacity:0;transform:translateY(-3px);}to{opacity:1;transform:none;}}
@keyframes mss-in-up{from{opacity:0;transform:translateY(3px);}to{opacity:1;transform:none;}}

.mss-search{flex:none;padding:var(--space-2,8px);border-bottom:1px solid var(--mss-line-pop);}
.mss-search{position:relative;}
.mss-search::before{content:"";position:absolute;left:calc(var(--space-2,8px) + 9px);top:50%;width:14px;height:14px;margin-top:-7px;
  background:var(--mss-mut);pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E") center/contain no-repeat;}
.mss-search input.mss-q{box-sizing:border-box;width:100%;min-height:32px;margin:0;
  padding:0 var(--space-2,8px) 0 32px;
  font-family:var(--mss-font);font-size:var(--mss-fs);color:var(--mss-ink);background:var(--mss-bg);
  border:1px solid var(--mss-line);border-radius:var(--mss-r-sm);}
.mss-search input.mss-q::placeholder{color:var(--mss-mut-fg);opacity:1;}
.mss-search input.mss-q:focus{outline:none;border-color:var(--mss-accent);box-shadow:var(--mss-ring);}

.mss-list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:var(--space-1,4px);}
.mss-opt{display:flex;align-items:center;gap:var(--space-3,12px);min-height:32px;box-sizing:border-box;
  padding:6px var(--space-2,8px) 6px 10px;border-radius:var(--mss-r-sm);cursor:pointer;
  color:var(--mss-ink-2);white-space:normal;overflow-wrap:anywhere;}
.mss-opt-text{flex:1 1 auto;min-width:0;}
.mss-opt-hint{flex:none;font-size:var(--mss-fs-xs);color:var(--mss-mut-fg);}
.mss-opt.is-none .mss-opt-text{color:var(--mss-mut-fg);}
.mss-opt.active{background:var(--mss-hi);color:var(--mss-ink);}
/* on the highlight, muted text would sink under 4.5:1 in the dark theme */
.mss-opt.active .mss-opt-hint,.mss-opt.active.is-none .mss-opt-text{color:var(--mss-ink-2);}
/* the chosen row: full ink and weight; the accent is only the tick */
.mss-opt[aria-selected="true"]{color:var(--mss-ink);font-weight:600;}
/* the tick: drawn, not a glyph, so every font renders it */
.mss-opt[aria-selected="true"]::after{content:"";flex:none;width:9px;height:5px;margin:0 3px 3px 0;
  border:solid var(--mss-accent);border-width:0 0 2px 2px;transform:rotate(-45deg);}
.mss-opt[aria-disabled="true"]{opacity:.45;cursor:not-allowed;}
.mss-opt mark{background:none;color:inherit;font-weight:700;text-decoration:underline;
  text-decoration-color:var(--mss-accent);text-underline-offset:2px;}
.mss-create{color:var(--mss-accent-fg);font-weight:600;}
.mss-create + .mss-opt{margin-top:var(--space-1,4px);}
.mss-group + .mss-group,.mss-opt + .mss-group{margin-top:var(--space-1,4px);padding-top:var(--space-1,4px);border-top:1px solid var(--mss-line-pop);}
.mss-group-label{padding:6px 10px 4px;font-size:var(--mss-fs-xs);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mss-mut-fg);}
.mss-empty,.mss-more{padding:10px;font-size:var(--mss-fs-sm);color:var(--mss-mut-fg);}
.mss-more{border-top:1px solid var(--mss-line-pop);}
.mss-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
/* a finger needs taller rows than a pointer */
@media (pointer:coarse){.mss-opt{min-height:44px;}}

/* ---- the datepicker ------------------------------------------------------- */
.mss-datewrap input.mss-input{padding-right:40px;}
.mss-cal-btn{position:absolute;top:var(--mss-bw);right:var(--mss-bw);bottom:var(--mss-bw);width:36px;margin:0;padding:0;
  border:0;border-left:1px solid var(--mss-line);border-radius:0 var(--mss-r) var(--mss-r) 0;
  background:none;cursor:pointer;color:var(--mss-mut-fg);}
.mss-cal-btn::before{content:"";position:absolute;inset:0;margin:auto;width:15px;height:15px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") center/contain no-repeat;}
.mss-cal-btn:hover,.mss.open .mss-cal-btn{color:var(--mss-accent);}

/* cut to a short screen by place(), the calendar scrolls inside rather than cover its
   field or run off the bottom */
.mss-menu.mss-cal{padding:var(--space-3,12px);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;}
.mss-cal-head{display:flex;align-items:center;gap:var(--space-2,8px);margin-bottom:var(--space-2,8px);}
.mss-cal-title{flex:1 1 auto;text-align:center;font-weight:600;color:var(--mss-ink);}
.mss-cal-nav{position:relative;flex:none;width:32px;height:32px;margin:0;padding:0;cursor:pointer;
  background:var(--mss-bg);border:1px solid var(--mss-line);border-radius:var(--mss-r-sm);color:var(--mss-ink);}
.mss-cal-nav:hover{border-color:var(--mss-accent);color:var(--mss-accent);}
.mss-chev{position:absolute;inset:0;margin:auto;width:7px;height:7px;border:solid currentColor;border-width:0 1.5px 1.5px 0;}
.mss-chev-l{transform:translateX(1px) rotate(135deg);}
.mss-chev-r{transform:translateX(-1px) rotate(-45deg);}
table.mss-cal-grid{border-collapse:separate;border-spacing:2px;margin:0 -2px;background:none;}
/* the menu sits in <body>, where a skin's table rules reach it (the admin stripes
   rows, rules cells and capitalises headings): the grid sets every one of them */
.mss-cal .mss-cal-grid tr,.mss-cal .mss-cal-grid th,.mss-cal .mss-cal-grid td{background:none;border:0;
  vertical-align:middle;line-height:normal;text-transform:none;letter-spacing:normal;}
.mss-cal .mss-cal-grid th{padding:2px 0 4px;font-family:var(--mss-font);font-size:var(--mss-fs-xs);font-weight:500;text-align:center;color:var(--mss-mut-fg);}
.mss-cal .mss-cal-grid td{padding:0;text-align:center;}
/* the month's own days in full ink, so the muted days either side read as the
   neighbours they are without being faded below 4.5:1 */
.mss-day{width:36px;height:34px;margin:0;padding:0;cursor:pointer;
  font-family:var(--mss-font);font-size:var(--mss-fs-sm);color:var(--mss-ink);
  background:none;border:1px solid transparent;border-radius:var(--mss-r-sm);}
.mss-day.is-out{color:var(--mss-mut-fg);}
.mss-day:hover{background:var(--mss-hi);color:var(--mss-ink);}
.mss-day.is-today{border-color:var(--mss-line-pop);font-weight:600;color:var(--mss-ink);}
.mss-day.is-sel{background:var(--mss-accent);border-color:var(--mss-accent);color:var(--mss-on-accent);font-weight:600;}
.mss-day:focus-visible,.mss-cal-nav:focus-visible,.mss-cal-link:focus-visible{outline:none;box-shadow:var(--mss-ring);border-color:var(--mss-accent);}
.mss-cal-foot{display:flex;justify-content:space-between;align-items:center;margin-top:var(--space-2,8px);
  padding-top:var(--space-2,8px);border-top:1px solid var(--mss-line-pop);}
.mss-cal-link{margin:0;padding:4px 8px;cursor:pointer;background:none;border:1px solid transparent;border-radius:var(--mss-r-sm);
  font-family:var(--mss-font);font-size:var(--mss-fs-sm);font-weight:600;color:var(--mss-accent-fg);}
.mss-cal-link:hover{background:var(--mss-hi);}
.mss-cal-clear{color:var(--mss-mut-fg);}
.mss-cal-clear:hover{color:var(--mss-crit-fg);}
@media (pointer:coarse){.mss-day{height:40px;}}
/* not enough room on either side even after the page scrolled (a short window, a
   phone turned sideways): app.js switches to a tighter grid, so less of it, or none,
   has to scroll */
.mss-menu.mss-cal.mss-cal--tight{padding:var(--space-2,8px);}
.mss-cal--tight .mss-cal-head{margin-bottom:var(--space-1,4px);}
.mss-cal--tight .mss-cal-nav{width:30px;height:30px;}
.mss-cal--tight .mss-day{height:32px;}
.mss-cal--tight .mss-cal-foot{margin-top:var(--space-1,4px);padding-top:var(--space-1,4px);}

@media (prefers-reduced-motion:reduce){
  .mss-btn,.mss input.mss-input,.mss-caret{transition:none;}
}

/* ---- forced colours (Windows High Contrast) ---------------------------------
   The browser replaces every colour above with the user's system colours and drops
   backgrounds, shadows and masked backgrounds: the highlighted row, the chosen day,
   the focus rings and the two icons would all vanish. Each state is redrawn here with
   an outline or a system colour, the only values that mean anything in this mode. */
@media (forced-colors:active){
  .mss-btn:focus-visible,.mss-btn.mss-kbd-focus:focus,.mss.open .mss-btn,
  .mss input.mss-input:focus,.mss.open input.mss-input,
  .mss-search input.mss-q:focus,
  .mss-cal-nav:focus-visible,.mss-cal-link:focus-visible{outline:2px solid Highlight;outline-offset:1px;}
  /* the row Enter would pick (aria-activedescendant) */
  .mss-opt.active{outline:2px solid Highlight;outline-offset:-2px;}
  .mss-opt[aria-disabled="true"]{color:GrayText;}
  .mss-day:focus-visible{outline:2px solid Highlight;outline-offset:1px;}
  .mss-day.is-sel{forced-color-adjust:none;background:Highlight;border-color:Highlight;color:HighlightText;}
  .mss-day.is-today{border-color:CanvasText;}
  /* the magnifier and the calendar icon sit on a field's background */
  .mss-search::before,.mss-cal-btn::before{forced-color-adjust:none;background:FieldText;}
  .mss-btn:disabled,.mss input.mss-input:disabled{color:GrayText;border-color:GrayText;}
}