/* =====================================================================================================
   yfile — bridges.css.  Lift step 5 (BRIDGES): the notice surface a stubbed seam shows.

   WHY A FILE AND NOT A STYLE ATTRIBUTE. index.html carries no inline script and no inline style so that
   step 7's `style-src 'self'` needs no exception, and a `<style>` element injected by bridges.js would
   be exactly such an exception. A real stylesheet costs one <link> and keeps that promise intact.

   AUTHORS NO COLOUR. Every value below is either a token tokens.css §3 already derived from the golden
   ratio (palette.py) or a geometric consequence of one. The 11 inherited tokens are untouched, and no
   new hue, grey or alpha is introduced — --yf-panel, --yf-ctl-ink, --yf-dim, --yf-ctl-edge, --yf-accent2
   and the --yf-s* measure scale are the whole palette of this sheet.

   WHY THE NOTICE IS A BOX AND NOT ONLY A LIVE REGION. The shell already owns #yfSay, which is `.yf-sr`
   — clipped to 1x1 and announced, invisible. A stub that only wrote there would be inaudible to a
   sighted person and would read, on screen, exactly like a feature that silently worked. So a stub
   writes BOTH: #yfSay for the screen reader, and this box for the eyes. bridges.js does not duplicate
   the aria-live on the individual notice, because the container carries it.
   ===================================================================================================== */

.yf-notes {
  position: fixed;
  z-index: 60;                                   /* above .yf-results (40); below a <dialog> top layer, which is the browser's to own */
  inset-block-end: calc(var(--yf-s2) + var(--sab));
  inset-inline-end: var(--yf-s2);
  inline-size: min(30.889rem, calc(100vw - var(--yf-s2) * 2));
  display: flex;
  flex-direction: column;
  gap: var(--yf-s0);
  pointer-events: none;                          /* the page underneath stays usable while a notice is up */
}

.yf-note {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--yf-s1);
  padding: var(--yf-s1) var(--yf-s1) var(--yf-s1) var(--yf-s2);
  background: var(--yf-panel);
  color: var(--yf-ctl-ink);
  border: 1px solid var(--yf-ctl-edge);
  /* The one piece of emphasis: a 3px rule in the shell's own accent, on the inline start. It marks the
     notice as the app speaking rather than content, without inventing a "warning colour" the palette
     does not define. */
  border-inline-start: 3px solid var(--yf-accent2);
  border-radius: var(--yf-r1);
  box-shadow: 0 var(--yf-s2) var(--yf-s3) calc(var(--yf-s1) * -1) rgb(0 0 0 / .3819);   /* alpha ladder step 2 */
}

.yf-note__t {
  margin: 0;
  flex: 1 1 auto;
  min-inline-size: 0;
  font-size: var(--yf-fs);
  line-height: 1.382;                            /* 1 + (1 - 0.618) x 1.618 rounded to the ladder's own family */
  overflow-wrap: anywhere;                       /* a notice may quote a file name the person chose */
}

.yf-note__x {
  flex: 0 0 auto;
  inline-size: var(--ytx-tap-ico, 32px);
  block-size: var(--ytx-tap-ico, 32px);
  display: grid;
  place-items: center;
  font: inherit;
  font-size: calc(var(--yf-fs) * 1.272);         /* the multiplication glyph is small for its em box */
  line-height: 1;
  color: var(--yf-dim);
  background: none;
  border: 0;
  border-radius: var(--yf-r1);
  cursor: pointer;
}
.yf-note__x:hover { background: var(--yf-ctl-hov); color: var(--yf-ctl-ink); }
.yf-note__x:focus-visible { outline: 2px solid var(--yf-focus); outline-offset: 2px; }

/* THE FLOOR, NOT THE CEILING — the same correction tokens.css §3 records for the toolbar controls.
   min-, so a dismiss button is free to grow past 36px and never pinned at 44px. */
@media (pointer: coarse) {
  .yf-note__x { min-inline-size: var(--ytx-tap, 36px); min-block-size: var(--ytx-tap, 36px); }
}

@media (max-width: 640px) {
  .yf-notes { inset-inline: var(--yf-s1); inline-size: auto; }
}