/* The web app's layout (Cloud and devices 5): only placement; every colour, size and piece comes from the
   design library (design/tokens.css, design/components.css). */
body { margin: 0; background: var(--surface-0); color: var(--text-1); font-family: var(--font-sans); }
.web { max-width: 760px; margin: 0 auto; padding: var(--space-4); box-sizing: border-box; }
.web__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.web__brand { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-bold); }
.web__who { margin-left: auto; }
.web__think { margin: var(--space-3) 0; }
.web__list { display: grid; margin: var(--space-3) 0; }
.web__sign { display: grid; gap: var(--space-3); max-width: 420px; margin: var(--space-7) auto; }
.web__row-actions { display: flex; gap: var(--space-2); }
.web__editor { display: grid; gap: var(--space-2); }
.web__editor textarea { min-height: 40vh; }
@media (max-width: 600px) { .web { padding: var(--space-3) var(--space-4); } }
.web__note { width: 100%; text-align: left; background: none; border: 0; border-bottom: var(--line-width) solid var(--line); color: inherit; font: inherit; cursor: pointer; }
.web__head .tabs { order: 3; display: flex; flex-wrap: wrap; width: 100%; }
.web__head .tabs__tab { width: auto; }
.web__chat { display: grid; gap: var(--space-2); margin: var(--space-3) 0; }
.web__asked { justify-self: end; }
.web__answer { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; }
.web__card, .web__path { margin: var(--space-2) 0 0; }
/* Lesson 8: the Capture button at the bottom of every screen, for a thumb; nothing scrolls sideways. */
html, body { overflow-x: hidden; }
.web { padding-bottom: calc(var(--space-7) + var(--space-6)); }
.web__capture { justify-content: center; position: fixed; left: 50%; bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); transform: translateX(-50%); min-width: 160px; height: 48px; border-radius: var(--radius-full); }
.web .page-title { overflow-wrap: anywhere; }
body > .notice { bottom: calc(var(--space-7) + var(--space-6) + env(safe-area-inset-bottom)); }
.web__waiting { position: fixed; right: var(--space-4); bottom: calc(var(--space-4) + 14px + env(safe-area-inset-bottom)); }
.web__photo { position: relative; margin-top: var(--space-2); }