/* ============================================================================
   paragraph-feedback.css — the per-block 👍/👎 affordance
   (JTBD-5; docs = help-#203, help + induction = help-#214).

   Shared by the three portals. It was inline in web/docs/index.html while docs was
   the only wired portal; three copies of it would be three places for the touch
   breakpoint or the hover rule to drift, and a hover-only control that silently
   loses its mobile fallback in ONE portal is invisible-by-accident there — the
   worst kind of a11y regression because nothing looks broken.

   It rides on the portals' shared design tokens (--surface / --border / --cta /
   --fs-caption / --s3 / --s4 / --t / --ease …), which all three define in their own
   <style>, so the same rules land on each portal's own palette and dark mode for free.
   `--r-sm` is the one exception, and not in the way it looks: **no** portal defines it, so
   `var(--r-sm, 6px)` has always resolved to the literal. Kept in that form because it is
   what web/docs/index.html shipped, and a portal that later defines the token picks it up
   without touching this file.

   `.fb-blk` wraps ONE reportable block. It sets only `position: relative` — no
   padding, border or overflow — so margin collapsing between sibling blocks stays
   exactly as it was and the page's vertical rhythm doesn't move.

   Desktop: the control sits in the right gutter and appears on hover/focus.
   Narrow viewports have no gutter to sit in, so below 1100px it becomes a normal
   inline row and is ALWAYS visible — a hover-only affordance is unreachable on
   touch, i.e. the feature would simply not exist on a phone.
   ============================================================================ */

.fb-blk { position: relative; }
.fb-ctl {
  display: flex; gap: 2px; align-items: center;
  position: absolute; top: 0; right: -46px;
  opacity: 0; transition: opacity var(--t) var(--ease);
}
.fb-blk:hover .fb-ctl, .fb-ctl:focus-within, .fb-blk.fb-rated .fb-ctl { opacity: 1; }
.fb-btn {
  background: none; border: 1px solid transparent; border-radius: var(--r-sm, 6px);
  cursor: pointer; padding: 2px 4px; line-height: 1; font-size: .85em;
  filter: grayscale(1); opacity: .55; transition: filter var(--t) var(--ease), opacity var(--t) var(--ease);
}
.fb-btn:hover, .fb-btn:focus-visible { filter: none; opacity: 1; background: var(--surface-2); }
.fb-btn.fb-on { filter: none; opacity: 1; border-color: var(--border); background: var(--surface-2); }
.fb-flash { display: block; font-size: var(--fs-caption); color: var(--text-faint); margin-top: 4px; }
.fb-flash-err { color: var(--warning); }
.fb-form {
  margin: var(--s4) 0 var(--s5); padding: var(--s5);
  border: 1px solid var(--border); border-left: 3px solid var(--cta);
  border-radius: var(--r-lg); background: var(--surface-2);
}
.fb-form-title { display: block; font-weight: 700; margin-bottom: 4px; font-size: .95em; }
.fb-form-hint { font-size: var(--fs-caption); color: var(--text-faint); margin: 0 0 var(--s4); }
.fb-ta {
  width: 100%; box-sizing: border-box; font: inherit; font-size: .95em; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm, 6px);
  padding: 8px; resize: vertical;
}
.fb-form-actions { display: flex; gap: var(--s3, 8px); margin-top: var(--s4); }
.fb-submit, .fb-abort {
  font: inherit; font-size: .9em; cursor: pointer; padding: 6px 12px;
  border-radius: var(--r-sm, 6px); border: 1px solid var(--border);
}
.fb-submit { background: var(--cta); color: #fff; border-color: var(--cta); font-weight: 600; }
.fb-submit:hover { background: var(--cta-hover); }
.fb-submit:disabled { opacity: .6; cursor: default; }
.fb-abort { background: var(--surface); color: var(--text-faint); }

/* No gutter below the content max-width + gutter — go inline and stay visible (touch). */
@media (max-width: 1100px) {
  .fb-ctl { position: static; opacity: 1; margin-top: 2px; }
}