.mp-modal[data-can-edit="0"] [data-mp-save-button], .mp-modal.is-readonly [data-mp-save-button], .mp-modal[data-can-edit="0"] .mp-attachment-dropzone, .mp-modal[data-can-edit="0"] [data-mp-attachment-dropzone], .mp-modal[data-can-edit="0"] .mp-attachment-upload-actions, .mp-modal[data-can-edit="0"] [data-mp-attachment-upload-actions], .mp-modal form[data-can-edit="0"] .mp-attachment-dropzone, .mp-modal form[data-can-edit="0"] [data-mp-attachment-dropzone], .mp-modal form[data-can-edit="0"] .mp-attachment-upload-actions, .mp-modal form.is-readonly .mp-attachment-dropzone, .mp-modal form.is-readonly [data-mp-attachment-dropzone], .mp-modal form.is-readonly .mp-attachment-upload-actions {
    display: none !important;
}

.mp-modal[data-can-edit="0"] [data-mp-status-control], .mp-modal.is-readonly [data-mp-status-control] {
    opacity: 0.78;
    pointer-events: none !important;
}

.mp-modal[data-can-edit="0"] [data-status-value], .mp-modal.is-readonly [data-status-value] {
    cursor: not-allowed !important;
}

#task-modal form.form-grid, #calendar-task-modal form.form-grid, #project-modal form.form-grid {
    grid-template-columns: repeat(3, minmax(0px, 1fr));
    align-items: start;
}

#task-modal .mp-field-pair, #calendar-task-modal .mp-field-pair {
    grid-column-start: 1;
    grid-column-end: -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
}

#task-modal .mp-field-description, #calendar-task-modal .mp-field-description, #project-modal .mp-field-description {
    grid-column-start: span 2;
    grid-column-end: auto;
}

#task-modal .mp-field-tags, #calendar-task-modal .mp-field-tags, #project-modal .mp-field-tags {
    grid-column-start: span 1;
    grid-column-end: auto;
}

#task-modal .mp-field-description textarea, #calendar-task-modal .mp-field-description textarea, #project-modal .mp-field-description textarea, #task-modal .mp-field-tags .mp-tags-control, #calendar-task-modal .mp-field-tags .mp-tags-control, #project-modal .mp-field-tags .mp-tags-control {
    min-height: 112px;
}

@media (max-width: 1000px) {
    #task-modal form.form-grid, #calendar-task-modal form.form-grid, #project-modal form.form-grid {
        grid-template-columns: 1fr;
    }

    #task-modal .mp-field-description, #calendar-task-modal .mp-field-description, #project-modal .mp-field-description, #task-modal .mp-field-tags, #calendar-task-modal .mp-field-tags, #project-modal .mp-field-tags {
        grid-column-start: 1;
        grid-column-end: -1;
    }

    #task-modal .mp-field-pair, #calendar-task-modal .mp-field-pair {
        grid-template-columns: 1fr;
    }
}

:is(.mp-modal,.mp-inline-controls) .mp-owner-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0px !important;
    border: 0px !important;
    overflow: hidden !important;
    clip: rect(0px, 0px, 0px, 0px) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

:is(.mp-modal,.mp-inline-controls) .mp-owner-control, :is(.mp-modal,.mp-inline-controls) .mp-owner-fixed-display {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    min-height: 38px;
    width: 100%;
    padding: 5px 38px 5px 7px;
    overflow: visible;
    border: 1px solid var(--border, var(--mp-slate-22));
    border-radius: var(--radius, 5px);
    background: linear-gradient(var(--mp-fill-055), var(--mp-fill-024));
    box-shadow: var(--mp-fill-035) 0px 1px 0px inset;
    color: var(--text, var(--mp-ink-strong));
    transition: border-color 0.14s, box-shadow 0.14s, background 0.14s;
}

:is(.mp-modal,.mp-inline-controls) .mp-owner-control {
    cursor: pointer;
}

:is(.mp-modal,.mp-inline-controls) .mp-owner-control:focus-within, :is(.mp-modal,.mp-inline-controls) .mp-owner-control.is-open {
    border-color: var(--mp-hl-55);
    box-shadow: var(--mp-hl-16) 0px 0px 0px 1px, var(--mp-sh-18) 0px 16px 36px, var(--mp-fill-05) 0px 1px 0px inset;
    background: linear-gradient(var(--mp-hl-09), var(--mp-fill-027));
}

/* Owner + followers pickers share an identical absolutely-positioned chevron. Paint comes from the shared glyph rule in component.css; only placement and the rest/open transform live here. */
:is(.mp-modal,.mp-inline-controls) .mp-owner-control::after,
:is(.mp-modal,.mp-inline-controls) .mp-followers-control::after {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-65%) rotate(var(--mp-chevron-rest));
    pointer-events: none;
}

:is(.mp-modal,.mp-inline-controls) .mp-owner-control.is-open::after,
:is(.mp-modal,.mp-inline-controls) .mp-followers-control.is-open::after {
    transform: translateY(-35%) rotate(var(--mp-chevron-open));
}

:is(.mp-modal,.mp-inline-controls) .mp-owner-trigger {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0px;
    gap: 8px;
    border: 0px;
    padding: 0px;
    margin: 0px;
    background: none;
    color: inherit;
    font-style: inherit;
    font-variant-caps: inherit;
    font-weight: inherit;
    font-width: inherit;
    font-size: inherit;
    line-height: inherit;
    font-family: inherit;
    font-size-adjust: inherit;
    font-kerning: inherit;
    font-variant-alternates: inherit;
    font-variant-ligatures: inherit;
    font-variant-numeric: inherit;
    font-variant-east-asian: inherit;
    font-variant-position: inherit;
    font-feature-settings: inherit;
    font-optical-sizing: inherit;
    font-variation-settings: inherit;
    text-align: left;
    cursor: pointer;
    outline: 0px;
}

:is(.mp-modal,.mp-inline-controls) .mp-owner-avatar, :is(.mp-modal,.mp-inline-controls) .mp-owner-fixed-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--mp-av, var(--mp-ink-dim));
    color: rgb(4, 17, 10);
    font-size:var(--mp-fs-2xs,10px);
    font-weight:var(--mp-fw-black,900);
    line-height:var(--mp-lh-none,1);
    text-transform: uppercase;
    box-shadow: var(--mp-avatar-ring) 0px 0px 0px 2px;
}

:is(.mp-modal,.mp-inline-controls) .mp-owner-option-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: var(--mp-av, var(--mp-ink-dim));
    color: rgb(4, 17, 10);
    font-size:var(--mp-fs-2xs,10px);
    font-weight:var(--mp-fw-black,900);
    line-height:var(--mp-lh-none,1);
    text-transform: uppercase;
}

:is(.mp-modal,.mp-inline-controls) .mp-owner-avatar.is-unassigned, :is(.mp-modal,.mp-inline-controls) .mp-owner-fixed-avatar.is-unassigned {
    background: var(--mp-slate-12);
    color: var(--mp-ink-soft);
    box-shadow: var(--mp-slate-18) 0px 0px 0px 1px inset;
}

:is(.mp-modal,.mp-inline-controls) .mp-owner-option-avatar.is-unassigned {
    background: var(--mp-slate-16);
    color: var(--mp-ink-soft);
}

:is(.mp-modal,.mp-inline-controls) .mp-owner-name, :is(.mp-modal,.mp-inline-controls) .mp-owner-fixed-name {
    min-width: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size:var(--mp-fs-base,13px);
    font-weight:var(--mp-fw-heavy,800);
    line-height:var(--mp-lh-snug,1.25);
    color: var(--text, var(--mp-ink-strong));
}

:is(.mp-modal,.mp-inline-controls) .mp-owner-menu {
    position: absolute;
    left: 0px;
    right: 0px;
    top: calc(100% + 6px);
    z-index: 10025;
    max-height: 240px;
    overflow: auto;
    padding: 5px;
    border: 1px solid var(--mp-fill-10);
    border-radius: var(--radius, 5px);
    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);
}

:is(.mp-modal,.mp-inline-controls) .mp-owner-option {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 34px;
    gap: 8px;
    padding: 5px;
    border: 0px;
    border-radius: var(--radius, 5px);
    background: none;
    color: inherit;
    font-style: inherit;
    font-variant-caps: inherit;
    font-weight: inherit;
    font-width: inherit;
    font-size: inherit;
    line-height: inherit;
    font-family: inherit;
    font-size-adjust: inherit;
    font-kerning: inherit;
    font-variant-alternates: inherit;
    font-variant-ligatures: inherit;
    font-variant-numeric: inherit;
    font-variant-east-asian: inherit;
    font-variant-position: inherit;
    font-feature-settings: inherit;
    font-optical-sizing: inherit;
    font-variation-settings: inherit;
    text-align: left;
    cursor: pointer;
    transition: 0.12s;
}

:is(.mp-modal,.mp-inline-controls) .mp-owner-option:hover, :is(.mp-modal,.mp-inline-controls) .mp-owner-option:focus-visible, :is(.mp-modal,.mp-inline-controls) .mp-owner-option.is-active {
    outline: 0px;
    background: var(--mp-hl-10);
}

:is(.mp-modal,.mp-inline-controls) .mp-owner-option.is-selected {
    background: var(--mp-hl-13);
}

:is(.mp-modal,.mp-inline-controls) .mp-owner-option-name {
    min-width: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text, var(--mp-ink-strong));
    font-size:var(--mp-fs-sm,12px);
    line-height:var(--mp-lh-snug,1.25);
    font-weight:var(--mp-fw-heavy,800);
}

:is(.mp-modal,.mp-inline-controls) .mp-owner-option-meta {
    margin-left: auto;
    color: var(--green, var(--highlight));
    font-size:var(--mp-fs-base,13px);
    font-weight:var(--mp-fw-black,900);
    white-space: nowrap;
}

:is(.mp-modal,.mp-inline-controls) .mp-followers-native {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0px !important;
    border: 0px !important;
    overflow: hidden !important;
    clip: rect(0px, 0px, 0px, 0px) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

:is(.mp-modal,.mp-inline-controls) .mp-followers-control {
    position: relative;
    display: flex;
    align-items: center;
    height: 38px;
    min-height: 38px;
    width: 100%;
    padding: 5px 38px 5px 7px;
    overflow: visible;
    border: 1px solid var(--border, var(--mp-slate-22));
    border-radius: var(--radius, 5px);
    background: linear-gradient(var(--mp-fill-055), var(--mp-fill-024));
    box-shadow: var(--mp-fill-035) 0px 1px 0px inset;
    cursor: text;
    transition: border-color 0.14s, box-shadow 0.14s, background 0.14s;
}

:is(.mp-modal,.mp-inline-controls) .mp-followers-control:focus-within, :is(.mp-modal,.mp-inline-controls) .mp-followers-control.is-open {
    border-color: var(--mp-hl-55);
    box-shadow: var(--mp-hl-16) 0px 0px 0px 1px, var(--mp-sh-18) 0px 16px 36px, var(--mp-fill-05) 0px 1px 0px inset;
    background: linear-gradient(var(--mp-hl-09), var(--mp-fill-027));
}

:is(.mp-modal,.mp-inline-controls) .mp-followers-list {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 5px;
    overflow: hidden;
    min-width: 0px;
    width: 100%;
}

:is(.mp-modal,.mp-inline-controls) .mp-follower-chip {
    display: inline-flex;
    align-items: center;
    max-width: 54px;
    gap: 4px;
    min-height: 26px;
    padding: 3px;
    border: 1px solid var(--mp-hl-22);
    border-radius: 999px;
    background: var(--mp-hl-114);
    color: var(--mp-ink-on-hl);
    font-size:var(--mp-fs-sm,12px);
    line-height:var(--mp-lh-none,1);
    font-weight:var(--mp-fw-heavy,800);
    box-shadow: var(--mp-fill-05) 0px 1px 0px inset;
}

:is(.mp-modal,.mp-inline-controls) .mp-follower-chip.is-locked {
    max-width: 28px;
    border-color: var(--mp-slate-25);
    background: var(--mp-slate-11);
    color: var(--text, var(--mp-ink-strong));
}

:is(.mp-modal,.mp-inline-controls) .mp-follower-avatar, :is(.mp-modal,.mp-inline-controls) .mp-followers-option-avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: var(--mp-av, var(--mp-ink-dim));
    color: rgb(4, 17, 10);
    font-size:var(--mp-fs-2xs,10px);
    font-weight:var(--mp-fw-black,900);
    line-height:var(--mp-lh-none,1);
    text-transform: uppercase;
}

:is(.mp-modal,.mp-inline-controls) .mp-follower-name {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0px, 0px, 0px, 0px) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

:is(.mp-modal,.mp-inline-controls) .mp-follower-remove {
    display: grid;
    place-items: center;
    width: 15px;
    height: 15px;
    margin-left: 1px;
    border: 0px;
    border-radius: 999px;
    background: var(--mp-deep-55);
    color: var(--mp-ink-on-hl);
    font-style: normal;
    font-variant-caps: normal;
    font-weight:var(--mp-fw-black,900);
    font-width: normal;
    font-size:var(--mp-fs-sm,12px);
    line-height:var(--mp-lh-none,1);
    font-family: system-ui, sans-serif;
    font-size-adjust: none;
    font-kerning: auto;
    font-variant-alternates: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    font-variant-east-asian: normal;
    font-variant-position: normal;
    font-feature-settings: normal;
    font-optical-sizing: auto;
    font-variation-settings: normal;
    cursor: pointer;
    padding: 0px;
}

:is(.mp-modal,.mp-inline-controls) .mp-follower-remove:hover, :is(.mp-modal,.mp-inline-controls) .mp-follower-remove:focus-visible {
    outline: 0px;
    background: rgba(239, 68, 68, 0.24);
    color: var(--mp-ink-err);
}

:is(.mp-modal,.mp-inline-controls) .mp-followers-input {
    flex: 1 1 92px;
    min-width: 74px;
    height: 24px;
    color: var(--text, var(--mp-ink-strong));
    font-style: inherit;
    font-variant-caps: inherit;
    font-weight: inherit;
    font-width: inherit;
    font-size: inherit;
    line-height: inherit;
    font-family: inherit;
    font-size-adjust: inherit;
    font-kerning: inherit;
    font-variant-alternates: inherit;
    font-variant-ligatures: inherit;
    font-variant-numeric: inherit;
    font-variant-east-asian: inherit;
    font-variant-position: inherit;
    font-feature-settings: inherit;
    font-optical-sizing: inherit;
    font-variation-settings: inherit;
    outline: 0px;
    border: 0px !important;
    padding: 0px 2px !important;
    background: none !important;
    box-shadow: none !important;
}

:is(.mp-modal,.mp-inline-controls) .mp-followers-input::placeholder {
    color: var(--mp-ink-soft-54);
}

:is(.mp-modal,.mp-inline-controls) .mp-followers-menu {
    position: absolute;
    left: 0px;
    right: 0px;
    top: calc(100% + 6px);
    z-index: 10020;
    max-height: 206px;
    overflow: auto;
    padding: 5px;
    border: 1px solid var(--mp-fill-10);
    border-radius: var(--radius, 5px);
    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);
}

:is(.mp-modal,.mp-inline-controls) .mp-followers-option {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 34px;
    gap: 8px;
    padding: 5px;
    border: 0px;
    border-radius: var(--radius, 5px);
    background: none;
    color: inherit;
    font-style: inherit;
    font-variant-caps: inherit;
    font-weight: inherit;
    font-width: inherit;
    font-size: inherit;
    line-height: inherit;
    font-family: inherit;
    font-size-adjust: inherit;
    font-kerning: inherit;
    font-variant-alternates: inherit;
    font-variant-ligatures: inherit;
    font-variant-numeric: inherit;
    font-variant-east-asian: inherit;
    font-variant-position: inherit;
    font-feature-settings: inherit;
    font-optical-sizing: inherit;
    font-variation-settings: inherit;
    text-align: left;
    cursor: pointer;
    transition: 0.12s;
}

:is(.mp-modal,.mp-inline-controls) .mp-followers-option:hover, :is(.mp-modal,.mp-inline-controls) .mp-followers-option:focus-visible, :is(.mp-modal,.mp-inline-controls) .mp-followers-option.is-active {
    outline: 0px;
    background: var(--mp-hl-10);
}

:is(.mp-modal,.mp-inline-controls) .mp-followers-option.is-selected {
    cursor: default;
    opacity: 0.72;
}

:is(.mp-modal,.mp-inline-controls) .mp-followers-option-name {
    min-width: 0px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text, var(--mp-ink-strong));
    font-size:var(--mp-fs-sm,12px);
    line-height:var(--mp-lh-snug,1.25);
    font-weight:var(--mp-fw-heavy,800);
}

:is(.mp-modal,.mp-inline-controls) .mp-followers-option-meta {
    margin-left: auto;
    color: var(--mp-ink-soft-62);
    font-size:var(--mp-fs-xs,11px);
    font-weight:var(--mp-fw-heavy,800);
    white-space: nowrap;
}

:is(.mp-modal,.mp-inline-controls) .mp-followers-empty {
    padding: 8px 9px;
    color: var(--mp-ink-soft-68);
    font-size:var(--mp-fs-sm,12px);
    font-weight:var(--mp-fw-bold,700);
}

.mp-field-budget {
    position: relative;
}

/* THE ENABLE SWITCH, bare, sharing the control row with the quantity it governs.
   .mp-budget-layout / .mp-budget-enable / .mp-budget-enable-title / .mp-budget-control all
   retired with the markup they described: the field is a normal <label> now and .mp-budget-row is
   the same compound row the task rate uses.

   THE SIZE OVERRIDES ARE !important BECAUSE THE BASE RULE IS. .permission-toggle declares
   width/height/min-* at 72x46 !important, so the four `unset` declarations that used to sit here
   never won a single cascade — the switch measured 72x46 while this rule said otherwise, and the
   -8px/-13px offsets below it were pulling that invisible box back into place. 46x26 is the
   .toggle-ui itself, which fits inside the 38px row rather than growing it to 46. */
.mp-budget-toggle {
    justify-self: start;
    width: 46px !important;
    min-width: 46px !important;
    height: 26px !important;
    min-height: 26px !important;
    margin: 0px !important;
    padding: 0px !important;
    border: 0px !important;
    background: none !important;
    gap: 0px !important;
}

/* Disabled means "no budget": the QUANTITY greys out and stops answering. The switch deliberately
   does not, and that is a change of scope rather than of style — it used to sit in a different
   column, so dimming its neighbour could not reach it. It shares the row now, and a rule written
   at row level would put pointer-events: none on the only control that can undo the state. */
.mp-field-budget.is-budget-disabled .mp-duration-control,
.mp-field-budget.is-budget-disabled .mp-duration-presets {
    opacity: 0.45;
    pointer-events: none;
}

.mp-field-budget.is-budget-disabled [data-duration-value] {
    background: var(--mp-slate-22);
    color: var(--mp-ink-soft);
}

/* ---------------------------------------------------------------------------
   Task shape switch + rate  (TaskKind: deliverable | continuous)

   Two branches share one footprint. The switch chooses; the row beside it is
   either Deadline + Time or a per-period rate, never both.

   THE SWITCH SPEAKS THE STATUS ANATOMY (v1.12.319). The tasks grid already
   renders kind as .mp-status-badge[data-status-tone] from the registry's tone,
   so the modal's brand-gradient seg was the one surface describing this axis in
   a different vocabulary. The rail reuses .mp-status-segmented /
   .mp-status-option verbatim - tone accents, 38px tray, inactive-collapses-to-
   glyph - and .mp-seg-shell--field retired with it (actions-badges), its only
   consumer gone. Two vocabularies, one rule: seg trays switch what you LOOK AT
   (views, tabs, lenses); the status anatomy states what a thing IS (status,
   kind). The collapsing PILL stays with the status picker: it is scoped to
   [data-mp-status-control] in component.css, because a two-option field that
   hides its inactive option at rest hides the choice itself.
   --------------------------------------------------------------------------- */

/* THE GUARD, AND WHY IT IS NOT OPTIONAL.
   `hidden` is a user-agent declaration, and an AUTHOR declaration of display beats it whatever
   its specificity — origin outranks specificity. Both branches have one: the budget field is a
   <label>, and component.css:46 puts every label at display:flex; the deliverable pair is
   .mp-field-pair, at display:grid twenty lines up this file. So v1.12.279 shipped a switch that
   set `hidden` on two elements neither of which could be hidden by it, and the modal showed a
   deadline, an estimate AND a budget at once.
   Keyed to the ATTRIBUTE the JavaScript toggles rather than to the classes that happen to carry
   it today: the contract is "what MPTaskKind collapses stays collapsed", and a guard written
   against a class name protects one field until somebody renames it. .mp-field-waitsfor has the
   same guard for the same reason, and .mp-scope-group in tasks.php for a third time — three
   instances is a rule, so it is written as one. */
[data-mp-field-total][hidden],
[data-mp-field-deadline][hidden],
[data-mp-field-priority][hidden],
[data-mp-field-group][hidden],
[data-mp-field-window][hidden],
[data-mp-task-budget][hidden] {
    display: none !important;
}

/* ONE ROW, literally. v1.12.318 placed the switch in the first of the form's three columns and
   the branch in the other two, and guarded the fit with @media (max-width: 1000px) - a VIEWPORT
   constant for a FORM-WIDTH fact. At viewports above 1000px with the form at ~750px (real
   screenshots) the switch crossed into the deadline's track and the later-painted input covered
   it: "ONGO08/15/2026". The row is now a flex row that wraps on its own contents. No breakpoint
   constant anywhere: the switch floors at its max-content, the branch states its honest minimum
   as flex-basis, and the wrap point falls out of the arithmetic - a third kind widens the rail
   and the branch wraps correspondingly earlier without anyone remembering to move a number.
   Swept across dialog widths in Chromium by task_kind_picker_test.js. */
#task-modal .mp-kind-row, #calendar-task-modal .mp-kind-row {
    grid-column: 1 / -1;
    /* THREE COLUMNS, like the rows above it. A flex row could keep everything on one
       line but not on the same TRACKS: the fields arrive in pair containers, and a
       container took a share of the row rather than the fields inside it. An
       appointment puts three fields into two containers and measured 29/29/24 —
       the Time control, alone in its pair, came out NARROWER than the two sharing the
       other half. A grid states the tracks and the pairs stop having a box at all
       (display: contents below), so every field lands on a track of its own.

       This also retires the wrap question rather than answering it: three tracks hold
       at most three fields, and there is no arithmetic left to tip over. */
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}

/* PRIORITY holds the first slot now. The shape picker moved OUT of this row at v1.12.393 —
   it decides whether the fields in here exist, including this one, so it is asked above them
   and simply flows in the grid with Assignee and Follower. The geometry it left behind is
   what the row still needs: one third at rest, so the branch's left edge sits on the
   column-two gutter and the rows above still read as a grid. */
#task-modal .mp-kind-row .mp-field-priority, #calendar-task-modal .mp-kind-row .mp-field-priority {
    /* The flex basis and floor that used to live here are inert on a grid track, and the
       track states the width now. The 3px margin that used to live here is gone with the
       reason for it: it compensated the duration field's box being 3px taller than its paint,
       and that field is on the shared rhythm now. Nothing in this row offsets anything.
       Measured in Chromium by tests/behavior/field_baseline_test.js. */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 0;
}

/* THE PAIRS ARE NOT BOXES HERE. Elsewhere a .mp-field-pair is a real container with its
   own gap; in this row it exists only to say which fields belong to which facet, and a
   container that takes a track is a container that decides the layout. display: contents
   hands its children straight to the grid, so Start, End and Time are three siblings on
   three tracks instead of two containers splitting the row in half.

   The [hidden] guard still wins over this: it carries !important, so a group with nothing
   visible is display:none and not a transparent wrapper around hidden children. */
#task-modal .mp-kind-row .mp-field-pair, #calendar-task-modal .mp-kind-row .mp-field-pair {
    display: contents;
}

/* The rate is a compound control — slider, value chip and the period it is denominated
   in — and it is the only field in its row that never shares with two others. Two tracks
   keep the 1/3-2/3 reading a cadence has always had. */
#task-modal .mp-kind-row .mp-field-budget, #calendar-task-modal .mp-kind-row .mp-field-budget {
    grid-column: span 2;
    min-width: 0;
}

/* The shape picker's glyph is painted by the generic .mp-select-icon rule in component.css,
   which is where the tone map it reads already lives. The rail used to carry it here as
   --mp-kind-icon at tone-rule specificity, fighting component.css for the same box; there is
   no segment now and no specificity tie to break. */
#task-modal .mp-kind-row .mp-field-kind .mp-select, #calendar-task-modal .mp-kind-row .mp-field-kind .mp-select {
    width: 100%;
}

/* The rate reads as one sentence: [====] 8h  a week. Not two stacked fields, and not a 20%/80%
   split — that split is what rendered "a quarter" as "a..", because the theme's
   `select { width: 100% }` obeyed a column too narrow to hold it. */
/* The compound control's own row: the slider and value chip, and beside them the one thing that
   qualifies the quantity — the period on a task rate, the on/off on a project budget. Both modals
   use it, so the two Budget fields read as the same control.

   38px tall, sitting straight under the label at the shared gap. It used to carry
   `margin-top: 8px; top: -3px` — the .mp-duration-control trick repeated one level down — which
   painted it 5px below the label while leaving its box 8px tall. */
.mp-budget-row {
    display: grid;
    grid-template-columns: minmax(0px, 1fr) auto;
    gap: 10px;
    align-items: center;
}

/* Sized to its own content. `width: auto` is the whole fix for the truncation; the minimum keeps
   the three options from resizing the row as they are chosen. */
.mp-budget-period {
    width: auto;
    min-width: 132px;
}

/* The zero position states what it means rather than reading "0m", and states it quietly: an
   absent ceiling is not a quantity, and the brand gradient would give the emptiest state the
   loudest chip on the row. .is-duration-zero comes from the duration engine, which is the only
   thing that knows the field landed on zero. */
[data-mp-task-budget] [data-duration-value] {
    min-width: 62px;
}

.mp-duration-field.is-duration-zero [data-duration-value] {
    background: var(--mp-slate-16);
    color: var(--mp-ink-soft);
    font-weight:var(--mp-fw-bold,700);
}

/* The @media (max-width: 1000px) rule that used to sit here gave the branch flex-basis 100%,
   which is a wrap by another name — and it was a VIEWPORT constant guarding a FORM-WIDTH
   fact, the exact thing the comment above .mp-kind-row condemns v1.12.318 for. With the row
   on one line it had nothing left to do but break it. */

@media (max-width: 700px) {
    .mp-budget-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .mp-budget-period {
        width: 100%;
    }

    /* WHAT STACKS IS THE PERIOD SELECT, and only because it has a 132px floor to hold "a quarter".
       The project budget's trailing item is a 46px toggle with no floor to run out of, so it keeps
       its place beside the slider — a row that stacks a control which fits is a line of vertical
       noise bought with nothing. Asked by what the row CONTAINS rather than by which modal it is
       in: a third consumer of .mp-budget-row inherits the right answer without naming itself. */
    .mp-budget-row:has(.mp-budget-toggle) {
        grid-template-columns: minmax(0px, 1fr) auto;
        gap: 10px;
    }
}

/* ---------------------------------------------------------------------------
   Per-task inbox chip (modal header)
   Compact pill next to the status control showing the task's email-to-task
   address. Populated by tasks-projects.js from the task payload's
   inbound_address; hidden (via [hidden]) for new/unsaved tasks and for Done
   tasks whose address has disintegrated. The mail-green accent matches the
   module colour language (mail = green). Click copies the full address.
   --------------------------------------------------------------------------- */
.mp-task-inbox { display: inline-flex; align-items: center; min-width: 0; }
.mp-task-inbox[hidden] { display: none; }

.mp-task-inbox-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 280px;
    min-width: 0;
    margin: 0;
    padding: 4px 9px;
    font: inherit;
    font-size:var(--mp-fs-sm,12px);
    line-height:var(--mp-lh-snug,1.25);
    color: var(--text-muted, var(--mp-ink-title));
    background: color-mix(in srgb, var(--green, var(--highlight)) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--green, var(--highlight)) 26%, transparent);
    border-radius: 999px;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.mp-task-inbox-chip:hover {
    color: var(--text, var(--mp-ink-strong));
    background: color-mix(in srgb, var(--green, var(--highlight)) 14%, transparent);
    border-color: color-mix(in srgb, var(--green, var(--highlight)) 42%, transparent);
}
.mp-task-inbox-chip:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--green, var(--highlight)) 55%, transparent);
    outline-offset: 2px;
}

.mp-task-inbox-ico { display: inline-flex; flex: 0 0 auto; color: var(--green, var(--highlight)); }
.mp-task-inbox-ico svg { width: 14px; height: 14px; display: block; }

/* Address text is intentionally hidden — the chip is envelope + copy icon only.
   The full address still rides on the button title (hover) and is what gets copied. */
.mp-task-inbox-addr { display: none; }

.mp-task-inbox-copyico,
.mp-task-inbox-done { display: inline-flex; flex: 0 0 auto; }
.mp-task-inbox-copyico svg,
.mp-task-inbox-done svg { width: 13px; height: 13px; display: block; }
.mp-task-inbox-copyico { color: var(--text-muted, var(--mp-ink-title)); opacity: .8; }
.mp-task-inbox-chip:hover .mp-task-inbox-copyico { opacity: 1; }

/* Copied state: swap the copy glyph for a green check + flash the border. */
.mp-task-inbox-done { display: none; color: var(--green, var(--highlight)); }
.mp-task-inbox-chip.is-copied { color: var(--text, var(--mp-ink-strong)); border-color: color-mix(in srgb, var(--green, var(--highlight)) 60%, transparent); }
.mp-task-inbox-chip.is-copied .mp-task-inbox-copyico { display: none; }
.mp-task-inbox-chip.is-copied .mp-task-inbox-done { display: inline-flex; }

/* Tighten on narrow modals where the header actions wrap to full width. */

/* Read-only creator provenance chip in the task modal header (see _task-modal.php).
   Never an editable control (it sits outside the form); populated + shown/hidden by
   forms-controls/tasks-projects.js. The base rule must not defeat the [hidden] attribute,
   so an explicit, higher-specificity [hidden] rule keeps it hidden in add mode. */
.mp-modal .mp-created-by { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; font-size:var(--mp-fs-sm,12px); line-height:var(--mp-lh-none,1); }
.mp-modal .mp-created-by[hidden] { display: none; }
.mp-modal .mp-created-by-label { color: var(--muted, var(--mp-ink-muted)); font-weight:var(--mp-fw-semibold,600); }
.mp-modal .mp-created-by-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 20px; height: 20px; border-radius: 999px; background: var(--mp-av, var(--mp-ink-dim)); color: rgb(4, 17, 10); font-size:var(--mp-fs-2xs,10px); font-weight:var(--mp-fw-black,900); line-height:var(--mp-lh-none,1); text-transform: uppercase; box-shadow: var(--mp-avatar-ring) 0px 0px 0px 2px; }
.mp-modal .mp-created-by-name { min-width: 0px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size:var(--mp-fs-sm,12px); font-weight:var(--mp-fw-heavy,800); color: var(--text, var(--mp-ink-strong)); }

/* Assignees control: every chip but the lead promotes on click. The lead chip is locked,
   which is what keeps the set from ever emptying client-side. */
:is(.mp-modal,.mp-inline-controls) select[data-mp-lead-input] + .mp-followers-control .mp-follower-chip:not(.is-locked) {
    cursor: pointer;
}
:is(.mp-modal,.mp-inline-controls) select[data-mp-lead-input] + .mp-followers-control .mp-follower-chip:not(.is-locked):hover {
    border-color: var(--mp-hl-34);
}

/* Read-only assignees: the same control and the same renderer, minus the add-input and the
   remove buttons. A contributor may not change the set. Rendering a lookalike instead is how
   the two views drifted apart. */
:is(.mp-modal,.mp-inline-controls) .mp-followers-control.is-readonly {
    cursor: default;
}
:is(.mp-modal,.mp-inline-controls) .mp-followers-control.is-readonly .mp-followers-list {
    flex-wrap: wrap;
}

/* Assignees control. The followers chips are avatar-only pills (the name is visually
   hidden) capped at 54px, 28px when locked. A "LEAD" badge does not fit inside that cap:
   it overflowed the chip and painted over the next chip and the placeholder. Chips in this
   control size to their content instead, and the list is allowed to shrink the input
   rather than let anything spill. Followers and Projects keep the caps. */
:is(.mp-modal,.mp-inline-controls) select[data-mp-lead-input] + .mp-followers-control .mp-follower-chip,
:is(.mp-modal,.mp-inline-controls) select[data-mp-lead-input] + .mp-followers-control .mp-follower-chip.is-locked {
    max-width: none;
    flex: 0 0 auto;
    overflow: hidden;
}
/* Only the chip carrying the LEAD badge pays for the extra right padding. A locked chip with
   nothing but an avatar must stay a circle - equal padding all round. */
:is(.mp-modal,.mp-inline-controls) select[data-mp-lead-input] + .mp-followers-control .mp-follower-chip.is-lead {
    padding-right: 7px;
}
:is(.mp-modal,.mp-inline-controls) select[data-mp-lead-input] + .mp-followers-control .mp-followers-input {
    flex: 1 1 38px;
    min-width: 0;
}

/* The lead, said out loud. A missing remove button is not a signal. */
:is(.mp-modal,.mp-inline-controls) .mp-follower-chip .mp-follower-role {
    flex: 0 0 auto;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--mp-hl-16);
    border: 1px solid var(--mp-hl-30);
    color: var(--mp-ink-role);
    font-size:var(--mp-fs-2xs,10px);
    font-weight:var(--mp-fw-black,900);
    letter-spacing:var(--mp-ls-wide,0.04em);
    text-transform: uppercase;
    line-height:var(--mp-lh-none,1);
    white-space: nowrap;
}

/* An attachment count of zero is dimmed, not replaced by an em dash - it keeps the cell the
   same shape as the chat count beside it, which has always shown a dimmed 0. */
.task-file-pill.is-empty {
    opacity: 0.4;
    background: transparent;
}

/* Compact inline host: native fields and enhanced owner / assignees / select / status
   controls share one 32px dense-control geometry. Only sizing lives here — paint,
   interaction and state remain inherited from the canonical rules above, so modules
   can compose an inline form without reimplementing any form-control CSS. */
.mp-inline-controls > input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.mp-inline-controls .mp-inline-field { min-width: 0px; }
.mp-inline-controls input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.mp-inline-controls select:not(.mp-native-hidden) { height: 32px; min-height: 32px; padding-top: 0px; padding-bottom: 0px; font-size: var(--mp-fs-sm, 12px); }
.mp-inline-controls .mp-owner-control, .mp-inline-controls .mp-owner-fixed-display,
.mp-inline-controls .mp-followers-control { width: auto; height: 32px; min-height: 32px; padding-top: 2px; padding-bottom: 2px; }
.mp-inline-controls .mp-owner-control, .mp-inline-controls .mp-owner-fixed-display { min-width: 130px; }
.mp-inline-controls .mp-followers-control { min-width: 150px; }
.mp-inline-controls .mp-follower-chip { min-height: 22px; padding: 2px 7px 2px 3px; }
.mp-inline-controls .mp-owner-menu, .mp-inline-controls .mp-followers-menu { min-width: 210px; }
.mp-inline-controls .mp-owner-control::after, .mp-inline-controls .mp-followers-control::after { right: 10px; }
.mp-inline-controls .mp-owner-avatar, .mp-inline-controls .mp-owner-fixed-avatar,
.mp-inline-controls .mp-follower-avatar { width: 20px; height: 20px; }
.mp-inline-controls .mp-owner-name, .mp-inline-controls .mp-owner-fixed-name,
.mp-inline-controls .mp-follower-name { font-size: var(--mp-fs-sm, 12px); }
.mp-inline-controls .mp-followers-input { min-height: 22px; height: 22px; font-size: var(--mp-fs-sm, 12px); }
.mp-inline-controls .mp-select { width: auto; min-width: 0px; }
.mp-inline-controls .mp-select-trigger { min-height: 32px; height: 32px; padding: 0px 10px; font-size: var(--mp-fs-sm, 12px); }
.mp-inline-controls .mp-status-control { flex: 0 0 auto; min-width: 0px; }
.mp-inline-controls .mp-status-segmented { height: 32px !important; min-height: 32px !important; padding: 2px !important; }
.mp-inline-controls .mp-status-option { min-height: 28px !important; height: 28px !important; padding: 0px 9px !important; font-size: var(--mp-fs-sm, 12px) !important; gap: 5px !important; }
.mp-inline-controls .mp-status-option .mp-status-icon { width: 13px !important; height: 13px !important; }
/* Inline fields may claim the width assigned by their layout host; this comes after
   the compact controls' intrinsic width defaults so it is the final canonical rule. */
.mp-inline-controls .mp-inline-field > .mp-select,
.mp-inline-controls .mp-inline-field > .mp-owner-control,
.mp-inline-controls .mp-inline-field > .mp-owner-fixed-display,
.mp-inline-controls .mp-inline-field > .mp-followers-control { width: 100%; }

/* ============================================================================
   "Waits for" — the chosen set inline, browsing in a panel.

   The field sizes to the answer, not to the project: usually nothing or two rows.
   Two earlier cuts gave the whole project permanent modal real estate, which does not
   survive a project with hundreds of tasks.
   ============================================================================ */





/* Typography comes from the shared label rule; only the axis differs, because the count
   chip sits beside the text rather than under it. */
.mp-field-legend {
    flex-direction: row;
    align-items: center;
    gap: 7px;
    margin-bottom: 5px;
}




.mp-depends-row {
    display: flex;
    align-items: center;
    gap: 9px;
    box-sizing: border-box;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid var(--mp-fill-12, rgba(148, 163, 184, .12));
    border-radius: var(--radius, 5px);
    background: var(--mp-fill-035, rgba(148, 163, 184, .035));
}

.mp-depends-row.is-done .mp-depends-title {
    text-decoration: line-through;
    opacity: .7;
}

.mp-depends-drop {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: var(--radius, 5px);
    background: transparent;
    color: var(--muted);
    font-size: var(--mp-fs-base, 13px);
    line-height: 1;
    cursor: pointer;
}

.mp-depends-drop:hover {
    background: var(--mp-fill-12, rgba(148, 163, 184, .12));
    color: var(--text);
}








.mp-depends-hit {
    display: flex;
    align-items: center;
    gap: 9px;
    box-sizing: border-box;
    width: 100%;
    height: var(--mp-depends-hit-h, 34px);
    flex: 0 0 auto;
    padding: 0 9px;
    border: 0;
    border-radius: var(--radius, 5px);
    background: transparent;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}

.mp-depends-hit:hover, .mp-depends-hit:focus-visible {
    background: var(--mp-fill-07, rgba(148, 163, 184, .07));
    outline: none;
}



.mp-depends-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--mp-fs-sm, 12px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mp-depends-meta {
    flex: 0 0 auto;
    font-size: var(--mp-fs-2xs, 10px);
    color: var(--muted);
}

.mp-depends-foot {
    margin: 6px 2px 0;
    font-size: var(--mp-fs-2xs, 10px);
    color: var(--muted);
}

.mp-depends-note {
    margin: 8px 0 0;
    font-size: var(--mp-fs-2xs, 10px);
    color: var(--muted);
}



/* Rows lay out two-up so they consume the row they are given instead of leaving it blank. */
/* Everything in this control is full width. One column, stacked — no switching between
   half and full, and therefore no mechanics to keep in step with it. */
.mp-depends-selected {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mp-depends-selected:empty { display: none; }


/* The canonical badge is sized to stand alone; inside a dense row it must not set the
   row height or crowd the title. Size only — the tone and dot stay with the badge. */
/* Two class selectors, so this cannot lose to .mp-status-badge on source order: the
   badge inside this control is always the small one, wherever the stylesheets land. */
.mp-status-badge.mp-depends-status {
    flex: 0 0 auto;
    /* The canonical badge carries a 1px border and sets no box-sizing, so a declared
       20px rendered as 22px. Border-box makes the number mean what it says. */
    box-sizing: border-box;
    min-height: 20px;
    height: 20px;
    padding: 0 8px;
    gap: 5px;
    font-size: var(--mp-fs-2xs, 10px);
}

/* Waits for — one control, one footprint.
   Label left, control filling the row to the right edge. The control is a full-width
   button that becomes a full-width search field in place; results list beneath it in
   the flow. Nothing is absolutely positioned, so nothing can cover Description or
   Attachments or run past the modal edge. Height matches the tags control. */
/* The [hidden] guard is NOT optional here. Any class that sets display outranks the UA's
   [hidden]{display:none}, so the rule below would keep this field on screen no matter what
   the attribute says — which is exactly what it did: a new task with no project still
   showed the control. Same trap as the retired count chip. */
#task-modal .mp-field-waitsfor[hidden], #calendar-task-modal .mp-field-waitsfor[hidden] {
    display: none;
}

#task-modal .mp-field-waitsfor, #calendar-task-modal .mp-field-waitsfor {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
}



/* Only what differs from .mp-field-legend above: it is a column beside a control rather
   than a label above one. */
.mp-field-waitsfor .mp-field-legend {
    flex: 0 0 auto;
    margin-bottom: 0;
    padding-top: 13px;
    /* A label beside a control, not a paragraph: without this the text and the count
       chip wrap onto separate lines as soon as the row is tight. */
    white-space: nowrap;
}

/* Fills the row beside the label, and is the positioning context for the menu. */
.mp-field-waitsfor .mp-depends {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

/* Button and field share one box, so swapping them cannot move the layout. */
/* Button, field and the Add card all sit at the platform's 38px control height. */
.mp-depends-add, .mp-depends-search {
    box-sizing: border-box;
    width: 100%;
    min-height: 38px;
    padding: 0 12px;
    border-radius: var(--radius, 5px);
    font-size: var(--mp-fs-sm, 12px);
}

.mp-depends-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px dashed var(--mp-fill-22, rgba(148, 163, 184, .22));
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}

.mp-depends-add[hidden] { display: none; }

/* An opaque backing under the platform's input gradient.
   Every input on the platform paints translucent fills — linear-gradient over whatever is
   behind it — which is fine in a form and wrong for a control that can sit over content:
   the card underneath read straight through the field. Setting background-COLOR leaves the
   gradient in place as the background-image, so the field keeps the platform's look and
   simply stops being see-through. --panel-solid is the surface token, so it follows the
   light and dark schemes rather than pinning a hex. */
.mp-depends-search { background-color: var(--panel-solid, #101828); }




.mp-depends-add:hover {
    border-color: var(--mp-fill-35, rgba(148, 163, 184, .35));
    color: var(--text);
}

.mp-depends-add svg, .mp-depends-add .mp-icon { width: 14px; height: 14px; }

/* As a grid cell the box carries no width of its own; the grid gives it half the row,
   and the field inside it opens right where the Add button was. */
.mp-depends-selected:not(:empty) + .mp-depends-box { margin-top: 6px; }

/* The box holds its height whatever is inside it. While composing the field is taken out
   of the flow and the button is hidden, so without this the box collapses and everything
   below the control jumps up the moment the menu opens. */
.mp-depends-box { min-height: 38px; }


/* The menu floats, like the tags menu: it must not push Description and Attachments down
   every time it opens. Full field width, left/right anchored, so it can neither be
   narrower than its titles nor run past the modal edge. The count line floats WITH it —
   left in the flow it pushed the form down by its own height. */
.mp-depends-menu {
    position: absolute;
    z-index: 30;
    /* Positioned from the box, which sits below the cards and therefore moves as they are
       added. positionMenu() sets this on open and after every render — the 0 here is only
       a resting value for the hidden state. */
    top: 0;
    left: 0;
    right: 0;
    padding: 4px 4px 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--panel-solid, #0f1a26);
    box-shadow: 0 14px 34px var(--mp-sh-40b, rgba(0, 0, 0, .4));
}

.mp-depends-menu[hidden] { display: none; }

/* Exactly five rows, then scroll: a fly-out longer than that stops being a menu and
   starts being a page. Rows are a fixed height so the cap is exact rather than
   approximate — 5 rows plus the 2px gaps between them. */
.mp-depends-results {
    --mp-depends-hit-h: 34px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: calc(var(--mp-depends-hit-h) * 5 + 8px);
    overflow-y: auto;
}




/* Read-only: the span-based controls take no input either.
   disabled= reaches every native field, but the tags and followers controls render their chips,
   remove affordances and menus as spans, which have no disabled state. Without this a viewer
   could still strike tags off a project they may not change. Scoped to those two controls rather
   than the whole form: pointer-events:none on the form would also kill text selection, and a
   viewer copying a description out of a project is the point of a read-only modal. */
:is(.mp-modal[data-can-edit="0"], .mp-modal.is-readonly, .mp-modal form[data-can-edit="0"], .mp-modal form.is-readonly) :is(.mp-tags-control, .mp-followers-control) {
    pointer-events: none;
}
:is(.mp-modal[data-can-edit="0"], .mp-modal.is-readonly, .mp-modal form[data-can-edit="0"], .mp-modal form.is-readonly) :is(.mp-tags-menu, .mp-followers-menu, .mp-tags-input, .mp-followers-input) {
    display: none;
}