@font-face {
  font-family: 'Archivo';
  src: url(fonts/archivo-latin.woff2) format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

@font-face {
  font-family: 'Oswald';
  src: url(fonts/oswald-latin.woff2) format('woff2');
  font-weight: 200 700;
  font-display: swap;
}

@font-face {
  font-family: 'Barlow Condensed';
  src: url(fonts/barlow-condensed-600-latin.woff2) format('woff2');
  font-weight: 600;
  font-display: swap;
}

:root {
  --red: #D8261C;
  --red-pressed: #B51F17;
  --red-tint: #FCEBEA;
  --overdue: #B42318;
  --ink: #121212;
  --graphite: #3A3A3A;
  --muted: #6B6B6B;
  --line: #E6E4E0;
  --input-line: #D6D3CE;
  --row-line: #EFEDE9;
  --page: #F6F5F3;
  --table-head: #FAFAF8;
  --lane: #EFEEEA;
  --neutral: #F2F1EE;
  --surface: #FFFFFF;
  --success-icon: #16A34A;
  --body: 'Archivo', system-ui, sans-serif;
  --heading: 'Oswald', 'Arial Narrow', sans-serif;
  --label: 'Barlow Condensed', 'Arial Narrow', sans-serif;
}

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

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font: 400 14px/20px var(--body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, fieldset {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.icon {
  display: inline-block;
  flex: none;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  mask: var(--icon) center / contain no-repeat;
}

.icon-nav-leads { --icon: url(icons/nav-leads.png); }
.icon-nav-distributors { --icon: url(icons/nav-distributors.png); }
.icon-nav-emails-to-sort { --icon: url(icons/nav-emails-to-sort.png); }
.icon-nav-follow-ups { --icon: url(icons/nav-follow-ups.png); }
.icon-nav-sharepoint-import { --icon: url(icons/nav-sharepoint-import.png); }
.icon-nav-sign-out { --icon: url(icons/nav-sign-out.png); }
.icon-eye { --icon: url(icons/eye.png); }
.icon-check { --icon: url(icons/check.png); }
.icon-calendar { --icon: url(icons/calendar.png); }
.icon-clock { --icon: url(icons/clock.png); }
.icon-stage-new { --icon: url(icons/stage-new.png); }
.icon-stage-contacted { --icon: url(icons/stage-contacted.png); }
.icon-stage-talking { --icon: url(icons/stage-talking.png); }
.icon-stage-ready-for-approval { --icon: url(icons/stage-ready-for-approval.png); }
.icon-stage-parked { --icon: url(icons/stage-parked.png); }
.icon-stage-not-a-fit { --icon: url(icons/stage-not-a-fit.png); }
.icon-add { --icon: url(icons/add.png); }
.icon-chevron-down { --icon: url(icons/chevron-down.png); }
.icon-edit { --icon: url(icons/edit.png); }
.icon-email { --icon: url(icons/email.png); }
.icon-external-link { --icon: url(icons/external-link.png); }
.icon-note { --icon: url(icons/note.png); }
.icon-user { --icon: url(icons/user.png); }
.icon-follow-up { --icon: url(icons/follow-up.png); }
.icon-park { --icon: url(icons/park.png); }
.icon-not-a-fit { --icon: url(icons/not-a-fit.png); }
.icon-match-website-form { --icon: url(icons/match-website-form.png); }
.icon-match-saved-sender { --icon: url(icons/match-saved-sender.png); }
.icon-match-distributor-domain { --icon: url(icons/match-distributor-domain.png); }
.icon-match-crm-label { --icon: url(icons/match-crm-label.png); }
.icon-send { --icon: url(icons/send.png); }
.icon-info { --icon: url(icons/info.png); }
.icon-stage-approved { --icon: url(icons/stage-approved.png); }
.icon-mark-approved { --icon: url(icons/mark-approved.png); }
.icon-archive { --icon: url(icons/archive.png); }
.icon-tag { --icon: url(icons/tag.png); }
.icon-link { --icon: url(icons/link.png); }
.icon-close { --icon: url(icons/close.png); }
.icon-merge { --icon: url(icons/merge.png); }
.icon-warning { --icon: url(icons/warning.png); }
.icon-undo { --icon: url(icons/undo.png); }

.sign-in-page {
  position: relative;
  min-height: 100vh;
  background: var(--ink) url(images/sign-in-background.png) left bottom / cover no-repeat;
  color: var(--surface);
}

.sign-in {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 64px;
  padding: 48px 120px;
}

.pitch {
  max-width: 640px;
}

.eyebrow {
  font: 600 13px/16px var(--label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--input-line);
}

.eyebrow::before {
  content: '';
  display: block;
  width: 40px;
  height: 4px;
  margin-bottom: 24px;
  background: var(--red);
}

.pitch h1 {
  margin-top: 16px;
  font: 600 56px/64px var(--heading);
  text-transform: uppercase;
}

.pitch-line {
  margin-top: 20px;
  font-size: 18px;
  line-height: 28px;
  color: var(--input-line);
}

.pitch-points {
  display: grid;
  gap: 16px;
  margin-top: 32px;
}

.pitch-points li {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 18px;
  line-height: 28px;
}

.pitch-points .icon {
  width: 24px;
  height: 24px;
  color: var(--red);
}

.sign-in-card {
  flex: none;
  width: 440px;
  padding: 40px;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
  color: var(--ink);
  text-align: center;
}

.lockup {
  display: block;
  margin: 0 auto;
}

.sign-in-card h2 {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font: 600 32px/40px var(--heading);
  text-transform: uppercase;
}

.card-sub {
  margin-top: 4px;
  color: var(--muted);
}

.sign-in-card form {
  display: grid;
  margin-top: 32px;
  text-align: left;
}

.sign-in-message {
  margin-bottom: 20px;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--red-tint);
  color: var(--overdue);
  font-size: 13px;
  line-height: 18px;
}

.sign-in-card label {
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  color: var(--graphite);
}

.sign-in-card label[for='password'] {
  margin-top: 20px;
}

.sign-in-card input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--input-line);
  border-radius: 6px;
  background: var(--surface);
}

.sign-in-card input::placeholder {
  color: #9A9A9A;
}

.sign-in-card input:focus-visible {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(216, 38, 28, 0.15);
}

.password {
  position: relative;
}

.password input {
  padding-right: 48px;
}

.show-password {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--graphite);
  cursor: pointer;
}

.show-password:hover {
  background: var(--neutral);
}

.show-password[aria-pressed='true'] {
  color: var(--red);
}

.primary {
  height: 48px;
  margin-top: 28px;
  border: 0;
  border-radius: 6px;
  background: var(--red);
  color: var(--surface);
  font-weight: 600;
  cursor: pointer;
}

.primary:hover, .primary:active {
  background: var(--red-pressed);
}

.card-note {
  margin-top: 20px;
  font-size: 12px;
  line-height: 16px;
  color: var(--muted);
}

.address {
  position: absolute;
  left: 32px;
  bottom: 32px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
}

.connect-result {
  justify-content: center;
}

.connect-result .card-sub {
  margin-top: 12px;
  color: var(--graphite);
}

.connect-result .primary {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

@media (max-width: 1040px) {
  .sign-in {
    justify-content: center;
    padding: 48px 24px 96px;
  }

  .pitch {
    display: none;
  }
}

.app {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  grid-template-rows: 64px minmax(0, 1fr);
  min-height: 100vh;
  background: var(--page);
}

.sidebar {
  position: sticky;
  top: 0;
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: var(--surface);
  border-right: 1px solid var(--line);
}

.brand {
  height: 72px;
  padding: 9px 24px 0;
}

.brand img {
  display: block;
}

.menu {
  margin-top: 16px;
  padding: 0 12px;
}

.menu-group {
  margin-bottom: 8px;
  padding: 0 12px;
  font: 600 12px/16px var(--label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.menu ul {
  display: grid;
  gap: 4px;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
  padding: 0 12px;
  border-radius: 6px;
  color: var(--ink);
  font-size: 14px;
  text-decoration: none;
}

a.menu-item:hover {
  background: var(--neutral);
}

.menu-item.active {
  background: var(--red-tint);
  box-shadow: inset 3px 0 0 var(--red);
  font-weight: 600;
}

.menu-item.active .icon {
  color: var(--red);
}

.sign-out {
  margin-top: auto;
  padding: 0 12px 20px;
}

.sign-out .menu-item {
  width: 100%;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.sign-out .menu-item:hover {
  background: var(--neutral);
  color: var(--ink);
}

.top-bar {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 32px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.staff {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--surface);
  font-weight: 600;
}

.staff-name {
  display: grid;
}

.staff-name strong {
  font-weight: 600;
  line-height: 18px;
}

.staff-name span {
  font-size: 12px;
  line-height: 16px;
  color: var(--muted);
}

.main {
  position: relative;
  grid-column: 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 32px;
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.page-header h1 {
  font: 600 28px/36px var(--heading);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.page-header > div > p {
  margin-top: 4px;
  color: var(--muted);
}

.banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--neutral);
  color: var(--graphite);
  font-size: 13px;
  line-height: 18px;
}

.banner > .icon {
  color: var(--graphite);
}

.banner p {
  flex: 1;
  min-width: 0;
}

.banner strong {
  font-weight: 600;
  color: var(--ink);
}

.banner.warning {
  border-color: #F6DDB6;
  background: #FDF0DC;
  color: #9A4A07;
}

.banner.warning > .icon {
  color: #D97706;
}

.banner.warning strong {
  color: #9A4A07;
}

.banner .text-link {
  flex: none;
  font-weight: 600;
}

.banner.warning .text-link {
  color: #9A4A07;
}

.mailbox-state {
  margin-top: 7px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-size: 12px;
  line-height: 16px;
  color: var(--muted);
}

.chip.connected {
  background: #E3F3E8;
  color: #166534;
}

.chip.connected .icon {
  width: 14px;
  height: 14px;
  color: var(--success-icon);
}

.button {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.button .icon {
  width: 16px;
  height: 16px;
}

.button-primary {
  background: var(--red);
  color: var(--surface);
}

.button-primary:hover, .button-primary:active {
  background: var(--red-pressed);
}

.button-secondary {
  border-color: var(--input-line);
  background: var(--surface);
  color: var(--ink);
}

.button-secondary:hover {
  background: var(--table-head);
}

.breadcrumb {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 13px;
  line-height: 18px;
  color: var(--muted);
}

.breadcrumb a {
  color: var(--graphite);
  text-decoration: none;
}

.breadcrumb a:hover {
  color: var(--ink);
  text-decoration: underline;
}

.card {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(18, 18, 18, 0.06);
}

.card-title {
  font: 600 13px/16px var(--label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
  align-items: start;
  gap: 16px;
  margin-top: 24px;
}

.form-card {
  padding: 0 20px 20px;
}

.form-message {
  margin-top: 20px;
  padding: 10px 12px;
  border-radius: 6px;
  background: var(--red-tint);
  color: var(--overdue);
  font-size: 13px;
  line-height: 18px;
}

.form-group {
  padding: 20px 0;
  border-bottom: 1px solid var(--row-line);
}

.form-group .card-title {
  margin-bottom: 16px;
}

.fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 16px;
}

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

.field {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0;
  border: 0;
}

.field.wide, .fields > .next-follow-up {
  grid-column: 1 / -1;
}

.field label, .field legend {
  margin-bottom: 6px;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  color: var(--graphite);
}

.optional {
  font-weight: 400;
  color: var(--muted);
}

.field input, .field select, .field textarea {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--input-line);
  border-radius: 6px;
  background: var(--surface);
}

.field textarea {
  height: auto;
  min-height: 72px;
  max-height: 400px;
  padding: 8px 12px;
  resize: vertical;
  field-sizing: content;
}

.field input[readonly] {
  background: var(--table-head);
  color: var(--graphite);
}

.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(216, 38, 28, 0.15);
}

.field [aria-invalid='true'] {
  border-color: var(--overdue);
}

.field-problem {
  margin-top: 6px;
  font-size: 12px;
  line-height: 16px;
  color: var(--overdue);
}

.select {
  position: relative;
}

.field select {
  padding-right: 36px;
  appearance: none;
  cursor: pointer;
}

.select .icon {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 16px;
  height: 16px;
  color: var(--ink);
  pointer-events: none;
}

.segmented {
  display: flex;
  height: 36px;
  padding: 2px;
  border-radius: 6px;
  background: var(--neutral);
}

.segmented label {
  flex: 1;
  display: flex;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: var(--ink);
}

.segmented input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.segmented span {
  flex: 1;
  display: grid;
  place-items: center;
  border-radius: 4px;
  white-space: nowrap;
  cursor: pointer;
}

.segmented input:checked + span {
  background: var(--ink);
  color: var(--surface);
  font-weight: 600;
}

.segmented input:focus-visible + span {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
}

.form-note {
  margin-left: 8px;
  font-size: 12px;
  line-height: 16px;
  color: var(--muted);
}

.checklist {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.check-badge {
  display: grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--success-icon);
  color: var(--surface);
}

.check-badge .icon {
  width: 14px;
  height: 14px;
}

@media (max-width: 1100px) {
  .form-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.summary li {
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
}

.summary li.alert {
  border-color: rgba(180, 35, 24, 0.3);
  color: var(--overdue);
}

.board {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 4fr)) minmax(0, 3fr);
  gap: 8px;
  margin-top: 24px;
}

.lane {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: 8px;
  background: var(--lane);
}

.side-lanes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.side-lanes .lane:last-child {
  flex: 1;
}

.lane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 4px 2px 0;
  font: inherit;
}

.lane-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--graphite);
}

.stage-chip, .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
}

.stage-chip .icon {
  width: 14px;
  height: 14px;
}

.stage-new { background: #EAF0FE; color: #1D4ED8; }
.stage-new .icon { color: #2563EB; }
.stage-contacted { background: #E2F3F4; color: #0B6B73; }
.stage-contacted .icon { color: #0E8C94; }
.stage-talking { background: #FDF0DC; color: #9A4A07; }
.stage-talking .icon { color: #D97706; }
.stage-ready-for-approval { background: #121212; color: #FFFFFF; }
.stage-ready-for-approval .icon { color: #FFFFFF; }
.stage-parked { background: #EEF1F5; color: #475569; }
.stage-parked .icon { color: #64748B; }
.stage-not-a-fit { background: #EFEDEA; color: #57534E; }
.stage-not-a-fit .icon { color: #78716C; }
.stage-approved { background: #E3F3E8; color: #166534; }
.stage-approved .icon { color: var(--success-icon); }
.stage-former { background: #EEEDEA; color: var(--graphite); }
.lane-head .stage-not-a-fit { background: #E6E3DE; }

.lead-card {
  position: relative;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(18, 18, 18, 0.06);
}

.lead-card:hover {
  border-color: var(--input-line);
}

.lead-card:has(.card-link:focus-visible) {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.card-link {
  color: inherit;
  text-decoration: none;
}

.card-link:focus-visible {
  outline: none;
}

.card-link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 8px;
}

.lead-card h3 {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.lead-meta {
  margin-top: 2px;
  font-size: 12px;
  line-height: 16px;
  color: var(--muted);
}

.contact-person {
  margin-top: 6px;
  color: var(--graphite);
}

.lead-foot {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--row-line);
}

.follow-up, .revisit {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 18px;
  color: var(--graphite);
}

.follow-up time, .revisit time {
  white-space: nowrap;
}

.follow-up .icon, .revisit .icon {
  width: 16px;
  height: 16px;
  color: var(--ink);
}

.follow-up.overdue, .follow-up.overdue .icon {
  color: var(--overdue);
}

.lead-tags {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.overdue-chip {
  margin-right: auto;
  background: var(--red-tint);
  color: var(--overdue);
}

.responsible {
  background: var(--neutral);
  color: var(--ink);
}

.responsible.not-assigned {
  border: 1px dashed var(--input-line);
  background: none;
  color: var(--overdue);
}

.chip.no-follow-up {
  border: 1px dashed var(--input-line);
  background: none;
  color: var(--muted);
}

.lead-tags .no-follow-up {
  margin-right: auto;
}

.reason {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-size: 13px;
  line-height: 18px;
  color: var(--graphite);
  overflow-wrap: anywhere;
}

.empty-state {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
  padding: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  text-align: center;
}

.empty-state h2, .empty-state h3 {
  margin-top: 16px;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.empty-state p {
  margin-top: 4px;
  color: var(--muted);
}

.footnote {
  margin-top: 16px;
  font-size: 12px;
  line-height: 16px;
  color: var(--muted);
}

.button-small {
  height: 28px;
  padding: 0 12px;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.text-link:hover {
  color: var(--red-pressed);
}

.text-link .icon {
  width: 16px;
  height: 16px;
}

.not-given, .empty-line {
  color: var(--muted);
}

.page-header .record-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: var(--graphite);
}

.record-meta span:last-child {
  margin-left: 8px;
}

.chip.kind {
  background: #EEEDEA;
  color: var(--graphite);
}

.header-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.stage-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.approval-rule {
  font-size: 12px;
  line-height: 16px;
  color: var(--muted);
}

.stage-action {
  position: relative;
}

.stage-action[open] > summary {
  background: var(--neutral);
}

.stage-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 10;
  width: 360px;
  box-shadow: 0 8px 24px rgba(18, 18, 18, 0.12);
}

.stage-panel .form-actions {
  padding-top: 16px;
}

.chip.match {
  background: var(--neutral);
  color: var(--ink);
}

.chip.match .icon {
  width: 14px;
  height: 14px;
}

details > summary {
  list-style: none;
  cursor: pointer;
}

details > summary::-webkit-details-marker {
  display: none;
}

.stage-bar {
  display: flex;
  margin-top: 24px;
}

.stage-step {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stage-step + .stage-step {
  margin-left: -10px;
}

.stage-shape {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  padding: 0 24px;
  font-weight: 600;
  white-space: nowrap;
}

.stage-shape svg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.stage-shape .icon {
  width: 16px;
  height: 16px;
}

.stage-step.done .fill {
  fill: var(--lane);
}

.stage-step.current .stage-shape {
  color: var(--surface);
}

.stage-step.current .fill {
  fill: var(--ink);
}

.stage-step.todo .stage-shape {
  font-weight: 400;
  color: var(--graphite);
}

.stage-step.todo .fill {
  fill: var(--surface);
}

.stage-step.todo .edge {
  fill: none;
  stroke: #B9B5AE;
  stroke-dasharray: 5 4;
}

.stage-date {
  margin-top: 6px;
  font-size: 12px;
  line-height: 16px;
  color: var(--muted);
}

.record {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 366fr) minmax(0, 472fr) minmax(0, 358fr);
  align-items: stretch;
  gap: 16px;
  margin-top: 16px;
}

.record-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.record-side > :last-child {
  flex: 1;
}

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

.detail-list {
  margin: 12px 0 0;
}

.detail-list div {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 8px;
  padding: 9px 0;
  border-top: 1px solid var(--row-line);
}

.detail-list dt {
  font: 600 14px/20px var(--label);
  color: var(--muted);
}

.detail-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.detail-aside {
  font-size: 12px;
  font-stretch: 85%;
  color: var(--graphite);
}

.tabs {
  display: flex;
  gap: 24px;
}

.tabs a {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: -1px;
  padding: 0 4px 10px;
  border-bottom: 2px solid transparent;
  color: var(--graphite);
  font-weight: 500;
  text-decoration: none;
}

.tabs a:hover {
  color: var(--ink);
}

.tabs a[aria-current='page'] {
  border-bottom-color: var(--red);
  color: var(--ink);
  font-weight: 600;
}

.count {
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: #EEEDEA;
  color: var(--graphite);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.note-form {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
}

.note-form textarea {
  flex: 1;
  min-width: 0;
  min-height: 36px;
  max-height: 200px;
  padding: 7px 12px;
  border: 1px solid var(--input-line);
  border-radius: 6px;
  background: var(--surface);
  line-height: 20px;
  resize: none;
  field-sizing: content;
}

.note-form textarea::placeholder {
  color: #9A9A9A;
}

.note-form textarea:focus-visible {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(216, 38, 28, 0.15);
}

.note-form [aria-invalid='true'] {
  border-color: var(--overdue);
}

.enquiry {
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.enquiry h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

.enquiry-meta {
  margin: 2px 0 0 32px;
  font-size: 13px;
  line-height: 18px;
  color: var(--muted);
}

.enquiry-text {
  margin-top: 12px;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.enquiry-link {
  margin-top: 12px;
}

.email summary {
  display: block;
}

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

.email-subject {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.email .enquiry-meta {
  display: block;
}

.timeline-email {
  flex: 1;
  min-width: 0;
}

.timeline-email summary {
  overflow-wrap: anywhere;
}

.timeline-email .chip {
  vertical-align: 1px;
}

.timeline-email .enquiry-text {
  margin-top: 8px;
  color: var(--ink);
}

.timeline-email .enquiry-link {
  margin-top: 8px;
}

.timeline {
  position: relative;
  margin-top: 12px;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 4px;
  width: 1px;
  background: var(--input-line);
}

.timeline li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-left: 24px;
  padding: 12px 0;
  border-bottom: 1px solid var(--row-line);
  font-size: 13px;
  line-height: 18px;
  color: var(--graphite);
}

.timeline li:last-child {
  border-bottom: 0;
}

.timeline li::before {
  content: '';
  position: absolute;
  top: 17px;
  left: -24px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #C9C6C0;
}

.timeline .icon {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--ink);
}

.timeline p {
  min-width: 0;
  overflow-wrap: anywhere;
}

.timeline time {
  color: var(--muted);
}

.timeline .who {
  white-space: nowrap;
}

.timeline-card .empty-line {
  margin-top: 16px;
}

.follow-up-action {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.chip.due {
  margin-top: 6px;
  background: var(--neutral);
  color: var(--ink);
}

.chip.due-today {
  background: var(--ink);
  color: var(--surface);
}

.chip.due.overdue-chip {
  background: var(--red-tint);
  color: var(--overdue);
}

.follow-up-who {
  margin-top: 8px;
  color: var(--graphite);
}

.record-side .empty-line {
  margin-top: 12px;
}

.people {
  margin-top: 12px;
}

.people li {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--row-line);
}

.person-avatar {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #EEEDEA;
  color: var(--ink);
  font-weight: 600;
}

.person {
  min-width: 0;
}

.person-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.chip.main-contact {
  height: 20px;
  background: var(--neutral);
  color: var(--graphite);
  font-size: 11px;
}

.person-line {
  font-size: 13px;
  line-height: 18px;
  color: var(--graphite);
  overflow-wrap: anywhere;
}

.to-confirm .person-avatar {
  border: 1px dashed var(--input-line);
  background: var(--surface);
  color: var(--graphite);
}

.to-confirm .person-name > span:first-child {
  overflow-wrap: anywhere;
}

.chip.to-confirm {
  height: 20px;
  background: #FDF0DC;
  color: #9A4A07;
  font-size: 11px;
}

.person-actions {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-top: 6px;
  font-size: 13px;
  line-height: 18px;
}

.person-actions .link-button {
  margin-top: 0;
  font-size: 13px;
  line-height: 18px;
}

.link-button {
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--graphite);
  font-size: 12px;
  line-height: 16px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.link-button:hover {
  color: var(--ink);
}

.add-person {
  margin-top: 8px;
}

.notes {
  margin-top: 12px;
}

.notes li {
  padding: 12px 0;
  border-top: 1px solid var(--row-line);
}

.notes li:last-child {
  padding-bottom: 0;
}

.note-text {
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.note-meta {
  margin-top: 4px;
  font-size: 12px;
  line-height: 16px;
  color: var(--muted);
}

.check-field {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.check-field input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--red);
}

@media (max-width: 1100px) {
  .record {
    grid-template-columns: minmax(0, 1fr);
  }
}

.checks {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}

.check-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(18, 18, 18, 0.06);
}

.check-card img {
  flex: none;
}

.check-words {
  flex: 1;
  min-width: 0;
}

.check-name {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-weight: 600;
}

.check-count {
  font-weight: 400;
  color: var(--graphite);
  white-space: nowrap;
}

.check-rule {
  margin-top: 2px;
  font-size: 12px;
  line-height: 16px;
  color: var(--muted);
}

.sorting {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 49fr) minmax(0, 51fr);
  gap: 16px;
  margin-top: 24px;
}

.sorting > :only-child {
  grid-column: 1 / -1;
}

.panel-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font: 600 20px/28px var(--heading);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.panel-sub {
  margin-top: 2px;
  color: var(--muted);
}

.panel .empty-line {
  margin-top: 16px;
}

.sorting .panel {
  display: flex;
  flex-direction: column;
}

.panel .empty-state {
  margin-top: 16px;
  padding: 32px 16px;
  border: 0;
}

.count.attention {
  background: var(--red);
  color: var(--surface);
}

.to-sort {
  display: grid;
  gap: 12px;
  margin: 16px -12px 0;
}

.to-sort > li {
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.to-sort > li:has(> details[open]) {
  border-color: #F4D3D0;
  background: var(--red-tint);
  box-shadow: inset 3px 0 0 var(--red);
}

.to-sort-email summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 16px;
}

.to-sort-from {
  display: grid;
  min-width: 0;
}

.to-sort-from strong {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.to-sort-from span {
  font-size: 13px;
  line-height: 18px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.to-sort-email time {
  font-size: 13px;
  color: var(--graphite);
  white-space: nowrap;
}

.to-sort-subject {
  grid-column: 1 / -1;
  margin-top: 6px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.to-sort-snippet {
  margin-top: 2px;
  color: var(--graphite);
  overflow-wrap: anywhere;
}

.to-sort-reason {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
  font-size: 13px;
  line-height: 18px;
  color: var(--graphite);
}

.to-sort-reason .icon {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--muted);
}

.sort-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 12px;
}

.sort-actions > form > .button, .sort-choice > summary {
  width: 100%;
}

.sort-choice {
  position: relative;
}

.sort-choice[open] > summary {
  background: var(--neutral);
}

.sort-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 10;
  width: 320px;
  box-shadow: 0 8px 24px rgba(18, 18, 18, 0.12);
}

.sort-panel .form-actions {
  padding-top: 16px;
}

.matched {
  margin: 16px -12px 0;
  border: 1px solid var(--line);
  border-radius: 6px;
}

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

.matched summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.625rem 8.625rem minmax(0, 11.125rem);
  align-items: center;
  column-gap: 8px;
  padding: 12px;
}

.matched summary:hover {
  background: var(--table-head);
}

.matched details[open], .matched details[open] summary:hover {
  background: var(--page);
}

.matched-from {
  display: grid;
  min-width: 0;
}

.matched-from strong {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.matched-from span {
  font-size: 13px;
  line-height: 18px;
  color: var(--graphite);
  overflow-wrap: anywhere;
}

.matched summary .chip {
  justify-self: start;
}

.matched time {
  align-self: start;
  text-align: right;
  font-size: 13px;
  color: var(--graphite);
  white-space: nowrap;
}

.matched-to {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.arrow {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.matched-reason {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 0 12px 12px;
  font-size: 13px;
  line-height: 18px;
  color: var(--graphite);
}

.matched-reason .icon {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--muted);
}

.matched-action {
  margin-top: -4px;
  padding: 0 12px 12px 36px;
  font-size: 13px;
  line-height: 18px;
}

.matched-action .text-link {
  font-weight: 600;
}

@media (max-width: 1100px) {
  .checks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sorting {
    grid-template-columns: minmax(0, 1fr);
  }
}

.toast {
  position: absolute;
  top: 32px;
  right: 32px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100% - 64px);
  padding: 12px 12px 12px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 8px 24px rgba(18, 18, 18, 0.12);
}

.toast strong {
  font-weight: 600;
}

.toast-close {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: var(--graphite);
}

.toast-close:hover {
  background: var(--neutral);
  color: var(--ink);
}

.toast-close .icon {
  width: 16px;
  height: 16px;
}

.page-tabs {
  margin-top: 24px;
  border-bottom: 1px solid var(--line);
}

.distributors {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  margin-top: 24px;
}

.table-card {
  padding: 0;
  overflow: hidden;
}

.page-tabs + .table-card {
  margin-top: 24px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th {
  height: 36px;
  padding: 0 12px;
  border-bottom: 1px solid var(--line);
  background: var(--table-head);
  font: 600 12px/16px var(--label);
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.data-table td {
  height: 52px;
  padding: 10px 12px;
  border-top: 1px solid var(--row-line);
  vertical-align: middle;
  overflow-wrap: anywhere;
}

.data-table th:first-child, .data-table td:first-child {
  padding-left: 16px;
}

.distributors-table {
  table-layout: fixed;
}

.distributors-table th:nth-child(1) { width: 22%; }
.distributors-table th:nth-child(2) { width: 16%; }
.distributors-table th:nth-child(3) { width: 18.5%; }
.distributors-table th:nth-child(4) { width: 13%; }
.distributors-table th:nth-child(5) { width: 15.5%; }
.distributors-table th:nth-child(6) { width: 15%; }

.data-table tbody tr:first-child td {
  border-top: 0;
}

.data-table tbody tr:hover {
  background: var(--table-head);
}

.distributors-table tbody tr {
  position: relative;
}

.distributors-table tr.selected {
  background: var(--red-tint);
  box-shadow: inset 3px 0 0 var(--red);
}

.distributors-table tr.selected:hover {
  background: var(--red-tint);
}

.data-table .company {
  font-weight: 600;
}

.row-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.row-link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.row-link:focus-visible {
  outline: none;
}

.distributors-table tr:has(.row-link:focus-visible) {
  outline: 2px solid var(--red);
  outline-offset: -2px;
}

.old-files {
  position: relative;
  z-index: 1;
  white-space: nowrap;
  text-decoration: none;
}

.old-files:hover {
  text-decoration: underline;
}

.chip.new-today, .chip.former, .company .chip.no-follow-up {
  height: 20px;
  margin-top: 4px;
  font-size: 11px;
}

.company .chip:not(:last-child) {
  margin-right: 6px;
}

.chip.new-today {
  background: #E3F3E8;
  color: #166534;
}

.chip.former {
  background: #EEEDEA;
  color: var(--graphite);
}

.none {
  color: var(--muted);
}

.business-panel {
  position: sticky;
  top: 24px;
  padding: 24px 20px 20px;
}

.business-panel-title {
  font: 600 24px/32px var(--heading);
  letter-spacing: 0.01em;
  overflow-wrap: anywhere;
}

.panel-standing {
  margin-top: 12px;
}

.panel-line {
  margin-top: 8px;
  color: var(--muted);
}

.panel-fields {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--row-line);
}

.panel-fields div {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 8px;
}

.panel-fields dt {
  font: 600 14px/20px var(--label);
  color: var(--muted);
}

.panel-fields dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.domain {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.domain .icon {
  width: 16px;
  height: 16px;
}

.panel-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--row-line);
}

.panel-people {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.panel-people li, .person-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.person-label {
  font-weight: 600;
}

.person-role {
  color: var(--graphite);
}

.panel-history {
  display: grid;
  gap: 6px;
  margin: 12px 0;
  font-size: 13px;
  line-height: 18px;
  color: var(--graphite);
}

.panel-history li {
  overflow-wrap: anywhere;
}

.panel-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--row-line);
}

.panel-actions > .button, .former-action {
  flex: 1;
}

.former-action {
  position: relative;
}

.former-action > summary {
  width: 100%;
}

.former-action[open] > summary {
  background: var(--neutral);
}

.confirm-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 10;
  width: 320px;
  box-shadow: 0 8px 24px rgba(18, 18, 18, 0.12);
}

.confirm-panel .form-actions {
  padding-top: 16px;
}

.table-link {
  position: relative;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--input-line);
  text-underline-offset: 3px;
}

.table-link:hover {
  text-decoration-color: currentColor;
}

@media (max-width: 1100px) {
  .distributors {
    grid-template-columns: minmax(0, 1fr);
  }

  .business-panel {
    position: static;
  }
}

.button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.button-primary:disabled:hover {
  background: var(--red);
}

.stepper {
  display: flex;
  align-items: center;
  max-width: 1130px;
  margin-top: 16px;
  padding: 0 32px;
}

.step {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
}

.step:last-child {
  flex: none;
}

.step:not(:last-child)::after {
  content: '';
  flex: 1;
  height: 1px;
  margin: 0 24px 0 12px;
  background: var(--input-line);
}

.step-mark {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--muted);
  color: var(--surface);
  font-weight: 600;
}

.step-mark .icon {
  width: 18px;
  height: 18px;
}

.step.done .step-mark {
  background: var(--success-icon);
}

.step.current .step-mark {
  background: var(--red);
}

.step-label {
  white-space: nowrap;
}

.step.current .step-label {
  font-weight: 600;
}

.import-form {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.batch-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding: 12px 20px;
}

.batch-title {
  display: flex;
  flex: none;
  align-items: center;
  gap: 24px;
  max-width: 50%;
  font: inherit;
}

.batch-number {
  flex: none;
  font: 600 28px/36px var(--heading);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.batch-name {
  overflow: hidden;
  color: var(--graphite);
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 12px;
  height: 40px;
  margin-left: 72px;
  padding: 0 16px;
  border: 1px solid var(--input-line);
  border-radius: 6px;
}

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

.file-chip {
  max-width: 40%;
}

.file-chip + .file-chip {
  margin-left: 0;
}

.file-icon {
  flex: none;
}

.batch-count {
  flex: none;
  margin-left: auto;
  padding-left: 24px;
  border-left: 1px solid var(--line);
  color: var(--muted);
  line-height: 36px;
}

.batch-count:has(.batch-undone) {
  line-height: 18px;
  text-align: right;
}

.batch-undone {
  display: block;
}

.import-layout {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  margin: 16px 0 24px;
}

.import-main {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.counters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.counter {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 88px;
  padding: 16px 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(18, 18, 18, 0.06);
}

.counter strong {
  min-width: 52px;
  font: 600 32px/40px var(--heading);
}

.counter-words {
  display: grid;
}

.counter-aside {
  font-size: 13px;
  line-height: 18px;
  color: #9A4A07;
}

.marking {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.marking-dot {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.marking-dot.new, .marking-dot.merged { background: #2563EB; }
.marking-dot.already, .marking-dot.added { background: var(--success-icon); }
.marking-dot.duplicate { background: #D97706; }
.marking-dot.skipped, .marking-dot.removed, .marking-dot.reversed { background: #9A9A9A; }

.marking-chip.new, .marking-chip.merged { background: #EAF0FE; color: #1D4ED8; }
.marking-chip.already, .marking-chip.added { background: #E3F3E8; color: #166534; }
.marking-chip.duplicate { background: #FDF0DC; color: #9A4A07; }
.marking-chip.skipped, .marking-chip.removed, .marking-chip.reversed { background: var(--neutral); color: var(--graphite); }

.reason-line {
  display: block;
  margin: 2px 0 0 18px;
  font-size: 12px;
  line-height: 16px;
  color: var(--muted);
}

.reason-line .table-link {
  color: inherit;
}

.form-message[role='alert'] {
  margin-top: 0;
}

.import-card {
  padding: 0;
  overflow: hidden;
}

.import-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-right: 12px;
  border-bottom: 1px solid var(--line);
}

.show-tabs {
  display: flex;
  gap: 8px;
  padding: 8px 12px 0;
}

.show-tabs label {
  position: relative;
  display: flex;
}

.show-tabs input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.show-tabs label > span {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-bottom: 2px solid transparent;
  border-radius: 6px 6px 0 0;
  background: var(--neutral);
  color: var(--graphite);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}

.show-tabs label > span:hover {
  color: var(--ink);
}

.show-tabs input:checked + span {
  border-bottom-color: var(--red);
  background: var(--red-tint);
  color: var(--ink);
  font-weight: 600;
}

.show-tabs input:focus-visible + span {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

.import-table {
  table-layout: fixed;
}

.import-table th:nth-child(1) { width: 12.9%; }
.import-table th:nth-child(2) { width: 18.1%; }
.import-table th:nth-child(3) { width: 11.8%; }
.import-table th:nth-child(4) { width: 13%; }
.import-table th:nth-child(5) { width: 26%; }
.import-table th:nth-child(6) { width: 18.2%; }

.saved-table th:nth-child(5) { width: 44.2%; }

.import-table th, .import-table td {
  padding: 8px 6px;
}

.import-table th {
  padding-block: 0;
}

.import-table th + th, .import-table td + td {
  border-left: 1px solid var(--row-line);
}

.import-table tbody tr {
  scroll-margin: 96px 0;
}

.import-card:has(input[value='new']:checked) tbody tr:not(.marked-new),
.import-card:has(input[value='already']:checked) tbody tr:not(.marked-already),
.import-card:has(input[value='duplicate']:checked) tbody tr:not(.marked-duplicate) {
  display: none;
}

.source {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.business-kind {
  display: block;
  font-size: 12px;
  line-height: 16px;
  color: var(--muted);
}

.decide {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.decide .button {
  padding: 0 8px;
  font-size: 13px;
  font-weight: 500;
}

.decide .button[aria-pressed='true'] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--surface);
}

.select.keep select {
  width: 100%;
  height: 32px;
  padding: 0 36px 0 12px;
  border: 1px solid var(--input-line);
  border-radius: 6px;
  background: var(--surface);
  appearance: none;
  cursor: pointer;
}

.select.keep select:focus-visible {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(216, 38, 28, 0.15);
}

.select.keep .icon {
  top: 8px;
}

.import-check {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.import-check input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--red);
  cursor: pointer;
}

.showing {
  padding: 14px 16px;
  border-top: 1px solid var(--row-line);
  font-size: 13px;
  line-height: 18px;
  color: var(--muted);
}

.showing > span {
  display: none;
}

.import-card:has(input[value='all']:checked) .showing-all,
.import-card:has(input[value='new']:checked) .showing-new,
.import-card:has(input[value='already']:checked) .showing-already,
.import-card:has(input[value='duplicate']:checked) .showing-duplicate {
  display: inline;
}

.import-side {
  display: grid;
  gap: 16px;
}

.earlier-batches {
  padding: 16px;
}

.earlier-batches ul {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.earlier-batches .empty-line {
  margin-top: 12px;
}

.earlier-batches li {
  display: grid;
  justify-items: start;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.earlier-batch {
  display: grid;
  gap: 2px;
  color: inherit;
  text-decoration: none;
}

.earlier-batch:hover .earlier-name {
  text-decoration: underline;
  text-decoration-color: var(--input-line);
  text-underline-offset: 3px;
}

.earlier-undone {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 16px;
  color: var(--muted);
}

.earlier-undone .icon {
  width: 14px;
  height: 14px;
}

.undo-note {
  margin-top: 8px;
  font-size: 12px;
  line-height: 16px;
  color: var(--muted);
  text-wrap: pretty;
}

.domain-name {
  display: block;
}

.undo-table .reason-line {
  margin-left: 0;
}

.earlier-name strong {
  font-weight: 600;
}

.earlier-meta {
  font-size: 12px;
  line-height: 16px;
  color: var(--muted);
}

.archive-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--neutral);
  font-size: 13px;
  line-height: 18px;
  color: var(--graphite);
}

.archive-note .icon {
  color: var(--ink);
}

.import-footer {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: auto -32px -32px;
  padding: 16px 32px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.footer-status {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--graphite);
}

.footer-status.to-decide {
  color: #9A4A07;
  font-weight: 600;
}

.footer-status.to-decide .icon {
  color: #D97706;
}

.footer-status.ready .icon {
  color: var(--success-icon);
}

.footer-actions {
  display: flex;
  gap: 12px;
}

.pick-files {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px;
  text-align: center;
}

.pick-files h2 {
  margin-top: 16px;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.pick-line {
  margin-top: 4px;
  color: var(--muted);
}

.upload-form {
  display: grid;
  gap: 16px;
  width: 100%;
  max-width: 440px;
  margin-top: 24px;
  text-align: left;
}

.upload-form input[type='file'] {
  height: auto;
  padding: 6px;
}

.upload-form input[type='file']::file-selector-button {
  height: 28px;
  margin-right: 12px;
  padding: 0 12px;
  border: 1px solid var(--input-line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font: 600 14px/20px var(--body);
  cursor: pointer;
}

.upload-form input[type='file']::file-selector-button:hover {
  background: var(--table-head);
}

.upload-form input::placeholder {
  color: #9A9A9A;
}

.upload-note {
  font-size: 12px;
  line-height: 16px;
  color: var(--muted);
}

.upload-form .button {
  justify-self: start;
}

.next-batch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.next-batch p {
  margin-top: 6px;
}

.typed-layout {
  margin-top: 16px;
}

.form-head {
  padding-top: 20px;
}

.form-head h2, .undo-head h2 {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

.typed-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 13px;
  line-height: 18px;
  color: var(--graphite);
}

.typed-note .icon {
  width: 16px;
  height: 16px;
}

.undo-card {
  padding: 0;
  overflow: hidden;
}

.undo-head {
  padding: 20px;
}

.undo-head p {
  margin-top: 4px;
  color: var(--graphite);
}

.undo-section {
  padding: 16px 20px 12px;
  border-top: 1px solid var(--line);
}

.undo-empty {
  padding: 0 20px 20px;
  color: var(--muted);
}

.undo-table {
  table-layout: fixed;
}

.undo-table th:nth-child(1) { width: 14%; }
.undo-table th:nth-child(2) { width: 22%; }
.undo-table th:nth-child(3) { width: 19%; }
.undo-table th:nth-child(4) { width: 25%; }
.undo-table th:nth-child(5) { width: 20%; }

.reversed-table th:nth-child(3) { width: 40%; }
.reversed-table th:nth-child(4) { width: 24%; }

.undo-table th:first-child, .undo-table td:first-child {
  padding-left: 20px;
}

.columns-card {
  padding: 20px 0 0;
  overflow: hidden;
}

.columns-card .card-title, .columns-line {
  padding: 0 20px;
}

.columns-line {
  margin-top: 6px;
  color: var(--graphite);
}

.columns-table {
  margin-top: 16px;
  border-top: 1px solid var(--line);
}

.columns-table td {
  height: 44px;
}

.columns-table th:first-child, .columns-table td:first-child {
  width: 40%;
  padding-left: 20px;
}

.column-notes {
  display: grid;
  gap: 6px;
  padding: 16px 20px;
  border-top: 1px solid var(--row-line);
  font-size: 13px;
  line-height: 18px;
  color: var(--graphite);
}

@media (max-width: 1100px) {
  .import-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .batch-bar {
    flex-wrap: wrap;
  }
}

.menu-badge {
  min-width: 18px;
  height: 18px;
  margin-left: auto;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--red);
  color: var(--surface);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.button-ghost {
  background: none;
  color: var(--ink);
}

.button-ghost:hover {
  background: var(--neutral);
}

.follow-up-card {
  position: relative;
}

.follow-up-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.follow-up-actions .button-secondary {
  min-width: 96px;
}

.follow-up-choice[open] > summary {
  background: var(--neutral);
}

.follow-up-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 10;
  box-shadow: 0 8px 24px rgba(18, 18, 18, 0.12);
}

.follow-up-form {
  display: grid;
  gap: 20px;
}

.follow-up-popover .follow-up-form {
  margin-top: 16px;
}

.follow-up-form .form-actions {
  padding-top: 0;
}

.next-when {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.fields .next-when {
  column-gap: 16px;
}

.date-input {
  position: relative;
}

.date-input .icon {
  position: absolute;
  top: 10px;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--ink);
  pointer-events: none;
}

.field .date-input input {
  padding-left: 38px;
}

.date-input input::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  opacity: 0;
  cursor: pointer;
}

.follow-up-rule {
  font-size: 12px;
  line-height: 16px;
  color: var(--muted);
}

.timeline .late {
  color: var(--overdue);
}

.filters {
  display: flex;
  gap: 8px;
}

.filter {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 20px;
  border: 1px solid var(--input-line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.filter:hover {
  background: var(--table-head);
}

.filter.active {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--surface);
  font-weight: 600;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(18, 18, 18, 0.06);
}

.stat.alert {
  box-shadow: inset 3px 0 0 var(--red), 0 1px 2px rgba(18, 18, 18, 0.06);
}

.stat-number {
  font: 600 32px/40px var(--heading);
}

.stat.alert .stat-number {
  color: var(--overdue);
}

.stat-label {
  font-size: 13px;
  line-height: 18px;
  color: var(--graphite);
}

.stat .check-badge {
  width: 36px;
  height: 36px;
}

.stat .check-badge .icon {
  width: 20px;
  height: 20px;
}

.follow-ups {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 24px;
}

.follow-ups-table {
  table-layout: fixed;
}

.follow-ups-table thead th:nth-child(4) { width: 142px; }
.follow-ups-table thead th:nth-child(5) { width: 116px; }
.follow-ups-table thead th:nth-child(6) { width: 150px; }

.follow-ups-table thead td {
  height: 36px;
  border-top: 0;
  border-bottom: 1px solid var(--line);
  background: var(--table-head);
}

.follow-ups-table .mark {
  width: 56px;
  padding-right: 0;
}

.follow-ups-table td:nth-child(n+4) {
  white-space: nowrap;
  overflow-wrap: normal;
}

.follow-ups-table tbody tr {
  position: relative;
}

.follow-ups-table .group-row th {
  height: 44px;
  padding: 16px 16px 8px;
  border-top: 1px solid var(--row-line);
  border-bottom: 0;
  background: none;
  font-size: 14px;
  color: var(--graphite);
}

.follow-ups-table tbody:first-of-type .group-row th {
  border-top: 0;
}

.follow-ups-table .group-overdue .group-row th {
  color: var(--overdue);
}

.follow-ups-table .group-doneToday .group-row th {
  color: var(--muted);
}

.follow-ups-table tbody tr:not(:has(.row-link)):hover {
  background: none;
}

.follow-ups-table .empty-row td {
  height: 44px;
  color: var(--muted);
}

.follow-ups-table tr.selected, .follow-ups-table tr.selected:hover {
  background: var(--red-tint);
  box-shadow: inset 3px 0 0 var(--red);
}

.follow-ups-table tr:has(.row-link:focus-visible) {
  outline: 2px solid var(--red);
  outline-offset: -2px;
}

.ring {
  display: block;
  width: 24px;
  height: 24px;
  border: 1.5px solid #B9B5AE;
  border-radius: 50%;
}

.ring.late {
  border-color: var(--overdue);
}

.ring.missing {
  border-style: dashed;
}

.follow-ups-table td.late {
  color: var(--overdue);
}

.follow-ups-table tr.done td {
  color: var(--muted);
}

.follow-ups-table tr.done .chip.responsible:not(.not-assigned) {
  color: var(--graphite);
}

.follow-up-panel {
  padding: 20px;
}

.panel-business {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

.panel-business .stage-chip {
  margin-top: 5px;
}

.panel-name {
  font: 600 24px/32px var(--heading);
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.panel-name:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.panel-action {
  margin-top: 8px;
  font-size: 16px;
  line-height: 24px;
}

.panel-due {
  margin-top: 2px;
  font-weight: 600;
  color: var(--graphite);
}

.panel-due.late {
  color: var(--overdue);
}

.follow-up-panel .follow-up-form {
  margin-top: 24px;
}

.follow-up-panel .form-actions > * {
  flex: 1;
}

.follow-up-panel .empty-line {
  margin-top: 16px;
}

@media (max-width: 1100px) {
  .follow-ups {
    grid-template-columns: minmax(0, 1fr);
  }
}