/* Sharing (test-ai.js, shareMenu / shareRow): the test or your result. Loaded on every page of the test, next to
   its own stylesheet, so it only uses its own classes (.shr…) and the colours the page already uses. */
.shr{position:relative;display:inline-flex}
.shr svg,.shr__menu svg{display:block;width:18px;height:18px;flex:none}
.shr__btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer}

/* the menu under the button (a computer; a phone opens its own share sheet), placed by share.js */
.shr__menu{position:fixed;z-index:1000;width:260px;max-width:calc(100vw - 16px);padding:8px;background:#fff;color:#0e0c0c;border:1px solid rgba(14,12,12,.14);border-radius:8px;box-shadow:0 12px 32px rgba(14,12,12,.18);text-align:left}
.shr__menu a,.shr__menu button{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:10px 12px;border:0;border-radius:6px;background:none;color:inherit;font:500 15px/1.2 Inter,system-ui,sans-serif;text-decoration:none;cursor:pointer}
.shr__menu a:hover,.shr__menu button:hover,.shr__menu a:focus-visible,.shr__menu button:focus-visible{background:#f3efe6;outline:none}
.shr__menu a::after{display:none}
.shr__status{margin:4px 12px 4px;font-size:13px;line-height:1.35;color:#5b49c4}
.shr__status:empty{display:none}

/* the targets in a row of the page's own buttons (the share section under your result) */
.shr-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:var(--sp-3,24px) 0 0}
.shr-row > *{display:inline-flex;flex-direction:row;align-items:center;gap:10px}
.shr-row svg{display:block;width:18px;height:18px;flex:none}
.shr-row + .shr__status{margin:12px 0 0;color:inherit}
.shr-also{margin:var(--sp-3,24px) 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.shr-also .shr__btn{font:inherit;font-weight:500}

/* in the header of the test's pages: after the menu, before the phone's menu button; on a phone only the icon */
.nav .wrap > nav{margin-left:auto}
.shr-nav{margin-left:28px}
/* ta sama wysokość co przełącznik PL / EN obok: linia 16 + padding 8 + ramka 1,5 */
.shr-nav .shr__btn{padding:8px 14px;border:1.5px solid var(--h-fg,#fff);border-radius:0;background:none;color:var(--h-fg,#fff);font:700 13px/16px Inter,system-ui,sans-serif;letter-spacing:.03em}
.shr-nav .shr__btn:hover{background:var(--h-fg,#fff);color:var(--ink,#0e0e0e)}
.shr-nav .shr__btn:focus-visible{outline:2px solid var(--h-fg,#fff);outline-offset:3px}
.shr-nav .shr__btn svg{width:16px;height:16px}
@media (max-width:640px){
  .shr-nav{margin:0 4px 0 0}
  .shr-nav .shr__btn{width:44px;height:44px;min-height:0;padding:0;justify-content:center;border:0}
  .shr-nav .shr__btn:hover{background:none;color:var(--h-fg,#fff)}
  .shr-nav .shr__btn svg{width:22px;height:22px}
  .shr-nav .shr__btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

@media (max-width:640px){
  .shr-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .shr-row > *{justify-content:center;width:100%;min-width:0;padding-inline:12px}
  .shr-row > :first-child{grid-column:1/-1}
}