/* Flat Out CRM - the one and only stylesheet.
   Mobile first. Every layout rule starts at 390px and widens from there. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  /* Flat Out Automations brand palette.
     Sampled straight from the logo sheet, not eyeballed.
       Torch  #FF4D0F   the orange
       Ink    #0B0B0C   the black
       Paper  #F7F6F3   the card white
       Canvas #E9E8E4   the page grey
     Contrast checked: ink on torch is 5.9:1, so primary buttons use ink text
     on orange, the same way the brand's own phone pill does. White on torch
     is only 3.3:1 and is never used for small text. Orange on paper is 3.1:1,
     so links stay ink and orange is kept for accents and actions. */
  --torch: #ff4d0f;
  --torch-deep: #d63d05;
  --ink: #0b0b0c;
  --ink-soft: #55606d;
  --ink-faint: #68727e;
  --paper: #f7f6f3;
  --canvas: #e9e8e4;
  --line: #ddd9d2;
  --line-soft: #eae7e1;
  /* Surfaces have to be far enough apart to read as separate things. These
     two used to be #f7f6f3 on #e9e8e4, a four percent difference, so every
     card, panel and column dissolved into the page behind it and the whole
     app looked like one flat field of beige. White on a warmer ground, with
     the shadows below doing the lifting, is the same palette with the
     hierarchy put back. */
  --surface: #ffffff;
  --bg: #e6e3dd;
  /* Two steps of elevation, both warm rather than grey, so a raised card
     still belongs to the paper palette instead of floating in neutral grey. */
  --shadow-sm: 0 1px 2px rgba(28, 22, 12, 0.05), 0 1px 3px rgba(28, 22, 12, 0.06);
  --shadow-md: 0 2px 4px rgba(28, 22, 12, 0.05), 0 6px 16px rgba(28, 22, 12, 0.09);
  --accent: #0b0b0c;
  --accent-ink: #f7f6f3;
  --danger: #8a2b12;
  --ok: #1f5f3f;
  --warn: #7a5a12;
  --radius: 10px;
  --gap: 16px;
}

html {
  -webkit-text-size-adjust: 100%;
}

/* .btn sets display:inline-block, which beats the browser default for
   [hidden]. Without this, hiding a button with JS does nothing. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

a {
  color: var(--ink);
  text-decoration-color: var(--torch);
  text-underline-offset: 2px;
}

a:hover {
  color: var(--torch-deep);
}

h1,
h2,
h3 {
  line-height: 1.25;
  margin: 0;
}

/* ------------------------------------------------------------------- frame */

/* The sidebar on the left, everything else in the shell beside it. On a
   phone the sidebar leaves the flow and becomes a drawer, so the shell gets
   the full width. min-width: 0 is what keeps a wide table scrolling inside
   its own box: without it a flex child grows to fit its widest content and
   the whole page scrolls sideways. */
.frame {
  display: flex;
  min-height: 100vh;
}

.shell {
  flex: 1 1 auto;
  min-width: 0;
}

/* ----------------------------------------------------------------- sidebar */

.side {
  --side-w: 236px;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  width: 264px;
  max-width: 85vw;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  transform: translateX(-100%);
  /* Hidden as well as moved while closed. A drawer that is only off screen
     still takes focus, and a keyboard user tabs through links they cannot
     see. */
  visibility: hidden;
  transition: transform 0.2s ease, visibility 0.2s;
}

/* Visibility flips at once on the way in, so the first link can take focus
   the moment the drawer opens. On the way out the base rule's delay keeps it
   visible while it slides away. */
.side.is-open {
  transform: none;
  visibility: visible;
  transition: transform 0.2s ease;
}

.side-scrim {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(11, 11, 12, 0.45);
}

/* The lockup is inline-flex, so centring the text centres the whole mark. */
.side-head {
  padding: 16px 16px 14px;
  border-bottom: 1px solid #1f2024;
  text-align: center;
}

.side-nav {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 6px 10px 10px;
}

.side-heading {
  margin: 16px 10px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7d8189;
}

.side-link {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  margin-top: 2px;
  padding: 9px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #cfcdc7;
  font: inherit;
  font-size: 14.5px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.side-link:hover {
  background: #1c1d21;
  color: #fff;
}

.side-link.is-current {
  background: var(--torch);
  color: var(--ink);
  font-weight: 700;
}

.icon {
  flex: 0 0 auto;
  display: block;
}

.side-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.side-foot {
  padding: 8px 10px 12px;
  border-top: 1px solid #1f2024;
}

.side-foot form {
  margin: 0;
}

/* Collapsing only means something beside a page, so the phone drawer never
   shows the button. */
.side-collapse {
  display: none;
}

/* The lockup: mark, FLATOUT, torch full stop, then the app name. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--paper);
  text-decoration: none;
  margin-right: auto;
  min-width: 0;
}

.brand .mark {
  flex: 0 0 auto;
  display: block;
}

.brand-word {
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.brand-dot {
  color: var(--torch);
}

/* ------------------------------------------------------------------ topbar */

/* Light, so the dark sidebar is the one strong edge on the screen. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  padding: 10px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(11, 11, 12, 0.03), 0 2px 10px rgba(11, 11, 12, 0.04);
}

.topbar-brand {
  margin-right: auto;
  min-width: 0;
}

.topbar .brand {
  color: var(--ink);
}

/* "+ New": a <details>, so the list opens with no script and hangs under the
   button without pushing anything else in the bar. */
.new-menu {
  position: relative;
}

.new-menu summary {
  list-style: none;
  white-space: nowrap;
}

.new-menu summary::-webkit-details-marker {
  display: none;
}

.new-menu-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 25;
  min-width: 190px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

.new-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 6px;
  color: var(--ink);
  font-size: 15px;
  text-decoration: none;
}

.new-menu-item:hover,
.new-menu-item:focus-visible {
  background: var(--paper);
  color: var(--ink);
}

/* On a desktop the search box leads and the button sits at the far right. */
@media (min-width: 900px) {
  .new-menu {
    order: 1;
    margin-left: auto;
  }
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

@media (min-width: 900px) {
  /* Back in the flow beside the shell, and pinned while the page scrolls. */
  .side {
    position: sticky;
    /* The drawer's bottom: 0 would fight top: 0 once sticky. */
    bottom: auto;
    flex: 0 0 var(--side-w);
    width: var(--side-w);
    max-width: none;
    height: 100vh;
    transform: none;
    visibility: visible;
    transition: flex-basis 0.18s ease, width 0.18s ease;
  }
  .side-scrim,
  .nav-toggle,
  .topbar-brand {
    display: none;
  }
  .topbar {
    padding: 12px 28px;
  }
  .side-collapse {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 8px;
    padding: 6px 0;
    border: 1px solid #26272b;
    border-radius: 8px;
    background: transparent;
    color: #8d8f95;
    cursor: pointer;
  }
  .side-collapse:hover {
    background: #1c1d21;
    color: #fff;
  }

  /* Collapsed to icons. Headings become thin rules so the groups still read
     as groups, and the chevron turns round to point the way it will open. */
  .nav-mini .side {
    --side-w: 68px;
  }
  .nav-mini .side-label,
  .nav-mini .brand-word {
    display: none;
  }
  .nav-mini .side-heading {
    height: 1px;
    margin: 10px 6px;
    overflow: hidden;
    font-size: 0;
    background: #26272b;
  }
  .nav-mini .side-head {
    padding: 16px 0 14px;
  }
  .nav-mini .side-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
  }
  .nav-mini .side-collapse .icon {
    transform: rotate(180deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .side,
  .side.is-open {
    transition: none;
  }
}

/* A printed record is the record, not the app around it. */
@media print {
  .side,
  .side-scrim,
  .topbar {
    display: none;
  }
}

/* -------------------------------------------------------------------- page */

.page {
  max-width: 1140px;
  margin: 0 auto;
  padding: 20px 16px 56px;
}

.page-title {
  font-size: 22px;
  margin-bottom: 16px;
}

/* ------------------------------------------------------------------- cards */

/* Two across even at 390px, so eight cards are two screens instead of four. */
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

@media (min-width: 520px) {
  .cards {
    gap: var(--gap);
  }
}

@media (min-width: 960px) {
  .cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

.card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  text-decoration: none;
  color: inherit;
}

a.card:hover {
  border-color: var(--torch);
}

.card-label {
  margin: 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.card-value {
  margin: 6px 0 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

@media (min-width: 520px) {
  .card-value {
    font-size: 30px;
  }
}

.card-value.is-zero {
  color: var(--ink-faint);
  font-weight: 600;
}

/* ------------------------------------------------------------------ panels */

.panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

@media (min-width: 820px) {
  .panels {
    grid-template-columns: repeat(2, 1fr);
  }
}

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
}

.panel-title {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  margin-bottom: 12px;
}

/* -------------------------------------------------------------------- list */

.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
}

.list-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.list-main {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.list-meta {
  grid-column: 1 / 2;
  font-size: 13px;
  color: var(--ink-soft);
}

.pill {
  grid-row: 1 / 3;
  grid-column: 2 / 3;
  align-self: center;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eceae5;
  color: #3d4854;
  white-space: nowrap;
}

.pill-high {
  background: #ffe6dc;
  color: var(--danger);
}

.pill-medium {
  background: #f6eeda;
  color: var(--warn);
}

.pill-low {
  background: #e2efe7;
  color: var(--ok);
}

.pill-call,
.pill-meeting,
.pill-onboarding,
.pill-followup {
  background: #ffe6dc;
  color: var(--danger);
}

/* ------------------------------------------------------------ empty states */

.empty {
  margin: 8px 0 0;
  color: var(--ink-faint);
  font-size: 14px;
}

/* ------------------------------------------------------------------- forms */

label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 4px;
}

/* Every text-like input, including <input> with no type attribute, which
   defaults to text but does not match input[type="text"]. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select,
textarea {
  width: 100%;
  font: inherit;
  font-size: 16px; /* 16px stops iOS zooming on focus */
  color: var(--ink);
  background: #fffefc;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 14px;
}

input:focus,
select:focus,
textarea:focus,
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--torch);
  outline-offset: 1px;
  border-color: var(--torch);
}

.btn {
  display: inline-block;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  padding: 10px 16px;
  cursor: pointer;
  text-decoration: none;
}

.btn-primary {
  background: var(--torch);
  border-color: var(--torch);
  color: var(--ink);
  font-weight: 700;
}

.btn:hover {
  filter: brightness(0.96);
}

.form-error {
  background: #ffe6dc;
  border: 1px solid #f5b9a4;
  color: var(--danger);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 0 0 14px;
  font-size: 14px;
}

/* ------------------------------------------------------------------- login */

body.bare {
  background: var(--ink);
}

.login-wrap {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--paper);
  border-radius: 14px;
  padding: 28px 24px;
  /* A thin torch edge along the top, echoing the brand banner. */
  border-top: 4px solid var(--torch);
}

.login-brand {
  margin-bottom: 22px;
}

.login-brand .brand {
  color: var(--ink);
  gap: 10px;
}



.login-brand .brand-word {
  font-size: 22px;
}

.login-card .btn {
  width: 100%;
}

.login-lead {
  margin: 0 0 16px;
  font-size: 14.5px;
  color: var(--ink-soft);
}

.login-alt {
  margin: 16px 0 0;
  text-align: center;
  font-size: 14px;
}

/* -------------------------------------------------------------- two factor */

/* The QR code beside the steps on a desktop, above them on a phone. */
.tf-setup {
  display: grid;
  gap: 20px 32px;
}

@media (min-width: 720px) {
  .tf-setup {
    grid-template-columns: 232px minmax(0, 1fr);
    align-items: start;
  }
}

.tf-qr {
  text-align: center;
  font-size: 14px;
}

.qr {
  display: block;
  width: 100%;
  max-width: 232px;
  height: auto;
  margin: 0 auto 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.tf-step {
  margin: 0 0 6px;
  font-weight: 700;
}

.tf-hint {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--ink-soft);
}

/* Both are read off the screen by a person: a fixed width face, set in a box
   that says this is the thing to copy. One click selects the whole key. */
.secret-key {
  margin: 0 0 20px;
  padding: 10px 14px;
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: 8px;
  font: 600 17px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.08em;
  overflow-wrap: anywhere;
  user-select: all;
}

.recovery-codes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin: 18px 0 22px;
  padding: 0;
  list-style: none;
  counter-reset: code;
}

.recovery-codes li {
  counter-increment: code;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
  font: 600 16px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: 0.04em;
}

.recovery-codes li::before {
  content: counter(code);
  min-width: 1.1em;
  font: 700 12px/1 system-ui, sans-serif;
  color: var(--ink-faint);
}

@media print {
  .recovery-actions {
    display: none;
  }
}

/* ------------------------------------------------------------------ tables */
/* Wide tables scroll inside their own box. The page never scrolls sideways. */

.table-scroll {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th,
td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

/* On a phone the table keeps its natural width and its box scrolls sideways.
   Wrapping at this width shreds every cell into one letter per line. */
th,
td {
  white-space: nowrap;
}

th {
  background: #efeee9;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  position: sticky;
  top: 0;
}

tbody tr:last-child td {
  border-bottom: 0;
}

tbody tr:hover {
  background: #efeee9;
}

/* Wide enough to fit: let long emails wrap rather than force a scrollbar. */
@media (min-width: 900px) {
  td {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

/* ---------------------------------------------------------- page head bar */

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.page-head .page-title {
  margin-bottom: 0;
  margin-right: auto;
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-actions .btn {
  font-size: 14px;
  padding: 8px 12px;
}

.crumb {
  margin: -6px 0 16px;
  font-size: 14px;
  color: var(--ink-soft);
}

.muted {
  color: var(--ink-faint);
}

/* -------------------------------------------------------------- filter bar */

.filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px 4px;
  margin-bottom: 16px;
}

@media (min-width: 640px) {
  .filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .filter-search {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1000px) {
  .filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.filters label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.filter-actions {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding-bottom: 14px;
}

.filter-actions .btn {
  flex: 1;
}

@media (min-width: 640px) {
  .filter-actions .btn {
    flex: 0 0 auto;
  }
}

/* ------------------------------------------------------------ table extras */

.col-check {
  width: 36px;
  padding-right: 0;
}

.col-check input {
  margin: 0;
  width: 18px;
  height: 18px;
}

tbody tr[data-href] {
  cursor: pointer;
}

.th-sort {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.th-sort:hover,
.th-sort.is-current {
  color: var(--torch-deep);
}

/* ---------------------------------------------------------------- bulk bar */

.bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 0 0;
}

.bulk-count {
  font-size: 14px;
  color: var(--ink-soft);
  margin-right: auto;
}

.bulk-label {
  margin-bottom: 0;
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
}

.bulk-bar select {
  width: auto;
  margin-bottom: 0;
  padding: 8px 10px;
  font-size: 14px;
}

.bulk-bar .btn {
  font-size: 14px;
  padding: 8px 12px;
}

/* ------------------------------------------------------------------- pager */

.pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.pager-count {
  margin: 0 auto 0 0;
  font-size: 14px;
  color: var(--ink-soft);
}

.pager-links {
  display: flex;
  gap: 8px;
}

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

.btn.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* ------------------------------------------------------------ detail pages */

.detail {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
  align-items: start;
}

@media (min-width: 900px) {
  .detail {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }
}

.detail-side {
  display: grid;
  gap: var(--gap);
}

.cards-3 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 760px) {
  .cards-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------------ record forms */

.field-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 14px;
}

@media (min-width: 620px) {
  .field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.record-form textarea {
  resize: vertical;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

/* ------------------------------------------------------------ tag checkbox */

.tag-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.tag-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 0;
  font-weight: 500;
  font-size: 14px;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px 6px 8px;
  cursor: pointer;
}

.tag-check input {
  margin: 0;
  width: 16px;
  height: 16px;
}

.tag-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

/* -------------------------------------------------------------- timeline */

.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}

.timeline li {
  padding: 8px 0 8px 14px;
  border-left: 2px solid var(--line);
  position: relative;
}

.timeline li::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
}

.timeline-when {
  display: block;
  font-size: 12px;
  color: var(--ink-faint);
}

.timeline-what {
  font-weight: 600;
  font-size: 14px;
  text-transform: capitalize;
}

.timeline-detail {
  display: block;
  font-size: 14px;
  color: var(--ink-soft);
}

/* ----------------------------------------------------------- status pills */

.pill-lead,
.pill-new {
  background: #eceae5;
  color: #3d4854;
}

.pill-prospect,
.pill-contacted {
  background: #ffe6dc;
  color: var(--danger);
}

.pill-client,
.pill-customer,
.pill-qualified,
.pill-won {
  background: #e2efe7;
  color: var(--ok);
}

.pill-churned,
.pill-unqualified,
.pill-lost {
  background: #eceae5;
  color: #3d4854;
}

.pill-proposal_sent {
  background: #f6eeda;
  color: var(--warn);
}

/* --------------------------------------------------------- screen reader */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------- view toggle and tabs */

.view-toggle,
.view-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.view-tabs {
  margin-bottom: 14px;
}

.view-toggle .btn,
.view-tabs .btn {
  font-size: 14px;
  padding: 8px 12px;
}

.btn.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.tab-count {
  display: inline-block;
  min-width: 20px;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.08);
  font-size: 12px;
  font-weight: 700;
}

.btn.is-active .tab-count {
  background: var(--torch);
  color: var(--ink);
}

/* ------------------------------------------------------------- kanban */

.kanban {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(240px, 1fr);
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
}

.kanban-col {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.kanban-head {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
}

.kanban-title {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.kanban-sum {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--ink-faint);
}

.kanban-body {
  padding: 10px;
  display: grid;
  gap: 10px;
  align-content: start;
}

.deal-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fffefc;
}

.deal-title {
  display: block;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.deal-title:hover {
  color: var(--torch-deep);
}

.deal-business {
  display: block;
  font-size: 13px;
  margin-top: 2px;
  overflow-wrap: anywhere;
}

.deal-value {
  margin: 8px 0 0;
  font-weight: 700;
  font-size: 17px;
}

.deal-meta {
  margin: 2px 0 8px;
  font-size: 12px;
  color: var(--ink-faint);
}

.stage-form {
  display: flex;
  gap: 6px;
}

.stage-form select {
  margin-bottom: 0;
  font-size: 14px;
  padding: 7px 8px;
}

.stage-go {
  font-size: 13px;
  padding: 7px 10px;
}

/* -------------------------------------------------------- tasks page */

.quick-add {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 16px;
}

.quick-add input,
.quick-add select {
  margin-bottom: 0;
}

@media (min-width: 720px) {
  .quick-add {
    grid-template-columns: 1fr 210px 130px auto;
    align-items: center;
  }
}

.task-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.task-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft);
}

.task-row:last-child {
  border-bottom: 0;
}

.task-row.is-done .task-title {
  text-decoration: line-through;
  color: var(--ink-faint);
}

.task-toggle {
  margin: 0;
}

.tick {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: #fffefc;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.tick:hover {
  border-color: var(--torch);
}

.tick.is-ticked {
  background: var(--ok);
  border-color: var(--ok);
  color: var(--paper);
}

.task-body {
  min-width: 0;
}

.task-title {
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.task-title:hover {
  color: var(--torch-deep);
}

.task-meta {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.is-overdue {
  color: var(--danger);
  font-weight: 600;
}

.task-row .pill {
  grid-row: auto;
  grid-column: auto;
}

/* ---------------------------------------------------------------- calendar */

.cal-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.cal-nav {
  display: flex;
  gap: 6px;
}

.cal-nav .btn {
  font-size: 14px;
  padding: 8px 12px;
}

.cal-heading {
  font-size: 17px;
  margin-right: auto;
}

.cal-legend {
  display: flex;
  gap: 8px;
  margin: 0;
  flex-wrap: wrap;
}

.cal-legend .chip {
  pointer-events: none;
}

/* Month grid. Below 700px it scrolls sideways inside its own box, because a
   seven column calendar cannot be squeezed into 390px and stay readable. */
.cal-month {
  position: relative;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.cal-headrow,
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(104px, 1fr));
  min-width: 728px;
}

.cal-dayname {
  padding: 8px 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  background: #efeee9;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line-soft);
}

.cal-dayname:last-child {
  border-right: 0;
}

.cal-cell {
  min-height: 104px;
  padding: 6px;
  border-bottom: 1px solid var(--line-soft);
  border-right: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.cal-cell:nth-child(7n) {
  border-right: 0;
}

.cal-cell.is-outside {
  background: #f1f0ec;
}

.cal-cell.is-outside .cal-daynum {
  color: var(--ink-faint);
}

.cal-cell.is-today {
  background: #fff0e9;
  box-shadow: inset 0 0 0 2px var(--torch);
}

.cal-daynum {
  align-self: flex-start;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 2px 6px;
  border-radius: 4px;
}

.cal-daynum:hover {
  background: var(--torch);
  color: var(--ink);
}

.cal-items {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

/* Week view: seven stacked day panels, which reads well on any width. */
.cal-week {
  display: grid;
  gap: 10px;
}

.cal-day {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
}

.cal-day.is-today {
  border-color: var(--torch);
  box-shadow: inset 0 0 0 1px var(--torch);
}

.cal-day-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.cal-day-title {
  font-size: 15px;
  margin-right: auto;
}

.cal-day-add {
  font-size: 13px;
  padding: 6px 12px;
}

/* Chips: an event is solid, a task is outlined so read only reads as read only. */
.chip {
  display: flex;
  gap: 5px;
  align-items: baseline;
  font-size: 12px;
  line-height: 1.35;
  padding: 3px 6px;
  border-radius: 4px;
  text-decoration: none;
  background: #ffe6dc;
  color: var(--danger);
  border: 1px solid transparent;
  min-width: 0;
}

.chip:hover {
  filter: brightness(0.95);
}

.chip-time {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  flex: 0 0 auto;
}

.chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip-task {
  background: transparent;
  border-style: dashed;
  border-color: var(--line);
  color: var(--ink-soft);
}

.chip-task.chip-high {
  border-color: var(--torch);
  color: var(--danger);
}

.chip-call,
.chip-meeting {
  background: #ffe6dc;
  color: var(--danger);
}

.chip-onboarding {
  background: #e2efe7;
  color: var(--ok);
}

.chip-followup {
  background: #f6eeda;
  color: var(--warn);
}

.chip-other {
  background: #eceae5;
  color: #3d4854;
}

/* -------------------------------------------------------------- danger form */

.danger-form {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

.btn-danger {
  border-color: #f5b9a4;
  color: var(--danger);
}

.btn-danger:hover {
  background: #ffe6dc;
}


/* --------------------------------------------------------------- settings */

.field-note {
  margin: -8px 0 18px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.form-ok {
  background: #e2efe7;
  border: 1px solid #b9d6c6;
  color: var(--ok);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 0 0 16px;
  font-size: 14px;
  font-weight: 600;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: #eceae5;
  border-radius: 4px;
  padding: 1px 5px;
}

/* =====================================================================
   PUBLIC PAGES  /enquire and /book
   Ink ground, paper card, torch accents. The same brand as the login
   screen, because this is the first thing a prospect ever sees.
   ===================================================================== */

body.pub {
  background: var(--ink);
  min-height: 100vh;
}

.pub-head {
  max-width: 620px;
  margin: 0 auto;
  padding: 26px 20px 0;
}

.pub-head .brand {
  color: var(--paper);
  margin-right: 0;
}

.pub-main {
  max-width: 620px;
  margin: 0 auto;
  padding: 20px 20px 60px;
}

.pub-card {
  background: var(--paper);
  border-radius: 14px;
  border-top: 4px solid var(--torch);
  padding: 30px 24px 28px;
}

@media (min-width: 560px) {
  .pub-card { padding: 38px 36px 34px; }
}

.pub-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.03em;
  margin-bottom: 8px;
}

@media (min-width: 560px) {
  .pub-title { font-size: 31px; }
}

.pub-lead {
  margin: 0 0 22px;
  font-size: 16.5px;
  color: var(--ink-soft);
}

.pub-sub {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-soft);
  margin: 26px 0 14px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.pub-hint {
  margin: -8px 0 16px;
  font-size: 13.5px;
  color: var(--ink-faint);
}

.pub-tz {
  margin: -14px 0 20px;
  font-size: 13.5px;
  color: var(--ink-faint);
}

.pub-alt {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  font-size: 14.5px;
  color: var(--ink-soft);
}

.pub-foot {
  text-align: center;
  margin: 22px 0 0;
  font-size: 12.5px;
  letter-spacing: .04em;
  color: #6d7078;
}

.btn-block {
  display: block;
  width: 100%;
  padding: 14px 16px;
  font-size: 16px;
  margin-top: 6px;
}

.pub-done { text-align: center; }
.pub-done .pub-alt { text-align: center; }
.pub-done svg { margin-bottom: 14px; }

/* ------------------------------------------------------------- slots */

.slots {
  display: grid;
  gap: 20px;
  margin-bottom: 4px;
}

.slot-day { min-width: 0; }

.slot-date {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
}

.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px;
}

.slot { position: relative; margin: 0; }

/* The radio is hidden but still focusable, so keyboard users get a ring. */
.slot input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.slot-time {
  display: block;
  text-align: center;
  padding: 11px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffefc;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}

.slot input:hover + .slot-time { border-color: var(--torch); }

.slot input:focus-visible + .slot-time {
  outline: 2px solid var(--torch);
  outline-offset: 2px;
}

.slot input:checked + .slot-time {
  background: var(--torch);
  border-color: var(--torch);
  color: var(--ink);
  font-weight: 700;
}

/* ------------------------------------------------- booking, three steps */

/* Panels are hidden by the script, never by CSS. With JavaScript off every
   step stays on screen and the form still books a call. */
.bk-panel {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.bk-steps {
  display: flex;
  gap: 6px;
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}

.bk-stepdot {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ink-faint);
  padding-top: 9px;
  border-top: 3px solid var(--line);
}

.bk-stepdot b {
  display: grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: var(--line);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
}

/* Done steps go dark, the step you are on goes torch. Both read as progress,
   and they do not look identical at a glance. */
.bk-stepdot.is-done { color: var(--ink-soft); border-top-color: var(--ink); }
.bk-stepdot.is-done b { background: var(--ink); color: var(--paper); }
.bk-stepdot.is-on { color: var(--ink); border-top-color: var(--torch); }
.bk-stepdot.is-on b { background: var(--torch); color: var(--ink); }

/* Timezone row */
.bk-tz {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 13.5px;
  color: var(--ink-soft);
}

.bk-tz label { margin: 0; font-size: 13.5px; text-transform: none; letter-spacing: 0; }

.bk-tz select {
  width: auto;
  margin: 0;
  padding: 6px 9px;
  font-size: 14px;
  border-radius: 6px;
}

.bk-tz-note {
  flex-basis: 100%;
  font-size: 12.5px;
  color: var(--ink-faint);
}

/* Day rail */
.bk-rail {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 10px;
  margin-bottom: 16px;
  position: relative;
  -webkit-overflow-scrolling: touch;
}

.bk-day {
  flex: 0 0 auto;
  font: inherit;
  text-align: center;
  line-height: 1.25;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffefc;
  color: var(--ink);
  cursor: pointer;
}

.bk-day:hover { border-color: var(--torch); }

.bk-day.is-on {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.bk-day-label { display: block; font-size: 14px; font-weight: 700; white-space: nowrap; }
.bk-day-count { display: block; font-size: 11.5px; opacity: .72; }

/* Chosen slot, echoed on steps two and three */
.bk-chosen {
  margin: 0 0 18px;
  padding: 11px 13px;
  border-radius: 8px;
  background: var(--canvas);
  border-left: 3px solid var(--torch);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}

.bk-chosen:empty { display: none; }

/* Step buttons */
.bk-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
}

.bk-actions .btn { flex: 1; padding: 13px 16px; font-size: 16px; }
.bk-actions .btn-block { margin-top: 0; }

.btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--ink-soft);
}

/* Only one day of times is on screen at a time, so the embedded widget stays
   about one screen tall instead of scrolling for three weeks. */
.bk-form .slots { gap: 0; margin-bottom: 0; }

/* Validation message drawn into the panel. The browser's own bubble does not
   reliably show inside an iframe, and an invisible warning reads as a dead
   button, so the step draws its own. */
.bk-error {
  margin: 16px 0 0;
  padding: 10px 12px;
  border-radius: 6px;
  background: #ffe6dc;
  border: 1px solid #f5b9a4;
  color: var(--danger);
  font-size: 14px;
  font-weight: 600;
}

.is-bad,
.is-bad:focus {
  border-color: var(--danger);
}

/* --------------------------------------------------------- automations tab */

.lede {
  max-width: 62ch;
  margin: 0 0 22px;
  font-size: 15.5px;
  color: var(--ink-soft);
}

.auto-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 760px) {
  .auto-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.auto-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px 16px;
}

.auto-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
}

.auto-name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-right: auto;
  min-width: 0;
}

.pill-soon {
  background: #eceae5;
  color: var(--ink-soft);
  flex: 0 0 auto;
}

.auto-when {
  margin: 0 0 7px;
  font-size: 13.5px;
  color: var(--ink-soft);
}

.auto-when b {
  text-transform: uppercase;
  letter-spacing: .07em;
  font-size: 11.5px;
  color: var(--ink-faint);
  margin-right: 4px;
}

.auto-does {
  margin: 0;
  font-size: 14.5px;
}

/* ------------------------------------------------- cancel and reschedule */

.chip.is-cancelled {
  opacity: .5;
  text-decoration: line-through;
}

.event-cancelled {
  margin: 0 0 14px;
  padding: 11px 13px;
  border-radius: 8px;
  background: #ffe6dc;
  border-left: 3px solid var(--danger);
  color: var(--danger);
  font-size: 14.5px;
  font-weight: 600;
}

.event-meet {
  margin: 0 0 14px;
  padding: 11px 13px;
  border-radius: 8px;
  background: var(--surface);
  border-left: 3px solid var(--torch);
  font-size: 14.5px;
  overflow-wrap: anywhere;
}

.event-meet b {
  display: block;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-faint);
  margin-bottom: 3px;
}

.event-ops {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}

.event-ops form { margin: 0; }

.notify-test {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

/* ------------------------------------------------------ marketing consent */

/* The box is unticked on purpose and never styled to look pre-selected.
   A pre-ticked box is not express consent. */
.consent-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 18px;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffefc;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-soft);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

.consent-check input {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  accent-color: var(--torch);
  cursor: pointer;
}

.consent-check:hover { border-color: var(--torch); }

.consent-note {
  margin: 0 0 16px;
  padding: 11px 13px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.5;
}

.consent-note b {
  display: block;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 3px;
}

.consent-note.is-yes {
  background: #e2efe7;
  border-left: 3px solid var(--ok);
  color: #17452e;
}

.consent-note.is-no {
  background: var(--canvas);
  border-left: 3px solid var(--line);
  color: var(--ink-soft);
}

.consent-note.is-out {
  background: var(--canvas);
  border-left: 3px solid var(--danger);
  color: var(--danger);
}

/* ---------------------------------------------------------------- outreach */
/* The email preview on the queue and prospect pages. Monospace, because what
   the person receives is plain text and it should look like plain text here
   too. Long lines wrap rather than pushing the page sideways. */

.mail-preview {
  margin: 0;
  padding: 14px 16px;
  background: var(--canvas);
  border: 1px solid var(--line);
  border-radius: 8px;
  font: 400 13.5px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Each queued email is a closed details block, so a hundred of them still fit
   on one screen and you open only the one you are about to send. */

details.panel > summary {
  cursor: pointer;
  font-size: 14.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

details.panel > summary::marker { color: var(--torch); }

details.panel > summary + * { margin-top: 14px; }

/* The held-back table explains itself in a sentence, so that column has to be
   allowed to wrap. Everything else in a table still stays on one line. */

.reason-cell {
  white-space: normal;
  min-width: 15rem;
}

/* The consent evidence link is a raw URL, and a raw URL has no spaces to break
   at. Without this it pushes the whole page sideways on a phone. */

.evidence-link {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ------------------------------------------------------------ conversations */

/* The thread. Replies sit left on paper, our messages sit right on canvas,
   so a glance tells whose turn it is even before reading a word. */
.convo-thread {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.convo-msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid #d8d6d0;
}

.convo-in {
  align-self: flex-start;
  background: var(--paper, #f7f6f3);
  border-left: 3px solid var(--torch, #ff4d0f);
}

.convo-out {
  align-self: flex-end;
  background: #eceae5;
}

.convo-meta {
  font-size: 12px;
  color: var(--ink-soft, #55606d);
  margin-bottom: 4px;
}

/* Emails keep their line breaks; long raw URLs must not widen the page. */
.convo-body {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.5;
}

.convo-snippet {
  color: var(--ink-soft, #55606d);
  font-size: 13px;
  max-width: 320px;
}

.pill-replied {
  background: #e2efe7;
  color: var(--ok);
}

/* ------------------------------------------------------------------ search */

/* On a phone the box wraps onto its own full width row under the menu button
   and the brand. On a desktop it is the only thing in the top bar, so it
   grows into the space, up to a width that still reads as a search box. */
.topsearch {
  position: relative;
  width: 100%;
  margin: 0;
}

/* The / hint. Desktop only, since a phone has no keyboard to press it on, and
   gone once the box is in use so it never sits on top of what is typed. */
.topsearch-key {
  display: none;
}

/* The shared field rule near the top of this file is four :not()s deep, so it
   out-specifies any sane class selector here. These are the only properties
   that clash, so they are the only ones forced. Font size is deliberately
   left to that rule, because its 16px is what stops iOS zooming the page when
   the box is tapped. Focus is left to it too: the torch outline still shows. */
.topsearch input {
  background: var(--paper)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2368727e' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E")
    no-repeat 13px 50% / 18px !important;
  padding-left: 40px !important;
  border-radius: 999px !important;
  margin-bottom: 0 !important;
}

.topsearch input::placeholder {
  color: var(--ink-faint);
}

@media (min-width: 900px) {
  .topsearch {
    width: auto;
    flex: 1 1 auto;
    max-width: 520px;
  }
  .topsearch-key {
    display: block;
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    padding: 1px 7px;
    border: 1px solid var(--line);
    border-radius: 5px;
    background: var(--surface);
    color: var(--ink-faint);
    font: 600 12px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace;
    pointer-events: none;
  }
  .topsearch input:focus + .topsearch-key,
  .topsearch input:not(:placeholder-shown) + .topsearch-key {
    display: none;
  }
}

.search-hits {
  list-style: none;
  margin: 0;
  padding: 0;
}

.search-hits li + li {
  border-top: 1px solid var(--line-soft);
}

/* Wraps rather than truncates: on a 390px screen the subtitle drops under the
   title instead of pushing the row sideways. */
.search-hits a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  padding: 10px 4px;
  color: inherit;
  text-decoration: none;
  border-radius: 6px;
}

.search-hits a:hover {
  background: var(--canvas);
}

.hit-title {
  font-weight: 700;
}

.hit-sub {
  color: var(--ink-soft);
  font-size: 13px;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------- files */

/* Sits in the same grid slot a status pill uses on a list row: second column,
   spanning both rows, so a long file name keeps the whole first column. */
.file-remove {
  grid-row: 1 / 3;
  grid-column: 2 / 3;
  align-self: center;
}

.file-remove button {
  padding: 5px 10px;
  font-size: 13px;
}

.file-form {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

/* --------------------------------------------------------- pipeline drag */

/* The grip is the only place a finger may start a drag: on a phone the rest
   of the card belongs to the scroller, and taking that away would leave the
   board impossible to scroll. A mouse can grab the card anywhere. */
.deal-grip {
  position: absolute;
  top: 6px;
  right: 7px;
  padding: 3px 2px;
  line-height: 1;
  font-size: 15px;
  color: var(--ink-faint);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.deal-grip:active {
  cursor: grabbing;
}

/* Keeps a long deal name from running underneath the grip. */
.deal-title {
  padding-right: 20px;
}

/* The copy of the card that follows the pointer. Fixed to the viewport, and
   transparent to hit testing so elementFromPoint can see the column below. */
.is-ghost {
  position: fixed;
  z-index: 100;
  margin: 0;
  pointer-events: none;
  opacity: 0.95;
  transform: rotate(1.5deg);
  box-shadow: 0 12px 28px rgba(11, 11, 12, 0.28);
}

.is-ghost .deal-grip {
  cursor: grabbing;
}

/* The gap the card will drop into. */
.deal-slot {
  border: 2px dashed var(--torch);
  border-radius: 8px;
  background: rgba(255, 77, 15, 0.06);
}

/* On the whole document, so a drag never selects text on the way past. */
body.is-dragging {
  user-select: none;
  -webkit-user-select: none;
  cursor: grabbing;
}

/* While the new order is being written. Deliberately subtle: the board is
   already correct on screen, this only says the server has not caught up. */
.kanban.is-saving {
  opacity: 0.85;
}

/* ------------------------------------------------- automations statuses */

.section-title {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin: 26px 0 12px;
}

.section-title:first-of-type {
  margin-top: 0;
}

.pill-live {
  background: #e2efe7;
  color: var(--ok);
  flex: 0 0 auto;
}

.pill-partial {
  background: #f6eeda;
  color: var(--warn);
  flex: 0 0 auto;
}

.pill-coming {
  background: #eceae5;
  color: var(--ink-soft);
  flex: 0 0 auto;
}

/* A live automation gets the torch edge, so the eye finds what is working
   before it finds what is not. */
.auto-live {
  border-left: 3px solid var(--torch);
}

.auto-missing {
  margin: 9px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
}

.auto-missing b {
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 11.5px;
  color: var(--ink-faint);
  margin-right: 4px;
}

/* ------------------------------------------------------------ daily brief */

.brief {
  margin-bottom: 18px;
}

.brief-eyebrow {
  margin: 0 0 2px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* The one line on the page that is allowed to be loud. */
.brief-headline {
  margin: 0;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

@media (min-width: 700px) {
  .brief-headline {
    font-size: 33px;
  }
}

.needs {
  margin-bottom: 18px;
}

.acts {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* A row is one thing waiting on you: what it is, who it is, how long it has
   been sitting there. The colour down the left edge is the urgency. */
.act {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  background: #fffefc;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--line);
  border-radius: 0 8px 8px 0;
}

.act + .act {
  margin-top: 8px;
}

.act:hover {
  background: var(--canvas);
}

.act-link {
  flex: 1 1 auto;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}

.act-what {
  display: block;
  font-weight: 700;
  font-size: 14.5px;
  overflow-wrap: anywhere;
}

.act-who {
  display: block;
  font-size: 12.5px;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

/* The wait is the entire point of the row, so it never wraps and never
   shrinks, however long the name beside it runs. */
.act-when {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  padding: 3px 9px;
  border-radius: 999px;
  background: #eceae5;
  color: #3d4854;
}

.act-hot {
  border-left-color: var(--torch);
}

.act-hot .act-when {
  background: #ffe6dc;
  color: var(--danger);
}

.act-warm {
  border-left-color: #d9a03a;
}

.act-warm .act-when {
  background: #f6eeda;
  color: var(--warn);
}

.act-due {
  border-left-color: var(--ink-faint);
}

.act-call {
  border-left-color: var(--ink);
}

.act-call .act-when {
  background: var(--ink);
  color: var(--paper);
}

.all-clear {
  margin: 0;
  font-size: 14.5px;
  color: var(--ink-soft);
  max-width: 60ch;
}

/* ==========================================================================
   Polish layer.

   Everything above defines what things are. This defines how they sit on the
   page: what is raised, what recedes, and what happens under the cursor. It
   is last on purpose, so a rule here always wins over the flat version above
   without any of them having to be rewritten.
   ========================================================================== */

/* Raised surfaces. The border stays, thinner and lighter, because a shadow
   alone disappears against a printed page or a high contrast display. */
.card,
.panel,
.auto-card {
  border-color: var(--line-soft);
  box-shadow: var(--shadow-sm);
}

/* Only cards that go somewhere lift, because lifting something you cannot
   click is a promise the interface does not keep. */
a.card {
  transition: box-shadow 0.14s ease, transform 0.14s ease, border-color 0.14s ease;
}

a.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* The number is the point of a metric card, so it gets the room and the
   weight, and the label shrinks back to a caption. */
.card-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--ink-faint);
}

.card-value {
  margin-top: 4px;
  letter-spacing: -0.035em;
}

/* A column of a board is the ground its cards sit on, so it has to stay
   darker than they are now that they are white. */
.kanban-col {
  background: #f1efea;
  border-color: var(--line-soft);
}

.deal-card {
  background: var(--surface);
  border-color: var(--line-soft);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.14s ease, transform 0.14s ease;
}

.deal-card:hover {
  box-shadow: var(--shadow-md);
}

/* Mid-drag the card should look picked up, not merely tilted. */
.is-ghost {
  box-shadow: 0 16px 34px rgba(28, 22, 12, 0.3) !important;
}

.act {
  border-color: var(--line-soft);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.14s ease, background 0.14s ease;
}

.act:hover {
  box-shadow: var(--shadow-md);
  background: var(--surface);
}

/* ---------------------------------------------------------------- tables */

/* A cell used to be told it could break anywhere once there was room for it
   to wrap, which turned every long address into "owen.bradshaw@example.co"
   above a lonely "m" and made each row three lines tall. Cells now keep to
   one line and trail off; the full value is one click away on the record,
   and the rows come back down to a readable height. */
@media (min-width: 900px) {
  td {
    white-space: nowrap;
    overflow-wrap: normal;
    max-width: 26ch;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

th {
  background: #f2f0eb;
  border-bottom: 1px solid var(--line);
}

tbody tr {
  transition: background 0.1s ease;
}

tbody tr:hover {
  background: #f6f4f0;
}

/* ------------------------------------------------------------------ forms */

/* The filter block is scaffolding around the data, not the data, so it sits
   flat on the page rather than competing with the panels for attention. */
.filters {
  box-shadow: none;
  background: transparent;
  border: 1px solid var(--line-soft);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select,
textarea {
  background: var(--surface);
  border-color: var(--line);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):hover,
select:hover,
textarea:hover {
  border-color: #c9c4bb;
}

/* --------------------------------------------------------------- buttons */

.btn {
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.06s ease;
}

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

.btn-primary {
  box-shadow: var(--shadow-sm);
}

/* Filters are scaffolding, so they get tighter spacing than a real form:
   the fields still breathe, but the block stops pushing the actual data most
   of a screen further down. */
.filters input,
.filters select {
  margin-bottom: 9px;
}

.filters label {
  color: var(--ink-faint);
  font-weight: 700;
}

.filter-actions {
  padding-bottom: 9px;
}

/* Section headings on a list page were the same weight as the data. */
.page-title {
  letter-spacing: -0.02em;
  font-weight: 800;
}

/* -------------------------------------------------------------- the read */

/* The brief is prose, not data, so it gets the one serif-free measure on the
   page that is set for reading rather than scanning. */
.read {
  margin-bottom: 18px;
  border-left: 3px solid var(--torch);
}

.read-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.62;
  max-width: 68ch;
  white-space: pre-wrap;
}

.read-again {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.read-again .field-note {
  margin: 0;
}

/* --------------------------------------------------------------- invoices */

.pill-draft {
  background: #eceae5;
  color: var(--ink-soft);
}

.pill-sent {
  background: #e8eef6;
  color: #2b4a6f;
}

.pill-paid {
  background: #e2efe7;
  color: var(--ok);
}

.pill-void {
  background: #eceae5;
  color: var(--ink-faint);
  text-decoration: line-through;
}

.pill-overdue {
  background: #ffe6dc;
  color: var(--danger);
}

/* The total is the number the whole page exists to state, so it sits apart
   from the lines rather than as one more row in the table. */
.invoice-total {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 2px solid var(--ink);
  text-align: right;
  font-size: 15px;
  color: var(--ink-soft);
}

.invoice-total b {
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-left: 10px;
}

.invoice-add {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

/* Bank details are copied by hand, so they keep their line breaks and get a
   face that makes a digit hard to misread. */
.pay-details {
  margin: 0;
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13.5px;
  line-height: 1.6;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 12px;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------- automation controls */

.auto-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.auto-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 13.5px;
  cursor: pointer;
}

.auto-switch input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--torch);
  cursor: pointer;
}

.auto-number {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--ink-soft);
}

/* Wide enough for three digits and no wider: a number box the width of the
   card reads as a text field and invites a sentence. */
.auto-number input {
  width: 76px;
  margin: 0;
  padding: 6px 8px;
  font-size: 14px;
}

.auto-suffix {
  color: var(--ink-faint);
}

/* The save button belongs to every card above it, so it sits apart from the
   grid rather than looking like it belongs to the last one. */
.auto-save {
  margin: 18px 0 6px;
}

/* --------------------------------------------------------------- research */

/* A leak is a finding with its evidence under it, so it reads as a claim you
   could defend rather than a bullet from a best practice list. */
.leak {
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}

.leak:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.leak-what {
  margin: 0 0 6px;
  font-size: 15.5px;
  font-weight: 700;
}

.leak-evidence {
  margin: 0 0 6px;
  font-size: 13.5px;
  color: var(--ink-soft);
}

.leak-evidence b {
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 11.5px;
  color: var(--ink-faint);
  margin-right: 5px;
}

/* The arithmetic, which is the part he says out loud on the call. */
.leak-cost {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
}

/* The one line that has to be true, so it is set apart from everything that
   is merely useful. */
.observation {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.55;
  padding: 12px 14px;
  background: var(--bg);
  border-left: 3px solid var(--torch);
  border-radius: 0 8px 8px 0;
  overflow-wrap: anywhere;
}

/* ================================================================ invoices
   The invoicing screens, rebuilt 6 Sept. The old ones were a form and a bare
   table, which is fine for entering data and useless for the two things this
   page is actually for: knowing what you are owed, and looking at the thing
   before a client does. */

/* The strip of numbers above the list. Four figures a business owner reads
   before anything else, so they sit above the tabs rather than inside a
   panel below them. */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}

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

.stat-value {
  margin: 0;
  font-size: 23px;
  font-weight: 650;
  letter-spacing: -0.025em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.stat-label {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: var(--ink-faint);
}

.stat-good .stat-value { color: var(--ok); }
.stat-bad  .stat-value { color: var(--danger); }

/* Money right aligned and tabular, so a column of figures can be scanned
   down rather than read across. */
.cell-money,
th.cell-money {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.row-late td { background: #fff6f2; }

.late {
  color: var(--danger);
  white-space: nowrap;
}

/* --------------------------------------------------------- line editing */

/* Each line is its own form laid out on one row, so a wrong price is fixed
   where it is rather than removed and retyped. It reflows to a stack on a
   phone; a five column grid at 390px would be unusable. */
.line-table { width: 100%; }

.line-table td.line-edit {
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
}

.line-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px 100px 90px auto auto;
  gap: 8px;
  align-items: center;
}

.line-form input {
  min-width: 0;
  margin: 0;
}

.line-amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

.btn-small {
  padding: 6px 10px;
  font-size: 13px;
}

@media (max-width: 700px) {
  .line-form {
    grid-template-columns: 1fr 1fr;
  }
  .line-form input:first-child {
    grid-column: 1 / -1;
  }
  .line-amount {
    grid-column: 1 / -1;
    text-align: left;
  }
}

/* A field whose whole job is to be copied. Monospaced so a token can be
   checked by eye, and it selects itself on focus. */
.copy-field {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
}

/* Terms, currency and the deal link are needed on maybe one invoice in ten,
   so they fold away rather than making every invoice look like a tax form. */
.more {
  margin: 4px 0 18px;
  border-top: 1px solid var(--line-soft);
  padding-top: 12px;
}

.more > summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 4px 0;
}

.more > summary:hover { color: var(--ink); }

/* ----------------------------------------------------- the invoice itself */

/* Shown twice: as the preview inside the CRM, and as the page the client
   opens. Same markup both times, so what you check is what they get. */
.panel-doc { padding: 0; overflow: hidden; }
.panel-doc > .panel-title { padding: 16px 18px 0; }

.doc-sheet {
  background: var(--surface);
  padding: 26px 24px 28px;
  color: var(--ink);
}

.doc-top {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--ink);
}

.doc-kicker {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--torch);
}

.doc-number {
  margin: 2px 0 0;
  font-size: 27px;
  font-weight: 680;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.doc-from { text-align: right; }

.doc-from-name {
  margin: 0;
  font-weight: 650;
  font-size: 15px;
}

.doc-from-line {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--ink-faint);
}

/* Billed to holds a business name, a person and an email, so it gets real
   width. Four equal columns broke an address across a line mid word, which
   on a document asking someone for money reads as carelessness. */
.doc-meta {
  display: grid;
  grid-template-columns: minmax(210px, 1.9fr) repeat(3, minmax(92px, 1fr));
  gap: 18px;
  padding: 18px 0 22px;
}

@media (max-width: 640px) {
  .doc-meta { grid-template-columns: 1fr 1fr; }
}

.doc-label {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.doc-value {
  margin: 5px 0 0;
  font-size: 15px;
  font-weight: 600;
}

.doc-sub {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--ink-soft);
  /* break-word, not anywhere: only split an address when it genuinely cannot
     fit, rather than at whatever character the line happens to end on. */
  overflow-wrap: break-word;
}

.doc-total-inline {
  font-size: 19px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.doc-lines { width: 100%; border-collapse: collapse; }

.doc-lines th {
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--line);
  padding: 0 10px 8px 0;
  text-align: left;
}

.doc-lines td {
  padding: 11px 10px 11px 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

.doc-lines .doc-num,
.doc-lines th.doc-num {
  text-align: right;
  padding-right: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.doc-desc { overflow-wrap: anywhere; }
.doc-amount { font-weight: 600; }

.doc-lines tfoot td {
  border-bottom: 0;
  border-top: 2px solid var(--ink);
  padding-top: 13px;
}

.doc-total-label {
  text-align: right;
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-right: 12px;
}

.doc-total {
  font-size: 21px;
  font-weight: 680;
  letter-spacing: -0.02em;
}

.doc-note {
  margin: 20px 0 0;
  font-size: 14px;
  color: var(--ink-soft);
  white-space: pre-wrap;
}

.doc-pay { margin-top: 22px; }
.doc-pay .pay-details { margin-top: 8px; }

.doc-paid,
.doc-void {
  margin: 20px 0 0;
  padding: 11px 14px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 14px;
}

.doc-paid { background: #e2efe7; color: var(--ok); }
.doc-void { background: #eceae5; color: var(--ink-faint); }

/* ------------------------------------------- the page the client opens */

body.doc {
  background: var(--bg);
  margin: 0;
}

.doc-main {
  max-width: 760px;
  margin: 0 auto;
  padding: 22px 16px 60px;
}

.doc-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 14px;
}

body.doc .doc-sheet {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 34px 32px 38px;
}

@media (max-width: 560px) {
  body.doc .doc-sheet { padding: 22px 18px 26px; }
  .doc-from { text-align: left; }
}

/* Printing is how this becomes a PDF, so it gets real attention rather than
   being left to the browser. No shadow, no button, no wasted margin. */
@media print {
  body.doc { background: #fff; }
  .doc-main { max-width: none; padding: 0; }
  .doc-actions { display: none; }
  body.doc .doc-sheet {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
  }
  .doc-lines tr { page-break-inside: avoid; }
  .pay-details { background: #fff; }
}

/* .field-note carries a -8px top margin so it tucks tightly under a form
   field, which is right inside a form and wrong straight after one. After a
   button, the invoice rail's full width one or any form's submit, the
   negative margin drags the note up into the button's own box. Only a p:
   the brief's inline span note beside its button must stay where it is. */
.detail-side form + .field-note,
.btn-block + .field-note,
.btn + p.field-note {
  margin-top: 8px;
}

/* A four column money table at 390px only just fits. Tightening the type and
   the gutters lands it inside the phone rather than leaving the amount, the
   one column that matters, hanging off the right edge behind a scrollbar. */
@media (max-width: 480px) {
  .doc-lines { font-size: 13px; }
  .doc-lines th {
    font-size: 10px;
    letter-spacing: 0.05em;
  }
  .doc-lines td,
  .doc-lines th { padding-right: 8px; }
  .doc-total { font-size: 19px; }
  .doc-total-label { padding-right: 8px; }
}

/* ------------------------------------------------ Google on the calendar */

/* Your Google events, drawn read only beside the CRM's own. Blue, from the
   same family as the Sent pill, so they read as living somewhere else rather
   than as one more kind of CRM event. */
.chip-google {
  background: #e8eef6;
  color: #2b4a6f;
  border-color: #d3deeb;
}

/* Shown when Google could not be read, so a missing overlay is explained
   instead of looking like there is nothing in your calendar. */
.cal-note {
  margin: 0 0 12px;
  padding: 9px 12px;
  border-radius: 8px;
  background: #fff6f2;
  border: 1px solid #f3d9cd;
  font-size: 13px;
  color: var(--ink-soft);
}

/* Two classes deep so it beats .record-form label, which stacks a label
   above its field; a checkbox belongs beside its words. */
.record-form .check-line {
  display: flex;
  gap: 9px;
  align-items: center;
  margin: 4px 0 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}

.record-form .check-line input {
  margin: 0;
  width: auto;
  flex: 0 0 auto;
}

/* ------------------------------------------------------------ call recorder */

/* Sits above the transcript box it fills. A box of its own, so it reads as a
   tool rather than as more form fields. */
.recorder {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--paper);
  padding: 14px 14px 6px;
  margin: 4px 0 18px;
}

/* Its buttons and labels carry display rules that beat the hidden attribute,
   so hidden is stated outright here. */
.recorder [hidden] {
  display: none !important;
}

.recorder.is-recording {
  border-color: var(--torch);
  box-shadow: 0 0 0 3px rgba(255, 77, 15, 0.12);
}

.rec-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.record-form .rec-mode {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}

.record-form .rec-mode input {
  margin: 0;
  width: auto;
  accent-color: var(--torch);
}

.record-form .rec-mode:has(input:checked) {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}

.rec-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 4px 0 2px;
}

/* A pulsing dot beside the time: the universal sign that something is
   listening. Still, for anyone who has asked for less motion. */
.rec-clock {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.rec-clock::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--torch);
  animation: rec-pulse 1.2s ease-in-out infinite;
}

@keyframes rec-pulse {
  50% { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
  .rec-clock::before { animation: none; }
}

.rec-status {
  margin: 6px 0 12px;
  min-height: 1.2em;
  font-size: 13px;
  color: var(--ink-soft);
}

/* The rows an import carries between its steps. Stated outright, because
   .record-form textarea gives every textarea a display that beats hidden. */
.import-data {
  display: none !important;
}

/* The column matching step, shown once a file has been read. */
.import-step {
  margin-top: 18px;
}

.import-step[hidden] {
  display: none !important;
}

/* Lead Finder, and the call list, which is the same job on a different
   source. Cards rather than a table, so a row reads on a phone without
   scrolling sideways and every action is a thumb-sized button. */
.find-list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 12px;
}

.find-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.find-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.find-name {
  margin: 0;
  font-size: 17px;
  overflow-wrap: anywhere;
}

.find-name a {
  color: var(--ink);
}

/* The leak score, a round badge beside the name. */
.find-score {
  flex: 0 0 auto;
  min-width: 36px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #ffe6dc;
  color: var(--danger);
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.find-meta,
.find-why {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

.find-why {
  color: var(--ink);
}

.find-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
}

.find-actions,
.find-mark-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.find-actions {
  margin-top: 10px;
}

.find-mark {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}

.find-mark select,
.find-mark input {
  margin-bottom: 8px;
}

/* Mark and note side by side once there is room; stacked on a phone. */
@media (min-width: 640px) {
  .find-mark {
    display: grid;
    grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
    column-gap: 8px;
  }
  .find-mark-actions {
    grid-column: 1 / -1;
  }
}

.find-saved {
  font-size: 13px;
  color: var(--ink-soft);
}

.find-summary {
  margin: 20px 0 2px;
}

.find-more {
  margin: 0 0 24px;
}

.find-setup {
  margin: 10px 0 0;
  padding-left: 20px;
  line-height: 1.6;
}

/* A button beside a list row's text, placed the way a pill is. */
.list-action {
  grid-row: 1 / 3;
  grid-column: 2 / 3;
  align-self: center;
}