/* The website (web/site.html): what it needs beyond app.css, whose tokens,
   type and chat classes it uses as they are. One column with a 16px gutter
   on a phone; from 900px a column of up to 1080px with the examples and
   each pictured section in two, the hero centred above them. Sections divided by a hairline, no cards; the
   pictures are the app drawn with its own classes, in a frame bordered
   like an input, with no shadow. Logical properties only. The rules are
   "The website" in constitution.md. */
.site { --gutter: max(16px, calc((100% - 1080px) / 2)); }
.site main { display: block; }

/* the header (.site-bar) is in app.css: the sign-in page has it too */

/* sections: a hairline between them, room around them */
.site-sec { margin-inline: var(--gutter); padding-block: 56px; border-block-start: 1px solid var(--line); }
main > .site-sec:first-child { border-block-start: 0; padding-block-start: 24px; }
.site h1 { font-size: clamp(36px, 7.4vw, 60px); line-height: 1.04; letter-spacing: -0.03em; font-weight: 500; margin-block-end: 18px; text-wrap: balance; }
.site h2 { font-size: clamp(26px, 4.2vw, 34px); line-height: 1.12; letter-spacing: -0.02em; font-weight: 500; margin-block-end: 14px; text-wrap: balance; }
.site-lead { font-size: 17px; line-height: 1.55; color: var(--muted); max-width: 34em; margin-block-end: 0; text-wrap: pretty; }
.site-copy > .site-rows { margin-block-start: 28px; }

/* the vibe form: name your group, then "Create your group vibe", the one
   filled control (ink on paper like the submit). A box bordered like an
   input, with the space's icon as it will be at its start and the button at
   its end; on a phone the field keeps the box and the button is its own
   line under it, as tall and as round. Under the hero's, ideas to start from. */
.vibe { margin-block-start: 28px; max-width: 520px; }
.vibe-box { display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 13px; background: var(--bg); transition: border-color .15s; }
.vibe-box:focus-within, .vibe-field:focus-within { border-color: color-mix(in srgb, var(--text) 35%, var(--line)); }
.vibe-field { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 4px; margin: 0; color: var(--text); font-size: inherit; cursor: text; }
.vibe-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin-inline-start: 4px; border-radius: 50%; background: var(--panel-2); font-size: 18px; line-height: 1; }
.vibe-box input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 8px; border: 0; background: none; font-size: 17px; font-weight: 400; }
.vibe-box input:focus { outline: none; }
.vibe-box input::placeholder { color: var(--muted); opacity: 1; }
.cta { display: inline-flex; align-items: center; justify-content: center; flex: none; min-height: 44px; padding: 0 20px; border: 0; border-radius: var(--radius); background: var(--accent); color: var(--accent-ink); font-weight: 500; font-size: 15px; text-decoration: none; white-space: nowrap; }
.cta:hover { opacity: .86; }
@media (max-width: 519px) {
  .vibe-box { flex-direction: column; align-items: stretch; gap: 10px; padding: 0; border: 0; border-radius: 0; background: none; }
  .vibe-field { height: 52px; padding: 0 7px; border: 1px solid var(--line); border-radius: 13px; background: var(--bg); transition: border-color .15s; }
  .vibe-icon { margin-inline-start: 0; }
  .vibe-box .cta { min-height: 52px; border-radius: 13px; font-size: 16px; }
}
.vibe-ideas { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 14px; max-width: 520px; }
.vibe-ideas a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 13px; font-weight: 400; text-decoration: none; white-space: nowrap; transition: color .15s, border-color .15s; }
.vibe-ideas a:hover, .vibe-ideas a.on { color: var(--text); border-color: color-mix(in srgb, var(--text) 35%, var(--line)); }

/* the hero: centred, the heading, its lead, the vibe form and the ideas */
.site-hero { text-align: center; }
.site-hero h1 { max-width: 13em; margin-inline: auto; }
.site-hero .site-lead { margin-inline: auto; }
.site-hero .vibe, .site-hero .vibe-ideas { margin-inline: auto; }
.site-hero .vibe-box { text-align: start; }
.site-hero .vibe-ideas { justify-content: center; }
/* the hero's scene: a group's space in pieces, floating in depth around the
   heading (in a band above it under 1200px): your ask, Vibes' answer, the
   bar over the chat and the page it asked for (the bar only from 1200px).
   One group at a time (.on). A change is one thing after the other: the
   group going (.out) fades as it sinks a little, then the next rises in
   over a short distance, its chat first and then what it became. Nothing
   starts or stops with a change (no drift, no layer hints), and a piece is
   one flat plane with its back hidden, so it never flips between flat and
   3D as it fades: what made it flicker. site.js
   tilts the stage (its transform, never a variable its pieces inherit) with
   the pointer or the phone, sways it when nothing does, and moves on to the
   next group. Without scripts the first group stands still; with reduced
   motion nothing moves. Pieces are the app's own, bordered like inputs on
   --bg, with no shadow: depth is perspective, and the far pieces a little
   fainter. */
.site-hero { position: relative; }
.site-hero > :not(.hero-scene) { position: relative; z-index: 1; }
.site main { overflow-x: clip; }
.hero-scene { position: relative; height: 208px; margin: 0 -16px 32px; perspective: 900px; perspective-origin: 50% 40%; pointer-events: none; user-select: none; text-align: start; }
.hero-stage { position: absolute; inset: 0; transform-style: preserve-3d; }
.hero-group { position: absolute; inset: 0; transform-style: preserve-3d; visibility: hidden; }
.hero-group.on, .hero-group.out { visibility: visible; }
.frag { --x: 50%; --y: 50%; --z: 0px; --turn: 0deg; --w: 220px; --d: 0s; --far: 1;
  position: absolute; inset-inline-start: var(--x); inset-block-start: var(--y); width: var(--w); backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transform: translate(-50%, -50%) translate3d(0, 14px, calc(var(--z) - 150px)) rotateY(var(--turn)); opacity: 0;
  transition: transform .34s cubic-bezier(.4, 0, 1, 1), opacity .28s ease-in; }
[dir="rtl"] .frag { transform: translate(50%, -50%) translate3d(0, 14px, calc(var(--z) - 150px)) rotateY(calc(-1 * var(--turn))); }
.hero-group.on .frag { transform: translate(-50%, -50%) translateZ(var(--z)) rotateY(var(--turn)); opacity: var(--far);
  transition: transform .8s cubic-bezier(.22, .61, .36, 1) calc(.32s + var(--d)), opacity .5s ease calc(.32s + var(--d)); }
[dir="rtl"] .hero-group.on .frag { transform: translate(50%, -50%) translateZ(var(--z)) rotateY(calc(-1 * var(--turn))); }
.hero-group.out .frag { transform: translate(-50%, -50%) translate3d(0, -6px, calc(var(--z) - 50px)) rotateY(var(--turn)); opacity: 0; }
[dir="rtl"] .hero-group.out .frag { transform: translate(50%, -50%) translate3d(0, -6px, calc(var(--z) - 50px)) rotateY(calc(-1 * var(--turn))); }
/* the pieces */
.frag .msg-row { max-width: 100%; }
.frag .msg { line-height: 1.4; white-space: normal; }
.frag .msg.assistant { background: var(--bg); }
.frag .msg.me { margin-inline-start: auto; width: fit-content; max-width: 100%; }
.frag .w-head { display: flex; align-items: center; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); font-size: 13px; }
.f-page .float { padding: 10px 14px 6px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg); }
.fp-head { display: flex; align-items: center; gap: 8px; padding-block: 2px 4px; font-size: 14px; }
.fp-head b { font-weight: 600; }
.f-page .pg-row { min-height: 38px; padding-block: 4px; gap: 10px; }
.f-page .pg-row:last-child { border-block-end: 0; }
.f-page .avatar { width: 26px; height: 26px; font-size: 11px; }
.f-page .pg-bar { flex-basis: 56px; }
.f-page .float { overflow: hidden; }
.pg-row .grow { min-width: 0; }
/* where they float: a band above the heading, three pieces with room
   between them, all inside the screen */
.hero-scene .frag .msg { font-size: 13px; }
.hero-scene .f-vibes .avatar, .f-bar { display: none; }
.f-page { --x: 27%; --y: 50%; --z: -30px; --turn: 10deg; --w: min(176px, 45vw); --d: .22s; --far: .94; }
.hero-scene .f-page { font-size: 13px; }
.hero-scene .f-page .pg-bar { display: none; }
.hero-scene .f-page .pg-when { width: 18px; }
.hero-scene .f-page .fp-head { font-size: 13px; }
.f-ask { --x: 73%; --y: 22%; --z: 50px; --turn: -8deg; --w: min(170px, 43vw); --d: 0s; }
.f-vibes { --x: 74%; --y: 76%; --z: 15px; --turn: -8deg; --w: min(164px, 42vw); --d: .1s; }
/* and around it from 1200px, two either side, a set distance from the
   middle so they keep clear of the words at every width */
@media (min-width: 1200px) {
  .hero-scene { --spread: clamp(420px, 36vw, 600px); position: absolute; inset-block: 0; inset-inline: calc(-1 * var(--gutter)); height: auto; margin: 0; perspective: 1200px; perspective-origin: 50% 45%; }
  .site-hero h1 { max-width: 11.5em; }
  .site-hero .site-lead { max-width: 31em; }
  .site-hero .vibe-ideas { max-width: 440px; }
  .hero-scene .frag .msg { font-size: 14px; }
  .hero-scene .f-vibes .avatar { display: grid; }
  .hero-scene .f-page { font-size: 15px; }
  .hero-scene .f-page .fp-head { font-size: 14px; }
  .hero-scene .f-page .pg-bar { display: block; flex-basis: 56px; }
  .hero-scene .f-page .pg-when { width: 40px; }
  .f-bar { display: block; --x: calc(50% - var(--spread) + 10px); --y: 27%; --z: -20px; --turn: 12deg; --w: min(250px, 19vw); --d: .2s; --far: .88; }
  .f-page { --x: calc(50% - var(--spread)); --y: 63%; --z: 10px; --turn: 12deg; --w: min(250px, 19vw); --d: .28s; --far: 1; }
  .f-ask { --x: calc(50% + var(--spread) - 16px); --y: 33%; --z: 60px; --turn: -12deg; --w: min(230px, 18vw); --d: 0s; }
  .f-vibes { --x: calc(50% + var(--spread)); --y: 63%; --z: 0px; --turn: -12deg; --w: min(250px, 19vw); --d: .1s; }
}
@media (prefers-reduced-motion: reduce) {
  .frag, .hero-group.on .frag, .hero-group.out .frag { transition: none; }
}
/* end of the hero's scene */

/* rows: an icon (or a space's emoji in its round), a title, a muted line */
.site-rows { list-style: none; margin: 0; padding: 0; }
.site-rows li { display: flex; align-items: flex-start; gap: 14px; padding-block: 14px; border-block-end: 1px solid var(--line); }
.site-rows li:first-child { padding-block-start: 0; }
.site-rows li:last-child { border-block-end: 0; padding-block-end: 0; }
.site-rows .ico { flex: none; display: grid; place-items: center; width: 20px; height: 22px; color: var(--text); }
.site-rows b { display: block; font-weight: 500; }
.site-rows p { margin: 2px 0 0; color: var(--muted); }

/* the pictures: a frame, and inside it the app's own pieces made static */
.pic { width: 100%; max-width: 420px; margin-block-start: 36px; border: 1px solid var(--line); border-radius: 20px; background: var(--bg); overflow: hidden; user-select: none; }
.demo { display: flex; flex-direction: column; pointer-events: none; }
.demo-top { flex: none; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; min-height: 60px; padding: 10px 12px; }
.demo-top .title { display: flex; align-items: center; font-weight: 600; font-size: 16px; }
.demo-top .caret { margin-inline: 8px 0; }
.demo-top .caret.up { transform: translateY(1px) rotate(-135deg); }
.demo-top .tb-actions .act { display: grid; place-items: center; }
.demo-top .tb-pages { margin-block-end: -4px; -webkit-mask-image: linear-gradient(to left, transparent, #000 40px); mask-image: linear-gradient(to left, transparent, #000 40px); }
[dir="rtl"] .demo-top .tb-pages { -webkit-mask-image: linear-gradient(to right, transparent, #000 40px); mask-image: linear-gradient(to right, transparent, #000 40px); }
.demo-top .tb-page .ico { display: grid; place-items: center; }
.demo-widgets { flex: none; display: flex; flex-direction: column; padding: 2px 12px; border-block: 1px solid var(--line); }
.demo-widgets .w-head { display: flex; align-items: center; }
.demo-thread { flex: 1; min-height: 0; overflow: hidden; justify-content: flex-end; padding-inline: 12px; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28px); mask-image: linear-gradient(to bottom, transparent, #000 28px); }
.demo .reacts { display: inline-flex; align-items: center; }
.demo .act { pointer-events: none; }
.demo-composer { flex: none; display: flex; align-items: flex-end; gap: 8px; padding: 8px 12px 10px; border-block-start: 1px solid var(--line); }
.demo-composer .act { width: 30px; height: 30px; min-height: 30px; margin-block-end: 3px; display: grid; place-items: center; }
.demo-field { flex: 1; min-width: 0; height: 36px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 18px; color: var(--muted); line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-send { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-block-end: 3px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); }

/* the examples: tabs, then one group's space at a time. The pictures are
   stacked in one cell, so the section keeps its height; one fades out,
   then the next fades in. A picture is the space's top bar and its
   screens, stacked the same way: its pages first, then its chat. site.js
   marks the section .live and the current example and screen .on, and
   moves along the screens (the page bar and the line under the name
   follow) while the picture is on screen and nobody is pointing at it.
   Without scripts the tabs are links, and :target shows theirs (the
   first, until one is). No caption repeats the picture. */
.ex-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 24px; }
.ex-tab { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: color .15s, border-color .15s; }
.ex-tab:hover { color: var(--text); }
.ex-tab.on { color: var(--text); border-color: color-mix(in srgb, var(--text) 35%, var(--line)); background: var(--panel-2); }
.ex-pics, .ex-screens { display: grid; }
.ex-pic, .ex-screen { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .16s ease, visibility 0s linear .16s; }
.ex-pic.on, .ex-screen.on { visibility: visible; opacity: 1; transition: opacity .3s ease .16s; }
.ex-pics { margin-block-start: 28px; max-width: 420px; }
.ex-pics .pic { margin: 0; }
.site-examples:not(.live) .ex-pic { transition: none; }
.site-examples:not(.live) .ex-pic:first-child, .site-examples:not(.live) .ex-pic:target { visibility: visible; opacity: 1; }
.site-examples:not(.live):has(.ex-pic:target) .ex-pic:first-child:not(:target) { visibility: hidden; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .ex-pic, .ex-screen, .ex-pic.on, .ex-screen.on { transition: none; } }
/* a space in a picture: its top bar, then one screen at a time */
.demo-space { height: 560px; }
.demo-space .tb-pages.scrolled { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 40px), transparent); }
.ex-screens { flex: 1; min-height: 0; }
.ex-screen { min-height: 0; display: flex; flex-direction: column; }
/* a page a group asked for, drawn as the Builder makes them: headed
   sections of rows divided by --line, in ink and greys */
.ex-page { overflow: hidden; padding: 0 16px 16px; -webkit-mask-image: linear-gradient(to top, transparent, #000 24px); mask-image: linear-gradient(to top, transparent, #000 24px); }
.pg-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-block: 16px 2px; }
.pg-head:first-child { margin-block-start: 8px; }
.pg-head b { font-size: 15px; font-weight: 600; }
.pg-row { display: flex; align-items: center; gap: 12px; min-height: 48px; padding-block: 7px; border-block-end: 1px solid var(--line); }
.pg-row:last-child, .pg-row:has(+ .pg-head), .pg-row:has(+ .pg-note), .pg-row:has(+ .pg-field), .pg-row:has(+ .chips) { border-block-end: 0; }
.pg-t { font-weight: 400; }
.pg-row.done .pg-t { color: var(--muted); text-decoration: line-through; }
.pg-day { flex: none; width: 34px; display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.pg-day span { font-size: 11px; color: var(--muted); }
.pg-day b { font-size: 17px; font-weight: 500; }
.pg-when { flex: none; width: 40px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pg-check { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border: 1.5px solid color-mix(in srgb, var(--text) 35%, var(--line)); border-radius: 6px; }
.pg-check.on { background: var(--text); border-color: var(--text); color: var(--bg); }
.pg-emo { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--panel-2); font-size: 15px; }
.pg-field { height: 38px; margin-block: 8px 2px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: 14px; line-height: 20px; }
.pg-row + .pg-field { margin-block-start: 12px; }
.pg-amt { flex: none; font-size: 13px; font-variant-numeric: tabular-nums; }
.pg-bar + .pg-amt { min-width: 36px; text-align: end; }
.pg-bar { flex: 0 0 88px; height: 6px; border-radius: 3px; background: var(--panel-2); overflow: hidden; }
.pg-bar i { display: block; width: var(--w); height: 100%; border-radius: 3px; background: var(--text); }
.pg-kpis { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); margin-block: 12px 2px; }
.pg-kpis + .pg-row { margin-block-start: 6px; }
.ex-page .badge.ink { color: var(--text); border-color: color-mix(in srgb, var(--text) 35%, var(--line)); }
.ex-page .chips { padding: 0 0 10px 42px; border-block-end: 1px solid var(--line); }
.ex-page .chips:has(+ .pg-note) { border-block-end: 0; }
.ex-page .chip.free { color: var(--muted); border-style: dashed; }
.pg-note { margin: 10px 0 0; }
/* the private thread with Vibes and the feature it filed */
.demo-ask { padding-block-end: 4px; }
.demo-sheet-head { display: flex; flex-direction: column; gap: 2px; padding: 16px 16px 4px; }
.demo-sheet-head b { font-size: 17px; font-weight: 500; }
.demo-ask .demo-thread { padding-inline: 16px; mask-image: none; -webkit-mask-image: none; }
.demo-req { display: flex; flex-direction: column; gap: 4px; margin: 4px 16px 0; padding-block: 12px 8px; border-block: 1px solid var(--line); border-block-end: 0; }
.demo-req .req-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.demo-req .req-line b { font-weight: 500; }
.demo-req .st { font-size: 12px; font-weight: 600; color: var(--text); }
.demo-req .clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.demo-req .row-acts { margin-block-start: 2px; }

/* the close and the foot */
.site-close { padding-block: 72px; }
.site-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding-block: 28px calc(28px + var(--sab)); }
.site-foot p { margin: 0; flex: 1 1 200px; }
.site-foot-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }

@media (min-width: 900px) {
  .site-sec { padding-block: 88px; }
  main > .site-sec:first-child { padding-block: 72px 88px; }
  .site-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 72px; align-items: center; }
  .site-examples { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: center; column-gap: 72px; }
  .ex-pics { margin-block-start: 0; }
  .site-split:not(:has(.pic)) { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
  .site-flip { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); }
  .site-flip > .pic { order: -1; }
  .pic { margin-block-start: 0; }
  .site-close { padding-block: 112px; }
  .site-close h2 { font-size: 44px; }
}