/* ═══════════════════════════════════════════════════════════════════════════
   linkedin-share.css  —  "Share on LinkedIn" panel and share flow
   ───────────────────────────────────────────────────────────────────────────
   Chrome only. Every rule this component uses now lives in this file. Until
   2026-09-02 the share graphics were drawn at runtime and carried a SECOND
   stylesheet, as a string inside linkedin-share.js injected on first open,
   because the PNG exporter had to read that CSS back as text and inline it into
   the SVG it rasterised. Movember supplied finished artwork, so the exporter
   and that injected stylesheet are both gone.

   Every content size is calc(Npx * var(--fs-scale)) so the module's
   accessibility "Text size" control moves this component with everything else.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══ 1 · THE PANEL ON SCREEN 48 ═══
   Treatment B from the proof of concept: a black photocopy panel that asks for
   the share rather than waiting to be found. Sized to --measure so its edges
   line up with the body copy and the resources list above it. */

.li-panel {
  max-width: var(--measure);
  margin: var(--sp-6) 0 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--mim-black);
  isolation: isolate;
}
/* The photocopy texture comes from the module's own --tex-photocopy-black
   token (mim-gp-shared.css), so the SCORM packager rewrites its path along with
   every other module asset and nothing extra has to be registered.

   It used to be set from JavaScript out of the share flow's assets file, which
   meant merely MOUNTING this panel on screen entry pulled ~1 MB down to paint a
   background. If the token is ever missing the panel is flat black, which is a
   legitimate Men in Mind surface rather than a broken one. */
.li-panel__tex {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--tex-photocopy-black);
  background-size: cover;
  background-position: center;
  opacity: 0.5;
  pointer-events: none;
}
.li-panel__in {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
  padding: 26px 28px;
}
.li-panel__copy { flex: 1 1 320px; min-width: 0; }
.li-panel__title {
  font-family: var(--font-primary);
  font-weight: var(--weight-bold);
  font-size: calc(20px * var(--fs-scale));
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--mim-white);
  margin: 0 0 8px;
}
.li-panel__lead {
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  font-size: calc(15px * var(--fs-scale));
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  max-width: 46ch;
}

.li-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--mim-purple);
  color: var(--mim-black);
  font-family: var(--font-primary);
  font-weight: var(--weight-bold);
  font-size: calc(15px * var(--fs-scale));
  line-height: 1.2;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.li-btn svg { width: 18px; height: 18px; flex: none; }
.li-btn:hover { transform: translateY(-1px); background: #C9BAFF; }
.li-btn:focus-visible { outline: 3px solid var(--mim-white); outline-offset: 3px; }
.li-btn--ghost {
  background: transparent;
  color: var(--mim-white);
  border-color: rgba(255, 255, 255, 0.4);
}
.li-btn--ghost:hover { background: rgba(255, 255, 255, 0.1); }

/* ═══ 2 · THE SHARE FLOW MODAL ═══ */

.li-modal {
  position: fixed;
  inset: 0;
  z-index: 220;              /* above .mail-modal (210) — either can be open */
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.72);
  padding: 24px;
}
.li-modal.open { display: flex; animation: fadeIn 200ms var(--ease-standard); }
.li-modal__inner {
  position: relative;
  background: var(--mim-white);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 1180px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 36px 36px 30px;
  animation: screenIn 240ms var(--ease-standard);
}
.li-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--mim-grey-light);
  border: none;
  cursor: pointer;
  color: var(--fg-muted);
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.li-modal__close:hover { background: var(--mim-purple); color: var(--mim-black); }
.li-modal__title {
  font-family: var(--font-feature);
  font-size: calc(26px * var(--fs-scale));
  line-height: 1.2;
  color: var(--fg);
  margin: 0 40px 8px 0;
}
.li-modal__lead {
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  font-size: calc(15px * var(--fs-scale));
  line-height: 1.55;
  color: var(--fg-muted);
  margin: 0 0 24px;
  max-width: 70ch;
}

.li-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: 32px;
  align-items: start;
}

/* ── steps ── */
.li-step { border-top: 1px solid var(--border); padding-top: 18px; margin-bottom: 26px; }
.li-step:first-child { border-top: 0; padding-top: 0; }
.li-step__h { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.li-step__n {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--mim-black);
  color: var(--mim-white);
  font-family: var(--font-primary);
  font-weight: var(--weight-bold);
  font-size: calc(13px * var(--fs-scale));
  display: inline-flex; align-items: center; justify-content: center;
  align-self: center;
}
.li-step__t {
  font-family: var(--font-primary);
  font-weight: var(--weight-semibold);
  font-size: calc(17px * var(--fs-scale));
  color: var(--fg);
  margin: 0;
}
.li-step__d {
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  font-size: calc(13px * var(--fs-scale));
  color: var(--fg-subtle);
  margin-left: auto;
}

/* ── message chooser ── */
.li-copies { display: grid; gap: 8px; }
.li-copy {
  display: block;
  width: 100%;
  text-align: left;
  padding: 13px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  cursor: pointer;
  font-family: var(--font-primary);
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.li-copy:hover { border-color: var(--mim-purple-aa); }
.li-copy:focus-visible { outline: 3px solid var(--mim-purple-aa-dark); outline-offset: 2px; }
.li-copy.is-on { border: 2px solid var(--mim-purple-aa); background: rgba(183, 163, 252, 0.10); padding: 12px 15px; }
.li-copy__t {
  display: block;
  font-weight: var(--weight-semibold);
  font-size: calc(15px * var(--fs-scale));
  color: var(--fg);
}
.li-copy__g {
  display: inline-block;
  margin-top: 5px;
  font-weight: var(--weight-bold);
  font-size: calc(11px * var(--fs-scale));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mim-purple-aa-dark);
}

.li-subrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
}
.li-chk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  font-size: calc(14px * var(--fs-scale));
  color: var(--fg-muted);
  cursor: pointer;
}
.li-chk input { width: 16px; height: 16px; accent-color: var(--mim-purple-aa); cursor: pointer; }
.li-chk:focus-within { outline: 3px solid var(--mim-purple-aa-dark); outline-offset: 3px; border-radius: var(--radius-sm); }
.li-pill {
  padding: 7px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--bg);
  font-family: var(--font-primary);
  font-weight: var(--weight-semibold);
  font-size: calc(13px * var(--fs-scale));
  color: var(--fg-muted);
  cursor: pointer;
}
.li-pill[aria-pressed="true"] { background: var(--mim-black); color: var(--mim-white); border-color: var(--mim-black); }
.li-pill:focus-visible { outline: 3px solid var(--mim-purple-aa-dark); outline-offset: 2px; }

.li-editwrap { display: none; margin-top: 12px; }
.li-editwrap.is-on { display: block; }
.li-editwrap textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 190px;
  resize: vertical;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  font-size: calc(14px * var(--fs-scale));
  line-height: 1.6;
  color: var(--fg);
}
.li-editwrap textarea:focus { border-color: var(--mim-purple-aa); outline: none; box-shadow: 0 0 0 3px rgba(183, 163, 252, 0.3); }

/* ── graphic chooser ── */
.li-imgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.li-img {
  padding: 0;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  cursor: pointer;
  overflow: hidden;
  text-align: left;
}
.li-img:hover { border-color: var(--mim-purple-aa); }
.li-img:focus-visible { outline: 3px solid var(--mim-purple-aa-dark); outline-offset: 2px; }
.li-img.is-on { border: 2px solid var(--mim-purple-aa); }
/* Each thumbnail holds the real supplied JPEG, scaled by the browser, so what
   the learner picks is exactly the file they download.

   4/5 is the artwork's own 1500x1875 ratio and LinkedIn's tallest feed format,
   so the tile is a true preview rather than a crop. object-fit:cover is
   deliberately NOT used: it would silently trim the artwork's badges, and a
   thumbnail that hides the accreditation mark is worse than a short one.

   display:block is load-bearing, not tidiness: these are <span> elements, and
   on an inline box width:100% does nothing at all. */
.li-img__box { display: block; position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--mim-grey-light); }
.li-img__box img { display: block; width: 100%; height: 100%; object-fit: contain; }
.li-img__box--none { background: var(--mim-grey-light); }
.li-img__cap {
  display: block;
  padding: 8px 10px;
  font-family: var(--font-primary);
  font-weight: var(--weight-semibold);
  font-size: calc(12px * var(--fs-scale));
  color: var(--fg);
}
.li-img__cap small {
  display: block;
  font-weight: var(--weight-light);
  font-size: calc(11px * var(--fs-scale));
  color: var(--fg-subtle);
  margin-top: 2px;
}
/* The "Name on the graphic" field that used to sit here is gone. It only ever
   existed because one of the runtime-drawn cards printed the learner's name;
   the supplied artwork carries no name, so there is nothing to fill in. */

/* ── preview column ── */
.li-pv { position: sticky; top: 0; }
.li-pvbar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.li-pvbar__t {
  font-family: var(--font-primary);
  font-weight: var(--weight-semibold);
  font-size: calc(13px * var(--fs-scale));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.li-count {
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  font-size: calc(12px * var(--fs-scale));
  color: var(--fg-subtle);
}

/* The feed mock. Deliberately LinkedIn's own surface colours rather than the
   module's, because its whole job is to show the learner where their words
   land. It is a picture of another product, not a Movember component. */
.li-feed {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  padding: 12px 0 0;
  overflow: hidden;
  max-height: 60vh;
  overflow-y: auto;
}
.li-feed__hd { display: flex; align-items: flex-start; gap: 8px; padding: 0 12px 8px; }
.li-feed__av {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: #5D3CC9; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-primary); font-weight: 700; font-size: 15px;
}
.li-feed__who { flex: 1; min-width: 0; }
.li-feed__nm { font-family: var(--font-primary); font-weight: 600; font-size: 14px; color: rgba(0, 0, 0, 0.9); }
.li-feed__hl { font-family: var(--font-primary); font-size: 12px; color: rgba(0, 0, 0, 0.6); }
.li-feed__ts { font-family: var(--font-primary); font-size: 12px; color: rgba(0, 0, 0, 0.6); }
.li-feed__tx {
  padding: 0 12px 10px;
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.43;
  color: rgba(0, 0, 0, 0.9);
  white-space: pre-wrap;
  word-break: break-word;
}
.li-feed__tx .tag { color: #0A66C2; font-weight: 600; }
.li-feed__fold {
  display: block;
  margin: 10px 0;
  padding-top: 6px;
  border-top: 1px dashed #0A66C2;
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #0A66C2;
}
/* A 4:5 image is the tallest LinkedIn renders in the feed without cropping, and
   it is what the supplied artwork is, so the mock shows it at full height. */
.li-feed__img { position: relative; width: 100%; background: #E9E5DF; }
.li-feed__img img { display: block; width: 100%; height: auto; }
.li-feed__meta { padding: 8px 12px; font-family: var(--font-primary); font-size: 12px; color: rgba(0, 0, 0, 0.6); border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.li-feed__acts { display: flex; }
.li-feed__act { flex: 1; text-align: center; padding: 10px 0; font-family: var(--font-primary); font-size: 13px; font-weight: 600; color: rgba(0, 0, 0, 0.6); }

/* ── the three actions ── */
.li-acts { display: grid; gap: 10px; margin-top: 16px; }
.li-act {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 18px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-primary);
  font-weight: var(--weight-semibold);
  font-size: calc(15px * var(--fs-scale));
  color: var(--fg);
}
.li-act:hover { border-color: var(--mim-purple-aa); background: rgba(183, 163, 252, 0.08); }
.li-act:focus-visible { outline: 3px solid var(--mim-purple-aa-dark); outline-offset: 2px; }
.li-act__n {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--mim-purple-aa);
  color: var(--mim-purple-aa-dark);
  font-size: calc(12px * var(--fs-scale));
  font-weight: var(--weight-bold);
  display: inline-flex; align-items: center; justify-content: center;
}
.li-act__k {
  margin-left: auto;
  font-weight: var(--weight-light);
  font-size: calc(12px * var(--fs-scale));
  color: var(--fg-subtle);
}
.li-act--go { background: var(--mim-black); color: var(--mim-white); border-color: var(--mim-black); }
.li-act--go:hover { background: #1A1A1A; border-color: #1A1A1A; }
.li-act--go .li-act__n { border-color: var(--mim-white); color: var(--mim-white); }
.li-act--go .li-act__k { color: rgba(255, 255, 255, 0.7); }
.li-act.is-done { border-color: var(--mim-purple-aa); }
.li-act.is-done .li-act__n { background: var(--mim-purple-aa); color: var(--mim-black); }
/* Step 2 with "No graphic" chosen. Dimmed rather than hidden so the flow does
   not reflow to two steps and back under the learner. */
.li-act:disabled { opacity: 0.45; cursor: default; }
.li-act:disabled:hover { border-color: var(--border); background: var(--bg); }

.li-note {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--mim-grey-light);
  border-radius: var(--radius-md);
  font-family: var(--font-primary);
  font-weight: var(--weight-light);
  font-size: calc(13px * var(--fs-scale));
  line-height: 1.55;
  color: var(--fg-muted);
}
.li-note b { font-weight: var(--weight-semibold); color: var(--fg); }

/* ── toast ── */
.li-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translate(-50%, 16px);
  z-index: 240;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  background: var(--mim-black);
  color: var(--mim-white);
  font-family: var(--font-primary);
  font-weight: var(--weight-semibold);
  font-size: calc(14px * var(--fs-scale));
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
}
.li-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ═══ 3 · RESPONSIVE ═══ */
@media (max-width: 900px) {
  .li-grid { grid-template-columns: minmax(0, 1fr); }
  .li-pv { position: static; }
  .li-modal__inner { padding: 30px 20px 24px; }
}
@media (max-width: 520px) {
  .li-panel__in { padding: 22px 20px; }
  .li-btn { width: 100%; justify-content: center; }
}

/* ═══ 4 · NIGHT MODE ═══
   The panel is already black, so it needs nothing. The modal is the white
   surface that has to flip, matching .mail-modal. */
body.night-mode .li-modal__inner { background: #17171b; }
body.night-mode .li-modal__title { color: rgba(255, 255, 255, 0.95); }
body.night-mode .li-modal__lead,
body.night-mode .li-chk { color: rgba(255, 255, 255, 0.7); }
body.night-mode .li-modal__close { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.85); }
body.night-mode .li-step { border-top-color: rgba(255, 255, 255, 0.12); }
body.night-mode .li-step__t,
body.night-mode .li-copy__t,
body.night-mode .li-img__cap { color: rgba(255, 255, 255, 0.92); }
body.night-mode .li-copy,
body.night-mode .li-img,
body.night-mode .li-act,
body.night-mode .li-pill,
body.night-mode .li-editwrap textarea {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
}
body.night-mode .li-copy__g,
body.night-mode .li-act__n { color: #cdbcff; border-color: #cdbcff; }
body.night-mode .li-note { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.75); }
body.night-mode .li-note b { color: rgba(255, 255, 255, 0.95); }
body.night-mode .li-act--go { background: var(--mim-purple); color: var(--mim-black); border-color: var(--mim-purple); }
body.night-mode .li-act--go .li-act__n { border-color: var(--mim-black); color: var(--mim-black); }
body.night-mode .li-act--go .li-act__k { color: rgba(0, 0, 0, 0.65); }

/* ═══ 5 · REDUCED MOTION ═══
   Transforms and fades only; nothing here carries information, so removing
   them costs the learner nothing. */
@media (prefers-reduced-motion: reduce) {
  .li-modal.open,
  .li-modal__inner { animation: none; }
  .li-btn,
  .li-toast { transition: none; }
  .li-btn:hover { transform: none; }
  .li-toast { transform: translate(-50%, 0); }
}