/* AI Cloud component plugin: Actions & Badges */

/* ─── Base button ─────────────────────────────────────────────────────────── */
/* HIDDEN MEANS HIDDEN, stated once for the base. .btn sets its own display, which outranks the
   UA's [hidden]{display:none} (author origin beats UA at any specificity), so a .btn carrying
   the attribute painted as inline-flex — measured in Chromium at v1.12.530. data-grid.css had
   patched it locally twice (.mpdg-sort-dir[hidden], .mpdg-filter-persist .btn[hidden]); both went
   at v1.12.542, measured by tests/behavior/grid_hidden_members_test.js, and the register holds the
   count at zero (btn-hidden-private-copies). .mpdg-tool-rail > [hidden] stayed and is not a copy:
   the rail's members are mostly divs with a display of their own. .action-btn-square[hidden] below
   is NOT one of them either: that class forces its own !important
   display and has to answer it in kind. The attribute is the platform's one show/hide token for
   a control, and a token that only works where somebody remembered to make it work is not a
   token. */
.btn[hidden] {
  display:none;
}

.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:32px;
  padding:0 13px;
  border:1px solid var(--mp-fill-10);
  border-radius:var(--radius,5px);
  background:var(--mp-fill-045);
  color:var(--text,var(--mp-ink-check));
  font-family:inherit;
  font-size:var(--mp-fs-sm,12px);
  font-weight:var(--mp-fw-heavy,800);
  letter-spacing:var(--mp-ls-wide,0.04em);
  line-height:var(--mp-lh-none,1);
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  transition:background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.btn.btn-full{
   color:var(--black);
   background: linear-gradient(135deg,#00ea5e,#38bdf8);
}

.btn:hover { transform: translateY(-1px); }

.link {
  background: none;
  border: none;
  color: var(--green);
  cursor: pointer;
  font: inherit;
  padding: 0;
}

/* No extra rules needed for button.link / a.link — .link already clears both */

/* ─── Action group ────────────────────────────────────────────────────────── */
.action-group{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

/* ─── Action button base ──────────────────────────────────────────────────── */
/*
  Canonical definition — supersedes all prior v1.4.0 / v1.6.0 / v1.6.2 blocks.
  The long multi-selector list is collapsed: .mp-action-btn and element-qualified
  variants (.action-btn, button.action-btn, a.action-btn) all share this base.
*/
.action-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 8px 12px;
  border-radius: var(--btn-radius);
  border: 1px solid var(--mp-fill-10);
  background: var(--mp-fill-045);
  color: var(--mp-ink-item);
  text-decoration: none;
  font-size:var(--mp-fs-sm,12px);
  font-weight:var(--mp-fw-heavy,800);
  font-family: inherit;
  letter-spacing:var(--mp-ls-normal,0);
  line-height:var(--mp-lh-none,1);
  transition: var(--transition);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

/* Suppress all pseudo-content by default; variants re-enable selectively */
.action-btn::before,
.action-btn::after {
  content: none;
  display: none;
}

.action-btn:hover{
  transform: translateY(-1px);
}

/* Hide stray inline icon elements inside action buttons */
.action-btn .action-icon,
.action-btn .btn-icon,
.action-btn .icon,
.action-btn i {
  display: none;
}

/* ─── Action button variants ──────────────────────────────────────────────── */

/* Utility / edit — green pencil */
.action-utility{ color: var(--mp-ink-on-hl); }

.action-utility:hover{
  border-color: var(--mp-hl-30);
  background: var(--mp-hl-10);
  color: var(--mp-ink-invert);
  box-shadow: 0 10px 24px var(--mp-hl-10);
}

/* Success / activate */
.action-btn.action-activate::before{
    content:"" !important;background:var(--mp-activate) !important;width:15px !important;height:15px !important;-webkit-mask:var(--mp-icon-power) center/contain no-repeat !important;mask:var(--mp-icon-power) center/contain no-repeat !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    color:var(--mp-activate) !important;
    font-size:var(--mp-fs-md,14px) !important;
    line-height:var(--mp-lh-none,1) !important;
}

.action-success,
.mp-action-success {
  color: var(--mp-ink-on-hl);
  border-color: var(--mp-hl-22);
  background: var(--mp-hl-08);
}

.action-success:hover,
.mp-action-success:hover {
  background: var(--mp-hl-14);
  color: var(--mp-ink-invert);
  box-shadow: 0 10px 24px var(--mp-hl-10);
}

.action-success::before,
.mp-action-success::before {
  content:'';display:inline-block;width:13px;height:13px;background:var(--green);-webkit-mask:var(--mp-icon-check) center/contain no-repeat;mask:var(--mp-icon-check) center/contain no-repeat;
  color: var(--green);
  font-size:var(--mp-fs-base,13px);
  font-weight:var(--mp-fw-black,900);
}

/* Warning */
.action-warning {
  color: var(--mp-ink-amber-soft);
  background: var(--mp-amber-12);
  border-color: var(--mp-amber-28);
}

.action-warning:hover { background: var(--mp-amber-18); }

/* Neutral */
.action-neutral,
.mp-action-neutral {
  color: var(--mp-ink-neutral);
  background: var(--mp-fill-055);
}

.action-neutral:hover,
.mp-action-neutral:hover { background: var(--border); }

/* Muted */
.action-muted {
  opacity: .75;
  color: var(--muted);
  background: var(--mp-slate-055);
  border-color: var(--mp-slate-10);
}

/* Static (non-interactive badge-like button) */
.action-static {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border-radius: var(--btn-radius);
  padding: 8px 10px;
  color: var(--muted);
  background: var(--mp-slate-06);
  border: 1px solid var(--mp-slate-12);
  font-size:var(--mp-fs-sm,12px);
  font-weight:var(--mp-fw-heavy,800);
  text-transform: uppercase;
  letter-spacing:var(--mp-ls-wide,0.04em);
}

/* ─── Semantic icon variants ──────────────────────────────────────────────── */
/*
  Shared ::before shape for enable / disable / delete / edit / download.
  Each variant sets content + color only.
*/
.action-btn.action-enable::before,
.action-btn.action-disable::before,
.action-btn.action-delete::before,
.action-btn.action-danger::before,
.action-btn.action-edit::before,
.action-btn.action-download::before {
  content: none; /* overridden per variant below */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size:var(--mp-fs-md,14px);
  line-height:var(--mp-lh-none,1);
}

.action-btn.action-enable::before,
.action-btn.action-disable::before {
  content: "";
  display: inline-flex;
  width: 15px;
  height: 15px;
  -webkit-mask: var(--mp-icon-power) center / contain no-repeat;
  mask: var(--mp-icon-power) center / contain no-repeat;
}

.action-btn.action-enable::before {
  background-color: var(--green-light);
}

.action-btn.action-disable::before {
  background-color: var(--red);
}

.action-btn.action-delete::before,
.action-btn.action-danger::before {
  content: "";
  display: inline-flex;
  width: 15px;
  height: 15px;
  background-color: var(--red);
  -webkit-mask: var(--mp-icon-close) center / contain no-repeat;
  mask: var(--mp-icon-close) center / contain no-repeat;
}

.action-btn.action-edit::before {
  content: "";
  display: inline-flex;
  width: 14px;
  height: 14px;
  background-color: var(--green-light);
  -webkit-mask: var(--mp-icon-pencil) center / contain no-repeat;
  mask: var(--mp-icon-pencil) center / contain no-repeat;
}

.action-btn.action-download::before {
  content: "";
  display: inline-flex;
  width: 14px;
  height: 14px;
  background-color: var(--green-light);
  -webkit-mask: var(--mp-icon-download) center / contain no-repeat;
  mask: var(--mp-icon-download) center / contain no-repeat;
}

/* Merge action glyph (call_merge), masked SVG so it stays crisp at any size. */
.action-btn.action-merge::before {
  content: "";
  display: inline-flex;
  width: 14px;
  height: 14px;
  background-color: var(--green-light);
  -webkit-mask: var(--mp-icon-filter-off) center / contain no-repeat;
  mask: var(--mp-icon-filter-off) center / contain no-repeat;
}

/* Duplicate / clone action glyph — reuses the registry copy icon
   (utility family, matches edit/download sizing + colour). */
.action-btn.action-duplicate::before {
  content: "";
  display: inline-flex;
  width: 14px;
  height: 14px;
  background-color: var(--green-light);
  -webkit-mask: var(--mp-icon-copy) center / contain no-repeat;
  mask: var(--mp-icon-copy) center / contain no-repeat;
}

/* Disable / delete button colours */
.action-btn.action-disable,
.action-btn.action-delete,.action-btn.action-danger{
  border-color: var(--mp-pink-26);
  background: var(--mp-pink-075);
  color: var(--mp-ink-danger-strong);
}

.action-danger:hover,
.action-delete:hover,
.action-disable:hover {
  border-color: var(--mp-danger-30);
  background: var(--mp-rose-12);
  color: var(--mp-ink-invert);
  box-shadow: 0 10px 24px var(--mp-danger-10);
}

.action-btn.action-enable {
  border-color: var(--mp-slate-26);
  background: var(--mp-fill-045);
  color: var(--mp-ink-btn);
}

/* ─── Badges ──────────────────────────────────────────────────────────────── */
/*
  Unified base — pill shape.  The earlier rect-shaped .badge block was
  overwritten in practice by the later canonical definition; removed.
*/
.badge,
.status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  min-height: 24px;
  padding: 5px 9px;
  border-radius: var(--pill-radius);
  border: 1px solid var(--mp-slate-20);
  background: var(--mp-slate-08);
  color: var(--mp-ink-soft);
  font-size:var(--mp-fs-xs,11px);
  font-weight:var(--mp-fw-black,900);
  line-height:var(--mp-lh-none,1);
  text-transform: uppercase;
  letter-spacing:var(--mp-ls-wider,0.08em);
  white-space: nowrap;
}

/* Core / amber */
.badge-core,
.status-pill.status-core {
  color: var(--mp-ink-amber);
  background: var(--mp-yellow-10);
  border-color: var(--mp-yellow-28);
  margin-top: 8px;      /* kept from original .badge-core */
}

/* Enabled / active / green variants */
.badge-enabled,
.status-pill.status-active,
.status-pill.status-enabled,
.status-pill.status-legacy-validated,
.risk-low,
.status-already-merged,
.status-instruction-only,
.status-likely-orphan,
.status-orphan-candidate {
  color: var(--mp-ink-green);
  background: var(--green-soft);
  border-color: var(--mp-hl-30);
}

/* Disabled / installed / neutral variants */
.badge-disabled,
.status-pill.status-planned,
.status-pill.status-installed,
.status-pill.status-architecture,
.status-pill.status-legacy,
.status-pill.status-legacy-cleaned {
  color: var(--mp-ink-soft);
  background: var(--mp-slate-08);
  border-color: var(--mp-slate-20);
}

/* Blue / v2 */
.badge-v2,
.status-pill.status-done {
  color: var(--mp-ink-blue);
  background: var(--mp-blue-10);
  border-color: var(--mp-blue-22);
}

/* Purple / v1 */
.badge-v1 {
  color: var(--mp-ink-violet);
  background: var(--mp-violet-10);
  border-color: var(--mp-violet-20);
}

/* Legacy / amber warning — and pending schema migrations, which want the same tone:
   something needs attention, nothing is broken. */
.badge-legacy,
.status-pill.status-paused,
.status-pill.status-legacy-staged,
.status-pill.status-pending-migrations,
.risk-medium,
.status-manual-review,
.status-referenced {
  color: var(--mp-ink-amber);
  background: var(--mp-amber-11);
  border-color: var(--mp-amber-30);
}

/* High risk / not-merged / red */
.risk-high,
.status-not-merged {
  color: var(--mp-ink-danger);
  background: var(--mp-rose-11);
  border-color: var(--mp-rose-34);
}

/* ─── Priority badge ─────────────────────────────────────────────────────────
   Neutral, reusable priority pill (sibling of .mp-status-badge). Colour scales
   from urgent → low via the --pc accent. Any module can use it; the data-grid
   styles its trigger variant on top of this. */
.mp-priority-badge {
  --pc: var(--green);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--pc) var(--mp-badge-bg-pct,14%), transparent);
  border: 1px solid color-mix(in srgb, var(--pc) var(--mp-badge-bd-pct,40%), transparent);
  /* The label is the badge hue pulled toward a legible anchor: white on dark, ink on
     light. The RATIO is scheme-aware too - 70/30 clears 4.5:1 on a dark card, but the
     same mix lands at ~3:1 on white, so light pulls harder toward ink. */
  color: color-mix(in srgb, var(--pc) var(--mp-badge-hue-pct), var(--mp-badge-mix) var(--mp-badge-ink-pct));
  font-size:var(--mp-fs-xs,11px);
  font-weight:var(--mp-fw-black,900);
  line-height:var(--mp-lh-none,1);
  white-space: nowrap;
}
.mp-priority-badge[data-priority="1"] { --pc: var(--red); }
.mp-priority-badge[data-priority="2"] { --pc: var(--amber); }
.mp-priority-badge[data-priority="3"] { --pc: var(--green); }
.mp-priority-badge[data-priority="4"] { --pc: var(--purple); }

/* ─── Role badge ───
   Canonical user-role pill. Single source of truth for both the Users overview
   and the profile/User settings header. admin=amber, planner=blue, contributor=slate. */
.mp-role-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 6px;
  font-size:var(--mp-fs-sm,12px);
  font-weight:var(--mp-fw-semibold,600);
  line-height:var(--mp-lh-normal,1.4);
  letter-spacing:var(--mp-ls-normal,0);
  white-space: nowrap;
  border: 1px solid transparent;
}
.mp-role-badge[data-role="admin"]       { background: var(--mp-amber-14); border-color: var(--mp-amber-32); color: var(--mp-role-admin); }
.mp-role-badge[data-role="planner"]     { background: var(--mp-sky-14); border-color: var(--mp-sky-32); color: var(--mp-accent-ink); }
.mp-role-badge[data-role="contributor"] { background: var(--mp-slate-12); border-color: var(--mp-slate-26); color: var(--mp-ink-soft); }

/* ─── Session kind chip (state / type) ─────────────────────────
   Single source of truth for the session STATE and TYPE badges shown on calendar
   cards, in the Sessions panel, on the Dashboard schedule and in the task row
   expander: an icon + a collapsible label, tinted by the --kc accent (per
   data-tone below). On a compact host the label hides (.is-icononly) and the icon
   carries the meaning. This component owns only the visual.

   TWO RENDERERS, ONE SHAPE: window.MPSessions.chip() for the JavaScript surfaces
   and mp_kind_chip() (app/core/bootstrap.php) for the server-rendered ones. The
   VOCABULARY — label, icon and tone for both axes — lives in
   MPModules\Tasks\Services\SessionKind; sessions.js keeps a copy because it cannot
   read PHP, and tests/behavior/session_chip_parity_test.php is what makes the two
   disagreeing impossible. This comment said the vocabulary lived in sessions.js and
   that MPSessions.chip was the only way here; the first stopped being true at
   v1.12.388 and the second at v1.12.439.

   .is-icononly IS A JS-ONLY VARIANT and should stay one until a PHP compact host
   exists: the badge ring is drawn inside the glyph's own SVG so ring and glyph
   share a rasterisation, and a second implementation of that would put two subtly
   different chips on one screen. */
.mp-kind-chip {
  --kc: var(--muted, var(--muted));
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--kc) 42%, transparent);
  background: transparent;
  color: var(--kc);
  font-size:var(--mp-fs-2xs,10px);
  font-weight:var(--mp-fw-heavy,800);
  letter-spacing:var(--mp-ls-wide,0.04em);
  text-transform: uppercase;
  line-height:var(--mp-lh-none,1);
  white-space: nowrap;
}
.mp-kind-chip .mp-kind-chip-ico { display: inline-flex; align-items: center; font-size:var(--mp-fs-sm,12px); }
.mp-kind-chip .mp-kind-chip-ico .mp-icon { width: 1em; height: 1em; }
/* Icon-only (compact hosts): drop the label, square the pill around the glyph. */
.mp-kind-chip.is-icononly { display: grid; place-items: center; gap: 0; padding: 0; box-sizing: border-box; width: 1.9em; height: 1.9em; flex: 0 0 auto; border: none; background: transparent; }
.mp-kind-chip.is-icononly .mp-kind-chip-ico { display: block; width: 100%; height: 100%; font-size: 0; }
.mp-kind-chip.is-icononly .mp-kind-chip-ico .mp-kind-chip-badge { display: block; width: 100%; height: 100%; }
.mp-kind-chip.is-icononly .mp-kind-chip-lbl { display: none; }
/* State tones */
.mp-kind-chip[data-tone="planned"] { --kc: var(--purple, var(--purple)); }
.mp-kind-chip[data-tone="running"] { --kc: var(--amber, var(--mp-kind-running)); }
.mp-kind-chip[data-tone="logged"]  { --kc: var(--blue, var(--mp-kind-logged)); }
.mp-kind-chip[data-tone="paused"]  { --kc: var(--muted); }
.mp-kind-chip[data-tone="skipped"] { --kc: var(--muted, var(--muted)); }
.mp-kind-chip[data-tone="skipped"] .mp-kind-chip-lbl { text-decoration: line-through; }
/* Type tones */
.mp-kind-chip[data-tone="focus"]    { --kc: var(--muted, var(--muted)); }
.mp-kind-chip[data-tone="meeting"]  { --kc: var(--teal, var(--mp-kind-meeting)); }
.mp-kind-chip[data-tone="event"]    { --kc: var(--fuchsia, var(--mp-kind-event)); }
.mp-kind-chip[data-tone="training"] { --kc: var(--pink, var(--mp-kind-training)); }
/* Stale (ran, never closed, a full working day gone): amber. A MODIFIER, not a tone — the age of
   a block is a property of the row, not a state the session is in, so data-tone stays "paused" and
   SessionKind::STATES keeps five members. Same mechanism as .is-cancel below.
   AMBER NOW MEANS "this wants something from you", not "a clock is running". It was running's
   alone; a stale block is the second thing to carry it, and both are asking the reader to act.
   Chips are outline, never filled, so the two are told apart by their glyph and label. Anything
   proposing a THIRD amber should re-read that sentence first and decide whether it belongs. */
.mp-kind-chip.is-stale { --kc: var(--amber, var(--mp-kind-running)); }

/* Cancelled (tombstoned meeting): rose + struck label. */
.mp-kind-chip.is-cancel { --kc: var(--rose, var(--mp-kind-cancel)); }
.mp-kind-chip.is-cancel .mp-kind-chip-lbl { text-decoration: line-through; }

/* ─── Status pill (legacy core indicator) ────────────────────────────────── */
.status-pill.status-core {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 5px 8px;
  margin-left: 8px;
  border-radius: var(--pill-radius);
  border: 1px solid var(--mp-amber-28);
  background: var(--mp-amber-10);
  color: var(--mp-ink-amber);
  font-size:var(--mp-fs-xs,11px);
  font-weight:var(--mp-fw-black,900);
  text-transform: uppercase;
  line-height:var(--mp-lh-none,1);
}

/* ─── Attachment panel & rows ─────────────────────────────────────────────── */
.task-file-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: var(--pill-radius);
  background: var(--mp-filepill);
  font-weight:var(--mp-fw-bold,700);
  font-size:var(--mp-fs-sm,12px);
  color: var(--mp-ink-item);
  line-height:var(--mp-lh-none,1);
}

.mp-attachments-panel {
  display: grid;
  gap: 12px;
  border: 1px solid var(--mp-slate-24);
  border-radius: var(--btn-radius);
  padding: 14px;
  background: linear-gradient(180deg, var(--mp-fill-045), var(--mp-fill-025));
}

.mp-attachments-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.mp-attachment-list { display: grid; gap: 8px; }

.mp-attachment-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--mp-slate-22);
  border-radius: var(--btn-radius);
  background: var(--mp-row-deep);
  min-height: 56px;
}

.mp-attachment-name {
  font-weight:var(--mp-fw-bold,700);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-attachment-actions {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: nowrap;
}

.task-file-pill-icon::after {
  top: 2px; right: 2px;
  width: 4px;  height: 4px;
  border-left-width: 1.3px;
  border-bottom-width: 1.3px;
}

/* ─── Attachment modal overlay ────────────────────────────────────────────── */
#task-email-modal.mp-modal,
#calendar-email-modal.mp-modal {
  background: var(--mp-scrim-email);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ─── Email frame ─────────────────────────────────────────────────────────── */
.task-email-meta,
.task-email-inner-files {
  border-top: 0;
  border-bottom: 0;
}

#task-email-modal .task-email-frame,
#calendar-email-modal .task-email-frame,
.task-email-frame {
  border: 0;
  outline: 0;
  border-radius: 8px;
  display: block;
}

/* ─── Attachment icon buttons ───────────────────────────────────────────────
   Status-control inspired visual language:
   - compact rounded square
   - dark glass base
   - action tone visible on the border/icon
   - stronger filled state on hover/press
   -------------------------------------------------------------------------- */

/* Square action buttons — the modal Close/Save pair are the ONLY .action-btn-square users.
   Brand-gradient square with a dark mask glyph; sizing + glyph structure live here, while the
   joined dirty-pill look (gradient continuity, transparency) is owned by forms-controls. The
   old attachment-era accent/border machinery is gone (the border was 0-width, so it did
   nothing) and hover is just a subtle lift. */
.action-btn.action-btn-square {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  isolation: isolate !important;

  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  flex: 0 0 36px !important;
  padding: 0 !important;
  margin: 0 !important;

  border-radius: 8px !important;
  border: 0 !important;
  background: linear-gradient(135deg,#00ea5e,#38bdf8);
  color: #06111d !important;

  box-sizing: border-box !important;
  font-size: 0 !important;
  line-height:var(--mp-lh-none,1) !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  transition: transform var(--transition), opacity var(--transition) !important;
}

.action-btn.action-btn-square:hover,
.action-btn.action-btn-square:focus-visible {
  outline: none !important;
  transform: translateY(-1px) !important;
}

.action-btn.action-btn-square:active,
.action-btn.action-btn-square.is-active {
  transform: none !important;
}

/* One clean SVG-mask icon per button: avoids distorted pseudo-icons from earlier CSS. */
.action-btn.action-btn-square::before {
  content: "" !important;
  position: relative !important;
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  inset: auto !important;
  box-sizing: border-box !important;
  background: currentColor !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 1 !important;
  -webkit-mask: var(--attachment-action-icon) center / contain no-repeat !important;
  mask: var(--attachment-action-icon) center / contain no-repeat !important;
}

.action-btn.action-btn-square::after {
  content: none !important;
  display: none !important;
}

.action-btn.action-save.action-btn-square::before {
  --attachment-action-icon: var(--mp-icon-floppy) !important;
}


.action-btn.action-close.action-btn-square::before {
  --attachment-action-icon: var(--mp-icon-close) !important;
}

/* The square action button forces display:inline-flex !important, which otherwise
   defeats the [hidden] attribute; make [hidden] authoritative so the modal Close/Save
   morph can actually hide the inactive button (both share .action-btn-square). */
.action-btn.action-btn-square[hidden] {
  display: none !important;
}

/* ─── Segmented control shell ─────────────────────────────────────────────── */
/* .mp-seg-shell is the one tray for every segmented control on the platform: module view
   switchers (Tasks/Projects List·Board·Chart), tab rails (Mail, File-transfers, Calendar
   Day·Week·Month) and the Tasks personal-scope lenses. It groups its .btn.btn--seg segments
   (Buttons registry) as flush items inside a compact bordered shell; the segment paint —
   transparent idle, brand-gradient active — lives with the seg modifier in
   modules/buttons/assets/buttons.css. This one shell supersedes the several former per-instance
   switcher, icon-toggle and view-tab treatments, retired for the single seg vocabulary. */
.mp-seg-shell{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:4px;
  border:1px solid var(--mp-slate-18);
  border-radius:9px;
  background:var(--mp-seg-shell);
  box-shadow:inset 0 1px 0 var(--mp-fill-04);
}
/* Page-wide tray: the shell spans its container instead of hugging its segments, so a rail
   can span the content column and push trailing actions to the far edge with margin-left:auto.
   Named here because actions-badges owns the shell — a consumer widening it with its own
   width:100% would be the start of the per-instance treatments this shell exists to have
   retired. Mirrors the Buttons registry's btn--block. */
/* Frameless tray: keeps the shell's layout contract (flex row, 3px gutters, 4px inset) and
   drops its chrome. For a rail whose own contents carry the structure — a run of segments
   against a placeholder, say — the tray outline is a second frame around a thing that is
   already framed. Deliberately not "no shell": the geometry is the part worth sharing, and a
   consumer that hand-rolls the row to escape the border loses the gutters with it. */
.mp-seg-shell--bare{
  border-color:transparent;
  background:none;
  box-shadow:none;
}

/* Flush tray: the same shell with its inset and gutters removed, so its members sit edge to
   edge and are separated by a hairline instead of a gap. For a cluster of INDEPENDENT controls
   that belong together - the grid toolbar's Filter / Group / Sort / Columns - as opposed to the
   mutually-exclusive segments the default tray was built for. Both are "a group of buttons in
   one outline", which is why this is a modifier and not a second tray; what differs is whether
   exactly one member is the chosen one, and that difference lives on the members, not here.

   Height comes from the MEMBERS, via the size modifiers in the Buttons registry. A flush tray of
   btn--xs segments is shorter than a default tray of unsized ones, and that is the size axis
   working rather than an inconsistency - it is the reason this did not need a tray of its own.

   THE HAIRLINE IS DRAWN OUTSIDE EACH MEMBER'S LEFT EDGE, and the reason is the one thing here
   that is easy to get wrong. The obvious rule is border-left on :not(:first-child), and it fails
   the moment a member DISAPPEARS: display:none does not move :first-child, so a tray whose second
   member is hidden draws a rule one pixel inside its own rounded left border. That is not
   hypothetical - group carries data-mpdg-hide-in-board on four modules and columns on two, so it
   would have shipped as a double line at the rounded end, in board view, on six screens.
   Drawing the rule outside the box and letting overflow:hidden clip whichever one lands beyond
   the padding box is self-healing for ANY number of hidden leading members, and needs no
   :first-child bookkeeping and no host knowledge in this file. */
.mp-seg-shell--flush{
  gap:0;
  padding:0;
  border-radius:999px;
  overflow:hidden;
}
.mp-seg-shell--flush > *{
  position:relative;
  display:inline-flex;
  align-items:center;
  box-shadow:-1px 0 0 var(--mp-slate-18);
}
/* Members are flush, so their own rounding would show as a notch against the tray's. The tray
   owns the outer radius and clips the ends.

   THE SELECTOR IS A DESCENDANT ONE AND CANNOT BE ANYTHING ELSE: a consumer nests its trigger as
   deep as it likes (the grid's sort control puts one three levels down), so the tray has no fixed
   depth to target. The cost is that it also reaches whatever a member CONTAINS — and a member
   that owns a dropdown contains a popup whose rows are not part of this row at all. At v1.12.497
   that squared every menu item and the saved-views "Save as preset" button.

   The tray cannot know which of its descendants are popups; the consumer that renders them can.
   So the exception lives with the consumer, beside the panel it names — see .mpdg-menu-panel in
   surfaces-data. Stated here so the next reader meets the limit at the rule that has it, rather
   than discovering it through a squared dropdown. */
.mp-seg-shell--flush .btn{
  border-radius:0;
}

/* Page tab rail: a shell that heads a page and is followed by the surface it switches.
   Without this every module invented its own gap — file-transfers pinned 18px to one
   specific following card class, mail set none, and a third page would have invented a
   fourth answer. The gap belongs to the rail, not to whatever happens to come after it,
   so it survives a page whose first element is not a card.

   THE NUMBER IS NOT DECLARED HERE. It was 20px against .mpdg-toolbar's 16px, which made a
   page's head row sit at one distance from a card and a different distance from a grid —
   one visual question with two answers, in two components that cannot see each other.
   --mp-head-gap (foundation) is the answer for both. The literal stays as a FALLBACK only,
   for a rail rendered before foundation loads.

   A rail that is a MEMBER of a .mpdg-toolbar takes no margin at all: the toolbar is already
   spacing itself from the surface below, and this margin would land inside its flex line
   and ADD to it. That is stated in surfaces-data, beside the toolbar rule it belongs to. */
.mp-seg-shell--rail{
  margin-bottom:var(--mp-head-gap,16px);
}

.mp-seg-shell--block{
  display:flex;
  width:100%;
  /* The shell carries 4px padding and a 1px border, and .mp-seg-shell sets no box-sizing —
     it never needed one while it sized to its content. width:100% without this overflows
     the container by exactly 10px. */
  box-sizing:border-box;
}
.mp-view-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  min-height:22px;
  padding:4px 7px;
  border:1px solid var(--mp-fill-12);
  border-radius:999px;
  background:var(--mp-fill-07);
  color:inherit;
  font-size:var(--mp-fs-sm,12px);
  font-weight:var(--mp-fw-black,900);
  letter-spacing:var(--mp-ls-normal,0);
  line-height:var(--mp-lh-none,1);
}

.btn.btn--seg.is-active .mp-view-count{
  color:#06111d;
  background:rgba(6,17,29,.12);
  border-color:rgba(6,17,29,.18);
}

/* ─── Shared action menu / editor file picker ───────────────────────────────
   Reusable disclosure menu for grouped module actions such as CSS/JS editors.
   It extends the canonical .action-btn and .status-pill language instead of
   creating a separate dropdown design.
   -------------------------------------------------------------------------- */
.action-menu{
  position:relative;
  display:inline-block;
  width:max-content;
  max-width:100%;
}

.action-menu > summary,
.action-menu-trigger{
  list-style:none;
  user-select:none;
  min-width: 90px;
}

.action-menu > summary::-webkit-details-marker{ display:none; }

.action-menu-trigger{
  padding-right:10px;
  white-space:nowrap;
}

.action-menu-trigger::after{
  content:"" !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:16px;
  height:16px;
  margin-left:4px;
  color:var(--muted);
  background:currentColor;
  -webkit-mask:var(--mp-icon-caret) center / 16px 16px no-repeat;
  mask:var(--mp-icon-caret) center / 16px 16px no-repeat;
  transition:transform var(--transition), color var(--transition);
}

.action-menu[open]::before{
  content:"";
  position:absolute;
  z-index:1199;
  top:100%;
  left:0;
  right:0;
  height:10px;
}

/* SECOND COPY OF THE OPEN-TRIGGER IDEA, LEFT IN PLACE DELIBERATELY. The grid toolbar's
   version of this - .mpdg-tool-btn[aria-expanded="true"] - became btn--trigger in the Buttons
   registry at v1.12.493. This one did NOT move with it, and the reason is structural rather
   than scheduling: .action-menu is a <details> primitive, so its open state is the [open]
   attribute and its summary never carries aria-expanded, which is the attribute the token
   keys on. There is no class this element can compose that would reach the shared paint.
   Deleting it to make the duplication count go down would have removed the open state from
   the primitive outright, which is the version of this cleanup that looks tidier and ships a
   regression. Closing it properly means giving .action-menu an aria-expanded route first -
   a different change with a different blast radius, and one no consumer is waiting on:
   this primitive has no call sites in any view today. Recorded rather than quietly fixed. */
.action-menu[open] .action-menu-trigger{
  border-color:var(--mp-hl-24);
  background:var(--mp-hl-075);
  color:var(--mp-ink-hl-bright);
}

.action-menu[open] .action-menu-trigger::after{
  color:var(--green-light);
  transform:rotate(180deg);
}

.action-menu-panel{
  position:absolute;
  z-index:1200;
  top:calc(100% + 8px);
  left:0;
  display:grid;
  gap:7px;
  min-width:220px;
  max-width:min(420px, calc(100vw - 40px));
  margin-top:0;
  padding:8px;
  border:1px solid var(--mp-slate-18);
  border-radius:var(--btn-radius);
  background:linear-gradient(180deg, var(--mp-menu-hi), var(--mp-menu-lo));
  box-shadow:0 18px 42px var(--mp-sh-30), inset 0 1px 0 var(--mp-fill-04);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

.action-menu-item{
  width:100%;
  justify-content:flex-start;
  min-height:34px;
  padding:7px 9px;
  text-align:left;
}

.action-menu-filetype{
  flex:0 0 auto;
  min-height:20px;
  padding:4px 7px;
  font-size:var(--mp-fs-2xs,10px);
  letter-spacing:var(--mp-ls-wide,0.04em);
}

.action-menu-filepath{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.module-editor-cell{
  position:relative;
  overflow:visible;
}

.module-editor-cell .action-menu{
  position:relative;
}

.module-editor-cell .action-menu-panel{
  right:0;
  left:auto;
  width:max-content;
}

/* Two tones the badge set never had. Every consumer that needed to say "this went wrong" was
   rolling its own pill next to .status-pill — same shape, slightly different, which is how a
   design system quietly stops being one. The tokens already existed; only the variants did not. */
.status-pill.status-warn {
  color: var(--mp-ink-amber);
  background: var(--mp-yellow-10);
  border-color: var(--mp-yellow-28);
}
.status-pill.status-danger {
  color: var(--mp-ink-danger-strong);
  background: var(--mp-red-10);
  border-color: var(--mp-red-26);
}