/* The Lenses page (lenses.html, js/lenses.js, js/lenses/<id>.js): the cards and the pictures in them. */
.ln-body { --navy: #1e1a67; --ink2: #5d5a7d; --lav: #efedfd; --dem: #0022ff; --rep: #ff0000; --oth: #7a3fd1; --ok: #0a7d4f; --no: #c0262d; --amber: #b86b00;
  --hz: linear-gradient(90deg, #0725f9, #4a28ee 25%, #8a2be2 50%, #c3157a 75%, #f70008);
  color: var(--navy); font-family: var(--font-read, "Source Sans 3", system-ui, sans-serif); }
.ln-wrap { padding-bottom: calc(80px + var(--xp-h, 0px)); }   /* (room for Explore's button at the bottom on phones) */
.ln-nav { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.ln-nav button { border: 0; padding: 6px 13px; border-radius: 999px; background: var(--lav); color: var(--navy); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.ln-nav button:hover { background: #e3dffb; }
.ln-wrap { max-width: 1240px; margin: 0 auto; padding: 24px 20px 80px; }
.ln-intro h1 { margin: 0 0 6px; font-size: 32px; }
.ln-intro p { margin: 0 0 24px; max-width: 820px; color: var(--ink2); font-size: 16px; line-height: 1.5; }
.ln-group { scroll-margin-top: calc(var(--hdr, 118px) + 12px); margin: 30px 0 12px; display: flex; align-items: baseline; gap: 12px; }
.ln-group h2 { margin: 0; font-size: 24px; }
.ln-group span { color: var(--ink2); font-size: 15px; }
.ln-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 18px; }
.ln-card { scroll-margin-top: calc(var(--hdr, 118px) + 12px); background: #fff; border-radius: 22px; box-shadow: var(--card-shadow); padding: 18px 20px 16px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.ln-card.is-wide { grid-column: 1 / -1; }
.ln-card.is-2 { grid-column: span 2; }
.ln-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ln-head h3 { margin: 0; font-size: 20px; }
.ln-head .ln-star { color: var(--amber); font-size: 18px; }
.ln-head .ln-tag { margin-left: auto; padding: 3px 9px; border-radius: 999px; background: var(--lav); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--surf-head); }
.ln-head .ln-tag.is-sample { background: #fff1d6; color: var(--amber); }
.ln-head .ln-tag.is-redesign { background: #e3e8ff; color: #1f4fbf; }
.ln-q { margin: 0; color: var(--ink2); font-size: 15px; line-height: 1.4; }
.ln-pic { position: relative; min-height: 220px; border-radius: 16px; background: #faf9ff; overflow: hidden; }
.ln-pic svg { display: block; width: 100%; height: auto; }
.ln-pic .ln-err { padding: 16px; color: var(--no); font-size: 13px; }
.ln-note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink2); }
.ln-note b { color: var(--navy); }
.ln-mini { margin: -4px 0 0; font-size: 12px; color: var(--surf-head); font-weight: 700; }
.ln-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; color: var(--ink2); }
.ln-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
/* text inside the pictures: the site's font, sizes that stay legible when the SVG scales to a phone */
.ln-pic text { font-family: var(--font-read, "Source Sans 3", system-ui, sans-serif); }
.ln-pic text:not([fill]) { fill: var(--navy); }   /* (a fill attribute on the text wins) */
/* colour classes for text and shapes in a picture: the page's variables, which dark mode remaps (a fixed fill stays as
   it is). Each is written for text too, so it outranks the text rule above, which is as specific as a class on a text. */
.ln-pic .ln-muted, .ln-pic text.ln-muted { fill: var(--ink2); }
.ln-pic .ln-accent, .ln-pic text.ln-accent { fill: var(--oth); }
.ln-pic .ln-dem, .ln-pic text.ln-dem { fill: var(--dem); }
.ln-pic .ln-rep, .ln-pic text.ln-rep { fill: var(--rep); }
.ln-pic .ln-ok, .ln-pic text.ln-ok { fill: var(--ok); }
.ln-pic .ln-no, .ln-pic text.ln-no { fill: var(--no); }
.ln-pic .ln-amber, .ln-pic text.ln-amber { fill: var(--amber); }
.ln-pic .ln-small { font-size: 11px; }
.ln-pic .ln-bold { font-weight: 800; }
.ln-pic .ln-axis { stroke: #d9d5f2; stroke-width: 1; }
.ln-pic .ln-grid { stroke: #ece9fc; stroke-width: 1; }
/* a non-SVG picture: HTML blocks inside the card */
.ln-html { padding: 14px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; font-size: 14px; }
.ln-html svg:not(.ln-wide) { width: auto; }   /* (an inline icon keeps its size; a chart sets its own width) */
.ln-face { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; object-position: center 22%; border: 2.5px solid var(--oth); background: #ddd; display: inline-block; vertical-align: middle; }
.ln-face.is-D { border-color: var(--dem); }
.ln-face.is-R { border-color: var(--rep); }
.ln-face.is-sm { width: 26px; height: 26px; border-width: 2px; }
.ln-face.is-lg { width: 56px; height: 56px; border-width: 3px; }
.ln-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--lav); font-size: 13px; font-weight: 700; }
@media (max-width: 700px) {
  .ln-wrap { padding: 16px 12px 60px; }
  .ln-grid { grid-template-columns: 1fr; }
  .ln-card.is-2, .ln-card.is-wide { grid-column: auto; }
}