/* css/outreach-linkedin-profile.css — "Optimise your LinkedIn profile" (js/outreach-linkedin-profile.js).
 *
 * ⚠️ THE SCREEN IS DRAWN ON THE CLIPS STUDIO (css/clips-studio.css): its bar, stepper, plate, eyebrow,
 * headline, lede, buttons, fields, chips and the floating step bar are Clips' own classes through
 * App.ClipsStudio._kit. The few changes this screen makes to THOSE classes live in clips-studio.css,
 * scoped to `.olp` (the namespace test allows no other sheet to define a studio class). This file
 * holds ONLY the pieces the approved mockup has and the studio does not (the mockup: Alex, 2 Nov 2026,
 * artifact 9QLcfxXvbfWSET8Fa2jiic), each with the mockup's own values, which are the studio's tokens:
 *   .olp-me       "Is this you?"'s profile card          .olp-verdict  Maya's check, numbered
 *   .olp-opts     the three option cards and pictures     .olp-kv       copy-and-paste rows
 *   .olp-where    "Where it goes"                         .olp-li       the LinkedIn preview
 *   .olp-tog      Before / After                          .olp-ticks    the done screen's ticks
 *   .olp-go       the step's foot: Copy and the primary button (its Next line, .olp-next, sits above it)
 *   .olp-addr     step 1's address box: linkedin.com/in/ printed in front, Check beside it (3 Nov 2026)
 *   .olp-say      what a check found wrong, in plain words, with the known address to try
 *   .olp-row      the done screen: every field written, Copy, pasted or not (3 Nov 2026)
 * And the next version (5 Nov 2026), drawn in the same values:
 *   .olp-whynote  "Why this matters", one quiet card on every step
 *   .olp-mk       the protected start: the highlight behind a box, the cut mark, the key and the check line
 *   .olp-inv      how the headline shows in an invitation or a comment
 *   .olp-cv       the cover image advice (the community's picture or a drawn example, the photo and safe places)
 *   .olp-conn     posting to LinkedIn: the LinkedIn row, connected or Connect LinkedIn
 *   .olp-pv       the preview: a LinkedIn-like profile or Page, Desktop or Mobile
 * .olp-* ONLY, always under the screen's root `.olp` (the same element as the studio root).
 * The studio's custom properties (--cst-*) are read, never defined, here.
 */
.olp { --olp-li-blue: #0a66c2; --olp-li-sub: #5e5e5e; }

/* ROOM FOR THE STEP (Alex, 3 Nov 2026, screenshot 2: "Type" and "Where it goes" sat under "Next: your
   tagline / I've pasted it"). The tool does not use the studio's floating bar (its foot is in the page).
   Maya never sits over the step at any width: below 761px the page ends with room for her bar
   (--olp-maya-room); from 761px the whole step moves left of her box (--olp-maya-side, her width plus the
   gap, both measured by the page; 396px until measured). */
.olp { padding-bottom: var(--olp-maya-room, 0px); }
@media (min-width: 761px) {
  .olp.has-maya { padding-right: var(--olp-maya-side, 396px); }
}

/* The foot of a step (the mockup's .go): the Next line above it, Copy and the button on the right. */
.olp .olp-go { display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; justify-content: flex-end; border-top: 1px solid var(--cst-line-2); padding-top: 22px; }
.olp .olp-next { font-size: 13.5px; color: var(--cst-ink-3); margin: 0 0 -10px; }
.olp .olp-why { color: var(--cst-ink-3); }
.olp .olp-right { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.olp .olp-done { border-color: var(--cst-good); color: var(--cst-good); background: var(--cst-good-bg); }
.olp .olp-err { font-size: 14px; color: #a33a2f; }
.olp .olp-alt { align-self: flex-start; }

/* Fields: the label row with Maya's mark and the count */
.olp .olp-label { justify-content: space-between; }
.olp .olp-maya { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--cst-ind-d); }
.olp .olp-maya svg { width: 22px; height: 22px; flex: none; }
.olp .olp-count { font: 400 12px "JetBrains Mono", monospace; color: var(--cst-good); font-variant-numeric: tabular-nums; }
.olp .olp-count.is-over { color: #a33a2f; }
.olp .olp-box textarea { font: 400 17px/1.55 "Bricolage Grotesque", sans-serif; resize: vertical; min-height: 3em; }
.olp .olp-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 17px/1.5 "Bricolage Grotesque", sans-serif; color: var(--cst-ink); padding: 2px 0; }
.olp .olp-chip.is-busy { opacity: .6; }
.olp .olp-note { font-size: 14px; color: var(--cst-warn-ink); background: var(--cst-warn-bg); border-radius: 12px; padding: 12px 14px; }

/* Step 1, the address box (the free community signup's: the prefix printed, the slug typed) */
/* The box, Check beside it, and where the address came from right under the box. A phone stacks them:
   box, where it came from, then Check across the width. */
.olp .olp-addr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "box btn" "from from"; gap: 6px 10px; align-items: stretch; }
.olp .olp-addr-box { grid-area: box; min-width: 0; display: flex; align-items: center; gap: 0; }
.olp .olp-pre { color: var(--cst-ink-3); white-space: nowrap; font-size: 16px; }
.olp .olp-addr .olp-check { grid-area: btn; min-width: 96px; }
.olp .olp-from { grid-area: from; margin: 0; font-size: 13.5px; color: var(--cst-ind-d); font-weight: 600; }
.olp .olp-reading { margin: 8px 0 0; display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--cst-ink-2); }
.olp .olp-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--cst-ind-ring); border-top-color: var(--cst-ind); animation: olp-spin .8s linear infinite; flex: none; }
@keyframes olp-spin { to { transform: rotate(360deg); } }
.olp .olp-say { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--cst-warn-ink); background: var(--cst-warn-bg); border-radius: 12px; padding: 14px 16px; }
.olp .olp-say p { margin: 0; }
.olp .olp-sug { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; color: var(--cst-ink); font-weight: 600; }
.olp .olp-okay { display: inline-flex; gap: 6px; align-items: center; margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--cst-good); }
.olp .olp-hint { margin: -8px 0 0; font-size: 14px; color: var(--cst-ink-2); }

/* Step 1, "Is this you?" */
.olp .olp-me { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; align-items: center; border: 1px solid var(--cst-line-2); border-radius: 16px; padding: 18px; background: var(--cst-paper); }
.olp .olp-av { position: relative; overflow: hidden; width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, #c9b8ff, #f3c6d8); display: grid; place-items: center; font: 700 22px "Bricolage Grotesque", sans-serif; color: #2d2470; }
.olp .olp-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.olp .olp-me .olp-nm { font-weight: 700; font-size: 18px; overflow-wrap: anywhere; }
.olp .olp-me .olp-hd { color: var(--cst-ink-2); font-size: 15px; overflow-wrap: anywhere; }
.olp .olp-me .olp-ab { color: var(--cst-ink-3); font-size: 14px; margin-top: 6px; overflow-wrap: anywhere; }

/* Step 2, Maya's check: numbered findings on the warm panel */
.olp .olp-verdict { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; border-radius: 16px; background: var(--cst-warn-bg); }
.olp .olp-verdict .olp-it { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; font-size: 16px; color: var(--cst-warn-ink); }
.olp .olp-verdict .olp-it i { font-style: normal; width: 28px; height: 28px; border-radius: 50%; background: #fff; display: grid; place-items: center; font: 500 12px "JetBrains Mono", monospace; color: var(--cst-warn-ink); }
.olp .olp-verdict .olp-it b { color: var(--cst-ink); }

/* Step 3, Choose: three cards with a small picture each */
.olp .olp-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.olp .olp-opt { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 18px; background: #fff; border: 2px solid var(--cst-line-2); text-align: left; font: inherit; color: inherit; min-width: 0; cursor: pointer; }
.olp .olp-opt[aria-pressed="true"] { border-color: var(--cst-ind); background: var(--cst-ind-bg); }
.olp .olp-opt .olp-t { font-weight: 700; font-size: 17px; line-height: 1.25; }
.olp .olp-opt .olp-s { font-size: 14px; color: var(--cst-ink-2); line-height: 1.4; }
.olp .olp-opt small { font-size: 13px; color: var(--cst-ind); font-weight: 600; }
.olp .olp-pic { display: block; height: 92px; border-radius: 12px; background: var(--cst-ground); position: relative; overflow: hidden; }
.olp .olp-pic .olp-ph { position: absolute; left: 12px; top: 12px; width: 56px; height: 68px; border-radius: 8px; background: #fff; border: 1px solid var(--cst-line); }
.olp .olp-pic .olp-ph::before { content: ""; position: absolute; left: 8px; top: 8px; width: 18px; height: 18px; border-radius: 50%; background: #d8cfe8; }
.olp .olp-pic .olp-ph::after { content: ""; position: absolute; left: 8px; right: 8px; top: 34px; height: 5px; border-radius: 3px; background: #e3ded4; box-shadow: 0 9px 0 #e3ded4, 0 18px 0 #e3ded4; }
.olp .olp-pic .olp-cm { position: absolute; top: 18px; height: 56px; border-radius: 8px; background: var(--cst-ind); opacity: .85; }
.olp .olp-pic .olp-pg { position: absolute; right: 12px; top: 12px; width: 56px; height: 68px; border-radius: 8px; background: linear-gradient(160deg, #6a4cf1, #e85a8a); }
.olp .olp-pic .olp-pg::after { content: ""; position: absolute; left: 8px; bottom: 8px; width: 22px; height: 22px; border-radius: 5px; background: #fff; }
.olp .olp-pic .olp-arr { position: absolute; top: 40px; left: 80px; right: 80px; height: 2px; background: var(--cst-ind); }
.olp .olp-pic .olp-arr::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left-color: var(--cst-ind); }

/* The copy-and-paste rows (Featured link, Experience entry, Page details, button) */
.olp .olp-kv { display: flex; flex-direction: column; gap: 10px; }
.olp .olp-kv-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 12px; align-items: center; border: 1px solid var(--cst-line); border-radius: 14px; padding: 12px 14px 12px 16px; background: var(--cst-paper); }
.olp .olp-kv-row > span:first-child { font-size: 13px; color: var(--cst-ink-3); }
.olp .olp-kv-row > span:nth-child(2) { font-size: 16px; overflow-wrap: anywhere; }
/* Each line is the coach's to change on its own step (3 Nov 2026): a quiet box that looks like the value. */
.olp .olp-kv-v { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0; min-width: 0; }
.olp .olp-kv-in { flex: 1; min-width: 6ch; width: 100%; border: 1px solid transparent; border-radius: 8px; background: transparent; padding: 3px 6px; margin: -3px -6px; font: 400 16px/1.45 "Bricolage Grotesque", sans-serif; color: var(--cst-ink); resize: none; field-sizing: content; overflow-wrap: anywhere; }
.olp .olp-kv-in:hover { border-color: var(--cst-line-2); }
.olp .olp-kv-in:focus { outline: 0; border-color: var(--cst-ind); background: #fff; }
/* A line with no address yet says what to do instead (no box, no Copy); a LinkedIn dropdown is a choice (review, 5 Nov 2026). */
.olp .olp-kv-row.is-none .olp-kv-none { grid-column: 2 / -1; font-size: 14.5px; line-height: 1.45; color: var(--cst-warn-ink); }
.olp .olp-kv-sel { width: 100%; min-width: 0; border: 1px solid var(--cst-line-2); border-radius: 8px; background: #fff; padding: 6px 8px; font: 400 16px "Bricolage Grotesque", sans-serif; color: var(--cst-ink); }
.olp .olp-kv-sel:focus { outline: 0; border-color: var(--cst-ind); }
.olp .olp-kv-pick { font-size: 12.5px; color: var(--cst-ink-3); white-space: nowrap; }
/* LinkedIn's linkedin.com/company/ sits on its own line above the box, so the whole address shows at any width. */
.olp .olp-kv-v .olp-pre { flex-basis: 100%; font-size: 14px; }

/* Where it goes: the click path on LinkedIn */
.olp .olp-where { background: var(--cst-ind-bg); border: 1px solid var(--cst-ind-ring); border-radius: 14px; padding: 14px 18px; display: flex; flex-direction: column; gap: 8px; }
.olp .olp-where .olp-where-k { color: var(--cst-ind); }
.olp .olp-where ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 3px; font-size: 15px; color: var(--cst-ink-2); }
.olp .olp-where b { color: var(--cst-ink); }

/* The LinkedIn preview on All done (LinkedIn's own type and blue, as the mockup draws it) */
.olp .olp-li { border: 1px solid var(--cst-line-2); border-radius: 14px; overflow: hidden; background: #fff; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #191919; }
.olp .olp-li .olp-bn { height: 46px; background: linear-gradient(120deg, #c9b8ff, #f3c6d8); }
.olp .olp-li .olp-bn.is-pg { background: linear-gradient(120deg, #2d2470, #b07aff); }
.olp .olp-li .olp-tp { padding: 0 16px 14px; }
.olp .olp-li .olp-av, .olp .olp-li .olp-lg { width: 60px; height: 60px; border-radius: 50%; border: 3px solid #fff; margin-top: -30px; display: grid; place-items: center; font-size: 18px; }
.olp .olp-li .olp-lg { border-radius: 8px; background: #f3c6d8; font: 800 16px "Bricolage Grotesque", sans-serif; color: #2d2470; }
.olp .olp-li .olp-nm { font-size: 16px; font-weight: 600; margin-top: 4px; }
.olp .olp-li .olp-hd { font-size: 13px; line-height: 1.4; margin-top: 2px; overflow-wrap: anywhere; }
.olp .olp-li .olp-sub { color: var(--olp-li-sub); font-size: 12px; margin-top: 3px; overflow-wrap: anywhere; }
.olp .olp-li .olp-sec { border-top: 1px solid #eee; padding: 12px 16px; font-size: 13px; overflow-wrap: anywhere; }
.olp .olp-li .olp-sec h4 { margin: 0 0 4px; font-size: 14px; }
.olp .olp-li .olp-sec p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.olp .olp-li .olp-btnli { display: inline-block; margin-top: 8px; background: var(--olp-li-blue); color: #fff; border-radius: 999px; padding: 4px 12px; font-weight: 600; font-size: 12px; }
.olp .olp-li mark { background: #fff2b8; color: inherit; border-radius: 3px; padding: 0 2px; }
.olp .olp-li .olp-muted { color: var(--olp-li-sub); font-style: italic; }
.olp .olp-togrow { display: flex; justify-content: flex-end; }
.olp .olp-tog { display: inline-flex; background: var(--cst-ground); border-radius: 999px; padding: 3px; gap: 3px; }
.olp .olp-tog button { border: 0; background: transparent; padding: 7px 16px; border-radius: 999px; font: 600 13px "Bricolage Grotesque", sans-serif; color: var(--cst-ink-2); cursor: pointer; }
.olp .olp-tog button[aria-pressed="true"] { background: #fff; color: var(--cst-ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.olp .olp-ticks { display: flex; gap: 8px 14px; flex-wrap: wrap; }
.olp .olp-ticks span { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 600; color: var(--cst-good); background: var(--cst-good-pill); padding: 4px 11px; border-radius: 999px; }
.olp .olp-ticks svg { width: 14px; height: 14px; }

/* The done screen: every field, still to paste first (3 Nov 2026) */
.olp .olp-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.olp .olp-tabs button { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; border: 2px solid var(--cst-line-2); background: #fff; border-radius: 14px; padding: 8px 14px; font: 600 15px "Bricolage Grotesque", sans-serif; color: var(--cst-ink); cursor: pointer; }
.olp .olp-tabs button small { font: 500 12px "Bricolage Grotesque", sans-serif; color: var(--cst-ink-3); }
.olp .olp-tabs button[aria-selected="true"] { border-color: var(--cst-ind); background: var(--cst-ind-bg); }
.olp .olp-list { display: flex; flex-direction: column; gap: 14px; }
.olp .olp-row { border: 1px solid var(--cst-line-2); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; background: #fff; }
.olp .olp-row.is-todo { border-color: var(--cst-ind-ring); background: var(--cst-ind-bg); }
.olp .olp-row-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.olp .olp-row-h h3 { margin: 0; font: 700 17px "Bricolage Grotesque", sans-serif; }
.olp .olp-tick { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; font-weight: 600; color: var(--cst-good); background: var(--cst-good-pill); padding: 4px 11px; border-radius: 999px; }
.olp .olp-todo { font-size: 13px; font-weight: 600; color: var(--cst-ind-d); }
.olp .olp-txt { margin: 0; white-space: pre-wrap; font-size: 15px; line-height: 1.55; color: var(--cst-ink-2); overflow-wrap: anywhere; }
.olp .olp-row-go { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.olp .olp-again { display: flex; gap: 10px 14px; flex-wrap: wrap; align-items: center; }
.olp .olp-h2 { margin: 6px 0 -8px; font: 700 18px "Bricolage Grotesque", sans-serif; }

/* ══ THE NEXT VERSION, 5 NOV 2026 ═══════════════════════════════════════════════════════════════════════════ */

/* The eyebrow with the way back to the preview beside it */
.olp .olp-eyerow { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; }
.olp .olp-seeit { font-size: 13.5px; }

/* "Why this matters": one quiet card, the same on every step (paper, a thin line, the eyebrow, two or three sentences) */
.olp .olp-whynote { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 14px 18px 15px; border: 1px solid var(--cst-line-2); border-left: 3px solid var(--cst-ind-ring); border-radius: 14px; background: var(--cst-paper); }
.olp .olp-whynote-k { color: var(--cst-ind); }
.olp .olp-whynote p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--cst-ink-2); max-width: 64ch; }

/* The protected start: the same words behind the box, in the same font at the same width, the first part highlighted
   and a mark where LinkedIn cuts. The box and the highlight share one grid cell, so they are always the same size. */
.olp .olp-mk { position: relative; flex: 1; min-width: 0; display: grid; }
.olp .olp-mk > * { grid-area: 1 / 1; }
.olp .olp-mk-back { margin: 0; padding: 0; overflow: hidden; pointer-events: none; color: transparent; white-space: pre-wrap; overflow-wrap: break-word; word-wrap: break-word;
  font: 400 17px/1.55 "Bricolage Grotesque", sans-serif; }
.olp .olp-mk-back mark { background: #fff2b8; color: transparent; border-radius: 3px; padding: 0; }
.olp .olp-mk-cut { position: relative; }
.olp .olp-mk-cut::before { content: ""; position: absolute; left: 1px; top: -.05em; width: 2px; height: 1.4em; border-radius: 1px; background: var(--cst-ind); }
.olp .olp-mk textarea { position: relative; z-index: 1; background: transparent; }
.olp .olp-mk-key { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13.5px; color: var(--cst-ink-2); }
.olp .olp-mk-sw { flex: none; margin-top: .3em; width: 18px; height: 12px; border-radius: 3px; background: #fff2b8; border: 1px solid #f0dc8a; }
.olp .olp-mk-check { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13.5px; font-weight: 600; }
.olp .olp-mk-check.is-ok { color: var(--cst-good); }
.olp .olp-mk-check.is-warn { color: var(--cst-warn-ink); }

/* How the headline shows beside a name in an invitation or a comment (LinkedIn's own type) */
.olp .olp-inv { display: flex; flex-direction: column; gap: 8px; }
.olp .olp-inv-k, .olp .olp-pv-k { font: 400 11px "JetBrains Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--cst-ink-3); }
.olp .olp-inv-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--cst-line-2); border-radius: 14px; background: #fff;
  font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #191919; }
.olp .olp-inv-row .olp-av { width: 48px; height: 48px; font-size: 16px; }
.olp .olp-inv-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.olp .olp-inv-t b { font-size: 15px; }
.olp .olp-inv-t span { font-size: 13px; color: var(--olp-li-sub); overflow-wrap: anywhere; }
.olp .olp-inv-acts { display: flex; gap: 8px; }
.olp .olp-inv-acts i { font-style: normal; font-size: 13px; font-weight: 600; color: var(--olp-li-sub); border-radius: 999px; padding: 5px 12px; }
.olp .olp-inv-acts i.is-p { color: var(--olp-li-blue); border: 1px solid var(--olp-li-blue); }

/* The cover image advice: the community's own picture (or a drawn example) at LinkedIn's 4 to 1, with where the photo
   sits on a computer and where words are safe */
.olp .olp-cv { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.olp .olp-cv-frame { position: relative; aspect-ratio: 4 / 1; border-radius: 12px; overflow: hidden; background: linear-gradient(120deg, #c9b8ff, #f3c6d8); }
.olp .olp-cv-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.olp .olp-cv-ph { position: absolute; inset: 0 5% 0 46%; display: flex; flex-direction: column; justify-content: center; gap: 2px; color: #2d2470; font-family: "Bricolage Grotesque", sans-serif; }
.olp .olp-cv-ph b { font-size: clamp(14px, 2.6vw, 22px); line-height: 1.15; }
.olp .olp-cv-ph span { font-size: clamp(10px, 1.5vw, 13px); line-height: 1.3; }
.olp .olp-cv-ph small { font: 500 clamp(9px, 1.3vw, 12px) "JetBrains Mono", monospace; margin-top: 2px; }
.olp .olp-cv-photo { position: absolute; left: 3%; bottom: -28%; width: 20%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.72); border: 2px dashed rgba(45,36,112,.55);
  display: flex; justify-content: center; align-items: flex-start; padding-top: 1.4em; font: 600 11px "Bricolage Grotesque", sans-serif; color: #2d2470; }
.olp .olp-cv-safe { position: absolute; right: 4%; top: 10%; width: 46%; height: 62%; border: 2px dashed rgba(45,36,112,.45); border-radius: 8px;
  display: flex; align-items: flex-start; justify-content: flex-end; padding: 4px 8px; font: 600 11px "Bricolage Grotesque", sans-serif; color: rgba(45,36,112,.8); }
.olp .olp-cv figcaption { font-size: 13.5px; color: var(--cst-ink-3); }
.olp .olp-cv-open { align-self: flex-start; }
.olp .olp-tips { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.5; color: var(--cst-ink-2); }
.olp .olp-tips b { color: var(--cst-ink); }

/* Posting to LinkedIn: the LinkedIn row (its mark, its state, Connect LinkedIn or the tick) */
.olp .olp-conn { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; border: 1px solid var(--cst-line-2); border-radius: 16px; padding: 16px 18px; background: var(--cst-paper); }
.olp .olp-conn-mk { width: 44px; height: 44px; border-radius: 10px; background: var(--olp-li-blue); color: #fff; display: grid; place-items: center; font: 700 20px Helvetica, Arial, sans-serif; }
.olp .olp-conn-t { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.olp .olp-conn-t b { font-size: 17px; }
.olp .olp-conn-t span { font-size: 14px; color: var(--cst-ink-2); }
.olp .olp-conn-how { margin: 0; font-size: 15px; line-height: 1.55; color: var(--cst-ink-2); }
.olp .olp-conn-how b { color: var(--cst-ink); }

/* The preview: a LinkedIn-like profile or Page, Desktop or Mobile (LinkedIn's own type, grey and blue) */
.olp .olp-pv { display: flex; flex-direction: column; gap: 10px; }
.olp .olp-pv.is-mob { width: 100%; max-width: 380px; margin: 0 auto; padding: 14px 12px 18px; border: 1px solid var(--cst-line); border-radius: 28px; background: var(--cst-ground); }
.olp .olp-pv-card { border: 1px solid var(--cst-line-2); border-radius: 14px; overflow: hidden; background: #fff; font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #191919; }
.olp .olp-pv-cover { position: relative; aspect-ratio: 4 / 1; background: linear-gradient(120deg, #c9b8ff, #f3c6d8); overflow: hidden; }
.olp .olp-pv.is-mob .olp-pv-cover { aspect-ratio: 3 / 1; }
.olp .olp-pv-cover .olp-cv-img { width: 100%; height: 100%; object-fit: cover; }
.olp .olp-pv-tag { position: absolute; left: 10px; top: 8px; font: 600 11px "Bricolage Grotesque", sans-serif; color: #2d2470; background: rgba(255,255,255,.75); border-radius: 999px; padding: 2px 9px; }
.olp .olp-pv-top { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 220px); grid-template-areas: "av av" "id now"; gap: 6px 24px; padding: 0 22px 18px; }
.olp .olp-pv-top .olp-av { grid-area: av; width: 112px; height: 112px; margin-top: -60px; border: 4px solid #fff; font-size: 32px; }
.olp .olp-pv-id { grid-area: id; min-width: 0; }
.olp .olp-pv-nm { font-size: 22px; font-weight: 600; line-height: 1.25; }
.olp .olp-pv-hd { font-size: 15px; line-height: 1.4; margin-top: 2px; overflow-wrap: anywhere; }
.olp .olp-pv-loc { font-size: 13px; color: var(--olp-li-sub); margin-top: 6px; overflow-wrap: anywhere; }
.olp .olp-pv-ci { border: 0; background: none; padding: 0; font: 600 13px -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--olp-li-blue); cursor: pointer; }
.olp .olp-pv-ci:hover { text-decoration: underline; }
.olp .olp-pv-cil { white-space: nowrap; }
.olp .olp-pv-now { grid-area: now; display: flex; align-items: center; gap: 8px; align-self: start; padding-top: 8px; font-size: 13px; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.olp .olp-pv-nlogo, .olp .olp-pv-elogo, .olp .olp-pv-lg { position: relative; overflow: hidden; flex: none; display: grid; place-items: center; background: #f3c6d8; color: #2d2470; font: 800 11px "Bricolage Grotesque", sans-serif; }
.olp .olp-pv-nlogo img, .olp .olp-pv-elogo img, .olp .olp-pv-lg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.olp .olp-pv-nlogo { width: 32px; height: 32px; border-radius: 4px; }
.olp .olp-pv-cibox { margin: 0 22px 16px; padding: 12px 14px; border: 1px solid #e3e3e3; border-radius: 10px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.olp .olp-pv-cibox span:first-of-type { color: var(--olp-li-sub); margin-top: 4px; }
.olp .olp-pv-link { color: var(--olp-li-blue); font-weight: 600; overflow-wrap: anywhere; }
.olp .olp-pv-sec { border-top: 1px solid #eee; padding: 16px 22px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.olp .olp-pv-sec h4 { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.olp .olp-pv-about { margin: 0; }
.olp .olp-pv-more { border: 0; background: none; padding: 0 0 0 2px; font: 600 14px -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--olp-li-sub); cursor: pointer; }
.olp .olp-pv-feat { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; border: 1px solid #e3e3e3; border-radius: 10px; overflow: hidden; max-width: 460px; }
.olp .olp-pv-fpic { height: 72px; display: grid; place-items: center; background: linear-gradient(120deg, #c9b8ff, #f3c6d8); font: 800 15px "Bricolage Grotesque", sans-serif; color: #2d2470; overflow: hidden; }
.olp .olp-pv-fpic img { width: 100%; height: 100%; object-fit: cover; }
.olp .olp-pv-feat > div:last-child { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px 8px 0; min-width: 0; }
.olp .olp-pv-feat span { font-size: 13px; color: #444; }
.olp .olp-pv-feat small, .olp .olp-pv-exp small { font-size: 12px; color: var(--olp-li-sub); }
.olp .olp-pv-exp { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: start; }
.olp .olp-pv-exp + .olp-pv-exp { margin-top: 14px; padding-top: 14px; border-top: 1px solid #f0f0f0; }
.olp .olp-pv-exp > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.olp .olp-pv-exp span { font-size: 13px; }
.olp .olp-pv-exp p { margin: 6px 0 0; font-size: 13px; color: #333; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.olp .olp-pv-elogo { width: 48px; height: 48px; border-radius: 4px; font-size: 13px; }
.olp .olp-pv-elogo.is-old { background: #eef0f3; color: #5e5e5e; }
.olp .olp-pv-top.is-pg { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "av av" "id now"; }
.olp .olp-pv-lg { grid-area: av; width: 96px; height: 96px; margin-top: -48px; border: 4px solid #fff; border-radius: 10px; font-size: 22px; }
.olp .olp-pv-signup { grid-area: now; align-self: end; background: var(--olp-li-blue); color: #fff; border-radius: 999px; padding: 7px 18px; font-weight: 600; font-size: 14px; white-space: nowrap; }
.olp .olp-pv .olp-inv-row { background: #fff; }
/* Mobile: one column, a smaller photo, the current role under the headline (as LinkedIn's app shows it). */
.olp .olp-pv.is-mob .olp-pv-top { grid-template-columns: minmax(0, 1fr); grid-template-areas: "av" "id" "now"; padding: 0 14px 14px; }
.olp .olp-pv.is-mob .olp-pv-top .olp-av { width: 84px; height: 84px; margin-top: -42px; font-size: 26px; }
.olp .olp-pv.is-mob .olp-pv-nm { font-size: 20px; }
.olp .olp-pv.is-mob .olp-pv-hd { font-size: 14px; }
.olp .olp-pv.is-mob .olp-pv-now { padding-top: 2px; }
.olp .olp-pv.is-mob .olp-pv-sec { padding: 14px; }
.olp .olp-pv.is-mob .olp-pv-cibox { margin: 0 14px 14px; }
.olp .olp-pv.is-mob .olp-pv-feat { grid-template-columns: 72px minmax(0, 1fr); }
.olp .olp-pv.is-mob .olp-pv-top.is-pg { grid-template-areas: "av" "id" "now"; }
.olp .olp-pv.is-mob .olp-pv-signup { justify-self: stretch; text-align: center; }
.olp .olp-pv.is-mob .olp-inv-acts { display: none; }
.olp .olp-pv.is-mob .olp-inv-row { grid-template-columns: 48px minmax(0, 1fr); }
.olp .olp-pv.is-mob .olp-pv-cover .olp-cv-ph { inset: 0 6% 0 40%; }
/* A drawn example cover is small on a phone: the name and the address, the who line left to the tips below. */
.olp .olp-pv.is-mob .olp-cv-ph span { display: none; }
@media (max-width: 520px) { .olp .olp-cv-ph span { display: none; } }

/* Phone (the mockup's ≤760 rules). The foot is the last thing on the step, never a floating bar over it
   (Alex, 3 Nov 2026): one row, Copy beside the primary button. */
@media (max-width: 760px) {
  .olp .olp-opts { grid-template-columns: minmax(0, 1fr); }
  .olp .olp-kv-row { grid-template-columns: minmax(0, 1fr) auto; }
  .olp .olp-kv-row > span:first-child { grid-column: 1 / -1; }
  .olp .olp-kv-row.is-none .olp-kv-none { grid-column: 1 / -1; }
  .olp .olp-kv-row .olp-pre { display: block; flex-basis: 100%; font-size: 14px; }
  .olp .olp-go { gap: 10px; }
  .olp .olp-right { width: 100%; flex-wrap: nowrap; align-items: center; gap: 10px; }
  .olp .olp-right > .olp-primary { flex: 1; min-width: 0; padding: 13px 16px; }
  .olp .olp-right > button:not(.olp-primary) { flex: none; }
  .olp .olp-addr { grid-template-columns: minmax(0, 1fr); grid-template-areas: "box" "from" "btn"; }
  .olp .olp-addr .olp-check { margin-top: 4px; }
  .olp .olp-pre { font-size: 15px; }
  .olp .olp-conn { grid-template-columns: 40px minmax(0, 1fr); }
  .olp .olp-conn > button, .olp .olp-conn > .olp-tick { grid-column: 1 / -1; justify-self: start; }
  .olp .olp-conn-mk { width: 40px; height: 40px; }
  .olp .olp-inv-row { grid-template-columns: 44px minmax(0, 1fr); }
  .olp .olp-inv-row .olp-av { width: 44px; height: 44px; }
  .olp .olp-inv-acts { display: none; }
  .olp .olp-pv-top { grid-template-columns: minmax(0, 1fr); grid-template-areas: "av" "id" "now"; padding: 0 14px 14px; }
  .olp .olp-pv-top .olp-av { width: 84px; height: 84px; margin-top: -42px; font-size: 26px; }
  .olp .olp-pv-sec { padding: 14px; }
  .olp .olp-cv-photo, .olp .olp-cv-safe { font-size: 9px; }
}
@media (max-width: 760px), (pointer: coarse) {
  .olp .olp-tog button, .olp .olp-opt { min-height: 44px; }
  .olp .olp-seeit { min-height: 44px; }
  /* The preview's own two words ("Contact info", "see more") stay inside their line, as LinkedIn's do: taller by
     padding, never by a block that breaks the line. */
  .olp .olp-pv-ci, .olp .olp-pv-more { padding-top: 2px; padding-bottom: 2px; }
}