/* ==========================================================================
   Slack Invite + Onboarding prototype — shared styles
   Layered on top of styles.css (copied from the settings prototype).
   Contains: dev chrome bar, Send-via multi-select, delivery-result table,
   Slack DM mock, and the centered onboarding card family.
   ========================================================================== */

/* Base size for every inline icon injected from ICONS in the data file.
   The source SVGs carry no intrinsic width/height once normalised, so without
   this they expand to fill their container. More specific rules below
   (.sendvia-chip .ico, .delivered-via .ico, ...) override the box per context. */
.ico { width: 14px; height: 14px; flex-shrink: 0; display: inline-block; }

/* --------------------------------------------------------------------------
   1. Dev chrome (prototype-only, deliberately NOT product UI)
   -------------------------------------------------------------------------- */
body { padding-top: 46px; }

.devbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 5000;
  background: #1e1e1e;
  color: #d8dde3;
  border-bottom: 1px solid #000;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 12px;
  height: 46px;
  overflow-x: auto;
  white-space: nowrap;
}

.devbar-tag {
  flex-shrink: 0;
  background: #3f84e5;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 3px 6px;
  border-radius: 3px;
}

.devbar-block { flex-shrink: 0; display: flex; flex-direction: column; gap: 1px; }
.devbar-k { font-size: 8px; letter-spacing: 0.8px; text-transform: uppercase; color: #6f7680; }
.devbar-v { color: #f2f5f8; }
.devbar-url { color: #7fd0a2; display: block; max-width: 330px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.devbar-sep { flex-shrink: 0; width: 1px; align-self: stretch; background: #33383e; margin: 8px 0; }

.devbar-states { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.devbar-state {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: #b9c0c8;
  padding: 2px 6px;
  border: 1px solid #33383e;
  border-radius: 3px;
}
.devbar-state:hover { border-color: #4d545c; color: #fff; }
.devbar-state input { margin: 0; accent-color: #3f84e5; }
.devbar-state.is-on { border-color: #3f84e5; color: #fff; background: #1b2c44; }

.devbar-spacer { flex: 1 1 auto; }
.devbar-links { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.devbar-link {
  color: #d8dde3;
  text-decoration: none;
  border: 1px solid #33383e;
  border-radius: 3px;
  padding: 4px 8px;
}
.devbar-link:hover { background: #2a2f35; color: #fff; }
.devbar-link.is-dead { opacity: 0.35; pointer-events: none; }
.devbar-link-map { border-color: #3f84e5; color: #8fc0ff; }

/* --------------------------------------------------------------------------
   2. "Send via" multi-select (custom — not a native <select>)
   -------------------------------------------------------------------------- */
.sendvia { position: relative; }

.sendvia-trigger {
  width: 100%;
  min-height: 34px;
  background: #fff;
  border: 1px solid #e1e5e9;
  border-radius: 4px;
  padding: 4px 28px 4px 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  color: #222;
  text-align: left;
}
.sendvia-trigger:hover { border-color: #cdd4db; }
.sendvia.is-open .sendvia-trigger { border-color: #3f84e5; box-shadow: 0 0 0 2px rgba(63,132,229,0.12); }
.sendvia-placeholder { color: #9DA1A5; font-size: 12px; }
.sendvia-caret {
  position: absolute;
  right: 9px; top: 50%;
  margin-top: -2px;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #9DA1A5;
  pointer-events: none;
}

.sendvia-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #F1F5F9;
  border: 1px solid #e1e5e9;
  border-radius: 10px;
  padding: 2px 8px 2px 6px;
  font-size: 11px;
  font-weight: 600;
  color: #444;
  line-height: 16px;
}
.sendvia-chip .ico { width: 12px; height: 12px; display: block; }

.sendvia-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  z-index: 40;
  background: #fff;
  border: 1px solid #e8ebef;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  padding: 4px;
}
.sendvia.is-open .sendvia-menu { display: block; }

.sendvia-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: #222;
}
.sendvia-opt:hover { background: #F1F7FF; }
.sendvia-opt .ico { width: 15px; height: 15px; flex-shrink: 0; display: block; }
.sendvia-opt .sendvia-box {
  width: 14px; height: 14px;
  flex-shrink: 0;
  border: 1px solid #cdd4db;
  border-radius: 3px;
  background: #fff;
  position: relative;
}
.sendvia-opt.is-checked .sendvia-box { background: #3f84e5; border-color: #3f84e5; }
.sendvia-opt.is-checked .sendvia-box::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 3px; height: 7px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.sendvia-opt[aria-disabled="true"] { color: #9DA1A5; cursor: not-allowed; }
.sendvia-opt[aria-disabled="true"] .ico { opacity: 0.35; filter: grayscale(1); }
.sendvia-opt[aria-disabled="true"] .sendvia-box { background: #f5f7fa; border-color: #e1e5e9; }
.sendvia-opt[aria-disabled="true"]:hover { background: #fafbfc; }
.sendvia-optlabel { flex: 1 1 auto; }
.sendvia-note { font-size: 10px; font-weight: 500; color: #9DA1A5; }

/* Hover tooltip. Lives on the option wrapper (never on a disabled <button>),
   so it fires on disabled options too. */
.proto-tip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 8px; right: 8px;
  z-index: 60;
  background: #222;
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  padding: 7px 9px;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s;
  pointer-events: none;
  white-space: normal;
}
.proto-tip::after {
  content: '';
  position: absolute;
  top: 100%; left: 22px;
  border: 5px solid transparent;
  border-top-color: #222;
}
.sendvia-opt:hover > .proto-tip,
.tip-wrap:hover > .proto-tip,
.tip-wrap:focus-within > .proto-tip { opacity: 1; visibility: visible; }
.tip-wrap { position: relative; display: inline-flex; align-items: center; }

.sendvia-helper {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 500;
  color: #77797B;
  line-height: 1.5;
}
.sendvia-helper .ico { width: 12px; height: 12px; vertical-align: -2px; margin-right: 4px; }

/* --------------------------------------------------------------------------
   3. Delivery results
   -------------------------------------------------------------------------- */
.delivery-table { width: 100%; border-collapse: collapse; }
.delivery-table th {
  font-size: 10px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase;
  color: #9DA1A5; background: #fafbfc; text-align: left;
  padding: 7px 10px; border-bottom: 1px solid #e1e5e9;
}
.delivery-table td {
  font-size: 12px; color: #222; padding: 9px 10px;
  border-bottom: 1px solid #f0f2f5; vertical-align: middle;
}
.delivery-table tr:last-child td { border-bottom: none; }
.delivery-email { font-weight: 600; }

/* One outcome per invitee: icon + phrase, with an optional muted reason line. */
.delivered-via { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: #222; }
.delivered-via .ico { width: 14px; height: 14px; display: block; }
.delivered-note { font-size: 12px; font-weight: 500; color: #9DA1A5; margin-top: 3px; padding-left: 21px; }

/* Channel hint sitting immediately left of an email address in a table cell. */
.email-with-channel { display: inline-flex; align-items: center; gap: 7px; }
.email-with-channel .channel-ico { display: inline-flex; opacity: 0.75; }
.email-with-channel .channel-ico .ico { width: 14px; height: 14px; display: block; }

.channel-cell { display: inline-flex; align-items: center; gap: 6px; }
.channel-cell .ico { width: 14px; height: 14px; display: block; }

.results-summary {
  display: flex; align-items: center; gap: 8px;
  background: #F1F7FF; border: 1px solid #d6e6fd; border-radius: 8px;
  padding: 10px 12px; margin-bottom: 16px;
  font-size: 12px; font-weight: 500; color: #2e6ec5;
}

/* --------------------------------------------------------------------------
   4. Slack DM mock
   -------------------------------------------------------------------------- */
.slack-app {
  font-family: 'Lato', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  display: flex;
  height: calc(100vh - 46px);
  min-height: 620px;
  background: #fff;
  border-top: 1px solid #e1e5e9;
}
.slack-sidebar {
  width: 230px; flex-shrink: 0;
  background: #3F0E40; color: #cfc3cf;
  padding: 14px 0; font-size: 14px;
}
.slack-ws { padding: 0 16px 12px; color: #fff; font-weight: 900; font-size: 16px; border-bottom: 1px solid #52275a; margin-bottom: 10px; }
.slack-sec { padding: 8px 16px 4px; font-size: 12px; color: #b9a7b9; font-weight: 700; }
.slack-item { padding: 4px 16px; display: flex; align-items: center; gap: 8px; }
.slack-item.is-active { background: #1164A3; color: #fff; font-weight: 700; }
.slack-dot { width: 8px; height: 8px; border-radius: 50%; background: #2BAC76; flex-shrink: 0; }
.slack-main { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.slack-topbar {
  height: 49px; flex-shrink: 0; border-bottom: 1px solid #e2e2e2;
  display: flex; align-items: center; gap: 8px; padding: 0 18px;
  font-weight: 900; font-size: 15px; color: #1d1c1d;
}
.slack-badge-app {
  background: #e8e8e8; color: #616061; font-size: 10px; font-weight: 700;
  padding: 1px 4px; border-radius: 2px; letter-spacing: 0.3px;
}
.slack-msgs { flex: 1 1 auto; overflow-y: auto; padding: 20px 18px; }
.slack-msg { display: flex; gap: 10px; }
.slack-avatar {
  width: 36px; height: 36px; border-radius: 4px; flex-shrink: 0;
  background: #3f84e5; color: #fff; display: flex; align-items: center;
  justify-content: center; font-weight: 900; font-size: 14px;
}
.slack-body { min-width: 0; flex: 1 1 auto; }
.slack-meta { display: flex; align-items: baseline; gap: 6px; margin-bottom: 3px; }
.slack-author { font-weight: 900; color: #1d1c1d; font-size: 15px; }
.slack-time { font-size: 12px; color: #616061; }
.slack-block { max-width: 560px; font-size: 15px; color: #1d1c1d; line-height: 1.46668; }
.slack-block h3 { font-size: 18px; font-weight: 900; margin: 0 0 8px; color: #1d1c1d; }
.slack-block p { margin: 0 0 10px; }
.slack-context { display: flex; align-items: center; gap: 8px; color: #616061; font-size: 13px; margin: 10px 0; }
.slack-context .slack-mini { width: 20px; height: 20px; border-radius: 3px; font-size: 9px; }
.slack-divider { height: 1px; background: #e2e2e2; margin: 14px 0; }
.slack-actions { display: flex; gap: 8px; margin: 12px 0 6px; }
.slack-btn {
  font-family: inherit; font-size: 15px; font-weight: 700;
  border-radius: 4px; padding: 9px 14px; cursor: pointer;
  border: 1px solid rgba(29,28,29,0.3); background: #fff; color: #1d1c1d;
}
.slack-btn-primary { background: #007a5a; border-color: #007a5a; color: #fff; }
.slack-btn-primary:hover { background: #148567; }
.slack-btn:disabled { opacity: 0.5; cursor: default; }
.slack-accepted {
  background: #f8f8f8; border-left: 4px solid #007a5a;
  padding: 12px 14px; border-radius: 0 6px 6px 0; max-width: 560px;
}
.slack-edited { font-size: 12px; color: #616061; }
.slack-composer {
  flex-shrink: 0; margin: 0 18px 18px; border: 1px solid #8d8d8e;
  border-radius: 8px; padding: 10px 12px; color: #8d8d8e; font-size: 15px;
}

/* --------------------------------------------------------------------------
   5. Centered onboarding / join card family
   -------------------------------------------------------------------------- */
.onb-page {
  min-height: calc(100vh - 46px);
  background: #FBFCFE;
  display: flex;
  justify-content: center;
  padding: 48px 1rem 64px;
}
.onb-col { width: 100%; max-width: 440px; }
.onb-col-wide { max-width: 520px; }

.onb-card {
  background: #fff;
  border: 1px solid #e8ebef;
  border-radius: 10px;
  padding: 28px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.onb-logo {
  width: 44px; height: 44px; border-radius: 10px;
  background: #222; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px; letter-spacing: -0.5px;
  margin: 0 auto 16px;
}
.onb-title { font-size: 20px; font-weight: 700; color: #222; letter-spacing: -0.2px; text-align: center; margin: 0 0 6px; }
.onb-sub { font-size: 12px; font-weight: 500; color: #77797B; text-align: center; line-height: 1.6; margin: 0 0 22px; }
.onb-left { text-align: left; }
.onb-foot { font-size: 11px; font-weight: 500; color: #9DA1A5; text-align: center; margin-top: 14px; line-height: 1.6; }
.onb-actions { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.btn-block { width: 100%; justify-content: center; }

.onb-banner {
  display: flex; align-items: flex-start; gap: 10px;
  background: #F1F7FF; border: 1px solid #d6e6fd; border-radius: 8px;
  padding: 11px 13px; margin-bottom: 20px;
}
.onb-banner .ico { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; display: block; }
.onb-banner-copy { font-size: 12px; font-weight: 500; color: #2e6ec5; line-height: 1.55; }
.onb-banner-copy strong { font-weight: 700; }

.form-input-locked { background: #f5f7fa; color: #77797B; cursor: not-allowed; padding-right: 32px; }
.input-lock { position: relative; }
.input-lock .lock-ico {
  position: absolute; right: 10px; top: 50%; margin-top: -7px;
  width: 14px; height: 14px; color: #9DA1A5; pointer-events: none;
}
.form-verified { display: flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 11px; font-weight: 500; color: #16a34a; }
.form-verified .ico { width: 12px; height: 12px; display: block; }
.form-error { margin-top: 6px; font-size: 11px; font-weight: 600; color: #dc2626; line-height: 1.5; }
.form-input.is-error { border-color: #fecaca; background: #fffafa; }

/* LinkedIn unfurl preview */
.unfurl {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid #e8ebef; border-left: 3px solid #0a66c2;
  border-radius: 6px; background: #fafbfc; padding: 12px; margin-top: 10px;
}
.unfurl-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: #dbeafe; color: #2563eb;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
}
.unfurl-name { font-size: 13px; font-weight: 700; color: #222; }
.unfurl-headline { font-size: 12px; font-weight: 500; color: #444; margin-top: 2px; }
.unfurl-loc { font-size: 11px; font-weight: 500; color: #9DA1A5; margin-top: 3px; }
.unfurl-edit { font-size: 11px; font-weight: 600; margin-top: 7px; }
.unfurl-empty {
  border: 1px dashed #e1e5e9; border-radius: 6px; background: #fafbfc;
  padding: 14px; margin-top: 10px;
  font-size: 12px; font-weight: 500; color: #77797B; line-height: 1.6;
}

/* Staged lookup progress */
.stage-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.stage {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 500; color: #9DA1A5;
  transition: color 0.2s;
}
.stage.is-active { color: #222; font-weight: 600; }
.stage.is-done { color: #77797B; }
.stage-mark { width: 16px; height: 16px; flex-shrink: 0; position: relative; }
.stage-mark::before {
  content: ''; position: absolute; inset: 2px;
  border-radius: 50%; border: 2px solid #e1e5e9;
}
.stage.is-active .stage-mark::before {
  border-color: #e1e5e9; border-top-color: #3f84e5;
  animation: stage-spin 0.7s linear infinite;
}
.stage.is-done .stage-mark::before { border-color: #16a34a; background: #16a34a; }
.stage.is-done .stage-mark::after {
  content: ''; position: absolute; left: 6px; top: 3px;
  width: 3px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
@keyframes stage-spin { to { transform: rotate(360deg); } }

/* 6-digit code entry */
.code-row { display: flex; gap: 8px; justify-content: center; margin: 4px 0 2px; }
.code-box {
  width: 44px; height: 52px; text-align: center;
  font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: 600; color: #222;
  border: 1px solid #e1e5e9; border-radius: 6px; background: #fff;
}
.code-box:focus { outline: none; border-color: #3f84e5; box-shadow: 0 0 0 2px rgba(63,132,229,0.12); }

/* Success / check mark */
.onb-check {
  width: 52px; height: 52px; border-radius: 50%;
  background: #f0fdf4; color: #16a34a;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
}
.onb-check svg { width: 26px; height: 26px; }

/* Preference radio row (matches the notifications channel treatment) */
.chan-row { display: flex; flex-direction: column; gap: 2px; }
.chan-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border: 1px solid #e1e5e9; border-radius: 6px;
  cursor: pointer; background: #fff; margin-bottom: 8px;
}
.chan-opt:hover { border-color: #cdd4db; }
.chan-opt.is-on { border-color: #3f84e5; background: #F1F7FF; }
.chan-opt.is-disabled { cursor: not-allowed; background: #fafbfc; color: #9DA1A5; }
.chan-opt.is-disabled .ico { opacity: 0.35; filter: grayscale(1); }
.chan-opt input { accent-color: #3f84e5; margin: 0; }
.chan-opt .ico { width: 16px; height: 16px; flex-shrink: 0; display: block; }
.chan-label { font-size: 13px; font-weight: 600; color: #222; }
.chan-opt.is-disabled .chan-label { color: #9DA1A5; }
.chan-desc { font-size: 11px; font-weight: 500; color: #77797B; margin-left: auto; }

/* Toast */
.proto-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 4000;
  background: #222; color: #fff;
  font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600;
  padding: 10px 16px; border-radius: 6px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.22);
  display: flex; align-items: center; gap: 8px;
}
.proto-toast .ico { width: 14px; height: 14px; display: block; }

/* Flow map (feature index) */
.flowmap { max-width: 860px; margin: 0 auto; padding: 40px 1rem 64px; }
.flowmap h1 { font-size: 26px; font-weight: 700; color: #222; letter-spacing: -0.4px; margin: 0 0 6px; }
.flowmap-lede { font-size: 13px; font-weight: 500; color: #77797B; line-height: 1.7; margin: 0 0 30px; max-width: 640px; }
.flowmap-sec { margin-bottom: 34px; }
.flowmap-sec h2 { font-size: 13px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: #9DA1A5; margin: 0 0 4px; }
.flowmap-sec p.flowmap-note { font-size: 12px; font-weight: 500; color: #77797B; margin: 0 0 14px; }
.flowmap-list { list-style: none; counter-reset: fm; margin: 0; padding: 0; }
.flowmap-list li { counter-increment: fm; margin-bottom: 8px; }
.flowmap-link {
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid #e8ebef; border-radius: 8px;
  padding: 12px 14px; text-decoration: none;
  transition: all 0.15s;
}
.flowmap-link:hover { border-color: #3f84e5; transform: translateY(-1px); box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
.flowmap-num {
  width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%;
  background: #F1F5F9; color: #77797B;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.flowmap-link:hover .flowmap-num { background: #3f84e5; color: #fff; }
.flowmap-body { min-width: 0; flex: 1 1 auto; }
.flowmap-title { display: block; font-size: 13px; font-weight: 600; color: #222; }
.flowmap-desc { display: block; font-size: 11px; font-weight: 500; color: #77797B; margin-top: 2px; }
.flowmap-url {
  flex-shrink: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px; color: #2e6ec5; background: #F1F7FF;
  border: 1px solid #d6e6fd; border-radius: 4px; padding: 3px 7px;
  max-width: 44%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Pages toggle per-state blocks with el.hidden; several shared classes are
   display:flex, which beats the UA [hidden] rule. */
[hidden] { display: none !important; }