/* 7.78.0 — Share cards panel (flag audit_share_cards). Scoped to .vj-sc
   inside #vj-ba-root (quiz results) or #vj-bd-sc-host (dashboard, 7.78.1); the page's own rules reset buttons with !important,
   so the few button rules here carry it too. Dark by default, like the
   results page; light when the page is switched to light. */

:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc{--sc-card:#131316;--sc-line:#2A2A2F;--sc-ink:#F5F5F0;--sc-soft:#A8A8A0;--sc-mute:#1C1C21;--sc-ring:#60A5FA;
  font-family:'DM Sans',system-ui,sans-serif!important;color:var(--sc-ink);background:var(--sc-card);border:1.5px solid var(--sc-ring);
  border-radius:20px;padding:24px;margin:28px 0 30px;text-align:left}
:is(#vj-ba-root.vj-light-preview,.vj-bd-light #vj-bd-sc-host) .vj-sc{--sc-card:#FFFFFF;--sc-line:#E5E7EB;--sc-ink:#111827;--sc-soft:#4B5563;--sc-mute:#F3F4F6;--sc-ring:#2563EB}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc *{font-family:inherit}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc .vj-sc-h{font-family:'Plus Jakarta Sans',system-ui,sans-serif!important;font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.2;color:var(--sc-ink)}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc .vj-sc-s{font-size:14px;color:var(--sc-soft);margin-top:4px;line-height:1.45}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc .vj-sc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;margin-top:20px;align-items:start}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc .vj-sc-prev{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;border-radius:18px;background:#fff}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc .vj-sc-scale{position:absolute;left:0;top:0;width:540px;height:540px;transform-origin:0 0}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc .vj-sc-lab{font-size:14px;font-weight:600;color:var(--sc-ink);margin-bottom:10px}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc .vj-sc-note{font-size:12.5px;color:var(--sc-soft);line-height:1.4}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc .vj-sc-col{display:flex;flex-direction:column;gap:18px;min-width:0}

/* Photo row */
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc .vj-sc-photo{display:flex;align-items:center;gap:12px;margin-top:14px;border:1px dashed var(--sc-line);border-radius:14px;padding:12px 14px;background:var(--sc-mute)}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc .vj-sc-av{width:44px;height:44px;border-radius:50%;background:var(--sc-line);flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc .vj-sc-av img{width:100%;height:100%;object-fit:cover;display:block}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc .vj-sc-grow{flex-grow:1;min-width:0;display:flex;flex-direction:column;gap:2px}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc .vj-sc-grow b{font-size:14px;font-weight:600;color:var(--sc-ink)}

/* Buttons */
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc button.vj-sc-btn{background:var(--sc-card)!important;color:var(--sc-ink)!important;border:1px solid var(--sc-line)!important;
  border-radius:12px;padding:12px 16px;font-size:14px;font-weight:600;cursor:pointer;line-height:1.2;white-space:nowrap}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc button.vj-sc-btn:hover{border-color:var(--sc-soft)!important}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc button.vj-sc-btn.is-small{padding:9px 14px}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc button.vj-sc-btn.is-link{background:transparent!important;border:0!important;padding:6px 4px;color:var(--sc-soft)!important;text-decoration:underline;font-weight:500}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc button.vj-sc-li{background:#0A66C2!important;color:#FFFFFF!important;border:0!important;border-radius:12px;padding:14px 18px;font-size:15px;font-weight:700;cursor:pointer;flex-grow:1}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc button.vj-sc-li:hover{background:#004182!important}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc button[disabled]{opacity:.6;cursor:default}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc .vj-sc-actions{display:flex;gap:10px;flex-wrap:wrap}

/* Designs */
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc .vj-sc-thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc button.vj-sc-t{background:transparent!important;border:0!important;padding:0;cursor:pointer;display:flex;flex-direction:column;gap:6px;text-align:left;color:var(--sc-ink)!important;min-width:0}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc .vj-sc-tbox{position:relative;width:100%;aspect-ratio:1/1;border-radius:12px;overflow:hidden;border:1px solid var(--sc-line);background:#fff}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc button.vj-sc-t.is-on .vj-sc-tbox{outline:3px solid var(--sc-ring);outline-offset:1px;border-color:transparent}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc .vj-sc-tl{font-size:12.5px;font-weight:500;line-height:1.3;color:var(--sc-ink)}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc button.vj-sc-t.is-on .vj-sc-tl{font-weight:700}

/* Look */
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc .vj-sc-look{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc .vj-sc-seg{display:flex;background:var(--sc-mute);border-radius:10px;padding:3px}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc button.vj-sc-seg-b{background:transparent!important;border:0!important;color:var(--sc-soft)!important;border-radius:8px;padding:7px 13px;font-size:13px;font-weight:600;cursor:pointer}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc button.vj-sc-seg-b.is-on{background:var(--sc-card)!important;color:var(--sc-ink)!important;box-shadow:0 1px 2px rgba(0,0,0,.15)}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc .vj-sc-dots{display:flex;gap:8px;align-items:center}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc button.vj-sc-dot{width:26px;height:26px;border-radius:50%!important;border:2px solid var(--sc-card)!important;box-shadow:0 0 0 1px var(--sc-line);padding:0;cursor:pointer}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc button.vj-sc-dot.is-on{box-shadow:0 0 0 2px var(--sc-ink)}

/* Score switch */
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc .vj-sc-sw{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--sc-mute);border-radius:12px;padding:10px 14px}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc button.vj-sc-tog{width:46px;height:26px;border-radius:999px!important;background:#6B7280!important;border:0!important;position:relative;cursor:pointer;flex-shrink:0;padding:0}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc button.vj-sc-tog::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .15s}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc button.vj-sc-tog[aria-checked="true"]{background:#2563EB!important}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc button.vj-sc-tog[aria-checked="true"]::after{left:23px}

/* Caption */
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc textarea.vj-sc-cap{box-sizing:border-box;max-width:100%;display:block;width:100%;min-height:104px;resize:vertical;background:var(--sc-mute)!important;color:var(--sc-ink)!important;border:1px solid var(--sc-line)!important;
  border-radius:12px;padding:12px 14px;font-size:14px;line-height:1.55;font-family:'DM Sans',system-ui,sans-serif!important}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc .vj-sc-msg{font-size:13px;color:var(--sc-soft);min-height:18px}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc .vj-sc-msg.is-ok{color:#4ADE80}
:is(#vj-ba-root.vj-light-preview,.vj-bd-light #vj-bd-sc-host) .vj-sc .vj-sc-msg.is-ok{color:#15803D}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc .vj-sc-msg.is-bad{color:#F87171}
:is(#vj-ba-root.vj-light-preview,.vj-bd-light #vj-bd-sc-host) .vj-sc .vj-sc-msg.is-bad{color:#B91C1C}

/* The image is drawn from a copy kept off screen. */
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc-stage{position:fixed;left:-12000px;top:0;width:540px;height:540px;pointer-events:none;z-index:-1}

/* While this is on, the old card column goes (Classic is in the panel)
   and the breakdown takes the full width. */
#vj-ba-root.vj-sc-on #vj-share-card-wrap{display:none!important}
#vj-ba-root.vj-sc-on .vj-breakdown-pair{grid-template-columns:1fr!important}
#vj-ba-root.vj-sc-on #vj-roadmap-wrap{border-right:none!important;padding-right:0!important}

@media (max-width:760px){
  :is(#vj-ba-root,#vj-bd-sc-host) .vj-sc{padding:16px;border-radius:18px;margin:22px 0 26px}
  :is(#vj-ba-root,#vj-bd-sc-host) .vj-sc.has-fixed{margin-bottom:96px}
  :is(#vj-ba-root,#vj-bd-sc-host) .vj-sc .vj-sc-h{font-size:20px}
  :is(#vj-ba-root,#vj-bd-sc-host) .vj-sc .vj-sc-grid{grid-template-columns:1fr;gap:18px}
  :is(#vj-ba-root,#vj-bd-sc-host) .vj-sc .vj-sc-thumbs{display:flex;overflow-x:auto;gap:10px;padding-bottom:4px;scroll-snap-type:x mandatory}
  :is(#vj-ba-root,#vj-bd-sc-host) .vj-sc button.vj-sc-t{flex:0 0 76px;scroll-snap-align:start}
  :is(#vj-ba-root,#vj-bd-sc-host) .vj-sc .vj-sc-bar.is-fixed{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--sc-card);border-top:1px solid var(--sc-line);padding:10px 16px 14px;box-shadow:0 -6px 16px rgba(0,0,0,.12)}
  :is(#vj-ba-root,#vj-bd-sc-host) .vj-sc .vj-sc-bar.is-fixed button.vj-sc-li{width:100%}
}
@media (prefers-reduced-motion:reduce){:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc button.vj-sc-tog::after{transition:none}}

/* 7.84.5 — photo inside the circle (Switch: audit_card_photo): the row under the card. */
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc .vj-sc-pin{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;min-height:38px}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc .vj-sc-pin-t{font-size:13px;line-height:1.35;color:var(--sc-soft)}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc .vj-sc-pin-seg{display:flex;flex-shrink:0;background:var(--sc-mute);border-radius:10px;padding:3px}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc button.vj-sc-pin-b{background:transparent!important;border:0!important;color:var(--sc-soft)!important;border-radius:8px;padding:7px 12px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;min-height:0;box-shadow:none}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc button.vj-sc-pin-b.is-on{background:var(--sc-card)!important;color:var(--sc-ink)!important;box-shadow:0 1px 2px rgba(0,0,0,.15)}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc .vj-sc-prev [data-sc-face]:focus-visible{outline:6px solid #2563EB;outline-offset:4px;border-radius:50%}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc .vj-sc-grid>div:first-child:has(>.vj-sc-pin){justify-content:flex-start!important}

/* 7.89.0 — Share on LinkedIn first (Switch: audit_share_first). The panel gets .vj-sc-sf; nothing here applies without it. */
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc.vj-sc-sf .vj-sc-bar{order:1}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc.vj-sc-sf .vj-sc-actions{order:2}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc.vj-sc-sf .vj-sc-msg{order:3}
/* 7.89.3 — and of the two small buttons, Copy caption comes before Download image. */
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc.vj-sc-sf .vj-sc-actions [data-sc-copy]{order:1}
:is(#vj-ba-root,#vj-bd-sc-host) .vj-sc.vj-sc-sf .vj-sc-actions [data-sc-dl]{order:2}
/* In the dashboard the three sit on one line: there Share takes the first third, the two small buttons the rest. */
.kxq #vj-bd-sc-host .vj-sc.vj-sc-sf .vj-sc-bar{margin-top:auto}
.kxq #vj-bd-sc-host .vj-sc.vj-sc-sf .vj-sc-actions{margin-top:-8px}
@media (min-width:1200px){
  .kxq #vj-bd-sc-host .vj-sc.vj-sc-sf .vj-sc-bar{align-self:flex-start;width:calc((100% - 20px) / 3);margin-top:auto}
  /* a margin, not padding: padding would lie over Share on LinkedIn and take its clicks */
  .kxq #vj-bd-sc-host .vj-sc.vj-sc-sf .vj-sc-actions{margin-top:-68px;padding-right:0;margin-left:calc((100% - 20px) / 3 + 10px)}
}