/* web/shell.css: what design-system.md gives without a class name (design document 7.1, 7.4, 7.8), owned by U1.
   Every class defined here begins with "shell-" (7.2); a rule that needs a class of web/style.css starts with a
   shell- class. Colours are the tokens of design-system.md 1.1, written out as the boards write them.
   Stacking: the phone tab bar 10 and the Assistant button 20 (web/style.css), the Assistant 25, layers 30, the
   notice 40. The phone query is the one of web/style.css. */

/* ---- The frame (7.8) ---- */
.shell-banner { padding: 4px 16px; background: #e8eff6; color: #102c4a; font-size: 12px; font-weight: 600; line-height: 1.4; text-align: center; }
.shell-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.shell-live { position: fixed; left: 16px; right: 16px; bottom: 24px; z-index: 40; box-sizing: border-box; width: fit-content; max-width: 560px; margin: 0 auto; padding: 10px 16px; border-radius: 8px; background: #102c4a; color: #ffffff; font-size: 14px; font-weight: 600; }
.shell-live:empty { padding: 0; }
.shell-home { color: inherit; text-decoration: none; }
.shell-home.phone-wordmark { color: #102c4a; } /* Member-Today:22 */
.shell-plain { text-decoration: none; }
.shell-sticky { position: sticky; top: 0; z-index: 10; }

/* ---- Signed out: the language button and sign-in, no shell (design-system.md 9.2) ---- */
.shell-signin { flex: 1 1 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 560px; margin: 0 auto; padding: 24px 16px; }
.shell-signin-top { display: flex; justify-content: flex-end; }
.shell-signin .page-main { padding: 0; }

/* ---- Layers (7.4): the root, the backdrop and where each kind sits. The sizes are U2's classes. ---- */
.shell-layers { position: relative; z-index: 30; }
.shell-layer { position: fixed; inset: 0; display: flex; background: rgba(16, 44, 74, 0.28); }
.shell-panel { justify-content: flex-end; }
.shell-panel > .side-panel { height: 100%; max-width: 100vw; }
.shell-panel .side-panel-body { min-height: 0; overflow-y: auto; }
.shell-panel .side-panel-body > * { flex-shrink: 0; } /* the body scrolls, so its parts keep their height (Dashboard-New-Contact:75) */
.shell-dialog { align-items: center; justify-content: center; padding: 16px; }
.shell-dialog > .dialog { max-height: calc(100vh - 32px); overflow-y: auto; }
.shell-sheet { align-items: flex-end; }
.shell-sheet > .sheet { width: 100%; max-height: 90vh; overflow-y: auto; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
.shell-screen { background: #f4f6f9; }
.shell-full { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; background: #f4f6f9; }
.shell-white { background: #ffffff; }
.shell-layer-body { display: flex; flex-direction: column; gap: 14px; }
.shell-sheet form .shell-layer-body { gap: 18px; } /* Member-New-Event:26 */
.shell-photo-full { display: block; max-width: 100%; max-height: 75vh; margin: 0 auto; object-fit: contain; }

/* ---- The Assistant root (8.9): a drawer at the right over the backdrop; the full screen on the phone ---- */
.shell-assistant:not([hidden]) { position: fixed; top: 0; right: 0; bottom: 0; z-index: 25; box-sizing: border-box; display: flex; flex-direction: column; width: 480px; max-width: 100vw; padding: 0; background: #f4f6f9; box-shadow: 0 0 0 100vmax rgba(16, 44, 74, 0.28); }

/* ---- Forms (7.4, design-system.md 9.2) ---- */
.shell-form-error { margin: 0; color: #bd293d; font-size: 13px; font-weight: 600; }
.shell-field-error { margin: 0; color: #bd293d; font-size: 13px; }
.shell-invalid { border-color: #bd293d; }
.shell-label-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.shell-stack { display: flex; flex-direction: column; gap: 14px; }
.shell-stack > p { margin: 0; }

/* ---- Display parts (7.5) ---- */
.shell-empty { margin: 0; padding: 12px 20px; border-top: 1px solid #dce2e9; color: #566579; font-size: 14px; }
.shell-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 0; } /* flush with the card: Member-Contact:64, Member-Event:61 */
.shell-count { color: #566579; font-weight: 500; }
.shell-strong { font-weight: 600; }
.shell-strong.cell { font-size: 15px; } /* Dashboard-Meetings:93, Dashboard-Today:126 */
.shell-chevron { display: flex; color: #566579; }
.shell-entry-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.shell-clamp { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.shell-press { font: inherit; text-align: left; cursor: pointer; }
.shell-press.photo-tile { padding: 0; }
.shell-press.file-tile { background: transparent; }

/* ---- Sign-in, Exports and Access (7.1) ---- */
.shell-card-body { display: flex; flex-direction: column; gap: 12px; padding: 4px 20px 20px; }
.shell-card-body > p { margin: 0; }
.shell-eyebrow { color: #566579; font-size: 11px; font-weight: 600; letter-spacing: 2px; }
.shell-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.shell-status { color: #566579; font-size: 13px; }
.shell-menu-lang { margin: 8px 0; }

/* ---- Phone layout, below 872 pixels ---- */
@media (max-width: 871.98px) {
  .shell-live { bottom: calc(145px + env(safe-area-inset-bottom)); }
  .shell-assistant:not([hidden]) { left: 0; width: auto; box-shadow: none; }
  .shell-empty { padding: 12px 14px; }
  .shell-card-body { padding: 16px; }
}