/* wild-meme / group-chat
   The whole page is one group chat: a phone on the hero blurred into a wallpaper,
   a chat header with the mascot as the group photo, the features pinned under it,
   and every section arriving as messages (topic pills, bubbles, a photo album, a
   poll, a forwarded post, questions sent from "you" on the right, answers on the
   left). The chat-info card beside the phone carries the facts, the links and the
   topics (nav); the composer at the bottom holds the contract and copies it.
   Polarity: light, small, system type, round bubbles. The loudest thing on the
   page is a 36px headline, which is exactly why it is not the other wild skins. */

:root {
  --gc-ink: #101418;
  --gc-muted: #6a7480;
  --gc-in: #ffffff;
  --gc-out: color-mix(in oklab, var(--wl-accent) 20%, #ffffff);
  --gc-out-ink: color-mix(in oklab, var(--wl-accent-on-light) 55%, #0c1a10);
  --gc-name: var(--wl-accent-on-light);
  --gc-chat: color-mix(in oklab, var(--wl-secondary) 20%, #e9ede2);
  --gc-dots: color-mix(in oklab, var(--wl-accent) 14%, #d2d8c8);
  --gc-pill: rgb(24 30 38 / 0.42);
  --gc-key: rgb(255 255 255 / 0.66);
  --gc-r: 18px;
  --gc-ticks: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 17 10%27%3E%3Cpath d=%27M1 5.5l3 3L11 1.5M7 8.5l7-7%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.8%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  --gc-phone-w: 440px;
  --gc-shadow: 0 1px 1.5px rgb(16 24 32 / 0.16);

  --v-bg: #1c2230;
  --v-fg: var(--gc-ink);
  --v-soft: #3c4652;
  --v-faint: var(--gc-muted);
  --v-line: rgb(16 20 24 / 0.1);
  --v-line-strong: rgb(16 20 24 / 0.22);
  --v-surface: #f3f5f2;
  --v-surface-2: #e6ebe4;
  --v-card-bg: var(--gc-in);
  --v-accent: var(--wl-accent);
  --v-accent-text: var(--wl-accent-on-light);
  --v-on-accent: var(--wl-on-accent);
  --v-secondary: var(--wl-secondary);
  --v-seg-1: var(--wl-accent);
  --v-seg-2: color-mix(in oklab, var(--wl-secondary) 80%, #2a8);
  --v-seg-3: #4a9df0;
  --v-seg-4: #f0a13a;
  --v-seg-5: #9b6cf0;
  --v-seg-6: #9aa5b1;
  --v-font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Liberation Sans", sans-serif;
  --v-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Liberation Sans", sans-serif;
  --v-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --v-display-weight: 700;
  --v-display-tracking: -0.01em;
  --v-display-case: none;
  --v-display-lh: 1.15;
  --v-title-size: 0.84rem;
  --v-body-size: 15.5px;
  --v-radius: var(--gc-r);
  --v-radius-sm: 12px;
  --v-radius-lg: 24px;
  --v-border: 0;
  --v-shadow: var(--gc-shadow);
  --v-card-pad: 12px;
  --v-maxw: none;
  --v-pad-x: 0px;
  --v-sec-gap: 14px;
  --v-ease: cubic-bezier(0.2, 0.9, 0.3, 1);
  --v-spring: cubic-bezier(0.3, 1.4, 0.5, 1);

  --wl-label-lore: "Story";
  --wl-label-features: "Pinned";
  --wl-label-supply: "Poll";
  --wl-label-flow: "How to";
  --wl-label-timeline: "Plans";
  --wl-label-comparison: "Compare";
  --wl-label-stats: "Numbers";
  --wl-label-tweet: "Forwarded";
  --wl-label-gallery: "Photos";
  --wl-label-facts: "Confirmed";
  --wl-label-quotes: "Members";
  --wl-label-faq: "Questions";
  --wl-label-access: "Contract";
}

html { background: var(--v-bg); color-scheme: light; }
body { background: transparent; font-size: var(--v-body-size); line-height: 1.38; color: var(--gc-ink); }

/* ------------------------------------------------------------ wallpaper */
.gc-wall {
  position: fixed; inset: 0; z-index: -2; overflow: hidden;
  background: radial-gradient(circle at 20% 20%, var(--wl-accent), transparent 60%), radial-gradient(circle at 80% 70%, var(--wl-secondary), transparent 60%), #2a2f3a;
}
.gc-wall__img { position: absolute; inset: -90px; width: calc(100% + 180px); height: calc(100% + 180px); max-width: none; object-fit: cover; filter: blur(44px) saturate(1.35) brightness(0.92); }
.gc-wall::after { content: ""; position: absolute; inset: 0; background: rgb(10 14 22 / 0.18); }

/* ------------------------------------------------------------ desk: phone + info */
.gc-desk {
  display: grid;
  grid-template-columns: minmax(0, var(--gc-phone-w)) minmax(0, 330px);
  justify-content: center; align-items: start;
  gap: clamp(28px, 5vw, 72px);
  padding: 26px 20px 0;
}

.gc-phone {
  position: relative;
  min-width: 0;
  min-height: calc(100svh - 26px);
  display: flex; flex-direction: column;
  background-color: var(--gc-chat);
  background-image:
    radial-gradient(circle at 12px 14px, var(--gc-dots) 2.2px, transparent 2.8px),
    radial-gradient(circle at 44px 40px, var(--gc-dots) 1.4px, transparent 2px),
    radial-gradient(circle at 30px 64px, var(--gc-dots) 1.8px, transparent 2.4px);
  background-size: 64px 80px;
  border: 11px solid #0e1014;
  border-bottom-width: 14px;
  border-radius: 48px;
  box-shadow: 0 0 0 1.5px rgb(255 255 255 / 0.14), 0 50px 120px -30px rgb(0 0 0 / 0.65);
  isolation: isolate;
}

/* header: status icons, the chat bar, the pinned strip (sticky together) */
.gc-head { position: sticky; top: 0; z-index: 20; border-radius: 37px 37px 0 0; background: rgb(255 255 255 / 0.9); backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 1px 0 rgb(0 0 0 / 0.08); }
.gc-status { display: flex; justify-content: flex-end; align-items: center; gap: 6px; height: 30px; padding: 0 26px; }
.gc-status i { display: block; }
.gc-status i:not(.gc-status__bat) { background: var(--gc-ink); }
.gc-status__sig { width: 17px; height: 10px; clip-path: polygon(0 100%, 22% 100%, 22% 70%, 0 70%, 0 100%, 26% 100%, 26% 48%, 48% 48%, 48% 100%, 52% 100%, 52% 25%, 74% 25%, 74% 100%, 78% 100%, 78% 0, 100% 0, 100% 100%); }
.gc-status__wifi { width: 15px; height: 11px; clip-path: polygon(50% 100%, 0 30%, 18% 12%, 50% 0, 82% 12%, 100% 30%); }
.gc-status__bat { width: 24px; height: 11px; border-radius: 3px; box-shadow: inset 0 0 0 1.5px var(--gc-ink); background: linear-gradient(90deg, var(--gc-ink) 0 72%, transparent 72%) 3px 3px / calc(100% - 6px) 5px no-repeat; }
.gc-bar { display: flex; align-items: center; gap: 10px; padding: 4px 14px 10px 8px; min-width: 0; }
.gc-bar__back { flex: none; width: 28px; height: 28px; display: grid; place-items: center; }
.gc-bar__back::before { content: ""; width: 11px; height: 11px; border-left: 2.5px solid var(--wl-accent-on-light); border-bottom: 2.5px solid var(--wl-accent-on-light); rotate: 45deg; margin-left: 6px; }
.gc-bar__avatar { flex: none; width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.gc-bar__who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.gc-bar__name { font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-bar__sub { font-size: 0.82rem; color: var(--gc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-bar__icons { flex: none; display: flex; gap: 14px; color: var(--wl-accent-on-light); }
.gc-ico { display: block; width: 20px; height: 20px; position: relative; }
.gc-ico--search::before { content: ""; position: absolute; left: 1px; top: 1px; width: 12px; height: 12px; border: 2.2px solid currentColor; border-radius: 50%; }
.gc-ico--search::after { content: ""; position: absolute; left: 13px; top: 12px; width: 2.4px; height: 7px; background: currentColor; rotate: -45deg; border-radius: 2px; }
.gc-ico--more { background: radial-gradient(circle, currentColor 2.2px, transparent 2.6px) 50% 0 / 20px 7px repeat-y; }

/* pinned: the features, one at a time (app script cycles them on tap) */
.gc-pinned { border-top: 1px solid rgb(0 0 0 / 0.07); cursor: pointer; }
.gc-pinned .wl-sec { padding: 0; }
.gc-pinned .wl-sec__inner { max-width: none; }
.gc-pinned .wl-sec__head { display: none; }
.gc-pinned .wl-features { display: block; position: relative; padding: 7px 14px 8px 24px; }
.gc-pinned .wl-features::before { content: ""; position: absolute; left: 12px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, rgb(0 0 0 / 0.12) 0 var(--gc-pin-a, 0%), var(--wl-accent) var(--gc-pin-a, 0%) var(--gc-pin-b, 100%), rgb(0 0 0 / 0.12) var(--gc-pin-b, 100%)); }
.gc-pinned .wl-feature { display: none; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; padding: 0 0 0 4px; background: none; border: 0; border-radius: 0; animation: none !important; }
.gc-pinned .wl-feature:first-child { display: grid; }
.gc-pinned[data-gc-pin] .wl-feature { display: none; }
.gc-pinned[data-gc-pin] .wl-feature.is-pinned { display: grid; animation: gc-pin 0.35s var(--v-ease) both !important; }
.gc-pinned .wl-feature:hover { transform: none; }
.gc-pinned .wl-feature .wl-ord { position: static; grid-column: 1; grid-row: 1; font: 700 0.78rem/1.3 var(--v-font-body); color: var(--wl-accent-on-light); letter-spacing: 0; }
.gc-pinned .wl-feature .wl-ord::before { content: "Pinned message #"; }
.gc-pinned .wl-feature__title { grid-column: 1; grid-row: 2; margin: 0; font: 600 0.9rem/1.3 var(--v-font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-pinned .wl-feature__text { grid-column: 1; grid-row: 3; margin: 0; font-size: 0.84rem; line-height: 1.3; color: var(--gc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-pinned .wl-feature__icon { grid-column: 2; grid-row: 1 / span 3; align-self: center; width: 38px; height: 38px; margin: 0; border-radius: 9px; background: color-mix(in oklab, var(--wl-accent) 16%, #fff); color: var(--wl-accent-on-light); }
.gc-pinned .wl-feature__icon .wl-glyph { width: 20px; height: 20px; }

/* ------------------------------------------------------------ the transcript */
.gc-chat { flex: 1 0 auto; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 12px 18px; min-width: 0; }

/* every bubble */
.gc-msg,
.gc-flow .wl-lore__lead, .gc-flow .wl-lore__p,
.gc-flow .wl-quote, .gc-flow .wl-qa__q, .gc-flow .wl-qa__a,
.gc-flow .wl-gallery, .gc-flow .wl-post, .gc-flow .wl-infographic,
.gc-flow .wl-facts, .gc-flow .wl-access, .gc-flow .wl-milestones, .gc-flow .wl-features {
  position: relative;
  max-width: min(86%, 380px);
  margin: 0;
  padding: 7px 11px 8px;
  background: var(--gc-in); color: var(--gc-ink);
  border: 0; border-radius: var(--gc-r);
  box-shadow: var(--gc-shadow);
  font-size: var(--v-body-size); line-height: 1.38; font-weight: 400;
  text-wrap: pretty; overflow-wrap: anywhere;
}
.gc-msg--in, .gc-flow .wl-lore__lead, .gc-flow .wl-quote, .gc-flow .wl-qa__a { border-bottom-left-radius: 6px; }

.gc-day, .gc-flow .wl-sec__head {
  align-self: center; margin: 10px auto 6px; padding: 4px 12px 5px;
  max-width: 86%;
  background: var(--gc-pill); color: #fff;
  border-radius: 999px; backdrop-filter: blur(6px);
  font: 600 0.8rem/1.3 var(--v-font-body); text-align: center;
}
.gc-flow .wl-sec__head { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 6px; width: fit-content; }
.gc-flow .wl-kicker { margin: 0; font: 600 0.8rem/1.3 var(--v-font-body); letter-spacing: 0; text-transform: none; color: rgb(255 255 255 / 0.72); gap: 0; }
.gc-flow .wl-kicker .wl-ord { display: none; }
.gc-flow .wl-kicker__label::after { content: " \00b7"; }
.gc-flow .wl-sec__title { font: 700 0.8rem/1.3 var(--v-font-body); letter-spacing: 0; color: #fff; text-transform: none; }

/* the sender line on a message from the project (--gc-sender is the project's name, set by the app script) */
.gc-from { display: block; margin-bottom: 2px; font: 700 0.84rem/1.3 var(--v-font-body); color: var(--gc-name); }
.gc-flow .wl-lore__lead::before, .gc-flow .wl-qa__a::before, .gc-flow .wl-access::before, .gc-flow .wl-infographic::before, .gc-flow .wl-milestones::before, .gc-flow .wl-gallery::before {
  content: var(--gc-sender, ""); display: block; margin-bottom: 2px;
  font: 700 0.84rem/1.3 var(--v-font-body); color: var(--gc-name);
}

/* hero messages */
.gc-msg--photo { padding: 3px; overflow: hidden; }
.gc-msg--photo .gc-from { padding: 4px 8px 2px; }
.gc-photo { position: relative; width: 100%; aspect-ratio: 2 / 1.1; border-radius: 15px 15px 6px 6px; overflow: hidden; background: var(--gc-chat); }
.gc-photo.wl-media--none { display: none; }
.gc-photo .wl-hero-img { width: 100%; height: 100%; object-fit: cover; }
.gc-msg--photo { width: min(86%, 380px); }
.gc-headline { margin: 0; padding: 8px 9px 6px; font: 800 clamp(1.55rem, 2.6vw, 2.1rem)/1.12 var(--v-font-display); letter-spacing: -0.02em; text-wrap: balance; }
.gc-msg--bare { width: min(70%, 300px); }
.gc-photo__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 15px; }
.gc-sub { max-width: min(86%, 380px); }
.gc-quick { font-size: 1rem; }
.gc-quick + .gc-quick, .gc-sub + .gc-quick { border-top-left-radius: 6px; }

/* the calls to action as an inline keyboard under the message */
.gc-keys { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; width: min(86%, 380px); margin: 0 0 6px; }
.gc-keys .wl-btn {
  justify-content: center; gap: 6px;
  padding: 10px 10px; border: 0; border-radius: 10px;
  background: var(--gc-key); color: var(--gc-ink);
  backdrop-filter: blur(8px);
  font: 600 0.88rem/1.2 var(--v-font-body); letter-spacing: 0;
  box-shadow: var(--gc-shadow);
}
.gc-keys .wl-btn:hover { transform: none; background: #fff; }
.gc-keys .wl-btn:first-child { grid-column: 1 / -1; }
.gc-keys .wl-btn--primary { background: var(--wl-accent); color: var(--wl-on-accent); }
.gc-keys .wl-btn--primary:hover { background: var(--wl-accent); box-shadow: var(--gc-shadow); }
.gc-keys .wl-btn__ca { display: none; }
.gc-keys .wl-glyph { width: 16px; height: 16px; }

/* ------------------------------------------------------------ sections as messages */
.gc-flow { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
.gc-flow .wl-sec { padding: 0; margin: 0; }
.gc-flow .wl-sec__inner { max-width: none; }
.gc-flow .wl-sec__body { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
[data-wl-reveal="on"] .gc-flow .wl-reveal { transform: translateY(14px); }

/* story: a run of bubbles */
.gc-flow .wl-lore { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; max-width: none; }
.gc-flow .wl-lore__p { border-top-left-radius: 6px; }

/* members' messages: the quote's author on top, a colour per member */
.gc-flow .wl-quotes { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.gc-flow .wl-quote { display: flex; flex-direction: column-reverse; }
.gc-flow .wl-quote::before { content: none; }
.gc-flow .wl-quote__text { margin: 0; font-size: var(--v-body-size); font-weight: 400; line-height: 1.38; }
.gc-flow .wl-quote__who { margin-bottom: 2px; font: 700 0.84rem/1.3 var(--v-font-body); color: var(--gc-c, #2b8a3e); }
.gc-flow .wl-quote__who a { color: inherit; }
.gc-flow .wl-quote:nth-child(6n+1) { --gc-c: #d9480f; }
.gc-flow .wl-quote:nth-child(6n+2) { --gc-c: #1c7ed6; }
.gc-flow .wl-quote:nth-child(6n+3) { --gc-c: #2b8a3e; }
.gc-flow .wl-quote:nth-child(6n+4) { --gc-c: #9c36b5; }
.gc-flow .wl-quote:nth-child(6n+5) { --gc-c: #c2255c; }
.gc-flow .wl-quote:nth-child(6n+6) { --gc-c: #0c8599; }

/* questions from you (right, tinted, read ticks), answers from the project (left) */
.gc-flow .wl-faq { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; max-width: none; }
.gc-flow .wl-qa { background: none; border: 0; }
.gc-flow .wl-qa__q { display: block; width: fit-content; margin-left: auto; padding-right: 36px; background: var(--gc-out); color: var(--gc-out-ink); font-weight: 400; border-bottom-right-radius: 6px; cursor: pointer; }
.gc-flow .wl-qa__q::after { content: ""; position: absolute; right: 11px; bottom: 10px; width: 17px; height: 10px; background: currentColor; opacity: 0.75; -webkit-mask: var(--gc-ticks) center / contain no-repeat; mask: var(--gc-ticks) center / contain no-repeat; }
.gc-flow .wl-qa__sign { display: none; }
.gc-flow .wl-qa__a { width: fit-content; margin-top: 4px; padding: 7px 11px 8px; color: var(--gc-ink); }

/* photos: one album bubble */
.gc-flow .wl-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; padding: 3px; width: min(86%, 380px); overflow: hidden; }
.gc-flow .wl-gallery::before { grid-column: 1 / -1; padding: 3px 8px 1px; }
.gc-flow .wl-gallery[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.gc-flow .wl-shot { border-radius: 4px; }
.gc-flow .wl-gallery .wl-shot:nth-child(2) { grid-column: 1 / -1; border-radius: 14px 14px 4px 4px; }
.gc-flow .wl-shot img { aspect-ratio: 4 / 3; }
.gc-flow .wl-gallery .wl-shot:nth-child(2) img { aspect-ratio: 16 / 9; }
.gc-flow .wl-shot__caption { left: 6px; right: auto; bottom: 6px; max-width: calc(100% - 12px); padding: 2px 8px; border-radius: 999px; background: rgb(0 0 0 / 0.45); font-size: 0.74rem; }
.gc-flow .wl-shot:hover img { transform: none; }

/* the post: forwarded */
.gc-flow .wl-post { width: min(86%, 380px); padding: 7px 11px 8px; }
.gc-flow .wl-post::before { content: "Forwarded message"; display: block; margin-bottom: 4px; font: 600 0.8rem/1.3 var(--v-font-body); color: var(--wl-accent-on-light); }
.gc-flow .wl-post__head { gap: 8px; margin-bottom: 6px; padding-left: 9px; border-left: 3px solid var(--wl-accent); }
.gc-flow .wl-post__avatar { width: 30px; height: 30px; font-size: 0.85rem; }
.gc-flow .wl-post__author { font-size: 0.88rem; }
.gc-flow .wl-post__handle { font-size: 0.8rem; }
.gc-flow .wl-post__brand .wl-glyph { width: 16px; height: 16px; }
.gc-flow .wl-post__text { padding-left: 12px; border-left: 3px solid var(--wl-accent); font-size: var(--v-body-size); line-height: 1.38; }
.gc-flow .wl-post__meta { margin-top: 6px; padding-top: 0; border: 0; font-size: 0.78rem; }
.gc-flow .wl-post__meta:empty { display: none; }
.gc-flow .wl-post__link { margin-left: 0; font-weight: 600; }

/* the supply as a poll: options with bars, the total under them */
.gc-flow .wl-infographic { width: min(86%, 380px); gap: 10px; }
.gc-flow .wl-graphic--supply { display: block; }
.gc-flow .wl-donut { display: flex; flex-direction: column-reverse; gap: 6px; justify-items: stretch; }
.gc-flow .wl-donut__chart { width: auto; aspect-ratio: auto; }
.gc-flow .wl-donut__svg { display: none; }
.gc-flow .wl-donut__center { position: static; inset: auto; display: flex; gap: 6px; align-items: baseline; justify-content: flex-start; text-align: left; }
.gc-flow .wl-donut__value { font: 600 0.84rem/1.3 var(--v-font-body); letter-spacing: 0; color: var(--gc-muted); }
.gc-flow .wl-donut__label { margin: 0; font: 400 0.84rem/1.3 var(--v-font-body); letter-spacing: 0; text-transform: none; color: var(--gc-muted); }
.gc-flow .wl-legend { width: 100%; gap: 12px; }
.gc-flow .wl-legend__item { position: relative; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; padding: 0 0 10px; border: 0; }
.gc-flow .wl-legend__swatch { display: none; }
.gc-flow .wl-legend__value { grid-column: 1; grid-row: 1; font: 700 0.9rem/1.3 var(--v-font-body); min-width: 3.2em; }
.gc-flow .wl-legend__label { grid-column: 2; grid-row: 1; font-size: 0.95rem; }
.gc-flow .wl-legend__item::after { content: ""; position: absolute; left: 0; bottom: 0; height: 5px; width: calc(var(--gc-pct, 0) * 1%); max-width: 100%; border-radius: 3px; background: var(--wl-accent); }
.gc-flow .wl-in .wl-legend__item::after { animation: gc-bar 0.9s var(--v-ease) both; }
.gc-flow .wl-stats { gap: 4px; background: none; border: 0; border-radius: 0; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.gc-flow .wl-stat { padding: 8px 10px; background: var(--v-surface); border-radius: 10px; gap: 2px; }
.gc-flow .wl-stat__label { font: 400 0.76rem/1.3 var(--v-font-body); letter-spacing: 0; text-transform: none; color: var(--gc-muted); }
.gc-flow .wl-stat__value { font: 700 1.05rem/1.2 var(--v-font-body); letter-spacing: 0; }
.gc-flow .wl-stat--word .wl-stat__value { font-size: 1rem; }
.gc-flow .wl-caption { font-size: 0.78rem; color: var(--gc-muted); }
.gc-flow .wl-rings { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gc-flow .wl-ring__value { font-size: 1.5rem; }
.gc-flow .wl-bar { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; }
.gc-flow .wl-bar__track { grid-column: 1 / -1; grid-row: 2; height: 6px; }
.gc-flow .wl-bar__value { font-size: 0.95rem; }
.gc-flow .wl-table th, .gc-flow .wl-table td { padding: 8px 10px; font-size: 0.86rem; }
.gc-flow .wl-flowchart { display: flex; flex-direction: column; gap: 6px; }
.gc-flow .wl-node { flex-direction: column; }
.gc-flow .wl-node__card { padding: 8px 10px; background: var(--v-surface); border: 0; border-radius: 12px; }
.gc-flow .wl-node__card .wl-ord { width: 24px; height: 24px; margin-bottom: 4px; font-size: 0.7rem; }
.gc-flow .wl-node__title { font-size: 0.98rem; }
.gc-flow .wl-node__text { font-size: 0.88rem; }
.gc-flow .wl-node__edge { width: 24px; height: 34px; margin: 4px auto; transform: rotate(90deg); }

/* plans / timeline */
.gc-flow .wl-milestones { gap: 10px; width: min(86%, 380px); }
.gc-flow .wl-milestones::after { content: none; }
.gc-flow .wl-ms { grid-template-columns: 20px 1fr; gap: 10px; }
.gc-flow .wl-ms__dot { width: 20px; height: 20px; }
.gc-flow .wl-ms__title { font-size: 0.98rem; }
.gc-flow .wl-ms__text { font-size: 0.9rem; }

/* features, if they ever land in the flow instead of the pin */
.gc-flow .wl-features { display: grid; gap: 6px; grid-template-columns: minmax(0, 1fr); }
.gc-flow .wl-feature { padding: 0; background: none; border: 0; }

/* the contract, as the project's last message */
.gc-flow .wl-access { width: min(86%, 380px); gap: 8px; }
.gc-flow .wl-access__net { font: 400 0.84rem/1.3 var(--v-font-body); letter-spacing: 0; text-transform: none; color: var(--gc-muted); }
.gc-flow .wl-ca { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; padding: 8px 8px 8px 10px; background: var(--v-surface); border: 0; border-radius: 12px; }
.gc-flow .wl-ca__label { grid-column: 1 / -1; font: 600 0.74rem/1.2 var(--v-font-body); letter-spacing: 0.04em; }
.gc-flow .wl-ca__value { font-size: 0.8rem; line-height: 1.35; }
.gc-flow .wl-copy { padding: 8px 12px; border-radius: 9px; font-weight: 700; font-size: 0.86rem; }
.gc-flow .wl-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.gc-flow .wl-link { justify-content: center; gap: 6px; padding: 9px 8px; border: 0; border-radius: 10px; background: var(--v-surface); font: 600 0.84rem/1.2 var(--v-font-body); color: var(--wl-accent-on-light); }
.gc-flow .wl-link:hover { transform: none; background: var(--v-surface-2); }
.gc-flow .wl-link .wl-glyph { width: 15px; height: 15px; }

/* typing… */
.gc-typing { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 12px; background: var(--gc-in); border-radius: var(--gc-r); border-bottom-left-radius: 6px; box-shadow: var(--gc-shadow); }
.gc-typing__who { font-size: 0.8rem; color: var(--gc-muted); }
.gc-typing__who::after { content: " is typing"; }
.gc-typing__dots { display: inline-flex; gap: 3px; }
.gc-typing__dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--gc-muted); animation: gc-dot 1.2s ease-in-out infinite; }
.gc-typing__dots i:nth-child(2) { animation-delay: 0.15s; }
.gc-typing__dots i:nth-child(3) { animation-delay: 0.3s; }

/* composer: the contract in the field, send = copy */
.gc-compose {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px 10px;
  background: rgb(255 255 255 / 0.92); backdrop-filter: blur(18px);
  border-radius: 0 0 34px 34px;
  box-shadow: 0 -1px 0 rgb(0 0 0 / 0.08);
}
.gc-compose__clip { flex: none; position: relative; width: 26px; height: 26px; border: 2px solid var(--gc-muted); border-radius: 50%; opacity: 0.85; }
.gc-compose__clip::before, .gc-compose__clip::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; background: var(--gc-muted); border-radius: 2px; }
.gc-compose__clip::after { rotate: 90deg; }
.gc-compose__field { flex: 1 1 auto; min-width: 0; padding: 9px 14px; border-radius: 999px; background: var(--v-surface); border: 1px solid rgb(0 0 0 / 0.08); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--gc-ink); }
.gc-compose__send { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px 0 12px; border: 0; border-radius: 999px; background: var(--wl-accent); color: var(--wl-on-accent); font: 700 0.86rem/1 var(--v-font-body); cursor: pointer; }
.gc-compose__send::before { content: ""; width: 14px; height: 14px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%, 12% 56%, 60% 50%, 12% 44%); }
.gc-compose__send:focus-visible { outline: 3px solid var(--wl-accent-on-light); outline-offset: 2px; }

/* ------------------------------------------------------------ chat info */
.gc-info { position: sticky; top: 26px; display: grid; gap: 14px; min-width: 0; }
.gc-info__card { padding: 26px 20px 14px; background: rgb(255 255 255 / 0.9); backdrop-filter: blur(20px) saturate(1.4); border-radius: 26px; box-shadow: 0 30px 80px -30px rgb(0 0 0 / 0.55); text-align: center; }
.gc-info__avatar { width: 104px; height: 104px; margin: 0 auto 12px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px #fff, 0 8px 22px -8px rgb(0 0 0 / 0.5); }
.gc-info__name { margin: 0; font: 700 1.35rem/1.2 var(--v-font-display); overflow-wrap: anywhere; }
.gc-info__tick { margin: 2px 0 0; font-size: 0.9rem; color: var(--gc-muted); }
.gc-info__bio { margin: 12px 0 0; font-size: 0.95rem; }
.gc-info__rows { margin: 16px 0 0; padding: 0; text-align: left; border-top: 1px solid rgb(0 0 0 / 0.08); }
.gc-info__row { display: flex; flex-direction: column-reverse; padding: 9px 2px; border-bottom: 1px solid rgb(0 0 0 / 0.08); }
.gc-info__row dt { font-size: 0.76rem; color: var(--gc-muted); }
.gc-info__row dd { margin: 0; font-size: 0.95rem; color: var(--wl-accent-on-light); overflow-wrap: anywhere; }
.gc-info__row code { font-size: 0.86rem; }
.gc-info__links .wl-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; }
.gc-info__links .wl-link { padding: 7px 12px; border: 0; border-radius: 999px; background: color-mix(in oklab, var(--wl-accent) 12%, #fff); color: var(--wl-accent-on-light); font: 600 0.82rem/1.2 var(--v-font-body); }
.gc-info__links .wl-link:hover { transform: none; }
.gc-info__links .wl-glyph { width: 14px; height: 14px; }
.gc-info__facts .wl-sec { padding: 0; margin-top: 14px; text-align: left; }
.gc-info__facts .wl-sec__inner { max-width: none; }
.gc-info__facts .wl-sec__head { margin: 0 0 6px; }
.gc-info__facts .wl-kicker { margin: 0; font: 700 0.72rem/1.3 var(--v-font-body); letter-spacing: 0.1em; color: var(--gc-muted); }
.gc-info__facts .wl-kicker .wl-ord { display: none; }
.gc-info__facts .wl-sec__title { display: none; }
.gc-info__facts .wl-facts { gap: 0; max-width: none; }
.gc-info__facts .wl-fact { grid-template-columns: 22px 1fr; gap: 10px; padding: 8px 2px; background: none; border: 0; border-bottom: 1px solid rgb(0 0 0 / 0.07); border-radius: 0; font-size: 0.9rem; line-height: 1.35; }
.gc-info__facts .wl-fact:last-child { border-bottom: 0; }
.gc-info__facts .wl-fact__mark { width: 22px; height: 22px; background: color-mix(in oklab, var(--wl-accent) 18%, #fff); color: var(--wl-accent-on-light); }
.gc-info__facts .wl-fact__mark .wl-glyph { width: 13px; height: 13px; }

.gc-info__topics { display: grid; padding: 8px; background: rgb(255 255 255 / 0.9); backdrop-filter: blur(20px); border-radius: 20px; box-shadow: 0 20px 60px -30px rgb(0 0 0 / 0.5); }
.gc-info__topics::before { content: "Topics"; padding: 6px 10px 4px; font: 700 0.72rem/1.3 var(--v-font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gc-muted); }
.gc-info__topics .wl-nav__link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; text-decoration: none; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gc-info__topics .wl-nav__link::before { content: "#"; flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in oklab, var(--wl-accent) 16%, #fff); color: var(--wl-accent-on-light); font-weight: 700; font-size: 0.85rem; }
.gc-info__topics .wl-nav__link:hover, .gc-info__topics .wl-nav__link.is-active { background: color-mix(in oklab, var(--wl-accent) 10%, #fff); }

/* ------------------------------------------------------------ footer */
.gc-foot { padding: 34px 20px 40px; color: #fff; }
.gc-foot .wl-foot { justify-content: center; max-width: 820px; margin: 0 auto; padding: 14px 20px; background: rgb(10 14 22 / 0.45); backdrop-filter: blur(12px); border-radius: 20px; }
.gc-foot .wl-foot__net, .gc-foot .wl-foot__nfa { color: rgb(255 255 255 / 0.75); }
.gc-foot .wl-foot .wl-links { margin-left: 0; }
.gc-foot .wl-link { background: rgb(255 255 255 / 0.14); color: #fff; border: 0; }

/* ------------------------------------------------------------ motion */
@keyframes gc-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes gc-bar { from { width: 0; } }
@keyframes gc-pin { from { opacity: 0; transform: translateY(6px); } }
@keyframes gc-pop { from { opacity: 0; transform: translateY(10px) scale(0.96); } }
.gc-chat > .gc-msg, .gc-chat > .gc-keys { transform-origin: 0 100%; animation: gc-pop 0.45s var(--v-ease) both; }
.gc-chat > :nth-child(2) { animation-delay: 0.1s; }
.gc-chat > :nth-child(3) { animation-delay: 0.35s; }
.gc-chat > :nth-child(4) { animation-delay: 0.55s; }
.gc-chat > :nth-child(5) { animation-delay: 0.8s; }
.gc-chat > :nth-child(6) { animation-delay: 1s; }
.gc-chat > :nth-child(7) { animation-delay: 1.2s; }
.gc-chat > :nth-child(8) { animation-delay: 1.4s; }
.wl-in .wl-lore__lead, .wl-in .wl-lore__p, .wl-in .wl-qa__q, .wl-in .wl-qa__a { animation: gc-pop 0.45s var(--v-ease) both; }
.wl-in .wl-lore__p { animation-delay: 0.3s; }
.wl-in .wl-qa__a { animation-delay: 0.25s; }

/* ------------------------------------------------------------ phone-sized screens: the phone IS the screen */
@media (max-width: 860px) {
  .gc-desk { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0; }
  .gc-phone { border: 0; border-radius: 0; min-height: 100svh; box-shadow: none; }
  .gc-head { border-radius: 0; }
  .gc-status { display: none; }
  .gc-bar { padding-top: 8px; }
  .gc-compose { border-radius: 0; }
  .gc-info { position: static; padding: 18px 12px 0; }
  .gc-chat { padding-left: 10px; padding-right: 10px; }
  .gc-msg, .gc-msg--photo, .gc-keys, .gc-sub,
  .gc-flow .wl-lore__lead, .gc-flow .wl-lore__p, .gc-flow .wl-quote, .gc-flow .wl-qa__q, .gc-flow .wl-qa__a,
  .gc-flow .wl-gallery, .gc-flow .wl-post, .gc-flow .wl-infographic, .gc-flow .wl-access, .gc-flow .wl-milestones { max-width: 88%; }
  .gc-msg--photo, .gc-keys, .gc-flow .wl-gallery, .gc-flow .wl-post, .gc-flow .wl-infographic, .gc-flow .wl-access { width: 88%; }
  .gc-headline { font-size: 1.6rem; }
}

/* a brief whose hero is the quoted post: the first message forwards it */
.gc-photo.wl-media--post { aspect-ratio: auto; overflow: visible; background: none; border-radius: 12px; }
.gc-photo .wl-post--giant { padding: 6px 9px 4px; background: none; border: 0; border-radius: 0; box-shadow: none; }
.gc-photo .wl-post--giant::before { content: "Forwarded message"; display: block; margin-bottom: 4px; font: 600 0.8rem/1.3 var(--v-font-body); color: var(--wl-accent-on-light); }
.gc-photo .wl-post--giant .wl-post__head { gap: 8px; margin-bottom: 6px; padding-left: 9px; border-left: 3px solid var(--wl-accent); }
.gc-photo .wl-post--giant .wl-post__avatar { width: 30px; height: 30px; font-size: 0.85rem; }
.gc-photo .wl-post--giant .wl-post__text { padding-left: 12px; border-left: 3px solid var(--wl-accent); font-size: 1.02rem; line-height: 1.4; font-weight: 400; letter-spacing: 0; }
.gc-photo .wl-post--giant .wl-post__meta { margin-top: 6px; padding-top: 0; border: 0; font-size: 0.76rem; }
.gc-photo .wl-post--giant .wl-post__link { margin-left: 0; }