/* Novra — illustration kit (`il-`). Load AFTER novra.css on pages that use it.
   Twelve UI-like compositions made only of white rounded cards, pills and icon circles on a warm grey panel: the
   Novra way to illustrate a feature, benefit or step without a photo. Pure HTML/CSS + inline SVG, every colour a
   token. Accent appears in one spot per composition (hub, lit node, accent bar, soft tag or accent dot) plus at most
   one secondary spot (a `--done` icon or a glowing `<i>` dot) — never more.
   Each block: <div class="il il-orbit" data-mock> … <div class="il__cap"><b>label</b><span>one line</span></div> </div>
   Put `data-mock` on every `.il` (the UI/typography checkers treat it as a mockup). Add `data-reveal` to the floating
   parts for the standard rise-and-fade; everything is still with ?static or reduced motion.

   Positions: every composition ships default `--x` / `--y` positions for its parts (by child order, wrapped in
   :where() so they carry no specificity). To move a part, give it a class and write the position in a <style> rule —
   `.my-il .n1 { --x: 24%; --y: 24% }` — never inline, so a phone media query can re-place it. Only `--i` (reveal
   delay) may stay inline. */

/* ── Panel + stage ── */
.il { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  min-height: 360px; padding: 28px; background: var(--surface); border-radius: var(--r-lg); color: var(--text); font-family: var(--font); letter-spacing: -0.01em; }
.il--flat { background: transparent; border-radius: 0; padding: 0; min-height: 0; }      /* inside an existing .panel */
.il--tall { min-height: 420px; }
.il__stage { position: relative; width: 100%; max-width: 420px; margin-inline: auto; aspect-ratio: 21 / 13; flex: none; }
.il__stage > svg.il__lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.il__lines path, .il__lines line { fill: none; stroke: color-mix(in srgb, var(--line-2) 70%, var(--muted)); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 5; }
.il__lines .is-solid { stroke-dasharray: none; }
.il__cap { display: grid; gap: 4px; max-width: 34em; }
.il__cap b { font: 500 16px/1.35 var(--font-display); letter-spacing: -0.02em; color: var(--text); }
.il__cap span { font-size: 14px; line-height: 1.5; color: var(--text-2); }
.il__cap--row { grid-template-columns: auto 1fr; gap: 24px; align-items: start; }
.il__cap--row b { min-width: 140px; }
.il [data-reveal] { transition-delay: calc(var(--i, 0) * 80ms); }

/* ── Shared parts ── */
.il-abs { position: absolute; left: var(--x, 50%); top: var(--y, 50%); translate: -50% -50%; }
.il-dot { width: 56px; height: 56px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-1), 0 0 0 1px var(--line); display: grid; place-items: center; color: var(--text-2); flex: none; }
.il-dot svg { width: 22px; height: 22px; }
.il-dot--lg { width: 64px; height: 64px; } .il-dot--lg svg { width: 24px; height: 24px; }
.il-dot--sm { width: 44px; height: 44px; } .il-dot--sm svg { width: 18px; height: 18px; }
.il-dot--xs { width: 36px; height: 36px; box-shadow: var(--shadow-1); } .il-dot--xs svg { width: 15px; height: 15px; }
.il-dot--accent { background: var(--accent); color: #fff; box-shadow: 0 0 0 10px rgba(var(--accent-rgb), .12), var(--shadow-2); }
.il-dot--accent svg { width: 26px; height: 26px; }
.il-dot--sm.il-dot--accent svg { width: 20px; height: 20px; }
.il-dot--brand { color: var(--accent); box-shadow: var(--shadow-2), 0 0 0 1px var(--line); }
.il-dot--initials { font: 600 14px/1 var(--font); letter-spacing: 0; color: var(--text-2); }   /* text initials instead of an icon */
.il-dot--lg.il-dot--initials { font-size: 16px; }
.il-sparkle { width: 14px; height: 14px; color: var(--accent); flex: none; }
.il-pill { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--line);
  box-shadow: var(--shadow-1); font: 500 12.5px/1 var(--font); color: var(--text); white-space: nowrap; }
.il-pill--soft { background: var(--accent-soft); border-color: transparent; color: var(--accent-ink); box-shadow: none; }
.il-pill--soft .il-sparkle { color: var(--accent-ink); }
.il-pill--float { box-shadow: var(--shadow-2); }
.il-pill--mini { height: 24px; padding: 0 9px; gap: 6px; font-size: 11px; color: var(--text-2); box-shadow: none; }   /* a time, a count, an ETA — anywhere */
.il-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .16); }
.il-pill i.is-neutral { background: var(--line-2); box-shadow: none; }
.il-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-1); }
.il-card__body { padding: 16px; display: grid; gap: 8px; align-content: start; justify-items: start; }
.il-card__body small { font-size: 12px; line-height: 1.3; color: var(--muted); white-space: nowrap; }
.il-card__title, .il-stackcards__title { display: flex; align-items: center; gap: 8px; font: 500 13px/1 var(--font); color: var(--text); white-space: nowrap; }
.il-num { font: 500 40px/1 var(--font-display); letter-spacing: -0.045em; color: var(--text); }   /* the big Manrope figure, in any card */
.il-icon { width: 22px; height: 22px; border-radius: 6px; background: var(--surface); display: inline-grid; place-items: center; color: var(--text-2); flex: none; }
.il-icon svg { width: 13px; height: 13px; }
.il-icon--accent { color: var(--accent); }
.il-ln { height: 8px; border-radius: 4px; background: var(--surface-2); width: var(--w, auto); }   /* skeleton text line; `--w` sets its width */
.il-node { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 8px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: var(--shadow-1); font: 500 12.5px/1 var(--font); color: var(--text); white-space: nowrap; }
.il-node--lit { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .14), 0 8px 24px rgba(var(--accent-rgb), .18); }
.il-node--lit .il-icon { background: var(--accent-soft); color: var(--accent-ink); }
.il-node--done .il-icon { background: var(--accent-soft); color: var(--accent-ink); }

/* ── 1 · il-orbit: five tools on dotted arcs around one accent hub ── */
.il-orbit .il__stage { aspect-ratio: 21 / 12; max-width: 540px; margin-block: auto; }
.il-orbit :where(.il-dot:nth-of-type(1)) { --x: 12%; --y: 58%; }
.il-orbit :where(.il-dot:nth-of-type(2)) { --x: 29%; --y: 30%; }
.il-orbit :where(.il-dot:nth-of-type(3)) { --x: 50%; --y: 16%; }
.il-orbit :where(.il-dot:nth-of-type(4)) { --x: 71%; --y: 30%; }
.il-orbit :where(.il-dot:nth-of-type(5)) { --x: 88%; --y: 58%; }
.il-orbit :where(.il-hub) { --x: 50%; --y: 68%; }

/* ── 2 · il-arcs: concentric arcs rising from the bottom, chips floating at depth ── */
.il-arcs { justify-content: flex-start; }
.il-arcs .il__stage { aspect-ratio: 21 / 13; max-width: none; max-height: 320px; overflow: visible; }
.il-arc { position: absolute; left: 50%; bottom: -18%; translate: -50% 50%; aspect-ratio: 1; border-radius: 50%; }
.il-arc--1 { width: 150%; background: color-mix(in srgb, #fff 55%, var(--surface)); }
.il-arc--2 { width: 108%; background: color-mix(in srgb, var(--surface-2) 40%, var(--surface)); }
.il-arc--3 { width: 66%; background: var(--surface-2); }
.il-arcs .il__cap { order: -1; }                                                        /* heading sits above the arcs, like a step card */
.il-arcs :where(.il-dot:nth-of-type(1)) { --x: 30%; --y: 18%; }
.il-arcs :where(.il-dot:nth-of-type(2)) { --x: 58%; --y: 36%; }
.il-arcs :where(.il-dot:nth-of-type(3)) { --x: 86%; --y: 28%; }
.il-arcs :where(.il-dot:nth-of-type(4)) { --x: 14%; --y: 56%; }
.il-arcs :where(.il-dot:nth-of-type(5)) { --x: 72%; --y: 66%; }
.il-arcs :where(.il-dot:nth-of-type(6)) { --x: 50%; --y: 90%; }

/* ── 3 · il-stack: dark-topped card, floating +, skeleton lines, template pill, 2×2 option pills ── */
.il-stack .il__stage { aspect-ratio: auto; display: grid; gap: 12px; max-width: 360px; margin-block: auto; }
.il-stack .il-card { position: relative; overflow: visible; }
.il-stack__top { height: 60px; background: var(--ink-bg); border-radius: 16px 16px 0 0; }
.il-stack__plus { position: absolute; left: 50%; top: 60px; translate: -50% -50%; width: 44px; height: 44px; border-radius: var(--r-sm); background: #fff; box-shadow: var(--shadow-2); display: grid; place-items: center; color: var(--accent); }
.il-stack__plus svg { width: 18px; height: 18px; }
.il-stack__body { padding: 38px 18px 18px; display: grid; justify-items: center; gap: 8px; }
.il-stack__body .il-ln:nth-child(1) { width: 56%; } .il-stack__body .il-ln:nth-child(2) { width: 38%; }
.il-stack__use { margin: 2px 18px 18px; height: 44px; border-radius: var(--r-sm); background: var(--surface); display: flex; align-items: center; justify-content: center; gap: 8px; font: 500 13px/1 var(--font); color: var(--text); }
.il-stack__use .il-icon { background: #fff; }
.il-stack__opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.il-stack__opts .il-pill { height: 42px; border-radius: var(--r-sm); justify-content: flex-start; padding: 0 14px; }
@media (max-width: 400px) { .il-stack__opts { grid-template-columns: 1fr; } }

/* ── 4 · il-pipeline: four nodes on a dashed loop, the AI node lit up (child order: node, node, mini pill, node, node) ── */
.il-pipeline .il__stage { aspect-ratio: 21 / 11; max-width: 540px; margin-block: auto; }
.il-pipeline .il-pill--mini { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; }
.il-pipeline :where(.il__stage > span:nth-of-type(1)) { --x: 24%; --y: 24%; }
.il-pipeline :where(.il__stage > span:nth-of-type(2)) { --x: 70%; --y: 24%; }
.il-pipeline :where(.il__stage > span:nth-of-type(3)) { --x: 70%; --y: 48%; }
.il-pipeline :where(.il__stage > span:nth-of-type(4)) { --x: 70%; --y: 72%; }
.il-pipeline :where(.il__stage > span:nth-of-type(5)) { --x: 24%; --y: 72%; }

/* ── 5 · il-metric: big number tile, 7 soft bars, one accent bar, +% pill ── */
.il-metric .il__stage { aspect-ratio: auto; max-width: 360px; margin-block: auto; }
.il-metric .il-card { padding: 20px 20px 16px; display: grid; gap: 14px; }
.il-metric__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.il-metric__head small { font-size: 12.5px; color: var(--muted); display: block; margin-bottom: 6px; }
.il-metric__head b { font: 500 48px/1 var(--font-display); letter-spacing: -0.045em; color: var(--text); }
.il-metric__head .il-pill { height: 28px; padding: 0 10px; font-size: 12px; margin-top: 2px; }
.il-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; height: 92px; }
.il-bars i { display: block; height: var(--h, 40%); border-radius: 6px; background: var(--surface-2); }
.il-bars i.is-on { background: var(--accent); }
.il-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; text-align: center; font-size: 11px; color: var(--muted); }

/* ── 6 · il-inbox: three message rows with initials avatars, one row drafted by the AI ── */
.il-inbox .il__stage { aspect-ratio: auto; max-width: 380px; margin-block: auto; }
.il-inbox .il-card { padding: 6px; display: grid; gap: 2px; }
.il-row { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; }
.il-row.is-active { background: var(--surface); }
.il-row > div { min-width: 0; display: grid; gap: 2px; }
.il-row b { font: 500 13px/1.3 var(--font); color: var(--text); }
.il-row p { font-size: 12.5px; line-height: 1.35; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* ≈40 characters before it clips on a phone */
.il-row time { font-size: 11px; color: var(--muted); align-self: start; }
.il-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2); color: var(--text-2); font: 600 12px/1 var(--font); display: grid; place-items: center; letter-spacing: 0; }
.il-row .il-pill--soft { height: 24px; padding: 0 9px; font-size: 11px; gap: 5px; }
.il-row .il-pill--soft .il-sparkle { width: 11px; height: 11px; }

/* ── 7 · il-calendar: a week, two soft events, one floating "auto-booked" tag ── */
.il-calendar .il__stage { aspect-ratio: auto; max-width: 380px; padding-top: 14px; margin-block: auto; }
.il-calendar .il-card { padding: 30px 14px 14px; display: grid; gap: 10px; position: relative; overflow: visible; }
.il-cal__days, .il-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.il-cal__days { gap: 1px; font-size: 11px; color: var(--muted); text-align: center; letter-spacing: 0.04em; text-transform: uppercase; }
.il-cal__grid { gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.il-cal__grid > i { display: block; height: 42px; background: #fff; }
.il-cal__grid > b { display: flex; align-items: center; height: 42px; padding: 0 10px; background: var(--accent-soft); color: var(--accent-ink); font: 500 11.5px/1 var(--font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.il-cal__grid > b.is-alt { background: var(--surface); color: var(--text-2); }
.il-cal__tag { position: absolute; top: -17px; right: 16px; }
.il-cal__foot { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--muted); }

/* ── 8 · il-shield: one centred lock tile on soft rings, three status pills ── */
.il-shield .il__stage { aspect-ratio: 21 / 12; max-width: 480px; margin-block: auto; }
.il-ring { position: absolute; left: 50%; top: 52%; translate: -50% -50%; border-radius: 50%; border: 1px solid var(--line-2); aspect-ratio: 1; }
.il-ring--1 { width: 34%; } .il-ring--2 { width: 56%; border-style: dashed; } .il-ring--3 { width: 78%; border-color: color-mix(in srgb, var(--line-2) 60%, transparent); }
.il-shield__tile { position: absolute; left: 50%; top: 52%; translate: -50% -50%; width: 88px; height: 88px; border-radius: var(--r); background: #fff; box-shadow: var(--shadow-2), 0 0 0 1px var(--line); display: grid; place-items: center; color: var(--text); }
.il-shield__tile svg { width: 38px; height: 38px; }
.il-shield__tile svg .is-accent { fill: var(--accent); }
.il-shield .il-pill { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; }
/* child order: rings (i), tile, pill, pill, pill */
.il-shield :where(.il__stage > span:nth-of-type(2)) { --x: 20%; --y: 26%; }
.il-shield :where(.il__stage > span:nth-of-type(3)) { --x: 82%; --y: 40%; }
.il-shield :where(.il__stage > span:nth-of-type(4)) { --x: 30%; --y: 84%; }

/* ── 9 · il-fork: one node on the left fans out to two or three on the right, one lit (child order: source node, option nodes, optional mini pill) ── */
.il-fork .il__stage { aspect-ratio: 21 / 13; }
.il-fork .il-pill { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; }
.il-fork :where(.il-node:nth-of-type(1)) { --x: 23%; --y: 50%; }
.il-fork :where(.il-node:nth-of-type(2)) { --x: 72%; --y: 18%; }
.il-fork :where(.il-node:nth-of-type(3)) { --x: 72%; --y: 50%; }
.il-fork :where(.il-node:nth-of-type(4)) { --x: 72%; --y: 82%; }
.il-fork--2 :where(.il-node:nth-of-type(2)) { --y: 30%; }                               /* two options instead of three */
.il-fork--2 :where(.il-node:nth-of-type(3)) { --y: 70%; }
.il-fork :where(.il-pill) { --x: 48%; --y: 66%; }                                        /* sits on the lower path */

/* ── 10 · il-stackcards: three offset cards, the top one titled and tagged; a small reviewer dot bottom-right ── */
.il-stackcards .il__stage { aspect-ratio: 21 / 13; }
.il-stackcards .il-card { position: absolute; left: 47%; top: 50%; translate: calc(-50% - var(--o, 0px)) calc(-50% - var(--o, 0px)); width: min(236px, 76%); height: 160px; overflow: hidden; }
.il-stackcards :where(.il-card:nth-of-type(1)) { --o: 28px; }
.il-stackcards :where(.il-card:nth-of-type(2)) { --o: 14px; }
.il-stackcards .il-card:last-of-type { box-shadow: var(--shadow-2); }
.il-stackcards .il-card__body { gap: 10px; }
.il-stackcards .il-card__body > .il-ln { width: var(--w, 100%); }
.il-stackcards .il-card:nth-of-type(1) :where(.il-ln:nth-of-type(1)) { --w: 52%; } .il-stackcards .il-card:nth-of-type(1) :where(.il-ln:nth-of-type(2)) { --w: 84%; } .il-stackcards .il-card:nth-of-type(1) :where(.il-ln:nth-of-type(3)) { --w: 70%; }
.il-stackcards .il-card:nth-of-type(2) :where(.il-ln:nth-of-type(1)) { --w: 46%; } .il-stackcards .il-card:nth-of-type(2) :where(.il-ln:nth-of-type(2)) { --w: 88%; } .il-stackcards .il-card:nth-of-type(2) :where(.il-ln:nth-of-type(3)) { --w: 64%; }
.il-stackcards .il-card:nth-of-type(3) :where(.il-ln:nth-of-type(1)) { --w: 92%; } .il-stackcards .il-card:nth-of-type(3) :where(.il-ln:nth-of-type(2)) { --w: 74%; } .il-stackcards .il-card:nth-of-type(3) :where(.il-ln:nth-of-type(3)) { --w: 82%; }
.il-stackcards .il-card__body .il-pill--soft { margin-top: 2px; height: 28px; padding: 0 10px; font-size: 12px; }
.il-stackcards .il-dot { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; }
.il-stackcards :where(.il-dot) { --x: 88%; --y: 90%; }

/* ── 11 · il-route: three stops on one solid curved road, the destination in accent, mini pills for crew / times (child order: stop, pill, stop, pill, stop, pill) ── */
.il-route .il__stage { aspect-ratio: 21 / 13; }
.il-route .il-dot, .il-route .il-pill { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; }
.il-route :where(.il__stage > span:nth-of-type(1)) { --x: 12%; --y: 77%; }   /* start */
.il-route :where(.il__stage > span:nth-of-type(2)) { --x: 30%; --y: 40%; }   /* its pill */
.il-route :where(.il__stage > span:nth-of-type(3)) { --x: 50%; --y: 58%; }   /* stop */
.il-route :where(.il__stage > span:nth-of-type(4)) { --x: 54%; --y: 84%; }
.il-route :where(.il__stage > span:nth-of-type(5)) { --x: 88%; --y: 26%; }   /* destination (--accent) */
.il-route :where(.il__stage > span:nth-of-type(6)) { --x: 64%; --y: 12%; }

/* ── 12 · il-pair: two 64px circles (initials or an icon) joined by a dotted line, a soft tag between, a label pill under each ──
   Mark each side's dot AND label with .il-pair__a / .il-pair__b; the middle tag is .il-pair__tag, an optional pill above it is .il-pair__note. */
.il-pair .il__stage { aspect-ratio: 21 / 13; }
.il-pair .il-dot, .il-pair .il-pill { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; }
.il-pair :where(.il-pair__a) { --x: 22%; }
.il-pair :where(.il-pair__b) { --x: 78%; }
.il-pair :where(.il-dot) { --y: 48%; }
.il-pair :where(.il-pill) { --y: 80%; }
.il-pair :where(.il-pair__tag) { --x: 50%; --y: 48%; }
.il-pair :where(.il-pair__note) { --x: 50%; --y: 18%; }

/* ── Phone ── */
@media (max-width: 560px) {
  .il { padding: 22px; min-height: 320px; }
  .il__stage { min-height: 300px; }                                                     /* the stage is ~300px wide here; keep it tall so %-placed parts spread out */
  .il-stack .il__stage, .il-metric .il__stage, .il-inbox .il__stage, .il-calendar .il__stage { min-height: 0; }   /* card-only stages size to their card */
  .il-dot { width: 48px; height: 48px; } .il-dot svg { width: 19px; height: 19px; }
  .il-dot--accent { width: 56px; height: 56px; }
  .il-dot--lg { width: 60px; height: 60px; }
  .il-node { height: 34px; font-size: 12px; padding: 0 11px 0 7px; }
  .il-metric__head b { font-size: 40px; }
  .il__cap--row { grid-template-columns: 1fr; gap: 4px; }
  /* .il--stack: flows, forks and pairs become one vertical column — static parts, 10px gap, connectors hidden */
  .il--stack .il__stage { aspect-ratio: auto; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .il--stack .il__lines { display: none; }
  .il--stack .il-node, .il--stack .il-dot, .il--stack .il-pill, .il--stack .il-abs { position: static; translate: none; }
}