/*
 * Getting started, exchange accounts, Settings, the admin pages and the
 * research tools. Phones first: every layout here fits 375px with a 16px
 * gutter and nothing scrolls sideways; touch screens get 40px targets.
 */

/* Shared */
[hidden] { display: none !important; }
.page-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-2); }
.page-header h1 { margin: 0; font-size: 1.5rem; font-weight: 700; }
.page-purpose { margin: 0 0 var(--space-4); font-size: 0.9rem; color: var(--color-text-secondary); max-width: 760px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.text-mono { font-family: var(--font-mono); font-size: 0.85em; }

.notice { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); font-size: 0.875rem; margin-bottom: var(--space-4); overflow-wrap: anywhere; }
.notice-ok { border-color: var(--color-success); background: var(--color-success-bg); }
.notice-bad { border-color: var(--color-danger); background: var(--color-danger-bg); }
.notice-warn { border-color: var(--color-warning); background: var(--color-warning-bg); }
.notice-info { border-color: var(--color-info); background: var(--color-info-bg); }
.notice-close { flex: none; font-size: 0.78rem; color: var(--color-text-secondary); text-decoration: underline; padding: 4px; min-height: 32px; }

/* The app's confirm dialog (js/confirm-dialog.js) */
.app-confirm { max-width: 480px; }
.app-confirm-body { display: flex; flex-direction: column; gap: var(--space-3); font-size: 0.9rem; }
.app-confirm-body p { color: var(--color-text-secondary); line-height: 1.5; }
/* A long email address in a title or message wraps instead of running off a phone screen. */
.app-confirm-body h2, .app-confirm-body p { overflow-wrap: anywhere; }
.app-confirm-body ul { list-style: disc; padding-left: 1.2em; color: var(--color-text-secondary); }
.app-confirm-typed { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; }
.app-confirm-typed input { padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); font-size: 0.9rem; }
.app-confirm-tick { display: flex; gap: var(--space-2); align-items: flex-start; font-size: 0.85rem; cursor: pointer; }
.app-confirm-tick input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.app-confirm-actions { display: flex; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; }

/* Getting started (components/first-run.js) */
.fr { background: var(--color-surface); border: 1px solid var(--color-brand); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-5); }
.fr-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); flex-wrap: wrap; }
.fr h2 { margin: 0; font-size: 1.05rem; }
.fr-sub { margin: 4px 0 0; color: var(--color-text-secondary); font-size: 0.85rem; }
.fr-progress { height: 6px; border-radius: 3px; background: var(--color-border); overflow: hidden; margin: var(--space-3) 0; }
.fr-progress span { display: block; height: 100%; background: var(--color-brand); }
.fr-steps { display: flex; flex-direction: column; gap: var(--space-2); }
.fr-step { display: flex; gap: var(--space-3); padding: var(--space-2) 0; border-top: 1px solid var(--color-border); }
.fr-num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--color-bg-tertiary); font-weight: 700; font-size: 0.8rem; }
.fr-done .fr-num { background: var(--color-success-bg); color: var(--color-success); }
.fr-current .fr-num { background: var(--color-brand); color: #fff; }
.fr-step-body { min-width: 0; flex: 1; }
.fr-step-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 600; font-size: 0.9rem; }
.fr-step-body p { margin: 2px 0 0; color: var(--color-text-secondary); font-size: 0.82rem; }
.fr-done .fr-step-title > span:first-child, .fr-skipped .fr-step-title > span:first-child { color: var(--color-text-secondary); }
.fr-need { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--color-border); }
.fr-need-req { color: var(--color-brand-light); border-color: var(--color-brand); }
.fr-need-rec { color: var(--color-warning); border-color: var(--color-warning); }
.fr-need-opt { color: var(--color-text-secondary); }
.fr-state { font-size: 0.72rem; color: var(--color-text-secondary); font-weight: 400; }
.fr-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); align-items: center; }
.fr-btn { padding: 8px 14px; min-height: 40px; }
.fr-note { font-size: 0.8rem; color: var(--color-text-secondary); }
.fr-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--space-3); margin-top: var(--space-2); }
.fr-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; font-weight: 600; min-width: 0; }
.fr-form input, .fr-form select { padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); font-size: 0.875rem; width: 100%; min-width: 0; }
.fr-form small { font-weight: 400; color: var(--color-text-secondary); font-size: 0.72rem; }
.fr-after { margin: var(--space-3) 0 0; font-size: 0.85rem; color: var(--color-text-secondary); }
.fr-status { margin: var(--space-2) 0 0; font-size: 0.8rem; color: var(--color-text-secondary); }
.fr-status:empty { display: none; }
.fr-bad { color: var(--color-danger); }
.fr-summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) var(--space-4); }
.fr-summary-text { font-size: 0.875rem; }
.fr-summary .fr-actions { margin: 0; }

/* Exchange accounts */
.ex-add h2 { margin: 0 0 var(--space-3); font-size: 1.1rem; }
.ex-reassure { border: 1px solid var(--color-info); background: var(--color-info-bg); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: 0.85rem; margin-bottom: var(--space-4); }
.ex-reassure ul { list-style: disc; padding-left: 1.2em; margin-top: 6px; display: flex; flex-direction: column; gap: 4px; color: var(--color-text-secondary); }
.ex-pick { border: none; margin-bottom: var(--space-3); min-width: 0; }
.ex-pick legend { font-weight: 600; font-size: 0.85rem; margin-bottom: var(--space-2); display: inline-flex; align-items: center; gap: 6px; }
/* The exchanges under the market each trades, a small heading over each. */
.ex-pick-group + .ex-pick-group { margin-top: var(--space-3); }
.ex-pick-head { margin: 0 0 6px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-text-secondary); }
.ex-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: var(--space-2); }
.ex-pick-item { display: flex; align-items: flex-start; gap: var(--space-2); min-width: 0; padding: 10px 12px; min-height: 48px; border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; background: var(--color-bg); }
.ex-pick-item:has(input:checked) { border-color: var(--color-brand); background: var(--color-info-bg); }
.ex-pick-item input { width: 18px; height: 18px; flex: none; }
.ex-pick-item span { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; font-size: 0.875rem; }
.ex-pick-item small { color: var(--color-text-secondary); font-size: 0.72rem; }
/* One already set up: light green when it works, light red when it does not; still marked when chosen. */
.ex-pick-item.ex-pick-ok, .ex-pick-item.ex-pick-ok:has(input:checked) { border-color: var(--color-success); background: color-mix(in srgb, var(--color-success) 22%, var(--color-bg)); }
.ex-pick-item.ex-pick-bad, .ex-pick-item.ex-pick-bad:has(input:checked) { border-color: var(--color-danger); background: color-mix(in srgb, var(--color-danger) 22%, var(--color-bg)); }
.ex-pick-item.ex-pick-ok:has(input:checked), .ex-pick-item.ex-pick-bad:has(input:checked) { border-color: var(--color-brand); box-shadow: inset 0 0 0 1px var(--color-brand); }
.ex-pick-item small.ex-pick-status { margin-top: 2px; color: var(--color-text); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
/* Planned exchanges: visible so people know they are coming, plainly not choosable. */
.ex-pick-soon { cursor: not-allowed; border-style: dashed; background: transparent; color: var(--color-text-secondary); }
.ex-pick-soon input { opacity: 0.5; }
.ex-guide { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: 0.85rem; margin-bottom: var(--space-4); background: var(--color-bg); }
.ex-guide-head { display: flex; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; margin-bottom: 6px; }
.ex-guide a { color: var(--color-brand-light); text-decoration: underline; }
.ex-guide ol { list-style: decimal; padding-left: 1.3em; display: flex; flex-direction: column; gap: 4px; color: var(--color-text-secondary); margin-bottom: 6px; }
.ex-guide ul.ex-guide-needs { list-style: disc; padding-left: 1.3em; display: flex; flex-direction: column; gap: 4px; color: var(--color-text-secondary); margin-bottom: 6px; }
.ex-guide p { margin-top: 4px; color: var(--color-text-secondary); }
.ex-oauth { font-size: 0.85rem; color: var(--color-text-secondary); margin-bottom: var(--space-4); }
.ex-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-3); }
.ex-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; font-weight: 600; min-width: 0; }
.ex-field small { font-weight: 400; color: var(--color-text-secondary); }
.ex-add .form-control, .ex-rekey .form-control { padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); font-size: 0.875rem; width: 100%; min-width: 0; font-weight: 400; }
.ex-secret { font-family: var(--font-mono); -webkit-text-security: disc; }
.ex-field-wide { grid-column: 1 / -1; }
.ex-check { display: flex; align-items: center; gap: var(--space-2); font-size: 0.85rem; min-height: 40px; cursor: pointer; }
.ex-check input { width: 18px; height: 18px; }
.ex-row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: flex-end; }
.ex-submit { margin-top: var(--space-4); }
.ex-small { font-size: 0.78rem; color: var(--color-text-secondary); margin-top: var(--space-2); }
.ex-rekey { display: flex; flex-direction: column; gap: var(--space-3); }
.ex-rekey p { font-size: 0.82rem; color: var(--color-text-secondary); }
.ex-dialog-actions { justify-content: flex-end; }
.ex-empty { text-align: center; display: flex; flex-direction: column; gap: var(--space-3); align-items: center; padding: var(--space-6) var(--space-4); }
.ex-empty h2 { font-size: 1.1rem; margin: 0; }
.ex-empty p { color: var(--color-text-secondary); font-size: 0.9rem; max-width: 520px; }
.ex-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); }
/* What each exchange's API can trade: ticked when bots trade it here. */
.ex-tags { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 4px 0 0; padding: 0; min-width: 0; max-width: 100%; }
.ex-tag { font-size: 0.72rem; line-height: 1.3; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--color-border); color: var(--color-text-secondary); background: var(--color-bg); max-width: 100%; box-sizing: border-box; }
/* A long tag wraps inside the card rather than running past its edge (Gemini's "Stablecoin pairs (GUSD, USDC, RLUSD)", 2026-10-17). */
.ex-tag { white-space: normal; overflow-wrap: anywhere; }
.ex-tag-on { color: var(--color-success); border-color: color-mix(in srgb, var(--color-success) 45%, transparent); background: var(--color-success-bg); font-weight: 600; }
.ex-tags-small .ex-tag { font-size: 0.66rem; padding: 1px 6px; }
.ex-tags-legend { font-size: 0.75rem; color: var(--color-text-secondary); margin: var(--space-2) 0; }
.ex-card-tags-head { font-size: 0.75rem; color: var(--color-text-secondary); }
.ex-card { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; padding: var(--space-4); }
.ex-card h3 { margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
.ex-card-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.ex-btn { padding: 6px 12px; min-height: 36px; }
.ex-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--space-2) var(--space-3); font-size: 0.85rem; }
.ex-facts dt { color: var(--color-text-secondary); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.ex-facts dd { margin: 0; overflow-wrap: anywhere; }
.ex-card .notice { margin: 0; }

/* Settings */
.set-page { max-width: 760px; }
.set-page h1 { margin: 0 0 var(--space-3); font-size: 1.5rem; font-weight: 700; }
.set-tabs { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 4px; padding: var(--space-2) 0; margin-bottom: var(--space-4); background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
.set-tabs button { position: relative; padding: 6px 12px; min-height: 36px; border-radius: 999px; border: 1px solid var(--color-border); color: var(--color-text); font-size: 0.8rem; }
.set-tabs button:hover { background: var(--color-surface); }
/* One row on a phone, scrolled inside the bar, so it does not cover half the screen. */
@media (max-width: 560px) {
  .set-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .set-tabs button { flex: none; }
}
.set-dot { position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-warning); }
.set-section { margin-bottom: var(--space-6); scroll-margin-top: 64px; }
.set-section-head { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); flex-wrap: wrap; }
.set-section-head h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.set-unsaved { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 999px; color: var(--color-warning); border: 1px solid var(--color-warning); background: var(--color-warning-bg); }
.set-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-4); font-size: 0.875rem; min-width: 0; }
.set-hint { color: var(--color-text-secondary); font-size: 0.8rem; margin: 0; }
.set-hint:empty { display: none; }
.set-bad { color: var(--color-danger); }
.set-ok { color: var(--color-success); }
.set-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.set-actions .btn { padding: 8px 14px; min-height: 40px; }
.set-sub { border-top: 1px solid var(--color-border); padding-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.set-sub-title { font-weight: 600; font-size: 0.875rem; }
.set-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-3); }
.set-field { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 0.8rem; min-width: 0; }
.set-field input, .set-field select { padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); font-size: 0.875rem; width: 100%; min-width: 0; font-weight: 400; }
.set-field small { font-weight: 400; color: var(--color-text-secondary); font-size: 0.72rem; }
.set-model-list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 2px); margin: 0; padding: 4px 0; max-height: 240px; overflow: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); font-size: 0.85rem; }
.set-option { display: flex; align-items: flex-start; gap: var(--space-3); cursor: pointer; }
.set-option input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.set-option > span { display: flex; flex-direction: column; gap: 2px; }
.set-option small { color: var(--color-text-secondary); font-size: 0.75rem; }
.set-devices { font-size: 0.75rem; }
.set-devices:empty { display: none; }
.set-device { padding: 4px 0; border-bottom: 1px solid var(--color-border); }
.set-save-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; border-top: 1px solid var(--color-border); padding-top: var(--space-3); }
.set-save { padding: 8px 16px; min-height: 40px; }
.set-save-state { font-size: 0.78rem; color: var(--color-text-secondary); }
.set-facts { display: flex; flex-direction: column; gap: var(--space-2); }
.set-facts > div { display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.set-facts dt { color: var(--color-text-secondary); }
.set-facts dd { margin: 0; text-align: right; overflow-wrap: anywhere; min-width: 0; }
.set-details summary { cursor: pointer; color: var(--color-text-secondary); font-size: 0.8rem; min-height: 32px; display: flex; align-items: center; }
.set-details .set-facts { margin-top: var(--space-2); }
.set-list { display: flex; flex-direction: column; gap: 4px; }
.set-admin-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-3); }
.set-admin-link { display: flex; flex-direction: column; gap: 4px; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); }
.set-admin-link:hover { border-color: var(--color-brand); }
.set-admin-link small { color: var(--color-text-secondary); font-size: 0.78rem; }
#live-trading-pref:empty { display: none; }

/* Communication grid: whole cells as tap targets (js/communication-prefs.js) */
.comm-tap { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }

/* Users */
.au-roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--space-2); font-size: 0.8rem; color: var(--color-text-secondary); margin-bottom: var(--space-4); }
.au-roles strong { color: var(--color-text); margin-right: 4px; }
.au-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: var(--space-3); margin-bottom: var(--space-2); }
.au-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; font-weight: 600; min-width: 0; }
.au-field input, .au-field select, .au-role select { padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); font-size: 0.875rem; width: 100%; min-width: 0; font-weight: 400; }
.au-count { font-size: 0.78rem; color: var(--color-text-secondary); margin-bottom: var(--space-3); }
.au-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--space-3); }
.au-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); min-width: 0; }
.au-disabled { opacity: 0.75; }
.au-card-head { display: flex; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.au-who { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.au-email { font-size: 0.8rem; }
.au-badges { display: flex; gap: 4px; flex-wrap: wrap; align-items: flex-start; }
.au-role { display: flex; flex-direction: column; gap: 4px; font-size: 0.8rem; font-weight: 600; }
.au-role small { font-weight: 400; color: var(--color-text-secondary); }
.au-meta { font-size: 0.75rem; }
.au-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.au-btn { padding: 6px 12px; min-height: 36px; }
.au-muted { color: var(--color-text-secondary); font-size: 0.8rem; font-weight: 400; }
.au-bad { color: var(--color-danger); font-size: 0.85rem; }
.au-h2 { font-size: 1rem; font-weight: 600; margin: var(--space-6) 0 var(--space-1); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; }
.au-audit { display: flex; flex-direction: column; font-size: 0.85rem; margin-top: var(--space-3); }
.au-audit li { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); overflow-wrap: anywhere; }
.au-audit-detail { font-size: 0.8rem; margin-top: 2px; }
.au-requests { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); font-size: 0.85rem; }
.au-request { border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 8px 10px; overflow-wrap: anywhere; }
.au-request a { color: var(--color-brand-light); }
.au-handled { opacity: 0.55; }
.au-request-head { display: flex; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; }
.au-handled-box { display: inline-flex; gap: 6px; align-items: center; margin-top: 6px; font-size: 0.8rem; cursor: pointer; min-height: 32px; }
/* Google sign-ins: refused people who are not users yet stand out. */
.gs-table { width: 100%; font-size: 0.85rem; }
.gs-table td { vertical-align: top; overflow-wrap: anywhere; }
.gs-table tr:has([data-new-refusal]) { background: var(--color-warning-bg); }
.gs-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gs-marks { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.gs-time, .gs-table .badge, .gs-table .au-btn { white-space: nowrap; }
.gs-mono { font-family: var(--font-mono, monospace); font-size: 0.8rem; }
.gs-pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-3); flex-wrap: wrap; }
.gs-user summary { cursor: pointer; font-size: 0.8rem; color: var(--color-text-secondary); min-height: 32px; display: flex; align-items: center; }
.gs-user-list { display: flex; flex-direction: column; gap: 6px; font-size: 0.8rem; margin-top: 4px; }
.gs-steps { display: flex; flex-wrap: wrap; gap: 6px; }
.gs-allowed { color: var(--color-success); font-weight: 600; font-size: 0.8rem; }
.al-form { margin-top: var(--space-3); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--space-3); align-items: end; margin-bottom: var(--space-2); }
.al-form .au-btn { min-height: 38px; }
.al-error { color: var(--color-danger); font-size: 0.8rem; min-height: 1em; margin: 0 0 var(--space-2); }
.al-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.al-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--space-2); padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); font-size: 0.85rem; }
.al-email { font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.al-meta { flex: 1 1 200px; font-size: 0.8rem; min-width: 0; }
.gs-user-list li { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; overflow-wrap: anywhere; }

/* Scanner: a table on a wide screen, a card per pair on a phone */
.sc-wrap { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.sc-table { width: 100%; border-collapse: collapse; }
.sc-table thead th { text-align: left; padding: 8px 10px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); font-weight: 600; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.sc-table td, .sc-table tbody th { padding: 8px 10px; border-bottom: 1px solid var(--color-border); font-size: 0.85rem; vertical-align: middle; text-align: left; font-weight: 400; }
.sc-asset { font-weight: 700 !important; }
.sc-asset > span:first-child { display: block; }
.sc-quote { color: var(--color-text-muted); font-weight: 400; font-size: 0.75rem; }
.sc-actions { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.sc-btn { padding: 4px 10px; font-size: 0.75rem; min-height: 32px; }
.sc-num { text-align: right !important; }
.sc-score { display: flex; align-items: center; gap: 8px; min-width: 100px; font-weight: 700; }
.sc-bar { flex: 1; height: 6px; border-radius: 3px; background: var(--color-border); overflow: hidden; }
.sc-bar span { display: block; height: 100%; }
.sc-knife { color: var(--color-danger); font-size: 0.72rem; font-weight: 700; }
.sc-why details { font-size: 0.78rem; }
.sc-why summary { cursor: pointer; color: var(--color-brand-light); min-height: 32px; display: inline-flex; align-items: center; }
.sc-why p { color: var(--color-text-secondary); margin-top: 4px; max-width: 320px; }
@media (max-width: 760px) {
  .sc-table thead { display: none; }
  .sc-table, .sc-table tbody, .sc-table tr { display: block; width: 100%; }
  .sc-table tr { padding: var(--space-3); border-bottom: 1px solid var(--color-border); display: grid; grid-template-columns: 1fr 1fr; gap: 4px var(--space-3); }
  .sc-table td, .sc-table tbody th { display: block; border: none; padding: 0; }
  .sc-table tbody th { grid-column: 1 / -1; }
  .sc-table td[data-label]::before { content: attr(data-label); display: block; color: var(--color-text-muted); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; }
  .sc-num { text-align: left !important; }
  .sc-why { grid-column: 1 / -1; }
  .sc-btn { min-height: 40px; padding: 6px 14px; }
}

/* Scheduler results */
.sch-result { display: flex; flex-direction: column; margin-top: 6px; font-size: 0.78rem; }
.sch-result > div { display: flex; justify-content: space-between; gap: var(--space-3); padding: 3px 0; border-bottom: 1px solid var(--color-border); flex-wrap: wrap; }
.sch-result dt { color: var(--color-text-secondary); }
.sch-result dd { margin: 0; text-align: right; overflow-wrap: anywhere; min-width: 0; }

/* Touch screens: 40px targets for the small controls on these pages */
@media (pointer: coarse) {
  .comm-tap { min-width: 40px; min-height: 40px; }
  .comm-option, .comm-bots label, .set-option, .au-handled-box, .ex-check { min-height: 40px; align-items: center; }
  .set-tabs button, .ex-btn, .au-btn, .sc-btn, .notice-close, .set-details summary, .sc-why summary { min-height: 40px; }
  .set-field input, .set-field select, .au-field input, .au-field select, .au-role select, .fr-form input, .fr-form select { min-height: 40px; }
}