/*!
 * buttons.css - canonical button paint for MarketingPlanner Core.
 * registry-hash: e23dc1167d9cff4c
 *
 * Composes on the theme's .btn base (ai-cloud / actions-badges) - it never
 * redefines .btn. Every selector here is a .btn--* modifier; the vocabulary is
 * declared in modules/buttons/data/buttons.json and emitted by mp_button() /
 * window.mpButton. Selectors use ".btn.btn--*" so a variant beats the bare base
 * regardless of stylesheet order.
 *
 * Colour: the .btn base already sets gap, sizing, weight and uppercase, and
 * mp_icon() renders an inline SVG tinted by currentColor - so a leading icon
 * follows the button's `color` automatically and needs no per-variant rule
 * (the primary's dark glyph is just color:#06111d). Tints reference the theme
 * root vars (--green / --green-light / --red / --amber / --muted); the rose/green/amber literals
 * match the existing actions-badges destructive / activate treatments so there
 * is one visual source per intent.
 */

/* ---- Base geometry normalisation ------------------------------------- */
/* The .btn base (actions-badges) omits box-sizing and vertical-align, so an
   <a> button (content-box) renders at a different height and baseline than a
   <button> (border-box) beside it - adjacent buttons don't line up top/bottom.
   Applied through the emphasis/intent modifiers (never the bare .btn, per this
   file's contract); every registry button carries exactly one, so all resolve
   to a predictable border-box 32px and align with their neighbours. */
.btn.btn--primary,
.btn.btn--secondary,
.btn.btn--tertiary,
.btn.btn--danger,
.btn.btn--warning,
.btn.btn--success{
  box-sizing:border-box;
  vertical-align:middle;
}

/* ---- Shared backing for translucent variants -------------------------- */
/* A translucent dark gradient placed BEHIND the translucent tints so they read
   consistently and "pop" regardless of the surface behind the button. Each variant
   sets only its own --mp-btn-accent; the formula below blends that accent into the
   dark base so the button's own colour bleeds into its backing (danger leans rose,
   success leans green, secondary stays cool-neutral). Defined once; primary is
   opaque and tertiary is intentionally transparent, so both are excluded. */
.btn.btn--secondary,
.btn.btn--danger,
.btn.btn--warning,
.btn.btn--success{
  --mp-btn-mix-top:22%;
  --mp-btn-mix-bottom:10%;
  --mp-btn-backing:linear-gradient(180deg,
    color-mix(in srgb, var(--mp-btn-accent,transparent) var(--mp-btn-mix-top), var(--mp-btn-sh-a,rgba(15,23,42,.25))),
    color-mix(in srgb, var(--mp-btn-accent,transparent) var(--mp-btn-mix-bottom), var(--mp-btn-sh-b,rgba(2,6,23,.25))));
}

/* ---- Emphasis (role by prominence; choose one) ------------------------- */

/* Primary - the one main action. Canonical brand gradient + dark glyph,
   identical to the active datagrid page pill (.mpdg-page-btn.is-current). */
.btn.btn--primary{
  --mp-btn-accent:var(--green,#00ea5e);
  background:var(--grad-brand);
  border-color:transparent;
  color:#06111d;
}
.btn.btn--primary:hover{ filter:brightness(1.05); }

/* Secondary - default neutral action beside a primary. A touch more present
   than the bare base, with a defined hover. */
.btn.btn--secondary{
  /*--mp-btn-accent:var(--muted,#94a3b8);*/
  background:linear-gradient(var(--mp-fill-06,rgba(255, 255, 255, 0.06)),var(--mp-fill-06,rgba(255, 255, 255, 0.06))),var(--mp-btn-backing,#0f1729);
  border-color:var(--mp-fill-14,rgba(255, 255, 255, 0.14));
  color:var(--mp-ink-btn,#e5edf8);
}
.btn.btn--secondary:hover{ background:linear-gradient(var(--mp-fill-10,rgba(255, 255, 255, 0.1)),var(--mp-fill-10,rgba(255, 255, 255, 0.1))),var(--mp-btn-backing,#0f1729); }

/* Tertiary - minimal emphasis; transparent until hover. */
.btn.btn--tertiary{
  background:transparent;
  border-color:transparent;
  color:var(--muted,var(--muted));
}
.btn.btn--tertiary:hover{
  background:var(--mp-slate-10,rgba(148, 163, 184, .10));
  color:var(--mp-ink-btn,#e5edf8);
}

/* Link - text-only, no button chrome; lowest emphasis. Composes on .btn but zeroes
   the box (padding / border / background / uppercase all cleared) and cancels the
   base .btn:hover lift, matching the actions-badges .link primitive. */
.btn.btn--link{
  min-height:0;
  padding:0;
  border:0;
  background:none;
  color:var(--mp-link-ink,#00ea5e);
  font:inherit;
  letter-spacing:normal;
  text-transform:none;
  gap:4px;
  backdrop-filter:none;
}
.btn.btn--link:hover{
  background:none;
  color:var(--mp-link-ink-hover,#00c853);
  text-decoration:underline;
  transform:none;
  box-shadow:none;
}

/* ---- Intent / status (semantic colour; choose one) -------------------- */

/* Danger - destructive. Matches the actions-badges delete/danger treatment. */
.btn.btn--danger{
  --mp-btn-accent:var(--mp-btn-accent-danger,#f43f5e);
  background:linear-gradient(var(--mp-pink-10,rgba(255,107,138,.10)),var(--mp-pink-10,rgba(255,107,138,.10))),var(--mp-btn-backing,#0f1729);
  border-color:var(--mp-pink-30,rgba(255,107,138,.30));
  color:var(--mp-ink-danger-strong,#ffd5de);
}
.btn.btn--danger:hover{
  background:linear-gradient(var(--mp-rose-16,rgba(251,113,133,.16)),var(--mp-rose-16,rgba(251,113,133,.16))),var(--mp-btn-backing,#0f1729);
  border-color:var(--mp-rose-42,rgba(251,113,133,.42));
  color:var(--mp-ink-invert,#fff);
}

/* Success - positive confirm. Brand-green, matches the activate treatment. */
.btn.btn--success{
  --mp-btn-accent:var(--mp-btn-accent-success,#00ea5e);
  background:linear-gradient(var(--mp-hl-10,rgba(0, 234, 94, 0.1)),var(--mp-hl-10,rgba(0, 234, 94, 0.1))),var(--mp-btn-backing,#0f1729);
  border-color:var(--mp-hl-30,rgba(0, 234, 94, 0.3));
  color:var(--mp-ink-green,#bbf7d0);
}
.btn.btn--success:hover{
  background:linear-gradient(var(--mp-hl-16,rgba(0, 234, 94, 0.16)),var(--mp-hl-16,rgba(0, 234, 94, 0.16))),var(--mp-btn-backing,#0f1729);
  color:var(--mp-ink-invert,#fff);
}

/* Warning - caution / non-destructive risk (discard, retry, over-budget). Amber,
   matching the over-budget / running-session amber used across the app. Sits
   between secondary and danger; not for data-losing actions (use danger). */
.btn.btn--warning{
  --mp-btn-accent:var(--mp-btn-accent-warning,#f59e0b);
  background:linear-gradient(var(--mp-amber-10,rgba(245, 158, 11, .10)),var(--mp-amber-10,rgba(245, 158, 11, .10))),var(--mp-btn-backing,#0f1729);
  border-color:var(--mp-amber-32,rgba(245, 158, 11, .32));
  color:var(--mp-ink-amber-2,#fde3b3);
}
.btn.btn--warning:hover{
  background:linear-gradient(var(--mp-amber-16,rgba(245,158,11,.16)),var(--mp-amber-16,rgba(245,158,11,.16))),var(--mp-btn-backing,#0f1729);
  border-color:var(--mp-amber-46,rgba(245,158,11,.46));
  color:var(--mp-ink-invert,#fff);
}

/* Hover glow - a faint accent-coloured drop shadow beneath the button, ported
   from the old actions-badges plugin (0 10px 24px at ~10% accent). Each variant
   uses its own --mp-btn-accent; tertiary stays minimal, so it is excluded. */
.btn.btn--primary:hover,
.btn.btn--secondary:hover,
.btn.btn--danger:hover,
.btn.btn--warning:hover,
.btn.btn--success:hover{
  box-shadow:0 10px 24px color-mix(in srgb, var(--mp-btn-accent) 10%, transparent);
}

/* Danger / success: the leading icon takes the variant's saturated accent
   (the border's hue), not the pale label colour. */
.btn.btn--danger .mp-icon,
.btn.btn--warning .mp-icon,
.btn.btn--success .mp-icon{ color:var(--mp-btn-accent); }

/* ---- Placement / shape modifiers (compose with any variant) ----------- */

/* Icon-only, square. Pair with an emphasis/intent variant + aria-label.
   gap:0 so the visually-hidden label adds no spacing. */
.btn.btn--icon{
  width:32px;
  min-width:32px;
  height:32px;
  padding:0;
  gap:0;
}
.btn.btn--icon .mp-icon{ width:16px; height:16px; }

/* Icon-only + size: keep the button a square at each size step (the base .btn--icon
   is 32px; these override it and re-assert padding:0 so a size modifier cannot
   reintroduce horizontal padding). Lets .btn--icon compose with the size scale -
   micro row-action clusters (xs) up to hero controls (xl) - instead of the old
   fixed-32px-only icon button. */
.btn.btn--icon.btn--xs{ width:22px; min-width:22px; height:22px; padding:0; }

.btn.btn--icon.btn--xs .mp-icon{ width:12px; height:12px; }
.btn.btn--icon.btn--sm{ width:26px; min-width:26px; height:26px; padding:0; }
.btn.btn--icon.btn--sm .mp-icon{ width:14px; height:14px; }
.btn.btn--icon.btn--lg{ width:38px; min-width:38px; height:38px; padding:0; }
.btn.btn--icon.btn--lg .mp-icon{ width:18px; height:18px; }
.btn.btn--icon.btn--xl{ width:44px; min-width:44px; height:44px; padding:0; }
.btn.btn--icon.btn--xl .mp-icon{ width:20px; height:20px; }

/* ---- Touch targets on coarse pointers --------------------------------- */
/* The dense icon sizes are right for a pointer and too small for a finger: xs is a 22px box, well
   under what any platform guideline asks for. The version this replaces kept the 22px box and grew
   only the HIT AREA, with a transparent 44px ::after centred on it. That is the smaller change and
   it does not survive the place these controls actually live. The attachment row draws Preview,
   Download and Delete 6px apart, so the boxes sit 28px between centres while each hit area is 44px
   wide: adjacent areas overlap by 16px, and inside the overlap the later sibling wins, because
   nothing sets a z-index. A tap aimed at Download landing on Delete is not a milder version of the
   problem that was being fixed.

   A hit area cannot be both 44px and non-overlapping while the layout allocates 28px per action, so
   the layout allocates the real thing. On a coarse pointer the control IS 40px, the glyph grows
   with it, and the consumer's own gap separates the boxes. No invisible geometry, and what the
   finger aims at is what the eye sees - which also means a mis-tap is something a person can see
   the reason for. 40 rather than 44 because the box is real and density is paid for on screen:
   with the 6-8px gaps these clusters already use the pitch is 46-48px, clear of the neighbour and
   of every guideline minimum.

   Declared AFTER the size scale rather than inside it: these selectors have the same specificity as
   the ones they override, so source order is what decides. */
@media (pointer: coarse){
  .btn.btn--icon.btn--xs,
  .btn.btn--icon.btn--sm{ width:40px; min-width:40px; height:40px; padding:0; }
  .btn.btn--icon.btn--xs .mp-icon{ width:16px; height:16px; }
  .btn.btn--icon.btn--sm .mp-icon{ width:18px; height:18px; }
}
.btn.btn--icon .btn-label{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  border:0;
  overflow:hidden;
  white-space:nowrap;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
}

/* ---- Menu trigger (.btn--trigger) --------------------------------------- */
/* A button that OWNS a popup, painted while that popup is open.

   THE STATE KEYS ON aria-expanded, NOT ON A CLASS, and that is the whole reason this
   is a token rather than a convention. Any control that opens a panel already has to
   keep that attribute current for assistive technology; hanging the paint on it means
   the visual state cannot drift from the announced one, and no module has to remember
   to toggle a second marker.

   DELIBERATELY NOT is-active. That modifier means "the chosen one of a set" and paints
   the brand gradient - correct for List/Board and for a tab rail, wrong for a menu that
   merely happens to be open. Reading an open dropdown as a selection is how the two
   hand-rolled copies this replaces both ended up inventing their own tint instead:
   .mpdg-tool-btn[aria-expanded="true"] in surfaces-data and .action-menu[open]
   .action-menu-trigger in actions-badges. Same idea, two components that cannot see each
   other, two different tokens. Both now call this.

   Composes with or without seg, so a flush rail segment and a standalone bordered trigger
   reach the same state through the same declaration. The border rule is scoped to a
   trigger that HAS a visible border, so a seg segment - which is border-transparent by
   contract - is not given one back here. */
/* THE CARET, emitted by ButtonRegistry::render() and its JS mirror — never pasted by a view.
   Sits after the label and any view suffix, so a Group button reads “Group · Status ⌄” and the
   affordance stays last where the eye leaves the control. It flips rather than rotating a
   quarter turn: a chevron-down at 180° IS chevron-up, so the open state says “this closes”
   instead of pointing somewhere sideways.

   Not on an icon-only trigger — the registry does not emit one there, because a chevron beside
   a kebab is noise. */
.btn .btn-caret{
  width:10px;height:10px;flex:0 0 10px;margin-left:2px;
  opacity:.7;transition:transform .16s ease;
}
.btn.btn--trigger[aria-expanded="true"] .btn-caret{ transform:rotate(180deg); opacity:1; }
.btn.btn--xs .btn-caret{ width:9px;height:9px;flex:0 0 9px; }

.btn.btn--trigger[aria-expanded="true"]{
  background:var(--mp-hl-12,rgba(0,234,94,.12));
  color:var(--mp-ink-hl-bright,#e5fbee);
}
.btn.btn--trigger[aria-expanded="true"]:not(.btn--seg){
  border-color:var(--mp-hl-32,rgba(0,234,94,.32));
}
.btn.btn--trigger[aria-expanded="true"]:hover{
  background:var(--mp-hl-16,rgba(0,234,94,.16));
  color:var(--mp-ink-hl-bright,#e5fbee);
  transform:none;
  box-shadow:none;
}

/* Full-width - dialog/modal footers, mobile forms. :not([hidden]) is load-bearing: this rule
   ties actions-badges' .btn[hidden]{display:none} on specificity and loads after it, so without
   the guard a hidden block button would paint. Same shape as data-grid.css's band rule. */
.btn.btn--block:not([hidden]){
  display:flex;
  width:100%;
}

/* Sizes (the 1em icon scales with font-size automatically). */
.btn.btn--xs{
  min-height:22px;
  padding:0 7px;
  font-size:var(--mp-fs-2xs,10px);
}
.btn.btn--sm{
  min-height:26px;
  padding:0 9px;
  font-size:var(--mp-fs-xs,11px);
}
.btn.btn--lg{
  min-height:38px;
  padding:0 18px;
  font-size:var(--mp-fs-base,13px);
}

.btn.btn--xl{
  min-height:44px;
  padding:0 22px;
  font-size:var(--mp-fs-md,14px);
}

/* ---- Menu row (.btn--menu) — full-width, left-aligned dropdown row ----- */
/* Borderless, non-uppercase row for dropdown menus: sort / field pickers,
   row-action (kebab) menus and entity-select lists. Composes on an emphasis /
   intent variant — secondary for neutral rows, danger for destructive — and
   overrides the base's centred, uppercase, bordered paint. Single source for
   what mpdg's .mpdg-menu-item and the modules' kebab rows styled bespoke. */
.btn.btn--menu{
  width:100%;
  justify-content:flex-start;
  text-align:left;
  gap:9px;
  min-height:34px;
  padding:7px 9px;
  border:0;
  background:transparent;
  color:var(--mp-ink-item,#dbeafe);
  font-size:var(--mp-fs-base,13px);
  font-weight:var(--mp-fw-bold,700);
  letter-spacing:normal;
  text-transform:none;
}
.btn.btn--menu:hover{ background:var(--mp-fill-07,rgba(255, 255, 255, 0.07)); color:var(--mp-ink-invert,#fff); }
.btn.btn--menu.is-active{ background:var(--mp-hl-12,rgba(0, 234, 94, 0.12)); color:var(--mp-ink-on-hl,#d1fae5); }
.btn.btn--menu.is-active::after{
  content:'';
  margin-left:auto;
  width:15px;
  height:15px;
  flex:0 0 auto;
  background-color:var(--green);
  -webkit-mask:var(--mp-icon-check) center/contain no-repeat;
  mask:var(--mp-icon-check) center/contain no-repeat;
}
.btn.btn--menu.btn--danger{ color:var(--mp-ink-danger-strong,#ffd5de); }
.btn.btn--menu.btn--danger:hover{ color:var(--mp-ink-rose,#ffe2e8); background:var(--mp-red-12,rgba(244,63,94,.12)); }

/* ---- Active / pressed (toggle "on" state) ----------------------------- */
/* A toggle button in its on state (set via opts.active, which also emits
   aria-pressed). Generic and composes with any variant via that variant's own
   --mp-btn-accent (green fallback for secondary / tertiary). Placed after the
   variant rules and qualified with :not(.btn--menu) so it (a) wins the variants'
   own :hover and (b) leaves .btn--menu's check-row is-active untouched. Modules
   needing a bespoke on-colour (e.g. calendar's amber weekend toggle) override
   .btn.is-active at higher specificity. */
.btn.is-active:not(.btn--menu),
.btn.is-active:not(.btn--menu):hover{
  background:color-mix(in srgb, var(--mp-btn-accent, var(--green,var(--mp-link-ink,#00ea5e))) 16%, var(--panel,var(--mp-btn-backing,#0f1729)));
  border-color:color-mix(in srgb, var(--mp-btn-accent, var(--green,var(--mp-link-ink,#00ea5e))) 48%, transparent);
  color:var(--mp-ink-mint,#eafff3);
}

/* Disabled - covers <button disabled>, <a aria-disabled> and an explicit class. */
.btn[disabled],
.btn.is-disabled,
.btn[aria-disabled="true"]{
  opacity:.5;
  cursor:not-allowed;
  pointer-events:none;
}

/* 1.7.6 — Light scheme: the primary (brand-gradient) button keeps its dark #06111d label +
   glyph (same as the dark scheme) but gains a hairline white shadow — a subtle letterpress
   emboss that lifts the dark glyph on the bright gradient. Scoped to html[data-mp-scheme="light"]
   only, so the dark scheme stays byte-identical (no shadow). mp_icon() paints via currentColor
   (dark), so no colour override is needed; the white text-shadow embosses the label and a
   matching white drop-shadow embosses the SVG (text-shadow does not apply to SVG paint). */
html[data-mp-scheme="light"] .btn.btn--primary{
  text-shadow:0 1px 0 rgba(255,255,255,.5);
}
html[data-mp-scheme="light"] .btn.btn--primary .mp-icon{
  filter:drop-shadow(0 1px 0.4px rgba(255,255,255,.5));
}

/* 1.8.6 — Light scheme: the neutral/intent buttons (secondary + danger/success/warning)
   gain a double hairline white emboss on their label and leading glyph — two stacked
   white shadows (a tight 0.5px seat + a 1px lift) that letterpress the dark-accent
   text/icon on the pale fill, matching the primary's emboss but doubled and a touch
   stronger for the softer tints. Scoped to html[data-mp-scheme="light"] so the dark
   scheme stays byte-identical. text-shadow embosses the label; a matching drop-shadow
   embosses the SVG glyph (text-shadow does not apply to SVG paint). */
html[data-mp-scheme="light"] .btn.btn--secondary,
html[data-mp-scheme="light"] .btn.btn--danger,
html[data-mp-scheme="light"] .btn.btn--warning,
html[data-mp-scheme="light"] .btn.btn--success{
  text-shadow:0 0.5px 0 rgba(255,255,255,.75),0 1px 0 rgba(255,255,255,.5);
}
html[data-mp-scheme="light"] .btn.btn--secondary .mp-icon,
html[data-mp-scheme="light"] .btn.btn--danger .mp-icon,
html[data-mp-scheme="light"] .btn.btn--warning .mp-icon,
html[data-mp-scheme="light"] .btn.btn--success .mp-icon{
  filter:drop-shadow(0 0.5px 0.3px rgba(255,255,255,.75)) drop-shadow(0 1px 0.4px rgba(255,255,255,.5));
}

/* ---- Segmented item (.btn--seg) — one flush segment inside .mp-seg-shell ------ */
/* The canonical segmented-control item. Every module view switcher (Tasks/Projects
   List·Board·Chart), tab rail (Mail, File-transfers, Calendar Day·Week·Month) and the
   Tasks personal-scope lenses compose this onto an emphasis variant — tertiary for the
   neutral, transparent-until-hover look that is the Tasks reference — and drop the group
   into a .mp-seg-shell tray (actions-badges), which supplies the 9px bordered shell.
   Idle: transparent, muted label (from the tertiary base). Hover: a slate wash. Active
   (.is-active, set by each module's own toggle JS or aria-current): the brand gradient
   with the canonical #06111d dark glyph. This is the single source the six bespoke
   pill/switcher treatments (.mp-view-pill, .mp-view-seg, the .mpdg-views engine override,
   the mail-service hand-copy and the Tasks inline .mp-scope-tab) collapsed into. */
.btn.btn--seg{
  border-color:transparent;
  background:transparent;
  backdrop-filter:none;
}
/* Geometry only when the caller asks for no size. The seg modifier sits later in this file
   than the size rules and matched at the same specificity, so it silently defeated every one
   of them: seg + xs rendered at seg's 30px. The registry documents sizes as modifiers that
   compose, so make that true rather than leave the docs describing something that cannot
   happen. Scoped with :not() so the default (sizeless) seg keeps its exact 30px box — and no
   seg call on the platform passes a size today, so nothing existing moves. */
.btn.btn--seg:not(.btn--xs):not(.btn--sm):not(.btn--lg):not(.btn--xl){
  height:30px;
  min-height:30px;
  padding:0 11px;
}
.btn.btn--seg .mp-icon{ width:14px; height:14px; }
/* THE GLYPH IS PART OF THE SIZE, and this half was missing. The rule above composes seg with
   every size modifier for HEIGHT, but the icon stayed 14px in all of them — so a 22px xs
   segment carried a glyph two thirds as tall as its own box, next to 10px text. Matching the
   icon-only xs rule's 12px keeps a sized segment proportional. */
.btn.btn--seg.btn--xs .mp-icon{ width:12px; height:12px; }
.btn.btn--seg.btn--sm .mp-icon{ width:13px; height:13px; }
.btn.btn--seg.btn--icon:not(.btn--xs):not(.btn--sm):not(.btn--lg):not(.btn--xl){ width:30px; min-width:30px; height:30px; padding:0; }
.btn.btn--seg:hover{
  background:var(--mp-slate-12,rgba(148,163,184,.12));
  border-color:transparent;
  color:var(--mp-ink-btn,#e5edf8);
  transform:none;
  box-shadow:none;
}
/* Active segment. Placed after the generic .btn.is-active:not(.btn--menu) rule above so
   it wins the equal-specificity tie on source order — the selected segment paints the
   brand gradient, not the generic green pressed-toggle wash. The :hover clause reasserts
   the gradient so neither the base .btn:hover lift nor the toggle hover repaints it. */
.btn.btn--seg.is-active,
.btn.btn--seg.is-active:hover{
  background:var(--grad-brand,linear-gradient(135deg,#00ea5e,#38bdf8));
  border-color:transparent;
  color:#06111d;
  transform:none;
  box-shadow:none;
  filter:none;
}