:root {
  /* Surfaces */
  --bg: #f7f7f8;
  --surface: #ffffff;
  --surface-alt: #fafafa;

  /* Borders — whisper-thin, Twenty style */
  --border: #ececee;
  --border-strong: #dcdce0;

  /* Text */
  --text: #18181b;
  --text-muted: #52525b;
  --text-subtle: #a1a1aa;

  /* Accent — monochrome */
  --accent: #18181b;
  --accent-hover: #000000;
  --accent-soft: rgba(0, 0, 0, 0.06);
  --accent-ring: rgba(0, 0, 0, 0.10);

  /* Topbar — slightly lighter dark grey */
  --topbar-bg: #3a3a3e;
  --topbar-bg-hover: #4d4d52;
  --topbar-text: #e4e4e7;
  --topbar-text-hover: #ffffff;
  --topbar-border: #27272a;

  /* Hover/row states */
  --hover: #f4f4f6;
  --row-hover: #f7f7f9;

  /* Layered, subtle shadows */
  --shadow-xs: 0 1px 1px rgba(16, 24, 40, 0.03);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.06), 0 2px 4px -2px rgba(16, 24, 40, 0.04);
  --shadow-lg: 0 12px 24px -6px rgba(16, 24, 40, 0.08), 0 4px 8px -2px rgba(16, 24, 40, 0.04);

  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 10px;
}

* { box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* TOP BAR — dark grey, flat, no heavy shadow */
.topnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 32px;
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--topbar-border);
  margin-bottom: 32px;
  width: 100%;
}

.nav-hamburger {
  display: none;
}

.topnav .links a {
  color: var(--topbar-text);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 12px;
  margin-right: 2px;
  border-radius: var(--radius-sm);
  transition: color 0.12s ease, background 0.12s ease;
}

.topnav .links a:hover {
  color: var(--topbar-text-hover);
  background: var(--topbar-bg-hover);
}

.topnav a.active {
  color: var(--topbar-text-hover);
  background: var(--topbar-bg-hover);
  border-radius: 4px;
}

tr.deleting {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.brand {
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  color: var(--topbar-text-hover);
}

/* MAIN CONTENT WRAPPER -- widened from the original 1100px so the
   scraper/places/profiles tables all have room to show full addresses
   and other long field values without cramming or truncating. */
main {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px 40px;
}

/* TYPOGRAPHY */
h1 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 0 24px;
  padding-bottom: 0;
  border-bottom: none;
}

/* Title + actions row */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}

.page-header h1 {
  margin: 0;
}

h2 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 12px;
}

/* TABLES — Twenty look: barely-visible borders, soft surface */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

th {
  text-align: left;
  padding: 10px 16px;
  background: #ebebef;
  border-bottom: 1px solid var(--border-strong);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  transition: background 0.12s ease, color 0.12s ease;
}

th:hover {
  background: #e0e0e5;
  color: var(--text);
}

td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
  overflow-wrap: anywhere;
  word-break: break-word;
}

tr:last-child td {
  border-bottom: none;
}

/* Dashboard table: table-layout:fixed + explicit column widths, not the
   browser's default content-driven auto layout -- otherwise a long,
   nowrap Data value just stretches its <td> (and the whole table, off
   the page) rather than clipping, since overflow only ever takes effect
   on a box with a constrained width. */
.scrapes-table {
  table-layout: fixed;
}

/* Places Dashboard table (Company/Industry/Address/Phone/Email/
   Discovered/Actions) -- a separate ruleset from .scrapes-table since it
   has a different column count (7, no row-select/delete column at all:
   the Places Dashboard has no bulk-delete mode) and different
   proportions. Company/Industry/Address/Phone/Email wrap onto multiple
   lines rather than truncating with an ellipsis -- the point of widening
   this table (and `main` above) was to show a full address/email
   comfortably, and a fixed column width alone can't guarantee that for
   arbitrarily long values the way wrapping can. */
.places-table {
  table-layout: fixed;
}

.places-table th:nth-child(1), .places-table td:nth-child(1) { width: 13%; }
.places-table th:nth-child(2), .places-table td:nth-child(2) { width: 8%; }
.places-table th:nth-child(3), .places-table td:nth-child(3) { width: 28%; }
.places-table th:nth-child(4), .places-table td:nth-child(4) { width: 10%; }
.places-table th:nth-child(5), .places-table td:nth-child(5) { width: 13%; }
.places-table th:nth-child(6), .places-table td:nth-child(6) { width: 13%; white-space: nowrap; }
.places-table th:nth-child(7), .places-table td:nth-child(7) { width: 15%; text-align: center; }

.places-table td:nth-child(1),
.places-table td:nth-child(2),
.places-table td:nth-child(3),
.places-table td:nth-child(4),
.places-table td:nth-child(5) {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Two buttons (Send/Delete) side by side in the Actions cell, on one
   line, never stacked -- small enough (see below) to actually fit the
   column at its real rendered width. overflow:hidden is a last-resort
   safety net (clip rather than bleed into Discovered) for extremely
   narrow viewports; it should not normally engage. */
.places-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  justify-content: center;
  overflow: hidden;
}

.places-actions .btn-secondary,
.places-actions .btn-danger {
  padding: 3px 7px;
  font-size: 11px;
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Cap-exceeded notification (places.lisp's monthly lead cap, see
   CLAUDE.md's "loud, not silent" requirement) -- same red as .form-error,
   but block-level and padded since this is a standalone banner, not an
   inline field message. */
.cap-notice {
  background: #fef2f2;
  border: 1px solid #dc2626;
  color: #991b1b;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 16px;
}

/* Default (not select mode): the checkbox column is display:none --
   entirely out of the table's layout, no reserved gutter -- so these five
   percentages are the only columns and sum to 100%. */
.scrapes-table th:nth-child(2), .scrapes-table td:nth-child(2) { width: 19%; }
.scrapes-table th:nth-child(3), .scrapes-table td:nth-child(3) { width: 12%; }
.scrapes-table th:nth-child(4), .scrapes-table td:nth-child(4) { width: 17%; }
.scrapes-table th:nth-child(5), .scrapes-table td:nth-child(5) { width: 42%; }
.scrapes-table th:nth-child(6), .scrapes-table td:nth-child(6) { width: 10%; text-align: center; white-space: nowrap; }

/* Row-delete select mode: clicking "Delete Rows" reveals the checkbox
   column and the table reflows to give it 4%, taking that back from the
   other five columns (a separate, more-specific ruleset below rather than
   just reserving the 4% all the time) -- see enterDeleteMode() /
   exitDeleteMode() in app.js. Scoped to #dashboard-main (an ancestor that
   survives htmx row swaps) rather than the table itself, so newly
   rendered rows pick up the current mode with no extra JS. */
.row-select-col {
  display: none;
}

#dashboard-main.select-mode .row-select-col {
  display: table-cell;
}

#dashboard-main.select-mode .scrapes-table th:nth-child(1),
#dashboard-main.select-mode .scrapes-table td:nth-child(1) { width: 4%; text-align: center; }
#dashboard-main.select-mode .scrapes-table th:nth-child(2),
#dashboard-main.select-mode .scrapes-table td:nth-child(2) { width: 18%; }
#dashboard-main.select-mode .scrapes-table th:nth-child(3),
#dashboard-main.select-mode .scrapes-table td:nth-child(3) { width: 12%; }
#dashboard-main.select-mode .scrapes-table th:nth-child(4),
#dashboard-main.select-mode .scrapes-table td:nth-child(4) { width: 16%; }
#dashboard-main.select-mode .scrapes-table th:nth-child(5),
#dashboard-main.select-mode .scrapes-table td:nth-child(5) { width: 40%; }
#dashboard-main.select-mode .scrapes-table th:nth-child(6),
#dashboard-main.select-mode .scrapes-table td:nth-child(6) { width: 10%; }

.select-mode-only {
  display: none;
}

#dashboard-main.select-mode .select-mode-only {
  display: inline-block;
}

#dashboard-main.select-mode .select-mode-hide {
  display: none;
}

.scrapes-table td:nth-child(2),
.scrapes-table td:nth-child(3),
.scrapes-table td:nth-child(4) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Data column: the full JSON blob can be long, but only this cell should
   scroll -- not the row (taller) or the table (wider). Every row is a
   fixed two-line-tall box (line-height * 2); content never wraps, so a
   row that overflows scrolls sideways within its own cell (now that the
   parent <td> has a real width, from table-layout:fixed above, for
   overflow-x to actually clip against) instead of growing taller,
   vertically scrolling, or pushing the table wider. */
.data-cell {
  width: 100%;
  height: 2.6em;
  line-height: 1.3;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

tbody tr {
  transition: background 0.1s ease;
}

tbody tr:hover {
  background: var(--row-hover);
}

tbody {
  transition: opacity 0.15s ease;
}

tbody.htmx-request {
  opacity: 0;
  transition: opacity 0.08s ease;
}

/* BUTTONS — primary now blue, ghost secondary */
.btn {
  background: var(--accent);
  color: #ffffff;
  border: 1px solid var(--accent);
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  display: inline-block;
  text-decoration: none;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.05s ease, box-shadow 0.12s ease;
  font-family: inherit;
  box-shadow: var(--shadow-xs);
}

.btn:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn:active {
  transform: translateY(1px);
}

.btn-danger {
  background: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.12s ease;
  font-family: inherit;
}

.btn-danger:hover {
  color: #ffffff;
  background: var(--accent);
  border-color: var(--accent);
}

.btn-email {
  text-decoration: none;
  margin-right: 4px;
  display: inline-block;
}

/* Mobile-only — see the @media (max-width: 600px) override below */
.btn-call {
  text-decoration: none;
  margin-right: 4px;
  display: none;
}

.btn-notes {
  margin-right: 4px;
}

/* FORMS */
.form {
  margin-top: 32px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-sm);
}

.form h2 {
  width: 100%;
  margin-bottom: 12px;
}

.form > form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  align-items: center;
}

.form-footer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}

/* Settings page (/settings.html): every field on its own row, labeled
   above its input, instead of the .form default's wrapped-inline-fields
   layout (fine for a couple of quick controls, cramped once labels are
   needed for six distinct settings). */
.settings-form > form {
  flex-direction: column;
  align-items: stretch;
}

.settings-form .form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-width: 420px;
}

.settings-form .form-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}

.settings-form input,
.settings-form select {
  width: 100%;
}

.form .form-footer input,
.form .form-footer select {
  flex: 0 0 auto;
}

.form-row-centered {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.form .form-row-centered input,
.form .form-row-centered select {
  flex: 0 0 auto;
}

.form textarea {
  flex: 0 0 100%;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  resize: vertical;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.form textarea::placeholder {
  color: var(--text-subtle);
}

.form input, .form select {
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  flex: 1 1 160px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.form input:focus, .form select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.form input::placeholder {
  color: var(--text-subtle);
}

/* CONTROLS BAR */
.controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  gap: 12px;
}

.controls input[type="file"] {
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: inherit;
  color: var(--text-muted);
}

.controls form {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* IO actions block — right-justified, Export + Import inline */
.io-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.io-actions .import-form {
  display: inline-flex;
  align-items: center;
}

/* CSV dropdown menu */
.csv-menu {
  position: relative;
  display: inline-flex;
}

.csv-dropdown {
  display: none;
  flex-direction: column;
  gap: 8px;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  white-space: nowrap;
  z-index: 100;
  box-shadow: var(--shadow-sm);
  min-width: 160px;
}

.csv-dropdown.open {
  display: flex;
}

.csv-dropdown .import-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* NAV "MORE" DROPDOWN (Flowstate, Profile) — .nav-more-btn intentionally has
   no styling overrides here; it inherits .topnav .links a as-is so it reads
   as just another nav link, not a distinct control. */
.nav-more {
  position: relative;
  display: inline-block;
}

.nav-more-dropdown {
  display: none;
  flex-direction: column;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  min-width: 140px;
  z-index: 100;
  overflow: hidden;
}

.nav-more-dropdown.open {
  display: flex;
}

.nav-more-dropdown a {
  padding: 8px 14px;
  white-space: nowrap;
  color: var(--text) !important;
  font-size: 13px;
}

.nav-more-dropdown a:hover {
  background: var(--hover);
}

/* PAGER */
.pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--text-muted);
}

.pager a {
  color: var(--text-muted);
  text-decoration: none;
  padding: 5px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-weight: 500;
  background: var(--surface);
  transition: all 0.12s ease;
}

.pager a:hover {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}

.pager-info {
  font-weight: 500;
  min-width: 100px;
  text-align: center;
  color: var(--text-muted);
}

.pager-placeholder {
  display: inline-block;
  width: 72px;
}

/* LOGIN */
.login-card {
  max-width: 380px;
  margin: 80px auto;
  padding: 36px 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.login-card h2 {
  font-size: 18px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0 0 24px;
  text-align: center;
}

.login-card input {
  display: block;
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  color: var(--text);
  background: var(--surface);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.login-card input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* PROFILE PAGE — centered narrow column */
.profile-page {
  max-width: 420px;
  margin: 0 auto;
  text-align: center;
}

.profile-page .profile-info {
  margin-bottom: 24px;
}

.profile-page .profile-info h2 {
  text-align: center;
  margin-top: 20px;
}

.profile-page .profile-info p {
  text-align: center;
  margin: 0 0 8px;
}

.profile-page .profile-info ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.profile-page .profile-info li {
  margin-bottom: 4px;
}

.profile-page .actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.profile-page .actions form {
  margin: 0;
}

.profile-page .actions .btn {
  width: 100%;
}

.profile-page .actions p {
  font-size: 12px;
  margin-top: 4px;
  color: var(--text-muted);
  text-align: center;
}

/* DASHBOARD STAT CARDS */
.stats-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

/* Prowler's Dashboard has exactly 3 stat cards (today / this week / this
   month), not 5 -- repeat(5, 1fr) would stretch them full-width and
   left-packed. minmax caps each card's width so the row's total width is
   less than main's, and justify-content centers that narrower row instead
   of stretching it; text-align centers the label/value inside each card. */
.stats-row-3 {
  grid-template-columns: repeat(3, minmax(140px, 200px));
  justify-content: center;
}

.stats-row-3 .stat-label,
.stats-row-3 .stat-value {
  text-align: center;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  box-shadow: var(--shadow-sm);
}

/* AI page: each question/answer exchange gets its own card, stacked as
   the conversation grows (new ones appended via hx-swap="beforeend"). */
.ai-exchange {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-top: 12px;
  box-shadow: var(--shadow-sm);
}

.ai-exchange .ai-question {
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 8px;
}

.ai-exchange .ai-response {
  color: var(--text);
  white-space: pre-wrap;
  margin: 0;
}

.stat-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-bottom: 4px;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

@media (max-width: 900px) {
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* DASHBOARD: cap visible rows to 5 */
.dashboard-row tbody tr:nth-child(n+6),
.dashboard-section tbody tr:nth-child(n+6) {
  display: none;
}

/* DASHBOARD LAYOUT */
.dashboard-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
  width: 100%;
}

.dashboard-half {
  min-width: 0;
}

.dashboard-half h2,
.dashboard-section h2 {
  margin-bottom: 12px;
}

.dashboard-section {
  width: 100%;
  margin-bottom: 32px;
}

/* Recent Leads dashboard table: tight phone column, wider email, hide City */
.dashboard-row-top .dashboard-half:first-child th:nth-child(4),
.dashboard-row-top .dashboard-half:first-child td:nth-child(4) {
  width: 130px;
  min-width: 130px;
  white-space: nowrap;
}

.dashboard-row-top .dashboard-half:first-child th:nth-child(5),
.dashboard-row-top .dashboard-half:first-child td:nth-child(5) {
  min-width: 200px;
}

.dashboard-row-top .dashboard-half:first-child th:nth-child(6),
.dashboard-row-top .dashboard-half:first-child td:nth-child(6),
.dashboard-row-top .dashboard-half:first-child th:nth-child(7),
.dashboard-row-top .dashboard-half:first-child td:nth-child(7) {
  display: none;
}

/* Recent Deals dashboard table: hide Contact + Phone columns */
.dashboard-row-top .dashboard-half:last-child th:nth-child(6),
.dashboard-row-top .dashboard-half:last-child td:nth-child(6),
.dashboard-row-top .dashboard-half:last-child th:nth-child(7),
.dashboard-row-top .dashboard-half:last-child td:nth-child(7) {
  display: none;
}

/* Explicit widths for the remaining visible columns (Title/Value/Stage/Company).
   Without these, an empty table (no rows to size against) can leave the header
   row narrower than the container instead of stretching to fill it. */
.dashboard-row-top .dashboard-half:last-child th:nth-child(2),
.dashboard-row-top .dashboard-half:last-child td:nth-child(2) {
  width: 40%;
}

.dashboard-row-top .dashboard-half:last-child th:nth-child(3),
.dashboard-row-top .dashboard-half:last-child td:nth-child(3) {
  width: 18%;
}

.dashboard-row-top .dashboard-half:last-child th:nth-child(4),
.dashboard-row-top .dashboard-half:last-child td:nth-child(4) {
  width: 20%;
}

.dashboard-row-top .dashboard-half:last-child th:nth-child(5),
.dashboard-row-top .dashboard-half:last-child td:nth-child(5) {
  width: 22%;
}

/* Notes page table column widths. Body (nth-child(2)) intentionally has no
   explicit width — it's the only unconstrained column, so auto table layout
   already gives it the space left over after Type/Phone/Email below. A
   previous "width: 100%" here fought with those columns' own widths, and
   once td got overflow-wrap: anywhere (which lets auto-layout shrink a
   column's minimum content width to near zero), that conflict collapsed
   Body down to almost nothing, wrapping ordinary note text into many lines. */
.notes-table th:nth-child(1),
.notes-table td:nth-child(1) {
  white-space: nowrap;
}

.notes-table th:nth-child(3),
.notes-table td:nth-child(3) {
  width: 90px;
  white-space: nowrap;
}

.notes-table th:nth-child(4),
.notes-table td:nth-child(4) {
  min-width: 180px;
  white-space: nowrap;
}

.notes-table th:nth-child(5),
.notes-table td:nth-child(5) {
  min-width: 300px;
}

.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  background: var(--surface);
}

.table-wrap table {
  border: none;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
}

.dashboard-half table,
.dashboard-section table {
  font-size: 12px;
}

/* Hide ID (first column) and delete button (last column) on all dashboard tables.
   :not([colspan]) excludes the single-cell "no X yet" empty-state row — that
   lone <td colspan="N"> is simultaneously first-child AND last-child of its
   row, so without this exclusion it gets hidden entirely instead of just ID/delete. */
.dashboard-row table td:first-child:not([colspan]),
.dashboard-row table th:first-child,
.dashboard-row table td:last-child:not([colspan]),
.dashboard-row table th:last-child,
.dashboard-section table td:first-child:not([colspan]),
.dashboard-section table th:first-child,
.dashboard-section table td:last-child:not([colspan]),
.dashboard-section table th:last-child {
  display: none;
}

/* Safety net: wherever columns are conditionally hidden (here, and in the
   mobile column-hiding below), the empty-state placeholder's colspan can no
   longer be trusted to match the table's actual visible column count. Taking
   it out of table layout entirely avoids any resulting blank space. */
table td[colspan] {
  display: block;
}

/* Hide Phone and Email columns on the dashboard's Notes widget. Scoped via
   .notes-table plus a .dashboard-half/.dashboard-section ancestor check so
   the main Notes list page's real Phone/Email columns are untouched. */
.dashboard-half .notes-table tr td:nth-child(4),
.dashboard-half .notes-table tr td:nth-child(5),
.dashboard-half .notes-table tr th:nth-child(4),
.dashboard-half .notes-table tr th:nth-child(5),
.dashboard-section .notes-table tr td:nth-child(4),
.dashboard-section .notes-table tr td:nth-child(5),
.dashboard-section .notes-table tr th:nth-child(4),
.dashboard-section .notes-table tr th:nth-child(5) {
  display: none;
}

/* Explicit widths for the remaining visible Upcoming Dates columns, same
   reasoning as the Recent Deals rule above — an empty table has no row
   content to size the header against. */
.dashboard-row-bottom .dashboard-half:last-child th:nth-child(2),
.dashboard-row-bottom .dashboard-half:last-child td:nth-child(2) {
  width: 36%;
}

.dashboard-row-bottom .dashboard-half:last-child th:nth-child(3),
.dashboard-row-bottom .dashboard-half:last-child td:nth-child(3) {
  width: 22%;
}

.dashboard-row-bottom .dashboard-half:last-child th:nth-child(4),
.dashboard-row-bottom .dashboard-half:last-child td:nth-child(4) {
  width: 22%;
}

.dashboard-row-bottom .dashboard-half:last-child th:nth-child(5),
.dashboard-row-bottom .dashboard-half:last-child td:nth-child(5) {
  width: 20%;
}

/* Explicit widths for the To Be Contacted columns, same reasoning as the
   Recent Leads/Deals rules above — an empty table has no row content to
   size the header against. */
.dashboard-row-bottom .dashboard-half:first-child th:nth-child(2),
.dashboard-row-bottom .dashboard-half:first-child td:nth-child(2) {
  width: 25%;
}

.dashboard-row-bottom .dashboard-half:first-child th:nth-child(3),
.dashboard-row-bottom .dashboard-half:first-child td:nth-child(3) {
  width: 25%;
}

.dashboard-row-bottom .dashboard-half:first-child th:nth-child(4),
.dashboard-row-bottom .dashboard-half:first-child td:nth-child(4) {
  width: 25%;
}

.dashboard-row-bottom .dashboard-half:first-child th:nth-child(5),
.dashboard-row-bottom .dashboard-half:first-child td:nth-child(5) {
  width: 25%;
}

/* To Be Contacted row tints — server picks the class based on how the
   next-contact date compares to today. Set on <tr> (not <td>) since td has
   no background-color of its own, matching how tbody tr:hover already works. */
tr.row-overdue {
  background: #fee2e2;
}

tr.row-due-today {
  background: #ffedd5;
}

tr.row-due-tomorrow {
  background: #fef9c3;
}

@media (max-width: 900px) {
  .dashboard-row {
    grid-template-columns: 1fr;
  }
}

/* CALENDAR ==================================== */
/* Desktop gets the real month grid with spanning event bars; mobile gets a
   plain date input + a simple day list instead of trying to shrink a 7-column
   grid onto a narrow screen — see .cal-mobile-only below. */

.cal-mobile-only {
  display: none;
}

.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.cal-month-label {
  font-weight: 600;
  font-size: 16px;
}

.cal-weekday-labels {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}

.cal-weekday {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cal-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}

.cal-day {
  grid-row: 1;
  font-size: 13px;
  color: var(--text-muted);
  padding: 12px 8px;
  min-height: 44px;
  border-top: 1px solid var(--border);
}

.cal-day-out {
  opacity: 0.35;
}

.cal-day-num {
  font-weight: 500;
}

.cal-event-bar {
  font-size: 11px;
  color: #ffffff;
  padding: 1px 6px;
  border-radius: 3px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  margin-top: 1px;
}

.cal-contact-chip {
  font-size: 11px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid #2563eb;
  border-radius: 3px;
  padding: 1px 6px;
  margin-top: 4px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.event-color-0 { background: #2563eb; }
.event-color-1 { background: #16a34a; }
.event-color-2 { background: #d97706; }
.event-color-3 { background: #dc2626; }
.event-color-4 { background: #7c3aed; }
.event-color-5 { background: #0891b2; }

@media (max-width: 600px) {
  .cal-desktop-only {
    display: none;
  }
  .cal-mobile-only {
    display: block;
  }
}

/* MISC */
.error {
  color: var(--text);
  font-size: 13px;
  text-align: center;
  margin-top: 12px;
  font-weight: 500;
}

ul {
  padding-left: 20px;
  color: var(--text);
}

ul li {
  margin-bottom: 6px;
  font-weight: 500;
}

p {
  color: var(--text-muted);
  margin: 0 0 12px;
}

/* SELECTION */
::selection {
  background: var(--accent-soft);
  color: var(--text);
}

/* SEARCH BAR */
.search {
  padding: 7px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  background: var(--surface);
  flex: 1 1 auto;
  max-width: 280px;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

/* INVALID FORM INPUT — only flag after user has typed something */
.form input:required:invalid:not(:placeholder-shown) {
  border-color: #8b1f1f;
}

/* STICKY TABLE HEADERS */
thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* MAIN PAGE TABLE OVERFLOW (excludes dashboard tables) — only on narrow viewports,
   since display:block on a <table> breaks its width-fill behavior on wider screens. */
@media (max-width: 900px) {
  main > table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
  }
}

/* TOPNAV — hamburger (left) + centered brand, both on one row. Tapping the
   hamburger reveals .links as a dropdown panel instead of the desktop's
   inline row of links. Shares the 900px breakpoint above (not the 600px
   one below) so there's no gap where the table is already in narrow-screen
   mode but the nav still shows the full, un-hamburgered desktop link row. */
@media (max-width: 900px) {
  .topnav {
    flex-direction: row;
    align-items: center;
    padding: 12px 16px;
    position: relative;
  }

  .nav-hamburger {
    display: inline-block;
    order: -1;
    background: none;
    border: none;
    color: var(--topbar-text);
    font-size: 22px;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
  }

  .brand {
    font-size: 14px;
    flex: 1;
    text-align: center;
  }

  .topnav .links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--topbar-bg);
    padding: 8px 16px 16px;
    z-index: 100;
    overflow-x: visible;
    white-space: normal;
  }

  .topnav .links.open {
    display: flex;
  }
}

/* PRINT */
/* Password change modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}

.modal-box {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 24px;
  width: 100%;
  max-width: 360px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.modal-box h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  text-align: left;
}

.modal-box input[type="password"] {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.modal-box input[type="password"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-ring);
}

/* Wider variant for modals showing more than a couple of stacked inputs —
   the contact notes modal needs room for the info block + textarea. */
.modal-box-wide {
  max-width: 480px;
}

.contact-detail p {
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--text);
}

.modal-box textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
  resize: vertical;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.modal-box textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-ring);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.btn-secondary {
  background: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  transition: background 0.12s ease;
}

/* Dashboard "Send to CRM" button, greyed out once a scrape row's sent_at
   is set (durable across reloads -- see routes.lisp render-scrape-row). */
.btn-sent {
  background: var(--surface);
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  opacity: 0.55;
  cursor: default;
}

.btn-secondary:hover {
  background: var(--hover);
}

.form-error {
  color: #dc2626;
  font-size: 12px;
}

/* Dark mode — invert lightness, rotate hue 180deg to preserve original colors */
html.dark-mode {
  filter: invert(1) hue-rotate(180deg);
}

html.dark-mode img,
html.dark-mode video,
html.dark-mode iframe {
  filter: invert(1) hue-rotate(180deg);
}

@media print {
  .topnav,
  .controls,
  .pager,
  .form,
  .btn-danger {
    display: none !important;
  }

  table {
    color: #000;
    box-shadow: none;
    border: none;
  }

  th,
  td {
    color: #000;
  }
}

/* AI WIDGET */
.ai-float-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  background: var(--topbar-bg);
  color: var(--topbar-text);
  border: none;
  padding: 8px 18px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  box-shadow: var(--shadow-md);
  transition: background 0.12s ease, color 0.12s ease;
}

.ai-float-btn:hover {
  background: var(--topbar-bg-hover);
  color: var(--topbar-text-hover);
}

.ai-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1000;
  width: 360px;
  height: 480px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ai-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 11px 16px;
  background: var(--topbar-bg);
  flex-shrink: 0;
}

.ai-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--topbar-text-hover);
}

.ai-close-btn {
  background: none;
  border: none;
  color: var(--topbar-text);
  cursor: pointer;
  font-size: 16px;
  padding: 0 2px;
  line-height: 1;
  font-family: inherit;
  transition: color 0.12s ease;
}

.ai-close-btn:hover {
  color: var(--topbar-text-hover);
}

.ai-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ai-msg-user {
  align-self: flex-end;
  background: var(--accent);
  color: #ffffff;
  padding: 8px 12px;
  border-radius: 12px 12px 2px 12px;
  max-width: 82%;
  font-size: 13px;
  line-height: 1.45;
  word-break: break-word;
  white-space: pre-wrap;
}

.ai-msg-assistant {
  align-self: flex-start;
  background: var(--surface-alt);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 12px 12px 12px 2px;
  max-width: 82%;
  font-size: 13px;
  line-height: 1.45;
  word-break: break-word;
  white-space: pre-wrap;
  border: 1px solid var(--border);
}

.ai-msg-error {
  color: #dc2626;
}

.ai-no-key {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  padding: 24px;
  line-height: 1.5;
}

.ai-input-area {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  align-items: center;
}

.ai-input {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);
  outline: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.ai-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-ring);
}

.ai-spinner {
  width: 30px;
  height: 30px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: ai-spin 0.65s linear infinite;
  flex-shrink: 0;
}

@keyframes ai-spin {
  to { transform: rotate(360deg); }
}

/* AI CONFIG MODAL */
.ai-provider-toggle {
  display: flex;
  gap: 8px;
}

.ai-provider-btn {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  transition: all 0.12s ease;
}

.ai-provider-btn.active {
  background: var(--accent);
  color: #ffffff;
  border-color: var(--accent);
}

.ai-provider-btn:hover:not(.active) {
  background: var(--hover);
  color: var(--text);
}

.ai-disclaimer {
  font-size: 11px;
  color: var(--text-subtle);
  margin: -4px 0 0;
  line-height: 1.5;
}

/* MOBILE */
@media (max-width: 600px) {
  /* 1. BODY AND LAYOUT */
  body {
    padding: 0;
  }

  main {
    padding: 0 12px 24px;
  }

  /* 3. TYPOGRAPHY */
  h1 {
    font-size: 20px;
  }

  /* 4. TABLES */
  td, th {
    padding: 5px 10px;
    font-size: 12px;
  }

  /* Keep the injected email/call/delete buttons on one line — the actions
     column has no width constraint, so when the other columns' nowrap widths
     squeeze it, the three inline-block buttons wrap into a vertical stack and
     each row balloons to ~3 button-heights of whitespace. Any horizontal
     overflow this causes is already handled by main > table's side-scroll.
     :not([colspan]) excludes the single-cell "no X yet" empty-state row,
     which must stay free to wrap. */
  main > table td:last-child:not([colspan]) {
    white-space: nowrap;
  }

  /* > not a plain descendant selector — dashboard tables are nested inside
     .dashboard-half/.dashboard-row, not direct children of main, so they're
     excluded here the same way the 900px rule above already excludes them.
     Without this, display:block breaks their percentage-width column sizing. */
  main > table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  /* Hide low-priority columns on the main list pages so most rows fit
     without horizontal scrolling. Column choices mirror the ones already
     made for the dashboard's condensed tables (ID always dropped; City/Date,
     Contact/Phone, and Phone/Email are the droppable columns for
     leads/deals/notes respectively). */
  /* :not([colspan]) on every td:nth-child(1) below excludes the single-cell
     "no X yet" empty-state row for the same reason as the dashboard rule above —
     that lone td is nth-child(1) of its row regardless of how many columns
     the table conceptually has. */
  .leads-table th:nth-child(1),
  .leads-table td:nth-child(1):not([colspan]),
  .leads-table th:nth-child(6),
  .leads-table td:nth-child(6),
  .leads-table th:nth-child(7),
  .leads-table td:nth-child(7) {
    display: none;
  }

  .contacts-table th:nth-child(1),
  .contacts-table td:nth-child(1):not([colspan]),
  .contacts-table th:nth-child(6),
  .contacts-table td:nth-child(6),
  .contacts-table th:nth-child(7),
  .contacts-table td:nth-child(7) {
    display: none;
  }

  .companies-table th:nth-child(1),
  .companies-table td:nth-child(1):not([colspan]),
  .companies-table th:nth-child(3),
  .companies-table td:nth-child(3) {
    display: none;
  }

  .deals-table th:nth-child(1),
  .deals-table td:nth-child(1):not([colspan]),
  .deals-table th:nth-child(6),
  .deals-table td:nth-child(6),
  .deals-table th:nth-child(7),
  .deals-table td:nth-child(7) {
    display: none;
  }

  .notes-table th:nth-child(1),
  .notes-table td:nth-child(1):not([colspan]),
  .notes-table th:nth-child(4),
  .notes-table td:nth-child(4),
  .notes-table th:nth-child(5),
  .notes-table td:nth-child(5) {
    display: none;
  }

  /* Explicit widths for the remaining visible columns on each table above.
     Without these, an empty table (no rows to size against) can leave the
     header row narrower than the container instead of stretching to fill it —
     same issue as the dashboard's mini-tables, fixed the same way. Delete
     (always the last column, still shown here unlike on the dashboard) is
     left unconstrained since it just needs to fit its own button. */
  /* white-space: nowrap keeps rows single-line on mobile — without it, td's
     overflow-wrap: anywhere lets long names/emails wrap mid-word to fit
     these narrow percentage widths, inflating row height. main > table's
     overflow-x: auto (above) already handles any resulting horizontal
     overflow via side-scroll instead. */
  .leads-table th:nth-child(2), .leads-table td:nth-child(2) { width: 20%; white-space: nowrap; }
  .leads-table th:nth-child(3), .leads-table td:nth-child(3) { width: 20%; white-space: nowrap; }
  .leads-table th:nth-child(4), .leads-table td:nth-child(4) { width: 24%; white-space: nowrap; }
  .leads-table th:nth-child(5), .leads-table td:nth-child(5) { width: 26%; white-space: nowrap; }

  .contacts-table th:nth-child(2), .contacts-table td:nth-child(2) { width: 20%; white-space: nowrap; }
  .contacts-table th:nth-child(3), .contacts-table td:nth-child(3) { width: 20%; white-space: nowrap; }
  .contacts-table th:nth-child(4), .contacts-table td:nth-child(4) { width: 28%; white-space: nowrap; }
  .contacts-table th:nth-child(5), .contacts-table td:nth-child(5) { width: 22%; white-space: nowrap; }

  .companies-table th:nth-child(2), .companies-table td:nth-child(2) { width: 30%; white-space: nowrap; }
  .companies-table th:nth-child(4), .companies-table td:nth-child(4) { width: 26%; white-space: nowrap; }
  .companies-table th:nth-child(5), .companies-table td:nth-child(5) { width: 32%; white-space: nowrap; }

  .deals-table th:nth-child(2), .deals-table td:nth-child(2) { width: 28%; white-space: nowrap; }
  .deals-table th:nth-child(3), .deals-table td:nth-child(3) { width: 16%; white-space: nowrap; }
  .deals-table th:nth-child(4), .deals-table td:nth-child(4) { width: 18%; white-space: nowrap; }
  .deals-table th:nth-child(5), .deals-table td:nth-child(5) { width: 24%; white-space: nowrap; }

  .notes-table th:nth-child(2), .notes-table td:nth-child(2) { width: 55%; }
  .notes-table th:nth-child(3), .notes-table td:nth-child(3) { width: 25%; }

  /* 5. FORMS */
  .form {
    flex-direction: column;
  }

  .form input,
  .form select {
    width: 100%;
    flex: none;
  }

  /* 16px, not 13px — under 16px, iOS Safari zooms the whole page in on focus */
  .form input,
  .form select,
  .search {
    font-size: 16px;
  }

  /* 6. CONTROLS — search + CSV button share one row, CSV right-justified
     in the space left over (base .controls already has justify-content:
     space-between/align-items:center; only the column stacking needs undoing). */
  .controls {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
  }

  .controls .search {
    flex: 1 1 auto;
    max-width: none;
    width: auto;
  }

  /* 7. PAGER */
  .pager {
    font-size: 12px;
    gap: 8px;
  }

  /* 8. LOGIN CARD */
  .login-card {
    max-width: none;
    width: 90%;
    margin: 24px auto;
    padding: 24px 20px;
  }

  /* 9. BUTTONS — bigger tap targets than desktop, not smaller */
  .btn {
    padding: 10px 16px;
  }

  .btn-danger {
    padding: 8px 14px;
    font-size: 13px;
  }

  /* 10. CALL BUTTONS — mobile only, hidden on desktop by the base .btn-call rule */
  .btn-call {
    display: inline-block;
  }
}