.sis-feedback{margin:20px 0;clear:both}
.sis-feedback-trigger{font:inherit}
.sis-feedback-panel[hidden]{display:none}
.sis-feedback-panel{margin-top:10px;padding:16px;border:1px solid #e5e7eb;border-radius:10px;background:#fff;max-width:560px}

/* Per-image "feedback" preset action (Portfolio/Image Landing Page card
   Feedback button -- see SIS_Portfolio_Renderer::feedback_action_markup()
   and SIS_Portfolio_Share_Actions_Renderer::feedback_button_and_panel()).
   The trigger button itself is a normal .sis-action inside the card's own
   action row/grid and is styled entirely by that system (action_style,
   icon-only, spacing); only the collapsible panel below it needs its own,
   narrower rules so it never overflows a card or the page canvas. */
.sis-feedback--card{display:block;margin:8px 0 0;clear:none;max-width:100%}
/* Inside a card's action row (.sis-actions / .sis-share-actions -- a flex row
   in which every other action button is itself a direct flex item), THIS
   wrapper, not the trigger button, is the flex item standing in for the
   Feedback button. So the wrapper's own box is what has to line up with
   "View Full Size" and its other siblings, and two things above stopped it
   from doing that:

   1. margin:8px 0 0 -- a flex item's own top margin offsets it from the row's
      cross-start edge, pushing the Feedback button exactly 8px below every
      button beside it. The wrapper needs no margin of its own in a row: the
      row already spaces its items with .sis-actions' own `gap`, which is
      where Feedback's spacing must come from too, so it stays identical to
      the spacing between every other pair of buttons.
   2. display:block -- the trigger is an inline-flex .sis-action, so a block
      wrapper puts it on an anonymous line box, where the strut's line-height
      and its vertical-align:middle baseline (not the wrapper's top edge)
      decide where the button actually lands. Whenever the inherited
      line-height is taller than the button (the Hyperlinks action style, or
      any theme with a roomy body line-height), that adds a further few px of
      drift on top of the margin -- and it is exactly the inline-block
      baseline behavior Safari/WebKit is most likely to round differently
      from Blink.

   Making the wrapper a column flex box removes the line box entirely (the
   trigger's top edge is now the wrapper's top edge, so it aligns with its
   siblings' top edges by construction) while keeping the panel stacked below
   the trigger exactly as block layout did. align-items:flex-start keeps the
   trigger at its natural width; the panel opts back into full-wrapper width
   below so its own layout is unchanged. */
.sis-actions .sis-feedback--card,
.sis-share-actions .sis-feedback--card{display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;margin:0}
/* Lets the trigger fill the wrapper's stretched height so its bottom edge
   tracks the row's other buttons (which each stretch via .sis-action's own
   align-self:stretch) instead of stopping short whenever some control makes
   the row taller than one button. */
.sis-actions .sis-feedback--card > .sis-action,
.sis-share-actions .sis-feedback--card > .sis-action{flex:1 0 auto}
.sis-actions .sis-feedback--card > .sis-feedback-panel,
.sis-share-actions .sis-feedback--card > .sis-feedback-panel{align-self:stretch}
.sis-feedback-panel--card{max-width:100%;box-sizing:border-box}
.sis-feedback-panel--card .sis-feedback-field textarea,
.sis-feedback-panel--card .sis-feedback-field input[type=email]{max-width:100%}
.sis-feedback-prompt{margin-top:0}
.sis-feedback-categories{border:0;margin:0 0 12px;padding:0}
.sis-feedback-categories legend{font-weight:600;padding:0 0 6px}
.sis-feedback-category{display:block;margin:4px 0}
.sis-feedback-other-explanation{display:none;margin:6px 0 10px 24px}
.sis-feedback-other-explanation.is-visible{display:block}
.sis-feedback-field{margin:0 0 12px}
.sis-feedback-field label{display:block;font-weight:600;margin-bottom:4px}
.sis-feedback-field textarea,.sis-feedback-field input[type=email]{width:100%;max-width:480px}
.sis-feedback-privacy-notice{font-size:.85rem;color:#4b5563}
.sis-feedback-actions{margin-top:14px}
.sis-feedback-honeypot{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.sis-feedback-notice{margin:0 0 16px;padding:10px 14px;border-radius:8px;background:#ecfdf5;border:1px solid #059669;color:#065f46}
.sis-feedback-notice[data-type="error"]{background:#fef2f2;border-color:#b91c1c;color:#7f1d1d}
.sis-feedback-form :focus-visible{outline:3px solid #2271b1;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.sis-feedback-panel{transition:none}}