/* Every button has an icon and a visible background (Dave, 7 Oct 2026, WS-E E1: "These buttons need a background and
   icon so a Storyteller knows that they are button."). The icons come from src/button-style.ts (and ui.ts button());
   this file lays them out and gives a button that was plain text a fill and an outline. The fill and the outline are
   made from the button's own text colour (currentColor), so they follow every palette, text size and contrast mode:
   whatever colour the words are, the outline is that colour at half strength (3:1 or better against the page), and
   the fill is that colour at 8%. A button with its own fill (primary, danger, the carried green) is left as it is. */
.ys-btn-ico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; line-height: 0; }
.ys-btn-ico > svg, button .ys-btn-ico > svg { width: 1.2em; height: 1.2em; min-width: 18px; min-height: 18px; margin: 0; flex: 0 0 auto; display: block; pointer-events: none; }
:is(button, [role="button"], a.button-like)[data-btn-ico]:not([hidden]) { gap: .5em; align-items: center; }
:is(button, [role="button"], a.button-like)[data-btn-ico][data-btn-disp="inline"]:not([hidden]) { display: inline-flex; }
:is(button, [role="button"], a.button-like)[data-btn-ico][data-btn-disp="block"]:not([hidden]) { display: flex; }
:is(button, [role="button"], a.button-like)[data-btn-ico][data-btn-align="center"] { justify-content: center; }
:is(button, [role="button"], a.button-like)[data-btn-ico][data-btn-align="start"] { justify-content: flex-start; text-align: left; }
button[data-btn-ico] > .ys-btn-ico + * { min-width: 0; }

/* A plain-text button gets a button's fill and outline (the four attribute repeats out-rank the palette rules that
   paint these transparent with !important). Hover, focus, pressed and current keep the look they already had. */
html body :is(button, [role="button"], a.button-like)[data-btn-flat][data-btn-flat][data-btn-flat][data-btn-flat]:not([aria-pressed="true"]):not([aria-selected="true"]):not([aria-current]):not(:hover):not(:focus-visible) {
  background-color: color-mix(in srgb, currentColor 8%, transparent) !important;
  border: 1.5px solid color-mix(in srgb, currentColor 50%, transparent) !important;
  text-decoration: none;
}
html body :is(button, [role="button"], a.button-like)[data-btn-flat][data-btn-flat][data-btn-flat][data-btn-flat]:not([data-btn-iconly]) { border-radius: 12px; min-height: 44px; padding-inline: 12px; }
html body :is(button, [role="button"], a.button-like)[data-btn-flat][data-btn-flat][data-btn-flat][data-btn-flat]:is([aria-pressed="true"], [aria-selected="true"], [aria-current], :hover, :focus-visible) {
  border: 1.5px solid currentColor; min-height: 44px;
}
a.button-like { text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; gap: .5em; }