/* Mates: the "Свет" design. Mari's presence is light from the top edge: golden by day, lamp-warm by night.
   When she speaks the light is up; when the learner speaks it dims and a teal light rises from the bottom. */
:root {
  --bg: #15121c;
  --card: #1f1a29;
  --raised: #2a2435;
  --line: #3d3550;
  --fg: #f4f1ec;
  --muted: #b4aebf;
  --dim: #8e879b;
  --faint: #6e6880;
  --lilac: #c4b5fd;
  --teal: #72cdb6;
  --teal-bg: #1e2a2d;
  --sun: #f5c451;
  --moon: #f4d2c0;
  --end: #f09a9a;
  --accent: var(--moon);
}
body[data-time="day"] { --accent: var(--sun); }

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.45 Manrope, "Segoe UI", system-ui, sans-serif;
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
}
h1, .name, .name-small, .wordmark, .clock, .knocking, .companion-name { font-family: Unbounded, Manrope, sans-serif; font-weight: 500; }

/* The light */
.light { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.light > div { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms ease; transform-origin: 50% 0; }
.light-sun { background: radial-gradient(ellipse 90% 60% at 50% -12%, rgba(245, 196, 81, 0.42) 0%, rgba(245, 196, 81, 0) 70%); }
.light-moon { background: radial-gradient(ellipse 90% 60% at 62% -12%, rgba(244, 204, 184, 0.4) 0%, rgba(244, 204, 184, 0) 70%); }
.light-you { background: radial-gradient(ellipse 90% 50% at 50% 112%, rgba(114, 205, 182, 0.3) 0%, rgba(114, 205, 182, 0) 70%); }
@keyframes glow { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes knock { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } }
/* idle: a resting glow on the home screen */
body[data-time="day"][data-mode="idle"] .light-sun,
body[data-time="night"][data-mode="idle"] .light-moon { opacity: 0.6; animation: glow 6s ease-in-out infinite; }
/* connecting: the light knocks */
body[data-time="day"][data-mode="connecting"] .light-sun,
body[data-time="night"][data-mode="connecting"] .light-moon { animation: knock 1.8s ease-in-out infinite; }
/* speaking: Mari's light is up */
body[data-time="day"][data-mode="speaking"] .light-sun,
body[data-time="night"][data-mode="speaking"] .light-moon { opacity: 1; animation: glow 4.5s ease-in-out infinite; }
/* listening: her light dims and yours rises */
body[data-time="day"][data-mode="listening"] .light-sun,
body[data-time="night"][data-mode="listening"] .light-moon { opacity: 0.3; }
body[data-mode="listening"] .light-you { opacity: 0.9; }

/* Screens */
main { max-width: 480px; min-height: 100%; margin: 0 auto; padding: max(28px, env(safe-area-inset-top)) 24px 28px; }
.screen { display: none; min-height: calc(100vh - 56px); min-height: calc(100dvh - 56px); flex-direction: column; gap: 18px; }
body[data-screen="home"] .screen-home,
body[data-screen="connecting"] .screen-connecting,
body[data-screen="call"] .screen-call { display: flex; }

.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bar-stack { display: flex; flex-direction: column; gap: 12px; }
.wordmark { font-size: 15px; letter-spacing: 0.14em; color: var(--muted); }
.caption { font-size: 14px; color: var(--muted); }
.muted { color: var(--faint); }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.chip-plan { padding: 6px 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--lilac); border: 1px solid var(--line); }
.chip-done { background: var(--teal-bg); color: var(--teal); }
.chip-today { border: 1px solid var(--lilac); color: var(--lilac); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }

.hero { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.hero.centered { align-items: center; text-align: center; gap: 12px; }
.name-block { display: flex; flex-direction: column; gap: 6px; }
.name { margin: 0; font-size: 30px; line-height: 1.1; }
.name-small { font-size: 16px; }
.note { margin: 0; font-size: 22px; line-height: 1.35; font-weight: 500; letter-spacing: -0.01em; text-wrap: pretty; }
/* Before the link is opened: what this is, in three short paragraphs under the note */
.about { display: flex; flex-direction: column; gap: 10px; }
.about p { margin: 0; font-size: 14px; line-height: 1.42; color: var(--muted); text-wrap: pretty; }
/* Without a key the home is a landing: from the top, the headline larger, everything on one phone screen */
/* Like the home under a link: the whole height, MATES at the top and the sign-up at the bottom; the free space goes in
   equal parts above the headline, to the companions, to the features and to the sign-up line, never into one hole */
body[data-locked="true"] .hero { flex-grow: 1; justify-content: flex-start; gap: 10px; }
body[data-locked="true"] .about { display: contents; }
body[data-locked="true"] .note,
body[data-locked="true"] .hero .companions,
body[data-locked="true"] .hero .features,
body[data-locked="true"] .about > p:last-child { margin-top: auto; }
body[data-locked="true"] main { padding-bottom: 12px; }
body[data-locked="true"] .screen-home { gap: 14px; }
body[data-locked="true"] .note { font-size: 23px; line-height: 1.2; font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; }
/* The same landing on a desktop or a tablet: the phone's tight rhythm would look cramped there, so the column breathes -
   a little on a laptop (760 px and taller), fully on a tall screen (900 px and taller) */
@media (min-width: 600px) and (min-height: 760px) {
  body[data-locked="true"] main { max-width: 520px; padding-top: 28px; padding-bottom: 24px; }
  body[data-locked="true"] .screen-home { gap: 20px; }
  body[data-locked="true"] .hero { gap: 26px; }
  body[data-locked="true"] .about > p:first-child { margin-top: -14px; }  /* the paragraph stays with its headline */
  body[data-locked="true"] .note { font-size: 30px; line-height: 1.15; letter-spacing: -0.02em; }
  body[data-locked="true"] .about > p { font-size: 16px; line-height: 1.5; }
  body[data-locked="true"] .switcher { height: 50px; padding: 4px; }
  body[data-locked="true"] .voice-play { width: 50px; height: 50px; }
  body[data-locked="true"] .switcher-thumb { top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--count)); }
  body[data-locked="true"] .switcher button { font-size: 16px; }
  body[data-locked="true"] .stack-card { gap: 8px; padding: 16px 16px 16px 20px; }
  body[data-locked="true"] .stack .stack-about { font-size: 15px; line-height: 1.45; }
  body[data-locked="true"] .features { gap: 10px; }
  body[data-locked="true"] .feature-tabs { gap: 8px; }
  body[data-locked="true"] .feature-tab { height: 50px; }
  body[data-locked="true"] .feature-card { gap: 6px; min-height: 96px; padding: 14px 18px 16px; }
  body[data-locked="true"] .feature-card b { font-size: 16px; }
  body[data-locked="true"] .about .feature-card p { font-size: 14.5px; line-height: 1.5; }
  body[data-locked="true"] .apply input { height: 52px; padding: 0 16px; font-size: 16px; }
  body[data-locked="true"] .apply .ring-button { width: 140px; height: 52px; }
  body[data-locked="true"] .apply .ring-inner { font-size: 15.5px; }
}
@media (min-width: 600px) and (min-height: 900px) {
  body[data-locked="true"] main { max-width: 540px; padding-top: 40px; padding-bottom: 40px; }
  body[data-locked="true"] .screen-home { min-height: calc(100vh - 80px); min-height: calc(100dvh - 80px); }  /* the taller padding above */
  body[data-locked="true"] .screen-home { gap: 24px; }
  body[data-locked="true"] .hero { gap: 40px; }
  body[data-locked="true"] .about > p:first-child { margin-top: -24px; }
  body[data-locked="true"] .wordmark { font-size: 16px; }
  body[data-locked="true"] .note { font-size: 32px; }
  body[data-locked="true"] .about > p { font-size: 16.5px; line-height: 1.55; }
  body[data-locked="true"] .companions { gap: 10px; }
  body[data-locked="true"] .switcher { height: 52px; }
  body[data-locked="true"] .voice-play { width: 52px; height: 52px; }
  body[data-locked="true"] .stack { padding-bottom: 11px; }
  body[data-locked="true"] .stack-back { left: 16px; right: 16px; top: 11px; }
  body[data-locked="true"] .stack-card { gap: 8px; padding: 16px 16px 16px 20px; }
  body[data-locked="true"] .stack .stack-about { font-size: 15.5px; }
  body[data-locked="true"] .stack .stack-now { font-size: 14px; }
  body[data-locked="true"] .feature-tab { height: 52px; border-radius: 16px; }
  body[data-locked="true"] .feature-tab svg { transform: scale(1.15); }
  body[data-locked="true"] .feature-card { gap: 6px; min-height: 100px; padding: 16px 20px 18px; border-radius: 18px; }
  body[data-locked="true"] .about .feature-card p { font-size: 15px; }
  body[data-locked="true"] .apply input { height: 54px; padding: 0 18px; }
  body[data-locked="true"] .apply .ring-button { width: 146px; height: 54px; }
}
.about .dim { font-size: 14px; color: var(--dim); }
/* Whom there is to call: a switcher with a blue-pink thumb and their voice beside it, over a stack of cards - the chosen
   one in front, the next one peeking out behind, so it shows there are more voices; a tap on the card goes to the next.
   The card's text has the card's full width and the height of the longest one (app.js), so switching does not move the page */
.companions { --tint: #f28ac6; --glow: rgba(242, 138, 198, 0.24); --next-glow: rgba(111, 140, 255, 0.26);
  display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.picker { display: flex; gap: 8px; }
.picker .switcher { flex: 1; min-width: 0; }
.switcher { --count: 2; --index: 0; position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  height: 44px; padding: 3px; border: 1px solid var(--raised); border-radius: 999px; background: var(--card); }
.switcher-thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--count)); border-radius: 999px;
  background-image: linear-gradient(110deg, #6f8cff 0%, #a58bff 45%, #f28ac6 100%); background-size: 200% 100%;
  transform: translateX(calc(var(--index) * 100%)); transition: transform 380ms cubic-bezier(0.3, 1.3, 0.5, 1);
  box-shadow: 0 6px 20px rgba(242, 138, 198, 0.28), 0 6px 20px rgba(111, 140, 255, 0.22); animation: sheen 5s ease-in-out infinite alternate; }
@keyframes sheen { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
.switcher button { position: relative; z-index: 1; -webkit-tap-highlight-color: transparent; outline: none; border: 0; border-radius: 999px; background: transparent; color: var(--muted);
  font-family: Unbounded, Manrope, sans-serif; font-size: 15px; font-weight: 500; cursor: pointer; transition: color 250ms ease; }
.switcher button[aria-selected="true"] { color: #15121c; }
.switcher button:focus-visible { box-shadow: inset 0 0 0 2px var(--lilac); }
.stack { position: relative; padding-bottom: 9px; }
.stack-back { position: absolute; left: 14px; right: 14px; top: 10px; bottom: 0; border: 1px solid var(--raised); border-radius: 22px;
  background: radial-gradient(ellipse 75% 100% at 100% 0%, var(--next-glow) 0%, transparent 70%), #1a1623; }
.stack-card { position: relative; z-index: 1; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px;
  padding: 12px 12px 12px 18px; border-radius: 22px; cursor: pointer; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
  background: radial-gradient(ellipse 75% 100% at 100% 0%, var(--glow) 0%, transparent 70%), var(--card); }
.stack .stack-about { margin: 0; font-size: 13.5px; font-weight: 500; line-height: 1.36; color: var(--fg); text-wrap: pretty; }
.voice-play { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border: 1px solid var(--raised); border-radius: 50%; background: var(--card); color: var(--tint); cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: color 250ms ease; }
.voice-play:focus-visible { outline: 2px solid var(--lilac); outline-offset: 2px; }
.voice-play .icon-pause, .voice-play[aria-pressed="true"] .icon-play { display: none; }
.voice-play[aria-pressed="true"] .icon-pause { display: block; }
.stack .stack-now { display: block; min-width: 0; margin: 0; font-size: 13px; font-weight: 600; color: var(--muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stack-now::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 8px 1px 0; vertical-align: middle; border-radius: 50%; background: var(--tint); animation: pulse 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .stack-now::before, .switcher-thumb { animation: none; } .switcher-thumb { transition: none; } }
/* What Mates can do: a row of four icons, the chosen one's card under it; the card keeps the height of three lines so
   switching does not move the page */
.features { display: flex; flex-direction: column; gap: 8px; }
.feature-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.feature-tab { display: flex; align-items: center; justify-content: center; height: 46px; border: 0; border-radius: 14px;
  background: var(--card); color: var(--dim); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease; }
.feature-tab[aria-selected="true"] { background: var(--raised); color: var(--tint); box-shadow: inset 0 0 0 1.5px var(--tint); }
.feature-tab:focus { outline: none; }
.feature-tab:focus-visible { outline: 2px solid var(--lilac); outline-offset: 2px; }

/* The feature icons come alive in the chosen tab (and play once under a pointer): the book turns a page, the bubble
   chatters, the rays of the blown mind flash out, the plane flies off and comes back */
.ico * { transform-box: fill-box; }
.ico-book .page { transform-origin: left center; }
.feature-tab[aria-selected="true"] .ico-book .page { animation: page-turn 2.2s ease-in-out infinite; }
@keyframes page-turn {
  0%, 20% { transform: scaleX(1); }
  55% { transform: scaleX(-1); }
  56%, 100% { transform: scaleX(-1); opacity: 0; }
}
.ico-bla .bubble { transform-origin: 30% 100%; }
.feature-tab[aria-selected="true"] .ico-bla .bubble { animation: bubble-wobble 1.6s ease-in-out infinite; }
.feature-tab[aria-selected="true"] .ico-bla .bla1 { animation: bla-hop 0.8s ease-in-out infinite; }
.feature-tab[aria-selected="true"] .ico-bla .bla2 { animation: bla-hop 0.8s ease-in-out 0.4s infinite; }
@keyframes bubble-wobble { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes bla-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-1.6px); } }
.ico-blown .ray { transform-origin: center; }
.feature-tab[aria-selected="true"] .ico-blown .ray { animation: ray-burst 1.4s ease-out infinite; }
.feature-tab[aria-selected="true"] .ico-blown .r2, .feature-tab[aria-selected="true"] .ico-blown .r3 { animation-delay: 0.08s; }
.feature-tab[aria-selected="true"] .ico-blown .r4, .feature-tab[aria-selected="true"] .ico-blown .r5 { animation-delay: 0.16s; }
.feature-tab[aria-selected="true"] .ico-blown .thought { animation: thought-wiggle 0.35s ease-in-out infinite alternate; }
@keyframes ray-burst {
  0% { opacity: 0; transform: scale(0.3) translateY(3px); }
  30% { opacity: 1; transform: scale(1.25) translateY(-1px); }
  70%, 100% { opacity: 0.25; transform: scale(1) translateY(0); }
}
@keyframes thought-wiggle { from { transform: translateX(-0.6px); } to { transform: translateX(0.6px); } }
.feature-tab[aria-selected="true"] .ico-plane .plane { animation: plane-fly 2.4s ease-in-out infinite; }
@keyframes plane-fly {
  0%, 15% { transform: translate(0, 0) scale(1); opacity: 1; }
  45% { transform: translate(9px, -9px) scale(0.6); opacity: 0; }
  46% { transform: translate(-9px, 9px) scale(0.6); opacity: 0; }
  75%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
}
@media (hover: hover) {
  .feature-tab:hover .ico-book .page { animation: page-turn 1.4s ease-in-out 1; }
  .feature-tab:hover .ico-bla .bla1 { animation: bla-hop 0.8s ease-in-out 2; }
  .feature-tab:hover .ico-bla .bla2 { animation: bla-hop 0.8s ease-in-out 0.4s 2; }
  .feature-tab:hover .ico-blown .ray { animation: ray-burst 1.2s ease-out 1; }
  .feature-tab:hover .ico-plane .plane { animation: plane-fly 1.8s ease-in-out 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ico *, .feature-tab .ico * { animation: none !important; }
}
.feature-card { display: flex; flex-direction: column; gap: 4px; min-height: 84px; box-sizing: border-box; padding: 11px 14px 12px;
  border-radius: 16px; background: var(--card); }
.feature-card b { font-size: 15px; font-weight: 600; }
.feature-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.feature-kind { flex: none; padding: 3px 9px; border-radius: 999px; background: var(--raised); color: var(--muted);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.about .feature-card p { font-size: 13.5px; line-height: 1.4; }
/* The sign-up for the alpha under the pitch: inputs in the app's look, the call button's ring at an ordinary height; once
   it is in, the form gives way to one muted line */
.apply { display: flex; flex-direction: column; gap: 10px; }
.apply .label { padding: 0 4px; }
.apply form { display: flex; gap: 8px; }
.apply input {
  flex: 1 1 auto; min-width: 0; height: 48px; padding: 0 12px; border: 1px solid var(--raised); border-radius: 16px;
  background: var(--card); color: var(--fg); font: inherit; font-size: 16px;
}
.apply input::placeholder { color: var(--dim); }
.apply input:focus { outline: 2px solid var(--lilac); outline-offset: 1px; }
.apply input:disabled { opacity: 0.6; }
.apply .ring-button { flex: none; width: 116px; height: 48px; box-shadow: 0 12px 30px rgba(120, 110, 200, 0.22); }
.apply .ring-inner { font-size: 14.5px; }
.apply .status { padding: 0 4px; text-align: left; }
.apply-done { margin: 0; padding: 0 4px; font-size: 15px; color: var(--muted); }
.week { display: flex; flex-direction: column; gap: 10px; }
.week .caption { font-size: 13px; color: var(--dim); }
.status { margin: 0; min-height: 1.4em; text-align: center; font-size: 14px; color: var(--muted); }
.status.error { color: var(--end); }

/* The primary button: dark glass with a living ring in the light's colours */
.ring-button {
  position: relative; display: block; width: 100%; height: 60px; padding: 0; border: 0; border-radius: 999px;
  overflow: hidden; isolation: isolate; background: transparent; cursor: pointer; font: inherit; color: var(--fg);
  box-shadow: 0 16px 40px rgba(120, 110, 200, 0.22);
}
.ring-button:disabled { opacity: 0.5; cursor: default; }
.ring { position: absolute; left: 50%; top: 50%; width: 600px; height: 600px; margin: -300px 0 0 -300px; animation: spin 7s linear infinite;
  background: conic-gradient(from 0deg, rgba(244, 210, 192, 0.9), rgba(212, 156, 172, 0.55), rgba(248, 230, 210, 0.95), rgba(205, 180, 228, 0.7), rgba(244, 210, 192, 0.9)); }
body[data-time="day"] .ring { background: conic-gradient(from 0deg, #f5c451, #72cdb6, #fff1c2, #f5c451); }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.ring-inner { position: absolute; inset: 2px; border-radius: 999px; background: #1b1724; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 18px; font-weight: 700; }

.ghost-button, .end-button {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 56px; border-radius: 999px;
  font: inherit; font-size: 16px; font-weight: 600; color: var(--fg); cursor: pointer;
}
.ghost-button { background: transparent; border: 1px solid var(--line); }
/* A hang-up, not a slab: a compact pill in the warm red of the screen, the handset facing down */
.end-button { width: auto; height: 52px; margin: 0 auto; padding: 0 26px 0 20px; background: rgba(240, 154, 154, 0.12); border: 1px solid rgba(240, 154, 154, 0.3); color: #f4b0b0; }
.end-button:active { background: rgba(240, 154, 154, 0.24); }
.end-button:disabled, .ghost-button:disabled { opacity: 0.5; cursor: default; }

/* Connecting */
.knocking { font-size: 24px; line-height: 1.2; }
.dots span { animation: pulse 1.4s ease-in-out infinite; }
.dots span:nth-child(2) { animation-delay: 0.25s; }
.dots span:nth-child(3) { animation-delay: 0.5s; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* Call */
.clock { font-size: 14px; letter-spacing: 0.04em; color: var(--muted); }
.progress { height: 3px; border-radius: 999px; background: var(--raised); overflow: hidden; }
.progress-fill { width: 0; height: 100%; border-radius: 999px; background: var(--accent); transition: width 1s linear, background 900ms ease; }
.feed { list-style: none; margin: 0; padding: 0; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; gap: 22px; overflow: hidden; }
.feed li { max-width: 92%; font-size: 17px; line-height: 1.4; color: var(--muted); text-wrap: pretty; }
.feed li.you { align-self: flex-end; text-align: right; }
.feed li.mari { color: var(--faint); }
.feed li.mari.current { font-size: 24px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; color: var(--fg); }
.feed li.you.live { color: var(--fg); }
.feed mark { background: transparent; color: inherit; border-bottom: 3px solid var(--lilac); padding-bottom: 1px; }
.mode-line { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--muted); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: pulse 1.6s ease-in-out infinite; transition: background 900ms ease; }
body[data-mode="listening"] .dot { background: var(--teal); }

/* PRO mode: no transcript during the call, only the voice */
[hidden] { display: none !important; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -11px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.icon-button:hover { color: var(--fg); }
.stats .chip { padding: 8px 12px; }
.chip-score { background: var(--card); color: var(--lilac); }
.chip-level { background: var(--card); color: var(--sun); gap: 6px; }
.chip-level strong { color: var(--fg); font-weight: 700; }
.chip-next { color: var(--dim); font-weight: 500; }
body[data-screen="settings"] .screen-settings { display: flex; }
.settings-group { display: flex; flex-direction: column; gap: 8px; }
.settings-group .label { padding: 0 4px 4px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; min-height: 64px; padding: 12px 18px; border: 0; border-radius: 18px; background: var(--card); color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.row.static { cursor: default; }
.row:disabled { opacity: 0.6; cursor: default; }  /* the choice is on its way to the profile */
.rows { display: flex; flex-direction: column; gap: 8px; }  /* a radiogroup of rows: one per companion */
.row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.row-title { font-size: 16px; font-weight: 600; }
.row-hint { font-size: 13px; color: var(--dim); line-height: 1.35; }
.switch { flex: none; width: 46px; height: 28px; border-radius: 999px; background: var(--raised); position: relative; transition: background 250ms ease; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--muted); transition: transform 250ms ease, background 250ms ease; }
.row[aria-checked="true"] .switch { background: var(--lilac); }
.row[aria-checked="true"] .switch::after { transform: translateX(18px); background: #1a1520; }
.radio { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); }
.row[role="radio"][aria-checked="true"] .radio { border-color: var(--lilac); box-shadow: inset 0 0 0 5px var(--lilac); }
/* A segmented choice: a pill group on the raised surface, the chosen segment lit like a card */
.segments { display: inline-flex; flex: none; padding: 2px; border-radius: 999px; background: var(--raised); }
.segments button { min-width: 44px; height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 250ms ease, color 250ms ease; }
.segments button[aria-checked="true"] { background: var(--lilac); color: #1a1520; }  /* a bubble, not a shade of the card */
.segments button[disabled] { opacity: 0.5; cursor: default; }
.segments-unit { flex: none; display: flex; align-items: center; gap: 8px; }
/* a row whose hint needs the width: the choice goes under the text, its segments sharing the row */
.row.stack { flex-direction: column; align-items: stretch; gap: 12px; }
.row.stack .segments { display: flex; }
.row.stack .segments button { flex: 1; }
.row.stack .segments-unit { align-self: stretch; }
.row.stack .segments-unit .segments { flex: 1; }
.unit { font-size: 13px; color: var(--dim); }
.screen-connecting .bar .caption { text-align: right; }  /* the length line wraps to two lines next to the wordmark */
body[data-text="off"] .feed { display: none; }
/* the call screen never scrolls: the light is the interface, and a scrolled page hides the end button */
body[data-screen="call"] { overflow: hidden; overscroll-behavior: none; }
body[data-screen="call"] main { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
body[data-screen="call"] .screen-call { height: 100%; min-height: 0; }
.screen-call .mode-row { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 16px; }  /* with the feed gone, the state and the button still sit at the bottom */
.peek { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.peek[aria-pressed="true"] { border-color: var(--lilac); color: var(--lilac); }
.agenda { gap: 10px; }
.agenda-task, .agenda-phrase { margin: 0; font-size: 16px; line-height: 1.4; text-wrap: pretty; }
.agenda-phrase { color: var(--teal); }
.agenda-task:empty, .agenda-phrase:empty { display: none; }
.agenda .chips:empty { display: none; }
.agenda-practice, .agenda-lines { display: flex; flex-direction: column; gap: 6px; }
.letter { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px 14px 14px; border: 1px solid var(--raised); border-radius: 20px; background: var(--card); color: var(--fg); font: inherit; text-align: left; cursor: pointer; }
.letter:hover { border-color: var(--line); }
.letter:disabled { opacity: 0.6; cursor: default; }  /* its report is on its way */
.letters { display: flex; flex-direction: column; gap: 10px; }
.letter-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; background: var(--raised); color: var(--accent); }
.letter-text { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.letter-line { font-size: 15px; line-height: 1.35; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status:empty { display: none; }

/* Report */
body[data-screen="report"] .screen-report { display: flex; }
.report-intro { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.35; text-wrap: pretty; }
.tile { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; border-radius: 22px; background: var(--card); }
.score-tile { flex-direction: row; align-items: center; gap: 18px; }
.score { display: flex; align-items: baseline; gap: 6px; font-family: Unbounded, Manrope, sans-serif; }
.score > span:first-child { font-size: 56px; font-weight: 500; line-height: 1; color: var(--lilac); }
.score-of { font-size: 16px; color: var(--dim); }
.score-meta { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cheer { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 14px; line-height: 1.3; color: var(--fg); }
.cheer li strong { color: var(--lilac); font-weight: 700; }
.label { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--dim); }
.score-line { display: flex; align-items: center; gap: 8px; }
.delta { font-size: 13px; font-weight: 700; color: var(--teal); background: var(--teal-bg); border-radius: 999px; padding: 3px 9px; }
.delta.down { color: var(--end); background: #2f2228; }
.block-title { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; }
.quote { margin: 0; font-size: 16px; line-height: 1.4; text-wrap: pretty; }
.quote.you { color: var(--dim); }
.quote mark { background: transparent; color: var(--fg); border-bottom: 3px solid var(--lilac); padding-bottom: 1px; font-weight: 700; }
.comment { margin: 0; font-size: 15px; line-height: 1.45; color: #c9c3d3; text-wrap: pretty; }
.comment:empty { display: none; }
/* The other slips: the tile's title is the button, so the whole header is the tap target and the tile looks like its neighbours until opened */
.tile-slips { gap: 0; padding: 0; }
.slips-toggle { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 18px 20px; border: 0; border-radius: 22px; background: transparent; color: var(--fg); font: inherit; font-size: 17px; font-weight: 700; text-align: left; cursor: pointer; }
.slips-toggle:hover .chevron { color: var(--fg); }
.slips-title { flex-grow: 1; }
.slips-count { color: var(--dim); font-weight: 600; }
.slips-count:not(:empty)::before { content: "· "; }
.chevron { flex: none; color: var(--dim); transition: transform 250ms ease; }
.slips-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.slips { list-style: none; margin: 0; padding: 0 20px 18px; display: flex; flex-direction: column; }
.slips li { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-top: 1px solid var(--raised); }
.slips li:last-child { padding-bottom: 0; }
.slip-said, .slip-better { font-size: 15px; }  /* a step below the one correction above: the quote stays dim, the better line lit */
.slip-why { font-size: 14px; color: var(--muted); }
/* in the "all" view a small signal meter opens the note: three bars of rising height filled by how much the slip matters -
   rough three in pink-red, noticeable two in orange, a minor thing that is not an error one in green - and the word after it */
.slip-severity { --tone: #f28b9b; display: inline-flex; align-items: baseline; gap: 6px; margin-right: 8px; color: var(--tone); }
.slip-severity.noticeable { --tone: #f5ad6e; }
.slip-severity.minor { --tone: #7fd49c; }
.meter { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.meter .bar { width: 3px; height: 5px; border-radius: 1.5px; background: rgba(244, 241, 236, 0.14); }
.meter .bar:nth-child(2) { height: 8px; }
.meter .bar:nth-child(3) { height: 11px; }
.meter .bar.on { background: var(--tone); }
.slip-severity-word { font-size: 12px; font-weight: 700; line-height: 1; }
.slips-hidden { font-size: 14px; color: var(--dim); }  /* the slips the view hides: a count and where the switch is */
@media (prefers-reduced-motion: reduce) { .chevron { transition: none; } }
.chip-word { background: var(--teal-bg); color: var(--teal); font-size: 15px; padding: 8px 12px; }
/* a word with its Russian: the chip is a button, the swap icon before the word, a tap shows the translation and a second one the word */
.chip-swap { gap: 6px; border: 0; font-family: inherit; line-height: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.chip-swap svg { flex: none; opacity: 0.75; }
.chip-swap[aria-pressed="true"] { box-shadow: inset 0 0 0 1px rgba(114, 205, 182, 0.45); }
.chip-swap:focus { outline: none; }
.chip-swap:focus-visible { outline: 2px solid var(--lilac); outline-offset: 2px; }
.chip-pron { background: var(--raised); color: var(--fg); font-size: 15px; padding: 8px 12px; }
.task-block, .hook-block { display: flex; flex-direction: column; gap: 6px; padding: 0 4px; }
.task, .hook { margin: 0; font-size: 16px; line-height: 1.45; text-wrap: pretty; }
.task-block:has(.task:empty), .hook-block:has(.hook:empty) { display: none; }
.hook { color: var(--muted); font-style: italic; }
.sign { margin: 0; font-family: Unbounded, Manrope, sans-serif; font-size: 13px; color: var(--dim); }
.sign::before { content: "— "; }
.screen-report .ring-button { margin-top: auto; }
/* a quiet line under the letter: one tap to tell us what went wrong */
.text-link { align-self: center; min-height: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--dim); font: inherit; font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.text-link:hover { color: var(--muted); }

/* Feedback: a sheet that slides up from the bottom edge, over whatever screen is open */
.sheet { position: fixed; inset: 0; z-index: 10; display: flex; align-items: flex-end; justify-content: center; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(10, 8, 14, 0.6); opacity: 0; transition: opacity 300ms ease; }
.sheet-panel {
  position: relative; width: 100%; max-width: 480px; margin: 0; padding: 20px 16px max(20px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 12px; border-radius: 24px 24px 0 0; background: var(--card);
  transform: translateY(100%); transition: transform 300ms ease;
}
.sheet.open .sheet-backdrop { opacity: 1; }
.sheet.open .sheet-panel { transform: none; }
.sheet-panel .label { padding: 0 4px; }
.sheet textarea {
  width: 100%; min-height: 120px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; resize: vertical;
  background: var(--raised); color: var(--fg); font: inherit; font-size: 16px; line-height: 1.4;
}
.sheet textarea:focus { outline: 2px solid var(--lilac); outline-offset: 1px; }
.sheet-status { margin: 0; min-height: 1.4em; padding: 0 4px; font-size: 14px; color: var(--teal); }
.sheet-status:empty { display: none; }
.sheet-send { height: 44px; border: 0; border-radius: 999px; background: var(--lilac); color: #1a1520; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer; }
.sheet-send:disabled { opacity: 0.5; cursor: default; }
.sheet .ghost-button { height: 44px; }
@media (prefers-reduced-motion: reduce) { .sheet-panel, .sheet-backdrop { transition: none; } }