.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; z-index: 60; background: var(--surface); padding: 8px 12px; }
.loading { padding: 40px; color: var(--ink-soft); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
button.link { border: 0; background: none; padding: 0; color: var(--gum); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---- Shell ---- */
.shell { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.rail { background: var(--surface); border-right: 1px solid var(--line); padding: 20px 16px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 0; height: 100vh; }
.brand { font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.rail select { width: 100%; }
.ws-type { font-size: 13px; color: var(--ink-soft); margin-top: -6px; }
.ws-type::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--stage-new); }
.ws-sandbox::before, .ws-demo::before { background: var(--amber); }
.ws-pilot::before { background: var(--harbour); }
.ws-client::before { background: var(--gum); }
.rail nav { display: grid; gap: 2px; margin-top: 6px; }
.rail nav a { color: var(--ink); text-decoration: none; padding: 7px 10px; border-radius: var(--radius-m); font-weight: 500; }
.rail nav a:hover { background: var(--paper); }
.rail nav a[aria-current='page'] { background: var(--gum-soft); color: var(--gum); font-weight: 600; }
.rail nav .nav-admin { margin-top: 14px; border-top: 1px solid var(--line); border-radius: 0; padding-top: 14px; }
.rail-foot { margin-top: auto; display: grid; gap: 4px; font-size: 13px; word-break: break-all; }
.rail-foot button { justify-self: start; }
.main { padding: 28px 36px 60px; min-width: 0; }
.view { display: grid; gap: 18px; max-width: 1180px; }
.view-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.view-head h1 { font-size: 26px; letter-spacing: -0.015em; }
.view-intro { max-width: 68ch; color: var(--ink-soft); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.section-title { font-size: 18px; margin-top: 12px; }
.empty { padding: 40px 0; display: grid; gap: 10px; max-width: 52ch; }

/* ---- Pipeline strip: the inbox at a glance, and its filter ---- */
.pipeline { display: flex; gap: 4px; align-items: stretch; }
.pipeline button { border-radius: var(--radius-s); border: 0; padding: 10px 12px 9px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; color: #fff; overflow: hidden; }
.pipeline button span { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pipeline button strong { font-size: 22px; line-height: 1.1; }
.pipeline .pipe-all { background: var(--surface); color: var(--ink); border: 1px solid var(--line); flex: 0 0 auto; }
.pipe-new { background: var(--stage-new); }
.pipe-qualified { background: var(--stage-qualified); }
.pipe-booked { background: var(--stage-booked); }
.pipe-won { background: var(--stage-won); }
.pipe-lost { background: var(--stage-lost); }
.pipeline button[aria-pressed='false']:not(.pipe-all) { opacity: 0.88; }
.pipeline:has(button[aria-pressed='true']:not(.pipe-all)) button[aria-pressed='false']:not(.pipe-all) { opacity: 0.5; }
.pipeline button[aria-pressed='true'] { box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.28); }
.pipe-all[aria-pressed='true'] { border-color: var(--ink); }
@media (prefers-color-scheme: dark) { .pipeline button:not(.pipe-all) { color: #0f1714; } }

/* ---- Inbox ---- */
.inbox { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 20px; align-items: start; }
.inbox-list { display: grid; gap: 10px; }
.inbox-list input[type='search'] { width: 100%; }
.lead-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); overflow: hidden; }
.lead-list li + li { border-top: 1px solid var(--line); }
.lead-row { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; width: 100%; padding: 10px 12px 10px 14px; border-left: 4px solid transparent; }
.lead-row:hover { background: var(--paper); }
.lead-row[aria-current='true'] { background: var(--gum-soft); }
.lead-row:focus-visible { box-shadow: inset var(--focus); }
.stage-edge-new { border-left-color: var(--stage-new); }
.stage-edge-qualified { border-left-color: var(--stage-qualified); }
.stage-edge-booked { border-left-color: var(--stage-booked); }
.stage-edge-won { border-left-color: var(--stage-won); }
.stage-edge-lost { border-left-color: var(--stage-lost); }
.lr-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-meta, .lr-owner { font-size: 13px; color: var(--ink-soft); }
.lr-owner { text-align: right; }
.chip { font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 10px; justify-self: end; background: var(--paper); border: 1px solid currentColor; }
.chip-new { color: var(--stage-new); }
.chip-qualified { color: var(--stage-qualified); }
.chip-booked { color: var(--stage-booked); }
.chip-won { color: var(--stage-won); }
.chip-lost { color: var(--stage-lost); }
.empty-row { padding: 18px 14px; color: var(--ink-soft); }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }

.lead-detail { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 20px 22px; display: grid; gap: 16px; position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow: auto; }
.ld-head h2 { font-size: 22px; }
.ld-contact { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
.ld-contact dt { color: var(--ink-soft); font-size: 13px; padding-top: 2px; }
.ld-contact dd { margin: 0; }
.ld-message { margin: 0; padding: 10px 14px; border-left: 3px solid var(--line); background: var(--paper); border-radius: 0 var(--radius-s) var(--radius-s) 0; white-space: pre-wrap; }
.stage-picker { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn { padding: 5px 12px; border-radius: 16px; font-size: 13px; border: 1px solid currentColor; background: transparent; }
.chip-btn[aria-pressed='true'] { color: #fff; }
.chip-btn.chip-new[aria-pressed='true'] { background: var(--stage-new); border-color: var(--stage-new); }
.chip-btn.chip-qualified[aria-pressed='true'] { background: var(--stage-qualified); border-color: var(--stage-qualified); }
.chip-btn.chip-booked[aria-pressed='true'] { background: var(--stage-booked); border-color: var(--stage-booked); }
.chip-btn.chip-won[aria-pressed='true'] { background: var(--stage-won); border-color: var(--stage-won); }
.chip-btn.chip-lost[aria-pressed='true'] { background: var(--stage-lost); border-color: var(--stage-lost); }
.lost-wrap select { width: 100%; }
.note-form { display: grid; gap: 8px; justify-items: start; }
.tl-title { font-size: 15px; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--line); display: grid; gap: 12px; }
.timeline li { display: grid; gap: 2px; position: relative; }
.timeline li::before { content: ''; position: absolute; left: -20px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line); }
.tl-note::before { border-color: var(--gum) !important; }
.tl-note p { white-space: pre-wrap; }

/* ---- Intelligence ---- */
.intel-start { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mapping { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 20px 22px; display: grid; gap: 12px; }
.mapping h2 { font-size: 18px; }
.mapping td label { font-weight: 500; font-size: 14px; margin: 0; }
.mapping .fine { word-break: break-word; }
.report { margin-top: 8px; }

/* ---- Settings and admin ---- */
.settings-section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 20px 22px; display: grid; gap: 12px; max-width: 820px; }
.settings-section h2 { font-size: 18px; }
.settings-section h3 { font-size: 15px; margin: 10px 0 6px; }
.settings-form { display: grid; gap: 14px; }
.settings-form textarea { min-height: 70px; }
.row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; }
.row > div { display: grid; }
fieldset { border: 0; padding: 0; margin: 0; }
legend { font-weight: 600; font-size: 13px; margin-bottom: 6px; }
label.check { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: 14px; margin: 0; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; }
.kv dt { color: var(--ink-soft); font-size: 14px; }
.kv dd { margin: 0; }
.versions ul { padding-left: 18px; margin: 6px 0 0; }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.activity { list-style: none; padding: 0; margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); max-width: 900px; }
.activity li { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; padding: 10px 14px; align-items: baseline; }
.activity li + li { border-top: 1px solid var(--line); }

/* ---- Sign-in and dialogs ---- */
.signin-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.signin { width: min(400px, 100%); display: grid; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 28px; }
.signin h1 { font-size: 22px; }
.signin input { width: 100%; }
.dialog { border: 1px solid var(--line); border-radius: var(--radius-m); padding: 0; width: min(480px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); }
.dialog::backdrop { background: rgba(20, 26, 32, 0.45); }
.dialog-form { display: grid; gap: 12px; padding: 22px; }
.dialog-form input { width: 100%; }
.dialog-form .actions { justify-content: flex-end; }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0; border-bottom: 1px solid var(--line); padding: 12px 16px; }
  .rail select { width: auto; max-width: 60vw; }
  .rail nav { display: flex; flex-wrap: wrap; width: 100%; margin: 0; }
  .rail nav .nav-admin { margin: 0; border: 0; padding-top: 7px; }
  .rail-foot { margin: 0 0 0 auto; display: flex; gap: 10px; align-items: center; }
  .ws-type { margin: 0; }
  .main { padding: 20px 16px 48px; }
  .inbox { grid-template-columns: 1fr; }
  .lead-detail { position: static; max-height: none; }
  .pipeline { flex-wrap: wrap; }
  .pipeline button { flex: 1 1 30% !important; }
}
@media print {
  .rail, .view-head .actions, .skip { display: none; }
  .shell { display: block; }
  .main { padding: 0; }
}
.settings-section > button { justify-self: start; }

/* AI qualification: score badge in the lead list and the panel on a lead. */
.lr-score { display: inline-block; min-width: 24px; margin-right: 6px; padding: 0 5px; border-radius: 8px; font-size: 12px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.score-hot { color: var(--amber); background: var(--amber-soft); }
.score-warm { color: var(--gum); background: var(--gum-soft); }
.score-cool { color: var(--ink-soft); background: var(--paper); }
.ld-ai { display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-s); background: var(--surface); }
.ld-score { flex: none; min-width: 56px; padding: 8px 6px; border-radius: 8px; text-align: center; font-size: 22px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.ld-score small { display: block; margin-top: 3px; font-size: 11px; font-weight: 600; opacity: 0.8; }
.ld-ai-body { min-width: 0; }
.ld-ai-body p { margin: 0 0 4px; }
.ld-ai-head { font-weight: 600; }
.ld-ai-summary { overflow-wrap: anywhere; }

/* Long unbreakable text (webhook URLs, IDs) must wrap instead of widening the page on phones. */
.main, .view { min-width: 0; }
.main p, .main dd, .main li { overflow-wrap: anywhere; }
.view > *, .inbox > * { min-width: 0; }
/* Grid and flex children default to their content width; let them shrink on narrow screens.
   Long dropdown options (e.g. approval modes) otherwise set the page width. */
.settings-section > *, .fu-config > *, .fu-channels > *, .fu-sequence-edit > *, .fu-step-edit > * { min-width: 0; }
.main select, .main input, .main textarea { max-width: 100%; }
.fu-form-grid > * { min-width: 0; }
.fu-form-grid select, .fu-sequence-edit select { width: 100%; min-width: 0; }
@media (max-width: 540px) { .fu-form-grid { grid-template-columns: minmax(0, 1fr); } }

/* Setup page: client readiness checklist and enquiry form settings. */
.setup-progress { margin: 0; padding: 6px 12px; border-radius: 999px; background: var(--amber-soft); color: var(--amber); font-weight: 600; font-size: 14px; white-space: nowrap; }
.setup-progress.is-ready { background: var(--gum-soft); color: var(--gum); }
.setup-group h3 { margin: 6px 0 4px; }
.setup-list { list-style: none; margin: 0; padding: 0; display: grid; }
.setup-step { display: grid; grid-template-columns: 24px 1fr auto; gap: 4px 12px; align-items: start; padding: 10px 0; border-top: 1px solid var(--line); }
.setup-step:first-child { border-top: 0; }
.setup-step p { margin: 0; }
.setup-step .step-title { font-weight: 600; }
.setup-step > a { font-size: 14px; white-space: nowrap; align-self: center; }
.step-mark { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; font-size: 13px; font-weight: 700; margin-top: 1px; }
.step-done .step-mark { background: var(--gum); border-color: var(--gum); color: #fff; }
.step-optional .step-mark { color: var(--ink-soft); }
.step-todo .step-mark { border-color: var(--amber); }
.setup-form { display: grid; gap: 12px; }
.setup-form input:not([type=checkbox]), .setup-form textarea, .setup-form select, .settings-section textarea.mono { width: 100%; }
.setup-auto { display: grid; gap: 12px; padding-left: 26px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
@media (max-width: 540px) { .setup-step { grid-template-columns: 24px 1fr; } .setup-step > a { grid-column: 2; } }
.setup-field input, .setup-field textarea { display: block; width: 100%; margin-top: 4px; }