/* Sorvi — illustration kit (prefix il-). Tokens only; no new fonts; images come from the page.
   The style: real-looking product pieces (windows, screens, photos, toolbars) floating on a soft tinted glow panel, cropped by
   the panel and fading into the page; one hand-held moment (cursor, tooltip, handle, ring) that shows the action.
   Grammar → ILLUSTRATIONS.md. Catalogue → pages/illustrations.html. */

/* ── Stage: the box every illustration lives in ── */
/* .il = an illustration (≤ 10 words). .il-stage = the same stage for a PRODUCT MOCK-UP with real window content (≤ 30 words, use with data-mock) — e.g. the hero-stack stage. */
.il, .il-stage { position: relative; width: 100%; min-height: 420px; isolation: isolate; overflow: clip; overflow-clip-margin: 28px; }
.il--short { min-height: 300px; }
.il--card { min-height: 0; }
.bento__art.il { height: 280px; }

/* ── Glow panel: a soft tinted square with blurred edges, sits behind the pieces ── */
.il-glow { position: absolute; z-index: -1; inset: 4% 8% 4% 6%; border-radius: 48px; background: linear-gradient(160deg, var(--g0) 0%, var(--g1) 55%, var(--g2) 100%);
  filter: blur(18px); opacity: .95; }
.il-glow--sky { --g0: var(--sky-glow); --g1: var(--sky-soft); --g2: var(--sky-tint); }
.il-glow--peach { --g0: var(--peach-glow); --g1: var(--peach-soft); --g2: var(--peach-tint); }
.il-glow--accent { --g0: var(--accent-glow); --g1: var(--accent-soft); --g2: var(--accent-tint); }
.il-glow--left { inset: 6% 26% 6% 0; }
.il-glow--right { inset: 6% 0 6% 26%; }

/* ── Fades: pieces leave the stage softly (to the right, the bottom, or both) ── */
.il-fade-r { -webkit-mask: linear-gradient(90deg, #000 62%, transparent 98%); mask: linear-gradient(90deg, #000 62%, transparent 98%); }
.il-fade-b { -webkit-mask: linear-gradient(180deg, #000 60%, transparent 98%); mask: linear-gradient(180deg, #000 60%, transparent 98%); }
.il-fade-rb { -webkit-mask: radial-gradient(130% 120% at 0 0, #000 55%, transparent 88%); mask: radial-gradient(130% 120% at 0 0, #000 55%, transparent 88%); }

/* ── Fields: dot field and line grid (always with a radial fade) ── */
.il-dots, .il-grid { position: absolute; z-index: -1; inset: 0; pointer-events: none;
  -webkit-mask: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 78%); mask: radial-gradient(ellipse 70% 70% at 50% 50%, #000 30%, transparent 78%); }
.il-dots { background-image: radial-gradient(var(--line-2) 1.3px, transparent 1.5px); background-size: 14px 14px; }
.il-grid { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 44px 44px; background-position: center; }
.il-floor { position: absolute; z-index: -1; left: -20%; right: -20%; bottom: -10%; height: 70%; transform: perspective(600px) rotateX(58deg); transform-origin: bottom;
  background-image: linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px); background-size: 56px 56px;
  -webkit-mask: linear-gradient(0deg, #000 10%, transparent 90%); mask: linear-gradient(0deg, #000 10%, transparent 90%); }

/* ── Piece: absolutely placed inside the stage (use --ix --iy --iw --ir --ib, % of the stage) ── */
.il-abs { position: absolute; left: var(--ix, auto); top: var(--iy, auto); right: var(--ir, auto); bottom: var(--ib, auto); width: var(--iw, auto); }

/* ── Window (light chrome) and its tinted variant (the whole window washed in the glow colour) ── */
.il-win { border-radius: 14px; background: var(--bg); box-shadow: var(--shadow-window); overflow: hidden; }
.il-win__bar { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.il-win__bar > i { width: 10px; height: 10px; border-radius: 50%; background: var(--tl-1); }
.il-win__bar > i:nth-child(2) { background: var(--tl-2); } .il-win__bar > i:nth-child(3) { background: var(--tl-3); }
.il-tint { --t: var(--sky); }
.il-tint.il-win { background: var(--sky-soft); box-shadow: 0 30px 60px -30px rgba(3, 105, 161, .45), 0 0 0 1px rgba(255, 255, 255, .6); }
.il-tint .il-win__bar { border-color: rgba(3, 105, 161, .12); }
.il-tint .il-win__bar > i { background: rgba(3, 105, 161, .25); }
.il-tint--accent.il-win { background: var(--accent-soft); box-shadow: 0 30px 60px -30px rgba(var(--accent-rgb), .45), 0 0 0 1px rgba(255, 255, 255, .6); }
.il-tint--accent { --t: var(--accent-ink); }
.il-side { display: grid; gap: 4px; padding: 16px 12px; }
.il-side > span { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 9px; font: 500 14px/1 var(--font); color: var(--t, var(--text-2)); }
.il-side > span.on { background: var(--bg); box-shadow: var(--shadow-pop); color: var(--text); }
.il-side .ico { width: 18px; height: 18px; }

/* ── Screen: dark bezel with a wallpaper photo; a dock strip ── */
.il-screen { padding: 12px; border-radius: 22px; background: var(--ink-band); box-shadow: var(--shadow-window); }
.il-screen > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; }
.il-dock { position: absolute; left: 50%; bottom: 20px; display: flex; gap: 8px; padding: 8px; border-radius: 14px; transform: translateX(-50%); background: rgba(255, 255, 255, .45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.il-dock i { width: 26px; height: 26px; border-radius: 7px; background: var(--bg); }
.il-dock i:nth-child(2) { background: var(--accent); } .il-dock i:nth-child(3) { background: var(--peach-glow); } .il-dock i:nth-child(4) { background: var(--sky-glow); }

.il-screen:not(.il-abs) { position: relative; }

/* ── Glass panel (dark) floating on a screen ── */
.il-dark { padding: 12px 16px; border-radius: 14px; background: rgba(9, 9, 11, .62); color: var(--on-dark); box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), var(--shadow-pop); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font: 600 13px/1.2 var(--font); }

/* ── Rim: a photo in a thick white frame ── */
.il-rim { padding: 8px; border-radius: 20px; background: var(--bg); box-shadow: var(--shadow-card); }
.il-rim > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 15px; }

/* ── Control rail: record button + small controls beside a photo ── */
.il-rail { display: grid; justify-items: center; align-content: start; gap: 16px; padding: 8px 8px; }
.il-rail__rec { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--rec); box-shadow: 0 6px 14px -6px rgba(229, 56, 59, .7); }
.il-rail__rec::after { content: ""; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 4px var(--on-accent); }
.il-rail .ico { color: var(--muted); }
.il-rail b { font: 600 14px/1 var(--font); color: var(--rec-ink); font-variant-numeric: tabular-nums; }

/* ── Toolbar: a glass pill row of tools, a field and one accent action ── */
.il-bar { display: inline-flex; align-items: center; gap: 8px; padding: 8px; border-radius: 18px; background: var(--glass); box-shadow: 0 0 0 1px rgba(255, 255, 255, .8), var(--shadow-card); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.il-bar__tool { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--muted); }
.il-bar__tool.on { background: var(--bg); color: var(--accent-ink); box-shadow: var(--shadow-pop); }
.il-bar__sep { width: 2px; height: 22px; margin: 0 4px; border-radius: 1px; background: var(--line-2); }
.il-bar__field { padding: 12px 16px; border-radius: 12px; background: var(--surface); font: 500 14px/1 var(--font); color: var(--text); white-space: nowrap; }
.il-bar__go { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-btn); }
.il-bar--sm { padding: 5px; border-radius: 14px; }
.il-bar--sm .il-bar__tool { width: 34px; height: 34px; border-radius: 10px; }

/* ── Pointers: arrow cursor, hand, tooltip ── */
.il-cursor { width: 30px; height: 34px; filter: drop-shadow(0 3px 4px rgba(24, 24, 27, .35)); }
.il-hand { width: 46px; height: 52px; filter: drop-shadow(0 4px 6px rgba(24, 24, 27, .3)); }
.il-tip { padding: 8px 12px; border-radius: 10px; background: rgba(39, 39, 42, .82); color: var(--on-dark); font: 600 13px/1 var(--font); white-space: nowrap; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: var(--shadow-pop); }

/* ── Annotation: a thick arrow with square handles ── */
.il-arrow { overflow: visible; }
.il-arrow path { fill: none; stroke: var(--peach-glow); stroke-width: 14; stroke-linecap: round; stroke-linejoin: round; }
.il-arrow .il-arrow__ink { stroke: var(--peach); stroke-width: 9; }
.il-handle { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 4px; background: var(--accent); box-shadow: 0 0 0 3px var(--bg), var(--shadow-pop); }

/* ── Ring: a timer ring that sits on a photo's top edge ── */
.il-ring { display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 8px var(--surface), var(--shadow-card); }
.il-ring:not(.il-abs) { position: relative; }
.il-ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--ring, var(--accent)) 0 var(--p, 65%), transparent 0);
  -webkit-mask: radial-gradient(circle, transparent 47px, #000 48px); mask: radial-gradient(circle, transparent 47px, #000 48px); }
.il-ring b { font: 500 34px/1 var(--font-display); letter-spacing: -.03em; color: var(--ring-ink, var(--accent-ink)); }

/* ── Slider: a filled accent bar with a label and a value ── */
.il-abs.il-slider { width: var(--iw, 100%); }
.il-slider { display: flex; align-items: center; overflow: hidden; width: 100%; height: 44px; border-radius: 12px; background: var(--line); box-shadow: var(--shadow-pop); font: 600 15px/1 var(--font); }
.il-slider__fill { display: flex; align-items: center; height: 100%; width: var(--v, 55%); padding: 0 16px; border-radius: 12px 4px 4px 12px; background: linear-gradient(180deg, var(--accent), var(--accent-strong)); color: var(--on-accent); position: relative; }
.il-slider__fill::after { content: ""; position: absolute; right: 8px; top: 12px; bottom: 12px; width: 3px; border-radius: 2px; background: var(--on-accent); }
.il-slider__val { margin-left: auto; padding-right: 16px; color: var(--text-2); }

/* ── Thumbs: small framed tiles, one selected ── */
.il-thumb { padding: 4px; border-radius: 12px; background: var(--bg); box-shadow: var(--shadow-pop); }
.il-thumb.on { box-shadow: 0 0 0 3px var(--accent), var(--shadow-pop); }
.il-doc { display: grid; gap: 8px; padding: 12px; border-radius: 9px; background: var(--surface-2); }
.il-doc__top { height: 10px; width: 60%; border-radius: 3px; background: var(--c, var(--accent)); }
.il-doc i { display: block; height: 6px; border-radius: 3px; background: var(--line-2); }
.il-doc i:nth-of-type(2) { width: 80%; } .il-doc i:nth-of-type(3) { width: 65%; }

/* ── Tilt: a screen standing in perspective on the floor ── */
.il-tilt { transform: perspective(1400px) rotateX(16deg) rotateY(-14deg) rotateZ(3deg); transform-style: preserve-3d; }

/* ── Chips used inside illustrations (1–3 words) ── */
.il-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: var(--bg); box-shadow: var(--shadow-pop); font: 600 13px/1 var(--font); color: var(--text); white-space: nowrap; }
.il-chip .avatar { width: 24px; height: 24px; }

/* ── More atoms (promoted from the catalogue, 2026-10-11): payment card, chart + bars, marked line, waveform, stat, photo thumb + selected, rotate, check badge ── */
/* payment card: the accent piece of a finance illustration */
.il-card { display: grid; grid-template-rows: 1fr auto; aspect-ratio: 1.586; padding: 16px 18px; border-radius: 16px; color: var(--on-accent);
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 45%, var(--deep-2) 100%); box-shadow: 0 30px 60px -24px rgba(var(--accent-rgb), .6), inset 0 1px 0 rgba(255, 255, 255, .25); }
.il-card__chip { width: 34px; height: 26px; border-radius: 6px; background: linear-gradient(135deg, var(--peach-glow), var(--peach-soft)); box-shadow: inset 0 0 0 1px rgba(24, 24, 27, .12); }
.il-card__row { display: flex; align-items: center; justify-content: space-between; font: 600 15px/1 var(--font); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.il-card__mark { display: flex; }
.il-card__mark i { width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .55); }
.il-card__mark i + i { margin-left: -8px; background: rgba(255, 255, 255, .3); }
/* bar chart inside a window */
.il-chart { display: grid; gap: 12px; padding: 16px 18px 18px; }
.il-chart__h { display: flex; align-items: baseline; gap: 12px; font: 600 13px/1 var(--font); color: var(--muted); }
.il-chart__h b { font: 500 24px/1 var(--font-display); letter-spacing: -.03em; color: var(--text); }
.il-bars { display: flex; align-items: flex-end; gap: 8px; height: 112px; }
.il-bars i { flex: 1; height: var(--h); border-radius: 5px 5px 2px 2px; background: var(--line); }
.il-bars i.on { background: var(--sky); }
/* highlighted text span (AI suggestion source) */
.ilc-doc { display: grid; gap: 12px; padding: 20px 22px 28px; }
.il-line { font: 500 17px/1.4 var(--font); color: var(--text); }
.il-mark { padding: 2px 4px; border-radius: 5px; background: var(--peach-soft); box-shadow: inset 0 -2px 0 var(--peach); }
/* audio waveform with a selected region */
.il-wave { position: relative; display: flex; align-items: center; gap: 4px; height: 56px; padding: 0 16px; border-radius: 16px; background: var(--glass); box-shadow: 0 0 0 1px rgba(255, 255, 255, .8), var(--shadow-card); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.il-wave i { position: relative; z-index: 1; flex: 1; height: var(--h); border-radius: 2px; background: var(--line-2); }
.il-wave i.on { background: var(--accent); }
.il-wave__sel { position: absolute; z-index: 0; top: 8px; bottom: 8px; left: var(--a); right: var(--b); border-radius: 8px; background: var(--accent-soft); }
/* big stat on a dark glass tile */
.il-stat { display: grid; gap: 8px; }
.il-stat b { font: 500 32px/1 var(--font-display); letter-spacing: -.03em; }
.il-stat span { display: flex; align-items: center; gap: 8px; color: var(--on-dark); font-weight: 600; }
/* selected thumb without spending the accent */
.il-sel.il-thumb { box-shadow: 0 0 0 3px var(--text), var(--shadow-pop); }
.il-thumb > img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
/* a piece laid at an angle */
.il-rot { transform: rotate(var(--rot, -6deg)); }
/* check badge inside a chip */
.il-ok { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--on-accent); }
.il-ok .ico { width: 14px; height: 14px; }

/* anchor: the hand / tip / cursor rides on the element it acts on, so it stays in place at every width */
.il-anchor { position: relative; }
.il-row-hand { position: absolute; left: 150px; top: 14px; z-index: 1; }
.il-row-tip { position: absolute; left: 136px; top: calc(100% + 26px); z-index: 1; }
.il-side .il-anchor { overflow: visible; }

@media (max-width: 560px) {
  .il, .il-stage { min-height: 320px; overflow-clip-margin: 0px; }
  .il-row-hand { left: 120px; }
  .il-row-tip { left: 100px; }
  .il-ring { width: 88px; height: 88px; }
  .il-ring::before { -webkit-mask: radial-gradient(circle, transparent 36px, #000 37px); mask: radial-gradient(circle, transparent 36px, #000 37px); }
  .il-ring b { font-size: 26px; }
  .il-bar__field { padding: 12px 12px; font-size: 13px; }
}

/* ── Patterns (compositions built from the atoms above) ── */
/* photo + control rail in one rim card */
.il-cam { display: grid; grid-template-columns: 1fr 58px; gap: 4px; }
.il-cam > img { aspect-ratio: 1 / 1; }
/* recording panel on a screen */
.il-rec { position: absolute; left: 9%; top: 14%; display: flex; align-items: center; gap: 12px; }
.il-rec__wave { display: flex; align-items: center; gap: 3px; height: 22px; margin-left: 8px; }
.il-rec__wave i { width: 4px; height: var(--h); border-radius: 2px; background: var(--accent-on-dark); }
/* framed doc + template thumbs + slider */
.il-sum { display: grid; grid-template-columns: 1fr 92px; grid-template-rows: auto auto; gap: 16px; width: min(340px, 86%); }
.il-sum__main .il-doc { height: 100%; min-height: 120px; padding: 16px; gap: 12px; }
.il-sum__main .il-doc i { height: 8px; }
.il-sum__side { display: grid; gap: 12px; }
.il-sum__side .il-doc { padding: 8px; gap: 8px; }
.il-sum__slider { grid-column: 1 / -1; }
/* photo fading into the card, ring on its top edge */
.il-clip { overflow: hidden; }
.il-clip__photo { position: absolute; left: 12%; right: 12%; top: 22%; bottom: 0; width: 76%; height: 100% !important; object-fit: cover; border-radius: 22px 22px 0 0;
  -webkit-mask: linear-gradient(180deg, #000 55%, transparent 100%); mask: linear-gradient(180deg, #000 55%, transparent 100%); }
.il-clip .il-ring { margin-left: -56px; }
/* dark answer chip on a tilted screen */
.il-ask { position: absolute; left: 50%; top: 42%; display: flex; align-items: center; gap: 8px; transform: translateX(-50%); white-space: nowrap; }
.il-ask .ico { color: var(--accent-on-dark); }
/* white context menu */
.il-menu { display: grid; gap: 2px; min-width: 190px; padding: 8px; border-radius: 14px; background: var(--bg); box-shadow: var(--shadow-card); }
.il-menu span { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 9px; font: 500 14px/1 var(--font); color: var(--text-2); }
.il-menu span:first-child { background: var(--accent-soft); color: var(--accent-ink); }
/* video player + reactions timeline */
.il-player { aspect-ratio: 4 / 3; }
.il-player__cursor { position: absolute; right: 18%; top: 34%; }
.il-react { height: 54px; }
.il-react__line { position: absolute; left: 0; right: 0; bottom: 6px; height: 6px; border-radius: 3px; background: var(--line-2); }
.il-react__done { position: absolute; inset: 0 40% 0 0; border-radius: 3px; background: var(--sky); }
.il-react__em { position: absolute; left: var(--ex); top: 0; font-size: 22px; line-height: 1; transform: translateX(-50%); }
.assign-due { margin-left: 4px; padding: 5px 8px; border-radius: 7px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; }