/* Chevron token contract — single source of truth for every dropdown chevron (mp-select, owner, followers). Geometry/colour/motion live here; only layout-specific positioning (translateY) stays local to each control. */
:root {
    --mp-chevron-size: 8px;
    --mp-chevron-weight: 2px;
    --mp-chevron-color: var(--mp-ink-muted);
    --mp-chevron-opacity: 0.95;
    --mp-chevron-rest: 45deg;
    --mp-chevron-open: 225deg;
    --mp-chevron-ease: transform 0.16s ease;
}
/* Shared chevron glyph — the single paint contract consumed by every dropdown chevron (mp-select trigger, owner picker, followers picker). Geometry, colour and motion come from the --mp-chevron-* tokens above; each consumer adds only its own positioning + rest/open transform where it is defined. */
.mp-select-arrow::before,
:is(.mp-modal,.mp-inline-controls) .mp-owner-control::after,
:is(.mp-modal,.mp-inline-controls) .mp-followers-control::after {
    content: "";
    width: var(--mp-chevron-size);
    height: var(--mp-chevron-size);
    border-right: var(--mp-chevron-weight) solid var(--mp-chevron-color);
    border-bottom: var(--mp-chevron-weight) solid var(--mp-chevron-color);
    opacity: var(--mp-chevron-opacity);
    transition: var(--mp-chevron-ease);
}

/* Check-glyph token — single source for the selected-option checkmark. Path mirrors the date-time confirm button (M5 13l4 4L19 7, round caps); rendered as a mask so each consumer sets only size + colour. */
:root {
    --mp-check-glyph: var(--mp-icon-check);
    --mp-check-size: 14px;
    --mp-check-color: var(--green);
}
.mp-check,
.mp-select-option.is-selected::after {
    width: var(--mp-check-size);
    height: var(--mp-check-size);
    flex: 0 0 auto;
    background-color: var(--mp-check-color);
    -webkit-mask: var(--mp-check-glyph) center / contain no-repeat;
    mask: var(--mp-check-glyph) center / contain no-repeat;
}
.mp-check { display: inline-block; }
.mp-select-option.is-selected::after { content: ""; display: block; }

.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
/* .mp-field-legend is a field label on a control that cannot be a <label> element (it
   contains buttons). Same typography from the same place rather than a restated size —
   restating is how it drifted to 12px against every other label's 10px. */
label, .mp-field-legend { display: flex; flex-direction: column; gap: 5px; font-size:var(--mp-fs-2xs,10px); line-height:var(--mp-lh-snug,1.25); font-weight:var(--mp-fw-semibold,600); color: var(--muted); }
.wide { grid-column-start: 1; grid-column-end: -1; }
input, select, textarea { width: 100%; background: linear-gradient(var(--mp-fill-05), var(--mp-fill-024)); border: 1px solid var(--mp-slate-16); color: var(--text); border-radius: var(--radius); padding: 10px 12px; font-family: inherit; font-size:var(--mp-fs-md,14px); font-weight:var(--mp-fw-semibold,600); line-height:var(--mp-lh-snug,1.25); outline: medium; height: 38px; min-height: 38px; box-shadow: var(--mp-sh-14) 0px 1px 2px, var(--mp-fill-035) 0px 1px 0px inset; transition: border-color 0.16s, background 0.16s, box-shadow 0.16s; }
input:hover, textarea:hover, select:hover { border-color: var(--mp-slate-30); background: linear-gradient(var(--mp-fill-067), var(--mp-fill-03)); }
input:focus, select:focus, textarea:focus { border-color: var(--mp-hl-58); box-shadow: var(--mp-hl-10) 0px 0px 0px 3px, var(--mp-sh-16) 0px 1px 2px, var(--mp-fill-04) 0px 1px 0px inset; }
textarea { min-height: 108px; resize: vertical; }
input:disabled, select:disabled, textarea:disabled { opacity: 0.55; cursor: not-allowed; background: var(--mp-slate-06); }
#user_role.is-locked { opacity: 0.65; cursor: not-allowed; }
input::placeholder, textarea::placeholder { color: var(--mp-ink-dim); }
select:not(.mp-native-hidden) { appearance: none; height: 38px; min-height: 38px; line-height:var(--mp-lh-snug,1.25); background: none; padding-top: 0px; padding-bottom: 0px; padding-right: 34px; }
select option { background: var(--panel-solid); color: var(--text); }
select option:checked { background: var(--mp-opt-on); color: var(--mp-ink-invert); }
input[type="checkbox"], input[type="radio"] { --mp-choice-accent: var(--green,var(--highlight)); --mp-choice-bg: var(--mp-choice-bg-v); --mp-choice-border: var(--mp-slate-28); --mp-choice-size: 20px; position: relative; flex: 0 0 var(--mp-choice-size); align-items: center; justify-content: center; vertical-align: -5px; margin: 0px 9px 0px 0px; border-radius: 6px; background: radial-gradient(circle at 35% 20%, var(--mp-fill-16), transparent 34%), linear-gradient(var(--mp-choice-hi), var(--mp-choice-lo)); color: var(--mp-choice-accent); cursor: pointer; box-shadow: var(--mp-sh-16) 0px 8px 18px, var(--mp-fill-07) 0px 1px 0px inset, var(--mp-sh-22) 0px -1px 0px inset; transition: border-color 0.16s, background 0.16s, box-shadow 0.16s, transform 0.12s, opacity 0.16s; appearance: none !important; width: var(--mp-choice-size) !important; height: var(--mp-choice-size) !important; min-width: var(--mp-choice-size) !important; min-height: var(--mp-choice-size) !important; max-width: var(--mp-choice-size) !important; max-height: var(--mp-choice-size) !important; display: inline-flex !important; padding: 0px !important; border: 1px solid var(--mp-choice-border) !important; }
input[type="radio"] { border-radius: 999px; }
input[type="checkbox"]::before, input[type="radio"]::before { content: ""; display: block; opacity: 0; transform: scale(0.55); transition: opacity 0.14s, transform 0.14s; }
input[type="checkbox"]::before { width: 10px; height: 6px; border-left: 2px solid rgb(2, 19, 10); border-bottom: 2px solid rgb(2, 19, 10); transform: rotate(-45deg) scale(0.55) translate(1px, -1px); }
input[type="radio"]::before { width: 8px; height: 8px; border-radius: 999px; background: rgb(2, 19, 10); box-shadow: var(--mp-fill-20) 0px 0px 0px 1px; }
input[type="checkbox"]:hover, input[type="radio"]:hover { background: radial-gradient(circle at 35% 20%, var(--mp-fill-20), transparent 34%), linear-gradient(var(--mp-panel-98), var(--mp-choice-hov)); box-shadow: 0 10px 22px var(--mp-sh-20),
        0 0 0 3px color-mix(in srgb,var(--mp-choice-accent) 7%,transparent),
        inset 0 1px 0 var(--mp-fill-08),
        inset 0 -1px 0 var(--mp-sh-22); border-color: color-mix(in srgb,var(--mp-choice-accent) 62%,var(--mp-slate-34)) !important; }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: medium; box-shadow: 0 0 0 4px color-mix(in srgb,var(--mp-choice-accent) 18%,transparent),
        0 10px 22px var(--mp-sh-22),
        inset 0 1px 0 var(--mp-fill-08); border-color: color-mix(in srgb,var(--mp-choice-accent) 80%,var(--mp-ink-invert)) !important; }
input[type="checkbox"]:checked, input[type="radio"]:checked { background: radial-gradient(circle at 35% 20%,var(--mp-fill-38),transparent 32%),
        linear-gradient(180deg,color-mix(in srgb,var(--mp-choice-accent) 92%,var(--mp-ink-invert) 8%),color-mix(in srgb,var(--mp-choice-accent) 72%,var(--mp-choice-on) 28%)); box-shadow: 0 0 0 1px color-mix(in srgb,var(--mp-choice-accent) 32%,transparent),
        0 0 22px color-mix(in srgb,var(--mp-choice-accent) 22%,transparent),
        0 10px 22px var(--mp-sh-22),
        inset 0 1px 0 var(--mp-fill-24),
        inset 0 -1px 0 var(--mp-sh-18); border-color: color-mix(in srgb,var(--mp-choice-accent) 82%,var(--mp-ink-on-hl) 18%) !important; }
input[type="checkbox"]:checked::before, input[type="radio"]:checked::before { opacity: 1; }
input[type="checkbox"]:checked::before { transform: rotate(-45deg) scale(1) translate(1px, -1px); }
input[type="radio"]:checked::before { transform: scale(1); }
input[type="checkbox"]:active, input[type="radio"]:active { transform: scale(0.92); }
input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: 0.42; cursor: not-allowed; transform: none; filter: saturate(0.45); }
label:hover input[type="checkbox"]:not(:disabled), label:hover input[type="radio"]:not(:disabled) { border-color: color-mix(in srgb,var(--mp-choice-accent) 62%,var(--mp-slate-34)) !important; }
.remember-toggle input[type="checkbox"], .permission-toggle input[type="checkbox"] { position: absolute !important; opacity: 0 !important; pointer-events: none !important; width: 1px !important; height: 1px !important; min-width: 1px !important; min-height: 1px !important; max-width: 1px !important; max-height: 1px !important; margin: 0px !important; padding: 0px !important; border: 0px !important; appearance: none !important; }
input[type="date"], input[type="datetime-local"], input[type="time"], input[type="number"], input[type="email"], input[type="password"], input[type="text"] { color-scheme: dark; }
input[type="file"] { min-height: 38px; padding: 7px 10px; }
input[type="file"]::file-selector-button { border: 1px solid var(--mp-hl-24); background: var(--green-soft); color: var(--mp-ink-on-hl); border-radius: var(--radius); padding: 6px 10px; cursor: pointer; margin-right: 10px; }
input[type="file"]::file-selector-button:hover { background: var(--mp-hl-18); }
select.mp-native-hidden { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; min-height: 1px; padding: 0px; margin: 0px; }
.mp-select { position: relative; width: 100%; }
.mp-select-trigger { width: 100%; min-height: 38px; height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0px 12px; border-radius: 5px; border: 1px solid var(--mp-slate-18); background: linear-gradient(var(--mp-fill-055), var(--mp-fill-024)); color: var(--mp-ink-strong); font-family: inherit; font-size:var(--mp-fs-md,14px); font-weight:var(--mp-fw-semibold,600); cursor: pointer; text-align: left; box-shadow: var(--mp-fill-035) 0px 1px 0px inset; transition: 0.16s; }
.mp-select-trigger:hover { border-color: var(--mp-slate-32); background: linear-gradient(var(--mp-fill-07), var(--mp-fill-035)); }
.mp-select.is-open .mp-select-trigger, .mp-select-trigger:focus { outline: medium; border-color: var(--mp-hl-48); box-shadow: var(--mp-hl-10) 0px 0px 0px 3px, var(--mp-fill-04) 0px 1px 0px inset; }
.mp-select-value { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mp-select.is-placeholder .mp-select-value { color: var(--mp-ink-dim); }
.mp-select-arrow { width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.mp-select-arrow::before { transform: translateY(-2px) rotate(var(--mp-chevron-rest)); }
.mp-select.is-open .mp-select-arrow::before { transform: translateY(0px) rotate(var(--mp-chevron-open)); }
.mp-select-menu { position: fixed; z-index: 10000; min-width: 220px; max-height: 280px; overflow: auto; padding: 6px; border-radius: 5px; border: 1px solid var(--mp-fill-10); background: linear-gradient(var(--mp-panel-98), var(--mp-panel-96)); box-shadow: var(--mp-sh-45) 0px 18px 48px, var(--mp-fill-04) 0px 1px 0px inset; backdrop-filter: blur(18px); }
.mp-select-option { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px; border-radius: 5px; color: var(--mp-ink-item); cursor: pointer; font-size:var(--mp-fs-md,14px); transition: 0.12s; font-weight:var(--mp-fw-regular,400); }
.mp-select-option:hover, .mp-select-option.is-focused { background: var(--mp-fill-07); color: var(--mp-ink-invert); }
.mp-select-option.is-selected { background: var(--mp-hl-12); color: var(--mp-ink-on-hl); }
.mp-select-option.is-disabled { opacity: 0.45; cursor: not-allowed; }
/* CHIP GRID — a select that says data-mp-select-grid="N" gets its options as N equal chips per row
   (component.js adds the class and --mp-select-cols). Short scannable values, durations first. The list's
   trailing checkmark is dropped: in a ~66px cell it costs a third of the width, and the selected chip is
   already told apart by fill and ring. Hover, keyboard focus and selected are restated at grid scope
   because the chip's own resting fill would otherwise beat the list's hover rule. */
.mp-select-menu.mp-select-menu-grid { display: grid; grid-template-columns: repeat(var(--mp-select-cols, 3), minmax(0, 1fr)); gap: 4px; }
.mp-select-menu-grid .mp-select-option { justify-content: center; min-height: 34px; padding: 6px 4px; text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: var(--mp-fw-semibold, 600); border: 1px solid var(--mp-fill-07); background: var(--mp-fill-035); }
.mp-select-menu-grid .mp-select-option:hover, .mp-select-menu-grid .mp-select-option.is-focused { border-color: var(--mp-slate-32); background: var(--mp-fill-07); color: var(--mp-ink-invert); }
.mp-select-menu-grid .mp-select-option.is-focused { box-shadow: 0 0 0 2px var(--mp-hl-24); }
.mp-select-menu-grid .mp-select-option.is-selected { border-color: var(--mp-hl-42); background: var(--mp-hl-12); color: var(--mp-ink-on-hl); }
.mp-select-menu-grid .mp-select-option.is-selected::after { content: none; }
.mp-select-menu-grid .mp-select-group-label { grid-column: 1 / -1; }
/* PER-OPTION GLYPH. Declared on the <option> as data-mp-select-icon and painted here, so a
   caller that wants icons in a dropdown declares one attribute instead of this file growing a
   third hardcoded content mode beside the entity icon and the priority badge. The colour comes
   from --status-accent, the same token the status badges and grid pills carry — the tone map
   above was EXTENDED rather than copied, so a tone can never mean two colours. An option with
   no tone paints in the row’s own colour. */
.mp-select-icon { width: 15px; height: 15px; flex: 0 0 15px; display: inline-block; border: 0; background-color: var(--status-accent, currentColor); -webkit-mask: var(--mp-select-glyph) center / contain no-repeat; mask: var(--mp-select-glyph) center / contain no-repeat; }
.mp-select-icon-text { min-width: 0; }
.mp-select-search { width: 100%; margin-bottom: 6px; min-height: 36px; padding: 8px 10px !important; font-size:var(--mp-fs-base,13px) !important; }
.mp-select.is-disabled { opacity: 0.58; cursor: not-allowed; }
.mp-select.is-disabled .mp-select-trigger { cursor: not-allowed; }
.remember-toggle { margin-top: 18px; grid-template-columns: 46px 1fr; align-items: center; cursor: pointer; padding: 13px; border: 1px solid var(--mp-fill-08); background: var(--mp-fill-035); border-radius: 5px; display: grid !important; gap: 12px !important; }
.remember-toggle input, .permission-toggle input { position: absolute !important; opacity: 0 !important; pointer-events: none !important; width: 1px !important; height: 1px !important; min-width: 1px !important; min-height: 1px !important; max-width: 1px !important; max-height: 1px !important; margin: 0px !important; padding: 0px !important; border: 0px !important; appearance: none !important; }
.toggle-ui { width: 46px; height: 26px; border-radius: 999px; background: var(--mp-slate-28); position: relative; transition: 0.2s; }
.toggle-ui::after { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 50%; transform: translateY(-50%); border-radius: 50%; background: var(--mp-toggle-knob); transition: 0.2s; }
.remember-toggle input:checked + .toggle-ui, .permission-toggle input:checked + .toggle-ui { background: var(--mp-hl-32); box-shadow: var(--mp-hl-35) 0px 0px 0px 1px inset; }
.remember-toggle input:checked + .toggle-ui::after, .permission-toggle input:checked + .toggle-ui::after { transform: translateX(20px) translateY(-50%); background: var(--highlight); }
.remember-toggle strong { display: block; font-size:var(--mp-fs-md,14px); color: var(--mp-ink-strong); }
.remember-toggle small { display: block; margin-top: 3px; color: var(--mp-ink-muted); font-size:var(--mp-fs-sm,12px); }
.permission-toggle { cursor: pointer; border: 1px solid var(--mp-fill-08); background: var(--mp-fill-035); border-radius: 5px; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 72px !important; min-width: 72px !important; height: 46px !important; min-height: 46px !important; margin: 0px !important; padding: 0px !important; gap: 0px !important; }
.permission-toggle .toggle-ui { display: block; flex: 0 0 auto; }
.permission-toggle:focus-within { border-color: var(--mp-hl-42); box-shadow: var(--mp-hl-12) 0px 0px 0px 3px; }
.permission-toggle.is-locked { cursor: not-allowed; opacity: 0.82; position: relative; border-color: var(--mp-slate-16); background: var(--mp-slate-043); }
.permission-toggle.is-locked .toggle-ui { filter: saturate(0.72); }
.permission-toggle.is-locked input:disabled + .toggle-ui { opacity: 1; }
.permission-toggle.is-locked::after { content: ""; position: absolute; right: 7px; top: 7px; width: 10px; height: 10px; opacity: 0.58; background: var(--mp-ink-soft); -webkit-mask-source-type: auto; -webkit-mask: var(--mp-icon-lock) center center / contain no-repeat; mask: var(--mp-icon-lock) center center / contain no-repeat; mask-size: contain; mask-composite: add; mask-mode: match-source; pointer-events: none; }
.permission-toggle.is-locked:hover, .permission-toggle.is-locked:focus-within { border-color: var(--mp-slate-20); box-shadow: none; }
.mp-modal-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-left: auto; }

/* Modal action pair — Close/Save segmented control.
   Pristine shows the muted Close square alone. When the form is dirty the gradient Save
   disc appears to its LEFT (the engine un-hides it) and the two join into one pill: Save
   left-rounded (primary), Close right-rounded (discard), with a hairline seam between. */
.mp-modal .mp-modal-header-actions .submit{
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.mp-modal .mp-modal-header-actions .submit .action-save.action-btn-square{ order: 0; }
/* Close sits after Save. Its pristine rounded square is not painted here: .action-btn.action-btn-square
   in Actions & Badges already declares 8px !important, and a second copy of it in this file said the
   same thing and won only by specificity (removed at v1.12.538, proven render-identical). */
.mp-modal .mp-modal-header-actions .submit .action-close.action-btn-square{ order: 1; }

/* Dirty: Save + Close form a two-half pill, each half painting its OWN brand gradient (from
   the .action-btn-square base). Round the halves THEMSELVES — Save its left corners, Close
   its right — NOT via overflow:hidden on the container: the halves carry isolation:isolate,
   and Chrome won't clip a composited (isolated) child to a rounded parent, so a container
   clip leaves square corners in Chrome. Per-half radius has nothing to clip and works
   everywhere. Dark #06111d glyphs come from the base. */
.mp-modal .mp-modal-header-actions .submit:has(.action-save.action-btn-square:not([hidden])) .action-save.action-btn-square{
  border-radius: 8px 0 0 8px !important;
  color: #06111d !important;
  transition: background .16s ease, color .16s ease !important;
}
.mp-modal .mp-modal-header-actions .submit:has(.action-save.action-btn-square:not([hidden])) .action-close.action-btn-square{
  border-radius: 0 8px 8px 0 !important;
  color: #06111d !important;
  transition: background .16s ease, color .16s ease !important;
}

.mp-task-modal-header, .mp-modal-header:has([data-mp-modal-actions]) { align-items: flex-start; gap: 18px; }
.mp-status-control { display: flex; align-items: center; gap: 8px; min-width: 0px; }
/* The status control, declared ONCE. Until v1.12.538 these rules were restated further down with
   !important to beat themselves, and the active paint written here never rendered: the restatement
   won. Folded in, keeping what users actually saw; proven render-identical by css-equivalence. */
.mp-status-segmented { display: flex; align-items: center; gap: 2px; height: 38px; min-height: 38px; padding: 3px; border: 1px solid var(--mp-slate-18); border-radius: 5px; background: linear-gradient(var(--mp-seg-hi), var(--mp-seg-lo)); box-shadow: var(--mp-sh-18) 0px 10px 24px, var(--mp-fill-04) 0px 1px 0px inset; overflow: hidden; }
.mp-status-option { --status-accent: var(--purple); position: relative; min-height: 30px; height: 30px; border: 0px; border-radius: 4px; padding: 0px 13px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: none; color: var(--mp-ink-soft); font-family: inherit; font-size:var(--mp-fs-base,13px); font-weight:var(--mp-fw-heavy,800); line-height:var(--mp-lh-none,1); white-space: nowrap; cursor: pointer; transition: background 0.16s, color 0.16s, box-shadow 0.16s, transform 0.14s; }
.mp-status-option:hover { color: var(--mp-ink-strong); background: var(--mp-fill-055); }
.mp-status-option.is-active, .mp-status-option[aria-checked="true"] { color: var(--mp-ink-invert); background: linear-gradient(180deg,color-mix(in srgb,var(--status-accent) 38%,var(--mp-seg-hi)),color-mix(in srgb,var(--status-accent) 20%,var(--mp-choice-lo))); box-shadow: 0 0 0 1px color-mix(in srgb,var(--status-accent) 58%,transparent) inset,0 0 18px color-mix(in srgb,var(--status-accent) 16%,transparent); }
.mp-status-option.is-active::before, .mp-status-option[aria-checked="true"]::before { content: ""; position: absolute; }
.mp-status-option:not(.is-active) span:last-of-type { display: none; }
.mp-status-icon { width: 15px; height: 15px; flex: 0 0 15px; display: inline-block; border: 0; background: var(--mp-ink); opacity: 0.92; -webkit-mask: var(--mp-icon-status-todo) center / contain no-repeat; mask: var(--mp-icon-status-todo) center / contain no-repeat; transition: background 0.18s, opacity 0.18s; }
.mp-status-option[data-status-tone="progress"] .mp-status-icon { -webkit-mask-image: var(--mp-icon-status-progress); mask-image: var(--mp-icon-status-progress); }
.mp-status-option[data-status-tone="hold"] .mp-status-icon { -webkit-mask-image: var(--mp-icon-status-paused); mask-image: var(--mp-icon-status-paused); }
.mp-status-option[data-status-tone="blocked"] .mp-status-icon { -webkit-mask-image: var(--mp-icon-status-blocked); mask-image: var(--mp-icon-status-blocked); }
.mp-status-option[data-status-tone="done"] .mp-status-icon { -webkit-mask-image: var(--mp-icon-task); mask-image: var(--mp-icon-task); }
.mp-status-option[data-status-tone="todo"], .mp-status-badge[data-status-tone="todo"], .mp-select-icon[data-status-tone="todo"] { --status-accent: var(--purple); }
.mp-status-option[data-status-tone="progress"], .mp-status-badge[data-status-tone="progress"], .mp-select-icon[data-status-tone="progress"] { --status-accent: var(--blue); }
.mp-status-option[data-status-tone="hold"], .mp-status-badge[data-status-tone="hold"], .mp-select-icon[data-status-tone="hold"] { --status-accent: var(--amber); }
.mp-status-option[data-status-tone="blocked"], .mp-status-badge[data-status-tone="blocked"], .mp-select-icon[data-status-tone="blocked"] { --status-accent: var(--red); }
.mp-status-option[data-status-tone="done"], .mp-status-badge[data-status-tone="done"], .mp-select-icon[data-status-tone="done"] { --status-accent: var(--green); }
.mp-status-option[data-status-tone="new"], .mp-status-badge[data-status-tone="new"], .mp-select-icon[data-status-tone="new"] { --status-accent: var(--mp-status-new); }
.mp-status-option[data-status-tone="review"], .mp-status-badge[data-status-tone="review"], .mp-select-icon[data-status-tone="review"] { --status-accent: var(--mp-status-review); }
.mp-status-option[data-status-tone="new"] .mp-status-icon { -webkit-mask-image: var(--mp-icon-inbox); mask-image: var(--mp-icon-inbox); }
.mp-status-option[data-status-tone="review"] .mp-status-icon { -webkit-mask-image: var(--mp-icon-status-review); mask-image: var(--mp-icon-status-review); }
.mp-status-option[data-status-intake="1"] { display: none; cursor: default; }
[data-mp-status-control].is-intake .mp-status-option[data-status-intake="1"] { display: inline-flex; }
/* A state this picker may not offer right now. Set by MPStatusControls.restrict() — a record that
   does not exist yet is To do and nothing else — and cleared the moment the record does. !important
   and three selectors deep on purpose: it has to beat the intake rule directly above, which turns
   its own state back ON at four selectors and is right to. Hiding is only half; the arrow keys skip
   a blocked option too (component.js), because a stylesheet cannot refuse a keystroke. */
[data-mp-status-control] .mp-status-option[data-status-blocked] { display: none !important; }
.mp-status-badge { display: inline-flex; align-items: center; gap: 7px; min-height: 26px; padding: 0px 10px; border-radius: 999px; color: var(--mp-ink-strong); background: color-mix(in srgb,var(--status-accent) 16%,transparent); border: 1px solid color-mix(in srgb,var(--status-accent) 32%,transparent); font-size:var(--mp-fs-sm,12px); font-weight:var(--mp-fw-heavy,800); white-space: nowrap; }
.mp-status-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--status-accent); box-shadow: 0 0 12px color-mix(in srgb,var(--status-accent) 45%,transparent); }
/*.mp-status-badge[data-status-tone="progress"]::before { background: var(--grad-brand); }*/
@media (max-width: 980px) {
  .mp-task-modal-header, .mp-modal-header:has([data-mp-modal-actions]) { align-items: stretch; flex-direction: column; }
  .mp-modal-header-actions { width: 100%; justify-content: space-between; gap: 10px; }
  .mp-status-control { flex: 1 1 auto; min-width: 0px; }
  .mp-status-segmented { flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; }
  .mp-status-segmented::-webkit-scrollbar { display: none; }
}
.mp-status-option.is-active .mp-status-icon, .mp-status-option[aria-checked="true"] .mp-status-icon { opacity: 1; background: var(--status-accent) !important; box-shadow: none !important; }
/*.mp-status-option[data-status-tone="progress"].is-active .mp-status-icon, .mp-status-option[data-status-tone="progress"][aria-checked="true"] .mp-status-icon { background: var(--grad-brand) !important; }*/
.mp-status-option[data-status-tone="done"] .mp-status-icon::before { font-size:var(--mp-fs-sm,12px) !important; }
/* --- Minimalist collapsing status picker (hover-capable desktop only) ------
   Resting: only the active status shows, as a full labelled chip; every other
   option collapses to zero width behind it. On hover (or keyboard focus) the
   pill grows and the remaining statuses fan out to the right as icon-only LEDs
   that light up in their own tone. The front slot (order:-1 via .mp-status-front) is committed
   only once the pill collapses (see component.js) - so a pick keeps its slot. In the
   right-aligned modal header this makes the active chip appear to slide left as
   the LEDs appear. Touch / <=980px layouts keep the full segmented control from
   the block above, so nothing here depends on hover. Names come from the global
   MPTooltip via data-tooltip seeded in forms-controls component.js.
   SCOPED to [data-mp-status-control]: the collapse is the STATUS PICKER's
   behaviour, designed for a seven-state rail in a modal header. A rail that only
   borrows the anatomy - the task-shape switch (.mp-kind-rail) - must keep every
   option on screen: two options are that field's whole statement, so hiding the
   inactive one at rest would hide the choice itself. */
@media (hover: hover) and (min-width: 981px) {
  [data-mp-status-control] .mp-status-segmented { gap: 0; width: max-content; max-width: 100%; }
  [data-mp-status-control] .mp-status-option.mp-status-front { order: -1; }
  [data-mp-status-control] .mp-status-segmented:has(.mp-status-option.is-active) .mp-status-option:not(.is-active) {
    max-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
    transition: max-width .19s cubic-bezier(.4,0,.2,1), padding .19s cubic-bezier(.4,0,.2,1), margin .19s cubic-bezier(.4,0,.2,1), opacity .13s ease, background .16s, color .16s;
  }
  [data-mp-status-control] .mp-status-segmented:has(.mp-status-option.is-active):hover .mp-status-option:not(.is-active),
  [data-mp-status-control] .mp-status-segmented:has(.mp-status-option.is-active):focus-within .mp-status-option:not(.is-active) {
    max-width: 44px !important;
    padding-left: 9px !important;
    padding-right: 9px !important;
    margin-left: 2px !important;
    opacity: 1;
    pointer-events: auto;
  }
  [data-mp-status-control] .mp-status-segmented .mp-status-option:not(.is-active):hover {
    background: linear-gradient(180deg, var(--status-accent) 0%, var(--status-accent) 33%, color-mix(in srgb, var(--status-accent) 68%, #06111d) 100%) !important;
    color: var(--mp-on-accent);
  }
  [data-mp-status-control] .mp-status-segmented .mp-status-option:not(.is-active):hover .mp-status-icon {
    background: var(--mp-on-accent) !important;
    opacity: 1;
  }
}

.mp-select.mp-priority-select .mp-select-value { display: flex; align-items: center; gap: 8px; min-width: 0px; }
.mp-select.mp-priority-select .mp-select-value .mpdg-pri-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mp-select-menu.mp-priority-select .mp-select-option { justify-content: flex-start; gap: 8px; }
.mp-select-menu.mp-priority-select .mp-select-option.is-selected::after { margin-left: auto; }
.mp-tags-label { gap: 5px; }
.mp-tags-control { --mp-tags-height: 38px; position: relative; display: flex; align-items: center; width: 100%; height: var(--mp-tags-height); min-height: var(--mp-tags-height); max-height: var(--mp-tags-height); padding: 0px 10px; border: 1px solid var(--mp-slate-16); border-radius: var(--radius); background: linear-gradient(var(--mp-fill-05), var(--mp-fill-024)); color: var(--text, var(--mp-ink-check)); box-shadow: var(--mp-sh-14) 0px 1px 2px, var(--mp-fill-035) 0px 1px 0px inset; overflow: visible; cursor: text; transition: border-color 0.16s, background 0.16s, box-shadow 0.16s; }
.mp-tags-control:hover { border-color: var(--mp-slate-30); background: linear-gradient(var(--mp-fill-067), var(--mp-fill-03)); }
.mp-tags-control:focus-within, .mp-tags-control.is-composing { border-color: var(--mp-hl-58); box-shadow: var(--mp-hl-10) 0px 0px 0px 3px, var(--mp-sh-16) 0px 1px 2px, var(--mp-fill-04) 0px 1px 0px inset; }
.mp-tags-control:not(.has-tags):not(.is-composing)::before { content: attr(data-placeholder); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mp-ink-ph); font-size:var(--mp-fs-md,14px); font-weight:var(--mp-fw-semibold,600); pointer-events: none; }
.mp-tags-list { display: flex; align-items: center; gap: 5px; min-width: 0px; width: 100%; overflow: hidden; white-space: nowrap; }
.mp-tags-control:not(.has-tags) .mp-tags-list { display: none; }
.mp-tags-control.has-tags .mp-tags-list, .mp-tags-control.is-composing.has-tags .mp-tags-list { display: flex !important; opacity: 1 !important; visibility: visible !important; }
.mp-tags-control.is-composing.has-tags::before { content: none !important; }
 /* The chip IS foundation's .mp-chip; the renderer adds both classes and the mp-tags-*
    ones stay purely as behaviour hooks (tagsFromDom reads -text, the hardened single
    remove path matches -remove). Everything that used to be declared here - a 24px box,
    a hardcoded rgba(54,211,153) ring that never flipped in light mode, a green->blue
    gradient, an 18px x that went red on hover - was this control's own answer to a
    question the search field had already answered differently. The primitive is that
    answer; only genuine deltas may live below.

    The order/flex-direction !importants are gone with them: they were defending a
    row layout that nothing was attacking (verified in a real render, both schemes),
    and they only made the chip harder to restyle from outside. */
.mp-tags-chip { animation: 0.14s ease-out mpTagPop; }
/* Delta, deliberate: a tag chip arrives one keystroke at a time, so it earns an entry.
   Search chips arrive as a parse of a whole string and would pop in a batch. Motion,
   not appearance - the two chips still LOOK identical the moment this finishes. */
.mp-tags-chip-text { pointer-events: none; }
/* Delta, load-bearing: chip text must never be a delete target. The only remove path is
   a trusted pointer event on the x itself (see getRemoveButton in component.js). */
.mp-tags-input { position: absolute !important; left: 10px !important; right: 10px !important; top: 0px !important; width: calc(100% - 20px) !important; height: 1px !important; min-height: 1px !important; max-height: 1px !important; padding: 0px !important; margin: 0px !important; border: 0px !important; border-radius: 0px !important; outline: 0px !important; opacity: 0 !important; pointer-events: none !important; background: none !important; box-shadow: none !important; color: var(--text, var(--mp-ink-check)) !important; font-family: inherit !important; font-size:var(--mp-fs-md,14px) !important; font-weight:var(--mp-fw-semibold,600) !important; }
.mp-tags-input::placeholder { color: var(--mp-ink-ph); }
.mp-tags-control.is-composing .mp-tags-input { z-index: 91; top: calc(100% + 8px) !important; left: 0px !important; right: 0px !important; width: 100% !important; height: 38px !important; min-height: 38px !important; max-height: 38px !important; padding: 0px 12px !important; border: 1px solid var(--mp-slate-22) !important; border-radius: var(--radius) !important; opacity: 1 !important; pointer-events: auto !important; background: var(--mp-panel-98) !important; box-shadow: var(--mp-sh-20) 0px 18px 42px, var(--mp-fill-04) 0px 1px 0px inset !important; }
.mp-tags-control.is-composing .mp-tags-input:focus { border-color: var(--mp-hl-54) !important; box-shadow: var(--mp-hl-10) 0px 0px 0px 3px, var(--mp-sh-20) 0px 18px 42px, var(--mp-fill-04) 0px 1px 0px inset !important; }
.mp-tags-control.has-tags .mp-tags-input::placeholder { color: transparent !important; }
.mp-tags-menu { display: none; }
.mp-tags-control.is-menu-open .mp-tags-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; position: absolute; z-index: 90; top: calc(100% + 52px); left: 0px; right: 0px; max-height: 68px; overflow-y: auto; padding: 6px; border: 1px solid var(--mp-slate-22); border-radius: var(--radius); background: var(--mp-panel-98); box-shadow: var(--mp-sh-20) 0px 12px 28px, var(--mp-fill-04) 0px 1px 0px inset; }
 /* A suggestion is the chip it will become, drawn in outline: dashed and unfilled means
    "not yet yours", and hover/active fills it in with the REAL chip ring and tint. So it
    borrows the primitive's box and colour rather than restating them - a third copy of
    that gradient is how the first two got away from each other. */
.mp-tags-suggest-item { display: inline-flex; align-items: center; flex: 0 0 auto; max-width: 100%; height: var(--mp-chip-h); padding: 0px 9px; border: 1px dashed var(--mp-slate-22); border-radius: 999px; background: none; color: var(--text, var(--mp-ink-check)); font-family: inherit; font-size: var(--mp-fs-xs,11px); line-height: var(--mp-lh-none,1); font-weight: var(--mp-fw-heavy,800); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: background 0.12s, border-color 0.12s, transform 0.12s; }
.mp-tags-suggest-item:hover, .mp-tags-suggest-item.is-active { border-style: solid; border-color: var(--mp-chip-c); background: var(--mp-chip-fill); transform: translateY(-0.5px); }
.mp-tags-suggest-item:focus-visible { outline: 2px solid var(--mp-hl-54); outline-offset: 1px; }
.mp-tags-suggest-hit { background: none; color: var(--mp-hl-58); font-weight: var(--mp-fw-heavy,800); }
.mp-tags-suggest-item.is-active .mp-tags-suggest-hit { color: var(--mp-hl-54); }
@keyframes mpTagPop { 
  0% { transform: scale(0.96); opacity: 0.72; }
  100% { transform: scale(1); opacity: 1; }
}
.mp-tags-control.is-textarea, .mp-tags-control.mp-tags-control--textarea, .mp-tags-control[data-tags-mode="textarea"], .mp-tags-control[data-mp-tags-mode="textarea"] { height: auto !important; min-height: 112px !important; max-height: none !important; align-items: flex-start !important; align-content: flex-start !important; padding: 12px 14px !important; overflow: visible !important; }
.mp-tags-control.is-textarea .mp-tags-list, .mp-tags-control.mp-tags-control--textarea .mp-tags-list, .mp-tags-control[data-tags-mode="textarea"] .mp-tags-list, .mp-tags-control[data-mp-tags-mode="textarea"] .mp-tags-list { display: flex !important; align-items: flex-start !important; place-content: flex-start !important; flex-wrap: wrap !important; gap: 8px !important; width: 100% !important; min-height: 0px !important; overflow: visible !important; white-space: normal !important; }
.mp-tags-control.is-textarea:not(.has-tags) .mp-tags-list, .mp-tags-control.mp-tags-control--textarea:not(.has-tags) .mp-tags-list, .mp-tags-control[data-tags-mode="textarea"]:not(.has-tags) .mp-tags-list, .mp-tags-control[data-mp-tags-mode="textarea"]:not(.has-tags) .mp-tags-list { display: none !important; }
/* Was: wrap the label inside the chip. The chip has a fixed height and always did, so
   a wrapped tag rendered outside its own ring - the 32-char cap (TAG_MAX_LENGTH) just
   kept it rare. Truncation is what the search chip does and what title= is already
   there for, so the rule goes rather than gets fixed. */
 /* A 112px field has room, so a tag may spend the whole line before it truncates. The
    padding override is gone: the primitive's 2px right padding is the search chip's, and
    the x supplies its own optical gap. */
.mp-tags-control.is-textarea .mp-tags-chip, .mp-tags-control.mp-tags-control--textarea .mp-tags-chip, .mp-tags-control[data-tags-mode="textarea"] .mp-tags-chip, .mp-tags-control[data-mp-tags-mode="textarea"] .mp-tags-chip { --mp-chip-max: 100%; }
.mp-tags-control.has-tag-error, .mp-tags-control.has-tag-error .mp-tags-input { border-color: rgba(239, 68, 68, 0.62) !important; box-shadow: rgba(239, 68, 68, 0.1) 0px 0px 0px 3px, var(--mp-sh-16) 0px 1px 2px, var(--mp-fill-04) 0px 1px 0px inset !important; }
.mp-select-group-label { padding: 8px 10px 5px; color: var(--mp-ink-label); font-size:var(--mp-fs-xs,11px); font-weight:var(--mp-fw-black,900); letter-spacing:var(--mp-ls-wider,0.08em); text-transform: uppercase; pointer-events: none; }
.mp-select-group-label + .mp-select-option { margin-top: 2px; }
.mp-related-menu .mp-related-type-option, .mp-related-menu .mp-related-entity-option { display: flex; align-items: center; justify-content: space-between; }
.mp-related-menu .mp-related-type-option { justify-content: flex-start; font-weight:var(--mp-fw-bold,600); gap: 8px; }
.mp-related-menu .mp-related-back { cursor: pointer; pointer-events: auto; color: var(--mp-ink-90); border-bottom: 1px solid var(--mp-slate-12); margin-bottom: 4px; }
.mp-related-menu .mp-related-back:hover { color: var(--mp-ink-invert); }
.mp-related-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-related-value, .mp-related-menu .mp-related-type-option, .mp-related-menu .mp-related-entity-option { display: flex; align-items: center; gap: 10px; }
.mp-related-icon { width: 18px; height: 18px; flex: 0 0 18px; display: inline-block; opacity: 0.9; background-color: currentcolor; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; mask-repeat: no-repeat; mask-position: center; mask-size: contain; }
.mp-related-icon-project { -webkit-mask-image: var(--mp-icon-folder); mask-image: var(--mp-icon-folder); }
.mp-related-icon-contact { -webkit-mask-image: var(--mp-icon-user); mask-image: var(--mp-icon-user); }
.mp-related-value .mp-related-icon { color: var(--mp-muted,var(--mp-ink-icon)); }
.mp-related-menu .mp-related-icon { color: currentcolor; opacity: 0.78; }
.mp-related-option-text, .mp-related-value-text { min-width: 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-related-select.is-disabled .mp-related-trigger { cursor: not-allowed; opacity: 0.72; }
.mp-related-select.is-disabled .mp-select-arrow { opacity: 0.45; }
.mp-entity-select .mp-select-value, .mp-entity-select-menu .mp-select-option { display: flex; align-items: center; gap: 10px; }
.mp-entity-select-icon { width: 18px; height: 18px; flex: 0 0 18px; display: inline-block; color: currentcolor; opacity: 0.82; background-color: currentcolor; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; mask-repeat: no-repeat; mask-position: center; mask-size: contain; }
.mp-entity-select .mp-entity-select-icon { color: var(--mp-muted,var(--mp-ink-icon)); }
.mp-entity-select-text { min-width: 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-entity-select-icon-company { -webkit-mask-image: var(--mp-icon-building); mask-image: var(--mp-icon-building); }
.mp-entity-select-icon-contact { -webkit-mask-image: var(--mp-icon-user); mask-image: var(--mp-icon-user); }
.mp-entity-select.is-disabled .mp-select-trigger { cursor: not-allowed; opacity: 0.72; }
/* THE ICON VARIANTS JOIN THE SAME RULE. .mp-select-option is justify-content: space-between so
   the check can sit at the far edge; with a glyph and a label that spreads them to the two
   ends, and adding a check makes it three columns with the word marooned in the middle.
   Entity and Related already overrode it; the fourth caller extends the same selector list
   rather than adding a fourth copy of the fix. */
.mp-entity-select .mp-select-value, .mp-entity-select-menu .mp-select-option, .mp-related-value, .mp-related-menu .mp-related-type-option, .mp-related-menu .mp-related-entity-option, .mp-select-has-icons .mp-select-value, .mp-select-menu-has-icons .mp-select-option { display: flex; align-items: center; justify-content: flex-start; text-align: left; gap: 10px; }
.mp-entity-select-menu .mp-select-option.is-selected, .mp-related-menu .mp-select-option.is-selected, .mp-select-menu-has-icons .mp-select-option.is-selected { justify-content: flex-start; text-align: left; }
.mp-entity-select-menu .mp-select-option.is-selected::after, .mp-related-menu .mp-select-option.is-selected::after, .mp-select-menu-has-icons .mp-select-option.is-selected::after { margin-left: auto; flex: 0 0 auto; }

/* ── Form refusal: one strip, and the field it names ────────────────────────
   THE PARAGRAPH HAD NO RULE AT ALL. [data-mp-form-error] is rendered by every entity modal and
   styled nowhere in this theme - mail-service carried the only rule, scoped to .slug-mail. So on
   the task and project modals it was a bare <p> and therefore an ORDINARY GRID ITEM in a
   three-column .form-grid: it took cell one, pushed Title into column two and Company into column
   three, and the whole form reflowed around a sentence. Survivable while only a rare server error
   filled it; constant once the intake rule started refusing incomplete saves.

   Its sibling in the same form already knew the answer - .mp-triage-banner carries grid-column:1/-1
   - so this is the same span, in the danger tone, and the modal now has ONE surface for "I have
   something to tell you" rather than two that disagree about where they sit.

   Tokens only, both schemes. --mp-danger-* and --mp-ink-danger are defined in foundation for light
   and dark alike; a literal here would read correctly in one of them. */
.mp-form-error {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0px 0px 4px;
    padding: 10px 14px;
    border: 1px solid var(--mp-danger-30, rgba(251, 113, 133, 0.3));
    background: var(--mp-danger-10, rgba(251, 113, 133, 0.1));
    border-radius: 10px;
    color: var(--mp-ink-danger, #fecdd3);
    font-size: var(--mp-fs-base, 13px);
    line-height: var(--mp-lh-normal, 1.4);
}

/* [hidden] loses to display:flex on specificity, so the empty state has to say so. Without this the
   strip renders as an empty bordered box on every modal that has never refused anything. */
.mp-form-error[hidden] { display: none; }

/* ── The field the refusal names ────────────────────────────────────────────
   The sentence orients; this is the destination. Applied to the control itself, so it reaches the
   native input and the enhanced .mp-select trigger through the same rule - the enhancer moves the
   <select> out of the layout, so a ring on it would be a ring nobody can see.

   THE LAST SELECTOR IS THE SAME PROBLEM ONE COMPONENT OVER, and harder. Flatpickr with altInput
   sets the REAL input to type="hidden" and inserts a visible sibling, so aria-invalid lands on a
   box with no geometry: Deadline, Start and End - the three fields a task intake refuses most
   often - drew no ring at all until v1.12.487. Matched by "the visible input inside a refused
   field" rather than by the picker's class name, so this component does not have to know what
   enhanced the control; [type=hidden] is excluded because it is the thing being worked around,
   and [type=range] because a duration slider inside a refused field is not the refusal. */
.mp-field [aria-invalid="true"],
.mp-field .mp-select[aria-invalid="true"] .mp-select-trigger,
.mp-field.is-invalid .mp-select-trigger,
.mp-field.is-invalid input:not([type="hidden"]):not([type="range"]) {
    border-color: var(--mp-danger-30, rgba(251, 113, 133, 0.3));
    box-shadow: 0px 0px 0px 3px var(--mp-danger-08, rgba(244, 63, 94, 0.08));
}