/* menu/menu.css: the one floating panel, and the menu bar it hangs from.
   Every floating surface in the suite uses [estilo-menu]: the account
   menu, the switcher, the narrow Menu sheet and every menubar menu.
   A float is rounded and so is a highlight inside it; a menubar title is
   in the page flow, so it is square (the suite's square rule). */
:root {
  --estilo-float-radius: 9px;          /* rastrillo's hard-coded dropdown value, named. PUBLIC */
  --estilo-float-padding: 0.25rem;
  --estilo-item-padding-block: 0.4rem;
  --estilo-item-padding-inline: 0.65rem;
}
[estilo-menu] {
  box-sizing: border-box;
  /* Sized to its rows, not to what it hangs from. Every panel is absolutely
     positioned inside a <details> no wider than its title, and an absolute
     box's shrink-to-fit width is capped by that, so without this a row with
     a shortcut wrapped ("Decrease / indent") inside a menu with room to
     spare. Docs found it on first adoption. */
  inline-size: max-content;
  min-inline-size: 12rem;
  max-inline-size: min(22rem, calc(100vw - 1rem));
  /* The 8rem floor is for short frames, where the viewport maths alone can
     leave a panel a few pixels tall: an overflowing menu can be scrolled,
     an invisible one cannot. */
  max-block-size: max(calc(100dvh - var(--estilo-bar-block-size, 3.25rem) - 1rem), 8rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--estilo-float-padding);
  background: var(--rst-surface);
  color: var(--rst-text);
  border: 1px solid var(--rst-line);
  border-radius: var(--estilo-float-radius);
  box-shadow: var(--rst-shadow-pop);
  font-size: var(--rst-fs-sm);
  text-align: start;
  z-index: 30;
}
[estilo-menu~="sheet"] {
  position: absolute;
  inset-inline: 0.5rem;
  inset-block-start: calc(100% + 4px);
  inline-size: auto;
  max-inline-size: none;
}
[estilo-menu] form { margin: 0; }
[estilo-menu-item] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-sizing: border-box;
  inline-size: 100%;
  min-block-size: 2rem;
  padding: var(--estilo-item-padding-block) var(--estilo-item-padding-inline);
  border: 0;
  border-radius: var(--rst-radius-sm);   /* inset and rounded: inside a float */
  background: none;
  color: var(--rst-text);
  font: inherit;
  text-align: start;
  text-decoration: none;
  cursor: pointer;
}
[estilo-menu-item]:hover,
[estilo-menu-item]:focus-visible { background: var(--rst-accent-soft); }
[estilo-menu-item]:focus-visible { outline: 2px solid var(--rst-accent); outline-offset: -2px; }
/* A destructive row: the negative tone, and its own tint on hover. The
   label says what it does; the tone says it is the one to read twice. */
[estilo-menu-item~="danger"] { color: var(--rst-tone-negative-fg); }
[estilo-menu-item~="danger"]:hover, [estilo-menu-item~="danger"]:focus-visible { background: var(--rst-tone-negative-bg); }
[estilo-menu-item][aria-disabled="true"],
[estilo-menu-item]:disabled {
  color: var(--rst-text-faint);
  background: none;
  cursor: default;
}
[estilo-menu-check] {
  display: inline-flex;
  flex: none;
  inline-size: 1rem;
  block-size: 1rem;
  visibility: hidden;
  color: var(--rst-accent);
}
[estilo-menu-check] svg { inline-size: 100%; block-size: 100%; }
[estilo-menu-item][aria-pressed="true"] [estilo-menu-check],
[estilo-menu-item][aria-current] [estilo-menu-check] { visibility: visible; }
[estilo-menu-label] { flex: 1 1 auto; min-inline-size: 0; }
[estilo-menu-key] {
  flex: none;
  margin-inline-start: auto;
  padding-inline-start: 1.5rem;
  color: var(--rst-text-muted);
  font: inherit;
  font-size: var(--rst-fs-xs);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
[estilo-menu] hr {
  border: 0;
  border-block-start: 1px solid var(--rst-line);
  margin: 0.25rem 0;
}
[estilo-menu-heading] {
  margin: 0;
  padding: 0.5rem var(--estilo-item-padding-inline) 0.25rem;
  color: var(--rst-text-muted);
  font-size: var(--rst-fs-xs);
  font-weight: 600;   /* no text-transform */
}

/* The document menu bar: File, Edit, View... Titles are in the page flow,
   so their highlight is square. Every title joins the one top-level
   exclusivity group, name="estilo-menus", with the bar's own triggers. */
[estilo-menubar] { display: flex; flex-wrap: wrap; align-items: stretch; min-block-size: 2rem; }
[estilo-menubar-menu] { position: relative; }
[estilo-menubar-menu] > [estilo-menu] {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: calc(100% + 2px);
}
[estilo-menubar-title] {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  block-size: 100%;
  min-block-size: 2rem;
  padding-inline: 0.6rem;
  border-radius: 0;          /* square: in-flow */
  color: var(--rst-text);
  font-size: var(--rst-fs-sm);
  white-space: nowrap;
  list-style: none;
  cursor: default;
  user-select: none;
}
[estilo-menubar-title]::-webkit-details-marker { display: none; }
[estilo-menubar-title]::marker { content: ""; }
[estilo-menubar-title]:hover { background: var(--rst-surface-2); }
[open] > [estilo-menubar-title] { background: var(--rst-accent-soft); }
[estilo-menubar-title]:focus-visible { outline: 2px solid var(--rst-accent); outline-offset: -2px; }
/* A panel hung from a title near the inline end overflows a phone, so
   below 30rem every menubar panel spans the viewport instead. */
@media (max-width: 30rem) {
  [estilo-menubar-menu] { position: static; }
  [estilo-menubar] { position: relative; }
  [estilo-menubar-menu] > [estilo-menu] { inset-inline: 0.5rem; inline-size: auto; min-inline-size: 0; max-inline-size: none; }
}