/* Honey BA brand (Brand Guidelines v3): #E89A26 / #F3B700 / #D47F1C / #000000 / #D9D9D9. Inter. No emojis. */
:root {
  --honey: #E89A26; --honey-light: #F3B700; --honey-dark: #D47F1C; --black: #000; --grey: #D9D9D9;
  --gray-50: #F8FAFC; --gray-100: #F1F5F9; --gray-200: #E2E8F0; --gray-500: #64748B; --gray-600: #475569; --gray-700: #334155;
  --green: #0F7B4F; --green-bg: #E7F6EE; --red: #B42318; --red-bg: #FDECEA; --amber-bg: #FFF6E5;
  /* Semantic tokens: light theme */
  --bg: var(--gray-50); --surface: #fff; --text: #000; --link: var(--honey-dark); --banner-bg: #000;
  --warn-text: #8a4f0c; --warn-bg: #fbefd9; --shadow: rgba(0,0,0,0.08);
  color-scheme: light;
}
/* Dark theme, matched to the Honey ROI app (#1a1918 / #252321 / #33302c / #ece8e1), brand honey accents.
   Follows the device setting unless someone picks Light or Dark (data-theme on <html>). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --gray-50: #1a1918; --gray-100: #2b2927; --gray-200: #33302c; --gray-500: #7d786f; --gray-600: #a8a29a; --gray-700: #d6d1c9;
    --green: #25b07a; --green-bg: rgba(37,176,122,0.14); --red: #d95f5f; --red-bg: rgba(217,95,95,0.14); --amber-bg: rgba(232,154,38,0.12);
    --bg: #1a1918; --surface: #252321; --text: #ece8e1; --link: #E89A26; --banner-bg: #0f0e0d;
    --warn-text: #F3B700; --warn-bg: rgba(232,154,38,0.12); --shadow: rgba(0,0,0,0.45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --gray-50: #1a1918; --gray-100: #2b2927; --gray-200: #33302c; --gray-500: #7d786f; --gray-600: #a8a29a; --gray-700: #d6d1c9;
  --green: #25b07a; --green-bg: rgba(37,176,122,0.14); --red: #d95f5f; --red-bg: rgba(217,95,95,0.14); --amber-bg: rgba(232,154,38,0.12);
  --bg: #1a1918; --surface: #252321; --text: #ece8e1; --link: #E89A26; --banner-bg: #0f0e0d;
  --warn-text: #F3B700; --warn-bg: rgba(232,154,38,0.12); --shadow: rgba(0,0,0,0.45);
  color-scheme: dark;
}
/* Logo: dark-text version on light, light-text version on dark */
.logo-dark { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-light { display: none !important; }
  :root:not([data-theme="light"]) .logo-dark { display: block !important; }
}
:root[data-theme="dark"] .logo-light { display: none !important; }
:root[data-theme="dark"] .logo-dark { display: block !important; }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--text);
  background: var(--bg); -webkit-font-smoothing: antialiased; font-size: 15px; line-height: 1.5; }
a { color: var(--link); }
.banner { background: var(--banner-bg); color: #fff; font-size: 13px; text-align: center; padding: 6px 12px; }
.banner strong { color: var(--honey-light); }
.nav { background: var(--surface); border-bottom: 2px solid var(--honey); display: flex; align-items: center; gap: 4px;
  padding: 0 20px; height: 60px; position: sticky; top: 0; z-index: 10; }
.nav .logo { font-weight: 800; font-size: 18px; margin-right: 20px; display: flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; }
.nav .logo img { height: 46px; width: auto; display: block; }
.nav .logo .word { color: var(--honey); font-weight: 800; font-size: 16px; padding-left: 10px; margin-left: 2px; border-left: 1px solid var(--gray-200); line-height: 24px; }
.login-logo { height: 96px; width: auto; display: block; margin-bottom: 12px; }
.nav a.tab { color: var(--gray-600); text-decoration: none; font-weight: 500; font-size: 14px; padding: 8px 12px; border-radius: 8px; white-space: nowrap; }
.nav a.tab.active { color: var(--text); background: var(--gray-100); }
.nav .count { background: var(--honey); color: var(--black); border-radius: 10px; font-size: 11px; padding: 1px 7px; margin-left: 4px; font-weight: 700; }
.nav .me { margin-left: auto; display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--gray-600); }
.wrap { max-width: 1480px; margin: 0 auto; padding: 24px 28px 60px; }
h1 { font-size: 24px; margin: 0 0 4px; } h2 { font-size: 18px; margin: 28px 0 12px; } h3 { font-size: 15px; margin: 0; }
.sub { color: var(--gray-600); margin: 0 0 20px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 16px 0 8px; }
.stat { background: var(--surface); border: 1px solid var(--gray-200); border-radius: 12px; padding: 14px 16px; }
.stat .label { font-size: 12px; color: var(--gray-600); } .stat .value { font-size: 24px; font-weight: 700; }
.card { background: var(--surface); border: 1px solid var(--gray-200); border-radius: 12px; padding: 16px 18px; margin-bottom: 12px; }
.card .head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.card .meta { font-size: 13px; color: var(--gray-600); }
.pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--gray-100); color: var(--gray-700); }
.pill.green { background: var(--green-bg); color: var(--green); } .pill.red { background: var(--red-bg); color: var(--red); }
.pill.honey { background: var(--amber-bg); color: var(--honey-dark); }
.why { font-size: 13px; color: var(--gray-600); margin: 0 0 8px; }
.email { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 10px; padding: 12px 14px; font-size: 14px; margin: 8px 0; }
textarea, input[type=text], input[type=time], input[type=number], input[type=email], input[type=search], select { font: inherit; width: 100%; border: 1px solid var(--gray-200); border-radius: 10px; padding: 10px 12px; background: var(--surface); color: var(--text); }
textarea { min-height: 260px; resize: vertical; }
textarea:focus, input:focus, select:focus { outline: none; border-color: var(--honey); box-shadow: 0 0 0 3px rgba(232,154,38,0.15); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
button, .btn { font: inherit; font-weight: 600; font-size: 14px; border-radius: 10px; padding: 9px 16px; cursor: pointer;
  border: 1px solid var(--gray-200); background: var(--surface); color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
button.primary, .btn.primary { background: var(--honey); border-color: var(--honey); color: var(--black); }
button.primary:hover { background: var(--honey-light); border-color: var(--honey-light); }
button.link { border: none; background: none; color: var(--gray-600); padding: 0; font-weight: 500; }
details summary { cursor: pointer; color: var(--link); font-weight: 600; font-size: 14px; }
.notes { background: var(--red-bg); color: var(--red); border-radius: 8px; padding: 8px 12px; font-size: 13px; margin: 8px 0; }
.msg { border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; font-size: 14px; }
.msg.success { background: var(--green-bg); color: var(--green); } .msg.error { background: var(--red-bg); color: var(--red); }
.msg.info { background: var(--gray-100); color: var(--gray-700); }
.msg.warning { background: var(--red-bg); color: var(--red); }
table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--gray-200); border-radius: 12px; overflow: hidden; font-size: 14px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--gray-200); vertical-align: top; }
th { font-size: 12px; color: var(--gray-600); background: var(--gray-50); font-weight: 600; }
.table-wrap { overflow-x: auto; }
.empty { text-align: center; color: var(--gray-600); padding: 28px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.row { display: flex; gap: 8px; align-items: end; flex-wrap: wrap; } .row > * { flex: 1; min-width: 120px; }
.login { max-width: 420px; margin: 80px auto; }
.icon { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) {
  .nav { overflow-x: auto; padding: 0 12px; } .nav .logo { margin-right: 8px; } .nav .me .name { display: none; }
  .grid2 { grid-template-columns: 1fr; } .wrap { padding: 16px 14px 48px; }
}
.card.head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Keyboard focus (#12) */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--honey-dark); outline-offset: 2px; }
.checked { display: flex; align-items: center; gap: 6px; color: var(--green); }
details.write { margin-top: 12px; } details.write textarea { min-height: 150px; margin-top: 6px; }
label.meta { display: block; }
.card.rule { display: flex; align-items: center; gap: 12px; } .card.rule .rule-text { flex: 1; }
/* Phone menu (#5): desktop shows every tab; phones show Today/Replies/Demos + More */
.nav details.more { display: none; position: relative; }
.nav details.more summary { list-style: none; cursor: pointer; }
.nav details.more summary::-webkit-details-marker { display: none; }
.more-menu { position: absolute; right: 0; top: 44px; background: var(--surface); border: 1px solid var(--gray-200); border-radius: 12px;
  box-shadow: 0 8px 24px var(--shadow); padding: 6px; min-width: 190px; display: flex; flex-direction: column; z-index: 20; }
.more-menu a, .more-menu button { padding: 10px 12px; border-radius: 8px; color: var(--text); text-decoration: none; font-weight: 500; text-align: left; }
.more-menu a:hover { background: var(--gray-100); }
@media (max-width: 760px) {
  .nav { overflow: visible; } .nav .tab.secondary, .nav .me { display: none; } .nav details.more { display: block; margin-left: auto; }
  .nav a.tab, .nav summary.tab { padding: 8px 8px; font-size: 13.5px; }
  .nav { gap: 2px; padding: 0 10px; } .nav .logo { margin-right: 4px; } .nav .logo .word { display: none; } .nav .logo img { height: 28px; }
  /* Contacts as cards on phones (#13) */
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack thead { display: none; }
  table.stack tr { border-bottom: 1px solid var(--gray-200); padding: 10px 4px; }
  table.stack td { border: none; padding: 3px 10px; }
  table.stack td::before { content: attr(data-label); display: block; font-size: 11px; color: var(--gray-500); text-transform: uppercase; letter-spacing: .03em; }
  table.stack td:first-child::before { display: none; }
}

.banner.paused { background: var(--red); } .banner.paused a { color: #fff; }
label.check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; margin: 8px 12px 8px 0; }
label.check input { width: auto; }
.danger-btn { border-color: var(--red); color: var(--red); } button.link.danger { color: var(--red); }
.insights { background: var(--amber-bg); border-radius: 10px; padding: 12px 14px; margin: 10px 0; }
.insights ul { margin: 4px 0 8px; padding-left: 20px; } .insights li { margin: 2px 0; }
form.angle { display: flex; gap: 10px; align-items: baseline; margin: 4px 0; } form.angle span { flex: 1; }
input[type=file] { margin-top: 6px; }

.skip-group { display: inline-flex; gap: 6px; align-items: center; }
.skip-group select { width: auto; padding: 8px 10px; font-size: 13px; }
.learned { border-top: 1px solid var(--gray-200); padding: 10px 0; } .learned:first-of-type { border-top: none; }

.row-actions form { margin: 2px 0; } .personal-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.personal-form select { width: auto; padding: 4px 8px; font-size: 13px; }
/* Claude spend at or above 80% of the monthly cap */
p.warn { color: var(--warn-text); background: var(--warn-bg); border-left: 3px solid #D47F1C; padding: 6px 10px; border-radius: 6px; font-size: 14px; }

/* Theme switch (Auto / Light / Dark), remembered per browser */
button.theme-toggle { border: 1px solid var(--gray-200); background: transparent; color: var(--gray-600); padding: 5px 10px; font-size: 12.5px; font-weight: 500; }
button.theme-toggle:hover { color: var(--text); border-color: var(--gray-500); }
.banner.test { background: #8a4f0c; } .banner.test strong { color: #fff; }

/* Help: (?) tips, the shared tooltip and page help links (2026-10-24) */
.tip { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; min-height: 0;
  padding: 0; margin: 0 0 0 6px; border-radius: 50%; border: 1px solid var(--gray-500); background: transparent;
  color: var(--gray-600); font: 600 11px/1 'Inter', sans-serif; cursor: help; vertical-align: middle; flex: none; }
.tip:hover, .tip:focus-visible { border-color: var(--honey); color: var(--honey-dark); outline: none; box-shadow: 0 0 0 3px var(--amber-bg); }
.tipbox { position: absolute; z-index: 1000; max-width: min(300px, calc(100vw - 16px)); padding: 9px 12px; border-radius: 8px;
  background: var(--text); color: var(--surface); font-size: 13px; line-height: 1.45; font-weight: 500;
  box-shadow: 0 6px 20px var(--shadow); pointer-events: none; white-space: normal; }
.tipbox[hidden] { display: none; }
.helplink { font-size: 13px; font-weight: 500; white-space: nowrap; }
.sub .helplink { margin-left: 6px; }
.help-toc { columns: 2; column-gap: 32px; padding-left: 18px; }
@media (max-width: 640px) { .help-toc { columns: 1; } }
.help h2 { scroll-margin-top: 80px; }
.help h3 { margin: 18px 0 6px; }
.help dl { margin: 0; }
.help dt { font-weight: 600; margin-top: 10px; }
.help dd { margin: 2px 0 0; color: var(--gray-700); }
.help .card p:last-child { margin-bottom: 0; }
/* Mid widths (tablets, narrow windows): the full nav no longer fits with Help, so the secondary tabs fold into More */
@media (max-width: 1080px) {
  .nav .tab.secondary, .nav .me { display: none; } .nav details.more { display: block; margin-left: auto; }
}

/* Blocked countries: each country and its Unblock link on one line */
form.inline { display: inline-flex; align-items: center; gap: 4px; margin: 0 8px 6px 0; }

/* Contacts (live Salesforce data, 10,000+ rows): figures, reason chips, filters, a fixed-width table and paging. */
.stat .label, .stat .value { display: block; }
a.link-stat { text-decoration: none; color: var(--text); transition: border-color .15s; }
a.link-stat:hover, a.link-stat.on { border-color: var(--honey); }
.green-text { color: var(--green); } .amber-text { color: var(--honey-dark); }
.chips { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 12px 0 16px; }
.chips .meta { margin-right: 4px; font-size: 13px; color: var(--gray-600); }
.chip { font-size: 13px; text-decoration: none; color: var(--text); background: var(--surface); border: 1px solid var(--gray-200);
  border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
.chip b { color: var(--gray-600); font-weight: 600; margin-left: 4px; }
.chip:hover, .chip.on { border-color: var(--honey); } .chip.on b { color: var(--honey-dark); }
.filters { display: grid; grid-template-columns: minmax(240px, 2.2fr) repeat(3, minmax(150px, 1fr)) auto; gap: 12px; align-items: end; }
.filters label { font-size: 13px; color: var(--gray-600); display: block; }
.filters label > input, .filters label > select { margin-top: 4px; }
.filter-actions { display: flex; gap: 8px; }
.result-line { margin: 4px 2px 10px; font-size: 13px; color: var(--gray-600); }
.contacts-table { table-layout: fixed; }
.contacts-table col.c-contact { width: 24%; } .contacts-table col.c-company { width: 20%; }
.contacts-table col.c-status { width: 26%; } .contacts-table col.c-signal { width: 18%; } .contacts-table col.c-actions { width: 12%; }
.contacts-table td { overflow-wrap: anywhere; }
.contacts-table .meta { font-size: 13px; color: var(--gray-600); margin-top: 2px; }
.contacts-table .faint { color: var(--gray-500); }
.reasons { margin: 6px 0 0; padding-left: 16px; font-size: 13px; color: var(--gray-600); line-height: 1.45; }
.reasons li { margin: 1px 0; }
.sf-fields { margin-top: 6px; font-size: 13px; } .sf-fields summary { cursor: pointer; color: var(--link); }
.kv { display: grid; grid-template-columns: minmax(110px, 40%) 1fr; gap: 2px 10px; margin: 6px 0 0; font-size: 12px; }
.kv dt { color: var(--gray-500); } .kv dd { margin: 0; overflow-wrap: anywhere; }
.kv .kv-head { grid-column: 1 / -1; font-weight: 700; color: var(--text); margin-top: 6px; }
.pager { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 18px 0 0; flex-wrap: wrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 1100px) { .filters { grid-template-columns: 1fr 1fr; } .filters .grow { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .filters { grid-template-columns: 1fr; } .contacts-table { table-layout: auto; }
}
.book { max-width: 520px; margin: 24px auto; text-align: center; }
.book .login-logo { margin-left: auto; margin-right: auto; }
.book-frame { width: 100%; height: 1100px; border: 0; background: #fff; margin: 4px 0 12px; }