/* ONE button size rule for the new screens (Pro look v2, Headshots hub and My headshots, website journey, Career change v2, LinkedIn kit v2, Studio entries). Documented in docs/PRODUCT.md "Button sizes".
   Loaded LAST on each page. Page scope: the new pages carry class "ssb" on <html>; the LinkedIn kit v2 rules match only .lk2-* so the file is safe in index.html.
   The generic part uses :where() (zero specificity) so a page that already makes a button LARGER keeps its size; the "one thing to do" rule is explicit and wins.
   primary    min height 52, min width 220 (phones: full width up to 420), font 17+ bold, 28px side padding
   large      empty states and one-thing-to-do screens: min height 56, min width 260, centred under the message
   secondary  min height 44, min width 120
   icon       44 x 44          text link used as an action: 44 tall hit area          chips, tabs, pills: 44 tall
   Exceptions (tracked by scripts/button-sizes.mjs): links inside a sentence; Back + primary in a paired sticky footer (primary is the wide one, never under 220). */
:root { --ssb-primary-h: 52px; --ssb-primary-w: 220px; --ssb-large-h: 56px; --ssb-large-w: 260px; --ssb-sec-h: 44px; --ssb-sec-w: 120px; --ssb-icon: 44px; --ssb-pad: 28px; --ssb-ring: #2F7BD6; }

/* primary */
:where(.ssb) .btn-primary:not(.btn-sm), :where(.ssb) .btn.btn-lg { min-height: var(--ssb-primary-h); min-width: var(--ssb-primary-w); font-size: 17px; font-weight: 800; padding-left: var(--ssb-pad); padding-right: var(--ssb-pad); }
:where(.ssb) .btn-primary.btn-sm { min-height: var(--ssb-sec-h); min-width: var(--ssb-sec-w); font-size: 16px; }
/* secondary */
:where(.ssb) .btn:not(.btn-primary) { min-height: var(--ssb-sec-h); min-width: var(--ssb-sec-w); }
/* every real control is at least 44 tall: buttons, chips, pills, tabs, summaries */
:where(.ssb) :is(button, [role="button"], summary, .pill, .chip) { min-height: var(--ssb-sec-h); }
:where(.ssb) :is(.pill, .chip, .lnk) { display: inline-flex; align-items: center; }
.ssb :is(.pill, .chip) { min-height: var(--ssb-sec-h); }   /* real specificity: page rules for small pills (min-height 40) must not win */
/* text links used as actions: a 44px tall hit area (the text stays where it is) */
:where(.ssb) :is(a.logo, a.wz-close, a.terms, a.nv, .stepper a, .wz-steps a, a.lnk, .m-tabs a, a.act, .a > a, .rowlink, .logo a, a.quiet, .nvf a) { display: inline-flex; align-items: center; min-height: var(--ssb-sec-h); }
/* icon-only buttons */
:where(.ssb) :is(.ib, .m-ib, .rm, [aria-label]:is(button)):not(.btn):not(.pill) { min-width: var(--ssb-icon); min-height: var(--ssb-icon); }

/* phones and the iPhone app: a primary button is full width up to 420 (a paired Back + primary footer keeps its own split, see the page CSS) */
@media (max-width: 1099.98px) {
  :where(.ssb) .btn-primary:not(.btn-sm) { width: 100%; max-width: 420px; }
  :where(.ssb) .m-bar .btn-primary, :where(.ssb) .btns .btn-primary { width: auto; max-width: none; }
}
/* the narrowest phones (360 wide): Back plus the primary in a paired footer must fit the screen, so the minimum widths give way there (the UX layout test, scripts/ux-layout.test.mjs, found 6px of sideways scroll) */
@media (max-width: 400px) { :where(.ssb) .m-bar .btns .btn { min-width: 0; } }

/* empty states and "one thing to do" screens: a LARGE primary button, centred under the message */
.ssb :is(.empty, .empty-card, .gate, .boot, .pphoto.empty, .m-photo.empty) .btn-primary, .ssb .btn-xl { min-height: var(--ssb-large-h); min-width: var(--ssb-large-w); font-size: 18px; margin-left: auto; margin-right: auto; }
.ssb :is(.empty, .empty-card, .gate, .boot) { text-align: center; justify-items: center; }
@media (max-width: 1099.98px) { .ssb :is(.empty, .empty-card, .gate, .boot, .pphoto.empty, .m-photo.empty) .btn-primary, .ssb .btn-xl { width: 100%; max-width: 420px; } }

/* pressed and focus states, every button and link-button */
.ssb :is(.btn, button, a.btn):active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(1px) scale(.985); filter: brightness(.93); box-shadow: none; }
.ssb :is(.btn, button, a, summary):focus-visible, .lk2 :is(.lk2-btn, button, a, summary):focus-visible { outline: 3px solid var(--ssb-ring); outline-offset: 3px; }

/* LinkedIn kit v2 (matches only the kit) */
.lk2-btn { min-height: var(--ssb-sec-h); min-width: var(--ssb-sec-w); }
.lk2-btn.lk2-primary { min-height: var(--ssb-primary-h); min-width: var(--ssb-primary-w); font-size: 17px; font-weight: 800; padding-left: var(--ssb-pad); padding-right: var(--ssb-pad); }
.lk2-btn.lk2-sm { min-height: var(--ssb-sec-h); }
.lk2-btn:active:not(:disabled) { transform: translateY(1px) scale(.985); filter: brightness(.93); }
.lk2-m .lk2-btn.lk2-primary { max-width: 420px; }
.lk2-link { display: inline-flex; align-items: center; min-height: var(--ssb-sec-h); }   /* text links used as actions */