/* Latbase design system · components · v1. Requires tokens.css and base.css. */

/* navigation: the wordmark left (to the homepage), the three site links in a centred pill (Discover, which is the browse page, Leads, Meet), Log in and Sign up or the avatar right (since 2026-10-07). Shared by every Latbase site. */
.nav { position: relative; height: 80px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); background: var(--paper); }
.logo { display: inline-flex; align-items: center; }
.logo img { height: 25px; width: auto; display: block; }
.nav-pill { display: flex; align-items: center; gap: 4px; height: 48px; padding: 0 6px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--paper); }
.nav-pill a, .nav-pill button { display: inline-flex; align-items: center; height: 36px; padding: 0 20px; border-radius: var(--radius-pill); font-family: inherit; font-size: var(--text-small); font-weight: var(--weight-medium); color: var(--ink); white-space: nowrap; background: none; border: 0; cursor: pointer; transition: background var(--dur-fast) var(--ease); }
.nav-pill a:hover, .nav-pill button:hover { background: var(--paper-2); }
.nav-pill .on, .nav-pill [aria-current="page"] { background: var(--paper-2); }
@media (min-width: 1280px) { .nav-pill { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } }
.nav-right { display: flex; align-items: center; gap: var(--space-3); min-height: 40px; }
.nav-text { font-size: var(--text-small); font-weight: var(--weight-medium); padding: 0 6px; white-space: nowrap; }
.avatar { width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--ink); color: var(--on-ink); font-size: 15px; font-weight: var(--weight-semibold); display: inline-flex; align-items: center; justify-content: center; border: 0; padding: 0; cursor: pointer; }
.iconbtn { width: 40px; height: 40px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--paper); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.iconbtn:hover { border-color: var(--line-strong); }
.iconbtn.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }   /* a pressed icon button, such as the heart once an event is saved */
.nav-menu-btn { display: none; }
/* the menus that drop from the avatar and from the phone menu button */
.nav-menu-wrap { position: relative; }
.nav-menu { position: absolute; right: 0; top: calc(100% + 10px); z-index: 40; min-width: 220px; padding: 6px; margin: 0; list-style: none; background: var(--paper); border-radius: 16px; box-shadow: var(--shadow-hover); }
.nav-menu li a, .nav-menu li button { display: flex; width: 100%; align-items: center; padding: 10px 12px; border-radius: 10px; font-family: inherit; font-size: var(--text-small); font-weight: var(--weight-medium); color: var(--ink); background: none; border: 0; cursor: pointer; text-align: left; white-space: nowrap; }
.nav-menu li a:hover, .nav-menu li button:hover { background: var(--paper-2); }
.nav-menu li.sep { height: 1px; margin: 6px 8px; background: var(--line); }
@media (max-width: 1023px) { .nav-pill { display: none; } .nav-menu-btn { display: inline-flex; } .nav-right .nav-desktop { display: none; } }
@media (max-width: 767px) { .nav { height: 64px; } .logo img { height: 20px; } }

/* the contact dialog: opened by "Contact us" everywhere; two ways to reach us and a line for everything else */
.dialog-backdrop { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: rgba(17, 17, 17, 0.4); backdrop-filter: blur(4px); }
.dialog-backdrop[hidden] { display: none; }
.dialog { position: relative; width: 100%; max-width: 460px; padding: var(--space-8); border-radius: var(--radius-card); background: var(--paper); box-shadow: 0 28px 80px -20px rgba(0, 0, 0, 0.24), 0 10px 32px -12px rgba(0, 0, 0, 0.14); outline: none; display: flex; flex-direction: column; gap: var(--space-5); }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.dialog-head .h3 { margin-top: 6px; }
.dialog-close { border-color: transparent; margin: -6px -8px 0 0; }
.dialog-close:hover { background: var(--paper-2); border-color: transparent; }
.dialog-options { display: flex; flex-direction: column; gap: var(--space-3); }
.option { display: flex; align-items: center; gap: var(--space-4); width: 100%; padding: var(--space-4); border-radius: var(--radius-tile); border: 1px solid var(--line); background: var(--paper); color: var(--ink); text-align: left; font-family: inherit; cursor: pointer; transition: background var(--dur-fast) var(--ease); }
.option:hover { background: var(--paper-2); }
.option-icon { width: 44px; height: 44px; border-radius: var(--radius-pill); background: var(--paper-2); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background var(--dur-fast) var(--ease); }
.option:hover .option-icon { background: var(--paper); }
.option-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.option-title { font-size: var(--text-small); font-weight: var(--weight-medium); }
.option-detail { font-size: var(--text-caption); color: var(--ink-2); }
.option-arrow { color: var(--ink-3); flex-shrink: 0; transition: transform var(--dur-fast) var(--ease); }
.option:hover .option-arrow { transform: translateX(2px); }
/* Google Calendar's scheduling button is created here, hidden, and clicked by our own option; our dialog closes first so Google's is the only thing on screen */
.gcal-host { position: absolute; width: 0; height: 0; overflow: hidden; opacity: 0; pointer-events: none; }
/* Google's booking dialog (scheduling-button-script.css) pads 72 px on every side, which leaves phones almost no room; the classes are Google's */
/* the booking page inside it is drawn transparent, so the frame gets our paper behind it and soft corners */
.hur54b iframe { background: var(--paper); border-radius: 20px; }
@media (max-width: 640px) { .hur54b { padding: 64px 12px 12px !important; } .Xfsokf { top: 14px !important; right: 12px !important; } }
@media (max-width: 767px) { .dialog { padding: var(--space-6); border-radius: 20px; } }

/* buttons, chips, pills */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-h); padding: 0 22px; border-radius: var(--radius-pill); font-size: var(--text-small); font-weight: var(--weight-medium); border: 1px solid transparent; white-space: nowrap; transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: default; transform: none; }
.btn-primary { background: var(--ink); color: var(--on-ink); }
.btn-primary:hover { background: #000; color: var(--on-ink); }
.btn-secondary { background: var(--paper); color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover { border-color: var(--ink); }
.btn-ghost { background: var(--paper-2); color: var(--ink); }
.btn-ghost:hover { background: var(--paper-3); }
.btn-sm { height: 40px; padding: 0 16px; font-size: 14px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: var(--chip-h); padding: 0 14px; border-radius: var(--radius-pill); background: var(--paper-2); font-size: var(--text-caption); font-weight: var(--weight-medium); color: var(--ink); white-space: nowrap; border: 1px solid transparent; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.chip:hover { background: var(--paper-3); }
.chip:disabled { opacity: 0.4; cursor: default; }
.chip.on, .chip[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }
.chip-row { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pill { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--control-h-sm); padding: 0 18px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: var(--paper); font-size: var(--text-small); font-weight: var(--weight-medium); color: var(--ink); white-space: nowrap; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.pill:hover { border-color: var(--ink); }
.pill.on { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.reason { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--radius-pill); border: 1px solid rgba(17, 17, 17, 0.12); font-size: var(--text-eyebrow); font-weight: var(--weight-medium); color: var(--ink); white-space: nowrap; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; }   /* never wider than its card (2026-11-01) */
.tag { position: absolute; left: 14px; top: 14px; height: 28px; padding: 0 12px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.92); font-size: var(--text-eyebrow); font-weight: var(--weight-medium); display: inline-flex; align-items: center; color: var(--ink); backdrop-filter: saturate(1.2); }

/* inputs */
.search { display: flex; align-items: center; gap: var(--space-3); height: var(--search-h); padding: 0 20px 0 22px; border-radius: var(--radius-pill); background: var(--paper-2); font-size: var(--text-body); color: var(--ink-2); position: relative; transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.search:focus-within { background: var(--paper); box-shadow: 0 0 0 1.5px var(--ink); }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; color: var(--ink); font-size: inherit; }
.search input::placeholder { color: var(--ink-2); }
.search input[type="search"]::-webkit-search-decoration, .search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }   /* the field is type=search since 2026-11-01 (dictation tools find it); our own clear button stays the one */
.search-sm { height: var(--control-h-sm); font-size: var(--text-small); padding: 0 16px 0 18px; }
.search-clear { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; flex: none; }
.search-clear:hover { background: var(--paper-2); color: var(--ink); }

/* search with suggestions: a panel under the search, grouped (events, industries, places), keyboard-driven */
.suggest-wrap { position: relative; }
.suggest { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40; background: var(--paper); border-radius: var(--radius-tile); box-shadow: var(--shadow-hover); padding: 8px; margin: 0; list-style: none; max-height: min(520px, 70vh); overflow: auto; }
.suggest-group { padding: 12px 12px 6px; font-size: var(--text-eyebrow); font-weight: var(--weight-medium); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-2); }
.suggest-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 12px; border-radius: var(--radius-bar); cursor: pointer; }
.suggest-item.active, .suggest-item:hover { background: var(--paper-2); }
.suggest-title { font-size: var(--text-small); font-weight: var(--weight-medium); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggest-meta { font-size: var(--text-caption); color: var(--ink-2); white-space: nowrap; flex: none; }
.suggest-empty { padding: 14px 12px; font-size: var(--text-small); color: var(--ink-2); }

/* select: a pill that opens a list; lists longer than a screenful get a search field, grouped rows and keyboard focus */
.pillselect { position: relative; }
.pill-split { padding: 0; gap: 0; }
.pill-split > button { display: inline-flex; align-items: center; gap: var(--space-2); height: 100%; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.pill-split > .pill-main { padding: 0 6px 0 18px; }
.pill-split > .pill-x { padding: 0 14px 0 6px; opacity: 0.7; }
.pill-split > .pill-x:hover { opacity: 1; }
.pill-label { color: var(--ink-2); font-weight: var(--weight-regular); }
.pill.on .pill-label { color: rgba(255, 255, 255, 0.7); }
.popover { position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; width: 300px; max-width: calc(100vw - 2 * var(--page-margin)); background: var(--paper); border-radius: var(--radius-tile); box-shadow: var(--shadow-hover); padding: 6px; }
.popover-right { left: auto; right: 0; }
.popover-search { display: flex; align-items: center; gap: 10px; height: 44px; margin: 2px 2px 6px; padding: 0 14px; border-radius: var(--radius-input); background: var(--paper-2); color: var(--ink-2); }
.popover-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font: inherit; font-size: var(--text-small); color: var(--ink); }
.popover-list { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow: auto; }
.popover-list li[role="option"] { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; font-size: var(--text-small); cursor: pointer; }
.popover-list li[role="option"]:hover, .popover-list li.active { background: var(--paper-2); }
.popover-list li[aria-selected="true"] { font-weight: var(--weight-medium); }
.popover-group { padding: 12px 12px 4px; font-size: var(--text-eyebrow); font-weight: var(--weight-medium); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-2); }
.popover-empty { padding: 12px; font-size: var(--text-small); color: var(--ink-2); }
/* a date range picked on a calendar inside the When filter's popover (2026-10-07): the presets as chips, one month (two side by side on a wide screen), a start day and an end day in ink with the days between on paper-2, one line that says what is picked */
.popover-cal { width: auto; padding: 14px 16px 12px; }
.cal-presets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.cal-months { display: flex; gap: 28px; }
.cal { width: 280px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; height: 32px; margin-bottom: 6px; padding: 0 4px; font-size: var(--text-small); font-weight: var(--weight-semibold); color: var(--ink); }
.cal-nav { width: 32px; height: 32px; border-radius: var(--radius-pill); border: 0; background: none; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.cal-nav:hover { background: var(--paper-2); }
.cal-nav svg { transform: rotate(90deg); }
.cal-nav.next svg { transform: rotate(-90deg); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 40px); row-gap: 2px; }
.cal-dow { height: 28px; display: flex; align-items: center; justify-content: center; font-size: var(--text-eyebrow); font-weight: var(--weight-medium); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--ink-3); }
.cal-day { position: relative; height: 38px; display: flex; align-items: center; justify-content: center; font-family: inherit; font-size: var(--text-small); color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; }
.cal-day::before { content: ""; position: absolute; top: 2px; bottom: 2px; left: 0; right: 0; background: var(--paper-2); display: none; }
.cal-day.in::before { display: block; }
.cal-day.start.ranged::before { display: block; left: 50%; }
.cal-day.end.ranged::before { display: block; right: 50%; }
.cal-day > span { position: relative; width: 34px; height: 34px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; transition: background var(--dur-fast) var(--ease); }
.cal-day:hover > span { background: var(--paper-2); }
.cal-day.start > span, .cal-day.end > span { background: var(--ink); color: var(--on-ink); }
.cal-day.today > span { text-decoration: underline; text-underline-offset: 3px; }
.cal-day.past { color: var(--ink-3); }
.cal-day.empty { visibility: hidden; cursor: default; }
.cal-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--text-small); color: var(--ink-2); }
.cal-foot b { color: var(--ink); font-weight: var(--weight-medium); }
.popover-clear { background: none; border: 0; padding: 0; font: inherit; font-size: var(--text-small); color: var(--ink-2); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.popover-clear:hover { color: var(--ink); }
@media (max-width: 759px) { .cal-months > .cal + .cal { display: none; } }
.field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.field .input, .field .input-wrap { min-width: 0; width: 100%; }   /* a text input has a built-in minimum width; without this, two fields side by side overflow their row */
.field label { font-size: var(--text-small); font-weight: var(--weight-medium); }
.input { height: var(--control-h); padding: 0 16px; border-radius: var(--radius-input); border: 1px solid var(--line-strong); background: var(--paper); font-size: var(--text-body); outline: none; transition: border-color var(--dur-fast) var(--ease); }
.input:focus { border-color: var(--ink); }
.input[aria-invalid="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
/* compact form, as in the Leads app (2026-10-02): 13 px ink-2 labels, 44 px inputs and button, 14 px between fields */
.form-compact { gap: 14px; }
.form-compact .field { gap: 6px; }
.form-compact .field label { font-size: var(--text-caption); line-height: var(--lh-caption); color: var(--ink-2); }
.form-compact .input, .form-compact .btn { height: var(--control-h-sm); }
.form-compact .input { font-size: var(--text-small); }

/* checkbox: a hidden native input, a 22 px round box that fills with ink when checked, the text beside it (2026-10-02) */
.check { position: relative; display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; font-size: var(--text-small); line-height: var(--lh-small); }
.check input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.check-box { width: 22px; height: 22px; flex: none; margin-top: 1px; border-radius: var(--radius-pill); border: 1.5px solid var(--line-strong); background: var(--paper); display: inline-flex; align-items: center; justify-content: center; color: transparent; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.check:hover .check-box { border-color: var(--ink); }
.check input:checked + .check-box { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.check input:focus-visible + .check-box { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink); }
.check input[aria-invalid="true"] + .check-box { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.check a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

/* segmented control, as in the Leads app (2026-10-02): a paper-2 track, the active choice a white thumb (the one resting shadow, so the control reads as a switch) */
.seg { display: inline-flex; padding: 3px; gap: 0; border-radius: 10px; background: var(--paper-2); }
.seg > * { display: inline-flex; align-items: center; justify-content: center; flex: 1; height: 30px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font: inherit; font-size: var(--text-caption); font-weight: var(--weight-semibold); white-space: nowrap; text-decoration: none; cursor: pointer; transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.seg > .on, .seg > [aria-current="page"], .seg > [aria-pressed="true"] { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 0.5px rgba(0, 0, 0, 0.04); }
.seg-block { display: flex; width: 100%; }

/* switch (2026-10-31, from the app's networking switch of 2026-10-30): a hidden native checkbox with role="switch", a 42 by 24 pill that is line-strong off and ink on, the white thumb sliding right; .switch-label puts the text beside it (the AI search toggle and the Manage page's networking row use it) */
.switch-input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.switch { position: relative; width: 42px; height: 24px; flex: none; border-radius: var(--radius-pill); background: var(--line-strong); transition: background var(--dur-fast) var(--ease); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: var(--radius-pill); background: var(--paper); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: transform var(--dur-fast) var(--ease); }
.switch-input:checked + .switch { background: var(--ink); }
.switch-input:checked + .switch::after { transform: translateX(18px); }
.switch-input:focus-visible + .switch { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--ink); }
.switch-input:disabled + .switch { opacity: 0.4; }
.switch-sm { width: 34px; height: 20px; }   /* the small switch (1.7.1, 2026-11-01): a quiet choice inside a card, such as the Manage page's networking row */
.switch-sm::after { width: 14px; height: 14px; }
.switch-input:checked + .switch-sm::after { transform: translateX(14px); }
.switch-label { position: relative; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--text-small); font-weight: var(--weight-medium); color: var(--ink); white-space: nowrap; }

/* code input (2026-11-01): the six digits of a code from an email as six cells, each an .input; the first cell takes the browser's one-time-code fill, a paste lands in all six (the behaviour is the page's, web/src/components/CodeInput.tsx) */
.code-input { display: flex; gap: 10px; }
.code-input .code-cell.input { width: 48px; height: 56px; padding: 0; text-align: center; font-size: 22px; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
@media (max-width: 599px) { .code-input { gap: 8px; } .code-input .code-cell.input { width: 44px; height: 52px; font-size: 20px; } }

/* cards */
.card { display: flex; flex-direction: column; gap: 14px; border-radius: var(--radius-card); transition: transform var(--dur) var(--ease); }
.card:hover { transform: translateY(var(--lift)); }
.card:hover .media { box-shadow: var(--shadow-hover); }
.media { aspect-ratio: 4 / 3; border-radius: var(--radius-media); overflow: hidden; position: relative; background: var(--paper-2); transition: box-shadow var(--dur) var(--ease); }
.media > svg, .media > img { width: 100%; height: 100%; }
.media > img { object-fit: cover; filter: saturate(0.9) contrast(1.04); }
.media-hero { aspect-ratio: 16 / 7; border-radius: var(--radius-card); }
.card-text { display: flex; flex-direction: column; gap: 6px; padding: 0 4px; }
.card-text .h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.meta { font-size: var(--text-small); color: var(--ink-2); }
.reasons { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }

/* compact card: image left, text right */
.mini { display: flex; gap: var(--space-4); align-items: center; padding: 14px; border-radius: var(--radius-tile); border: 1px solid var(--line); transition: border-color var(--dur-fast) var(--ease), transform var(--dur) var(--ease); }
.mini:hover { border-color: var(--line-strong); transform: translateY(var(--lift)); }
.mini .media { width: 120px; height: 90px; aspect-ratio: auto; flex-shrink: 0; border-radius: 14px; }
.mini-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mini-title { font-size: var(--text-body); font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
.mini-empty { justify-content: center; border-style: dashed; color: var(--ink-2); font-size: var(--text-small); min-height: 72px; }

/* shelves: title row plus a rail that scrolls sideways with snap */
.shelf { display: flex; flex-direction: column; gap: var(--space-6); }
.shelf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.shelf-head > div { display: flex; flex-direction: column; gap: 6px; }
.seeall { font-size: var(--text-small); font-weight: var(--weight-medium); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.rail { display: flex; gap: var(--card-gap); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; margin-bottom: -4px; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { flex: 0 0 calc((100% - 3 * var(--card-gap)) / 4); scroll-snap-align: start; }
@media (max-width: 1199px) { .rail > * { flex-basis: calc((100% - 2 * var(--card-gap)) / 3); } }
@media (max-width: 899px) { .rail > * { flex-basis: calc((100% - var(--card-gap)) / 2); } }
@media (max-width: 599px) { .rail > * { flex-basis: 78%; } }
/* rails on phones bleed to the screen edge */
@media (max-width: 767px) { .rail-bleed { margin-left: calc(-1 * var(--page-margin)); margin-right: calc(-1 * var(--page-margin)); padding-left: var(--page-margin); padding-right: var(--page-margin); scroll-padding-left: var(--page-margin); } }

/* tiles and the glance strip */
.tile { padding: var(--space-6); border-radius: var(--radius-tile); background: var(--paper-2); display: flex; flex-direction: column; gap: var(--space-2); }
.tile-outline { background: var(--paper); border: 1px solid var(--line); }
/* a raised tile: white on white paper, lifted by the one resting shadow instead of outlined; for objects (a summary, an action), never for sections of text (2026-10-07) */
.tile-raised { background: var(--paper); border: 0; box-shadow: var(--shadow-card); }
/* The icon tile (1.7.0, 2026-10-31, from Latbase Host's round D): an icon that leads a row, a date tile, an empty state's mark,
   sits on a paper-2 square instead of floating or being outlined. 40 px, 48 px for the large one. */
.icon-tile { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--paper-2); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; }
.icon-tile-xl { width: 48px; height: 48px; border-radius: 14px; }
/* a details list: a small label over its value, rows split by hairlines, no boxes; for the facts beside a page's main text (2026-10-07) */
.details { display: flex; flex-direction: column; }
.details > div { padding: var(--space-5) 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.details > div:last-child { border-bottom: 1px solid var(--line); }
.details-value { font-size: var(--text-body); font-weight: var(--weight-semibold); color: var(--ink); display: inline-flex; align-items: center; gap: 6px; width: fit-content; }
a.details-value:hover { text-decoration: underline; text-underline-offset: 3px; }
.details .chip-row { gap: 6px; }
.details-links { display: flex; flex-direction: column; gap: 6px; font-size: var(--text-small); }
.details-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* the glance strip: the four facts of an event in one hairline row, the value in the h3 size (2026-10-07: the founder kept this shape over tiles and asked for larger text) */
.glance { display: grid; grid-template-columns: repeat(var(--glance-cols, 4), minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }   /* --glance-cols: the number of facts */
.glance > div { padding: var(--space-6) var(--space-6) var(--space-6) 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.glance > div + div { padding-left: var(--space-6); border-left: 1px solid var(--line); }
.glance .value { font-size: var(--text-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
/* the facts as one raised summary card: the hairlines between the facts stay, the outer lines give way to the shadow */
.glance-raised { border: 0; border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 0 var(--space-8); }
@media (max-width: 899px) { .glance { grid-template-columns: repeat(2, minmax(0, 1fr)); } .glance > div:nth-child(3) { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); } .glance > div:nth-child(4) { border-top: 1px solid var(--line); } }
@media (max-width: 599px) { .glance { grid-template-columns: 1fr; } .glance > div { padding-left: 0 !important; border-left: 0 !important; } .glance > div + div { border-top: 1px solid var(--line); } }
/* three facts (2026-10-17, the careers page's highlights): one row down to a phone, so the third never sits alone on a tablet */
.glance-3 { --glance-cols: 3; }
@media (min-width: 600px) and (max-width: 899px) { .glance-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .glance-3 > div:nth-child(3) { padding-left: var(--space-6); border-left: 1px solid var(--line); border-top: 0; } }

/* the week strip: seven day columns, one bar per event spanning its days, the way the founder preferred it (2026-10-07, restored after white cards, a timeline and other tries): the page's event a solid bar in its accent with white text; every other event a white bar with a hairline; each with a small picture, the name, one line with the dates and the venue, and a bare heart; a legend under the strip for the page's event. A bar opens its event in a new tab; resting on it opens a peek. */
/* a day column is always a seventh of the width: a window longer than seven days (a two-week fair) scrolls sideways inside .week-wrap instead of squeezing the columns, so a day's label never breaks and a bar keeps its room */
.week-wrap { overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }   /* the app sets the column count and the width to the days shown */
.week-day { font-size: var(--text-caption); font-weight: var(--weight-medium); color: var(--ink-2); display: flex; flex-direction: column; gap: 2px; padding: 0 4px; }
.week-day b { font-size: var(--text-body); font-weight: var(--weight-semibold); color: var(--ink); white-space: nowrap; }
.week-day.today b { text-decoration: underline; text-underline-offset: 4px; }
/* 2026-10-07: 20% taller, text 20% larger; only the page's event keeps its colour, every other bar is white with a hairline and ink text */
.bar { height: 76px; border-radius: var(--radius-bar); display: flex; align-items: center; gap: 10px; padding: 7px 8px 7px 7px; font-size: 15.6px; font-weight: var(--weight-medium); min-width: 0; overflow: hidden; background: var(--paper); color: var(--ink); border: 1px solid transparent; box-shadow: var(--shadow-bar); }   /* white bars are lifted by a small shadow rather than outlined (2026-10-07) */
.bar-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; color: inherit; }
.bar-link:hover .bar-title { text-decoration: underline; text-underline-offset: 3px; }
.bar .media.bar-thumb { width: 58px; height: 43px; aspect-ratio: auto; flex: none; border-radius: 9px; }
/* every bar has one shape and one height (2026-10-30 night, the founder: the cards in the week should look alike); a one-day bar keeps the picture, square, and gives the rest of its width to the name on up to three lines, with no meta line and no heart (the peek on hover says the rest, the event page saves) */
.bar-narrow { padding: 7px; gap: 8px; }
.bar-narrow .media.bar-thumb { width: 46px; height: 46px; border-radius: 8px; }
.bar-narrow .bar-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: 1.2; font-size: 13.5px; }
.bar-narrow .bar-save { display: none; }
.bar-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bar-title, .bar-meta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-meta { font-size: 14.4px; font-weight: var(--weight-regular); color: var(--ink-2); }
.bar-main { border-color: transparent; box-shadow: none; cursor: default; }
.bar-main .bar-meta { color: inherit; opacity: 0.8; }
.bar-save { width: 36px; height: 36px; flex: none; border: 0; background: none; color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; transition: color var(--dur-fast) var(--ease); }   /* the bare heart, no ring */
.bar-save:hover, .bar-save.on { color: var(--ink); }
/* a peek: a small card that opens while the pointer rests on an event, a little more than the card shows (2026-10-07); it never takes the pointer */
.peek { position: fixed; z-index: 80; width: 320px; padding: 12px; border-radius: 18px; background: var(--paper); box-shadow: var(--shadow-hover); display: flex; flex-direction: column; gap: 10px; pointer-events: none; animation: ds-fade var(--dur-fast) var(--ease) both; }
.peek .media { aspect-ratio: 16 / 7; border-radius: 12px; }
.peek-body { display: flex; flex-direction: column; gap: 4px; padding: 0 4px 4px; }
.peek-name { font-size: var(--text-body); line-height: 1.3; font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
.peek-facts { display: flex; flex-direction: column; gap: 2px; font-size: var(--text-small); color: var(--ink-2); }
.peek-facts span:first-child { color: var(--ink); }   /* the type, the city and the dates in ink; the venue under them in ink-2, so the two lines read as two */
.legend { display: flex; gap: var(--space-5); align-items: center; flex-wrap: wrap; }
.legend > span { display: inline-flex; align-items: center; gap: 8px; }
.legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
@media (max-width: 767px) { .week { min-width: 840px; } }   /* a phone: day columns of about 115 px, so a one-day bar still shows its name; the strip scrolls sideways */

/* long text folded to a few lines with a Read more (2026-10-07): the block is clipped, the button below it unfolds it; --clamp-lines sets how many (three by default) */
.clamp { overflow: hidden; max-height: calc(var(--text-body) * var(--lh-body) * var(--clamp-lines, 3)); }
.clamp.open { max-height: none; }
.clamp-more { background: none; border: 0; padding: 0; margin-top: 8px; font: inherit; font-size: var(--text-small); font-weight: var(--weight-medium); color: var(--ink); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* a toast: one short line at the bottom of the screen that confirms what just happened, with at most one link; it goes by itself (2026-10-07) */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 90; display: inline-flex; align-items: center; gap: 14px; max-width: calc(100vw - 2 * var(--page-margin)); padding: 12px 18px; border-radius: var(--radius-pill); background: var(--ink); color: var(--on-ink); font-size: var(--text-small); font-weight: var(--weight-medium); box-shadow: var(--shadow-hover); animation: ds-fade var(--dur) var(--ease) both; }
.toast a { color: inherit; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* dialogs with long text scroll inside */
.dialog-body { max-height: min(60vh, 520px); overflow: auto; display: flex; flex-direction: column; gap: 6px; padding-right: 4px; }
.dialog-body h3 { font-size: var(--text-small); font-weight: var(--weight-semibold); margin-top: 12px; }
.dialog-body p { font-size: var(--text-small); line-height: var(--lh-small); color: var(--ink-2); }
.dialog-body p b { color: var(--ink); font-weight: var(--weight-medium); }

/* steps: a thin progress of n segments, the done ones in ink */
.steps { display: flex; gap: 6px; }
.steps span { flex: 1; height: 3px; border-radius: 2px; background: var(--line); transition: background var(--dur) var(--ease); }
.steps span.done { background: var(--ink); }

/* choice: a selectable tile with a title and one line; use aria-checked for one-of, aria-pressed for many-of */
.choice { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-radius: var(--radius-tile); border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); text-align: left; font-family: inherit; cursor: pointer; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.choice:hover { border-color: var(--ink); }
.choice[aria-pressed="true"], .choice[aria-checked="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.choice-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.choice-title { font-size: var(--text-body); font-weight: var(--weight-medium); }
.choice-detail { font-size: var(--text-caption); color: var(--ink-2); }
.choice-check { width: 22px; height: 22px; border-radius: var(--radius-pill); border: 1.5px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: transparent; margin-top: 2px; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.choice[aria-pressed="true"] .choice-check, .choice[aria-checked="true"] .choice-check { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
@media (max-width: 599px) { .choice-grid { grid-template-columns: 1fr; } }

/* sector tiles: one accent ground per industry sector, its figure colour for the text; the picked one gets an ink border */
.sector-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
@media (max-width: 899px) { .sector-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px) { .sector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sector { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-4); min-height: 96px; padding: var(--space-4); border-radius: var(--radius-tile); border: 2px solid transparent; background: var(--sector-ground, var(--paper-2)); color: var(--sector-figure, var(--ink)); text-align: left; font-family: inherit; cursor: pointer; transition: transform var(--dur) var(--ease), border-color var(--dur-fast) var(--ease); }
.sector:hover { transform: translateY(var(--lift)); }
.sector:disabled { opacity: 0.45; cursor: default; transform: none; }
.sector[aria-pressed="true"] { border-color: var(--ink); }
.sector-name { font-size: var(--text-small); font-weight: var(--weight-semibold); line-height: 1.25; }
.sector-foot { font-size: var(--text-caption); opacity: 0.85; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sector .choice-check { width: 20px; height: 20px; border-color: var(--sector-figure, var(--ink)); margin: 0; }
.sector[aria-pressed="true"] .choice-check { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
/* narrowing down inside a picked sector: its areas as chips on the sector's ground */
.narrow { padding: var(--space-4) var(--space-5); border-radius: var(--radius-tile); background: var(--sector-ground, var(--paper-2)); display: flex; flex-direction: column; gap: var(--space-3); }
.narrow-head { font-size: var(--text-caption); font-weight: var(--weight-medium); letter-spacing: 0.04em; text-transform: uppercase; color: var(--sector-figure, var(--ink)); }
.narrow .chip { background: var(--paper); color: var(--sector-figure, var(--ink)); }
.narrow .chip:hover { background: rgba(255, 255, 255, 0.75); }
.narrow .chip.on { background: var(--sector-figure, var(--ink)); color: var(--on-ink); }

/* footer: the wordmark and the company line, four columns of links, the legal line. Shared by every Latbase site. */
.footer { border-top: 1px solid var(--line); padding-top: var(--space-16); padding-bottom: var(--space-10); display: flex; flex-direction: column; gap: var(--space-12); }
.footer-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-6); flex-wrap: wrap; }
.footer-top .logo img { height: 32px; }
.footer-tagline { font-size: var(--text-body); color: var(--ink); }
.footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-8); }
.footer-col { display: flex; flex-direction: column; gap: 14px; }
.footer-col .footer-head { font-size: var(--text-caption); font-weight: var(--weight-medium); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }
.footer-col a, .footer-col span, .footer-col .footer-link { font-size: var(--text-small); color: var(--ink); }
.footer-col .footer-link { background: none; border: 0; padding: 0; font-family: inherit; text-align: left; cursor: pointer; }
.footer-col a:hover, .footer-col .footer-link:hover { color: var(--ink-2); }
.footer-bottom { border-top: 1px solid var(--line); padding-top: var(--space-6); display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; font-size: var(--text-caption); color: var(--ink-3); }
@media (max-width: 767px) { .footer { padding-top: var(--space-12); padding-bottom: var(--space-8); gap: var(--space-10); } .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-6); } .footer-top .logo img { height: 26px; } }

/* people (Discover People, 2026-10-10): a round photo of a person, a row of them, a row in a list of people, the role tag */
.face { --face: 56px; width: var(--face); height: var(--face); border-radius: var(--radius-pill); overflow: hidden; background: var(--paper-2); color: var(--ink-2); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.face img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.92) contrast(1.03); }
.face-initials { font-size: calc(var(--face) * 0.36); font-weight: var(--weight-semibold); letter-spacing: -0.01em; }
.face-blank { background: var(--accent-ground, var(--paper-2)); }
.faces { display: inline-flex; align-items: center; }
.faces .face { border: 2px solid var(--paper); box-sizing: content-box; }
.faces .face + .face { margin-left: calc(var(--face) * -0.3); }
.person { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 12px; border-radius: 18px; border: 0; background: none; color: var(--ink); text-align: left; font-family: inherit; cursor: pointer; transition: background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.person:hover { background: var(--paper-2); }
.person.on, .person[aria-pressed="true"] { background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.person-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.person-name { font-size: var(--text-small); font-weight: var(--weight-semibold); display: flex; align-items: center; gap: 8px; min-width: 0; }
.person-name-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.person-line { font-size: var(--text-caption); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.role-tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--radius-pill); border: 1px solid rgba(17, 17, 17, 0.12); font-size: var(--text-eyebrow); font-weight: var(--weight-medium); letter-spacing: 0.02em; color: var(--ink); white-space: nowrap; flex: none; }
/* one colour per role, the same on every event, so a glance says who is who (2026-10-16): exhibiting ocean, visiting moss, you saffron */
.role-tag.exhibiting { background: var(--ocean-ground); color: var(--ocean); border-color: transparent; }
.role-tag.visiting { background: var(--moss-ground); color: var(--moss); border-color: transparent; }
.role-tag.you { background: var(--saffron-ground); color: var(--saffron); border-color: transparent; }
.role-tag.attending { background: var(--teal-ground); color: var(--teal); border-color: transparent; }   /* an accepted guest of a hosted event (2026-10-30) */
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 7px; background: var(--ink-3); vertical-align: middle; }
.dot.exhibiting { background: var(--ocean); }
.dot.visiting { background: var(--moss); }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.linklike:disabled { opacity: 0.5; cursor: default; }
.dialog-wide { max-width: 520px; }
.seg-n { margin-left: 6px; color: var(--ink-3); font-weight: var(--weight-medium); }
.seg > .on .seg-n { color: var(--ink-2); }
.textarea { height: auto; min-height: 96px; padding: 12px 16px; resize: vertical; line-height: var(--lh-small); font-size: var(--text-small); }

/* the editable face (the profile screen, 2026-10-16): the circle is the control; a camera badge says so, a cross on its edge removes the picture */
.face-edit { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.face-edit-btn { position: relative; display: block; padding: 0; border: 0; background: none; border-radius: var(--radius-pill); cursor: pointer; }
.face-edit-btn:disabled { cursor: default; opacity: 0.7; }
.face-edit-veil { position: absolute; inset: 0; border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center; background: rgba(17, 17, 17, 0.42); color: var(--on-ink); opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.face-edit-btn:hover .face-edit-veil, .face-edit-btn:focus-visible .face-edit-veil { opacity: 1; }
.face-edit-badge { position: absolute; right: 2px; top: calc(var(--face, 128px) - 34px); width: 34px; height: 34px; border-radius: var(--radius-pill); background: var(--ink); color: var(--on-ink); border: 2px solid var(--paper); display: flex; align-items: center; justify-content: center; pointer-events: none; }
.face-edit-remove { position: absolute; right: 0; top: 0; width: 28px; height: 28px; border-radius: var(--radius-pill); background: var(--clay); border: 2px solid var(--paper); color: var(--on-ink); display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.face-edit-remove:hover { background: #8d3a22; }
.face-edit-status { font-weight: 400; text-align: center; }
.needs .face { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--clay); }

/* a field with a platform's mark inside it, and a red cross to drop the field (the profile screen, 2026-10-16) */
.input-mark { position: relative; display: flex; align-items: center; }
.input-mark .input { width: 100%; padding-left: 50px; }
.input-mark .link-mark { position: absolute; left: 8px; width: 32px; height: 32px; }
.input-mark .link-remove { position: absolute; right: 8px; }
.link-mark { width: 36px; height: 36px; border-radius: var(--radius-pill); background: var(--paper-2); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.link-remove { width: 30px; height: 30px; flex: none; border-color: transparent; color: var(--clay); }
.link-remove:hover { background: var(--clay-ground); border-color: transparent; }

/* the platform marks in their own colours, only in the share dialog and on the profile's link rows (2026-10-16) */
.brand-linkedin { color: #0a66c2; }
.brand-x { color: #111111; }
.brand-whatsapp { color: #25d366; }
.brand-telegram { color: #26a5e4; }
.brand-facebook { color: #1877f2; }
.brand-instagram { color: #e4405f; }
.brand-web { color: var(--ink-2); }
.option:disabled { opacity: 0.5; cursor: default; }
.btn.disabled { opacity: 0.45; pointer-events: none; }

/* the illustrated face (2026-10-16): a small flat person drawn from an id for people without a photo, who blinks now and then and tilts a little when the row is hovered */
.face .avatar { width: 100%; height: 100%; display: block; transition: transform var(--dur) var(--ease); }
.person:hover .face .avatar { transform: rotate(-5deg) scale(1.04); }
.avatar-eyes { transform-box: fill-box; transform-origin: center; animation: ds-blink 6.5s ease-in-out infinite; }
@keyframes ds-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(0.08); } }
/* a chip that is a link to a platform: the mark in its colour, a small external arrow */
.chip-link .chip-ext { opacity: 0.5; }
.chip-link:hover .chip-ext { opacity: 1; }
/* the share dialog's tiles: one per platform, square, the mark in its colour (2026-10-16) */
.share-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.share-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 14px 8px 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); font-family: inherit; font-size: var(--text-caption); font-weight: var(--weight-medium); cursor: pointer; transition: border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.share-tile:hover { border-color: var(--ink); transform: translateY(-1px); }
.share-tile:disabled { opacity: 0.5; cursor: default; transform: none; }
.share-tile.on, .share-tile[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }   /* the chosen place (2026-10-31) */
.share-tile-icon { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; }