/* web/style.css: the app's stylesheet (module U2). A transcription of docs/design/2026-10-02-contact-network/design-system.md,
   sections 1.1 to 3.17. Each rule ends with its source in the boards. Phone rules that change a desktop rule are in the
   block at the end. Guest pages: web/guest.css. Assistant: web/assistant.css. The frame: web/shell.css. */

/* ---- 1.1 Tokens ---- */
:root {
  --ground: #f4f6f9; --surface: #ffffff; --table-head: #f7f9fc; --tint: #e8eff6;
  --navy: #102c4a; --ink: #132a43; --muted: #566579;
  --line: #dce2e9; --field-border: #c7d0dc; --dashed: #8fa3ba;
  --red: #bd293d; --positive: #17654f; --positive-tint: #e4f1ec;
  --on-navy-muted: #c3cfdd; --on-navy-rule: #2c4764; --on-navy-slash: #f08a98;
  --placeholder: #68778a; --focus: #be974b; --highlight: #fbeecb;
  --shadow-fab: 0 6px 18px rgba(16, 44, 74, 0.28);
  --shadow-segment: 0 1px 2px rgba(16, 44, 74, 0.18);
  --shadow-menu: 0 8px 24px rgba(16, 44, 74, 0.10);
}

/* ---- 1.10 Base rules ---- */
body { margin: 0; background: #f4f6f9; color: #132a43; font-family: 'IBM Plex Sans', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', system-ui, sans-serif; font-size: 15px; line-height: 1.4; }
a { color: #102c4a; } /* the same colour on hover */
input, select, textarea, button { font-family: inherit; } /* the boards also set it on every select */
::placeholder { color: #68778a; opacity: 1; }
:focus-visible { outline: 3px solid #be974b; outline-offset: 2px; }

/* ---- 2.1 Desktop shell ---- */
.shell { position: relative; min-height: 100vh; display: flex; flex-wrap: wrap; } /* Dashboard-Today:20 */
.sidenav { flex: 1 1 232px; box-sizing: border-box; display: flex; flex-direction: column; gap: 28px; padding: 22px 14px 16px; background: #102c4a; color: #ffffff; } /* Dashboard-Today:21 */
.wordmark { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; } /* Dashboard-Today:22 */
.wordmark-row { display: flex; align-items: baseline; gap: 8px; } /* Dashboard-Today:23 */
.wordmark-name { font-size: 26px; font-weight: 700; letter-spacing: -0.6px; } /* Dashboard-Today:24 */
.wordmark-slash { font-size: 20px; font-weight: 700; color: #f08a98; } /* Dashboard-Today:25 */
.wordmark-product { font-size: 11px; font-weight: 600; letter-spacing: 2px; color: #c3cfdd; } /* Dashboard-Today:27 */
.nav-list { display: flex; flex-direction: column; gap: 4px; } /* Dashboard-Today:29 */
.nav-item { height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 12px; border-radius: 8px; color: #c3cfdd; font-weight: 500; text-decoration: none; } /* Dashboard-Today:34 */
.nav-item[aria-current="page"] { background: #ffffff; color: #102c4a; font-weight: 600; } /* Dashboard-Today:30 */
.sidenav-foot { margin-top: auto; display: flex; flex-direction: column; gap: 4px; } /* Dashboard-Today:55 */
.lang-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 8px 12px 0; padding: 3px; border: 1px solid #2c4764; border-radius: 8px; } /* Dashboard-Today:64 */
.lang-switch button { height: 30px; border: 0; border-radius: 6px; background: transparent; color: #c3cfdd; font-size: 13px; font-weight: 500; cursor: pointer; } /* Dashboard-Today:66 */
.lang-switch button[aria-pressed="true"] { background: #ffffff; color: #102c4a; font-weight: 600; } /* Dashboard-Today:65 */
.member-row { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 12px 12px 0; border-top: 1px solid #2c4764; } /* Dashboard-Today:68 */
.member-avatar { flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #ffffff; color: #102c4a; font-size: 14px; font-weight: 600; } /* Dashboard-Today:69 */
.member-name { flex-grow: 1; min-width: 0; font-weight: 500; } /* Dashboard-Today:70 */
.member-out { flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: #c3cfdd; cursor: pointer; } /* Dashboard-Today:71 */
.page { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; } /* Dashboard-Today:77 */
.page-main { display: flex; flex-direction: column; gap: 20px; padding: 28px 32px 32px; } /* Dashboard-Today:78 */

/* ---- 2.2 Page parts ---- */
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } /* Dashboard-Contacts:79 */
.page-title { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 26px; line-height: 1.3; font-weight: 700; letter-spacing: -0.5px; color: #102c4a; } /* Dashboard-Contacts:80 */
.badge-title { min-width: 24px; height: 24px; box-sizing: border-box; padding: 0 8px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #e8eff6; color: #102c4a; font-size: 13px; font-weight: 600; letter-spacing: 0; } /* Dashboard-Contacts:80 */
.page-head-left { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; min-width: 0; } /* Dashboard-Today:80 */
.page-date { font-size: 15px; color: #566579; } /* Dashboard-Today:82 */
.back-link { align-self: flex-start; height: 32px; display: flex; align-items: center; gap: 6px; color: #102c4a; font-size: 14px; font-weight: 600; text-decoration: none; } /* Dashboard-Contact:79 */
.head-card { display: flex; flex-direction: column; gap: 20px; padding: 24px; background: #ffffff; border: 1px solid #dce2e9; border-radius: 12px; } /* Dashboard-Contact:83 */
.head-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } /* Dashboard-Contact:84 */
.avatar-lg { flex: none; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #102c4a; color: #ffffff; font-size: 19px; font-weight: 600; } /* Dashboard-Contact:85 */
.head-card-text { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 2px; } /* Dashboard-Contact:86 */
.detail-title { margin: 0; font-size: 26px; line-height: 1.3; font-weight: 700; letter-spacing: -0.5px; color: #102c4a; } /* Dashboard-Contact:87 */
.detail-sub { font-size: 15px; color: #566579; } /* Dashboard-Contact:88 */
.detail-sub a { font-weight: 600; color: #102c4a; text-underline-offset: 3px; } /* Dashboard-Contact:88 */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 16px; padding-top: 20px; border-top: 1px solid #dce2e9; } /* Dashboard-Contact:92 */
.fact { min-width: 0; display: flex; flex-direction: column; gap: 2px; } /* Dashboard-Contact:93 */
.fact-label { font-size: 13px; color: #566579; } /* Dashboard-Contact:94 */
.fact-value { font-weight: 600; overflow-wrap: anywhere; } /* Dashboard-Contact:95 */
a.fact-value { align-self: flex-start; max-width: 100%; font-weight: 600; text-underline-offset: 3px; overflow-wrap: anywhere; } /* Dashboard-Contact:99 */
.consent-line { display: flex; align-items: center; gap: 8px; } /* Dashboard-Contact:126 */
.tick { flex: none; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #e4f1ec; color: #17654f; } /* Dashboard-Contact:127 */
.consent-line > span:last-child { min-width: 0; font-size: 13px; color: #566579; } /* Dashboard-Contact:128 */
.add-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } /* Dashboard-Contact:131 */
.add-row-label { font-size: 13px; font-weight: 600; color: #566579; } /* Dashboard-Contact:132 */
.chip-add { height: 36px; box-sizing: border-box; display: flex; align-items: center; gap: 6px; padding: 0 12px 0 10px; border: 1px solid #c7d0dc; border-radius: 18px; background: #ffffff; color: #102c4a; font-size: 14px; font-weight: 600; text-decoration: none; } /* Dashboard-Contact:133 */
.columns { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; } /* Dashboard-Today:112 */
.col-main { flex: 1.9 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 24px; } /* Dashboard-Today:113 */
.col-side { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 24px; } /* Dashboard-Today:176 */
.head-card.row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 24px; background: #ffffff; border: 1px solid #dce2e9; border-radius: 12px; } /* Dashboard-Event:83 */
.head-card.row .head-card-text { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 2px; } /* Dashboard-Event:87 */
.head-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } /* Dashboard-Event:91 */
.today-event { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; background: #ffffff; border: 1px solid #dce2e9; border-radius: 12px; } /* Dashboard-Today:89 */
.today-event-main { flex: 1 1 360px; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } /* Dashboard-Today:90 */
.today-event-name { font-size: 16px; font-weight: 600; color: #102c4a; text-decoration: none; } /* Dashboard-Today:95 */
.facts-list { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 8px 12px; align-items: baseline; } /* Member-Contact:44 */

/* ---- 2.3 Phone shell ---- */
.phone-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 16px; background: #ffffff; border-bottom: 1px solid #dce2e9; } /* Member-Today:21 */
.phone-wordmark { font-size: 22px; font-weight: 700; letter-spacing: -0.5px; color: #102c4a; } /* Member-Today:22 */
.phone-wordmark span { color: #bd293d; } /* Member-Today:22 */
.phone-head-tools { display: flex; align-items: center; gap: 4px; } /* Member-Today:23 */
.lang-btn { width: 52px; height: 44px; border: 1px solid #c7d0dc; border-radius: 8px; background: #ffffff; color: #102c4a; font-size: 14px; font-weight: 600; cursor: pointer; } /* Member-Today:25 */
.phone-head.detail { padding: 10px 12px 10px 8px; } /* Member-Event:21 */
.phone-back { min-width: 0; height: 44px; display: flex; align-items: center; gap: 4px; padding: 0 8px; color: #102c4a; font-size: 15px; font-weight: 600; text-decoration: none; } /* Member-Contact:22 */
.phone-back span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Member-Contact:22 */
.phone-head.form { padding: 10px 8px; } /* Member-New-Contact:21 */
.phone-cancel { flex: none; min-width: 64px; height: 44px; box-sizing: border-box; display: flex; align-items: center; padding: 0 8px; color: #102c4a; font-size: 15px; font-weight: 600; text-decoration: none; } /* Member-New-Contact:22 */
.phone-head-title { flex-grow: 1; min-width: 0; margin: 0; text-align: center; font-size: 16px; font-weight: 600; color: #102c4a; } /* Member-New-Contact:23 */
.phone-head-spacer { flex: none; width: 64px; height: 44px; } /* Member-New-Contact:24 */
.tabbar { margin-top: auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 0 4px; background: #ffffff; border-top: 1px solid #dce2e9; } /* Member-Today:125 */
.tab { height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #566579; font-size: 11px; font-weight: 500; text-decoration: none; } /* Member-Today:130 */
.tab[aria-current="page"] { color: #102c4a; font-weight: 700; box-shadow: inset 0 3px 0 #bd293d; } /* Member-Today:126 */
.tab-new { width: 40px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: #102c4a; color: #ffffff; } /* Member-Today:135 */

/* ---- 2.4 The Assistant button ---- */
.fab { position: absolute; right: 32px; bottom: 32px; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #102c4a; color: #ffffff; box-shadow: 0 6px 18px rgba(16, 44, 74, 0.28); text-decoration: none; } /* Dashboard-Today:206 */

/* ---- 3. Components ---- */
.stack { min-width: 0; display: flex; flex-direction: column; } /* Dashboard-Contact:271 */
.stack-main { font-weight: 600; } /* Dashboard-Contact:271 */
.stack-sub { font-size: 13px; color: #566579; } /* Dashboard-Contact:271 */
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Dashboard-Contacts:117 */

/* ---- 3.1 Buttons ---- */
.btn-primary { height: 44px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 20px; border: 0; border-radius: 8px; background: #102c4a; color: #ffffff; font-size: 15px; font-weight: 600; text-decoration: none; } /* Dashboard-New-Contact:122 */
.btn-primary.has-icon { padding: 0 18px 0 14px; } /* Dashboard-Contacts:81 */
.btn-primary:disabled { background: #dce2e9; color: #566579; cursor: default; } /* Dashboard-Assistant-New:70 */
.btn-secondary { height: 40px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border: 1px solid #c7d0dc; border-radius: 8px; background: #ffffff; color: #102c4a; font-size: 14px; font-weight: 600; text-decoration: none; } /* Dashboard-New-Contact:121 */
.btn-secondary.has-icon { padding: 0 16px 0 12px; } /* Dashboard-Event:162 */
.btn-row .btn-secondary { height: 48px; padding: 0 12px; font-size: 16px; } /* Member-Today:38 */
.btn-dashed { height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border: 1px dashed #8fa3ba; border-radius: 8px; background: #ffffff; color: #102c4a; font-size: 14px; font-weight: 600; cursor: pointer; } /* Dashboard-New-Contact:74 */
.dropzone { width: 100%; height: 120px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 0 12px; border: 1px dashed #8fa3ba; border-radius: 8px; background: #e8eff6; color: #102c4a; font-size: 14px; font-weight: 600; cursor: pointer; } /* Dashboard-Add-To-Contact:60 */
.btn-small { height: 36px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; border: 1px solid #c7d0dc; border-radius: 8px; background: #ffffff; color: #102c4a; font-size: 13px; font-weight: 600; cursor: pointer; } /* Dashboard-Today:130 */
.icon-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #102c4a; cursor: pointer; } /* Dashboard-Assistant:24 */
.expander { height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0; border: 0; background: transparent; color: #102c4a; font-size: 14px; font-weight: 600; cursor: pointer; } /* Dashboard-New-Contact:75 */
.btn-play { flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: #102c4a; color: #ffffff; cursor: pointer; } /* Dashboard-Contact:179 */
.tile-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } /* Member-Contact:57 */
.tile-btn { height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0; border: 1px solid #c7d0dc; border-radius: 12px; background: #ffffff; color: #102c4a; font-size: 12px; font-weight: 600; cursor: pointer; } /* Member-Contact:58 */

/* ---- 3.2 Inputs, selects, textareas, date fields ---- */
.field { display: flex; flex-direction: column; gap: 6px; } /* Dashboard-New-Contact:38 */
.field-label { font-size: 13px; font-weight: 600; color: #102c4a; } /* Dashboard-New-Contact:39 */
.input { height: 44px; box-sizing: border-box; padding: 0 12px; border: 1px solid #c7d0dc; border-radius: 8px; background: #ffffff; color: #132a43; font-size: 15px; } /* Dashboard-New-Contact:40 */
.select { min-width: 0; height: 44px; box-sizing: border-box; padding: 0 12px; border: 1px solid #c7d0dc; border-radius: 8px; background: #ffffff; color: #132a43; font-size: 15px; font-family: inherit; } /* Dashboard-New-Contact:106 */
.select.filter { height: 40px; font-size: 14px; } /* Dashboard-Contacts:92 */
.textarea { height: 72px; box-sizing: border-box; padding: 10px 12px; border: 1px solid #c7d0dc; border-radius: 8px; background: #ffffff; color: #132a43; font-size: 15px; line-height: 1.45; resize: none; } /* Dashboard-New-Contact:60 */
.field-grid { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 8px 12px; } /* Dashboard-New-Contact:42 */
.field-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 12px; } /* Dashboard-New-Contact:76 */
.field-row { display: flex; align-items: center; gap: 12px; } /* Dashboard-New-Event:32 */
.field-row > span { flex: none; font-size: 14px; color: #566579; } /* Dashboard-New-Event:34 */
.check-row { min-height: 44px; display: flex; align-items: center; gap: 12px; font-size: 14px; color: #132a43; } /* Dashboard-New-Contact:115 */
.check-row input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: #102c4a; } /* Dashboard-New-Contact:116 */
.hint { font-size: 12px; color: #566579; } /* Dashboard-Add-To-Contact:61 */
.search { position: relative; display: flex; align-items: center; color: #566579; } /* Dashboard-Contacts:88 */
.search svg { position: absolute; left: 12px; } /* Dashboard-Contacts:89 */
.search .input { flex-grow: 1; min-width: 0; height: 40px; padding: 0 12px 0 38px; } /* Dashboard-Contacts:90 */

/* ---- 3.3 Choice chips ---- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; } /* Dashboard-New-Contact:52 */
.chips.thirds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } /* Dashboard-New-Contact:66 */
.chip { height: 40px; padding: 0 14px; border: 1px solid #c7d0dc; border-radius: 8px; background: #ffffff; color: #132a43; font-size: 14px; font-weight: 500; cursor: pointer; } /* Dashboard-New-Contact:54 */
.chip[aria-pressed="true"] { border: 1px solid #102c4a; background: #102c4a; color: #ffffff; font-weight: 600; } /* Dashboard-New-Contact:53 */
.chip.small { height: 36px; } /* Dashboard-Search:88 */
.chip-choose { display: flex; align-items: center; gap: 6px; padding: 0 10px 0 14px; text-decoration: none; box-sizing: border-box; } /* Dashboard-New-Contact:55 */
.chip-owner { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 14px 0 6px; border: 1px solid #c7d0dc; border-radius: 20px; background: #ffffff; color: #132a43; font-size: 14px; font-weight: 500; cursor: pointer; } /* Dashboard-New-Meeting:78 */
.chip-owner[aria-pressed="true"] { border: 1px solid #102c4a; background: #102c4a; color: #ffffff; font-weight: 600; } /* Dashboard-New-Meeting:77 */
.chip-owner > span:first-child { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #e8eff6; color: #102c4a; font-size: 12px; font-weight: 700; } /* Dashboard-New-Meeting:78 */
.chip-owner[aria-pressed="true"] > span:first-child { background: #ffffff; } /* Dashboard-New-Meeting:77 */

/* ---- 3.4 Segmented controls ---- */
.seg { display: grid; gap: 4px; padding: 4px; background: #e8eff6; border-radius: 8px; } /* Dashboard-Today:84 */
.seg button { height: 36px; padding: 0 14px; border: 0; border-radius: 6px; background: transparent; color: #566579; font-size: 14px; font-weight: 500; cursor: pointer; } /* Dashboard-Today:86 */
.seg button[aria-pressed="true"] { background: #ffffff; color: #102c4a; font-weight: 600; box-shadow: 0 1px 2px rgba(16, 44, 74, 0.18); } /* Dashboard-Today:85 */

/* ---- 3.5 Toggle switch ---- */
.switch-row { height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* Dashboard-New-Event:54 */
.switch { flex: none; width: 48px; height: 28px; box-sizing: border-box; display: flex; justify-content: flex-end; align-items: center; padding: 0 3px; border: 0; border-radius: 14px; background: #102c4a; cursor: pointer; } /* Dashboard-New-Event:56 */
.switch > span { width: 22px; height: 22px; border-radius: 50%; background: #ffffff; } /* Dashboard-New-Event:56 */
.switch-state { font-size: 13px; font-weight: 600; color: #17654f; } /* Dashboard-Event:183 */

/* ---- 3.6 Tags, pills, count badges, link chips ---- */
.tag { padding: 2px 8px; border-radius: 6px; background: #e8eff6; color: #102c4a; font-size: 12px; font-weight: 500; } /* Dashboard-Contact:167 */
.pill-on { display: flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; border-radius: 13px; background: #e4f1ec; color: #17654f; font-size: 13px; font-weight: 600; } /* Dashboard-Events:102 */
.pill-on > span:first-child { width: 8px; height: 8px; border-radius: 50%; background: #17654f; } /* Dashboard-Events:102 */
.pill-off { display: flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 13px; background: #e8eff6; color: #566579; font-size: 13px; font-weight: 600; } /* Dashboard-Events:130 */
.badge { min-width: 22px; height: 22px; box-sizing: border-box; padding: 0 7px; display: flex; align-items: center; justify-content: center; border-radius: 11px; background: #102c4a; color: #ffffff; font-size: 12px; font-weight: 600; } /* Dashboard-Today:116 */
.badge-count { min-width: 24px; height: 24px; box-sizing: border-box; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: #e8eff6; color: #102c4a; font-size: 13px; font-weight: 600; } /* Dashboard-Contacts:132 */
.badge-count.overdue { background: #ffffff; border: 1px solid #bd293d; color: #bd293d; } /* Dashboard-Contacts:187 */
.chip-link { display: flex; align-items: center; height: 28px; padding: 0 10px; border: 1px solid #dce2e9; border-radius: 14px; background: #ffffff; color: #102c4a; font-size: 13px; font-weight: 600; text-decoration: none; } /* Dashboard-Contact:166 */
.chip-removable { height: 32px; display: flex; align-items: center; gap: 4px; padding: 0 6px 0 12px; border-radius: 16px; background: #e8eff6; color: #102c4a; font-size: 14px; font-weight: 600; } /* Dashboard-New-Meeting:30 */
.chip-removable button { flex: none; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 12px; background: transparent; color: #102c4a; cursor: pointer; } /* Dashboard-New-Meeting:32 */

/* ---- 3.7 Avatars and icon circles ---- */
.avatar { flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #e8eff6; color: #102c4a; font-size: 13px; font-weight: 600; } /* Dashboard-Contacts:116 */
.icon-circle { flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #e8eff6; color: #102c4a; } /* Dashboard-Events:95 */

/* ---- 3.8 Cards ---- */
.card { display: flex; flex-direction: column; background: #ffffff; border: 1px solid #dce2e9; border-radius: 12px; overflow: hidden; } /* Dashboard-Today:114 */
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; } /* Dashboard-Today:115 */
.card-title { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: #102c4a; } /* Dashboard-Today:116 */
.section { display: flex; flex-direction: column; gap: 10px; } /* Member-Contact:63 */
.section-title { margin: 0; display: flex; align-items: baseline; gap: 6px; padding: 0 4px; font-size: 13px; font-weight: 600; color: #102c4a; } /* Member-Today:53 */

/* ---- 3.9 Tables and list rows ---- */
.table-head { display: grid; align-items: center; gap: 16px; padding: 8px 20px; border-top: 1px solid #dce2e9; background: #f7f9fc; color: #566579; font-size: 12px; font-weight: 600; } /* Dashboard-Contacts:111 */
.table-row { display: grid; align-items: center; gap: 16px; padding: 10px 20px; border-top: 1px solid #dce2e9; color: #132a43; text-decoration: none; } /* Dashboard-Contacts:114 */
.table-group { display: flex; align-items: center; gap: 8px; padding: 8px 20px; border-top: 1px solid #dce2e9; background: #f7f9fc; color: #102c4a; font-size: 13px; font-weight: 600; } /* Dashboard-Today:121 */
.table-group > span + span { color: #566579; } /* Dashboard-Today:122 */
.col-sorted { display: flex; align-items: center; justify-content: flex-end; gap: 4px; } /* Dashboard-Contacts:112 */
.cell-person { display: flex; align-items: center; gap: 12px; min-width: 0; } /* Dashboard-Contacts:115 */
.cell { min-width: 0; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Dashboard-Contacts:119 */
.cell-more { min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 14px; } /* Dashboard-Contacts:153 */
.cell-more > span:first-child { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Dashboard-Contacts:153 */
.cell-more .tag { flex: none; } /* Dashboard-Contacts:153 */
.cell-badge { display: flex; } /* Dashboard-Contacts:132 */
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 20px; } /* Dashboard-Contacts:87 */
.cell-note { font-size: 13px; color: #566579; white-space: nowrap; } /* Dashboard-Contacts:122 */
.cell-empty { color: #566579; } /* Dashboard-Contacts:121 */
.cell-overdue { font-size: 13px; color: #bd293d; font-weight: 600; white-space: nowrap; } /* Dashboard-Today:129 */
.list-row { display: flex; align-items: center; gap: 12px; padding: 10px 20px; border-top: 1px solid #dce2e9; color: #132a43; text-decoration: none; } /* Dashboard-Today:181 */
.list-row-note { flex: none; font-size: 12px; color: #566579; white-space: nowrap; } /* Dashboard-Today:184 */

/* ---- 3.10 Timeline entry ---- */
.timeline { display: flex; flex-direction: column; padding: 0 24px 8px; } /* Dashboard-Contact:156 */
.entry { display: flex; gap: 14px; padding: 16px 0; } /* Dashboard-Contact:157 */
.entry + .entry { border-top: 1px solid #dce2e9; } /* Dashboard-Contact:171 */
.entry-body { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; } /* Dashboard-Contact:159 */
.entry-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; } /* Dashboard-Contact:160 */
.entry-title { font-weight: 600; color: #102c4a; } /* Dashboard-Contact:175 */
.entry-when { font-size: 13px; color: #566579; } /* Dashboard-Contact:162 */
.entry-text { margin: 0; line-height: 1.5; text-wrap: pretty; } /* Dashboard-Contact:164 */
.audio { display: flex; align-items: center; gap: 12px; } /* Dashboard-Contact:178 */
.audio-track { flex-grow: 1; height: 6px; border-radius: 3px; background: #e8eff6; } /* Dashboard-Contact:180 */
.audio-time { flex: none; font-size: 13px; color: #566579; } /* Dashboard-Contact:181 */
.photo-tile { align-self: flex-start; width: 144px; height: 88px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px solid #c7d0dc; border-radius: 8px; background: #e8eff6; color: #566579; } /* Dashboard-Contact:193 */
.file-tile { align-self: flex-start; max-width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #dce2e9; border-radius: 8px; color: #102c4a; } /* Dashboard-Contact:225 */
.file-tile-name { min-width: 0; font-weight: 600; color: #132a43; overflow-wrap: anywhere; } /* Dashboard-Contact:227 */
.file-tile-size { flex: none; font-size: 13px; color: #566579; } /* Dashboard-Contact:228 */

/* ---- 3.11 Next step row ---- */
.next-step { display: flex; align-items: flex-start; gap: 12px; padding: 12px 20px; border-top: 1px solid #dce2e9; } /* Dashboard-Contact:269 */
.next-step input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: #102c4a; } /* Dashboard-Contact:270 */
.card-expander { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border: 0; border-top: 1px solid #dce2e9; background: transparent; color: #566579; font-size: 13px; line-height: 1.4; text-align: left; cursor: pointer; } /* Dashboard-Contact:273 */

/* ---- 3.12 Side panel ---- */
.side-panel { width: 480px; box-sizing: border-box; display: flex; flex-direction: column; background: #ffffff; border: 1px solid #dce2e9; } /* Dashboard-New-Contact:20 */
.side-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 14px 24px; border-bottom: 1px solid #dce2e9; } /* Dashboard-New-Contact:21 */
.side-panel-title { margin: 0; font-size: 18px; font-weight: 600; color: #102c4a; } /* Dashboard-New-Contact:22 */
.side-panel-body { flex-grow: 1; display: flex; flex-direction: column; gap: 18px; padding: 20px 24px; } /* Dashboard-New-Contact:25 */
.side-panel-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 14px 24px; border-top: 1px solid #dce2e9; } /* Dashboard-New-Contact:120 */
.match-box { display: flex; flex-direction: column; border: 1px solid #dce2e9; border-radius: 8px; background: #f7f9fc; overflow: hidden; } /* Dashboard-New-Contact:29 */
.match-box-label { padding: 8px 12px 0; font-size: 12px; font-weight: 600; color: #566579; } /* Dashboard-New-Contact:30 */
.match-box-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; color: #132a43; text-decoration: none; } /* Dashboard-New-Contact:31 */
.sub-form { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid #dce2e9; border-radius: 8px; background: #f7f9fc; } /* Dashboard-New-Meeting:70 */

/* ---- 3.13 Dialog ---- */
.dialog { display: flex; flex-direction: column; gap: 14px; padding: 20px; background: #ffffff; border: 1px solid #dce2e9; border-radius: 12px; } /* Dashboard-Add-To-Contact:21 */
.dialog-head { display: flex; align-items: center; gap: 10px; } /* Dashboard-Add-To-Contact:22 */
.dialog-title { flex-grow: 1; min-width: 0; margin: 0; font-size: 16px; font-weight: 600; color: #102c4a; } /* Dashboard-Add-To-Contact:24 */
.dialog-sentence { margin: 0; font-size: 14px; font-weight: 600; color: #102c4a; text-wrap: pretty; } /* Dashboard-Add-To-Contact:134 */

/* ---- 3.14 Bottom sheet ---- */
.sheet { box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; padding: 10px 16px 20px; background: #ffffff; border: 1px solid #dce2e9; border-radius: 18px 18px 0 0; } /* Member-New:20 */
.sheet-grabber { flex: none; align-self: center; width: 40px; height: 4px; border-radius: 2px; background: #c7d0dc; } /* Member-New:21 */
.sheet-head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* Member-New:22 */
.sheet-title { margin: 0; font-size: 18px; font-weight: 600; color: #102c4a; } /* Member-New:23 */
.sheet-list { flex: none; display: flex; flex-direction: column; } /* Member-New:26 */
.sheet-row { height: 64px; box-sizing: border-box; display: flex; align-items: center; gap: 14px; color: #102c4a; text-decoration: none; } /* Member-New:27 */
.sheet-row + .sheet-row { border-top: 1px solid #dce2e9; } /* Member-New:32 */
.sheet-row-label { flex-grow: 1; min-width: 0; font-size: 16px; font-weight: 600; color: #102c4a; } /* Member-New:29 */

/* ---- 3.15 Pickers ---- */
.picker-list { flex: none; display: flex; flex-direction: column; background: #ffffff; border: 1px solid #dce2e9; border-radius: 10px; overflow: hidden; box-shadow: 0 8px 24px rgba(16, 44, 74, 0.10); } /* Contact-Picker:31 */
.picker-row { height: 60px; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 0 16px; border-top: 1px solid #dce2e9; cursor: pointer; } /* Contact-Picker:37 */
.picker-row.is-chosen { background: #e8eff6; } /* Contact-Picker:32 */
.picker-new { height: 52px; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 0 16px 0 48px; border-top: 1px solid #dce2e9; color: #102c4a; font-weight: 600; text-decoration: none; } /* Contact-Picker:47 */
.dashed-circle { flex: none; width: 36px; height: 36px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 1px dashed #8fa3ba; border-radius: 50%; color: #102c4a; } /* Contact-Picker:48 */
.picker-foot { flex: none; display: flex; align-items: center; justify-content: flex-end; } /* Contact-Picker:52 */

/* ---- 3.16 Guest form link and QR code ---- */
.link-box { align-self: stretch; min-width: 0; height: 44px; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 0 4px 0 12px; border: 1px solid #dce2e9; border-radius: 8px; } /* Dashboard-Event:192 */
.link-box > span { flex-grow: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } /* Dashboard-Event:193 */
.btn-pair { align-self: stretch; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } /* Dashboard-Event:198 */

/* ---- 3.17 Search results ---- */
.result-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 10px 20px; border-top: 1px solid #dce2e9; color: #132a43; text-decoration: none; } /* Dashboard-Search:98 */
.result-note { text-align: right; font-size: 13px; color: #566579; } /* Dashboard-Search:103 */
mark { background: #fbeecb; } /* Dashboard-Search:101 */

/* ---- Additions: classes design-system.md names without a rule, and the defaults its text recommends ---- */
.grow { flex-grow: 1; } /* 3, Dashboard-Today:183 */
.right { text-align: right; } /* 3, Dashboard-Contacts:123 */
.icon-circle.s32, .icon-btn.s32 { width: 32px; height: 32px; } /* 3, Dashboard-Add-To-Contact:23 */
.icon-circle.s40, .icon-btn.s40 { width: 40px; height: 40px; } /* 3, Member-New:28 */
.icon-circle.s44, .icon-btn.s44 { width: 44px; height: 44px; } /* 3, Dashboard-Today:91 */
.icon-circle.s56, .icon-btn.s56 { width: 56px; height: 56px; } /* 3, Dashboard-Event:84 */
.cols-contacts { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(0, 1.5fr) 96px 110px 120px; } /* 3.9, Dashboard-Contacts:111 */
.cols-today { grid-template-columns: 20px minmax(0, 2.35fr) minmax(0, 1fr) minmax(0, 1.36fr) 44px 84px; } /* 3.9, Dashboard-Today:118 */
.cols-events { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 0.8fr) minmax(0, 0.9fr); } /* 3.9, Dashboard-Events:87 */
.cols-event-contacts { grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr) 80px 96px minmax(0, 1.7fr); } /* 3.9, Dashboard-Event:105 */
.cols-event-meetings { grid-template-columns: 108px minmax(0, 1.6fr) minmax(0, 1.1fr) minmax(0, 1.5fr); } /* 3.9, Dashboard-Event:167 */
.cols-companies { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.3fr) minmax(0, 0.9fr) minmax(0, 0.9fr) minmax(0, 1fr); } /* 3.9, Dashboard-Companies:87 */
.cols-company-contacts { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.3fr) minmax(0, 0.7fr) minmax(0, 2.1fr); } /* 3.9, Dashboard-Company:107 */
.cols-meetings { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr) minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 2fr); } /* 3.9, Dashboard-Meetings:87 */
.card > .table-head:first-child { border-top: 0; } /* 3.9 "Header row", Dashboard-Events:87 */
.btn-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } /* 3.1, Member-Today:37 */
.btn-row.thirds { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } /* 3.1, Member-Contact:35, Member-Event:54 */
.field-grid .input { min-width: 0; } /* 3.2 "Label beside the field" */
.field-row .input { flex: 1 1 0; min-width: 0; } /* 3.2 "Date field" */
.search .input:focus, .search .input:not(:placeholder-shown) { padding: 0 11px 0 37px; border: 2px solid #102c4a; } /* 3.2, 1.8: a search field in use */
.seg { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } /* 3.4: a grid of equal columns */
.switch { padding: 0; background: transparent; } /* 3.5: button, track and knob on both layouts */
.switch > span { width: 48px; height: 28px; box-sizing: border-box; display: flex; align-items: center; justify-content: flex-end; padding: 0 3px; border-radius: 14px; background: #102c4a; } /* 3.5, Dashboard-New-Event:56 */
.switch > span > span { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #ffffff; } /* 3.5, Dashboard-New-Event:56 */
.switch[aria-checked="false"] > span { justify-content: flex-start; background: #c7d0dc; } /* 3.5, the off state */
.switch-state.off { color: #566579; } /* 3.5, the off state */
.picker-row.is-chosen .avatar { background: #ffffff; } /* 3.7, Contact-Picker:34 */
.photo-tile { overflow: hidden; } /* 3.10: the photo itself in the box */
.photo-tile img { width: 100%; height: 100%; object-fit: cover; } /* 3.10 */
.dialog { width: min(100vw - 32px, 360px); box-sizing: border-box; } /* 3.13, decision 33 */
mark { color: inherit; } /* 3.17 */
/* ---- What the app needs that a board does not show: design-system.md 0.1, 2.1, 2.4 ---- */
.btn-primary, .btn-secondary, .chip-add { cursor: pointer; } /* 0.1 item 3 */
.tab, .phone-cancel { border: 0; background: transparent; cursor: pointer; } /* 0.1 item 3 */
.picker-new { width: 100%; border: 0; border-top: 1px solid #dce2e9; background: transparent; font-size: inherit; text-align: left; cursor: pointer; } /* 0.1 item 3: pickerNewRow is a button (7.5) */
.sheet-row { width: 100%; padding: 0; border: 0; background: transparent; font-size: inherit; text-align: left; cursor: pointer; } /* 0.1 item 3: menuRows draws a row without href as a button (7.5) */
.fab { position: fixed; z-index: 20; border: 0; cursor: pointer; } /* 0.1 items 3 and 6, 2.4 */
.sidenav { position: sticky; top: 0; height: 100vh; overflow-y: auto; } /* 2.1 "Not drawn" */
.shell:is(.shell-banner:not([hidden]) + .shell) { min-height: calc(100vh - 24.8px); } /* 2.1, Dashboard-Today:20: the 100vh root less the mode banner of web/shell.css (12px x 1.4 + 8px) */
.sidenav:is(.shell-banner:not([hidden]) + .shell .sidenav) { height: calc(100vh - 24.8px); box-shadow: 0 24.8px 0 #102c4a; } /* 2.1, Dashboard-Today:68-74: the foot inside the window; once scrolled, the shadow fills the strip below */
/* ---- After the walkthrough: what the boards draw on an element that design-system.md gives no rule ---- */
.head-card.row { flex-direction: row; } /* 2.2, Dashboard-Event:83: one wrapping row, not the column of .head-card */
.btn-small { box-sizing: border-box; } /* 3.1, Dashboard-Today:130: 36px with the border, on a link as on a button */
.table-row > input[type="checkbox"], .picker-row input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: #102c4a; } /* 3.2 "Ticks and radios", Dashboard-Today:125, Event-Picker:23, Contact-Picker:33 */
:lang(zh) .cols-today { grid-template-columns: 20px minmax(0, 2.35fr) minmax(0, 1fr) minmax(0, 1.36fr) 56px 84px; } /* 3.9, Dashboard-Today:118: a Chinese date such as 12月30日 on one line inside its column */
.picker-list[role="radiogroup"] .picker-new, .picker-list:has(> [role="radiogroup"]) > .picker-new { gap: 8px; padding: 0 16px 0 12px; } /* 3.15 "Event picker", Event-Picker:38 */
.picker-list[role="radiogroup"] .dashed-circle, .picker-list:has(> [role="radiogroup"]) > .picker-new .dashed-circle { width: 28px; height: 28px; } /* 3.15 "Event picker", Event-Picker:39 */
.dialog:has(.picker-list) { width: min(100vw - 32px, 480px); } /* 3.15, Event-Picker:20, Contact-Picker:20: a picker is 480 wide; decision 33's 360 is the Add dialog's */

/* ---- Phone layout, below 872 pixels (design-system.md 2.0): the rules marked "phone" that change a desktop rule ---- */
@media (max-width: 871.98px) {
  /* 2.2 Page parts */
  .page-title { font-size: 22px; } /* Member-Contacts:29 */
  .detail-title { font-size: 22px; letter-spacing: -0.4px; } /* Member-Contact:30 */
  /* 2.3 Phone shell */
  .shell { position: relative; box-sizing: border-box; display: flex; flex-direction: column; } /* Member-Today:20 */
  .page-main { padding: 16px; gap: 16px; } /* Member-Today:28 */
  .page-main.form { padding: 20px; gap: 18px; } /* Member-New-Contact:26 */
  /* 2.4 The Assistant button */
  .fab { right: 16px; bottom: 81px; } /* Member-Today:147 */
  /* 3.1 Buttons */
  .btn-primary { height: 48px; font-size: 16px; } /* Member-New-Event:59 */
  .btn-primary.main { height: 52px; } /* Member-New-Contact:79 */
  .btn-secondary { height: 44px; } /* Member-Event:93 */
  .btn-dashed { height: 48px; font-size: 16px; } /* Member-New-Contact:67 */
  .icon-btn { width: 44px; height: 44px; } /* Member-Assistant:24 */
  .expander { height: 44px; gap: 12px; font-size: 15px; } /* Member-New-Contact:71 */
  .btn-play { width: 44px; height: 44px; } /* Member-Contact:110 */
  /* 3.2 Inputs, selects, textareas, date fields */
  .input { height: 48px; font-size: 16px; } /* Member-New-Contact:29 */
  .select { width: 100%; height: 48px; font-size: 16px; } /* Member-New-Event:48 */
  .textarea { font-size: 16px; } /* Member-New-Contact:53 */
  .check-row input { width: 22px; height: 22px; } /* Member-New-Contact:76 */
  /* 3.3 Choice chips */
  .chip { height: 44px; } /* Member-New-Contact:47 */
  .chip-owner { height: 44px; padding: 0 16px 0 8px; border-radius: 22px; } /* Member-Meeting:79 */
  /* 3.4 Segmented controls */
  .seg button { height: 44px; } /* Member-Today:50 */
  /* 3.5 Toggle switch */
  .switch { flex: none; width: 52px; height: 44px; box-sizing: border-box; display: flex; align-items: center; padding: 0; border: 0; border-radius: 16px; background: transparent; cursor: pointer; } /* Member-New-Event:57 */
  .switch > span { flex: none; width: 52px; height: 32px; box-sizing: border-box; display: flex; align-items: center; justify-content: flex-end; padding: 0 3px; border-radius: 16px; background: #102c4a; } /* Member-New-Event:57 */
  .switch > span > span { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #ffffff; } /* Member-New-Event:57 */
  /* 3.6 Tags, pills, count badges, link chips */
  .chip-removable { height: 36px; padding: 0 4px 0 12px; border-radius: 18px; } /* Member-Meeting:31 */
  .chip-removable button { width: 28px; height: 28px; border-radius: 14px; } /* Member-Meeting:33 */
  /* 3.7 Avatars and icon circles */
  .avatar { width: 40px; height: 40px; font-size: 14px; } /* Member-Contacts:42 */
  /* 3.8 Cards */
  .card { border-radius: 14px; } /* Member-Contacts:40 */
  .card.padded { gap: 14px; padding: 16px; } /* Member-Today:29 */
  /* 3.9 Tables and list rows */
  .list-row { min-height: 60px; box-sizing: border-box; padding: 10px 14px; } /* Member-Contacts:45 */
  .stack-main { font-size: 15px; } /* Member-Contacts:43 */
  /* 3.10 Timeline entry */
  .timeline { padding: 0 14px; background: #ffffff; border: 1px solid #dce2e9; border-radius: 14px; } /* Member-Contact:95 */
  .entry { gap: 12px; padding: 14px 0; } /* Member-Contact:96 */
  .entry-body { gap: 4px; } /* Member-Contact:98 */
  .entry-title { font-size: 15px; } /* Member-Contact:99 */
  .entry-when { font-size: 12px; } /* Member-Contact:100 */
  .entry-text { font-size: 14px; line-height: 1.45; } /* Member-Contact:101 */
  /* 3.11 Next step row */
  .next-step { padding: 12px 14px; } /* Member-Contact:66 */
  /* 3.12 Side panel */
  .sub-form { background: #ffffff; border-radius: 12px; } /* Member-Meeting:71 */
  /* ---- Phone additions: design-system.md 2.3, 2.4, 3.8, 3.10 ---- */
  .shell { padding-bottom: calc(65px + env(safe-area-inset-bottom)); } /* 2.3: room for the fixed tab bar */
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; margin-top: 0; padding-bottom: env(safe-area-inset-bottom); } /* 2.3 */
  .fab { bottom: calc(81px + env(safe-area-inset-bottom)); } /* 2.4 */
  .card > :first-child { border-top: 0; } /* 3.8 "Phone" */
  .photo-tile { width: 120px; height: 76px; } /* 3.10 */
  .picker-list:has(> [role="radiogroup"]) > .picker-new { gap: 12px; padding: 0 16px 0 48px; } /* 3.15: the Event-Picker geometry is the desktop's; the phone sheet keeps the rule of .picker-new */
  .picker-list:has(> [role="radiogroup"]) > .picker-new .dashed-circle { width: 36px; height: 36px; } /* 3.15, as above */
}