/* assets/lf.css · /linkedin-frame (reset Round 1, lane lf). Loads after kit.css. Light mode (community audience).
   Tokens only (brand-tokens.css + the kit's mode layer); logical properties throughout so the Arabic copy mirrors.
   Notes and decisions: .research/reset/r1/lf.md. */

/* ---------- 0. page base (interim, the same as pg-community.css section 0: kit pages do not load legacy rivet.css) ---------- */
body{ margin:0; background:var(--white); color:var(--black); font-family:var(--font-sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; overflow-x:clip; }
:lang(ar) body{ font-family:var(--font-arabic); }
*, *::before, *::after{ box-sizing:border-box; }
img, svg, video{ max-width:100%; }
.skip-link{ position:absolute; inset-inline-start:16px; top:-60px; z-index:2000; padding:10px 16px; border-radius:8px; background:var(--black); color:var(--white); font-weight:600; text-decoration:none; }
.skip-link:focus{ top:12px; }
.bg-field{ display:none; }
[hidden]{ display:none !important; }
main.lf{ padding-block-end:24px; }
main.lf .k-qa{ max-inline-size:720px; }
.lf-arr{ display:inline-block; }
[dir="rtl"] .lf-arr{ transform:scaleX(-1); }

/* ---------- hero ---------- */
.lf-hero{ padding-block:clamp(32px, 4vw, 56px) clamp(56px, 7vw, 104px); }
.lf-hero__grid{ display:grid; gap:clamp(32px, 4vw, 56px); align-items:center; }
.lf-hero__copy{ display:grid; gap:18px; max-width:34rem; min-width:0; }
.lf-hero__copy > *{ margin:0; }
.lf-private{ display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border-radius:var(--radius-card); background:var(--ground-alt); color:var(--ink-muted); font:400 14px/1.55 var(--font-sans); }
.lf-private svg{ flex:none; margin-block-start:1px; color:var(--ink); }
.lf-private b{ color:var(--ink); font-weight:600; }
@media (min-width:1024px){
  .lf-hero__grid{ grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); }
}
/* phones and tablets: the tool straight after the heading and lead; the privacy line under the tool, next to the download */
@media (max-width:1023px){
  .lf-hero__grid{ gap:18px; }
  .lf-hero__copy{ display:contents; }
  .lf-hero__copy > .lf-private{ order:2; }
  .lf-tool{ order:1; margin-block-start:10px; }
}

/* ---------- the tool ---------- */
.lf-tool{ display:grid; gap:clamp(24px, 3vw, 36px); min-width:0; padding:clamp(16px, 2.4vw, 32px); }
.lf-tool__view, .lf-tool__ctrl{ min-width:0; }
.lf-tool__ctrl{ display:grid; gap:22px; align-content:start; }
@media (min-width:720px){
  .lf-tool{ grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); align-items:start; }
}

/* preview and drop zone */
.lf-drop{ display:grid; gap:18px; justify-items:center; }
.lf-stage{ position:relative; inline-size:100%; max-inline-size:420px; aspect-ratio:1; border-radius:50%; box-shadow:0 0 0 1px var(--hairline-soft), 0 18px 40px -18px rgba(0,0,0,.28); touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.lf-canvas{ display:block; inline-size:100%; block-size:100%; border-radius:50%; }
.has-photo .lf-stage{ cursor:grab; touch-action:none; }
.has-photo .lf-stage.is-drag{ cursor:grabbing; }
main[data-m="kit"] .lf-stage:focus-visible{ outline:3px solid var(--focus-ring); outline-offset:4px; }
.lf-drop.is-over .lf-stage{ outline:3px dashed var(--focus-ring); outline-offset:6px; }
.lf-drop__cta{ display:grid; gap:10px; justify-items:center; text-align:center; max-inline-size:26rem; }
.lf-pick{ cursor:pointer; }
.lf-pick__b, .has-photo .lf-pick__a{ display:none; }
.has-photo .lf-pick__b{ display:inline; }
main[data-m="kit"] .lf-drop__cta:has(input:focus-visible) .lf-pick{ outline:3px solid var(--focus-ring); outline-offset:2px; }
.lf-hint{ margin:0; color:var(--ink-muted); font:400 13px/1.5 var(--font-sans); }
.lf-hint__b{ display:none; }
.has-photo .lf-hint__a{ display:none; }
.has-photo .lf-hint__b{ display:inline; }
.lf-noscript{ grid-column:1 / -1; margin:0; color:var(--ink); font:600 14px/1.5 var(--font-sans); }

/* labels */
.lf-legend{ display:block; margin:0 0 10px; padding:0; color:var(--ink); font:600 14px/1.3 var(--font-sans); }

/* the frame picker: a radio group, each option a row with a live thumbnail */
.lf-frames{ margin:0; padding:0; border:0; min-width:0; }
.lf-frames{ container-type:inline-size; }
.lf-frames__list{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.lf-opt{ position:relative; display:grid; grid-template-columns:44px minmax(0, 1fr); align-items:center; gap:10px; min-block-size:60px; padding:8px; padding-inline:8px 10px; border-radius:var(--radius-card); background:var(--ground-alt); cursor:pointer; box-shadow:inset 0 0 0 1px transparent; transition:box-shadow var(--dur-instant) var(--ease-standard), background-color var(--dur-instant) var(--ease-standard); }
.lf-opt:hover{ box-shadow:inset 0 0 0 1px var(--hairline); }
.lf-opt input{ position:absolute; inset:0; inline-size:100%; block-size:100%; margin:0; opacity:0; cursor:pointer; }
.lf-opt:has(input:checked){ background:var(--card-surface); box-shadow:inset 0 0 0 2px var(--ui-primary); }
main[data-m="kit"] .lf-opt:has(input:focus-visible){ outline:3px solid var(--focus-ring); outline-offset:2px; }
.lf-opt__thumb{ display:block; inline-size:44px; block-size:44px; border-radius:50%; }
.lf-opt__t{ display:grid; gap:2px; min-width:0; }
.lf-opt__n{ color:var(--ink); font:600 14px/1.25 var(--font-sans); }
.lf-opt__d{ color:var(--ink-muted); font:400 12px/1.35 var(--font-sans); }
@container (max-width:380px){ .lf-opt{ grid-template-columns:minmax(0, 1fr); justify-items:start; gap:8px; } }

/* zoom */
.lf-zoom{ display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:4px 14px; }
.lf-zoom .lf-legend{ margin:0; }
.lf-zoom input[type="range"]{ grid-column:1; inline-size:100%; block-size:44px; margin:0; accent-color:var(--ui-primary); cursor:pointer; }
.lf-zoom input[type="range"]:disabled{ cursor:not-allowed; opacity:.45; }
.lf-zoom__v{ grid-column:2; grid-row:1; justify-self:end; color:var(--ink-muted); font:500 12px/1 var(--font-mono); }
.lf-reset{ grid-column:2; grid-row:2; }
.lf-reset:disabled{ opacity:.45; cursor:not-allowed; }

/* download */
.lf-get{ display:grid; gap:8px; }
.lf-dl{ inline-size:100%; }
.lf-dl[aria-disabled="true"]{ opacity:.45; cursor:not-allowed; }
.lf-dl[aria-disabled="true"]:hover{ background:var(--decision); }
.lf-get__meta{ margin:0; color:var(--ink-muted); text-align:center; }
.lf-status{ margin:0; min-block-size:1.4em; color:var(--ink); font:500 13px/1.45 var(--font-sans); text-align:center; }
.lf-status:empty{ min-block-size:0; }

/* set it on LinkedIn */
.lf-howto{ padding-block-start:18px; border-block-start:1px solid var(--hairline-soft); }
.lf-howto__h{ margin:0 0 6px; color:var(--ink); font:600 14px/1.3 var(--font-sans); }
.lf-howto__p{ margin:0; color:var(--ink-muted); font:400 14px/1.55 var(--font-sans); }

/* ---------- how it works ---------- */
.lf-steps{ margin:0; padding:0; list-style:none; }
.lf-step{ display:grid; gap:10px; align-content:start; }
.lf-step > *{ margin:0; }
.lf-step__n{ color:var(--ink-muted); font:500 12px/1 var(--font-mono); letter-spacing:var(--track-label, .08em); }
.lf-step p{ color:var(--ink-muted); font:400 15px/1.6 var(--font-sans); }

/* ---------- touch and motion ---------- */
@media (pointer:coarse){ .lf-opt{ min-block-size:64px; } .lf-reset{ min-block-size:44px; } }
@media (prefers-reduced-motion:reduce){ .lf-opt{ transition:none; } }
@media (max-width:719px){
  .lf-stage{ max-inline-size:340px; }
  .lf-tool__ctrl{ gap:20px; }
}