/* The app's screens, drawn in CSS (Ẹwà, 2026-11-12). The same file as kowrey.app's phone section, so the family shows one app.
   Phones are size containers; every size inside a screen is a share of the phone's width (cqw). */
:root { --a-bg: #FFFFFF; --a-ink: #16120E; --a-soft: #6B645C; --a-card: #F2EFEA; --a-acc: #0E7C93; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --a-bg: #121110; --a-ink: #F3EFE7; --a-soft: #A39B92; --a-card: #24201C; --a-acc: #2BB3C8; } }
:root[data-theme="dark"] { --a-bg: #121110; --a-ink: #F3EFE7; --a-soft: #A39B92; --a-card: #24201C; --a-acc: #2BB3C8; }
/* A phone, drawn in CSS. Screen sizes are in cqw: a share of the phone's own width. */
/* The phone is the size container; the screen draws the bezel as its border, so cqw resolves to the phone's width. */
.phone { container-type: inline-size; width: min(300px, 74vw); margin: 0 auto; aspect-ratio: 9 / 19.5; }
.screen { position: relative; height: 100%; border: 3.2cqw solid #000; border-radius: 15cqw; overflow: hidden; box-shadow: 0 0 0 .6cqw #2A2622; background: var(--a-bg); color: var(--a-ink); font: 400 4cqw/1.35 Plex, sans-serif; display: flex; flex-direction: column; padding-bottom: 4cqw; }
.screen::before { content: ""; position: absolute; top: 2.6cqw; left: 50%; width: 27cqw; height: 7.4cqw; margin-left: -13.5cqw; background: #000; border-radius: 99px; z-index: 2; }
.screen.pic { padding: 0; background: #000; }
.screen.pic::before { display: none; }
.screen.pic img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sb { display: flex; justify-content: space-between; align-items: center; padding: 3.4cqw 8cqw 0; height: 12cqw; font: 600 3.8cqw/1 Plex; flex: none; }
.sb-r { display: flex; gap: 1cqw; align-items: flex-end; }
.sb-r i { width: 1.2cqw; background: currentColor; border-radius: 1px; }
.sb-r i:nth-child(1) { height: 1.6cqw; } .sb-r i:nth-child(2) { height: 2.4cqw; } .sb-r i:nth-child(3) { height: 3.2cqw; }
.ic { display: inline-block; width: 6cqw; height: 6cqw; flex: none; }
.ic svg, .mini svg, .mi svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
.mini { display: inline-block; width: 3.8cqw; height: 3.8cqw; vertical-align: -.6cqw; margin-right: 1.6cqw; }
.mi { display: inline-block; width: 3.4cqw; height: 3.4cqw; }
.av { display: inline-grid; place-items: center; width: 11cqw; height: 11cqw; border-radius: 50%; font: 700 3.6cqw/1 Plex; color: #fff; flex: none; }
.av.sq { border-radius: 3cqw; }
.c-coral { background: #FC6431; color: #16120E; } .c-blue { background: #0147FA; } .c-aqua { background: #02AEC4; color: #16120E; }
.c-teal { background: #0E4D5B; } .c-stone { background: #ECE8E1; color: #16120E; }
.top { display: flex; align-items: center; gap: 3cqw; padding: 2cqw 5cqw 1cqw; }
.top b { flex: 1; text-align: center; font: 600 4.4cqw/1.2 Plex; }
.live { background: #FC6431; color: #16120E; font: 700 3cqw/1 Plex; letter-spacing: .06em; padding: 1.2cqw 2.6cqw; border-radius: 99px; }
.cap { margin: 4cqw 6cqw 2.4cqw; font: 600 2.9cqw/1 Plex; letter-spacing: .1em; color: var(--a-soft); }
.chat { margin-top: auto; padding: 4cqw 6cqw 0; display: grid; gap: 2cqw; }
.chat p { font-size: 3.6cqw; }
.chat b { font-weight: 600; margin-right: 1.4cqw; }
.controls { display: flex; gap: 2cqw; align-items: center; padding: 3.4cqw 5cqw 3cqw; }
.say { flex: 1; background: var(--a-card); color: var(--a-soft); border-radius: 99px; padding: 2.8cqw 4cqw; font-size: 3.6cqw; }
.round { display: grid; place-items: center; width: 10cqw; height: 10cqw; border-radius: 50%; background: var(--a-card); }
.round .ic { width: 5.4cqw; height: 5.4cqw; }
.leave { background: var(--a-card); color: #E0502A; font: 600 3.6cqw/1 Plex; padding: 3.2cqw 3.8cqw; border-radius: 99px; }

/* The live circle */
.stage { display: grid; grid-template-columns: 1fr 1fr; gap: 6cqw 2cqw; padding: 1cqw 6cqw 0; }
.sp { display: grid; justify-items: center; gap: 1cqw; text-align: center; }
.sp .av { width: 25cqw; height: 25cqw; font-size: 7cqw; }
.sp b { font: 600 3.8cqw/1.2 Plex; margin-top: 1cqw; }
.sp small { font-size: 3cqw; color: var(--a-soft); }
.talking .av, .av.talking { outline: 1.2cqw solid #02AEC4; outline-offset: 1cqw; }
.crowd { display: flex; align-items: center; padding: 0 6cqw; }
.reader + .crowd { margin-top: 4cqw; }
.crowd .av { width: 11cqw; height: 11cqw; font-size: 3cqw; border: .9cqw solid var(--a-bg); margin-right: -2.4cqw; }
.more { margin-left: 4.4cqw; font-size: 3.4cqw; color: var(--a-soft); }

/* Reading together */
.page { margin: 3cqw 6cqw 0; background: #F6EFDF; color: #16120E; border-radius: 3cqw; padding: 6cqw 6cqw 4cqw; aspect-ratio: 1 / 1.2; display: flex; flex-direction: column; }
.page small { font-size: 3.2cqw; color: #6B645C; }
.page .yo { margin-top: auto; font: 500 9.4cqw/1.15 Literata, serif; }
.page .en { margin-top: 2.4cqw; font: 400 italic 4.8cqw/1.3 Literata, serif; color: #4A443D; }
.page .pg { margin-top: auto; align-self: flex-end; font-size: 3cqw; color: #6B645C; }
.reader { display: flex; gap: 3.4cqw; align-items: center; padding: 4cqw 6cqw 0; }
.reader .av { width: 12cqw; height: 12cqw; }
.reader b { display: block; font: 600 4cqw/1.2 Plex; }
.reader small { font-size: 3.2cqw; color: var(--a-soft); }

/* Messages and communities */
.head { padding: 3cqw 6cqw 2cqw; display: flex; align-items: baseline; gap: 2cqw; }
.head b { font: 800 7cqw/1.1 Literata, serif; }
.head small { font-size: 3.6cqw; color: var(--a-soft); }
.chips { display: flex; gap: 1.6cqw; padding: 1cqw 6cqw 2cqw; overflow: hidden; }
.chips span { flex: none; font: 600 3.3cqw/1 Plex; padding: 2cqw 3.2cqw; border-radius: 99px; background: var(--a-card); }
.chips .on { background: var(--a-acc); color: #fff; }
.rows { list-style: none; padding: 0 6cqw; }
.rows li { display: flex; gap: 3.4cqw; align-items: center; padding: 2.6cqw 0; }
.rows .av { width: 12.5cqw; height: 12.5cqw; font-size: 3.8cqw; }
.rows li > div { flex: 1; min-width: 0; }
.rows b { display: block; font: 600 4cqw/1.25 Plex; }
.rows small { display: block; font-size: 3.4cqw; color: var(--a-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rows time { font-size: 3cqw; color: var(--a-soft); align-self: flex-start; margin-top: 1cqw; }
.fab { position: absolute; right: 6cqw; bottom: 26cqw; width: 13cqw; height: 13cqw; border-radius: 50%; background: var(--a-acc); color: #fff; display: grid; place-items: center; }
.tabbar { position: absolute; left: 4cqw; right: 4cqw; bottom: 4cqw; background: var(--a-card); border-radius: 8cqw; display: flex; justify-content: space-around; align-items: center; padding: 2.2cqw 3cqw; }
.ajo { width: 10cqw; height: 10cqw; border-radius: 50%; border: .7cqw dotted var(--a-soft); display: grid; place-items: center; font: 800 2.8cqw/1 Literata, serif; color: var(--a-soft); }
.tab { display: grid; justify-items: center; gap: .4cqw; color: var(--a-soft); }
.tab .ic { width: 5cqw; height: 5cqw; }
.tab b { font: 700 2.8cqw/1 Plex; } .tab small { font-size: 2.3cqw; line-height: 1; }
.tab.on { color: var(--a-ink); }
.me { width: 9cqw; height: 9cqw; border-radius: 50%; background: #ECE8E1; color: #16120E; display: grid; place-items: center; font: 700 3.4cqw/1 Plex; }
.create, .join { background: var(--a-acc); color: #fff; font: 600 3.2cqw/1 Plex; padding: 1.8cqw 3.2cqw; border-radius: 99px; }
.search { margin: 1cqw 6cqw 0; background: var(--a-card); color: var(--a-soft); border-radius: 99px; padding: 2.8cqw 4cqw; font-size: 3.6cqw; }
.s-comm .rows small, .s-comm .rows b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The event */
.cover { margin: 1cqw 6cqw 0; aspect-ratio: 16 / 8; border-radius: 3cqw; background: #0E4D5B; color: #F3EFE7; display: flex; align-items: flex-end; padding: 4cqw 5cqw; }
.cover span { font: 800 9cqw/1 Literata, serif; }
.ev { padding: 4cqw 6cqw 0; }
.ev-h { display: flex; gap: 3.4cqw; align-items: center; margin-bottom: 2cqw; }
.date { display: inline-grid; width: 15cqw; border-radius: 3cqw; overflow: hidden; text-align: center; background: var(--a-card); }
.date small { font: 700 2.6cqw/1 Plex; padding: 1.4cqw 0; }
.date small:first-child { background: #16120E; color: #fff; }
.date b { font: 700 6cqw/1 Plex; }
.ev-t { font: 800 6.6cqw/1.1 Literata, serif; }
.ev > p { font-size: 3.6cqw; padding: .8cqw 0; }
.who { display: flex; align-items: center; margin-top: 2cqw; }
.who .av { width: 8.5cqw; height: 8.5cqw; font-size: 2.8cqw; border: .8cqw solid var(--a-bg); margin-right: -2cqw; }
.who span { margin-left: 4cqw; font-size: 3.4cqw; color: var(--a-soft); }
.rsvp { display: flex; gap: 2cqw; padding: 4cqw 6cqw 3cqw; }
.rsvp span { flex: 1; text-align: center; font: 600 3.4cqw/1 Plex; padding: 3cqw 0; border-radius: 3cqw; border: .5cqw solid var(--a-acc); color: var(--a-acc); }
.rsvp .on { background: var(--a-acc); color: #fff; }
.list { margin: 0 6cqw; background: var(--a-card); border-radius: 3cqw; }
.list p { font-size: 3.6cqw; padding: 2.8cqw 4cqw; }
.about { font-size: 3.6cqw; padding: 3cqw 6cqw; }