/* 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; }

/* ---- Button text always fits (Dave, 13 Oct 2026; AAA, large text sizes) ----
   style.css gave every button `overflow-wrap: anywhere`, which lets a squeezed button break INSIDE a word ("Ad / d",
   "Stor / y", "ope / n to edit"). A label now breaks only between words, and a button is never narrower than its
   longest word: it grows, or wraps at a word boundary, instead. */
html body :is(button, .filebutton, [role="button"], a.button-like, summary) { overflow-wrap: normal; word-break: normal; hyphens: manual; }
/* Zero specificity on purpose: components that set nowrap, min-width: 0 or a max-width of their own (file segments, the quick bar,
   the header's Open button) keep winning. */
:where(button, .filebutton, [role="button"], a.button-like, summary) { min-inline-size: min-content; }
:where(button, .filebutton, [role="button"], a.button-like) { white-space: normal; max-inline-size: 100%; }
/* The video recorder's Start / Switch camera sit in the window, below the picture, never over it or each other. */
dialog.ys-video .ys-vdock { position: static; }
/* The Contents cards ("Contents of …", carried app.js): the kind ("Story · open to edit") sits UNDER the title, not in a squeezed side column. */
.linked-list72 button { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; justify-items: start; gap: 3px; width: 100%; box-sizing: border-box; height: auto; }
.linked-list72 button > span, .linked-list72 button > small { display: block; min-width: 0; overflow-wrap: normal; word-break: normal; text-align: start; }
/* Add a photo / Add a link / Add a file: one line; they wrap only when the screen is narrow or the text is large. */
.sb-add-media { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 8px; }
.sb-add-media:has(.sb-photo-form, .ys-ax-form) { display: grid; }
.sb-add-media .ys-ax-control { margin: 0; }
.sb-add-media .sb-photo-control, .sb-add-media .ys-ax-control { flex: 0 1 auto; max-inline-size: 100%; }
.ys-media-add > button, .ys-ax-add > button, .sb-add-media button { flex: 0 0 auto; max-inline-size: 100%; }
/* The home page at a very large text size (settings.ts sets html[data-ys-text="large"] from 150 %): the book picture and the
   three start buttons stack in one column, so no button is squeezed to a sliver. */
#welcome39 :is(nav[aria-label="Welcome navigation"] > button, .home-quick47 > button, .welcome-action39) { min-inline-size: min-content; }
html[data-ys-text="large"] #welcome39 .home-hero48 { display: flex; flex-direction: column; }
html[data-ys-text="large"] #welcome39 .home-hero48 .home-quick47 { grid-template-rows: none !important; grid-column: auto; grid-row: auto; }
html[data-ys-text="large"] #welcome39 .home-hero48 .home-task-status57 { grid-column: auto; grid-row: auto; }
html[data-ys-text="large"] #welcome39 .home-quick47 > button { height: auto; min-height: 56px; }