/* Kebab menu component — trigger + popover shell + optional action list.
   Public API (variables only; set them on any ancestor, never re-declare
   properties or re-style .kebab* from a page sheet — rake lint:hig):
     --kebab-trigger-min-width (24px) / --kebab-trigger-min-height (24px)
     --kebab-trigger-color (--text-soft)
     --kebab-trigger-display (grid; set to none to hide an instance from a page context)
     --kebab-pop-min-width (11rem)
     --kebab-action-color (--text)
     --kebab-divider-color (--rule)
   The trigger itself is also overridable via the partial's ERB locals
   (trigger_class/trigger_icon/trigger_text/trigger_id) for a caller that
   isn't an icon-only ⋮, e.g. the recipe page's labeled Share button.
   Collaborators: components/_kebab_menu.html.erb, popover_controller.js.
   State ladder: docs/wiki/style.md § The state ladder. */

.kebab__trigger {
  flex-shrink: 0;
  background: none;
  border: 0;
  padding: 0.4rem 0.3rem;
  margin: 0;
  color: var(--kebab-trigger-color, var(--text-soft));
  cursor: pointer;
  display: var(--kebab-trigger-display, grid);
  place-items: center;
  border-radius: var(--radius-sm);
  min-width: var(--kebab-trigger-min-width, 24px);
  min-height: var(--kebab-trigger-min-height, 24px);
  transition: color var(--duration-normal), background var(--duration-normal);
}
/* Fatten the :more dots (round-cap h.01 paths — dot diameter IS the stroke width). */
.kebab__trigger svg { width: 18px; height: 18px; display: block; stroke-width: 2.6; }
@media (any-hover: hover) {
  .kebab__trigger:hover { color: var(--text); background: var(--surface-alt); }
}
.kebab__trigger:active { color: var(--text); background: var(--surface-alt); }
/* Open-state rung (#3166): keyed off the popover's real state — popovertarget
   exposes expanded-state to AT implicitly but reflects NO DOM attribute, so
   [aria-expanded] never matches here (verified in-browser). */
[popovertarget]:has(+ .kebab__pop:popover-open) { color: var(--text); background: var(--surface-alt); }
.btn-ghost[popovertarget]:has(+ .kebab__pop:popover-open) { color: var(--red); background: var(--hover-bg); }
.kebab__trigger:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }

/* Native popover: override the UA centered default (position:fixed; inset:0;
   margin:auto). popover_controller places it beside the trigger. */
.kebab__pop {
  position: fixed;
  inset: auto;
  margin: 0;
  min-width: var(--kebab-pop-min-width, 11rem);
  /* #4566: popover_controller publishes the room on the side this box grows
     into. Not a public knob — it is written inline per open, and a page sheet
     setting it would be overridden on the next one. Note min-width outranks
     max-width in CSS, so a floor above the roomier side's room (always at least
     half the viewport) still overhangs; 11rem clears it above ~412px. */
  max-width: var(--popover-inline-room, none);
  padding: 0.3rem;
  background: var(--content-card-bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-popover);
  font-family: var(--font-body);
  /* popover_controller caps max-height to the available side; scroll fallback. */
  overflow-y: auto;
  /* Exit (#4268): closed state below is the transition target; allow-discrete
     keeps the popover rendered until the fade lands. The entrance stays
     keyframe-owned (bloop, on :popover-open) — display:none → open renders
     instantly at the open values, so this transition only fires on close. */
  opacity: 0;
  transform: scale(0.96);
  transition:
    opacity var(--duration-fast) ease,
    transform var(--duration-fast) ease,
    overlay var(--duration-fast) ease allow-discrete,
    display var(--duration-fast) ease allow-discrete;
}

/* In-place appearance = the canonical bloop (docs/wiki/style.md § Bloops). */
.kebab__pop:popover-open {
  opacity: 1;
  transform: none;
  animation: bloop var(--duration-bloop) var(--ease-bloop);
}

.kebab__action {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.6rem;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--kebab-action-color, var(--text));
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.kebab__action svg { width: 15px; height: 15px; flex-shrink: 0; }
@media (any-hover: hover) {
  .kebab__action:hover:not(:disabled) { background: var(--surface-alt); }
  .kebab__action--danger:hover:not(:disabled) { background: var(--red-light); }
}
.kebab__action:active:not(:disabled) { background: var(--surface-alt); }
.kebab__action--danger:active:not(:disabled) { background: var(--red-light); }
.kebab__action:focus-visible { outline: var(--focus-ring); outline-offset: calc(-1 * var(--focus-ring-offset)); }
.kebab__action--danger { --kebab-action-color: var(--danger); }

/* Disabled menu item (#4175 introduces the app's first: Optional while a
   sub-row is engaged, Add-a-substitute at the branch cap). .kebab__action is
   not .btn-icon-round, so it inherits none of base.css's disabled treatment
   and without this a dead item is pixel-identical to a live one — the cap's
   only other cue is a hover-only title=, invisible on touch. Values match
   .mirabel__option:disabled, the design system's other text-bearing disabled
   control; the hover/active rules above are gated so the item also stops
   lighting up under the finger. */
.kebab__action:disabled { opacity: 0.55; cursor: default; }

/* Checkable menu-item state (#4175's Optional item; state itself wired by
   document_editor_controller in Task 4). visibility, not display: none, so
   the label stays aligned with checked siblings — the icon reserves its
   layout box either way. */
.kebab__action[aria-pressed="false"] svg { visibility: hidden; }

/* Same convention for a checkable LINK — a one-of-N navigation menu, where
   aria-current is the correct attribute and aria-pressed would be invalid on an
   anchor. Keyed on the "false" value rather than on absence, so a plain action
   link carrying its own icon and no aria-current is untouched. */
.kebab__action[aria-current="false"] svg { visibility: hidden; }

/* Pending-imports popover row host/age (Task 12). .kebab__action is a flex
   row, not a column — same shape as .draft-menu-age in base.css (#4178), so
   this rides the row as a right-aligned trailing span rather than "display:
   block", which would stay a flex item and sit inline, not stack. */
.capture-menu-age {
  margin-left: auto;
  padding-left: 0.75rem;
  color: var(--text-soft);
  font-size: 0.8rem;
  white-space: nowrap;
}

/* Divider between grouped bespoke-content sections (e.g. the recipes index
   Continue Draft popover's new-recipe/edit-drafts split). */
.kebab__divider {
  border: 0;
  border-top: 1px solid var(--kebab-divider-color, var(--rule));
  margin: 0.3rem 0;
}

/* Interactive chrome — never useful on paper. */
@media print {
  .kebab__trigger, .kebab__pop { display: none !important; }
}