/* ---- Colour schemes ----------------------------------------------------------------------------------
   Every brand colour in this file is one of these variables. The default (FS Navy & Gold) is set here;
   each user's scheme (users.color_scheme → <html data-scheme>, see app/themes.py) overrides them at the
   end of this file, with its own light and dark values. */
:root {
  --brand: #1f3864; --brand-hover: #2c4d85; --brand-rgb: 31, 56, 100; --brand-deep: #13223b;
  --accent: #c9a456; --accent-hover: #d9b667; --accent-rgb: 201, 164, 86;
  --brand-line: #3b5786;
  --dark-bg: #0b1526; --dark-bg-2: #0e192d; --dark-card: #111e34; --dark-raise: #1d3152; --dark-raise-2: #14243e;
  --dark-line: #22324f;
  --tint: #e4eaf3; --tint-2: #d9e1ed; --tint-soft: #f3f6fb; --tint-line: #b9c6da;
}

/* ---- FS Minerals brand ------------------------------------------------ */

/* Light: FS Minerals navy as the accent colour. */
:root[data-theme="light"] {
  --fat-navy: var(--brand);
  --pico-primary: var(--brand);
  --pico-primary-background: var(--brand);
  --pico-primary-border: var(--brand);
  --pico-primary-underline: rgba(var(--brand-rgb), 0.5);
  --pico-primary-hover: var(--brand-hover);
  --pico-primary-hover-background: var(--brand-hover);
  --pico-primary-hover-border: var(--brand-hover);
  --pico-primary-hover-underline: var(--brand-hover);
  --pico-primary-focus: rgba(var(--brand-rgb), 0.3);
  --pico-primary-inverse: #fff;
}

/* Dark: deep navy with a warm gold accent. */
:root[data-theme="dark"] {
  --pico-background-color: var(--dark-bg);
  --pico-color: #dde4ef;
  --pico-muted-color: #8f9db3;
  --pico-muted-border-color: var(--dark-line);
  --pico-card-background-color: var(--dark-card);
  --pico-card-sectioning-background-color: var(--dark-bg-2);
  --pico-card-box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.35);
  --pico-form-element-background-color: var(--dark-bg-2);
  --pico-form-element-border-color: var(--dark-line);
  --pico-form-element-focus-color: var(--accent-hover);
  --pico-table-border-color: var(--dark-line);
  --pico-table-row-stripped-background-color: rgba(var(--accent-rgb), 0.04);
  --pico-h1-color: #f3f6fb;
  --pico-h2-color: #eef2f8;
  --pico-h3-color: #e7ecf4;
  --pico-primary: var(--accent-hover);
  --pico-primary-background: var(--accent);
  --pico-primary-border: var(--accent);
  --pico-primary-underline: rgba(var(--accent-rgb), 0.5);
  --pico-primary-hover: var(--accent-hover);
  --pico-primary-hover-background: var(--accent-hover);
  --pico-primary-hover-border: var(--accent-hover);
  --pico-primary-hover-underline: var(--accent-hover);
  --pico-primary-focus: rgba(var(--accent-rgb), 0.35);
  --pico-primary-inverse: var(--dark-bg);
  --pico-secondary-background: #24375a;
  --pico-secondary-inverse: #dde4ef;
}
[data-theme="dark"] body { background: radial-gradient(ellipse at top, #13223d 0%, var(--dark-bg) 60%) fixed; }
[data-theme="dark"] body > header { border-bottom: 1px solid rgba(var(--accent-rgb), 0.25); }

/* Logo with "Acquisition Tool" set underneath, lined up with the logo's left edge. */
.brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  flex-shrink: 0;
  padding: 0.25rem 0;
  text-decoration: none;
}
.brand .logo { height: 30px; width: auto; max-width: none; }
.brand .app-name {
  color: var(--pico-muted-color);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.logo-for-dark { display: none; }
[data-theme="dark"] .logo-for-light { display: none; }
[data-theme="dark"] .logo-for-dark { display: inline; }
.login-brand { text-align: center; }
.login-brand img { width: min(100%, 220px); height: auto; }
.login-brand p { margin: 0.75rem 0 0; letter-spacing: 0.08em; }
.theme-toggle { width: 2.4rem; padding: 0.3rem 0; font-size: 1rem; line-height: 1; }
@media (max-width: 720px) {
  .brand .logo { height: 24px; }
  .brand .app-name { font-size: 0.6rem; letter-spacing: 0.2em; }
}

.banner {
  padding: 0.5rem 0.75rem;
  border-radius: var(--pico-border-radius);
  background: var(--pico-primary-background);
  color: var(--pico-primary-inverse);
}
.add-to-list fieldset { margin: 0.5rem 0 0; }
.add-to-list select { max-width: 16rem; }
.bulk-add { margin-top: 1rem; }

.stage-form { margin-bottom: 1rem; }
.person {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.5rem 0;
  border-top: 1px solid var(--pico-muted-border-color);
}
.owner-card { flex: 1 1 18rem; min-width: 0; }
.fs-note { margin: 0.35rem 0 0; font-size: 0.9em; font-style: italic; }
form.inline { display: inline-flex; gap: 0.25rem; margin: 0; }
form.inline select, form.inline button { width: auto; margin: 0; padding: 0.25rem 0.5rem; font-size: 0.85rem; }
.contact-result {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  border-top: 1px solid var(--pico-muted-border-color);
}
.contact-result button { width: auto; margin: 0; padding: 0.25rem 0.75rem; }
.activity.stage-change p { color: var(--pico-muted-color); }

.badge {
  display: inline-block;
  min-width: 1.4rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: #c62828;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
}
.task {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--pico-muted-border-color);
}
.task .task-body { flex: 1; }
.task form.inline button { padding: 0.15rem 0.5rem; }
.task-overdue .due { color: #c62828; font-weight: 600; }
.task-today .due { font-weight: 600; }
[data-theme="dark"] .task-overdue .due { color: #ef9a9a; }
.task-group h2 { font-size: 1.1rem; margin: 1.5rem 0 0.25rem; }
.add-task fieldset { margin-bottom: 0.5rem; }
.add-task select { max-width: 9rem; }
.add-task.highlight { padding: 0.5rem; border-radius: var(--pico-border-radius); background: var(--pico-primary-background); }
.add-task.highlight small { color: var(--pico-primary-inverse); }

.view-toggle a[aria-current] { font-weight: 700; text-decoration: none; }
.board {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 1rem;
}
.board-column {
  flex: 1 0 15rem;
  min-height: 8rem;
  padding: 0.6rem;
  border: 2px solid var(--fat-navy, var(--brand));
  border-radius: var(--pico-border-radius);
  background: linear-gradient(180deg, var(--tint) 0%, var(--tint-2) 100%);
  box-shadow: 0 4px 12px rgba(15, 30, 60, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
[data-theme="dark"] .board-column {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--dark-raise) 0%, var(--brand-deep) 100%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(var(--accent-rgb), 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.board-column > header {
  display: flex;
  flex-direction: column;
  margin: -0.6rem -0.6rem 0.6rem;
  padding: 0.55rem 0.6rem;
  border-bottom: 1px solid #d3dbe8;
  font-size: 0.9rem;
}
[data-theme="dark"] .board-column > header { border-bottom-color: rgba(var(--accent-rgb), 0.45); background: rgba(var(--accent-rgb), 0.1); }
.board-column > header small { color: var(--pico-muted-color); }
.board-column.drop-target { outline: 2px dashed var(--pico-primary); }
/* Stages with no prospects: a slim strip with the name written sideways; they open up while a card is dragged */
.board-column.is-empty { flex: 0 0 2.6rem; min-height: 12rem; padding: 0.5rem 0.2rem; cursor: default; opacity: 0.8; transition: flex-basis 0.15s ease; }
.board-column.is-empty > header { margin: 0; padding: 0; border: 0; background: none; align-items: center; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-size: 0.8rem; }
.board-column.is-empty > header small { display: none; }
body.board-dragging .board-column.is-empty { flex: 0 0 11rem; opacity: 1; }
body.board-dragging .board-column.is-empty > header { writing-mode: horizontal-tb; transform: none; }
.deal-card { margin: 0 0 0.5rem; padding: 0.6rem 0.75rem; font-size: 0.9rem; cursor: grab; }
.deal-card > small { display: block; color: var(--pico-muted-color); }
.deal-card > footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0.4rem 0 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.8rem;
}
.deal-card.dragging { opacity: 0.5; }
[data-theme="dark"] .deal-card {
  background: var(--dark-raise);
  border: 1px solid var(--brand-line);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .deal-card:hover { border-color: var(--accent); }
.initials {
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--pico-primary-background);
  color: var(--pico-primary-inverse);
  font-size: 0.7rem;
  font-weight: 600;
}

.login { max-width: 32rem; margin: 3rem auto; }
.account summary { white-space: nowrap; }
.account form { margin: 0; }
.account button { width: 100%; margin: 0; }

.page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.page-head h1 { margin: 0; }

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.75rem;
}
.filters > * { flex: 1 1 11rem; width: auto; }
.filters > .search { flex: 3 1 18rem; }

.nowrap { white-space: nowrap; }

th a.sort {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
th a.sort:hover { color: var(--pico-primary); }
th a.sort .arrow {
  margin-left: 0.3em;
  font-size: 0.75em;
  opacity: 0.35;
}
th a.sort.active { color: var(--pico-primary); }
th a.sort.active .arrow { opacity: 1; }

.summary { color: var(--pico-muted-color); }
.muted { color: var(--pico-muted-color); }
.prewrap { white-space: pre-wrap; }
.error { color: var(--pico-del-color); }

.tag {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  margin: 0 0.25rem 0.25rem 0;
  border-radius: 999px;
  font-size: 0.8rem;
  background: var(--pico-secondary-background);
  color: var(--pico-secondary-inverse);
  text-decoration: none;
}

.status {
  display: inline-block;
  padding: 0.05rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8rem;
  border: 1px solid currentColor;
}
.status-active { color: #2e7d32; }
.status-unsubscribed { color: #8a6d00; }
.status-bounced { color: #c62828; }
[data-theme="dark"] .status-active { color: #81c784; }
[data-theme="dark"] .status-unsubscribed { color: #ffd54f; }
[data-theme="dark"] .status-bounced { color: #ef9a9a; }

.pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}
.actions form { margin: 0; }
.actions button, .actions [role="button"] { margin: 0; }

.detail { align-items: start; }
.detail dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 1rem; }
.detail dd { margin: 0; }

.activity { border-top: 1px solid var(--pico-muted-border-color); padding-top: 0.75rem; }
.activity p { margin-bottom: 0.75rem; }
.activity .email-summary { margin-bottom: 0.25rem; }
.activity .email-body { margin-bottom: 0.75rem; }
.activity .email-body summary { font-size: 0.85rem; color: var(--pico-muted-color); cursor: pointer; }
.activity .email-body p { margin: 0.4rem 0 0; padding: 0.6rem 0.8rem; border-left: 3px solid var(--pico-muted-border-color); }

.empty { text-align: center; }
.empty [role="button"] { margin: 0.25rem; }

/* Full-width pages with comfortable margins, for wide and ultrawide monitors. */
.page-width { padding-left: clamp(1rem, 2.5vw, 3rem); padding-right: clamp(1rem, 2.5vw, 3rem); }

/* Workflow 1: Log call outcome / Log offer response buttons under Edit (prospect + owner pages);
   the forms open in the pop-up (deals/_outcome_popup.html) */
.head-actions { display: flex; flex-direction: column; align-items: stretch; gap: 0.4rem; }
.head-actions > [role="button"], .head-actions > button { width: auto; margin: 0; padding: 0.3rem 0.9rem; font-size: 0.85rem; text-align: center; }
/* Pop-ups stay compact and fit the screen (scroll inside only on a very short window) */
dialog#popup > #popup-body > article { max-height: 92vh; overflow-y: auto; padding: 1rem 1.25rem; margin: 0; }
dialog#popup > #popup-body > article > header { padding: 0.6rem 1.25rem; margin: -1rem -1.25rem 0.8rem; }
dialog#popup > #popup-body > article.outcome-popup { width: min(34rem, 94vw); max-width: 34rem; font-size: 0.88rem; }
.outcome-popup .outcome-form { margin: 0; padding: 0; border: 0; background: none; }
.outcome-popup .outcome-form fieldset { margin-bottom: 0.6rem; }
.outcome-popup .outcome-form legend { margin-bottom: 0.2rem; font-weight: 600; }
.outcome-popup .outcome-form fieldset label { margin-bottom: 0.15rem; padding: 0.2rem 0.5rem; }
.outcome-popup input:not([type="radio"]), .outcome-popup select, .outcome-popup textarea {
  margin-bottom: 0.4rem; padding: 0.3rem 0.55rem; height: auto; font-size: 0.88rem; }
.outcome-popup label { margin-bottom: 0.2rem; }
.outcome-popup .grid { gap: 0.6rem; }
dialog#popup > #popup-body > article.outcome-popup > header { padding: 0.45rem 1.25rem; margin-bottom: 0.6rem; line-height: 1.25; }
.outcome-popup > header br + small { font-size: 0.8rem; }
/* Yes / No side by side; each choice and its "→ next step" hint on one line */
.outcome-popup fieldset:has(> label > input[name="contact_made"]) { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.outcome-popup fieldset:has(> label > input[name="contact_made"]) > legend { width: 100%; }
.outcome-popup .outcome-form fieldset label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; }
.outcome-popup .outcome-form fieldset label > small { font-size: 0.78rem; }
.outcome-popup .not-interested { margin-top: 0.3rem; padding: 0.5rem 0.6rem; }
.outcome-popup .not-interested > small { display: block; margin-bottom: 0.3rem; font-size: 0.78rem; }
.outcome-popup textarea { min-height: 0; }
dialog#popup > #popup-body > article.outcome-popup footer.actions { margin: 0.3rem 0 0; padding: 0; border: 0; background: none; }
.outcome-popup footer.actions { display: flex; gap: 0.5rem; flex-wrap: nowrap; }
.outcome-popup footer.actions button { width: auto; margin: 0; padding: 0.35rem 1rem; font-size: 0.88rem; }
.chooser { list-style: none; padding: 0; }
.chooser li { margin-bottom: 0.5rem; }
.outcome-form {
  margin-top: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--pico-muted-border-color);
  border-radius: var(--pico-border-radius);
  background: var(--pico-card-background-color);
}
.outcome-form fieldset { margin-bottom: 1.25rem; }
.outcome-form fieldset label {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.6rem;
  align-items: center;
  margin: 0 0 0.4rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid transparent;
  border-radius: var(--pico-border-radius);
  cursor: pointer;
}
.outcome-form fieldset label:hover { border-color: var(--pico-muted-border-color); }
.outcome-form fieldset label:has(input:checked) {
  border-color: var(--pico-primary-border);
  background: rgba(var(--accent-rgb), 0.08);
}
.outcome-form fieldset label input[type="radio"] { margin: 0; }
.outcome-form fieldset label > small {
  grid-column: 2;
  display: block;
  margin: 0.1rem 0 0;
  font-size: 0.82rem;
  line-height: 1.3;
}

/* Add to prospect pop-up */
#popup > #popup-body > article { width: min(46rem, 94vw); max-width: none; }
.add-prospect .choices { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.add-prospect fieldset { margin-bottom: 0.75rem; }
.add-prospect footer.actions { justify-content: flex-end; }
.add-prospect-page { max-width: 48rem; }
.add-prospect-button { margin: 0; padding: 0.2rem 0.6rem; font-size: 0.85rem; width: auto; }

/* Entry forms stay a readable width even though the rest of the app is full-width. */
.entry-form { max-width: 60rem; }
/* Owner form: each phone/email sits beside its label; slots 2–3 fold away while empty. */
.contact-slot { display: grid; grid-template-columns: minmax(0, 1fr) 7.5rem; gap: 0 0.75rem; }
.more-slots { margin-bottom: var(--pico-spacing); }
.more-slots > summary { font-size: 0.9rem; color: var(--pico-primary); }

.card-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.small-button { padding: 0.2rem 0.75rem; font-size: 0.85rem; }

.card-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.1rem 0.6rem;
  margin: 0.45rem 0 0;
  font-size: 0.78rem;
}
.card-facts dt { margin: 0; font-weight: normal; color: var(--pico-muted-color); }
.card-facts dd { margin: 0; text-align: right; }
.card-facts dd.yes, td.yes { color: #2e7d32; font-weight: 600; }
[data-theme="dark"] .card-facts dd.yes, [data-theme="dark"] td.yes { color: #81c784; }

.add-task > input[name="title"] { margin-bottom: 0.4rem; }
.card-tasks { margin: 0.5rem 0 0; padding-top: 0.4rem; border-top: 1px solid var(--pico-muted-border-color); font-size: 0.78rem; }
.card-task { display: flex; flex-direction: column; margin-bottom: 0.3rem; line-height: 1.3; }
.card-task .label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--pico-muted-color); }
.card-task .meta { color: var(--pico-muted-color); }
.card-task.task-none .meta { font-style: italic; }
.card-task.task-overdue .meta, td.task-overdue .due { color: #c62828; font-weight: 600; }
[data-theme="dark"] .card-task.task-overdue .meta, [data-theme="dark"] td.task-overdue .due { color: #ef9a9a; }
.card-task.task-done .what { color: #2e7d32; }
[data-theme="dark"] .card-task.task-done .what { color: #81c784; }
.activity-form .talked { display: flex; align-items: center; gap: 0.4rem; margin: -0.4rem 0 0.75rem; font-size: 0.9rem; }
.activity-form .talked[hidden] { display: none; }
.deal-card { cursor: pointer; }
.deal-card:active { cursor: grabbing; }
.open-full { margin-left: auto; align-self: center; font-size: 0.9rem; }

/* Prospect report */
.report-filters fieldset { max-width: 36rem; }
.report-wrap { border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); }
table.report { font-size: 0.82rem; margin: 0; }
table.report th, table.report td { padding: 0.4rem 0.55rem; vertical-align: top; }
table.report thead th { position: sticky; top: 0; z-index: 1; vertical-align: bottom; background: var(--fat-navy, var(--brand)); color: #fff; white-space: nowrap; }
[data-theme="dark"] table.report thead th { background: var(--dark-raise); color: var(--accent-hover); }
table.report thead th.filtered { box-shadow: inset 0 -3px 0 var(--accent); }
table.report .sort-button {
  all: unset; display: block; cursor: pointer; font-weight: 600; margin-bottom: 0.3rem;
}
table.report th[data-dir="asc"] .sort-button::after { content: " ▲"; }
table.report th[data-dir="desc"] .sort-button::after { content: " ▼"; }
table.report thead input[type="search"] { margin: 0; padding: 0.15rem 0.5rem; height: auto; font-size: 0.75rem; min-width: 9rem; border-radius: var(--pico-border-radius); background-image: none; }
table.report thead select { margin: 0; padding: 0.15rem 1.6rem 0.15rem 0.4rem; height: auto; font-size: 0.75rem; min-width: 6rem; }
table.report tbody tr:nth-child(even) td { background: rgba(var(--brand-rgb), 0.05); }
[data-theme="dark"] table.report tbody tr:nth-child(even) td { background: rgba(var(--accent-rgb), 0.04); }
table.report .num { text-align: right; white-space: nowrap; }
table.report td.yes { color: #2e7d32; font-weight: 600; }
[data-theme="dark"] table.report td.yes { color: #81c784; }
table.report td.task-overdue .due { color: #c62828; font-weight: 600; }
[data-theme="dark"] table.report td.task-overdue .due { color: #ef9a9a; }
table.report tfoot th { font-weight: 700; border-top: 2px solid var(--pico-muted-border-color); }
.link-button { all: unset; cursor: pointer; color: var(--pico-primary); text-decoration: underline; }

/* Prospect page: narrow details on the left, tasks and activity front and centre */
.prospect-page-title { margin-bottom: 0.75rem; }
.prospect-page-title h1 { font-size: 1.3rem; }
.prospect-page-title hgroup p { font-size: 0.85rem; margin: 0; }
.prospect-page-title [role="button"] { font-size: 0.85rem; padding: 0.3rem 0.9rem; }
/* Prospect page, three columns: details + Call/Text/Email | Activity | Tasks + Automations */
.prospect-layout {
  display: grid;
  grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr) minmax(16rem, 22rem);
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 1200px) {  /* tools drop under Activity */
  .prospect-layout { grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr); }
  .prospect-tools { grid-column: 2; }
}
@media (max-width: 900px) {
  .prospect-layout { grid-template-columns: 1fr; } .prospect-main { order: -1; } .prospect-tools { grid-column: auto; }
}
.prospect-tools { font-size: 0.85rem; min-width: 0; }
.prospect-tools article { padding: 0.9rem 1rem; margin: 0 0 1rem; }
.prospect-tools article > header { margin: -0.9rem -1rem 0.75rem; padding: 0.6rem 1rem; }
.prospect-tools .card-head { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.prospect-tools .task { font-size: 0.85rem; gap: 0.4rem; }
.prospect-tools .task form.inline button { padding: 0.1rem 0.4rem; font-size: 0.8rem; }
.prospect-tools .add-task fieldset { flex-wrap: wrap; }
.badge.overdue { background: #c62828; color: #fff; font-size: 0.7rem; padding: 0.05rem 0.45rem; border-radius: 1rem; vertical-align: middle; }
.activity-panel { margin-top: 0; }
.activity-panel > .card-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.activity-chips { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.activity-chips .chip {
  width: auto; margin: 0; padding: 0.15rem 0.75rem; font-size: 0.8rem; border-radius: 1rem;
  background: transparent; color: var(--pico-primary); border: 1px solid var(--pico-primary-border);
}
.activity-chips .chip[aria-pressed="true"] { background: var(--pico-primary-background); color: var(--pico-primary-inverse); }
.activity[hidden] { display: none; }
.task-popup .add-task { margin: 0; }
.prospect-side { font-size: 0.85rem; }
.prospect-side article { padding: 0.9rem 1rem; margin-bottom: 1rem; }
.prospect-side article > header, .prospect-side article > footer { margin: -0.9rem -1rem 0.75rem; padding: 0.6rem 1rem; }
.prospect-side article > footer { margin: 0.75rem -1rem -0.9rem; }
.prospect-side input, .prospect-side select, .prospect-side button, .prospect-side [role="button"],
.prospect-tools .owners-panel input, .prospect-tools .owners-panel select, .prospect-tools .owners-panel button,
.prospect-tools .owners-panel [role="button"] {
  font-size: 0.85rem; padding-top: 0.35rem; padding-bottom: 0.35rem; height: auto;
}
.prospect-tools .owners-panel > footer { margin: 0.75rem -1rem -0.9rem; padding: 0.6rem 1rem; }
.prospect-tools .owners-panel .add-to-list fieldset { flex-wrap: wrap; }
/* Activity: about three entries in view, the rest behind a scroll bar (height set by activity_filter.js) */
.activity-list, .task-scroll { max-height: 22rem; overflow-y: auto; padding-right: 0.4rem; scrollbar-gutter: stable; }
.task-scroll { max-height: 14rem; }
.prospect-side label { font-size: 0.8rem; margin-bottom: 0.5rem; }
.prospect-side .side-call { display: block; width: 100%; margin-bottom: 0.5rem; text-align: center; }
.prospect-side .side-call + .status-card { margin-top: 1rem; }
.prospect-side .stage-form { margin: 0; }
.prospect-side .stage-form button { width: 100%; margin-bottom: 0.4rem; }
.prospect-side .stage-form small { display: block; }
.prospect-side .person, .prospect-tools .person { flex-direction: column; }
.prospect-side .person .actions, .prospect-tools .person .actions { gap: 0.4rem; }
.prospect-side .detail-list, .prospect-side dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 0.75rem; margin: 0; }
.prospect-side dd { margin: 0; }
.prospect-side .add-to-list fieldset { flex-wrap: wrap; }
.prospect-main { min-width: 0; }
.prospect-main .outcome-actions { margin-top: 0; }
.prospect-main > article:first-of-type, .prospect-main > .outcome-actions + article { margin-top: 0; }

.outcome-form .not-interested, .add-prospect .not-interested {
  display: grid; grid-template-columns: 1fr; gap: 0 0.75rem; margin: 0.25rem 0 0.75rem; padding: 0.75rem;
  border-left: 3px solid var(--pico-primary-border); background: rgba(var(--accent-rgb), 0.06); border-radius: var(--pico-border-radius);
}
.not-interested[hidden] { display: none !important; }
.not-interested > small { grid-column: 1 / -1; }
.outcome-form fieldset .not-interested label { display: block; padding: 0; border: 0; background: none; cursor: default; }

.board-scrollbar { overflow-x: auto; overflow-y: hidden; height: 14px; margin-bottom: 0.4rem; }
.board-scrollbar > div { height: 1px; }
.board-scrollbar[hidden] { display: none; }

/* Admin setup */
.admin-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 24rem); gap: 1.25rem; align-items: start; }
@media (max-width: 900px) { .admin-layout { grid-template-columns: minmax(0, 1fr); } }
.admin-users { font-size: 0.9rem; margin: 0; }
.admin-users tr.muted td { color: var(--pico-muted-color); }
.admin-users tr.just-saved td { background: rgba(var(--accent-rgb), 0.12); }
.tag-admin { background: var(--accent); color: var(--dark-bg); }
.admin-form label.check { display: flex; gap: 0.5rem; align-items: center; }
.admin-form label.check input { margin: 0; }

.admin-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.25rem; margin-top: 1.25rem; }
.tool-list { display: flex; flex-direction: column; gap: 0.5rem; }
.tool-list [role="button"] { text-align: left; }
.public-card { max-width: 32rem; margin: 3rem auto; }

/* Admin setup: tabs, templates, automations */
.admin-head { margin-bottom: 0.5rem; }
.admin-head h1 { font-size: 1.4rem; }
.admin-tabs { display: flex; justify-content: flex-start; gap: 0.25rem; flex-wrap: wrap; border-bottom: 1px solid var(--pico-muted-border-color); margin-bottom: 1.25rem; }
.admin-tabs a { padding: 0.5rem 1rem; text-decoration: none; border-bottom: 3px solid transparent; color: var(--pico-muted-color); }
.admin-tabs a[aria-current="page"] { color: var(--pico-primary); border-bottom-color: var(--pico-primary); font-weight: 600; }
.admin-toolbar { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.admin-toolbar p { margin: 0; max-width: 46rem; }
.admin-form textarea, .template-form textarea { font-family: inherit; }
.template-form label.check, .automation-form label.check { display: flex; gap: 0.5rem; align-items: center; }
.template-form label.check input, .automation-form label.check input { margin: 0; }
.merge-fields { display: grid; grid-template-columns: max-content 1fr; gap: 0.25rem 0.75rem; font-size: 0.82rem; margin: 0; }
.merge-fields dd { margin: 0; color: var(--pico-muted-color); }
.email-preview pre, .sig-preview pre { white-space: pre-wrap; font-family: inherit; font-size: 0.85rem; padding: 0.75rem; }
.small { font-size: 0.82rem; }
.automation-card { padding: 0.9rem 1.1rem; }
.automation-card.off { opacity: 0.7; }
.automation-card > header { margin: -0.9rem -1.1rem 0.6rem; padding: 0.7rem 1.1rem; }
.step-summary { margin: 0; padding-left: 1.2rem; font-size: 0.88rem; }
.step-summary li { margin-bottom: 0.2rem; }
.step-summary .day { display: inline-block; min-width: 6.5rem; color: var(--pico-muted-color); }
.step-row {
  position: relative; display: grid; grid-template-columns: 15rem 1fr; gap: 0.75rem; align-items: start;
  padding: 0.75rem 2.75rem 0.25rem 0.75rem; margin-bottom: 0.75rem;
  border: 1px solid var(--pico-muted-border-color); border-left: 3px solid var(--pico-primary-border);
  border-radius: var(--pico-border-radius);
}
.step-row label { font-size: 0.82rem; margin-bottom: 0.5rem; }
.step-row input, .step-row select { font-size: 0.85rem; padding-top: 0.3rem; padding-bottom: 0.3rem; height: auto; margin-bottom: 0; }
.step-when { display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.5rem; align-items: start; }
.step-what { display: flex; flex-wrap: wrap; gap: 0 0.75rem; }
.step-what > label { flex: 1 1 10rem; }
.step-what > label.wide { flex: 3 1 16rem; }
.step-what > label[hidden] { display: none; }
.automation-form .step-remove { position: absolute; top: 0.5rem; right: 0.5rem; width: auto; margin: 0; padding: 0.1rem 0.5rem; }
.step-error { grid-column: 1 / -1; margin-bottom: 0.5rem; }
.delete-automation { margin: 0.5rem 0 1.25rem; }
@media (max-width: 720px) { .step-row { grid-template-columns: 1fr; } }

.automation-panel .automation-run { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem;
  padding: 0.5rem 0; border-bottom: 1px solid var(--pico-muted-border-color); font-size: 0.9rem; }
.automation-panel .start-automation { margin: 0.75rem 0 0; }
.automation-panel .start-automation select, .automation-panel .start-automation button { font-size: 0.85rem; padding-top: 0.3rem; padding-bottom: 0.3rem; height: auto; }

.logo-field { margin: 0.5rem 0 1rem; padding: 0.75rem; border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); }
.logo-field legend { padding: 0 0.3rem; font-size: 0.9rem; }
.logo-field input[type="file"] { margin-bottom: 0.25rem; font-size: 0.85rem; }
.logo-field label.check { display: flex; gap: 0.5rem; align-items: center; }
.logo-field label.check input { margin: 0; }
.email-render { background: #fff; color: #222; padding: 0.9rem 1rem; border-radius: var(--pico-border-radius);
  border: 1px solid #ddd; margin-top: 0.4rem; overflow-x: auto; }
.email-render a { color: var(--brand); }
.sig-preview { margin-bottom: 1rem; }

.timing-unit { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.85rem; font-weight: normal; }
.timing-unit select { margin: 0; width: auto; font-size: 0.85rem; padding-top: 0.25rem; padding-bottom: 0.25rem; height: auto; }
.testing-note { padding: 0.6rem 0.8rem; border-left: 3px solid #e0a100; background: rgba(224, 161, 0, 0.1); border-radius: var(--pico-border-radius); font-size: 0.85rem; }
.tag-testing { background: #e0a100; color: #1b1b1b; }
.step-when label[hidden] { display: none; }
table.report td.last-action { min-width: 16rem; }
.section-title { font-size: 1rem; margin: 1.25rem 0 0.5rem; }

.text-panel .text-form select { margin-bottom: 0.4rem; font-size: 0.85rem; padding-top: 0.3rem; padding-bottom: 0.3rem; height: auto; }
.text-panel textarea { margin-bottom: 0.3rem; }
.text-foot { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.text-foot button { width: auto; margin: 0; padding: 0.35rem 1rem; font-size: 0.9rem; }

.sms-bubble { display: inline-block; max-width: 22rem; padding: 0.6rem 0.85rem; border-radius: 1rem 1rem 1rem 0.25rem;
  background: #e9e9eb; color: #111; white-space: pre-wrap; font-size: 0.9rem; margin-bottom: 0.3rem; }
[data-email-only][hidden], [data-text-only][hidden] { display: none !important; }
.check-inline { display: flex; gap: 0.5rem; align-items: center; } .check-inline input { margin: 0; }

.reach-buttons { display: inline-flex; gap: 0.4rem; align-items: center; flex-wrap: nowrap; }
.reach-buttons [role="button"], .reach-buttons button { width: auto; margin: 0; padding: 0.35rem 0.85rem; font-size: 0.9rem; white-space: nowrap; }
.reach-buttons.small [role="button"], .reach-buttons.small button { padding: 0.15rem 0.55rem; font-size: 0.78rem; }
/* Several numbers / addresses: the Call / Text / Email button opens a small menu (_macros.html reach_menu) */
details.reach-menu { display: inline-block; margin: 0; }
details.reach-menu > summary::after { margin-left: 0.4rem; }
details.reach-menu > summary + ul { min-width: 16rem; z-index: 20; }
.prospect-side details.reach-menu { display: block; margin-bottom: 0.5rem; }
.prospect-side details.reach-menu > summary.side-call { margin-bottom: 0; }
.prospect-side details.reach-menu > summary + ul { width: 100%; }
.text-popup { width: min(34rem, 94vw); }
.email-popup { width: min(40rem, 94vw); }
.email-popup select, .email-popup input[name=subject] { margin-bottom: 0.5rem; }
.email-popup textarea { margin-bottom: 0.4rem; }
.text-popup select { margin-bottom: 0.4rem; }
.person-reach { margin-top: 0.35rem; }
.call-audio { width: 100%; max-width: 26rem; height: 2.2rem; margin: 0.2rem 0 0.4rem; }
/* Search Team Results (from the FS Minerals API): the write-up in a box, then its files */
.search-result { border: 1px solid var(--pico-muted-border-color); border-left: 3px solid var(--accent, var(--pico-primary));
  border-radius: var(--pico-border-radius); background: var(--pico-card-sectioning-background-color);
  padding: 0.6rem 0.8rem; margin: 0.3rem 0 0.4rem; }
.activity-files { list-style: none; padding: 0; margin: 0 0 0.4rem; }
.activity-files li { list-style: none; margin: 0.15rem 0; }
/* Email opens / bounces under a sent email (app/email_tracking.py, app/mail_sync.py) */
.email-status { font-size: 0.8rem; margin: -0.2rem 0 0.3rem; }
.email-status .bounced { color: var(--pico-del-color, #c0392b); font-weight: 600; }
.dialer-popup { width: min(34rem, 94vw); } .dialer-steps { margin: 0.5rem 0 1rem; } .dialer-popup progress { width: 100%; }

/* Compact board cards */
.deal-card .card-head-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.4rem; }
.deal-card .card-title { min-width: 0; }
.deal-card .card-title > small { display: block; color: var(--pico-muted-color); }
.deal-card .card-details { display: none; }
.deal-card.expanded .card-details { display: block; }
.deal-card .card-toggle {
  all: unset; flex: none; display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  border: 1px solid var(--pico-muted-border-color); color: var(--pico-primary); font-weight: 700; line-height: 1; cursor: pointer;
}
.deal-card .card-toggle:hover { border-color: var(--pico-primary); }
.overdue-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #c62828; margin-left: 0.25rem; vertical-align: middle; }
[data-theme="dark"] .overdue-dot { background: #ef9a9a; }
.deal-card { padding: 0.5rem 0.65rem; }

/* Bar shown after the Salesmsg call window closes */
.call-refresh-bar { position: fixed; right: 1rem; bottom: 1rem; z-index: 50; display: flex; gap: 0.5rem; align-items: center;
  padding: 0.6rem 0.9rem; border-radius: 0.5rem; background: var(--pico-card-background-color);
  border: 1px solid var(--pico-muted-border-color); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25); font-size: 0.9rem; }
.call-refresh-bar button { width: auto; margin: 0; padding: 0.3rem 0.8rem; font-size: 0.85rem; }

/* Twilio dialer: centred on the screen, level with the Call button clicked (dialer.js sets top)
   (templates/_dialer.html, static/dialer.js) */
.dialer { position: fixed; left: 50%; top: 30vh; transform: translateX(-50%); z-index: 60; width: min(21rem, calc(100vw - 2rem));
  padding: 0.8rem 0.9rem; border-radius: 0.6rem; background: var(--pico-card-background-color);
  border: 1px solid var(--pico-muted-border-color); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3); font-size: 0.9rem; }
.dialer[hidden] { display: none; }
.dialer header { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
.dialer header small { display: block; }
.dialer .dialer-x { width: auto; margin: 0; padding: 0 0.4rem; border: 0; background: none; color: var(--pico-muted-color); font-size: 1.3rem; line-height: 1; }
.dialer-status { margin: 0.5rem 0 0.6rem; font-weight: 600; }
.dialer[data-state="error"] .dialer-status { color: var(--pico-del-color, #c62828); font-weight: 500; }
.dialer-actions { display: flex; gap: 0.4rem; }
.dialer-actions button { flex: 1; margin: 0; padding: 0.35rem 0.4rem; font-size: 0.85rem; }
.dialer .dialer-hangup { background: #c62828; border-color: #c62828; color: #fff; }
.dialer .dialer-go { background: #2e7d32; border-color: #2e7d32; color: #fff; }
.dialer-confirm p { margin: -0.3rem 0 0.6rem; font-size: 0.8rem; }
.dialer-confirm, .dialer-incoming, .dialer-in-call { display: none; }
.dialer[data-state="confirm"] .dialer-confirm { display: block; }
.dialer[data-state="incoming"] .dialer-incoming { display: flex; }
.dialer[data-state="incoming"] { box-shadow: 0 0 0 3px #2e7d32, 0 8px 28px rgba(0, 0, 0, 0.3); }
.dialer[data-state="connecting"] .dialer-in-call, .dialer[data-state="ringing"] .dialer-in-call,
.dialer[data-state="live"] .dialer-in-call { display: flex; }
.dialer-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.3rem; margin-bottom: 0.5rem; }
.dialer-keypad[hidden] { display: none; }
.dialer-keypad button { margin: 0; padding: 0.35rem 0; font-size: 1rem; }

/* Production Status: prospects by stage on the left, the picked one's card on the right */
.status-filters { display: flex; gap: 0.5rem; margin: 0; }
.status-filters input, .status-filters select { margin: 0; width: auto; }
.status-layout { display: grid; grid-template-columns: minmax(18rem, 32rem) minmax(0, 34rem); gap: 1.5rem; align-items: start; }
.status-list { max-height: calc(100vh - 12rem); overflow-y: auto; padding-right: 0.25rem; }
.status-list section { margin-bottom: 1rem; }
.status-list section > header { padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--pico-muted-border-color); font-size: 0.9rem; }
.status-list ul { list-style: none; margin: 0; padding: 0; }
.status-list li { list-style: none; margin: 0; }
.status-list a { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 0.5rem; padding: 0.35rem 0.5rem; border-radius: var(--pico-border-radius); text-decoration: none; font-size: 0.9rem; }
.status-list-meta { flex: 1 0 100%; font-size: 0.78rem; color: var(--pico-muted-color); }  /* county · offer, under the name */
.status-list-meta strong { color: var(--pico-color); font-weight: 600; }
.status-list a:hover { background: var(--pico-card-sectioning-background-color); }
.status-list a[aria-current] { background: var(--pico-primary-focus); font-weight: 600; }
.status-panel-wrap { position: sticky; top: 1rem; }
.status-panel .card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; }
.status-panel .card-details footer { display: flex; justify-content: space-between; align-items: center; margin-top: 0.6rem; }
@media (max-width: 760px) { .status-layout { grid-template-columns: 1fr; } .status-list { max-height: none; } }

/* Production Status: raised, 3-D cards (stage groups on the left, the detail panel on the right) */
.status-list { padding: 0.25rem 0.6rem 0.75rem 0.25rem; }
.status-list section {
  margin-bottom: 1.1rem; padding: 0.4rem 0.4rem 0.5rem;
  border: 1px solid var(--tint-line); border-radius: calc(var(--pico-border-radius) * 1.5);
  background: linear-gradient(180deg, var(--tint-soft) 0%, var(--tint) 100%);
  box-shadow: 0 1px 1px rgba(15, 30, 60, 0.08), 0 6px 14px rgba(15, 30, 60, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.status-list section > header { margin-bottom: 0.3rem; border-bottom-color: var(--tint-line); }
.status-list a[aria-current] { background: var(--brand); color: #fff; box-shadow: 0 2px 6px rgba(15, 30, 60, 0.35); }
.status-list a[aria-current] small { color: #dbe3f0; }
.status-panel {
  margin: 0; border: 1px solid var(--tint-line); border-radius: calc(var(--pico-border-radius) * 1.5);
  background: linear-gradient(180deg, #ffffff 0%, #eef2f8 100%);
  box-shadow: 0 2px 3px rgba(15, 30, 60, 0.10), 0 12px 28px rgba(15, 30, 60, 0.22), inset 0 1px 0 #ffffff;
}
[data-theme="dark"] .status-list section {
  border-color: var(--brand-line);
  background: linear-gradient(180deg, var(--dark-raise) 0%, var(--dark-raise-2) 100%);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.5), 0 8px 20px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(var(--accent-rgb), 0.12),
              inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .status-list section > header { border-bottom-color: var(--brand-line); }
[data-theme="dark"] .status-list a[aria-current] { background: var(--accent); color: var(--brand-deep); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
[data-theme="dark"] .status-list a[aria-current] small { color: var(--brand-deep); }
/* the selected row: county · offer take the row's own text colour, full strength (not the pale list colours) */
.status-list a[aria-current] .status-list-meta, .status-list a[aria-current] .status-list-meta strong { color: inherit; opacity: 1; }
[data-theme="dark"] .status-panel {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--dark-raise) 0%, var(--dark-raise-2) 100%);
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.55), 0 16px 36px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(var(--accent-rgb), 0.2),
              inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* Production Status: the folded Activity list under the card (+ to open, − to close) */
.status-activity { margin: 0.8rem 0 0; padding-top: 0.6rem; border-top: 1px solid var(--pico-muted-border-color); }
.status-activity > summary { list-style: none; cursor: pointer; font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; gap: 0.5rem; }
.status-activity > summary::-webkit-details-marker { display: none; }
.status-activity > summary::after { display: none; }
.status-activity > summary .toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem;
  border: 1px solid var(--pico-muted-border-color); border-radius: 50%; font-weight: 700; line-height: 1;
}
.status-activity > summary .toggle::before { content: "+"; }
.status-activity[open] > summary .toggle::before { content: "−"; }
.status-activity[open] > summary { margin-bottom: 0.6rem; }
.status-activity .activity { font-size: 0.85rem; }
/* Once the activity is open the panel can be taller than the screen: let it scroll with the page */
.status-panel-wrap:has(.status-activity[open]) { position: static; }
[data-theme="dark"] .status-activity > summary .toggle { border-color: var(--accent); color: var(--accent); }

/* Who added a task: a small circle before the title (macro task_source) */
.task-source {
  display: inline-grid; place-items: center; flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--pico-primary-background); color: var(--pico-primary-inverse); font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.02em; cursor: help; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.task-source.automation { background: #5b6b84; font-size: 0.9rem; }
.task-source.phone { background: #2e7d32; font-size: 0.75rem; }
.task-source.import { background: #ff7a59; } /* HubSpot orange */
[data-theme="dark"] .task-source { background: var(--accent); color: var(--brand-deep); }
[data-theme="dark"] .task-source.automation { background: var(--brand-line); color: #e8edf5; }
[data-theme="dark"] .task-source.phone { background: #2e7d32; color: #fff; }
[data-theme="dark"] .task-source.import { background: #ff7a59; color: #fff; }

/* Production Status panel: the money facts sit in their own shaded box so they stand out */
.status-created { color: var(--pico-muted-color); }
.status-panel .card-facts {
  margin: 0.6rem 0 0.4rem; padding: 0.6rem 0.8rem; border-radius: var(--pico-border-radius);
  background: var(--tint); border: 1px solid var(--tint-line); box-shadow: inset 0 1px 3px rgba(15, 30, 60, 0.12);
}
.status-panel .card-facts dd { font-weight: 600; }
[data-theme="dark"] .status-panel .card-facts {
  background: var(--brand-deep); border-color: var(--accent); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .status-created { color: var(--accent); }
/* …in brand gold rather than another blue, so it pops off the navy card */
.status-panel .card-facts {
  background: linear-gradient(180deg, #fdf6e3 0%, #f6e9c6 100%); border-color: #d9b867;
  box-shadow: inset 0 1px 0 #fffaf0, 0 2px 6px rgba(120, 90, 20, 0.18);
}
.status-panel .card-facts dt { color: #6b5520; }
.status-panel .card-facts dd { color: #2a2110; }
[data-theme="dark"] .status-panel .card-facts {
  background: linear-gradient(180deg, #4a3b17 0%, #3a2e12 100%); border: 1px solid var(--accent-hover);
  box-shadow: inset 0 1px 0 rgba(255, 230, 160, 0.15), 0 3px 10px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .status-panel .card-facts dt { color: var(--accent-hover); }
[data-theme="dark"] .status-panel .card-facts dd { color: #fff7e0; }
[data-theme="dark"] .status-panel .card-facts dd.yes { color: #9be29f; }
/* …in light gray / white with dark text (user's pick), so it pops off the navy card */
.status-panel .card-facts {
  background: linear-gradient(180deg, #ffffff 0%, #eef1f5 100%); border: 1px solid var(--tint-line);
  box-shadow: inset 0 1px 0 #ffffff, 0 2px 6px rgba(15, 30, 60, 0.15);
}
.status-panel .card-facts dt { color: #5a6578; }
.status-panel .card-facts dd { color: var(--brand-deep); }
.status-panel .card-facts dd.yes { color: #2e7d32; }
[data-theme="dark"] .status-panel .card-facts {
  background: linear-gradient(180deg, #f4f6f9 0%, #dde3eb 100%); border: 1px solid #ffffff;
  box-shadow: inset 0 1px 0 #ffffff, 0 3px 10px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] .status-panel .card-facts dt { color: #4b5668; }
[data-theme="dark"] .status-panel .card-facts dd { color: var(--brand-deep); }
[data-theme="dark"] .status-panel .card-facts dd.yes { color: #2e7d32; }
/* Light mode: the facts box flips to the dark navy (dark mode keeps the light-gray box above) */
:root:not([data-theme="dark"]) .status-panel .card-facts {
  background: linear-gradient(180deg, var(--dark-raise) 0%, var(--brand) 100%); border: 1px solid var(--brand);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 3px 8px rgba(15, 30, 60, 0.3);
}
:root:not([data-theme="dark"]) .status-panel .card-facts dt { color: #c7d3e8; }
:root:not([data-theme="dark"]) .status-panel .card-facts dd { color: #ffffff; }
:root:not([data-theme="dark"]) .status-panel .card-facts dd.yes { color: #9be29f; }

/* Activity header: small pill chips (not stretched across the row) + the "+ Log activity" button */
.activity-panel > .card-head { justify-content: flex-start; }
.activity-panel > .card-head > strong { margin-right: 0.5rem; }
.activity-chips { flex: 0 1 auto; }
.activity-chips .chip { flex: 0 0 auto; width: auto; min-width: 0; }
.activity-panel .log-activity-toggle { margin: 0 0 0 auto; width: auto; padding: 0.2rem 0.8rem; font-size: 0.8rem; }
.activity-form[hidden] { display: none; }

/* Admin setup → Website editor (Quill): keep FAT's button/select styles off the toolbar; roomy editing area */
.website-editor-wrap { margin: 0.5rem 0 0.4rem; background: #fff; color: #1d2330; border-radius: var(--pico-border-radius); }
.website-editor-wrap .ql-toolbar button { width: 28px; height: 24px; margin: 0; padding: 3px 5px; background: none; border: 0; box-shadow: none; }
.website-editor-wrap .ql-toolbar .ql-picker { color: #444; }
.website-editor-wrap .ql-toolbar .ql-picker-label, .website-editor-wrap .ql-toolbar .ql-picker-options { background: #fff; }
.website-editor-wrap .ql-container { font: 16px/1.6 "Segoe UI", system-ui, sans-serif; }
.website-editor-wrap .ql-editor { min-height: 26rem; max-height: 70vh; overflow-y: auto; }
.website-editor-wrap .ql-editor h2 { font-size: 1.6rem; color: var(--brand); }
.website-editor-wrap .ql-editor h3 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.1em; color: #a8853a; }
.website-editor-wrap .ql-editor blockquote { border-left: 4px solid var(--accent); background: #f6f3ea; padding: 0.5rem 0.9rem; }
.slug-field { display: flex; align-items: center; gap: 0.35rem; }
.slug-field input { margin-bottom: 0; }
.website-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 1rem; }
.website-actions > * { width: auto; margin: 0; }
/* Website code editing (Pages | Site styles | Layout, Visual | Code, live preview, history) */
.website-tabs { display: flex; gap: 1.25rem; flex-wrap: wrap; margin: -0.25rem 0 1rem; font-size: 0.9rem; }
.website-tabs a { text-decoration: none; padding-bottom: 0.2rem; border-bottom: 2px solid transparent; }
.website-tabs a[aria-current] { border-bottom-color: var(--pico-primary); font-weight: 600; }
.website-tabs a.muted { margin-left: auto; }
.editor-switch { display: inline-flex; margin: 0.5rem 0 0.4rem; border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); overflow: hidden; }
.editor-switch button { width: auto; margin: 0; padding: 0.25rem 1rem; font-size: 0.85rem; border: 0; border-radius: 0; background: transparent; color: var(--pico-color); }
.editor-switch button[aria-selected="true"] { background: var(--pico-primary-background); color: var(--pico-primary-inverse); }
.CodeMirror { border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); font-size: 0.85rem; line-height: 1.45; }
.website-code-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 1100px) { .website-code-layout { grid-template-columns: minmax(0, 1fr); } }
.code-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.4rem; }
.code-head label.inline { display: flex; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.85rem; }
.code-head select { width: auto; margin: 0; padding: 0.2rem 2rem 0.2rem 0.6rem; font-size: 0.85rem; }
.website-preview-frame { width: 100%; height: 42rem; border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); background: #fff; }
.placeholder-list { display: grid; grid-template-columns: max-content 1fr; gap: 0.15rem 0.75rem; font-size: 0.8rem; margin: 0.4rem 0 0; }
.placeholder-list dd { margin: 0; color: var(--pico-muted-color); }
.website-history { margin: 1.25rem 0 0.75rem; }
.website-history summary { cursor: pointer; font-size: 0.9rem; }
.status-draft { background: #8a8f99; color: #fff; } .status-changes { background: var(--accent); color: var(--brand-deep); }

/* ---- Colour schemes: overrides (app/themes.py lists them; FS Navy & Gold is the default above) ---- */
/* Texas Tech Red & Black. A deep red, not pure #cc0000, so red text and buttons stay readable (about 7:1 contrast);
   in dark mode, text and links use a soft red, because a saturated red on black blurs. */
:root[data-scheme="red-black"] {
  --brand: #a51c30; --brand-hover: #8c1727; --brand-rgb: 165, 28, 48; --brand-deep: #111111;
  --accent: #a51c30; --accent-hover: #8c1727; --accent-rgb: 165, 28, 48; --brand-line: #4a4a4a;
  --tint: #f4e6e8; --tint-2: #ecd5d9; --tint-soft: #fbf4f5; --tint-line: #d8b2b9;
}
:root[data-scheme="red-black"][data-theme="dark"] {
  --accent: #b3263a; --accent-hover: #f28b8b; --accent-rgb: 179, 38, 58;
  --dark-bg: #0b0b0b; --dark-bg-2: #121212; --dark-card: #181818; --dark-raise: #222222; --dark-raise-2: #191919;
  --dark-line: #333333; --pico-primary-inverse: #ffffff;
}
/* The Double T (static/brand/tt-watermark.png, supplied by the user) faint behind the page. It stays put while the
   page scrolls; cards sit on top of it. body is its own layer so the mark paints above the page background. */
:root[data-scheme="red-black"] body { min-height: 100vh; position: relative; z-index: 0; }
:root[data-scheme="red-black"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("/static/brand/tt-watermark.png") center 58% / min(85vw, 58vh) auto no-repeat;  /* whole mark fits: width ≤ 85% of the screen, height ≤ 70% */
  opacity: 0.08;
}
:root[data-scheme="red-black"][data-theme="dark"] body {
  background: radial-gradient(ellipse at top, #1c1c1c 0%, var(--dark-bg) 60%) fixed;
}
:root[data-scheme="red-black"][data-theme="dark"] body::before { opacity: 0.1; }
/* TCU Purple & Silver (Horned Frogs). TCU purple #4d1979 with Horned Frog silver as the accent; in dark mode, buttons
   use a lighter purple (white text about 6:1) and links a soft lavender, since deep purple on near-black is hard to read. */
:root[data-scheme="tcu-purple"] {
  --brand: #4d1979; --brand-hover: #3d1461; --brand-rgb: 77, 25, 121; --brand-deep: #1e0b30;
  --accent: #a3a9ac; --accent-hover: #8a9195; --accent-rgb: 163, 169, 172; --brand-line: #6a3d96;
  --tint: #ece6f3; --tint-2: #e0d6ec; --tint-soft: #f7f4fa; --tint-line: #c6b5da;
}
:root[data-scheme="tcu-purple"][data-theme="dark"] {
  --accent: #7b4fb0; --accent-hover: #c4b0e6; --accent-rgb: 123, 79, 176;
  --dark-bg: #110a1a; --dark-bg-2: #160d22; --dark-card: #1b1129; --dark-raise: #2a1b40; --dark-raise-2: #20142f;
  --dark-line: #34244b; --pico-primary-inverse: #ffffff;
}
/* The TCU logo with the Horned Frog (static/brand/tcu-watermark.png, supplied by the user, black background removed)
   faint behind the page, the same way as the Texas Tech Double T. */
:root[data-scheme="tcu-purple"] body { min-height: 100vh; position: relative; z-index: 0; }
:root[data-scheme="tcu-purple"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("/static/brand/tcu-watermark.png") center 58% / min(85vw, 75vh) auto no-repeat;
  opacity: 0.08;
}
:root[data-scheme="tcu-purple"][data-theme="dark"] body {
  background: radial-gradient(ellipse at top, #24163a 0%, var(--dark-bg) 60%) fixed;
}
:root[data-scheme="tcu-purple"][data-theme="dark"] body::before { opacity: 0.12; }
/* Slate & Teal */
:root[data-scheme="slate-teal"] {
  --brand: #2f4858; --brand-hover: #3d5d71; --brand-rgb: 47, 72, 88; --brand-deep: #18242c;
  --accent: #2bb3a3; --accent-hover: #4fd1c1; --accent-rgb: 43, 179, 163; --brand-line: #2f5563;
  --tint: #e3ecef; --tint-2: #d6e2e6; --tint-soft: #f2f7f8; --tint-line: #b6c9cf;
}
:root[data-scheme="slate-teal"][data-theme="dark"] {
  --dark-bg: #0e1a1f; --dark-bg-2: #12222a; --dark-card: #152830; --dark-raise: #1c3540; --dark-raise-2: #142a33;
  --dark-line: #23404b;
}
/* Forest & Sand */
:root[data-scheme="forest-sand"] {
  --brand: #2e5a3a; --brand-hover: #3b7149; --brand-rgb: 46, 90, 58; --brand-deep: #16271b;
  --accent: #d8c18f; --accent-hover: #e8d4a8; --accent-rgb: 216, 193, 143; --brand-line: #2f5a3c;
  --tint: #e4ede6; --tint-2: #d6e3d9; --tint-soft: #f3f8f4; --tint-line: #b5cbbb;
}
:root[data-scheme="forest-sand"][data-theme="dark"] {
  --dark-bg: #0d1a12; --dark-bg-2: #112217; --dark-card: #14291c; --dark-raise: #1b3524; --dark-raise-2: #142a1d;
  --dark-line: #23402c;
}
/* Burnt Orange & Charcoal */
:root[data-scheme="orange-charcoal"] {
  --brand: #bf5700; --brand-hover: #a34a00; --brand-rgb: 191, 87, 0; --brand-deep: #222222;
  --accent: #e87722; --accent-hover: #f39a55; --accent-rgb: 232, 119, 34; --brand-line: #4a4a4a;
  --tint: #f6e9df; --tint-2: #eedbcc; --tint-soft: #fbf4ef; --tint-line: #e0c2aa;
}
:root[data-scheme="orange-charcoal"][data-theme="dark"] {
  --dark-bg: #121212; --dark-bg-2: #181818; --dark-card: #1e1e1e; --dark-raise: #272727; --dark-raise-2: #1e1e1e;
  --dark-line: #333333; --pico-primary-inverse: #ffffff;
}

/* Colour scheme picker (pop-up from the account menu) */
.scheme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.6rem; margin: 0.5rem 0 1rem; }
.scheme-grid button { width: 100%; margin: 0; padding: 0.6rem; display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem;
  background: var(--pico-card-background-color); color: var(--pico-color); border: 2px solid var(--pico-muted-border-color); text-align: left; }
.scheme-grid button[aria-pressed="true"] { border-color: var(--pico-primary); box-shadow: 0 0 0 2px var(--pico-primary-focus); }
.scheme-swatches { display: flex; gap: 0.25rem; }
.scheme-swatches span { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.2); }

/* Prospect board: a card whose next task is overdue stands out (red edge + red tint), not just the dot */
.deal-card.overdue {
  border: 1px solid #c62828; border-left: 5px solid #c62828; margin-top: 0.8rem;  /* room for the badge above */
  background: linear-gradient(90deg, #fdecea 0%, #fff5f4 100%);
  box-shadow: 0 2px 8px rgba(198, 40, 40, 0.25);
}
.deal-card { position: relative; }
.deal-card.overdue::after {  /* small "Overdue" badge sitting on the card's top edge, clear of the name */
  content: "Overdue"; position: absolute; top: -0.55rem; right: 0.6rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: #fff; background: #c62828; padding: 0.05rem 0.4rem; border-radius: 1rem;
}
[data-theme="dark"] .deal-card.overdue {
  border-color: #ef5350; border-left-color: #ef5350;
  background: linear-gradient(90deg, #4a1c1c 0%, #3a1a1a 100%);
  box-shadow: 0 2px 10px rgba(239, 83, 80, 0.3);
}
[data-theme="dark"] .deal-card.overdue::after { background: #ef5350; color: #1a0b0b; }

/* Task rows: the title starts the task's work; ✎ opens the task itself */
.task-body .task-edit { margin-left: 0.35rem; text-decoration: none; font-size: 0.85em; color: var(--pico-muted-color); }
.task-body .task-edit:hover { color: var(--pico-primary); }

/* Pop-ups: the header's close button is a small ✕ at the top right (it lost Pico's icon inside #popup-body) */
#popup-body article > header { position: relative; padding-right: 2.5rem; }
#popup-body article > header > button[rel="prev"] {
  position: absolute; top: 0.5rem; right: 0.6rem; width: 2rem; height: 2rem; margin: 0; padding: 0;
  background: none; border: 0; box-shadow: none; color: var(--pico-muted-color); font-size: 1.1rem; line-height: 2rem;
}
#popup-body article > header > button[rel="prev"]::before { content: "✕"; }
#popup-body article > header > button[rel="prev"]:hover { color: var(--pico-color); }

/* Log call outcome: "Mark the task done too" — checkbox, then the label with the task's name under it */
.outcome-popup .task-done-too { display: flex; align-items: flex-start; gap: 0.6rem; margin: 0.4rem 0 0.8rem; }
.outcome-popup .task-done-too input { flex: 0 0 auto; margin: 0.15rem 0 0; }
.outcome-popup .task-done-too small { display: block; margin-top: 0.15rem; }

/* My settings: colour scheme choices are radio cards */
.my-settings { max-width: 52rem; }
.scheme-choice { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.6rem; margin: 0; cursor: pointer;
  border: 2px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); background: var(--pico-card-background-color); }
.scheme-choice input { position: absolute; opacity: 0; pointer-events: none; }
.scheme-choice:has(input:checked) { border-color: var(--pico-primary); box-shadow: 0 0 0 2px var(--pico-primary-focus); }
.scheme-choice:has(input:focus-visible) { outline: 2px solid var(--pico-primary); }

/* Email pop-up: Attach from library (marketing collateral) */
.attach-library { margin: 0.4rem 0 0.8rem; }
.attach-library > summary { cursor: pointer; font-size: 0.9rem; }
.attach-choice { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0.35rem 0; font-size: 0.9rem; }
.attach-choice input { flex: 0 0 auto; margin-top: 0.2rem; }
.attach-choice small { display: block; }

/* Admin setup → Integrations → FS Minerals API: the rendered guide (Markdown tables and code, in either theme) */
.api-guide h1 { font-size: 1.5rem; }
.api-guide h2 { font-size: 1.25rem; margin-top: 2rem; padding-top: 0.75rem; border-top: 1px solid var(--pico-muted-border-color); }
.api-guide h3 { font-size: 1.05rem; margin-top: 1.5rem; }
.api-guide table { display: block; overflow-x: auto; font-size: 0.85rem; margin-bottom: 1rem; }
.api-guide th, .api-guide td { padding: 0.35rem 0.55rem; vertical-align: top; }
.api-guide pre { background: var(--pico-code-background-color); color: var(--pico-code-color);
  border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius);
  padding: 0.75rem 1rem; overflow-x: auto; font-size: 0.8rem; line-height: 1.45; }
.api-guide pre code { background: none; padding: 0; font-size: inherit; color: inherit; white-space: pre; }
.api-guide td code, .api-guide li code, .api-guide p code { font-size: 0.85em; padding: 0.05rem 0.3rem; overflow-wrap: anywhere; }

/* ---- Phones (under 768px): the menu folds behind ☰, everything fits the screen width ---- */
.menu-toggle-item { display: none !important; }
.menu-toggle { width: 2.6rem; margin: 0; padding: 0.3rem 0; font-size: 1.2rem; line-height: 1; }
@media (max-width: 767px) {
  body > header nav { flex-wrap: wrap; }
  body > header nav > ul:first-child { flex: 1 0 100%; justify-content: space-between; }
  .menu-toggle-item { display: block !important; }
  .main-menu { display: none !important; }
  body > header nav.menu-open .main-menu {
    display: flex !important; flex: 1 0 100%; flex-direction: column; align-items: stretch;
    margin: 0 0 0.5rem; padding: 0;
  }
  .main-menu > li { width: 100%; padding: 0; }
  .main-menu > li > a { display: block; margin: 0; padding: 0.7rem 0.25rem; border-bottom: 1px solid var(--pico-muted-border-color); }
  .main-menu > li > .theme-toggle { margin: 0.6rem 0 0.2rem; }
  .main-menu details.dropdown { margin: 0; }
  .main-menu details.dropdown > summary { padding: 0.7rem 0.25rem; }
  .main-menu details.dropdown > summary + ul {
    position: static; min-width: 0; width: 100%; margin: 0; box-shadow: none; direction: ltr;
  }

  /* Prospect page: Call / Text / Email and Status first, then Activity, Tasks + owners, then the details */
  .prospect-layout { gap: 0.9rem; }
  .prospect-side { display: contents; }
  .prospect-side > .side-actions { order: 1; }
  .prospect-side > .status-card { order: 2; margin: 0; }
  .prospect-main { order: 3 !important; }
  .prospect-tools { order: 4; }
  .prospect-side > article:not(.status-card) { order: 5; margin: 0; }

  /* Prospects board: about a screen per column, snapping one at a time */
  .board { scroll-snap-type: x mandatory; }
  .board-column { flex: 0 0 85vw; scroll-snap-align: start; }

  .reach-buttons { flex-wrap: wrap; }
  .prospect-page-title .head-actions { flex-direction: row; flex-wrap: wrap; gap: 0.4rem; }
  .prospect-page-title .head-actions > * { margin: 0; width: auto; }
  .status-filters { flex-wrap: wrap; }
  .status-filters > * { flex: 1 1 9rem; }

  /* Mineral owners list: name and Call / Text only (tap the name for the rest) */
  .owners-table th:nth-child(n+2):not(:nth-child(7)),
  .owners-table td:nth-child(n+2):not(:nth-child(7)) { display: none; }
}
.media-thumb img, .media-thumb video { width: 96px; height: 54px; object-fit: cover; border-radius: 6px; background: #0b1526; display: block; }
.import-card { border: 1px dashed var(--pico-muted-border-color); padding: 0.8rem 1rem; margin: 0 0 1rem; }
.import-card form { display: inline; } .import-card button { width: auto; margin: 0.4rem 0.4rem 0 0; }

/* Search Team Review: the prospect is with the search team (app/search_team.py) */
.searching-banner { display: flex; align-items: baseline; gap: 0.6rem; margin: 0 0 1rem; padding: 0.6rem 0.9rem;
  border-radius: var(--pico-border-radius); color: #fff; font-weight: 700;
  background: repeating-linear-gradient(135deg, var(--brand) 0 14px, var(--brand-hover) 14px 28px);
  background-size: 40px 40px; animation: searching-stripes 1.2s linear infinite; }
.searching-banner small { font-weight: 400; opacity: 0.9; }
.deal-card.searching { opacity: 0.55; position: relative; }
.deal-card.searching::before { content: "Searching…"; position: absolute; top: -0.55rem; left: 0.6rem; padding: 0 0.45rem;
  border-radius: 0.6rem; color: #fff; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.05em;
  background: repeating-linear-gradient(135deg, var(--brand) 0 8px, var(--brand-hover) 8px 16px);
  background-size: 22px 22px; animation: searching-stripes 1.2s linear infinite; }
.deal-card.searching[data-search-status="picked_up"]::before { content: "Search team is on it"; }
[aria-disabled="true"] { pointer-events: none; opacity: 0.5; }
@keyframes searching-stripes { from { background-position: 0 0; } to { background-position: 40px 0; } }
@media (prefers-reduced-motion: reduce) { .searching-banner, .deal-card.searching::before { animation: none; } }

/* Production Status: the card, then arrows out to two boxes (last update, next action) that grow in to the right,
   one after the other, like an automation running. They animate whenever a prospect is picked (HTMX swaps them in). */
.status-layout { grid-template-columns: minmax(16rem, 24rem) minmax(0, 1fr); }
.status-stage { display: flex; align-items: flex-start; gap: 0; }
.status-stage > .status-panel { flex: 1 1 26rem; min-width: 0; max-width: 34rem; }
.status-flow { display: flex; align-items: flex-start; flex: 2 1 30rem; min-width: 0; padding-top: 1.6rem; }
.flow-arrow {
  flex: 0 0 2.6rem; width: 2.6rem; height: 1rem; margin-top: 1.1rem; overflow: visible;
  fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}
.flow-arrow path { stroke-dasharray: 48; stroke-dashoffset: 48; animation: flow-draw 0.35s ease-out forwards; }
.flow-arrow path + path { animation-delay: 0.3s; animation-duration: 0.15s; }
.flow-box {
  flex: 1 1 0; min-width: 0; max-width: 19rem; padding: 0.8rem 0.9rem; font-size: 0.85rem;
  border: 1px solid var(--tint-line); border-radius: calc(var(--pico-border-radius) * 1.5);
  background: linear-gradient(180deg, #ffffff 0%, #eef2f8 100%);
  box-shadow: 0 2px 3px rgba(15, 30, 60, 0.10), 0 10px 24px rgba(15, 30, 60, 0.18), inset 0 1px 0 #ffffff;
  transform-origin: left center; opacity: 0;
  animation: flow-grow 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.15) forwards;
}
.flow-box > header { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.45rem; font-weight: 700;
  font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand); }
.flow-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--brand);
  box-shadow: 0 0 0 0 rgba(15, 30, 60, 0.45); animation: flow-pulse 1.6s ease-out 1.4s 2; }
.flow-main { margin: 0 0 0.25rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.flow-when { color: var(--pico-muted-color); }
.flow-type { display: inline-block; padding: 0 0.4rem; margin-right: 0.15rem; border-radius: 0.6rem; font-size: 0.72rem;
  background: var(--brand); color: #fff; vertical-align: 0.1em; }
.flow-overdue { color: #b3261e; }
.flow-box.is-overdue { border-color: #d9534f; }
.flow-sub { margin: 0.7rem 0 0.3rem; font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--pico-muted-color); }
.flow-list { list-style: none; margin: 0; padding: 0; }
.flow-list li { list-style: none; margin: 0 0 0.3rem; line-height: 1.3; overflow-wrap: anywhere; }
.flow-list small { display: block; margin-left: 1.1rem; color: var(--pico-muted-color); }
.flow-check { display: inline-block; width: 0.9rem; color: #2e7d32; font-weight: 700; }
.flow-check.upcoming { color: var(--brand); }
/* one after the other: arrow, box, arrow, box */
.status-flow > :nth-child(1) path { animation-delay: 0.1s; }
.status-flow > :nth-child(1) path + path { animation-delay: 0.4s; }
.status-flow > :nth-child(2) { animation-delay: 0.45s; }
.status-flow > :nth-child(3) path { animation-delay: 0.85s; }
.status-flow > :nth-child(3) path + path { animation-delay: 1.15s; }
.status-flow > :nth-child(4) { animation-delay: 1.2s; }
@keyframes flow-draw { to { stroke-dashoffset: 0; } }
@keyframes flow-grow {
  0% { opacity: 0; transform: translateX(-0.75rem) scale(0.55); clip-path: inset(0 100% 0 0 round 12px); }
  60% { opacity: 1; clip-path: inset(0 0 0 0 round 12px); }
  100% { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 12px); }
}
@keyframes flow-pulse { 0% { box-shadow: 0 0 0 0 rgba(15, 30, 60, 0.45); } 100% { box-shadow: 0 0 0 0.6rem rgba(15, 30, 60, 0); } }
[data-theme="dark"] .flow-arrow { stroke: var(--accent); }
[data-theme="dark"] .flow-box {
  border-color: var(--brand-line);
  background: linear-gradient(180deg, var(--dark-raise) 0%, var(--dark-raise-2) 100%);
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.55), 0 12px 28px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(var(--accent-rgb), 0.15),
              inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .flow-box > header { color: var(--accent); }
[data-theme="dark"] .flow-dot { background: var(--accent); }
[data-theme="dark"] .flow-type { background: var(--accent); color: var(--brand-deep); }
[data-theme="dark"] .flow-check.upcoming { color: var(--accent); }
[data-theme="dark"] .flow-check { color: #9be29f; }
[data-theme="dark"] .flow-overdue { color: #ff8a80; }
[data-theme="dark"] .flow-box.is-overdue { border-color: #ff8a80; }
@media (prefers-reduced-motion: reduce) {
  .flow-box, .flow-arrow path, .flow-dot { animation: none; opacity: 1; stroke-dashoffset: 0; clip-path: none; }
}
/* Narrower screens: the boxes drop under the card, and the arrows point down */
@media (max-width: 1400px) {
  .status-stage { flex-direction: column; align-items: stretch; }
  .status-stage > .status-panel { flex-basis: auto; }
  .status-flow { flex-direction: column; align-items: center; padding-top: 0; }
  .flow-arrow { transform: rotate(90deg); margin: 0.6rem 0; }
  .flow-box { flex: 0 0 auto; width: 100%; max-width: none; transform-origin: top center; }
}

/* Production Status: "Updated since" filter, and prospects that came in since then in green with a New tag */
.status-since { display: flex; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.85rem; white-space: nowrap; }
.status-since input { margin: 0; width: auto; }
.status-since-note { margin: -0.5rem 0 1rem; font-size: 0.88rem; color: var(--pico-muted-color); }
.status-new-tag {
  display: inline-block; padding: 0.05rem 0.45rem; border-radius: 0.7rem; vertical-align: 0.1em;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  background: #1f8a4c; color: #fff;
}
.status-list li.is-new > a { background: #e3f5ea; box-shadow: inset 3px 0 0 #1f8a4c; }
.status-list li.is-new > a:hover { background: #d2eedd; }
.status-list li.is-new > a[aria-current] { background: #1f8a4c; color: #fff; box-shadow: 0 2px 6px rgba(15, 60, 30, 0.35); }
.status-list li.is-new > a[aria-current] .status-new-tag { background: #fff; color: #1f8a4c; }
[data-theme="dark"] .status-new-tag { background: #3fbf74; color: #08240f; }
[data-theme="dark"] .status-list li.is-new > a { background: rgba(63, 191, 116, 0.16); box-shadow: inset 3px 0 0 #3fbf74; }
[data-theme="dark"] .status-list li.is-new > a:hover { background: rgba(63, 191, 116, 0.24); }
[data-theme="dark"] .status-list li.is-new > a[aria-current] { background: #3fbf74; color: #08240f; }
[data-theme="dark"] .status-list li.is-new > a[aria-current] small { color: #08240f; }
[data-theme="dark"] .status-list li.is-new > a[aria-current] .status-new-tag { background: #08240f; color: #3fbf74; }

/* Admin setup → Who's online */
.online-banner { padding: 0.6rem 0.85rem; border-radius: var(--pico-border-radius); font-weight: 600; margin-bottom: 1rem; }
.online-banner.quiet { background: #e3f5ea; color: #14532d; }
.online-banner.busy { background: #fdecea; color: #7f1d1d; }
.online-banner.idle { background: #fff6dc; color: #6b4e00; }
[data-theme="dark"] .online-banner.quiet { background: rgba(63, 191, 116, 0.16); color: #c9f2d6; }
[data-theme="dark"] .online-banner.busy { background: rgba(255, 138, 128, 0.16); color: #ffd6d1; }
[data-theme="dark"] .online-banner.idle { background: rgba(255, 196, 0, 0.14); color: #ffe9a8; }
.presence-dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #9aa3b2; vertical-align: 0.05em; }
.presence-online .presence-dot { background: #1f8a4c; box-shadow: 0 0 0 0 rgba(31, 138, 76, 0.5); animation: presence-pulse 2s infinite; }
.presence-idle .presence-dot { background: #e0a800; }
.presence-offline td { color: var(--pico-muted-color); }
@keyframes presence-pulse { 70% { box-shadow: 0 0 0 0.45rem rgba(31, 138, 76, 0); } 100% { box-shadow: 0 0 0 0 rgba(31, 138, 76, 0); } }
@media (prefers-reduced-motion: reduce) { .presence-online .presence-dot { animation: none; } }

/* Admin setup → Users: Remove (red), the Removed users list, and the "was removed" note */
button.danger, [role="button"].danger { --pico-background-color: #b3261e; --pico-border-color: #b3261e; --pico-color: #fff; }
button.outline.danger { --pico-background-color: transparent; --pico-color: #b3261e; }
button.outline.danger:hover { --pico-background-color: #b3261e; --pico-color: #fff; }
[data-theme="dark"] button.outline.danger { --pico-color: #ff8a80; --pico-border-color: #ff8a80; }
.removed-users { margin-top: 1rem; }
.removed-users > summary { font-weight: 600; font-size: 0.9rem; }
form.inline { display: inline; margin: 0; }
.notice { padding: 0.5rem 0.75rem; border-radius: var(--pico-border-radius); background: #e3f5ea; color: #14532d; font-size: 0.9rem; }
[data-theme="dark"] .notice { background: rgba(63, 191, 116, 0.16); color: #c9f2d6; }
.remove-user select { margin-top: 0.3rem; }