/* Belay product illustrations (plan 04 lane A; B-020, D-028, D-029).
   The product's screens, redrawn in the website's branding: never the app's indigo, no scores,
   tiers, risk words, dollar values or assistant. Names, buildings and numbers are made up.
   Each card is <div class="by-uicard ill ill--NAME" aria-hidden="true"> (the text beside it on the
   page says the same thing) and sits over media: stacked in .by-uicards, or alone as .by-uicard--float.
   Copy-ready HTML for every card: /docs/previews/illustrations. Tokens only (AGENTS.md rules 1 to 8). */

/* ---------- Card ---------- */
/* a fixed width so the card reads the same over any frame; container queries tidy it when narrow */
.by-uicard.ill{width:336px;max-width:100%;padding:var(--space-6);gap:var(--space-4);align-content:start;color:var(--ink);font:400 14px/20px var(--font-sans);text-align:left;container:ill/inline-size;outline:1px solid color-mix(in srgb,var(--on-forest) 12%,transparent);outline-offset:-1px}
.by-uicard.ill--buildings{width:432px}
/* frosted cards follow the theme: white glass in light, dark glass in dark (the edge shows only in dark).
   88%, not the skeletons' 82%: muted text stays above 4.5:1 even over the darkest or brightest photo */
.by-uicard.ill:first-child,.by-uicard--float.ill{background:color-mix(in srgb,var(--surface) 88%,transparent)}
/* in a stack, the stack is as wide as one card and every card fills it */
.by-uicards:has(> .ill){width:336px;max-width:calc(100vw - var(--space-12))}
.by-uicards:has(> .ill--buildings){width:432px}
.by-uicards > .by-uicard.ill{width:auto}

/* ---------- Phones (720px and under) ---------- */
@media (max-width:720px){
  .by-uicard.ill{padding:var(--space-4)}
  /* a lone card leaves its photo clear: it sits just below the photo, overlapping the lower edge,
     as the How it works steps do with their stacks (this outranks a page's own phone rule for the frame) */
  :is(.by-media,.by-panel__media):has(> .ill.by-uicard--float){display:flex;flex-direction:column;aspect-ratio:auto;padding:0;overflow:visible;background:none}
  :is(.by-media,.by-panel__media):has(> .ill.by-uicard--float) > :is(img,video){position:relative;inset:auto;aspect-ratio:4/3;height:auto;border-radius:inherit}
  :is(.by-media,.by-panel__media) > .ill.by-uicard--float{position:relative;inset:auto;transform:none;align-self:center;width:calc(100% - var(--space-8));margin-top:calc(-1 * var(--space-12))}
  /* the hero's frame is too small for a real card, and the same card returns further down the page.
     (belay.css means to hide hero cards under 900px, but its later .by-uicards{display:grid} wins.) */
  .by-uicards--hero:has(> .ill){display:none}
}

/* ---------- Type ---------- */
.ill__title,.ill__name{font-size:16px;line-height:24px;font-weight:500}
.ill__meta{color:var(--ink-muted)}
.ill .by-eyebrow{color:var(--ink-muted)}
.ill .by-tag{justify-self:start;gap:var(--space-1);white-space:nowrap}
.ill .by-tag svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ill__num{font-variant-numeric:tabular-nums}

/* ---------- Building blocks ---------- */
/* a title with something on its right (a tag, a date) */
.ill__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2) var(--space-3);min-width:0}
/* a person or a vendor: a round or square mark, a name, a line under it */
.ill__who{display:flex;align-items:center;gap:var(--space-3);min-width:0}
.ill__id{display:grid;min-width:0}
.ill__id > *{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ill__avatar,.ill__badge,.ill__tile{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-pill);background:var(--mint);color:var(--pine)}
.ill__avatar{font-size:14px;line-height:20px;font-weight:500;letter-spacing:.04em}
.ill__avatar--sm{width:32px;height:32px}
.ill__tile{border-radius:var(--radius-lg);background:var(--surface-mist);color:var(--ink-muted)}
.ill__list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2);min-width:0}
.ill__list > li{display:flex;align-items:center;gap:var(--space-3);min-width:0}
.ill__rows{gap:var(--space-3)}
/* a section under a hairline, often with a mono label (after .ill__list, so a list can be a group) */
.ill__group{display:grid;gap:var(--space-2);padding-top:var(--space-4);border-top:1px solid var(--hairline);min-width:0}
/* line icons: 1.5px outline, pine (brand book, iconography) */
.ill__icon{flex:none;width:20px;height:20px;color:var(--pine);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ill__tile .ill__icon{color:inherit}
/* status: always a word with a check or a dot, never color alone */
.ill__status{display:inline-flex;align-items:center;gap:var(--space-2);margin-left:auto;white-space:nowrap}
.ill__check{flex:none;width:14px;height:12px;overflow:visible}
.ill__check path{fill:none;stroke:var(--success);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ill__badge .ill__check{width:18px;height:15px}
.ill__dot{flex:none;width:8px;height:8px;border-radius:var(--radius-pill);background:var(--ink-muted)}
.ill__dot--done{background:var(--success)}
.ill__dot--new{background:var(--teal)}
.ill__dot--due{background:none;box-shadow:inset 0 0 0 2px var(--ink-muted)}
/* quiet bars: a mist track with a pine fill; --v is the share, 0 to 1 */
.ill__bar{position:relative;display:block;height:6px;border-radius:var(--radius-pill);background:var(--surface-mist)}
.ill__bar::before{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--v,0) * 100%);border-radius:inherit;background:var(--pine)}
/* a footer line under a hairline */
.ill__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);padding-top:var(--space-4);border-top:1px solid var(--hairline);color:var(--ink-muted)}

/* ---------- Themes in written feedback ---------- */
.ill--themes .ill__list{gap:var(--space-3)}
.ill--themes .ill__list > li{display:grid;gap:var(--space-2)}

/* ---------- Connections ---------- */
.ill--connections .ill__status{color:var(--ink)}

/* ---------- The action loop ---------- */
/* one bar split by status (--v is each part's count), then the counts, then people */
.ill__seg{display:flex;gap:2px;height:6px}
.ill__seg > span{flex:var(--v,1) 1 0;border-radius:var(--radius-pill);background:var(--ink-muted)}
.ill__seg > .ill__seg-done{background:var(--success)}
.ill__seg > .ill__seg-new{background:var(--teal)}
.ill__seg > .ill__seg-due{background:var(--hairline)}
.ill__legend{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}
.ill__legend > li{display:grid;align-content:start;gap:var(--space-1);color:var(--ink-muted)}
.ill__legend .ill__num{display:flex;align-items:center;gap:var(--space-2);font-size:16px;line-height:24px;font-weight:500;color:var(--ink)}
/* narrow: one status per line, count then words */
@container ill (max-width:280px){
  .ill__legend{grid-template-columns:minmax(0,1fr);gap:var(--space-1)}
  .ill__legend > li{display:flex;align-items:center;gap:var(--space-3)}
  .ill__legend .ill__num{flex:none;min-width:var(--space-8)}
}

/* ---------- Your buildings ---------- */
.ill__table{display:grid;min-width:0}
/* a row: building, then its three figures; a tag after them takes its own line under the name */
.ill__tr{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:var(--space-1) var(--space-3);align-items:end;padding-block:var(--space-3);border-top:1px solid var(--hairline)}
.ill__tr:first-child{padding-top:0;border-top:0;color:var(--ink-muted)}
.ill__tr:last-child{padding-bottom:0}
.ill__tr:not(:first-child){font-size:16px;line-height:24px}
.ill__tr > *{min-width:0}
.ill__tr > :nth-child(-n+4):not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
.ill__tr > :first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ill__tr > .by-tag{grid-column:1 / -1}
/* narrow: the third figure steps out */
@container ill (max-width:320px){
  .ill__tr{grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr))}
  .ill__tr > :nth-child(4){display:none}
}

/* ---------- One building: what changed ---------- */
.ill__kv{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2)}
.ill__kv > li{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3)}
.ill__kv > li > :last-child{white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------- Formula-based reasons ---------- */
.ill__rank{flex:none;display:grid;place-items:center;width:24px;height:24px;border-radius:var(--radius-pill);background:var(--mint);color:var(--pine);font-variant-numeric:tabular-nums}
.ill__src{margin-left:auto;color:var(--ink-muted);white-space:nowrap}

/* ---------- Motion ---------- */
/* The site's scroll reveal (js/site.js) marks a card, or the frame it sits in, .is-visible when it
   comes on screen. Each card then fades in on its own, one after another down a stack, and its
   checks draw in. Without the reveal (no script, reduced motion) the cards simply stand still. */
@media (prefers-reduced-motion:no-preference){
  .by-uicards > .ill:nth-child(2){--ill-n:1}
  .by-uicards > .ill:nth-child(3){--ill-n:2}
  .js-reveal .ill.reveal{transition:none}
  .ill.is-visible,.is-visible .ill{animation:ill-in .7s cubic-bezier(.22,.61,.36,1) calc(.35s + var(--ill-n,0) * .25s) backwards}
  :is(.ill.is-visible,.is-visible .ill) .ill__check path{stroke-dasharray:16;animation:ill-draw .45s ease calc(.85s + var(--ill-n,0) * .25s) backwards}
}
@keyframes ill-in{from{opacity:0;translate:0 var(--space-2)}}
@keyframes ill-draw{from{stroke-dashoffset:16}}